teleren/devto huggingface dataset:
Em v/s REM
Tags: html, css, design, webdev
Published: 2021-01-24 15:48:46

The essential difference between em and rem is that rem is "root em".
Now that out of the way let's first see what actually em is?

# EM

EM is relative to the current font size of the parent element. This basically means that if the font size of the parent element is 16px then

```css
1em == 16px
2em == 32px
3em == 48px
4em == 64px
and so on...
```

This is super cool because now you can use these relative units to size up almost everything perfectly!

And as a matter of fact, this unit also works on padding, margin, border, and whatnot.
Padding, margins, borders, height, etc. directly relates to the font-size of the current element.

Look at the example below and the explanation even below.

```html
<div class="main">
  <div class="container">
    <div class="em">
      <h1>EM</h1>
      <h3>This section explains EM</h3>
    </div>
  </div>
</div>
```

```css
html {
  font-size: 16px;
}

body {
  font-size: 1em;
}

.container {
  font-size: 2em;
}

.em {
  font-size: 2em;
}

.em h1 {
  font-size: 2.5em
}

.em h3 {
  font-size: 0.5em;
}

.em>.block {
  font-size: 0.5em;
  border: 0.1em solid #000;
  padding: 1em;
}
```

A caveat to em is that it supports compounding, which means if you have nested divs, each setting font-size based on em unit than the nested divs will compound the size starting from the root element to itself.

Here the font size of the "h1" tag would be:

```css
16px * 1 * 2 * 2 * 2.5 = 160px;
```

And the font size of the "h3" tag would be

```css
16px * 1 * 2 * 2 * 0.5 = 32px;
```

And the size of "1em" in ".block" div would be 

```css
16px * 1 * 2 * 2 * 0.5 = 32px;
```

Hence,

```css
padding: 1em             == padding: 32px;
border: 0.1em solid #000 == border: 3.2px solid #000
```

