6 Tips for Becoming a Better JavaScript Developer

10 Tips for Becoming a Better JavaScript Developer

10 Tips for Becoming a Better JavaScript Developer

I’m so tired of all these generic JavaScript wallpapers, we need someone to step up and create a couple of hundred variations, I think it would be for the benefit of all of the humanity, not just me. Oh, hello there. I got carried away rambling, sorry.

So, you have decided that you want to become a better JavaScript developer? May I ask, what happened that you’ve suddenly decided to take this step? Chances are, you’re reading this article because you’re a regular reader, I can understand that – though it still puzzles me, where are all the communities that help beginners to take the leap of faith towards a more intermediate level.

I wrote about programming communities not so long ago, and even then – I can’t think of a single community that would have the necessary focus to cater to this breed of programmers. I rely on whatever the social world is throwing my way, everything else comes from experiences, and quite often – books.

New JavaScript

Right now, JavaScript is being bombarded with new frameworks and libraries that completely change our regular workflow. Not to mention, Node.js has been calling the shots for the past two years, and probably will continue to do so for another two. (It seems that area of excitement is slowly declining!)

I did write something of similar nature, but I feel like this piece is going to be much more technical compared to the habits for JavaScript developers. If you feel like you could add more to this particular post, please do so in the comment box.

1. Work on Your API for Security

In reality, Front-End has very little to do with security of your applications and products. You might think that hiding elements from the user using JavaScript is real security, but in reality – it’s only a show that you’re putting on, for the average user. A real security person will find a way around your lack of obedience towards good code.

With that in mind, we can put our focus towards the API layer, because that is where we can begin to put up real walls of security. An API should check everything that gets passed through it, and confirm that the person doing the call has the necessary rights to proceed – and only then let it through. Plus, it should never produce information to a user that doesn’t have the permission to access that information.

Relying on JavaScript to hide and mask things isn’t really a wise idea, so the next best thing to do is build a real API that has multiple layers of protection added to it. It really is that simple.

2. Aim for Easy to Understand Code

Right, you may not want to obfuscate your code just yet. You’re still interested in learning the curves, and that’s perfectly fine. But, did you know that writing easy to understand code helps you to progress at a much quicker pace? It comes down to several factors, but here is my advice to you:

  • The shortcut isn’t always the best way. Humans aren’t capable of reading minds, and thus a function called ShoeBox(); is going to be easier to understand that ShBx(); — I hope it will encourage you to pay more attention to your shortcuts!
  • Write as if you’re writing a story using normal language. Your code is a reflection of your thinking patterns, and your perspective on what you’re building. In most cases, your code is going to be different than others. Complement it by documenting what you’re doing at each stage.
  • Just learned of a new cool trick? Hey, don’t be clever too soon, that trick might screw you over when the deadline will begin to approach.
  • Forget about speed, the number of lines you’ve coded, or whether the app works perfectly or is quite buggy. As long as you’re producing actual code, I don’t see how those things are relevant.

Your job is to become better at what you do – program, obviously – and in turn there are few things to keep in mind, granted that every expert in the field has gone through the same learning process – I doubt you’ll find your way around it that easily.

3. Consistency is Key

More or less, such advise can be considered on global scale. Being consistent means that you’ve developed passion and perhaps even love towards what you do, and so you seem to progress at a much quicker rate. You can ask any programmer out there, what it takes to push that library to the world? Consistency!

Here is some advice for those who’re starting out on a new project, and feel like they’re lacking the necessary skills to carry it out:

  • Decide on the style that you’re going to use when starting a new project. Those who’re going to work on other peoples projects – should adapt to their style.
  • Decide on how you’re going to document your application, or whatever it is you’re building, and then do it.
  • Always make sure your code is working. (Use tools: JSLint, ESLint, JSHint)
  • Be consistent, continue to build and debug until it does what you want it to do.

Now, I talked about you being someone who wants to take it to the next level (intermediate), but I still feel like consistency is problem among programmers and aspiring developers, there is too much clutter and distraction around us. Be gentle, and accept that you won’t always perform at the optimal rate.

4. Class & Function Definitions

Trying to start a new library or an application can be very tough the first couple of times. I advise to write down all your classes and functions before you even begin to fulfill them. Afterwards, just use single calls when the preparations have been done. It’s nice when you know that at this particular place is the beginning of your app.

Functional Programming

I also wanted to touch the subject of naming your functions, classes and variables in names that later become like a puzzle that needs to be solved by itself. You should always try to use names that clearly indicate the value that it holds, and for which particular part of the app it does so. By looking at a variable name, you should be able to tell if it’s a class definition or an instance. You should be able to distinguish between a constant and a function.

