teleren/devto huggingface dataset:
🚲 🚂 🚗 🚆 How long is your commute time and how do you cope with it?
Tags: discuss
Published: 2019-04-28 11:01:13

---
title: 🚲 🚂 🚗 🚆 How long is your commute time and how do you cope with it?
published: true
description: Listen to or read books, music, etc 
tags: discuss
---

**Commute time**: 2 hours (total)

**Way I commute to work**: 
1. walking (15 minutes)
2. subway (25 minutes)
3. bus or walking (10-20 minutes)

**Ways I cope with commuting**: I usually listen to audio books / podcasts or music. Sometimes I also aimlessly browse my phone :D

What do you do?
Private Network + Traefik + Keycloak + Gatekeeper Overview (diagram)
Tags: keycloak, traefik, gatekeeper, diagram
Published: 2019-04-28 10:00:14

---
title: "Private Network + Traefik + Keycloak + Gatekeeper Overview (diagram)"
published: true
public_article: [true]
description: "A high level network overview of Traefik, Keycloak, and Gatekeeper working together"
categories: [dev.to,admin,network,web]
tags: [keycloak,traefik,gatekeeper,diagram]
canonical_url: https://github.com/karlredman/Articles/blob/master/content/dev.to/traefik%2Bkeycloak%2Bgatekeeper_diagram_overview/index.md
published_url: https://dev.to/karlredman/private-network-traefik-keycloak-gatekeeper-overview-diagram-1nmn

author: "Karl N. Redman"
creatordisplayname: "Karl N. Redman"
creatoremail: "karl.redman@gmail.com"

lastmodifierdisplayname: "Karl N. Redman"
lastmodifieremail: "karl.redman@gmail.com"

slug: null

hide: false
alwaysopen: false

toc: true
type: "page"
#theme: "league"
hasMath: false

draft: false
weight: 5
---

A high level network overview of Traefik, Keycloak, and Gatekeeper working together

This is yet another artifact [although ugly] from a project I'm working on. This diagram depicts a basic lab infrastructure with Traefik, Keyclaok, and Keycloak Gatekeeper working together behind a local DNS (dnsmasq). Details for how all of this actually fits together are forthcomming. For now, hopefully, it will be helpful for those who are wondering what the layout looks like when configuring these various components to work together. Note the `whoami` that is a service illustrated in a [previous post](https://dev.to/karlredman/keycloak-v5-gatekeeper-v5-flowcharts-easily-create-and-restrict-an-isolated-iodc-client-service-by-group-role-53h4).

