DEV Community: Michael Vestergaard

New launch

Michael Vestergaard — Fri, 27 Feb 2026 13:39:17 +0000

New website just launched (in Danish) for 3F: https://ditarbejdsliv.3f.dk/

A look behind Ribbit.dk

Michael Vestergaard — Sat, 13 Dec 2025 14:22:00 +0000

My latest launch ribbit.dk has gained a lot of attention lately. Among many awards and features, we were also interviewed by The FWA, here is an excerpt from the interview, read it all here.

What did you want to accomplish with the project?
Said shortly: Our goal was to create a truly unique and tailor-made website for Ribbit.

Our challenge: To develop a distinct identity that cuts through the noise of an already skilled and competitive motion design industry.

Through our research, we discovered that few competitors were trying to build brands that risked overshadowing the client work they showcased, especially not through brand characters. So we decided to do exactly that. We needed to zig when everyone else zagged. Most competitors design their sites as clean black-and-white canvases, allowing the work to stand out. We wanted everything to stand out, to pop, to exude playfulness and curiosity, and to express Ribbit’s unique creative spirit.

What technical challenges did you encounter and how did you solve them?
Michael: The push and pull animations on the homepage required us to think creatively with code. Our immediate approach was to use a WebGL renderer and spritesheets. But we couldn't get the smooth feeling out of it. So after some experimentation with custom renderers and spritesheets, we ended up with a simple solution of loading each frame as a png and toggling the visibility of it.

For the Process page, the opening of the book progressively on scroll required some extra attention too. We really wanted the feeling of moving seamlessly into the video sections, but we also wanted the user to feel in control.

Three hot facts:

Making rounded corners on the Process videos was one of the hardest things on the website!
Ribbit was originally going to be called Howl at the start of the project, but the name was changed for reasons we can’t disclose here.
The booking flow was given a lot of attention too, try it out.

It was such a pleasure working on this site with the talented people from Ribbit and designer Frederik Hansen. If you are looking for a developer to build a creative website, please get in touch.

Headless static website

Michael Vestergaard — Sun, 27 Apr 2025 18:37:53 +0000

Here's my typical technical setup for small and medium sized websites:

Back-end:
Headless CMS, usually Prismic or Storyblok.
PHP on the server to generate the website.

Front-end:
Static website (html,css and javascript).
No need for advanced routing or server setup (same hosting and server as Wordpress, Drupal etc. can be used).
Various frameworks and libraries when relevant (GSAP, Three.js etc .)

When a CMS editor publishes new content from the CMS, a webhook is calling a script on our server. This script loads all data from the CMS and generates static files on the server. The process is usually very fast (less than 2 seconds), in opposition to many popular frameworks I have tested. Editors can preview/view updated content easily and have a fast and friction-less editing experience.

The benefits from a setup like the above are primarily:

Great editing experience in the CMS.
Very fast website (nothing is loaded from databases).
Great SEO (nothing relies on javascript interpretation). If the website is ranking high, then updates are usually visible within a couple of hours!
Great Lighthouse score. This helps both SEO and accessibility.
When using Prismic, we have all images in the imgix CDN. This means fast load times globally.
Headless means a separation of the back-end (handling all your data and assets) and the presentation layer (what your website visitors see). This makes it easy to work independently in either, but also avoids situations in which a content editor is designing in the CMS.

Downsides to a headless setup:

Very large websites can experience longer build times.
The modules and content in the CMS doesn't look designed (but very few CMS actually offers this anyway).
Some services can be hard to integrate (Shopify, Hubspot etc. are all possible, but not as easy or deeply integrated as I sometimes would like).
You don't host your own data. For many companies this is actually good, because you have back-ups and don't have to worry about servers and databases. But for some larger companies, hosting and storing all data is important.

Please have a look at my freelance front-end developer portfolio if you are interested in more.

Okay devs

Michael Vestergaard — Sun, 27 Apr 2025 18:05:12 +0000

There's a new kid in town: Okay Dev. A community for creative front-end developers (like myself).
Big kudos to Eric who is running the whole thing, he put a massive amount of work and heart into it. I was fortunate to be interviewed by him recently, have a look here if you're curious. We are talking about history, tools, projects and much more.
As a freelance creative front-end developer, it's great with communities like Okay Dev, to share knowledge with each other.

Using TUIO with javascript

Michael Vestergaard — Tue, 18 Jun 2024 07:50:32 +0000

I recently developed an application for a museum running on a TILE display from Displax.
In order to get this up and running I needed to create a node.js server and websocket connection. Recent examples of this are hard to find online, so I want to share my code for anyone in the same situation, hopefully this saves you some time :-)

First you must have installed a server and node.js

Then install the packages needed through terminal/command prompt:

