Resources for Web Developers in 2022

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

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 to use normalizr to convert all API responses to a normalized format so that we can simplify the reducers.

Redux: Normalizing API Responses with normalizr

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

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

Create a List of Items with a React Native ListView

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 discusses when and how to add dependencies, resolved by Angular’s DI, to factory providers. The example used in this lesson builts upon the previous lesson on understanding factory providers.

Use Angular Factory Providers with dependencies

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

Misunderstanding scope can cause problems in your application. Watch this lesson to learn how Python scope works and the hidden implications it presents. Local scope, nonlocal scope, and global scope variables are demonstrated and explained.

Understand Scope in Python

In this lesson, we’re going to take a look at how adding the class provide to the providers property of a component to create an actual provider. We’ll learn what a provider specifically does and how we can provide different dependencies with the same token.

Use Provide and UseClass in Angular Providers

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

React Router: setRouteWillLeaveHook

Reducers are also often used for changing a single property inside of other reducers. This lesson shows how a type can enter the people reducer, but then the people reducer can use a different type to call the clock reducer and get a value back.

Use a Reducer to Change an Object's Property Inside an Array

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


rxjs

Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstrates a simple refactoring by requiring the StopWatch to be more configurable.

Refactoring Composable Streams in RxJS

A JavaScript framework for creating ambitious web applications.

ember

In this lesson, we learn how to create nested routes and templates in an Ember.js application, in addition to how to create nested routes and isolated templates.

Creating nested routes in Ember.js

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

In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree. 

Parenting in GIF Loop Coder

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

Use RxJS Streams with Angular 2 Forms

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

angular-formly provides a very simple API to dynamically change properties of your field (like disabled, hidden, and required) using the powerful expressionProperties property on your field.

angular-formly: expressionProperties

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.

Most of D3’s native selection APIs also return the selection (or a new selection), to enable multiple method calls to be chained together. Since the code you write isn’t on the selection prototype, chaining your methods would take some extra work. `selection.call()` will call any function reference you give it, providing the selection as the first parameter, and then it returns the selection for you to ensure chaining is supported.

Better Code Organization with selection.call() with D3 v4

You often need to render out data before you stream begins from a click or another user interaction. This lessons shows how to use `startWith` to set the initial output before you trigger your stream.

Displaying Initial Data with StartWith

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and apply C-Style string substitution to make the console work for you.

Advanced Console Log Arguments

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

express

In this lesson you will learn how to support data modification by handling HTTP verbs besides GET. We will look at how to edit, save, and delete content with `.put` and `.delete`.

Save and Delete Content in Express with HTTP Verbs

Learn how to take data from a network response and display it on the DOM using RxJS reactive event streams.

Render on the DOM with RxJS

By default, Inputs will push input events into the stream. This lesson shows you how to use `map` to convert the input event into the text you actually want.

Getting Input Text with Map

This video gives an overview of the concepts of reactive programming we saw during this series, and explains how reactive programming can provide true separation of concerns.