Javascript on dev notes

How to use a cache busting filename with webpack

Sat, 17 Jul 2021 00:00:00 +0000

If you’re using a custom webpack config, instead of a template or Create React App, you’ll want to make sure the filename has a cache busting suffix. Cache busting means making sure the users browser loads the newest version of our app, if it has been updated, instead of using a cached version.

A naive webpack setup would just use a single output file with a fixed name.

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  }

Here, we are using HtmlWebpackPlugin to manage the creation of our index.html file and it will handle inserting a <script> tag into the index.html with our bundle filename. For now we are bundling all of our JavaScript into single file called bundle.js.

Convert an array to a map in JavaScript

Tue, 06 Jul 2021 00:00:00 +0000

Sometimes it’s useful to convert a array to a map for convenience or performance reasons. But how can we achieve that so that the resulting code will be easy to understand?

I’m using the term map here to mean a data structure where a value can be accessed using an unique key. In JavaScript, objects can be used as maps but there also exists a special Map type which has some advantages and disandvantages when compared to using objects. We won’t be covering Map in this article.

Setup Spectron and Testing Library to effectively test your Electron.js application

Sun, 14 Mar 2021 09:33:01 +0000

In this article, we will setup Spectron and use Testing Library with WebdriverIO to test an Electron.js application.

Spectron is an open source framework for writing integration tests for Electron apps. It starts your application from the binary, so you can test it as a user would use it. Spectron is based on ChromeDriver and WebdriverIO.

Testing Library WebdriverIO is a library you can use to test web applications through WebdriverIO. It’s part of the Testing Library family of libraries.

How using Testing Library will help you improve the accessibility of your application

Tue, 23 Feb 2021 09:33:01 +0000

Testing Library is a JavaScript testing framework that focuses on testing the way the application is used. Testing Library will also help you avoid testing implementation details and make your tests more maintainable. Testing the way the application is used will give us the confidence that the application is working as intended.

What’s also nice about testing-library, is that its recommended queries are designed to work well on accessible elements. This means using Testing Library will also reveal accessibility problems in your application.

Making API calls in React useEffect

Sat, 16 May 2020 09:33:01 +0000

useEffect is a hook added in React 16.8. It allows you to perform side effects in function components. This means you can update things outside of React based on your propsand state. Fetching data when the component state changes, changing the page <title> or connecting to a WebSocket server are all examples of side effects that can be done with useEffect.

As an example, we are going to build a component which fetches data from Cat Facts API and displays the received facts as a list. Finally we’ll add buttons to select the animal we want facts about.

How to loop over a JavaScript object

Thu, 30 Apr 2020 09:33:01 +0000

There’s a few ways to loop over a object in JavaScript. Let’s look at a couple of them.

Let’s say we have a object like this

const animals = {
    cat: "meow",
    dog: "woof",
    duck: "quack",
    pig: "oink",
    turkey: "gobble"
}

One way to loop over a object is to use the Object.keys() function to first retrieve the keys in a object and then loop over the returned array.

const keys = Object.keys(animals);
for (let i = 0; i < keys.length: i++) {
  const animal = keys[i];
  const sound = animals[animal];
  console.log(`A ${animal} says ${sound}!`);
}
// A cat says meow!
// A dog says woof!
// A duck says quack!
// A pig says oink!
// A turkey says gobble!

You could also use Array function forEach for looping the array but in ES6 the for..of syntax was introduced for looping iterators (including arrays).

The very basics of React Hooks

Mon, 27 Apr 2020 09:33:01 +0000

Hooks are an React API that were introduced in React 16.8 a little more than a year ago (february 2019). They let you use state in your React components without writing classes.

In this post I’ll talk about the useState hook and after reading it you’ll have a basic idea how to use it to add state to your functional components.

Let’s start with a simple functional component.


import React from "react";
function Cat() {
  return (
    <span>
      🐱
    </span>
  );
}

Here we are simply rendering a cat emoji inside a humble span element.