Learn Chrome-devtools, Nativescript and Rxjs

When a manager gives us the requirements for an application feature, they don't care too much about *how* we build it. And often times, they think that hard things will be easy.

Dealing with time and coordinating different types of events can be tricky.

Luckily, we have RxJS to help!

In this course, you will use RxJS to build a loading spinner in an app that meets the ever-changing requirements from a mock Product Manager.

You'll also learn how to implement a "Konami Code" style feature that listens for a correct sequence of keys to be typed in a set amount of time.

Follow the thought process that Rares uses as he breaks problems down into manageable pieces that remain flexible, and become more comfortable solving problems reactively.

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


rxjs

Thinking Reactively with RxJS

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

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

Tips and Tricks

Frontend runtime optimization is heavily impacted by rendering.  Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls.
This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

Critical Rendering Path

Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.

That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.

You will learn how to:

- **Use (experimental) CSS Overview to learn all about CSS used on a page in a minute**
- **Style console.log messages with CSS** - a _crucial_ skill for any senior developer (j/k)
- **Debug your code (on production and local environment) with logpoints**
- **Run a Lighthouse audit of your site**
- **Choose accessible colors for your website that have an AAA contrast ratio rating**
- **Force a DOM element state in Chrome DevTools**
- **Use Console utilities to make debugging easier**
- **Copy a network request as fetch or cURL with Chrome DevTools**

Have fun!

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

chrome-devtools

Chrome DevTools tips & tricks

_Feels like magic._

It’s a beautiful feeling when technology works in mysterious, miraculous ways. So smooth! So effortless! So…

_Wait, that’s not right. What’s it doing? I don’t get it. Help!_

…until you encounter unexpected behavior. Good luck debugging magic.

To use technology to its fullest, you need to understand how it’s accomplishing the tasks set before it. 

This course de-mystifies RxJS. It feels like magic, but it’s also one of the most laborious technologies to learn in front-end web development. We’ll open up the internals to take an up-close look at how RxJS handles Async programming so smoothly.

Over 12 lessons and 31 minutes, you'll get a handle on:

- how RxJS pushes values from observables to subscribers, which take care of the output. 
- how operators handle all of the "in-between" operations where you can manipulate the values while they're still in-flight.
- the internals of operators and subscribers and how to customize operators to your specific needs.


Build Your Own RxJS Pipeable Operators

***Note: RxJS imports have changed since the publication of this course, these changes to RxJS have been reflected in the code examples underneath each lesson. The concepts being taught on RxJS are still applicable.***

Vue.js is an amazing framework that can easily update and reflect user input using templates and data-binding. But there are many scenarios where complex asynchronous behaviors (like loading data, handling "pending" states, timeouts, etc) are solved much easier by leveraging the streaming capabilities of RxJS. This course covers how to setup and use the features of "vue-rx" to enable streams within your templates and easily solve complex scenarios.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Build Async Vue.js Apps with RxJS

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React 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

Build React Components from Streams with RxJS and Recompose

Introductions to various RxJS Operators including of, from, fromEvent, interval and zip.

RxJS Operators

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

Up and Running with redux-observable

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will learn to identify common mistakes with RxJS that usually make code harder to read and even introduce bugs. Most of these mistakes are related to Subject, subscribe, and subscriptions. We are going to see how to use only Observables and convenient operators made for solving those mistakes, such as fromEvent, takeUntil and switchMap. By the end of this course, you will have a more immediate intuition on what patterns are simple and safe in RxJS.

Save time avoiding common mistakes using RxJS

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript. 

In this course, we will learn how to code directly against these native api’s with NativeScript for Angular. Many libraries are written and published in these languages. With NativeScript you are no longer limited to just JavaScript based libs, but have direct access to these api’s right from JavaScript/TypeScript. Let’s look at how to include these native libraries internally to your project as well as build public plugins to share with the community. 

We will cover some considerations with Objective C and Swift based libraries as well as Java/Android libraries. You can think of CocoaPod, Gradle, and Android Arsenal like npm for native libs. iOS libraries can be found via CocoaPods, Android libraries can be found via Gradle or Android Arsenal. 

Let’s also cover how to write custom view components based on native libs since there are considerations for both iOS and Android. Lastly we will learn how to best handle cases where a plugin/library only supports 1 platform.

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

nativescript

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps 

If you have used RxJS Observables, it is likely you have seen the flatMap or switchMap operators. They are very powerful operators that can be used in various situations, while being common for dealing with HTTP requests. These operators may look mysterious at first, but turn out to be simple flattening operations on higher order Observables. 

In this course you will learn what is a higher order Observable, when does it occur in real applications, and how to handle them with operators like switchMap. Throughout this course we will see real applications of these operations.

Start following this course if you have some understanding of RxJS, but want to gain advanced skills in the art of using operators.

If you're new to RxJS, we highly recommend the [Introduction to Reactive Programming using RxJS](https://egghead.io/courses/introduction-to-reactive-programming) to begin with, and then [RxJS Beyond the Basics: Operators in Depth](https://egghead.io/courses/rxjs-beyond-the-basics-operators-in-depth) to understand operators.