[https://codepen.io/holdmypotion/pen/yLaZBbV](https://codepen.io/holdmypotion/pen/yLaZBbV)

To fix up the compounding effect of em units(that quite frankly is a nuisance), rem was introduced(probably!)

# REM

REM is relative to the font size of the root element. This solves the problem of compounding that occurs in the case of em. Whatever the font size of the parent element maybe, 1rem unit stays equal to the font size set in the HTML tag

```css
html {
	font-size: 32px;
}
/*Now 1rem == 32px */
```

Look at the example below:

```html
<div class="main">
  <div class="container">
    <div class="rem">
      <h1>REM</h1>
      <h3>This section explains REM</h3>
    </div>
  </div>
</div>
```

```css
html {
  font-size: 32px;
}

body {
  font-size: 1rem;
}

.container {
  font-size: 2rem;
}

.rem {
	/* Have no effect as we are setting the font size of h1 and h3
		 seperately using rem.
	*/
  font-size: 2rem;
}

.rem h1 {
  font-size: 3rem
}

.rem h3 {
  font-size: 1.2rem;
}
```

REM doesn't support compounding, which means all elements set their sizes based on the font-size of the root element

Here the font size of the "h1" tag would be:

```css
16px * 3 = 48px;
```

And the font size of the "h3" tag would be:

```css
16px * 1.2 = 19.2px;
```

[https://codepen.io/holdmypotion/pen/QWKBwbG](https://codepen.io/holdmypotion/pen/QWKBwbG)
Swagger and ReDoc for Documenting WEB API in .NET 5
Tags: dotnet, swagger, redoc, webapi
Published: 2021-01-24 15:43:15

# Introduction 
Lets say you have a WEBAPI and would like to update the documentation of that API automatically. Frameworks such as swagger and Redoc might be a good approach since they both have nuget packages available within the Visual Studio IDE for a quick and easy setup.

# Setup

Right Click the WebAPI Project and click Manage Nuget Packages, to install the following packages:

* Swashbuckle.AspNetCore
* Swashbuckle.AspNetCore.Swagger
* Swashbuckle.AspNetCore.ReDoc

# Swagger Configuration
In the Starup.cs file include SwagerGen in the ConfigureServices method:

```csharp
public void ConfigureServices(IServiceCollection services)
{
   services.AddSwaggerGen(c =>
   {
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "WebApiDevoTo", Version = "v1" });
   });
}
```

Include the middleware in the Configure method:

```csharp
 public void Configure(IApplicationBuilder app, 
                       IWebHostEnvironment env)
{
   app.UseSwagger();
   app.UseSwaggerUI(c => 
   c.SwaggerEndpoint("/swagger/v1/swagger.json", 
                     "WebApiDevoTo v1"));
}
```
Run the application and the if you created new WebAPI Project with views and controllers the weather forecast should be available as shown in the figure below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ka46ldj72me5jcufgnz.png)


# ReDoc Configuration
Include the ReDoc middleware in the Configure method:

```csharp
 public void Configure(IApplicationBuilder app, 
                       IWebHostEnvironment env)
{           
  app.UseReDoc(c =>
  {
    c.DocumentTitle = "REDOC API Documentation";
    c.SpecUrl = "/swagger/v1/swagger.json";
  });           
}
```
If you run the application by default the swagger interface will appear navigate to {localhost}/api-docs to see the ReDoc interface as the figure below.

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


To enable ReDoc to run as default set the launch browser of your WebApi to <strong>api-docs</strong>, to do this right click the WebApi project > Properties > Debug.

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

#Swagger X ReDoc [Free Version]  
|                                     | Swagger | ReDoc |
|-------------------------------------|---------|-------|
| Open Source                         | Yes     | Yes   |
| OpenAPI Specification               | Yes     | Yes   |  
| Allows embedded HTML/CSS/JS         | Yes     | Yes   |  
| Try-Me Functionality                | Yes     | No    |
| Layout with sidebars (Three panel)  | No      | Yes   |

# Conclusion 
To rapidly expose your applications API frameworks such as ReDoc and Swagger is definitely a quick and practical solution. Swagger and ReDoc both offer a free and paid version and should be explored to adjust the user’s needs. Please comment on the resources you use for documenting your API.   
   
# References 
* [Swagger][swagger] 
* [ReDoc][redoc] 

[swagger]: <https://swagger.io>
[redoc]:   <https://redoc.ly>
#14 DevOps Diary: Learning Go & More Podcasts!
Tags: devops, docker, kubernetes, go
Published: 2021-01-24 15:39:35

Welcome beautiful people!

> Motivation comes from doing ♾️

The more I learn about the cloud-native space, tools and platforms, the more excited I get about learning more 🎉

On other news, I was finally able [to customise my YouTube domain!](https://www.youtube.com/c/AnaisUrlichs?sub_confirmation=1) A BIG shout-out to my subscribers for supporting me along my learning journey! You rock 🙌🏼

Now let's get started with this week's content...

## Videos🎥

This week, I will highlight a few YouTube channels that are quite amazing in different ways

- **Jeff Geerling**'s [YouTube channe](https://www.youtube.com/channel/UCR-DXc1voovS8nhAvccRZhg)l where he shows lots of Raspberry Pi videos + tutorials; he also has a specific Kubernetes 101 tutorial. Have a look if you enjoy hands-on learning.
- Dave Farley's Channel on [**Continuous Delivery**](https://www.youtube.com/channel/UCCfqyGl3nq_V0bo64CjZh8g) — Definitely a variety of insights that I would not get in most blog posts or by other YouTubers + he aims to make the content more entertaining by connecting it with current events across industries.

And next, two amazing, growing channels — check those out if you are into podcast style content 

- **[The Popcast](https://www.youtube.com/channel/UCMZAsRXAPe3BDxZEncXSbGA)** by [Dan](https://twitter.com/danpopnyc) is going into its second season, featuring lots of amazing people across the cloud-native space.

## [View the entire newsletter here](https://blog.anaisurl.com/14-devops-diary-learning-go-more-podcasts/)
Python beginner projects from a Python beginner dev
Tags: python, beginners
Published: 2021-01-24 15:32:10

Hey all,

So, I just started studying Python and I developed some beginner projects that I'd like to share. This way others Python beginner devs can get inspired from them!
####1. Dices simulator
This project simulates and prints two random dices.
```python
import random

dices = 2

for i in range(0, dices):
    print(random.randint(1,6))
```
####2. Password generator
This project generates a random 16-length password.
```python
import random

lower = 'abcdefghijklmnopqrstuvwxyz'
upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
numbers = '0123456789'
symbols = '[]{}()*;/,_-!@#$%&+='

all = lower + upper + numbers + symbols

length = 16
password = ''.join(random.sample(all, length))
print(password)
```
####3. Youtube audio downloader
This project downloads the audio from a YouTube URL.
#####Pre-requirement
It's needed to install the `youtube_dl`:
```
pip3 install youtube-dl
```
```python
from youtube_dl import YoutubeDL

audio_downloader = YoutubeDL({'format':'bestaudio'})
audio_downloader.extract_info(input('Enter youtube url :  '))
```
####4. Message encrypt-decrypt
This project encrypts and decrypts a message.
#####Pre-requirement
It's needed to install the `cryptography`:
```
pip3 install cryptography
```

#####Encrypt a message
```python
from cryptography.fernet import Fernet

key = b'ntLaRE-8-a81Bqa74aCL6ejFW4hr6ZO9m0fWbDOmys8=' # Some awesome key
message = input('Enter a message: ')

f = Fernet(key)
encrypted = f.encrypt(message.encode())
print(encrypted.decode("utf-8"))
```

#####Decrypt a message
```python
from cryptography.fernet import Fernet

key = b'ntLaRE-8-a81Bqa74aCL6ejFW4hr6ZO9m0fWbDOmys8=' # Some awesome key
message = bytes(input('Enter a encrypted message: '), encoding='utf8')

f = Fernet(key)
decrypted = f.decrypt(message)
print(decrypted.decode("utf-8"))
```
</br>
Now it's your time to contribute, share others ideas that a Python beginner, including me, can get inspired to improve our skills!
Celebrating 1000 DEV followers
Tags: showdev, codenewbie, beginners, portfolio
Published: 2021-01-24 15:28:22

Thank you all for supporting us! ❤️ :))

I would like to use this achievement as a start of something new.
To celebrate our progress I am going to organize **interviews with you**!

These interviews will introduce many of our members, by learning more about their experiences, work, dreams and ambitions. You will be allowed to promote some of your projects/websites, but we would also ask you to review [Codr](https://nevolin.be/codr/).

### Let's do this

Shoot me an email at ilja.nevolin@gmail.com with more details about yourself, include your portfolio, resume, linkedin if possible. Alternatively reach out to me on Discord `X0X0#3601`.

### Because it matters

I hope these interviews will encourage more people to appreciate and respect the work we do. But also provide insights from people across the world. Even if you're not a developer or just starting out, you are more than welcome to share your story. It's a great opportunity to make new friends, colleagues or partners!
6 Reasons to Learn Python Programming
Tags: python, beginners, webdev, learn
Published: 2021-01-24 15:15:34

If you have doubts about which programming language to use for your web development, I am giving you 6 reasons — although there are many more — to program in Python.

## __1. It's an Interpreted programming language__

Python is an Interpreted programming language meaning " is a type of programming language for which there is an interpreter which runs over a virtual machine. The interpreter executes the code line by line and convert it into low level machine language. Since, the interpreted language runs over virtual environment, these languages are considered platform independent." - _Source [Wikipedia]_; so it works on any system that integrates its interpreter.

## __2.  Large collection of frameworks, libraries and development tools you can work with__

Python is not only a multiplier and multi-paradigm but it will also help us to develop any route, such as a web or mobile.

To accomplish this, Python consists of large collection of  frameworks, libraries, and development tools for developing applications without putting additional cost. Python frameworks simplify and make the process faster for web application development and the frameworks are Django, Flask, pyramid etc. Python GUI frameworks are available for developing the GUI based application.

## __3. Ease of Reading Code__

Python code is easy to read and maintained. It is easily reusable as well whenever it is required.
Python have simple syntax, allowing different concepts to develop without writing additional lines of code. 
The code is required to be of good quality and easy to maintain and simplify for maintenance, for development of software application. It helps in building custom applications and clean code helps in maintaining and updating the software applications without putting extra effort on the same code.

##__4. Great Syntax Quality__

The syntax that this programming language provides is one of its Ultimate Selling Features. Python Specific, an internal code block is created via indentation, which forces the developer to indent their source code to ensure clear readability.

One of Python's functions is to reduce the use of other characters such as using the comma symbol {,} , among others, and to be able to write a certain sequence for that test.


##__5. Object-Oriented Programming__

Python are multi-paradigm, you can write programs or libraries that are largely procedural, object-oriented, or functional in all of these languages. It depends on what you mean by functional. Python does have some features of a functional language. 

OOP's concepts like, Classes,Encapsulation,Polymorphism, Inheritance etc.. in Python makes it as object oriented programming language. 

##__6. Other applications for which python is used__

There are other applications for which python is used that are web-scraping, data-science, machine-learning, face-detection etc. These are some major applications used.
The man at the entrance. Google's IAP - Identity-Aware Proxy 
Tags: security, programming, googlecloud, devops
Published: 2021-01-24 15:15:26

Google's Identity-Aware Proxy is a service that intercepts web requests sent to your application, authenticates the user making the request using the Google Identity Service, and only lets the requests through if they come from a user you authorize. 

Using this takes most of the authentication responsibilities away from your application allowing you to make use of a service provided by Google. You can also use it on your on-prem / non-GCP resources using the [IAP connector](https://cloud.google.com/iap/docs/enabling-on-prem-howto).

## How IAPs work 👮🏽‍♀️

![IAPs](https://cloud.google.com/iap/images/iap-app.png)

When an application/resource is protected by IAP, only users you have given the correct IAM role will be granted access. After authentication is successful, some information is attached to the headers of the request. `X-Goog-Authenticated-User-XXX` headers are provided by IAP.

You can use the info gotten from these headers to get useful information that can be used in your application.

What if IAP is turned off mistakenly?
How do I protect my application from [Spoofing](https://en.wikipedia.org/wiki/Spoofing_attack)👨🏽‍💻?

Answer: Cryptographic Verification 💂🏽‍♀️

A request header is added by IAP called `X-Goog-IAP-JWT-Assertion`. The value of the header is a cryptographically signed object that also contains the user identity data.

Your application can verify the digital signature and use the data provided in this object to be certain that it was provided by IAP without alteration.

For an example on how to verify the digital signature check this [repo](https://github.com/googlecodelabs/user-authentication-with-iap/blob/master/3-HelloVerifiedUser/auth.py)

Knowing all of this, when do you think it is best to use IAP, what is its pitfall, would love to read your opinions in the comment section.

Coming up next is a demo on setting up IAPs on Google Cloud 😉.
Products Quantity Counter Using HTML CSS & JavaScript
Tags: html, css, javascript, beginners
Published: 2021-01-24 15:08:31

Hello, guys in this <a href="https://blog.stackfindover.com/category/tutorials/" rel="dofollow">tutorial</a> we will create a Products Quantity Counter Using HTML CSS & JavaScript.

First, we need to create two files **index.html** and **style.css** then we need to do code for it.


###Products Quantity Counter Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Products Quantity Counter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="counter">
      <span class="down" onClick='decreaseCount(event, this)'>-</span>
      <input type="text" value="1">
      <span class="up"  onClick='increaseCount(event, this)'>+</span>
    </div>
    <script type="text/javascript">
      function increaseCount(a, b) {
        var input = b.previousElementSibling;
        var value = parseInt(input.value, 10); 
        value = isNaN(value)? 0 : value;
        value ++;
        input.value = value;
      }
      function decreaseCount(a, b) {
        var input = b.nextElementSibling;
        var value = parseInt(input.value, 10); 
        if (value > 1) {
          value = isNaN(value)? 0 : value;
          value --;
          input.value = value;
        }
      }
    </script>
  </body>
</html>
```
###Products Quantity Counter Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.
```css
* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.counter {
    width: 150px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.counter input {
    width: 50px;
    border: 0;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    background: #0052cc;
    color: #fff;
    appearance: none;
    outline: 0;
}
.counter span {
    display: block;
    font-size: 25px;
    padding: 0 10px;
    cursor: pointer;
    color: #0052cc;
    user-select: none;
}
```
###Products Quantity Counter Video Output:###
{% youtube BrwEhCT1YJM %}

###Products Quantity Counter CodePen Output:###
{% codepen https://codepen.io/stack-findover/pen/OJReWrK default-tab=js,result %}
What is Function Binding? 💫
Tags: codenewbie, javascript, webdev, beginners
Published: 2021-01-24 15:00:30

When working with a regular function in JavaScript (not an arrow function), you'll find that when using the `this` context, you're referring to the object that invoked the function. 

Sometimes, this ends up creating different results than what you'd expect.

Take the following example:
```javascript
const Bob = {
  temperature: "45 degrees"
  sayNews() {
  console.log('It is ${this.temperature} outside!')
  }
}

setTimeout(Bob.sayNews, 1000) // It is undefined outside!
```

You'll notice that we get ***undefined*** for the `temperature` variable. That's because when we refer to `this` in our setTimeout call, we are actually referring to the `Window Object` itself, and ***NOT*** `Bob`.

***Are you confused yet?***
So let's break this down.
1. setTimeout called on Bob
2. Inside Bob, in the sayNews function, `this` was referred to.
3. Since setTimeout is a [Window Object](https://www.w3schools.com/jsref/obj_window.asp) method, Javascript thinks that `this` is referring to the `Window`.

***To fix this, we could do one of two things***
Use `.bind` to specifically bind an object to a function
```javascript
setTimeout(Bob.sayNews.bind(Bob) // It is 45 degrees outside!
``` 
Use arrow functions, introduced in [ES6](https://www.w3schools.com/Js/js_es6.asp)
```javascript
setTimeout(() => Dug.sayHi(), 1000) // It is 45 degrees outside!
``` 

I hope this was helpful. Thanks for reading :)

#### Resources
* [MDN, Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
* [Medium article](https://medium.com/swlh/javascript-arrow-functions-es6-9f2e0d289826)

Photo by [Markus Spiske](https://www.pexels.com/@markusspiske?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from Pexels
LocalStorage For State Management
Tags: react
Published: 2021-01-24 14:30:08

Check out my project on [Github](https://github.com/ahgsql/local-state-for-react "Local State")

Sample Todo App made with this package: [TodoList with LSFR](https://github.com/ahgsql/todolist-lsfr "Todo List") 

# localState for React

Get Advance of LocalStorage which using by all modern browsers.

The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.
The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.


> localStorage for State Management

[![NPM](https://img.shields.io/npm/v/local-state-for-react.svg)](https://www.npmjs.com/package/local-state-for-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install  local-state-for-react
```

or

```bash
yarn add  local-state-for-react
```

## Methods

#### Determining Default State

##### freshState(initial)

Initializes state with default values.
This function needs to be called outside of component function.

```jsx
freshState({ input1: 1 })
```

&nbsp;

#### Writing To State

##### writeState(path,value)

Writes state value on given path
&nbsp;

#### Getting Data From State

##### readState(path)

Returns state value

```javascript
readState('stateName').someCustomProperty
```

#### Listening For Changes

System uses event dispatchers and React reducers for manually forcing re-rendering component which uses that state value.

So every component needs to useSubscribe method.
This method also returns single or multiple objects with, their values.

##### useSubscribe(...fields)

Listens for changes and Returns state values

```javascript
const input1 = useSubscribe('input1')
```

or

```javascript
const { name, email } = useSubscribe('name', 'email')
```

## Usage

```jsx
import { writeState, freshState, useSubscribe } from 'local-state-for-react'
freshState({ input1: 1 })
const App = () => {
  const input1 = useSubscribe('input1')
  return (
    <div>
      <h2>Hi From Local-State Package!</h2>
      <h1>{input1}</h1>
      <button
        onClick={() => {
          writeState('input1', input1 + 1)
        }}
      >
        Click To Change State!
      </button>
    </div>
  )
}

export default App
```

## License

MIT © [ahgsql](https://github.com/ahgsql)
Observability and Security of Fargate Serverless Deployments
Tags: security, serverless, aws, kubernetes
Published: 2021-01-24 14:29:11

While serverless platforms such as fargate are gaining popularity, securing them is a big challenge. In this article, we outline some of the issues in monitoring and securing fargate deployments.

https://medium.com/deepfence-cloud-native-security/observability-and-security-of-fargate-serverless-deployments-c9529a74b044
💥5 Amazing CSS-HTML Buttons
Tags: html, css, buttons
Published: 2021-01-24 14:17:51

Hello 👋🏻.

Here is 5 amazing buttons with just HTML and CSS
#### 1.
{% codepen https://codepen.io/geekalaa/pen/VwKJLBW default-tab=css,result %}

#### 2.
{% codepen https://codepen.io/geekalaa/pen/ExgBjeP default-tab=css,result %}

#### 3.
{% codepen https://codepen.io/geekalaa/pen/yLadNxd default-tab=css,result %}

#### 4.
{% codepen https://codepen.io/geekalaa/pen/KKgjpGY default-tab=css,result %}

#### 5.
{% codepen https://codepen.io/geekalaa/pen/rNMEVoV default-tab=css,result %}