Get started with Web coding. Part 3: The command line

See all posts in this series.

So there’s code, and then, there’s code. Code (with a capital C, italics, spinning pinwheels and possibly fireworks accompanying it) is what my roommate in college studied. She spent long nights in a lab with mostly guys, most with foreign accents, and earned a B.S. in computer science, while I spent long nights at school board and city council meetings and earned a B.A. in journalism.

There’s no reason for my ex–college roommate to learn how to cover city council, so why would I need to learn how to write code?

One semester, my roommate had to write a compiler. In a required course. I will never know enough to write a compiler.

I’m not saying the journalists of the world have to become what she became — a systems analyst. But my roommate could (and still can) write standard English correctly, grammatically. She can communicate clearly. Her writing skills helped her rise in her profession. She wouldn’t know how to write a news story about a school board meeting, but in many situations in her jobs when writing was necessary, she could get that done quickly and well. It gave her an edge. It made her a better manager. It helped keep her projects on track.

For journalists in 2013, code starts to look more like that. Someone has even said: “In the digital age that we all live in, you are essentially illiterate if you can’t code.”

I wrote before about teaching programming to journalists, so here I want to say something new. I want to talk about the command line.

Screenshot: The command line in Mac Terminal

Power in your hands

Back in the 1980s when real computers were starting to appear in people’s homes, the command line was what you got. A blinking cursor, waiting for your input. There was no graphical interface, no menus, no Windows.

The command line is still there, on every computer. Most people never know that. And why should they?

Well, here’s one reason. A few years ago, I wanted to scrape some data out of some websites, so I emailed a few people who knew about that kind of thing and asked them how they would do it. One wrote back and said she would write something in Ruby. Another wrote back and said he would write something in Python. I felt very deflated. I didn’t know Ruby or Python. Moreover, it did not seem worth it to learn a whole programming language just to do the little project I had in mind.

So I never did that project.

The command line is not a programming language — it’s more like the gateway drug to programming. Without it, you will keep hitting roadblocks if you try to learn a programming language. The command line is where programming happens.

Go ahead, take a look at the command line. Do it now. It’s on your computer already. It’s waiting for you.

Screenshot: pwd and ls commands

Learn how to use the command line

I discovered Zed Shaw while I was searching for a way to teach journalism students to use Python (a programming language). It turns out that Zed not only wrote the world’s best introduction to programming for complete beginners — he also wrote a streamlined, basic introduction to the command line.

This book isn’t a book about master wizardry system administration. It’s just a quick introduction to get newbies going. — Zed Shaw

First, you must read the introduction, and you must do what Zed says. It’s not hard, but it requires a certain level of commitment. You have to want to learn it, not just memorize some stuff to pass a test and then forget it.

Here is where I see a big stumbling block for students. If you’re thinking about learning code as something you do just for this class, the one you’re in now, then you are not going to actually learn how to code. At all. If you think you don’t need to memorize things for the long term — the way I was forced to learn my multiplication tables back in fifth grade, which left me in tears on more than one schoolday — then you will never be able to code. Not in any real way.

Anyway, if you get acquainted with the command line (especially if you use Zed’s friendly little book to do so), it will be much, much easier for you to start learning any programming language.

Screenshot: mkdir and touch commands

What does this have to do with Web coding?

Good question. Because you can learn HTML and CSS and JavaScript and jQuery without ever laying eyes on the command line.

If you only want to work inside a CMS (like WordPress, or Drupal, or newsroom systems such as Publicus), then don’t worry about it. You’re just a cog in the machine. You can write text in a little box and click the send button.

But if you want to work on projects like The New York Times‘s Snow Fall, or create animated graphics that tell a story, or produce data visualizations, you’re going to need a deeper understanding. You’re going to need to learn the fundamental programming structures (really learn them) and understand how they work. You will not need the equivalent of a B.S. in computer science, and you will not know as much as a systems analyst. You will need to work with variables and if statements and for loops. These exist in JavaScript, and they — these structures — are the mechanics of Web interaction.

So if you begin at the command line — at that blinking naked cursor — you can get there.

If you try to get there with JavaScript only, and no other programming languages, I’m not so sure.

This Series

Get started with Web coding. Part 2: JavaScript and jQuery

See all posts in this series.

I’ve been thinking for a long time about how to write this post. This is the second in a series about coding, for journalists. It’s taken a while to get to this second post because I’m still feeling conflicted about exactly what to say.

In the first post, I wrote about HTML and CSS. I have no qualms about urging journalism educators to teach some HTML and CSS in journalism courses. I even say it should be required — not as a whole course with nothing else in it, but as part of some normally required journalism course such as editing or publication design.

