DEV Community: Kyle Schneider

Make a JavaScript Chess Board

Kyle Schneider — Thu, 20 Apr 2023 23:17:32 +0000

Creating a chess board in JavaScript is straightforward once you have knowledge of the Forsyth–Edwards Notation (FEN), a string of characters carrying information about the position of a chess board. For instance, the FEN of the starting position is as follows:

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

Forsyth-Edwards Notation (FEN)

To draw the board, you only need the string of characters at the beginning of the FEN. To begin, you can create a function that turns this string into an array of length 64. Here is an example of how to do this in JavaScript:

function fenToArray(fen) {
    const piecesString = fen.split(' ')[0].replace(/\//g, '');
    const piecesArrayNums = piecesString.split('');
    const piecesArray = piecesArrayNums.map(piece => {
        if (parseInt(piece)) {
            return [...Array(parseInt(piece)).fill(null)];
        };
        return piece;
      }).flat();
    return piecesArray;
}

Additionally, you will need images of pieces to render on the board, as well as two variables for the color of the light and dark squares. Here is an example of how to set up these objects and variables:

const lightSquare = '#c4c4c4';
const darkSquare = selectedColor;

const piecePngObj = {
  'b': blackBishop,
  'n': blackKnight,
  'k': blackKing,
  'p': blackPawn,
  'q': blackQueen,
  'r': blackRook,
  'B': whiteBishop,
  'N': whiteKnight,
  'K': whiteKing,
  'P': whitePawn,
  'Q': whiteQueen,
  'R': whiteRook, 
}

Here, the values of the piecePngObj object reference the path to the 12 piece images.

Finally, you can create the board itself. Here is an example of how to do this in React with Material UI, though the logic will be similar in other implementations:

First, create the board of 64 squares.

function Board() {

    const fen = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
    const fenArray = fenToArray(fen);

    const squares = [];

    // Create board squares and pieces
    for (let i = 0; i < 64; i++) {

        const row = Math.floor(i / 8);
        const color = (row % 2 === 0 && i % 2 === 0) || 
                      (row % 2 === 1 && i % 2 === 1) 
                      ? lightSquare : darkSquare;

        squares.push(
            <Box 
              key={i}
              bgcolor={color}
              sx={{
                width: "100%",
                height: "100%",
                backgroundColor: color,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
            </Box>
          );
    };

    return (
        <Box
          className='board-container'
          sx={{
            height: length,
            width: length,
            display: 'grid',
            gridTemplateColumns: 'repeat(8, 1fr)',
            gridTemplateRows: 'repeat(8, 1fr)',
            position: 'relative',
          }}
        >
          {squares}
        </Box>
    );
}

To determine the color of the i-th square, it is necessary to consider if the row is odd or even; the first color in each row alternates, and the colors also alternate through each row. We store the 64 squares in a variable called squares, which is then returned wrapped in a Material UI <Box/> component. To make the 64 squares render in an 8x8 grid, use the gridTemplateColumns and gridTemplateRows CSS properties. For non-React and non-MUI implementations, this part may look different.

To add the piece images to the board, use the fenArray variable defined earlier.

import Draggable from 'react-draggable';

function Board() {

    const fen = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
    const fenArray = fenToArray(fen);

    const squares = [];

    // Create board squares and pieces
    for (let i = 0; i < 64; i++) {

        const row = Math.floor(i / 8);
        const color = (row % 2 === 0 && i % 2 === 0) || 
                      (row % 2 === 1 && i % 2 === 1) 
                      ? lightSquare : darkSquare;

        const pieceImg = (
            <Box 
              draggable='false'
              component='img'
              src={piecePngObj[`${fenArray[i]}`]}
              alt=''
              sx={{ maxWidth: "100%", maxHeight: "100%" }}
          />
        );

        squares.push(
            <Box 
              key={i}
              bgcolor={color}
              sx={{
                width: "100%",
                height: "100%",
                backgroundColor: color,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              {staticBoard ? pieceImg : 
                <Draggable>
                  {pieceImg}
                </Draggable>
              }
            </Box>
          );
    };

    return (
        <Box
          className='board-container'
          sx={{
            height: length,
            width: length,
            display: 'grid',
            gridTemplateColumns: 'repeat(8, 1fr)',
            gridTemplateRows: 'repeat(8, 1fr)',
            position: 'relative',
          }}
        >
          {squares}
        </Box>
    );
}

The pieceImg variable is an <img/> component that displays the corresponding image for each non-empty square, or an empty square if the square is empty. The image source is determined by referencing the piecePngObj object containing the links to the various piece images.

If using React, it's possible to make the pieces draggable using the react-draggable npm package. However, additional work is required to ensure that the pieces behave correctly within the board, such as staying inside the board boundaries and snapping back to their original positions upon release.

Full code:

import Draggable from 'react-draggable';
import Box from '@mui/material/Box';

const lightSquare = '#c4c4c4';
const darkSquare = selectedColor;

const piecePngObj = {
  'b': blackBishop,
  'n': blackKnight,
  'k': blackKing,
  'p': blackPawn,
  'q': blackQueen,
  'r': blackRook,
  'B': whiteBishop,
  'N': whiteKnight,
  'K': whiteKing,
  'P': whitePawn,
  'Q': whiteQueen,
  'R': whiteRook, 
}

function fenToArray(fen) {
    const piecesString = fen.split(' ')[0].replace(/\//g, '');
    const piecesArrayNums = piecesString.split('');
    const piecesArray = piecesArrayNums.map(piece => {
        if (parseInt(piece)) {
            return [...Array(parseInt(piece)).fill(null)];
        };
        return piece;
      }).flat();
    return piecesArray;
}

function Board() {

    const fen = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
    const fenArray = fenToArray(fen);

    const squares = [];

    // Create board squares and pieces
    for (let i = 0; i < 64; i++) {

        const row = Math.floor(i / 8);
        const color = (row % 2 === 0 && i % 2 === 0) || 
                      (row % 2 === 1 && i % 2 === 1) 
                      ? lightSquare : darkSquare;

        const pieceImg = (
            <Box 
              draggable='false'
              component='img'
              src={piecePngObj[`${fenArray[i]}`]}
              alt=''
              sx={{ maxWidth: "100%", maxHeight: "100%" }}
          />
        );

        squares.push(
            <Box 
              key={i}
              bgcolor={color}
              sx={{
                width: "100%",
                height: "100%",
                backgroundColor: color,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              {staticBoard ? pieceImg : 
                <Draggable
                  bounds='.board-container'
                  onStart={onStart}
                  onStop={() => onStop(i)}
                  onDrag={(e, ui) => handleDrag(e, ui, i)}
                  position={positions[i]}
                >
                  {pieceImg}
                </Draggable>
              }
            </Box>
          );
    };

    return (
        <Box
          className='board-container'
          sx={{
            height: length,
            width: length,
            display: 'grid',
            gridTemplateColumns: 'repeat(8, 1fr)',
            gridTemplateRows: 'repeat(8, 1fr)',
            position: 'relative',
          }}
        >
          {squares}
        </Box>
    );
}

export default Board;

The Great Prime Number Challenge: Which Programming Language is the Fastest?

Kyle Schneider — Mon, 10 Apr 2023 19:55:30 +0000

Setup

To have a hands on experience of different speeds between different programming languages, I decided to see how fast different languages would calculate and store the prime numbers between 1 and 10,000,000. The seven languages I choose are:

C
Go
Java
JavaScript
Python
Ruby
Rust

To set this up, I first wrote the following python code:

import math
from datetime import datetime

def is_prime(num):
    if num < 2:
        return False
    for i in range(2, int(math.sqrt(num)) + 1):
        if num % i == 0:
            return False
    return True

start = datetime.now()
primes = []
for num in range(int(1e7)):
    if is_prime(num):
        primes.append(num)
print('Python: ', datetime.now() - start)

The code determines whether an integer n is prime or not by checking if any of the integers in the range [2, sqrt(n)] has a quotient with a zero remainder. Then, it iterates through the integers in the range [1, 10,000,000], storing the integer if it is indeed prime.

Although I'm not interested in viewing or using the list of prime numbers, it is import to store the information so that the language's memory management is tested.

Then, using ChatGPT, I converted this Python code into the other 6 languages.

#include <stdio.h>
#include <stdlib.h>
#include <stdbool.h>
#include <math.h>
#include <time.h>

bool is_prime(int num) {
    if (num < 2) {
        return false;
    }
    for (int i = 2; i <= sqrt(num); i++) {
        if (num % i == 0) {
            return false;
        }
    }
    return true;
}

int main() {
    clock_t start = clock();
    int *primes = malloc(10000000 * sizeof(int));
    int count = 0;
    for (int num = 2; num < 10000000; num++) { // Start at num=2, not num=0
        if (is_prime(num)) {
            primes[count++] = num;
        }
    }
    printf("C: %f seconds\n", ((double)clock() - start) / CLOCKS_PER_SEC);
    free(primes); // Free the dynamically allocated memory
    return 0;
}

Go:

package main

import (
    "fmt"
    "math"
    "time"
)

func isPrime(num int) bool {
    if num < 2 {
        return false
    }
    for i := 2; i <= int(math.Sqrt(float64(num))); i++ {
        if num%i == 0 {
            return false
        }
    }
    return true
}

func main() {
    start := time.Now()
    primes := []int{}
    for num := 0; num < int(1e7); num++ {
        if isPrime(num) {
            primes = append(primes, num)
        }
    }
    fmt.Println("Go: ", time.Since(start))
}

Java:

import java.time.Duration;
import java.time.Instant;
import java.lang.Math;
import java.util.ArrayList;
import java.util.List;

public class primes {
    public static boolean isPrime(int num) {
        if (num < 2) {
            return false;
        }
        for (int i = 2; i <= Math.sqrt(num); i++) {
            if (num % i == 0) {
                return false;
            }
        }
        return true;
    }

    public static void main(String[] args) {
        Instant start = Instant.now();
        List<Integer> primes = new ArrayList<Integer>();
        for (int num = 0; num < 10000000; num++) {
            if (isPrime(num)) {
                primes.add(num);
            }
        }
        System.out.println("Java: " + Duration.between(start, Instant.now()).toMillis() + " ms");
    }
}

JavaScript:

function isPrime(num) {
    if (num < 2) {
      return false;
    }
    for (let i = 2; i <= Math.sqrt(num); i++) {
      if (num % i === 0) {
        return false;
      }
    }
    return true;
  }

  const start = new Date();
  const primes = [];
  for (let num = 0; num < 1e7; num++) {
    if (isPrime(num)) {
      primes.push(num);
    }
  }
  console.log(`JavaScript: ${(new Date() - start)/1000} seconds`);

Ruby:

def is_prime(num)
    return false if num < 2
    (2..Math.sqrt(num).to_i).each do |i|
      return false if num % i == 0
    end
    true
  end

  start = Time.now
  primes = []
  (0...1e7.to_i).each do |num|
    primes << num if is_prime(num)
  end
  puts "Ruby: #{Time.now - start} seconds"

Rust:

use std::time::{Instant, Duration};
use std::f64::consts::SQRT_2;

fn is_prime(num: u32) -> bool {
    if num < 2 {
        return false;
    }
    for i in 2..=((num as f64).sqrt() as u32) {
        if num % i == 0 {
            return false;
        }
    }
    true
}

fn main() {
    let start = Instant::now();
    let mut primes = Vec::new();
    for num in 0..10_000_000 {
        if is_prime(num) {
            primes.push(num);
        }
    }
    let end = Instant::now();
    let time_elapsed = end - start;
    println!("Rust: {:?}", time_elapsed);
}

Results

Language	Race 1	Race 2	Race 3	Average
C	8.9s	8.9s	8.9s	8.9s
Go	11.8s	11.6s	11.6s	11.7s
Java	4.6s	4.7s	4.6s	4.6s
JavaScript	4.4s	4.4s	4.4s	4.4s
Python	99.5s	88.9s	88.2s	92.2s
Ruby	64.4s	68.6s	64.4s	65.8s
Rust	25.2s	25.3s	25.3s	25.3s

Winner: JavaScript

Slowest: Python (20x slower than JavaScript)

Discussion

What can we conclude from this test? Well, what we can't conclude is that JavaScript is twice as fast as C, nor that Python is 10x slower than C. We can deduce that for calculating prime numbers in this way, Java and JavaScript would be excellent choices with regards to speed and Python and Ruby would be relatively poor choices. It is important to note that this was just testing one application of these languages, and does not give a clear picture to the overall efficiency of the language. Clearly, Python and Ruby are significantly slower than Java/JavaScript/C, so it may be safe to assume that these languages are slower in general. Indeed, one of Python's biggest criticisms and reasons it is not used is that it is slow.

An important factor in the discussion of language speed is static typing versus dynamic typing. In short, static typing means that the type of a variable is checked at compile-time, and dynamic typing means that the type of a variable is checked at run-time. The languages tested that are statically typed are C, Go, Java, and Rust, where JavaScript, Python, and Ruby are dynamically typed.

Why is JavaScript so much faster than the other two dynamically typed languages? While there are factors other than typing that affect speed, this difference is largely due to a concept called Just-In-Time (JIT) Compilation link. It is partly because JavaScript is so widely used and popular that the large community has developed this and other features of JavaScript that help speed it up.

The (non-secure) MD5 Hash Algorithm

Kyle Schneider — Wed, 29 Mar 2023 21:51:30 +0000

DISCLAIMER: This hash algorithm is not considered secure in 2023 and should never be implemented to protect any data and only be used as an exercise.

Notation & Terminology

"Bit" refers to the simple 1 or 0 quantity that computers deal in.
"Byte" refers to a collection of 8 bits.
"Word" refers to a collection of 32 bits (equivalently, 4 bytes). In later examples, long binary numbers will be written with one word per line.

For Boolean X, the symbol ~X refers to the opposite of X.

Recall the logical binary operations and, or, and xor:

P	Q	and	or	xor
0	0	0	0	0
1	0	0	1	1
0	1	0	1	1
1	1	1	1	0

For a binary number X, let X <<< s denote the binary number obtained by circularly shifting/rotating X to the left by s bit positions.
For example:
If X = 111011 and s = 3, then X <<< s = 011111.

Step 1: Append Padding Bits

The message will be extended so that it's length is 64 less than a multiple of 512, i.e., congruent to 448=512-64 modulo 512. There will always be padding applied, even in the case that the message is already congruent to 448 modulo 512.
To perform the padding, add one bit of value "1" to the end of the message followed by the required number of "0" bits such that the new length is congruent to 448 modulo 512. For a given message, at least one bit will be appended and at most 512 bits are appended.

For example, the message "kyle" in binary is

01101011 01111001 01101100 01100101 00001010

which has 40 bits. Therefore, we append a single "1" followed by 407 "0" bits, giving a total of 40 + 1 + 407 = 448 = 512-64 bits:

01101011 01111001 01101100 01100101 
00001010 10000000 00000000 00000000
...
00000000 00000000 00000000 00000000
00000000 00000000 00000000 00000000
// 448 bits

Step 2: Append Length

Append a 64-bit representation of the length of the original message to the result of Step 1. The binary of "kyle" was of length 40, which is 101000 in binary. Therefore we append the 64-bit extension of this number:

01101011 01111001 01101100 01100101 
00001010 10000000 00000000 00000000
...
00000000 00000000 00000000 00000000
00000000 00000000 00000000 00101000
// 512 bits

Now the number of bits in the message is a multiple of 512. Equivalently, it is comprised of a multiple of 16 (32-bit) words.

(In the unlikely case that the message has a length greater than 2^64 bits, simply take just the low-order bits of the length, i.e., lop the front off.)

From here, define M[i] to be the i-th word of the message thus far, for 0 ≤ i ≤ N-1, where N is a multiple of 16 such that 16 * N is the length of the message thus far. Hence M[0] is the first 32-bits, M[1] is the second 32-bits, and so on.

Step 3: Initialize MD Buffer

There are four words, A, B, C, and D, which are used to compute the message digest. These values are initialized to the following hexadecimal values:

A: 01 23 45 67
B: 89 ab cd ef
C: fe dc ba 98
D: 76 54 32 10

Step 4: Process Message in 16-Word Blocks

Define the following four functions which take three words as input and returns a single word:

F(X,Y,Z) = (X and Y) or (~X and Z)
G(X,Y,Z) = (X and Z) or (Y and ~Z)
H(X,Y,Z) = X xor Y xor Z
I(X,y,Z) = Y xor (X or ~Z)

Note that the functions apply the Boolean logic bit-wise.

Define

\equiv \lfloor 4294967296 * |\sin(i)| \rfloor \textrm{ for integer } 1\leq i\leq64.

Now for the actual algorithm, directly from R. Rivest's documentation [1]:

Do the following:

/* Process each 16-word block. */
For i = 0 to N/16-1 do

  /* Copy block i into X. */
  For j = 0 to 15 do
    Set X[j] to M[i*16+j].
  end /* of loop on j */

  /* Save A as AA, B as BB, C as CC, and D as DD. */
  AA = A
  BB = B
  CC = C
  DD = D

  /* Round 1. */
  /* Let [abcd k s i] denote the operation
    a = b + ((a + F(b,c,d) + X[k] + T[i]) <<< s). */
  /* Do the following 16 operations. */
  [ABCD 0 7 1] [DABC 1 12 2] [CDAB 2 17 3] [BCDA 3 22 4]
  [ABCD 4 7 5] [DABC 5 12 6] [CDAB 6 17 7] [BCDA 7 22 8]
  [ABCD 8 7 9] [DABC 9 12 10] [CDAB 10 17 11] [BCDA 11 22 12]
  [ABCD 12 7 13] [DABC 13 12 14] [CDAB 14 17 15] [BCDA 15 22 16]

  /* Round 2. */
  /* Let [abcd k s i] denote the operation
    a = b + ((a + G(b,c,d) + X[k] + T[i]) <<< s). */
  /* Do the following 16 operations. */
  [ABCD 1 5 17] [DABC 6 9 18] [CDAB 11 14 19] [BCDA 0 20 20]
  [ABCD 5 5 21] [DABC 10 9 22] [CDAB 15 14 23] [BCDA 4 20 24]
  [ABCD 9 5 25] [DABC 14 9 26] [CDAB 3 14 27] [BCDA 8 20 28]
  [ABCD 13 5 29] [DABC 2 9 30] [CDAB 7 14 31] [BCDA 12 20 32]

  /* Round 3. */
  /* Let [abcd k s t] denote the operation
    a = b + ((a + H(b,c,d) + X[k] + T[i]) <<< s). */
  /* Do the following 16 operations. */
  [ABCD 5 4 33] [DABC 8 11 34] [CDAB 11 16 35] [BCDA 14 23 36]
  [ABCD 1 4 37] [DABC 4 11 38] [CDAB 7 16 39] [BCDA 10 23 40]
  [ABCD 13 4 41] [DABC 0 11 42] [CDAB 3 16 43] [BCDA 6 23 44]
  [ABCD 9 4 45] [DABC 12 11 46] [CDAB 15 16 47] [BCDA 2 23 48]

  /* Round 4. */
  /* Let [abcd k s t] denote the operation
    a = b + ((a + I(b,c,d) + X[k] + T[i]) <<< s). */
  /* Do the following 16 operations. */
  [ABCD 0 6 49] [DABC 7 10 50] [CDAB 14 15 51] [BCDA 5 21 52]
  [ABCD 12 6 53] [DABC 3 10 54] [CDAB 10 15 55] [BCDA 1 21 56]
  [ABCD 8 6 57] [DABC 15 10 58] [CDAB 6 15 59] [BCDA 13 21 60]
  [ABCD 4 6 61] [DABC 11 10 62] [CDAB 2 15 63] [BCDA 9 21 64]

  /* Then perform the following additions. (That is increment each
  of the four registers by the value it had before this block
  was started.) */
  A = A + AA
  B = B + BB
  C = C + CC
  D = D + DD

 end /* of loop on i */

The diagram below may assist in understanding the process used in the [ABCD k s i] operation:

Step 5: Output

After completing the 4 rounds per 512-bit block of the message, the final output will begin with the low-order word A and end with the high-order word D. By concatenation, the final output would read DCBA, a 128-bit value.

Sensitivity to Initial Conditions

One of the important features of a hash algorithm is for two similar inputs to have very different outputs. For example, compare the MD5 hash of "kyle"

kyle: 4b75751e170e00f56886726c3f46eecd

with the MD5 hash of "Kyle" (capital K)

Kyle: e8b579fe36f15209c6f167396a46b04e

References:
[1] R. Rivest The MD5 Message-Digest Algorithm. MIT Laboratory for Computer Science and RSA Data Security, Inc. April 1992.

Git Cheatsheet

Kyle Schneider — Tue, 14 Mar 2023 18:48:30 +0000

After completing my third group project at my coding bootcamp, I felt like the thing that frustrated me the most consistently for the last three weeks was using git/GitHub. Too many times had I resorted to nuking my local repo and re-cloning the remote, totally missing the purpose of git.

All terminal examples are started in an empty git repository.

Terminology

index: The Git data structure called the index (also known as the staging area or the cache) is a file that contains a list of other files for Git track. Running git add updates this index file with the new changes, but does not yet add the changes to the commit history.
HEAD commit: The commit that is currently checked out. Running git commit or git checkout <commit-hash> will move the head to the relevant commit.
Working tree: The set of files and directories that make up the project on the user's local machine. This is distinct from the index file, as the working tree can contains files not tracked by Git.

Staging

git status

Displays paths that have differences between the index file and the current HEAD commit, paths that have differences between the working tree and the index file, and paths in the working tree that are not tracked by Git.

touch main.txt
git status

returns

On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        main.txt

nothing added to commit but untracked files present (use "git add" to track)

git add

git add [file]

Updates the index with the given file.

touch main.txt
git add main.txt
git status

returns

On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   main.txt

git add .

Updates the index using the current content found in the working tree. Write '.' in place of the file to add all changes.

touch main.txt
touch not_main.txt
git add .
git status

returns

On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   main.txt
        new file:   not_main.txt

git commit -m '[commit message]'

Adds the staged content in the index file as a new commit snapshot. This will be accessible later and will not be at risk of being deleted or overwritten. Unless, of course, you want to delete/overwrite commits!

touch main.txt
git add .
git commit -m 'add main.txt'

returns

[main (root-commit) 85cc587] add main.txt
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 main.txt

git reset

git reset [file]

Removes the given file from the index. Opposite of git add [file].

touch main.txt
git add main.txt
git reset main.txt
git status

returns

On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        main.txt

nothing added to commit but untracked files present (use "git add" to track)

git reset [commit]

Removes all commits after the given commit and leaves the working tree in it's current state.

touch main.txt
git add main.txt
git commit -m 'add main.txt' 
    # commit hash: 65cd652 
touch not_main.txt
git add not_main.txt
git commit -m 'add not_main.txt'
git reset 65cd652
git status

returns

On branch main
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        not_main.txt

nothing added to commit but untracked files present (use "git add" to track)

and ls returns

main.txt  not_main.txt

git reset --hard [commit]

Removes all commits after the given commit and updates the working tree to match the given commit.

touch main.txt
git add main.txt
git commit -m 'add main.txt' 
    # commit hash: d996f35
touch not_main.txt
git add not_main.txt
git commit -m 'add not_main.txt'
git reset --hard d996f35
git status

returns

On branch main
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        not_main.txt

nothing added to commit but untracked files present (use "git add" to track)

and ls returns

main.txt

Comparison

git diff

Show changes between the working tree and the HEAD commit.

touch main.txt
git add main.txt
git commit -m 'add main.txt'
echo 'some text' >> main.txt
git diff

returns

diff --git a/main.txt b/main.txt
index e69de29..7b57bd2 100644
--- a/main.txt
+++ b/main.txt
@@ -0,0 +1 @@
+some text

git diff --staged

Show uncommitted changes in the index file.

touch main.txt
git add main.txt
git diff --staged

returns

diff --git a/main.txt b/main.txt
new file mode 100644
index 0000000..e69de29

git diff --cached is an alias of git diff --staged

git diff [branch_A] [branch_B]

Shows changes between the two given branches.

git checkout -b branch_A
touch file_A.txt
git add .
git commit -m 'file_A'
git checkout -b branch_B
touch file_B.txt
git add .
git commit -m 'file_B'
git diff branch_A branch_B

returns

diff --git a/file_B.txt b/file_B.txt
new file mode 100644
index 0000000..e69de29

Resources:
[1] DZone - Top 20 Git Commands With Examples - https://dzone.com/articles/top-20-git-commands-with-examples
[2] git - git documentation - https://git-scm.com/doc

Extreme JavaScript Type Coercion

Kyle Schneider — Tue, 14 Feb 2023 00:40:58 +0000

Introduction

Last week I stumbled upon this silly bit of JavaScript:

console.log(('b' + 'a' + + 'a' + 'a').toLowerCase());
// RETURNS: banana

I had seen similar strange code snippets before, but had not felt the urge to explore the mechanics of what was happening until I came across a wonderful YouTube video by Low Byte Productions [3]. In the video titled "JavaScript Is Weird EXTREME EDITION", we are shown a short script which converts JavaScript into JavaScript composed exclusively from the characters ({[/>+!-=]}). The new and comically unreadable code would of course compile exactly the same as the original. This post recaps a weekend spent looking into JavaScript type coercion and reproducing Low Byte Production's extremely strange JavaScript compiler.

Type Coercion

Definition

In some programming languages, the combination of different data types is not allowed. For example, in Python:

print(1 + "1")
# RETURNS: TypeError: can only concatenate str (not "int") to str

JavaScript is more friendly than Python in that it will make an attempt to combine different data types. Type coercion is the automatic or implicit conversion of values from one data type to another [1]. In JavaScript, the same code yields a result:

console.log(1 + "1");
// RETURNS: 11

console.log(1 + 1 + "1");
// RETURNS: 21

console.log("1" + 1 + 1);
// RETURNS: 111

In the second example, JavaScript adds the first two 1's to 2 since they are both of type Number, and then converts this to a string before adding the final "1" of type String.

This highlights the importance of the difference between == and === in JavaScript. The == operator uses type coercion, whereas === only matches equal types.

console.log(1 == "1");
// RETURNS: true

console.log(1 === "1");
// RETURNS: false

The Unary Plus Operator

The unary plus operator + precedes its operand and will attempt to convert the operand into a number before returning the operand. It can convert strings that represent integers or floats to numbers, and will also convert the values true, false, and null [2].

const x = 1;
const y = -1;

console.log(+x);
// RETURNS: 1

console.log(+y);
// RETURNS: -1

console.log(+true);
// RETURNS: 1

console.log(+false);
// RETURNS: 0

console.log(+'');
// RETURNS: 0

console.log(+'2');
// RETURNS: 2

console.log(+'3.1415');
// RETURNS: 3.1415

console.log(+'hello');
// RETURNS: NaN

Strange Type Coercion

Here are some other examples of type coercion that may be less intuitive:

console.log(+[]);
// RETURNS: 0

console.log(![]);
// RETURNS: false

console.log(!![]);
// RETURNS: true

console.log(+{});
// RETURNS: NaN

console.log(+{}+[]);
// RETURNS: 'NaN'

console.log([]+[]);
// RETURNS: '' (empty string)

Notice that adding +[] to an expression will convert it directly to a string.

Since the unary plus of a non-numeric string returns NaN, we can write some funny JavaScript that use type coercion. What will happen when we try to evaluate 'ba' + (+'a')? This becomes 'ba' + NaN since 'a' is non-numeric. Now since JavaScript is adding a type number to a type string (yes, typeof NaN === number), it will convert the NaN to a string and return 'baNaN'. Now we can see why the first code snippet logs banana. The value of the string with the unary operator does not need to be a, it just needs to be non-numeric:

console.log(('b' + 'a' + + 'pomegranate' + 'a').toLowerCase());
// RETURNS: banana

Numbers and Letters With Just ([!+])

Since +true evaluates to 1 and !![] evaluates to true, we can create the positive integers:

console.log(+!![]);
// RETURNS: 1

console.log(+!![] + +!![]);
// RETURNS: 2

console.log(+!![] + +!![] + +!![]);
// RETURNS: 3

Programmatically:

const zero = '+[]';
const one = '+!![]';

function getNum(n) {
    if (n == 0) return zero;
    return Array(n).fill(one).join(' + ');
};

console.log(getNum(7));
// RETURNS: +!![] + +!![] + +!![] + +!![] + +!![] + +!![] + +!![]

This repeated string evaluates to 7 in JavaScript. Try it in the console! Now that we have all the numbers, let's use them to obtain some letters.

Recall that JavaScript's type coercion gives !![]+[] === true, where true is a string because of the +[]. We can access the letters of true now with string indexing:

console.log((!![]+[])[+[]]);
// RETURNS: t
console.log((!![]+[])[+!![]]);
// RETURNS: r
console.log((!![]+[])[+!![] + +!![]]);
// RETURNS: u
console.log((!![]+[])[+!![] + +!![] + +!![]]);
// RETURNS: e

Note that we could have used the getNum function earlier, e.g. use getNum(3) in place of +!![] + +!![] + +!![] for the last letter, but here we can see that the characters are truly derived from just the set ([!+]).

Collecting Characters

Eventually, we would like to write any character in terms of our symbol set. The final method to achieve this will require us to have access to constructor, toString, return, escape, charCodeAt, \, and the space character. This means we need to obtain the following characters using only ({[/>+!-=]}):

fromChadetSingcup[space][backslash]

Easy Words

The first round of characters will be just like the example above using the following strings derived from JavaScript type coercion:

+{}+[] yields the string NaN
{}+[] yields the string [object Object]
!![]+[] yields the string true
![]+[] yields the string false
(+!![]/+[])+[] yields the string Infinity

Here are the characters from Infinity using string interpolation with our getNum function:

// +!![]/+[] => Infinity
console.log(`((+!![]/+[])+[])[${getNum(3)}]`);
// RETURNS: i
console.log(`((+!![]/+[])+[])[${getNum(4)}]`);
// RETURNS: n

We will store the string value for all of these characters using the chars object:

const zero = '+[]';
const one = '+!![]';

function getNum(n) {
    if (n == 0) return zero;
    return Array(n).fill(one).join(' + ');
};

// WANT: fromChadetSingcup[space][backslash]

const chars = {};

// +{} => NaN
chars.a = `(+{}+[])[${getNum(1)}]`;

// {}+[] => '[object Object]'
chars.b = `({}+[])[${getNum(2)}]`;
chars.o = `({}+[])[${getNum(1)}]`;
chars.e = `({}+[])[${getNum(4)}]`;
chars.c = `({}+[])[${getNum(5)}]`;
chars.t = `({}+[])[${getNum(6)}]`;
chars[' '] = `({}+[])[${getNum(7)}]`;

// ![] => false
chars.f = `(![]+[])[${getNum(0)}]`;
chars.s = `(![]+[])[${getNum(3)}]`;

// !![] => true
chars.r = `(!![]+[])[${getNum(1)}]`;
chars.u = `(!![]+[])[${getNum(2)}]`;

// +!![]/+[] => Infinity
chars.i = `((+!![]/+[])+[])[${getNum(3)}]`;
chars.n = `((+!![]/+[])+[])[${getNum(4)}]`;

Complex Words

Constructors

Calling the constructor method on a JavaScript variable will return the constructor of that type. If we attach our friend +[], to it, we get the constructor name as a string:

console.log((1)['constructor']+[]);
// RETURNS: function Number() { [native code] }

The next set of characters will get a string by accessing this constructor method. We have all of the characters necessary to make the word constructor, so define the function convertString which converts the input string to our symbol set. Note that this will only work for strings whose characters are already defined in chars.

function convertString(string) {
    return string.split('').map(char => chars[char]).join(' + ');
}

We get three letters from constructors, two from strings and one from regexs:

// ([]+[])['constructor']+[] => 'function String() { [native code] }'
chars.S = `([]+([]+[])[${convertString('constructor')}])[${getNum(9)}]`;
chars.g = `([]+([]+[])[${convertString('constructor')}])[${getNum(14)}]`;

// (/-/)['constructor']+[] => 'function RegExp() { [native code] }
chars.p = `([]+(/-/)[${convertString('constructor')}])[${getNum(14)}]`;

toString(n)

The next three letters use a clever trick with the toString method of numbers. The method takes a target base as parameter and will convert the integer it is called on to that base as a string.

13 in base 14 is d
17 in base 18 is h
22 in base 23 is m

// convert base 10 ints to hexadecimal to get letters
chars.d = `(${getNum(13)})[${convertString('toString')}](${getNum(14)})`;
chars.h = `(${getNum(17)})[${convertString('toString')}](${getNum(18)})`;
chars.m = `(${getNum(22)})[${convertString('toString')}](${getNum(23)})`;

Capital C

The last letter, C, is the most complex. Before we can get C, we need the backslash character. We need to store \\ in chars, since, when evaluated, the first backslash escapes. This is achieved by converting a stringified regex with four backslashes to a string and accessing index 1:

// regex
chars['\\'] = `(/\\\\/+[])[${getNum(1)}]`;

The JavaScript escape function will replace all characters with ASCII escape sequences [4]. To get C, we will use the fact that escape('\\') === '%5C'. We can get the escape function using the function constructor like so:

console.log((()=>{})['constructor']('return escape')());
// RETURNS: [Function: escape]
console.log((()=>{})['constructor']('return escape')()('\\'));
// RETURNS: %5C

So capital C in our code is

chars.C = `(()=>{})[${convertString('constructor')}](${convertString('return escape')})()(${chars['\\']})[${getNum(2)}]`

Write ANY Character With Just ({[/>+!-=]})

Now we are equipped to produce any other character with our strange syntax. We will edit the convertString function to handle inputs that are not already in the map. If the input character is not in chars, get the character code of the single value string with charCodeAt(0). Then return the string constructor called with the fromCharCode(charCode) method.

function convertString(string) {
    return string.split('').map(char => {
        if (!(char in chars)) {
            const charCode = char.charCodeAt(0);
            return `([]+[])[${convertString('constructor')}][${convertString('fromCharCode')}](${getNum(charCode)})`;
        }
        return chars[char];
    }).join(' + ');
}

Now we can convert any string into a string containing only ({[/>+!-=]}). The last code we'll add at the ability to execute our 'symbol code'. Here is the result:

const zero = '+[]';
const one = '+!![]';

function getNum(n) {
    if (n == 0) return zero;
    return Array(n).fill(one).join(' + ');
};

const chars= {};

function convertString(string) {
    return string.split('').map(char => {
        if (!(char in chars)) {
            const charCode = char.charCodeAt(0);
            return `([]+[])[${convertString('constructor')}][${convertString('fromCharCode')}](${getNum(charCode)})`;
        }
        return chars[char];
    }).join(' + ');
}

// +{} => NaN
chars.a = `(+{}+[])[${getNum(1)}]`;

// {}+[] => '[object Object]'
chars.b = `({}+[])[${getNum(2)}]`;
chars.o = `({}+[])[${getNum(1)}]`;
chars.e = `({}+[])[${getNum(4)}]`;
chars.c = `({}+[])[${getNum(5)}]`;
chars.t = `({}+[])[${getNum(6)}]`;
chars[' '] = `({}+[])[${getNum(7)}]`;

// ![] => false
chars.f = `(![]+[])[${getNum(0)}]`;
chars.s = `(![]+[])[${getNum(3)}]`;

// !![] => true
chars.r = `(!![]+[])[${getNum(1)}]`;
chars.u = `(!![]+[])[${getNum(2)}]`;

// +!![]/+[] => Infinity
chars.i = `((+!![]/+[])+[])[${getNum(3)}]`;
chars.n = `((+!![]/+[])+[])[${getNum(4)}]`;

// ([]+[])['constructor']+[] => 'function String() { [native code] }'
chars.S = `([]+([]+[])[${convertString('constructor')}])[${getNum(9)}]`;
chars.g = `([]+([]+[])[${convertString('constructor')}])[${getNum(14)}]`;

// (/-/)['constructor']+[] => 'function RegExp() { [native code] }
chars.p = `([]+(/-/)[${convertString('constructor')}])[${getNum(14)}]`;

// regex
chars['\\'] = `(/\\\\/+[])[${getNum(1)}]`;

// convert base 10 ints to hexadecimal to get letters
chars.d = `(${getNum(13)})[${convertString('toString')}](${getNum(14)})`;
chars.h = `(${getNum(17)})[${convertString('toString')}](${getNum(18)})`;
chars.m = `(${getNum(22)})[${convertString('toString')}](${getNum(23)})`;

// escape function
chars.C = `(()=>{})[${convertString('constructor')}](${convertString('return escape')})()(${chars['\\']})[${getNum(2)}]`

const compile = code => `(()=>{})[${convertString('constructor')}](${convertString(code)})()`;

console.log(compile('console.log("Hello, World!");'));

Whatever JavaScript code is passed as a string on the last line will be logged to the console as valid JavaScript using only ({[/>+!-=]})!

I encourage you to paste the above code in your dev tools and see the output for yourself. Copy that output and run it as JavaScript to see Hello, World! printed to the console.

To reiterate, I did not come up with this code. I followed the video by Low Byte Productions [3] and read MDN documentation [1-2, 4] to understand the mechanics of the code and be able to reproduce and explain the code.

References:

[1] MDN - Type Coercion - https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
[2] MDN - Unary Plus - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus
[3] Low Byte Productions - JavaScript Is Weird (EXTREME EDITION) - https://www.youtube.com/watch?v=sRWE5tnaxlI&t=50s

[4] MDN - escape() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape