teleren/devto huggingface dataset:
Java Quickies. Paths
Tags: java, programming, beginners
Published: 2021-05-22 19:55:28

#Introduction
- This series is going to be dedicated to the basic understanding of Java. When ever I find myself asking, "How does this work ?". I will create a blog post and put it here. This series will not be in order so feel free to read what ever post you find most relevant.


###What is a path?
- In Java a path is a class and as the name implies, the path is a programmatic representation of a path in your file system. 

- A Path instance reflects the underlying platform. In Windows the path object uses the Windows syntax(C:\home\joe\foo). Your path may look different depending on your underlying operating system.

- A Path is not system independent, you can not compare a path from two different operating systems and expect them to reach the same directory.

- A Path object represents a path that is hierarchical and composed of a sequence of directory and file name elements. These elements are separated by a special separator called a delimiter. A Path object also contains a root component, that identifies the file system's hierarchy. The name of the element that we are accessing is the one farthest from the root directory(cat)

```
C:\foo\pie\cat
```

- The above code is an example of a path in the Windows environment. The "C:" is the root directory in Windows and it represents our C-drive, which is the main hard drive. The backslashes are examples of the delimitators and are used as a form of separation. cat is the element that we are accessing.

#Conclusion
- Thank you for taking the time out of you day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
- Also make sure to checkout my [YouTube](https://www.youtube.com/channel/UCN9jWE9COJ0wN1m4huDFqzw/playlists) channel for more programming tutorials.
PostgreSQL: como permitir acesso de leitura a apenas algumas colunas de uma tabela?
Tags: postgres, sql
Published: 2021-05-22 19:55:02

Como fornecer acesso de leitura a algumas colunas de uma tabela e impedir o acesso as demais colunas para um certo usuário?

Para exemplificar esse cenário, vou usar a base de dados [Chinook](https://raw.githubusercontent.com/lerocha/chinook-database/master/ChinookDatabase/DataSources/Chinook_PostgreSql.sql) e a ferramenta [DBeaver](https://dbeaver.io/) para administrar a base de dados.

Primeiro, crie um usuário:
```sql
CREATE USER mariana WITH PASSWORD 'sua_senha';
```

Depois, crie uma view com apenas as colunas da tabela que você deseja permitir o acesso. Nesse caso, estou criando com as colunas "EmployeeId", "LastName", "FirstName", "Title", "Email" da tabela "Employee":
```sql
CREATE VIEW employee_base_info AS SELECT "EmployeeId", "LastName", "FirstName", "Title", "Email" FROM "Employee";
```
A view é como uma tabela virtual, não é uma tabela que está de fato no banco e quando é referenciada essa query é executada.

Depois, dê permissão de leitura na view para o usuário:
```sql
GRANT SELECT ON employee_base_info TO mariana;
```

Então, ao conectar no banco utilizando esse usuário, temos permissão de realizar uma consulta na view:
![Print da tela do Dbeaver com a query: `select * from employee_base_info` e abaixo as informações da tabela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgntsp6tqo0ng5c3vo2s.PNG)

Mas não temos permissão de consultar a tabela inteira:
![Print da tela do Dbeaver com a query: `select * from "Employee" e abaixo o erro 'permission denied for table Employee`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yiulapkc4happ9mjr5n.PNG)

Tampouco permissão de update:
![Print da tela do Dbeaver com a query: `update "Employee" set "LastName" = 'Silva' where "EmployeeId" = 1` e abaixo o erro 'permission denied for table Employee`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t45f4lq0a3jovtl96ru3.PNG)

Com isso garantimos maior segurança para nosso banco de dados.

Obrigada por ler! 
Se quiser saber mais, veja também a [documentação do PostgreSQL](https://www.postgresql.org/docs/9.2/sql-createview.html).
Hold on to Your Props!(creating components for every page in NextJS)
Tags: nextjs, react
Published: 2021-05-22 19:50:13

Making pages and an associated Page component is the name of the game for organizing your layout in React and NextJS. The page itself will route you to specific content and the Page component (note the capital P) can hold onto things like Navigation components, Footer components, Sidebar components and the like. The general rule is that pages will be wrapped in their Page component and render `{props.children}` so whatever content is within a page, and whatever you might want from it's parent `<Page>` will be rendered. This is redundant though, especially if you have a great many pages to wrap in a component and import that component and I can feel my knuckles aching just thinking about it. As a higher scope to hold the Page component, NextJS offers the **_app.js** page, which will live in the pages directory. This can be considered a "container" of the highest scope for NextJS and can be used to render the Page component and two props, namely the `<Component>` prop and `pageProps`. It will look something like this inside _app.js:
```
<Page>
  <Component {...pageProps} />
<Page>
```  
Boom! A global `<Page>` that can wrap around the `<Component />` prop. This represents an active page and any props passed to it will be received by the page itself. `pageProps` represent the initial props, preloaded by a fetch method and will be empty without a call to that method. 
Woof! All that work (it's actually really quick once you see it in action) and now we can persist anything we want to display on every page we choose!
Doom Captcha - Captchas don't have to be boring
Tags: javascript, forms, ui, validation
Published: 2021-05-22 19:43:57

---
title: Doom Captcha - Captchas don't have to be boring
published: true
description: Captcha as a game
tags: javascript, forms, ui, validation
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5dezpadx6ikzzw1t8r6.jpg
---

Hi there!

My name is Miquel Camps, I'm a web developer based in Spain, you can find me on [twitter](https://twitter.com/vivirenremoto) and [linkedin](https://www.linkedin.com/in/miquelcamps/).

**TLDR: You can visit the demo here**
[https://vivirenremoto.github.io/doomcaptcha/](https://vivirenremoto.github.io/doomcaptcha/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bj85ytin5ddahdr3w2e.gif)

**DOOM Captcha is featured on Product Hunt**

I will appreciate if you can take a minute to [vote for DOOM Captcha](https://www.producthunt.com/posts/doom-captcha) ¡Thanks!

**Disclaimer**
Don't take this too seriously this is a little project for fun, if you know how to code its pretty easy to break the security of this captcha.

**How to use this captcha?**

Please check out the [website](https://vivirenremoto.github.io/doomcaptcha/) to see the documentation.
Connecting to a wireless network on Ubuntu Server 21.04 and Raspberry Pi 4
Tags: raspberrypi, ubuntu
Published: 2021-05-22 19:35:49

---
title: Connecting to a wireless network on Ubuntu Server 21.04 and Raspberry Pi 4
published: true
description: 
tags: raspberrypi,ubuntu
//cover_image: https://direct_url_to_image.jpg
---

Problems solved here:

- Connecting to a wireless network on Ubuntu Server 21.04 and Raspberry Pi 4
- Prefer 5 GHz WiFi when 2.4 GHz exists with the same SSID

---

Add the wifi network configuration to `/etc/netplan/50-cloud-init.yaml`. Looks like this file is generated by netplan somehow and there's probably a better way but this persists through restarts so it's good enough for now.

```sh
$ sudo vim /etc/netplan/50-cloud-init.yaml
```

```
network:
    ethernets:
        eth0:
            dhcp4: true
            optional: true
    version: 2
    wifis:
        wlan0:
            optional: true
            dhcp4: true
            access-points:
                "{{WIFI NAME}}":
                    password: "{{WIFI PASSWORD}}"

```

Raspberry Pi should connect to the network after restarting.

Next problem: It is preferring the 2.4 GHz wifi over 5 GHz. Or at least it was for me.

We need to hardcode the basic service set identifier (BSSID) of 5 GHz network in the above configuration.

Find out the BSSID for the 5 GHz network:

```sh
# Will not return results without sudo
$ sudo iwlist wlan0 scan
```

In the output, look for an entry like this for the 5 Ghz network:

```
Cell 01 - Address: 2C:FD:A1:DD:D3:34
          Channel:36
          Frequency:5.18 GHz (Channel 36)
          Quality=56/70  Signal level=-54 dBm
          Encryption key:on
          ESSID:"{{WIFI NAME}}"
```

The thing after `Address:` is the BSSID.

Add it to `/etc/netplan/50-cloud-init.yaml` on same indentation level as `password`.

```
network:
    ethernets:
        eth0:
            dhcp4: true
            optional: true
    version: 2
    wifis:
        wlan0:
            optional: true
            dhcp4: true
            access-points:
                "{{WIFI NAME}}":
                    password: "{{WIFI PASSWORD}}"
                    bssid: "2C:FD:A1:DD:D3:34"
```

Done. Restart and Raspberry Pi should connect to the 5 Ghz network.
Infrastructure as code: part-1 (Terraform to emancipate?)
Tags: devops, aws, serverless
Published: 2021-05-22 19:28:50

Lately, I have been working on a project, which is based on cloud-native architecture (AWS) and I was in a dilemma about the perfect IaC solution. Despite going into detailed project requirements,simply added the draft diagram below. 

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

Now, from the above diagram, it is quite conspicuous that this system is based on some AWS components and it's a messaging system. Firstly, it maybe seems overkill to think about the IaC solution deeply. However, In the long run, it can save a ton of deployment time. Thus, I decided to leverage the IasC solutions, which codifies the entire architecture. There are several tools for managing serverless applications, such as AWS SAM, serverless framework, and terraform. However, for the sake of minimality, I will decide between SAM and serverless framework in this part.

On the one hand, the serverless framework is a provider-agnostic solution. Thus, its possible to deploy FaaS functions into multiple serverless vendors. Interestingly, the Deployment process is magical (Creates s3 buckets to store artifacts automatically) in SF, and indeed, it's easy. Offline testing needs to install an extra package(serverless offline) and does not need a docker.

 On the other hand, as SAM is an abstract layer of AWS cloud formation, it is easy for running AWS users. Moreover, it consists of fewer boilerplate.SAM Local creates the same environment as Lambda, which spins up local API gateway and then runs function in docker. Finally, it has deep integration of AWS tools for debugging, testing, and development such as  AWS Serverless Application Repository, AWS Toolkit for Visual Studio Code, AWS Cloud9 IDE, Jenkins plugin.

 Considering the above options with my solution, I decided to stick with SAM:
1. Owing to this solution is utterly based on AWS, it will be overkill to use a multi-cloud solution tool.
2. Development and testing with the more AWS-like tools with SAM may ease the process.
3. Local development will be more likely to AWS Lambda.  

So, until now, AWS sam looks like the perfect solution. Is it really? What about if the business wants to scale it beyond serverless applications? Also, for a big project Cloudformation template is manageable? ( I will give my opinion on part 2, till share your experience )


P.S. Just to ensure, I might provide the entire solution on Github once it is completed.
React Hooks Portfolio 😍
Tags: javascript, react, 100daysofcode, portfolio
Published: 2021-05-22 18:50:42

# Said MOUNAIM

<p align="center">
  <kbd>
    <img src="https://i.ibb.co/N9mXnwr/sm.png"></img>
  </kbd>
</p>

### To view a live example, **[click here](https://saidmounaim.netlify.app/)**.

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer.

```
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
```

## How To Use

From your command line, clone and run SMPortfolio:

```bash
# Clone this repository
$ git clone https://github.com/saidMounaim/SMPortfolio.git

# Go into the repository
$ cd SMPortfolio

# Install dependencies
$ npm install

#Start's development server
$ npm start
```

## Technologies Used

-   [React](https://reactjs.org/)
-   [styled-components](https://styled-components.com/)
-   [react-reveal](https://www.react-reveal.com/)
-   [react-lottie](https://www.npmjs.com/package/react-lottie)
Creating Our First Controller
Tags: node, webdev, typescript
Published: 2021-05-22 16:45:53

In my last post we set up Inertia and Adonis. Now that we have a solid foundation to build upon, let us continue fleshing out our CRM app.

## Our First Controller
In my previous post we used a closure route to test everything worked end-to-end. This is fine for simple one-off routes (things like the "about" page for instance), but for more demanding routes, we'll usually reach for a controller.
Let us therefore use `ace` to scaffold a resourceful controller:

```shell
node ace make:controller user -r
```

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e169boywjot3mkoaywmu.png)

Take a moment to look at the new controller, `Ace` created for you. This is a basic template for our future CRUD operations:

```typescript
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

export default class UsersController {
  public async index ({}: HttpContextContract) {
  }

  public async create ({}: HttpContextContract) {
  }

  public async store ({}: HttpContextContract) {
  }

  public async show ({}: HttpContextContract) {
  }

  public async edit ({}: HttpContextContract) {
  }

  public async update ({}: HttpContextContract) {
  }

  public async destroy ({}: HttpContextContract) {
  }
}
```
Now, let's connect some routes to the users controller.

## Configuring Resource Routes
Open `start/routes.ts` and delete the route we previously created. Instead add this:

```typescript
Route.resource('users', 'UsersController');
```

This doesn't look like much, but let's see what routes were automatically created for us:

```shell
node ace list:routes
```

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j91tvyd7jpjp0m7jo99.png)

Pretty neat! Adonis automatically created a route for each controller method.
CSS Most asked Interview Question 
Tags: css
Published: 2021-05-22 18:39:52


###PDF Link:
[Drive  Link](https://drive.google.com/file/d/19Ff5Pg_LDBkIRLJWqoJY_vdQZ4N9Pd9l/view?usp=sharing)

###Github Gist
[Gist](https://gist.github.com/Md-Kais/5cdc42b75b2d0ffa48b759ce697216e3)

{% gist https://gist.github.com/Md-Kais/5cdc42b75b2d0ffa48b759ce697216e3 %}
$PATH Environment Variable in Linux
Tags: linux, environmentvariable, shell
Published: 2021-05-22 18:32:22

If you have downloaded some custom binary (external program) and want to access it from terminal irrespective of your current working directory, probably you are looking for **PATH** variable in Linux.
**PATH** is an environment variable which contains a list of directories separated by `:`.
When I typed `echo $PATH` it shows me 
```
/home/my_user/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
```
Oh, wait! But what are these folders, and what is their use?
These are the folders which contains binaries of programs installed on my machine. 
*Output for `echo $PATH` may be different for you based on your Linux distros and program you have installed.*

So whenever I typed any command in the terminal, OS will start finding that program one-by-one into these directories, whenever it found first match, it will open it. If it can't find the given command it will display an error `command not found`. 
Okay now that make sense!
But you have not answered my original question till now? I have installed a new program and I want to access it using terminal from any working directory. How can I do that?
A simple solution for this is to add the path of your new program to the environment variable **$PATH**.
Let's do it with an example.
I have recently downloaded flutter package and unzip it. But when I typed `flutter` I can't access it. To get this working I have to update the $PATH variable, something like this
```export PATH="$PATH:/home/my_user/flutter/bin"``` and bingo. Now if you type `flutter` in terminal you can access it from anywhere.
*Are these changes are permanent, what if I close the terminal or shut down my machine, will they persist?*
And the answer is **NO**. 
Okay! So what is the permanent solution?
Permanent solution is update path variables via updating terminal profile/settings, I am using bash shell so to update bash setting I will update `.bashrc` file, If you are using zsh or any other terminal please update its respective profile/settings file.
Use the same command ```export PATH="$PATH:/home/my_user/flutter/bin"``` and add it to the end of the `.bashrc` file and save the file.
Now these changes are permanent even if you shut down or restart your machine.

### So what we have learnt in this Post
1. What is $PATH variable?
2. Update terminal settings file, for bash it is .bashrc
3. How to access any program from any working directly in the terminal.
Blend Effects - using CSS
Tags: css, tutorial, learning
Published: 2021-05-22 18:27:07

So, the blend effect can be used in css using the `mix-blend-mode` property in css.

{% codepen https://codepen.io/areeburrub/pen/yLMMKYM %}

There are many values you can put in `mix-blend-mode`, try changing it and explore how it works;

### Some are listed here
```
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
```

source: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
Weatherify: A Weather App built with React.💙
Tags: react, javascript, showdev, beginners
Published: 2021-05-22 18:02:53

# Hey there everyone! Hope you're all doing good. 

So it's been a month since I started learning React, and I can say that I'm loving it so far. And to understand it even better, I decided to follow the project-based approach.

After thinking a lot I decided to make a weather app that can have dynamic backgrounds. So finally after a lot of ups and downs, here it is:
It's called Weatherify. This app gives the current weather details of most of the cities in the world. 

I've used Open Weather Map API to fetch the weather data and Pexels API to get images and dynamically set them as backgrounds.

Here are its screenshots:

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

It gets a new background image after each search:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04bjw0vzlcwbvlnbzpob.jpeg)

So here it is guys. I've hosted it on Firebase and made it Open-Source so that it'll help someone as a beginner-friendly project.

**Here's the link to the live demo:**
https://weatherify-react.web.app/

**Here's the link to GitHub repo:**
https://github.com/zxcodes/Weatherify-Web

# Open to suggestions and feedback.😄
Day 89
Tags: 100daysofcode, programming
Published: 2021-05-22 17:50:36

Day 89/100 of #100DaysOfCode

- Solved three problems on Codewars.

1 -> [Palindrome chain length](https://www.codewars.com/kata/525f039017c7cd0e1a000a26) (7kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/7%20kyu/PalindromeChainLength.js)
2 -> [Clock in Mirror](https://www.codewars.com/kata/56548dad6dae7b8756000037) (6kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/6%20kyu/ClockInMirror.js)
3 -> [Calculate age in years](https://www.codewars.com/kata/521660e064dc2ccdd900008d) (5kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/5%20kyu/CalculateAgeInYears.js)



[Become Code Warriors](www.codewars.com/r/YECsUA)
Running Lubuntu 21.04
Tags: lubuntu, ubuntu, linux
Published: 2021-05-22 17:42:18

I am a long term user of Ubuntu, 2 years recently and another 2 years about 5 years ago. My laptop is not old but it is not so powerful. It has 8 GB of RAM and an AMD A9 CPU. It’s very slow while running Ubuntu specially when using several tabs of Firefox or Chrome and while running applications like Skype. So I decided to give Lubuntu a try. I had ready a lot about how fast it is while being very similar to Ubuntu.
Now it’s 10 days that I have installed Lubuntu 21.04 on my laptop. Simultaneously, I have added a 120 GB SSD storage to it. It’s very fast now. I cannot say it’s because of Lubuntu or SSD, either of them, it is very fast now. I run VS Code, Browsers and some of database management tools and do  React, .Net and Node.js development on daily basis. 
With all goodness, I have some problems with Lubuntu which I have listed below. For some of them, I have found some solutions by far, some of them will be solved soon and some of them may need far more knowledge to solve.
First issue was that partitioning during installation did not give me option to determine swap size. Second issue but perhaps one of big issues was that shortcuts changed a lot and pre-installed apps changed a lot. It took a lot to get used to again. Third issue was that I could not find solution to avoid wake on laptop lid open. I spent some time on it but was not successful. Other issues are as follow:


- Persian Keyboard was easy to install, but finding/defining a shortcut to switch between keyboard layouts was really though. Finally I find a work-around [here](https://forum.ubuntu.ir/index.php?topic=37672.0).
- Sleep by closing lid causes crash. [SOLVED] by arbitrary changes and updates
- When using LibreOffice Calc/Writer I encountered several screen mess up in a way that nothing can be read. I forced  to window resize several time again. An update on LibreOffice solved the problem magically.
- A border has appeared on my desktop. It is a thick black one. It is not related to graphic card. Because some applications like Firefox and VS Code can easily toggle full screen and used all my screen.
- I saw some ACPI Error on startup in first days. It was something related to Graphic card. I did not say the error again.
- Wifi interface was not recognized in first place, but some hacks solved the problem. Open `software sources`, open `Other Software` tab. Check both `Canonical Partners` options. Finally, in `Additional Drivers` tab, select `Using DKMS source for the Realtek 8821C PCIe Wi-Fi driver from rtl8821ce-dkms (open source)`.
- It seems that my webcam is not recognized yet.
- Cannot format/partition USB disk. All guides are about Ubuntu Disks. I need this option specially because my USB is bootable and now it needs to be partitioned again. [SOLVED] I realized that I should use KDE partition manager. Also I can install gnome-disk which is Ubuntu standard.


Anyway, as far as I can program Nodes.js, React.js and ASP.NET Core, I am happy with it. Specially now that is fast enough (yet!)
Loaders - HTML & CSS
Tags: codepen, loader, css, html
Published: 2021-05-22 17:34:54

{% codepen https://codepen.io/rekhansh/pen/mdRNQyP %}
{% codepen https://codepen.io/rekhansh/pen/eYgqxNR %}
{% codepen https://codepen.io/rekhansh/pen/OJWKdgV %}
{% codepen https://codepen.io/rekhansh/pen/yLMBggE %}
{% codepen https://codepen.io/rekhansh/pen/RwpyEJV %}
{% codepen https://codepen.io/rekhansh/pen/xxqjmrx %}
{% codepen https://codepen.io/rekhansh/pen/rNyvoaQ %}