teleren/devto huggingface dataset:
CSS: Absolute center element
Tags: css
Published: 2019-11-20 20:41:33

---
title: CSS: Absolute center element
published: true
description: Trick to center an element inside its parent
tags: CSS
cover_image: https://cdn-images-1.medium.com/max/5500/0*zkFRAXH_pj6ELkuB
---

**TLDR:**
Learn how to center an element with position: absolute inside its parent.

## Introduction
You should probably be thinking, *“Why not using the rad CSS flexbox?”*. And you’re right! In almost all cases `display: flex` could work and escape you from some unnecessary headache.

However, sooner or later you’ll need to hack the system and position a poor element using `position: absolute`. Then, maybe you’ll figure out that it’s a little tricky.

I’m here to rescue you, buddy‍!

![Funny Superman GIF](https://media.giphy.com/media/10bKPDUM5H7m7u/giphy.gif)

## 👎 The Wrong Way

You open your favorite code editor(VS is mine) and the show starts!

```javascript 
.centered {
	position: absolute;									
  	left: 50%;
    top: 50%;
}
```

You’re so much excited about your awesomeness until you look at the final result!

![WTF!!!](https://cdn-images-1.medium.com/max/2000/1*9uC_kQPyzbBig4Z45vOUBw.png)
<figcaption>No! God damn No! Dat thing is no way centered!</figcaption>

And, that’s the exact time you wonder why you started coding in the first place. But as the curiosity takes place over the frustration, you start wondering: *“Why is that happening?”*

{% codepen https://codepen.io/dimitrisraptis96/pen/pmMXPY %}

## 👍 The Correct Way

You and, obviously, I (when I first came into that centering issue) are missing a crucial detail! 

Considering a 2-D plane, the center point (0,0) of the coordinates system is not the center of your element. *It’s the __top left corner__!* Now it should be clearer why the item looked far from the center in the first place.

But how can you change that? *It’s a cinch* and I’m gonna show you the proper way.

![](https://cdn-images-1.medium.com/max/2000/1*QNFtxMkV_282c1W9qd3NIA.png)

The key point is to subtract half of the element’s width on the X-axis (horizontal) and half of the element’s height on the Y-axis (vertical). Then, your element has to be absolutely centered inside its parent.

 <iframe src="https://medium.com/media/d8c8d0211f14a51e4a90fda8e482b90c" frameborder=0></iframe>

```javascript
.centered {
	position: absolute;									
  	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
```

The CSS implementation is even easier, thanks to the `translate()` function.
>  The `translate()` function repositions an element in the horizontal and/or vertical directions.

Thus, by using `translate(-50%, -50%)` you’ve removed the undesired offset using only __21 characters__. Amazing!!! 👏

![Just Do It!!!](https://cdn-images-1.medium.com/max/2000/1*jJDmT_Yw4XYdSMc1KbE57g.png)

{% codepen https://codepen.io/dimitrisraptis96/pen/YbmoJE %}

## Conclusion

When the Flexbox module is not an option, you should not be afraid to play with the `position` property.

To be honest, I’m really curious to learn some even __more awkward ways to center__ my elements. Feel free to show us how in the comment section below 👇
30 Days Of Python Challenge
Tags: python, javascript, react, mongodb
Published: 2019-11-20 20:31:42

I have been teaching JavaScript, React, Node and MongoDB in a coding school for the last two years. I helped quite a lot of students to become a software developer. Helping and educating people is the only satisfying job I have ever found so far. 

I have decided to reach to many people who has a desire to become a programmer, in order to do that I have launched a 30DaysOfPython programming challenge which is completely beginner friendly. Give it a try!
https://www.linkedin.com/feed/update/urn:li:activity:6602607725681655808/
👥 Join the telegram channel by clicking https://lnkd.in/eE5Qgqd.
⏱️ Duration: 20 Nov - 20 Dec,  2019
💻 Challenge Material on Github:https://lnkd.in/epW6d_U
Good Luck!! ✨
Discovering Software & Tech Conferences
Tags: techtalks, eventsinyourcity, sideprojects
Published: 2019-11-20 20:01:11

I am one of those people who likes and enjoys attending and watching tech conferences. 

I did not find any website where I could easily search and find events. So I wanted to create the best platform to find Software and Tech Conferences.

One year ago, I started working on www.softwaretalks.io and I created a web application where everyone can search and find the next tech event by continent or city.

My next goal is to extend not only to Conferences but also to regular local events. 

I am curious how other Devs here find tech conferences or events?
Personal Portfolio Webpage
Tags: codepen
Published: 2019-11-20 19:38:02

<p>This is a personal portfolio webpage by Batsou Eleftheria for herself.</p>

<h2>It's all custom.</h2>

<p>This project is built during my learning in FreeCodeCamp</p>

<p>User Story: I can access all of the portfolio webpage's content just by scrolling.</p>

<p>User Story: I can click different buttons that will take me to the portfolio creator's different social media pages.</p>

<p>User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)</p>

<h2>User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.</h2>

<p>more info about the project and specifications: 
<a href="https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage" target="_blank">https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage</a></p>

{% codepen https://codepen.io/MistyCarrots/pen/MWWxJmd %}
Something similar to #Hacktoberfest for Supporting Open Source projects?
Tags: discuss, opensource, contributorswanted, hacktoberfest
Published: 2019-11-20 19:24:36

Hi all,

do you know of similar events? Didn't know of **#Hacktoberfest** until this year and I got quiet some contributions for an Open Source project of mine. It was so awesome after working for years with some breaks alone on the project. Sometimes I've worked months long on new features after work and on weekends, because I have this intrinsic, sometimes crazy motivation somehow :-)

**We really got some stuff finished and it helped the project a lot :-)**

Kind regards
Johannes
L-system visualization experiment
Tags: react, gatsby, javascript, showdev
Published: 2019-11-20 19:23:56

##Hi there,

from a long time, i plan to write an **l-system** visualizer, to understand it how they are related to fractals, be able to write better/more readable code in the process, and to create stunning visual clips.

bout i stuck a bit on the ui, i want it to be mobile friendly, and maybe already even in alpha there are too many control options.

i would welcome any feedback, even architectural as well.

the gist of it maybe needed to be ported to _OffscreenCanvas_, and _RequestAnimationFrame_.

So have a look at it, i'm at utmost interest what shapes you can make with it.

[go space fill with some curves](https://spreadbow.com/lindenmayerSystems/)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0hwx0u6vs0dv40t8xwyb.png)

(the three checkboxes are: 1. - clear before draw, 2. - clear remaining timeouts, 3. draw full shape at once)

{% github andrasnyarai/expersonal %}
Parcel Forwarding Company Software Platform
Tags: shopping, shipping, angular, spring
Published: 2019-11-20 19:11:51

I am hoping to find some collaborators for a platform that I am working on, for parcel forwarding.  If someone wants to purchase something that doesn't ship to their country or their address for whatever reason, they ship it to us and we forward the package to them.  The customer needs to be able to make an account, calculate the cost of shipping-forwarding, pay, receive a few automated emails, etc.  Planning to use Angular8 for the front and Spring and Postgres for the back.  Let me know if this sounds like fun and you want to jump on board!


https://findcollabs.com/project/parcel-forwarding-company-software-platform-IrdS6LIYDQcCa2FpHJZd
Convert a react app from flow to typescript without losing git history
Tags: react, typescript, flow, javascript
Published: 2019-11-20 18:35:54

## start with creating a new branch
```bash
git checkout -b "moving-from-flow-to-ts"
```
## Rename files from `js` to `ts[x]`

Lets start with renaming all `.js` files to `.ts` with the following command:
```bash
ls ./src/**/*.js | 
    while read line; do git mv -- $line ${line%.js}.ts; done;
```

Then, assuming all files importing react are jsx files, rename them from `.ts` to `.tsx`
```bash
find ./src -type f -name "*.ts" |
    xargs grep 'import React[ ,]' |
    cut -d: -f1 |
    uniq | 
    while read line; do git mv -- $line ${line%.ts}.tsx; done;
```

Commit to save the new file names
```bash
git commit -m "rename js files to ts and tsx"
```

## Move to typescript

Remove flow-bin from package.json
```bash
npm uninstall flow-bin
```

Then, install and initialize typescript
```bash
npm install --save-dev typescript @types/react @types/react-dom && tsc --init
```

**Note:** If you use decorators, enable the `experimentalDecorators` flag in `tsconfig.json` before running the next step

Commit to save the changes
```bash
git commit -m "replace flow with typescript"
```

## Convert all flow types to typescript types
Fix types in all tsx files
```bash
npx flow-to-ts --inline-utility-types --write -o tsx ./src/**/*.tsx
```

Fix types in all ts files
```bash
npx flow-to-ts --inline-utility-types --write -o ts ./src/**/*.ts
```

## Next step
Run `tsc --noEmit` to see compilation errors, and fix them manually
About Falcon Hybrid Solutions
Published: 2019-11-20 16:57:39

Falcon Hybrid Solutions was founded in 2010 by Mark Sokol as Prius Rebuilders. As an electrical engineering student and avid hobbyist, Mark Sokol, while studying and experimenting with Hybrid Automotive Technology, was the beginning of filling a need for many people with hybrid vehicles. Beginning with a small basement shop and growing rapidly to a full-fledged production lab, Falcon Hybrid Solutions has become the largest reconditioning and rebuilding plant of Hybrid Drive Batteries in the USA. All of the technology and processes used in Falcon Hybrid Solutions’ rebuild and reconditioning of the batteries have been developed and perfected here at their lab, including much of their test equipment.
Initially, Falcon Hybrid Solutions’ business focused only on the battery for the Toyota Prius which was the most popular hybrid car in the USA, and perhaps still is. Falcon Hybrid Solutions has grown very quickly and battery demand for many other models is now being addressed. Falcon Hybrid Solutions has launched the Falcon Hybrid Solutions brand name to reflect its newly expanded battery product line.
Falcon Hybrid Solutions now operates in a brand new facility at 73 Wagaraw in Hawthorne, NJ in a 3000 SF workshop and 20,000 SF warehouse to accommodate their inventory and employees.
Boosting your `kubectl` productivity @ KubeCon
Tags: kubecon, kubernetes, kubectl, tips
Published: 2020-01-16 18:23:14

---
title: Boosting your `kubectl` productivity @ KubeCon
published: true
date: 2019-11-20 18:23:16 UTC
tags: kubecon,kubernetes,kubectl,tips
canonical_url: https://salaboy.com/2019/11/20/boosting-your-kubectl-productivity-kubecon/
---

Oh my.. that was a big stage and a very very large audience, but it was totally worth it! I kinda rushed in the end but I got a lot of positive feedback about the content and a lot of kudos to the [@learnk8s](http://twitter.com/learnk8s) guys who are doing an amazing job.

- ![](https://salaboy.files.wordpress.com/2019/11/salaboy-kubecon-7.jpg?w=510)

- ![](https://salaboy.files.wordpress.com/2019/11/salaboy-kubecon-5.jpg?w=1024)

- ![](https://salaboy.files.wordpress.com/2019/11/salaboy-kubecon-4.jpg?w=1024)

- ![](https://salaboy.files.wordpress.com/2019/11/salaboy-kubecon-3.jpg?w=680)

- ![](https://salaboy.files.wordpress.com/2019/11/salaboy-kubecon-2.jpg?w=680)

- ![](https://salaboy.files.wordpress.com/2019/11/salaboy-kubecon-1.jpg?w=1024)

<iframe type="text/html" width="960" height="540" src="https://www.youtube.com/embed/vVAFctQP1Vg?version=3&amp;rel=1&amp;fs=1&amp;autohide=2&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent" allowfullscreen="true" style="border:0;"></iframe>

Here some useful links about the projects that I’ve mention during the presentation:

- [@LearnK8s](http://twitter.com/learnk8s) Article: [https://learnk8s.io/blog/kubectl-productivity/](https://learnk8s.io/blog/kubectl-productivity/) 
- KubeCTX and KubeNS: [https://github.com/ahmetb/kubectx](https://github.com/ahmetb/kubectx)
- AutoGen Aliases: [https://github.com/ahmetb/kubectl-aliases](https://github.com/ahmetb/kubectl-aliases) 
- Krew: [https://github.com/kubernetes-sigs/krew](https://github.com/kubernetes-sigs/krew)
- KubeCtl KubeCon Plugin: [https://github.com/salaboy/kubectl-kcon](https://github.com/salaboy/kubectl-kcon)

Also on the [cd.foundation](http://cd.foundation) summit a quick talk about why [Jenkins X](http://jenkins-x.io):

<iframe type="text/html" width="960" height="540" src="https://www.youtube.com/embed/1bGgEM_YXwM?version=3&amp;rel=1&amp;fs=1&amp;autohide=2&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent" allowfullscreen="true" style="border:0;"></iframe>
Securely Transfer Files from/to a Remote Server using SCP
Tags: linux, ubuntu, productivity, beginners
Published: 2019-11-20 18:20:52

---
title: Securely Transfer Files from/to a Remote Server using SCP
categories:
- linux
- ubuntu
- productivity
- beginners
tags:
- linux
- ubuntu
- productivity
- beginners
category: blog
canonical_url: https://sharmapacific.in/securely-transfer-files-from-slash-to-a-remote-server-using-scp/
---

The [SCP](https://en.wikipedia.org/wiki/Secure_copy) ( Secure Copy Protocol ) is a network protocol, based on the BSD RCP protocol, which supports file transfers between hosts on a network. SCP uses Secure Shell (SSH) for data transfer and uses the same mechanisms for authentication.

Using SCP you can copy file/directory :
- From your local machine to a remote system.
- From a remote system to your local system.
- From one remote system to another remote system from your local system

While transferring data using SCP, files and password is encrypted, so that anyone snooping on the traffic doesn’t get anything sensitive.

Things to keep in mind before the start - 

- The scp command relies on ssh for transferring the data, so it requires an ssh key or password to authenticate on the remote systems.
- To be able to copy file/directory you must have at least read permissions on the source file and write permission on the target system.

### Syntax
The syntax for the **scp** command is:
```
scp [options] username@source_host:directory/filename  /where/to/put
```
In the below examples I Recursively copying entire directories -
### Examples
 
**From remote to local** - 
```
scp -r username@ipaddress:/directory/to/send /local/where/to/put
```

**From local to remote** -
```
scp -r /local/directory/to/send username@ipaddress:/where/to/put
```
**Copying between two remote hosts** -
```
scp -r username@ipaddress1:/file/to/send username@ipaddress2:/where/to/put
```
You can use **scp** with the following options according to your requirements.


### Options

**scp –P port** : Generally 22 as a default port of scp. You can also specify a specific port.
**scp –p** : An estimated time and the connection speed will appear on the screen.
**scp –q** : Disable progress meter and warning.
**scp –r** : Recursively copy entire directories.
**scp –v** :  Print debug information into the screen. It can help you debugging connection, authentication and configuration problems.
**scp -c** : By default SCP using “AES-128” to encrypt files. If you want to change to another cipher to encrypt it, you can use “-c”.


I hope that you now have understood how to make the best use of **scp** command to securely transfer files between the systems.

If you have any suggestions on your mind, please let me know in the comments. And if you know any other awesome **scp** command, do share with us.
Ship your requirements.txt
Tags: python, packaging, dependencies
Published: 2019-11-20 18:04:28

Dependencies: they're always changing.

Software is in such continuous flux.  With this stream of change, maintainers can take a helpful step to inform users of dependency versions at the time of a release.  By including a `requirements.txt` in a release, a maintainer can notify users of the state of the world when the package was released.

Python packages (or "distributions" if you want to use the official term) set dependencies in the `setup.py` file.  A rule of thumb is to exclude version numbers in `setup.py` to avoid causing conflicts between packages.  If my package says it requires `requests==2.10.0` and your package says it requires `requests==2.9.2`, then users can run into trouble.  Users who want to have to both my package and your package may run into trouble when installing.

By including a `requirements.txt` when you release a Python package on PyPI, you can tell users "Here are the versions of dependencies that I used when I declared my software fit for release." Many strange environments exist in the world and including your dependency versions in a separate file can help future software archeologists figure out how to make your software work in strange places.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/blog/2016/ship-your-requirements/).
Minhas notas de estudo sobre Git
Tags: git, github
Published: 2019-11-20 13:58:42

---
title: Minhas notas de estudo sobre Git
published: true
description: 
tags: git, github
---

# Controle de versão

O git é capaz de identificar se a versão do código a ser enviada é a mais recente ou não, caso tenha código mais recente no servidor, as alterações local não serão enviadas até que __o conteúdo local seja atualizado__ com a versão que esta no servidor.

#### Adicionar todos os arquivos:
```
git add .
```

#### Commit:
```
git commit -m "Criando arquivo”
``` 

- A boa prática pede para colocarmos mensagens descritivas, evitando que fiquem muito grandes.

#### Estados:
- HEAD: Estado atual do nosso código, ou seja, onde o Git nos colocou
- Working tree: Local onde os arquivos realmente estão sendo armazenados e editados
- index: Local onde o Git armazena o que será commitado, ou seja, o local entre a working tree e o repositório Git em si.

#### Lista todos os commits já feitos:
```
git log
``` 

#### Verifica endereço remoto do repositório:
```
git remote -v
``` 

- O arquivo .gitignore tem uma função especial, de listar os diretórios e arquivos que devem ser ignorados ao realizar o commit.


#### Envia os arquivos para o repositório remoto:
```
git push origin master
``` 

#### Baixa as atualizações presentes no repositório remoto:
```
git pull
```

#### Alterar endereço remoto:
```
git remote set-url origin git@github.com:vitordangelo/xxxx.git
```

#### Lista todas as branchs:
```
git branch
```

#### Cria novo branch:
```
git branch titulo
```

#### Mudar para determinada branch:
```
git checkout titulo
```

#### Cria uma nova branch e já muda pra ela:
```
git checkout -b lista
```

#### Commit pra juntar os arquivos de um branch com o master: 
```
git commit merge homologation
```

- Gerar um commit a mais, de merge, dependendo da estratégia utilizada para gerar os commits, isto pode acabar atrapalhando ou "poluindo" o log.

- git rebase titulo, e o Git pegará os commits na branch título, atualizando master, que possui todos os commits contidos em titulo, além do commit que havia nela mesma. Deste modo, geramos uma única linha, sem confusões.

#### Juntar todos os commits em uma branch: 
```
git rebase titulo
```

#### Salva as alterações em um local temporário sem fazer commit: 
```
git stash
```

#### Lista todas as alterações salvas em stash: 
```
git stash list
```

#### Recupera as modificações salvas na stash: 
```
git stash apply 0
```

#### Recupera as modificações da stash e a remove da lista: 
```
git stash pop
```

#### Viaja no tempo, indo para o estágio desejado: 
```
git checkout ea539b3
```

#### Volta para o estágio atual: 
```
git checkout master
```

#### Juntar commits: 
```
git rebase -i ea539b3 (até que nível deseja juntar)
```

Para fazermos isto, substituiremos os pick por s
Com isso, os commits se tornarão um só, o único que possui pick
This makes no sense ( ANOTHER small happy post)
Tags: happypost
Published: 2019-11-20 17:53:48

Ok HOW am I featured AGAIN? 
I'm confused As you can tell SO Confused I'm not even gonna say my tagline. If you've seen my posts you'll clearly know it.

And How Does Peter see it almost Every Time? Its Amazing! It lasts Every SINGLE post I make and it makes me feel special...

I don't if this is a bug or it's just happening But I'm glad it exists 😂

Here's a little screenshot
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gt8ap61mg0c38fjtenfg.png)
Cool Dev gif 
Tags: devto
Published: 2019-11-20 17:45:10

Hello I'm Ibrahim from TGD Dev ™ So as i Was browsing I found this cool gif of Dev It's the gif you get when U use an invalid hashtag or something else It's pretty cool so I've Just Taken it from the sites code to give it to you! Hope U enjoy
Nice job Dev staff team 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2p24444g94djp87cxkhw.gif)
New to my content? Here's A quick List of what I do!
Tags: idontknowwhattohashtag
Published: 2019-11-20 17:40:22

Hello I'm Ibrahim From TGD Dev ™

If you're viewing this you've probably never seen my content!
So here's a quick list of what I do

- Small happy posts!

- Reviews on things ( I have an entire series of reviewing things called why choose i recently started doing good research Find It By Searching #WhyChoose

- Awkward posts

- always Say Hello I'm Ibrahim From TGD Dev ™

- other stuff

If you like those things Consider Following Me I'll See You Later Now Bye!
Wow, I'm Still Featured! (Small happy post again)
Tags: happypost
Published: 2019-11-20 17:32:27

I just checked Dev scroll down for literally 6 seconds and I'm still featured!
Here's a screenshot
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b61c4x4e371apdp0gvn7.png)

Im Worked so hard on it! I'll definitely Keep making these!