DEV Community: Taylor Beeston

Convert Hexadecimal and Binary in your head!

Taylor Beeston — Mon, 29 Jun 2020 03:09:41 +0000

Why?

Being able to convert a number between hexadecimal and binary in your head is a really valuable skill in the world of computer science. Even if you don't regularly go down to that low of a level, it can be extremely helpful when learning about lower level systems that you are building on top of, and can be invaluable when you do need to work in binary/hex.

How?

Binary and hexadecimal?

Before we talk about how to convert between binary and hex, let's talk about what binary and hex are.

Number Bases

A number base is the amount of values that can be stored in one digit. For example, in base 10 (aka what we usually think of numbers in) one digit can store 10 different values (0-9).

Binary

Binary is a number system in base 2. This means each digit can only store 2 values (usually notated as a 1 or a 0). Because the base is so low, binary numbers can be extremely long and intimidating to read (the number 51 in binary is 00110011). In computer science, we will usually group these numbers into groups of 8 (aka a Byte).

Hexadecimal

Similarly, hex is also just a number system with a different base: 16. How do we store more than ten values in a given digit? We use letters! In other words, the number 10 in hex becomes A, 11 becomes B, 12 becomes C, 13 becomes D, 14 becomes E, and 15 becomes F. This also means that in hex, the number 10 is actually the number 16 in base 10 (usually we would say 16 in decimal).

The key relationship between hex and binary

The key trick to converting between hex and binary is to realize that one hex digit is perfectly equal to four binary digits.

What do I mean by this? Take a look at the table below.

Decimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Binary	0000	0001	0010	0011	0100	0101	0110	0111	1000	1001	1010	1011	1100	1101	1110	1111
Hex	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

You may notice that every combination of four binary digits is neatly contained in one hex digit. This means that we can convert any arbitrarily large number by simply breaking it down into chunks of four binary digits.

To give you an example, if we know that the number 0101 in binary is equivalent to 5 in hex, and 1111 in binary is equivalent to F in hex, then we can easily determine that 01011111 in binary is equivalent to 5F in hex, and 11110101 binary would be F5 hex. It might be tough to know what F5 hex is in decimal (245), but we don't need to know that to do these conversions!

Converting a single hex digit back and forth

Okay, so we know that we can convert an arbitrarily large number by breaking it into single hex digits, but how do we convert a single hex digit to its equivalent four binary digits and vice versa? Well, let's start with the easy ones.

Powers of 2

Each of the four binary digits in isolation are a power of two.

Decimal	0	1	2	4	8
Binary	0000	0001	0010	0100	1000
Hex	0	1	2	4	8

If you see a series of four binary digits with only one 1, then you simply run right to left counting by powers of 2. This can be confusing at first, but I promise that it only takes a few times before you get really good at memorizing 0100 = 4 and 0010 = 2 and so forth.

Filling in the other numbers

To fill in the gaps, we break up the number into a series of binary digits with only one 1 and add those values. What do I mean by that? Well, let's take a look at an example: 0101.

0101 can be broken into the numbers 0100 (4) and 0001 (1). We then add these two numbers to get our final value: 5.

Let's try again with the number 1011. This can be broken into 1000 (8), 0010 (2), and 0001 (1). These three numbers add to 11, which in hex would be B.

Going the other way

To convert from hex back to binary, you go digit by digit, seeing if the number is larger than your current binary digit, and if so, subtracting it from the number.

This is sort of confusing and awkward to write, so let's just look at an example: D.

The first binary digit (1000) is 8. D is larger than 8, so we know that the first digit in binary is a 1.

We will subtract 8 from D, leaving us with 5, and move on to the next binary digit: 4 (0100).

5 is larger than 4, so we subtract four and mark our second digit as a 1.

The next binary digit is 2 (0010), which is larger than our current remainder, so we know that our third binary digit is a 0.

Lastly, we have the number 1 and our binary digit is 1, so we know that our last digit is a 1.

If you managed to follow this long-winded example, you should have ended up with the number 1101 for D!

A quick summary is as follows

Remainder	Current Binary Digit	Binary Digits Figured Out
D	1000	1XXX
5	0100	11XX
1	0010	110X
1	0001	1101

Speeding it up

I find that manually running through each digit works really well in the beginning to get used to converting digits, but that it tends to be really slow. So, I've come up with a couple tricks to help me speed up the conversion process.

Look for numbers that are +/- 1 from a power of 2

Numbers like 0101 (5) and 0111 (7) are really easy to get to from their nearest power of two.

Think backwards from the top

1111 (F) is a very easy number to convert, and it can be helpful to simply subtract a given digit from it (i.e. 1101 (F - 2) is equal to D, 1011 (F - 4) is equal to B)

Practice

I was hoping not to get too long-winded with this post, because I don't want to make it seem like converting between hex and binary is at all difficult. I promise it's not! With a little practice, you may find that you can pick it up in minutes.

To help you with that, here are some practice conversions. If you really need to, use a binary to hex converter, but please try and solve these on your own!

Binary to hex

01001100 11000011
11100101 00101101
10110011 10110100
00110110 10010001

