To watch.

Watch User Created Playlist (56)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Creating a D3 Force Layout in React

Add a browser build to an npm module

Add Elements onto an Array with Push

Observables are the foundation in RxJS

Returning subscriptions from the subscribe function

P

Creation operator: create()

P

Creation operators: interval and timer

P

Creation operators: empty, never, throw

P

Creation operators: fromEventPattern, fromEvent

P

Creation operators: from, fromArray, fromPromise

P

Creation operator: of()

P

Observables can complete

P

Observables can throw errors

P

Observables (push) compared to generator functions (pull)

P

Observables are almost like Functions

P

Let's learn RxJS

Getting Started with Redux Dev Tools

P

Sharing Streams with Share

P

Basic DOM Rendering with Subscribe

P

Resubscribing to a Stream with Repeat

P

Refactoring CombineLatest to WithLatestFrom

P

Timer and Input Recap

P

Logging a Stream with Do

P

Handling a Complete Stream with Reduce

P

Completing a Stream with TakeWhile

P

Adding Conditional Logic with Filter

P

Combining Streams with CombineLatest

P

Getting Input Text with Map

P

Refactoring Composable Streams in RxJS

P

Handling Multiple Streams with Merge

P

Changing Behavior with MapTo

P

Displaying Initial Data with StartWith

P

Updating Data with Scan

P

Stopping a Stream with TakeUntil

P

Starting a Stream with SwitchMap

Getting a Pull Request Merged and Wrapping up

How to squash multiple git commits

How to rebase a git Pull Request branch

How to update a Pull Request on GitHub

How to Collaborate on a Pull Request on GitHub

How to create a Pull Request on GitHub

Setting up the project locally

How to Fork and Clone a GitHub Repository

Identifying How to Contribute to an Open Source Project on GitHub

How to authenticate with GitHub using SSH

How to install Git SCM

Exploring a Repository

Exploring GitHub

Introduction to GitHub

Using Observable.create for fine-grained control

P

Reacting to multiple inputs using RxJS's combineLatest

P

Hyperscript as our alternative to template languages

Safely inspect nested objects with Reduce

P

Event Delegation with RxJS

P

Introduction to CSS Transitions

CSS Transitions: Delays and Multiple Properties

react tutorial about Creating a D3 Force Layout in React

Creating a D3 Force Layout in React

9:57 react

Learn how to leverage d3's layout module to create a Force Layout inside of React. We'll take a look at React's lifecycle methods, using them to bootstrap d3's force layout in order to render our visualization.

js tutorial about Add a browser build to an npm module

Add a browser build to an npm module

6:16 js

Currently, our library is being distributed as a CommonJS module, but we should support the browser as well. In this lesson, we're going to use webpack to create a UMD (Universal Module Definition) build of our module so users can consume it in a browser.

js tutorial about Add Elements onto an Array with Push

Add Elements onto an Array with Push

3:26 js

Array push is used to add elements to the end of an Array. In this lesson we'll see how the push method accepts multiple arguments, can be used to merge two arrays, and how it can be used to represent user input.

rx tutorial about Observables are the foundation in RxJS

Observables are the foundation in RxJS

0:54 rx

Let's conclude this course by reviewing what an Observable is: a way of representing many values being delivered in push-style from a lazy producer to a consumer. Let's also see how the Observable alone is not everything in RxJS. It serves as the foundation to operators, which are the most useful feature of RxJS.

rx tutorial about Returning subscriptions from the subscribe function

Returning subscriptions from the subscribe function

3:14 rx PRO

So far, when writing these subscribe functions, we haven't returned anything. It is possible return an unsubscribe function from a subscribe function. In this lesson we will see how to allow observers to subscribe and unsubscribe from an Observable.

rx tutorial about Creation operator: create()

Creation operator: create()

3:03 rx PRO

We have been using Observable.create() a lot in previous lessons, so let's take a closer look how does it work.

rx tutorial about Creation operators: interval and timer

Creation operators: interval and timer

4:11 rx PRO

It is quite common to need an Observable that ticks periodically, for instance every second or every 100 miliseconds. We will learn about operators interval() and timer(), both of which are similar to setInterval() in JavaScript.

rx tutorial about Creation operators: empty, never, throw

Creation operators: empty, never, throw

2:48 rx PRO

This lesson introduces operators empty(), never(), and throw(), which despite being plain and void of functionality, are very useful when combining with other Observables.

rx tutorial about Creation operators: fromEventPattern, fromEvent

Creation operators: fromEventPattern, fromEvent

3:49 rx PRO

Besides converting arrays and promises to Observables, we can also convert other structures to Observables. This lesson teaches how we can convert any addEventHandler/removeEventHandler API to Observables.

rx tutorial about Creation operators: from, fromArray, fromPromise

Creation operators: from, fromArray, fromPromise

3:41 rx PRO

The of() operator essentially converted a list of arguments to an Observable. Since arrays are often how we structure list of things in JavaScript, we should have a way of transforming arrays into Observables. This lesson teaches how you can convert from Arrays to Observables, from Promises to Observables, and from Iterators to Observables.

rx tutorial about Creation operator: of()

Creation operator: of()

2:06 rx PRO

RxJS is a lot about the so-called "operators". We will learn most of the important operators, one by one. In this lesson, we will see our first creation operator: of().

rx tutorial about Observables can complete

Observables can complete

1:48 rx PRO

The Observer object has the functions next() and error(). In this lesson we will see the other (and last) function available on observers, complete(), and its purpose.

rx tutorial about Observables can throw errors

Observables can throw errors

1:39 rx PRO

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, and in this lesson we will see what is the API for throwing and catching them.

rx tutorial about Observables (push) compared to generator functions (pull)

Observables (push) compared to generator functions (pull)

3:21 rx PRO

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.

rx tutorial about Observables are almost like Functions

Observables are almost like Functions

6:43 rx PRO

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.

rx tutorial about Let's learn RxJS

Let's learn RxJS

1:00 rx

This lesson is to kickstart our course on RxJS Observables and their operators. Know what is the purpose of this series and which RxJS version we will use while learning.

js tutorial about Getting Started with Redux Dev Tools

Getting Started with Redux Dev Tools

6:04 js PRO

The Redux DevTools let us wire up our Redux app to a time-traveling debugger. This can help us debug, test, and review the state of our application in a simple history that can be "bookmarked" and scrubbed through. In this lesson, we wire up the Redux DevTools into our app, and walk through the different "monitors" and options available.

More information can be found on the official Redux DevTools GitHub page: https://github.com/gaearon/redux-devtools

rx tutorial about Sharing Streams with Share

Sharing Streams with Share

4:00 rx PRO

A stream will run with each new subscription added to it. This lesson shows the benefits of using share so that the same stream can be shared across multiple subscriptions.

rx tutorial about Basic DOM Rendering with Subscribe

Basic DOM Rendering with Subscribe

1:06 rx PRO

While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can still do basic subscribe blocks and manually update the DOM on your own.

rx tutorial about Resubscribing to a Stream with Repeat

Resubscribing to a Stream with Repeat

2:04 rx PRO

When you complete a stream, there’s no way to restart it, you must resubscribe. This lesson shows how repeat comes in handy to resubscribe after a stream has completed.

rx tutorial about Refactoring CombineLatest to WithLatestFrom

Refactoring CombineLatest to WithLatestFrom

2:17 rx PRO

This lesson shows why it’s preferable to using withLatestFrom instead of combineLatest in certain scenarios.

rx tutorial about Timer and Input Recap

Timer and Input Recap

2:54 rx PRO

This lesson recaps everything we’ve covered about building a timer stream, and input stream, and how we’ve combined all their parts together.

rx tutorial about Logging a Stream with Do

Logging a Stream with Do

1:34 rx PRO

To help understand your stream, you’ll almost always want to log out some the intermediate values to see how it has progressed during its lifespan. This lesson teaches you how to use do to log values in the middle of the stream without having an impact on the rest of the stream.

rx tutorial about Handling a Complete Stream with Reduce

Handling a Complete Stream with Reduce

1:21 rx PRO

When a stream has completed, you often need to evaluate everything that has happened while the stream was running. This lesson covers how to use reduce to collect values and total up a “score” of this simple game.

rx tutorial about Completing a Stream with TakeWhile

