The First Amendment is under attack. Fight back with us. Visit fight.spj.org to find out how.

Member Login | Join SPJ | Benefits | Rates

> Latest News, Blogs and Events (tap to expand)


Advertisement
— ADVERTISEMENT —
Advertise with SPJ
2

SPJ Leads


News and More
Click to Expand Instantly

SPJ News
SPJ Blogs
Quill Online
Journalist's Toolbox

— ADVERTISEMENT —


Stay in Touch
Twitter Storify Facebook Google Plus
RSS Pinterest Pinterest Flickr



Current Issue
Browse Archive
About Quill
Advertising Info
Back Issue Request
Reprint Permission Form
Pulliam/Kilgore Internship Info

Search Quill


Publications
SPJ Blogs
Quill
SPJ Leads
The EIJ News
Press Notes
SPJ News
Open Doors
Geneva Conventions
Annual FOI Reports

Home > Publications > Quill > You (Yes, You) Are Smart Enough To Code



Current Issue | Browse Archive | About Quill | Advertising Info
Back Issues | Reprint Permission Form | Pulliam/Kilgore Internship Info

Search Quill


Wednesday, February 12, 2014
You (Yes, You) Are Smart Enough To Code

Web coding isn't just for nerds. Itís a skill anyone can learn -- and all journalists would do well to know basic skills.

By Andy Boyle

Want to learn some basic coding skills? Read on.

Hereís a phrase I hate more than anything: "Iím not smart enough to code."

I hear it countless times whenever I give talks, to journalists still in school or those who have years of experience. Itís just not true, and Iím going to prove it to you.

Before I actually make you type anything, letís do a quick thought experiment. If I write the word "meow," I want you to, in real life, raise your hand. And if I write the word "woof," I want you to clap your hands.

Keep score at home, or get a friend to double-check your work. Letís try this out:

woof

meow

cough cough cough

Now, did you first clap your hands? Then did you raise your hand? And did you just read "cough cough cough" and sit there, wondering why I wrote that? If you did, then congratulations! You understand basic logic and reasoning well enough to learn how to code.

If youíre still not convinced, hereís more proof: Do you know any language (English, Spanish, German, Klingon) well enough to communicate with others? (Hint: Youíre reading this right now, so yes.) Congratulations. You were able to learn the syntax of a language once, which means you can definitely learn it a second time, only this time itíll be geared more toward computers.

If thatís still not enough, think of it this way: No one was born knowing how to play the piano. No one instinctively knew how to paint a tree, either. And no one just figured out how to code by turning on a computer.

Mozart practiced the piano, had great teachers and failed a lot. Bob Ross practiced a lot, studied under a German painter and failed at making many trees, however "happy" they were. You will learn the same way, by practicing a lot, having someone (or something) provide guidance and failing many, many times.

Now that you know youíre smart enough to learn to code, let me point out a few reasons why you should.

Why You Should Learn to Code

If you donít see the obvious benefits to learning how to code, let me spell it out to you in one word: Employment.

If you know how to program and make a website, your chances for becoming employed -- or staying employed -- in or outside of journalism skyrocket. NewsNerdJobs.com has more than 100 listings, with about 25 in the past two years. Many are at larger news organizations, where getting in the traditional way -- working your way up from smaller to much larger news organizations -- has become quite difficult.

While that may not sound like a lot of jobs, news organizations will become more and more dependent on Web developers for their Web strategies in years to come. And if you have the right skills, even at a basic level, you will be needed.

Not only will you be employable, youíll probably be able to make more than the average journalist. A fellow Web developer I talked to a few years ago had this to say: "I make between $70,000 and $80,000 with two years' experience. Reporters with the same experience (at my office) make around $50,000 to $55,000."

And because money isnít everything, you also occasionally work on amazing projects. Most news organizations realize they need a great Web presentation for their heavy-hitting projects, which reporters, photographers and others spend months, sometimes years on. And you may get to work side-by-side with these folks, helping their work have an even greater impact and reach a potentially larger audience.

If that doesnít fill up your journalistic gas tank, learning to code will keep your brain forever updating. I got into journalism to learn something new every day. Chasing a story, youíd discover some new facts, or hear a police officer at a scene of a crime give some new detail, or find an amazing email from a city administrator that changes everything. Coding works the same way: Every day I learn a new way to code, a new tool to make my life easier, a smarter way to do in five lines what I had done in 30.

