css diff

CSS is the worst because it blocks page rendering. The bigger it grows, the more it blocks. And bigger is what CSS becomes if left unattended, as anyone who has worked on any project for more than a few days or with more than a few people can confirm. So occasionally one must step back […]

May 9th, 2014
Tags: CSS

DIY source maps

In today’s world of always having some sort of code transformation before your JS/CSS/HTML reaches the user, e.g. minification, concatenation, es6-to-es3 transpilation, it’s nice to be able to go back to the source before the transformation. And when that happens in the comfort and the immediacy of the browser’s dev tools, even better! Enter source […]

May 8th, 2014
Tags: JavaScript

Writing ES6 today with jstransform

So there’s this recent open-source project from Facebook called jstransform. It’s also used by ReactJS. It lets you explore ES6 features and not only explore, but use them in production code. All you need to do is add the transformation to your static resource pipeline. (Of course you have one, right, for minification and so […]

April 21st, 2014
Tags: JavaScript, tools

Beacon performance

Beacons are small requests that our apps make to report some information “home”, to the server. Beacons are often used to report visitor stats, JS errors, performance metrics. Beacons often don’t return any data back to the client, but some do. Example use <div id="app">Awesome app is awesome</div> <script> // gather data somehow var data […]

February 9th, 2014
Tags: performance

Hello subpixel world

Since IE9 and Firefox(v.?) we now have subpixel rendering of fonts. This is cool and all but imagine this: you have some text you want to measure the width of the text and size another element to the same dimensions Simple. But if you use offsetWidth/offsetHeight to measure, you get a rounded integer and not […]

February 6th, 2014
Tags: browsers, CSS, JavaScript

ReActiveTable bookmarklet

Previously… React and tables. I’ve been meaning to improve a little on the table example built with React and a post by Steve was the final push. He shared his “ActiveTable” bookmarklet. So, introducing a bookmarklet to make it easier to work with random HTML tables you come across… ReActiveTable Drag this link to your […]

October 23rd, 2013
Tags: react

NYC.bind(me)

On my way to NYC for Edge conference and NYC Web perf meetup. Some slides and RSVP links inside.

September 22nd, 2013
Tags: JavaScript, performance, speaking

Server-side React with PHP – part 2

Part 1 ended with todos. The first one was to couple the server-side generated code with the client-side React, so that any updates past the initial page load will be handled by React’s client JS, which is where React shines. Let’s see how you can do just that. PHP data fetch, gluing JS for v8 […]

September 19th, 2013
Tags: JavaScript, php, react

Borrowing typography tricks from the masters

Inspect the styles in Mobile Safari’s Reader feature to learn typography

September 16th, 2013
Tags: CSS

Server-side React with PHP

Problem: Build web UIs Solution: React Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives) Solution: React page to render the first view Problem: Can’t host node.js apps / I have tons of PHP code Solution: Use PHP then! This post […]

September 13th, 2013
Tags: JavaScript, php, react

Installing v8js for PHP on a Mac

Motivation? Run JS code inside PHP. Just… because 🙂 I struggled for a while with this installation, so leaving a trail here for anyone looking. What you need to accomplish? Goal: run JS code inside a PHP script running on a webserver. Already accomplished: Macs come with a webserver (Apache) and PHP. To get there: […]

September 11th, 2013
Tags: JavaScript, mac, php

Reactive table

