teleren/devto huggingface dataset:
Object Assign and Spread
Tags: react, beginners, javascript
Published: 2020-10-28 18:45:50

# 'Merge & Mutate'

We can use `Object.assign()` to 'merge' _object literals._ `assign` is a _variadic parameter method._ This just means that we can pass as many _arguments, i.e. object literals_ into it as we want.

The general behavior is that the first argument will receive any/all 🔑s from any/all of the remaining _arguments,_ with priority given to the righthand most _argument._ It's an RTL operation. 

If that first _argument_ already has a given 🔑, it's _value_ will be overridden by the first 'argument object' with the same value starting from the right. *Only* the first 'argument object' will be overwritten.

That's confusing 😕! An example should help:

{% replit @CodeFinity/Spread %}

Here, we see that `you` - the first _argument_ was the only one with its _values_ overridden. And, who did the overriding? Well, the rightmost _argument,_ `someoneElse` took priority.`me` contributed whatever `someoneElse` didn't have, and `you` held onto `myOwnKey`.

*None of the other 'object arguments' were affected - only the first one, `you`.*

# Assembling a New Object

{% replit @CodeFinity/Spreading-Objects-1 %}

This time, we avoid _mutating_ any of the _object literals;_ Instead, we 'assemble' all of the 🔑s from each of the 'existing objects' into a 'new' _object literal._

# Refactoring ♻️ `Object.assign` ➡️ `...`

{% replit @CodeFinity/Object-Assign-into-New-1 %}

This time we achieve the same results, but with the cleaner _spread syntax:_ `...`.

We are 'spreading' all of the things in each of the other _object literals_ and 'wrapping them up' into a 'new' _object literal;_ That's where the surrounding `{` `}` come in to play.

---

Hopefully, the repl.it examples helped you understand how to re-use _objects._ 

React relies on avoiding _mutations,_ so it's critical that you understand how to do this, and the simplest way is to use: `...`.

---

*Update:* Here's how we can use this technique to 'compose' new objects...

{% youtube TaPGsOOADWI %}
Activate Azure for Students using GitHub Student Developer Pack.
Tags: azure, microsoft, github, cloud
Published: 2020-10-28 18:43:22

As a student, you can apply for the GitHub Student Developer Pack, which includes offers and benefits from GitHub partners. You can use the GitHub student developer pack to activate your Microsoft Azure account so that you can access the benefits.

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

## How to apply for the GitHub Student Developer Pack

