Resources for Web Developers in 2022

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


rxjs

This lesson teaches you how a Subject is simply a hybrid of Observable and Observer which can act as a bridge between the source Observable and multiple observers, effectively making it possible for multiple observers to share the same Observable execution.

Subject: an Observable and Observer hybrid

As a conclusion to this course about RxJS Subjects, lets review when and why should you use them.

Conclusion: when to use Subjects

Whenever we have multiple observers sharing the same execution, some of those observers may arrive "too late". This lesson will teach you how and when to use a BehaviorSubject to mitigate that problem.

BehaviorSubject: representing a value over time

NW.js is an app runtime based on `Chromium` and `node.js`. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

nwjs

Let's add some module loading to our NW.js. Webpack and dependency management FTW!

NW.js and Webpack: A match made in heaven

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

Being just another redux-middleware, we can take advantage of existing tools created by the large redux community. Arguably the most valuable & popular amongst these is the rev-tools extension that allows visibility into the lifecycle of the redux store.
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en


Debug redux-observable with redux dev-tools

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

Both Smart Components and Presentation Components receive data from Services in entirely different ways. Smart Components use constructor injection to lookup the entire service from the injector while Angular 2 Presentation components take the data from `@Input` defined on their component class.

Angular 2 Smart Components vs Presentation Components

A BehaviorSubject can remember the latest value emitted, but what if we wanted Observer B to see all the previous values emitted in the past? We can't do that with BehaviorSubject, but there is ReplaySubject, which allows us to do that. This lessons teaches you everything you need to know about ReplaySubjects.

ReplaySubject: remembering events from the past

Because using multicast with a new Subject is such a common pattern, there is a shortcut in RxJS for this: the publish() operator. This lesson introduces publish() and its variants publishReplay(), publishBehavior(), publishLast(), share(), and shows how they simplify the creation of multicasted Observables.

Multicasting shortcuts: publish() and variants

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

hapi does not support serving static files out of the box. Instead it relies on a module called Inert. This lesson will cover serving static files using Inert's custom handlers.

hapi.js - Serving static files

RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.

redux-observable

In this lesson we’ll learn how to perform an Ajax request to an external API in response to an action in the redux store. We’ll see how, within the epic, we get access to actions after any reducers have been executed and how we can convert that incoming action into a resulting one that will save the data received into the redux store.

Use redux-observable for simple Ajax requests

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

Now that we have everything set up with semantic-release and we have a feature commit, let's push that up and watch TravisCI use semantic-release do our library release automatically.

Automatically Releasing with TravisCI

Cascading Style Sheets bring order and beauty to our applications.

Learn how to use native CSS transitions to automagically add motion to your application. By specifying a simple transition rule, changes to the values of specific properties can be interpolated over time to give a graceful, polished look and feel to what used to be a jarring and sudden transition.

Introduction to CSS Transitions

This lesson will teach you about AsyncSubject, another type of Subject with some replaying logic inside. We will also look at some use cases for this peculiar RxJS subject variant.

AsyncSubject: representing a computation that yields a final value

With redux-observable, we have the power of RxJS at our disposal - this means tasks that would otherwise be complicated and imperative, become simple and declarative. In this lesson we’ll respond to an action by queuing up 2 separate Ajax requests that will execute sequentially. Then we’ll group the results from both into an array and produce a single action from our epic that will save the data into the redux store

Create a queue of Ajax requests with redux-observable and group the results.

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

The first step to **any** AngularJS project, is actually adding AngularJS to the page. This lesson will show you adding the Angular script, initializing the app with ng-app, and simple two way binding with ng-model. This is a *beginner* level lesson.

First Step: Adding Angular to the HTML Page

We refactor 3 functions, taking line by line imperative code to a single composed expression using Box container type.

Refactor imperative code to a single composed expression using Box

When accepting user input and converting it into a request that talks to the outside world, we can often end up in a situation where responses are no longer relevant. This is a common case in type-ahead style input fields - we would only want to call an external search API after the user has stopped typing for a short amount of time. In this lesson we’ll see how we can begin to combine RxJS operators to solve such problems. 

Debounce user input to avoid repeated Ajax requests

ConnectableObservable has the connect() method to conveniently dictate the start of the shared execution of the source Observable. However, we need a mechanism to dictate the stop of the shared execution, otherwise a leak happens. This lesson will teach you how to do that, and it's all about Subscriptions.

Stopping a shared observable execution

Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

Directive for Route Handling

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

Learn how to implement adding a todo in a todo list application reducer.

Redux: Writing a Todo List Reducer (Adding a Todo)

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

We'll use the interpolate function from an `Animated.Value` to transition the background color of an `Animated.View`. We'll simultaneously translate the position with the same `Animated.Value`.