DEV Community: Zach Snoek

An Overview of CSS Positioning Schemes

Zach Snoek — Mon, 17 Jan 2022 16:30:02 +0000

Introduction

In this post, we’ll learn about positioning schemes, which we can use to change an element’s position.

This is a post in a series about topics covered in Josh Comeau's CSS for JavaScript Developers course. These posts will be brief, polished versions of my notes, and I'll write about new things I learned or deepen my understanding of something already familiar to me.

Quick reference

Static
Relative
Absolute
Fixed
Sticky

The position property

The position property allows us to specify a positioning scheme. It accepts the values: static, relative, absolute, fixed, and sticky.

static is the default value; an element with this value set is called a statically-positioned or non-positioned element. An element using a value other than static is called a positioned element.

Inset properties

position works with the inset properties top, right, bottom, and left to control the precise location of a positioned element.

Let’s take a closer look at each of these positioning scheme values.

Static

static is the default value for position, and it places the element in the normal flow of the document. Inset properties do not affect the element’s position.

Relative

The element gets placed in the normal flow of the document like static and inset properties offset it relative to itself. This offset does not affect the layout of other elements, and the element takes up space as if it were statically positioned. The offset acts as a cosmetic effect.

Absolute

absolute removes the element from the normal document flow and positions it relative to its nearest positioned ancestor. If there is no positioned ancestor, the element gets positioned relative to the initial containing block (the containing block of the root <html> element, a box the size and position of the viewport).

No space gets made for absolutely-positioned elements in the page layout; other elements act as if they do not exist.

Fixed

Fixed elements behave similarly to absolutely-positioned elements, but they are always positioned relative to the initial containing block. This causes the element to appear fixed on the page, regardless of scrolling.

Note that an element using the filter, perspective, and transform properties or the will-change: transform declaration becomes the containing block of any fixed descendants, causing the fixed elements to act absolutely-positioned. In other words, elements with these properties cannot have fixed descendants.

Sticky

sticky causes the element to act like a relatively-positioned element until it reaches a threshold, at which point it becomes fixed relative to its nearest scrollport (i.e., the closest ancestor that manages overflow) until its container goes out of view. Space is made for the element in the layout, even when it acts fixed.

The threshold is specified by the inset properties: for example, a sticky element with top: 10px would be relatively-positioned until the element is 10 pixels from the top of its nearest scrollport. Once that threshold is met, the element is fixed 10 pixels from the top of its nearest scrollport.

In this example, the box sticks to the viewport but is only sticky while its container is in view:

Positioning in the wild

I found it helpful to understand positioning by seeing its use in the real world. Here are a few examples of positioning types that I found.

Absolute: Facebook notification badge

This notification badge on Facebook uses absolute positioning to appear above the news icon:

Fixed: StackOverflow header

Headers commonly use fixed positioning to stick to the top of the page when the user scrolls:

Sticky: iPhone product page

Both the white “iPhone 13” header and product image on this page are sticky:

Relative

I couldn’t find a good example for relative positioning. Please suggest one!

Let's connect

If you enjoyed this post, connect with me on LinkedIn, GitHub, and Twitter! You can also subscribe to my mailing list to get the latest content and news from me.

References

Cover photo by Omar Flores on Unsplash.

Understanding box-sizing in CSS

Zach Snoek — Thu, 16 Dec 2021 05:29:58 +0000

Introduction

In this post, we'll learn about the CSS box-sizing property covered in module 1 of the course.

The box-sizing property

The box-sizing property determines how the width and height of an element are calculated. It accepts two values: content-box and border-box.

content-box

content-box is the default value of box-sizing. With this value, width and height are applied to an element's content box and do not include its padding and border.

Thus, the total width of an element will be the sum of its width and any horizontal padding and border. An element's height will be its height plus any vertical padding and border.

Take the following example:

The final width and height of the .box is 150 pixels: 100 + 2(20) + 2(5).

We can inspect the element in the dev tools to help us visualize this:

The content area remains 100x100 pixels and the padding and border are added around it.

border-box

With box-sizing: border-box;, the width and height properties include the size of the element's content area, padding, and border.

Here's what the previous example looks like with border-box instead:

And this is what the element looks like in the dev tools:

Notice that the padding and border remain the same size, but the content area is reduced, making the final width and height 100 pixels.

Here are the two examples side-by-side for comparison:

Resetting border-box

Sizing elements with content-box is unintuitive because it requires us to subtract or add values to get the desired width and height. Working with border-box is more natural: if we set an element's width to 500px then we know its final width will be 500 pixels.

You can use border-box sizing for all elements with the following CSS reset:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Test your knowledge

Check your understanding of box-sizing by figuring out the width and height of each .box in the following snippets.

#1

.box {
  box-sizing: border-box;
  height: 100px;
  border: 2px dotted;
}

What is the total height of this .box?

Click to reveal answer

100 pixels. The content area is reduced to include the border.

#2

.box {
  width: 40px;
  height: 40px;
  padding: 10px;
}

What is the total width and height of this .box?

Click to reveal answer

60x60 pixels. The content area does not include the padding, so we add that to the width and height.

#3

.box {
  box-sizing: content-box;
  width: 30px;
  height: 50px;
  margin: 10px;
  border: 3px dashed;
}

What is the content area of this .box?

Click to reveal answer

30x50 pixels.

#4

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 7px;
  border: 1px solid;
}

What is the content area of this .box?

Click to reveal answer

84x84 pixels: 100 - 2(7)- 2(1).

Summary

box-sizing controls how the width and height of an element are calculated. content-box is the default value and width and height are applied to an element's content area. border-box is more intuitive; the content area of an element is reduced to include any padding and border.

Let's connect

If you enjoyed this post, connect with me on LinkedIn, GitHub, and Twitter! You can also subscribe to my mailing list and get the latest content and news from me.

References

Cover photo by Fakurian Design on Unsplash.

Four tips for staying motivated while learning

Zach Snoek — Fri, 26 Nov 2021 22:11:40 +0000

Introduction

Software engineering is a field that is regularly changing. Thus, developers must be continual learners to stay sharp.

However, motivating yourself to learn and creating a lasting habit can be difficult, especially if you're self-studying outside of school or work. Below are four techniques that I use to stay motivated while learning.

Quick reference

Set deadlines
Gamify
Spice it up
Identify the end goal

1. Set deadlines

Learning without structure can feel like an endless task with no end in sight; it's often nice to have a sense of progress. I've found that artificial deadlines give me something to work toward and cleanly mark progress.

Here are some examples of deadlines you could set for yourself:

I will study Python for 30 minutes by the end of the day
I will complete one module of my online JavaScript course by Friday every week
I will finish two projects by the end of the month

Make sure to create manageable deadlines; experiment until you find something right for you. You may want to try a large interval at first and narrow it down until you find the sweet spot.

For example, when I first started blogging, I wanted to publish bi-weekly. I quickly realized that writing and researching a quality post in two weeks wasn't possible for me, so I changed to a monthly schedule.

2. Gamify

Deadlines aren't for everyone: you might have better luck incentivizing yourself through gamification.

For instance, you could implement a basic point system in which you earn a point every day you study SQL. You can use 14 points to treat yourself to a small meal or pay yourself five dollars. Or, you could reward yourself some other way when you've done something five consecutive days.

