Jazzing up your JS skills – 2

Avatar
JavaScript

In my previous article about JavaScript, I emphasized how you should always start any JS project by using stuff you’re already familiar with. But it goes without saying that if you always stick to what you know, then you can’t improve much. And that’s especially true if you’re a beginner. So how, then, do you get better?

What’s in a language

One thing I have learned to understand over the years is that the actual coding language you are using is irrelevant, just like it is in real life. Whether you say “The sky is blue”, “Le ciel est bleu”, “El cielo es azul” or “De lucht is blauw”, you are conveying the exact same meaning, just using different words and syntax. As long as you have a good dictionary and a basic understanding of the structure of a spoken language, you can become fluent if you practice long enough. Back in university, one of our professors was asked whether French or Chinese were more difficult to master than, say, English or Russian. To which the wise man replied: they are all equally easy or hard, proof being that across the world, all 5 year-old children have the same command of their native tongue, regardless of how “complex” or “simple” we perceive that language to be.

A language, at its core, is a means to describe something. That’s also true of computer programming languages, which are used to describe to a computer something to do. To that end, all popular programming languages essentially start with the same set of instructions: input, output, arithmetic, conditions and loops. Just like spoken languages have verbs, adjectives, nouns, adverbs, etc.

I started my coding journey in the good old days of BASIC, on Commodore, TI and OSI computers. That’s how I learned about FOR…NEXT, IF, GOSUB, INPUT, PRINT, and a few other instructions. Those were enough to get me started writing programs. My first software-coding job introduced me to the wonderful (!) world of database programming with dBase/Clipper. When Windows became prevalent, I switched to visual programming using Visual Basic and Visual FoxPro and spent most of the 90’s with those languages. And while the web was still in its infancy, I had to become really good at creating cool web pages using VBScript for Internet Explorer. A lot of good that did me…

I have dabbled in C, and even worked on several projects that involved Assembly, but only because I was forced to learn it (how else are you going to program EPROMs?). I strongly advise any one who likes Assembly to immediately make an appointment with a shrink.

When Objectif Lune hired me, I had to upgrade to what my boss at the time (let’s call him, uhm… Baldie!) referred to as an actual language, not one of those gimmicky, semi-interpreted languages I had been using until then (his words, not mine!). But then again, Baldie is the kind of person who considers PostScript to be a perfectly acceptable way of describing the world. I honestly suspect he also prefers using Morse code over the regular Latin alphabet. Dit-dit-dat.

So anyway, I learned Delphi (aka Visual Turbo-Pascal) and used that for the next decade. Then we moved on to Java when OL Connect came along. And during all these years at Objectif Lune, I have increasingly been using JavaScript, to the point where it is now just about the only language I ever use. But still to this day, most of the code I write relies on for(), if(), function(), readline(), console.log(), and a few other commands. Which is pretty darn close to what I used to do in BASIC a century ago!

The main difference is that throughout all these languages and all these years, I never before had access to so many different resources on the web in order to become fluent in any language.

“Use the web, Luke…”

… are wise words never uttered by Obi-Wan Kenobi, nor by any other Jedi master. And for good reason: if we could muster the skills of the Force to write all our projects for us, we would just sit back and relax all day watching reruns of The Mandalorian.

Unfortunately, neither you nor I are Jedi masters, so we have to find help wherever we can. Fortunately, there are literally thousands upon thousands of free resources on the web with coding examples, tutorials, challenges and contests to keep your days, nights and weekends occupied after you’ve reached the end of Netflix.

I already mentioned one in my previous article: the Mozilla reference for JavaScript. Now that should be the very first bookmark in your list of essential JS resources. Even the pros use it on a daily basis, because it is the official dictionary for the language, and you can’t write properly in any language unless you have a really good dictionary. Beelive me when I say i tryed and it aint prettie.

However, no one actually reads a dictionary. Well, no sane person does. You lookup things in it, and it’s fantastic at handling that task, but it’s not what I’d call a page-turner. And besides, before you can lookup something you kinda have to know what you want to lookup, you can’t just open a random page in the dictionary, start reading and hope you’ll just eventually land on the word you think you were looking for!

Speaking of pages, you can also try purchasing a book about JS and reading it through. That’s not a bad idea, but I personally prefer more of a hands-on approach. Kind of like in college: I wasn’t particularly fond of that old geezer of a professor who always assigned us 3 chapters of unpalatable reading before his next class; but I really liked that other professor who was constantly writing on the blackboard (yes, young Padawan, a blackboard, it requires chalk!) and giving us living, breathing, dynamic examples of what she was teaching.

Youtube is more than cats!

If you’re looking for hands-on tutorials instead, Youtube is hard to beat. Just type JavaScript Tutorial in the search bar and you’re all set for the next several years’ worth of binge watching. Are they all good? Absolutely not. Some of them are really painful while others are simply wonderful. But don’t expect me to point to either end of the spectrum because it all boils down to your current level of knowledge as well as the type of expertise you are looking to acquire. My advice: if you don’t find the first 5 minutes captivating, skip to the next one.

Still, you shouldn’t spend too much time watching Youtube videos. Granted, they are a fantastic way of getting a pretty good overview of this or that feature, but while you’re watching it, you’re not doing any actual coding: you’re just watching someone do it for you. And often times, the youtubers are just a tad too knowledgeable and present some very, very obscure methods and patterns that you probably won’t ever need in your day to day job. Heck, I’ve gone down this rabbit hole myself!

