Text to speech tutorial using RxJS and Angular

Loading

Reading Time: 6 minutes Introduction This is day 23 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create an English text to speech tutorial. The Web Speech API provides interfaces to make speech request and turn text into speech according to the selected voice. In this blog post, I describe how … Read more

Build video speed controller using RxJS and Angular

Loading

Reading Time: 4 minutes Introduction This is day 28 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to build a video speed controller. In this blog post, I describe how to compose a RxJS stream to listen to mousemove event of video speed bar and emit value to two other streams to … Read more

Create whack a mole game using RxJS and Angular

Loading

Reading Time: 8 minutes Introduction This is day 30 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create whack a mole game. The whack a mole game defines multiple streams to perform many UI tasks at the same time: In this blog post, I describe how to create RXJS streams to … Read more

Build a reactive countdown timer using RxJS and Angular

Loading

Reading Time: 6 minutes Introduction This is day 29 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to build a reactive countdown timer. The reactive countdown timer has the following functionalities: In this blog post, I describe how to merge button click and form submit streams to create a new stream to … Read more

See RxJS counterparts of array methods in action

Loading

Reading Time: 4 minutes Introduction This is day 7 of Wes Bos’s JavaScript 30 challenge where I am going to apply some RxJS counterparts of array methods to streams to obtain results. In this blog post, I create observables from arrays and use some, every, filter, find and findIndex operators on RxJS streams to get some answers to some … Read more

Create custom operators to sum and sort RxJS streams

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

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

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

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

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