Resources for Web Developers in 2022

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

redux-observable

Any application that uses external services such as APIs should be able to handle errors gracefully. Often this requires no more that displaying a message to the user and ensuring the application continues to function. In this lesson we’ll look at how we can convert an error from the network into an action that is dispatched into the Redux store, allowing us to show an error message to the user and prevent the application from crashing.

Handle network errors gracefully

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


rxjs

Let's recap the categories of operators covered by the series. This lesson also shows what was not taught, and what comes next as learning material.

More operators and conclusion

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 can identify the start and end of a line using Line Anchors.  When dealing with multiple line matches we can utilize the multiline regular expression flag.

Find Patterns at the Start and End of Lines with Line Anchors in Regular Expressions

The way we use publish() (or multicast with an RxJS Subject) makes the shared Observable not reusable if the shared execution happens to complete or emit an error. In this lesson we will see how to use a simple Subject factory function in order to create a new Subject, one for each shared execution, whenever connect() is called.

Reusable multicasting with Subject factories

Wouldn't it be nice if everyone ran the tests before committing code? With ghooks, you can automatically add a githook when dependencies are installed which will allow you to define common scripts to be run at various points during git actions (like committing). In this lesson, we'll add a githook for running the tests before we commit code to make sure we don't commit anything that breaks the tests.

Automatically running tests before commits with ghooks

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

By using the `interpolate` function, the  `Animated.View` can be rotated using both degrees and radians.

Animate Rotation with React Native Interpolate

Let's explore a different use of the multicast() operator in RxJS, where you can provide a selector function as a sandbox where the shared Observable is available.

Multicast with a selector argument, as a sandbox

In this lesson we'll learn to use `backfaceVisibility` style property and `rotateX` to create a vertical flip animation, and `rotateY` to create a horizontal flip animation.

Create a Flip Card Animation with React Native

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

You can place content inside of the instance of your component element then manage it inside of the component’s template using `ng-content`. This process is called reprojection, but you may be more familiar with the term “transclusion”.

Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

In this lesson we'll use `Animated.parallel` to animate multiple `Animated.timing` and `Animated.spring` animations at the same time.

Animate Multiple Animations at the Same Time with Animated.parallel

Regular Expression Word Boundaries allow to perform "whole word only" searches within our source string.

Find the Start and End of Words with Regular Expression Word Boundaries

Although ‘epics’ in RxJS are often described as ‘actions in, actions out’, there may be times when you need to ‘bail out’ of an action, or to just ignore the current one given some condition. By learning about RxJS’s `filter` Operator, we’ll see how easy it is to do ‘nothing’ when you need to. We’ll also see how the composition techniques available in RXJS allow us to control the UI in a declarative manner.

Filter a stream to exclude empty values

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.

Often times you’ll have variations that you’ll want to make to your npm scripts and repeating yourself is inefficient and verbose. Instead you can create a base script and pass arguments into it from another script.

Pass arguments to npm scripts

One of the big challenges of creating truly reusable components is to make sure their styles don’t leak out into the consuming application. Strategies such as CSS modules work but are suboptimal. The web component movement tries to bring a definitive solution to this dilemma but browser support is still lacking. In this lesson we will take a look how Angular helps us with this.

Use Angular style encapsulation to avoid styles from leaking into other components

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

Sometimes you need to cancel a pending request based on an action performed by the User. In this lesson we’ll see how we can stop an in-flight ajax request by dispatching another action into the store and making use of the Rx operator ‘takeUntil’.

Use an action to cancel an Ajax request

In this lesson we will look at pulling out complex npm script logic into an external JavaScript file. Instead of writing bash scripts you can leverage your JavaScript abilities to automate your build process. We’ll use some helper node modules such as shelljs, opn-cli, and babel-cli. 

Create a node script to replace a complex npm script

Epics can be unit-tested just like any other function in your application - they have a very specific set of inputs (the action$ stream) and the output is always an Observable. We can subscribe to this output Observable to assert that the actions going back into the Redux are the ones we expect.


Testing the output of epics

Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

Display Validation and Error Messaging in Angular 2

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

Often in unit tests we are focussing on the logic involved in crafting a network request, & how we respond to the result. The external service is unlikely to be under our control, so we need a way to ‘mock’ the Ajax request in a way that allows us to focus on the logic. In this lesson we’ll see how we can pass in dependencies into epics to make testing things Ajax requests easier.

Mocking an ajax request when testing epics

This lesson will utilize the Istanbul tool to instrument our code for code coverage recording and reporting. We'll use this to make sure that as our library gets new features, we keep track of our coverage and can find places to improve it.

Adding code coverage recording with Istanbul

Javascript modules are a great way to isolate your code, but they are not very re-usable.  If we implement the factory pattern inside of one of our modules we get code re-use without losing the encapsulation benefits of a javascript module.