DEV Community: Ganesh Prasad

How to back up files (from an android phone) on GCS

Ganesh Prasad — Mon, 30 Jun 2025 12:40:12 +0000

This guide outlines a command-line workflow for backing up files from an Android device to Google Cloud Storage (GCS). It's designed for technically experienced users who are comfortable with shell scripting and command-line interfaces like adb and gcloud.

The process involves connecting to the device via the Android Debug Bridge (adb), generating a list of target files, processing that list, pulling the files to a local machine, and finally, uploading them to a GCS bucket.

Prerequisites

Before starting, ensure your environment is correctly configured.

Android Debug Bridge (adb): The adb CLI tool must be installed and available in your system's PATH. On macOS, this can be installed via Homebrew: brew install android-platform-tools.
Google Cloud CLI: The gcloud-cli must be installed and authenticated.
Device Configuration:

Developer Mode: Enable Developer Options on the Android device. This is typically done by navigating to Settings > About phone and tapping the Build number seven times.
USB Debugging: Within Developer Options, enable the USB Debugging toggle.

Note: For security reasons, it's recommended to disable Developer Options after you have completed the backup, as some applications (eg. Government services apps like digilocker) may refuse to run while it is active.

The Backup Workflow

Step 1: Device Connection and Verification

Connect the Android device to your computer via USB. Authorize the USB debugging connection on the device when prompted. Verify the connection by running adb devices. The output should list your device's serial number with a status of device.

Step 2: File Discovery

Run adb shell in a terminal on the laptop/desktop to open a shell on the device and execute standard Linux commands for file discovery. Use pattern matching to filter for specific files. For example, to list all MP4 files from June 2021 in the default Samsung camera directory, you would run:

adb shell 'ls /sdcard/DCIM/Camera/202106*.mp4'

Identify the correct source directories and file patterns for the data you intend to back up.

Step 3: Processing the File List for Ingestion

The raw output from adb shell ls requires sanitization before it can be reliably used in a pipeline.

Line Ending Normalization: The adb shell may output Windows-style CRLF (\r\n) line endings. To ensure POSIX compatibility with tools like xargs, convert these to LF (\n) by piping the output through tr -d '\r'.
Path Manipulation: While adb pull can often handle absolute paths, it's common practice to strip the leading / for consistency. This can be achieved by piping the output through sed -e 's/^\///'.

Step 4: Pulling Files to the Local Machine

To automate the process of pulling each file, pipe the sanitized list of file paths to xargs. This command will execute adb pull for each line of input it receives.

The complete command to find, process, and pull the files to a local directory looks like this:

# Template
adb shell 'ls /<source_pattern>' | tr -d '\r' | sed -e 's/^\///' \
| xargs -n1 -I {} adb pull {} <local_destination_path>

# Example: Pulls videos from June 2021 on the phone to `~/Videos/backup` directory on laptop
adb shell 'ls /sdcard/DCIM/Camera/202106*.mp4' | tr -d '\r' \
| sed -e 's/^\///' | xargs -n1 -I {} adb pull {} ~/Videos/backup

xargs -n1: Executes the adb pull command once for each input line.
xargs -I {}: Replaces the placeholder {} with the input line (the file path).

Step 5: Uploading to Google Cloud Storage

We would assume that you have already created a GCS bucket to store the files. The bucket creation can be done using the cloud console (UI) or using the gcloud cli. We recommend the UI based option, as it also displays information about the billing imapct upfront.

Once the files are on your local machine and the GCS bucket is set-up, use gcloud storage cp with the --recursive flag to upload the entire directory to your GCS bucket. For significantly faster uploads, especially with a large number of files, include the -m flag to enable parallel operations.

gcloud storage cp -m /path/to/local/directory gs://your-bucket-name/ --recursive

Conclusion and Further Optimizations

This workflow provides a powerful, scriptable method for backing up Android data to GCS. For ongoing or incremental backups, consider using gcloud storage rsync instead of gcloud storage cp, as it will only transfer new or modified files, making subsequent backups much faster.

For cost optimization, you can further enhance this process:

Compression: Archive and compress the files locally before the gcloud upload to reduce storage footprint and egress costs.
Storage Tier: If the data is for archival purposes and will be accessed infrequently (less than once a year), select the Archive storage class for your GCS bucket to significantly lower storage costs.

Solving a string prefix problem using Trie in golang

Ganesh Prasad — Tue, 21 Jun 2022 04:47:05 +0000

A few days ago we conducted a learning session on golang for my team at work. It was a short session covering the basics of the language. Since then, I had been thinking of writing a series of blogposts/tutorials about using these basic concepts to solve real algorithmic problems using golang. Today (Sunday, 19th June 2022) I came across this interesting problem about finding matching strings from a list of strings for a given prefix while browsing through some old folders on my laptop. I had solved this problem in Javascript some 3 years ago; today I decided to give it a 'Go' !

The problem

This problem is available on leetcode, here is the link.

Problem statement

You are given an array of strings products and a string searchWord.

Design a system that suggests at most three product names from products after each character of searchWord is typed. Suggested products should have common prefix with searchWord. If there are more than three products with a common prefix return the three lexicographically minimum products.

Return a list of lists of the suggested products after each character of searchWord is typed.

Constraints

1 <= products.length <= 1000
1 <= products[i].length <= 3000
1 <= sum(products[i].length) <= 2 * 10^4
All the strings of products are unique.
products[i] consists of lowercase English letters.
1 <= searchWord.length <= 1000
searchWord consists of lowercase English letters.

Example testcases

Example 1



Input: products =["mobile","mouse","moneypot","monitor","mousepad"], searchWord = "mouse"
Output: [
  ["mobile","moneypot","monitor"],
  ["mobile","moneypot","monitor"],
  ["mouse","mousepad"],
  ["mouse","mousepad"],
  ["mouse","mousepad"]
]

Example 2



Input: products = ["havana"], searchWord = "havana"
Output: [["havana"],["havana"],["havana"],["havana"],["havana"],["havana"]]

Example 3



Input: products = ["bags","baggage","banner","box","cloths"], searchWord = "bags"
Output: [["baggage","bags","banner"],["baggage","bags","banner"],["baggage","bags"],["bags"]]

Solving the problem

This problem is about finding matching strings from a list of strings products for each of the prefixes obtained from searchWord taking one character at a time and appending it to the previous prefix. For example, if the searchWord is "cat", then the prefixes for which we need to find matching strings will be ["c", "ca", "cat"]. For each of these prefixes we are to find 3 matching strings (in lexicographical order, ascending) from the array of strings products.

This problem can be solved efficiently by using the datastructure Trie aka Prefix tree; by efficiently I mean with the worst case time conplexity of O(M+n) where M is the number of characters in the array products and n is the length of searchWord. Before we start implementing the solution, let's have a quick overview of the Trie datastructure.

Trie

A trie is a k-ary search tree. It stores multiple words/strings by taking each cahracter as a node. If multiple words have the same prefix then they follow the same path from the root of the trie until the end of the common prefix. For example, if the list of words is ["CAT", "CAN", "BAT", "BAG"] then the corresponding trie can be visualised as the following diagram.

Here the root node stands for the prefix empty string. As the empty string is a valid prefix for all strings in the list, all of them can be matched from the root node. Then we have the words ["CAT", "CAN"] that have a common prefix "C" and the words ["BAT", "BAG"] that have a common prefix "B". Therefore the root node will have 2 children nodes B and C. Similarly each of the children nodes B and C will have one child node each, standing for A; at this point the prefixes for the respective paths would be "BA" and "CA" and so on.

You can read more about Tries here.

Implementing the solution

In this problem, we want to store only 3 matching words (sorted in lexicographical order) from products at each node. So, each node will have an array of 3 strings to store the matches and a list of pointers to its children.

Let's define this trie structure in go. To make things more space efficient, rather than storing the actual matching strings in each node, we can store their indices in the products array and then look up the actual strings using these indices when we need to output the actual strings. The lexicographical ordering can be easily handled by sorting the products array once. (Think why ?) We can create a struct type to define each node of the trie like the following:



type trie struct {
  words [3]int
  wordsLen int
  children map[string]*trie
}

Here children is a map from strings to pointers to child nodes of the trie node. A tree is a recusrive datastructure, and it's efficient to strore pointers to child nodes on each node of the trie. The wordsLen field is to keep track of how many entries in the words array are valid indices. In golang, int values default to 0, and 0 can be a valid index in the products array even when the 0th string in the products is not a matching string for the node. Therefore it's necessary to keep track of where the valid indices end inside the words array.

As the trie struct has a map field declared inside it and we can not use it before initializing the map, let's also write a helper function to create a trie node, initialize the map and return a pointer to the node.



func newTrie () *trie {
  var t trie

  // initialize the map
  t.children = make(map[string]*trie)

  // return the pointer to the trie node
  return &t
}

Now that we have the trie structure in place, let's write a method to insert words into it. If a word is among the 3 lexicographically smallest matching strings for a node, then we need to store its index in the words array of that node (and increment the wordsLen field). If we have already stored the 3 lexicographcally minimum matching strings for a node, then we do not need to store the word in that node and we can move to its child nodes recursively.

The method needs to take the word, its index in the products array and the current character of the word being inserted into the trie node as arguments. If the trie node does not have a child for the current character, then we need to create a trie node and add it to the children map against the current character.



// Here index is the index of the word in products
// and pos is the index of the current character being added to the trie

func (t *trie) insertWord (word string, index int, pos int) int{

  // if we have not found 3 matching strings yet, then store the word (index)
  if t.wordsLen < 3 {
    t.words[t.wordsLen] = index
    t.wordsLen += 1
  }

  // if we have reached the end of the word, then do nothing else and return
  if pos == len(word) {
    return 0
  }

  // get the current character and check if there is a child node for that character
  // if not, then create a new trie node and add it to children
  ch := string(word[pos])
  if t.children[ch] == nil {
    t.children[ch] = newTrie()
  }

  // recursively insert the word in the corresponding child node
  t.children[ch].insertWord(word, index, pos+1)
  return 0
}

