DEV281x: Introduction to ReactJS

I took a quick look at Microsoft Introduction to ReactJS, not to actually learn React, but to evaluate how good the materials are for a beginner to learn React.

tl;dr Avoid the assessment. Maybe use create-react-app instead of codepen. Covers the basics quite well.

Lesson 01 | JSX and React Components

Instead of using “create-react-app” as a starting point, the course tells you to go to codepen to check out react.

I guess that makes it a little more focused on the React concepts and less focused on all the surrounding technologies that are needed in a production environment.

After that, it covers the basics of ReactJS, and JSX.

If you are a beginner you probably want to check out create-react-app.

Lesson 02 | State, Life Cycle and Event Handlers

I think the chapter covers the basics quite well. Nothing really to add here.

Lesson 03 | Lists and Forms

I think it is very nice that they cover the basics of handling multiple Form Elements with a generic handler.



The Assessment is quite theoretical and asks rather complicated questions. These questions are especially hard if you have already worked with React as you would never even try to build something in that way.

As a beginner, I would completely skip the assessment. It does not help your understanding of React. It actually also confronts you with bad practices, while inferring that this would be the way how you would actually do things


If you use create-react-app with vscode I think you would have a much better starting experience. The course is great to get started with ReactJS if you avoid the assessments and rather just experiment with your own code base.


ImageDesigned by Freepik

DEV275x – Writing Professional Code

The course DEV275x Writing Professional Code is a very short introduction to best practices when it comes to writing code. As usual, this is only my notes I took during the course, you defiantly should check out the course for yourself at

Module 1: Elements of Professional Code

Source Control with Git

Source Control is one of the most important aspects of programming.

  • Backup of your Source Code
  • Ability to compare with changes done in the past
  • Restore previous versions if something goes wrong with the new version
  • Easy collaboration with other people

There are many different Software packages that enable Source Control. Currently, the two most popular systems are Git (70% of Programmers) followed by SVN (10% of Programmers) (Survey of 30k Developers)

The core difference between the two is, that for SVN you need to set up a dedicated Source Control Server, and all changes are tracked there. With Git it is distributed, so you can use it locally and if you choose in combination with a server.

Especially Code Editors like Visual Studio Code have Git directly integrated making it really easy to set up and use Git.


Cloud Providers



Markdown is really great because you can learn it really fast, and even if you do not convert Markdown into a HTML site or PDF the text is still formatted quite neatly and readable.

Like Git you find support for Markdown files in common editors like Visual Studio Code / Atom. And of course, in blogging software like WordPress have plugins that enable Markdown for the Posts.

Module 2: Communicate with Code

Now, this chapter was rather interesting, it focused on how those smaller things like code conventions actually help to improve the codebase. While the presenter did not use automated tools to improve the code readability it was nice to see that it is a very important aspect of coding to get the really basic elements correct.

Consistency and Naming

The code should be formatted always in the same matter. It improves the readability and removes all personal style from the code enabling all developers to immediately take ownership of the code instead of saying well that is the style of developer A, he should fix it.

Naming is important and greatly improves the readability of the code it does not help to say var c = 0, it is much better to say var beanCounter= 0. You do not write code for the computer but actually for other human beings. The compiler will then convert it into machine code, but you will probably not have to debug that.

Refactor Duplicate Code

A great problem is when the code base has a lot of duplicate code. As soon as that happens and some minor change changes the way how you do things, then you would have to go back and change all the different places where that piece of code is used.

Refactoring early reduces the risk that the next developer says, well, I will just do that with copy and paste.


This one is rather difficult, but by keeping the code and the structures simple and readable has a much higher benefit in the maintainability of the code than some complex structure that executes a micron second faster. Of course, that depends on the program you are writing.

As a rule of thumb, functions should be rather short, not hundreds of lines long. (Too short is also bad.) If you needed to add complexity then you also should document why you are adding it and what is the best approach to understand that complex structure.

Module 3: Code Confidently With Unit Tests

Well writing Unit Tests and overall having Tests for your code, allows you to a) know the use cases of your code and b) allows you to see when you change something what else may have been broken while you were developing a new feature.


