はてなブックマーク

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 lever

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 which c

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 conso

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, Stack

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 ye

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… T

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 a

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 implementor maneuver

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

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 g

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 200

If you’ve ever attached an event handler to the window’s resize event, you have probably noticed that while Firefox fires the event slow and sensibly, IE and Webkit go totally spastic. PPK lays it out like this: In IE, Safari, and Chrome many resize events fire as long as the user continues resizing the window. Opera uses as many resize events, but fires them all at the end of the resizing. Firefo

Heard of Sjoerd Visscher? I would venture to guess you have not; however, what he considered a minor discovery of his is at the foundation of our ability to use HTML5 today. Back in 2002, In The Hague, Netherlands, Mr. Visscher was attempting to improve the performance of his XSL output. He switched from createElement calls to setting the innerHTML property, and then realized all the unknown non-H

Pavel Feldman (Dev Tools engineering lead) and I just spoke at Google I/O about the Chrome Developer tools. We covered a whole lot of enhancements to style manipulation, timeline inspection, script debugging, DOM and Event listener breakpoints. If you haven’t looked much at the dev tools in 12 months, you need to give this another look. But if you’re also using it daily, I can guarantee we show so

Here are the slides. :) In this 30min video I cover: Reflows, what they are and how to avoid them Hardware accelerated CSS, how to trigger it Letting the browser optimize animation for you with requestAnimationFrame Web Workers Benchmarking Build scripts

The project went 1.0 today. \o/ A custom builder to customize your download. (It’s by the same guy behind initializr) An Ant Build Script that handles all the optimization to make YSlow and PageSpeed happy. Rich and beautiful documentation Lots of videos (2 new) on Getting Started and familiarizing with the Build Script Default webserver configurations optimized for perf for: Apache, Nginx, Lightt

If you’ve never written code to animate inside the browser, you can stop reading :) What is requestAnimationFrame? In your animation work, you’ve used a timer loop to make changes every few milliseconds. Good for us: browser vendors have decided, “hey, why don’t we just give you an API for that, because we can probably optimize some things for you.” So it’s basic API for use with animation, whethe

var ref = document.getElementsByTagName('script')[0]; ref.parentNode.insertBefore(yourElem, ref); But you prefer a good old document.body.appendChild(elem); Awww! I know, man. I used to, too. Well, you can’t always trust this.. Especially if you’re writing library, widget or third-party code. Here’s why you can trust this insertBefore method, and why all the other techniques are not wise: appendCh

I recently dove back into the jQuery source code to pull out some more JavaScript goodness. If you haven’t seen the original 10 Things I Learned from the jQuery Source video, definitely check that out. But now.. some newness: youtube link for flash-less HTML5 player In this video: pseudo-module patterns with IIFEs (has.js example) data()’s new HTML5 powers via massive ternary operator chaining how

Update 2014.12.17: Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset. Allowing the snippet to request over HTTP opens the door for attacks like the recent Github Man-on-the-side attack. It’s always safe to request HTTPS assets even if your site is on HTT

Last weekend was the incredible TXJS conference. It was a grand time in hot hot Texas. Joe Bartlett has a great conference roundup, rebecca’s pix are quite pretty, and most of the speaker slides are on the official site. I’ve rerecorded my talk in screencast form. Here’s what to expect from the 52 minute video: It’s jQuery on the big screen. We’ll open the jQuery source and run through how the jQu

font-weight:normal; font-style:normal; font-variant:normal; /* these values are defaults in FF/Opera/IE but not webkit */ FF/Linux cannot serve webfonts from the file:// protocol. (Also, a tome on type quality with linux from Evan Martin) TrueType format renders with a better quality than Opentype CFF. (sez Typekit) (fontsquirrel default) In IE6-8, using createStyleSheet and then setting styleElem

This weekend I hung out with some SVG all-stars and learned how SVG, HTML, and CSS can combine for some badass visual filters applied to content. Clearly it’s the most fun to apply it to <video>, though I could have done it to any HTML. Demo page: SVG filters on html5 <video> Up/right arrow keys are fun, too. Blur is certainly the most useful, I’d say. For instance, Mike Matas’s new site could dyn

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

Let me introduce you to the best way to do your @font-face definitions: @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses.