TypeScript React components recipes and tips

I recently converted a few React sites to TypeScript. Writing components in TypeScript is pretty identical to doing it in "normal" JavaScript, but there are a few concepts that are good to learn. For example you don't need prop-types any more, this is now handled by TypeScript interfaces.

Continue reading →

Writing a library with TypeScript and proper test coverage

Writing JavaScript libraries using TypeScript makes a lot of sense. You get extra peace of mind from type safety, you can still deliver the library to normal JavaScript consumers, and if they happen to also use TypeScript, you get the definition files for free.

But if you are serious about creating libraries, proper test coverage is a must, so here I'll show how to get started with some of the more popular testing libraries out there. Linting also keeps your code tip top, so I have thrown that in as well.

Continue reading →

Testing ReactJS with coverage using mocha+babel+nyc

Update 2017-10-06: Now using nyc instead of isparta/istanbul.

I recently worked on a project with all the latest and greatest tools: React, Redux and webpack. But our unit tests were running slowly to the point where we found ourselves constantly blocked in our workflow. Going for coffee every time you need to run npm test will quickly give you an upset stomach, so we decided to see what could be done to speed up the process, and ended up with a 95% speed improvement and being able to remove a lot of dependencies to boot.

Continue reading →

Social sign in with single-page app and JWT server validation

Social sign in is ubiquitous nowadays, and if you are running a Single-Page App (SPA), you can sign in without ever reloading the page. This will allow your app to talk to all the social networks like Facebook and Twitter, and you can access profile info, friends/contacts, photos and more, all without handling anything on your server.

However if you do need to send some data to your server at some point, you need to ensure that the users posting to your server, are actually who they say they are. This tutorial will go through the sign in process in a SPA, and validating the access tokens we recieve on our own server. First let's look at how to create a simple sign in page.

Continue reading →

Making an offline web app with Service Workers

This is a hands on introduction to Service Workers, looking at how you can build an offline capable web app. For the vast majority of use cases, web apps have the potential to be every bit as powerful as a native app. An important piece of the puzzle, is handling caching and updating of the resources that the app needs, so it will work well offline and on flaky connections.

This example will be based on a web app I made a while ago, a currency convertion app called Kuranz. The app is using GPS to determine the currency of the country you are in, and it works offline in countries where data roaming is expensive or even impossible.

Continue reading →

Secure your website with Content Security Policy

Content security policy shield So what is a content security policy (CSP), and why do I need one? A CSP is a contract that your server sends to the browser, defining from which domains it's ok to load scripts, style sheets, images etc.

This is an important tool to protect against cross-site scripting (XSS), clickjacking and other client side attack vectors. XSS can for example be used by evildoers to place a script into your website, replace the login field in your online bank, and send usernames and passwords to somebody else. Another trick could be to load your page in an iframe on a similar domain, so it looks like your page loads normally, all the while evil hackers are snatching up passwords and credit card information.

These techniques can be virtually undetectable to the user, as everything will look normal, and since these attacks happens on the client side, it can be difficult to detect until the damage is done.

That's why you need a Content Security Policy!

Continue reading →

Install Windows 8 with Boot Camp on Yosemite with USB key

Intel Macs have always been able to run Windows in parallel, and it's is even officially supported by Apple by the grace of Boot Camp, which makes a partition and boot disc for you with the necessary drivers.

If you have an older Mac (2010-2012), you might have some trouble using Boot Camp in MacOS X Yosemite. For some reason Apple does not allow Macs with a SuperDrive to make a bootable USB stick with Windows from an image. Since the optical SuperDrive in my Mac recently quit on me (and because USB is much better), this has lead me around the murky corners of message boards in search for a solution, which I now share with you here.

Continue reading →

Schedule jobs with crontab on Mac OS X

Running scripts on your computer is great. Running them automatically is even greater. If you are on a Mac (or Linux), you can use our good friend crontab, which is a scheduling tool that will run jobs (scripts) at regular intervals.

Continue reading →

Testing your API with PHPUnit

Example output from PHPUnit It's always a good idea to have tests for your code, and your API is no exception. In addition to normal unit tests, API tests can test the full code stack, and ensure that the data from your database actually reaches the clients in the correct format.

REST uses the standard HTTP status codes to indicate the success of a request, so we must ensure it returns the expected codes, especially in error scenarios.

I recently implemented a simple REST API in PHP for Regex Crossword, so in this article I will show how to write some API tests using PHPUnit 5.0 and Guzzle 6.1. Actually we can test any API written in any language using this, but if you are used to PHP this will be very easy.

Continue reading →

Setup local web server with Apache and PHP on OS X Yosemite

This a quick writeup of how to get a local web development server up and running on your Mac. Everything you need is preinstalled, and just needs to be configured. Some familiarity with the Terminal is presumed (e.g. how to start it).

After this tutorial you will have a working local Apache server with PHP, and I will show you how to create sub sites for each of your web projects directly from Dropbox.

This is an updated version of my article on Mavericks, as a few things have changed with OS X Yosemite and the upgraded Apache 2.4.

Update 2015-10-15: This guide will also work with MacOS 10.11 El Capitain.

Continue reading →

Download and edit JSON files with gulp

I often need to download some JSON data from a web service, extract the parts I need, and save it for use somewhere else. In this modern age of JavaScript everywhere, it's an obvious choice to do this with our favorite build system: gulp. But even though this is very easy to do, I couldn't find an explanation of how to put all the pieces together, so here goes.

Continue reading →

Using BrowserSync with Harp

So you love using Harp, but you hate refreshing the browser every time you've made a change? BrowserSync to the rescue!

The good guys at Harp are working on building this into the platform, but until then it's actually very easy to do yourself. You just need npm and to enter a single command in the Terminal.

