teleren/devto huggingface dataset:
Create A Loading Animation Button || CSS for beginners
Tags: html, css, animation, webdev
Published: 2021-04-18 15:17:55

{% youtube 9RH_oBhMk_I %}

Let's start by changing the coding language to HTML. Adding the HTML template, and adding a title. I will name this Loading Animation Tutorial. Let's add a button with some text in it. Now let's go to fontawesome.com (the link is in the description) and search for a loading icon. I am gonna choose this icon. If you want you can scroll down and see other icons. Copy the HTML tag, and past it in your HTML file. Save it as HTML.html. Now let's see how it looks. But where is the icon? To can show a font awesome icon you need at the first to make an account and go to kits. And copy the code that they are giving you. After this paste it into the header. Now if we save and reload the page you can see the icon. Now let's start designing. Change the language to CSS. And let's start by removing the default margins. And now let's go to google fonts and choose a font. I will choose Roboto. You can choose whatever font you want. Let's copy this and go to the HTML file and paste this in the header section. Now let's go back to google fonts and copy the font family, and past it in the CSS file. Save this as CSS.css. Now let's add a source tag to our HTML file. Copy the link of the files and paste it in the src section. also, add a link tag with the name of the CSS file. So, now if we refresh the page the margins disappeared. Now let's style the button. I am gonna add 10-pixel padding, set the border and the outline to none. Make the background white. Make the border-radius 10px, the width 200 pixels, and the height 80. I will also add a box shadow of 20px blue. And also position, absolute. Save it and refresh the page. You see that now our button is having a design. But now let's make it to be in the center: top, fifty%, left fifty%. transform, translate -50%, -50%. Font size 25 pixels and cursor pointer. Let's see how it looks. type animation spin 25 linear. To add the animation we need to type keyframes, spin because this is the name of the animation. Zero%, tranform roteate 0deg. And now 100%, transform, rotate three hundred sixty deg. Let's save and refresh the page. Oh! I forgot! We need to make just the icon to be animated! So let's copy the animation. Write fas. If you are using another icon look there to see if it is different. Change from 5 to s and add infinite. Now if we save and refresh, you can see that is working! Thanks for watching guys! Don't forget to Like, Share, and Subscribe! See you next time!
Font Awesome: https://fontawesome.com/
Google Fonts: https://fonts.google.com/
Mi configuración de Neovim.
Published: 2021-04-18 15:15:09

