Homework! Interface Design Basics for Developers

Here’s an awesome presentation on Interface Design Basics from Samo Korošec.

Some good reading and thinking material for the weekend! 🙂 And maybe helps to make the web a little bit more use- and beautiful!

Berlin JavaScript Master Class in November

Amy Hoy and I proudly present our second JavaScript Master Class, this time it’s right after JSConf.eu in Berlin, Germany, on November 9, 2009.

If you’re at the intermediate or advanced level in your JavaScript practice, now’s the best time to level up to expert– you will learn boatloads, whether you use Prototype, jQuery, Mootools, or just your own naked cleverness.

The day is half about JavaScript the language, with topics ranging from functional programming patterns, closures and anonymous functions, object-orientation and prototypes all the way to building domain-specific languages and APIs in JavaScript; and half about the ecosystem, encompassing code organization, getting deployment right, creating great documentation, and having proper unit testing in place.

Our full-day class is limited to 20 seats, so you get to to pick Amy and my brains to the fullest (and afterwards we’ll socialize over a beer or two!).

Head over to http://javascriptmasterclass.com/ to learn more and register!

PS, we’re expecting to sell out—and quick, too. We’d hate to hear from you that you wanted to come but didn’t get a seat in time, so if you want to attend, please don’t hesitate! Register early!

textorize: Pristine Font rendering for the Web

Update October 6, 2009: http://textorize.org is now live and the main resource for the textorize project!

We all want really nice looking web typography, and there’s a ton of solutions out there. Here’s mine. I’ve to warn you, it’s very lo-tech. It’s done with images. But with really nice ones.

In the image above, note how the textorize version is much more consistant and “clear”, where as the Photoshop-generated text has fuzzy fringes and varies in clearness. For example, compare the bottom of the “a” in “readers”, and the “l” in “mir.aculo.us” between the versions.

View the presentation on how this compares to Photoshop, ImageMagick, sIFR and cufon, and why subpixel antialising is so awesome:

It all boils down to a Ruby script that runs on OS X only and uses OS X’s really awesome typography and subpixel antialiased font rendering. Why not tap into this to make those headline graphics? With Rubycocoa you can easily whip up a small app that draws some text, and save it into a PNG file.

On OS X, just do a:

$ gem sources -a http://gems.github.com
$ sudo gem install madrobby-textorize

You can then call and generate images by:

$ textorize -f"Hoefler Text" -s30 "Hello mir.aculo.us readers"

Images are by default rendered into a output.png file. The command line interface is great for integrating it into build tools, for example we’ve a list of graphics to generate that a capistrano task handles for us (I’d love to release this as a Rails plugin, too). There’s more options of course, e.g. to customize colors.

Voilà, really nice and pristine headline graphics, without the suck of ugly Photoshop typograhy or tons of plugins and complicated font conversion. And don’t get me started on all the license issues.

Interested in the source? It’s all licensed under a MIT License, and put on Github for your forking pleasure.

Big thanks to @kastner and @levinalex for helping me get this to work!

Update October 1, 2009 Some people have asked for how this compares with “
Typekit. I do like Typekit as it tries to make good use of the @font-face CSS property, however there are problems with browsers’ font rendering engines themselves. Here’s an example on what I mean, Firefox 3.5 on Windows doesn’t do a great job of rendering subpixel antialiasing:

Force-redraw DOM technique for WebKit-based browsers

Something I’ve tried when I had an issue with Safari 4 not properly layouting/rendering an element after setting a new value for its innerHTML:

element.style.webkitTransform = 'scale(1)';

This did the trick and should work with Safari, Chrome and other browsers that are based on WebKit.

If you need a more general solution for elements that don’t seem to render properly, try my text-node based trick.

Seems that browsers are a little bit too optimized, but as long as you can give them a nudge…

JavaScript Rocks! Performance ebook is final

Our book is ready for your download pleasure! And it’s packed full of info on all the tricks we use to make our apps and sites fast and snappy.

Co-written by Amy Hoy and me, it’s over 300 pages and is actually three books and our DOM Monster, a bookmarklet-based cross-browser performance evaluation tool.

