teleren/devto huggingface dataset:
CSS Battle - #12 Wiggly Moustache
Tags: css, cssbattle
Published: 2021-02-05 12:39:30

**HTML**
```html
<div class="wrapper">
  <div class="c-1"></div>
  <div class="c-2"></div>
  <div class="c-3"></div>
</div>
```

**CSS**
```css
  body {
    margin: 0;
    background: #F5D6B4;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .wrapper {
    position: relative;
    width: 255px;
    height: 100px
  }
  
  .c-1 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
  }
  
  .c-1:after {
    content: '';
    width: 60px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }
  
  .c-1:before {
    content: '';
    width: 20px;
    height: 10px;
    background: #D86F45;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: -10px;
    transform: rotate(180deg);
  }
  
  .c-2 {
    width: 99px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 80px;
    top: 0;
  }
  
  .c-2:before {
    content: '';
    width: 55px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }
  
  .c-3 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
  }
  
  .c-3:after {
    content: '';
    width: 59px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 24px;
    bottom: 0;
  }
  
  .c-3:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
  	width: 17px;
    height: 10px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    background: #D86F45;
    transform: rotate(180deg);
  }
```
CSS Battle - #11 Eye of Sauron
Tags: css, cssbattle
Published: 2021-02-05 12:38:37

**HTML**
```html
<div class="sm-circle-1"></div>
<div class="bg-circle"></div>
<div class="sm-circle-2"></div>
```

**CSS**
```css
  body {
    background: #191210;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .sm-circle-1 {
    height: 50px;
    width: 100px;
    background: #ECA03D;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 92px;
    left: 41px;
  }
  
  .sm-circle-1:before {
    content: '';
    height: 30px;
    width: 60px;
    background: #191210;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 20px;
    left: 21px;
  }
  
  .sm-circle-2 {
    height: 50px;
    width: 100px;
    background: #ECA03D;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 142px;
    left: 243px;
    transform: rotate(180deg);
  }
  
  .sm-circle-2:before {
    content: '';
    height: 30px;
    width: 60px;
    background: #191210;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 20px;
    left: 21px;
  }
  
  .bg-circle {
    width: 140px;
    height: 140px;
    background: #ECA03D;
    border-radius: 50%;
    position: relative;
  }
  
  .bg-circle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background: #191210;
    border-radius: inherit;
  }
  
  .bg-circle:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    background: #84271C;
    border-radius: inherit;
  }
```
CSS Battle - #9 Tesseract
Tags: css, cssbattle
Published: 2021-02-05 12:37:25

**HTML**
```html
<div class="box-bg"></div>
<div class="square"></div>
<div class="square small"></div>
<div class="square circle"></div>
```

**CSS**
```css
  body {
    margin: 0;
    background: #222730;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .box-bg {
   	background: #4CAAB3;
    height: 150px;
    width: 100%;
  }
  
  .square {
    position: absolute;
    background: #222730;
    height: 250px;
    width: 250px;
    transform: rotate(45deg);
  }
  
  .small {
    background: #4CAAB3;
    height: 150px;
    width: 150px;
  }
  
  .circle {
    background: #393E46;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
```
CSS Battle - #8 Forking Crazy
Tags: css, cssbattle
Published: 2021-02-05 12:37:22

**HTML**
```html
<div class="handle"></div>
<div class="base"></div>
<div class="prong first"></div>
<div class="prong second down"></div>
<div class="prong third"></div>
<div class="prong fourth down"></div>
<div class="prong fifth"></div>
<div class="prong sixth down"></div>
<div class="prong seventh"></div>
```

