Notes on JSON at Work

The book “JSON at Work” by Tom Marrs, it is a great introduction on how to create and use JSON.

It covers topics on how to quickly set up a test server in various languages. A quick introduction to the JSON Format.

Then covers how to use JSON with various common languages like JavaScript (a quick intro to Rest and a setup with json-server), Ruby and Java.

I really liked the part that goes really in detail into JSON-Schema

In the last part of the book it goes into JSON in the Enterprise, that part I mostly skiped as it was not very relevant for me.

I can recommend this book if you have had little or no experience working with JSON it is a great introduction to the subject.

Basic Setup of TypeScript with Jest

We will take a quick look at how to set up a project using TypeScript and Jest. By adding Jest to the project from the beginning this should encourage test driven development – or at least that developers have minimal effort

Init Project

npm init -y
npm i -D typescript ts-node
tsc --init

npm i -D jest ts-jest @types/jest
npx ts-jest config:init

mkdir src
mkdir dist

Configure Project


For TypeScript you need to adjust a couple of variables like:

  • outDir = “./dist”
  • rootDir = “./src”
  • (optional) target: “es2017” (if you are not supporting IE11)
  • (optional) module: “esnext”
  "compilerOptions": {
    "target": "es2017",                          
    "module": "esnext",
    // ...
    "outDir": "./dist",  
    "rootDir": "./src",
    // ...


the only thing that remains is to add a couple of scripts to make development easier.

  "main": "./dist/index.js",
  "scripts": {
    "start": "ts-node ./src/index.ts",
    "test": "jest --watch",
    "build": "tsc"

Init Git

It is always the best practice to use version control for coding projects – even if you are the only developer. Running Jest in “–watch” mode requires that the code is stored in a git repository


You need to tell git to exclude the node_modules folder. (This is done as the dependencies can be restored by running npm install). Create a file called “.gitignore” and add following line:


First commit

Since you have excluded

git init
git add .
git commit -m "Initial Commit"

Start Development

Demo Files

Create the files:

  • ./src/index.ts
  • ./src/index.test.ts


export const greeting = () => {
  return "Hello World!"


import { greeting} from "./index";

it('greets you', () => {
  expect(greeting()).toBe("Hello World!");

Run Demo / Start Development

Now you can start development by running

npm test

This will start jest and run your tests as soon as you change your code.

Design Failure: Removing the Minimize Button Elementary OS 5.0 Luna

Recently ElementaryOS 5.0 Juno got released. I immediately upgraded. Looked at it for two seconds and decided to go with Ubuntu.

The ‘killer’ feature that was missing was a small one – the minimize button is still not enabled by default.

Why was the minimize button removed?

Digging into this topic I found a statement about removing the default button.

a plan had already been laid out for the new standard of elementary apps: They would open and close instantly and even better, they would save their state before closing. 

Elementary Blog – Shaking up Window Controls (

Basically they decided that elementary apps should act as mobile apps. Thus combining the minimize function with the close button.

Elementary OS is a desktop OS and if it wants to be successful it allows you to use all programs and not only apps designed for elementary OS.

Is it a good design decision?

Removing the minimize button is a bold move. It radically changes how the user deals with window management.

The Pros

Instead of minimize you need to use tools like multiple desktops Users could start working more with multiple desktops.

The Cons

  1. The concept of a minimize has been around since even before 1988 – It has become one of the core components of Desktop OS and Window management. Every user will have to relearn their interaction.
  2. The communication of the user with the computer is awkward and creates misunderstandings. The apps will guess what you want to do: Did you want to listen to music and keep the program open in the background or did you want to stop listening for music? The user has only one button to express both of these commands.

Probably the button is actually not used that often anymore, since most things are done with a browser and that window is always open. – I do not know I do not have any data to back that claim.

However I know that that line of thinking lead to the removal of the start button in Windows 8 and that was definitely not a good idea.

Goodbye Elementary OS

While Elementary OS has a wonderful UI and they try to focus a lot more on usability. The missing of this button makes the OS unusable for me.

In Elementary OS 0.4 Freya – I enabled the button with the command:

gsettings set org.pantheon.desktop.gala.appearance button-layout 'close,minimize,maximize'

However that made the UI look a little weird and sometimes it just did not work. I just assumed that when a lot of people are googling for the problem and mentioning it – that eventually they will reconsider their choice. However currently it does not seem to be the case.

So back to Ubuntu – that UI also has flaws, but it got it right to have a minimize button.

What is good code?

This is one of the biggest questions in programming. Everybody has an subjective answer to the question, as everybody develops their own style of programming over time.

For me good code has to fulfill these 5 criteria:

  1. Correct
  2. Efficient
  3. Simple
  4. Readable
  5. Maintainable

Now lets take a closer look at every criteria and what it means for your programming project


Code should have one key feature: It should work. Not functioning code is useless code.

Code has a very specific task it should do and it only should do that task. It should not do anything in addition that you do not expect.

Correct code also implies that it was built to specification . If you have a specification, you also can ensure that your code is correct by writing tests that verify that the code is doing exactly that what was specified.


If you have the choice between a complex expression and a simple expression that solves the same problem. then use the simple expression.

The complex expression is always a big door for unintended bugs. Additionally it makes it much harder to explain what is going on with your code.


Efficiency, strongly depends on the values / non-functional requirements of your project.

It means if you can avoid costly operations, duplicate operations or unneeded operations. then you should optimize your code to avoid these kind of structures.

If possible you also should optimize for performance, however for most algorithms you need to decide a trade-off if your code will use a lot of memory or a lot of CPU. Before optimizing you always have to define for what you are optimizing.


Code is written for humans. Another human should be able to read your code.

If you use complex structures it just makes it harder for someone else to figure out what is going on in your project.

The compiler does not care if the variable is called “f” or “isActive” in both cases the compiler produces the same bitcode. Naming things is very important.

And never forget in most cases you are going to be the one that will revisit the piece of code and you will not know anymore what “f” is, but will immediately understand what “isActive” means.


Code is never done. There are a lot of things that causes that code needs to be adjusted in the future:

  • Additional Requirements
  • New Features
  • Dependency Upgrades

Now you can say, screw the maintainer of the project, you are only concerned about today. – However in most cases the guy that needs to fix something is the guy that created the code in the first place. – So do yourself a favor and write maintainable code.

What does it mean to write maintainable code? Have documentation, encapsulate functionality in a way


In the end good code is whatever you want it to be. If you are working with embedded systems and you want to create the most efficient algorithm, you will probably have other values as when you are working on a Web-Project.

You can define whichever values you want. The important thing is that these values must be clearly communicated to your team. Ideally by you leading as an example the others can follow.

In the end the goal of good code is that your project should deliver on time, suffer from less bugs, new team members can be easily onboarded, the team writes better tests and overall better communication (the specifications have to be more precise) etc.


ImageDesigned by Freepik

Getting started with MOBX 5 and TypeScript 3, React 16.6

When looking around for example applications that use Mobx 5.x combined with Mobx-react 5.xand TypeScript 3.x I did not find any useful example. Most of the examples in the awesome mobx list reference Mobx 3.x and are really outdated.

In my example I will use MOBX to display “Hello World!”. It should showcase a couple of core concepts you will be using in an mobx application.

tl:dr: Source Code for this example can be found here.

Inititalizing the project

First we need to create our project. I will use following scripts to intitialize the project.

Create-react-app with TypeScript

npx create-react-app mobx-example
cd mobx-example
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

npx mv 'src/App.js' 'src/App.tsx' 
npx mv 'src/App.test.js' 'src/App.test.tsx' 
npx mv 'src/index.js' 'src/index.tsx'

npm start

Note: I am using the npm package ‘mv’ to rename the files, this ensures that the script will work cross-plattform.

We need to run start in order to let create-react-app initalize all typescript configuration files.


npm install --save mobx mobx-react

In the tsconfig.json you need to ensure that experimental Decorators are enabled. Add following line to your tsconfig:

"experimentalDecorators": true

Getting Started with MOBX

In order to use a MOBX Store you need to create a couple of things:

  • A Mobx Store
  • Configure the provider
  • Use the store in a component

The Mobx Store

Store Directory

It is advisable to keep your stores organized in a single directory like ‘src/stores’.

mkdir src/stores

The Example Store

From the offical documentation to create a store it would be enough to create a class as follows:


import {observable, action, computed} from 'mobx';

class MobxStore {
    @observable name = "World";

    public get greeting():string {
        return `Hello ${}`;

    public setName(name:string):void { = name;

export mobxStore = new MobxStore();

Note: Using @computed is just a demonstration how you could create a calculated value from the current state.

When using TypeScript this is not be enough, you need to create an interface and let our Store implement it to ensure type safety in the react component.

export interface IMobxStore {
    name: string;
    greeting: string;

Additionally we will move the initialization to its own class.

Finally our mobxStore.ts looks like this:

import {observable, action, computed} from 'mobx';

export interface IMobxStore {
    name: string;
    greeting: string;

export class MobxStore implements IMobxStore {
     @observable name = "World";

    public get greeting():string {
        return `Hello ${}`;

    public setName(name:string):void { = name;

Note: The interface could also be moved into a type definition file.

Store initialization

We will now create a file src/stores/index.tsIn this file we will create an object ‘stores’ that will initialize all stores that we are using in our application.


import { MobxStore } from "./mobxStore";

export const stores = {
    mobxStore: new MobxStore()

Configuring the Provider

Since we are ensuring that all stores are inititalized in a single object the configuration of the Provider is very simple In the file src/index.tsx you need to import the store object and the Provider from mobx-react:

import {Provider} from 'mobx-react';
import { stores } from './stores';

Then you need to wrap the <Provider />around the <App />. By using the spread operator for stores you ensure that all stores are registered in the provider.

<Provider {...stores}>
    <App />

Using the Store

In order to use a store in a component you need to inject the store into the component and (most of the time) you will also want to observe the store for changes.

The store will be accessable via the properties. Thus we need to define an interface containing an optional variable ‘mobxStore’ of the type IMobxStore. It needs to be optional due to TypeScript not knowing that the Store is provided by the inject method. If it would be mandatory TypeScript would throw an missing props error when using <App />.

This in turn causes TypeScript to complain that const {greeting} = this.props.mobxStore; is not allowed, as this.props.mobxStore could be ‘undefined’. By adding the Non-null assertion operator ‘!’ you can signal the TypeScript compiler to ignore this warning.


import React, { Component } from 'react';
import './App.css';
import { observer, inject } from 'mobx-react';
import { IMobxStore } from './stores/mobxStore';

interface AppProps {
  mobxStore?: IMobxStore

class App extends Component<AppProps> {
  render() {
    const {greeting} = this.props.mobxStore!;
    return (
      <div className="App">
        <header className="App-header">
          <button onClick={this.clickHandler}>Change Greeting</button>

  private clickHandler = () =>{
    const {setName} = this.props.mobxStore!;

export default App;


Now if you run the application you should now see a wonderful “Hello World!” greeting and by clicking on the button it changes to “Hello Bob!” using mobx and typescript.

I hope this makes it a little simpler to get started with React, Mobx and TypeScript.

If you are interested in the project files you can get them from GitHub

Ubuntu 18.10: NVidia RTX Drivers

NVidias newly released RTX Graphics cards will not be automatically detected by Ubuntu. In order to get the cards running properly you need to install the NVidia drivers with the version 410 or newer.

In order to install the driver you must run following commands:

sudo add-apt-repository ppa:graphics-drivers
sudo apt update
sudo apt install nvidia-driver-410 
sudo reboot

Dev Environment to Learn TypeScript

TypeScript is basically JavaScript with types. When writing your code you must define the types of your variables and optionally the returns of the functions. If you have been working with Java or C++ these concepts will feel very familiar.

However there is a small problem, TypeScript is not JavaScript – thus you need to use a compiler to convert your code into JavaScript.

This guide will take a look at how to set up a simple developer environment in order to play around with TypeScript.

Tools needed:

  • NodeJS 11 (It does not matter if you are using the LTS Version or the current Version)
  • VSCode

New Project

In order to create your first project you have to create a directory and initialize it with npm. You can use the Command Line and enter following:

mkdir learn-typescript
cd learn-typescript
npm init -y
code . 

When VSCode is open you can open a Terminal using Ctrl-`


Initial Setup

npm install typescript

this will install the typescript compiler (tsc) to your project. You then could run commands like tsc index.ts and it will compile it to index.js. Which you could execute with node index.js.

However you cannot directly debug your code and it is annoying to run the compile before execution.

Add TS-Node

TS-Node is a tool that allows you to directly execute TypeScript code. It uses the existing tsconfig.jsonto process the code.

npm install ts-node

now you could run the code directly via a command like:

ts-node index.ts

Configure VSCode Debugging Tools

Ts-Node also allows you to use the VSCode debugging tools.

Press Ctrl-Shift-P and enter “Debug: Open launch.json” (this will create a launch.json) Select “Node.JS”

  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit:
  "version": "0.2.0",
  "configurations": [
      "type": "node",
      "request": "launch",
      "name": "Launch current file w/ ts-node",
      "protocol": "inspector",
      "args": [
      "cwd": "${workspaceRoot}",
      "runtimeArgs": [
      "internalConsoleOptions": "openOnSessionStart"

Now when you press F5 you can run and debug your typescript code. This also allows you to set breakpoints in VSCode.

Your first “Hello World”

Now create a new file called index.ts and add following code:

async function greeter(name: string): Promise<void> {
  await console.log(`Hello ${name}`)


This “Hello World” takes advantages of Modern ES2017 Features “async/await” as well as adding types for TypeScript.

When you press F5 in VSCode this should result in an error as Promises are not available in ES5. We can fix this by configuring the compiler.

Configuring the compiler

In order to configure the compiler you need to run the command:

tsc --init

this will create a tsconfig.json file. with this file you can configure the compiler. When creating it with the command it creates the file with the defaults and comments on what each compiler flag does.

One of the settings you should adjust is the “target” attribute. Currently it defaults to “es5” – this is because Internet Explorer 11 only supports ECMAScript 5.

We are targeting with our code NodeJS 10+, so we can change this value to “es2017”. As you can determine from this table

Running Hello World again

Now press F5 again the output should show you “Hello World”.


Now you are set to experiment some more with TypeScript.

One of the things you can experiment with is changing the target version of the compiler and running tsc index.ts and take a look at the resulting JavaScript code. You will see that compiling to es5 or es6 the compiler adds a lot of extra code to enable functioning code, however when compiling to es2017 it (almost) only strips away the types and leaves the code practically identical.


Compiling the code to ES5

To fix the code to compile to ES5 we first need core-js a library that provides polyfills for older versions of JavaScript.

npm install core-js @types/core-js

now we must add the line index.ts:

import 'core-js/es6/promise';

async function greeter(name: string): Promise<void> {
  await console.log(`Hello ${name}`)


and in our tsconfig.json: we must add:

"lib": [

Now your code should compile and run on IE11.

Visual Studio Code Extensions (September 2018)

Lets take a look at a couple of very useful Visual Studio Code Extensions.


Settings Sync

The tool allows you to synchronize your settings on multiple computers and/or operating systems. You need to have a github account and it will create a secret gist in order to sync your settings. Read More

Settings Sync

Code Runner

Basically it adds a small play button at the top of every file and lets you immediately execute it.

Code Runner

Git Lens

Git Lens dramatically enhances the GIT experience in VSCode. Inline display of code authorship, easy comparison with previous versions of the file and many more features.

Git Lens

Code Quality

TODO Highlighter

It highlights your comments that start with \\ TODO: or \\ FIXME:. Additionally it adds a command to list all Todos in your source code so you can identify and complete / fix the code.

If you use a different convention in your codebase you can configure the plugin to fit your use case.

TODO Highlighter

Spell Checker

Basically this complains when you start creating variable names that have no meaning. While ensuring that your documentation does not contain any spelling mistakes.

You can add words to a project dictionary And it is easily expandable to support additional languages.

Spell Checker


It uses the local tslint.json and integrates the information into VSCode. You can enable ‘tslint.autoFixOnSave’ that automatically applies the defined rules (that can be autofixed).




A great dark theme with high contrast color choices. Personally I do not follow the official documentation on how to set up the theme. (Too many steps and it requires the font Operator Mono that costs 200USD )

Cobalt2 Theme Official

VS Code Great Icons

Well better Icons for VS Code

Great Icons

Image: Designed by Freepik

Ranking Programming Languages

A recent article on InfoWorld titled Breakthrough: Python reaches Tiobe index Top 3 – Yey Python – But wait, what is being ranked?

The TIOBE Index uses search engine data to extract which languages are popular.

That is a questionable way of figuring out if a language is popular. It only means people are searching for a language. Does the search data separate between Java and JavaScript (two very different languages)? Are the searches for things that are difficult in the language and unclear. Basically if a language is badly documented = more searches => higher on the index. The more issues and frustrations you have with the language will rank you higher.

If we take a look at the 2017 results unsurprisingly Java takes the Number 1 spot. As many companies use Java and many universities teach Java. Thus a lot of people are searching for Java. – However programmers are actually starting to dislike Java, as there is currently so much poorly crafted Java-code in the world that desperately needs to be rewritten. In addition the Java community is facing a lot of problems with rapid unwanted changes from Oracle. (*Note: Java is a great language that strongly promoted object oriented programming and is a great tool – it is just in a wierd phase right now.)

Interestingly on position 11 we have Delphi / Pascal. A programming language I have used the last time over 17 years ago. I doubt any company is still using Pascal applications. However as a part of programming language history it is quite interesting. And there was of course a spike last year as a new version of the compiler was released. ( Also schools with outdated curriculums still teach Pascal…

I am not sure what information I can gain from this type of ranking. It could mean that Java is a mess because so many people are googling their problems with the language and an old language Pascal is now suddenly on the rise and will become the next big thing?

How would I rank programming languages?

First we need to figure out who needs rankings of programming languages. My guess is people that want to start learning a programming language, people who want to see trends in the industry and managers who need to make project decisions.

Before we can even begin with ranking the languages the first stumbling block. Depending on your project you may be already locked in with a specific language. In many cases you want to start building on things somebody else is providing you, a Web Browser (JavaScript), a mobile device (iOS: Swift/Objective-C, Android: Kotlin/Java) a game engine (Unity – C#, Unreal – C++), etc.

Simply put if you have a defined project, just start working on the project. The language might be already defined and you do not need a ranking.

A person who wants to learn programming

This list should take multiple things into consideration. The person learning has practically no knowledge. The person has to learn everything from scratch. The important thing is to start learning programming concepts. It should be easy to learn, ideally avoiding advanced stuff like compilers and static typing (and preferably a language also used by the industry and not university only).

This leaves a rather short list:

  • Python
  • JavaScript

These two languages are dynamically typed and at the beginning still very forgiving for mistakes. Both have tons of documentation.

Starting with JavaScript is really easy, just press F12 in your browser and you can get going, no installation needed. It also simultaneously teaches you concepts about HTML and Networking. Concepts of Object Oriented Programing as well as functional programming can be learned. And variants of the language like TypeScript can explain the value of static typing and what a compiler does.

Starting with Python is a little more difficult. As you first have to install python etc. The other thing is of course the meaningful whitespace, which is wierd for a beginner but at the same time the best way to get a beginner used to the idea that code should be beautiful and readable.

There is no real ranking – just choose one of the two. Both are equally well suited as a starting language.

I would take a look at how many new projects are being created in which language. Statistics from Github from their Octoverse Survey

  1. JavaScript (2.8Mio)
  2. Python (1 Mio)
  3. Java (0.9 Mio)

Of course this is only from one source and you would have to add multiple sources to get a better picture. (In this case we only see values from OpenSource projects). If you want to see trends you can observe these values over the last couple of years.

For business people

Here we need to take the money aspect into account. Just because “Java” appears at every top list of backend enterprise web development – that does not mean it is currently the best business choice.

One of the key indicators could be how verbose a language is. As research has shown that a Java Developer and a Python developer take the same amount of time to write the same lines of code. – However a Python program can need in some case 30% less lines of code to do the same function.

From the

Python Hello World:

print("Hello, World")

Java Hello World:

public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello, World");


You would have to take a look at long term maintainability of the language. Basically: who is maintaining the language – will it still exist in 10 years?

  • Java is supported by Oracle, that is messing around with the business model surrounding Java, so maybe not.
  • TypeScript supported by Microsoft, and Open Source (worst case you are going to need to maintain it yourself)

Another important factor is tooling and ecosystem. If the ecosystem is dying then it may be a good time to switch languages.

And of course the last factor would be how many programmers are currently listing the language as one of their skills. (there are programmers on the market that you potentially could hire to work on your system)

Depending on your project you may need to take hardware costs into account.

Unfortunately there is no universal approach to this multifaceted problem. Depending on which factors are important for your project you will get a different ranking of possible languages for your project.


There is no singular good way to rank programming languages. However whenever you encounter a list or ranking of programming languages just be aware of what techniques they used to create the list.

Credits: Image: Evaluation System Designed by Makyzz / Freepik