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 […]
HTML5 TutorialTL;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, […]
Performance TutorialLike 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 […]
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 […]
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 […]
CSS TutorialIf 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 […]
Note: Like always, these are my personal experiences, and don’t reflect the opinion of my employer. I refrained from commenting on my experience with Edge in this post due to being biased (working on Chrome stuff) (but my comments would have been mostly positive). I’m typing this blog post on my new Dell XPS 13 […]
Disclosure (updated on 10/15): For those that have come here for the first time or don’t like to read About pages, I work at Google and am a web developer advocate, currently focussed on AMP. If you’d rather watch than read, the top 5 are now available as video: #1: “AMP is a new render […]