A collection of CSS tricks to tackle various problems.

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.

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.

Beginners Guide

• what problems React can solve
• how React solves those problems under the hood
• what JSX is and how it translates to regular JavaScript function calls and objects
• manage state with hooks
• build forms

React Hooks

• Run (and Skip) side-effects with the useEffect hook
• Write a custom hook to share logic in your app
• Simplify the Context API with the useContext hook
• Update state with dispatch actions using the useReducer hook
• Optimize Components with useMemo

Get started with React! (with Hooks)

This course gets you up and running with react in under a minute by using codesandbox.io to skip the painful process of setting up your dev environment.

You'll learn:

• How to write React code with JSX
• How to "think in React"
• How to use local state to store changing data
• How to pass data from parent components to children components using props

So get started now! You need some javascript and HTML experience, but no prior React experience is needed.

Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

• Speaker Diarization
• Sentiment Analysis
• Contextual Insights
• Conversational Analytics
• Topics of Discussion
• Entity and Intent Recognition
• Pre-built UI and Symbl JS Elements

In this video course we will use Symbl.ai to get transcripts for the video we will upload as well as more meaningful insights.

For this course, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account here and start building.

The CSS Grid Layout introduces a two-dimensional grid system allowing both fixed and flexible track sizes to be defined. This allows for easy management of an app's layout.

You'll start with an empty HTML file with minimal global styles applied in your CSS file. You will then iteratively add sections and items to your HTML page to structure through a CSS grid. You'll learn how to control a grid's columns and rows and define the size of each respectively.

By the end of the course, you'll have a fully responsive landing page that behaves how you expect it to on any device.

You'll learn about:

• The implicit vs. explicit grid
• Grid gap
• Using the grid template area
• Using grid-within-a-grid

...and more!

Redux was announced back in 2015 and immediately took off as the de-facto state management solution for React. As it gained widespread traction, it also became clear that in many cases it was brought into applications prematurely. The community in some ways started to push back on its use and recommended the built-in setState method as an alternative. Several other state libraries also started popping up around this time. Finally, as React Hooks were announced with a built-in useReducer method it appeared that Redux's time was up. However, these claims have proven to be premature. Redux is not dead and instead remains React's most popular state management library*.

Recent updates to redux exposing a hooks-based API address some of its most serious drawbacks and make it even more appealing. This course will show you how to apply redux to a modern react hooks application. I hope you leave this course with a continued appreciation for React Hooks and renewed enthusiasm for Redux.

Thanks for watching 📺.

Notes

• This content has been inspired by the incredible work done by Mark Erikson on modernizing redux and the fantastic Redux Style Guide.

• * Comparing redux with mobx, xstate and flux

Design with Tailwind CSS is a free video series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.

Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.

You will learn how to:

• Get Tailwind up and running in your project
• Build complex application layouts with flexbox
• Use Tailwind's color, size, and weight utilities to create hierarchy
• Create depth in your designs using shadows and layers
• Flexible positioning techniques for building components that are adaptive instead of static and rigid
• Implement custom form styles
• Extract reusable components
• Work with plugins
• Customize Tailwind to meet the needs of your design
• Augment Tailwind with JavaScript to make your designs interactive

Javascript offers different ways to work with arrays one of the most used data structure out there. Learn some of this methods and functions to improve the way you manipulate arrays in your code.

Cloudflare Workers is a serverless application platform that enables you to create and deploy functions that will scale as you need them.

This collection takes you from the beginning, creating an account, all the way to deploying a serverless function that detects where users are in the world (relative to Cloudflare servers), and renders a greeting in HTML.

You'll become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code.

But there's a bit more to it than just those three steps.

The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.

How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?

It can get hard to keep things straight in your head.

Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.

It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.

One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.

In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.

More importantly, the focus of this course is more on the workflow than the implementation.

Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!

Managing state in a UI is challenging. It's genuinely difficult and the solutions require a depth of knowledge and experience to understand. Everything is a balance of tradeoffs in complexity, performance, and user experience.

This is a series of interviews with experts, open-source maintainers, and UI developers that have combined decades of experience building stateful UI applications for millions of users.

Part interview, part screen share, these videos should benefit you if you're building web applications.

They focus on React, but the underlying principles are valid for UI work in general (and beyond).

Dendron is a Visual Studio Code extension that allows you to easily manage your personal notes.

You can use it to track your daily todos or reference notes.

Features Dendron ships with:

• markdown
• markdown preview
• fast note navigation
• fast note creation
• backlinks
• opt-in note schemas
• note graph

In this course, we'll build a video course platform using the AWS Amplify Admin UI.

We'll:

• Create a database schema
• Test your data locally
• Deploy to AWS
• Add authentication
• Add Amazon S3 static file hosting
• Deploy your frontend to the Amplify Console

Before taking this course, you should have a basic understanding of React Hooks.

Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

• React: flexible and customizable while following modern best practices
• Next.js: lightening fast with guide rails to help your project perform as consumers expect
• Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

How to create buttons in React Native depending on the level of desired customisability: the quick and simple Button, a more customisable Touchable, and the most customisable Pressable.

Button component is useful for quick prototyping.

TouchableOpacity is the most common way of creating buttons and other touchable areas, and is suitable for most use cases.

Pressable gives you the most control over the look and feel of your button, including customising the pressed state and text, as well as handling long presses separately from regular presses.

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

This is a small collection of videos to help you get familiar with Chrome browser's performance oriented developer tools. In this collection, learn how to record a performance profile, tweak the settings to get the most relevant profile and finally a look into the different sections of the performance data visualisation.

WordPress has been around for a long time and powers a huge number of sites.

Just because WordPress isn't brand new doesn't mean it can't get the job done!

Running WordPress as a Headless CMS gives you the benefit of a great content creation experience on the back end with the powerful Gutenberg editor while allowing you to use a modern JavaScript framework on the front-end.

In this course, Kevin Cunningham will guide you through setting up WordPress as a headless CMS from scratch, as well as migrating from an existing WP site. You'll get practice with different WordPress content types, implement a GraphQL endpoint for querying data, and backup & deploy your site. All the while, you'll deepen your understanding of how headless WordPress approaches the relationship between content & rendering.

Using WordPress as a headless CMS turns it into a datasource ready to work with Gatsby, Next.js, or whatever else you want to build with. Your and your clients will be able to take advantage of WordPress's content editing experience, without having to settle for a cookie-cutter theme on the frontend.

With WordPress being decoupled from the rendered site, the database isn't hit for every request. This means faster performance and more security against WordPress exploits. You don't even have to host the editor at the same domain as the published site.

