With Node.js, developers can create server side applications, command line tools, and more.

This article is not a crash course on how to use Node.js (you'll find resources for that in the last section of this article). Rather, it's an introduction to what Node.js is, its features, and what it is used for.

What is Node.js?

Node.js is an open source JavaScript runtime environment that lets developers run JavaScript code on the server.

If that's too complex for you to understand then you should think of it this way: Node.js is JavaScript that runs outside the browser — on the server.

Note that Node.js is not a programming language - it's a tool.

What Is So Special About Node.js?

In this section, we'll discuss some of the features that make Node.js cool to use.

The aim is not to compare Node.js to other backend technologies, but to help you understand some of its functionalities.

Single Threaded and Asynchronous

Node.js is fast at executing tasks (receiving requests and sending back responses) because of its single threaded and asynchronous nature.

Let's explain some of the terms above.

By single threaded, this means that Node.js has a single source for handling requests. Multiple threaded backend technologies allocate a new thread for every new request.

You can think of a thread as someone who renders a service to multiple people. A very popular real life example would be a restaurant. We'll explain this example further along with the asynchronous part of Node.js.

Node.js is asynchronous because it can handle multiple requests simultaneously. Let's get back to the restaurant example.

A customer gets to a restaurant and sits down waiting for a server. The server gets to the customer's table and takes their order. The order is then taken to the kitchen.

But the server doesn't wait for the order to be ready before proceeding to the next customer. They'll return with what the customer ordered for when its ready – in the meantime, the server proceeds to the next customer and repeats the same process.

The example above is similar to how Node.js works under the hood. It is able to process multiple requests using a single thread asynchronously (without waiting for one request's completion before moving to the next).

So when the response for a request is ready, it is sent back to the client.

The single threaded and asynchronous nature of Node.js makes it very fast and ideal for building data-intensive and real-time applications.

JavaScript Everywhere

Another advantage of using Node.js as a web developer is the possibility of using JavaScript on the frontend and backend of your web app.

Before the release of Node.js, web developers had to learn a different programming language to build the backend of their web apps.

Of course, some developers still use different languages for their backend but Node.js makes it easy to use just one language — JavaScript – if you want.

Fast Execution Time

Node.js is built on Google's V8 JavaScript engine which has a very high performance. This lets Node execute requests quickly.

Cross Platform Compatibility

Node.js supports many major platforms. So you can write your code and it will run on Windows, MacOS, LINUX, UNIX and even some mobile devices.

What is Node Used For?

Here are some of the cool things you can do with Node.js:

• Create HTTP web servers.
• Generate web pages dynamically.
• Collect and send form data to a database.
• Create, read, update, and delete data stored in a database.
• Create APIs.
• Build command line tools.
• Read, write, move, delete, and open/close files on a server.

Summary

In this article, we talked about Node.js. We first had a look at what it really is.

We then talked about some the features that make Node.js stand out.

Lastly, we saw a list of how you can use Node.js.

How to Learn Node.js

Now that you've had a brief introduction to what Node.js is, its features, and what it is used for, here are some resources that you can use to learn how to use Node.js:

• freeCodeCamp's Back End Development and APIs certification. You'll learn how to write back end apps with Node.js and npm. You'll also build web applications with the Express framework, along with MongoDB and the Mongoose library.
• An 8-hour course on the freeCodeCamp.org YouTube channel that'll teach you Node.js and Express.
• A 10-hour project based course on the freeCodeCamp.org YouTube channel. You'll build four projects from the knowledge gained from the 8-hour course above.

Happy Coding!

Front-end developers do not need a degree or a school certificate to work. Rather, they must understand the fundamentals of front-end development, programming languages, and front-end development frameworks.

In this guide, you will learn how to become a front end developer by first understanding what front end development entails, the technical and soft skills required, the languages and frameworks available, and some steps to get started.

A front end developer in the United States may earn an average of $86,178 per year, according to Glassdoor. According to Payscale, a "typical" front-end developer can earn an annual income of $71,350.

If you're new to the tech industry, you might be confused about what front end means, as well as other aspects of web development like back end and full stack, so we'll start by explaining them.

What is front end?

All the websites we browse, the e-commerce websites we purchase goods from, the blogs we read from, and so on are made user-friendly and aesthetically pleasing by front-end developers.

There are two major aspects of web development to consider when building websites and web applications: the front end and the back end.

Front-end development is concerned with the front end of any web application, as the name implies. This is what the user sees and interacts with by performing operations such as clicking a button, scrolling through a page, filling out a form, and so on. This is the client-side functionality of a web application.

Back end refers to the events that occur behind the scenes, such as infrastructure, database connection and communication, and so on. Full stack refers to a combination of front end and back end.

What Does a Front-end Developer Do?

We just discussed the various aspects of web development, front and, back end, and full stack. And to go along with that we also have different types of developers based on which aspects of web development they are proficient in. So we have front-end developers, back-end developers, and full-stack developers.

A front-end developer is a professional who is in charge of creating the user interface and user experience (UI/UX) that users interact with in order to access the application in question. They are problem solvers who use programming languages, tools, creativity, and experience to create a website or application that solves a user's problem and looks good.

As previously stated, a back-end developer is responsible for everything related to the backend, including logic, database communication, and much more.

Finally, full-stack developers are those who understand both front-end and back-end development, allowing them to start and finish a project on their own.

In a professional setting or standard company, there is usually a UI/UX designer(s) who designs how the interface will look and what they want the user's experience to be.

Then they'll passes their design on to the front-end and back-end developers, who now work on the implementation so the app they've designed works on the web. The front-end developer will recreate the design by writing the program in HTML, CSS, and JavaScript.

How to Become a Front-End Developer

So far, we've discussed what front end means and who a front-end developer is. Now, let's look at some of the major requirements/skills required before you can call yourself a frontend developer.

It is important to understand that you do not need to know everything before working as a front-end developer, but the fundamentals, such as HTML, CSS, and JavaScript, are always essential.

1. Learn HTML, CSS, and JavaScript

When you look at a site on the web, the three most important things that make up what you see on the web are HTML, CSS, and JavaScript. So these are the first three things to learn as the foundation for becoming a front-end developer.

They are the building blocks for web and app development, so you must learn if you want to get into web dev. Fortunately, there are numerous online resources available to assist you in learning and practicing them.

What is HTML?

HTML stands for Hyper Text Markup Language, it is the skeleton of all web pages and applications as thier most basic building block. You use HTML to structure your page into elements such as paragraphs, sections, headings, navigation bars, and so on.

HTML provides structure to the content appearing on a website, such as images, text, or videos. A page with just HTML is very basic and unappealing, and it will need CSS styling to make it presentable.

HTML is frequently the first language that developers learn, and it is essential for front-end development work. Do you want to know more about HTML? Begin with freeCodeCamp's Responsive Web Design certification and Beau Carnes' brand new full HTML course.

What is CSS?

CSS is an abbreviation for Cascading Style Sheets, and you use it to enhance the appearance of a web page by adding CSS styles. These styles make your website more appealing and enjoyable to view and use for the end user.

Do you want to know more about CSS? To get started, check out the second part of freeCodeCamp's Responsive Web Design certification.

What is JavaScript?

HTML is a markup language, CSS is a style sheet, and then we have JavaScript, the third building block. JavaScript is a programming language that allows you to make your web pages more interactive. This can include animations, dynamic styling, effects/behaviors when buttons are clicked, game motion, and so on.

If you want to learn JavaScript, look into freeCodeCamp's JavaScript Algorithms and Data Structures certification. You can also supplement your learning with this excellent Intro to JS course.

2. Practice Coding

There is a popular idiom that says “Practice makes perfect”. This means that you'll become better at something if you do it often.

If you want to become a professional front-end developer, you have to practice consistently. This will help you learn the concepts thoroughly (and not just on the surface). The more you practice, the more (and better) you'll understand concepts.

3. Enhance Your Skills

"Learn constantly, there is always one more thing to learn!" said Steve Jobs. This holds true in all aspects of life, including programming and front-end development.

As new technologies, tools, syntax, and approaches are introduced, it is always best to stay up to date with new technology trends and avoid falling behind.

This will help you grow your skills as a front-end developer, and you can always stay in the loop by joining and interacting with active developer communities. There are many communities out there, such as the freeCodeCamp developer community and all of the other local communities that surround everyone of us including you.

4. Learn the Command Line and Version Control

As a frontend developer, you should understand how the command line works because it allows you to access operating system functions through a text interface. Many professionals prefer CLIs for their speed and performance when installing libraries and frameworks.

Front-end developers should also be familiar with version control systems such as Git, which is the most widely used. When coding, you'll frequently want to trace your coding history and other information.

Version control makes this much easier because it allows you and your team to efficiently communicate and manage (track) all changes made to the source code. It also gives you information such as who made the changes and what changes were made.

5. Understand Application Program Interfaces (APIs)

As a professional frontend developer, you should be familiar with APIs and how to consume and manipulate them. This is critical for communicating with backend logics and databases.

To interact with APIs in JavaScript, you’ll mostly use the browser's Fetch API or the Axios library. This article explains how to use the Fetch API in JavaScript.

6. Learn and Understand JavaScript/CSS Libraries

Today, there are numerous JavaScript libraries available, all of which aim to make web application development easier. These are pre-written JavaScript scripts that make developing JavaScript-based applications easier.

There are have a lot of them, but it's best to pick one and learn it thoroughly, such as React, Vue, or Angular (three of the most popular). You can check out freeCodeCamp’s frontend libraries development certification course to learn more.

There are also have some style libraries that make styling your web pages simple, such as Bootstrap, Sass/Scss, Tailwind, and so on.

7. Build an online portfolio

Building your portfolio is an easy way to demonstrate your expertise as a front-end developer.

If you're just starting out as a front-end developer, you don't have to have every piece of your portfolio be a client project. You can take charge and be inventive. Make use of new tools and libraries to create something spectacular. As your career progresses, you will be able to highlight more projects on which you have worked.

You can also look through the portfolios of your fellow front-end developers to see what you like and dislike. Then, knowing what you want to show the world, create your own website.

Here's a fun course that will help you build your own portfolio site with HTML, CSS, and JavaScript – so you can practice those web dev skills.

You can also have friends and members of the community critique and test your site to ensure that everything looks good. Don't forget that all of the words on your website should be assisting you in landing a great job. You don't want it to be too long or too boring.

Here's are some tips that'll help you level up your developer portfolio to really make it stand out.

8. Cultivate your soft skills

Front-end developers must be effective communicators (written and verbal) because they must interact with both the technical team and the client.

They must also be excellent communicators within their code, as it is critical to take the time to comment and write appropriate documentation within your code so that you and others can easily understand it even after a long time.

Front-end developers should also have good attention to detail and be meticulous in all aspects of their work. They must have a keen eye and be able to catch small errors or inconsistencies when creating web pages.

And front-end developers must be lifelong learners, because websites are evolving and expectations for responsiveness, accessibility, and appearance are always changing. Front-end engineers must stay as current as they're able and will almost certainly need to learn new code languages or libraries over time.

9. Start applying for internships or jobs you want

Once you have gained proper knowledge of frontend by learning necessary skills and building a simple résumé, you can now begin to search for front-end job opportunities.

Check out their requirements to see what other areas you need to improve in as a front-end developer.

Finally, always apply for jobs, and never be afraid to apply. This will give you some experience to help you learn how companies hire and what it takes to be hired.

Conclusion

In this article, we've learned what a front-end developer is and what it takes to become one.

We've also learned that becoming a front-end developer without a degree is not only possible, but also attainable.

One final question most people have is how long it takes to become a front-end developer. Well, the length of time it takes is entirely dependent on your learning pace and prior knowledge.

Just remember – don't compare yourself or your learning pace to that of others as you learn. Set aside some time each week or day to learn, do your best to stick to it, and then rejoice.

Python has grown in popularity immensely in recent years. It has a wide range of applications, from its most popular use in Artificial Intelligence, to Data Science, Robotics, and Scripting.

In the web development field, Python is used mainly on the backend with frameworks such as Django and Flask.

Before now, Python didn't have much support on the front-end side like other languages such as JavaScript. But thankfully, Python developers have built some libraries (such as Brython) to support their favourite language on the web.

And this year, during the PyCon 2022 conference, Anaconda announced a framework named PyScript that allows you to use Python on the web using standard HTML.

You can check out this tweet about the launch:

Prerequisites

You'll need the following tools and knowledge to code along with this article:

• A text editor or IDE of your choice.

• Knowledge of Python.

• Knowledge of HTML.

• A browser (Google Chrome is the recommended browser for PyScript).

What is PyScript?

Source: PyScript official website

PyScript is a Python front-end framework that enables users to construct Python programs using an HTML interface in the browser.

It was developed using the power of Emscripten, Pyodide, WASM, and other modern web technologies to provide the following abilities in line with its goals:

• To provide a simplistic and clean API.

• To provide a system of pluggable and extensible components.

• To support and extend standard HTML to read opinionated and dependable custom components in order to reach the mission “Programming for the 99%.”

Source: Anaconda Blog

In the last couple of decades, Python and advanced UI languages like modern HTML, CSS, and JavaScript have not worked in collaboration. Python lacked a simple mechanism to create appealing UIs for simply packaging and deploying apps, while current HTML, CSS, and JavaScript can have a steep learning curve.

Allowing Python to utilize HTML, CSS, and JavaScript conventions solves not only those two problems but also those related to web application development, packaging, distribution, and deployment.

PyScript isn't meant to take the role of JavaScript in the browser, though – rather, it's meant to give Python developers, particularly data scientists, more flexibility and power.

Why PyScript?

PyScript gives you a programming language with consistent styling conventions, more expressiveness, and ease of learning by providing the following:

• Support on the browser: PyScript enables support for Python and hosting without the need for servers or configuration.

• Interoperability: Programs can communicate bi-directionally between Python and JavaScript objects and namespaces.

• Ecosystem support: PyScript allows the use of popular Python packages such as Pandas, NumPy, and many more.

• Framework flexibility: PyScript is a flexible framework that developers can build on to create extensible components directly in Python easily.

• Environment Management: PyScript allows developers to define the files and packages to include in their page code to run.

• UI Development: With PyScript, developers can easily build with available UI components such as buttons and containers, and many more.

How to Get Started with PyScript

PyScript is fairly easy and straightforward to learn. To get started, you can either follow the instructions on the website or download the .zip file.

In this article, we'll be using and learning how to use PyScript via the website. You can do this by linking the components in your HTML file. Let’s print our first “Hello World” with PyScript.

Create an HTML file

To begin, you'll need to create an HTML file to display text on your browser using the text editor/IDE of your choice.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>

</body>
</html>

Link PyScript

After creating the HTML file, we'll need to link PyScript in your HTML file to have access to the PyScript interface. This will be placed in the <head> tag.

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

Print to browser

Now that you've linked PyScript to the HTML file, you can print your “Hello World”.

You can do this with the <py-script> tag. The <py-script> tag allows you to run multi-line Python programs and have them printed on the browser page. Place the tag in between the <body> tags.

<body> <py-script> print("Hello, World!") </py-script> </body>

The full code for the HTML file is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>
    <py-script> print("Hello, World!") </py-script>
</body>
</html>

On your browser, you should see this:

Tip: If you're using the VSCode editor, you can use the Live Server add-on in VSCode to reload the page as you update the HTML file.

More Operations with PyScript

There are more operations you can perform with the PyScript framework. Let's look at some of them now.

Attach labels to labeled elements

While using PyScript, you might want to pass variables from your Python code to HTML. You can do this with the write method from the pyscript module within the <pyscript> tag. Using the id attribute , you get to pass strings displayed as regular text.

The write method accepts two variables: the id value and the variable that will be provided.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
</html>

And the output becomes:

Run REPL in the browser

PyScript provides an interface for running Python code in browsers.

To be able to do this, PyScript uses the <py-repl> tag. The <py-repl> tag adds a REPL component to the page, which acts as a code editor and allows you to write executable code inline.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

Trying it out in browser (preferably Chrome), you should get this:

Import Files, Modules, and Libraries

One of the functions PyScript provides is flexibility. In PyScript you can import local files, inbuilt modules, or third-party libraries. This process uses the <py-env> tag. This tag is for declaring the dependencies needed.

For local Python files on your system, you can place the code in a .py file and the paths to local modules are provided in the paths: key in the <py-env> tag.

Let’s create a Python file example.py to contain some functions:

from random import randint

def add_two_numbers(x, y):
    return x + y

def generate_random_number():
    x = randint(0, 10)
    return x

Then the Python file will be imported into the HTML with the <py-env> tag. You should place this tag in the the <head> tag, above the <body> tag.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - paths:
          - /example.py
      </py-env>
    </head>

  <body>
    <h1>Let's print random numbers</h1>
    <b>Doe's lucky number is <label id="lucky"></label></b>
    <py-script>
      from example import generate_random_number
      pyscript.write('lucky', generate_random_number())
    </py-script>
  </body>
</html>

This will return:

For third-party libraries that are not part of the standard library, PyScript supports them.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
            - numpy
            - requests
      </py-env>
    </head>

  <body>
    <py-script>
    import numpy as np
    import requests
    </py-script>
  </body>
</html>

Configure metadata

You can set and configure general metadata about your PyScript application in YAML format using the <py config> tag. You can use this tag in this format:

<py-config>
  - autoclose_loader: false
  - runtimes:
    -
      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

These are the optional values that the <py-config> tag provides. They include:

• autoclose_loader (boolean): If this is set to false, PyScript will not close the loading splash screen.

• name (string): Name of the user application.

• version (string): Version of the user application.

• runtimes (List of Runtimes): List of runtime configurations which would have the following fields: src, name, and lang.

Conclusion

In this article, you learned what PyScript is all about and how to use it in HTML files to run Python code on the browser. You also learned about the various operations/functionalities you can do with PyScript.

With PyScript, it’s easier to run and perform Python operations on the web, as this wasn’t easy before. This is a great tool for anyone who's looking forward to using Python on the web.

PyScript is still in its early stages and under heavy development. It is still in its alpha stage and faces known issues like the load time which can affect usability (some other operations can’t be shown at the time of this writing due to performance issues). So you shouldn't use it in production yet as there will likely be a lot of breaking changes.

References

• The PyScript official website.

• Anaconda blog.

• PyScript source code.

• Guide on getting started with PyScript.

Front end development hasn't always gotten the respect it deserves compared to back end development.

Many engineers used to look down on JavaScript. But times have changed. Web applications are growing rapidly, mainly due to the development of open-source tools.

This development has moved us farther away from jQuery and has made almost every tech company use the latest JavaScript and tools like Eslint, Babel, and Webpack.

Nowadays, the front end is moving at a speed that makes it hard to follow.

This post is all about catching up with the directions of this development area in 2022. Perhaps you will find something for yourself in these trends.

Svelte is gaining popularity

Svelte is a relatively new tool, which in theory started much too late to be able to have a chance against React, Vue, and Angular. But it's steadily gaining popularity at an unprecedented pace.

In 2021, StackOverflow users announced it as the most loved front-end framework.

But Svelte is more than that. It is a compiler that builds an optimized front end.
Svelte is not imported into the application like other popular frameworks. Instead, code written in Svelte gets compiled into pure JavaScript. This allows Svelte to win in terms of speed against frameworks such as React or Vue.

Using the Svelte framework is very easy. Here is an example of how you'd use state + forms:

Using the framework is very easy. Here is an example of using state + forms.
<script>
 let a = 1;
 let b = 2;
</script>

<label>
 <input type=number bind:value={a} min=0 max=10>
 <input type=range bind:value={a} min=0 max=10>
</label>

<label>
 <input type=number bind:value={b} min=0 max=10>
 <input type=range bind:value={b} min=0 max=10>
</label>

<p>{a} + {b} = {a + b}</p>

Simple as that! Notice three things here:

1. Forms are handled in a simple, elegant way, like in the old days, before the SPA frameworks. There is no need to attach onChange props to the inputs.
2. Markup and logic lives side by side, encapsulating the logic and a visible layer.
3. State is easy to manage.

No wonder the framework is gaining traction in the community. It is only a matter of time before new popular platforms are created in Svelte.

React, Vue, and Angular are here to stay

I started my adventure with the front end just before the premiere of Angular 2, about six years ago. I can’t count how many times since then I have read that Vue, React, or Angular is dying.

The truth has turned out to be quite different, though. Each of these three frameworks has grown in popularity since its inception.

Here is the chart (Source: Npm Trends). It is worth adding that every sudden drop on the chart is there because of December.

Angular vs React vs Vue download trends

Take a look at the chart above. Notice that Angular has grown in popularity by a factor of over ten. React and Vue grew even faster. All three frameworks support pretty much the same use cases.

This means no matter which of the three frameworks you choose, you can expect it to be used and supported for years to come.

It’s worth noting that React didn't have any significant changes in 2021. Yet the pace of its adaptation is astounding. It is likely because of the ecosystem around the technology. React has the largest selection of libraries and supporting frameworks.

Two examples worth mentioning are Next and Gatsby. The latter is one of the perpetrators of the next trend.

Frameworks need to support both static and dynamic pages

Let's establish what static and dynamic pages are in practical terms.

Dynamic pages fetch and process the content when the user opens them. Static pages are pre-defined during the build time. They become separate, generated files on the disc. They can look just the same as dynamic, but the user's browser has less work to do.

If you have a shop, you can have a single dynamic product page, or thousands of static product pages, one for every product.

This means that static pages are more performant for users, but take a lot longer to build.

The reason for abandoning static pages was the popularization of the React and Vue type single-page application (SPA) frameworks. They also restored them to favour.

Dynamic content that SPA's typically generate is much slower than a ready-to-display one written in HTML. The difference is especially big when the page is fetching data from the server. A dynamic page would typically have to download and process such data.

This resulted in giving birth to static pages in SPAs. Gatsby tackled this problem by building a framework and infrastructure for static pages in React.

A website like a blog, portfolio, or even a course platform like freeCodeCamp will be much faster static. Even server-side rendering, as is usually the case with Next.js, does not guarantee better speed (Source: Sidney Alcantara).

Focus on time to first contentful paint results in a large number of solutions for generating static pages in other frameworks, such as Vue or Svelte.

On the other hand, static pages are hard to scale for millions of pages. If you are building an app with a lot of dynamic content like user profiles, you are probably better off using dynamic pages. Both ways of handling content are here to stay.

Platforms turn single developers into entire IT departments

Recent years have brought a flood of platforms that speed up front-end development. This is huge because it allows small teams to move fast.

You can easily implement video using Twilio or Agora.io. You can add authentication in no time using Firebase, Amazon Cognito or Okta (Okta also acquired Auth0).

Deploying front-end code automatically and globally is especially worth talking about. There are three go-to solutions: Vercel, Gatsby Cloud, and Netlify. They can turn one front-end developer with an GitHub account into the entire DevOps department in 5 minutes.

At the moment of writing, all three platforms offer a relatively similar average loading times (Sources: Netlify vs Vercel, Netlify vs Gatsby Cloud).

Gatsby Cloud is React only but makes working with countless static pages almost too easy. If you are building a Gatsby app, it's probably your best bet.

Vercel supports the major frameworks, including server-side ones, like the company founders' own framework, Next.js. If you are working on a server-side rendered app, Vercel will make your life a lot easier.

Netlify focuses on client side frameworks, like pure React and Vue. It offers a wide range of useful tools such as ready-to-use forms, authentication and serverless functions. I believe it is the best choice for the traditional, client side apps.

One underdog worth mentioning is Shuffle.dev. It can create a professional website layout randomly, in seconds. It has a relatively large selection of themes and CSS frameworks and adds new features and content on a weekly basis. At CodeAlly.io, we use it a lot to speed up prototyping.

Front end optimization is key

The front end has come full circle in recent years. Light sites turned into heavy platforms with long render times. Some people may still remember when Slack used the developer version of React (Source: Robert Pankowecki). The trend to make SPAs faster has been around for years but is still gaining momentum.

Libraries that negatively impact the performance, like Moment.js, are replaced by their lighter, performant counterparts such as Day.js. Others get refactored to reduce the bundle size. Examples include Material UI and Lodash.

Sentry, the market leader in error logging, only started working on bundle size optimization a few months ago. Throughout the front-end ecosystem, there is a growing emphasis on using lazy loading, rendering the front end on the server-side, or using CSS files instead of styling the application with JavaScript, as was the case with, for example, styled-components.

Tailwind has gained much popularity recently and, in 2022, it will surely remain popular. It handles reducing the application load time like almost no other CSS tool.

That being said, it has a steep learning curve. The Tailwind code is often hard to read.

I highly recommend trying Linaria too. Linaria combines the advantages of styled-components and the speed of using static CSS files. We have been using it for a while at CodeAlly.io and, the entire front-end team loves this library: https://github.com/callstack/linaria.

Example code in Linaria:

import { styled } from '@linaria/react';
import mainTheme from 'themes/mainThemeV2';

export const Wrapper = styled.div`
 display: flex;
 flex-direction: column;
 align-items: center;
 height: 100%;
 width: 30px;
 max-height: 60px;
 border-bottom: 1px solid ${mainTheme.colors.neutral300};
 background-color: ${mainTheme.colors.primary300};
 border-radius: 8px;
`;

Notice how you can use JavaScript in styles. It is also possible to reuse styles since they are regular JS constants. The code gets compiled into a CSS file during the build process.

This results in a combination of a great developer experience and a blazing-fast front-end.

Conclusion

When I was getting started, things were moving much slower. There is a lot of innovation happening and the front end is evolving fast.

If you want to work in the industry, you might want to check CodeAlly out. It's a platform I founded with friends where tech companies compete for programmers by inviting them for jobs.

New programmers with little to no experience also get to prove their skills with a built-in VSCode and Docker code challenges.

I hope this article was fun to read and you’ve found something valuable here. Until next time!

In this article, I will explain what Front End Development is, what skills you need to become a Front End Developer, and tips for landing a job.

What is Front End Development?

Everything you see on a website, like buttons, links, animations, and more, were created by a front end web developer. It is the front end developer's job to take the vision and design concept from the client and implement it through code.

Let's take a look at the freeCodeCamp home page.

Everything on the page from the logo to the search bar, buttons, overall layout and how the user interacts with the page was created by a front end developer. Front end developers are in charge of the look and feel of the website.

Front end developers also have to make sure the website looks good on all devices (phones, tablets, and computer screens).

What Skills Do You Need to Become a Front End Developer?

The three main languages you need to know well are HTML, CSS, and JavaScript. From there you can focus on frameworks, libraries, and other useful tools.

HTML

HTML stands for HyperText Markup Language. HTML displays the content on the page like buttons, links, headings, paragraphs, and lists.

You should not use HTML for styling. That is what CSS is for.

I would suggest going through the freeCodeCamp HTML challenges to start learning the basics.

CSS

CSS stands for Cascading Style Sheets. CSS is responsible for the style of your web page including colors, layouts, and animations.

freeCodeCamp's Responsive Web Design Course will teach you the basics of CSS, responsive design and accessibility. Responsive design is essential in creating websites that look good on all devices.

Accessibility is the practice of making sure that everyone can easily use your web sites. You do not want to create web sites that cannot be used by those with assistive technologies like screen readers.

After completing the course, you will be able to starting building small web pages.

JavaScript

JavaScript allows users to interact with the web page. Examples of JavaScript can be found in virtually any web page including the freeCodeCamp homepage.

For example, when I click on the Menu button at the top of the page, it will open a dropdown list of options. Every time I click on that button, it will toggle back and forth between opening and closing the Menu.

JavaScript can be used in online games, web pages, mobile applications and more.

To start learning JavaScript, you can take freeCodeCamp's JavaScript Algorithms and Data Structures course. From there, you can start building projects from my 40 JavaScript Projects for Beginners.

CSS Frameworks, Libraries, and Preprocessors

Once you learn the basics of CSS, then you can start to work with different frameworks and libraries. These tools were created as a way to help speed up the development process.

Frameworks like Bootstrap and Tailwind CSS allow you to add the catalog of classes to your webpage. As a result, you end up with professional and mobile-friendly designs.

There are dozens of options on the market and you don't need to learn them all. It's often helpful to look at jobs in your area and see what technologies they're using. Then you can focus on the most common/in-demand skills.

Here is a list of a few options:

• Bootstrap
• Tailwind CSS
• Bulma
• Materialize
• Semantic UI

CSS preprocessors like Sass and Less, allow you to add logic and functionality to your CSS. These tools make your CSS clean and easy to work with.

JavaScript libraries and frameworks

Just like with the CSS libraries and frameworks, there are many options for JavaScript.

It is not necessary to learn them all. Same as above, research job postings in your area to see what libraries and frameworks are being used.

Here are some popular options:

• React
• Angular
• Vue

These frameworks and libraries allow you to save time and do more with less code. It is possible to get a job specializing in React, Vue, or Angular.

Here are some suggested learning resources.

• freeCodeCamp's React YouTube course
• Brad Traversy's Angular YouTube course
• Brad Traversy's Vue YouTube course

Testing and Debugging skills

As you are developing your application, there will be errors in your code that need fixing. Debugging is the act of identifying those errors ("bugs") and fixing them.

Testing is another important skill to learn. Writing tests for your code is a way to ensure that your code is doing what it is supposed to do.

For a more in depth explanation on the different types of testing, I would suggest reading this article.

Version control

Version control is a way to track and manage changes to the project's code. Git is a popular software that is used to track your code.

If you mess up a lot of things in your code, you can use Git to go back to a previous version of your code instead of manually rewriting everything.

Learning Git also allows you to collaborate with others on a team and make changes to the same code base from different locations.

I would suggest starting to learn Git and using a service like GitHub to host your personal projects.

Problem Solving

The most important skill for any developer is knowing how to problem solve. Companies and clients are looking for you to provide solutions.

It is important to learn how to tackle a problem, break it down into smaller manageable pieces, and troubleshoot the issue in these web applications.

How Can You Get a Job as a Front End Developer?

Once you have learned the technical aspects of front end development, you have to focus on putting together your job application materials. There are many incredible resources that can help you learn how to get a developer job.

Résumé building resources

• How to Get Your First Dev Job – Insights from Reviewing Career Switchers' Résumés
• How to Write a Developer Resume that Recruiters Will Read
• How to write an awesome junior developer résumé in a few simple steps

Technical interview resources

• How to Prepare for a Technical Interview
• How to Answer Any Technical Interview Question – Example Included
• What I Learned from Doing 60+ Technical Interviews in 30 Days
• The Best Book for Technical Coding Interview Prep
• How to prepare for a technical interview - tips and tricks to help you perform your best

Tips for landing a job

• How to Get Your First Developer Job through Intelligent, Genuine Networking
• Job Hunt Tips in 2021
• How to Master Your Job Search
• HOW TO USE LINKEDIN AS A DEVELOPER to get a job in tech! How to network!

Also, here are some resources on how to get started freelancing if you are interested in pursuing that route.

• What is Freelancing? How to Find Freelance Jobs Online And Clients in Your City
• How to Write Freelance Proposals That Will Win Over Clients + a Free Template
• The Complete Freelance Web Developer Guide: How to Make Money Through Freelance Programming Jobs

I hope you enjoyed this article and best of luck on your path to becoming a front end developer.

• [The many layers of development](#The many layers of development)
• But we’re not all full stack
• So what is the difference between Front End Development and Back End Development?
• What is Front End Development?
• What is Back End Development?
• Where things get fuzzy
• Resources to learn

The many layers of development

Whether you’re working on a website or a native iOS app, all development environments share a common theme — there’s a front end to an application and a back end.

This line can get blurry, especially given the rise of javascript and the serverless world. With the tooling somewhat merging together, we might sometimes wonder if we’re a full stack developer.

But we’re not all full stack

As much as we might all want to be, we’re not all full stack developers. Personally, I find myself able to be productive in the back end of an application, but it’s not my strength and I much prefer to be heads down building UIs.

And some people are the opposite, where they are strongest dealing with building APIs in the back end of an application and while they can build out a UI, it might be more of a prototype-like experience than a fleshed out application.

So what is the difference between Front End Development and Back End Development?

Even if you are a full stack developer, that doesn’t mean there’s not a division of responsibilities.

Front End Engineer vs Back End Engineer

So what do those look like?

What is Front End Development?

The front end of an application typically refers to the layer that represents the UI (user interface). This can include anything from a static site with HTML and CSS to a full React app that powers the UI.

What did Front End Development traditionally look like?

Javascript currently rules the front end web, but that wasn’t always the case. While it could have been used to add little bits of interaction to a site, typically front ends were rendered using server-side templating languages like framework-driven PHP and Template Toolkit (Perl).

This grew to be super popular in practice with home grown frameworks or tools like Wordpress that used PHP to drive a massive community of developers who built their websites with those tools.

The way it worked was the templating language was able to get its data straight from the server as it was rendered. When a browser requested the page directly from the origin (the server itself), whatever data the template would need, the application logic would provide at that time.

Some of the more traditional front end tools include:

• Libraries like jQuery or MooTools
• Website frameworks like Wordpress
• Plain CSS
• Abundant use of Table elements

But as time went on, javascript kept getting more mature as a language and browsers kept getting more powerful, which led to the idea that we could move more of that work to the browser to build faster and more interactive experiences.

What does Front End Development look like now?

Now it’s common to see javascript-heavy websites and apps built using UI frameworks like React, Vue, and Angular. These tools provide abstractions that allow developers to build complex UIs with reusable patterns like components.

When the browser loads the page, the page receives an initial HTML document that also includes the script tag to the javascript (same as always). But once that javascript loads, it reaches out to APIs using browser requests that when completed, update the page to fill in any kind of dynamic data that you’d typically get along with that first HTML document.

It's like building a website... with more steps

While it sounds like more steps, it commonly provides a faster initial page load and render, not to mention it has a great developer experience. By delivering less on that first request and prioritizing what loads after that, it usually ends up as a better user experience.

Some of the front end tools that are more common and growing in popularity include:

• UI frameworks like React or Vue
• Web frameworks like Gatsby
• Compilers like Babel
• Bundlers like Webpack
• CSS tools like Sass

But those APIs, whether ones we pay for or create ourselves, need to be built somewhere. That’s where the back end comes in.

What is Back End Development?

The back end layer is usually where the business logic occurs. This can be super complex like the rules that determine revenue for an e-commerce company or something more common like a user profile.

What did Back End Development traditionally look like?

The back ends of applications were historically built using server-side languages like PHP or Ruby. The idea is that you have a server that you need to perform complex operations on, so the way to do that is with a language that server would understand.

On each request to the server, the backend would perform the full stack of the operations, including rendering out the front end. By using frameworks or DIY architectures, the back end would accept the request, figure out what it should do with that request, run any business logic needed with the request, and provide the front end any data that it would need to display a response to that request.

Back end giving the front end a 500 Internal Server Error

Some of the more traditional back end tools include:

• On-premise or remotely managed servers like Rackspace
• HTTP servers using Apache
• Databases like MySQL
• Server side languages like PHP or Perl
• Application frameworks like Ruby on Rails

What does Back End Development look like now?

Back end stacks look somewhat similar to the way they did before, aside from newer code patterns, except more often you’ll see the back ends provide data through APIs via HTTP requests instead of directly to the templates the front end team are working on.

While the foundation isn’t super different, it actually be comes increasingly complex as you have to deal with different security implications that could compromise your system if not properly configured such as leaving an API open to the public that returns sensitive user data.

But also how the server operates can be completely different. While previously, we might run our python on our own managed server (we still can), we can now make use of serverless functions with tools like AWS Lambda that simplify how we manage code.

While “serverless” doesn’t necessarily mean there are literally no servers, it means that as a service, the developer doesn’t have to worry about maintaining that server and can instead just focus on the code they need to run.

Some of the back end tools that are more common and growing in popularity include:

• Cloud servers like AWS EC2
• Serverless services like AWS Lambda
• NoSQL databases like MongoDB
• Languages like Python or javascript via NodeJS
• Web application frameworks like Serverless Framework

Where things get fuzzy

Part of the twist with back ends is now you can write your back end with javascript. With the inception of Node.js, developers were given the ability to use their favorite browser language to do most of the same things they were used to and familiar with but now on a server.

Never stopped to think if we should write JS on a server

While not everyone is fond of running javascript as a server side language, it became a little easier to use the same language to write the full stack of an application. This changed the game a bit as far as front ends and back ends were concerned.

But it’s also started to come full circle where you now see systems that build APIs right next to the front end similar to what you might see in a traditional stack.

Front End vs Back End

Regardless of the stack, there will always be the separation of concerns. The UI and all of the interaction, whether rendered on the server or in the browser, is what makes the front end the front end and the data and business logic, whether coming from the server in your company’s closet or a managed function, is what makes the back end the back end.

Whether you prefer to work on the user facing features or build the logic that lets them do things, there are plenty of resources to get started.

Resources to learn

Front End

• freecodecamp.org Responsive Web Design Certification (freecodecamp.org)
• Beginner Javascript (beginnerjavascript.com - Wes Bos)
• React Tutorial for Beginners (youtube.com - Programming with Mosh)
• Front End Masters (frontendmasters.com)

Back End

• freecodecamp.org APIs and Microservices Certification (freecodecamp.org)
• Super simple start to serverless (kentcdodds.com)
• AWS Certified Cloud Practitioner Training 2019 - A Free 4-hour Video Course (freecodecamp.org)
• CS50's Introduction to Computer Science (edx.org)

All the above

• How to Become a Full Stack Web Developer in 2020 (colbyfayock.com)
• Egghead.io (egghead.io)
• 100 Days of Code (100daysofcode.com)
• The Web Developer Bootcamp (udemy.com - Colt Steele)

• What is fuse.js?
• Why is search important?
• What are we going to build?
• Step 0: Bootstrapping our app
• Step 1: Installing Fuse.js
• Step 2: Creating a new Fuse search instance
• Step 3: Setting up dynamic search based on user input

What is fuse.js?

Fuse.js is a JavaScript library that provides fuzzy search capabilities for applications and websites. It's nice and easy to use out of the box, but also includes configuration options that allow you to tweak and create powerful solutions.

Why is search important?

Whether you're a content creator or are trying to sell a product with your website, it's important to help your visitors actually find what they're looking for.

If you're building an ecommerce website, you want someone to be able to easily find your Bender vinyl figures rather than having to dig through the entire catalog first.

What are we going to build?

We're going to start off with a basic Create React App example. It's going to include some character info as structured data for one of my favorite shows Futurama that's simply dumped out into an HTML list.

With that list, we're going to use fuse.js to provide client-side search capabilities, allowing us to demonstrate searching for the character we're looking for by their name and other details.

Step 0: Bootstrapping our app

To get started, we're going to need content to work with. I got started by building a list of characters from Futurama as structured json data that I put in a list with a fresh Create React App.

Futurama character search demo

You'll also notice I've already added an input for our search. It's not yet functional but we'll use that to get started.

If you'd like to start off at the same place, I created a branch with my demo repo that you can clone locally to walk through the project with me!

git clone --single-branch --branch start git@github.com:colbyfayock/my-futurama-characters.git

Git branch "start"

Or follow along with the commit.

Step 1: Installing Fuse.js

First thing we'll want to do is actually add Fuse.js to our app. In your project, run:

yarn add fuse.js
# or
npm install --save fuse.js

This will save the dependency to our project so that we'll be able to use it in our project.

Next we'll want to import the dependency to our app so that we can start building with it. At the top of your file, in our case src/App.js if you're following along with me in a new Create React App project, add:

import Fuse from 'fuse.js';

If you want to test that it's working, you can console.log(Fuse) and see our Fuse class we'll use to create our search capabilities.

Imported fuse.js class

And with that, we're ready to get started!

Follow along with the commit

Step 2: Creating a new Fuse search instance

To use Fuse.js, we'll want to first create a new instance of it.

At the top of your component, add:

const fuse = new Fuse(characters, {
  keys: [
    'name',
    'company',
    'species'
  ]
});

With this does:

• Creates a new instance of Fuse
• Passes in our characters array of objects
• Specifies the 3 keys in our data that we want to search on

Next, to perform the search, we can add:

const results = fuse.search('bender');

And if we console log out the results, we can see:

Basic fuse.js search results

You'll notice that we have more results than our friend Bender though. Fuse.js provides a "fuzzy search" meaning it tries to help you in case you're not sure what you're looking for or if you're misspelling your query.

To get an idea of how this works, let's add the includeScore option to our search:

const fuse = new Fuse(characters, {
  keys: [
    'name',
    'company',
    'species'
  ],
  includeScore: true
});

Now we can see the score attribute in our results object.

Fuse.js search results with score

You'll notice that our first result has a really low score. With fuse.js, a lower score means it's closer to an exact match.

A score of 0 indicates a perfect match, while a score of 1 indicates a complete mismatch.

It's saying that is incredibly likely that the first result is what we're looking for, but it's not confident in the others.

So with our results, we want to actually connect that to our UI. If you notice our array output is different than what we are mapping through for the HTML list, so let's create a new variable that we can change it to:

const results = fuse.search('bender');
const characterResults = results.map(character => character.item);

What this is doing is creating a new array using the map method that will only include the item property from each array object.

Then if we replace our characters map inside of our list with characterResults.map:

<ul className="characters">
  {characterResults.map(character => {
    const { name, company, species, thumb } = character;

We can now see that our page only shows the results for "bender"!

Demo with filtered results

Follow along with the commit!

Step 3: Setting up dynamic search based on user input

Now that we have a hard-coded search working, we want someone to actually be able to use the search input to search!

To achieve this, we're going to use the useState hook and listen for changes to the input field, which will dynamically create a search for our data.

First, import the useState hook from React:

import React, { useState } from 'react';

Next, let's use that hook to create a state instance:

const [query, updateQuery] = useState('');

Here, we're creating a new state of query that we can update with updateQuery that defaults to an empty string ('').

With that, let's tell our search input to use that query value as it's value:

<input type="text" value={query} />

At this point, nothing should be different, as we are using a blank query.

Demo with filtered results - nothing changed

Now let's add an event handler to our input that we can use to update our state:

<input type="text" value={query} onChange={onSearch} />

And we'll want to create that function so we can use it:

function onSearch({ currentTarget }) {
  updateQuery(currentTarget.value);
}

This will update our query with the input's value any time it changes.

Now that our query will have what we want to search for, we can update our search instance:

const results = fuse.search(query);

And now if you reload the page, it's blank! ?

Demo with no results

That's because by default, Fuse sees our empty query and doesn't match it to anything. If we now search for something like slurms, we can see our search dynamically update with results!

Demo with results for "slurms"

If we wanted to fix this though so that all of our results show when there's no query, we can do so with an if statement or in my example, a ternary, that will show all of the characters if there is no query:

const characterResults = query ? results.map(character => character.item) : characters;

Demo with all results

And with that, we have our basic search!

Demo with filtered results for "zoidberg"

Follow along with the commit!

What can I do next?

Tuning your search

Fuse.js comes with a lot of options that you can use to tune your search to however you'd like. Want to only show confident results? Use the threshold option! Want case sensitive queries? Use the isCaseSensitive option!

https://fusejs.io/api/options.html

Setting the default query with URL parameters

Sometimes you want someone to be able to link to a particular set of results. To do this, we might want to be able to add a new URL parameter like ?q=bender.

To make this work, you can grab that URL parameter with javascript and use that value to set our query state.

Join the conversation!

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.

New HTML page with content

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!

HTML page with the Tailwind CSS base

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.

HTML page with basic paragraph styles

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

HTML page with styled H1

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

HTML page with all headers styled

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!

HTML page with styled 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!

HTML page with centered content

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>

HTML page with unstyled 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!

HTML page with a styled 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!

Create React App starting page

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.

Migrating code to React app

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

Fixing class attribute in content

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

Adding wrapper styles to the app

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

React app with basic content

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!

React app with content styled

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.

.btn class in a React app with Tailwind

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!

Styled button in React with Tailwind

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!

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!

Join in on the conversation!

Author's note: Similar to before, this dashboard is meant to be a demo and proof of concept for using real world data to build a dashboard. While this data should be accurate per the NovelCOVID API, I would recommend using tools like the Johns Hopkins University dashboard for complete and accurate analysis. Stay home and be safe! ❤️

• What are we going to build?
• What do we need before we get started?
• Step 1: Update how we fetch our data and fetch the statistics
• Step 2: Adding statistics to our dashboard
• Step 3: Make the data human friendly
• Step 4: Add the Last Updated date
• What can I do next?

What are we going to build?

We're going to be extending our original map demo with some basic statistics that we can retrieve from the NovelCOVID API. To get an idea, here's my demo I'm basing this off of.

Coronavirus (COVID-19) map demo with dashboard statistics

While you're not required to have completed Part 1 to apply these concepts, it definitely helps, and it lets you set up a map for your dashboard. If you'd like to start there, which I recommend, check out How to create a Coronavirus (COVID-19) Dashboard & Map App with Gatsby and Leaflet first.

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?

For this walkthrough, you pretty much need a React app in some form. I'll be working with the dashboard we previously built in my last walkthrough that includes a map of the cases of the Coronavirus (COVID-19) per country.

Coronavirus (COVID-19) map dashboard

I recommend starting with the previous tutorial, but if you want to skip the map and start fresh, the easiest way would probably be to use Create React App, Gatsby, or Next.js.

Step 1: Update how we fetch our data and fetch the statistics

To get started with our statistics dashboard, we're going to do a little prep work by changing how we're fetching the data. The goal here, is we're going to wrap our request logic in a reusable way so that we can use it for both our countries data and our new statistics data.

Creating a new React hook to fetch data

Diving in, the first we'll do is create a new React hook that will serve as how we fetch the data. To get started, create a new file in your hooks directory called useTracker.js and add a line inside of hooks/index.js to export it:

// New file src/hooks/useTracker.js
// This will be empty for now

// Inside hooks/index.js
export { default as useTracker } from './useTracker';

Inside of our useTracker.js file, we're going to set up our request logic. This is a long file, so make sure you copy and paste the entire thing before we walk through what it does:

import { useEffect, useState } from 'react';
import axios from 'axios';

const API_HOST = 'https://corona.lmao.ninja/v2';

const ENDPOINTS = [
  {
    id: 'all',
    path: '/all',
    isDefault: true
  },
  {
    id: 'countries',
    path: '/countries'
  }
]

const defaultState = {
  data: null,
  state: 'ready'
}

const useTracker = ({ api = 'all' }) => {

  const [tracker = {}, updateTracker] = useState(defaultState)

  async function fetchTracker() {
    let route = ENDPOINTS.find(({ id } = {}) => id === api);

    if ( !route ) {
      route = ENDPOINTS.find(({ isDefault } = {}) => !!isDefault);
    }

    let response;

    try {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'loading'
        }
      });
      response = await axios.get(`${API_HOST}${route.path}`);
    } catch(e) {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'error',
          error: e
        }
      });
      return;
    }

    const { data } = response;

    updateTracker((prev) => {
      return {
        ...prev,
        state: 'ready',
        data
      }
    });

  }

  useEffect(() => {
    fetchTracker()
  }, [api])

  return {
    fetchTracker,
    ...tracker
  }
};