Completing a Stream with TakeWhile

1:19 rx PRO

When you need to total up everything that has happened in your stream, you need to a way to tell your stream that it is “done”. This lesson covers how to use takeWhile to complete a stream.

rx tutorial about Adding Conditional Logic with Filter

Adding Conditional Logic with Filter

1:01 rx PRO

Often you only want values to proceed through your stream if they meet certain criteria, just as if you were using an if statement in plain JavaScript. This lesson shows you how to use filter on your stream to only push the values that you need through your stream.

rx tutorial about Combining Streams with CombineLatest

Combining Streams with CombineLatest

3:08 rx PRO

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.

rx tutorial about Getting Input Text with Map

Getting Input Text with Map

1:46 rx PRO

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.

rx tutorial about Refactoring Composable Streams in RxJS

Refactoring Composable Streams in RxJS

4:44 rx PRO

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.

rx tutorial about Handling Multiple Streams with Merge

Handling Multiple Streams with Merge

2:59 rx PRO

You often need to handle multiple user interactions set to different streams. This lesson shows hows Observable.merge behaves like a "logical OR" to have your stream handle one interaction OR another.

rx tutorial about Changing Behavior with MapTo

Changing Behavior with MapTo

2:32 rx PRO

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.

rx tutorial about Displaying Initial Data with StartWith

Displaying Initial Data with StartWith

1:06 rx PRO

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.

rx tutorial about Updating Data with Scan

Updating Data with Scan

2:10 rx PRO

You often need to update the data flowing through the stream with custom logic based on what you need to output. This lesson covers how to use scan for collecting and updating the outputs as your stream progresses.

rx tutorial about Stopping a Stream with TakeUntil

Stopping a Stream with TakeUntil

4:10 rx PRO

Observables often need to be stopped before they are completed. This lesson shows how to use takeUntil to stop a running timer. Then we use the starting stream and the stopping stream together to create a simple stopwatch.

rx tutorial about Starting a Stream with SwitchMap

Starting a Stream with SwitchMap

5:48 rx

As developers, we tend to carry over ideas from past experience and try to reapply them to something new. This lesson teaches you about why you should usually favor switchMap over subscribe and why thinking about subscribe as an event handler can lead to problems.

js tutorial about Getting a Pull Request Merged and Wrapping up

Getting a Pull Request Merged and Wrapping up

1:13 js

Let’s look at the GitHub commits and list of contributors now that our pull request has been merged. And we’ll wrap this series up with a few tips. Feel free to practice on stack-overflow-copy-paste, and see the Pull Request demonstrated in this lesson here.

js tutorial about How to squash multiple git commits

How to squash multiple git commits

2:53 js

Often, project maintainers prefer that a single pull request be represented by a single commit. It makes the git history cleaner and easier to understand. So before your pull request is merged you’ll want to do an interactive git rebase to squash all of your commits and fix your commit message.

js tutorial about How to rebase a git Pull Request branch

How to rebase a git Pull Request branch

3:39 js

Sometimes your Pull Request can fall behind master in a repository and occasionally that will result in merge conflicts which you have to manage yourself. In this lesson we’ll learn how to use git rebase to update our pull request branch to the latest version of master and resolve merge conflicts with git.

js tutorial about How to update a Pull Request on GitHub

How to update a Pull Request on GitHub

2:57 js

Once you’ve made your code updates locally, all you need to do is commit those changes and push that commit to your Pull Request branch. In this lesson we’ll also talk about how to skip git hooks that may be included in the project when you just need help.

js tutorial about How to Collaborate on a Pull Request on GitHub

How to Collaborate on a Pull Request on GitHub

2:21 js

It’s not often that you’ll get a Pull Request on GitHub just right the first time you try. You generally will iterate with the project maintainer on your solution before your PR gets merged. In this lesson, we’ll explore some of the tools that projects use to manage contributions to open source projects on GitHub.

js tutorial about How to create a Pull Request on GitHub

How to create a Pull Request on GitHub

6:19 js

Often when making a change, you want to verify your approach with the maintainer or ask them for help. In this lesson we’ll make a change and commit that WIP change. Then we’ll create a pull request requesting help from the project maintainer.

js tutorial about Setting up the project locally