Hex to binary

3F C5
DD 13
4A 72
11 01

Thank you

Thank you for taking the time to read through this, and please feel free to let me know if I messed something up in this post, or if you have a better way that you use to mentally convert between binary and hex!

Resizing images client-side with vanilla JS

Taylor Beeston — Sat, 13 Jun 2020 02:26:15 +0000

Backstory
Code
Getting to work
- The canvas element
  - Overview
  - Code
- Overall Structure
  - Overview
  - Code
- Scaling a canvas
  - Overview
  - Code
Conclusion
Please Note
Promisify?

Backstory

I recently came upon a need to optimize images client-side prior to uploading them to a back end (in this case AWS S3). Ordinarily, this would be done on the back end (i.e. your front end sends a request containing an unoptimized image to the back end, which then optimizes that image before saving it), but for this project I really wanted to do this on the client.

Code

All the code for this can be found here.

Getting to work

The canvas element

Overview

It turns out that the best way (in this case) to create an image with javascript is by using a canvas element! How do we do that? By creating a 2d context, drawing our image in it, then calling the toBlob method.

Code

For this particular project, I am working with images as File Objects, obtained, for example, by using a function such as

(e) => e.target.files[0];

on an HTML file input element's onchange event.

Because of this, let's write the helper function readPhoto, which creates and returns a canvas element containing the image given to it. The code for this function is as follows:

const readPhoto = async (photo) => {
  const canvas = document.createElement('canvas');
  const img = document.createElement('img');

  // create img element from File object
  img.src = await new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.readAsDataURL(photo);
  });
  await new Promise((resolve) => {
    img.onload = resolve;
  });

  // draw image in canvas element
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);

  return canvas;
};

Let's break down what this code is doing.

First we create two HTML elements, an img and a canvas.

Why do we need the img? Because the drawImage method we will be using expects a CanvasImageSource as one of its parameters, and an HTMLImageElement is going to be the most convenient for us to create.

Next we read the photo into the img element using the readAsDataURL method and a cute little promisify trick.

After that, we make sure we wait for the img to load using the promisify trick again with the following:

await new Promise((resolve) => {
  img.onload = resolve;
});

Once we have our photo into img, and img has loaded, we draw it onto our canvas and return.

// draw image in canvas element
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);

return canvas;

Overall Structure

Overview

Okay, so we now know how to get a File into a canvas. Great! Now, let's talk about what we're going to do with it by looking at the function optimizePhoto, the canonical main of our little helper file.

Basically, what we're doing is taking our image, shrinking it to a maximum width that is set via an environment variable (or really any way you'd like to set this!), and then returning it as a Blob.

To add a little bit of complexity, I have found that it's best to first keep shrinking our image in half until we need to use bilinear interpolation (aka scaling by a factor not divisible by 2) to finish the job. This is a very quick and easy thing to do, so we'll go ahead and add it to this function.

Code

The function looks like this:

export default async (photo) => {
  let canvas = await readPhoto(photo);

  while (canvas.width >= 2 * MAX_WIDTH) {
    canvas = scaleCanvas(canvas, .5);
  }

  if (canvas.width > MAX_WIDTH) {
    canvas = scaleCanvas(canvas, MAX_WIDTH / canvas.width);
  }

  return new Promise((resolve) => {
    canvas.toBlob(resolve, 'image/jpeg', QUALITY);
  });
};

Nothing too crazy (besides maybe the use of our little promisify trick), but we're going to need to talk about one new function that this function depends on: scaleCanvas.

Scaling a canvas

Overview

Scaling a canvas actually turns out to be pretty simple, as we can reuse that drawImage method, just using a canvas as input instead of an img as input.

To do this, we simply make a new canvas, set its width and height to our desired dimensions, then call drawImage with the new width/height.

Code

The code for this is as follows:

const scaleCanvas = (canvas, scale) => {
  const scaledCanvas = document.createElement('canvas');
  scaledCanvas.width = canvas.width * scale;
  scaledCanvas.height = canvas.height * scale;

  scaledCanvas
    .getContext('2d')
    .drawImage(canvas, 0, 0, scaledCanvas.width, scaledCanvas.height);

  return scaledCanvas;
};

Conclusion

And that is it! Now we can simply pass an image to optimizePhoto and get a resized photo.

For example, assuming the following HTML

<input id="file-input" type="file" multiple />

We can generate upload resized photos with the following javascript:

const input = document.getElementById('file-input');

const input.onChange = (e) => {
  e.target.files.forEach(async (photo) => {
    const resizedPhoto = await optimizePhoto(photo);
    await uploadPhoto(resizedPhoto); // or do whatever
  });
}

Please Note

The algorithm used to resize photos by a factor other than 2 is not necessarily bilinear interpolation. At least as far as I've been able to find. From my own personal testing, it seems as though Firefox and Chrome will both user bilinear interpolation, which looks just fine in most cases. However, it is possible to manually bilinearly interpolate an image, which I may make another post about. If you happen to have a need for it, this also applies to using another scaling algorithm such as nearest neighbor or bicubic interpolation.

Promisify?