npm install osc express socket.io bufferutil utf-8-validate --no-audit

In your html file include this:
https://cdn.socket.io/4.7.5/socket.io.min.js

Now you need to create a server file, let's call it "server.js":

const bufferUtil = require('bufferutil');//maybe not needed, but maybe it speeds things up!
var osc = require('osc');
const express = require('express');
const { createServer } = require('node:http');
const { Server } = require('socket.io');
const app = express();
const server = createServer(app);
var socket;

const io = require("socket.io")(server, {cors:{origin: "*",methods: ["GET", "POST"]}});

//Listen to the TUIO data
const udpPort = new osc.UDPPort({
  localAddress: "127.0.0.1",
  localPort: 3333,
  metadata: true
});

//Listen/send on port 3000 or 5000
server.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

io.on('connection', function (_socket) {
  socket = _socket;
    socket.on('config', function (obj) {
      console.log('config', obj);
    });
});

// Listen for incoming OSC bundles.
udpPort.on("bundle", function (oscBundle){
  if(socket && oscBundle.packets.length > 2) socket.emit('message', oscBundle);//only send TUIO v1.1
});

// Open the socket.
udpPort.open();

Now for connecting in the front-end, we need this script:

function WSConnection(_address){
    const socket = io(_address);//, {withCredentials: true}
    socket.on('error', function(){
        console.log("Error connecting!");
    });
    socket.on('connect', function(){
        console.log("Server connected");
        socket.emit('config', {server:{port: 3333,host: '127.0.0.1'},client: {port: 3334,host: '127.0.0.1'}});
    });
    socket.on('message', function(oscBundle){
    });
}
//Init
WSConnection("http://127.0.0.1:3000");//or port 5000

To start the server open terminal and cd into the server.js folder and enter:
node server.js

Now your have a running node.js server and a front-end that listens to any TUIO objects being sent through the server.

In order to test you can download the "TUIOSimulator.app" from here:
https://github.com/gregharding/TUIOSimulator

When above works you are facing the next challenge. Depending on the hardware and software you are using, TUIO objects can often be a little unreliable. Sometimes events are fired too slowly, so you think an object is removed from the display. So I made some custom work arounds for these scenarios. In my example I'm using both touch and object recognition, so I have to use both "tuio/2Dcur" and "tuio/2Dobj".

This is my "message" function:

var _alive = [], _aliveTags = [], _aliveCursors = [], _cursors = [];
var _l = 0, _id = 0, _numAlive = 0, _cursorId = 0;
var _v = "";

socket.on('message', function(oscBundle){
    _l = oscBundle.packets.length;
    for(var i=0;i<_l;i++){
        if(oscBundle.packets[i].address == "/tuio/2Dcur"){
            _v = oscBundle.packets[i].args[0].value;
            if(_v == "alive"){
                //Find alive cursors
                _numAlive = oscBundle.packets[i].args.length - 1;
                _alive = [];
                for(var l=0;l<_numAlive;l++){
                    _cursorId = oscBundle.packets[i].args[l+1].value%100;
                    _alive.push(_cursorId);
                    if(_aliveCursors.indexOf(_cursorId) == -1){
                        console.log("Add cursor",_cursorId);
                        _aliveCursors.push(_cursorId);
                        _cursors[_cursorId] = new TuioObj(_cursorId,false);
                    }
                    else _cursors[_cursorId]._removed = false;//keep alive (if set to be removed on next render)
                }
                //Find old cursors not alive anymore
                _numAlive = _aliveCursors.length;
                for(var l=0;l<_numAlive;l++){
                    if(_alive.indexOf(_aliveCursors[l]) == -1){
                        _id = _aliveCursors[l];
                        if(_cursors[_id]._removed){
                            console.log("Destroy cursor", _id);
                            _cursors[_id].destroy();
                            delete _cursors[_id];
                            _aliveCursors.splice(l,1);
                            _numAlive--;
                            l = 0;
                        }
                        else{
                            //console.log("Remove cursor", _id);
                            _cursors[_id]._removed = true;
                        }
                    }
                }
            }
            else if(_v == "set"){
                _cursorId = oscBundle.packets[i].args[1].value%100;
                if(_aliveCursors.indexOf(_cursorId) != -1) _cursors[_cursorId].setXY(oscBundle.packets[i].args[2].value * _appW,oscBundle.packets[i].args[3].value * _appH);
                else console.log("Cursor not found!", _cursorId);
            }
        }
        else if(oscBundle.packets[i].address == "/tuio/2Dobj"){
            _v = oscBundle.packets[i].args[0].value;
            if(_v == "alive"){
                //Find alive cursors
                _numAlive = oscBundle.packets[i].args.length - 1;
                _alive = [];
                for(var l=0;l<_numAlive;l++){
                    _cursorId = oscBundle.packets[i].args[l+1].value%100;
                    _alive.push(_cursorId);
                    if(_aliveTags.indexOf(_cursorId) == -1){
                        console.log("Add tag",_cursorId);
                        _aliveTags.push(_cursorId);
                        _tags[_cursorId] = new TuioObj(_cursorId,true);
                    }
                    else _tags[_cursorId]._removed = false;//keep alive (if set to be removed on next render)
                }
                //Find old cursors not alive anymore
                _numAlive = _aliveTags.length;
                for(var l=0;l<_numAlive;l++){
                    if(_alive.indexOf(_aliveTags[l]) == -1){
                        _id = _aliveTags[l];
                        if(_tags[_id]._removed){
                            console.log("Destroy tag", _id);
                            _tags[_id].destroy();
                            delete _tags[_id];
                            _aliveTags.splice(l,1);
                            _numAlive--;
                            l = 0;
                        }
                        else{
                            //console.log("Remove tag", _id);
                            _tags[_id]._removed = true;
                        }
                    }
                }
            }
            else if(_v == "set"){
                //console.log("Tag static id:", oscBundle.packets[i].args[2].value)
                _cursorId = oscBundle.packets[i].args[1].value%100;
                if(_aliveTags.indexOf(_cursorId) != -1) _tags[_cursorId].setXYR(oscBundle.packets[i].args[3].value * _appW,oscBundle.packets[i].args[4].value * _appH,oscBundle.packets[i].args[5].value);
                else console.log("Tag not found!", _cursorId);
            }
        }
    }
});