Setting up the project locally

1:18 js

Before you start making your change, you often need to set up your environment for the changes. This is where the repositories contributing instructions come in really handy. In this lesson we’ll get our environment setup and ready for changes.

js tutorial about How to Fork and Clone a GitHub Repository

How to Fork and Clone a GitHub Repository

2:41 js

You cannot push code to repositories that you don’t own or have sufficient permission to. So instead, you make your own copy of the repository by “forking” it. You are then free to make any changes you wish to your repository.

js tutorial about Identifying How to Contribute to an Open Source Project on GitHub

Identifying How to Contribute to an Open Source Project on GitHub

2:15 js

When you find a bug in an open source project, you know exactly the change you want to make. Other times you just want to find a way to contribute. Either way, you’ll need to know how to the project maintainers want to run the project and work with them to come up with an implementation for the fix/feature. And if you don't even know what project to start contributing to, check out this blogpost for inspiration on how to identify a good project to contribute to.

js tutorial about How to authenticate with GitHub using SSH

How to authenticate with GitHub using SSH

3:34 js

Anytime you push code to GitHub, you must be authenticated so GitHub knows you are authorized to make changes. In this lesson we’ll learn how to authenticate with GitHub using SSH so we don’t have to enter our username and password each time we push code to GitHub.

js tutorial about How to install Git SCM

How to install Git SCM

2:15 js

Let’s install the Git Source Control Management software so we can interact with repositories hosted on GitHub.

js tutorial about Exploring a Repository

Exploring a Repository

4:07 js

The basic unit of GitHub is a repository. This is where you code is stored and GitHub allows you to interact with others and with the code in great ways. In this lesson we talk about Watching, Staring, and Forking a repository. We also cover GitHub issues and pull requests and various other stats about a GitHub repository.

js tutorial about Exploring GitHub

Exploring GitHub

1:47 js

GitHub adds a lot of great features on top of git repository hosting. We’ll take a look at some of these features including:

  • How to creating a repository and organization on GitHub
  • How to explore and find projects on GitHub
  • About GitHub gists
  • Searching pull requests and issues on GitHub
js tutorial about Introduction to GitHub

Introduction to GitHub

0:47 js

In this lesson we’ll talk about what GitHub is and how to sign up for a GitHub account so you can contribute to an open source project on GitHub.

rx tutorial about Using Observable.create for fine-grained control

Using Observable.create for fine-grained control

3:55 rx PRO

Sometimes, the helper methods that RxJS ships with such as fromEvent, fromPromise etc don't always provide the exact values you want & you end up having to do extra work to force them into the shape you require. For more fine-grained control you can use Observable.create which allows you to project only the values which matter to you.

rx tutorial about Reacting to multiple inputs using RxJS's combineLatest

Reacting to multiple inputs using RxJS's combineLatest

7:36 rx PRO

There are certain situations in which you’ll want access to the latest values from multiple Observables whenever any one of them produces a value. This is exactly what combineLatest was designed for, and in this lesson we’ll use it to build up an image url that requires values from 3 different inputs - triggered every time any one of them change.

rx tutorial about Hyperscript as our alternative to template languages

Hyperscript as our alternative to template languages

2:53 rx

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

js tutorial about Safely inspect nested objects with Reduce

Safely inspect nested objects with Reduce

6:29 js PRO

A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects - watch to learn how! :)

rx tutorial about Event Delegation with RxJS

Event Delegation with RxJS

6:17 rx PRO

Event delegation is an extremely powerful technique. It allows you to use a single event handler to listen to events on any number of child elements. It also has the added benefit of working with dynamically added elements without even a single line of additional code. Libraries such as jQuery offer this feature right out of the box, but with RxJS and the fromEvent helper, we’ll need to utilise the selector function to achieve the same result. NOTE: The element.closest method shown in this video required a polyfill for older version of IE which can be found here https://github.com/jonathantneal/closest

css tutorial about Introduction to CSS Transitions

Introduction to CSS Transitions

2:27 css

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.

css tutorial about CSS Transitions: Delays and Multiple Properties

CSS Transitions: Delays and Multiple Properties

3:33 css

Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for transitions to multiple properties on the same object.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?