I find the most motivation from the Seinfeld method. The idea is that every day you do something––learning in some way, in our case––you put a red X through the day on a calendar. The more days you add X's, the longer the chain of X's gets; your goal is to "not break the chain." This method is essentially point-earning and provides an incentive for showing up consistently.

3. Spice it up

I've found it helpful to vary how I study the material. I find that learning through one medium can be tiring after a while. Temporarily switching the medium motivates me to keep learning.

If I'm learning one topic, I find a preferred, primary medium for studying it––typically text. I'll then augment this material with other media such as YouTube videos and podcasts.

For example, if I'm learning about prototypes in JavaScript, I'll spend most of my time reading Mozilla documentation or other articles. When I've absorbed that material, I'll watch various YouTube videos about prototypes and then try to write code and build something that uses them.

4. Identify the end goal

Finally, learn with a clear goal in mind, and use this goal to remind yourself why you're learning.

Why are you learning? Maybe you're preparing for a career change that will boost your income. Or perhaps you're learning in public to help others and gain credibility. (Upward mobility has been a good impetus for me.)

Remind yourself of this goal frequently: write it down on a sticky note attached to your computer or set a reminder on your phone; whatever is visible to you.

Most importantly, find a goal that motivates you when you're the most unmotivated. A resilient objective can carry you through the periods when you'd rather watch Netflix or stop learning.

Conclusion

All of these methods might not work for you, but hopefully, you've been able to pick up something helpful. Let me know in the comments if there's a motivation technique you use that I missed!

Let's connect

If you enjoyed this post, connect with me on LinkedIn, GitHub, and Twitter! You can also subscribe to my mailing list and get the latest content and news from me.

CSS em and rem units #CSSforJS

Zach Snoek — Thu, 04 Nov 2021 03:03:30 +0000

Introduction

This is my first post in a series about topics covered in Josh Comeau's CSS for JavaScript Developers course. These posts will be brief, polished versions of my notes. I'll write about new things I learned or deepen my understanding of something already familiar to me.

In this post, we'll explore the em and rem units in CSS, covered in module 0 of the course.

Ems

An em is a unit relative to the font-size of the current element. When used for the font-size property, an em is relative to the font-size of the parent element.

For example, if an element has a font-size of 16px and padding of 2em, the element's padding will be 32 pixels (16 x 2):

If an element has a font-size of 16px and its child has a font-size of 1.5em, the child's font-size will be 24 pixels (16 x 1.5):

If the element's font-size is not set, the closest ancestor with a font-size gets used. Note that browsers have a default font size of 16 pixels out of the box, so 1em is generally equal to 16 pixels.

ems are useful when scaling some property with the element's font-size. Consider the following .box class:

.box {
  width: 3em;
  height: 3em;
  padding: 2em;
}

To create small, medium, and large boxes with these same proportions, we can alter the font-size of each .box:

The compounding problem

Because ems are relative, the value of an em in descendant elements can compound. This can cause unexpected layout changes when a font size change ripples through descendant elements. For instance, if an element has a font-size of 2em and its child has a font-size of 1.5em, the child's font size is 48 pixels (16 x 2 x 1.5):

Rems

A rem, short for "root em," is like an em, but its value is relative to the root <html> tag. So, if the root font-size is 16 pixels, a value of 2rem is 32 pixels at every level in the DOM:

rems are always relative to the root element, so there isn't an issue with compounding. This makes them more predictable and consistent than ems:

We can use rems to scale values globally by only changing the root font-size. The following article has many font sizes specified in rems, and we can use a media query to change all the sizes by setting the root font-size:

Em and rem a11y benefits

Both ems and rems help make our sites more accessible by respecting the user's default font size, set in their browser's settings. Using a fixed unit such as px will override this setting, but em and rem will scale it. This makes rems particularly good for typography because we can scale the user's font size preference globally without em interference.

Summary

em and rem are relative units. An em is generally relative to the current element's font-size; when used for the font-size property, it's relative to its parent's font-size. A rem is relative to the root <html> element's font-size, which is usually 16 pixels. Take caution when using ems because of their compounding effect; rems are more predictable and increase accessibility by respecting the user's default font size.

Let's connect

Thanks for reading! If you enjoyed this post, connect with me on LinkedIn, GitHub, and Twitter! You can also subscribe to my mailing list and get the latest content and news from me.

References

How to build an HTTP-triggered function with Azure Functions

Zach Snoek — Sat, 09 Oct 2021 05:25:54 +0000

Introduction

Serverless computing is an architecture that allows developers to deploy code without provisioning and maintaining the backend infrastructure to support it. By abstracting servers, it allows us to focus on the code that we write and think less about hardware.

There are many serverless solutions from cloud computing providers such as Amazon Web Services, Google Cloud, and Microsoft Azure. In this tutorial, I'll show you how to create a serverless function with Azure Functions that's triggered with an HTTP request.

Prerequisites

