Profile cover photo
Profile photo
Michiel Kalkman
90 followers
90 followers
About
Michiel's posts

Post has shared content
WebGL won!

4 years ago I set myself on the path of making WebGL win (versus Adobe's Stage3D, etc). Now that Google, BlackBerry, Mozilla, Opera, Microsoft, Apple and Intel are supporting the technology I can finally take a deep breath.

Along the path I've had to deal with a ton of negativity and counter-productive comments. It's been an interesting journey...

Of course, taking the full credit would be ridiculous. More than 300 other developers share the credit with me on the +three.js part. And like +three.js, many other libraries and engines have been doing their part to show how the technology could benefit the web.

We're not done yet though. I think we're just getting started with the kind of things WebGL can bring to the web. We've finally started to work on tools, that should open the technology to non-developers too.

As my friend +Theo Tillberg  would say... Champagne!!

Thanks everyone! ^^

Post has attachment

Post has shared content
Nice overview of CSS z-index property + stacking contexts and order logic: http://bit.ly/1fb3DJH ... Finally cleared up a bunch of long outstanding questions I had about it!
Photo

Post has attachment

Post has shared content
We will be kicking of 2014 in style with a WebGL mega event featuring four great speakers. This special event will be live streamed on Google Developers Live. Sign up now, because this one will fill up soon!

Post has shared content

Post has shared content
DevTools just got a cool new feature in Chrome canary - "show potential scroll bottlenecks".

I've talked before about how touch event handlers can impact scrolling performance (https://plus.sandbox.google.com/115788095648461403871/posts/cmzrtyBYPQc), and how compositor-thread touch hit testing helps mitigate this by keeping track of what regions of the page have touch event handlers.  Now (http://crbug.com/253552) you can easily see where exactly those regions are by enabling this option in dev tools.

I'm in the process of overhauling how compositor touch hit testing works to make it more reliable and faster (eg. see http://crbug.com/248522).  I apologize in advance if I break your website - there's a surprising number of corner cases (symptoms are that your touch event handlers won't get invoked when they should), but at least now you have an easy tool to prove that it's my fault.  These "touch event listener" rectangles should always include any region that has a touch event handler (including descendants of nodes with handlers), and the rectangles are supposed to move precisely with the elements that have the handlers.  Check out http://jsbin.com/apudet/1 with "show potential scroll bottlenecks" enabled to see an example of where this is broken today (although it should be fixed by my change in the next Canary build or two).

By the way, if you want to use this on a device without a touchscreen, then (once my change lands) you'll need to explicitly enable touch events with chrome://flags/#touch-events.
Photo

Post has attachment
Animated Photo

Post has shared content
My Problem With Turbolinks

I made a few snarky comments about Turbolinks recently and figured I should write down my thoughts more clearly.

If you're not aware of Turbolinks, it captures all local links that look like HTML pages, makes an Ajax request for the content, and then replaces the body with the response's body. It does a few other clever things, like extracting and replacing the title, and executing scripts in the response.

Overall, it's a clever way to get some increased speed while still using a traditional server-rendered-HTML architecture.

Caveats

Like any other solution, it comes with some caveats.

Probably the most important one is that normal HTML-rendered pages have their own clean global scope every time a new page is rendered.

This is not a mere quibble: a lot of existing JavaScript operates under the assumption of a clean scope, and a single DOMContentLoaded event. In a perfect world, popular JavaScript plugins would be architected to work well with a solution like Turbolinks, but the assumption of a clean global scope per server-rendered HTML page is baked into a lot of the JavaScript and jQuery libraries that people tend to use.

It is possible to deal with problems like this on a case-by-case basis (see https://github.com/rails/turbolinks/issues/87, for example), but in my opinion, this is going to end up in a game of whack-a-mole as each new patch breaks other valid use-cases.

At the end of the day, unless Turbolinks can perfectly emulate the browser's behavior, attempts to use Turbolinks with third-party JavaScript will either fail often or require an ever-growing library that handles more and more targeted edge-cases.

jQuery Turbolinks (https://github.com/kossnocorp/jquery.turbolinks) is a good example of something that tries to make the solution more transparent,  but introduces problems as it now triggers ready callbacks multiple times, and idempotence is not typically a requirement of ready handlers. I encourage you to review the open and closed issues on these projects to get a sense of the specific kinds of problems that can occur.

The Good

That said, for applications that are willing to carefully think through the requirements of Turbolinks, this solution does provide a nice transitional way to keep building applications without a lot of architectural changes with improved speed.

If you are thinking about using Turbolinks, make sure:

• Your JavaScript is designed to be long-lived across many different
  HTML pages without a refresh
• Your refresh handlers are idempotent. Don't register event handlers
  or other bindings in a refresh handler unless you reliably tear them down.
• You audit all third-party code that you use to make sure that they do not
  rely on DOM Ready events, or if they do, that they DOM Ready events are
  idempotent. If you don't feel comfortable auditing and cleaning up
  third-party code, don't use any. (note that the "turbolinks community",
  such as it is, might vet existing libraries for compliance, and that would
  help).

Post has shared content
HTTP 2.0 enables the server to send multiple responses for a single client request! Inlining is obsolete. But even more importantly, server push also opens up an entire world of new optimization opportunities: you can push any HTTP resource (e.g. redirect), (in/re)validate a cached entry, pair it up with SSE for real-time notifications, and more... 

Some of these features are already supported today by Chrome, others could be... Can you think of other interesting use cases for HTTP 2.0 server push?
Wait while more posts are being loaded