For each TUIO object, either a Tag or Touch, I am using this TuioObj, here's a simplified version of mine:

function TuioObj(_id,_isTag){
    var _this = this;
    _this._removed = false;//TUIO "alive" events are not reliable and often remove an object only to add it instantly again!

    //Touch (x and y coordinate)
    _this.setXY = function(x,y){}

    //Tag (x and y coordinate and rotation value)
    _this.setXYR = function(x,y,r){}

    //Destroy (remove DOM elements, event listeners etc.)
    _this.destroy = function(){}
}

Of course many more features, like idle handling, smooth movement (check my post on lerp) and distance measurement (for click handling etc.) can be added, but now you should have a template to get you started.

Using lerp and damp in javascript

Michael Vestergaard — Sat, 15 Jun 2024 18:55:00 +0000

Almost every project I do as a creative developer utilizes linear interpolation - also called "lerp". It's a simple way of easing from position A to B. Without diving into the math, there's another approach called damp (or smoothdamp), this is almost similar but has a smoother curve (more like a Quad and less like an Expo).

The classic way of using lerp is like this:

//speed between 0-1
_tweenedValue += (_actualValue - _tweenedValue) * _speed;

This works very well. You can even tween the speed if you want the movement to start slowly:

_this._speed = 0;
gsap.to(_this, 1, {_speed:.2, ease:"linear"});
_tweenedValue += (_actualValue - _tweenedValue) * _this._speed;

I'm using the above in custom cursors, carousels, elements that move based on mouse position and even for a smooth pagescroller (similar to Lenis).

Below is an example of both lerp and damp (blue and red), but also a fun little bouncy/elastic approach (green):

Responsive image with different aspect ratios

Michael Vestergaard — Thu, 30 May 2024 15:12:36 +0000

I recently discovered a small browser bug (or at least undesired behavior) related to the picture tag.

It's quite normal in many designs to use taller mobile images and wider desktop images. This means we have different aspect ratios. As freelance developer I often run into designs that use different aspect ratios between mobile and desktop layouts.

When crossing the breakpoint and going from one image to the other, the image size isn't instantly set correct, it doesn't happen until the image has loaded (tested in Chrome). This is problematic because we might have elements further down the page trying to read offsetTop or similar - this reading will be wrong until the image has loaded. You would think that setting the width and height on the "img" and "source" tag would solve this, but it doesn't.

I made this little demo to show the problem. In the console logs it's obvious that the readings are wrong. You can also see the fix:

The solution is fairly simple: Instead of relying only on the normal "resize" event, use a ResizeObserver to check for changes in the document height.

I'm pretty sure the reason for this behaviour, is to always show an image. So while the new image loads the browser keeps showing the old image. This is good (looking) for many reasons, but of course gives us the false readings mentioned above.

Working freelance as a frontend developer

Michael Vestergaard — Wed, 17 Jan 2024 09:05:46 +0000

For more than 15 years I have had the pleasure of working freelance, or as a consultant, which might sound more exclusive :-)

