DEV Community: Colby Fayock

Crafting a React/Next.js Single Page Application Optimized for SEO

Colby Fayock — Thu, 10 Jun 2021 20:59:21 +0000

In a rush? Skip to tutorial steps.

What's the first thing you do when you are looking for something?

If you're like me, you probably pull out your phone and search for it on Google. It makes optimizing websites for search engines more important than ever. And as a developer, I get it, SEO is a critical part of any business’ online presence. It's my job to be sure our tools can support that effort of being easily visible on search engine results pages.

And since React is the most popular JavaScript framework, these tools will most likely be related to it or React frameworks like Next.js.

But, how can we be sure our React dynamic applications are SEO-friendly for our favorites robot crawlers to understand?

That's when the real work comes in. Stop googling: "SEO with react" 'cause you're are at the right place to get started, my friends!

It’s exactly what we'll explore today. How Next.js can help give an SEO boost to our React-powered SPA.

In this article, I’ll walk through the following:

What’s a SPA?
What are the challenges with SPA SEO?
Why is SEO important?
What is Next.js?
How to get started building SEO-friendly React apps with Next.js?

For more tech-agnostic info about single-page application SEO, check out this in-depth guide.

What is a SPA?

A SPA (or Single Page Application) is a type of web application that provides a dynamic and interactive experience all from one point of entry.

Traditionally, you might be more familiar with a server-side approach, where each page of your website has its own “route” (or page URL), but with a SPA, you have a single route that loads up the entire website in the browser using JavaScript.

It’s a little easier to get your head around it with an example. If you’re building a React application, React needs to "mount" onto a page element. You can do this by serving a page like index.html to your visitor, then in the browser, React will provide that mounting action based on your instructions.

Once that page mounts, React kicks in and enables you to do whatever you want. Whether it’s providing simple things for the visitor to interact with or providing some routing mechanism to change pages, in this example, that entire experience originated from that single page.

What makes single-page application SEO challenging?

Part of the issue of serving an entire application based on a single entry point (index.html) is when Google is trying to look at that URL, they’re only ever going to be able to see the content and metadata from that single initial page.

This limits what pages you can make available to Google, ultimately hurting your ability to index more content. It’s that indexed content that makes your website or application discoverable by search engines.

Also, traditionally, a single-page application leans heavily on JavaScript to provide a dynamic experience. For many simple use cases, this might be completely fine, as Google can support a limited amount of JavaScript when crawling the page, but this isn't true of all search engines.

With these challenges, we start to lose our competitive advantage when trying to make use of one of the biggest potential traffic sources on the web.

Why is SEO important?

SEO (Search Engine Optimization) is the practice of helping search engines more easily read and understand what your website or application is about.

This is critical if your goal is to bring as many people as you can to your website. The goal of people researching on the internet is to ultimately find something, and that something can be your business or the content you’re trying to promote. More traffic (visitors) means more potential sales (or customers) for your business.

Search engines are constantly getting smarter, with hardworking teams at Google, Bing, Duck Duck Go, and other engines constantly fine-tuning search algorithms. But we wouldn’t need to write this article if they were perfect. While they might be able to figure out what your blog post is broadly about or what types of products your business sells, it’s limited by what information you provide and how you provide it.

If you’re solely relying on a SPA that is hard to crawl and doesn’t give much information on that first and only page that Google can see, you’re missing out on potential opportunities. People could have found your content instead of your competitors when searching.

What is Next.js, and how does it help with SEO?

The awesome thing about the web is that not only are search engines getting smarter, but the tools we can use as developers are becoming more mature. It gives us ways to solve our SEO needs without sacrificing any functionality that makes a SPA great.

Next.js is a web framework that sits on top of React, providing a bunch of features out of the box that can take our applications to another level.

In the example of our traditional SPA, we had a single index.html file. React would mount the application in the browser and handle any interactions and page navigation in that file.

A different approach would be to have .html files for all of our pages. For each visited page, React would mount the application and content for that particular page (e.g., About page, Contact page) rather than loading from the initial homepage.

To do that, Next.js has a few different techniques and APIs that developers can interface with to make sure we’re providing as much SEO value as we can.

Static Site Generation

Static Site Generation (SSG) is the practice of pre-rendering some or all of the pages of a website/application ahead of the browser at compile time. The index.html would include most, if not all, of the experience that will get loaded in the browser.

This works wherever the website or application is compiled from, that server or environment will bring in any data sources and use React to build the website just like it would inside the browser, but export it into an HTML file. This file would then get served to the visitor.

React would still “hydrate” the page and provide the ability to add a more dynamic experience. However, by pre-rendering, you’re able to reduce the amount of work the browser has to do to get your visitor the experience you want to give them.

Each of these pages is located in individual “routes,” like mentioned before. Visitors, or in our case, search engine crawlers, would then be able to go directly to the page and see the content specific to that page.

This means that not only can we have page-specific metadata, like a title and description, but the search engine can also read and understand that page’s content and recommend it to people based on their searches.

Nevertheless, rendering pages at compile time comes with its limitation. The information that can be sent immediately to the browser is limited because of its static nature. While we can still load that dynamically in the browser, some use cases may need a completely dynamic experience that could be challenging to accomplish.

Server-side Rendering

Server-side Rendering (SSR) provides a similar concept to Static Site Generation. Still, instead of compiling each page ahead of time into static files, that experience will be rendered by React at request time. For instance, if your visitor is trying to visit the Contact page (/contact), the server will recognize the route that is being visited, fetch all information related to that page, compile the HTML, and return it as part of the initial response.

Similar to SSG, using this technique, you can leverage the ability to provide page-specific information and context to both our visitors and search engines. This way, we make sure our content is as searchable as it can be.

While both options work well for providing good SEO, there are some tradeoffs with SSG and SSR. We won't get into this article, but it should be considered when making the decision for your website or application.

Next.js Head Component

Regardless of the option you choose, a challenging part of using tools like React for building a web page is that these applications get mounted into the of an HTML page. This means that you don’t have direct access, without additional tools, to make any changes to places like the of a website. It’s traditionally where a lot of key metadata lives for describing your content to search engines.

This includes things like your title, description, and any Open Graph data:

<title>Add a Shopping Cart to Any Website in Minutes - Snipcart</title>
<meta name="description" content="Add a shopping cart to your site in minutes. Works with any site builder, CMS, and framework. 20 000+ merchants trust our e-commerce solution for their website. Join them!">
<meta property="og:title" content="Add a Shopping Cart to Any Website in Minutes - Snipcart">
<meta property="og:description" content="Add a shopping cart to your site in minutes. Works with any site builder, CMS, and framework. 20 000+ merchants trust our e-commerce solution for their website. Join them!">
<meta property="og:url" content="https://snipcart.com/">
<meta property="og:type" content="website">

Luckily, Next.js ships with a H ead component out of the box that we can leverage to make sure all of our pages include those important details that need to get rendered into our page.

You can first import the head component to make it work, then include it as a child of a Next.js page. You can then add anything you want to the Head.

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Add a Shopping Cart to Any Website in Minutes - Snipcart</title>
        <meta name="description" content="Add a shopping cart to your site in minutes. Works with any site builder, CMS, and framework. 20 000+ merchants trust our e-commerce solution for their website. Join them!">
        <meta property="og:title" content="Add a Shopping Cart to Any Website in Minutes - Snipcart">
        <meta property="og:description" content="Add a shopping cart to your site in minutes. Works with any site builder, CMS, and framework. 20 000+ merchants trust our e-commerce solution for their website. Join them!">
        <meta property="og:url" content="https://snipcart.com/">
        <meta property="og:type" content="website">
      </Head>

Next.js will recognize that metadata and do the hard work of lifting it up to the right location in your HTML document when the page is being rendered.

This lets us end up with both the power of dynamic React pages and the ability to craft that information for Google carefully!

Getting started with building SEO-friendly React apps with Next.js

Now let’s see how this works in action!

Feel free to follow the steps in this video!

If you enjoy this, feel free to like, share & subscribe to his channel! :)

We’ll start by building a React application from scratch then using the Next.js Head component to add metadata to our pages.

Because we gain the ability to manage that metadata through various pages with Next.js, we’ll look at how we can customize it for new static pages and generate that metadata for dynamic pages.

Step 0: Creating a new React app with Next.js

We can start by creating a new Next.js application from scratch using Create Next App.

In your terminal, run the following command:

    yarn create next-app my-seo-app
    # or
    npx create-next-app my-seo-app

Note: you can update my-seo-app to whatever name you'd like to give the project.

After running this command, Next.js will make a local copy of a starter application template and install the dependencies to get the project ready to go.

Once it’s finished, you can navigate to that directory:

    cd my-seo-app

Then you can start up your Next.js development server:

    yarn dev
    # or
    npm run dev

When loaded, Next.js will let you know the server is running at http://localhost:3000. If you open that up in your browser, you can see your new Next.js site!

At this point, feel free to look around the code inside of your new project and get ready for the next step!

Step 1: Updating Next.js homepage SEO metadata

When creating a new Next.js application, the framework starts with a homepage that includes some sample content.

Additionally, its conventionality includes the Next.js Head component out of the box, first imported at the top of the file:

    import Head from 'next/head'

As well as a few sample pieces of metadata:

<Head>
  <title>Create Next App</title>
  <meta name="description" content="Generated by create next app" />
  <link rel="icon" href="/favicon.ico" />
</Head>

We’re making our Head component available in this instance, then adding a title, description, and a favicon. If we view this page's source code in the browser, we can see this metadata as well as other things that Next.js is managing for us:

If we wanted to update this with our own title and description, we can easily do so by simply changing those values:

<Head>
  <title>My Clothing Store</title>
  <meta name="description" content="Come to my store for great apparel!" />
  <link rel="icon" href="/favicon.ico" />
</Head>

As we can see, Next.js is now using the values that we updated in our code.

We can even change the image for our favicon located at public/favicon.ico or completely change the link!

If we wanted, we could also add more fields, such as the Open Graph title and description we saw earlier:

<Head>
  <title>My Clothing Store</title>
  <meta name="description" content="Come to my store for great apparel!" />
  <meta property="og:title" content="My Clothing Store" />
  <meta property="og:description" content="Come to my store for great apparel!" />
  <meta property="og:url" content="https://myclothingstore.com/" />
  <meta property="og:type" content="website" />
  <link rel="icon" href="/favicon.ico" />
</Head>

And just like before, Next.js updates that metadata.

This gives us the ability to craft our page's metadata exactly how we'd like it.

Follow along with the commit on GitHub

Step 2: Creating a new page with custom SEO metadata in Next.js

As we’ve seen earlier, one of the main benefits of Next.js, when it comes to SEO, is the ability to provide direct links to individual pages. It’s giving us the ability to customize the metadata on that page for Google and our visitors.

To do that, we can create a new page and see exactly how that works!

Create a new file inside of the pages directory called about.js. Inside pages/about.js, add:

    import styles from '../styles/Home.module.css'

    export default function About() {
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className={styles.title}>
              About My Clothing Store
            </h1>
          </main>
        </div>
      )
    }

This will create a new page called “About” at the route /about. We can test this out by opening up our browser and visiting http://localhost:3000/about.

While this page is simple, you can see that we could easily create a new page that can be accessed directly by the URL.

Since we’re still inside React, we keep the same SPA capabilities, but we can additionally create content specific to each page without sacrificing SEO or user experience.

To see how this works with metadata, let’s add the Next.js Head component. At the top of pages/about.js import the Head component by adding:

    import Head from 'next/head'

