Resources for Web Developers in 2022

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various properties exposed. We’ll talk about timing, filtering, throttling and generally using the network panel to better understand the ways in which our applications exist within a connected context.

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

chrome-devtools

Debug HTTP with Chrome DevTools Network Panel

This course will pick up where we left off with the [Redux Fundamentals course](https://egghead.io/series/getting-started-with-redux). If you haven't watched that yet, you are highly encouraged to do so!

You are about to learn practical production ready techniques for building your React and Redux applications. You will explore advanced state management, middleware, React Router integration, and other common problems you are likely to encounter while building applications for your clients and customers.

Even if you have already spent time studying Redux, this course will show you better practices straight from the library's creator Dan Abramov.

**[Click here to see the Community Notes on this course](https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_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

Building React Applications with Idiomatic Redux

Arrays of data is one of the first things we learn about as programmers. Collections of information are a fundamental building block of most programming languages.

JavaScript is no exception. In this series, we will explore JavaScript (es6) array methods. We will slice, join, map, and reduce our way to better understanding of the powerful array methods that modern JavaScript delivers.

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

Understand JavaScript Arrays

TypeScripts purpose, the reason it exists, is to add a solid type system on top of ECMAScript 6+. JavaScript is a dynamically typed language. TypeScript applies a fundamental change to the language and applies static typing to the code in our applications.

This course will dive into the type system that TypeScript provides. You will gain a deeper understanding of what types can do for your applications. 

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

typescript

Use Types Effectively in TypeScript

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](https://reactjs.org/docs/hooks-reference.html) and how to replace `connect()` with [redux hooks](https://react-redux.js.org/api/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](https://react-redux.js.org/api/hooks#useselector) and [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) hooks will transform your redux applications for the better. 

Modernizing a Legacy Redux Application with React Hooks

There are plenty of introductions to RxJS, but few resources that take you deep into the library, providing an accurate understand of what each piece performs.

In this course we will gain intermediate knowledge of RxJS, focusing on one aspect: how to create Observables. We will see how Observables compare to functions, how they compare to ES6 generators, what are the empty(), throw() and never() Observables, and other static factories that help in making Observable sequences.

Start following this course if you have a superficial understanding of RxJS, but want to gain confidence in using it.

If you're new to RxJS, we highly recommend this [Async JS course from Jafar Husain](https://egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop) to get a solid intro to the concepts. From there, you can watch this [Introduction to Reactive Programming using RxJS](https://egghead.io/series/introduction-to-reactive-programming), and you will be prepared for this course!

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


rxjs

RxJS Beyond the Basics: Creating Observables from scratch

Bite-size video tutorials for badass web developers.

egghead

Manipulación Eficiente de Arreglos con JavaScript

Tic Tac Toe is a classic game that has a relatively simple win condition. Get three of your pieces to line up in a row on a 3x3 grid-style board and you win, and also prevent your opponent from doing so.

This makes the game a great challenge to represent as code. 

In this course, you will start with a blank create-react-app application, learn how to build a 3x3 grid (with CSS Grid), and power that grid so that you can take turns with another person and play tic tac toe. 

You'll model the game state as a multidimensional array where you will manage and update that state with `useReducer`


Manage Complex Tic Tac Toe Game State in React

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

In this course, 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 uses 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.

Build Advanced Components with React Hooks

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.

Manage React State with Recoil

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

If you are developing JavaScript applications you are likely using logging as an integral part of your development process. Did you know that you aren't limited to simple `console.log` statements? Modern browsers give you a lot more logging options to work with!

This course will explore those options and give you some new logging tools for your professional toolbox.

Advanced Logging with the JavaScript Console

Most examples for reduce show you how to take an array of numbers and reduce them to a simple sum. Reduce is a great tool for this, but it can do so much more. It is a powerful tool, and essential to functional programming techniques.

This course will dig deep into the Array#reduce in JavaScript and give you a solid understanding to start using it today.

Reduce Data with Javascript Array#reduce

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

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

How to Contribute to an Open Source Project on GitHub

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.

Create New Tools with Mac Automation

Vue is a "progressive framework for building user interfaces." Its core library is designed to be fast and flexible and is only focused on the view layer.

In this course, you'll gain a basic understanding on how to construct components and nested components and see how Vue reactively keeps the DOM up to date when data is changed. You should get a taste of what Vue has to offer and gain a better understanding of how you can use it for your own application development.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Develop Basic Web Apps with Vue.js

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

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

HTML Templates With Twig

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

AngularJS and Webpack for Modular Applications

RxJS is tremendously helpful in working with asynchronous code, but you’ve probably been stuck trying to use concepts you already know from Promises or Callbacks and applying them directly to RxJS. These lessons walk you through the step-by-step of building a simple game application with many asynchronous pieces. Each lesson focuses on a single operator or idea of how RxJS helps simplify your code as well as making you code flexible enough to easily add more asynchronous pieces as your codebase grows.

Step-by-Step Async JavaScript with RxJS

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.

Up and Running with Amplify Static Site Hosting

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!