ImageDesigned by Freepik

Notes on Course: Microsoft – Advanced CSS Concepts

My notes on the great course Microsoft – Advanced CSS Concepts on edx.

Lesson 01

Responsive Layout

Covers the basics of Responsive Layout. In essence, you use the @media query to figure out what the width, height, page orientation and resolution of the device is. Then based on that information you use a different CSS Rule.

To create a consistent Layout you should always design for the smallest device screen – then expand it to the bigger devices. (Mobile First Strategy).

Base CSS

In General, you should use a Style guide to create a consistent look across your application. They are usually created by the graphic designer.

Typically a website should be suitable for all different types of browsers. However, the CSS implementation and the default styles are different across browsers. To avoid this problem, you can include a CSS Reset – to ensure a consistent style.

A front-end Style guide should help define

  • Code standardization of CSS, and HTML
  • Consistency of code and design
  • More efficient workflow
  • Documenting of code practices
  • An easy-to-access reference for code and design for new team members

Your style guide will be comprised of:

  • A template: The template contains the basic elements that serve as the foundation for your web pages, such as color palette, fonts, headers, footers, body text, navigation, widgets, and grid layouts.
  • Patterns: The patterns for your web page include buttons, logos, images, the font icon library, and form styles.
  • Documentation: The documentation is a record of the style and development pattern of your web page. You can add comments to your code that serve as the style guide or use interactive models or tooltips.

Media Queries

The most commonly used media queries are:

  • min-width Rules applied for any browser width over the value defined in the query
  • max-width Rules applied for any browser width below the value defined in the query
  • min-height Rules applied for any browser height over the value defined in the query
  • max-height Rules applied for any browser height below the value defined in the query
  • orientation:portrait Rules applied for any browser where the height is greater than or equal to the width
  • orientation:landscape Rules for any browser where the width is greater than the height

The Query information is then used to define breakpoints, points where the layout switches from one size to another. Example of a set of major device breakpoints:

/* Extra small devices (phones, up to 480px) */ @media screen and (max-width: 767px) {…}

/* Small devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991px) {…}

/* tablets/desktops and up */ @media (min-width: 992px) and (max-width: 1199px) {…}

/* large like desktops and up */ @media screen and (min-width: 1200px) {…}


Historically the “px” Unit was used, however to incorporate various resolutions it is better to use the “rem” unit.

Going forward

  • Optimize the text for reading
  • Use major device breakpoints, and address content with minor breakpoints
  • Treat your website’s layout as an enhancement
  • Use relative units like rem or em;

Working with images

Images should be resampled to three different media sizes

Note: The alt tag must be set to correctly validate.

Lesson 02

Modular CSS

Modular CSS is:

  • A guideline based approach for breaking down pages into generic reusable CSS code.
  • Based on classes and consistent naming conventions.
  • Easy to read and maintain by teams.

CSS Modules are:

  • Generic, self-contained, and reusable.
  • Modifiable, combinable, and scalable.
  • Can contain or be contained by other modules but stay independent.

What are some common modules?

You will often come across modules such as these:

.nav, .search, .logo, .breadcrumbs, .title, .button, .icon, .media-object, .list, .frame, .slider, .card, etc.

Example Module

