teleren/devto huggingface dataset:
RxJS Operator: switchMap
Published: 2021-08-19 21:14:27

The `switchMap` RxJS Operator is a higher-order mapping operator that processes an emitted value but if another value is emitted, it will cancel that processing and switch over to the new value.

For example:

```TypeScript
products$ = this.categorySelected$
  .pipe(
       switchMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

```
In the above code, the `switchMap` will perform the HTTP get for the selected category. If a different category is selected, it will cancel that HTTP get request and perform an HTTP get for the newly selected category.

##How Does switchMap Work?##

We can think of the switchMap like a coach that can't decide which runner should run in a race. But ultimately, only their last choice will run.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzplmovdcwvvjq1o10dz.png) 

##Let's look at an Example##
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1w00ztcaovmlugc1tj5.png)
 
In this example, the user clicks the category with an id of 2, changes their mind and picks 3, then decides they really want category 1.

Following the numbers on the screen shot above: 
- The switchMap issues a get request for category 2,  
- then cancels that request and issues a get request for category 3, 
- then cancels that request and issues a get request for category 1.
- Only the result for category 1 is emitted.

For this specific example, where the user can change their mind on the selected category, using switchMap is often the best choice. It will immediately react to the user's selection.

##When Should We Use switchMap?##
The switchMap operator is great for responding to user actions, such as this example of the user selecting a product category. It can then switch as the user changes their mind.

Also great for typeahead functionality.
RxJS Operator: mergeMap
Published: 2021-08-19 21:08:56

The `mergeMap` RxJS Operator is a higher-order mapping operator that processes each emitted value as it is emitted and returns the results as soon as they are available, which may not be in the order of the requests.

For example:

```TypeScript
products$ = this.categorySelected$
  .pipe(
       mergeMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

```
In the above code, the `mergeMap` will perform the HTTP get as soon as an Id is emitted from `this.categorySelected$`. When another Id is emitted, that request is performed concurrently.

##How Does mergeMap Work?##

We can think of the mergeMap like the 800 m race: the runners all start at the same time. And they will finish the race as quickly as they can. The order of the finish won't necessarily be the order they started.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di8bom289duq8zkq9vaz.png)
 

##Let's look at an Example##
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i641wxr4r9t9s8r2jf23.png)
 
In this example, the user clicks the category with an id of 2, changes their mind and picks 3, then decides they really want category 1.

Following the numbers on the screen shot above: 
- The mergeMap issues a get request for category 2, 
- when emitted, it issues a get request for category 3, 
- when emitted, it then issues a get request for category 1. 
- The result is emitted as soon as the response is returned.
- In the above example, the response for category 3 returns first,
- the response for category 1 returns next,
- and lastly the response for category 2 returns.

For this specific example, where the user can change their mind on the selected category, using mergeMap doesn't make sense. As shown in the above example, the last returned result may not be related to the most recent selection. (The user picked 1 last, but they now see the result for category 2.)

##When Should We Use mergeMap?##
The mergeMap is great for related data. Say we had a set of customer Ids and we wanted to get the detail for all of them, in no particular order. Using a mergeMap will get the data for all of them concurrently, providing a more performant user experience than getting them sequentially, one at a time, as with concatMap.
My Goals for 2021 Zuri intership
Tags: zuri, tech, intership
Published: 2021-08-19 21:00:11

---
title: My Goals for 2021 Zuri intership
published: true
description: virtual intership at zuri
tags: #zuri #tech #intership
//cover_image: https://direct_url_to_image.jpg
---

__My Goals for Zuri intership__
#1. To mastering backend Skills.
##2. To gaining Essential Background Knowledge.
###3. To perfecting Interpersonal Skills (Soft Skills).
####4. To building a Network of Contacts.

 Thanks!!!

link to Zuri team website https://zuri.team or 
https://internship.zuri.team or 
https://training.zuri.team
Higher-Order Mapping Operators
Published: 2021-08-19 20:47:02

Higher-order mapping operators are used to map inner Observables. They include:
- concatMap
- mergeMap
- switchMap

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4x8j3yn0hy7ggaz2vwl.png)
 
Each higher-order mapping operator:
- Automatically subscribes to the inner Observable
- Flattens the resulting Observable, returning `Observable<T>` instead of `Observable<Observable<T>>`
- Automatically unsubscribe from the inner Observable

