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

Roc  —  One solution to JavaScript Fatigue

Frontend

1-XjYBdRCaxe_11pd9275vlw

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.

(more…)


Rethinking modern JavaScript development

Frontend

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.

npm

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!

(more…)


VG Hack Day 2015

Design

hackday_4312

On a cold Thursday in December, we held our annual Hack Day on the top floor of the VG building in Oslo. 30+ eager developers, designers and product people huddled together in front of the fireplace, to experiment, create and have fun with VG’s products and technology.

Surrounded by soda cans and bags of snacks, and entangled in wires of all kinds, we sat for 18 hours, churning out lines of magical code and golden pixels. Continue reading to see some of the things we did.
(more…)


Be environment aware!

Frontend

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

(more…)


JavaScript Code Style

JS

Code is read much more often than it is written. Having a consistent and defined coding style helps developers read the code, and it also helps to make a code base feel like one unit, instead of individual pieces written by different authors with their own way of doing things.

Having a coding standards is beneficial, but making people follow it is usually a bit harder. Let me introduce two awesome tools to help you: JSHint and JSCS. (more…)


Writing, testing and publishing Javascript modules

JS

So you want to write reusable, maintainable and modular Javascript, huh? Good.

Here’s a rather extensive “getting started”-guide by yours truly – which means it’s my own preferred way of doing things. It’s written with open-source in mind, but most points can be applied to “private” modules as well.

(more…)


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