DEV Community: Will Harris

Why I Use Gatsby for My Website

Will Harris — Wed, 29 Jul 2020 01:04:54 +0000

Originally posted on Will's blog

I built my personal website using React and Gatsby. Partially this was to give me the opportunity both to learn a new tool (Gatsby) and to practice with GraphQL.

Recently I stumbled across this blog post listing things the author would "like younger developers to think about."

Many of the points in the article seem to bemoan the widespread use of front-end frameworks in web development. I can sympathize with this point; as the author says, "sometimes a website is just a website."

However, I do think that there are good reasons for using React and Gatsby—or other static site generators—to create websites. I want to use this post to explore some of my reasons for embracing Gatsby.

I also want to encourage anyone to challenge me on these reasons. I use Gatsby because I genuinely think it is the best tool for my use-case, but am always open to learning better ways of doing things.

Image optimization

Images account for a significant portion of the size of most websites. Because of this, optimizing images can greatly improve a website's performance. The fewer bytes to download, the faster the browser can get to rendering content on the screen.

Best practices for performance across a range of devices call for multiple image sizes and resolutions. We could manually create different versions of every image that we use on a website, but this adds a lot of duplicate work for every image that we include. Another downside of the manual approach is the added bookkeeping involved in ensuring that all of the images get optimized before they make it to production.

Gatsby makes image optimization much easier, harnessing the power of build plugins and transformers to eliminate most of the manual work.

Gatsby sources data using source plugins, which allow the developer to pull data from different sources. gatsby-source-filesystem sources data into our application from the project's local filesystem, creating File nodes in Gatsby's GraphQL API. Gatsby applies various transformer plugins to these File nodes, turning them into various other types of nodes. For image processing, the gatsby-transformer-sharp plugin takes supported image files and creates ImageSharp nodes from them.

These ImageSharp nodes can then be manipulated by the Sharp image processing Node.js library to help with image processing and optimization. We perform these manipulations with GraphQL queries in Gatsby, which allow Gatsby and Sharp to perform all of our required optimizations while building the final static site. This is where we save a ton of work compared to optimizing images manually. We only need to configure how we want our images optimized, and Gatsby handles the rest.

Gatsby also ships an image component that is designed to work well with Gatsby's GraphQL queries. It is optimized specifically for fixed width/height images and images that stretch to fit full-width containers.

The gatsby-image component automatically helps with image optimization in several ways. It:

Loads the optimal image size for a given screen size, using the srcset property on a picture element to load the correct image size for the current viewport.
Holds the image's position in the document with a placeholder so that the page doesn't jump around as images load.
Uses either a "blur-up" effect or a "traced-placeholder" SVG to show a visual placeholder while the full image loads.
Lazy loads images, reducing bandwidth and load time.
Can convert images to the WebP format if it is supported by the browser.

All of these features are "batteries-included" with the gatsby-image component, saving the developer a ton of manual image optimization work.

No Backend / Moving Parts

Setting up a "traditional" website is a fairly complex process. From provisioning VMs to run instances of a server-side app, to configuring Docker images to ensure a consistent environment, to configuring auto-scaling solutions like Kubernetes. There are a lot of moving pieces to keep track of.

And if we want to deploy any changes to our site with this structure, it involves deploying a completely new version of the site. We'd have to spin down existing versions of the service, spin up the new version, and deal with any issues that might pop up during the process.

Gatsby simplifies this process by building websites as static HTML files which can be hosted on a CDN, getting our content as close as possible to our users. We can then configure a continuous integration (CI) system to rapidly build and deploy code updates to the CDN.

My site is hosted on Netlify, which allows me to use a GitHub repository as my CI system. If I want to publish a new version of the site, all I need to do is merge a pull request into my main branch. Netlify is constantly listening for pushes to that branch—as soon as changes are noticed, a new version of the site is built with Gatsby and pushed to the CDN. Typical deploys for me right now take about one minute.

Both approaches can result in robust, performant websites. However, deploying and hosting static content via CDN has far fewer moving pieces and completely removes the server management aspect of developing a website.

Build Optimizations