5. ‘use strict’; // helps with errors and code problems

Strict mode is a way to opt in to a restricted variant of JavaScript. It helps to be safe when you’re programming in a language without a compiler. You’re exposed to a fatal error at any given time, without any help to assist you.

It’s quite easy to set it up, just add this to the top of your JavaScript files:

'use strict';

unfortunately, it is not going to fix all of your code problems just like that, but it often leads to more messages being thrown out by the browser that you’re using, helping you to better understand the problem that’s arising. Yes, it does work within a function:

function CodeCondo() {
      'use strict';
          ....
}

I linked to the official Mozilla page that has more detailed examples and explanations on strict mode, use it whenever you can.

6. Selecting Elements with Fast Selectors

JavaScript gives us several ways of selecting elements on any given page,

getElementById
getElementsByClassName
getElementsByTagName
querySelector
querySelectorAll

// these are the most common ones

At any given time we might have to select a given number of elements on a page, but if there are only a couple that you’ve to select – it doesn’t really matter how you select them. The most common ones for small pages is querySelector and querySelectorAll.

But, as soon as we’re dealing with a larger number of elements (even unknown numbers) which might end up being a hundred at a time, you’ll have to begin using more advanced selectors. For example, getElementById is a very fast selector, and has support for all major browsers.

In any case, try to use ID’s and class-names for your selectors as often as possible, it will keep you out of trouble.

Becoming a Better JavaScript Developer

In all seriousness, this list could end up very large, so large that it would become an unpleasant experience to browse and explore. I recommend reading this article from Modern Web (formerly, Flippin’ Awesome) – Saad Mousliki gives us over fourty unique tips and tricks for JavaScript developers.

I’d love to hear your input on this subject, as I believe that everyone has their say in such a specific subject. The web is expanding, just like the Universe is, there is always something new to try and explore – a new method to apply to our regular workflow, in hope that it might make our lives easier. Stay safe, keep coding!

9 COMMENTS

  1. Like to go through this reading flawless. My main concern as starting programming in Javascript is reading tons of books that mostly end up in few practical exercises that give you clue or impress more your mind with concept.
    Any recommendation on what is the best pattern to get a more overall understanding of concepts?

  2. Hi Alex,

    Great reading.

    I’d like to ask something since you’re on the “Front End Development” subject. I’ve been a front end dev and I’m starting to lean more on vanilla JS and leaving jQuery behind when possible, not supporting old IE versions helps in that matter. And as you point in your article, there’s a lot of fuzz about Node and Git. While I’m sure that this are super useful tools and incredible helpful for huge and complex projects, I’m not completely sold on using them as a freelance guy that builds websites, independent of their complexity. For example I’m getting started with Angular and using the command line to start a new project implies over 15 MB of data in the folder of the local server. Am I crazy, or wrong, or ignorant, or all the above by thinking that is completely unnecessary to download almost 15MB of stuff?.

    Sorry for rambling around, here’s the question, Is command line totally useful, necessary and irreplaceable for front end development this days?. I’m getting good results using the latest files on my local server and pointing to them like this:

    So I only keep one copy of each version in my folder and that’s it. No more fuzz than that.

    Cheers,
    Rodrigo.

    • Hey Rodrigo,

      I don’t see why you wouldn’t able to do everything manually, remember that workflow tools came into play only recently, and I’ve never been a fan of aggressive development.

      I’m guessing you’re more concerned for the sake of being a ‘qualified’ developer than anything else?

      • Hey Alex,

        Thanks for the prompt answer. Is good to know that I’m not alone in this one ;)

        Yep, my concern is feeling out of the loop, a misfit so to speak, and not taking advantage of some tools. I recently started using Grunt and as in many other discoveries I’m kicking myself in the butt for not starting earlier with it, so now I’m wondering “what else is out there that I’m not using and I should be”.

        As for being qualified, I’m a little more relaxed now since Jack Doyle (creator of GreenSock Animation Platform) was kind enough to share some experience once. He told me that even with all the great tools out there, every framework we use on a daily basis is made in a text editor, using vanilla js. Basically good code is scalable and maintainable, no matter how is written and that’s the trademark of a good developer so I’m more focused on sticking to the best practices (reason why I landed in this article) than anything else, but also keeping a more open mind for tools that could come in handy.

        Maybe you could write a piece some day about migrating from jQuery and traditional development to the new Node environment, I missed one when I started with it, they all assume that you already know something no one teaches.

        Rodrigo.

  3. Hey Alex,
    thanks for this great piece of information on how to become a better javascript developer.You can mention also focus on basic theories too with practical.You have shared really good information as beginner its very useful to move forward to become good developer.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.