teleren/devto huggingface dataset:
New Domains for Developers 
Tags: showdev, domain, internet, free
Published: 2020-10-28 13:51:59

Hello!

Since this is our first post on dev.to we may as well introduce ourselves. We're Onepixel, a development collective that doesn't really specialize in anything, we just try and create what comes our way! Our membership includes a total of 6 staff / developers working around the clock in multiple timezones.

Anyway, let's get to the core meaning of this post...

We've just launched a new subdomain service for developers that want a funny but short subdomain to promote whatever you want (with some restrictions)! You can now get a should-get-to.work subdomain like i.should-get-to.work. To be honest, I probably should at some point but this is more fun! 

{% github opxl/domains %}

Getting a subdomain is free. Everyone loves free things, right? If you want to, you can also donate to the project. An option for this is on the GitHub repo. We aim for subdomains to remain free and we'll also be progressively expanding the range of domains you can access.

If you want a subdomain just go ahead and visit the GitHub repository! If this post gets a nice reception our Chief Technical Officer will publish a post talking about the technical side of the automated domain issuance system!
Free and open source Product Information Management (PIM) system
Tags: news
Published: 2020-10-28 14:02:04

Product information management (PIM) is an IT system that helps a business to manage information about products. This is like CRM but for your products.

New free and open source PIM system is available now - https://www.openpim.org/

The backend is developed in Node.js, the frontend is in Vue. Take a look at github account for more details - https://github.com/openpim
Integrate Mochawesome Reporting with API Tests
Tags: api, javascript, testing, tutorial
Published: 2020-10-28 14:01:23

