Not Just a Hat Rack » Must-Read/Reference http://notjustahatrack.com Development, design, etc. Mon, 18 Apr 2011 16:05:08 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 Image Usage for Developers http://notjustahatrack.com/posts/image-usage-for-developers/ http://notjustahatrack.com/posts/image-usage-for-developers/#comments Wed, 09 Sep 2009 18:54:25 +0000 andrew http://notjustahatrack.com/?p=114 Another must-read is the image optimization series from Stoyan Stefanov and Yahoo. Before reading those articles, I used PNG fixes indiscriminately, employed GIFs way too much, didn’t spend a whole lot of time thinking about the optimum image type when slicing a mockup, and certainly never thought of compressing images beyond Photoshop’s “save for web” feature. The first article in the series, The Importance of Images, along with the prevalence of Yahoo’s YSlow, and more recently Google’s Page Speed, made me realize just how much image optimization actually matters to page performance. I figured I would give you my take on the tips in the series, and thoughts on just how to handle difficult, common, transparency cases.

The Right Image Format

The image optimization series does an excellent job detailing which file format to use, and I suggest reading it (especially for the lossy, non-lossy comments), but here’s their summary:

  • JPEG is the format for photos.
  • GIF is the format for animations.
  • PNG8 is the format for everything else — icons, buttons, backgrounds, graphs…you name it.

After implementing these strategies for a bunch of builds, here’s my take:

  • JPEGs for photos or images with tons of colors
  • PNG24 when you really need consistent alpha transparency
  • PNG8 for everything else

The only difference here is that PNG24 definitely still has a place (oh, and really how often do you use animated GIFs?). The case they mention in which you have to use PNG24 (“When most of the image is semi-transparent”) is actually more common than they would leave you to believe. So how do you handle those cases?

Transparency and PNG Fixes

To handle transparent PNGs, do not use a JavaScript PNG fix. Instead, realize what those fixes do, and then actually apply the fix when and where you need it. The problem with PNG fixes in general is that they typically offer a blanket solution that affects every PNG on the site. You don’t want to be applying a alpha filter to a PNG8 that doesn’t have transparency, so there’s a lot of wasted effort. Not to mention the fact that these filters can be extremely taxing on the browser. There’s a simple CSS solution that can be added to an IE6-only stylesheet (assume #some-element already has a background applied):


#some-element {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

That’s it! There’s also a VML fix, although the extra markup typically isn’t worth the better performance. Either way, the take-away is to apply the fix on a case by case basis, not with a blanket JavaScript add-on.

Compression

There’s a number of add-ons and/or tools online that will reduce the size of your images quickly and efficiently. The aforementioned YSlow and Google Page Speed are extremely easy to use if you have those add-ons. A new entrant is punypng, which touts its better performance over the Yahoo and Google offerings. Regardless, all tools offer bulk uploads, so after a site build, there’s no reason not to run your pages through these tools and update images that can be compressed.



If nothing else, I hope developers everywhere can remember a couple of things:

  • Think about the optimal file format when saving an image
  • Don’t use GIFs (unless they are animated… but c’mon)
  • Don’t use a blanket PNG fix
]]> http://notjustahatrack.com/posts/image-usage-for-developers/feed/ 0 Must-Read HTML5 Articles http://notjustahatrack.com/posts/must-read-html5-articles/ http://notjustahatrack.com/posts/must-read-html5-articles/#comments Wed, 02 Sep 2009 23:14:58 +0000 andrew http://notjustahatrack.com/?p=105 An Introduction

HTML 5 differences from HTML 4 from the W3C. Fantastic summary of the stuff that HTML5 will eventually bring to the table. Take it with a grain of salt though… because as you’ll see, there isn’t a whole lot you can use right now, cross-browser, without hacks.

I mentioned the Misunderstanding Markup comic already, but definitely worth a read if you are still confused as to which markup syntax to employ.

Questions? Check the WHATWG HTML5 FAQ.

Keeping up with the Spec

Comparison of layout engines (HTML 5) on Wikipedia. As you can see, Internet Explorer doesn’t provide a whole lot of support for HTML5 features.

The spec itself is definitely worth a read. Or use the WHATWG version (it’s split into multiple pages, and updated more regularly). Obviously the most comprehensive source you’ll find.

Current Uses

HTML5 Doctor has some articles on things that are mostly cross-browser, and more or less safe to use now, like Native Drag and Drop and “Block-level” links. Unfortunately I can’t recommend utilizing much more of the tips on the HTML5 Doctor site, because they either rely on hacks, or could change as the HTML5 standard changes.

I can’t recommend using the new semantic elements from HTML5 yet, but it can’t hurt to begin preparing for HTML5 with semantic class names. If nothing else, you’ll be ready when the new elements become safe to use.

We Can Dream…

Automatic form validation? Yes please.

You can do really cool things with the canvas element apparently.