export default useTracker;

Starting from the top:

• We import our dependencies: we're going to use Reacts useEffect and useState hooks to manage our requests
• We define default constants: we have a base API endpoint for our data, a list of the available endpoints we'll use, and a state object that will store our data
• We define our useTracker hook: our hook includes one argument api that will allow us to specify which endpoint we'll use to make our request
• We set up a state instance: we'll want to keep track of our fetched data, so we create a tracker state instance that we'll be able to update
• We created an asynchronous fetchTracker function: we'll use this to make our actual request
• Inside our function: we first find the API route and create our URL, update our state instance to a "loading" state, try to make our request, catch any errors if there are any, and finally if the request is successful, we update our state with that data
• We trigger our function: using a useEffect hook, we trigger our fetchTracker function to make the request. We only have one dependency of api. This means the function will only fire the first time and any time the api value we pass in changes. We won't be changing that value, but it may be helpful in other instances if you're dynamically changing the API used
• We return our tracker: the returned object includes both our tracker data as well as our fetchTracker function that we could use to refetch the data if we'd like

And with all of that, we have a brand new hook that will fetch data from the NovelCOVID API.

Using our new tracker hook

To make use of this hook, let's jump over to src/pages/index.js, remove our axios import if it's there, and instead import our hook:

import { useTracker } from 'hooks';

