DEV Community: Yuki Cheung

The Accidental Reviewer Part 1: How I Learnt to Review Code Across 5 Stacks

Yuki Cheung — Tue, 20 Jan 2026 19:49:00 +0000

This is a two-part series.

This first part is about how I became able to review across multiple stacks, even ones I don't familiar with.

The second part will be about why reviewing becomes a superpower in the age of AI.

Seems like I reviewed too much last year

Recently I became curious about how many PRs I actually review in a typical period.

So I asked an AI agent to build a little tool to fetch PR data from GitHub/GitLab APIs... and it turned out I reviewed 110+ PRs in just 4 months!

Too much? Maybe, or maybe not?

Here's the interesting part. I'm a frontend-focused software engineer, yet the PRs I reviewed were across frontend, backend, mobile, GraphQL and legacy.

I actually had never thought about this before. Most people review PRs only in the parts of the codebase they're comfortable with. Backend engineers review backend code, frontend engineers review frontend code, and so on.

But somehow I didn't do that.

I kept reviewing code in stacks I wasn't an expert in. So I started asking myself: why am I able to review stacks I don’t fully know?

After thinking about it for a while, I realised the answer is: Because my career started not from zero... but from minus.

My "started from minus" origin story

To explain why I can now review almost anything, I need to explain how I started.

I'm self-taught. Before joining my current company, I only built marketing websites in a small team with only me and another engineer. I didn't know Agile. I don't know how to write good unit tests.

During my interview, I could only write very simple tests and I didn't know test pyramids. (which is ironic because now everyone knows me as the engineer who always writes tests)

When I joined, I was:

the only junior software engineer in the team
new to the UK
struggling with English
unfamiliar with CI/CD pipelines
confused about Agile (What is retro/refinement? What do we do there?)
only comfortable with React/Next.js

So even though I had some working experience, I still say I started from minus. I felt behind everyone and desperately wanted to catch up! (like... WHAT is retro?)

The secret weapon that changed everything

One day, my manager encouraged me to review more PRs after I joined the company for a few months. He said just left comments, we'd love to see your thoughts there.

So I opened the PRs.

They were written by senior engineers, I am just a junior. Everything looked... good. I didn't even know what to comment on. Zero. Absolutely nothing.

But my manager said I should comment and I really didn't want him to ask why I hadn't. So I forced myself to ask any question.

At first, the only comments I could make were:

What does this mean?
I'm not familiar with X, what does this do?

Then, after I accidentally broke production once, I discovered the magic question:

How do we handle errors here?
What happens if this fails?
Do we have an error state?

I realised many engineers naturally focus on the happy path first. Once you ask about error handling, you immediately reveal missing validation and missing tests.

The magical thing is these questions don't depend on syntax. They work in any language, any stack, any repository.

Even in stacks I don't know, like legacy systems, I can still ask useful questions.

My secret list of questions for reviewing ANY stack

These questions helped me survive reviewing PRs I didn't understand:

How do we handle errors/edge cases here?
Do we have error states?
Do we have tests for this behaviour?
Why do we need this? (And if the answer is complex) Could you add a comment explaining this so we don't forget why?
Why is it written this way? (e.g. deeply nested ifs) Can we simplify it?
How does this flow actually work?
Does this function do too many things?
This variable is used everywhere, should it be split or named differently?

Notice something? None of these questions have anything to do with which language this is in. They're to do with logic, behaviour, readability and testability.

You don't have to know Python, Go, Ruby, Kotlin, or some kind of legacy stack.

When you ask "What happens if this fails?", you force the code to reveal assumptions that were never written down, or uncover hidden behaviour that even the original author didn't notice.

That's why this technique works across frontend, backend and even legacy code. Failure is universal. Once you learn to look at the unhappy path, you can see it in a higher-level.

Results: six years later...

Without noticing it, forcing myself to leave comments, even when embarrassed, even when clueless, reshaped my entire engineering career.

After six years of doing this, I reviewed hundreds of PRs. I can review repos I've never seen. I can context-switch extremely fast!

I can spot good/bad patterns quickly. I can ask useful questions even in languages I don't write. I could review backend, mobile, legacy, GraphQL, data pipeline, anything.

Reviewing became the fastest way I grew as an engineer. It helped me far more than writing code alone ever could.

I learnt from dozens of people, dozens of styles, dozens of systems. In the age of AI, this ability becomes even more important.

I'll talk about AI in part 2. See you there!

Thoughts on migrating from Netlify to Cloudflare Pages

Yuki Cheung — Sun, 19 Jan 2025 00:00:00 +0000

For the past few years, I’ve hosted my blog and other small websites on Netlify. Recently, I came across a post on Reddit mentioned a DDoS attack on Netlify’s Free Plan resulted in an unexpectedly massive bill.

Although I didn't have any issues with DDoS attacks on my sites, I decided to move my websites to Cloudflare Pages.

Why? Unlimited bandwidth, built-in DDoS protection (provided by Cloudflare!), and unlimited sites for FREE. Sounds too good to be true, doesn’t it?

Migrating from Netlify to Cloudflare Pages

I used my weekend to figuring out the migration process.

It was actually really simple. The only real challenge I faced was adjusting to the different syntax between Netlify Functions and Cloudflare Page Functions.

For static websites without any serverless functions, the process was even easier. All I had to do was connect the project from GitHub or GitLab and update my DNS records. Simple and straightforward!

(Although I panicked when the URL provided by Cloudflare didn’t work right after the first deployment. I just needed to wait 1–2 minutes for it. Once that was done, everything worked perfectly.)

During the migration process, I noticed a few key differences. (Caveat, my website are small and have low traffic, so all are based on my personal experience.)

Netlify Functions and Cloudflare Page Function

For serverless functions, the main difference is the function name. In Cloudflare Pages Functions, you use onRequest, whereas Netlify Functions is handler.

Netlify Functions:

