Untitled RSS Feed

Let's build a game with Tensorflow.js in 10 minutes 🎮

Thu, 19 Sep 2019 00:00:00 GMT

I’ve been looking into Tensorflow.js recently and have found the whole concept fascinating. Previously I wrote a piece on how to get started, and I intent to write more around all aspects of creating a new model, transfer learning with it, or just use pre-trained models for inference.

Let’s review our plan 🗺️

Today we want to:

Find a game written with JavaScript
Find a model which we can control the game with
Mix these two together and have fun 🤪
Not complain about the code we just wrote to spoil the fun 😁

Disclaimer

I am not showing any best practices here around the JavaScript code. It is copy pasted from somewhere else and our purpose is to make it work.

Finding the game

The very first thing I did when I was creating one of the demo’s for my talk on AI and JavaScript was to search for a game written with JavaScript. I didn’t want a complex game, just something lightweight which could be customised easily.

PS: You can now watch my talk 👇🏼

After searching for JavaScript game in Google, I found this game on W3schools:

The game is very simple. You just need to guide the red cube between incoming green bars. If it touches any of the green bars, the game is over.

Finding the right model

For this game, what I could think of really quick was SpeechCommand. This model recognises the spoken commands comprised of simple words. For now it only has 18 words, but we wouldn’t even need that since all we need is directions (up, down, left, and right).

This model is using the WebAudio API to listen to your voice through your microphone.

Let’s code 💻

First thing first, we need to get the code behind our game. Thankfully, it’s on the same page we found the game.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            myGameArea.stop();
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].speedX = -1;
        myObstacles[i].newPos();
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function moveup() {
    myGamePiece.speedY = -1; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}
</script>
<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
</div>

<p>The score will count one point for each frame you manage to "stay alive".</p>
</body>
</html>

Creating the project structure

Let’s setup our project structure at this point. We will need the following files:

package.json
index.html
game.js
index.js

In our package.json we will need some dependencies and a script command to run the app.

{
...
  "dependencies": {
    "@tensorflow-models/speech-commands": "^0.3.9",
    "@tensorflow/tfjs": "^1.2.8"
  },
  "scripts": {
    "watch": "cross-env NODE_OPTIONS=--max_old_space_size=4096 NODE_ENV=development parcel index.html --no-hmr --open"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "babel-core": "^6.26.3",
    "babel-polyfill": "~6.26.0",
    "babel-preset-env": "~1.6.1",
    "babel-preset-es2017": "^6.24.1",
    "clang-format": "~1.2.2",
    "cross-env": "^5.2.0",
    "eslint": "^4.19.1",
    "eslint-config-google": "^0.9.1",
    "parcel-bundler": "~1.10.3"
  },
...
}

I am using parcel here since it’s easy to setup and it just works. Besides, most of the demo’s on Tensorflow.js models GitHub repository are using parcel.

Your project structure should look like:

Converting the game code into a module

For now, let’s not focus on the code that much since we need to do some refactoring. First thing first, let’s separate our JavaScript code into a separate file. With doing so your HTML should look like:

<!DOCTYPE html>

<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>TensorFlow.js Speech Commands Model Demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      canvas {
        border: 1px solid #d3d3d3;
        background-color: #f1f1f1;
      }
    </style>
    
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

Since we are going to use SpeechCommand module, we need to change our JavaScript code to support that. Create a file called main.js and paste the below code in it.

var myGamePiece;
var myObstacles = [];
var myScore;

export const startGame = function() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 40);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        let ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }
    this.crashWith = function(otherobj) {
        let myleft = this.x;
        let myright = this.x + (this.width);
        let mytop = this.y;
        let mybottom = this.y + (this.height);
        let otherleft = otherobj.x;
        let otherright = otherobj.x + (otherobj.width);
        let othertop = otherobj.y;
        let otherbottom = otherobj.y + (otherobj.height);
        let crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    let x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (let i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            myGameArea.stop();
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(180)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (let j = 0; j < myObstacles.length; j += 1) {
        myObstacles[j].speedX = -1;
        myObstacles[j].newPos();
        myObstacles[j].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();    
    myGamePiece.update();
}

export const everyinterval = function(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

export const moveup = function() {
    myGamePiece.speedY = -1; 
}

export const movedown = function() {
    myGamePiece.speedY = 1; 
}

export const moveleft = function() {
    myGamePiece.speedX = -1; 
}

export const moveright = function() {
    myGamePiece.speedX = 1; 
}

export const clearmove = function() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}

All I did here is change some of those functions to be constant and export what need later on. Now let’s write our index.js and import the speech command model.

import * as speechCommands from "@tensorflow-models/speech-commands";

Next, import the functions we will need to play the game:

import { startGame, moveup, movedown, clearmove } from './main';

I am not going to use left and write, but you could totally use them too. Next up, we need to create an instance of the model and initialise it. Since loading the model requires an async call, we will use an IIFE (Immediately-Invoked Function Expression):

const recognizer = speechCommands.create("BROWSER_FFT");

(async function() {
  await recognizer.ensureModelLoaded();

  console.log(recognizer.wordLabels());

  startGame();
})();

We call start game once the model is loaded. At last, we need to call the listen method on our instance to be able to listen to commands:

const suppressionTimeMillis = 1000;
const allowedCommands = ['up', 'down'];

recognizer
  .listen(
    result => {
      checkPredictions(recognizer.wordLabels(), result.scores,
      2, suppressionTimeMillis);
    },
    {
      includeSpectrogram: true,
      suppressionTimeMillis,
      probabilityThreshold: 0.8
    }
  )
  .then(() => {
    console.log("Streaming recognition started.");
  })
  .catch(err => {
    console.log("ERROR: Failed to start streaming display: " + err.message);
  });

const checkPredictions = (
  candidateWords,
  probabilities,
  topK,
  timeToLiveMillis
) => {
  if (topK != null) {
    let wordsAndProbs = [];
    for (let i = 0; i < candidateWords.length; ++i) {
      wordsAndProbs.push([candidateWords[i], probabilities[i]]);
    }
    wordsAndProbs.sort((a, b) => b[1] - a[1]);
    wordsAndProbs = wordsAndProbs.slice(0, topK);
    candidateWords = wordsAndProbs.map(item => item[0]);
    probabilities = wordsAndProbs.map(item => item[1]);
    console.log(wordsAndProbs);
    // Highlight the top word.
    const topWord = wordsAndProbs[0][0];
    if(allowedCommands.includes(topWord)) {
      if(topWord === 'up') {
        moveup();
        setTimeout(() => clearmove(), 850);
        console.log('up');
      } else {
        movedown();
        setTimeout(() => clearmove(), 850);
        console.log('down');
      }
    }
    
  }
}

This will start our game and also listens to your mic. You will need to give permission to your browser to use your mic if you haven’t done already.

Listen method returns a promise which will have a result object. When we get the result, we will call our little helper function to check which words are recognised an fire an action based on that.

Check the live demo here.

Improvement

If you’ve had a look at the documentation on SpeechCommand repo, you can see when calling speechCommands.create(), you can specify the vocabulary the loaded model will be able to recognize. This is specified as the second, optional argument to speechCommands.create(). We can use that to limit the words to only directional:

const recognizer = speechCommands.create('BROWSER_FFT', 'directional4w');

Now if you try the model, it will be more accurate because it only focuses on directional words (up, down, left, and right).

Summary

That’s it. This is all you need to do in order to control this mini game using your voice with Tensorflow.js SpeechCommand model.

Now go and create something fun with those pre-trained models and make sure to check their example repository.

For more inspiring demo’s check aijs.rocks which is built by Asim Hussain, Eleanor Haproff and Osama Jandali.

aria-live, accessibility tips 🦮

Sat, 14 Sep 2019 00:00:00 GMT

Last week I talked about JavaScript and AI using Tensorflow.js at ComponentsConf in Melbourne, Australia. The line up was a killer and I got to listen to some amazing talks, one of which got me hooked. It’s about accessibility and how we can be more inclusive by doing very little at our end.

Background

We all create websites or applications which is used by many people who can see our pages, however, we don’t realise these are also consumed by people who can’t see them and use assistive technologies such as screen readers.

I am not talking about static pages here, we’re dealing with dynamic pages where an area in the page gets changed without refreshing the whole page thanks to our friend JavaScript. This can be updating the ticket’s price list, or updating the search result on the fly.

When this happens screen readers usually are not aware, unless we let them know there was an update on the page and that’s where aria-live regions come to the rescue.

How does `aria-live` works?

aria-live lets us mark a part of the page as “live”, which means updates to this area should be communicated to the user regardless of where in the page they have focused on rather than requiring the user to be on that area when the update happens. This means they won’t miss the updates even if they’re currently reviewing other parts of the page.

For example, if the user clicks a button and an action is done, the status message which appears as a result should be communicated to them.

In its simplest form, an aria-live looks like this:

<div class="status" aria-live="polite">Thanks for your feedback.</div>

There are three values which can be used with aria-live attribute, polite, assertive, and off.

It doesn’t make sense? Let’s see it in action

To demonstrate how it all works, I’ve created a CodePen with three regions for each of the above values.

Here is the code:

<h1>Polite</h1>

<button onclick="updateContent('msg')">To view the updates, click this button!</button>
<br/> <br/>

<div id="msg" role="region" aria-live="polite" id="msg"></div>

<h1>Assertive</h1>

<button onclick="updateContent('msg2')">To view the updates immediately, click this button!</button>
<br/> <br/>

<div id="msg2" role="region" aria-live="assertive"  id="msg"></div>
<h1>Off</h1>

<button onclick="updateContent('msg3')">No updates will be announced, so don't click this button 😂!</button>
<br/> <br/>

<div id="msg3" role="region" aria-live="off" id="msg"></div>

And a simple function to simulate the content change:

function updateContent(id) {  
  document.querySelector(`#${id}`).textContent = 'Content changed: ' + Math.random()
};

Let’s be polite 😊

aria-live="polite" tells assistive technology to alert the user to this change when it has finished whatever it is currently doing. It’s great to use if something is important but not urgent, and accounts for the majority of aria-live use.

You can see how it works in the video below using a demo I created on CodePen. In this demo I am changing the content of the message box with each click with a random number. You can see that windows narrator reads the current message before reading the next one, although the message has changed.

Your browser does not support the video element.

Holly molly, something urgent happened ⚠️

aria-live="assertive" tells assistive technology to interrupt whatever it’s going on and alert the user to this change immediately. This is only for important and urgent updates, such as a status message like “There has been a server error and your changes are not saved; please refresh the page”, or updates to an input field as a direct result of a user action, such as buttons on a stepper widget.

You can see that in the assertive aria-live region, the narrator reads the next message as soon as it appears, even if it means it cuts off the previous one.

Your browser does not support the video element.

Turn it off and save energy 😁

aria-live="off" tells assistive technology to temporarily suspend aria-live interruptions. If the updates are finished, you should definitely set the aria-live region to off. This will help the assistive technology to stop tracking changes of the dynamic content.

Making sure the `aria-live` regions work effectively

This is a powerful tool, but you know the saying:

With great power, comes great responsibility.

Include the area from beginning

The first and foremost consideration is that you have to make sure the region is there on page load and it’s empty. This is not a hard and fast rule, but many issues might occur if the region is not there initially.

❌ Don’t do:

<div class="dynamic-content"></div>

<script>
document.querySelector(".dynamic-content").innerHTML = `<div id="msg" aria-live="polite">
    Content changed!
</div>`
<script>

✔️ Instead:

<div class="dynamic-content">
  <div id="msg" aria-live="polite"></div>
</div>

<script>
  document.querySelector('#msg').textContent = 'Content changed!'
</script>

Want to hide the text but get it announced 😲?

If you want screen readers to announce your updates but would like to visually hide the text on screen, you have a bit of problem with usual wats like display: none or visibility: hidden. Both of these would cause the updates to be missed.

Another historical way was to add text-indent: -9999px to your element, but that has some performance issues since the browser WILL draw a 9999 pixel box on your (even worst on mobile).

So what should we do? Well, there are two ways you can do this:

Using overflow: hidden and small width and height:

.hide-text { 
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Or using overflow: hidden and text-indent: 100%:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

These are the most efficient ways of hiding text on screen, while keeping the performance in check.

`aria-atomic`

This attribute indicates that the entire region should be considered as whole when communicating updates. Imagine a date widget consisting of day, month and year which has aria-live=assertive and aria-atomic=true. When the user changes the value of the day, the whole date will be read again.

<input type="number" value="02" onchange="updateDate('day', event)"/>/
<input type="number" value="12" onchange="updateDate('month', event)"/>/
<input type="number" value="1983" onchange="updateDate('year', event)"/>

<div class="user-date" aria-live="assertive" aria-atomic="true">  
  <span id="day">02</span>/
  <span id="month">12</span>/
  <span id="year">1983</span>
</div>

And for its JavaScript:

function updateDate(type, event) {
  if(event && event.target && event.target.value) {
    document.querySelector(`#${type}`).textContent = event.target.value;
  }
}

Now if you change the stepper in any of the inputs, the whole date should be read.

⚠ The above did not work with windows narrator. However, ChromeVox, a Chrome extension I use for accessibility testing, worked as expected.

What else?

There are other useful attributes you might want to look at:

aria-relevant: which indicates what types of changes should be presented to the user.
aria-busy: which lets you notify assistive technology that it should temporarily ignore changes to an element, such as when things are loading.

Summary

We discussed the what, the how and the why of aria-live so far. We also saw how to hide the text without losing the ability to communicating updates to users, and furthermore, saw how to make the whole area atomically live using aria-atomic.

Hope this helps you with your journey to make web a more inclusive place for everybody, and happy coding.

Let's get to know the ResizeObserver 👋🏼

Thu, 05 Sep 2019 00:00:00 GMT

Resize Observer API is another great JavaScript API which lets you get notified when the size of an element changes. Think window.onresize but on element level.

The what

The most common case when the size of an element could change is when the viewport is resized. Or in terms of mobile device the orientation changes.

Prior to ResizeObserver you would have to hook into window.onresize or use window.resize to be able to figure out whether an element’s size has changed or not. This was very inefficient since it would trigger so many events.

Another scenario where this API can come handy is when you add/remove an element dynamically, in which case the size of the parent changes and not the viewport.

The ResizeObserver interface reports changes to the dimensions of an Element’s content or border box, or the bounding box of an SVGElement.

The content box is the box in which content can be placed, meaning the border box minus the padding and border width. The border box encompasses the content, padding, and border.

Enough talking, shoe me the code 😉

In its simplest form, you can use ResizeObserver by just instantiating a new instance of the API and pass a call-back to it.

const myObserver = new ResizeObserver(entries => {
  // iterate over the entries, do something.
});

By itself, this wouldn’t help much, however if you call the observe method on the instance and give it an element, it will start capturing it’s size changes and calls your call-back function.

const myEl = document.querySelector('.my-element');

myObserver.observe(myEl);

Now whenever my element’s size changes, it will trigger the call-back and voila.

call-back input object

When you pass a call-back to the constructor of the API, what you get is an array of objects which look like below:

As you can see, the object you get has two properties, contentRect and target. Target is obvious, it’s the DOM element itself. The width and height values on the contentRect don’t include the padding unlike the element’s getBoundingClientRect.

Demo

You can do a lot with this API, from changing the font size based on the element’s size to change the styling when the size changes. Below is one where I’m changing the border radios based on element’s size. Resize your window and see what happens 😎.

See the Pen ResizeObserver by Yaser Adel Mehraban (@yashints) on CodePen.

Demo explained

The demo is not that complex, we have a div which is got two children:

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
</div>

We add a bit of styling so we can see the changes:

.boxes {
  display: flex;
  flex-wrap: wrap;
  width: 40vw;
  margin-bottom: 50px;
}
.box {
  height: 200px;
  flex-shrink: 1;
  flex-grow: 1;
  margin: 10px;
  box-sizing: border-box;
  border: 3px solid black;
}

Once we’re done, we add our little snippet to get the observer notify us of changes:

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius =
      Math.max(0, 250 - entry.contentRect.width) +
      'px'
  }
})
console.log('horay');
// Only observe the 2nd box
ro.observe(
  document.querySelector('.box:nth-child(2)')
)

In the call-back, we simply change the border radios based on width of the element, and voila.

Browser support

Browser support is there for most major browsers, we have Chrome 64+, Firefox 69+, Microsoft Edge 76, and Safari 13-TP supporting the API, but a poor support on mobile browsers.

Have fun exploring the API and do some cool stuff with it 😍.

Let's write HTML like a pro 😎

Tue, 03 Sep 2019 00:00:00 GMT

How often have you wrote a block of HTML without realising the code you’ve written might not be ideal?

The why

HTML has always been that kid in the corner where nobody talks to because JavaScript and CSS have always stolen the attention.

