Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Freckle Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

Optimizing images for hardware-acceleration on the iPhone and iPad

August 12th, 2010

I found that big progressive JPEG images can cause performance problems when used with hardware accelerated CSS transforms, so here’s what I do to makes things work better (with ImageMagick):

convert somefile -interlace none somefile_for_ipad.jpg

The -interlace none option saves the image as a non-progressive JPEG, and Safari doesn’t attempt to render progressive intermediate steps when downloading the file (and thus saving it from creating textures for each intermediate step).

A useful command to find out if a JPEG file is progressive or not is:

identify -verbose filename.jpg

This will spit out tons of information about the file (more than you ever wanted to know), but somewhere in there it should say Interlace: None.

Note that if you’re NOT using hardware-acceleration, it’s probably best to have progressive JPEGs (show up faster and compress slightly better in most cases). Use -interlace JPEG to create those.

Want to know more? Learn tons of tricks at my HTML5 Mobile Pro Workshop (next one is on October 5, 2010).

Pragmatic HTML & CSS

August 10th, 2010

With all those great new features coming in CSS3 people are tempted to invent the “ultimate reset.css” stylesheet. But what’s the point? The default CSS rules are sensible and make sense (for example, they format unordered lists correctly). You’ll end up with less CSS to write, and less code to maintain, fewer lines of code all in all, if you DON’T use those those templates.

The best code is code that you don’t have to write.

In fact, here’s the HTML(5) template I use for new projects:

<!DOCTYPE html> 
<html>
<head>
  <title></title>
  <style></style>
</head>
<body>
</body>
</html>

And that’s it: be pragmatic about this, and don’t overengineer. Whenever you use something like…

<!--[if IE 7]>
<link rel="stylesheet" href="really/long/path/to/small/css/screen/patches/win-ie7.css" media="all" />
<![endif]-->

…a kitten dies somewhere. In most cases, the win-ie7.css file is probably empty or contains only a handful of special rules.

There are perfectly good CSS hacks that you can use, like:

* html div.blah { /* something for IE6 */ }
*+html div.blah { /* something for IE7 */ }
div.blah { color: #0FC\0/; /* IE8 */ }

Yeah, not quite beauties either, but at least they keep your HTML clean from those super-ugly, totally weird conditional comments, which quite mess up your code. Just stick those rules at the end for your stylesheet file or inline ‘em, if you have a short stylesheet or a one-pager.

Why do that? The stylesheet declaration above alone takes up 129 precious, precious bytes. It’s for just one version of that browser-like software that is called “Internet Explorer”. That’s more bytes than all of those three hacks combined (including the comments)—and they support 3 versions of IE.

At the end of the day, no one will judge your web sites and apps by how beautiful you include IE workarounds, but they will by how fast it loads.

Be pragmatic.

Go nuts at the JS1k JavaScript demo contest

August 7th, 2010

Peter van der Zee started the JS1K JavaScript demo contest for real coders! What can you code in just 1024 bytes of JavaScript? What can you do in a tweets’ length of JavaScript? Find out what others are up to and submit your own awesome tiny little JavaScript demos!

I’m a juror at this demo contest—please impress me by submitting really awesome demos!

Here are the rules:

  1. Create a fancy pancy Javascript demo
  2. Submissions may be up to 1k. (And not crash)
  3. Externals are strictly forbidden, unlike “some” contests. (Good luck minifying jQuery though!)
  4. Must work on current fx, sa, ch and o. (Let’s level the playing field)
  5. Minification and hacks allowed. (Go nuts)
  6. Bonus points if your submission fits in one tweet ;)
  7. Last day to submit is 10 September 2010

The winners will be announced at http://jsconf.eu/.

I’m not allowed to compete, but here’s a fun little tweet-friendly quine (put everything on one line):

alert((function(){return"alert(("+arguments.callee.toString()
.replace(/s/g,"")+")());";})());

Oh yeah, there are prizes to be had, among them free tickets to an upcoming HTML5 Mobile Pro Workshop andJavaScript Performance Rocks! ebooks and lots more!

HTML5 buzzwords in action

August 5th, 2010

