teleren/devto huggingface dataset:
Installing open-wc on MacOS
Tags: opensource, npm, node
Published: 2021-08-29 03:08:31

In order to install open-wc we need to install some software, namely NodeJS/npm, and yarn.  We will start with NodeJS. First, navigate to https://nodejs.org/en/ and install the LTS version, at the time of writing that is 14.17.5.  Once the installer finishes downloading, open it and follow the prompts.  If npm is already installed on your machine preform the `npm install -g npm@latest` to install the latest version of NPM

Upon completion of installing Node, open Terminal and type in the following commands: `node -v` and `npm -v` to verify that your installation was successful.  

To install yarn, open terminal type the following command: `curl -o- -L https://yarnpkg.com/install.sh | bash `.  Upon the completion of the command preform the following command to verify installation: `yarn -v`.

With our dependencies installed, let’s create a test project called “hello-world”.  Let’s change directories such as Documents.  Open termainal and type `cd Documents`.  Type ‘pwd’ to verify the output is `/Users/<Your User Name>/Documents`.  Then type `npm init @open-wc` and select the following options: Scaffold a new project, Web Component, enable Linting, Testing, and Demoing, do NOT use typescript, name it hello-world, select yes to write files to your hard drive, and Yes with Yarn.

To verify the project worked, type the following commands `cd hello-world` and then `npm start`.  If your web browser opens, then your job is done.  To stop the project, return to terminal and hit ‘control’ + ‘c’
Rubymine, add a Ruby interpreter using WSL.
Tags: ruby, wsl, rubymine
Published: 2021-08-29 02:33:25

I've been playing with Windows Subsystem Linux or [WSL](https://docs.microsoft.com/en-us/windows/wsl/) for a while now and the advantages of having a working Linux kernel inside my OS (Windows 10). Among which is to be able to configure the Ruby interpreter for my IDE ([Rubymine](https://www.jetbrains.com/ruby/)) with the version of Ruby that I have installed in my wsl. For it I will continue with graphs that help in this configuration.

## Add an interpreter

1: Open the **Settings / Preferences**

2: In the **Ruby SDK and Gems** page, click the **+** button and select **New remote**:

![Rubymine config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl1laanlozjzi6ai1ucf.png)

