Let’s go time traveling

Things should have been different before, but maybe they can still be fixed now? If you have files from the past which need to be converted or altered in ways that would require writing a new inode to your local storage disk, ordinarily you’d lose the original timestamps, and the new versions would instead end up with the timestamp corresponding with the point when you ran the conversion. It doesn’t have to be this way. Here’s a Bash function which copies timestamps between files.

Pingkiller

A new Chrome extension which stops the HTML “ping” attribute from tracking your browsing activity.

Processing Fellowship recap

As my fellowship with the Processing Foundation wound down, I wrote a bit about the process of deriving the guiding principles of p5.js far enough to write useful documentation for it — a dissection manual, if you will.
more

ACLU

I’ve been doing some work for the ACLU lately, and Fast Company profiled the team in an article that I still cannot believe is titled The ACLU is building a tech dream team. Your move, Trump.

Processing Foundation Fellowship

The Processing Foundation runs a fellowship for people interested in interactive art, and I am part of the 2018 class. I’ll be working on the documentation for p5.js, helping to clean up the developer-facing architecture and design logic so it’s easier to contribute.

Better Literate Programming

First, several big updates recently to the original version of lit, my agnostic tool for literate programming.
  1. It can now preserve correct line numbers for debugging, which is the killer feature I’ve been trying to figure out; this is the only reason I haven’t written all my source code in this format for the past couple years.
  2. You can pipe the processed content over stdin/stdout instead of just writing files to disk, which should enable any shenanigans you want to wire up that I have not anticipated.
  3. Best of all, thanks to some logging tricks it also lets you actually execute Markdown documents. Usage would be something like this:
    
    # use Python to execute the fenced code blocks inside script.py.md
    $ python $(./lit.sh --input "script.py.md" --before "#")
    

In addition, I’ve reimplemented the same core logic as a Rollup plugin. This is optimized for JavaScript, supports sourcemaps for debugging, and can be delivered via npm with semantic versioning for dependency management.

Object Iteration

New on GitHub and npm: I rebuilt the ES5 array methods from JavaScript and made them work with objects/hashmaps.

Augmentad Reality

A new project with Rich Harris and Aliza Aufrichtig: Augmentad Reality is a custom hardware heads-up display which overlays ads on whatever you were looking at anyway. This is a real device which actually works, built and coded within about six hours at the Stupid Shit No One Needs & Terrible Ideas Hackathon and subsequently covered by Gizmodo. Welcome to the future!

How To Block Genius.com Annotations

Update, 2016.05.25: I’d recommend using Genius Blender, a simple JavaScript one-liner, over the methods described below. You can read more about the security issues surrounding Genius in my new article for the Verge.

Over the weekend I wrote a tool to break the annotation functionality of genius.com.

Slow down. You wrote a what to do what to who now?

Genius, formerly known as Rap Genius, is a web site that allows users to annotate blocks of text that appear on other sites. It’s very cool technology; you can just visit any page on the internet using a Genius redirect link, and it will show up with all sorts of additional information which has already been appended by other people. I wrote some code which lets site owners break the Genius annotations for their site, as well as a WordPress plugin which makes that code much easier to use.

If it’s cool, why do you want to break it?

There are two sides to that coin. The existence of the technology they’ve developed should be concerning to anybody who wants to put something on the internet. Not everything needs or deserves freeform annotation by users, and some things – some people – may be actively or disproportionately harmed by it. Genius has made special arrangements with some sites, such as the New York Times (which is also my employer), but hasn’t provided a way for smaller users to either opt in or opt out. This means they’re effectively forcing it on everyone.

I’m also firmly of the opinion that we’ll all be better off if functionality like this is handled by a standards body like the W3C, or a non-profit like the WikiMedia Foundation, or at least an open-source software project. Annotations are a pretty fundamental expression of the nonlinear ways we talk, write, and think, so I’m nervous about the possibility that the content and mechanisms could end up owned by a single for-profit tech startup.

Why did you do this now?

A few days ago Ella Dawson wrote a very upsetting blog post about how Genius was functionally equivalent to forcing crude, violent, or hateful user comments onto a web site she created as a safe space to write about the sensitive work she does. When she reached out to Genius for help, the solution they suggested was “don’t look at the annotations.” This bothered me, so I stayed up all night tinkering and figured out how to make a defensive tool.

more →

d3-xray

I made a new gizmo! d3-xray is a bookmarklet which lets you debug data binding in D3.js by mousing over the graphical elements instead of editing the project code.

Literate Programming

Lately I’ve been doing a lot of coding in CoffeeScript, which is a very elegant language, but my favorite feature is actually just a workflow. Instead of first coding and then later annotating the code, with “literate mode” you first write out descriptions of your logical structures, and then inside that framework you start to embed the executable code. It’s a very interesting way of working, so a few days ago I put together a small shell script which allows me to apply a “literate” workflow to any other kind of code.

memento.js

I mostly threw together that last post so I could clear my plate for some new action happening over on GitHub: memento.js, which binds data sets along a timeline for dynamic recall during media playback.

My excitement about this code cannot be overstated.

