teleren/devto huggingface dataset:
Como centrar un elemento en vertical y horizontal con CSS
Tags: css, html, javascript
Published: 2019-08-22 16:17:55

Cuando somos nuevos en el mundo del desarrollo web, uno de los desafíos mas comunes al momento de realizar maquetacion es centrar elementos(Vertical y Horizontal) con respecto a su contenedor. Suele ser una tarea sencilla si ya tienes experiencia, pero si ese no es tu caso te quiero mostrar unas formas de hacerlo de manera muy fácil.

#### Como centrar usando position

Si tubieramos el siguiente caso, donde un elemento padre tiene un elemento hijo y quisieras que su hijo estubiera centrado con respecto a su padre.

```html
<div class="padre">
    <div class="hijo"></div>
</div>
```
Usando position lo hariamos de la siguiente manera

```css
.padre {
    width: 200px;
    height: 200px;
    background: red;

    position: relative; /*El padre debe estar posicionado (relative, absolute o fixed)*/
}

.hijo {
    width: 50px;
    height: 50px;
    background: blue;

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

Como podemos observar el hijo lo estamos posicionando absolutamente, eso quiere decir que se posicionara con su elemento padre mas cercano en este caso el `div` `.padre`, después movemos al hijo 50% en izquierda y 50% en derecha, esto centra al hijo con respecto a su vértice superior izquierdo. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fd4gi18sv8dwjg2czuoz.JPG)

Pero esto no es lo que queremos, nosotros queremos que sea un centrado absoluto. Para eso usamos la propiedad `transform` para mover el `.hijo` -50% en horizontal y vertical con respecto a su tamaño,  y con este pequeño truco lograríamos el centrado.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c2dspgk9l5936g91nxuf.JPG)


#### Como centrar usando flexbox

Teniendo en cuenta el mismo caso anterior del ``div padre`` y el `div hijo`, usando  `flexbox` solo es necesario aplicar estilos al `.padre` de la siguiente manera.

```css
.padre {
    width: 200px;
    height: 200px;
    background: red;

    display: flex;
    justify-content: center;
    align-items: center;
}
```

De esta manera sencilla usando flexbox lograriamos el mismo resultado

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c2dspgk9l5936g91nxuf.JPG)






Espero que estos pequeños trucos sean de mucha utilidad y te sirvan para seguir ganando experiencia en el desarrollo web.
Simplicity to the Rescue (My New Personal Site)
Tags: career, discuss, jokes, webdev
Published: 2019-08-22 16:16:02

Bored with the complexity in our life... No, let me start over:

*...our super high technologically smart fast pacing enormously artificially intelligent algorithmic innovative life...*

Long story short: I decided to make my [new personal site](https://ttt-fifo.github.io/) simple.

**What do you think? Simple, no?**

**P.S:** For the creation I used the cutting edge newest versions of these enormously almost artificially intelligent tools:

* vim (the latest cutting edge version)
* an unknown to me until now command line tool, called 'boxes' (unknown version)

Here you can see a [screenshot of my high-tech development IDE](https://dev.to/tttfifo/comment/eaf4).

**I would love to hear from you what do you think about my site, also about the simplicity or complexity in our life, the universe and everything.**
if you get a random useless error using mvn and testng about certs
Tags: testng, java
Published: 2019-08-22 16:07:47

---
title: if you get a random useless error using mvn and testng about certs
published: true
description: 
tags: testng,java
---

This is the error I was getting

```
There was an error in the forked process
sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
org.apache.maven.surefire.booter.SurefireBooterForkException: There was an error in the forked process
sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
...

```

Seriously not helpful when trying to run a testng test using maven and surefire.

To fix it I changed the xml header in the testng.xml file. Sigh.

There is no reason for this type of stuff. There are parts of Java programming that are a dumpster fire and this is a good example of it. No way text in an xml file should cause such an error. Just a complete failure on the part of Java/testng/maven/surefire? Someone in the chain does not actually want you to use their product... who knows where the failure lies.

I changed the header from the header found on the testng website to this

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd" >
```

