Refactoring the Project – Learn Typing – Part 1

Last year I created a small “learn-typing”-project to learn ReactJS. Looking back let’s see how the “legacy” code holds up and let’s clean up a couple of things to make the code more readable in the future.


The first thing to take a look at is the package.json. One thing that I did not take particular care of was how I installed packages. I simply used ‘npm i <package>’ and called it a day.

However you should differentiate:

  • ‘dependencies’, modules used during runtime
  • ‘devDependencies’, modules used during development.

To clean things up I moved all @types packages, react-scripts and typescript to the correct ‘devDependencies’.

Now that everything is organized we can look if further actions are needed.

Security Issues

It is important to keep the dependencies in production up to date. The major concern is to fix security vulnerabilities. We can run the command:

npm audit fix --only=prod

This will upgrade the packages and apply the available patches for the issues.


We can also update all packages to the newest package version. This however may come at the cost that code needs to be adjusted to work with the new version of the packages.

My approach is updating single packages and then see if everything still works as expected, and then update the next package.

To see which packages need to be updated I use the VSCode Plugin “Version Lens” another popular alternative is using the CLI-tool ‘npm-check


Now the last thing, (or actually the first thing) we need to check are the licenses used by our project and if we can use the modules in production.

With the NPM tool ‘license-checker‘ we can quickly analyse our packages.

npm i -g license-checker

The command:

license-checker --onlyunknown --production

Takes a look at all packages used during production that do not have a standard licence.

@Blueprintjs/core – uses a slightly modified Apache 2.0 license. It has an additional paragraph 10

To figure out what is going on you now must go to the specific package and read up on what the exact license is. There are now two approaches: you get a legal team to figure out how this modification will affect your product, or you try to replace this dependency with an alternative.

In the next step of the refactoring I will take a look at how I can replace this dependency with a custom package.

Posted in Web

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