teleren/devto huggingface dataset:
What music do you listen to?
Tags: discuss
Published: 2020-04-19 14:42:50

Hello Devs,
I was wondering what everyone listens to at work and in personal time.
Comment down below your playlists


At home, I listen to this playlist
{% spotify spotify:playlist:37i9dQZF1DWYnx77Gg1Rgu %}

At work, or whenever I am coding I listen to my own playlist
{% spotify spotify:playlist:2FIZqBtbQuzEOY4ukxzTsK %}
CSS: Padding and Margin
Tags: beginners, tutorial, css, webdev
Published: 2020-04-19 14:35:17

There are plenty of ways you can provide spacing between your elements and content. Two of them are padding and margin.

# Padding

Padding as mentioned before in the [Box Model](https://dev.to/koralarts/css-box-model-4ech) is the spacing between the actual content and the border.

There are different ways we could write the padding property values.

```css
div {
  padding: 10px; /* All sides */
  padding: 10px 5%; /* Vertical Horizontal */
  padding: 10px 20px 30em; /* Top Horizontal Bottom */
  padding: 10px 20px 30rem 40px; /* Top Right Bottom Left */

  padding-left: 10px; /* Left */
  padding-right: 10px; /* Right */
  padding-top: 10px; /* Top */
  padding-bottom: 10px; /* Bottom */
}
```

Padding also has special values that can be used.

- `%`: percentage relative to the **width** of the container
- `initial`: defaults to 0
- `inherit`: padding value of the containing element
- `unset`: removes the value

## Gotcha

Not all display types treat padding the same.

{% jsfiddle https://jsfiddle.net/koralarts/9nh5a7vo/19/ result,css,html %}

# Margin

Padding as mentioned before in the [Box Model](https://dev.to/koralarts/css-box-model-4ech) is the spacing between the element and another element.

There are different ways we could write the padding property values.

```css
div {
  margin: 10px; /* All sides */
  margin: 10px 5%; /* Vertical Horizontal */
  margin: 10px 20px 30em; /* Top Horizontal Bottom */
  margin: 10px 20px 30rem 40px; /* Top Right Bottom Left */

  margin-left: 10px; /* Left */
  margin-right: 10px; /* Right */
  margin-top: 10px; /* Top */
  margin-bottom: 10px; /* Bottom */
}
```

## Inline

Similar to padding, margin doesn't behave as expected when the element is `inline` and its container is `block`. Inline elements don't show vertical margins even though its assigned.

{% jsfiddle https://jsfiddle.net/koralarts/0w132pun/14/ result,css,html %}

## Collapsing Margin

If elements aligned vertically have margins, the margin that value that will be used will be the bigger of the two instead of adding both values. This only works if you're 

{% jsfiddle https://jsfiddle.net/koralarts/0w132pun/2/ result,css,html %}

### Gotcha!

Margins don't collapse if the containing block is display `flex` or `grid` because these two display types put its child elements in individual boxes.

{% jsfiddle https://jsfiddle.net/koralarts/0w132pun/6/ result,css,html %}
Spring Boot : @Profile
Tags: java, springboot
Published: 2020-04-19 14:32:51

```java
// MessageReader.java
public interface MessageReader {
    String read();
}

// FileMessageReader.java
@Profile("default")
@Service
public class FileMessageReader implements MessageReader {

    @Override
    public String read() {
        return "Read from file";
    }
}

// DbMessageReader .java
@Profile("prod")
@Service
public class DbMessageReader implements MessageReader {

    @Override
    public String read() {
        return "Read from DB";
    }
}

// App.java
@Autowired
private MessageReader messageReader;
```

If profile `prod` is active, DbMessageReader should be injected into MessageReader.
Spring Boot : Get property value
Tags: java, springboot
Published: 2020-04-19 14:20:07

If you have a properties, You can get the value by using `@Value`, `Environment` or `@ConfigurationProperties`

```properties
app.msg=Hello World
app.version=1.0.0
```

* `@Value`

```java
@Value("${app.msg}")
private String msg;

@Value("${app.version}")
private String version;
```

* `Environment`

```java
@Autowired
private Environment environment;

// ---

environment.getProperty("app.msg")
environment.getProperty("app.version")
```

* `@ConfigurationProperties`

```java
@Configuration
@ConfigurationProperties("app")
public class AppConfig {

    private String msg;
    private String version;

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public String getVersion() {
        return version;
    }

    public void setVersion(String version) {
        this.version = version;
    }
}

// ---

@Autowired
private AppConfig appConfig;
```
Mas o que é SAP? por Dani Clericuzi
Tags: carreira, sap, iniciante, mulheres
Published: 2020-04-19 14:18:31

Escrito por @daniclericuzi especialmente para @elasprogramam

{% link https://dev.to/daniclericuzi/mas-o-que-e-sap-4986 %}

####Nesse artigo, Dani NÃO aborda SAP sob o ponto de vista de programador ABAP, Netweaver, e outras aplicações que requerem a base técnica de alguém já da área de TI.

Primeiro, é importante deixar claro o que é um ERP (Enterprise Resource Planning). Um ERP é um software que integra todos os dados e processos de uma organização (todas as áreas: Finanças, Recursos Humanas, Materiais, Vendas,...) em um único sistema. O SAP é um ERP criado por uma empresa alemã que tem o mesmo nome; é um software que fornece soluções customizadas para diferentes tipos de indústrias, por meio de módulos.

O sistema divide em módulos cada departamento correspondente, como por exemplo o de vendas, gerenciamento de estoques, controlling, projetos, etc. Cada módulo, portanto, é responsável por muitos processos de negócio que são baseados nas práticas de cada empresa. No SAP, os módulos funcionais são representados por siglas, como por exemplo: FI (Finanças), CO (Controladoria), MM (Materiais), SD (Vendas), PP (Planejamento da Produção), QM (Qualidade).

Como já citei anteriormente, no SAP tem as áreas que irão precisar já desse conhecimento prévio em TI; por exemplo: as pessoas que atuam com programação ABAP (linguagem própria desenvolvida pela SAP) e BASIS (infraestrutura e aplicações). Bom, mas estamos falando de pessoas que não possuem essa base, que tem a formação (ou experiência) em Administração, Contábeis, Economia, Engenharia. São os funcionais. Estes, precisam entender a regra de negócio de um determinando módulo e são os responsáveis pelas customizações/configurações e suporte daquele módulo no Sistema.

A melhor maneira de ingressar na área é por meio das chamadas Academias ofertadas por empresas como processo seletivo. Algumas que realizam são: Accenture, IBM, Cast Group (Por gentileza, me corrijam ou acrescetem informações, eu realmente não tenho pesquisado muito sobre o mercado SAP). No Linkedin tem muita gente massa da área compartilhando material gratuito também, a quem já tiver curiosidade. ;-)
Why do you think indexing in arrays begin from 0 in most of the languages?
Tags: programming, architecture, indexing, video
Published: 2020-04-19 13:59:43

Here is my attempt on answering this through a video: https://youtu.be/2yY7Q7ERqFw

Here is the TL;DR version if you do not want to watch a video:
An array is stored in a contiguous space of memory. The address of the first element is the address of the array and subsequent elements are indexed summing an offset to the address of the array. Therefore the offset of the first element is 0.

I would highly recommend watching the video as there are a few more interesting parts to this. Also, do subscribe to my channel if you liked the content :)

Cheers!
Manticore 1.0 is released!
Tags: showdev, python, opensource
Published: 2020-04-19 13:58:14

Manticore is a simple, minimal static site generator in Python. It's free and open source, and I would appreciate feedback. 

This is my first contribution to open source, looking to make many more. Forks and pull requests, improvements on the codebase are all welcome!

{% github blazephoenix/manticore %}
Improve your JavaScript coding with optional chaining
Tags: javascript, beginners, webdev
Published: 2020-04-19 13:41:01

You might or might not have heard the term "optional chaining" bandied about in the past few months. In this article, I'm going to explain what it is and why you should be using it. Spending a few minutes gaining an understanding of how and when to use optional chaining will save you a lot of time and effort whilst writing/debugging JavaScript in the long run!


---

## So what is Optional chaining?
It's pretty simple actually, optional chaining makes dealing with nested objects much easier by making expressions shorter it reduces the amount of code you need to write. When you're consuming APIs or working with complex objects optional chaining is really useful. Optional chaining isn't a new concept, and it exists in other programming languages but support for it has only recently been added to JavaScript and it is now supported by most modern browsers. I'll explain later in the article how simple it is to add support for legacy browsers. But first, let's take a deeper look at what optional chaining is and some examples of why we need it.

## How does it work?
Have you ever come across an error that looks a bit like this whilst working with JavaScript? *TypeError: Cannot read property X of undefined*.

![Screenshot of optional chaining error](https://dev-to-uploads.s3.amazonaws.com/i/adkewwsji8w0jrrmkr9n.png)

This means that your code can't access the value you are trying to because the value's parent property is undefined. So in the example above the 'user' variable is initialized as an empty object and we're trying to access the 'firstName' value within the 'details' property. Because the 'details' property is not defined  JavaScript does not proceed with the expression and throws this error.

## The old solution
Previously to solve this you would check that the parent property is defined by doing something like this

```
{user.details && user.details.firstName ? (
    <p>{user.details.firstName}</p>
) : null}
```

The problem with this is that your code quickly becomes messy as you add more if statements to check that properties exist.

## Optional chaining to the rescue!
This is where optional chaining comes in. Optional chaining allows you to add the '?' operator after a property, to check a property exists. If the property exists it carries on with the expression. Here's an example.

```
{user.details?.firstName ? (
    <p>{user.details.firstName}</p>
) : null}
```

## Sounds great! How do I use it in my app?
Optional chaining is now supported by most modern browsers but you will still need to do a bit of work to get it working with older browsers. If your project is using React you will need to upgrade to React Scripts 3.3, or if you are using Typescript you will need to upgrade to Typescript 3.7 to be able to use optional chaining.

---
If you found this useful, have any questions, or want more content like this, feel free to [follow me on twitter](https://twitter.com/AndyPotts_)!
Why seems React to be so extremely complex
Tags: react, frontend, javascript
Published: 2020-04-19 13:36:33

Let's keep this short. I am working on prototyping some ideas I am having, but React keeps being so unbelievably complex. 

I am a backend engineer. However, I would like to extend my knowledge and work on ideas I have. Whenever my mind decides to use React, it always is so hard to only get a project up and running. 

My only requirements: it must use TypeScript (because I want to get used to use TypeScript) and I need to call a backend API. 

The first idea was to use Ruby on Rails, because well full stack! But then it felt a bit strange so I went to my colleagues. As they are experienced with React, I decided to go that way. The backend isn't that hard, picking or Go, or Spring Boot, whatever. That works just fine.

Complexities seem to occur on the frontend side of things. I got some thing working after just being frustrated and trying over and over. But I do not understand why it seems to be developer unfriendly. The basics work, but then calling the backend I need to add a proxy middleware. And then I something else breaks. 

It feels I am not doing what I supposed to do. It feels that I am not using React in the way I should use it. So then I just looked for boilerplate frameworks and I found https://github.com/pankod/next-boilerplate which seemed to work, but **wow**. What a complexity in there.

So my question is: How do you work on full stack apps when you want to prototype an idea? Did you experience the same when trying React? What frameworks do you use?

Thanks for your time reading this ranting post.
Git no mundo do desenvolvimento
Tags: git, svg, vcs
Published: 2020-04-19 13:30:35

A utilização de um sistema de controle de versão(VCS, na sigla em inglês) no mundo do desenvolvimento se tornou um regra amplamente difundida. Seja na hora de criar um trabalho local ou em conjunto com um time de programadores, utilizar um VCS é a melhor maneira de evitar dores de cabeça na hora de cuidar das diferentes versões de código.

Atualmente Git é uma das ferramentas de controle de versão mais utilizadas em ambientes de desenvolvimento. A seguir está listado alguns dos motivos pelo qual essa ferramenta se tornou tão famosa.

## O que é Git?
	
De acordo com sua própria documentação: ”O Git é um sistema de controle de versão distribuído de código aberto e gratuito, projetado para lidar com tudo, desde
projetos pequenos a grandes, com velocidade e eficiência.”	

Em termos práticos, é uma ferramenta que auxilia o desenvolvedor em todo o processo de desenvolvimento de uma solução. Ele guarda em seu histórico toda  alteração realizada nos arquivos do projeto, tornando assim fácil a visualização de alterações realizadas por parte dos membros do time.

Existem vários VCS disponíveis pelo mercado, como o Subversion e o Perforce, mas o git se diferencia destes sobretudo por ter uma arquitetura distribuída.

A forma que o Git trabalha com os arquivos é outro grande diferencial dessa tecnologia. Os outros sistemas de versionamento tratam seus dados como arquivos e suas mudanças, entretanto o git trabalho com snapshots, uma captura de algo em um determinado instante, como uma imagem.

## Vantagens de usar o Git

Além de entender o seu papel no mundo do desenvolvimento, é importante saber suas vantagens a fim de fazer a escolha certa na hora de escolher o Git como seu sistema de versionamento.

### Desempenho

A maioria das operações no Git só precisa de arquivos e recursos locais para operar - geralmente nenhuma informação é necessária de outro computador da rede. Isso torna suas tarefas mais rápidas, pois não será necessário depender da conexão de internet na maior parte do tempo.

Por se tratar de um sistema de versionamento distribuído, é possível realizar diferentes atividades ao mesmo tempo, o que acelera o ambiente de desenvolvimento, trazendo assim agilidade para a equipe de desenvolvedores.

### Segurança

Tudo no Git passa por uma soma de verificação (checksum) antes de ser armazenado e é referenciado por esse checksum. Isto significa que é impossível mudar o conteúdo de qualquer arquivo ou pasta sem que Git saiba. Essa característica demonstra como o Git lida com a integridade de seus arquivos. 

### Flexibilidade
Por fim, uma ótima vantagem de se trabalhar com o Git é sua flexibilidade. Ele trabalha bem com diferentes fluxos de desenvolvimento. Seja em projetos grandes ou pequenos, é possível notar toda  velocidade e segurança que esse VCS propicia. 

Encontrou algum erro nesse artigo ou gostaria de me enviar uma mensagem? Go ahead :-).
TwilioHackathon - Video Chat app using Gatsby and twilio-6
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-19 13:25:01

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

Welcome to part-6 of the series. In previous part we got our result back from twilio. Now, it’s time to store the result so that we can use it in the next part. Update the **login-form.js** file, with a props **storeToken** and then save the **jwt** in it.

![login-form.js](https://cdn-images-1.medium.com/max/2880/1*RcZviet9Oav1kayOEOsv4A.png)*login-form.js*

Next, we will update **index.js** to have a new state **token** and pass the props storeToken in LoginForm.

We are using ternary logic to display the form if user is not logged in or else for the time been **Has Token** text.

![index.js](https://cdn-images-1.medium.com/max/2880/1*vudJTu3eTIbYgaaD1ejICA.png)*index.js*

Time to test our code in [http://localhost:8000/](http://localhost:8000/). On opening we will get the Login form.

![Login Form](https://cdn-images-1.medium.com/max/2880/1*nk0uJCQSiCNksRmfCbr3lg.png)*Login Form*

On giving a name and clicking on **Join Video Chat**, we will be taken to below screen.

![Successful](https://cdn-images-1.medium.com/max/2880/1*Ke_tv_DkQqkAJ353x-t3Mg.png)*Successful*

Next, we will create the Video component. Create a new file **video.js** inside the **components** folder. Here, we are using useEffect hook which will fire when the **token** changes. The token comes as a props and is used to connect to a room, using the twilio-video inbuilt method.

![video.js](https://cdn-images-1.medium.com/max/2880/1*8F4Py-EhnrEgnj7DKFOEkg.png)*video.js*

Next, let’s use this component in **index.js** when the user is authenticated.

![index.js](https://cdn-images-1.medium.com/max/2880/1*aOCskAQYN2flIGIv-vvFsw.png)*index.js*

We will again login in our web-app, by giving a **Display Name** and clicking on **Join Video Chat** button.

![Login](https://cdn-images-1.medium.com/max/2880/1*2uOLE9zQC3n55YeJbx6f2Q.png)*Login*

It will open the pop-up to ask for permission to use video and audio. We need to click on Allow.

![Allow](https://cdn-images-1.medium.com/max/2880/1*rpEb7FvO4iJqPV_bY3_XQQ.png)*Allow*

It will successfully log us in and show Video.

![Video](https://cdn-images-1.medium.com/max/2880/1*0WaXTdyxkfqbwHC5RL8c2g.png)*Video*

This completes part-6 of the series. 

You can also find the code for this project in [this](https://github.com/nabendu82/SimpleVideoApp) github link.
Conditional rendering in React - using the ternary operator
Tags: javascript, react, beginners, tutorial
Published: 2020-04-19 13:13:52

In the last article we discussed how to conditionally render parts of our React application using `if/ else` statements. You can find more about it in the link below: 

{%link https://dev.to/cilvako/conditional-rendering-in-react-the-if-else-method-2ga3 %}

Today I'm going to write about the `ternary operator` method. For simplicity, I am going to use code similar with the one in last article. We have three functional components, `App`, `Condition1` and `Condition2`. App will render one of the other two components, depending the state of the button. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/08nsdwy9jrvu52e40g4p.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3lpcm5p1t42i8tp8wto1.PNG)

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

One could ask, why use the `ternary operator` when we can achieve the exact same thing using an `if/ else` statement? I do not have a particular preference for this method but I believe it makes the conditional rendering easier to read and gives us the possibility to use it inline in our return statement. Of curse, there are cases when the code becomes bloated (when trying to render more than one HTML element/ React components at a time) so in this case you should consider extracting the code in a different component. 

In the example bellow, App is rendering three components at the same time, if the first condition is true. In this case, don't forget to add a wrapper around the components (I used a `fragment`, but you can use a `div` or any other HTML element that makes syntactical sense) and to also add parenthesis around the return statements. If it's just a single component, you can omit the parentheses, as seen in the example above.

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

In case you want to plat around with the code, you can find the complete example here: https://codesandbox.io/s/conditional-rendering-using-the-ternary-operator-wkwsw?file=/src/App.js
Dynamic Links with Firebase (Alternative to URL shortener service)
Tags: firebase, tutorial, dynamiclink
Published: 2020-04-19 13:01:55

I recently has a new domain, yay! But, i always wanted to have my own URL shortener service, like hv.in. Upon searching at Namecheap, I gave up :cry:.
![P1](https://dev-to-uploads.s3.amazonaws.com/i/dfb139vlpfz5it3q7lyv.png)

BUT, I won't stop there. I searched for free domain, such as .tk, still no luck.
![P2](https://dev-to-uploads.s3.amazonaws.com/i/ur3v0m0ng8jgpschzsid.png)

So, since I have my own domain, but I don't want my domain to be solely serve as URL shortener only. And, thankfully Firebase offer similar services. I simply create a new subdomain and then use that subdomain for my shortener service. Although it's not as good as bit.ly / goo.gl (those fancy yet short one), but it serve the purpose!

> :bulb: If you are lucky to get one with a low price or you just don't mind about the price tag, you can use [YOURLS](https://yourls.org/) to manage your URL shortener service.

##Create a new domain/subdomain at your domain provider dashboard
In my case, [Ionos](https://www.ionos.com/office-solutions/create-an-email-address?ac=OM.US.USf11K357090T7073a&kwk=668406507).
<table>
<tr>
<td>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/j5j3891q1y4hrergrnh8.png" />
</td>
<td>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/9p8wtq1b25tskyz4dmdc.png" />
</td>
</tr>
<tr>
<td>
1. Click <b>Domains & SSL</b>
</td>
<td>
2. Click your registered domain 
</td>
</tr>
<tr>
<td>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/rlgbd6pyei9dqxqndhmt.png" />
</td>
<td>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/cbn0u6zx7ljyl7l3fxu5.png" />
</td>
</tr>
<tr>
<td> 
3. Head over to <b>Subdomains</b> and click on <b>Add subdomain</b>
</td>
<td>
4. Give your subdomain a name
</td>
</table>
Once you have done this, you shall have something like below,
![P2](https://dev-to-uploads.s3.amazonaws.com/i/kv9a7qtjoapzi31fu3xx.png)

##Go to Firebase console and configure the subdomain
Please refer my previous post on how to do so. (Step 1 in the post)
{% link khvmaths/host-your-own-blog-with-jekyll-on-firebase-and-travis-ci-1mko#chapter-1 %}

You are almost there!

##Use dynamic links in Firebase
Step 1, select Dynamic links in Firebase
![P3](https://dev-to-uploads.s3.amazonaws.com/i/xw0xyfzjuuczo72an9wr.png)
Step 2, key in your subdomain and follow the on-screen instruction.
![P4](https://dev-to-uploads.s3.amazonaws.com/i/23no5ys3en02dev03hh0.png)
You shall arrive at this page if everything is right!
![P5](https://dev-to-uploads.s3.amazonaws.com/i/twtacgkx16qlk8k4xo9f.png)
It's done! 
>It might take several hours to be able to use dynamic links.

AND, YOU HAVE JUST SETUP A SO-CALLED 'URL Shortener Service'!

##Create your first 'shortened link'
At dynamic link dashboard, click on **New Dynamic Link**
![P6](https://dev-to-uploads.s3.amazonaws.com/i/rx6sbcf4he2ye0fxmjfc.png)
Just follow all on-screen instruction.

##:wine_glass: That's all!
<a href="https://www.buymeacoffee.com/hongvin" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" width = "140px" ></a>
Libonomy Blokchain 
Tags: trading, technology, blockchain, token
Published: 2020-04-19 12:52:47

'Blockchain' is the new trending latest technology that is emerging nowadays. Libonomy is one of its kind blockchain that has achieved the goals of innovation and creativity with great success. The kind of innovation it advertises attracts and reaches out to masses that have the knowledge that the system is fulfilling its role of greatness. Many only talk about a new system of blockchain but Libonomy is on its road to fulfill that ideology already.
https://libonomy.com