DEV Community: Lars

The Definitive Guide to Netlify Serverless Functions

Lars — Fri, 05 Mar 2021 10:13:48 +0000

*This post was first published on my blog.

Demo (here) | Repo (here)

With the rise of the JAMStack and the serverless approach, most of the things that used to require a backend are now handled completely on the front-end or through APIs. But sometimes this is not enough, and that's where "serverless functions" come in.

Let's go and have a look at it. What are some use cases for serverless functions and how do you set them up?

Quick note: There are many different providers to run your serverless functions like AWS Lamda, Azure Functions, or Google Functions. However, in this tutorial, we will be using Netlify as it offers one of the most user-friendly experiences to set up and run your environment.

What are serverless functions?
What can you do with serverless functions?
Getting started with Netlify Functions
- Prerequisites
- Set up your folder structure
- Create a serverless function
Trigger a serverless function and receive a response

What are serverless functions?

One thing to get right from the start, "serverless" can be a little bit misleading, as a server is needed to execute your functions. A good way to think about it is that back in the day you needed to spin up your own server, maintain it and pay for it 24/7 to run any functions.

However, now with the "serverless" option, this has changed to a "pay as you go"-approach, meaning on-demand computing. Pay a provider like Netlify, for each execution of your functions and not a server in general.

Another main advantage of this is that you don't need to worry about your server infrastructure anymore and whether everything will be fine if you have a sudden increase in users.

Scaling your applications has just become a lot easier.

Serverless functions are the missing piece in the serverless approach of the JAMStack. It allows you to integrate any missing features that you couldn't handle with statically rendered pages.

What can you do with serverless functions?

Here is a list of a few of them:

Talk to any API
Run Data/Image processing
Utilize user authentication
Integrate 3rd party services (Ecommerce, etc.)
Send Emails

This enables us to do a variety of things! So let's have a look at what we need to get started!

Getting started with Neltlify Functions

Netlify has put a lot of effort into making the deployment process on their platform one of the easiest out there. You can either get started with one of the many example repos that Netlify has put together for you or you read further below to learn how to set up Netlify's Serverless Functions in your project on your own.

Prerequisites

First, we want to install the Neltify CLI. This will allow us to test our serverless functions locally instead of having to deploy every time we make a change. If you don't have it installed yet:

npm install -g netlify-cli

Set up your folder structure

To get started all you need to do is configure a folder with all your functions inside and that folder will automatically be exposed as a web endpoint under the site-relative path. The default is netlify/functions/. But you can simply change that by going into the Netlify web interface under "Deploy Settings". Or create a Netlify configuration file ( netlify.toml) in your project.

[build]
  functions = "serverless_functions"

Find more details on the topic here.

Create a serverless function

Next up, we want to create a function in our functions directory. For example:

serverless_functions/fetch-weather.js
serverless_functions/stripe-payments.js
serverless_functions/handle-user-input.js

These will later be available relative to the base URL of your site at: /.netlify/functions/fetch-weather or /.netlify/functions/stripe-payments or /.netlify/functions/handle-user-input

In today's example, we want to take a user input, sent it to our function, and display the response for the user.

For that we create a function at serverless_functions/handle-user-input.js:

exports.handler = async function (event) {
  return {
    statusCode: 200,
    body: `${event.queryStringParameters.input || "No input found"}`,
  }
}

As we have learned earlier our function will be available at .../.netlify/functions/handle-user-input, but how do we pass arguments to it?

Of course, with URL parameters!

Like so .../.netlify/functions/handle-user-input?myparameter=somevalue .

Then we read the value by accessing queryStringParameters in the event object. In our case, the parameter we pass will be called "input".

Trigger a serverless function and receive a response

Now that we have set up our serverless function, our users need to able to trigger it.

It is as simple as fetching data from an API.

/* ... imports etc. */

const IndexPage = () => {
  const [input, setInput] = React.useState("")
  const [allInput, setAllInput] = React.useState([])

  const handleSubmit = () => {
    if (input) {
      fetch(`/.netlify/functions/user-input?input=${input}`)
        .then(res => res.text())
        .then(text => setAllInput([...allInput, text]))
    } else {
      window.alert("Please give me some input! 😥")
    }
  }

  return (
    <Layout>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={handleSubmit}>Submit</button>
      <ul style={{ marginTop: "1rem" }}>
        {allInput.map((item, index) => (
          <li key={`${index}-${item}`}>{item}</li>
        ))}
      </ul>
    </Layout>
  )
}

Three things are happening here:

We have an input field for users to enter any information and store that input using React's useState hook.
We have a button to trigger the serverless function together with our input value using URL parameters. Then, when we receive a response, we add that string, to our array of responses called "allInput". Again, using React's useState hook for this.
Lastly, we map through our array of responses and display any items in that list with an unordered list.

Demo (here) | Repo (here)

And that's it! You might feel like it's a little bit redundant to send the user's input through a serverless function, just to receive it again. But just think of all the different opportunities that this opens up for us! It's a powerful tool that allows you to turn your static site into a pretty much dynamic one! Let me know in the comments if you already have an idea of what you want to try and built with it!

Demo (here) | Repo (here)

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

The best way to load and use Google Fonts with React, Gatsby and NextJS

Lars — Wed, 17 Feb 2021 10:19:14 +0000

*This post was first published on my blog.

Google Fonts are amazing and widely popular on the Internet. Its API makes up 89.28% of the web fonts market share (see source). However, I often noticed that many websites struggle with fetching their fonts and end up render-blocking their website by up to 2 seconds!

So, today I wanted to share the optimal way to load your Google Fonts without affecting your site performance. Let's get started.

How can I check whether fonts affect the performance of my website?
FontSource (Self-host Google Fonts in neatly bundled NPM packages)

How can I check whether my fonts affect my website's performance?

I think many people might not even realize when loading fonts block the user from accessing their website. One of the most common resources to check this is Google's PageSpeed Lighthouse tool (https://developers.google.com/speed/pagespeed/insights/). If you are having problems with your Google Fonts, it will look like this:

And here, the Google Font API needed a rocking 780ms to load in before elements on the website can be rendered. 780ms are eons for users. Just think of how much time we would steal over time from our users if every user has to wait this long.

FontSource (Self-host Google Fonts in neatly bundled NPM packages)

And this is where FontSource comes in. FontSource lets you self-host your fonts and gets rid of the need to include your fonts as <link rel="stylesheet">. No need to make a call to the Google Font API anymore, but instead have the font assets right in your project.

FontSource essentially bundles open-source fonts like Google's in an NPM package that you can include in your project. All that's left to do is to import your font either in your index.js or in your SCSS file.

FontSource is very easy to configure and comes with great documentation. So, feel free to dive in there or follow the below for a simple implementation.

Let's say we want to include the "Montserrat" font in our project. In 3 steps we are done.

1. Add the package to your project

yarn add @fontsource/montserrat // alternatively npm install @fontsource/montserra

2. Import the font subsets necessary to your project in JavaScript or SCSS.

To further improve performance, FontSource allows you to import subsets of the font to keep the payload small.

In Javascript:

import "@fontsource/montserrat" // Defaults to weight 400.
import "@fontsource/montserrat/900-italic.css" // Italic variant.

or SCSS:

@import "~@fontsource/montserrat/index.css"; // Weight 400.
@import "~@fontsource/montserrat/300-italic.css";

3. Define the font in your CSS, CSS-in-JS etc.

Now you are free to use the font in any place necessary. Whether you would like to reference it in CSS, CSS-in-JS, or SCSS.

body {
  font-family: "Montserrat";
}

And gone are your issues with render-blocking fonts! I hope this helped. This tutorial has been quite simple and straightforward, but looking at the number of slow loading websites that I come across, with fonts loading in being the reason, I just felt like I had to make this post. Feel free to let me know in the comments if you feel the same!

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

Top 10 resources to get better at CSS and become a better front-end developer 👨‍🎨👨‍💻

Lars — Fri, 12 Feb 2021 10:26:48 +0000

*This post was first published on my blog.

Writing CSS is hard. Even though it often is made fun of and not seen as a programming language, writing consistent and pretty CSS is really hard. And in my journey as a self-taught web developer, I have often noticed that online classes and tutorials often skip the part to design your app with CSS and don't go into detail about CSS best practices and more.

And I feel that many other front-end developers struggle with this issue as well if I look at the majority of portfolios out there. We learn how to build a restful API before we learn how to properly use the CSS transition or box-shadow attributes to style a simple button.

That's why I have decided to share my top 10 resources on how to get better in CSS with you, so your portfolio will impress your clients!

Quick note: These resources are challenges and project-style meaning you learn through actively using CSS instead of going through tutorials or online classes! I much prefer this method as it teaches you how to look up things on your own instead of following a path that's laid out for you in class.

With that said, let's get into it!