D3 Text Wrapping

It’s been more than a year since I posted it on GitHub<, so I suppose I should finally acknowledge the existence of my text wrapping plugin for D3.js. It has already been discovered by some folks (including Mike Bostock, who enthusiastically described it as “generalized somewhat.”) Gregor Aisch’s d3-jetpack also contains a simpler implementation of this feature based on counting characters instead of measuring the width of the rendered text.

BrooklynJS and Multiverse JSON

Belatedly, I gave a short talk last week at BrooklynJS, New York’s nerdiest JavaScript event. I unveiled Multiverse JSON, a lightweight new specification for configurable editorial projects which are stored as structured data and compiled with Python before reading or publishing. More importantly, I gave the entire presentation using a sock puppet.

Writers of Color

Durga Chew-Bose, Jazmine Hughes, Buster Bylander and I were all tired of hearing that it’s too difficult to find non-white writers, so we decided to do soemthing about it. At the heart of our Writers of Color project is a directory of professional listings for writers which is queryable by location and topical specialties (and, for those who want to poach from competitors, searchable by publication name). We’ll also be retweeting opportunities posted to our audience at @writersofcolor, as well as compiling a public Twitter list for the editors to follow and explore. I’ve uploaded the WordPress plugin that makes all the magic happen to GitHub, in case you’d like to try something similar for a different group or industry. We unveiled all this by taking over the Today in Tabs newsletter, where I served as Bijan Stephen’s guest intern.

Seriously, I’ve had enough of this shit!

Cartoon Cereal Ads

Here is a new installment of Facepalm Pilot, my McSweeney’s column about technology and stupidity, with an interactive data visualization which attempts to analyze the nutritional characteristics of the various cartoon characters used to advertise sugary breakfast cereals to kids.

When frazzled parents finally concede defeat on the daily battlefield that is breakfast, their kids are often delighted, since they are unable to steel themselves against expert marketing campaigns for which they are the coveted target demographic. Television aimed at children is funded primarily with ads in which brightly colored cardboard boxes are hawked by brightly colored cartoon characters during commercial breaks between shows featuring slightly different brightly colored cartoon characters. But there may still be a partial compromise on the horizon: by assessing the nutritional profiles of the mascots being used to sell the cereals, perhaps we can begin to understand underlying patterns by which we can help keep children healthy while also indulging their mascot preferences.

more

CSS Zen Garden API

Just dug up a terrifically stupid project I did a while back – a submission to the CSS Zen Garden design gallery which formats the usual page content to look like a fake REST API response in JSON format. It’s totally useless, but all the same, live demo + GitHub.

Counting White Dudes

I’ll mostly be working on secret internal tools in my new role at the New York Times, but I also recently built a neat public-facing data visualization for Scratch Magazine, a digital magazine about the financial and logistical realities of working as a professional writer. I created an interactive graphic which reflects the demographics of the leadership in journalism. They are almost entirely white and male. Surprise?

This data visualization actually fails in an interesting way. The color scheme was conceived such that one parameter (hue) would map to gender (pink vs blue) and another parameter (brightness) would map to race (light for white people and darker for people of color). This doesn’t actually work, though, because in the entire corpus of publications and editors surveyed there isn’t a single female editor of color. As a result, one entire quadrant is empty and there’s no need for dark pink. It therefore might have made more sense to give the box mapped to the lone black male editor much flashier and more salient treatment, but there’s also something poignant about the industry’s intrinsic racial bias being strong enough to prevent us from using, you know, actual colors.

I’ve shared the source code for this data visualization on GitHub and have generalized it a bit so it can be easily reused to set up similar audits of other industries. Please get in touch if you’d like some help in doing so.

NYT

Extremely exciting news: I’ve started working at the New York Times as a data visualization engineer on the data science team.

New Yorker Projects

I’ve completely neglected to post my recent projects for The New Yorker:
  • “What You Look Like to a Social Network” – essentially dumping all the data fields shared about your user accounts by the major social network APIs into a single zoomable D3 chart for chilling comparison.
  • The November 7th Twitter IPO captured in an interactive infographic which lets you compare the revenues and valuations of major tech companies both against each other and against themselves over time. Written with D3, and with an unreasonable amount of attention paid to the “bounce” option among the easing function selectors.
  • Mapping the failed attempts to defund Obamacare so Ryan Lizza could proceed with a characteristically astute political analysis.
  • Restaurant review map, with a particularly lovely introduction by Amelia Lester.
  • An interactive jQuery timeline of women in the Senate to accompany the Kristen Gillibrand profile by Evan Osnos.
  • Introducing Premise, a new company that creates “offline” financial indices by having overseas workers manually enter vegetable prices into their smartphone app. Written entirely using old-fashioned journalism – no programming whatsoever!
  • Breaking Bad‘s various meth money plot points in a jQuery bar chart.
  • Corporate fines compared in a D3 bar chart.
  • Evolution of the Dow Jones, simple mouseover effects built with jQuery.
  • a number of short music items for the print issues which appeared in the anonymous critics’ notebook section under “Goings On About Town,” the event listings section.