Firefox Plugins from Heaven
Firefox plugins that I love:
Firebug - Absolutely invaluable. If I had to choose between Dreamweaver and Firebug, I’d go with Firebug. Indispensable!
Web Developer - Kind of a Swiss army knife for web developers. I especially like the browser resize (shows you how your website looks on smaller screens) and code validation features.
It’s All Text! - Edit textareas using your favourite text editor. A miracle tool for EE developers.
Flash Tracer - Simple in-browser debugging for SWFs.
Mar 04, 2008 // 0 comments
Gaia Flash Framework
When asked to develop a Flash front-end for a large and growing pool of content, my usual approach is to build a framework that reads an XML file containing a list of external assets (jpg, swf, mp3, etc...) and then loading these assets as appropriate at runtime. Sometimes the XML file contains additional information to simplify things like navigation.
The nice thing about this approach is that it allows content to be easily added or updated without republishing the main framework SWF. On the downside, it takes a lot of work to set up this sort of infrastructure (e.g. XML loading and parsing, asset preloading, navigation, transitions...).
The Gaia framework is designed to simplify the creation of these sorts of Flash projects. It provides an automated “scaffolding” tool to get projects up and running quickly and an API that provides access to more powerful features. What I have seen so far looks very promising. I intend to try it out in the very near future.
http://www.gaiaflashframework.com/
Mar 03, 2008 // 1 comments
High Performance Web Sites
When it comes to building a speedy website, I tend focus on the server side. However, the book High Performance Web Sites - Essential Knowledge for Frontend Engineers by Steve Souders has shown me the error of my ways. It covers 14 rules for speeding up a web site that are both easy to implement (especially compared to server-side optimizations) and highly effective.
Tools like Firebug (the Net tab) and YSlow clearly show what happens from the time you request a web page until it gets rendered. Typically, only a tiny slice of the total time is spent generating the HTML. The rest is spent downloading and interpreting stylesheets, scripts, images, SWFs, etc… Most web designers know to minimize a page’s payload, but it is still going to be there. This book explains how to serve it up most effectively.
My three favorite rules:
1) Make fewer HTTP requests. A few cool tricks are demonstrated in this chapter. For instance, multiple images (e.g. the various button states for a navbar) are combined into a single image that is dissected appropriately for display at runtime. CSS sprites - very clever!
3) Add an Expires Header. This chapter explains how to utilize browser caching to far greater effect. This rule was probably the biggest eye-opener for me. Implementing this optimization will speed up my future sites a lot… once I figure out how to bend htaccess files to my will at Media Temple.
6) Put Scripts at the Bottom I makes perfect sense that putting stylesheets at the top of a page (Rule 5) is necessary to enable progressive rendering, but I didn’t realize that scripts block ALL downloads until they have finished running. This means that every page with JQuery, SWFObject, Thickbox, or some other AJAXy thing in its header (that’s a lot of pages these days) isn’t nearly as fast as it could be. Simply moving these scripts right before the
