teleren/devto huggingface dataset:
Kubernetes - Worker nodes
Tags: kubernetes, blog, devops, tutorial
Published: 2022-04-11 18:59:33

Kubernetes is a container Orchestrator, the main key point of Kubernetes is it packs a lot of things like scheduling, fail-over, high availability all in one tool. 

But how does Kubernetes provide all this, well the way it does it is by Clustering multiple servers called as nodes. So basically imagine Kubernetes is a Octopus(But this octopus can start adding tentacles when needed). The nodes are like bee's and Kubernetes is the hive leader.

When you run your containers, the kubernetes scheduler will schedule the pods on the respective node, depending on how many containers are running on those nodes and the amount of space etc it's smart.

###So how do I add nodes?
Well the token needs to be added on the nodes, for example **K3s** uses [This](https://pet2cattle.com/2021/04/k3s-join-nodes)

For **microk8s** use, official [docs](https://microk8s.io/docs/clustering)
```
microk8s add-node

This will return some joining instructions which should be executed on the MicroK8s instance that you wish to join to the cluster (NOT THE NODE YOU RAN add-node FROM)

From the node you wish to join to this cluster, run the following:
microk8s join 192.168.1.230:25000/92b2db237428470dc4fcfc4ebbd9dc81/2c0cb3284b05

Use the '--worker' flag to join a node as a worker not running the control plane, eg:
microk8s join 192.168.1.230:25000/92b2db237428470dc4fcfc4ebbd9dc81/2c0cb3284b05 --worker

If the node you are adding is not reachable through the default interface you can use one of the following:
microk8s join 192.168.1.230:25000/92b2db237428470dc4fcfc4ebbd9dc81/2c0cb3284b05
microk8s join 10.23.209.1:25000/92b2db237428470dc4fcfc4ebbd9dc81/2c0cb3284b05
microk8s join 172.17.0.1:25000/92b2db237428470dc4fcfc4ebbd9dc81/2c0cb3284b05
```

For **kind**, [Official Docs](https://kind.sigs.k8s.io/docs/user/configuration/#nodes)
To configure kind cluster creation, you will need to create a YAML config file. This file follows Kubernetes conventions for versioning etc. 
```
kind: Cluster
apiVersion: kind.x-k8s.io/v1alpha4
# One control plane node and three "workers".
#
# While these will not add more real compute capacity and
# have limited isolation, this can be useful for testing
# rolling updates etc.
#
# The API-server and other control plane components will be
# on the control-plane node.
#
# You probably don't need this unless you are testing Kubernetes itself.
nodes:
- role: control-plane
- role: worker
- role: worker
- role: worker
```

To add a node using **kubeadm**
```
kubeadm token create --print-join-command
kubeadm join 192.168.0.150:6443 --token 1642s5.ih5q6mdtf0pt9jey --discovery-token-ca-cet-hash sha256:d35bc841bd1ad7fd0223e506c8484bcafe9aa59427535b2709ed4b41201ce81b
```
Refer: [This](https://www.golinuxcloud.com/kubernetes-add-node-to-existing-cluster/)

That's all, any feedback or criticism is highly appreciated.

You can reach out to me at [@mediocreDevops](https://twitter.com/mediocreDevops) for any discussions or freelance opportunities.
Meet the Tanukis: Jessica Reeder
Tags: devops, community, techtalks, gitlab
Published: 2022-04-11 18:49:34

Meet the Tanukis is a stream about the amazing team members at GitLab. Each episode focuses on a team member discussing issues in tech that are important to them. This episode features Jessica Reeder, Senior All Remote Campaign Manager! 

{% youtube gFiaLLY5fjQ%}


## Links
Jessica:
https://www.jessicareeder.com
https://about.gitlab.com/handbook/marketing/readmes/jessicareeder/
https://allremote.info

Free licenses of GitLab for education!! 
https://about.gitlab.com/solutions/education/
Lesson 07 | Functions
Published: 2022-04-11 18:19:18

## Functions in C
A function is a block of reusable logic that may have a defined set of input and output.

## Built-In Function in C
The C programming language comes with built-in standard library functions, such as:

- `printf()`
- `rand()`

```c
#include <stdio.h>

int main() {
  // printf is a standard library function
  printf("Hello built-in functions!");
}
```
## Calling Functions
In C, a function is called by stating the function name followed by parentheses. One or more argument values can be placed in the parentheses if the function requires any input values.

```c
int incrementBy(int number1, int number2) {
  return number1 + number2;
}

int main() {
  // The value of myNumber is retrieved by
  // calling the function incrementBy() with
  // the arguments 5 and 2
  int myNumber = incrementBy(5, 2);
}
```
## Storing A Return Value
A function `return` value, or function output, can be stored in a variable to be used for future calculations.
```c
int incrementBy(int number1, int number2) {
  return number1 + number2;
}

int main() {
  // myNumber will hold the return value
  // of increment by, which is 7
  int myNumber = incrementBy(5,2);
}
```
## Function Signature
A user-defined function is defined using a function signature. This signature specifies the return type and the function name followed by parameters inside parentheses.
```c
// A function signature includes the
// return type, function name, and
// parameter(s) in the parentheses
int incrementBy(int number1, number2) {
  return number1 + number2;
}
```
## Return Type void
A function that returns no value must use the keyword `void` as the return type within the function signature.
```c
// void is used since the function
// printNumnber does not return any value
void printNumber(int number) {
  printf("Your number is %d\n", number);
}
```
## Function Return Value
A user-defined function can `return` a value with the return keyword followed by the value to be returned. The type of the returned value must match the return type specified in the function signature.
```c
// the return keyword returns the
// value following the keyword
int getOne() {
  return 1;
}
```
## Function Parameters
In C, a user-defined function can specify input using parameters. Parameters are comma-separated variable definitions within the function signature parentheses.
```c
// number1 and number2 are paramters
// for the incrementBy function
void incrementBy(int number1, int number2) {
  return number1 + number2;
}
```
## Function Protypes
A function prototype specifies an interface with the required return type and parameter types to help the compiler ensure a function is called properly. A function prototype also helps separate the function declaration from its implementation.
```c
// function prototpe
int increment(int);

// function implmentation
int increment(int number) {
  return number += 1;
}
```
Deepgram x DEV Hackathon - Python CLI
Tags: hackwithdg, python, productivity
Published: 2022-04-11 18:18:55

A python command-line app to easily transcribe hundreds of files.

## Installation

```
pip install git+https://github.com/skyme5/deepgram-cli.git
```

## Usage

```text
usage: deepgram-cli [-h] [-f [FILES ...] | -u [URLS ...] | -i BATCH_FILENAME] [-d] [-q]

options:
  -h, --help            show this help message and exit
  -f [FILES ...], --file [FILES ...]
                        At least one or more audio file path to transcribe.
  -u [URLS ...], --url [URLS ...]
                        At least one or more urls to transcribe.
  -i BATCH_FILENAME, --batch-file BATCH_FILENAME
                        Read files/orls from batch file (one per line).
  -d, --dump-json       Save metadata to a JSON file.
  -q, --quiet           Do not print anything except errors to the console.
```

## License

MIT

## Submission Category:

Wacky Wildcards

---

https://github.com/skyme5/deepgram-cli
Lesson 06 | Pointers and Memory
Published: 2022-04-11 18:13:34

## What is a pointer?
A pointer is a variable that stores the hexadecimal address of the variable it is pointing to.

## Declaring Pointers
A pointer variable is declared like so:
```c
type* pntr;
type *pntr;
```
## Accessing Memory Address
A memory address of a variable is obtained using the reference operator (`&`). Example: `&var`.

## Dereferencing Pointers
A pointer is dereferenced using the dereference operator (`*`). Example: `*pntr`.

## Incrementing and Decrementing Pointers
Pointers can be incremented and decremented using the `+` and `-` arithmetic operators.

## Accessing Arrays
Arrays can be accessed by using a pointer to the first element and incrementing and decrementing as necessary.
Display current folder + git branch in the macOS terminal prompt
Published: 2022-04-11 18:12:51

Tested on macOS Monterey 12.3.1 

Add the snippet below to the bottom of the file according to your terminal version.

### iTerm

Edit `~/.bash_profile`

### Terminal

Edit `~/.zshrc` 

```
# Git branch in prompt.

function parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}

setopt PROMPT_SUBST
export PROMPT='%F{grey}%n%f %F{cyan}%~%f %F{green}$(parse_git_branch)%f %F{normal}$%f '
```

Result

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxpgav2viueg8us0ygvv.png)
Lesson 05 |Arrays and Strings
Published: 2022-04-11 18:10:20

## What is an array?
An array is used to store many elements of the same type in contiguous blocks of memory

## Creating Uninitialized Arrays
An uninitialized array is created as follows:

```c
type arr[array_size];
```
## Creating an Initialized Array
An initialized array is created as follows:

```c
type arr[] = {element1, element2, element3, …};
```
## Accessing Array Elements
You can access the array element at index idx as follows:

```c
arr[index];
```
## First and Last Array Elements
The first and last elements in the array can be found at the following indices:

```c
firstElement = arr[0];
lastElement = arr[arraySize - 1];
```
## sizeof()
Array size can be found using the sizeof() function

## Iterating Through Arrays
Arrays can be iterated through using while loops or for loops.

## Invalid Array Access
Attempting to access or modify an element at an index greater than the length of the array will cause the program to behave unpredictably.

## Creating Multidimensional Arrays
Initialized and uninitialized multidimensional arrays are created as follows:
```c
initializedMultArray = type arr[][dim2Size]…[dimNSize] = {{element1, element2,…},{element1, element2, …}, …};
uninitializedMultArray = type arr[dim1Size][dim2Size]…[dimNSize];
```
## String Length
Arrays are static, therefore the length of a string cannot be modified.

## Accessing Characters in a String
Characters in a string can be accessed and modified using indices, the same technique used with arrays.

## Creating Strings
Strings can be created by initializing an array of `char`s.

## Null Character
All strings terminate with a null character (`'\0'`).

## strlen()
You can find the length of a string using the strlen() function.

## strcat()
Two strings can be concatenated using the strcat() function.

## strcpy()
A string can be copied into an empty char array (empty string) using the strcpy() function.
#27 Guess The Output ???
Tags: javascript, webdev, beginners, programming
Published: 2022-04-11 17:54:17

⭐ Reply with correct answer & Bonus points for explanation ⚡

💡 Correct answer with detailed explanation will be updated in comments after 48 hours.


![#27 Guess The Output???](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo20ediv0wpxek6p9mbm.png)

Code - 


```
console.log((055-35)-5);
```
Top Attributes or tags in HTML5
Tags: html
Published: 2022-04-11 17:54:10

In this post i want introduce to you some top attribute and element in html5.

**1. type='color' attribute**

With this attribute you can allow the user to select a color.

```
<input type="color">
```
---------------------------------------------------

**2. 'dfn' element**

With this element you can put a description for the text or content inside dfn.

```
<p><dfn>Omid Pishkar</dfn>author</p>
```
---------------------------------------------------

**3. 'contenteditable' attribute**

whit this attribute in any element you are able to specify whether the content is viewable or not.

```
<p contenteditable='true'>I'm a front end developer</p>
```
---------------------------------------------------
**4. 'spellcheck' attribute**

This attribute corrects the content of your element in terms of spelling.

```
<textarea spellcheck='true'>hollo</textarea>
```
---------------------------------------------------
**5. 'download' attribute**

If the user clicks on an element that has this attribute, the user can download it.

```
<img src='./img/img1.png' download>
```
---------------------------------------------------
**6. 'accept' attribute**

This attribute specifies the content that the user can upload.

```
<input type='file' accept='image/*'>
```

---------------------------------------------------
**7. 'translate' attribute**

Allow to translate texts of this element

```
<p translate='true'>سلام</p>
```

---------------------------------------------------
**8. 'poster' attribute**

For example, you can put a poster on it before the video plays.

```
<video controls poster'./img/img_2.jpg'>
    <source src'movie.mp4' type='Video/mp4'>
</video>
```

---------------------------------------------------
**9. 'pattern' attribute**

You can set a pattern based on the input value.

```
<form>
   <input type='text' pattern='[A-Za-z]{4}'>
   <button type='submit'>Submit</button>
</form>
```
---------------------------------------------------
**10. 'autocomplete' attribute**

Complete based on previous entries.

```
<input type='text' autocomplete='off'>
```
---------------------------------------------------
**11. 'autofocus' attribute**

Focus on the desired element after the page is fully loaded.

```
<input type='text' autofocus>
```
Create Beautiful Box Shadows in a blink ✨
Tags: uiweekly, css, webdev, productivity
Published: 2022-04-11 17:53:43

As a frontend developer, I love making my apps look unique and most eye catching with minimal efforts. And often to achieve this, I rely on a number of utilities/projects/apps available online that reduces my overall time spent making the projects. Because, in the end, only the "finished material" matters to your clients/viewers/customers. They're very rarely interested in knowing about your tech stack or things you used to make it. So, doing a little magic won't hurt, right? ✨

One of the most frustrating and time consuming task in UI development is box shadow according to me. So, one fine day when I totally got frustrated and was about to punch my pc screen, I decided to rather look for something which can help me out, and here it is [93 Beautiful CSS Box Shadows](https://getcssscan.com/css-box-shadow-examples?ref=beautifulbuttons-bottom), and so far it's been a total blessing to me :)

Once you visit the site, you're presented with 93 beautiful box shadows, you can just choose the one you like and just click on it to copy the CSS to your clipboard!

![Site Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnwio7x49vorn3cf3yfb.png)

Once you've got it copied, just head over to your code editor and paste it in the CSS field for the element you want a shadow for.

![Box Shadow CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eg02fq06op7bl1s8b8v6.png)

And, you're done! You have 93 different options to choose from, and not to mention, you can play with the code a little to create your custom box shadows too! This is how I create box shadows in a blink ✨ 

Thanks for reading! See you again in my next blog :)
How to change caret color using CSS ???
Tags: webdev, programming, css, beginners
Published: 2022-04-11 17:47:35

You might be wondering what is caret and why I need to change the color of caret ???

caret is blinking cursor in any text input field , visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. By default, it is black, but its color can be altered with this property.

Sometimes you want to change the color of caret to match the theme of website or make it visible and noticeable in dark themes of websites. At these times You can change the color of caret using caret-color property in CSS. 

##Code- 

```
input {
  caret-color: red;
}
```


##Result -


![ RED caret-color ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgrmezknmbf03qqa5fv7.png)




#Resources - 


1) [caret-color MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color)
The Ultimate Guide To Learn Regular Expression With Python 🐍🔥
Tags: python, tutorial, beginners, programming
Published: 2022-04-11 17:45:39

###The Ultimate Guide To Learn Regular Expression With Python

####Video, Website, Book, Note 

🎥 [Video](https://bit.ly/3uu9HMw)

🌐 [Website](https://regexr.com/)

📖 [Book](https://bit.ly/3v8KFBY)

📄 [Note](https://bit.ly/3KMQHyR)


Please note that you can apply what you will learn here to any language you use.

All The Best.

### Connect with Me 😊
- [LinkedIn](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)
- [Twitter](https://twitter.com/Mahmoud42275)
React 18 things : Automatic Batching
Tags: react, javascript, webdev, performance
Published: 2022-04-11 17:38:37

> References: 
> [New Feature: Automatic Batching](https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching)
> [Discussions: Automatic Batching](https://github.com/reactwg/react-18/discussions/21)

## What?
Batching in react is the process of grouping multiple state updates into a single re-render. Automatic batching is present in react inside React event handlers, for example, inside handler for a click event. But it was not present for updates inside promises, setTimeout, native event handlers etc. in React 17 or earlier versions.

```
function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    fetchData().then(() => {
      // React 17 or earlier does NOT batch these updates 
      // These will be two different updates
      setData(data); // 1st update and re-render
      setLoading(false); // 2nd update and re-render
    });
  }, []);

  return (...)
}
```

With React 18, all updates will be automatically batched, no matter where they originate.

```
function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    fetchData().then(() => {
      // React 18 and later batch these updates
      setData(data); 
      setLoading(false); 
     // Re-render only once at the end 🥳
    });
  }, []);

  return (...)
}
```

## Why?
Performance reasons: When multiple state updates batch into a single render, we could avoid unnecessary re-renders and thus improve the performance.

## How to use?
[Upgrade to react 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html), this functionality is only available in react 18. It is expected to [replace render with createRoot] (https://github.com/reactwg/react-18/discussions/5) as part of adopting React 18.

## How to opt out?
That is a rare case 🤔, you can use `ReactDOM.flushSync()` to opt out of automatic batching.

```
import { flushSync } from 'react-dom';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    fetchData().then(() => {
      flushSync(() => {
        setData(data); // 1st update and re-render
      });
      flushSync(() => {
        setLoading(false); // 2nd update and re-render
      });

    });
  }, []);

  return ()
}

```
Notifications issue in Firefox
Tags: firefox
Published: 2022-04-11 17:36:15

I was working on web notification module where I have to send notifications to web application users. In google chrome and edge push notifications works smoothly but when it comes to mozilla firefox its not the case. I was not able to receive any notification when I have signed in with firefox browser. After searching about this issue on the internet I found that its the thing with windows 10 action center.

All web browsers have their own built in notification functionality. When windows 10 was launched it came with new action center. Some browsers have started using this action center. In google chrome its default setting.

In the case of firefox user need to enable it manually by changing configuration.

Here are steps to enable web notifications in firefox browser.

**Step 1 **:- Open mozilla firefox and go to [about:config](url) 
, it will shows warning message, accept the risk and continue.

**Step 2** :- now type alerts in the textbox and it will shows a preference 

> alerts.useSystemBackend

mark this preference true - if you want to receive web notification in the firefox browser.
mark this preference false - if you don't want to receive web notification in the firefox browser.
Notifications issue in Firefox
Tags: firefox
Published: 2022-04-11 17:26:14

I was working on web notification module where I have to send notifications to web application users. In google chrome and edge push notifications works smoothly but when it comes to mozilla firefox its not the case. I was not able to receive any notification when I have signed in with firefox browser. After searching about this issue on the internet I found that its the thing with windows 10 action center.

All web browsers have their own built in notification functionality. When windows 10 was launched it came with new action center. Some browsers have started using this action center. In google chrome it's default setting.

In the case of firefox user need to enable it manually by changing configuration.

Here are steps to enable web notifications in firefox browser.

**Step 1 **:- Open mozilla firefox and go to [about:config](url) 
, it will shows warning message, accept the risk and continue.

**Step 2** :- now type alerts in the textbox and it will shows a preference 

> alerts.useSystemBackend

mark this preference true - if you want to receive web notification in the firefox browser.
mark this preference false - if you don't want to receive web notification in the firefox browser.