teleren/devto huggingface dataset:
starting to play around with microk8s and Virtualbox
Tags: k8
Published: 2019-12-16 03:02:31

---
title: starting to play around with microk8s and Virtualbox
published: true
description: 
tags: k8
---

I have some time off so I started setting up a cluster of VMs with VirtualBox and microk8s. https://microk8s.io/

I ended up using Ubuntu Server 18.04. Crazy how much has changed as time has gone on.

I did not get it working yet (not surprising).

I was still at the basic level of setting up my servers really. I needed to change to a static IP address and of course Ubuntu 18.04 has its own special way of doing that with netplan.

https://linuxconfig.org/how-to-configure-static-ip-address-on-ubuntu-18-04-bionic-beaver-linux

Netplan uses YAML as a configuration file format. I cannot help but think it was written by monkeys-without-brains. It is a known fact that only monkeys-without-brains like YAML. Sigh.

I am not a fan of YAML.

One other thing I had to look up syntax for was bringing interfaces up and down with the IP command.

http://tldp.org/HOWTO/Linux+IPv6-HOWTO/ch05s02.html

The syntax is blatantly bad. The ip command has been around a while but man ... what happened to ifup and ifdown ... do one thing linux. Sigh.

I then tried to get my servers to join each other and they refused. I checked that they could ping and ssh (which they could).

Getting it all running will happen another day!
Memory Card Game With Luda
Tags: javascript, crossframework, codepen
Published: 2019-12-16 01:23:10

---
title: Memory Card Game With Luda
published: true
tags: javascript, cross-framework, codepen
---

This is a memory card game built with Luda - A library helps to build cross-framework UI components.