import { neon } from '@neondatabase/serverless';

export async function handler(event) {
    try {
        if (event.httpMethod !== "POST") {
            ...
        }
    }
    ...
}
...

Cloudflare Page Function:

import { neon } from '@neondatabase/serverless';

export const onRequest = async ({ request, env }) => {
  try {
    if (request.method !== "POST") {
        ...
    }
  }
  ...
}
...

In Netlify Functions, you can access environment variables using process.env.<ENV>, but in Cloudflare Pages Functions, they need to be referenced as env.<ENV>.

Better developer experience on Cloudflare Pages

For development, Netlify relies on netlify-cli, which can be a bit frustrating at times. For example, if a function throws an error, it might crash the process, but the development server would still run in the background... so I ended up with my website opened in multiple ports.

Cloudflare used wrangler to setup its configuration and local environment variables, rather than using .env files.

First, I'll need to run npx wrangler pages download config <project> to download my wrangler.toml, then setup a .dev.vars file with my local variables like this:

NODE_ENV = 'development'
BACKEND_URL = '<backend_url>'

Once everything was set up, the development experience was smooth and seamless. Unlike netlify-cli, which could occasionally be slow or problematic, I didn’t encounter any issues with wrangler.

The dashboard and logs are clearer on Cloudflare dashboard too.

Page speed

The pages hosted on Cloudflare Pages are noticeably faster compared to those on Netlify!

Netlify pages typically take about 0.5 seconds to load the first meaningful paint with my slow broadband, Cloudflare Pages load almost instantly.

For serverless functions, I connected to neon database on some of my websites. I realised Cloudflare has faster response times too.

Summary

I migrated five websites from Netlify to Cloudflare Pages without encountering any major issues. Since I already manage my DNS records through Cloudflare, the process was even smoother. Sweet!

(I kept typing CloudFront when I wrote this post, I have no idea why...)

Wishing everyone a great weekend!

A guide to add auto accessibility check with storybook

Yuki Cheung — Wed, 10 Mar 2021 20:07:26 +0000

It's always good to have a proper accessibility check when you are developing front-end components.

When developing with storybook, you can even get more: a pipeline to do auto checks for accessibility!

First, install a11y-addon

Storybook has an official addon called @storybook/addon-a11y, you can view more details from the official guide.

After installed, you can see a tab inside the storybook, shows various accessibility errors or warnings.

Hurray!!

Do this even better

One shortcoming of this approach is, the addon itself doesn't throw any errors. When multiple developers are working on several components, it is easy to overlook those a11y warnings (or even ignore it on purpose).

How to check it automatically and throw an error when pushing to the repository?

A pipeline to automatically check accessibility

Here I am going to use my storybook demo in Github with CircleCI.

If you aren't familiar with the CircleCI pipeline, see official documentation.

First, you have to install @storybook/addon-storyshots-puppeteer, it is an official addon to add automatic Snapshot Testing for Storybook.

yarn add @storybook/addon-storyshots-puppeteer puppeteer @storybook/addon-storyshots --save-dev

Follow the official guide, create a new file storyshots.spec.js.

// From https://www.npmjs.com/package/@storybook/addon-storyshots-puppeteer

import initStoryshots from '@storybook/addon-storyshots';
import { axeTest } from '@storybook/addon-storyshots-puppeteer';

initStoryshots({ suite: 'A11y checks', test: axeTest() });

Add a new command in package.json.

"test:a11y": "jest storyshot"

Now you can run storybook (yarn storybook) and run yarn test:a11y afterwards to test your settings. If your tests run correctly, you should see the test results.

For example, in my design-system-demo, I saw errors from two components. It also includes a link of how to solve it (example).

After the storyshots work locally, it's time to create a pipeline!

Create a pipeline

Warning: this section is long, make sure you have some knowledge on docker, docker-compose and CI.

Dockerfile

First, we need to run both storybook and storyshots in pipeline simultaneously. But one step in the pipeline only did one thing, how can we achieve that? Docker.

Create a docker file for storybook, and use docker-compose to create another service to run accessibility tests.

FROM node:14.16.0-alpine3.12

WORKDIR /opt/app/

COPY package.json ./
COPY yarn.lock ./

# Install app dependencies
RUN yarn install --frozen-lockfile
COPY . .

EXPOSE 6006

# Run storybook
CMD ["yarn", "storybook"]

Create a Dockerfile and .dockerignore file to ignore node_modules in your harddisk. This docker file is copying all files from local to docker image and runs the storybook in 6006 at the end.

docker-compose

Then docker-compose, create a file named docker-compose.yml:

version: "3"

services:
  web:
    volumes:
      - app-content:/opt/app/
    build: .
    logging:
      driver: none
    networks:
      defaults:
    ports:
      - "6006:6006"
    tty: false
  accessibility:
    image: "buildkite/puppeteer:7.1.0"
    networks:
      defaults:
    working_dir: /opt/app/
    volumes:
      - app-content:/opt/app/
    depends_on:
      - web
    command: /bin/sh -c "npx wait-on http://web:6006 && yarn test:a11y"
volumes:
  app-content:

networks:
  defaults:
    driver: bridge

There are two services here: web and accessibility. docker-compose runs two services simultaneously and accessibility wait till 6006 port of web is ready.

The takeaway of this:

networks setting is important, both needs to be in the same network, otherwise wait-on doesn't work
use puppeteer docker image in the accessibility service to save the time of setting headless Chrome and puppeteer
use logging: driver: none to get rid of noises from the web service

Then, change the storybookUrl of storyshots:

initStoryshots({
  suite: 'A11y checks',
  test: axeTest({ storybookUrl: 'http://web:6006' }),
});

Finally, the pipeline!

CircleCI

In your pipeline, add a job called accessibility.

  accessibility:
    docker: 
      - image: cimg/base:2021.03-20.04
    steps:
      - checkout
      - setup_remote_docker:
          version: 19.03.13
      - run:
          name: Accessibility tests
          command: |
            set -x
            docker-compose -f ./docker-compose.yml up --exit-code-from accessibility

