Blog.

Hi, my name is Marco. Working as a Senior Software Architect at Philips. This blog is statically generated using Next.js.

I wrote my first blog March 2011. Mostly I'm writing on software development. In total I wrote 71 articles in 7 categories. Use search below to filter by title or click a category or tag to filter by tag or category.

Categories:

Tags:

Stories

Cover Image for Hello Next.js, goodbye Hexo

Hello Next.js, goodbye Hexo

Marco Franssen

Marco Franssen /

For the folks reading my blog for a long time, you might have noticed I'm using my current theme and blogging engine for a long time. About 5 years ago I migrated from Wordpress to Hexo. Wordpress at that point in time was costing me serious money to get a decent performing webpage according to modern standards. So back then I decided to move into a statically generated blog, where I could write my blogs offline using markdown. Hexo has served me very well the last couple of years. It is a stat…

Cover Image for React Router and Nginx over HTTP/2

React Router and Nginx over HTTP/2

Marco Franssen

Marco Franssen /

In this blogpost I want to show you how you can easily get your React SPA app with clientside router work properly with your Nginx setup. I will also show you how to serve your React App over HTTP/2 and how you can leverage from http2 server pushes. To do so I will show you how to do that with the Nginx Docker image. When running your webapp using the development server you will in general not face any issues, however when running the static build on a production server you will most likely f…

Cover Image for Run your Angular app in a Nginx Docker container

Run your Angular app in a Nginx Docker container

Marco Franssen

Marco Franssen /

Today you will learn how we can package our static html Angular app in a Docker container running Nginx. By packaging our app in a Docker container we will benefit from the fact that we will have some immutable infrastructure for our app. Immutability will give you many benefits when it boils down to maintaining a platform. Things that can not change state also can't lead to surprises in a later stage. Immutability is also well known in functional programming languages. I won't list all the adva…

Cover Image for From errbacks to Promises in Node

From errbacks to Promises in Node

Marco Franssen

Marco Franssen /

In javascript world many APIs and libraries require you to implement most logic using callbacks. As of ES6, also referred to as ES2015, we can use the native Promise API. In most modern browsers and the current releases of Node.js the Promise API is supported. This enables us to use Promises without any thirdparty libraries. In Node.js we all know most of the libraries or built-in components are using callbacks. Those callbacks all have the same method signature, also referred to as errbacks. A…

Cover Image for Jasmine vs. Mocha

Jasmine vs. Mocha

Marco Franssen

Marco Franssen /

In this blog post I want to highlight the similarities and the differences between Jasmine and Mocha. In this comparison I will focus on the latest versions of both libraries. As of this writing Jasmine 2.4 and Mocha 2.3. When comparing both libraries at NPMCompare you notice that Mocha is the more popular framework today. Mocha has more frequent updates, more downloads and more forks on Github. Although both frameworks are pretty popular and do have a lot of similarities. Lets go have a look a…

Cover Image for Using Gulp.js to check your code quality

Using Gulp.js to check your code quality

Marco Franssen

Marco Franssen /

In this blog post I want to show you how you can use Gulp.js to automate some tasks to check the quality of your code. Before we deep dive into the subject and the coding examples I first want to give you a short introduction on what Gulp.js actually is. So if you already know what Gulp.js is about you can move on to the next chapter. Easy to use By preferring code over configuration, gulp keeps things simple and makes complex tasks manageable. Efficient Using the power of node streams, gulp gi…

Cover Image for Using Mocha Chai Sinon to test Node.js

Using Mocha Chai Sinon to test Node.js

Marco Franssen

Marco Franssen /

In this article I'm going to show you how to write tests for your NodeJS application using Mocha, Chai and Sinon. Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. One of the cool things is you can choose your own assertion style when writing Mocha tests. In this article I will use Ch…

Cover Image for npm tips and tricks

npm tips and tricks

Marco Franssen

Marco Franssen /

In my previous post I showed you how easily you can create a simple webserver using Node.js. In this post I want to show you how to make more advanced usage of node package manager. npm init Using node package manager you can get an even quicker start of your project by using the npm init command. So let's get started by opening a command prompt (on windows open the Node.js command prompt). Then create a new folder and navigate into this newly created folder. In the folder execute following co…

Cover Image for Starting with a Node.js webserver

Starting with a Node.js webserver

Marco Franssen

Marco Franssen /

UPDATE: updated the console output to latest Node.js version and updated the express.js example to latest version. Before starting to explain how you start your first Node.js project for building a simple web server I will first explain you what Node.js is. To do so I just include a quote of the Node.js themself, because I don't like to reinvent the wheel. Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-d…

Cover Image for Knockout JS mappings

Knockout JS mappings

Marco Franssen

Marco Franssen /

Knockout JS is a JavaScript library for creating MVVM JavaScript libraries. In a previous post I already showed some of the cool features of Knockout. http://marcofranssen.nl/knockout-that-cascading-dropdown/ If you want to spike your knowledge on Knockout a little more first, please visit Knockout's documentation. In this article I want to zoom in on the Knockout mapping plugin. The Knockout mapping plugin enables you to easy map your JSON object into an observable JavaScript object. So here…

Cover Image for Writing modular JavaScript without polluting the global namespace

Writing modular JavaScript without polluting the global namespace

Marco Franssen

Marco Franssen /

Most of you have already seen a lot of spaghetti JavaScript code. One of the reasons you are reading this article will probably be, you don't want to make the same mistakes as others have done. So let's make the next step and stop polluting the global JavaScript namespace. Why is it bad to have all your script code available at global level? First of all you can possibly get a lot of errors when using modules developed by others, because you used the same names for you variables etc. The seco…

Cover Image for jQuery events contributes to clean Javascript

jQuery events contributes to clean Javascript

Marco Franssen

Marco Franssen /

As the title reveals, this blogpost is about some clean javascript code example. Many developers dislike javascript because of different reasons. I think javascript is a pretty cool language. To prevent developers from disliking it and encourage them to show how great javascript can be, we all as developers have to write javascript in a clean way. This way lesser developers will be discouraged to use it. In this blogpost I will show you how to write some OOP style javascript, which you know as…

Cover Image for Knockout that cascading dropdown

Knockout that cascading dropdown

Marco Franssen

Marco Franssen /

In this article I will explain how you can make cascading dropdowns with Knockout.js. Knockout.js is a JavaScript library which provides you some stuff to implement the MVVM pattern.  Knockout provides you the following stuff: Declarative bindings: (Easily associate DOM elements with model data using a concise, readable syntax); Automatic UI Refresh: (When your data model's state changes, your UI updates automatically) Dependency tracking: (Implicitly set up chains of relationships between mo…