3: Provide a path to the Ruby executable, for example:

   - /home/**user-name**/.rvm/rubies/ruby-**X.X.X**/bin/ruby for Ruby installations usin [rvm](https://rvm.io/).

   - /home/**user-name**/.rbenv/versions/**X.X.X**/bin/ruby for Ruby installations using [rbenv](https://github.com/rbenv/rbenv).

![Rubymine config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw18aa3uiumguquiv7g6.png)

4: Udpate the interpreter path:

   - Ruby or version manager path: /home/**user-name**/.rbenv/versions/**X.X.X**/bin/ruby

## Summary

In this simple way we can take advantage of WSL to work with Ruby in a more efficient and comfortable way. In addition you can install the [New Windows Terminal](https://www.microsoft.com/es-cl/p/windows-terminal/9n0dx20hk701?rtc=1&activetab=pivot:overviewtab) to work with bash, powershell, cmd and others.

Thanks you for making it this far \o/.
Why this regex it's not working properly? [solved]
Tags: help, javascript, node, deno
Published: 2021-08-29 01:37:47

---
title: Why this regex it's not working properly? [solved]
published: true
tags: help, javascript, node, deno
---

I have a function that filter a food list and returns a fruit list.
The expected result is: `["apple", "banana", "watermelon"]` but the next code don't push `watermelon` in the array.
```js
const foodList = ["apple", "soap", "banana", "watermelon", "pizza"];

function getFruits(foodList) {
  const fruitRGX = /apple|banana|watermelon/g;
  const fruitList = [];

  for (const food of foodList) {
    if (!fruitRGX.test(food)) continue;

    fruitList.push(food);
  }

  return fruitList;
}

const fruits = getFruits(foodList);
const expect = ["apple", "banana", "watermelon"];

console.log({ fruits, expect });
// output:
// {
// 	fruits: [ "apple", "banana" ],
// 	expect: [ "apple", "banana", "watermelon" ]
// }
```

If I remove the `g` flag in the `fruitRGX` or I move the constant declaration inside the for loop then `fruits` is equal to `expect`.

Can someone explain what happening?

## Edit

I already get the answer since the first comment, see my reply or [Ben Calder](https://dev.to/blindfish3)'s comment if you want see a quick explain about this problem.
Algorithm practice
Tags: javascript, arrays, math
Published: 2021-08-29 01:21:30

https://codepen.io/ldfowler/pen/qBjOOvV

// // 1.) Write a function that returns an array with all the numbers from 1 to 255.
// function ReturnArrayFromOneTo255()
12:07
//2.) Write a function that would get the sum of all the even numbers from 1 to 1000.
//3.) Write a function that returns the sum of all the odd numbers from 1 to 5000.
// 4.) Write a function that returns the sum of all the values within an array.
// (e.g. [1,2,5] returns 8, [-5,2,5,12] returns 14).
// 5.) Given an array with multiple values,
// write a function that returns the maximum number in the array.
// 6.) Given an array with multiple values,
//  write a function that returns the average of the values in the array.
// [1,3,5,7,20] average is 7.2
// 7.) Write a function that would return an array of all the odd numbers between 1 to 50.
#007: Paginando resultados na pesquisa do Elasticsearch
Tags: elasticsearch, paginate, from, size
Published: 2021-08-29 01:20:25

Como mencionado no artigo [#003: Buscando todos os documentos no Elasticsearch](https://dev.to/brunoflegler/003-buscando-todos-os-documentos-no-elasticsearch-39840), por padrão ele retorna 10 documentos. Hoje iremos aprender a paginar os resultados.

Vamos usar os parâmetros `size` que é o total de registros que será retornado e o `from` que é a quantidade de documentos que serão ignorados, começando como 0. Juntos, as duas propriedades formam a paginação. Dessa forma temos na primeira requisição:

```json
GET customers/_search
{
  "query": {
    "match_all": {}
  },
  "from": 0,
  "size": 10
}
```

Na segunda requisição será `from` + `size`, igual à 0 + 10 = 10:

```json
GET customers/_search
{
  "query": {
    "match_all": {}
  },
  "from": 10,
  "size": 10
}
```

Na terceira requisição será `from` + `size`, igual à 10 + 10 = 20:

```json
GET customers/_search
{
  "query": {
    "match_all": {}
  },
  "from": 20,
  "size": 10
}
```

E assim por diante, porém por padrão a soma de `from` + `size` não pode ultrapassar 10000. É aconselhável usar `search_after` para essa situação, veremos nos próximos artigos.

> ⚠️ **Atenção**:
> 
> Evite usar o paginação com muita profundidade, ou seja, o `from` com um valor muito alto ou solicitar muitos resultados de uma vez. Os registros das páginas anteriores são mantidos em mémoria e podem aumentar o consumo de mémoria e CPU, resultando em degradação do desempenho ou falhas de nó.

Sua vez de praticar, te vejo em breve.
How to get someone to give you feedback on code you wrote.
Tags: career, productivity, javascript
Published: 2021-08-29 01:11:11

Do not copy and paste it and send it to them on email, iMessage, whatever....it's a pain in the a$$ to read and give feedback.

Github has this thing called Gists. Use them, love them, share them.

https://gist.github.com/

Next time you want someone to give you feedback, copy your code into a gist and send it ovahhhhh.

This way they can comment on the code and reference specific lines.

Dont forget to leave some context on what youre trying to accomplish...they might see a better way to solve the problem.

***Want more? Come join our Facebook group to help you get your first job as a software engineer, career development, and so much more!***

https://www.facebook.com/groups/310120400851953

Scott
IST 402: Intro 
Published: 2021-08-29 00:33:53

**About me:**
My name is Hailey Hahn and I am currently a Senior Majoring in Information Sciences and Technology. Overall I have found myself as an extremely busy student throughout my four years here at Penn State. I am on the Division One Women's Fencing team, danced in Thon Athlete hour, was our team's SAAB rep and completed two amazing internships! This summer I interned at Hershey, working with their software, Ecommerce and web development which got extended through the Fall semester! I am excited to see what else I will be able to learn and apply from my internship to this class, Visa vera. Before my work at Hershey, I was an intern at the Penn State High Pressure Combustion lab. That was something I enjoy greatly because I was able to work on things I never saw myself doing. I was working on a level 4 laser that showed jet-fueled propagations. It was such a great experience being able to program while also learning things such as chemical reactions, conducting experiments and more! The one reason I have learned to love IST is because of the various different types of work it has brought me to. I cannot wait to see what the future holds. 

**Why IST 402?** 
I chose this class because of my internship and previous work. I have a little background in creating apps and different interfaces which I find very fun! Web development is a really great middle ground of programming and creativity that I do not always get to see in other fields of IST. This class is crucial to helping me chose whether or not I would like to continue down this path post graduation. Since I am only at the very beginning of my career, I am really excited to see what is to come of it.
IST: 402 Course Introduction
Published: 2021-08-29 00:28:48

Hello Everyone! My name is Colton Eckenrode and I am from Bellefonte, PA. I am currently a senior at Penn State, majoring in Design and Development within the Department of IST. During my free time, I love to play video games with friends, practice/learn coding, hangout with friends, and play golf. Regarding web development, I have always enjoyed learning about how websites function in the back-end, as well as just building websites in general. With the technological advancements we have today, and the way jobs in this field have been growing, it is almost a necessity to learn about this kind of information and the way technology works in today's society. I'm excited to learn more about different web components in this class and how to incorporate them into code to further my coding knowledge, as future jobs will most likely look for some of these aspects. I have had the opportunity of using different languages such as Java, HTML, CSS, JS so far in my coursework to produce different projects within a group setting. As I know there is tons more stuff to learn, I think what I have seen so far has taught me pretty important techniques and has allowed me to have experience with different coding languages, as well as working alongside multiple groups of people completing semester long projects.
Which HTML element tag can be used to represent and show content to the user?
Tags: html
Published: 2021-08-29 00:00:00

---
  title: Which HTML element tag can be used to represent and show content to the user?
  published: true
  tags: HTML5
  date: Sun Aug 29 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/html-element-tag-to-represent-and-show-content-user
  cover_image: https://melvingeorge.me/_next/static/images/main-f5d48044f6327a80a03d9d64b1ccb7d8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/html-element-tag-to-represent-and-show-content-user)
  
**The best HTML element to represent and show content that can be viewed by the user is the `body` HTML element tag**

For example, the `body` HTML elements tag is used to add `h1`, `p`, `article`, `nav`, etc. HTML element tags that are seen by the user on the website.

The `body` HTML element tag can be written like this,

```html
<!-- Usage of the 'body' HTML element tag -->

<!DOCTYPE html>
<html>
  <!-- 'body' HTML element tag  -->
  <body>
    <h1>Hello World</h1>
    <p>This is a paragrapgh tag inside the body tag</p>
  </body>
</html>
```

As you see from the above code we have used the `h1` (heading level 1 tag) and `p` (paragraph tag) HTML tags inside the `body` HTML element tag that are used to show content when the user visits the website.

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

That's all 😃!

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

---
Don't automate all the things
Tags: devops, automation
Published: 2021-09-04 13:19:14

---
title: Don't automate all the things
published: true
date: 2021-08-29 00:00:00 UTC
tags: devops,automation
canonical_url: https://jhall.io/archive/2021/08/29/dont-automate-all-the-things/
---

DevOps is often confused with “automation.” I’ve [said before this is wrong](https://jhall.io/archive/2021/08/18/devops-isnt-about-automation/). You can do automation and still not be doing DevOps.

But what may be more controversial is that I believe the reverse is also true. You an do DevOps without automation.

Perhaps this is easier to swallow if we think of automation as a spectrum, with “completely automated, all the humans can go to the beach now” on one end, and “not automated at all, humans are releasing software by typing `tar` commands on the console.”

Nobody (we hope) is at either extreme. All of our teams, projects, and companies lie along this spectrum. After all, even the automation needs maintenance some times…

![](https://jhall.io/archive/images/irobot-manual-cleaning.jpeg)

Where does DevOps fit along this spectrum? I don’t think it does. At all.

Some might claim that you can’t say you’re doing DevOps if you’re not doing automatic deployments. But is that really true?

What if the developer who wrote the code manually issues a `docker push` command to deploy? We can discuss the security and reliability implications, but I think it’s hard to make the case that they’re operating in some sort of “Dev silo”.

Automation improves DevOps drastically. So everyone interested in DevOps should also be interested in imporoving automation. But automation also proves non-DevOps, so those not doing DevOps should also probably be interested.

Do DevOps. Then [automate only what makes sense](https://jhall.io/archive/2021/03/23/how-to-automate-anything/). Or don’t do DevOps, and automate only what makes sense just the same.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Leetcode 1351: Count Negative Numbers in a Sorted Matrix
Tags: leetcode, 2darray, python, cpp
Published: 2021-08-28 23:05:31

Problem statement:
https://leetcode.com/problems/count-negative-numbers-in-a-sorted-matrix/

- Let's say we are at i-th row and j-th column. If grid[i][j] < 0, we can say that numbers below grid[i][j] are all negative and count them up. With this, we just start from top right corner to bottom left corner and count the negative numbers column by column.

Runtime: O(M+N)

Python
```python
class Solution:
    def countNegatives(self, grid: List[List[int]]) -> int:
        m = len(grid)
        n = len(grid[0])
        i = 0
        j = n - 1
        count = 0
        while i < m and j >= 0:
            if grid[i][j] < 0:
                count += m - i
                j = j - 1
            else:
                i = i + 1
        return count
```

C++
```cpp
class Solution {
  public:
    int countNegatives(const vector<vector<int>>& grid) {
        int m = grid.size();
        int n = grid[0].size();
        int i = 0;
        int j = n - 1;
        int count = 0;
        while(i < m && j >= 0) {
            if(grid[i][j] < 0) {
                count += m - i;
                j = j - 1;
            } else {
                i = i + 1;
            }                
        }
        return count;
    }
};
```
Habits common in all successful people 
Published: 2021-08-28 22:20:03

##Optimistic approach and Positive attitude
A entrepreneur faces lots of challenges and failures in their life it either breaks them or makes them. The common thing that helps them go through this is optimistic approach and strong belief on their vision. 

##Reading
This is one of the most common habit of successful people that they all are avid readers, they read for pleasure as well as for gaining knowledge not just about their own field but every other field as well.

#Dicipline 
Discipline is not just about rising early but rising early is also a most common habit in successful people. they are disciplined about their work their schedules. They keep themselves organized by prioritizing their most important work at the top and least important at the bottom.

##Healthy lifestyle
Be it either physical or mental health successful people try to be healthy in in both by exercising few days a week and often meditating for their mental health. this increases blood circulation in the body and make them  more active and productive

##Taking action
Many people waste their time by thinking, planning and procrastinating. But winners are executers they focus on executing all the time they focus on deployment rather than perfection.

##Networking
This is most underrated skill and most people don't focus on this much but living around people who are as motivated and hungry for success as you are has huge impact on your life. That’s why successful people prefer to develop relationships with other motivated and successful people.
JS13K: A journey through music (Day 17/18) 🎶
Tags: gamedev, challenge, javascript, devjournal
Published: 2021-08-28 22:16:55

I am making better notes and doing a general restyling. I think tomorrow to do a step forward for making a real good prototype of the game. Hope to show it to you! Also, 13 days left for finishing the game for JS13K :O

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whm6xqrpjkn2abtn7o4q.gif)
#100daysofcode [Day - 06]
Tags: javascript
Published: 2021-08-28 21:57:46

Hey Guys ! how are you all ? Today is the sixth day of 100 days coding challenge and today i tried to get a indepth knowledge of json api , as well as i make this site using rest countries api.

Here is the live Site :https://countries-using-api.netlify.app/

and the code link :https://github.com/thekawsarhossain/100-days-of-code
Tutorial: Installing open-wc
Published: 2021-08-28 21:33:13

1.) Downloading Node.js and NPM: 
    To download both Node.js and NPM I used a tutorial at the following link: https://phoenixnap.com/kb/install-node-js-npm-on-windows 

I downloaded the Node.js installer for Windows from here: https://nodejs.org/en/download/ 

After downloading the installer I ran the Node.js install wizard and clicked next. Agree to the terms of service and hit next. The installer will then prompt the user for an install location. Enter an install location and hit next. The install will then ask you if you need additional components to install. Select NPM and click next. Next, click the install button to finally install both Node.js and NPM. To confirm that Node.js and NPM are installed, open the command prompt and enter the commands node -v and npm -v to see the current version of Node.js and NPM installed on your machine. 

2.) Installing Yarn: 
   I used the following tutorial to download yarn on my windows 10 machine: https://classic.yarnpkg.com/en/docs/install/#windows-stable 

With NPM now installed on your machine you can use it to install yarn. Just open the command prompt and run this command: npm install --global yarn 

After the command runs, confirm the version of yarn installed on your machine by running the following command: yarn --version 

3.) Installing VSCode: 
   To get started downloading VSCode download the VSCode installer from the following link: https://code.visualstudio.com/docs/?dv=win

Upon opening the installer Accept the License terms and click Next. Then Select Additional tasks the installer should complete like whether or not you want to add a desktop icon and adding VSCode to PATH and click next. Then click install to begin installing VSCode on your device. 

4.) Installing git: 
To download git for Windows go to the following link: https://git-scm.com/download/win

Download and run the git installer. After opening the installer click next on the Information page. Then select which components you want the installer to download or leave the options as default then click next. The next step is to choose an SSH executable. I chose the default option to use bundled OpenSSH then hit next. The last step gives you the option to enable experimental support for pseudo consoles and an option to enable experimental built-in file system monitor. You can choose to enable these if you wish or leave the settings as default, as I did, and click install. After the git download completes, confirm the downloaded version by opening the command prompt and typing the following command: git --version. 

5.) Confirm web components boilerplate: 
To confirm that you have all necessary components downloaded, open the command prompt and run the following command: npm init @open-wc 
If all components were downloaded correctly you should get a message allowing you to Scaffold a new project with Open Web Components.
Afinal, o quê significa A11y?
Tags: a11y, frontend, webdev, brazilliandevs
Published: 2021-08-28 21:25:18

---
title: Afinal, o quê significa A11y?
published: true
date: 2021-26-08 12:55:00 UTC
description: Você já viu o termo a11y e nunca compreendeu o porquê de ser utilizado? Nesse artigo te explico e mostro uma curiosidade por trás do termo.
tags: a11y, accessibility, frontend, webdev, brazilliandevs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iwa3y09mtxaxuzds9b1.png
canonical_url: https://brunopulis.com/o-que-significa-a11y/
---

Talvez você já tenha visto pessoas utilizando o termo **a11y** ou até mesmo a hashtag #a11y e não compreendeu a correlação dele com acessibilidade. Este termo refere-se a palavra inglesa accessibility.

Os dois caracteres do meio são o número um, não ” L” s minúsculos . Diga como “A-um-um-Y” ou “A-onze-Y”. Pode ser pronunciado também como, ally ou aliado em português.

## Qual o sentido e significado de A11y?

O termo, representa a ideia de ser aliado das pessoas com deficiência, afim de, reivindicar, promover e celebrar o direito ao acesso a informação.

Quando utilizamos, dizemos que somos aliados de uma causa tão nobre e em contrapartida, referenciando a acessibilidade digital em si.

![Termo a11y que representa a palavra acessibilidade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eulns99ezqqg8kw6pwx7.png)

Existem outros termos que utilizam a mesma lógica, por exemplo:

* A internacionalização é representado pela sigla i18n;
* A localização é representada pela sigla l10n;
* World Wide Web, pode ser representado por W3.

**Está gostando desse conteúdo?**
> Escrevo semanalmente na [Pulis Letters](https://subscribepage.io/cartas) e compartilho insights valiosos sobre acessibilidade digital para desenvolvedores, QA’s e designers.

Te espero lá.

## Você conhecia esse termo? 

Comente abaixo e se esse artigo te ajudou considere [me apoiar](https://ko-fi.com/brunopulis).