teleren/devto huggingface dataset:
Happy Podcast Day!
Tags: discuss, relax, hobbie
Published: 2019-10-01 01:20:44

---
title: Happy Podcast Day!
published: true
description: what are the podcasts that you listen?
tags: discussion, relax, hobbie
cover_image: https://pbcdn1.podbean.com/imglogo/ep-logo/pbblog4955851/PodLogo_png.jpg
---

Hello there! Happy podcast day! During my time of code, I use to listen to music and podcasts to focus and get in a good mood.

So usually I listen to happy music like Panic at the Disco, Bruno Mars, or even Disney music (don’t judge me if you ever sing let it go) haha, but podcasts are more to relax, and as a fan of movies and business I listen to this podcasts:

[The Rambling movie club](https://open.spotify.com/show/6RTAXB2c4hzWfABxMUaVWw?si=) 
Is a new podcast with an awesome host Jamie Dumayne and here you can find very good movies to watch, remember and share. Btw, I’m the guest on the episode that’s coming this Wednesday and I talk about Mexican culture. 

[Yo Business](https://open.spotify.com/show/18ljfRi8Ah8PPmvRvwFRW9?si=poKDzuHeSRenxEzP_hjzEQ)
This business podcast is made by two millennials in NYC and they just talk about real business and work so I feel that I can do little things and have some progress, I don’t feel stressed like with big successful business people so that’s good 😛.

So this are some suggestions that I hope you like, share if you have a podcast if you listen to some podcasts or whatever you want.

Hugs&HuskyLove 🐶
Did you ever struggle with Git?
Tags: discuss, git
Published: 2019-10-01 01:09:26

---
title: Did you ever struggle with Git?
published: true
description: 
tags: discussion,  git
---

I'm in my first job now, and it is a startup. The developers aren't top notch (me neither) but we get things done and learn together how to accomplish complex stuff. 
But there is one thing that we aren't coordinating quite right, that is the git repo.

It is messy, there are many commits in the dev branch that are not going to be in the master branch. We don't make branches specific for features, so almost every time something that shouldn't go goes to master branch. We mostly commit in the dev branch, which is not a good thing to do, and causes the problem that I stated before.

So, thing is, I think there is no uniform way to do this that everyone does, but there a few things that I started doing that helped a lot. For example, now I only develop in branches, and all of them are changes in a single specific feature. All branches come from master, so it avoids unexpected problems in production.

Still, there are sometimes a struggle, with merges, and conflicts. Because sometimes features touch each other, or people have the same idea over naming stuff. And it frustrates me a lot, because most of the time I need to fix things that are consuming time that I should be developing the feature I want to deploy.

How did you have a hard time with git? How do you manage avoiding it?
My first YT video
Tags: youtube, video, hobby, gaming
Published: 2019-10-01 00:37:18

Long story short, I'm about to start working on my newly created YouTube channel.

However, I'm not done with the name and picture of the channel and I'm open to suggestions.

Your like, subscribtion and watchtime is cordially appreciated.

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

https://youtu.be/ZITOaLMEvRI
A Career Switch
Tags: beginners, codenewbie, womenwhocode, womenintech
Published: 2019-09-30 23:45:57

(originally posted on 8/22/19)

Hey there, I'm Jazmin! I'm an aspiring software engineer and overall geek from NYC. 

Since studying software development, a question I've gotten quite frequently from people outside of tech is "what is a software developer/engineer?" and "why did you decide to become one?"

![](https://media.giphy.com/media/5HyVZlZYxJPy7IC5Cz/giphy.gif)

Describing programming can be difficult, especially if the person asking does not know much about tech or computers. As you can imagine, this makes explaining why I would want to learn how to code, even trickier. But, after much practice (mostly with my super smart, but non-techie dad), I've gotten it down to "I want to speak to computers and comprehend when they speak back". This is pretty much received with a chuckle sometimes, but almost always followed by curiosity. Curiosity is one of my favorite things because it is driven by a desire to understand. I believe when we take the time to truly "get" something, magic happens.

For the past 12 years, I guess you can say I've worked in the business of understanding -- humans! I've worked in mental health as a researcher, therapist and consultant, which more often than not requires a deep desire to "know" someone. Being a therapist, most of my time is spent taking that understanding and using it to help people. Often help means having clients develop, maintain, test or evaluate their feelings, and like writing code -- thoughts and behaviors.

Two years ago, I rediscovered programming via the internet and was in complete awe. I never fathomed that I could find similarities between my current career and that of a software engineer. Yet, as I delved deeper I was pleasantly surprised by an innovative, diverse, and ever growing industry and decided, I wanted to be part of that. 

Ultimately, what led me to this **career switch** is empathy driven development and design. I want to create, support and evaluate programs that will enhance and even radically change the lives of others and society, with empathy at the forefront. I'm excited for an opportunity to understand computers and humans alike.
DUOTONE
Tags: gatsby, duotone, css, help
Published: 2019-10-01 00:02:07

Hello DEV community. I am working with Gatsby.js and a using the image optimization features which are really cool. I am have come across something called duotone which inside the *childImageSharp* properties of a fluid container. For example, part of my GraphQL query

```
mainImage {
              sharp: childImageSharp {
                fluid(
                  maxWidth: 100
                  maxHeight: 100
                  duotone: { shadow: "#95ADE9", highlight: "#AFC4D8" }
                ) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
```


Is anyone an expert on DUOTONE, I want a quick way to see how my images would look with different DUOTONE styles, similar to a CSS color picker, but for DUOTONE.

Any suggestions?
TIL: The paint order of SVG elements and their stroke and fill is configurable
Tags: svg, css, webdev
Published: 2019-10-02 08:42:06

---
title: TIL: The paint order of SVG elements and their stroke and fill is configurable
published: true
tags: svg, css, webdev
canonical_url: https://www.stefanjudis.com/today-i-learned/paint-order-of-svg-elements-is-configurable/
---

Dealing with SVG can be fiddly at times. Sometimes you only want to adjust the border aka stroke of a `path` or `rect` to find out that it changes the visual appearance in a way that you didn't expect.

You can define an element's `stroke-width` in CSS or a presentation attribute.

```css
path {
  stroke-width: 3;
}
```

```html
<path stroke-width="3"></path>
```

If you increase the stroke width by more than a few pixels you'll see that the stroke width will change to both sides - inside and inside of the SVG element. 

I always started to change the path or width/height of the given element to avoid the stroke going over the fill too much. It turns out that you can also change the paint order of `fill` and `stroke` using `paint-order`.

```css
path {
  // fill will go over stroke
  paint-order: stroke;
}
```

```html
<!-- fill will go over stroke -->
<path stroke-width="3" paint-order="stroke"></path>
```

This way, the stroke is painted first followed by the fill color. You can then expand the stroke width as much as you want and it will look like it's expanding only to the outside because the fill color will be on top of the stroke. 🎉

![Visualisation showing the effect of paint-order](//images.ctfassets.net/f20lfrunubsq/4bzGlxGCekBwuQZbKBlpZ6/094a9052b88f0abad58d2ab809b65d90/Screenshot_2019-10-01_at_16.18.34__2_.png)

If you want to learn more about this check [the MDN article](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order) or play around with it [on CodePen](https://codepen.io/stefanjudis/pen/MWgMxqb).
Animating a Canvas with Phoenix LiveView: An Update
Tags: elixir, phoenix, liveview
Published: 2019-10-07 21:35:04

---
title: Animating a Canvas with Phoenix LiveView: An Update
published: true
date: 2019-10-01 00:00:00 UTC
tags: Elixir,Phoenix,LiveView
canonical_url: http://www.petecorey.com/blog/2019/10/01/animating-a-canvas-with-phoenix-liveview-an-update/
---

In my previous post on [animating an HTML5 canvas using Phoenix LiveView](/blog/2019/09/02/animating-a-canvas-with-phoenix-liveview), we used both a `phx-hook` attribute and a `phx-update="ignore"` attribute simultaneously on a single DOM element. The goal was to ignore DOM updates (`phx-update="ignore"`), while still receiving updated data from our server (`phx-hook`) via our `data-particles` attribute.

Unfortunately, the technique of using both `phx-hook` and `phx-update="ignore"` on a single component no longer works as of `phoenix_live_view` version `0.2.0`. The `"ignore"` update rule causes our hook’s `updated` callback to not be called with updates. In hindsight, the previous behavior doesn’t even make sense, and the new behavior seems much more consistent with the metaphors in play.

[Joxy](https://twitter.com/joxyandsuch) pointed this issue out to me, and helped me come up with a workaround. The solution we landed on is to wrap our `canvas` component in another DOM element, like a `div`. We leave our `phx-update="ignore"` on our canvas to preserve our computed width and height attributes, but move our `phx-hook` and data attributes to the wrapping `div`:

```

<div
  phx-hook="canvas"
  data-particles="<%= Jason.encode!(@particles) %>"
>
  <canvas phx-update="ignore">
    Canvas is not supported!
  </canvas>
</div>

```

In the `mounted` callback of our `canvas` hook, we need to look to the first child of our `div` to find our `canvas` element:

```

mounted() {
  let canvas = this.el.firstElementChild;
  ...
}

```

Finally, we need to pass a reference to a Phoenix `Socket` directly into our `LiveSocket` constructor to be compatible with our new version of `phoenix_live_view`:

```

import { Socket } from "phoenix";
let liveSocket = new LiveSocket("/live", Socket, { hooks });

```

And that’s all there is to it! Our LiveView-powered confetti generator is back up and running with the addition of a small layer of markup.

 ![](http://www.petecorey.com/img/2019-09-02-animating-a-canvas-with-phoenix-liveview/particles.png)

For more information on this update, [be sure to check out this issue I filed](https://github.com/phoenixframework/phoenix_live_view/issues/388) to try to get clarity on the situation. And I’d like to give a huge thanks to Joxy for doing all the hard work in putting this fix together!
3 easy-to-apply CSS improvements that you can use in your project right now
Tags: css, webdev, beginners
Published: 2019-09-30 23:36:06

CSS can be messy, and it usually is whether for the lack of conventions or well thought-out systems of doing things. This is why easy fixes with little to no effort is a breath of fresh air in a project that could be suffocating on a bloated code.

##Font Loading
If your project was created before May of 2019, you probably don’t have a font-display property set for your Google fonts. *Font display* defines the way they are loaded (Here's a [demo](https://font-display.glitch.me) with simulation). For me, *swap* works best to assure that text content are loaded immediately while the actual font is still downloading. Other values are *none*, *block*, *optional*, and *fallback*.

The easiest way to do this is add the *&display=swap* at the end of the import link.Like so:

<code>@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</code>

or if you’re hosting the fonts yourself:

<code>@font-face{
	font-family: ‘Roboto’;
	font-display: swap;
}
</code>

##Buttery-Smooth Scrolling
Divs with scrollable content are a staple of websites to manage larger content without using significant amount of screen real estates. However, you might notice that in iOS, scrolling through these divs could feel glitchy and a bit unresponsive.

You may dd the -webkit-overflow-scrolling property to improve it.

<code>.scrollable-div{
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
</code>

##Empty Elements
With components whose content are generated thru tinyMCE, say article body content, I always run into the problem of editors unmindfully adding unnecessary line-breaks.

<code>.article p:empty { display: none; }
</code>

In this case I target the empty paragraphs inside the article. With this I can effortlessly get rid of them and at the same time maintain the visual rules of the website.

***

Do you have other easy CSS hacks for existing projects? Share them in the comments below. I'm all ears!

I'll also be sharing *Easy-to-apply CSS before starting a project*. Stay tuned if you're interested.
How JavaScript evolved (in 30 seconds)?
Tags: javascript, react, beginners
Published: 2019-09-30 23:12:48

This is how JavaScript evolved over all these years. This video contains **no sound** but gives you a context of how JavaScript started as a language first, and then backed up by a standard (*ECMAScript*).

It also demonstrates that the long period when there were no changes made to the language, and now, we get new JavaScript features every year as part of new ECMAScript editions.

Hope this helps!
How to fix Web Share API firing twice under Android Chrome
Tags: javascript, chrome, pwa, android
Published: 2019-09-30 23:02:27

I wanted to share with everyone around a small hack I had to write when working with the Web Share API. 

## What is this Web Share API in the first place?
For those knowing little to nothing on the Web Share API, [Google Developers](https://developers.google.com/web/updates/2016/09/navigator-share) has a nice write up about it and a video showing how it works. 

<center><img src="https://developers.google.com/web/updates/images/2018/12/wst-send.png" width="256"></center>

## Fixing the Bug

We just want to make sure the Web Share API opens just once. 

Currently, there's a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=636274) in Chrome and Chromium browsers running in Android devices. 

Bug currently will cause Chrome to open the share dialog **twice**, one stacked one over the other. **And this is terrible UX.** 

I had to come up with a solution or ditch the functionality and fallback to a custom share modal, which I didn't want to if I could go native.

So I came up with a decent hack: A boolean flag. Sound's easy right? 

## The Solution

In order to keep track of this action before, and after the user interacts with the Web Share API I decided to pollute the `navigator` global variable and add a new property to it called `running`.

Code is as follows:

```js
if (navigator.share !== undefined && location.protocol == 'https:') {

    if (navigator.running == true) {        
      return;
    }

    navigator.running = true;
    navigator
      .share({ 
           title: "NilPortugues.com",
           text: "I just want to share this with you", 
           url: "https://nilportugues.com" 
      })
      .then(() => {
        navigator.running = false;
      })
      .catch(error => {
        navigator.running = false;
        console.log(error)
      });

} else {
  alert('Your browser does not support Web Share API yet.');
}
```

It just works. 

Hopefully, this will help someone out there facing the same problem.
💻 VScode for maximum development productivity!
Published: 2019-09-30 02:10:55

Like most developers I was a long time user of Sublime Text and it wasn’t until recently that I decided to give Virtual Studio Code a try after countless people raving on twitter about it. 

After that first coding session I was a convert, here’s the highlights of what made me switch.

**Integrated Software Version Management (SVM)**
VS Code ships with a Git extension making it that much easier to manage version control.

**Integrated Terminal**
Super helpful to have embedded terminals and not have to switch application windows to re-run scripts or build commands. Built in terminal means less windows!

**Programming Language Integrations**
Hundreds of programming languages are support and many come with the default install, for example, JavaScript, TypeScript, CSS, and HTML but more rich language extensions can be found in the marketplace.

**Live Share Collaboration**
Live Share is one of the coolest features in any IDE I’ve used. Easy real time co-working, language independent and ad hoc.

**Huge Extensions “Marketplace”**
VS Code extensions let you add languages, debuggers, and tools to your installation to support your workflow. You’ll spend hours looking for great extensions, there are so many!
Build a Laravel 6 CRUD App with Authentication
Tags: laravel6, php, programming
Published: 2019-09-30 22:51:38

---
title: Build a Laravel 6 CRUD App with Authentication
published: true
description: Learn how to build and secure a travel manager CRUD application with Laravel 6.0.
tags: #laravel6 #php #programming
canonical_url: https://auth0.com/blog/build-a-laravel-6-app-with-authentication/
---
TL;DR:
In this article, you'll learn how to build a travel reservation manager from scratch using Laravel. We'll walk through every step of building the application and then add authentication using Auth0. You can follow along with the finished project in this GitHub repository.

[Continue reading 📖]( https://auth0.com/blog/build-a-laravel-6-app-with-authentication/?utm_source=dev&utm_medium=sc&utm_campaign=laravel6_authentication)

![Exploring .NET Core 3.0. What's New?](https://cdn.auth0.com/blog/illustrations/laravel.png)
Android — ¿Cómo evitar que los logs de tu app desaparezcan?
Tags: logcat, androidstudio, tips, android
Published: 2019-09-30 22:46:47

---
title: Android — ¿Cómo evitar que los logs de tu app desaparezcan?
published: true
tags: logcat,android-studio,tips,android
canonical_url: https://medium.com/kotlin-dev-reactor/android-c%C3%B3mo-evitar-que-los-logs-de-tu-app-desaparezcan-c357aeface49
---

### Android — ¿Cómo evitar que los logs de tu app desaparezcan?

Quizá muchos ya sabían sobre esto, pero cuando uno emplear Logcat desde Android Studio y nuestra app sufre un _crash_ los logs se reinician.

Esta situación se debe a que con la configuración por defecto Android Studio nos mostrará los logs solo del proceso seleccionado y cuando el proceso se muere (cuando nuestra app crashea) deja de registrar los logs.

Sin embargo, esto se puede evitar haciendo lo siguiente:

![](https://cdn-images-1.medium.com/max/1024/1*6c7SdhlDyo6nOh8-ZKrzQQ.png)

1. En la parte superior derecha de esta sección desplegamos la lista en la que suele estar seleccionada la opción _Show only selected application_ y elegimos la opción _Edit Filter Configuration_.
2. A continuación, crearemos un nuevo filtro y en el campo _Package Name_ colocaremos el nombre del paquete que querramos loguear (Ej. **dev.picon.android.myapp** )

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

Y listo! Esta configuración será suficiente para que por más que se muera nuestra app los logs continúen siendo visibles para nosotros.

* * *
Managing Azure infrastructure using Sparrow6 and Perl6
Tags: azure, perl6, sparrow6
Published: 2019-09-30 21:34:54

---
title: Managing Azure infrastructure using Sparrow6 and Perl6
published: true
description: How to use Sparrow6 for quick and dirty infrastructure development
tags: Azure, Perl6, Sparrow6
---

In my *@work* I do a lot of scripting that allow me to automate creation and managing various Azure resources. 

[Sparrow6](https://github.com/melezhik/Sparrow6) - Perl6 automation framework has a lot of ready plugins to get job done.
It supports both Windows and Linux operation systems.


# Install Sparrow6

We will use Sparrow6 and Tomtit as automation frameworks

`zef install Sparrow6 Tomtit`

# Setup Repository

Sparrow6 public repository has all the plugins we need:

`export SP6_REPO=http://repo.westus.cloudapp.azure.com`


# Login to Azure 

Let's create first scenario that login to Azure using app registration credentials:

`tom --edit azure-login`:

```perl

task-run "login to azure", "azure-login", %(
    tenant    => config()<azure><tenant>, # Azure Tenant ID
    app_reg   => config()<azure><app-reg>, # Application registration URL
    password  => config()<azure><password>, # Password ( AKA client secret )
    subs      => config()<azure><subscription> # Subscription ( name or id )
)
```

# Configuration file

We're going to keep all the configuration data inside Tomtit environment:


`tom --env-set dev`

```perl
%(
    azure => %(

        tenant => "ad777dcc-bf12-4234-b41c-33b355cb1a52",

        subscription => "Smart Species",

        app-reg => "https://birds.azure.zoo.org",
        password => "Black Crow"
   )
)
```

`tom --env-set dev`


# Run scenario

Let's run our very first scenario:

`tom azure-login`

Now when we've successfully logged to Azure we could manage resources. Following are just some examples.


# Azure Keyvault

`azure-kv-secrets-check` plugin allows to retrieve a list of secrest from Azure keyvault and optionally check if they exists there.

`tom --edit check-secrets`

```perl
task-run "check secrets", "azure-kv-secrets-check", %(
    name => "hidden-stash",
    exists => (
      "bank-account",
      "home-PC",
      "credit-card" # I don't use that staff
    )

)
```

# Digging deeper

Sparrow6 provides you with some plugins to automate interaction with Azure.

To browse existing ones go to [Sparrow plugins GitHub project](https://github.com/melezhik/sparrow-plugins) or use command line interface:


```bash
s6 --index-update
s6 --search azure
s6 --plg-install azure-kv-secrets-check
s6 --plg-man azure-kv-secrets-check
```

I've been constantly adding new plugins and try to support both Windows and Linux systems. Many of plugins require just a azure command line client.

---

Thank you for reading.

Comments and feedback are welcome.