teleren/devto huggingface dataset:
Cobol Para Iniciantes - Breve Introdução e Instalação do OpenCobolIDE
Tags: cobol, brasil, tutorial
Published: 2020-05-19 17:46:08

Peço desculpa por ir direto ao ponto, mas a cabeça de uma pessoa de 70 anos já não funciona tão bem assim...

Está se tornando cada vez mais comum noticias sobre a falta de programadores cobol em várias empresas, chamando assim a atenção de muitos programadores para aprender sobre a linguagem porém eles se deparam com a falta de conteúdo para iniciantes em português. 
Devido a isto vou começar a escrever para ensinar o básico de Cobol para quem queira se aventurar e desbravar o mundo dos dinossauros juntamente comigo. 

#Breve Introdução

Common Business Oriented Languagem - Linguagem comum orientada a negócios, é vastamente usada em aplicações do mundo financeiro ou do varejo. 

Grace Hopper é conhecida como a mãe da linguagem por ter criado a linguagem Flow-Matic(1955) que serviu como base para o departamento de defesa norte americano criar o cobol que teve o seu surgimento em 1959. 

![alt text](https://raw.githubusercontent.com/CobolParaIniciantes/cobolParaIniciantes/master/breveIntroducaoEInstalacao/graceHopper.jpg "Logo Title Text 1")

Outras versões do Cobol foram lançadas em 1968, 1974, 1985 e a sua ultima já com orientação a objetos e XML foi lançada em 2002. 

#Instalação do OpenCobolIDE

Para escrevermos nossos códigos em Cobol vamos utilizar a OpenCobolIDE.

Você pode baixar a mesma através deste link:

https://launchpad.net/cobcide/+download

Ela possui versões para Windows, Linux ou Mac. Para este curso vou usar o sistema operacional Windows já que é o único que eu sei usar. 

![alt text](https://raw.githubusercontent.com/CobolParaIniciantes/cobolParaIniciantes/master/breveIntroducaoEInstalacao/openCobolIdeLinkParaInstalacao.png "Logo Title Text 1")

Basicamente você precisa dar next, next, next. 

Após isto você terá um resultado parecido com isto:

![alt text](https://raw.githubusercontent.com/CobolParaIniciantes/cobolParaIniciantes/master/breveIntroducaoEInstalacao/openCobolIde.png "Logo Title Text 1")

Por hoje é só pessoal já estou ficando cansado de escrever aqui, está na hora da minha soneca...
Até a próxima onde vamos aprender sobre a estrutura de um código cobol e iremos fazer o famoso Hello World.
Calling the Class of 2020: Join DEV + GitHub for Graduation
Tags: devgrad2020, octograd2020, meta, opensource
Published: 2020-05-19 17:43:28

---
title: Calling the Class of 2020: Join DEV + GitHub for Graduation
published: true
description: On Monday, June 15th, we’ll be featuring final projects from the Class of 2020 all over the DEV platform and throughout our social channels.
tags: devgrad2020, octograd2020, meta, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hbei7z0iigeoca1wg8xn.png
---
Around this time of year, students across the world are typically celebrating the closing of a chapter — whether that’s from grade school, college, grad school, or anything in between and beyond. It’s a time of pride, reflection, and camaraderie amongst fellow graduates as they take the next step of their journey.

Because the pandemic has led to mass-cancellations of in-person graduation ceremonies and showcases, we're teaming up with GitHub for a community-wide celebration! On Monday, June 15th, we’ll be featuring final projects from the Class of 2020 all over the DEV platform and throughout our social channels. Additionally, GitHub is organizing a [Class of 2020 Year Book](https://github.com/education/graduation) and hosting a [livestream graduation ceremony](https://education.github.com/graduation) at 9:00 AM PDT, where they’ll highlight some of your projects shared on DEV. All year book participants will also get swag delivered straight to their door!  

## How To Participate

### Step One: Share Your Projects

To qualify for extra swag, we’re asking graduates to go the extra mile and share their final projects or thesis with the community.

- Use our [graduation template](https://dev.to/new/devgrad2020) to write your post.
- You’ll see some prompts that are meant to get your ideas going, so please feel free to write everything in your own style! Be sure to include the [#devgrad2020](https://dev.to/t/devgrad2020) and [#octograd2020](https://dev.to/t/octograd2020) tags.
- PUBLISH YOUR POST! 😊

### Step Two: Submit Your PR

Once you’ve published your post, you’re ready to submit a PR to the Class of 2020 Year Book.
- Visit the [Class of 2020 Repository](https://github.com/education/graduation)
- Submit a PR with your name, school, photo, favorite quote, DEV post link, and GitHub username. Be sure to go through the entire PR checklist!
- Fill out the [swag shipment form](https://airtable.com/shrmuHxu38ZariKJi).
- Done!

{% github https://github.com/education/graduation %}

**Submission Deadline: ~~Before midnight Monday, May 25th PDT~~ Friday May 22 at 3pm PDT.** Due to a high volume of PRs, we need to close submissions early. 

### Bonus Step: Share The Love!
- Share this post with the people in your life who are graduating 💌
- Mark your calendars and come back on June 15th 🗓
- Show your support by checking out projects and sending the Class of 2020 some love (comments, hearts, and unicorns are all super welcome). 🦄

Looking forward to celebrating with everyone 🎉
JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article]
Tags: javascript, webdev, productivity, codenewbie
Published: 2020-05-19 17:43:21

> This is going to be a multi-part Video + article tutorial series on JavaScript DOM. You're reading Part 4

You can read Part 3 here:
{% link https://dev.to/tharunshiv/javascript-dom-part-3-get-element-by-id-video-article-4hj8 %}

{% youtube bfjkU6Hd4yo %}

## innerText | innerHTML | textContent

All three of them are attributes that you can get from the elements. They are not the same and we will be looking at how they are different with the below illustrations.

## innerText

When applied to an element, it returns only the text which is inside the element, the text part wrapped by the element and nothing else, it also ignores the space.

_syntax:_

```javascript
element.innerText
```

_example:_

```html
<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>
```

```javascript
let p = document.getElementById('experiment');
console.log(p.innerText)
```

_output_
```
"
Hello this is Tharun How are you?
"
```

## innerHTML

When applied to an element, it returns the text part enclosed by the element, along with the HTML tags inside, and also considers the spacing given inside. Look at the example below.

_syntax:_

```javascript
element.innerHTML
```

_example:_

```html
<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>
```

```javascript
let p = document.getElementById('experiment');
console.log(p.innerHTML)
```

_output_

```
"
  <br>
  Hello this is <span>Tharun<span/> How are you?
  <br>
"
``` 

## textContent

When applied to an element, it returns the text part enclosed by the element and considers the spacing given inside. Look at the example below.

_syntax:_

```javascript
element.textContent
```

_example:_

```html
<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>
```

```javascript
let p = document.getElementById('experiment');
console.log(p.textContent)
```

_output_

```
"
  
  Hello this is Tharun How are you?
  
"
``` 

So these are the main differences between these three that you need to know.
You can access and do a lot more magic by grabbing the elements. We will explore and do stuff in this series. 

Next Part coming tomorrow, where we discuss about how you can get multiple elements by using getElementsByClassName.

Thank you for reading 😊
> **Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun**

Written by,
{% user developertharun %}

# Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

![Tharun Shiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtxq6bdms36fmn62450h.png)
Coding, Quarantine and Covid 19 - How did you Cope?
Tags: covid, productivity, culture, survey
Published: 2020-05-19 17:31:48

---
title: Coding, Quarantine and Covid 19 - How did you Cope?
published: true
description: 
tags: #covid #productivity #culture #survey
---

We are interested to understand the COVID-19 outbreak impact on developers and their projects (current & future). This short survey will only take up 5 minutes of your time and help us learn how you have adapted to this situation in your work, education and everyday life.  

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

Tell us about your home office setup, what changed in your daily life, did you participate in any voluntary projects? Tired of eating the same snacks over and over again? We want to hear your pain points! 

As a thank you for taking part, four lucky participants will win $20 in Amazon vouchers and everyone completing our survey will get 50 loyalty points added to their [Developer Economics profile.](https://www.developereconomics.com/join/)

[Take the survey here!](https://devecon.typeform.com/to/GyNwZ0)
Deno. Recoil. Blitz.js. Javascript fatigue is back?
Tags: javascript, react, deno
Published: 2020-05-19 17:15:25

Are we seeing a new wave of very cool ideas and innovations? 💡 And not just ideas but actual finished products or libraries that we can try? 

## Javascript fatigue
Javascript fatigue happens when we can't keep up with the latest tools and libraries. It's the fear of becoming obsolete because of the constant change of the ecosystem. 	😵

So I'll stop ranting and just share a few resources on those cool technologies (this is not an exhaustive list).

## Deno
A few key features of Deno: 
✅ Secure sandbox by default
✅ Typescript support out of the box
✅ Modules can be loaded directly from URLs
✅ Aims to be browser compatible
✅ Embrace async / await / promises

{% youtube dp8eedoRpyo %}

## Recoil 
Recoil is a new **experimental** state management library that aims to solve the React [slow render problems](https://dev.to/alexandrudanpop/understanding-performance-problems-in-react-4o4c) when dealing with big or deep nested component trees.

{% youtube _ISAA_Jt9kI %}

## Blitz.js
⚡️Rails-like framework for monolithic, full-stack React apps — built on Next.js.
What we are still lacking in the React ecosystem is a full-stack framework, so you don't always need to:
 - set up a React app
 - set up a Server app
 - set up the interface layer between server and client
 - set up authentication and authorization 
 - set up DBs

{% youtube H93WAFrlCkQ %}

## Lower the fatigue
What I like about the Web is the ecosystem that is continuously pushing to challenge the old ways of doing things - and continues to evolve. 

While there are so many new things to learn, it doesn't mean that we need to jump into them right away, but instead keep an eye on them, and use them at the right moment. 🌟

If you like this article, chances are you will also enjoy what I post on [Twitter](https://twitter.com/alexandrudanpop).
Installing Docker on Raspberry Pi 4
Tags: docker, raspberrypi, pi
Published: 2020-05-19 17:18:27

1. Update repository and upgrade packages

        sudo apt-get update
        sudo apt-get upgrade

2. Download installer from get.docker and install Docker

        curl -fsSL get.docker.com -o get-docker.sh && sh get-docker.sh

    ![](https://i.imgur.com/rcO8sPe.png)

3. Add "pi" user to Docker Group

        sudo usermod -aG docker pi

4. Setup the Docker Repo

        nano /etc/apt/sources.list.d/docker.list

    Add this

        deb https://download.docker.com/linux/raspbian/ stretch stable

5. Update repository and upgrade packages again

        sudo apt-get update
        sudo apt-get upgrade
Text To Speech In 3 Lines Of JavaScript
Tags: javascript, webdev, api, codenewbie
Published: 2020-05-19 17:14:42

If you're curious about trying this out, that's the 3 lines of code below 👇

```javascript
var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);
```
But if you're not in a hurry, this article explains everything you need to know about converting text to speech (spoken words) on the web with JavaScript.

## Introduction
In a previous article, we'd explored the Web Speech API and also how to convert [Speech To Text](https://dev.to/asaoluelijah/speech-recognition-with-javascript-4lh6)
Another amazing feature of the Web Speech API is to convert Text to Speech.

> **Note:** Text To Speech != Speech To Text 🧐

- Text To Speech is when we give the computer some *words* and the computer will say this words out loud in some robotic/human voice. While
- Speech To Text is when we say some words to the computer, and what we'd just said will be converted to **text** (I guess this is explanatory enough)

## Getting Started
The first thing we'll need to do is check if our browser supports the speech synthesis API. And the code below does that:

```javascript
if ('speechSynthesis' in window) {
 // Speech Synthesis supported 🎉
}else{
  // Speech Synthesis Not Supported 😣
  alert("Sorry, your browser doesn't support text to speech!");
}
```
Next step is to create a new speechSynthesis object, add required property and make our app talk 👇

```javascript
var msg = new SpeechSynthesisUtterance();
msg.text = "Good Morning";
window.speechSynthesis.speak(msg);
```
### Code Explanation
- Line 1: We created a variable `msg`, and the value assigned to it is a new instance of the `speechSynthesis` class.
- Line 2: The `.text` property is used to specify the text we want to convert to speech
- And finally, the code on the 3rd(last) line is what actually make our browser talks.

##  Altering Default Output
The speechSynthesis API gives room to also change alter the default output like changing the **voice, volume, speech rate, language, pitch** and more:

```javascript
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; 
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 10
msg.pitch = 2; // From 0 to 2
msg.text = "Como estas Joel";
msg.lang = 'es';
speechSynthesis.speak(msg);
```

## Getting Supported Voices
The code below helps you retrieve the list of all supported voices:

```javascript
speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? voice.default :'');
});
```

## Conclusion
Well, there's nothing to conclude here I guess 🙃
But you could follow me on [Twitter](https://twitter.com/asaolu_elijah), I tweet and retweet interesting technical stuffs; you sure want to see em.

Thanks for reading 👏
CSS FORMS
Tags: javascript, webdev, beginners, css
Published: 2020-05-19 17:07:19

---
title: CSS FORMS
published: True
tags: #javascript #webdev #beginners #css
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkd8rxcmfn2f29hsg4zd.png)
<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>30 Pure CSS Forms</H2>
https://gscode.in/css-forms/


<p>1.Daily challenge 001 from dailyui.co.</p>

{% codepen https://codepen.io/tylernj42/pen/BoxzaQ %}

<p>2.Sign In &amp; Sign Up Form concept , click on login and Sign Up to  changue and view the effect</p>

{% codepen https://codepen.io/THEORLAN2/pen/MyedKo %}

<P>3.CSS FORMS</P>
{% codepen https://codepen.io/jadepreis/pen/aZmPBY %}


<p>4.Supported card:</p>

{% codepen https://codepen.io/simoberny/pen/XgEgGg %}

<p>5.Recently made a website that uses the "sketch style" because I was dead adamant to not use flat design. These are some of the elements + more that I never got to use.</p>

<p>Shoutout to all y'all bullet journalists on Instagram.</p>

<p>Also <a href="https://codepen.io/mattyfours/pen/xNGdyO" target="_blank">https://codepen.io/mattyfours/pen/xNGdyO</a> for the beautiful 5-way gradient! &lt;3</p>

<p>p/s I have a picture with a random dog in 20 different countries, ama.</p>

{% codepen https://codepen.io/oliviale/pen/dyydRqJ %}

<p>6.Placeholders cannot be modified in a very useful way, and not by all browsers the same... so there's some jQuery to manipulate the label elements to act as placeholders ( it also means the form is semantic as the labels are there at page load correctly)</p>

{% codepen https://codepen.io/simeydotme/pen/pjwyWJ %}


<p>7.Login, Sign-up, Password, Reset, Payment, User, Contact, Complex</p>

<p>Scroll-to-Top feature, being a single scroll page and all...</p>

{% codepen https://codepen.io/Thumper/pen/gGBXZO %}


<p>8.Quick practise on one of the forms in this article:
<a href="https://medium.com/@saijogeorge/creative-form-input-field-design-examples-bfe5dd50808a" target="_blank">https://medium.com/@saijogeorge/creative-form-input-field-design-examples-bfe5dd50808a</a></p>

{% codepen https://codepen.io/shadeed/pen/rVpXmB %}

<p>9.Log In Forms</p>

{% codepen https://codepen.io/uiswarup/pen/zYvGKed %}

<P>CSS FORM</P>
{% codepen https://codepen.io/chantallexandra/pen/VRmgYE %}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkd8rxcmfn2f29hsg4zd.png)
<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>30 Pure CSS Forms</H2>
https://gscode.in/css-forms/
Setting display brightness on Linux from the command line
Tags: linux, todayilearned, bash, productivity
Published: 2020-05-19 16:53:48

I auto-adjust the brightness on my display using a [cron](https://en.wikipedia.org/wiki/Cron) which runs at 7 pm everyday.

```bash
xrandr --output eDP-1 --brightness 0.9
```

This sets the brightness to 90% of maximum brightness.

### Working with Linux Display environments in a cron

The above command works when run from my terminal. But when run on a cron, it does not produce any effect. We need to explicitly mention the "display number" as an environment variable `DISPLAY`.
```bash
8 19 * * * DISPLAY=:0 xrandr --verbose --output eDP-1 --brightness 0.9
```

#### How to get the display number of your monitor?
Running `xrandr` will give you a lot of output like
```
Screen 0: minimum 320 x 200, current 1920 x 1080, maximum 16384 x 16384
eDP-1 connected primary 1920x1080+0+0 (normal left inverted right x axis y axis)
```

In my case, the display number is `:0`

#### Adjusting backlight brightness vs perceived brightness

If `xrandr` is unable to find backlight, it only changes "perceived" brightness i.e it does [software color correction](https://wiki.archlinux.org/index.php/backlight#Color_correction). If we want to save battery, we will need to reduce the backlight brightness.

In Linux, the backlights can be found in `/sys/class/backlight`. In my case, it was `/sys/class/backlight/intel_backlight`. In this folder, there are many files like
```
actual_brightness
max_brightness
brightness
```

`max_brightness` shows highest possible level of brightness for the display. We can adjust the value in `brightness` file to reduce backlight brightness.
Here's what I do to adjust it: `echo 1800 > /sys/class/backlight/intel_backlight/brightness` (in root crontab)


Unlike the xrandr command, this does not require setting any DISPLAY variable in the cron file.

### Other tools
- [brightnessctl](https://github.com/Hummer12007/brightnessctl) is an easy to use tool which integrates well with systemd. It is also available in the package managers of various distributions like Debian, Ubuntu, Arch Linux.
Top 5 API Testing Videos That You Must Watch as QA | 30 Days of API Testing | Day 19
Tags: testing, webdev, beginners, tutorial
Published: 2020-05-19 16:49:47

🚀Mastering API Testing(Full Course) -  https://www.learnapitesting.com

In this video of 30 Days of API Testing Challenge, We are going to discuss Top 5 API Testing Videos That You Must Watch as QA and API testing youtube videos which I think you should watch.


Link  : 
- https://apitesting.fyi.to/api-testing-resources

[![30 Days of API Testing](https://i.imgur.com/06eFGZJ.png)](https://youtu.be/qVC3tDgIOXs "30 Days of API Testing")

🚀 Day 19 Task: Find and share a useful video about API testing.

🚀 All Task List: https://scrolltest.com/api/task

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Should we post in our native language?
Tags: meta
Published: 2020-05-19 16:47:38

---
title: Should we post in our native language?
published: true
description: What do you think about using your native language here?
tags: meta
---

I saw a few posters on last days using their native language here on dev.to. I think this could lead to a very poluted feed, as we don't have any kind of filter to languages. What do you think about it?
The Snapcrap founder talks learning to code and going viral
Tags: career, funny, mobile
Published: 2020-05-25 16:57:08

---
title: The Snapcrap founder talks learning to code and going viral
published: true
date: 2020-05-19 16:26:06 UTC
tags: Career, Funny, Mobile 
canonical_url: https://www.nocsdegree.com/snapcrap-founder-learning-code/
---

In 2018 Sean Miller went viral with his app which let users report excrement to the San Francisco authorities. Snapcrap was a hit with the media.
Building sideprojects as a dad with a fulltime job
Tags: sideprojects, productivity
Published: 2020-05-19 16:22:42

4 years ago I was a university student, didn't have children and no fulltime job. I had a lot of free time. I have been building sideprojects since I was 15 years old. I started making little browsergames back then. Nothing big and without the intention of making money with them . It was just for learning purposes and for having fun.
In university this changed a little bit. I really had the intention of making money with my projects. But as I had basically as much time as I wanted. I was procrastinating all day long. I started countless projects and finished absolutely none of them. Interests were changing way too fast and I started a new one as soon as the basic setup for the last one was complete.
But I didn't care. I didn't have any pressure to complete anything and I didn't need the money.

#### Fast forward 4 years:
I have a 3 year old daughter and a full time job. The time I can dedicate to sideprojects is very rare because I have other hobbies too and I have to keep myself away from computer screens sometimes in order to not burn out.
I often felt kind of a pressure to work on my side projects when I had free time because I knew that this is the only time I have and if I let it pass, it's gone.
This got worse and worse until I finally had kind of a mind switch. I told myself that I don't have to work on stuff when I'm not feeling like it and that it's absolutely no problem to take some days off if I feel stressed.
Slow progress is still progress. I still want to work on my projects regularly but without any pressure.
And this was when it ticked for me. I set priorities for the work I wanted to get done on my sideprojects and used the time I spend on them more efficiently. I stopped switching frameworks like crazy and settled with what I already knew. I noticed pretty quickly that this really made me more productive and that my projects progressed quicker. Which motivated me even more to work on them.

So I ended up being more productive with less time spend on the projects. I finished 4 (small) sideprojects in 2019, which is more than I ever released before.
I'm currently working on a bigger project again but I'm following the same principles plus I share what I'm working on publicly which is a huge motivation boost too.

I know there a lot of parents working on sideprojects that don't feel the pain I felt, but I also know that there are a lot of indie hacker parents out there that are struggling for the exact same reasons. I know that this isn't the ultimate formula that works for everybody. But taking everything a little more relaxed and not stressing out about progress is something that will not hurt anybody. Perhaps it even increases productivity.

I'm currently sharing a lot of insights about me building a pretty big project (a javascript framework with integrated backend) [on twitter](https://twitter.com/rallipi). If you want to connect, just let me know.