While watching, consider...

• What are the tradeoffs of using a CMS for a site?
• Would headless WordPress work for me or my clients in this scenario?

Flutter allows you to build native apps on iOS and Android from a single codebase. In this course, we'll walk through everything you need to know to quickly get up & running with Flutter including styling, navigation, local state management, theming, lists & forms.

Learn how to use the AWS Cloud Development Kit (CDK) to create and deploy a DynamoDB table with Next.js.

• 🛠 API Route to handle CRUD actions
• 📦 AWS CDK for Infrastructure as Code
• 🔓 IAM role to restrict permissions
• 🚀 Deploy instantly to Vercel

You can view the completed code here.

Optional chaining ?. in javascript is a new feature introduced in ES2020. Optional chaining changes the way properties are accessed from deeply nested objects. It fixes the problem of having to do multiple null checks when accessing long chain of object properties in javascript.

Learn how to use the react-spring library to animate our React applications. Start with the useSpring hook and end with the useTransition hook with React Router for transitions between your routes!

You'll get the skills to begin using the react-spring library and add animation to your React components.

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!

Anything related to JavaScript performance

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

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.

In this series of lessons, we will learn to use some of the tips and tricks that can help you write better TypeScript. We will have a look at some of the utility types, understand how the immutable types work, learn how to use conditional types, go through some of the examples and see how we can write them better and so on.

A short list of screencasts to cover essentials of Gatsby 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

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.

This collection of lessons will give you some practical tips and tricks to create faster and more reliable Angular applications. They are highly inspired by the content published on web.dev/angular by Minko Gechev and Stephen Fluin.

What you'll learn here is how to..

• improve an app's TTI via route-level code splitting and lazy loading
• implement a loading indicator for lazy loaded routes
• improve performance via preloading all lazy modules
• implement a custom preloading strategy
• preload lazy loaded modules with the Angular CLI
• optimize Angular's Change Detection
• implement virtual scrolling for large lists with the Angular CDK
• add client-side precaching with Angular and service workers

That said, have fun 🚀

In these lessons you’ll learn how to create a collection of primitive components that will allow you to create complex user interfaces, which are responsive, consistent, and maintainable. All without writing any custom styles. We’ll create components to manage layouts and whitespace, text and headings, basic user interface elements, and learn how to compose complex user interfaces from primitive components.

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Learn how to add optimized images to your Gatsby site with the gatsby-image plugin.

These videos dive into:

• installing and configuring plugin options
• sourcing images to be queried via GraphQL
• displaying traced-svg or "blurred-up" images
• different image types supported by gatsby-image
• as well as alternatives for using images in Gatsby

(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.

Next.js is a fantastic framework that allows us to build performant server-side rendered React apps with ease.

In this series, we will learn how to utilize the powerful features of Next.js 9, like API routes and Static Site Generation (SSG), to build full-stack React apps. We will use Auth0 to handle user authentication and authorization, and we'll also learn how to integrate the excellent Chakra UI component library into our Next.js project to make it a breeze to build beautiful and modularized user interfaces. Finally, we will import and deploy our project from GitHub to Vercel, the deployment platform built by the creators of Next.js.

This collection will still be continuously updated with new and more advanced content. Subscribe to the RSS feed to get notified of the latest lessons!

Angular is a robust, powerful framework for building applications at scale, but it can be really intimidating to beginners! This collection by JavaScript teacher Sam Julien is here to help you learn Angular in bite-sized chunks.

Note from Sam: these lessons are loosely related but are not meant to necessarily be followed in order from start to finish. I've provided embedded code and links to GitHub where applicable, though, so you can always have access to the finished code for the lesson.

Techniques to improve your CSS, Sass, and HTML implementations for everyday scenarios.

Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.

That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.

You will learn how to:

• Use (experimental) CSS Overview to learn all about CSS used on a page in a minute
• Style console.log messages with CSS - a crucial skill for any senior developer (j/k)
• Debug your code (on production and local environment) with logpoints
• Run a Lighthouse audit of your site
• Choose accessible colors for your website that have an AAA contrast ratio rating
• Force a DOM element state in Chrome DevTools
• Use Console utilities to make debugging easier
• Copy a network request as fetch or cURL with Chrome DevTools

Have fun!

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

Like in section 04 Implement the Pattern in Common Async Scenarios, 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

The new React Hooks API allows to use different patterns in a simple, direct and functional way.

In this collection you will find a step by step guide to build a complex component using different design patterns implemented with the Hooks API.

We will start with a simple component <Wizard> that use the useState hook and in each lesson we will be improving the implementation by using different strategies. In the last lessons we will have a full Wizard component with a flexible API to allow the user to manage the component based on their requirements and You will have learned the use of useState, useReducer, useContext, useEffect and useCallback along with some popular design patterns to build React applications.

You will be able to find the code and notes for each lesson in the github repository.

As a developer, you'll often make use of APIs that have you pass in a callback function. For example, adding event listeners or using various other DOM or Node APIs.

What's less common is writing your own code that makes use of callbacks. Many developers know what a callback is, but not the why or how of implementing them in their projects.

A callback is a function that you pass to another function, so that the function that you pass it to controls the invocation of that function.

To help keep things straight, John Lindquist calls the innermost callback the Listener, and the function it gets passed into the Broadcaster.

Think of it as one function broadcasting values to another function that is listening for them.

These Broadcaster-Listener callback relationships can be composed to solve problems in the realm of timing, buffering, and caching.

This pattern of composing callbacks is the foundation of RxJS and other libraries that handle complex async scenarios.

In this course, John Lindquist guides you from a blank JavaScript file all the way through creating a library of reusable functions not unlike those found in RxJS. The difference is you'll be writing from scratch.

You'll learn techniques for solving Callback Hell with composition, implementing debouncing, and building a word game among several other examples.

Using callbacks in code is a major pattern in JavaScript, and learning to work with them effectively will take your problem-solving skills to the next level.

In the previous section, 07 Building Light Search Box, 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

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

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

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

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

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

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.

Work in progress

Kent C. Dodds is an active egghead instructor and blogger. This is a collection of screencast versions of his blog posts. You can find his blog here: kentcdodds.com/blog

In this collection, we'll go through each of the standard hooks offered by the React library, learn how they work and build small applications that leverage them internally.

This playlist will get you going with the Amplify Console, including showing you how to host your website, integrate continuous integration and continuous delivery, set up a custom domain, and enable pull request previews.

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

As developers, we're often working closely with APIs to make requests in the browser or on the backend with a server, but we might not always know exactly how those requests work or how they should look.

Postman is a tool that lets us create, manage, and test API endpoints all within a UI so we can wrangle our APIs and understand how they work.

Start here! This is where you will get oriented, set up your work environment, and get ready to succeed as a React developer. It's important not to skip this section! It applies to all lessons below.

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.

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

TS Courses

This is a list of web components lessons showing the technologies behind it and some practical ways to use it now in production.

In this free collection on Facebook's new state management library, we'll get started using Recoil in our React applications and then delve into various common use cases that we may encounter in the field.

We'll start with the basics of state management in Recoil: the Atoms and Selectors. Then we'll dive further into the Selector API, an important part of the library. Along the way we'll learn different strategies for handling synchronous and asynchronous Selectors.

Next.js is a React framework that provides a solutions to problems such as:

• 🌟 bundling & transpiling your React code
• 🌟 code splitting
• 🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
• 🌟 client-side routing

In this collection we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:

• 🔥 Create a new Next.js project
• 🔥 Add TypeScript support
• 🔥 Create styled components with Emotion
• 🔥 Use both static and dynamic routes
• 🔥 Generate fully typed static pages
• 🔥 Set up Netlify deployments
• 🔥 Add a Netlify Form to our site
• 🔥 and more!

Imagine the following.

You join a new project and after getting access to the repo you notice that there's no tests.

You decide to ask the team whether they are in different repo or something and unfortunately the answer is:

We don't have any tests, we didn't have the time.

😐

In this collection we're going to learn how to add e2e tests with cypress.io to an existing React app in order to do two things:

• 🌟 Ensure that our app currently works as intended
• 🌟 Allow us to add features to it with a technique called "Cypress Driven Development"

In less than 20 minutes we're going to go through:

• ⚡️Adding cypress.io setup to an existing project
• ⚡️Testing search functionality with data-cy properties
• ⚡️Using "Cypress Driven Development" to add a new feature to an app
• ⚡️Use Cypress UI to debug an API response
• ⚡️How to use cy.only and cy.skip in order for us to build our e2e test suite faster

and much more!

We generally tend to avoid paying for things unless we actually need them, and the same goes for AWS

When using a cloud provider like AWS sometimes an unexpected charge may occur and we'd like to understand what are we being charged for and how to be notified whenever an unexpected charge occurs (especially when we're trying to stay within a free tier).