Your daily work should always be interesting, as youíre learning to solve new problems and learn new tools. The Internet is always changing, updating, becoming better. Youíll get to be a part of that, which can enrich your whole career.

So letís do some basic exercises to get you started.

Inspecting an element in Chrome

For this, you will need Googleís Chrome Web browser. If you want to use another browser, the process may differ.

What weíre going to do is alter the appearance of a website. This is going to show you that a website is kind of like a really, really fancy word processor. Your browser is basically downloading a version of the website, putting it together and displaying it based on how it thinks everything should go. And just like when you open a file with word processors like OpenOffice, Microsoft Word or Google Drive, you have the ability to edit it. Letís do that!

Go to nytimes.com. They just updated their website in early January. Isnít it pretty? Well, letís make it less pretty, just for a few minutes.

Right click on the masthead -- The New York Times -- at the top. Youíll be given some options; pick "Inspect Element."

A box should show up near the bottom of the Chrome browser.

On the left, youíll see a line highlighted in blue. It starts with

And as Keyser Soze would say, and like that, itís gone. If you want it back, just refresh the page. See that it changes back? Itís like you edited a Word document and then redownloaded the original. It brings back everything.

Letís right click and inspect element on the masthead again. Now, double click on the src portion of the line, which Iíve bolded for you.

src=" src="http://i1.nyt.com/images/misc/nytlogo379x64.gif">

It should now highlight that part (you may need to scroll down a bit, depending on your browser window). Delete the part between the quotation marks and then paste or type this in: http://www.chicagotribune.com/images/logo.png

It should now look like this:

Hit enter. Look at that! You just changed the top of The New York Times to look like another amazing newspaper (OK, itís the one for which I work).

And now letís edit a headline. Right click on the main headline, the top left one. It currently looks like this for me:

Older Pool of Health Care Enrollees Stirs Fears on Costs

Double-click on the area with the actual text of the headline, in this case the "Older Pool of Health Care Enrollees Stirs Fears on Costs" part. Change it to anything youíd like and hit enter. I changed it to "Andy Boyle Is Real Cool, Handsome" because itís news the Times should be covering.

This is one of the most powerful tools we use in Web development. I use it every day at my job, and Iím sure many others do, too. With this you can edit text, you can make things bigger or smaller, you can fiddle around with fonts and colors and much more. Itís a way to test your code and see how it would look. Really, it just saves you a step. And itís fun to fiddle with other websites and see how they work.

Almost anything you see on the Internet, whether itís a website cataloging types of Chicago crime or the login page to a social networking site, was made by someone, or a group of someones, who failed many times to create the working version you see. For almost every website, someone usually had to make hundreds of mistakes. The mistakes are how you learn. And fiddling around like this creates fun, pleasant mistakes, which sometimes lead you down the path you want to go.

Simple JavaScript

Now that youíve discovered you can edit a website, Iím going to show you some simple JavaScript, further proving you can code. If you donít know, JavaScript is, in basic terms, code that "runs" and then can change how your website looks. Think of it like the find and replace function in a word processor -- you tell it "hey, find everywhere that it says ĎAndy Sucksí and change it to ĎAndy Rules,í" and it runs and does that.

This is what JavaScript does to regular websites. For this example, weíre going to do some rudimentary scripts. (None of these will hurt your computer or a website.)

Open up a new Chrome window (Command + N for Mac, or Ctrl + N for Windows). Right click in an open area and click Inspect Element, just like in the last exercise. On the right side of the bottom navigation bar, click on Console.

This is the JavaScript console. You may see some stuff in here already, but donít worry about it. Click to the right of the >, which we will call a prompt. You should now see a blinking cursor. Know what this means? It means you can type commands in.

Letís do a basic one. Type:

var name = "Andy";

Make sure you include the semicolon at the end, as thatís how the prompt knows this line is finished. Then hit enter. It may say "undefined," but donít worry about that. Now type:

name

It should respond: "Andy"

What you did here was make a variable -- the var -- in JavaScript. Think of it like basic algebra, where n = 24 or something. Except here, you can make it text, a number or even another variable. Letís try something else:

var last_name = "Boyle";

Hit enter. Now type:

