Sometimes I can be unusually picky about the smallest things, but in this case my habits have worked to my advantage. A few years ago, I decided to quit using a WYSIWYG code editing program (like Dreamweaver) and instead begin to write all of my XHTML/CSS by hand. After a few weeks of trial and error, I found it was actually mush faster just to write out the code I need instead of wrestling a visual editor for control over the elements I wanted to fine-tune.
As part of this transition, I became slightly obsessed with generating the most efficient code I could possibly write. I’ll typically begin a coding project with a sloppy rough draft, only to return to it a few times over to continue tweaking the layout until it’s as semantic and concise as it can possibly be. This process obviously produces much cleaner code, but it can also reduce files sizes and load times by 20-30% (depending on how sloppy you were at the outset!).
This habit has become extremely useful over the past 6 weeks as I’ve begun work on a special project for mobile devices (which you’ll be hearing more about in the future). Those small reductions in file size that were only barely noticeable on a desktop machine make a dramatic improvement when you’re accessing files over a spotty mobile connection. With this in mind, I’ve set out to constantly comb through my JavaScript/CSS files to find any chunks of code that can be simplified or deleted.
I stumbled onto a great resource yesterday that I thought I would pass along to you. If you’ve spent much time at all with CSS, you know there are about a dozen ways to accomplish a single task, and some of them are much more efficient than their alternatives. Be sure to check out this great guide of 20 short-hand techniques you can use to tighten the screws on your style sheets.
By using some of these shortcuts and compressing your code before you go live, you can definitely make your next project a lot more snappy.
It‘s quiet in here! Why not leave a response?