teleren/devto huggingface dataset:
Pod deletion is not so simple (after-all)
Tags: kubernetes, bestpractice, tip
Published: 2022-05-09 14:04:50

#### Kubernetes Pod Termination Process
A pod can be evicted for multiple reasons. 
- when a node is drained of all it's pods, 
- via kubectl delete, 
- scheduler evicts pods to allow the execution of higher-priority ones...

**Eviction process**
0. Delete request is issued
1. API server modifies the state to `Terminating` in etcd. 
2. The kubelet and the endpoints-controller start the eviction process:
  - Kubelet performs the pod eviction.
  - The endpoints-controller handles the endpoint removal process.
Both operations are asynchronous.


##### Kubelet sequence
Kubelet initiates a shutdown sequence for each container in the pod. 
1. Kubelet runs the container’s `pre-stop` hook (if it exists)
2. sends a **SIGTERM** to the containers and
3. waits for the termination of the containers. 

This sequential process by default is set to `30 seconds` (or the value in seconds specified in the `spec.terminationGracePeriodSeconds` field). 
If the container is still running beyond this time, kubelet waits for approximately 2 more seconds, and then kills the container forcibly by sending a **SIGKILL** signal.

In parallel, the endpoints-controller removes the pod’s endpoint by requesting the API server. This server notifies all the kube-proxies on the worker nodes. Each kube-proxy removes the endpoint from the iptables rules in its node. 

##### Implications
We cannot make assumptions about which of the eviction processes will complete first. If the endpoint removal process finishes before the containers receive the SIGTERM signal, no new requests will arrive while the containers are terminating. However, if the containers start terminating before the endpoint removal process is finished, the pods will continue to receive requests. In that case, clients will get “Connection timeout” or “Connection refused” errors as responses. Because the endpoint removal must propagate to every node in the cluster before it is complete, there is a high probability that the pod eviction process completes first. LearnK8s created a neat visual representation of these two scenarios.

##### Tips for graceful termination
1. Handle SIGTERM properly
2. Tune `spec.lifecycle.preStop` and `spec.terminationGracePeriodSeconds`
3. Use a stop-watch timer to count and drain connections and only then shut-down
Music Monday — What are you listening to? (May 9)
Tags: watercooler, discuss, music
Published: 2022-05-09 13:57:10

