DEV Community: Basile Bong

TypeScript's Unknown data type

Basile Bong — Wed, 28 Apr 2021 17:10:50 +0000

There are data types in TypeScript that are better known than others. Today I would like to introduce a less known data type: unknown.

The `unknown` data type

The unknown type exists since TypeScript 3.0 (the current version is 4.2) and is a top type.

Similar to the any type, a variable of type unknown accepts values of any type.

The difference is that a value of type any can be assigned to variables of all types and a value of type unknown can only be assigned to variables of the type any or unknown.

/**
 * New variable of type unknown
 **/
let test: unknown;

/**
 * Assigning a value to an unknown variable
 **/
test = 'hello world';       // Works!
test = 5;                   // Works!
test = false;               // Works!
test = () => false          // Works!
test = new Audio();         // Works!

/**
 * Using an unknown variable
 **/
let myString: string = test;    // Error: Type 'unknown' is not assignable to type 'string'
let myBool: boolean = test;     // Error: Type 'unknown' is not assignable to type 'booelan'
const test2: unknown = test;    // Works!
const test3: any = test;        // Works!

test.foo(); // Error: Object is of type 'unknown'
new test(); // Error: Object is of type 'unknown'

When to use `unknown`?

unknown forces type checking and is safer than any. That's why its use should always be favored over any.

Here is an example with JSON.parse(), which always returns a value of type any.

In the following situation the code will compile without noticing that there is a huge error. The JSON string is not of type IPerson and should not be assignable to the variable phoebe.

interface IPerson {name: string, age: number}

const jsonString = '{"alias": "rose", "color": "red"}';

const person = JSON.parse(jsonString); // This returns any
const phoebe: IPerson = person; // This should throw a type error, but doesn't...

To make our code safer and catch the type error, we can use unknown in combination with a custom Type Guard.

interface IPerson {name: string, age: number}

const jsonString = '{"name": "rose", "age": 25}';

const person: unknown = JSON.parse(jsonString); // This returns any.
const notPerson: IPerson = person; // Error Type 'unknown' is not assignable to type 'IPerson'.

/** 
 * Create a custom Type Guard to make sure that
 * the parsed data is of type Person.
 */
const isPerson = (data: any): data is IPerson => {
    return typeof data.name == 'string' && typeof data.age == 'number'
}

/**
 * Use Type Guard.
 */
if(isPerson(person)){
    console.log('This is a person!');
    // With the Type Guard the assignement of the 
    // variable as type Person works.
    const phoebe: IPerson = person;
} else {
    throw Error('Parsed string is not a Person.')
}

Custom Type Guards in TypeScript

Basile Bong ・ Sep 26 '20

#webdev #javascript #typescript

Follow me on dev.to and twitter!

Basile BongFollow

Credits

What is ECMAScript ?

Basile Bong — Wed, 17 Feb 2021 17:52:08 +0000

You can read it everywhere, es2020, es6, ... but what is this exactly? To fully understand what is behind the "ES" script names it is necessary to first know ECMA-262.

ECMA-262

ECMA-262 is the specification (or technical standard) of ECMAScript. This specification is a technical documentation which specifies what kind of requirements ECMAScript needs to satisfy.

It is standardized by Ecma International which is a Swiss non-profit organization based in Geneva. They are responsible for a lot of standards, including JSON, C#,... (ECMA-262 by Ecma international)

ECMAScript

ECMAScript is the standard, specified by ECMA-262. The purpose is to make websites, build with programming languages based on it, function in the same way in all browsers. (ECMAScript, Wikipedia)

JavaScript and ECMAScript

JavaScript is based on ECMAScript, and it's standards. To make the relation clearer, JavaScript is often called "the dialect of ECMAScript". (ECMAScript, Wikipedia)

Nearly all specificities of ECMAScript are available in JavaScript. Recently, a new version of ECMAScript has been released every year, with amazing new features which make coding with JavaScript easier. Unfortunately web browsers are not yet compatible with the latest ECMAScript standards. That's why a compiler, like babeljs, is needed when writing with the latest standard.

If you like my posts follow me on dev.to and twitter!

Credits

ECMAScript, Wikipedia - Read on 17/02/2021
Specification (technical standard), Wikipedia - Read on 17/02/2021
ECMA-262 by Ecma international - Read on 17/02/2021
What’s the difference between JavaScript and ECMAScript? by Michael Aranda, freeCodeCamp - Read on 17/02/2021

January 2021: My latest discoveries

Basile Bong — Thu, 21 Jan 2021 18:00:42 +0000

1. Omatsuri App

https://omatsuri.app/

Omatsuri App is a list of front focused open source tools for developers. The authors explain on their GitHub page:

"Omatsuri translates to «festival» from Japanese (お祭り) and here we have a small festival of applications".

At the moment there 12 amazing tools, useful for the daily usage of a frontend developer. They also promise that the App, which is, by the way, a Progressive Web App, will always respect your privacy.

"It was built with strong respect to your privacy – you will never see ads and it does not include analytics services (or actually any services at all)".

2. Magenta

https://magenta.tensorflow.org/

Magenta is an open source Python library, powered by TensorFlow which can be used to manipulate images and music. With this data you will be able to train machine learning models and generate new content for these models.

A JavaScript version of Magenta is also available!

3. React Markdown

https://github.com/remarkjs/react-markdown

While developing Gatsby Source My DEV, a Gatsby Plugin which adds your dev.to posts to your Gatsby site, I realized that a React component able to transform markdown to HTML would be very useful to generate my pages from the Markdown that I retrieved from the DEV API.

With the React Markdown library, transforming markdown to HTML
is very easy. Why this one? The Authors explain why:

