Resources for Web Developers in 2022

A JavaScript framework for creating ambitious web applications.

ember

Components in Ember are great for reusing code throughout our application. We’ll see how each instance of an Ember component has isolated state and we can over ride as well as set default values.

In this lesson, we will learn how to make a simple, reusable component within an Ember application.

Create Simple Components in Ember

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


rxjs

This lesson introduces the concept of an Observable. We will see how similar it behaves to a function and what is the fundamental difference between them.

Return Multiple Values from Observables in RxJS 

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

nativescript

The default core theme comes preinstalled and ready to go with every new project. Learn how to use some of the many helpful utility classes that are provided like common `btn` classes for Buttons, `h1`, `h2`, etc. Label classes and convenient `p-10` or `m-10` (shorthand margin/padding) classes ranging from 0 - 30. You can learn all about the rich options you get here: http://docs.nativescript.org/ui/theme

Style NativeScript views using the default core theme

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

Two-way binding still exists in Angular 2 and `ngModel` makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

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 want to be able to show only items in a certain status so in this lesson, we’ll add a flag to indicate which items to show, and create a function to filter the todos based on that value. We’ll take advantage of route based state to control the filtering behavior.

Filter Data on Property Values in React

Observables are almost like functions, but allow you to return many values. There is another concept in JavaScript (ES6), called Generator Functions, which do something very similar. 

In this lesson we will see what Observables and Generators have in common, and how they differ.

Push Values from Observables in RxJS

When a Todo property updates, you still must create a new Array of Todos and assign a new reference. This lesson walks you through refactoring from the current approach to the immutable approach.

Refactoring mutations to enforce immutable data in Angular 2

React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

_**note**: in this video `react-router-dom` is installed with the `--save-dev` flag. This is **not required and may cause issues if used**. Simply install it with `npm install react-router-dom` and it will function as expected._

Run the React Router v4 Examples with Create React App

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

`some` returns a `boolean` value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple `yes` or `no` answer. In this lesson we look at 2 practical use-cases for `some`. The first shows how it can be used with a ternary operator to switch a `class` on an element & the second shows how `some` can be used in an `if` conditional.

Use Some as a Ternary Operator or Conditional

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

Create Basic Routes with the React Router v4 BrowserRouter

You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.

Select From Multiple Nested Angular 2 Elements

Whenever we are writing code, we need to remember that things may go wrong. If an error happens in a function, that error will be thrown. Errors can also happen in Observables. 

In this lesson we will see what the API is for throwing and catching Errors with Observables.

Throw Errors with RxJS Observables

Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the `#ref` syntax, assigning it a name, then `ngModel` will check all of the validity rules for you.

Check ngModel Validation in Angular 2

In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are preserved when transpiled to ES5, TypeScript emits metadata. In this lesson we’ll explore how the @Injectable decorator ensures metadata generation for services that have their own dependencies.

Understand Angular @Injectable

Angular Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.

Write an Angular Directive

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

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

AngularJS with Webpack - Production Source Maps

You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use `mapTo` to pass functions into the `scan` operator and have completed control over you data.

Changing Behavior with MapTo

Two streams often need to work together to produce the values you’ll need. This lesson shows how to use an input stream and an interval stream together and push an object with both values through the stream.

Combining Streams with CombineLatest

When using provider string tokens, there’s a chance they collide with other third-party tokens. Angular has with the concept of opaque tokens, that allow us to make whatever token we use unique, so we don’t run into collision problems. In this lesson we’ll explore how they work.

Understand OpaqueToken in Angular

The `<base href=”/”/>` you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use `/` as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.

Understand the Angular Base href Requirement

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.