Next, inside of our wrapper <div> element, let's add our Head component along with some metadata for our page:

<Head>
  <title>About - My Clothing Store</title>
  <meta name="description" content="The story behind My Clothing Store!" />
  <meta property="og:title" content="About - My Clothing Store" />
  <meta property="og:description" content="The story behind My Clothing Store!" />
  <meta property="og:url" content="https://myclothingstore.com/about" />
  <meta property="og:type" content="website" />
  <link rel="icon" href="/favicon.ico" />
</Head>

Just like on our homepage, we’re adding a title, description, some Open Graph data, and even the same favicon as before.

If we now open this up in our browser and look at the source, we can now see that our About page shows the metadata specific to that page.

By taking advantage of Next.js’s ability to have multiple pages with custom content and metadata, we’re able to help Google understand what each of our pages is about!

Follow along with the commit on GitHub

Step 3: Generating SEO metadata for dynamic pages in Next.js

Adding a new static page with Next.js is relatively straightforward. We create a new file with the route we’d like to be available and generate a React component with the content. However, dynamic pages are a little trickier in that they’re dynamic.

While we’re not going to get super deep into how dynamic pages work, we can still go through a basic example to get an idea of how we can dynamically manage the metadata on our page.

Let’s get started by creating a new folder called products, and inside of that folder, create a new file called [productId].js.

Note: that’s not a typo. The filename should have the brackets around the productId.

This will create a dynamic route in Next.js, allowing us to manage the way multiple pages look and work by defining which pages we want available and the dynamic data inside of it.

Inside of products/[productId].js add:

    import styles from '../../styles/Home.module.css';

    export default function Product({ productId, title }) {
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className={styles.title}>{ title }</h1>
            <p>Product ID: { productId }</p>
          </main>
        </div>
      )
    }

    export async function getStaticProps({ params = {} } = {}) {
      return {
        props: {
          productId: params.productId,
          title: `Product ${params.productId}`
        }
      }
    }

    export async function getStaticPaths() {
      const paths = [...new Array(5)].map((i, index) => {
        return {
          params: {
            productId: `${index + 1}`,
          }
        };
      });
      return {
        paths,
        fallback: false,
      };
    }

Here we’re creating an example of routes inside Next.js with getStaticPaths to show how we can manage our dynamic metadata. Typically the paths would be built based on dynamic content, such as an API request or data file.

A quick breakdown of what we’re doing:

We're creating a new page with content similar to Step 2.
We’re defining getStaticProps, which takes an argument including the dynamic value of a parameter. This parameter has the same name as the filename we created, productId.js.
When receiving that parameter value, we’re defining a simple title and productId, which will be passed in as props to our page component.
We’re defining getStaticPaths, where we’re using a new array to simulate a list of dynamic data.

Note: understanding how getStaticProps and getStaticPaths work isn't critical to understanding the use of dynamic data in our page component, but it will help follow along with the example!

Save that file, restart your development server, and now open /products/5 at http://localhost:3000/products/5 in your browser.

We can see that we’re passing in the title and product ID dynamically from our page!
Similarly, if we go to /products/3 (or any number between 1-5 in this example), we’ll see a similar page.

Now that we’re using dynamic data on our page, we can use that same data to create our metadata.

Just like before, first import the Next.js Head component at the top of the page:

    import Head from 'next/head'

Then add the following to the page component of pages/[productId].js:

<Head>
  <title>{ title } - My Clothing Store</title>
  <meta name="description" content={`Learn more about ${title}`} />
  <meta property="og:title" content={`${ title } - My Clothing Store`} />
  <meta property="og:description" content={`Learn more about ${title}`} />
  <meta property="og:url" content={`https://myclothingstore.com/products/${productId}`} />
  <meta property="og:type" content="website" />
  <link rel="icon" href="/favicon.ico" />
</Head>

In this snippet, we’re adding the metadata to the Head component. However, this time, we’re dynamically setting all of our values’ metadata using our product’s title and product ID.

If we open up the browser, we can see that our Head has those dynamic values!

Follow along with the commit on GitHub

Live demo here
GitHub repo here

What else can we do for better SEO?

Using the Next.js Head component along with its page creation strategies can help us carefully craft our experience for both our visitors and Google. Still, there’s more we can do to make sure we’re always maximizing our SEO efforts.

Analyze and monitor with Google Webmaster Tools and web.dev

One of the first things we can always do is a test to make sure our website or application covers the basics.

Luckily Google provides some free tools to handle this, including the Search Console and web.dev which will also test performance and accessibility. Performance and accessibility also happen to help SEO.

Adding a sitemap

Adding a sitemap to your website probably isn’t as critical as it used to be. Google can crawl your site pretty efficiently, but it’s still a helpful way to make sure all of your content is getting hit.

While you can’t do this out of the box with Next.js, there are plugins to help, such as the Next.js Sitemap Generator or a custom approach like the one I added to my Next.js WordPress Starter.

Optimizing for social media with Open Graph

We lightly touched on Open Graph in the tutorial, but there’s a wide variety of metadata tags and use cases that make Open Graph an important part of your SEO work.

Websites like Facebook and Twitter and apps like Discord and Slack all use Open Graph tags to pull in metadata, including what the link is about and which image they show.

By optimizing your Open Graph tags, you can make sure those big images show up in social feeds whenever your website content is shared.

Closing thoughts

SEO is a critical part of bringing in traffic to your website/application and, ultimately, your business. Ensuring things are working and looking as they should is an important part of how your business appears on search result pages.

While React alone tends to struggle with providing a good overall SEO experience, we have many tools in our belt to help, like Next.js. These tools give us powerful frameworks to provide both a great experience to our customers and the search engines trying to crawl our websites.

Regardless of the tools you use, be sure to test your SEO periodically. Just like maintaining any physical aspect of a business, we want to make sure our online presence is working for us as hard as it can!

Building Maps with React Leaflet - Course on egghead.io

Colby Fayock — Fri, 04 Sep 2020 12:54:20 +0000

If you’ve been following along with my work, I tend to talk about maps every so often.

This includes tutorials like how to create a Coronavirus (COVID-19) statistics map or even how to create your own Santa Tracker.

tl;dr my new course Building Maps with React Leaflet is now available on egghead.io!

Why so much about maps?

While maps aren’t my sole focus for the educational content I create, I’ve developed a passion for maps with my work at Element 84.

With my day job, I’ve been working on building a satellite tasking dashboard, but before I even got started, I learned about how maps have made a huge impact in people’s lives at State of the Map. The stories are both inspiring and heartbreaking.

As I learned more about maps, the more I realized the learning curve isn’t quite what people would expect. While there’s absolutely some complexity as you start digging deep into maps, getting started with a basic map has a much lower barrier to entry thanks to the tools available to use like React Leaflet.

Learning maps with my new course!

That’s what led me to put my time into developing this Building Maps with React Leaflet course with the egghead.io team.

I walk you through building a map from scratch, starting off with essentially a clone version of Create React App with a few tweaks to make it easier to focus on learning about maps.

Here’s what you’ll learn:

How to build a map from scratch in a React app
How to add markers and shapes to a map
About geospatial data formats and how to create your own
How to wrangle that data and visualize that data on a map
How to use geolocation features to personalize the map
How to customize the map with imagery and custom markers

After completing this course, you’ll be ready to build maps into your React apps for a ton of use cases, whether it’s visualizing geographical data like a pandemic or adding a store locator to your company’s website.

I’d love for you to take this journey with me and I’d love to hear any feedback.

Build Maps with React Leaflet on egghead.io.

On a personal note, this is my first course!

Thanks to the egghead.io team for all the support through this process. Working through my first course was challenging, but it was certainly rewarding.

I hope you all enjoy learning maps with my course as much as I enjoyed putting it together.

How to Build Tech Communities in a World of Pandemic

Colby Fayock — Wed, 01 Jul 2020 21:01:24 +0000

The global pandemic has had widespread effects, not just in how we go to work or go out to eat, but how we socialize and network in our local tech communities.

What impact does this have on our journeys and what can we do to make the best out of the current climate?

Living in a world of a pandemic

Most of our lives have rapidly changed. While many in the tech community are fortunate enough to be able to work from home, the pandemic has changed how we communicate and socialize.

Where previously we were able to enjoy a bite to eat at a restaurant, now we don't have that option and have to order takeout. Where we once were able to go to a monthly meetup and hear about tech over some free pizza, now we watch virtually as we… pay for our own pizza.

How does this impact us as developers?

While it’s challenging not to be able to go meet people in person at your local meetup, being quarantined has different impacts on different people.

Meetups and conferences are fun. Being able to communicate with others and build real relationships with others helps us all grow both personally and professionally. It’s a good way to network and make a friend at the same time.

Moving these events online means that personal connection won’t be the same. While a meetup would traditionally have some social time, now we get a one-way feed of the speaker’s talk with maybe an opportunity to hang out with people in the chat.

Where does that leave us?

This can be hard to cope with, but it doesn’t impact everyone the same. Some of us might be able to comfortably go meet others at a local meet up, but some of us, like myself, struggle with in-person events. Anxiety is real and it can hold us back and prevent us from being ourselves.

The fact that these events are now online opens these communities up to people who might have been too uncomfortable to attend an in-person event. Instead of feeling too shy to chat during the social time, we’re still able to hold realtime conversations, but over Slack or Discord.

What can we do to take advantage of our circumstances?

There’s two main perspectives to consider when figuring out what we can do to empower people in our communities — the organizers and the attendees.

As organizers, we should try to provide more opportunities for others to be social, whether that’s by maintaining a community through tools like Slack or Discord or inviting others to communicate during the event.

While some online meetups open up for questions or interact with the chat, some don’t, and it it feels simply like watching a video on Youtube.

As attendees, we should try to take advantage of events being held online by trying to communicate more with our peers. While it might be challenging to chat in person, sending a DM or sharing your thoughts through chat is a lower barrier of entry.

How can this help us in the long term?

Being more social can help us in a variety of ways — it helps us grow individually and helps us learn from other’s experience. But it can also help us professionally.

The fact of the matter is - if you don’t know anyone, you’re just another person on the list of thousands of applicants. Whether you meet someone at a meetup or had a quick chat with them in a Twitter DM, there’s a personal connection.

Use that personal connection to your advantage. That might be the difference between you and another candidate who hasn’t said anything at all. It might mean more opportunities in the long run when that person thinks of you for their next job opening.

But also, it can mean a new friend. It won’t always open the door to that new job, but shared experiences and common interests bring people together, and that connection brings value.

Applying these lessons to the future

Overall, we as a community need to continue to come together and help each other grow. The more we support each other, the more we can provide value that impacts the world.

When the virus one day subsides and we begin to meet back in person, let’s not forget the lessons we learned about community building.

Let’s make sure we continue to make everyone feel welcome and able to be involved, whether they’re the ones in the physical audience or the ones hanging out on the livestream.

Make sure to engage with both audiences and let the virtual attendees feel like they're included in the conversation. Answer the questions that they're sending in chat. Pull them up on the screen to ask a question.

We’re all in this together, let’s continue to build the best community we can.

What is Tailwind CSS and How Can I Add it to my Website or React App?

Colby Fayock — Fri, 19 Jun 2020 13:19:59 +0000

CSS is a technology that can be your best or worst friend. While it's incredibly flexible and can produce what seems like magic, without the proper care and attention, it can become hard to manage like any other code.

How can Tailwind CSS help us to take control of our styles?

