teleren/devto huggingface dataset:
My haunted closet
Tags: dailywriting
Published: 2019-07-16 23:39:01

---
title: My haunted closet
published: true
tags: daily-writing
canonical_url: https://marcusblankenship.com/my-haunted-closet/
---

There is a tiny closet in the front room of the beach house where I’m staying this week, in Santa Cruz, CA.

The closet has no light switch. Instead, the inside light is on a motion sensor.

At 2 am, I got up for a drink of water and froze in my tracks.

I could see closet light was on, shining brightly under the door.

_Who or what turned the light on???_

Was someone in the house?

Or, an animal?

Or, a ghost?

I still don’t know – I wasn’t brave enough to open the door.

_Ahem…_

Every day we see people’s behavior “shining” under the closed door of their thoughts.

It’s easy to make guesses about what’s happening in the closet of their mind.

Is someone late for morning stand-up? “They’re not committed to the team.”

Someone commit’s sloppy code? “They just don’t care about quality.”

Someone’s silent in meetings? “They’re checked out at work.”

**Try to catch yourself.**

Remember, all you can see is the light, not what’s going on behind the door.

Be braver then I was – knock on the door.

Ask what’s happening.

Be curious – and act on it.

A good question to start with is, _“Tell me more about that, please.”_

Best,  
Marcus

