We — that is, the collective world of computer scientists, designers, and I dare say anyone who tried to make people’s lives easier through technology — have truly lost a mentor, a visionary, an examplar.

I’ll leave everyone a bit of time to be sad, to mourn, to feel deflated. But let’s not dwell on the fact that this man was taken from us too soon. For a man like Jobs, death would always come “too soon”. Let’s remember a man who steered his company until his near final days. A man who was forced out of his company only to restore it to a level of glory it never previously knew. A man who — again and again — changed the world… and won. A man who created the PC industry thirty years ago with the Apple computer, only to worry everyone that he would phase it out thirty years after with the iPad. A man who put a wealth of knowledge on our desks, in our hands, and in our pockets. He’s led one Hell of a life.

During his now-famous and soon-to-be oft-quoted Stanford commencement speech, Steve Jobs urged the attendees of his speech: “Stay Hungry, Stay Foolish”.

If there ever comes a day when we forget the impact that Steve Jobs had on computing, let’s never forget that urge he pushed the students of Stanford to cede to:

Stay Hungry, Stay Foolish

Don’t think that what you want to do is too grandiose, too sweeping, too drastic, too focused, too nerdy, too expensive, too subtle, too understated, or too unimportant.

Steve Jobs’ speech at Stanford included the following two paragraphs, which I will include verbatim, right before his reference to the title of this post:

No one wants to die. Even people who want to go to heaven don’t want to die to get there. And yet death is the destination we all share. No one has ever escaped it. And that is as it should be, because Death is very likely the single best invention of Life. It is Life’s change agent. It clears out the old to make way for the new. Right now the new is you, but someday not too long from now, you will gradually become the old and be cleared away. Sorry to be so dramatic, but it is quite true.

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma — which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

Go make something awesome. Go do something no one thinks will work. Go kick ass.

Stay Hungry, Stay Foolish.

Even with intense competition from tools integrated into other web browsers, Firebug is arguably still the leading web development tool in use, with nearly two million active daily users. Its web site needed to reflect Firebug’s capabilities more clearly. With that in mind, the primary goals with this redesign were to make the official Firebug web site easier to use, more pleasant to look at, and give Firebug more of a traditional software-style layout to highlight its many positive qualities.

GetFirebug.com: Before

GetFirebug.com: After

It’s a fairly straightforward design, so there’s not a lot of interesting production notes to highlight, but here’s some specifics on what went into this redesign:

• The layout is roughly based on the 960 grid system. The original hope was to do the site in a fully fluid layout, but time constrains intervened.
• Headers and pull text are in the gorgeous (and open source!) Tittillium, thanks to @font-face. The body text was originally set in Droid, but due to a legibility issue on Windows machines with text-smoothing disabled, it was switched to the more common Trebuchet MS.
• The pages are build using the HTML5 doctype, with JQuery and the Fancybox plugin powering the modal pop-ups.
• The screencast on the homepage uses the Video for Everybody system to embed the OGG video, with MP4 and Flash fallback for other user agents.
• The homepage blog feed pulls in from the Firebug weblog RSS feed using SimplePie.
• For this iteration, we wanted to switch the site over to a simple content management system, and ended up settling on Perch. It has its shortcomings, but it was straightforward enough and easy enough for me (mostly a designer/UX guy) to implement.
• Sean passed along a few images that inspired the sparkly new icon. Originally, we tossed around the idea of doing something cartoony and heroic, like this lil’ dude, but ultimately decided to go with a more, well, buggier bug.
• Photographic inspiration: Bug 1 • Bug 2 • Bug 3 • Bugs!

It’s been a long time coming, and we hope you like GetFirebug.com’s new set of clothes. The content is currently being updated and will roll out as it is completed, but in the meantime, please kick the tires and let us know what you think.

• css gradients in Firefox 3.6
• building beautiful buttons with css gradients

Really awesome stuff, looking forward to seeing more and more designs that are normally done with lots of images to be created with CSS!

]]> http://blog.mozilla.com/webdev/2009/11/30/css-gradients-tutorials/feed/ 0 http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/ http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/#comments Fri, 27 Mar 2009 22:36:32 +0000 Ryan Doherty http://blog.mozilla.com/webdev/?p=325 One of the most effective ways of speeding up a website’s render time is to reduce the number of HTTP requests required to fetch content. An effective method to achieve this is via CSS sprites, which is combining multiple images into one large image and using CSS to only display parts of it.

Here’s an example sprite:



The purpose of this post is not to show how it makes a site faster, but cover some best practices when creating a CSS sprite.

Don’t wait until you are done slicing to begin spriting.

The problem with waiting until you’ve built the site is all your CSS and images have already been created. You will have to go back and re-write your CSS. You’ll also spend a ton of time in Photoshop attempting to fit 20-30 graphics into a sprite at once, which is extremely painful and tedious. It’s much easier to build the sprite step by step.

Arrange images opposite of how they will be displayed

This tip is a little confusing and I didn’t learn this until I was halfway through creating a large sprite. If an image is supposed to appear on the left of an element:



Put that image to the right of the sprite (see sprite image from above). This way when you move the background image via CSS, there is no possible way any other image will display next to it. A common problem when creating CSS sprites is positioning images so they don’t appear as part of a background for the wrong element.

Avoid ‘bottom’ or ‘right’ in CSS when positioning

When positioning a CSS sprite behind an element, it’s very easy to use background-position: bottom -300px; or background-position: right -200px;. This will work initially, but the problem with it is once you expand your sprite in width or height, your positioning will be wrong as the images are no longer at the bottom or right of the sprite. Using explicit positioning in pixels avoids this issue.

Give each image plenty of space

As you can see from the example sprite, many tiny images are given lots of space. Why not just cram them all together to make the sprite smaller? Because the elements they are used on will most likely have variable content and need that extra padding so other images don’t show up.

Here’s an example:


Each list item has a graphical number as a background image. If you look at the sprite shown above, you can see how the images were staggered so that if the content increased, no other images would show up.

Don’t worry about sprite pixel size

Chances are if your site is decently designed, you will have a lot of images to put in your sprite. And you’ll need a pretty large sprite to space the images out appropriately. And that’s fine. Empty space in a sprite does not take up much of a file’s size. The sprite used for addons.mozilla.org is 1,000×2,000 pixels and is only 16.7kb!

Got other tips? Leave a comment!

More Resources

• CSS Sprites Tutorial
• CSS Sprite Generator
]]> http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/feed/ 40