Resources for Web Developers in 2022

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.

In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart's data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.

Animate with the General Update Pattern in D3 v4

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

express

As your application grows, it's easy to end up with a long list of route handlers and helper functions. In this lesson we'll look at strategies for keeping things organized and manageable.

We will move individual subpaths into their own file by using `.router` to create an instance of the Express router.

Organize Code by Subpath in Express

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

We rewrite the Box example using lazy evaulation

Delay Evaluation with LazyBox

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

In this lesson, we use React and the FullCalendar.js JQuery plugin to demonstrate how you can use complex JQuery plugins to create dynamic React components.

Using React with the FullCalendar jQuery plugin

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

typescript

There is a particular arithmetic series that shows up time and time again in analysis of naïve implementations of many common programming challenges.

In this lesson we show why the time complexity is Quadratic, so you don't have to keep analyzing it over and over.

Sum of the most common algorithmic arithmetic series

In this lesson we will finally do something useful with our temperatures. We extend it into a small app in which users can enter a location, which is used as input for an external API to fetch weather data. In the mean time MobX keeps our UI in sync with the current state of the request.

Handle user input and asynchronous actions with MobX

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

In this lesson we cover how to pass an entire array of 3d points to a vertex shader, allowing you to render multiple points at once.

WebGL Vertex Buffers

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.

Let's write some example data and render it to our page with `v-for`, and then see how we can use the same directive to render the same component multiple times.

Render lists of data in Vue with v-for

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


rxjs

In this lesson we will learn how to replace excessive subscribing and Subject emissions with simple uses of the map operator, simplifying our code and making it less bug-prone. 

Use the map operator instead of firing events on a Subject

Bite-size video tutorials for badass web developers.

egghead

Recording can be intimidating, so it's best to just hit the record button and start talking. Take it one thought at a time. Sit quietly, think about what you're going to say/type, then do it. If you mess, up, undo back to when you were quiet and try again. Once you get a good take, move on to the next thought. The ideal raw recording is a ton of bad takes and one good take for each thought. So when you get to the editing phase, you quickly clear out the bad takes and leave the good ones.

Record One Thought at a Time

Passing down stores through each layer of components can be a tedious job. This lesson demonstrates how Provider can be used to automatically connect observer based components to stores, by leveraging React's context mechanism in the background.

Connect MobX observer components to the store with the React Provider

We demonstrate how to build a WebAssembly module that depends on malloc, linking in a pre-built malloc implementation at runtime, using a JS binding trick to handle the circular reference between the two WebAssembly modules. We then optimize the load process to ensure we are fetching these modules in parallel.

Malloc implementation: https://github.com/guybedford/wasm-stdlib-hack/blob/master/dist/memory.wasm

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?1feerp

Demo Repo: https://github.com/guybedford/wasm-intro

Allocate Dynamic Memory in WebAssembly with Malloc

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Writing SCSS @functions is similar to writing functions in other programming languages; they can accept arguments and have return statements. SCSS provides a ton of great features, but sometimes we need to roll our own function. We can do that too! They’re useful when the desired functionality isn’t available from the built in SCSS functions and a mixin just won’t do. In this lesson, we learn how and when to use SCSS function directives.


Write Custom Functions with the SCSS @function Directive

We'll look at using array.reduce to transform an array of strings into an object that counts the occurrence of each string in the array.

Reduce an Array into a Single Object

So far we have been talking briefly about reactions. In this lesson you will learn how reactions can be used to observe state until some condition is met. After that you will see how autorun can be used to automatically trigger side effects. This is used internally by observer as well. We will test this by replacing React with our own handcrafted rendering which is still kept in sync with the state by MobX!

Write custom MobX reactions with when and autorun

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

The Vim editor is a text editor that lives inside of your terminal. Learn how to start Vim, and more importantly how to exit out of the editor! 

Intro to Vim

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

html


It’s really fun to work with graphics when building apps and websites, but how do you get started? HTML5 has a technology called **Canvas** that lets us draw graphics to our screens. We can do everything from making basic shapes to creating complex interactive games and animations! 

In this course, we will learn the basics of using **Canvas**. We’ll start by learning how to create a canvas on an HTML page. Next we will learn how to draw and style with fills and strokes. Finally, we will add interactivity to canvas elements.

Draw in HTML Canvas

We are going to see how to avoid virtually any case of a subscribe happening inside another subscribe by replacing it with a flattening operator such as flatMap or mergeAll.

Use flattening operators instead of nested subscriptions

The `of()` operator essentially converted a list of arguments to an **Observable**. Since arrays are often how we structure list of things in JavaScript, we should have a way of transforming arrays into Observables. 

This lesson teaches how you can convert from Arrays to Observables, from Promises to Observables, and from Iterators to Observables. We will look at the API RxJS has for doing that: `from`, `fromPromise`, and `fromArray`.

Convert JavaScript Values to RxJS Observables

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

This lesson walks you through building a component using ngFor on a select dropdown with options to pass in a param into the Pipe.

Build a select dropdown with *ngFor in Angular 2

Learn how to use the reduce function on javascript arrays to transform a list of values into something else. In this introduction we'll be taking a list of numbers and reducing them into a sum.