What is Tailwind?
So what makes Tailwind great?
Part 1: Adding Tailwind CSS to a static HTML page
Part 2: Adding Tailwind CSS to a React app

What is Tailwind?

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.

The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years.

So what makes Tailwind great?

Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility class to that selector.

While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in!

Part 1: Adding Tailwind CSS to a static HTML page

We're going to start off by applying Tailwind CSS straight to a static HTML page. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework.

Step 1: Creating a new page

You can get started by simply creating a new HTML file. For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun.

If you want to simplify this step, you can just copy the file I created to get started.

Follow along with the commit!

Step 2: Adding Tailwind CSS via CDN

Tailwind typically recommends that you install through npm to get the full functionality, but again, we're just trying to understand how this works first.

So let's add a link to the CDN file in the <head> of our document:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Once you save and reload the page, the first thing you'll notice is that all of the styles were stripped!

This is expected. Tailwind includes a set of preflight styles to fix cross-browser inconsistencies. For one, they include the popular normalize.css which they build upon with their own styles.

But we're going to learn how to use Tailwind to add back our styles and set things up how we want!

Follow along with the commit!

Step 3: Using Tailwind CSS to add styles to your page

Now that we have Tailwind installed, we've added the ability to make use of their huge library of utility classes that we'll now use to add styles back to our page.

Let's start off by adding some margin to all of our paragraphs (<p>) and our list elements (<ol>, <ul>). We can do this by adding the .my-5 class to each element like so:

<p class="my-5">
  Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along...
  Belligerent and numerous.
</p>

The class name follows a pattern that you'll notice with the rest of the utility classes -- .my-5 stands for margin (m) applied to the y-axis (y) with a value of 5 which in Tailwind's case, it uses rem, so the value is 5rem.

Next, let's make our headers look like actual headers. Starting with our h1 tag, let's add:

<h1 class="text-2xl font-bold mt-8 mb-5">

Here's what's happening:

text-2xl: set the text size (font-size) to 2xl. In Tailwind, that 2xl will equate to 1.5rem
font-bold: set the weight of the text (font-weight) to bold
mt-8: Similar to my-5, this will set the margin top (t) to 8rem
mb-5: And this will set the margin bottom (b) to 5rem

With those classes added to the h1, let's apply those same exact classes to the rest of our header elements, but as we go down the list, reduce the size of the font size, so it will look like:

h2: text-xl
h3: text-lg

Now let's make our list elements look like lists. Starting with our unordered list (<ul>), let's add these classes:

<ul class="list-disc list-inside my-5 pl-2">

Here's what we're adding:

list-disc: set the list-style-stype to disc (the markers on each line item)
list-inside: sets the position of the list markers using relative to the list items and the list itself with list-style-position to inside
my-5: set the margin of the y axis to 5rem
pl-2: set the left padding to 2rem

Then we can apply the exact same classes to our ordered list (<ol>), except instead of list-disc, we want to change our style type to list-decimal, so that we can see numbers given it's an ordered list.

<ol class="list-decimal list-inside my-5 pl-2">

And we have our lists!

Finally, let's make our content a little easier to read by setting a max width and centering the content. On the <body> tag, add the following:

<body class="max-w-4xl mx-auto">

/Note: Typically you wouldn't want to apply these classes to the <body> itself, rather, you can wrap all of your content with a <main> tag, but since we're just trying to get an idea of how this works, we'll roll with this. Feel free to add the <main> tag with those classes instead if you prefer!/

And with that, we have our page!

Follow along with the commit!

Step 4: Adding a button and other components

For the last part of our static example, let's add a button.

The trick with Tailwind, is they intentionally don't provide pre-baked component classes with the idea being that likely people would need to override these components anyways to make them look how they wanted.

So that means, we're going to have to create our own using the utility classes!

First, let's add a new button. Somewhere on the page, add the following snippet. I'm going to add it right below the first paragraph (<p>) tag:

<button>Party with Slurm!</button>

You'll notice just like all of the other elements, that it's unstyled, however, if you try clicking it, you'll notice it still has the click actions. So let's make it look like a button.

Let's add the following classes:

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
  Party with Slurm!
</button>

Here's a breakdown of what's happening:

text-white: we're setting our text color to white
font-bold: set the weight of the text to bold (font-weight)
bg-purple-700: set the background color of the button to purple with a shade of 700. The 700 is relative to the other colors defined as purple, you can find these values on their palette documentation page
hover:bg-purple-800: when someone hovers over the button, set the background color to purple shade 800. Tailwind provides these helper classes that allow us to easily define interactive stiles with things like hover, focus, and active modifiers
py-2: set the padding of the y-axis to 2rem
px-4: set the padding of the x-axis to 4rem
rounded: round the corners of the element by setting the border radius. With tailwind, it sets the border-radius value to .25rem

And with all of that, we have our button!

You can apply this methodology to any other component that you'd like to build. Though it's a manual process, we'll find out how we can make this process easier when building in more dynamic projects like those based on React.

Follow along with the commit!

Part 2: Adding Tailwind CSS to a React app

For more of a real-world use case, we're going to add Tailwind CSS to an app created with Create React App.

First, we'll walk through the steps you need to take to add tailwind to your project using a fresh install of Create React App, then we'll use our content from our last example to recreate it in React.

Step 1: Spinning up a new React app

I'm not going to detail this step out too much. The gist is we'll bootstrap a new React app using Create React App.

To get started, you can follow along with the directions from the official React documentation:

https://reactjs.org/docs/create-a-new-react-app.html

And once you start your development server, you should now see an app!

Finally, let's migrate all of our old content to our app. To do this, copy everything inside of the <body> tag of our static example and paste it inside of the wrapper <div className="App"> in the new React project.

Next, change all class=" attributes from the content we pasted in to className=" so that it's using proper React attributes:

And lastly, replace the className App on our wrapper <div> to the classes we used on our static <body>.

Once you save your changes and spin back up your server, it will look deceivingly okay.

React includes some basic styles itself, so while it looks okay, we're not actually using Tailwind yet. So let's get started by installing it!

Follow along with the commit!

Step 2: Installing Tailwind in your React app

There are a few steps we'll need to go through in order to get Tailwind up and running on our app. Make sure you follow these steps carefully to ensure it's properly configured.

First, let's add our dependencies:

yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer

Per Tailwind's documentation, we need to be able to process our styles so that they can be properly added to our pipeline. So in the above, we're adding:

tailwindcss: the core Tailwind package
postcss-cli: Create React App already uses postcss, but we need to configure Tailwind to be part of that build process and run it's own processing
autoprefixer: Tailwind doesn't include vendor prefixes, so we want to add autoprefixer to handle this for us. This runs as part of our postcss configuration

We're also going to add two dev dependencies that make it easier to work with our code:

yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev

concurrently: a package that lets us set up the ability to run multiple commands at once. This is helpful since we'll need to watch both the styles and React app itself.
chokidar-cli: let's us watch files and run a command when changed. We'll use this to watch our CSS file and run the build process of the CSS on cahnge

Next, let's configure postcss, so create a new file in the root of your project called postcss.config.js and include the following:

// Inside postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

This will add the Tailwindcss and Autoprefixer plugins to our postcss config.

With our configuration, we need to include it as part of the build and watch processes. Inside package.json, add the following to definitions to your scripts property:

"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

Additionally, modify the start and build scripts to now include those commands:

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",

With our configuration ready to go, let's try our styles back to where they were when we left off from the static example.

Inside the App.css file, replace the entire content with:

@tailwind base;
@tailwind components;
@tailwind utilities;

This is going to import Tailwind's base styles, components, and utility classes that allow Tailwind to work as you would expect it to.

We can also remove the App.css import from our App.js file because it's now getting injected directly into our index.css file. So remove this line:

import './App.css';

Once you're done, you can start back up your development server! If it was already started, make sure to restart it so all of the configuration changes take effect.

And now the page should look exactly like it did in our static example!

Follow along with the commit!

Step 3: Creating a new button component class with Tailwind

Tailwind doesn't ship with prebaked component classes, but it does make it easy to create them!

We're going to use our button that we already created as an example of creating a new component. We'll create a new class btn as well as a color modifier btn-purple to accomplish this.

The first thing we'll want to do is open up our App.css file where we'll create our new class. Inside that file, let's add:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

If you remember from our HTML, we're already including those same classes to our <button> element. Tailwind let's us "apply" or include the styles that make up these utility classes to another class, in this case, the .btn class.

And now that we're creating that class, let's apply it to our button:

<button className="btn text-white bg-purple-700 hover:bg-purple-800">
  Party with Slurm!
</button>

And if we open up our page, we can see our button still looks the same. If we inspect the element, we can see our new .btn class generated with those styles.

Next, let's create a color modifier. Similar to what we just did, we're going to add the following rules:

.btn-purple {
  @apply bg-purple-700 text-white;
}

.btn-purple:hover {
  @apply bg-purple-800;
}

Here, we're adding our background color and our text color to our button class. We're also applying a darker button color when someone hovers over the button.

We'll also want to update our HTML button to include our new class and remove the ones we just applied:

<button className="btn btn-purple">
  Party with Slurm!
</button>

And with that change, we can still see that nothing has changed and we have our new button class!

Follow along with the commit!

Applying these concepts to more components

Through this walkthrough, we learned how to create a new component class using the Tailwind apply directive. This allowed us to create reusable classes that represent a component like a button.

We can apply this to any number of components in our design system. For instance, if we wanted to always show our lists the way we set them up here, we could create a .list-ul class that represented an unordered list with the Tailwind utilities list-disc list-inside my-5 pl-2 applied.

What tips and tricks do you like to use with Tailwind?

Share with me on Twitter!

Create your startup’s website on the Jamstack with Gatsby.js, TakeShape, and Netlify

Colby Fayock — Thu, 14 May 2020 14:02:40 +0000

Use TakeShape's starter projects to get up and running in minutes with a Gatsby.js site on Netlify

⚡️ See this sample project running live on Netlify

Starting a new company is hard work. It takes considerable time, money, and energy to build a stellar team, develop an amazing product, and find customers for it. Creating your company’s website shouldn’t take away any resources from these important efforts, but it should still provide you with a foundation to grow.

You can build a speedy, cost-effective, and maintainable static website for your business that still gives you editability and complex functionality as your business grows using the Jamstack.

Jamstack is a modern architecture where websites and applications are hosted statically and served from a content delivery network (CDN). This architecture provides a great deal of benefits, including cost effectiveness, security, reliability, and scalability. While traditional websites require maintenance, scaling, and optimization in order to keep costs low, Jamstack sites are cheap and low-maintenance from the start.

In this step-by-step guide, you’ll be introduced to the Jamstack as we walk through the process of creating a new site that runs on modern technologies with a reliable CMS to manage the content. And we’ll do it all in under 30 minutes!

What tools should I use to build, update, and serve my static Jamstack website?

For our website, we're going to use three modern tools for building our site, managing the content, and hosting and deploying it to the cloud: Gatsby.js, TakeShape, and Netlify.

If you haven’t heard of Gatsby.js, it’s a modern website framework that uses React.js and GraphQL to dynamically generate websites. It provides tools for developers to pull in many sources of content, including content from external services, and to output a website or app to a directory of static files and assets.

TakeShape is a content management system (CMS) with an intuitive user interface to add, edit, or delete content without the cost or maintenance overhead of a legacy CMS like Wordpress. Using TakeShape, all the members of your team can be productive right away, whether they’re a developer, content creator, or executive.

