teleren/devto huggingface dataset:
Scan your docker images with trivy
Published: 2020-07-18 16:17:41

<sub><span>Photo by <a href="https://unsplash.com/@f7photo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Michael Longmire</a> on <a href="https://unsplash.com/s/photos/microscope?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>

Docker is useful to easily grab tools based on various images. But as those images will run on your environment or system, you have to at least know what is in or what is missing (security patch, outdated packages).

[trivy](https://github.com/aquasecurity/trivy) is a great tool to do that. The output is clear.

An example of scanning dotnet core sdk 3.1 image:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j2kj5hmbr85s63dladmp.png)

As i'm a windows user, i usually [inject the scan in the Docker](https://github.com/aquasecurity/trivy#embed-in-dockerfile).It can be achieved using a multi stage build and using [target](https://docs.docker.com/engine/reference/commandline/build/) to have the container with or without the analysis like in [this post](https://devblogs.microsoft.com/dotnet/collecting-net-core-linux-container-cpu-traces-from-a-sidecar-container/) .

But now that i have WSL2, i can use 
- a Ubuntu wsl2 image
- Docker decktop wsl2 integration
- install trivy on my Ubuntu image

As from my Ubuntu wsl 2, i can access docker without exposing daemon without TLS.

So now, i can use the following command:
```bash
trivy image -s HIGH,CRITICAL mcr.microsoft.com/dotnet/core/sdk:3.1
```
you can use it too on your CI system. The option --exit-code which is great to get the information without blocking the chain. See [this post](https://lgulliver.github.io/bulid-scan-and-push-containers/) for Azure Devops.

Hope this help !
PL/SQL Cheat Sheet
Tags: sql, codenewbie
Published: 2020-07-18 16:44:24

Below is PL/SQL - Loops Cheat Sheet:

__Basic Loop__
```
LOOP 
   The sequence of statements; 
END LOOP; 
```

__WHILE Loop__
```
WHILE condition LOOP 
   sequence_of_statements 
END LOOP; 
```

__FOR Loop__
```
FOR counter IN initial_value .. final_value LOOP 
   sequence_of_statements; 
END LOOP;
```

__Nested Loops__
* Nested basic LOOP
```
LOOP 
   Sequence of statements1 
   LOOP 
      Sequence of statements2 
   END LOOP; 
END LOOP;
```

* Nested FOR LOOP 
```
FOR counter1 IN initial_value1 .. final_value1 LOOP 
   sequence_of_statements1 
   FOR counter2 IN initial_value2 .. final_value2 LOOP 
      sequence_of_statements2 
   END LOOP; 
END LOOP;
```

* Nested WHILE LOOP
```
WHILE condition1 LOOP 
   sequence_of_statements1 
   WHILE condition2 LOOP 
      sequence_of_statements2 
   END LOOP; 
END LOOP; 
```

__EXIT statement__
``` 
EXIT;
CONTINUE statement
CONTINUE;
```

__GOTO statement__
``` 
GOTO label;
..
..
<< label >>
statement;
```
...
Full cheat sheet is [here](https://simplecheatsheet.com/tag/pl-sql-cheat-sheet/)
[Productivity] Pomodoro Technique
Tags: productivity, pomodoro, learning, motivation
Published: 2020-07-18 16:36:28

---
title: [Productivity] Pomodoro Technique
published: true
description: How to be more productive with pomodoro
tags: productivity,pomodoro,learning,motivation
//cover_image: https://direct_url_to_image.jpg
---

#Introduction
How often do you want to start a task or learn something and get stuck on youtube or any social media? I would say pretty often. It happens to all of us and to me too.

This is called procrastination. Its just to easy for us to be distracted. The reason for that is most of the time one of two things. Either you have to do a unpleasant task like clean up your apartment where the reason for procrastination is quite clear. Cleaning up is boring. But maybe you want to learn something new, you are excited but you think "oh jeah just this youtube video then ill start..." and 2 hours later you finally start. Its hilarious that we procrastinate when we are excited to learn something new right?

## Our brain

The problem is our brain. To learn something new activate the same regions in our brain as something bad happens. Short term: Learning new things = negativity. We have to trick our brain and for that we have a lot of tools. For exmaple if you want to learn something new like React you have to split this task in multiple little goals.

Maybe you first start with components and then jump into states and props. After this maybe you try to pass state down through props and then use events to go up again. And so on.

Each goal have to be so small that you can reach it quite fast and for each finished goal your brain will produce endorphine. 
And endorphine is the opposite of negativity!

But let me show you the probably best technique against procrastination.

## Pomodoro Technique
Let me introduce you to a technique that is quite simple but super effective when it comes to procrastination.

**The Pomodoro Technique**

Take a timer and set up a small time like 25 minutes. Within this time you work on your thing with high focus. When the time is over you make a pause of 5 minutes. Then you start over again. And again. And.. ok lets stop here.
I think you see the pattern.
Each interval is one pomodoro and after 4 pomodoros you may do a break of 20-30 minutes.
You can also change the time. You dont have to go with 25 minutes. Try different times and stick with the one that works the best for you!

If you have problems with procrastination try this out. It sounds too easy and maybe stupid to you but it works!

###References
https://en.wikipedia.org/wiki/Pomodoro_Technique
https://www.youtube.com/watch?v=1l4w7uHdNaQ

#Conclusion
I hope you find this article helpful! Dont let procrastination slow you down or block you while reaching for your goals and dreams.
Here's a GitHub Action that updates README with the recent activity of a user
Tags: showdev, github, productivity, javascript
Published: 2020-07-18 16:34:13

Recently I came across [activity-box](https://github.com/JasonEtco/activity-box) that would update a Gist with the recent activity of a user. And with the `Profile README` feature, I thought why not making something similar that would update the `README` instead.

{% github jamesgeorge007/github-activity-readme %}
Tangled Tree with D3 and React Part #1
Tags: d3js, react, visualization, learning
Published: 2020-07-18 15:59:40

[D3](https://d3js.org/) has been a blessing in disguise for data visualisation in a front-end world with features provided out of the box. You can build some cool set of visualisations ranging from charts to graphs, and so on.

In this article we are going to learn how to build a tangled tree with [D3JS](https://d3js.org/) and [React](https://reactjs.org/).

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

Some inspiration that I took from are:-
- [Tangled tree](https://observablehq.com/@nitaku/tangled-tree-visualization)
- [Tangled tree II](https://observablehq.com/@nitaku/tangled-tree-visualization-ii)

>We basically have to divide the component into two sections:
1. Logic to create the meaningful data
2. JSX for the SVG components

You can find the code blocks in the [codesandbox](https://codesandbox.io/s/reacttangledtree-eozsx) that I have created.

Currently this is for a static data but you can generate the tangled tree with few modifications.

Please let me know your thoughts and also share this article.

Happy learning!!
Trouble running SpinRite? Try this...
Published: 2020-07-18 15:56:25

I needed to run GRC's SpinRite the other day to fix a hard drive, but I was having trouble getting it to run by following the instructions. I contacted GRC and they suggested a new method (which has worked on several computers so far with no issues) that I wrote up as instruction here. 

https://medium.com/wooden-information/initdisk-freedos-method-for-making-a-bootable-spinrite-usb-96981ddb9b4b
React Tips — Radio Buttons, Render HTML, and Initialize States
Tags: webdev, javascript, softwaredevelopment, programming
Published: 2020-07-18 21:05:22

---
title: React Tips — Radio Buttons, Render HTML, and Initialize States
published: true
date: 2020-07-18 15:51:08 UTC
tags: webdevelopment,javascript,softwaredevelopment,programming
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*cUkCf4E2yB104Vum)](https://medium.com/javascript-in-plain-english/react-tips-radio-buttons-render-html-and-initialize-states-197e7e8a8c30?source=rss-5253c50d76c1------2)

Radio button handling is tricky.

[Continue reading on JavaScript In Plain English »](https://medium.com/javascript-in-plain-english/react-tips-radio-buttons-render-html-and-initialize-states-197e7e8a8c30?source=rss-5253c50d76c1------2)
React Tips — Getting Window Dimensions and Creating Dropdowns
Tags: programming, softwaredevelopment, technology, javascript
Published: 2020-07-18 21:05:18

---
title: React Tips — Getting Window Dimensions and Creating Dropdowns
published: true
date: 2020-07-18 15:49:42 UTC
tags: programming,softwaredevelopment,technology,javascript
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*jGFxenfT74-ng1y6)](https://medium.com/javascript-in-plain-english/react-tips-getting-window-dimensions-and-creating-dropdowns-55231ad49952?source=rss-5253c50d76c1------2)

We can use hooks for both.

[Continue reading on JavaScript In Plain English »](https://medium.com/javascript-in-plain-english/react-tips-getting-window-dimensions-and-creating-dropdowns-55231ad49952?source=rss-5253c50d76c1------2)
JavaScript Array Tips — Removal, Replacement, and Swapping
Tags: technology, webdev, programming, javascript
Published: 2020-07-18 21:05:14

---
title: JavaScript Array Tips — Removal, Replacement, and Swapping
published: true
date: 2020-07-18 15:49:28 UTC
tags: technology,webdevelopment,programming,javascript
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*UxGI0jRHcWxP16jh)](https://medium.com/javascript-in-plain-english/javascript-array-tips-removal-replacement-and-swapping-c1499cf32deb?source=rss-5253c50d76c1------2)

There’re more than one solution to each of these problems.

[Continue reading on JavaScript In Plain English »](https://medium.com/javascript-in-plain-english/javascript-array-tips-removal-replacement-and-swapping-c1499cf32deb?source=rss-5253c50d76c1------2)
Set up your Rails app with the PostgreSQL database on Ubuntu
Published: 2020-07-18 13:44:20

This article assumes that you have Rails and PostgreSQL installed on your device.
To start, go to the folder where you want to create a new Rails app and run the terminal in that folder. Then using the following command create your app. Note that **toyapp** is the name of an app you can replace it with whatever the name you would like to call:
`rails new toyapp -d=postgresql`
Here the **-d=postgresql** option is for setting up the database with PostgreSQL.
If everything went well, go to the newly created directory:
`cd toyapp`
Now we need to configure and create our database. To do that we will first store the password of the PostgreSQL role in the environmental variable. So that we do not have to write the password in the configuration file, to keep it safe:
`echo ‘export TOYAPP_DATABASE_PASSWORD=’’YOUR_PostgreSQL_Role_Password”’ >> ~/.bashrc
`
Then export the variable for your current session using the source command:
`source ~/.bashrc`
Now open the configuration file **toyapp/config/database.yml** in your favorite editor. In the default section, include the following lines at the bottom:
```
username: yourusername
password: <%= ENV[‘TOYAPP_DATABASE_PASSWORD’] %>
```
save the file and run the following command to create the database of an application:
`rails db:create`
If you have correctly entered username and password for the PostgreSQL role you should get the output like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2dylcdpslwhe1c3rtkgi.png)
Now it’s time to test whether the configuration was right, run the built-in webserver in Rails by the following command:
`rails server --binding-127.0.0.1`
When the server runs you should get this output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9nvuaw5aodp3iuvgejw8.png)
Using your favorite browser go to the http://127.0.0.1:3000/ or localhost:3000
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yc4x458drj36ob341ubo.png)
If you get the above result you successfully configured your Rails app to use PostgreSQL database.
Getting Started with Material UI
Tags: technology, javascript, webdev, softwaredevelopment
Published: 2020-07-18 21:05:09

---
title: Getting Started with Material UI
published: true
date: 2020-07-18 15:48:56 UTC
tags: technology,javascript,webdevelopment,softwaredevelopment
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*ZUfduMzL1mGwwXcR)](https://medium.com/javascript-in-plain-english/getting-started-with-material-ui-f7c6130b5e08?source=rss-5253c50d76c1------2)

We look at installation and layout

[Continue reading on JavaScript In Plain English »](https://medium.com/javascript-in-plain-english/getting-started-with-material-ui-f7c6130b5e08?source=rss-5253c50d76c1------2)
Node.js Tips — Test Apps, Retries, and Logging Objects
Tags: softwaredevelopment, javascript, programming, technology
Published: 2020-07-18 21:05:05

---
title: Node.js Tips — Test Apps, Retries, and Logging Objects
published: true
date: 2020-07-18 15:48:03 UTC
tags: softwaredevelopment,javascript,programming,technology
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*E9U1EAi59RdHlOjJ)](https://medium.com/javascript-in-plain-english/node-js-tips-test-apps-retries-and-logging-objects-868e0c140c38?source=rss-5253c50d76c1------2)

Mocha tests, retrying requests, and test with Supertest.

[Continue reading on JavaScript In Plain English »](https://medium.com/javascript-in-plain-english/node-js-tips-test-apps-retries-and-logging-objects-868e0c140c38?source=rss-5253c50d76c1------2)
JavaScript Best Practices — Arrays, Todos, and Callbacks
Tags: softwaredevelopment, webdev, technology, javascript
Published: 2020-07-18 21:05:00

---
title: JavaScript Best Practices — Arrays, Todos, and Callbacks
published: true
date: 2020-07-18 15:47:43 UTC
tags: softwaredevelopment,webdevelopment,technology,javascript
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*r5CR_7cqrJ6LXApf)](https://medium.com/dev-genius/javascript-best-practices-arrays-todos-and-callbacks-3f4f5e1489b9?source=rss-5253c50d76c1------2)

Make our code cleaner and we also look at array checks.

[Continue reading on Dev Genius »](https://medium.com/dev-genius/javascript-best-practices-arrays-todos-and-callbacks-3f4f5e1489b9?source=rss-5253c50d76c1------2)
TypeScript Best Practices — Non-Null Assertions, Async, and Loops
Tags: javascript, softwaredevelopment, technology, webdev
Published: 2020-07-18 21:04:54

---
title: TypeScript Best Practices — Non-Null Assertions, Async, and Loops
published: true
date: 2020-07-18 15:47:29 UTC
tags: javascript,softwaredevelopment,technology,webdevelopment
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*prGqMg-LYnrCCYYi)](https://medium.com/dev-genius/typescript-best-practices-non-null-assertions-async-and-loops-2bb8e7376b18?source=rss-5253c50d76c1------2)

We also look at type assertions and using require.

[Continue reading on Dev Genius »](https://medium.com/dev-genius/typescript-best-practices-non-null-assertions-async-and-loops-2bb8e7376b18?source=rss-5253c50d76c1------2)
React Tips — Handler Arguments, Navigation, and Children
Tags: javascript, programming, technology, webdev
Published: 2020-07-18 21:04:50

---
title: React Tips — Handler Arguments, Navigation, and Children
published: true
date: 2020-07-18 15:47:07 UTC
tags: javascript,programming,technology,webdevelopment
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*wtkN25Ao6WnwAXoR)](https://medium.com/dev-genius/react-tips-handler-arguments-navigation-and-children-3daec4690c92?source=rss-5253c50d76c1------2)

Pass props to children, navigation, and more.

[Continue reading on Dev Genius »](https://medium.com/dev-genius/react-tips-handler-arguments-navigation-and-children-3daec4690c92?source=rss-5253c50d76c1------2)
BootstrapVue — Customizing Tooltips
Tags: programming, webdev, technology, javascript
Published: 2020-07-18 21:04:33

---
title: BootstrapVue — Customizing Tooltips
published: true
date: 2020-07-18 15:45:50 UTC
tags: programming,webdevelopment,technology,javascript
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*Kax56jNby92itdwD)](https://medium.com/dev-genius/bootstrapvue-customizing-tooltips-ef5c4837d720?source=rss-5253c50d76c1------2)

Positioning, enabling, and disabling tool tips.

[Continue reading on Dev Genius »](https://medium.com/dev-genius/bootstrapvue-customizing-tooltips-ef5c4837d720?source=rss-5253c50d76c1------2)
Criando Sistema de Imóveis com Next.js Reactjs Typescript Styled-Components [Part 3] - Add Styled-Components
Published: 2020-07-18 15:44:58

1- Instalar a lib
```javascript
yarn add styled-components @types/styled-components
```

2- Babel
```javascript
yarn add babel-plugin-styled-components -D
```

3- Dentro de sua pasta 'pages'.Crie 2 arquivos _document.tsx e _app.tsx, eles são utilizados normalmente para injetar e configurar dependências globais dentro do Next.js.

4- Dentro de seu _document.tsx, Vamos estender <Document />:
```javascript
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}
```

5- Dentro de seu _app.tsx aplique o código:
```javascript
import App from 'next/app'
export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}
```

6- No arquivo .babelrc (caso não exista, crie ele) na raiz de seu projeto adicione::
```javascript
{
  "presets": ["next/babel"],
  "plugins": [["styled-components", 
               { "ssr": true, 
                 "displayName": true }]]
}
```
Nota: displayName irá gerar nomes de classe que são mais fáceis de depurar (conterão também o nome do componente em vez de apenas hashes)

7- Angora podemos utilizar styled-components tranquilamente no index.tsx
```javascript

import Head from 'next/head'
import styled from 'styled-components';

const Title = styled.h1`
  color: red;
`;

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Title>Criando Sistema de Imóveis com Next.js Reactjs Typescript Styled-Components [Part 3] - Configurando Styled-Components</Title>
      </main>

      <footer>

      </footer>
    </div>
  )
}

```
Install docker on RHEL 8
Tags: tutorial, beginners, linux, opensource
Published: 2020-07-18 15:15:51

Docker is a tool that allows you to easily build, test, and deploy applications smoothly and quickly using containers. It has gained widespread popularity in recent times due to the portability to run applications anywhere irrespective of the host operating system.

*Let's get started on how to install Docker on CentOS / RHEL. :rocket:*

Docker is available in two editions, namely,
- Community Edition (CE)
- Enterprise Edition (EE)

Here, we will install Docker Comunity Edition (CE).

#### Prerequisites
Uninstall older versions of Dockers, named `docker` or `docker-engine` along with associated dependencies.

```
$ yum -y install lvm2 device-mapper device-mapper-persistent-data device-mapper-event device-mapper-libs device-mapper-event-libs
```

#### Add Docker Repository
Now let’s add the CE repository for the Docker installation.

```
$ curl https://download.docker.com/linux/centos/docker-ce.repo -o /etc/yum.repos.d/docker-ce.repo
```

#### Install Docker CE

```
$ yum install docker-ce
```

#### Output 

```
Error:
 Problem: package docker-ce-3:19.03.5-3.el7.x86_64 requires containerd.io >= 1.2.2-3, but none of the providers can be installed
  - cannot install the best candidate for the job
  - package containerd.io-1.2.10-3.2.el7.x86_64 is excluded
  - package containerd.io-1.2.2-3.3.el7.x86_64 is excluded
  - package containerd.io-1.2.2-3.el7.x86_64 is excluded
  - package containerd.io-1.2.4-3.1.el7.x86_64 is excluded
  - package containerd.io-1.2.5-3.1.el7.x86_64 is excluded
  - package containerd.io-1.2.6-3.3.el7.x86_64 is excluded
(try to add '--skip-broken' to skip uninstallable packages or '--nobest' to use not only best candidate packages)
```

#### Install the Docker CE by skipping unavailable package 

```
$ yum -y install docker-ce --nobest
```

Now you have Docker installed onto your machine, start the Docker service in case if it is not started automatically after the installation run these commands.

```
$ systemctl start docker

$ systemctl enable docker
```

#### Verify Docker Installation

```
$ docker run hello-world
```

And it's done! You have successfully installed docker on your RHEL / CentOS. Happy Learning! :tada:
Criando Sistema de Imóveis com Next.js Reactjs Typescript Styled-Components [Part 2] - Configurando Typescript
Published: 2020-07-18 15:15:31

Configurando para rodar com Typescript: 

1- criar o tsconfig.json no root
```javascript
touch tsconfig.json
```

2- criar o tsconfig.json no root
```javascript
yarn add --dev typescript @types/react @types/node
```

3- Rodar o server novamente
```javascript
yarn dev
```

Isso irá preencher o tsconfig.json arquivo para você. Você pode personalizar este arquivo. E irá criar o next-env.d.ts arquivo, o que garante que os tipos Next.js sejam selecionados pelo compilador TypeScript. Você não deve tocar neste arquivo

4- Vamos mudar index.js para index.tsx e limpar o código
```javascript
import Head from 'next/head'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        Typescript
      </main>

      <footer>

      </footer>

    </div>
  )
}
```

5- Git push em master é deve atualizar o servidor
Got a new badge on GitHub.
Tags: github, opensource, javascript, react
Published: 2020-07-18 15:00:21

Got a new badge (Arctic Code Vault Contributor) on GitHub. 

Github: https://github.com/lassiecoder

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

This program began it's journey to the arctic in Feb 2020 with over 21TB of repository data.
I've contributed to my E-commerce website, Portfolio, JS calculator, and some more repositories in this program.

Link to contributed repositories:

E-commerce website (https://lnkd.in/eG2wiqs)
Portfolio (https://lnkd.in/ffZSYvP)
JS calculator (https://lnkd.in/eQbM4iU)
Criando Sistema de Imóveis com Next.js Reactjs Typescript Styled-Components [Parte 1] 
Published: 2020-07-18 14:45:16

Primeiro projeto utilizando Nextjs, quem quiser colar, vamos nessa.(Se tiver algo errado ou que pode ser feito de uma forma melhor avisem)

1- Iniciando projeto com Nextjs

```javascript
npx create-next-app imovel_frontend
```

2- Para executar o projeto
```javascript
yarn dev
```

3- Para o Deploy:
Abre o navegador em http://localhost:3000/ vai aparecer o "Welcome to Next.js" com alguns botões. Clica no botão "Deploy" vai aparecer um formulário da Vercel, para conectar seu repositório, é só ir avançando.

Então: https://imoveis-frontend.vercel.app/. Seu Hello World esta online.

Código fonte: https://github.com/daniloitj/imoveis_frontend
Ref: https://nextjs.org/docs/getting-started