Every so often I like to revisit old projects of mine and refactor them a little, either using some new ideas I learnt in the meantime, or trying out some new technique or framework on familiar ground. This time, I’m going over a wordpress theme I made a couple of years ago and using Compass to organize the style sheets. Converting the existing style sheet (circa 8k uncompressed) to SCSS didn’t take long – only a few minutes by hand – and there are tools which you can use to automate the conversion, so it left me plenty of time to explore more Sass features which make style sheet management much easier. Today we’re going to look at command directives and a few basic spriting helpers. Continue reading “Easy CSS Management and Spriting With Sass and Compass”
Size does matter
Write better JavaScript. Check out The Little Book of JavaScript!
A good user experience requires responsiveness. Speed. Web pages that don’t make you wait more than a couple of seconds while they load, or even worse, load in bits and pieces and reorganize themselves in front of the user; “that’s the way these things work” isn’t good enough an excuse. Your users don’t want to know how your site works (even if your site is about how the internet works – they want to read about the problems, not experience them), they just want to get things done and move on. As Eve says in Gaiman’s The Sandman Vol. 6: Fables and Reflections
Two of the culprits these days seem to be huge JavaScript and CSS files. They’re by no means the only causes, but they can cause trouble at times. Delays when loading a CSS file result in the dreaded flash of unstyled content on some browsers. Problems loading a JavaScript file… well, let’s just say it ain’t pretty. The delivery of these files can be slowed down by a number of factors. File size is one of them; a 168kb file will download considerably more slowly than a 6kb one.
This is made worse by the use of multiple JavaScript and/or CSS files. Separating functionality or styles in a sensible way is heaven-sent when it comes to maintenance, but the way the web works means that it’s a lot easier to download one largish file than several small ones. Multiple files mean that the browser must make multiple requests to the server, and each request carries a small overhead since the server has to include a certain amount of information with each response it makes. To top it off, most browsers are configured to open a limited number of connections to a server at any one time – IE8 allows up to 6 concurrent downloads on broadband, while Firefox allows 8; these connections must be shared between the JavaScript, style, images, and other embedded files. This can cause the downloads to be queued up on pages with a lot of stuff on them.
What we need, then, is a small number of reasonably sized files: how do we get to that?