"There are other ways for markdown in React out there so why use this one? The two main reasons are that they often rely on dangerouslySetInnerHTML or have bugs with how they handle markdown. react-markdown uses a syntax tree to build the virtual dom which allows for updating only the changing DOM instead of completely overwriting. react-markdown is 100% CommonMark (optionally GFM) compliant and has extensions to support custom syntax". - React Markdown on GitHub

There are also a lot of useful plugins with which you can add additional functionalities to React Markdown!

4. Screely

https://www.screely.com/

As a frontend developer, when I make screenshots of user interfaces, I want them to look as good as possible but opening Photoshop to edit the screenshot would be far too much work. That's when Screely comes in.
Screely is a tool to generate pretty website mock-ups in just a few clicks! The Web App is free to use. They also have a Chrome extension which costs €7.49 at the moment.

5. Coding Fonts

https://coding-fonts.css-tricks.com/

A good coding font makes the daily life of a developer easier. Which one to choose depends on personal taste but luckily there are plenty of them!

Coding Fonts is a fancy web app from CSS Tricks. It is basically a list of coding fonts with a code snippet as preview and some additional information about the font (description, author, costs ...).

If you are looking for a new coding font, this web app will definitely help!

If you like my posts follow me on dev.to and twitter!

Easily add your DEV posts to any Gatsby site

Basile Bong — Mon, 04 Jan 2021 10:52:07 +0000

Last week I created a Gatsby source plugin called gatsby-source-mydev. This plugin is an out-of-the-box integration between your Gatsby site and your DEV account by using the DEV beta API endpoints.

At the moment it only retrieves all articles, but this source plugin will evolve and grow depending on the DEV API.

I will show you step by step how to use this source plugin within your Gatsby site.

basilebong / gatsby-source-mydev

Add your dev.to posts to your gatsby site!

Install