The important stuff here: --exit-code-from <YOUR-DOCKER-SERVICE-NAME>.

By default, CircleCI gets exit code from the image itself, this means, even you have failed tests in accessibility, the pipeline is still passed.

By setting this exit-code-from, we can control the behaviour of pipeline to get exit code from docker container accessibility, i.e. when accessibility tests failed, pipeline throws an error.

See, the pipeline failed after setting exit-code-from!

One thing that is for CircleCi only, is the setup_remote_docker command (see official doc), which is connecting to remote docker service. Otherwise, docker-compose doesn't work without docker.

Add that to your workflow, for example:

workflows:
  tests:
    jobs:
      - test
      - accessibility

That's all. Enjoy!

Feel free to check my repo and my pull request for the a11y pipeline!

Beware, manual testing is still important!

Automatic test of accessibility is convenient but it can only catch a small number of accessibility issues.

Some sophisticated issues, e.g. a form that doesn't work well with VoiceOver, still need manual checks.

If you do care about accessibility, remember to do some manual checks!

How to learn TypeScript effectively?

Yuki Cheung — Fri, 28 Feb 2020 15:17:00 +0000

TypeScript is notorious for its steep learning curve, especially to a programmer who doesn't have exposures or not familiar with Object-oriented Programming (OOP). Moreover, there are lots of exceptions to Javascript even you are familiar with OOP.

The question is: how can I learn TypeScript effectively?

How to know what type is it?

You may feel lost when first try to learn TypeScript. That's how I try to figure out what type it is.

Get help from your IDE

I am using Visual Code right now and it perfectly integrates with TypeScript. When you hover a variable in your script, you can see the types generated by TypeScript.

If not, you can hover it and right click -> to see type definition. Then VSCode should show you the file where the type definitions located.

After typed, VSCode can have autocomplete on objects too! Amazing!

Your last resort: DefinitelyTyped

For some application like React, they have their own types in DefinitelyTyped repo. For example, if you want to find how React defined <a>, you can search in DefinitelyTyped/types/react/index.d.ts and it is located in React.AnchorHTMLAttributes

How can you use it? It is simple, you can try:

interface Link extends React.AnchorHTMLAttributes<HTMLElement> {
  ...yourProps
}

Even you didn't define any props, you can still use your Link component in this way without getting TypeScript linting error:

<Link href="<YOUR-LINK>">My first link</Link>

It is because you already extend the type definition from React, so you can use it without defining them yourself.

How to write your own type?

When you are learning TypeScript, the best way to improve your skills is to practice more. The TypeScript documentation should be a great starting point.

When trying to write your types, I think the following methods are extremely useful and productive for your workflow.

Union type

type Button = {
  variant: 'primary' | 'secondary';
};

Union type helps you to further restrict the input, for example, in the above Button component, you can just write string for variant props. It means you can put in any string you like (that may or may not break your code). after implementing union type, you can only input primary or secondary.

If you try to input strings other than primary or secondary, TypeScript will block you!

Intersection Types

You can also combine different types into one:

type Button = {
  variant: 'primary' | 'secondary';
};

type Link = {
  href: string;
};

type ButtonWithLink = Button & Link;

In the above example, ButtonWithLink has properties of both Button and Link type. That means you can use the same props e.g. variant or href in this new type.

typoeof

It is normal to have a huge object in a complex application, for example:

const jsonObj = {
  type: 'test',
  variant: 'test',
  value: 3,
  disabled: false
  purchase: {
    name: 'T-shirt';
    qty: 200
    type: {
      size: 'XL',
      color: 'white'
      ...
    }
    ...
  }
};

type JsonType = typeof jsonObj;

// Equals to
// type JsonType = {
//   type: string,
//   variant: string,
//   value: number,
//   disabled: boolean,
//   purchase: {
//   name: string;
//   type: {
//     size: string;
//     color: string;
//     ...
//   }
//   ...
// }
// }

The above sample data is in a simple data structure, you can still do the typing manually. but when you encounter a JSON object with nested objects or array, the typeof function becomes super useful.

keyof

The same rationale applies to keyof, it gets all keys in the object.

const jsonObj = {
  type: 'test',
  variant: 'test',
  value: 3,
  disabled: false
  color: {
    red: '#f44336',
    purple: '#9c27b0',
    pink: '#e91e63'
  }
};

type Color = keyof typeof jsonObj.color;
// Equals to
// type Color = "red" | "purple" | "pink"

Partial

Partial is useful when you just need one field in your type. For example:

type Person = {
  name: string;
  age: number;
  email: string;
};

const updateData = (userData: Partial<Person>) => {
  // so you can just update one field
};

Be careful, Partial makes all the fields optional under the hood, just make sure you don't need a mandatory field when you use it.

type Partial<T> = {
  [P in keyof T]?: T[P];
};
// all fields are optional in Partial

If you want to know more, you can view the official documentation.

My Journey

TypeScript looks scary at first.

I tried to learn TypeScript on my own by forcing myself to use Angular a year ago, which is using TypeScript. However, even after I finished my toy project in Angular, I think I only learn a little bit of TypeScript. Few months before, I started to use TypeScript in my company, when I see how the others wrote in TypeScript, suddenly I learn a lot of how to use keyof, typeof, Partial, Pick etc.

The main keys are to write a lot and always find the best way to do typing (i.e. find the best way to be lazy!).

I hope my learning journey of TypeScript would help you too!

My first experience of using Snowpack - a new way of building JS

Yuki Cheung — Fri, 10 Jan 2020 16:08:00 +0000

Do you think it is complicated to bundle your web application? Recently I saw a relatively new thing to me: Snowpack, it claims it can “Build web applications with less tooling and 10x faster iteration”.

Let’s have a look on how to build a simple React app with Snowpack!