Once you have a website or web application, you'll ultimately need to deploy it to a host so the world can visit it! That's where Netlify comes in: it builds your site, makes it available across a global CDN, and associates it with your custom domain.

Netlify’s continuous integration (CI) features make sure your site is always up to date. It integrates with Git clients, including Github and Gitlab, to automatically build and deploy new sites when your code changes. When you use TakeShape as your CMS, you’ll also have access to webhooks that can automatically trigger another build and deploy whenever changes occur to your content.

Here’s how this all fits together: you’ll use Gatsby as the framework to code your site; TakeShape as the tool for editing and updating your content on the fly; and Netlify to host and continually rebuild your site as it's updated. Now, let’s get building!

Step 1: Creating a new project in TakeShape

Creating a new TakeShape project

To get started with TakeShape, you'll first need to create a free account if you don’t have one already.

TakeShape provides a number of ready to go example projects that will let you preconfigure a new project with an optimized, off-the-shelf solution. We'll use the Shape Startup Template to create and organize the kind of content that a young company needs.

Under the Create a New Project header on the Projects page, select the Shape Startup Template and give it a name. For our walkthrough, we're going to use a fake company name TakeShape Startup, Co., but if you're building this for your company, this is where you should use your company's name.

After selecting the Template and entering a name, click Create Project and you'll be dropped into your new project dashboard which includes a variety of sample content that we'll use to create our new website.

Save your Project ID and API Key

When you land into your new project dashboard, you will also have a new project ID that we'll use to connect to the TakeShape API when creating our website with Gatsby.

If you look at the URL of the page you're on, you'll see it looks like:

https://app.takeshape.io/projects/[Project ID]/…

Copy and paste this ID to a secure place, like a local text file, where you can easily find it later.

Then, select the dropdown arrow in the top left of the dashboard next to your project name and select API Keys.

Click the New API Key button in the top right and you'll be asked to include a Title and Permissions for your key. You'll want to name the key something that makes sense that you'll remember when reviewing your keys. For our walkthrough, we'll use “Website” for our title.

As for permissions, we can select Read as we'll only be requesting the data, not modifying anything.

Finally, click Create API Key in the top right and you'll be presented with a popup that includes your new API key. This is the only time you'll see this key!

Copy this key and save it alongside your project ID—we'll need both of them later on to fetch our content from TakeShape with Gatsby. Once you have saved your key, you can click I Understand.

Step 2: Creating a new site with Gatsby.js

Next, we'll configure a new Gatsby project in our local development environment. You'll be expected to be able to use a terminal to run commands using npm or yarn.

Note: If you'd prefer to avoid local development, you could skip this section directly deploy the TakeShape Gatsby Starter to Netlify using the deploy button at the bottom of the page. This will create a new project in Netlify and Github repository for your project.

Installing the Gatsby CLI

To set up our Gatsby project locally, we'll first need to install the Gatsby CLI. In order to install the CLI, you can use your favorite NPM-based package manager and run the following command:

npm install -g gatsby-cli

To make sure it's installed, you can run the following command:

gatsby --help

If your install succeeded, it should show you how to use the Gatsby CLI.

Setting up a new TakeShape Gatsby project

Inside your terminal, navigate to the directory where you want to create your project. Once there, run the following command, replacing my-startup-project with a new folder name of your choice. This will create a new Gatsby project and install the necessary dependencies:

gatsby new my-startup-project https://github.com/colbyfayock/gatsby-starter-takeshape-startup

Once the installation is complete, navigate to your project directory:

cd my-startup-project

Setting up TakeShape environment variables

For this project to communicate securely with TakeShape, create a new file called .env in the project root and include the following content, replacing the placeholder values with the unique Project ID and API Key that we saved earlier:

# Inside .env
TAKESHAPE_PROJECT="[TakeShape Project ID]"
TAKESHAPE_API_KEY="[TakeShape API Access Key]"

Starting up and building the project

Once the environment variables are configured, we're ready to go! Gatsby gives us two commands, develop and build:

Running gatsby develop will start a development server where we can run our code locally, make changes as needed, and visit the local version of our site.
On the other hand, gatsby build will compile our code to static files, saving the output to the /public folder.

Once we've run the site locally and can confirm everything is working, we'll add these files to a new Github repository (but GitLab or Bitbucket would work, too!).

Step 3: Hosting and deploying a website with Netlify

Creating a Netlify account

To host and deploy our new website, we'll need an account on Netlify. You can get started by signing up with a range of options including your Github, Gitlab, or Bitbucket account. If you'd prefer the traditional email route, you can use a regular email address as well.

Connecting your Git repository to Netlify

Once you're set up with Netlify, you'll want to connect your Git repository to your Netlify account. For this walkthrough, we're going to use Github, but Gitlab and Bitbucket should work similarly.

When logging in, the first page you'll land on is the Sites page. Go ahead and click the New site from Git button in the top right of this page to get started.

When you land on the Create a new site page, click the button that refers to your Git repository provider.

Once you click that, Netlify will open up a window from that Git provider (like Github), which will request permissions to your account. This is similar to using OAuth with a Google or Facebook account. Netlify requires you to connect your account so it can retrieve the repository to pull down the code in order to build and deploy it.

After you've integrated Git with your Netlify account, you should now see a list of your repositories. Now you can continue to select the repository of your new website at which point you'll be asked to configure the site.

Since Netlify recognizes Gatsby sites, it does a great job at preconfiguring this for us. We should be set with “gatsby build” as our Build command and “public/” as our Publish directory. This means that Netlify will run the build command to compile our website and the output of that command will be available in the publish directory.

But before we click the Deploy button we want to configure an advanced setting, which is our keys, so let’s first click Show advanced. Here, let’s add both of our environment variables TAKESHAPE_PROJECT and TAKESHAPE_API_KEY along with their respective values.

Finally, you can hit the Deploy site button and Netlify will kick off a new build!

Once completed, you should now be able to access your new website with the link at the top of the Overview page!

Step 4: Configuring webhooks with TakeShape to build and deploy changes with Netlify

Finally, if we're making changes to our content in TakeShape, we're going to want our website to rebuild and deploy so that we can automatically keep it updated. To do this, we can take advantage of webhooks to trigger new builds on Netlify.

Creating a new webhook in Netlify

To create a webhook in Netlify, first navigate to the Build & deploy page of your project settings and under the Continuous Deployment section, find Build hooks.

Here, click the Add build hook button and add "TakeShape" or another value you will remember as the Name. Unless you changed the primary branch of your builds, we'll want to leave the Branch to build as "master". Then click Save.

This will create a new URL that we'll use to set up our webhook in TakeShape, so we'll want to save this value for later.

Note: similar to an API key, you do not want to make this URL public. This provides the ability for builds to be triggered on your Netlify project. While this might not necessarily be able to cause major security issues, someone could potentially use this URL to run up your Netlify bill!

Adding our Netlify webhook to TakeShape

To start, we'll want to navigate to our TakeShape project, click the down arrow in the top left of the UI, and select Webhooks from the dropdown.

Once on the Webhooks page, click the Plus (+) button to add a new webhook, enter in your Netlify webhook URL from before, and add the Content: * resource. Check the boxes of all actions for all resources including Create, Update, and Delete, and then finally click the Save button.

Testing that the webhook works

You should now have your TakeShape webhook set up, so let's test that it works.

Navigate to the Homepage section in your TakeShape project and make a change to the content. This can be as simple as adding an exclamation point (!) to the end of the Heading.

Once you click the Save button, you can navigate back to your Netlify project and you should now see a new build triggered.

Shortly after, once that build is finished, you should now see your new change on your deployed website!

Taking advantage of more features from TakeShape
Want to learn about more exciting features TakeShape has to offer? Check out takeshape.io where you can dig into the full range of options you have with the TakeShape Content Editor or how you can combine all of your API services into one, single GraphQL API with TakeShape Mesh!

How to Use Pure CSS to Create a Beautiful Loading Animation for your App

Colby Fayock — Tue, 05 May 2020 14:45:00 +0000

If you've been around the internet lately, you've most likely seen a nice subtle loading animation that fills page content before gracefully loading in.

Some of the social giants like Facebook even use this approach to give page loading a better experience. How can we do that with just some simple CSS?

What are we going to build?
Just want the snippet?
Part 1: Creating our loading animation
Part 2: Using our loading animation in a dynamic app

What are we going to build?

We're going to create a loading animation using a CSS class that you can apply to pretty much any element you want (within reason).

Loading animation preview

This gives you great flexibility to use it and makes the solution nice and simple with only CSS.

While the snippet is pretty small and you could just copy and paste it, I'll walk you through what's happening and an example of using it dynamically when loading data.

Just want the snippet?

You can grab it here!

Do I need to know how to animate before this tutorial?

No! We'll walk through in detail exactly what you need to do. In fact, the animation in this tutorial is relatively simple, so let's dig in!

Part 1: Creating our loading animation

This first part is going to focus on getting the loading animation together and seeing it on a static HTML website. The goal is to walk through actually creating the snippet. We'll only use HTML and CSS for this part.

Step 1: Creating some sample content

To get started, we'll want a little sample content. There's really no restrictions here, you can create this with basic HTML and CSS or you can add this to your Create React App!

For the walk through, I'm going to use HTML and CSS with a few examples of content that will allow us to see this in effect.

To get started, create a new HTML file. Inside that HTML file, fill it with some content that will give us the ability to play with our animation. I'm going to use fillerama which uses lines from my favorite TV show Futurama!

Static HTML & CSS webpage with content from fillerama.io

If you're going to follow along with me, here's what my project looks like:

my-css-loading-animation-static
- index.html
- main.css

Follow along with the commit!

Step 2: Starting with a foundation loading class

For our foundation, let's create a new CSS class. Inside our CSS file, let's add:

.loading {
  background: #eceff1;
}

With that class, let's add it to a few or all of our elements. I added it to a few paragraphs, headings, and lists.

<p class="loading">For example...

Static HTML & CSS webpage with a gray background for the content

That gives us a basic background, but we'd probably want to hide that text. When it's loading, we won't have that text yet, so most likely we would want to use filler text or a fixed height. Either way, we can set the color to transparent:

.loading {
  color: transparent;
  background: #eceff1;
}

Static HTML & CSS webpage with a gray background and transparent color for the content

If you notice with list elements, whether you apply the class to the top level list element (<ol> or <ul>) vs the list item itself (<li>), it looks like one big block. If we add a little margin to the bottom of all list elements, we can see a different in how they display:

li {
  margin-bottom: .5em;
}

Style difference between applying to the top level list or the list items

And now it's starting to come together, but it kind of just looks like placeholders. So let's animate this to look like it's actually loading.

Follow along with the commit!

Step 3: Styling and animating our loading class

Before actually animating our class, we need something to animate, so let's add a gradient to our .loading class:

.loading {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
}

This is saying that we want a linear gradient that's tilted at 100 degrees, where we start with #eceff1 and fade to #f6f7f8 at 30% and back to #eceff1 at 70%;

Subtle gradient background that might look like a glare

It's hard to see initially when it's still, it might just look like a glare on your computer! If you'd like to see it before moving on, feel free to play with the colors above to see the gradient.

Now that we have something to animate, we'll first need to create a keyframes rule:

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

This rule when applied will change the background position from starting at 100% of the x-axis to 0% of the x-axis.

With the rule, we can add our animation property to our .loading class:

.loading {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
  animation: loading 1.2s ease-in-out infinite;
}

Our animation line is setting the keyframe to loading, telling it to last for 1.2 seconds, setting the timing function to ease-in-out to make it smooth, and tell it to loop forever with infinite.

