Original article: <https://dev.to/meldiron/faker-js-generator-never-write-sample-data-manually-again-57ba>

---

I created this project when I tried to learn proper state management on the frontend. I wanted to come up with a project that has a complex state and will be helpful for at least one person. There you go, **Faker.js Generator** 😱

**Links:**

* [Live demo](https://faker-generator.netlify.app/)

* [Github project](https://github.com/Meldiron/faker-generator)

---

## Problem ➡️ Solution

First of all, I believe we can all agree that testing the frontend with sample data is necessary to lower changes of visual bugs on production. If you placed the same  `Lorem ipsum ...` into every paragraph on your website, you would not get far because there are some texts that you expect to be short, such as the user's first name. On the other hand, if you used simple `Hello world` everywhere, you would not test long paragraphs properly and might miss text alignment issues.

Secondly, you always need to test your frontend with multiple sample data. Data is the dynamic part of your website, and chances are, there will be some content generated by a user. Believe me, my most common problem when developing a frontend application was that I **expected** the user to do something. I learned this is not true the hard way when I found users with emails like `daniel-michael-blake-day-lewis-1985@gmail.com` started joining the platform, and I was trying to fit the whole email into 100px wide element.

Last but not least, there are many cases when a team is developing a full-stack application, and sadly, some companies force frontend developers to work on UI without backend prepared. You end up copy&pasting texts from Figma... Yeah, that will fit. It will... But what about actual data? You need to make sure! Get some fake data and test the UI with random data to make sure it really fits, so you don't have to re-check your whole application on every single device once you start hooking it to the API server.

**To solve these problems** I came up with a simple web application that lets you define a scheme you need for your frontend application and simply generate JSON object with random data using [Faker.js](https://github.com/marak/Faker.js/) library.

## How to use

This is pretty much as simple as it gets 😅 Follow a few simple steps to prepare sample JSON data for your application:

1. Define a scheme using no-code GUI

   * I came up with a simple yet powerful interface where you can design any shape of a JSON object. The tool supports plain values, arrays and objects.

2. Spam `Generate` button until you are satisfied with fake data

   * After defining a scheme, you can generate a unique object with sample data by pressing one single button! Define multiple objects easily to test your application for different data. Sure, your UI can fit the name `Matej`. But can it fit `Chernyshevsky`? 🤔

3. Make adjustments to generated JSON manually, if required

   * Since this is a simple no-code platform, you cant expect to build a helicopter with it... The most significant limitation I found out about from feedbacks is joining multiple fake data into one field, such as `firstName + middleName + lastName`. These changes can be easily done manually once you have your JSON ready. For these purposes, the generated JSON is editable right inside the platform in Visual Studio Code-like editor.

4. Copy the JSON and paste it into your project

   * There you go, your JSON is ready! Simply copy the content of the editor into your source code and start using it. The output includes `"` around every key and value to make it a valid JSON if you put it into `.json` file.

## Tips & Tricks

* You can configure the amount of sample data inside JSON arrays, so you fill your UI with multiple blocks. This works for both simple arrays and arrays of objects.

* Everything is saved into localStorage! Prepare the schema, leave, come back tomorrow and generate a new sample JSON.

* If you paste the output into a javascript file and save it, most IDEs will automatically transfer it into the format without `"` around keys. This makes the code easier to read and smaller in size.

---

That's it, for now ✨ If you are like my side-projects, feel free to follow me, and you will be notified whenever a new post is published. You can also give the project [star on github](https://github.com/Meldiron/faker-generator) to keep me motivated 🙏

Faker.js Generator - Never write sample data manually again ⌛

Original article: <https://dev.to/meldiron/speed-up-your-web-with-blurhash-3mi8>

---

Alongside this article, I wrote a demo project made with Angular, TailwindCSS and Blurhash. You can check it out on [Github](https://github.com/Meldiron/blurhash-angular-demo).

## Table Of Contents

* [Introduction](https://dev.to/meldiron/speed-up-your-web-with-blurhash-3mi8#introduction)

* [What is Blurhash?](https://dev.to/meldiron/speed-up-your-web-with-blurhash-3mi8#what-is-blurhash)

* [Preparing a project](https://dev.to/meldiron/speed-up-your-web-with-blurhash-3mi8#preparing-a-project)

* [Encoding an image](https://dev.to/meldiron/speed-up-your-web-with-blurhash-3mi8#encoding-an-image)

* [Decoding an image](https://dev.to/meldiron/speed-up-your-web-with-blurhash-3mi8#decoding-an-image)

---

## Introduction

Since I started working on e-shops with hundreds of products on the website, I have been looking for strategies to optimise the UX.

I started by adding **loading animations**, but seeing the same rolling animation on ten places of a website is **surely** not the solution:

Then I found out you can use **skeleton loaders** to fill empty spaces with nice-looking elements that represent actual data but are blank at the moment. You can see this approach on dev.to.

This is all you need for most websites, but sadly, this wasn't enough for me. There was still a few seconds of loading time between when my data was loaded and when the images were rendered. I could already see the name and price of a product, but I didn't have pictures loaded yet. Due to this, whenever a new image got loaded, the content jumped. I tried to solve this by defining the size of an image and showing white space while the image was loading, but that made the website feel really boring.

Finally, I met **Blurhash** 🎉

## What is Blurhash?

Blurhash is a tool that takes our 500kb image and generates a 30B hash that can be used to generate a blurred version of an image. You can easily store this hash as a text into your database and load it with every other text content such as article title or author name.

This comes really handy when working with any images because you don't have to be creative about `What will I do while images are loading?`. Instead of creating empty space, you simply take the Blurhash of an image and show the blurred version while the image is loading.

## Preparing a project

I started by creating an empty Angular project with TailwindCSS and Blurhash library installed.

First, I defined my array of images. This simulated data that I would receive from an API so I can start working on the blurring algorithm.

```typescript
images = [
  {
    name: 'Fastest car ever 💪',
    url: 'https://images.unsplash.com/photo-1627392689954-0a4d150687a7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80',
  },
  {
    name: "Let's eat 🍉",
    url: 'https://images.unsplash.com/photo-1627308595127-d9acf19107ce?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80',
  },
  {
    name: "Who doesn't love dogs 🐶",
    url: 'https://images.unsplash.com/photo-1627366247844-b4b5df8854d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
  },
  {
    name: 'We love cats too 😻',
    url: 'https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
  },
];
```

After adding some basic HTML with Angular data binding, I was able to get the images rendered.

To confirm what Blurhash can do in numbers, I decided to write a tiny script that loads the file size of our images and presented it in the HTML.

```typescript
// Calculate original image size
for (const image of this.images) {
  const fileSize = await new Promise<number>((resolve, _reject) => {
    var http = new XMLHttpRequest();
    http.open('HEAD', image.url, true);
    http.onreadystatechange = function () {
      if (this.readyState == this.DONE) {
        if (this.status === 200) {
          const fileSize = this.getResponseHeader('content-length');
          resolve(fileSize ? +fileSize : 0);
        }
      }
    };
    http.send();
  });
  image.originalSize = fileSize;
}
```

Looks good to me; let's start using Blurhash! When working with Blurhash, you split the job into two parts: **ENCODE** and **DECODE**.

## Encoding an image

Before using the blur **hash**, I need to have the **hash**, right? Encode function of Blurhash library takes an array of pixels with their colour ([Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)) and returns a simple string that represents newly-created hash for our image. To provide the correct input to the function, I need to render our image inside a virtual canvas and extract data about the pixels in the canvas

```typescript
private async generateBlurhash(imageUrl: string): Promise<{
  hash: string;
  width: number;.
  height: number;
}> {
  const loadedImageObject = await new Promise<HTMLImageElement>(
    (resolve, reject) => {
      const img = new Image();
      img.setAttribute('crossOrigin', '');
      img.onload = () => resolve(img);
      img.onerror = (...args) => reject(args);
      img.src = imageUrl;
    }
  );

  const canvas = document.createElement('canvas');
  canvas.width = loadedImageObject.width;
  canvas.height = loadedImageObject.height;
  const context = canvas.getContext('2d');
  context?.drawImage(loadedImageObject, 0, 0);
  const imageData = context?.getImageData(
    0,
    0,
    loadedImageObject.width,
    loadedImageObject.height
  );

  if (!imageData) {
    throw Error('Could not render an image.');
  }

  return {
    hash: encode(imageData.data, imageData.width, imageData.height, 4, 4),
    width: loadedImageObject.width,
    height: loadedImageObject.height,
  };
}
```

Now I used this function to add `hash` attribute to our array of images.

```typescript
for (const image of this.images) {
  const blurhashData = await this.generateBlurhash(image.url);

  image.hash = blurhashData.hash;
  image.height = blurhashData.height;
  image.width = blurhashData.width;
}
```

Hmm, that wasn't too bad. Few lines of code and the hashing function is ready 💪 When preparing this project, I noticed that hashing is a pretty CPU-heavy method and takes almost 1 second to finish. It is up to you to decide whether you want to use the client's CPU or do the hashing on the server. Anyway, keep in mind, this only needs to be done when uploading an image, so you don't need to worry about extreme load on the backend.

## Decoding an image

Once I had the hash of an image, I needed to do the exact opposite. I needed to convert our string input into image output.

I started with a simple `decode` function provided by Blurhash library. Alongside the image hash, I provided the expected width and height of hashed image.

```typescript
const blurhashPixels = decode(image.hash, image.width, image.height);
```

This function returns a loooooooong array in which every four items represents the RGBA (red, green, blue, alpha) value of a pixel. You can imagine this as a 2D definition of our image.

Although our 2D array od pixels is pretty useless to us, the canvas can easily convert it into an actual image if we tell it the width and height of our 2D array.

```typescript
const blurhashCanvas: HTMLCanvasElement = <HTMLCanvasElement>(
  document.getElementById(`blurhash_canvas_${imageLoopIndex}`)
);
const ctx = blurhashCanvas?.getContext('2d');
const imageData = ctx?.createImageData(image.width, image.height);
imageData.data.set(blurhashPixels);
ctx?.putImageData(imageData, 0, 0);
```

Finally, I put everything together, hook it to an HTML template and add some delays so I can see what is going on. The result is stunning; check it out!

If you are lost and unsure how some parts work together, please check out my [Github project](https://github.com/Meldiron/blurhash-angular-demo) that contains the whole application I built alongside this article. Snippets in the article were taken from the project to quickly showcase the specific logic of Blurhash.

---

That's it, for now ✨ If you are interested in cool new technologies, feel free to follow me, and you will be notified whenever a new post is published.

⚡ Speed-up your web with Blurhash

Learning serverless technologies to start preparing auto-scalable websites. Recently learned proper state management on frontend applications 💪

Web development

Appwrite with Angular SSR

Combine secure open-sourced backend (Appwrite) with technology to speed up initial load of your website (Angular Universal) to achieve an amazing user experience on your website.

Backing up Appwrite to Backblaze

Learn how to backup Appwrite's storage, databases and function to Backblaze S3 storage.

8 reasons to fall in ❤️ with Appwrite

Have you ever considered Firebase but hated it's pricing? Appwrite is just for you!

Networking course that taught me basics about communication between routes, switches, servers and computers.

Cisco CCNA 1

I have successfully graduated the 'maturita' exam after 4 years of study. I not only learned to speak the
English language on level B2, but also obtained theoretical knowledge about networking, databases
and programming. Meanwhile studying at this school, I was able to get the Cisco CCNA 1 certificate.

Showcase of how to use Colyseus library in Unity to achieve real-time TCP communications between clients and create an online, or even multiplayer experience. The project includes a simple PC/mobile game where you click a cookie to race against other clickers on a leaderbard.

Cookie clicker clone using Colyseus

Web interface to generate JSONs with required schema using random data from Faker.js

Demo: faker-generator.netlify.app/

Faker.JS JSON Generator

A simple demo project showcasing functionality, reasons to use and implementation processes of Blurhash inside Angular.

Blurhash - Angular demo

I prepared an extension to the worldwide famous game Minecraft that help you enjoy specific game mechanics. The extension is based on library Spigot that lets multiple players play together on one server.

InfinityParkour - Minecraft plugin

Alongside one more developer, I created a javascript library that lets you change the default behaviour of a cursor on your website. This lets you create crazy animation on the website to make it look sexy.

Over.js - Javascript library to modify cursor

I started my web development career at a tiny local company that focused on marketing services. I have been working alongside studying and I gained a lot of experience with Node.JS and MySQL.

Junior web developer

Since I finished high school, I have worked as the only web developer for the company Code Ink for 12 months. I worked on many projects that learned me to build, deploy and manage multiple websites using Docker. I also started using many amazing technologies such as Directus, Appwrite or Localazy when working for Code Ink.

Lead fullstack developer

I was a member of a small team that developed an e-shop in 2 months in the summertime. My main focus was to prepare
API server using technologies Node.JS, MySQL, Docker, Swagger and OpenAPI.

Matej Bačo

2021