I wrote about this cute little trick right here.

Updating callback-style code to use async/await

Taylor Beeston ・ Jun 7 '20 ・ 3 min read

#javascript #tutorial #productivity

Basically, you create a new Promise that wraps around a function that relies on callbacks, then simply use resolve in the callback to magically 'promisify' that function!

You probably don't need body-parser in your Express apps

Taylor Beeston — Tue, 09 Jun 2020 02:33:44 +0000

What is body-parser?

Often, when I see a blog post or article describing an Express.js server, it usually starts out with something similar to the following:

npm init -y
npm i express body-parser

Followed by the classic

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());
// more express stuff

I used to have these four lines of code in practically every Express app I've ever made!

However, a few weeks ago I was poring over the Express Docs and noticed that as of version 4.16.0 (which came out three years ago!), Express basically comes with body-parser out of the box!

How do I use the Express version?

Well, you can pretty much just search bodyParser, and replace it with express!

This means our four lines of code above can be refactored into the following three lines of code:

const express = require('express');

const app = express();
app.use(express.json());

If you are using Babel (which I would highly recommend!), you can even use a named import to make the code even more concise:

import express, { json } from 'express';

const app = express();
app.use(json());

Updating callback-style code to use async/await

Taylor Beeston — Sun, 07 Jun 2020 18:05:11 +0000

The problem

If you have been programming in Javascript for a while, you may have run into some code that looks like the following

const example = (url, options) => {
  makeApiRequest((response, error) => { 
    if (error) console.log(error);
    console.log(response);
    // do something with response
  }, url, options);
};

This code uses a callback function to perform an asynchronous task.

The problem with writing asynchronous code like this is maintainability.

Code written below the call to makeApiRequest is executed before the code written in the callback function
Our additional arguments (url and options) appear after our callback function, which can be difficult to find
If we need more asynchronous code within in our callback, we will end up further indented
Error handling can become a total nightmare

In the olden days, this is how asynchronous code was written, and as a result of that, there are many libraries and methods that use callback functions like this, so it's fairly likely that you will run into async code using callback functions like this.

However, since the formal adoption of ES6, a better form of asynchronous code has become standardized: Promises. Promises allow us to write asynchronous code that is much more maintainable and easy to follow. If we could magically convert the above code to be Promise-based instead of using callbacks, it might look like this:

const example = (url, options) => {
  makeApiRequest(url, options)
    .then((response) => {
      console.log(response);
      // do something with response
    })
    .catch((error) => console.log(error));
};

This solves most of our maintainability issues with callback functions, and can be made even better with the Async/Await syntactic sugar standardized in ES8.

Using this syntax on our magically Promisified makeApiRequest method would look like this:

const example = async (url, options) => {
  try {
    const response = await makeApiRequest(url, options);
    console.log(response);
    // do something with response
  } catch (error) {
    console.log(error);
  }
};

Using async and await allows us to write code that looks synchronous, but actually performs asynchronous operations. Additionally, it prevents us from accidentally writing code that will happen before our async operation completes, and if we need to add more asynchronous code, we can write all of it in the same try block, making error handling much simpler.

Hooray! If only we could magically 'promisify' our old callback method...

The Solution

I am borrowing the term 'promisify' from the Node.js method that does just that. How does it work? By simply wrapping our old function within a Promise!

const response = await new Promise((resolve, reject) => {
  makeApiRequest((response, error) => {
    if (error) reject(error);
    resolve(response);
  }, url, options);
};

We can further improve this by making our own version of Node's promisify function:

const promisify = (oldFunction) => {
  return ((...args) => (
    new Promise((resolve, reject) => {
      oldFunction((response, error) => {
        if (error) reject(error);
        resolve(response);
      }, ...args);
    });
  ));
}

const makeApiRequestWithPromise = promisify(makeApiReqeust);

Just be aware that our promisify method is dependent on the order of arguments supplied by our makeApiRequest method. Due to that reason, I tend to avoid using a promisify method, and instead just inline the Promise code.

Finally, if you are promisifying a function that does not ever return an error, you can shorten this trick like so:

const example = async () => {
  console.log('3..2..1');
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log('Go!');
}

DEV Community: Taylor Beeston

Convert Hexadecimal and Binary in your head!

Why?

How?

Binary and hexadecimal?

Number Bases

Binary

Hexadecimal

The key relationship between hex and binary

Converting a single hex digit back and forth

Powers of 2

Filling in the other numbers

Going the other way

Speeding it up

Look for numbers that are +/- 1 from a power of 2

Think backwards from the top

Practice

Binary to hex

Hex to binary

Thank you

Resizing images client-side with vanilla JS

Table of Contents

Backstory

Code

Getting to work

The canvas element

Overview

Code

Overall Structure

Overview

Code

Scaling a canvas

Overview

Code

Conclusion

Please Note

Promisify?

Updating callback-style code to use async/await

Taylor Beeston ・ Jun 7 '20 ・ 3 min read

You probably don't need body-parser in your Express apps

What is body-parser?

How do I use the Express version?

Updating callback-style code to use async/await

The problem

The Solution