_cover image credits: [DLGNCE](https://giphy.com/gifs/love-animation-l46CqqobS7VRaIpSE)_

In this weekly series, folks can chime in and drop links to whatever it is they're listening to + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

Also noteworthy, my friend @duxtech has a Spanish speaking version of this series [here](https://dev.to/duxtech/series/17890) in case you'd like to chime in there as well. 🙌

{% embed https://dev.to/duxtech/lunes-de-musica-que-estas-escuchando-09-mayo-4m3k %}

So, what have y'all been listening to today? _Note: you can embed a link to your song on most platforms using the following syntax `{% embed https://... %}`._

I look forward to listening to y'all's suggestions! 👂 🎶
Installing WSL on another drive in Windows
Tags: wsl, docker
Published: 2022-05-09 13:56:10

The only way to do that is to move the linux distrubition you installed on wsl. I installed Ubuntu on windows as wsl and I showed how to move it step by step.

1.Check WSL 2 installations that are already installed in your computer.

`wsl --list -v`

If the installation you want to move to another drive is still running we have to stop it with following command. In my case, I want to move Ubuntu, so I am terminating Ubuntu.

`wsl -t Ubuntu`

2.Export to a folder. (Here exporting *Ubuntu* as *ubuntu-ex.tar* to D:\wsl\wsl_export)

`wsl --export Ubuntu "D:\wsl_export\ubuntu-ex.tar"`

3.Unregister previous WSL installation. When you unregister it will remove Ubuntu from the wsl2 list that we saw earlier. 

`wsl --unregister Ubuntu`

4.import your WSL installation to a folder. This step also re-registers the ubuntu.
`wsl --import Ubuntu "D:\wsl_import\ubuntu" "D:\wsl_export\ubuntu-ex.tar"`

Here’s a breakdown of the command:
- `wsl --import`: The base command to import a new Linux distribution.
- `Ubuntu`: The name you are giving to the new imported distribution.
- `D:\wsl_import\ubuntu`: The directory where the new distribution will be stored.
- `D:\wsl_export\ubuntu-ex.tar`: The tar file containing the exported distribution that you want to import.
May 9th in Streaming
Tags: apache, apachepulsar, realtimestreaming, bigdata
Published: 2022-05-09 13:51:37


Apache Flink is now in release 1.15!   Lots of cool updates.  

Apache Hudi 0.11.0 supports Apache Pulsar.


Hey everyone heading to Valencia or Barcelona in mid to late May, reach out.





In this edition, I am preparing for my trip to Spain for KubeCon and Spring IO conferences.   There is a lot of cool things going on.

ARTICLES

Trino + Iceberg + Apache Pulsar + Apache Flink for BlueCat.   Pub-Sub Model Subscription to minimize data after acks.  Cost and Ops savings.



RECENT EVENTS
Clickhouse May 4th Meetup


EVENTS
10-May-2022.   Kotlin.


16/20-May-2022. KubeCon | CloudNativeCon. Valencia, ES.

16-May-2022. DoK (Data on Kubernetes). Serverless Event Streaming Applications as Functions on K8








Add alt text
No alt text provided for this image
https://dok.community/dok-day-europe-2022-kubecon/

17-May-2022


May 26-27, 2022


12/14-June-2022. Berlin Buzzwords. Berlin.


14/15-June-2022. We are Developers World Congress. Berlin.


June 15, 2022.  Virtual.


June 21, 2022 - Virtual Poland - Data Science Summit: Machine Learning Edition.


July 25-27, 2022. Deep Dive into Building Streaming Applications with Apache Pulsar


June 28, 2022. Data + AI Summit.


August 2022



CODE

I added an example with security to send to StreamNative Cloud.


https://ossinsight.io/analyze/apache/pulsar?vs=apache%2Factivemq
Giới thiệu về Immer - Phần 3
Tags: react, immer, immutation, beginners
Published: 2022-05-09 13:42:39

Bài dịch từ trang chủ của Immer:
https://immerjs.github.io/immer/

### Sử dụng Curried producers

Trước tiên cần hiểu về currying function.

`Thay vì truyền vào cho function 1 lúc nhiều argument, chúng ta lại chuyển kiểu viết đó thành 1 function chỉ nhận 1 argument, nhưng bên trong đó chúng ta lòng các function con bên trong, và return về function con này.`

#### Code sample

```
import "./styles.css";
import React from "react";

export default function App() {
  const [name, setName] = React.useState("mike");
  const handleClick = (name) => (e) => {
    if (name === "minh") {
      alert("currying function");
      console.log(e.target);
    }
  };
  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button name="button-test" onClick={handleClick(name)}>
        Click me
      </button>
    </div>
  );
}

```
Hay ứng dụng trong validation của form. (Dự án mình dùng là vậy)

#### Quay lại về curried producers

Việc truyền một hàm làm đối số đầu tiên cho `produce` sẽ tạo ra một hàm chưa áp dụng `produce` cho một state cụ thể, mà tạo ra một hàm sẽ áp dụng `produce` cho bất kỳ state nào được truyền cho nó trong tương lai. Điều này thường được gọi là `currying`. Lấy ví dụ sau:

```
import produce from "immer"

function toggleTodo(state, id) {
    return produce(state, draft => {
        const todo = draft.find(todo => todo.id === id)
        todo.done = !todo.done
    })
}

const baseState = [
    {
        id: "JavaScript",
        title: "Learn TypeScript",
        done: true
    },
    {
        id: "Immer",
        title: "Try Immer",
        done: false
    }
]

const nextState = toggleTodo(baseState, "Immer")
```

Mô hình trên của toggleTodo khá điển hình; truyền `state` hiện có tới `produce`, sửa đổi `bản nháp (draft)` và sau đó trả về kết quả. Vì `state` không được sử dụng cho bất kỳ điều gì khác ngoài việc truyền tới `produce`, ví dụ trên có thể được đơn giản hóa bằng cách sử dụng dạng `curried` của `produce`, trong đó bạn chỉ truyền `công thức (recipe)` cho `produce` và `produce` sẽ trả về một hàm mới , hàm mới này áp dụng `công thức (recipe)` tới `baseState`. Điều này cho phép chúng ta rút ngắn định nghĩa toggleTodo ở trên.

```
import produce from "immer"

// curried producer:
const toggleTodo = produce((draft, id) => {
    const todo = draft.find(todo => todo.id === id)
    todo.done = !todo.done
})

const baseState = [
    /* as is */
]

const nextState = toggleTodo(baseState, "Immer")
```
Lưu ý rằng param `id` hiện đã trở thành một phần của hàm công thức (recipe)!
Weekly 0011
Tags: weeklyretro
Published: 2022-05-09 13:41:50

### Monday

Today is the office day!
So, I met my colleagues in our office. It’s always fun!

I worked on Network Guardian in the morning and after lunch I did a meeting with my colleague about a new “Security Toolbox” for Microsoft365.
It’s a kind of PowerShell Script swiss-knife to manage the Microsoft 365 Policies (at the moment).

It will be opensource on GitHub.

In the afternoon I booked a call with my team about an internal demo of “Network Guardian”, the next Monday morning at 9:00.

**Mood:** 🙂

### Tuesday

This morning I woke up early because my son disturbed me in the bed and for the first hours of work I was very tired.
At the beginning I worked on Network Guardian and I had a call about Oscar project.

In the afternoon I hosted the second episode of “GitHub Stories”. This is the last one in italian, I think :)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t474wotubp824zz5ie08.png) 

Today the guest was Gabriele, another GitHub Star ⭐.

After dinner I continued to work on Network Guardian. I solved two or three pending issues about the communication with the agents and SignalR.
Now it works.
Tomorrow I will work on some details but I am almost ready for the demo on Monday.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4shg0xuudrw73bvtvol3.gif)
 