In this quick (4 minutes, 2 lessons) collection we're going to learn how to:

• Review the AWS Billing & Cost Management Dashboard
• Set up a billing alarm to be notified whenever our bill is larger than $5
• Review the AWS bill to understand how much are we going to pay this month and why

Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

By the last lesson, you'll have learned how to:

• define custom input and output directories
• create a layout that accesses front matter variables
• watch for Sass changes and include CSS in the build proces
• create an 11ty collection using tags
• define front matter for an entire collection
• make and apply a filter to a collection
• generate pages from an external data source, such as a CMS or API

Learn different ways to manipulate elements (like images and text) on mouse-over by using the :hover pseudo-class in CSS. We will learn how to create the "fade-in" and "fade-out" effects on hover, how to change border effects on hover, how to change the "border-radius" to make rounded corners, and how to delay transitions on hover.

In React world, things are changing and they are changing rapidly.

If you'd like to get up to speed in what new APIs React has to offer and have literally 7 minutes to spare - this is a collection for you!

Create an asymmetric promotional grid using CSS Grid. Then optimize it to make it much more readable for other devs (or your future self).

• Future Lesson: Support older browsers

First off, if you haven't watched GraphQL Query Language by Eve Procello, it's one of the best introductions to GraphQL out there. This focuses on the Query language itself so it is framework agnostic.

Apollo

The Apollo framework is a popular choice for managing async data needs in a React application. This is a complete state management library so there is some buy in to use the framework.

Urql

Another lighter weight GraphQL client that is worth looking at is Urql. Urql also exposes a few react hooks that will get you started Querying, Mutating, and Subscribing to data.

Mobx is a great tool for managing application state. We have two courses that you will be interested in. Develop React Applications with Mobx and TypeScript is an introduction to the space of how Typescript integrates with React and Mobx. It doesn't get too in depth but will introduce you.

The next two courses are deep dives on managing state in react with MobX You'll learn:

• Observable data
• Computed values
• Manage Side effects
• Hande User input

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.

AWS Amplify allows developers to create, configure, and deploy Serverless APIs and functions directly from their front-end environment.In this collection, you'll learn how to deploy various types of APIs and functions using the Amplify CLI. You'll also learn how to share code among various functions using Lambda layers and schedule functions to run at an interval to implement Serverless cron jobs.

Learn how to create a simple grid-based game with React, CSS Grid, and useReducer.

Check out the accompanying article!

Rustlings is a set of exercises that serves as a great introduction to the Rust language. It covers many concepts from the Rust book by asking you to work through sets of exercises.

This collection walks you through Rustlings in a way that explains what's going on in each exercise. We cover everything from basic types to generics and threading.

Check out this collection if you are eager to work with twitter API and want to build some cool stuff with it using JavaScript!

Have you personalized your Github profile?

Didn't know you could? With the new profile README feature, you can.

This collection explores different ways to make your profile stand out with the use of images, animations, and integrations.

Una colección de lecciones que describen como crear un plugin fuente para Gatsby desde cero hasta su publicación en npm.

A collection of lessons that describe how to create a Gatsby source plugin from scratch to npm

Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

Learn how to use the features of gatsby-theme-blog version 2.0.

The Gatsby ecosystem supports a ton of plugins that allow you to easily source data from a variety of sources like a GraphQL CMS or Wordpress. But what if you wanted to source your own custom data?

In this collection, we'll walk through learning how to source custom data and create nodes in Gatsby in order to build out a Pokedex using the PokeAPI. We'll learn how to request the data in Gatsby's build process, create nodes with that data, query that data, and use it to create a Pokemon Pokedex UI.

🚀 In this collection, I will be going over some command line tools I use on a daily basis that make my life a lot easier.

First up is fzf.

fzf is a general-purpose command-line fuzzy finder.

I go through the steps of taking an initial mockup, writing html, css layout, css styles and javascript to make a fully functioning webpage.

If you like the content so far, tweet @MannIsaac so I'll be motivated to finish the series.

Extracting meaningful data from strings is a crucial skill when working with bash, and bash gives us powerful tools to do so: head, tail, cut, sed, and awk. But these tools can be hard to understand without spending time to learn them, so many developers fall into a rut of blindly copying and pasting commands. No more! With this mini-course, you'll understand the basic ins and outs of these commands in under 15 minutes.

