Developers: It’s time to stop copy and pasting Javascript, and here’s why – introducing Javascript Playground

With new APIs in HTML5 we can do incredible things with Javascript and it's become a fundamental part of what we do online. Jack Franklin believes however, that developers need to desperately strike out the widespread bad practices associated with the language - so he makes his case, in the process presenting his project Javascript Playground.

Javascript Playground

I’m a 19 year old student and developer – as well as PostDesk‘s lead JavaScript developer. When I first started out learning how to make websites I used HTML and CSS, and for the first year or so I used nothing else. At this point, JavaScript was a bit of a black hole. The web had been filled with scripts online. Most developers used these without understanding the logic behind them, and due to browser differences, JavaScript was a confusing landscape for a developer. This all changed circa 2006 with the release of a certain JavaScript library, called jQuery. You might just of heard of it. It’s what we use here at PostDesk and is by far and away the most popular library out there. It was not the first nor is it the only library out there, but it (alongside other things) sparked a resurgence and an entire JavaScript community sprang out around it. I wrote my first lines of jQuery in about 2007 and since then have just developed a love of the language. Writing JavaScript Playground is a way for me to try to show others why I love it so much and educate people too. The motivation behind me getting so involved is that it’s impossible these days to avoid JavaScript. It’s everywhere. With new APIs in HTML5 we can do incredible things with this language and it’s become a fundamental part of what we do online.

Jack Franklin

Jack Franklin is a 19 year old student and developer – as well as PostDesk‘s lead JavaScript developer

Javascript is a fundamental part to what we do online

The front-facing side of a website (that is, what the user sees) tends to be split into 3 parts:

  • HTML – structural layer
  • CSS – presentational layer
  • JS – behavioural layer

If you’ve ever posted a comment on a website and seen it appear without refreshing, that was JavaScript. If you’ve ever seen a Twitter feed on a website, that’s almost certainly JavaScript, too. In the past JavaScript was just seen as a way to add “extras” to a website, bits that didn’t really matter. Now it’s become an integral part of the vast majority of websites out there. The new craze of “web applications” employ JavaScipt heavily and I don’t think it’s an area that developers can afford to ignore and this is why it’s become more important that developers have a solid understanding of JavaScript, beyond just a library. Knowing how to animate something with jQuery just isn’t enough anymore and this brings me onto my next point, copying and pasting code from the web.

There’s nothing wrong with copy and pasting, but…

There’s nothing wrong with copying and pasting as long as you both understand the content and get it from a reputable source. Around the “DHTML” era (remember that?) certain sites sprung up, containing a vast selection of JavaScript code designed to be copied and pasted. I recently came across some of this code in a website I was assisting with, and I think it broke every bad practice in the JavaScript book. I ended up rewriting it all and felt so much better for it. It was clear whoever had put this code in had copied and pasted it without any thought or understanding as to how it worked. It’s this that I want to discourage people from doing, by providing articles to help them understand JavaScript so that when the time comes when they need to find a script to do something, at the very least they are able to understand and evaluate it before deciding to use it. As I said, it’s not copying and pasting I have an issue with, more with copying and pasting code that you don’t understand and hence can’t see the issues with it.

Dynamic Drive

"around the "DHTML" era (remember that?) certain sites sprung up, containing a vast selection of JavaScript code designed to be copied and pasted"

Avoid some of the bad Javascript resources

Because of the nature of JavaScript and the huge amount of guides out there, the entry level is very low. Libraries like jQuery have further served to bring the entry level down. On the whole this is no bad thing; I’m all for people easily being able to use JavaScript and get started. However, the entry level leads to people often picking up bad practises without realising it, often from code they find online, or websites they believe to be reputable when they are not. Case in point, W3 Schools. W3Schools is not in any way afiliated with the W3C, despite the misleading name and their website contains numerous errors, which the website W3Fools highlights. However, W3Schools comes top for nearly every relevant search result and it’s from sites like these and others (W3Schools is by no means the only one) people are given erroneous advice. The best JS documentation out there, such as the MDN – Mozilla Developer Network is far better but is often missed. Sites that use bad code and promote the bad copy and paste ethic I alluded to above should be avoided but for people new to the language they are unaware. Resources like the MDN and in the long run, JavaScript Playground, will hopefully slowly take over but it’s a long road.