Continue reading →

Showing photo GPS location on Google Maps with gulp

In this tutorial I will go through how to read the EXIF data from a folder of photots, and show the GPS location where each photo was taken in Google Maps. This article is based on the code I wrote to make my personal World Travel Map, which shows where I've been based on my vacation shots.

We'll use the gulp build system to read the image files and output the data we need to a JSON file, which we can then read into Google Maps.

Continue reading →

Breadcrumb trail with Harp and Jade

I have always liked the concept of static site generation for sites, which really doesn’t need constant updates through the day (like mine). So recently I decided to check out the vast amount of offerings, and fell upon Harp.

In this brief article I will show how to make a microdata breadcrumb trail using the Jade templating engine. For those new to Jade, like me, it will show a few of the key features in Jade.

Continue reading →

Setup local web server with Apache and PHP on MacOS X Mavericks

Update 2014-11-25: I have created an updated article on how to setup Apache and PHP in OS X Yosemite.

This a quick writeup of how to get a local web development server up and running on your Mac. Everything you need is preinstalled, and just needs to be configured. Some familiarity with the Terminal is presumed (e.g. how to start it).

After this tutorial you will have a working local Apache server with PHP, and I will show you how to create sub sites for each of your web projects directly from Dropbox.

Continue reading →

Split a string to a table using T-SQL

There is no built-in function to split a delimited string in Microsoft SQL Server, but it is very easy to create your own. The following Table-Valued Function (TVF) will split a string with a custom delimiter, and return the results as a table. This means you can easily use the output directly in a JOIN with some other data.

Continue reading →

Serialize object into a query string with Reflection

When you are coding modern web applications against websites and web services, you often have to serialize a lot of data and pass it off to some URI. This could be when calling up a product page with some preset settings for sorting, or requesting data from a web service such as Google Places.

So you have an object with all the request data that you need to transfer, but now you have to convert this into a query string. There are a lot of ways to do this, but often it becomes a rather manual task concatenating all the properties one by one. Wouldn’t it be easier if you could somehow automatically transform all the properties of your class into a query string?

The good news is, that by using C# reflection and extension methods, you can create a simple solution, which will be extremely easy to use and work well for most types of (POCO) classes.

Continue reading →

Bind a model property to a different named query string field

The ASP MVC model binder automatically maps a query string to an object model by matching each field to a property name. This is very handy, but things can quickly get quite verbose:


Ideally I want to give my class properties an abbreviated alias for use in the query string. Thus, I should be able to use the following URI instead, and still have the input values mapped automatically to the model:


Fortunately there is an elegant solution, which I must admit I’m blatantly writing up based on an answer given on Stack Overflow. My solution does however fix a bug to make multiple aliases on a single property work as intended.

Continue reading →

Grouping data with LINQ and MVC

Showing a list or table of data in groups is very common, and fortunately also very easy to do with LINQ. In the end we want our data to look something like this:

Continue reading →

Localization with fallback using LINQ

So you need to support multiple languages in your website, and you need the system to fallback to a default language if no translation is available. Fortunately LINQ is here to help and can do it all within a single SQL statement.

Since localization is a basic need for all international applications, I have made a simple structure, which can be applied in situations where an entity is required to have localizable values.

Continue reading →

Firefox auto login with Windows Authentication and AD

When creating intranet websites, Windows Authentication will take care of all your user identification needs. Both Internet Explorer and Chrome will automatically pass your NTLM (Active Directory) user credentials to the server, but Firefox will not and instead presents the user with an ugly login prompt. Fortunately it’s quite easy to enable this in Firefox with a simple configuration change.

Continue reading →

View source on the iPad and iPhone

Update 2017-07-06: As of iOS 9 this bookmarklet doesn't work reliably anymore. Any suggestions to fix it are most welcome.

As a web developer I'm frequently looking at the source code of various websites. Lately my new iPad has become my primary tool for surfing and reading documentation, but alas it completely lacks a view source feature.

A fine solution is to create a bookmarklet, which is a piece of JavaScript saved as a bookmark. When you want to see the source of a web page, just click the bookmark and the source of the page is displayed. I was inspired by this bookmarklet by Rob Flaherty, but it has a few shortcomings. To improve upon the bookmarklet concept, I created my own version with a few more bells and whistles:

Continue reading →

Gmail+ your email – filter maillists and catch spam

Gmail by Google A great “hidden” feature in Gmail, is the option to append a + followed by any text you like to the username part of your email address.

This text will be ignored by Gmail, and you will receive your emails as usual, but it allows you to create unique email addresses on the fly.

Continue reading →

Custom MembershipProvider, Principal and Identity

Recently I ported a large website from ASP.NET Web Forms to the shining new ASP.NET MVC 3. During this process I also decided to implement “proper” MembershipProvider-based security instead of a simpler, custom HTTP module we were running.

As I started implementing my custom MembershipProvider, I became a bit confused, however, about the sheer number of classes you have to implement/override. I ended up spending quite a lot of time searching for help, so here I will attempt to give a “shortcut” overview of the structure of the MembershipProvider model and lessons learned.

Continue reading →

Using URI hash instead of query strings

A URI hash is a great way to make JavaScript/AJAX pages with dynamic content bookmarkable. It can be used in a manner similar to query strings, but changes will not cause a new page request. This allows you to store data in the URI which can be read and changed by JavaScript without ever reloading the page.

Continue reading →

Website optimization

This is a presentation of the techniques and optimizations I have used on this site. The goal has been to create a website using all the latest standards, like HTML5 and CSS3, and exploring performance optimization techniques to reduce HTTP requests and compressing scripts etc.

Continue reading →