 Resources from Jason Lengstorf in 2021

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

Sell Products Using Stripe Checkout and Netlify Functions

In this workshop, Jason Lengstorf will take you from an empty project folder all the way through deployment of a Twilio-powered video chat app built on Gatsby.

Along the way, you’ll learn powerful concepts like dynamic route handling in Gatsby, form management with React Hooks, writing custom React Hooks, context management and reducers in React, handling real-time interactions in a React app, creating serverless functions in Twilio, and setting up a Twilio account to support realtime video calling.

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Build a Video Chat App with Twilio and Gatsby

Gatsby Themes are the next iteration of web development. They take all the good things about Gatsby and make them even more reusable and extendable. Themes are composable chunks of fully functional websites-- not just visual aspects.

Because they’re composable, you can have multiple themes on a single site. This lets you pick the right eCommerce theme, with whatever backing engine you want. You can then install whatever blog theme you want-- Wordpress, Contentful, etc. and you can customize them both. It's up to you!

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Gatsby Theme Authoring

WordPress is the most popular content management system in the world. Content creators are able to easily customize nearly everything about WordPress from their admin dashboard, providing a really pleasant content management experience. Using Gatsby as a frontend for your WordPress sites makes the experience of developing the site and visiting the site just as pleasant.

Moving your WordPress frontend to the Jamstack means you keep the convenience of using WordPress’s custom backend for creating and editing content while _also_ avoiding some of WordPress’s biggest downsides.

Historically, WordPress has many downsides, including:

- **Security** — because it’s the most popular content management system in the world, hackers work hard to find and exploit security holes in WordPress sites.
Performance — through a combination of legacy code, community plugins, and other challenges, WordPress sites can easily become slow to load.
- **Scale** — if a WordPress site suddenly becomes very popular (a great thing!) it can overload servers and cause the website to go down (a not-so-great thing!) without complex scaling techniques.
- **Cost** — a WordPress site requires always-on hosting, and specialized hosting can be expensive. Adding support to handle massive scale adds significant cost, too.

Switching to the Jamstack helps mitigate — and even eliminate! — these downsides:

- **More secure** — Jamstack sites don’t connect to the server or database after they’re built. This makes it much harder to hack the site.
- **More performant** — by doing less work for each request and leveraging modern tools, Jamstack sites tend to outperform WordPress sites out of the box, and can be very fast with a bit of extra effort.
- **More resilient** — because Jamstack sites ship to a content delivery network (CDN) by default, a sudden surge of site visitors won’t take your site down.
- **More affordable** — many Jamstack hosting solutions have generous free tiers that are plenty for most small to medium sites, and upgraded accounts typically cost less than specialized WordPress hosting.

Switching to the Jamstack gives you all of the benefits of WordPress and helps you avoid the downsides!

In this collection, we walk through the full process of migrating a WordPress site to the Jamstack, which keeps all the flexibility and power of WordPress’s admin dashboards while adding all the benefits of the Jamstack.

Migrate a WordPress Site to the Jamstack Using Gatsby

Why does Gatsby use GraphQL? In this series you’ll learn how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

Bite-size video tutorials for badass web developers.

egghead

Why Gatsby Uses GraphQL

Gatsby’s `Link` component is a powerful way to improve the user experience and simplify the development workflow when building Gatsby sites. It makes navigating between internal links instantaneous, creating an app-like feel, and provides helpers for various common use cases.

In this playlist, you’ll learn:

- Why and how to use Gatsby’s `Link` component for internal link navigation
- How to set styles for the currently active link
- How to apply active styles to parent pages and other partially matching URLs
- How to send state information in the props of the `Link` target
- How to replace items in the navigation history
- How to navigate programmatically using the `navigate` helper function

Use Gatsby’s Link Component to Improve Site Performance and Simplify Site Development

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this lesson, learn how to use StaticQuery to load data directly in the components that use them, making your Gatsby sites easier to understand and maintain. We’ll refactor a simplified Header component to eliminate prop drilling, loading the data with a GraphQL query right in the Header component instead.

