Kasper Tidemann - human, developer, businessman, man of the world.
From our hands we give.

Improving CSS animation performance in Chrome

If you’re like me, you get a tickly feeling when working with CSS animations. Just the right sprinkle will spark magic and bring about it committed users.

Well, not always since animation performance can be quite terrible, especially in Chrome. Reaching 60 fps in the browser is hard in general, but there has to be a middle ground between that and complete choppiness. But when does performance start to suffer? Basically, when you’re animating a DOM element that contains lots of child elements.

It goes a bit beyond that, though. Here’s a quote from the official design document regarding compositioning:

Accelerated compositing in WebKit (and Chromium) kicks in only if certain types of content appear on the page. An easy trick to force a page to switch over to the compositor is to supply a -webkit-transform:translateZ(0) for an element in the page.

So without further ado, the trick is to apply either a -webkit-transform-translateZ(0); or a -webkit-transform-translate3d(0, 0, 0); declaration to the CSS belonging to the DOM element in question. Doing so will improve the animation performance in Chrome.

Regarding e-mail accounts greying out in iOS 7.1

The release of iOS 7.1 introduced a host of minor improvements along with a couple of new bugs. One of the problems I experienced in iOS 7.1 was e-mail accounts greying out and becoming inactive and unselectable in Mail:

The unselectable, grey behavior happened to both my Gmail and Google Apps accounts.

The broadly accepted solution seems to be to remove the account in question and add it again via the “Other” option under Preferences → E-mail, contacts, calenders → Add account, typing in imap.gmail.com etc. manually. This did not work for me.

What did work was the explicit toggling of labels used in Gmail. Labels are used for categorizing your e-mails, something quite useful for large inboxes. But if you have too many labels, Mail in iOS 7.1 stops working properly.

To view all your labels, login to Gmail and navigate to Settings → General → Labels. Scroll down a bit and you’ll see all your labels. Here, you need to disable them in IMAP via the checkbox:

So, in short: disable the showing of all non-Gmail labels in IMAP, remove and re-add your account in iOS and then voila! It should work again.

Convergent/Divergent by Christopher Meiklejohn

My friend and distributed partner-in-crime, Christopher Meiklejohn, gave a talk at this year’s EmberConf about distributed systems.

Nothing is truly monolithic until persistence is instant. There is no simple truth across networks. And hence, the last writes always seem to win, making me highly recommend listening to his talk.

Skin rendition in WebGL

I recently stumbled upon an impressive example of skin rendition using tonemapping as defined by:

Tone mapping is a technique used in image processing and computer graphics to map one set of colors to another in order to approximate the appearance of high dynamic range images in a medium that has a more limited dynamic range.

While the example may appear a bit creepy, indeed it is impressive. As always when dealing with WebGL, using Chrome is recommended.

Steve Jobs on the difference between a great idea and a great product

One of the things that really hurt Apple after I left was that John Scully got a very serious disease. And that is the disease of thinking that a really great idea is 90% of the work. And that if you just tell all these other people that “here’s this great idea!”, then of course they can just go off and make it happen.

The problem with that is that there is a tremendous amount of craftmanship in between a great idea and a great product. And as you evolve that great idea, it changes and grows. It never comes out like it starts because you learn a lot more as you get into the subtleties of it and you also find that there are tremendous trade-offs that you have to make.

I mean, there are just certain things that you can’t make electrons do. There are certain things you can’t make plastics do or glass do or factories do or robots do.

As you get into all these things, designing a product is the art of keeping 5,000 things in your brain and fitting them all together and continuing to push to fit them together in new and different ways to get what you want.

And every day you discover something new that is a new problem or a new opportunity to fit these things together a little differently. And that’s the process that is the magic.

– Steve Jobs, 1995.

The Road to Ember Data 1.0

Recently, Tom Dale and Yehuda Katz co-wrote a post regarding the road to Ember Data 1.0.

I’ve been an avid user of Ember Data from the very beginning, at least since revision 4 back in the summer of 2012. Much has changed since then, resulting in code frequently breaking and heads frequently aching. But I never complained – this is the cost of quality.

We’re nearing a stable release now, bringing along with it an API freeze and the well-thought through features we’ve come to expect from the core team.

Now, the blog post is interesting because it addresses some of the pain points I’ve had to face myself working with Ember Data, namely relationships. Say we have this App.Blog record:

{
  "id": 1,
  "name: "kaspertidemann.com",
  "posts": [2]
}

… and this App.Post record:

{
  "blog_id": 1,
  "id": 2,
  "title": "The Road to Ember Data 1.0"
)

The above makes sense, right? Well, wait a minute. What if the blog in question contains thousands of posts? In that case, would it really be necessary to include every single post id in the JSON payload?

Until recently, the answer to that question was yes. But no one wants to send "posts": [2,3,4,5,6,7,8,..] over the wire when fetching an App.Blog record. That approach is doomed to play out beyond poorly.

In a project of mine, I’ve addressed this via a layer of model controllers. The controllers allow me to do filtering, client-side searching etc. With the upcoming Ember Data version 1.0, this is partly resolved with the concept of a single source of truth – hence something to look very much forward to.

Finally, relationships always being treated asynchronously is the only plausible strategy. In my model controllers, I’ve implemented a findRecord function that always returns a promise to abstract away any confusion in this regard. The final settling on asynchronous relationships is spot on.

All in all, I’m excited about Ember Data version 1.0. It’s been a bumpy ride full of ups and downs, but I’ve never doubted the eventual stabilization of the project. Good times ahead!

JSHint for Atom

The web community is buzzing these days due to the release of Atom, the new text editor by GitHub.

While Atom reminds heavily of both Sublime Text and Light Table, there are notable differences – especially the packages system.

On that note, Sindre Sorhus just released his JSHint for Atom package. It’s a neat addition that brings JSHint directly into the editor itself.

You can install the package by searching for “jshint” in under the Packages pane in the Atom preferences. At least two results will show up, so choose to install the “Jshint” one. Once installed, you’re good to go.

Express 3.x to 4.0 migration guide

If you’re using Node.js, there’s quite the chance you’re using Express as well. The project has reached the version 4.0 release candidate state, bringing some changes with it – mainly that Connect is no longer a dependency.

This means that all Connect functions previously available on the express namespace are no longer available.

For a full walkthrough of all breaking changes, take a look at the new Express 3.x to 4.0 migration guide. Happy upgrading!

HTML-safe strings in Handlebars

Quite often, you may find yourself working with JavaScript strings containing HTML. If you output these in Handlebars using the normal double-bracketed notation, a string containing Hello there!<br />Good to see you. will be output as just that:

Hello there!<br />Good to see you.

In order to insert the actual HTML, use the triple-bracketed option {{{someString}}}. This results in:

Hello there!
Good to see you.

In short: easy and convenient.

JavaScript style guide

There are as many styles of coding as there are developers – we all have our own way of writing code that feels just right.

In an attempt to solidify some common patterns, Airbnb has created a JavaScript style guide. It contains many small tips for better readability, including one of my own favorites: discouraging the use of klass in favor of type.

The Airbnb JavaScript style guide is a quick read well worth the time.

Kasper Tidemann