Resources for Web Developers in 2022

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


Cascading Style Sheets bring order and beauty to our applications.

Learn CSS Animations for a Better User Experience 

Drag and drop (dnd) experiences are often built to sort lists of content vertically and horizontally. 

react-beautiful-dnd is an excellent tool for these use cases. It utilizes the render props pattern to build accessible dnd functionality into lists that look and behave as you would expect—and you’ll even get keyboard-accessible dnd, straight out of the box, with no extra work required. It’s actually easy to start using, and this course is a great place to start.


We will create a highly interactive task management application from scratch using the building blocks of react-beautiful-dnd. Over 14 lessons, you will get practice in:

- building droppable containers to sort draggable items horizontally and vertically
- moving items between columns
- and even moving the columns themselves

Following the course, you’ll be ready to build powerful dnd experiences into your own projects.

Check out [the community notes for this course on Github](https://github.com/eggheadio-projects/Beautiful-and-Accessible-Drag-and-Drop-with-react-beautiful-dnd-notes).

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Beautiful and Accessible Drag and Drop with react-beautiful-dnd

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](https://curl.haxx.se/)
- [Install node 14](http://nodejs.org/)
- Be familiar with the terminal

View the source for this project in the [project's github repo](https://github.com/xjamundx/egghead-express).

**Notes**:

- I'm not very pedantic about REST and basically just mean an API over HTTP
- [Express 5](https://expressjs.com/en/guide/migrating-5.html) 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](https://www.npmjs.com/package/express-async-errors) to add support for `async` routes and middleware

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

express

Build a REST API with Express 5 and node 14

With GraphQL, you can define the shape of your data in a schema, and GraphQL will fulfill the request with the precise data you need. When you need it. This doesn't come without a cost. GraphQL adds a lot of complexity to your application by requiring you to define your schemas through types, mutations, and resolvers.

AppSync is a fully managed serverless GraphQL service that fast-tracks your API development. You can define a single type, and AppSync auto-generates a schema, queries, mutators, and subscriptions for you.

In this course, Nader Dabit will show you how to:

- build a production-ready GraphQL API through AWS AppSync
- create and modify data through the AWS AppSync console
- connect a React application to the GraphQL API
- execute queries, mutations, and subscriptions for data through the API in React

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

graphql

Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

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. 

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

javascript

Auth0 Tips and Tricks 

Cascading style sheet (CSS) selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance. 

In this course, we will start with basic selectors and work our way through more complex classification of selectors, explaining common use cases along the way. Finally, we’ll look at how selectors can be combined and how selector specificity can create some common problems.

CSS Selectors in Depth

**View and Contribute to the [Community Notes](https://github.com/eggheadio-projects/learn-aws-dynamodb-from-scratch)!**

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Learn AWS DynamoDB from scratch

Developing logic-rich applications is a key skill to have.

The TypeScript–React combination helps you unlock that skill, and it’s a great developer experience in terms of writing understandable and refactorable HTML. But the default state management for React has a long way to go to feel simple and maintainable — and that’s where MobX makes your life so much easier. MobX keeps things simple without using complicated setups like `provider` and `connect` that provide way too little value for all the mental overhead. 

In this course, you’ll see how to model your React application logic using simple JavaScript classes — and with the help of MobX, make those classes the beating heart of your React applications. You’ll learn:

- that you don't need advanced annotations and TypeScript features to use MobX
- how to easily refactor code through TypeScript
- how to use TypeScript to track the flow of state as properties change

Develop React Applications with Mobx and TypeScript

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!](https://github.com/eggheadio-projects/intro-to-dynamodb)**

Intro to DynamoDB

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!](https://github.com/eggheadio-projects/build-serverless-applications-with-aws-sam)**

Build serverless applications with AWS Serverless Application Model (AWS SAM)

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 an Optimistic UI in React with SWR

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!

Build a "Name Picker" app -  Intro to React, Hooks & Context API

Algorithms are functions that are used to solve a class of problems. Really any piece of code can be a algorithm! There are common algorithm implementations that have proven to accomplish tasks faster than others. However, speed is not measured in seconds but in terms of growth (Big O notation). 

This course is designed to teach not only some of those algorithmic approaches to everyday problems but review the pitfalls and optimizations that comes with using them at all. They can be a dynamic and powerful way to optimize calculations, processes, and performing tasks. However, if used incorrectly it can not only destroy a system but can be a nightmare to untangle. Many programming positions today test the knowledge of an individual’s ability to understand and implement algorithms. Let’s work through  recursion, sorting, loops, and many more! 

Algorithms in JavaScript

_Feels like magic._

It’s a beautiful feeling when technology works in mysterious, miraculous ways. So smooth! So effortless! So…

_Wait, that’s not right. What’s it doing? I don’t get it. Help!_

…until you encounter unexpected behavior. Good luck debugging magic.

To use technology to its fullest, you need to understand how it’s accomplishing the tasks set before it. 

This course de-mystifies RxJS. It feels like magic, but it’s also one of the most laborious technologies to learn in front-end web development. We’ll open up the internals to take an up-close look at how RxJS handles Async programming so smoothly.

Over 12 lessons and 31 minutes, you'll get a handle on:

- how RxJS pushes values from observables to subscribers, which take care of the output. 
- how operators handle all of the "in-between" operations where you can manipulate the values while they're still in-flight.
- the internals of operators and subscribers and how to customize operators to your specific needs.


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


rxjs

Build Your Own RxJS Pipeable Operators

GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

GraphQL Data in React with Apollo Client

The tools available for unit testing have come a long way. While testing may never be “easy”, the available tools have certainly moved testing closer to the simple end of the spectrum. Full end to end testing hasn’t quite kept the same pace and as a result many applications are testing manually and often by users in production. Cypress provides a testing environment that makes end-to-end testing fast and reliable with a simple API that makes creating automated unit tests for your web applications a no-brainer.


Fast, easy and reliable testing for anything that runs in a browser.

cypress

End to End testing with Cypress

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

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

You will learn how to:

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

Have fun!

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Chrome DevTools tips & tricks

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.

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

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

Elixir is a dynamic, functional language designed for building scalable and maintainable applications.

Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development and the embedded software domain.

elixir

Getting Started with Elixir

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.

Bite-size video tutorials for badass web developers.

egghead

Automate Everything: An egghead Guide to Productivity

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](https://egghead.io/courses/write-your-first-program-with-the-rust-language), this collection is the right place to get more familiar with the language!

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