Load Data using GraphQL Queries Directly in a Gatsby v2 Component with StaticQuery

Learn the basics of Gatsby’s command line interface (CLI). You'll learn how to:

- Use the Gatsby CLI without installing any global dependencies
- Create a new Gatsby site from the command line
- Start a Gatsby site in development mode
- Create a production build of a Gatsby site
- Serve the production build for local testing
- Explore the Gatsby CLI to learn more

Quick Start with Gatsby: Create, Develop, and Build Gatsby Sites From the Command Line

For local navigation on Gatsby sites, the `Link` component provides a built-in solution for improving the performance and user experience on your site. The video will teach you:

- When the `Link` component should be used
- How to use Gatsby’s `Link` component

Why and How to Use Gatsby’s Link Component

A common best practice is to provide a visual indication for which page is currently being viewed. This video will show you how to take advantage of the `activeStyle` prop of Gatsby’s `Link` component to customize the look of the currently active link.

Add Custom Styles for the Active Link Using Gatsby’s Link Component

When viewing pages that partially match the `to` prop in a Gatsby `Link` component, it’s often desirable to show that page as “active”, such as when viewing an anchor link to a heading on the page, or showing the “blog” link as active when viewing `/blog/my-great-post/`. This video will show you how to pass a function to `getProps` and identify partial matches using the `isPartiallyCurrent` prop.

Customize Styles for Partially Matched URLs With Gatsby’s Link Component

In some cases, navigating to a new page should replace the current page, meaning the “back” button will skip the current URL. For example, if a page leads to an interstitial screen, such as a confirmation page, it may be desirable to skip that confirmation if the user clicks the “back” button after confirming. In this video, you’ll learn how Gatsby’s `Link` component manages replacing navigation history using the `replace` prop.

Replace Navigation History Items with Gatsby’s Link Component

If a link should include some kind of state information, such as which link was clicked, it’s possible to send that along using Gatsby’s `Link` component with the `state` prop. In this video, learn how to use the `state` prop to pass information between pages.

Include Information About State in Navigation With Gatsby’s Link Component

In cases where a `Link` doesn’t make sense, but you still need to navigate to a new page — such as a form submission — Gatsby provides a `navigate` helper for programmatic navigation. In this video, learn how to:

- Programmatically navigate to a new page using Gatsby’s `navigate` helper
- Send state information along with the navigation request

Navigate to a New Page Programmatically in Gatsby

Why does Gatsby use GraphQL? This is part 1 of a 4-part series that shows how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

Let's create a page using React component templates and no data at all.

Create a Gatsby Page Without Any Data

Why does Gatsby use GraphQL? This is part 2 of a 4-part series that shows how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

In this video, you’ll create a page by hard-coding data into the context, then accessing it via the `pageContext` prop that Gatsby will pass to the template React component.

Create a Gatsby Page With Hard-Coded Data

Why does Gatsby use GraphQL? This is part 3 of a 4-part series that shows how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

In this video, you’ll create product pages from a JSON file and add images to the pages. This video starts to show the complexity of managing complex data.

Create Pages from JSON With Images

Why does Gatsby use GraphQL? This is part 4 of a 5-part series that shows how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

In this video, you’ll add product data from a JSON file and corresponding images to Gatsby’s GraphQL data layer.

Make Data Queryable in GraphQL With Gatsby

Why does Gatsby use GraphQL? This is part 5 of a 5-part series that shows how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

In this video, you’ll generate pages with optimized images using GraphQL queries.

Create Pages in Gatsby Using GraphQL

Learn how to structure folders and configure Yarn workspaces to make the development of Gatsby themes easy.

In this lesson, we'll create two workspaces: `gatsby-theme-events` and `site`.

We will see how each workspace can be run separately as well as one depending on the other. In this case, `gatsby-theme-events` will be a dependency in our `site` project

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).




Topics

Instructors

Content Type

Free or Pro