Visit here to get step by step instruction to apply for Github Student Developer Pack. : -[How to apply for the GitHub Student Developer Pack](https://dev.to/mjmaurya/how-to-apply-for-the-github-student-developer-pack-15f9)

# How to activate Azure from your pack

Once you get the confirmation email for your student developer pack. you need to go back to the Github website using this link [Offers](https://education.github.com/pack/offers) and avail the benefits.

There will be many tools available so you need to scroll down and find Microsoft Azure. Click to generate your unique code.

![unique code](https://dev-to-uploads.s3.amazonaws.com/i/30xk9btv14jhdb1rzby9.png)

OR

Click on Get access by connecting your GitHub account on Microsoft Azure

![unique code](https://dev-to-uploads.s3.amazonaws.com/i/kbp2w2ag4cb0fq8vyfgt.png)

Now go to the Microsoft website and click on the “Activate Now” button where you’ll get a prompt to sign in. And sign in with your existing Microsoft account or sign in with GitHub.

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

Enter your details and you’ll see a page like this:

![Enter your details](https://dev-to-uploads.s3.amazonaws.com/i/bztm2cn60w81avqggxfo.png)

Click on the dropdown icon and select the Verification code. Copy your verification code from your Git website and paste it here.


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

**You can now access your Azure account.**

**If you have not Verification code, Then go to contact and write your issue.**

> Sample:
Hi Microsoft
I’m a Github student developer pack member, and I’m trying to activate my azure account but I have not received any verification code. Please provide me the Verification Code.

You will get a mail from Microsoft Support

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

Reply to this mail with the required details then you will get the activation code.

**If You have any doubt feel free to contact me.**

[Twitter](https://twitter.com/gcssmanoj)

[Linkdin](https://www.linkedin.com/in/mjmaurya/)
Survey about productivity from University of Brasilia
Tags: survey, productivity, pandemics, covid
Published: 2020-10-28 18:39:37

Dear all,

Me and a group of researchers from University of Brasilia are investigating how the pandemic caused by COVID-19 is affecting the productivity and well-being of employees of Open Source projects hosted on GitHub. To that end, I ask you to complete a short survey on this subject. The survey is available at:

https://docs.google.com/forms/d/1Kybwpd57_juduLTu9kT-PV7IylUu9FU0XcAtI8P1v0w/edit

All the best.
Struct class in Ruby
Tags: ruby, rails, class, struct
Published: 2020-10-28 17:34:44

[`Struct`](https://ruby-doc.org/core-2.7.1/Struct.html) is a collection of attributes with accessor methods,
without having to write the class explicitly.

A `Struct` class generates a new subclass that contains a set of members and their values.
For each member, a reader and writer method is created similar to `#attr_accessor`.

```ruby
> Vehicle = Struct.new(:make, :model)
> Vehicle.superclass
=> Struct

> Vehicle.ancestors
=> [Vehicle, Struct, Enumerable, Object, Kernel, BasicObject]
```

Since `Struct` is bundled with `Enumerable` module,
we can take advantage of methods like `#filter`, `#count`, `#include?`, `#uniq`, `#tally` etc.

## Example

```ruby
> Vehicle = Struct.new(:make, :model)

> Vehicle["Dodge", "Hellcat"]
=> #<struct Vehicle make="Dodge", model="Hellcat">

> bike = Vehicle.new("Triumph", "Daytona")
> bike
=> #<struct Vehicle make="Triumph", model="Daytona">

> bike.make = "Yamaha"
> bike["model"] = "R1"
> bike
=> #<struct Vehicle make="Yamaha", model="R1">
```
----

Follow the link for complete article https://www.sandipmane.dev/struct-class-in-ruby
hello world [svelte-boilerplate; smelte]
Tags: svelte, svelteboilerplate, smelte, helloworld
Published: 2020-10-28 17:33:16

```
#svelte, #svelte-boilerplate, #smelte, #webpack, #tailwindcss
```

### Let's do it.
- Initial project using svelte-boilerplate template

```sh
>_ git clone https://github.com/pankod/svelte-boilerplate.git hello-word
```
- Upgrade to lastest version of `postcss-loader` on `package.json` file
```js
"postcss-loader": "^3.0.0", => "postcss-loader": "^4.0.4",
``` 

- Installing packages
```sh
>_ cd hello-world && yarn install
```

- Installing smelte, postcss, postcss-import, postcss-nested
```sh
>_ yarn add smelte postcss postcss-import postcss-nested
```

- Update `postcss.config.js`
```js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested')
  ]
}
```

- Import tailwind css into `Assets/css/global.css`
```js
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// ...
```

- Remove line `exclude: /node_modules/,` of 
`svelte-loader` on `webpack.config.js`

```js
rules: [
    {
        test: /\.svelte$/,        
        /*exclude: /node_modules/,*/
        use: {
            loader: 'svelte-loader',
            options: {
                emitCss: true,
                hotReload: true,
                preprocess: require('svelte-preprocess')([
                    scss()
                ])
            }
        }
    },
]
```
- Update `src/App/index.svelte`
```js
<script>
  import Layout from '@Components/Layout';
  import { TextField } from "smelte";
</script>
```

```scss
<style src="./style.scss">
</style>
```

```html
<Layout class="layout">
  <div class="container max-w-full">
    <div class="w-auto p-2">
      <TextField textarea label="Hello World" rows="3" outlined />
    </div>
  </div>
</Layout>
```

Yeah !!!
Let's enjoy.

```sh
>_ yarn start:dev
```
Flutter Pin Input Screen
Tags: flutter, programming, dart, mobile
Published: 2020-10-28 17:29:09

---
title: Flutter Pin Input Screen 
published: true
description: Flutter pin input screen
tags: flutter,programming,dart,mobile
cover_image: https://mightytechno.com/wp-content/uploads/2020/10/pincode-blog.png
canonical_url: https://mightytechno.com/pin-input-screen-flutter/
---
This video will explain how to create a Pin input screen with the help of cool plugin. 

{% youtube 53WUrFQI8vY %}

if you are like article check [here] (https://mightytechno.com/pin-input-screen-flutter/)

Connect with me - [Instagram] (https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Twitter](https://twitter.com/mightytechno)
Welcome Thread - v97
Tags: welcome
Published: 2020-10-28 17:09:55

---
title: Welcome Thread - v97
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Star Wars Greetings](https://media.giphy.com/media/3ornk57KwDXf81rjWM/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Cleaner React validations
Tags: react, javascript, forms, validation
Published: 2020-10-28 17:06:30

---
title: Cleaner React validations
published: true
description: This post is related with an small form's validation
tags: #react #javascript #forms #validation
---

10/28 - Yesterday I finished an assignment related to a 'Change phone-number form and it looks like this:

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

So, to validate I need to check every change of the Input fields in order to enable or disable the button... easy right??

Just for context, I'm using useState hooks for each value of the field and another one to the enabling state of the button. Also, I'm managing state with [MobX](https://mobx.js.org/README.html), so the user's current phone number and country code properties of userStore. Hopefully it's enough context for the next snippets.

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

After some really nice PR review, my code was simplified to this:

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

I really like the approach because is pretty much self explanatory and a little bit cleaner.

What am I doing today: 

+ Start doing push ups each two brakes.
  That means that if I take a brake every hour, I should do 4 rounds of push-ups a day. **What do you thing??**
+ Take at least 30 minutes of video editing course.

If you got all the way over here, I really appreciate it!! 

If you want to, follow me on [Twitter](https://twitter.com/PabloYeverino)
Architectural Concepts: Spotting Duplicated Componentry
Published: 2020-10-28 17:01:42


Having never heard of the word Componentry in IT, it could become a fad. After all, there is the word 'Carpentry' which we are all know. We are carpenters of components "Componenters".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/56jpy18z6nyltdzzc94u.png)



When we have a tool which shows us the design of components (such as shown above); refactoring opportunities become easily spotted.

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

Any time we see the same thing repeated as shown above, we know it could be a violation of Single Responsibility Patterns.

**Ask the Developers these Questions** 

- Why do we have a repeated architectural pattern?
- Can we combine the two?
- Is the code bullet proof?
- Does it ever return null or undefined values?
- Is it able to be reused anywhere when the given pattern is required elsewhere.

If the answers to these questions are all "Yes" then we are doing our jobs as Architects.

If any of the answers are "No" we are possibly contributing to Technical Debt; which, is deadly down the road.

JWP2020 Architectural Patterns
Gumroad's #14DayProduct challenge Day 2: Pick Your Topic and Outline Your Product.
Tags: debugging, codenewbie
Published: 2020-10-28 17:00:15

After working on the spreadsheet, I finally narrowed down to 2 potential products:

1. A video course for developers on "How to debug your code" in various languages. 
I'll demonstrate it in a couple of languages (Java, JavaScript, etc.) and also add a module on how to improve search on Google / StackOverflow in case of error.

2. A video course in which I can demonstrate my process of outsourcing projects that I don't have the expertise or simply not enough time to do but also don't want to lose my client.

I have vast experience in both of the above topics and I feel confident that the audience will gain value from these topics. I am equally excited about both of these topics so unable to pick one.

Need your feedback/help in deciding.

Thanks
Booster is live on Product Hunt!
Tags: webdev, typescript, devops, producthunt
Published: 2020-10-28 17:00:07

---
title: Booster is live on Product Hunt!
published: true
description: 
tags: #webdev #typescript #devops #producthunt
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/z9s4inzixwrlx17bambq.png
---

Booster has been just published to Product Hunt! [Check it out here](https://www.producthunt.com/posts/booster-framework).

In case that you don't know, Booster is a free and open-source framework that allows you writing backends without thinking in servers, databases, and all that stuff that you have to think about when you write a backend. You just write your code following some patterns, write a command, and BOOM, you got a fully cloud-native backend with a GraphQL API ready to be used from your frontend. Isn't that awesome?

If you still are not sure about what's so special about Booster, check out the post [Explaining the hype around Booster Framework](https://dev.to/boostercloud/explaining-the-hype-around-booster-framework-3cf2).

If you have more questions, feel free to join our [Discord server](https://discord.gg/bDY8MKx), create an issue in the [GitHub repo](https://github.com/boostercloud/booster) or find tons of information on [Booster's website](https://booster.cloud/).

See ya!
Create Redis Sets With Member Expiration
Tags: tipstricks, redis, cache, sortedsets
Published: 2020-10-29 04:00:32

---
title: Create Redis Sets With Member Expiration
published: true
date: 2020-10-28 17:00:00 UTC
tags: TipsTricks,redis,cache,sortedsets
canonical_url: https://clavinjune.dev/en/blogs/create-redis-sets-with-member-expiration/
---

![Photo by @aronvisuals on Unsplash](https://images.unsplash.com/photo-1501139083538-0139583c060f)

[Redis](https://redis.io) is a good in-memory key-value data store that supports many types of value. [Sorted Sets](https://redis.io/topics/data-types-intro#sorted-sets) is one of them. According to the docs `sorted sets` is:

> Sorted sets, similar to Sets but where every string element is associated to a floating number value, called score. The elements are always taken sorted by their score, so unlike Sets it is possible to retrieve a range of elements (for example you may ask: give me the top 10, or the bottom 10).

What they didn’t say about `sorted sets` is the expiration of `sets members` can’t be defined, at least until this blog post is created. Why do we need to define `sets members` expiration?

Well, in my case I’ve required to create a phone service that could generate and verify OTP that sent to the users with a specific limit. The prior design is using [Golang Rate Limit](https://godoc.org/golang.org/x/time/rate) that I thought it couldn’t be horizontally scalable. That’s why I thought that I would use Redis for this case. The requirement for generating OTP is only like this:

- Each phone number can request OTP up to `X times` per `Y minutes`

That’s why I came up with `Redis sets` but `sets members` can’t have its own expiration time. Then I was googling around until I found [this issue comment](https://github.com/redis/redis/issues/135#issuecomment-2361996) by [@pietern](https://github.com/pietern). This is quite a hacky move, but at least it is doable. That’s why I tried to implement it. Once again comments on Github saved my job.

The idea is quite simple, using the score on sorted-sets as an expiration millis. Fetch the valid members that have a score between `current millis` and `current millis + Y minutes` and remove the expired members that have a score between zero and `current millis`. So the minimum pseudocode would be like this:

```
# define variables
timeLimit := Y
requestLimit := X
key := +6212312341234
otp := randomString(6)
now := currentMillis()
exp := now + timeLimit

# get total of generated phone number in key
validOTPs := redisQuery("ZRANGEBYSCORE $key $now $exp")

# Limitting request
if count(validOTPs) >= requestLimit
then exit

# Add members to key
redisQuery("ZADD $key $exp $otp")

```

I think this method is good enough and the simplest one to implement. You can add optional operations like, `adding expiration to the key`, or `removing members that are no longer valid`. But this operation is enough to adding expiration to the `sets member`. You can also use this method to limiting the OTP verification to avoid brute-force.
Batch-rename files easily with `rename`
Tags: linux, bash, productivity
Published: 2020-10-27 14:41:24

---
title: Batch-rename files easily with `rename`
published: true
date: 2020-10-27 11:20:00 UTC
tags: linux, bash, productivity
canonical_url: https://alvin.codes/writing/nifty-command-lines-rename
series: Nifty Command Lines
---

I use the rename action in macOS Finder when I need simple operations. For example, changing a file extension from `.PNG` to `.png` or replacing underscores with hyphens. For more complex stuff, like lowercasing, or removing a range of characters, Finder becomes too tedious.

That’s where the `rename` command comes in. It lets you use regular expressions and looks like this: `rename -f '[regex]' [files]`.

Right off the bat, you want to remember the `-n` or `--dry-run` option. It’s super useful to test out what the resulting files will be without actually renaming them.

Here’s how you would replace all the double dashes with single ones:

```bash
~/Export ❯❯❯ rename -f 's/--/-/' * -n
'Example--1.png' would be renamed to 'Example-1.png'
'Example--2.png' would be renamed to 'Example-2.png'
'Example--3.png' would be renamed to 'Example-3.png'
'Example--4.png' would be renamed to 'Example-4.png'
```

The `*` in the command above means “do this on all files in the current folder.” You can use glob patterns to specify target files. So, to rename only `.png` files, you’d write `rename '[regex]' *.png`

As I said, regular expressions.   
You write them like this `s/[old]/[new]/` or `y/[old]/[new]/` without the square brackets.

In our command, `s/` regexes are used for 1-to-1 character mapping while `y/` regexes are for more complex replacements involving character ranges. I mostly use `y/` regexes because as I said earlier, there’s Finder. Here we go, practical examples.

Replacing dashes with underscores: `rename -f 's/-/_/' *`

It gets really powerful when you can work on character ranges:

- `rename -f 'y/a-z/A-Z/' *` turns all lowercase into uppercase.
- `rename -f 'y/A-Z/a-z/' *` turns all uppercase into lowercase

More real-world examples.

Turn filenames into URL-friendly "slugs" 🐌:
`rename 'y/A-Z /a-z-/' *`

Remove the _last_ 𝒙 characters in a filename and replace them:
`rename 's/.{𝒙}$/replacement/' *`

In my case, Notion's Markdown export adds 34 random characters to every exported file. That's how I get rid of them:
`rename 's/.{36}$/.md/' *.md`

As usual, install it with Homebrew or apt-get: `brew install rename` or `apt-get install rename`.
Skynet is hosting a hackathon for SkyDB with at least $9,000 in prizes
Tags: hackathon, skynet, blockchain, development
Published: 2020-10-28 16:39:20

SkyDB is the latest ground breaking innovation in the Skynet ecosystem. SkyDB gives developers a Key Value, globally accessible data storage solution. This enables two incredible new features to Skynet: the ability to store account info, and Skylinks that can be updated with new content.

Accounts are what take Skynet to the next level. This is the final building block required by Skynet to allow developers to build feature complete applications that compete with the likes of Youtube, Twitter, Instagram, and Snapchat.

To celebrate the launch, we're hosting a hackathon with at least $9,000 in prizes. It starts November 2nd and lasts for three weeks! Sign up now: https://gitcoin.co/hackathon/skydb/onboard
Una extensión para detectar los "aria-label" no aplicados en etiquetas HTML.
Tags: html, a11y, webdev, css
Published: 2020-10-28 16:43:05

Quería compartir con ustedes un proyecto que hice hace unos meses.

Cree una extensión para el navegador que detecta los `aria-label` no aplicados en las etiquetas `HTML` que para mí personalmente son las más importantes. 

Es muy sencilla en realidad, solo se inyecta un código `CSS`, que marca un borde amarillo en las etiquetas que no sea detectado el `aria-label`.

Por ejemplo un `button`que cierre un menú.

Ejemplo:
```html
<button type="button" aria-label="Cerrar Menú">X</button>
```
Si no contiene este atributo la extensión marcara un borde amarillo en el botón. 

Otro ejemplo puede ser al abrir un menú, más que seguro que vas a encontrar el famoso menú hamburguesa y ahí de nuevo necesitas declarar este atributo.

Es bastante normal ver botones que cierran menús con un icono de `X` o directamente una "X", solo pregúntate ¿como leé el lector de pantalla este botón o mejor como se lo pronuncia a una persona con baja visión o que directamente no tiene visión?, Bueno para eso es este atributo, obviamente que hay muchos más atributos `aria`.

Ejemplo de como se ve:

![Marcado amarillo de etiquetas HTML que no sea detectado el `aria-label`](https://dev-to-uploads.s3.amazonaws.com/i/2arm89ga0pecmlbodaye.png)
Hay cientos de ejemplos en etiquetas `HTML` que puede ser aplicado este atributo. 

Y si te has preguntado como funciona esto, osea como sabe la extensión que ahí no hay un `aria-label`, bueno solo es un `CSS`. 
Funciona de la siguiente manera:

```css
button:not([aria-label]) {
  outline: 2px dashed #ffd900 !important;
}
```
Es muy fácil entender esto, si no hay un `aria-label` pinta un `outline` de `2px` tipo `dashed` que es una línea con puntos como se ve en la imagen y el color, el `!important` es necesario por qué es un `CSS` inyectado a una X página, si no colocamos esto, el `CSS` no se inyectará correctamente. 

No voy a profundizar en como crear una extensión, quizás lo deje para otro artículo. 
Solo quería compartir esta idea con ustedes. 

### Conclusión
Por ahora esta extensión solo hace esto, no hay nada programado. Está muy "verde" aún, pero creo que es un paso.

Está extensión no está publicada, solo en github.

Puedes ver el repositorio y mirar que es muy sencillo en realidad. 

Repo: [Aria Observation Tool](https://github.com/Franqsanz/aria-observation-tool)

Gracias por leer!!!