Archive

Archive for the ‘CSS’ Category

Cheat Sheets

November 25th, 2008

cheatsheet

Dave Child’s Regular Expressions cheat cheet.
Dave Child loves Jack Daniels, but apparently they don’t love him.

Dave has got to be the king of high-quality cheat sheet designers, most of them created for Web developers. I recently discovered that due to pressure from the “fine” folks at Jack Daniel’s, he was forced to take down the ilovejackdanieals.com domain—although they kindly agreed to redirect requests to his new domain, at least temporarily.

While in the process of updating my database so the links don’t eventually go stale on me, I got to thinking. Why not post a list of the best developer cheat sheets out there? If I overlooked any, by all means drop me a comment. Of course Dave is well-represented, but he certainly doesn’t cover every topic. You can also make suggestions and vote on ones that are in the works at his blog.

The reverse is also true. Dave has cheat sheets I don’t list. Why? Because I’m not terribly interested in ASP or World of Warcraft, for example. I personally think cheat sheets are handy: stick ’em on your office wall then you don’t have to reach for and thumb through that reference book, or get lost in a sea of unrelated Google search results. And although Dave isn’t the only person offering these resources, most of them come in one or more image formats (PNG, sometimes SVG) or PDF. Most cheat sheets are designed for printing, and many are in landscape format.

But this isn’t the only solution for quick reference material. There are plenty of online synopsis pages which you can bookmark, or even Firefox extensions for this sort of thing. DevBoi is one (an unfortunate name, I must say) that runs in your browser’s sidebar and offers reference material on HTML and XHTML, CSS, JavaScript and DOM, and has addon packages for PHP, XUL, RoR, and Prototype. What, no jQuery Martin?

Dave Child

G. Scott Olson

Jonathan Snook

Miscellaneous

I’m sure I’m missing some. Anyway, enjoy.

Apache, CSS, Extensions, JavaScript, MySQL, PHP, Programming , , , , , , , ,

CSS Sprites: Performance and Productivity

November 24th, 2008

css_sprites Most Web designers by now are at least familiar with CSS Sprites, and most developers/managers are aware of the benefits of using them. If not, I will run down a little history of sprites and the technique used to take advantage of them on your site(s).

History

Does anyone recall the bad old days of DOS and the 640k memory limit due to 16-bit addressing? As applications grew in size and complexity (e.g. AutoCAD, which I used to teach), requiring more RAM, programmers used all sorts of tricks like stealing memory (UMA/EMS/XMS) that wasn’t being used by the video card and so forth. All very ugly. But older and embedded systems had even more restrictions on available memory. Video games for example. This is where sprites originated from, a method of compositing several images together that are then mapped onto the screen as the game is played.

Technique

With advances in hardware and more available memory, this quickly went by the wayside. Why now, some 20+ years later, are we seeing the same basic technique used on the Web? I’ll get to that in a minute after I explain how it works. Again, you combine many similar images, each usually of the same dimensions, into one composite or library. Then, by displaying only a portion of the image as a background using pixel width and height, with offsets, you get a sort of peephole effect: one icon from a set as in the example above.

Performance

Why does this improve the rendering time of a page? Simple. Instead of many HTTP requests for each image, the page makes one request and the browser caches the image. After that it’s trivial, and fast, to expose only the portion you want to display.

Productivity

But how does productivity come into play? At least for me, I find it is much easier to work with one master set rather than worry about dozens or more tiny little images. If I need to add a new one I just tack it onto the end and calculate the offset to display it. Simple integer arithmetic.

See Also

CSS, Design , , , ,

Testing user-defined styles

November 21st, 2008

logo This post is simply to test how well it works to have an image float to the right. I have to tell you, it sure is nice to be able to edit the stylesheet directly from the admin area for this theme. You have to make sure the permissions on the folder are set liberally enough for it to work however.

Pretty sweet, no?

I don’t like that caption though, must remove it.

Done.

CSS, WordPress ,