Forem: Jordan Holt

Important Network Concepts for Beginners

Jordan Holt — Mon, 30 Aug 2021 04:00:00 +0000

Networks are all around us. What do you see when you picture a network? Do you think of an enormous data center with endless rows of computers and thousands of blinking lights?

Maybe you think of your cell phone or your tablet, and how you connect to a website? All of those are examples of networks. We have come to rely on networks in our daily life.

Networks are all around us

In this article we will learn about computer networks and typical network components.

What is a network?

Networks are used to make connections between computers, with the purpose of transmitting data.

They can consist of just a couple of devices, connected to each other, or they could have thousands. Network devices are connected together in a variety of ways, such as copper wire cables, optical, wireless or other methods. We will dive deeper into these transmission mediums later.

In the past, there were networks for many different things. Analog telephone networks were used for making telephone calls. Video would be on a separate network, and digital computer data would be have its own network.

However, as technology improved, companies began to merge these communication services together to create what’s called a converged network.

Converged networks

Converged networks, are networks where all different types of traffic is combined. In contrast to the separate networks described above, voice, video and data all travel over the same network.

A smartphone doesn’t care whether you’re making a voice call, sending a message or browsing the Web using a data connection. In fact, the smartphone and carrier, treat the traffic the same. That is, digital data going out, over a digital network.

Converged network – voice, data & video.

Availability

As you probably know, we rely heavily upon networks. Networks are all around us and, we expect them to be available to us almost all of the time. This availability is measured using uptime.

Network uptime

Network uptime measures a networks availability. Business networks expect 99.999% uptime, also known as the five nines of availability. If you do the math, that works out to about 5 minutes of downtime each year.

Companies pay for and expect that level of availability. Engineers, technicians and others work hard to maintain the network and keep data moving.

Network traffic

Network traffic describes the type of data being sent over the network. Effective maintenance of a network requires knowing what kind of traffic to expect. Here are some common traffic types:

File sharing
Video streaming
Web
VoIP
Email
Messaging

There are new types of traffic being created all the time. Familiarize yourself with these different traffic types as you learn to maintain a network.

Network Components

Network components are components that actually make up a network, in order to move data.

Client

Clients are devices that are used by end-users to access a network. For example, these could be tablets, smartphones, laptops, servers or other terminal device.

Server

Servers provide resources to the network. Since there are many different types of resources, there is of course many types of servers. Some examples include:

Mail servers
File servers
Web servers
DNS servers
Chat servers
Print servers

Servers are can be hardware or software, with varying degrees of complexity, but they all provide resources. Without a doubt, this is a big topic, so we will dive deeper to servers in future articles.

Hub

Hubs connect network devices together. However, they are an older technology and as such, are not commonly used.

Because hubs rebroadcast information received on one port, to all the other ports, errors can occur. Because hubs essentially act as repeaters, only one conversation can occur at anytime. As a result hubs use a method called CSMA/CD. to avoid collisions.

Wireless Access Point

Wireless access point (WAP), are devices that allow wireless-enabled clients connect into a wired network. This connection is similar to hubs. That is, anything received one way, is broadcast the other way.

Switch

In a similar way to how older hubs worked, switches connect devices together. However, switches do not broadcast a copy of the information to all connected devices. Instead, switches learn what devices are connected to each port, and broadcast data directly to the intended device.

To illustrate the difference, think of hubs as someone who sends a message to a group of people. While a switch only sends the message directly to certain members of the group.

As a result, switches increase security and performance compared with hubs. Lastly, switches use the MAC address of connected devices, to make decisions on which port to broadcast the data.

Router

Routers connect two different networks together. They route traffic using logical addresses, better known as IP addresses. However, there are other routing protocols in use that don’t use IP addresses.

Media

Media is used to actually connect devices to other components such as a switch port. For example, copper cable, fiber and radio waves are all types of media.

Every media type has different characteristics, and as a result they will have their own strengths, weaknesses and applications.

Wide Area Network (WAN) link

WAN link is simply a connection that joins two or more geographically dispersed networks together. The Internet is basically a series of WAN links. As you probably assumed, there are many different types of WAN links, such as:

Dial-up
Cable
Cellular
Leased line
Satellite
Microwave link

The WAN links are routed through a router and into a local network. Essentially, WAN links connect internal networks to external ones.

Wrap up

Networks are all around us in our daily life. We rely on these networks for critical and demanding tasks. As a result, have come to expect them to be available all the time. Even if you’re not maintaining a network yourself, a basic understanding of networks can go a long way towards improving your skills.

The post Important Network Concepts for Beginners appeared first on Jordan Holt.

What you need to know about URLs

Jordan Holt — Sat, 21 Aug 2021 14:38:38 +0000

URLs are one of the pillars of Web architecture, and a key concept for anyone who codes. This article discusses URLs, what they are, how they are used and how they are made.

What are URLs?

Uniform Resource Locators, better known as URLs, are simply addresses that point to unique resource. They are a type of URI, which stands for Uniform Resource Identifier.

Often called a web address in the context of HTTP, a URL is an address that points to resource, such as an HTML page or an image for example. URLs are used by browsers to load the associated resource.

Here is an example of a URL:

https://www.google.com

We can type this URL into the address bar of a browser, and the browser will retrieve the resource for us.

In this example, the resource is the Google homepage:

When we enter this URL into the address bar of a browser, an HTTP request is sent to a server that is managing the resource. In this case specifically, a GET request is to the server that is hosting the Google homepage.

We can see the network request made by the browser, by using the browsers built-in developer tools:

Notice the request information, it contains the follow:

Scheme: The scheme used in the URL
Host: The server
Filename: The full path to the resource

Let’s have a closer look at these elements, and the structure of a URL.

Structure of a URL

Every URL consists of a number of different parts. Some of these parts are optional while others are mandatory. You will probably recognize many of these components.

Here is an example of a basic URL:

Let’s discuss the details further.

Scheme

The first part of a URL is the scheme. URL is used to ‘locate’ a resource, the scheme tells us ‘how’ we to access that resource. It indicates what protocol to use to access the resource.

Browsers are capable of accepting different schemes such as mailto:

Often the protocol is HTTP or HTTPS, when using a browser to access a web page. However there are many schemes available. Here are some examples of other schemes:

http:
mailto:
ftp:
telnet:
news:
tel:

Authority

After the scheme, is the authority component. It indicates what server manages the resource. It includes two elements,the host and the port.

The authority component is separated from the scheme by :// the colon indicates a different part of the URL, and the // means the authority will be next.

However, not all URLs use authority. It is important to understand the requirements of each protocol. Consider the following examples:

https://example.com/blog
mailto:example@example.com?subject=hello
news:<message-id>

Host

In the HTTP context, the host is often a qualified domain but it could also be an IPv4 or IPv6 address.

Port

This number indicates which port to connect to. The port is a communication endpoint. In an HTTP URL scheme, if the port number is omitted, then the port will default to port 80.

URL schemes usually define the port numbers for the protocol. When the port number is omitted, the colon separating them will be omitted too.

http://localhost:80
http://192.168.0.1:8000

Path

The URL path contains information about how to access the resource. It is the path to the resource. The path syntax depends on which URL scheme is being used.

In HTTP URLs, the / indicates a hierarchical structure – in the example above, archive is a child of blog. Note that the / separating the host and the path is not part of the path.

Parameters

Parameters are a list of key value pairs that are used by servers to perform some action before returning the resource. We can observe this by using the Google Search engine.

When you enter a term in the search bar, the term is then included as a URL parameter and processed by the server before returning the resource. We can confirm this by looking at the URL in the address bar:

HTTPS URL. The browser sends an HTTP GET request including the search term as a parameter.

Address bar. Notice the parameters, consisting of key/value pairs.

Every server will handle parameters differently, so it’s important to verify with the owner how they are specifically handled.

URLs in HTML

As previously mentioned, we can enter a URL directly into the address bar of a browser to access a resource. However, there are many technologies that use URLs, such as HTML, CSS and JavaScript. Let’s have a have a look at how URLs are used in HTML.

HTML extensively uses URLs to access documents and move from one to another. Whenever you click a hyperlink, and navigate to another HTML page, you are using a URL. A hyperlink is simply text that is tied to a URL.

Links to other documents are created in HTML, using the <a> element. This allows users to quickly access the desired document.

Here is an example of a link using the <a> element in HTML:

<a href="https://example.com">This is text that is tied to a URL</a>

Wrap Up

We have only scratched the surface of what URLs are and what they are used for. In future posts we will have a closer look at how we use URLs with JavaScript, including the URL web API.

Further reference

For those who are interested in further reading on the subject.

The post What you need to know about URLs appeared first on Jordan Holt.

Fundamentals of Cloud Computing

Jordan Holt — Thu, 03 Dec 2020 00:00:00 +0000

The demand for qualified individuals in cloud computing is on the rise and it doesn't look to be slowing down. As more industries start to transition to a cloud model the demand for cloud skills will continue to grow. The global public cloud revenue is expected to grow to over 💲300B in 2021.