npm i gatsby-source-mydev

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-mydev`,
      options: {
        apiKey: `myApiKey15535186`,
      },
    },
  ],
}

Note: It is recommended to use a .env file to store the API key.

How to query

query MyQuery {
  allMyDev {
    nodes {
      article {
        slug
        body_markdown
        canonical_url
        cover_image
        comments_count
        description
        id
        page_views_count
        path
        public_reactions_count
        positive_reactions_count
        published
        published_at
        published_timestamp
        tag_list
        title
        type_of
        url
        user {
          github_username
          name
          profile_image
          twitter_username
          profile_image_90
          username
          website_url
        }
      }
    }
  }
}

Additional information

Author

Basile Bong

View on GitHub

Create an API key

Go to https://dev.to/settings/account
Navigate to the section DEV Community API Keys
Add a project name and generate your API Key

Configure your Gatsby site

Create a new Gatsby site:

gatsby new mysite
cd ./mysite

Install all dependencies:

npm i

Install dotenv and gatsby-source-mydev:

npm i -S dotenv gatsby-source-mydev

Create a .env file at the root of your project:

touch .env

Edit .env and add the following line.
Replace MYAPIKEYXXXXX with your API key.

DEV_API_KEY=MYAPIKEYXXXXX

Edit gatsby-config.js:

// In your gatsby-config.js
require('dotenv').config();

module.exports = {
  plugins: [
    // ...
    {
      resolve: `gatsby-source-mydev`,
      options: {
        apiKey: process.env.DEV_API_KEY,
      },
    },
  ],
}

Run your Gatsby site and go to http://localhost:8000/___graphql.

npm start

In the GraphQL explorer you will see myDev and allMyDev.

Note: Your .env file should always be in .gitignore then it contains confidetial information that should not be comitted.

Create a page for each article

Create a template file:

touch src/templates/blog.js

Install react-markdown:

npm i -S react-markdown

Edit src/templates/blog.js:

import React from "react"
import ReactMarkdown from "react-markdown"

import Layout from "../components/layout"
import SEO from "../components/seo"

export default function Template({
  pageContext, // this prop will be injected by the GraphQL query below.
}) {
  const { article } = pageContext // data holds your post data
  return (
    <Layout>
        <SEO title={article.title} />
        <div className="blog-post-container">
            <div className="blog-post">
                <h1>{article.title}</h1>
                <h2>{article.published_at}</h2>
                <ReactMarkdown>{article.body_markdown}</ReactMarkdown>
            </div>
        </div>
    </Layout>
  )
}

Edit gatsby-node.js:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/node-apis/
 */

// You can delete this file if you're not using it

exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions
    const blogPostTemplate = require.resolve(`./src/templates/blog.js`)
    const result = await graphql(`
        query {
            allMyDev {
            nodes {
                article {
                body_markdown
                canonical_url
                comments_count
                cover_image
                description
                id
                page_views_count
                path
                positive_reactions_count
                public_reactions_count
                published
                published_at
                published_timestamp
                slug
                tag_list
                title
                type_of
                url
                user {
                    github_username
                    name
                    profile_image
                    profile_image_90
                    twitter_username
                    username
                    website_url
                }
                }
            }
            }
      }
    `)
    // Handle errors
    if (result.errors) {
      reporter.panicOnBuild(`Error while running GraphQL query.`)
      return
    }
    result.data.allMyDev.nodes.forEach(({ article }) => {
      createPage({
        path: `blog/${article.slug}`,
        component: blogPostTemplate,
        context: {
            article: article
        },
      })
    })
}

Good job, you did it! Now when you go to http://localhost:8000/blog/article-slug you will see the content of your DEV article.

Note: Replace article-slug by the slug of an article. The easiest way to find an article's slug is to go to your dev.to article and to copy paste the end of the url: https://dev.to/basilebong/THIS-IS-YOUR-SLUG

I will leave the creation of a blog page list to you.

Do you need help or do you have an idea for a new feature? Open an issue here.

If you like my posts follow me on dev.to and twitter!

Let's be fancy with a console signature

Basile Bong — Wed, 30 Dec 2020 10:31:47 +0000

Create a stylized console message and say hello to your fellow developers.

Let's get started

First you should know that a console message, which is the first argument of a console.log, can be formatted using other arguments.

console.log("I'm the message");

There are different ways to format a console message but the only one that is useful in this specific case is the %c formatter.

console.log("%cI'm the message");

%c applies to the console message CSS rules that are defined by the second argument.

console.log("%cI'm the message", "background: red;");

And that's already all you need to know to create your own console signature.

Example

var consoleSignatureStyle = "font-size: 16px;" +
  "background: linear-gradient(to right, #e66465, #9198e5);" +
  "color: white;" +
  "text-align: center;" +
  "padding: 10px 15px;" +
  "width: 100%;" +
  "border-radius: 20px;";

var consoleSignatureText = "%cDon't steal my cookies! 🍪";

console.log(consoleSignatureText, consoleSignatureStyle);

Note: It is also possible to print images into the console by using the background-image CSS property.

If you like my posts follow me on dev.to and twitter!

Image recognition with TensorFlow.js

Basile Bong — Mon, 30 Nov 2020 15:31:32 +0000

In this post I will show you how to create a simple image classifier, without any machine learning knowledge using a pretrained model form the TensorFlow team.

Checkout the demo and the source code.

Table of contents
What you need
Let's start!
- Initializing the app
- File uploader
Image classification
- Loading
- Using the model
- Display the prediction
Congratulations
Credits

What you need

Knowledge of JavaScript, CSS and HTML
A code editor (I recommend VS Code)
A local server (I recommend live server VS Code extension).

Let's start!

Initializing the app

Create a new folder and add 3 files:

.
├── app.css
├── app.js
└── index.html

Edit index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My web app</title>

    <!-- Custom style -->
    <link rel="stylesheet" href="app.css" />

    <!-- Google font -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>

File uploader

In order to classify an image we first need to let the user upload a picture.

Edit index.html and add the following code inside <body></body>:

<main>
  <section class="image-section">
    <img src="" id="image" />
  </section>

  <section class="file-section">
    <div class="file-group">
      <label for="file-input">Upload a picture</label>
      <input type="file" id="file-input" />
    </div>
  </section>
</main>

Edit app.css to enhance the look:

body {
  font-family: "Source Sans Pro", sans-serif;
}

main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section {
  margin: 2rem 1rem;
}

.file-group {
  padding: 1rem;
  background: #efefef;
  border-radius: 1rem;
}

#image {
  max-width: 100%;
  width: 400px;
  height: auto;
  display: block;
  margin: auto;
}

.image-section {
  display: none;
  position: relative;
}

.image-loaded .image-section {
  display: block;
}

The next step is to create the JavaScript code that will handle the file upload and display the image on the page.

To help us manipulate the image and the file input, we are going to save those two DOM elements into some variables.

const fileInput = document.getElementById("file-input");
const image = document.getElementById("image");

When the user uploads a new image, the getImage() function is triggered.

fileInput.addEventListener("change", getImageDataUrl);

The goal is to display the uploaded image inside our web application. To do so create a new function getImage() and write it before the event listener.

function getImage() {
  // ...
}

First we have to check if the file has been uploaded with success. So add the following code inside the getImage() function.

function getImage() {
  if (!fileInput.files[0]) throw new Error("Image not found");
  const file = fileInput.files[0];
}

Then we need to read the file that has been uploaded with FileReader. You can find more information on the mozilla.org webpage.

To display the image inside our web app, we need a URL that can be set as src attribute of the <img id="image"/> tag. This URL will be generated by the readAsDataURL(file) method that returns a data URL.

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as "data URIs" until that name was retired by the WHATWG. -mozilla.org

const reader = new FileReader();

The FileReader is asynchronous. We have to wait for the result with onload before we can display the image.

reader.onload = function (event) {
  image.setAttribute("src", event.target.result);
  document.body.classList.add("image-loaded");
};

reader.readAsDataURL(file);

Finally, your app.js file should look like this:

const fileInput = document.getElementById("file-input");
const image = document.getElementById("image");

/**
 * Get the image from file input and display on page
 */
function getImage() {
  // Check if an image has been found in the input
  if (!fileInput.files[0]) throw new Error("Image not found");
  const file = fileInput.files[0];

  // Get the data url form the image
  const reader = new FileReader();

  // When reader is ready display image.
  reader.onload = function (event) {
    image.setAttribute("src", event.target.result);
    document.body.classList.add("image-loaded");
  };

  // Get data url
  reader.readAsDataURL(file);
}

/**
 * When user uploads a new image, display the new image on the webpage
 */
fileInput.addEventListener("change", getImage);

Image classification

Thanks to TensorFlow and its pretrained model, the classification of images becomes very easy. A model is a file that has been trained over a set of data in order to recognize certain patterns. I will not deep dive into this subject, but if you want to know more I recommend you to read the Microsoft documentation.

To start using TenserFlow.js and it's pretrained image classification model (mobilenet) we will have to edit the index.html file and add the following lines into the <head></head>:

<!-- TensorFlow-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.1"></script>
<!-- TensorFlow pretrained model-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"></script>

Loading

To avoid that the web application is used before the model is fully loaded, we will display a loader inside our web application.

Edit index.html, add the class .loading to the <body></body>, and the HTML markup of the loader.

<!-- Add loading class -->
<body class="loading">
  <main>
    <!-- Add this -->
    <div class="loader">
      <h2>Loading ...</h2>
    </div>

    <!-- ... -->
  </main>

  <script src="app.js"></script>
</body>

Next we will have to hide the file input during the loading process. To do so edit app.css and add the following code:

.loading .loader {
  display: block;
}

.loader {
  display: none;
}

.loading .image-section,
.loading .file-section {
  display: none;
}

Next we will have to load the model in our app.js file. Add the following code at the end of your file.

// Async loading
mobilenet.load().then(function (m) {
  // Save model
  model = m;

  // Remove loading class from body
  document.body.classList.remove("loading");

  // When user uploads a new image, display the new image on the webpage
  fileInput.addEventListener("change", getImage);
});

As you can see addEventListener has been moved inside the loading function. We also need to add an empty model variable at the beginning of our code:

const fileInput = document.getElementById("file-input");
const image = document.getElementById("image");
let model;

// ...

Finally, your code should look like this:

const fileInput = document.getElementById("file-input");
const image = document.getElementById("image");
let model;

/**
 * Get the image from file input and display on page
 */
function getImage() {
  // Check if an image has been found in the input
  if (!fileInput.files[0]) throw new Error("Image not found");
  const file = fileInput.files[0];

  // Get the data url form the image
  const reader = new FileReader();

  // When reader is ready display image
  reader.onload = function (event) {
    const dataUrl = event.target.result;
    image.setAttribute("src", dataUrl);
    document.body.classList.add("image-loaded");
  };

  // Get data URL
  reader.readAsDataURL(file);
}

/**
 * Load model
 */
mobilenet.load().then(function (m) {
  // Save model
  model = m;

  // Remove loading class from body
  document.body.classList.remove("loading");

  // When user uploads a new image, display the new image on the webpage
  fileInput.addEventListener("change", getImage);
});

Now the UI is only displayed when the model is fully loaded.

Using the model

The mobilenet model needs an <img /> HTML element as parameter that has a defined width and height. Currently this two attributes are missing. To add them we will have to edit the getImage() function inside the app.js file.

To get the size of the image we will use the Image class.

The Image() constructor creates a new HTMLImageElement instance. It is functionally equivalent to document.createElement('img'). -mozilla.org

function getImage() {
  // ...
  reader.onload = function (event) {
    // ...

    // Create image object
    const imageElement = new Image();
    imageElement.src = dataUrl;

    // When image object is loaded
    imageElement.onload = function () {
      // Set <img /> attributes
      image.setAttribute("src", this.src);
      image.setAttribute("height", this.height);
      image.setAttribute("width", this.width);

      // Classify image
      classifyImage();
    };

    // ...
  };

  //..
}

The classifyImage() function does not exist yet.
Now your getImage() function should look like this:

function getImage() {
  // Check if an image has been found in the input
  if (!fileInput.files[0]) throw new Error("Image not found");
  const file = fileInput.files[0];

  // Get the data url form the image
  const reader = new FileReader();

  // When reader is ready display image
  reader.onload = function (event) {
    // Ge the data url
    const dataUrl = event.target.result;

    // Create image object
    const imageElement = new Image();
    imageElement.src = dataUrl;

    // When image object is loaded
    imageElement.onload = function () {
      // Set <img /> attributes
      image.setAttribute("src", this.src);
      image.setAttribute("height", this.height);
      image.setAttribute("width", this.width);

      // Classify image
      classifyImage();
    };

    // Add the image-loaded class to the body
    document.body.classList.add("image-loaded");
  };

  // Get data URL
  reader.readAsDataURL(file);
}

After a lot of preparation we can finally use the model with only a view lines of code. First we will create a new function called classifyImage().

function classifyImage() {
  model.classify(image).then(function (predictions) {
    console.log("Predictions: ");
    console.log(predictions);
  });
}

Run the application and you should see the predictions in your developer console!

Display the prediction

The last thing we want to do is to display a sentence that describes the picture.
First we need to add a place in our HTML code where the description can be placed.
Edit index.html:

<!-- ... -->
<section class="image-section">
  <img src="" id="image" />
  <div class="image-prediction"></div>
</section>
<!-- ... -->

Then add the necessary CSS in app.css:

/* Black overlay over the image */
.image-section::before {
  content: "";
  z-index: 2;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(transparent, transparent, #000000);
}

.image-prediction {
  position: absolute;
  bottom: 1rem;
  text-align: center;
  font-size: 18px;
  color: #fff;
  left: 0;
  right: 0;
  z-index: 3;
}

Then open app.js and change the classifyImage() function:

function classifyImage() {
  model.classify(image).then((predictions) => {
    displayDescription(predictions);
  });
}

The predictions are an array of predictions. Each prediction contains a className and a probability.

[
  {
    className: "chow, chow chow",
    probabilty: 0.856542315,
  },
];

The first thing we are going to do is to sort the results and only keep the predictions with the height probability. In this case the probability needs to be at least 20% (which is super low). If it is lower we display an error message.

function displayDescription(predictions) {
  const result = predictions.sort((a, b) => a > b)[0];

  if (result.probability > 0.2) {
    const probability = Math.round(result.probability * 100);

    // Display result
    description.innerText = `${probability}% shure this is a ${result.className.replace(
      ",",
      " or"
    )} 🐶`;
  } else description.innerText = "I am not shure what I should recognize 😢";
}

Finally, your code should look like this:

const fileInput = document.getElementById("file-input");
const image = document.getElementById("image");
const description = document.getElementById("prediction");

let model;

/**
 * Display the result in the page
 */
function displayDescription(predictions) {
  // Sort by probability
  const result = predictions.sort((a, b) => a > b)[0];

  if (result.probability > 0.2) {
    const probability = Math.round(result.probability * 100);

    // Display result
    description.innerText = `${probability}% shure this is a ${result.className.replace(
      ",",
      " or"
    )} 🐶`;
  } else description.innerText = "I am not shure what I should recognize 😢";
}

/**
 * Classify with the image with the mobilenet model
 */
function classifyImage() {
  model.classify(image).then((predictions) => {
    displayDescription(predictions);
  });
}

/**
 * Get the image from file input and display on page
 */
function getImage() {
  // Check if an image has been found in the input
  if (!fileInput.files[0]) throw new Error("Image not found");
  const file = fileInput.files[0];

  // Get the data url form the image
  const reader = new FileReader();

  // When reader is ready display image
  reader.onload = function (event) {
    // Ge the data url
    const dataUrl = event.target.result;

    // Create image object
    const imageElement = new Image();
    imageElement.src = dataUrl;

    // When image object is loaded
    imageElement.onload = function () {
      // Set <img /> attributes
      image.setAttribute("src", this.src);
      image.setAttribute("height", this.height);
      image.setAttribute("width", this.width);

      // Classify image
      classifyImage();
    };

    // Add the image-loaded class to the body
    document.body.classList.add("image-loaded");
  };

  // Get data URL
  reader.readAsDataURL(file);
}

/**
 * Load model
 */
mobilenet.load().then((m) => {
  // Save model
  model = m;

  // Remove loading class from body
  document.body.classList.remove("loading");

  // When user uploads a new image, display the new image on the webpage
  fileInput.addEventListener("change", getImage);
});

Congratulations

Congratulations, you did it!

Note that this application is not fully finished:

We didn't check if the uploaded file is an image
We didn't check if the image is a dog
We didn't check for upload errors

Credits

Unit Testing in JavaScript

Basile Bong — Wed, 28 Oct 2020 18:50:10 +0000

The different automated testing types

Unit tests
Integration tests
End-to-end tests

What is a Unit Test

Unit tests are also known as component tests.
They take the smallest piece of testable code (in most cases functions) and check if it behaves as expected.

Writing effective tests

It is possible to write good and bad tests.
In the worst scenario, a bad test gives a false positive result for code that does not even work, giving developers a false sense of security.

As example, we are going to write a function that adds up two numbers.

const add = (a, b) => a + b;
const wrongAdd =(a, b) => a*b;

If we write a test for this function that checks if the result of add(2,2) === 4 is true, it is a bad test then wrongAdd(2,2) === 4 is also true.

// Bad test
expect(add(2,2).toEqual(4)); // true
expect(wrongAdd(2,2).toEqual(4)); // true (false positive)

To avoid writing bad unit tests you should:

Use a representative range: Use different parameters when writing tests. In our previous example, if we had written an additional test with different parameters, the false positive result would not have occurred.
Cover edge cases: in other words special cases that your function does or does not accept. E.g. an addition function where certain strings are allowed as parameter add("6", 5).

Unit Testing Libraries

Writing a Unit Test

We are going to create a function that returns the length of the shortest word of a sentence and write a Unit Test, with jest, that checks if the function works as indented.

1. Set up a new project

First, we need to create a new project in which we can work.

# Init project
$ yarn init -y
# Install modules
$ yarn
# Add Jest
$ yarn add -D jest
# Create src directory
$ mkdir src
# Create src file
$ touch src/shortest-word.js && touch src/shortest-word.test.js
# Install babel to use es6 synstax
$ yarn add -D @babel/core @babel/preset-env @babel/register
# Create a babel configuration file
$ touch .babelrc

.
├── node_modules/
├── src/
│   ├── shortest-word.js
│   └── shortest-word.test.js
├── package.json
├── .babelrc
└── yarn.lock

Edit .babelrc.

{
  "presets": ["@babel/preset-env"]
}

2. Write a function

Edit src/shortest-word.js and add the following code:

export const shortestWord = (s) => {
  // Split the sentence into an array of words.
  const words = s.split(" ");

  // Only keep shortest word.
  let shortestWord = words.reduce((a, r) => (r.length < a.length ? r : a));

  // Return length.
  return shortestWord.length;
};

3. Write a test

First we are going to test if the function returns the expected result when the sentence has a single shortest word.

describe("Should return the length of the shortest words", () => {
   describe("if there is only one shortest word", () => {
    test.each`
      result | sentence
      ${1}   | ${"He was sitting in a trash can with high street class."}
      ${3}   | ${"Greetings from the real universe."}
      ${1}   | ${"There's a message for you if you look up."}
    `(
      "the length of the shortest word should be $result in '$sentence'",
      ({ sentence, result }) => {
        expect(shortestWord(sentence)).toBe(result);
      }
    );
  });
});

Then we are going to test if the function returns the expected result when the sentence has several shorter words.

describe("Should return the length of the shortest words", () => {
  // ... previous test

  describe("if there are several shorter words", () => {
    test.each`
      result | sentence
      ${2}   | ${"The sunblock was handed to the girl before practice, but the burned skin was proof she did not apply it."}
      ${2}   | ${"He always wore his sunglasses at night."}
      ${3}   | ${"Potato wedges probably are not best for relationships."}
    `(
      "the length of the shortest word should be $result in '$sentence'",
      ({ result, sentence }) => {
        expect(shortestWord(sentence)).toBe(result);
      }
    );
  });
});

All the tests pass but not all the cases were covered, giving the developer a false sense of security. In other words, this is a BAD TEST. Then our function returns a false result when a sentence has a punctuation mark directly after the shortest word.

const sentence = "I, still don't know.";
shortestWord(sentence); // Returns 2 instead of 1.

So to fix this we are going to add another test.

describe("Should return the length of the shortest words", () => {
  // ... previous tests

  describe("if there is punctuation mark directly after the shortest word", () => {
    test.each`
        result | sentence
        ${1}   | ${"I, don't know anymore."}
        ${3}   | ${"Wow! Beautiful."}
        ${1}   | ${"There's something I! want to tell you"}
        ${2}   | ${"(is) chocolate tasty"}
        ${2}   | ${"he/she came from home"}
        ${3}   | ${"Goodbye mister you?"}
        ${2}   | ${"Where {is my} dog?"}
        // ... 
    `(
      "the length of the shortest word should be $result in '$sentence'",
      ({ sentence, result }) => {
        expect(shortestWord(sentence)).toBe(result);
      }
    );
  });
});

The new tests fail:

$ npx jest
 FAIL  src/shortest-word.test.js
  Should return the length of the shortest words
    if there are several shorter words
      √ the length of the shortest word should be 2 in 'The sunblock was handed to the girl before practice, but the burned skin was proof she did not apply it.' (2 ms)
      √ the length of the shortest word should be 2 in 'He always wore his sunglasses at night.'
      √ the length of the shortest word should be 3 in 'Potato wedges probably are not best for relationships.'
    if there is only one shortest word
      √ the length of the shortest word should be 1 in 'He was sitting in a trash can with high street class.' (1 ms)
      √ the length of the shortest word should be 3 in 'Greetings from the real universe.'
      √ the length of the shortest word should be 1 in 'There's a message for you if you look up.'
    if there is punctuation mark directly after the shortest word
      × the length of the shortest word should be 1 in 'I, don't know anymore.' (3 ms)
      × the length of the shortest word should be 3 in 'Wow! Beautiful.'
      × the length of the shortest word should be 1 in 'There's something I! want to tell you' (1 ms)
      × the length of the shortest word should be 2 in '(is) chocolate tasty'
      × the length of the shortest word should be 2 in 'he/she came from home' (1 ms)
      × the length of the shortest word should be 3 in 'Goodbye mister you?'
      × the length of the shortest word should be 2 in 'Where {is my} dog?' (1 ms)

4. Fix the function

Finally, we will have to fix our function to pass all tests.

To do, so we will split our sentences by blank spaces, punctuation mark or both, by changing the first line of our function.

// Split the sentence into an array of words.
  // Split by blank spaces and punctuation marks.
  const words = s.split(/\s*[.,#!$/?%^&*;:{}=\-_`~()]\s*|\s+/g).filter(s => s !== "");