With our hook, let's replace our original country data request. First, add the following to the top of the IndexPage component:

const { data: countries = [] } = useTracker({
  api: 'countries'
});

const hasCountries = Array.isArray(countries) && countries.length > 0;

This will let us fetch our country data and let us know if we have any results. Next, let's replace our original request.

Inside of our mapEffect function, let's remove the axios request in addition to the response, the destructured data object, and the hasData constant.

Code diff showing update to map effect

Then, replace hasData with hasCountries:

if ( !hasCountries ) return;

And replace data with countries in the geoJson object where we map our features:

features: countries.map((country = {}) => {

At this point, if you hit save and refresh, you shouldn't notice any difference to what you previously had.

Add a request for our stats

Now that we are using our useTracker hook to fetch our country data, let's also use that to fetch our stats.

Right next to where we set up our useTracker hook before, let's add another request:

const { data: stats = {} } = useTracker({
  api: 'all'
});

And if we add a console.log statement under to see what's inside stats:

console.log('stats', stats);

We should see our stats data object logged out!

Using console.log to show Coronavirus (COVID-19) statistics

Follow along with the commit!

Step 2: Adding statistics to our dashboard

Now that we have our data available to use, let's use it!

To get started adding our statistics to the dashboard, let's create a data structure that will allow us to easily configure the data we want to use.

To do this, let's first create a new array called dashboardStats below hasCountries at the top of the page component:

const dashboardStats = [];

Inside this array, let's add some new objects that specify our data that we're pulling from the stats object we requested. To start, let's try to add:

const dashboardStats = [
  {
    primary: {
      label: 'Total Cases',
      value: stats?.cases
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.casesPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Deaths',
      value: stats?.deaths
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.deathsPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Tests',
      value: stats?.tests
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.testsPerOneMillion
    }
  }
]

The reason we're splitting this up into primary and secondary keys, is we're going to use that to differentiate between logically similar stats that we want to style a little bit differently.

_Note: if you're not familiar with the ?. syntax, it's called Optional Chaining. This allows us to chain our properties without worrying about if the objects exist. If stats is undefined, it will simply return undefined instead of throwing an error._

With our stats data, let's add the tracker to our map. Let's remove our current <Map> component and include it nested inside our tracker div in the following:

<div className="tracker">
  <Map {...mapSettings} />
  <div className="tracker-stats">
    <ul>
      { dashboardStats.map(({ primary = {}, secondary = {} }, i) => {
        return (
          <li key={`Stat-${i}`} className="tracker-stat">
            { primary.value && (
              <p className="tracker-stat-primary">
                { primary.value }
                <strong>{ primary.label }</strong>
              </p>
            )}
            { secondary.value && (
              <p className="tracker-stat-secondary">
                { secondary.value }
                <strong>{ secondary.label }</strong>
              </p>
            )}
          </li>
        );
      })}
    </ul>
  </div>
</div>

This code should be immediately following the <Helmet> component if you're following along.

To explain what we're doing:

• We're creating a "tracker" div that will organize our stats
• We move our <Map component inside of this tracker
• We create a separate section called "tracker-stats"
• Inside of this, we create an unordered list (ul)
• Inside of our list, we loop through all of our stats inside dashboardStats
• For each stat, we create a new list element (li) and include 2 optional paragraphs that includes our primary stat data and our secondary stat data

Once we reload our page, we should now see a few stats:

Adding the first statistics to the page

Now that we have our stats on our page, let's make them look like they're in a dashboard.

Let's create a new file called _tracker.scss inside of our src/assets/stylesheets/components directory. Once that file is created, additionally add it to the src/assets/stylesheets/components/__components.scss file:

@import "tracker";

With our new component style file ready to go, let's add some styles into _tracker.scss:

.tracker-stats {

  color: white;
  background-color: $blue-grey-900;
  border-top: solid 1px darken($blue-grey-900, 5);

  ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
  }

}

.tracker-stat {

  font-size: 2em;
  text-align: center;
  padding: .5em;
  border-right: solid 1px darken($blue-grey-900, 5);
  border-bottom: solid 1px darken($blue-grey-900, 5);

  strong {
    font-weight: normal;
    color: $blue-grey-300;
  }

}

.tracker-stat-primary {

  margin: 0;

  strong {
    display: block;
    font-size: .5em;
  }

}

.tracker-stat-secondary {

  font-size: .5em;
  margin: .8em 0 0;

  strong {
    font-size: .8em;
    margin-left: .4em;
  }

}

Above – we're adding colors and organizational effects, such as using CSS Grid, to allow our data to be organized in an easy to read way and to look good! We're also making use of some pre-existing colors variables that are used within the project to keep the color use consistent.

Once you save those styles and reload the page, it should look much better:

Adding case statistics to the dashboard

From here, feel free to add more stats or adjust them to your liking. In the demo I created, I added the stats for active cases, critical cases, and recovered cases. If you'd like to do the same, you can check out the commit.

Follow along with the commit!

Step 3: Make the data human friendly

Now the rest of this walkthrough could be considered optional, but ultimately we want people to be able to read these statistics, right? So let's make the numbers a little more easy to read.

First, let's open our src/lib/util.js file and add this function:

/**
 * commafy
 * @description Applies appropriate commas to large numbers
 */

export function commafy(value) {
  let numberString = `${value}`;

  numberString = numberString.split('');

  numberString.reverse();

  numberString = numberString.reduce((prev, current, index) => {
    const shouldComma = (index + 1) % 3 === 0 && index + 1 < numberString.length;
    let updatedValue = `${prev}${current}`;
    if ( shouldComma ) {
      updatedValue = `${updatedValue},`;
    }
    return updatedValue;
  }, '');

  numberString = numberString.split('');
  numberString.reverse()
  numberString = numberString.join('');

  return numberString;
}

This function will take a number and turn it into a string with commas. To walk through what it does:

• Takes in a value as an argument. For our use, this value will most likely be a number.
• It converts the value into a string. We'll use this to work with adding commas to our number.
• We split that string into an array and reverse it. We want to reverse it because it makes it easier to add our commas depending on the index.
• We use the javascript reduce function to recreate our number-string. After every 3 numbers, we want to add a comma.
• Once we have our new value with the commas, we want to re-reverse it. So we split it again, reverse the array of characters, and re-join it, which is what we return

And now that we have our commafy function, let's use it. Back inside src/pages/index.js, let's import our function at the top of the page:

import { commafy } from 'lib/util';

Then, in our dashboardStats array, let's replace every number value with a ternary expression and function that will convert our number if it's available:

value: stats ? commafy(stats?.cases) : '-'

This line checks to see if stats exists. If it does, we commafy the cases value. If it doesn't exist, we return a - to show it's unavailable.

Once we repeat that process for all of our numbers, we can save, reload the page, and see our human friendly numbers!

Formatting the statistics to be human readable

Follow along with the commit!

Step 4: Add the Last Updated date

Finally, we want to make sure people are staying informed and understand the last time this data was updated. Luckily, our API provides a Last Updated date for us, so let's use it!

At the bottom of our "tracker" div under tracker-stats, let's add the following:

<div className="tracker-last-updated">
  <p>
    Last Updated: { stats?.updated }
  </p>
</div>

This creates a new section where we simply include the updated property from our stats. And if we save and reload the page, we can see the last updated date!

Adding last updated to the dashboard

But how could we even understand what that number is, unless you're the computer crawling this blog post? So let's change it to a human readable format like we did with our numbers.

Inside of our src/lib/util.js file, let's add another function:

/**
 * friendlyDate
 * @description Takes in a date value and returns a friendly version
 */

export function friendlyDate(value) {
  const date = new Date(value);
  return new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: 'numeric',
    minute: 'numeric'
  }).format(date);
}