Node.js installed
An Azure account (you can create an account for free here if you don't have one)

I'll show you how to write a function in TypeScript, so you should be familiar with TypeScript or JavaScript. Additionally, you should have experience with NPM, web APIs, and basic UNIX commands.

What is Azure Functions?

Azure Functions is a serverless service from Microsoft that allows us to write blocks of code called functions that run in response to an event, such as an HTTP request or IoT event. Instead of worrying about server operating systems and hardware that host our code, Azure handles the provisioning and maintenance of the hardware and infrastructure needed for us––all we do is write the function logic and deploy it.

Functions will automatically scale up and down based on demand, and Azure will only bill us for the time that our code is executed. This can help us save costs if our application has significant downtime: with traditional hosting, we would have to pay for a server that is always online.

Installing Azure packages for local development

To develop and deploy functions locally, we need to download two packages from Azure. Run the following commands to install Azure Functions Core Tools, a set of tools for developing and testing functions locally (installation instructions for Windows and Linux can be found here):

brew tap azure/functions
brew install azure-functions-core-tools@3

You can ensure that Core Tools is installed by running func --version which should output a version number like 3.x.x. Next, install Azure CLI (installation instructions for Windows and Linux can be found here):

brew install azure-cli

The Azure CLI provides commands for working with Azure resources and allows us to deploy our function to Azure.

Confirm that the CLI has been installed and sign in to Azure:

az login

If the Azure CLI is installed correctly, you'll be redirected to a page where you can sign in to your Azure account.

Creating the local function project

Now that we have the required packages installed, let's create a function project:

func init azure-tutorial --typescript
cd azure-tutorial

This command creates a local function project called azure-tutorial with some default configuration files. A function project contains one or more functions that share the same configuration.

Running ls will show the following files:

azure-tutorial/
├─ host.json
├─ local.settings.json
├─ package.json
├─ tsconfig.json

Let's briefly explore each of these:

host.json: Contains global configuration options shared by all of the functions in a function project. We won't be modifying the defaults in this tutorial, so you can read the host.json reference from Microsoft for more information.
local.settings.json: Stores local app and development tool settings. App settings and secrets, such as API keys and connection strings, can be added to the Values object and read in the function as environment variables. See the Microsoft docs for more information about the other supported local settings.
package.json: Contains the project's configuration. Note that we're given a build script to compile the TypeScript, a prestart script that runs build, and a start script that runs the function locally.
tsconfig.json: Default TypeScript compiler options.

Create the function from a template

Throughout this tutorial, we'll create a function named CreateUser that imitates a user registration endpoint. It will be triggered by a POST request containing username and password fields in the request body. Run the following command to scaffold a CreateUser function from the HTTP trigger template:

func new --name CreateUser --template "HTTP trigger" --authlevel "anonymous"

Running ls again will show a new function directory called CreateUser:

azure-tutorial/
├─ CreateUser/
│  ├─ function.json
│  ├─ index.ts
├─ host.json
├─ local.settings.json
├─ package.json
├─ tsconfig.json

This directory contains everything we need for a function: a function.json configuration file and the function's code. Open up your azure-tutorial directory in a text editor so we can start exploring these function files.

function.json

A function must have a function.json file, which contains its configuration information such as the trigger type and bindings. A function has exactly one trigger, which is an event that causes it to run.

A binding defines how we get data into our function or send it out of our function––it connects resources to the function. Bindings are added to the bindings array. For example, our function contains the following HTTP trigger input binding:

{
    "authLevel": "Anonymous",
    "type": "httpTrigger",
    "direction": "in",
    "name": "req",
    "methods": ["get", "post"],
},

The direction defines it to be an input binding, and name defines the name of the parameter passed to the function that contains the HTTP request data. Note that we've specified an anonymous authorization level to allow it to be triggered by anyone. You can read more about authorization levels in the Microsoft docs.

Similarly, we have an output binding that defines our output data:

{
    "type": "http",
    "direction": "out",
    "name": "res"
}

Here, name defines the property name on the context object returned from our function that contains the response data, which we will see shortly.

index.ts

This file exports a function named httpTrigger that Azure runs when the function is triggered. The HTTP request object is the req parameter (defined by the input binding's name property in function.json), and a context object is passed through the context parameter when the function is run.

The default function code provided for us allows us to specify a name in the query parameters or request body. When run, it creates a response message and sets the response on the context object's res property, which was defined in function.json.

Testing the default function locally

The boilerplate that we've just explored is a working function that we can make requests to locally. Let's ensure that everything is working properly by running it and making a request to its CreateUser endpoint.

In the root directory, install the project's NPM dependencies:

npm i

We can now start the function with npm start, which will compile the TypeScript and start a local server. This command should show the following output:

...
Functions:

        CreateUser: [GET,POST] http://localhost:7071/api/CreateUser
...

By default, HTTP-triggered functions are available at the /api/<function name> endpoint. Make a test GET request to our function with the following curl command:

curl http://localhost:7071/api/CreateUser?name=<your name>

This request should return a response like "Hello, Zach. This HTTP triggered function executed successfully." We can also test out the POST request with this command:

curl -i http://localhost:7071/api/CreateUser -d '{"name": "<Your name>"}'

Great! You've created a local function project with a working function. Let's see what else we can do with our HTTP trigger by updating it to do something a little more useful.

Configuring the function to accept POST requests

By default, our HTTP input trigger accepts both GET and POST methods, but our CreateUser function should only allow a POST request. Let's fix this by removing the GET method from the input binding's method property, which is an array containing the function's allowed HTTP methods:

{
  "bindings": [
    {
      "authLevel": "Anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["post"]
    },
    ...
  ],
  ...
}

While we're here, let's make the name of our function's endpoint RESTful and name it /api/users instead of /api/CreateUser. We can specify a custom name by setting the route property of the input trigger:

{
  "bindings": [
    {
      "authLevel": "Anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["post"],
      "route": "users"
    },
    ...
  ],
  ...
}

After restarting the function, you should see output to indicate that the CreateUser function is triggered by the /api/users endpoint now and only accepts POST requests:

...
Functions:

        CreateUser: [POST] http://localhost:7071/api/users
...

Writing and testing the function

We've got our function bindings configured, so let's replace the generated function with our own code. As mentioned earlier, our function will take in a username and password in the request body. We'll also want to return the created user object as JSON and send a 201 response code to indicate that a user was created.

In index.ts, rename the function from httpTrigger to createUser and delete all of the code within the function body. Your file should look something like this:

import { AzureFunction, Context, HttpRequest } from "@azure/functions";

const createUser: AzureFunction = async function (
    context: Context,
    req: HttpRequest
): Promise<void> {
    // TODO: Implement
};

export default createUser;

Next, add the following code to the function body:

const { username, password } = req.body;

const user = { username, password };

// In real life, we'd add the user object to our database here

context.res = {
    status: 201,
    headers: {
        "Content-Type": "application/json",
    },
    body: user,
};

We simply construct a user object from the request body and return that object in the response body with the appropriate status code and header. Restart the function and make a POST request with a username and password:

curl -i http://localhost:7071/api/users -d '{"username": "foo", "password": "bar"}'

The response will have {"username": "foo", "password": "bar"} in the body and a 201 status code.

In real life, though, we'd probably want to add some request validation that requires the caller to provide both a username and password. If the user provides invalid input, we should return a 400 status code and a helpful error message. Replace the function body with this updated implementation:

let responseStatus: number;
let responseBody: {
    user?: { username: string; password: string };
    error?: string;
};

const { username, password } = req.body;

if (username && password) {
    responseStatus = 201;
    responseBody = { user: { username, password } };
} else {
    responseStatus = 400;
    responseBody = { error: "Missing username or password." };
}

context.res = {
    status: responseStatus,
    headers: {
        "Content-Type": "application/json",
    },
    body: responseBody,
};

Now, restart the function and make a request without a username or password. For example:

curl -i http://localhost:7071/api/users -d '{"username": "foo"}'

You should get a 400 response code and a response containing {"error": "Missing username or password"}.

That's it for the function. Now, let's get ready to deploy the function to Azure.

Creating Azure resources for deployment

To deploy our function, we need to create an Azure resource group, storage account, and function app. A resource group is a container for Azure resources, and a storage account stores a function's state, code, and configuration files.

You'll want to create the resource group and storage account in a region that's close to you to reduce latency. You can list the regions available to you by running az account list-locations:

az account list-locations --query "[].{Region:name}" --out table | less

For instance, I live in Washington, United States, so I'll use the westus2 location.

The next few commands require us to repeat a lot of configuration information, so set the following environment variables that we can use later on:

REGION=<your region>                       # The region you chose above
RESOURCE_GROUP_NAME=azure-tutorial-rg      # The name of the resource group
STORAGE_ACCOUNT_NAME=<your unique name>    # The name of the storage account
FUNCTION_NAME=<your unique name>           # The name of the function app in Azure

Create a resource group with the following command:

az group create --name $RESOURCE_GROUP_NAME --location $REGION

Next, create the storage account:

az storage account create --name $STORAGE_ACCOUNT_NAME --location $REGION --resource-group $RESOURCE_GROUP_NAME --sku Standard_LRS

Note that storage account names need to be globally unique; an ambiguous error message could mean that the storage name is unavailable. You can check if your name is available by running az storage account check-name --name $STORAGE_ACCOUNT_NAME.

Now we can create our function app in Azure:

az functionapp create --name $FUNCTION_NAME --resource-group $RESOURCE_GROUP_NAME --storage-account $STORAGE_ACCOUNT_NAME --consumption-plan-location $REGION --runtime node --runtime-version 12 --functions-version 3

Like storage accounts, function names need to be unique in Azure.

When the command completes, you can ensure that the function was created by listing your function apps:

az functionapp list --out table

Deploying the function to Azure

We're now ready to deploy our function! First, create a production build of our app:

npm run build:production

We can now deploy the function with the following command:

func azure functionapp publish $FUNCTION_NAME

Once the deployment succeeds, you should see the following output:

...
Functions in <function name>:
    CreateUser - [httpTrigger]
        Invoke url: https://<function name>.azurewebsites.net/api/users

The "Invoke url" in the output is the URL that triggers our function. Copy the URL and test out the requests we made locally:

curl -i <invoke URL> -d '{"username": "foo", "password": "bar"}' # returns a 201
curl -i <invoke URL> -d '{"username": "foo"}' # returns a 400

Conclusion

Congrats! You've created and deployed your own function to Azure. Now that you've used an HTTP trigger, I encourage you to check out the Azure Functions documentation and explore other types of function triggers.

Let's connect

If you enjoyed this post, connect with me on LinkedIn, GitHub, and Twitter! You can also subscribe to my mailing list and get the latest content and news from me.

References

Build a meme generator with JavaScript and Fabric.js

Zach Snoek — Wed, 01 Sep 2021 21:16:39 +0000

Introduction

Memes are great: We can use them for humor, cryptocurrency, and even for learning JavaScript! In this tutorial, I'll show you how to make a meme generator with JavaScript and Fabric.js that lets you customize templates from three popular memes: Doge, Daily Struggle, and Philosoraptor. Users will be able to select one of the templates, edit and move the text fields, then download their creation. Here's what it looks like in action:

At the end of this tutorial, I'll give you some ways that you can extend this project and make it your own.

Prerequisites

This is a JavaScript-focused tutorial; you should have experience with:

Basic HTML and CSS
JavaScript fundamentals
Basic DOM manipulation

Having some knowledge of the <canvas> element and the Canvas API is helpful but not required. I would recommend giving the MDN Canvas API docs a glance before continuing.

What is Fabric.js?

The HTML <canvas> element and Canvas API allow us to draw graphics in the browser with JavaScript. However, the Canvas API is low-level and can be difficult to work with. This tutorial will introduce Fabric.js (Fabric), which is one of the many libraries that make working with the Canvas API easier. Our meme generator will use Fabric to render the template images and text fields on the canvas, and to export it to an image that we can download.

One benefit of Fabric is its object model for interacting with canvas elements. For instance, this is how we could create a rectangle using the native API:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 400, 200);

With the native API, we manipulate the canvas through a context object representing the entire canvas. With Fabric, we operate on objects within the canvas. Here's how we would create the same rectangle and add it to the canvas with Fabric:

const canvas = new fabric.Canvas("canvas");

const rect = new fabric.Rect({
    top: 0,
    left: 0,
    width: 400,
    height: 200,
    fill: "blue",
});

canvas.add(rect);

Fabric's API is easier to use and understand, even in this simple example. Additionally, Fabric provides many features that the Canvas API lacks, such as additional built-in shapes, an interactivity layer, and object grouping.

Cloning the starter code

To keep this tutorial focused on JavaScript and Fabric, I've created a starter-code branch in the tutorial's GitHub repository that contains the HTML and CSS for the project, as well as the meme template data. The completed project can be found on the main branch.

Run the following commands to clone the repository, check out the starter-code branch, and move into the repository:

$ git clone -b starter-code https://github.com/zachsnoek/meme-generator.git
$ cd meme-generator

Go ahead and open the new meme-generator directory in your text editor. You should see the following directories and files:

meme-generator/
├─ css/
│  ├─ styles.css
├─ img/
│  ├─ placeholder.jpg
├─ js/
│  ├─ meme-templates.js
├─ index.html

Live Server

I recommend using VS Code as your text editor with the Live Server extension when working through this tutorial. You can simply open index.html and hit alt+L on Windows or cmd+L on macOS to start a local development server, and the server will automatically reload whenever a change in the project has been made.

Exploring the starter code

index.html

This is our simple HTML file for the project. The <div> with the template-selectors ID is where the template selector buttons––the buttons that allow you to switch templates––will be rendered by our JavaScript. We'll add an event listener to the <button> so that our templates can be downloaded, and the <canvas> element is where we'll render our templates.

css/styles.css

The styles for this project are pretty simple, but I do want to point out the .selected-template CSS class. When a template selector button is clicked, we'll apply this class to the button to indicate the currently selected template.

img/

This directory will contain all of the meme background images for our templates. I'll leave it up to you to download the images and place them in img with the filenames listed below:

(placeholder.jpg is not needed; you can safely delete this image.)

Exploring the meme templates

When our meme generator is loaded and when we select a template, we will render a template on the canvas. Each template is a JavaScript object that contains metadata about the meme, such as the background image and text fields. Fabric will use this information to render the template on the canvas. All of the templates are exported as an array from js/meme-templates.js:

export default [
    {
        name: "Doge",
        backgroundUrl: "img/doge.jpg",
        width: 640,
        height: 480,
        textFields: [
            {
                text: "Wow",
                fill: "#fff",
                fontFamily: "Comic Sans MS",
                left: 18,
                top: 60,
            },
            // ...
        ]
    },
    // ...
];

Let's break down the properties in our template objects:

name: The template's display name shown in the selector.
backgroundUrl: The path to the template's background image. We store all of the images locally in img for this tutorial.
width: The width of the image in pixels. This is used for setting the canvas' size.
height: The height of the image in pixels. This is used for setting the canvas' size.
textFields: An array containing objects that describe the individual text fields to render. text is the text to display in the field the the other properties are used to style the text.

Accessing the canvas with Fabric.js

Now that we understand the provided code and templates, let's get started by accessing the canvas. We'll first need to create a JavaScript file for all of our meme generator's code. Create a file in js named index.js, and add a <script> tag in index.html to refer to it:

<body>
    <!-- ... -->
    <script src="./js/index.js" type="module"></script>
</body>

Next, we need to load Fabric from the CDN by adding another <script> tag above the one we just added:

<body>
    <!-- ... -->
    <script
        type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"
    ></script>
    <script src="./js/index.js" type="module"></script>
</body>

Now we can create a fabric.Canvas object to access the canvas. Add the following line to the top of index.js:

const canvas = new fabric.Canvas("canvas");

fabric.Canvas is a wrapper around the <canvas> element and it manages all of the Fabric objects on the canvas. It also allows us to configure canvas settings such as the size and background color.

Let's make sure we've accessed the canvas properly by adding the following code to set the canvas' width, height, and background color:

canvas.setWidth(500);
canvas.setHeight(500);
canvas.setBackgroundColor("red");

If you open index.html in your browser or start Live Server, you should see a square, red canvas.

Rendering a meme template

We've verified that we can access the canvas using Fabric, so let's create a function called renderTemplate that will render a meme template on the canvas. When a selector is clicked, we'll pass the corresponding template's metadata (from meme-templates.js) to the function.

Add the following function declaration in index.js:

const canvas = new fabric.Canvas("canvas");

function renderTemplate(template) {

}

template will be one object from our template metadata array. Next, we'll get the data needed for the canvas by destructuring the template object:

function renderTemplate(template) {
    const { width, height, backgroundUrl, textFields } = template;
}

The rest of this function will be responsible for setting the canvas' dimensions, setting the background image, and adding the meme's text fields.

Setting the canvas' dimensions is straightforward with Fabric's canvas.setDimensions API:

function renderTemplate(template) {
    const { width, height, backgroundUrl, textFields } = template;

    canvas.setDimensions({ width, height });
}

This will ensure that the canvas is the same size as the background image. Next, we'll set the background image with canvas.setBackgroundImage and give it two arguments: The URL of the image and a callback to call when the image is loaded. In our case, the template's URL points to an image in the img directory and the callback will re-render the canvas:

canvas.setBackgroundImage(backgroundUrl, canvas.renderAll.bind(canvas));

Lastly, we need to create the meme's text fields and add them to the canvas. We'll use Fabric's IText class, which allows us to create interactive text fields that we can reposition, resize, and edit on the canvas directly. The IText constructor also accepts an options object with options such as the text's font family, size, and color; these options correspond with the properties in the text field objects in our textFields arrays.

Our text field objects have the text property and other style options on one level, but IText's constructor expects the text and options to be two different arguments. To fix this, let's map over our template's textFields to create an array of IText objects, then add them to the canvas using canvas.add:

const iTextFields = textFields.map(
    ({ text, ...options }) => new fabric.IText(text, options)
);
canvas.add(...iTextFields);

Let's verify our implementation of renderTemplate by importing our meme templates and passing the first value to it:

import templates from "./meme-templates.js";

const canvas = new fabric.Canvas("canvas");

function renderTemplate(template) {
    // ...
}

renderTemplate(templates[0]);

If all goes well, you should see a nice Doge in your browser:

Try moving around the text fields and editing the text. Fabric gives us this functionality without much effort on our end.

Creating the template selectors

Next, let's add the ability to create selector buttons for each of our templates so that our users can edit different memes:

We'll create a function called createSelector , and it will return a <button> that will render a template when clicked.

In index.js, add the createSelector function declaration that takes a template object as an argument, creates a <button> element, and returns it:

import templates from "./meme-templates.js";

const canvas = new fabric.Canvas("canvas");

function createSelector(template) {
    const selector = document.createElement("button");

    return selector;
}
// ...

We want to identify the template that this button renders, so set the text of the button to be the template's name:

function createSelector(template) {
    const selector = document.createElement("button");

    selector.innerText = template.name;

    return selector;
}

To actually render the template on click, we'll add a click handler that calls renderTemplate and adds the .selected-template class to the current element. Since there will be multiple template selectors, we also need to remove the .selected-template class from the previously-selected button. Your click handler should look like something like this:

function createSelector(template) {
    const selector = document.createElement("button");

    selector.innerText = template.name;
    selector.onclick = function () {
        document
            .querySelector(".selected-template")
            .classList.remove("selected-template");
        this.classList.add("selected-template");
        renderTemplate(template);
    };

    return selector;
}

Great! Next, we'll actually create the selectors for all of our templates and render the first template.

Rendering the template selectors and the initial template

When the generator loads, we want to create template selectors for all of the templates, add them to the DOM, and render the initial template. The selector elements will be added within the aforementioned <div> with the template-selectors ID; let's start by grabbing that element:

import templates from "./meme-templates.js";

const canvas = new fabric.Canvas("canvas");
const selectorsContainer = document.getElementById("template-selectors");
// ...

Next, for each template, create a selector for it and add it to the selectors container:

const selectorsContainer = document.getElementById("template-selectors");

for (const template of templates) {
    const selector = createSelector(template);
    selectorsContainer.appendChild(selector);
}
// ...

Lastly, we need to render the first template and add the .selected-template class to its selector:

selectorsContainer.firstChild.classList.add("selected-template");
renderTemplate(templates[0]);

When you refresh the page, you should see selectors for all of the templates and the first template rendered in the canvas. Clicking each selector should render its template:

You'll notice that the text fields aren't removed when a new template is selected. To fix this, we need to clear the canvas before a template is rendered. In renderTemplate, call canvas.clear before adding anything to the canvas:

function renderTemplate(template) {
    const { width, height, backgroundUrl, textFields } = template;

    canvas.clear();
    // ...
}

Clicking each selector should now render the template as expected.

Adding a download button

Being able to customize our own meme templates is great, but it'd be nice if we could share them with others. I've added a <button> with an ID of download in the starter code; we'll attach a click handler to it that will create an <a> element with the canvas' data and then click it programmatically to download the image to the user's computer:

const downloadButton = document.getElementById("download");
downloadButton.addEventListener("click", () => {
    const link = document.createElement("a");
    link.href = canvas.toDataURL();
    link.download = `meme-generator-${new Date().getTime()}.png`;
    link.click();
});

This code creates a temporary link element and sets its href property to a data URL of the canvas exported as a PNG. We then set the filename of the download and click the link.

If you customize a template and click the download button, you should see a file with the name meme-generator-<current time>.png in your downloads folder:

Conclusion

Congratulations! You've created your very own meme generator. I hope you enjoyed this tutorial and learned a bit about memes and Fabric.js.

Where to go from here

The meme generator we've created is fairly simple and could be modified for additional template customization. Below are some ideas to extend this project:

Add ability to add and remove text fields
Add ability to change text styles such as font family, color, and outline
Persist the state of each template in local storage
Let users upload their own background image
Add support for template styles that aren't simple text over background image

If you're interested in learning more about Fabric.js, I recommend starting with their Introduction to Fabric.js tutorials.

Let's connect

If you enjoyed this post, connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.

References

Original meme image sources

Using local NPM packages as dependencies with yalc

Zach Snoek — Sat, 14 Aug 2021 23:32:15 +0000

Introduction

If you develop NPM packages, you may need to use a local version of a package as a dependency of another. For example, say you have two packages, package-a and package-b, where package-a depends on package-b. You've made changes to package-b and want to test them out in package-a without publishing package-b to NPM.

yalc solves this problem by allowing you to publish your local dependencies to a local store and make them available for use in dependent projects.

Immediately below are quick start instructions for easy reference. If you're interested in what yalc commands do under the hood, continue to How it works.

Quick start

Note: package-a is the local dependent package and package-b is the local dependency package.

1. Install yalc globally

$ npm i -g yalc

2. Publish your dependency to the yalc store

[package-b] $ yalc publish

3. Add the yalc-stored dependency to your dependent project

[package-a] $ yalc add package-b

3a. Install the dependencies of the dependency if they aren't already installed

[package-a] $ npm i

4. After making changes to your dependency, update the package in the store and push the changes to the dependent project

[package-b] $ yalc push

5. Remove the dependency from the dependent project

[package-a] $ yalc remove package-b

How it works

When using yalc to add a local package as a dependency, you first publish the dependency to the yalc store and add it to the dependent project. You can then update the dependency and eventually remove it from the dependent project.

Publishing

To add your dependency to the yalc store, run yalc publish. This will make a copy of the package in the store, which is located at ~/.yalc. yalc will also compute the hash signature of the package's files and store it in the store to verify that the correct version of the package is added to other projects.

Adding

yalc add <dependency> in your dependent project adds the package published in the store to your project. yalc will pull the package into the project and place it in .yalc, and will update the dependency entry in the project's package.json to point to the local copy.

For example, running yalc add package-b in package-a will create a copy of the dependency at package-a/.yalc/package-b. package-a's package.json will have a dependency entry for package-b that points to file:./yalc/package-b.

yalc add will also create a yalc.lock file in the dependent project that fixes the dependency to the version in the store using the signature created with yalc publish.

Note that yalc doesn't install dependencies of the local yalc package; run npm i after adding your dependency if it has any dependencies that are not installed.

Updating

If you've made changes to your dependency that need to be updated in the dependent project, run yalc push in the dependency project. This will publish the updated dependency to the store and update the changes in the dependent project.

Alternatively, you can run yalc publish in the dependency and then run yalc update in the dependent project.

You'll need to run npm i again in the dependent project if the dependencies of the dependency have changed.

Removing

Once you have no further use for the local dependency in your project, you can remove it with yalc remove <dependency>. This will remove the dependency stored in .yalc and the yalc information in yalc.lock and package.json.

Conclusion

yalc makes it easy to use locally-developed packages in other projects. It has some other useful options that I didn't mention here; read more about them on the project's README. Hopefully, this helps you get started developing with local packages––good luck!

Let's connect

If you enjoyed this post, connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.

References

Cover photo by Joshua Hoehne on Unsplash

Making list formatting easy with Intl.ListFormat

Zach Snoek — Thu, 22 Jul 2021 01:05:12 +0000

Introduction

Let's say you have an array containing your favorite dog breeds:

const favoriteDogs = ['Corgi', 'German Shepherd', 'Goldendoodle'];

Your goal is to format that list as a string like "Corgi, German Shepherd, and Goldendoodle." One option is to write a basic utility function like this:

function formatList(list) {
    if (!list?.length) {
        return "";
    }
    if (list.length === 1) {
        return list.toString();
    }
    if (list.length === 2) {
        return list.join(' and ');
    }

    return list.slice(0, -1).join(', ') + ', and ' + list.slice(-1);
};

But we'd need to make modifications if we wanted to use or instead of and, omit the Oxford comma, or handle different languages. Instead, let's see how we can use Intl.ListFormat to have JavaScript do this heavy lifting for us.

Intl.ListFormat

Intl.ListFormat replaces formatList with a couple of lines of code:

const lf = new Intl.ListFormat('en');
lf.format(favoriteDogs);
// > Corgi, German Shepherd, and Goldendoodle

Intl.ListFormat comes from Intl, which is a built-in object that provides language-sensitive functions. We've provided en (English) as the locales argument, which formats the list based on the language or region.

This gives us a lot of localization power with little effort. For instance, we can specify zh for traditional Chinese and let it localize the conjunction and punctuation for us:

const lf = new Intl.ListFormat('zh');
lf.format(['咖啡', '茶', '可樂']);
// > 咖啡、茶和可樂 (Coffee, tea and coke)

Other formatting options

We can optionally specify a second options argument that has a style and type property. style is the length of the output and can be long (the default), short or narrow:

new Intl.ListFormat('en', { style: 'short' }).format(favoriteDogs);
// > Corgi, German Shepherd, & Goldendoodle
new Intl.ListFormat('en', { style: 'narrow' }).format(favoriteDogs);
// > Corgi, German Shepherd, Goldendoodle

type describes the list type, which is conjunction (and-based) by default. It can be used to make our list disjunctive or suitable for units:

new Intl.ListFormat('en', { type: 'disjunction' }).format(favoriteDogs);
// > Corgi, German Shepherd, or Goldendoodle
new Intl.ListFormat('en', { type: 'unit' }).format(['6 feet', '2 inches']);
// > 6 feet, 2 inches

Conclusion

Instead of writing a list formatting function, consider using Intl.ListFormat. There are a lot of other useful functions from Intl, too; check them out at MDN.

Thanks for reading!

References

Let's connect

If you enjoyed this post, connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.

Converting values to boolean using !! (double NOT)

Zach Snoek — Thu, 01 Jul 2021 02:23:21 +0000

Something I come across working in JavaScript and React projects is the use of two logical NOT operators to coerce a value to its corresponding boolean value. This might look strange or confusing at first, so let's see how it works and why you may (or may not) use it.

The logical NOT operator (`!`)

In JavaScript, all values are either truthy or falsy:

let x;

x = "JavaScript";  // truthy
x = "";            // falsy
x = {};            // truthy
x = 0;             // falsy

Using the logical NOT operator (!), we can convert a truthy value to false and a falsy value to true:

let x;

x = !"JavaScript";  // false
x = !"";            // true
x = !{};            // false
x = !0;             // true

! always returns a boolean value: It first converts the truthy or falsy value to its corresponding boolean value (truthy corresponds to true and falsy to false), then returns the negated boolean. For example, !{} first converts {} to true and then returns the opposite of true, which is false.

The double NOT (`!!`)

You might come across a situation where you want to use a non-boolean value as a boolean. A double NOT (!!) allows us to succinctly convert a non-boolean value to its corresponding boolean value:

let x;

x = !!"JavaScript";  // true
x = !!"";            // false

With our knowledge of how the logical NOT operator works, we can see how this makes sense. Take !!"JavaScript", for instance:

"JavaScript" is truthy, so it is converted to true
The first ! converts true to false
The second ! converts false to true

Note that !! is not an operator––it's just two logical NOT operators chained together. In fact, we can use as many !s as we like (and make our JavaScript look like it's gone into expletive mode):