In this collection of lessons we will create a developer dashboard in the terminal using react-blessed and react-blessed-contrib. We will discuss various ways to layout the dashboard, show how to change fonts, style with colors, and position text within each widget. Then we will shift focus on creating some widgets to display developer content such as an interactive time log, a pomodoro timer, displaying recent commits, currently running docker containers, and more. Once you know the basics you can create a widget of your own to add to the dashboard.

Una revisión de las nuevas características que la nueva versión de Javascript ES2020 o ES11 trae para esta iteración.

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

• Install Jeykll and run it locally
• Create a new blog post
• Install plugins to add new features to your blog

SSH provides a secure way for your to connect to and authenticate with GitHub's servers. While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like ssh-keygen and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have separate accounts for personal and professional projects, which can be difficult to manage manually. Using ssh-agent and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's git URL.

Github Actions are an awesome tool from Github that allows us to automate tasks using code-based workflow configuration files. There's also a large marketplace that comes stocked with many useful tools that are ready out of the box.

But sometimes the options available don't completely solve our needs or maybe we're working with a new technology that's simply not available as an Action yet. Luckily, Github allows anyone to create their own Actions using common technologies like Javascript via Node.

We'll learn how to create a new Javascript-based Github Action running on Node. We'll first walk through a simple Hello World example, learn how to test it locally, version control it, use it in the wild, and move on to more advanced solutions that include using packages from npm!

View and Contribute to the Community Notes!

This collection includes introductory level material for AWS DynamoDB. We cover what DynamoDB is, when you'd use it, and the vocabulary you'll need to understand documentation and talks in the ecosystem.

You'll come out of this playlist with the ability to understand what people mean when they say DynamoDB and the base you need to get started yourself.

View and contribute to the Community Notes!

Building larger serverless applications can be tricky - creating many lambda functions as well as other resources such as DynamoDB tables, S3 buckets, API Gateways using AWS Console takes quite a lot of time. Not to mention other problems such as redeploying the app to a different region, reviewing the infrastructure etc.

AWS Serverless Application Model (AWS SAM for short) simplifies a lot of those issues 🤩

Built with with best practices in mind, SAM allows you to:

🌟define your infrastructure as code using a YAML template (which can go through code review!)

🌟define resources such as lambda functions, DynamoDB tables etc. in a much simpler way than doing it directly in CloudFormation (which SAM is built on top of)

🌟build and deploy a serverless application from a command line

🌟debug and test lambda functions locally using SAM CLI

🌟debug and test lambda functions from WITHIN your editor with AWS Toolkit extension

Add AWS SAM to your toolkit with this quick collection!

View and Contribute to the Community Notes!

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

This collection intends to provide viewers with examples of the different Algebraic Data Types that are commonly used in programming. All of these ADTs can be found within the Fantasy Land specification which consists of common algebraic data types used in the realm of web development. By adhering to the different laws that each ADT is built upon, users of the spec are provided with interoperability when using different algebras, ultimately providing them with an incredibly powerful set of tools.

Resources

• Fantasy Land Github

Lodash is a collection of utilities that have become a staple of modern web development. This collection will show you how to re-create its most common methods using simple JavaScript techniques available in any modern web browser. In addition to re-building tools like _.merge, _.get and _.debounce from scratch you will also learn how to replace them completely in some cases with modern syntax such as optional chaining, nullish coalescing and Object.fromEntries.

This collection should interest the following groups:

• Those who want to better understand common JavaScript patterns
• Engineers who want to reduce their dependence on Lodash (for performance or other reasons)
• Candidates preparing for a technical job interview (where it is common to be asked how to implement some of these methods).

This collection explores one of the most promising and coolest releases of early 2020 - prisma v2. First part of the prisma infrastructure to exit experimental mode - prisma client is an auto-generated and type-safe query builder for Node.js & TypeScript. We will explore and learn it in this collection!

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy directives. You'll discover how to define a component scope with x-data, run code on mount with x-init, attach event listeners with x-on, display data with x-text, decide wether or not to show an element with x-show, iterate through data with x-for, retrieve a DOM element with x-ref, learn how to achieve two-way data binding with x-model, and much more.

You'll also learn how "modifiers" can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls "magic properties", which give you access to native browser events ($event), reference to DOM elements ($refs), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

Get ready to breathe some fresh air - it's time to walk into cool, green Alpine pastures! 🏞

Recoil is a brand new state management library for React, developed by Facebook.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

This quick collection will get you up and running with Recoil, you're going to learn how to:

• add Recoil to your React project
• create a Recoil atom and use it to store a piece of state
• use useRecoilState hook to update an atom
• use useRecoilValue to access value stored in an atom in a read-only fashion
• use 🔥selectors🔥 in order to calculate derived data based on state stored within atoms (this is really powerful!)

This is a collection of lessons by Sam Julien about NgRx.

There are many ways to build a new website, but it can often be a slow, painful process for both beginners and those who have been working in the field for a long time.

With the modern tooling in the Jamstack world, we can take advantage of tools like Gatsby that can allow us to rapidly spin up a new project and TakeShape that can provide us with an all-inclusive content management system (CMS) to focus on the important parts of what makes our websites unique.

In this collection, we'll walk through building a new company website from scratch. After creating a new example project in TakeShape, we'll use the TakeShape API to fetch that data and dynamically build a website using a Gatsby Starter for a TakeShape Startup project. With your new website, we'll learn how we can customize it to make it your own by adding new content and changing the branding like the logo and colors.

Recoil is a new (experimental!) library from facebook that can handle complex shared data across a large react app.

In this collection, we'll create a simple game with React using Recoil, to explore how you can share and update state across an app.

Recoil is similar to (but different than) Context, Redux, or other shared state libraries (like MobX), but is designed to handle large (and variable) numbers of state that can update without re-rendering your entire app's component tree.

Learn how to build a simple REST API to store notes using the latest built-in node features including native ES modules, the fs/promises API, async/await, the nullish coalescing operator, and destructuring. No compilers, no build steps, pure code.

This collection of lessons is great for beginners to Express as long as they are familiar with JavaScript and the HTTP protocol. Those more familiar with node and express will appreciate a fast-paced, modern take on using these popular tools and will likely benefit most from the lessons on input validation, models (which emphasizes a lot of new syntax), using fs/promises to serialize a Map, and accessing asynchronous data with async/await.

Pre-requisites:

• Install curl
• Install node 14
• Be familiar with the terminal

View the source for this project in the project's github repo.

Notes:

• I'm not very pedantic about REST and basically just mean an API over HTTP
• Express 5 is still in alpha (and has been for over two years), but most of these lessons apply to Express 4 as long you use something like express-async-errors to add support for async routes and middleware