Gatsby sites are built in React and then built into static HTML files by Node.js processes. The process of converting pages and content on the server into HTML is called server-side rendering (SSR), and it's nothing new.

Developers have been rendering HTML pages on servers for many years. Previously, however, sites would use languages like PHP on the server to fetch data from databases, in response to user requests, and compile it into an HTML document to send to the user.

With Gatsby, all of the SSR magic occurs during the build process. This build process has quite a few steps, but as a quick summary:

Gatsby checks for data sources defined in the gatsby-config.js and gatsby-node.js files. It then creates Node objects from the data it finds in these sources.
Gatsby infers a GraphQL schema from the Node objects created in the previous step. This is where Gatsby forms the data layer for our application, making all of the data brought in from our sources available in a GraphQL API.
Gatsby creates pages from the React components in our site.
GraphQL queries from our React components are extracted from our components and run against the GraphQL layer, providing data for all of the HTML pages.
Static files are created for all of our pages, with all data bundled alongside our views in the public directory.

The resulting HTML files created by Gatsby also use modern browser APIs to maximize performance, resulting in crazy fast websites.

Gatsby harnesses the IntersectionObserver API, which conditionally performs actions when elements enter the browser's viewport.

Specifically, in Gatsby IntersectionObserver is implemented in the Link component for routes internal to the site. The behavior has two parts:

An IntersectionObserver is registered for all Link components. This registers an idle prefetch request for each Link's resources, allowing the browser to automatically start loading those resources as soon as the browser is in an idle state.
On a mouseenter event for any Link component, a fetch request is fired with a non-idle request for the Link's resources.

In combination, these two techniques almost guarantee that internal page data will be prefetched, which makes page loads on our site feel instantaneous.

Plain Text

One additional benefit I've found in using a system like Gatsby for my writing is the ability to keep all of my data in plain text markdown files.

As Dave Thomas and Andy Hunt write in The Pragmatic Programmer:

The problem with most binary formats is that the context necessary to understand the data is separate from the data itself. You are artificially divorcing the data from its meaning. The data may as well be encrypted: it is absolutely meaningless without the application logic to parse it. With plain text, however, you can achieve a self-describing data stream that is independent of the application that created it.

By keeping all of my writing in markdown files, I guarantee that I'll never be dependent on a specific piece of software to use my content. I also can harness the inherent semantics of markdown to generate HTML elements from my writing.

Gatsby uses the gatsby-transformer-remark plugin to make the contents of my markdown files available in GraphQL, allowing me to inject the generated HTML into my blog posts at build time.

This is by no means a complete list of reasons for choosing static site generators like Gatsby for building modern websites, but I hope it can at least be helpful for anyone who hasn't yet jumped into the Gatsby ecosystem. It can be intimidating at first, but the time spent learning the system is well worth it for the speed of the final site. The developer experience building and maintaining a Gatsby site is also excellent.

Do you have other static site generators or other approaches to building websites that you're crazy about? Tweet me @will__tweets and let me know, I'd love to hear about it!

React JSX Basics

Will Harris — Tue, 14 Jul 2020 17:21:32 +0000

Originally posted on Will's blog

Over the last year I've been on a mission to learn modern JavaScript. Much of the language has changed and improved since my initial exposure to it, and I've found no shortage of things to explore. I've also landed on React as my front-end framework of choice and have been enjoying working with it immensely.

For some time I've wanted to sit down and think through the different basic building blocks of React, so this will be the first of a series of posts covering React fundamentals as I understand them.

Today let's talk about JSX.

What is JSX?

JSX, or JavaScript XML, was introduced as React's syntax extension to JavaScript. React embraces the idea that rendering logic should be coupled with other UI logic -- things like how events are handled, how data flows through the application, and how to deal with changes to application state over time.

It's worth noting that JSX is not a requirement for using React: you can do everything without JSX that can be done with JSX. However, many people find JSX to be a useful tool for working with UI elements inside React's .jsx files. It also helps React produce more useful error and warning messages.

Let's look at a basic example of JSX:

let greeting = <h1 className="greeting">Hello, world!</h1>

