teleren/devto huggingface dataset:
Weekly Edição 1
Published: 2021-02-28 12:06:13

Weekly é uma sessão do blog onde guardo todos os links dos conteúdos que li, ouvi ou assistir durante uma semana. 

## **📚** Textos:

* **Abba:** [Using PartiQL to query AWS DynamoDb in Javascript](https://abba.dev/blog/dynamodb-partiql-javascript)
* **Ali Abdaal:** [The Ultimate Guide to Studying](https://aliabdaal.com/studying/)
* **Flavio Copes:** [How to write a CSV file with Node.js](https://flaviocopes.com/node-write-csv/)
* **Ali Abdaal:** [Useful Apps To Improve Productivity and Study Effectively](https://aliabdaal.com/useful-productivity-studying-apps/)
* **Simon Holdorf:** [Why You Need Soft Skills as a Software Developer – And How to Improve Them](hhttps://www.freecodecamp.org/news/why-you-need-soft-skills-as-a-software-developer/)
* **Natalie Pina:** [How Empathy Can Make You a Better Software Engineer](https://www.freecodecamp.org/news/how-empathy-makes-you-a-better-software-engineer/)
* **Tiago de Freitas Lima:** [Microserviços e REST (sério?)](https://elo7.dev/microservicos-rest/)
* **Marvin Mouroum:** [iOS Dynamic Push Notifications with AWS Pinpoint](https://medium.com/flawless-app-stories/ios-push-notifications-with-aws-4bde95dfe7f4)

## **🎙** Podcasts:

* **Charles Duhigg:** [O Poder do Hábito](https://12min.com/br/o-poder-do-habito-resumo)
* **Tallis Gomes:** [Nada Easy](https://12min.com/br/nada-easy-resumo#)
* **Sun Tzu:** [A Arte da Guerra](https://12min.com/br/a-arte-da-guerra-resumo)
* **Hipsters:** [O Ecossistema Frontend da Gupy – Hipsters On The Road #52](https://hipsters.tech/o-ecossistema-frontend-da-gupy-hipsters-on-the-road-52/)
* **Hipsters:** [Estado atual do DevOps – Hipsters Ponto Tech #240](https://hipsters.tech/estado-atual-do-devops-hipsters-ponto-tech-240/)
* **Hipsters:** [Trello, Jira e Ferramentas de Produtividade – Hipsters Ponto Tech #239](https://hipsters.tech/trello-jira-e-ferramentas-de-produtividade-hipsters-ponto-tech-239/)
* **Nath Finanças:** [Orçamento Sem Falhas](https://12min.com/br/orcamento-sem-falhas)

## 🗣 Tweets:

* **@rponte: ["](https://twitter.com/rponte/status/1363994140866977797)** [alguém tem algum artigo sobre boas práticas em design de APIs gRPC (ou mesmo RPC)?"](https://twitter.com/rponte/status/1363994140866977797)

## 🖥️ Videos:

* **Beto Muniz:** [Desenvolvimento Web Além do HTML, CSS e JavaScript - YouTube](https://www.youtube.com/watch?v=hBCzE96apao)
* **Rocketseat:** [Node.js: carreira, mercado e dicas na prática | #PR  27](https://www.youtube.com/watch?v=W-SOgt7O1hc)
[Note] Installing SVN Server to Droplets
Tags: subversion, digitalocean
Published: 2021-02-28 11:57:09

In this post, I will write about how I set up SVN server to Ubuntu 18.04 (LTS) x64 droplets

Then enter to ssh server by the address with command:
```
ssh root@{Server address}
```

# Installing Apache and SVN module

## Installing Apache
```
sudo apt-get update
sudo apt-get install apache2
```

## Installing SVN module
```
sudo apt-get install subversion libapache2-mod-svn
```

## Enable required modules
```
sudo a2enmod dav dav_svn authz_svn
```

## Restart Apache
```
sudo service apache2 restart
```

* * *

# Create new repository

## Create repositories storing directory
```
sudo mkdir -p /var/lib/svn/
```

## Set repositories storing directory permissions
```
sudo chown -R www-data:www-data /var/lib/svn
sudo chmod -R 775 /var/lib/svn
```

## Create users into file: /etc/apache2/dav_svn.passwd
```
sudo touch /etc/apache2/dav_svn.passwd
sudo htpasswd -m /etc/apache2/dav_svn.passwd {Your Username}
```

## Set SVN module config
```
sudo nano /etc/apache2/mods-enabled/dav_svn.conf
```

### Copy following config content to the file
```
<Location /svn>

   DAV svn
   SVNParentPath /var/lib/svn

   AuthType Basic
   AuthName "Subversion Repository"
   AuthUserFile /etc/apache2/dav_svn.passwd
   Require valid-user
     
</Location>
```

## Create new SVN repository into repositories storing directory (/var/lib/svn/)
```
sudo svnadmin create /var/lib/svn/{Repository name}
```

## Restart Apache
```
sudo service apache2 restart
```

* * *

Try it by using web-browser, browse: `http://{Server address}/svn/{Repository name}`
Weekly Frontend Digest (February 22 - February 28)
Published: 2021-02-28 11:49:10

Hello everyone! The second part is already here. I have collected material that caught my attention more than any other information. In the end, there is a couple of projects on Codepen. (February 22 - February 28)

**Small tips in CSS**: transitions, filters, colors, borders, and more.
- https://dev.to/vanaf1979/some-small-css-tips-007-k7d

**7 interesting HTML attributes that you didn't know about**: for example, `allow` in `<iframe>` and `ping` in `<a>`.
- https://dev.to/alvaromontoro/7-interesting-html-attributes-you-may-not-know-58j0

**[!] The most useful set of cheat sheets for web programmers**: Git, CSS, JS, VSCode Shortcuts and more.
- https://dev.to/palashmon/ultimate-cheatsheet-compilation-32c9

**Little-known HTML attributes and how they are useful**: really useful attributes in practice.
- https://dev.to/kieran6roberts/lesser-known-html-attributes-and-what-they-can-do-for-us-5ebd

**Interactive guide to CSS-Transitions**: an accessible guide to transitions, complete with examples.
- https://www.joshwcomeau.com/animation/css-transitions/

**Processing arrays in JavaScript:** a very clear explanation of how arrays work, using the example of emojis.
- https://dev.to/devmount/javascript-array-methods-explained-with-emojis-2amn

**[!] Monetize your site**: A guide to action for every developer. Monetize your website, Twitter, or Github account.
- https://dev.to/alvaromontoro/monetize-your-website-3j5j

**Important JavaScript methods and properties**: The most usable methods in JavaScript.
- https://dev.to/capscode/javascript-important-methods-properties-cheatsheet-52kh

**var, let, and const in JavaScript**: what is the difference between declaring variables.
- https://dev.to/kunalt96/var-let-const-in-javascript-3dne

## Projects on Codepen
<br>
**Keyboard Hero**: keyboard simulator in pure JS
- https://codepen.io/evilpaper/pen/dyyZjLQ

**Calculator**: Just a cute calculator on your phone screen
- https://codepen.io/JorgeAguilar/pen/zYooavL

Check out my previous part and follow my <a href="https://github.com/Ra1nbow1">Github</a>
{% link https://dev.to/ra1nbow1/weekly-fronted-digest-3efa %}
Weekly Challenge 101
Tags: perl, perlweeklychallenge, weeklychallenge
Published: 2021-02-28 11:29:56

[Challenge 101](https://perlweeklychallenge.org/blog/perl-weekly-challenge-101/)
[My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-101/sgreen/perl)

# TASK #1 › Pack a Spiral

## The task

You are given an array `@A` of items (integers say, but they can be anything).

Your task is to pack that array into an `MxN` matrix spirally counterclockwise, as tightly as possible. Tightly means the absolute value |M-N| of the difference has to be as small as possible.

## My solution

This challenge is kinda of the reverse of [task 2](https://perlweeklychallenge.org/blog/perl-weekly-challenge-088/#TASK2) from challenge 88. In that task we were given a spiral and had to unwind it.

This task can be broken up into three steps:

1. Work out the tightest grid.
    * Work with `$y` from 1 to one less than the array size.
    * If the array size can be evenly divided by `$y` and it is tighter than the current grid size, update `$max_x` and `$max_y`.
1. Populate the grid
  * Create a `@direction` array with the x/y offsets for right, up, left and down.
  * Create a loop from 0 to `$#values`.
  * Put that value in the given location.
  * If the next x/y value is either out of bounds or that position already has a value, change directions.
1. Display the grid
  * Since 0,0 represents the bottom left, we use the reverse function on the `@grid` array.
  * I use `sprintf` to right justify numbers and left justify strings. This ensure that even if the lengths of the values are different, they will be correctly aligned.

## Examples

```
» ./ch-1.pl 1 2 3 4 5 6
6 5 4
1 2 3

» ./ch-1.pl 1 2 3 4 5 6 7 8 9 10 11 12
 9  8  7  6
10 11 12  5
 1  2  3  4

» ./ch-1.pl the quick brown fox jumps over the lazy dog
the   over  jumps
lazy  dog   fox  
the   quick brown
```

# TASK #2 › Origin-containing Triangle

## The task

You are given three points in the plane, as a list of six co-ordinates: `A=(x1,y1)`, `B=(x2,y2)` and `C=(x3,y3)`.

Write a script to find out if the triangle formed by the given three co-ordinates contain origin (0,0).

Print 1 if found otherwise 0.

## My solution

I have debated whether I should submit a solution to this task. I am, but with a massive caveat. My high school algebra was more than 25 years ago, and the **solution is not my own workings**. I've taken the first solution from [this website](http://totologic.blogspot.com/2014/01/accurate-point-in-triangle-test.html), and convert it to Perl.

## Examples

```
» ./ch-2.pl "A=(0,1), B=(1,0) and C=(2,2)"
0

» ./ch-2.pl "A=(1,1), B=(-1,1) and C=(0,-3)"
1

» ./ch-2.pl "A=(0,1), B=(2,0) and C=(-6,0)"
1
```
FEC Day 4
Published: 2021-02-28 11:29:06

Unfortunately our group was split up for a large portion of the time. However, we were still able to get some more foundational work done like set up Circle CI, install airbnb/a11y linters, and create the basic components for each person's part. My part is the ratings and reviews section, which seems like the more logic intensive portion. I think before I get into building the components, we need to set up our API requests so that we know what kind of data we're handling and can test our code with real data sooner.
How to make footer stick at the bottom of web page.
Tags: html, css, webdev
Published: 2021-02-28 11:21:35

#Problem
If you are new to web development and have created some HTML page before then you may be in a situation where you find that your footer is not at the bottom of page and there is white space at the bottom because there is not much content.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgtgqzegngx0kuxs835o.png)  
here is simple html code that produce this result which is not we want.
```
<body>
    <header>
        <h1>This is Header.</h1>
    </header>
    
    <article>
        <h1>This is main content.</h1>
    </article>
    
    <footer>
        <h1>This is Footer.</h1>
    </footer>
</body>
```
As you can see there are not much content so my footer is not in the bottom of the page. Technically it is bottom of the page but our page is not long enough.
# Solution
#### Setting body height
```
body {
    min-height: 100vh;
}
```
We can set our body min height to 100vh that will make our page at least as long as screen height But it will not solve our problem.

#### Setting margin top on footer
```
footer {
    margin-top: ???px;
}
```
We can set margin-top on footer element that will make our footer to stay at the bottom of the page but when we have multiple pages and every page has different content length we have to set right amount of margin on every page one by one.
## Using Flexbox
Using Flexbox in CSS we can fix it very easily with following steps.

1. First set the min-height of body to 100vh.
`min-height: 100vh;`.
2. Set the body display to flex `display: flex;` and flex-direction to column `flex-direction: column;`.
3. Select footer element (of whatever you want to stick to bottom) and set top margin to auto `margin-top: auto;`.

Your CSS should look something like this.
```
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{
    margin-top: auto;
}
```
And the problem should be fixed.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe198gc49nx2j1cu8yt0.png)
 
> There is a great article on flexbox on css-trick.com to learn more about it. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

## Bonus: Align content vertically center
When you don't have much content to fill the full height of screen like simple login form, you you may want to align your content vertically center.
To do this just remove margin top from footer and set margin top and bottom to auto `margin: auto 0;` on your main content (in my case article element) or `margin: auto;` to center it on both direction (vertically and horizontally) and it will make content align to center.

Your CSS should look something like this.
```
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
article {
    margin: auto 0;
}
```
A NodeJs web application using an application skeleton!
Tags: express, postgres, node, webdev
Published: 2021-02-28 18:40:30

---
title: A NodeJs web application using an application skeleton!
published: true
date: 2021-02-28 11:20:15 UTC
tags: Expressjs,PostgreSQL,Nodejs,webdev
canonical_url: https://fotokar.ir/a-nodejs-web-application-using-an-application-skeleton
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yewvfwv3zypdjmxw4p0.png)

Every time I tried to build a node web app, I had to build the whole structure from scratch.
After a while, I became acquainted with the new Expressjs tool, which almost does the job of a framework for Express.

That tool is Express application generator.

I create a minimal web app using the Express application generator, You can find the whole source on GitHub at - [https://github.com/ehsanghaffarii/express-mvp-postgres-db](https://github.com/ehsanghaffarii/express-mvp-postgres-db)
DevDojo Weekly Winners Week 4 Feb 2021
Tags: webdev, writing
Published: 2021-02-28 10:03:23

The results are in, and another five awesome people are winning $20 smackaroos 💰 for writing on the DevDojo! If you want a chance to win $20 next week, write an article or a tutorial related to development or design, and you'll automatically be entered. Read the full details [here](https://devdojo.com/featured/info?ref=bobbyiliev).

Without further ado, here are the weekly winners. 🏆

# 1. [When will we have CSS4?](https://devdojo.com/temani-afif/when-will-we-have-css4?ref=bobbyiliev)

Written by [temani-afif](https://devdojo.com/temani-afif?ref=bobbyiliev)

![When will we have CSS4?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xt50ef0sgljuzt53yl1u.png)
 

# 2. [JavaScript Loops And How To Use Them](https://devdojo.com/bo-iliev/javascript-loops-and-how-to-use-them?ref=bobbyiliev)

Written by [bo-iliev](https://devdojo.com/bo-iliev?ref=bobbyiliev)

![ JavaScript Loops And How To Use Them](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40h7c9ac6ql8gs8c9yw1.png)

# 3. [Do you use Linux?](https://devdojo.com/alexg/do-you-use-linux?ref=bobbyiliev)

Written by [alexg](https://devdojo.com/alexg?ref=bobbyiliev)

![Do you use Linux?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ifo9595it04qd3gj7lf.png)
 
# 4. [Image Editor using CamanJS](https://devdojo.com/piyushsinha24/image-editor-using-camanjs?ref=bobbyiliev)

Written by [piyushsinha24](https://devdojo.com/piyushsinha24?ref=bobbyiliev)

![Image Editor using CamanJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r13fa0zm9ufgagt0fxyc.png)
 

# 5. [Gitlab CICD Pipeline to Deploy your Python Flask API with Postgres on Heroku](https://devdojo.com/ruanbekker/gitlab-cicd-pipeline-to-deploy-your-python-flask-api-with-postgres-on-heroku?ref=bobbyiliev)

Written by [ruanbekker](https://devdojo.com/ruanbekker?ref=bobbyiliev)

![Gitlab CICD Pipeline to Deploy your Python Flask API with Postgres on Heroku](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3rw55ut9lch4le5vccx.png)
 

# Conclusion

Thanks again to everyone who has been submitting some pretty awesome content. We appreciate you 😉

I hope you all had a great week! Let's prepare ourselves for another productive and awesome week ahead of us. Cheers 🍻

![Congratulations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yl5rwohv8lnc7xj62l4.png)
Things you do on a fresh installation or a new work device?
Published: 2021-02-28 09:35:23

---
title: Things you do on a fresh installation or a new work device?
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

There's a few subconscious things we end up installing or doing when we get a freshly installed OS or a new system all together. 

Here's a list of things I go through on a new setup.
[Macbook Setup](https://reaper.im/blog/macbook-setup-checklist)

What about you?


**Extras**
Here's the script I use to ease the app installation phase.
[stepone](https://github.com/barelyhuman/stepone)
Lets enter the Temporal Dead Zone 🐱‍👤
Tags: javascript, firstpost
Published: 2021-02-28 09:18:00

We are familiar with variable hoisting in JavaScript. If we try to access a variable (declared using `var` keyword) before assign it any value, we get `undefined`. But that's not the case with variables defined using `let` or `const`. If we try to access a variable (declared using `let` or `const`) before assigning it any value, we get `ReferenceError`.

Many people believe the reason behind this behavior is that `let` and `const` are not hoisted, which is not true. Just like `var`, they are hoisted, but what they lack is the *initialization process* which `var` goes through but `let` and `const` do not.

For `let` and `const`, initialization is only complete when a value is assigned to the variable; and the period from start of the block scope to initialization of value, where we receive `ReferenceError`, is known as the *Temporal Dead Zone*.

Wrapping up: All `var`, `let` and `const` are hoisted. But, unlike `var`, `let` and `const` do not go though initialization process. The time (zone) from start of block scope to actual initialization is called Temporal Dead Zone 🐱‍👤.
What is Java Runtime Environment
Tags: java, tutorial, beginners, programming
Published: 2021-02-28 09:16:10

In this tutorial, we will learn about one of the core components of Java i.e the  [what is Java Runtime Environment](https://usemynotes.com/what-is-java-runtime-environment/). We will cover its basic structure and understand why it is needed in Java. This tutorial will also cover the installation of JRE into your local computer.

## What is the Java Runtime Environment (JRE)?
Any software that is executed needs an environment in which it can rest and operate. The primary environment in a computer is its operating system (OS). All the software generally runs on the OS. It is not efficient to always run everything on the OS directly.

Specifically for Java programs, there is a special environment that can run Java programs virtually on an OS, it is called the Java Runtime Environment (JRE). The Java Virtual Machine (JVM) which is the core part of Java responsible for executing Java programs also sits on the JRE. We can say JVM is a subset of JRE.

The JRE provides a virtual platform on which the JVM and other Java libraries rest on. These components of JRE are virtually isolated and used for executing Java programs. A system that doesn’t have JRE cannot run Java programs. We have to install JVM for executing Java programs and applications. Also, know that the JDK or Java Development Kit already has JRE within it. A system that has JDK installed doesn’t have to install JRE separately.
![java-runtime-environment-jre.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614503485173/4HSDRZqqb.png)
## What does JRE do?
Executing a Java program is easy. But the underlying architecture of the JRE defines what is needed for it to be executed. The JRE contains all the libraries and core classes that are needed to execute a Java program. Whenever we execute a Java program, the JRE combines the needed classes and other libraries with the JVM that is required for that program. The JVM then loads these classes and libraries and creates a virtual environment to execute the code.

## Why use JRE when we have JDK?
JDK is a development kit that has all the tools and utilities that can be used to create Java programs and applications. These tools are basically for developers for developing and debugging purposes. If you are a developer then you need JDK to develop Java applications.

But if you are a user who just needs to use/execute Java applications that are already built by a developer, then you just have to install JRE on your computer which only includes components that are required to execute Java applications. This will prevent you from installing unnecessary tools that are developer-specific and not required.

## How to install JRE?
The installation of JRE is similar to installing JDK. In this tutorial, we will be covering the Windows operating system.

If you are interested to learn  [how to install java](https://usemynotes.com/how-to-install-java/) JRE so kindly visit it. 

----
Originally posted on [alimammiya.hashnode.dev](https://alimammiya.hashnode.dev/what-is-java-runtime-environment)
Difference between react props vs. state
Tags: reactnative, javascript, react, programming
Published: 2021-02-28 08:45:23

One of the core concepts of react is the difference between props and state. Only changes in props and state trigger react to re-render components and update the DOM.

The biggest difference is that re-rendering of the component based on input in state is done entirely within the component, whereas you with using props can receive new data from outside the component and re-render.

### Props 
props allows you to pass data from a parent component to a child component.

``` javascript
//Parent Component
const books = () => {
    return (
<div>
 <Book title = "Data structures and algorithms with JAVA" />
 </div>
   );
}
//Child component
const book = (props) => {
    return ( 
        <div>
            <h1>{props.title}</h1>
        </div>
    )
}

```
Explanation: Now. ‘props’ is passed in to the child component and the functional component the passes the ‘props’ as an argument which in turn will be handled as an object. The property ‘title’ is accessible in the child component from the parent component.

### State
Only class-based react components can define and use state. It’s although possible to pass state to a functional component but functional components can’t edit them directly.

``` javascript
class NewBook extends Component {
    state = {
        number: ''
    };
    render() {
        return ( 
            <div>{this.state.number}</div>
        );
    }
}
```

As you can see the NewBook component contains a defined state. This state is accessible through this.state.number and can be returned in the render() method.
Exp: Color Cloud CSS
Tags: codepen, css, cssdoodle, svg
Published: 2021-02-28 08:10:27

---
title: Exp: Color Cloud CSS
published: true
tags: codepen, css, cssdoodle, svg
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cp4hhp8houbws5tsuj9.png
---

{% codepen https://codepen.io/sparklingman/pen/NWbYdXL %}