I’m not willing to say every journalism student needs to learn JavaScript. But I believe strongly that journalists and educators and students need to understand how the Web works, and what must happen before you see something you can interact with — on a mobile phone or a tablet or a website.

So that’s how I’m going to start — with something simple and basic that you should understand.

When you see things that move or react to your clicking and typing in any Web-based story or feature or app, that’s probably JavaScript making it all happen. Only JavaScript. Even the control buttons on an audio player or a video player — now that Flash is far out of favor, even those little buttons are created with a combination of CSS and JavaScript.

Logo: MDN JavaScript Reference

How JavaScript works

“JavaScript is a cross-platform, object-oriented scripting language” (learn more here). It’s not a small thing — JavaScript is powerful and can do most of the things that any full-fledged programming language can do. In general, it works hand-in-hand with Web pages in a very direct way, and that makes it different from all other scripting/programming languages.

In the past, we used to embed bits of JavaScript directly into our HTML, like this:

<a href="javascript:alert('Hello, World!');">Alert</a>

Or like this:

<script language="javascript">
alert('Hello, World!');

That is no longer considered good professional practice. (In fact, it’s been frowned upon for several years already.) I’ll say more about that in the next section.

So usually we make a separate file — a separate text document — and write the JavaScript code there. For any HTML page that needs to use that JavaScript code, we link the JS file to the HTML file by placing the URL of the JS file inside a <script> tag in the header of the HTML file. Okay, I know that might have been too much information for some readers. Just think of two separate text documents on your own computer. One contains all HTML. One contains all JavaScript. And the two files work together to make things happen.

What kinds of things? An example of something that everyone has used is a registration form. When you register for a website or a service, you fill in a form. The boxes you type into are made with HTML. The button you click to submit the form is made with HTML. But if the form tells you your password is too weak, and forces you to choose a different password — that’s JavaScript. If the form tells you that you did not type a valid email address — that’s JavaScript. JavaScript is testing the contents of the box (the form field) and determining whether they are valid. If not, JavaScript sends you a message.

Form validation is not very sexy, of course. JavaScript is also responsible for pretty much anything that slides, moves, unfolds, fades, hides or reveals — on any Web page. And that usually involves jQuery.


jQuery is JavaScript

jQuery is a JavaScript library. All that means is, it’s a big JavaScript file. Remember those text files I mentioned above? jQuery is one. It’s just a really big text file, full of JavaScript code. The filename is jquery.js or, more properly and completely, jquery-1.9.1.js (you can download the latest version here).

One of the best arguments for learning jQuery: It can do beautiful things with data tables. But I’m getting ahead of myself.

Beginners making Web pages can download and use various jQuery plugins — among the most popular are “lightbox” plugins (see an example), which usually display photos in an overlay, fading the rest of the page beneath a semi-transparent gray screen. Increasingly popular is the jQuery UI library, which includes all kinds of readymade pretty things such as pop-up dialog boxes. You can also use ThemeRoller to create a whole interface where everything matches and looks perfectly professional.

Some jQuery code

jQuery looks like JavaScript when you are writing (or using) functions, variables, and other standard programming structures. But it also includes syntax that was completely unfamiliar to me until I started digging into jQuery, and that syntax gives you the power to change dynamically what your HTML contains.

You can make things move. You can change the order of data (as you can see in the tables example linked above). You can change colors and styles. You can make anything respond to clicking or dragging or mouse movements. You do this by using CSS styles and selectors embedded in your HTML (which means you need to know CSS to use jQuery well).

But how can we learn these?

Ah, there’s the rub. In the first post in this series, I recommended Codecademy for an introduction to HTML and CSS. Codecademy has a JavaScript track, and it’s pretty good — but I have to say I do not consider it suitable for code beginners. In fact, I think JavaScript is daunting for anyone who has never learned any programming language before, and that’s largely why I found it hard to write this post.

Some JavaScript code

Programming languages have lots of things in common — variables, loops, if statements, Booleans. They work basically the same way (especially all the object-oriented languages). If you have ever learned even one programming language — then go to Codecademy today and start learning JavaScript!

If not — do you give up? Well, no. I would never suggest that.

But I am going to suggest that you start with another language — not JavaScript. That will be the subject of my next post in this series.

If you’re proficient with HTML and CSS, you could probably start with JavaScript. Journalism students, however, are seldom proficient. Even after creating a couple of small Web projects, they tend to use both the structure (HTML) and the design elements (CSS) in a haphazard manner. The exceptions are students who fall in love with designing and problem solving and start thinking about making a career in Web development or design. Not surprisingly, those students are not plentiful in a journalism department.

