Learn Netlify, Nuxt and Screen-reader

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


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

Develop Accessible Web Apps with React

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

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

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

Up and Running with Gatsby

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

This collection is a sequel to the [Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb) collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

* Fauna vs DynamoDB and when to use each
* Setting up AWS accounts
* Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
* Converting our Netlify Functions deployment to a Serverless Framework deployment
* Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.



FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create a News App with Vue.js and Nuxt

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Deploy a Serverless API React Application with TypeScript

When you are first building your blog site, it can be difficult to choose what content management system you want to use, and choosing a new framework can be daunting. They can be overwhelming and have a large learning curve.

Open up your knowledge of a powerful Nuxt module with Nuxt Content! Nuxt has a low barrier of entry and you don't have to fight with a content management system or API keys. 

In this course, you will learn how to create your own blog with just Nuxt and a folder of markdown files. Ben will take you from creating your Nuxt project from scratch all the way to deploying your digital garden on Netlify. 

Ben Hong is one of the core team members over at Vue.js and has developed this course to give you a concrete understanding of Nuxt Content and how to build your blog efficiently. 

Build a Digital Garden with Nuxt and Nuxt Content Module

Before each page loads, Nuxt supports pre-fetching data to render what you need on the server. This lesson walks you through using Nuxt's `fetch` to load data then save it in the Vuex store.

Load Data from APIs with Nuxt and Vuex

screen-reader

There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

The Vue-CLI helps you to quickly and easily setup new Vue projects. Nuxt.js is a library that helps you build server-rendered Vue.js applications. This lesson shows you how to use the nuxt/starter template with the Vue-CLI to quickly start a new project.

Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

Most applications require state to be shared across the application. In the case of Nuxt, you'll share state across pages. Nuxt integrates easily with Vuex by simply adding JavaScript files in the `store` directory. This lesson walks you through setting up a basic store and using it in your template

Manage Vue.js State with Vuex and Nuxt

You commit changes to state in Vuex using defined `mutations`. You can easily access these state mutations in your template using `mapMutations`. This lesson shows you have to wire together your Vue.js template with your Vuex store using mutations and mapMutations.

Update Vuex State with Mutations and MapMutations in Vue.js

You'll notice soon after working with Nuxt that you'll begin to see your styles flash in during each page load. This is due to the development mode of Nuxt where it injects the styles into the page after the initial page render. You can rest assured that when you use `nuxt build`, your styles will render before the page loads.

Understand the Flash of Unstyled Content in Nuxt

Because Nuxt renders pages on the server, you should use the `nuxt-link` components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using `nuxt-link` and `isClient` to navigate and avoid reloading data.

Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

You can isolate parts of templates you want to re-use into components, but you can also reuse those components across pages using layouts. This lesson walks you through creation a navigation component then extracting it out into the default layout.

Build a Navigation Component in Vue.js and Use in a Nuxt Layout

You can easily add CSS libraries to Nuxt using `yarn` or `npm` to install them, then simply adding them to the `nuxt.config.js` so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your `nuxt.config.js`.

Add CSS Libraries to Nuxt

In a server-rendered application, if you attempt to load data before the page renders and the data fails to load, your application will not run unless you handle the error properly. This lesson walks you through the options of handling load errors so that your users will always have a good experience.

Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

You often use the same data in different ways across pages. This lesson walks you through setting up multiple pages, retrieving the same data, then displaying it for each page's use-case.

Search

Search Results