This function creates a new Date object, then uses the javascript International DateTimeFormat API to convert it into a friendly readable format!

Once that's saved, let's import it next to our commafy function at the top of src/pages/index.js:

import { commafy, friendlyDate } from 'lib/util';

Then we can update our code similar to how we updated our numbers:

Last Updated: { stats ? friendlyDate(stats?.updated) : '-' }

And if we save and reload, we see it in a human readable way!

Formatting the last updated date

Finally for our "last updated" should look like it fits in with the rest of the dashboard, so let's add a few more styles. Inside of our _tracker.scss file we were working with earlier:

.tracker-last-updated {

  color: white;
  background-color: $blue-grey-900;
  padding: .8em 0;

  p {
    color: $blue-grey-300;
    font-size: .8em;
    text-align: center;
    margin: 0;
  }

}

And once we hit save and refresh the browser, we have our dashboard statistics with the last updated time! ?

Final dashboard with formatted lasted updated date

Follow along with the commit!

What can I do next?

Make the marker tooltip data human friendly

Now that we have our handy commafy and friendlyDate functions, we can reuse those functions to clean up the data in our country marker popups!

Use the fetchTracker function to poll for updates

Inside of the useTracker hook we created, we exported a function called fetchTracker. This allows us to force a request to the API to fetch new data. To make sure our map stays current even when somebody doesn't refresh the page, we can create a timer in javascript to regularly invoke that function to update our dashboard data.