In the very end of the day, I studied a lot about the Microsoft AZ-204 Certification.

**Mood**: 🥱

### Wednesday

I woke very early because I needed time to study for the exam AZ-204.
I did come practical tests and every time I did not pass ☹️

By the way, at 9:30 I started the exam and in less the 1 hour and half I passed the Microsoft AZ-204 exam!!!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pli2d7z5hun6qv6jx27f.png) 

Now I have all the requirements to become a Microsoft Certified Trainer.

In the afternoon I worked a little bit for Oscar. I created two new sections in our web application. We need it for the demos with the accelerators and advisors.

Later I still worked on Network Guardian.

**Mood:** 🙂

### Thursday
Nothing special, just work work work.

**Mood:** 😒

### Friday
In the evening I went out for a dinner with my new friends: Codemotion Ambassadors.
But a lot of them (and also me) invited other friends to the dinner.
The result was a dinner with old and new friends from the community.
AFTER TWO YEARS!
I totally missed this feeling!!!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65g661ilqci8mpoecczn.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdlbc4xjlhdqfic1b0bh.png)

Can't wait to meet them (and the other communities) again!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogoppjp946r7s9kcynvk.png)
  
**Mood:** 😁
STOP USING window as any
Tags: typescript, global, window
Published: 2022-05-09 10:06:42

### TLDR;
for someone who have a limit of time
```ts
// instead of this
(window as any).MY_GREETING_MESSAGE = 'Hi Earth!'
// do this
declare global {
    interface Window { 
         MY_GREETING_MESSAGE: string
    }
}
window.MY_GREETING_MESSAGE = 'Hi Earth!'
```

---

You guys typescripter might came across the situation that you need to put something into a global scope variable like `window`

For `javascript` you may easily put something into it without any complicated step like.

```js
// running in browser
window.MY_GREETING_MESSAGE = 'Hi Earth!'
```

but as Typescript which will do some type checking if any object attribute you are working on is really existed in the view of the static type language. you will be forbidden to do this directly.

