rxjs

Create custom operators to sum and sort RxJS streams

by

Loading

Reading Time: 5 minutes Introduction This is day 4 of Wes Bos’s JavaScript 30 challenge where I am going to create RxJS custom decorators to sum and sort streams. In this blog post, I describe the steps to create RxJS custom decorators, sum and sort to manipulate streams. First, I apply sort() to sort RxJS streams by a comparison … Read more

Take photos with web camera using RxJS and Angular

by

Loading

Reading Time: 7 minutes Introduction This is day 19 of Wes Bos’s JavaScript 30 challenge where I am going to use RxJS operators and Angular to take photos, add them to photo section for me to download to my local hard drive. In this blog post, I inject native Navigator to component such that I can load web camera … Read more

Manipulate video times using RxJS and Angular

by

Loading

Reading Time: 6 minutes Introduction This is day 18 of Wes Bos’s JavaScript 30 challenge where I am going to use RxJS operators and Angular to manipulate video times to calculate total, longest, shortest and average video time. In this blog post, I make a http request to obtain an array of video times from an external source. Then, … Read more

Sort data without articles using RxJS and Angular

by

Loading

Reading Time: 4 minutes Introduction This is day 17 of Wes Bos’s JavaScript 30 challenge and I am going to sort data without articles RxJS and Angular. In this blog post, I describe how to use RxJS operators to covert array to Observable, use function to remove articles temporarily, compare texts to determine sort order and finally map the … Read more

Animate text shadow using RxJS and Angular

by

Loading

Reading Time: 4 minutes Introduction This is day 16 of Wes Bos’s JavaScript 30 challenge and I am going to add CSS animation to text using RxJS and Angular. Through RxJS, I can update text shadow style of text element during mouse moves to produce the effect of CSS animation. In this blog post, I describe how to use … Read more

Synchronize data with local storage using RxJS and Angular

by

Loading

Reading Time: 8 minutes Introduction This is day 15 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to add, delete and check items in a list, and synchronize data with local storage. In this blog post, I describe how to use Subject and RxJS operators to listen to form submit and JavaScript … Read more

Slide in images on scroll using RxJS and Angular

by

Loading

Reading Time: 5 minutes Introduction This is day 13 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to slide in 5 images when scrolling up and down the browser images. In this blog post, I describe how to use RxJS operators (fromEvent, debounce time, map, startWith) to listen to scroll event and … Read more

Detect key sequence using RxJS and Angular

by

Loading

Reading Time: 5 minutes Introduction This is day 12 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to detect key sequence. When user inputs the correct secret code, the application calls an external JavaScript library to render unicorns. In this blog post, I describe how to use RxJS operators (scan, map, filter) … Read more

Use RxJS and Angular to build a custom video player

by

Loading

Reading Time: 8 minutes Introduction This is day 11 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to build a custom video player. The player has the following functionalities: In this blog post, I describe how to create a video player component that encapsulates a native video element and child video controls … Read more