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. Welcome to the future!

Gizmodo

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.

Dosi.io

I spent the past few days at the weekend-long competitive coding marathon that kicked off the 2013 edition of TechCrunch‘s annual Disrupt NY conference. Thanks to the mighty Niles Brooks and Kenneth Chen, we now have Dosi.io, an extension for Google Chrome which automatically adds additional tech industry intel to the professional networking profiles on LinkedIn — repositories on GitHub, history on AngelList, etc.

I think it’s pretty cool! But it’s not just me: TechCrunch wrote it up, and CrunchBase awarded it their big prize — they’ll be flying us out to Berlin in October to compete in the Disrupt Berlin hackathon. I can’t wait!

Maura Magazine

Goodness, I can’t believe I’ve neglected to mention this for so long. We’re already four issues in, but I’m the main geek behind the web presence for Maura Magazine, a new digital weekly for iOS devices helmed by the amazing writer and editor Maura Johnston. She fielded my pitches at the Village Voice for a while, and you may have also read her work at a number of other wonderful publications.

This is her new experiment in small-scale direct journalism. Using an infrastructure provided by my fellow geeks at 29th Street Publishing, she publishes a handful of long-form stories each week which are pushed to a custom app loaded on the iPads and iPhones of her eager subscribers, each of whom pays a buck or less per issue, with payments automated via iTunes. Writers get paid, readers don’t have to deal with ads, everybody wins.

There’s been more coverage of this than I’d care to outdo here, so let me just refer you to some of the other guys:

As for the site, a lot of the heavy lifting is being effortlessly handled by WordPress, but I’m still really excited about a lot of the things happening in the custom functions I wrote — these are among the coolest WordPress ideas I’ve ever come up with. I don’t want to go into too much detail since we’re not openly sharing the plugins yet, but in a nutshell, the paywalls are dynamic, and you will start to see them move and react as we continue to charge along here. For example, this past weekend one of the articles was temporarily unlocked to match the HBO schedule.

And, as with my last attempt to merge tech with editorial, a hearty shout out to my good friend Buster Bylander, who jumped in with his amazing visual design sense once I was done fiddling around with the code for generating the content loops. We are both very proud of this. Please subscribe!

Have you seen my blog posts about CMJ? Y/N

New York’s annual CMJ music festival is happening again this week. I’ve written about it before via short reviews of the litany of concerts held across the city, but this time I wanted to focus on the awesome daytime programming hosted at NYU before the shows commence each evening. So, for the Village Voice, a series of mock flow charts which help* you pick the right discussion panels to attend (* = they do not actually help).

Update: these broke with the latest site relaunch :(

Tuesday, October 16
Wednesday, October 17
Thursday, October 18
Friday, October 19

A few interesting footnotes here:

First, we considered putting the charts together as giant image files, which is how this sort of thing is usually done, but eventually I successfully pitched the idea of building the charts right on the web page. This makes for a much more pleasant user experience, since traversing the decision tree is just like scrolling through an article without any cropping or resizing weirdness, and the content can be highlighted and copied just like any other text. It also reconfigures itself much more cooperatively for viewing on mobile devices than a static image file would.

In a way, it’s pretty simple — essentially, we just created a whole bunch of divs and applied tons of inline CSS to them, most notably setting the background images and the padding to create the illusion of interconnected lines and arrows flowing between them. This is generally frowned upon as a web design practice, but for a single-use scenario like this it actually works quite nicely, because I didn’t have to add any external stylesheet files to the CMS and it’ll remain remarkably stable as the Voice’s site evolves in the future.

But man, that’s a lot of inline CSS! For example, generating single box to put a question in requires all these rules (many of which are duplicated because they get split across a parent and child div):

width: 500px; min-height: 150px; padding-top: 70px; background:url(“6.png”) no-repeat center top; background-color: #F9FFB2; padding: 20px; border: 1px solid #333399; text-align:center; margin: 0 50px 0 50px; font-style: italic;

Worse yet, since it’s all stored in an inline attribute, this would need to be repeated in full every time you want to generate a box of that type. And if you later need to change something — say, the images aren’t lining up quite right, or you need more vertical space for text — you’d have to go back and manually fix every instance. So in order to make this easier, I wrote a little set of scripts in PHP which dynamically applied the CSS while looping through the content I wrote for the boxes. I’ve done a fair amount of both writing and coding over the past few years, but it was really neat to finally have a project in which both were so tightly woven together.

Second, please also note the awesome visual design work by my friend John Bylander, who first brought the rough demo charts I sent him to life with subtle color and typography tweaks, and then cobbled together image files late into the night.

And finally, a nod to my sources of inspiration for this: former Village Voice music editor Rob Harvilla, who back in 2007 wrote about the rapper Mims using diagrams to thunderous acclaim, and then in 2010 covered the CMJ panels with a series of snarky comments not unlike my own Q&A content here. And then there’s also the extensive timeline of future events from sci-fi movies as compiled by the Awl, where a close examination of the markup helped me figure out how best to approach the CSS here.

See you next year, I hope.