//Button Module 
.btn { 
   padding: .5em 1em; 
   text-decoration: none; 
   border: 1px gray solid; 
   display: inline-block //helps anchors and other inline elements 

// Button Sub-Module 

.btn—content {
     background: blue;
     color: white;
    <button class="“btn">Button Text</button>

What are the Results of a Module-Based Approach?

  • Faster development
  • Flexible and scalable code
  • Code reuse
  • Organized and easy to read code
  • Easier to maintain
  • Team efficiency
  • Decoupled HTML and CSS


  1. OOCSS (Object Oriented CSS) |
  2. SMACSS (Scalable and Modular Architecture for CSS) |
  3. BEM (Block, Element, Modifier)
  4. DRY (Don’t Repeat Yourself CSS)

Font Awesome

A popular set of icon fonts is Font Awesome (

Example for a like button

<button class="fa fa-thumbs-up">like</button>

Image: Designed by Freepik

Bioshock – Remove Intro Videos (Steam)

Bioshock Remastered – Updated Graphics, but same old stupid multiple unskippable 2k Intro Video. Great…

To avoid waiting for ages to get the stupid game going. You can add a the flag -nointro to the launch options.

  1. Right-click on the game in the steam library and select “Properties”
  2. Then click on the button “Set Launch Options”
  3. Add the flag “-nointro”

Udacity – Web Tooling and Automatisation

I recently took a look at the course materials for Web Tooling and Automatisation.

Overall the course is very well structured and introduces Gulp and a couple of common packages used in web development. Besides their main topic, they cover topics on good engineering practices, like linting and testing to ensure code quality.

While working on the project I ran into several little smaller things that were quite annoying. Thankfully the gulp community is quite big, so somebody already solved some of the issues I was facing.

Passing an “–production” flag

When developing, you will probably create a version of your software that is suited for easily finding bugs and errors and an optimized version that is minified and optimized for optimal performance for the end user.

You would define two different tasks in gulp, one “default” and one “production” task. This, however, would, in turn, cause you to have to duplicate your code – with optimization and without.

I found the package “gulp-if” that allows you to control if a function like compression is active during the task. The remaining issue was to actually set the parameter before the tasks run. (All tasks in gulp run in parallel).

To get a flag from the command line, you can use the process.argv Array. However, you must add “–” before your flag name. If not gulp will assume it is another task name that should run.

In the end, you would use something like this:

//Enable Production Flag
var production = (process.argv.indexOf("--production") !== -1);

//Use in task

gulp.task("default", ()=>{
.pipe(gulpif(production, foo())
**Note:** In Gulp 4, you can use a sequencer and would not need to pass in the flag by command-line, but you would define a task that will run before all the other tasks.

# Dealing with Asset sources and destinations
When using gulp.src() and gulp.dest(), typically people use strings to define the locations. However, this is quite annoying if you want to get a quick overview which locations are used. For a better maintainability, you should create a small variable block that defines these strings. In the long run, it lets you be more flexible where your files are etc.
<pre class="lang:js decode:true ">//Path Definitions
const htmlPaths = {
    src: "src/views/**/*.pug",
    dest: "dist"

gulp.task("html", () => {

End Result

At the end of the course, I ended up with this gulpfile.js. It adds support for Typescript, Pug(Jade), google-closure-compiler.

The common gulp tasks to run are:

  • gulp serve: Uses browser-sync with CSS injection for live-editing
  • gulp --production: Creates an optimized build

Next steps: Depending on your web server, you would want to add a gulp deploy task.


//Gulp Packages
const gulp = require('gulp');
const gulpif = require('gulp-if');
const browserSync = require('browser-sync').create();

const pug = require("gulp-pug");

const imagemin = require('gulp-imagemin');

const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");

const ts = require("gulp-typescript");
const eslint = require("gulp-eslint");
const closureCompiler = require('google-closure-compiler').gulp();

const jasmine = require("gulp-jasmine-phantom")

//Flag Definitions
var production = (process.argv.indexOf("--production") !== -1);

//Path Definitions
const htmlPaths = {
    src: "src/views/**/*.pug",
    dest: "dist"

const stylesPaths = {
    src: "src/styles/**/*.scss",
    dest: "dist/styles"

const scriptsPaths = {
    src: "src/scripts/**/*.ts",
    dest: "dist/scripts"

const imgPaths = {
    src: "src/img/*",
    dest: "dist/img"  

//Task Definitions
gulp.task("default", ["html", "scripts", "styles", "images"]);

gulp.task("serve", ["default"], () => {
        server: "./dist"
    });, ["styles"]);, ["scripts"]);, ["images"]);, ["html"]).on('change', browserSync.reload);

gulp.task("html", () => {

gulp.task("scripts", () => {
            out: "output.js"
            parser: "typescript-eslint-parser"
        .pipe(gulpif(production, closureCompiler({
            compilation_level: 'SIMPLE',
            warning_level: 'VERBOSE',
            language_in: 'ECMASCRIPT6_STRICT',
            language_out: 'ECMASCRIPT5_STRICT',
            output_wrapper: '(function(){\n%output%\n}).call(this)',
            js_output_file: 'output.min.js'

gulp.task("styles", () => {
    let sassOptions = {};
    if (production) {
        sassOptions = {
            outputStyle: 'compressed'
        .pipe(sass(sassOptions).on('error', sass.logError))
            browsers: ['last 2 versions']

gulp.task("tests", () => {
            integration: true,
            vendor: '_build/**/*.js'

gulp.task("images", () => {


  "name": "udacity-webtooling",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.7",
    "eslint": "^3.15.0",
    "eslint-config-google": "^0.7.1",
    "google-closure-compiler": "^20170124.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-eslint": "^3.0.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-jasmine-phantom": "^3.0.0",
    "gulp-pug": "^3.2.0",
    "gulp-sass": "^3.1.0",
    "gulp-tslint": "^7.1.0",
    "gulp-typescript": "^3.1.4",
    "phantomjs": "^2.1.7",
    "tslint": "^4.4.2",
    "typescript": "^2.1.6",
    "typescript-eslint-parser": "^1.0.3"


ImageDesigned by Freepik

NPM: Use Github Patch Instead of Repository

Recently I was playing around with the HEXO static site generator. For my setup, I was using Hexo in combination with Gitlab CI and the ftp deploy method.

The module hexo-deployer-ftpsync has an issue that you need to manually confirm that the FTP deployment succeeded. In essence, it does not exist on its own, thus a CI environment would not be able to automatically verify the success or failure of the build, it would just run forever.

Github allows you to fork existing code, improve upon it and issue a pull request, that your code will be integrated into the main software build. I changed a couple of lines to ensure that the FTP deploy process would terminate.

To use my patch instead of the current master build of the module you need to adjust the package.json file. Simply replace the version-number with the github url <username/project>#

Original: With Version Number

  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-deployer-ftpsync": "^0.1.1",

New: With github path to patch

  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-deployer-ftpsync": "borgfriend/hexo-deployer-ftpsync#80b51f3",

If the owner of the project integrates my suggestion on how to fix the bug, then the line can be changed back to the official master branch of the code. However, for the time being, gitlab CI uses the alternative code and successfully deploys my code to the server.

Image: Designed by Freepik

CodeWars Kata: File Path Operations

The quick Code Wars Kata I am taking a look at the Kata File-Path-Operations.

My approach to solving the kata was, first to figure out what skills are needed to solve the problem. Since all three problems are similar and try to find a specific pattern in a string, the obvious answer is Regular Expressions.

The fastest way to learn, create and test your Regular Expressions is using Regex 101.

I solved the Kata using Typescript and this is my final code:

export class FileMaster {

  constructor(private filepath:string) { }

  extension() {
   return this.filepath.match(/\.(.*)/)[1];

  filename() {
   return this.filepath.match(/\/([^\/]*)\./)[1];

  dirpath() {
   return this.filepath.match(/(.*\/)/)[1];

This piece of code would not be suitable for production. It does not take into account of malformed filenames, it would not work for windows; It would have problems with folders that contain a “.” etc.

If you would be using NodeJS you would use the existing functions in the Path Module.

Notes on MITx: 6.005.1x Software Construction in Java (Week 2)

This week the course is covering another two very important topics: Testing and Specifications.

LECTURE 3: Testing

Testing is a very important part of creating functionally correct programs.

Testing will be always incomplete

You will try to test your program using three methods:

  1. Formal Reasoning, essentially you manually verify that your program works correctly
  2. Code Review: Another Programmer takes a look and says everything is ok.
  3. Test Suites: Essentially you write another program (which can have its own bugs) to test your program. You define the inputs and the expected output and compare them.

The course mentions again the residual defect rates of 1-10 defects/kloc(1000 lines of code). Again this does not cite where this number actually comes from. Especially when using Industry Standards and Test Suites this high number would drastically drop to a much lower number. However, in the end, it only would remain to be an assumption since the actual number cannot be determined. You testing your program for every possible input (Exhaustive testing) is not feasible. The strategy to simply take a look and see if it works (Haphazard testing) will also not reveal all bugs. The same is true for “Random” testing. All of these test methods cannot be used to test software.

Write Tests

When you are writing tests you should think about how you can make your program fail. Test drive development takes the following approach.

  1. Specify what you want to program
  2. Write tests that would test the specification
  3. Write code so that your code passes the tests

The specification is key to define what inputs are possible and which outputs will be produced. (This also includes throwing errors) Blackbox testing only focuses on the input and output of the function. These tests do not take into account how the algorithm actually works. The alternative is Whitebox testing takes into account how the program is implemented.

Test Coverage

Now that you have written tests for all of your code, did you also test all of your code? Coverage takes a look at if all Statements and all possible paths through your code are covered. There are various Code coverage tools available that you can run and then visually see which part of the code is covered by your tests. In reality, you should try to achieve a coverage of 70-90% of your code achieving 100% is usually not possible due to time constraints. Of course, this is not the case if you are using Test Driven Development.

Running Tests

Usually, you would create a testsuite of Unit Tests. You should integrate these tests into your build process to ensure that the tests run automatically. Especially when you modify existing code this will ensure that your modifications will not accidentally break something unintentionally. When working with multiple people you should add hooks to your git repository that it rejects code that does not pass your test suite.

LECTURE 4: Specifications

This lecture is going to cover preconditions and post-conditions in method specifications, and how to write correct specifications.

What is a specification?

The lecture defines a specification primarily only concerning how the interfaces are defined and how the specification document essentially is used as a communication device to talk to the client. Now, this actually assumes that the client is another programmer that wants the module/system to do a specific functionality. In my work experience usually, the client has no technical background and expects the programmer to know what he wants.  Yes, the specification is the key document on how to negotiate which features etc. the client requires, it is however not exactly defined which functions or how interfaces should be created, this is usually the task of the programmer. The course actually is more talking about a documentation document how and which interfaces exist in the code you are programming for the client. The documentation is key whenever other programmers need to use the code you have programmed. In either case, the specification document is a key document. It defines the work that needs to be done. The document shields the programmer from the client, if the client forgot to specify something, thus the programmer did not implement it he can prove it was the client’s fault. At the same time, the programmer is bound to the document that he actually implements all features. (or negotiates, talks with the client that the functionality is unfeasible, or not possible to be implemented)

Pre and Post Conditions

For each function, you require the preconditions (what inputs) and postconditions (what outputs). The inputs may have to have a specific structure, cannot be a certain value etc. These need to be checked. The function also will have various outputs. This is, of course, the result, and how the result should be structured, the method also can throw errors.

Write test cases

Essentially if the specification of the function is well defined it is very easy to write the test cases. You simply follow the specification write tests to get the expected correct results and willfully pass wrong arguments into the function. The rest of the lecture covers how to throw Exceptions. Which to use when.


Again another batch of “Java Tutor” exercises. They were as exciting as the last batch… However this time they also provided a “warm-up” problem set. The warm-up is just to implement the mathematical “quadratic roots formula”. The straightforward implementation of the formula will not pass all the Unit Tests. You need to take a deeper look at Java to actually figure out why the last Unit Test fails, and how you can change your code to make your code pass the test.

Notes on MITx: 6.005.1x Software Construction in Java (Week 1)

MITx has released a course titled “Software Construction in Java”. The course is aimed at more experienced Developers and is going to teach a couple of general principles of Software Development.

The course has the goal that you develop good code, which is defined as:

  • Safe from bugs: Correct behavior of the code, now and in the future
  • Easy to understand: Code should be easily understandable by other developers
  • Ready for change: Architectural patterns that allow you to modify the code without major rewrites.

Over the next couple of weeks, I will complete this course and will publish my notes and thoughts on the material. You can also take the course at

Why am I taking this course?

I have worked with Java in the past. I do not prefer using the language. However in the Python course from MIT was fantastic and thought very interesting concepts that apply to all languages. My hope is that this course will teach broader concepts and the language they are using just happens to be Java.

Lecture 1: Overview + Static Typing

The first lecture i skipped most of the videos, they seemed more like an introduction to Javas static typing, which I was already familiar with.

Lecture 2: Code Review

The second lecture takes a look at good Coding Practices.

Code Review

Lecture notes: The purpose of a code review has two main goals:

  • Improve the code
  • Improve the programmer

Personal notes: In reality on many programming projects the “Code Review”- Phase is cut due to budget constraints, lack of time and personal feelings. Remember when you do a code review you may hurt the feeling of another programmer, who thinks he is infallible. This usually causes that more and more bad code is written. Making the project not maintainable and unreliable. If it is possible for your project to do Code Reviews, you defiantly should do them, and have a very specific action plan that the other developer can learn from his mistakes.

Style Standards

Lecture notes: You can find good style guides at

Personal notes: Every programmer has his personal style how he likes to format and read his code. All university classes (including this one) do not provide a style guide. With the consequence that also no style guide is enforced. In larger projects this would not be possible. The version control systems suddenly cause problems, create merge conflicts etc. Styleguides should never be manually enforced. That would be tedious and create a lot of unnecessary work. The guide should be enforced by your build process. This prevents programmers from using their own style guide, avoids merge issues, is easier to manage, and it is psychologically better for the programmer that the machine rejects code rather than another programmer. The best practice would be that every code commit gets checked prior to be allowed into the repository. This ensures that every developer is playing by the same rules. (To find more information on this subject google for “git hooks” and “java checkstyle”)

Code Smells

  • Don’t Repeat Yourself (DRY)
  • Comments where needed
  • Fail fast
  • Avoid magic numbers
  • One purpose for each variable
  • Use good names
  • No global variables
  • Return results, don’t print them
  • Use whitespace for readability

Personal notes: While the lecture presents various strategies to prevent the most common beginner mistakes. These are just a select few of all the various types of code smells. I prefer to use the IDE IntelliJ, it has a feature called “Code Inspector”. It will scan your code and suggest fixes for a lot of types of code smells. Good code should never have obvious code smells.


For the “Java Tutor” Homework assignments you must use an Eclipse Plugin.  So sadly you have to use Eclipse with a custom built plugin and as usual I have had a lot of fun with randomly crashing Eclipse, the plugin giving me over and over again the same questions. The “Java Tutor” is overall quite weak. The questions are more like “fill in the blanks” and only accepts a single correct answer. Usually the titles of the links to the related materials give away the correct answer. However if you enter the wrong value, you can simply click “Show Answer”, copy the solution and progress without penalty.

Rise of the MOOCs

Over the last year a lot of new MOOC providers and courses in all fields have been become available. Lets have a look at some of the new MOOC providers.

MOOC Providers

Besides a couple of new provides have popped up:


Futurelearn is a MOOC system based in the UK, thus focusing primarily on UK Universities.


Iversity is Europe-centric system. This system is especially interesting for enrolled students, some of the courses provide certificates with ECTS points. These points could theoretically be used to advance your current degree. However most universities are not happy about this development, thus you probably will have to talk with several layers of bureaucracy to get the ECTS points approved.


NovoED focuses primarily on business education and on team projects during the courses. This alternative approach tries to encourage more students to actually complete the course by creating an obligation towards the other students in the group.


Not strictly a “MOOC” however high quality (free) online Education:


Codeacademy takes a different approach to teaching how to code. The lessons are delivered in a sidebar and you must actually code a functioning program to continue the lesson. If you are stuck, the program guides you and gives you helpful hints on how to solve the problem. Currently the classes mainly focus on programming beginners. MOOC search engines Due to the ever-growing list of available courses, several Search Engines and lists

Mooc List

What can you say, it’s a list of all upcoming courses.


a list with social/interactive features giving you an instant popularity index of all courses.


A search engine, that lists the free courses as well as paid online courses.

Developments to watch for in 2014

edX is creating a new platform to enable all types of institutions to publish their own MOOC type course.

XSeries (

The XSeries is a series of courses, that grant you a special certificate if you complete the entire coursework. One of the Certificates is from MITx Computer Sciences.