Frontend Mentor
100 Days of CSS (CSS Challenge)
Front-End Challenges Club
Daily UI
CSS Battle
Codier.io
Build something you found on Dribbble
30 Days of CSS Girls
Daily CSS Design
Ace Front End

1. Frontend Mentor

Frontend Mentor is hands down one of the best resources out there. Proving you real-world project ideas and free assets to build them, sharpening your CSS skills with this resource will also mean you end up having more assets in your portfolio!

2. 100 Days of CSS (CSS Challenge)

100 Days of CSS is helpful as you can see what others have built and if you submit your own code, you will show up on the challenge site as well! This is also good if you are struggling, and just want to take some hints from other people's solutions.

3. Front-End Challenges Club

The Front-End Challenges Club consists of 8 challenges by the Piccalilli and their respective solutions. Some of the challenges come with assets if they are needed, so you can dive right in!

4. Daily UI

DailyUI is more a resource for designers than front-end developers, but nonetheless, I think it's well worth mentioning. I often get asked by my clients to come up with designs on my own or give recommendations, so I think any front-end developers should at least know some of the design concepts! You will notice the effect on your CSS skill for sure!

5. CSS Battle

CSS Battle has become very popular recently with some of the biggest web developer Youtubers battling each other in their videos. Challenges range from very beginner to very advanced and the game factor motivates, but writing quick solutions gets you more points instead of clean and consistent ones... Nonetheless, fun and learning in one!

6. Codier.io

Codier.io lets you create solutions to their challenge right in the browser and compare them with the community. However, most of the challenges are geared towards beginners, so this might be too easy for some of you!

7. Build something you found on Dribbble

If you haven't heard of Dribbble yet, it is one of the biggest platforms for designers to showcase their work on the web. From animations to product branding, print, and web and mobile design, you can find it all. It's a great resource to find beautiful web and mobile designs and recreate them in code for practice!

8. 30 Days of CSS Girls

30 Days of CSS Girls is a 30 Day Challenge that teaches you many of the basics of CSS and how they work. If you are a beginner, this might be where you want to start.

9. Daily CSS Design

When I came across Daily CSS Design, I was stunned. It's a project by Bjørn Fjellstad, a designer and developer, who created a different design every day for one whole year. The designs in themselves are amazing, but the presentation on his website also speaks for itself. If you want to step up your CSS, you might want to get inspired here!

10. Ace Front End

And lastly, Acer Front End. A beginner to intermediate level resource to let you become more confident (or not) in your skills as a developer. Finish the challenges right in the browser and become a "better" dev.

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

Top 5 headless CMS and their pros and cons (Gatsby JS edition)

Lars — Fri, 05 Feb 2021 08:25:42 +0000

*This post was first published on my blog.

One of the reasons why Gatsby JS has been so popular over the years is its vast plugin library that makes it almost as easy as drag-and-drop to add new functionality to your app.

Because of that, Gatsby has managed to make adding a headless CMS a straightforward and often very simple process that many other Static Site Generators (SSG) can only be astonished by.

In this post, I wanna go my top 5 headless CMS that I have used with Gatsby JS in the past and their pros and cons. Let's get started!

Contentful
Wordpress
Prismic
Netlify CMS
Strapi

Contentful

We start with Contentful. Probably being one of the biggest players in the headless CMS market, Contentful gets also introduced first in the official Gatsby docs for "sourcing data into Gatsby".

It provides a user-friendly interface and organized, flexible data models with support for a variety of data types and content editors (e.g. WYSIWYGs, form fields, raw text areas).

Pros:

Available free tier that allows you to use it with 1 website using 2 locales, 48 content types and 2 user roles (admin & editor)
Easy to set up
Work with up to 5 users on a team on the free tier
Great built-in versioning features with history and draft states
Intuitive user interface

Cons:

Step from free to tier to paid is very expensive (US$489/month)
Asset size max. 50MB
Just 1 site on the free tier

WordPress

Just recently Hosting Tribunal put out a new article on WordPress's latest statistics stating this:

WordPress powers 39.6% of the internet in 2021, a growth of nearly 5% from 35% in 2020, and a 4% rise from the year before.

HostingTribunal.com

But many people don't know that you could also use WordPress as their headless CMS. Just the way you are used, but with Gatsby or other Static Site Generators (SSG) as the front-end.

Made possible by the free and open-source WPGraphQL plugin.

Pros:

Extensive documentation on the WordPress GraphQL plugin
Many users are already familiar with the WordPress interface (usability+)
Unlimited assets, users & content types

Cons:

More tedious/difficult to set up than most headless CMS
WordPress needs to be hosted (not free)

Prismic

Prismic is my headless CMS of choice for my personal website as the content management process for different languages works really well.

The setup is a little tricky, but once you are through that the developing experience is very straightforward and easy. The extensive free tier is something I haven't been able to find anywhere else and for personal projects as a developer, I can recommend it.

However, as soon as you would like to have people to access content without admin access, Prismic's price-point at 100$/month rules itself unfortunately out.

Pros:

Very extensive free tier with unlimited API Calls, Documents, Custom Types, Locales, Assets, Image Optimizations & 100 GB of Built-in CDN
Very affordable plans for small teams (Starter Plan $7/month & Small Plan $15/month)
Live Previews for content changes (with Gatsby currently not very stable, use NextJS instead)

Cons:

Setup is not very straightforward with two different plugins gatsby-source-prismic-graphql & gatsby-source-prismic
User roles are only available on plans for "organizations" starting at $100/month, which makes Prismic unusable for small developers with individual clients.

Netlify CMS

Netlify CMS has been together with Prismic one of my go-to-solutions when setting up a headless CMS. It's more configurable than other headless Markdown CMS like Forestry and has a community with the Netlify forum that's quick to help if you run into any problems.

Pros:

Easy to set up with several starter/templates available
If properly set up, enjoy live previews within the CMS
Open-source with no paid plans (free only)
CMS lives right within your website and reads data from your Github repo markdown files

Cons:

Although managed separately from Netlify the hosting service, Netlify CMS is difficult to set up on any other host than Netlify
Not as versatile for users as other headless CMS
i18n (Localization) is possible but not user or developer to set up

Strapi

Strapi has been gaining a lot of traction recently and is becoming a popular solution as headless CMS. Providing an easy to configure Rest or GraphQL endpoint it can be virtually plugged in into any framework without a lot of trouble.

Together with its plugin library and the ability to also manage file storage as well as email for you, makes Strapi definitely worth checking out!

Pros:

Easy installation and ability to use rest and graphql
Extensive free tier (3 default roles etc.)
Plugin library to extend Strapi

Cons:

i18n (Localization) features are still not fully there yet
Hosting generally costs (if not hosted on free Heroku bucket)

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

React and Gatsby JS got me started 🚀🔥 But what’s next?

Lars — Fri, 29 Jan 2021 08:36:24 +0000

*This post was first published on my blog.

I have been a freelance web developer for a while now, but in the beginning, I was always wondering whether WordPress development is going to be the only way to create websites for my clients? I was looking for something to take advantage of my JavaScript knowledge and that's where I found Gatsby. It gave me the option to leave the WordPress space and try out something else! But what's now? Is there something after Gatsby JS? That's what we will talk about today, so let's get right into it!

*Please note: This is the perspective of a web developer wanting to go freelance right from the beginning and not planning to get a corporate job.

How I got started
- Getting into React
- Getting into Gatsby JS
The benefits of Gatsby JS
Why you also might want to move on
What's next?

How I got started

Coming from a self-taught background, I got started, like so many others, with FreeCodeCamp. It is in my opinion the single best resource to get your journey started and although many other resources have come out in the meantime, I think it is still the best.

However, while I was doing FreeCodeCamp I had already started developing my first couple of WordPress websites. In the end, this combination proved good, as it taught me all the basics I needed to get started. But I soon grow discontent with WordPress and its long loading times and lots of other things.

I was wondering whether there is something I had missed in my FreeCodeCamp journey. Back in the day, the curriculum still consisted of only HTML, CSS, JS, and some backend certifications, but I wondered how do I now actually create a website for let's say a bakery around the corner?

Getting into React

I was reading lots about React on the internet, but FreeCodeCamp didn't have anything React-related in their curriculum at the time. So I started going onto Udemy and searching for tutorials there.

Eventually, I settled for "The Complete Web Developer in 2021: Zero to Mastery" by Andrea Neagoie. Thought through and well structured 40 hours on-demand video course that filled in all the gaps that FreeCodeCamp had left me with.

It helped me to get familiar with React file structure, JSX, the idea of component hierarchy and so much more. But again, i*n the end, I had one more project on my portfolio, but was left wondering*, is this how you create a "normal" website if a friend reaches out to you and needs you to code up something simple?

Getting into Gatsby JS

And that's where I found Gatsby JS. After searching for ways to reduce WordPress loading times and how to make "normal" websites with React, I came across this thing called "Jamstack".

And a day and 2 youtube videos later, I was following the Gatsby docs to set up my first Gatsby starter and browse through the numerous Gatsby files.