Next steps

Be aware there’s a lot (really a lot!) of old, non-optimal JavaScript code and jQuery plugins out there on the Web. Searching with Google can do more harm than good when it comes to this stuff. You should check for jQuery plugins at the jQuery Plugin Registry, and you should check JavaScript syntax and methods at Mozilla Developer Network (MDN).

Two very excellent books have answered most of my questions about these things:

  • Eloquent JavaScript (free online version has a built-in code editor!)
  • jQuery: Novice to Ninja (the clearest text with the most useful, practical examples; there’s a new second edition) Update: According to a post from SitePoint staffer Simon Mackie on Feb. 8, 2012, the changes in the second edition include “a fairly substantial addition to Chapter 9” regarding jQuery Mobile, as well as updates for jQuery 1.7 (first edition covered 1.4).

As always, please post a comment here if you have a correction or a question.

Oh, and by the way — never say “Java” when you mean JavaScript. Java is a whole different language. Not the same at all.

Get started with Web coding. Part 1: HTML and CSS

See all posts in this series.

There’s been a lot of talk about journalists learning to code, and that conversation mainly centers on programming. When we say programming, we mean the use of computer programming languages, which cause things to happen. Things happen because a user — a member of the audience — touches something or adds some information. Interaction. Programming makes things happen.

I want to write a short series of posts about coding, for journalists. That includes journalism students. And yes — it includes the journalism educators too.

Today I’m starting with something we call code, but most people would agree it is not programming. The system we use to present information on Web pages begins with HTML, a markup language that structures the content of the page.

I’m starting with HTML because I know a heck of a lot of journalism educators have never tried to learn HTML, and that’s just wrong. You know how to use a comma? Good, I would expect that. The basic use of HTML is just as important as correct use of commas, and it’s certainly not harder to learn.

In fact, it’s probably easier.

Introducing HTML to the timid, the skeptical, the downright terrified

When you think about a magazine or newspaper article, you know it probably has a headline, a byline and paragraphs. HTML is used to identify each of those things, to mark each one as a structural element of the document. Each element is surrounded by a pair of tags. Tags look like this:

<html> </html>

Similarly, when some text in a paragraph appears as bold or italic, or as a functional link to another Web page, that bit of text is surrounded by a pair of tags.

You can be fairly fluent in HTML if you memorize about seven basic tags. Go ahead, click that right now and show yourself how un-scary this is.

Codecademy Web Fundamentals - HTML Basics (Section 3 of 3)

Now, thanks to the brilliant folks at Codecademy, you can learn HTML in a painless, even fun, way — free, online. Go there, sign up for a 100 percent free account, and get started with their Web Fundamentals track. I’ve tested this with real live journalism students, and it is just great. Go. Go now. Start at the top, do everything from top to bottom, and don’t skip anything.

A strategy for success

Most people will tell you that the key to learning how to program is to have a project in mind. Something you want to build or make, with code. This is great advice, but I think sometimes we first need to find out whether we can even learn the basics.

So you go to Codecademy. Good! You complete a few exercises on a Sunday afternoon. Good! And then … you don’t look at any code again for two months.

Bad! Very bad!

Even more important than having a nice little project in mind is coding every day. Yes. I said every day.

Yes, of course, you’re going to miss a day now and then. But here’s my biggest, best tip ever: NEVER miss two days in a row. Never. We forget this stuff even faster than we forget foreign language vocabulary when we fail to use it.

Also, don’t exhaust yourself by working on your code-learning goals for too long at one stretch. This makes it a chore, and tedious — and you will start to associate feeling grumpy with learning code. And then you won’t learn it.

I’ve been telling my students to aim for one hour a day. Some days you’ll do less. Some days, you’ll do much more. And those are great days, when you want to keep working! I got this idea from Zed Shaw, who wrote about this idea in his introduction to his online book Learn Python the Hard Way. He compares it to learning to play the guitar. Practice, practice, practice. It’s a fine analogy.

Introducing CSS, the style that dresses up the structure

I have one complaint about the current Codecademy exercises for Web Fundamentals, and that’s the way they introduce CSS styles.

CSS can be added to HTML directly in three ways (and there are other, indirect ways too). But first, let me give you an analogy.

HTML makes the structure of a document explicit, so it’s rather like a skeleton, or the girders and beams that frame a building. On top of that skeleton, we add muscles and skin and hair. On top of the frame, we add plaster and paint and decorative flourishes. CSS is the code that governs colors and font families, size and shape, the way it all looks. This is HTML. And this is HTML with CSS.