Since the beginning I have worked with a broad variety of clients. In the first years mostly Danish, but for every year my client list gets more international. Now 90% of my clients are international. I do both normal and white label development for some great agencies in the US.
I have worked with top brands like Philips, LEGO, Velux, Volkswagen, HBO and B&O.

However I have also had to turn down some amazing projects. Once I turned down coca-cola.com! I have also turned down projects for Facebook and Google. All of them because my calendar was full. It hurts a little saying no to great projects, but I have had periods where I tried accepting all projects that came in. The result was that I was stressed out and soon after burned out. And there's a risk that it affects the quality of my work, which I cannot risk.

Working as a frontend developer that relies on networking and a great portfolio, the quality of my work has to be consistent. This is also the reason I haven't partnered with anyone (or hired junior developers). However it's also a small curse to not be able to delegate or share work, so this is something I'm slowly opening up to. I don't dream of a managing role, but it would be great with partnerships and closer collaborations.

Please let me know if you are looking for a freelance frontend consultant.

Aspect ratio trick

Michael Vestergaard — Fri, 12 Jan 2024 15:21:15 +0000

A long time ago some clever developer starting using the famous padding trick to control the size of images before they were loaded. Basically you wrap your (absolute positioned) img tag in a div with width:100% and padding-top set to whatever percentage fits the aspect ratio.

I rarely use this technique for images anymore, but it's useful for video elements. The reason is that often you don't want to create the video tag unless the user is ready and interested in the video (maybe the see a splash image with a play button first). Videos can become quite heavy on a website and the loading property works inconsistently between different browsers. And let's not go into autoplay, mute and low power mode on iOS :-)

I usually did this trick in javascript (receiving the width and height, then calculating and applying the padding). But the method below is much smarter - I have seen this quite a few places and I adopted the approach too:

HTML:

<div class="lazy video" data-src="16_9.mp4" style="--aspect:56.25%;"></div>

CSS:

.lazy.video:before{content:"";display:block;padding-top:var(--aspect);width:100%;pointer-events:none;}

You can do it in many ways, setting the size directly on the video tag too, if that fits your setup better.

Being an award-winning website developer means you have to stay on top of modern and effective techniques. This is just a small one I wanted to share with you.

Lazy loading images in 2024

Michael Vestergaard — Fri, 12 Jan 2024 15:08:36 +0000

A couple of years ago I did a post about my method for lazy loading images with (vanilla) javascript. Things have changed much since, for the better :-)

Now we can control lazy loading easier and with less code than ever. You have probably heard of the “loading” attribute, but have you also dived into the “decoding” attribute? Below is a little example of how I often set up images these days.

<!-- This image is above the fold-->
<picture class="lazy">
  <source srcset="/Assets/Images/1920.png" media="(min-width:1600px)" width="1920" height="1080">
  <source srcset="/Assets/Images/1280.png" media="(min-width:1000.5px)" width="1280" height="720">
  <img src="/Assets/Images/640.png" width="640" height="360" alt="" fetchpriority="high" draggable="false">
</picture>
<!-- This image is below the fold-->
<picture class="lazy">
  <source srcset="/Assets/Images/1920.png" media="(min-width:1600px)" width="1920" height="1080">
  <source srcset="/Assets/Images/1280.png" media="(min-width:1000.5px)" width="1280" height="720">
  <img src="/Assets/Images/640.png" width="640" height="360" alt="" loading="lazy" decoding="async" draggable="false">
</picture>

There are a few things to notice:
For images above the fold, Google now recommends using fetchpriority=”high” and no “loading” attribute. This speeds up the Largest Contentful Paint metric and helps your website load faster.

For images below the fold, remove the “fetchpriority” attribute and add loading=”lazy” instead. This really simple method now lazy loads your images, no javascript is needed (unless you want to control an animation, maybe fading in the image).

If you also add decoding=”async”, you are telling the browser to control when and where the decoding happens. There are discussions about the impact of this, but it’s probably better to do this than not.

The above code is really simple, but remember you can control the (source) “srcset” even more detailed with high DPI images etc.

A while ago I did a lot of research to find out if I should use the “picture”, or “img” element. I ended up with “picture” because of Art Direction purposes: often the mobile image isn’t the same aspect ratio as the desktop, so I need more individual control of the sources. Read more about this here and here. The “img” tag is still great for many things, so don’t completely move away from it.

Another great thing about this new(er) method is that you don’t need the aspect ratio (padding-top on parent container) trick anymore. The image has the correct size instantly, which makes for faster rendering and less code.

The browser support for modern lazy loading is really good, so go ahead and make your life easier :-)

As a creative freelance front-end developer I often try to optimize my methods, utilities and frameworks. It’s important though that I always consider all users and not only the people with new updated computers and devices. The above method is not new, but in my opinion it’s only now that the market is ready (unless you have clients who don’t care about old computers etc.).