Resources for Web Developers in 2022

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

Stimulus is self-described as "A modest JavaScript framework for the HTML you already have".

This collection will show you how to build a Stimulus controller that allows a user to filter a collection of DOM elements based on a variety of inputs.

You'll learn:

* How to connect a Stimulus controller
* What an `action` and a `target` are, and how they work
* Modern JavaScript to make filtering a collection simple
* Techniques to make your code extensible and reusable

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

Filter a Collection Using Stimulus

GraphQL is a query language for your API that offers a new paradigm for delivering data to clients of all varieties. In this playlist, we’ll build a small fullstack application using GraphQL, Apollo Server, Apollo Client, and React, introducing a multitude of key GraphQL concepts along the way.

We’ll start by building the GraphQL API for a ski day counter application using Apollo Server. Then we’ll immediately send client queries to the GraphQL service to get the data. Later, we’ll incorporate mutations to change data, and we’ll integrate react-apollo to send queries and mutations from React components. Along the way, we’ll introduce useful schema design features like input types, enums, and custom scalars, and we’ll talk about client-side use cases like sending variables and caching. After watching these videos, you’ll be able to work on existing GraphQL projects or start your own with a full command of the fundamentals.

Create Fullstack Applications with GraphQL and Apollo

A collection of CSS tricks to tackle various problems.

Cascading Style Sheets bring order and beauty to our applications.

CSS Tips and Tricks

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

Learn TypeScript in practical context with React examples!

TypeScript for React Developers

Learn how to use the [AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk/latest/guide/getting_started.html#getting_started_install) to create and deploy a [DynamoDB table](https://aws.amazon.com/dynamodb/) with [Next.js](https://nextjs.org).

- 🛠 API Route to handle CRUD actions
- 📦 AWS CDK for Infrastructure as Code
- 🔓 IAM role to restrict permissions
- 🚀 Deploy instantly to [Vercel](https://vercel.com)

You can view the completed code [here](https://github.com/leerob/nextjs-aws-dynamodb). 

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

Using DynamoDB with Next.js

***Note: Some of the RxJS syntax used in this course is outdated, but the concepts taught on arrays, async, and observables are still reliable and applicable.***

Async programming may seem daunting. How can we write programs that accept user input, run animations, and send server requests over the same period? How do we keep the code clear and concise? How do we gracefully propagate and handle asynchronous errors? How can we avoid memory leaks caused by dangling event handlers? JavaScript's loops and try/catch keywords are no help - they only work on synchronous functions.

Here's the good news: Asynchronous programming is much easier than it seems. The key is to think differently about events. It is possible to build most asynchronous programs using a handful of simple functions. We will learn why most JavaScript developers approach asynchronous programming the wrong way, and how to avoid these common mistakes. 

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


rxjs

Asynchronous Programming: The End of The Loop

Learn how to create tuples in Python. The videos in this collection will also cover more advanced features of tuples

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

The Ins and Outs of Python Tuples

La nueva API de React Hooks permite utilizar diferentes patrones de forma sencilla, directa y funcional.

En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

Comenzaremos con un sencillo componente `<Wizard>` que hace uso del hook `useState` y en cada lección iremos mejorando la implementación mediante el uso de diferentes estrategias.

En la última lección tendremos un componente Wizard completamente flexible al uso del usuario y habrás aprendido el uso de los hooks `useState`, `useReducer`, `useContext` y `useEffect` junto con algunos patrones de diseño populares en la construcción de aplicaciones con React.

Podrás encontrar el código y notas para cada una de las lecciones en el [repositorio en github](https://github.com/matiasfha/egghead-build-wizard-with-hooks-collection).

Cada lección tiene un directorio asociado dentro de `src`, 101, 102, 103, etc. Dentro de cada directorio encontrarás el archivo fuente para el componente `Wizard.js` y un archivo `App.js` con el código que utiliza el componente además de algunas notas extra en el archivo `Readme.md`


Construye Componentes Avanzados con React Hooks y Patrones de Diseño

We all make mistakes. This playlist covers tips and tricks on how to cover them up :)

Salvaging Recordings with Screenflow

In this collection, we explore creating CSS art and illustrations by walking through creating the Egghead.io logo with CSS.

We walk through everything from planning and creating a responsive foundation, to creating shading effects with `box-shadow`.

Use CSS to Create Art and Illustrations

The underpinnings of tools like Babel and ESLint, Abstract Syntax Trees (or ASTs) are not nearly as scary as you might think. This is a collection of all the egghead.io lessons I (Kent) have put out there.

Abstract Syntax Trees

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

We’ll refactor our existing code and break the pieces of the application into their own stateless functional components. We’ll use these components to build up our UI. We’ll also see how we can use ES6 destructuring syntax to accept just the keys we need from props to keep our JSX clean.

Refactor JSX in React to Stateless Functional Components

We’ll define a simple state object in the entry point of our application. Once the state has been defined, we’ll pass it into our root component as props and replace the static elements in our rendered output with values from the component’s props. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.

Render in React Based on a Global State Object

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

You can load resource based on the url using the a combination of `ActivatedRoute` and Angular’s `Http` service. Since the params and `Http` are both streams, you can use RxJS to get the data off the param then `switchMap` over to an `Http` request using that data.

Load Data Based on Angular Route Params

You often need to update the data flowing through the stream with custom logic based on what you need to output. This lesson covers how to use `scan` for collecting and updating the outputs as your stream progresses.

Updating Data with Scan

We see three varied examples of where natural transformations come in handy.

Apply Natural Transformations in everyday work

This lesson introduces the concept of an Observable. We will see how similar it behaves to a function and what is the fundamental difference between them.

Return Multiple Values from Observables in RxJS 

We want to be able to show only items in a certain status so in this lesson, we’ll add a flag to indicate which items to show, and create a function to filter the todos based on that value. We’ll take advantage of route based state to control the filtering behavior.