teleren/devto huggingface dataset:
30 Days Of Vanilla JS challenge
Published: 2020-09-25 02:55:18

Started with 30 days and 30 projects on Vanilla JS + CSS

Because " Their is no Formation without Repetition " anyone who want to take this challenge are welcome

Sharing my Project of Day 1

Project link :- https://gifted-jsdrumkit-amangupta.netlify.app/

#javascript #programming #frontend # fullstack #codenewbie #language #webdev #beginners
My experience in my labs project in Lamda School
Published: 2020-09-25 02:54:32

This is the first part of my labs project. 
{% link https://dev.to/anthonyamaro15/what-s-it-like-to-work-as-a-team-4dmf %}

Today we are going to be going over what the second part of my labs project was and is a small description of what we've built on the second portion.

Once we filled the database with the bridges and villages data we noticed that it would take between 3.5 to 4 seconds to get the data, We needed a way to somehow improve the performance. 
One of the solutions we came up with was to cache the data, and for that, we decided to go with Redis.

After we cached the data the performance increased by about 60% now taking between 100 to 200 milliseconds. Much faster right? To implement Redis it was actually quite easy. Here are some screenshots on how to implement it.

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

On line 79 we get the variable with the name bridges and a callback function with 2 parameters, after that, we check if the error is true it means we don't have anything store with the name of bridges.
Then on line 84, we check if data is true, it means we have it stored and we send that data.

If none of those conditions are met then we get to line 89 where we get the data from the database, send the data and then save it in Redis.

It was an amazing experience to have worked with an awesome team, I'm grateful to have the opportunity to work with them and I feel that we definitely did a great job. If you are wondering how the project looks like here it is.
[website here](https://main.dvxfvrn3mdjg1.amplifyapp.com/)
Building your own CSS framework for Hacktoberfest
Tags: css, hacktoberfest, sass
Published: 2020-09-25 02:29:50

A few weeks ago I experimented with a css-grid based sass utility generator called [gaudiamus-css](https://gaudiamus-css.gitHub.io). Meanwhile, it has grown into a framework builder and is looking for creative developers (check out the introduction [on youtube](https://youtu.be/2ENBKar4YjE)).

## Can you build something beautiful?

I figure that the tool itself is useful for all kinds of situations, but I would enjoy seeing someone with a good sense for design actually build a complete solution. With Hacktoberfest knocking at the door, I was wondering if some of you would be interested in considering tackling it.
UrlAutomationMachine: Why check status codes when you can get a machine to do it for you
Tags: opensource, beginners
Published: 2020-09-25 02:25:04

At some point, everything is gonna be automated right? At least we know who to blame if AI suddenly takes over am I right? 

Anyway, for our first big release for DPS909, we were tasked with creating a CMD tool that can detect broken URLs. I decided to make mine look very much like a conveyer belt for reasons I will keep to myself. I chose to use python for this since I had did a summer course over the summer in python and I felt more comfortable with the tools the language had to accomplish this task.

Here's a picture showcasing how it should operate:
![UrlAutomationMachine Demo](https://dev-to-uploads.s3.amazonaws.com/i/g9x3ijy7e3h8cmibya9j.png)

Here's a few options that you can find:

![UrlAutomationMachine Options](https://dev-to-uploads.s3.amazonaws.com/i/de4ua2b8e60clwd4bk41.png)

In terms of the output, it will display as follows:

- Green indicates success
- Red indicates failure
- White/Grey indicates a url that is unknown in nature

This is all based on the status code that is returned. A head request is made each time in order to decrease the amount of time taken making a request as opposed to a get request.

When you download the repo, make sure to run the following:

``` 
pip3 install --editable .
```
This will install all necessary libraries needed to run the application using the setup.py file included, of which the following were used:

- Colorama: This was used to colorize the output on the terminal
- urlLib3: This was used to make the http request, originally used requests but switched to this library instead out of a recommendation.
- argparse: This was used to facilitate the cmd tool, setup the arguments and pass the argument needed to the main function
- re: This was used to create a regex that could be applied to any file. This allowed any file to be passed, knowing that the url would be pulled from the file.


This release 0.1 project was an interesting project and one that has changed throughout the two weeks I've been working on it. I originally had just a main method do everything, but I changed it to operate via a class that was imported to the main function in order to also add in the extra functionality of checking a separate url. 

With this, the first of 4 releases for this open source class is now complete. As October comes close, Hacktoberfest looms. Time for me to find a repo to start making commits to. Until next time guys, stay tuned
Do you use UML to model complex web applications?

Tags: discuss, webdev, uml
Published: 2020-09-25 02:24:17

A few weeks ago I was learning from a course object oriented design in which they taught me class, state machine and sequence diagrams using the The Unified Modeling Language.

I like web development so I asked myself if these diagrams, specifically class diagrams, could be used to model web applications, preferably complex ones.

At first I though this wouldn't be possible since JavaScript is a [prototype based language](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model) even tho having a class keyword.

Doing a little bit of research I found and read two papers that addressed this.

1. [Modeling Web Application Architectures with UML](https://docs.huihoo.com/development/rup/webapps.htm) (1999)
2. [A comparison of UML and WAE-UML for the design of Web applications](https://www.diva-portal.org/smash/get/diva2:832733/FULLTEXT01.pdf) (2005)

The second paper gives good reasons on why use UML to model web apps in chapter 1.4.

What they do to use UML is to extended it with stereotypes, constraints and tagged values, this new extension is called [Web Application Extension](https://flylib.com/books/en/2.141.1/web_application_extension_for_uml.html) (WAE). 

As you can see these are old papers, the examples that they show are for what today are called server side rendered web apps.

I want to know if any of you have used UML to model web pages or if you like to consider UML to do so.
Automated Cloud Advisor
Tags: aws, devops, node, tutorial
Published: 2020-09-25 01:44:08

I wanted to share this open source project that I recently contributed to github called [automated-cloud-advisor](https://github.com/disneystreaming/automated-cloud-advisor).

> Automated Cloud Advisor is an extensible tool that aims at facilitating cost optimization in AWS, by collecting data for resources that are under utilized. In addition, this is a great learning tool for new DevOps/Cloud engineers that want to start automating things in AWS.
The tool is deployed as a set of cloudformation stacks that comprise the data collection and the data can be displayed in a Kibana dashboard.

You can also checkout the installation documentation at [disneystreaming.github.io](https://disneystreaming.github.io/automated-cloud-advisor/).
I created this tool for help us in Hacktoberfest
Tags: showdev, hacktoberfest
Published: 2020-09-25 01:36:29

---
title: I created this tool for help us in Hacktoberfest
published: true
description: 
tags: showdev, hacktoberfest
//cover_image: https://direct_url_to_image.jpg
---

Screenshot:

![Hacktoberfest Finder](https://dev-to-uploads.s3.amazonaws.com/i/2ktrdpornp719qbla47d.png)

Link: <https://mzaini30.js.org/hacktoberfest-finder/>
My Software Checklist
Tags: myself
Published: 2020-09-25 01:31:57

This is the list of software need to be installed after installing Windows 10. Just for myself only, not an awesome article you usually see. Note that the only reason for using Windows is playing games, not for development. And all below things is enough for frontend development.

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

## Utils

- Google Chrome
- Unikey (for Vietnamese only)
- Slack
- Winrar


## Developer tools

### MUST HAVE

- Git
- Node Version Manager ([nvm](https://github.com/coreybutler/nvm-windows))
- [Fork](https://git-fork.com/) is a Git GUI client.
- Yarn
- Sublime text with the following packages:
  + Babel
  + Color Highlight
  + DocBlockr
  + JsPrettier
  + SidebarEnhancements
  + SublimeLinter + SublimeLinter-eslint
- PuTTy

### Nice to have

- [Axure](https://www.axure.com/) is a tool for prototyping, mockup.
- [cmder](https://cmder.net/) is a portable terminal for windows, just install once, everywhere except disk C.

## Relax

- [Steam](https://store.steampowered.com/)

## Terrible Apps

But sometime you will need because there are still some sucks reason that I don't want to list out.

- Skype
- Microsoft Office
- TypeScript
I've made an Instagram clone with React
Tags: react, instagram
Published: 2020-09-25 01:07:45

Hey, I hope you are having a great coding weekend 😃 

Recently I've been studying React (I'm a Vue guy) and to sharpen my skills I decided to build an Instagram clone. You can check it live [here](https://theigclone.netlify.app/#/), it's on Netlify and if you wanna dig the code or contribute it's on my [Github](https://github.com/diogo405/igclone).   
<br/>
![alt ""](https://github.com/diogo405/igclone/blob/master/src/images/screenshot-feed.png?raw=true "IG Clone")

## How it Works
The app has three pages: Feed, Comments and Stories. All the data is loaded from json files and drilled down from the page to the components.

## Responsiveness
I made it max-width 414px so if you can check it on desktop and even older phones.

## What's Next
I think it'd really cool to have a dark mode. Maybe when you click on the config icon it shows some options and a switch to  darkmode it.

That's all, any feedback is appreciated.
See ya ✌️
Glimmer Has Been One Point Oh’ed!
Tags: ruby, desktop, framework, gui
Published: 2020-09-25 00:43:56

https://andymaleh.blogspot.com/2020/09/glimmer-has-been-one-point-ohed.html

Glimmer is finally 1.0.0. This marks a big milestone since Glimmer has outgrown its single-library roots and has become an assortment of Ruby gems that work together, such as Glimmer DSL for SWT (JRuby Desktop Development GUI Library), Glimmer DSL for Tk (Ruby Desktop Development GUI Library), Glimmer DSL for Opal (Web GUI Adapter for Desktop Apps), Glimmer DSL for XML (& HTML), and Glimmer DSL for CSS.
It was great while it lasted
Tags: iot, ifttt, automation
Published: 2020-09-25 00:39:50

As of today, I have 13 days to either disable or somehow move a number of bindings I have on "If This Then That" (IFTTT). They have changed there policies to have unlimited amounts of bindings as a paid user, but limit the total number of bindings to only 3 bindings for a free account. And while the price is right (you can set your own now, and "pay forever" that price) I am a developer... which means I like to work around problems if I can. I may purchase it... they have been a great service for as long as I've used them. That said, I've decided to start giving [Node Red](https://nodered.org/) a try. Per Wikipedia "Node-RED is a flow-based development tool for visual programming developed originally by IBM for wiring together hardware devices, APIs and online services as part of the Internet of Things". What that translates to for me is, Node Red is a more complicated, powerful version of IFTTT that can be hosted locally. I've personally spun up a docker container on my 24/7 low powered linux machine, and set up a flow for doing speed tests. While it's not as nice as my original script (that would save to google docs) having a version that is actually working (my cron job was removed on a re-image of the machine, and I never put it back). We'll see how it goes. Most of the bindings I've used on IFTTT have been Web-Hooks that send emails or messages. Node Red appears to have this functionality baked in. Now it's a matter of getting these services written in Node red, and changing the bindings on my apps, wish me luck!
Delegación de eventos en Javascript
Tags: javascript
Published: 2020-09-25 00:32:50

La delegación de eventos en Javascript nos sirve en muchos casos y de determinadas maneras, supongamos que tenemos una web app en donde existen varios formularios, con muchos botones y cada vez que hacemos click en un botón este tiene que ejecutar un evento. Lo más normal del mundo es recurrir a recorrer cada boton el cual tiene asignada una clase un un id ( siempre es preferible usar id y dejar los selectores de clase para css) y por cada vez que se ejecute un click se dispare un evento por cada boton.

Bien, digamos que en una aplicación chica, esto puede sonar razonable, pero en cuanto necesitemos agregar complejidad y tengamos muchos botones que al hacer click despliegue el mismo evento… la aplicación estaría cargando en el DOM un evento por cada boton, por lo que el rendimiento se vería afectado, además de esto por ejemplo si al hacer click ese evento creara por ejemplo otro formulario con otro botón en la misma página, el evento de ese botón no sería escuchado.

La mejor solución para esto es la delegación de eventos, que nos permite manejar esto de una mejor manera:

Lo ideal es encerrar los botones y/o cualquier tipo de elementos que maneje un solo evento adentro de un contenedor, como un div, y a los botones proporcionarles un id idéntico para todos:

```html
<div id="losBotones">
    <div id="losBotones">

    <button id=‘boton’></button>

    <button id='boton'></button>
   
    <button id='boton'></button>

    <button id='boton'></button>

    <button id='boton'></button>
</div>
```

Ahora guardar ese contenedor en una variable y escuchar el evento del contenedor losBotones:

```javascript
const boton = document.querySelector('#losBotones’);

boton.addEventListener('click', (e) =>{

    if(e.target.id === 'boton'){

    alert('Es un boton');
    }
})
```

Creamos una función anónima y le pasamos por parámetro (e), que nos va a servir para poder escuchar el target, y agregamos una condición para que solo nos ejecute una función alert si damos click un botón, por lo que el div entero quedaría ignorado.

Y si nos ponemos mas juguetones con el target del evento podemos hacer cosas como cambiar el color de cada boton, como para que se entienda mejor el concepto:

```html
<html>
<head> <title>Delegación de eventos</title>
<body>
    <div id="losBotones">

        <button id='boton' data-color="red">Boton1</button>

        <button id='boton' data-color="green">Boton2</button>

        <button id='boton' data-color="blue">Boton3</button>

        <button id='boton' data-color="black">Boton4</button>

        <button id='boton' data-color="orange">Boton5</button>
    </div>

<script>
const botones = document.querySelector('#losBotones');

const boton = document.querySelector('#boton')



botones.addEventListener('click', (e) =>{

if(e.target.id === 'boton'){

    e.target.style.background = e.target.dataset.color;

    }
})
</script>

</body>
</html>
```
map, filter y reduce
Tags: javascript
Published: 2020-09-25 00:29:46

map(), este método lo que hace es transformar todos los elementos de la lista o array, veamos:

```javascript
let numeros = [1,2,3,4,5,6,7,8,9,10];

numeros.map(elementos => elementos * elementos);

=>
[1, 4, 9, 16, 25, 36, 49, 64, 81, 100];
```

Lo que estamos haciendo es recorrer todos los elementos del array numeros y le asignamos su valor a una variabla llamada elemento, luego haber asignado el valor creamos una función flecha anonima, que nos devolverá los elementos del array multiplicado por su mismo valor, o sea , 1*1, 4*4 etc..

De igual forma si solo queremos obtener los elementos sin hacer nada, podemos hacerlo:

```javscript
numeros.map(elementos => elementos);
 [1,2,3,4,5,6,7,8,9,10];
```

filter(), el método filter nos filtra todos los elementos que cumplan con una condición, un ejemplo podría ser, una aplicación que contiene circulos en su pantalla y queremos acceder solo a los circulos que tienen el color rojo:

```javascript
let circulos = [‘circulo1Rojo’, ‘circulo2Verde’, ‘circulo3Rojo’, ‘circulo4Amarillo’, ‘circulo5Rojo’];

botones.filter(circulosRojos => circulosRojos.includes(‘Rojo’))

=>
[“circulo1Rojo", “circulo3Rojo", “circulo5Rojo"]
``` 

reduce(), este método sirve para recudir todos los elementos a un único valor, su uso es simple,para usarlo tenemos que saber que el primer parámetro es el valor actual, como un contador y el siguiente parámetro son los elementos que existen adentro del array, en este caso lo llamamos valorSumar, adentro de el están los números que existen en la variable numeritos.

Cuando nosotros retornamos valorActual+valorSumar; lo que estamos haciendo es recorrer todos los elementos que se encuentran en valorSumar, que son todos los numeros del array, y sumarlos alvalor actual.

```javascript
De esa forma estamos reduciendo todos los elementos a un solo valor.

let numeritos = [1,2,3,4,5,6,7];

let contarNumeros = numeritos.reduce((valorActual, valorSumar) => {

return valorActual+valorSumar;

})

console.log(contarNumeros);
```
```javascript
=> 28
```
Métodos y funciones para arrays en Javascript.
Tags: javascript
Published: 2020-09-25 00:26:00

A partir de las versiones de ES6 se agregaron varias funcionalidades y métodos que sirven para no rompernos tanto la cabeza, o por lo menos hace el código más legible, sobre todo cuando agarramos código de otro y no entendemos que es lo que está haciendo, dejo algunas cosas interesantes que estoy usando últimamente para prescindir de hacer cosas poco legibles.

1- Prescindir del for de las versiones anteriores.

Ahora es mejor usar for of, ya que vamos a ahorrarnos quizá dolores de cabeza para entender que estamos haciendo con o en el ciclo, ejemplo:

```javascript
let usuarios = ['Usuario1', 'Usuario2', 'Usuario3', 'Usuario4', 'Usuario5']

for(let recorrerNombres of usuarios){
      console.log(recorrerNombres)
}
```

Esto nos devuelve cada elemento del array sin la necesidad de usar un contador.

```javascript
=>
Usuario1
Usuario2
Usuario3
Usuario4
Usuario5
```
Peeero, que pasa cuando además de obtener el elemento, también necesitamos obtener el índice? En ese caso entra en juego forEach, esto ya es un método, y se utiliza así:

```javascript
let usuarios = ['Usuario1', 'Usuario2', 'Usuario3', 'Usuario4', 'Usuario5']

usuarios.forEach((elemento, indice) =>{
    console.log(elemento)
    console.log(indice)
})
```

```javascript
=>
Usuario1
0
Usuario2
1
Usuario3
2
Usuario4
3
Usuario5
4
```

2 - Recorrer arrays con condiciones de búsqueda:

A veces necesitamos comparar si existe o no existe tal elemento adentro de un array, o incluso su índice.
Un ejemplo sería un botón que elimine a un de este foro con un click, para eso tendríamos que recorrer todos los usuarios y encontrar la coincidencia en base a la condición que impusimos:

```javascript
let usuarios = ['Usuario1', 'Usuario2', 'Usuario3', 'Usuario4', 'Usuario5']

usuarios.some(elementos => {
  if(elementos === 'Usuario2'){
    console.log('Usuario eliminado')
 }
})

PD: El método some() solo busca que se cumpla una sola condicion, por lo que encontrar un solo elemento le basta.
```

Pero también podemos no solo encontrar una coincidencia adentro del array, sino varias en todos los elementos, esto lo podemos hacer con el método every():

```javascript
let usuarios = ['Usuario1', 'Usuario2', 'Usuario3', 'Usuario4', 'Usuario5']

usuarios.every(elementos => {
 if(elementos.includes('Usu')){
    console.log(`Todos los elementos contienen "Usu"`);
 }
})
```

```javascript
=>
Todos los elementos contienen "Usu"
```
Please recommend me a tech stack
Tags: hacktoberfest, webdev
Published: 2020-09-25 00:04:00

This hacktoberfest, I want to give back something to the community where I'm living. I'm thinking of creating a map which you can review the living condition of certain area. 

1. Once you give the lat long you can see reports regarding crime rate, noise, air quality, pollution etc. Each criterion is going to be on a different layer of the map which you can turn on off. 

2. There should also be historical reports to see simple charts and stuffs. 

3. Information may come from official sources or from user reports. Users can also upload reviews and pictures. 

4. The site should be in multiple language.

5. Scalability would be great.

I code in php and JavaScript and know a bit about golang and lua. I'm also familiar with nginx, redis, mariadb, clickhousedb. I can learn new things if necessary. Thank you ❤️.
RSpec: before и after хуки
Tags: ruby, rspec, testing
Published: 2021-01-19 11:07:48

---
title: RSpec: before и after хуки
published: true
date: 2020-09-25 00:00:00 UTC
tags: ruby, rspec, testing
canonical_url: https://vasily.polovnyov.ru/posts/before-after-hooks.html
---

Почему-то сталкиваюсь с такими тестами:

```ruby
describe "#foo" do
  before :each do
    # ...
  end
end
```

`:each` можно смело опускать: это поведение по умолчанию для `before`. Лучше так:

```ruby
describe "#foo" do
  before do
    # ...
  end
end
```

И несколько интересных фактов о before и after хуках:

1. `before :each` и `before :all` — алиасы для `before :example` и `before :context`.

2. `before :each` выполняется перед каждым примером, `it do...end`. `after :each` — после.

3. `before :all` выполняется перед контекстом (`context`, `describe`). `after :all` — после.

4. В `before :suite` нельзя задавать переменные экземпляра (instance var, `@foo`)

5. Только в `before :each` можно мокать.