Install Snowpack

First, install Snowpack.

npm install snowpack
## or use directly using "npx snowpack"

As I normally use React, so I decided to install React, rather than using Preact that recommends by the Official Guide. You need to install the react packages that support ESM, in order to use with Snowpack.

npm install react@npm:@reactesm/react react-dom@npm:@reactesm/react-dom

Then you can run npx snowpack after install. You will see a new folder called web_modules that contains react and react-dom.

Install Babel

npm i @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-react @babel/preset-env serve

With .babelrc file in the root folder and add "snowpack/assets/babel-plugin.js" to the plugin, this is a crucial one if you need to import plugin by name, like import react from 'react'.

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx"],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["snowpack/assets/babel-plugin.js", {}]
  ],
  "presets": [
    "@babel/react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        },
        "modules": "false",
        "useBuiltIns": false
      }
    ]
  ]
}

I added a npm script for babel in package.json:

"babel": "babel src/ --out-dir lib --watch"

Finally… React!

First, create a index.html at root folder (same folder as package.json).

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Snowpack - Simple Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/lib/index.js"></script>
  </body>
</html>

Create a folder called src and an index.js file inside, also create App component.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";

ReactDOM.render(<App />, document.getElementById("root"));

// in folder components/App.js
import React from "react";

const App = () => <div className="app">hello world</div>;

export default App;

Serve your site

Run babel src/ --out-dir lib --watch or npm run babel if you have create a script inside package.json, then simply run npx serve to serve your contents.

You should see “hello world” in your browser http://localhost:5000! Viola!

What I learn

It is a new way of thinking

Everything Snowpack runs is inside web_modules, it is a really different way of thinking, rather than using webpack or other bundling tools. As it is new way of doing things, there is not many documentation or tutorials, except the official one. For the things we used to, like hashing filename on build, hot loading while development etc… It is still unknown to me with Snowpack.

Besides of those unknown, it is really 10x easier if you need to start from scratch. You don’t need to write webpack config and worrying about the development server, the speed of starting a new project could be really 10x faster than before.

This might be the future in the next 3-5 years!

Not every browser supported ESM

Like they stated in the Snowpack official guide, it only supports modern browser, which means… Goodbye IE11. I knew that still lots of company or sites in Asia, especially China, still need to support IE11, that means you cannot use Snowpack on those websites.

The documentation is important

As this project is relatively new, it doesn’t have much documentation like webpack. it looks simple on the official guide, like for installing babel, it just only have four steps, but actually you need more than 4 steps to get it work and you can only know what to do by viewing the source of the demo.

So, which one is better? Snowpack or webpack?

It depends on what your usage is. If you are developing a static website or a simple landing page, this tool saves lots of setup time from scratch and it did optimisation for you, so you don’t need to worry about it.

If you are developing a fully functional web application, the webpack config is truly powerful and Snowpack did not have much config that you can tweak.

Nevertheless, whether to choose using Snowpack or not, the idea of using JavaScript modules (ESM) is definitely a thing. If we can get rid of supporting IE11 in the next 3-5 years, JavaScript modules (ESM) should be more popular in the future. It is worth it to have a look on it though!

Build a custom audio player with accessibility

Yuki Cheung — Fri, 28 Jun 2019 00:00:00 +0000

This article was originally posted in my personal blog.

This is not my first time to create a custom audio player.

In order to cater for my lovely designer's needs, I need to create a custom audio player. After learnt HTML5 Audio attributes and viewed more tutorials of making custom audio player, most of the tutorial did not mention accessibility.

This time I use React for audio player, but you can always view my last custom audio player for vanilla JavaScript version (although did not care much about accessibility at that moment).

I am not an expert of accessibility at all, feel free to let me know your thoughts!

The markup of player

First, the outer container of the audio player, it should have role="region" and aria-label="Audio Player". Role tells screen reader this div represents something, and from aria-label, the screen reader knows it is an audio player.

Outer container

<div className="c-audio" aria-label="Audio Player" role="region">
  // ...
</div>

Play button

The following is the play button inside:

<button
  title={!isPlay || isPlay === null ? 'Play' : 'Pause'}
  className={
    !isPlay || isPlay === null
      ? 'c-audio u-btn l-play l-play__play'
      : 'c-audio u-btn l-play l-play__pause'
  }
  aria-controls="audio1"
  onClick={this.controlAudio}
  aria-label={!isPlay || isPlay === null ? 'Play' : 'Pause'}
/>

The aria-controls links to the id of the audio tag at the bottom (e.g. <audio id="audio1" ... >) and aria-label changes while playing or pausing.

Slider

For the audio control, actually I want to use range (e.g. <input type="range" ...>), however, it is hard to maintain same styles in all browsers, so I decided to use div with svg, plus aria labels. Also, I used tabIndex="0" here for keyboard to focus into this element.

In this slider, user can:

use mouse or keyboard to change current time of audio
can focus the slider
can use mouse to change position
can use left or right key in keyboard to change position

<div
className="c-audio__slider"
onKeyDown={this.onKeyDown}
onClick={this.onClick}
tabIndex="0"
aria-valuetext="seek audio bar"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow={Math.round(percentage)}
role="slider"
ref={this.audioSeekBar}
>

It needs lots of work to reinvent the slider, but it is worth it. After these implementations, you can create slider with different styles, also with accessibility! View here for example from WAI-ARIA Authoring Practices.

Manipulate the slider

How to change the percentage of slider when it detects click or key down? We can use onClick and onKeyDown function. For the click function, it calculates the percentage of click position. (Note: seekBar.getBoundingClientRect().left is for IE11, as it doesn’t support x/y values)

onClick(e) {
    const seekBar = this.audioSeekBar.current;
    const audio = this.audioFile.current;

    const pos =
    (e.pageX -
        (seekBar.getBoundingClientRect().x ||
        seekBar.getBoundingClientRect().left)) /
        seekBar.getClientRects()[0].width;

        this.setState({
            percentage: pos * 100
        });

        audio.currentTime = audio.duration * pos;
}