Amy and I have made a version of the PepsiCo Zeitgeist for BlogHer 2010 (Safari 5 highly recommended to view in full glory!), and updated the visualization technology we use to the latest and greatest buzzwords in the process.

What is the Zeitgeist? It visualizes what attendees at the BlogHer conference are tweeting about, what the most important topics are, and how the attendees are connected (who is talking to who).

Big thanks to PepsiCo at this point, they’re doing some awesome things! Cheers!

But you’re here to read about buzzwords and if they are really applicable, so let’s have a look!

Hardware acceleration and scripty2

Sounds great, but is all the trouble good for something? Yes, it is. By using hardware-accelerated CSS animations, much smoother and less CPU-intensive animation is possible, plus you get ultra-smooth 50fps animation on iOS devices (iPhone, iPad). The Zeitgeist is not optimized for the iPhone, but if you have an iPad, be sure to check it out. It’s completely and utterly smooth.

We’re using mainly for the tweets visualization, but also for the bubbles on the connections page.

How does it work? Instead of animating standard CSS positioning properties like left, use -webkit-transform instead. Using that the browser has no need to recalculate the layout or do a complete rendering of the page for each animation step, instead the element is just a texture and is moved around with the facilities of the GPU, which is optimized for just that. The best thing is, it comes for free if you already use Scripty2—it does all the hard work for you of rewriting your “traditional” animations to hardware-accelerated ones.

It’s pretty new however, and right now only Safari 4+ (Mac), and Safari 5 (Mac & PC) support hardware-acceleration fully (no, Chrome doesn’t support it either). It seems that other browsers will catch up very soon, with at least Firefox and IE having announced hardware acceleration already (and when those are released, all that is needed is an update to Scripty2).

One big drawback: from time to time you hit some memory limitations and bugs, and these can be hard to reproduce. Keep in mind that it’s a very new technology and one that tries to push the edge of what web browsers can do! One thing that often helps is forcing the browser into making more elements into textures (try this first if you hit strange visual bugs like flickering):

body {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: perspective(-900);
}

someelement {
  -webkit-transform: translate3d(0,0,0);  /* force texture */
}

Dean Jackson from Apple writes me:

In essence, any transform that has a 3D operation as one of its functions will trigger hardware compositing, even when the actual transform is 2D, or not doing anything at all (such as translate3d(0,0,0)). Note this is just current behaviour, and could change in the future (which is why we don’t document or encourage it). But it is very helpful in some situations and can significantly improve redraw performance.

The big payoff is the performance on mobile devices. There’s no other way to do this than using -webkit-transform and you get super-smooth, super-awesome animations, and your clients will want to have your babies.

CSS3 gradients

Oh my god, these save so much work. We’re using a background composition with a pattern (provided as 24-bit transparent PNG, left/bottom aligned), two overlaying gradients for the blue background, and 4 gradients for the vignetting effect. The whole CSS block looks like this:

background: #2b4e94 url(../images/bg-pattern.png) left bottom no-repeat;
  
