Performance calendar ’17 call to all

Helloooo! It’s time to sit down and write an article for the performance calendar. You have until Nov 30 to send me your piece. Details. What do you want to write about? Some ideas: Hello, 2007 called! Do I still shard domains to load resources from? Do I still package all JS in one big […]

November 11th, 2017
Tags: performance

Browser remembers your password, but you don’t? Take it back!

We’ve all seen something like this: But you have no idea what the password is. How to get the human-readable version of *******? Method 1: use the browser’s developer tools Provided you have a reasonably recent browser, just open the Developer tools by right-clicking the input field with the password and then select “Inspect Element”. […]

November 5th, 2017
Tags: bookmarklets, qa

hg revert a single file from the repo

hg revert -r .^ filename

October 9th, 2017
Tags: qa

Stylelint + TextMate integration

Naturally, you want your lint tools integrated with your text editor. Here’s what I did to integrate Stylelint (hello!) with TextMate. New Bundle In TextMate… menu Bundles / Edit Bundles…. I didn’t see a way to add a new Command, so I right-clicked an existing one (one with a C icon for Command), selected Find […]

October 1st, 2017
Tags: CSS, tools

Hello Stylelint

Stylelint is a great new modern unopinionated CSS linter. It’s a must for any project beyond test.html. After my last post about always adding generic font families I thought it should be a lint-able thing. So I looked into extending Stylelint. You can write new lint rules and tell Stylelint to use them. In my […]

October 1st, 2017
Tags: CSS

PSA: always add a generic font-family backup

TL;DR: /* WRONG */ .huh { font-family: Helvetica Neue, Helvetica, Arial; } /* OK */ .huh { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } Exhibit 1: Bing search Yeah, I use Bing search, shut up! Check this out, the ugly Times New Roman font to the right where it says Rewards: Definitely not what the […]

September 27th, 2017
Tags: font-face

Font Fiddling

I’ve been trying to stay away from webfonts as much as I can. IMO they are not worth the performance complications. Font loaders, FOUT, yadda-yadda. But… it happens. Story time While showing off another one of my music theory exercises to my prof, he mentioned it would be nice to be able to tell v […]

September 27th, 2017
Tags: font-face, performance

Quick stats on html/js/css sizes

I’m sure better tools exist, but hey, quick and dirty is faster: running a quick console thing to tell me what makes the HTML payload bigger

June 27th, 2017
Tags: performance

Intercepting new Image().src requests

Maybe you’re an attacker who sneaked in a little JavaScript to an unsuspecting site and would like to, well, sneak. Or maybe you want to know what exactly all these third-party analytics scripts are “calling home”. Or maybe just for fun – wouldn’t it be cool to intercept and log all requests made with new […]

April 14th, 2017
Tags: JavaScript

WebMIDI test page

Yesterday I had to plug in my keyboard to the computer and wasn’t sure if it was working. How do I test? Well, I had to look up an older post, copy and paste some code to the console… what a drag. I though it would be cool to have a page where you can […]

March 3rd, 2017
Tags: JavaScript, Music, tools, WebAudio

Batch convert image formats with imagemagick

mogrify (like convert) is one of the utilities that come with imagemagick. Here’s an example of how you convert a batch of pic files to jpeg. Same for png to jpeg, vice-versa, etc. $ mogrify -format jpg *.pic Boom! Next! Also see: batch convert audio/video files with ffmpeg

February 18th, 2017
Tags: images, tools

Intervals

Here’s my new tool called intervals Play with it here. Learn about the theory behind it here. The code for the tool. What does it do? Generates a random music interval, shows it on the musical staff. You try to guess it. Clicking on the staff reveals the answer. You can also play the interval. […]

February 6th, 2017
Tags: JavaScript, Music, react, tools

Photocreep

There’s a new tool in town. It lets you drag photos and gives you a map of where the photo was taken. Creepy, isn’t it? It figures this out using the meta (exif) information that’s part of a photo. The tool also lets you download a version of the photo without any exif information. The […]

January 22nd, 2017
Tags: images, JavaScript, react, tools

The last line-height you’ll ever need

One of the trouble areas with CSS (other than it’s too hard to master) is that it’s too easy to write a lot of it. (I’ll just leave it here. Lately we’ve seen far too much anti-CSS talk, I’m sure most of it is not wrong, but maybe not too productive either.) Therefore anything you […]

January 8th, 2017
Tags: CSS

HTTPS migration: a WordPress blog hosted on Dreamhost

I use Dreamhost. Have been since 2008. If you’re not using Dreamhost… well, go sign up and here’s $50 off of the $97 yearly plan. Now some folks reminded me recently that the Perf calendar was not yet migrated to HTTPS… True enough. I have to do it. Eventually. In any normal situation I’ll procrastinate […]

January 8th, 2017
Tags: hosting, WordPress

When did blog comments die?

I disabled comments on this blog and a few other some time ago because I couldn’t keep up deleting spam and it was getting embarrassing. I decided to clean the old ones up, add more protection (captcha? 1 + 5 = ?) and enable again. Needless to say, I failed because of procrastinating at step […]

January 6th, 2017
Tags: misc hackery

#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