Categories
Dev JavaScript Optimising

How to write modern JS

So you’re learning JavaScript (JS), cool. Putting all this effort in, you’ll want to be learning the modern usage of the language right? Time to get strict.

“use strict” is something I recently stumbled across, and it seems like a really important thing to be using. So much so that I’m a bit surprised it hasn’t been mentioned in the course I’m doing. As it turns out, JS is full of legacy thinking. In an effort to keep new versions of the language compatible with older versions, much of this legacy thinking was/is retained. Obviously this limits JavaScripts ability to overcome its past and improve as time goes on.

Evidently, in 2009 a decision was made to start to modernise JS with the release of ECMAScript 5 (ES5). This meant breaking compatibility with older version of JS if you decided that was what you wanted to do. This is where “use strict” comes in. To enable this “modernisation” you include “use strict” at the top of your JS files like this:

"use strict";
// code below this will be implemented the modern way
...

Since it’s been 10 years since that decision was made, all modern browsers now support ES5. So unless you need to support browsers before the dawn of IE10 then you should be turning strict mode on for all of your JS development.

This of course begs the question, why? Well, aside from staying current with the language, there are also a number of practical benefits:

  1. Modern JS throws errors on things that where previously ignored. This helps you write better, more secure code
  2. It can improve the performance of your code, sometime significantly. Sometimes the code itself is identical and you just get a free performance boost, nice!
  3. It prevents some syntax being use that future version of the language are likely to use. AKA it future proofs your code

So from here on in, I’m going to be using strict mode exclusively and only avoid it when a situation presents itself that I can’t.

As always MDN is a good source of information on both strict and sloppy mode. Now go forth and write strict code!

Categories
Dev JavaScript Projects

I made a thing: To-do list

Yep, I made another thing in JavaScript for the course I’m doing. This one’s a bit more basic, but really it’s more of cutting my teeth with jQuery sort of project rather than something anyone would actually use. It’s a very simple todo list app that lets you add and remove items from a simple list. It has no backend so you can’t save your list or anything useful like that, but the front end side of things does the job at this stage.

A simple to-do list app

If you’re interested in the code you can take a look on GitHub. Of course, you can try the app for yourself. If you find anything wrong with it you can submit an issue.

Categories
Dev Process Tools

Pastebot

The more time I spend coding the more time I find myself researching solutions to workflow problems I’ve never had before. Copy and paste is a good example of this.

Sharpening my coding skills I find myself copying and pasting a lot more than normal. Maybe a better way to say it is coping and pasting in specific ways a lot more. For example, when I’m writing CSS I tend to copy and paste a small set of different colour codes over and over. Another example would be copying lists of items from a document one at a time to populate a list in an HTML document.

I had never considered that there might be a better way of doing these things until I stumbled on Pastebot. Pastebot is like copying and pasting on steroids. At a basic level, it keeps a history of everything you copy and paste. Even this simple function makes it incredibly useful when coding. Need to paste that colour code you copied 30 mins ago? Bam there it is in your clipboard history.

Once you’ve got used to having clipboard history you’ll never go back to your old ways. As a developer though that’s not even the best part. Where Pastebot really shines is its filters. Want to copy of a list of items then paste them as an HTML list? Want to copy some text and pasted it wrapped it in <p> tags? Pastebot can take care of all of that for you.

Do yourself a favour and at the very least investigate a clipboard manager, and if you’re on a Mac make sure you try Pastebot. It really is worth your time.

Categories
Dev JavaScript Tools

VS Code

Recent reading leads me to think my text editor of choice (Atom) might not be the best solution for my current needs. To that end, I’m downloading VS Code just to see what all the fuss is about.

The number one thing I keep hearing about VS Code is its performance. I’ve always found this to be quite a curious thing. Perhaps it’s just I haven’t done any meaningful coding in a while but I’ve always found development to be about 5% typing and 95% staring into the void. This might change as I work on bigger projects but for now, this is my view.

So given performance is a bit of a moot point (at least at this stage) for me I want to focus on other features of VS Code. This really is about two different things:

  1. Out of the box features, I can’t get in Atom. Stuff like IntelliSense and debugging features
  2. Recreating features I have set up in Atom like code beautifying, settings sync, Emmet, and code snippets and see if there’s any nuance

I suspect this will be a journey, but then again that really is the point. With a bit of luck, I’ll either reaffirm my choices with Atom or find a new favourite in VS Code. Another possibility is I just don’t have the development maturity yet to benefit from what VS Code offers, but I guess we will soon see.

Do you use VS Code or Atom? Is there anything you think I should keep my eye’s open for?

Categories
Dev Geekpulp JavaScript Tools

What is the state of JavaScript?

This JavaScript thing is really catching on eh? As the name suggests, “the state of JavaScript” survey gives a snapshot view of JavaScript development. What everyone (over 20,000 developers anyway) is using and enjoying or otherwise. It also gives a general sense of the direction things are going in. As with the StackOverflow survey, I found it well worth a read. It’s also beautifully presented.

