Resources for Web Developers in 2022

The difficulty of managing state is one of the primary reasons our applications become so complex. We try and manage this complexity with a lot of booleans, somewhat semantic variables like `isLoading`, `wasFetched`, and `hasError`, and over-engineered systems that are _still_ full of bugs. Surely, there's a better way.

That better way is *state machines*.

State machines formalize how we define and transition through the states of our application and give us ultimate control of the most complex parts of our apps.

In this course, we will explore the problems state machines purport to solve, like boolean explosion. We'll try to solve it our own way first, get so far, and then demonstrate how state machines get us all the way. After that, we'll dive into the XState library, JavaScript's premiere state machine library, to learn its API and how to use it to solve our problems.

By the time you're done taking this course, you should have a solid education about state machines and be able to start applying them.

Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.

xstate

Introduction to State Machines Using XState

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

Today, you can't do anything in JavaScript without bumping into a CLI. 

Want to install a library? `yarn` add it. 
Want a React app? `create-react-app`. 
Want to format your JavaScript? `prettier --write`. 
Want your types checked? `tsc`. 
Bundling? Pick from `webpack`, `rollup`, or `parcel`. 
Deploying? `now` or `netlify deploy`. 

CLI's are everywhere, and even if you don't write them, sooner or later you'll have to debug them.

This workshop serves as a comprehensive survey of the state of the art of CLI tooling for everyone looking to make an impact in open source, across their company, and even in their own productivity.

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/build-custom-cli-tooling-with-oclif-typescript-notes).

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Custom Command Line Interface (CLI) Tooling with oclif and TypeScript

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

Meet Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Tailwind provides us with highly compassable utility classes but leaves the design specification completely up to the user to maintain that custom look and feel to your app. 

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Introduction to Tailwind and the Utility First Workflow

Using immutable data structures provides many benefits, including making your code easier to reason about and less prone to bugs.

However, since JavaScript doesn't include support for immutable data structures out of the box, you need to use a third party library. But which one to choose?

In this self-paced workshop, Immer's creator Michel Westrate will guide you through the creation of a multi-user Gift Tracking app.

You'll learn the basics of using Immer to handle immutable state updates, then go further into change distribution and implementing an undo/redo.

After this workshop, you'll be ready to leverage immutable data structures in your own applications!

Immutable JavaScript Data Structures with Immer

Before we dive deep into the pattern of composing callbacks and closures, we need to take start with the definitions and basic building blocks that we will be using for the rest of the course. 

You'll be able to answer questions like:

- What is a Closure?
- What is a Callback?
- Why does Callback Hell happen and how can we handle it?

We will see that by establishing a contract between functions and holding to the pattern that is established, you will have gained a lot of power and flexibility in writing reusable, robust functions.

**You're in Section 01 of [Composing Closures and Callbacks in JavaScript](https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223).**

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Introduction to Callbacks, Broadcasters, and Listeners

GraphQL brings joy to using APIs. Even though it's based on a type system, GraphQL in many ways is more flexible than REST.

But the flexibility that makes GraphQL a joy to work with can have its downsides if you aren't careful.

Schema design is an area where one small oversight at the beginning can get you stuck having to deal with weird naming, bloated duplicates, and other annoying workarounds.

It doesn't have to be like this!

Nik Graf has extensive experience designing GraphQL schemas, for a variety of business applications.

In this course, Nik has prepared several examples following different design patterns. Through exploration and comparison, you'll come away with actionable knowledge for designing and extending schemas.

Follow Nik, and avoid making Schema mistakes that will come back to bite you later.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Designing GraphQL Schemas

🚧 CONCURRENT MODE IS EXPERIMENTAL! 🚧

Michael Chan has years of experience with React, and in this course, he will guide you through the ins-and-outs of working with Suspense. 

React Suspense gives us a new way of describing with fine-grain controls how users experience should look based on data we have or don’t have.

This will change the way you build React applications forever and this is the opportunity to get an early look and head start!





Build an App with React Suspense

Our applications have lots of states that they can be in.

We usually remember “Loading” and “Successful”. If we’re having a particularly good day, we’ll get “Error” handled as well.

But what about other states that our application can be in?

Things like “Haven’t requested yet” or “The request was successful but there isn’t any data for us to show”.

It’s frustrating to think you’re “done” and then an edge case shows up (and this cycle repeats at least one more time).

Fed up with forgetting to handle the edge cases that appear when developing UIs, Isaac Mann started looking for a solution.

The answer? State machines.

In this course, Isaac will teach you how to plan and visualize your application’s states and the transitions between them through the creation of a React & XState powered Star Wars quiz app.

