teleren/devto huggingface dataset:
O que é um sistema de controle de versão?
Tags: github
Published: 2021-03-23 20:09:44

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

 O melhor jeito de aprender é ensinando! E por isso eu vim aqui repassar meus conhecimentos a respeito de versionamento. É meu primeiro artigo sobre programação e espero ser útil para você. 

 Antes de mais nada lembre-se: **Git e GitHub não são a mesma coisa**.

 Primeiramente o que é um sistema de controle de versão? É menos assustador do que o nome eu prometo. Quando falamos de *versionamento* queremos dizer literalmente várias versões de um mesmo projeto/código. 

 Imagine a seguinte situação: você tem o trabalho de fazer o layout de um site para um cliente, porem a cada versão do site que você apresenta, o cliente pede uma alteração, e em certo ponto ele pede para você voltar algumas versões atrás, por exemplo: você fez o layout amarelo, mas depois ele pediu para alterar para azul, depois vermelho, mas no fim das contas o cliente optou pelo amarelo que você fez no começo, que chato seria ter que refazer o mesmo trabalho tudo de novo ne? Não com o versionamento! Pois com ele você pode navegar entre todas suas **versões anteriores** sem precisar sacrificar suas **versões mais recentes** para isso, você consegue alterar e resgatar todas suas versões salvas no momento que você quiser.  

 

# Onde essas versões ficam guardadas?  

 

 Relaxe, você não precisa ter um hd infinito para guardar tantas versões, porque todas elas ficam armazenadas em nuvem, em um *repositório remoto* online (*GitHub*), isso significa que você poderá acessar o seu projeto de absolutamente qualquer lugar que você estiver basta ter uma rede *Wi-fi*. 

 Repositório nada mais é do que um servidor de armazenamento de arquivos, que pode ser tanto local, quanto remoto.  

 

# Como subir seu código para o seu repositório?  

 

 Com um *terminal* é claro! Como o *Git* por exemplo, a primeira vista um *terminal* pode parecer assustador, mas é bem mais simples do que parece, com poucos comandos você já consegue fazer tudo que você vai precisar no dia a dia. 

 O papel do terminal vai ser salvar o seu código no estado em que ele está, chamamos isso de *commit*, sempre que você quiser guardar alguma mudança você irá realizar um *commit*. 

 Para enviar o seu *commit* para o *repositório remoto*, você precisa realizar um *push*, que é um comando que nada mais faz do que subir suas últimas atualizações para seu repositório. 

 Mas não se espante com essas palavras novas, em breve publicarei um segundo artigo onde eu te ensino como utilizar esses comandos, fazer tudo isso na pratica e irei linkar o post aqui.
Manually add an appimage software shortcut to application menu in linux
Tags: linux, ubuntu, beginners, opensource
Published: 2021-03-23 20:04:29

I am going demonstrate how you can add an appimage application shortcut to linux desktop system's application menu and also how to customize its icon.But first lets get to understand what an appimage software is.

###What is an appimage application and what are its benefits
For starters,there are many ways an application can be installed in a linux system i.e deb packages,snaps,flatpaks and appimages.Our focus today is appimages.
An Appimage application is a single portable and executable software that can be run on linux without installation.

Benefits of using appimages
* Compatibility with most linux distributions.
* Simple to run i.e download,make it executable and run.since it is not installed no system libraries are altered.
* Download and use trusted software directly from the original author(s).
* Uninstalling is as simple as just deleting the file. 

###Running an app image
Lets download the fluent reader software(it is a modern rss reader) as an example.
<a href='https://github.com/yang991178/fluent-reader/releases/'>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx6ky9gx0k4m67pxzrl7.png) </a>
Once download is completed,navigate to the downloads folder and right-click on the downloaded appimage file,click on Properties thereafter,Click on the permissions tab and check the execute option.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1zzsddos3f1ybcf8epw.png)
The software should be running by now without any problems.

###Adding a shortcut with custom icon to the linux application menu
Note: super user permission is required for this process.
* Open the terminal
* Navigare to the /usr/share/applications directory.
* Create a new file with a .desktop extension in the applications directory.
* Open the file with gedit
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iycr868yzpkluvmx2jmh.png)
* Add the following template text to your empty file and replace with the location of your exec(i.e appimage location) and icon of your choice.eg
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rnf41qi9v2gewl2xvwu.png)
* Save your file and exit the terminal.