No change – it's not animating

If you notice though after saving that, it's still not doing anything. The reason for this is we're setting our gradient from one end of the DOM element to the other, so there's nowhere to move!

So let's try also setting a background-size on our .loading class.

.loading {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

Now, since our background expands beyond our DOM element (you can't see that part), it has some space to animate with and we get our animation!

Our loading animation!

Follow along with the commit!

Part 2: Using our loading animation in a dynamic app

Now that we have our loading animation, let's put it into action with a basic example where we fake a loading state.

The trick with actually using this is typically we don't have the actual content available, so in most cases, we have to fake it.

To show you how we can do this, we're going to build a simple React app with Next.js.

Step 1: Creating an example React app with Next.js

Navigate to the directory you want to create your new project in and run:

yarn create next-app
# or
npm init next-app

It will prompt you with some options, particularly a name which will determine the directory the project is created in and the type of project. I'm using my-css-loading-animation-dynamic and the "Default Starter App".

Creating a new project with Next.js

Once installed, navigate into your new directory and start up your development server:

cd [directory]
yarn dev
# or 
npm run dev

Starting development server with Next.js

Next, let's replace the content in our pages/index.js file. I'm going to derive the content from the previous example, but we'll create it similar to how we might expect it to come from an API. First, let's add our content as an object above our return statement:

const content = {
  header: `So, how 'bout them Knicks?`,
  intro: `What are their names? I'm Santa Claus! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Good news, everyone! I've taught the toaster to feel love!`,
  list: [
    `Yes! In your face, Gandhi!`,
    `So I really am important? How I feel when I'm drunk is correct?`,
    `Who are those horrible orange men?`
  ]

To display that content, inside <main>, let's replace the content with:

<main>
  <h1>{ content.header }</h1>
  <p>{ content.intro }</p>
  <ul>
    { content.list.map((item, i) => {
      return (
        <li key={i}>{ item }</li>
      )
    })}
  </ul>
</main>

And for the styles, you can copy and paste everything from our Part 1 main.css file into the <style> tags at the bottom of our index page. That will leave us with:

Basic content with Next.js

With that, we should be back to a similar point we finished at in Part 1 except we're not actively using any of the loading animations yet.

Follow along with the commit!

Step 2: Faking loading data from an API

The example we're working with is pretty simple. You'd probably see this coming pre-generated statically, but this helps us create a realistic demo that we can test our loading animation with.

To fake our loading state, we're going to use React's useState, useEffect, and an old fashioned setTimeout to preload some "loading" content, and after the setTimeout finishes, update that content with our actual data. In the meantime, we'll know that we're in a loading state with a separate instance of useState.

First, we need to import our dependencies. At the top of our pages/index.js file, add:

import { useState, useEffect } from 'react';

Above our content object, let's add some state:

const [loadingState, updateLoadingState] = useState(true);
const [contentState, updateContentState] = useState({})

And in our content, we can update the instances to use that state:

<h1>{ contentState.header }</h1>
<p>{ contentState.intro }</p>
<ul>
  { contentState.list.map((item, i) => {
    return (
      <li key={i}>{ item }</li>
    )
  })}
</ul>

Once you save and load that, you'll first notice we get an error because our list property doesn't exist on our contentState, so we can first fix that:

{ Array.isArray(contentState.list) && contentState.list.map((item, i) => {
  return (
    <li key={i}>{ item }</li>
  )
})}

And after that's ready, let's add our setTimeout inside of a useEffect hook to simulate our data loading. Add this under our content object:

useEffect(() => {
  setTimeout(() => {
    updateContentState(content);
    updateLoadingState(false)
  }, 2000);
}, [])

Once you save and open up your browser, you'll notice that for 2 seconds you don't have any content and then it loads in, basically simulating loading that data asynchronously.

Follow along with the commit!

Step 3: Adding our loading animation

Now we can finally add our loading animation. So to do this, we're going to use our loading state we set up using useState and if the content is loading, add our .loading class to our elements.

Before we do that, instead of individually adding this class to each item in the DOM, it might make more sense to do so using CSS and adding the class to the parent, so let's do that first.

First, update the .loading class to target our elements:

.loading h1,
.loading p,
.loading li {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

Then we can dynamically add our class to our <main> tag:

<main className={loadingState ? 'loading' : ''}>

Note: if you use Sass, you can manage your loading styles by extending the .loading class in the instances you want to use it or create a placeholder and extend that!

And if you refresh the page, you'll notice it's still just a blank page for 2 seconds!

The issue, is when we load our content, nothing exists inside of our tags that can that would allow the line-height of the elements to give it a height.

No height when there's no content

But we can fix that! Because our .loading class sets our text to transparent, we can simply add the word Loading for each piece of content:

const [contentState, updateContentState] = useState({
  header: 'Loading',
  intro: 'Loading',
  list: [
    'Loading',
    'Loading',
    'Loading'
  ]
})

Note: We can't use an empty space here because that alone won't provide us with a height when rendered in the DOM.

And once you save and reload the page, our first 2 seconds will have a loading state that reflects our content!

HTML & CSS loading animation

Follow along with the commit!

Some additional thoughts

This technique can be used pretty broadly. Being a CSS class makes it nice and easy to add where every you want.

If you're not a fan of setting the Loading text for the loading state, another option is to set a fixed height. The only issue with that is it requires more maintenance for tweaking the CSS to match what the content loading in will look like.

Additionally, this won't be perfect. More often than not, you won't know exactly how much copy you have on a page. The goal is to simulate and hint that there will be content and that it's currently loading.

What's your favorite loading animation?

Let me know on Twitter!

What is the JAMstack and how do I get started?

Colby Fayock — Tue, 05 May 2020 12:36:52 +0000

JAMstack sites are all the rage right now in the web dev world. And rightfully so! But what exactly is it and how can we all take advantage of its benefits?

What is this JAMstack?

To start, JAMstack is a software architecture and philosophy that adheres to the following components: Javascript, APIs, and Markup.

If this sounds familiar, it's because it is! That React app that you compile down with Webpack and ultimately serve from S3? Yup, that's a JAMstack app. That simple HTML file that has no JavaScript and literally doesn't do anything dynamic? Yup, that's also a JAMstack app.

That's not to be confused with serverless

If you're coming more from the cloud side of things (think AWS, GCP, Azure), you might be inclined to think of serverless and JAMstack as the same thing. Granted they have similarities in the philosophy of how resources are managed, such as hosting a site on S3. But a JAMstack app is not always going to be a serverless app.

Consider an app hosted in static storage on the cloud provider of your choice. Yes, you might be serving the app in a serverless way, but you might be dealing with an API that utilizes Wordpress or Rails, both of which are certainly not serverless.

Combining these philosophies can go a long way, but they shouldn't be confused as the same.

What makes up the JAMstack?

Back to the JAMstack: it's typically comprised of 3 components: Javascript, APIs, and Markup. Its history stems from growing the term "static site" into something more meaningful (and marketable). So while ultimately a static site is the end result, it's blown up to include first class tooling for every step of the way.

While there aren't any specific set of tools that you need to use, or any tools at all beyond simple HTML, there are great examples of what can make up each part of the stack. Let's dive in a little bit to each component.

Javascript

The component that's probably done the most work to popularize the JAMstack is Javascript. Our favorite browser language allows us to provide all of the dynamic and interactive bits that we might not have if we're serving plain HTML without it.

This is where a lot of times you'll see UI frameworks like React, Vue, and newcomers like Svelte come into play.

They make building apps simpler and more organized by providing component APIs and tooling that compile down to a simple HTML file (or a bunch of them).

Those HTML files include a group of assets like images, CSS, and the actual JS that ultimately get served to a browser via your favorite CDN (content delivery network).

APIs

Utilizing the strengths of APIs is core to how you make a JAMstack app dynamic. Whether it's authentication or search, your application will use Javascript to make an HTTP request to another provider which will ultimately enhance the experience in one form or another.

Gatsby coined the phrase "content mesh" that does a pretty good job at describing the possibilities here.

https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/

You don't necessarily have to reach out to only one host for an API, but you can reach out to as many as you need (but try not to go overboard).

For instance, if you have a headless Wordpress API where you host your blog posts, a Cloudinary account where you store your specialized media, and an Elasticsearch instance that provides your search functionality, they all work together to provide a single experience to the people using your site.

Markup

This is the critical piece. Whether it's your hand written HTML or the code that compiles down to the HTML, it's the first part you're serving to the client. This is kind of a de facto piece of any website, but how you serve it is the most important piece.

To be considered a JAMstack app, the HTML needs to be served statically, which basically means not being dynamically rendered from a server.

If you're piecing a page together and serving it with PHP, it's probably not a JAMstack app. If you upload and serve a single HTML file from storage that constructs an app with Javascript, it sounds like a JAMstack app.

But that doesn't mean we have to always build 100% of the app within the browser. Tools like Gatsby and other static site generators allow us to pull in some or all of our API sources at build time and render the pages out as HTML files.

Think if you have a Wordpress blog, we can pull in all of the posts and ultimately create a new HTML file for each post. That means we're going to be able to serve a precompiled version of the page directly to the browser which usually equates to a quicker first paint and faster experience for your visitor.

One note about "hosting"

Using the term hosting here can be misleading if you're new to the concept. Yeah, your site is technically getting hosted somewhere, but it's not in the traditional sense. You don't have a server that you're maintaining where you upload your files to with an FTP client like Cyberduck.

Instead, whether your doing it yourself with S3 or piping it into Netlify (which is actually multi-cloud), your HTML and static assets are getting served from object storage. On the tail end of that you typically have a CDN like Cloudflare which caches those files at locations all over the world making your pages load faster for the people visiting your site.

So what makes a JAMstack app so great?

JAMstack apps inherently satisfy most if not all of the 5 pillars of the AWS Well-Architected Framework. These are core concepts that AWS considers to deliver fast, secure, high-performing, resilient, and efficient infrastructure.

Let's see how...

Speed

The fact that you're serving JAMstack apps as static files directly from a CDN (usually) makes it likely your app is going to load super fast. Gone are the days where the server has to spend time building the page before responding; now you serve the page as just plain HTML "as is" or with some type of client side hydration like you'd see with React.

Cost

More often than not, JAMstack sites are going to run cheaper than their server side counterparts. Hosting static assets is cheap and now your page is being served at the same rate.

Scalability

Since you're serving your files off of static hosting, likely a CDN, that pretty much automatically gives you infinite scalability. Most providers will make this claim, meaning you'll have no trouble letting any influx of people hitting your site in through the front door.

Maintenance

The foundation of your static site isn't a server, meaning you don't need to maintain it. Whether it's Netlify, S3, or any other provider, your static HTML, CSS, and JS are maintained for you headache-free.

Security

Doubling down on the lack of server that you have to personally maintain, you don't really need to worry as much about locking down ways for people to intrude.

Instead, you'll need to focus mostly on permissions to lock down private content and assure your users that their personal information isn't publicly available.

But this also depends on your APIs

As much as these points strike true for the static aspects of your site, keep in mind you still might depend on some type of API for your client-side experience.

Try to take advantage of these requests at compile time when you can, such as with a static site generator. Otherwise you'll need to weigh the amount of hits you're making to a dynamic endpoint and how it impacts all of the points above for your overall experience.

Is my website considered to be on the JAMstack?

We already talked about the 3 components (Javascript, APIs, Markup), but what we didn't talk about is the fact that you don't necessarily have to use all 3 of them in order to consider your site worthy of the JAM label.

Really it all boils down to the Markup and how you serve it. Instead of your Rails app rendering your HTML for you, you might host a precompiled React app on S3 that reaches out to Rails via a set of APIs.

But you don't even need to have APIs. You don't even need to have Javascript! As long as you're serving an HTML file without it having to be compiled on a server at request time (aka pre-rendering it), you've got yourself a JAMstack site.

What are some examples of JAMstack?

freecodecamp.org

Yes! freecodecamp.org and its learning portal is a JAMstack site built on Gatsby. Even with the complexities of providing an app to take code courses with, freeCodeCamp is able to pull together the power of a static site generator and powerful APIs to bring people around the world the power of learning code.

You can see Quincy from freeCodeCamp talk more about this at the 2018 JAMstack_conf:

https://www.youtube.com/watch?v=e5H7CI3yqPY

Note: the News and Forum portals are not currently JAMstack sites.

Impossible Foods

The main website for Impossible Foods is no other than a Gatsby site! Everything from their recipes to their location finder are all compiled through our favorite "blazing fast" static site generator.

web.dev

Google's web.dev resource center is built out using the growing 11ty. You can even find the code made open source at: https://github.com/GoogleChrome/web.dev

What are some tools I can use to build JAMstack sites or apps?

The good news with all of this buzz is there are a ton of tools currently available and a ton more on the way. They might still be a little rough around the edges, but that's because this is a brave new world of tooling and that takes some smoothing out to get just right.

Constructing your app

This is the fun part. How are you going to build your app? With Scully in the picture, you can pretty much pick your favorite flavor of UI framework and get off the ground running. Here's a few popular ones to get started, but by no means is it exhaustive.

11ty
Gatsby
Hugo
Nift
Scully (for you Angular fans)
And many more...

Need me to pick one? Start with Gatsby and bootstrap with a simple starter.

Serving your app

I like to think of this as the easy part depending on your setup. Tools like Netlify and Zeit make this a breeze to configure by hooking into your Github repo and building anytime a new commit gets pushed, but of course you have options like AWS if you want more control.

Need me to pick one? Start with Netlify and take 5 minutes to deploy that Gatsby site.

Making your app dynamic

Really this can be anything that can be used as an API making requests from the browser. I'm not going to list a bunch of examples per type, but here are a few tools and places you can find some resources.

Auth0 - Authentication
Cloudinary - Media management
Google Analytics - Web traffic analytics
headlesscms.org - Endless list of headless CMSs
Sanity - CMS
Serverless Framework - DIY, easy to deploy serverless resources
Snipcart - Ecommerce
Stripe - Payment management
And a bunch of other resources...
And a bunch of other CMS choices...
And some general info and tools...

And how about general resources to learn?

You can find a lot of resources to get up and running quickly in the JAMstack world.

How to host and deploy a static website or JAMstack app to AWS S3 and CloudFront from me on freeCodeCamp
A Step-by-Step Guide: Gatsby on Netlify from Netlify
Build your own Blog from Scratch using Eleventy from filament group
How to Host your Static Website with AWS - A Beginner's Guide from freeCodeCamp
Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site from SnipCart
How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify from freeCodeCamp

Expect to see more

Similar to its serverless counterpart, the days of JAMstack are young. As time goes on, we'll be seeing the tooling mature and expand providing new exciting ways for us to quickly build fast sites that anyone can use.

Join in the conversation on Twitter and let me know what your favorite part of building a JAMstack site is!

Missing something?

Missing your favorite JAMstack tool or an awesome example? Ping me on Twitter!

Get more content straight your inbox!

What is linting and how can it save you time?

Colby Fayock — Tue, 28 Apr 2020 13:16:18 +0000

One of the biggest challenges in software development is time. It's something we can't easily get more of, but linting can help us make the most out of the time we have.

So what is linting?

lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.
https://en.wikipedia.org/wiki/Lint(software)

Simply put, a linter is a tool that programmatically scans your code with the goal of finding issues that can lead to bugs or inconsistencies with code health and style. Some can even help fix them for you!

Take for instance, the following example:

const test = 'I am a test';
console.log(`Test: ${test}`);
const test = 'Another one.';

We're declaring the constant test twice, which our javascript engine won't be happy about. With the proper linter settings and watch configuration, instead of getting caught later as an error when the code runs, you'll immediately get an error through your linter running in the background:

  10:9  error  Parsing error: Identifier 'test' has already been declared

   8 |   const test = 'I am a test';
   9 |   console.log(`Test: ${2}`);
> 10 |   const test = 'Another one.';
     |         ^

It might be pretty obvious that you have 2 of the same const declarations given this is only 3 lines, but in a more complex application, this can save tons of time having to hunt down a pesky bug that's not always obvious.

What all can linting help with?

Lots of things, including but not limited to:

Flagging bugs in your code from syntax errors
Giving you warnings when code may not be intuitive
Providing suggestions for common best practices
Keeping track of TODO's and FIXME's
Keeping a consistent code style

Most things you can think of probably already exist in one form or another, and if not, you can even create custom rules that fit your needs!

How is this actually helping or why should I care?

Probably the biggest overlying theme of the list above is the fact that these issues will be called out immediately. No longer will these issues creep up on you in the middle of running your app or give someone anxiety during a code review. No longer will you and your reviewer endlessly fight passive aggressively through the comments about whether or not to include a semicolon at the end of JS statements (you should 🔥).

All of those moments that stop you from being productive because of a silly syntax error or the micro-interactions you and your teammates have during a review take time. They add up and end up taking away the time you can spend fixing another bug or developing the next great feature of your product.

So how do I actually get started?

Even though there are linters for most, if not all, other mainstream languages, for the purpose of this post, I'm going to focus on Javascript. The same principles apply, but the tooling may be a bit different.

I'm going to run through how you can get set up for basic linting in a React app. You can easily follow along by spinning up your own React app or using my Gatsby starter: https://github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Your Linter

To get started, we first need a linter. Probably the most popular in the Javascript world is ESLint. Your linter will actually be the engine for defining rules and parsing your files to test against. ESLint is available as an npm package by itself and once installed, out of the box it allows you to set up a basic configuration file and hit the ground running with some command line tools.

Let's first add our ESLint dependency:

yarn add eslint -D

We're installing this as a devDependency (hence the -D flag), because this isn't something our application needs to run. After it's successfully installed, let's add it to our package.json as a script:

...
"scripts": {
  ...
  "lint": "eslint .  --ext .js"
  ...
},
...

In the above, we're running our linter on the entire project directory on any file that has an extension of .js. If you're working with a large project with many file types, maybe even some you don't want linted, you can change that flag or be more specific with other options.

To support ESLint, we'll need to do one more thing. Let's add a file at the root of our project (probably where your package.json is) called .eslintrc.js and make the contents of the file simply:

module.exports = {};

Once you're ready, you can run yarn lint and... get an error.

This is okay, and expected in our project, so let's move on.

Your Parser

A common tool in the chain for Javascript developers is Babel, which allows you to write code with features that may not be supported in all browsers, such as using arrow functions, that are available in ES6, and other conventions like importing files via import.

The code you write may already run through Babel to work in a browser, but that doesn't apply to ESLint by default, so ESLint allows you to specify a parser that allows the linting processing to look at the same code as your browser sees. In this case we'll want to use Babel's ESLint parser that's made available to us.

To set that up, we'll want to first install our dependency:

yarn add babel-eslint -D

Typically if you're using babel-eslint you'll want to make sure babel is installed next to it, but in our case, Gatsby already uses babel, so we don't necessarily need to add it. After that's set up, we'll want to update our .eslintrc.js config file with some new options:

module.exports = {
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "parser": "babel-eslint"
};

Here, we're letting ESLint know that our environment will be run in node (Gatsby's precompiling), inside the browser (the app), and it will use ES6. This helps ESLint know how to run your code. Additionally, we want to set up our parser to be babel-eslint.

Once we're ready to go, run yarn lint again and... well nothing really happened.

Lint results - Nothing happened

This is still expected, as we don't have any rules set up!

Plugins for your code

Writing a React app? The Babel parser may help you transform your code, but you might have a hard time being productive, as ESLint needs to understand how it should work to lint your React files.

Part of the beauty of ESLint is that it allows you to configure plugins that have the opportunity to create and set rules for you. Luckily, along with our Babel parser above that does some of the heavy lifting, we have a React plugin available that does just that and takes care of linting the JSX for us.

Let's first install our dependency:

yarn add eslint-plugin-react -D

Further, let's update our .eslintrc.js file again:

module.exports = {
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": [
        "react"
    ],
    "parser": "babel-eslint"
};

What we're adding here is a setting that automatically detects what React version you're using, which is helpful to let your linting get parsed properly, and then set up our react plugin that we installed above.

For one last final time, we will run our lint script and get nothing:

Lint results - Nothing happened

Rules defined by others's opinions

If you're not really sure where to get started or just want to quickly get up and running, it's recommend that you enable ESLint's own recommended rules. Let's add this to our .eslintrc.js config file:

module.exports = {
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended"
    ],
    "parser": "babel-eslint"
};

And let's run our yarn lint.

Woah! This will immediately give you a lot errors, it seems like something's wrong.

Since we're running a React app, we also want to make sure our linter understands the rules it should follow, so let's also add our React plugin to the .eslintrc.js config setup:

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],

