teleren/devto huggingface dataset:
Kubernetes Volume explained for Beginners
Tags: kubernetes, beginners, programming, devops
Published: 2022-08-14 15:15:34

> In this article we are going to understand a very important concept in Kubernetes i.e. Data Storage and take a look at its working.


##Volumes

![Data Storage in Kubernetes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6m7s2zcvidf7c0zfi5w0.png)
So in our [last article](https://dev.to/iarchitsharma/kubernetes-components-simplified-for-beginners-19op) We used a Node with two pods, **my-app** and a **database**, as an example. We are going to use same example for this article.

So we have this **Database Pod** that our application uses, and it creates some data. If the Database container or Pod is restarted, the data is lost, which is obviously troublesome and annoying because you want your Database data or log data to be consistently persisted over time.
To solve this problem we have another Kubernetes Component known as **Volumes**

###How it works?

![Volumes in Kubernetes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2py8j3sudmdvz7vlbn1.png)
**Volume** basically attaches physical storage on a Hard drive to your Pod, and that storage could be on your **local machine**, meaning on the same server Node where the Pod is running, or it could be on a **remote storage**, meaning outside of the Kubernetes cluster, such as a cloud storage or your own premise storage that is not part of the Kubernetes cluster, so you just have an external reference on it.
So now, when the **Database Pod** or **Container** is restarted, all of the data is _persisted_.

![Difference b/w Kubernetes Cluster & Volume](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik16c4b009c4dbmuxnaz.png)

It is important to understand the distinction between the **Kubernetes Cluster** and the **Storage**, regardless of whether it is local or remote. Consider storage to be an external Hard drive inserted into the Kubernetes Cluster because Kubernetes Cluster does not explicitly handle data persistence, which means that you, as a **Kubernetes user** or **Administrator**, are responsible for backing up the data, duplicating it, maintaining it, and ensuring that it is stored on proper hardware, among other things.

> In the next article we are going to take a look at two more Kubernetes Components that is **Deployment** and **StatefulSet**

######Thank you for reading this blog; do follow me for more
Build Portfolio Website with Hugo
Tags: portfolio, hugo, website
Published: 2022-08-14 14:56:00

A personal webpage is a perfect place to let the world know about you and showcase your past accomplishments. Put your resume, your projects, your blogs in with a personalized theme which makes people know you have a great taste: all-in-one! It’s your portfolio displayed online, a small yet cool project you can do with not much effort, why not?

With Github Pages, we can host a personal webpage without bothering about finding a domain name, and with Hugo, we have a variety of themes to choose from. Now, let's start this step-by-step tutorial to set up your personal webpage!


## Introduction to HUGO and GitPage

Hugo is one of the most popular open-source static site generators and is written in GO. It's simple, efficient, easy to scale and fast to deploy. Simply install with brew, clone themes you like from Github or the official website [HUGO](https://gohugo.io/), make some changes in the configuration file and deploy, then your page will be online.

[Github Pages](https://pages.github.com/) is a static web hosting service provided by Github, which provides 1GB of free space and provides convenient deployment directly through the Github repository.

This site uses Hugo and Github Pages to create and deploy. The following briefly introduces the deployment process.

## Installation

**Install Hugo**

Open your terminal, run the following command-line one by one:
- MacOS:   
```
      brew install hugo
```
- Linux:
```
      sudo apt install hugo
```
- Windows:
```
      scoop install hugo
```

To check whether you installed Hugo successfully, enter the following into your terminal

    hugo version
## Configuration

    hugo new my-website
    cd my-website
    hugo
## Deployment
- Github Pages: 
  Open your terminal, run the following command-line one by one:
```
    hugo
    git add .
    git commit -m "update"
    git push origin master
    git push pages master
    cd ..
    rm -rf my-website
```
- MacOS:
```
    open http://localhost:1313
```
- Linux:
```
    firefox http://localhost:1313
```
- Windows:
```
    start http://localhost:1313
```
## Conclusion
Congratulations! You have successfully set up a personal webpage with Hugo and Github Pages.

## References
- [HUGO](https://gohugo.io/): Hugo is a static site generator written in Go.
- [Github Pages](https://pages.github.com/): Github Pages is a static web hosting service provided by Github, which provides 1GB of free space and provides convenient deployment directly through the Github repository.

## Examples
- [Blog Site](https://symphonious-puffpuff-d7704c.netlify.app/)
- [Portfolio Site](https://hugo-alexa-portfolio.netlify.app/)
The simplest example of coroutines in C++20
Tags: cpp, beginners, programming
Published: 2022-08-14 14:46:00

Coroutines were introduced in C++20 standard. Unfortunately, the implementation isn't such friendly even to experienced developers because the standard library provides only interfaces and leaves the event loop, awaiters, promises etc. on programmers. 

This is a minimal working example which could help people to start learning:

```cpp
#include <iostream>
#include <coroutine>
#include <thread>
#include <queue>
#include <functional>

std::queue<std::function<bool()>> task_queue;

struct sleep {
    sleep(int n) : delay{n} {}

    constexpr bool await_ready() const noexcept { return false; }

    void await_suspend(std::coroutine_handle<> h) const noexcept {
        auto start = std::chrono::steady_clock::now();
        task_queue.push([start, h, d = delay] {
            if (decltype(start)::clock::now() - start > d) {
                h.resume();
                return true;
            } else {
                return false;
            }
        });
    }

    void await_resume() const noexcept {}

    std::chrono::milliseconds delay;
};


struct Task {
    struct promise_type {
        promise_type() = default;
        Task get_return_object() { return {}; }
        std::suspend_never initial_suspend() { return {}; } 
        std::suspend_always final_suspend() noexcept { return {}; }
        void unhandled_exception() {}
    };
};

Task foo1() noexcept {
    std::cout << "1. hello from foo1" << std::endl;
    for (int i = 0; i < 10; ++i) {
        co_await sleep{10};
        std::cout << "2. hello from foo1" << std::endl;
    }
}

Task foo2() noexcept {
    std::cout << "1. hello from foo2" << std::endl;
    for (int i = 0; i < 10; ++i) {
        co_await sleep{10};
        std::cout << "2. hello from foo2" << std::endl;
    }
}

//call foo
int main() {
    foo1();
    foo2();

    while (!task_queue.empty()) {
        auto task = task_queue.front();
        if (!task()) {
            task_queue.push(task);
        }
        task_queue.pop();

        std::this_thread::sleep_for(std::chrono::milliseconds(10));
    }
}
```

The magic happens here `co_await sleep{10};`. The current coroutine suspends and the awaiter takes its handler to resume it later. In this example, the awaiter defers a task into an event loop to checks if the sleep time expires.


This is a simple event loop with a queue of tasks:

```cpp
while (!task_queue.empty()) {
    auto task = task_queue.front();
    if (!task()) {
        task_queue.push(task);
    }
    task_queue.pop();
    std::this_thread::sleep_for(std::chrono::milliseconds(10));
}
```

Play with this example a bit before starting to read about the coroutines in detail. Hope, it was helpful!
Async Task inside Loop in Javascript
Tags: javascript, node, async, map
Published: 2022-08-14 14:41:00

In a project, I had a situation to perform an asynchronous task inside a loop. I majorly used the map method to do looping tasks. 
```javascript 
myIterable.map((item) => {
    //  task 1 - normal
    //  task 2 - async
})
```
But the map method does not natively support async tasks, when something is made asynchronous inside the map method it returns some 'pending promises'.

`[ Promise{ <pending> },... ]`

To make the map method asynchronous I wrapped it with the concept of promises. 

The logic is split into three code blocks. 

In the first block, we have a function named `myAsyncIteration` which returns a promise. Inside the promise we perform the asynchronous task and we can confirm the completion by resolving the promise by passing `someData`

```javascript 
const myAsyncIteration = (item) =>
    new Promise(async (resolve, reject) => {
        //  task 1 - normal
        //  task 2 - async
        return resolve(someData)

    })
```

In the second block, inside `myAsyncLoop` we map over every instance in `myIterable` to `myAsyncIteration` that returns a promise.

If there are 'n' instances inside `myIterable` then 'n' promises will be returned. This is wrapped with `Promise.all` which will ensure all the promises are executed and will contain the data which was resolved from the promises.
```javascript
const myAsyncLoop = async () => {
    return Promise.all(myIterable.map(async (item) =>
        myAsyncIteration(item)

    ))
}
```

In the third block, we call `myAsyncLoop` which returns an array of data sent after resolving each promise. It means 'n' number of `someData` contributes to `arrayOfSomeData`.
```javascript
myAsyncLoop().then((arrayOfSomeData) => {
    console.log(arrayOfSomeData)
    // perform the other work

})
```
In this way, I performed async tasks inside the map method. This is my first blog post, please share your thoughts and if there are any better methods please mention them also. 

Thank you.
Run Docker based GitHub runner containers on GitHub Codespaces
Tags: github, azure, docker, containers
Published: 2022-08-14 14:21:27

---
title: Run Docker based GitHub runner containers on GitHub Codespaces
published: true
description: Run Docker based GitHub runner containers on GitHub Codespaces
tags: 'github, azure, docker, containers'
cover_image: 'https://raw.githubusercontent.com/Pwd9000-ML/blog-devto/main/posts/2022/GitHub-Docker-Runner-Azure-Part6/assets/main.png'
canonical_url: null
id: 1167259
series: Self Hosted GitHub Runner containers on Azure
date: '2022-08-14T14:21:27Z'
---

### Overview

![image.png](https://raw.githubusercontent.com/Pwd9000-ML/blog-devto/main/posts/2022/GitHub-Docker-Runner-Azure-Part6/assets/diag01.png)

This post has moved, Check it out here:

{% link <https://dev.to/pwd9000/hosting-your-self-hosted-runners-on-github-codespaces-2elc> %}

### _Author_

Like, share, follow me on: :octopus: [GitHub](https://github.com/Pwd9000-ML) | :penguin: [Twitter](https://twitter.com/pwd9000) | :space_invader: [LinkedIn](https://www.linkedin.com/in/marcel-l-61b0a96b/)

{% user pwd9000 %}

<a href="https://www.buymeacoffee.com/pwd9000"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=pwd9000&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>
How to install Ubuntu gestures
Published: 2022-08-14 14:18:02

To install guestures for ubuntu e.g 3-finger scroll
You can follow on the link module below
https://www.thefanclub.co.za/how-to/ubuntu-touchpad-gestures-install
Or you can manually install the modules from their repositories
https://github.com/bulletmark/libinput-gestures
Then install this
https://gitlab.com/cunidev/gestures
Afterwards just reboot your system for the effects to take effect
Nuxt.js in 64 minutes
Tags: vue, nuxt, codenewbie
Published: 2022-08-14 14:17:37

As a developer, I love to discover new frameworks.

5 years ago, I've discovered Nuxt.js and I immediately fell in love with.

Of course, I was already working on Vue since 2015 and entering in Nuxt was quite easy. However, its concept and its attractive learning curve led me to chose Nuxt for most of my clients projects.

This is why I made this quick video to make you discover Nuxt.

{% embed https://www.youtube.com/watch?v=VaamDNuWT6Y %}

Hope you'll enjoy.

Best,

Guillaume
Vue + Tailwindcss config
Tags: vue, tailwindcss, javascript
Published: 2022-08-14 14:10:00

### How to configure Tailwindcss with Vue

1. Install Tailwind via npm

```
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 
```

2. Create your configuration files

```
npx tailwindcss init -p
```

3. Configure Tailwind to remove unused styles in production

```
// tailwind.config.js
module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
```

4. Include Tailwind in your CSS

```
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

5. Import your CSS in main.js

```
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
```
Hoisting in Javascript
Tags: javascript, webdev, tutorial, beginners
Published: 2022-08-14 14:07:31

Hello Guys today i am discussing about Hoisting in Javascript.

What is Hoisting?
Hoisting is a process in which the declaration of variables and functions are moved to the top in the scope by the interpreter.
We can move the declaration of variables to the top with default value(Only the declaration part not the initialization part) or we can use a function call before it's declaration and then after that we can provide the declaration part in the code.
Let's understand this with examples.

## Example 1 - Variables Hoisting
```js
console.log(a)
var a = 10;
//output - undefined

console.log(b)
let b = 20;
// output - ReferenceError: Cannot access 'b' before initialization

console.log(c)
let c = 20;
//output - ReferenceError: Cannot access 'c' before initialization
```

* As you can see we have console logged the variables before declaring them.
* It returns undefined in case of variable declared with "var" keyword because the declaration part is hoisted with "var" not initialization part.
* In case of variables declared with "let" and "const" , it returns a reference error because "let" and "const" are not hoisted with default value.

## Example 2 - Function Hoisting
```js
hoistedFunction()

function hoistedFunction(){
  console.log("This function is called before it's declaration")
}
//output - This function is called before it's declaration


hoistedParameterisedFunction(10,20,30)

function hoistedParameterisedFunction(a,b,c){
  console.log(a,b,c)
}
//output - 10 20 30


hoistedArrowFunction()

let hoistedArrowFunction = () => {
  console.log("This function is called before it's declaration")
}

//output - ReferenceError: Cannot access 'hoistedArrowFunction' 
//before initialization
```

* You can see we have called the function before it's declaration and still it gives the output because in case of function hoisting , the entire function declaration along with its body is hoisted so, it gives the desired output.
* We can also pass parameters to the function call which is hoisted.
* In case of Arrow function , we have assigned the anonymous arrow function to the "hoistedArrowFunction" variable , hoisting this will give a reference error same like in case of variable.

### I have tried to explain this concept as much as i know and if there are more things with this concept please mention it in the comment section.

THANK YOU FOR CHECKING THIS POST
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl
Deploy vue app to netlify
Tags: vue, netlify
Published: 2022-08-14 14:02:33

Hello everybody,

Here's a quick step to deploy your Next.js app to Netlify.

[Youtube's video here.](https://www.youtube.com/watch?v=r77TIdHaIoM)

1. Create your Vue.js App.
2. Create a new repository on Github.com.
3. Signup (or login) to Netlify.com and click on Add a new site.
4. Connect Netlify to Github then import your repository.
5. Click on Deploy.

Enjoy!

Best,

Guillaume
Como instalar o WSL e Docker no Windows
Tags: docker, beginners, learning, windows
Published: 2022-08-14 13:58:20

---
title: Como instalar o WSL e Docker no Windows
published: true
description: 
tags: #docker #beginners #learning #windows
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2e3qakllda89h2v7nan.png
# Use a ratio of 100:42 for best results.
---
## Como instalar o WSL e Docker no Windows
<br>
Postagem de como instalar o Docker no Windows usando Windows Subsystem for Linux (Subsistema Windows para Linux), tende ser a primeira de uma série de postagens sobre Infra como código - IaC, e Docker. Então iremos usar o WSL tanto para o Docker quanto para o Ansible, para aquelas pessoas que querem ficar no conforto do seu Windows, mas as demais postagens poderão ser seguidas de qualquer SO.
<br>
Verifique a virtualização de hardware está ativada na sua placa mãe.
<br>
Clique no menu Iniciar e digite: Ativar ou desativar recursos do Windows
![Menu Iniciar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fh2q4zdj3437mirdeim.png)

Verifique se está ativado o recurso: Subsistemas do Windows para Linux, se não estiver ativado, ative:
![Subsistema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3v3s4t56iztvmgqnnj1.png)

Caso peça atualização do Kernel baixe e execute este update:

[WSL Update](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi)

Acesse o link e baixe o Docker desktop

[Docker Desktop](https://www.docker.com/get-started/)

![Download Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3to3rqpu94yq15fsorlu.png)

Instale o Docker:
![Instalação Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb5lxfn2w76gp0bujxlt.png)

Depois do boot vamos ver a seguinte mensagem: *WS2 installation is incomplete, i*sso faz parte do processo de instalação:
![WSL incomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zktb1vvzmkfwoh60x1dr.png)
Para resolver é bem fácil, navegue até a página [https://aka.ms/wsl2kernel](https://aka.ms/wsl2kernel) e baixe o pacote de atualização:
![Download Kernel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erzcdbrd07z58zk83zv5.png)

Clique duas vezes no arquivo baixado para iniciar a instalação e ao finalizar, reinicie sua máquina:
![Instalação Docker completa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtynbbnfih9ppye5w53r.png)

Abra o docker desktop for windows:

![instalação update subsistema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9oz7lgng7as5nf778co1.png)
Deploy NextJs to Netlify
Tags: nextjs, netlify, javascript
Published: 2022-08-14 13:53:00

## A quick guide to deploy your first app on Netlify.

Hello everybody,

Here's a quick step to deploy your Next.js app to Netlify.

[Youtube's video here.](https://www.youtube.com/watch?v=XJ2in0qw4Gw)

1. Create your Next.js App.
2. Create a new repository on Github.com.
3. Signup (or login) to Netlify.com and click on Add a new site.
4. Connect Netlify to Github then import your repository.
5. Click on Deploy.

Enjoy!

Best,

Guillaume
New RDoc Markup Reference
Tags: ruby, rdoc, documentation
Published: 2022-08-14 13:44:07

---
title: New RDoc Markup Reference
published: true
description: 
tags: ruby, rdoc, documentation
---
I've finished (with excellent reviewing help from Peter Zhu) a new [Rdoc Markup Reference](https://docs.ruby-lang.org/en/master/RDoc/MarkupReference.html) (now merged into Ruby master, but not yet released).

It replaces the content of section ["RDoc Markup Reference"](https://docs.ruby-lang.org/en/3.0/RDoc/Markup.html#class-RDoc::Markup-label-RDoc+Markup+Reference) in the documentation for class RDoc::Markup.
Simple search vs Binary search Algorithms.
Tags: javascript, algorithms, bigonotatio
Published: 2022-08-14 13:28:00

Hello there !
Welcome and stay with me as I explain Big O Notation to you in the simplest words ever!

"Total time needed for an algorithm to run," is the simplest definition of Big O Notation, but **why does it matter to you as a developer**? 

To answer that, below is a simple search Algorithm that finds any given item in an array; if the given item is not in the array, our algorithm returns null.


**Simple Search Algorithm.**


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

               Fig 1.0 (For-loop search algorithm )


 The above is a simple JavaScript For-loop that iterates over each item in the array, checks if the current iteration equals our input ('item' ), and if the item is not in the array, it returns "null."


Below (Fig 2.0 ) is a while loop that does the same as the above For-loop.

**Binary Search Algorithm.**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08n5jws0lny8ysssmzlw.png)
          
          Fig 2.0 (while loop search algorithm )



Although,  the above functions do precisely the same thing. But what happens when the number of items in our array increases **_exponentially_**? 

How efficient will both our algorithms still be ? 

 
**A step-by-step break-down of the Binary Search Algorithm**:


1. We compare 'item' with the middle index of the array.
2. if 'item' matches the mid index, we return the mid element.
3. else if 'item' is greater than the middle element, length of the array is reassigned to the middle  ( element - 1 ).
4.  else if 'item' is lesser than the middle element, beginning of the array is reassigned to the middle  ( element + 1 ).

With this method we eliminate half of the array in the first comparison.


For better understanding,
If the length of the array increases to 1millon.
With the first function (Fig 1.0), we will perform 1 million iterations (_worst case_) to find our item. However, we will perform at most 10 iterations (_worst case_) with the second function. 


The Big O notation of our functions.

Simple search algorithm (Fig 1.0) -   O(n)   // Bad guy
Binary search  algorithm (Fig 2.0)  -  O(log n)    // Good guy.



Stay with me on this blog while I explain Algorithms and Data Structures as succinctly as possible. 



Link to Code and remember  to give it a star.
https://github.com/Olatisunkanmi/Data-Structures-and-Algorithms-/tree/main/5%20Algorithms/Binary%20Search