Construct Sturdy UIs with XState

Now that we covered fundamentals, we're going to design and implement common components that you will see in the wild. 

We'll start with a basic Vue.js application and some hard-coded data that will be displayed within the application.


Design and Implement Common Tailwind Components

There are 1000s of plugins and themes in the Gatsby eco system, which is amazing but introduces the problem of deciding which to use to accomplish the feature you *actually* want to build. 

Analysis paralysis is real.

Enter: Gatsbyjs Recipes 

Gatsbyjs Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up Typescript, and many more.

With the release of this new feature, Gatsby has created 11 official recipes that you can explore including: ThemeUI, Sass, Cypress, animated page transitions, and persistent layout components.

In this collection, you will learn how to:

- Set up Gatsby to use Recipes
- Create a multi-step Recipe
- Install NPM packages
- Configure Gatsby Plugins
- Create Custom files with Recipes

Getting Started with Gatsbyjs recipes

The Navbar is a common component you will find yourself styling in almost any application. 

In this course, we'll style a Navbar for a mobile view with a logo and toggleable hamburger button that will contain nav links.

After building up the mobile view, we will refactor the navbar to be responsive by removing the hamburger menu from the navbar and replacing that with the links directly inline within the Navbar

Build a Responsive Navbar with Tailwind

Can you center an HTML element? Do you know how the box model works? CSS is a fundamental language imperative to working with websites. It controls all the visual aspects of a site, from colors to layouts.

Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image. Let’s walk through specificity, fonts, the box model, margins, padding, positioning, and much more!

Cascading Style Sheets bring order and beauty to our applications.

CSS Fundamentals 

It all starts with syntax. From there, once you’ve got the concepts down, you can move into using a framework where you figure out how to make things “just work”.

Everything is great, until it’s not.

If someone put you on the spot right now and asked you to explain `this`, would they like your answer?

What about prototypal inheritance or coercion?

In this workshop, you’ll be taking things to the next level, shining a light into “black-box” concepts like prototypes, the `this` keyword, and what primitive types are.

Tyler will walk you through each concept, and build your understanding through examples in the areas you need to know.

Advanced JavaScript Foundations

Rust is a modern language that is close to the metal. It's got the performance of C, but with a more friendly syntax and community.

It's also memory safe, and ensures your applications are bug free by catching errors at compile time instead of runtime.

These features make Rust a great choice for developing code for embedded systems, web servers, and CLI apps. You can even compile Rust into WebAssembly in order to run it in-browser!

But as the saying goes, "before you learn to run, you must learn to walk".

In this course, you will write your first Rust application.

Starting from “Hello World” you’ll quickly move on to learning about Rust’s types, configuration files, and the `cargo` package manager along with classics like functions, loops, and handling user input.

More Rust-specific concepts like macros and pattern matching will also be introduced.

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/write-your-first-program-with-the-rust-language).

Next Steps: [Basic Types in Rust](https://egghead.io/playlists/data-types-in-rust-ab72)

Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

rust

Write Your First Program with the Rust Language

A menu dropdown is a common component that you will build and style in any application.

In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework. 

After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.

Build and Style a Dropdown in Tailwind

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

Ever built a website? Did it have more than one page?

If it did, you learned quickly how essential routing is to the success of your project. And in so many frameworks routing is a painful and complex thing to learn.

But not in Vue!

Vue has an incredibly clean and powerful library called vue-router that takes care of everything you could need.

In this course, we'll cover what you need to know to get started with vue-router.

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.

A Journey with Vue-Router

React got that name for a reason. It’s a component-based JavaScript library that renders smartly and can seriously simplify your work.

This course is for [React](/q/react) newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away.

Each lesson in this 28-part course is a single `index.html` file. This keeps your focus on learning React, with no distractions. We’ll start with a blank file and add more complexity as we go along, wrapping the course with a lesson on how to move into a more production-ready development environment—and even deploy your app to a great service like [Netlify](/q/netlify).

You’ll build a solid understanding so when you come across [JavaScript](/q/javascript) challenges down the road, you’ll know how to…react.

The Beginner's Guide to React

(This collection is still WIP)

Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

Prisma is a next-generation open-source ORM For Node.js and TypeScript that helps developers build faster and make fewer errors.

It supports the following databases: PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, and more recently, MongoDB (Preview).

Prisma provides a complete toolkit:

- Prisma Client: Auto-generated and type-safe database client
- Prisma Migrate: Declarative data modeling and customizable migrations
- Prisma Studio: Modern UI to view and edit data