If you're an absolute beginner to the concept of Observable and async streams, we highly recommend starting with [Jafar Husain's excellent introduction](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop).

Use Higher Order Observables in RxJS Effectively

In this course, we will learn how to use the core layouts for NativeScript apps. We will start with the basic principles of NativeScript layouts using XML. This course will use the app templates provided from the NativeScript framework and installed using [the NativeScript CLI](https://egghead.io/lessons/angular-1-x-set-up-a-native-app-project-with-the-nativescript-cli).

We will cover the following layouts: `StackLayout`, `WrapLayout`, `GridLayout`, `DockLayout`, `AbsoluteLayout` and `FlexboxLayout`. Understanding the concepts and usage of UI layouts in NativeScript is key for a great app.

Build Basic NativeScript App Templates

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.*** 

RxJS Subjects are a source of confusion for many people using RxJS. For many, the Subject is the obvious and only answer to every problem. Subjects are incredibly useful and necessary, but the key is to know when to use them for solving specific problems that you encounter.

In this course, we are going deep into RxJS Subjects and multicasting operators. You'll gain a solid understanding of when, where, and how to use these powerful tools.

If you are new to RxJS, or want a refresher please check out this course **[Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming)**.

RxJS Subjects and Multicasting Operators

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting setup to run our app in the iOS Simulator in addition to an Android emulator using GenyMotion (https://www.genymotion.com/). Understand how to build your native mobile views with NativeScript XML and how to style them with CSS. Using the NativeScript for Angular starter template provides a nice setup out of the box including the core theme which provides handy CSS classes to work with speeding up view building. For page navigation, we will learn how to use the Angular Router to configure a flexible routing setup for our app. The ListView component is a powerful and highly performant native control for handling your lists powered by the UITableView on iOS and native ListView widget on Android. We’ll highlight how you can use RxJS Observables with our native views. Let's also take a look at integrating npm plugins to enrich the UI component library. Lastly, a round up of styling how-to's including integrating SASS for custom app theme creation as well as creating a live app theme switcher.

This Angular course assumes a solid understanding of the fundamentals.
We have Intermediary Angular courses including topics on [Dependency Injection](https://egghead.io/courses/angular-dependency-injection-di-explained), [Components, Directives](https://egghead.io/courses/building-angular-components), [Forms](https://egghead.io/courses/intro-to-angular-forms), [Router](https://egghead.io/courses/intro-to-angular-router), and [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

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

Create Native Mobile Apps with NativeScript for Angular

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web application as it runs.

Debug the DOM in Chrome with the Devtools Elements Panel

In this course, you will learn more about using observables in Angular. We are going to how we can leverage the power of observables and RxJS to build a rock solid instant search component with a handful of operators.

You will learn operators by applying them to a real-world component. By the end of this course, you will have a clear understanding of how components can be designed around the concept of event streams which are wired together like modular building blocks.

All of this in about 11 minutes! 😄

This course assumes a solid understanding of fundamentals.
We have Intermediary Angular courses that'll get you up to speed.  
- [Dependency Injection](https://egghead.io/courses/angular-dependency-injection-di-explained)
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/learn-the-basics-of-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router) 
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

⚠ The code used in the course is of Angular `^2.0.0`, and the code given in the [transcript](https://codesandbox.io/s/54xv161qq4?from-embed) is of Angular `7.0.3`. **An updated version of the code can be found [here](https://github.com/eggheadio-projects/build-an-angular-instant-search-component-course-notes)** *(updated 5/8/2020)*. The code for each lesson resides in the respective branch on the repository.

Build an Angular Instant Search Component

Operators are the core building blocks for reacting to data in your JavaScript applications.

In this course you will learn what operators are, and then take a tour of the most useful operators that RxJS has to offer.

RxJS Beyond the Basics: Operators in Depth

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the various things on the screen. Bundled into this panel, though, is the single most useful tool for any JavaScript developer - the JavaScript Debugger. We’ll use the Debugger to inspect JavaScript as it runs, allowing you to watch (and even interact with) the state of your application as it runs in ways that’ll blow your mind if you’ve mostly used console.log to debug your applications to this point. 

Debug JavaScript in Chrome with DevTool Sources

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various properties exposed. We’ll talk about timing, filtering, throttling and generally using the network panel to better understand the ways in which our applications exist within a connected context.

Debug HTTP with Chrome DevTools Network Panel

There are plenty of introductions to RxJS, but few resources that take you deep into the library, providing an accurate understand of what each piece performs.

In this course we will gain intermediate knowledge of RxJS, focusing on one aspect: how to create Observables. We will see how Observables compare to functions, how they compare to ES6 generators, what are the empty(), throw() and never() Observables, and other static factories that help in making Observable sequences.

Start following this course if you have a superficial understanding of RxJS, but want to gain confidence in using it.

If you're new to RxJS, we highly recommend this [Async JS course from Jafar Husain](https://egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop) to get a solid intro to the concepts. From there, you can watch this [Introduction to Reactive Programming using RxJS](https://egghead.io/series/introduction-to-reactive-programming), and you will be prepared for this course!