Recent Posts

CSS*WORDS and WATWATWAT

Lately, I've been sliding back into the habit of working late at night (or, at least, certainly intending to.) However, a break between leaving work and the late night makes it somwhat difficult to get back into the swing of things.

I find it often helps to build a simple, useless, weird project before getting started to help get my mind in the right place. Some of my most recent projects are:

watwatwat

It's a weird bag of clever and overengineered CSS that gives you something that vaguely resembles what you might remember working on an old, gaussed CRT looked like. You can type wat over and over. It also served to teach me about some of the weirder corners of the latest CSS specs, like webkit-mask-image - I'm particularly proud of how I got the corners, and only the corners, to blur on the "screen". (And using a radial gradient at that.)

I also used that as inspiration for my latest blog design. Not sure if it'll stick or not, but here's trying. The color scheme is based on Andrea Leopardi's Gotham and I implemented it while listening to a lot of Com Truise.

CSS*WORDS

I took a listing from /usr/share/dict/words, then grepped it to find what words had [0-9a-f] along with some letters I could translate (l = 1, z = 2, etc.) I then took that and built a big page of all the colors. It made me realize how long it's been since I actually did manual DOM manipulation without fifteen layers of libraries abstracting things away. I'm, manually creatig document fragments and stuff. it's crazy. At one point I even wrote my own new XMLHttpRequest() before I moved the colors array into the same file for performance.

Anyway, I hope someone gets a chuckle, or at least exhales sharply out of their nostrils. It was fun. Now, back to work.

Performance Tooling

I gave this presentation at Akamai's Edge conference and NewRelic's FutureStack (with slight differences); it's about what tools I use to measure the impact of web performance work I do.

The slides are built in Reveal.js, and are available at /performance-tooling (github)

Javascript Testing

I shared a presentation at our engineering meeting this past Friday (at Airbnb) whereupon I discussed how to write clean, fast javascript tests. One can almost always write good tests and achieve high test coverage by simply using unit tests and stubbing out DOM APIs. That isn't to say that browser-based tests aren't useful; it's to say that you can get a great testing ecosystem running without complicated setup. Mocha will also, neatly, allow you to go ahead and run all of these specs within browsers anyway, so if you do find it advantageous, you have that option open to you.

I also threw in a couple slides about how you can use Browserify (or really, any kind of CommonJS-style module system, like require.js) to write all of your code as modules to make both testing and browser asset compilation awesome.

Hopefully the slides are clear without too much explanation or notes, but if they're obtuse, feel free to contact me and I'll add appropriate notes. The slides are built in Reveal.js, and are available at /javascript-testing. (github)

Sharing Presentations

I've been using the supremely excellent reveal.js library for all of my presentations in the last year. It's super easy to use, it's very lightweight, and I can build a sharp presentation without having to download or install some 400mb software package on my computer and the computer I'm using to present, if, God forbid, it's not the same as I used to write it.

Also, by virtue of being html, I can write my own theme files in CSS and plugins in Javascript. Some plugins supported include secondary-monitor speaker notes, remote control over mobile phone, markdown, and code syntax highlighting. It can also print all the slides to PDF in individual pages. And, perhaps best of all, you can use gifs as massive background images.

Oh, and if this wasn't already magical enough, I can store all of my presentations on GitHub. That allows for sharing, pull requests, and quick updates through either Vim or the web ui.

That's when it struck me today - not only can I put my slides on GitHub for keeping track of edits and all that Git goodness, but I can create a gh-pages branch, and it will automatically host my slides under my domain name.

But wait, there's more. You don't even have to hop into the terminal to do it. In GitHub, click on the 'branches' button, as shown below; type in gh-pages, and a minute later you're up and running.

Clicking the branch button in a GitHub repository

Check out these examples:

<< View Older Posts