Resources for Web Developers in 2022

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Functions are an important building block in Elm. In this lesson we will review stateless functions, function composition, anonymous functions, Currying, and more.

Functions in Elm

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

We can create the most basic components of our GraphQL Schema using GraphQL's Object Types. These types allow us to group related fields together under a specific type, such as a Video or a User, and then allows us to fetch these types when we query our schema. In this video, we'll learn how to write GraphQL Object Types in GraphQL's Schema language, as well as how to create resolvers for them, and ultimately how to query them.

Use GraphQL's Object Type for Basic Types

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

We will learn how we can generalize wrapping dispatch() for different purposes into a concept called “middleware” that is widely available in the Redux ecosystem.

Redux: The Middleware Chain

A rich framework for building applications and services hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.

hapi

View engines, or template engines, allow you to maintain a clean separation between your presentation layer and the rest of your application. This video will demonstrate how to use the vision plugin with hapi to enable template support.

hapi.js - View engines 

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


rxjs

While flatMap is popular and convenient for flattening higher-order Observables, it can introduce new kinds of bugs related to subscriptions. In this lesson we will see how switchMap is a sensible default that avoids common bugs.

Use switchMap to avoid leaks when flattening

Getting Elm installed. We will install the Elm CLI with npm. This gives us access to `elm-repl` and `elm-reactor`. The repl lets us play with expressions at the command-line, and reactor starts a development server which builds Elm files on-demand.

Install the Elm Platform command-line tools

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

Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

Use Reduce to Filter and Map over Large Datasets

We use semigroups to find the intersection of sets, then expand that to work on as many artists as we'd like. Finally, we use foldable to show a pair of intersection and sum to shed more light on the final result set.

Find the intersection of sets with Semigroups

A <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

canvas

With the HTML `canvas` you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

Drawing Text on Canvas

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

Directives might just be the **killer** feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes.

First Directive

If we have a GraphQL Schema expressed in terms of JavaScript, then we have a convenient package available to us that let’s us easily serve up our schema on any endpoint in an Express Server. In this video, we’ll use the `express-graphql` package to serve up our GraphQL Schema as middleware, and also learn how to enable the GraphiQL tool in order to query our GraphQL Schema.

Serve a GraphQL Schema as Middleware in Express

The do() operator allows us to perform side effects in the chain of operators. However, there are limited use cases for do(). We will learn what those use cases are and how to use subscribe() most of the times.

Move important side effects from do() to subscribe()

The Observable in RxJS is a JavaScript class, and can be extended. In this lesson we will learn about those cases where extending the Observable class becomes a problem, and what cases where it makes sense to extend it.

Know when to extend the Observable class

Eventually you will feel the need for pausing the observation of an Observable and resuming it later. In this lesson we will learn about use cases where pausing is possible, and what to do when pausing is impossible. 

Implement pause and resume feature correctly through RxJS

Besides converting arrays and promises to Observables, we can also convert other structures to Observables. 

This lesson teaches how we can convert any `addEventHandler` or `removeEventHandler` API to Observables. We will see how `fromEvent` does just that.

Convert DOM and Node.js Streams to RxJS Observables with fromEvent

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

scss

We can use javascript for color and opacity variations, math, list and map logic or to see if something exists. SCSS includes functions for a wide range of common use cases for logic in our styles. In this lesson we look at some of the more useful color functions to improve development velocity, readability, and simplify the code. Be sure to checkout all the SCSS functions: http://sass-lang.com/documentation/Sass/Script/Functions.html

Use Standard Built-in SCSS Functions for Common Operations:

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.

A lot of the power behind npm scripts is creating custom scripts that are outside the basic set that npm natively understands. In this lesson we will install the ESLint node package, create a new eslint npm script, briefly discuss about environment variables and how npm knows where to find your binary, and then execute our custom script from the command line.

Create a custom npm script

Bite-size video tutorials for badass web developers.

egghead

Editing a raw lesson video is a very simple process. You simply watch your own lesson and edit out all the bad takes and dead space using the "Ripple Delete" command. You will be left with a nice, cut lesson ready to export and upload.

Edit with Ripple Delete

Let's remind ourselves of a fundamental behavior of the Observable in RxJS, which is: each Observable execution has only one Observer. This means we cannot directly share one single Observable execution to multiple Observers.

An Observable execution may only have one Observer

A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this lesson we'll learn how we can use various types of images to make 3D VR scenes. 

We'll learn how to load in panoramas which are [equirectangular](https://en.wikipedia.org/wiki/Equirectangular_projection) images, and we'll also learn how to [cubemap](https://en.wikipedia.org/wiki/Cube_mapping) multiple images. We'll also learn about passing event and style properties to `<Pano/>`. 


Build 3D Panorama Scenes Using the Pano Component in React VR

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

Expanding on [Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1), this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.