Clear the map layers before re-adding the new ones

One thing we're currently not doing is cleaning up old layers before adding a new one. The way the map is set up, it just keeps layering them on top. What we can do is before we add all of our new layers, we can clear out the old ones. Check out this commit to get started!

Want to learn more about maps?

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

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (Part 1 of this post)
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet

• What are hooks?
• Why are custom hooks cool?
• What are we going to make?
• Step 0: Naming your hook
• Step 1: Setting up your project
• Step 2: Writing your new React Hook
• Step 3: Using your React hook in an example
• Step 4: Compiling your React hook and Example
• Step 5: Publishing your React hook to npm
• More resources about hooks

What are hooks?

React hooks in simple terms are functions. When you include them in your component or within another hook, they allow you to make use of React internals and parts of the React lifecycle with native hooks like useState and useEffect.

I don’t plan on doing a deep dive about hooks, but you can check out a quick introduction with an example of useState as well as the intro from the React team.

Why are custom hooks cool?

The great thing about creating custom hooks is they allow you to abstract logic for your components making it easier to reuse across multiple components in your app.

Hook diagram example for useCounter

For instance, if you wanted to create a simple counter where you use React’s state to manage the current count. Instead of having the same useState hook in each component file, you can create that logic once in a useCounter hook, making it easier to maintain, extend, and squash bugs if they come up.

What are we going to make?

For the purposes of this article, we’re going to keep it simple with a basic hook. Typically, you might use a hook because rather than a typical function, you use other native hooks that are required to be used within React function components. We’re going to stick with some basic input and output to keep things simple.

We’re going to recreate this custom Placecage hook I made, that allows you to easily generate image URLs that you can use as placeholder images.

Nic Cage excited

If you’re not familiar, Placecage is an API that allows you to generate pictures of Nic Cage as placeholder images for your website. Silly? Yes. Fun? Absolutely!

But if you’re not a fan of Nic's work, you can just as easily swap in the URL for Fill Murray which uses pictures of Bill Murray or placeholder.com which generates simple solid color background with text that shows the size of the image.

Step 0: Naming your hook

Before we jump in to our actual code, our ultimate goal is to publish this hook. If that’s not your goal, you can skip this step, but for publishing, we’ll want to create a name for our hook.

In our case, our hook name will be usePlaceCage. Now with that in mind, we have 2 formats of our name — one in camelCase format and one in snake-case format.

• camelCase: usePlaceCage
• snake-case: use-placecage

The camelCase format will be used for the actual hook function, where the snake-case name will be used for the package name and some of the folders. When creating the name, keep in mind that the package name must be unique. If a package with the same name exists on npmjs.com already, you won't be able to use it.

If you don’t already have a name, it's okay! You can just use your own name or something you can think of, it doesn’t really matter too much as really we're just trying to learn how to do this. If it were me for instance, I would use:

• camelCase: useColbysCoolHook
• snake-case: use-colbyscoolhook

But just to clarify, for the rest of our example, we’re going to stick with usePlaceCage and use-placecage.

Step 1: Setting up your project

Though you can set up your project however you’d like, we’re going to walk through building a new hook from this template I created.

The hope here, is that we can take out some of the painful bits of the process and immediately get productive with our custom hook. Don’t worry though, I’ll explain what’s going on along the way.

The requirements here are git and yarn as it helps provide tools that make it easy to scaffold this template, such as using the workspaces feature to allow easy npm scripts to manage the code from the root of the project. If either of those are a dealbreaker, you can try downloading the repo via the download link and update it as needed.

Cloning the hook template from git

To start, let’s clone the repository from Github. In the command below, you should replace use-my-custom-hook with the name of your hook, such as use-cookies or use-mooncake.

git clone https://github.com/colbyfayock/use-custom-hook use-my-custom-hook
cd use-my-custom-hook

Once you clone and navigate to that folder, you should now see 2 directories – an example directory and a use-custom-hook directory.

Cloning use-custom-hook

This will give you a few things to get started:

• A hook directory that will include the source for our hook
• Build scripts that compile our hook with babel
• An example page that imports our hook and creates a simple demo page with next.js

Running the hook setup scripts