For keyboard version, it add or decrease percentages based on different keys.

Keybindings for slider:

top: to 100 (max)
bottom: to 0 (min)
left: -1 step
right: +1 step
top: +10 steps
bottom: -10 steps

onKeyDown(e) {
    // when user focus in audio slider and 
    // clicks keys inside key list, will change current time of audio
    const audio = this.audioFile.current;
    const isLeft = 37;
    const isRight = 39;
    const isTop = 38;
    const isBottom = 40;
    const isHome = 36;
    const isEnd = 35;
    const keyList = [isLeft,isRight,isTop,isBottom,isHome,isEnd];

    if (keyList.indexOf(e.keyCode) >= 0) {
        let percentage;
        switch(e.keyCode) {
            case isLeft:
            percentage = parseFloat(this.state.percentage) - 1
            break;
            case isRight:
            percentage = parseFloat(this.state.percentage) + 1
            break;
            case isTop:
            percentage = parseFloat(this.state.percentage) + 10
            break;
            case isBottom:
            percentage = parseFloat(this.state.percentage) - 10
            break;
            case isHome:
            percentage = 0
            break;
            case isEnd:
            percentage = 99.9 // 100 would trigger onEnd, so only 99.9
            break;
            default:
            break;
        }

        // add boundary for percentage, cannot be bigger than 100 or smaller than zero
        if(percentage > 100) {
            percentage = 100
        } else if(percentage < 0) {
            percentage = 0
        }

        this.setState({
            percentage
        });

        audio.currentTime = audio.duration * (percentage / 100);
    }
}

Audio Tag

The main thing here is the audio tag. From the audio tag, we need to use onTimeUpdate and onEnded to control the slider. When the audio is running, it calls the function of onTimeUpdate and update the slider.

When the audio ends, it changes the current time of audio to zero and change slider’s percentage to zero too. For the <track kind="captions" />, it is for audio or video which has subtitles, we don't have one here, so skip it right now.

<audio
  className="c-audio__sound"
  id="audio1"
  src={path}
  onTimeUpdate={this.getCurrDuration}
  onEnded={() => {
    this.audioFile.current.currentTime = 0;
    this.setState({
      isPlay: false,
      currentTime: 0,
      percentage: 0
    });
  }}
  ref={this.audioFile}
>
  <track kind="captions" />
</audio>

Focus Styles

Also, don’t forget to create custom focus styles for play button and slider!

.l-play:focus {
  outline: none;
  box-shadow: 1px 1px 1px 0px rgba(25, 25, 25, 0.2);
}

Result

View my result in the following or click here to view on Codepen!

Welcome to drop me a line or let me know your thoughts! :)

How to load your custom fonts in a smart way

Yuki Cheung — Sat, 01 Jun 2019 09:27:44 +0000

This article was originally posted in my personal blog.

Nowadays, the size of the webpage is bigger than before. Thanks to the improvement of bandwidth, it is fast to load everything even you have large images in the site.

However, this may harm your user's surfing experience. One of the hurdles is your fancy fonts.

The Problem

For example, you have a multi-language website and each language has its own custom fonts, for example, English and Japanese. The user would need huge bandwidth to load your site. Moreover, they will see "flash of invisible text" or so-called FOIT.

How to solve this problem?

1. Use modern font type (woff and woff2)

First, review your css files which defined font-face. It should be something like this:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Now you can see, there are lots of font type in order to support different browsers. woff and woff2 for modern browsers, truetype and embedded-opentype for legacy browsers etc.

Actually, the loading order of font is based on the order in src. That means, if you want the browser to load truetype first, you can put it at the top. In this example, the browser will load eot first.

Unfortunately, eot is not optimized like woff and woff2, i.e. not compressed. It is better to always load woff or woff2, both are supported by modern browsers and have built-in compression. With compression, their file size is relatively smaller than eot etc.

For this example, better to change to:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

The browser will automatically fallback to next entry if it does not support woff2.

2. Use font-display to load faster

To prevent "flash of invisible text", better to use font-display in your stylesheet.

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

In default, the browser uses auto, and normally means font-display: block, this setting will block browser to load text before finished loading custom fonts. That is why the user will see a flash of unstyled text.

The other settings swap, fallback and optional have different block periods, so you can choose the one suits you.

For example, you have a header using a custom font and you just want to show it in custom fonts, you can use fallback. The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text.

Think carefully about what you need, then you should be able to discover the best option for your website.

If you are using Google fonts, now you can set font-display by adding &display=<your-display-type> at the end of Google Fonts link. For example: https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=block.

3. Unicode-range subsetting

For a website which has different languages, for example, a single page app (SPA) with Japanese and English version, normally both have different font-face. It is a waste if you open an English page but the browser also loads Japanese custom fonts, right? How can we solve this issue?

/* Japanese fonts example */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-jp-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-jp-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

The solution: unicode-range. If you set the unicode range, the browser will load the most suitable fonts for each language. Normally, English should be unicode-range: 0020—007F. For more languages, you can check it in unicode-table.

4. Host your fonts locally or in CDN

One of the bottlenecks of loading fonts is speed. If you need to call your fonts from another server, like Google Fonts, the page may need more time to load. Use Google Font Helper to download all font files and host it your own.

When your fonts load faster, the chance of getting FOIT should be lesser.

5. Preload your fonts

A minor that most of the developers forget is the preload tag. To make your fonts load faster, you can add preload to your font files. Unfortunately, this trick is not available in all browsers, like Firefox, is still not available to use preload. For more details, view caniuse.com

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

Final

Hope you enjoy this post! Welcome to share your thoughts or tricks on web performance :)

Nevertheless, Yuki Coded

Yuki Cheung — Sat, 09 Mar 2019 03:02:04 +0000