Now if you run yarn lint, you get something a little more logical.

If you're following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! 🎉

Going further, if those don't seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.

Some popular ones include:

Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.

Let it do the work (most of it)

You don't think I'm going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let's try to get ESLint to fix some of it for us.

If you noticed after we ran the command above, ESLint gave us an extra message:

So let's give it a try! Let's run:

yarn lint --fix

And what do you know, it now only gives us 1 linting error.

Turns out ESLint was able to fix our semicolon issue automatically, but we'll still have to add pageName to our Layout's propTypes manually, not too much of a lift.

Running one more time and finally nothing again! But this time because everything's looking good.

Lint results - No errors

Go forth and write messy code!

Kidding 😜 The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it's nice to have all of your code neat and tidy.

This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it's not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.

Other linting tools to check out

JSHint: an alternative to ESLint
Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass
Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game
Webhint: linting tool for accessibility, speed, and more website best practices
A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements

Get more content straight your inbox!

Originally published on October 10, 2019 at colbyfayock.com

use-custom-hook: Custom React Hook starter

Colby Fayock — Mon, 13 Apr 2020 13:29:55 +0000

Make spinning up and publishing a new custom React Hook easy!

github.com/colbyfayock/use-custom-hook

How to get started

git clone https://github.com/colbyfayock/use-custom-hook [directory]
cd [directory]
yarn install && yarn setup
cd [hook-name] && npm publish

What you get

A ready-to-use hook source
A next.js example / demo page
Scripts ready to compile both

Want more?

Let me know what you think this is missing.

Enjoy!

github.com/colbyfayock/use-custom-hook

Get more content straight your inbox!

How to create a Coronavirus (COVID-19) Dashboard & Map App with Gatsby and Leaflet

Colby Fayock — Mon, 06 Apr 2020 12:15:06 +0000

The Coronavirus (COVID-19) pandemic has swiftly changed how all of us interact day to day. How can we use available APIs to build a mapping app that shows the impact it has had on the world?

Update: The original NovelCOVID API v1 endpoint has been deprecated. Please update and use the following instead: https://corona.lmao.ninja/v2/countries