Now keep that picture in your mind cause I am going to go through some simple tips which together, make a difference and help bring that kid in the centre again 😁.

These are part of a perspective of creating a clean, maintainable and scalable code, that will make a good use of the semantic markup elements of HTML5 and that will render correctly in supported browsers.

So just to stop me from going on and on about why, let’s have a look at the what.

DOCTYPE

Starting from the top of your index.html, make sure you’re declaring a DOCTYPE. This will activate the standard mode in all browsers and let them know how the document should be interpreted. Keep in mind that DOCTYPE is not an HTML element.

For HTML5 it looks like:

<!DOCTYPE html>

Note: If you’re using a framework, this is prepopulated for you. If not, I highly recommend using code snippets like Emmet which is available in VS Code.

Curious to find out more about other doc types? Have a look at this reference document.

Optional tags

Some tags are optional in HTML5, mostly because the element is implicitly present. Believe it or not, you can omit the <html> tag and the page will render just fine.

<!DOCTYPE HTML>

  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

Above is a valid HTML, however, there are some cases where you can’t do so, such as tags followed by comments:

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

Above is invalid because the parse tree changes due to comment being outside of <html> tag.

Closing tags

You should always consider closing your tags because some browsers will have trouble rendering your page. However, it’s recommended to keep those for readability and other reasons which I will go through later.

<div id="example">
  <img src="example.jpg" alt="example" />
  <a href="#" title="test">example</a>
  <p>example</p>
</div>

Above are all valid tags. But there are also some exceptions 👇🏼 to this rule.

Self-closing tags are valid, but not required. These elements include:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

Note: Normal elements can never have self-closing tags.

<title />

Above is invalid obviously.

Charset

Define your character set upfront. It is best practice to put it right on top inside <head> element.

<head>
  <title>This is a super duper cool title, right 😥?</title>
  <meta charset="utf-8">
</head>

Above is invalid and title wouldn’t render properly. Instead move the character set deceleration on top.

<head>
  <meta charset="utf-8">
  <title>This is a super duper cool title, right 😃?</title>  
</head>

Language

Another reason to not omit the optional tags is when using attributes. In this case you can and you should define the language of your web page. This is really important for accessibility and searching.

<html lang="fr-CA">
  ...
</html>

Title

Never, never, ever omit the title tag. It’s super bad for accessibility, and I will personally never use your site because I can’t find it 2 seconds after opening it and 20 more tabs later 😁 (the browser tab won’t have anything to show).

The `base` tag

This is a really useful tag which should be used with cautious. This will set the base URL for the app. Once set, all links will be relative to this base URL, which might cause some unwanted behaviour:

<base href="http://www.example.com/" />

With above set, href="#internal" will be interpreted as href="http://www.example.com/#internal".

Or href="example.org" will be interpreted as href="http://www.example.com/example.org".

Description

This meta tag is very useful although it’s not strictly part of best practices. This is super useful for search engines when they crawl your site.

<meta name="description" content="HTML best practices">

I have a post you can check on SEO which has been super popular.

Semantic tags

Although you can create your UX engineer’s wire frames with just divs, it doesn’t mean you should. Semantic HTML gives meaning to your page rather than just presentations. Tags like p, section, h{1-6}, main, nav, etc are all semantic tags. If you use a p tag, users will know this represents a paragraph of text and browsers know how to represent them.

On the other hand, tags like i and b do not represent semantics. They just try to define how the text should look like. Semantic HTML is way beyond the scope of this article. But you should defo check them out and use them as if they’re your pen when you’re writing. Can you write without a pen ❓ (or mouse 😁)?

`hr` shouldn’t be used for formatting

<hr> is not a formatting element, so stop using it to format your content. In HTML5 this tag represents a thematic break of your content. A proper use of it might look like this:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head 😂</p>

Be careful when you use the `title` attribute

The title attribute is a powerful tool which can help clarify an action or the purpose of an element on the page like a tooltip. However, it’s not interchangeable with other attributes like alt on an image.

From the HTML5 spec:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Single or double quotes

I’ve faced many code bases where there are a mix of both in the markup. This is not good especially if you are using a framework which depends on single quote like php and also when you're using a single quote in a sentence just like I did now. Another reason is to keep it consistent which is always good. Don’t do:

<img alt="super funny meme" src='/img/meme.jpg'>

Instead:

<img alt="super funny meme" src="/img/meme.jpg">

Omit boolean values

When it comes to having boolean values for attributes, it’s recommended to omit those as they don’t add any value and also increase your markup’s weight.

<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead 👇🏼 -->

<audio autoplay src="podcast.mp3">

Omit type attribute

There is no need to add type attribute to scriptand style tags. You also get a validation error from some services such as W3C’s markup validation tool.

Validate your markup

You can use services like W3C’s markup validation to make sure you have a valid markup 😍.

Say no to inline style ☢

What you write in your HTML file is the content, how it looks like is presentation. Leave the presentation to CSS and don’t use inline styles. This will benefit both your developers and browsers to digest your mark up.

Summary

These are just a tip of the iceberg in terms of small things to keep in mind when writing markup. There are heaps of good resources you can have a look for deeper insights, and I highly recommend you to skim through them at least once.

Hope you’ve enjoyed the read. And stay classy 😊, with your markup 😁.

JavaScript modules, the good, the bad and the ugly 🧐

Tue, 27 Aug 2019 00:00:00 GMT

If you ever stumbled upon a piece of vanilla JavaScript code and wanted to refactor it to a module, or have a CommonJS module and want to convert it to ES6 Modules, you might have faced a couple of tricky situations. I had to go through one of those recently and stumbled upon some differences/points that you need to be aware of when working with modules. As always, thought sharing these would help someone else, so here we go 😊.

CommonJS & `require`

This is the most common type of code seen on many open source projects before ES6 was put on earth by the GODS 😁.

Usage

const _ = require('underscore'); // from an npm package 

const reverseString = require('./reverseString.js'); // from internal module

Definition

In the reverseString.js you would need to write something like this to get it working:

const reverseString = (sentence) => sentence.split("").reverse().join("");

module.exports = reverseString;

The only thing you need to pay attention to is that the value you assign to module.exports is the same you get when using require. And if you want to use the function you just exported:

const reverseString = require('./reverseString.js');

console.log(reverseString("madam")); // madam, gotcha 😂

Multi export

In real life situations, we will need to export more than one function from our module. This is as easy as wrapping all of those in an object. Imagine you have a file called stringHelpers.js:

const reverseString = (sentence) => {...};
const toUpperCase = (sentence) => {...};
const convertToCamelCase = (sentence) => {...};


module.exports = {
  reverseString: reverseString, 
  toUpperCase, // you can omit the assignment if the name is equal
  toLowerCase: convertToLowerCase,
};

As you can see, the value of the module.exports will be an object, which means when using it, you will have to use the properties on the object:

const stringHelpers = require('./stringHelpers.js');

console.log(stringHelpers.reverseString('racecar')); // racecar 🤣

We can also rewrite our module in a different way:

module.exports = {};

module.exports.reverseString = () => {...};
module.exports.toUpperCase = () => {...};
module.exports.toLowerCase = () => {...};

These two ways of creating the module are exactly the same, it’s up to you which convention to follow.

ES6 Modules

ES6 Modules is created to create a format which both CommonJS and AMD (Async Module Definition) users are happy with. In their simplest form compared to CommonJS approach, ES6 Modules always export an object.

const reverseString = (sentence) => {...};

export default reverseString;

Default export

One of the major benefits of having modules are to hide the internal implementation details and expose only what’s needed. In this case I am just exporting one function, and in addition I am exporting it as default. When you export something as default, you get to import it with their original name or even an alias. Plus you get to omit the curly braces.

import reverseString from './reverseString.js';

import defaultExport from './reverseString.js';

console.log(reverseString('madam')); //madam
console.log(defaultExport('madam')); //madam

If you look into the object which is exported from the file, you will see below object:

{
  default: (sentence) => {...}
}

You can also export the function directly:

export const reverseString = (sentence) => {...};

Which will result in:

{
  reverseString: (sentence) => {...}
}

In which case you will need to use its name to be able to import it, plus you have to use curly braces:

import { reverseString } from './reverseString.js';

console.log(reverseString('madam')); //madam

Mixed export

You can also have a default export alongside named ones:

export const reverseString = (sentence) => {...};
export const toUpperCase = (sentence) => {...};
const convertToCamelCase = (sentence) => {...};

export default convertToCamelCase;

Which then will give you:

{
  reverseString: (sentence) => {...},
  toUpperCase: (sentence) => {...},
  default: (sentence) => {...}
}

And when importing, you can use their names, or import everything in one object:

import convertToCamelCase, { reverseString, toUpperCase } from './stringHelpers.js';

// or

import * as stringHelpers from './stringHelpers.js';

Now to be fair, you can change the name of a named export after exporting too:

import { reverseString as madeUpName } from './stringHelpers.js';

Importing the whole module

Sometimes you have a block of code which needs to be executed without the need to access any of the module’s internal values. In this case you can import the whole module just to have its global code executed:

// other code or possible exports

window.addEventListener("load", function() {
    console.log("Window is loaded");
});

Then import the whole module:

import './loadEventListener.js';

Why should you use modules 😍?

There are many benefits when it comes to use ES6 Modules (or even CommonJS format). I will go through some of those here:

Ease in sharing the code (both internal and between projects).
Independant testability.
Having ability to hide the implementation details.
Single responsibility principle, code can be split in smaller chunks with a specific purpose.
Simplifying dependency detection/injection.
Defining clear interface for a block of code.
Can be used alongside a dependency injection system to load a block of code.
Can help the tree shaking to eliminate unused code.

What’s the catch 🤔?

There are a few points you should be aware of while using ES6 Modules:

They are running in strict mode by default (you don’t need to have use strict anymore).
Top level value of this is undefined.
Top level variables are local to the module.
ES6 Modules are loaded and executed asynchronously. This means the browser will finish parsing and loading the HTML first, and then executes the module code. The load can be in parallel or be done beforehand using link rel=preload.

Trick or treat?

This one is probably my favourite part. You can dynamically load the module and execute it. This is done by using the import keyword as a function rather than normal command.

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

Or even better:

const module = await import('/modules/my-module.js');

Wow that’s great, but why 🧐?

Suppose you have an application which has different user experience or behaviour for mobile vs desktop. This problem can’t be solved just by having a responsive design, so you build a page renderer which loads and renders each page based on visitor’s platform.

Technically this is just a strategy pattern where the page renderer decides which module to load at run time. This can be solved easily using dynamic imports. There are many other use cases out there which can be benefited from dynamic imports.

However, with great power, comes great responsibility. You need to be careful when to use this fantastic feature as it has its own drawbacks. At the least, you lose automatic bundling of lazy-loaded chunks, type inference and more.

How can I use them?

I’ve shown you many examples in this article how to consume a module in another file or module. However, sometimes you need to consume them in browser (from HTML). Chrome, Safari, Firefox and Edge all support ES6 Modules, however you need to change your script tag’s type from script to module:

// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}

<script type="module">
  import { tag } from './html.js'

  const h1 = tag('h1', ' Hello Modules!')
  document.body.appendChild(h1)
</script>

Or just simply import the module file into another file and use external reference:

// app.js
import { tag } from './html.js'

const h1 = tag('h1', ' Hello Modules!')
document.body.appendChild(h1)

<script type="module" src="app.js"></script>

Tip: There are still some old browsers out there cough IE11 cough which doesn’t support it, so make sure you have a back up plan. This can be done using nomodule attribute.

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

Summary

We had a look at before and after ES6 Modules and saw some of the differences in syntax. We saw the power of the module system in JavaScript and its benefits when it comes to using it in larger code bases. And at last we reviewed dynamic import which has massive potential but should be used with cautious.

Hope you’ve enjoyed the read and till next time 👋🏼.

Native lazy loading is landed in Chrome

Sun, 25 Aug 2019 00:00:00 GMT

Lazy loading resources is one of the important parts of web performance tuning, simply because offscreen resources can add a lot of weight to your page if loaded eagerly.

Intro

I’ve gone through many tips and tricks in my image optimisation article which is one of the series I’ve done on web performance. However, when it comes to lazy loading, I mentioned that you have two options:

Use data-src attribute on <img> tag and hook into either of scroll, resize, or orientationChange to figure out when to replace the data-src with src to make the call.
Use IntersectionObserver API to asynchronously observe the changes and make the call when the item in is the viewport.

The good news is, from Chrome 76, you can use the loading attribute of an image tag to tell the browser how to load the image.

In fact it’s so simple that you won’t believe it 🤯:

<img src="../path/to/image.jpg" loading="lazy">

I’ve created a demo to show you how it works, look closely on the network tab.

Here is a CodePen which contains the code.

I’ve just used below bash script to hack together the HTML 🤷🏽‍♂️.

for i in {400..499}; 
> do echo "<img loading='lazy' 
src='https://placedog.net/${i}/${i}' height='${i}' width='${i}' />"; 
> done

About the attribute

Currently the images are fetched with different priority in Chrome, the ones which are not in the viewport have less priority. But they’re fetched as soon as possible regardless.

With this new loading attribute, you can completely defer the loading of offscreen images (and iframes) to when they’re reached by scrolling:

<img src="../path/to/image.jpg" loading="lazy">
<iframe src="https://placedog.net" loading="lazy"></iframe>

You can use three values with this attribute:

auto: Default behaviour of the browser, equal to not including the attribute.
lazy: Defer loading of resources until it reaches a calculated distance from viewport.
eager: Load the resource immediately

My Chrome version is 76.0.3809.100 as of writing this post, but if you have any of the previous version below 76, you can activate this using flags:

For images 👉🏽 chrome://flags/#enable-lazy-image-loading
For iframes 👉🏽 chrome://flags/#enable-lazy-frame-loading

Feature detection

If you want to use this attribute today, you can use below code to feature detect it and have a polyfill in place such as loading-attribute-polyfill.

if ('loading' in HTMLImageElement.prototype === true) {
  // use the attribute
} else {
  // use polyfill
}

Prevent content reflow

Since the images are lazy loaded, if you haven’t set width and height for your image, the content might reflow when the image is loaded and fill its place. To prevent that to happen, simply set the required values on the image tag by either style or directly using width and height attributes:

<img src="../path/to/image.jpg" 
loading="lazy" width="200" height="200">

<img src="../path/to/image.jpg" 
loading="lazy" style="height:200px; width:200px;">

iframe loading

The same behaviour is applied to iframe when it’s used with loading attribute. However, there are times when an iframe is hidden for analytics purposes. Examples are they are very small (less than 4px in width and height), or they have display:none or visibility: hidden applied to them, or simply is offscreen using negative margin.

In these cases it won’t get lazy loaded even if you have used the attribute.

What’s the catch

There are few points you have to consider when using lazy loading in general. Plus there are a few things you can’t do with the loading attribute as of now.

Can’t do

You can’t change the threshold to load the resource for now since it’s been hard coded in the source.
This can’t be used with CSS’ background image for now

Catches

This might affect the third party ads since they will be lazy loaded too
There will be side effect when printing 😉, as in the lazy loaded resources won’t be printed. However, there is an open issue you can follow.

What about other browsers?

For now, Chrome is the only browser supporting this feature. Although there is an open bug for Firefox and nothing for Edge and IE.

Happy lazy loading everybody and make sure not to miss the catches 👋🏽.

Let's setup a VPN server, for free, on AWS, under 5 min

Wed, 21 Aug 2019 00:00:00 GMT

Sometimes you want to connect to internet without someone watching you. This can be due to restrictions applied by governments, ISPs, etc. Maintaining privacy while using internet is very important to some people, and for me personally, the experience was to bypass a ridiculous censor on sites like Twitter and software like Telegram.

So I thought how hard can it be to setup a VPN server (because I didn’t want to pay $5 per month) for a web developer. After Googling a bit, I found out you could easily do this on AWS for free using OpenVPN. I started setting it up and a couple of mins later I had it up and running.

OpenVPN is a popular open-source tool that is well tested and give you a production ready VPN solution.

So just to not forget how I did it, as usual I thought let’s write up something, and who knows, maybe it was useful to you too 😉.

So are you ready?

AWS console

If you don’t have an account on AWS (Amazon Web Services), go ahead and create one. It’s free, but you will need to have your credit card info handy.

Once signed up, login and under the services menu look for EC2 (you can type and it will filter the services as you type).

Click on EC2 and you will be redirected to its dashboard. Click launch instance button under create instance section.

Select the OpenVPN

Many articles will walk you through setting up an new Linux VM and installing the OpenVPN manually. However, things have changed and some lovely people have put a ready to use service in the AWS marketplace, so we will choose that.

Once in the dashboard, click AWS Marketplace menu from left and type OpenVPN, then press enter.

Click on select button on the first one with the free tier eligible badge.

Selecting instance type