last_name

It returns "Boyle" and you holler with glee. Letís do something fancy, to show you that a variable can equal another variable:

var first_name = name;

first_name

Boom. It returns "Andy" and you jump for joy. Letís do some basic math, hitting enter after each of these:

age = 28;

age + 4

age - 15;

age * 2;

age / 14;

See how itís using age always as a variable equally 28? Letís change that.

age = age + 2;

age

"Age" now equals 30. You can do all sorts of math. I bet youíre wondering what happens if you try to do math on one of those name variables. Letís try it:

last_name - 14;

It returns "NaN," which means "Not a Number." If you type last_name again, itíll still show up as "Boyle" because you still havenít affected the memory of that variable. But letís do a few more exercises:

full_name = first_name + last_name;

full_name

Now the response isnít exactly what you figured, is it? Yes, you can add these two together, but because theyíre strings -- which is another way of saying "not numbers or another variable," they just get smooshed together. Is there a way to fix this? You bet, and itís by adding a string in the middle of it:

full_name = first_name + " " + last_name;

See the space in the middle, between the two quotation marks? Thatís you telling it to add a space between the two other variables, making full_name be what you want.

Try experimenting with your own name. Add a variable for a middle name, or a middle initial. Make a variable that has a full sentence, something that looks like this:

var sentence = "This person is awesome: ";

var person = "Andy Boyle";

var full_sentence = sentence + person;

The last thing Iím going to show you is an alert. This makes a window pop up. Itís pretty simple:

alert('This is an alert! Holy cow!');

After you hit enter, a pop-up should appear, which you can close by clicking "OK." Try putting your own message in there. Can you figure out how to include a variable?

How to learn on your own

The best way to learn is to have a project you want to make real. Do you have a lot of books or movies? Make a website that lists them. Donít worry about it looking pretty in the beginning. Just make it do what you want first, then worry about making it look nice. Figure out a project and make the smallest version of it that you can. No need for fanciness just yet; make it basic.

Next, whenever you are curious about how something looks or works on the Internet, right-click and Inspect Element. This will give you a little more insight into how it works. You will learn more advanced techniques eventually -- looking at and adjusting the CSS on the right-side of the inspector, for one -- but for now use that inquisitive mind and investigate the code behind the elements you think look cool.

When you run into a problem, Google it. If you see an error message, copy and paste it into Google. Most likely someone has posted online about this problem before and someone else has answered them. Almost 99 percent of my problems are solved this way. A great resource is stackoverflow.com, where people ask and answer these questions on a regular basis.

A good resource, which costs a few bucks, is teamtreehouse.com. This will do a lot better job of showing you the Web fundamentals than I can in this article.

Last, find a mentor. This could be someone in your newsroom, it could be someone on Twitter, maybe itís someone you met at a conference. Find someone whoís willing to let you ask questions. Check meetup.com and see if there are any local programming groups that meet regularly. Look for national listservs you can join. Having someone to answer the occasional "I canít find this on the Internet!" question is always helpful. And then, when youíve started developing some skills, be sure to give back to the community, answer questions and take others under your wing, too.

You can do this. So many have done it before you, and many will do it after you. Jump in, start breaking stuff and learn to make the Internet. Journalism needs you.

Andy Boyle is a developer for the Chicago Tribune's TribApps team, a journalism graduate of the University of Nebraska and an SPJ trainer. Reach him at andymboyle@gmail.com or interact on Twitter: @andymboyle

Stay in Touch
Twitter Storify Facebook Google Plus RSS Pinterest Pinterest
Flickr LinkedIn Tout



Current Issue
Browse Archive
About Quill
Advertising Info
Back Issue Request
Reprint Permission Form
Pulliam/Kilgore Internship Info

Search Quill


Publications
SPJ Blogs
Quill
SPJ Leads
The EIJ News
Press Notes
SPJ News
Open Doors
Geneva Conventions
Annual FOI Reports
Copyright © 1996-2017 Society of Professional Journalists. All Rights Reserved.

Legal | Policies

Society of Professional Journalists
Eugene S. Pulliam National Journalism Center
3909 N. Meridian St.
Indianapolis, IN 46208
317/927-8000 | Fax: 317/920-4789

Contact SPJ Headquarters
Employment Opportunities
Advertise with SPJ