teleren/devto huggingface dataset:
Test-Driven-Development
Tags: testing, productivity, spanish, argentina
Published: 2021-01-06 22:07:03

Primero hablemos sobre el desarrollo comenzando por las pruebas, éstas acarrean algunas ventajas, tanto de orden técnico como metodológico. Aquí algunos ejemplos:
 
* Al escribir antes las pruebas, las mismas se convierten en especificaciones de lo que se espera como respuesta del objeto ante el envió de un determinado mensaje. Por lo tanto, no se debería codificar nada que no tenga su prueba de antemano, de modo tal de no implementar nada innecesario.

* Al ir definiendo de a una prueba a la vez, tenemos un desarrollo incremental genuino, definido por pequeños incrementos que se corresponden con funcionalidades muy acotadas.

* Permiten independizarse del factor humano, con su carga de subjetividad y variabilidad en el tiempo haciendo que sean mas optimas y precisas.

* Al necesitar éstas un costo muy bajo para poder ser ejecutadas, generan que el programador genere un hábito de testear y a su vez le de cierta confianza en que su código esté correcto o pase la prueba.

##**Y el TDD? Ahí va...**
Ésta forma de trabajar fue propuesta formalmente por el señor [Kent Beck](https://es.wikipedia.org/wiki/Kent_Beck) donde habló sobre una práctica de desarrollo denominada Test-Driven-Development.
Ésta práctica nos obliga a pensar a través de la interfaz necesaria antes de desarrollar

Según Beck *TDD* incluye tres practicas fundamentales:
* Test-First: Escribir las pruebas antes del código.
* Automatización: Las prubas deben correr con la mínima intervención humana.
* Refactorización.

Muy lindo hasta ahora pero, cuales son los pasos para aplicar TDD?
*Pasos para aplicar TDD*

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

1. Escribir el test, el cual no pasará.
2. Agregar el mínimo código posible para que la prueba pase.
3. Refactorizar.

Fácil no? Claro que si!.
De esta manera el desarrollador podrá avanzar de manera mas lenta pero segura... siempre hay que tener en cuenta hacer *baby steps*.

*Partes del post fue obtenido del libro del Profesor 
Carlos Fontela de la Facultad de Ingeniería de la Universidad de Buenos Aires.*
Freshly-baked apps every midnight
Tags: github, react, vue, javascript
Published: 2021-01-06 20:26:08

---
title: Freshly-baked apps every midnight
published: true
description: I hate running commands to generate new projects, so I created self-updating project templates.
tags: GitHub, React, Vue, JavaScript
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://notes.dt.in.th/20210106T194753Z6845
---

I hate running commands to generate new projects because it is relatively cumbersome compared to jumping into an existing project.

Whenever I want to work on an existing project, I just jump right in and begin developing it, either on my local machine, or using many cloud-based development tool. [Codespaces](https://github.com/codespaces), [Gitpod](https://gitpod.io/), [CodeSandbox](https://codesandbox.io/), etc. which can launch a development environment right from a GitHub repository.

On the other hand, when generating projects using a CLI, there is no repository to begin with. So I must start from my machine. Furthermore, I had to install dependencies twice — once for the project generator, and once more for the project itself.

So I created [**the Fresh App Factory**](https://github.com/fresh-app/factory) which in turn creates *self-updating project templates.* Every midnight UTC, it runs popular project scaffolding commands and pushes the resulting project to GitHub repositories. All of this is powered by GitHub Actions.

{% github https://github.com/fresh-app/factory %}

## React

Create React App

- <https://github.com/fresh-app/fresh-react-app>
- <https://github.com/fresh-app/fresh-react-app-typescript>

> I initially experimented with this idea since late 2019, so you can [take a look at how a freshly-generated React app's README file evolves over the years](https://github.com/fresh-app/fresh-react-app-typescript/blame/main/README.md).

Vite

- <https://github.com/fresh-app/fresh-vite-app-react>
- <https://github.com/fresh-app/fresh-vite-app-react-ts>

Next.js

- <https://github.com/fresh-app/fresh-next-app>
- <https://github.com/fresh-app/fresh-next-app-typescript>

## Vue

- <https://github.com/fresh-app/fresh-vite-app-vue>
- <https://github.com/fresh-app/fresh-vite-app-vue-ts>

## Vanilla

- <https://github.com/fresh-app/fresh-vite-app>

## etc.

Further template projects may be added in the future. Check out <https://github.com/fresh-app>.
Free premium Tailwind CSS theme for Open Source!
Published: 2021-01-06 21:33:55

[TailUIKit Pro](https://easytailwind.now.sh) is a beautiful Tailwind CSS template that I have been working on, and I am excited to announce, **completely free for open source projects**.

It includes:
* A multipurpose landing page 😯
* A beautiful app landing page 🤯
* A stunning blog overview page 🤯
* An aesthetic pricing table 😊
* Awesome animations 🤩

Pics:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4awn7w95y3uzduzrg78d.jpeg)


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



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



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zv68y8cyr9kfv2qmajze.jpeg)
<br>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tyd8cemk79vsp2q8s8zx.jpeg)
<br>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ookt7a2vrx8kfvwpkte.jpeg)

Open source projects can apply [here](https://forms.gle/ChmmXZAaU1RQUEVM8)
5 things to watch out for in automated regression tests
Tags: testing, regression, management
Published: 2021-01-06 21:33:51

- [What are regression tests? (in short)](#what-are-regression-tests-in-short)
- [The problems](#the-problems)
  - [1. Change of the output formats](#1-change-of-the-output-formats)
  - [2. Designed-in assumptions about the test environment](#2-designed-in-assumptions-about-the-test-environment)
  - [3. Errors in maintenance](#3-errors-in-maintenance)
  - [4. Changing operators.](#4-changing-operators)
  - [5. Not treating your tests as any other codebase](#5-not-treating-your-tests-as-any-other-codebase)
- [Conclusion](#conclusion)

## What are regression tests? (in short)
You design regression tests to detect issues that might come as side-effects of implementing other features you've already tested. 

## The problems
The biggest problem facing regression tests are:

### 1. Change of the output formats
Most common. The changes may be so minor that manual testers would barely notice. Automated tests, however, are sensitive and brittle, unable to differentiate between improvements and bugs. The whole suite could have to be updated if we only change metadata from some Map[String, String] to Map[String, Any] to keep all formats.

### 2. Designed-in assumptions about the test environment
Test suites may break when moved to different environments or when the configuration is changed (when they are not masters of the environment).

### 3. Errors in maintenance
Writers of automation tests repairing tests make mistakes, introducing bugs into the test suites. Regression test suites then develop regression bugs themselves, which can show after some time.

### 4. Changing operators.
Test suites may require up-skilled people and knowledge to run and maintain. People change positions and jobs. If person X disables some test and then is let go, person Y is just running tests unaware there might be a problem.

### 5. Not treating your tests as any other codebase
Very often, and not only in regression testing, but in general, people treat their tests as they treat their documentation. Tests should be treated as any other codebase, there should be standards and design principles applied. You just stop just shy of creating tests for your tests. It actually should work in unison. You can view it as your Test Code testing your Product Code and vice versa.

## Conclusion
In conclusion, people tend to invest in regression automation a lot. Sadly, they often find that the tests stopped working sooner than later. The tests are out of sync with the product. They demand repair. They're no longer helping find bugs. Testers respond by updating the tests or just adding new ones ending with 5-6 000 test cases that no one knows what they are doing, and everyone just prays it is ok. I know a company where two full-time SDETs were needed for patching them every day and adding more. Hundreds of tests disabled because they don't have time.

From all this, uncontrolled maintenance cost is probably the most common outcome. It results in companies then rather "forgetting" the regression suite and testing than repairing it.
Fix the previous mistake
Tags: javascript, opensource, github
Published: 2021-01-06 21:32:19

In this post, I want to talk about my a PR I sent about 2 months ago, and how do I pick it up and improve it to meet the requirements.

### Old issues

In the Hacktoberfest, I gave myself a new challenge, browser extensions. I checked many repos and worked on some issues. One of them is to [add keyboard shortcuts for image size selection](https://github.com/infokiller/web-search-navigator/issues/91). In my last PR, my code works fine, but it's duplicate, long, and seems to be breakable.

There were some issues in my old PR, firstly, I use some brittle attribute names to get the elements which might be broken once the class names have been changed.

```javascript
const openTool = document.querySelector(
        '[class="PNyWAd ZXJQ7c"][jsname="I4bIT"]');
```
Secondly, I neglected the usage of different languages.
```javascript
if (dropDownWithSize.innerHTML == 'Large') { /*...*/ }
```
In other languages, the `innerHTML` values are not **Large**, therefore, this line of code will not work.

Thirdly, I didn't test all the scenarios. In some cases, the variables I defined might be null or undefined, however, my functions didn't check their value before using them, which will be causing errors while running the extension.

Lastly, there were several parts of my code that were similar or even duplicate which could be combined and reuse.

### New solution

To solve these issues, I did some research in order to find alternatives. For example, instead of checking the `innerHTML` value, I go up to the parent component and check the `aria-label` value. In this case, the `aria-label` won't be affected in different languages.
```javascript
if (dropDownWithSize.getAttribute('aria-label') == 'Large') { /*...*/ }
```

To utilize and shorten my duplicate code, I use the basic method, drawing flowchart to find the solution to design my code. In my case, I need to *reopen* a dropdown to *re-select* an element. However, this element should be reused instead of using `getElement` function call again. I design a function with `getElement`, therefore, once I finish dealing with the reopened dropdown, I can simply call my customize getElement function again to get the same element, but with less code.

---

After truly working on solving this old issue, I realized that I overestimated the difficulty of it. When I receive the owner's change request, I was anxious and didn't have the confidence to make these changes. However, it turns out that I might actually able to solve these issues that I thought I couldn't, I just need to calm down, breaking things to pieces, and make a plan.
Vancouver Seo Expert

Tags: seo, website
Published: 2021-01-06 21:19:35

Our Service is SEO in Vancouver, BC. Our Agency Can Help You Rank At The Top Of Google. Look no further! If You are Looking For The Best Local Vancouver SEO Services? <a href="https://www.cancron.ca/seo-vancouver-british-columbia/">Vancouver seo expert</a> team know to get more leads for your business with in said time-frame.
DevAnalytics at DOHackathon: final steps
Tags: dohackathon, typescript, devanalytics, flask
Published: 2021-01-06 21:01:05

This is my last post about [DevAnalytics](https://dev-analytics-frontend-tudwb.ondigitalocean.app/) before the submission.

Since the last time, I did what I promised and some more.

## What I promised
- On the backend side I removed logging of the incoming HTTP requests, as they include the DEV API Key that is supposed to be secret. Now even me I don't have access to them, not to mention the unlikely(?) case that my account gets compromised.

This was quite easy to do. I'm using flask on BE side and I just had to add these two lines:

```py
log = logging.getLogger('werkzeug')
log.setLevel(logging.ERROR)
```

- I added some error handling on the Frontend side. In case, you enter a wrong API key, or there is some other problem, you get a nice error message:

![Error message](https://dev-to-uploads.s3.amazonaws.com/i/b8h8i4llbt2j6uskiyr6.png)

Additionally, once you ask for the stats the screen is cleared first.

## The extra

I added some more statistics about average numbers.

![Averages](https://dev-to-uploads.s3.amazonaws.com/i/khpevql82qqylthphuyi.png)

## What is next?

The submission. I have some more ideas, but I think I'll only implement them after the hackathon.

Thanks for following through and feel free to try [DevAnalytics](https://dev-analytics-frontend-tudwb.ondigitalocean.app/) and leave a comment.
How would you design a tiered plan backend?
Tags: discuss, java, architecture, help
Published: 2021-01-06 20:54:30

Hello everybody, i want to learn about a plan based access and rate limiting of rest services. How would you design this system with spring boot? Any suggestions are welcome. Thank you ! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/drwk9ilgoj4tnte09uqh.png)
How to Scrape Google Maps
Tags: googlemaps, google, maps, scraping
Published: 2021-01-06 20:32:32

## Scrape Google Maps (Places)

Professional marketers, researchers, and data scientists use the data from Google Maps to build models or reach clients. There is a vast amount of company contacts stored on Google that can be exported into a file. In the following article, I'll show the quickest and simplest way of doing so.

## Getting started

1. Create an account at [Outscraper](https://outscraper.com/google-maps-extractor/) - the service we are going to use to extract the data and emails from companies' websites. Doing so manually even for 25 sites is unhumanistic.

2. Open [Profile page](https://app.outscraper.com/profile) and connect a valid credit card. There is a [Free Tier](https://outscraper.com/google-maps-extractor/) that we can use each month. You will not be charged for the usage belove the Free Tier.

3. Open [Google Maps scraper](https://app.outscraper.com/googleMaps) and enter categories, locations, and other parameters.

4. Check the queries before starting a task.

5. Make sure your task is limited to the amount of the data that you are comfortable with (don't forget to check prices for the usage above the Free Tier).

6. Run the task.

7. After any task is finished you will receive an email with the link to S3 storage where the results are saved. Alternatively, you can download results and see tasks progress from the [Tasks page](https://app.outscraper.com/tasks).


Tasks page:
![Tasks page](https://dev-to-uploads.s3.amazonaws.com/i/f02xwylbe4t8qb3tw4ag.png)


Use this promotion code on the [Profile page](https://app.outscraper.com/profile) to receive a 10% discount: `GOOGLEMAPSSCRAPER`.
Head start with CSS Animation with examples
Tags: css, beginners, html
Published: 2021-01-06 20:27:57

I continue fixing my CSS weakness and today is time for the CSS Animation. 

CSS help us create animation using the keyword *@keyframes* , it helps to set the initial state for properties and the amount of time it will get during the animation.

We change size, color, size, visibility and more properties.

##1- Create my keyframe animation

The keyframes require the name and using from to help us to scope from begin to end which properties are modified.

For example the animation *myanimation*, change border radius from 0 to 50%.

```css
@keyframes myanimation {
	from {
		border-radius:0px
	}
	to {
		border-radius: 50%;
	}
}
```

{% jsfiddle https://jsfiddle.net/danywalls4/ubxfo490/5/ result,html,css %}

## 2- Connect my keyframes with an element

My element needs to know the   *animation-name* and *animation-duration*.

```css
animation-name: myanimation;
animation-duration: 3s;
```

{% jsfiddle https://jsfiddle.net/danywalls4/ubxfo490/7/ result,html,css %}

Another way for write your animation is with  % instead from to, because it is flexible to future changes.

{% jsfiddle https://jsfiddle.net/danywalls4/ubxfo490/43/ result,html,css %}

An Others' properties is *animation-delay*  and *animation-iteration-count*, these 2 are not required but help us to create nice effects.

- animation-delay: start animation after delay;

- animation-iteration-count: set how many times is the animation run but by default 1, it can be changed by other numbers values or infinite to not stop.

Some times we want to start elements with the keyframe state for these case use *animation-fill-mode* with the value *backwards*.

```css
animation-fill-mode: backwards;
```

If you want to keep the last element state use option *fowards*. 

```css
animation-fill-mode: fowards;
```
For both situations the use *both* keyword.

```css
animation-fill-mode: both;
```

## That's it!
This is a quick overview with animation in CSS, you can play with it and build great animation in css like that:

{% jsfiddle https://jsfiddle.net/danywalls4/ubxfo490/80/ result,html,css %}

If you enjoyed this post, share it!

Image thanks [Gensa Hub.](https://unsplash.com/photos/DNG4HqwNt2Q?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)
CSS Background color en Textos
Tags: css, webdev, spanish
Published: 2021-01-06 20:22:45

Los degradados de color en un sitio web son detalles muy llamativos que dan peso a cierta sección, pero no solo podemos utilizarlos como fondo de un contenedor o banner, también podemos agregar un degradado de color a títulos.

Primero tenemos que definir el texto al que aplicaremos el degradado:

```html
<h1 class="gradient">Mi super titulo</h1>
```

Una ves tenemos listo nuestro titulo, solo tenemos que aplicar estilos generales:

```css
h1{
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 70px;
    font-weight: bold;
    text-transform: uppercase;
}
```

Para agregar el degradado necesitamos una propiedad de css llamada 'linear-gradient', que se utiliza de la siguiente manera:

```
background-image: linear-gradient(direction, color-1, color-stop2, ...);
```

- direction: es la dirección en la que el degradado trabajara.
- color-1: en color principal o de inicio del degradado.
- color-2: en color secundario o de cierre del degradado.

  El código con linear-gradient aplicado se vería así:

```css
.gradient {
  background: linear-gradient(to right, #30CFD0 30%, #520AAB 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

```

### Resultado:
{% codepen https://codepen.io/DorianMorones/pen/rNMKjWy %}
Generating NPM packages - Vue 3 typescript component framework part 2
Tags: vue, typescript, tutorial, webdev
Published: 2021-01-06 20:12:36

Hey,

Let us build a component Library together!
On the way, we will learn vue3 and typescript!
And many many more tools!
Here is the second video of the course!
We will finish our new CLI script and we will be able to generate npm packages with a basic setup for creating our components!

{% youtube 3Ctg6ra_9yw %}

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
adapttive.com - a blog built with Strapi and Gridsome
Tags: dohackathon, gridsome, strapi, blog
Published: 2021-01-06 19:52:57

### What I built
I created a Gatsby app in 2019 to build my blog personal blog but couldn't move any further than the below-landing page.
In Dec 2020, **Digital Ocean Dev Hackathon** inspired me to restart my personal blog and I almost completed it.
![Started with Page](https://dev-to-uploads.s3.amazonaws.com/i/g55cg956ar8atkk5fwf2.png)

#### Category Submission: 
Personal Site/Portfolio

#### App Link
https://adapttive.com


#### Screenshots

##### My Profile
![My Profile](https://dev-to-uploads.s3.amazonaws.com/i/7j2rtwoi4kap5fkzt3kx.png)

##### My Blogs
![My Blogs](https://dev-to-uploads.s3.amazonaws.com/i/47mxxa04tzwqdhho162b.png)

##### My Projects
![My Projects](https://dev-to-uploads.s3.amazonaws.com/i/lcr953sjuflsw9a6ay0e.png)


#### Description
My personal website:
- Blog
- Projects
- My Profile
- Contact Us

#### Link to Source Code
- Strapi Blog Template
https://github.com/adapttive/strapi-template-blog

- Gridsome Starter for Strapi Blog
https://github.com/adapttive/strapi-starter-gridsome-blog

#### Permissive License
MIT

### Background
I am a Magento Developer, who built a personal blog on Nodejs-Strapi and Gridsome (never have any hands-on).

#### How I built it 
- Followed the documentation and started coding.
- Development Deployed on Netlify + Oracle Cloud
- Production Deployed as an app on Digital Ocean platform.

#### Additional Resources/Info
https://adapttive.com/blog/how-this-blog-is-built
New to Rust
Tags: rust
Published: 2021-01-06 19:38:11

# Hello
I am new to the Rust language and was hoping that, by posting here, I would be able to get some tips on some of the best ways to learn the language. I have been using JavaScript/TypeScript for almost 5 years now and Python for about 7. I have been wanting to learn C++ for game design but I keep seeing Rust beating it out in the sense that it is a bit easier to learn and can sometimes be more performant. I am looking for any project recommendations, tutorial videos, courses, blog posts or books to learn the language. 

# Loving It So Far
From what I have gone through on the rust-lang.org website as well as The Rust Programming Language book I am really enjoying the language and what it has to offer. I know that "The Book" has some fun little projects that you get to build to see the ins and outs of the language and put the basics together but I am wanting to learn how to use Rust for backend development as well as possibly for game design.

# Conclusion
Thank you to anyone that responds to this post and helps out. For those of you that are looking forward to my Udemy course on Angular and Nestjs I took a little break over the holidays from writing out the material but should be back to recording soon and will have the course ready hopefully by early to mid March.