Now that we have the trie structure and the method to insert strings in it, let's write the function to find matching strings for the prefixes. This function will take the array of strings products and the string searchWord as arguments and return a slice of slice of strings with the matching products for each of the prefixes of the searchWord.

First we need to sort the slice products lexicographically. We can use the native package sort to do this. Then we need to initialize the trie and insert all words in products into it.

Then we can traverse the trie from root, taking one character at a time from the searchWord. We will initialize the current trie node to root and mismatched flag to false. For each chacater of the searchWord we need to check if the current node has a child corresponding to the character. If there is a child node, then we have a match and we add the words array of that node to the return slice and set the child node as the current node. If there is no child node corresponding to the character, then we have a mismatch and all subsequent entries in the return slice will be empty, we will set the mismatched flag to true to keep track of this. This is a standard depth first traversal of the trie and it can be implemented like the following.



func suggestedProducts(products []string, searchWord string) [][]string {

  // sort the products slice
  sort.Strings(products)

  // initialize the trie and insert all words in products into it
  root := *newTrie()
  for i, word := range products {
    root.insertWord(word, i, 0)
  }

  // declare the return value, the mismatched flag and current trie node to root
  var ret [][]string
  mismatched := false
  t := root

  // for each character of the searchWord traverse the trie and find matching words
  // if we are unable to find any matches at any point then we can set the mismatched
  // flag to true and all subsequent matches will be empty slices.

  for _, ch := range searchWord {
    ch := string(ch)
    if t.children[ch] == nil || mismatched {
      list := make([]string, 0)
      ret = append(ret, list)
      mismatched = true
      continue
    }

    t = *t.children[ch]
    var list []string
    var i int
    for i=0; i<t.wordsLen; i+=1 {
      list = append(list, products[t.words[i]])
    }
    ret = append(ret, list)
  }
  return ret
}

This concludes our solution. But we need to test it against the example test cases to be sure that it's indeed a correct solution for the given problem.

Testing

In golang, testing is a really simple process. Go standard library has the testing package to help us test and benchmark our implementations with ease. Go automatically detects test files from the filenames; if a filename ends with _test.go then go considers that file to be a test file. Inside a test file, the functions that start with Test and take one argument of the type *testing.T are run by the test runner automatically. Similarly functions that start with Benchmark and take one argument of the type *testing.B are run for benchmarking. In case of our solution, we are focused on the unit testing of our solution. So we can write a function TestSuggestedProducts and add our testcases
inside it. We can use the standard library package reflect to check if the output and expected slices are deeply equal. The following is the complete code for this problem along with the test function.



package dsproblems

import (
  "sort"
  "testing"
  "reflect"
  "fmt"
)

type trie struct {
  words [3]int
  wordsLen int
  children map[string]*trie
}

func newTrie () *trie {
  var t trie
  t.children = make(map[string]*trie)
  return &t
}

func (t *trie) insertWord (word string, index int, pos int) int{
  if t.wordsLen < 3 {
    t.words[t.wordsLen] = index
    t.wordsLen += 1
  }

  if pos == len(word) {
    return 0
  }

  ch := string(word[pos])
  if t.children[ch] == nil {
    t.children[ch] = newTrie()
  }
  t.children[ch].insertWord(word, index, pos+1)
  return 0
}

func suggestedProducts(products []string, searchWord string) [][]string {
  sort.Strings(products)

  root := *newTrie()
  for i, word := range products {
    root.insertWord(word, i, 0)
  }

  var ret [][]string
  mismatched := false
  t := root
  for _, ch := range searchWord {
    ch := string(ch)
    if t.children[ch] == nil || mismatched {
      list := make([]string, 0)
      ret = append(ret, list)
      mismatched = true
      continue
    }

    t = *t.children[ch]
    var list []string
    var i int
    for i=0; i<t.wordsLen; i+=1 {
      list = append(list, products[t.words[i]])
    }
    ret = append(ret, list)
  }
  return ret
}

func TestSuggestedProducts(t *testing.T) {
  products := []string{"mobile","mouse","moneypot","monitor","mousepad"}
  searchWord := "mouse"
  output := [][]string{
    {"mobile","moneypot","monitor"}, 
    {"mobile","moneypot","monitor"}, 
    {"mouse","mousepad"}, 
    {"mouse","mousepad"}, 
    {"mouse","mousepad"},
  }
  fmt.Println(output)
  if !reflect.DeepEqual(suggestedProducts(products, searchWord), output) {
    t.Fatalf("Failed testcase #1")
  }

  products = []string{"havana"}
  searchWord = "havana"
  output = [][]string{
    {"havana"}, 
    {"havana"}, 
    {"havana"}, 
    {"havana"}, 
    {"havana"}, 
    {"havana"},
  }
  fmt.Println(output)
  if !reflect.DeepEqual(suggestedProducts(products, searchWord), output) {
    t.Fatalf("Failed testcase #2")
  }

  products = []string{"bags","baggage","banner","box","cloths"}
  searchWord = "bags"
  output = [][]string{
    {"baggage","bags","banner"}, 
    {"baggage","bags","banner"}, 
    {"baggage","bags"}, 
    {"bags"},
  }
  fmt.Println(output)
  if !reflect.DeepEqual(suggestedProducts(products, searchWord), output) {
    t.Fatalf("Failed testcase #3")
  }
}

So, that's that and we just solved the problem using the trie datastructure in golang. Also, here is an implementation of the same solution in Javascript for reference.



class Trie {
  constructor(words=[], children={}) {
    this.words = words;
    this.children = children;
  }

  insertWord(word, i, j) {
    if (this.words.length < 3)
      this.words.push(i);

    if (j === word.length)
      return;

    const ch = word.charAt(j);
    if (this.children[ch] === undefined) {
      this.children[ch] = new Trie();
    }
    this.children[ch].insertWord(word, i, j+1);
  }
}

function suggest(words, search) {
  const sortedWords = [...words];
  sortedWords.sort((a, b) => a.localeCompare(b));

  const trie = new Trie();
  sortedWords.forEach((word, i) => {
    trie.insertWord(word, i, 0);
  });

  return search.split('').reduce((acc, ch) => {
    if (acc.t.children[ch] === undefined || acc.done) {
      acc.ret.push([]);
      acc.done = true;
      return acc;
    }

    acc.t = acc.t.children[ch];
    acc.ret.push(acc.t.words.map(ind => sortedWords[ind]));
    return acc;
  }, {ret: [], t: trie, done: false}).ret;
}

Hoping you had a nice read and learned something new from this article. Have nice days ahead. :)

Can I get a review of my portfolio

Ganesh Prasad — Sun, 06 Oct 2019 02:05:42 +0000

Folks, recently I redesigned and rewrote my portfolio. Can I get a review of the site ? Here is it.

gnsp.in

A Tutorial on Dynamic Programming in C++

Ganesh Prasad — Fri, 27 Sep 2019 22:49:22 +0000

Now that a number of people have asked me for some good resources on Dynamic Programming (DP) and I could find only a few good resources to give the beginners a real boost, I decided to write this basic DP tutorial here. But before we go deep into it, I want to make it clear that the only way to master DP is a lot of practice. The more you solve, the better you get.

DP is an art. It’s a way of thinking. It’s more like learning to see the same thing from a different perspective. It takes some time to get used to, that’s why practicing without getting disheartened is the key to mastering DP.

Prerequisites for this tutorial are, the knowledge of

iteration over (multidimensional) arrays,
recursion,
basic knowledge of mathematical notations.

An important tip

When you are given a problem to solve using DP, the trick is “Not to over-think, because the solution is always hidden in the problem”. Most beginners make this mistake of thinking too much, only because they thought the problem was difficult and only a complex solution would solve it. But in most cases the solution turns out to be simple.

Before you start coding, formulate the problem (not the solution) mathematically on a piece of paper. Because a problem well formulated is a problem half solved.

For example, let’s consider a simple problem.

THE PROBLEM

I am to count from 1 to N. But I follow a special rule of counting, I can count either 2*x or 3*x or x+1 after I count x. I always start counting from 1. Now what is the minimum number of steps required to count to N.

Here is the example of this counting : If I want to count till 7, I can count like the following:

1 2 3 4 5 6 7
or 1 2 4 5 6 7
or 1 2 3 6 7
or 1 3 6 7
or 1 2 6 7

In this case the minimum number of steps is 4.

ANALYSIS

Now let’s analyze this problem. Here we are asked to choose which number to count after x, such that we will reach N in minimum number of steps. Notice that, we are presented with a choice at a point and we have to make the choice in such a way that our current choice combined with our subsequent choices will give us the optimal result.

You might be tempted to think that the fastest way to reach N would be to count x*3 after x whenever possible. If x*3 > N, then try to count x*2 and if x*2 > N, then count x+1. That’s the greedy way to solve this problem. And this greedy algorithm does not always work. For example if I am to count till 8, the greedy way will be to count like 1 3 6 7 8 (5 steps). But the optimal way would be 1 2 4 8 (4 steps). Another example, count till 13 : greedy way 1 3 9 10 11 12 13 (7 steps), optimal way 1 3 6 12 13 (5 steps).

Now that we have established greedy algorithm won’t work here, let’s analyze why it does not work. It does not work, because we when we assumed that counting x*3 and x*2 and x+1 in the preferential order will solve the problem, we did not consider the effect of making a greedy choice on our subsequent choices.

Before we solve this problem, let's formulate the problem statement mathematically.

Let f(x) = minimum number of steps required to count to x.

f(x) = 1                                        when x = 1
f(x) = min( f(x-1) , f(x/2) , f(x/3) ) + 1      when x > 1

