Way back in Dec 2015, @maxogden wrote a nice guide on stabilizing your own video with ffmpeg. I return to it on occasion and have updated my gist comment to offer some updated commands. Since enough has changed regarding installation and use, I figure a new, spiffy, and working guide deserves a non-gist home. Presenting the 2021-era guide to pretty easy DIY video stabilization! On Mac OS, install…
I ve published a few articles on Medium that may interest the reader here: requestAnimationFrame Scheduling For Nerds Understand how rAF callbacks are scheduled and why its very reasonable to have multiple callbacks execute within the same frame. Debugging Node.js with Chrome DevTools The canonical guide to using the Chrome DevTools UI for debugging Node.js. It definitely beats console.log. ;)…
Recently, I ve spent some time recently profiling real-world mobile websites. Using the 1000/100/6 performance model 1 , and spelunking deep into each app, the findings have been fascinating. I ve written up case study documents for each, incorporating all the findings: Illustrated diagnoses for the poor performance What actions the developer should take How Chrome s tooling should improve…
Feb 2015: A lot s happened since I wrote this post two years ago. Chrome forked WebKit and started Blink, Opera adopted Chromium, and node-webkit became nw.js. This post describes a complexity of defining WebKit that doesn t exist much anymore; with Chrome s departure the WebKit world is more simple and clear. WebKit is deployed through iOS Safari and Mac Safari, and the active GTK community…
Update (2016): The more canonical writeup of this technique is at High Performance Animations - HTML5 Rocks . TL;DR: Only transform & opacity ; never top / left ! In modern days we have two primary options for moving an element across the screen: using CSS 2D transforms and translate() using position:absolute and top / left Chris Coyier was asked why you should use translate. Go read his response…
If you do front-end web development and already use Chrome as your development browser, I encourage you to use Chrome Canary. A new Chrome Canary build is available daily (we cut at 2am PST and take the best of last 40 revisions, to be specific). Running fresh builds gives you great goodies to look forward : Chrome DevTools features $_ (for the Console s most recently evaluated result) Styled…
The great folks at Treehouse sat down with me for 30 minutes to talk about frontend development, my background, HTML5 Boilerplate and tooling. A few highlights: 3:40 Where d I grow up? What was I into? (Also, the supercool IE4 DHTML event I went to!) 14:45 What s my favorite feature inside the HTML5 Boilerplate? 18:34 Will web development even out where we don t need to fuss over so many fallback…
I absolutely love developing for the clientside of the web. Delivering the actual interactions and UI that all users feel is an absolutely gratifying experience. However… it s not a piece of cake to develop for all desktop browsers, mobile browsers, and all the device/OS combinations within. It s hard to track down accurate info, but hey we get by with an unruly combination of Mozilla s MDN,…
The past few years’ browser focus on speed has been great for us and our users. We’ve seen a huge and dramatic performance boost on benchmarks like Sunspider, Kraken, and Octane. But, these benchmarks, often crafted by JavaScript VM engineers, test raw JavaScript performance, which is rarely the bottleneck we have in our apps. These days, our performance bottlenecks are oftentimes DOM, <canvas>…
University-level education has never really touched too directly on what we do as frontend developers. I know I was self-taught in the ways of the browser, as were all of my friends. Luckily the sort of webapp work we do these days is quite sophisticated so those CS graduates bring much of the great ideas to the JavaScript community. ( Alex Sexton has been a personal inspiration here) Early last…
One of the good things about having the eyeballs of many people is that you now have the ability to throw other people into the limelight that completely deserve to be in it. Divya Manian and I have been, for a while now, putting together a list of people in the front-end development community who, in our opinion, could use more broad acknowledgment and attention. They re also inspiring because…
Every month, WebKit, Firefox and Opera are shipping incredible features; IE10 is also going to settle up and even out those HTML5 Test scores (plus some features they may debut, like Grid Layout!). But while these features are becoming available in some browsers, most of us can t use them because we have a sizable audience who have been left behind on old browsers. A while ago I made a big fuss…
Jacob Thornton has an inspiring slide deck on accessibility that brings to fore some of the concerns that web developers have with implementing features around accessibility. For a very long time, developers have been told about making websites accessible . Like it is a faucet that should be turned on or off. Till Victor Tsaran s demonstration of using a screenreader (which was in 2007 - a very…
One of the things I recognize at Google is how productive developers surround themselves with powerful tools for iterative development and debugging. For us front-end developers, the ecosystem of tools has exploded in the past two years, as we have a lot more software and libraries beyond Firebug and jQuery to help us build webapps. In the talk below I walk through the current ecosystem of tools…
or The premise of prefixes makes unrealistic demands on how developers maintain sites There s a lot of conversation about making prefixes work (by changing policy), but I believe they already are at odds with the developer workflow. In this proposal I hope to show that: prefixes are not developer-friendly recent features would have been in a much better state without prefixes im plementor…
One of my least favorite parts about layout with CSS is the relationship of width and padding. You re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And lo and behold, you now are subtracting pixels from your original width so the box doesn t expand. Ugh. If I say the width is…
This Wednesday, me and a ragtag team of like-minded developers launched Move the Web Forward , an initiative to direct people s passions into productive efforts that assist not only the web community but the entire web platform. People often feel the need to give back , but when it comes to contributing it s a challenge to find the right place. This is something I ve seen happen firsthand in the…
While a lot of conversation has moved to twitter and G+, hugely useful information is still published regularly to blogs. I ve shared collections of frontend development feeds twice before . Now I m back, but with three choices: Download this: frontend-feeds.opml 2013.07.26: Poor Reader. : ( Here are the three below bundles grouped up into an OPML file. Your new news reader can import them in one…
Just gave this talk at W3Conf about some of the innerworkings of HTML5. Lots of did-you-know and cool insight into how browsers work. 37 minutes long, The Primitives of the HTML5 Foundation - Slides I do discuss optional start and end tags as well as not quoting your attributes. I concede that these ideas scare the shit out of people. In fact, when I first heard Jens Meiert propose the idea in…
Divya Manian kicked off a good bout of discussion of HTML semantics with her post Our pointless pursuit of semantic value . It called into question the amount of time we spend on identifying the Right and Best ways of marking up our content while highlighting details of some of the consumers of semantics like assistive technology (AT). Jeremy Keith responded in Pursing Semantic Value . I wanted to…