Quickly copy DOM attributes from one element to another

This is mostly a note for myself, but thought it might come in handy for some: Sometimes you need to transfer or copy DOM attributes from one element to another (as opposed to copying the whole element with cloneNode). Luckily, there’s the handy attributes object: In my case, I needed to transfer all attributes to […]

I’m hiring! Help us make content experiences for everyone

Sometimes I jokingly introduce myself as “the guy from the AMP videos”, as lately the public largely knows me, and by extension my team at Google, in the AMP context. But there’s actually much more happening in our small-but-mighty Content Ecosystem team at Google: We’ve made it our mission to ensure the web is the […]

Learning to unlearn

I couple years ago I had lunch with a successful serial entrepreneur in San Francisco. Mid way into the conversation we talked about which ideas get funded on Sand Hill Road and which do not. One thing we both agreed on is that no VC will fund projects without product-market fit. Fascinatingly, the lack of […]

Where to start if you want to become a web developer

Starting a career as web developer can be a daunting experience. I’ve just given a Q&A to students at a Korean university, and I figured that some of my answers might make for a neat cheatsheet on where to start if you’re new to the world wide web. None of this is new, and more […]

More important than !important

Update (28/7/2017): Doesn’t work in Firefox as it cascades differently and this won’t work in browsers than don’t support Web Animations. Some clever attempts to break include background: linear-gradient(blue, blue) (that technically sets a generated image, not a color, but fixed it anyway in the Pen by animating background instead) and filter: hue-rotate(90deg) (I wouldn’t […]

Building a PWAMP #0: Introducing the ShadowReader

TL;DR: Try out the ShadowReader, and browse the source code. I’m happy to introduce the ShadowReader, a (fairly) production-ready, vanilla-JS implementation of the PWAMP pattern combining AMP and PWA. I’ve posted some high level details and motivation why I’ve built it on the AMP blog, but here are some highlights: The entire app (minus fonts, […]

The Illusion of Speed

Like to watch, rather than read? Watch my talk from Awwwards LA 2017. If you could take a 50% hit in real world performance and get a site that feels 50% faster, would you? For years, my colleagues and I have been working on convincing developers that faster websites are better websites. That’s not what this […]

For less debugging madness, set a perf budget

If your plan was to build all the features of your app first, then spend a week to “clean up” and fix any perf issues, then here’s some friendly advice: Make a new plan. While I applaud the various DevTools teams around the world for constantly improving their performance tooling story, performance debugging on the […]

What I learned from going to a design conference

I just came back from Awwwards LA and had a blast. While not technically a design conference (they cross over quite a bit, which is why they invited folks like myself and Sarah), the largest part of the audience were designers (as opposed to developers, my usual audience). Here’s what I thought was interesting and […]

Block formatting contexts and lists

If you’ve been reading about the latest in CSS, you might have read about flow-root. Flow root establishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image: See […]