Immediately, I was hooked.

At first, it was a bit daunting to grasp was gatsby-node.js and gatsby-browser.js APIs meant, but with the huge community and the library of starters, it was just trial and error. The thing that every developer goes through when learning new technologies, right?

The benefits of Gatsby JS

Gatsby offered everything that I liked from WordPress development and more! With Gatsby's theme library I was able to peek at other people's projects and built on top of their themes just like I would have in WordPress. But only this time, I could code in React.

On top of it, hosting small Gatsby websites on Netlify with continuous deployment for basically free, blew me away.

Previously it had always been: "Host your WordPress website for only 5$/month". But now, instead, I was able to decide when to "publish" changes without immediately showing on my site like I had to with most of my WordPress clients.

My time spent learning JavaScript and React now finally paid off too, and for the first time, I felt like FreeCodeCamp had been worth it.

And what shocked me most, how easy it was to get high ratings on Google's Lighthouse Tool for performance as well as SEO. Something that many clients cared about a lot.

I now started to create websites with React and Gatsby instead of WordPress. I felt like I was more in control with less setup and could still give my clients access to their content through headless CMS easily. The best of both worlds.

Why you also might want to move on

So why would I want to move on from Gatsby as it has made my developing experience so much better? Well, things on the Internet, and especially some of my views on web development have changed since I got started with Gatsby. Gatsby is amazing, but it is definitely not the right answer to all static sites.

The competition in the SSG (StaticSiteGenerator) field has become stronger each year, so much that things that used to be unique to Gatsby like effort-less image optimization and SEO have since been adopted by others and make it more difficult to argue why you should go with Gatsby.

My clients' websites also have increased in size and often get updated which makes the build process with Gatsby quite tedious. There are ways to improve build times, but what about the J*avaScript and JSON bloat that gets shipped with every Gatsby site no matter what size*? Now some people will say that with the bloat come configured lots of Gatsby greatest advantages. But what if did not need or want them? I don't have the option to turn them off.

Nowadays, I go for Gatsby if it's a site that needs to be set up quickly, is fairly small in size, and can perhaps be created by using one of the many starters that I have set up for myself in the past.

The plugins that come with Gatsby are also generally great, especially for people getting started, but you might catch yourself later thinking: "Why am I googling whether there is a plugin, again? Shouldn't I maybe try and code this myself?.."

Gatsby is just too convenient.

From once being amazed by all the things that Gatsby provides you out of the box, I now often question myself if I really understood the concept of what I implemented or whether I just "copied and pasted".

What's next?

I have mentioned the growing competition that Gatsby (and React in general) is dealing with and some of the competitor's approaches are quite different and worth looking at.

I think a developer should always strive to learn more and not only deepen knowledge, but also accept that technologies sometimes change completely and as a developer, I might have to revise what I thought was good yesterday, but might not work anymore tomorrow.

I know the React team and the Gatsby community are working relentlessly to improve every day, but I increasingly have a tingle in my fingers that tells me to step out of my comfort zone and try out something new.

One topic that I have come across, again and again, is Svelte with Snowpack. Getting rid of the bloat from React and offering an even better developer experience, seems very promising.

It's currently used by sites like the New York Times, Spotify, Ikea, and Chess.com. These are some really big players that seemed confident enough in Svelte to take the plunge! So this is something I definitely want to try out in 2021!

The other probably more popular choice is VueJS. Becoming very hyped over the last few years, I think we all should at least dabble in the "Hello World" starter and see for ourselves if the hype is justified.

And this is one of the many reasons I love web development. The community strives to challenge each other and constantly introduces new and potentially better concepts. Always on the hunt for a better approach for developers and users.

What will you learn in 2021? Will you also leave your comfort zone and see what else is out there? Let me know in the comments!

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

Use Javascript's Fetch API with async/await to fetch your Instagram feed in React

Lars — Fri, 22 Jan 2021 09:44:33 +0000

*This post was first published on my blog.

Especially for blogs these days, Instagram feed implementations have become more and more popular. In Gatsby JS case, I have often used this handy plugin called gatsby-source-instagram, but as new images are only loaded during build time and not on page load, I have recently gone over to use a more general approach using JavaScripts Fetch API with Async/Await.

Let's get into it!

**Quick note:* Here is the repo and the demo.

Set up your React Component
Fetch your Instagram posts with Async/Await
Display your posts and show likes on hover
Implement a loading state while fetching posts
The final result

Set up your React Component

Now before we get right into, this is what our bare React Component will look like:

import React from "react"

export default class Instagram extends React.Component {
  state = { photos: [], loading: true }

    // Your Instragam ID can be retrieved here. Just make sure to replace your instagram name at the end
  // https://www.instagram.com/web/search/topsearch/?context=blended&query=INSTAGRAM_USERNAME

  // Your specifications needed for the fetch call later
  INSTAGRAM_ID = "787132"
  THUMBNAIL_WIDTH = 640
  PHOTO_COUNT = 30

    async componentDidMount() {
        // later fetch our posts here
    }

  render() {
    return (
      <div className="post-wrapper">
        {/* map through our posts here */}
      </div>
    )
  }
}

Two things are important to note here!

Our state is storing an empty array which we will later use to store our images once loaded and secondly, a loading boolean which we will use to show a loading animation.
The variables below are specifications for our fetch call later. By switching out the username at the end, you can use this URL:

https://www.instagram.com/web/search/topsearch/context=blended&query=INSTAGRAM_USERNAME

to make a GET request to the Instagram API and get your specific ID for your account. Once that's done, you choose your thumbnail width needed and the number of images you would like to load.

Thumbnails are available with these sizes:

Fetch your Instagram posts with Async/Await

Async/Await allows us to asynchronously load our page while we are fetching our posts in our componentDidMount function. This looks like so:

import React from "react"

export default class Instagram extends React.Component {
  state = { photos: [], loading: true }

  // Your specifications
  INSTAGRAM_ID = "787132"
  THUMBNAIL_WIDTH = 640
  PHOTO_COUNT = 30

  async componentDidMount() {
    try {
      // Hack from https://stackoverflow.com/a/47243409/2217533
      const response = await fetch(
        `https://www.instagram.com/graphql/query?query_id=17888483320059182&variables={"id":"${this.INSTAGRAM_ID}","first":${this.PHOTO_COUNT},"after":null}`
      )
      const { data } = await response.json()
      const photos = data.user.edge_owner_to_timeline_media.edges.map(
        ({ node }) => {
          const { id } = node
          const comments = node.edge_media_to_comment.count
          const likes = node.edge_media_preview_like.count
          const caption = node.edge_media_to_caption.edges[0].node.text
          const thumbnail = node.thumbnail_resources.find(
            thumbnail => thumbnail.config_width === this.THUMBNAIL_WIDTH
          )
          const { src, config_width: width, config_height: height } = thumbnail
          const url = `https://www.instagram.com/p/${node.shortcode}`
          return {
            id,
            caption,
            src,
            width,
            height,
            url,
            comments,
            likes,
          }
        }
      )
      this.setState({ photos, loading: false })
    } catch (error) {
      console.error(error)
    }
  }

  render() {
    return (
      <div className="post-wrapper">
        {/* map through our posts here */}
      </div>
    )
  }
}

To use our try/catch block for our API GET call, we have to make our componentDidMount function asynchronous. Then we can use the fetch API with the await keyword to call the API and get the data to our specifications. All that is left, is to de-structure the variables that we need into the photos array in our state.

Display your posts and show likes on hover

Now that we have received and stored our posts, we can go ahead and map through them.

import React from "react"

export default class Instagram extends React.Component {

    // ... previous code here  

  render() {
    return (
      <div className="post-wrapper">
        {/* map through our posts here */}
                {this.state.photos &&
          this.state.photos.map(
            ({ src, url, id, likes, comments, caption }) => (
              <a
                href={url}
                target="_blank"
                className="post-item"
                rel="noopener noreferrer"
                key={id}
              >
                <img
                  src={src}
                  className="post-image"
                  alt={caption.substring(0, 40)}
                />
              </a>
            )
          )}
      </div>
    )
  }
}

So we are saying that, if photos is not empty or in that sense equals true, run the items in the array and show me the images.

But to get a more Instagram-like experience, we also want to show the number of likes and comments on hover. Now for this, we need to add some CSS as well, so please note the import at the top. I won't go into details about the CSS here, but you can find the code on my Github here.

import React from "react"

// Styles
import "./instagram.css"

export default class Instagram extends React.Component {

    // ... previous code here