const x = !!!!!"s***"; // false

Using `!!`

I don't often use !!, but I think there are a few instances where it can be useful. Consider a function that performs logic on non-boolean values that we want to ensure returns a boolean value:

function isValidUser(user: { name: string; bio: string }) {
    return !!(user.name && user.bio); // ...
}

We can also use !! as a shortcut for checking if a list has any elements; this is something I often see in React:

function FruitDisplay({ fruit }) {
    const hasFruit = !!fruit.length;

    return (
        hasFruit && (
            <>
                <h3>Available fruit:</h3>
                <ul>
                    {fruit.map((f) => (
                        <li>{f}</li>
                    ))}
                </ul>
            </>
        )
    );
}

function App() {
    const fruit = ["apple", "orange", "grape"];
    // ...
    return (
        <FruitDisplay fruit={fruit} />
        //...
    );
}

However, it's often argued that !! decreases readability and is used in situations that could be refactored to be more explicit. In our previous list length example, I'd argue that checking for > 0 or !== 0 is more clear:

function FruitDisplay({ fruit }) {
    const hasFruit = fruit.length > 0; // or fruit.length !== 0
    // ...
}

And it's worth noting that using the built-in Boolean function does the same thing as !! and is arguably more readable and easier to understand:

let x;

x = !!"" === Boolean("");                      // true
x = !!"JavaScript" === Boolean("JavaScript");  // true

