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)
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.
DOM & RegExp
There are two key things I’ve learned technically while exploring bookmarklets:
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….)
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/)