Get to know more about Luda at [https://github.com/oatw/luda](https://github.com/oatw/luda)

{% codepen https://codepen.io/oatw/pen/gObrvLJ %}
Create React App Bash Script Update
Tags: react, bash, webdev, discuss
Published: 2019-12-16 00:42:28

In a [previous blog post](https://dev.to/jimmymcbride/building-a-custom-react-boilerplate-script-2hio) I wrote about a bash script I wrote that would basically run create-react-app (CRA) and then it would delete the src folder and the package.json and copy over the src folder and package.json from a boilerplate I built off of the default CRA into the new project and then install the new dependencies, open the project in VS Code and start the server. 

Since then, I have learned how to build my own CRA template! You can read about that [here](https://dev.to/jimmymcbride/create-your-own-react-template-49p7). Now that I can just install my own template it has cut down a good chunk of code, so I thought I'd share my bash script now that it has lost a few extra pounds.

So now my bash script looks something like this:
```bash
#!/bin/bash

# run create react app
yarn create react-app $1 --template bushido

# Push into new project directory
pushd $1

# Open new project in VS Code
code .

# Runs new server
yarn start

```

And just like that, all I need to do is, `create <project-name>`, and I have a script that will spin up a my custom react template with redux and router and other things already set up, open it in VS Code and start the server all in just one easy command. Thanks for reading! If you want to learn the basics on how to create a bash script, [check out this blog](https://dev.to/jimmymcbride/write-a-bash-script-101-4n2p).
Find and replace text in project files with vim
Tags: vim, fzf, replace, text
Published: 2019-12-16 00:37:58

---
title: Find and replace text in project files with vim
published: true
description: Find and replace text in project files with vim
cover_image: https://raw.github.com/gko/vimio/master/screenshot.png
tags: vim, fzf, replace, text
---

I've seen a lot of articles describing how to replace text with the `cfdo` command and others that describe how to find files with `FZF`, but I couldn't find one that «puts it all together», so I decided to make a short instruction.

## Prerequisites

First you need to install [fzf](https://github.com/junegunn/fzf) via [vim-plug](https://github.com/junegunn/vim-plug):

```vimscript
call plug#begin()

" if you have fzf installed via brew
if isdirectory('/usr/local/opt/fzf')
    Plug '/usr/local/opt/fzf'
else
    Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
endif
Plug 'junegunn/fzf.vim', {
        \ 'on': [
            \ 'Ag',
            \ 'Rg',
            \ 'FZF',
            \ 'Files',
            \ 'Buffers',
            \ 'Commits',
            \ 'BCommits',
            \ 'Tags',
            \ 'BTags',
            \ 'History',
            \ 'Lines',
            \ 'BLines',
            \ 'Marks'
        \ ] }

call plug#end()
```

and then [ripgrep](https://github.com/BurntSushi/ripgrep#installation)

### Configuring `Meta key` (⌥) in `macOS` terminal

Some shortcuts use `Meta` key. To make it work properly in `macOS` terminal check the «Use option as meta key»:

![terminal](https://raw.githubusercontent.com/gko/upside-down/master/terminal.png)

Or «Esc+» option in `iterm2`: 

![iterm2](https://raw.githubusercontent.com/gko/upside-down/master/iterm2.png)

## Finding and replacing text

1. To search text within project files simply type `:Rg <text>`. This will open up a FZF buffer with a list of files.
2. Then with a <kbd>Tab</kbd> key you can select/deselect files that you want to pass to `quickfix` window. To select all files tap <kbd>Alt/⌥</kbd>-<kbd>a</kbd> and to deselect <kbd>Alt/⌥</kbd>-<kbd>d</kbd>.
3. Once your selection is ready hit <kbd>Enter</kbd> to pass selected files to `quickfix` buffer.
4. Now you can replace text in all files within `quickfix` buffer with `:cfdo %s/<text to search>/<text to replace with>/g | update`.

The `cfdo` command simply executes command on every file in the list, and the `update` command after the pipe saves the results to the disk.

I've used here some of the snippets from my vim setup. You can find it here:
{%github gko/vimio%}
Stencil JS Event handling!
Tags: stenciljs, events, listeners, webcomponents
Published: 2019-12-16 00:19:46

Events and Listeners can be tedious in native JS. Stencil makes it easy! Check out [my latest post](https://terodox.tech/stencil-js-part-4/) on the @Event and @Listener decorators in Stencil.

https://terodox.tech/stencil-js-part-4/
Titanic dataset analysis
Published: 2019-12-15 23:48:52

The Titanic dataset analysis has shown that 44.6% of passengers on the ship survived.

SURVIVAL
According to passengers class and sex:
Out of 216 passengers in the class 1, only 136 passengers survived. Which comprise of 91 female and 45 male.
Out of 184 passengers in the class 2, only 87 passengers survived. Comprising of 70 female and 17 male.
Out of 487 passengers in the class 3, only 119 passengers survived. Which comprise of 72 female and 47 male.

According to sex:
Of a total of 314 female about 233 of them survived (74%)
Of a total of 573 male about 119 of them survived (19%)

According to relatives aboard:
Out of relatives from range 0 to 10, the relatives of 4 had the most surviing rate of 66.7%, that is 6 survived out of 9 passengers.

According to Ticket bought:
Those in passengers class 1 that survived, paid more for the ticket than those that did not survive.
Makers Week 5: A Whole New Language
Tags: makers, javascript, jasmine
Published: 2019-12-15 23:32:54

Weekly Goal:
*Can you learn a new language and its patterns?*

We started JavaScript this week which threw me because I thought I'd have a bit of a head start. I was wrong. We are using *prototypes* which I had never seen in JavaScript so I guess I'm in the same boat as everyone else. 

Day 1

So the fist day of learning a new language was spent primarily on learning syntax. We read the documentation and converted fizzbuzz to JavaScript using TDD. This was fine for me because I had done some JavaScript so it was mainly just remembering the syntax. We used *Jasmine* for testing which was similar enough to especially to not cause many problems(mainly syntax). But it was still difficult to go back to it after 4 weeks of ruby!

Day 2

After the first day of JavaScript I got the hang of it. Although getting used to using prototypes is a little awkward. I’d never seen them before but they seem to work like classes so they’re not too new.

Day 3 

We started on the DOM(domain object model). Which we can use to make a website dynamic. This seems very useful because if we wanted to change the page before we had to make a post request and redirect the page. We can now make changes without having to reload the page. This can be done through JavaScript but there’s a library that makes it a lot easier called jQuery. In plain JavaScript you’d have to get an element by using *”getElementById”* where as all you need in jQuery is *”$(“#name of id”)”*. The *#* is if you’re searching by id, It’s a *.* for a class and just a name for a tag. It seems like it has a lot of potential uses.

Day 4

On day 4 we were using *API’s* which were awkward to set up. The way I understand them is they have loads of information that you can then use in your app. Although I’m sure there’s more to them. We used a weather API for the thermostat to tell the current weather in a selected location. It took us a lot of time to get them set up but once we did it was awesome to see it working.

Day 5 

After we were introduced to API’s we thought it was best to revisit them. So that’s what we did and we managed to get them done. But we still had a bit of trouble mainly because I downloaded the slim jQuery file which doesn’t have some important functions. Anyway we got it working in the end.

Summary 

Overall a lot to take in I think having a fair bit of knowledge of JavaScript really helped me out. The API’s are cool and very useful. I also like using JavaScript. I reached my weekly goal so it was a good week.
What is with all the Python hate? 
Published: 2019-12-15 23:02:35

I have reasons for preferring other languages over Python, but I'm actually not going to write about that.

Instead I am writing in response to this sentiment 

"They're not helpful to the people reading these articles[...] 

"If you really want D to succeed, simply evangelize it. Don't use it as a way to attack others." -- [@Safi](https://dev.to/safijari/comment/j12a)

# Articles in question

{% link https://dev.to/jessekphillips/list-comprehension-in-d-4hpi %}

{% link https://dev.to/jessekphillips/printing-in-d-4nec %}

# Response

This is a completely understandable position to take. To be clear I am not attacking the author, his programming ability, choice of design. I genuinely find these articles well written. So what is my intent when adding the comment? I would say it started here 

{% link https://dev.to/jessekphillips/boolean-in-d-943 %}

"I recently got to work outside my comfort zone, rather than scripting in D I was to utilize Python." 

This resulted in 14 posts of very basic objectives. As someone who has programmed for some time it is hard to realize the importance of articles on the basics.

Articles from other languages provide additional insight into what people find useful. This can be very inspirational to create similar content.

Now I link back to the original article to give credit where credit is due. I could leave it at that. However, I posted back to the original article to inform the original author.

This action is of course leaves the door open for language debate. Ultimately the article I'm writing is a direct comparison with a conclusion where I favor D, so yes, please debate my conclusions.

But what of my comment referencing this debatable topic? Well I did attempt to pull the discussion into my article. I probably could have done it earlier and be better about it.

Clearly article readers are there to learn something about Python. Maybe I should work on changing my messaging.
CSS animation using CSS properties and some javascript
Tags: codepen
Published: 2019-12-15 21:54:37

---
title: CSS animation using CSS properties and some javascript
published: true
tags: codepen
---

<p>Move the mouse around to see the power of CSS transition based on CSS properties (variables). Very powerful and simple to implement.</p>

{% codepen https://codepen.io/netsi1964/pen/oNgzOPL %}
VS Code + GitHub Gist = Developer Micro-Blogging (aka a "GistLog")
Tags: showdev, vscode, webdev, discuss
Published: 2019-12-15 21:07:32

---
title: VS Code + GitHub Gist = Developer Micro-Blogging (aka a "GistLog")
published: true
description: 
tags: showdev, vscode, webdev, discuss
---

In a [previous post](https://dev.to/lostintangent/vs-code-github-gist-powerful-cloud-backed-scratchpad-7i1), I introduced [GistPad](https://aka.ms/gistpad), a new VS Code extension that provides an in-editor scratchpad/code snippet manager, built on top of [GitHub Gists](https://gist.github.com). However, after releasing the extension, and talking with many developers, I learned that there was another interesting use case for Gists, that could benefit from further optimization: **documentation/mini-blogging**. Since Gists are persisted, tied to your GitHub identity, and easy to create, they represent a great solution for maintaining your personal "knowledge base" and sharing it with your team/colleagues/friends 📚

In order to reduce context switches, and allow you to easily document/retain valuable information as you acquire it, GistPad now allows you to create micro-blog posts directly from VS Code, and stored as GitHub Gists. Since VS Code is a world-class markdown editor, this provides you with an awesome authoring experience, that is easy and familiar to use. Finally, by means of an integration with [GistLog](https://gistlog.co), your micro-posts are easily shareable with others, thanks to a beautiful web publishing experience and support for RSS subscription 🚀 Check out what this looks like in the following gif:

{% twitter 1206004271264583680 %}

I'm excited to see how this can be used as a middle ground between tweeting and blogging, where the information you want to share/retain is more than a quick thought, but not quite an entire post. Additionally, since GistPad allows you to easily migrate local files/snippets to Gists, this makes it really easy to write content that is centered around what matters most: code. If this experience looks at all interesting and/or you get a chance to check out GistPad, please let me know what you think and any feedback you may have. I want this extension to be by and for the community 🙌🏻

![](https://user-images.githubusercontent.com/116461/69903980-98819b00-1355-11ea-913b-c51981891bcd.png)

For more details, check out the documentation for GistPad's micro-blogging support [here](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs#gistlog).
CSS Transform playground
Tags: codepen
Published: 2019-12-15 21:08:17

---
title: CSS Transform playground
published: true
tags: codepen
---

<p>Just playing around with some of the CSS Transform options. The pen can easily be extended to have more controls. An array of wanted controls can be found in the top of the javascript pane - try adding some. You will get sliders where you can specify which CSS property to be able to control.</p>
<p>Updated to the pen:</p>
* 2017-11-11: Fixed issue where image could not be seen.
* 2018-12-01: Optimized UI and added more options. You can now also copy'n'paste styles.
* 15th Dec 2019: Made labels with value visible again.

{% codepen https://codepen.io/netsi1964/pen/vKRwXo %}
I wrote my first eBook!
Tags: book, programming, discuss
Published: 2019-12-15 21:05:18

---
title: I wrote my first eBook! 
published: true
description: How I Became a Programmer
tags: #book #programming #discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/utoytbhaighil2g0qyrs.jpg
---

Hello world!

I am proud to announce that my ebook "How I Became a programmer" is (self) published on Amazon. This book is about my story how I got into the IT industry and what I  think beginners need to do in order to get their first programming job.


If anyone is interested in reading it go to this <a href="https://www.amazon.com/dp/B0813Y9VK8/">link</a> and purchase it.

In case that you have any questions feel free to contact me on: <b>okand_anvandare@protonmail.com</b>
 

Cheers!

Djordje
Computational Thinking / Algorithm Design
Tags: firstyearincode, productivity
Published: 2019-12-15 20:50:05

The third part of Computational Thinking is the most important one: How do you design an algorithm?

It all starts with the idea for a new program. The problem is well understood and already broken down into smaller problems. You've already identified a few recurring patterns. 

![Sketchnote Algorithm Design](https://thepracticaldev.s3.amazonaws.com/i/1dnao4f05asos8fpzjhe.jpg)

An algorithm helps you to break down a problem into concrete steps for the computer to execute. 
Let's say you're tasked with determining if a given email address has the right format. The input parameter is an email address a user has filled into a web form. The algorithm needs to return `true` or `false`. Does the address include an `@` sign? If not, return `false`. Does the address include a top-level domain? If not, return `false`. And so on.

What are your thoughts on this? How did you learn to design algorithms?

---

_21 Lessons helps Junior Developers to level up their skills step by step via their weekly newsletter. Do you want to get out of Tutorial Hell or you're wondering how you develop the skills to write sophisticated programs yourself? [Sign up](https://learn.21-lessons.com/junior-dev-insights) and receive weekly articles and recommendations right in your mailbox._
State machine advent: One event, two possible state transitions (15/24)
Tags: javascript, typescript, react
Published: 2019-12-15 20:26:13

Conditional logic is everywhere. While state machines reduce conditional logic by eliminating impossible states, there is some conditional logic we want to have within our machines. In particular, when one or the other action should be executed or multiple state transitions exist. We can define such conditional logic using the very concept we've learned [yesterday](https://dev.to/codingdive/state-machine-advent-guard-state-transitions-guard-actions-14-24-oc3), guards.

By providing an array of possible state transitions, the state transition with the first guard that evaluates to true will determine the next state of our machine. Let's say we want our thermostat to distinctively express whether it is cold or warm. If the temperature is below 18°C, it should go into the `cold` state and above, transition to the `warm` state.


```typescript
import { Machine, assign } = 'xstate';

const thermostatMachine = Machine({
  id: 'thermostat',
  initial: 'inactive',
  context: {
    temperature: 20,
  },
  states: {
    inactive: {
      on: {
        POWER_TOGGLE: 'active'
      }
    },
    active: {
      initial: 'warm',
      states: {
        cold: {},
        warm: {},
      },
      on: {
        POWER_TOGGLE: {
          target: 'inactive',
        },
        SET_TEMPERATURE: [
	        {
	          target: '.cold',
	          cond: (context, event) => event.temperature < 18,
	          actions: assign({
	            temperature: (context, event) => event.temperature,
	          }),
	        },
	        {
	          // transition without a guard as a fallback.
	          target: '.warm',
	          actions: assign({
	            temperature: (context, event) => event.temperature,
	          }),
	        },
	     ]
      }
    },
  }
});
```

Think of the state transition array as a switch case to determine the next state of a machine. The `default` transition can be expressed as a state transition without a guard as seen in the example above. 

Notice how we had to duplicate the action to assign the temperature. Similar to when machines transition from one state to another, `actions` are only executed if no guard is defined, or when a guard evaluates to true.

To give one more example of this behavior, the code below will never call the 'log' action.

```JavaScript
[
	{
		target: 'cold',
		cond: () => false,
		actions: 'log',
	},
	{
		target: 'warm',
	},
]
```

Tomorrow we'll refactor the `thermostatMachine` so that we don't have to define the same action twice.

### About this series
Throughout the first 24 days of December, I'll publish a small blog post each day teaching you about the ins and outs of state machines and statecharts.

The first couple of days will be spend on the fundamentals before we'll progress to more advanced concepts.
We should have an email for each website
Tags: email, alias, privacy
Published: 2019-12-15 20:00:20

> Why do I receive so many spams? 

When this question was asked by my girlfriend (now wife 😅), my immediate answer was "Stop giving away your email" and I suggested creating a secondary email for "suspicious" websites. In addition, using the same email everywhere is like leaving the same **footprint** on the Internet, allowing advertisers to `cross-reference` your online behavior, affecting therefore your privacy.

![](https://i0.wp.com/thevpn.guru/wp-content/uploads/2019/01/How-to-Minimize-Your-Digital-Footprint-For-Privacy-Protection.jpg?fit=848%2C565&ssl=1)

She followed the advice, created a second email and was happy at first. But now she doesn't even check this mailbox as there are so many spams in it 💁🏻‍♀️.

So creating a second email is not a true solution. She needs more than 2, maybe hundreds. **And why not an email for each website**? But she cannot go to gmail or outlook to create hundreds of accounts, this is unmanageable. There must be a better way.

The solution, as far as I know, is **email alias**. An alias is actually a normal email address but all mails sent to an alias will be forwarded to your *real* email. Alias acts therefore as a *shield* (or a *proxy*) for the real email. An alias can be disabled anytime, making the spams stop.

Nowadays, some websites allow to unsubcribe quickly but a lot of them still make unsubscribing a difficult process. Some wouldn't even honor the request. And this doesn't stop the websites from cross-referencing your data with your email being the `primary key`.

Currently there are several solutions for creating email alias, they might give different names to the email alias though. A quick search on Firefox/Chrome store should give a handful of results. As a founder of such a solution, I would obviously recommend mine 😉 but most of the other solutions also work fine.

Let's make spammers' life harder with email alias!
I need to "get out"
Tags: watercooler, productivity, ramblings
Published: 2019-12-15 19:45:49

Recently, I came upon the realization that there are a couple of reasons why I should leave my computer more often.

Firstly, talking with someone on Discord or Telegram will not produce the same human relationship as talking in real-life would. I don't see facial expressions or body language. If it's simply text, without voice, I can't even detect tones-of-voice.

Staying on the computer also creates the fallacy that I'm being productive. Sometimes, checking email, twitter, facebook and GitHub in a loop is not accomplishing anything. Granted, I can be productive online, but I can also fool myself into feeling productive while I'm wasting time. In the long run, this doesn't make me feel more productive at all.

Lastly, I miss out on so much. The world is full of sunshine, whereas screens don't usually work well in the sunlight. They force me to stay inside, in my room, just talking to Alexa. So I go to the coffee shop and work there.

And so, a message for Elon Musk: Create a computer that loves parks and birds. Make a machine that moves with music and whets you with waves of water.

*[Insert applause here]*