So this code can be inserted directly into the structural areas of a document — right inside the HTML tags. This is the worst approach, because it’s a pain in the neck to change it. Codecademy starts you out with this way of inserting CSS, and that’s what I don’t like.

The second way to add CSS to HTML is to place all the styles at the top of the document, inside an area called the head (not to be confused with headings). This is slightly better, but it still means that if you needed to update or change your styles, you would have to go in and open every darned page on your website. Yeah. Imagine doing that at The New York Times.

The third way is the best way, and (I would say) the right way: All the CSS code is written in a separate document, a separate file. This way, when you have to make a change, you change it once, in one single document, and instantly it changes all the instances of that style everywhere it is used, on every page in your website.

By completely separating the style from the structure, we make it easy to update, correct and improve the styles.

Codecademy - Clickable Photo Page (Section 1 of 1)

But I don’t mean any disrespect toward Codecademy — they’ve done a great job overall, and the second half of their excellent Web Fundamentals track is all about using CSS in a separate document.

Why start with HTML and CSS if these are not ‘programming’?

This is an excellent question, and there is not complete agreement on the answer. In the fantastic journalism-based project Code With Me, everyone starts with HTML and CSS. Then they move on to JavaScript. Tom Giratikanon (@giratikanon) of The New York Times and Sisi Wei (@sisiwei) of ProPublica decided to match brand-new coders with mentors who agree to be available after the workshop ends. (Read more about Code With Me and check out their lovely online materials.)

ScriptEd, a program to teach code in the New York City public schools, starts with JavaScript. Here’s more information about ScriptEd.

My thought is that most journalism people — students, teachers, reporters, editors — work a lot with words. If you start them out with words, and formatting that makes their headlines look pretty and lets them incorporate photos and captions, then they are starting from a place where they already have some level of comfort. If you start them out with code, the alien nature of that world might seem to be too great a leap.

JavaScript is definitely necessary, and I’ll be writing about that in this series, a little later.

I’m not saying everyone needs to memorize massive quantities of HTML and CSS, or master these to the extent that you could code an entire 10,000-page website. No. I am saying you need to understand how this stuff works, because all the Web uses HTML and CSS.

And note, I have not mentioned any software programs in this post. This is not about software. This is like learning how to use commas.

Update: New Resource for Learning HTML and CSS

(May 4, 2013) Recently I discovered that an old favorite of mine, the HTML Dog site, has redone all their tutorials for HTML5 and CSS. Everything has been updated to reflect today’s new coding environment! Highly recommended!! Note: This site is vastly better than the W3 Schools site, where you will likely be misled by some outdated materials.

(Oct. 27, 2013) If you want an explanation of why W3 Schools is a poor reference, read this.

Do not confuse W3 Schools with the official W3 Consortium site.

The future, and journalism education

Hippodrome Theater, Gainesville, Florida

My university played host this weekend to several dozen journalism educators and some very wonderful working journalists. They all came to the Journalism Interactive conference to share what they know and learn new things about digital media and training the next generation of journalists.

Most of our conference sessions were in the historic building in the photo above, which provided a warm atmosphere unlike the typical conference hotel or campus-based venue. We had lovely sunny weather and lots of happy attendees. Those who were stranded overnight because of canceled flights (thanks to a big snowstorm in the northeastern U.S.) didn’t seem put out at the prospect of spending an extra day in Florida.

Dan Reimold (@collegemedia) produced a 100-item liveblog during the event: 100 Things I’m Learning at Journalism Interactive 2013. It’s full of links and images — kind of like a conference-in-a-box for you to take home.

I produced a Storify using the tweets I had favorited during the events of Friday and Saturday at J/i. This was an interesting exercise in curation for me — I tried to keep up with all tweets tagged #jiconf as they appeared, and I favorited only about 1 in 20. Then I opened my own Twitter Favorites in the Storify editing window and made selections with the aim of representing different attendees and different panels and speakers.

Here’s the result: Summing up Journalism Interactive v.2.

Between Dan’s blog post, the Storify summary and the session videos soon to appear on the J/i website, you can get most of the resources and tips that were shared at the conference.

But if you weren’t there in person — well! You missed a really good time.

What people search for online

When you’re writing a blog, you should check your stats from time to time (I’m not as obsessive about it as some are) to see what people are reading, where they came from (referrers), what they click in your posts.

Search terms are especially interesting to me. They don’t exactly correlate with the most-viewed posts on a blog.

Chart: Total Visits by Search Term

I find the popularity of the search terms timeline, timelines, and — check out the detail list! — the Chinese characters for “timeline” to be mystifying. When I do a Google search for timelines, my post about that topic doesn’t even appear on the first two pages of results.