Whether you enjoy CSS animations or not, learning how to work with CSS transforms and transitions can help the overall user experience on your websites.

In this collection we will look at the various CSS properties that help create the kind of experience user have come to expect from websites.

We will explore:

• The transform property
• The transition property

Supercharge your HTML with a powerful templating language. Variables, loops, conditionals.. Twig brings programming concepts to your HTML workflow!

When merging two objects in javascript, you can shallow merge them, or deep merge them. These videos show how to do both, and talk about the pros and cons of each approach.

The playlist walks through the entire creation and deploy of patio11bot.com! It starts as a very simple HTML page locally, and we add custom fonts, emojis, animation, a "Tweet" button, and we make it responsive!

Then we deploy it online (for free!) with Netlify.

This playlist will be a smorgasbord of Auth0 authentication and authorization topics. Everything from adding Auth0 to various apps, customizing your Auth0 settings, adding specific rules / audiences / features, and debugging errors.

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

Vercel's data-fetching library SWR features a client-side cache. Learn how to use the mutate hook to manipulate this cache in order to optimistically update your UI without waiting for a response from the network.

Learn more about SWR here: https://github.com/zeit/swr

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.

In this beginner friendly series on React, we'll start a new project from scratch with Create React App, and step by step, build a functional and relatively useful React app that lets you find inspiration on "baby names", with search and shortlisting functionality.

Through the lessons, we'll cover an introduction to JSX, approach concepts like props, state, React hooks, "thinking in components", and embrace a progressive refactoring mindset.

Once the app is complete, we'll look at how to reduce prop drilling with the use of the Context API, and we'll even create our own custom React hook!

How does e-commerce work on the Jamstack?

Jason Lengstorf and Thor 雷神 teamed up on Learn With Jason to build a serverless Stripe Checkout implementation. This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

With the release of Next.js v9+, we've been handed the tools to create full-stack react apps with ease.

This collection will dive into the fundamentals of API & Dynamic routing, handling data from local json and a DB, plus deployment options.

This collection will be an ongoing collection, where I continue adding more videos over time 😃

Emotion and Gatsby let you build static websites and dynamic applications while sharing composable styles.

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

GitHub Actions are a powerful workflow tool that allows you to write and use custom code to execute workflows. It's like a serverless CI/CD platform built directly into GitHub. We have access to GitHub's registries, our own repos, multiple platforms (Mac, Windows, Linux), runtimes (VMs and Containers), and languages (JS, Rust, Go, etc) to perform any action we want. We can trigger workflows using GitHub's own events, our custom events, or even scheduled events like a cronjob.

JSX is used heavily in the React ecosystem to represent tree structures such as HTML. Explore how JSX works, how it compiles to JavaScript, and why it isn't tied to React.

This collection is a sequel to the Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB 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.

This playlist covers all of the ways to use the node.js DocumentClient to interact with one or more DynamoDB tables.

note: We do not cover scan() as it is not recommended for most usage and if you need it you'll know how to read the documentation to use it by the end of this collection.

These videos include the introductory steps to writing your first Elixir function and beginning to understand some key concepts in Elixir that make it unique.

Some of those concepts include:

• the Mix build tool
• project structure
• collections of functions written in modules
• function arity
• pattern matching and common uses for it
• the pipe operator

The only better feeling than deleting code is automating away mundane tasks. This playlist shows off many variations of tasks that can be automated away with tools like zsh functions, alfred, and karabiner. These techniques apply broadly to the small development tasks you tackle every day.

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

MongoDB has a quite powerful aggregation framework that allows you to write data processing pipelines. Documents in the MongoDB collection go through a series of stages or a pipeline that transforms them into an aggregated result. In this short video series, you will learn how to write aggregations in MongoDB.

A collection of Vim videos for beginners

React 16.8.1 was just released, and hooks are finally stable! If you have literally 12 minutes to spare, you can learn how to use hooks (useState, useEffect and useMemo) as well as brand new React features such as React.lazy and React.memo.

Enjoy!

This collection gathers lessons that resemble JavaScript interview coding assignments and teaches you to write quality, readable and reusable code. It's always frustrating when you learn the language for months and then some tricky question at the interview stops you from getting a job. Follow the lessons in this collection and be prepared for tricky coding challenges!

Although solving coding assignments is pretty important the true value of the collection lies in the approaching problems correctly, using shortcuts where it's needed and writing verbose code where necessary.

This collection starts with an overview of how to set up a scratchpad in VSCode using quokka.js, so you can follow the lesson in an easier fashion, as this is the technology used to explain concepts! It is followed with an explanation of how to write arrow functions as those are also frequently used throughout the playlist.

!!! New content is still getting added to the collection !!!

Some cool stuff in nodejs

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 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 19-part course is a single index.html file. This keeps your focus on learning React, 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.

You'll come out of this course with a solid grasp on:

what problems React can solve how React solves those problems under the hood what JSX is and how it translates to regular JavaScript function calls and objects You’ll build a solid understanding so when you come across JavaScript challenges down the road, you’ll know how to…react.

On many websites, images and video make up the vast bulk of the data being sent over the wire; websites will often have several megabytes of images!

There's a lot of low-hanging fruit in this area. In this collection, we'll learn how to convert our images to the webp format—a format often 2-3x smaller than png/jpg—and how to use the picture element to ensure graceful fallback on unsupported browsers. We'll see how to come up with a great abstraction for React to make it as painless to use as possible.

Later in this collection, we'll also cover:

• Automatically generating webp images on build
• Leveraging gatsby-image to do the same thing in Gatsby
• Smaller images across the browser spectrum with jpeg2000 and jpegxr
• Avoiding layout problems with display: contents
• Smaller video with webm instead of mp4

Subscribe to make sure you don't miss it!

This collection contains videos that explore the basic types in Rust, including Fixed size Integer, Pointer sized Integer, Boolean, Strings, Characters, Arrays, Tuples and more.

If you're just starting out learning Rust and wrote your first program, this collection is the right place to get more familiar with the language!

Angular is particularly popular at large enterprises. Most of the time those line of business apps are very data driven and forms heavy. While Angular gives us two different approaches to implementing forms, neither of them is very satisfying, nor do they help keep the maintainability high especially in large enterprise apps.

In this course we're going to learn about ngx-formly, a library that helps cope with some of the mentioned issues. With Formly you define the form structure once in your component code and the HTML will be taken care of by the library. This helps to reduce maintainability and moreover Formly has some nice reactive features built-in that help you reduce your form code even more.