After we successfully clone the repo, we want to run the setup scripts which install dependencies and update the hook to the name we want.

yarn install && yarn setup

Setting up a new hook from the use-custom-hook template

When the setup script runs, it will do a few things:

• It will ask you for your name – this is used to update the LICENSE and the package's author name
• It will ask you for your hook's name in 2 variations – camelCase and snake-case - this will be used to update the name of the hook throughout the template and move files with that name to the correct location
• It will reset git – it will first remove the local .git folder, which contains the history from my template and reinitialize git with a fresh commit to start your new history in
• Finally, it will remove the setup script directory and remove the package dependencies that were only being used by those scripts

Starting the development server

Once the setup scripts finish running, you'll want to run:

yarn develop

This runs a watch process on the hook source, building the hook locally each time a source file is changed, and running the example app server, where you can test the hook and make changes to the example pages.

Starting up the use-custom-hook development server

With this all ready, we can get started!

Follow along with the commit!

Step 2: Writing your new React Hook

At this point, you should now have a new custom hook where you can make it do whatever you'd like. But since we're going to walk through rebuilding the usePlaceCage hook, let's start there.

The usePlaceCage hook does 1 simple thing from a high level view – it takes in a configuration object and returns a number of image URLs that you can then use for your app.

Just as a reminder, any time I mention usePlaceCage or use-placecage, you should use the hook name that you set up before.

A little bit about placecage.com

Placecage.com is a placeholder image service that does 1 thing. It takes a URL with a simple configuration and returns an image... of Nic Cage.

placecage.com

From the simplest use, the service uses a URL pattern as follows:

https://www.placecage.com/200/300

This would return an image with a width of 200 and height of 300.

Optionally, you can pass an additional URL parameter that defines the type of image:

https://www.placecage.com/gif/200/300

In this particular instance, our type is gif, so we'll receive a gif.

The different types available to use are:

• Nothing: calm
• g: gray
• c: crazy
• gif: gif

We'll use this to define how we set up configuration for our hook.

Defining our core generator function

To get started, we're going to copy over a function at the bottom of our use-placecage/src/usePlaceCage.js file, which allows us to generate an image URL, as well as a few constant definitions that we'll use in that function.

First, let's copy over our constants to the top of our usePlaceCage.js file:

const PLACECAGE_HOST = 'https://www.placecage.com/';
const TYPES = {
  calm: null,
  gray: 'g',
  crazy: 'c',
  gif: 'gif'
};
const DEFAULT_TYPE = 'calm';
const ERROR_BASE = 'Failed to place Nick';

Here we:

• Define a host, which is the base URL of our image service.
• Define the available types, which we'll use in the configuration API. We set calm to null, because it's the default value which you get by not including it at all
• Our default type will be calm
• And we set an error base which is a consistent message when throwing an error

Then for our function, let's copy this at the bottom of our usePlaceCage.js file:

function generateCage(settings) {
  const { type = DEFAULT_TYPE, width = 200, height = 200, count = 1 } = settings;
  const config = [];

  if ( type !== DEFAULT_TYPE && TYPES[type] ) {
    config.push(TYPES[type]);
  }

  config.push(width, height);

  if ( isNaN(count) ) {
    throw new Error(`${ERROR_BASE}: Invalid count ${count}`);
  }

  return [...new Array(count)].map(() => `${PLACECAGE_HOST}${config.join('/')}`);
}

Walking through this code:

• We define a generateCage function which we'll use to generate our image URL
• We take in a settings object as an argument, which defines the configuration of our image URL. We'll be using the same parameters as we saw in our placecage.com URL
• We destructure those settings to make them available for us to use
• We have a few defaults here just to make it easier. Our default type will be defined by DEFAULT_TYPE along with a default width, height, and number of results we want to return
• We create a config array. We'll use this to append all of the different configuration objects in our URL and finally join them together with a / essentially making a URL
• Before we push our config to that array, we check if it's a valid argument, by using the TYPES object to check against it. If it's valid, we push it to our config array
• We then push our width and height
• We do some type checking, if we don't have a valid number as the count, we throw an error, otherwise we'll get incorrect results
• Finally, we return a new array with the number of results requested, mapped to a URL creator, which uses PLACECAGE_HOST as our defined base URL, and with our config array joined by /

And if we were to test this function, it would look like this:

const cage = generateCage({
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
});

console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

Using our function in the hook

So now that we have our generator function, let's actually use it in our hook!

Inside of the usePlaceCage function in the use-placecage/src/usePlaceCage.js file, we can add:

export default function usePlaceCage (settings = {}) {
  return generateCage(settings);
}

What this does it uses our generator function, takes in the settings that were passed into the hook, and returns that value from the hook.

Similar to our previous use example, if we were to use our hook, it would look like this:

const cage = usePlaceCage({
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
});

console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

At this point, it does the same thing!

So now we have our hook, it serves as a function to generate image URLs for the placecage.com service. How can we actually use it?

Follow along with the commit!

Step 3: Using your React hook in an example

The good news about our template, is it already includes an example app that we can update to easily make use of our hook to both test and provide documentation for those who want to use it.

Setting up the hook

To get started, let's open up our example/pages/index.js file. Inside of this file you'll see the following:

const hookSettings = {
  message: 'Hello, custom hook!'
}

const { message } = usePlaceCage(hookSettings);

This snippet is what was used by default in the template just for a proof of concept, so let's update that. We're going to use the same exact configuration as we did in Step 2:

const hookSettings = {
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
}

const cage = usePlaceCage(hookSettings);

Again, we set up our settings object with the configuration for our hook and invoke our hook and set the value to the cage constant.

If we now console log that value our to our dev tools, we can see it working!

console.log('cage', cage);

Using console.log to show the cage value

Note: If you get an error here about message, you can comment that our or remove it under the Examples section.

Updating the example with our new hook configuration

If you scroll down to the Examples section, you'll notice that we have the same default hookSettings as above, so let's update that again to make sure our example is accurate.

{`const hookSettings = {
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
}

const cage = usePlaceCage(hookSettings);`}

You'll also notice that we're no longer using the message variable. If you didn't remove it in the last step, we can now replace it under the Output heading with:

<p>
  { JSON.stringify(cage) }
</p>
<p>
  { cage.map((img, i) => <img key={`img-${i}`} width={200} src={img} />)}
</p>

We're doing 2 things here:

• Instead of showing the variable itself, we wrap it with JSON.stringify so that we can show the contents of the array
• We also use the map function to loop over our image URLs in the cage constant and create a new image element for each. This let's us preview the output instead of just seeing the values

And once you save and open your browser, you should now see your updated examples and output!

Custom hook example page

Other things you can do on that page

Before moving on, you can also update a few other things that will be important for your hooks page:

• Update the How to use section with instructions
• Add additional examples to make it easier for people to know what to do

A few things are also automatically pulled in from the use-placecage/package.json file. You can either update them there to make it easier to maintain or you can replace them in the example page:

• name: Is used at the <h1> of the page
• description: Is used at the description under the <h1>
• repository.url: Used to include a link to the repository
• author: The name and url are used to include a link at the bottom of the page

Follow along with the commit!

Step 4: Compiling your React hook and Example

The way we can make our hook work easily as an npm module is to compile it for others to use. We're using babel to do this.

Though the publish process already does this for us automatically with the prepublishOnly script in use-placecage/package.json, we can manually compile our hook using the yarn build command from the root of the project.

Along with compiling the hook, running yarn build will also compile the example page, allowing you to upload it wherever you'd like. After running that command, you should see an output of static HTML files in the example/out directory.

If you're looking for a recommendation, Netlify makes it easy to connect your Github account and deploy the static site.

Deployment setup in Netlify

See the demo site deployed to Netlify!

Step 5: Publishing your React hook to npm

Finally, if you're happy with your hook, it's time to publish!

npm makes this part really easy. The only prerequisite you need to have an npm account. With that account, let's log in:

npm login

Which will prompt you for your login credentials.

Next, let's navigate to our hook's directory, as our package configuration is there under use-placecage/package.json:

cd use-placecage

Then, we can simply publish!

npm publish

Keep in mind, that each package name needs to be unique. If you used use-placecage, it's already taken... by me. ?

But if you're successful, npm should build your hook and upload it to the package registry!

Publishing an npm package

It will then be available on npm with the following pattern:

https://www.npmjs.com/package/[package-name]

So for use-placeage, it's available here: https://www.npmjs.com/package/use-placecage

We now have a custom hook!

Yay ? if you followed along, you should now have created a custom hook and published it to npm.

Though this was a silly example using placecage.com, it gives us a good idea of how we can easily set this up.

You'll also notice that this specific example wasn't the best use case for a hooks, where we could have simply used a function. Typically, we'll want to use custom hooks to wrap functionality that can only live inside a React component, such as useState. To learn more about that, you can read one of my other articles about custom hooks.

However, this gave us a good basis to talk through the creation and configuration of our new hook!

More resources about hooks

• How to destructure the fundamentals of React Hooks (freecodecamp.org)
• Introducing Hooks (reactjs.org)
• Hooks API Reference (reactjs.org)

• What are we going to build?
• What is Mapbox?
• Part 1: Creating a custom Mapbox style
• Part 2: Adding a custom TileLayer to React Leaflet
• Part 3: Adding a custom basemap to Gatsby Starter Leaflet
• Securing your Mapbox key
• Want to learn more about maps?

What are we going to build?

We’re going to walk through creating a new basic Mapbox style in our Mapbox account. Once created, we’re going to use their Map API to add a custom basemap to our React Leaflet app.

Gatsby Starter Leaflet with Mapbox basemap

For our map, we’re going to use this Leaflet Gatsby Starter I created that will allow you to easily spin up a new mapping app. Before we spin that up though, I’ll walk you through how to add it using only React Leaflet components.

A mapping app?

Yup! Maps are used all around the world to study datasets for geographic locations. They're important tools for scientists and others that are trying to help the world.

Coronavirus (COVID-19) custom map

If you want to learn more about building a map and adding data to it, you can check out some of my other articles first such as creating a Coronavirus (COVID-19) map or a Summer Road Trip map as well as a little bit of inspiration about why Anyone Can Map.

What is Mapbox?

Mapbox is a mapping platform that allows its customers to create custom mapping solutions. They also leverage a variety of APIs that provide powerful capabilities for building map features.

mapbox.com

For our purposes, we’re going to utilize their Map API, specifically their Static Tiles API, to serve a custom map style that we create.

Part 1: Creating a custom Mapbox style

To get the look and feel that we want for our map, it’s important to have a basemap that helps make our data present itself without distractions. Plus, sometimes it’s fun to have a custom map.

Mapbox account

The first thing we’ll need to set up our custom Mapbox style is to have an account. I'm not going to walk you through that process, but you can head over to Mapbox’s website where you can sign up for free: mapbox.com

Creating a new custom style

Creating a new style in Mapbox isn’t as hard as it sounds. While it can get really complex if you want something unique, we can copy one of Mapbox’s default styles to get started.

First, head over to Mapbox’s Studio dashboard by clicking your account link in the top right corner when logged in.

Mapbox Studio

Once we’re on our Studio dashboard, we want to select the New Style button.

Create a new style in Mapbox Studio

After clicking the button, a modal will pop up allowing you to choose a template. You can choose whatever you want here, but I’m going to choose Monochrome with a variation of Dark. And after you’ve selected your template, click the Customize button.

Select and customize a template for a new style in Mapbox Studio

And now we’re dropped into our customization UI.

Mapbox customize style UI

From here, you can really do what you’d like. There are a ton of options to customize your map. It’s a little complex to try to dig in here, but Mapbox provides some resources to try to help you get productive.

Generating a Mapbox token

Once you’re happy with your new style and everything’s published, we want to generate a token that we’ll use for providing access to our Map.

Head on over to the Account section of the Mapbox dashboard.

Creating a new token in Mapbox

Mapbox provides you with a “default” token that you can use in your applications. You're free to use this, but I recommend creating a new token that you can provide a unique name, that way if you ever blow past the free tier of Mapbox, you’ll be able to track your usage.

Additionally, it’s best to keep a separate token for each application, that way you can easily rotate an individual key, without having to update every application using it.

Once you click Create a token, you can set up the key how you’d like, with the scopes and permissions you choose, but for our purposes, you can leave all of the Public scopes checked for our map, which they do by default.

Create a new access token in Mapbox

Configuring our custom endpoint

For this tutorial, we’re going to use Mapbox’s Static Tiles service.

