teleren/devto huggingface dataset:
awesome Css Loader in 2 min!
Tags: css, animatin, loading, cssanimatin
Published: 2021-05-27 22:12:02

#Hello
If you have been working with CSS before you may have trouble with animation,transitions,etc...
Maybe in this post you will change your mind!
## how to create an awesome loader easily
1. Create ``index.html`` file
```
<!DOCTYPE html>
<html>
<head>
<title>Loader!</title>
</head>
<body>
<div class="loader" >
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
```
# step 2: add CSS to your HTML
```
<style type="text/css">
body {
background:#000;
}

.loader {
position:absolute;
width:100px;
height:100px;
transform:translate(-50%, -50%);
top:50%;
left:50%;
border-radius:50%;
animation:rotate 1.3s ease infinite;
}




.loader span {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100%;
animation:rotate 1.7s ease infinite;
}

.loader span::before {
content:"";
position:absolute;
top:50%;
left:100%;
transform:translate(-50%, -50%);
width:4px;
border-radius:50%;
height:15px;
background:#38f860;
}

.loader span:nth-child(1) {
animation-delay:0.1s;
}
.loader span:nth-child(2) {
animation-delay:0.2s;
}
.loader span:nth-child(3) {
animation-delay:0.3s;
}
.loader span:nth-child(4) {
animation-delay:0.4s;
}
.loader span:nth-child(5) {
animation-delay:0.5s;
}

@keyframes rotate {

0%{
transform:translate(-50%, -50%) rotate(0deg);
filter:hue-rotate(0deg);
}
50% {
filter:hue-rotate(120deg);
}
100%{
transform:translate(-50%, -50%) rotate(360deg);
filter:hue-rotate(0deg);
}
}







</style>
```
###And that's it run the HTML file in the browser to see an awesome Loader
Day 376 : Days Fly By
Tags: hiphop, code, coding, lifelongdev
Published: 2021-05-27 21:54:12

_liner notes_:
- Professional : How is it Thursday?!? The days fly by. Had a team meeting. Got to demo the application I made using a new SDK. Then I got to help out with a workshop. Pretty eventful day.

- Personal : Got the notification part of my site working. I can pull a list of upcoming dates from the backend, display the list on the front end with subscribe buttons. When a user clicks an events subscribe button, it sends a message to the back end to sign the user up to get a notification for that date and time when we go live. The button turns into unsubscribe and the same will happen when it's clicked. There's also a button that will sign a user up to get all notifications. From what I can see, there is now way to tell if a user had signed up for a notification previously. So I stored the ids for upcoming events that the user signs up for into localStorage. The next time they come to the page, it will show their current state for each date. I was able to send a test notification from the Firebase console and it successfully popped up on my machine. Not bad. There's so things to fine tune, but it worked!

![View from a mountain into the city of Celano, Abruzzi, Italy with many buildings and other mountains in the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj1klocq4jowy5gm9ilo.jpg)

Since it's already Thursday, I really need to get the radio show put together. Plan is to style the notification site to look like the other parts of the project and spin up a starter project for the dashboard. I'm thinking I'll go with a Svelte application. After I get that set up, work on the radio show. Wish me luck. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube viTkmkZ6NlA %}
Listening to OS signals in Golang
Tags: linux, go, backend, webdev
Published: 2021-05-27 22:07:13

No server, application, script or binary stuff is something isolated from the rest of the computer. Being aware of what is happening behind the scenes is useful, because lot of things can happen.

For this reason, Golang offers a simple way to manage this, without any black magic.

Lets suppose we have just a simple main function that starts a simple http server.

```go
package main

func main{
	StartServer()
}

```

Maybe this works fine, but this is not aware of anything about the underlying OS. This means that, if something signals the main process to stop, this will just stop or crash without the possibility of gracefully shut down the server and it’s child gorutines.

Imagine now that we could pass a a context with cancellation this function as an argument like `StartServer(ctx)`.
Now imagine that we could start a new routine that is aware of any signal of our interest and then cancel this context.

Lets check out the following piece of code and then we will unravel it.