Congratulation, all the tests pass!

Credits

My favorite tricks with Sass

Basile Bong — Thu, 15 Oct 2020 15:25:16 +0000

1. Dynamically create component variants based on theme colors

// Create a map containing all the important colors
$theme-colors: (
  "danger": #ff0000,
  "success": #00ff00,
  "info": #0000ff,
) !default;

// Loop through the map to create a variant per color
.button {
  // ...

  @each $colorName, $color in $theme-colors {
    &--#{$colorName} {
      background: $color;
      // ...
    }
  }
}

CSS result

.button--danger {
  background: #ff0000;
}

.button--success {
  background: #00ff00;
}

.button--info {
  background: #0000ff;
}

2. Pick the right text color automatically

@function text-color($color) {
  @if (lightness($color) > 40) {
    @return #000;
  } @else {
    @return #fff;
  }
}

// Use the function anywhere
.button--primary {
  background: #ff0000;
  color: text-color(#ff0000);
}

CSS result

.button--primary {
  background: #ff0000;
  color: black;
}

3. Simplify the use of breakpoints

// Create a map containing your breakpoints
$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
) !default;

// Create a mixin to simplify the use of the breakpoints
@mixin breakpoint-down($screen-size) {
  $breakpoint-size: map-get(
    $map: $breakpoints,
    $key: $screen-size,
  );

  @media (max-width: $breakpoint-size) {
    @content;
  }
}

