Ole Michelsenhttps://ole.michelsen.dk/Web Development and Computer ScienceenWriting a library with TypeScript and proper test coverageWriting 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.

]]>
Sun Apr 30 2017 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/writing-library-with-typescript-test-coverage.htmlhttps://ole.michelsen.dk/blog/writing-library-with-typescript-test-coverage.html
Testing ReactJS with coverage using mocha+babel+istanbulI 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.

]]>
Sun Jun 26 2016 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/testing-reactjs-with-coverage-using-mocha-babel-istanbul.htmlhttps://ole.michelsen.dk/blog/testing-reactjs-with-coverage-using-mocha-babel-istanbul.html
Social sign in with single-page app and JWT server validationSocial 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.

]]>
Sun Jan 24 2016 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/social-signin-spa-jwt-server.htmlhttps://ole.michelsen.dk/blog/social-signin-spa-jwt-server.html
Making an offline web app with Service WorkersThis 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.

]]>
Sat Sep 05 2015 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/making-an-offline-webapp-with-service-workers.htmlhttps://ole.michelsen.dk/blog/making-an-offline-webapp-with-service-workers.html
Secure your website with Content Security PolicyContent 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!

]]>
Sun Jul 19 2015 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/secure-your-website-with-content-security-policy.htmlhttps://ole.michelsen.dk/blog/secure-your-website-with-content-security-policy.html
Install Windows 8 with Boot Camp on Yosemite with USB keyIntel 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.

]]>
Wed Jun 24 2015 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/install-windows-8-with-boot-camp-on-osx-yosemite-with-usb-key.htmlhttps://ole.michelsen.dk/blog/install-windows-8-with-boot-camp-on-osx-yosemite-with-usb-key.html
Schedule jobs with crontab on Mac OS XRunning 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.

]]>
Sun Feb 22 2015 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/schedule-jobs-with-crontab-on-mac-osx.htmlhttps://ole.michelsen.dk/blog/schedule-jobs-with-crontab-on-mac-osx.html
Testing your API with PHPUnitExample 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.

]]>
Tue Dec 30 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/testing-your-api-with-phpunit.htmlhttps://ole.michelsen.dk/blog/testing-your-api-with-phpunit.html
Setup local web server with Apache and PHP on OS X YosemiteThis 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.

]]>
Tue Nov 25 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/setup-local-web-server-apache-php-osx-yosemite.htmlhttps://ole.michelsen.dk/blog/setup-local-web-server-apache-php-osx-yosemite.html
Download and edit JSON files with gulpI 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.

]]>
Wed Nov 05 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/download-and-edit-json-files-with-gulp.htmlhttps://ole.michelsen.dk/blog/download-and-edit-json-files-with-gulp.html
Using BrowserSync with HarpSo 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.

]]>
Fri Oct 17 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/using-browser-sync-with-harp.htmlhttps://ole.michelsen.dk/blog/using-browser-sync-with-harp.html
Showing photo GPS location on Google Maps with gulpIn 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.

]]>
Sat Oct 11 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/showing-photo-gps-location-on-google-maps-with-gulp.htmlhttps://ole.michelsen.dk/blog/showing-photo-gps-location-on-google-maps-with-gulp.html
Breadcrumb trail with Harp and JadeI 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.

]]>
Wed Sep 17 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/breadcrumb-trail-harp-jade.htmlhttps://ole.michelsen.dk/blog/breadcrumb-trail-harp-jade.html
Add custom hostname to Apache on OSX 10.9 MavericksLogo of the Apache Software Foundation I have previously blogged on how to setup a local web server in Mavericks, and use it to serve web sites directly from your Dropbox folders. This works very well for simple web sites, but if you are using a third party framework like the Facebook SDK, you might need to serve your sites from a specific hostname, e.g.: dev.mysite.com.

]]>
Wed May 07 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/add-custom-hostname-to-apache-osx-mavericks.htmlhttps://ole.michelsen.dk/blog/add-custom-hostname-to-apache-osx-mavericks.html
Syntax highlight files in MacOS Terminal with lessIt's often useful to peek at files directly from the Terminal, but wouldn't it be nice to have a little syntax highlighting as well? Thankfully MacOS Terminal supports 256 radiant colors, and with a little help from GNU Source-highlight, we can set it up in no time. Firstly we install source-highlight using Homebrew:

]]>
Tue Mar 25 2014 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/syntax-highlight-files-macos-terminal-less.htmlhttps://ole.michelsen.dk/blog/syntax-highlight-files-macos-terminal-less.html
Setup local web server with Apache and PHP on MacOS X MavericksUpdate 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.

]]>
Mon Dec 30 2013 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/setup-local-web-server-apache-php-macos-x-mavericks.htmlhttps://ole.michelsen.dk/blog/setup-local-web-server-apache-php-macos-x-mavericks.html
Navigate form fields with arrow keysRecently I created a puzzle game called Regex Crossword, where a lot of data is to be entered in a grid of input form fields. To improve a little on the user experience, I wanted to be able to navigate between fields using the arrow keys.

]]>
Wed Nov 13 2013 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/navigate-form-fields-with-arrow-keys.htmlhttps://ole.michelsen.dk/blog/navigate-form-fields-with-arrow-keys.html
Split a string to a table using T-SQLThere 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.

]]>
Tue Mar 26 2013 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/split-string-to-table-using-transact-sql.htmlhttps://ole.michelsen.dk/blog/split-string-to-table-using-transact-sql.html
Serialize object into a query string with ReflectionWhen 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.

]]>
Thu Sep 13 2012 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/serialize-object-into-a-query-string-with-reflection.htmlhttps://ole.michelsen.dk/blog/serialize-object-into-a-query-string-with-reflection.html
Calculate a running total in SQL Server 2012 In the previous versions of SQL Server, calculating a running total for say, a bank account ledger, has been a frustratingly complex task. Fortunately SQL Server 2012 makes this a breeze with new support for windowed aggregate functions.

]]>
Fri Apr 06 2012 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/calculate-a-running-total-in-sql-server-2012.htmlhttps://ole.michelsen.dk/blog/calculate-a-running-total-in-sql-server-2012.html
Bind a model property to a different named query string fieldThe 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:

http://domain/products?CategoryId=42&SortBy=Name&SortAscending=True

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:

http://domain/products?c=42&s=Name&asc=True

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.

]]>
Wed Mar 21 2012 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/bind-a-model-property-to-a-different-named-query-string-field.htmlhttps://ole.michelsen.dk/blog/bind-a-model-property-to-a-different-named-query-string-field.html
Grouping data with LINQ and MVCShowing 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:

]]>
Sun Nov 20 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/grouping-data-with-linq-and-mvc.htmlhttps://ole.michelsen.dk/blog/grouping-data-with-linq-and-mvc.html
Mapping relational table data to a tree structure in MVCWith the advent of MVC in ASP.NET, proper object oriented code is encouraged more than ever, and Razor makes it a joy to work recursively with tree structures. So how do we go about converting our SQL table data to a tree structure?

]]>
Mon Oct 03 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/mapping-relational-table-data-to-a-tree-structure-in-mvc.htmlhttps://ole.michelsen.dk/blog/mapping-relational-table-data-to-a-tree-structure-in-mvc.html
Localization with fallback using LINQSo 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.

]]>
Wed Aug 17 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/localization-with-fallback-using-linq.htmlhttps://ole.michelsen.dk/blog/localization-with-fallback-using-linq.html
Firefox auto login with Windows Authentication and ADWhen 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.

]]>
Sun Aug 07 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/firefox-auto-login-with-windows-authentication-and-ad.htmlhttps://ole.michelsen.dk/blog/firefox-auto-login-with-windows-authentication-and-ad.html
View source on the iPad and iPhoneAs 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:

]]>
Thu Jul 28 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/view-source-on-the-ipad-and-iphone.htmlhttps://ole.michelsen.dk/blog/view-source-on-the-ipad-and-iphone.html
Gmail+ your email – filter maillists and catch spamGmail 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.

]]>
Thu Jul 14 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/gmail-plus-your-email-to-filter-maillists-and-catch-spam.htmlhttps://ole.michelsen.dk/blog/gmail-plus-your-email-to-filter-maillists-and-catch-spam.html
Custom MembershipProvider, Principal and IdentityRecently 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.

]]>
Fri Jul 01 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/custom-membershipprovider-principal-and-identity.htmlhttps://ole.michelsen.dk/blog/custom-membershipprovider-principal-and-identity.html
Using URI hash instead of query stringsA 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.

]]>
Fri Jun 17 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/using-uri-hash-instead-of-query-strings.htmlhttps://ole.michelsen.dk/blog/using-uri-hash-instead-of-query-strings.html
Website optimizationThis 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.

]]>
Mon Feb 07 2011 00:00:00 GMT+0000 (UTC)https://ole.michelsen.dk/blog/site-optimization.htmlhttps://ole.michelsen.dk/blog/site-optimization.html