teleren/devto huggingface dataset:
HTML ol, li and ul elements explained
Published: 2021-07-11 21:35:53

If you are trying to create a list using HTML you will need to know how you want the layout to look.  A little preplanning goes along way when building a webpage. I'm going to go over 3 types of Lists: `<ol>, <li>, <ul> and <dl>, <dt> and <dd>`. You need to think of the ending output in order to construct it from the beginning. 

An `<ol>` is what's called an Ordered List.  Inside the `<ol>` are a group of  `<li>`'s.  The `<li>` items will occupy one line of (words) items. Then the next `<li>` will be on the next line, etc...These list items will be preceded by a number.  So by using both `<ol>` and a list of  `<li>` will create a list like looks like this:

Code:
`<ol>
     <li>This is the first item</li>
     <li>This is the second item</li>
     <li>This is the third item</li>
</ol>`

That will produce:

1. This is the first item
2. This is the second item
3. This is the third item

The `<ul>` is the Unordered List. Unordered Lists are preceded by a bullet point. Here is an example of that:

Code: 
`<ul>
     <li>This is the first item</li>
     <li>This is the second item</li>
     <li>This is the third item</li>
</ul>`

That will produce:

•This is the first item
•This is the second item
•This is the third item

So this is how to create Ordered Lists, List Items and Unordered Lists. Next time I will go over `<dl>, <dt> and <dd>`. Happy Coding!
Stats preview card component
Tags: html, css
Published: 2021-07-11 20:21:45

I've just completed a front-end coding challenge from Frontend Mentor.

You can see my solution here: https://www.frontendmentor.io/solutions/stats-preview-card-component-using-css-float-KrXQnsD5m

Any suggestions on how I can improve from front-end devs in my network are very welcome, especially for the mobile layout and the image filter. Thanks!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz75ov7j3bo10lb90yik.png)
How to Create Different Animation on Button on Hover Using HTML and CSS Only .
Tags: html, css, webdev
Published: 2021-07-11 20:19:16

Hello Everyone, In this Post We Will be Seeing How to Create Different Animation on Button on Hovering Using HTML and CSS only.

Here is The Live Link of Page https://button-animation.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

1. Choose Any Text Editor (VSCode Recommended).
2. Create 2 Files in Current Project Directory, index.html and style.css.
3. Use Below HTML and CSS Code To Build Your Page.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Design Animations</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="heading">
            Different Hover Animation on Buttons
        </div>
        <div class="buttons">
            <button class="btn1">Slide From Left</button>
            <button class="btn2">Slide From Right</button>
            <button class="btn3">Slide From Top</button>
            <button class="btn4">Slide From Bottom</button>
            <button class="btn5">Glow Animation</button>
        </div>
    </div>
</body>
</html>
```
```
:root {
    --primaryColor: #ff96ad;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.heading {
    font-weight: lighter;
    font-size: 30px;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}