// Use the breakpoints anywhere
.square {
  width: 100px;
  @include breakpoint-down(sm) {
    width: 50px;
  }
}

CSS result

.square {
  width: 100px;
}

@media (max-width: 576px) {
  .square {
    width: 50px;
  }
}

4. Simplify the use of spacers

// Create a map containing you spacings
// Name them from 0 to n
$spacers: (
  0: 0,
  1: 0.5rem,
  2: 1rem,
  3: 1.5rem,
  4: 2rem,
  5: 3rem,
) !default;

// Create a function to simplify the use of the spacers
@function getSpace($space) {
  @return map-get($map: $spacers, $key: $space);
}

// Use the function anywhere
.square {
  margin-top: getSpace(0);
  margin-bottom: getSpace(5);
}

CSS result

.square {
  margin-top: 0;
  margin-bottom: 3rem;
}

5 reasons to use a Design System

Basile Bong — Mon, 05 Oct 2020 16:27:27 +0000

What is a Design System?

A Design System is a collection of reusable UI components with documented norms and standards.

This collection includes:

Color Palettes
Typography
Imagery
Iconography
Motion
Layouts
UI components, including code snippets.
Documentations

Examples

Benefits

Documentation

From typography to UI components, in a Design System everything is documented. It is considered to be the only truth that developers can refer to when creating new UI's.

