teleren/devto huggingface dataset:
How I started Docker
Tags: discuss, webdev, docker, devops
Published: 2019-06-04 07:00:52

---
title: How I started Docker
published: true
description: This is a story basically about my first encounter with Docker. How I started playing with docker with just one motivation and how I fell in love with the technology soon after.
tags: #discuss,#webdev,#docker,#devops
---

This is a story basically about my first encounter with Docker. How I started playing with docker with just one motivation and how I fell in love with the technology soon after.

So, I was coming back from office as usual. I had heard a lot about Docker in the past, but never had the motivation to get started assuming it would be complex and therefore, need a lot of time. Then on the night, one of my colleagues (also our co-founder) tweeted that “we are starting to experiment with Docker and that one of my another colleague will lead it". I was very happy, finally this could lead to my first encounter with Docker. I reached home at around 7 PM and I thought “wait, why not start today itself". At around 8pm, I started browsing blogs, going through their official documentation, etc. Very soon (like it happens with love at first sight) I was falling in love with Docker. From there on, I knew that tonight it has to be only the 2 of us.

Original Source: [Read more](https://www.innoraft.com/blogs/how-i-started-docker)

Docker Related : [DOCKER @ INNORAFT](https://www.innoraft.com/blogs/docker-innoraft)
My experience with ProtonVPN basic plan
Tags: vpn, protonvpn
Published: 2019-06-07 08:19:18

---
title: My experience with ProtonVPN basic plan
published: true
tags: vpn,protonvpn
canonical_url: https://kevinhq.com/my-experience-with-protonvpn-basic-plan/
---

First-hand experience with ProtonVPN “Basic” plan, which is not good. Though, ProtonVPN did keep their promise about their money back guarantee. It looks like it’s

[Continue readingMy experience with ProtonVPN basic plan](https://kevinhq.com/my-experience-with-protonvpn-basic-plan/)

The post [My experience with ProtonVPN basic plan](https://kevinhq.com/my-experience-with-protonvpn-basic-plan/) appeared first on [kevin's tech blog](https://kevinhq.com).
Window Recorder for macOS
Tags: macos, swift, showdev, tool
Published: 2019-06-04 07:55:54

---
title: Window Recorder for macOS
published: true
description: Pixel perfect window recordings
tags: macOS, swift, showdev, tool
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fqoce3uoevep8awnosw0.png
---

Quicktime is great for screen recordings on macOS, but only offers fullscreen or, area-set-by-dragging modes for capture.

Window Recorder is intended to provide a similar experience to the built-in screenshot tool, that simply "snaps" to windows, only to capture that exact region.

It's free initially, but will provide a premium upgrade in a forthcoming version.

Here's a landing page, with a link to the mac app store:

https://window-recorder.rhardih.io
Self-Steering Team - Go or Not Go?
Tags: team, selfsteering, culture, communication
Published: 2019-06-04 07:25:47

---
title: Self-Steering Team - Go or Not Go?
published: true
description: Some tips about self-steering culture
tags: team, self-steering, culture, communication
---

Currently, I'm working in a team of 4 developers and we start discussing to start using a self-steering culture. However, it's still a bit blurry on how to implement it in the team, regarding processes of deployment, code-review, communication, learning with each other, among other topics. 

_Does anyone here has experience with that and would like to share some tips?_ 📝
How I learned to stop worrying and love the MVP
Published: 2019-06-04 07:11:03

When I first started looking into coding bootcamps, I had no idea if this was something that I wanted to do. After a few months I found a few different ones I was interested in but I still felt unsure. Even after enrolling in the Software Engineering course at the Flatiron school I was unsure about my decision.

As I learned more about Ruby and object orientation I felt more confident in the material and my ability to understand it but something was still missing. I didn't have that 'Aha' moment where I knew that I had made the correct decision. It was not until we began working on our CLI application projects last week that I felt certain that this was something that I wanted to do.

While my project partner, RJ and I began to map out how we were going to divide the work and what topic we wanted to use, I began to think about more than just completing the assignments. I started to consider how to simplify our idea down to a [Minimum Viable Product](https://en.wikipedia.org/wiki/Minimum_viable_product).

After reading up on Minimum Viable Product and the benefits of this product development strategy, I approached RJ with an updated suggestion on where we should start. We began to plan out an MVP that was specific to our project and determine what it would take to get there.

When visualizing what an MVP for our project would look like I began to think about more than just writing methods. I started to consider how much time we could save by creating a working version and then building off of it for the rest of the week. I was hoping that we would be able to complete our MVP within the first couple of days and then start adding more intricacy for the last two days.

Luckily, as a result of this coordinated planning and preparation we were able to complete our MVP on the first day. As we had the rest of the week to add it, there was much less pressure to "complete" the project and we had time to improve on a working application.

![](https://media.giphy.com/media/9rjRwzhpZgt3QAYss5/giphy.gif)

Even though it was just a simple CLI application, this project proved to me that taking some time to plan it out before you get started can completely change the way you approach a project. I had no idea if I was going to like working on a CLI app or if I was going to like this coding bootcamp. However, after making something that works and turning it into something that looks and functions much better, I can say that I made the right choice and can't wait for what comes next!

You can find RJ and I's project on [Github](https://github.com/vizushu/module-one-final-project-guidelines-seattle-web-051319)
Docker @ Innoraft
Tags: discuss, webdev, docker, devops
Published: 2019-06-04 07:10:52

---
title: Docker @ Innoraft
published: true
description: My previous blog How I Started Docker was about my first encounter about Drupal. After that we all started playing with Docker and soon we adopted the technology with full force in our development workflow.In this blog I’ll be sharing my experience on how we can dockerize our drupal setups. Docker “Develop, Ship and Run Any Application, Anywhere”
tags: #discuss,#webdev,#docker,#devops
---

**Why we chose Docker**

Below are some of the reasons why Docker is the right choice for you:

1.Whenever we deploy on our dev servers, most of the time we used to scream, “What just happened? It was working perfectly fine on my local. Why isn't it working on Dev?”.

2.Our local environment and our dev, stage environments usually have different configurations in terms of server, for e.g., if I am using a machine, which is 3 years old, so there is a good chance that I have some old version of PHP, apache2 etc. More often than not we end up in a situation of different versions of different services in different environments which is not healthy for deployments.

3.Difficulty in the deployment of server related changes.

4.We were failing in updating the projects i.e. my local has 4 different projects and all support say php 5.3.3 version, now client asked us to update the php version of two of the projects. It was very very difficult to maintain different versions of the same service on same machine i.e. on local.

5.We were not able to experiments with different services of the same type.

Original Source: [Docker @ Innoraft](https://www.innoraft.com/blogs/docker-innoraft)

Read Also : [How I started Docker](https://www.innoraft.com/blogs/how-i-started-docker)
VAT Readiness Checklist for SMEs
Tags: vatreadiness
Published: 2019-06-04 06:23:34

Businesses in the United Arab Emirates have geared up for the Value Added Tax implementation since 1st January 2018. Ever since the law has been imposed, many small and medium-sized businesses have undergone changes in terms of infrastructure, payment of taxes, goods, and services. The most important aspect required to be reviewed by the SMEs in this context is to check and confirm the parameter for VAT readiness. Apparently, a majority of business houses is still not aware of the fact whether their trade requires [international taxation assistance](https://uaevatexpert.ae/international-taxation.html) to advise on the aspect of VAT implementation and readiness.

Here’s a five-point checklist that can assist businesses in tracking the graph.

##1. Have you modified your accounting documents?
 Have you updated your sales invoice, credit notes, quotations, debit notes, purchase record documents, and purchase orders? You need to modify each of the mentioned documents with the Tax Registration Number and other essential information related to VAT. 

##2. Are you at par with the VAT recordkeeping requirements? 
Your business is required to maintain all documents related to VAT for 5 years. You might be asked to show all original documents related to the trade any time during the 5 years. Failing to come up with the updated papers and submitting the same to the Federal Tax Authority will only cause legal hassles in the long run.
 
###3. Have you reviewed the procedures for buying and selling? 
The VAT compliances and liability may vary drastically on the basis of your business model. This is what makes it crucial for an individual to closely review the procedures for buying and selling. You need to follow up with the aspects of local sales, local purchases, Exports outside GCC, Exports in GCC, imports from and within GCC and more. 

One must always take VAT implementation seriously in order to avoid the risk of penalties and other legal tussles. Now that you are aware of the three key areas determining the perfect [VAT readiness](https://uaevatexpert.ae/vat-readiness.html) parameter, take some time out to think over it and verify whether your business model is in sync with the mentioned checklist.
#PureCSS - Responsive Letter M
Tags: codepen, css, purecss
Published: 2019-06-04 06:11:33

---
title: #PureCSS - Responsive Letter M
published: true
tags: codepen,css,purecss
---

[Visit Design Source](https://dribbble.com/shots/6315007-M-Logo)

<p>Responsive Letter M using CSS</p>

{% codepen https://codepen.io/AsyrafHussin/pen/OYqjRm %}
Video: Self Hosted Drone with Dokku
Tags: videos, dokku, drone, devops
Published: 2019-06-04 04:27:47

---
published: true
---


So following my most recent blog post I had a reader email me asking for a bit more detail about how I configured the Dokku host. It had been a bit since I did it the first time, so I live streamed for a bit and figured it out again and got a new instance deployed from scratch!

I VERY slightly edited that video down and wanted to share it here! I'm also going to be taking the content of it and using it to update my previous post!

{% link https://dev.to/coreyja/self-hosting-a-drone-ci-instance-cj7 %}
From the Devtools to the Clipboard
Tags: webdev, javascript
Published: 2019-06-04 03:29:55

## You CAN jam stuff into your clipboard from the devtools!

Have you ever spent far too long writing a clever little script in the browser’s devtools to get some information from a page? Maybe you’re trying to generate a list of recurring characters from the Marvel Cinematic Universe (MCU) with their names and secret identities from a Wikipedia page…

![That wasn’t too bad…](https://thepracticaldev.s3.amazonaws.com/i/3szspgl6xjarwganxy9e.png)


Or maybe you’re trying to get a JSON representation of all of the MCU movies sorted by total profit…

![Okay, that one took a little longer…](https://thepracticaldev.s3.amazonaws.com/i/4hovmh42ugz7x19u2hwx.png)

Or maybe you’re a **true masochist**, and you want to extract the Game of Thrones (GoT) character and actor names from the body of the GoT wiki page.

![SERIOUSLY, WHY WOULDN’T YOU PUT THIS DATA IN A TABLE‽](https://thepracticaldev.s3.amazonaws.com/i/ujr630gysoe9z3p93xwb.png)

---

## Anyway.

The norm here is to log the data into the console as JSON, then manually select all of the text with your cursor. Not only is this a nightmarish task with large datasets, it also has the potential to have incomplete data. Long strings (especially data URIs) get collapsed with an ellipse (…) by the dev tools. If you want to copy even small data URIs, this approach will leave you — and I’m putting this delicately — *completely boned.*

## Okay, how do we do it better?

With the `copy()` function! It just so happens the the devtools for Chrome, Firefox, and Safari (couldn’t test with Edge) all provide the `copy()` function for jamming anything you need into the clipboard!

✨🧙🏻‍♂️ IT’S MAGIC! 🧙🏻‍♂️✨

If you want to jam an object full of data into your clipboard, it’s as simple as stringifying the data and using `copy()`:

```js
const bigDataSet = [ ... ]
const bigDataSetAsJSON = JSON.stringify(bigDataSet)

copy(bigDataSet)
```

Now if you paste anywhere, you’ll find that your clipboard is chock full of JSON beautifulness.

*Protip:* If you want your data to be styled (with spaces, line breaks, etc) the `JSON.stringify()` method has you covered. For example, if you want the output to use 2 spaces as indentation:

```js
JSON.stringify(bigDataSet, null, 2)
```

For more information on what all you can pass into `JSON.stringify()`, check out the [docs on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).

---

## Wow, Trezy! You sure are smart and amazing!

Oh, I know. I appreciate you saying as much, though. If you want to fiddle with any of the code in the examples at the beginning of the article, you can find them [here](https://hastebin.com/okihububep.js), [here](https://hastebin.com/eyuqosuwik.js), and [here](https://hastebin.com/jarivurozu.js).
SwiftUI is Declarative.  What Does That Mean?
Tags: swiftui, swift, ios
Published: 2019-06-13 11:17:33

---
title: SwiftUI is Declarative.  What Does That Mean?
published: true
tags: SwiftUI, Swift, iOS
canonical_url: https://www.andrewcbancroft.com/blog/ios-development/ui-work/swiftui-what-does-declarative-mean/
cover_image: https://www.andrewcbancroft.com/images/social-assets/Twitter%20-%20SwiftUI%20is%20Declarative.%20What%20Does%20That%20Mean_.png
---

“Declarative” is one of Swift UI’s four core principles.

Aside from taking for granted that declarative is just “better” than _whatever else_, how about a visual to understand the declarative way of thinking?

Imagine yourself in a restaurant (sit-down or fast food, whichever).

When you want a burger, which best describes what you do?

![Burger Imperative](https://www.andrewcbancroft.com/blog/ios-development/ui-work/swiftui-what-does-declarative-mean/burger-imperative.png)

or…

![Burger Declarative](https://www.andrewcbancroft.com/blog/ios-development/ui-work/swiftui-what-does-declarative-mean/burger-declarative.png)

Saying **what** you want (aka, being “declarative”) is what the most probable thing you’d do in a restaurant.

That’s exactly the recipe you use when you’re working with SwiftUI.

## In Summary

![Burger Declarative Animation](https://www.andrewcbancroft.com/blog/ios-development/ui-work/swiftui-what-does-declarative-mean/burger-declarative-animation.gif)
mazebattles.com / open-source node.js+socket.io project
Tags: javascript, webdev, node, showdev
Published: 2019-06-04 02:41:15

---
title: mazebattles.com / open-source node.js+socket.io project
published: true
description: A website built with Node.js and Socket.io where users race against each other to solve generated mazes. Features a single player and one-on-one mode. Mazes are generated using Prim's algorithm.

Github repo: https://github.com/HenryDavidZhu/MazeBattles.com

canonical_url: https://github.com/HenryDavidZhu/MazeBattles.com

tags: #javascript, #webdev, #node, #showdev
---
Linux Desktop Icons
Tags: linux
Published: 2023-01-06 02:01:22

---
title: Linux Desktop Icons
published: true
date: 2019-06-04 01:05:37 UTC
tags: Linux
canonical_url: https://brandonrozek.com/blog/linuxdesktopicons/
---

I get asked a decent number of times how to add desktop icons on Linux. Luckily it’s incredibly easy. [It’s a `freedesktop` standard](http://standards.freedesktop.org/desktop-entry-spec/latest/).

In fact the simplest file would follow the format:

```
[Desktop Entry]
Name=Application Name
Exec=/path/to/executable -randomFlag
Icon=/optional/path/to/icon
Terminal=false
Type=Application

```

Once you have this saved to `yourapplication.desktop` move it to either `/usr/share/applications` if you want it system-wide or `/home/user/.local/share/applications` if you want it just for your `user`.
How to use state variables without sharing among different components inside a loop
Tags: react, javascript
Published: 2019-06-04 00:13:20


I have two cards component inside a loop as given below in the code. In the card I have a text field and an ADD button. Upon clicking on ADD button,the entered value in the text field will be populating inside the card. But when I do this , the other card is also showing the same value. That means , suppose I entered a value in the text field of the first card then the same value is showing in the second card as well. I know this is happening because I am using the same state variable inside the loop and which is sharing among the other card components inside the loop. I am not able to find a solution so that if I enter something in the text field of a card component then it will not reflect on other components inside a loop.

Here is the code:
https://codesandbox.io/s/silly-taussig-kgbot
What making a game in Vue.js taught me about Front-end development
Tags: vue, javascript
Published: 2019-06-04 00:00:00

---
title: What making a game in Vue.js taught me about Front-end development
published: true
description: By learning a little about Vue.js. I confirmed a suspicion I had about front-end development.
date: "2019-06-04"
tags: vue,javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/12an1wpg6xs6b7pz9ydp.png
canonical_url: https://browntreelabs.com/the-most-useful-battleship-game-in-vue-js/
---

This is the most useful thing I have ever done in my career. I have created my
masterpiece, my magnus opus. Beethoven himself would be shaking in his little
boots at the awe of this creation. Dear reader, I've done it, I have created:
"Battleshit".

![BattleShit](https://thepracticaldev.s3.amazonaws.com/i/12an1wpg6xs6b7pz9ydp.png)

https://codepen.io/cpow/pen/JqVjRL

## A disclaimer
I want to make it perfectly clear that I know the code here is terrible. It was
hastily written, it probably has bugs, and it doesn't follow vue.js conventions
all that well, at least, to my understanding.

## So why write it?
I wanted to learn just a little bit about Vue.js and to prove a little theory
I've had for some time now. That theory goes like this: All javascript
component frameworks operate in mostly the same way. They all have similar
patterns, conventions, and best practices. And they're all very easy to pick up
and start programming with. Our over-engineering of tools, tooling, and the lack
of a large standard lib in Javascript is what makes front-end programming hard.
Having to learn Vue.js, or React, or Ember, or Angular is easy; having to learn
the respective ECOSYSTEM of these frameworks is difficult. In Front-end development,
all the concepts are the same, we just find more and more clever ways to make them
difficult to understand.

> In Front-end development, all the concepts are the same, we just find more and more clever ways to make them difficult to
understand.

## So, onto BattleShit
This is a really really silly game I made in about an hour, give or take. I just
wanted to learn Vue.js a little bit, and through that, understand our ever evolving
front-end ecosystem just a little bit more. I can safely say that after
Battleshit, I have a greater understanding that we are just re-inventing the wheel
over and over again.

Anyway, enjoy Battleshit!
Incrementing State In Functional Components
Tags: materialui, react, hooks, usestate
Published: 2019-06-04 19:22:26

---
title: Incrementing State In Functional Components
published: true
tags: material-ui, react, hooks, useState 
canonical_url: https://stephencharlesweiss.com//2019-06-04/incrementing-state-hooks-vs-classical/
---

I was recently looking through the [Material UI documentation](https://material-ui.com/components/steppers/#horizontal-linear) for their `<Stepper>` component. In their implementation of the Horizontal Linear Stepper, they used the `useState` React Hook to set the state.

The implementation caught my attention because of the use of a parameter, `prevActiveStep`, which wasn’t defined anywhere else.

```
function handleBack() {
  setActiveStep(prevActiveStep => prevActiveStep - 1)
}
```

Digging into it, I realized that the `useState` can behave very similarly to the `setState` method for class components. Whereas both can set the value for a specific element in state, they can also take a function.

Here’s what that could look like.

# React Hooks Version

```
import React, { useState } from ‘react’;

function MyComponent() {

  const [activeStep, setActiveStep] = React.useState(0);

  function handleBack() {
    setActiveStep(prevActiveStep => prevActiveStep - 1);
  }

  return (
    ...
    <div>
      <Button onClick={handleBack} >
        Back
      </Button>
    </div>
    ...
}

export default MyComponent;
```

# React Class Component Version

To put this in perspective, let’s look at how this looks with a class component.

```
import React, { useState } from ‘react’;

class MyComponent{
  constructor(props) {
    super(props);
    this.state = {
      activeStep: 0,
    }
  }

  function handleBack() {
    this.setState( prevState => ({ activeStep: prevState.activeStep - 1});
  }

  return (
    ...
    <div>
      <Button onClick={handleBack} >
        Back
      </Button>
    </div>
    ...
}

export default MyComponent;
```

I appreciate the concision of this approach, though just to be explicit, it works the same as the following by not reassigning a state variable within `setState` (which React tends to complain about).

```
function handleBack() {
  const activeStep = this.state.activeStep - 1
  this.setState({ activeStep })
}
```

# Resources:

[How to use the increment operator in React | Stack Overflow](https://stackoverflow.com/questions/39316376/how-to-use-the-increment-operator-in-react)<br/>[Stepper React component | Material-UI](https://material-ui.com/components/steppers/#horizontal-linear)