• 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

back to top^

• 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
• 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

back to top^

• Mail injection:
  • A Website Repairs article amusingly titled “Have You Spammed Anyone Today?”
  • The forums on PHP.net - good discussion of different ways to tackle the problem, including regex and input sanitizing methods
• MySQL injection:
  • a very reader-friendly article from Tech-Evangelist
  • PHP.net’s documentation and forums on the mysql_real_escape_string function
• Image or file hotlinking (theft of not only your image, but also your bandwidth, which can mean $$$):
  • An explanation, a testing form, and a solution from altlab.com - pretty much says it all - just don’t forget to check out the funny consequences of stealing images and bandwidth from creative webmasters like this guy
  • A friendlier, more diplomatic strategy from A List Apart - this article describes how to serve the image while properly crediting yourself as the owner

back to top^

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:

• Create a PHP page template using your pal include() - Although I had used elements such as the header, nav, and footer as includes, every page used to be a separate php file. While using separate files kept things like JavaScript and php simpler, using a single page template (or a few) and pulling the specific content improved my site organization and made updating much easier.
• Compress your pages with ob_gzhandler - this 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:
  • an extension of the fiftyfoureleven.com strategy, found in the php.net forums under ob_start - in a commment on 21-Nov-2006, [lucky760 at yahoo dot com] et al provided scripts to both compress and control caching of the css file, so that the file is recreated only if the source file has changed, rather than compressing the css on every page load.
  • CSS Compressor - an online app that can strip out your code’s comments, line breaks, and other unnecessary characters according to your specifications. It returns the product for you to save as your css file.
  • Marco van Hylckama Vlieg’s php script - you feed it your css file via a query string and call it in your stylesheet link.
• 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 .htaccess to 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.

back to top^

• From a discussion at The Web Standards Project: standards-compliant markup for
  • Flash and
  • Video
• 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 =)

back to top^

• All you need to know about regex, or regular expressions
• Ever notice that the color in your images looks faded or changed after using Photoshop’s “Save for Web” feature? Doug Avery at Viget Labs explains how to prevent the “Save for Web” color shift, so all your web images can be just as vibrant as you thought they were! (I struggled with this problem for months. Head-slap.)
• Not a resource, but a good laugh when you need a break from the debugging headache (thanks for the link to Larry, Osiris’s Interactive Developer - Larry knows if he hears a plaintive “Um, Larry?” from me, a debugging headache is sure to ensue)

back to top^

Here are all the online tools I’ve mentioned in one place, and then some:

• The W3C Markup Validator - you can add a link to your page(s) so that you can check while you develop
• The W3C CSS Validator - same as above, but be aware that if you serve your css via a php file (which I do), you’ll need to input the css file directly
• The CSS Compressor
• WhatsMyIP.org’s mod_gzip/gzip Test
• The favicons generator
• The FLV bitrate calculator
• The hotlink test
• Centricle.com’s HTML encoder/decoder - useful for those times when you want to display the source code of your HTML (here’s an example)
• Eric Meyer’s Color Blender - set two color values, select the number of midpoint colors to be generated, and click! No more wondering if you’ve picked the right hue so as to avoid clashing with the rest of your color scheme.