It means, if we have already counted till x-1 or x/2 or x/3, then we can reach x in just one step. We just have to find out whether it's faster to reach x-1 or x/2 or x/3. If x-1 is faster to reach than x/2 and x/3, then counting to x-1 and the counting x will definitely take less steps than counting to x/2 then x, or counting to x/3 then x.

if x%2 != 0, we do not consider f(x/2) in the above expression, if x%3 != 0 then we do not consider f(x/3) in the above expression. Because if x%2 != 0, then x/2 would not be an integer and f(x) is defined only for integers. Same for f(x/3).

SOLUTION

As we can see, the function f is a recursive function. So, we can simply implement it as a recursive function in our language of choice and it should work correctly. But pure recursion will be slow when N is large.

Let’s see, why pure recursion would be slow. Suppose I want to find f(7).

f(7) = f(6) + 1    [as 7/2 and 7/3 are not integers]
f(6) = min ( f(5), f(3), f(2) ) + 1
f(5) = f(4) + 1
f(4) = min ( f(3) , f(2) ) + 1
f(3) = min( f(2), f(1) ) + 1
f(2) = f(1) + 1
f(1) = 1

As we can see, in pure recursion, we will have to calculate f(3) and f(2) more than once. First during f(6) we call f(5) and it calls f(4) which calls f(3) and f(2). When f(4) and f(5) have returned and we are back in the function call for f(6), we call f(3) and f(2) again. Computing same values more than once makes pure recursive solution slower than it needs to be.

But what if we calculate the values of f(x) when needed for the first time and store it in an array and the next time it’s needed we simply look up the array and return the value without really calculating it all over again ? That would be a much faster way to calculate f(N). And this way is known as memoization or top-down DP.

Here is the above idea implemented in C++ like pseudo code:

int memory[N+1];    // global array, all values initialized to 0
memory[1] = 1;      // because f(1) = 1

int f (int x) {
     /* if f(x) is calculated and stored in memory, i.e the value in memory[x]
        is not the default value 0, then just return it without calculation */
      if ( memory[x] != 0 ) return memory[x];

      /* otherwise calculate it recursively */
      int result = INFINITY;
      if (x%2 == 0) result = min (result, f(x/2)); 
      if (x%3 == 0) result = min (result, f(x/3));
      result = min (result, f(x-1) );
      result = result + 1;

      /* now store the result in the array for future use and return */
      memory[x] = result;
      return result;
}

Makes sense ? If not, pause a bit here and read the pseudo code above. Try to imagine how it works during subsequent calls.

Just being able to solve a problem using top-down DP or memoization is enough in most of the cases. But, when the dataset if too large, the number of recursive calls might result in a function call stack overflow. Normally reported as a case of SIGSSEV, more commonly known as segmentation fault. Hence it’s important to learn how to solve the DP problems without recursion.

Before we convert our recursive solution into an iterative one, let's make a few observations about the function f.

value of f(x) can never exceed x, i.e. f(x) <= x
if we know f(x) <= y, we can say f(x+1) <= y+1, f(x*2) <= y+1 and f(x*3) <= y+1
value of f(x) can not be determined with certainty untill values of f(x/3), f(x/2) and f(x-1) have been determined.
initially only f(1) = 1 is determined.

Let's use these observations to write an iterative solution (in C++ like pseudo code)

int f[N+1];    // initalize an array to store values of f(1), f(2) ... f(N)

void iterativeDP () {
    for (int x=1; x<=N; x++) f[x] = x;      // Initially assume that f(x) = x

    // when we have determined f(x) update values of f(x+1), f(x*2) and f(x*3)
    for (int x=1; x<=N; x++) {
        if (x+1 <= N) f[x+1] = min (f[x+1], f[x]+1);
        if (x*2 <= N) f[x*2] = min (f[x*2], f[x]+1);
        if (x*3 <= N) f[x*3] = min (f[x*3], f[x]+1);
    }
}

So, that's that and we just solved the problem using DP in both top-down (recursive) and bottom-up (iterative) methods.

Making 'The Matrix' Effect in Javascript

Ganesh Prasad — Fri, 20 Sep 2019 08:49:17 +0000

I have always been a big fan of the movie series 'The Matrix Trilogy'. In this article we will make the following visual effect from the matrix series in vanilla Javascript.

This GIF here is optimized for size, so it's rather low quality and it janks. But our end result will be smooth. Let's get started.

We will render this visual effect on a HTML5 canvas. For this article, we don't need any other elements on our page than a canvas. Initially we can give it just any valid size (width and height), because we will be setting the actual width and height of the canvas from our JS code. And we will give it an ID to reference it easily from the JS code.



<canvas width="500" height="200" id="canv" />

Now we can get the DOM Node for this canvas and set its width and height to fill the body. We will also get the 2D drawing context for this canvas. The screen will be black for this effect, so we will fill the canvas with black by drawing a black rectangle with width and height same as that of the canvas.



// Get the canvas node and the drawing context
const canvas = document.getElementById('canv');
const ctx = canvas.getContext('2d');

// set the width and height of the canvas
const w = canvas.width = document.body.offsetWidth;
const h = canvas.height = document.body.offsetHeight;

// draw a black rectangle of width and height same as that of the canvas
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, w, h);

We want to make the text fall in columns. Each column will be 20px wide. And in each frame of the animation, we will put a single character at the end of each column. Initially the end (y coordinate) of each column is at 0.



const cols = Math.floor(w / 20) + 1;
const ypos = Array(cols).fill(0);

In each frame, we need to render a semi transparent black rectangle on top of the previous frame, so that the characters rendered in previous frames can look progressively dimmed. Then we need to render the new characters at the end of each column for the current frame.

The y coordinates for each column is stored in the ypos array. In each frame we want to randomly reset some columns to start from the top again, so that it seems like columns of varying heights are falling from the top. For the rest of the columns we will simply move the y coordinate 20px down, so that in next frame a new character appears below the current one.



function matrix () {
  // Draw a semitransparent black rectangle on top of previous drawing
  ctx.fillStyle = '#0001';
  ctx.fillRect(0, 0, w, h);

  // Set color to green and font to 15pt monospace in the drawing context
  ctx.fillStyle = '#0f0';
  ctx.font = '15pt monospace';

  // for each column put a random character at the end
  ypos.forEach((y, ind) => {
    // generate a random character
    const text = String.fromCharCode(Math.random() * 128);

    // x coordinate of the column, y coordinate is already given
    const x = ind * 20;
    // render the character at (x, y)
    ctx.fillText(text, x, y);

    // randomly reset the end of the column if it's at least 100px high
    if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
    // otherwise just move the y coordinate for the column 20px down,
    else ypos[ind] = y + 20;
  });
}

// render the animation at 20 FPS.
setInterval(matrix, 50);

That's all we need to render a matrix effect in vanilla JS. The code for this article is given in the pen below for reference.

Hoping you enjoyed reading this article and learned a few things from it.
You can find more about me at gnsp.in.

Thanks for reading !

Making a 15-Puzzle Game Using React Hooks

Ganesh Prasad — Thu, 12 Sep 2019 22:06:22 +0000

We are making a what !

In this article, we will make a simple 15-Puzzle using React Hooks, but what is a 15-Puzzle in the first place ?

As wikipedia defines it,

The 15-puzzle (also called Gem Puzzle, Boss Puzzle, Game of Fifteen, Mystic Square and many others) is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing.

However, the numbered variant of the puzzle is more or less that mathematical version of it. The ones sold in toy stores are generally the image variant of the game. In this variant, each of the tiles is a small square segment of an image and when the tiles are arranged in the correct order, the complete image takes form. Just like the following image (here the puzzle is in the scrambled state),

We will be building this specific variant of the puzzle in this article. When the tiles of this puzzle are arranged in the correct order, we will get an image of Rubeus Hagrid, the Gamekeeper and Keeper of Keys and Grounds of Hogwarts.

A few observations

Before we start coding this puzzle, let's take note of a few things about this puzzle;

Only the tiles adjacent to (i.e. sharing an edge with) the empty square in the grid can be moved.
They can be moved only to the position of the empty square.
If we consider the empty square to be an empty tile, then moving an adjacent tile to the empty square can be modeled as swapping the position of the tile with the empty tile.
When the tiles are in the correct order, the i-th tile occupies the square on Math.floor(i / 4)th row and i % 4th column in the grid.
At any point of time, at most one tile can be moved in any one direction.

With these observations in mind, let's start building the puzzle.

Scaffolding and constants

First let's type out a simple webpage where our react app will be rendered. For simplicity, let's write than in pug.



html
  head
    title 15 Puzzle (Using React Hooks)
    meta(name='viewport', content='initial-scale=1.0')
    link(rel='stylesheet', href='/style.css')

  body
    #root
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js')
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js')
    script(type='text/javascript', src='/index.js')

With this webpage structure in place, let's define some constants and utility in the index.js.



const NUM_ROWS = 4;
const NUM_COLS = 4;
const NUM_TILES = NUM_ROWS * NUM_COLS;
const EMPTY_INDEX = NUM_TILES - 1;
const SHUFFLE_MOVES_RANGE = [60, 80];
const MOVE_DIRECTIONS = ['up', 'down', 'left', 'right'];

function rand (min, max) {
  return min + Math.floor(Math.random() * (max - min + 1));
}

Here the rand function generates a random integer between min and max (inclusive). And the constant SHUFFLE_MOVES_RANGE defines the minimum and maximum number of random moves we want to execute in order to scramble the puzzle board. EMPTY_INDEX is the index of the empty tile. When all the tiles are in the correct order, the bottom-right square, i.e. the 16th square (array index 15) will be the empty one.

Defining the `GameState`

Now let's write the logic for the puzzle and encapsulate that in a class called GameState. This GameState class should be a singleton, because at any point of time there should be only one game running inside the app. So, let's write that bit of logic first.