Some of my main takeaways:

  • React is where it’s at from a front-end framework perspective
  • Express seems to be the stable go to back-end framework for Node.js
  • GraphQL appears to be the rising star of the data layer, but Redux is the player to beat
  • There seems to be a range of good options with testing, but the community seemed to enjoy Jest the most
  • Building desktop and mobile apps using JavaScript seem to be a two player game at present. Electron for desktop and React Native for mobile. This space does have some competition on the rise though. Flutter looks particularly interesting
  • VS Code dominates text editors by such a large margin, I really need to give it a second look. I haven’t seen anything that makes me think I’ll move from Atom but I’m open to the possibility

Have you read the survey? Did I miss anything you found particularly interesting?

Categories
Dev JavaScript

Pigs in namespaaaace

When you’re working on a JavaScript (JS) app you’ll create loads of functions and variables. By default in JS, there is no namespacing so everything you declare is effectively in the global namespace. This can lead to issues where two or more functions or variables can easily be called the same thing and create conflicts. Take this example:

function pigs() {
  console.log("Pigs in space");
}

function pigsDance() {
  console.log("Pigs dancing in space");
}

function pigs() {
  console.log("Pigs in Mexico");
}

pigs();

The output of this will be “Pigs in Mexico”. To avoid collisions like this we can use an object to create a namespace. So reworking our above example:

var space(){
  function pigs() {
    console.log("Pigs in space");
  }
  function pigsDance() {
    console.log("Pigs dancing in space");
  }
}

function pigs() {
  console.log("Pigs in Mexico");
}

space.pigs();

This will return “Pigs in space”. By creating the object and making “pigs()” and “pigsDancing()” properties of that object, we isolate them from the global namespace that “pigs()” lives in.

This way, when we need our pigs in space, that’s exactly where they will be.

Categories
Dev Tools

Atom snippets

One of the things I love about modern text editors is code snippets. Coding tends to involve repetition, code snippets can really help cut down on needless typing.

I group all my code snippets by prefixing them with “my”. That way to view all my snippets I just start typing “my” and Atom shows all my snippets for the specific file type I’m currently working on.

Some simple examples I use quite often are:

myHTML – My own HTML boilerplate

<!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
  </head>

  <body>
  
  <script type="text/javascript" src="assets/js/script.js" charset="utf-8"></script>
  </body>

  </html>

myjQuery – Inserts jQuery using their CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>

myFontAwesome – Inserts font awesome using their CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

myLog – inserts a console.log() to help debug my JavaScript

console.log()

Getting all this working in Atom is a fairly easy affair. I found the below video by Hitesh Choudhary super useful.

Categories
Dev JavaScript

Selection

One thing I notice about jQuery is how it simplifies common tasks. A good example is something you do all the time with JavaScript, select DOM elements. In JavaScript selecting all li elements would look something like this:

document.querySelectorAll( "li" );

The same selection using jQuery is like this:

$("li")

At this stage of my learning, I can’t say I see the above as a major advantage. Yes, it’s shorter but you could argue it’s also less descriptive for the reader. Brevity isn’t always a net win in code. This is especially true when tools like Emmet and other text editor tricks auto-complete a lot of code. So it’s not 100% clear to me what the advantage is.

It will be interesting as my jQuery knowledge grows if my feelings toward it change. At this early stage, I can’t help feeling sceptical. Especially when I keep hearing about frameworks like Angular and React. I guess we will see.

Categories
Dev JavaScript Tools

Survey says

Today I was reading the 2018 stack overflow developer survey and boy was it an interesting read. There are loads of insights into the current state of software development.

For example, JavaScript continues to grow in dominance. If you’re working on the web and you’re not learning JavaScript you need to start yesterday. It’s been clear for a few years now that JS is the direction the web development is going, but I don’t think I’d quite realised how much that was the case. 71.5% of all professional developers are now using it in some form. That’s huge!

Another surprise to me is the popularity of various text editors. VS Code has really risen to the top in a short space of time. To my horror Notepad++ (of all things) is the 3rd most popular app. Sublime text somehow trails behind it in 4th place and my beloved Atom is 8th!

With over 100,000 developers participating in the survey, it really is quite a rich resource. Did anything surprise you in the results?

Categories
Dev

Emmet!

Whatever your text editor of choice (I just can’t quit you Atom) there is a wide range of plugins to enhance its capabilities. One such plugin that I use constantly is Emmet.

Emmet can be used for a number of things, but where it really shines is speeding up my HTML production. Emmet uses a CSS like syntax to quickly produce common HTML code.

The most common situations I find myself using it is when I initially create an HTML document. To do this you just type “!” and hit tab. The result will be:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>

</html>

Perhaps most useful of all is adding repetitive blocks of HTML like lists. Just type “ul>li.lego{Awesome}*10” then hit tab and you’ll get:

<ul>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
</ul>

Or you can get super fancy and nest all sorts of things. Give something like this a go. Type “div.awesome>(header>ul>li.item$*5>a{Awesome thing $})+footer>p{Awesome}” and hit tab. Boom you get:

<div class="awesome">
  <header>
    <ul>
      <li class="item1"><a href="">Awesome thing 1</a></li>
      <li class="item2"><a href="">Awesome thing 2</a></li>
      <li class="item3"><a href="">Awesome thing 3</a></li>
      <li class="item4"><a href="">Awesome thing 4</a></li>
      <li class="item5"><a href="">Awesome thing 5</a></li>
    </ul>
  </header>
  <footer>
    <p>Awesome</p>
  </footer>
</div>

As you can see, once you learn the basic structure, everything is awesome with Emmet.