Mapbox Static Tiles Maps API

Our endpoint will look like the following:

https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token}

There are a few parameters here we need to understand:

• username: this will be your Mapbox account’s username
• style_id: this will be the ID of the style you created before
• z, x, y: these are parameters that Leaflet programmatically swaps out, so we want to leave them as is
• access_token: this is the Mapbox key you created above

To find your username and style ID, we can use the Style URL for our new Mapbox style to get those values.

Finding the Style URL in Mapbox Studio

In my example, my Style URL looks like:

mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p

colbyfayock is my username and ck8lryjfq0jdo1ip9ctmuhc6p is my style ID.

And once I update my endpoint parameters, the final tilepoint URL will look like:

https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN

Part 2: Adding a custom TileLayer to React Leaflet

When building a map with React Leaflet, your main component will be a <Map> that wraps the entirety of the app. This is what sets up your Map instance for Leaflet.

For our purposes here, we’re going to use the example on the React Leaflet homepage as our starting point.

React Leaflet TileLayer Component

Inside of your <Map> component you include a <TileLayer> component, which defines the imagery of the world that you base your map upon.

The example on the React Leaflet homepage uses a public version of OpenStreetMap as their TileLayer, which is an open source map project created and updated by people all around the world.

<Map center={position} zoom={13}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
  />
</Map>

This gives you a basic map, but we want to swap in Mapbox so we can set up a custom look and feel for our map.

Custom Mapbox TileLayer

To add our custom style, we’ll want to update the url and attribution props of the TileLayer component.

For URL, it will simply be the custom style endpoint we created earlier, so in my example, it looks like:

https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN

For attribution, we want to credit Mapbox as the service, so we want to set our attribution as:

Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>

When plugged in to our TileLayer, our code should now look like this:

<Map center={position} zoom={13}>
  <TileLayer
    url="https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN"
    attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
  />
</Map>

And once we open up our map, we should see our new basemap!

React Leaflet with a Mapbox basemap

See the code!

If you want to see how I did it, check out the diff commit by commit.

The only caveat there is I created an .env.development.local file in the root of my project in which I stored a new environment variable called REACT_APP_MAPBOX_KEY to store my Mapbox key.

Part 3: Adding a custom basemap to Gatsby Starter Leaflet

I’ve written a few other articles on how to get started with my Leaflet Gatsby Starter, but for this part, we’ll want to have a basic app spun up that we can use to change our TileLayer endpoint.

Setting up our React Leaflet Gatsby app

To get started, check out the instructions on the Starter github:

https://github.com/colbyfayock/gatsby-starter-leaflet

Once you’re ready, you should have a basic mapping app ready to go!

New Leaflet Gatsby app in the browser

Configuring our Mapbox service

The first thing we’ll want to do is add Mapbox as a service in our src/data/map-services.js file.

Taking our custom endpoint URL that we created in Part 1, let’s set up a new object with a name of Mapbox, and with a url and attribution similar to what we did in Part 2.

export const mapServices = [
  {
    name: ‘OpenStreetMap’,
    attribution: '&copy; <a href="http://osm.org/copyright”>OpenStreetMap</a> contributors’,
    url: ‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’
  },
  {
    name: ‘Mapbox’,
    attribution: ‘Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>’,
    url: `https://api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN`
  }
];

Using our Mapbox map service

Once you have your Mapbox service set up, all that’s left is to open up the src/pages/index.js file, find the mapSettings object definition, and update the defaultBaseMap property to Mapbox.

const mapSettings = {
  center: CENTER,
  defaultBaseMap: ‘Mapbox’,
  zoom: DEFAULT_ZOOM,
  mapEffect
};

Save that change, refresh the map in your browser, and you should now see your custom basemap style!

Gatsby Starter Leaflet with custom Mapbox basemap in browser

See the code!

If you want to see how I did it, check out the diff with the commit.

The only caveat there is I created an .env.development file in the root of my project in which I stored a new environment variable called GATSBY_MAPBOX_KEY to store my Mapbox key.

Securing your Mapbox key

Environment variables

Part of most development processes that use individual keys will generally set the keys up as environment variables. Environment variables are configured settings that don’t live in the code itself.

This is important because it prevents your key from being checked in to your code, which is bad from a security perspective, but it also allows you to provide a different key for different environments.

When generating your keys, try to keep this in mind, as it can save you in the long run.

Locking down your Mapbox key

In your settings when creating a token or when editing a token, Mapbox allows you to specify only the URLs you want your key to be accessible from.

Though Mapbox has a generous free tier, you probably want to keep it locked down only to the URLs that you’re using it on. You can create multiple keys, where one could be for public use on your website and one would be for your local development.

This is helpful for instance, where you have a key that will never be used publicly for development purposes, but then you have a key that you deploy with, which can be locked down only to that URL.

If someone grabs your key, they could plug it into their own website and use up all of your free tier, potentially running up your bill!

Want to learn more about maps?

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

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet

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?
• What do we need before we get started?
• Step 1: Cleaning up some unneeded code
• Step 2: Fetching the Coronavirus data
• Step 3: Transform the Coronavirus data into a geographic data format
• Step 4: Adding the Coronavirus data to the map
• What else can we do?
• Be safe and stay informed
• Want to learn more about maps?

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.

Coronavirus map dashboard demo

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

Creating a new Leaflet Gatsby app in the terminal

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

Starting your Gatsby app in the terminal

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

New Leaflet Gatsby app in the 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.

New mapping app with nothing going on

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/v2/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!

Logging the Coronavirus location data to the browser console

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.

Previewing Coronavirus location data on geojson.io

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)

Map with Coronavirus location data

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!

Map with Coronavirus location data centered with a tooltip

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.

Creating a new basemap in Mapbox Studio

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.

Johns Hopkins University Coronavirus Map Dashboard - March 29, 2020

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:

• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet

• What are we going to build?
• What do we need before we get started?
• Step 1: Cleaning up some unneeded code
• Step 2: Create our road trip locations
• Step 3: Prepare our app with some functions
• Step 4: Building our trip path
• Step 5: Styling our map components
• Want to learn more about maps?

Author’s Note: Even though we’re going through some challenging times, we can still be optimistic that we’ll get through this together and be able to enjoy our summer. Stay safe and wash your hands. ❤️

What are we going to build?

We’ll be walking through building a new mapping app that shows a route representing the trip. Each location will have a little card where we can add a picture and some things we did.

Colbana's Summer Road Trip

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 create our list of locations and use Leaflet’s API to draw our route on the map.

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 last tutorial for building a Santa Tracker, 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 items, you can try checking out the beginning of 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-road-trip https://github.com/colbyfayock/gatsby-starter-leaflet

Creating a new Leaflet Gatsby app in the terminal

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

cd my-road-trip
yarn develop

Starting your Gatsby app in the terminal

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

New Leaflet Gatsby app in the browser

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
}

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.

New mapping app with nothing going on

Follow along with the commit

Step 2: Create our road trip locations

This step will involve preparing our location data that will populate our road trip app. Our locations will include properties like a name, date, things we did, and a picture if we want.

First, create a new file in the src/data directory called locations.js. Inside of that file, we want to create and export a new array.

export const locations = [
  {
    placename: ‘Herndon, VA’,
    date: ‘August 1, 2015’,
    location: {
      lat: 38.958988,
      lng: -77.417320
    },
    todo: [
      ‘Where we start! ?’
    ]
  },
  {
    placename: ‘Middlesboro, KY',
    date: ‘August 1, 2015’,
    location: {
      lat: 36.627517,
      lng: -83.621635
    },
    todo: [
      ‘Cumberland Gap ?’
    ]
  }
];

You can use the above to get started, but you’ll eventually want to change the details to something of your choosing.

If you want to add an image to your location, you can do so by including an image property to the object. You can use either a URL string or you can import a local file if you have one available, like I’m doing in this example:

import imgHerndonStart from 'assets/images/herndon-start.jpg’;

export const locations = [
  {
    placename: ‘Herndon, VA’,
    date: ‘August 1, 2015’,
    image: imgHerndonStart,
    location: {
      lat: 38.958988,
      lng: -77.417320
    },
    todo: [
      ‘Where we start! ?’
    ]
  }
]

Once we have that file created, we can now import our locations into our src/pages/index.js file so we can use it in our next step:

import { locations } from 'data/locations’;

If you add a console.log(locations) inside of your page, you should now see all of your location data in an array!

Follow along with the commit

Step 3: Prepare our app with some functions

To try to keep things simple and focused, I grouped together 3 important components of creating our map into functions. Though it’s available to copy and paste, we’ll walk through what’s happening in each function.

You can place each of these functions at the bottom of the src/pages/index.js file so they’re ready to use in our next step.

createTripPointsGeoJson

Our first function is going to take the array of our locations and return a GeoJSON document, with our locations mapped into an individual Feature. We’ll use this function to create the individual points on our map.

What is a GeoJSON document? It's essentially a JavaScript object or JSON document with a specific structure that creates consistency with geographical data.

function createTripPointsGeoJson({ locations } = {}) {
  return {
    “type”: “FeatureCollection”,
    “features”: locations.map(({ placename, location = {}, image, date, todo = [] } = {}) => {
      const { lat, lng } = location;
      return {
        “type”: “Feature”,
        “properties”: {
          placename,
          todo,
          date,
          image
        },
        “geometry”: {
          “type”: “Point”,
          “coordinates”: [ lng, lat ]
        }
      }
    })
  }
}

So what’s happening in the above?

• We take an argument of locations, which will be our array of destinations
• We return an object with some dynamic properties associated with it
• Within the object, we map our locations to individual Feature objects
• Each object includes a Point shape using our coordinates
• It additionally includes our properties that store our metadata

When this function is invoked, we will have a newly created JavaScript object that includes an array of Points representing the locations we are stopping at on our road trip.

createTripLinesGeoJson

We’re going to create another function that’s similar to the previous one. This time however, instead of points, we want to create lines that represent going from one point to the next.

function createTripLinesGeoJson({ locations } = {}) {
  return {
    “type”: “FeatureCollection”,
    “features”: locations.map((stop = {}, index) => {
      const prevStop = locations[index - 1];

      if ( !prevStop ) return [];

      const { placename, location = {}, date, todo = [] } = stop;
      const { lat, lng } = location;
      const properties = {
        placename,
        todo,
        date
      };

      const { location: prevLocation = {} } = prevStop;
      const { lat: prevLat, lng: prevLng } = prevLocation;

      return {
        type: ‘Feature’,
        properties,
        geometry: {
          type: ‘LineString’,
          coordinates: [
            [ prevLng, prevLat ],
            [ lng, lat ]
          ]
        }
      }
    })
  }
}

So you’ll immediately notice that this is very similar to our last function. We’re returning an object and setting our metadata properties on a list of Features.

The big difference, however, is that we're creating a Line. To do this, we're looking up and referring to prevStop which will be the previous stop. We’ll use both the previous stop and our current stop in order to have 2 points which we can use to draw the line.

If we don’t have a previous stop, we return an empty array, which basically means we’re at the beginning of our journey with no line before it.

With the previous stop and current stop, we create a LineString type of Feature with our 2 points.

tripStopPointToLayer

Our last function is going to allow us to create custom content for each of the points that we will be adding to our map. We’ll actually be utilizing this function within a Leaflet property, so we’ll be conforming our arguments to that specification.

function tripStopPointToLayer( feature = {}, latlng ) {
  const { properties = {} } = feature;
  const { placename, todo = [], image, date } = properties;

  const list = todo.map(what => `<li>${ what }</li>`);
  let listString = ‘’;
  let imageString = ‘’;

  if ( Array.isArray(list) && list.length > 0 ) {
    listString = list.join(‘’);
    listString = `
      <p>Things we will or have done…</p>
      <ul>${listString}</ul>
    `
  }

  if ( image ) {
    imageString = `
      <span class=“trip-stop-image” style=“background-image: url(${image})”>${placename}</span>
    `;
  }

  const text = `
    <div class=“trip-stop”>
      ${ imageString }
      <div class=“trip-stop-content”>
        <h2>${placename}</h2>
        <p class=“trip-stop-date”>${date}</p>
        ${ listString }
      </div>
    </div>
  `;

  const popup = L.popup({
    maxWidth: 400
  }).setContent(text);

  const layer = L.marker( latlng, {
    icon: L.divIcon({
      className: ‘icon’,
      html: `<span class=“icon-trip-stop”></span>`,
      iconSize: 20
    }),
    riseOnHover: true
  }).bindPopup(popup);

  return layer;
}

