teleren/devto huggingface dataset:
Remove Leetcode locked problems
Tags: algorithms, python, computerscience, interview
Published: 2020-06-06 15:47:16

---
title: Remove Leetcode locked problems
published: true
description: A simple script to remove all locked problems from Leetcode 
tags: algorithms, python, computerscience, interview
---

If you're solving some Leetcode problems, but don't want to subscribe to the membership, you can use a simple script to remove all locked problems from your current list.

The locked problems are only for subscribers, so you can't access it. They are there as a call to action to subscribe.

```javascript
const lockedProblems = document.querySelectorAll('[data-original-title="Subscribe to unlock"]');

lockedProblems.forEach(problem => {
  problem.parentElement.parentElement.parentElement.parentElement.remove();
});
```

Use this simple script to get rid off all the locked problems. Now it is clean and help you focus on the problems you can access.

You can also find this script in the [Remove Leetcode locked problems gist](https://gist.github.com/leandrotk/0905da1d25bb5a7af68bf44a85cb7589).

If you are solving problems, you may be interested in my [Algorithms Problem Solving series](https://leandrotk.github.io/tk/series/algorithms-problem-solving/index.html).

- [tk@website](https://leandrotk.github.io/tk)
- [tk@github](https://github.com/leandrotk)
- [tk@twitter](https://twitter.com/leandrotk_)
Tree sturcture of your project
Published: 2020-06-06 15:37:18

So I wanted to send a screenshot of my project structure to one of my juniors. The first thing that struck me was taking a snapshot of the VS Code directory. 

Well that did do the work. But I wanted to see if there are more alternatives of doing this. 

Welcome , **tree**

```
sudo snap install tree
```

Go to the project structure and type - 

```
tree src/
```

If you type **tree .**, it shows up the **node_modules** folder too which we don't actually need. 

And here is the output. 

![Project Structure](https://dev-to-uploads.s3.amazonaws.com/i/470eqjjdlil14knpcayd.png)


Happy hacking!
Deployment vs StatefulSet | Kubernetes StatefulSet simply explained
Tags: kubernetes, docker, devops, tutorial
Published: 2020-06-06 15:23:51

While StatefulSet is used for **stateful** applications, like databases, Deployment component is used to deploy **stateless** applications. Many web apps fall into this category.

So the question is: 
##What is the difference between Deployment and StatefulSet components? 🤔##

**Deployment vs StatefulSet component**
Pods deployed by Deployment are identical and interchangeable, created in random order with random hashes in their Pod names. 

In contrast to that, the Pods deployed by StatefulSet component are **NOT identical** and deployment is more complex. They each have their own sticky identity, which they keep between restarts and each can be addressed individually. Thus, they can't be created or deleted at the same time or in any order.

How these identities are created and why it's so important, I explain in detail in the below video 🎬.

You can find the full video here:
{% youtube pPQKAR1pA9U %}

-----------------

I'm happy to connect with you on 🙂
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
[Fix][Azure DevOps] React with babel - No "exports" main resolved in @babel/helper-compilation-targets/package.json
Tags: react, babel, node
Published: 2020-06-06 15:16:42

## Situation
Having a react app setup with create-react-app, using babel v7.8.3 and having a CI/CD pipeline in Azure DevOps, I noticed builds failing whilst trying to run `npm install`.

## What happened?
The standard node version in Azure DevOps was increased from v12.16.3 to v12.17.0 which resulted in the error.

Trying to locate the actual problem I stumbled upon the following issue in the babel repository:
{% github https://github.com/babel/babel/issues/11216 %}

## Fastest Solution
The fastest solution was to simply define the node.js version in the build pipeline.

### 1. Add Node.js tool installer
Before running any npm comands in your pipeline add te `Node.js tool installer` as a task.

![Add the task](https://raw.githubusercontent.com/Jakob-vdH/BlogPosts/master/devTo/fix-reactjsWithBabel-nodeVersion/media/task.jpg)

### 2. Configure Task

In the `Node.js tool installer` you are able to simply set the node version to for example 12.16.3.

![Configuring the task](https://raw.githubusercontent.com/Jakob-vdH/BlogPosts/master/devTo/fix-reactjsWithBabel-nodeVersion/media/config.jpg)

Using the `Node.js tool installer` can add up to 10 seconds to your build process depending on the used agent.
Sim, você é boa em matemática! 
Tags: carreira, iniciantes, tecnologia, programar
Published: 2020-06-06 15:05:38

Esse artigo foi escrito por [Silvia Coelho](https://www.linkedin.com/in/silvia-coelho/) e [Dani Clericuzi](https://www.linkedin.com/in/danielle-clericuzi/) especialmente para o [Elas Programam](https://www.instagram.com/elasprogramam/).

Um tema que SEMPRE é colocado em evidência e polêmico dentro da TI e no [Elas Programam](https://www.instagram.com/elasprogramam/), é a “temida” matemática. 

A quantidade de mulher que já inicia a frase com “sou péssima em matemática!” e usa essa barreira como impeditivo para iniciar sua jornada em TI, é enorme. Não queremos que vocês levem esse pensamento tão a sério a ponto de desistirem muito antes de começar. 

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

###Primeiro, quem disse que não somos boas? A gente cresce ouvindo “mulher não é boa em matemática; é coisa de homem”. 

Essa crença pautada num viés de gênero faz com que as mulheres sintam-se incapazes de aprender matemática e contribui para afastar mulheres de áreas como engenharia e computação, como confirma estudo do psicólogo americano Andrew Meltzoff, Ph.D. em Oxford [(confira a matéria aqui)](http://g1.globo.com/educacao/noticia/2015/09/estereotipo-de-que-matematica-e-para-garotos-afasta-meninas-da-tecnologia-diz-pesquisador.html). Há outros estudos, como de Catherine Riegle-Crumb e Melissa Humphriess, da Universidade do Texas, que afirmam que ainda na escola professores tendem a avaliar as habilidades matemáticas das mulheres inferiores, independente das notas e resultados [(confira a matéria aqui)](https://hypescience.com/as-meninas-sao-mesmo-ruins-de-matematica-ou-a-culpa-e-do-professor/)

###Precisamos urgente derrubar esse estereótipo de que pessoas inteligentes são homens, brancos que usam óculos e antissociais. 

Como [Silvia](https://www.linkedin.com/in/silvia-coelho/) já disse:
###“O que importa é não se achar incapaz porque colocaram na cabeça que são ruins de matemática. Meu, não precisa ser Einstein, né?”

A matemática está no nosso dia a dia, a gente usa muitas vezes sem nem perceber. É fundamental afastarmos a ideia de que é um bicho papão, algo a ser temido. A matemática é nossa parceira e aliada.

###E mais: raciocínio lógico, pensamento computacional não é só sobre matemática. Tecnologia não é só programação, e programação não é apenas sobre matemática. 

Devemos separar essa concepção de necessidade matemática atrelada a ser uma boa profissional na TI, porque muitas mulheres, desistem de trabalhar na área por causa dessa “obrigação”. Existem vários problemas pra resolver que não envolvem matemática. E programar é usar uma linguagem computacional pra resolver problemas.

###Não deixe que esse medo te impeça! Temos várias histórias de mulheres que mesmo se achando péssimas em matemática, foram lá, desmistificaram esse ‘monstro’ e fazem sua carreira na TI. 
E, como disse [Silvia](https://www.linkedin.com/in/silvia-coelho/):

###“Não tentar por medo de não conseguir” é o cálculo que você precisa solucionar. Se arrisque. Quebre a cara. Frustração faz parte da vida.”
My best way call Vue component method in chrome devtools
Tags: javascript, vue, bestprictice
Published: 2020-06-06 14:51:52

---
title: My best way call Vue component method in chrome devtools
published: true
description: How to found Vue component runtime instance and call methods
tags: Javascript, Vue, BestPrictice

---

Do you have this situation write Vue component and debugging code in devtools, you want to call methods like "fetchxxx"  on instance and get response.

Maybe you should open you editor then found Vue component and typing `console.log(.....)` to `fetchxxx` method. so that you can get response.

Also you can mounted `fetchxxx` to `window` object, then you can call it in devtools console panel typing  `fetchxxx`	then you got response

For me i found another way to graceful call `fetchxxx` methods in devtool without any `consloe.log(xxx)` or mounted to `window` also get response, let's show me the way.

>  I show simple way to call `togglePrivacy` at Vue component

### Step 1

You should download [vue-devtool](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) then opened  chrome devtools at you debugging page.

### Step 2

You can found the Vue component instance at `vue-devtools` `Component` panel

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

You should select witch component want to fetch, you can found selected component will show **$vm0** **$vm1** **$vm2** 

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

That **$vm0** mean's the latest you selected vue component also mean's you can fetch this Vue component in chrome devtools when you typing **$vm0**, **$vm1**

### Step 3

So far you can visit Vue component instance and call method too just need `$vm0.togglePrivacy`

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

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

From screenshot you can call `togglePrivacy` at **$vm0** like you call at you code, so simple and concise.

Hope it can help you :)
Quick Tip: Resetar a senha do WSL2
Published: 2020-06-06 14:48:49

Precisei recentemente resetar a senha do usuário root da minha distribuição do Ubuntu 20.04 LTS no WSL2.

Para realizar o procedimento, siga os passos: 

1) Abra o Terminal do Windows (CMD)
2) Rode o comando:

```bash
ubuntu2004 config --default-user root
```

3) Feito isso, agora logue novamente na sua distribuição e rode o comando: 
```
passwd root
```
4) A nova senha será solicitada.


Caso for necessário setar outro usuário padrão, pode rodar novamente o comando:

```bash
 ubuntu1804 config --default-user usuario_local
```
First project using AWS
Tags: showdev, aws, javascript
Published: 2020-06-06 13:44:37

My buddy Adam had asked me if I was able to create a piece of functionality for his business Adam & Co (names are fictional). I had recently just earned my AWS Developer Associate certification and I thought it would be the perfect opportunity to build a project completely through AWS services and apply some of the things I had learned. 

####Project Overview
People are going into foreclosure on their homes in the county where my Adam lives. As part of the foreclosure process the owner's information is listed on the local county website. Adam & Co need to reach out to these people, to prevent them from losing there home.

However, they do not have the time and resources to go through the site manually, and sort the records ensuring they are not reaching out to the same people twice.

####User Story
Adam & Co wanted a system that could automate the process of going through the county records, find only the new listings that have been published, and receive them in an email. So that Adam & Co can focus on reaching out to potential clients efficiently and effectively.

#### Solution

To solve this I was hoping I just could use a Lambda function and an API, however the county did not have the most up to date technology and had no public API's. 

So I had to create a scraper, I chose Puppeteer which is very powerful and I have experience with. This technology choice came with a cost because with Puppeteer my node modules became too large to fit in a Lambda function, so I made a small Express app and placed it in EC2.

The express app runs Puppeteer to scrape the site and inserts the records into DynamoDB. To prevent old listings from being added, I use the case id of each record as a primary key and don't allow for duplicates. I had assumed that this would be the most difficult problem to solve but it ended up being the easiest.

The express server is triggered by CloudWatch every Monday morning right before Adam & Co get to the office. After the scraping is done, the app will grab the records that were generated that day and email them using AWS SES. The app consists of three main parts:

- Scrape the site for all listings
- Insert records to DynamoDB
- Email only the new records that were able to be created using SES

####Technologies used:

- EC2
- CodeCommit
- Node.js
- Puppeteer
- CloudWatch Events
- SES
- DynamoDB

Here is a short video of the app running locally (not Headless like in production), certain portions are blurred to protect personal information:
{% youtube 3SaNlbaX5ls %}

Let me know what you think, and if you have any questions!
How I can Run Multiple Node js Files ?
Tags: node, discuss, beginners, help
Published: 2020-06-06 14:26:42

Hi, I am new to node.js I have question about how to run mulitple files at once.
let's say I have `scripts_1.js` and `scripts_2.js`
How can I run the both at the same time.
I know I can do this `node scripts_1.js && scripts_2.js` but the problem is that I need to wait for `scripts_1` to finish so `scripts_2.js` can run.

I tried bash scripts
`start.sh`
```
start node "scripts_1.js"
start node "scripts_2.js"
```

but I don't like it I need a better way.
any one can help.
Thanks in advance
Journey to Machine Learning (Day 001)
Tags: machinelearning, python, numpy, datascience
Published: 2020-06-06 14:23:57

So this is my first post as I just started my journey to machine learning. Its more like a journal, I'll try to write one post everyday. So, lets get started.

<b>A little bit about my programming background</b>
I'm a computer science student, final year. I have been learning programming for about 4 years. I do a bit of problem solving. I have been learning android since 2018 and I published two apps in google playstore. I'm currently working as a flutter developer in a small company with very little pay :p

<b> Why machine learning? </b> 
I've always been interested in AI since childhood, though I didn't quite understand what it was. I wanted to learn it in the first year of college, but there aren't many jobs with machine learning in my country. So, I had to learn a development platform first (Android) to get a job as soon as I graduate. It's not that I don't like Android, I love it. But I also wanna do something amazing rather than making commercial applications. Mixing machine learning and my development skills I might be able to achieve that! 

<b> My progress till now </b>
Though this is the first post, it's been 6 days since I started learning python. So far so good. I have been solving leetcode problems with python (which is also to prepare for a good job). 

I subscribed to Data Camp's student package, which is 3 months of premium subscription free for students, and started a python course. I've moved onto NumPy today on Data Camp. I plan to finish this course by 10th June and take part in an assessment to check my skills. 

After that I'm gonna shift to machine learning specific track. I have 3 months of subscription only and gotta take what I can in this three months :p

I guess that's it for today. I'll try to write one post everyday. Follow me to get updates of a struggling developer :p 

Thanks for reading this! <3
Gotchas with Service Workers and SPAs
Tags: javascript
Published: 2020-06-06 14:19:14

[Uclusion](https://www.uclusion.com/?utm_source=devto&utm_medium=blog&utm_campaign=devservicepwa) is a single page app (SPA), which means the browser doesn’t see very many navigation events while the user is going about their business. Service workers, by default, have the rule that only pages loaded by a service worker will handle their requests via that service worker. These two things combine such that even if you register a service worker on entrance to your SPA, it won’t work until the user hits reload.

Additionally, by default, service workers will wait until a page close and page reopen to load a new version of a service worker. This means that unless the user closes your app and comes back in, your new service worker code won’t take effect.

**So how do we override the defaults?**

Perversely, because of the event chain, to solve the first problem, you first should solve the second. Namely, you need to make your service worker [immediately activate](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting) as soon as it’s registered with the browser. That can be done by the following code in your service worker file (not the [register service worker](https://gist.github.com/camwhite/2f33f7c33e2495b01614f209399703ee)). See our production file [here](https://github.com/Uclusion/uclusion_web_ui/blob/master/public/image-url-rewriter-service-worker.js).

    self.addEventListener('install', (event) => {
      return self.skipWaiting();
    });

Now that the service worker is activating reliably, we can force it to claim every page fetch for the domain and path it’s been registered for. You can do that by:

    self.addEventListener('activate', (event) => {
      self.clients.claim();
    });

I would recommend that, at least in development, you output some log statements in your service worker that fire every time it runs. That way you can see in tools like [LogRocket](https://www.logrocket.com) that your worker really is taking effect when you think it is.
New App: Share Your Gender Pronoun in Your Bio
Tags: react, javascipt
Published: 2020-06-06 14:16:38

It takes me awhile to create an app. From the initial thought, the planning, the coding and then the deployment. My [simple full-stack Flask app](http://ninnycode.com/mark) took almost one month to complete! Granted, I was learning Python and Flask along the way, it still took awhile. 

So I decided to challenge myself and create an app all in one day. What I came up with was [Pronounly](https://pronounly.co), an easy way for people to share there gender pronoun in their bio. Users just have to enter `pronounly.co/` and append their pronoun. So if you identify as a 'she', you would use `pronounyl.co/she`.

The app was created using React and deployed on Heroku. Instead of paying for Heroku's SSL certification I decided to try out Cloudflare — which is amazing might I add! It also handles my redirects much more intuitively than Google Domains, I believe.

Design is also a big part of my background. While I'm not a designer by any means, I am a photographer who's very nitpicky with how things look. I wanted to go with a more "natural" and brutalist design. No colors and no animations. Nothing crazy, nothing fancy.

Since I wanted the app to look simple, I also wanted the code to be simple since it was going to be a [public repo](https://github.com/superhackerboy/pronounly) for my resume. Here's what my App.js renders:

```js
<Router>
      <Pronounly />
      <Switch>
        <Route exact path='/'>
          <About />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/he'>
          <Pronoun pronoun='he' />
          <Example pronoun='he' />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/she'>
          <Pronoun pronoun='she' />
          <Example pronoun='she' />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/they'>
          <Pronoun pronoun='they' />
          <Example pronoun='they' />
          <Importance />
          <Share />
        </Route>

        <Route path='*'>
          {/* 404 */}
          <Contribute />
          <Importance />
          <Share />
        </Route>
      </Switch>

      <Footer />
    </Router>
```

I know it's a very simple website and that it has been done before, but I'm very happy with how it turned out and how I did it all in one day. I think doing more of these "one-day challenges" will help me become a more proficient coder as it forces me to prioritize important parts of my app. But right now, I'm working on another React app using data I scraped from IMDb to play Hangman!
StyleSheet Internals
Tags: typescript, angular, errors
Published: 2020-06-06 14:08:03

**The Document StyleSheets Property**

We wanted to take a look at all the CSS rules for an entire site. We discovered the 
- [CSSRuleList](https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList)
- [CCSRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
- [CSSRuleTypes](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule#Type_constants)  

The code below:
- Pulls all the styles sheets from the DOM
- Maps each one 
- Collects the CSS rules for each  

```typescript
let styles = document.styleSheets;
this.getGetTexContent(styles);

private getTextContent(collection: StyleSheetList) {
    let oneArray = Array.from(collection);
    let cssRules = oneArray.map((stylesheet) => {
      let ss: any = stylesheet;
      try {
        if (ss.rules) {          
          return ss.rules;
        }
      } catch (error) {}
    });
    debugger;
    this.es.data.emit(cssRules);
  }
```
We had to include the try catch because of this error.

> 
Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules 
 
**CSSRuleList Internals**

- The DOM contains the stylesheet list for entire site. 
- Each stylesheet contains a CSSRuleList.
- Each Rule in that list may contain it's own CSSRuleList.
- Each (Rule) known as a CSSStyleRule looks like this:

```json
CSSStyleRule {
 selectorText: ".slider[_ngcontent-nko-c0]",
 style: CSSStyleDeclaration,
 styleMap: StylePropertyMap,
 type: 1,
 cssText: ".slider[_ngcontent-nko-c0] { 
  animation: 1s ease 0s 1 normal forwards running slidein; }",
 …}

cssText: ".slider[_ngcontent-nko-c0] { 
  animation: 1s ease 0s 1 normal forwards running slidein; }"
parentRule: null
parentStyleSheet: CSSStyleSheet {
 ownerRule: null,
 cssRules: CSSRuleList,
 rules: CSSRuleList,
 type: "text/css",
 href: null,
 …}

selectorText: ".slider[_ngcontent-nko-c0]"
style: CSSStyleDeclaration {
 0: "animation-duration",
 1: "animation-timing-function",
 2: "animation-delay",
 3: "animation-iteration-count",
 4: "animation-direction",
 5: "animation-fill-mode",
 6: "animation-play-state",
 7: "animation-name",
 alignContent: "",
 alignItems: "",
 alignSelf: "",
 alignmentBaseline: "",
 all: "",
 …}

styleMap: StylePropertyMap {size: 8}

type: 1
```

Now that we've discovered this; maybe it's the foundation for yet another CSS tool, like this tool we created to see if we could develop a Css refactoring tool. What is shown is a table of all styles where we did no parsing at all.

{% link https://dev.to/jwp/material-tabs-in-angular-1031 %}