Resources for Web Developers in 2022

JavaScript is full of inconsistent APIs. Wrapping those APIs in functions allows you to have full control over how to configure them and make them more reusable.

This becomes even more beneficial when dealing with the async nature of JavaScript. You'll learn how a broadcaster is a function that wraps another function (which we call listeners) and modifies the behavior. We will build up this pattern in a way that allows you to compose broadcasters together making your code more reusable.

**You're in Section 02 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

Establish Callback and Closure patterns Around Async Browser Behaviors

Learn to use some of the tips and tricks that can help you write better TypeScript. 

We'll look at some utility types, understand how immutable types work, learn how to use conditional types, and finally go through some examples to see how we can write them better.

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

typescript

TypeScript: Tips and Tricks

One of the most well-known GraphQL features is that it lets you do things like replacing multiple REST calls with a single query. You might have done some query experimentation with demo APIs or working on a Gatsby site. 

But there's more to GraphQL than just making queries.

For example, with mutations and subscriptions, GraphQL can smooth out the process of implementing real-time features in your web applications.

In this new course, you'll get practice with these features as egghead's own Ian Jones guides you through building a real-time chat app that's backed by GitHub Issues.

The tools used for the course are OneGraph and Formidable Labs' urql client.

OneGraph is great because it allows you to expose a single GraphQL endpoint that can access data from multiple services including GitHub, Stripe, Airtable, and more. It handles things like authentication for us as well, as you'll see in the course.

At Formidable Labs, the team released urql as a lighter weight alternative to Apollo or Relay that supports the most common interactions with a GraphQL server through their handy React Hooks. 

The course starts with a fresh Create-React-App and touches upon topics like using GraphQL query variables, working with Hooks, handling authentication with React Context, and setting up & consuming the GraphQL subscription.

Along the way, Ian also works through debugging some common errors that you may encounter when developing your own GraphQL apps in the future!

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

React Real-Time Messaging with GraphQL using urql and OneGraph

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.

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

netlify

Sell Products Using Stripe Checkout and Netlify Functions

_Note: this course is being published and released as it is recorded, and is still incomplete. It is slated to be around a dozen videos._

Learn how to build PlaylistHunt, a fully featured app with authentication, authorization, a GraphQL API, and more, using up and coming modern tools, including:

- Gatsby
- Hasura
- Heroku
- Auth0
- Chakra UI