Author's Note: This is meant to be a demo and proof of concept for putting together an impactful mapping application using real life data. For complete and accurate analysis, please make sure to use tools like Johns Hopkins University dashboard. Stay home and be safe! ❤️

What are we going to build?

We'll be putting together a mapping application that uses an API containing recent Coronavirus statistics and maps out the locations and impact each country is facing.

On the map, we'll show a marker for each country with the number of confirmed cases. On top of that, we'll include a little popup tooltip that shows more in depth information.

The map we'll build will mostly look like the above, but will look a little simpler. We'll utilize the OpenStreetMap public tileserver instead of using a custom Mapbox

To get started, we're going to use this Leaflet Gatsby Starter I created to make the initial setup a little smoother. With our app bootstrapped, we'll fetch our data and add markers to the map with our data.

Woah, a mapping app?

Yup. If you haven't played with maps before, don't be discouraged! It's not as bad as you probably think. If you'd rather start with mapping basics, you can read more about how mapping works first.

What do we need before we get started?

If you followed along with my previous tutorials for building a Santa Tracker or creating a Summer Road Trip map, you can follow the same steps to get started. If not, we'll want to make sure we have the following set up:

node or yarn - I'll be using yarn, but you can substitute with npm where appropriate
Gatsby's CLI - yarn global add gatsby-cli

If you're not sure about one of the above, you can try checking out the beginning my previous tutorial.

We'll also want to set up a foundation for our map. We can do this by utilizing the Leaflet Gatsby Starter I put together that provides us a basic setup with Leaflet and React Leaflet.

gatsby new my-coronavirus-map https://github.com/colbyfayock/gatsby-starter-leaflet

After that's finished running, you can navigate to the newly created project directory and start your local development server:

cd my-coronavirus-map
yarn develop

If all goes as planned, your server should start and you should now be able to see your basic mapping app in your browser!

Follow along with the commit!

Step 1: Cleaning up some unneeded code

The Gatsby Starter we're using to spin up this app comes with some demo code that we don't need here. We'll want to make all of the changes below in the file src/pages/index.js, which is the homepage of our app.

First, let's remove everything from the mapEffect function. This function is used to run code that fires when the map renders.

// In src/pages/index.js
async function mapEffect({ leafletElement } = {}) {
  // Get rid of everything in here
}

We'll also change the variable name of our leafletElement simply for being able to more easily understand the code as we write it.

async function mapEffect({ leafletElement: map } = {}) {
}

Next, we don't want a marker this time, so let's remove the <Marker component from our <Map component:

<Map {...mapSettings} />

Now that we have those pieces cleared out, we can remove all of the following imports and variables from the top of our file:

useRef
Marker
promiseToFlyTo
getCurrentLocation
gatsby_astronaut
timeToZoom
timeToOpenPopupAfterZoom
timeToUpdatePopupAfterZoom
ZOOM
popupContentHello
popupContentGatsby
markerRef

After, our map should still work, but not do anything.

Follow along with the commit!

Step 2: Fetching the Coronavirus data

For our app, we're going to use the NovelCOVID API. Particularly, we're going to use the countries endpoint to fetch the list of our countries and the stats associated with them.

For making requests, I personally like to use axios as it has a nice to use API. If you want to use fetch or your own favorite request library, substitute that in for this step.

We'll start by installing axios:

yarn add axios

Once that installs, remember to restart your server.

Import the axios package ta the top of our pages/index.js file:

import axios from 'axios';

Next we'll actually make our request. Inside our mapEffect function, let's try to make a request to the API endpoint:

async function mapEffect({ leafletElement: map } = {}) {
    let response;

    try {
      response = await axios.get('https://corona.lmao.ninja/countries');
    } catch(e) {
      console.log(`Failed to fetch countries: ${e.message}`, e);
      return;
    }

    const { data = [] } = response;
}

In this snippet, we're doing the following:

Setting up a response variable that will allow us to store the response
Adding a try/catch block that will catch any API errors if the request fails
If the request is successful, we store the response in the response variable
If the request fails, we console log out the error and return out of the function so we don't continue to run the code with a failed request
Once we have our response, we can destructure data from the response and set the default value to an empty array, as that will be the type of data we need

After that's set up, we can console log out the data object and we'll see our data successfully fetched!

Follow along with the commit!

Update: The previous commit includes a link to the original NovelCOVID v1 API endpoint which has now been deprecated. Please use this instead: https://corona.lmao.ninja/v2/countries.

See updated commit.

Step 3: Transform the Coronavirus data into a geographic data format

Now that we have our data, we can transform it into a geographic data format, particularly GeoJSON, that will allow us to interface with Leaflet.

Let's start by adding this block of code:

const { data = [] } = response;
const hasData = Array.isArray(data) && data.length > 0;

if ( !hasData ) return;

const geoJson = {
  type: 'FeatureCollection',
  features: data.map((country = {}) => {
    const { countryInfo = {} } = country;
    const { lat, long: lng } = countryInfo;
    return {
      type: 'Feature',
      properties: {
        ...country,
      },
      geometry: {
        type: 'Point',
        coordinates: [ lng, lat ]
      }
    }
  })
}

So what are we doing here?

We create a new constant called hasData that checks if our data variable is an array and has data
If we don't have data, we want to return out of the function, as we don't want to try to add data we don't have
We create a geoJson object that will be our GeoJSON document
Our document is of type FeatureCollection and as our features we loop through our dataset
For each country in our data, we obtain the lat and lng to create a point for our map
We additionally add our country data as properties so we can access it within our mapping APIs

If you console.log this object our into your browser and copy the contents, you can paste this into geojson.io and see the location data show up correctly.

With this GeoJSON document, we'll now be able to add it to our map.

Follow along with the commit!

Step 4: Adding the Coronavirus data to the map

We have our GeoJSON document with our location data, so let's add it to the map.

Let's start with this code block. It's a long one, but we'll break it down piece by piece:

const geoJsonLayers = new L.GeoJSON(geoJson, {
  pointToLayer: (feature = {}, latlng) => {
    const { properties = {} } = feature;
    let updatedFormatted;
    let casesString;

    const {
      country,
      updated,
      cases,
      deaths,
      recovered
    } = properties

    casesString = `${cases}`;

    if ( cases > 1000 ) {
      casesString = `${casesString.slice(0, -3)}k+`
    }

    if ( updated ) {
      updatedFormatted = new Date(updated).toLocaleString();
    }

    const html = `
      <span class="icon-marker">
        <span class="icon-marker-tooltip">
          <h2>${country}</h2>
          <ul>
            <li><strong>Confirmed:</strong> ${cases}</li>
            <li><strong>Deaths:</strong> ${deaths}</li>
            <li><strong>Recovered:</strong> ${recovered}</li>
            <li><strong>Last Update:</strong> ${updatedFormatted}</li>
          </ul>
        </span>
        ${ casesString }
      </span>
    `;

    return L.marker( latlng, {
      icon: L.divIcon({
        className: 'icon',
        html
      }),
      riseOnHover: true
    });
  }
});

So what are we doing here?

We create a new instance of L.GeoJSON which will transform our GeoJSON document into something Leaflet will understand
Inside that instance, we define a custom pointToLayer function. This allows us to customize the map layer Leaflet creates for our map
In our function, we assign and create our datapoints that we want. Most of it is destructuring, but we format the cases count to show 1k+ instead of 1000 and a formatted date instead of the timestamp
We create an HTML string block which is used to define our map marker that will be added to the map. This also includes the HTML for the tooltip that will pop up when hovering over a marker
We return L.marker with our custom configuration that includes a class of icon for the container and our custom HTML.
Additionally, we add the riseOnHover property so when hoving over a marker, it surfaces itself above over the other markers on the map

We also want to add a bit of CSS here so that we can make sure our markers show up in the map and are usable. Let's add this snippet to our assets/stylesheets/components/_map.scss file:

.icon-marker {

  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  color: white;
  width: 3.6em;
  height: 3.6em;
  font-size: .7em;
  font-weight: bold;
  background-color: $red-800;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(black, .9);

  &:hover {

    .icon-marker-tooltip {
      display: block;
    }

  }

}

.icon-marker-tooltip {

  display: none;
  position: absolute;
  bottom: 100%;
  width: 16em;
  font-size: 1.4em;
  padding: 1em;
  background-color: $blue-grey-900;
  border-radius: .4em;
  margin-bottom: 1em;
  box-shadow: 0 3px 5px rgba(black, .9);

  &:before {
    display: block;
    position: absolute;
    bottom: -.6em;
    left: 50%;
    content: '';
    width: 1.4em;
    height: 1.4em;
    background-color: $blue-grey-900;
    transform: rotate(45deg);
    margin-left: -.7em;
  }

  h2 {
    font-size: 1.5em;
    line-height: 1.2;
    margin-bottom: .1em;
    margin-top: 0;
  }

  h3 {
    font-size: 1.2em;
    margin: .1em 0;
    font-weight: normal;
    color: $blue-grey-100;
  }

  ul,
  p {
    font-weight: normal;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: .6em 0 0;
  }

}

What we're doing:

We create our round markers using the .icon-marker class and set up our .icon-marker-tooltip class to show up when hovered over
Our .icon-marker-tooltip class is hidden by default, as it's our tooltip, but we position it absolutely to appear over top of our marker and formatted the way we want it

And finally, once we have our geoJsonLayers created with our styling added, we can add it to the map!

geoJsonLayers.addTo(map)

Now you might be wondering why it doesn't appear to be centering properly. Go ahead and change the LOCATION variable at the top of the index.js file to:

const LOCATION = {
  lat: 0,
  lng: 0
};

Once that's set, when the page reloads, the map should be centered in the middle of the world!

Follow along with the commit!

Yay, we did it! 🎉

If you followed along, you now have created your own Coronavirus map dashboard that gives some quick stats about the cases around the world.

Take what you learned and run with it. You can apply this to any other type of data that you can imagine.

What else can we do?

Add more styles and a custom basemap

In my original demo, I set up a custom basemap using Mapbox that allows me to have a dark background making the markers easier to see.

Mapbox is great and has a nice free tier if you're interested in getting started.

Once you have a Mapbox account, you can even copy the style I used and make it your own.

Basic Dark Mapbox Theme

To learn how to integrate it, you can try to check out the source code of my original demo:

https://github.com/colbyfayock/coronavirus-map-dashboard

Add overview dashboard stats

Dashboards with maps like the Johns Hopkins University app allows us to see more than a look on the map, but a glimpse at quick stats about the cases around the world.

The NovelCOVID API has more endpoints like /all that provide a few global stats.

Be safe and stay informed

I want to reiterate that you should make sure you're staying up to date using official sources for information, such as the Johns Hopkins University dashboard. Though the data should be reliable, it should also be considered a proof of concept for building a map and referencing, but shouldn't be considered for any kind of statistical analysis.

Please take care of yourself during these times. We're all in this together! ❤️

Want to learn more about maps?

You can check out a few of my other resources to get started:

Get more content straight your inbox!

Originally published on March 29, 2020 at colbyfayock.com

Put Down the Javascript: Learn HTML & CSS first

Colby Fayock — Mon, 30 Mar 2020 12:14:05 +0000

A growing trend in front end development is the idea that you can dive right into Javascript and succeed. Honestly, for better or worse you probably can. But you're just building on top of a fragile foundation that will come back to bite you.

Why do I need HTML or CSS?

The UI frameworks that we know today like React and Vue build on top of the basic building blocks of a webpage: HTML and CSS. Though these UI frameworks supercharge these basics through some cool tools and Javascript, what you're building is fundamentally the same thing as the Space Jam website from 1996.