If we run this code in a normal JavaScript file it will immediately throw a SyntaxError at the < because it isn't valid JavaScript syntax.

We're able to mix what looks like HTML with JavaScript here because under the hood it gets 'translated' into valid JavaScript at runtime with a tool called Babel.

An explanation of Babel is beyond the scope of this post. Their documentation is excellent if you'd like to learn more!

The output from Babel will look like this:

let greeting = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
)

Note that because React does all the heavy lifting of turning our JSX into React.createElement calls, React must always be in scope in our JSX files.

Embed Expressions with JSX

We can use any valid JavaScript expression (but not statements) inside curly braces in our JSX.

I like to think of curly braces in JSX as indicating that we are stepping out of HTML-land and into JavaScript-land.

As an example, imagine that we have an element of an application that displays a random number between 0 and 100 every time a user visits the website. Using JSX we can do something like this:

function App() {
  let randomNumber = Math.floor(Math.random() * 100)
  return (
    <p>Your random number is: {randomNumber}</p>
  )
}

We can wrap JavaScript expressions in curly braces inline in our JSX and they will be translated into whatever value the expressions evaluate to at runtime.

Use JSX to Set HTML Attributes

We can also use JSX to set HTML attributes, allowing us to use dynamic values as attributes on HTML elements. Let's look at an example:

let element = <img src={userImage} />

When we use this element, we can render different images depending on the useImage value passed into the src attribute. This allows us to reuse the same element with different values, providing flexibility and reusability in our code. The useImage value could come from anywhere in our application -- an HTTP request, user input, etc. Our JSX is the same, it is only concerned with rendering the final value.

Children in JSX

JSX tags can also contain children, just like HTML elements:

let element = (
  <div>
    <h1>This is a nested heading!</h1>
    <p>We can nest as many children as needed!</p>
    <div>
      <ul>
        <li>Turtles</li>
        <li>All</li>
        <li>The</li>
        <li>Way</li>
        <li>Down!</li>
      </ul>
    </div>
  </div>
)

We wrap this JSX in parentheses to avoid issues with automatic semicolon insertion (ASI))

We can also use JavaScript anywhere in this hierarchy of children, just like with any other JSX element.

That wraps up our brief look at what JSX is and how it works. Remember that JSX is just syntactic sugar on top of normal JavaScript.

JavaScript: How to Remove Duplicate Values from Arrays

Will Harris — Fri, 03 Jul 2020 18:15:06 +0000

Originally posted on Will's blog

In a previous post we saw how to determine whether a JavaScript array contains duplicate values. Today, I want to show a few different methods I've found for removing duplicate values from an array.

Using the `Array.prototype.filter()` & `Array.prototype.indexOf()` methods

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = originalArray.filter((item, index, array) => {
  return array.indexOf(item) === index
})

// uniqueArray === [1, 2, 3, 4]

The basic strategy here is to iterate through originalArray and check to see if the index of the item we are currently examining is the same as the index of the item in the originalArray.

Because indexOf returns the first index that it finds for a given value, if it isn't a duplicate value then the index for that item must be the same!

Note that this method is not the most efficient: it executes in quadratic time. So if the arrays you're checking are very large in size, you may want to use a different method.

Another thing worth nothing is that we can use the same method to return only the duplicate values by inverting the comparison:

let duplicateArray = originalArray.filter((item, index, array) => {
  return array.indexOf(item) !== index
})

Using `Array.prototype.reduce()` & `Array.prototype.includes()`

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = originalArray.reduce((unique, item) => {
  unique.includes(item) ? unique : [...unique, item]
}, [])

// uniqueArray === [1, 2, 3, 4]

Here the strategy is to keep a running list of the unique items in our reducer function's 'accumulator' (unique). For each item in originalArray we check to see if the accumulator includes the item under consideration.

If it does contain the item, return the accumulator without making any changes, in effect 'skipping over' that item.
If it does not contain the item, spread the values in the accumulator into a new array, and add the item under consideration.

Array.prototype.includes returns a boolean value -- true if the value is found in the array, false if not. This boolean value drives our conditional, determining what to do with each value.

