Resources for Web Developers in 2022

With the variety of choice we have in building modern web applications using JavaScript, it can make it difficult to understand where to even begin. We live in a wondrous era, where every problem we have seems to have a corresponding javascript module on npm that we can install with just a few keystrokes. It’s easy!


Often, “easy” can mean the opposite of simple. Easy is “quick to do”, where simple is “quick to understand”.


KISS.


In this course you will learn how to build production quality React applications. We will strive to keep things as simple as possible, with minimal dependencies. Instead of typing `npm install`, we will build our own simple solutions first, to get a solid understanding of the problems that we are solving through libraries. We will build our tools in a functional style, and write appropriate unit tests to verify that they work as expected.


If you are brand new to React, you’ll want to read the documentation and watch our [free React Fundamentals course](https://egghead.io/courses/react-fundamentals).

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

Build Your First Production Quality React App

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

How to Use npm Scripts as Your Build Tool

It’s amazing how much you can accomplish with a basic knowledge of SQL. In this course we’ll learn how to store lots of information (many millions of things!) and answer nearly any question we might have about that information (on the order of milliseconds!) 

We’ll learn enough to make you say you “know SQL” -- table creation, inserts, selects, updates, deletes, aggregations, indexes, joins, and constraints. Along the way we’ll model real world problems so that you can see just how powerful SQL will make you!

If you’re interested in the Postgres client that is used in this course you can [download it here](https://macpostgresclient.com/?source=brett) to check it out and follow along.

PostgreSQL is a powerful, open source object-relational database system.

postgres

Get Started With PostgreSQL

In this course we will learn and demonstrate the fundamental concepts and APIs of D3, on our way to building several common chart types. We’ll start with the building blocks upon which all D3 visualizations are built; things like scales, interpolators, and selections. We’ll see how to load data with D3, and how to put its full name, Data Driven Documents, into action. We’ll build column and bar charts, scatter plots, and area charts. Most importantly, we’ll gain an understanding of the conventions and patterns that underlie all D3 projects and examples, enabling you to dissect, understand, and build virtually any D3 visualization on the internet.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Build Interactive JavaScript Charts with D3 v4

Angular Directives allow you to add custom behavior to elements and components. Rather than creating a hierarchy of components to try to "extend" behavior, Angular Directives enable you to compose behaviors on to your components. This includes adding event listeners that hook into services, manipulating templates, and adding more configuration to basic elements. This course helps you understand the concepts around building our Angular directives and provides examples from basic directives that inspect elements to advanced structural directives that completely re-write templates.
If Angular is new and the syntax foreign, you will want to check out [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) and [Building Angular Components](https://egghead.io/courses/building-angular-components).

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

angular

Understand Angular Directives in Depth

We’ll cover per-vertex coloring, advanced use of vertex arrays, more drawing modes for building 3D models, perspective, textures, and lighting.
This course assumes prior knowledge in WebGL. 
**Note:** Check out [Create 3D Graphics in JavaScript Using WebGL](https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl) for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

webgl

Build Complex 3D models with WebGL

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy [this article about contributing to open source](https://egghead.io/articles/get-started-contributing-to-javascript-open-source).

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

How to Write an Open Source JavaScript Library

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like `timing` and `spring` to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

Animate React Native UI Elements

React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the concept of declarative programming and a component based development process. In practice, this turns out to be very nice and gives you a routing solution that is less configuration heavy than many previous solutions.

In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.

Add routing to React apps using React Router v4

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.

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

Composing Closures and Callbacks in JavaScript

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting setup to run our app in the iOS Simulator in addition to an Android emulator using GenyMotion (https://www.genymotion.com/). Understand how to build your native mobile views with NativeScript XML and how to style them with CSS. Using the NativeScript for Angular starter template provides a nice setup out of the box including the core theme which provides handy CSS classes to work with speeding up view building. For page navigation, we will learn how to use the Angular Router to configure a flexible routing setup for our app. The ListView component is a powerful and highly performant native control for handling your lists powered by the UITableView on iOS and native ListView widget on Android. We’ll highlight how you can use RxJS Observables with our native views. Let's also take a look at integrating npm plugins to enrich the UI component library. Lastly, a round up of styling how-to's including integrating SASS for custom app theme creation as well as creating a live app theme switcher.

This Angular course assumes a solid understanding of the fundamentals.
We have Intermediary Angular courses including topics on [Dependency Injection](https://egghead.io/courses/angular-dependency-injection-di-explained), [Components, Directives](https://egghead.io/courses/building-angular-components), [Forms](https://egghead.io/courses/intro-to-angular-forms), [Router](https://egghead.io/courses/intro-to-angular-router), and [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

Create Native Mobile Apps with NativeScript for Angular

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

svgo

Create an SVG Icon System

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

React Hooks and Suspense

Bite-size video tutorials for badass web developers.

egghead

Thinking Reactively with RxJS-resource

In this course we’ll work through Natural’s API for natural language processing in JavaScript. We’ll look at how to process text: learning how to break up language strings, find the word roots, work with inflectors, find sequences of words, and tag parts of speech. We’ll learn how to find important stats about a body of text: how to compare strings, how to classify text with machine learning, how to use the tf-idf tool to find relevant words. We’ll look at some of the extra tools Natural gives us, including the dictionary/thesaurus of WordNet, a phonetics comparer that lets us see if two words sound the same, and a spellcheck feature. We’ll also look at tries and digraphs, two data structures that help us better analyze bodies of text.

Natural is a general natural language facility for nodejs. Tokenizing, stemming, classification, phonetics, tf-idf, WordNet, string similarity, and some inflections are currently supported.

natural

Natural Language Processing in JavaScript with Natural

One of the hardest things about writing non-trivial applications is managing state. In our attempt to effectively manage state, we introduce additional complexity by trying to control application flow and the amount of code volume that comes from all of this. Redux gives us the ability to address state management and communication in astonishingly simple semantics that can be explained in just a couple minutes. The beauty of Redux is that it is not only a library but a pattern that works very will within Angular 1.x applications. In this series, we are going to learn how to integrate redux (the pattern) into Eggly from scratch and then introduce **ng-redux** and add in **Redux DevTools** at the end for fun.

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

Build Angular 1.x Apps with Redux

In this course, we will build a ToDo API that stores notes using the OpenAPI Specification (Swagger). We will start with a blank API definition using the Swagger Online Editor. The Swagger definition file will be used to create a Node.js API. Along the way, we will discover how to implement additional details required for a fully functional API requests and responses. We will also learn about the powerful capabilities of Swagger to generate server side code and client libraries.

Open API Initiative (OAI) is focused on creating, evolving and promoting a vendor neutral API Description Format based on the Swagger Specification

openapi

Build Node.js APIs with OpenAPI Spec (Swagger)

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.


We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.

The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

Build a React Native Todo Application

Why does Gatsby use GraphQL? In this series you’ll learn how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

Why Gatsby Uses GraphQL

Generators are a useful tool for handling asynchrony in your JavaScript applications. They were added to JavaScript with ES2015. When applied correctly they allow us to write asynchronous code that looks synchronous.

They also turn one of JavaScripts core paradigms on its head. Contrary to normal functions, generator functions can be paused and resumed at any arbitrary point in time with the yield keyword.

This course will walk you through the basics of generators so you’ll be able to use them in your applications without ripping your hair out!

Write simple asynchronous code with JavaScript generators

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

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