* Original PlantUML source + Image File: [here](https://github.com/karlredman/My-Articles/tree/master/Artifacts/network-diagrams)
* Original source edited with:
  * vim [iamcco/markdown-preview.nvim: markdown preview plugin for (neo)vim](https://github.com/iamcco/markdown-preview.nvim)
  * VSCode [PlantUML - Visual Studio extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)

[![kc-kcgc-traefik_overview-1.png](https://raw.githubusercontent.com/karlredman/Articles/master/content/dev.to/traefik%2Bkeycloak%2Bgatekeeper_diagram_overview/kc-kcgc-traefik_overview-1.png)](https://raw.githubusercontent.com/karlredman/Articles/master/content/dev.to/traefik%2Bkeycloak%2Bgatekeeper_diagram_overview/kc-kcgc-traefik_overview-1.png)
If Gmail says "Our system has detected that this message does not meet IPv6 sending guidelines regarding PTR records"
Tags: google, email, security
Published: 2019-07-15 11:04:17

---
title: If Gmail says "Our system has detected that this message does not meet IPv6 sending guidelines regarding PTR records"
published: true
tags: google,email,security
canonical_url: https://ofdigitalwater.postach.io/post/if-gmail-says-our-system-has-detected-that-this-message-does-not-meet-ipv6-sending-guidelines-regarding-ptr-records
---

Essentially, [Google Mail](https://mail.google.com/)'s SMTP server tells you that either the _PTR record with IPv6 address_ of your SMTP server does not exist or this record does not match your server.

# The solution

1. Look at the DNS configuration of your SMTP server.
2. If it does not have a _PTR record_ with the _IPv6 address_ of that server, add it.
3. If your configuration does not allow adding PTR records, disable sending over _IPv6_ in your SMTP configuration. For Postfix, ensure that the parameter `inet_protocols` (for example, in the file `/etc/postfix/main.cf`) looks like `inet_protocols = ipv4`, i.e. _without_ `ipv6`.

# Sources

- [https://support.plesk.com/hc/en-us/articles/213936285-Unable-to-send-an-email-to-Gmail-Our-system-has-detected-that-this-message-does-not-meet-IPv6-sending-guidelines-regarding-PTR-records](https://support.plesk.com/hc/en-us/articles/213936285-Unable-to-send-an-email-to-Gmail-Our-system-has-detected-that-this-message-does-not-meet-IPv6-sending-guidelines-regarding-PTR-records)
- [https://support.plesk.com/hc/en-us/articles/213388269-Unable-to-send-mail-using-STARTTLS-authentication-4-7-0-TLS-not-available-due-to-local-problem](https://support.plesk.com/hc/en-us/articles/213388269-Unable-to-send-mail-using-STARTTLS-authentication-4-7-0-TLS-not-available-due-to-local-problem)
- [https://blog.kruyt.org/postfix-and-tls-encryption/](https://blog.kruyt.org/postfix-and-tls-encryption/)
How to Create Laravel + react + next wep app 
Tags: help, laravel, nextjs, react
Published: 2019-04-28 09:34:47

---
title: How to Create Laravel + react + next wep app 
published: true
discription: I have built Laravel + react project already. For SEO, I gonna make server side rendering by using Next.js. But I am first for next with larave, now. Is it right Next.js for SEO. How can I do?
tags: #help, #laravel, #nextjs, #react.
---
creating content vs. structuring content: how do *you* go from one to another?
Tags: discuss
Published: 2019-04-28 08:01:26

---
title: creating content vs. structuring content: how do *you* go from one to another?
published: true
tags: discuss
---

By profession, career, and interest, I'm a software developer, at this point mainly working web applications (Rails, React, and GraphQL at this point).

I'm also a content creator, as in I write documentation, blog posts, produce images, and so on, for both myself and for work.

When I'm doing the latter, especially writing, I find it difficult to create content with markup embedded in it, so I write text almost exclusively in plain text, with a little markdown added (you know, how markdown is the markup we already know because we've been writing email this way for *years*).

I'm also aware that walls of text, even though interspersed with headings at different levels, a few bulleted lists, etc, can still be inaccessible without more semantic structural markup.

The markdown processors I'm familiar with (kramdown in particular) do a wonderful job of letting you intersperse HTML markup within the stream of markdown, so you can surround things with semantic markup. This works pretty well, in fact.

And yet, I think I'm looking for something even more intuitive that can be indicated swiftly without my needing to think about it while creating and editing the content in it's more free text form.

Perhaps there really need to be 2 steps to this process of preparing content for consumption.

What have you found? How do you work with content to get it to final form? I'm interested in your processes, tools you've found, ways of working, etc.
Why I Love Go ?
Tags: why, thoughts, go, programminglanguages
Published: 2019-04-28 07:34:30

---
title: Why I Love Go ?
published: true
description: Thoughts on Go programming language.
tags: #why #thoughts #Golang #programming_languages
---
The first time I heard about Go is a year ago. I fell in love with this gorgeous programming language because I thought of the building principles of it three years ago.


I am not capable of creating a programming language, yet I used to think about an easy to write language and efficient to compile and run, Easy to understand and fix errors, can be scale simply and efficiently.

When I write in Java I thought of a less rubbish code.. when I use Python I think of a more performant language.. when I write in C or C++ or Rust I painfully think of a less painful parallelism and a close performance with simpler syntax and logic.

It was a dream! Lovely to see your dream in reality 😍

Everytime I need to choose a language, I try to choose Go ❤ if I can.
What is the best way to learn JavaScript?
Tags: react, webdev, javascript, es6
Published: 2019-04-28 07:13:30

---
title: What is the best way to learn JavaScript?
published: true
description: What is the best way to learn JavaScript?
tags: #react #webdev #js #es6
---

Source : <a href="https://www.skptricks.com/2019/04/what-is-best-way-to-learn-javascript.html" >What is the best way to learn JavaScript? </a>

Today we will tell you about basic knowledge of JavaScript and how to study. Although it is not limited to programming, it is important how to avoid frustration when learning something. With the wrong learning method, you will fall frustrating without going well. Let's know the correct learning method.

<img src="https://3.bp.blogspot.com/-fme9teT6-lw/XMU0uLArLAI/AAAAAAAACtI/oZkechwyZJkrMvLgtlg-cf4nD_QlzLKJACLcBGAs/s400/js.jpg" /> 

What language is JavaScript? 

JavaScript often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.

<a href="https://www.skptricks.com/2019/04/what-is-best-way-to-learn-javascript.html" > Click here to read more... </a>
Background-Clip Text Effect - Using Only HTML & CSS
Tags: codepen, html, css, backroundclip
Published: 2019-04-28 07:12:20

---
title: Background-Clip Text Effect - Using Only HTML & CSS
published: true
tags: codepen, html, css, backroundclip
---



{% codepen https://codepen.io/ahmadbassamemran/pen/LvaNqZ %}

<hr/>
<small>Background-Clip Text Effect - Using Only HTML & CSS</small>

<hr/>
[Do Not Forget To Like & Subscribe In The Channel:](https://www.youtube.com/AhmadEmran?sub_confirmation=1)
<hr/>
{% youtube 3KltLl-3uG8 %}
Getting started with Grunt Js
Tags: grunt, visualstudio
Published: 2019-06-04 07:35:55

---
title: Getting started with Grunt Js
published: true
tags: grunt, visualstudio
canonical_url: https://theworldwidecode.com/blog/2019/getting-started-with-grunt-js-in-visual-studio/
---

Grunt is the JavaScript task runner that runs on Node js this post
Quick Start Firebase using Node JS 
Published: 2019-04-28 05:00:11

---
title: Quick Start Firebase using Node JS 
published: true
description: An elegant solution to images not loading in your generated PDF's
cover_image: https://images.unsplash.com/photo-1489683375195-b6dde5dfbd79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
---
Photo cred: [Fancy crave](https://unsplash.com/@fancycrave)

#Purpose:

### This guide will get you up and running with a a very simple Node API firebase backend.

1. create a firebase project, click goto console , set it up with all default settings .


![alt text](https://thepracticaldev.s3.amazonaws.com/i/os8bdzile9ealhjma7w5.png)

 2. Select default settings for creating new project

![alt text](https://thepracticaldev.s3.amazonaws.com/i/e06fjzoufhdc81xthrdj.png)

 3. Create a directory where you want to load our firebase project (and navigate to it ): 

`Sites/firebase_project`

 4. Make sure you are inside the new directory of our `firebase_project`

 5. If you don't have it installed on your machine, install firebase global package

```
npm install -g firebase-tools
```


 6. if you have never done this before and are not logged in then type: `firebase login`

6a. this will open up browser window where it will ask you to login to your google account.

## Navigate back to your firebase_project directory and type this: 
```
firebase init

```


 8. in the command line you will see options , use the arrow keys to select: `Functions: Configure and deploy Cloud Functions` and press spacebar to select it

 9. now press enter 

10. when it asks for language, click `Javascript`.

11. if it asks for ESLINT, press no (unless you want to get bugged often)

12. when it asks to install , dependences click yes,

 if you get an error check to make sure your directory has the correct permissions. 

if you are still getting an error run `firebase init --debug` mode , this will help you see any errors that may appear.


13. Navigate to `functions/index.js` and uncomment this : 

```javascript
exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});

```

14. Now from the terminal, inside of the directory run : 


```
firebase deploy
```


After you deploy, you should get a URL like the one seen below: 

![helloworld](https://thepracticaldev.s3.amazonaws.com/i/ogky21t113z82h5r0zoa.png)


Now paste this link that you see in the terminal , into your favourite HTTP request tool, fore example (POSTMAN) and try to hit the URL, and see if you get `"Hello from Firebase!"`


### Congratz!

This is your first node js request endpoint, you can assign a route to it , or add whatever youd like!
I opened a PR that adds Twitch Live Streaming to Dev.to
Tags: meta, streaming, twitch
Published: 2019-04-28 03:21:16

At the beginning of this month Ben made a post about being interested in adding some Live Streaming integration into Dev.to!

{% link https://dev.to/devteam/dev-feature-idea-self-serve-live-broadcasting-5bli %}

I had been getting interested in Streaming for Coding and thought this would be a really cool idea! I liked the idea of having a place where coding and developer focused streams could live and be found. So I opened a Github Issue to get started!

{% github https://github.com/thepracticaldev/dev.to/issues/2317 %}

And today... Drum roll please...

I opened the MVP PR for this! It definitely does not have a super polished UI but its a good start I think!

Here is a PR of showing a basic embed (sorry I wasn't streaming while making the GIF so the embed is a bit boring)

![2019-04-27 22 21 36](https://media.giphy.com/media/WoXUO0W0kGej797Zy9/giphy.gif)

Here is the PR that I opened! I would love some input of how to finish up the last few UI bits!

{% github https://github.com/thepracticaldev/dev.to/pull/2591 %}
Agile Software Development
Tags: programming, coaching, agile, softwareengineering
Published: 2019-07-29 20:39:00

---
title: Agile Software Development
published: true
tags: programming,coaching,agile,software-engineering
canonical_url: 
---

I had a great time attending the Agile Memphis meetup this past week. It was presented by Robert Newman, Lean Agile Coach and IT Leader at FedEx. Robert focused his presentation on tips for becoming a better agile SAFe coach. SAFe stands for the Scaled Agile Framework. More on that later.

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

### My Experience With Agile

Agile development was _the_ way we built software at Flatiron. We implemented Test Driven Development, Kanban Boards, Standup Meetings, and wireframing throughout the program. I used these methods to build each of my major projects.

### What is Agile Development?

I recently listened to a podcast by Javascript Jabber on this topic. [Here](https://devchat.tv/js-jabber/jsj-349-agile-development-the-technical-side-with-james-shore/) is a link to the episode. The episode guest stars James Shore, agile developer extraordinaire.

James Shore spent a fair amount of time discussing the evolution of Agile development. It was created in 2001 with the publication of the [Agile Manifesto](https://agilemanifesto.org/). I definitely recommend this podcast if you are interested in the topic.

### SAFe Coaching

Back to the meetup and SAFe, Robert described coaching frameworks and shared stories from his work as a SAFe coach. I especially enjoyed hearing about the distinction between a manager and a coach.

### Final Thoughts

Agile software development is a practice that I will continue to practice throughout my dev journey. I am especially interested in getting practice writing more tests for React programs.
NPM Package Creation - µGuide
Tags: npm, node, javascript, notetoself
Published: 2019-04-28 00:28:59

---
title: NPM Package Creation - µGuide
published: true
description: 
tags: npm, node, javascript, notetoself
---

*Note to self.*

### How to Publish

1. Create an NPM account
2. Create GitHub repo
3. Clone repo with `git clone <url>`
4. Inside the repo run: `npm init`
5. Fill the required fields
6. Push to Github:  `git push origin master`
7. Publish publicly: `npm publish`

### Basic Commands

- To publish a new version of the package: `npm version 1.0.0 && npm publish`
- To see the current profile: `npm profile get`
- To change a property: `npm profile set <property> <value>`
- To get current local version: `npm version`
- To update a specific package: `npm install package@latest`
- To update if the version change is minor:  `npm update package`

### Whitelisting Specific Directories

This is useful to minimize the size of the package by not including unnecessary files present in the repo.

```js
    {
      "name": "package-name",
      "main": "./lib/index.js",
      "files": [
        "/allowed-directory"
      ]
    }
```
Using Emotion in React
Tags: emotion, react, javascript
Published: 2019-04-27 22:59:05

---
title: Using Emotion in React
published: true
description: Understand how to add emotion to your React project
tags: emotion, react, javascript
cover_image: https://images.unsplash.com/photo-1524293568345-75d62c3664f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=708&q=80
---

## Introduction
CSS-in-JS is a hotly debated topic, personally, I believe you should focus on shipping and using whatever the hell you want! Nevertheless, emotion is quite a nice tool and I am quickly going to show you how to get up and running with it.

I have created the following component but the problem is all the styles live in the `style.css` file, we will convert this to use emotion.

The starter sandbox is here:
{% codesandbox 927ny28zx4 %}

## Installing Emotion
You need two dependencies in order to use emotion
`@emotion/core`
`@emotion/styled`

So add these to your project or `npm install` if you are working locally.

## Add the styles to the component
Take a look at the following code where we are styling our component within the JS file.
```
import React from "react";
import styled from "@emotion/styled";

const Component = styled("card")`
  .card {
    background-image: url("https://i.pinimg.com/originals/1c/97/df/1c97df47df64fe9357290bd7f51d0a1a.jpg");
    background-repeat: no-repeat;
    background-size: 200px 350px;
    height: 350px;
    width: 200px;
    position: relative;
    display: flex;
    justify-content: center;
  }

... more styles
`;

const Card = ({ handleClick }) => {
  return (
    <Component>
      <div className="card">
        <div className="text">
          <div className="action">
            <span>VISIT</span>
          </div>
          <div className="country">
            <span>Iceland</span>
          </div>
        </div>
        <button onClick={handleClick}>DISCOVER</button>
      </div>
    </Component>
  );
};

export default Card;
```

As you can see from above, we create a new component called `Component` and assign it to `styled(Card)`, then we use a template literal to insert our styles.

This is a great way to keep your css scoped and also keep the css in the same file as the component.  If in the future we needed to remove this component, we wouldn't have to worry about finding all the styles associated with it as they all live in the same file. SO GREAT!

## Import colors
Since we are using JS, we can import colors from an object and add it to our component.

Create a file called `colors.js` and add the following:
```
export default {
  dark: "#333"
};

```

Now in the component we can import the colors with:
`import color from '../../colors'`

We can then use the dark color like so:
```
button {
    background-color: ${color.dark};
    ....
}
```

That's all folks!

That is about it, this is really just the basics but is more than enough to get you up and going!

Final Example:
{% codesandbox kw6yj8mx37 %}
How To Overcome Learn --to--> Job Gap
Tags: motivation, job, learn
Published: 2019-04-27 22:38:26

---
title: How To Overcome Learn --to--> Job Gap
published: true
description: Simple bullet points to do
tags: motivation, job, learn
---

So any1 who stumbled upon this great abyss of the phrase "Oh, sorry, we dont hire juniors!", sure know what I am talking about. 

Disclaimer: If you are here for the answer - you can click another article. Its just a manifest of self-pity.

Its that moment, when you applied to all local offices just to do what you enjoy and not making websites for facebook bot holders and traders algorithms.

Its that moment of despair, when you realise, that you cannot take a job where you can do something useful, inspiring and balancing for yourself, f.e. go to Mozilla and help them to fight Chromium monopoly...

Its that moment of grief and a moaning for lost opportunities.

How to overcome it? I dont know. Still struggling.
Coding for fun for Coding Coach
Tags: community, career, codingcoach
Published: 2019-04-27 22:24:41

---
title: Coding for fun for Coding Coach
published: true
description: How to have fun and contribute to the community
tags: community, career, coding coach
canonical_url: https://blog.codingcoach.io/blog/coding-for-fun/
---
These past months had been challenging, in my current project, we had a problematic deadline, and we were struggling with the integration of our code with other teams and the business side communication. Long days, some weekend work and so on.

So, what do I do when I want to relax and have some fun (other than reading dev.to), of course, I code!

First, a little bit of context, I landed to [Coding Coach](https://codingcoach.io) after reading [this blog post](https://dev.to/emmawedekind/how-to-boost-your-productivity--get-sht-done-3h5n).

Fantastic community, excellent idea, but, how can I contribute? Other than being a mentor (it looks like there are not so many mentees interested in Xamarin after all), I want to do something exciting and have the chance to grow.
Many contributors are already working on the web app, and they are using a stack that I don't want to learn right now, so I asked what about the mobile app, can I use Xamarin? So @emmawedekind replied something like, sure, choose your poison (not really :D), and I started as an exercise the development of the mobile app (contributors welcome!).

I have much experience as a Xamarin developer, but usually, your "pay the bills" projects don't allow you to check new things and learn about the latest changes and improvements; also, some developers on Coding Coach were asking why I was using Xamarin, here a brief list of my goals for this project:

- Create something useful for the Coding Coach community.
- Have a playground for mentees that want to learn about Xamarin.
- Have the opportunity to create high-quality code without the restraint of deadlines or business constraints.
- Learn about different approaches, tools, and technologies.
- Have fun!! 

I'm taking this as the chance to find joy in my craft and do (I hope) something meaningful for the community.
Friday 2 am caught me fighting happily with the filter functionality for the mentor's page; if that's not fun, I don't know what it is!

If you aren't already in the Coding Coach slack, go there and say hello, and if you are interested in a Xamarin mentor, contact me! I'm sure we can learn something together.