On the next page click continue and select t2.micro from instance type list.

At this stage click on Review and Launch button.

Launch the instance

Select general purpose SSD from the pop up and click next. Now click Launch and you’ll see a pop up asking you to select a key pair. This is to let you access the instance later on.

Select create a new key pair (or an existing if you already have one), enter a name and click download key pair.

Save the .pem file somewhere safe as this is like a back door to your server 😁. Click Launch Instance and wait for the instance to go to running state.

Click on view instance to see the instance list.

Select your instance and click connect.

Preparation

You’ll see a set of instructions on a popup on how to connect to your instance.

In the instruction set they tell you to use PuTTY to connect to your instance using SSH. However, I already have Ubuntu set up in WSL (windows subsystem for Linux) and we can use that. Otherwise you can use PuTTY or even the web browser connection.

Before we do anything we need to set the permissions for our private key 👉🏽 .pem 👈🏽 file, otherwise it wouldn’t allow you to connect. If you’re using a Linux or Mac machine, simply run the following command:

chmod 400 {name-of-file}.pem

For the rest of you who are like me, right click on the .pem file and click Security > Advance. Then change the owner to yourself, click disable inheritance and remove all permissions. Click add and add yourself and give full control.

Connecting

Once that’s done, open a command prompt, type bash and then enter the following command:

sudo ssh -i "{name-of-file}.pem" openvpnas@{serveraddress}.compute.amazonaws.com

Don’t forget to replace the file name with whatever you’ve chosen previously and replace the name of server with what you got from the instruction popup.

Type yes for the agreement, then just hit enter to have all the defaults confirmed. Once you reached to the end, change the password for the user which will be used to login:

sudo passwd openvpn

Enter a new password twice and you’re all set. Open a browser window and type https://{server address}:943/admin and login with openvpn and the password you just set.

Tidy up a few settings

Once in the admin dashboard of OpenVPN, click configuration and apply the following changes:

Change the toggle for Should client Internet traffic be routed through the VPN? to Yes
Change the toggle for Have clients use specific DNS servers to Yes
Select custom DNS server and set the first box to 1.1.1.1 (CloudFlare DNS 🦄) and the second to 8.8.8.8

Now save the settings, wait for the pop up on the top and click apply the changes to server.

You’re good to go

You’re all set. You can now connect to your very own VPN server and enjoy a private surf of the net 😎. On the first page of the browser window you opened earlier, there are five options to download the OpenVPN client for different platform. If you click on windows, you will get an installer with your server address pre-configured. Just enter your user name and password and voila.

Hope this will help you if you need a VPN server setup for free.

6 points you need to know about async & await in JavaScript

Sat, 17 Aug 2019 00:00:00 GMT

If you have faced a code like below, then this article will help you in multiple ways 😁.

fetchPizzas()
  .then((pizzas) =＞ {
    return sortByToppings(pizzas)
      .then((pizzas) =＞ {
        return checkDeliveryOptions(pizzas)
          .then((pizzasWithDelivery) =＞ {
            return checkBirthdayGift(pizzasWithDelivery)
              .then((pizza) =＞ {
                return sendToCustomer(pizza);
              });
          });
      });
  });

A little bit of background

There are many a times where we have a bunch of tasks to be executed sequentially. The examples are from File handling to calling databases multiple times based on the result of the previous call. Or calling multiple APIs in a sequence where one call is dependenat on another.

Prior to introduction of async/await, many used callbacks alongside setTimeOut to simulated the behaviour they wanted (aka callback hell). Later on people started to use promises which made the code much more readable but they would end up in the same place when the number of calls where high (aka promise hell).

Async functions

A function in JavaScript is async when it operates asynchronously via the event loop, using an implicit promise to return its result. Furthermore, the type of its result should be an AsyncFuncton object.

This function is nothing but a combination of promises and generators. I will not going into details of generators, but they usually contains one or many yield keywords.

Now lets see the async function in action. Assume we have a function which returns a string:

function hi() {
  return 'Hi from JavaScript';
}

hi(); // 'Hi from JavaScript'

If we put async in front of the function, then it no longer returns string, it will be a promise which is wrapped around the string value automatically.

async function hi() {
  return 'Hi from JavaScript';
}

hi(); // Promise {<resolved>: "Hi from JavaScript"}

Now in order to get the value from the promise we act like before:

hi().then(console.log); // 'Hi from JavaScript'

You might be wondering how this can help to solve the promise hell. Just bare with me and we’ll get there step by step with examples so it’d be clear when we’re finished.

Await

The await makes JavaScript engine to wait until a promise is resolved/rejected and returns it’s result. This keyword can only be used inside an async function.

const doSomething = async () => {
  console.log(await hi())
};

// 'Hi from JavaScript'

You might think since await forces the JavaScript engine to wait, it will have some cost on CPU. But that’s not the case because the engine can perform other scripts while waiting for the promise to get resolves/rejected. Plus this is way more elegant that using promises and .then.

Warning: If you try to invoke an async function using await inside a normal function, you will get a syntax error.

function doSomething() {
  await hi(); // Uncaught SyntaxError: await is only valid in async function
}

A small catch

Most people who start working with async/await forget that they can’t invoke an async function on top level code. This is due to the fact that we can’t have await inside a normal function and the top level functions are normal by default.

let response = await hi(); // syntax error in top-level code
console.log(response);

What you can do however, is to wrap your code in an async IIFE (immediately invoked function execution) and call it right there:

(async () => {
  let response = await hi(); 
  console.log(response); // 'Hi from JavaScript'
  ...
})();

Error handling

As I said before, most async functions can be written as a normal function with promises. However, async functions are less error-prone when it comes to error handling. If an awaited call fails, the exception is automatically caught and the Error object will be propagated to the caller using the implicit return promise.

Prior to this, we had to reject the promise which was returned from the normal function and use a .catch in the caller. I’ve seen many places where the developers used a try/catch and throw a new exception which meant the stack trace would be reset.

async function hi() {
  throw new Error("Whoops!");
};

async function doSomething() {

  try {
    let response = await hi();
    return response;
  } catch(err) {    
    console.log(err);
  }
}

doSomething();

Or you can avoid the try/catch because the promise generated by the call to hi becomes rejected. Then simply use .catch to handle the error.

async function hi() {
  throw new Error("Whoops!");
};

async function doSomething() {
  let response = await hi();
  return response;
}

doSomething().catch(err => {
  console.log(err);
});

You can ignore the catch all together and handle all the exceptions using a global exception handler if you think that’s more suitable to your situation. Something like this which uses the onrejectionhandled property of WindowsEventHandlers mixin.

window.onrejectionhandled = function(e) {
  console.log(e.reason);
}

Promise.all compatibility

You can use async/await alongside Promise.all to wait for multiple promises:

const responses = await Promise.all([
  fetch('yashints.dev/rss'),
  hi(),
  ...
])

If an error occurs, it propagates as usual, from the failed promise to Promise.all and then turns to an exception that you can catch using any of the above methods.

`await` can take in a “thenable”

Similar to promise.then, if you have any object which has a .then method, await will accepts it. This is to support scenarios where a 3rd-party object which is not a promise, but promise-compatible (it supports .then), it would be enough to use it with await.

class Greeting {
  constructor(name) {
    this.name = name;
  }

  then(resolve, reject) {
    console.log(resolve);

    setTimeout(() => resolve(`Hi ${this.name}`));
  }
};

async function greet() {
  const greeting = await Greeting('Yaser');

  console.log(greeting); // Hi Yaser
};

greet();

`async` class methods

You can have an async class method. Just prepend it with async and you’re good to go.

class Order {
  async deliver() {
    return await Promise.resolve('Pizza');
  }
}

new Order()
  .delivery()
  .then(console.log); // Pizza

Summary

Just to quickly go through what we discussed so far:

async keyword makes a method asynchronous, which in turn always returns a promise and allows await to be used.
await keyword before a promise makes JavaScript wait until that is resolved/rejected. If the promise is rejected, an exception is generated, otherwise the result is returned.
Together, they provide a great opportunity for us to write clean, more testable, asynchronous code.
With async/await you wouldn’t need .then/.catch, but just note that they are still based on promises.
You can use Promise.all to wait for multiple async functions calls.
You can have an async method in a class.

I know there are many great articles around async/await, but I tried to cover some items where I had to constantly remind myself of. Hope it will help you to have a centralised place for most of what you need to write clean asynchronous JavaScript.

Have fun exploring these points.

Firefox Developer Tools can do that?

Thu, 08 Aug 2019 00:00:00 GMT

It’s been a while since one of the X can do that posts I’ve been publishing. Furthermore, Firefox Developer tools is just getting better and better everyday, so I thought it’s about time I write one for it.

So, are you ready? 😎

How to open it

You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Toggle Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.

Page Inspector

There are many useful features in the page inspector (equivalent to Chrome DevTools inspect element), but there are a few which I use the most:

Search for CSS classes

You can use the search box right below the inspector tab to search for elements, classes and other selectors. But I mostly use it to search for elements with a specific class. This is very useful if you have multiple elements which visually look similar but have specific class, or if you can’t see it because it is hidden.

Filter styles

In the section below, there is box for filtering styles which can be used to easily spot a particular style you might be looking for. The good thing is, it highlights the selectors and expands properties which lets you easily spot what you’re looking for.

See colour codes in different formats

One of my favourites is this little nugget of gold. With this you can easily Shift + click and see all different types of colour representation including name, hex, rgb, and hsl. Of course not all colours have names, you in some cases you only see the other ones.

Cool hah?

Web Console

Who doesn’t love the console in the browsers’s developer tools. It’s used for logging, calculation, evaluation and much more.

Styling console messages

You can get fancy with the messages in the console by applying CSS styles to them. This becomes important when you have heaps of logs and want to highlight a specific part by a different style for example.

Note that you already have console.info, console.warn and console.error at your disposal. So this will be a level above what you can get with those.

Search in history of commands

This one is helpful if you have typed many commands and want to search between those commands. Simply type all or part of the command you’re looking for and it shows you all that matches that phrase.

Press F9 on windows or CTRL + R to open the search box. Then type your term and if the count on the right hand side shows you have results, you can move between those by pressing the F9 and SHIFT + F9 on windows. For Mac users, navigate between those using CTRL + R and CTRL + S.

PS: I am just using arrow keys because F9 is mapped to pause and play on my recording software and I am just too lazy to change that 😁.

Screenshot of the whole page

To get a screen shot of the whole page, view port, or just an element, all you need to do is type :screenshot and pass the parameter you like. Combinations are:

:screenshot                           //the visible part of the page
:screenshot --fullpage                // whole page even invisible parts
:screenshot --selector .css-selector  // only one element (including its children)

Find out more about other parameters you can pass to it in the documentation.

And of course you can take the screenshots using photo icon on the left side of the console in the above picture too.

JavaScript debugger

Apart from the above two sections, like any other developer tools, is the debugger section where you could look into source code to see why something is happening the way it shouldn’t or just simply test out something.

Pretty print minified code

To prettify a minified file, click this icon: {} in the source pane. The debugger will format the source and display it as a new file with a name like: ”{ } [original-name]“.

Search for files/functions

To search for a specific file, simply press CTRL + P (or CMD + P on a Mac). The display panel shows a list of files matching the search term as you type which you can choose. Just press Enter to open the file.

XHR (XMLHttpRequest) breakpoint

Sometimes you need to figure out what happens when you visit/send a request to a particular URL. Once set and the URL is hit, the execution will stop so you can see the state of the application at that point.

Just click on the + in the XHR breakpoint section or if you want to enable it for all URLs, just tick the ‘Pause on any URL’ checkbox.

Performance tool

The performance tool is where I usually spending most of my time in. As you might know, I’ve been actively working on web performance and also have a series of posts on some important aspects of it.

However for the purpose of keeping this post short (pardon the pun 😁), I will only point to two of the ones I regularly use. You can find out more about the rest in the official docs.

Waterfall tab

Before you get to see these tabs, you should record a page’s load by pressing the ⏱ icon. Once it’s done, you will see the waterfall tab by default. Along the X axis is time.

As you can see, all sorts of the stuff which browser has done such as running JavaScript, updating layout, garbage collection, and so on is shown in the view. You can find out how your application is performing on load and what type of things take the most time to finish easily in this view.

The good thing is that each category is coloured differently so you can spot them easily in each category.

For a full reference of what each colour represents, refer to the markers table on the docs.

Call tree

You can see a call tree of all the functions which has been called from top to bottom in this view. The main purpose of this view is to show you which function has taken the most time executing. By analysing these calls, you can find bottlenecks in your code.

You can see in the result table that each row represents one function and the order is highest to lowest by the number of samples which has been taken while the function was executing. From docos:

Total Time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. These numbers should roughly be the same as the number of samples.
Total Cost is that number as a percentage of the total number of samples in the selected portion of the recording.
Self Time is calculated as the time spent in that particular function, excluding its children. This comes from the captured stacks where this function is the leafmost function.
Self Cost is calculated from Self Time as a percentage of the total number of samples in the selected portion of the recording.

Miscellaneous

There are heaps of other stuff which is outside of scope of a single post. But I want to point out a few of the other useful things you can do with Firefox Developer Tools.

Accessibility Inspector

The Accessibility Inspector allows you to access important information exposed to assistive technologies on the current page via the accessibility tree, which lets you to check what’s missing or needs improvements.

On the left-hand side, there is a node tree representing all the items in the accessibility tree for the current page. Each item has two properties listed:

Role — the role this item has on the page (e.g., pushbutton, or footer, text leaf). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA role attribute.
Name — the name this item has on the page. The name depends on the element; for example, the name of most text elements is simply their textContent, whereas form elements’ names are the contents of their associated <label>.

The cool thing here is that you can print the whole tree to JSON. This will help you to parse this structure looking for any specific non compliant item. As an example, someone made an ML model to validate accessibility and this JSON is ideal for data prep for those models.

Eyedropper

If you want to select any particular colour in the current page, this tool is your friend. The fact that it works like a magnifying glass is really helpful to choose a colour in small areas of the page.

Summary

Firefox has come a long way and the team are working furiously adding new features and improvements with every minor and major release. Plus, we should always test our applications with multiple browsers and make sure users will have the same experience in every major browser.

Have fun exploring these tricks and happy debugging.

Update

Cécile Lebleu mentioned in comments that I’ve forgot about CSS Grid inspector and it’s true. So let me tell you about it.

Grid inspector

Grid inspector is one of the unique tools in Firefox developer tools which allows you to examine CSS Grid Layouts, discovering grids present on a page, examining and modifying them inline, debugging layout issues, and more.

In the HTML Pane, elements laid out using a grid have a “grid” marker beside them:

In addition to that, in the CSS pane’s Rules view, any instance of a display: grid declaration gets a grid icon included within it: :

You can click on the icon and the layout will be toggled in the page for you to see the grid with lines separating each cell:

By default line numbers and area names are hidden. But you can check the two checkbox on the right to enable these.

JavaScript: useful features of ECMAScript 2019 reviewed

Tue, 06 Aug 2019 00:00:00 GMT

First of all let me apologise for not writing as frequent as I would’ve liked. It’s been a crazy busy couple of weeks and I had heaps of fun speaking at DDD Perth 2019.

That taken care of, this time I thought let’s go through the new features which are added into the ECMAScript 2019 (aka ES2019 or ES10), because they’re super exciting and make our lives much easier 😎.

TLDR;

At a glance, this version adds a few built-in functions on Array.prototype, flat and flatMap. Then we have Object.fromEntries for directly turning the return value of Object.entries into a new Object.

We also have trimStart and trimEnd on String.prototype over the widely used non-standard versions String.prototype.trimLeft and trimRight.

Another exciting feature is optional catch binding parameters. In addition to those, there are some JSON improvements, addition of Symbol.prototype.description which allows you to specify a description for your symbol, JSON.stringify returns well-formed UTF-8 regardless of input, and at last clarifying Function.prototype.toString by requiring that it either return the corresponding original source text or a standard placeholder.

So if you’re ready let’s dig in.

`Array.prototype.{flat, flatMap}`

flat() is a new method which let’s you create a one-dimensional array from a multi-dimensional one.

Imagine we have an array like below:

const myArray = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];

Prior to flat if you wanted to achieve this, you had to do something like this:

const myNewArray = [].concat.apply([], myArray)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Or:

var myNewArray = myArray.reduce(
  function(prev,curr) {
    return prev.concat(curr)
  }
)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

With this new addition, it would be as simple as:

var myNewArray = myArray.flat(4);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

You can also chain multiple calls:

var myNewArray = myArray.flat().flat().flat().flat();
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

The argument into the flat function just specifies how deep it should look into the array. If you’re not sure how deep the array is, simply use Infinity as input:

var myNewArray = myArray.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

And if you don’t provide any input, by default it only goes one level deep:

var myNewArray = myArray.flat(); 
// [1, 2, 3, 4, 5, 6, Array(4)];

flatMap on the other hand, allows you to map each element using a mapping function and then flattens the result into a new array. Think of it as chaining a map function with a single flat. However, it can be really helpful both in terms of usage and efficiency of execution.

let myArray = [1, 2, 3, 4, 5];

let mappedArray = myArray.map(x => [x, x * 2]);
// [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2)[1, 2]
// 1: (2)[2, 4]
// 2: (2)[3, 6]
// 3: (2)[4, 8]
// 4: (2)[5, 10]

let mappedFlattenedArr = mappedArray.flat();

// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

let myNewArray = myArray.flatMap(v => [v, v * 2]);
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

`String.prototype.{trimStart, .trimEnd}`

These methods are fairly obvious as to what they will do for us. Just keep in mind that we had trimLeft which will be replaced by trimStart and trimRight which will be replaced by trimEnd.

let message = ' This is a string with white space around ';

message = message.trimStart();
// 'This is a string with white space around '

message = message.trimEnd();
// 'This is a string with white space around'

`Object.fromEntries`

This method get an Iterable and transforms key-value pairs to an object. But let’s see what is an Iterable:

JavaScript supports a protocol by which objects such as arrays can be used by control structures such as for…of and the spread operator ... to loop through data sequentially. This is referred to as the iterable and the data structures that support this functionality are called iterables. While JavaScript provides maps, arrays and sets with an iterable property from the get-go, plain objects do not have this by default.

To see this in action:

let entries = new Map([["name", "john"], ["age", 22]]);

let newObj = Object.fromEntries(entries);
// { name: 'john', age: 22 }

A real life use case is when parsing query strings:

let query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'));

// { foo: 'bar', baz: 'qux' }

Optional Catch Binding

Optional catch binding allows us to use try/catch without the error parameter inside the catch block.

Previously you had to use this syntax regardless of whether you cared about err or not, such as when you had to fall back to feature to support older browsers:

try {
  // try to use a web feature which may not be implemented
} catch (unused) {
  // fall back to a less desirable web feature with broader support
}

With ES2019 you can do:

try {
  // ...
} catch {
  // ...
}

`Symbol.description`

This new read-only description property is a string returning the optional description of Symbol objects. This method is encouraged to be used instead of Symbol.prototype.toString where it wasn’t obvious what will be returned.

let description = 'This symbol represents an emoji 😁';

let mySym = Symbol(description);
// Symbol('This symbol represents an emoji 😁')

console.log(mySym.description);
'This symbol represents an emoji 😁'

`Function.toString`

This method is a really useful one which returns the source code of a function. Imagine doing a troubleshooting on a block of code which is using a third party function. This can potentially help you to see the implementation (given it’s got source maps).

function myFn(emoji) {
  let msg = `${emoji} is hellav an emoji`;
  console.log(msg);
}

console.log(myFn.toString());

// "function myFn(emoji) {
//   let msg = `${emoji} is hellav an emoji`;
//   console.log(msg);
// }"

Of course this doesn’t work for everything. If we try it for map function on array:

Array.prototype.map.toString();

// "function map() { [native code] }"

Since the implementation is not written in JavaScript, it will just show you that this function is written in native code.

`JSON.stringify`

The team have done an improvement with Unicode characters and now this method can’t return malformed data.

// Non-BMP characters still serialize to surrogate pairs.
JSON.stringify('𝌆')
// → '"𝌆"'
JSON.stringify('\uD834\uDF06')
// → '"𝌆"'

// Unpaired surrogate code units will serialize to escape sequences.
JSON.stringify('\uDF06\uD834')
// → '"\\udf06\\ud834"'
JSON.stringify('\uDEAD')
// → '"\\udead"'

`Array.sort` Stability

The team has decided to change the sort implementation so that it would be stable (that is, elements that compare equal must remain in their original order).

const grades = [
  { topic: 'math', grade: 10 },
  { topic: 'literacy', grade: 10 },
  { topic: 'chemical', grade: 13 },
  { topic: 'geography', grade: 12 },
  { topic: 'modern history', grade: 12 },
  { topic: 'art', grade: 13 },
  { topic: 'computer basics', grade: 14 },
  { topic: 'algebra', grade: 14 },
];

grades.sort(a, b => a.grade - b.grade);

// 0: {topic: "math", grade: 10}
// 1: {topic: "literacy", grade: 10}
// 2: {topic: "geography", grade: 12}
// 3: {topic: "modern history", grade: 12}
// 4: {topic: "chemical", grade: 13}
// 5: {topic: "art", grade: 13}
// 6: {topic: "computer basics", grade: 14}
// 7: {topic: "algebra", grade: 14}

Summary

In general JavaScript is moving in the right direction for helping developers write more stable, reliable and consistent code. You can find more information on their GitHub repo here.

Hope to see more awesome features in JavaScript and see you soon with another article.

10 questions to ask in a technical interview

Wed, 17 Jul 2019 00:00:00 GMT

I’ve been sitting many interview sessions recently as part of our recruitment process and let me tell you it’s one of the hardest tasks I’ve ever had. In this post I wanted to share my findings and approach with you so we can all be more intelligent, inclusive and successful in our hiring process. And I am super keen to hear from you in comments 👇🏼.

Context

The most important part of every interview is how to qualify a candidate without being too specific about a technology or framework. It’s about measuring their abilities and potentials rather than asking questions where any person can find somewhere and memorise the answer.

We, at Readify, have a very specific and complex (if I may say so, which I just did 😁) process for hiring great fits, not just technical, but also culturally.

To be able to do this, we need to be very careful with what is being asked during our technical interviews which is reached after a coding challenge and live coding session.

What do we ask

I don’t want to review our hiring process, more focus on what is being asked and how do we phrase them. There are plenty of sites which show you what to ask and unfortunately most of them have some predictable questions like:

Where do you see yourself in 5 years?

To be honest I don’t even know what happens for me in 5 months, let alone 5 years. So the question is what should we ask to be able to find out as much as we can about a candidate without falling into trap of asking fruitless questions.

To determine whether someone is a good fit for the job, you want to draw them out, ask a mix of technical and situational questions, and listen closely to not only what they have to say but how they say it. The so called technical questions shouldn’t be around what, but about how. You want to evaluate how they perform in certain situations like solving a tough problem.

So let’s begin.

1. What challenging problem have you had in the last couple of months?

This question is like an ice breaker. It will put them at ease because they will be able to talk about something they’re comfortable with. This will also give you an opportunity to see how they go about solving a problem. You can go in more details in areas where you see value in, such as why did you choose this specific way to solve it, or why didn’t you try blah.

You can get an overview of their team work too, did they collaborate on solving his problem, or did they help someone or get help from them.

2. What resources do you use to learn or sharpen your skills?

Many developers turn to websites such as StackOverflow, Medium, or Dev when they need help with something. Serious professionals will have their own selection of websites, online communities, social media feeds and other resources specific to their interests. The answer to this question will give you an indication of how engaged the candidate is with the broader IT community.

Apart from those, Meetups, conferences, YouTube Channels, taking online courses, joining hackathons, plugging away at personal IT projects and many more can be discussed to see how the candidate keep themselves up to date, or find answer to a problem.

3. How do you explain X in simple terms?

This is very good to see how they can simplify a technical term or subject. It’s very good to understand how deep they know something or how broad their knowledge is.

Another aspect about this is to be able to communicate to stakeholders of a project. If you can explain a subject to your Product Owner, BA, Tester and so on, your whole team would be more successful delivering your project.

4. What qualities do you think is required for X?

This questions will help you unravel some of the candidate’s expectations and also how they see the role. Some people may focus on certifications and technical abilities, while others may talk more about problem solving, attention to detail, communication and other general job skills. Look for candidates who give a nice balance of both.

5. What are X words your colleagues describe you with?

This might sound cliché, but it will help you find out about some of their aspects not found in resume or social media profiles. It also gives insight into how the individual perceives themselves and the role they’re applying for. For example, if their answer focuses on their creative side but the position is very analytical in nature, the job may not be a good fit.

6. Tell us about a challenging situation you had which resulted in failure, such as missing a deadline or a promotion being rejected?

We all deals with professional setbacks at some point in our career. What you want to know is how people handled — and what they learned from — those situations. The best employees are resilient, using setbacks as a springboard toward positive changes. So listen to not only the problem they mention, but also what they did after the disappointment.

7. What is your most and least favourite framework/product?

This question helps you evaluate enthusiasm and knowledge. Do candidates become animated when discussing the advantages and disadvantages of certain tools/framework/library? Do they admire solid engineering, sleek design, intuitive user experience or another aspect of good technology?

What is their focus area in a tool, what they look for and what value they see in their favourite choice. These will give you great insight about them.

8. What are the pros and cons of working in an agile environment?

This question can help you understand their perception of agile, how they operate in a fast pace environment which means lots of quick meetings and a steady stream of feedback from fellow team members. Most developers don’t like too many meetings especially if they’re doing SCRUM until they realise the benefit of each of those and how they help reduce the time waste.

A candidate’s answer to this question can tell you not only their level of understanding of this popular environment, but also their attitudes toward collaboration and communication.

9. What was your last presentation?

First of all, let me clear the fact that by presentation I don’t mean public speaking like conferences and meetups. However, having public speaking background is a bonus since it proves a couple of points.

Today’s tech workers can’t be lone wolves. They have to discuss changes with colleagues, coordinate with other departments, advocate for platforms they prefer and much more. While not everyone has to love public speaking, your new hire should be able to conduct research, put together a solid presentation and persuade stakeholders why X is better than Y.

10. How do you manage your work life balance?

There many scenarios where one has to work harder than usual. A pressing deadline, on-call duties (fortunately we don’t have this), or simply someone who is addicted to spend all their time working are examples where we need to be careful about.

While you want dedicated team members, you should also seek employees who know how to relax and take care of themselves. Burnout is a very real problem in our industry, and top performers have good strategies in place to prevent it. As a follow up to their answer, you could talk about how your company supports a healthy work life balance (we do this via multiple ways) — something that can be very tempting for candidates with multiple offers.

Summary

There are many questions you can ask during an interview, but those who target intelligence, creativity, and learning abilities are the most helpful ones. When interviewing a candidate, always look for their strength and quick learning ability. Don’t ask technical questions which their answer wouldn’t help you uncover the candidate’s potential. People can spend a couple of days and find out those questions and their answers from many sources. But the questions mentioned here and those similar in nature would help you find a good fit for your team.

And a final advice from truly yours, don’t be a jerk when interviewing a candidate. Don’t be biased on gender, background, appearance, and other factors which prevent you from finding good people.

JavaScript can do that?

Wed, 26 Jun 2019 00:00:00 GMT

You might be wondering why I am writing less these days. I assure you, it’s not because I am getting lazy (I am ATM 🤩), it’s just that I am on a long overdue holiday. But to keep my juices going, I thought now that I am having fun, let’s write a fun post 😊.

In this post I will go through some of the funniest yet unbelievable JavaScript snippets ever. Are you ready?

`[]` is equal `![]`

Array is equal to not array 😂:

;[] == ![] // -> true

💡 What’s happening?

The abstract equality operator converts both sides to numbers before comparing them, and both sides will be converted to 0 for different reasons. Arrays are truthy, so the right hand side becomes false which then is coerced to 0. On the left however, the empty array is coerced to a number without becoming a boolean first, and empty arrays are coerced to 0, despite being truthy 🤯.

`true` is `false`

True is false:

!!'false' == !!'true' // -> true
!!'false' === !!'true' // -> true

💡 What’s happening?

true is truthy and is represented by value 1 (number), true in string form, is NaN. So:

true == 'true' // -> false
false == 'false' // -> false

false is not the empty string, so it’s a truthy value, so:

!!'false' // -> true
!!'true' // -> true

Cool, ha? 😎

baNaNa 🍌

Let’s create a banana:

'b' + 'a' + +'a' + 'a' // -> baNaNa

💡 What’s happening?

This one is an old trick, remixed. The expression is converted to "ba" + (+"a") + "a", and since "a" is converted to a number, it becomes NaN.

Let’s fail

You wouldn’t believe this in your wildest dreams, but:

;(![] + [])[+[]] +
  (![] + [])[+!+[]] +
  ([![]] + [][[]])[+!+[] + [+[]]] +
  (![] + [])[!+[] + !+[]]
// -> 'fail'

💡 What’s happening?

If we break this lot into smaller pieces, we notice that the following pattern occurs often:

![] + [] // -> 'false'
![] // -> false

We try adding [] to false, but because of a number of function calls internally, we’ll end up converting the right operand into a string:

![] + [].toString() // -> 'false'

Thinking of a string as an array we can access its first character via [0]:

'false'[0] // -> 'f'

The rest is obvious, but the i is tricky. The i in fail is grabbed by generating the string falseundefined and taking the element on index ['10'].

Array equality is evil 👾

Array equality is evil in JavaScript, see below:

[] == ''   // -> true
[] == 0    // -> true
[''] == '' // -> true
[0] == 0   // -> true
[0] == ''  // -> false
[''] == 0  // -> true

[null] == ''      // true
[null] == 0       // true
[undefined] == '' // true
[undefined] == 0  // true

[[]] == 0  // true
[[]] == '' // true

[[[[[[]]]]]] == '' // true
[[[[[[]]]]]] == 0  // true

[[[[[[ null ]]]]]] == 0  // true
[[[[[[ null ]]]]]] == '' // true

[[[[[[ undefined ]]]]]] == 0  // true
[[[[[[ undefined ]]]]]] == '' // true

💡 What’s happening?

The explanation behind this is rather long. So I introduce you to section 7.2.13 Abstract Equality Comparison of the specification.

`parseInt` is just bad

parseInt is famous by its quirks, I just mention one of the most famous ones:

parseInt('f**k') // -> NaN
parseInt('f**k', 16) // -> 15

💡 What’s happening?

This happens because parseInt will continue parsing character by character until it hits one it doesn’t know. The f in f**k is the hexadecimal digit 15.

`NaN` is not a number

Type of NaN is a number:

typeof NaN // -> 'number'

💡 What’s happening?

Explanations of how typeof and instanceof operators work:

Comparison of three numbers

This one is gold:

1 < 2 < 3 // -> true
3 > 2 > 1 // -> false

💡 What’s happening?

Why does this work that way? Well, the problem is in the first part of an expression. Here’s how it works:

1 < 2 < 3 // 1 < 2 -> true
true < 3 // true -> 1
1 < 3 // -> true

3 > 2 > 1 // 3 > 2 -> true
true > 1 // true -> 1
1 > 1 // -> false

You can fix this with greater than or equal operator (>=):

3 > 2 >= 1 // true

Read more about Relational operators in the specification:

12.10 Relational Operators

And that’s just some of the fun we can have with JavaScript. No wonder some people do not like it, since they don’t understand how it works 😂.

Boost your ranking with these 10 tips

Tue, 11 Jun 2019 00:00:00 GMT

For most companies, ranking #1 is like a blessing to their business. However, most of the web developers are not aware of what should be done to reach to that point.

In this article we go through 10 simple steps to increase the ranking organically rather than paying search engines to do that for us. So, are you ready 🧐?

What does HTML tags tell search engines?

Certain HTML tags tell search engines how to read your document properly and index it against specific keywords. In other words, when they crawl web, they will categorise your page with some keywords which then is surfaced when a user searches for them.

Some of these tags also improve how visitors view your content in those search engines. And this is in addition to how social media uses content tags to show your articles like this for example 👇🏽.

Just a reminder to not miss my talk on micro apps and web components @NDC_Conferences #NDCOslo 👇🏽https://t.co/JjBDfpAhmd
— Yaser A Mehraban👨🏽‍💻🎤☕️😴 (@yashints) June 10, 2019

So let’s see what are these tags.

1. Title tag

Perhaps one the most important tags is title. This is used as a label for your page and defines how search engines like Google and Bing see your page and show it in their search result.

In most cases, this tag reflects the title of the article/page itself. This isn’t exactly a bad practice, but you’ll miss out on a few opportunities to score big in search engines like Google.

The question which comes up is, does it have to be the same as keywords. And the answer is absolutely not. However, it’s good to make sure you’re not confusing the reader 😉. But this gives opportunity to expand on what your page is relevant to for the search engine. Title should be short anyway, so having different but related tags makes it accessible to a wider range of searches.

A normal title tag is shown below:

<title>Your Title Text for Search Engines</title>

It sounds very simple right? Well as simple as it looks, below are the points you have to consider when writing your title:

Use only one title tag
Try to create a unique title
Don’t use your title keywords as your meta tags too (read further on tags)
Make it relevant to content
It’s good to keep it under 60 characters
Try to not use stop words
Show the branding last
Make it readable
Use dates, numbers and questions if relevant

Here is an example of one of my articles being the first result on Google 😍:

2. Meta description tags

As I mentioned above, having description tags is really helpful to expose your page to a wider range of searches in addition to title.

<meta
  name="description"
  content="Key HTML tags to have better SEO."
/>

For example, above is a tag where someone tried to highlight “Key HTML tags” and “better SEO” phrases and also to be displayed in search results.

Note: As of 2019, Google has announced that you shouldn’t focus too much on these as they will consider content first.

3. Header tags

You should not underestimate header tags. They are often used to break up the content to make it easier to read. Imagine reading my article in one giant paragraph rather than these nicely separated pieces.

It’s been discovered that about %55 of the users will spend 15 seconds at most skimming your text. In terms of SEO, header tags are what most search engines use to help determine segments of content and create featured rich snippets.

These tags are as follows:

<h1></h1> – Usually is used for webpage titles.
<h2></h2> – Highlights the topic of the content following it.
<h3></h3> – Reflects points in regards to the topic.
<h4></h4> – Supports points from <h3>.
<h5></h5> – Not often used, but great for supporting points of <h4>

4. Alt tags for images

This is often the most important part of an image tag not just for SEO but also for accessibility. Unfortunately, search engines cannot determine what images are showing. That’s when the alt tag comes handy.

For example:

<img src="cute-puppy.jpg" />

Search engines wouldn’t know whether this image is showing a cute puppy or a cat. So adding alt tag would help them understand it and use it for categorisation.

<img
  src="cute-puppy.jpg"
  alt="Such a cute puppy"
/>

Above tag will correctly help search engines identify what the image is about. This will help to show this image when someone is trying to search for a cute puppy using Google images for example.

5. Hyperlinks

Although it doesn’t look like it, hyperlinks are vital, not only to external content, but also to your own content. To give you an example, when I posted my first of series on web performance on Dev community, I had links to other articles on my site. That resulted in a spike of traffic to my site which was basically helping my natural traffic to go up and also help the search engine link these articles together.

In its core, they are like you’re voting for other content, so use it in your benefit and make sure the linked content is relevant.

<a
  href="https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0"
>
  My previous post about pet projects
</a>

If for some reason you didn’t want the search engine to make a connection with what you’re linking to, consider using rel=nofollow. This tells the search engine to not link your current article with the link destination. In other words, you won’t help improve the domain authority of an external site.

<a
  href="https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0"
  rel="nofollow"
>
  My previous post about pet projects
</a>

6. Open graph tags

These tags are great for showing nicely formatted version of your page on social media. You might have seen it before, but here is how my post appears on LinkedIn 👇🏽:

Here is an example of an open graph tag:

<meta
  name="og:title"
  property="og:title"
  content="The Title of Your Article"
/>

Now if this article is shared on something like Facebook, the social site will pull the title directly from this tag. As you saw from the tweet I showed above, open graph supports things like descriptions and images as well. It simply gives you customization options if your webpage is shared on social media.

7. Robots Tag

This tag is useful if you want to prevent your page/article from being indexed. These can stop crawlers from sites like Google or Bing from accessing the content. You might now ask why would you want that?

Some articles might not be the most influencing for rankings. There are veraity of reasons why you might want this, but let’s say you have an article which lacks quality and you want to get some user’s opinion before it appears on any search engine results.

<meta name="robots" content="noindex, nofollow" />

8. Canonical tags

A canonical tag is great for organizing your content and prioritizing one web page over a duplicate web page. Just to give you an example, I always like to post my posts on my website first before I post it somewhere else.

I do it because of a couple of reasons. The most important one is that the reach might be higher on those platforms like Dev.to. However, I want search engines to know that this post is not a separate one, and in fact it is a copy of what is published on my website first. In other words, it is a way of telling search engines that a specific URL represents the master copy of a page.

Another reason why you should use this tag is that search engines might crawl your website using any of these URL forms:

To a human, all of these URLs represent a single page. To a crawler, though, every single one of these URLs is a unique page. Even in this limited example, we can see there are five copies of the homepage in play. In reality, though, this is just a small sample of the variations you might encounter.

<link
  rel="canonical"
  href="http://yashints.dev/index.html?param=value"
/>

So by putting above tag on my home page, I can tell search engines that this URL is representing the same and not a separate page.

Here is a good article going more deep into canonical tags.

9. Responsive site meta tags

Let’s first go through the fact that more than %80 of traffic in China comes through mobile devices. In Australia this number is %56. These numbers show us how important it is to pay attention to responsive design.

For the same reason it’s important to let the search engines know that this site has responsive design available. This will ensure that the page is surfaces if a user is searching through a mobile device.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
/>

Above tag is the minimum you will need to let search engines know your site is mobile friendly. It’s important to note that Google puts emphasis on websites that are mobile-friendly. And if you don’t have something readily available that people can view from a hand-held device, it will reflect your rankings in search.

10. Twitter cards

Apart from open graph tags, Twitter has its own tags. Now that tweets can exceed historic 140 characters, these cards are a nice extension that allows your tweets to stand out in the crowd of common text.

Here are a few of them:

Summary

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta
  name="twitter:title"
  content="Small Island Developing States Photo Submission"
/>
<meta
  name="twitter:description"
  content="View the album on Flickr."
/>
<meta
  name="twitter:image"
  content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg"
/>

Example:

Player

<meta name="twitter:card" content="player" />
<meta
  name="twitter:title"
  content="Bison in Yellowstone"
/>
<meta
  name="twitter:site"
  content="@BrightcoveLearn"
/>
<meta
  name="twitter:description"
  content="Bison walking in Yellowstone National Park."
/>
<meta
  name="twitter:player"
  content="https://solutions.brightcove.com/bcls/twittercards/bison.html"
/>
<meta name="twitter:player:width" content="360" />
<meta
  name="twitter:player:height"
  content="200"
/>
<meta
  name="twitter:image"
  content="https://solutions.brightcove.com/bcls/twittercards/bison.jpg"
/>

Example:

For more info on these tags, visit their official documentation.

So no keyword tags?

You might wondering why I didn’t mention keyword tags. That’s because most search engines like Google use content to categorise the page. So having them doesn’t add any value that much and in fact to many of them just adds extra weight to your pages.

Summary

You now know 10 tips to improve your SEO organically and save some money. So head to a bar or coffee shop and spend it responsibly 😉.

Another tip I forgot to mention was around people who use a SPA framework. If you want to have SEO for your site, you will need to define some critical paths (i.e. homepage) and create a server side rendered of that page which gets replaced by the normal route on client side. This way crawlers would be able to index your statically generated file while your end users still have the benefit of fast interactions on client side.

Till next post 👋🏼.

A world without passwords

Wed, 05 Jun 2019 00:00:00 GMT

Let’s face the reality, we can’t live without passwords these days. In fact our entire online life is depending on them. But with passwords, comes heaps of problems not only for users, but also for us developers.

A bitter fact

Most people have a weak password (and probably the same) used for many websites they’re member of. Social media, email, productivity tools, you name it, they all have different policies around passwords and majority of users find a way to bypass it using a weak password, or a strong one written on a post it 🤷🏽‍♂️.

In fact 81% of all data breaches that happen due to hacking, leverage stolen or weak passwords.

There is a better way

But thanks to great efforts from W3C and FIDO, we’re not bound to use passwords for everything. Web Authentication API, aka WebAuthn is a fairly new specification which is introducing a new way of authentication without passwords, and also alongside them.

Google, Microsoft, Yubico and other big names in the industry are all part of the contributors to get this spec widespread. This API allows servers to register and authenticate users using public key cryptography instead of passwords.

Windows Hello, Apple’s Touch ID, Yubikey devices, are all examples of a different type of authentication mechanism which doesn’t require passwords. They use biometrics or hardware devices to be able to achieve this.

How it works

From 1000ft, instead of using a password, you will use a key pair (public and private) which is generated for a website.

The private key is stored securely on user’s device, whereas the public key along with a randomly generated credential ID is sent to a web server to be stored and used later for authenticating that particular user.

Overall, WebAuthn relies on three major parties:

Authenticator (the device which is doing the authentication and verification)
Relying party (the web application owner)
Browser’s Web Authentication API

The flow is fairly simple, first step is registration, then it would be authentication.

Registration a credential

Same as password authentication flows where the web server usually provides a form for user to enter their password which is sent back to the server for verification.

With WebAuthn, it’s fairly similar, but instead of asking for a password, the relying party asks for a public key.


Image from WebAuthn.io

When prompting the user for a credential, the navigator.credentials.create() is used:

const credential = await navigator.credentials.create(
  {
    publicKey: publicKeyCredentialCreationOptions,
  }
)

In case you’re wondering what does the publicKeyCredentialCreationOptions looks like, it contains a bunch of mandatory and optional fields:

const publicKeyCredentialCreationOptions = {
  challenge: Uint8Array.from(
    randomStringFromServer,
    c => c.charCodeAt(0)
  ),
  rp: {
    name: 'Google',
    id: 'accounts.google.com',
  },
  user: {
    id: Uint8Array.from('5T9AFCUZSL8', c =>
      c.charCodeAt(0)
    ),
    name: 'me@yashints.dev',
    displayName: 'Yaser',
  },
  pubKeyCredParams: [
    { alg: -7, type: 'public-key' },
  ],
  authenticatorSelection: {
    authenticatorAttachment: 'cross-platform',
  },
  timeout: 60000,
  attestation: 'direct',
}

challenge: The most important part in the options is the challenge. It is a randomly generated bytes on the server which is used to prevent reply attacks.

rp: Which stands for relying party, is the web server which user is trying to register to.

user: This is the end user who is registering to a service. The id is used to associate the public key to that user, but is suggested not be a personally identifying information.

pubKeyCredPrams: Specifies which types of public key are acceptable by the server.

authenticatorSelection: Is an optional field which helps relying parties to put further restrictions on authenticators allowed for registration. The possible values (platform like Windows Hello, or cross-platform like Yubikey) can be found on the spec.

timeout: The time in millisecond that the user has to respond to the registration prompt.

attestation: This is returned from the authenticator and contains information that can used to track the user. It indicates how important the attestation is to this registration event. For example, if none is used, it means server doesn’t care about it. indirect means server will allow for anonymised attestation data. direct means that server requires the data from authenticator. In general this is regarding privacy of users when registration is happening.

The object which is returned from the create() call, contains a public key and other attributes which are used to validate the user:

console.log(credential);

PublicKeyCredential {
    id: 'ADSUllKQmbqdGtpu4sjseh4cg2TxSvrbcHDTBsv4NSSX9...',
    rawId: ArrayBuffer(59),
    response: AuthenticatorAttestationResponse {
        clientDataJSON: ArrayBuffer(121),
        attestationObject: ArrayBuffer(306),
    },
    type: 'public-key'
}

Verifying the registration data by relying party

Once the public key is received along with other properties of registration data to the server, there is a procedure to validate this data.

Of course the implementation depends on what language you’re using, but, there are some examples out there if you want to have an idea how to implement these steps. Duo Labs has provided full implementation in Go and Python.

Authenticating with WebAuthn

After completing the registration, the user is able to be to authenticate to the site. During registration user has obtained an assertion which indicates they have the private key. This contains a signature using the mentioned private key. Web server uses the public key during registration to verify this.

The authentication flow looks something like this:


Image from WebAuthn.io

The navigator.credentials.get() method is called to generate an assertion to prove the user own the private key. This will retrieve the credential generated during registration with a signature included.

const credential = await navigator.credentials.get(
  {
    publicKey: publicKeyCredentialRequestOptions,
  }
)

The publicKeyCredentialRequestOptions object contains a number of mandatory and optional properties which is specified by the server:

const publicKeyCredentialRequestOptions = {
  challenge: Uint8Array.from(
    randomStringFromServer,
    c => c.charCodeAt(0)
  ),
  allowCredentials: [
    {
      id: Uint8Array.from(credentialId, c =>
        c.charCodeAt(0)
      ),
      type: 'public-key',
      transports: ['usb', 'ble', 'nfc'],
    },
  ],
  timeout: 60000,
}

The most interesting part in this object is the transport property. The server can optionally indicate what transports it prefers, like USB, NFC, and Bluetooth.

The returned object is a PublicKeyCredential object, but slightly different from the previous one from registration.

console.log(assertion);

PublicKeyCredential {
    id: 'SSX9lKQmbqdGtbcHDTBsvpu4sjseh4cg2TxSvr4ADSUlN...',
    rawId: ArrayBuffer(59),
    response: AuthenticatorAssertionResponse {
        authenticatorData: ArrayBuffer(191),
        clientDataJSON: ArrayBuffer(118),
        signature: ArrayBuffer(70),
        userHandle: ArrayBuffer(10),
    },
    type: 'public-key'
}

For more info around this object refer to spec.

Validating authentication data

After the assertion is acquired, it is sent to server for verification. After being validated, the signature is verified with the stored public key.

const storedCredential = await getCredentialFromDatabase(
  userHandle,
  credentialId
)

const signedData =
  authenticatorDataBytes + hashedClientDataJSON

const signatureIsValid = storedCredential.publicKey.verify(
  signature,
  signedData
)

if (signatureIsValid) {
  return 'Hooray! User is authenticated! 🎉'
} else {
  return 'Verification failed. 😭'
}

Summary

We saw how simple and straight forward is to implement this amazing feature and I highly recommend if you’re working on a green field project definitely consider having this implemented and give users ability to live passwordless 🔥👊🏻. For the current products, this can be a turning point to gain more users into system by simplifying the most important part of their flow 😊.

What`s new in Angular 8

Thu, 30 May 2019 00:00:00 GMT

You might already know that Angular 8 is out now, but what it means for you or your organisation is described below.

Ivy

To put your mind at rest, Ivy is not here yet. If you don’t know what is Ivy, it’s the Angular’s new renderer which promises a ton of improvements in term of how Angular renders the view. It is radically different from anything we have seen in mainstream frameworks, because it uses incremental DOM. Stay tuned for more news on this in coming weeks.

Differential loading

Differential loading is a feature in which browser decides to use modern vs legacy JavaScript based on its own capabilities.

This is really important not just because we can use modern JavaScript but because we can get rid of all of those polyfills we’ve had to ship with our applications previously.

In short it takes advantage of the es2015 flag in the TypeScript config and creates two bundles one for modern browsers and one for older ones.

{
  "compilerOptions": {
  …
  "module": "esnext",
  "moduleResolution": "node",
  …
  "target": "es2015",
  …
},

At runtime, Angular generates two script tags in your HTML:

<script type="module" src="…"> // Modern JS

<script nomodule src="…"> // Legacy JS

Browsers that can handle modern JavaScript will load the first bundle and ignores the second whereas the older ones ignore the first and load the first one.

This will give you some massive reduction in bundle size when the application is more than a hello world 😉.

Dynamic imports in route configurations

Angular team have now changed the way you used to lazy load child modules in route configuration. Previously you had:

{path: '/about', loadChildren: './about/about.module#AboutModule'}

With the new syntax, it leverages the dynamic import which is a huge advantage over the old syntax:

{path: `/about`, loadChildren: () => import(`./about/about.module`).then(m => m.AboutModule)}

Why is this better I hear you ask. The main reason is that you can get errors during development from your editor. If you misspelled the module name or the file name previously, it wouldn’t throw error until you trued to bundle the app because it was just a string.

Now you get squiggly lines under file name or module name if you make a mistake.

Builders

You might know that you can tap into CLI commands like ng new, ng generate, ng add, and ng update using Schematics. Angular team now allow you to tap into more commands using the new builders for CLI like ng build, ng test, andng run`.

What this allowed the team to achieve is huge because now you can run your custom build or test flows. One of the good examples is the new version of AngularFire which adds a deploy command to make the build and deploy seamless when working on a project which uses Firebase for deployment. As if, you can now run:

ng run hellow-world:deploy

This command will both build the project and deploys it to Firebase, how good is this?

Workspace APIs

Up until now, you had to manually open your angular.json and modify it to make changes to workspace config. With this new API you can now read and modify these configurations much more conveniently. Read more here.

Web Worker Support

Web workers are great for adding support to offload a heavy operation in a different thread and speed up your application’s performance. Imagine image or video manipulation, or finding the optimum path between two points on a map and how they can impact the application’s speed.

Now you can add a web worker easily by running:

ng generate webWorker awesome-worker

Once finished you will have a web worker and you can use it in your application. The CLI will take care of the bundling for you, so all you need to do, is leverage the power it brings to you:

const worker = new Worker(
  `./awesome-worker.worker`,
  { type: `module` }
)

To make this even more interesting, CLI will also correctly handle the code splitting and bundling.

