teleren/devto huggingface dataset:
Understanding Kubernetes in a visual way (in 🎥 video): part 12 – PostStart & PreStop
Tags: kubernetes, devops, docker, beginners
Published: 2021-05-02 13:45:11

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 12 – PostStart & PreStop
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gcbsykbvxgq1huz9wmf.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

This episode is focused on PodStart and PreStop container lifecycle events.

{% youtube P0C3uL97GkY %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 165 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
Phase 1 Portfolio Project
Tags: codereview, womenintech, javascript, career
Published: 2021-05-03 02:45:35

<h1> My planning process and the challenges I was faced with.</h1>
<img src="https://images.unsplash.com/flagged/photo-1578928534298-9747fc52ec97?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80"/>
<p> I actually originally started out with wanting to create a Lottery Winners App, where the participants (users) could be able to search by only the confirmation number and know the status of their application. However, due to my limited time to work on the project and difficulties to find a proper API for my idea I switched and created a Movie App instead.</p>
<img src="https://images.unsplash.com/photo-1543536448-d209d2d13a1c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1vdmllfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"/>
<p> That was my initial challenge. After that I started planning on how to bring my idea of creating the Movie App to the production stage. I started with my html, a little bit of styling and then with JavaScript! Once I had them structured, I made more changes to the .css, to make the App look nicer. However, another challenge I was faced with was to make my Submit button work. After loot of research and deep dive I was able to make it work and once I add a key name in the search bar and click submit, the App will display movies that have that key word in the movies' title.
</p>
<h1>Lessons I've learned...
</h1>
<img src="https://images.unsplash.com/photo-1456324504439-367cee3b3c32?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"/>
<p>
<ul>
<li>Finding the proper API is crucial to creating the app desired</li>
<li>Start planning ahead of time</li>
<li>How to structure the DOM better</li>
<li>Ask questions more often to the instructors :) </li>
</ul>
<ul> After the project review...
<li>To better create more functions which I can easily reuse instead of having one big function where I write most of my code in js</li>
<li>To better create an alert when there are no movies with the keyword I am searching by
</li>
</ul>
</p>

<h1>Description of what my Movie App does.
</h1>
<img src="https://images.unsplash.com/photo-1581472723648-909f4851d4ae?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"/>
<p>My movie app displays movies with an image of the movie and the title of it under the picture. Users should see a page of 20 movies by default and they can search for their favorite movies by movie's name. Even when you type a key word instead of the full name of the movie it will display movies that have that word in their title.
</p>
Jokes on My First Project
Published: 2021-05-03 03:59:12

this week was our first project. On our own we are required to create our own website that fetched data from an API. 

