teleren/devto huggingface dataset:
Best svg resources for React Projects
Tags: react, html, css, design
Published: 2020-06-27 04:01:44


![Best svg resources for React Projects](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/06/1_Dpb3vjQtqb4D1nAU4RnRWA@2x-1.png?fit=750%2C480&ssl=1)

Have you ever wondered how some projects have cool svg illustrations and icons. In this article we will gonna learn about best svg resources for React Projects.

## [UnDraw](https://undraw.co/)

![Best svg resources for React Projects](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/06/image-12.png?fit=750%2C346&ssl=1)

It is one of the biggest free svg illustration website. You can find thousands of svg illustration from this website.

We can find illustration according to your keywords by searching. You can download your svg free of cost from this website.

## [FlatIcon](https://www.flaticon.com/)

![Best svg resources for React Projects](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/06/image-13.png?fit=750%2C368&ssl=1)

This website is used for free vector icons. They have more then 3,024,500 svg icons. The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.

## [Loading.io](https://loading.io/)

![Best svg resources for React Projects](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/06/image-14.png?fit=750%2C324&ssl=1)

I personally use this website for finding loading icons for projects. Most of the time we use loading svgs on save buttons or while loading some data.

I hope you have liked list of best svg resources for React.

[How to use svg in React](https://blogreact.com/how-to-use-svg-in-react/)
Leaking resources in deno test
Tags: deno, typescript, testing, javascript
Published: 2020-06-27 03:46:31

Recently I was working on the Trex project: [Trex](https://github.com/crewdevio/Trex) testing manually a new version that we gonna release but the fact to test all the functions manually to see that works it was tedious so I decide to see the test documentation of testing in Deno.

First I thought that the unit test was easy because I had not done a test before in Deno and I say How difficult could be do a test? 


a few hours passed and the same error appeared that was 

```
AssertionError: Test case is leaking resources.
Before: {
  "0": "stdin",
  "1": "stdout",
  "2": "stderr"
}
After: {
  "0": "stdin",
  "1": "stdout",
  "2": "stderr",
  "4": "child"
}

Make sure to close all open resource handles returned from Deno APIs before
finishing test case.
    at Object.assert ($deno$/util.ts:35:11)
    at Object.resourceSanitizer [as fn] ($deno$/testing.ts:78:5)
    at async TestRunner.[Symbol.asyncIterator] ($deno$/testing.ts:275:11)
    at async Object.runTests ($deno$/testing.ts:358:20)
```
there are two solutions to this:

1. Close all the processes when the package was already install with .close()

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


2. Reading the testing documentation found this to personalize the test function, by default this options comes to true the sanitizeResources, sanitizeOps
```javascript
Deno.test({
    name: "Install Package #1",

    fn: async () =>{

        await delay(1000)
        const response = await installPakages(["i","--map","oak"])
        assertEquals(response, { oak: "https://deno.land/x/oak/mod.ts" })
    },
    sanitizeResources: false,
    sanitizeOps: false
});

```
Remember Guys read documentation :) I hope this post was helpful for u
A short introduction to heuristics for functional testing
Tags: testing, webdev
Published: 2020-06-27 02:47:42

![A example of a pattern](https://dev-to-uploads.s3.amazonaws.com/i/cafp2y911ut9inmpew7l.jpg)<figcaption>A example of a pattern</figcaption>

What are heuristics, really?

While studying testing for my career change, I'm putting the names to techniques I had just sort of ....felt my way to as a digital marketer who was asked to do user acceptance testing often, and learning many more. 

Let's start from the top. 

When testing, we aim to see that the application works as expected, and also that the application handles invalid input or unexpected user behaviour gracefully. 

This is called positive testing and negative testing.

While testing, we notice patterns to the bugs which crop up. These patterns don't work every time, but they're helpful guides that help lead the way. We call them heuristics.  

Below is a list of heuristics commonly used in functional testing. With thanks to Elizabeth Hendrickson, Karen N Johnson, Terry Wiegmann, Michael Bolton, Scott Lawrence, James Bach, Alan Giles and Donald Firesmith, who created the heuristics below or helped lead the way to them through their brilliant web content. 

### Happy path
The typical user. The one we expect to see. Valid input created by the majority of users.

### Edge case
Not the typical user, but their input is still valid, and should be accepted.

### Pairwise Testing
All possible discrete combinations of 2 input parameters.

### Range
At the minimum value, at the maximum value, below the minimum value, above the maximum value, within the range.

### Boundary
Almost too big, almost too small, at the boundary. 

### Goldilocks
Really big number, really small number, just right.

### Reasonable data
Too big number, too small number, just right.

### Null testing
Receiving null values.

### Boolean testing
Accepting true/false with one input. Accepting true/false combinations with multiple inputs. 

### Date/Time Testing
The End date can't be before the start date.
If the start date and the end date are the same, the start time can't be later than the end time.

### Recent, Core, Risky, Configuration, Repaired, Chronic
Recent code, core code, risky code, configuration sensitive code, repaired code, chronically repaired code. 

### CRUD
Empty state, Create, Read, Update, Delete.

### Follow the Data
Data integrity at every stage of the CRUD process.

### Web session
Time-out is accurate, can't access membership pages when logged out.

### Input Method
Type, Paste, Keyboard arrows, mouse. Does the system accommodate possible input methods?

### FEW HICCUPPS

History
Image
Comparable Products
Claims
Users’ Desires
Product
Purpose
Statutes

### Sorting
Words, Numbers, Pages. Sort stays on pagination.

### Violate Constraints

#### Uniqueness
Creating with username/email address already in use.

#### Null values
Creating with leaving required fields blank.

### Deployment
Before and after deployment. Seems obvious,
👑 Top #DataScience Tweets This Week (JUNE 26th)
Tags: datascience
Published: 2020-06-27 02:15:06

---
title: 👑 Top #DataScience Tweets This Week (JUNE 26th)
published: True
description: These are some of the top tweets I found, share your favorites.
tags: datascience
---

These are some of the top tweets I found, share your favorites.

{% twitter 1274145204942053376%}

{% twitter 1276232959511662593 %}

{% twitter 1276077884487106562 %}

{% twitter 1274665890542497795 %}

{% twitter 1275021881456955399 %}

{% twitter 1275282062954692608 %}

{% twitter 1275102836884410372 %}

{% twitter 1275459594890940417 %}
Day 19
Tags: 100daysofcode
Published: 2020-06-27 01:48:34

### June 26, 2020
#### JavaScript
* JavaScript30 Day 12 - Key Sequence Detection (changing a website when a secret code is typed)
* Began "How to build an HTML calculator app from scratch using JavaScript" on fCC

#### Python
I skipped the last few conceptual lessons on hash maps because it wasn't helping me at all. I'm going to try to figure out things as I go along and go back to those lessons as a reference. I did the Blossom project, but I need to really see how this is used to understand it better. I did the exercises on trees which makes a lot more sense to me, so that's good. I then did the CYOA Wilderness project, so it makes even *more* sense to me since I'm so obsessed with interactive fiction. Next up is heaps, which look like reversed trees?
Do you tweet about coding?
Published: 2020-06-27 00:35:37

Hi Dev community,

I'd like to share with you my Tweeter feed about coding:
[https://twitter.com/CodeGuppy](https://twitter.com/CodeGuppy)

I hope you'll visit it and find it useful.

In the same time, I'd like to ask you if you use Tweeter for sharing coding materials? Do you find Tweeter a useful medium to share small coding tips?

Adrian
Typescript Shapes
Tags: typescript, javascript, webdev, tutorial
Published: 2020-06-27 00:10:54

Si no has visto el post anterior sobre que es Typescript, Interfaces, Clases y Types, te recomiendo que vayas en el siguiente [Link](https://dev.to/edisonsanchez/que-es-typescript-1jmb) para que puedas entender algunos conceptos antes de este nuevo Post.

En Typescript hay un concepto denominado Shapes el cual es poco conocido inclusive por quienes trabajamos con Typescript todos los días en diferentes lenguajes.  Esta validación de Typescript se podría resumir como que cada objeto tiene una forma descrita por la clase que lo construyo; y esta forma permite hacer validaciones entre diferentes objetos mediante el cual se puede saber si es de la misma Shape.

Veamos un caso con Vehículos, en el que los vehículos que tienen un Shape definido por la clase Vehiculos (con 5 atributos con sus tipo, y métodos los cuales dan el Shape para el objeto creado como un vehículo objeto en particular.

```typescript
class VehiculoTS {
  private marca: string;
  private modelo: string;
  private tipo: string;

  constructor(marca: string, modelo: string, tipo: string) {
    this.marca = marca;
    this.modelo = modelo;
    this.tipo = tipo;
  }
}
```

Después extendemos la clase vehiculo, y ahora tenemos una clase extendida denominada Jeep.  Los objetos construidos con la clase Jeep tendrán el Shape de la clase extendida Jeep.

```typescript
class Jeep extends VehiculoTS {
  private color: string;

  constructor( marca: string, modelo: string, tipo: string, color: string){
    super(marca, modelo, tipo);
    this.color = color;
  }
}
```

Para comparar shape empleamos el condicional "=", un solo símbolo de igual; esto compara las formas.  Para el ejemplo instanciamos dos objetos; el primer objeto será creado con la clase Vehiculo, y el segundo será creado con la clase Jeep.

```typescript
let Tucson : VehiculoTS = new VehiculoTS ( 'Hyundai', 'Tucson', 'Jeep' );
let TucsonAzul : Jeep = new Jeep ( 'Hyundai', 'Tucson', 'Jeep', 'Azul');
```

Si me pregunto o le pregunto a Typescript si un objeto creado con la clase Jeep tiene la Shape de un Vehículo (Objeto creado con la clase Vehiculo).  Si lo llevamos al mundo real, todos los Jeeps no importando la marca, color, etc; son Vehiculos.
```typescript
Tucson = TucsonAzul
TucsonAzul = Tucson
```
Ahora si me preguntara lo contrario:  Todos los vehículos tienen la forma de un Jeep? La respuesta inmediata seria un NO; porque? por qué los aviones, motos, submarinos son vehículos pero no tienen la Shape (Forma) de un Jeep.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2yf4wt7ovtw4mhesb8c7.png)
Por tanto Typescript hace esta validación y me arroja un error que me permite identificar que hay una validación errada y que los Shapes son diferentes.
The Fear of Failure
Tags: fear, motivation
Published: 2020-10-04 14:56:36

---
title: The Fear of Failure
published: true
date: 2020-06-27 00:00:00 UTC
tags: #fear, #motivation
canonical_url: https://thelearning.dev/blog/the-fear-factor/
---

One of the biggest hurdles that stop us from starting is the fear of failure,

The good news is we all have our fears. Some people know how to tackle them and others don’t

Remember this, the effect of “Not starting” vs “Starting and failing” is the same.

So why not start, code every day to at least find out.
Video: Building a no-code application that sends an email and a text message when a new user registers
Tags: nocode, tutorial, video
Published: 2020-06-29 17:59:35

---
title: Video: Building a no-code application that sends an email and a text message when a new user registers
published: true
date: 2020-06-26 23:52:31 UTC
tags: NoCode,Tutorial,Video,tutorial
canonical_url: https://maxkatz.org/2020/06/26/video-building-a-no-code-application-that-sends-an-email-and-text-message-when-new-users-registers/
---

This 12-minute video shows how I built a no-code application that sends an email and a text message when a new user registers. I used the following no-code tools: Airtable, Parabola and Twilio. The video is based on [this blog post](https://dev.to/maxkatz/building-a-no-code-application-that-sends-an-email-and-a-text-message-when-a-new-user-registers-3d5l)[.]

{% youtube yC7gW-tDluk %}
Second Month Update
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-06-26 23:38:18

---
title: Second Month Update
published: true
description: 
tags: javascript, webdev, codenewbie, beginners
---

My second month with web development has continued to be successful and interesting. I have learned so much stuff in so little time. I know that I still have a long ways to go but it is nice to have documented progress to have something to look back-on and really see how far I have come. 

I hope that by the time I have my third month update I will have even more projects on my GitHub. Staying motivated is truly the key to success.
License, what did I just do to my software?
Tags: discuss, opensource, withme
Published: 2020-06-26 22:24:57

Do you ever think.. I wish I was a legally smart in fact I wish there was a tool to just describe my project and get the right license. Anyway, do you read the license or think much beyond what seems to be the default MIT (terrified that there is even a default) did I just sell the rights to my program and what are my rights anyway? Love to hear what you think about licenses and what you like to use.
Dockerhub and Registry Server
Tags: docker, dockerhub, registry, infrastructure
Published: 2020-06-26 22:22:52

Dockerhub is the Docker's website for repositories of images, very similar to Github, where we create repositories of code, that other people can use. On Docker, we host our Docker images, private ou public, of enterprises or not. And then, other people can use that image that you've created.

Accessing the [Dockerhub's website](https://hub.docker.com/), we can create our account and start using it.

## Some commands

### LOGIN

With the command `docker login`, you can sign in your Dockerhub's account. If you want to sign in another Registry instead of Dockerhub, just put the URL after like `docker login <URL>` .

## PUSH

With the command `docker push`, it's possible to push a local image to Dockerhub.

The image's name must contain:

Your Dockerhub's username + the name that you want to give for the image + the version:

```bash
docker push username/webserver:1.0
```

To change the docker's name, use the command:

```bash
docker tag username/serverweb:2.0
```

## PULL

To download the image from Dockerhub to the local machine, use: 

```bash
docker pull image-name
```

The download will be made, and when finish, run using like:

```bash
docker run -ti webserver
```

# Registry

A registry is like a "personal Dockerhub", for you or for your company. You can run in your local machine or any server, setting your own DNS, access control for users and etc.

It's possible to add web interfaces, so you can easily view your registry, in Dockerhub has many examples of templates to install.

## Creating a local registry

For building your local registry, in order not to need Dockerhub, either for your self or your company, we do the following:

```bash
docker run -d -p 5000:5000 --restart=always --name registry registry:2
```

This command is linking our port 5000 of host docker (local machine) and the image.

We are telling Docker that if something happens to our container and he dies, it will be automatically restarted. We're giving our container the name "registry" and using the image "registry:2" from Dockerhub.

## Pushing an image to the local registry

For pushing images to the local registry, just renaming an image, replacing the username for the registry's URL, that in our case it would be like:

```bash
 docker tag <image-id> [localhost:5000/webserver:](http://localhost:5000/webserver:1.0`)1.0
```

But it could be a server DNS etc.

We use `docker push` for pushing the image, as we did for pushing to Dockerhub, and `docker pull` if we want to download an image from the registry.

For verifying the images in your registry, run: (if is a DNS you would change it and either the port.

```bash
curl localhost:5000/v2/_catalog
```

## Conclusion

Dockerhub is a very interesting alternative if you or a company wants to share images, whether public or private. And for those who want to have a more private alternative, with their own rules and settings, the Registry is a great alternative, being very customizable and having a lot of content available to assist those who want to create one.
Using Postgres FOR loop to generate data
Tags: sql, postgres, productivity, database
Published: 2020-06-26 22:08:09

---
title: Using Postgres FOR loop to generate data
published: true
description: 
tags: sql, postgres, productivity, database
//cover_image: https://direct_url_to_image.jpg
---

I don't know about you but I often need a 100 of _something_ in my database to properly test a page. If my UI isn't developed yet to handle that action or the count of _something_ is too large, that's when I turn to SQL. 

Today, for instance, I needed to test virtual scrolling and I didn't have enough data locally to trigger that behavior so I wrote a quick loop in Postgres to generate a 100 items:

```sql
DO $FN$
BEGIN
  FOR counter IN 1..100 LOOP
    RAISE NOTICE 'Counter: %', counter;
  
    EXECUTE $$ INSERT INTO items(name, active) VALUES ('Test item ' || $1, true) RETURNING id $$ 
      USING counter;
  END LOOP;
END;
$FN$
```

If you've followed me for a while, you'll recognize this loop from [the wild SQL query](https://dev.to/antjanus/the-wild-sql-loop-i-had-to-write-for-work-this-week-24n2) I had to write for work. However, this loops is much simpler. And this item would generate 100 items in my database with sequentially numbered names.

Let's go through this query real quick

## `DO` block

A `DO` block creates a special block that can execute some SQL. It's start and end is denoted by `$FN$` in my query but you can use any delimiter that starts and ends with a dollar sign. So `$DO$` works, as does `$MY_FUNKY_LOOP$`. 

## `BEGIN...END`
`BEGIN` and `END` create the section of the loop which runs the actual SQL statement. You can also have a `DECLARE` section which lets us assign and create some variables. We don't need it here.

## `FOR LOOP`
The `FOR counter IN 1..100 LOOP` lets us create a for loop. Postgres has a handy way of creating ranges via the `..` syntax (so `1..100` is 1 through 100). The current value of the range in the iteration is saved in the `counter` variable.

## `RAISE NOTICE`

This is the `console.log` of Postgres :)

## `EXECUTE $$ $$ USING`

`EXECUTE` will literally just execute the SQL between `$$`. What EXECUTE lets us do is specify `USING` which is used for variable substitution.

I like to think of this as a little self-executing function where `USING` lets us specify the parameters and execute runs the SQL and substitutes our parameter in the statement.

So as `counter` increases, the item name will increment as well.

## Why even use this?

It's just a super handy small snippet for generating data. 🤷

What's cool is that the more I learn SQL, the more I find myself using these types of loops and logic and adding onto them. There's nothing stopping us from using some sort of random generator to create better varied data for development or for generating data in a staging environment.
Github Conundrum/ Solving a problem in coding
Published: 2020-06-26 21:58:25

So I have run into a conundrum; even though I am coding I can't get it on my GitHub so how do I prove my growth. After graduating Flatiron School @ Access Labs in New York I moved to a market where if you didn't have 3 to 4 years experience or a bachelor degree getting a job was near impossible. So I decide to pursue the degree.

The degree has already introduced me to 2 new languages in Python and Java. Due to academic integrity I can't post my code but I can start blogging on what I have learned or what I am working on when I start back up classes here in a week. 

This week though I am going to talk about solving my coding problems then move on to languages next. So given a problem, whether I know the coding language or not, how do I approach it to either fix the code or write out the new code.

The first step for me is figuring out the problem to find a starting point. If there is code already in place I read over the code to make sure it makes since to me. 

From there I will look at syntax, in Ruby make sure every method has a def and end; In Python, for instance, make sure everything is tab and spaced correctly. Also make sure that every ()/{}/[] has both opening and closing tags. Then check the spelling and punctuation. 


After getting an understanding of the  code in place, I will work on solving the problem. If it is something as simple as making calls to methods in the correct order or editing a piece of code to make it function correctly then that would be the first step. From there if it requires a new method I go to work on building the new method. Also test you code as you go, it helps simplify were a bug might be as you go. 

Then probably the most common thing when it comes to writing code is the point where you eventually get stuck. From there go to google and look at sites such as stack-overflow to figure out how to fix your problem. The easiest way for me to learn is look at multiple solutions and then write my own from the ones you find on those type of websites. If it doesn't work then go back and figure out where I went wrong in the method and continue to build on it.

While writing new code and new methods it is important you also  make sure you keep with the style of the current code. If the current code is camelCase then you don't write the new method in snake_case and vise-versa.