**CSS**
```css
  body {
    margin: 0;
    background: #6592CF;
    position: relative;
  }
  
  .handle {
    position: absolute;
    bottom: 0;
    left: 48%;
    content: '';
    width: 20px;
    height: 55px;
    background: #060F55;
    margin: 0 auto;
  }
  .base {
    position: absolute;
    bottom: 50px;
    left: 33%;
    content: '';
    width: 140px;
    height: 95px;
    background: #060F55;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
  }
  .prong {
    position: absolute;
    bottom: 132px;
    content: '';
    width: 20px;
    height: 118px;
    background: #060F55;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }
  
  .first { left: 33%; }
  .second {left: calc(33% + 20px); }
  .third { left: calc(33% + 40px); }
  .fourth { left: calc(33% + 60px); }
  .fifth { left: calc(33% + 80px); }
  .sixth { left: calc(33% + 100px); }
  .seventh { left: calc(33% + 120px); }
  
  .down {
    bottom: 140px;
    background: #6592CF; 
    transform: rotate(180deg);
  }
```
Facilitando o monitoramento de conexão
Tags: powershell, tutorial, beginners, systems
Published: 2021-02-05 12:35:47

Seguindo a ideia apresentado no nosso artigo de [monitoramento com ping](https://dev.to/msplatam/monitorando-com-ping-45ca), vamos criar uma função para alterar a cor do terminal quando o equipamento estiver online novamente. 

Enquanto ele está offline, deixaremos vermelho, e quando ficar online, ficara verde. 

Vamos basicamente colocar um teste de conexão dentro de um loop de repetição para validar cada um dos cenários. Para representar as cores, vamos escrever na tela uma barra feita de vários espaços (Exemplo: "      "), alterando a cor de fundo delas.

Assim que o equipamento responder na rede, mostramos a barra verde e encerramos o loop. 

Para a validação do equipamento, vamos usar a função [Test-Connection](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/test-connection?view=powershell-7.1). 

{% gist https://gist.github.com/IGDEXE/c5690d3393b6d94527a408b6a8540113 %}

Como retorno, teremos isso no terminal:

![Terminal](https://dev-to-uploads.s3.amazonaws.com/i/ltwujqg0aoeja1g6ksfn.png)
CSS Battle - #7 Leafy Trail
Tags: css, cssbattle
Published: 2021-02-05 12:31:23

**HTML**
```html
<div></div>
```

**CSS**
```css
  body {
    background: #0B2429;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  div {
    width: 150px;
    height: 150px;
    border-radius: 68%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    background: #998235;
    
    position: relative;
  }
  
  div:after {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: #F3AC3C;
    left: 50px;
  }
  
  div:before {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: #1A4341;
    left: -50px;
    z-index: -1;
  }
```
CSS Battle - #6 Missing Slice
Tags: css, cssbattle
Published: 2021-02-05 12:30:31

**HTML**
```html
<div class="outer">
  <div class="inner first"></div>
  <div class="inner second"></div>
  <div class="inner third"></div>
</div>
```

**CSS**
```css
  body {
    background: #E3516E;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .outer {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #E3516E;
    position: relative;
    
    display:flex;
    flex-wrap: wrap;
    overflow: hidden;
  }
  
  .inner {
    width: 50%;
    height: 50%;
  }
  .first { background: #51B5A9; }
  .second { background: #FADE8B; }
  .third { background: #F7F3D7; }
```
Add Prism.js to a Vue Application.
Tags: webdev, tutorial, vue, programming
Published: 2021-02-05 12:30:24

Hey there, 

We can now continue from where we left. How's been your week so far?. Thanks for keeping up with my tutorials. Before I pick from where we left here is the list of our next tutorials. Remember our objective is to practically learn different approaches between Serverless, Container, and Server approaches.

1. How to integrate Passport to handle authentication to Node, Express, Mongo DB, and Vue application.
2. JWT Authentication and Authorization in a Node, Express, Mongo DB, and Vue.
3. API Gateway, Lambda, DyanamoDB, and Vue.
4. Amplify and Vue application.
5. Socket.io, Node, Express, Mongo DB, and Vue


Oh! I will be creating courses for most of our tutorials for those who will be interested keep close.

Let me cut to the chase and give a short tutorial for someone who wants to add a code section in their application and wants to add some code highlighting. 

Let us use Prism.js. You can use highlight.js or any other you prefer. Today we will talk about adding Prism to Vue.

A. Install the package in your application

```
yarn add prismjs OR npm install prismjs
```

B. In the component that has your code that you want to highlight, let us set Prism.manual to true before the DOMContentLoaded event is fired and import prism and theme we want to use.

```javascript
<script>
import Prism from "prismjs";
import "prismjs/themes/prism.css"; // you can change
export default {
  data() {
    return {
      //
    };
  },
  // mounted
  mounted() {
    window.Prism = window.Prism || {};
    window.Prism.manual = true;
    Prism.highlightAll(); // highlight your code on mount
  }
};
</script>
```

C. You can change to the theme you prefer. There are default themes installed with Prism. Go to the folder of prism in node.modules and check the themes folder. 

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


That is all we have to do to integrate Prism into a Vue application. How to implement HTML language. To implement javascript and other languages is straight forward.


```javascript
<pre><code class="language-javascript">
  // code here for example
  function hello(){
     console.log(Hello World)
  } 
</code></pre>
```


For HTML you will have to implement differently:

```html
<pre><code class="language-markup"><script type="prism-html-markup">
  // code here
 <div>Hello World</div>
</code></pre>
```

Hope this will help someone who wants to start with prism.js and Vue application. For more details about Prism.js [https://prismjs.com/](https://prismjs.com/), [https://prismjs.com/docs/index.html](https://prismjs.com/docs/index.html)

Watch out for the next tutorials.

Thank you.
CSS Battle - #5 Acid Rains
Tags: css, cssbattle
Published: 2021-02-05 12:29:34

**HTML**
```html
<div></div>
```

**CSS**
```css
  body {
    background: #0B2429;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  div {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border-top-right-radius: 0;
    background: #998235;
    
    position: relative;
  }
  
  div::after, div::before {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    background: #F3AC3C;
  }
  
  div::after {
    top: 60px;
    right: 60px;
    border-radius: inherit;
  }
  
  div::before {
    top: -60px;
    right: -60px;
    border-radius: 50%;
    z-index: -1;
  }
```
¿Qué sistema operativo es mejor para programar?
Tags: tip, desarrollo
Published: 2021-02-05 12:28:21

---
title: '¿Qué sistema operativo es mejor para programar?'
published: true
tags: ['tip', 'desarrollo']
canonical_url: https://marceloandrader.github.io/blog/2021/02/05/qu%C3%A9-sistema-operativo-es-mejor-para-programar/
---

Linux. Fin.

Solo bromeaba, ojalá este tipo de preguntas fueran tan fáciles de responder,
como todo en la vida no es una respuesta de blanco o negro, hay muchos
matices y en este caso hay que escudriñar un poco más para poder tener una
respuesta que se ajuste a tu contexto.

Primero preguntaría:

# ¿qué quieres programar?

Si la respuesta es aplicaciones de escritorio para la mayor cantidad de gente
posible, no hay muchas vueltas que darle tienes que usar windows y usar sus
herramientas de desarrollo.

Si quieres dedicarte al desarrollo de apps para móvil, lo mejor es una mac
ya que en la misma puedes desarrollar tanto para iOS como android.

Pero si es aplicaciones web o sitios web, ahí se abren otras posibilidades. En
el caso de web tienes 2 componentes un servidor y un browser, para la parte del servidor
ya que en algún momento va a tener que desplegarse y el 90% de sitios o apps web se van a desplegar
en un servidor linux en la nube, te recomendaría que trates de estar
en el mismo ambiente que en producción. Linux tiene las de ganar, pero ya
que al final es cuestión de gustos, es totalmente posible programar aplicaciones
que se van a ejecutar en linux desde windows o mac, pero hay que siempre tener
en cuenta las incompatibilidades. Para la parte de probar la aplicación en
el browser, esto se puede y/o debe hacer desde los 3 sistemas operativos.

# ¿qué máquina tienes?

Hay cierto tipo de máquinas que solo permiten instalar ciertos sistemas operativos,
por ejemplo si tienes una PC con windows, la única otra opción es linux, siempre
y cuando tenga soporte de tu hardware. O si tienes una mac, algunas versiones si
permite instalar via boot camp windows en una mac, yo tengo una mac de hace 12
años con linux para los estudios de mi hija y funciona.

# ¿qué tipo de persona eres?

Te gustan los retos y aprender sobre la marcha, dedicando un poco de tiempo a resolver
problemas que otros no tienen, eres el tipo de persona para linux.

Te gusta el diseño agradable a la vista, que todo funcione sin mucho problema,
que haya soporte, eres el tipo de persona para mac.

Te gusta que entren virus a tu máquina, reinstalar el sistema
cada cierto tiempo, tienes paciencia para que las actualizaciones se instalen
en los peores momentos, eres del tipo de persona para windows. (Lo siento no quiero
ofender a nadie, solo que nunca me gustó windows, pero es perfectamente normal usar
windows)

# ¿qué software necesitas?

Hay software que funciona en los 3 principales sistemas operativos, pero hay muchos
que no. Por ejemplo si requieres usar software de Adobe solo tienes windows y mac.
O herramientas específicas de Microsoft solo windows.

# Conclusión

No hay uno mejor o peor, solo son herramientas, y las debes usar dependiendo
de lo que estes construyendo.
CSS Battle - #4 Ups n Downs
Tags: css, cssbattle
Published: 2021-02-05 12:28:14

**HTML**
```html
<div class="down"></div>
<div class="up"></div>
<div class="down"></div>
```

**CSS**
```css
  body {
    background: #62306D;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div {
    width: 100px;
    height: 100px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: #F7EC7D;
    position: relative;
  }  
  .up {
    top: -50px;
  }
  .down {
    transform: rotate(180deg);
    top: 50px;
  }  
```
CSS Battle - #3 Push Button
Tags: css, cssbattle
Published: 2021-02-05 12:25:43

**HTML**
```html
<div class="wide-box">
    <div class="circular-outer"></div>
    <div class="circular-inner"></div>
</div>
```

**CSS**
```css
  body {
    background: #6592CF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .wide-box {
    width: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #243D83;
    z-index: -1;
    overflow: hidden;
    
    position: relative;
  }
  
  .circular-outer {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #6592CF;
    
    position: absolute;
  }
  
  .circular-inner {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #243D83;
    
    position: relative;
    overflow: hidden;
  }
  
  .circular-inner::after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #EEB850;
    border-radius: 50%;
    z-index: 1;
    
    display: flex;
    align-items: center;
    justify-content: center;
  }
```
The Essentials of Product Image Editing Services
Tags: design
Published: 2021-02-05 12:11:28

Product photo editing is not a choice anymore; it's a necessity. You can't survive the competition in the absence of photos that are perfectly retouched. Here are the most essential photo editing jobs product photos need to touch the contemporary standards.

Background Replacement
Every product photo requires a background that doesn't distract the focus from the products. What can be better than a pure white one?

Color Correction
Too sharp or too dull colors, both deteriorate the quality and visual appeal of the photo. Color correction supposes to be one of the basic jobs among product image editing services.

Cropping & Resizing
Cropping helps get rid of the idol space, and sometimes the mess, around the product in images. On the other hand, resizing is imperative for consistency and good visual impact.

Spot Removal
Spots and blemishes in photos can be disastrous for the overall appeal. It's essential to get rid of all such spots before the photos go to various offline and online platforms for selling and promotion.

Highlighting Product Details
Online buyers have to determine all visual aspects of the product through photos; that's why e-commerce businesses need to make sure all details of their products are clearly visible in product photos.
My experience of being blackmailed
Tags: cybersecurity, elasticsearch, devops
Published: 2021-02-05 12:02:11

Several months ago, one searching functionality of our SaaS under development went down strangely. The server responded error 500 for according web requests. Obviously, the API was still working but there was internal error inside the API function. In the first place, I thought it was the according DB container who went down, however I saw all containers were running normally. After a close investigation, I found that the ES database seemed to be empty. Very weird! So I opened a terminal window, connected to ES and checked all the indices. I saw the information below:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wdu04l57sh7x90wmionv.jpg)

This hacker claimed he had "backed up my database" and demanded 1 bitcoin for retrieving the data. WTF! The price of 1 bitcoin now is about 37K dollars.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4d6u1l3nb3i8sdwgk8o1.PNG)


This ransom is ridiculously high for me. Fortunately, this db was for test only (that's why it was binded to default port and not secured by password) and the data were backed up beforehand. 

I learned some important lessons from this incident though: 1 cypersecurity is very important and one should always pay attention; 2 one should always back up the important data in one or more copies; 3 secure databases and server with strong passwords and use non-default ports
Writing clean JavaScript code: Variables
Tags: webdev, codenewbie, javascript
Published: 2021-02-05 10:15:45

What is clean code? **It is code that is easy to understand by humans and easy to change or extend.**
In this post, I will cover JavaScript clean coding best practices when it comes to variables.

* Use meaningful and pronounceable variables.
You should name your variables such that they reveal the intention behind it. This makes it easier to read and understand.

 **DON'T**
 ```javascript
 let fName = "Stephanie";
 ```
 **DO**
 ```javascript
 let firstName = "Stephanie";
 ```
* Use ES6 constants when variable values do not change.
At this point, you have interacted with JavaScript ES6 severally/ a few times depending on your level of expertise therefore, keep this in mind.

* Use the same vocabulary for the same type of variable.

**DON'T**
```javascript
getUserInfo();
getClientData();
getCustomerRecord();
```
**DO**
```javascript
getUser();
```
* Use searchable names.
This is helpful when you are looking for something or refactoring your code.

**DON'T**
```javascript
setTimeout(blastOff, 86400000); //what is 86400000???
```

**DO**
```javascript
const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
```
* Do not add unneeded context.

**DON'T**
``` javascript
const Laptop = {
 laptopMake: "Dell",
 laptopColor: "Grey",
 laptopPrice: 2400
};
```
**DO**
```javascript
const Laptop = {
 make: "Dell",
 color: "Grey",
 price: 2400
};
```
Happy coding!
How to make a digital greeting clock using javascript
Tags: javascript, html, css, opensource
Published: 2021-02-05 11:08:17

### So, Today we are going to build a digital greeting clock using javascript so lets start,lets see the folder structure
<pre>
DIGITAL CLOCK
├───css
└───js
</pre>
in the project root make an index.html file and make a css file in css folder and a js file in js folder open root folder in code editor
<pre>code .</pre>
now lets start codding the entire html file
![html](https://dev-to-uploads.s3.amazonaws.com/i/iqho57t8fi7tv2bnxyp8.png)
after that we have to code the css
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9cr9i5hw8nvzj9p7qm4e.png)
now the main part the javascript open the js file code the js
lets code the clock
<pre>
const clock = () => {
  var date    = new Date();
  var hours   = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  var midday;

  hours     = updateTime(hours);
  minutes   = updateTime(minutes);
  seconds   = updateTime(seconds);
  var name  = "Hacker";

  // if else condition

  midday = (hours >= 12) ? "PM" : "AM";

  document.getElementById("clock").innerHTML =
    "<span>"+hours+"</span>" + ":" + "<span>"+minutes+"</span>" + ":" + "<span>"+seconds+"</span>" + "<span>"+midday+"</span>";

  var time = setTimeout(function () {
    clock();
  }, 1000);

  //   Good Morning and Good Night Conditions

  if (hours < 12) {
    var greeting = "Good Morning " + name + " Hurry Up!";
  }

  if (hours >= 12 && hours <= 18) {
    var greeting = "Good Afternoon " + name;
  }

  if (hours >= 18 && hours <= 24) {
    var greeting = "Good Evening " + name;
  }

  document.getElementById("greetings").innerHTML = greeting;
}
</pre>
now lets update the time and call the clock function
<pre>
const updateTime = (k) => {
  if (k < 10) {
    return "0" + k;
  } else {
    return k;
  }
}

// call clock function 
clock();
</pre>
there you have it it is done please follow me on github the code is also on github

github: https://github.com/Sadman-Sakib2234/
code: https://github.com/Sadman-Sakib2234/Greetings-clock-js
twitter: https://twitter.com/SakibDev