Questions? Ping me on Twitter or on juri.dev 🙂

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

Quickly learn to use React Query's useQuery and useMutation hooks. We'll discuss concepts like the queryCache, dependent queries, and wire up React Query's custom Devtools component.

Go is a server-side language, but today we can compile Go code to WebAssembly as well - making it possible for us to bring programs written in minimalistic Go code into the browser!

With this collection, we will learn how to compile and run Go WebAssembly programs in Node.js and the browser, and how our Go code can interop with JavaScript and manipulate the DOM. We will also talk about configuring our VS Code workspace and optimizing the Go WASM binary size.

This playlist will guide you trough short circuit operators in JavaScript. In the first video you will get an introduction to what short circuits are proceeded with some of the most popular practical applications of it.

Practical, repeatable CSS for application development.

RedwoodJS takes the JAMstack philosophy to the next level. It brings together all the tools modern web development has to offer:

• React
• GraphQL
• Prisma

RedwoodJS abstracts database management away from you so that you can just build your schema and it will do all the plumbing. This collection will go over how to create a RedwoodJS project and the scripts that will help make your developer experience a joy.

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.

Frontend runtime optimization is heavily impacted by rendering. Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls. This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

Beyond the basics.

Examples on how to use the contentful-migration tool to change content models programmatically

MDX has the tagline markdown for the component era. It aims to make authoring with Markdown and JSX simpler, allowing you to use components for rich interaction and data-loading, while keeping long form content fun to write with classic Markdown.

This collection includes lessons on configuring MDX, setting it up specifically in Gatsby sites, and ideas for different components you can use including:

• inline sign up form components
• live code editing components
• table of contents components
• other 3rd party components like the Divider and Message components from Theme UI

Customizations like using default layouts for MDX content and styling MDX components with Theme UI are also covered.

This collection will cover the basics of how to interact with an HTML document with JavaScript. We will go over:

• What is the DOM?
• fetch elements from an HTML document
• add HTML nodes to a HTML document
• Respond to click events

Handy tips for boosting your productivity in GitHub. These are bite-sized things you can take advantage of today to boost your efficiency by 1% or more. What are you waiting for? Check 'em out!

Forms are difficult in React.

Luckily, there are many solutions that allow us to create React forms more easily, such as React Final Form created by Erik Rasmussen.

React Final Form is a high performance subscription-based form state management for React which is not only extremely powerful, but also lightweight (3.0k gzipped!) and easy to use.

JavaScript (and webdev in general) is surprisingly broad, there's ALWAYS something to learn. There are so many handy tips & tricks in the language and learning even a couple of those will make you a better JS developer.

Yarn 2 (Berry) has finally released a stable version!

The yarn team has been working on this release for over 2 years.

This collection goes over:

• What yarn pnp is and how it tries to solve the node_modules problem
• How to install yarn globally and locally inside of a single project
• How to use yarn dlx
• How to use yarn up to manage yarn workspace dependencies

In this collection, we build a minimal flashcard application using React, primarily focusing on function components and the hooks API. To make sure we can understand and maintain existing code, there are also a few lessons toward the end that use class components so you can get familiar with the syntax. We cover important React concepts, and sprinkle in libraries that are pretty standard in the ecosystem like @reach/router, Jest, and React testing library. We start with create-react-app so we can get right into it without worrying about configuring tooling. There's a separate course for that here

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Together, they combine to create a powerful platform for docs, blogs, and other rich applications.

Go is an open source programming language that makes it easy to build simple, reliable, and efficient software. It is used frequently in the container ecosystem by projects such as Kubernetes (container orchestration), Docker (containers), and Cilium (BPF networking).

This playlist is a collection of videos that will start you off on your Golang journey.

Welcome and thank you for signing up for the workshop on Building Accessible Web Apps with React! To be ready to hit the ground running there are some pre-requisites you'll need to have prepared:

1. Please walk step-by-step through the README in the Github repo for the workshop.
2. In addition, I've added some videos here that may be helpful to you if you're planning to use the VoiceOver screen reader on Mac or if you'll be using High Contrast Mode on Windows.

The rest of the tools I'll demo for you in the workshop but make sure you have them installed (which is all listed in the README).

Thanks and I look forward to talking with you about React and Accessibility soon!

Eleventy, or 11ty, is a simple yet very powerful static site generator. It does not require any config to get started.

This what it will take you to get an 11ty project running.

npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy

After watching this collection you will be able to:

• Bootstrap a simple 11ty website
• Use 11ty layouts
• Chaining multiple 11ty layouts
• Use 11ty Collections
• Create pages from data

...and much more

In this collection, we will dive into using @reach/router as a routing option for your React application. We will start from the beginning and cover everything from Links to Nested Routes.

In the course, we will learn how to use the styled-components library to style our React applications. We will start from the basics and dwell in more advanced cases.

With this course, you can get the necessary knowledge to use the styled-components library to style your React applications in the future.

AWS Lambda, Serverless, FaaS - there is a lot of noise around those topics online (and for a very good reason!) and it can get confusing at times 🤯

In this collection we're going to take a look at AWS Lambda from scratch, in order to get YOU from:

"I have no idea what a lambda function is"

to

"I know quite a bit about AWS Lambda, and I'm going to use it to solve my problems"

Checkout the community notes for this collection on github.

Stimulus is a JavaScript framework that is purposed to enhance your HTML. Stimulus will monitor your HTML and wait for its data-controller attribute to be declared on an element. Thats when you controller JavaScript is connected and its methods triggered.

Figma is a powerful design tool built with web technologies. Using the same technologies you can extend it with plugins. You can use Typescript and/or javascript, you can load your favorite UI frameworks like Vue.js or React.js and build powerful plugins.

Using a plugin you can:

• Load Real Data from your server and visualize it
• Change elements in your design programmatically
• Convert your design to JSX or HTML, the sky is the limit

Learning these skills will help you make your design workflow faster by making Figma doing exactly what you want

In this playlist, we are going to go over how to set up and use urql as a GraphQL client.

You will learn how to set up an Urql Provider component so that all of your React components have access to urql. Then you will learn how to use 3 of urql's React Hooks:

• useQuery
• useMutation
• useSubscription

Each of these lessons covers their corresponding GraphQL topic: Queries, Mutations, and Subscription.

A menu dropdown is a common component that you will build and style in any application. In this collection 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.

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.

We'll cover styling:

• Card components
• SVG Icons
• Badges
• Images

A Journey with Vue Router with Laurie Barth

Building Accessible React Apps with Erin Doyle

Intro to State Machines and XState with Kyle Shevlin

Create Custom CLIs with swyx

