I ran across something the other day that made wonder about doing range requests using ajax. For some reason it wasn't obvious at first if this would be easy but as it turns out it is.
If you aren't familiar with range requests head over to the HTTP RFC and check out the range header. Your web server needs to support range requests for this to be useful but most do so that shouldn't be a huge issue. As a bonus you will find that some CDNs support range request as well (Amazon S3 for example).
I recently had a chance to try out Google's closure compiler. The closure compiler is similar to the YUI compressor except that along with minimizing it may rewrite the JavaScript. If you want to understand more about what it does start at the overview documentation and then go from there.
What I needed was a way to use the closure compiler in an Ant task. The Ant task that comes with the library is good but there wasn't a way for me to integrate it into an existing system that wasn't going to change. After looking around for some example code and not finding any I went into the library's Ant task and figured out how to wire it all up myself.
Modernizr is a Javascript library that detects the presence of browser functionality. This makes life a lot easier when using more modern features on your website by encapsulating all the feature tests into a library you don't have to worry about. You can use Modernizr either in your own Javascript or you can use the CSS classes it sets on the HTML element.
To get a full list of the browser functionality that is tested check out the Modernizr docs. If the feature you need a test for isn't available it is fairly easy to add new tests as well.
I'll start with an example that shows how to use the feature tests in Javascript. After Modernizr runs it populates the "Modernizr" structure with boolean values for each functionality test. This example waits for the page to load and then simply populates a DIV with text depending on your browsers support for web sockets:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - Javascript Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
if (Modernizr.websockets)
{
$("#result").html('Your browser has support for Web Sockets');
}
else
{
$("#result").html('Your browser does not support Web Sockets');
}
});
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>
See this code in action: Modernizr Javascript example.
You can try this example with an older version of Firefox and the text should indicate that there is no support for web sockets. Try again with a newer version of Google's Chrome browser and the page will indicate that there is support for web sockets.
The next example shows how to use the Modernizr CSS support. The key here is to know that the library will inject classes into the HTML tag. Those classes correspond to the functionality tests and are listed in the documentation. I am again testing for web sockets support and Modernizr will set the HTML class to either no-websockets or websockets and display one of two DIVs:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - CSS Example</title>
<style type="text/css" media="screen">
div.wsno, div.wsyes { display: none }
.no-websockets div.wsno { display: block }
.websockets div.wsyes { display: block }
</style>
<script src="modernizr.js" type="text/javascript"></script>
</head>
<body>
<div class="wsno">
Your browser does not support WebSockets.
</div>
<div class="wsyes">
Your browser supports WebSockets.
</div>
</body>
</html>
See this code in action: Modernizr CSS example.
For a much more detailed CSS example check out this A List Apart article.
If you need the information Modernizr assembles outside of the browser check out Modernizr on the server.
While I was putting together the two demo pages for this I discovered a new service much like the Google Javascript library CDN but with more Javascript libraries. It is called Cached Commons and it uses Github's CDN.
Vitamin has a good article today on the importance of maintainable javascript. 95% of what the article covers is applicable to any code. The important parts of the article cover javascript specific things like: object literals, namespaces and where to go when you want to compress your javascript to save bandwidth/make it download faster. They recommend packer and JSMIN as two javascript compressors but I think JSMIN is probably a better bet mainly because you can run it from the command line and make it part of a build script.
This is a great article about the yahoo ui tools. I mention it mainly because they have a nice scrolling widget a lot like what I put together as an example of the things you can do with script.aculo.us (see Smooth Scrolling Image List).
A link to the demo: Sliding demo
The entire article: 15 things you can do with yahoo ui
Tags: yahoo ui, script.aculo.us, javascript
I like seeing more and more uses of prototype. I'm not sure if the big guys will win out with their UI toolkits (Yahoo UI/GWT) or if it will always feel better to put things together by hand. Either way it is good to understand how this stuff works. This is an edit in place example that is similar to what you see on flickr.
I've seen something like this a number of times when I've visited sites. They want your feedback on something or other while you are browsing. It is a little floating plus feedback sign that hangs out in the lower right hand corner. Check it out.
Browsing digg I noticed an article on "unobtrusive sidenotes" and found that the idea is pretty cool: The announcement and code. They are done with javascript so you can turn them on and off on the fly.
Tags: javascript, ajax, sidenote, ajax feedback, prototype
This has been done before with PHP (AJAX upload progress meter for PHP) etc but I needed something a little different because I wanted to upload a file and then have it loaded into a database. I looked around and found that someone had already made something that used the commons file upload package to do the upload part (AJAX Upload progress monitor for Commons-FileUpload Example). It wasn't exactly what I was looking for but it a good start.
I had someone ask me about fitting more images in a small area and the way flickr does their image scrolling came to mind. I wanted to see how hard it was to do and as it turns out it isn't hard to do at all thanks to script.aculo.us.
I'm making this as simple as I can to illustrate just how nice the new tools like script.aculo.us are.
Step 1. You need a box and some images. You will also need to know the size of the images or at least the size of the largest one. In an attempt to keep this simple I'm going to assume all the images are the same size.
Have you ever wondered what you can do if someone doesn't have javascript turned on and it is needed on the page they are sitting at? Well here is the answer:
<html>
<head>
<noscript><meta http-equiv="refresh" content="0; URL=nojscript.html"/></noscript>
</head>
<body>
A javascript test.
</body>
</html>
If the user doesn't have javascript turned on they will be redirected to the page nojscript.html. It doesn't work as well as having a page in between that does the detection but if you have to do it on the page you need the javascript on this is the way to go.
Tags: javascript