  render() {
    return (
      <div className="post-wrapper">
        {/* map through our posts here */}
                {this.state.photos &&
          this.state.photos.map(
            ({ src, url, id, likes, comments, caption }) => (
              <a
                href={url}
                target="_blank"
                className="post-item"
                rel="noopener noreferrer"
                key={id}
              >
                <img
                  src={src}
                  className="post-image"
                  alt={caption.substring(0, 40)}
                />
                {/*  */}
                <div className="post-item-info">
                  <ul>
                    <li className="post-item-likes">
                      <span role="img" aria-label="heart">
                        <svg
                          width="1em"
                          height="1em"
                          viewBox="0 0 24 24"
                          fill="white"
                          style={{
                            fontSize: "14px",
                            lineHeight: "1.45",
                          }}
                        >
                          <path d="M12 4.435C10.011-.964 0-.162 0 8.003 0 12.071 3.06 17.484 12 23c8.94-5.516 12-10.929 12-14.997C24-.115 14-.996 12 4.435z"></path>
                        </svg>
                      </span>{" "}
                      {likes !== null ? likes.toLocaleString() : 0}
                    </li>
                    <li className="post-item-comments">
                      <span role="img" aria-label="speech-balloon">
                        <svg
                          width="1em"
                          height="1em"
                          viewBox="0 0 24 24"
                          fill="white"
                          style={{
                            fontSize: "14px",
                            lineHeight: "1.45",
                          }}
                        >
                          <path d="M24 9.874C24 4.42 18.627 0 12 0S0 4.42 0 9.874c0 4.512 3.678 8.317 8.701 9.496L12 24l3.299-4.63C20.322 18.19 24 14.385 24 9.874z"></path>
                        </svg>
                      </span>{" "}
                      {comments !== null ? comments.toLocaleString() : 0}
                    </li>
                  </ul>
                </div>
              </a>
            )
          )}
      </div>
    )
  }
}

Implement a loading state while fetching posts

At last, we want to show something while we are fetching the posts so that the user knows something is going on in the background. That's why we have our loading boolean in our state.

You might have noticed already, but after we fetched our posts and stored them in our state, we are also setting our loading boolean to false. With this in mind, all that is left is to have an if-else statement in our JSX to toggle between loading and showing pictures.

// ... imports here

export default class Instagram extends React.Component {
  state = { photos: [], loading: true }

  // ... your specifications here

  async componentDidMount() {
    try {

        // ... fetching posts here and then set loading state to false
      this.setState({ photos, loading: false })

    } catch (error) {
      console.error(error)
    }
  }

  render() {
    return (
      <div className="post-wrapper">
        {this.state.loading === true ? (
          <div style={{ textAlign: "center" }}>
            <h1>Loading ...</h1>
          </div>
        ) : (
          this.state.photos &&
          this.state.photos.map(
            ({ src, url, id, likes, comments, caption }) => (
              // ... previous code here
            )
          )
        )}
      </div>
    )
  }
}

The final result

import React from "react"

// Styles
import "./instagram.css"

export default class Instagram extends React.Component {
  state = { photos: [], loading: true }

  // Your specifications
  INSTAGRAM_ID = "787132"
  THUMBNAIL_WIDTH = 640
  PHOTO_COUNT = 30

  async componentDidMount() {
    try {
      // Hack from https://stackoverflow.com/a/47243409/2217533
      const response = await fetch(
        `https://www.instagram.com/graphql/query?query_id=17888483320059182&variables={"id":"${this.INSTAGRAM_ID}","first":${this.PHOTO_COUNT},"after":null}`
      )
      const { data } = await response.json()
      const photos = data.user.edge_owner_to_timeline_media.edges.map(
        ({ node }) => {
          const { id } = node
          const comments = node.edge_media_to_comment.count
          const likes = node.edge_media_preview_like.count
          const caption = node.edge_media_to_caption.edges[0].node.text
          const thumbnail = node.thumbnail_resources.find(
            thumbnail => thumbnail.config_width === this.THUMBNAIL_WIDTH
          )
          const { src, config_width: width, config_height: height } = thumbnail
          const url = `https://www.instagram.com/p/${node.shortcode}`
          return {
            id,
            caption,
            src,
            width,
            height,
            url,
            comments,
            likes,
          }
        }
      )
      this.setState({ photos, loading: false })
    } catch (error) {
      console.error(error)
    }
  }

  render() {
    return (
      <div className="post-wrapper">
        {this.state.loading === true ? (
          <div style={{ textAlign: "center" }}>
            <h1>Loading ...</h1>
          </div>
        ) : (
          this.state.photos &&
          this.state.photos.map(
            ({ src, url, id, likes, comments, caption }) => (
              <a
                href={url}
                target="_blank"
                className="post-item"
                rel="noopener noreferrer"
                key={id}
              >
                <img
                  src={src}
                  className="post-image"
                  alt={caption.substring(0, 40)}
                />
                {/*  */}
                <div className="post-item-info">
                  <ul>
                    <li className="post-item-likes">
                      <span role="img" aria-label="heart">
                        <svg
                          width="1em"
                          height="1em"
                          viewBox="0 0 24 24"
                          fill="white"
                          style={{
                            fontSize: "14px",
                            lineHeight: "1.45",
                          }}
                        >
                          <path d="M12 4.435C10.011-.964 0-.162 0 8.003 0 12.071 3.06 17.484 12 23c8.94-5.516 12-10.929 12-14.997C24-.115 14-.996 12 4.435z"></path>
                        </svg>
                      </span>{" "}
                      {likes !== null ? likes.toLocaleString() : 0}
                    </li>
                    <li className="post-item-comments">
                      <span role="img" aria-label="speech-balloon">
                        <svg
                          width="1em"
                          height="1em"
                          viewBox="0 0 24 24"
                          fill="white"
                          style={{
                            fontSize: "14px",
                            lineHeight: "1.45",
                          }}
                        >
                          <path d="M24 9.874C24 4.42 18.627 0 12 0S0 4.42 0 9.874c0 4.512 3.678 8.317 8.701 9.496L12 24l3.299-4.63C20.322 18.19 24 14.385 24 9.874z"></path>
                        </svg>
                      </span>{" "}
                      {comments !== null ? comments.toLocaleString() : 0}
                    </li>
                  </ul>
                </div>
              </a>
            )
          )
        )}
      </div>
    )
  }
}

And the CSS:

.post-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.post-item {
  position: relative;
  height: 100%;
  flex: 1 0 12rem;
  margin: 0 1rem 2rem;
  color: #fff;
}