```ts
window.MY_GREETING_MESSAGE = 'Hi Earth!'
// ^^
// Property 'MY_GREETING_MESSAGE' does not exist on type 'Window & typeof globalThis'.ts(2339)
```

## Why?
The answer is pretty straight, because the interface `Window` which declare for this global `window` variable does not have `MY_GREETING_MESSAGE` property

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac82op96fs304x891atp.png)

### Here come the `window as any`
for most of new Typescript developer may unable to solve this issue and put this dirty workaround like explicitly cast `window` to `any` which means we will access `window` without any type safety and no type checking in the runtime!

```ts
(window as any).MY_GREETING_MESSAGE = 'Hi Earth!'
```

### Bring back the type
As `window` has been declared by the standard Ambient type from Typescript library. The better approach is to extend this type like this

```ts
declare global {
    interface Window { 
         MY_GREETING_MESSAGE: string
    }
}
window.MY_GREETING_MESSAGE = 'Hi Earth!'
```
and this will let Typescript recognize the property you want to put into the ambient `window` object

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3ihxfj94q4ktf4508r9.png)
 
> noted that you need to make sure the value has been assigned before use, or you may make it as an optional property


Happy Coding!
Pomodoro Timer for Terminal
Tags: pomodoro, productivity, bash
Published: 2022-05-09 13:26:35