User experience

Having a unified UI and UX concept for all the products of a company improves user experience. The things a user has learned about the interface of one product also apply to the other products.

Development speed

The strict guidelines and the shared library of reusable components improves development speed when building new products and interfaces.

Branding

Obviously, a Design System allows consistency in branding across all platforms of a company.

Scalability

A Design System allows a company to expand their products while maintaining a consistent concept.
It is a completely independent project with components and documentations that can be used in the conception and maintenance of different products of a same brand.

Should I use one?

A Design System is only useful for companies working on multiple products for single brand. When working on a single project that will never scale (e.g. a personal website) a Design System does only complicate the development process.

Tools

Storybook (my favorite)
Fractal
Docz
...

Custom Type Guards in TypeScript

Basile Bong — Sat, 26 Sep 2020 09:36:10 +0000

My previous post showed with some short code snippets 5 useful TypeScript ticks. One of those tricks was a User-Defined Type Guard. Since this "trick" has attracted a lot of attention, I decided to write this short post to make this concept easier to understand.

What are Type Guards

A Type Guard reduces the type of object in a conditional block. The most known Type Guards are the famous typeof and instanceof operators.

Different Type Guards

typeof
instanceof
in
Literal Type Guard
null and undefined with strictNullChecks
User-Defined Type Guards