.post-image {
  border-radius: 0.4rem;
  width: 100%;
  display: block;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.post-item-likes {
  margin-right: 1.5rem;
}

.post-item:hover .post-item-info,
.post-item:focus .post-item-info {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.post-item-info {
  display: none;
  border-radius: 0.4rem;
}

.post-item-info ul {
  padding: 0;
  margin: 0;
}

.post-item-info li {
  display: inline;
}

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

Top 50 Gatsby plugins you're going to love 🔥👨‍💻

Lars — Fri, 15 Jan 2021 07:53:12 +0000

*This post was first published on my blog.

One of the many things that might get people to use Gatsby JS is the vast Gatsby Plugin Library that comes with it. Thousands of different plugins, built by the Gatsby team, the community, or sole developers with almost seamless drop-in support make the developing experience with Gatsby very smooth. In this post, we will go through my top 50 plugins with all kinds of different purposes and categories.

Let's get started!

Please note: there are lots of basic plugins I have left out in this list, although there are amazing! Let me know in the comments what plugins you guys use!

Styling
Markdown
CMS
Socials
Analytics / SEO
Hosting
Other

Styling

1. gatsby-plugin-styled-components

Styled Components, maybe the most popular of the "CSS-in-JS" solutions, makes probably for a good start to this list of top 50 plugins. Find out more about how to implement it in your existing repo in this DigitalOcean article.

2. gatsby-plugin-emotion

Emotion is the counter-part to Styled Components and arguably the second most popular "CSS-in-JS" solution. Let me know in the comments which you like best!

3. gatsby-plugin-typography

TypographyJS is a tool I often use for my sites and this Gatsby JS plugin makes sure to include it with minimal configuration.

4. gatsby-plugin-sass

For people who prefer Sass/SCSS over "CSS-in-JS" or standard CSS we have gatsby-plugin-sass providing drop-in support for Sass/SCSS stylesheets

5. gatsby-plugin-postcss

And if you want to use PostCSS "the tool for transforming CSS with JavaScript", we've got you covered as well.

6. gatsby-plugin-purgecss

Remove unused CSS from CSS/Sass/Less/stylus files and modules in your Gatsby project using purgecss. 🎉 Supports tailwind, bootstrap, bulma, etc.

7. gatsby-plugin-material-ui

The plugin to include Material-UI v4 in your project. However you might want to consider using "gatsby-theme-material-ui" which already uses the plugin under the hood, adds web fonts, meta-viewport, CSS baseline, and MaterialUI theme support and has MaterialUI styled Gatsby link components.

8. gatsby-plugin-chakra-ui

Drop-In support for Chakra-UI! "Chakra UI is a simple, modular, and accessible component library that gives you the building blocks you need to build your React applications." - chakra-ui.com.

9. gatsby-plugin-antd

Drop-In support for AntDesign! 🌈 Enterprise-class UI designed for web applications. 📦 A set of high-quality React components out of the box. 🛡 Written in TypeScript with predictable static types. ⚙️ A whole package of design resources and development tools.

Markdown

10. gatsby-plugin-mdx

gatsby-plugin-mdx is the official integration for using MDX with Gatsby. The default configuration will allow you to automatically create pages with .mdx files in src/pages and will process any Gatsby nodes with Markdown media types into MDX content! 🔥

11. gatsby-remark-prismjs

PrismJS is a syntax highlighter for your code snippets on your Gatsby Blog! Lightweight and extensible! Checkout different themes at PrismJS!

12. gatsby-remark-embed-video

Now, what if you want to embed a Youtube video in your Markdown? You can write the code to detect it yourself or you can use gatsby-remark-embed-video!

13. gatsby-remark-reading-time

Becoming more popular each day, you can now add a reading-time tag to your blog posts like you see on Medium on really anywhere these days!

14. gatsby-remark-autolink-headers

This plugin automatically turns your Markdown headers into GitHub-style hover-links! Note: this is a sub-plugin to the gatsby-transformer-remark plugin.

15. gatsby-remark-twitter

Instead of Youtube Videos, with this plugin, you can embed any Tweet or Moment right in your Markdown files!

16. gatsby-remark-smartypants

Next up is another sub-plugin of gatsby-transformer-remark, this time we can automatically replace “dumb” punctuation marks with “smart” punctuation marks. This uses the retext-smartypants plugin under the hood.

CMS

17. gatsby-plugin-netlify-cms

Now if you didn't want to go with managing markdown files on your own, the next best and easy option for you is NetlifyCMS. A CMS deployed with your Gatsby Netlify Site makes changing and previewing your markdown files easy!

18. gatsby-source-prismic

Prismic CMS is a little bit more difficult to configure, but once you have the setup, it's a really good option for a multilingual website like my own! Create and source content in different languages to programmatically create your pages in Gatsby for you!

19. gatsby-source-contentful

This is probably one of the most popular options for headless CMS. Easy to set up with a simple web interface, Contentful has become one of the biggest in the market.

20. gatsby-source-datocms

Another headless option is DatoCMS. It excels at managing pages with complex layouts or big teams with multi-roles, for bigger sized companies this is definitely worth considering!

21. gatsby-source-sanity

Sanity allows for real-time content preview in development and minimal configuration to get started. Check out the guide to get started here.

22. gatsby-source-airtable

Source your data into your Gatsby application from your Airtable base tables. "Airtable evolves with you and your team, so you can build a solution with increasing sophistication and capability." - airtable.com

23. gatsby-source-strapi

"Building self-hosted, customizable, and performant content API has never been easier." - Strapi.io. This our first self-hosted option!

24. gatsby-source-wordpress

This plugin will soon be deprecated for the next version v4, but still worth mentioning! Over 35% of the web is powered by WordPress and some might want to think about just deploying the frontend with Gatsby. With this plugin, you can! Source your WordPress content on build time and get Gatsby's blazing fast front-end on top! ⚡️

Socials

25. gatsby-plugin-social9-socialshare

Do you want sharing buttons for your blog posts? This plugin is for you! Social9 social sharing provides you beautiful buttons, sharing capabilities, and analytics. (20+ buttons- Whatsapp, Facebook, Twitter, LinkedIn, Reddit, and many more…)

26. gatsby-plugin-my-social-cards

Parse your posts and generate socials cards for Twitter, Facebook, Slack, and more! You can also configure lots on your own like custom backgrounds, custom author images, etc.

27. gatsby-source-instagram

Sourcing data from Instagram hasn't been easier. Scrape posts from an account or a hashtag. Or scrape user profile information if that's what you are after!

28. gatsby-source-twitter

If Twitter is what you are after instead of Instagram, this plugin has got you covered. The plugin supports 8 different API endpoints from Twitter's official API and you can pull it right into your Gatsby site.

29. gatsby-plugin-mailchimp

Some people might be trying to create a newsletter following and with this Mailchimp plugin, it just becomes easier! There are lots of other options for providers, but Mailchimp is one of the most popular.

30. gatsby-plugin-feed

Do you want your blog to be available as an RSS feed? This plugin gives you all the configuration options you need.

Analytics / SEO

31. gatsby-plugin-google-analytics

Understanding your users and how they behave is key to creating a following. The most popular option is Google Analytics. This plugin offers drop-in support for the "not yet" deprecated Google Analytics.

32. gatsby-plugin-google-gtag

Google gtag is the newest version of Google Analytics, also called Google Analytics v4 supporting the GA4 property. If you signed up recently, this is most likely what you got. Make sure to use this plugin for drop-in support then!

33. gatsby-plugin-google-tagmanager

If you want Google Tagmanager on your Gatsby site. This plugin is for you. Add your Google ID and off you go!

34. gatsby-plugin-sentry

"Sentry's application monitoring platform helps every developer diagnose, fix, and optimize the performance of their code. Over 1M developers and 60K organizations already ship better software faster with Sentry. Won’t you join them? " - Sentry.io Why not with this Gatsby plugin?

35. gatsby-plugin-sitemap

Create your sitemap with ease! But why do you even need one? This article goes through the basics and most importantly explains its use cases!

36. gatsby-plugin-robots-txt

Next up is the robots.txt. One line in your gatsby-config.js and you are good to go. If want to learn more about it, check out this article.

37. gatsby-plugin-guess-js

Guess.js is a library for enabling data-driven user-experiences on the web. This plugin will predict which page a user is most likely to visit from a given page by automatically downloading your Google Analytics data and use this data to create a model!

Hosting

38. gatsby-plugin-s3

There are lots of different options for hosting, but among them, the two most common I use are Amazon S3 Buckets and Netlify. This plugin focuses on the S3 buckets and makes deployment easy!

39. gatsby-plugin-netlify

Now Netlify is probably one the most popular options to deploy your Gatsby site and this plugin will automatically generate a _headers and a _redirects at the root of your public folder to configure HTTP headers and redirects on Netlify.

40. gatsby-plugin-netlify-cache

One thing Gatsby has already struggled with is Build speed on subsequent builds. This plugin might be for you in that case. Caching your previous builds locally or in the Netlify cache directory, this plugin can speed up your build times.

Other

41. gatsby-plugin-i18n

If you are trying to build a multi-language website with Gatsby? Then, this plugin might be for you. Automatically built different languages for different file paths like src/pages/about.en.js ⇒ /en/about or src/pages/about.jp.js ⇒ /jp/about!

42. gatsby-plugin-scroll-reveal

I talked about this plugin in one of my recent posts on how to get scroll animations done easily in Gatsby! Based on the Sal (Scroll Animation Library) this plugin is fire! 🔥

43. gatsby-plugin-page-progress

Or maybe you fancy a progress indicator for page scrolling at the top of your page? Then this plugin is for you. Based on NProgress.js, it is very handy and easy to set up.

44. gatsby-plugin-prefetch-google-fonts

Is loading Google Fonts in slowing down your site? Maybe you should prefetch them? With this plugin, you can prefetch your fonts and increase performance as opposed to loading web fonts from Google’s external stylesheet.

45. gatsby-transformer-json

Some people working with JSON files as their database, but at last want to access them as JavaScript objects, this plugin is for them. Parse raw JSON strings into JavaScript objects e.g. from JSON files. Also supports arrays of objects and single objects.

46. gatsby-plugin-local-search

In case you want to search your GraphQL layer using a search engine like FlexSearch, you might want to have a look at this plugin!

47. gatsby-plugin-breadcrumb

Do you need the user to know, where there are in the page hierarchy? Do you want them to find their way back? Simply use Breadcrumbs!

48. gatsby-plugin-chatwoot

Chatwoot is a live chat software for websites running on open-source! With a very generous free-tier, this is one of my favorites on this list!

49. gatsby-plugin-preact

One of Gatsby's downsides especially recently has been the Javascript file size it needs to ship with the application. Preact is working to solve that. While Preact doesn’t provide full support for the React ecosystem, it is an intriguing option for Gatsby sites as it saves ~30kb of JavaScript vs. using React!

50. gatsby-plugin-page-creator

This is an official Gatsby plugin, and by default works only with the /pages directory, but what if you want to use another directory for automatically generating pages? Simply add this plugin in your gatsby-config.js, define your custom directory, and let's goo!!

That’s pretty much it!

Thanks so much for reading this far!

And I hope you found a few plugins in this list that you might not have known about yet and are going to try out in the future! There are thousands of different plugins and especially the CMS plugins make Gatsby so powerful to me. Being able to easily access the contents on build time from your CMS without having to go to much length is just so nice.

Let me know in the comments what plugins you like the best!

And feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

The easiest way to do scroll animations in GatsbyJS

Lars — Mon, 04 Jan 2021 13:51:07 +0000

*This post was first published on my blog.

One thing that many of my clients are asking for these days is to include slide-in, pop up, or some other kind of animation on their website.

And you can go ahead and write the CSS yourself or use a more React-oriented solution like react-intersection-observer. But in this example, I would like to show you a shortcut when the budget is tight.

A gatsby community plugin called gatsby-plugin-scroll-reveal.

Under the hood, it uses the Sal (Scroll Animation Library), which focuses on performance and is less than 2.8kb, written in vanilla Javascript. Let's get started!

Note: IE11 is supported

Install and implement the plugin in your gatsby-config.js
How to enable animations in your components

Install and implement the plugin in your gatsby-config.js

The setup is quite simple, as with most Gatsby plugins.

Install gatsby-plugin-scroll-reveal with yarn or npm (depending on your preference):
yarn add gatsby-plugin-scroll-reveal
or
npm install --save gatsby-plugin-scroll-reveal
And add the plugin in your gatsby-config.js:

// in gatsby-config.js
plugins: [
    // ... other plugins
  {
    resolve: `gatsby-plugin-scroll-reveal`,
    options: {
        threshold: 1, // Percentage of an element's area that needs to be visible to launch animation
        once: true, // Defines if animation needs to be launched once
        disable: false, // Flag for disabling animations

        // Advanced Options
        selector: '[data-sal]', // Selector of the elements to be animated
        animateClassName: 'sal-animate', // Class name which triggers animation
        disabledClassName: 'sal-disabled', // Class name which defines the disabled state
        rootMargin: '0% 50%', // Corresponds to root's bounding box margin
        enterEventName: 'sal:in', // Enter event name
        exitEventName: 'sal:out', // Exit event name
    }
  }
];

Note: If you are using Gatsby Plugin Transition Link as well as this plugin, make sure to add this plugin before Gatsby Plugin Transition Link in the config.

Note, that what you see here are the default options for the plugin.

If you don't want to change any of them, you can also include the plugin without options to keep your gatsby-config.js cleaner:

plugins: [
    // ... other plugins
  `gatsby-plugin-scroll-reveal`,
];

How to enable animations in your components

Now, we only need to let gatsby-plugin-scroll-reveal know, which components we would like to animate.

We do this by giving the wrapper div of our component some data attributes.

const YourFunction = () => (
    <YourComponent
      data-sal="slide-up"
        data-sal-duration="2000" // changes duration of the animation (from 200 to 2000 ms)
      data-sal-delay="300" // adds delay to the animation (from 5 to 1000 ms)
      data-sal-easing="ease" // sets easing for the animation (see easings.net for reference)
    >
    {children}
    </YourComponent>
)

For our main data-sal attribute, we have several different options:

fade
slide-up
slide-down
slide-left
slide-right
zoom-in
zoom-out
flip-up
flip-down
flip-left
flip-right

And for data-sal-easing, ****we can choose from several different options as well. You can find a list here at easings.net.

And that concludes this tutorial for today! SAL does all of the heavy lifting for us and with less than 2.8 kb bundle size, there is not much that we can complain about if we are in need of a quick and easy to implement solution.

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

Redirect your users to the right language using session storage (i18n)

Lars — Sat, 02 Jan 2021 13:05:51 +0000

*This post was first published on my blog.

As a freelancer living and working in Japan, I had been asked many times in the past if I could translate my website to Japanese. And so finally, at the beginning of December, I created a Japanese and German version of my so far English website. It was a lot of fun testing different ways of doing this and if you are curious and are thinking of doing something similar yourself, I can highly recommend using Gatsby with Prismic as CMS!

However, after running my new website for a while, I started getting feedback from my users that it would be nice to be redirected to your "correct" language on page load. Instead of having to choose the language yourself after everything is already loaded.

In this tutorial, we will learn how to redirect your users to their "correct" language and then use session storage as a memory, so that the user can still access other languages without being forcibly redirected every time.

Let's get started!

Set up your path structure
Redirect your user on page load
Use session storage as memory

Set up your path structure

Of course, there are many different ways to solve this issue of redirecting your users and in some, you might not even want to use something like session storage as memory. However, in my case I wanted the user to know that there are different languages and then even let the user choose which language to access after he had been redirected once to the browser set default language.

So, the path structure that I chose for my website for that reason looks like this:

"/en/page-one"
"/jp/page-one"
"/de/page-one"

With this type of structure, you can have Gatsby's navigate function simply swap out the language code in the URL. With this out of the way, let's go and write some code.

Redirect your user on page load

*Note, that in this example we use Gatsby's navigate function, but this can quite simply be replaced with their respective counterparts in React or NextJS.

There are 3 parts to this example.

React.useEffect to prevent the language redirect function from looping and only run once on page load
Getting the right URL from the getRedirectLanguage function based on the "navigator" (a browser API to detect the browser's language)
Passing the correct language key into Gatsby's navigate function to replace the current URL.

import React, { useEffect } from "react";
import { navigate } from "gatsby";

const getRedirectLanguage = () => {
  if (typeof navigator === `undefined`) {
    return "en";
  }

  const lang = navigator && navigator.language && navigator.language.split("-")[0];
  if (!lang) return "en";

  switch (lang) {
    case "ja":
      return "ja";
    case "de":
      return "de";
    default:
      return "en";
  }
};

const IndexPage = () => {
  useEffect(() => {
    const urlLang = getRedirectLanguage();

    navigate(`/${urlLang}`);
  }, []);

  return (
        // ... your components here
    );
};

export default IndexPage;

With this, you are already set to redirect your user to the correct language. But what if that user doesn't want to be redirected every single time, but instead wants to use a language switch like this one afterward?

Use session storage as memory

This is where session storage comes in handy. Look at this example where a simple if clause is added in the React.useEffect statement:

useEffect(() => {
  if (!sessionStorage.getItem('loggedin')) {
    sessionStorage.setItem('loggedin', true)

    // => then redirect
    const urlLang = getRedirectLanguage()
    navigate(`/${urlLang}`, { replace: true })
  }
}, [])

With this, if sessionStorage has not been set, the user won't be redirected and can freely browse the website. But if the user comes onto your website for the first time or for the first time in a while, he will be redirected to his or her default browser language. Pretty cool, right?

Of course, this doesn't hold up to some more sophisticated ways of doing this, but for 2 lines of code without using cookies, this saved me a lot of trouble.

And that’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog

How to create a Contact Form with Recaptcha hosted on Netlify

Lars — Tue, 29 Dec 2020 23:33:34 +0000

*This post was first published on my blog.

One of the many handy features of hosting your website on Netlify is the option to have form submissions from your website showing right up in your Netlify dashboard. Or once activated, you can even have email notifications.

With the free tier on Netlify, this is limited to 100 submissions per site/month, but for most of my clients, this is more than enough. However, I have always found the Netlify Docs to this topic quite confusing, and especially the reCaptcha by Netlify hasn't worked for me.

So in this tutorial, we will go through the process of implementing a simple contact form with our own Google reCaptcha on Netlify.

Let's get started!

*As this tutorial is a step by step guide, I recommend you to go through it that way to understand the details, but if you don't mind, you can also find the whole code at the end of this article! This example uses Gatsby and "react-google-recaptcha"

Getting started with a basic contact form
Add the Netlify data attribute to your form element
Get your own reCaptcha key
Add "react-google-recaptcha"
Don't forget to disable submit unless reCaptcha is approved
Add email notifications

Getting started with a basic contact form

To get you started, you will need a basic contact form with a name, email, and message field. And React state will preserve the user's input on change. Notice that in our handleSubmit function we use Gatsby's navigate function to redirect the user to /thank-you. This is the only Gatsby related thing in this example.

import React from 'react'
import { navigate } from 'gatsby'

const ContactForm = () => {
  const [state, setState] = React.useState({})

  const handleChange = e => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const handleSubmit = e => {
    e.preventDefault()
    const form = e.target

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'),
        ...state,
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch(error => alert(error))
  }

  return (
    <form
      name="contact-us"
      method="POST"
      action="/thank-you"
      onSubmit={handleSubmit}
    >
      <noscript>
        <p>This form won’t work with Javascript disabled</p>
      </noscript>
      <div>
        <input
          type="text"
          id="text-input"
          name="name"
          onChange={handleChange}
          required
        />
        <label htmlFor="text-input">Name / Alias</label>
      </div>
      <div>
        <input
          id="email-input"
          type="email"
          name="email"
          placeholder=""
          onChange={handleChange}
          required
        />
        <label htmlFor="email-input">Email</label>
      </div>
      <div>
        <textarea
          id="textarea"
          type="text"
          name="message"
          onChange={handleChange}
          required
        />
        <label htmlFor="textarea">Message</label>
      </div>
      <buttonn type="submit">Submit</button>
    </form>
  )
}

export default ContactForm

Add the Netlify data attribute to your form element

Now for the contact form to show in your Netlify dashboard, you will have to include the Netlify data attribute. This way Netlify can know during deployment that there is a form it needs to pay attention to.

// ... imports here

const ContactForm = () => {

    // ... all the previous code

  return (
    <form
      name="contact-us"
      method="POST"
      data-netlify="true"              // the Netlify data attribute
      action="/thank-you"
      onSubmit={handleSubmit}
    >
         {/* ... all the inputs and submit button here */}
    </form>
  )
}

export default ContactForm

Get your own reCaptcha key

Before we get to implement our reCaptcha component in our contact form, we will have to get our free Recaptcha key from Google. Conveniently, as usual, anybody with a Google account can create one here.

Note here: Make sure to check reCaptcha v2 and "I'm not a robot" tickbox, as this is what we use in our example.

If you want to use the invisible reCaptcha badge, you can find the documentation here, or for reCaptcha v3 you can check out react-google-recaptcha-v3.

Once you have registered, you will see your pair of reCaptcha keys:

In our case, we will only need the SITE KEY!

So go ahead and copy your key. And since it is a public key, we can safely create a variable in our component like so:

// ... imports here

const RECAPTCHA_KEY = '6LdGSewdkljsdakldasdklj3e2asddaDDS9083'

const ContactForm = () => {
  // ... previous code here

    return (
        // ... previous code here
    )
}

export default ContactForm

Add "react-google-recaptcha"

With our RECAPTCHA_KEY at hand, we can now install the react-google-recaptcha package, which will handle most of the reCaptcha stuff for us.

yarn add react-google-recaptcha

npm install react-google-recaptcha

But to ensure that the reCaptcha talks to our contact form and submissions won't be submitted without reCaptcha's approval, we have to write a little more code on our own.

I'll give you the pieces of code first and afterward, you will find the example with the new parts implemented.

Our Recaptcha component:

import Recaptcha from 'react-google-recaptcha'

// ... stuff in between

return (
    // ... stuff
    <Recaptcha
      ref={recaptchaRef}
      sitekey={RECAPTCHA_KEY}
      size="normal"
      id="recaptcha-google"
    />
)

Netlify Recatpcha data attribute:

data-netlify-recaptcha="true"   // new Netlify data attribute

The recaptchaRef:

const recaptchaRef = React.createRef() // new Ref for reCaptcha

The new handleSubmit function including reCaptchaValue.

const handleSubmit = e => {
  e.preventDefault()
  const form = e.target
  const recaptchaValue = recaptchaRef.current.getValue()

  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: encode({
      'form-name': form.getAttribute('name'),
      'g-recaptcha-response': recaptchaValue,
      ...state,
    }),
  })
  .then(() => navigate(form.getAttribute('action')))
  .catch(error => alert(error))
}

And here the whole example:

// ... other imports here
import Recaptcha from 'react-google-recaptcha'

const RECAPTCHA_KEY = '6LdGSewdkljsdakldasdkljasdda'

const ContactForm = () => {
  const [state, setState] = React.useState({})

  const recaptchaRef = React.createRef() // new Ref for reCaptcha

  const handleChange = e => ...

  const handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    const recaptchaValue = recaptchaRef.current.getValue()

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'),
        'g-recaptcha-response': recaptchaValue,
        ...state,
      }),
    })
    .then(() => navigate(form.getAttribute('action')))
    .catch(error => alert(error))
  }

  return (
    <form
      name="contact-us"
      method="POST"
      data-netlify="true"
      data-netlify-recaptcha="true"   // new Netlify data attribute regarding recaptcha submissions
      action="/thank-you"
      onSubmit={handleSubmit}
    >
      {/* ... all the other inputs here */}

      <Recaptcha
        ref={recaptchaRef}
        sitekey={RECAPTCHA_KEY}
        size="normal"
        id="recaptcha-google"
      />
      <button type="submit">Submit</button>
    </form>
  )
}