But I get it, writing HTML and CSS manually is dated right?

Understand what your tools are doing

Having at least a basic understanding of what's going on under the hood will help you immensely as you develop and debug your applications.

You might have run into a few odd things in the browser, such as why does HTML transform code there? Using the following as an example:

<style>
p {
  color: purple;
}
</style>
<h1>My Cool Page</h1>
<p>
  Some cool stuff
  <div>Is this still cool?</div>
</p>

When you load this up in Chrome, you'll notice some changes...

Why isn't all of my paragraph cool and purple?

Well, turns out your browser is helpful and automatically fixes your code. A paragraph tag (<p>) can not contain another block level element, so Chrome and other browsers will adjust your HTML on the fly to make it valid. HTML is very lenient this way! But this is a common bug that stumps developers old and new who just aren't familiar with how HTML works.

Learn the magic of CSS

CSS can do a whole heck of a lot these days. It's so much more than setting a few colors, but gives you the ability to provide consistent UI patterns throughout your application.

Don't be afraid of it! If you started in Javascript, you might be tempted to do everything there, but you'll quickly find managing all of the real power of CSS within your JS is a pain, and frankly, unnecessary unless you're Facebook.

What can you do? Build the Alien movie title scene with pure CSS. Grab some hover effects for your buttons. Or just animate anything!

A favorite of mine is creating a fancy Facebook-like loading animation class that will apply an animated gradient background to anything you add it to:

.loading {
  background: linear-gradient(90deg, #eff1f1 30%, #f7f8f8 50%, #eff1f1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

Crack open a codepen and try it yourself!

Make your search results relevant

Search engines do their best to figure out how the content you write is relevant to users searching for it. But how you write your HTML makes a difference with helping them determine that value. A common mistake I see is using Heading elements incorrectly or simply not using them at all.

<h1>All</h1>
<h1>My</h1>
<h1>Content</h1>
<h1>Is</h1>
<h1>Important</h1>

Consider the outline of this blog post:

- Put Down the Javascript - Learn HTML & CSS
  - Why do I need HTML or CSS?
  - Understand what Your tools are doing
  - Learn the magic of CSS
...

"Learn the magic of CSS" is not the key takeaway from the page, so I wouldn't want to feature that as the most important. The title of the post however, "Put Down the Javascript --- Learn HTML & CSS", reflects the overall story, making it the most important, so I would want to make it #1.

So with my HTML, I would want to make it look something more like:

<h1>Put Down the Javascript - Learn HTML & CSS</h1>
<h2>Why do I need HTML or CSS?</h2>
<h2>Understand what Your tools are doing</h2>
<h2>Put Down the JS - Learn HTML & CSS/h2>

This lets Google, Bing, and all the other search engines know exactly what should be the most important part of the page and help identify the general hierarchy.

Drive accessibility by inclusive development

By not coding responsibly, we automatically exclude people from accessing the site we work so hard to build. Often these people care about what's getting built just as much if not more than you and I do.

By doing a little homework the first time and spending an extra second thinking about what we're writing, we can be inclusive to all friends visiting our sites.

Take a simple navigation list commonly seen in most websites today. You might be tempted to write out a few div s because they work right?

<div className="nav">
  <div><a href="#">Link 1</a></div>
  <div><a href="#">Link 2</a></div>
  <div><a href="#">Link 3</a></div>
</div>

The issue is, they're not as easy for screen readers to pick up on. To fix this, you /technically/ can write even less HTML ( div is 3 characters, ul and li are 2 🙄).

<ul className="nav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Taking it a step further, if this is your navigation menu, wrap it in an HTML 5 navigation element (<nav>) and users will now be able to directly access the menu.

Check out The A11y Project for more good tips on accessibility.

Simplify your code, embrace native functionality

You would be surprised how much functionality exists natively in modern browsers, with more browser support than you probably need (sorry to those of you who still support IE9).

With some basic HTML, you can build a text input that has searchable, autocomplete-like text in a dropdown:

<label>My Favorite Color</label>
<input type="text" name="color" list="colors">
<datalist id="colors">
  <option value="Magenta">
  <option value="Purple">
  <option value="Ultraviolet">
</datalist>

Taking advantage of CSS pseudo selectors, we can dynamically style a checkbox-type element depending on if it's checked:

<style>
.is-checked {
    display: none;
}

#my-checkbox:checked + span .is-checked {
    display: inline;
}

#my-checkbox:checked + span .not-checked {
    display: none;
}
</style>

<label for="my-checkbox">
  <input id="my-checkbox" type="checkbox" />
  <span>
    <span class="not-checked">Not Checked</span>
    <span class="is-checked">Checked</span>
    </span>
</label>

This is Your Craft, Pay Attention to It

I'd wager the majority of the people reading this are doing so because they care about their code and are super passionate about what they do. Just like any other craft that came before development, practicing and focusing on the fundamentals will strengthen your ability as a developer. Bonus, you'll be getting an easy win by helping be more inclusive with your work and getting more people to your application!

Get more content straight your inbox!

Originally published on August 28, 2019 at colbyfayock.com

How to build a mapping app in React the easy way with Leaflet

Colby Fayock — Fri, 27 Mar 2020 12:03:49 +0000

Mapping is hard, but spinning up a new app that renders maps doesn't have to be. Here's how you can easily get started working with maps in a new React app.

Not that AAA map under your car seat

Maps have been around for thousands of years, but they've become more complex and powerful within the last couple decades simply due to the fact that computers exist. This has enabled the creation of products we use every day - like Google Maps that help us get home from work and avoid traffic, or weather maps that allow us to check real time radar images. Taking that a step further, scientists use maps every day using data from satellite imagery to try to get a better understanding of our humble planet.

This sounds hard...

Building maps

Plot twist, it's not hard!

At least it's not hard to get started. Thankfully, the parts that are the hardest are already built into libraries that can easily be tapped into with JavaScript.

Enter Leaflet...

Mapping Libraries

There are a few libraries in the mapping space right now (like OpenLayers), but we like Leaflet.

To get started with Leaflet, first include the library's assets on your page. Next, mount the application onto a root element within the DOM with some basic settings. You can kind of think of it like how React mounts to a DOM node, but Leaflet itself doesn't use React. Once initialized, Leaflet allows you to start utilizing it's API to project a basemap, add layers, tiles on those layers, and even start to draw on it.

Basemap? Layers? Tiles?

To get the basic gist, think of a cake. Traditionally, cakes have different layers, some on the bottom, some on the top, some might just cover one side with icing. Your map layers function similarly. The bottom layer, which is your foundation, will be your "basemap". Below, we're seeing a snapshot of the 2018 California Camp Fire wildfires on top of NASA's MODIS Aqua satellite imagery.

Now, to get a basemap, we need the imagery to produce it, which is where tiles come in. A tile is a single image block that makes up your group of tiles that represent your layer.

Your tiles are really just a simple image, but alongside the rest, coordinated by geographic positions and zoom levels, make up what you see when you're looking at a web map like the basemap shown above. The goal of including these smaller individual pieces rather than 1 huge image is that between dealing with the entire globe, the different zoom levels available, and the resolutions available beyond that, we're talking about gigabytes upon gigabytes of image assets that just wouldn't be reliable or realistic to serve as a whole.

Once you've established your basemap, you can then overlay additional layers using more imagery, vector tiles, or datapoints that get transformed to layers. In the screenshot below, we're zoomed in beyond the highest resolution of our basemap. Notice though the imagery on the left, is an individual overlay tile from Digital Globe that provides us with a higher resolution of part of the area surrounding the fire zone.

Another example on top of that is adding points representing fires collected from NASA's VIIRS imagery.

This allows us to have the context of the basemap as well as being able to cast any type of data we'd like to better understand its effects.

In addition to the VIIRS data, there are many sources of imagery, vector tiles, and datasets published by governments and municipalities that you can use to help build interesting maps and data visualizations. NASA is one good source of these types of assets, but many commercial providers release open access to disaster datasets that help others build solutions around relief efforts.

What's this about drawing stuff?

Usually when people use maps, they want to look at points of interest. Drawing gives us the ability to frame those areas of interest with different drawing tools such as creating a rectangle using a bounding box tool or drawing a circle. These are simple shapes, but those shapes represent a geographic space that can then be used to gather data about that area.

React ❤️ Leaflet

Leaflet in itself gives you a lot to work with, but there's still a lot of manual effort that goes along with it. If you're used to building a React app, you're probably not as used to building an entire UI using nothing but APIs based on the browser's window, and this is where React Leaflet shines.

React Leaflet is a React library that takes the map building and bundles it into intuitive components that represents those parts of the map. Consider the above, where we talked about your basemap and layers to along with it, you might see it looking something along the lines of:

While you would probably expect that it's not as flexible as utilizing the Leaflet APIs directly, this completely opens up one's world to being able to easily spin up simple map solutions in an intuitive way without all the effort. After all, at that point, you're spinning up a React app which you're probably already familiar with.

Taking it a bit further with Gatsby

You want it easier, you say? You want me to build the map for you, you say? Well, you're in luck! First, let's give a brief introduction to another tool.

For the unfamiliar, Gatsby is a javascript framework that allows developers to easily spin up full, completely working React applications in a matter of minutes. They have all the nuts and bolts in place and moved out of the way to let you do what you do best: focus on the important parts of your application.

The beautiful part about Gatsby is that it supports extensions of their default installation which they call Starters. What better way to make it easier for people to spin up maps than to create a Gatsby Starter?

Gatsby Starter Leaflet

Combining the ease of a Gatsby Starter and the flexibility of Leaflet, we have Gatsby Starter Leaflet. This simple tool allows you to scaffold a new React application running Leaflet along side React Leaflet in the matter of seconds (or minutes depending on your computer).

With a few basic commands, including installing your dependencies, you have an app that's ready for you to start building on top of to create maps that will save the world. Even better, it includes some out of the box integrations like OpenStreetMap and an easy to setup map service configuration to the foundational React Leaflet component APIs that allow you to easily get product and have more flexibility to create smarter Mapping apps.

There's gotta be some downsides...

No library or framework isn't without its downsides. The more complicated your mapping application gets, the more pain points you run into. Here are a few from our experience that might help you settle in.

Leaflet - from the Window to React

Trying to manage state and the lifecycle between your Leaflet map and your React components can prove to be tricky. Trying to constantly maintain and update your component using props will immediately start to create issues between stale map state or memory leaks due to maps not properly unmounting when the component does.

Advice: mount your map with React, interact with it using the native Leaflet API. Once your map is rendered and settled down, you can use Leaflet to fly your user around the world and draw on your map without running into the state issues of multiple component renders.

Limited Use of Public Tiles

While there are a few tiling services available that allow you to easily plug in and create a basemap, not all of these are actually intended to be heavily used. Take for instance OpenStreetMap, while you may be able to play around and develop basic solutions on their public endpoint, heavy use will be throttled and potentially blocked without explicit permission from those who maintain their servers.

Advice: when you're just starting out playing around, you shouldn't have to worry too much. Worst case the maps will be a little slow to download. As your application starts to get more traffic, you'll want to look into spinning up your own tiling service or paying for an out of the box solution such as Mapbox.

Get mapping!

It has never been easier to build a map-based web application. There is enough tooling, documentation, and public data available to help you get off the ground and start building maps to explore our world in the time it takes you to set up a blog or static website. So what are you waiting for?

Get more content straight your inbox!

Originally published on Oct 24, 2019 at element84.com