For instance, a popular topic amongst Youtubers is how to write async JavaScript. It’s true that initially, writing async JS required callback functions, which could become a bit messy. Then the language introduced promises to improve on callbacks, but they proved a bit more challenging to master. Eventually, the async/await keywords superseded promises. So now there are three native ways of writing async JavaScript, and zillions of Youtube videos explaining which technique is best.

But honestly, unless you are designing an elaborate web page that requires a lot of very responsive interactions, you probably will never need to master each of these various programming patterns. Pick one, learn it, and move on. Besides, if most of your JavaScript code is implemented in Workflow or in the DataMapper, then async JavaScript is actually your enemy. And it should be avoided at all costs. But more on that later.

Start typing

There is no better way to learn than to practice, practice and then practice some more. To that end, when you want to test out a bit of code, or if you want to gauge the performance of one pattern/algorithm over another one, head over to https://jsfiddle.net. That site offers a free online JS interpreter that even allows you to test code using any of the most popular frameworks out there. It is extremely well made, responsive, and if you sign up for a free account, it allows you to save bits of code and share them with other people via a url. I use that site almost daily.

In the same vein, you should really bookmark https://regex101.com.  This indispensable, free site lets you test your Regular Expressions in an online environment similar to jsfiddle. And trust me, if you want to become really proficient in JS, then you have to at least be comfortable with regular expressions. I know they look like arcane pieces of syntax that date back to the punch-card era of computing – because, well, that’s what they are! – but they do make your code so much more efficient and maintainable that you just can’t dispense with them.

For instance, what code would you rather write? This:

if(myText.toLowerCase().indexOf("color") || myText.toLowerCase().indexOf("colour")) {...}

or this?

if(myText.match(/colo[u]?r/i)) {...}

(both pieces of code are used to find the word color – or its non-American equivalent, colour – in a string of text)

Now I like to think I’m a bit of a RegEx afficionado. If you’ve ever read some of my responses in our user Forums, you’ve most likely noticed that I often use them in my code samples. But still, I don’t consider myself an expert, and I certainly can’t be bothered to remember all the syntactic elements of RegEx’es. So in most cases, I’ll head over to RegEx101 to test out a few variations of a regular expression before posting it. For instance, in the expression above I could have used /colou*r/i, which yields the same result. Or /(?:color|colour)/i. Or… well, you get the idea.

And if you are completely new to regular expressions and want to learn about them, then bookmark good old https://www.regular-expressions.info/, which is still my favorite regular expression tutorial site (in plain text, not in video format). It ain’t very pretty – the look and feel will take you back to the days of Netscape – but in my mind it is still unmatched as far as the content is concerned. Plus, Jan Goyvaerts’ mustache is just too good to pass up! Or should I have spelled it  moustache? Or maybe /m[o]?ustache/i ?

And of course, whenever you google anything about coding patterns, algorithms, problems and what have you, chances are the first few links will direct you to the http://stackoverflow.com site. Rule of thumb #248: if you don’t find an answer to a problem in stackoverflow, then the problem doesn’t exist! I kid you not, google the following keywords “javascript destructuring array luke skywalker” and the first hit you’ll get points to a stackoverflow page!!! Go ahead, try it, I’ll wait for you to come back here… Dum dee dum dee dum…

Coding IS fun… really!

(says the nerd who’s been doing it for a few decades)

If you want to learn guitar, doing scales and arpeggios will help you get familiar with the fret board and loosen your fingers. But it gets boring after a while, and that’s when you know you have to start learning actual songs, just for fun, and because having fun makes you learn faster! But even if you’re a die-hard Steve Vai/Jimmy Page/Joe Bonamassa fan who can air-guitar any of their songs, starting your guitar-learning journey with Van Halen’s Eruption is probably not the best method for refining your technique. You’d probably start with something simple (Born in the U.S.A, anyone?), even if you don’t like the song that much, and even if you don’t like the genre at all.

The same goes for coding. You can learn a great deal from a simplistic exercise, simply because it deals with something you aren’t used to handling when you code for work. For instance, one of the recent coding challenges I undertook was to write a piece of code that, when fed with several different poker hands, would determine the winning hand. Sounds simple enough, right? Well I have to admit it took me a couple of hours to get it right. And there’s no shame in that, I had fun doing it. And I learned a couple of tricks along the way that I will be re-using in work projects.

There are many free sites that offer exercises and challenges. Here are a few I’ve used before:

  • http://jschallenger.com: a very nice starting point, mostly for beginner/intermediate coders. This site allows you to flex your JS muscles before moving on to more challenging exercises.
  • http://exercism.com: very diverse site, for all levels of coders. You can pick from several languages in there, and the JavaScript track has well over 120 exercises and challenges for you to practice you skills. Really helpful is the option of reviewing what other users have submitted, so you can compare your code to theirs. Checkout the Minesweeper exercise, which forms the basis for the famous game of the same name!
  • http://codingame.com: for medium/advanced coders, this one offers larger projects. Create a (free) account, go to the Activities menu and select “Practice”. Challenges are categorized as easy/medium/hard/very hard. Click on any of these categories and get access to tens of puzzles in that category, with new ones being added on a regular basis. You can also view other community contributions.

Conclusion

In this article, we explored a few ways to get you started on the road to improving your JavaScript skills. While you may never become as truly enthusiastic about coding as I am, I’m hoping to have tickled your curiosity just enough to get you started.

And in case I managed to get you hooked, then stay tuned to discuss the limitations of applying your newfound knowledge with OL Connect. Yes, some of the things you learn may well be useless…

But that’s a topic for a future article. Until then, happy coding!



Leave a Reply to Alex Cancel reply

Your email address will not be published. Required fields are marked *

All comments (1)

  • Alex

    Hi Phil, this is good stuff, nice to hear practical advice, keep them coming!