[View the demo](https://playlisthunt.netlify.app/) live online!

Most tools used are open source, with the exception of Auth0 and Heroku, which offers a generous enough free tier for hobby apps to be developed without any problems.

## Modern techniques

In the process, implement techniques to make your app experience dynamic on some portions, and static in others. 

Learn to how to build for Gatsby's vast and powerful plugin ecosystem by creating 3 of your own custom plugins in the process.

Use the latest and greatest of Gatsby, like the brand new [file-system routing APIs](https://www.gatsbyjs.com/docs/file-system-page-creation/). 

## Who is this course for?

Intermediate developers with some existing knowledge of React and web development are best suited for this course. The pace is a little quicker and aims at showing how all the pieces connect together to make a modern JAMstack app.

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 full-stack JAMstack application with Gatsby, Hasura, and Auth0

In the previous section, [07 Building Light Search Box](https://egghead.io/playlists/building-light-search-box-bb64), we implemented a search box with the pattern that we've built in this course. This works great but doesn't have as much business logic applied as other async scenarios.

In this section, we will implement a word game where the values coming in from the user will be piped to different listeners to be consumed. Along the way, complex business logic will be applied to determine if the user won the game or not.

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

Implementing a Word Game with Patterns and React

It's time to introduce a "View" to our codebase so that we can present the values in the DOM. Since React is the most popular View library, we'll convert our basic JavaScript project to a React project to demonstrate how this pattern fits.

We'll create several hooks (`useCallback`, `useListener`, `useBroadcaster`) in this section to see how you could implement the pattern in react terms.

By the end of the section, you'll know how user input is handled and how to fetch resources in React with this pattern

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

Bringing the Pattern into React

You've got some practice with using SQL to select, update, and join database tables.

But perhaps you've found yourself with a sneaking suspicion that you could be more efficient with your PostgreSQL.

Does your query seem slow?

A lesson on how to profile queries will point you in the direction of a fix.

Are you performing multi-step operations one at a time that are susceptible to errors?

The "all or nothing" transaction is the cure.

These are just a couple of examples of the techniques, tips, and tricks that Tyler Clark has learned in his years of experience working on large scale production applications.

Other topics in this course include working with CSV files, different techniques for aggregating & filtering, and more!

Watch Tyler's course, and continue your journey toward SQL mastery.

Check out the [**Community Notes for this course.**](https://github.com/eggheadio-projects/advanced-sql-for-professional-developers)

PostgreSQL is a powerful, open source object-relational database system.

postgres

Advanced SQL for Professional Developers

The concept of 'done-ness' is not something that is often considered when writing functions in JavaScript — you end up just running out of data or a function stops getting called.

There are many async scenarios that make sense to signal that work is completed. 

By following a completion pattern, we can easily trigger repetition and sequencing (async or not) into our code.

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

Use a Completion Pattern to enable Repetition and Sequencing

In this section, we will introduce another concept to the pattern that we've created: 

**Operators**.

Operators are the final big piece that allows us to bend all asynchronous behaviors to our will. They give us a chance to redefine broadcasters and listeners in any way we want. 

We'll several operators throughout this section to implement mapping, filtering, and piping behaviors (and more!).

By the end, you'll get a real sense of how you can continue building on top of the functionality you've already built.

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

Use the Callback and Closure Pattern to Build Advanced Async Behaviors

Now that you've been introduced to the pattern in-depth, let's implement it in a few common Async Scenarios.

You'll notice the benefits of re-using broadcasters through different scenarios as well as tweaking behavior through operators like when to start and stop code.

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

Implement the Pattern in Common Async Scenarios

When a manager gives us the requirements for an application feature, they don't care too much about *how* we build it. And often times, they think that hard things will be easy.

Dealing with time and coordinating different types of events can be tricky.

Luckily, we have RxJS to help!

In this course, you will use RxJS to build a loading spinner in an app that meets the ever-changing requirements from a mock Product Manager.

You'll also learn how to implement a "Konami Code" style feature that listens for a correct sequence of keys to be typed in a set amount of time.

Follow the thought process that Rares uses as he breaks problems down into manageable pieces that remain flexible, and become more comfortable solving problems reactively.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

Thinking Reactively with RxJS

Like in section [04 Implement the Pattern in Common Async Scenarios](https://egghead.io/playlists/implement-the-pattern-in-common-async-scenarios-c059), it's time to implement the pattern in common scenarios!

Now that you're familiar with the pattern we'll build a search box that handles a few different async scenarios.

You'll filter values based on user input, debounce text while a user is typing, and send a request once they are finished. Finally, we'll see how to implement a cache to save on network requests

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

Building Live Search Box

Create-React-App is a great tool for getting started with React, but at some point you may find yourself needing something more.

Gatsby is one of the most popular choices to move on to. It boasts a number of performance optimizations and a large plugin ecosystem (while still allowing you to use anything from the React ecosystem as well).

In this course, Khaled Garbaya will help you get started with Gatsby.

You'll start by building a single page "Hello World" before moving on to programmatically creating new pages and setting up static and dynamic routing.

Once you've got a grasp on the basics, Khaled will share his process for migrating an existing application built with Create-React-App project over to the Gatsby way of doing things.

You'll also get practice adding and configuring Gatsby build plugins for Tailwind CSS and sourcing data from external APIs.

After this course, you'll be ready to port existing code, or start a new Gatsby project from scratch!

Eject create-react-app and Use Gatsby for Advanced React App Development

As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

Security is important, yet it is often overlooked and forgotten.

Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

In this course, you'll learn how to protect your application by learning how to attack it.

Start your journey into web security today!

Check out these [**community notes for this course on Github**](https://github.com/wjohnson85/eggheadio-web-security-essentails).

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Web Security Essentials: MITM, CSRF, and XSS

Blitz.js is a fullstack React framework built on top of Next.js inspired by Ruby and Rails.

It includes everything from the database to your frontend all inside a single app. Only one development server. Only one thing to deploy.

Instead of having an API Layer, it allows you to import server code into your frontend and call it like like a normal function.

You will have one thing to deploy to a server or serverless.

In this collection, you will learn how to get started with Blitz.js. After watching this collection you will be able to:

* Create a new Blitzjs Project
* Create Pages
* Work with the database in your app

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Getting Started with Blitz.js

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).**

Introduction to Callbacks, Broadcasters, and Listeners

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

This workshop will start by breaking down the four states in which a file can exist, and we'll build up our mental model of git from there. Then, we'll look at how to move files between those states in different ways.

Once we've developed a new model for how git operates, we'll be able to purposefully get ourselves into some sticky situations, and then gracefully recover from them.

If you can handle git add/commit/push, but not much more - then this workshop is perfect for you.

You can finally get some proper git training, and will never have to worry about losing data or messing up the repo again!

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Fix Common Git Mistakes

Next.js is a minimalistic framework for server-rendered React applications.

Intro to Next.js API and Features

🚧 **SUSPENSE IS EXPERIMENTAL**

One of the biggest challenges to writing software for the web is dealing with asynchrony, but we have to deal with it all the time.

This leads to a bunch of boilerplate code for handling loading and error states just to get the data we need to show the user-- whether the data comes from a remote endpoint or from browser APIs like geolocation and Bluetooth.

The end result is countless spinners and the dreaded FOLC (flash of loading content).

React Suspense is the answer to these problems.

React Suspense is a primitive built-into React that drastically simplifies asynchronous state management in our applications, and helps you avoid FOLC out of the box.

It's a bit of a different approach to managing these problems and understanding how it works is key to taking advantage of what it has to offer.

In this workshop, you'll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.