background:
  url(../images/bg-pattern.png) left bottom no-repeat,
  -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.6, rgba(0,0,0,0)), to(rgba(0,0,0,0.1))),
  -webkit-gradient(linear, left top, left bottom, from(#1c4088), to(#3c639d));
    
background:
  url(../images/bg-pattern.png) left bottom no-repeat,
  -moz-linear-gradient(-90deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(90deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(0deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(-90deg, rgba(0,0,0,0.1), rgba(0,0,0,0) 60%, rgba(0,0,0,0.1)),
  -moz-linear-gradient(-90deg, #1c4088, #3c639d);

You do have to have two definitions for Webkit- and Mozilla-based browsers. I kind of like Mozilla’s syntax more, but it’s really a matter of taste.

No JavaScript code and nothing else is required, the background automatically adjusts to the window size (be sure to set html,body{height:100%;}, too). These gradients are even great if you don’t want to use them for a production site—you can use them while prototyping your page to quickly try out variations, settle on one and then do it the “traditional” way (i.e. cut out graphics with Photoshop).

Next to the background, we’re also using gradients for the navigation buttons.

On IE and other browsers that don’t support these gradients, we just use a solid background color and the pattern. Looks fine too.

SVG

There are many graphics technologies that come with HTML5 (well, two), but there’s only one SVG. And SVG is awesome, because you get real, manipulatable nodes in your DOM tree. Animation is really easy, especially if you use the Raphaël JavaScript library, which works great with whatever other libraries you are using (in my case Prototype and Scripty2).

If you don’t know Raphaël (you should!), it provides a JavaScript API to generate vector graphics, using SVG on HTML5-supporting browsers, and VML on IE. It makes this transition largely painless, and forces you to learn some SVG in the process (notably, the SVG path string syntax, which can come in quite handy to understand the generated output).

We’re using it to draw and animate the lines that connect the nodes. It works everywhere, although SVG is not the fastest on mobile devices—we can get away with that with the specific animation we’re doing in this case.

Prototype.js

Prototype is the secret weapon in my arsenal, and I wouldn’t want to trade it with anything else. It’s superbly powerful when it comes to data crunching and munging.

var popular = data.words.map(function(word,idx){
  return { w:word.word.word, r:parseInt(word.word.hits) };
}).sortBy(function(w){ 
  return w.r;
}).reverse().slice(0,10).sortBy(Math.random); // *

What’s best about it is if you use Ruby in the backend, it makes for a quite seamless transition between Ruby and JavaScript coding. I like stuff that doesn’t get in the way.

It’s also quite well suited to implement prototypes (ha!) of more complicated algorithms, like the iterative algorithm used for placing the nodes of the connections graph (basically works with nodes & connecting edges and shifts stuff around based on “attraction” between nodes). However, iterative algorithms like these are one of the few things that actually require going in and doing some heavy-duty performance optimizations (like minimizing function calls, unrolling loops, precalculating stuff, etc.).

Conclusion

Buzzwords reign supreme! It’s not all just a senseless arms race between browser vendors, it’s actually useful for something! Now would be a good time to get up to speed with all those cool new buzzwords (and learn how to integrate them with your existing knowledge, of course!).

Plus, you can make it work cross-browser without too much effort. We support IE7, IE8, Safari 4+, Firefox 3.5+, Chrome and Opera. There are almost no hacks required for this broad compatibility.

By the way, we have some more tickets left for our HTML5 Mobile Pro Workshop, where I will share even more details about these and other awesome things you can do! Hint!

Update August 6, 2010: Added quote from Dean Jackson (Apple) about how hardware compositing is triggered.

*I know that sometimes I should use longer variable names

JavaScript Master Class September 29 & 30

August 4th, 2010

Announcing another one of of Amy Hoy’s and my Virtual JavaScript Master Classes!

The next class is scheduled for September 29 & 30, and is scheduled to be AWESOME. It’s split in two half-days so you get to breathe (and maybe do some of the homework!) between the parts. The class is timed US-friendly, beginning at 9am PT (12pm ET), but it works great for you european peeps too (6pm-10pm each day, or 5pm-9pm London time).

What do our new JavaScript ninjas say about the class? (and you WILL be a JavaScript ninja too after this intense experience, believe me!)

  • “Help & clarifications on the side [in the chat] = AWESOME team”
  • “Never thought we’d have on-demand examples, you guys are spoiling us!”
  • “JavaScript Master Class worth every cent. Tons of docs, answers, insights, fun & encouragement. Highly recommended, super friendly.”
  • “Enjoyed it, learnt a lot and the online format worked very well.”
  • “Completely Impressed”

You still need a browser with Flash installed (sadly HTML5 doesn’t really support video streaming), so we can stream live to you and you can interactively ask questions for more information and on-demand code on just about anything about JavaScript (we know a lot!)…

The class is totally framework agnostic, and concentrating on the pure essence of JavaScript programming itself (but it will help you understand that weird jQuery method or the Prototype.js idiom you have been wondering about).

Head over to our JavaScript Master Class site to learn more and sign up (right now, we still have early bird pricing on, but not for long– you save a cool $70 with the early bird pricing!).

When JavaScript makes no sense

July 28th, 2010

Here are some of the more weird things I’ve found over the years when using JavaScript.

My most favorite quirk ever is:

typeof NaN
// => number

Recently, I stumbled upon the “magic increasing number”:

9999999999999999
// => 10000000000000000

And this is from my article on number parsing:

parseInt("01") // --> 1
parseInt("02") // --> 2
parseInt("07") // --> 7
parseInt("08") // --> 0
parseInt("09") // --> 0

There’s an extensive collection of these and more at wtfjs, so go check it out! Some are pretty obvious in hindsight, but some are really, really obscure.

If you think you know everything about JavaScript, you probably don’t… What’s your favorite JavaScript quirk?

Learn how to build AWESOME mobile HTML5 apps

July 26th, 2010

HTML5 Mobile Pro Workshop

Want to learn how to build mobile web apps that use advanced CSS features like gradients and transformations, and HTML5 features like canvas, touch, audio, 2D and 3D animations, and more? Like you’ve seen on http://everytimezone.com and even more extreme?

Don’t panic! Amy and I proudly present: HTML5 Mobile Pro Workshop, a half-day online workshop on September 20, 2010, on building really great mobile HTML5 apps. We’ve limited the workshop to 25 virtual seats—so hurry if you want to join (we’ve sold a quarter of the seats already!).

Topics include: iOS (iPhone & iPad), Android and Palm WebOS Webkit-based browsers, capabilities of HTML5 & CSS3 & making them work for you, touch interfaces, hardware acceleration & 3D CSS, audio and video, fast loading, cross-browser issues and what works where, going offline and last but not least making it all AWESOME.

I personally want to see more awesome HTML5 apps out there, and the stuff you can do in mobile browsers is pretty mind-blowing (if you know how to implement it!), so join in on the fun!

Bringing back the blink tag to HTML5

July 21st, 2010

That is, at least for Webkit-based browsers that support the -webkit-animation CSS property.

@-webkit-keyframes blink {
  0%     { opacity: 0 } 50% { opacity: 0 }
  50.01% { opacity: 1 } 100% { opacity: 1 }
}

blink {
  -webkit-animation: blink 0.7s infinite linear alternate;
  -webkit-font-smoothing: antialiased;
}

***On Webkit-based browsers, and on those that support blink natively, this should blink!***

Why use -webkit-font-smoothing: antialiased, you ask? This forces the browser to never use sub-pixel antialiasing, which causes a visible “jump” when turning from <1 opacity to opacity=1. That way, the browser only uses normal antialiasing (this only matters for desktop browsers, mobile browsers use just plain old antialiasing by default).* Full MIT-licensed source code is available on Github.

Want to learn how to do stuff like this (well, maybe not this exact thing)? Join my HTML5 Mobile Pro Workshop, a half-day online workshop on doing awesome mobile HTML5 sites and apps, exploring all the technologies that are available to you!

*Thanks to rkh for pointing out -webkit-font-smoothing.

I can’t believe it’s not Flash talk video

July 15th, 2010

The good folks at Webstock (the most awesomest web conference there is!) have put up this years’ talk videos, so without further ado, here’s my talk where I can’t believe it’s not Flash*

I can't believe it's not Flash

Here’s my earlier article with the slides (view online and/or download).

In a cruel twist of fate, you can watch the video (or view the slides) only with Flash installed.

Note! The video is slow to load, because it’s streaming to you from New Zealand, a land well known for friendly people, beautiful, awe-inspiring nature, the good life, and horribly slow international internet connections. Give it some time!

*Actually, I can! That line is referring to one enthusiastic email that I received way back in 2005 when I first released script.aculo.us.

Scripty2 hardware-acceleration teaser

June 30th, 2010

Head over to http://scripty2.com/accel/ to see the teaser, and be sure to try it on an iPad or iPhone! :)

(To see the hardware acceleration in action you need to use a recent version of Safari, desktop or mobile).

Scripty2 is coming this summer as a beta release, and will include: super-user-friendly APIs, hardware-accelerated effects (without you having to know about all those -webkit-something-something properties), completely new and awesome, themeable and extensible user interface components, amazing interactive documentation, multi-touch support and much more.

Big thanks to Andrew Dupont for the hard work of making this work so flawlessly, and contributing tons of code to Scripty2!

Stay tuned!