teleren/devto huggingface dataset:
Understanding Kubernetes: part 4 – Namespaces & ResourceQuotas
Tags: kubernetes, devops, docker, beginners
Published: 2020-04-24 14:25:14

---
title: Understanding Kubernetes: part 4 – Namespaces & ResourceQuotas
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with Namespaces and ResourceQuotas.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e0hm6luexvo10j4ivvlz.jpg)

If you are interested, I published an entire illustrated book about Kubernetes, available in paperback on [Amazon](https://www.amazon.fr/dp/B0BB619188/ref=cm_cr_arp_d_product_top?ie=UTF8) and in digital version on GumRoad: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Understanding Kubernetes: part 3 – Secrets
Tags: kubernetes, devops, docker, beginners
Published: 2020-04-24 14:20:33

---
title: Understanding Kubernetes: part 3 – Secrets
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with Secrets.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/izfdjt09vqr3vrv0e2o6.jpg)


If you are interested, I published an entire illustrated book about Kubernetes, available in paperback on [Amazon](https://www.amazon.fr/dp/B0BB619188/ref=cm_cr_arp_d_product_top?ie=UTF8) and in digital version on GumRoad: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
How To Create a Simple CSS Card Without Frameworks
Tags: html, css, beginners
Published: 2020-04-24 14:11:12

In this tutorial, we are going to create a simple card with CSS. We will not use any frameworks or libraries and while they may be useful, there are times when you'll want to pick up vanilla CSS and try to keep things as simple as possible and that's exactly what this article is made for.

With no further ado, let's go!

## Step 1: The HTML

We will first begin by creating a `div` named **card** that will act like a real card. Then we will make another `div` called **header** and we'll wrap it around the text "The Header". As the name implies, it will be a header.

Next, we'll create `div` and name it **container** and that's where we will insert our contents. For this tutorial, we'll use some texts.

```html
<div class="card">
		<div class="header">
			<p>The Header</p>
		</div>
			<div class="container">
			<p>Some random texts</p>
			<p>Yet another texts</p>
			<p>Even more texts</p>
			<p>I should probably make programming puns</p>
		</div>
	</div>
```

That's all we need for the HTML and now it's time to style it with CSS.

## Step 2: The CSS

In the  **card**  class, we'll set the width of the card to 30% and we use the percentage '%' to make the card mobile responsive. Then, we'll use the flexbox to rearrange the header and the container and we're doing this so that the header will fit nicely to the card. 

To use flexbox, set the display to flex which will stack the header and the container into a row by default and to fix that, we'll set the direction of the flex to a column.

After that, we'll make the border visible by adding 1px to a border and set to solid and then add the red colour.

**header** 

```css
.card {
	width: 30%;
	display: flex;
	flex-direction: column;
	border: 1px red solid;
}
```

> **Tips!** Check out this [tutorial ](https://www.w3schools.com/css/css3_flexbox.asp)if you want to learn how Flexbox works.

Next, we'll style the **header**. We'll set the height of the header to 30% and add the background colour to red and change the colour of the text to white.

```css
.header {
	height: 30%;
	background: red;
	color: white;
	text-align: center;
}
```

Finally, we will add the padding 2px 16px shorthand (Which is the equivalent of `padding-top: 2`and `padding-right: 16`) to the **container** class so that there will be some spaces between the contents and the card, and it'll make the look of the card more decent.

```css
.container {
	padding: 2px 16px;
}
```

And there you go! We've made a card and we did that without relying on any frameworks!

Here's how the card would look like in the final result:

{% codepen https://codepen.io/mohammedasker/pen/KKdWmwm %}

With this one, you can use the card on your website's sidebars, blog posts, etc. I hope you enjoyed this tutorial and thank you for reading.

Happy coding!
What Did You Learn This Week --April 24?
Tags: todayilearned, discuss
Published: 2020-04-24 14:03:31

---
title: What Did You Learn This Week --April 24?
tags: todayilearned, discuss
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--TpOOUw4B--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/67bb72156h4y13zl5cio.png
series: this-week-i-learned
---
`$` - A command for those who copy-paste from tutorials
Tags: bash, tutorial
Published: 2020-04-24 13:55:22


So there I am, following along in the tutorial (as one does to learn).

I get to the step, they tell me: "Just run this command and you'll be done!" `$ cure covid19`

So I dutifully highlight the command. I copy each valuable character. I open my terminal. I paste. I hit enter!

And `-bash: $: command not found`.... ugh.

Let's fix it!

First, create a new file called `$` somewhere in your path (You can check your path by running `echo $PATH`. I will be using `~/bin/`, you might have to `mkdir ~/bin`)

```bash
$ touch ~/bin/$
$ chmod +x ~/bin/$
```

If you've done the above correctly, you'll be able to run the command `$` and nothing will happen. No errors!

But we want more, we want the command we copied to actually run. Easy enough, let's open the file called `$` that we just made and add some code in it:

```bash
#!/bin/sh

"$@"
```

`$@` simply refers to all the arguments the command is given (aka the command we wanted to run from our tutorial)

Now we should be able to do the following:
```bash
$ $ echo 'hello, hello, hello!'
hello, hello, hello!
```

We can be done here. Congratulations on making your shell script! But let's do more. It seems kind of dangerous to be copy-pasting random commands off the internet... Let's ask for confirmation before running the command, back in our file again:

```bash
#!/bin/sh

echo "You are about to run the command:"
echo "$@"
read -n 1 -p "Do you want to continue? [yN]: " answer
echo ""

if [ "$answer" == "y" ]; then
  echo "--- executing ---"
  "$@"
fi
```

Now back to our test run:
```bash
$ $ echo 'hello, hello, hello!'
You are about to run the command:
echo hello, hello, hello!
Do you want to continue? [yN]: y
--- executing ---
hello, hello, hello!
```

And now we have a command that asks for confirmation before running other commands! Which could be useful on its own. (and to those that copied too many dollar signs in that example, you got to go through two approvals, which might give you a few ideas...)

If you just want to copy/paste and/or share this code with your friends, here's the gist:
{% gist https://gist.github.com/kallmanation/a93d85b14b49575c3f416c7dd3d7bd46 %}
Emojis everywhere - supercharged with Alfred workflows
Tags: productivity, workflows, macos, emoji
Published: 2020-04-24 13:52:20

---
title: Emojis everywhere - supercharged with Alfred workflows
published: true
description: Don't search emojis no more, include Alfred workflows, search in the spotlight replacement popup and just insert it into your tweet/document/
tags: productivity,workflows,macos,emoji
---

I fell in love with macOS because of the gestures and workflows. [Alfred](https://www.alfredapp.com/) improves this behaviour with custom workflows and many more convenient [shortcuts for locking the screen](https://dev.to/dnsmichi/dotfiles-document-and-automate-your-macbook-setup-3684).

There are various reasons to use a workflow with shortcuts:

- Speed & productivity, avoiding context switches.
- The editor window doesn't support emojis (outside of GitLab, GitHub, etc., typing `:heart` has no effect).
- You don't want to type, search and copy on [Emojipedia](https://emojipedia.org) all the time.

The [Alfred Powerpack](https://www.alfredapp.com/powerpack/) allows you to add custom workflows. You'll need to pay for the Alfred license but the time savings are well invested imho. Keep in mind that there are [more workflows](https://gitlab.com/dnsmichi/dotfiles#tools) and the possibility to create your own. 

The [emoji workflow for Alfred](https://github.com/jsumners/alfred-emoji/releases) needs to be downloaded and imported into Alfred. Considering that you replaced Spotlight with Alfred, use the following shortcut and type `emoji` to trigger the workflow:

```
Cmd + Space
emoji
```

![Alfred Emoji Workflow](https://dev-to-uploads.s3.amazonaws.com/i/podiw9yacmqhk3iehf7i.png)

Then type as you go and search for the emoji. Cursor up/down for selection, and Enter to copy it to the clipboard.

```
heart
Enter
```

![Alfred Emoji Workflow Search](https://dev-to-uploads.s3.amazonaws.com/i/yy9zul954qg0i14zyn91.png)

Now you can easily insert it your text flow.

```
Alt + Tab
Cmd + v
```

The more often you use the emoji workflow, the less you need to type. Mine looks like this:

```
Cmd + space
e
<shows emoji, enter to autocomplete>
Enter
<heart is the first one>
Enter

Alt + tab
Cmd + v
```

Now let's spread the emoji love everywhere! ❤️❤️❤️
Simple image lazy loading using JQuery
Tags: jquery, javascript, html
Published: 2020-04-24 13:51:52

Lazy loading is a technique where images are given a placeholder to be displayed while the actual image is loading in the background. The placeholder gets replaced with the actual image once it's done loading in the background.
<br/><br/>
Below is a series of fully explained code on how to implement lazy loading
1. Set the src attribute of your image to be the placeholder image
```html
<img src="placeholder.png">
```
2. Give your image tag an attribute **ref-src** to with the url of the actual image you want to load
```html
<img src="placeholder.png" ref-src="https://cdn.pixabay.com/photo/2019/12/30/14/13/snail-4729777_960_720.jpg">
```
3. write some javascript code to load the image in background and replace the placeholder after image has been loaded
```javascript
// selecting image element to be lazy loaded
let elem = $("img");
//retrieving url from ref-data attribute
let url = elem.attr("ref-data");
//creating a new image object
let loadingImage = new Image();
//this function is called when the image object
//is done loading it's image
loadingImage.onload = function(){
    //src attribute of elem is being replaced
    //with that of loadingImage because its done loading
    elem.attr("src", url);
}
//the url from elem has been assigned
//to the new image object for loading 
loadingImage.src = url;
```
An with this code you've implemented lazy loading. These days most developers ignore the use of spinners as placeholders but rather prefer a grey looking shadow of the image.

## Lazy loading all images on your site
To lazy load all images on your website, I have this simple script for you to use. Try understanding the code below because it's very similar to the one above.
```javascript
let imgs = $("img");
for(let a=0;a<imgs.length;a++){
  loadImage(imgs[a]);
}
function loadImage(elem){
  let url = $(elem).attr("ref-src");
  let newImg = new Image();
  newImg.onload = function(){
    console.log("done loading");
    $(elem).attr("src", url);
  }
  newImg.src = url;
}
```
Voilà! all images on your site will be lazy loaded but remember to always put your placeholder in the src section and the image you want to load in the ref-src attribute like below
```html
<img src="placeholder here" ref-src="actual image here">
```
ignoring your files with Nuxt.js
Tags: nuxt, vue
Published: 2020-04-24 13:46:42

---
canonical_url: 'https://debbie.codes/blog/nuxt-ignoring-files'
---
In Nuxt.js there are 3 different ways to ignore files during the build phase. This is great for static site generation which means you can still generate your site with a broken page as it will be ignored.

1) Create a `.nuxtignore` file in your root directory. You can ignore layouts, pages, store and middleware files. The `.nuxtignore` file works the same as the `.gitignore` or `.eslintignore` in that each line is a glob pattern indicating which files should be ignored.

```md
# ignore the about page
pages/about.vue

# ignore a page inside the blog folder
pages/blog/*.vue
```

2) You can also ignore files using the ignorePrefix property by prefixing your file with a `-`.  This is a very quick way of ignoring your file as you just need to modifying it's name.
`pages/-about.vue`



3) You can also use the ignore Property in our `nuxt.config.js file` which is more customisable than using the ignorePrefix property. All files matching a glob pattern specified inside ignore will be ignored during the build process. This means you can easily ignore more than one file. For example to ignore all pages starting with booking:
```javascript
export default {
    ignore: 'pages/booking*.vue'
}
```
Ignoring files is extremely helpful when developing and fixing bugs especially if you break your site and need to generate a new one. By ignoring the broken file/files/folder you can still publish your site and then work on the broken file another time without having to delete it or send it to another branch that might get forgotten about. Of course if you are ignoring files don't forget to later remove them when you want them to be added to the build phase. 

All 3 options are just as good but I tend to use the ignorePrefix when I am debugging a particular page. I use the ignore property in the `nuxt.config.js` file when I need to push to production as it is easier for people to see what is going on in the pull request and clearer to understand than the prefix option. I rarely use the `.nuxtignore` file as I find people tend to look into the `nuxt.config.js` file to see what is going on and they might not come across or understand the `.nuxtignore` file when trying to figure out why a particular page is not building. But of course feel free to use the method that best suits you. 

For more info and examples on the ignore property see the [Nuxt.js docs](https://nuxtjs.org/api/configuration-ignore).
Introduction to Keycloak
Tags: keycloak, authentication, opensource, java
Published: 2020-04-24 13:43:53

##__What is an Identity management tool?__

Simply it can be used as a security provider. We can delegate our security to a third party. It is just like hiring a security person or hiring a bodyguard. 

##__What is the Keycloak framework?__

* Open-source software
* Commercial offering available, RedHat SSO
* Java-based authentication and authorization server.
* Very easily integrated with Spring framework based applications.

Actually, the Keycloak framework is an authentication and authorization server that can be used to secure your applications. It has many features as I mentioned below.  Only you need to configure functionalities, don't need to write code. So it will save your development time. 


##__Features of the Keycloak framework__
* Single sign-on and single sign-out
* Social login
* User federation (LDAP, Active directory)
* Centralized management with Admin console
* Standard protocols (OpenId connect 1.0, OAuth2.0, SAML 2.0)
* Easy setup and integration
* Customizable and extensible
* High performance

##__The technology stack of Keycloak framework__
* Angular JS, Bootstrap, Freemaker,  PatternFly
* REST Easy
* JPA, Jackson 2.x, Commons HTTP client, Wildfly

#__Token types of Keycloak__
* Access token - a short-lived token that can be used for accessing resources
* Refresh token - a long-lived token that can be used to request a new token
* ID token - contains user information 
* Offline token - refresh token that never expired

##__OAuth 2.0 flow on Keycloak__

![OAuth 2.0 flow on Keycloak](https://1.bp.blogspot.com/-Ypn-ky6Hz-E/XoDlf7y9hWI/AAAAAAAAtVw/QfkuKTL3eFYHap6rQyBp11bypznqaQIkQCLcBGAsYHQ/s1600/k1.PNG)
VS Code March 2020 Release Highlights Video
Tags: discuss, vscode, javascript, webdev
Published: 2020-04-24 13:37:07

---
title: VS Code March 2020 Release Highlights Video
published: true
description: Highlights of some of the latest features found in the March 2020 release of Visual Studio Code.
tags: discuss,vscode,javascript,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kp2hrnkuhwqvv4s4tj73.png
series: vscode-release-2020
---

## March 2020 VS Code Release
You can read through the [release notes](https://code.visualstudio.com/updates/v1_44?WT.mc_id=devto-blog-brcl) to find out more about them or watch this video to see some of the highlights from it.

{% youtube MuSLolv6dtM %}

### Features Highlighted

- [Increased View Placement Flexibility](https://code.visualstudio.com/updates/v1_44?WT.mc_id=devto-blog-brcl#_increased-view-placement-flexibility)
- [Better Quick Open Files](https://code.visualstudio.com/updates/v1_44?WT.mc_id=devto-blog-brcl#_quick-open-rewrite)
- [Extension Pack Display](https://code.visualstudio.com/updates/v1_44?WT.mc_id=devto-blog-brcl#_improved-extension-pack-display)
- [Persisted Undo/Redo Stack](https://code.visualstudio.com/updates/v1_44?WT.mc_id=devto-blog-brcl#_keep-undo-stack-when-reopening-files)
- [Timeline View](https://code.visualstudio.com/updates/v1_44?WT.mc_id=devto-blog-brcl#_timeline-view)


What's your favorite feature or improvement in this month's release? Share it below 👇
Guild Wars 2 SMS Bot [Entry]
Tags: twiliohackathon
Published: 2020-04-24 13:29:38

## What I built

Using Twilio’s Autopilot API, I made an SMS bot that integrates with the Guild Wars 2 API. Right now, the app leverages the GW2 API for checking the conversion rates for in-game currency conversion. Now that a proof of concept is up, though, it can be extended to do whatever the Guild Wars 2 API can do. I opted to have one reliable feature to demonstrate rather than have it do a bunch of things half well.


## Demo Link
 
As it’s an SMS Bot, you can get to it by texting (724) 257-4486. The Flask app is hosted on free Heroku, so it may take a while to “wake up” at first, so here are some images:

![Greetings](https://raw.githubusercontent.com/ItsASine/GW2-SMS-Bot/master/demo/Hello.gif)
![Gold to Gems](https://raw.githubusercontent.com/ItsASine/GW2-SMS-Bot/master/demo/Gold.png)
![Gems to Gold](https://raw.githubusercontent.com/ItsASine/GW2-SMS-Bot/master/demo/Gems.png)

## Link to Code

{% github ItsASine/GW2-SMS-Bot %}
https://github.com/ItsASine/GW2-SMS-Bot

## How I built it

Technologies involved are:
* Twilio Autopilot API for handling the chatting over SMS
* Flask (Python) for the middle code between Twilio and Guild Wars 2
* Heroku to host the Flask code
* The Guild Wars 2 API to get in-game info

Out of that, the only thing I’ve worked with before was the Guild Wars 2 API, mainly to get stuff like guild messages to display. It was new doing anything interactive, using Heroku over Netlify, and working with Python outside of schoolwork. 

Cool stuff:

* Twilio’s documentation is fantastic. The quickstarts were straightforward to go off of, and the blog had a bunch of examples to get ideas and approaches.
* Flask made spinning up a proof of concept efficient. The guts of the app didn’t take long at all to get into the right place.

Annoying stuff:
* I don’t know if Twilio’s documentation had me spoiled, or I was too used to no-fuss apps, but trying to get an API hosted on Heroku was a pain. Their documentation was very detailed in some spots and then “Do the thing” in other spots. I feel like I spent this month mostly fighting the deployment rather than developing. 
* I have no clue how the GW2 API works, haha. I noticed that when doing the currency conversions between in-game gold and premium gems, my app has one rate, another app that I know hits that API has another rate, and the game itself has an even more different rate. Hopefully, this is just caching (and I would assume GW2 is as close to realtime as it gets, while a large site like GW2 Efficiency might do their own caching)

## Additional Resources/Info

If you play Guild Wars 2 and want to request a feature, here are the APIs available:

https://wiki.guildwars2.com/wiki/API:Main#Version_2_endpoints
https://wiki.guildwars2.com/wiki/API:2#Active_endpoints

Here are screenshots of the configuration in Twilio if you want to see behind the curtain a bit!

![Bot tasks](https://dev-to-uploads.s3.amazonaws.com/i/i226jye8wyf7gjf0ak1m.png)

![Custom field type](https://dev-to-uploads.s3.amazonaws.com/i/66z7m0azn3bl7k8cfmi4.png)
Persisting flutter SnackBar until user interacts with it
Tags: dart, flutter, tutorial
Published: 2020-04-24 13:28:12

On today's "*What did i want to achieve/how i achieved it*", i wanted to 
*Show a `SnackBar` until a user interacts with it.*

### How i achieved it

Flutter's `SnackBar` as described on its official documentation; is 
>A lightweight message with an optional action which briefly displays at the bottom of the screen.

It comes with a `duration` property that allows you to set how long you want the SnackBar to be visible. Values can be seconds, minutes, hours, days, etc...

Point is, There's no way to tell when the user will interact with it. Leaving me with the only option of setting a longer **duration**(read days) and hoping the user will interact with it within that time. Only then, it can disappear from the list of widgets.

Key points being: 
- Setting a long duration ``` dart 
duration: Duration(days: 1)
```
- Hiding the SnackBar when there's an interaction ```dart
 Scaffold.of(context).hideCurrentSnackBar();
```

Below is the code for the SnackBar widget. I'm using a `ListTile` widget but anything with a callback would do:

```dart
SnackBar sb = SnackBar(
  duration: Duration(days: 1),
  content: ListTile(
    onTap: () {
      Scaffold.of(context).hideCurrentSnackBar();
    },
    title: Text(
      "This is a title",
      style: TextStyle(
          fontSize: 24.0,
          fontWeight: FontWeight.bold),
    ),
    subtitle: Text(
        "and i'm a subtitle"),
    trailing: Icon(Icons.check),
  );
);
_scaffoldKey.currentState.showSnackBar(sb);
```
You like drawing as a hobby? I might have something for you 🧑🏻‍🎨
Published: 2020-04-24 13:27:29

Hey there, I hope you are doing fine with everything going on...

On times like this, it's good to clear your mind. For me, drawing is a way to achieve that. But one thing I struggle with while drawing is the body parts proportions.

So I decided to implement a virtual wooden model (without any 3D lib) that I could easily manipulate and print to draw on it for practice. It's still in an early stage (POC) and that's why I need your input ^^

<b> Here is a live demo: </b>
{% twitter 1253635341967376385 %}

<b> Questions: </b>
- First, can this be helpful to you or someone you know?
- What features do you think should be implemented?
- How should I name this tool if it ever gets to a production stage?


Thank you for your time and take care :)