Conclusion

The double NOT allows us to convert truthy and falsy values to their corresponding boolean value: truthy values become true and falsy values become false. It's a concise way to coerce any value to a boolean but can also sacrifice readability.

Do you like to use !!? What situations do you find it useful or harmful? Let me know your thoughts below!

References

Let's connect

If you liked this post, come connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.

Understanding JavaScript Prototypes

Zach Snoek — Tue, 18 May 2021 03:40:02 +0000

Introduction

When you first learned JavaScript, you might have started by writing something simple like creating a string primitive:

const hello = "Hello, world!";

You likely even learned how to use split to turn that string into an array of substrings:

const parts = hello.split(",");
console.log(parts); // output: ["Hello", " world!"]

You didn't implement split yourself, though. Instead, split is defined on hello's prototype object, which comes from String. Prototypes are JavaScript's method of inheritance and it allows properties to be shared across all object instances.

Prototypes

All JavaScript objects have a prototype, which is an object that it inherits properties from. This prototype object is a property on the constructor function that the inheriting object was created from, and the inheriting object links to it.

An object's prototype can have its own prototype, and that prototype can have its own prototype; this prototype chain continues until a prototype points to null, which is the end of the chain. Most objects are instances of Object, so the prototype chain will eventually link back to Object's prototype property, which is null.