Web workers + video + canvas = pretty freaking cool.

]]> http://notjustahatrack.com/posts/must-read-html5-articles/feed/ 0 A Blog Reading List for Developers http://notjustahatrack.com/posts/a-blog-reading-list-for-developers/ http://notjustahatrack.com/posts/a-blog-reading-list-for-developers/#comments Thu, 20 Aug 2009 16:28:12 +0000 andrew http://notjustahatrack.com/?p=80 As a web developer, you constantly need to be reading and absorbing new information. Depending on the number of specialties you want to pursue, the number of potential sources for this information can be overwhelming. To help make sense of it all, you’ll need two things: An RSS reader, and a method of keeping your followed feeds up-to-date. You’ll know you have a good learning process when you consistently become the source of new information, as opposed to the recipient.

RSS Readers & Keeping them Updated

I’ve been using Google Reader for a while now, and never encountered any issues. I’m sure there might be advantages to other readers, but as long as I’m getting the information quickly and efficiently, there isn’t much of a reason to look elsewhere. Plus, all the major readers allow for import/export of feeds, so if someone makes a great case for a different reader down the line, you can always switch.

In terms of keeping my reading list updated, I’ve followed the same process for quite some time:

  • Start with an industry standard list (check Google, or the one later in this article)
  • Add aggregation feeds, follow developers on Twitter to find new article mentions
  • If new articles are a worthwhile read, add blog to reader
  • Cull outdated or useless blogs every once in a while

The second step is important, and I’d recommend combing through articles on Script & Style, CSS Globe, the Web Squeeze, and even Digg for potential good sources of information.

My List

Download. Or check it out below:

Industry

JavaScript

Leaders (General)

Design/CSS

Other

]]> http://notjustahatrack.com/posts/a-blog-reading-list-for-developers/feed/ 0 Must-Read Typography for Developers Articles http://notjustahatrack.com/posts/must-read-typography-for-developers-articles/ http://notjustahatrack.com/posts/must-read-typography-for-developers-articles/#comments Fri, 14 Aug 2009 16:02:03 +0000 andrew http://notjustahatrack.com/?p=61 I’ll be the first to admit that for the longest time I thought Arial, Times New Roman, and Verdana were the only fonts you could safely use on the web. When I was first getting starting in development, these were the only fonts sites used, and as such I never had reason to believe otherwise. Well after four or five years of working with some pretty talented designers, the importance of typography started to rub off. I’ve compiled a list of some of the most eye-opening typography-for-developers articles that I’ve read, mostly concerning the breadth of fonts that we can actually use in development now:

  • Fonts for web design: a primer: An excellent starting point for exploring additional, common fonts cross-OS. I was particularly happy to see an explanation as to why some fonts are available on some systems, but not others.
  • Common fonts to all versions of Windows & Mac equivalents: Basically a summary of the above, in an easy-to-reference format.
  • 8 Definitive Web Font Stacks: Leverages the flexibility of the font stack to implement nicer fonts for users that have those fonts on their machines.
  • Methods for uncommon font rendering: In addition to web-ready fonts, there are several methods/technologies that allow you to essentially embed uncommon fonts on your site. Beautiful fonts with @font-face is a good summary of the potential for straight CSS-level font embeds; although there are legal hurdles that you need to take into account. Finally, cufón and sIFR are two popular methods for embedding custom fonts, with the help of some JavaScript and/or Flash.

My previous experience has shown that designers are happy for the most part with the set of available web-ready fonts, and cases where you need a method for rendering uncommon fonts are few and far between. I imagine a unified, efficient solution for embedding fonts (read: @font-face) would change the playing field, but legal issues may hamper that reality for some time. In the meantime, it’s good to know there’s at least some easy-to-implement alternatives to Arial, Times, and Verdana, and the potential for using almost any font in certain situations if you have the time for a solid implementation.

]]> http://notjustahatrack.com/posts/must-read-typography-for-developers-articles/feed/ 0 Must-Read JavaScript Articles http://notjustahatrack.com/posts/must-read-javascript-articles/ http://notjustahatrack.com/posts/must-read-javascript-articles/#comments Wed, 12 Aug 2009 18:50:50 +0000 andrew http://notjustahatrack.com/?p=51 A re-introduction to JavaScript from the Mozilla Developer center. I challenge you to find a more clear and comprehensive overview of the JavaScript language. Covers everything from the history of the language to its more advanced concepts (closures, memory leaks, etc.)

Code Conventions for the JavaScript Programming Language from Crockford. The man, the myth, the legend. Everything he’s written about JavaScript should be read, but this article in particular offers a good starting point.

The Elements of JavaScript Style Part One, and Part Two, again from Crockford. Together with the aforementioned Code Conventions article, they make a pretty good basis for writing clean, efficient code.

Best Practices for Speeding Up Your Web Site from Yahoo. The JavaScript advice is invaluable. It talks about the big stuff that will actually make a noticeable difference to your users.

The JavaScript Reference Series by Pat Hunlock. Much more comprehensive and useful than similar, more common references (I’m looking at you w3Schools).

]]> http://notjustahatrack.com/posts/must-read-javascript-articles/feed/ 0