.buttons {
    display: grid;
    justify-content: center;
    align-items: center;
}
button {
    width: 250px;
    height: 50px;
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    cursor: pointer;
    border: 0;
    transition: 0.5s ease-in;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn1, .btn2, .btn3, .btn4, .btn5 {
    margin-bottom: 10px;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover {
    color: #fff;
}
button::before, button::after {
    content: "";
    background-color: var(--primaryColor);
    position: absolute;
    z-index: -1;
}

/* Button 1 */
.btn1::after {
    width: 0;
    left: 0;
    top: 0;
    height: 100%;
    transition-duration: 0.5s;
}
.btn1:hover::after {
    width: 100%;
}

/* Button 2 */
.btn2::after {
    width: 0;
    top: 0;
    right: 0;
    height: 100%;
    transition-duration: 0.5s;
}
.btn2:hover::after {
    width: 100%;
}

/* Button 3 */
.btn3::after {
    height: 0;
    left: 0;
    top: 0;
    transition-duration: .5s;
    width: 100%;
}
.btn3:hover::after {
    height: 100%;
}
/* Button 4 */
.btn4::after {
    height: 0;
    bottom: 0;
    left: 0;
    transition-duration: 0.5s;
    width: 100%;
}
.btn4:hover::after {
    height: 100%;
}
 
/* Button 5 */
.btn5:hover {
    background-color: var(--primaryColor);
    color: #fff;
    box-shadow: 0 0 5px var(--primaryColor), 0 0 200px var(--primaryColor);
}
```
Running a simple chaos toolkit experiment
Tags: resiliency, chaos, toolkit
Published: 2021-07-11 20:02:46

---
title: Running a simple chaos toolkit experiment
published: true
description: Executing Chaos Tookit
tags: resiliency, chaos, toolkit
series: resiliency
//cover_image: https://direct_url_to_image.jpg
---

Install Chaos Toolkit & required drivers as mentioned here:

1. Setting up ChaosToolkit Execution Environment

Make sure the virtual environment is activated.

Create the following file:
```JSON
{
  "version": "1.0.0",
  "title": "random website testing",
  "description": "Just checking the chaostoolkit base stuff",
  "steady-state-hypothesis": {
    "title": "Website is OK",
    "probes": [
      {
        "type": "probe",
        "name": "website-must-be-up",
        "tolerance": 200,
        "provider": {
          "type": "http",
          "timeout": [
            3,
            5
          ],
          "url": "https://httpbin.org/forms/post",
          "method": "GET"
        }
      }
    ]
  },
  "method": [
    {
      "type": "probe",
      "name": "website-must-return-202",
      "tolerance": 202,
      "provider": {
        "type": "http",
        "url": "https://httpbin.org/status/202"
      }
    },
    {
      "type": "probe",
      "name": "response should be json",
      "tolerance": {
        "type": "jsonpath",
        "path": "$.slideshow.author",
        "expect": [
          "failed"
        ],
        "target": "body"
      },
      "provider": {
        "type": "http",
        "url": "https://httpbin.org/json"
      }
    }
  ],
  "rollbacks": []
}
```

Running the experiment:

```
chaos run SimpleExperiment.json
```

ScreenGrab:

{% youtube qJy20m2GT4M %}

The same can be run in a Jenkins Pipeline:

The jenkins pipeline script is as follows:

```
pipeline {
    agent any

    stages {
        stage('Deploy') {
            steps {
                // Get some code from a GitHub repository
                git 'https://github.com/mikotian/resilientchaos.git'
                
            }

            post {
                success {
                    echo 'Hello World'
                }
            }
        }
        stage('Run Chaos Script') {
            steps {

                sh ". /home/mithun/.venvs/chaostk/bin/activate && chaos run SimpleExperiment.json"
            }

            post {
                success {
                    echo 'Success'
                }
            }
        }
    }
}
```

The execution looks like this:

{% youtube VJoiFlIHL7E %}
Coisas que ninguém te ensina a fazer mas que todo mundo espera que você saiba: submissão de C4P
Tags: braziliandevs, girlsintech
Published: 2021-07-11 19:56:28

Call For Papers (CFP ou C4P para os íntimos) é a documentação que deve ser submetida para uma conferência, um evento ou até mesmo uma publicação científica. Muitas vezes é o maior obstáculo para quem quer começar a palestrar, porque *não basta enviar para a comissão organizadora*, seu C4P precisa se destacar dentre os demais e ser escolhido.
Eu já recebi várias dicas ao longo da vida, tanto de pessoas ligadas à academia, que geralmente está mais focada em publicações científicas, como também de pessoas que contribuem ativamente em comunidades, mais focadas em evento. Este artigo é um compilado dessas dicas, aliadas com outras diversas e também com a minha experiência profissional para te ajudar a escrever um bom paper.

### Mini bio

Aqui, mais importante do que saber quem é você é saber se você tem background para falar do assunto que você se propõe.  Tenha em mente que você não precisa ser especialista, mas um frontend falando de construção de banco de dados faz tanto sentido quanto um neurocirurgião falando de problemas ósseos no joelho.
Seja breve aqui, provavelmente você terá um lugar para colocar seu currículo inteiro. Eu tento limitar aqui a um tweet (280 caracteres).

### Titulo

Pode ser marqueteiro aqui. Você tem pouco mais de 50 caracteres para tentar chamar a atenção das pessoas do evento, mas não fuja do assunto: ele precisa dizer de forma clara `o assunto que você vai abordar`.

### Resumo

Sabe quando você lê a sinopse de um livro ou de um filme e ela te atrai tanto que você não consegue parar de pensar nele? O seu resumo aqui tem essa função. É aqui que a sua palestra irá se destacar. Seu resumo deve ser breve (tente se limitar a dois tweets, algo em torno de 550 caracteres), e mais que isso: deve fazer com que a comissão *pelo menos* queira ler o seu outline.

### Outline

Aqui é o momento de colocar em prática o que você aprendeu nas aulas de redação do ensino médio. Tente estruturar seu outline como se ele fosse uma dissertação: introdução, desenvolvimento e conclusão. 
Na introdução, apresente o assunto, descreva o problema que você irá resolver. 
Eu gosto de dividir o desenvolvimento em dois parágrafos: um onde exploro o problema apresentado e outro mostrando um pouco da solução. 
Por fim, na conclusão, eu faço um resumo do texto todo e tento finalizar com a importância daquele tema.

### Enviando o C4P

Nem todo evento possui a mesma estrutura, portanto, **leia com atenção** o que eles pedem na submissão. Tente também pedir ajuda a um amigo ou mentor, opiniões externas sempre ajudam. 
Caso não consiga de primeira, não desista! Tente ver onde você pode melhorar na sua submissão, pratique, trabalhe mais na sua escrita e também no seu marketing pessoal. Eu te garanto que o trabalho irá valer a pena.

> Este é o primeiro de uma série de textos onde irei organizar e compartilhar conteúdos que não são usuais, mas ainda assim, importantes.
map - Higher Order Function in JavaScript - in Depth
Tags: javascript
Published: 2021-07-11 19:44:27

#### Topics covered:
###### 1- Basic implementation with example
###### 2- Parameters: element, index, array, this 
###### 3- when we shouldn't use map()
###### 4- trick ;)


## 1- Basic implementation with example

In modern JavaScript,  we have a very powerful method which is map. 

Map method runs/loops on an array (not on object) and runs a function on each element of the array, the returned value of that function becomes the new element of the new array.

Confused? don't worry, I will cover every detail and make you comfortable with map function

let's get started.

```javascript
const drugs = ["facebook", "whatsapp", "instagram"]

// map
const newDrugs = drugs.map(function(value){
    return "the " + value;
})

//console newDrugs
["the facebook", "the whatsapp", "the instagram"]

```
map has taken every element of the array drugs and ran function on it, returned value of the function (with "the ")  has become the new value of the new array

Arrow function makes it a bit more clean
```javascript
// map
const newDrugs = drugs.map(value => "the ")
```

## 2- Parameters: element, index, array, this
###### Element:
It is the each single element of array
```javascript
const newDrugs = drugs.map(function(element){
    return "the " + element;
})
```
###### Index
It is the index of each single element of array
```javascript
const newDrugs = drugs.map(function(element, index){
    console.log(index)  //console 0, 1, 2
    return "the " + element;
})
```
###### Array:
It is the initial array (drugs) which we are mapping
```javascript
const newDrugs = drugs.map(function(element, index, array){
    console.log(index)  
    console.log(array)  //console every time ["facebook", "whatsapp", "instagram"]
    return "the " + element;
})
```
###### this:
We can set the value of our own 'this' inside map ;). Let me show you how.
Define the new object as below
```javascript
const newDrugs = drugs.map(function(element){
    return "the " + element + " by " + this.ceo;
}, {
ceo: 'mark zuckerburg',
})

//console
["the facebook by  mark zuckerburg", "the whatsapp by  mark zuckerburg", "the instagram by  mark zuckerburg"]
```

## 3-  when we shouldn't use map()
map() builds the new array and return it, when you don't want returned array, use forEach or for...of

## 4-  trick
We can reformat the array of objects using map
```javascript
const ourArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}]
let reformattedArray = ourArray.map(x => {
   let newObj = {}
   newObj[x.key] = x.value
   return newObj
})

// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],
```

## End
#### any confusion regarding the above mentioned concepts?
Dijkstra's shortest path algorithm
Tags: algorithms, computerscience, beginners, programming
Published: 2021-07-11 19:39:34

Hello, this is \#day_29, I'm going to talk about Dijkstra's shortest path algorithm

## Definition of Dijkstra's shortest path algorithm

dijkstra's shortest path is an algorithm created by **Dr. Edsger Dijkstra** for calculating the shortest path between vertices in a weighted graph ([*types of graph*](https://dev.to/ayabouchiha/types-of-graph-14ei))

## Example of a weighted graph

![weighted graph aya bouchiha](https://res.cloudinary.com/practicaldev/image/fetch/s--7Q6Op3bB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1p94w58z82ji8ynl5d2.jpg)

## Dijkstra's shortest path applications 

+ Road networks
+ Electricity lines
+ Google maps
+ Social networking apps
+ Flighting agenda
+ Ip routing
[more details](https://www.geeksforgeeks.org/applications-of-dijkstras-shortest-path-algorithm/)

## Dijkstra's shortest path implementation in python

If you are not familiar with Python check this [series](https://dev.to/aatmaj/launching-the-learning-python-course-5f31
) by @aatmaj

```python

def dijkstraShortestPathAlgo(nodes, edges, source_indedx = 0):
    """
        code from 
        => [https://www.youtube.com/watch?v=VnTlW572Sc4]
    """
    path_lengths = {v:float('inf') for v in nodes}
    path_lengths[source_index] = 0
    adjacent_nodes = {v:{} for v in nodes}
    for (u, v), w_uv in edges.items():
        adjacent_nodes[u][v] = w_uv
        adjacent_nodes[v][u] = w_uv
    temporary_nodes = [v for v in nodes]
    while len(temporary_nodes) > 0:
        upper_bounds = {v: path_lengths[v] for v in temporary_nodes}
        u = min(upper_bounds, key=upper_bounds.get)
        temporary_nodes.remove(u)
        for v, w_uv in adjacent_nodes[u].items():
            path_lengths[v] = min(path_lengths[v], path_lengths[u] + w_uv)
    return path_lengths