export default ContactForm

Don't forget to disable submit unless reCaptcha is approved

Now after I had come to this point, I noticed that even without submitting reCaptcha, the user would be able to press the submit button and get past the check. This was no good. So I need to ensure that the button was disabled as long as the user hadn't pressed the reCaptcha check.
Luckily react-google-recaptcha provides us with an onChange function that allows you to set a React state for the submit button, like so:

// ... imports here

const ContactForm = () => {
    // ... other React State and Ref

    // With this the button is disabled by default, but on Recaptcha change, the form can be submitted
  const [buttonDisabled, setButtonDisabled] = React.useState(true)

  // ... previous code

  return (
    <form  {/* ... attributes here */}>
      <Recaptcha
        ref={recaptchaRef}
        sitekey={RECAPTCHA_KEY}
        size="normal"
        id="recaptcha-google"
        onChange={() => setButtonDisabled(false)} // disable the disabled button!
      />
      <button type="submit" disabled={buttonDisabled}>Submit</button>
    </form>
  )
}

export default ContactForm

Now on top of this, you might want to consider adding some CSS to let the user know when the button is disabled:

button[disabled] {
  cursor: not-allowed;
}

Add email notifications

Last, but not least, we probably don't want to randomly check our Netlify dashboard for submissions, but instead, get automatic email notifications.