I continued to code in 2019 because...

I love web development and coding! The world of web development is changing at an incredible speed and I would like to learn more about different things.

Not only things that interested me, like front-end framework or new tools of automation, I do also want to do something to change the world.

The world of internet is for everyone, without any borders! Whether you are male, female, disabled, young, old etc., you can use the Internet to free your mind.

Coding is ART and I love it!

Coding is for everyone!

Since being front-end web developer from 2017, I contributed lots of reusable components, automated scripts and unit testing in my company.

Gender is not an excuse for not hiring female engineers. The structure of the brain of female and male may not be the same, but different minds make a masterpiece! A team without diversity is just a mess, right?

I hope more female can try to learn to code. Coding is not a privilege for male, everyone can code! Even coding for some trivial, routine things, like automated your process of Excel, is coding.

Don't need to be afraid, try it! :)

How to fix popup's scrolling on Safari

Yuki Cheung — Thu, 21 Feb 2019 12:40:22 +0000

Today, I created a fancy popup, well just a normal one, to open a overlay with a simple register form. Suddenly, someone with iPhone shouted, "Hey, that is not working on my iPhone!"

Not working? When I look at his screen, it is iPhone with Safari. Obviously, the scroll did not only scroll the popup, but also the HTML body!

Situation

I am an Android user, so I can only check with my Android phone. The popup looks fine on IE, Chrome, Firefox in desktop and Chrome/Firefox in Android.

Here the headache comes, the scroll does not work on Safari. Only Safari! Of course, you cannot reproduce this behavior on Windows or Android.

My HTML markdown is like this:

<body class="no-scroll">
    <div class="overlay hide">
        <div class="popup" id="popup">
            <!-- Lots of contents here -->
        </div>
    </div>
</body>

and my CSS is like this:

.c-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(25, 25, 25, 0.4);
    transition: ease 300ms;
    z-index: 1030;
}

.popup {
    position: relative;
    width: 100%
    height: 100%;
    max-width: 800px;
}

.no-scroll {
    overflow: hidden !important;
}

Looks normal. Finally, after trial and errors, I know that this is exclusive behavior of Safari, or WebKit browser.

First Try: add webkit specific css

First, I tried to add this to .popup and body:

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

It doesn't work, the body is keep scrolling! But this CSS does add momentum scrolling to my page in Safari.

Second Try: add tag on body

Some comments said they fixed it by adding this tag to body. Not working in my case. The body keeps scrolling, scrolling and scrolling.

<body class="no-scroll" ontouchstart="">

Final Answer: body-scroll-lock

I found this package from Stackoverflow, it seems to have workarounds for Safari, to stop the strange behavior while touchstart and touchmove.

Paste the minimized JavaScript tag to HTML and:

const targetElement = document.getElementById("popup"); //only popup can scroll

//put this when popup opens, to stop body scrolling
bodyScrollLock.disableBodyScroll(targetElement);

//put this when close popup and show scrollbar in body
bodyScrollLock.enableBodyScroll(targetElement);

It finally fixes my problem! Everyone is happy.

Hard to test on Safari as an Android user, but it is good to recognize this problem. Hope this guide can help someone in need. :)

Things I learned after writing tests for JS and HTML page

Yuki Cheung — Sat, 12 Jan 2019 01:14:00 +0000

In these weeks, I always want to learn about writing tests using Jest, Mocha or other stuffs. Unfortunately, I don't have any React apps that want to test these days but I have chances to figure out how to test HTML page with pure JavaScript.

I found most tutorials are using Jest with React or other JavaScript frameworks. Is it really possible to test HTML page with Jest? Yes!

How to start

View the demo here for my sample HTML page. Just a simple page to fetch JSON, show a list based on it and a button to show/hide translations.

In your root folder, create a package.json like this, and run npm install in console.

{
    "scripts": {
        "test": "jest --watch",
        "coverage": "jest --coverage"
    },
    "devDependencies": {
        "jest": "^23.6.0"
    }
}

When you finished, you can start testing your app! Create a file <YOUR-FILENAME>.spec.js and start testing like:

const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8');

jest
    .dontMock('fs');

describe('button', function () {
    beforeEach(() => {
        document.documentElement.innerHTML = html.toString();
    });

    afterEach(() => {
        // restore the original func after test
        jest.resetModules();
    });

    it('button exists', function () {
        expect(document.getElementById('disable')).toBeTruthy();
    });
});

Save it and run npm test!

View my GitHub here for codes

What I learned

1. Difference between testing HTML and React page

In React, you can use Enzyme to shallow the component and get state for testing. But in HTML and JavaScript page, the only thing you can test is the classes, content and function output. When you are used to test by states, it might be not so convenient to test HTML page.

As pure JS did not export anything for Jest to test, you also need to add this at the end:

if (typeof exports !== 'undefined') {
    module.exports = {
        getItem,
        setItems,
        triggerItem
    };
}

Then Jest can import/export functions for testing.

For HTML, you cannot directly import it like React component. You need to add this snippet before tests, to import the whole HTML:

const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8');

jest
    .dontMock('fs');

or write inline HTML inside tests. For example:

const html = document.createElement('div');
html.innerHTML = `<div class="lang-grid" id="language">This is a sample</div>`;
document.body.appendChild(div);

2. Special way to test asynchronous code

It is still easy to test basic thing, like checking the menu button will appear in mobile view using Jest. Like:

    it('menu button exists', function () {
        expect(document.getElementById('menu-btn')).toBeTruthy();
    });

But for asynchronous code, like Promise, you need to use different approach.

The most important thing is to add done() in each test.


    it('get same items from json', function (done) {
        fetch.mockResponse(JSON.stringify(json))
        const {getItem} = require('../scripts/main.js');

        getItem().then(res => {
            expect(res).toEqual([{
                "phase": "Entschuldigung!",
                "trans": "Excuse me. [as in may I have your attention]."
            },
            {
                "phase": "Sprechen Sie Englisch?",
                "trans": "Do you speak English?"
            }])

            expect(res.length).toEqual(2);
            done();
        })
        .catch(err => console.log(err))
    });

