Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads.

CSS Animations are crucial for the perceived performance purposes since it shows for the user the content is loading by using animations as feedback for whoever is accessing the page.

Follow the steps in this course and you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations, focusing on Web Accessibility and Web Semantic.

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!

For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.

Learn how to:

• Generate markup with loops and template literals
• Leverage native HTML behavior
• Create SVG
• Use CSS variables and scope
• Implement game logic with HTML forms
• Animate SVG with CSS
• Use CSS Animation to provide motion
• Use Pug Mixins
• Disable motion when users don't want it
• Apply visual effects using CSS filter and backdrop-filter
• Generate random animations using Pug and CSS variables

Many engineers working with redux have felt burdened by large amounts of boilerplate code and confusing indirection. These apps often rely on legacy patterns that are no longer recommended, but are still commonly found in production code bases. If you are are an engineer working on such an application, this course is for you. In it I will show you how to modernize your application, with react hooks, one component at a time. At the end of it, we'll still be using redux, but the structure and content of your code will be significantly improved.

We will cover migrating class components to functional components with react hooks and how to replace connect() with redux hooks. This course will serve as a good tutorial for learning react hooks. It will also help you apply modern patterns for using redux. These patterns, powered by the new useSelector and useDispatch hooks will transform your redux applications for the better.

A series of lessons to help you get more familiar with modern JavaScript syntax.

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib.

elm-ui is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way. The novel part is that it does not require you to know CSS to be used, you can start building layouts right away!

You'll learn how to:

• use a declarative mindset for building UIs
• position elements on the screen
• create layouts with rows and columns
• build a form with elm-ui

Forms are one of the most common features of a web application. They are also a common cause of headaches. The controls you use, the markup for the structural layout, and the styling all have to be considered.

What you build can look and behave differently depending on the browser being used, and how you build it can impact the accessibility of your application.

Stephanie Eckles has prepared several lessons that work through the creation of a complete form demo featuring the most common controls with a variety of attributes.

You'll create semantic fieldsets, add responsive styles without media queries, and prepare styles for accessible validation.

The demo is built with Sass and Eleventy. Don't worry if you don't have prior experience with these tools— Stephanie's code and explanations make it easy to follow along, and additional resources are available if you need them.

Gatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, Webpack, react-router, GraphQL, and other front-end tools to provide an excellent developer experience.

This course takes you from initializing a Gatsby site via CLI to utilizing the Gatsby Ecosystem to source MDX files from your system. After tackling the file system you'll optimize for SEO as well as additional styles through ThemeUI that will support features like syntax highlighting in code snippets. Finally, you'll learn how to performantly process and render images.

By the end of the course, you'll have a fully functioning developer blog that will serve as a base for larger production-grade applications.

You'll learn:

• Installing Gatsby and the Gatsby CLI, and adding them to package.json
• Using file system route API to create collection pages
• Use GraphiQL to make queries based on source plugins
• Creating a blog post listing page with links to every post
• Sourcing and transforming images
• Making the site SEO-friendly
• Built accessibly

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.

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

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 course we will use Symbl.ai to get transcripts for the video we will upload as well as more meaningful insights.

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

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

The Admin UI provides simple yet powerful tools to model database tables, add authentication and authorization, and manage app content, users, and groups. It also offers the ability to manage the application users and content.

The AWS Amplify Admin UI focuses on data types rather than backend infrastructure.

All the backend resources generate infrastructure as code (IaC) templates that can be committed in the team repository and integrated with AWS Amplify continuous deployment workflow to manage the different environments.

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

Cloudflare Workers is a serverless application platform that enables you to create and deploy functions to Cloudflare's Edge Network.

Unlike other serverless providers that only have regional data centers, Cloudflare's Edge Network consists of hundreds of servers all over the world.

Cloudflare Workers is a powerful platform, and this course serves as a great introduction for what it can do.

Follow along with Kristian Freeman as you build a localization engine that renders data based on the Edge location nearest to the application's user.

After this course, you'll be ready to start experimenting with your own Cloudflare Workers projects. Need an idea? Check out the suggested Portfolio Project for this course.

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!

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.

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

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.

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.

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.

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.