To make the class singleton, we will define a static property called instance which will hold the reference to the current instance of the class and a static method getInstance which will return the current instance if that exists, otherwise it will create a new instance and return that to us.



class GameState {
  static instance = null;

  static getInstance () {
    if (!GameState.instance) GameState.instance = new GameState();
    return GameState.instance;
  }
}

Inside the GameState we want to keep track of the current state of the board, the number of moves the user has played and a stack of previous board states, so that the user can undo his/her current move and get to the previous state.

Here the most important piece of information, that we are storing, is the state of the puzzle board. Let's model it first.

The puzzle board is a set of 16 tiles (including the empty tile). At any point of time, each tile is at a certain position in the grid. The position of a tile can be represented by 2 integers denoting the row index and the column index. We can model this as an Array of integer pairs like the following (the following is the representation of the board where the tiles are in the correct order):



[
  [0, 0], // 1st tile is at 1st row, 1st column
  [0, 1], // 2nd tile is at 1st row, 2nd column
  [0, 2],
  [0, 3], // 4th tile is at 1st row, 4th column
  [1, 0], // 5th tile is at 2nd row, 1st column
  [1, 1],
  ...
  [3, 2],
  [3, 3], // 16th tile is at 4th row, 4th column (this is the empty tile)
]

Let's write a static method to generate a board state where the tiles are in correct order, remember that when the tiles are in the correct order, the i-th tile is at Math.floor(i / 4) th row and i % 4th column.

Also, when the puzzle is solved, the tiles are in the correct order. So let's define a static property called solvedBoard which will store the solved state of the board.



class GameState {
  // ...

  static getNewBoard () {
    return Array(NUM_TILES).fill(0).map((x, index) => [
      Math.floor(index / NUM_ROWS), 
      index % NUM_COLS
    ]);
  }

  static solvedBoard = GameState.getNewBoard();
}

When a game starts,

the move counter is set to 0,
the stack of previous states is empty, and
the board is at the ordered state.

Then from this state, we shuffle / scramble the board before presenting it to the user to solve. Let's write that. At this point, we will skip writing the method to shuffle / scramble the board. We will just write a stub in its place for the time being.



class GameState {
  // ...

  constructor () {
    this.startNewGame();
  }

  startNewGame () {
    this.moves = 0;
    this.board = GameState.getNewBoard();
    this.stack = [];
    this.shuffle(); // we are still to define this method, 
                    // let's put a stub in its place for now
  }

  shuffle () {
    // set a flag that we are to shuffle the board
    this.shuffling = true;

    // Do some shuffling here ...

    // unset the flag after we are done
    this.shuffling = false;
  }
}

Now, let's define the methods to move the tiles around. Firstly, we need to determine if a certain tile can be moved or not. Let's assume the i-th tile is at position (r, c) now. Then the i-th tile can be moved, if ad only if the empty-tile, i.e. the 16th tile is currently positioned adjacent to it. To be adjacent, two tiles must be in the same row or same column, and if they are in the same row, then the difference of their column indices must be equal to one, and if they are in the same column, then the difference of their row indices must be equal to one.



class GameState {
  // ...

  canMoveTile (index) {
    // if the tile index is invalid, we can't move it
    if (index < 0 || index >= NUM_TILES) return false;

    // get the current position of the tile and the empty tile
    const tilePos = this.board[index];
    const emptyPos = this.board[EMPTY_INDEX];

    // if they are in the same row, then difference in their 
    // column indices must be 1 
    if (tilePos[0] === emptyPos[0])
      return Math.abs(tilePos[1] - emptyPos[1]) === 1;

    // if they are in the same column, then difference in their
    // row indices must be 1
    else if (tilePos[1] === emptyPos[1])
      return Math.abs(tilePos[0] - emptyPos[0]) === 1;

    // otherwise they are not adjacent
    else return false;
  }
}