I find this approach less intuitive and harder to read, but it works.

Also note that the empty array that is passed in after the reducer function is the starting value for the accumulator, so the first pass through the reduce, unique is an empty array.

⚡ Using the ES6 `Set` object ⚡

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = array => [...new Set(array)]

// or

let uniqueArray = Array.from(new Set(originalArray))

// uniqueArray = [1, 2, 3, 4]

This approach harnesses the power of the Set object, introduced in ES6.

Sets are guaranteed to preserve the order of the inserted items, and to only contain unique values. Therefore it is by definition impossible for a set to contain duplicates!

Here we call the Set object's constructor, passing it the array we'd like to construct a Set from. Then, once we've trimmed out all the duplicates and stored the remaining values in our Set, we convert back to an array and return the result.

I've seen some discussion of this approach being a bit less performant if the array under consideration is very large and contains many duplicate values. However, the same discussion found that this approach is very efficient in a scenario where the data has very few duplicates.

Personally I think the conciseness of this last approach is enough of a benefit to warrant using the Set object approach, unless there's a compelling performance reason not to.

Shell: Keyboard Shortcuts Pt. 1

Will Harris — Mon, 01 Jun 2020 19:05:59 +0000

Originally published on Will's blog

As developers, we spend a great deal of time in our text editors and terminals. Any boost in efficiency with these tools has a direct impact on our productivity. Small gains with these tools add up over time and get us closer to feeling like our computers can respond immediately to our thoughts.

This series of posts is primarily a way for me to store and reference some of the shell tricks and tips I've come across that I can never remember. I hope that they can be of some use to you as well.

I should also note: my understanding is that all of these commands will work with both bash and zsh default shell configurations, but if I'm mistaken in this please reach out to correct me!

Navigating the current line

Moving around the current line in your terminal with the ← and → keys is slow - it's no way to live your life. The following table shows some shortcuts for navigating the current command quickly.

Navigation	Shortcut
Go to beginning of line	`Ctrl + A`
Go to end of line	`Ctrl + E`
Go to next word	`Alt + F`
Go to previous word	`Alt + B`
Toggle cursor between current position and beginning of line	`Ctrl + X + X`

Editing and deleting text

These commands help quickly edit and delete items in the current command.

Edits	Shortcut
Delete previous word (via cutting)	`Ctrl + W`
Delete next word (via cutting)	`Alt + D`
Edit current command in default terminal text editor	`Ctrl + X - Ctrl + E`
Clear command line	`Ctrl + U`

Cutting and pasting text

The shell has some built-in commands that can help you quickly cut and paste text without using the mouse.

Action	Shortcut
Cut previous word	`Ctrl + W`
Cut next word	`Alt + D`
Cut from cursor to end of line	`Ctrl + K`
Cut from cursor to beginning of line	`Ctrl + U`
Paste the cut contents at current cursor position	`Ctrl + Y`

There is a little bit of nuance here.

The Ctrl + W and Alt + D commands build up the cut buffer sequentially from within the current command. This can be useful if you want to cut the first/last three words in a command, for example, but not the entire line. This behavior, as far as I can tell, does not allow you to bounce around different parts of the command, but only from any given word forward/backward. As soon as you start navigating around other parts of the command and making cuts, it seems the cut buffer is overwritten.

(If my understanding of this is flawed, please let me know.)

Controlling the terminal

