teleren/devto huggingface dataset:
🎉 Announcing Angular Hot Toast — The Best Angular Toast in Town
Tags: angular, angularlibrary, typescript, toast
Published: 2021-02-02 03:29:28

---
title: 🎉 Announcing Angular Hot Toast — The Best Angular Toast in Town
published: true
description: 🍞 Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.
tags: angular, angularlibrary, typescript, toast
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yul5o6yxuo45w84m7cmu.png
---

A few weeks ago [Netanel Basal](https://twitter.com/NetanelBasal) came up with an idea to create [react-hot-toast](https://react-hot-toast.com/) like library for Angular community.

And I am really glad that we ended up creating the best Angular toast in town, announcing...

 # 🎉 Angular Hot Toast — The Best Angular Toast in Town

[![header 2 (4).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1612234207228/jJ4ZL24ae.gif)](https://ngneat.github.io/hot-toast/)

## Getting Started

You can install it through **Angular CLI**:

```bash
ng add @ngneat/hot-toast
```

or with **npm**:

```bash
npm install @ngneat/overview @ngneat/hot-toast
```

When you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial<ToastConfig>`](#toastconfig)) here.:

```typescript
import { HotToastModule } from '@ngneat/hot-toast';

@NgModule({
  imports: [HotToastModule.forRoot()],
})
class AppModule {}
```

## Features

- 🔥 **Hot by default**
- ☕ **Easy to use**
- 🐍 **Snackbar variation**
- ♿ **Accessible**
- 🖐️ **Reduce motion support**
- 😊 **Emoji Support**
- 🛠 **Customizable**
- ⏳ **Observable API**
- ✋ **Pause on hover**
- 🔁 **Events**
- 🔒 **Persistent**

## Here are some basic examples:

```typescript
import { HotToastService } from '@ngneat/hot-toast';

@Component({})
export class AppComponent {
  constructor(private toast: HotToastService) {}

  showToast() {
    this.toast.show('👋 Hello World!');
    this.toast.success('👍 Yeah!!');
    this.toast.warning('🧐 Boo!');
    this.toast.error('😭 Oh no!');
  }
}
```

A common task is to show a success or error toasts based on the server response. To make your life easier, we created a custom operator that will do the work for you:

```typescript
import { HotToastService } from '@ngneat/hot-toast';

@Component({})
export class AppComponent {
  constructor(private toast: HotToastService, 
              private usersService: UsersService) {}

  update() {
    this.usersService.updateUser().pipe(
      this.toast.observe({
         loading: 'Updating...',
         success: '🚀',
         error: '😡'
      })
    ).subcribe()
  }
}
```

Checkout more examples at: <https://ngneat.github.io/hot-toast/>

## Repo

{% github ngneat/hot-toast %}

---

Do checkout the library and let us know your feedback. You can reach-out to me at [@shhdharmen](https://twitter.com/shhdharmen).

Happy Coding

🌲 🌞 😊
Use isInputPending API for better scheduler
Tags: react, fre, chrome, facebook
Published: 2021-02-02 03:00:34

As you know, fre is an asynchronous rendering UI library that similar to react. The rendering process of components can be interrupted

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eukgex19swroryye32ux.png)

The priority scheduling of react first enumerates and classifies events, which is too much code.

How can fre implement priority without enumerating event names?

### isInputPending()

Inspired by react fiber, Facebook has written a proposal that when the browser is in the input pending state, you can interrupt your JS loop

```js
while(navigator.scheduling.isInputPending()){
  setTimeout(reconcileWork) open a new tick
}
```
We also can use this API to divide priorities, such as this:

```js
dom.addEventListener('input', (e) => {
  let isHighPriority = navigator.scheduling.isInputPending()
  setState(count + 1, isHighPriority)
})
```
It's done. We have a priority system with just one API.

https://github.com/yisar/fre/pull/226

At present, it has been shipped in fre, and we will do more based on it in the future.

It's worth mentioning that fre now has three priorities

1. high priority => input pending => immediately
2. common priority => time slicing => 16ms 
3. low priority => component update => It's been interrupted

If you are interested in asynchronous rendering or react internal implementation principles, welcome to fre's GitHub

https://github.com/yisar/fre
Sorting comparator
Published: 2021-02-02 02:41:52

In Javascript, we have the sort method for arrays. If "a" is less than "b" by some ordering criterion, then we return -1. If "a" is greater than "b" by the ordering criterion, we return 1. This is the basic idea to sort things. We can do the same for Python. In this video, I solve the problem of sorting by a score in **descending order** and then by name in **ascending order**.

{% youtube U1mZwzOVD4A %}
Simple OSRS bot farm CI/CD
Published: 2021-02-02 02:32:41

One useful feature of my botting setup is automated deployment triggered from `git push`.  This setup is possible because the botting clients are containerised - each machine in the cluster runs many containers, each container runs a single bot. 

I have utilised a few free tools to implement a simple but effective poll-based CI/CD pipeline.

The container image is hosted in a private space on Docker Hub.  I have configured Docker Hub to poll the bitbucket repo for changes and build when new commits are discovered.  

Each of the machines have a `containerr/watchtower` deamon running, which polls docker hub for new versions of the bot client image.  When a new image version is discovered, watchtower pulls it, recreates and restarts the containers.

It takes ~5 minutes between pushing the code change and all bots running the updated version of the script.
350 Bracket Wiringg Diagram
Published: 2021-02-02 02:23:53

Chevy 350 Bracket Diagram. Details Fastener Tightening Specifications Specification Application Accelerator Control Cable Bracket Bolt and Nut Belt Idler Pulley Bolt Camshaft Retainer Bolt Camshaft Sprocket Bolt. The valve contains a uniquely formed cylinder in a chamber. 

This Chevy 350 Bracket Diagram. Force Steering Parts Bob S Classic Chevy Parts. I need to supplant the sparkplugs. There are alot Chevy 350 Bracket Diagram objective to scratch a part of electric circuit gear, railroad vehicles, or electronic circuit, one of them and the at the typically defrauded is the Chevy 350 Bracket Diagram electrical circuit.

Source:https://www.parashop.xyz/
Building Your First CLI Tool With Nodejs
Tags: beginners, webdev, linux
Published: 2021-02-02 02:11:32

I thought that JavaScript just works in browser, I've wrong opinion of this amazing programming language, it's actually can run on your command line paired with popular platform called nodejs.

In this article, I'll show you how to make simple CLI tool with javascript, let's get started.

## Initialize The Project
First of all, we’ll create new folder for example `hello-cli` and run the initialization with `npm` or `yarn`.
```bash
$ npm init
# or maybe you wanna use yarn
$ yarn init
```
Inside that directory create file called index.js and fill this with a simple code shown below.
```javascript
console.log('Hello World');
```
And run it, with this command.
```bash
$ node .
# output
Hello World
```
As you can see above we receive an output `Hello World`.

> How ashamed is it? Says Patrick

Well, okay if you can create it why don’t you tell me about the guide to making such thing, so I would never go to search engine and looking for it on the internet.

Arrgghh, Let’s forget about patrick! and continue the project, everything will be fine.

## Make The File as Regular Shell Command

To achieve this thing, we must to add `#!/usr/bin/env node` at the top of our index.js.

And make it possible to executable even without node command.
```javascript
#!/usr/bin/env node
console.log('Hello World');
```

## Update our package.json
Next we need to updating our package.json by adding new property called `bin`.

`bin` property basically specify command name for node project, but in this case we only have a single file in our project, so the `name` property will be used as shell command name.
```json
{
  "name": "hello-cli",
  "bin": "./index.js",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
```

## Make Package Globally Available

For now, our app not globally available yet, that means we cannot run it with `hello-cli` command.

But, in this case also we don’t want to run our application as `hello-cli`.

Instead, we want to run this application by typing only hello, so to do this we also update the name property.

**Updated package.json as shown below.**

```json
{
  "name": "hello",
  "bin": "./index.js",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
```
Now we change the `index.js` file permission by doing `chmod +x index.js` otherwise , you will received `permission denied` message when trying to run it.

Then, after that we run command `npm link` or `yarn link` on the project directory. Since you run the command above you make symbolic link, and now `hello` package available as global package.

Let’s start to run our application, by running `hello` command in our shell/cmd.

```bash
$ hello
# output
Hello World
```
***Wow !*** it is work! Thanks for reading.

[Original Post](https://nurofsun.com/blog/build-cli-tool-nodejs/)
How Freelancing Helped Me To Get a Software Engineering Position
Tags: career, webdev, programming, productivity
Published: 2021-02-02 01:35:17

**1. Know pair programming tools:**
In 2021, a lot of us has to work remotely and it wasn't a planned transition. One of the biggest challenges for software developers is to help out other team members. When we do pair programming, It's either they scroll too fast (so can't read), they closed a file (that we were just reading), or we got to dictating on what to type (takes time because we got to repeat it). But thanks to freelancing, you are forced to learn a lot of new tools to avoid the above problems. One of the tools that helped me with getting a job is to know how to use VS Code properly. Thankfully, it has one of the best plugins called "Live Share" that allows you to share your local environment with another developer so you can make changes directly in the source code. So if you get a question on the interview "how would you pair a program with another developer", don't forget about VS Code LiveShare technique.

**2. Wearing multiple hats:** 
As a freelancer, you got to to be a project manager, a system architect (depending on the client work), writing code, testing the system, and a lot more. But how did this helped me? Well, when you are communicating with clients, they are none technical people who would say "I don't know what JWT is and I don't think we need it as long as users can log in". At this moment, you would have to find a way to explain using none technical terms why JWT is important. Something will happen during the interview. You will be talking to multiple non-tech people who will ask you simple technical questions and you will have to explain it using the terms they will understand.

**3. Knowing relevant languages:** 
At first, when I was searching for clients, I would make sure that I was able to use PHP, ReactJs, and MySQL/MongoDB. But with time, I wanted to expand myself to other languages and for more opportunities. So I started to learn & use NodeJs for the backend, VueJs for the frontend, and Postgres for the database. When I started to look around for a full-time position, I had more options to where I could apply as I felt confident in using new skills. Also during the interview, I got a positive note from them saying "you are using/have the experience in stacks that we are using in our applications". So at the end of the day, it's not a bad idea to learn new languages but it has to be with purpose and making sure you will be using them every day (don't waste time on learning things you won't use).

I would say these are my top 3 points that helped me with getting a software engineering job. Would I stop freelancing? Not really, I will defiantly have fewer clients but I will keep on hustling.

Subscribe to my youtube channel DevPool as my goal is to help beginners and juniors to succeed in the tech industry.

[YouTube - DevPool](youtube.com/channel/UC03vw5F2isFkbJhyEZU5bvg?sub_confirmation=1 "DevPool")
Insertion Sort
Tags: javascript, html, css, webdev
Published: 2021-02-02 00:59:52

---
title: Insertion Sort 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Insertion Sort: Introduction
                       -Insertion Sort: Implementation
          
         
  
                        
             


###Insertion Sort: Introduction
Builds up the sort by gradually creating a larger left half which is always sorted. 


###Insertion Sort: Implementation

####Insertion Sort Example 

```javascript 

function insertionSort(arr){
	var currentVal;
    for(var i = 1; i < arr.length; i++){
        currentVal = arr[i];
        for(var j = i - 1; j >= 0 && arr[j] > currentVal; j--) {
            arr[j+1] = arr[j]
        }
        arr[j+1] = currentVal;
    }
    return arr;
}

insertionSort([2,1,9,76,4])


```
Selection Sort
Tags: javascript, html, css, webdev
Published: 2021-02-02 00:59:20

---
title: Selection Sort 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Selection Sort: Introduction
                       -Selection Sort: Implementation
     
         
  
                        
             


###Selection Sort: Introduction

Selection sort is similar to bubble sort, but instead of first placing the large values into sorted positions, it places small values into sorted positions. 




###Selection Sort: Implementation

####Selection Sort Example

```javascript 

function sselectionSort(arr){
    for(var i = 0; i < arr.length; i++){
        var lowest = i;
        for(var j = i+1; j < arr.length; j++){
            if(arr[j] < arr[lowest]){
                lowest = j;
            }
        }
        if(i !== lowest){
            //SWAP!
            var temp = arr[i];
            arr[i] = arr[lowest];
            arr[lowest] = temp;
        }
    }
    return arr;
}


function selectionSort(arr) {
  const swap = (arr, idx1, idx2) =>
    ([arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]]);

  for (let i = 0; i < arr.length; i++) {
    let lowest = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[lowest] > arr[j]) {
        lowest = j;
      }
    }
    if (i !== lowest) swap(arr, i, lowest);
  }

  return arr;
}

selectionSort([0,2,34,22,10,19,17]);


```
Bubble Sort
Tags: javascript, html, css, webdev
Published: 2021-02-02 00:58:46

---
title: Bubble Sort
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Intro to Sorting Algorithm
                       -Built-In JavaScript Sorting
                       -Bubble Sort
                       -Bubble Sort: Implementation
                       -Bubble Sort: Optimization
             
  
                        
             


###Intro to Sorting Algorithm
A sorting algorithm is the process of rearranging items in a collection such as an array, so that the items are in some kind of order. 

Some examples include 

-Sorting numbers from smallest to largest 
-Sorting names alphabetically 
-Sorting movies based on release year 
-Sorting movies based on revenue 

Sorting is a common functionality in applications. There are many different ways to sort things; different techniques have their own advantages and disadvantages. 

An interesting web site to show off sorting algorithms with animations. 

https://www.toptal.com/developers/sorting-algorithms 


###Built-In JavaScript Sorting
Javascript has a built-in sorting method, however it works slightly different than expected. The sort() method sorts the elements of an array in place and returns the array. Not a stable way to sort items. 

The built-in sort method accepts an optional comparator function. The comparator function tells JavaScript how you want it to sort. The comparator looks at pairs of elements (a and b), determines their sort and order based on the return value. 


More information here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

###Bubble Sort: sorting algorithm where the largest values bubble up to the top. Many sorting algorithms involve some type of swapping functionality. 



###Bubble Sort: Implementation

```javascript 

function bubbleSort(arr){
  for(var i = arr.length; i > 0; i--){
    for(var j = 0; j < i - 1; j++){
      console.log(arr, arr[j], arr[j+1]);
      if(arr[j] > arr[j+1]){
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;         
      }
    }
  }
  return arr;
}

// ES2015 Version
function bubbleSort(arr) {
  const swap = (arr, idx1, idx2) => {
    [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
  };

  for (let i = arr.length; i > 0; i--) {
    for (let j = 0; j < i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }
  return arr;
}

bubbleSort([8,1,2,3,4,5,6,7]);

```



###Bubble Sort: Optimization


```javascript 


function bubbleSort(arr){
  var noSwaps;
  for(var i = arr.length; i > 0; i--){
    noSwaps = true;
    for(var j = 0; j < i - 1; j++){
      if(arr[j] > arr[j+1]){
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
        noSwaps = false;         
      }
    }
    if(noSwaps) break;
  }
  return arr;
}

bubbleSort([8,1,2,3,4,5,6,7]);


```
Searching Algorithms
Tags: javascript, html, css, webdev
Published: 2021-02-02 00:58:05

---
title: Searching Algorithms 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Intro to Searching
                       -Intro to Linear Search 
                       -Intro to Binary Search
 
                        
             


###Intro to Searching
Searching is a commonly used functionality for applications. Search engines such as google optimize their results based on a complex algorithm. Youtube has a search algorithm for finding and recommending videos. Searching is a fundamental procedure for applications to be useful. There are many different methods for implementing a search algorithm. Certain situations may make more sense to use a specific search over another. 



###Intro to Linear Search
JavaScript includes many array methods for search algorithms. Some are indexOf, includes, find, findIndex. 

Linear search functions by moving one interval at a time. As well as eliminate one element at a time. 


####Linear Search Examples 

```javascript 

function linearSearch(arr, val){
    for(var i = 0; i < arr.length; i++){
        if(arr[i] === val) return i;
    }
    return -1;
}

linearSearch([34,51,1,2,3,45,56,687], 100)


```



###Intro to Binary Search
Binary search is more efficient than linear search because instead of eliminating one element at a time, its eliminates half of the remaining elements at a time. 


####Binary Search Example

```javascript 

function binarySearch(arr, elem) {
    var start = 0;
    var end = arr.length - 1;
    var middle = Math.floor((start + end) / 2);
    while(arr[middle] !== elem && start <= end) {
        if(elem < arr[middle]){
            end = middle - 1;
        } else {
            start = middle + 1;
        }
        middle = Math.floor((start + end) / 2);
    }
    if(arr[middle] === elem){
        return middle;
    }
    return -1;
}

// Refactored Version
function binarySearch(arr, elem) {
    var start = 0;
    var end = arr.length - 1;
    var middle = Math.floor((start + end) / 2);
    while(arr[middle] !== elem && start <= end) {
        if(elem < arr[middle]) end = middle - 1;
        else start = middle + 1;
        middle = Math.floor((start + end) / 2);
    }
    return arr[middle] === elem ? middle : -1;
}

binarySearch([2,5,6,9,13,15,28,30], 103)


```
git log จำกัดจำนวน commits ด้วย option -<number>
Tags: git, programming
Published: 2021-02-02 00:38:28

เมื่อวานได้รู้อีก option ของคำสั่ง git log ที่เอาไว้ดูรายละเอียดของ commits ของ git repository โดยปกติจะไล่เรียกจาก commit ล่าสุดย้อนกลับไปหา commit ก่อนหน้า โดยปกติถ้าเราสั่ง git log เฉยๆมันจะลิสต์มาทั้งหมดเลย แต่ถ้าเราอยากจำกัดจำนวนเอา commit ที่ให้ git log ลิสต์มาให้นั้น เราสามารถใส่ option รูปแบบนี้ได้

```
git log -<number>
```

โดยที่ `<number>` คือจำนวน commit เช่น

```
# From https://github.com/gofiber/fiber repository
$ git log -2

commit 61f5c43dca6010a11a51eab383a06968bd7c89fb (HEAD -> master, tag: v2.2.5, origin/master, origin/HEAD)
Merge: 07aa649 3242e5b
Author: Joey <fenny@gofiber.io>
Date:   Fri Dec 11 01:03:39 2020 +0100

    Merge pull request #1073 from Fenny/master
    
    🚧 refactor bodyparser

commit 3242e5b151ae84d66b77b31318deedbabc6d5c3f
Author: Fenny <25108519+Fenny@users.noreply.github.com>
Date:   Fri Dec 11 00:59:32 2020 +0100

    🚀 allow incase-sensitive ctypes in bodyparser
    
    Co-Authored-By: Mones Zarrugh <11161902+moneszarrugh@users.noreply.github.com>
```

## ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth

ขอบคุณครับ 🙏