Creating a User-Defined Type Guard

Unfortunately one can quickly feel the limits of the basic Type Guards when e.g. working with plain JavaScript objects.

Below an example of a user defined Type Guard.


interface IApple{
    name: string;
    color: string;
}

interface IBanana{
    name: string;
    size: number;
}

type Fruit = IApple | IBanana;

/** Custom Type Guard */
const isApple = (f: Fruit): f is IApple => {
    return (f as IApple).color !== undefined
}

const apple: Fruit = {name: "Pink Pearl", color: "red"};
const banana: Fruit = {name: "Cavendish", size: 20};

console.log(isApple(apple)) // Logs true
console.log(isApple(banana)) // Logs false

f is IApple is a type predicate. With this, instead of just returning a boolean, TypeScript will reduce the type to IApple.
In the following code TypeScript will understand that inside the condition apple is an IApple.

if(isApple(apple)){
    /** TS undestands that apple is an IApple */
    console.log(apple.color); // Logs red
}

This is the big advantage of using User-Defined Type Guards. Be aware that a wrongly coded Type Guards can introduce major errors into your code.

More about Type Guards

https://basarat.gitbook.io/typescript/type-system/typeguard

5 useful TypeScript tricks

Basile Bong — Thu, 24 Sep 2020 21:00:51 +0000

1. Create a type checking function

interface IDog{
   name:  string;
   age: number;
   kidFriendly: boolean;
}

interface ICat{
   name: string;
   age: number;
   activityLevel: number;
}

type Animal = IDog | ICat;

/** Is the animal a dog ? */
const isDog = (animal: Animal) : animal is IDog => (animal as IDog).kidFriendly !== undefined;

if(isDog(animal)){
   console.log(animal.kidFriendly);
}

More information here:

Custom Type Guards in TypeScript

Basile Bong ・ Sep 26 '20

#webdev #javascript #typescript

2. Set all properties of an interface to optional

interface IDog{
   name: string;
   age: number;
   kidFriendly: boolean;
}

const dog : Partial<IDog> = {
   name: "Rex"
}

3. Get the type of the parameters of a function

const walkDog = (dogName: string, distance: number) => { /** ... */ }

const params: Parameters<typeof walkDog> = ["Rex", 48];

4. Use Setters and Getters

Setters and Getters also exist in plain JavaScript. Still, they are very useful in TypeScript (and other languages).

class Dog{
   private _name: string = "";

   get name(): string{
      return this._name;
   }

   /** Check the length of the name before setting it **/
   set name(newName: string){
      if(newName.length < 8) {
         throw new Error(`The dog's name needs at least 8 charachters`)
      }

      this._name = newName;
   }
}

5. Optional chaining

Optional chaining has recently been added to JavaScript (ECMAScript 2020).

let cat?: ICat;  

/** With optional chaining **/
let animal = cat?.fur.length;

/** Without optional chaining **/
let cat = cat === null || cat === undefined ? undefined : car.fur.length;

Detect toxic language with TensorFlow.js

Basile Bong — Sun, 13 Sep 2020 13:52:19 +0000

In this tutorial I am going to show you how to detect toxic language within a React app with TensorFlow. As an example, we are going to create a simple chat. Because the goal is not to make a beautiful UI, I am going to skip the CSS part.

If you are not interested in the React part you can directly go to this section.

Demo

See demo app or source code

Let's begin

First we need to create a new React project.

npx create-react-app demo-toxic-chat

Then go into the project folder.

cd demo-toxic-chat

And finally start the development server.

yarn start

Adding the TensorFlow scripts

To make our example work we are going to use the toxicity model of TensorFlow. The easiest way to add it into our app is by using the official CDN's.

To do so, go into the public folder and add the following lines in the <head> of the index.html file.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/toxicity"></script>

Loading the model

TensorFlow models can take some time to load. The model has to be loaded before the chat is displayed.

First we need to add a loader into our App.js file. To make this possible we are going to use a loading state with true as default value.

const [loading, setLoading] = useState(true);

When the component did mount we load the model asynchronously.

useEffect(() => {
    const loadModel = async () => {
      // Loading model
      // 0.9 is the minimum prediction confidence.
      model = await window.toxicity.load(0.9);
      // Display chat
      setLoading(false);
    };
    // Load model
    loadModel();
});

Finally, we display a loading or chat component depending on the state. The App.js file will look like this:

import React, {useState, useEffect} from 'react';
import './App.scss';
import Loader from "./components/Loader";
import Chat from "./components/Chat";

let model;

function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadModel = async () => {
      // Loading model
      model = await window.toxicity.load(0.9);
      // Display chat
      setLoading(false);
    };
    // Load model on component mount
    loadModel();
  });

  return (
    <div className="App">
      {loading ? <Loader /> : <Chat model={model} />}
    </div>
  );
}

export default App;

The chat component

The next step is to create the chat component. It is composed of a message container (where the messages are displayed), a text input and a submit button.

The chat has a state containing all the messages:

const [messages, setMessages] = useState([
   "Write something and test if the message is toxic!",
]);

It also has a state containing the value of the text input. When the user changes the value we save the result in the state.

const [input, setInput] = useState("");
const handleInputChange = (e) => setInput(e.currentTarget.value);