And no more error. :(
Callback's
Tags: javascript, node, callback
Published: 2019-08-22 15:54:18

---
title: Callback's
published: true
description: Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.
tags: JavaScript, JS, NodeJS, callback
---

---


Quando falamos em callback, acredito que talvez seja uma coisa um pouco confusa na maioria das definições o callback é uma função chamar outra função para trazer o resultado da função final.
Bom mas como isso funciona, vou mostrar isso da maneira mais simples e como trabalhamos com as convenções de callback
No MDN temos a seguinte definição:
Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.


---

Show me the code!
Vamos imaginar um cenário onde temos uma function que vai retornar um objeto com um nome de usuário e um id, essa function vai simular como se estivessemos fazendo uma requisição de uma API, certo?

**Teremos algo nesse formato:**

{% gist https://gist.github.com/DiegoTeles/19af9206317306bdede2b7502fdcd9fd %}

Se a gente quiser executar essa function ela vai trazer um resultado undefined devido ao escopo que esta sendo executado essa function.
Ai que usamos as famosas chamadas callbacks e vamos seguir a sua convenção.
Vamos entender o como o callback se comporta:
Na função de callback passamos 2 parâmetros, primeiro passamos o **Error** e logo em seguida nosso **Success**, dentro dessa função teremos nosso console.log().

{% gist https://gist.github.com/DiegoTeles/9c656c85f1936312ba699b066dec0f78 %}

Mas se executarmos ele não vai acontecer nada, porque precisamos passar a chamada desse callback na *function obterUser()*, nosso código ficará assim:

{% gist https://gist.github.com/DiegoTeles/0f6173034507d137c76e918d331daadc %}


Legal! E assim meu código vai compilar e trazer meu resultado? A resposta é não, porque precisamos de mais uma function para chamar a função e trazer nosso resultado:
{% gist https://gist.github.com/DiegoTeles/27876b5a4697504bc537bff4d956a0a6 %}

O que acontece aqui é o chamado Hoisting que faz com que nossa função "*obterUser(meuCallback)*" seja executada primeiro pela engine do JavaScript.
Para nossa tratativa de erro podemos fazer o seguinte na nossa função de **obterUser()**:

{% gist https://gist.github.com/DiegoTeles/e31e14294ca643da8b489d743359cc8f %}

Ao rodarmos esse código teremos como resultado:

`Meu Usuário { id: 1, nome: 'Diego Telles' }`

Regras do Callback:
- Por padrão o parâmetro de callback sempre será passado por ultimo
- Sempre passamos primeiro o Erro e logo em seguida o Sucesso

É isso galera, espero que ajude a tirar algumas duvidas!
Enabling Sitecore Context in HTTP Handlers
Tags: sitecore
Published: 2019-08-22 15:43:13

A project I'm working on is to perform a migration from a custom ColdFusion system to Sitecore. The client routes all their links through an **index.cfm** file with an ID parameter that has a formulation to get a SQL primary key. So I need to intercept calls to index.cfm and route them appropriately. Fortunately, there's a way to do this in the web.config using the handlers:

```
    <system.webServer>
        <handlers>
            <add verb="*" path="index.cfm" type="Foundation.Core.Handlers.LegacyItemResolver, Foundation.Core" name="Foundation.Core.Handlers.LegacyItemResolver" xdt:Locator="Match(path)" xdt:Transform="InsertIfMissing" />
        </handlers>
    </system.webServer>
```

One catch with this, however...if you want to do anything with the Sitecore context, you'll find it's null. Basically, we're too early in the process to get the context. Yet if you look in the handlers, you'll see a MediaRequestHandler that, if you use dotPeek to check out the reference, *does* use the Sitecore context. So how did that work? Well, I had to ask around...

{% stackexchange 20600 sitecore %}

To summarize the answer from JammyKam, I had to add a custom handler entry in a Sitecore patch file:

```
<configuration xmlns:set="http://www.sitecore.net/xmlconfig/set/">
    <sitecore>
        <customHandlers>
            <handler trigger="index.cfm" handler="cfm_redirect.ashx"/>
        </customHandlers>
    </sitecore>
</configuration>
```

Then in the web.config entry, instead of the **path** attribute being set to index.cfm, set it to **cfm_redirect.ashx**.

Now in my LegacyItemResolver, this code will display the appropriate data:

```
namespace Foundation.Core.Handlers {
    public class LegacyItemResolver : IHttpHandler, System.Web.SessionState.IRequiresSessionState {
        public void ProcessRequest(HttpContext context) {
            string database = Sitecore.Context.Database.Name;
        }
    }
}
```
Flutter/Dart - adding a value of a list to a list 
Tags: flutter, dart
Published: 2019-08-22 15:38:14

that is,
```
...
```

Yep, that's it. That's the code. This is the spread operator.

Let's assume you have a list "List", and you want to take the value out of this list and add those value to the surrounding list. It will look something like this,
```
children: [
  ...List

]
```
above will take out the value inside the List and add it to the children:
Prerender your SPA using Netlify For Better SEO
Tags: javascript, webdev, react, cms
Published: 2019-08-22 15:29:44

For those of us who've written and deployed ReactJS SPAs (single page applications) only to find that they don't have the best SEO, this article is for you.

There is a really simple fix that doesn't involve turning on server-side rendering.

First of all, if you haven't tried Netlify, I encourage you to do so. It's a free service to get running on, and it integrates directly with Github - you can even login using your Github credentials.

My pal James Vidler has a [really good article](https://help.agilitycms.com/hc/en-us/articles/360032203552-Deploying-your-Agility-CMS-Create-React-App) that describes getting your site deployed to netlify from the command line using the cli.

It's basically as simple as this - assuming your build output is in the /build directory:


```
> npm run build
> npm install -g netlify-cli
> netlify login
> netlify deploy --dir=build --open
```

I encourage you to read [Vidler’s article](https://help.agilitycms.com/hc/en-us/articles/360032203552-Deploying-your-Agility-CMS-Create-React-App) on this to get running in netlify. Once you have that going, if you actually login to Netlify itself, you’ll see some additional Settings once you click on Settings > Build & Deploy
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i7mmm1cdmnjnvk2nw7r5.png)

Scroll down until you see the section on Prerendering.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u4gn3c6deoyxzv180hnu.png)

This service is [documented here on Netlify](https://www.netlify.com/docs/prerendering/), but the long and short of it is that whenever a bot is detected trying to hit your site, it gets served a prerendered version of the site.

As an example, here is the source of my test SPA normally:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3v9v3z977yspne653pc.png)

It’s not very SEO-friendly, to say the least.

Now let’s use Chrome’s developer tools to set my user-agent and we can pretend to be the Google search bot. You’ll have to turn on the “Network Conditions” tab to do this.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/60rg2f3abi826p0xgt5e.png)

Now, you can set your user agent easily.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o4y75dhwmu3qh7ujeiob.png)

Let’s refresh the same page and see what we get.

Looks much better in terms of SEO.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hvt03wan8v3ym2jc8528.png)

Now, as long as you are rendering decent <head> tags and content, you should be good to go!

---

FYI - I work for [Agility CMS](https://agilitycms.com/) - use it for free with React + Netlify!
Are there functions similar to Ruby's `dig` in other languages?
Tags: ruby, discuss
Published: 2019-08-22 15:18:26

I really like using Ruby's `Array#dig` and `Hash#dig` operator (introduced in Ruby 2.3) to quickly and safely access deeply nested structures

I would love to see different versions of it in other languages so I can use them more too!

Here's how dig works:


Assuming we have an `orders` array that looks like this.
```rb
orders = [
  {
    id: 1,
    customer: {
      name: "Customer 1",
      phone: "1234"
    }
  },

  {
    id: 2
  },

# ...
]
```

We can easily navigate through this structure with `dig` like so

```rb
orders.dig(0, :customer, :phone) #=> "1234"
```

We can also not worry about any of the "in-between" objects not existing, as it will return nil as soon it finds something that doesn't exist.

```rb
orders.dig(1, :customer, :phone) #=> nil
```

It returns `nil` the moment it finds that `customer` doesn't exist, and it makes me avoid checking if keys exist every time I want to access a nested object.

What are some cool ways to access nested data like this in other languages? I ask because I want to learn and because I probably do it in overly-convoluted ways at the moment.

Thanks for reading!
Recommend a CMS
Tags: discuss
Published: 2019-08-22 15:17:07

---
title: Recommend a CMS
published: true
tags: discuss
---

I've been asked to build a small site for various non-profits - just a few pages, on of which includes blog posts. With that in mind, I'd like to add a CMS so they can update the site on their end. Are there any light-weight CMS that you'd recommend, one that won't cost too much to host?

My background is in the .NET stack but I use JavaScript (front end, haven't dived into React just yet), have some experience w/ PHP.

This is a side of web dev I'm new to, so any input would be welcomed. Thanks!
How to quit the perfect job?
Tags: career, help, discuss
Published: 2019-08-22 15:12:39

---
title: How to quit the perfect job?
published: true
description: How do you find joy in moving on to something "less" after the "perfect" job?
tags: career, help, discuss
---

*How do you quit the perfect job?*

In the past 6 years, I've had a key role in the creation of the most beautiful web architecture I've ever worked with.

It's simple, elegant, efficient, and an absolute joy to work on - and, above all, it's successful: turn-around time is fast, features live up to user expectations, defects are extremely rare and often quickly resolved.

I've had the joy of successfully teaching the principles, practices, values, patterns and techniques to a team, guiding them on a daily basis to successful, enjoyable, consistent work - the feedback has been almost exclusively positive, and negative feedback has almost always lead to durable improvements.

It's been deeply rewarding, on both a professional and personal level.

*In my 21 years of web development, I've never been more pleased with the work.*

But all good things come to an end.

I won't go into the reasons, which are personal - but after struggling with this decision, day and night, for weeks on end, I'm resolved: I have to quit and move on.

My question is, **how do you do that?**

I've been scouring the job boards, and it just seems like *everything* is going to suck in comparison: overly complex systems built on bloated frameworks, default architecture, code-generators, object/relational-mappers, tools and practices that generally go against everything I stand for and believe in.

I feel like I've been blessed and cursed all at once. I was lucky enough to arrive at a time when my employer was willing to rebuild from ground up - in my experience, that practically never happens. I don't live in a capital city, so startups are rare - and most startups just want rapid prototypes and quick entry to markets, anyhow.

*How do you move on after an experience like this?*

If you've been in a similar situation, any experience you can share would be greatly appreciated.

**Thank You!** ✨
render-bpmn: Upload and Display BPMN | CMMN | DMN Diagrams on Github
Tags: javascript, productivity, github, bpmn
Published: 2019-08-22 14:40:36

---
title: render-bpmn: Upload and Display BPMN | CMMN | DMN Diagrams on Github
published: true
description: Applications Collection: Render BPMN, CMMN and DMN files on GitHub
tags: javascript, productivity, github, bpmn
---

The [2019 Camunda Summer Hackdays](https://twitter.com/Camunda/status/1164197803792490502) was a good place to work on long-time planned projects which I had no time for the last months. After three days we built a good working prototype on how to render BPMN diagrams on GitHub. [Checkout](https://github.com/pinussilvestrus/github-bpmn) and leave some feedback or a star out there ⭐️.

### General Problem

It's currently hard to display BPMN files on GitHub. In the case of images, the application offers post-processing of the uploaded files in order to quickly display them. Unfortunately, this does not work for process diagrams. This kind of diagrams can be really helpful to outline feature requirements or bug root analysis. Right now, it requires to open these BPMN files in an external tool, as [bpmn.io](https://bpmn.io), to properly display them _or_ to convert the files to images.

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

### Hacking Prototypes

In the 2019 Camunda Hackdays we wanted to create several prototypes in order to automatically render BPMN files in GitHub repositories. In the [resulted repository](https://github.com/pinussilvestrus/github-bpmn) we provide these solutions. It solves the problem in two ways:

__Automatically render BPMN files in Issues and Pull Requests__

The self-hosted [probot](https://github.com/probot/probot) application offers an auto-rendering of uploaded BPMN files via bpmn.io. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t42rjzlna8a4lb96ddtu.gif)

__Automatically render BPMN, CMMN and DMN diagrams in repository file tree via hover__

You can easily include the resulted userscript via Tampermonkey or use the adapted Chrome extension.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fm1696p32yu2q0if807a.gif)

### Conclusion

The resulting project offers an easy way to quickly display your beloved BPMN, CMMN or DMN files in your GitHub repository. We [plan to increase the feature set](https://github.com/pinussilvestrus/github-bpmn/issues) soon, as long we find time for that. Feel free to try out the solutions, we'd love to hear some feedback ❤️ and receive some 🌟 on GitHub.
Daily Challenge #47 - Alphabets
Tags: challenge
Published: 2019-08-22 14:25:05

---
title: Daily Challenge #47 - Alphabets
published: true
series: Daily Challenge
description: replacing alphabets with number
tags: challenge
---
In today's [challenge](https://www.codewars.com/kata/546f922b54af40e1e90001da), you are asked to replace every letter with its position in the alphabet for a given string where 'a' = 1, 'b'= 2, etc.

> For example:

> `alphabet_position("The sunset sets at twelve o' clock.")` should return `20 8 5 19 21 14 19 5 20 19 5 20 19 1 20 20 23 5 12 22 5 15 3 12 15 3 11` as a string.


***
_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_

_This challenge comes from MysteriousMagenta on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_
How Do You Authenticate Your Users?
Tags: authentication, development
Published: 2019-08-22 14:17:40

---
title: How Do You Authenticate Your Users?
published: true
description: What's the best auth solution for different projects?
tags: authentication, development
---

There seems to be two paths for authentication: 

1. Build your own solution and manage salted/hashed passwords in your database. 
2. Use a third party service that hands your user data over to the third party. 

I'm curious what solutions developers tend to be more comfortable with and if I'm missing any options here.
My experience using Twitter Ads without credit card
Tags: internet, twitter
Published: 2019-08-23 11:28:23

---
title: My experience using Twitter Ads without credit card
published: true
tags: Internet,twitter
canonical_url: https://kevinhq.com/my-experience-using-twitter-ads-without-credit-card/
---

Years ago, I used Twitter Ads on my personal Twitter account. My purpose is just testing it. After using it for a while, I grow my followers there. Debit card During these periods, I used a VISA debit card as a payment method. After several successful payments, it declined the payment suddenly. Then, I contacted… [Continue reading »My experience using Twitter Ads without credit card](https://kevinhq.com/my-experience-using-twitter-ads-without-credit-card/) ![](http://feeds.feedburner.com/~r/kevinhq/~4/DBLOLkOBhZw)
It's going to take ___ to finish that task.
Tags: justforfun, game, productivity, fun
Published: 2019-08-22 14:06:26

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g6xlwtx1l7zakdpjqf8l.jpg)

A. Technical debt
B. Restarting the production server
C. The Rock 💪

Or suggest your own answer.
Download automatically files on a Telegram channel by terms
Tags: telegram, python
Published: 2019-10-04 10:56:31

---
title: Download automatically files on a Telegram channel by terms
published: true
tags: telegram,Python
canonical_url: https://daniele.tech/2019/08/download-automatically-files-on-a-telegram-channel-by-terms/
---

Automatically download files by a Telegram channel based on terms to search!

The post [Download automatically files on a Telegram channel by terms](https://daniele.tech/2019/08/download-automatically-files-on-a-telegram-channel-by-terms/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Sempre declare suas variáveis com let ou const
Tags: javascript, react, node
Published: 2019-08-22 13:40:44

![Sempre declare suas variáveis com let ou const
](https://thepracticaldev.s3.amazonaws.com/i/e2hyr5qaqtsa9ccjqwxg.jpg)

Sempre declare suas variáveis usando let ou const para não poulir o escopo global.


Não deixe de visitar o repositório do github com todas as dicas em emersonbrogadev/social-media-snippets.

[➜ Participe da nossa lista de desenvolvedores](https://emersonbroga.com/e/participe/?utm_source=devto&utm_medium=post&utm_campaign=2019-08-22)
[➜ Aprenda ES6](https://amzn.to/2J4XnLg)
[➜ Veja as dicas no Instagram](https://www.instagram.com/emersonbrogadev/)
[➜ Assista nosso canal no YouTube](https://www.youtube.com/c/emersonbroga/)
[➜ Curta nossa página no Facebook](https://www.facebook.com/emersonbrogadev/)
[➜ Não perca as atualizações no Twitter](https://www.twitter.com/emersonbrogadev/)
[➜ Veja os repositórios no Github](https://www.github.com/emersonbrogadev/)

=)