I decided on a joke generator (https://icanhazdadjoke.com/api), more like corny dad jokes but I like it. Starting the project was easy, I planned out the design of the website first. Grabbed a color scheme from this site https://coolors.co/ and started creating divs in my html file. 
Do you where it started to get complicated? When i tried to center a div. It took me hours to figure out how to do it but it was my own design flaw. Once that got resolve I started working on the fetch. 

Hours of troubleshooting and googling later i managed to fetch the data and display the search results. All in all this was fun. I love solving puzzles and figuring this out really pushed my to learn and implement what i learned. 

What did i learn? Better naming for my variables. I got very annoying during the fetch process and named one fjoke. Another one is adding comments to better explain my code. For my first project Im proud of it.  Enjoy! https://jokegeneratorproject.netlify.app/
Two awesome card hover effects you never seen before.
Tags: uiweekly, ux, css, webdev
Published: 2021-05-03 07:47:53

#1 

{% codesandbox xenodochial-cookies-ojd6u %}

> I suggest you to view demo in full new window. Click on top right most button to view in new window. Yeah its not responsive but you can make it.

Wonder how to make this effect. video - 
{% youtube MZLShMEt2xo %}

#2 

{% codesandbox gallant-microservice-53hwm %}

> I suggest you to view demo in full new window. Click on top right most button to view in new window. Yeah its not responsive but you can make it.

Wonder how to make this effect. video - 
{% youtube jdohDcrP8fI %}
Deploy your Next JS app to Netlify
Tags: netlify, nextjs, tutorial
Published: 2021-05-14 18:37:19

As you may know, Netlify has something called continuous deployment, which lets you connect a Git repository to a Netlify site so when you make any changes in the repo your site gets updated automatically.


There are two ways to connect your git repo to Netlify: using the command line, or using the app UI. In this quick tutorial, I'm going to use the UI to show you how to deploy a Next JS repo.

## Get into Netlify 
First, you have to visit [https://app.netlify.com/start](https://app.netlify.com/start), after you are logged in you will see something like this:

![deploy-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54iluok1lgpvixsiqzuz.png)


## Select your Git provider and repo
Then after selecting your git provider, and getting the proper authorization, you will be able to select the repo you want. In my case, I had one called "personalblog".

![deploy-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3f2yd7y76cdv0y8ci6t.png)


## Put in your build commands
In the next page you could select the team, branch or even change the build command if necessary. But in my case, there's was no need, as the npm run build was my default build command and I left the rest as they were.

![deploy-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfzt1grfsb8he7xara79.png)


## Update your domain!
And that's it! By default, Netlify will create a random domain for you to access your site but you can always change it in the Site Settings once the deployment is finished. You could also add your own domain to the site you just deployed. For example, I already had my personal site hosted on Netlify, so I only had to add a subdomain from it and Netlify made the verification for it.

![deploy-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxffoy3orjc2jtho1j9c.png)

If you want to see the final result, go visit my [Blog!.](https://blog.jesusrmz.com/)
React Developer Job Opening 
Tags: react, hiring
Published: 2021-05-14 20:21:11

Fortune 500 oil & gas company in Houston is opening up the opportunity to Full-Stack developers across the country after allowing their IT team to go permanently remote. 

Full-Stack Software Developer
This position is an ongoing contract, renewed every 6 months.

Technologies: React, React Hooks, Redux, Node, GraphQL, API
Back-end experience- MongoDB, NoSQL, data-driven projects 

Description
Build in-house applications in Web ASP.NET. Develop applications in React and change the front end. 

Required knowledge
-Libraries 
-Code quality
-Life cycle hooks in React
-API
-Data-heavy projects

About the company
Fortune 500 oil & gas company HQ'd in Houston. Named one of the "Top Workplaces of 2018 & 2019" in Houston Chronicle and other Texas publications. 

How to apply:
Please email resumes to Kasey.Wickens@OdysseyIS.com
Is quitting photo and video based Social Media good for a Developer?
Tags: mentalhealth, webdev, productivity, devjournal
Published: 2021-05-15 12:40:11

The [Covid-19](https://covid19.who.int/region/searo/country/np) Lockdown hit hard, AGAIN for the second time here in Nepal and I thought to myself, I'm not falling for the social media trap again.

As a developer, I found it extremely liberating when I quit all forms of photo and text based social media.

No matter how much Facebook and Instagram is important to connect us with the world, it just makes us sad and depressed at the end.

No matter how much Mark Zuckerberg says, "The Future is Private" or "You're in control of your account", BUT the dark truth is that **YOU'RE NOT**.

Ever wondered how a single post on Facebook or Instagram is responsible for either making our day or breaking it. In fact, social media manipulates and hypnotizes us indirectly.

Let's say you stumbled upon a post on Facebook that is motivating and hypes you up. **Your entire day is gonna go well**. But by chance, you came across a post which is sad and depressing and shows how the world beats us up and how people are responsible for breaking your heart, **Your entire day is absolutely screwed**.

Thus, I made a bold decision to quit all forms of photo and video focused social media like Facebook and Instagram. I actually use [Twitter](https://twitter.com/JustSurajan) now which is mostly text-focused. A text-focused social media doesn't harm you in a way a photo-focused social media does.

In fact, I found Twitter to be awesome in ways which lets me interact with developers from all around the world.

Ignorance is a bliss. Now, I don't have to know which friend ate what and how their lives are so freakin amazing and crap like that. I've understood that everyone is suffering in their own ways.

Now, I can focus only on myself which is the only thing I want right now.
Real Time "Truth Dare & Stare" game with video and audio chat functionality
Tags: react, node, twilio, webrtc
Published: 2021-05-15 22:29:10

[Link to the game](https://truth-dare-stare.herokuapp.com)

[Game Teaser](https://youtu.be/nvnlmFGVUz4)

### 1. Overview

> *Truth Dare & Stare* is a Web Application where users can play the famous *Truth Dare and Stare* game with video and audio chat with their friends. Due to corona and lock down in many countries we are facing a serious mental health issues, specially the students who at this time enjoy the summer vacations with their friends are locked inside their houses. And the only thing we can do is to wait for the situation to improve. To contribute towards improving mental health I have made this game so that one can connect with their friends and enjoy, laugh and play with them(spending time with friends is the best way to bring smile).

### 2. How To Play??

> Just create a room and share the code with your friends and ask them to join the room. Other rules and notes and be found once inside the room. [Link to the game](https://truth-dare-stare.herokuapp.com).

### 3. Tech Stack Used(MERN)

> 1. Front End: front end is made using **React** and **Material-UI** for designing components and **Framer Motion** for animation and **Twilio SDK** for video chat.
> 2. Back End: back end is REST based using **NodeJs** with **Express** and **MongoDB(mongoose)** for database. For logging **Log DNA** is used.
> 3. API'S: I have used **Twilio Programmable Video** and **DataTrack API**. Twilio Prorammable video is based on WebRTC and offers three type of rooms(actually four 🙄) "go", "peer-to-peer", "group". Among them "go" rooms are free and allow 2 participants at max to connect to a room. In my application I am using "group" room with max participants set to 4. Get more information about twilio programmable video [here](https://www.twilio.com/docs/video/tutorials/basic-concepts).
> 4. Cloud Service: MongoDB Atlas for databse and heroku for hosting

### 4. Some Features

> Here are some of the features of the APP(Game):
1. Video and audio chat.
2. Real time user interface.
3. Score of a user is stored in database.
4. While game is going on no other user can join(until the spinning is completed or someone cancelled the game by pressing "Cancel" button).
5. Maximum 4 participants can join at a time.
6. WebRTC based.

### 5. Conclusion

> Since twilio programmable video's "group room" costs around **$0.004 per participant minute**, I may need to fall back to "go" rooms(max 2 participants only) in future, so dont miss the chance to play with your friends 🙂🙂🙂. **And comment about your experience whether you enjoyed it or not, do let me know so that I can make it better, Its just the starting**.
> **Stay Home Stay Safe** 

***
<p> [1]: <a href="https://www.twilio.com/docs/video#getting-started-guides">Twilio Programmable Video</a></p>
Difference between SQL and NoSQL| Pros and Cons
Tags: sql, database, programming, python
Published: 2021-05-15 15:46:04

My website -> www.BuggyProgrammer.com
![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/916y9pu74yg44dz31x9r.png)
![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffl0e13tm3ekwi7ik61l.png)
To Succeed Love Process
Published: 2021-05-15 16:27:51

As a product designer I often have to stiff-arm impatient alphas on the left side of [sywx' curve](https://dev.to/swyx/don-t-rush-to-simplicity-on-the-other-side-of-complexity-105n) asking for simplicity this way: "just make it simple". Just. "What you don't get," they say, "is that all this labcoat gobbledygook language about running experiments is a-complexificating an issue that a goat could solve in ten minutes." 

I just have to hope for time to keep running fancy experiments until I find the simple solution. One falls to the left, the next to the right, the next to the left but closer, the last hits the target. 

The difference between left-side simplicity and right-side simplicity is [autotelic love of the process](https://en.wikipedia.org/wiki/Autotelic). Workmanship, patience, insight, the slow accumulation of skill are ends in themselves.
My First Year with React
Tags: react, webdev, beginners
Published: 2021-05-16 14:55:00

Around this time last year, I was focused more on JavaScript and HTML than any front end framework. I had spent some time learning Angular, but I was also several months removed from working on any Angular project.

# Learning React

So around this time I finally gave in and started learning **React**. My first impression was actually less related to the framework and more to the quality of the React introductory tutorial. I was surprised how easy it was to read and understand.

As I toured through the different areas of the framework, that feeling just expanded to encapsulate how I felt about React on the whole. I love the straightforwardness that seems to permeate React's design.

# Class Components

One thing I was reading about in the documentation but not quite understanding: **Hooks**. Maybe it was the terminology, the explanation, or maybe I just needed more time to wrap my head around everything, but I wasn't sure exactly what I was looking at with Hooks. So I started writing **class components**. This was great in and of itself because even though the docs made it clear that Hooks were the new thing, the docs made it just as clear that they were an optional enhancement to the React framework. I was simply encouraged to come back and check out Hooks when I was ready.

Instead I focused on what seemed the older, more stable core of React. **I got my footing and then shipped my first React app about four months later.** 

# Learning Hooks

Sometime after the launch that project, after I'd had some time to rest, I found myself getting ready to start a new side project (built on React, since I was fascinated). Checking something on Stack Overflow, I saw a comment that reminded me of React Hooks. Finally I doubled back to the React docs to get a clear idea of what those durn Hooks were.

What can I say? I love em. Writing all **functional components** and using a retooled **State** save me code (and clutter). Everything feels lighter on its feet; more streamlined. Maybe I can't truly wish that I'd employed Hooks from the beginning—since their depiction as **optional** was part of the welcoming, practical air that drew me in—but I do feel that Hooks have been a huge improvement to the way I work with React.

# One Year Anniversary

It's been about a year since I started messing around with React, and I like the framework quite a lot. Its popularity led to the release of so many helpful packages, and that goes a long way. Its popularity also makes it easier to learn because there are more people asking and answering questions online, more people creating more learning resources for more people of different learning styles. Today I'm still maintaining React apps for a couple clients, but if I were to start a new side project right now, I might reach for a more lightweight framework. That'd be more out of curiosity than anything else. Like anything you practice regularly for a year, it's easy for me write with React brain right now. Maybe in another year's time, I'll be hooked on a different framework.
VimGore : an interactive game to learn vim 
Tags: vim, react, node, showdev
Published: 2021-05-15 18:13:44

So I wanted to try MERN stack and thus started out with this idea of creating a game that will provide you with snippets of code which will be corrected by the user using vim mode. So this idea was enough to give me motivation to jump into the project state.

![VimGore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfd54mffjm6ondg69lzk.png)

So below is the link to the app. It is not fully featured and I think that it is missing lot of stuff but will be happy to get a overall feedback. 

If you have any issues then report in repo :)
 
For now this is vimgore
 - [source code](https://github.com/ps173/VimGore)
 - [live site](https://vimgore.netlify.app/)

(also this was my first proper full-stack project)
Thanks For Reading 😁️
and keep up the hardwork 💪
Setting up Python on macOS
Tags: python
Published: 2021-05-16 12:46:39

I finally found myself in need of some Python to do some OpenCV work on my Mac.
And although Mac nowadays comes with Python pre-installed, it's not the exact version we are looking for.

To demonstrate that, open a terminal and run the `python` command.
This should now return version 2.

![Mac default Python installation](https://cdn.hashnode.com/res/hashnode/image/upload/v1620800303433/sH3EqrIV5.png)

So how can we make sure that we have the latest Python version available on our Mac system?

## Mac installing Python 3

By far, the easiest way to install Python 3 is to use Homebrew.
If you haven't had Homebrew installed yet, check out this article explaining how to [set up Homebrew on your Mac](https://daily-dev-tips.com/posts/homebrew-one-package-manager-to-rule-them-all/).

With Homebrew installed, we can install Python, and it will install the latest stable (at the time of writing 3.9).

```bash
brew install python
```

And once that is done, we should run the `python3` command to see if our version is matching.

![Mac Python 3 installed](https://cdn.hashnode.com/res/hashnode/image/upload/v1620800686383/IKKe-JF_c.png)

However, it's a bit of a mission to type the number three after Python manually.

To fix that, we can add a new alias to link `python3` to the command `python`.

I'm using Zsh, so I have a `~/.zshrc` file, open this file and add the following line.

```bash
nano ~/.zshrc
```

```text
alias python="python3"
```

Now, if you restart your terminal, you should run just the `python` command.

![Python default command version 3](https://cdn.hashnode.com/res/hashnode/image/upload/v1620800968514/HC7HF_XPw.png)

And that's it. We now have the latest version of Python installed on our MacOs system.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Nodejs Express RestAPI – Upload/Import Excel file/data to MongoDB – using Convert-Excel-to-Json + Multer
Tags: node, multer, restapi, converexcel
Published: 2021-05-16 13:01:09

https://grokonez.com/node-js/express/nodejs-express-restapi-upload-import-excel-file-data-to-mongodb-using-convert-excel-to-json-multer

Nodejs Express RestAPI – Upload/Import Excel file/data to MongoDB – using Convert-Excel-to-Json + Multer

In the tutorial, Grokonez shows how to upload & import Excel File/Data to MongoDB using <code>convert-excel-to-json</code> and <code>multer</code> libs.

Related posts:
- <a href="https://grokonez.com/node-js/node-js-import-excel-file-to-mongodb-using-convert-excel-to-json-lib">Node.js Import Excel File to MongoDB – using Convert-Excel-To-Json lib</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Node.js</li>
<li>Express</li>
<li>Convert-Excel-To-Json</li>
<li>Multer</li>
<li>MongoDB</li>
</ul>
<h2>Goal</h2>
We create a Node.js project as below structure:

<img src="https://grokonez.com/wp-content/uploads/2019/03/nodejs-express-restapis-upload-import-excel-files-to-mongodb-project-structure.png" alt="nodejs-express-restapis-upload-import-excel-files-to-mongodb---project-structure" width="645" height="185" class="alignnone size-full wp-image-17337" />

Excel File:

<img src="https://grokonez.com/wp-content/uploads/2019/03/nodejs-express-restapis-upload-import-excel-files-to-mongodb-excel-file.png" alt="nodejs-express-restapis-upload-import-excel-files-to-mongodb---excel-file" width="619" height="180" class="alignnone size-full wp-image-17338" />

-> Results:

<img src="https://grokonez.com/wp-content/uploads/2019/03/nodejs-express-restapis-upload-import-excel-files-to-mongodb-client-request.png" alt="nodejs-express-restapis-upload-import-excel-files-to-mongodb---client-request" width="746" height="484" class="alignnone size-full wp-image-17339" />

<img src="https://grokonez.com/wp-content/uploads/2019/03/nodejs-express-restapis-upload-import-excel-files-to-mongodb-mongodb-records.png" alt="nodejs-express-restapis-upload-import-excel-files-to-mongodb---mongodb-records" width="604" height="128" class="alignnone size-full wp-image-17340" />
<h2>Practice</h2>
<h3>Install Express, Convert-Excel-To-Json, Multer, MongoDB</h3>
– Init <code>package.json</code> file by cmd: <code>npm init</code> -> Then install <code>express</code>, <code>mongodb</code>, <code>convert-excel-to-json</code> & <code>multer</code> libs:

<pre><code class="language-json">
$npm install --save express mongodb convert-excel-to-json multer
</code></pre>

More at:

https://grokonez.com/node-js/express/nodejs-express-restapi-upload-import-excel-file-data-to-mongodb-using-convert-excel-to-json-multer

Nodejs Express RestAPI – Upload/Import Excel file/data to MongoDB – using Convert-Excel-to-Json + Multer