Just like what Jest documentation said, it is important to add done() in the test. Otherwise, it may have wrong results.

After you added done(), it will wait till your async call to be resolved and get the expected result.

3. Check coverage using Jest

Jest has built-in coverage function, you can call it using jest --coverage. Then you can see your reports in coverage/lcov-report/index.html. The chart is very useful and inform you which code have not tested.

(Why it is not 100% in branches? Because I skipped the test of exporting module statement at the end. )

I have not use coverage tool before, that's why I am motivated when I saw my code changed from red to green!

Is testing fun?

Well, it may not be fun, but surely is satisfactory when I saw my code changed from RED to GREEN.

Do you have any suggestions to my flow? Or any ideas on testing? Feel free to drop me a line here :)

My first try of the new Web Animation API

Yuki Cheung — Fri, 28 Dec 2018 10:00:37 +0000

Recently, I (finally) found out the new Web Animation API, which can use JavaScript to create smooth animation just like CSS one, but with more features, like changing speed or play/pause/cancel animations. Developer can have more flexibilities to create different animations.

Note: The web animation API is still an experimental technology, not all browsers supported it. Don't forget to add polyfill before use!

First Try

This time, I am trying to create animations of gears, since it is normal to see gears in different speeds or users can choose to start/stop animation when in need.

Normally, you can use CSS to create rotating gears like:

.gear1 {
    animation: gears 1500ms infinite;
}

@keyframes gears {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

But now, you can use few lines of Javascript to create the same effects:

  const rotate = [
    { transform: "rotate(0deg)" },
    { transform: "rotate(360deg)" }
  ];

  const timing = {
    duration: 1500,
    iterations: Infinity
  };

  const firstGear = document.getElementById("gear1").animate(rotate, timing);

You can see that the settings on @keyframes is moved to the first part of animate(), and one different thing from CSS is infinite changes to iterations: Infinity in the new Web Animation API (WAAPI).

First animation using WAAPI:

You can also control percentage in animation just like CSS:

const blink = [
  { transform: "rotate(0deg)", opacity: 1, offset: 0 },
  { opacity: 0, offset: 0.3 },
  { opacity: 1, offset: 0.5 },
  { opacity: 0, offset: 0.7 },
  { opacity: 1, offset: 0.9 },
  { transform: "rotate(360deg)", opacity: 1, offset: 1 }
];

  const timing = {
    duration: 1500,
    iterations: Infinity
  };

const firstGear = document.getElementById("gear1").animate(blink, timing);

As you can see, the offset: 0 is just like 0% in CSS's keyframes, you can change different properties like color, transform, opacity etc. as you like.

For the timing, you can also add other settings like delay, easing, fill etc. You can view the full list here.

Control Animation

After creating gears, you can also control the animation using Javascript. Like what we do at the first part, we declared the gear element as firstGear, now we can use it to switch on or off the animation.

For example, you can create a button, when user clicks that, it will stop the animation.

<button id="stop">Stop</button>

Then, just add one line of javascript, you are done:


document.getElementById("stop").addEventListener("click", function() {
    firstGear.pause();
});

You can also use these to start or cancel the animation:

firstGear.start();
firstGear.pause();
firstGear.cancel();
firstGear.reverse();

For reverse, only normal animation can use reverse. If you are creating infinite animation like this gear, you cannot simply use <YOUR-ELEMENT>.reverse().

In this case, we can use direction in the timing variable:

const timing = {
    duration: 1500,
    direction: "reverse",
    iterations: Infinity
  };

Speed is king!

How can we change the animation speed after some events (e.g. after clicking button)?


document.getElementById('<YOUR-ELEMENT>').addEventListener("click", function() {
    firstGear.playbackRate = 2; //speed x 2
    firstGear.playbackRate = 1; //normal speed
    firstGear.playbackRate = -1; //reverse your animation!
});

If you like, you can even set some conditions inside! For example, the loading animation, the gears can move slow at first, but when the page is nearly loaded, the gear speed can be faster!

View my complete gears here:

And more?

Unfortunately, the support of WAAPI is not very good right now, some features are not supported in current browsers.

For example, if you need to change animation, like switch from rotating effects to fading effects. You will need to use composite and iterationComposite property, with the setKeyframes() function. Sadly, all are not fully supported in modern browsers.

Nevertheless, we are still able to create smooth animations with more controls using basic functions. Hope browsers can support more and more features in the future!

How to create your instant form validation

Yuki Cheung — Mon, 17 Dec 2018 05:13:00 +0000

It is easy to use any libraries in JavaScript to add validations, however, have you ever wonder how the form validation works?

Let's see how we can roll out our own form validations with error messages!

What we are going to create today:

First step: create your patterns!

In the last few days, I tried to create my own form validation system for learning purpose. First we can do is: to create the basic structure of form.

<form class="c-form" id="form">
    <label for="email"><span class="c-form-label">Email <abbr title="Required">*</abbr></span>
        <input class="c-form-input" id="form-email" type="email" name="email" required="required" pattern=".{3,}" />
        <span class="u-alert" id="form-email-error">Please enter a valid email format</span>
    </label>
    <label for="name"><span class="c-form-label">Name</span>
        <input class="c-form-input" id="form-name" type="text" name="name" pattern="^[A-Za-z ,.'-]+$" />
        <span class="u-alert" id="form-name-error">Please enter a valid name with alphabets only</span>
    </label>
    <label for="message"><span class="c-form-label">Message <abbr title="Required">*</abbr></span>
        <textarea class="c-form-input" id="form-message" minlength="10" maxlength="200" rows="4" name="message"
            required="required"></textarea><span class="c-form-input__length"><span id="form-message-length">0</span>/200</span>
        <span class="u-alert" id="form-message-error">Please enter at least 10 characters and less than 200 characters.</span>
    </label>
    <label class="c-form-group" for="signup">
        <input class="c-form-checkbox" id="form-signup" type="checkbox" name="signup" />
        <span class="c-form-label">Sign me up for latest updates</span>
    </label>
    <input class="c-form-submit" id="form-submit" type="submit" value="Submit" name="submit" />
    <span class="u-alert" id="form-submit-error">Please correct all information and try again.</span>
</form>

The most important thing in this snippet is the pattern property in all input elements. The mysterious string in the pattern is Regular Expressions (RegEx), that means if the user input anything that mismatch the pattern, it becomes invalid.

For example, there is a store that only sold apple, and they have a form that allows user to input what fruit they want.

Unfortunately, they only have apple, so they can restrict people to enter apple only by using pattern="apple". Thus, all users can only enter apple, otherwise, the form becomes invalid.

Of course, no shop would do this, just for example :)