Action	Shortcut	Command
Clear terminal screen	`Ctrl + L`	`clear`
Close terminal screen / tab	`Ctrl + D`	`exit`
Stop current job	`Ctrl + K`
Restart stopped job and send to foreground		`fg`
Restart stopped job and send to background		`bg`
List running and stopped jobs		`jobs

One nice shortcut for starting a program and immediately sending it to the background is the bitwise & operator. For example, the following command would start firefox and send the job to the background of the current terminal instance.

firefox &

This list is just a taste of the things we can do with our terminals. Mastering these shortcuts will greatly increase how quickly and efficiently you can navigate and control your command-line environment.

If you have any other keyboard shortcuts that you feel should be included in this list, please reach out and let me know.

JavaScript: How to Check if an Array has Duplicate Values

Will Harris — Tue, 26 May 2020 03:27:31 +0000

Originally posted on Will's blog

When dealing with arrays of values in JavaScript we sometimes want to determine if the array contains any duplicate values. Unfortunately, JavaScript arrays do not expose any built-in methods that can do this for us -- we have to write the implementation ourselves.

One approach to this problem might look like this:

function checkForDuplicates(array) {
  let valuesAlreadySeen = []

  for (let i = 0; i < array.length; i++) {
    let value = array[i]
    if (valuesAlreadySeen.indexOf(value) !== -1) {
      return true
    }
    valuesAlreadySeen.push(value)
  }
  return false
}

This works, but in the worst-case scenario where the only duplicate value occurs at the end of the array, this is not a very performant approach. We would have to iterate through the entire array (which could be huge!) only to realize at the last element that there is actually a non-unique value in the array.

Another approach that I recently learned harnesses the power of ES6 Sets.

In case you aren't familiar with Sets in JavaScript (I wasn't until recently!), here is the MDN definition:

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

Read that last line one more time, as that is our secret sauce here. 'A value in the Set may only occur once; it is unique in the Set's collection.'

This fact means that we can convert our original array into a Set and then be confident that it only contains unique values. Once we've extracted all of the unique values from the array and stored them in our Set, we can compare the lengths of the array and the Set. If the lengths are not the same, it must follow that the array contained duplicate values!

Here's what that approach looks like:

function checkForDuplicates(array) {
  return new Set(array).size !== array.length
}

If the length of the Set and the array are not the same this function will return true, indicating that the array did contain duplicates. Otherwise, if the array and the Set are the same length the function will return false and we can be certain that the original array contained no duplicate values!

I really like this second approach for how concise and expressive it is, but you might run into browser support issues if you need to target older browsers so take that into consideration!

JavaScript: Double Not Operator?

Will Harris — Sun, 24 May 2020 02:37:59 +0000

Article originally published on Will’s personal blog

Here's a little JavaScript tidbit I learned about recently.

The ! operator is a familiar face in the JavaScript landscape, showing up when we need to negate a value.

let thing = true
thing = !thing
thing === false // true

Here we take a Boolean value (true) and invert it to the opposite value (false).

This also works with non-Boolean values as well, since all values in JavaScript are either truthy or falsy.

let thing = "This string is truthy!"
thing = !thing
thing === false // true

Here we can see how the ! operator casts the value from a string value (truthy) to it's opposite Boolean value false. The same conversion happens when we use the ! operator on any value in JavaScript. If the value is already truthy it is cast to false, and vice versa.

It follows then that !! just performs this inversion twice.

let thing = "This string is truthy!"
thing = !!thing
thing === true // true

This is really just a shorter way to cast a value to it's Boolean counterpart. If a value is already falsy, using !! will result in the value being cast to false.

We could just as well do this for the same result:

let thing = Boolean("This string is truthy!")
thing === true // true

What's the difference? As far as I can tell, there is none!

Although !! is more succinct, the argument could be made that it is more confusing syntactically than Boolean(value).

DEV Community: Will Harris

Why I Use Gatsby for My Website

Image optimization

No Backend / Moving Parts

Build Optimizations

Plain Text

React JSX Basics

What is JSX?

Embed Expressions with JSX

Use JSX to Set HTML Attributes

Children in JSX

JavaScript: How to Remove Duplicate Values from Arrays

Using the Array.prototype.filter() & Array.prototype.indexOf() methods

Using Array.prototype.reduce() & Array.prototype.includes()

⚡ Using the ES6 Set object ⚡

Shell: Keyboard Shortcuts Pt. 1

Navigating the current line

Editing and deleting text

Cutting and pasting text

Controlling the terminal

JavaScript: How to Check if an Array has Duplicate Values

JavaScript: Double Not Operator?

Using the `Array.prototype.filter()` & `Array.prototype.indexOf()` methods

Using `Array.prototype.reduce()` & `Array.prototype.includes()`

⚡ Using the ES6 `Set` object ⚡