One thing you’ll notice as we work through this function is that we create strings of HTML text. Given that the Leaflet API we’re utilizing for this doesn’t interface directly with React, we have to build out HTML manually to pass it in to our functions.

Starting from the top:

• We take in 2 arguments, feature and latlng. Leaflet passes these 2 values in for us to use in our function.
• We destructure our feature, allowing us to assign our metadata into variables
• 2 string variables are initialized that we’ll use for our HTML
• If we include a todo property as an array, we add a new list with each item inside.
• If we include an image, we create an image tag.
• With our newly created HTML strings, we construct the entirety of what will be our popup card for each strop
• With our popup HTML, we create a Leaflet popup instance
• With the latlng argument and our popup, we create a new Leaflet marker instance. This will represent the point on the map.
• Inside of the Marker creation, we create a basic HTML tag that well use to style the marker
• We then bind our popup to this new Marker instance. This will allow the popup to be associated with that individual Marker
• Finally, we return our newly created layer

Remember to make sure you put all of the functions above at the bottom of your src/pages/index.js page.

Once all of those functions are added, our map should still be the same thing, basically nothing happening.

Follow along with the commit

Step 4: Building our trip path

This is where things get interesting. We’ll now utilize the functions we created to build our road trip path. All of our work here will be within the mapEffect function inside of the src/pages/index.js file.

For context, our mapEffect function includes an argument called leafletElement. This value refers to the Map instance that Leaflet recognizes. This Map instance includes our map state as well as many utility functions to work with our map.

First, at the top of the function, we want to make sure we have a map. If not, we can return to bail out of the function.

if ( !leafletElement ) return;

Next, we want to use the eachLayer utility function and remove each layer from our map element. We do this to make sure we always have the correct map layer state.

leafletElement.eachLayer((layer) => leafletElement.removeLayer(layer));

With our cleaned up map, we can utilize 2 of the functions we created to create new GeoJSON objects.

const tripPoints = createTripPointsGeoJson({ locations });
const tripLines = createTripLinesGeoJson({ locations });

With our GeoJSON objects, we need to convert those to Leaflet GeoJSON instances, which we’ll use to add to the map.

const tripPointsGeoJsonLayers = new L.geoJson(tripPoints, {
  pointToLayer: tripStopPointToLayer
});

const tripLinesGeoJsonLayers = new L.geoJson(tripLines);

If you notice in the above, we're using our tripStopPointToLayer function. As I alluded to before, the geoJson instance we’re creating includes a property that allows us to pass in a function, giving us the ability to manipulate the layer creation. This is how we create our point and popup content.

We can proceed to adding both of those new layers to our map using the addTo .

tripPointsGeoJsonLayers.addTo(leafletElement);
tripLinesGeoJsonLayers.addTo(leafletElement);

Next, to make sure we zoom and center on the right location, we want to grab the bounds of the map using the getBounds function on our GeoJSON layer instance.

const bounds = tripPointsGeoJsonLayers.getBounds();

Finally, we fit our map's view to those bounds using the fitBounds function on our Map instance.

leafletElement.fitBounds(bounds);

Once you save and reload the page, you should now see a blue path representing the jump from each of our locations on the map!

Mapping app with road trip path

One issue though. If you notice, we only see the path. This is because we need to add some CSS which we’ll get to in the next step.

Follow along with the commit

Step 5: Styling our map components

Our last step will be adding some styles that will allow our markers to show and our popups to look just right.

In this step, we’ll be working inside of the _home.scss file, which you can find in src/assets/stylesheets/pages.

We can get started by copy and pasting this block of styles into the bottom of that file. With that done, we can walk through what’s happening.

.trip-stop {

  width: 400px;
  overflow: hidden;

  h2 {
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: .2em;
  }

  p,
  ul,
  h3 {
    font-size: 1.2em;
    font-weight: normal;
  }

  p {
    margin: .2em 0;
  }

  .trip-stop-date {
    color: $grey-600;
    font-size: 1em;
  }

  ul {
    padding: 0 0 0 1.4em;
    margin: 0;
  }

}

.trip-stop-image {
  display: block;
  float: left;
  overflow: hidden;
  width: 150px;
  height: 150px;
  text-indent: 100%;
  color: transparent;
  background-position: center;
  background-size: cover;
}

.trip-stop-content {
  float: left;
  width: 250px;
  padding-left: 1em;
}

.icon-trip-stop {

  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: $orange-500;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);

  &:hover {
    background-color: $deep-orange-400;
  }

}

There’s three components to our styles above:

• .trip-stop-images: Inside of the marker popup, we optionally can include an image. These styles set the size, make the text transparent, (it’s there for accessibility), and float it to the left so that our popup content can align correctly side by side.
• .trip-stop-content: This refers to the other half of our popup content. All we need to do here is make sure our size is appropriate and that it floats next to our image.
• .icon-trip-stop: The HTML tag that we’re using as our icon designation gets styled here. We size it up, set a color using a predetermined Scss variable, and we’re good to go.

Once those styles are saved, you should now see the points on the map representing each location. Additionally, you should be able to click each of these points to open up a popup containing information about the stop.

Road trip mapping app with popups

Follow along with the commit

Optional Last Step: Style Tweaks

The last thing that's completely optional is to make a few style tweaks to give your site a little personality. I’m not going to go over this in details, but if you’d like to follow along and dress things up a little bit, you can follow along with this commit which shows each code change I made.

Final version of the road trip mapping app

Follow along with the commit

Yay, we did it!

If you followed along with me, or skipped right to the starter, you should now have a mapping app that you can use for your next road trip.

The good news is this project can apply to anything! Want to map out your favorite restaurants in Washington, DC? Add your locations and remove the lines. Want to create line drawings over the map? That's certainly an option.

Whatever it is, if you enjoyed getting this map spun up, get creative and apply it to your next project!

Want to learn more about maps?

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

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet

We’ve all been there. You’ve been learning the basics of front end Web development, and you are keen to try out some new ideas.

You take the time to code up the perfect HTML page, and add some styles and JavaScript for good measure.

Then you pause. Time to take a moment to step back and see how your efforts look in the browser.

Pretty terrible, right?

That was certainly my experience when I first learned a little front end development.

I’d put a lot of thought into the functionality of the site. But when I put everything together, it looked awful.

I wanted to share my work with a few friends to get feedback. But in its present state, my site wasn’t ready.

You see, functionality is only half the story. We humans for whatever reason are biased towards the appearance or presentation of something.

Perhaps we’re more likely to trust a site that appears professional and well-designed. Or maybe the aesthetic value of a well-designed site can help us overlook minor flaws in functionality.

Whatever the reason, something of a “halo effect” does exist in Web development.

In this article, you’ll learn a few easy tips to make your ugly af front end project look better in no time.

The starting point

Below is an example of a simple HTML page with no styling at all.

This will be the starting point for the rest of the article. Each tip will build on top of the earlier ones until you have a better looking page to work with.

We’ll go in order of impact. That is, we’ll start with the tip that gives you the quickest improvement and make smaller and smaller gains as we go.

Add some negative space

The first tip is easy to picture, but needs to be put into practice carefully.

‘Negative space' refers to the empty space between elements on the page.

Getting the right amount of negative space goes a long way to making your page look better.

Specifically, it does two things:

• It makes the page less cluttered. It is easier to find the different elements, because the negative space helps them stand out from each other.
• It makes better use of the available screen space. Spacing the elements out carefully can help fill parts of the screen that are more central, and reduce content in parts on the edges.

Check the CSS in the example below. This adds some basic negative space to the simple example you saw earlier.

And here is the result:

Notice what has happened here:

• Padding creates space within an element
• Margin creates space between the elements
• Line-size makes text less cluttered

Too much empty space isn’t a good look. It can be tricky to get the balance right.

Pair your fonts

The next tip is another one with a quick impact.

The default system fonts are very safe and sensible. They are guaranteed to work.

But the choice of font makes a huge statement about the purpose and feel of your site.

• Light, playful fonts tell the viewer this page is fun and accessible
• Sensible, simple fonts give a more business-like appearance
• Traditional or display fonts give more of a timeless, classic look.

You get the idea.

But how to put it into practice?

The key is to use font pairs.

The idea is that using two fonts for different elements on the page provides a helpful contrast. Again, this helps make elements stand out and makes your page easier to view.

But you shouldn’t pair up any old fonts.

For a bunch of aesthetic reasons, some font pairings look much better than others.

Don’t worry about figuring this out yourself, though. As usual, there are resources on the Internet to help you.

Check out fontpair.co. It lets you browse different font pairings and see how they look together.

Once you find a pairing you like, the quickest way to use them in your project is to head over to Google Fonts.

• Search for the fonts you want
• Add them to your project
• Include the link in your HTML <head> element
• Reference the fonts in the stylesheet

See below for an example built on top of the basic page you saw earlier.

You can also improve the appearance by controlling the font size and text alignment.

Doesn’t that look considerably better? And after only two easy steps.

Get a colour scheme

I’m no designer, but I appreciate the value of learning the basics of colour theory.

In short, the colours you use on your page go a long way to creating an impression.

For example:

• Bright, exuberant colours create an energetic feel
• Light, toned down shades create a more corporate impression
• Dark, contrasting colours create a more dramatic impression
• Brand colours create a consistent identity

Again, it pays to choose your colours carefully.

The theory goes that the relationship between the colours you use also impacts the appearance of your site.

• Analogous colours can create a consistent, harmonious appearance
• Complementary colours create a pleasing contrast
• Triadic colours provide both contrast and balance

It pays to pick a colour scheme carefully.

Luckily, there are many ways to do this. Just Google "colour scheme generator" and you will be spoiled for choice.

One of my favourite tools is colormind.io. It generates a colour scheme and lets you preview it on a template.

Of course, rules can be broken. Using a more discordant colour scheme can be jarring, but used carefully can give a page an edgier, more stand-out appearance.

See the code below has been updated to use a simple colour scheme.

Add some structure

No matter how well-presented your page is right now, it can be improved by shaking things up a bit.

Adding in sections and structure can break up the monotony of a longer page.

By creating clear bounds between elements, you can create a logical structure and/or hierarchy. This will make it easier for the viewer to understand your page layout.

Keep to the same colour scheme, but vary things up a little.

See the example below has been extended to include more of a structure. The content is divided into <header>, <footer> and <div class="content"> elements.

The example also uses a media query to make the page present better on smaller devices.

If you want to learn more, try looking into:

• CSS Grid for creating a layout
• Flexbox for creating layouts
• Bootstrap for creating responsive designs
• Responsive design with media queries

It didn’t take much rewriting, but the effect is very noticeable.

Add some images and icons

Humans are typically visual creatures. A well placed image or icon can go a long way to making a page easier to view and understand.

The code below adds a simple image to the main content. See how it is included in the <div class="content"> element and the width is set to 100%? This keeps the structure of the page consistent.

Remember, images should be considered in the context of the overall colour scheme.

You don’t need to be a budding CSS artist or Photoshop wizard to do this. If you need access to high quality photos quickly, your can search Unsplash for free-to-use images.

Even a few free icons can make a difference.

The example below adds a simple menu icon to the top right corner. You could also add icons to your Github profile, or other online profiles.

You can quickly add free icons from these resources:

• Fontawesome
• Bootstrap
• Google
• Plenty of others

Add some animations

This final tip is a nice-to-have for sure.

As anyone who used PowerPoint during the 2000s will know, animations need to be used carefully.

Too many animations can be confusing and irritating for users.

But used properly, they can make a page much more interactive and visually appealing.

There are lots of ways to add animations to your site. You can use CSS selectors to change style in response to certain events, such as when the user hovers on that element.

The example below changes the image opacity to 50% when the user hovers over it.

Another option is to use is Animate.css. This provides a number of pre-built animations that you can use straight out-of-the-box.

The code below adds a subtle animation to the buttons when it is clicked.

Remember — with animation, less is usually more!

The final result

See this Github repo for overall evolution of the page.

The design still has a long way to go. But just by following some simple guidelines, it looks much better than it did at the start.

Here’s a quick review of each of the tips:

1. Add some negative space
2. Choose a pair of fonts
3. Pick a coherent colour scheme
4. Add some structure
5. Add a few icons or images
6. (Optionally) add some animation

Leave a response below if you found this quick guide helpful. Do you have any tips or tricks you want to share?

Thanks for reading!