#protip: Terminal to Finder and back again

Sometimes you browse your files in Finder and want to do some stuff on the command line with these same files. Opening Terminal and navigating to the same file location is lame. Finder-to-Terminal You can simply drag the icon of the file or folder in mind… …and drop it into a conveniently located nearby Terminal […]

January 1st, 2017
Tags: mac

create-react-app + sw-precache = PWA

(this industry and its lingo…) PWA – Progressive Web App, it’s… a long story, go read here React – library for building UIs. There’s a book on React by yours truly. create-react-app – a tool that generates skeleton React apps sw-precache – a tool that helps turn any web app into a PWA Before This […]

December 31st, 2016
Tags: JavaScript, react

File API Input Layer

Every once in a while I feel inspired to create a little tool to “do one thing” ™. But often I get distracted and a little too lazy to get off the ground and forget all about it. So I thought maybe a little helper can, well, help move things along. Enter FAIL, short for […]

December 31st, 2016
Tags: JavaScript, react, tools

How to tell a progressive JPEG

Using ImageMagick ($ brew install imagemagick) certainly helps. E.g. $ identify -verbose baseline.jpg | grep Interlace Interlace: None $ identify -verbose progressive.jpg | grep Interlace Interlace: JPEG As you can see baseline.jpg is baseline, i.e. not progressive, while progressive.jpg is indeed progressive. Newness Apparently in newer IM (v7.0.3.8+) you should be able to tell without […]

December 29th, 2016
Tags: images

List of all the countries: HTML select and JSON too

Ever needed a list of all the countries in the world to put as options in an HTML select? Well, here you go. And JSON too. You’re welcome! But how… How was the list derived so you can update it once in a while? Glad you asked. https://www.iso.org/obp/ui/#search/code/ is the page linked from W3 spec […]

November 6th, 2016
Tags: (x)HTML(5), JavaScript

Nightmare scenarios with WebMIDI

In the spirit of Halloween… allow me to entertain you with some security and privacy nightmares with the way WebMIDI is implemented in Chrome currently. The spec says: “The suggested security model explicitly allows user agents to require the user’s approval before giving access to MIDI devices, although it is not currently required to prompt […]

November 2nd, 2016
Tags: security, WebAudio

Performance Calendar call for participation

TL;DR: Please start writing and finish before Dec 1st. Amazingly http://calendar.perfplanet.com has been up for 7 years straight now, helping spread the word about web performance and helping the developers do their best to provide fast and pleasurable experiences. Every year people from all walks of development life come to the calendar where an article […]

November 1st, 2016
Tags: performance

Hello WebMIDI

Inspired by this talk by Jean-Philippe Côté I saw at Web Unleashed in Toronto last month, I thought I should dust off the old midi cable. MIDI? MIDI is a protocol that various music and lighting devices use to talk to each other. Believe it or not v1.0 of the spec from 1983 is still […]

October 30th, 2016
Tags: (x)HTML(5), JavaScript, Music, WebAudio

Oversharing with the browser’s autofill

Auto-filling forms is cool. Unless, of course, you give away more data than you thought you were. The basics It’s pretty simple, actually. You just add an autocomplete attribute to your <input> and give it one of the predefined values. And off you go. For example: <input type=”text” autocomplete=”given-name”> When the browser sees this, it […]

October 12th, 2016
Tags: (x)HTML(5), security

React: Up and Running

I’m a little late (like, omgbbq, 2 months late) with this announcement, but here goes: I published my new book, called “React: Up and Running”. Go get it everywhere where books are sold and learn React from the ground up! I’ve been working with React for a while now and thought I have something to […]

September 12th, 2016
Tags: book, JavaScript, writing

Custom animated cursor via canvas

Warning: don’t do this. Stop it! Just. Don’t. So there’s this hack by Ben Foxall that shows how you can escape the browser window and draw outside the page. I had to try it myself. So here comes: the animated “progress” indicator mouse cursor. Wait what? There exists the ability for your web page to […]

August 9th, 2016
Tags: canvas, JavaScript

PM outta control

Another one of those… This time it’s set to the music of “Gremmie outta control” by The silly surfers, covered by Pearl Jam And this time I’ve added some chords for your entertainment… C….. C Every team has a clown who thinks he knows it all (personal commitment to excellence that good enough is not […]

March 5th, 2016
Tags: Music

How to write unmaintainable PHP code [2009]

Originally published at http://phpadvent.org/ in 2009. The site is no more, but I found a copy on my hard drive. I’m not sure but I do hope it’s the final version because Sean Coates (@coates) and Chris Shiflett (@shiflett) did a really nice job editing the pice. Also hope it’s still funny… With the unemployment […]

September 18th, 2015
Tags: php, Uncategorized

From JSXTransformer to Babel

As announced, starting with React v0.14 (next release), the JSXTransformer.js won’t be part of the release. Also `react-tools` npm package is no more. So whatchagonnawannado is switch to Babel. Here’s how. Build-time transform Prerequisite: install Babel $ npm install –global babel Where you previously had this as part of your development/build process: $ jsx –watch […]

June 22nd, 2015
Tags: react

smush.it is dead, long live smushing

Looks like Yahoo! stopped maintaining the image optimization service called smush.it. So people have been asking questions on the mailing list. I don’t have any inside information from Yahoo about the service, or whether it will be back up again. But let me try to answer some of the questions. History: quick refresher Nicole and […]

April 6th, 2015
Tags: smush.it, Uncategorized

f8 2015

So I spoke at Facebook’s F8 in San Francisco last week. Actually my teammate Varun spoke mostly, I just interrupted a few times. Among other things we announced a new plugin – the embedded video player, so now you can embed any public FB video on your site. And, how meta!, below is a video […]

March 31st, 2015
Tags: facebook, speaking

Making an album sampler video on the command line

Here’s a video I made to raise awareness about Anaconda Limousine’s first album (where I play guitar and co-wrote 1 song): https://www.youtube.com/watch?v=0LavyKbSuvI. This is a post that explains how it was made so if anyone wants to made a similar one, they can have something to step on. Turns out videos like this are called […]

March 31st, 2015
Tags: ffmpeg, Music, tools

ffmpeg: batch convert

Say, a bunch of .wav files to .mp3 $ for f in *.wav; do ffmpeg -i $f “${f%.*}.mp3”; done

March 3rd, 2015
Tags: ffmpeg, Music

Downloading top X sites’ data with ZombieJS

Update: Easier way to get top X URLs: http://httparchive.org/urls.php, thanks @souders Update: found and commented an offensive try{}catch(e){throw e;} in zombie.js (q.js, line 126), now the script doesn’t fatal that often Say you want to experiment or do some research with what’s out there on the web. You need data, real data from the web’s […]

June 6th, 2014
Tags: CSS, HTTP, tools

Jest + jQuery for testing a vanilla “app”

Jest is a new javascript testing tool announced today. I thought I’d take it out for a spin testing the UI of a simple vanilla JS app – no CommonJS modules, no fancy stuff. Just old school JavaScript. Granted, it’s probably not what the tool was optimized to do, but it totally worked. The app […]

May 15th, 2014
Tags: JavaScript, tools

CSS diffs #2

Continuing from last night… First, two twitter responses pointed to even more readily-available options for comparing screenshots. One is Wraith from BBC engineers which supports Firefox/Gecko (via SlimerJS) in addition to PhantomJS. The other is the almost-ready siteeffect.io which is based on http://dalekjs.com/ which seems to support all the browsers! Anyway, I thought I should […]

May 9th, 2014
Tags: CSS

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