In the previous post I mentioned the pains, misery and suffering attached to creating and updating an HTML table in DOM land. Now let’s see how you do this simple task in React. Demo React is all about components. So let’s build one. Let’s call it Table (to avoid any confusion what the component is […]

September 10th, 2013
Tags: JavaScript, react

Remarkable React

I gave a talk about React at BrazilJS few days ago. The “slides” are here. In this post I’ll go over what I said (more or less) at the beginning of the presentation. I hope to follow up with some more code. Disclaimer: I work at Facebook. But these are my thoughts. In fact, I […]

August 26th, 2013
Tags: facebook, JavaScript, performance, react

Here’s to a faster Recommendations plugin

So I’ve been part of the quest of making all Facebook social plugins faster, even if it means rewriting them from scratch. After the Send plugin, Like button (perf optimizations described here), Follow plugin, Facepile and Likebox (perf details here), now you have a faster Recommendations plugin. The techniques used to make it faster are […]

May 5th, 2013
Tags: facebook, performance

CSS animations off the UI thread

This excellent Google I/O talk mentions that Chrome for Android moves the CSS animations off of the UI thread, which is, of course, a great idea. Playing around with it, here’s what I found: Browser support: Desktop Safari, iOS Safari, Android Chrome. You need to use CSS transforms. Animating regular properties doesn’t work. Update: (see […]

March 12th, 2013
Tags: CSS, performance

C3PO: Common 3rd-party objects

Problem: too much JavaScript in your page to handle 3rd party widgets (e.g. Like buttons) Possible solution: a common piece of JavaScript to handle all third parties’ needs What JavaScript? If you’ve read the previous post, you see that the most features in a third party widget are possible only if you inject JavaScript from […]

February 18th, 2013
Tags: facebook, JavaScript, performance

Speed geek’s guide to Facebook buttons

or “How to help your users share your content on Facebook and not hurt performance” Facebook’s like button is much much faster now than it used to be. It also uses much fewer resources. And lazy-evaluates JavaScript on demand. And so on. But it’s still not the only option when it comes to putting a […]

February 14th, 2013
Tags: JavaScript, performance

Run jsperf tests in a bunch of WebPagetest browsers

Motivation 1. You write a new test to confirm a JavaScript-related performance speculation 2. You click 3. Your test runs in a bunch of browsers Glossary JSperf.com is the site where all you JavaScript performance guesswork should go to die or be confirmed. You know how the old wise people say “JSperf URL or it […]

February 11th, 2013
Tags: JavaScript, performance

webkit css-on-demand issues

This post brought to you via Facebook engineers Jeff Morrison and Andrey Sukhachev, who discovered and helped isolate the issue. Use case Think a “single page app” use case. You click a button. Content comes via XHR. But content is complex (and app is as lazy-loading as possible) and content requires extra CSS. In an […]

February 11th, 2013
Tags: CSS, performance

Digging into the HTTP archive #2

Continuing from earlier tonight, let’s see how you can use the HTTP archive as a starting point and continue examining the Internet at large. Task: figure out what % of the JPEGs out there on the web today are progressive vs baseline. Ann Robson has an article for the perfplanet calendar later tonight with all […]

December 28th, 2012
Tags: performance

Digging into the HTTP archive

Update: Second part One way to do web performance research is to dig into what’s out there. It’s a tradition dating back from Steve Souders and his HPWS where he was looking at the top 10 Alexa sites for proof that best practices are or aren’t followed. This involves loading each pages and inspecting the […]

December 28th, 2012
Tags: performance

Deck the Halls 2012

Traditions are traditions. Marry Christmas with a new cover, this time it’s Deck the Halls: Deck the halls (part one) (It’s only part one because I didn’t find the time to properly record what I had in mind – another 7/8th cover like last year. But you can hear the idea at the end) Here […]

December 24th, 2012
Tags: Music

WebAudio: live input

Live input, aka getUserMedia: it exists in Chrome Canary for audio too. Great times to be a web developer, right? Let’s check it out. Here’s the demo, but first a prerequisite: go chrome://flags, search for “Web Audio Input” and enable it. Restart Chrome Canary. With a guitar I wanted to have a little trickier setup […]

October 28th, 2012
Tags: JavaScript, Music, WebAudio

WebAudio: oscillator in JS

How about generating some noise in JavaScript? Demo is here: oscillator. How does this work? Using HTML Web Audio you can synthesize audio with a given frequency. E.g. 440Hz is A (“la” in solfège) This means you don’t need an <audio> element or any mp3, ogg, wav, etc, no external files. Let’s see how. Capable […]

October 27th, 2012
Tags: JavaScript, Music, WebAudio

In Public

Update: + WebPerfSummit Update 2: + SydJS, + Anaconda Limo@Molly Malone’s, + qCon confirmed, + fix *some* Portuguese spelling After a year or two with almost no public appearance (with an exception or a few) I’ve lined up a bunch of talks till the end of the year. I hope I’ll see you soon! http://www.meetup.com/SF-Web-Performance-Group/events/72890422/ […]

July 26th, 2012
Tags: speaking