```
[more details...](https://www.youtube.com/watch?v=VnTlW572Sc4)

## References & useful resources

+ [https://www.geeksforgeeks.org/dijkstras-shortest-path-algorithm-greedy-algo-7/](https://www.geeksforgeeks.org/dijkstras-shortest-path-algorithm-greedy-algo-7/)
+ [https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm](https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm)
+ [https://www.freecodecamp.org/news/dijkstras-shortest-path-algorithm-visual-introduction/](https://www.freecodecamp.org/news/dijkstras-shortest-path-algorithm-visual-introduction/)
+ [https://www.youtube.com/watch?v=smHnz2RHJBY](https://www.youtube.com/watch?v=smHnz2RHJBY)

Happy coding!!
How to Create Simple Blog Posts?
Tags: blog, wordpress, thumbnail, posts
Published: 2021-07-11 18:56:51

In this tutorial you will learn creating simple blog posts in CSS and HTML.

First write CSS code like this.

<code>
body { margin:46px; padding:0; }

.container { width:1400px; }

.float-fix { float:left; margin-right:50px; display:inline; width:640px; }

.place-pic { opacity:1; }
.place-pic a:hover { opacity:0.7; }

h2.title { padding:0px 0 0px; }
h2.title a { font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:1.2em; text-decoration:none;  color:#333333;  font-size:24px; }
h2.title a:hover {  color:#ff0000; text-decoration:none; }

.time-date { font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:.2em; text-decoration:none;  color:#747474;  font-size:12px;  }
.time-date a { font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:.2em; text-decoration:none;  color:#ff0000;  font-size:12px;  }

.description-text { padding-top:23px; padding-bottom:10px; font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:26px; text-decoration:none;  color:#747474;  font-size:15px;  }

.text-link { padding:0; }
.text-link a { background:#ff0000; padding:5px 11px 5px 11px; font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:16px; text-decoration:none;  color:#ffffff;  font-size:12px;  }
</code>

Now call these CSS styles into HTML like this.

<code>
<div class="container">
<div class="float-fix">
<div class="place-pic"><a href="#"><img src="https://picsum.photos/640/290?image=28"></a></div>

<h2 class="title"><a href="#">Sample Blog Post Title</a></h2>

<div class="time-date"> 13 Nov, 2018 / <a href="#">Showcase</a> </div>
  
<div class="description-text"> You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post.</div>

<div class="text-link"><a href="#">Read more</a></div>  
</div>
  

<div class="float-fix">
<div class="place-pic"><a href="#"><img src="https://picsum.photos/640/290?image=29"></a></div>

<h2 class="title"><a href="#">Sample Blog Post Title</a></h2>

<div class="time-date"> 13 Nov, 2018 / <a href="#">Showcase</a> </div>
  
<div class="description-text"> You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post.</div> 

<div class="text-link"><a href="#">Read more</a></div>  
</div>
  
 
</div>

</code>

Now copy these code and add to your html page and test it live in action.

You can learn more cool <a href="https://twibbr.com/googletr/">CSS techniques - Twibbr</a>
<a href="https://twibbr.com/how-to-auto-indent-in-visual-studio-code/">studio code - Twibbr</a>
5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension")
Tags: vscode, programming, beginners
Published: 2021-07-11 18:56:44

Hello coders! You've always heard the same VS Code hacks over and over again like "install Prettier extension to format your code", "press alt + shift + down key to duplicate code", etc. In this article, I'll share some VS Code hacks which I don't usually see being shared around (except number 5, it's a pretty generic advice). You owe me a like if this article helps you.

###[1] Open Files Automatically In A New Tab
Isn't it annoying when you've got file A opened and you want to open file B but when you click file B, file B does open but file A closes? You might double click file B to open in a new tab but does it disappoint you sometimes like it did to me? To overcome this problem, search for "workbench.editor.enablePreview" in your settings and uncheck the option. From now onwards, VS Code will always open files in a new tab.

###[2] Change Color of Comments
![Mohmed Ishak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac5pqbvrs9b1ycf62quc.PNG)
Not forcing you, but some colors for comments just hit different. As for me, I prefer this exact green for my comments because it's easier to locate my comments in the codebase. To do this, in your settings.json file, add the following code, or if it already exists, delete it and replace with this code:
```javascript
  "editor.tokenColorCustomizations": {
    "comments": "#229977" // change to any color you like
  },