![My Config](https://user-images.githubusercontent.com/77551844/115131396-dcfeec80-9fc5-11eb-8bb7-ae7b4a57296a.jpg)

El Github del repositorio esta [aquí](https://github.com/FrancisCode13/NeoVim-Config)

# NeoVim-Config

> Antes de empezar me gustaría aclarar que casi toda la configuración esta hecha por un dev llamado Teo, todos los créditos son para él, y te dejo su Github [aquí](https://github.com/TeoDev1611). Mas que nada lo tengo en este github como copia de respaldo por si le pasa algo a mi Vim.

## Inicio
Esta configuración es para Neovim (Fork de Vim) tiene Plugins bastante útiles, un tema muy bonito para mi gusto (siempre puedes cambiarselo) atajos bastante útiles, una terminal integrada, entre otros.

![image](https://user-images.githubusercontent.com/77551844/115130586-d751d880-9fbe-11eb-9f7b-e0b66d68c1a6.png)

## Atajos Básicos

> Cabe aclarar que `<leader>` es la tecla espacio en Windows 10.


1.- ``<leader>w``   Guardar el archivo
![image](https://user-images.githubusercontent.com/77551844/115130631-30217100-9fbf-11eb-8279-7acb83a96739.png)
3.- ``<leader>q``   Salir del archivo
![image](https://user-images.githubusercontent.com/77551844/115130637-3c0d3300-9fbf-11eb-95e2-a857172bcb7c.png)
5.- ``<leader>wq``  Guardar y salir del archivo
![image](https://user-images.githubusercontent.com/77551844/115130655-6e1e9500-9fbf-11eb-9bf1-99156af6eee5.png)
7.- ``<leader>so``  Actualizar
![image](https://user-images.githubusercontent.com/77551844/115130667-7c6cb100-9fbf-11eb-94fd-9ad6ecedfa2c.png)
9.- ``<leader>pi``  Instalar los plugins
![image](https://user-images.githubusercontent.com/77551844/115130674-87274600-9fbf-11eb-8efb-44133ee2a824.png)
11.- ``<leader>n``   CocExplorer Lateral
![image](https://user-images.githubusercontent.com/77551844/115130680-93ab9e80-9fbf-11eb-9600-3160e78c756f.png)
13.- ``<leader>p``  CocExplorer Flotante
![image](https://user-images.githubusercontent.com/77551844/115130691-9d350680-9fbf-11eb-98a2-c5d32962862f.png)
14.- ``<leader>t``  Floaterm
![image](https://user-images.githubusercontent.com/77551844/115130709-bd64c580-9fbf-11eb-8ce6-844496acb45d.png)


Entre otros comandos.

## Movimiento en Vim

Para moverte en Vim debes utilizar las teclas *L,K,J y H*.

```
J = Abajo
K = Arriba
H = Izquierda
L = Derecha
```

## Uso de esta configuración

1. Clona este repositorio
2. Pegalo en tu carpeta donde esta tu nvim
3. Ejecuta :PlugInstall
4. Actualiza con :so$ o simplemente sal de nvim o y vuelve a entrar




Créditos a Teo por la mayoría de la configuración 😄
Migrating from NPM to Yarn
Tags: javascript, react, npm, angular
Published: 2021-04-18 15:10:38

---
title: Migrating from NPM to Yarn
published: true
description: Migrate your JS project from NPM to Yarn with one command
tags: javascript, react, npm, angular
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/088ly4e72jy8s3rukhnr.png
---

Say you have a project that uses NPM for dependency management. How would you convert that project to use Yarn?

For the longest time the way I did it was just deleting the `package-lock.json` and running `yarn` to generate a new lockfile. While this works well on small projects, dependency pinning is there for a reason and trying to do this on a larger project may land you in hot water. So how do you do it safely? It's simple:

```

yarn import

```

That's it! When you run `yarn import`, yarn will read your `package-lock.json` and generate a `yarn.lock` file based on it. It's a much safer way to migrate from one package manager to the other.

If you enjoyed this post check out some of my [other writing](https://sunnygolovine.com/blog)
What's the .to in dev.to?
Tags: help
Published: 2021-04-18 15:05:31

I always wonder what the .to is in dev.to.

Is it:

* _to_ empower community? 
* dev(elop) _to_ somewhere (some aim)?

Edit: I found the sticker which says dev.together:

![Screen Shot 2021-04-27 at 2.36.09 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8klbaalhyohuhwtkopk.png)
Weekly Challenge 108
Tags: perl, perlweeklychallenge, weeklychallenge
Published: 2021-04-18 14:47:53

[Tasks](https://perlweeklychallenge.org/blog/perl-weekly-challenge-108/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-108/sgreen)

# TASK #1 › Locate Memory

## Task

Write a script to declare a variable or constant and print it’s[sic] location in the memory.

## My solution

One good thing about Perl (and most modern languages) is that you don't really need to worry about memory management. Perl will automatically reclaim memory when a variable is no longer used.

For this task, I take the reference to the variable (for example `SCALAR(0x559184ba5890)` and use regular expression to display the location (the bit between the parenthesis).

## Minified

In 22 characters, this can be minified to the below example.
```
» perl -E 'say\$a=~/(0x[0-9a-f]+)/'
0x555668d2a3f8
```

## Example

```
» ./ch-1.pl 
0x555668d2a3f8
```

# TASK #2 › Bell Numbers

## Task

Write a script to display top 10 [Bell Numbers](https://en.wikipedia.org/wiki/Bell_number).

## My solution

In tackling this task, the [animated gif](https://en.wikipedia.org/wiki/Bell_number#/media/File:BellNumberAnimated.gif) is very helpful. I use the `@bell` array to reproduce this. I start by seeding the table with a single value, and then use the copy and add functions to generate the subsequent values. Finally I use a foreach loop to display the last number in each row to display the list of bell numbers.

## Example

```
» ./ch-2.pl
1
2
5
15
52
203
877
4140
21147
115975
```
Dogecoin
Tags: cryptocurrency, intro
Published: 2021-04-18 14:45:46

## What is Dodgecoin and who created it ?

Dogecoin is a cryptocurrency invented by  Billy Markus and Jackson Palmer .  It wasn’t designed to be used as a form of payment but as a mere joke . 

## What is Doge ?

Doge is a meme which portrays a Shiba Inu dog alongside nonsensical phrases in multicolored, Comic Sans-font text.

![image](https://user-images.githubusercontent.com/58665834/115149766-34af5d80-a083-11eb-9ecb-4fcf7122be6d.jpeg)


## Why has the Dogecoin become popular ?
   
The coin has many influential celebrity supporters such as Carole Baskin , Gene Simmons , Kai Greene , Mia Khalifa , Snoop Dogg , Lil Yachty and the most notable , Elon Musk .

Elon Musk came in contact with the coin back in 2018 and used to meme about the coin on his Twitter account . Due to this more and more people were directed to the coin which helped boost the coins price by even 800% , the percentages seemed to increase every time Elon Musk talks/memes on the coin . ELon’s ability to dramatically influence the crypto market through social media posts became known as the “Elon effect.”

> In short, it seems the selfless community, the light-hearted origin of the project and the real-world utility were the biggest contributors to dogecoin’s early success in the crypto market. Over the last few years, however, dogecoin has really become a kind of cryptocurrency avatar for meme culture, fueled by online communities and support from internet personalities like Elon Musk. As that culture has risen in influence, DOGE has risen in value – essentially taking on a life of its own that its creators never intended.
Scilla v1.0 released!
Tags: github, go, security
Published: 2021-04-18 14:44:41

Just released the first version of Scilla.
You can find it here: https://github.com/edoardottt/scilla.
It's a CLI-based information gathering tool.
It performs enumeration on DNS, subdomains, directories, files and ports.
It's built with Go leveraging its go routines.

Let me know if you like it!
Understanding Kubernetes in a visual way (in 🎥 video): part 10 – Kubectl Tips
Tags: kubernetes, devops, docker, beginners
Published: 2021-04-18 14:39:40

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 10 – Kubectl Tips
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/cdfm4mp1hi2ob75cs5ar.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).

The new episode is focused on tips about the CLI Kubectl.

{% youtube RnWrgvZJlWk %}

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 :-).
Creating a Windows Project in Visual Studio [Windows PE Internals]
Tags: cybersecurity, security
Published: 2021-04-18 14:29:59

Just a very short blog post on how to create a windows api project in visual studio. Would be referencing this for other articles that I post.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jxm1adnmaveq7r57mub.png)

Ensure Project template is of type `C++`, `Windows` and `Console`.

For now, just start with an `Empty Project`.


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

Give it a project name. I called it as `WindowsApiProject`.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyyraj33sou8ar5u4po9.png)
 
Next right click your project, click `Properties`.

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

Under `Configuration Properties`->`Linker`->`System`, set the `subsystem` to `Windows`.

Hit `Apply` and `Ok`.

Now right click your `Source` folder, and create a new `.cpp` file.

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

Now lets create a main function.

In Windows Api, we create it with `WinMain` function instead of `main`.

```cpp
#include <Windows.h>

int  WinMain(
	 HINSTANCE hInstance,
	 HINSTANCE hPrevInstance,
	 LPSTR     lpCmdLine,
	 int       nCmdShow
)
{
	MessageBoxA(0, "Hello World!", "Bye", 0);

	return 0;
}
```

And we have our hello world message box.

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


I learnt how to create a simple hello world windows project. I realized the `main` definition was different then the regular c programs, we should use `WinMain` instead.

I also learnt how to configure `Visual Studio` to target the Windows subsystem. 


# Next
[Getting a Handle to a Dynamically Linked Library](https://dev.to/wireless90/getmodulehandlea-windows-pe-internals-1b0l)
#7 of 100DaysOfCode
Tags: react, 100daysofcode, nextjs, javascript
Published: 2021-04-18 14:25:29

Seventh Day,
😄 Today I learned some really nice features that React provides and I learned how to include Tailwind CSS in a Next.js application. 

Anyway here are my today's learnings:
* **Render props method** 
  In the continuation of the [HOC](https://dev.to/icecoffee/6-of-100daysofcode-47ge) that I learned yesterday, today I learned more about the render prop method that can be used to optimize our code.
  + It's a pretty long concept so here is a gist:
    A component with a  render prop takes a function that returns a React element and calls it instead of implementing its own rendering logic.
  + In layman's terms 
    Think of render props as a component that surrounds our existing component and provides our existing component property and values it can use.
* **Context and useContext() hooks**
  + This API was designed to share data across the multiple layers of child components without using props drilling.
  + This API contains a Provider to which we can pass a value that can be accessed by all its child components.
  + we also need a reference to this Context that we created that we need to pass in useContext() as an argument to access the values given to the provider.
* **Components styling**
  + I haven't used it by myself at all till now but I learned how to include Tailwind CSS in a Next js project.
* I learned about "dev dependencies" inside the package.json file.
* *@apply* directive offered by Tailwind CSS to combine lots of different small classes to make a big usable class.

You can check out HOC (Higher Order Components) in my yesterday's post if you wanna know more.😄
{% post https://dev.to/icecoffee/6-of-100daysofcode-47ge %}

If anyone would like to suggest me something since I'm new to React and Next.js or if there are some mistakes in the post, please let me know.
I'll really appreciate that.

Thanks for reading it.😊
Have a beautiful day.🌼
Publishing a blog using ReactJs , NodeJs and mongoDB
Tags: react, node, mongodb, webdev
Published: 2021-04-18 13:53:38

I recently created a blog using react Js and Mongo dB. It was a supper fun to do as I wanted my own blog website. 

You can visit my blog here : https://irfanwritess.web.app

I implemented a subscription and view system too. 

Currently I'm looking for developing a content management system. What would be your favorite stack to do so? Leave it in the comment section! 

Every feedbacks appreciated!
Refactoring or Retiring Can be a A Feature
Tags: bias, productdevelopment, refactoring
Published: 2022-02-05 13:28:49

---
title: Refactoring or Retiring Can be a A Feature
published: true
date: 2021-04-18 13:27:34 UTC
tags: bias,productdevelopment,refactoring
canonical_url: https://mahmutcanga.com/2021/04/18/refactoring-or-retiring-can-be-a-a-feature/
---

## [![](https://sufidev.files.wordpress.com/2021/04/d41586-021-00592-0_18964722.png)](https://www.nature.com/articles/d41586-021-00592-0)

A really good article from Nature lays out why the bias towards additive solutions might be further compounded by the fact that subtractive solutions are also less likely to be appreciated.

In product development, friction points around refactoring and retiring features are widely popular in discussions among the engineers in any organisation. However, the bias towards additive solutions as found out in the article can be a strong root cause.

When business expects all the charts going top right corner, we may be relating this demand to additive solutions unconsciously. I have not seen any success stories at large mentioning why retiring features made their overall KPIs better.

After reading this article, I’ll try to challenge my bias towards additive solutions. It is going to be harder to come up with ideas subtracting by nature.  However, in the grand schema of leaving a better legacy behind us and sustainability, I don’t see myself being challenged with counter arguments.

> People tend to solve problems by adding features.

Source: [Adding is favoured over subtracting in problem solving](https://www.nature.com/articles/d41586-021-00592-0)
Angular ElasticSearch example – Get All Documents in Index
Tags: angular, elasticsearch, document
Published: 2021-04-18 11:04:08

https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-get-all-documents-in-index

Angular ElasticSearch example – Get All Documents in Index


In the <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-add-document-to-index">post</a>, we had known how to add Document to Index. This tutorial shows you way to get all Documents and show them.

Related Post:
- <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-quick-start-how-to-add-elasticsearch-js">Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js</a>
- <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-how-to-create-an-index">Angular 4 ElasticSearch example – How to create an Index</a>
- <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-add-document-to-index">Angular 4 ElasticSearch example – Add Document to Index</a>

More Practice:
- <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-documents-elasticsearch-scroll-pagination">Angular 4 ElasticSearch example – Documents Pagination with Scroll</a>
- <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-simple-full-text-search">Angular 4 ElasticSearch example – simple Full Text Search</a>

<!--more-->

Elasticsearch Tutorials:
- <a href="https://grokonez.com/elasticsearch">Elasticsearch Overview</a>
- <a href="https://grokonez.com/elasticsearch/elasticsearch-filter-vs-query-context-overview">ElasticSearch Filter vs Query</a>
- <a href="https://grokonez.com/elasticsearch/elasticsearch-full-text-query-basic-queries">ElasticSearch Full Text Queries – Basic</a>

<h2>I. How to</h2>
<h3>1. Add ElasticSearch to Angular 4 Project</h3>
Please visit <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-quick-start-how-to-add-elasticsearch-js">Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js</a> for details.

With the post, you will know how to:
- Install ElasticSearch
- Add ElasticSearch to Angular 4 Project
- Use it in the project
<h3>2. Create Index & Check Connection</h3>
Please visit <a href="https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-how-to-create-an-index">Angular 4 ElasticSearch example – How to create an Index</a> for details.
<h3>3. Get All Documents in Index</h3>
<h4>3.1 ElasticSearch Service</h4>


https://grokonez.com/frontend/angular/angular-4-elasticsearch-example-get-all-documents-in-index

Angular ElasticSearch example – Get All Documents in Index
Cómo crear un spinner loader con CSS
Tags: css
Published: 2021-04-18 12:42:26

Un spinner loader, o donut spinner, es un elemento muy típico en nuestras aplicaciones ya que le **indica al usuario que un contenido se está cargando.**

Vamos a ver **cómo puedes crear el tuyo con HTML y CSS** en muy pocas líneas de código. Si quieres, puedes ver el vídeo donde lo hago paso a paso:
{% youtube 8nm9WPptL0c %}

## ¿Cómo queda el spinner?
Si quieres ver el resultado final, te dejo aquí un Codepen para que veas cómo quedaría nuestro spinner: 
{% codepen https://codepen.io/miduga/pen/RwGxpyJ %}


## Creando el spinner con HTML y CSS desde cero

Lo primero que tenemos que hacer es el HTML de nuestro spinner:

```html
<div class='spinner'></div>
```

Y a partir de aquí estilamos esta clase con CSS. ¡Vamos por partes!

Primero le añadimos un borde, con **4 píxeles de borde** y lo hacemos con un color negro pero con mucha transparencia. Pero hacemos que uno de los lados no tenga color, que sea transparente. Y también hacemos que use el border-radius, para curvar este nuevo borde.

```css
.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  border-radius: 50%;
}
```

Para las medidas, usamos una forma cuadrada con un **alto y ancho de 36px.**

```css
.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
}
```

Y finalmente vamos a añadir nuestra animación. Vamos a llamar a esta animación `spin`, que dure un segundo y el tipo de animación sea `linear` que es lineal. Puedes usar la que quieras en este punto.

Lo importante es que pongas que se tiene que hacer de forma `infinite`, para que se haga repetidas veces la animación.

```css
.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  
  animation: spin 1s linear infinite;
}
```

Ahora creamos la animación usando `@keyframes` de forma que empezamos en un punto (el punto de inicio es 0%) y, al final, habremos rotado el spinner completamente (100%):

```css
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
```

¡Y ya lo tenemos! Puedes ver el **resultado final** en este enlace: https://codepen.io/miduga/pen/RwGxpyJ?editors=1100

Y si prefieres verlo en vídeo, lo tienes aquí:
{% youtube 8nm9WPptL0c %}
SQL to Eloquent Laravel Converter Tool 
Published: 2021-04-18 12:35:15

So last week I've been looking for a tool that can convert my raw SQL Statements into a Laravel Eloquent Query Builder but to no avail. So I decided to make one myself.

SQLtoEloquent is an app that lets you convert SQL Statements into Laravel Eloquent Query Builders.

Feel free to use it here:
https://jjlabajo.github.io/SQLtoEloquent/

I've set a couple of rules for accuracy.

Rules:  
1. Use parentheses when using BETWEEN operator.  	
e.g.  	SELECT * FROM t WHERE (column_name BETWEEN value1 AND value2); 
2. When using ALIAS, always use the AS linking verb.  	
e.g.  	SELECT uid AS `user_id`; 
3. Always use backticks (`) for aliases.