While "It works on my computer" might give you an excuse to close a bug ticket in the backlog, it doesn't really work when you're working on a team.

You need to ensure that your application can run regardless of what hardware your teammates are running or libraries they have installed.

Docker solves this problem by collecting everything your application needs to run into a container.

Containers aren't just for source code. They can hold configuration, scripts, and even their own filesystem. It's similar to a Virtual Machine, without having to bring a full operating system along for the ride.

Because containers run in isolation, there is some configuration involved to allow for files to be saved and containers to communicate with one another.

One of the most useful ways to get your head around Docker is to see it in action.

Follow along with Joel Lord as he works through the process of preparing an application to run in separate containers for the frontend and backend of an application that searches for gifs and re-encodes them with a caption supplied by the user.

You'll see how to configure the separate containers to communicate with one another, work with environment variables, and persist data to your local machine. Along the way, you'll pick up some tips on useful commands and bash scripting. Finally, you'll learn how to use Docker Compose to make it easy to run multiple containers simultaneously.

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?

Anything related to JavaScript performance

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!

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.

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

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!

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.

Work in progress

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

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

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

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

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

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

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

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.

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.

A collection of CSS tricks to tackle various problems.

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.

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

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

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

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.

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

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

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!

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.

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

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

Check out the accompanying article!

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.

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.

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.

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 use the features of gatsby-theme-blog version 2.0.

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.

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.

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.

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.

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.

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

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

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!

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

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.

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!

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

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!)

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.

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

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.

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! 🏞

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

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

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.

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

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

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

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

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

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

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

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

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

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!

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!

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.

Amazon AWS is one of the most popular cloud providers in the world, but it can also be daunting to learn thanks to the alphabet soup of service acronyms.

Once you've figured out which subset of services to use, you've got a lot of clicking around to do in order to get things configured.

Not anymore!

With the AWS Cloud Development Kit (CDK), you are able to configure AWS services from your terminal & editor.

Even better, you can do your configuration, frontend, and backend all with the same language.

In this course, Tomasz Łakomy will guide you through using TypeScript to complete the lifecycle of an application powered by AWS CDK. You'll see how to start a project, develop it locally, deploy it globally, then tear it all down when you're done.

The services & development approach Tomasz demonstrates in this course are used by countless companies around the world.

Is yours next?

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!

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.

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

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 😃

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!

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.

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.

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

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!

A collection of Vim videos for beginners

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.

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

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.

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!

Some cool stuff in nodejs

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.

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.

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.

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.

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!

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

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.

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.

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!

Learn to use some of the tips and tricks that can help you write better TypeScript. 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.

View and Contribute to the Community Notes!

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

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

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.

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!

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

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

Does your query seem slow?

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

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

The "all or nothing" transaction is the cure.

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

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

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

Check out the Community Notes for this course.

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

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, "Hey there, nice Bootstrap app."

So if you want a fully custom design, you are back at step 1.

There's a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.

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

Design with Tailwind CSS is a 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.

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

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.

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.

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

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!

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

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

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

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

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

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

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

Check out these community notes for this course on Github.

Next Steps: Basic Types in Rust

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.

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

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

Luckily, we have RxJS to help!

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

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

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

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

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.

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

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 🙂

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

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

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.

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

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

Ongoing playlist.

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

A Journey with Vue Router with Laurie Barth

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

This is a preview and overview of all of the modules included with Testing JavaScript

Testing JavaScript applies the four-layer testing method to a React application, but this foundational strategy can be applied across any JavaScript framework: Angular, Vue, legacy Backbone apps, even frameworks and libraries we haven’t met yet.

Following this course, you’ll be equipped to:

• deliver solid features that work for users as expected choose the best tools for the job
• communicate more effectively with your coworkers
• be a more confident, professional JavaScript developer

Learn the professional method for JavaScript testing and always ship high-quality software like the professional you are.

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

Create Custom CLIs with swyx

Building Accessible React Apps with Erin Doyle

Intro to State Machines and XState with Kyle Shevlin

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

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

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

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

Start your journey into web security today!

Check out these community notes for this course on Github.

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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.

Beyond the basics.

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

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

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