The [Pomodoro Technique](https://en.wikipedia.org/wiki/Pomodoro_Technique) is one of the most popular productivity / time management techniques around.

As programmers, we spend a lot of time in the terminal - and so I decided to build a super simple Pomodoro timer for the terminal.

⬇️ Get it [here.](https://gist.github.com/leo-pfeiffer/3e19a8c2c4f6f91f9b17b9f6bc8e0328)

![Screenshot of a terminal running the pomodoro command.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55rhz4ejxqnwn7nz3wk0.png)

The timer is implemented as a simple shell script, so you can simply `source` it to use the `pomodoro` command.

```bash
source pomodoro.sh
```

To start the timer, run:

```bash
pomodoro
```

A `pomodoro` consists of four work intervals with intermediate breaks:

Work (25 min) - Short Break (5 min)
Work (25 min) - Short Break (5 min)
Work (25 min) - Short Break (5 min)
Work (25 min) - Long Break (25 min)

You can customize the lengths of the work and break intervals.

For example, a work interval of 10 min (600s) with a 1 min (60s) short break and 2 min (120s) long break could be set like this:

```bash
pomodoro -w 600 -s 60 -l 120
```

Beyond the countdown visible in the terminal, you will also get a notification whenever you start a work or break interval. (Notifications are only supported on Mac OS - sorry).

![Screenshot of two notifications on a MacBook screen showing the pomodoro timer intervals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yny6b59cd504zzba8ges.png)

You can turn off the notifications if you want:

```bash
pomodoro --quiet
```

Happy working!

⬇️ You can get the script [here.](https://gist.github.com/leo-pfeiffer/3e19a8c2c4f6f91f9b17b9f6bc8e0328)
How To Bind CSS Class with Vue template
Tags: vue, css, frontend, webdesign
Published: 2022-05-09 13:22:35

Some time we may need to bind css class conditional in vuejs app.Here you can follow this example to bind css class with vue template.

**1.** There is button.when we click on it the color of the text will be changed by adding a class

```vue
<template>
  <div class="main">
    <p class="p-me color-me">Awsome vue</p>

    <button @click="colorMe = true">Add Class</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      colorMe: false,
    };
  },
};
</script>

<style scoped>
.change-me {
  font-size: 2rem;
}

.color-me {
  color: goldenrod;
}
</style>

```

**2.** add event listener on the button that will change the value of 'colorMe'

```vue
<button @click="colorMe = true">Add Class</button>
``` 

**3.** Define a data property in vue instance named 'colorMe'

```js
export default {
  name: "App",
  data() {
    return {
      colorMe: false,
    };
  },
};
 ```

**4.** Make css class which will be applied after button click

```vue
<style scoped>
.change-me {
  font-size: 2rem;
}

.color-me {
  color: goldenrod;
}
</style>

 ```

**5.** Here the awesome part comes.**Bind** the class like :class and apply with js es6 template literal expression.

```vue 
 <p :class="`p-me ${colorMe && 'color-me'}`">Awsome vue</p>
```

:point_right: You can also toggle class by setting the reverse value of colorMe as value of colorMe.Like below

```vue
  <button @click="colorMe = !colorMe">Add Class</button>
``` 

And thats it.You have done awsome **class binding** feature of vuejs :smiley:

See the complete code here [Here](https://codesandbox.io/s/awsome-vue-ey3lnx?file=/src/App.vue) :rocket:
Ultimate Personal Branding For Freelance Writers (2022)
Tags: personalbranding, freelance, writingtips, writersonwriting
Published: 2022-06-03 11:22:49

---
title: Ultimate Personal Branding For Freelance Writers (2022)
published: true
date: 2022-05-09 13:05:08 UTC
tags: personalbranding,freelance,writingtips,writersonwriting
canonical_url: https://writingcooperative.com/ultimate-personal-branding-for-freelance-writers-2022-4e87f3843188
---

[![](https://cdn-images-1.medium.com/max/640/1*M67zAX-ePNMs_xtudmOGmw.jpeg)](https://writingcooperative.com/ultimate-personal-branding-for-freelance-writers-2022-4e87f3843188?source=rss-8b0955f01559------2)

“How do I brand myself as a freelance writer?” is among the frequently asked questions by many freelancers who get in touch with me.

[Continue reading on The Writing Cooperative »](https://writingcooperative.com/ultimate-personal-branding-for-freelance-writers-2022-4e87f3843188?source=rss-8b0955f01559------2)
Try an easier way to code in containerized envs with Raftt 🎯 🐳
Tags: docker, kubernetes, startup, programming
Published: 2022-05-09 12:51:34

Our solution helps devs with the frustrations of configuring, maintaining, and sharing development environments on local machine. 

✓ Get remote dev envs created in a single command 
✓ Share your entire environment with a single URL 
✓ Debug remote containers interactively just as if they were run locally

Try our free version today >> https://docs.raftt.io/docs/basics/quickstart
AWS Lambda
Tags: serverless, aws, lambda, cloudskills
Published: 2022-05-09 12:51:32

**<u>_AWS Lambda_</u>** is a serverless computing service that allows users to run code as functions without provisioning or managing servers.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzaxnljxa0zv7i0o6x92.JPG)

**<u>Lambda Functions supports the following languages:</u>**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6x97jlzvl9hcu7oy74s.JPG)
**<u>_Pricing details:_</u>**
Charges are applied based on the number of requests for the functions and the time taken to execute the code.

       The memory allocated to AWS Lambda for computing is **128MB **(minimum) to **3008MB **(maximum). 
       **Additional memory** can be requested in an increment of **64MB between 128MB** **- 3008MB.**

       The **default execution time** for AWS Lambda is **3seconds**, and the maximum is **15 minutes** (**900 seconds**).
Day 9 - What is ref in react?
Tags: react, beginners, webdev
Published: 2022-05-09 13:30:08

---
title: Day 9 - What is ref in react?
published: true
date: 2022-05-09 12:45:21 UTC
tags: react, beginners, webdev
canonical_url: https://blog.sanjaybabu.dev/what-is-ref-in-react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4aatt9e9evmp2ngp83m8.png
series: 100 days of interview questions

---

In react, Refs provide a way to access or reference the DOM element from within a parent component. Generally, in react, we would use props for any interactions between the components. We can re-render the component with updated props to modify it. Refs provide a way to imperatively do this change.

## When to use Refs?

According to react documentation,

- Manage focus, text selection, or media playback.
- Perform imperative animations.
- Integrate with third-party DOM libraries.

## When not to use Refs?

We use a library like react for its declarative programming style. We just specify this or that needs to be done and the react handles it. But when the ref provides us the flexibility of imperative control. Hence these should not be overused.

## Example

```jsx
class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

```