You should be able to see your software shortcut in the menu and it should run when clicked if you followed the steps above correctly.

Thanks and have fun :relaxed:
Angular in a Nutshell #Part2: Components
Tags: angular, webdev, beginners, tut
Published: 2021-03-23 19:48:44

In Angular, a component is a class marked by @Component decorator that defines a view and the logic behind it.
```javascript
@Component({
  selector: ...,
  template: ...,
  styles: ...,
})
``` 
The object provided to @Component decorator represents the component metadata.

* Selector: Unique identifier that defines how the current component is represented in the HTML DOM.

```javascript
selector: 'my-app'
```

* Template: Defines the template of the component as an HTML string.

```javascript
template: '<h1>My Angular Component</h1>'
```
When you have a complex template it's recommended to separate it in an HTML file and use the **templateUrl** instead

```javascript
templateUrl: './app.component.html'
```

* Styles: Defines the styles for a component as an array of strings.

```javascript
styles:['h1 { color: red; }']
```
The same thing as for template applies here, if you have a complex style, it's better to declare it in a separate file and then provide it to the component through the **styleUrls** property.

```javascript
styleUrls: ['./app.component.css']
```
Upcoming next : "Open Source" will change to "Source available" in cloud.
Tags: opensource, news
Published: 2021-03-23 19:43:03

There is difference between open source and Free Open Source Software. Many companies also have Dual Licences of product.

Recently, with growth of cloud and issues of licences some companies may use "source available" Licences.

What does this mean?
You can now get an open app with more restrictions or you will pay for it to keep it in your cloud . However, you are free to have source.


What you think?
Read more: https://github.blog/2021-03-18-whats-up-with-these-new-not-open-source-licenses/
Running OS-level commands from the InterSystems IRIS command prompt
Published: 2021-03-23 18:45:55

