Two weeks ago I took a course called Code with Me, designed to help journalists break through their instinctive fear of computer code. While I know enough HTML to blog, my eyes glaze over whenever I look at the source code behind a webpage and see gobbledygook like this:
<head>
<link rel=”stylesheet” href=”./css/bootstrap.min.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″>
<style>
.main-headline {
margin-bottom: 30px;
text-align:center;
}
.tab-label {
display: block;
width: 100px;
}
</style><!– Include a Google-hosted version of the jQuery file on the next line –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script>
<script>$(document).ready(function() {
$(“toggle-button”).click(function(){
$(“img”).fadeOut();
}); });</script>
</head>
During the two-day course, held in a conference room at the headquarters for National Public Radio, the leaders — Sisi Wei, a graphics editor at the Washington Post, and Tom Giratikanon, a graphics editor at the New York Times — walked me and several dozen other journalists through the markup languages of HTML and CSS and the coding languages of JavaScript and jQuery. It is a credit to their organization, patience and gentle humor that I spent relatively little time with my fists clenched or wanting to tear out my hair.
To learn computer code, I worked with a mentor to create an interactive map of the U.S.'s renewable-energy resources. Click here to see the page.
Our big in-class assignment was to apply our new geek skills toward a project relevant to our beats. Recently, I’ve been intrigued by a new set of maps created by the National Renewable Energy Laboratory that show the best renewable-energy resources in the country — basically, where the sun shines brightest, the wind blows strongest, the underground rocks are hottest, and where the most greenery grows.
For my project I took these maps and created a page where a user can toggle between one map and another. I am ridiculously pleased with the result, which you can see here. Also, I posted an interpretation the maps in a post on Forbes this morning.
What one learns, after squinting long enough at code like the section above, is that it is a language just like English. It follows rules as ironclad as those of grammar and punctuation. Just as every sentence must start with a capital letter and end with a period, every command in code (like <head>) must reach a conclusion (</head>).
Also like English, one well-chosen word or phrase can do the work of many. Take the sentence, “John’s interest flagged.” The word “flag” means “to become tired, weaker or less enthusiastic.” It is more elegant and economical to write “John’s interest flagged” than to write “John became more tired, weak and less enthusiastic.” In the code above, the phrase “./css/bootstrap.min.css” is a line of code borrowed from the amazing Twitter Bootstrap that performs complicated functions in one brief statement. (In this case, the amazing function it performed was establishing the toggling template for my web page.)
With shortcuts like these, David’s interest did not flag.
Special thanks to Danny DeBelius, a user-experience designer for NPR who served as my mentor during the course, and without whose help I would have been lost.
Thanks for the mention, David! Glad to hear it was a fruitful experience for you!
My pleasure, Danny. Your teaching was patient and helpful.