It doesn't have to be like this!

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

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

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

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

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

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

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

Check out these community notes for this course on Github.

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

That better way is state machines.

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

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

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

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

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

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

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

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

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

The answer? State machines.

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

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

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

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

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

🚧 SUSPENSE IS EXPERIMENTAL

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

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

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

React Suspense is the answer to these problems.

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

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

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

🚧 CONCURRENT MODE IS EXPERIMENTAL! 🚧

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

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

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

In this workshop, Jason Lengstorf will take you from an empty project folder all the way through deployment of a Twilio-powered video chat app built on Gatsby.

Along the way, you’ll learn powerful concepts like dynamic route handling in Gatsby, form management with React Hooks, writing custom React Hooks, context management and reducers in React, handling real-time interactions in a React app, creating serverless functions in Twilio, and setting up a Twilio account to support realtime video calling.

When you see the word “theme” you might think of the visual aspects of a site or code editor where setting an option in one place can change the look everywhere.

Gatsby Themes take this idea to another level by allowing you to change and compose entire pieces of functionality.

In this advanced course, you will iteratively convert a fictitious SaaS website with marketing, eCommerce, blog, and dashboard pages into a set of horizontally composed Gatsby Themes.

After everything's been split up, you will build a deeper understanding of parent/child theme relationships by exploring the blog data model with schema customization APIs that allow us to create multiple child themes with data sourced from different node types.

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

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

But not in Vue!

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

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

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

Everything is great, until it’s not.

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

What about prototypal inheritance or coercion?

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

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

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!

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

Learn some of the new features of TypeScript 3.7

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.

React 16.8 introduced Hooks like useState for using stateful logic in our function components, and useEffect for side effects previously only used in class-based components.

The React Team has given developers a way that simplifies using core features, but what's that mean for the code that you write?

In this self-paced workshop, you'll work through refactoring a component to use a custom hook, and learn to apply the patterns used by the React team to your own code.

Follow the React Team's lead, and make your code more readable, reusable, and reasonable!

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

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

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.

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.

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

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

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

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

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

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

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

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.

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.

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.

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

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!

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 🚀

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!

Gatsby Themes are the next iteration of web development. They take all the good things about Gatsby and make them even more reusable and extendable. Themes are composable chunks of fully functional websites-- not just visual aspects.

Because they’re composable, you can have multiple themes on a single site. This lets you pick the right eCommerce theme, with whatever backing engine you want. You can then install whatever blog theme you want-- Wordpress, Contentful, etc. and you can customize them both. It's up to you!

For a written version of this course, check out the Gatsby docs.

Staying up to date with JavaScript’s changes saves you from being stumped by syntax.

In this course, you’ll learn about all latest language features published with ES2019 and see how they solve problems, using the example of a Nuxt.js application.

From optional catch binding to creating an object from a list of key-value pairs, you’ll learn the benefits of these new features and understand when, why, and how to use them in your legacy projects and upcoming work.

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.

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.

The JAMstack, short for “JavaScript, APIs, and Markup,” has been making waves in the world of web development.

Building JAMstack applications removes the hassle of building out a backend from scratch, freeing you to focus on what really matters: your content.

In this course, you’ll learn how to build and deploy your own static Gatsby site that pulls external data from Contentful and then deploys to the web with Netlify. After the course, you’ll have all the knowledge you need to build a blog, marketing site, or portfolio with Gatsby. Just add content.

Check out these community notes for this course on Github.

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.

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!

Modern applications know how to keep users informed of realtime updates through notifications, popups, and other messages.

On the development side, the ability to not only create web apps but have them communicate in realtime is a quirky, standout skill for your resume. It’s interesting, useful, and powerful.

In this course, Mark Barton will show you how to use Socket.io to facilitate bi-directional client-server communication and notifications using Vue on the frontend. Socket.io is a JS library that connects a client-side library to a node.js server. In the course, you’ll see how to use Socket.io to broadcast simultaneously to all or targeted clients based on filters you set up — so the right people see the right message at the right time.

You’ll learn to set up and connect Socket.io with node.js and Vue, and you’ll get practice making informed, complex architectural decisions around realtime broadcast messaging.