Use React Suspense to Simplify Your Async UI with Kent C. Dodds

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: joeprevite.com

A collection of lessons about generators in JavaScript to help developers understand how useful they can be in many common scenarios.

The Navbar is a common component you will find yourself styling in almost any application. In this collection, 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

Lessons based on posts from my blog - https://kyleshevlin.com

Node.js is a well established server runtime that many companies are using worldwide. Express.js is a server framework for Node.js used by over 5 million projects. ReasonML is a type-safe functional language that compiles to Javascript.

This playlist collects the basic pieces of information a programmer needs to get started building servers in ReasonML on Node.js and Express.js. Follow along to learn how to get the speed of Node, combined with the added type-safety of Reason.

Ongoing playlist.

Don't be afraid to watch videos at 1.25x if the pace is too slow!

Start testing with confidence

This playlist explains what will be covered in each course in testingjavascript.com.

Everything you need to know about how to design beautiful custom designs from scratch with Tailwind.

You'll learn how to:

• install tailwind in your project
• design with the utility first workflow
• use tailwind for responsive design
• Extract Tailwind component classes

VSCode is a free and powerful text editor for writing code. I use it daily and continue to find useful and interesting tips and tricks regularly. I want to share those tips and tricks with you.

Framer Motion is a production-ready animation and gesture library. With it you can create beautifully smooth animations with minimal effort, or compose together elaborate sequences of animations with low level APIs.

These videos showcase some of Framer Motion's key features and how to get started implementing them.

Collection of top tips and tricks based on recommendation, popular demand and personal preferences.

This collection of lessons will cover a variety of topics that teach you how to work with slices and arrays in go. You'll learn how to declare them, create them using literal syntax, iterate over them, add to them, remove from them and other useful things.

Get started.

With the release of the React Hooks API, it is now possible to store state in functional components. In this playlist, we'll take an initial look at the useState hook as well as a few others. In one of the later lessons, we'll build a custom hook, a tool for easily sharing functionality with more that one component.

This collection of videos teaches you how to use KeystoneJS to build a CRUD-ready GraphQL API, coming with an automatically generated Admin UI.

Starting with a blank file, we will create an API by:

• defining "Lists" as content types
• adding fields (Select, Text, Checkbox, ...) to our lists
• customising access control to define what users can (and cannot!) do with our API.

Released in 2015, ES6 was a major update to the JavaScript language, providing many new powerful additions to the language. From arrow functions, classes, generators, and proxies to Promises and Modules, ES6 solved many of the languages problems with cleaner, more concise syntax and functionality.

Since then, a new version of JavaScript is released every year, providing even more power to JavaScript Developers:

ES2016 brings with it Array.prototype.includes, ES2017 has async and await, ES2018 adds new capabilities to regular expressions and async iterators, ES2019 has Object.fromEntries, Array.prototype.flat and flatMap, and ES2020 has dynamic imports, globalThis, and BigInt.

Staying up to date with the language as it evolves saves you from being stumped by new APIs and syntax! Learning ES6 and Beyond will ensure you can drop into any JavaScript codebase and have the best shot at being productive on day one.

Flutter set as a collection

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 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 19 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!

Learn some of the new features of TypeScript 3.7

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.

Fauna is inspired by Calvin, has built-in GraphQL integration, and a query language based on lambda calculus. Be sure to check out the Jepsen analysis and the associated chart of consistency models

Theme UI is a library created by Brent Jackson for building themeable React apps with Gatsby. It's built with Styled System which provides a constrained set of styling APIs based on props. It uses Emotion and MDX underneath which abstracts us away from a lot of the challenges when dealing with global CSS and styling content.

Theme UI uses "presentational context" to allow a component to apply styling to child elements without introducing global styles. You can use a styles object in your configuration to apply theme-aware styles to ensure consistency.

Introductions to various RxJS Operators including of, from, fromEvent, interval and zip.

The videos in this playlist will get you started building serverless applications using AWS SAM. It covers

• Setting up your AWS credentials
• Building and deploying a Lambda
• Testing your Lambda locally
• Cleaning up your AWS account once you've finished

Awesome VS Code Extensions

Learn the main additions. Including flat, flatMap and Object.fromEntries.

unified enables new exciting projects like Gatsby to pull in Markdown, MDX to embed JSX, and Prettier to format it. It’s used in about 300k projects on GitHub and has about 10m downloads each month on npm.

unified uses abstract syntax trees, or ASTs, that plugins can operate on. It can even process between different formats. This means you can parse a markdown document, transform it to HTML, and then transpile back to markdown.

unified leverages a syntax tree specification (called unist or UST) so that utilities can be shared amongst different formats. In practice, you can use unist-util-visit to visit nodes using the same library with the same API on any supported AST.

A list of Python tidbits that I've used in projects so that I can remember them later.

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container. It can also control how the elements are positioned within a flexed container.

Once you start thinking in rows and columns, you can control almost any flexed layout with just a few simple flexbox layout primitives.

This playlist covers various aspects of CSS including different rules, selectors, and patterns

VSCode ships with quite a few features that aren’t immediately apparent. This playlist will guide you through some of the features VSCode has to offer and get you comfortable navigating and editing files in it.

Learn:

• VSCode Command Palette
• Configuration
• Navigation
• Custimization

In any programming language or JavaScript framework, you’ll find yourself writing certain lines of code over, and over… and over again. That can be automated. VSCode uses the idea of snippets to do this. Snippets allow you to define templates that write the boilerplate for you in whenever you need.

You can define your own snippets, download them as a package from the Marketplace or use Emmet (pre-installed) to save time and avoid writing boilerplate or commonly used patterns.

VSCode can be used for almost any programming language or framework. That encompasses quite a few workflows.

Through extensions and built-in features, you can customize VSCode to suit the workflow you need that will support your development.

Gain efficiency in navigating and manipulating text in VSCode. If all you’re using right now is your mouse, you’re leaving a lot on the table in terms of efficiency.

VSCode gives you the ability to detect patterns in text and manipulate those patterns as you see fit. e.g. when you’re renaming a variable, you don’t want to rename just the declaration but all the uses of that variable in one file. Do so in just a few key presses.

React hooks can be used to add state to functional components, as well as replace the lifecycle methods that only class methods had available until now.

This playlist goes through several different hooks available now in React, as well as how to make your own custom hooks!

Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes.

As a result, GraphQL developers everywhere wanted to use them for their Apollo Client components, instead of relying on render props pattern. In August of 2019 things have changed and Apollo Client now has official support for React hooks, by providing useQuery, useLazyQuery, useMutation and useSubscription hooks.

