One of the goals of Firefox have always been to make the lives of web developers as easy and productive as possible, by providing tools and a very extensible web browser to enable people to create amazing things.

It’s time to get back to basics — back to optimizing every little byte like your life depends on it. Your challenge? Build a web app in less than 10 kilobytes.

jQuery Visual Cheat Sheet is an useful and practical reference to jQuery 1.3 for web designers and developers designed by me. This cheat sheet (6 pages) contains the full jQuery API reference with detailed descriptions and some sample code. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

(thx Neil)

jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1, and Pre.

You can preview right on your iPhone or watch a demo.

(thx, Scott)

There are many ways to make websites run faster. In this section, you can discover performance best practices that real web professionals employ in their everyday work. These practices have improved the user experience for millions of users and we hope they are useful for other web developers.

(thx Tim)

jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability. If you put those two things on opposite sides of a scale, the jQuery side translates into something with which it’s easy to get started and see quick results but (in my experience) can turn into code that’s harder to reuse and maintain (but really that’s up to you; it’s not jQuery’s problem, per se), while the MooTools side takes longer to learn and requires you to write more code upfront before you see results, but afterwards is more reusable and more maintainable.

For me, I decided on jQuery a while back and we’ve opted to do the same at Wall St. We’ll see if jQuery stands up to the maintainability test over time, but for now, I contend, the library is giving way to faster and better development.

Here at Wall St., we host some of the largest financial websites on the Internet. From The New York Times to E*TRADE and Barclays to Charles Schwab, our data centers serve content to millions and millions of users per week. It’s imperative our websites provide accurate market data, look good, are easy to use, and are fast. With so much information to relay, we’re pushing a lot of data (including scripts, CSS, images, etc.) through the pipe. So Nicole’s presentation was perfect fodder for our design and development teams.

A few highlights from her talk, with some links for your consumption follow.

• Nine best practices for designing and building faster websites:
  1. Create a component library of smart objects.
  2. Use consistent semantic styles.
  3. Design modules to be transparent on the inside.
  4. Optimize images and sprites.
  5. Avoid non-standard browser fonts.
  6. Use columns rather than rows.
  7. Choose your bling carefully.
  8. Be flexible.
  9. Learn to love grids.
• Watch her presentation on the YDN.
• PNG8 is the clear winner for images on any website. They’re smaller in file size than GIFs (I didn’t believe it until I saw it), and they support transparency in IE5.5 and IE6. No CSS filter hacks needed. If you’ve got a copy of Fireworks, you’re in business because Photoshop doesn’t help create PNG8′s transparency. If you don’t have Fireworks and are comfy with the command line, see this guide to making alpha transparency in PNG8.
• Embrace Smush.it — a web service and Firefox plugin created by Nicole and former co-worker Stoyan Stefanov. The tool allows web developers to upload images of any kind while Smush.it runs through a long list of compression algorithms stripping meta data and needless information from them before spitting them back to you in a Zip file. It all happens in seconds and a few tests we ran here — 15 images reduced in size by 320kb (99.18% compression rate) — yielded impressive results. Evidently, Smush.it is in the process of being adopted by Yahoo! which has immediately interrupted the service (but hopefully not permanently).
• Consider Object Oriented CSS, or OO CSS. Much of OO CSS is in the 9 best practices mentioned above. But it’s not what you think. It’s not object oriented in the traditional programming sense of the term. It’s object — as in a virtual thing: a module, a header, a sidebar bucket, etc. I had a hard time with this one in the beginning. Most of OO CSS is pure common sense — at least it is here at Wall St. Sit down, evaluate your designs before you start building, and determine a baseline for common elements across the site. Then piece together your CSS efficiently. Three really useful tips for page layout:
  1. Don’t use height-specific modules. Let the content determine the height. This is genius and must be recognized by designers. Vertical grids, not horizontal.
  2. If you have two or three modules with rounded corners that are different but look similar, just pick one and move on. “Users aren’t that sophisticated,” she said.
  3. Use grids to determine layout, and let the content fill 100% of the available space. This way two columns becomes three columns or becomes 6 columns and the content continues to just fit.
• Set aside a few minutes to watch her presentation on OO CSS. It’s not earth-shattering stuff, but she does make some interesting points that convinced us to approach web dev from a slightly different angle.

Thanks Nicole. Safe travels in India.

His claim that crappy code is inevitable is based on the notion that crappy code is cheaper than clean code, and that therefore businesses will demand the crap every time. But it has generally not been business that has demanded crappy code. Rather it has been developers who mistakenly thought that the business’ need for speed meant that they had to produce crappy code. Once we, as professional developers, realize that the only way to go fast is to create clean and well designed code, then we will see the business’ need for speed as a demand for high quality code.

I’m in the business of web-based software and website development where clean code is paramount but deadlines always seem to win. There just aren’t enough hours in the day and days in the month to get through all the requirements. The process usually works like this: business development sells the job, design chews through the schedule, development is a rush, and quality assurance is an after thought. And, as Bob and Ed clearly point out, this is certainly not the best way to develop software or websites.

(Thx, Tim)

 -webkit-border-image

Launchpad HQ:

So for example, the image to the right is an original image from the iPhone. Its width is 29px. That breaks down to there being 14px on the left and right, defining the rounded corners and a 1px sliver which is the body of the button. So, in theory, if you were able to keep the left and right sides of the button stationary while expanding the 1px center piece, this would create a horizontally-scalable button with only one image.

But alas, how would we do this using only CSS? Well, I started digging around Safari’s ‘-webkit’ innards, and was able to to use the -webkit-border-image to accomplish exactly what I wanted.

This goes very nicely with the iPhone GUI PSD.

Look for “Cleanup Working Copy Locks” under the “Action” menu.

For each and every PNG, GIF or JPG I sliced out of this beautiful design, Photoshop seemingly stripped the brightness and sharpness from the images. My template’s images looked perfect in Safari, Opera, and IE—even IE6!—but not in Firefox. Firefox, in which I do my initial development, is apparently the only browser in the market which acts this way: (I eventually learned) it cannot read color profiling embedded in images. Let me say that differently: Firefox 3 can read profiles, but they’re turned off and only available with an add-on or some configuration changes. I changed every possible setting in the Photoshop “Save for Web…” dialog with no success.

After further snooping and a little detective work in our design department, I learned my version of Photoshop was embedding a color profile—without my knowing—and this profile wasn’t “generic.” The generic profile means Photoshop won’t “color manage” your file and save it out to whichever format specified in true color. Interestingly enough, CS2 was making matters worse for me. I hadn’t yet upgraded to CS3 at work, so after doing just that, I followed these instructions—which should be set by default in Photoshop—and am feeling happy again.

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

Version 2 — just released last month –offers the new express install from Adobe as well as whole new method for loading Flash files into your pages. The project’s home base is over at Google Code now, and there’s plenty of examples, help, and even a code generator (which is pretty slick).

The best news of all: upgrading to version 2.0 fixed a “wmode” transparency issue I was having in Firefox 3.

Coda 1.0.5