We also have to handle the addition of a new message when the form is submitted:

const handleSubmit = (e) => {
    // Prevent submit
    e.preventDefault();
    // Get the current value of the input (this is our message)
    const value = input;
    // Clear input for the next message.
    setInput("");
    // Save message into the state
    setMessages([...messages, value]);
};

The chat displays a list of messages:

// List of all messages
const Messages = messages.map((m, i) => (
    <Message key={i} model={model} text={m} />
));

Finally, this is how the Chat.js file looks like:

import React, { useState } from "react";
import Message from "./Message";

const Chat = ({ model }) => {
  const [messages, setMessages] = useState([
    "Write something and test if the message is toxic!",
  ]);

  const [input, setInput] = useState("");

  const handleSubmit = (e) => {
    // Prevent submit
    e.preventDefault();
    // Get input value (message)
    const value = input;
    // Clear input
    setInput("");
    // Save message into state
    setMessages([...messages, value]);
  };

  const handleInputChange = (e) => setInput(e.currentTarget.value);

  // List of all messages
  const Messages = messages.map((m, i) => (
    <Message key={i} model={model} text={m} />
  ));

  return (
    <div className="chat">
      <div className="chat__container">{Messages}</div>
      <form onSubmit={handleSubmit} className="chat__form">
        <input
          onChange={handleInputChange}
          value={input}
          className="chat__input"
          type="text"
        />
        <button type="submit" className="chat__submit">
          Submit
        </button>
      </form>
    </div>
  );
};

export default Chat;

The message component

We are going to create a component that includes the text and the toxicity of a message. In this example a message will be "toxic" or "not toxic". Note that the model from TensorFlow gives more details than just a simple true or false.

To check the toxicity we are going to create a new asynchronous function that takes the model and the message as parameters.

const isToxic = async (model, message) => {
  // Get predictions
  const predictions = await model.classify(message);
  // Check if there are toxic messages in the predictions
  // Match is true when the message is toxic
  const toxicPredictions = predictions.filter((p) => p.results[0].match);
  return toxicPredictions.length > 0;
};

We need two states. The first one is a boolean representing the toxicity of the message. The second is the loading status, then the isToxic() function, being asynchronous, can take some time to return the result.

const [toxic, setToxic] = React.useState();
const [loading, setLoading] = React.useState(true);

We get the toxicity of the message when the component did mount.

React.useEffect(() => {
    const getToxic = async () => {
      // Get toxicity of message
      const textToxicity = await isToxic(model, text);
      // Save toxicity into state
      setToxic(textToxicity);
      // Display toxicity
      setLoading(false);
    };
    getToxic();
  });

Finally, the complete Message.jsfile:

import React, {useState} from "react";

const isToxic = async (model, message) => {
  // Get predictions
  const predictions = await model.classify(message);
  // Check if there are toxic messages in the predictions
  // Match is true when the message is toxic
  const toxicPredictions = predictions.filter((p) => p.results[0].match);
  return toxicPredictions.length > 0;
};

const Message = ({ text, model }) => {
  const [toxic, setToxic] = useState();
  const [loading, setLoading] = useState(true);

  React.useEffect(() => {
    const getToxic = async () => {
      // Get toxicity of message
      const textToxicity = await isToxic(model, text);
      // Save toxicity into state
      setToxic(textToxicity);
      // Display toxicity
      setLoading(false);
    };
    getToxic();
  });

  return (
    <div className="chat__message">
      <span className="chat__message__text">{text}</span>
      {loading ? <span className="badge --loading">Loading toxicity..</span> : null}
      {!loading && toxic ? <span className="badge --toxic">Toxic</span> : null}
      {!loading && !toxic ? <span className="badge --friendly">Not toxic :)</span> : null}
    </div>
  );
};

export default Message;

Congratulation!

Congratulation, you created our example toxic chat. If you liked the article follow me on dev.to and check out my website.

DEV Community: Basile Bong

TypeScript's Unknown data type

The unknown data type

When to use unknown?

Custom Type Guards in TypeScript

Basile Bong ・ Sep 26 '20

Basile BongFollow

Credits

What is ECMAScript ?

ECMA-262

ECMAScript

JavaScript and ECMAScript

Credits

January 2021: My latest discoveries

1. Omatsuri App

2. Magenta

3. React Markdown

4. Screely

5. Coding Fonts

Easily add your DEV posts to any Gatsby site

basilebong / gatsby-source-mydev

Add your dev.to posts to your gatsby site!

Install

How to use

How to query

Additional information

Author

Create an API key

Configure your Gatsby site

Create a page for each article

Let's be fancy with a console signature

Let's get started

Image recognition with TensorFlow.js

Table of contents

What you need

Let's start!

Initializing the app

File uploader

Image classification

Loading

Using the model

Display the prediction

Congratulations

Credits

Unit Testing in JavaScript

The different automated testing types

What is a Unit Test

Writing effective tests

Unit Testing Libraries

Writing a Unit Test

1. Set up a new project

2. Write a function

3. Write a test

4. Fix the function

Credits

My favorite tricks with Sass

1. Dynamically create component variants based on theme colors

2. Pick the right text color automatically

3. Simplify the use of breakpoints

4. Simplify the use of spacers

5 reasons to use a Design System

What is a Design System?

Examples

Benefits

Documentation

User experience

Development speed

Branding

Scalability

Should I use one?

Tools

Custom Type Guards in TypeScript

What are Type Guards

Different Type Guards

Creating a User-Defined Type Guard

More about Type Guards

5 useful TypeScript tricks

1. Create a type checking function

Custom Type Guards in TypeScript

Basile Bong ・ Sep 26 '20

The `unknown` data type

When to use `unknown`?