teleren/devto huggingface dataset:
Using The Cloud As Your Mobile Workstation
Published: 2020-09-29 03:57:54

# Day 5 of 100DaysOfCode

Created some test cases for HypeTracker's sneaker API endpoints and also made it pass after creating the route, resource and controller! Test driven development wasn't so hard after all. This style of development ensures that I had planned out the response I wanted out of my route. 

Had to work away from home today for personal reasons but my laptop could not handle running the [Homestead virtual machine](https://laravel.com/docs/8.x/homestead) without sounding like a jet engine (oh the woes of a thin and light laptop). 

If you're in this situation, take advantage of the cloud!

# How the Cloud can Help

I know, I know, the cloud is just another computer. However, that's where the power of cloud comes in for individual users. The cost of running a 2 core / 8 gb RAM virtual machine on Digital Ocean (can be any cloud, I just happened to have free credits on there) for an 8 hour work day was only $3.46!

![Digital Ocean Bill After Using a Virtual Machine for a Day](https://dev-to-uploads.s3.amazonaws.com/i/nmvkbemy4wuqak2ipo2l.png)

(The Volumes part of the bill was only this much because I accidentally left it running for a few days instead of destroying it)

I was able to take advantage of both the network speed of the machine, as well as the ability to snapshot the machine for backups and restoration while working on my own machine independently. 

![Snapshots are Digital Ocean's Full Machine Backup](https://dev-to-uploads.s3.amazonaws.com/i/kdk7l9tfjt5h5k4l3g2c.png)

So if you're ever out working with a thin client, just a laptop, but need more compute power, consider spinning up a cloud virtual machine just for the day!

If you happen to want to test out Digital Ocean, use my [referral link](https://m.do.co/c/ba976bb368dd) for $100 credit.

Follow my journey on Twitter [@justinhodev](https://twitter.com/justinhodev)!

{% github justinhodev/hype-tracker %}
Vue.js and Binding to Radio Controls
Tags: help, vue, javascript
Published: 2020-09-29 03:54:42

---
title: Vue.js and Binding to Radio Controls
published: true
description: I need help figuring out the best way to bind radio controls to a form that defines a team and it's leader.
tags: Help,VueJS,JavaScript
//cover_image: https://direct_url_to_image.jpg
---

So, I was trying to figure out how to bind to a form where you define a team (using first name and last name for each team member) and define the team leader using a radio control.  

Here is the problem:

{% codepen https://codepen.io/steinbring/pen/dyMLgaa %}

In the above example, you will notice that in the first box there is the form and in the second box is the values of the variables that are bound to the form.  The first name and last name change values without a problem but the team leader value doesn't update properly.  As you change the value, the new team leader gets a "1" but the old one isn't reset to "0".

I came up with a solution but I'm not too fond of it.

{% codepen https://codepen.io/steinbring/pen/JjXVzRx %}

In the above example, it is laid out the same except I am now using a "selected" variable that is then bound to the radio buttons.  It requires the intermediary step of the watcher.

Can anyone come up with a more elegant solution to the problem?  I really don't want to have to roll with this one.
Daily/Morning Routine while in Bootcamp-- any tips?
Tags: codenewbie, beginners, bootcamp, mentalhealth
Published: 2020-09-29 03:54:12

```const greeting = prompt("What's good world!?");```

Well if you couldn't tell from the *first line of code*, I'm already 2 weeks into a virtual 12-month part-time [Web Development Fellowship](www.theknowledgehouse.org), and I've already started to dream *(or are they nightmares?...yeah, I think they're nightmares!)* in JavaScript.  

Excuse me for the tardiness in posting the excitement of being accepted into the 2020 cohort, but my mind and schedule has been in a __constant flurry__ of trying to catch up to the *immense amount of demands* of my time, attention and mental fortitude that are required to be a just barely satisfactory participant in this program. 

_(Can you believe, there are already bootcamp veterans and ES6 coding wizzes complaining about being "bored of vanilla JS" while I'm thinking "although I want chocolate chip cookie dough, I need this VANILLA... and it needs to go a whole lot slower!.. haha)_

Although the lecture instruction and virtual class interaction is "part-time" (4 hours in the evenings), I am quickly coming to the __sobering realization__ that a great deal of the early parts of my day (and pretty much ALL of my weekends) must be allocated to *studying, reading ahead, practicing algorithms and JavaScript tutorials, debugging, and struggling* through assignments and projects with varying deadlines and deliverables... and to be honest, the last 6 months of laid-back-quarantine-life have completely disrupted my daily routines and set me up for self-sabotage.  __I need some insight and suggestions!__


__Here are my goals for this week that I'd like some insight on:__

##1. Go to bed on-time (by 10:00PM)##
  * Classes are in the evenings from 5:30pm - 9:30pm, but sometimes I'll stay up past midnight working on assignments. I'm torn between staying up late or tabling the work for the next day.

##2. Wake up early##
  * Preferably between 5:00 - 6:00 AM

##3. Create a simple morning routine (Meditation, journaling, etc..)##
  * That doesn't exceed 2 hours

##4. Pick ONE or TWO JavaScript resources for practice, and sticking to it.##
  * I'm overwhelmed with so many links and resources that classmates share, and what I find on the internet that don't know what to stick with-- I just need one or two solid foundational recommendations.

##5. Making a daily study/work/routine schedule.##
  * I realize I have to start blocking off time on my Google calendar for various studying, assignments, tutors, etc..

I figure I'd start with these, and journal about what works and what doesn't.  

I'm curious to know from the dev community, especially those who've completed bootcamps, 

###"What daily routines did you find to be successful to manage your time, get work done, and still have a little free time to enjoy for friends, family, hobbies?"

Until we meet again...
Type widening on strings
Tags: typescript
Published: 2020-09-29 03:23:06

---
series: Tricky little TypeScript bits
---
# The Problem 

```ts
type Roles = "student" | "teacher"; 

type Person = {
    role: Roles; 
    name: string; 
    age: number; 
}

function doSomethingWithPerson(person: Person) {
    console.log(person); 
}

const andy = {
    role: "teacher", 
    name: "andy", 
    age: 31
};

doSomethingWithPerson(andy); //Argument of type '{ role: string; name: string; age: number; }' is not assignable to parameter of type 'Person'.
```

[Playground Link](https://www.typescriptlang.org/play?#code/C4TwDgpgBASg9gGwgZygXigImcArgEwgDthMoAfLYCAQwGMALCAJ0wG4oAoT0SKABRbI4RdFADenKNKjNEEAFyx5yDlJlEaAW0VQczAJZEA5mplQax3UVxaARizUBfbgDNcROsAMio+OADKcDrADEbGAOoGoYLMwkQAFJBxIkqx8QCUEurSdCLCSAB0CHDGSUIiGc7ceUQ4FkT4IGKS5nJISpjU9EysADRc5po6nTSNIJgDORZWSgDMAIycTmzc-kEhYSZRMRWJY01VQA)

This code produces the error: 

```
Argument of type '{ role: string; name: string; age: number; }' is not assignable to parameter of type 'Person'.
  Types of property 'role' are incompatible.
    Type 'string' is not assignable to type 'Roles'.
```

What's going on here? 

The `andy` object we declare does match the type `Person` that the function wants, so why is TypeScript complaining? 

# Quick Solution 

Declare the string `"teacher"` `as const`

```ts
const andy = {
    role: "teacher" as const, 
    name: "andy", 
    age: 31
};

doSomethingWithPerson(andy);
```

# Explanation 

In this scenario when we declare the object `andy` TypeScript _infers_ the type of the `role` property as `string`, any string!

While `"teacher"` and `"student"` are strings, they are a _subset_ of strings. 


The `Person` type doesn't want _any_ string, it wants just those two particular strings. 

That TypeScript infers the type as `string` and not as `"teacher"` is called [type widening](https://github.com/microsoft/TypeScript-New-Handbook/blob/master/reference/Widening-and-Narrowing.md). 

What TypeScript is doing, is allowing for that you might later write some code like: 

```
   andy.role = "foobar"; 
```

(That is, you're _mutating_ the `andy` object). 

What the `as const` keyword does is just prevent the type widening. [See the documentation here](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions). 

What you're also doing is telling TypeScript 'don't worry, I promise I'm not going to reassign this property', and if you try, TypeScript will give you an error: 

```ts
const andy = {
    role: "teacher" as const, 
    name: "andy", 
    age: 31
};

andy.role = "foobar"; //Type '"foobar"' is not assignable to type '"teacher"'.(2322) 
```

# Alternative solutions 

Declare the string `"teacher"` `as "teacher"` 

```ts
const andy = {
    role: "teacher" as "teacher", 
    name: "andy", 
    age: 31
};

doSomethingWithPerson(andy);
```

What this does is instead of using the `as const` keyword to prevent type widening, it just explicitly sets the type of the `role` property to `"teacher"`. 

Both `as const` and `as "teacher"` have the same end effect, the `role` property's type is `"teacher"`.
Sparrowhub.io - repository of devops and automation utilities
Tags: raku, devops, tools, scripting
Published: 2020-09-29 03:04:03

---
title: Sparrowhub.io - repository of devops and automation utilities 
published: true
description: Sparrowhub repository of devops and automation utilities
tags: raku, devops, tools, scripting
cover_image: https://raw.githubusercontent.com/melezhik/images/master/Screenshot%20(3).png
---

[Sparrowhub.io](http://sparrowhub.io) is a repository of automation utilities for the whole range of tasks:

* git automation
* cloud automation (Azure/Aws)
* yaml/json linters
* configuration management
* testing
* scripting and gluing 


# Quick start

The process of start using Sparrowhub.io is very straightforward:

## Install Raku

Sparrowhub.io is built on Raku, so one need to [install](https://rakudo.org/downloads) Raku language first.

## Install Sparrowhub.io client

Sparrowhub.io command line client - Sparrow is installed as a [Raku](https://raku.or) module:

`$ zef install --/test Sparrow6`

## Setup a repository

By default Sparrow is set to use a local file repository so one need to point the Sparrowhub.io repo, so that Sparrow could look up a dependecies there:

`$ export SP6_REPO=http://sparrowhub.io/repo && sp6 --index-update`

## Find a plugin and run it

So far Sparrowhub.io contains _more then 190_ plugin - small reusable scripts written on many languages. To find a plugin you need just run a search through a Sparrow client:

`$ s6 --search /pattern/`

Once you find a plugin, just run it. For example, to delete old git branch both local and remote version you could run this:

`$ s6 --plg-run git-branch-delete@branch=old_branch`

Some plugins only make a sense when run as Raku functions. This piece of Raku code uses a `git-current-branch` plugin to calculate a name of a current branch and then to do something about it: 


```perl
   use Sparrow6::DSL;
   my %state = task-run "current branch", "git-current-branch"; 
   say %state<branch>;
```

So this is how one can build high level scenarios from small Sparrow plugins.

Sparrowhub.io philosophy is to build something big quickly out of ready building blocks.

You can even use a [Tomtit](https://github.com/melezhik/Tomtit) - Sparrow based task runner for better convenience. 

# More reading

Checkout [Sparrowhub.io](http://sparrowhub.io) repository to search for plugins and get the latest project updates.

---

Best regards


Aleksei
Week 18: Advanced Array Methods
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-09-29 03:03:19

---
title: Week 18: Advanced Array Methods
published: true
description: 
tags: javascript, webdev, codenewbie, beginners
---


####This week focus was on Advanced Array Methods from Colt Steele The Advanced Web Developer Bootcamp.


     -forEach
     -map
     -Filter
     -Some
     -Every
     -Reduce

###forEach
Iterates through an array 
Runs a callback function on each value in the array 
returns 'undefined' 

###forEach Always returns undefined 

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


###map
Creates a new array 
Iterates through an array 
Runs a callback function for each value in the array 
Adds the result of that callback function to the new array 

###map Always returns a new array of the same length 


###Filter
Creates a new array 
Iterates through an array
Runs a callback function on each value in the array 
If the callback function returns true, that value will be added to the new array
If the callback function returns false, that value will be ignored from the new array 
###The result of the callback will Always be a boolean 

###Some
Iterates through an array 
Runs a callback on each value in the array
If the callback returns true for at least one single value, return true
Otherwise return false

###The result of the callback will always be a boolean

###Every
Iterates through an array
Runs a callback on each value in the array 
If the callback returns false for any single value, return false 
Otherwise, return true 

###The result of the callback will always be a boolean 

###Reduce
Accepts a callback function and an optional second parameter 
Iterates through an array 
Runs a callback on each value in the array
The first parameter to the callback is either the first value in the array or the optional second parameter 
The first parameter to the callback is often called accumulator 
The returned value from the callback becomes the new value of accumulator

###Whatever is returned from the callback function, becomes the new value of the accumulator 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y9883xr231d7lerp6099.png)
Type inference from React.useState
Tags: typescript, react
Published: 2020-09-29 02:59:19

---
series: Tricky little TypeScript bits
---

# The Problem

```ts
import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState(); 
    return <input value = {value} onChange = {(e) => setValue(e.target.value)}/>
}
```

[Playground Link](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wG4AoctCAOwGd4AxCCOAXjgAoBKdgPjgBvcnFFxq9eAG0AbigA2AVyQAaOHSQwAaguUBddomIwAdIo0BlGChhIepOCLFEYiqDTgAeYDTCL4ckpIhoKBygC+cLQAwgAWKDQA5sEcgpxIvGwCGtq6dkgm1lDJpmEZ4QD0fOThQA)

This code produces the following TypeScript error: 

```ts
Argument of type 'string' is not assignable to parameter of type 'SetStateAction<undefined>'.(2345)
```

# Quick Solution 

Explicitly state the generic type: 

```ts
import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState<string | undefined>(); 
    return <input value = {value} onChange = {(e) => setValue(e.target.value)}/>
}
```

Or set the initial state to an empty string. 

```ts
import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState(''); 
    return <input value = {value} onChange = {(e) => setValue(e.target.value)}/>
}
```
(This may not be appropriate for all cases, ie maybe you really do want to leave that value undefined). 

# Explanation 

The `useState` function has a generic parameter which we are not setting/declaring in the original case. 

This leaves TypeScript to _infer_ the generic type from the arguments given. 

In this case `useState()` with no arguments, TypeScript infers the type as `undefined`. 

_TypeScript doesn't know that you later want to set a string into state here_. 

That is, leaving the generic parameter off is equivalent of doing: 

```ts
const [value, setValue] = React.useState<undefined>(); 
```

The generic parameter determines the type of the `value` and `setValue` variables. 

In this case, the `setValue` function is going to be the equivalent of: 

```ts
function setValue(value: undefined) : void {

}
```

The `input` component doesn't like this, the event is creating has a `target.value` of type `string`.

So to solve this, we can either explicitly set the generic type, or be aware of when and how TypeScript is going to infer the generic type.
Simple Code Tasks Should Be Simple
Tags: perl, tricks, javascript
Published: 2020-09-29 02:01:23

I frequently see people do simple things in the most complicated ways with dynamic languages. I suspect much of this is a carry-over from how we teach algorithms and programming in universities. If you want your code to be readable, and you want it to be maintainable long-term, then simple code tasks should be simple.

## Merging Two Lists

This is simple. You've got a list of fruits, and a list of vegetables, and you want to merge them into a list called "produce."

In Perl:

```perl
my @fruits = qw/apple banana mango/;
my @veggies = qw/broccoli asparagus spinach/;
```

In JavaScript:

```js
const fruits = ['apple', 'banana', 'mango']
const veggies = ['broccoli', 'asparagus', 'spinach']
```

Some folks will want to use iteration, or even a `push()` function of some sort here, but neither is necessary. A simple assignment statement will work just fine.

In Perl:

```perl
my @produce = (@fruits, @veggies);
```

In JavaScript:

```js
const produce = [...fruits, ...veggies];
```

Not very impressive, I know, but watch what happens when I do the same thing with associative arrays (a.k.a. `Object`s, a.k.a. hashes). Now we're going to have produce items, with their colors.

In Perl:

```perl
my %fruits = (
  apple  => 'red',
  banana => 'yellow',
  mango  => 'light-orange');
my %veggies = (
  broccoli  => 'green',
  asparagus => 'green',
  spinach   => 'green');

my %produce = (%fruits, %veggies);
```

In JavaScript:

```js
const fruits = {
  apple:  'red',
  banana: 'yellow',
  mango:  'light-orange'}
const veggies = {
  broccoli:  'green',
  asparagus: 'green',
  spinach:   'green'}

const produce = {...fruits, ...veggies};
```

It's super cool to have slick code that does neat things, but when it comes to squishing data together keeping things simple is always better.

**One Exception:** When you're using JavaScript, the spread operator (`...`) is limited to the maximum [limit supported by `Function.apply()`, which (as of the time of this post) is 65,536 total values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply).

Anyway, I had fun writing this and I hope that your code brings you joy.
Robot vs Zombies Live Stream E05
Tags: react, javascript, css, womenintech
Published: 2020-09-29 02:38:50

---
description: We add sound effects for when the robot walks or runs into walls. Then we create a mute button. Finally, we chat with our artist Ben about next steps for the tiles and buildings.
---

We add sound effects for when the robot walks or runs into walls. Then we create a mute button. Finally, we chat with our artist Ben about next steps for the tiles and buildings.

{% youtube 9DfBDQIgq9o %}
Which UUID version?
Tags: beginners, todayilearned, todayisearched, watercooler
Published: 2020-09-29 02:22:11

# Which UUID version?

`Universally Unique IDentifiers` versions are defined by the [RFC4122](https://www.ietf.org/rfc/rfc4122.txt).

They are 5 different versions that have different implementations to generate Unique Identifiers.

<table>
<tr>
<td valign="top" width="20%">
<h4 align="center">v1 Time</h4>

Uses the CPU clock cycle to calculate a unique ID
</td>
<td valign="top" width="20%">
<h4 align="center">v2 MAC</h4>

Uses the CPU clock cycle and MAC address to generate a unique ID.
</td>
<td valign="top" width="20%">
<h4 align="center">v3 MD5</h4>

Uses a namespace value to salt the MD5 Hash (128 bits).
</td>
<td valign="top" width="20%">
<h4 align="center">v4 Random</h4>

Uses Pseudo-random numbers to generate a unique ID.
</td>
<td valign="top" width="20%">
<h4 align="center">v5 SHA-1</h4>

Uses a namespace value to salt the SHA-1 Hash (160 bits).
</td>
</tr>
</table>

## API

Generally, a UUID library will expose all 5 versions and a few helper functions.

- Version: Provides UUID RFC version
- Parse: Convert UUID string to array of bytes
- Stringify: Convert array of bytes to UUID string
- Validate: Check if UUID is valid
- Nil: All bits are set to `0`
  - 00000000-0000-0000-0000-000000000000

## Ranking

<table>
<tr>
<td valign="top" width="50%">
<h4 align="center">Uniqueness</h4>
<h5 align="center">v1 👊 v2 👊 v4</h5>
<h2 align="center">v4 Random</h2>

v1 and v2 are similar, but the cpu cycle is predictable.
</td>
<td valign="top" width="50%">
<h4 align="center">Hashing</h4>
<h5 align="center">v3 👊 v5</h5>
<h2 align="center">v5 SHA-1</h2>

v5 SHA-1 has a stronger encryption than v3 MD5.
</td>
</tr>
<tr>
<td valign="top" width="50%">
<h4 align="center">Protected</h4>
<h5 align="center">v2 👊 v1 👊 v4 👊 v3 👊 v5</h5>
<h2 align="center">v5 SHA-1</h2>

v1 and v2 are similar, but the MAC address can make your system less secure.
</td>
<td valign="top" width="50%">
<h4 align="center">Overall</h4>
<h5 align="center">v1 👊 v2 👊 v3 👊 v5 👊 v4</h5>
<h2 align="center">v4 Random</h2>

v4 is generally the best option in most use cases.
</td>
</tr>
</table>
Onbeforeunload Not Working
Tags: javascript, chrome
Published: 2020-09-29 02:10:22

*Repost from https://sulaiman.dev/posts/onbeforeunload-not-working/*

`onbeforeunload` is typically implemented to ask user to take some actions before leaving the website.

But somehow it does not work as intended as before, not sure since when, but it does not work in the latest Google Chrome browser.

### 1. Custom Alert Message

The message can no longer be customised. Even though you have specified the message, it will still display to you `Changes that you made may not be saved`.

### 2. Event Not Triggered

This is the most important and confusing thing. Apparently the alert popup will not be shown at all if there is no mouse left click action happened.

### 3. Wait It is Triggered

While it looks like the event is not triggered, but actually it is indeed triggered, only the popup alert is not shown. So you can still do whatever you want behind the scene like sending data through Ajax if you need to.

#### Demo: https://jsfiddle.net/usw3mnab/2/show
Factory Method Pattern
Tags: creational, designpatterns, java, pattern
Published: 2020-09-29 01:34:07

Define an interface for creating an object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uo04ll7jjqg2klhkzcko.gif)

#Participants#
* Product: defines the interface of objects the factory method creates.
* ConcreteProduct: implements the Product interface
* Creator: declares the factory method, which returns an object of type Product. Creator may also define a default implementation of the factory method that returns a default ConcreteProduct object. May call the factory method to create a Product object.
* ConcreteCreator: overrides the factory method to return an instance of a ConcreteProduct.

#Code#
```java
public class Main {

	public static void main(String[] args) {
		Creator[] creators = new Creator[2];

		creators[0] = new ConcreteCreatorA();
		creators[1] = new ConcreteCreatorB();

		for (Creator creator : creators) {
			Product product = creator.factoryMethod();
			System.out.println("Created " + product.getClass().getSimpleName());
		}

	}
}

public interface Product {

}

public class ConcreteProductA implements Product {

}

public class ConcreteProductB implements Product {

}

public interface Creator {

	Product factoryMethod();
}

public class ConcreteCreatorA implements Creator {

	@Override
	public Product factoryMethod() {
		return new ConcreteProductA();
	}
}

public class ConcreteCreatorB implements Creator {

	@Override
	public Product factoryMethod() {
		return new ConcreteProductB();
	}
}
```

#Output#
```
Created ConcreteProductA
Created ConcreteProductB
```
{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}