Now is a great time to learn a new skill and familiarize yourself with the rapidly changing field.

But where should you start? In this article we'll start with the basics and learn all about cloud computing fundamentals.

What is the cloud?

The term cloud is basically referring to a data center or multiple data centers that are connected to each other, and are then made available to users through the internet. Instead of having to manage computer resources, they can be accessed via the cloud on demand.

Users do not have to directly manage the hardware or software, they can simply click to access these computing resources.

Data centers & hosting providers

To better understand what cloud computing is, let's first look at what a typical workflow might look like for a company before cloud computing became so popular.

Let's say a company wanted to host a website. They might have a system administrator who will be responsible for the configuration and operation of the server that hosts the website.

The sysadmin might be responsible for helping to:

Evaluate and choose the data center or hosting provider
Determine and provide server requirements to data center / hosting provider
Negotiate final services

Any issues or problems that arrive require the sysadmins attention. Let's have a closer look at the two main methods of acquiring servers or computer resources.

Data centers

Before cloud computing became so popular, companies often directly dealt with data centers. A data center can house thousands of servers owned by private companies or individuals. They also might rent physical servers to companies who don't provide their own.

Common features

Dedicated space designed to house computer systems and any associated technology.
Data centers can contain redundant systems such as power backups and environmental controls
Data centers can help provide physical security to the servers

Cons

Any additional server specifications require a technician to physically implement -e.g., someone physically installs additional RAM
While the data center might have redundant systems and protections, if the entire facility failed so would the server.
The negotiations and pricing process can take some time.

Negotiating and pricing requires a bit more effort with data centers as the server configuration, associated components such as internet connection, power and cooling need to be determined. When you're dealing larger projects this process can take a long time and if rushed can end up costing a lot of money.

Hosting providers

Generally with a hosting provider, instead of buying or renting a physical server in a data center you pay a monthly fee and get a dedicated server, the hosting provider takes care of the rest. You choose the available servers that the hosting provider offers and any additional configuration. The hosting provider deals with all the physical requirements of the server. A hosting provider is often just a company that owns servers in a data center and charges a fixed price to rent those managed servers.

Common features

Monthly fixed price for dedicated server.
Easier to get started and configure
The hosting provider will connect with the data center to implement changes to your server

Cons

Any additional server specifications require a support ticket - .e.g., contact the hosting provider to request additional RAM, response time will vary.
Cost can be steep. Pay a fixed price regardless of usage.

One of the biggest downsides of a hosting provider besides the fixed cost, is the reliance on them to implement changes to the server in timely manner. For example, if you want to increase the RAM you submit a ticket and then wait for them to respond. Response times will vary and in fact it can be an additional cost for priority support.

So far we've looked at two ways to acquire computer resources. Data centers, where a physical server is housed and hosting providers that charge a fixed monthly fee for a dedicated server. With those options, we either have to have someone physically upgrade our server, or in the case of the hosting provider, create a ticket and wait for them to apply the upgrades.

Let's look at how cloud computing helps us avoid those obstacles.

Intro to cloud computing

Cloud computing is a model that makes computer resources available as a service. Users can easily launch these services without any human intervention. No more waiting around to hear back from a data center or hosting provider.

Here are three of the main characteristics of cloud computing:

Services are on-demand & self-serviced - A user can implement without any manual intervention.
Elasticity - Must be able to scale up and down anytime
Measured - Only pay for what you used, no fixed cost.

Cloud computing providers offer their services via three main models. Cloud providers may offer services in more than model, or they might only specialize in one area.

Software as a service (SaaS)

In the SaaS model, the cloud providers install an application in the cloud and handle all the infrastructure and necessary platforms for the application to run. Users can access the application from cloud clients, this way users do not need to download or install the application. The application is running in the cloud and it can be accessed via the browser.

Examples:

Platform as a service (PaaS)

In this model cloud providers will setup the necessary infrastructure and platforms for users to develop an application. This can include an operating system, web server and other necessary elements. Users can then develop and deploy applications on that platform.

Examples:

Infrastructure as a service (IaaS)

As its name suggests, this model provides infrastructure as a service. Typically this means things like servers and databases.

Examples:

Cloud providers

There is no shortage of choice when looking for a cloud provider. It can be very easy to spend unnecessary money if you rush to decide.

Take your time when deciding, most of the cloud providers have some sort of free tier if you're interested in trying before buying.

Here are a few popular cloud providers:

There are a number of smaller providers out there. Not all of them will offer the comprehensive computing services that AWS or Azure will but they might be more economical.

Wrap up

In this article we saw that the cloud is really just a data center or multiple data centers that are made available through the internet. We saw how things were often done before the cloud became popular.

We learned about the characteristics of cloud computing and looked at different cloud models like SaaS, PaaS and IaaS and some of the major providers. We also began to look at the architecture of cloud environments. In future articles we'll dive deeper into the infrastructure of the cloud.

Further reference

Hosting Provider / Dedicated servers / Cloud - OVH - This is a well known hosting provider that also provides cloud services.
Cloud Provider - Digital Ocean
National Institute of Standards and Technology
Free for dev - Large list of SaaS, IaaS and PaaS services, aimed at DevOp/SysAdmin

JavaScript Scope: What is it?

Jordan Holt — Fri, 27 Nov 2020 00:00:00 +0000

In JavaScript, the concept of scope relates to where variables and expressions can be accessed from. In this article we'll look at a few different types of scope, what they do and how you use scope to improve the performance of a program.

If you're just starting out, check out my article on JavaScript variables which is a good introduction to scope.

Here's what MDN says about scope:

The current context of execution. The context in which values and expressions are "visible" or can be referenced

The current context of a value or expression will determine where they are made available. So how do we determine the current context? We look at the location of the variable. This is because JavaScript has lexical scoping and closures. Lexical scoping basically means that JavaScript will use the location of where a variable is declared, to determine where the variable is available.

This means that we can read the source code to determine the scope.

Let's look at the following example:

function someFunction() {
  var animal = "Lion"
  // code can use animal inside this function
}

// Code outside of the function can't use animal

Code outside of the function cannot access the variable that was declared inside the function. In this context the variable animal would be known to have local scope.

Scope types

There are four scopes in JavaScript, they are:

Global Scope - Global scoped values and expressions are visible by everything.
Block Scope - The values and expressions are only visible within the code block and any sub-blocks
Module Scope - Values and expressions are visible within the module.
Function Scope - Visible within the function.

Global scope

If you declare a variable outside of any function than it is known to have global scope. Global variables go to the global namespace which allow the variables to be accessed anywhere in the program.

// this is a global variable, it was declared outside of any function.
const animal = "dog"

const sayHello = () => {
  // this is a local variable, it is declared inside a function.
  const sound = "woof"
  console.log(sound) // Output: 'woof'
}

console.log(sound) // ReferenceError: sound is not defined
console.log(animal) // Output: dog

In the example about the first variable animal has been declared outside of any function, this is known as a global variable and its value is accessible in the global scope. Inside the function called sayHello, there is a variable sound. Because sound was declared inside a function, it is known to have local scope, and its values are only accessible inside of the function it was declared.

When we attempt to log the value of sound we receive a Reference Error because in that context, sound does not exist, it is out of scope.

Block scope

Prior to ECMAScript 2015 and the let and const keywords, JavaScript didn’t have block statement scope. So a variable declared inside a block is local to the scope that the block is in.

Observe the following example:

if (true) {
  var counter = 5
  let age = 25
}
console.log(counter) // Ouput: 5
console.log(age) // Output: ReferenceError: age is not defined

You can see that we are able to access the counter variable from outside of the if code block. However when we try and log the age variable we recieve an error because the let variable is block-scoped.

Before the let and const keywords were introduced in ECMAScript 2015, variables did not have block scope.

Module scope

With the introduction of modules in ECMAScript 2015 came module scope. Modules allow us to split up code and seperate concerns in a program. Code contained inside modules needs to be imported into a script to be used. The code is then imported into the scope of that specific script, the code in the module is not globally scoped.

// feature.js is a javascript module

export const someFunction = num => {
  let counter = 0
  return counter + 1
}

const anotherFunction = num => {
  let counter = 0
  return counter + 2
}

someFunction is declared inside a module. To access this function, it needs to be exported from the module and imported into the chosen script.

// app.js is the chosen script
import { someFunction } from "../feature.js"

someFunction(1) // Output: 2

anotherFunction(1) // Ouput: ReferenceError: anotherFunction is not defined

In the example above we import the someFunction from the module and import it into the app.js script where it can be used. However, when we try and invoke anotherFunction we get a reference error because the module scope prevents us from accessing those values unless it is properly imported and exported.

Scope pollution

When there are too many variables in the global namespace then there is a possibility of name collision, especially if you're using many different libraries. Generally global scoped variables should be reserved for objects that have program-wide relevance.

Wrap up