```

###[3] More Real Estate
Sometimes all you want is a larger view of the files, folders, and code. So you might consider zooming out by pressing ctrl + '-'. To zoom in press ctrl + '+'. Plus, press F11 which would hide the taskbar and header of VS Code, giving you more view of VS Code, hence more focus.

###[4] Generate Custom Snippet
A custom snippet (if you don't know) is a template for code where you would type a few letters on your keyboard and the template/boilerplate code would be automatically generated which you can work on. If you still don't get it, it's the same thing as typing "rsf" in a React file which would generate a functional component (provided that you have installed the right extension). To make a custom snippet, just head over to this site https://snippet-generator.app/ and type your snippet. Be sure to fill up the tab trigger which are the keys that would trigger your snippet. Then copy the snippet it gives you. Come back to VS Code, go to File > Preferences > User Snippets > New Global Snippets (it might be different to navigate to this on a Mac, so Google it if you couldn't locate it). Paste the copied code. That's it.

###[5] Change Theme in VS Code
Okay this is an obvious one (and yes, it goes against the title), but head over to https://vscodethemes.com/ and grab a new theme today. They've got a large collection of themes which can be previewed through an eagle's view.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze36f6et1le4veg2nj6p.PNG)
Awesome Solution: Installing packages without root privileges. 
Tags: devops, linux, ubuntu, llinux
Published: 2021-07-11 18:54:49

Pkget used for installing packages when you dont have root and/or sudo it's as simple as that really...

```
wget https://raw.githubusercontent.com/0x00009b/pkget/master/pget && chmod +x pget
```

And then simply

```
./pget <package_name>
#example: ./pget nmap
```

Works with:
This tool is only for debian based systems and will only work with apt for you linux n00bs here is a list of some common debian based distos
Debian
Ubuntu
Parrot OS
Kali linux
Linux Lite

Thanks for this https://github.com/0x00009b

👍🙏


##[Click here for joining my team](https://forms.gle/pSCALuEWHus3pg9F6)
Chicken Face
Published: 2021-07-11 18:39:55

Assuming cock cocks and hens, chickens
can get the equation
1. cock + hen + chicken = 100
2. cock*5 + hen*3 + chicken/3 ；
If you buy a rooster for 100 yuan, you can buy 33, so the value range of cock cock is 0-20,
Similarly, the value range of hen is 0-33, and the value range of chicken is 0-100.
Solidity Error Resolved
Tags: solidity, blockchain
Published: 2021-07-11 18:30:00

I was working on this error for a few days and could not seem to figure out. 
![truffle_pet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w11vdnq0b70a9nlg7unm.PNG)
I attempted to reconfigure the truffle.config.js file.
![truffle_config_04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o8y55zry0gxzm60tntm.PNG)
 That did not fix the error, so I kept trying to mess around with the file and nothing was working.
Here is example of the code. 
Take a look at it very closely and see if you can see what the error is.
![solidity_contract](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p92vuabf0c2tu8olqki.PNG)
 
If you are like me. You missed seeing that I closed off the whole contract right after adopters.
![Inkedsolidity_contract_LI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvzndgrdgacxh1owqmb3.jpg)

Sometimes we over look the smallest of details. I hope this was helpful.