Actually moving a tile to the empty square is much easier, we just need to swap the positions of that tile and that of the empty tile. And, we need to do a bit of book keeping, that is -- incrementing the moves counter and pushing the state of the board before the move into the stack. (If we are in the shuffling phase, we don't want to count the moves or push the state into the stack).

If the board is already solved, we want to freeze the board and disallow further movement of tiles. But at this point, we will not implement the method to check if the board is already solved or not. In place of the actual method, we will write a stub.



class GameState {
  // ...

  moveTile (index) {
    // if we are not shuffling, and the board is already solved, 
    // then we don't need to move anything
    // Note that, the isSolved method is not defined yet
    // let's stub that to return false always, for now
    if (!this.shuffling && this.isSolved()) return false;

    // if the tile can not be moved in the first place ...
    if (!this.canMoveTile(index)) return false;

    // Get the positions of the tile and the empty tile
    const emptyPosition = [...this.board[EMPTY_INDEX]];
    const tilePosition = [...this.board[index]];

    // copy the current board and swap the positions
    let boardAfterMove = [...this.board];    
    boardAfterMove[EMPTY_INDEX] = tilePosition;
    boardAfterMove[index] = emptyPosition;

    // update the board, moves counter and the stack
    if (!this.shuffling) this.stack.push(this.board);
    this.board = boardAfterMove;
    if (!this.shuffling) this.moves += 1;

    return true;
  }

  isSolved () {
    return false; // stub
  }
}

From observation, we know that, at any point of time at most one tile can be moved in any one direction. Therefore, if we are given the direction of the movement, we can determine which tile to move. For example, if we are given that the direction of movement is upward, then only the tile immediately below the empty square can be moved. Similarly, if the direction of movement is given to be towards left, then the tile immediately right of the empty square is to be moved. Let's write a method that will deduce which tile to move, from the given direction of movement, and move it.



class GameState {
  // ...

  moveInDirection (dir) {
    // get the position of the empty square
    const epos = this.board[EMPTY_INDEX];

    // deduce the position of the tile, from the direction
    // if the direction is 'up', we want to move the tile 
    // immediately below empty, if direction is 'down', then 
    // the tile immediately above empty and so on  
    const posToMove = dir === 'up' ? [epos[0]+1, epos[1]]
      : dir === 'down' ? [epos[0]-1, epos[1]]
      : dir === 'left' ? [epos[0], epos[1]+1]
      : dir === 'right' ? [epos[0], epos[1]-1]
      : epos;

    // find the index of the tile currently in posToMove
    let tileToMove = EMPTY_INDEX;
    for (let i=0; i<NUM_TILES; i++) {
      if (this.board[i][0] === posToMove[0] && this.board[i][1] === posToMove[1]) {
        tileToMove = i;
        break;
      }
    }

    // move the tile
    this.moveTile(tileToMove);
  }
}

Now that we have the tile moving logic in place, let's write the method to undo the previous move. This is simple, we just need to pop the previous state from the stack and restore it. Also, we need to decrement the moves counter.



class GameState {
  // ...

  undo () {
    if (this.stack.length === 0) return false;
    this.board = this.stack.pop();
    this.moves -= 1;
  }
}

At this point, we have most of the game logic in place, with the exception of shuffle and isSloved methods, which are currently stubs. Let's write those methods now. For simplicity we will execute a number of random moves on the board to shuffle it. And to check if the board is solved, we will simply compare the current state of the board with the static property solvedBoard that we had defined earlier.



class GameState {
  // ...

  shuffle () {
    this.shuffling = true;
    let shuffleMoves = rand(...SHUFFLE_MOVES_RANGE);
    while (shuffleMoves --> 0) {
      this.moveInDirection (MOVE_DIRECTIONS[rand(0,3)]);
    }
    this.shuffling = false;
  }

  isSolved () {
    for (let i=0; i<NUM_TILES; i++) {
      if (this.board[i][0] !== GameState.solvedBoard[i][0] 
          || this.board[i][1] !== GameState.solvedBoard[i][1]) 
        return false;
    }
    return true;
  }
}

Now, let's write a method to give us the current state of the game as a plain object for convenience.



class GameState {
  // ...

  getState () { 
    // inside the object literal, `this` will refer to 
    // the object we are making, not to the current GameState instance.
    // So, we will store the context of `this` in a constant called `self`
    // and use it.
    // Another way to do it is to use GameState.instance instead of self.
    // that will work, because GameState is a singleton class.

    const self = this;    

    return {
      board: self.board,
      moves: self.moves,
      solved: self.isSolved(),
    };
  }
}

With this, the implementation of our GameState class is complete. We will use it in our custom react hook to power the react app for the game.

The `useGameState` custom hook

Now let's wrap the GameState functionalities in a custom React Hook, so that we can use it in our React application. In this hook, we want to register event handlers for keypress so that the users can play the puzzle using directional keys of their keyboards, generate click handler functions so that users can click tiles to move them, we also want to create helper functions to undo a move and start a new game.

We will attach the keyup event handlers to the document object. This needs to be done only once when the app is mounted and the event handlers need to be removed when the app is unmounted.

The primary purpose of this Hook is to wrap the GameState instance as a React state, that the React components can use and update. We will not, of course, expose the raw setState method to the components. Rather, we will expose functions like newGame, undo and move to the components so that they can trigger state updates when the user wants to start a new game or undo a move or move a specific tile. We will expose only that part of the state and update logic, which the components using the hook absolutely need. (Keyboard events will be handled by the listeners attached to the document object. The components need not have access to those event handlers.)



function useGameState () {
  // get the current GameState instance
  const gameState = GameState.getInstance();

  // create a react state from the GameState instance
  const [state, setState] = React.useState(gameState.getState());

  // start a new game and update the react state
  function newGame () {
    gameState.startNewGame();
    setState(gameState.getState());
  }

  // undo the latest move and update the react state
  function undo () {
    gameState.undo();
    setState(gameState.getState());
  }

  // return a function that will move the i-th tile 
  // and update the react state 
  function move (i) {
    return function () {
      gameState.moveTile(i);
      setState(gameState.getState());
    }
  }

  React.useEffect(() => {
    // attach the keyboard event listeners to document
    document.addEventListener('keyup', function listeners (event) {

      if (event.keyCode === 37) gameState.moveInDirection('left');
      else if (event.keyCode === 38) gameState.moveInDirection('up');
      else if (event.keyCode === 39) gameState.moveInDirection('right');
      else if (event.keyCode === 40) gameState.moveInDirection('down');

      setState(gameState.getState());
    });

    // remove the evant listeners when the app unmounts
    return (() => window.removeEventListener(listeners));
  }, [gameState]); 
  // this effect hook will run only when the GameState instance changes.
  // That is, only when the app is mounted and the GameState instance
  // is created

  // expose the state and the update functions for the components 
  return [state.board, state.moves, state.solved, newGame, undo, move];
}

The React components of the Puzzle

Now that we have a conceptual model of the puzzle and functions to update that model on user interaction events, let's write some components to display the game on screen. The game display here is pretty simple, it has a header part that shows the number of moves the user has made and the undo button. Below that is the puzzle board which will have the tiles. The puzzle board will also display a PLAY AGAIN button when the puzzle is solved.

In the puzzle board, we do not need to render the 16th tile, because that represents the empty tile. In the display, that will remain empty. On each of the displayed tiles, we will add an onClick event handler, so that when the user clicks on a tile, it will move if it can be moved.

The puzzle board will be of the dimensions 400px * 400px and the tiles will be positioned absolutely with respect to it. Each tile will be of the dimension 95px * 95px with 5px gutter space between tiles.

The following function implements the App component. This is the basic layout of the application.



function App () {
  const [board, moves, solved, newGame, undo, move] = useGameState();

  return (
    <div className='game-container'>
      <div className='game-header'>
        <div className='moves'>
          {moves}
        </div>
        <button className='big-button' onClick={undo}> UNDO </button>
      </div>
      <div className='board'>
      {
        board.slice(0,-1).map((pos, index) => ( 
          <Tile index={index} pos={pos} onClick={move(index)} />
        ))
      }
      { solved &&
          <div className='overlay'>
            <button className='big-button' onClick={newGame}>
              PLAY AGAIN 
            </button>
          </div>
      }
      </div>
    </div>
  );
}

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

Now, let's implement the Tile component, which will display and position each individual tile on the board. As mentioned earlier, the tiles will be positioned absolutely with respect to the board. Given the row index and column index of a tile, we can find its position on the board. We know that each square on the grid is of the dimension 100px * 100px with 5px gutter space between tiles. So, we can simply multiply the row index and column index of the tile with 100 and add 5, to get the top and left positions of the tile.

Similarly, we can derive the backgroundPosition of the background image for each tile, by finding which part of the background image they display when placed in the correct order. For that first we need to calculate the position of the tile, when in placed correct order. We know that the i-th tile is positioned on Math.floor(i / 4)th row and i % 4th column in the correct order. From that we can calculate the position in form of pixels from top and pixels from left by multiplying the row and column indices by 100 and then adding 5. The background positions will be the negative of these values.



function Tile ({index, pos, onClick}) {
  const top = pos[0]*100 + 5;
  const left = pos[1]*100 + 5;
  const bgLeft = (index%4)*100 + 5;
  const bgTop = Math.floor(index/4)*100 + 5;

  return <div 
    className='tile'
    onClick={onClick}
    style={{top, left, backgroundPosition: `-${bgLeft}px -${bgTop}px`}} 
  />;
}

Styling the Puzzle

Before styling the puzzle, we need to find a good 400px * 400px image to use as the background image of our tiles. Alternatively, we can also use numbers for the puzzle (like the wikipedia article for 15-Puzzle mentioned). In any case, let's look at some of the important bits of styling this app.

Positioning the board and the tiles

The actual width and height of the board will be 400px + 5px, because 4 columns or rows need 5 gutters around them. However that does not affect the dimensions of the tiles, because we can safely think the 5th gutter to be outside the board. The board needs to have position declared as relative so that the tiles can be positioned absolutely with respect to it.

In case of the tiles, the dimension will be 95px * 95px to allow for the 5px gutters. Their background-size, however, should be 400px * 400px, because each tile shows only a specific square from the full sized 400px * 400px image. The background position will be set as inline style by the react component.

To make the tile movements appear smooth and natural, we can use css transitions. Here we have used a 0.1s ease-in-out transition on tiles.



.board {
  width: 405px;
  height: 405px;
  position: relative;
  background: #ddd;
}

.tile {
  width: 95px;
  height: 95px;
  position: absolute;
  background: white;
  transition: all 0.1s ease-in-out;
  border-radius: 2px;
  background-image: url('@{bg-img}');
  background-size: 400px 400px;
}

Positioning the overlay

The overlay is another direct child of the board. It needs to cover the board when the game ends. So, we will give it the same dimensions as the board and place it absolutely at (0, 0). It needs to be over the tiles, so we will give it a high z-index. We will also give it a semi transparent dark background color. It will contain the PLAY AGAIN button at the center, so we will make it a flex container with both align-items and justify-content set to center.



.overlay {
  width: 405px;
  height: 405px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: #0004;
  display: flex;
  align-items: center;
  justify-content: center;
}

Here is the pen containing everything described in this article.

(Pardon me for embedding the image in base64 encoded form at the beginning of the less file. Adding asset files on codepen is a PRO only feature, and I, quite regrettably, is a free tier user.)

Hoping you enjoyed reading about this little project and learned a few things from it.
You can find more about me at gnsp.in.

Thanks for reading !

Making a Neon Clock using React Hooks

Ganesh Prasad — Sat, 07 Sep 2019 20:01:05 +0000

A little bit of backstory

TL;DR; some rather dark humour on what motivated me to make the clock

About 2 years ago, back in September of 2017, when I was a Software Engineer in Zomato in Delhi NCR, I contracted a severe case of Viral Hepatitis-E. Then I had to take leave from the job and go back to my parental home in the small, little known, coastal town in Odisha (my hometown) to take rest and recover. Recovering from an illness like Hepatitis-E is a rather lengthy and painful process, it took me 20 days. Back then, the network coverage in my locality was not very good and the internet speed was frustratingly low (a little better than 2G) and there were only a handful of channels available on the TV (most of them being local news channels). So, for 20 long days, I stayed home virtually cut off from the world outside, not having a lot of things to worry about than taking rest and recovering. Of course, I had some good books (novel mostly) in my room, but there are only so many times a man can read and re-read a certain book. All in all, life was as far removed as possible from the hustle of a fast growing start-up in a metro city.

I spent the 20 days, reading, looking at the clock, reading again, looking at the clock again, checking if it was time to take medicines, read again, look at the clock again and so on... There is a saying that time goes slow when you want it to pass faster, it was one of those times.

Eventually, a couple of days in to my recovery / isolation, I figured if I had to spend half of my life looking at clocks and telling myself it was so-and-so o' clock of the day, why not code a little clock for a change ? I could write that in good old HTML, CSS and Vanilla JS without having to access the internet and pull half of everything out there with npm. And I did.

2 years later, that is in September of 2019, I have revisited that little clock of mine and rewritten it using React Hooks. So let's jump into it and look at the making of the neon clock.

The Clock Making

Here is how it looks like (the clock that we will be building in this article)

The Requirements

It should sync with the system clock and tick every second.
It should convert the current time to an object specifying how to read it out in standard english.
It should highlight the relevant phrases from a list of words that would combine to read out the current time.
It should speak the what time it is, every 15 minutes.
The clock should be animated.

Scaffolding the page in Pug

Because we will be using React to render our clock, we do not really need to write a lot of HTML just now; rather we will just link our JS libraries and stylesheets and create a container div with id root where React will render our application. Let's write that up quickly in Pug.

We will be using the Julius Sans One font from Google fonts, because that's cool.

html
  head
    title Neon Clock (Using React Hooks)
    meta(name='viewport', content='initial-scale=2.0')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Julius+Sans+One')
    link(rel='styleheet', href='/style.css')

  body
    #root
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js')
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js')

Writing the application in Javascript

Getting the time and reading it out

Let's start with the phrases, that we will need to read out the time. Here are a few examples where the time is given in 24 hours format along with the way these are read:

00:00 - It's midnight
00:05 - It's five past midnight
00:10 - It's ten past midnight
01:00 - It's one O'clock in the morning
01:15 - It's quarter past one in the morning
13:30 - It's half past one in the afternoon
11:45 - It's quarter to noon
17:55 - It's five to six in the afternoon
20:25 - It's twenty five past eight in the evening
20:26 - It's about twenty five past eight in the evening
20:24 - It's nearly twenty five past eight in the evening
... and so on

If we look at all the possible strings that follow this format, it becomes apparent that they can be constructed from the following list of phrases in order:

const phrases = [
  'IT IS',
  'ABOUT',
  'NEARLY',
  'TEN',
  'QUARTER',
  'TWENTY',
  'FIVE',
  'HALF',
  'PAST',
  'TO',
  'ONE',
  'TWO',
  'THREE',
  'FOUR',
  'FIVE',
  'SIX',
  'SEVEN',
  'EIGHT',
  'NINE',
  'TEN',
  'ELEVEN',
  'NOON',
  'MIDNIGHT',
  'O\' CLOCK',
  'IN THE',
  'MORNING',
  'AFTERNOON',
  'EVENING',
];

Notice that, five and ten appear twice in the list. This is because these phrases can appear twice in a time read out (once in the minute part and once in the hour part, consider 17:25 or 04:55 or 10:10 etc)

Now let's write up a function that will get the current time and extract hour, minute and second values, as well as the locale string describing the current date and current time.

function getNow () {
  const now = new Date(Date.now());
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();
  const display = now.toLocaleString();

  return {
    hour,
    minute,
    second,
    display,
  };
}

Now that we have a function to get the current time as a simple object, let's write a function to analyze that current time object and figure out how to read it out.

We can do that in 2 steps:

Create a configuration object that describes certain aspects of the reading out process for any given time.
Generate the actual time read out string.

For step-1 let's consider a few questions we need to answer before we can decide how to read out a give time value.

Do we need the seconds value ? (This is a definite NO)
Is the minute value an exact multiple of 5 ? In other words, is the minute hand pointing directly to a number on the dial of the clock ?
Is the minute value slightly less than a multiple of 5 ? In other words, is the minute hand slightly before a number on the dial of the clock ?
Is the minute value slightly more than a multiple of 5 ? In other words, is the minute hand slightly after a number on the dial of the clock ?
What is the nearest multiple of five value from the minute hand ?
Is it an exact hour ? Is it something O'clock or noon or midnight ?
Is it a some minutes past a certain hour ?
Is it less than 30 minutes before a certain hour ?
What is the nearest value to the hour hand on the dial of the clock ?
Is it morning or afternoon or evening ?

We can now write a function that takes a simple time object containing hour and minute values and answers these questions for us.

function getReadoutConfig ({ hour, minute }) {
  const lastMinuteMark = Math.floor(minute / 5) * 5;
  const distFromLast = minute - lastMinuteMark;
  const isExact = distFromLast === 0;
  const isNearly = !isExact && distFromLast > 2;
  const isAbout = !isExact && !isNearly;
  const nearestMinuteMark = isNearly
    ? (lastMinuteMark + 5) % 60
    : lastMinuteMark;
  const isOClock = nearestMinuteMark === 0;
  const isPast = !isOClock && nearestMinuteMark <= 30;
  const isTo = !isOClock && !isPast;
  const minuteMark = (isPast || isOClock)
    ? nearestMinuteMark
    : 60 - nearestMinuteMark;

  const nearestHour = (isTo || (isOClock && isNearly)) ? (hour + 1) % 24 : hour;
  const nearestHour12 = nearestHour > 12
    ? nearestHour - 12
    : nearestHour;
  const isNoon = nearestHour === 12;
  const isMidnight = nearestHour === 0;
  const isMorning = !isMidnight && nearestHour < 12;
  const isAfternoon = nearestHour > 12 && nearestHour <= 18;
  const isEvening = nearestHour > 18;

  return {
    isExact,
    isAbout,
    isNearly,

    minute: minuteMark,
    isOClock: isOClock && !isNoon && !isMidnight,
    isPast,
    isTo,

    hour: nearestHour12,
    isNoon,
    isMidnight,
    isMorning,
    isAfternoon,
    isEvening,
  };
}

In step-2, we take the configuration object returned from the function above and check which phrases needs to be highlighted to read out the given time. We will simply return an array of boolean values (true or false) indicating whether a phrase in the phrases array is to be highlighted or not.

function getHighlights (config) {
  return [
    true, // IT IS
    config.isAbout, // ABOUT
    config.isNearly, // NEARLY
    config.minute === 10, // TEN
    config.minute === 15, // QUARTER
    config.minute === 20 || config.minute === 25, // TWENTY
    config.minute === 5 || config.minute === 25, // FIVE
    config.minute === 30, // HALF
    config.isPast, // PAST
    config.isTo, // TO
    config.hour === 1, // ONE
    config.hour === 2, // TWO
    config.hour === 3, // THREE
    config.hour === 4, // FOUR
    config.hour === 5, // FIVE
    config.hour === 6, // SIX
    config.hour === 7, // SEVEN
    config.hour === 8, // EIGHT
    config.hour === 9, // NINE
    config.hour === 10, // TEN
    config.hour === 11, // ELEVEN
    config.isNoon, // NOON
    config.isMidnight, // MIDNIGHT
    config.isOClock, // O' CLOCK
    config.isMorning || config.isAfternoon || config.isEvening, // IN THE
    config.isMorning, // MORNING
    config.isAfternoon, // AFTERNOON
    config.isEvening, // EVENING
  ];
}

Now we can get the actual time readout string by concatenating highlighted phrases from the phrases array:

const readoutConfig = getReadoutConfig(time);
const highlighted = getHighlights(readoutConfig);
const readoutString = phrases.filter((phrase, index) => highlighted[index]).join(' ');

The `useClock` hook

Now that we have functions to get the current time and to read it out, we need some way to make sure that these functions get used in sync with the system clock every second. We can do that by

check the time now
decide when the next second starts
register a 1000ms (1s) interval when the next second starts.
everytime the interval ticks, update the current time in our app.

Let's write a React Hook for that and call it useClock. Firstly, we need a state value called time that will keep track of the current time. And we need another state value called timer that will keep track of whether we have set an interval or not.

Our hook will check if the timer or interval has been set and if not, it will set the interval. This bit of logic can be written using useEffect, that runs once when the application renders for the first time. This effect does not need to run on every subsequent render unless we clear the interval and set the timer to null.

Each time the interval ticks, we will set the state time to the current time.

Because the users of the useClock hook are not supposed to set the time value by themselves, and can only read it, we will return only time from the useClock hook.

function useClock () {
  const [timer, setTimer] = React.useState(null);
  const [time, setTime] = React.useState(getNow());

  // this effect will run when our app renders for the first time
  React.useEffect(() => {
    // When this effect runs, initialize the timer / interval
    if (!timer) initTimer();

    // This returned function will clear the interval when our app unmounts
    return (() => (timer && window.clearInterval(timer) && setTimer(null));

  }, [timer]); // This hook will run only when the value of timer is set or unset

  function initTimer () {
    const now = Date.now();
    const nextSec = (Math.floor(now / 1000) + 1) * 1000;
    const timeLeft = nextSec - now;

    // Register an interval beginning next second
    window.setTimeout(() => {
      // on each second update the state time
      const interval = window.setInterval(() => setTime(getNow()), 1000);

      // now our timer / interval is set
      setTimer(interval);
    }, timeLeft);
  }

  return time;
}

Rendering the Clock and Readout components

Now that we have almost everything in place, let's write some components to render our app. First we need an app component that will render inside the root div we created in our Pug file. It will contain a standard analog clock component and a time readout component.

function NeonClock () {
  const time = useClock();
  return (
    <div className='clock'>
      <StandardClock time={time} />
      <TimeReadout time={time} />
    </div>
  );
}

const root = document.getElementById('root');
ReactDOM.render(<NeonClock />, root);

Let's build the StandardClock component first. It will look like an analog clock and will be animated. To look like an analog clock, it will have a dial, which will have 12 Roman numerals and 60 small line segments. Each 5th line segment out of these 60 small line segments needs to be slightly longer. Let's call these small line segments ticks for simplicity. The clock will have 3 hands of course, which will rotate at their own speeds.

As it can be seen the only moving parts of this clock are the 3 hands. We can set their rotational motion by setting the CSS transform: rotate(xx.x deg).

function StandardClock ({ time }) {
  const clockMarks = [ 'XII', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI' ];

  // Calculate the angles of rotation of each hand (in degrees)
  const hourAngle = ((time.hour % 12) * 60 + time.minute) / 2;
  const minuteAngle = (time.minute * 60 + time.second) / 10;
  const secondAngle = time.second * 6;

  return (
    <div className='standard-clock'>
      <div>
        { clockMarks.map(mark => <span className='mark'>{mark}</span>) }
      </div>
      <div>
        { Array(60).fill(1).map(tick => <span className='tick' />) }
      </div>
      <div className='inner-circle' />
      <div className='inner-circle-2' />
      <div className='hour-hand' style={{ transform: `rotate(${hourAngle}deg)` }} />
      <div className='minute-hand' style={{ transform: `rotate(${minuteAngle}deg)` }} />
      <div className='second-hand' style={{ transform: `rotate(${secondAngle}deg)` }} />
      <div className='center' />
    </div>
  );
}

Next, let's build the time readout component. This will of course have the phrases, some of which will be highlighted. This will also have a speaker component which will use the window.speechSynthesis API to speak out the time every 15 minutes.

To display the readout text in a cool way, we will display all the phrases in a muted manner and add a glow class to the phrases that should be highlighted.

function TimeReadout ({ time }) {
  // get the highlighted phrases and the readout string
  const readoutConfig = getReadoutConfig(time);
  const highlighted = getHighlights(readoutConfig);
  const timeText = phrases.filter((phrase, index) => highlighted[index]).join(' ') + '.';

  // speak out the time only on the first second of each 15 minutes
  const shouldSpeak = time.second === 0 && time.minute % 15 === 0;

  return (
    <div className='readout'>
      <p className='phrases'>
        { phrases.map((phrase, index) => (
          <span className={highlighted[index] ? 'glow' : ''}>
            {phrase}
          </span>
        ))}
      </p>
      <p className='timer'>{time.display}</p>
      <Speaker active={shouldSpeak} text={timeText} />
    </div>
  );
}

With that done, let's build our Speaker component. First we need a function that will speak out any given text in a proper British accent (Because the Brits speak English as it should be spoken, which is with humour. And apparently they invented the English language in the first place, bless them !)

To speak the text, first we need to create an utterance object for the text and set the rate (how fast should it speak), pitch (of the voice), volume and the voice template (we will use the first voice that speaks en-GB). Then we can pass this utterance object to the speechSynthesis.speak function to actually get it spoken out.

function speak (text) {
  const synth = window.speechSynthesis;
  const rate = 0.7;
  const pitch = 0.6;
  const voice = synth.getVoices().filter(v => v.lang === 'en-GB')[0];
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = voice;
  utterance.pitch = pitch;
  utterance.rate = rate;
  synth.speak(utterance);
}

Now we can create a Speaker component, that will render nothing, but use an useEffect hook to call the speak function when the prop active is set to true.

function Speaker ({ active, text }) {
  React.useEffect (() => {
    if (active) speak(text);
  });
  return null;
}

Styling our components

With all the components and logic in place, let's style our components using LESS. In this section I will briefly mention some major / important points in the styling, please refer to the pen for this article for the specifics.

The muted and glowing phrases

The muted text effect is created by using a muted and darker shade of red and a 2px blur on the text. The glow effect is created by using a brighter (almost white) shade of red and a red coloured text-shadow with a 20px spread. Moreover the font-weight of the glowing text is set to bold to give it a bolder and brighter look.

span {
  color: @muted-red;
  margin: 0 10px;
  transition: all 0.5s cubic-bezier(0.6, -0.51, 0.5, 1.51);
  vertical-align: middle;
  filter: blur(2px);

  &.glow {
    color: @glowing-red;
    text-shadow: 0 0 20px @shadow-red;
    font-weight: bold;
    filter: none;
  }
}

The Roman Numerals on the dial

The dial of the clock (the circle) is of the dimension 300px * 300px. Each of the Roman numerals is placed with absolute positioning, 10px inside the outer circle and horizontally centered with respect to the outer circle. The transform-origin of the spans containing the numerals is set to coincide with the center of the circle.

.mark {
  position: absolute;
  display: inline-block;
  top: 10px;
  left: 115px;
  width: 50px;
  height: 30px;
  font-size: 30px;
  text-align: center;
  color: @glowing-red;
  filter: none;
  transform-origin: 25px 140px;
}

Then each of these spans containing the numerals is rotated with increments of 30 degrees. We have used a LESS recursive mixin to generate the rotations and apply them to the spans with nth-child selectors.

.generate-mark-rotation (@n) when (@n = 13) {}
.generate-mark-rotation (@n) when (@n < 13) {
  span.mark:nth-child(@{n}) {
    transform: rotate((@n - 1) * 30deg);
  }
  .generate-mark-rotation(@n + 1);
}
.generate-mark-rotation(2);

Same method is used to put the 60 line-segments on the dial in place.

Placing and rotating the hands

The hands are first placed at the 00:00:00 position, using absolute positioning with the bottom of each hand coinciding with the center of the circle. Then the transform-origin of the hands is set to coincide with the center of the circle.

When the transform:rotate(xx.x deg) is set by the React component on the hand divs they rotate with respect to the center of the clock.

Making it responsive

For simplicity, we have set the upper bound for small screen devices to be 960px. For smaller screens we use smaller font sizes and smaller dimensions for the clock components. That makes it reasonably responsive across all devices.

Here is the pen containing everything described in this article

Hoping you enjoyed reading about this little project and learned a few things from it.
You can find more about me at gnsp.in.

Thanks for reading !

Opensourcing classd: A fast and modern classNames alternative

Ganesh Prasad — Tue, 03 Sep 2019 15:25:43 +0000

If you are a frontend developer, there is a fair chance that you have used
Jedwatson's classNames package in your projects. In fact, classNames is the official replacement for classSet, which was originally shipped in the React.js Addons bundle. It's one of the most used packages in the world of React.

A simple usecase for `classNames`

For instance, if we needed to conditionally apply css classes to an element inside a React component based on the component state, we may do it like the following:

class EnhancedButton extends React.Component {
    // ...

    render () {
        const btnClass = classNames({
            'btn': true,
            'btn-large': true,
            'btn-primary': true,
            'btn-pressed': this.state.isPressed,
            'btn-over': !this.state.isPressed && this.state.isHovered
        });

        return <button className={btnClass}>{this.props.label}</button>;
    }
}

The approach above is neat, but given that many of the classes are applied unconditionally, the pattern of setting them to true in the configuration object becomes rather redundant. To counter that redundancy, we may write something like the following:

const btnClass = classNames(
    'btn', 
    'btn-large',
    'btn-primary',
    {
        'btn-pressed': this.state.isPressed,
        'btn-over': !this.state.isPressed && this.state.isHovered  
    }
);

Age of ES6 template literals

However, as ES6 or ES2015 template literals became supported across mainstream browsers, it became simpler to write the above snippet as:

const btnClass = `
    btn 
    btn-large 
    btn-primary 
    ${this.state.isPressed ? 'btn-pressed' : ''}
    ${(!this.state.isPressed && this.state.isHovered) ? 'btn-over' : ''}
`;

Though the template literal way of writing class names is somewhat simpler and faster, it's still fairly redundant and it's not free of certain pitfalls. For example, while writing ${(!this.state.isPressed && this.state.isHovered) ? 'btn-over' : ''}, making sure that an empty string '' gets added if the condition fails, is quite redundant and long. And the template literal does not remove extra/unnecessary whitespace and newlines from the output on its own.

For example, why not write something like ${!this.state.isPressed && this.state.isHovered && 'btn-over'} ? But there is a pitfall; if the condition resolves to true, the btn-over gets added, but if the condition resolves to false, the string 'false' gets added to the output. What if we write expressions that resolve to undefined or null or NaN or anything similar ? Javascript would simply treat them as strings and move on. It goes without saying that there are plenty of such 'shoot in the foot' scenarios with this approach.

Moreover, what if we already have a valid configuration object and we want to reduce it to a classnames string ? There is no obvious way to do that directly using only the template literals, we may possibly do it like Object.keys(config).reduce(...), or we may use the classNames package to do it for us. Of course, using the classNames package is more performant, because the package is well optimized for this usecase.

But what if there was a way to write the above example like the following without having any behavioral pitfalls and without losing any performance,

const btnClass = secretSauce`
    btn
    btn-large
    btn-primary
    ${this.state.isPressed && 'btn-pressed'}
    ${!this.state.isPressed && this.state.isHovered && 'btn-over'}
`;

Enter `classd`

classd is the secretSauce you needed in the example above. It's tagged template based fast and modern classNames alternative that preserves all the awesome bits of classNames and augments it with more.

The classd tag processes the interpolation values in the template literal according to the following specification.

Strings and numbers are valid values and are added to the output.
It drops undefined, null, NaN and boolean values.
If the value is an Array or an Iterable, it flattens the value and recursively processes the elements.
If the value is an Object or a Map, it drops keys associated with falsy values and adds the remaining keys to the output.
If the value is a function, it calls the function and adds its return value if that's valid
It removes all unnecessary whitespace.

Here are a few examples:

classd`foo bar`; // => 'foo bar'
classd`foo ${null && 'bar'}`; // => 'foo'
classd`foo-${true && 'bar'}`; // => 'foo-bar'
classd`${true} ${false}`; // => ''
classd`${{ foo: true, bar: false}}`; // => 'foo'
classd`${{foo: true}} ${{bar: true}} ${{baz: false}}`; // => 'foo bar'
classd`a ${[ 'b', 'c', false && 'd' ]}`; // => 'a b c'
classd`${['a', { b: 1, c: 0 }]}`; // 'a b'
classd`    a    b  \n  ${Array(10).fill(' ')} c`; // => 'a b c'

Installation and usage

The classd package exports 4 functions:

classd (Tag for template literals, default)
classDedupe (Tag for template literals)
classdFn (Variadic function, for compatibility, similar to classNames)
classDedupeFn (Variadic function, for compatibility, similar to classNames/dedupe)

The package is available on NPM can be installed using package managers like npm and yarn. It can also be pulled from CDN directly into your webpages.

Install using package manager

# via npm 
npm install --save classd

# or Yarn 
yarn add classd

Use in ES6 Modules


// ES6 import (default - classd tag for template literals)
import classd from 'classd';

// example use
const width = 1080;
const classes = classd`container padding-${{
    lg: width > 1280, 
    md: width > 960 && width < 1280,
    sm: width <= 960
}} margin-0 ${width > 960 && 'blue'} ${width < 960 && 'red'}`;
console.log(classes); // => 'container padding-md margin-0 blue'


// ES6 import any of the exported functions
import { classd, classDedupe, classdFn, classDedupeFn } from 'classd';

// example use (of classdFn)
const width = 1080;
const classes = classdFn ('container', {
    'padding-lg': width > 1280, 
    'padding-md': width > 960 && width < 1280,
    'padding-sm': width <= 960
}, (width > 960 && 'blue'), 'margin-0');
console.log(classes); // => 'container padding-md blue margin-0'

Use in Commonjs modules (Nodejs)

// commonjs require classd tag for template literals (default export)
const classd = require('classd').default

// commonjs require any of the exported functions
const { classd, classDedupe, classdFn, classDedupeFn } = require('classd');

// commonjs require classd module
const classd = require('classd'); // exports can be used as classd.classd, classd.classDedupe etc

Pull from CDN


<script src='https://cdn.jsdelivr.net/npm/classd@1.0/lib/index.js'></script>
<script type='text/javascript'>
    const { classd, classDedupe, classdFn, classDedupeFn } = window.classd;
    console.log(classd`container ${1 > 0 && 'blue'}`); // => 'container blue'
</script>

Well, what are `classDedupe`, `classdFn` and `classDedupeFn` ?

The classdFn follows the same specifications as the classd tag. It's a straightforward replacement for classNames. Everything that's valid with classNames is also valid with classdFn. In addition, classdFn supports passing Maps, Sets, and other Iterables as arguments. Moreover it's slightly faster than classNames in general usage.

If you want to migrate an existing project from using classNames to classd, using the classdFn is the fastest and simplest thing to do. The migration from classNames is as simple as:

// before
import classNames from 'classnames';

//after
import { classdFn as classNames } from 'classd';

The classDedupe tag is an enhanced and about 60% slower version of the classd tag. It does everything that the classd tag does. In addition to that it checks for repeating names among the class names and ensures that each valid class name appears only once in the output string.

The classDedupeFn is the function equivalent of the classDedupe tag. It follows the same signature as classdFn and classNames.

It differs from the classNames/dedupe in the behaviour that, the classNames/dedupe unsets a class if a configuration object appearing later in its arguments unsets it; whereas classDedupe does not unset a class name once it's set.

What about performance and stability ?

As conditionally applying class names is a common task in web frontend, and the functions are supposed to be called many times during a render cycle, it's imperative that the implementation of classd be highly performant and stable. Therefore we take the stability and performance of this package very seriously. Updates are thoroughly reviewed for performance impacts before being released. We maintain a comprehensive test suite to ensure stability.

Here is a JSPerf benchmark of the classd package, compared against classNames. As we can see, the classd tag is as performant as classNames, while the classdFn is slightly faster.

Source code and contributing

The source code is available on Github for you. Any contributions in the form of Pull Request, Issue or Suggestion are welcome. If you like it, please give it a star on Github.

GnsP / classd

A fast and minimal ES6 utility to conditionally compose classnames

classd

A minimal ES6 utility to compose classnames

classd is a fast, minimal JavaScript(ES6) utility for composing class names It builds on ideas and philosophy similar to that of JedWatson's classnames classd defaults to the idea of using ES6 template literals for composing class names. It also provides functions similar to classNames and classNames/dedupe for compatibility (with a minor behavioural difference in case of classNames/dedupe detailed in a subsequent section).

It exports 4 functions:

classd (Tag for template literals, default)
classDedupe (Tag for template literals)
classdFn (Variadic function, for compatibility, similar to classNames)
classDedupeFn (Variadic function, for compatibility, similar to classNames/dedupe)

Installation

Install with npm, or Yarn:

# via npm
npm install --save classd

# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classd

Use with ES6 modules (import)

// IMPORTING IN ES6
///////////////////
//

…

View on GitHub

Thanks for reading and do give it a try !

Making the flag of India using Pug and Less

Ganesh Prasad — Sat, 31 Aug 2019 11:21:08 +0000

In this article we shall make the national flag of India (the tricolour). As an aside and fun fact, a number of other countries have national flags featuring 3 colours and the Indian flag actually has 4 colours.

So let's start with defining the colours as defined in the Flag Code of India which contains the specifications for the Indian national flag.


// navy blue
@blue: #000080;

// india saffron 
@saffron: #ff9933;

// india green
@green: #138808;

// pure white
@white: #ffffff;

The flag will, of course, have 3 rectangular sections for the saffron, white and green parts and the white section will have the wheel of Ashoka in the center. The wheel will have a small inner circle at the center and 24 spokes. So, let's write down that structure in Pug.

html
  body
    .flag
      .saffron
      .white
        .wheel
          .wheel-center
          - var n = 24
          while n --> 0
            .spoke
      .green

The structure is simple enough. We have a div with class flag as the container for the flag sections. This div contains the saffron, white and green sections (which are also divs with relevant classes. The white section contains a div with class wheel and the wheel contains a div with class wheel-center (this will be the smaller circle at the center of the wheel) and 24 divs with class spoke (these will be the 24 spokes). We have generated the 24 spokes using a while loop. Pug supports 2 mechanisms for iteration; each and while. each is useful when iterating over lists (Javascript arrays) and while is useful when iterating until a certain condition is met. Here we want to iterate 24 times, therefore we use the while loop with a condition. First we define a variable n and set it to 24. Then in each iteration we decrease the value of n by 1 using the decrement operator -- and check if the value has reached 0.

Now that we have the structure of the flag in Pug, let's style it using Less. First, let's set everything to have box-sizing: border-box and set up the body to have a dark background and center its only child, which is the flag div. It's easier to center anything using flexbox. We will set up a mixin to be a flex container that centers its children both horizontally and vertically and apply that mixin on body.

* {
  box-sizing: border-box;
}

// mixin to center children using flex
// The parentheses at the end are optional, because the mixin does not
// take any arguments. But it's a good practice to use the parentheses
// always, so that we can tell at a glance that this is a mixin and not 
// a class.
.center-elements () {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background: #1d1e22;
  width: 100%;
  height: 100vh;

  // apply the center-elements mixin.
  .center-elements();
}

Next let's style the flag div and the 3 coloured sections of the flag. According to the Flag code of India the flag must have a ratio of two-by-three, i.e. the value of width / height must be 1.5 . Here for simplicity we shall use fixed values 675px and 450px for width and height of the flag. This is not responsive, of course. But let's keep things simple.

Also, each of the 3 sections of the flag will have height of 150px and 100% width. The white section will have a additional padding of 15px and it will center its children (its only child will be the wheel).

.flag {
  width: 675px;
  height: 450px;
}

.saffron, .white, .green {
  width: 100%;
  height: 150px;
}

.saffron {
  background: @saffron;
}

.green {
  background: @green;
}

.white {
  background: @white;
  padding: 15px;
  .center-elements();
}

Now that we have the sections, let's style the wheel of Ashoka. As the height of the white section is 150px and we have a padding of 15px on it (on all sides), the available height for the wheel is 120px. The wheel is a perfect circle, therefore its width will also be 120px and it will have a border-radius of 60px or 50%. We will also set its position to be relative, so that when we set position: absolute on the spokes, they will position themselves with respect to the wheel div instead of the body. The wheel will have a blue coloured border of 4px width for the rim. It will also center its children using the mixin we defined above.

At the center of the wheel, there will be the wheel-center div. This is a small blue circle of 20px width and height.

.wheel {
  position: relative;
  width: 120px;
  height: 120px;

  border-radius: 50%;
  border: 4px @blue solid;

  overflow: hidden;
  .center-elements();
}

.wheel-center {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: @blue;
}

Now the only things left to style are the spokes. The problem is, there are 24 of them and if we try to style them all individually, it will be complete mess. That's where the less mixins come to our aid, we can define
a mixin that can apply itself recursively for a specified number of times. Using such a mixin, we can generate the repeating parts of the css rulesets for the 24 spokes.

Each spoke has the same properties, except for the rotation. Because the whleel is 360 degrees and there are 24 spokes, difference between any two adjacent spokes must be 15 degrees. That is, each spoke must have a rotation value 15 degrees higher than its previous spoke.

All of the spokes must be positioned absolutely with respect to the center of the wheel and their rotation must be applied from the center of the wheel (or from the end of the spoke that is towards the center of the wheel), rather than from the center of the spoke itself. Because the top-left corner of the spoke will be at the center of the wheel, the transform origin of the spoke will be at its top-left corner.

The wheel has a dimension of 120px with 4px border. Therefore the available space inside the wheel has dimension of 112px and its center must lie at (56px, 56px). We will position the spokes at top: 56px; left: 56px to have the top-left corner of the spokes at the center of the wheel. Now we can play around with the width, height and skew them a bit to get the desired shape for the spokes. After a few tries, I found that width: 31px; height: 4px; transform: skew(84deg); gives the desired shape of the spoke.

As an additional decorative, we can add the small semi-circular indentations on the rim of the wheel between the spokes. This can be made using an ::after psuedo element for each of the spoke. We can position them absolutely and style them as small circles to get the desired effect.

.spoke {
  position: absolute;
  left: 56px;
  top: 56px;

  width: 31px;
  height: 4px;
  background: @blue;

  transform-origin: 0 0;

  &:after {
    content: ' ';
    position: absolute;
    top: 2px;
    left: -25px;

    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: @blue;

    transform: skew(-84deg)translate(1px,3px);
  }
}

// recursive mixin to generate the nth-of-type rulesets for spokes
// terminate when the value of @n reaches 26
.gen-spokes (@n) when (@n = 26) {}

// when value of @n is less than 26, generate the ruleset for the nth
// spoke and then apply self with the next value (@n + 1)
.gen-spokes (@n) when (@n < 26) {
  @selector: ~".spoke:nth-of-type(@{n})";
  @{selector} {
    transform: rotateZ(@n * 15deg)skew(84deg);
  }
  @next: (@n+1);
  .gen-spokes(@next);
}

.gen-spokes(1);

Here is the pen containing the code we discussed in this post.

So, that's that and we have the national flag of India made using Pug and Less.

Like this post ?
You can find more works by me at gnsp.in

Thanks for reading !

DEV Community: Ganesh Prasad

How to back up files (from an android phone) on GCS

Prerequisites

The Backup Workflow

Step 1: Device Connection and Verification

Step 2: File Discovery

Step 3: Processing the File List for Ingestion

Step 4: Pulling Files to the Local Machine

Step 5: Uploading to Google Cloud Storage

Conclusion and Further Optimizations

Solving a string prefix problem using Trie in golang

The problem

Problem statement

Constraints

Example testcases

Solving the problem

Trie

Implementing the solution

Testing

Can I get a review of my portfolio

gnsp.in

A Tutorial on Dynamic Programming in C++

THE PROBLEM

ANALYSIS

SOLUTION

Making 'The Matrix' Effect in Javascript

Making a 15-Puzzle Game Using React Hooks

We are making a what !

A few observations

Scaffolding and constants

Defining the GameState

The useGameState custom hook

The React components of the Puzzle

Styling the Puzzle

Positioning the board and the tiles

Positioning the overlay

Making a Neon Clock using React Hooks

A little bit of backstory

The Clock Making

The Requirements

Scaffolding the page in Pug

Writing the application in Javascript

Getting the time and reading it out

The useClock hook

Rendering the Clock and Readout components

Styling our components

The muted and glowing phrases

The Roman Numerals on the dial

Placing and rotating the hands

Making it responsive

Opensourcing classd: A fast and modern classNames alternative

A simple usecase for classNames

Age of ES6 template literals

Enter classd

Installation and usage

Install using package manager

Use in ES6 Modules

Use in Commonjs modules (Nodejs)

Pull from CDN

Well, what are classDedupe, classdFn and classDedupeFn ?

What about performance and stability ?

Source code and contributing

GnsP / classd

A fast and minimal ES6 utility to conditionally compose classnames

classd

Installation

Making the flag of India using Pug and Less

Defining the `GameState`

The `useGameState` custom hook

The `useClock` hook

A simple usecase for `classNames`

Enter `classd`

Well, what are `classDedupe`, `classdFn` and `classDedupeFn` ?