This diagram, modified from MDN and created with Excalidraw, shows one way you can think about the prototypal inheritance of hello:

The `prototype` property and an object's prototype

A constructor function defines the prototype object on its prototype property; this is the object that all inheriting objects will link to. For example, to see all of the properties inherited by instances of String, we can log String.prototype:

console.log(String.prototype);

Output:

{
    anchor: ƒ anchor()
    big: ƒ big(),
    ...
    split: ƒ split()
    ...
    __proto__: Object
}

To access the prototype of an object, we can call Object.getPrototypeOf(obj) or use the __proto__ property of the object in many web browsers. Since hello is an instance of String (or, coerced to String at runtime), we should expect to see it linked to the prototype object defined by the String constructor function:

console.log(Object.getPrototypeOf(hello));

Output:

{
    anchor: ƒ anchor()
    big: ƒ big(),
    ...
    split: ƒ split()
    ...
    __proto__: Object
}

The prototype chain

We've discussed what prototypes are and how instances link to them, but how does this allow objects to inherit properties? To find the property of an object, JavaScript will "walk up" the prototype chain. First, it will look at the calling object's properties. If the property is not found there, it will look at its prototype's properties. This continues until the property is found or the end of the prototype chain is reached.

An instance of String is an object that inherits from Object, so String's prototype is the prototype defined on Object's constructor function. Because of this, we can access the properties defined on Object's prototype such as toLocaleString:

console.log(hello.toLocaleString()); // output: "Hello, world!"

When we called hello.toLocaleString(), JavaScript:

Checked for the property on hello and did not find it
Checked hello's prototype, the prototype object defined by String, and did not find it
Checked String's prototype, the prototype object defined by Object, and did find it

Note: MDN is a handy way to tell which properties are defined on the prototype of built-in objects. For instance, the Array page links to documentation for all of the different properties, such as map and pop, that are defined on Array.prototype.

Walking the prototype chain in JavaScript

We briefly saw a simple graphical representation of hello's prototype chain earlier. Now that we know how to access an object's prototype, we can write our own function to show the chain programmatically:

function walkPrototypeChain(obj) {
    let current = Object.getPrototypeOf(obj);

    while (current) {
        console.log("Inherits from:", current.constructor.name);
        console.dir(current);

        const next = Object.getPrototypeOf(current);
        current = next;
    }

    console.log("Reached of prototype chain:", current);
}

Note: current.constructor.name is the name of the constructor function that defines the prototype.

If we run this in the browser with hello, we get the following output:

Extending a prototype

We can easily define our own properties on a constructor function's prototype property. Let's say we have a program that creates many arrays that we commonly want to ensure only contain truthy values. We can define a whereNotFalsy property on Array's prototype to make this available on every array we create:

Array.prototype.whereNotFalsy = function () {
    return this.filter((x) => x);
};

Now we can call whereNotFalsy on the subsequent arrays we create:

const hasFalsyValues = ["", "Hello, world!", null];

console.log(hasFalsyValues.whereNotFalsy()); // output: ["Hello, world!"]

Conclusion

Prototypes allow objects to inherit shared properties. An object's prototype refers to the object that it inherits properties from. This prototype object is defined on the prototype property of the constructor function that
creates it. Inheriting objects contain a link to the prototype object and it can be accessed through the __proto__ property in web browsers or by calling Object.getPrototypeOf in other contexts.

When an object's property is accessed, JavaScript first checks its own properties, then walks its prototype chain to find the property––this is how objects are able to inherit properties through prototypes. Lastly, we can directly modify the prototype of a constructor function by accessing its prototype property, which will affect all inheriting objects.

References

Cover photo by Daniel McCullough on Unsplash

Let's connect

If you liked this post, come connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.

An introduction to constructor functions

Zach Snoek — Mon, 19 Apr 2021 15:05:36 +0000

Overview

If you're new to JavaScript and have experience in a class-based object-oriented language, you might be wondering how you can create custom objects in JavaScript. In this post, you'll learn about constructor functions, which is one method of creating user-defined objects and function similarly to classes.

To fully understand this post, you should be familiar with JavaScript and have a basic understanding of JavaScript functions and objects.

The `Car` object

We'll be creating a constructor function to create Car objects. Here's how an object representing a 1999 Honda Accord might look like if we defined it using object literal syntax:

const accord = {
    make: "Honda",
    model: "Accord",
    bodyStyle: "sedan",
    year: "1999",
};

console.log(
    `This ${accord.make} ${accord.model} ${accord.bodyStyle} was built in ${accord.year}.`
);

// Output: "This Honda Accord sedan was built in 1999."

If we just have some one-off car object that we need to make, this would be fine. But if you need to represent a lot of different cars, it would be nice to have a way to reuse common Car properties. This is where constructor functions come in.

Creating a constructor function

A constructor function is a function that creates a new object. Creating it is similar to creating any other function in JavaScript: it can have parameters, has a name, and is declared with the function keyword. We'll create a Car constructor function that takes in the make, model, bodyStyle, and year as arguments; here is what it looks like without its body implemented:

function Car(make, model, bodyStyle, year) {
    // TODO: Set properties
}

Note: By convention, constructor functions start with a capital letter (Pascal case) so that we properly initialize them and don't confuse them with non-constructor functions.

We can set the properties of our custom object by defining them on this, which will refer to the new object that is created:

function Car(make, model, bodyStyle, year) {
    this.make = make;
    this.model = model;
    this.bodyStyle = bodyStyle;
    this.year = year;
}

This almost looks like typical class syntax from an object-oriented language, but it's a function––and we're not returning anything. So what's happening here? To understand this, let's look at how we create an instance of our Car.

Creating an instance of Car with `new`

Creating an instance of Car is like calling a normal JavaScript function, but we also use the new keyword before the function name. You may be familiar with this syntax if you've used a class-based language such as Java or C#. Here's how we create an instance of the same accord defined earlier but with our new constructor function:

const accord = new Car("Honda", "Accord", "sedan", "1999");

Now that we know how to create a Car object, let's clarify how this is working. When we call a constructor function with new, JavaScript will:

Create a new, empty object
Call the constructor function with the value of this pointing to the new object
- Thus, the properties specified on this in the function will be set on the new object
Return the new object

Under the hood, this process looks similar to this:

// Create a new object
const obj = {};

// Call Car, with the value of `this` being the new `obj` object
Car.apply(obj, ["Honda", "Accord", "sedan", "1999"]);

// Return obj

Adding a method

Just having a property for the car's model year probably isn't that interesting. Let's create a method that will return a car's age. To do this, we'll add a getAge property on Car's prototype property. It will be a function that returns the age as a number:

Car.prototype.getAge = function () {
    return new Date().getFullYear() - this.year;
};

