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
the

JS

category

The magic of createObjectURL()

JS

The web platform is maturing faster and faster, and we’re seeing the work normally done by native desktop applications now often shifting towards web-based applications instead. Features that may appear to have little importance can be really powerful when combined together.

A good example of this is URL.createObjectURL(). On it’s own, it really doesn’t do much. Paired with the HTML5 video and audio element, or even the good old image element, it gets to be really powerful.

(more…)


Light introduction to Web Components

CSS

Web Components is a new set of HTML5 definitions that is currently only partially supported in the latest browsers. This article intends only to glance at the technology hoping that you might get a little insight into one of the biggest evolutional steps of future HTML development.

(more…)


Node and systemd, bff!

DevOps

Since Centos7 was released in July, a “nondesktop” distro(other than rhel7 ofc) is using systemd.
Like it, hate it or discuss it, systemd is here to stay.
As we have been discussing internally how to manage startup of nodejs apps, using monit/pm2/others has been alternatives, and now, imho, systemd is sailing up as the better option. And the main reason is KISS. systemd will already handle the rest of your stack, so why add more.

So how to use it? This is the simplest way.
(more…)


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

JS

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!?

JS

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!

(more…)


Visualizing the most read articles on VG

JS

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

JS

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

PhantomJS

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

Frontend

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…)