In this post, we'll take a look at how to get reporting setup for API tests. So far we have been printing results out on the console, now we'll take a look at how to generate HTML report using [mochawesome](https://www.npmjs.com/package/mochawesome) reporter.

#### Installation
Add `mochawesome` to the project:
```
npm install --save-dev mochawesome
```

#### Run the tests
To run the tests, you can simply pass it with the `mocha` command:
```
mocha test.js --reporter mochawesome
```
This will generate a `mochawesome-report/` directory in your root folder which will contain a `mochawesome.html` file. Open the file to see the results, will look similar to this:

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

There you go, now you have HTML reporting setup with your tests!🙌

***

#### Check out this video to see how to generate an HTML report with the API tests we have created so far as well as how to plug this in with the `npm` script:

{% youtube ruOlHHHyH5s %}

You can also clone the [GitHub repo](https://github.com/automationbro/JavaScript-API-Automation-Tests) to access this code

***

#### To learn more about API testing, check out my free tutorial series here - 
https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV&ab_channel=AutomationBro
***

I hope this post helped you out, let me know if you have any questions in the comments below! 

Happy testing! 😄 

...

Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel
Support my work - https://www.buymeacoffee.com/automationbro
Follow [@automationbro](https://twitter.com/automationbro) on Twitter
Como escrever links mais acessíveis para a web
Tags: a11y, webdev, ux, tutorial
Published: 2020-10-28 13:55:36

Um problema de acessibilidade muito comum em artigos na web são links com textos como: 

* clique aqui;
* saiba mais;
* continue lendo.

## Mas por que esses links não são acessíveis?

Vamos usar este trecho de um artigo como exemplo. Nele os textos em azul são os links.

> [Saiba mais](https://pt.wikipedia.org/wiki/Alfred_Hitchcock) sobre a história do diretor de cinema Alfred Hitchcock e [clique aqui](https://pt.wikipedia.org/wiki/Alfred_Hitchcock#Filmografia) para conhecer suas obras mais conhecidas.

Para um usuário que enxerga, não há dificuldade em saber para qual conteúdo ele será direcionado ao clicar em **saiba mais** ou **clique aqui**.

Mas e o usuário que não enxerga? 

Ele pode pedir para o leitor de tela narrar apenas o texto dos links, antes de narrar todo o parágrafo, ou seja, o usuário saberá que há dois links no parágrafo, mas não saberá para onde eles levam após o clique, pois tudo o que ele ouviu foi: **saiba mais** e **clique aqui**.

## Vamos deixar os links deste trecho mais acessíveis:

> Saiba mais sobre a [história do diretor de cinema Alfred Hitchcock](https://pt.wikipedia.org/wiki/Alfred_Hitchcock) e clique aqui para conhecer [suas obras mais conhecidas](https://pt.wikipedia.org/wiki/Alfred_Hitchcock#Filmografia).

Agora o leitor de tela irá narrar os links assim: **história do diretor de cinema Alfred Hitchcock** e na sequência, **obras mais conhecidas**.

Desse modo, mesmo só tendo ouvido o texto dos links e não de todo o parágrafo, o usuário é capaz de saber para qual conteúdo cada um dos links irá levar após o clique. 

Uma simples mudança no seu site pode fazer muita diferença para outras pessoas.

Então lembre-se: os links devem descrever exatamente para onde o usuário será levado após o clique.
A brief rant about meta tags and SEOs
Tags: html, seo
Published: 2020-10-28 13:49:31

Most SEOs throw around the term `meta tags` incorrectly. 

They mean `meta elements` most of the time.

While meta tags belong to the HTML basics, and SEO basics with that, it's important to get your lingo right.

Why?

Because when SEOs complain that they're not being understood or respected by developers, it may be because they're (literally) not using the right language to explain what they need.

I know that sometimes was the case with me, in my consulting days. And rightfully so, I was corrected.

I put together an article explaining what meta tags are and aren't, and describe the most important ones from an SEO perspective. 

Check it out here: [Meta Tags in SEO: the Ultimate Guide
](https://www.contentkingapp.com/academy/meta-tags/)
Automating with Nodejs Part - 1 (Setup)
Tags: node, automation, npm, script
Published: 2020-10-28 13:46:18

Table of Content
1. [Initializing](#init)
2. [writing the script](#script)
3. [Install globally](#global)(on your system😜)

Description  - setting up the environment to write scripts to automate tasks with nodejs and publishing to npm
part I - setup , hello world , testing locally 

#### Initializing <a name="init"></a>
*prerequisites*
- nodejs
- npm

create a folder for your project

cd to the folder -> do npm init

```bash
mkdir npm_script
cd ./npm_script
npm init -y
```
#### writing the script <a name="script"></a>
create an index.js file(starting point of your script)
##### adding the hashbang!

`#!/usr/bin/env node`

it specifies the the environment the script will run on

without hashbang
```
node ./filename.js
```
with hashbang
```
./filename.js
```
at this point your files would look like this
![added hashbang](https://dev-to-uploads.s3.amazonaws.com/i/g4z1l0n65b6pk6z238uq.PNG)

we would add some code to test our script
```javascript
const myAwesomeFunction = () => {
 console.log("Hello World")
}
```
which would look like 
![added hello world](https://dev-to-uploads.s3.amazonaws.com/i/ag6qgvvbml8d9clqi487.PNG)

*now we can test if our code runs*
by just typing
`./index.js`

#### installing the script globally <a name="global"></a>

```
npm install -g  // in your script directory
```

>now you can access the script anywhere on your system

**to be continued* (writing script to organize files, publishing to npm)
Choosing the Right Database for Serverless Applications
Tags: database, productivity, serverless
Published: 2020-10-28 13:38:22

Serverlesss computing, where compute instances are provisioned and destroyed on the fly, ditches the idea of long running servers. Traditional databases were designed primarily for self-managed long running servers. This has lead to various problems in using traditional databases with serverless applications:

### Provisioning, Scaling and Maintenance

The main idea of serverless is to offload provisioning, scaling, capacity planning and maintenance of servers, and focus on application development.

This conflicts directly with how traditional databases are set up. You have to provision a fixed amount of servers (which do not scale down, you might under-use them), configure scaling policies based on predictions, maintain backups, install updates, and ensure robustness and security.

### Persistent Connections

Traditional database clients maintain a persistent connection to the database server and all requests are made on this connection. The set up and tear down of this connection are costly processes. As a result, setting up and maintaining persistent connections every time a new compute instance spins up becomes very inefficient for serverless applications.

### Number of Connections

Serverless applications may scale up to hundreds or thousands of concurrent compute instances, which means database servers have to maintain as many connections as number of instances.

This is hard on performance, as a traditional database becomes more inefficient as the number of connections increases, while there is also a limit in the number of connections a single database server can keep open.

### Global Access

Serverless compute has made it easier to provide low-latency access to your applications all over the world. However, replicating data and maintaining data consistency across multiple regions is a difficult challenge for traditional databases. 

## The Solution

Serverless applications require a suitable database designed to meet the needs of the serverless model. The right database should:

- offer a fully-managed solution; no servers to provision and maintain, on demand scaling (up and down), automated backups, easy recovery, and high security
- offer an API that does not depend on costly persistent connections, while still remaining fast
- scale efficiently with the number of serverless compute instances
- offer global data replication and consistency with low-latency

As serverless computing sees more adoption, more developers will need a suitable database for their serverless needs and move on from implementing workarounds with traditional databases.

### And Lastly

Our team at [Deta](https://deta.sh) is working hard in building a database that overcomes the inadequacies of traditional databases in serverless applications with focus on end-user simplicity with [Deta Base](http://deta.sh). You can get started [here](https://docs.deta.sh/docs/base/about). We highly appreciate any sort of feedback.
FREE Cloud-Native Associate Certification (ACA)
Tags: alibabacloud
Published: 2020-10-28 13:36:30

Alibaba Cloud is offering the certification - Cloud Native completely FREE to you ... in [**THIS LINK**](https://resource.alibabacloud.com/event/detail?id=2610) 

[there are limited seats available]

The original price for this exam is $200.

When? Friday, October 30, 2020, 13:30 -16:00 UTC+05:30

Important: It is mandatory to go through the Online Preparatory Course for Cloud-Native Exam, which is available at a heavily discounted price, visit the website and know more!
Comment ajouter plusieurs classes aux composants React
Published: 2020-10-28 13:28:43

Parfois, dans nos composants React, nous devons ajouter plusieurs classes en fonction de certaines conditions. Comme dans le composant Button, nous pouvons ajouter différentes classes `primaires` et `secondaires` en fonction d'une valeur de `props`.

En React, il existe deux façons d'y parvenir:

     
- 
template literals
     
- 
bibliothèque de noms de classe(classnames library)

# 1. template literals:

Nous pouvons définir l'opérateur ternaire dans les templates literals pour évaluer conditionnellement le nom de la classe.


```
import React from "react";

const Button = ({fill, isDisabled}) => {
  return (
    <button
    className={`
      default
      ${fill ? 'primary' : 'secondary'}
      ${isDisabled ? 'disabled' : 'enabled'}
    `}
    >
    {props.children}
    </button>
  );
}

export default Button;
``` 
# 2. bibliothèque de noms de classe

     
- 
C'est une bibliothèque très légère (~ 17 Ko) pour utiliser plusieurs classes.
    
- 
 Nous pouvons passer des chaînes ou des objets comme arguments dans la fonction className.
     
- 
L'objet argument a une clé comme nom et une valeur comme condition. Si la condition est fausse, c'est-à-dire que la valeur est fausse, cette clé n'est pas incluse dans la sortie.


```
import classNames from 'classnames';

classNames('default', 'primary')    /* seul les chaines (string) */

classNames('default', {primary: props.fill}) /* chaine et objet  */

classNames({default: true, primary: props.fill}) /* seul les objets */

``` 
**Exemple ci-dessus avec la bibliothèque de noms de classes:**


```
import React from "react";
import classNames from "classnames";

const Button = ({fill, isDisabled, size}) => {
  return (
    <button
    className={classNames({
      default: true,
      primary: fill,
      secondary: !fill,
      disabled: isDisabled,
    })}
    >
    {props.children}
    </button>
  );
}

export default Button;
``` 


> Merci! Les commentaires sont très appréciés :) Nous pouvons discuter sur  [Twitter](https://twitter.com/AdechinaAlao)
Code Smell 09 - Dead Code
Tags: codenewbie, tutorial
Published: 2020-10-28 13:27:24

*Code that is no longer used or needed.*

# Problems

- Maintainability

# Solutions

- Remove the code
- [KISS](https://en.wikipedia.org/wiki/KISS_principle)

# Examples

- Gold plating code or [Yagni](https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it) code.

# Exceptions

- Avoid metaprogramming. When used it is very difficult to find references to the code.

{% post https://dev.to/mcsee/laziness-i-meta-programming-32a9 %}

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/9e793df7489a96dc27d29d0f4e963bdf)
```javascript
class Robot {   
  walk(){
    //...
    }
  serialize(){
    //..  
  }
  persistOnDatabase(database){
    //..  
  }
}

```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/e1075cc971b5f7af28e37d29b492735d)
```javascript
class Robot {   
  walk(){
    //...
    }  
}
```

# Detection

Coverage tools can find dead code (uncovered) if you have a great suite of tests.

# Tags

- Unnecessary

# Conclusion

Remove dead code for simplicity.
If you are uncertain of code you can temporary disable it using [Feature Toggle](https://en.wikipedia.org/wiki/Feature_toggle).
Removing code is always more rewarding than adding.

# More info

- [Laziness I: Metaprogramming](https://dev.to/mcsee/laziness-i-meta-programming-32a9)

# Credits

Photo by <a href="https://pixabay.com/es/users/ray_shrewsberry-7673058/">Ray Shrewsberry</a> on <a href="https://pixabay.com/">Pixabay</a>

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/06/11*
Easily parse an excel spreadsheet into JSON
Tags: node, javascript, productivity
Published: 2020-10-28 13:21:20

Did you know that you can easily parse an excel spreadsheet using Node.js? Keep reading to speed up your information retrieval processes.

# Why do I need this? 
I learned this a few months ago and came back to using it ever since. I've found that there are several use cases in my daily life that can profit from this little script - in my job as well as in my private life or side projects. You can use it for nearly every scenario where you need to transform your spreadsheet into JSON. 

##Here are some examples: 
* your working with a client and need an easy way for them to maintain the data your using for the project, most people are familiar with working with excel
* your collaborating with a few people and want a safe place for everybody to collect data
* you like planning your life in excel but want to process the data further - Maybe you want to create a beautiful website about your carefully planned road trip 
* and many more, get creative! 

# How do I use it? 
You only need two Node.js modules for this: [**xlsx-stream-reader**] (https://github.com/DaSpawn/xlsx-stream-reader/issues) for parsing the data and [**fs**] (https://nodejs.org/api/fs.html) for saving the created JSON file.  

xlsx-stream-reader parses each row of your spreadsheet and lets you process the data however you want. I usually save my data in an array, where each row represents one element: 

## Code example of the parsing process
``` javascript
let currentRow = {};

// iterating the rows 
row.values.forEach(function (rowVal, colNum) {

    if (rowVal && rowVal !== "") {
        // parsing all columns 
        if (colNum == "1") {
            
            currentRow.id = rowVal; // ID
        } else if (colNum == "2") {

            currentRow.name = rowVal; // name
        } else if (colNum == "3") {

            currentRow.img = rowVal; // img
        } 
    }
});

if (currentRow.name) {

    console.log(currentRow);

    // push the current row into your array
    dataInRows.push(currentRow);
}
```

The stream reader also emits events, e.g. when it reaches the end of the spreadsheet or an error occurs. 

Overall the script is pretty lightweight and short. The longest part is usually the one where you define the rows (see above). 

## Your input
I hope you could learn something new from this little post. Feel free to add your thoughts or questions in the comments below! :)
Day 2 | So long ... Continue on Exercism.io
Tags: ruby, exercismio, 100daysofcode
Published: 2020-10-28 13:21:01

Greeting,

I had been stopped to continue on #100DaysOfCode for so long ...

{%post nijicha/day-1-getting-started-with-exercism-io-4mpg %}

Since 02 Oct OMG 😅

BTW, I decide to make this routine.

Today I had finished 4 tracks in Ruby track.
43 mins for Today

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

- Two Fer (Too EZ)
- Resistor Color Duo (a Bit)
- Acronym (Waste time too much 😅 but I had learned)
- High Scores (EZZ)

P.S. Genshin Impact make me lazy 🤪
TIL: ngIf can also have an else clause in Angular
Tags: angular, todayilearned
Published: 2020-10-28 13:17:40

I have a `message` component that makes an `async` call to retrieve the message. In my template, I use the `async` pipe to populate the view. So on the component, I have a `message$` that gets the message from a service like so:
```typescript
message$ = this.messageService.getMessage();
```
and in my `message-component.html` I have 
```html
<div *ngIf="message$ | async as message">
      {{message.value}}
</div>
-- other code
```
But the issue here is, I don't want my view to be empty when the message is being retrieved. I can use the `else` clause inside the `*ngIf` statement and define a template that replaces the `div` from above to show that something is loading. You can use a loading spinner or something similar, but for simplicity, I will just use a `div` with a text. So my final view will be something like
####message.component.html
```html
<div *ngIf="message$ | async as message; else isBusy">
  {{message.value}}
</div>
<ng-template #isBusy>Loading...</ng-template>
```
And that's it; hope that helps.

PS: The method stated above may not always be the best way to show a loading spinner for an async call, if there is any better way of doing it please let me know. TIA
Drawing a cartoon character in CSS
Tags: css, html, showdev, codepen
Published: 2020-10-28 13:16:53

---
title: Drawing a cartoon character in CSS
published: true
description: How to draw a cartoon character using HTML and CSS (with video!)
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/13z20emp1rnrmihj4kw1.png
tags: css,html,showdev,codepen
---

Another cartoon character coded from scratch in HTML and CSS. This one is more my style, although it reminds me of a character from Archie (the old version), so that might have been a subconscious influence.

This illustration was done a little bit different than others, instead of grouping elements (e.g. eyes, nose, mouth inside the face), I just put everything directly on the canvas. A bit annoying if you need to move different things at once, but luckily for me, I didn't need it.

Here is the CSS illustration:

{% codepen https://codepen.io/alvaromontoro/pen/ExyvEJY %}

And here it is a [video on youtube that shows how I coded it](https://www.youtube.com/watch?v=amsTs2cxAow). It is at 20x, but it is still a bit longer (~5 minutes) than other drawing videos I've done.

{% youtube amsTs2cxAow %}

---

This drawing is part of the [100 Days of CSS Illustration challenge](https://codepen.io/collection/AOaOdx). If you want to see more CSS drawings and how they were done, check [my Youtube channel](https://www.youtube.com/user/alvaromontoro/featured).
2020's fastest-rising tech jobs? Programming language PHP leads the way
Tags: php, job, backend, javascript
Published: 2020-10-28 13:15:44

---
title: 2020's fastest-rising tech jobs? Programming language PHP leads the way
published: true
description: 
tags: php, job, backend, javascript
//cover_image: https://direct_url_to_image.jpg
---

PHP is dead?

I dont think so...

https://www.zdnet.com/article/2020s-fastest-rising-tech-jobs-programming-language-php-leads-the-way/#:~:text=Programming%20language%20PHP%20leads%20the%20way,-Live&text=Job%20listings%20for%20entry%2Dlevel,industry%2C%20according%20to%20Indeed's%20data.
I am a developer
Tags: html, css, motivation, webdev
Published: 2020-10-28 13:11:44

"Well-a, beat the drum and hold the phone,
The sun came out today." (Fogerty)

The thing is, I am tired of the Federal Healthcare project management box that I am keeping myself in. 

As of today, I am out and and on the road to my next gig doing my best work and enjoying it. I can code and I want to write applications. Yeah! Let the job hunt begin.

That my friends is why I am blogging that I am a developer today!
"Put me in coach, I'm ready to play today" (Fogerty)

Source: Musixmatch
Songwriters: J. C. Fogerty
Centerfield lyrics © Wenaha Music Co