You might have heard rumblings in the last couple of years about programmers saying everyone should code. Usually, the argument has to do with being prepared for the future, making yourself available for high-paying jobs, and equipping children with necessary skills.

For the most part, I think that effort is healthy, especially when it comes to equipping children of families with low income levels. I’m also seeing more folks than ever go 5, 10, or 20 years into a career and then choose to learn to code to make a big change. That’s great stuff!

In fact, I met a lady this year who was in her 40’s that was working a desk job and wanted a change—so, she enrolled in The Iron Yard. She was at the end of her time there, and I asked some questions to find out how much she’d learned. After all, many traditional schooling environments don’t do a great job equipping students to work on the web.

Within a few sentences of her response, I could tell she was ready to work in Javascript full-time! She was talking about her favorite advanced frameworks and excited about that technology.

While it’s absolutely awesome that someone can make a change like that for a relatively small investment of time and money, it can often be the only narrative for people already in a non-coding career. What if you don’t want to change careers?

I’d like to present a slightly different viewpoint, clarify the goal a bit, and show you how knowing the foundational languages of the web can be helpful to anyone. If you already code, I hope this will equip you to empower others with more practical reasons to be fluent in the languages of the web.

Web Standards Model: HTML, CSS, and Javascript

If you never plan on coding for a career or as a hobby, you really don’t need to learn PHP, Ruby on Rails, Java, or any of the other languages that build applications. What you should understand, though, is that all languages that build web sites and applications compile logic to turn it into HTML, CSS, and Javascript, which are the foundational languages of the web. Everything you view in your web browser utilizes those three languages.

When you “know enough to be dangerous” with these three languages, you can utilize your browser’s built-in Developer Tools to work with pretty much everything presented on the screen. You can move elements around, change colors and fonts, edit text, and execute your own Javascript—all without being dangerous or destructive. A simple page refresh will present the site the way you originally found it.

Cool, huh? There are some great details on how to work with these Developer Tools over at devtoolsecrets.com. For our purposes, here’s an except on how to find these tools:

As well as a menu shortcut, you can access the Developer Tools easily either pressing “F12” in Windows or “Cmd” ⌘, “Option” ⌥ and “I” on the Mac, or by right clicking on the page and selecting “Inspect Element”.

In Safari, you will need to enable the Developer Tools by checking the option in Preferences > Advanced > Show Develop Menu first.

In Opera, you will need to enable Developer Tools by checking the option in More Tools > Enable developer tools.

Since Firebug is an extension for Firefox, you will need to install the add on from http://getfirebug.com/

Now, what can you do with this newfound power?

Pulling Data

3753486898_6cd2c60a5eEver tried to copy and paste information you need from a site, only to find it’s impossible because of how it’s built? Or, maybe you’ve needed a column of data from a table. You’re not going to be able to get what you need without copying and pasting into a word processor and cleaning everything up.

If you know basic Javascript and use the Console in the Developer Tools, though, you can get the data just how you need!

For instance, you could grab the plain data out of the second column of a table with:


$('table tr').each(function(){
    console.log( $(this).find('td:eq(1)').text() );
});

Now, this requires that jQuery be loaded onto the page, but you can also do it with plain Javascript. You’d just plug that code into the Console, and you’d see the data you need right there! It looks at a table, runs through each row, and pulls the text from inside each cell. You can copy that data without any annoying formatting issues.

And, sure, that may look like a foreign language to you, but it’s an example of a simple application of Javascript knowledge. You’ll be running stuff like this in no time, because once you start getting your bearings on the language, you’ll know what to search for when hunting down a solution. That’s key to learning coding languages.

Traversing the DOM

369057688_4f019bbe17_zFirst of all, how cool does it sound to respond like this:

“How did you make it do that?!”
“Oh, I was just traversing the DOM.”

Many nerd points are immediately awarded to you! In all seriousness, those same Developer Tools allow you to look at everything in the DOM, which stands for Document Object Model. Basically, you can look through every bit of HTML that’s on the webpage and hunt through it for things.

For instance, if you’ve ever been blocked by a popup that won’t go away, you can actually delete that element from the DOM entirely! That’s come in handy more times than I can count.

Ever wanted to grab a picture “for your own purposes” from a website? You can look through elements (especially when the image is in a popup) to find the image’s source so you can download it directly.

Finally, another great feature of knowing how to run through the DOM is that you can edit the text on any website or change the colors, screenshot it, and send it to your friends to impress ’em. I have a good friend who manipulates my personal website and sends me ridiculous pictures of it. Certainly, there are more practical applications, but bringing laughter into the world ain’t so bad, either. 🙂

Troubleshooting

ssThink back to the last time you were on a website trying to do something important—signing up, making a change, or ordering something—and it just didn’t seem to work. There’s a good chance you encountered a Javascript error. These errors actually show up in the Console I mentioned earlier. Being able to see and understand these has two benefits:

  • You can sometimes get around the problem entirely if you know what’s going on and move on with your life.
  • If you can’t figure it out, you can start a support conversation with extremely helpful information, which will likely get you a resolution faster by exposing a bug.

Simply looking at errors and understanding them has put countless hours back in my life over the years.

Certainly, there are more than three reasons knowing these languages can benefit you, but I hope this fills a gap I’ve noticed: you don’t need to learn to program to benefit from knowing basic code. These three languages aren’t going anywhere for decades (if then), so consider being “fluent” in the native tongue of the web.

Want blog posts sent directly to your email?

Sign up to get emails from Logos Creative! You'll get the latest blog posts and an occasional extra email. Unsubscribe (easily) at any time.

October 10, 2014 — Leave a comment — In Blog, Coding