For this login to your Netlify dashboard, and in your site settings under Form and Form notification, you can set your preferences.

You can find below the final code and with some styling, you have yourself a free and safe, working contact form on Netlify!

Final result:

import React from 'react'
import { navigate } from 'gatsby'
import Recaptcha from 'react-google-recaptcha'

const RECAPTCHA_KEY = '6LdGSewdkljsdakldasdkljasdda'

const ContactForm = () => {
  const [state, setState] = React.useState({})
  const recaptchaRef = React.createRef()
  const [buttonDisabled, setButtonDisabled] = React.useState(true)

  const handleChange = e => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    const recaptchaValue = recaptchaRef.current.getValue()

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'),
        'g-recaptcha-response': recaptchaValue,
        ...state,
      }),
    })
    .then(() => navigate(form.getAttribute('action')))
    .catch(error => alert(error))
  }

  return (
    <form
      name="contact-us"
      method="POST"
      data-netlify="true"
      data-netlify-recaptcha="true"
      action="/thank-you"
      onSubmit={handleSubmit}
    >
      <noscript>
        <p>This form won’t work with Javascript disabled</p>
      </noscript>
      <div>
        <input
          type="text"
          id="text-input"
          name="name"
          onChange={handleChange}
          required
        />
        <label htmlFor="text-input">Name / Alias</label>
      </div>
      <div>
        <input
          id="email-input"
          type="email"
          name="email"
          placeholder=""
          onChange={handleChange}
          required
        />
        <label htmlFor="email-input">Email</label>
      </div>
      <div>
        <textarea
          id="textarea"
          type="text"
          name="message"
          onChange={handleChange}
          required
        />
        <label htmlFor="textarea">Message</label>
      </div>
      {/* Recaptcha */}
      <Recaptcha
        ref={recaptchaRef}
        sitekey={RECAPTCHA_KEY}
        size="normal"
        id="recaptcha-google"
        onChange={() => setButtonDisabled(false)}
      />
      <button type="submit" disabled={buttonDisabled}>Submit</button>
    </form>
  )
}

export default ContactForm

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

How to use TypographyJS in NetlifyCMS Previews

Lars — Sat, 26 Dec 2020 13:24:16 +0000

*This post was first published on my blog.

Today is a little different from the usual longer posts and lot more niche. This is about an issue that I ran into recently and thought it would have been nice if somebody had written about it. Let me explain!

About NetlifyCMS and Typography.js
Always read your documentation
The solution

About NetlifyCMS and Typography.js

As a big advocate of the JAMstack and in particular Gatsby, I have tried out numerous different CMS and they all have their use cases, but one I often come back to for smaller projects is NetlifyCMS.

It's free for my use cases and just so easy to use that once set up, it's very easy to teach my clients how to log in and change content on their own.

There is a lot to say about NetlifyCMS, but that is not what this post is about. This post is about one specific problem that I ran into while I was working on a project recently.

I had started working on a Gatsby site with Typography.js & NetlifyCMS. Not thinking much about it in the beginning.

Typography.js is quite a powerful tool to set up your typography and font styling, so it looks nice and consistent throughout the project. (You can learn more about it here) However, Typography.js uses JavaScript to inject the styling into your project. Once I had started my NetlifyCMS and started preparing custom previews for some of my pages, I realised:

None of the font styles were applied to the previews within the CMS!

With CSS files you can simply import them to your preview JSX file, but how would I have to go about injecting Typography.js not only into one custom preview but into all of them?

Always read your documentation

First I started reading through the NetlifyCMS documentation to see if there was a more general way to add styling sheets to the CMS instead of manually importing them to each custom preview. And lo and behold, there was! Here is a snippet from the documentation.

// index.html
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
<script>
  CMS.registerPreviewStyle("/example.css");
</script>

But this didn't completely solve my problem and so I started wondering, maybe there was a way to get the CSS styles from Typography.js. Because if you think about it, it ends up being injected as CSS later on anyway, right?