The post [My haunted closet](https://marcusblankenship.com/my-haunted-closet/) appeared first on [Marcus Blankenship](https://marcusblankenship.com).
Product Page | CSS Keyframes Animation
Tags: codepen, css, youtube, keyframes
Published: 2019-07-02 15:53:40

{% codepen https://codepen.io/KaioRocha/pen/bPMgaY %}

Learn how to do this awesome effect with pure CSS

Check it out on my channel: 
https://youtu.be/NBIbZIegMRY

Or to see the code: 
https://codepen.io/KaioRocha/pen/bPMgaY
Please school me on cross-posting from my blog!
Tags: explainlikeimfive
Published: 2019-07-02 15:40:08

I'm finally getting my own blog for my technial and dev-life posts! :tada:

However, I would like to cross-post my stories to platforms like Medium. I've read about canonical tags and such on Google, but I'm yet to come across a straight-forward approach to cross-posting without being dinged for duplicate content (and for other reasons I don't yet know about).

So, please, with eyes wide and mind ready, I wait for someone to explain blog post cross-posting to me like I am five :smile:

Thank you!
What makes an IT job offering or company appealing to you? (she/her/hers only)
Tags: discuss
Published: 2019-07-02 15:25:19

---
title: What makes an IT job offering or company appealing to you? (she/her/hers only)
published: true
description: What can we do in order to become more inclusive in IT?
tags: discuss
---

If you are a female developer I'd love to hear about what makes an IT job offering or company appealing to you. What are your yays and nays when looking at job postings and company websites?

I am trying to understand what we as an industry can and need to do in order to become more inclusive.
Time Picker with Day or Night Illustration
Tags: codepen, showdev, vue, css
Published: 2019-07-02 15:16:43

<p>This is a simple VueJS, and a concept for time picker. It may be used for an actual application, or just a simple timepicker, for web based application, or website (or whatever related to html, css, javascript).</p>

<p>The illustration will change to 'day', if the time is between 6:00 am to 5:59 pm. Otherwise, the illustration will change to 'night'.</p>

<p>i18n (internalization) is included, though I don't speak many languages, so I just written here all the languages I speak.</p>

<p>All of the icons/images that are used here are borrowed from here:
<a href="https://materialdesignicons.com/" target="_blank">https://materialdesignicons.com/</a></p>

{% codepen https://codepen.io/takaneichinose/pen/VJbNLe %}
Trigger PHP XDebug from postman
Tags: tips, webdev, php
Published: 2019-07-02 15:09:25

---
title: Trigger PHP XDebug from postman
published: true
description: A quick trick to trigger xdebug for php, from postman
tags: tips, webdev, php
---

You can easily trigger xdebug to run for PHP, when using postman. You just need to simply add `XDEBUG_SESSION_START=PHPSTORM` to the your url query params.

Of course you'll need to swap out `PHPSTORM` for your specific trigger key if it differs. 


---

Varymade LLC.

Current projects are https://charactergenerator4000.com and https://coder.exchange. Please check them out and let us know your thoughts.
Understanding pseudo elements: Display hrefs in printed documents
Tags: css, html, frontend
Published: 2019-07-02 11:53:43

---
title: Understanding pseudo elements: Display hrefs in printed documents
published: true
description: 
tags: CSS, HTML, Frontend
series: Understanding pseudo elements
---

Have you ever tried reading a printed out website, then instantly becoming frustrated when you're trying to click the links? Pseudo elements can't really help you much with this, however they might help you a bit by displaying the links' urls! How do you do this, you ask? Let me show you the power of pseudo elements and the `attr()` function.

Printed documents only have two dimensions, and they aren't even clickable?! How can we tell the user what the underlined text goes to?

By using the `content` property together with the `attr()` CSS function, we can display the value of any attribute. As `href` is an attribute on `a` elements, surely we can display this too, right? Of course!

```html
<a href="https://dev.to">a link with no clear sign of where it points to</a>
```

```css
@media print {
  a::after {
    content: ' (' attr(href) ') ';
  }
}
```
This code will yield the following result: 
![The link is rendered out with the url in parantheses showing after the link text](https://thepracticaldev.s3.amazonaws.com/i/lz5xppyhg3j7gmm6y3dm.png)

Granted printed documents have become rare, this is still a neat trick for those of us working with article heavy sites!
Heroines of JavaScript series: Lauryn & Layla interview Natalia Tepluhina
Tags: diversity, javascript, girlswhocode, womenintech
Published: 2019-07-02 14:21:16

---
title: Heroines of JavaScript series: Lauryn & Layla interview Natalia Tepluhina
published: true
description: As part of our Heroines of JavaScript series, Lauryn & Layla interview Natalia Tepluhina.
tags: diversity, javascript, girlswhocode, womenintech
cover_image: https://user-images.githubusercontent.com/1228996/58769362-f2063a00-856b-11e9-85d2-97f73102463d.png
canonical_url: https://baldbeardedbuilder.com/streams/Heroines-of-JavaScript-series-with-Natalia-Tepluhina/
---

## Stream Replay Link

[https://youtu.be/f9cyf9QWSoI](https://youtu.be/f9cyf9QWSoI)

<!--more-->

### Segments

| Timestamp | Topic                                                                               |
| ---       | ---                                                                                 |
| 00:06     | Kick it off                                                                         |
| 00:10     | Interview with Natalia Tepluhina                                                    |
| 00:34     | Closing out interview and working on our Node.js chat bot services                  |
| 02:19     | Wrapping it up and raided to [Talk2MeGooseman](https://twitch.tv/talk2megooseman)   |


---

### Today's Candle To Code By

[Warm Tobacco Pipe](https://amzn.to/2GSsMxX)

---

## Things we learned

- [RamblingGeek](https://twitch.tv/ramblinggeek) found [this link](https://support.skype.com/en/faq/FA34853/what-is-skype-for-content-creators) to help us solve the issue of our Skype NDI feeds resizing on the stream.


## Things to Review & Notes

-


## Goals

- [x] Interview with Natalia


## Next Steps

-


---

## Todays stream brought to you by

### Subscribers

- sorskoot (2 mo)
- roberttables (3 mo)

### Cheers

| Compadre          | Bits        |
| ---               | ---         |
| cmjchrisjones     | 100         |
| sorskoot          | 100         |
| roberttables      | 1,000       |
| cpayette          | 1,642       |
| RamblingGeek      | 200         |


### Raids

| Marauder      | Accomplices   |
| ---           | ---           |
|               |               |
Heroines of JavaScript series: Lauryn & Layla interview Stanimira Vlaeva
Tags: diversity, javascript, girlswhocode, womenintech
Published: 2019-07-02 14:15:48

---
title: Heroines of JavaScript series: Lauryn & Layla interview Stanimira Vlaeva
published: true
description: As part of our Heroines of JavaScript series, Lauryn & Layla interview Stanimira Vlaeva.
tags: diversity, javascript, girlswhocode, womenintech
cover_image: https://user-images.githubusercontent.com/1228996/60442700-34f51500-9bdf-11e9-92b7-c2a967baf772.png
canonical_url: https://baldbeardedbuilder.com/streams/Heroines-of-JavaScript-series-with-Stanimira-Vlaeva
---

## Stream Replay Link

[https://youtu.be/k4K9EC7EHDE](https://youtu.be/k4K9EC7EHDE)

<!--more-->

### Segments

| Timestamp | Topic                                                                                   |
| ---       | ---                                                                                     |
| 00:07     | Kick it off                                                                             |
| 00:12     | Lauryn & Layla interview Stanimira Vlaeva                                               |
| 01:00     | Overview of how we're storing data on our chat bot                                      |
| 01:40     | Discussing pure micro-services in relation to our IO project                            |
| 01:50     | Designing a micro-service, multi-tenant system for chat/overlays/etc for streamers      |
| 02:28     | Wrapping it up and raid to [LuckyNoS7evin](https://twitch.tv/LuckyNoS7evin)             |

---

### Today's Candle To Code By

[Old Factory Straight Razor](https://amzn.to/2IHHPNJ)

---

## Goals

- [x] Interview with Stanimira Vlaeva
- [x] Giveaway a deck of Heroines of JavaScript cards

---

## Todays stream brought to you by

### Subscribers

- Lannonbr (2 mo)
- phrakberg (4 mo)
- sorskoot (3 mo)

### Cheers

| Compadre      | Bits      |
| ---           | ---       |
| ninjacoder88  | 25        |
| nick_larsen   | 500       |
| sorskoot      | 100       |

### Raids

| Marauder      | Accomplices   |
| ---           | ---           |
| cmgriffing    | 38            |
What makes sketches priceless?
Tags: sketching, design, ideation, beginners
Published: 2019-07-02 14:04:26

---
title: What makes sketches priceless?
published: true
description: Sketches are valuable as a design tool but what makes them priceless?
tags: sketching, design, ideation, beginners 
canonical_url: https://rizwan-javaid.squarespace.com/blog/what-makes-sketches-priceless
cover_image: https://dzwonsemrish7.cloudfront.net/items/2q1Q1T2s0Y3K2h42310U/jose-alejandro-cuffia-_4815u_ACqQ-unsplash.jpg?v=63a98ab6
--- 

Sketches are a representation of an idea with just the right amount of detail to convey its essence. Sketches have specific qualities which set them apart from other design tools such as wireframes and high-fidelity visual designs. 

Here is a list of qualities of sketches that make it unique and valuable:

Sketches are rough.
Sketches are cheap.
Sketches are collaborative.
Sketches are inviting.
Sketches are exploratory.
Sketches are awareness.
Sketches are contextual.
Sketches are indispensable.
Sketches are iterative.
Sketches are flexible.
Sketches are divergent.
Sketches are participatory.
Sketches are refinement.
Sketches are curious.
Sketches are conceptual.
Sketches are critical.
Sketches are generous.
Sketches are emergent.
Sketches are focused.
Sketches are enlightening.
Sketches are open.
Sketches are inspirational.
Sketches are revealing.
Sketches are connective.
Sketches are activating.
Sketches are simple.
Sketches are ambiguous.
Sketches are visual.
Sketches are essential.

The conversations that take place as a result of those sketches are priceless!


What makes sketches valuable to you? I would love to hear your thoughts.


Keep on sketching!
Gulp.js command execution for humans.
Tags: node, javascript, shell
Published: 2019-07-02 13:32:51

---
title: Gulp.js command execution for humans.
published: true
description: Gulp.js command execution for humans.
tags: [nodejs, javascript, shell]
---

<img src="https://raw.githubusercontent.com/ehmicky/design/master/gulp-execa/gulp-execa.svg?sanitize=true" width="500"/>

Build automation in JavaScript has gotten too complicated. It's time to bring it back to simple terminal commands executed in order, using [Gulp-execa](https://github.com/ehmicky/gulp-execa).

As opposed to similar plugins or to [`child_process.exec()`](https://nodejs.org/api/child_process.html#child_process_child_process_exec_command_options_callback), this uses [`execa`](https://github.com/sindresorhus/execa) which provides:

- [Better Windows support](https://github.com/IndigoUnited/node-cross-spawn#why), including [shebangs](<https://en.wikipedia.org/wiki/Shebang_(Unix)>)
- Faster and more secure commands, since [no shell is used by default](https://github.com/ehmicky/gulp-execa/blob/master/README.md#command)
- Execution of [locally installed binaries](https://github.com/ehmicky/gulp-execa/blob/master/docs/API.md#preferlocal)
- [Interleaved](https://github.com/sindresorhus/execa#all-1) `stdout`/`stderr`

`gulp-execa` adds Gulp-specific features to [`execa`](https://github.com/sindresorhus/execa) including:

- a [task shortcut syntax](https://github.com/ehmicky/gulp-execa/blob/master/README.md#taskcommand-options)
- configurable [verbosity](https://github.com/ehmicky/gulp-execa/blob/master/README.md#echo)
- [better errors](https://github.com/gulpjs/plugin-error)

Commands can be executed either directly or inside a [files stream](https://gulpjs.com/docs/en/api/src). In [streaming mode](https://github.com/ehmicky/gulp-execa/blob/master/README.md#streamfunction-options), unlike other libraries:

- commands are run [in parallel](https://github.com/almost/through2-concurrent), not [serially](https://github.com/rvagg/through2)
- output can be saved [either in files or in variables](https://github.com/ehmicky/gulp-execa/blob/master/README.md#result)

Example `gulpfile.js`:

```js
const { src, dest } = require('gulp')
const { task, exec, stream } = require('gulp-execa')

module.exports.audit = task('npm audit')

module.exports.outdated = async () => {
  await exec('npm outdated')
}

module.exports.sort = () =>
  src('*.txt')
    .pipe(stream(({ path }) => `sort ${path}`))
    .pipe(dest('sorted'))
```

The full documentation is available on [GitHub](https://github.com/ehmicky/gulp-execa).
Learning TypeScript, Part One: What Is TypeScript and Why Should I Care?
Tags: javascript, typescript, webdev
Published: 2019-07-02 13:28:10

---
title: Learning TypeScript, Part One: What Is TypeScript and Why Should I Care?
published: true
description: 
tags: javascript, typescript, webdev
---

I'm currently refreshing my TypeScript knowledge and learning how to comprehensively apply it to React, so you all get to learn along with me! Today, we're looking into the basic "what" and "why" of TypeScript.

## What Is TypeScript?

[TypeScript](https://www.typescriptlang.org/) is a super-set of JavaScript that enables developers to set much more explicit types on values than vanilla JS. This extends beyond primitive values to objects, arrays, and some custom types. If you've spent time with Java or C#, the syntax will feel familiar to you. It is intended to point out and prevent errors at various stages of development, and make code more readable. 

## Why Should I Care? 

One of the features that make it easier to get started with JavaScript is that it's a **loosely-typed** language, meaning that it infers what type a value is from the type of data it contains. This makes initially learning the language quicker than it would be with a strongly-typed language like Java, but there are some [.......oddities](https://www.destroyallsoftware.com/talks/wat). And those oddities can cause problems when they collide with our very human, frequently error-prone brains. 

To paraphrase [Kyle Simpson](https://twitter.com/getify), bugs live in the space that is created by the distance between how we think JavaScript works, and JavaScript *actually* works. One way to close that gap is to comprehensively master how type coercion works in JavaScript, and avoid using certain edge-case values that will cause errors. This way is a LOT of work, that may or may not be worth it to you. Another way is using a type system like TypeScript or [Flow](https://flow.org/) to add more type safety to you programs.
Introducing our July 2019 sponsors
Tags: meta
Published: 2019-07-02 13:08:07

---
title: Introducing our July 2019 sponsors
published: true
description: Our wonderful sponsors are vital to the health of dev.to and it is great to work with companies contributing so much to the ecosystem.
tags: meta
cover_image: https://thepracticaldev.s3.amazonaws.com/i/e4der13h3fse638byrbm.png
---

This month, we return two sponsors and introduce a new partner for the month.  Thank you to each of these companies for being a valuable DEV Community partner and supporter.

Please take a few minutes to explore their offerings and consider them for your company or next project.


## **DigitalOcean**

[DigitalOcean](https://do.co/devto) is a much-loved cloud computing platform. I'm always impressed by how well-built _and well-documented_ the DigitalOcean core products are. It's easier said than done, and they've been able to stay ahead of the curve.

DigitalOcean has been our longest-running supporter to date, and we're extremely thankful for their consistent support.  Their commitment to the developer ecosystem is crystal clear.

As an organization, it's awesome to see the evolution of their service and their remarkable ability to stay top of the game for years now.

{% organization digitalocean %}

## **GoCD**

[GoCD](https://www.gocd.org/?utm_campaign=dev_to&utm_medium=dev_homepage&utm_source=logo_link&utm_content=gocd_homepage&utm_term=) is a continuous delivery tool built by Thoughtworks, one of the most reputable software development firms we've ever dealt with.

This is a feature-rich tool with some really fabulous visualization. Definitely worth considering for your organization or project. The product is very well supported through documentation, resources, and of course, the open source community. Very much worth checking out.

They've also put together a new page which allows you to take GoCD for a [test drive](https://www.gocd.org/test-drive-gocd/).

Thoughtworks has been such an awesome supporter, thank you so much!

{% organization gocd %}

## **Triplebyte**

[Triplebyte](https://triplebyte.com/a/YU8fSn0/june-recognition) allows developers to take one quiz and immediately get into the interview process with top tech companies if you qualify. It should be a part of any developer's job search process.

I personally took the Triplebyte quiz and the questions felt like a genuine test of real world software development principles. I'm spoken for in terms of work and you may be as well, but I'd suggest giving the quiz a spin either way.

{% organization triplebyte %}

***

These organizations are helping us build the best community we can. I urge you to check out their offerings if you are in the market for their services.

Happy coding ❤️
Accessiblity is on the Menu
Tags: css, beginners, javascript, codenewbie
Published: 2019-07-02 13:02:27

This post was the first on my Dev.to timeline/list thingee when I looked today. {% link https://dev.to/chinchang/an-interactive-and-practical-introduction-to-web-accessibility-22o1 %}
I've yet to read it, but when I checked today's tasks on FreeCodeCamp, it seems the next module is "Applied Accessiblity". 

![](https://thepracticaldev.s3.amazonaws.com/i/ncg1m3amnn18ypuzid82.jpg)
I'm hoping to make it through both of these today but we'll see.
React & Friends
Tags: react
Published: 2019-07-02 12:47:03

---
title: React & Friends
published: true
description: 
tags: #react
cover_image: 
---

> No man is an island
- John Donne

Yep, I believe this is true even *React* would agree. While learning it I was drawn into it by its simplicity.

The learning curve is much more something like this: 

![React Learning Curve](https://thepracticaldev.s3.amazonaws.com/i/6yl30tsm0fpwpw2hyq4m.png)

So it is not so scary at first. As a beginner I really took the time to enjoy learning it until...

![Shocked](https://media.giphy.com/media/cmyXfOrnrBC3EZUPiv/giphy.gif)

The friends came.

And then suddenly the learning curve just morphed into something like this:

![Friends Learning Curve](https://thepracticaldev.s3.amazonaws.com/i/afk79qn190krpoe5rfpq.png)

So whenever you guys are about to climb this mountain of experience. I just want to share some advice.

> Take the stairs not the elevator. And don't look up!

Salamat.
Make angular reactive forms strongly typed.
Tags: angular, rxweb
Published: 2019-07-02 12:14:00

Reactive forms are complex, Hence they must be strongly typed with the respective  model. 

This can be achieved through `IFormGroup`

Let's see how:

1) Install [@rxweb/reactive-form-validators](https://www.npmjs.com/package/@rxweb/reactive-form-validators)

> npm i @rxweb/reactive-form-validators

2) Create user model class and declare property of fullName.

```js
import { prop } from "@rxweb/reactive-form-validators"

export class User{
  
  @prop()
  fullName:string;

}
```
3) Now create the Component which uses `IFormGroup<User>` to make your form stronglyTyped with model.

```js
import { Component, OnInit } from '@angular/core';

import { RxFormBuilder,IFormGroup } from '@rxweb/reactive-form-validators';
import { User } from "./user.model"

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {

    userFormGroup: IFormGroup<User>

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        this.userFormGroup  = this.formBuilder.formGroup(User) as IFormGroup<User>;
        this.userFormGroup.controls.fullName.setValue("John");
        let fullName = this.userFormGroup.value.fullName;
        
    }

}
```
4) Create user form in the HTML:

```js
<div>
    <form [formGroup]="userFormGroup">
        <div class="form-group">
            <label>Full Name</label>
            <input type="text" formControlName="fullName" class="form-control" />
        </div>
    </form>
</div>
```

Please refer this [working example](https://stackblitz.com/edit/angular-jmshh8)
JQuery Footguns?
Tags: beginners, help, discuss
Published: 2019-07-02 11:44:15

I've been tasked with building a small application over the next two weeks, and must use JQuery to do so.  Left to my own devices I'd probably just keep it vanilla, but leaving me to my own devices is not generally recommended.

I've never used JQuery for anything larger than 200 lines, and that was circa 2012.  Is there anything I should watch out for?  Any seemingly innocuous patterns that create more problems than they solve?

A quick glance through the documentation suggests I can just sort of use it as a shorthand for some common operations like grabbing DOM nodes and performing AJAX.  Should I just be building my application in much the same manner as I would be otherwise, just more concisely, or are there ways to leverage the library even more powerfully that I'm missing?

Thanks!

Photo by Ben White on Unsplash