Greetings from the rabbit hole of code, where I’ve been falling Alice-style for a little over two months now, with the wind—and the ominous notes from the opening credits of Hitchcock’s Vertigo—in my ears. Should the two references hold, I’m bound to end up eventually in Wonderland…flat on my face.

+

The narrative mash-up also happens to capture my general sentiments towards this self-inflicted mission to learn how to code: a mixture of curiosity with just a dab of dread. Curiosity in the face of the “black box” of technology, dread inspired by the heights of the mental block to be scaled between me and any configuration of alphanumeric and non-alphanumeric symbols whose potent arrangements—always accompanied in my head by vectors, sinuous parabolas and grids for good measure—are only immediately apprehensible to me as total mysticism.

Most days, it still feels like I’d have better luck throwing monkeys into a room full of typewriters than figuring out the correct piece of code myself—but it’s a long way to infinite, so stepping in to help me narrowly escape a quickly escalating mo’ monkeys mo’ problems scenario is the Digital Sciences Internship at Columbia (with a particularly big shoutout to mentor and Patience incarnate, Jeffrey Lancaster)

Then:

Now:

Still not ideal use of Digital Science Center:

 

The importance of even just the time that the internship has allowed me to take to commune with these baffling inscriptions on the screen cannot be stressed enough (especially when you factor in the first hour or so of just gawking at the sublime, willing myself not to retreat…). I can’t quite articulate this fully yet, but learning how to code is really nothing like learning a new language. Sure, much of this assertion is injured ego: there are precious few things I have to brag about, but among those select few is that I’m a natural polyglot—this definitely no longer the case if coding really primarily operates as a “language”. Techniques for translation simply don’t experientially hold in figuring out how to code, and the kind of pattern finding that I would use to construct something that makes sense in a language don’t translate into the pattern finding it takes to write a code that makes sense—and in large part, this is because the aims of making sense are very different in each case: the difference between conveying an expression vs. executing an action.

[In an upcoming post, I’ll parse through the matter further, but for now, I’ll just say that the question of coding and language isn’t just important pedagogically. It could be a huge hindrance to not just what code can do but how other disciplines can relate to it if we continue thinking of it simply as a language. Furthermore, something about that characterization doesn’t do justice to how code operates as material production, an infrastructure operating through particular economics, global markets, and power distributions—not just linguistic superstructure. Anyway…]

Aside from much appreciated allocating of time, the internship has also helped to structure my explorations. My first task was to understand bookmarklets…and to figure out how to make one.

What are Bookmarklets?