In this article we learned about the basics of scope in JavaScript. We looked at 4 different types of scope and how to determine them by looking at the source code. Scope is an important concept to understand in JavaScript and one that will be leveraged every time you code. Make sure to check out the references below for more information on JavaScript scopes.

Further reference

Scope - MDN
Lexical Environment - ECMA
What is the scope of variables in javascript? - Stack Overflow
Closures - MDN

JavaScript: Tagged template literals

Jordan Holt — Fri, 20 Nov 2020 00:00:00 +0000

The template literal syntax is a very useful feature in JavaScript. One often overlooked feature of template literals is the ability to use a tag function to perform actions on them. Instead of immediately assigning the template literals to a variable we can pass their values as arguments, to a function. The function will then process those arguments anyway we want and return us something, often that will be a string but it could be anything.

Let's have a look at how we can put a tagged template literal together. But first let's have a quick refresh of the template literal syntax.

Template literals are enclosed with backticks (), and can contain placeholders for expressions:

const id = 89453
const API_URL = `https://examplesite.com/blogs/${id}`
console.log(API_URL) // Output: "https://examplesite.com/blogs/89453"

This syntax is very powerful and is used in many programs for a variety of tasks. For example you'll often see template literals used when making making a network request to an outside API.
CSS-in-JS libraries is another place you might frequently see template literals:

import styled from "styled-components"

const StyledButton = styled.button`
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  background: orange;
  color: white;
  border: 2px solid white;
`

A tagged template literal allows us to run a template literal through a function as opposed to assigning it a value immediately.

Here's how to create a tagged template literal:

Create a function
Create a template string
Take the name of the function and put it in front of the template literal.

const applyDeal = () => {
  // some processing logic
}

const fruitType = "Citrus"
const price = 5
const deal = applyDeal`Today only, we have a great deal on ${fruitType} fruit. Currently only ${price}!!`
console.log(deal) // Output: undefined

Once a template literal has been tagged, the browser will run this function and pass in the information. We can add some logic to process the template literal and whatever we return from the function will get assigned to the deal variable.

The function will take a couple of arguments. The first argument are all the pieces of string which we'll pass in as a parameter called strings. Then we can pass in the other values we used in the placeholders, we can pass in a price and fruitType or take advantage of the rest operator and pass in ...values

const applyDeal = (strings, ...values) => {
  console.log(strings, ...values)
}

Here is what is logged to the console:

["Today only, we have a great deal on ", " fruit. Currently only ", "!!"],
  "Citrus",
  5

The argument strings is an array of string pieces that were separated by the placeholders in the template literal. The ..values are the expression values that the placeholders contain, in this case with the value "Citrus" and 5.

Now that we have access to those values in the applyDeal function we can add some logic.

const applyDeal = (strings, ...values) => {
  // some processing logic
  const stringOne = strings[0]
  const stringTwo = strings[1]
  const stringThree = strings[2]

  let msgStr = ""

  if (values[1] < 10) {
    msgStr = `!!DEAL ALERT!! `
  }

  return `${msgStr}${stringOne}${stringTwo}$${values[1]}${stringThree}`
}

const fruitType = "Citrus"
const price = 5
const deal = applyDeal`Today only, we have a great deal on ${fruitType} fruit. Currently only ${price}!!`

console.log(deal) // Output: "!!DEAL ALERT!! Today only, we have a great deal on  fruit. Currently only $5!!"

The code above is fairly straight forward, we pass in the string and values to the function and then we have some conditional logic that checks to see if the second value (in this case that is 5) is less than 10, if it is then we assign "!!DEAL ALERT!!" to a variable and then finally return another template literal which will be assigned to the variable deal

Obviously this isn't the most practical example, but it does highlight how powerful tagged template literals can be.

Wrap up

There are a ton of different uses for tagged template literals in JavaScript. In this article you saw the basic structure of tagged template literals. A tag function can perform actions on those arguments and then return another string or whatever your use case requires.

Further reference

Create a modal overlay using JavaScript

Jordan Holt — Sun, 15 Nov 2020 00:00:00 +0000

One common feature in many web pages and apps are modals. Modal windows and overlays serve as structural elements for many differenet types of content, such as images and videos, forms, alerts and notices and others like search boxes. Becoming familiar with modals and the various ways they can be created is a great way to practice your skills as a front-end developer and has been known to be included during interviews.

In this article we'll create a simple modal overlay that contains a newsletter sign-up form, using HTML, CSS and JavaScript.

Goal

We have a web page and we need to collect email addresses for a newsletter. To do this we will create a dismissible modal overlay. A user should be able to click on a "Subscribe" button which will open the modal overlay that will contain a basic sign up form. The sign up form will collect a users name and email address. If the user successfully submits the form a success message will briefly appear.

Here's what the final product will look like:

And here's a link to the final source code on CodePen.

The user should be able to dismiss the modal by clicking an "X" or clicking anywhere outside of the modal.

Let's break these requirements down further:

Create "Subscribe" button
- User can click button and enable the modal.
Create modal overlay
- Must be centered vertically and horizontally.
- The modal will contain a CTA and a form.
Modal contains form to collect name and email
User can submit the form
User can dismiss the modal
- User can click "x" button to dismiss.
- User can click anywhere outside of the modal to dismiss
When a form is submitted, the modal is closed and a "Success" message is shown.

Here's a mockup of the form:

Getting started

Let's start off by creating a "Subscribe" button that the user can click, as well as the basic structure of our modal.

<div>
  <button>Subscribe</button>
  <!-- modal overlay -->
  <div class="modal-overlay">
    <div class="modal">
      <div class="modal-close">X</div>
      <div class="modal-content">
        <h2>Subscribe now!</h2>
        <p>Subscribe to get a free PDF!</p>
      </div>
    </div>
  </div>
</div>

After the button, we can create the structure of the modal. It is made up of two main elements, the div with the class name modal-overlay and then the modal itself which is composed of a div with the class name modal and it's children.

The modal-overlay will encompass the entire viewport when enabled, and showcase the modal. We will add some styling to the overlay to focus the users attention on the modal itself.

Currently we have a button and a bit of content but it looks awful and the user can't interact with it as intended. We'll have to add a bit of JavaScript and CSS in the next step.

Let's add some styles to the button and modal. Remember, we want the modal to be hidden unless a user activates the "Subscribe" button.