If you’re new to JavaScript and this post has left you wondering how you can avoid some of the bad resources, I find the best rule is to apply a bit of common sense. If you want to find out how a particular function in JavaScript works, the best approach is to append your search query with “mdn”, which will pull results from the MDN to the top. If you find yourself copying and pasting a large amount of code and not understanding how it works, stop. Ask folks. There’s always Twitter for quick questions, or if you need a more in depth answer, StackOverflow is a great way to get it.

I wanted to take certain bits, which I knew people often struggled with, and try to explain them concisely

All of the reasons above lead to me creating JavaScript Playground. I wanted to take certain bits, which I knew people often struggled with, and try to explain them concisely. A lot of the content on there is stuff that I struggled with when learning and by knowing how I struggled to grasp a certain concept, I hope to be able to put across these concepts in a way that lets people understand them. I also created the site for my own use, there’s no better way to learn something than teach it. I’ve found myself writing about something and realised I can’t quite describe it with confidence, which has then lead to me taking an hour or two to read up and fully understand something before then continuing to write an article. Over time, I want the JavaScript Playground to become a fantastic & comprehensive resource covering a number of different topics for all skill levels. Just as importantly, I would love to inspire others to write tutorials too. There can never be too many blogs about JavaScript, or any other language for that matter. Everyone can learn something from other people and you learn a lot from writing about things too, as I mentioned previously. I’d encourage anyone to give it a try as for me it’s been a massive success, personally & a very rewarding process.

Javascript Book

Jack Franklin: "I recently came across some of this code in a website I was assisting with, and I think it broke every bad practice in the JavaScript book."

There’s no one approach to suit every website out there

When writing JavaScript for the web, you need to take an approach that’s right for the context. There’s no one approach to suit every website out there. Complex web apps these days rely on JavaScript. There’s absolutely nothing wrong with this – figures put non-JS browsing users very low indeed – but if it’s possible to provide a non JS fullback, that’s always something you should do. The best approach when it comes to implementing this is to always implement the non-JS version first and then build a JavaScript implementation on top of this. Then you can be completely certain your fallback works. A key principle also, particularly with a lot of DOM interaction, with something like jQuery, is to keep your JS as independent from the HTML as possible. If you change the id on a div, or delete a tag, your JS shouldn’t break. jQuery offers powerful traversal methods. Use these to your full advantage to keep your JavaScript separate from your HTML. This takes practise, but over time you can become more efficient at this & reep the rewards. You should also be organising your code into some form of system. Whether it’s as simple as creating an object to house all your methods in, or something more complex, this is something you’ve got to do. We’re in the process of doing this here at PostDesk, simply because our JavaScript currently has got far too complex, it’s currently a mess to navigate around. Even though at first organising your code may seem overkill, once your code base grows, you’ll thank me. So just do it from the off.

Javascript

Jack Franklin: "Rather than write articles that use some sample code with no purpose, when I can I try to write tutorials that you can apply to real life work."

Tutorials that you can apply to real life work

I hope that JavaScript Playground can be useful to anyone with a keen interest in JavaScript. I’m trying to be broad with the subjects I cover as to entertain as many people as possible. If there’s a subject I haven’t covered, please Tweet me! I’m always on the look out for more suggestions as to what to write about. If I have covered something but you’re still not quite confident in that topic, I advise that you reread it at least once more. If you have any questions, please do leave a comment. I made the site completely to help people so I want to help you in anyway I can. Rather than write articles that use some sample code with no purpose, when I can I try to write tutorials that you can apply to real life work. For example, for writing my tutorial on JS testing with QUnit, I used a real life project I’m working on so rather than see how QUnit works with some sample code, you can see how I go about testing it in real life, on a proper project.

Whilst I’d initially planned for the site to be just a blog for me to post on, I’ve since had a few people ask me about contributing, so if you’d like to get involved and maybe write an article, then by all means do get in touch.