A bookmarklet is basically a mini-program/software application that you can store in your web browser. Usually, you save it much like a bookmarked page, meaning it doesn’t require installation—oftentimes, it just requires dragging and dropping a button into your browser bookmark bar. Activated by a simple click, the bookmarklet will then do something to the loaded web page you’re on in some way: anything from replacing all the photos that are there with a photo of Ryan Gosling (http://heygirl.io/) or making the different sections on a page start shaking to the tune of “Turn Down for What” (exploding apart right as the bass drop—http://nthitz.github.io/turndownforwhatjs/), to translating all the text into another language or saving the page content to be read later from your phone or other mobile device, even without an internet connection (Pocket—https://getpocket.com/).

First, Activate “Hey Girl”:

 

Then, run “Turn Down For What”:

 

Why are Bookmarklets a great way to start?

Bookmarklets are an excellent way to launch into explorations in programming. First—and as silly as it might sound given how quotidian our access to things like “real-time data” have become and most of our experiences updating anything on Facebook with (sometimes regrettably) zero time lag—you really get a sense for how live the entire internet is, by which I specifically mean provisional, malleable. We see things online changing, but how often do we think of it as actually being really changeable? In the end, we tend to treat a website—particularly an already interactive one—as an amusement park, already complete and rife with options, but it’s probably more apt to think of them as a construction site, rife with possibilities.

As complicated as Bookmarklets can get, all it really takes is a few lines of code (in JavaScript—another reason why bookmarklets are a great start: JS is used by the vast majority of HTML pages and is a dynamic programming language specifically meant to alter document content) to hack something into a page. Because I’ve been seeking to target particular elements for altering, learning how to make a bookmarklet has meant quickly jumping in and–like the spy team huddled around the blue print of the compound on the table next to a stack of blown up surveillance camera photos of the suspected characters–learning what to look for and where generally to find it. Finally, I’ve become (pass)able at recognizing amidst the sea of symbols and semicolons the Waldos that are placeholders for images, or a conditional statement that if true, results in a course of action—and that is maybe one that I want to change. At this point, I might not know everything about these shady figures, but like any decent second-tier sleuth, I’ve now got a pretty good idea of what they’re up to.

DOM & RegExp

There are two key things I’ve learned technically while exploring bookmarklets:

The first is DOM, which stands for Document Object Model. According to the chapter on DOMs in Eloquent JavaScript (a seriously excellent resource to get started with JS–especially the exercises at the end of every section), when you open a webpage in your browser, your browser takes the page’s HTML text and out of this, builds a model of the document’s structure, which the browser then uses to draw the page on the screen: “This model, in JavaScript, can be read and changed. It acts as a live data structure: when it’s modified, the page of the screen is updated to reflect the changes.” This is the blueprint to be marked up with circles and arrows and pins. This is the behind the scenes. To sneak there and experience a true secret garden moment, go to any page, right click, go to inspect elements, and behold. As you pass the arrow over different parts of the main page, the corresponding section should even become highlighted in the DOM window.

The second is Regular Expressions. A regular expression is “a way to describe patterns in string data”– the portrait on the Wanted sign. Case in point:

One can then write a function that tests for matches with this regular expression in a document, and even replace all the matches with something else–another text, same text slightly altered. Fun example of this is Downworthy, a bookmarklet that replaces instances of Upworthy and BuzzFeed hyperbolicism with hilariously mellowed out expressions. And of course, more fundamentally, regular expressions are key to making possible every search we’ve ever entered. Regular expressions are the specific shape of the Roger Rabbit style holes in the wall we leave as we carve our own paths from one building to the next.

(All these rabbits and the trails they leave….)

 

Image sources:

1. Alice: http://www.organikseo.com/blog/wp-content/uploads/2014/09/Alice-in-Wonderland1.jpg (http://www.organikseo.com/blog/social-media-ultimate-time-suck/)

2. Vertigo: http://tivipictures.mobi/wp-content/uploads/2015/01/vertigo-2.jpg (http://tivipictures.mobi/vertigo/)

3. gif from The Hangover: http://cdn3.gurl.com/wp-content/uploads/2013/09/hangover-math.gif (http://www.gurl.com/2013/09/29/ways-to-tell-good-at-math-mathlete/)

4. Monkey and Typewriter: http://www.demandstudiossucks.com/wp-content/uploads/2011/07/monkey-typewriter-1.jpg (http://www.demandstudiossucks.com/2011/07/why-are-we-the-ones-making-16-an-article/monkey-typewriter-1/)

5. Monkey and Laptop: http://media.npr.org/assets/img/2013/12/10/istock-18586699-monkey-computer_brick-16e5064d3378a14e0e4c2da08857efe03c04695e.jpg (http://alohonyai.blogspot.com/2014/06/infinite-monkeys-and-alphabet.html)

6. Monkeys in the Library: https://ip.bitcointalk.org/?u=http%3A%2F%2Fwww.allhailtheblackmarket.com%2FogImg%2Fmonkeys_library_chimpanzees_computers_funny_humor_cool_haha_lol_rofl_smiles.jpg&t=548&c=VBGwZM335RIbXQ (https://bitcointalk.org/index.php?topic=683776.1220)

7. Hey Girl screenshot: by Amy Zhang

8. Turn Down for What screenshot: by Amy Zhang

9. DOM Window: https://developer.chrome.com/devtools/docs/tips-and-tricks/image_10.png (https://developer.chrome.com/devtools/docs/tips-and-tricks)

10. RegExp comic, XKCD: http://imgs.xkcd.com/comics/regular_expressions.png (http://xkcd.com/208/)