For example:

```TypeScript
products$ = this.categorySelected$
  .pipe(
       switchMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

```

In this code, every time the user selects a new category, `this.categorySelected$` emits the id of the selected category. That id is piped through a higher-order mapping operator (`switchMap` in this case). The `switchMap` automatically subscribes to the inner Observable, flattens the result (emitting an array of type `Product[]` instead of `Observable<Product[]>`), and unsubscribes from the inner Observable.

Additional posts in this series look more closely at several higher-order mapping operators and when to use which.
Protocol translation in NestJS microservices
Tags: node, nestjs, microservices
Published: 2021-09-04 16:11:13

---
title: Protocol translation in NestJS microservices
published: true
date: 2021-08-19 20:31:06 UTC
tags: node,nestjs,microservices
canonical_url: https://omkarpatil.dev/protocol-translation-in-nestjs-microservices
---

Making async microservices talk to clients that use "standard" web-friendly API protocols (think mobile and web applications) requires [protocol translation](https://microservices.io/patterns/apigateway.html). Here is a very simple idea, inspired by [nats proxy project](https://nats.io/blog/natsproxy_project/), on how to achieve it in [NestJS](https://nestjs.com/) with [NATS](https://nats.io/) microservice transport.

The complete source code for this article is available on [Github](https://github.com/ospatil/protocol-translator.git). The README provides the setup and usage instructions as well as main files to look at. It's a [Nx Monorepo](https://nx.dev/) that contains the following two applications:

1. **Gateway** : This application exposes REST interface to clients, receives HTTP requests, dynamically forms the NATS subject name to send message to based on incoming request verb and path, sends the message to the subject, waits for NATS response from microservice and once received, sends out HTTP response back to client.
2. **Microservice** : This application listens on NATS subject and responds with a string message when invoked.

The overall interaction looks like this: ![protocol-translator.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629402269532/thQa21ZjB.png)

That's it for today. Happy coding! À bientôt 🙋‍♂️!
Efficient Web Surfing on Chrome/Vim Hybrid; The VimiumC Extension [RE#6]
Tags: article, chrome, productivity, vim
Published: 2021-08-20 11:12:33

---
title: Efficient Web Surfing on Chrome/Vim Hybrid; The VimiumC Extension [RE#6]
published: true
date: 2021-08-19 20:30:00 UTC
tags: article, chrome, productivity, vim
canonical_url: https://babakks.github.io/article/2021/08/19/re-006-efficient-web-surfing-on-chrome-vim-hybrid-the-vimiumc-extension.html
series: "Regular Encounters"
---

If you know Vim, you probably have dreamed that other desktop applications had such a rapid/efficient user experience too. The good news is that there’s this Chrome extension that realizes your foggy imaginations. Look at the first image below and you’ll get the point. Don’t forget to learn VimiumC shortcuts (just press `?` and the second image appears).

Have fun browsing! 😉

![](https://babakks.github.io/img/2021-08-20-re%23006-vimiumc.png)

![](https://babakks.github.io/img/2021-08-20-re%23006-vimiumc-help.png)

* * *

**_About Regular Encounters_**  
_I’ve decided to record my daily encounters with professional issues on a somewhat regular basis. Not all of them are equally important/unique/intricate, but are indeed practical, real, and of course,_ **_textually minimal._**
DeepMind’s XLand, Android 12 Beta’s Camera Switches, a Colorism Issue With Face Filters, & more on DevNews!
Tags: news, podcast
Published: 2021-08-19 20:17:55

---
title: DeepMind’s XLand, Android 12 Beta’s Camera Switches, a Colorism Issue With Face Filters, & more on DevNews!
published: true
description: Listen to S5E4 of the DevNews pod!
tags: news, podcast
series: DevNews Season 5
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

Listen to S5E5 of the DevNews podcast today!

{% podcast https://dev.to/devnews/s5-e5-deepmind-s-xland-android-12-beta-s-camera-switches-a-colorism-issue-with-face-filters-and-a-senior-s-robot-companion %}

**Hosts:** @saronyitbarek & @joshpuetz 

**Guests:** 
- [Max Jaderberg](https://twitter.com/maxjaderberg), Senior Staff Research Scientist @ DeepMind who talked with us about the company's new and exciting AI training tool, XLand.
- @s_aitchison, Software Engineer @ Forem who joined us to talk about Android 12 beta’s “Camera Switches,” which lets users control their phone with facial expressions 🤯 


---

_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ _— or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx)._ 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s5-e5-deepminds-xland-android-12-betas-camera-switches/id1525581923?i=1000532471374)
- [Spotify](https://open.spotify.com/episode/0zc0BY9YxhMKOqeEkbJmMp)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzM3?sa=X&ved=0CAQQkfYCahcKEwiAl5fO873yAhUAAAAAHQAAAAAQEA)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s5-e5-deepminds-xland-android-12-betas-camera-switches-a-colorism-issue-with-face-filters-and-a-seniors-robot-companion-86207672)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews/s5e5-deepminds-xland-android-m5qILznDchO/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=165225890)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods website](https://devpods.herokuapp.com/podcasts/devnews/episodes/181)

#### _Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season five sponsor, [Scout APM](https://scoutapm.com/devnews) ❤️ 


We hope you enjoy this episode of DevNews!
Day 7 : Learning Django Fundamentals
Tags: django, python, webdev, 100daysofcode
Published: 2021-08-19 20:17:52


Django is a python web programming framework, which allows us to dynamically generate HTML and CSS for the backend of our website. Django combines the static web pages created using HTML and CSS with the endless possibilites of the programming language python, leading us to built dynamic web applications.

Django will allow us to write python code which will dynamically generate HTML and CSS.

----


## HTTP
It stands for Hyper-Text-Transfer-Protocol, which is the protocol for how messages are going to be sent back and forth over the internet.

Example of a HTTP request method:-
![Request method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn9oup1dzsmragfl6vj5.png)

`Get` tells us that we want to get that particular page. `/` simply indicates that we are requesting for the home page. `HTTP/1.1` is the version of HTTP which we are using. `Host` tells us what URL we are trying to access the web-page for.

Example of an HTTP response:-
![HTTP response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckpzfvbc853pd63121ka.png)


### HTTP Status Codes:-

![Status codes http](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/630andf527ngsiub9fel.png)

----


## Starting an Django Project
To start a django project in the current directory, run this command:-
```
django-admin startproject project_name
```

The short intro to some starter files made by Django is given below:-


* `manage.py` :- We will use this file to be able to execute commands on this django project.

* `settings.py` :- If we want to change some settings to add features to our application or make modifications to how our application behaves. 

* `urls.py` :- This is the table of contents of all the urls on our web applications which ulitmately a user can visit.
Python Beginner Level Project Series |Episode - 1|
Tags: python, programming
Published: 2021-08-19 20:03:08

Hii! I am Goutham. I am starting a Beginner Level Projects Series in Python.
🎯The Main Goal of this series is to make Beginner Level Projects in python that any beginner can do.
❇️So This is Going to be a very long Series.
💥Follow me and Lets Learn Together. 

---
Welcome To The First Episode
### EPISODE 1 - YOUTUBE CHANNEL NAME GENERATOR
**Description:** This project suggests some suffixes that can be added at the end of your channel name. Using this project you can generate a channel name for your YouTube or any other channel.
📝Project - 01
🎓Skill-Level: Beginner
🎨Language-Python

💡You can run the project by clicking down the link below 👇
[`click here to run`](https://replit.com/@Gouthique/YouTibe-name-generator-start-1#main.py) ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
**Get The Code Here**
_Feel free to download and edit the code💨_
See the project in more detail at my GitHub
👉🏻[`Click Here`](https://github.com/Gouthique/Python-Programming/tree/main/Beginer-Level-Projects/1%20-%20YouTube%20Channel%20Name%20Generator)
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
`See You on the Next Episode:` [`Episode-2`](https://dev.to/gouthique/python-beginner-level-project-episode-2--lfg/edit)
**K. SAI GOUTHAM** - Thank you 👋🏻
Inner Observables and Higher Order Mapping
Tags: angular, rxjs
Published: 2021-08-19 20:00:23

When first starting out with RxJS, I didn't know what an "inner Observable" was, which made it difficult to fully understand the RxJS documentation. So, what is an inner Observable?

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9o6xe6plnlj07k6lull.png)

When working with Observables, the Observable we are acting on is the outer Observable. The `this.categorySelected$` Observable in the above example is an "outer Observable". We can pipe its emitted items through a pipeline of operations using the `pipe` method.

If any of those operations return an Observable, that returned Observable is the "inner Observable". The http get request in the above example is an "inner Observable".

In our code, we subscribe to the declared Observable, `products$` in this example, either with an explicit subscribe or with the async pipe in our template. Subscribing to the declared Observable automatically subscribes to the outer Observable, which is `this.categorySelected$` above. 

But how do we subscribe to the inner Observable? How do we unsubscribe?

One option is to do something like this:

```TypeScript
// Anti-Pattern!
this.sub = this.categorySelected$.subscribe(catId=>
  this.http.get<Product[]>(`${this.url}?cat=${catId}`)
    .subscribe(result => this.products = result)
);

```
In the above code we explicitly subscribe to the outer Observable. Within the next function passed into the subscribe, we subscribe to the inner Observable. We can use `this.sub` to unsubscribe from the outer Observable, but using the above code, we have no way to unsubscribe from the inner Observable.

This type of code, with nested subscribes, is not recommended. It is often defined as an "anti-pattern", that is a pattern of code that is *not* recommended and should be refactored.

So how do you subscribe to those inner Observables? That's the purpose of the RxJS higher-order mapping operators. We'll cover three of the common higher-order mapping operators in upcoming posts:
- concatMap
- mergeMap
- switchMap

All the best!
How to set up CSS Modules with esbuild
Tags: css, esbuild
Published: 2021-08-19 19:52:55

In this article, I'll show how to configure [CSS Modules](https://github.com/css-modules/css-modules) with [esbuild](https://esbuild.github.io/).

# CSS Modules
It is a technic of making our styles scoped locally. I first encountered it while working on this [SolidJS + esbuild](https://how-to.dev/how-to-build-solidjs-application-with-esbuild). My understanding is that it's popular among developers using react.

# Code

My code is pretty simples. `src/style.module.css`:
```CSS
.test {
  color: #66f;
}
```

`src/index.js`:
```JS
import styles from "./style.module.css";

const header = document.createElement("h1");

header.innerHTML = "Hello world";
header.className = styles.test;

document.body.appendChild(header);
```

## Output
This is combined in a way that ensures no css class collision:
```html
<style>
._test_1f4jo_1 {
    color: #66f;
}
</style>
...
<h1 class="_test_1f4jo_1">Hello world</h1>
```
# Dependencies
Esbuild needs a plugin to support CSS modules. On the [plugin list](https://github.com/esbuild/community-plugins), there are 2 listed. I used [esbuild-css-modules-plugin](https://github.com/indooorsman/esbuild-css-modules-plugin) here. The dependencies needed to run it all successfully:
```sh
$ npm install --save-dev esbuild-css-modules-plugin esbuild
```

An additional dependency is needed to address a tiny dependency issue:
```sh
$ npm install --save-dev css-tree
```

# esbuild
For using a plugin with esbuild, we need a build script. `build.js`:
```JS
#!/usr/bin/env node

const cssModulesPlugin = require("esbuild-css-modules-plugin");

require("esbuild")
  .build({
    logLevel: "info",
    entryPoints: ["src/index.js"],
    bundle: true,
    outfile: "dist/main.js",
    plugins: [cssModulesPlugin()],
  })
  .catch(() => process.exit(1));
```

If you run `chmod +x build.js`, you will be able to run it:
```sh
$ ./build.js 

  dist/main.js  722b 

⚡ Done in 16ms
```

# Links
* [example repo](https://github.com/how-to-js/esbuild-css-modules)
* [build output in acction](https://how-to-js.github.io/esbuild-css-modules/dist)
* [my video course about esbuild](https://bit.ly/esbuild-course)

# Summary
In this article, we have seen how to configure CSS Modules with esbuild.
️‍🔥️‍🔥 Best resources to learn Ruby on Rails for free
Tags: ruby, rails, tutorial, beginners
Published: 2021-08-19 19:40:48

I have been writing blogs on Ruby on Rails but none of it looks beginner-friendly even to me. Internet is full of free tutorials but curating is the hard part. So I thought instead of reinventing the wheel, let's post a list of tutorials that I found helpful during my early days of Rails.

## 💎 Ruby programming
🎥 Video course by *freeCodeCamp*: https://www.youtube.com/watch?v=t_ispmWmdjY <br>
📚 Interactive course by *BigBinary Academy*: https://academy.bigbinary.com/learn-ruby <br>

----

## 💎 🚂 Rails framework

### GO RAILS
#### Level 1
Building full-stack application from scratch -> https://gorails.com/series/rails-for-beginners
#### Level 2
Building REST API in Ruby on Rails -> https://gorails.com/series/how-to-build-apis-with-rails
#### Level 3
Design Patterns in Ruby on Rails -> https://gorails.com/series/design-patterns
#### Level 4
Building some common features -> https://gorails.com/series/common-features
#### Level 5
ActionCable for websockets -> https://gorails.com/series/actioncable-introduction
Background Jobs using Sidekiq -> https://gorails.com/series/background-jobs <br>
**Deploy Ruby on Rails to Heroku** -> https://gorails.com/series/deploying-to-production

### freeCodeCamp
Zero to Hero -> https://www.youtube.com/watch?v=fmyvWz5TUWg


### Too many cooks spoil the broth
There is a sea of courses on Rails but if I would have mentioned all of them just for the sake of a huge blog, it wouldn't be different than a fuzzy Google search.

Going through the course is just the beginning of your Rails journey. To become proficient in Rails, try to build products using the acquired knowledge. Start with building an MVP and then incrementally add features to it. It is difficult to get motivation for building a product without any reason so the best way would be to participate in Hackathons.

🤟🤟 Thanks for reading. If you find it helpful, do share it and hit a thumbs-up. 👍
Linear Search Algorithm | JavaScript
Tags: javascript, algorithms, webdev, computerscience
Published: 2021-08-19 19:39:40

In Linear Search or Sequential Search, every element in the array is checked, and if the match is found then the element index is returned otherwise, the search continues till the last element.

## Lets write some code

Always remember that array indexing starts from Zero - '0'

```javascript
const numbers = [2, 4, 67, 8, 44, 6, 12];
```

Now, lets write a function to apply linear search algorithm to above array.

```javascript
function linearSearch(array, num) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === num) {
      return i;
    }
  }
  return -1;
}

linearSearch(numbers, 8); // returns index 4
linearSearch(numbers, 28); // since 28 is not there, returns -1 

// Save the file and run it using Node.JS
// Open terminal and give command: node [filename].js
```

## Time Complexity 

The time complexity of Linear Search Algorithm is O(n).

let's improve the worst case scenario.
* If the search element found at last. O(n) -> O(1)
* If the search element not found. O(n) -> O(n/2)

```javascript
function betterLinearSearch(array, element) {
  let length = array.length;
  let left = 0;
  let right = length - 1;

  let position = -1;

  while (left <= right) {
    if (array[left] == element) {
      position = left;
      console.log(`${element} is present at index ${position}. attempt ${left + 1}`);
      break;
    }

    if (array[right] == element) {
      position = right;
      console.log(`${element} is present at index ${position}. - attempt ${length - right}`);
      break;
    }
    left++;
    right--;
  }

  if (position == -1) {
    console.log(`${element} not found. attempt ${left}`);
  }
}

betterLinearSearch(numbers, 8); 
// Try with a last element and check the attempts in log
betterLinearSearch(numbers, 12); 
betterLinearSearch(numbers, 28);

// Save the file and run it using Node.JS
// Open terminal and give command: node [filename].js
```

* In every iteration, first and last element from the array is being checked.
* After every iteration the left index needed to be increased and right index needed to be decreased.
* When position value remains `-1` it means the element is not present in array.

Well, that's it folks. I hope you learned something share it with your friends. Follow me for more posts just like this and let me know your thoughts in the comment section.

Cheers!
Zuri internship plan by Gesinde Abisolu
Published: 2021-08-19 19:19:35

Here are my goals and plans for my 8 week intership

1 Learn Java
2 Learn JavaScript
3 Learn HTML
4 Learn Pyhton

Figma account- damigesh@gmail.com
GitHub account- damigesh@gmail.com
Link to Zuri internship- https://internship.zuri.team

Tutorials
Figma- https://www.udemy.com/course/learn-ui-design-all-you-need-to-start-a-6-figure-career/
Github- https://www.udemy.com/course/git-complete/
Java- http://www.sololearn.com/Course/Java/?ref=app
Python- https://m.youtube.com/watch?v=_uQrJ0TkZlc