The future of data-binding is Object.observe()
Object.observe() is a proposed mechanism for bringing true data-binding to the browser. It exposes a mechanism for observing changes to objects and arrays, notifying o...
Blog
You can find my latest AI engineering articles on Substack, leadership on LeadDev, or browse my topic guides and personal blog posts below.
Personal Blog
Building WebApps With Yeoman And Polymer
♡ Web Components? I just published a brand new tutorial over on HTML5Rocks walking through how to build webapps with Yeoman and Polymer.Catching up on Web ComponentsNow you migh...
Video: Gone In 60fps - Making A Site Jank-Free
[caption id="attachment_6153" align="aligncenter" width="600"] When scroll is fast your web pages feel "responsive". If janky and scroll feels slow your users may get frustrated...
A Yeoman prompt to install Twitter Bootstrap for CSS, Sass, Less or Stylus
In this video, I walk through generator-bootstrap - an uber-simple Yeoman generator which prompts you for the flavour of Twitter Bootstrap you would like to install for a projec...
DevTools answers: patching changes from DevTools back to an extension
I was asked if it's possible to patch back Chrome DevTools based changes to a DevTools extension. For example, CSS changes made to the Elements panel. The current solution to th...
5 Minutes With Yeoman
I recorded a quick video on getting started with Yeoman for anyone new to the project : ) You might also find building apps with the Yeoman workflow a helpful read.
DevTools JavaScript Memory Profiling
Yesterday I published a refreshed guide to plugging memory leaks over on the Chrome DevTools docs site. It covers the Object allocation tracker, timeline memory, heap profiles a...
Tools for image optimization
As we saw a few weeks ago, the weight of an average web page is now almost 1.5MB (median ~1MB), with > 50% of this being images. It's a harsh reminder that many of our pages on ...
A whirlwind tour of Web Components with Polymer
In this quick video, I walk through using Web Components with Polymer covering: custom elements, templates, Shadow DOM and HTML Imports.Note: You might also find the n...
Visualising JavaScript Processing Over Time With DevTools Flame Charts
In this quick video, I walk through how to effectively use DevTools Flame Charts for visually representing your app's JavaScript processing over time. This can be usef...
Generate multi-resolution images for srcset with Grunt
As Mat Marquis recently summarized on SmashingMag, the srcset attribute allows developers to specify a list of sources for an image that are delivered depending on the pixel den...
Traceur-TodoMVC - a Backbone.js app written with ES6
I'm pleased to present a re-write of the Backbone TodoMVC app using ECMAScript 6 features such as classes, modules and fat-arrow syntax.Check out the literate version of the sou...
Release the Kraken! Announcing Yeoman 1.0
[caption id="attachment_5645" align="aligncenter" width="703"][A preview of the terminal output after running 'yo'[/caption]Last week, I had the pleasure of 'officially' releasi...
Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video)
In this video, Paul and I demo a new experimental bookmarklet he wrote for detecting critical CSS for above the fold content.External CSS stylesheets are render-blocki...
Tracking ECMAScript 6 Support
ECMAScript 6 is being progressively implemented by browser vendors over time and as such there is no ETA on it being available in all environments.Whilst specs and implementatio...
Checking in front-end dependencies
Package management is an important and evolving area in front-end development. It's also a contentious one with some favoring Bower, others preferring npm and Browserify and a n...
Making Maven Grunt.
IntroductionDevelopers working in agencies often tell us that they want to be able to use modern front-end tooling in their workflow. One set of options this manifests as is usi...
Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
In my new article with Paul Lewis on Smashing Magazine, we discuss how to improve the paint performance of your websites and Web apps. This is an area that we Web developers hav...
Jank Busting With Daft Punk
Yesterday, I looked at the new Daft Punk web experience on Pitchfork. It was visually stunning, featuring rich-animations throughout. I noticed however that scrolling on the pag...
Author In ES6, Transpile To ES5 As A Build-step: A Workflow For Grunt
Preface: This article assumes prior knowledge of Grunt, the JavaScript task runner and that you've heard of Traceur, the ES.next to ES5 transpiler by Google. Getting started...
Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools
“The Unicorn has a special ability to help it's master when in trouble. When tamed, they will not attack humans or tamed creatures, but will attack anything else with ...
Yeoman Update: announcing 1.0 beta 4, Windows support, Refreshed Angular, Backbone, Ember generators and more.
Today we're happy to announce the release of Yeoman 1.0 beta 4. A number of large updates have been made to the project since beta 3, covering scaffolding, performance impro...
DevTools Extensions For Web App Developers
The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent ...
Take Care When Using Null Transform Hacks For Forcing GPU Acceleration
At my jQueryTO keynote on paint optimization, I mentioned the performance benefits of promoting DOM elements to a composite layer using GPU acceleration in Chrome. Moving compos...
Substack
Future-proofing your Software Engineering career
Practical strategies for engineering careers in the future
The 70% problem: Hard truths about AI-assisted coding
A field guide and why we need to rethink our expectations
User-centric engineering
Engineering with user empathy is the foundation of great products
There is no right time. Just time and what you do with it.
How to thrive in imperfect conditions
Comparison is the thief of joy
Navigating comparison with mindfulness
Focus on what you can control
Actionable advice for empowerment
10 lessons from 12 years at Google
My lessons learned along the way.
LeadDev
Grow your influence like a leader, not a boss
Extending your influence past your immediate circle isn't as straightforward as you'd like to hope. But there are a few strategies you can employ to help.
How to build an effective technical strategy
Building a tech strategy requires a lot of moving parts. Learn about what routes to take and whether decisions should be top-down.
How to keep up with tech trends and upskill sustainably
With so many developments in the tech world it's difficult to keep up. Here are some strategies to stay on top of your upskilling.
Navigating competing priorities as an engineer
How can you prioritize when everyone's ask is an urgency and you don't have time to fit it all in?
Managing the chaos of context switching
It's time to examine the good, the bad, and the very ugly elements of context switching. Even better, we'll take a look at some strategies for managing it.
Focus on outcomes over outputs
Software engineering teams should focus on outcomes over outputs to deliver the best user and business value.
What makes an effective software engineer?
Being a good software engineer is not necessarily the same as being an effective one. Here, Google's Addy Osmani identifies the ten key traits of effective software engineers.