shortcuts skill boosters

things can be done in a smarter way

find out about some of the most clever tools to do the monkey business for you, which I call shortcuts skill boosters.

1. sprite me

turn buttons, icons and backgrounds into sprites to speed up page downloads. combining multiple images into one file reduces the number of requests the client must make to your server.

you then use the css background-position attribute to just show the portion of the image you want. the image downloads once, is cached once and requested once. to make things easier, use spriteme. it scans your page for images it can combine and generates the css for you.

2. white space

shrinking down the white space and even function names of your javascript and css will greatly reduce your page load times. combine all your javascript and css into one or two files, then pass those files through yui compressor.

3. actions

don’t overlook this one: photoshop web workflow. once installed, you click on any layer in photoshop and hit the f1 key. this grabs the layer, puts it in a new document that is the exact dimensions and brings up the save for web window.

a simple sounding sequence, but one that will make background creation, prototyping and sprite making much faster

4. if then

mac application textexpander allows you to assign shortcuts to big chunks of text. for example if i want to output the wordpress loop in my code editor you simply type // loop. it works system wide and is a great tool for  building time consuming code structures, like nested lists.

5. refreshed

take a look at codekit. the browser reloading feature is worth the small cost alone. it’s also great for image optimisation, and compiling sass and javascript.

6. you’ve all got mail

services like sendgrid or mandrill handle deliverability, spam protection and bounce reports.