And I was right. After going through the documentation, Typography.js had a function to output the CSS styling as a string. Just what I needed.

import Typography from 'typography'

const typography = new Typography({
  baseFontSize: '18px',
  baseLineHeight: 1.666,
  headerFontFamily: ['Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
  bodyFontFamily: ['Georgia', 'serif'],
  // See below for the full list of options.
})

// Output CSS as string.
export const typographyCSS = typography.toString()

The Solution

I have always loved how coding is solving one problem after another and this was exactly that. Now that I knew that I could output my typography styling as a CSS string, I only had to register that styling inside the CMS config file. Here we go:

import { typographyCSS } from '../utils/typography'

CMS.registerPreviewStyle(typographyCSS, { raw: true })

It's a CSS string though not a file

However, you might have noticed the { raw: true }, the second argument in our registerPreviewStyle function. This is because the function usually expects a CSS file instead of a CSS string. We can fix this by setting this second argument. You can read more about it here!

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!

How to manage multiple GitHub accounts on your local machine

Lars — Wed, 23 Dec 2020 08:49:45 +0000

*This post was first published on my blog.

One issue that I have run into multiple times in the past is how to manage multiple GitHub accounts on my local machine. Whether you are working on git repositories from multiple clients or you are switching back and forth between personal and the company accounts, almost every developer will eventually encounter this problem. Also for me, I end up looking it up every time I set up a new machine 🤐

So here is a quick reminder of how to go about this, because it does need a little setup to work nicely.

Getting Started
- Use SSH keys instead of HTTPS
- Understand the structure of SSH on your local machine
Set up your local SSH config
- Generate SSH keys
- Create a config to manage multiple keys
- Register our ssh-agent
- Add the SSH keys to your GitHub accounts
Clone your repo

Getting Started

Use SSH instead of HTTPS

To set up different accounts on your local machine, we will be using SSH keys instead of the usual HTTPS connection. This has its advantages and disadvantages, and GitHub occasionally changes its opinion on what it recommends best, but here is a quote from the GitHub docs on why we will use SSH keys in this case.

Using the SSH protocol, you can connect and authenticate to remote servers and services. With SSH keys, you can connect to GitHub without supplying your username and personal access token at each visit.

Github | About SSH

Perfect for us. We don't want to reauthenticate every time and instead commit changes to our repositories as if we never switched accounts. But how do we set that up?

A quick note here: if you would like to learn more about the differences between HTTPS and SSH, there is an extensive write-up in the GitHub docs! **It's worth checking out!**

Understand the structure of SSH on your local machine

To put it simply: the way this will work is to create unique keys (SSH keys) on your local machine that we will then add to your Github accounts. GitHub won't have to look up your login credentials every time then and instead can verify you by your SSH key. Sound pretty good, right?

But where do the keys get stored on your local machine?

In a folder called ~/.ssh. This is where our setup will happen. Instead of having to set up configuration every time we clone from one of our accounts, once we have made our SSH setup in this folder, we just clone and commit to repositories from different accounts without ever thinking about having to switch accounts on your local machine!

Let's get started!

Set up your local SSH config

If you were to look for your ~/.ssh folder, you might notice that it doesn't exist yet, if for example you never created any keys previously. But instead of creating the folder now ourselves, let our machine do that for us. We start by creating our first key.

Generate SSH keys

When we create SSH keys on our machine, it automatically generates some files and configurations for us. In this tutorial, we will assume you haven't set up any SSH keys yet.

We get started with the command that will generate the first key:

ssh-keygen -t rsa

You will be prompted and asked to enter the folder/file name you want to go with. Press ENTER to go with the default location and generate the ~/.ssh folder.

You now have a ~/.ssh folder, with the just created SSH key. Let's use this default key for our personal account.

Next up is creating a key for our work account. (You can repeat this process for as many keys as necessary) And for this we will have to specify the key with some flags. "-C" adds a comment/tag and -f specifies the name of the file we want to save the key to.

Go into your ~/.ssh folder:

cd ~/.ssh

And create your next key with custom flags.

ssh-keygen -t rsa -C "email@githubworkemail.com" -f "id_rsa_workname"

To dive deeper, here is a list of the different flags you can add:

List of flags for SSH-keygen

To double-check that all of your keys are there, type:

ls ~/.ssh

Create a config to manage multiple keys

Now that we have created our keys, we need a configuration file that knows which key to use when we access a repo of one of our GitHub accounts.

For this inside our ~/.ssh folder, we create and open a config file.

touch ~/.ssh/config && code ~/.ssh/config

In here we define our different accounts:

# personal account
Host github.com
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa

# work account 1
Host github.com-workname
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_workname

Two things are important to note here:

The host, which we will need to remember later when we get our SSH links from GitHub.

Host github.com-workname

and the identity file, to make sure it points to the correct SSH key that we created before.

IdentityFile ~/.ssh/id_rsa_workname

Register our ssh-agent

Now to keep track of our different SSH keys and their configurations, there is a service called "ssh-agent". It is essentially the key manager for SSH.

For our purposes, we need to know 3 different commands.

ssh-add -D              // removes all currently registered ssh keys from the ssh-agent
ssh-add -l              // lists all currently in the ssh-agent registered ssh keys
ssh-add ~/.ssh/id_rsa   // adds the specified key to the ssh-agent

If you haven't configured any keys previously your ssh-agent has most likely not registered any keys, but let's be completely sure and run:

ssh-add -D              // removes all currently registered ssh keys from the ssh-agent

Next up is registering our keys with their ids:

ssh-add ~/.ssh/id_rsa && ssh-add ~/.ssh/id_rsa_workname

Done! With this, our local machine is set up and all that is left to do is to register our keys in GitHub and clone our first repo!

Add the SSH keys to your GitHub accounts

There are two steps to this. First, copy the correct key and second, add the key in your dashboard on GitHub.

Copying the correct key.
```
pbcopy < ~/.ssh/id_rsa.pub
```
This will copy your public key to your clipboard
Add the key in your dashboard at https://github.com/settings/keys.

Login into your work GitHub account and repeat this process with your work SSH key.

Clone your repo

Important to note!
The reason why your computer knows which SSH key to use, is because we defined the URL in our config file.

This means that for our work repositories, when we clone a repo from the account, like so:

We have to change the URL from:

git@github.com:workname/repo.git ⇒ git@github.com-workname:workname/repo.git

The same URL we have previously defined in our ~/.ssh/config file.

**Host github.com-workname  // HERE**
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_workname

With this, you can now clone your repositories and get going! Back to coding, I'd say!

That’s it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or on Twitter 🙂

DEV Community: Lars

The Definitive Guide to Netlify Serverless Functions

Table Of Contents

What are serverless functions?

What can you do with serverless functions?

Getting started with Neltlify Functions

Prerequisites

Set up your folder structure

Create a serverless function

Trigger a serverless function and receive a response

That’s pretty much it!

The best way to load and use Google Fonts with React, Gatsby and NextJS

Table Of Contents

How can I check whether my fonts affect my website's performance?

FontSource (Self-host Google Fonts in neatly bundled NPM packages)

1. Add the package to your project

2. Import the font subsets necessary to your project in JavaScript or SCSS.

3. Define the font in your CSS, CSS-in-JS etc.

That’s pretty much it!

Top 10 resources to get better at CSS and become a better front-end developer 👨‍🎨👨‍💻

Table Of Contents

1. Frontend Mentor

2. 100 Days of CSS (CSS Challenge)

3. Front-End Challenges Club

4. Daily UI

5. CSS Battle

6. Codier.io

7. Build something you found on Dribbble

8. 30 Days of CSS Girls

9. Daily CSS Design

10. Ace Front End

That’s pretty much it!

Top 5 headless CMS and their pros and cons (Gatsby JS edition)

Table Of Contents

Contentful

Pros:

Cons:

WordPress

Pros:

Cons:

Prismic

Pros:

Cons:

Netlify CMS

Pros:

Cons:

Strapi

Pros:

Cons:

That’s pretty much it!

React and Gatsby JS got me started 🚀🔥 But what’s next?

Table Of Contents

How I got started

Getting into React

Getting into Gatsby JS

The benefits of Gatsby JS

Why you also might want to move on

What's next?

That’s pretty much it!

Use Javascript's Fetch API with async/await to fetch your Instagram feed in React

Table Of Contents

Set up your React Component

Fetch your Instagram posts with Async/Await

Display your posts and show likes on hover

Implement a loading state while fetching posts

The final result

That’s pretty much it!

Top 50 Gatsby plugins you're going to love 🔥👨‍💻

Table Of Contents

Styling

1. gatsby-plugin-styled-components

2. gatsby-plugin-emotion

3. gatsby-plugin-typography

4. gatsby-plugin-sass

5. gatsby-plugin-postcss

6. gatsby-plugin-purgecss

7. gatsby-plugin-material-ui

8. gatsby-plugin-chakra-ui

9. gatsby-plugin-antd

Markdown