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.

Teaching programming to journalists

I’ve been thinking about this a lot lately. I’ve been preparing a syllabus for an upper-level undergraduate journalism course that I will begin teaching in January. I’ve been learning Python and starting to learn about jQuery.

I’ve got some advantages: I learned HTML in 1995. (I bought a book and did all the exercises in it, at home, on my own time.) I played with the BASIC programming language on my first computer in 1984 until I learned how programming works. (I bought a book and did many of the exercises in it.) I bought an account at an early online community called the WeLL, which gave me access to a Unix command line, which helped me learn about the Internet before we had the Web. I think that was around 1989. (I bought a book to learn Unix commands.)

I’ve had no formal training in programming or Web technologies. My B.A. is in print journalism.

I’ve got some disadvantages: I don’t have strong inclinations toward investigative reporting. I’ve taken two or three workshops with the old computer-assisted reporting crowd, and I admire what they do. I attended a wonderful presentation by Jennifer LaFleur (director of computer-assisted reporting at ProPublica) at a recent conference. However, I seem to lack all interest in examining large datasets. I can download them, dump them into Excel, and clean them. After that, I have no desire to do anything else with them. (I’m not proud of this. I’m just saying.)

I’ve had almost no math education. High school algebra and, in college, symbolic logic. No calculus. Not even a geometry class.

So I think about my journalism students. I think about what I like and don’t like, what I consider fun and interesting, and what I don’t. And I look at all the great work being done online by all kinds of journalists using a wide variety of digital tools.

What I want to do is open doors.

I want to be able to show journalism students that they can do things with code. Even if they think they can’t.

Above all, I want them to understand that “doing things with code” can lead you in several very different directions in the field of journalism.

This is important.

We can offer a course that focuses on Web technologies — HTML, CSS, JavaScript, etc. But there is no data journalism in that class. And a lot of the students are going to hate typing those little brackets and so on. They’ll be so happy when that course is done and they never have to do that again.

Moreover, they won’t practice what they learned, and very soon, they will forget all of it.

We can offer a course about scraping and doing stuff with large data sets. We can teach students how to find stories in data. Students who like this, who learn how to do it and want to continue doing it, are probably among those most likely to get a journalism job. Like the Web technologies course, though, this is a class that many students will either avoid like the plague or take and then count the minutes until it’s over.

Right now, many of you might be thinking thoughts about two types of students: those who appreciate such a course and use what they learn in it, and those who are not appreciative — and so what? Forget about them.

What I’ve been thinking about — a lot — is that there are a zillion ways to turn students off. To make them do things in a class that result in the students forming negative opinions. “I don’t like this,” or “I’m no good at this.” (I think this often happens in Reporting 101 courses too.)

Learning that you can do these things — these code type things — is the first step. Learning that you are capable. You can figure this out. You are not “bad at math,” or “bad at computers.”

Most journalism students learned — back in high school, or even before — that they are “good at writing.” Some of them are quite surprised to learn (in Reporting 101) that they are not good at writing a lede, finding appropriate sources, avoiding cliches, or using commas correctly. Yet the confidence that they are good at writing will sustain many of them through all kinds of setbacks.

If students realize that they can write code — they can figure it out, solve problems, make things that work properly — they will have opened a door that leads to dozens of different journeys in journalism.

  • They might choose data journalism and the investigation of large datasets.
  • They might choose design — they might go on to create new user experiences that make journalism more interesting to more people.
  • They might become a hybrid, a graphic journalist who combines data and presentation to make complex stories easier to understand, using animation and interaction.

My concern is that the way we introduce code to journalism students can push away those who might really excel in one of those areas.

I don’t have a solution. I don’t know if there is one.

But again and again I return to the way I felt in 1984 when I was learning BASIC, in 1995 when I was learning HTML. It was fun. I was happy to be learning. I completed little exercises and they worked. I felt proud of myself.

I thought: I can do this.

(Image credits: Python interpreter, Mindy McAdams; “Our database,” Jennifer LaFleur; Data Journalism Handbook; WTF cartoon, Martin Schmid)