If you'd like to learn how to use them, this playlist is for you!

React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more features of React together to write simpler React components.

Some introductory lessons on Webpack (webpack.github.io). Not tied to any particular framework.

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.

Here are all the Egghead.io lessons about testing with Jest! http://facebook.github.io/jest (https://kcd.im/egghead-jest)

Updating this playlist is too hard. Check out: http://kcd.im/advanced-react and http://kcd.im/beginner-react

These are some of my egghead.io lessons that are focused on JavaScript.

Make a command-line app open in a new window, turn it into a Mac App, add new services to Finder, navigate easily between Finder and Terminal; do it all with AppleScript and Automator.

Apollo Federation allows you to orchestrate different GraphQL services into a single GraphQL gateway. In this playlist, we'll introduce you to the core concepts of Apollo Federation to get you started by improving an example app for Snowtooth Mountain.

The lift ops team has created a Lift service that provides lift status reporting for skiers and the ability to change the lift status for ski patrollers. The mountain ops team has created their own service to report on Trail status. These are completely separate GraphQL APIs, and we'll turn them into federated APIs that work under one gateway.

In this playlist, I share all the accessibility tips and tricks lessons that I've created so far! Take a look, it's less than 15 minutes!

A playlist with enough videos to get you up and running with the basics of JavaScript.

A playlist with enough videos to get you up and running with the basics of JavaScript.

A playlist with enough videos to get you up and running with the basics of JavaScript.

A playlist with enough videos to get you up and running with the basics of JavaScript.

This is a series of livestream recordings that have been previously recorded and edited.

Formik, created by Jared Palmer of The Palmer Group, is a library for creating forms without tears. Formik takes care of the repetitive aspects of form building like managing values, errors, and touched fields. Formik also orchestrates validation and submission so you don't have to.

During this playlist, you'll learn how to spend less time wiring up state and change handlers and more time focusing on your business logic. We will be covering topics like refactoring your current non-Formik forms to Formik, writing quick and easy validation rules, learning how to integrate third-party component libraries, and much more.

Stop wasting your time and tears building forms, and use Formik.

Dealing with forms in React can seem intimidating. This playlist is a work-on-progress compilation of short screencasts about the subject. (And, it uses hooks throughout!)

For the curious, I have also wrote articles on forms in React and even self-published an ebook, The Missing Forms handbook of React

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.

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.

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

Learn TypeScript in practical context with React examples!

In this playlist, we will explore the fundamentals of Figma’s tool set and how you can use them for various design functions. We are going to start from scratch and walk through various scenarios you may encounter when designing a website or application. We will cover building reusable designs (known as “components” in Figma) all the way to prototyping your designs to show screen transitions and animations between state. By the end of the course, you will understand the basics of Figma and know how you can use it to your advantage when building your next app or website.

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!

We will be looking at the syntax and semantics of the Dart programming language. Dart is expressive and powerful, with a very friendly learning curve. We will also cover various aspects of the Dart ecosystem, including its tools and packages to make you a productive developer. This knowledge will enable you to develop software for client, server and mobile when using the Flutter framework. This will be well-suited for beginning and experienced programmers alike.

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

Writing effective unit tests can be tricky in any language, and JavaScript apps often get neglected because testing UIs can be particularly tricky. While some of that can be solved by restructuring code and choosing tools that make everything more testable, it's also helpful to know some of the tricks of the JavaScript testing trade, like good mocking and stubbing practices. This playlist is full of tips for how to write tests that verify your code without any undesired side effects.

Lessons about new features of the Create React App 2.0 release.

Learn how to set up a NativeScript app alongside your apps in an Nx workspace and share libs seamlessly.

These lessons cover converting a React app from using traditional CSS loaded from a file to styled components.

Learn the basics of Docker.

Tips and tricks on using React with TypeScript

Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.

ES2016 standardized only two new features: the exponentiation operator and the Array.protoype.includes method.

Learn how to style your app whether it's with standard CSS or with SASS. Also learn how to take full advantage of the default core theme to create your own custom themes.

This playlist is designed to get you up and running from no node.js experience to developing your own applications as quickly as possible.

Now, from Zeit, is the best thing that's ever happened to deployment. Learn how to use this tool to launch your app to the world in moments.

Bootstrap allows customization of its UI library at compile time using SASS variables. In React we can do better by theming at runtime using a context based theme. We also look at overriding component styles and styles that depend on component nesting.

These are all of my egghead.io lessons that are about webpack.

Grunt is a useful tool for automation. Let's learn how to use it!

Ready to dig in to AngularJS? These lessons will get you started.

angular-formly is an AngularJS module which has a directive to help customize and render JavaScript/JSON configured forms.

Riot.js is a tiny "React-like" micro-library. It is relatively easy to learn because of its simple syntax. While riot is small, it is complete and delivers a ton of functionality in its itty bitty footprint.

Reflux takes the ideas of Flux, and creates a comprehensive workflow for you to apply unidirectional dataflow to your applications.

Want to spruce up your web application with some nice animated effects, but don't want to use some big library or framework? CSS transitions might be the place to start!

These are a variety of egghead style lessons. They range in length and presentation, and reflect the instructors own style. None of them are perfect, but they are all awesome. 👍

To understand recursion, you must first understand recursion.

The age old question of Angular 1.x. When do I use the service, factory, or provider? These lessons should help you decide!

Need to manage relationships between your PostgreSQL, MySQL, MariaDB, SQLite or MSSQL entities in Node.JS? Sequelize provides a clean way to get promise-based ORM in your Node application.

Reduce is an extremely useful tool for extracting data out of collections of data.

Arrays of data are a foundational aspect of programming computers with JavaScript (and many other languages!), and understanding how to use them effectively is a core skill.

react-motion provides a powerful simplified API for Reacts TransformGroup, allowing for easy animated effects in your React applications.

Gone are the days when you have to reach for Python, Ruby, or some other language to accomplish your webpage scraping needs. These days, there is a robust set of JavaScript tools running on Node that help you harvest data from your favorite web pages.

Get to know Javascript's Array. Learn to harness it. Learn to embrace it. Learn to love it.

Webpack is a fantastic javascript build automation tool.

Learning ui-router can be challenging. These lessons are here to help!

Some of the basics of JavaScript that you need to know. The good parts, that you will use every day.

Angular 1 controllers are the bridge between the DOM and your data. Beware the bloated controller! Keep them slim 😜

Scopes in Angular 1 tie the DOM to your data (via a controller).

ES6 or ECMAScript 2015 is the next generation JavaScript standard. It has a lot of awesome features.