VGTech is a blog where the developers and devops of Norways most visited website share code and tricks of the trade… Read more

Are you brilliant? We're hiring. Read more



NPM, Travis, Node 0.8 and the “Caret Operator”


If you have a node.js project that you want to have tested using Travis-CI, you may run in to a problem if you want to support node <= 0.8. The reason for this is the new caret operator, which was introduced in node-semver.

This module is used by npm to figure out how to resolve versions for your dependencies, and while it’s a great idea, it fails to work on older node versions without upgrading npm first. It’s actually fairly trivial to fix this, however. (more…)

JavaScript: What the hell is this!?


In this post we will cover some JavaScript basics with focus on areas experienced JavaScripters take for granted; but beginners sometimes struggle with.. If you fall somewhere in between then maybe this post will teach you something new!


Visualizing the most read articles on VG


Article visualizationD3. Behind this name is a pretty neat concept, called Data-Driven Documents. I took a look at the framework last year after seeing a lot of cool demos using it. It’s really flexible, and is not tied to a specific form of presentation – you can use D3 to generate an HTML table from an array of numbers, or use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

After looking through different layout algorithms available in D3, I found the treemap algorithm particularly interesting. I’ve seen it used before in both profiling tools and disk usage analyzers and found them to be very efficient for visualizing the difference between numbers. An idea popped into my head: “Maybe this can be used to visualize which articles are being read the most?”. I decided to give it a try. (more…)

WebGL DAE model viewer


WebGL Model Viewer3D modeling is pretty fun. I’m nowhere near an expert – in fact, I’ve only really used Sketchup. There was a time when I was really into it, making 3D-models for all sorts of PC components.

The other day, I was looking at a WebGL demo made in three.js, and wanted to see how hard it would be to do some basic stuff in WebGL.

Having seen a lot of demos using three.js, I figured it would be a good starting point. (more…)

Server-side Highcharts rendering


Highcharts is a fantastic tool for generating javascript-based charts. It’s flexible, fast and can be extensively customized. Recently, I had to find a way to render Highcharts as static images on the server as we wanted to attach charts in emails.

The reason why we wanted to stick with Highcharts even on the server is to still maintain a single code-base and to have a unified feel of the charts we present to our users. (more…)

Hover state on touch devices


With an increasing number of users on tablets and smartphones, the need to take touch friendliness into consideration is greater than ever. Even though both the browsers and hardware are approaching desktop speed, there are still some issues with implementing web sites and web apps for these devices. (more…)

Strip HTML from a string in Javascript


Quick tip; never use innerHTML (or jQuery’s html()) unless you really want to insert HTML.
Quite often, what you actually want is to insert some text. If this is the case, use innerText (or jQuery’s text()).

Should you need to strip HTML from a string (say you are building a chunk of HTML and need to insert the content of an input-field into it), this is a simple way of doing it:

Show code
function stripHtml(str) {
    var temp = document.createElement('DIV');
    temp.innerHTML = str;
    return temp.textContent || temp.innerText;

Or, if you’re using jQuery:

Show code
function stripHtml(str) {
    return jQuery('<div />', { html: str }).text();

WARNING: Please be aware that any code (script tags) and resources linked (images, scripts) will still be run using this approach. Only use this approach when you have some degree of control over the input and context. Securing markup is not a trivial task and should be given more thought.