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



Roc  —  One solution to JavaScript Fatigue



An open source toolkit for JavaScript development

There has been a lot of talk recently about how hard it is to do web development in this day and age. People are describing the current state of web development as depressing and frustrating, referring to it as JavaScript Fatigue. If you haven’t I would recommend you to go and read this excellent article by Eric Clemmons on the topic: Javascript Fatigue.

We need to do something about this and we need to do it now. Web development should not be frustrating. In fact I believe that it has never been as exciting and fun as it is now.

As mentioned in the article above several people are trying to find a solution to this symptom, all with different goals and ambitions. I would like to go ahead and present one such solution, one that I have personally been involved with, Roc.


Rethinking modern JavaScript development


Tiny libraries. Doing one thing well. A blessing and a curse?

This article presents the reasoning behind the creation of Roc, a modern JavaScript toolkit. If you are not interested in the background you can get started here instantly.

The modern days of JavaScript has us shifting away from the more traditional and rigid frameworks. Instead we are now in a fast-moving trend of using a large number of micro-libraries from npm that are combined within our own projects.


This approach yields great flexibility and freedom of choice for us as JavaScript developers. We get to pick the exact building blocks that we would like to use in order to build our apps and components. With tools like Babel and Webpack one really can use the latest technology to get things done. Adding libraries to our project with npm is easy and almost instant. Yeah!


Be environment aware!


Every once in a while, I see or hear someone complaining that a basic React application ran through Webpack ends up being 700 kB or more. I think it’s important to take a look at why this is happening – cause it’s usually all about the environment.

When you’re in development, what you want is:

  • Quick builds
  • Being able to trace an error back to the correct line number
  • Warnings if you’re doing something wrong

When you’re in production, what you want is:

  • Smallest bundle size
  • Fastest execution


Clean and simple Z-index with SASS lists


So.. Z-index. Ever used it on a rather large scale site before? Or in a CSS environment that you don’t really know inside out? What number did you set? Did you make it really, really high just to be sure? Ever used z-index: 100003? Or 99999999?

Highest z-index was an astonishing 999999999999999999999999999 or 9.99e26. With a default key repeat on OS X, this would take 3 seconds of holding down 9 to type.

QuickLefts 2014 CSS report

You don’t do that, right? Perhaps you rather build systems with levels set in hundreds or thousands, to be able to sneak in future elements? The oddball z-index: 1005; here and there?

For my latest project I used a rather simple trick in SASS that got me out of this potential mess, and I didn’t even set a single number. SASS took care of that for me! (more…)

Light introduction to Web Components


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.


Make your stuff look better – in 3 easy steps!


Many developers dread that final part of a project when they have coded up a brilliant piece of work and all that is left is making it look presentable. Unfortunately, it’s repeatedly proven that technical brilliance is easily overlooked unless it looks half decent and preferrably a bit unique. And while the trustworthy Twitter Bootstrap takes care of the first, it fails badly on the latter. Sometimes it might also be a bit superfluous to pull out an entire framework for a small piece of work.

So here’s a short, simple primer – in three simple steps – that can help you make your project look a bit more presentable without the need of an entire library.

CSS: Block formatting context


Floats, absolutely positioned elements, block containers (such as inline-blocks, table cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

~ W3C, CSS 2.1

Confusing? I at least thought so, but it’s actually quite simple when explained. The block formatting context is part of the visual CSS rendering of a web page. It affects the layout by changing how the contained elements float and clear. (more…)

Responsive CSS


The days when it was enough to create html stylesheets that work on one given screen width (eg 1024px) is over. As smartphones and tablets took the market, it was very common to have separate pages for such devices, like or Today, browsers are found on devices of all shapes and sizes. The transition between mobile and tablet is starting to blur, and soon browsers are found in both the television and the watch.

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

Speed up websites using DNS prefetching


We recently added a couple of lines of HTML to our mobile website that potentially speeds it up for users with recent browsers (Chrome and Firefox, at the time of writing). The technique might not work for all sites, but it applied very well to ours. I’ll explain how and why (more…)