That brings me to a key observation about paying attention to your stats. If people are coming to your site because of a search, you should think about whether you might want to offer them more on that topic. I don’t mean you should add stuff that doesn’t match the mission or purpose of your blog — but think about whether it makes sense for you to beef up your content to satisfy those searchers.

Early in 2011, I looked at my blog stats and saw that a large number of searches then included the word timeline. So I searched my blog and found I didn’t have any posts devoted to the design or production of timeline graphics. So I made a mental note to get around to that, someday — because those graphics are part of teaching about online journalism.

Later that year, in April, I was asking students in a journalism course to create an interactive timeline graphic in Adobe Flash. I wanted to show them examples, so I dug into my bookmarks — and then I had the material for a blog post about timelines (already linked above). I suppose that accounts for the extraordinary dominance of related terms in my stats for 2012.

There are hundreds of search terms (in my WordPress stats for this blog) that resulted in fewer than 40 site visits in 2012. If I did a text analysis of all the search terms (maybe using a clustering algorithm from Overview?), maybe I would find others in the 200-300 count range, or even higher, but I’m not that into it. I had enough interest to paste the top search terms into Excel and generate the chart you see above — which took a lot less time to do than writing this post!

Take a look at your blog’s search stats — if you’re serious about blogging.

Update: Total search terms that people used in 2012 to come to Teaching Online Journalism: 498 (my WordPress logs do not show any terms that were used fewer than 5 times). Total visits from those search terms: 10,837. (So the people who came for timelines may represent about one-fifth of all who came via search.) Total site visits for the year: 99,567.

Should you get a master’s in journalism?

To answer that question, make sure you know what you want to gain from the experience. Because getting a master’s degree is an experience — as well as an investment of your time and your money.

Mu Lin, a professor at Georgian Court University in Lakewood, New Jersey, has addressed this in a new blog post:

A survey of master’s programs in digital journalism in US

Lin wrote:

Digital expertise is no longer an option for journalism students at both undergraduate and graduate levels, and digital training should be an integral part of any journalism program.

Unfortunately, digital training is not always desired by students who enroll in a journalism master’s degree program.

When students enroll in a graduate program for journalism, they come with a very wide range of expectations and assumptions (this is true not only at my university — I’ve discussed this with professors at various j-schools around the United States and Canada, and they see the same range).

Some students have not thoroughly researched what real journalists do in their jobs. Some students are not fully aware of how the journalism field has changed in the past 10 years.

One consequence of that shortage of information: Students may resist or even reject training in digital skills necessary for, say, data-driven journalism. Why? Because the student wants to be “a writer” or “a TV reporter.”

Everyone who wants to apply to any journalism graduate program, at any university, needs to research the field and the jobs in that field. Don’t make any assumptions. Check out the ads for real journalism jobs today.

Related post: Advice to journalism students: Forget grad school!

Required reading: How open source makes you better

In this blog post (Why Journalism Tools Gather Dust), Dan Schultz of The Boston Globe describes what amounts to one of the big reasons why news websites are not as successful as they could be.

If you borrow code then you are more likely to be familiar with what the rest of the world is doing. If you share code then you are going to build your systems with an emphasis on reuse and extensibility (i.e. correctly). If you regularly borrow AND share code then you are building a community around whatever it is you do.

What I’m trying to say is that if newspapers can buy into the mantra of openness — even just internal openness — they can kill about thirty birds with one stone.

But they usually don’t.

Legacy media companies have a lot of bad habits. Like some close-minded people, these companies have dragged their ancient prejudices and beliefs with them into their old age.

What Schultz describes reminded me of a newsroom that jealously guards a “scoop” that’s not really a scoop — some news they uncovered that — seriously, guys — either no one really cares about except other journalists, or everyone will find out about anyway within an hour, so who the heck cares if you break it first? (I’m not saying there are no real scoops; I’m just saying that journalists sometimes get all proprietary and hush-hush about something that truly is not groundbreaking or even secret.)

As Schultz points out, some media organizations such as The New York Times do follow open-source principles — but there’s more to it than that:

[W]ithout a supportive institutional strategy, open source and reusable code are just nice-to-haves.

A deadline mentality (also dragged along from the past) encourages short-term thinking. Almost everything in most newsrooms is about today and right now; very little is about planning and building for the future.

Recently a friend of mine — formerly a professional programmer and systems analyst — lectured me about my plan to teach journalism student to code. Teach them to respect commenting and documentation, she said. Teach them to write code that others can come along later and read, because by doing so, they will become better programmers, and their future code will be better because of the effort.

Why is this required reading?  These ideas are important for discussion, both in the classroom and in the newsroom.