teleren/devto huggingface dataset:
JavaScript - Debounce
Tags: codesandbox, javascript, programming, webdev
Published: 2021-07-23 03:36:12

## What is debounce
Waiting until a certain amount of time has passed before triggering an event

## Use cases examples

- search box
- auto saving input

## Key points
- utilize `setTimeout()` and `clearTimeout()`
- `clearTimeout()` at the beginning so that when we get an event repeatedly, reschedule triggering a callback

## Demo

{% codesandbox y1vm5 %}

## Reference

This article by Josh Comeau explains the details very well!
[debounce snippet function in modern es6 vanilla JavaScript](https://www.joshwcomeau.com/snippets/javascript/debounce/)
Hola mundo! BEP20
Tags: solidity, blockchain, cryptocurrencies, crypto
Published: 2021-07-23 03:15:47

---
title: Hola mundo! BEP20
published: true
description: Lanzamos un ERC20 o BEP20 en Binance Smartchain, agregamos liquidez en Pancakeswap y lo trackeamos via Poocoin
tags: #solidity, #blockchain, #cryptocurrencies, #crypto
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uq10l9wdicglalepujh.png
---

Binance Smart Chain es muy similar a Ethereum Mainnet con la diferencia que Binance sacrifica decentralización a cambio de escalabilidad. La buena noticia es que Binance es 100% compatible con la Ethereum Virtual Machine (EVM). Esto significa que podemos lanzar Smart Contracts en Binance igual que como lo hacemos en Ethereum. A continuación lanzaremos un Token ERC-20 que en Binance le llamamos BEP-20 pero funcionan exactamente igual.

{% youtube LJ9QYFa0v18 %}

## Consigue tokens BNB

3. Conecta Binance Mainnet a tu Metamask, sigue [estos pasos](https://academy.binance.com/en/articles/connecting-metamask-to-binance-smart-chain)
1. Compra o tradea tokens BNB en [binance.com](https://www.binance.com/)
2. Haz "withdraw" a tu address de [Metamask](https://metamask.io/)

## Lanza un Token BEP20

Ahora puedes lanzar tu token desde [Remix](https://remix.ethereum.org/).

```solidity
// SPDX-License-Identifier: MIT
pragma solidity 0.8.6;

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/v4.1.0/contracts/token/ERC20/ERC20.sol";

contract MyERC20 is ERC20 {
  constructor () ERC20("My Token", "TKN") {
    _mint(msg.sender, 1000000 ether);
  }
}
```

## Agrega liquidez en Pancakeswap

1. Crea un par de liquidez en [Pancakeswap](https://pancakeswap.finance/add)
2. Monitorealo desde [Poocoin](https://poocoin.app/)
Software Architectural Patterns: MVC
Tags: architecture
Published: 2021-07-23 03:03:56

Architectural patterns in software engineering describe the way a system is designed. One goal of architectural patterns is to separate the UI programming from the business logic. When following an architectural pattern, the code is unlikely to become 'spaghetti code,' because the programmer now has parameters that they must work within when building their program.

The pattern discussed here today is the MVC pattern. MVC stands for Model-View-Controller. This pattern is made up of three interconnected components and was originally designed for building desktop GUI applications. In today's programming world, it's used in many places such as mobile and web application development.

So, what do the three interconnected components that make up the Model-View-Controller design pattern do?

## Model
The Model is responsible for handling the business logic of the program, and can also encompass things such as networking code, persistence code, parsing, extensions, and more.

## View
The View handles anything related to user interface components. These are usually reusable. In the iOS ecosystem, an example of a view would be a UIButton. Views are updated by the Controller after the Controller has been notified of what data to use by the Model.

## Controller
The Controller is a mediator between the Model and View. The Controller receives user input from the View, then updates the Model with the data received from the user input. After the Model is updated, it then notifies the Controller of the change, and the Controller then updates the View.

Here is a visual of how this all works together:
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627009312701/Eht6ifirz.png)
As you can see, the three components work together in a (somewhat) harmonious cycle. Remember, when using a design pattern, there are now parameters by which the programmer should aim to abide by. Of course, like everything in software, MVC is not perfect. One of its major flaws is that the Controller is responsible for so many things that it can quickly become a massive, cluttered mess.

The main idea behind this design pattern is separating the data (model), how the data is displayed (view), and what controls and manipulates the data (controller).

Example of MVC Using Swift: https://github.com/andrew-lundy/mvc
TDD Conference 2021 - Agile Pain Relief Through Technical Excellence - James Grenning
Tags: tdd, agile, programming, oop
Published: 2021-07-23 03:01:20

First International Test Driven Development took place on July 10th. 

In this series, I will include every talk together with my notes and further reading.

Hopefully, a lot of readers will watch and rewatch the talks, as they are worth several reviews.

Let's continue...

## Bio 

One of the original signatories of the Agile Manifesto, James Grenning trains, coaches and consults worldwide. With decades of software development experience, both technical and managerial, James brings a wealth of knowledge, skill, and creativity to software development teams and their management. As his professional roots are in embedded software, he is leading the way to introduce Agile development practices to that challenging world.

> TL;DR: We should aim for technical excellence.

## Talk

{% youtube Q9dSXcIIjMk %}

# My Personal notes 

- The industry suffered from defects, delays, and frustration.
- [Agile manifesto](https://agilemanifesto.org/) was made by technical people who focused on people
- Scrum is about exposing inadequacies and make them transparent, so the organization can see them and fix them.
-- Unfortunately, many organizations adapt their bad models to look like scrum.
- [Deming Cycle](https://en.wikipedia.org/wiki/PDCA) is pretty similar to TDD.
- Scrum is followed by dogma followers.
- You can learn in a steady pace, but if you have bad fundamentals you will encounter a plateau.
- If you iterate and save your test at the end, you end up getting flooded by pressure.
- We need to aim for technical excellence.
-- Hacking new features, and managing bugs is not excellence.
- incremental management needs incremental engineering.
- There are 6 scrum masters for every 1 scrum developer.
- Sprint is a bad world because it consumes athletes.
- Iterative planning is easy, technical excellence, and respecting people are hard.
- Fast feedback is about staying focused.
- A bug is not a bug until the root cause is found.
- When you fix a bug, other bugs come to the funeral.
- We make mistakes, with TDD, mistakes jump in our faces.
- Getting regular rewards is much better than getting a big reward at the end.
- We can program for several years without improving.
- We can do TDD even on embedded systems. So "we are special" is not an excuse.
- Everyone thinks is special.
- The first step to recovery. Say it loud:

> I am a programmer and I write [bugs](https://dev.to/mcsee/stop-calling-them-bugs-57gl).

# Speaker Links

- Twitter [@jwgrenning](https://twitter.com/jwgrenning)
- Site [@wingman-sw.com](https://wingman-sw.com/)
- LinkedIn [@jwgrenning](https://www.linkedin.com/in/jwgrenning/)

* * *

Please follow TDD Conference on:

- [YouTube](https://www.youtube.com/channel/UCKn-DadPoyYssfAOMk1LSew)
- [Twitter](https://twitter.com/tddconf)
July 22nd, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-07-23 02:58:33

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Yoda wooping someone's butt](https://media.giphy.com/media/yDYAHbqe5DfyM/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-3lco %}

<center>

![Drama from Entourage screaming “Victory!”](https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif)
</center>
JSON and scehama validator libraries for Node
Published: 2021-07-23 02:09:11

Hi, I'm a new into the Node world, but I'm working in a project where are using a library called Joi for to validate the JSON data came from the request and other things. Then, i decided to search other library, and I found several, than I decided to choose some and create this post, my first post in this community.

### Yup

{% github jquense/yup %}

Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.

Yup's API is heavily inspired by Joi, but leaner and built with client-side validation as its primary use-case. Yup separates the parsing and validating functions into separate steps. cast() transforms data while validate checks that the input is the correct shape. Each can be performed together (such as HTML form validation) or seperately (such as deserializing trusted data from
APIs).



### ajv

{% github ajv-validator/ajv %}



### Superstructure

{% github ianstormtaylor/superstruct %}

Superstruct makes it easy to define interfaces and then validate JavaScript data against them. Its type annotation API was inspired by Typescript, Flow, Go, and GraphQL, giving it a familiar and easy to understand API.

But Superstruct is designed for validating data at runtime, so it throws (or returns) detailed runtime errors for you or your end users. This is especially useful in situations like accepting arbitrary input in a REST or GraphQL API. But it can even be used to validate internal data structures at runtime when needed.



### Forg Js

{% github oussamahamdaoui/forgJs %}
CSS Hover style all your buttons/links in one line
Tags: css, html, webdev
Published: 2021-07-23 02:02:49



Let's add a few buttons
```html
  <button class="primary">OK</button>
  <button class="secondary">Cancel</button>
  <button  class="accent">Delete</button>
```

Add some styles
```css
.primary{
 background:steelblue; 
}

.secondary..
.accent..

.primary:hover{
   background:blue;
}
```
Nice, but how about this ?

```css
a:hover, button:hover{
  opacity:0.8;
}
```
Great now we only need a single css class for all our buttons and our links, but, but but... opacity dims the element, so how do we make it brighter without dimming either the base or the hover?

🥁 🥁 🥁 Enter the brightness filter

```css
a:hover, button:hover {
  filter: brightness(1.75);
}

```

🆒 CSS filters Cool, but often overlooked.


{% codepen https://codepen.io/sajrashid/pen/gOWGVJG %}

EDIT: As suggested in the comments it's not cool to do this everywhere & it's certainly not meant to be a direction to do so... read the comments below for more
InfluxDB: casos de uso
Tags: nosql, usecases, influxdb, database
Published: 2021-07-23 01:49:31

![InfluxDB Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gt1cmjturxi51m76g4n.png)

## O que é o InfluxDB?

InfluxDB é um banco de dados NoSQL de código aberto designado para lidar com um alto volume de consultas e escritas por segundo sem causar muito impacto no sistema operacional. Se enquadra nos bancos de dados temporais (*time-series database*), e entre eles é o mais popular, talvez por integrar muito bem com MQTT, Grafana entre outras ferramentas, além de sua documentação e suporte impecável:grimacing:.

&nbsp;

## Quando utilizar?

Em um projeto a escolha do banco de dados a ser utilizado é muito importante, para isso devemos sbaer os casos de uso, quando usar SQL ou NO-SQL, qual banco utilizar, quando optar 
pelo uso de um banco de série temporal etc.

&nbsp;

### Quando usar bancos de dados temporais?

O principal caso de uso para bancos de dados temporais é quando você possui um grande volume de dados transitando em sua aplicação, se esse dados forem baseados em pontos e intervalos de tempo, e se armazenar o histórico completo de mudanças e variações, for importante para a sua regra de negócio, talvez você deva considerar usar um banco de dados de série temporal.

&nbsp;

### Quando usar o InfluxDB?

O mais popular dos bancos de dados temporais, mas quando utilizá-lo?

O InfluxDB é ótimo para aplicações de monitoramento em tempo real, em casos como esse há uma demanda enorme de leitura e escrita no banco de dados. O Influx possui muitas otimizações para manipular tempo e data, além disso ele foi construído para consumir o mínimo possível do sistema operacional.

Outro fator a se considerar é a sua sintaxe, o InfluxDB apesar de ser um banco NO-SQL, possui uma sintaxe muito semelhante ao SQL. Em um projeto que a maioria dos devs. e/ou DBAs estejam mais familiarizados com bancos SQL, mas que haja a necessidade de utilizar um *time-series database*, a curva de aprendizado para a migração da *stack* será muito menor.
usePrevious - React Hook
Tags: react, codesandbox, webdev, frontend
Published: 2021-07-23 01:41:17

This is a series of tying out the custom hooks introduced in the really good article by [team] (https://thesmartcoder.dev/author/team/) about useful React custom hooks.

[8 Awesome React Hooks](https://thesmartcoder.dev/awesome-react-hooks/)

### usePrevious

Remembering the previous value

{% codesandbox 2hrj5 %}
Keycloak instalação - P01
Tags: keycloak, ubuntu, postgres
Published: 2021-07-23 01:05:06

Nessa serie de  artigos vou abordar como realizar a instalação e configuração inicial do Keycloak. Ele é uma ferramenta gratuita mantida pela RedHat para gerenciamento identidade e permissões. 

Parte 01 - Preparando ambiente 
--------------------------------
Irei utilizar uma maquina com o Ubuntu server 21.04. Não vou abordar a instalação do SO, segui o padrão. No meu caso o sistema esta em inglês, com isso precisamos mudar o locale para pt-BR para o sistema identifique corretamente a língua usada e não gere conflitos de  acentuação e quebra de carácter invalido.

Aqui podemos ver o idioma configurado

```bash
locale -a
```
![Idioma configurado Ubuntu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxibmeh17s0uhmdto9vz.png)

Idioma definida como padrão

```bash
locale
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n49vx5kvh8xnlmhy04n.png)

Instalando e definindo o português como padrão, selecionamos as duas opções disponíveis e definimos como padrão a opção com UTF8 

```bash
sudo dpkg-reconfigure locales
```
![Configurando Locales](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3mh7y5zl0ae6mlawzya.png)

![Idioma padrão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4kejyy33o7wynomy1zn.png)

Após reiniciar, podemos confirmar que o idioma foi alterado.
![Idioma padrão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo8j3xis6hdqujhhaz14.png)
Kanban - Comece agora
Tags: agile, kanban
Published: 2021-07-23 00:57:47

Pessoal, vamos direto ao ponto. Kanban é uma metodologia de fluxo de trabalho contínuo. Embora seja cada vez mais popular atualmente, estas técnicas foram concebidas pela Toyota na década de 60.

Para a Toyota, o kanban trouxe mais transparência e visibilidade da cadeia de processos, reduzindo desperdício e facilitando a comunicação.

## Visão completa do fluxo

O kanban propõe a utilização de cartões ou post-its em um quadro para organizar o andamento do fluxo de trabalho e atividades. Ele também possibilita uma gestão em que toda equipe tem visibilidade de todo o processo. Sendo assim, a interação entre os membros é mais fluída.

![Kanban board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mf4lv5lofeg0jl49uq5.png)

## Prioridades

Um dos conceitos mais fortes no Kanban é o WIP (Work in Progress ou Trabalho em andamento). Ele consiste em definir as prioridades de trabalho em andamento para os membros da equipe. Limitar essa quantidade é um princípio base do Kanban.

## Facilidade para gestão

Os gestores de uma equipe orientada a Kanban tem visibilidade da evolução, status e responsáveis por cada tarefa de maneira muito prática, podendo definir datas de entrega com mais segurança.

![Gestão kanban](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9inucrlef7lymz8uo4t.jpg)

Vale apontar que essas facilidades também se extendem a todos os membros do time, que podem vir a ser futuros gestores.

## Ferramentas

Existem diversas ferramentas web ou aplicativos para fazer a gestão dos cartões online.

![Trello board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4d2gpslgpwxh9mcmpay.png)

Com certeza o [Trello](https://trello.com) é a ferramenta mais conhecida, mas também podemos citar o run-run-it, Asana, Jira dentre outros.

Mesmo que, onde você trabalha não utilize a metodologia kanban, por ser muito versátil, esses conceitos podem ser aplicados em sua vida pessoal ou mesmo em algum freelance que você trabalhe.

## Começando?

A melhor parte do Kanban é que ele é totalmente flexível e adaptável ao fluxo de entrega de qualquer negócio. Comece implementando seu fluxo atual dentro de uma ferramenta e com o tempo você evolui e o melhora.

---

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀
Programming Cookbooks Bundle 2021 by O’Reilly
Tags: python, programming, javascript, machinelearning
Published: 2021-07-23 00:43:52

![Humble Bundle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6e6dvgnm5bmu255he2c.jpg)

[Programming Cookbooks Bundle 2021 by O’Reilly](https://www.humblebundle.com/books/definitive-programming-cookbooks-oreilly-books?partner=indiekings)

Join O’Reilly in the coding kitchen to master your palate for great code! From mouthwatering Raspbery Pi's to perfectly season Python, cook up some killer code with eBooks like Python Cookbook, SQL Cookbook, and Raspberry Pi Cookbook.

Your purchase of this bundle helps support Code For America, which uses the principles and practices of the digital age to improve how government serves the American public, and how the public improves government.

This bundle launched on July 19, at 11:00 am PST and lasts through August 09, 2021.

Pay what you want and support charity!
HackerIntro Insights Newsletter
Published: 2021-07-23 00:41:27

---
title: HackerIntro Insights Newsletter
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Today, we're announcing a new take on presenting companies to software engineers. Instead of old and tired format of job ads (which are only read when somebody is actively looking), HackerIntro Insights newsletter is made of articles about companies — their challenges, history, culture. One can get an insight on things and projects before they even start.


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

We have one rule: it **must** be interesting. Doesn't matter if you're looking to find a new opportunity or not. This is something that would allow you to be aware of what's going on.

We're working with our first cohort of companies and signing up first subscribers. Exciting times ahead!

[Join HackerIntro Insights](https://hackerintro.com/insights)
Why using form fields as descendants of a Listview is a bad idea - #100DaysOfCode - Day 22
Tags: 100daysofcode, flutter, dart
Published: 2021-07-23 00:30:42

## Introduction

This post is part of my 100DaysOfCode series. In this series, I write about what I am learning on the 100DaysOfCode challenge. For this challenge, I will be learning flutter and firebase by building an Agriculture Management Information System.

## Recap

On Day 21 we mainly discussed the difficulty I had with writing widget tests for my Flutter app.

## Overview

In this post, we will discuss why using form fields as descendants of a [Listview](https://api.flutter.dev/flutter/widgets/ListView-class.html) is a bad idea. 

### ListView Gotcha

ListView is a scrolling widget that displays its children one by one. When a child is scrolled out of view, the associated element subtree, states and render objects are destroyed. The means that user input from widgets like [TextFormField](https://api.flutter.dev/flutter/material/TextFormField-class.html) will be lost when the widget is scrolled out of view. While they are ways to keep state mentioned [here](https://api.flutter.dev/flutter/widgets/ListView-class.html), I prefer to use a SingleChildScrollView with a row or column as its child to accommodate multiple widgets as shown below.

`SingleChildScrollView(child:Column(children:yourFormChildren));` solution from [stackoverflow](https://stackoverflow.com/questions/45240734/flutter-form-data-disappears-when-i-scroll)

## Wrap Up

In this post, we discussed why using form fields as descendants of a ListView is a bad idea.

## Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on [LinkedIn](https://www.linkedin.com/in/curtlycritchlow/) and [Twitter](https://twitter.com/CritchlowCurtly). You can also [buy me a book](https://www.buymeacoffee.com/curtlycritchlow) to show your support.
How to change the styles of an HTML element when the mouse pointer is over or hover over the HTML element?
Tags: css
Published: 2021-07-23 00:00:00

---
  title: How to change the styles of an HTML element when the mouse pointer is over or hover over the HTML element?
  published: true
  tags: CSS
  date: Fri Jul 23 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-styles-when-mouse-is-over-or-hovers-html-element
  cover_image: https://melvingeorge.me/_next/static/images/main-3584acafa9a8ffd348a1e38ba06d835a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-styles-when-mouse-is-over-or-hovers-html-element)
  
To change the CSS style when the mouse is over the HTML elements or hovered, we can use the `:hover` pseudo-selector on that HTML element in CSS.

For example, let's say we have an `a` (anchor) tag like this,

```html
<!-- Anchor tag -->
<a>Hey!</a>
```

We aim to change the text color of the anchor tag to `red` when the user puts the mouse pointer over the `anchor` HTML element (aka hovers over the element).

To achieve that we can use the `:hover` pseudo-selector on the `a` element inside the CSS stylesheet like this,

```css
/* Change anchor tag style when the user hovers */

a:hover {
  /*
    Your CSS Styles that needs to
    applied to the element when the user hovers 
  */
  color: red;
}
```

This will change the color of the `anchor` HTML element tag to `red` when the user puts the mouse pointer over the element.

See the above code live in [JSBin](https://jsbin.com/limemiduti/2/edit?html,css,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---