teleren/devto huggingface dataset:
My girl in IT
Tags: discuss
Published: 2018-09-14 06:05:24

---
title: My girl in IT
published: true
description: 
tags: discuss
---
Recently I was asked by my wife, is something she could learn/do to help me in my IT job. What options do you see?
Say: You want to work 4 days and your girl 1 day.  And you want to co-operate. 
 What IT stuff can she do? What should I teach her?
I am cloud/python/java/devops person.
How long after getting into development did you start writing tests first?
Tags: discuss, javascript, testing
Published: 2018-09-14 04:33:01

---
title: How long after getting into development did you start writing tests first?
published: true
description: How long after getting into development did you start writing tests first?
tags: discuss,javascript,testing
---

I'm interested in hearing from NodeJS/Javascript developers, but this is a general question.

How did it help? Which benefits were immediately visible?

Also, any good resources for starting out with testing?
What JS Logging library / tool do you use?
Tags: discuss, javascript, node, logging
Published: 2018-09-14 00:06:15

---
title: What JS Logging library / tool do you use?
published: true
tags: discuss, javascript, node, logging
cover_image: https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/00/60/29/metablogapi/8103.image_thumb_6E82A947.png
---

I am trying to decide on what logging module to try out for my next project. I'd love the dev community's input on: 

A) What logging lib you use
B) Whether you structure your logs (and how)
C) Where you store your logs or any other logging infra you have

I have been using Winston, but I would like something that supports structured logging out of the box. The general ecosystem on NPM seems to be pretty split, and some options seem to be popular but un-maintained.
What Google API(s) are worth paying for?
Tags: discuss, google, api, funds
Published: 2018-09-13 23:21:40

---
title: What Google API(s) are worth paying for?
published: true
description: What API(s) have you personally worked with and what purpose did they serve? I am very interested to hear your use cases.
tags: discuss, google, api, funds
cover_image: https://thepracticaldev.s3.amazonaws.com/i/l23eeygz28ju73j503ee.png
---

I received a $200 time limited funds to use the Google APIs did and only 70 days left to use them for something.

I want to take this opportunity to better look into what is available these days and play with different APIs because w00t free service and waiting for it to expire is stupid.

What API(s) have you personally worked with and paid for and what purpose did they serve? I am very interested to hear your use cases.
I really don't like the reactions stickied at the bottom of the screen.
Tags: meta
Published: 2018-09-13 20:59:36

---
title: I really don't like the reactions stickied at the bottom of the screen.
published: true
description: unnecessary and unnatural
tags: meta
---

I feel really bad this is my first post in a while, life's been really busy lately, but I just got the update that puts the article reactions stickied to the bottom of the screen (at least on desktop, haven't checked on mobile) but I really don't like it and it feels like a very unnecessary and unnatural too. After the article but before the comments is exactly when the user should be sending those reactions. After reading the whole article. And when you're reading the comments the reactions take up space because by then you already left your reaction.

I'll delete this tomorrow probably but I wanted to get my thoughts out there and see if maybe I'm thinking about it all wrong.

💖 you DEV
Next.js 6 Features: A Practical Introduction
Tags: javascript, nextjs, programming
Published: 2018-09-13 20:21:56

---
title: Next.js 6 Features: A Practical Introduction
published: true
description: 
tags: #javascript #nextjs #programming
canonical_url: https://auth0.com/blog/nextjs-6-features-introduction/
---

Next.js, a lightweight framework for static and server-rendered applications is popular for building Universal JavaScript applications. In this article, we'll cover the features of Next.js 6.