* {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

button {
  order: 1;
  display: block;
  margin: 0 auto;
  align-content: center;
  border: none;
  cursor: pointer;
  height: 2.5rem;
  min-width: 2.5rem;
  background-color: #18a0fb;
  color: rgb(255, 255, 255);
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 600;
  border-radius: 6px;
}

.modal-wrapper {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.modal {
  font-family: Arial;
  width: 100%;
  max-width: 400px;
  margin: 20% auto;
  padding: 20px;
  background-color: white;
  position: relative;
  border-radius: 25px;
}

.modal-content {
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
  color: black;
}

Overall some basic styles but a couple of things to notice. The class modal-wrapper is an important piece as this is the main overlay. It covers the entire viewport and is not displayed by default. The background color has also been set to a gray color with very low opacity, this will dim the other page elements and allow the focus to remain on the modal content.

Activating the modal

Let's complete the "Subscribe" button functionality. Remember, when a user activates the button the modal overlay should appear. We'll use JavaScript to accomplish this.

const buttonEl = document.querySelector("button")
const wrapper = document.querySelector(".modal-wrapper")

buttonEl.addEventListener("click", () => {
  wrapper.style.display = "block"
})

First we get a reference to the button element and the div with a class name of modal-wrapper by and save those to variables called buttonEl and wrapper. Then we attach an event listener to the buttonEl that listens for a "click" event. Every time the buttonEl is clicked we set the display property to block which then reveals the div element with the class name of modal-wrapper.

Dismiss the modal

Okay, great! We've already completed half of the requirements. We have a working "Subscribe" button that activates the modal overlay. However, right now there is no way for a user to dismiss the modal.

There are two ways in which the user should be able to dismiss the modal:

User clicks the "X"
User clicks anywhere outside the modal

Let's implement these now.

const buttonEl = document.querySelector("button")
const wrapper = document.querySelector(".modal-wrapper")
const closeEl = document.querySelector(".modal-close") 

buttonEl.addEventListener("click", () => {
  wrapper.style.display = "Block"
})


closeEl.addEventListener("click", () => {
  wrapper.style.display = "none"
})

wrapper.addEventListener("click", e => {
  if (e.target.className === "modal-wrapper") {
    wrapper.style.display = "none"
  }
})

First we store a reference to the "X" in a variable called closeEl. Then we add an event listener that listens for a click, when a user clicks the closeEl then the display property on the wrapper will be set to none and the modal will close.

Then we also add an event listener to the wrapper itself. Because the wrapper covers the entire viewport other than the modal content itself, we close the modal when the user clicks anywhere that the class name equals modal-wrapper.

Let's try this out now.

Add sign-up form

Now that we have the basic structure and functionality of the modal working, let's go ahead and add the form to the modal. This will collect the users name and email.

Let's add the form inside the div with the class name of modal-content:

<div class="modal-wrapper">
  <div class="modal">
    <div class="modal-close">X</div>
    <div class="modal-content">
      <h2>Subscribe now!</h2>
      <p>Subscribe to get a free PDF!</p>
      <form>
        <p>
          <label
            >Name:
            <input name="name" placeholder="Jane Doe" type="text" required
          /></label>
        </p>
        <p>
          <label
            >Email:
            <input
              placeholder="jane@example.com"
              type="email"
              name="email"
              required
          /></label>
        </p>
        <p><button type="submit">Subscribe</button></p>
      </form>
    </div>
  </div>
</div>

As you can see it's a basic form with two input elements and a button to submit the form. Input validation can easily be added via HTML or JavaScript depending on your requirements, however for this example we'll leave things how they are. If you're interested in learning more about form validation, check out my article on client-side form validation.

Let's add some more styles so the form looks a bit closer to the mockup.

form > p > button {
  margin-top: 1rem;
  height: 2.5rem;
  min-width: 2.5rem;
  background-color: #18a0fb;
  color: rgb(255, 255, 255);
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 600;
  border-radius: 6px;
}

p > label {
  font-size: 1rem;
  padding-bottom: 6px;
  opacity: 1;
  font-weight: 500;
  text-align: left;
  line-height: 1.25;
  display: block;
  border-width: 0px;
  border-style: solid;
  border-color: rgb(226, 232, 240);
}

input[type="text"],
input[type="email"],
fieldset {
  width: 80%;
  border: 1px solid #333;
  box-sizing: border-box;
  font-size: 1rem;
  padding-left: 0.5rem;
  padding-right: 1rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  border-style: solid;
  border-color: inherit;
  background-color: rgb(255, 255, 255);
}

Success message

When a user enters their information into the form and clicks the submit button, it would be nice to show some sort of visual confirmation.

Here's what we want to do:

User clicks "submit" button
Modal closes
Message temporarily appears indicating successful submission.

First, let's create the HTML we need for the success message, we'll put this right after the modal-overlay.

<div class="success-wrapper">
  <div>
    <p>Success! Thank you for subscribing to the newsletter 🙏</p>
  </div>
</div>

And we'll add a few basic styles:

.success-wrapper {
  display: none;
  border-radius: 6px;
  background-color: #33ce34c9;
  max-width: 400px;
  margin: 45vh auto;

The success message will be hidden by default because of the display property being set to none. The message is roughly centered vertically and horizontally.

Now, we can add the functionality by controlling what happens when the form is submitted.

const buttonEl = document.querySelector("button")
const wrapper = document.querySelector(".modal-wrapper")
const closeEl = document.querySelector(".modal-close")
const form = document.querySelector("form") // highlight-line
const successEl = document.querySelector(".success-wrapper") // highlight-line

buttonEl.addEventListener("click", () => {
  wrapper.style.display = "Block"
})

closeEl.addEventListener("click", () => {
  wrapper.style.display = "none"
})

wrapper.addEventListener("click", e => {
  if (e.target.className === "modal-wrapper") {
    wrapper.style.display = "none"
  }
})
// highlight-start
form.addEventListener("submit", e => {
  e.preventDefault()
  wrapper.style.display = "none"
  successEl.style.display = "block"
  setTimeout(() => {
    successEl.style.display = "none"
  }, 3000)
})
// highlight-end

Again we reference the DOM elements, in this case the <form> and the success message <div>. We attach an event listener to the <form> element to listen for submit events. When a user submits the form we first prevent the default form action from executing, then we hide the modal by setting its display property to none. Then we use the setTimeout() method to create a timer that will set the display to none and hide the message after 3 seconds.

Wrap up

In this article we saw how we can create a simple modal using basic HTML, CSS and JavaScript. Modals are used in many different ways and can be implemented using many different libraries or with vanilla JavaScript like we used in this example. Creating modals can be great way to practice your front-end skills, try building this modal different ways, using different tools and stretching features.

Here's a link to the final code on CodePen

Further reference

VS Code: Configure for web development

Jordan Holt — Fri, 13 Nov 2020 00:00:00 +0000

VS Code is a powerful text editor used by web developers all over the world. One of the features that makes it particularly appealing is the high-level of customization that a user can achieve. In addition to the wide variety of options that ship with VS Code, there is a large marketplace that offers access to extensions that can be used to further fine-tune your workflow. Learning how to configure VS Code effectively for web development can help improve your workflow and make for a better experience.

In this article we'll look at how we can configure VS Code for web development.

Getting started

Before we get to deep into the settings let's have a quick look at the VS Code UI to familiarize ourselves. If you've been using VS Code as your main editor than you can probably skip this section but feel free to follow along.

Side Bar: Contains different views like the Explorer to assist you while working on your project.
Editor: This is where the actual code editing will take place. You can have multiple editors open at once in different layouts.
Activity Bar: Let's you switch between views and see relevant information.
Panel: This can display output and debug information as well as a built-in Terminal. Panel is collapsible for extra screen space.
Status Bar: Various information about the current project and files.
Breadcrumbs: Shows you the file type and path to allow for quick navigation. Optional.
Indent Guides: These help you quickly match indent levels. Disable by setting "editor.renderIndentGuides": false in workspace settings.

VS Code is a well thought out application that is fairly comfortable to use right away. However, there are a number of things we can do to improve the UI as well as the functionality for use with web development.

Basic settings

After I've installed the latest version of VS Code, I like to go through some of the basic settings and configure a few things for my preference. Everyone is going to have different requirements and preferences but here are a few of the settings that I like to adjust right away.

You can access VS Code settings by navigating to File > Preferences > Settings or by pressing the CTRL + , keys.

Disable MiniMap - I only enable this feature when I need to search large files or look for lint errors. Generally my React modules are usually small enough that I don't need this regularly but it does have it's advantages.

Enable Trim Trailing Whitespace - This removes any additional whitespace at the end of a file.
Format on paste and format on save - I like to have these enabled so that Prettier can help me regularly format my code.
New Window Dimensions set to offset - This will determine the size of a new window when there is one open already. I often have more than one project open at a time and find this useful.
Turn off Telemetry - I usually disable telemetry for applications unless there is specific requirement.

Font

The font will have a big impact on the way the editor looks so it's important to configure it just the way you prefer. Here are a few popular ways to configure the font in VS Code.

Enable font ligatures. This can help improve the readability of the code. This is a preference, not all developers use ligatures. - Install Fira Code or similar font containing ligatures.

"editor.fontWeight": "normal",
"editor.cursorWidth": 2,
"editor.letterSpacing": 0.4,
"editor.lineHeight": 20,
"editor.fontSize": 14,

Color themes

VS Code allows you to change the colors in the UI using color themes. This is one of the easiest ways to keep your project organized and a great way to inject some personality into VS Code. First thing you'll want to do is select a new color theme.

Select a color theme

Navigate to File > Preferences > Color Theme
Use the up and down arrow keys to preview the themes.
Select a theme and press enter to confirm selection.

There are some good color themes that come included with VS Code, however if you don't find something you like you have two options:

Search the VS Code Marketplace -
- Navigate to File > Preferences > Extensions or by pressing CTRL + Shift + x
- Enter your search. For example to search for color themes, type 'theme' into the search box.
Customize a theme. You can customize an active themes colors by setting the workbench.colorCustomizations in user settings.

There are a few popular extensions that help visually organize the code. I use these regularly.

Monokai++ - One of the themes I regularly use. Monokai++ has a pleasant, modern color sheme.
Material Icon Theme - Making use of file icons is a convenient way to help clearly organize your project.
Bracket Pair Colorizer - This extension allows matching brackets to be identified with colors. No more staring at the screen trying to decipher the brackets.
Indent Rainbow - This extension provides color to the indentation in front of your text.

Workflow

There are some really impressive extensions available for VS Code that really improves the experience for web developers. Let's have a quick look at some of the most popular VS Code extensions for web development.

Tip: Extensions can impact system performance. Check extensions if you're experiencing problems.

Auto Close Tag - Automatically creates the closing tag when you type the closing bracket of the opening tag.

Auto Rename Tag - Automatically renames closing tags if you update the corrosponding opening tag.
ES7 React/Redux/GraphQL/React-Native snippets - Provides some commonly used snippets.
IntelliSense for CSS class names in HTML - CSS classname completion for CSS definitions in your workspace.
NPM Intellisense - Autocompletes npm modules in import statements.
Path IntelliSense - Extension that autocompletes filenames.

Live Server - This extension provides an easy to use local server that features live reload. If I'm not using a framework with a dev server I am often using this extention.
MDX - MDX langauge support for VS Code.

Take some time to read about the extensions that are available and ask if it solves a particular problem or not.

Style / Format

Preferences will vary about styling and formatting your code, luckily VS Code makes it easy to handle different workflows. Extensions like ESLint, Prettier and Beautify all make it easy to setup your style and format preferences in your project.
Features like format on save and format on paste ensure that your code can look great as soon as you start writing it.

ESLint - Integrates ESLint into VS Code.
Prettier - I use Prettier to format my code. I'll include basic formatting options directly in VS Code settings that are used if project specific settings aren't found.

Settings

Here's a list of my current VS Code settings if you're interested in using them.

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Monokai++",
  "material-icon-theme.activeIconPack": "react",
  "material-icon-theme.saturation": 0.9,
  "explorer.compactFolders": false,
  "editor.largeFileOptimizations": false,
  "editor.cursorWidth": 2,
  "editor.lineHeight": 20,
  "editor.letterSpacing": 0.4,
  "editor.fontWeight": "normal",
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.minimap.enabled": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": 0,
  "window.newWindowDimensions": "offset",
  "liveServer.settings.CustomBrowser": "firefox",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "prettier.bracketSpacing": true,
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "markdown.preview.fontSize": 20,
  "files.trimTrailingWhitespace": true,
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false
}

Wrap up

In this article we took a look at one way to configure VS Code for web development. Although workflow and preferences will always be changing, setting up a solid foundation in your workspace can really help improve the dev experience.

Further reference

Monospace fonts - DIgital Ocean
Fira Code - GitHub - Free monospaced font containing ligatures for common programming multi-character combinations

JavaScript variables: Getting started

Jordan Holt — Tue, 03 Nov 2020 00:00:00 +0000

You can think of variables as containers of information. Variables allow a way of labeling data with a descriptive name. They are not values themselves, but they contain values and represent them with a name.

You can assign different kinds of values to variables, such as strings, arrays and objects.

const color = "blue"
const counter = 10
const names = ["Joe", "Alice", "Frank"]
const engine = {
  size: 600,
  mileage: 1300,
  operating: true,
}

Declaring a variable

Variables are declared using one of three keywords in JavaScript var, let and const. Prior to ECMAScript 2015 var was used to declare all variables.

var fruit = "Banana"
const firstNames = ["Joe", "Jessica", "Alice"]
let counter = 0

Many new programs will only use let and const but var is still out there.

Let's have a closer look at a variable declaration.

let userName = "Joe"

In the example above, a variable called userName has been declared using the let keyword, it has been assigned a value of Joe.

let keyword declares a new variable.
userName is the variable name, or identifier.
= the assignment operator assigns the value to the variable.
Joe is the value that the variable was initialized with.

You can also use destructuring assignment syntax to create a variable and assign value from object literals.

const engine = {
  size: 600,
  mileage: 1300,
  operatingStatus: true,
}

// creates a variable named size
// assigns size value equal to engine.size
const { size } = engine

console.log(`engine size: ${size}`) // Output: engine size: 600

Above we unpack the name and value of the engine objects size property.

Now that we've seen how easy it is to get started, let's have a closer look at naming JavaScript variables.

Naming variables

When considering a name, it's important that it is relatively descriptive and easy to read. In contrast to variables in mathematics, variable names in JavaScript programs are usually choosen based on readability and descriptiveness .

Camel casing is also a common convention used in JavaScript programs.

const userSelectedItems = {}

Variable names are called identifiers. Identifiers are sequences of characters that are used to identify a variable, function or property.

JavaScript identifiers

Are case-sensitive
Must start with a letter, $ or _
Can contain Unicode letters
Can contain digits (0-9), but cannot start with a digit
Can contain $ and _

These identifiers are all acceptable:

const $one_name = "Jane"
const Status_Number = 5
let _speed10 // _underscore is sometimes used to indicate private vars

You can also use Unicode letters and Unicode escapes sequences.

let \u0636 = [1, 2, 5];

const exampleChar\u0E16 = "Thai"
console.log(exampleCharถ) // Output: Thai
console.log(\u0636) // Ouput: [1, 2, 5]

Although the variable names above are allowed, you'll generally try and choose variable names that are descriptive and therefor easy to read. Conventions like camel casing are followed to help readability.

These are good examples ✅

// these are good names
let userName = "Joe"
let userEmail = "joe@example.com"

Although variable names are case sensitive, don't create multiples that share the same name but have different casing.

This would be considered bad practice 🚫

// don't do this
const exampleFruit = "Orange"
const examplefruit = "Banana"

Variable names cannot use reserved keywords. Watch out for keywords like new, with, this these are reserved. You'll likely get a SyntaxError if you attempt to use these.

While that was a lot of information about naming variables, the overall goal should be creating variable names that are descriptive and easy to read. If you have a clear reason to steer away from common practice then try and be consistent in your choices.

Variable scope

An important difference between JavaScript and other languages like Java, is that in JavaScript, blocks do not have scope, only functions have a scope. So if a variable is defined using var in a compound statement (for example inside an if control structure), it will be visible to the entire function. However, starting with ECMAScript 2015, let and const declarations allow you to create block-scoped variables. Let's have a closer look at this.

If you declare a variable outside of any function, it is known as a global variable, when you declare a variable inside of a function it is called a local variable. Local variables are available within the function they are declared.

var y // Global variable
function example() {
  var speak = "Hello" // Local variable
}

Global variables are properties of the global object. You can see this by opening a browser console and creating a global variable, then access the variable through the window object. The window object is the global object in the browser.

var globalNum = 10
window.globalNum // Output: 10

Prior to ECMAScript 2015 and the let and const keywords, JavaScript didn't have block statement scope. So a variable declared inside a block is local to the scope that the block is in.

function example() {
  var speak = "Hello"
  if (true) {
    var num = 5
  }
  console.log(num) // Ouput: 5; no block scope
}

When using the let or const keywords to declare a variable, it will be block-scoped. That means it is only available in the scope of the containing block.

function example() {
  var speak = "Hello"
  if (true) {
    let num = 5
  }
  console.log(num) // Output: ReferenceError: num is not defined
}

`let` keyword

let keyword allows you to reassign the variable to a different value

let color = "red"
console.log(color) // Output: red
color = "blue"
console.log(color) // Output: blue

The let keyword declares block level variables. The declared variable is available from the block it's enclosed in as well as sub-blocks.

const myFunction = () => {
  let x = 1
  {
    let x = 2
    console.log(x) // Output: 2
  }
  console.log(x) // Output: 1
}
myFunction()

We can also declare a variable without assigning it a value. In this case the variable will be initialized with a value of undefined

let pizza
console.log(pizza) // Output: undefined
pizza = "Cheese"
console.log(pizza) // Output: Cheese

`const` keyword

const allows you to declare variables whose values are not meant to change. The variable is available from the block its declared in.

const myBirthday = "1990-11-02"

A variable declared with the const keyword cannot be reassigned. They are meaned to stay constant and attempting to reassign them will cause a TypeError

const fruit = "Orange"
fruit = "Banana" // Output: TypeError

You'll see a TypeError like this in the console:

Uncaught TypeError: invalid assignment to const 'fruit'
    fruit = 'Banana';
       ^

TypeError: Assignment to constant variable.

const variables must be assigned a value when first declared. If not declared with a value, it will result in a SyntaxError

const animals; // Ouput: SyntaxError

Wrap up

Wow, that was a lot of information about JavaScript variables. But now you should have a pretty good understanding of JavaScript variables and how to use them. Remember that variables are not values themselves, let and const are block-scoped, watch out for reserved keywords and choose descriptive and easy to read names.

Further reference

var - MDN

Gatsby: Creating custom Markdown components

Jordan Holt — Fri, 30 Oct 2020 00:00:00 +0000

If you're working with MDX in Gatsby, make sure to take advantage of custom components using MDXProvider. This can give you the ability to apply your design system consistently across your content when you're using MDX.

In this article we'll use custom components to replace the HTML that is rendered by Markdown. You can easily integrate libraries like theme-UI or Chakra-UI if you're using an existing design system.

Getting started

In this example we'll be using the gatsby-starter-default project. This assumes you already have the Gatsby CLI installed on your system. If not, you can read about installing it here.

Let's go ahead and install the starter project. I'm naming the project folder "gatsby-custom-mdx-components", but you can name it anything you want.

 gatsby new gatsby-custom-mdx-components https://github.com/gatsbyjs/gatsby-starter-default

Then we can navigate to our project directory and list the contents. Then we'll open up a text-editor (I'm using VS Code) and have a closer look at the package.json file.

 cd gatsby-custom-mdx-components && ls && code .

d----          2020-10-30  8:22 AM                node_modules
d----          2020-10-30  8:21 AM                src
-a---          2020-10-30  8:21 AM           1043 .gitignore
-a---          2020-10-30  8:21 AM             49 .prettierignore
-a---          2020-10-30  8:21 AM             50 .prettierrc
-a---          2020-10-30  8:21 AM            171 gatsby-browser.js
-a---          2020-10-30  8:21 AM           1111 gatsby-config.js
-a---          2020-10-30  8:21 AM            165 gatsby-node.js
-a---          2020-10-30  8:21 AM            187 gatsby-ssr.js
-a---          2020-10-30  8:21 AM            689 LICENSE
-a---          2020-10-30  8:21 AM           1308 package.json
-a---          2020-10-30  8:21 AM         777362 package-lock.json
-a---          2020-10-30  8:21 AM           5670 README.md

The starter is a basic Gatsby project. It comes with a some of the bare-bones plugins like transformer-sharp and React Helmet for SEO but no way to handle MDX out of the box. We'll be using the gatsby-plugin-mdx to programmatically create the MDX pages. This plugin relies on @mdx-js/mdx to parse MDX to JSX and @mdx-js/react to implement MDX for React.

Let's go ahead and install these packages.

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

You can confirm the install by checking the package.json, you should see the 3 packages installed:

  "dependencies": {
    "@mdx-js/mdx": "^1.6.19",
    "@mdx-js/react": "^1.6.19",
    "gatsby": "^2.24.91",
    "gatsby-image": "^2.4.21",
    "gatsby-plugin-manifest": "^2.4.37",
    "gatsby-plugin-mdx": "^1.2.52",
    "gatsby-plugin-offline": "^3.2.38",
    "gatsby-plugin-react-helmet": "^3.3.14",
    "gatsby-plugin-sharp": "^2.6.43",
    "gatsby-source-filesystem": "^2.3.37",
    "gatsby-transformer-sharp": "^2.5.20",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0"
  },

Configuring the plugin

Now that gatsby-plugin-mdx is installed in the project, we'll need to configure the plugin.

We'll need to specificy the location of local MDX files that will be processed. We can do this by specifiying the sources in the gatsby-source-filesystem plugin, found in the gatsby-config.js file. We'll also need to add gatsby-plugin-mdx to the list of plugins in the config file.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/pages/`,
                name: `pages`,
      },
    },
    `gatsby-plugin-mdx`,
  ],
}

Now if we create an MDX file in the pages directory, gatsby-plugin-mdx will parse the file. Let's go ahead and create a file called test.mdx in the pages directory, and add a bit of markdown to the file.

# Using MDX with Gatsby

**This** is an example

[Learn more about MDX here](https://mdxjs.com/getting-started/gatsby)

[Back home](/)

We should now be able to view the page by navigating to "/test". It should look something like this:

Great! Now we can create pages using MDX but we still need to ability to use custom components to replace the HTML elements that the Markdown is rendering.

Custom components

Now that we are able to programmatically create pages with MDX the next step is providing the Markdown with custom components to use. Let's go ahead and create a file call MDXComponents.js in the components directory. This is where we'll create our custom components.

Let's add a couple of basic components.

// src/components/MDXComponents.js
import React from "react"
import { Link } from "gatsby"

const CustomHeading = props => <h1 style={{ color: "purple" }} {...props} />

const CustomLink = props => {
  const href = props.href
  const isInternalLink = href && (href.startsWith("/") || href.startsWith("#"))

  if (isInternalLink) {
    return <Link to={href} style={{ color: "blue" }} {...props} />
  }
  return <a href={href} style={{ color: "red" }} {...props} />
}

const MDXComponents = {
  h1: CustomHeading,
  a: CustomLink,
}

export default MDXComponents

Above, we created two custom components, Heading1 and CustomLink. You'll notice in the CustomLink component, that we're rendering Gatsby Link when the link is internal and a regular a element when it's external. You can easily use third-party libraries like theme-ui or Charka-UI when writing your custom components.

Once these components are defined we then assign them to an object called MDXComponents that we will export to use globally with the MDXProvider.

Here's a full list of components that can be customized using the MDXProvider:

p
h1
h2
h3
h4
h5
h6
thematicBreak
blockquote
ul
ol
li
table
tr
td/th
pre
code
em
strong
delete
inlineCode
hr
a
img

MDXProvider

If we look at the test page again, you'll notice that our custom components haven't been applied to the Markdown. We do this by passing the custom components to MDXProvider which will make them globally available to MDX that is wrapped by MDXProvider. In this example we'll wrap the entire app.

To do this open up gatsby-browser.js

import React from "react"
import { MDXProvider } from "@mdx-js/react"
import MDXComponents from "./src/components/MDXComponents"

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={MDXComponents}>{element}</MDXProvider>
)

Above, we import React, MDXProvider and our custom components. The entire app is then wrapped with MDXProvider and the custom components are passed in.

Now if we head back to the test page you should see that the custom components have been rendered. We can inspect the links and now see that the logic in the CustomLink component has been applied to the elements, the internal links are Gatsby Links and the external links are a elements each with their own styles.

Wrap up

Using MDX in your projects can be a great experience for both developers and users. By using custom components via MDXProvider you can help streamline your content workflow and keep your design system consistent throughout your project.

Further Reference

Built-in form validation

Jordan Holt — Fri, 23 Oct 2020 00:00:00 +0000

There are many ways to validate user data when working with forms on the client-side. You can write custom JavaScript to do this, or use one of the many 3rd party libraries that are available like Formik for React. However, one of the easiest ways is to take advantage of the built-in validation in the HTML5 specs.

Let’s create a basic newsletter sign up form as an example. You can see the final form here.

One of the first ways to implement validation is by using the input element type attribute. When we include the type attribute some basic constraint validation and in some cases a value sanitization algorithm will be applied to the value of the form control.

For example, if we set the type attribute to “email”, the value attribute must be a valid email-address. If the value is not a valid email address then the browser will generate an error message for the user.

<p>
  <label
    >Email:
    <input type="email" />
  </label>
</p>

However, the type="email" attribute in this case would still consider a value like “hello@b” as valid because it accepts intranet email addresses. So we could further constrain the validation by using the pattern attribute. The pattern attribute accepts a regular expression.

<p>
  <label
    >Email(required):
    <input
      type="email"
      pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"
      title="example@example.com"
    />
  </label>
  An email address uses the following format: example@example.com
</p>

You’ll notice that we also added a title attribute that is used to describe the pattern. Most browsers will display the title as a tooltip when hovered over the element, and will inlcude the title in the error message when the value does not match the pattern. However this isn’t always the case and it’s good practice to display that information in other ways to assist the user.

Another common attribute when using built-in validation is required. When this attribute is included on an input element, the field will mandatory and an error message will be displayed if the form is submitted and the input is empty.

<p>
  <label
    >Email(required):
    <input
      type="email"
      pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"
      title="example@example.com"
      required
      placeholder="john@example.com"
      aria-required="true"
    />
  </label>
  An email address uses the following format: example@example.com
</p>

Again, it’s a good idea to convey this visually to the user. In this case simply by adding “(required)” to the label. The aria-required attribute is set to true which is mostly redundant as current browsers often set this value to true when the required attribute is present. But to support more browsers it’s been included in this example. We also added a placeholder attribute to provide a hint to the user at the intended use of the data entry.

Let’s go ahead and add a field that collects the users name. This will be a required field that accepts the users name. We’ll add a length constraint because most names are going to contain only a small number of letters.

<p>
  <label
    >Name(required):
    <input
      type="text"
      pattern="^[a-zA-z]+[a-zA-z]{1,}"
      title="Name contains the characters a-z and is under 100 characters in lenth"
      required
      aria-required="true"
      maxlength="100"
      placeholder="John"
    />
  </label>
</p>

Again, we’ve added the a pattern to this input element so only names containing the characters A-Z in upper of lower case will be valid. Be careful when writing your regular expressions as it’s easy to exclude people. For example if there are diacritic characters in a name the above pattern would not accept them as valid.

Now we could add a few styles to the form elements and take advantage of some of the UI pseudo-classes that are set when we use certain validation attributes. For example we can the :invalid pseudo-class to style the input elements when they do not meet the validation requirements.

form {
  padding: 1rem;
  font: 1em sans-serif;
  max-width: 320px;
}

form > h2 {
  line-height: 1.25;
  font-weight: 600;
  font-size: 1.5rem;
  color: rgb(26, 32, 44);
}

p > label {
  font-size: 1rem;
  padding-right: 12px;
  padding-bottom: 6px;
  opacity: 1;
  font-weight: 500;
  text-align: left;
  line-height: 1.25;
  display: block;
  border-width: 0px;
  border-style: solid;
  border-color: rgb(226, 232, 240);
}

input[type="text"],
input[type="email"],
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  border-style: solid;
  border-color: inherit;
  background-color: rgb(255, 255, 255);
}

input:focus {
  z-index: 1;
  border-color: rgb(49, 130, 206);
  box-shadow: rgb(49, 130, 206) 0px 0px 0px 1px;
}

input:invalid {
  background-color: rgba(255, 0, 0, 0.301);
}

input:valid {
  background-color: rgba(0, 128, 0, 0.301);
}

form > p > button {
  margin-top: 1rem;
  height: 2.5rem;
  min-width: 2.5rem;
  background-color: rgb(49, 151, 149);
  color: rgb(255, 255, 255);
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 600;
  border: 1px solid black;
  border-radius: 0.25rem;
}

form > p > button:hover {
  background-color: rgb(44, 122, 123);
  cursor: pointer;
}

Wrap up

With just a few simple attributes we can easily start to implement client-side validation when working with forms. While this won’t be as flexible as using JavaScript it can provide a simple solution. Remember that you should always be using thorough server-side validation and sanitization in addition to client-side validation.

Client expectations and onboarding for freelancers

Jordan Holt — Tue, 13 Oct 2020 00:00:00 +0000

Creating a clear process for onboarding new clients is an important step when freelancing. From the first interaction with a new client it’s important to define the relationship and expectations. I freelanced in the film & television industry for almost a decade before I transitioned into web development where I continue to freelance. I was project manager on several feature length documentaries, films, commercials and live events. My experience taught me the importance aligning expectations and clear communication throughout the life cycle of a project and continue to serve me well as a developer.

Here are a few of things I learned about taking on new clients and expectations.

Every journey is going to look different

The process around taking on new projects or clients is always evolving and no two projects will be the same. It’s important to stay flexible (within reason) to other methods and processes when interacting with new clients. Try and be empathetic and realize that the client is also taking a risk with you, help them feel secure by having a clear process from the moment you first interact. When there is no process in place, expectations cannot be aligned and a project can quickly get into trouble. So what does this process look like?

The process will vary based on your business and the type of clients and projects you work with. Regardless of how it takes shape the goal is to have a clear process in place from the initial contact of a client to when you agree to move forward with a project.

Here is an example of an onboarding process I use. This process will evolve based on you preferences and the scope of your work but it often follows this pattern.

Initial contact - A client has found me from one of several possible channels (i.e link at the bottom of a site you built, referral, promotion), and then reaches out. This is usually an email, but it could be a phone call or other method of contact you’ve setup. During this step the client usually gives me a bit a information about the project. At this stage it’s usually vague but the requirements are sometimes detailed.
Response & basic queries - When I find the time, I’ll respond to the client. During this step I provide a list of questions to the client to learn more about the project requirements. These are basic questions that I ask for the majority of projects I work on. Depending on your work you might even automate this by having a form that clients are directed to after the initial contact.
Review & schedule meeting - Once the initial questions are answered, I take some time to sit with them and make notes. Once I’ve gone through the answers and done some basic research on the clients business, I’ll request to schedule a brief meeting.
First meeting - This meeting is meant to be a discussion and is exploratory in nature. I meet with the client to get to know each other, learn about the project and determine if it’s a good fit. A 30 or 40 minute call or video meeting is usually enough time. The goals of this step are to clarify any questions I have and to get to know the client. Red flags at this point are not a good sign.
Statement of work - At this point, I’ll usually have enough information to decide if the project / client are a good fit for me. If I’m still not clear on the project at this point it could be a bad sign. But if things are clear and I feel it’s a good fit, then I start working on a statement of work document. What you actually send them will vary based on the nature and scale of the work and your personal preference, it could be a simple one page document sent in the body of an email or a larger document or series of documents but you should have the basics covered including deliverables, timelines, specific responsibilities and cost. I go into more detail below about what to include.
Signing and payment - When the client and I are synced up and in agreement regarding the scope of work and requirements then we agree to proceed. I have the client sign the statement of work and send the payment. Depending on your industry and the project this could be complete payment upfront but in my experience splits like 50% upfront / 50% upon completion or 50% / 25% / 25% are also common. The takeaway is that I’m not starting work without money in the bank.
Client Requirements - Generally there are a number of things that I’ll need from the client before I can get started. This could be photos or copy for a landing page, or API credentials or numerous other things that could prevent the project from moving forward. I usually send a brief checklist of items/tasks they need to complete before I get to work.

Get it in writing

It’s often appealling to keep things casual, especially when it’s a smaller project or if you’re just starting out but this is a mistake. Although people generally have good intentions, expectations can be the cause of a lot of headaches. Laying out requirements and important details like budget details, scope and payment schedule on paper will help avoid misunderstandings, align expectations and reduce any emotion that might occur if you or the client feel slighted. You have an agreement in writing that you can refer to.

Proposals, work agreements, statement of work and other documents can be used when working out the details of a new project. However, if you’re just getting started freelancing I suggest you keep things as simple as possible. A single document is often all that’s needed for smaller projects. The main goal is to align the clients expectations with yours and to agree in as much detail as possible the work requirements, budget and timeline.

For most of the projects I work on I use a single document called a statement of work. The statement of work document(SOW) was traditionally used as a document that accompanied a request for proposal (RFP) and detailed the work requirements laid out in the RFP. However the SOW format serves freelancers well as a document that can outline the important details of a project. Modified SOW documents are commonly used in the freelance world and are often used as binding contracts. Paperwork can be intimidating to some clients, so I find using a modified statement of work document that is used as an agreement works well for most of my use cases.

There are many different SOW templates out there, all of which include different elements. Some elements are obviously useful while others will only be beneficial for certain projects, with experience you’ll learn what to include. Here’s a few things I usually include in my statement of work document:

Introduction - This is going to include a general description of what the project is about and your understanding of the clients business and what will be gained by completing this project.
Scope of work / Responsibilities - This is a brief summary of your expectations regarding the scope and responsibilities for yourself and the client. This is usually an overview, while a more detailed and technical breakdown is often included in a work requirements section.
Exlusions - It’s a good idea to also include what is exluded from your responsibilities. This is optional and it’s generally assumed that anything not included in the scope or work requirements would be exluded, it doesn’t hurt to have more detail. With experience you’ll start to develop an instinct for to include here.
Timeline - This section will define how long the project will take to complete. It’s also common to indicate what happens in the case of delays. Depending on the size of the project you could incorporate the schedule and milestones into this section or have a separate section.
Work Requirements/Deliverables - This is a section where you can get detailed about the work requirements. In some cases it’s best to summarize these requirements for each stage of a project. Design Phase Build Phase * Handoff Phase
Cost / Payment Schedule - This is the section where you detail how much it’s going to cost. Make sure to include when payments due dates, down payments and some detail about the process around late payments and kill fees ect.

You can use this as a starting point and add or remove sections based on your needs. This document is going to change over time but the goal will remain the same, it describes the the work requirements and aligns expectations.

Communication is key

Open and ongoing communication is key when working in a team and even more important when working with new clients. Details like the frequency and method of meetings, dealing with documents, communication preferences and so on should be discussed and agreed upon when a project begins.

A well thought out communication process will help keep the project on track and avoid common issues. Here are a few of the common issues that inevitably creep up throughout the life cycle of a project:

Reevaluate scope

Inevitably the scope of the work you’ve agreed on will start growing, aka scope creep. There are a number of reasons for this but most commonly this is due to misunderstanding the project requirements and client expectations. Early on in the project it’s important to reiterate scope and go over the process with the client.

Schedule regular discussion for feedback

From the very beginning of a project ensure that there are regularly scheduled meetings for feedback. Call these meetings whatever you want to but there should be frequent and consistent and allow for you and the client to openly provide feedback on the project. Ideally these meetings take place in person, or on a video or voice call so that you the interaction is more natural. This gives an opportunity for those involved to voice concerns or suggestions without having to reaching out specifically about it.

Regularly evaluate the project status

To keep the project on track it’s important to keep track of the project status. Usually this is a document that will be updated with project information such as budget, obstacles, accomplishments and next steps. Ideally you’ll go over this document before you start any work and review it regularly in meetings.

Budget
Project obstacles
Accomplishments
Next steps

To avoid these issues, it’s helpful to have a communication strategy in place at the beginning of a project. Again, the simpler the better and I find that a single document serves my purposes well. Here are a couple of things I like to include:

Project Team Directory - A simple list of all the team members involved in the project, their role and contact information.
Contact Preferences - At the minimum you should agree on preferred methods of contact. You want to set some boundaries about when and how contact will take place. For example, don’t call me in the middle of the night with unless it’s an emergency and agree what constitutes an emergency.
Communication Matrix - Fancy term for a list of the meetings, their goals and the method and frequency of the meetings. Below is an example of how this could look:

Type	Goal	Method	Frequency
Kickoff	Initial project meeting. Introduce the project and review the requirements	Conference call - Zoom	Once
Project Team Meetings	Review status of project	Conference call - Zoom	Weekly. Mondays @ 10am
Project Status	Report of the status of project, milestones and issues	Email	Monthly

Documents - How will project related documents be handled? Basecamp, Trello, Asana, Google Docs? Determine how documents will be stored and how to handle revisions etc.

Remember you’re communicating with other humans

I often hear the phrase “this project has many moving parts” and I usually chuckle because those parts are generally other humans. We all have lives outside of a project, we have families and other obligations that are important to us. Determining healthy boundaries around communication early on in a project is essential to its overall success. Panicked phone calls in the middle of the night are an easy way to ruin a working relationship and can easily be avoided by having a process in place.

It’s possible that a client is a new business owner and still discovering their own process, and the ability to recognize this can help build meaningful relationships in your career. Remember that people have lives outside of the projects they work on.

Here are a few things suggestions that I find helpful when working with new clients:

Have some empathy for the clients. If you’re having a difficult time with a client you can use it as an exercise in patience.
Don’t ever put up with a tyrant. Coming from film and television I can tell you countless stories of big egos and bad behaviour, but it’s not isolated to that industry. Don’t ever put up with yelling, rudeness or any other poor behaviour.
Practice active listening with your client. Sometimes we become frustrated just because we feel we’re not being heard. Working with new clients creates a great opportunity to learn how to listen and recognize when others aren’t listening to you.
People have a big impact on the success of a project. Psychological safety is an important part of creating an environment of success. A hostile, judgmental or otherwise negative environment is a recipe for disaster.
Share with your clients. Clients are taking a risk when invest in you. One way to make them feel their investment is safe is to openly share with them. Share your work, your though process and approaches regularly and don’t keep things tightly controlled or hidden from view.

Wrap up

Freelancing as a developer can be a rewarding experience if you have a clear process for onboarding and communication in place from the onset of a project. With experience you’ll start to form a process that works best for you. The process doesn’t need to be overly formal or have an overwhelming number of documents, but there needs to be enough detail to avoid common issues. The more you’re able to align expectations the more likely you are to successfully complete a project and develop lasting, meaningful relationships with clients.

Further resources

Getting started with forms

Jordan Holt — Fri, 09 Oct 2020 00:00:00 +0000

Forms are one of the most common ways that users interact with a site or app. From a simple newsletter subscription to a complex multi-line shipping form, they are found on almost every site and app on the web. In this article we’ll build a basic form that introduces some commonly used concepts and elements.

What is an HTML form?

A form is a component of a web page that a user can interact with, and provide data to, which will then be submitted and sent to a server for processing (e.g. submitting an email address to subscribe to a newsletter) or in some cases used client-side (e.g. update the UI to add or remove elements).

Forms have various control elements that users can interact with such as buttons, text inputs, range controls and checkboxes. We’ll have a closer look at those elements shortly.

The steps to creating a form

Creating a form can generally be broken down into a few steps:

Designing the form
Creating the user interface
Creating the server-side or client-side code to process the form data
Configuring the form to communicate with a server.

Form design and server-side form processing are beyond the scope of this article and deserve some thorough attention. If you’re interested in reading more about form design check out these articles:

Form design:

UXMatters has several great resources on forms like this article on best practices.
UX Planet is a blog about user experience and has a good article on the basics of efficient forms

Server-side form processing:

MDN has a great article about processing HTML form data using Node.js and Express.

Defining the data

In this article we’ll be creating a form for ordering a hamburger. Let’s quickly define what data this form needs to collect.

User information
- Customer name
- Telephone number
- Email address
Hamburger type
- Beef
- Veggie
Toppings
- Cheese
- Ketchup
- Mustard
- Pickle
- Onion
Delivery instructions
- Any special comments for delivery (e.g. enter through side-door)

Now that we have a better idea of what data the form needs to collect, let’s go ahead and start building the form.

The form element

The first thing we do when we create any form is to use the <form> element. All of the form controls will then be placed inside.

<form
  action="https://tasty.hamburgers.example..com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
></form>

The form element is a container element that defines our form. While the attributes are optional, you’ll find these are very common for web forms.

action - The form action takes a URL that defines the location where the form data will be sent for processing. In this case when a user submits this form the data will be sent to https://tasty.hamburgers.example.com/order for processing on the server.
method - Forms interact with servers in a few ways, most commonly is the HTTP GET and POST methods. This attribute defines which method the form uses.
enctype - Defines the type of content that is used when submitting form data.

Now we can start adding the form controls.

Form controls

The form controls will be contained inside the form element. Let’s start by adding an input that will collect the users name.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
</form>

Inside of a <p> element we added our first form control, a label and an input to collect the users name. Inputs are the most common type of form control. You’ll notice that the label and input is contained inside a <p> element. It’s very common to see forms that are structured using list elements such as <ul> and <li> but in this article the form controls will be contained in <p> elements.

<label> - The label element represents a caption for the form control, in this case an <input>. In this example the form control (the <input) is directly inside the label element, however you’ll often see them seperated like this:

<p>
  <label for="name">Name: </label>
  <input name="custname" type="text" id="name" required />
</p>

When the control is not directly inside the label, you need to use the attribute and a corresponding on the control. When users click / activate the label, the form control will be activated as if the user clicked on it.

<input> - The input accepts data from the user. It accepts a huge number of data types and attributes and is fairly complex HTML element because of the countless combinations. Here are the attributes we are currently using in our example:
- name - For every form control that is submitted, we need to give a name to the data. When a user submits the form to our server, the server will expect to receive that data in this case as parameters in a HTTP POST body. In our example the “custname” represents a parameter that the server is expecting.
- type - The type attribute defines and controls the data type of the input element. In our example we are using the keyword “text” whose data type is “text with no line breaks”.
- required - This is a constraint attribute that is used in simple client-side validation. When required is used, the user will be notified when attempting to submit the form without the corrosponding input fields completed.

Let’s finish off the customer information controls by adding the telephone and email fields.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
</form>

Grouping form controls

Let’s add the ability to choose the hamburger type to our form. There are two types of hamburgers patties available, “Beef” & “Veggie”. The most intuitive way for a user to select the option is by using radio buttons. Radio buttons also use the input element and are often grouped together.

To select a radio button, the input attribute type must be set to “radio”. For the radio buttons to work as a group they must share a common name attribute, in this case the attribute has a value of “patty”.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
</form>

<fieldset> - This element is used when grouping a set of form controls together. It usually contains a caption that is supplied by the <legend> element.

Now let’s go ahead and add the ability for a user to pick the hamburger toppings. For this we will use the input type “checkbox” since people will usually want more than one topping on thier burgers. Again we will give these controls a shared name attribute and contain them inside the <fieldset> element.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
</form>

Add a text area

A common part of a form for deliveries is a special instructions text area. This input allows users to add a small amount of instructions for the delivery. Let’s go ahead and add one to this form using the <textarea> element.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
  <p>
    <label
      >Special instructions:
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>
</form>

You’ll notice we added a maxlength attribute to the text area. This was done to prevent really long special instructions and is another example of a constraint attribute and client-side validation.

Add a submit button

We now have all the markup we need to collect the customers data for their hamburger order. However, they need a way to submit the order. Let’s go ahead and add a submit button that will send the data to the server when activated.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
  <p>
    <label
      >Special instructions:
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>
  <p><button type="submit">Submit</button></p>
</form>

The default action for a button is submit but it was added to the markup for clarity.

Adding autocomplete functionality

Some browsers try and help users fill out forms by autocompleting certain fields with previously stored information such as name and address. We can add the autocomplete attribute to certain inputs in an attempt to make it easier for the user to complete the form.

Let’s add the autocomplete attribute to the following inputs:

customer name
telephone number
email address

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label
      >Name: <input name="custname" type="text" autocomplete="name" required
    /></label>
  </p>
  <p>
    <label
      >Telephone: <input type="tel" name="custtel" autocomplete="tel" required
    /></label>
  </p>
  <p>
    <label
      >Email address:
      <input type="email" name="custemail" autocomplete="email" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
  <p>
    <label
      >Special instructions:
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>
  <p><button type="submit">Submit</button></p>
</form>

Wrap up

We covered the basic markup of an HTML form, form controls and introduced client-side validation and features like autocomplete. While this only scratches the surface of HTML forms, hopefully you now have a better understanding of the structure and functionality of them. In future posts I’ll continue with this example and style this form and build on the client-side validation by using JavaScript.

You can find the source code for this form here:
Completed hamburger form

Forem: Jordan Holt

Important Network Concepts for Beginners

What is a network?

Converged networks

Availability

Network uptime

Network traffic

Network Components

Client

Server

Hub

Wireless Access Point

Switch

Router

Media

Wide Area Network (WAN) link

Wrap up

What you need to know about URLs

What are URLs?

Structure of a URL

Scheme

Authority

Host

Port

Path

Parameters

URLs in HTML

Wrap Up

Further reference

Fundamentals of Cloud Computing

What is the cloud?

Data centers & hosting providers

Data centers

Hosting providers

Intro to cloud computing

Software as a service (SaaS)

Platform as a service (PaaS)

Infrastructure as a service (IaaS)

Cloud providers

Wrap up

Further reference

JavaScript Scope: What is it?

Scope types

Global scope

Block scope

Module scope

Scope pollution

Wrap up

Further reference

JavaScript: Tagged template literals

Wrap up

Further reference

Create a modal overlay using JavaScript

Goal

Getting started

Activating the modal

Dismiss the modal

Add sign-up form

Success message

Wrap up

Further reference

VS Code: Configure for web development

Getting started

Basic settings

Font

Color themes

Select a color theme

Workflow

Style / Format

Settings

Wrap up

Further reference

JavaScript variables: Getting started

Declaring a variable

Naming variables

Variable scope

let keyword

const keyword

Wrap up

Further reference

`let` keyword

`const` keyword