In your worker file which is located in src/app/awesome.worker.ts, you will have a scaffolded method to receive a message from your application as a starter which you can expand however you like:

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`
  postMessage(response)
})

In your app.component.ts you can then interact with the worker and send a message:

if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('./awesome.worker', {
    type: 'module',
  })
  worker.onmessage = ({ data }) => {
    console.log('page got message: ${data}')
  }
  worker.postMessage('hello')
} else {
  // Web Workers are not supported in this environment.
  // You should add a fallback so that your program still executes correctly.
}

AngularJS migration

If you were using $location service in your AngularJS application, now you will get LocationUpgradeModule which puts the responsibilities of $location service to Location service in Angular.

This means if you’re use ngUpgrade, your life is a bit easier having routes in both AngularJS and Angular apps.

Documentation around best practices for lazy loading parts of AngularJS app into your Angular app is also happened in this version which gives you insight on how to upgrade most used features first, and only load AngularJS for the remaining subset.

Read more around the best practices here.

New guide around deprecated features

They also release a new guide around deprecations and removals. They claimed they are committed to support features in N + 2 in major releases. For example if you’re using a deprecated feature in Angular 7, it will be available in 8 and 9, but not 10.

One of the features which is now deprecated in 8 is platform-webworker. To find out about all deprecated and removals check out their deprecation guide.

Breaking changes

This version came with some breaking changes. The most important one is that @bazel/typescript is now a peerDependency of @angular/bazel so its users must add @bazel/typescript to their package.json.

From core perspective, it’s now required that all @ViewChild and @ContentChild queries have a static flag specifying whether the query is static or dynamic. The compiler previously sorted queries automatically, but in 8.0 developers are required to explicitly specify which behaviour they have in mind. This is a temporary requirement as part of a migration; see https://v8.angular.io/guide/static-query-migration for more details.

To read more refer to their change log.

How to update

Simply run this command from your terminal and have fun exploring these new hot features.

ng update @angular/cli @angular/core

The rest is taken care of by the CLI.

Write faster JavaScript

Mon, 20 May 2019 00:00:00 GMT

Most of the times, we write code which is being copy pasted from all over internet. StackOverflow is the main source these days for finding solutions to all sort of problems. But is it OK to blindly copy paste code without really knowing what’s happening behind the scenes?

A bit of context

Don’t get me wrong when I say StackOverflow should not be used blindly. It’s a great source of information for most of the day to day issues and bugs developers face all around the world. It’s just that we should be a bit more proactive and decide the best way out of all the available options out there.

Let me show you some examples where a piece of code can be written in multiple ways, and the most obvious choice is not necessarily the best one.

Chaining array loop chaining

Let’s assume we have an array with 200,000 objects which include name and age properties. We want to have the name of all people under age of 22 (assume we have 100,000 of them). This the solution most people might use:

const under22People = originalList
  .filter(x => x.age < 22)
  .map(x => x.name)

Since ES5 and ES6 were introduced, a nice set of array methods emerged. ES6s cleaner syntax makes it painless to chain methods in order to produce our desired results. The problem lies in how we use these nice methods without realising how they’re performed.

In the first glance, this looks to be a really nice code, but if we look closer, we have a loop which runs 200,000 times when doing the filtering, and another 100,000 times when selecting the name.

This is where we just need to loop through these items once. So let’s have a look at how can we rewrite this code:

const under22People = []
originalList.forEach(({ age, name }) => {
  age >= 18 && under22People.push(name)
})

Now this code runs only 200,000 times. It doesn’t look as nice as the chained methods, but it sure has much better performance.

You can even use the reduce method to do the same:

const under22People = originalList.reduce(
  (acc, { age, name }) => {
    return age >= 18 ? [...ac, name] : acc
  },
  []
)

It sure looks much less readable, but it does the exact same job for us.

Abusing arrow functions

One of the good questions you could ask yourself when writing JavaScript is whether you know the difference between a traditional function and an arrow function (aka fat function).

From MDN Web Docs:

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

Before you ask, no they are not JavaScript equivalent of anonymous functions in languages like C#. But for now the only thing you need to care about is that they don’t have scope.

Once of the many of their use cases is using them in class field. Consider in React you don’t need to manually bind your functions anymore like:

this.handleClick = this.handleClick.bind(this)

Instead you will write your class like:

class MyComponent extends Component {
  handleClick = () => {
    // ...
  }

  render() {
    // ...
  }
}

As you might know, usual functions are defined in the prototype and will be shared across all instances. If we have a list of N components, these components will share the same method. So, if our components get clicked we still call our method N times, but it will call the same prototype. As we’re calling the same method multiple times across the prototype, the JavaScript engine can optimize it.

On the other hand, for the arrow functions in class properties, if we’re creating N components, these N components will also create N functions. You can see by looking at the transpiled version, that class properties are initialised in the constructor. Which means if we click on N components, N different functions will be called.

So consider this approach next time you are writing your new shiny React component.

Nested functions VS IIFEs

Nesting a function inside another function seems like a good idea to isolate some logic from outside world. Consider below code:

function doSomething(arg1, arg2) {
  function nestedHelper(arg) {
    return process(arg)
  }

  return nestedHelper(arg1) + nestedHelper(arg2)
}

The problem with above code is that every time you call doSomething, the nestedHeler is recreated. In order to prevent that you can use an IIFE (Immediately invoked function):

const result = (function() {
  function privateHelper(arg) {
    var result = process(arg)
    return result
  }

  return function(arg1, arg2) {
    return (
      privateHelper(arg1) + privateHelper(arg2)
    )
  }
})()

When this code gets executed, the nested method will be created only once 🤷‍♂️.

Use Sets over Arrays where possible

The most obvious difference between an array and a Set is that array is an indexed collection, whereas, a Set is key based.

So why you should be using a Set?

Searching for an Item

Using indexOf() or includes() to check whether an item exists in an array is slow. In a Set you can find an item really easy using has():

const mySet = new Set([1, 1, 2])

console.log(mySet.has(2)) // true

Deleting an Item

In a Set, you can delete an item by its value. In an array, the equivalent is using splice() based on an element’s index. As in the previous point, depending on indices is slow.

const mySet = new Set([1, 2, 3, 4, 5])

mySet.delete(1)

Insert an Item

It is much faster to add an item to a Set than to an array using push() or unshift().

const mySet = new Set([1, 2])

mySet.add(3) // Successfully added

Storing NaN

You cannot use indexOf() or includes() to find the value NaN, while a Set is able to store this value.

Removing Duplicates

Set objects only store unique values. If you want to avoid storing duplicates, this is a significant advantage over arrays, where additional code would be required to deal with duplicates.

const mySet = new Set([1, 1, 2])

mySet.add(3) // Successfully added

console.log(mySet.values()) // 1,2,3

Summary

There are many of these examples where you might want to be careful when writing code in a real world business application. Speed is one of the most important part of every web application and considering some items like above points, will increase your code’s performance which can result in happier users 😊.

Hope this has helped you to start thinking about what other ways there are to solve the same issue rather than the first solution you’ll find on the web.

OffscreenCanvas - Render your graphics off the main thread

Sat, 11 May 2019 00:00:00 GMT

Rendering images on a web page can be a very compute heavy operation. This makes it harder to run these kind of operations on the main thread since it might slow down the rendering or affect the user experience.

Background

Canvas is one of the most interesting HTML elements in my opinion. The most popular reasons of using it are drawing graphics or animations.

From Google Developers site:

It is often used to create beautiful user experiences in media-rich web applications and online games.

The fact that you can script it, raises the bar even higher and makes the element even more interesting. This gives you great flexibility in so many situations, but we’re going to focus on animations or rendering in general today.

Problem

At the same time, executing JavaScript is one of the most frequent sources of user experience issues. Because all the JavaScript code runs on the same thread as user interaction, these sort of heavy compute operations can affect the user experience in addition to real and perceived performance.

Example

To give you an example of how easy it is to use canvas, consider the following code:

<canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas
  displays.
</canvas>

And in your JavaScript file:

var mainCanvas = document.getElementById(
  'myCanvas'
)
var mainContext = mainCanvas.getContext('2d')

var canvasWidth = mainCanvas.width
var canvasHeight = mainCanvas.height

var angle = 0

var requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame

function drawCircle() {
  mainContext.clearRect(
    0,
    0,
    canvasWidth,
    canvasHeight
  )

  // color in the background
  mainContext.fillStyle = '#EEEEEE'
  mainContext.fillRect(
    0,
    0,
    canvasWidth,
    canvasHeight
  )

  // draw the circle
  mainContext.beginPath()

  var radius =
    25 + 150 * Math.abs(Math.cos(angle))
  mainContext.arc(
    225,
    225,
    radius,
    0,
    Math.PI * 2,
    false
  )
  mainContext.closePath()

  // color in the circle
  mainContext.fillStyle = '#006699'
  mainContext.fill()

  angle += Math.PI / 64

  requestAnimationFrame(drawCircle)
}

drawCircle()

This is how it looks like:

See the Pen CanvasAnimation by Yaser Adel Mehraban (@yashints) on CodePen.

Now let’s add a twist to this code. Let’s run a bit of code at the same time as the animation is running. We add a button and a handler that calls a function to calculate the Fibonacci number sequence 🤷‍♂️. So let’s get into it and add the button:

<button type="button" id="make-busy">
  Hit the main thread!
</button>

And let’s implement the Fibonacci series with a recursive function. Then we will use the requestAnimationFrame to make sure this code is run on the next available repaint. For more info on requestAnimationFrame, make sure to check out the documentation.

function fibonacci(num) {
  if (num <= 1) return 1

  return fibonacci(num - 1) + fibonacci(num - 2)
}

document
  .querySelector('#make-busy')
  .addEventListener('click', () => {
    document.querySelector('#busy').innerText =
      'Main thread working...'
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        fibonacci(40)
        document.querySelector(
          '#busy'
        ).innerText = 'Done!'
      })
    })
  })

Now if you click on the button, you will see that the animation will stop and resume after the call to fibonacci function is returned.

See the Pen CanvasAnimation by Yaser Adel Mehraban (@yashints) on CodePen.

You can clearly see how users might feel if they face a similar situation on your web application. And this is when the OffscreenCanvas can help.

OffscreenCanvas

Up until recently, the drawing capabilities of canvas was directly dependent on the <canvas> element which meant it would depend on DOM (Document Object Model). OffscreenCanvas on the other hand, decouples DOM and Canvas API by moving it’s operations off screen.

To make it even more interesting, the rendering operations can now be run inside a worker, thanks to the aforementioned decoupling. This alone opens the doors of possibilities to all sorts of performance improvements.

Using it in a worker

Web Workers are the web’s version of multi threading. They allow you to run code/tasks in a separate thread (aka background 😁). Now that the decoupling between DOM and Canvas API has landed, we can run it inside a worker.

By expanding our previous example, we will add another copy of the same animation, but this time we’ll do the rendering in an OffscreenCanvas in a web worker.

We need to setup our worker code in a script (I’ve named animation.js) which we can use later. First we need to move our animation code to its own file. Then let’s create our worker code:

let animationWorker = null
self.onmessage = function(e) {
  switch (e.data.msg) {
    case 'start':
      if (!animationWorker) {
        importScripts(
          e.data.origin + '/animation.js'
        )
        animationWorker = new ThemedAnimation(
          e.data.canvas.getContext('2d')
        )
      }
      animationWorker.start()
      break
    case 'stop':
      if (!animationWorker) {
        return
      }
      animationWorker.stop()
      break
  }
}

No you can create two canvas elements side by side:

<main>
  <section class="support">
    Your browser does not support OffscreenCanvas.
  </section>
  <div>
    <h1>Canvas on main thread</h1>
    <p>
      Interaction is blocked when a theme is
      loading
    </p>
    <canvas
      id="canvas-window"
      width="400"
      height="400"
    ></canvas>
  </div>
  <div>
    <h1>Canvas on worker thread</h1>
    <p>
      Interaction works even if a theme is loading
    </p>
    <canvas
      id="canvas-worker"
      width="400"
      height="400"
    ></canvas>
  </div>
</main>

And finally create the worker from the script tag above, request an animation frame (we used setTimeOut previously), and run the animation in both canvases at the same time.

document
  .querySelector('main')
  .classList.toggle(
    'supported',
    'OffscreenCanvas' in window
  )
document
  .querySelector('#make-busy')
  .addEventListener('click', () => {
    document.querySelector('#busy').innerText =
      'Main thread working...'
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        Animation.fibonacci(40)
        document.querySelector(
          '#busy'
        ).innerText = 'Done!'
      })
    })
  })

const canvas = document.querySelector('#case1')
const animationWindow = new Animation(
  document
    .querySelector('#canvas-window')
    .getContext('2d')
)
animationWindow.start()
const workerCode = document.querySelector(
  '#workerCode'
).textContent
const blob = new Blob([workerCode], {
  type: 'text/javascript',
})
const url = URL.createObjectURL(blob)
const worker = new Worker(url)
const offscreen = document
  .querySelector('#canvas-worker')
  .transferControlToOffscreen()
const urlParts = location.href.split('/')
if (
  urlParts[urlParts.length - 1].indexOf('.') !==
  -1
) {
  urlParts.pop()
}
worker.postMessage(
  {
    msg: 'start',
    origin: urlParts.join('/'),
    canvas: offscreen,
  },
  [offscreen]
)
URL.revokeObjectURL(url) // cleanup

Let’s see what’s happening here. First we need to detect the feature (OffscreenCanvas is not fully supported yet). Next we hook an event handler for our button to put some load on the main thread. This will put some stress on our animation rendering in the main thread.

Afterwards, we get our canvas and run the animation code in the main thread, after which, we do the same in our worker. Except that we have to send a message to our worker to get that started (pay attention to the switch case in the worker code).

And last but not least, make sure you don’t miss the most important part of the code which is call to transferControlToOffscreen on the canvas. This is where the magic of OffscreenCanvas happens. This method converts our regular canvas into an OffscreenCanvas instance.

Below you can see the whole code in action:

See the full code OffscreenCanvas by Yaser Adel Mehraban (@yashints) on GitHub Pages.

Summary

We saw the difference in rendering smoothness when using an OffscreenCanvas in comparison with running the same on the main thread. This amazing feature can be used alongside all of the other techniques in my previous posts on web performance to help you have a faster website and happier customers 😊.

How do I keep up with frontend world

Thu, 09 May 2019 00:00:00 GMT

I’ve been in web development for a long time and not until four or five years ago did I had to keep up with this light speed moving train.

Background

There has been so many times when I heard some phrase from somewhere be it at a conference, talking to a colleague, or simply surfing the web, that I realised oh, I didn’t even know this exists.

Angular, React, Vue, RxJs, NgRx, TensorflowJs, CSS Houdini, Webpack, Parcel, Gulp, Grunt, npm, npx, CSS Grid, Flex box, Meteor, SASS, LESS, and the list goes on and on and on 😵.

Those moments can be terrifying, especially if suddenly everyone is talking about it. So finally, on a Sunday afternoon, I sat on our balcony thinking I can’t continue like this and always be behind of what’s happening.

I decided to talk to some of the people I knew (face to face, on Twitter, LinkedIn, conferences and meetups) were ahead of the game most of the times and see what they do in order to be where they are.

Since that afternoon where I was sitting on my balcony sipping a lukewarm coffee, I’ve learnt a few tips and tricks around what do to be able to feel you know enough to be able to keep up with what’s happening. So I decided to share my learnings (and hear yours in the comments) with you all.

1. Reading

The most important part of learning is reading (at least for me). I always keep some time and read (I will share some sources later 👇🏽) about what’s happening. I don’t usually go too deep into something when I read, just to learn the background and story of what the topic is about.

You are probably wondering when, and I know for most people this is the most critical part. I do not drive to work although I live in a suburb. I take the bus and spend the whole time reading. I will also spend some time before going to bed or after waking up early in the morning to catch up with what’s happening in the wild.

Note: I usually see articles and posts on social media and use Instapaper to keep track of where I am with my reading list. It’s got an iOS app which gives you a nice option when you share your links from basically anywhere.

Enough talking, tell me what do you read?

Your next question is probably what do you read. I have these as my reading sources:

Blogs and Feeds

I have an RSS feed for you to download which I’ve borrowed from Paul Irish and customised it.

In addition to that, I check below sources regularly:

Google’s Web Fundamentals
Open web platform weekly summary
Our very own Dev Community
CSS-TRICKS
CSS Wizardry
Smashing Magazine
And recently less of frontend weekly on Medium

Most days, 45 minutes to an hour of my time is spent on Twitter and about half of that on LinkedIn. I don’t spend more than a few second on anything. If something catches my eyes, it will be added to my Instapaper list.

Official documentation (tools and frameworks)

Official documentation is where I go deep into something. If want to learn everything about a subject, whether it’s a framework, library, tool, I start with their documentation. more than 80% of the time, I find what I’m after.

Books

This one is a tricky one. I haven’t had a situation where I finished the whole of a technical books. I use them as reference material and refer to them whenever I need to know a very specific detail of a subject. But I would never spend that much time reading a whole book, things are changing faster than I can finish the book, trust me on that 😉.

Weekly/Monthly news feeds

Weekly newsletters and feeds are awesome sources of new information. The maintainer spend a lot of time researching and sharing information and I have to say kudus to them.

Here are a few I use:

2. Following cool people

I follow a well-curated list of people on social media who are active and produce new things. This is a tricky situation because sometimes you realise how much you don’t know. But I love it and it’s a great thing for me personally to know what’s missing from my knowledge. It helps me form a plan for my learnings.

Are you still wondering why?

If you feel like you are the smartest person in the room, you’re in the wrong room.

Confucius

These are some of the people I follow:

Addy Osmani - Web and mostly performance
Paul Irish - Web
Jake Archibald - Web, mostly standards
David Walsh - JavaScript
Christian Heilmann - Web
Dan Abramov - React
Stephen Fluin - Angular
Sarah Drasner - Vue
Asim Hussain - JavaScript, AI, TensorflowJs
Sean Larkin - Webpack

And the list continues with another 800 or so amazing people, but you might have noticed a theme here. I follow specific people in different categories to find out what’s happening.

Note: I do follow people from all sorts of different backgrounds and not only ffrontend. A good frontend engineer should know enough about the backend and considering I am consultant, it’s a must for me.

3. Conferences and Meetups

Conferences are the most fascinating place to meet smart people, learn a few things and get an idea of where the industry moving to. It give you a breadth (and sometimes even depths) in multiple topics that you didn’t even knew they are a thing.

Apart from attending, I usually speak as well. This is also a really good way of learning. You should know a topic well enough to be able to present it to your audience. To see when and where I’ll be speaking, have a look at my speaking schedule.

There are thousands of conferences out there. But I usually use these sites to find out what’s happening when:

4. Videos, online courses and Podcasts

Some people like to watch videos and online courses. This is how they learn, however, for me that’s not the case. But I don’t exclude them from my sources, especially recorded conference talks. Below is a list of YouTube channels and online courses I use occasionally:

Google Chrome Developers - This is super useful for me since they have pretty much short clips teaching something useful and frequently
Microsoft Developer
NDC Conferences
ng-conf
Nordic.js
Vue NYC
React conf
Angular Connect
Angular channel

If you’re looking at online courses, these are my favourite:

Another good source of information are podcasts. They are so good if you ride/drive to work everyday. You can just listen to become aware of the latest news or learn about a technology.

Below are a few I use:

5. Pet projects

Many people, including myself, learn the best by doing the actual thing. I need to code to learn about something whether it’s a new technology or a library or simply a new API.

Side projects (aka pet projects) are a great way to grow as a developer, both personally and professionally. They let you get out of your comfort zone, learn new skills, and exercise your creative muscles. But it can be hard to get anything done while juggling a day job, kids, friends, family, and countless other commitments.

In the past, I’ve tried to cram side project work into the cracks between other items in my calendar. It was frustrating at best; completely ineffective at worst. I constantly felt like I was shortchanging the projects I was most passionate about. So what should we do?

Start with something small but keep doing it

It is definitely hard to start a project, harder to get back to it after some time and re-start it when you’ve been working on something completely different.

So working on it a bit everyday keeps you on track while not bored or tired. If you keep doing it everyday it will be very easy to pick it where you left off since it is still in your mind.

No deadlines or pressure

Don’t put deadlines or pressure on yourself for a side project. It is not a client engagement and you don’t want to loose your excitement about it really soon. Keep focusing on one or two task a week and finish it in a relaxed atmosphere.

Take your time, have a juice (or beer, or coffee 😂) or fresh fruit handy and let the feeling of small holiday overcome the daily agile mindset. Close the Facebook, stop scrolling your Twitter feed and focus on what you promised yourself doing everyday.

Once the habit is formed, the pressure is off and you start feeling the joy about doing something you feel passionate about.

Shift the project time to time

Don’t work on something for too long. as we see new languages and technologies introduced everyday, we should shift our pet project to use different languages/technologies accordingly.

I love frontend specifically, however try to keep track of security, azure, IoT, Hololens, etc. to be a bit more across other areas.

My approach to this is to complete a project I start working on and then create a new one using the new tech I want to get familiar with.

Talk about it with someone

This one doesn’t have to do anything with your pet project, but helps you find the weakness points and new challenges since it is exposed to people who love asking questions and learn new things.

Even if it is an internal brown bag session, or presentation, or you are talking on an external event like meetups or conferences that project helps you gather the contents easily and demo something which even demo gods cannot prevent it (since you’ve played with it enough previously).

6. Writing

There are a few reasons why writing an article helps you learn new things and put the subject into your long term memory.

In short writing helps you:

Slow down a little bit and focus on a topic.
Think a little differently about something as you figure out how to explain it.
Consider issues conceptually rather than in a more narrow or applied perspective.
Research things more clearly, and document your research with links.
Be more likely to remember things later.
Have a good place to search when you can’t remember things later.

I always consider this to myself (which I’ve learnt from a colleague of mine), do not write for others. Write for yourself and make sure you detail down everything you need to know at a later point in time. This then will help others too.

Having discipline

According to many philosophers, self disciple is like muscle, the more you train it, the more you enjoy the result. Even if you follow all the points I’ve mentioned so far, but don’t get yourself a good daily habit, it’s not going to help you.

Think of how many times you started something and let it go half way through, or never finished it. It’s very important that you stick to a schedule and follow it no matter what.

Here are a few tips I’ve learnt:

Have a goal for yourself. Set milestones to reach that goal and evaluate your progress regularly.
Do not compare yourself with others. There will be always people who are smarter than you. So try to be reasonable and consider your capabilities. At the same time don’t set your goals too low, stretch yourself a bit and push for a better self than what you were yesterday.
Have self motivation, praise yourself for your big achievement and have a little punishment for when you fail to do something.

Never give up, learn to wind down

At times you might feel frustrated about your progress. Or simply think you would never be able to keep up like other people around you.

Let me tell you something, when that happens, you need to wind down. This is one of the many signs of a burn out. You might have pushed yourself too much and spent more than your body could have tolerated.

This is probably good time for a break, a holiday or a change of direction. Never be afraid of a telling yourself you need a rest. The world never stops, so you should stop trying to chase it constantly.

Summary

I think I’ve covered most of the tricks I use to keep up with what’s happening in the frontend world. Please, please share your awesome ideas in the comments and I will try to keep updating this post with those to have a far better plan together 🖐.

Another point is that these tricks will help you regardless of whether you’re a frontend developer or not 🔥.

Knock out your unused CSS

Tue, 07 May 2019 00:00:00 GMT

Unused CSS is a one of the issues most web applications suffer when it comes to performance and page load time.

Disclaimer

Apart from option one in this post, most of the time you will need a tool and some manual intervention to be able to safely eliminate unused CSS. These tools are great in a sense that they will let you know what you don’t know; which classes in your template files are not used.

These tools can’t work with complex scenarios like when you have JavaScript adding a DOM element in the template.

They will have problems with dynamic templates in Single Page Applications (SPA) or when your template changes based on a state on your server side code.

Problem

As I said, Unused CSS is a one of the issues most web applications suffer when it comes to performance and page load time.

This even gets worst when you use a CSS library like Tailwind, or an older versions of CSS frameworks like Bootstrap or Material Design.

Note: most CSS frameworks have moved to modular structure where you could import only the part you need without having to include the whole bundle.

Best and safest approach

To my opinion, the best and safest approach is to be careful and get rid of any CSS file or part you remove from your HTML or template files. Do not be lazy or ignorance when it comes to tech debts like this. If you’re involved in a green field project, make sure you do not copy paste large chunks of CSS from somewhere you’re looking into without realising which parts are actually used.

You can manually find your unused CSS using the DevTools in Google Chrome with following these steps:

Open the Chrome DevTools using F12 or Ctrl Shift J on Windows or Command Option J on Mac.
Open the command menu by pressing Ctrl Shift P on Windows or Command Shift J on Mac.
Type in “Coverage” and click on the “Show Coverage” option
Click on reload button at the coverage tab.
Select a CSS file from the Coverage tab which will open the file up in the Sources tab.

Any CSS rule which has a solid green line on the left side is used. Those with a red line are not:

Warning: Just because a rule isn’t used on this page doesn’t mean it’s not used elsewhere. You would ideally check the coverage on all pages and combine the result for a better overview.

Tools

Some times you cannot adhere to ☝🏼 point because of various reasons. Such as you got involved in a brown field project or the code base is to large to be able to refactor and fix the issue in a timely fashion.

In this case you might be looking at some tool to automate the process and do the clean-up systematically during build time. Fortunately there are many tools available which help you with this. I will cover some famous ones and mention a short list at the end for good measure 😉.

1. PurifyCSS

PurifyCSS is tool that can analyse your files, go through code, and figure out what classes are not used. Most of the time when you have static HTML files this tool can eliminate nearly all your unused CSS.

Apart from that, it can also work to a degree with Single Page Applications (SPA).

Setup

Standalone

You can install this package via npm:

npm i -D purify-css

And some basic usage:

import purify from 'purify-css'
const purify = require('purify-css')

let content = ''
let css = ''
let options = {
  output: 'filepath/output.css',
}
purify(content, css, options)

If you’re wondering well, this is not gonna help me, you might be right. But this is the simplest form. In fact in the purify command, content and css parameters can be an Array of glob file patterns. Now you see the bigger picture and how this can help.

Now let’s make it a bit more complex.

via Grunt

First you need to install the grunt package:

npm install grunt-purifycss --save-dev

And then use it:

grunt.initConfig({
  purifycss: {
    options: {},
    target: {
      src: ['path/to/*.html', 'path/to/*.js'],
      css: ['path/to/*.css'],
      dest: 'tmp/purestyles.css',
    },
  },
})

This will handle even scenarios when you have a class added using JavaScript 😍. So this will be picked up:

<!-- html -->
<!-- class directly on element -->
<div class="button-active">click</div>

Or in JavaScript:

// javascript
// Anytime your class name is together in your files, it will find it.
$(button).addClass('button-active')

Or even a bit more complex scenario:

// Can detect if class is split.
var half = 'button-';
$(button).addClass(half + 'active');

// Can detect if class is joined.
var dynamicClass = ['button', 'active'].join('-');
$(button).addClass(dynamicClass);

// Can detect various more ways, including all Javascript frameworks.
// A React example.
var classes = classNames({
  'button-active': this.state.buttonActive
});

return (
  <button className={classes}>Submit</button>;
);

Warning: The Webpack plugin for purifycss is deprecated. You will need to use Purgecss which I will go through later on.

CLI

Install the CLI:

npm install -g purify-css

And you can see the help using -h param:

purifycss -h

purifycss <css> <content> [option]

Options:
  -m, --min        Minify CSS                                   [boolean] [default: false]
  -o, --out        Filepath to write purified css to                              [string]
  -i, --info       Logs info on how much css was removed        [boolean] [default: false]
  -r, --rejected   Logs the CSS rules that were removed         [boolean] [default: false]
  -w, --whitelist  List of classes that should not be removed        [array] [default: []]
  -h, --help       Show help                                                     [boolean]
  -v, --version    Show version number                                           [boolean]

Stats

This library can help you big time. It’s pretty effective and works on complex scenarios. But as I mentioned before you will need to have good tests to able to find out if anything is messed up after clean-up.

In terms of Boostrap, PurifyCSS can reduce up to ~ 33.8% of unused CSS.

2. Purgecss

Purgecss is another powerful tool to remove unused CSS. It can be used as part of your development workflow. It comes with a JavaScript API, a CLI, and plugins for popular build tools.

CLI

You can install Purgecss globally or using npx.

npm i -g Purgecss

And use it:

Purgecss --css <css> --content <content> [option]

As you can see, the API is very similar to PurifyCSS, but of course options would be different.

Via Webpack

You should install the plugin first:

npm i -D Purgecss-webpack-plugin

And the add it to your Webpack config:

const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurgecssPlugin = require('Purgecss-webpack-plugin')

const PATHS = {
  src: path.join(__dirname, 'src'),
}

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?sourceMap',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('[name].css?[hash]'),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, {
        nodir: true,
      }),
    }),
  ],
}

For more information please refer to their documents.

3. UnCSS

UnCSS is another tool to help you remove your unused CSS. But this tool is a bit different in sense that it will load your files in jsdom, then will parse all the stylesheets with PostCSS.

Once finished, document.querySelector will filter out selectors that are not found in the HTML files. And finally, the remaining rules are converted back to CSS.

Note: The best thing about this library which I am in love with, is their unofficial server where you can paste your HTML and CSS it will show you the shortened CSS online.

Install

Again you can use npm to install it or use npx:

npm i -g uncss

You can use UnCSS with node:

var uncss = require('uncss')

var files = [
    'my',
    'array',
    'of',
    'HTML',
    'files',
    'or',
    'http://urls.com',
  ],
  options = {
    ignore: ['#added_at_runtime', /test\-[0-9]+/],
    media: [
      '(min-width: 700px) handheld and (orientation: landscape)',
    ],
    csspath: '../public/css/',
    raw: 'h1 { color: green }',
    stylesheets: [
      'lib/bootstrap/dist/css/bootstrap.css',
      'src/public/css/main.css',
    ],
    ignoreSheets: [/fonts.googleapis/],
    timeout: 1000,
    htmlroot: 'public',
    report: false,
    banner: false,
    uncssrc: '.uncssrc',
    userAgent:
      'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
    inject: function(window) {
      window.document
        .querySelector('html')
        .classList.add('no-csscalc', 'csscalc')
    },
  }

uncss(files, options, function(error, output) {
  console.log(output)
})

/* Look Ma, no options! */
uncss(files, function(error, output) {
  console.log(output)
})

/* Specifying raw HTML */
var rawHtml = '...'

uncss(rawHtml, options, function(error, output) {
  console.log(output)
})

Or use their build flows which supports Gulp, Grunt and Broccoli (unfortunately no Webpack 😔). For more information about how to setup those tools refer to their documentation.

Comparison

Now let’s compare these tools and see their pros and cons.

PurifyCSS

Some people believe the biggest problem with PurifyCSS is lack of modularity. Some think it’s also its biggest benefit 🤷🏽‍♂️. It can work with any file type not just HTML. It can also find selectors which are added using JavaScript.

Unfortunately since every word is considered a selector, this can end up in a lot of false positives and make the resulting CSS a bit larger than it should be.

Purgecss

Purgecss fixes the above issue by providing the possibility to create an extractor. This is simply a function which takes content of a file and extracts the list of CSS selectors used in it.

The extractor can be used as a parser that returns an AST (abstract syntax tree) and looks through it to find any CSS selectors. This is the way purge-from-html works. You can specify which selectors you want to use for each file type, allowing you to get the most accurate results. Additionally, you can use the default or legacy extractor, which will mimic PurifyCSS’s behaviour.

That said, Purgecss has some drawbacks too. FIrst and foremost you will need to write a custom extractor for frameworks like Tailwind. Another problem is when you use a syntax highlighter like primjs, in which case you will have to whitelist your token classes using a property called whitelistPatternsChildren.

Another point to consider is that Purgecss doesn’t have an extractor for JavaScript files. But because of its modularity, developers can create custom extractors for frameworks like Angular, React or Vue.

UnCSS

Because of its HTML emulation and JavaScript execution, UnCSS is effective at removing unused selectors from web applications. However, its emulation can have a cost in terms of performance and practicality.

At this point in time, UnCSS is probably the most accurate tool to remove unused CSS if you do not use server-side rendering.

Other tools

Here is of other tools you can consider:

GitBit: an online tool which crawls your root page and stylesheets linked in it.
UnusedCSS: another online tool which easily find and removes unused CSS rules

Summary

Although these tools are really helpful in terms of finding unused CSS, each has its own drawbacks and you will need to be careful to not end up with a broken UI.

Hope you’ve gained just a tiny bit insight on how to find your unused CSS and deploy them to space 😁👇.

Deploy... to Space?!? 🚀🔥🤯 https://t.co/zb8jNPs5zs
— StackBlitz (@stackblitz) May 2, 2019

Removing duplicates from arrays in JavaScript

Wed, 24 Apr 2019 00:00:00 GMT

There are multiple ways to remove duplicates from an array with JavaScript. But, it’s very important to know the details of how efficient they, especially if you’re dealing with large arrays.

Simplest approach

The easiest way is to use ES6’s (ECMAScript 2015) Set object. This let’s you store unique values of any type. It will automatically remove duplicates for us, isn’t that sweet?

const fruit = [
  'apple',
  'orange',
  'avo',
  'pear',
  'cherries',
  'strawberries',
  'avo',
  'avo',
];

let uniqueFruit = [...new Set(fruit)];

console.log(uniqueFruit); // ['apple', 'orange', 'avo', 'pear', 'cherries', 'strawberries']

Here we had to use the spread operator to get an array from Set again.

Smart but naïve approach

We can use the built in filter method of ES5 to achieve the same:

const fruits = [
  'apple',
  'orange',
  'avo',
  'pear',
  'cherries',
  'strawberries',
  'avo',
  'avo',
];

const uniqueFruit = fruits.filter(
  (item, i, arr) => {
    return arr.indexOf(item) == i;
  }
);

console.log(uniqueFruit); // ['apple', 'orange', 'avo', 'pear', 'cherries', 'strawberries']

What we’re doing here is not that complex. We’re going through each element and check if the first position of this item in the array is equal to current position. Since these two positions are different for duplicate items, they will get filtered and we end up with a unique array 🤩.

Warning: This approach is not that efficient for large arrays (quadratic time).

Hash table to rescue

This approach is to place each item in a hashtable and then check for it’s presence. This gives a linear time, but has at least two pitfalls:

Since hash keys can only be string, this code doesn’t distinguish number and numeric strings. This means ['1', 1] will return [1].
Because of ☝🏼, all objects will be equal 🤦‍♂️.

function unique(fruits) {
  var seen = {};
  return fruits.filter(item => {
    return seen.hasOwnProperty(item)
      ? false
      : (seen[item] = true);
  });
}

The hybrid and best approach

A better approach combines both approaches. It uses hash lookups for primitive types and linear search for objects:

function unique(fruits) {
  var prims = {
      boolean: {},
      number: {},
      string: {},
    },
    objs = [];

  return fruits.filter(item => {
    var type = typeof item;
    if (type in prims)
      return prims[type].hasOwnProperty(item)
        ? false
        : (prims[type][item] = true);
    else
      return objs.indexOf(item) >= 0
        ? false
        : objs.push(item);
  });
}

Sort & unique

Another option is to sort the array and then remove the items equal to the one right after:

function unique(fruits) {
  return fruits
    .sort()
    .filter((item, pos, ary) => {
      return !pos || item != ary[pos - 1];
    });
}

This item is similar to hash table approach, it does not work with objects. And more importantly we have to change the original array which is a side effect and not a good way to go about this.

Using reduce

const uniqueFruits = fruits.reduce((a, b) => {
  if (a.indexOf(b) < 0) a.push(b);
  return a;
}, []);

console.log(uniqueFruits); // ['apple', 'orange', 'avo', 'pear', 'cherries', 'strawberries']

This approach uses an accumulator to see whether the item is previously inserted into it or not. Very similar to filter approach we introduced earlier, a bit faster though.

Summary

These are just a couple of ways of doing the same operation. But as you can see, very different in nature and support in browsers. Pick carefully and happy coding.

Web performance statistics infographic

Sun, 14 Apr 2019 10:38:01 GMT

A while back, Nick Galov from Hostingtribunal.com contacted me to let me know they had created an inforgraphic photo for web performance statistics.

This infographic contains some very useful statistics regarding page load time and some advice on where to focus for improvements.

This was after I’d given my talk on web performance at NDC Sydney, so the timing was really good.

What happened

I got so busy during the last couple of months that I rarely blogged and more was focused on my talk for NDC Porto.

What next

Here you go, this is the infographic promised to be published on my blog. Hope this helps people find their motive to move towards a faster web.

Fixing: unable to deploy to npm: 'you must be logged in'

Fri, 15 Feb 2019 16:00:00 GMT

Recently I created a small library with Angular which I wanted to publish to npm (the node package manager). However, when I had everything in place from a build perspective using Travis CI in my GitHub repo, it was failing to publish the package with a 401 login error.

Background

I guess I used a lot of terms and concepts you might not be familiar with. So let’s take a step back and see what are those.

I have a GitHub repository where the code is kept. You can setup a build for your repository using Travis CI if you enable Travic CI on your repo and create a file named .travis.yml in root directory, with each push to your branch the code is built and even published.

I am not going to explain how to setup a build pipeline using Travic CI. You can find instructions on their documentation here. The docs are very comprehensive and detailed with examples on some of the most common project types.

The build is very simple and doesn’t require any special steps. However, when you want to publish it (to npm in my case), I had to generate a authentication token and encrypt it using Travic CI CLI so I can put it in my build file.

Note: Do not put the token as is in your build file, since anyone can use it when you commit your code and push it up stream.

I followed the instructions here to setup deploy steps for my project.

However, when I pushed my code, although the build was successful, I was getting an 401 error during deployment:

Why it happens

So it seems a while back Travis has moved away from .org domain and uses .com. However, the CLI is still defaulting to .org as so when you encrypt your API key, it will be for wrong domain.

Solution

Fortunately you can easily fix this using --com flag when you’re encrypting your key. So from the root of your project just use these commands to re-encrypt your key with right domain:

travis login --com
travis encrypt --com <token> --add 'deploy.api_key'

Tip: If you’re a windows user like me, you can use Windows 10 WSL (windows subsystem for Linux) and it works like a charm.

Once you’ve applied the commands, simply commit and push your code up.

Hope this helps you save some time and have a great weekend.

Setting Google Analytics for Angular applications

Tue, 12 Feb 2019 00:00:00 GMT

Many a times we want to add some sort of analytics to our applications and for me the most obvious choice would be Google Analytics.

Google is in the process of phasing out the legacy ga.js and analytics.js products that ships with Google Analytics, with its new, more flexible Global Site Tag gtag.js that ships with Google Tag Manager.

So let’s see what it takes to set it up and I assure you it will be really quick.

Get a tracking id from Google Analytics

If you already have a property in Google Analytics, simply get it from admin dashboard in property list. If not follow these steps to create one.

Tracking id is in this form usually:

UA-XXXXXXXXX-X

In the same place you can click on tracking code page and you will see a code snippet which you can copy and put in inside your index.html file:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXXX-X');
</script>

We don’t need the last line since will be configuring it from our app. So remove it:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

Configuring our project

If you have an existing application simply ignore the installation process. I will be creating a new app:

ng new analytics

From here select yes for routing:

When it comes to capturing changes in a SPA app it is important to listen to changes in routes and events. We would ideally listen to those and send them to analytics, but we want to do it only once for the entire application.

The best place for that is in root component. So open your AppComponent and add the code below to it:

import { filter } from 'rxjs/operators';

declare var gtag;

export class AppComponent {
  constructor(router: Router) {
    const navEndEvents = router.events.pipe(
      filter(
        event => event instanceof NavigationEnd
      )
    );

    navEndEvents.subscribe(
      (event: NavigationEnd) => {
        gtag('config', 'UA-XXXXXXXXX-X', {
          page_path: event.urlAfterRedirects,
        });
      }
    );
  }
}

We are not doing anything special here, first, we get a reference to router in the constructor. Then we filter its events to only get navigation end events.

Afterwards we subscribe to those and use the one liner from Google Analytics code snippet and add one parameter to it which is its URL.

Now let’s test it by defining some routes:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModole({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModile {}

And that’s it. If you start the app using ng serve from command line you should start receiving events in your analytics dashboard.

The essential difference between pure and impure pipes in Angular and why that matters

Thu, 31 Jan 2019 00:00:00 GMT

When writing a custom pipe in Angular you can specify whether you define a pure or an impure pipe:

@Pipe({
  name: 'myCustomPipe',
  pure: false/true        <----- here (default is `true`)
})
export class MyCustomPipe {}

Angular has a pretty good documentation on pipes that you can find here. But as it often happens with documentation the clearly reasoning for division is missing. In this article I’d like to fill that hole and demonstrate the difference from the prospective of functional programming which shows where the idea of pure and impure pipes come from. Besides learning the difference you will know how it affects the performance and this knowledge will help you write efficient and performant pipes.

I work as a developer advocate at ag-Grid. If you’re curios to learn about data grids or looking for the ultimate Angular data grid solution, get in touch or give it a try with the guide “Get started with Angular grid in 5 minutes”. I’m happy to answer any questions you may have.

A pure function

There’s so much information on the web about functional programming that probably every developer knows what a pure function is. For myself I define a pure function as a function that doesn’t have an internal state. It means that all operations it performs are not affected by that state and given the same input parameters and produces the same deterministic output.

Here are the two versions of a function that adds numbers. The first one is pure and the second one is impure:

const addPure = (v1, v2) => {
  return v1 + v2;
};

const addImpure = (() => {
  let state = 0;
  return v => {
    return (state += v);
  };
})();

If I call both functions with the same input, say number 1, the first one will produce the same output 2 on every call:

addPure(1, 1); // 2
addPure(1, 1); // 2
addPure(1, 1); // 2

while the second one produces different output:

addImpure(1); // 1
addImpure(1); // 2
addImpure(1); // 3

So the key takeaway here is that even if the input doesn’t change the impure function can produce different output. It means that we cannot use the input value to determine if the output will change.

Let’s see another interesting consequence of the fact that a function has a state. Suppose you have a calculator object that takes as a parameter the function to add numbers and uses it to make calculations:

class Calculator {
  constructor(addFn) {
    this.addFn = addFn;
  }

  add(v1, v2) {
    return this.addFn(v1, v2);
  }
}

If the function is pure and doesn’t have a state it can be safely shared with many instances of the Calculator classes:

class Calculator {
  constructor(addFn) {
    this.addFn = addFn;
  }

  add(v1, v2) {
    return this.addFn(v1, v2);
  }
}

const c1 = new Calculator(add);
const c2 = new Calculator(add);

c1.add(1, 1); // 2
c2.add(1, 1); // 2

However, the function that is not pure can’t be shared. This is because the operations performed by one instance of Calculator will affect the function state and consequently the result of operations performed by the other instance of Calculator:

const add = (() => {
  let state = 0;
  return v => {
    return (state += v);
  };
})();

class Calculator {
  constructor(addFn) {
    this.addFn = addFn;
  }

  add(v1, v2) {
    return this.addFn(v1), this.addFn(v2);
  }
}

const c1 = new Calculator(add);
const c2 = new Calculator(add);

c1.add(1, 1); // 2
c2.add(1, 1); // 4  // <------ here we have `4` instead of `2`

You can see that the first call to add method on the second instance produces the output 4 instead of expected 2.

So let’s recap what we’ve learnt so far about functions:

Pure:

input parameters value determine the output so if input parameters don’t change the output doesn’t change
can be shared across many usages without affecting the output result

Impure:

cannot use the input value to determine if the output will change
cannot be shared because the internal state can be affected from outside

Applying that knowledge to Angular pipes

Suppose we defined one custom pipe and make it pure:

@Pipe({
  name: 'myCustomPipe',
  pure: true,
})
export class MyCustomPipe {}

And use it like this in a component template:

{% raw %} <span>{{ v1 | customPipe }}</span>
<span>{{ v2 | customPipe }}</span> {% endraw %}

Since the pipe is pure it means that there’s no internal state and the pipe can be shared. How can Angular leverage that? Even though there are two usages in the template Angular can create only one pipe instance which can be shared between the usages. For those who know from my previous articles what a component factory is here is the relevant compiled code which defines only one pipe definition:

function View_AppComponent_0(_l) {
  return viewDef_1(0, [
    pipeDef_2(0, ExponentialStrengthPipe_3, []), // node index 0
    ...

which is shared in updateRenderer function:

function(_ck,_v) {
    unwrapValue_7(_v,4,0,_ck(_v,5,0,nodeValue_8(_v, 0),...);
                                                   ^^^
    unwrapValue_7(_v,8,0,_ck(_v,9,0,nodeValue_8(_v, 0),...);

^^^

Here is the unwrapValue function is used to retrieve the current pipe value by calling transform on it. The pipe instance is referenced by the node index in the nodeValue function call — which is 0 in this case.

However, if we define the pipe as impure assuming there’s some internal state:

@Pipe({
  name: 'myCustomPipe',
  pure: false,
})
export class MyCustomPipe {}

We don’t want the pipe in the second usage to be affected by the call to it in the first usage so angular creates two instances of the pipe each with its own state:

function View_AppComponent_0(_l) {
   return viewDef(0, [
       ...
       pipeDef_2(0, ExponentialStrengthPipe, []) // node index 4
       ...
       pipeDef_2(0, ExponentialStrengthPipe, []) // node index 8

and it is not shared in updateRenderer function:

function(_ck,_v) {
    unwrapValue_7(_v,4,0,_ck(_v,5,0,nodeValue_8(_v, 4),...);
                                                   ^^^
    unwrapValue_7(_v,8,0,_ck(_v,9,0,nodeValue_8(_v, 8),...);
                                                   ^^^

You can see here that instead of node index 0 now for each usage Angular uses different node index — 4 and 8 respectively.

The second point from the summary in the first chapter was that with pure functions we can use the input value to determine if the output will change while with impure functions we can’t have such guarantee.

In Angular we pass input parameters to a pipe like this:

{% raw %}
<span>{{ v1 | customPipe:param1:param2 }}</span>
{% endraw %}

So if a pipe is pure we know that it’s output (through transform method) is strictly determined by the input parameters. If the input parameters don’t change the output won’t change. This reasoning allows Angular to optimize the pipe and call transform method only when input parameters change.

But if a pipe is impure and has internal state the same parameters do not guarantee that same output as demonstrated with the call to impure addFn function in the first chapter. It means that Angular is forced to trigger transform function on a pipe instance on every digest.

A good example of impure pipe is the AsyncPipe from @angular/common package. This pipe has internal state that holds an underlying subscription created by subscribing to the observable passed to the pipe as a parameter. Because of that Angular has to create a new instance for each pipe usage to prevent different observables affecting each other. And also has to call transform method on each digest because even thought the observable parameter may not change the new value may arrive through this observable that needs to be processed by change detection.

The other two impure pipes are JsonPipe and SlicePipe. Angular puts an additional restriction on a pipe to be considered pure — the input to the pipe cannot be mutable. If the input is mutable, a pipe need to be re-evaluated on every digest because an input object can be mutated without changing the object reference (the pipe parameter stays the same). And that’s exactly why both JsonPipe and SlicePipe pipes are not considered pure despite not having an internal state.

The rest of Angular default pipes are pure.

Conclusion

So as we’ve seen impure pipes can have significant performance hit if not used wisely and carefully. The performance hit comes from the fact that Angular creates multiple instances of an impure pipe and also calls it’s transform method on every digest cycle.

I hope by reading the article you now know the difference between the two types, how Angular handles both of them and what mental model should you use when designing and implementing your custom pipes.

Also, check out another good article that demonstrates other advantages of pure pipes in Angular is The benefits of using pure pipes in Angular templates.

Untitled RSS Feed

Let's build a game with Tensorflow.js in 10 minutes 🎮

Let’s review our plan 🗺️

Disclaimer

Finding the game

Finding the right model

Let’s code 💻

Creating the project structure

Converting the game code into a module

Improvement

Summary

aria-live, accessibility tips 🦮

Background

How does aria-live works?

It doesn’t make sense? Let’s see it in action

Let’s be polite 😊

Holly molly, something urgent happened ⚠️

Turn it off and save energy 😁

Making sure the aria-live regions work effectively

Include the area from beginning

Want to hide the text but get it announced 😲?

aria-atomic

What else?

Summary

Let's get to know the ResizeObserver 👋🏼

The what

Enough talking, shoe me the code 😉

call-back input object

Demo

Demo explained

Browser support

Let's write HTML like a pro 😎

The why

DOCTYPE

Optional tags

Closing tags

Charset

Language

Title

The base tag

Description

Semantic tags

hr shouldn’t be used for formatting

Be careful when you use the title attribute

Single or double quotes

Omit boolean values

Omit type attribute

Validate your markup

Say no to inline style ☢

Summary

JavaScript modules, the good, the bad and the ugly 🧐

CommonJS & require

Usage

Definition

Multi export

ES6 Modules

Default export

Mixed export

Importing the whole module

Why should you use modules 😍?

What’s the catch 🤔?

Trick or treat?

Wow that’s great, but why 🧐?

How can I use them?

Summary

Native lazy loading is landed in Chrome

Intro

About the attribute

Feature detection

Prevent content reflow

iframe loading

What’s the catch

What about other browsers?

Let's setup a VPN server, for free, on AWS, under 5 min

AWS console

Select the OpenVPN

Selecting instance type

Launch the instance

Preparation

Connecting

How does `aria-live` works?

Making sure the `aria-live` regions work effectively

`aria-atomic`

The `base` tag

`hr` shouldn’t be used for formatting

Be careful when you use the `title` attribute

CommonJS & `require`

`await` can take in a “thenable”

`async` class methods

`Array.prototype.{flat, flatMap}`

`String.prototype.{trimStart, .trimEnd}`

`Object.fromEntries`

`Symbol.description`

`Function.toString`

`JSON.stringify`

`Array.sort` Stability

`[]` is equal `![]`

`true` is `false`

`parseInt` is just bad

`NaN` is not a number