subCHILD

Archive for August, 2008

Simple JavaScript and CSS File Bundler

posted by admin in Code, CSS, JavaScript, PHP

Optimizing web page loading is not a new subject, but it remains one that doesn’t get as much attention as it deserves.  Web/UI developers often assume that site performance is mostly attributed to back-end operations (database interactions, processing, etc.), servers themselves (hardware and software) and other variants such as bandwidth, traffic, etc. But there are many ways to optimize client-side code in a way that will result in a noticeable improvement in site loading and performance.

Fortunately, some of these techniques are becoming more common. For example, CSS Sprites are frequently seen now days and are heavily used by Google (sample) and Yahoo (sample).  The reason CSS Sprites are a good idea is because reducing the number of requests means that servers have less to process and deliver, while the browsers have fewer components to download. This point is one particularly worth noting since before Firefox version 3 and Internet Explorer version 8, most browsers supported only 2 concurrent requests per domain. (With new browsers, that number goes up to 6, but the concept is no less important.)

So, loading fewer files is good for both the server and the client. CSS Sprites allow us to cut down the number of images which need to be downloaded (and also prevent having to preload images which are initially hidden, such as rollovers), but how can this technique be applied to other page components?

More

Creating Fading Headlines with jQuery in 5 minutes

posted by admin in HTML, JavaScript, jQuery

We see fading headlines on the Apple site as well as lots of news and media websites.  Rather than listing all of headlines in a “stack”, they use much less real estate by having all headlines displayed in a smaller space, with headlines fading in and out over each other.  Whether you like this or not is not the point.  Showing how you can build this quickly, is.

Since I’m a big fan of the jQuery library I decided to see what it would take to build this with the help of this popular JavaScript library.  As expected, it proved to be very simple and I’m posting it here in case someone finds it handy.  It might also serve as a good interview question for candidates who claim to be proficient with JavaScript and jQuery.

More

Recent Posts
Recent Comments
About
Simon: Hi there, i am looking for a parameter which can change direction of mov...
CM: Hi, Alex! I know exactly what king of messages you get, like "Hi, I'm new to php a...
admin: Alive and well....
SJ: If the array size exceeded 10 then sorting will not work. any help?...
shutterstock: I've learn several excellent stuff here. Definitely price bookmarking for revisiting....

Subchild is a blog about web development. It's author is Aleksandar Kolundzija, himself a web developer for 10++ years, presently a Hacker-in-Residence at betaworks. Prior to betaworks, Alex worked at Google, Meebo, MLB Advanced Media (MLB.com), Razorfish, and elsewhere.

Some of Alex's side projects include Gallerama.com, Slideshowify, LiveXmlEdit, and other blogs like Dopevector and blog.gallerama.com. When he's not working on any of those, Alex is probably playing guitar, producing music, mixing records, taking photos, playing with his kid, or watching documentaries about particle physics, the monetary system, etc.

Let him know what's up: ak @ subchild.com