```go
package main

import (
	"context"
	"log"
	"os"
	"os/signal"
)

func listenAndCancel(c chan os.Signal, cancel context.CancelFunc) {
	oscall := <-c
	log.Printf("system call:%+v", oscall)
	cancel()
}

func main(){

	// Making a channel and ctx to comunicate signInt to server
	c := make(chan os.Signal, 1)
	signal.Notify(c, os.Interrupt)
	ctx, cancel := context.WithCancel(context.Background())

	// Spawn a gorutine to cancel root context if signInt occurs
	go listenAndCancel(c, cancel)

	// Starting server with previous context
	StartServer(ctx)

}
```

First, try to focus on the main function. We start creating a channel with the built in `make` function. This give us a channel that accepts `os.Signals` and only can store one of them at a time.

Those signals are a type that Golgang provides in the `os` package and they represents operative system signals for the runtime.

Then, we have a super useful function: `signal.Notify`. Intuitively, we can thing that this function is waiting for any `os.Interrupt` and then pass it through the channel.

If we wanted to look more deep, we can [**check the documentation**](https://golang.org/pkg/os/signal/#Notify):

>“Notify causes package signal to relay incoming signals to c. If no signals are provided, all incoming signals will be relayed to c. Otherwise, just the provided signals will.”

So now, we have automated the way in which the runtime listents for interrupt signals, and then pass them to the channel.

Then, we create a context with cancellation. The context will go to `StartServer` as an argument, where it will be used to give context for any further request or gorutine; and the cancel part will go to the `listenAndCancel` function used as a gorutine.

What does this last function? Easy: it receives the channel and the cancel, then blocks until an interrupt signal comes out the channel. Then it cancel the context, making the server aware of this OS signaling.
Adding SASS to create-react-app
Tags: react, sass, css, scss
Published: 2021-05-27 21:59:08

![react & sass, by ijash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma9995xe8ot9k8kr3k67.png)
 
>Note: 
- Package `node-sass` are deprecated. See [node-sass npm page](https://www.npmjs.com/package/node-sass) and [sass blog](https://sass-lang.com/blog/libsass-is-deprecated)
- as per this post date, I use react version ^17.0.2.

# Installation

In new project, install `sass`.
```shell
npm i sass
```
# Importing SASS

1. Rename `App.css` to `App.scss`. Also `index.css` to `index.scss`.

2.  In `App.js` and `index.js` fix the import from css to scss. It will result:
```js
import "./index.scss";
```
# Using SASS
1. You can edit the scss either in `App.scss` or `index.scss`

for example, clear all code in `app.scss`, then add the following:
```scss
$mainColor: #525763; // assigning the variable

body {
  background-color: $mainColor; // consuming the variable
}


```
There you have it.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaf7kbfmq7gdb7ao70up.png)
Power up your Python programming
Tags: python, machinelearning, database, django
Published: 2021-05-27 21:54:45

![Humble Software Bundle: Python Development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mpb0judtkybs06h34h0.jpg)

👉 **[Humble Software Bundle: Python Development](https://www.humblebundle.com/software/python-development-software?partner=indiekings)** 🐍

Stop wondering where and how to apply your knowledge in Python programming, with software like Building Knowledge Graphs with Python, Understanding Machine Learning with Python, and Unit Testing with Python.

Your purchase of this bundle helps support Girls Who Code, which aims to support and increase the number of women in computer science by equipping young women with the necessary computing skills to pursue 21st century opportunities. You’ll also support Code.org, which aims to encourage people, particularly school students in the United States, to learn computer science. Finally, you’ll also be supporting a charity of your choice!

This bundle launched on May 27 at 11:00 am PST and lasts through June 17, 2021.

Pay what you want and support charity!
Armazenando state Terraform no Ceph
Published: 2021-05-27 19:30:26

---
title: Armazenando state Terraform no Ceph
published: true
description: Referência rápido sobre como armazenar o state Terraform no clone S3 Ceph usando o Backend S3
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Quem tem acesso a uma instância Ceph, pode usar o backend S3 para armazenar o state Terraform. A forma de uso é basicamente a mesma que a do próprio S3. Só precisamos lembrar de configurar os seguintes argumentos:

* `endpoint`
* `skip_credentials_validation`
* `force_path_style`

`endpoint` deve ser o nome do host que responde pela sua instância Ceph.

`skip_credentials_validation` controla se o backend valida credenciais contra o Amazon STS. Como você não vai conseguir que o STS valide suas credencias Ceph, vai precisar ser configurado para `true`.

`force_path_style` controla se o nome do bucket é especificado como subdomínio (`meubucket.meuceph.minhaintra`, por exemplo) ou como path (`meuceph.minhaintra/meubucket`, por exemplo). O estilo path é mais compatível com o Ceph, por isso este argumento também deve ser configurado para `true`

Aqui está uma versão para facilitar o copia-e-cola:

```hcl
terraform {
  backend "s3" {
    bucket      = "your-bucket-name"
    key         = "a-key"
    region      = "us-east-1"
    endpoint    = "hostname.for.the.ceph.instance"
    access_key  = "your-access-key"
    secret_key  = "your-secret-key"

    skip_credentials_validation = true
    force_path_style            = true
  }
}
```
Neat Linux CLI tools 
Tags: linux, codenewbie
Published: 2021-05-27 21:41:31

These are some command line tools for Linux. All these tools have one thing in common, they all use the Linux Command Line Interface (CLI).

These tools are mainly useful for developers and sysadmins who use the linux shell on a daily basis.

If you are new to the command line, I recommend [this course](https://www.practicelinux.com/)


## ranger

[Ranger](https://github.com/ranger/ranger) is a console file manager for the X Window System / Wayland. It lets you browse your file system using just the cursor keys. It's great for viewing images too, pressing the right arrow on an image shows it.

![ranger file manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2czyqlqi1s60j5h6bmyr.png)

## ncdu

[ncdu](https://dev.yorhel.nl/ncdu) is a disk usage analyzer just like du. But ncdu has a unique approach to this problem of disk usage.

ncdu is a disk analyzer for the command line. It scans your home directory and shows you how much space each directory takes.

unlike du, it uses an ncurses interface.

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

## lynis

[Lynis](https://cisofy.com/lynis/) is an open source security auditing tool that tests the security defenses of Unix-based systems. 

It scans the system locally or remotely and gives a detailed report on the system’s security, allowing you to well-informed decisions for system hardening.

Lynis is a security tool designed to test common system security. This includes controls, policies and procedures as well as the actual security mechanisms of the operating system itself. It helps you to answer those questions and gives you recommendations how to improve overall security of your systems.

![lynis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93f9toon6ev8pyh6u34l.png)
Return Largest Numbers in Arrays
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-27 21:39:54

* Let's return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.
* Remember, you can iterate through an array with a simple for loop, and access each member with array syntax `arr[i]`.
```
function largestOfFour(arr) {
  return arr;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
```
*Hints:
-You will get an array that contains sub arrays of numbers and you need to return an array with the largest number from each of the sub arrays. You will need to keep track of the array with the answer and the largest number of each sub-array.
-You can work with multidimensional arrays by `Array[Index][SubIndex]`
-Pay close attention to the timing of the storing of variables when working with loops
* Answer:
```
function largestOfFour(arr) {
let largestArr = [];
for (let i = 0; i < arr.length; i ++) {
  let tempLarge = arr[i][0];
  for (let j = 0; j < arr[i].length; j++) {
    let num = arr[i][j];
    if (num >= tempLarge) {
      tempLarge = num
    }
  }
  largestArr.push(tempLarge)
}
  return largestArr;
}
```
```
console.log(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])); // will display [5, 27, 39, 1001]
```
TinDog Javascript
Tags: javascript, rails, ruby, codequality
Published: 2021-05-27 21:36:21

#Intro
For this project, I decided to go all out with a Tinder replica for Dogs, and let me tell you it had to be one of the most fun but stressful moments of my life. To start I started by running `rails new tinDog --API --database=postgresql` to get started. for this project, I decided to have a `has_many` relationship with likes so that way I'm able to show a user all of their profiles/cards they've liked. I did also think of doing a matching mechanic but I decided to save that for another day. In this project, one of the biggest challenges I faced was struggling to get user's images to show and retrieve from their computer. the way I overcame this issue is instead of trying to rush because images weren't being pushed out I just had users be able to upload image URLs and display them in their feed. 

## What I learned
One of the things I took from this project is the number of things you can do by manipulating the DOM and creating It the way you envision it I believe that you can 100% create a full app by just using JS and rails and make it an amazing app itself.

##If I had a chance to go back
if I had a chance to go back and re-do this project I would tell myself to take it easy and not overcomplicate things like getting stuck trying to use `gem 'active-storage'` and making it all perfect.

#Conclusion 
Furthermore, I am beyond happy I'm one step closer to becoming a full-stack software engineer.
Conociendo Sass
Tags: sass, devweb, frontend, styles
Published: 2021-05-27 21:00:36

#<center>Aprendiendo Sass</center>
<br><br>




<br>
<center><img src="https://cdn.worldvectorlogo.com/logos/sass-1.svg" height="10px"></center>
<br>
<br>


##<center> Conociendo Sass </center>

Sass es un preprocesador de CSS inicialmente diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum.​​
El cual nos permite usar caracteristicas presentes en lenguajes de programación, como Variables, Funciones, etc.

<br>
<br>

## <center>Instalación </center>

<br>
Hace un tiempo la instalación de Sass era bastante complicada...

...¡Pero ya no! Sass se ha vuelto muy sencillo de instalar.

<br>

>Nota: En esta guía obviamente utilizaremos un editor de código para llevar a la practica todo lo aprendido, en mi lugar utilizare [Visual Studio Code](https://code.visualstudio.com/) , pero eres libre de usar el que prefieras, ya sea [Sublime Text](https://www.sublimetext.com/) , [Atom](https://atom.io/) , etc.

<br>
<br>

###<center>Paso 1</center>
<br>
El primer paso será ir a nuestro editor de código, como ya mencioné anteriormente, usaré visual studio code, este paso es muy intuitivo, simplemente abrimos el editor y listo.

<br>
<br>
<center>

 ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd2ysckb0f1red8wu9v8.png)

 </center>

<br>

###<center>Paso 2</center>
<br>
El segundo paso constará en abrir crear una carpeta y abrirla en visual studio code.

<br>
<br>
<center>

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n8fzb2kfd0gaj7dqky0.png)
 
 </center>

<br>
Y una vez hecho eso simplemente arrastraremos la carpeta a nuestro editor de código.

<br>

Tendremos lo siguiente:

<br>
<br>
<center>

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p9gay4rzepyasdgavbj.png)
 
</center>

<br>

Daremos un click al icono de crear un archivo

<br>
<br>
<center>

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn1ogvdtdlmqybfgoz5q.png)
 
</center>

y lo llamaremos ``main.sass``

<br>
<br>
<center>

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srrx7iuz6lpynu9ddhtu.png)
 
 </center>

 <br>
 Ahora simplemente daremos click al archivo y ya podremos editarlo.

 <br>

<br>

###<center>Paso 3</center>

Luego de esto haremos la combinación de teclas ``Ctrl + Ñ``
Con esto se abrira una terminal integrada en nuestro editor

> Nota IMPORTANTISIMA: Tenemos que tener si o si instalado NodeJS para poder instalar sass, si no sabes donde instalarlo te lo dejo aqui https://nodejs.org/es/download/

<br>

Ahora simplemente (TENIENDO NODEJS INTALADO) pegamos el siguiente comando en la consola

```npm install -g sass```

<br>

Enhorabuena!! Ya tenemos Sass instalado

Muchas gracias por llegar hasta aqui!
Estos articulos me toman bastante tiempo para escribirlos y redactarlos, muchas gracias por leer!
Recuerda Seguirme!

https://linktr.ee/franciscode

<br>



<center>

<img src="https://franciscode.netlify.app/img/logo.png" height="300">

</center>
Top 5 DEV Comments of the Past Week
Tags: bestofdev
Published: 2021-05-27 20:25:08

---
title: Top 5 DEV Comments of the Past Week
published: true
description: 
tags: bestofdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvjh80kv1nr41sw6wxke.png
---

_This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag._


Sometimes it just takes encouragement from a friend and some low-pressure fun to remind us why we love coding. Keep us posted on your journey, @biffbaff64!

{% devcomment 1eknn %}

No [thread](https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l) on DEV would be complete without a mention of cats, @manuthecoder 😉 

 {% devcomment 1en99 %}


Nice [win](https://dev.to/devteam/what-was-your-win-this-week-3lce), @annaspies! Sounds like the team could use a long weekend!

{% devcomment 1ekof %}


I learned a ton from [this post](https://dev.to/codemouse92/six-things-you-thought-senior-devs-did-but-we-don-t-3k6e) and your comment, @aeiche! Thanks for sharing your perspective on being a team lead!

{% devcomment 1enf5 %} 

This tip feels applicable to both [AWS](https://dev.to/hellonehha/aws-services-must-for-front-end-developers-part-1-5g0d) and personal finance, @ponikar. 😁 

{% devcomment 1ek8g %}


See you next week for more great comments ✌
How CSS is parsed on the browser?
Tags: css, browser, webdev, html
Published: 2021-05-27 20:12:34

---
title: How CSS is parsed on the browser?
published: true
description: This is how CSS is parsed on the browser.
tags: css, browser, webdev, html
cover_image: https://pbs.twimg.com/media/E2PI8oKWYAAk44B?format=png&name=small
---
We all have used CSS to build beautiful and responsive webpages. But do you know:

How browser parses the CSS?
How CSS renders the style?
How layout of the page is decided?

In this post I will try to answer the above questions in a simple manner.

## CSS is parsed on the browser in 3 steps.

1. Resolve conflicting CSS declarations.
2. Process final computed CSS values.
3. Visual Formatting Model.

Here is a complete flow of these 3 steps.
![how css is parsed on the v=browser](https://pbs.twimg.com/media/E2PI8oKWYAAk44B?format=png&name=small)

Let's understand each step.

## 1 Resolve Conflicting CSS declarations.

- Different stylesheets are combined together.
- Resolving conflicts when more than one rule is applied to a certain element.

For ex: Which color to apply when defined twice for the same element.

Here Cascade & Specificity is at play.
![css-specificity](https://pbs.twimg.com/media/E2PLPGFXsAoeTT7?format=jpg&name=small)

## 2 Processing Values

All relative units (%, em, rem, vh, vw) are finally converted to absolute unit, pixels (px).

At this phase, all CSS values become computed values not the specified values.
![CSS relative value conversion to px](https://pbs.twimg.com/media/E2PRkJzXsAUzHnR?format=jpg&name=medium)

## 3 The visual formatting model.

This is the algorithm that calculates boxes & determines the layout of these boxes, for each element in the render tree, to determine the page's final layout.
![visual-formatting-model-css](https://pbs.twimg.com/media/E2PTmXoWEA0n-5k?format=png&name=900x900)

-------------------------

So, that's how CSS is parsed on the browser. 

If you enjoyed this post you will surely love the **[My weekly NewsLetter](https://swastikyadav.com/subscribe)**

Thanks a lot for reading.
Billgist Permissions Explained
Published: 2021-05-27 20:09:30

If you are concerned about unwittingly giving access to your AWS account then hopefully this article will help clarify your doubts about what permissions are being granted to Billgist.

When you [integrate your AWS account](https://billgist.com/aws-integration/setup) a CloudFormation stack is created with [this Billgist template](https://billgist.s3-us-west-2.amazonaws.com/billgist.template.json). Feel free to click on that Billgist template to go through it. 

If you inspected the template you would see that it creates an IAM role _with only_ AWS Cost Explorer permissions (that's the "ce:*" reference in the template) to the Billgist application.

You can see the role created by the Billgist and the policy attached to the role in the [AWS IAM roles in the AWS console](https://console.aws.amazon.com/iam/home#/roles).

Additionally, you can also see the created resources in the Resources tab of the CloudFormation console once you started integration process. 
![CloudFormation Resources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsxogrcwd4qvwe1dglkp.png)

By this time you must be wondering how can I validate all this by myself. AWS provides an interface to display the role, trusted relationships and the policies attached to the role. 

You can follow the steps below to see how. 

1. Navigate to [AWS roles](https://console.aws.amazon.com/iam/home#/roles) and search for the role start with "billgist*" or see the previous screenshot to get actual name of the role. Once you searched for the role click on it to see the details. 

2. "Permissions" tab will be selected by default and here you will be able to see the attached policies. Click on the policy and verify which service(s) access has been granted to the role.
![Policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rfv1at5qefrizb8p1i1.png)

3. In the "Trust relationship" tab you will be able to verify what are the trusted entities for the role. Make sure the trusted entity should be "825617374672" which is the Billgist AWS account
![Trusted entities](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx44nfyilnumotmwtlzm.png)

**Conclusion:**

Billgist does not require any permissions except the _read only_ Cost Explorer API. We recommended that you do not modify this policy and role by yourself.

If you want to revoke these permissions, [remove the integration](https://billgist.com/aws-integration) from Billgist and delete policy and role respectively.