Step 2: hide the error message

Now, you form is ready, but the error message is always under the input element. How can we fix it?

We can use CSS to control the visibility of this element.

.c-form-label {
  display: block;
  margin: 1em 0 0.2em 0;
  font-size: 0.8em;
  text-transform: uppercase;
  color: rgba(25, 25, 25, 0.8);
}

.c-form-label abbr {
  text-decoration: none;
}

.u-alert {
  display: block;
  height: 0;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: ease 400ms;
  font-size: 0.8em;
}

.u-alert.invalid {
  color: red;
  opacity: 1;
  height: auto;
  max-height: none;
  margin-top: 0.3em;
}

The base class of error message is u-alert, its default is opacity: 0 and height: 0. Of course, need to add overflow: hidden, otherwise it would still occupy your spaces.

If the form is invalid, we will add invalid class to this error message (later via JavaScript). You can see, if it adds invalid class, its opacity becomes 1 and height: auto.

You may wonder why we won't use display: none at u-alert class, the reason is that we want to have transitions between valid and invalid state. That's why I added transition: ease 400ms at the end.

Step 3: trigger the error message

After hiding our error messages, now it's time to trigger the error message!
First, we need to get all inputs in the page, using Array.prototype.slice.call(document.getElementsByTagName('input')). Then, the browser will automatically get all inputs.

const inputList = Array.prototype.slice.call(document.getElementsByTagName('input')).filter(item => item.type !== 'submit' && item.type !== 'checkbox');
const input = inputList.concat(Array.prototype.slice.call(document.getElementsByTagName('textarea')));

//valid each item and set error message
  function isValid(input) {
    const target = input.id ? input.id : input.target.id;
    const valid = document.getElementById(target).validity.valid;
    if (valid) {
      document.getElementById(`${target}-error`).classList.remove('invalid');
      document.getElementById(`${target}-error`).removeAttribute('role');
      document.getElementById(target).setAttribute('aria-invalid', 'false');
    } else {
      document.getElementById(`${target}-error`).classList.add('invalid');
      document.getElementById(`${target}-error`).setAttribute('role', 'alert');
      document.getElementById(target).setAttribute('aria-invalid', 'true');
      console.log(document.getElementById(target));
    }

    if (document.getElementById('form-message').value.length !== length) {
      length = document.getElementById('form-message').value.length;
      document.getElementById('form-message-length').innerText = length;
    }

    return valid;
}

Tips: Why I would use slice here is for supporting IE11, as IE11 treats document.getElementsByTagName('input') as NodeList, not an array. We cannot directly use forEach without transforming to array. (Well, I know IE11 don't support arrow function. but this is just for demonstration purpose.)

The magic is coming!

input.forEach(item => {
  if (item.type !== 'submit' && item.type !== 'checkbox') {
    //add event listener for input
    item.addEventListener('input', function(e){
      isValid(e);
    })
}

Using event listener "input" (which supports well in all browsers), you can detect the validity when user is typing.

The difference between "change" and "input" is, change will trigger only after user stop typing and did not select that input element right now (out of focus). Input is continuously responses when user is typing or selecting something.

Step 4: instant validation is coming! Yay!

The last thing we need here is the "isValid" function. It uses the validation in browser (via the pattern property), you can get the valid status using document.getElementById(<your-element>).validity.valid and it returns boolean true or false.

Then add this CSS to make it works better:

.c-form-input {
  display: block;
  border-color: rgba(25, 25, 25, 0.1);
  border-width: 0 0 2px 0;
  padding: 0.2em 2em 0.2em 0;
  transition: border-color ease 300ms;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 99% 50%;
  width: 100%;
}

.c-form-input:focus {
  border-color: #03A9F4;
}

.c-form-input[aria-invalid="false"] {
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%234CAF50' d='M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563-1.406 1.406zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984z'></path></svg>");
  margin-bottom: 0;
}

.c-form-input[aria-invalid="true"] {
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23F44336' d='M17.016 15.609l-3.609-3.609 3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984z'></path></svg>");
  border-color: red;
  margin-bottom: 0;
}

Tips: You can also use .c-form-input:invalid and .c-form-input:valid to create valid / invalid effects, but it will always show even the form is empty. That means when user first visit your form, they will see lots of red crosses!

Using aria-invalid to style input elements is good for both accessibility and user experience, since user will not see lots of red crosses when they visit your form at the first time.

For the background image, I have used inline SVG because:

I don't want to link the SVG from my GitHub page
It should be faster for loading performance, if browser did not need to get SVG from GitHub

(Icons are from Material Icon and get inline SVG from Icomoon)

Tips: for submission, you need to create a new function & event listener and add preventDefault() inside, otherwise it will show default error popup! (which is not very good-looking)

At the end

You can view my finished form here with styles and extra gimmicks like debounce function and custom event for auto complete validation.

Hope you learn more about form validation! What is your thoughts on form validation? Do you have better ways to do so? Feel free to let me know! :)