Part 1: Dude, Where’s My Performance?

Get started with knowing what this is all about, why it is important and how to measure performance and master all the tools.

Part 2: Loadtime, or, The Land of Unicorn Tears

Loadtime is a sad time, a time of of enormous, slow-loading assets; of maxed-out request queues; of bloated, waddling DOMs. Of limp white screens. Most of the world’s worst web performance woes? They live and breed in Loadtime.

Part 3: Runtime, Cuz Tuning Loops Is Hardcore

See how to write slicker, sexier, faster JavaScript from the get-go. Micro-optimize without being premature. Learn the kinds of ridiculous optimization tactics that Gentoo tuner boys can only dream of. And yes, we’re teaching you how to unroll loops.

We’re totally framework-agnostic, so everything’s applicable to any and all JavaScript code out there! Whether you use Prototype, or jQuery or dojo, you’ll find that our tuning tricks can help speed things up!

And… introducing…. the… DOM Monster! See for yourself!

We’ve an introductory price for the first 500 copies we sell of $39, after that it will go up to $49!

P.S. After the great success of our JavaScript Master Class in Washington, DC, we’ve decided to do a Master Class in Europe, too. We’ll announce details soon!

Speaking at the European JavaScript Conference

Amy and I will do talks at JSConf.eu, the European JavaScript Conference, which will be held in Berlin on November 7 & 8. I’m really excited to be a part of this and to see that there is a JavaScript community forming in Europe!

My talk will be on Extreme JavaScript Performance and Amy will show you how to think outside the box and do a Hard Refresh: Not Just Another Lightbox.

Other speakers include John Resig of jQuery and Dion Almaer and Ben Galbraith from Ajaxian/Mozilla!

We hear that tickets are selling fast, and because it’s just €249 for the early bird ticket I wouldn’t think twice of attending. 🙂

JavaScript graphics panel at SXSW 2010

Want to learn about how to do graphics in pure JavaScript and dump proprietary plugins? Vote for our JavaScript graphics panel at SXSW 2010!

We’ve a bunch of wonderful panelists lined up:

• Dave Shea (CSS Zen Garden)
• Simo Kinnunen (Cufón)
• Al MacDonald (Processing.js)
• Dmitry Baranovskiy (Raphaël)
• Thomas Fuchs (script.aculo.us)

Show your interest and vote for us! Head over to the SXSW 2010 panel picker and give us a thumbs up!

See you at SXSW 2010!

JavaScript Master Class Washington D.C.

Amy and I are going to teach our JavaScript Master Class on September 12, 2009 in Washington D.C.

If you’re at the intermediate or advanced level in your JavaScript practice, now’s the best time to level up to expert with our JavaScript Master Class:

• Laugh along as you learn how to wield sharp-edged, higher-order language features like a pro, and make the DOM your slave to do your bidding.
• Study the enemy—the browser—in detail, so you know best how to conquer it.
• Ensure accuracy, no matter the changes in terrain, with unit testing.
• Master the art of speed—squeezing out every last precious second, both serving your code, and executing it.
• Study the ways of the masters with project life cycles, code management, architecture, and tools.

We’re talking JavaScript here, not frameworks, so all the goodness is applicable to whatever JavaScript framework you use!

A full day of JavaScript goodness, early bird special until August 26th: just $380 (that’s $45 of the regular price!). All participants also get a free copy of JavaScript Performance Rocks! and we’ll go for beers afterwards!

Add Web Inspector button to Safari toolbar

Here’s a little tip that makes the Safari Web Inspector even better (and saves you from remembering the keyboard shortcut!).

Select View → Customize Toolbar… and drag the Web Inspector button to your Safari toolbar (on my Safari the button lives on the far right, next to the search box).

Instant inspecting and debugging goodness!

Judging at the The ONYAs

Amy and I are proud to be judges at the first ONYA awards, which celebrates all things web in New Zealand. It’s organized by the good folk of Webstock, the awesomest web conference ever, where we’ve attended twice– we’re really honoured by this and are looking forward to your entries!

So, if you’re in New Zealand and have a really cool website, web application or mobile app, be sure to submit your entry (deadline is July 24).