Simply put, properties on an constructor function's prototype property are inherited by every instance. But why can't we just define getAge as a property of Car? Here's what that looks like:

function Car(make, model, bodyStyle, year) {
    this.make = make;
    this.model = model;
    this.bodyStyle = bodyStyle;
    this.year = year;

    this.getAge = function () {
        return new Date().getFullYear() - this.year;
    };
}

This is valid and will give you the same behavior. However, this creates a getAge function every time a new Car is created. By placing the property onto Car's prototype, we can share one reference to the function across all instances. (This is not very useful in our example, but is important to be aware of.)

Conclusion

Constructor functions in JavaScript allow us to create custom objects. They are declared like other functions, but set properties on this and are instantiated with the new keyword. We capitalize the function name so that we know it's a constructor function.

Now that you've learned about constructor functions, you might be interested in learning about how inheritance and prototypes work. I will be writing a blog post on this soon and will update this post once it is published. In the meantime, you can read Inheritance and the prototype chain from MDN.

References

Cover photo by carlos aranda on Unsplash

Let's connect

If you liked this post, come connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.

Creating Custom React Hooks: useConfirmTabClose

Zach Snoek — Tue, 30 Mar 2021 05:31:54 +0000

It's common to come across a situation where a user can navigate away from unsaved changes. For example, a social media site could have a user profile information form. When a user submits the form their data are saved, but if they close the tab before saving, their data are lost. Instead of losing the user's data, it would be nice to show the user a confirmation dialog that warns them of losing unsaved changes when they try to close the tab.

Example use case

To demonstrate, we'll use a simple form that contains an input for the user's name and a button to "save" their name. (In our case, clicking "save" doesn't do anything useful; this is a contrived example.) Here's what that component looks like:

const NameForm = () => {
    const [name, setName] = React.useState("");
    const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(undefined);

    const handleChange = (event) => {
        setName(event.target.value);
        setHasUnsavedChanges(true);
    };

    return (
        <div>
            <form>
                <label htmlFor="name">Your name:</label>
                <input
                    type="text"
                    id="name"
                    value={name}
                    onChange={handleChange}
                />
                <button
                    type="button"
                    onClick={() => setHasUnsavedChanges(false)}
                >
                    Save changes
                </button>
            </form>
            {typeof hasUnsavedChanges !== "undefined" && (
                <div>
                    You have{" "}
                    <strong
                        style={{
                            color: hasUnsavedChanges
                                ? "firebrick"
                                : "forestgreen",
                        }}
                    >
                        {hasUnsavedChanges ? "not saved" : "saved"}
                    </strong>{" "}
                    your changes.
                </div>
            )}
        </div>
    );
}

And here is the form in use:

If the user closes the tab without saving their name first, we want to show a confirmation dialog that looks similar to this:

Custom hook solution

We'll create a hook named useConfirmTabClose that will show the dialog if the user tries to close the tab when hasUnsavedChanges is true. We can use it in our component like this:

const NameForm = () => {
    const [name, setName] = React.useState("");
    const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(undefined);

    useConfirmTabClose(hasUnsavedChanges);

    // ...
}

We can read this hook as "confirm the user wants to close the tab if they have unsaved changes."

Showing the confirmation dialog

To implement this hook, we need to know when the user has closed the tab and show the dialog. We can add an event listener for the beforeunload event to detect when the window, the document, and the document's resources are about to be unloaded (see References for more information about this event).

The event handler that we provide can tell the browser to show the confirmation dialog. The way this is implemented varies by browser, but I've found success on Chrome and Safari by assigning a non-empty string to event.returnValue and also by returning a string. For example:

const confirmationMessage = "You have unsaved changes. Continue?";

const handleBeforeUnload = (event) => {
    event.returnValue = confirmationMessage;
    return confirmationMessage;
}

window.addEventListener("beforeunload", handleBeforeUnload);

Note: The string returned or assigned to event.returnValue may not be shown in the confirmation dialog as that feature is deprecated and not widely supported. Also, the way that we indicate that the dialog should be opened is not consistently implemented across browsers. According to MDN, the spec states that the event handler should call event.preventDefault() to show the dialog, though Chrome and Safari don't seem to respect this.

Hook implementation

Now that we know how to show the confirmation dialog, let's start creating the hook. We'll take one argument, isUnsafeTabClose, which is some boolean value that should tell us if we should show the confirmation dialog. We'll also add the beforeunload event listener in an useEffect hook and ensure that we remove the event listener once the component has unmounted:

const confirmationMessage = "You have unsaved changes. Continue?";

const useConfirmTabClose = (isUnsafeTabClose) => {
    React.useEffect(() => {
        const handleBeforeUnload = (event) => {};

        window.addEventListener("beforeunload", handleBeforeUnload);
        return () =>
            window.removeEventListener("beforeunload", handleBeforeUnload);
    }, [isUnsafeTabClose]);
};

We know that we can assign event.returnValue or return a string from the beforeunload handler to show the confirmation dialog, so in handleBeforeUnload we can simply do that if isUnsafeTabClose is true:

const confirmationMessage = "You have unsaved changes. Continue?";

const useConfirmTabClose = (isUnsafeTabClose) => {
    React.useEffect(() => {
        const handleBeforeUnload = (event) => {
            if (isUnsafeTabClose) {
                event.returnValue = confirmationMessage;
                return confirmationMessage;
            }
        }
        // ...
}

Putting those together, we have the final version of our hook:

const confirmationMessage = "You have unsaved changes. Continue?";

const useConfirmTabClose = (isUnsafeTabClose) => {
    React.useEffect(() => {
        const handleBeforeUnload = (event) => {
            if (isUnsafeTabClose) {
                event.returnValue = confirmationMessage;
                return confirmationMessage;
            }
        };

        window.addEventListener("beforeunload", handleBeforeUnload);
        return () =>
            window.removeEventListener("beforeunload", handleBeforeUnload);
    }, [isUnsafeTabClose]);
};

Final component

Here is the final version of NameForm after adding our custom hook:

const NameForm = () => {
    const [name, setName] = React.useState("");
    const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(undefined);

    useConfirmTabClose(hasUnsavedChanges);

    const handleChange = (event) => {
        setName(event.target.value);
        setHasUnsavedChanges(true);
    };

    return (
        <div>
            <form>
                <label htmlFor="name">Your name:</label>
                <input
                    type="text"
                    id="name"
                    value={name}
                    onChange={handleChange}
                />
                <button
                    type="button"
                    onClick={() => setHasUnsavedChanges(false)}
                >
                    Save changes
                </button>
            </form>
            {typeof hasUnsavedChanges !== "undefined" && (
                <div>
                    You have{" "}
                    <strong
                        style={{
                            color: hasUnsavedChanges
                                ? "firebrick"
                                : "forestgreen",
                        }}
                    >
                        {hasUnsavedChanges ? "not saved" : "saved"}
                    </strong>{" "}
                    your changes.
                </div>
            )}
        </div>
    );
}

Conclusion

In this post, we used the beforeunload event to alert the user when closing a tab with unsaved changes. We created useConfirmTabClose, a custom hook that adds and removes the beforeunload event handler and checks if we should show a confirmation dialog or not.

References

Cover photo by Jessica Tan on Unsplash

Let's connect

If you liked this post, come connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.