Resources

I began exploring web development more deeply over the past year, and I had the good fortune to learn a great deal about industry standards and practices in both design and development while working at the Mighty Engine (formerly Osiris Group). Since then, I have branched out on my own as a freelance web developer.

As online information sources become ever more plentiful, it can become overwhelming to sort out which are really useful. Here are some that have really helped me. (Note that some might be outdated; caveat emptor!)

  • w3schools.com – this is where I go to learn about cut-and-dried standards-compliant, forward-looking and backward-compatible coding in a variety of languages – they have tutorials on just about everything!
  • PHP.net – like w3schools, this site has a technical, authoritative, no-nonsense feel, which I really like, as well as helpful forums with contributions from tech-savvy people (I get the feeling that you don’t want to post there unless you really know your business)
  • Digital Web Magazine – I like this site for the variety of article topics
  • webcheatsheet.com – a more casual site with tutorials in a variety of programming languages
  • smartwebby.com – a site of tutorials for the creative ideas you have but are clueless on how to approach them, such as importing external data into Flash

  • CSS play – Stu Nicholls’s site for awesome CSS demos! He explicitly states copyright details for each example, so be sure to check this info before using
  • YAML – a pretty heavy-duty CSS framework – I’m not sure that I would ever have a need for the full sledgehammer, and sometimes it’s caused mysterious things that even the senior developer at work can’t explain, but the parts that I do use are quite helpful
  • Position Is Everything – a resource (run in part by Holly Bergevin of Holly hack fame) for all those wacky IE rendering issues! If they haven’t written about your IE bug, they have links to articles about it
  • CSS tests and experiments – if you’re like me and you learn by going through examples with varied parameter values (i.e., experiments and deductive reasoning), check out this site! For a given topic, it shows several cases and reviews the code behind it

  • Mail injection:

 

 

Waiting for a web page to load is a drag. If it takes more than a few seconds, I’d probably leave and look for another information source. So what can you do to save bandwidth and speed up the ride? Compress, compress, compress. And simplify. In streamlining this site (I hope you’re feeling the benefits), I took these steps:

  • Compress your pages with ob_gzhandlerthis is the money. Whatever else you might do, gzipping will probably make the biggest difference in reducing data file size. For me, the savings were in the neighborhood of 75%. You can check out estimates for various file types (php, css, etc.) at WhatsMyIP.org’s mod_gzip/gzip Test.
  • Gzip your CSS, too, with help from fiftyfoureleven.com- I had trouble getting the auto-prepend system to work with my file structure, but I found a few alternatives:
  • Cut down on image size and http requests with CSS sprites – as explained by this article from CSS-tricks.com (from whom I also added an rss feed of CSS tutorial videos), a CSS sprite is an image file containing several images, but each image can appear alone on the web page by specifying background position and other css properties. Among the potential benefits are:
    • the composite image file can be much smaller – by redoing my navigation links, I reduced the tabs from a total of 200 kb to one 64-kb image file
    • a reduction in the number of HTTP requests (once for the image) – according to the article, “reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.”
  • Control client-side caching (or at least try) – Apache has an expires module that you can configure via .htaccessto specify when the user’s browser should download your files from the server. You can set expiration times as a default, according to file type, and with various units of time. On one hand, letting the browser cache a lot of your content will reduce load time for the user’s next visit to your site, but on the other, if you’ve made a lot of changes or updates, they might still see the old content. So, I err on the side of frequent downloading to keep the content updated (because goodness knows that I have room for improvement, and I’m working on it). Hopefully, all the efforts to optimize bandwith will make up for that.Check out Perishable Press’s “Stupid .htaccess Tricks,” a more thorough introduction to .htaccess, for greater clarity.

  • Handbrake – an app to convert DVD footage to .mp4, .avi, and other things I don’t understand. It’s really easy to use, probably one of the simplest around (i say this after trying about five other apps), allows control over the options i need (cropping, trimming, quality, etc.) and does this in a way that I understand (!important). For embedding in my web pages, I then use Adobe Flash Video Encoder to convert the .mp4 to .flv. Yes, it’s a two-step process to convert dvd to .flv on my Mac (for which open-source video conversion apps are harder to find), but Handbrake free and it works really nicely.
  • FLV bitrate calculator – an app that estimates the bitrate necessary to produce an flv with your frame rate, dimensions, amount of motion, and other parameter values. Sweet, just what I needed to know =)