I originally posted this tip a few years ago on [InterSystems Developer Community](https://community.intersystems.com/post/terminal-tip-running-os-level-commands).

When working at the IRIS (or Ensemble or Caché) command prompt I sometimes want to run an operating system command on the server host. By prefixing my command line with `!` or `$` I can do this with ease. The following examples are from 2020.1 on Windows, but I think the feature is available on all versions and platforms:

```
USER>!dir
 
 Volume in drive C is Windows
 Volume Serial Number is XXXX-XXXX
 
 Directory of c:\intersystems\iris201\mgr\user
 
11/12/2020  17:31    <DIR>          .
11/12/2020  17:31    <DIR>          ..
23/03/2021  14:00         1,048,576 IRIS.DAT
14/03/2021  10:00                37 iris.lck
11/12/2020  17:30    <DIR>          stream
               2 File(s)      1,048,613 bytes
               3 Dir(s)  134,542,090,240 bytes free
USER>$dir
 
 Volume in drive C is Windows
 Volume Serial Number is XXXX-XXXX
 
 Directory of c:\intersystems\iris201\mgr\user
 
11/12/2020  17:31    <DIR>          .
11/12/2020  17:31    <DIR>          ..
23/03/2021  14:00         1,048,576 IRIS.DAT
14/03/2021  10:00                37 iris.lck
11/12/2020  17:30    <DIR>          stream
               2 File(s)      1,048,613 bytes
               3 Dir(s)  134,542,159,872 bytes free
USER>
```

If I need to issue more than one command I can _almost_ get myself an interactive shell:

``` 
USER>!
 
c:\intersystems\iris201\mgr\user\> dir
 Volume in drive C is Windows
 Volume Serial Number is XXXX-XXXX
 
 Directory of c:\intersystems\iris201\mgr\user
 
11/12/2020  17:31    <DIR>          .
11/12/2020  17:31    <DIR>          ..
23/03/2021  14:00         1,048,576 IRIS.DAT
14/03/2021  10:00                37 iris.lck
11/12/2020  17:30    <DIR>          stream
               2 File(s)      1,048,613 bytes
               3 Dir(s)  134,542,151,680 bytes free
c:\intersystems\iris201\mgr\user\> date
The current date is: 23/03/2021
Enter the new date: (dd-mm-yy)
c:\intersystems\iris201\mgr\user\> exit
USER>
```

I wrote "almost" because in the example above the `date` command prompted me to enter a new date but didn't wait for my keystrokes. It behaved as though I had immediately pressed Enter.

Still, I find it a useful feature.

To use it you will need the %System_Callout:USE privilege.
Conversor de Farenheit para Celsius
Tags: imersaodev
Published: 2021-03-23 19:00:11

{% codepen https://codepen.io/Elias_Hentz/pen/VwPwBbx %}![term-metro-fahrenheit-e-celsius-para-o-calor-e-o-frio-de-medição-90145886](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5450bzeuaexoev7cb2i.jpg)
The Psychology of Color: Use color to enhance learning 👨‍🎨
Tags: linux, productivity, programming, webdev
Published: 2021-03-23 18:24:49

“Colors aren’t important.”

Oh yeah - then how do you explain traffic lights, warning signs, and rainbows? Color is important, and it’s time we pay attention to color in eLearning too.

Learning is a difficult field to understand, and there’s so much research out there discussing these issues that it’s hard to know where to begin. What’s pretty obvious though is that color plays a key role in creating an environment that fosters learning.

Using the right color, and the correct selection and placement can seriously affect feelings, attention, and behavior when learning. It’s time that we leveraged that to our advantage.

# Power Up Setup 

First, make shine ✨ 

I'm using Manjaro OS and theme zsh.

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

PowerLevel10k: A Zsh theme


{% github romkatv/powerlevel10k %}


LSDeluxe: The next gen ls command

{% github Peltoche/lsd %}

Tilda: A Gtk based drop down terminal for Linux and Unix

{% github Peltoche/lsd %}

# Show your setup

Post your setup in the comments 👇
Setup your own OpenVPN in 10 minutes
Tags: ansible, docker, centos
Published: 2021-03-23 18:24:31

Hi everyone!
In this video, I show you how to start your own VPN server based on CentOS 8 in 10 minutes. The video shows the practical use of Ansible, Docker and OpenVPN.

*I tried for the first time to record a screencast and provide it with a text description in English. I would be happy to receive comments and suggestions. Thanks for your attention!*

{% youtube KApzBc6V6HY %}

### Ansible Playbook

Link to Ansible Playbook - https://github.com/rhamdeew/ansible-docker-compose-openvpn-secure-centos8

The playbook uses roles from [Jeff Geerling]() (geerlingguy.repo-epel, geerlingguy.security, geerlingguy.pip, geerlingguy.docker)

### Docker-compose repository

https://github.com/rhamdeew/docker-compose-openvpn

This repo based on [kylemanna/docker-openvpn](https://github.com/kylemanna/docker-openvpn) but have Makefile with useful commands for comfortable OpenVPN setup.

### No time to watch the video. How to setup?

**Prerequisites:**
- Tunnelblick (https://tunnelblick.net/downloads.html​) – VPN-client for macOS
- Ansible (Homebrew) – IT automation tool
- Tmux (Homebrew) – terminal multiplexer (optional)
- Alacritty (Homebrew) – fast terminal emulator (optional)
- DigitalOcean account - hosting provider with fast VPS provisioning (optional)

**Screencast contains 4 steps:**
1. Generate SSH-key pair, create a virtual server with CentOS 8
2. Clone and run Ansible Playbook for basic server setup and installing Docker
3. Quickly configure OpenVPN settings and start Docker-container
4. Add client-config to VPN-client and connect
So geht's: Beitragsbild Spalte im WordPress Admin hinzufügen
Tags: wordpress, code, functionsphp
Published: 2021-03-26 11:16:30

---
title: So geht's: Beitragsbild Spalte im WordPress Admin hinzufügen
published: true
date: 2021-03-23 18:17:57 UTC
tags: Wordpress,code,functionsphp
canonical_url: https://j0e.org/featured-image-admin/
---

![Beitragsbild-Spalte im WordPress Admin hinzufügen](https://j0e.org/wp-content/uploads/2016/10/beitragsbild-spalte-admin.png)

 Möchtest du das Beitragsbild in der Beitrags- und Seiten-Übersicht im WordPress Admin gleich an erster …

[So geht's: Beitragsbild Spalte im WordPress Admin hinzufügen](https://j0e.org/featured-image-admin/)
How to deploy python-ldap in Production Docker Image
Tags: docker, python, ldap
Published: 2021-03-23 18:05:20

I had a web dashboard that I needed to authenticate using ldap. For that I wanted to go with [python-ldap](https://www.python-ldap.org/en/python-ldap-3.3.0/) package.

I faced few challenges in deploying to my Docker image since it required source code build on deployment, and there are no official binaries. That meant that if I want to deploy python-ldap on a production server / container; I have to install development packages as described in the [Build Prerequisites](https://www.python-ldap.org/en/python-ldap-3.3.0/installing.html#build-prerequisites) section of their documentation.

For development purposes, this would have been fine, but I preferred not to have those unnecessary packages in my deployed production container. The other option was to deploy prebuilt packages. I also preferred not to do that.

The solution was simple though. I simply built the wheel inside one stage of my docker image, then just copied this wheel file to the next stage, to install it directly using pip.

Below is my docker file.

```
FROM python:3.9.2 AS ldap-build

RUN apt-get update -y && \ 
    apt-get install -y libsasl2-dev python-dev libldap2-dev libssl-dev && \
    python -m pip wheel --wheel-dir=/tmp python-ldap==3.3.1

FROM python:3.9.2
COPY --from=ldap-build /tmp/*.whl /tmp
RUN python -m pip install /tmp/*.whl

CMD tail -f /dev/null
```

While being a simple solution, I was a bit surprised I didn't find a ready made solution like this. I thought it's worth sharing for python-ldap deployments in production, and in any similar case, where you have to build python packages yourself.

I hope it helps somebody out there.

Cheers!
Intro Text Animation Using CSS3 PURE
Tags: html, css, 100daysofcode, animation
Published: 2021-03-23 17:41:22

the day 93 of challenge #100DaysOfode

Intro Text Animation Using HTML5 & CSS3 

Demo : https://intro-text-css3.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day93
Multi-Select Dialogue in Flutter: The Unit Test Phase
Tags: flutter, testing, dart, gitconnected
Published: 2021-03-23 17:38:44

🧪 Are you lost in searching for ways to test an application in flutter?

💔Do you fear the word “test”? 

❓ Have you got no clue where to start? Are you looking for answers that would give you a birds eye’s view? 

Fear no more, you landed on the right spot 👍. 

This [article](https://levelup.gitconnected.com/multi-select-dialogue-in-flutter-the-unit-test-phase-1eaa291549ac) is a focused series to explore and learn about Android app testing using the flutter framework starting from unit tests to automated end-to-end tests.
4 Things you didn't know about text
Tags: webdev, tutorial, design, ux
Published: 2021-03-23 17:34:59

Hi there! 👋

Text is an essential part of most interfaces. It doesn’t matter if it’s a landing page or a web application.

Here are four things you probably didn’t know about it. 

Understanding them might help you to make your texts look nicer and more balanced.

Lest level up your UI skills 💪

## Rags

A “rag” in typography is the uneven side of a paragraph where the text is aligned on the other side. So if the text is right-aligned, the rag is on the left side and vice-versa.

A poor rag creates distracting shapes in the white space of the margin.

Compare these two images.

![Rags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4t3crur15h1mlv3li6o9.png)

The left text feels less balanced than the right. To fix rags, you can adjust the text width and hyphenations.



## Rivers

Rivers are the white gaps that can appear in the text (especially justified ones) when there is too much space between words on consecutive text lines.

Usually, they appear when you justify your text. So you can easily fix it by aligning the text to the left side.

![Rivers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yvjmfhzaes81ix6gvaq.png)



## Widows

A widow is a paragraph-ending line that falls at the beginning of the following page or column, separated from the rest of the text.

![Widows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l99tl7fpji4bopu7pwo.png)

One of the possible solutions to avoid widows is to insert an early page break.



## Orphans

Orphan is a paragraph-opening line that appears at the bottom of a page, separated from the rest of the text.

Orphans and widows are very similar to each other. 

I found controversial definitions and mnemonic rules to remember who is who. One of the funniest was “Widows have a past but no future, while orphans have no past but a future.”

![Orphans](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q69i6lsiz6ynqze7b0pf.png)

But it doesn’t matter much what do you call them. It’d be better if you fix them. Same as for widows, page break can help.


## Conclusion

These four problems described above make text un-balanced and look no that good as it could be.

I’m pretty sure it won’t matter that much if you have a widow or rivers in the text on your landing page. 

**BUT REMEMBER**: Interface consists of many things. Everything can look good and bad. Everything can be convenient to work with and not that convenient. 

When we see an interface, we experience certain emotions. And if you cared about most things, it’d be a pleasure for the user.

There is a special effect that describes this behavior: 

“The aesthetic–usability effect describes a paradox that people perceive more aesthetic designs as much more intuitive than those considered to be less aesthetically pleasing.”

If you want to learn more, [follow me on Twitter](https://twitter.com/vponamariov), I tweet a lot about UI/UX stuff :)
YouTube to MP3 Downloader | Rookie Week of Python Day 04
Tags: python, beginners, youtube
Published: 2021-03-23 17:33:33

Who doesn't love YouTube downloaders and MP3 conversion sites? They were the backbone of every teen's MP3 player library not too long ago, before Spotify or Apple Music, but have you ever wondered how these sites worked? In this tutorial we will create a python script to create our very own YouTube to MP3 convertor so you too can download your favourite videos and podcasts in audio form

##### Disclaimer

Technically, it is not illegal to convert a YouTube video to MP3 - but it is illegal to download a copyrighted music video.


# YouTube to Audio Converter/Downloader
first of all we will need two prerequisites for this program. We need to pip install the `youtube_dl` library and the latest `ffmpeg` build for your specific operating system.

`pip install youtube_dl`

now to import the libraries needed for the program

```python
import youtube_dl
import sys
```

declare a variable `ydl_opts` (in this case) to specify the specifications of the file you want to download. in this case we will select the `format` to be the best audio format available, the `prefferedcodec` will be mp3 and the rest can be left as default as shown here.
```python
ydl_opts = {
    'format': 'bestaudio/best',
    'postprocessors': [{
        'key': 'FFmpegExtractAudio',
        'preferredcodec': 'mp3',
        'preferredquality': '192',
    }],
}
```

Write an `if` statement to download the file and pass the values of the `ydl_opts` variable to `youtube_dl`
```python 
if __name__ == "__main__":
    with youtube_dl.YoutubeDL(ydl_opts) as ydl:
        filenames = sys.argv[1:]
        ydl.download(filenames)
```

Run your command terminal and execute the python program and append the command line with the URL of any YouTube video (make sure to include "https://").

```python youtubetomp3.py <URL>```

Run the program and if everything goes smoothly you should see the following output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjatb6m4ndk1pijbbwm7.png)
The MP3 file will appear in the same directory as your program. Since my program is on my desktop you can see the downloaded file here.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4x92jnknpcq3t4lpx6l.png)

Thanks for reading, you can find the code on it's GitHub repo [here](https://github.com/thehannankhan/youtube-to-mp3-converter).
Video: Visualize the architecture of your Java app, in VS Code, in 2 / minutes
Tags: java, architecture, webdev, vscode
Published: 2021-03-23 17:20:37

[AppMap](https://marketplace.visualstudio.com/items?itemName=appland.appmap) is an open source VSCode extension which helps you improve your code by showing you how it really behaves, feature by feature, as you work. It does this by automatically generating beautiful, interactive maps of architecture and code behavior right in your editor.

This 2 ¹/₂ minute video, made by the talented (but mysterious) [@appmapjava](https://twitter.com/appmapjava), shows how install the AppMap extension, how to configure it to map your Java code, and how to navigate your code using the interactive diagrams.

It uses the Spring Pet Clinic as an example program. 

For full usage instructions, check out [appmap-java on GitHub](https://github.com/applandinc/appmap-java#appmap-for-java).
GraphQL Cache Updates Made Easy
Tags: angular, graphql, typescript, node
Published: 2021-03-23 17:05:53

Apollo Graphql comes with built-in support for caching which can be used as a state management system (which they recommend). There are a couple of different ways to update cache after an update in this state management system:

- Refetch query
- Built-in normalization
- Update callback

This post will teach you when and how to do the different kinds of cache update strategies and show you some util functions to make cache updates as easy as a one-liner.

You can read the post [here](https://christianlydemann.com/graphql-cache-updates-made-easy/).