Getting started with Javascript – The right tools and resources (Video Interview)

A few weeks ago I was in Paris, France to visit Prismic and they interviewed me about the JavaScript vs. CSS debate. In 10 minutes we covered a lot :).

Transcript

Here is a verbatim transcript of what we talked about:

Hi, Chris. We are here at Prismic, very happy to have you there. Could you maybe first introduce yourself?

Hello, I’m Chris. I’m a principal software developer at Microsoft, and I’m dealing with all matters web there, ‘cause I’ve been doing it for 20 years, and I love the web.

Okay, you also love JavaScript, I know that, and I’m sure you interact a lot with JavaScript developers, so I’m curious to know, like, where would you recommend someone who wants to learn about JavaScripts, to go and learn more about it?

The problem is, nowadays, there’s far too much JavaScript it’s overwhelming and everybody has a different opinion of it, so you actually have a lot of resources that are outdated, some of them that seem to be simple, so there’s a few things that source of truth that I love to use. One of them is the Mozilla Web Docs, MDN Developer Network, used to work on that one when I worked at Mozilla. That one is an up-to-date information that is actually everything about web technologies, is it CSS, JavaScript? And every time you wanna lookup some JavaScript that is a great way to look up. You can even do that in browsers when you do MDN and space and then the JavaScript that you wanna look, it automatically gets the results from MDN back so you don’t have to go through the website and do it there. Another very interesting thing is caniuse.com. Caniuse.com is a website that allows you to say something, technology that you heard about, and say which browsers and which environments support them.

So if it’s safe for you, in your case for your product, to actually use these already and also links through the documentation of these things links through the problems that they may have and links through the W3C standard that is actually their source of truth for everything but it’s not as easy to understand. So these are the main resources that I think are a great way for people to get started. And of course look around for videos on YouTube and conference videos because all of them are available for free. Every conference spends a lot of money producing these things and giving them out, so it’s kinda weird ‘cause people watching this right now so this kinda matter. But look at these resources and make sure you look at the date as well ‘cause some of them get outdated rather quickly, but something like MDN the great thing is it’s not a Mozilla product, it’s basically an independent product that people from Microsoft, Google, Apple, Samsung, whoever is doing something on the web are contributing to that one. We realize this is the one resource. We want to keep up-to-date, so this is a great place to start.

Okay, cool. So once they have looked this knowledge, where should they start, which tool should they use?

Once you have all this knowledge you would in the 70s and you don’t have to work anymore because it’s a lot of knowledge to take in. But knowing where to go is always a good opportunity. I find the most important thing right now and the most biggest change for me as well, is that how tooling has become so much better than it used to be in the past. In the past we had an alert to basically say when something went wrong in our JavaScript and that was not fun. Nowadays every browser comes with developer tools. There’s Chrome developer tools, there’s F12 developer tools, Safari’s, Firefox’s, they all differ a bit to a degree but they all give you lot of insight of what you’re doing and what you’re doing wrong. So instead of getting the old error messages, undefined is not defined which is not as helpful. You nowadays have a console in every browser that tells you what went wrong. And sometimes it’s even crosslinked to the MDN documentation that you can click on and know why something went wrong. So knowing these developer tools in the browsers, in and out or at least basically, is a very very good start for you because you know what you’re doing and you don’t need to go anywhere else. You can actually start writing JavaScript directly in those. Another great thing to get into is using interactive playgrounds on the web like: JS Bin for example, JSFiddle, CodePen, just a few others, StackBlitz and these kind of things. CodePen is a beautiful beautiful example because it has documentation, it has articles and it has code examples. So what these things allow you to do is write a code example when you run into a problem and send it to other people and they can then see what you’ve been doing and help you fix the problem in context rather than you having to explain to them what you did wrong. You can do live coding together with each other in these kind of environments. So for trainings and for schooling courses that I do, these things are beautiful to see. So getting to know these kind of environments and CodePen is full of very creative code examples so that’s a beautiful thing. If you’re just a visual learner, this is something to get very excited about. When it comes to setting up your environment I think Visual Studio Code is the editor that, of course I’m kinda biased because I work with the thing and on the thing, but it’s also a product that allows me to write code and learn what I’m doing wrong while I’m doing it. So there’s linters built into the systems, so linting means, while I’m typing something it tells me By the way this is wrong and here’s why. So much like the squiggly lines in Word when I’m writing something telling me I mistyped this, it’s the same happening in JavaScript. And the other thing it does for you is a lot of code insight so you don’t need know every keystroke but you actually tells you, you wrote these three letters, you probably want to write that long word now. and auto-completes it for you and the only one that can come after that is that one and so on and so forth. So it made me a much more effective developer and it’s lightweight, it’s open source, you can install it on Linux, on Mac, on Windows and you don’t have the problem that you had before like the editor had some similar functionality were like 12 gigabyte downloads and that’s not fun to do as well. So that’s one of the things I would be considering because it’s a beautiful experience of learning to become a better developer while you’re programming. Not reading up on it and having to know everything before you’re doing it. The tooling we have nowadays with developer tools and the browsers and editors like Atom or Visual Studio Code is that they do this auto completion things for you so it teaches you new things while you’re typing and you’re actually experiencing code as an adventure.

Okay, and one last question is, what would you start with like as your first project?

Whatever tickles your fancy, whatever makes you happy. I think products that come out of passion, things things that are something that you always wanted to build for yourself are the best things that are out there. You don’t want to start writing Facebook, that’s probably not a thing you’re gonna do in the weekend. But something you’re already excited about and you always wanted to play with is a great thing to get started with. One of the main things that I think are education space is not built on that kind of environment yet, it’s like, here’s a very very weird thing to do, Let’s find an algorithm to do that kind of thing. Solve your own problems and if that’s a to-do list for your things, if it’s organizing your kitchen, if it’s something you always wanted to do, if it’s finding out why the planes are not right at this moment. Friends of mine live on an island where there’s lots of ships coming in and they actually wrote themselves an app to learn code, to know when a cruise ship is coming in because then it doesn’t make no sense for them to go to town because it’s gonna be full of tourists. I guess Paris has similar things so that might be an app to start with kind of thing. Programming is there for us to do tasks that we are bored of as users. Computers are there for us to do the things that we humans would be bored doing. So find something like that that makes you happy and that way go out there. If you wanna learn new programming as well, you wanna learn JavaScript, there’s lots of good courses out there to get started with. But don’t get overwhelmed by the seemingly complexity of it. You can have tools nowadays that get you every step on the way and it’s in an interactive fashion and not, oh, you’re stuck here because you don’t know. The information is free and the tools are free and that’s why this is a wonderful world right now to learn web development.

Okay, cool. Well thank you very much for being there.