teleren/devto huggingface dataset:
Kubernetes CKAD Tips 3 - Pod and Container
Tags: kubernetes, ckad, devops
Published: 2021-03-07 05:54:39

In Kubernetes we need to manage Pod which hosts the container(s). In Kubernetes what is the relationship between pod and container? The concept of Pod is unique in Kubernetes. Let's understand it a bit.

{% youtube aq7dLCpsO20 %}

## Resources 

Subscribe to the Channel [TechTalks-Wriju](https://www.youtube.com/channel/UCUzFKvlZOm3ukAiF59B_HgQ)

The [Kubernetes and CKAD Playlist](https://www.youtube.com/playlist?list=PLPIVZsyfpXt-wyNY65-aC9Vm_PEsM3pR8)
Moving Go application to cloud VM: Gzip Middleware
Tags: go, gzip, cloud, network
Published: 2021-03-07 04:34:26

Recently I was working on an [ArozOS](https://github.com/tobychui/arozos) update and someone suggested that he want to deploy ArozOS (which is a web desktop platform) to a cloud VM and he needs to minimize the bandwidth used in serving media and web template files.

## How Gzip Middleware Works
After some research, I decided to add a layer of "gzip middleware" in between the mux / router and the response writer layer. If you try to illustrate the new layer in a diagram, it will looks like this
![2021-03-07_12-21-53](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8fwsl7q18llcmdz155m.png)
 
## Implementation
After knowing what I need, I wrote an implementation of it using Go Module architecture. The following is the full code extracted from my ArozOS project gzip middleware module. 

{% gist https://gist.github.com/tobychui/e31ca5be46e266cf52fc247dd38c9181 %} 

See the whole system implementation here
{% github tobychui/arozos %}

To use it, simpliy call it with your standard http.HandleFunc and http.Handle as follows

```
if *enable_gzip {
    http.HandleFunc("/media/", gzipmiddleware.CompressFunc(serverMedia))
}else{
    http.HandleFunc("/media/", serverMedia)
}
```

```
fs := http.FileServer(http.Dir("./web"))
if *enable_gzip {
	//Gzip enabled. Always serve with gzip if header exists
	http.Handle("/", gzipmiddleware.Compress(fs))
} else {
	//Normal file server without gzip
	http.Handle("/", fs)
}
```
## Results
The following is the compression results of the ArozOS desktop template. You can see the gzip middleware helps to save a around 160KB per request. If you are running it on a cloud server, this might save you a few bucks in long run.

![2021-02-16_13-24-51](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v44l9ll7f9wmfv6xeaeu.png)
(Top: With gzip middleware enabled; Bottom: With gzip middleware disabled)

Well, basically that is it. Hope you find it useful :)
Full Tutorial #10: Logging the User Out, Refactoring GraphQL | Microservices Chat App Using React, Node, TypeScript and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-03-07 05:36:32

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Part 10 of the Microservices Chat App is here! In this episode, I set up the `deleteUserSession` GraphQL mutation endpoint, and also clean up the GraphQL schema to address a few usability and security concerns!

{% youtube jsSKg7jxGNQ %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
100 Bytes Of Wisdom: Day 21
Tags: career, codereview, advice
Published: 2021-03-07 05:11:15

---
title: 100 Bytes Of Wisdom: Day 21
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, codereview, advice
//cover_image: https://direct_url_to_image.jpg
---

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

Today I share my final thoughts on code review. Code review is probably the best time to do your learning together in a given team. More often than not, its the only formal time for developers to share knowledge and grow each other. 

Junior developers may fall into a trap where they get defensive in code review or feel it's an attack on them. Not only is that just not true, but they're also missing a huge opportunity to learn. Feel free to ask more questions and any decent senior engineer should happily explain comments or critiques further. 

By listening, understanding and reflecting on your code review feedback (or any feedback for that matter) you'll learn a lot in order to be a better developer. 

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
How to use Tailwindcss in React.
Published: 2021-03-07 04:51:44




## About this Article

This is an article about using taillwind in react.

##What is Tailwind?
Tailwind is a CSS flamework.
As show below, you can add class to element,and adopt style.
https://tailwindcss.com/
![screen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/fc45e921-3a98-0de4-ae6f-3605445134e3.gif)

## How to install

###installing package
```
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

```
npm install postcss-cli autoprefixer --save-dev
or
yarn add postcss-cli autoprefixer --save-dev
```

###create styles.css
Create style.css and import @tailwind property.

```styles.css
@tailwind base;

@tailwind components;

@tailwind utilities;
```

### Add script command to build Tailwind in package.json.

```package.json
"scripts": {
    "start": "react-scripts start",
    "build:tailwind":"tailwind build src/styles.css -o src/tailwind.css",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```

And run below.

```
npm run-script build:tailwind
```

Then,tailwind.css will be created.

###import tailwind.css

```index.js
import './tailwind.css';
```

##Check importing.
If you write the following,you can confirm tailwind.css 

```App.js
import React from "react";

function App() {
  return (
    <div className="App">
      <div class="max-w-sm rounded overflow-hidden shadow-lg">
        <img
          class="w-full"
          src="https://source.unsplash.com/random/1600x900/"
          alt="Sunset in the mountains"
        ></img>
        <div class="px-6 py-4">
          <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
          <p class="text-gray-700 text-base">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptatibus quia, nulla! Maiores et perferendis eaque,
            exercitationem praesentium nihil.
          </p>
        </div>
        <div class="px-6 py-4">
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
            #photography
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
            #travel
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
            #winter
          </span>
        </div>
      </div>
    </div>
  );
}

export default App;
```

The result is as follows.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/61a3e193-9c4a-7e92-12c5-2a6cb657f4a1.png)


##参考記事
https://blog.logrocket.com/create-react-app-and-tailwindcss/
100 Bytes Of Wisdom: Day 20
Tags: career, advice, codereview
Published: 2021-03-07 04:48:01

---
title: 100 Bytes Of Wisdom: Day 20
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, advice, codereview
//cover_image: https://direct_url_to_image.jpg
---


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

Code review and pull requests can be a tense and awkward time. More often than not, you're not expecting too much feedback and certainly nothing too major. However, there are times where are issues in your code that need to be addressed. There are two ways forward here.

More code - a reviewer may point out parts of a feature you missed or conditional cases you forgot to account for. Add this code and try again.

More conversation - a perhaps better place to start would be to discuss the issues in the code. Being open to feedback and listening to the issues a reviewer is perceiving in your code. It's possible that the issue they've highlighted can be resolved with just conversation. Have it, then continue with the task at hand. Not every comment needs to mean code gets changed. 

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
Arrays in C Programming
Tags: cprogramming, programming, beginners, tutorial
Published: 2021-03-07 04:42:28

Hey there! In this tutorial, we will study what are  [arrays in c programming](https://usemynotes.com/what-are-arrays-in-c-programming/)  and the types of arrays - Single Dimensional Array, Two-Dimensional Array, and Multi-Dimensional Array with the help of a suitable example.

## Arrays in C Programming
An array is a primitive and linear data structure that is a group of identical data items, ie it will store only data of only one type or will only store floating-point. Array data is a static data structure, that is, you can allocate memory in compile time itself and cannot change it in run time.

## Array live Example
Assume you are creating a program that is to stores the names of the students of a college on the computer and the number of those students is 500. So how will you store the names of these 500 students? You must be thinking in mind that creating 500 variables, doing so will make the program very complex and this method will also take a lot of time and the program will also become very large and there will also be wastage of computer memory space.

To solve this type of problem, c language provides us with Array. With the help of which we solve this type of problem and address it.

## Types of Array

![types-of-array.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615091776231/Pqpsq_aAR.png)

### Single Dimensional Array
An array that contains only one subscript is called a one-dimensional array. It is used to store data in linear form. A one-dimensional array is also called a 1-D array.

![1d-array.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615091790235/ZXtATiZoA.png)

### Two-Dimensional Array
An array containing two subscripts is called a two -dimensional array. A two-dimensional array is also called a 2-D array.

![2d-array.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615091806166/aXfwXK6H1.png)

### Multi-Dimensional Array
An array containing more than two subscripts is called a Multi-dimensional array. A multi-dimensional array is also called a 3-D array.

![3d-array.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615091817923/SwEkJEVIt.png)

## Basic program in an array

```
#include <stdio.h>
int main()
{
  int arr[5];
  arr[0] = 5;
  arr[1] = -10;
  arr[2] = 2;
  arr[3] = 6; 
  printf("%d %d %d %d", arr[0], arr[1], arr[2], arr[3]);
  return 0;
}
```
**Output**
```
5 -10 2 6
```
Originally posted on - [Arrays in C Programming](https://alimammiya.hashnode.dev/arrays-in-c-programming)
938. Range Sum of BST
(javascript solution)
Tags: algorithms, javascript
Published: 2021-03-07 03:22:51

###Description:

Given the root node of a binary search tree, return the sum of values of all nodes with a value in the range [low, high].

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// Depth first search approach
// Add calculate the sum of right side + left side + root node
// Only add nodes to the sum if they fill in the range
var rangeSumBST = function(root, low, high) {
    if(!root) return 0;
    let sum = root.val >= low && root.val <= high ? root.val : 0;
    if(root.val >= low) sum += rangeSumBST(root.left, low, high)
    if(root.val <= high) sum += rangeSumBST(root.right, low, high)
    
    return sum
};
```
Use esbuild to speed up your Creat-React-App project
Tags: react, webpack
Published: 2021-03-07 02:26:24

Slow compilation speed has always been a pain point of CRA([create-react-app](https://github.com/facebook/create-react-app)). Generally CRA uses webpack 4 as bundler but the esbuild even faster than it. 

![Speed compare from esbuild](https://repository-images.githubusercontent.com/61137153/980bce80-192f-11eb-98b7-d06ecb974e52)

I compared the startup time of the two bundlers with one  my bloated [project](https://github.com/RiverTwilight/ygktool): esbuild saved 25s than webpack(from 71s to 45s).

Currently(4.0.1) cra doesn't support esbuild offically so we need to mannually migrate to esbuild. There are two ways: use create-react-app-esbuild or manually modify the webpack configuration of CRA.

## Use create-react-app-esbuild

I recommend this way because it's easier and stabler.
Just see [this short doc](https://github.com/pradel/create-react-app-esbuild/tree/main/packages/craco-esbuild).

> PS: If you use vercel or other auto-deploy production it's better not to change the `build: react-script build` command for stabler deployment.

## Modify the webpack configuration of CRA.

In fact, the create-react-app-esbuild is only an encapsulation of [esbuild-loader](https://github.com/privatenumber/esbuild-loader). 

See [my answer](https://stackoverflow.com/questions/63280109/how-to-update-webpack-config-for-a-react-project-created-using-create-react-app/63281179#63281179) at stackoverflow for how to update webpack config without running `react-scripts eject`. It's not recommended since after upgrating react-scripts to 4.x there are many compilation problems in my project and I solved them by using default config.


It is worth noting that esbuild do not support new JSX transformer currently so `import React from 'react'` is still required.
Convert an Image to HTML pixel by pixel
Tags: javascript, html, pixel
Published: 2021-03-07 02:25:21

---
title: Convert an Image to HTML pixel by pixel
published: true
description: This is a tutorial to Convent and Image to HTML matrix
tags: js, javascript, html, pixel
//cover_image: https://direct_url_to_image.jpg
---

Hi!
This is a tutorial to convert an image to HTML pixel by pixel, with this you can analyze your image :)

first, you need some HTML

````html
<!-- canvas need to be hidden, here you will load your image and take information about it -->
<canvas
    id="canvas"
    style="visibility: hidden;"
></canvas>
<!-- here you will print your matrix of span tags, each of them with a single color -->
<div
    id="final-image"
    style="line-height: 7px;letter-spacing: -3px;"
></div>
```

now some javascript

```javascript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imgUrl = "https://images.unsplash.com/photo-1549740425-5e9ed4d8cd34?ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwzOTU0NTB8fGVufDB8fHw%3D&ixlib=rb-1.2.1&w=1000&q=80";
const img = new Image();
const imgWidth = 100;

let html = "";
img.crossOrigin = "Anonymous";
img.onload = function() {
    canvas.width = imgWidth;
    canvas.height = (this.height * canvas.width) / this.width;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    for (let i = 0; i < canvas.height; i++) {
        for (let j = 0; j < canvas.width; j++) {
            add(ctx.getImageData(j, i, 1, 1).data);
        }
        html += "<br />";
    }
    document.getElementById("final-image").innerHTML = html;
    canvas.parentNode.removeChild(canvas);
};

img.src = imgUrl;

function add(c) {
    html += `<span style="color: rgb(${c[0]}, ${c[1]}, ${c[2]});">&#9632;</span>`;
}
```

with this code, you can print your image on text

{% codepen https://codepen.io/gustavosfq/pen/MWYMoNK %}
Create/Generate QR Codes In Angular 10/11
Tags: angular, node
Published: 2021-03-07 02:10:31

We are learning How to generate QR code in angular 11. QR code generator app in easy process. we learn random QR code generator see below.

This tutorial will use angularx-qrcode npm package to generate QR code in the angular 11 application. And import the QRCodeModule module code. see below step-by-step random QR code generator angular 11.

**[Create/Generate QR Codes In Angular 10/11](https://www.phpcodingstuff.com/blog/how-to-create-generate-qr-codes-in-angular.html "Create/Generate QR Codes In Angular 10/11")**

![This is image title](https://www.phpcodingstuff.com/uploads/tutorial_images/Generate_QR_Codes_in_Angular1.jpg "This is image title")

**Step 1 – Create New Angular App**
First, of all let's start by creating an Angular 11 project using the Angular CLI.

Open your terminal or command prompt, and generate a new angular project by running the following command: [Go](https://www.phpcodingstuff.com/blog/how-to-install-angular-and-set-up-first-angular-project.html)

```ng new my-new-app```

**Step 2 – Install angularx-qrcode npm Package**
In this step, you need to install angularx-qrcode in our angular application. So, the following command:

```npm install angularx-qrcode --save```

**Step 3 – Add Code on Module.ts File**

```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';    //<------------ import this code ------------

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    QRCodeModule      //<------------ import this code ------------
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

**Step 4 – Add Code on View File**
```
<h1>Create/Generate QR Codes In Angular 10/11 -  phpcodingstuff.com</h1>
 
<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
```

![This is image title](https://www.phpcodingstuff.com/uploads/tutorial_images/qr_code_php_coding_stuff.png "This is image title")

**Step 5 – Add Code On Component ts File**

```
import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myAngularxQrCode: string = null;
   
  constructor () {
    // assign a value
    this.myAngularxQrCode = 'Your QR code data string';
  }
}
```

**Step 6 – Start Angular App**
```ng serve```

*Original source: [https://www.phpcodingstuff.com/blog/how-to-create-generate-qr-codes-in-angular.html](https://www.phpcodingstuff.com/blog/how-to-create-generate-qr-codes-in-angular.html "https://www.phpcodingstuff.com/blog/how-to-create-generate-qr-codes-in-angular.html")*
Pulse Loading with CSS
Tags: css, html, web, loading
Published: 2021-03-07 02:00:34

---
title: Pulse Loading with CSS
published: true
description: Pulse Loading with CSS :)
tags: CSS, HTML, Web, Loading
//cover_image: https://direct_url_to_image.jpg
---


Hi!
this is a quick tutorial to make a Pulse Loading with only HTML and CSS! 

# HTML
```html
<div class="pulse-wrapper">
  <div class="pulse"></div>  
</div>
```

# CSS
```css
/* this is to keep you loading wrapper on the middle of screen */
div.pulse-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

div.pulse {
  height: 50px;
  width: 50px;
  background-color: rgb(199, 153, 8);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
    40% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(199, 153, 8, 0.3);
    }

    80% {
        transform: scale(1);
        box-shadow: 0 0 0 40px rgba(199, 153, 8, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(199, 153, 8, 0)
    }
}
```
and that's all folks!

{% codepen https://codepen.io/gustavosfq/pen/JjbaLNB %}
Mid Meet Py 2021 - Ep.02 - Let's chat with Lemon
Tags: python, podcast, chat, community
Published: 2021-03-07 01:55:00

---
title: Mid Meet Py 2021 - Ep.02 - Let's chat with Lemon
published: true
description: This week we will chat with Leon 'Lemon' Sandøy, one of the owners of Python Discord. Do you know why he is called Lemon? We also talked about some history and behind the scenes of Python Discord.
tags: python, podcast, chat, community
---
This week we will chat with Leon 'Lemon' Sandøy, one of the owners of Python Discord. Do you know why he is called Lemon? We also talked about some history and behind the scenes of Python Discord.

All links are in the [podcast notes](bit.ly/mmp-20210226)

[Listen to MidMeetPy podcast](https://anchor.fm/midmeetpy)
Why Software Development?
Tags: gamedev
Published: 2021-03-07 01:41:59

There are many reasons why I chose to  start a career in computers. I've always been interested in computers. And over the years
I have done some studying on my own just never had the opportunity
to study it fulltime. It wasn't until I started working for Amazon 
that I started taking advantage of the career and educational
opportunities that they have for their associates.  They have on the job training available for associates to work in their IT dept.
and study for their A+ cert. So I got a position working as an IT tech, and I have been working in IT ever since October 2020. 
I really enjoy it. There is always something new to learn. And that is part of the reason why I want to get into software development. 
The endless possibilities that I will have once I receive my 
certification in this program. 

So I dabbled here and there with coding while working at amazon.
So while working at amazon I found out they have a career 
choice program where they offer courses in certain fields 
and they pay 95% of your tuition. So when I saw this course
come up through flatiron school I jumped on it. I felt like this
was a great opportunity for to learn the field I have always 
wanted to train in.
Day 34: Consuming a RESTful API with React
Tags: 100daysofcode, javascript, react
Published: 2021-03-07 00:30:30

A component, users.js:

```javascript
import React from 'react'

const Users = ({users}) => {
    return (
        <div>
            <center><h1>User List</h1></center>
            {users.map((user) => (
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{user.name}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">{user.email}</h6>
                        <p class="card-text">{user.company.catchPhrase}</p>
                    </div>
                </div>
            ))}
        </div>
    )
};

export default Users
```

App.js mounts the user component and makes the API request:

```javascript
import React, {Component} from 'react';
import Users from './components/users';

class App extends Component {
    render() {
        return (
            <Users users={this.state.users} />
        )
    }

    state = {
        users: []
    };

    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then((data) => {
                this.setState({ users: data })
            })
            .catch(console.log)
    }
}

export default App;
```