[Read on ▲](https://auth0.com/blog/nextjs-6-features-introduction/?utm_source=dev&utm_medium=sc&utm_campaign=nextjs6_intro)

![Next.js 6 Features: A Practical Introduction](https://thepracticaldev.s3.amazonaws.com/i/rve7em8n0r3vrfrrfsp1.png)
All of Android’s disadvantages are the only reasons it stays alive
Tags: android, opinion, mobile, ios
Published: 2018-09-13 19:35:19

---
title: All of Android’s disadvantages are the only reasons it stays alive
published: true
tags: android,opinion,mobile,ios
canonical_url: https://mnz.ro/all-of-androids-disadvantages-are-the-only-reasons-it-stays-alive-9dafc868fc3f
---

Android’s Advantages are closely tied with it’s Disadvantages, not only compared against iOS.

#### Android is free. Android is perverted with bloatware and spyware by carriers and OEMs.

Were it for iOS to be licensed (commercially) to third parties, everyone — starting with Samsung — would sell their own mother to put iOS on their devices.

#### Android is available across a lot of devices (and price ranges). Android has poor performance and requires a lot more resources than if it were specialized.

Can you spot more advantages? Disadvantages? Make correlations?

* * *
Fun Experiments in React Native 
Tags: reactnative, processing, processingjs
Published: 2018-09-13 19:27:32

---
title: Fun Experiments in React Native 
published: true
description: Creating a bouncing ball in react native and processing js
tags: React Native, processing, processingjs
---

I recently found out that I could use processing in a react native app and started to play around with it.

Processing is a visual programming language that makes data visualisations, interactive art and more. To find out more about it you can find it [at this link.](https://processing.org/)

To start with I created a simple bouncing ball, to do this a new project will have to be created and processing js will need to be installed.

```create-react-native-app BouncingBall 
npm install --save processing-js expo-processing```

Next I set up App.js in preparation for the sketch.

{% gist https://gist.github.com/kachaMukabe/ca2fee0e623da25827b0e7cde022784b %}

Processing has two methods that are necessary for every sketch, setup() and draw(). Setup is where you put all the code needing in setting up the app and draw is the method that is called every frame of your app.

First I set up some variables needed for the ball i.e velocity, position and gravity. These variables will be Vectors which will hold a 2D x and y value.

{% gist https://gist.github.com/kachaMukabe/a54fb5262b8605d0ef61c2718dee057a %}

Finally I added the code that will draw the ball too the screen and handle it's collisions with the edges of the screen.

{% gist https://gist.github.com/kachaMukabe/923edde2398a0cfb76417d3c7ca546ce %}

The end result:

![Bouncing ball gif](https://thepracticaldev.s3.amazonaws.com/i/upuo6zm15bf6y5lso2to.gif)
What in the IF is a ternary?
Tags: javascript, beginners
Published: 2018-09-13 19:15:10


---
title: What in the IF is a ternary?
published: true
description: Conditional (ternary) Operator
tags: #javascript, #beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/myhrte3sithmbk7kk5bs.jpg
---
Being a "newb" to Javascript syntax can be a bit overwhelming at times. For starters, you can solve any single problem 10 different ways. Which means, you can write the syntax a few different ways to get the same result. Thats why on my latest discovery (The conditional ternary operator) it prompt: (me to write this article).

*Lets dive deeper*

##What in the world is a ternary?
The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.

*Ternary Syntax*
```javascript
condition ? expr1 : expr2
```

if the `condition` is `true` the operator returns the value of `expr1`; otherwise it returns the value of `expr2`


Lets go though some examples *IF/ELSE* 

```javascript
let age = 16;

if(age > 18){
console.log('You meet the requirement');
}else {
console.log('Not yet!');
}
```

same example; revised
```javascript
let age = 16;

let ageRequirement = age > 18 ? 'You meet the requirement' : 'Not yet!';
console.log(ageRequirement); // 'Not yet!'
```
Ternary's can also have multiple conditions and expressions.

#Conclusion
This is obviously a very basic explanation as to how Ternary's work. My objective is the bring awareness to those who are new to writing Javascript like me. [Here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) is a great resource on the MDN that explains in great detail how to effectively use ternary's in your Javascript code.
What is the next big thing in frontend development? 
Tags: frontend, webdev, javascript, discuss
Published: 2018-09-13 18:33:33

---
title: What is the next big thing in frontend development? 
published: true
description: What are you excited about? What do you wait for?
tags: [frontend, webdev, javascript, discuss]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7h6241ltplh1h5coekq8.jpg
---

> Photo by Joshua Earle on Unsplash

I had some thoughts about this post quite some time but wasn't sure how to frame it. This tweet helped me

{% twitter 1040162175216693249 %}

## Subseconds build time

Did you see OCaml (you may know it as ResonML or BuckleScript) compiler in action? It caches everything as binary, so consequent builds are like 20 milliseconds. This is totally astonishing. Can not wait to see something like this for JS.

Maybe https://pax.js.org/? Who knows...

## Automatic code splitting

{% twitter 1015290488012722177 %}

[Related Parcel RFC](https://github.com/parcel-bundler/parcel/issues/885)

This will pair nicely with React Suspense

{% twitter 1040056401484304385 %}

## Per browser builds

@sitnikcode started this crusade called [browserslist](https://github.com/browserslist/browserslist) (correct me if I'm wrong). Imagine you specify which browser you want to support and compiler (transpiler) will provide builds for each browser in the list with all required polyfills with [all required changes to CSS](https://github.com/csstools/postcss-preset-env) and you can use small script in Lambda@Edge or Cloudflare-Worker to serve appropriate assets at the edge of CDN. Or compiler will fail if your code is not compilable (transpilable) for given browsers.

Also, it would be nice if it would compile it down to ES6

{% twitter 1038456514426687488 %}

For the reference, here is how builds per browse can look like [preact-hn webpack config](https://github.com/kristoferbaxter/preact-hn/tree/master/config)

## What do you dream about?

What is the most expected thing for you?
What do you think of static design tools?
Tags: discuss, design, tooling, workflow
Published: 2018-09-13 18:29:16

---
title: What do you think of static design tools?
published: true
tags: discuss, design, tooling, workflow
---

Designing in the browser is all the rage. '[Should designers code](https://twitter.com/designersshould?lang=en)' is a long running meme. What do you think of the static design workflow that is very common in the agency world from a development perspective?

Especially the last couple of years the landscape for design tooling got pretty scattered. We have at least 5 major tools: [Sketch](https://www.sketchapp.com/), [Figma](https://www.figma.com), [Adobe XD](https://www.adobe.com/products/xd.html), [InVision Studio](https://www.invisionapp.com/studio) and just recently [Framer X](https://framer.com/x/) launched. 

If you design something for yourself, you go straight into the browser or first explore some options in *static design tools*? It's not really about which tools is the best but is there still a place for these tools in the design workflow?
Explain Build Tools like I'm Five
Tags: explainlikeimfive, webdev
Published: 2018-09-13 18:18:01

---
title: Explain Build Tools like I'm Five
published: true
description: 
tags: #explainlikeimfive #webdev
---
 
Let's assume in this context, build tools like Apache Ant, Android Gradle and other language platforms having their own build tools. 

What are build tools and why we need them? 

Is it possible to work without them?
Diary - 2018.09.13
Tags: productivity, learning, journey, javascript
Published: 2018-09-13 17:22:38

---
title: Diary - 2018.09.13
published: true
tags: productivity, learning, journey, javascript
---

Today I made great progress on my personal website,
but nothing that interesting for you guys.

Instead I've got some interesting media:

- a great series on Netflix, called [Dark Net](https://en.wikipedia.org/wiki/Dark_Net_(TV_series))

- an interesting new episode of Wes Bos Podcast on [Habits of highly effective devs](https://syntax.fm/show/074/11-habits-of-highly-effective-developers)


And thanks for over **100** new followers in the last couple of weeks.
Have any DEV design concepts or ideas?
Tags: meta, discuss
Published: 2018-09-13 15:47:59

---
title: Have any DEV design concepts or ideas?
published: true
description: 
tags: meta, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/iv55gxpv8fiantphi8t7.png
---



We're going to be putting together some new stickers, t-shirts, hats, etc.

{% tweet 1039610486571065344 %}

If you have any fun plays on DEV in any way, feel free to plop them in this thread for us to use. Or if you're not an artist and just have an _idea_, that's helpful too.

By posting here, you're giving us the right to use any of these graphics in any way. 🙂
To Webpack or not to Webpack
Tags: web, webpack, bootstrap
Published: 2018-09-13 15:17:17

---
title: To Webpack or not to Webpack
published: true
description: Is it worth using Webpack, Grunt or Gulp for microsite development or is it an overkill?
tags: #web, #webpack, #bootstrap
---

I'm working on a simple microsite with a set budget. Nothing fancy- bootstrap+ jQuery + css and html. My first instinct was to start a new project with npm and then install Webpack. I have a few working sites built with Webpack but I wouldn't call myself proficient using it. Each time I use it, I have to look up all the tricks Webpack is capable of. Loaders for: css, scss, fonts, html, jpg assets. Plugins for global jQuery with '$', bootstrap module import, js minifiers, sass and css minifiers and a Webpack server for continuous builds. 

Setting it up would take at lest 2 hours from my budget. I would feel better having code automation but I'm not sure if the client would notice. Also, using Webpack assumes that the person who will be making code changes in the future will know how to use it too...

I wonder where is the line between using Webpack and simply coding it the traditional way.
Using a string of SVG text as an image source
Tags: svg, blob, xml
Published: 2018-09-13 15:03:16

---
title: Using a string of SVG text as an image source
published: true
description: See title
tags: svg, blob, xml
---

*My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.*

TL;DR:

```javascript
let svg = `<svg xmlns="http://www.w3.org/2000/svg" ...`;
let blob = new Blob([svg], {type: 'image/svg+xml'});
let url = URL.createObjectURL(blob);
let image = document.createElement('img');
image.src = url;
image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});
```

---

It is sometimes useful to compose an SVG programmatically as a string. Using that string as the `src` of an image is fairly straightforward (with one "gotcha".)

Step one: you need a string of SVG text.

```javascript
let svg = `<svg ...`;
```

Step two: convert the string to a blob.

```javascript
let blob = new Blob([svg], {type: 'image/svg+xml'});
```

Step three: create a URL to the blob.

```javascript
let url = URL.createObjectURL(blob);
```

Step four: create an image referencing the URL.

```javascript
let image = document.createElement('img');
image.src = url;
```

Step five: revoke the URL once the image loads for cleanup.

```javascript
image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});
```

---

However, the following ***does not work***:

```javascript
let svg = `
<svg width="50" height="50">
    <circle cx="25" cy="25" r="20"/>
</svg>`;
```

This results in a broken image:

![broken image](https://i.imgur.com/3Lsgp7A.png "No xmlns")

The `xmlns` attribute *must* be included on the `<svg>` element:

```javascript
let svg = `
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
   <circle cx="25" cy="25" r="20"/>
</svg>`;
```

And now it works:

![working image](https://i.imgur.com/G6bw388.png "Yes xmlns")

Chrome is not tolerant of a missing `xmlns` attribute in this case, which is, I guess, consistent: only inline `<svg>`s, embedded inside HTML markup, [are allowed to omit the `xmlns` attribute](https://www.w3.org/TR/html5/syntax.html#foreign-elements). External SVGs, used as the `src` of an `<img>`, must include it, apparently even if the SVG is "inline" in the sense that it created by the document itself as a blob, and even if the MIME type is `image/svg+xml`.
Remove dangling docker images and stopped containers. Cross platform solution.
Tags: automation, windows, docker
Published: 2018-09-13 14:34:47

---
title: Remove dangling docker images and stopped containers. Cross platform solution.
published: true
description: Remove dangling docker images and stopped containers. Linux/Windows version.
tags: automation, windows, docker
---


I know there are a lot of solutions for [this](https://stackoverflow.com/questions/32723111/how-to-remove-old-and-unused-docker-images), however if you need cross platform solution working both for for Windows and Linux OS, just use small and nifty sparrow plugin [docker-remove-dangling-images](https://sparrowhub.org/info/docker-remove-dangling-images): 


```
$ sparrow plg install docker-remove-dangling-images
$ sparrow plg run docker-remove-dangling-images
```

---

Best

Alexey
Getting Started with Vue.js Plugins [Production-Ready Example]
Tags: javascript, webdev, vue, beginners
Published: 2018-09-13 18:46:44

---
title: Getting Started with Vue.js Plugins [Production-Ready Example]
published: true
tags: javascript, webdev, vue, beginners
canonical_url: https://snipcart.com/blog/vue-js-plugin
---

![Getting Started with Vue.js Plugins [Production-Ready Example]](https://snipcart.com/media/203866/vue-js-plugin-1.jpg)

It's no secret that we <3 Vue.js.

So much so that it's a key part of our own [product's rewriting](https://snipcart.com/blog/progressive-migration-backbone-vuejs-refactoring).

In the last months, we've learned **a lot** about Vue. From building [SEO-friendly SPAs](https://snipcart.com/blog/vue-js-seo-prerender-example) to crafting [killer blogs](https://snipcart.com/blog/vuejs-blog-demo) or playing with [transitions & animations](https://snipcart.com/blog/vuejs-transitions-animations), we've experimented with the framework thoroughly.

But there's a missing piece in there:

**Something most proponents of the framework will have to work with is Vue.js plugins.**

For my own pleasure (and yours, hopefully) I crafted a custom plugin to show you how it's done in a step-by-step tutorial.

I'll also use this post to answer important Vue plugins questions:

 - What's a plugin?
 - What are they useful for?
 - What are the popular Vue.js plugins?

Time for the magic!

## A short story of Vue.js plugins

![vue-js-plugin](https://snipcart.com/media/203866/vue-js-plugin-1.jpg)

### What exactly is a plugin?

Plugins aren't something specific to Vue.js, and you'll usually find them in a large range of software. By definition, they indicate that an interface is provided to allow for extensibility.

**In other, simpler words, they're a way to add global features to an app.**

In Vue.js, a plugin should expose an `install` method that takes two parameters:

 1. The global `Vue` object.
 2. An object incorporating user-defined options.

Good news is they're not _that_ intimidating. Basic knowledge of Vue.js will let you start fiddling with plugins right away.

  

→ Read the full post & technical tutorial [here](https://snipcart.com/blog/vue-js-plugin)
Online wellbeing : what are your rules?
Tags: discuss, beginners, career, productivity
Published: 2018-09-13 10:22:53

---
title: Online wellbeing : what are your rules?
published: true
description: What are your rules to communicate online
tags: discuss, beginners, career, productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wt8mvl4fhdvmidxc6fa3.jpg
---

Working more and more online in a distributed company, we have to share some _wellbeing_ rules of how we use online tools that don't seem intuitive to everyone. And I've never seen a written list of a lot of this _culture_ shared by a lot of people I can meet online.

Since DEV is an awesome community, what about trying to build it!

Here are some rules that seem intuitive to me and that I try to follow (do you agree?) :

- Make sentences
- IF YOU WRITE WITH CAPITAL LETTERS YOU ARE SHOUTING
- No custom funny font, No custom funny color, No custom funny background
- Mention people only if they absolutely need to react (@here or Reply to All are the evil)
- Put a profile picture and a bio
- When you post on a chat (Slack), if you have an answer some seconds after your post, you are in a discussion so at least say "Sorry, I can't stay" if you were just posting something and leaving.
- When you leave a discussion on a chat, say it, don't disappear while everyone is waiting for your answer
- Embrace asynchronicity : When you post a blog post or message in a forum, don't DM or call everyone to ask if they've already read it, just wait.
- Don't edit a post without notifying people
- Links are fantatic, share a link instead of a description of how to find the information on a website

Do you agree with these? What are the online behaviors you follow and expect?
How many email addresses do you use?
Tags: discuss
Published: 2018-09-13 09:42:16

---
title: How many email addresses do you use?
published: true
description: 
tags: discuss
---

I've always had multiple email addresses, right now I have 6:

- One "private": let's say it's the main one, used for everything except for the things I use the other ones for.
- One "dev": for my dev related accounts: GitHub, Dev.to, DigitalOcean, Namecheap, that kind of things.
- Two for work: as a consultant I have an address at my company and one at the client's premises.
- A Gmail address: for Google stuff only.
- A "dirty" address: I don't really use it, but when I need to create an account I'm not sure to keep, I use this address, it allows me to keep the main one clean.

... and I'll probably have a 7th one soon enough (for freelancing, my dev one wont do and I'd like to keep work-related stuff outside the private one).

But I'm starting to think it's too much... hence the question:

How many email addresses do you use? What for?
Using Headers & Cookies with PHP's file_get_contents() function
Tags: php, http, headers, cookies
Published: 2018-09-13 03:00:24

---
title: Using Headers & Cookies with PHP's file_get_contents() function
published:  true
description: 
tags: php, http, headers, cookies
---
> This solution was originally linked to me by a colleague, all credit goes to [this tweet](https://twitter.com/LiamHammett/status/1033056901695762432).

 ![image](https://thepracticaldev.s3.amazonaws.com/i/s3pgwxogb92n2r4py2fh.png)

Did you know that using stream contexts, you can set headers when making HTTP requests with php's file_get_contents() function?

```php
$context = stream_create_context([
	"http" => [
		"method" => "GET",
		"header" => "Accept-languange: en\r\n" .
		"Cookie: foo=bar\r\n"
	]
]);

$file = file_get_contents('https://example.com', false, $context);
```