Best of 2008 – JavaScript

In the last part of our summary series, it is time to see some of the JavaScript Goodies of 2008. Some of the following are resources, some are useful tutorials, some opinions and others just plain fun interesting stuff.

There is always a lesson or two to take away from these, and it could help you enter the New Year with a variety of new skills in your portfolio.

sIFR Lite

Once upon a time some really good web developers created sIFR. Their goal was to seamlessly convert HTML headlines into nice fonts. Well, these developers did a great job getting it to work nicely. Looking at their code, I decided I would create a “lite” version of sIFR using a more object-oriented approach. sIFR Lite is a bit easier to read, and more intuitive to use.”

Visit site

DD_belatedPNG

Support for 24-bit PNG alpha-translucency background-image + background-position + background-repeat for IE 6 at last!

Visit site

The EqualHeights jQuery Plugin

“Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.”

Visit site

jQuery.popeye – an inline lightbox alternative

“The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.”

Visit site

DD_roundies

An easy way to implement round corners in IE.

“No 9-cell tables for one round box. No images. Doesn’t add a half-dozen or more HTML nodes to a container element (more like one, maximum of two, and only in IE).”

Visit site

Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.”

Visit site

jQuery Corners 0.3

“This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.”

Another round corner script for your benefit!

Visit site

Superfish jQuery menu plugin

“Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements.”

Visit site

JavaScript Will Save Us All

Eric Meyer’s opinion on why we should look to JavaScript to extended standard support badly lacking in many browsers, instead of waiting for the browser vendors to implement them.

Visit site

CSS Sprites2 – It’s JavaScript Time

“A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own.”

Visit site

jParallax

“jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.”

Pure joy!

Visit site

Fixed Footers without JavaScript

A pure CSS technique to position fixed footers, tested down to IE 5.5.

Visit site

Dynamic Layout

“Dynamic Layout is a simple JavaScript library that allows you to easily adjust page layout based on the current browser width.”

Visit site

Stop using Ajax!

“Ajax is a sound and useful idea. But every idea comes down to a practical implementation – a technology that makes it happen – and in this case the technology is immature, because it leaves groups of users behind. Most notable and greatly affected are those using assistive technologies, but also those using less capable browsers that don’t support the necessary scripting objects, or don’t support scripting at all. ”

Visit site

This is how you get sIFR to work

“The goal of this tutorial is to distill the information at the official site for sIFR into a simple step-by-step process of how to implement sIFR on your site.

After following this tutorial you will have a basic understanding of how sIFR works and will be able to expand into more advanced areas.”

Visit site

FancyZoom

Smooth Javascript Image Zooming For Your Web Pages. 

Visit site

Rotating 3D cube in JavaScript

Nothing more, nothing less! Check it out.

Visit site

Super Mario in 14kB Javascript

Here’s an experiment in keeping things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.

Visit site

10 Smart Javascript Techniques to Improve Your UI

“Javascript is typically used as an aesthetic language in web development. This means that web developers should almost always be using Javascript for one thing only: Improving the visitor’s experience. There are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.”

Visit site

25 Amazing JavaScript Games (Some Fun And Inspiration)

“JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.

Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas).”

Visit site

Top 5 Favorite Bookmarklets

“Bookmarklets are the JavaScript-enabled links you can pull into your bookmarks that interact with whatever page you find yourself on. The best bookmarklets act as you would typically expect a toolbar to, by extending your browsing experience. However, since they’re written in JavaScript, they all by working within the browser and without requiring installation. Here are 5 highly recommended bookmarklets you can drag to your browser’s toolbar or to your bookmarks to extend your browsing experience.”

Visit site

10 Promising JavaScript Frameworks

“Popular JavaScript frameworks/libraries like jQuery, MooTools, Prototype, and YUI (to name a few of the most popular JavaScript frameworks out there) definitely have a solid foothold in the JavaScript framework arena. But for the more adventurous developers looking for new or alternative frameworks/libraries – there are some excellent frameworks outside the popular ones that’s worth checking out.”

Visit site

5 Useful Coding Solutions For Designers and Developers

“Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.”

Visit site

Calling WebServices via AJAX

This tutorial will give you a good idea of how to use JavaScript to interact with WebServices.

Visit site

JavaScript Pretty Date

“… A simple way to format old JavaScript dates in a “pretty” way. ”

Visit site

JavaScript iPhone Apps

“I’ve been watching, with interest, developers create new applications for the iPhone. Owning one myself – and being knowledgeable in JavaScript – I’ve been wondering what options there were for creating downloadable JavaScript applications or the iPhone. In doing some research I found a number of solutions, some simpler than others, some requiring more knowledge of Objective-C than others. ”

Visit site

Most Wanted Ajax Techniques: 50+ Examples and Tutorials

“Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed Ajax technology. When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty cool results. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.”

Visit site

50 Excellent AJAX Tutorials

“AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.

This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. ”

Visit site

10 things IT needs to know about Ajax

“The introduction of any new Web technology will affect a network’s infrastructure in ways that range from inconsequential to earth shattering. Ajax is one of the more disruptive new Web technologies traveling across networks today. To help you minimize future surprises on your network, we’ve outlined the 10 things you should take to heart about Ajax. ”

Visit site

jQuery timepickr

“jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.”

Visit site