Website development expert from Amsterdam on Usecue web development

Transition to and from display none

Sun, 09 Aug 2026 00:00:00 +0000

Fading something in was never the hard part. Fading it out was, because ‘display: none’ is a discrete property: it flips, it does not travel. So for twenty years we faked it with ‘visibility’, with negative offsets, with timeouts that removed a class after the animation “probably” finished. Kevin Powell explains how that changed:

The trick

Three ingredients, no JavaScript:

dialog {
    opacity: 0;
    translate: 0 -1rem;
    transition: opacity 0.3s, translate 0.3s,
                display 0.3s allow-discrete,
                overlay 0.3s allow-discrete;
}

dialog[open] {
    opacity: 1;
    translate: 0 0;
}

@starting-style {
    dialog[open] {
        opacity: 0;
        translate: 0 -1rem;
    }
}

‘allow-discrete’ tells the browser to hold the discrete flip until the rest of the transition is done. On the way in, ‘display: block’ applies immediately; on the way out, ‘display: none’ waits for the fade to finish. That is exactly the timeout we used to write by hand.
‘overlay’ is the same story for the top layer. A dialog or popover is lifted out of the page while open, and without this line it drops back the instant you close it — animating beautifully behind the rest of your layout, where nobody can see it.
’@starting-style’ gives the browser a “before” to transition from. An element that did not exist a frame ago has no previous value, so without it the entry animation simply does not happen.

Check out the demo on CodePen.

The two-second rule

Fri, 07 Aug 2026 00:00:00 +0000

Webdesigner Depot published an article about making your website feel like magic in 2026. Their answer is speed, and I could not agree more.

The nice thing about the article is that it moves the conversation past load time. Loading fast is table stakes. What people actually notice is whether the site answers them: tap a button, get a result. That is Interaction to Next Paint, and it is mostly a story about how much JavaScript you shipped.

Auto-growing textarea

Thu, 06 Aug 2026 00:00:00 +0000

For twenty years, making a textarea grow along with its content meant JavaScript: measure the content, write back a height, and patch every case where that goes wrong. But the internet is evolving… and today it takes only one CSS property. Both versions (JavaScript and CSS) are working on this page. Go ahead and try them out.

The JavaScript way

<textarea id="message" oninput="grow(this)"></textarea>
<style>
textarea {
    min-height: 2lh; 
    max-height: 12lh;
    resize: vertical;
}
</style>
<script>
    var message = document.getElementById('message');

    function grow(el) {
        if (el.dataset.resized) return;
        var style = getComputedStyle(el);
        var extra = style.boxSizing === 'border-box'
            ? parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)
            : -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
        el.style.height = 'auto';
        el.style.height = el.scrollHeight + extra + 'px';
        el.dataset.height = el.style.height;
    }

    new ResizeObserver(function () {
        if (message.style.height !== (message.dataset.height || '')) {
            message.dataset.resized = 'yes';
        }
    }).observe(message);

    addEventListener('pageshow', function () { grow(message); });
    addEventListener('resize', function () { grow(message); });
</script>

Demo

This is a good piece of code. No dependencies, no build step, and it works in every browser released since 2020. A relatively modern take on the old JavaScript approach. This code is exact to the pixel, because it reads the real border and padding widths off the computed style instead of guessing at line heights. It starts at the right size, it survives the back button, and it holds up when your phone gets rotated.

Five questions about Usecue CMS

Tue, 04 Aug 2026 00:00:00 +0000

BCMS published an article about what makes a CMS user-friendly. It contains five excellent questions that teams start asking about six months after implementation of their website (and CMS). I am going to answer all five for Usecue CMS.

Why does publishing take so long?

It doesn’t. Next question… Okay, fine, some proof. Here is a real website with 312 pages being rebuilt from scratch:

remote:                    | EN
remote: -------------------+------
remote:   Pages            | 312
remote:   Static files     | 414
remote:   Processed images | 426
remote:
remote: Total in 1897 ms

Under two seconds. That is not a clever cache trick, that is just Hugo being absurdly fast, and me refusing to build a CMS on anything slower. For comparison: I have watched another CMS take over 40 seconds to publish a site whose actual build took 500 milliseconds. Thirty-nine and a half seconds of pure ceremony, to fix one capital letter.

Why smart people get AI wrong

Tue, 04 Aug 2026 00:00:00 +0000

“Twenty years ago, climate denial was a problem of the right. Today, AI denial is a problem of the left. And the consequences could be even more disastrous. I don’t say this often, but I think this is the most important thing I’ve published in quite some time.”

This is what Rutger Bregman is saying. And when smart people talk about a very impactful change in society, it is not a bad idea to hear them out.

New Instagram widget

Mon, 13 Jul 2026 00:00:00 +0000

I had a solution for a clean, good looking, free Instagram widget on my website, but it no longer rendered in Firefox due to cross-domain restrictions. Therefore I created a fix for Hugo websites. You can find a demo here:

I used the getRemote call to get these images locally. Then I use Hugo’s image processing to compress them further. Finally I let Usecue CMS build my website daily so the images stay fresh.

Multiselect polyfill

Wed, 17 Jun 2026 00:00:00 +0000

What if I told you you could just use a ‘select’ with the ‘multiple’ attribute, without compatibility or usability issues? That would be magic, right? That is why I created a polyfill for native multiselects.

It uses the native multiselect on mobile and a custom one on desktop. Data submission and validation work as expected, and accessibility is built on native form semantics rather than a pile of hand-written ARIA. Using it looks like this:

Probably the fastest website in the world

Thu, 04 Jun 2026 00:00:00 +0000

The CEO and founder of PHI, Peter Egelberg, wrote that his website is probably the fastest website in the world. That made me want to see if he was right. And I have to say: “I am impressed.”

However, I found one mistake: his conversion pages are still slow.

Why would you create a blazing-fast website and exclude your most important pages from this optimization? Here is my hypothesis: I think they made their website fast by making it static and serving it from a CDN. This is why the HTML of most pages takes only 50ms to load (from my test location in Amsterdam). The contact page, however, takes over 1.2 seconds (more than 20 times slower)! I think they chose to exclude this page from the CDN, because it contains a form.

Make your website faster

Sat, 04 Apr 2026 00:00:00 +0000

Want more business? Make your website faster. Most businesses have a slow website and lose customers because of it.

Jade Wong ran Red Bamboo, a vegan restaurant in New York, for 24 years. Billie Eilish publicly named it her favorite place to eat. Wix featured it on their homepage. Yet the business declined steadily and eventually closed. Why? Her website took 35 seconds to load on a 4G connection. By the time the menu appeared, the hungry customers had already gone elsewhere and never came back.

Red Bamboo could have been saved

Sat, 28 Mar 2026 00:00:00 +0000

For 24 years, Jade Wong ran a vegan restaurant in New York, called ‘Red Bamboo’. Her business did not grow as fast as rent increased. Also, her foot traffic declined, as you can read here. In other words: business was decreasing.

This was strange, because Billie Eilish publicly named it her favorite place to eat and her website was being featured on Wix, one of the biggest website platforms. If Billie Eilish and Wix promote you, how can you still fail? Impossible, right?

A ready-made website

Wed, 25 Mar 2026 00:00:00 +0000

A client told me he liked this Wix template. A perfect chance to sell him my ready-made websites concept.

The template contains poorly written code without a proper CMS. To add any value to this design you should completely rewrite all code. And that is exactly what I did. Check out the result!

The difference between the original template and the remake? Javascript became 300(!) times smaller, HTML 80 times smaller and the fonts became 3 times smaller. The total weight of the remake (first load) is under 1 MB, while the original was close to 30 MB.

Instant publishing for SSGs

Sat, 13 Dec 2025 00:00:00 +0000

Static Site Generators (SSGs) are awesome… but there is one issue nobody talks about: publishing takes forever! Some people have tackled this problem by creating previews. But I have created the first CMS for SSGs with ‘instant publishing’! Check it out!

On the left you see the editor and on the right you see the live website. Pressing the ‘publish’ button updates the website on the right within a second. Simple, but amazing, right?

Isotope in just 60 lines

Thu, 23 Oct 2025 00:00:00 +0000

I saw the original Isotope Javascript fanciness and I just had to write a rebuild using modern web standards. Check out my rebuild!

My version of Isotope uses a grid layout and animates using view transition. It is silky smooth, blazing fast and has graceful degradation. The code consists of only 63 lines of vanilla JS, while the old version required an astonishing 3500+ lines. If you choose to leave the sorting out, you can even reduce the code to 37 lines. Yup… the web has come a long way.

Warrant canary added

Wed, 15 Oct 2025 00:00:00 +0000

I have added a canary to the homepage. It is not just a pretty illustration, it is a signal that is accompanied by a timestamp in the head, called a warrant canary. I got the idea from this website.

The warrant canary is the digital equivalent of the canary coal miners take into the mine. As long as the canary is alive everything is okay. In this case the timestamp is the equivalent of the last time somebody checked the canary’s well-being. The canary implicitly inform visitors about being served with a government subpoena (forcing the delivery of PII and meta data to the government), despite legal prohibitions on revealing the existence of the subpoena. It basically tells you that there has NOT been a court-issued subpoena before the canary’s timestamp. The timestamp only updates when I publish to this website. If I ever get a subpoena I will simply stop publishing posts on this website. So… with every new post you will know the canary is still alive and our (and your) data has not been breached. Isn’t that great news?

Ready-made websites

Sat, 04 Oct 2025 00:00:00 +0000

If you want to skip the design phase of a website development project, you can choose to buy a ready-made website, also called a theme or template. Thousands of these are available at very affordable prices.

How that works

You choose a ready-made website from a template directory (links below). I will connect the chosen template to my CMS. This ensures that you can update the content without accidentally breaking the design. I will then improve the performance (and SEO) of the website template, so you will not miss out on any traffic or conversion in the long run. Finally, I will make sure you pay a lower monthly fee than you would on its native platform.

Who is Hiroshi Abe?

Thu, 02 Oct 2025 00:00:00 +0000

Hiroshi Abe (阿部寛, born June 22, 1964) is a Japanese actor. He became known for his role in TRICK and Godzilla 2000. Wikipedia

The Japanese actor’s website is known in Japan for its simple design. It’s often said to resemble the internet of the 1990s in Japan. It’s also used by fans to benchmark consoles and hardware. It has become an ‘internet challenge’ to open this site in the most random apps and games.

Help, my website is down!

Wed, 01 Oct 2025 00:00:00 +0000

Wordpress breaks often. A 2023 WP survey found that 52% of Wordpress professionals had experienced their site breaking due to a plugin or theme update in the past year.

Even small updates can trigger the White Screen of Death if code conflicts with other plugins or the PHP version. Major core releases sometimes introduce compatibility issues with older plugins or themes. WPBeginner estimates that after every major release, hundreds of thousands of sites experience breakage, or at least visible errors, until patched.

Japanese principles in web development

Thu, 25 Sep 2025 00:00:00 +0000

I am a Dutch guy running a web development company in Amsterdam, the Netherlands. I am pretty tall, I love ‘bitterballen’ and when I say ‘grachten’ (canals) it sounds like I am clearing my throat. Yup… I am as Dutch as it gets. Yet, in my work I follow a lot of Japanese principles.

Kanso / Zen aesthetics

Eliminate clutter, keep only what’s essential.

Minimalist UI design with clean layouts.
Clear navigation and reduced cognitive load.
Lightweight code and optimized performance.

Wabi-Sabi

Beauty lies in imperfection and impermanence.

Why devs don't care about performance

Fri, 12 Sep 2025 00:00:00 +0000

I read this on Reddit [redacted]: “Why do most programmers that I talk to, who have more experience than me, seem to not care about performance as much? Why does a web page take 3s to load? Why can’t you learn to develop a fully functioning web app without a ton of libraries? And don’t get me started on frameworks. Does anyone relate?”

Here is my reply:

If you are talking about web applications: A simple LAMP stack performs crazy good, but is not ‘sexy’. Newer stacks are much ‘sexier’, but in general they perform terribly. High paying companies often use ‘sexy’ stacks to attract programmers. Devs with more experience get that and will choose ‘boring technology’ if it needs to work and ‘sexy’ stacks if they want to make money. They will be vocal about the latter. This is probably what you are experiencing. No bank runs ‘serverless’ or uses AWS.

Stockholm Syndrome with WP

Wed, 10 Sep 2025 00:00:00 +0000

The Stockholm Wordpress theme, available on Envato, recently caught my eye. It has an astonishing 35k sales and has some very nice looking examples. However, I noticed a lot of one star reviews in the last few months.

According to the reviews the theme is lacking support, is not properly responsive and is full of bugs. Yet, the makers must have earned 35k times 69 dollar… so more than 2 million dollar. How can this possibly (still) be bad?

How to avoid getting scammed?

Fri, 05 Sep 2025 00:00:00 +0000

How to avoid getting scammed when hiring a developer? I saw this question on Reddit (r/web_design) and below you will find what I replied.

I am a business owner and web developer at usecue.com. This is my approach: I will build your first project for free or for a reduced price, to keep your risk low. This gives us both the opportunity to get to know each other and see if we are a fit. If we are, I will make sure we both profit equally from every project. I will keep conversation about this topic open. I ask a small fee for building the website and I get a small monthly fee for hosting and for support on the CMS. My prices are in general equal or lower than what your client was paying before, which makes it an easy sell. I have optimized and automated most of my processes (and I have volume). Because of this I can ask relatively low fees and still make enough money. What I do NOT do is have strict contracts. Projects are messy. We both want happy clients. It will be bad for the both of us if we underdeliver EVER. In a good relationship we elevate each others business. Therefore, I will always share some of that risk and add an extra review round or extra functionality without any fuss. I know that nothing works as well as good publicity and word of mouth. A good developer makes sure his designers thrive, so the relationship can be long and successful. Most of my clients are not only long-term relationships, but they have also become good friends. Find a developer with that attitude. It will not only be good for your company, but it will make your work more fun as well!

The meaning of Takumi

Sun, 20 Jul 2025 00:00:00 +0000

“Takumi” is a name of Japanese origin and is typically given to boys. The name reflects a person who is talented, creative, and possesses a high level of skill in a particular craft or art form.

The word Takumi is composed of two kanji characters: “Taku” (匠) meaning artisan or craftsman, and “Mi” (美) meaning beautiful or skilled. When combined, the name Takumi translates to “artisan” or “skilled craftsman”.

Traditionally, artisans in Japanese society held a revered position, known for their dedication to mastering their craft and creating works of art with precision and expertise. The name Takumi embodies this dedication to excellence and the pursuit of perfection in one’s chosen craft. Takumi celebrates the craftsmanship and artistry that are deeply woven into the fabric of Japanese culture.

Ukko Wordpress and React theme

Fri, 04 Jul 2025 00:00:00 +0000

Ukko is a WordPress theme designed specifically for personal portfolios. It is a modern and stylish theme with a clean and minimalist design. Ukko is perfect for showcasing your work, skills, and experience.

The above versions are all available on Themeforest. They have been sold more than 800 times. I bought the React version, but found out it was not optimized at all. Therefore I created a better version using Hugo and my own CMS. The optimized version is 5(!) times smaller, has better SEO, automatic color filters for images and automatic image compression. You can see it here in production:

The fastest CMS in the world

Thu, 26 Jun 2025 00:00:00 +0000

Ik heb een CMS gebouwd voor de snelste static site generator ter wereld (Hugo). De pagina’s van mijn Usecue CMS laden in 200ms dus je vliegt er letterlijk doorheen. Daarmee is het waarschijnlijk het snelste CMS ter wereld.

remote:                    | EN   
remote: -------------------+------
remote:   Pages            | 312  
remote:   Paginator pages  |   0  
remote:   Non-page files   |   0  
remote:   Static files     | 414  
remote:   Processed images | 426  
remote:   Aliases          |   0  
remote:   Cleaned          |   0  
remote: 
remote: Total in 1897 ms

Maar niet alleen het laden van de pagina’s gaat snel… ook het publiceren van een website gaat in een oogwenk. Hierboven zie je de resultaten van het (her)publiceren van een website met 300+ pagina’s. Dat gaat in minder dan 2 seconden. Als ik deze opdracht aan CloudCannon geef (een ander CMS), dan doet die er in sommige gevallen meer dan 40 seconden over, ook als de daadwerkelijke build maar 500 milliseconden bedraagt. Wie wil er nou zo lang wachten op een content update? Stel je voor dat het alleen een hoofdletter of interpunctie wijziging is… dat is toch frustrerend?

I am big in Japan

Wed, 18 Jun 2025 00:00:00 +0000

“Isn’t that a song?” I hear you think. You are right. ‘Big in Japan’ was the debut single of the German synth-pop band Alphaville. It reached a number 1 position in the European charts in 1984. This cover is also worth listening to.

Marian Gold (the original lead singer and author) says about this song: It’s the lie/fantasy of the loser. He says he is not a loser, because in Japan he is really big.

I am sort of famous

Sun, 11 May 2025 00:00:00 +0000

I am sort of famous. At least… that is what I like to think after sifting through all my backlinks in Google Search Console.

Sure, I was a speaker at JekyllConf 2019, HugoConf 2022 and HugoConf 2023 and I am the organizer of the Jamstack Amsterdam Meetup group. And yes, I am also the author of Jekyll Codex, Hugo Codex and Hugobricks and I run my own CMS with almost 100 client websites. But… I have also gained some internet fame by writing articles. Something I value just as much. Here is a list of people who referenced me:

Why convert WordPress to static?

Thu, 08 May 2025 00:00:00 +0000

Switching to a static site is like upgrading from a clunky old car to a sleek electric vehicle—faster, safer, and more efficient. Static sites deliver content directly to users without relying on server-side processing, offering lightning-fast load times and enhanced security.

What is a static site generator?

A static site generator is your digital transformation tool. It takes your WordPress content and converts it into a set of static files, ready to be served to users. Think of it as a magician turning your dynamic site into a streamlined, static masterpiece.

Dynamic static websites

Sun, 27 Apr 2025 00:00:00 +0000

“A static website? No way, I don’t want that.” I get that. ‘Static’ sounds boring, unchangeable, and passive.

A static website cannot change at any moment. It can only change if the owner actively updates the website (by adding new text or new images). That might sound a lot less “unchangeable” than you initially thought. Because when else would you want a website to change?

Well… the best example I can think of is Facebook’s ever-changing timeline. But that’s not a website, that’s social media. The only valid example I can think of is a real-time comment section under a news article, but that’s very 2010… but, to be fair: technically impossible on a purely static website.

BunnyCDN is not for me

Sat, 26 Apr 2025 00:00:00 +0000

I tried BunnyCDN on behalf of some of my clients who wanted to achieve better performance on their international e-commerce projects. BunnyCDN looked good, at first…

I got fast speeds from almost any location, as reported by BunnyCDN. BunnyCDN reported loading times of milliseconds instead of seconds. This made me very happy. Additionally, my Core Web Vitals improved significantly. The price tag was also very reasonable. I received a bunch of free credits from BunnyCDN and my monthly traffic (only a few hundred visitors per month) costed me around 1 dollar.

Why did you build Hugobricks?

Mon, 21 Apr 2025 00:00:00 +0000

I get asked this question a lot. But before I can answer it, I have to paint you a picture.

Most of the web runs on WordPress, and most of those websites use a page builder. There were around 33 page builders for the WordPress platform in 2017. A few years later, Gutenberg launched, and as Todd E. Jones put it: “It changed the landscape of page builders, but not the need to use them. Page builders can (still) help you build custom pages in minutes versus hours.”

A faster website with BunnyCDN

Tue, 28 Jan 2025 00:00:00 +0000

My website was loading instantly… but mostly from within Europe, as it did not use a CDN. Recently I have switched to BunnyCDN and now the website loads instantly from almost any location.

In the image above you see the loading times. Dubai is still bad, but the rest is all below 300 milliseconds. Note that this is a self-test from BunnyCDN. This might positively influence the data, as they get to choose the test locations. Also note that this is not measuring the last mile delay, which you should add to these numbers if you want real user performance.

Your website is so slow

Thu, 16 Jan 2025 00:00:00 +0000

We probably all know a lot of ‘Yo mama’ jokes. Simple and silly, yet funny. It is time for some slow website jokes. Here are some examples.

Your website is so slow…

… even sloths do not wait for it to finish loading.
… it should have waiting music.
… even ordering take-out has a lower TTFB.
… gtmetrix.com crashes when you enter the URL.
… it has a sub-zero score in Google Pagespeed.
… Google ranks it last in its search engine.
… it messes with the space-time continuum.
… people start rebooting their modem.
… by the time it loads, your browser is outdated.
… it got overtaken by a snail on dial-up.
… it is still loading the punchline of this joke.
… it is faster to use the IPoAC protocol.
… by the time it loaded, I had forgotten what I came to see.
… I think it is mining crypto.
… DNS servers refuse to look it up.
… once it finishes loading your cookies have expired.
… even the server got bored and went to sleep.
… I can watch all episodes of Star Wars and it is still loading.
… by the time it has loaded I have a wife, 2 kids and a mortgage.

Got a better one? Let me know!

Download the whole Bible

Wed, 15 Jan 2025 00:00:00 +0000

“Some webpages use so much unnecessary code, they could as well (down)load the whole Bible.” This was a thought I had. I tried it out and attached the complete Bible text to the content of this page. And guess what? It is still fast!

Although the source code contains the complete Bible text, this page still has an 89 performance score on desktop and a 59 performance score on mobile. I added the Bible in plain text and I did not use any monkey business. Go ahead and inspect the page! You will find all of the 4 point something Megabyte in a hidden pre element below the content.

Conversion killers

Thu, 12 Dec 2024 00:00:00 +0000

I am always amazed by people’s choices… especially when they cost them a lot of money.

Why would you use an iframe as a form when that can lead to this (your most important content not loading on a 3k product)? Why would you use Wordpress when you know the average Wordpress website is 33% heavier, which leads to slow loads and poor conversion? Why would you use a slow and heavy Javascript or CSS framework? You are wasting conversion. You are wasting money.

Native apps are dead

Tue, 03 Dec 2024 00:00:00 +0000

A single line of CSS can enable slick multi-page transitions for web applications (and websites for those who maintain there’s a difference), opening up new possibilities for web app architectures, and website experiences.

@view-transition {navigation: auto;}

The upcoming of native apps

The launch of the iPhone in 2008 coincided with (and likely ignited) a resurgence of the web. Native iPhone apps arrived, with their smooth, animated state transitions between views, panels and widgets sliding in and out, and satisfying, physics-driven responses to user interactions. The web’s traditional multi-page architecture was no match; moving from one page to another was clunky, with screens going blank as new pages loaded over sluggish 3G networks.

I bought a cheap React template

Tue, 19 Nov 2024 00:00:00 +0000

I bought a cheap React portfolio template at Themeforest for only 14 dollar. The big question is: is it good? Well it looks very stylish, but what about the code? I analyzed the code and ported the template to Hugo. Here you can find the verdict (and a comparison).

Very slow

When you compare the Hugo version to the React version, you will see that React is very slow (this is backed up by a 50/100 performance score from Google Lighthouse). The difference can best be seen when you load the homepage. It loads 1.8Mb, while the similarly looking Hugo version loads just 0.5Mb. Why is there such a big difference between these two visually similar websites? I created a table to break it down:

Free maps from OpenFreeMap

Mon, 28 Oct 2024 00:00:00 +0000

Today I stumbled upon OpenFreeMap. The goal of this project: to offer free, production-ready map tiles using already available methods.

The developer uses all kinds of open-source resources to offer something that is commercially usable and resembles Google Maps. It is comparable in terms of implementation, but it does NOT provide:

search or geocoding
route calculations and navigation
static map images
raster images
satellite images
elevation data
custom map tiles or hosting datasets

But… do you want to show a map of where your company is located, or do you want to show where your branch locations are? Then it is a great solution. The implementation is very simple, but more importantly: it is completely open-source. So no more hassle with API keys.

Google Search Console traffic

Mon, 28 Oct 2024 00:00:00 +0000

When I looked at my Google Search Console today, it seemed like my traffic had dropped to zero!

I watch my traffic closely as I am trying to learn what influences visibility in Google. I recently found out that Site Vitality seems to have a big impact on your visibility. But in order to be able to see your site vitality you have to be in the CrUX report. And in order to get there you have to have a minimum amount of traffic (I assume). Anyway…

An impressive feat

Sat, 26 Oct 2024 00:00:00 +0000

I normally do not like to toot my own horn… but I have ported over 25 client websites from Jekyll to Hugo to make them faster. I ported another handful from Wordpress to Hugo. They now all have sub-second deploys and instant loading and I am very proud of that.

I have built another 50 websites in the last 3 years and connected them to my Hugo-only CMS. This means that this CMS now serves around 85 websites. Fifteen more to go to get to one hundred! Who could have thougth that four years ago, when I started using Hugo? I did not even like Hugo in the beginning!

A lost generation

Thu, 24 Oct 2024 00:00:00 +0000

There is a whole generation of developers who no longer know how to build simple websites and web applications. I am not the only one who thinks so. I read the following on reddit:

“I do client side heavy websites for a living. React, Vue etc. Even properly optimised they are all garbage and the DX of supporting them long term is insane. This whole way of building websites needs to go the way of the Dodo. And I say that as someone who makes a living doing it.”

Matt does not like static websites

Tue, 15 Oct 2024 00:00:00 +0000

Last June, before the whole WordPress drama with WPEngine, Matt Mullenweg held a speech at WordCamp Europe in Turin. He said WordPress scales well, its code is poetry and ‘dynamic sites are better’.

First of all, saying that WordPress scales well is weird. He literally said ‘it is incredible how much this can scale’, referring to hosting a WordPress website, as he talks about page views. It does not make sense because WordPress uses up to 100 times more resources than a static website and Matt knows that. Even the smallest WordPress website will make your server go down as soon as it becomes popular. However, it is a common tactic to advertise the exact opposite of what is true. Shell spends millions of dollars on greenwashing their oil business. They want you to believe they care about this planet. So does Matt: He wants you to believe WordPress scales well.

Vertical centering with CSS

Thu, 10 Oct 2024 00:00:00 +0000

I just read on the website of James Smith that align-content works in the default layout in 2024. This allows vertical centering with 1 CSS property.

<div style="align-content: center; height: 100px;">
  align-content just works!
</div>

align-content just works!

Supported since: Chrome: 123 | Firefox: 125 | Safari: 17.4

How to build a fast website?

Sat, 05 Oct 2024 00:00:00 +0000

There are only four things you have to know when you want to build a fast website. They are equally important and relatively simple.

I know this, because all my websites have a near perfect Google Lighthouse score. Forget about the endless lists of optimizations you may have seen before. These four guidelines will make your website load instantly.

1. Make your website small

When I say small I mean really small (in terms of page weight). Do not just use lightweight images, but also write as little CSS and Javascript as possible. Aim for 15kb of CSS and 3kb of Javascript. The reason for this, is that CSS and Javascript are often ‘blocking’, thus delaying the rendering of the page. The average Wordpress website is 3000kb large and serves almost 10 times that amount of CSS and 100 times that amount of Javascript. No wonder most websites are so slow!

WP Engine disabled revisions

Mon, 23 Sep 2024 00:00:00 +0000

WP Engine disabled revisions and Matt Mullenweg is furious about it, for all the wrong reasons. He wrote an article called WP Engine is not WordPress where he argues that revisions are essential to Wordpress. “WordPress is architected and designed to never lose anything”, he writes.

If only half of that was true, most people would not be in the mess they are currently in. Wordpress stores its content in the same place where it runs the scripts that operate your website. If those scripts get hacked (which happens frequently) you can have all the revisions you want, but you will (most likely) not be able to recover anything… unless you have a backup. The interesting thing about backups is that they are also usable as a revision mechanism. Surely, not the most friendly one, but if you want to undo your changes, you can just look in your backups and restore them. WP Engine has a lot of options when it comes to restoring backups. So, what is Matt really complaining about?

Micro optimizations

Sun, 22 Sep 2024 00:00:00 +0000

This website has a perfect Google Lighthouse score. To keep this website state-of-the-art, I have done a lot of micro optimizations lately.

These micro optimizations make this website probably the fastest website in the world, as this website consists of very few bytes, very few requests and very small images (typically 40kb each).

Stylesheets and Javascript files are now minified and combined
The SVG logo in the top left corner is now inlined
The favicon is now an SVG image
The double arrow below the title of blog posts is now animated
The animated underlines now support multi-line links
The images are now all WEBP or SVG
The images are further downscaled and now all have a raster layer
Code blocks now have a slightly better look
The background now has a subtle SVG noise effect
When you hover a link, the mascot in the bottom will now mimic an ‘Oooh’ expression
You can now navigate to /portfolio
Buttons now have a position-aware hover effect

The only large files I load are the gigantic banana leafs you see left and right of the screen (on desktop only). However, I load them only after you have interacted with the page and I have compressed them as much as I could. This makes sure they do not slow down your initial page load. If you think that, even with these small animations, the design of this website is spartan, take a look at this Wordpress conversion. Website designs do not get much more mainstream than that. Nevertheless, I have still managed to get a perfect Google Lighthouse score with that page, proving that mainstream design and an optimized website are not mutually exclusive.

Real User Monitoring

Thu, 12 Sep 2024 00:00:00 +0000

This website was recently added to the CrUX report, meaning you can now see this website’s real-world performance, because the CrUX report shows data from Real User Monitoring (RUM).

Real-world performance metrics for usecue.com

RUM differs from synthetic monitoring in that it relies on actual people clicking on the page to take measurements rather than automated tests going over a given set of steps, like a standard Google Lighthouse test.

Non-perfect Lighthouse scores

Wed, 11 Sep 2024 00:00:00 +0000

Should you care about a non-perfect Google Lighthouse score? In my opinion a good website should have a perfect or near-perfect score. It is a sign of good code.

As argued before, there are multiple reasons to aim for a lightning fast website. It gives you a better ranking, improved conversion and a better UX.

Surely, you can cheat to get to this perfect score, especially as long as you are not in the Chrome User Experience (CrUX) Report. But as soon as your website becomes more important, your Real User Monitoring results will count and cheating will become much harder.

Lighthouse scores dropped

Tue, 10 Sep 2024 00:00:00 +0000

Have your Lighthouse scores dropped? Did your green circles turn orange? Here are the three most likely reasons.

1. New rules from Google

On March 12, 2024 Google changed replaced First Input Delay with Interaction to Next Paint. This means that the Performance score is now based on different measurements and thus leads to different results.

2. Different code

If your website has A/B tests active, or changed the ads or scripts that are loaded (through a tag manager) you can expect a completely different score as you are testing different code.

Exif rotation on images

Thu, 22 Aug 2024 00:00:00 +0000

People often upload photo albums to their website. I always downsize and thumbnail those images with Hugo’s image processing. However, Hugo sometimes misinterprets the exif rotation on images.

This can be solved by resetting the exif rotation and rotating the images the right way up. This is a lot of work. Fortunately, when you are using Linux, you can rely on exiftran, which does exactly that. The command is pretty straight-forward. You go to the right directory and type:

SEPA Instant Payments

Tue, 21 May 2024 00:00:00 +0000

The recent EU legislation requires all banks and other payment service providers (PSPs) to offer instant payment services, ensuring that transactions are completed within 10 seconds.

These services will be available 24/7 and 365 days a year. Given the stringent timelines, banks undergoing transformation projects to meet this new regulation must act quickly.

Banks and PSPs will need to be ready to receive instant credit transfers in euros by 9 January 2025, and send instant credit transfers by 9 October 2025 to meet regulatory requirements. This new regulation is anticipated to foster innovation and streamline efficiency, particularly in consumer and business payment procedures, while enhancing the robustness of payment systems.

Pages from data in Hugo

Fri, 17 May 2024 00:00:00 +0000

The latest release from Hugo (the static site generator) brings a long-awaited Hugo feature that has had many names. This feature allows you to create pages from data.

You can read all about it in the documentation where it’s titled Content Adapters.

Also worth mentioning in this release are the new Extras Goldmark Extensions, which allows you to enable Markdown syntax for inserted text, mark text, subscript and superscript. You can now write stuff like ‘H2O and 1^st’ without using HTML tags.

Worlds fastest website

Sun, 07 Apr 2024 00:00:00 +0000

There is a website online that is called worldsfastest.com. It claims to be the fastest website in the world, but there are a lot of things wrong with it. Let me explain.

Truth be told: it is VERY fast

First of all, I have to admit that it is very fast. The initial page load consists of only one request, which is only 13.4 kilobytes large and has a data-transfer of only 8 kilobytes. This gives it the perfect Google Lighthouse score and a Google Speed Index of only 0.8 seconds on mobile. This is 4 times smaller than my homepage. It is still 3 times bigger than this legendary website, which is very offensive (be warned), yet makes a valid point. However, that one looks very minimal, while worldsfastest.com does not.

Low-carbon websites

Mon, 01 Apr 2024 00:00:00 +0000

To understand the environmental impact of a website, it is best to compare it with a paper magazine. The magazine has an editor and this editor tries to sell as many copies as possible every month. They do this through a kiosk on the street. I know… it’s a bit of an old-fashioned concept, but stay with me.

We compare this kiosk with a server and the editor with the website owner. When we talk about the environmental impact of a website, we currently only look at the weight of the web page, which can be compared to the number of pages of a paper magazine. Although that is of course ALSO very important (a magazine 10 times as thick, takes up 10 times more space in the kiosk), it is not the whole story.

The future of Jamstack

Sun, 17 Mar 2024 00:00:00 +0000

I was looking at thefutureofjamstack.org. On this website you will find a shared vision that is being written, transparently and collectively. It tells stories of the people who live and breathe ‘Jamstack’.

But why is there a website about the future of Jamstack?

When the Jamstack began, it was promoting simplicity, security, scalability, and performance. However, over time this changed. You could say that the Jamstack evolved. You could also say that it got hijacked by javascript frameworks. Whichever is true, the average Jamstack website quickly became more complex, heavier and slower than its monolithic predecessor. This eroded the term ‘Jamstack’.

Web studios in Japan

Sun, 25 Feb 2024 00:00:00 +0000

There are probably many different web studios in Japan, but there is only one Webstudio S. This studio, founded in 2017, is run by Yuma Chiaki. He or she works and lives in the Fukui region in Japan and does web design and production, UI/UX design and online marketing.

Yuma wrote an article about my website called The fastest homepage, which resulted in a lot of extra traffic from Japan and a better ranking on these terms in the search engine from Google. So… “Thank you for your article, Yuma.”

Kinsta is really cheap

Mon, 19 Feb 2024 00:00:00 +0000

No seriously… They let you save up to $290+ per month per site. They even gave a list of what those non-developer costs looked like. Here it is:


Cloudflare Enterprise	$250+
Rocket CDN	$8.99
WP Rocket	$4
BlogVault	$7.41
UpdraftPlus	$5.83
Pingdom	$10
SSL.com	$4

Those costs are insanely high, don’t you think? That is because all these prices are for unlimited websites. So ONLY when you are an agency with just one website, this calculation makes any sense. But even then you could probably choose for a lower tier on these services, paying significantly less. Note that we do have contracts of $300+ per month, but those contracts always include development hours. That is not what Kinsta is talking about.

The most perfect color

Sat, 10 Feb 2024 00:00:00 +0000

I had been searching for the most perfect color for my website for a while… when I ran into Lapis Lazuli I fell in love.

Lapis Lazuli is not actually a color, it is a stone. My youngest son pointed me at it while playing Minecraft. The stone has been used to create gems and pigments. The color is called ‘ultramarine’. It made me think about Yves Klein’s blue, worth millions. This reference can also be found in this excellent New York Times article, who called ultramarine the most perfect color.

A changed pattern

Thu, 08 Feb 2024 00:00:00 +0000

I’m a big fan of Japanese graphic design. The design of my website is (not coincidentally) a reference to this style: the website is minimalist, geometric and contains natural elements (the leaves).

My love for Japan also shows in my project Zen garden websites. In this project I create existing websites with only one HTML file and one CSS file. I follow the Japanese pursuit of ‘harmonious simplicity’. These websites do not require a web server and still follow the DRY principle.

Learn Performance by Google

Tue, 02 Jan 2024 00:00:00 +0000

Google launched its ‘Learn Performance’ course. The course is designed for those new to web performance. It covers key web performance concepts and techniques for improving performance. At least… that is what the label says.

It tells you that website performance is about retaining users, improving conversions and improving the overall user experience. The relationship between performance and business outcomes is clear. It is remarkable, and typical for Google, to not say a word about the relationship between website performance and SEO. However, Google had plans to publicly shame slow websites in the search results. Therefore it is very unlikely that Google completely ignores website speed in their ‘super secret search engine algorithm’.

Why Hugo Blox is a great idea

Fri, 22 Dec 2023 00:00:00 +0000

I came across a website called Hugo Blox and it immediately reminded me of my Hugobricks concept. Soon I realized I had seen this website before… but then with the name ‘Wowchemy’. Now let me explain why Hugo Blox is a great idea, but with sub-optimal execution.

Stackable content blocks make it easy for editors to customize their website. This is a very powerful concept and because these websites are modular, they can be a great fit for many different people. The way you store those content blocks, however, is very important.

SSG's have become boring technology

Thu, 21 Dec 2023 00:00:00 +0000

Static site generators took off in the year 2008 with Jekyll and Tom Preston-Werner. He simplified website data, by storing it in flat files. These files could then be managed by Git, meaning full ownership and control over all changes.

You probably expect me to tell you that now, 15 years later, it is time to move on… but I will do exactly the opposite: NOW is the time to adopt static site generation. Because only now, 15 years later, static site generators have become boring technology. This means that all solutions are proven, widely spread, have a minimal amount of dependencies and all (related) software is mature and well-crafted. It is so far evolved that the evengalists of the first hour have decided to move on. All problems with static site generators have been solved many times and there is a widely spread agreement on how it all should work.

The real cost of running WordPress

Wed, 13 Dec 2023 00:00:00 +0000

‘If you can think it, you can build it.’ WordPress uses great slogans to promote its free software. But free is not free at all. It is actually more expensive than most paid alternatives, especially when we compare it to Hugo.

Lower conversion

WordPress has a lower page speed than most alternative solutions. This is very clear when you compare WordPress to Hugo websites. We know that conversion rates will drop significantly on slower pages. Having 5% less conversion/orders can be very costly.

Popularity of Hugo

Sat, 18 Nov 2023 00:00:00 +0000

I use Hugo to build websites. But is Hugo popular? When you look at the top one million websites (according to BuiltWith) I would say: No.

After WordPress, Drupal is the first system that is widely known for website building and it has only 2.5% market share. Joomla has less than half of that and Hugo has only one tenth of the amount of Drupal. Hugo is not popular… this may be clear.

Hugo websites from the Netherlands

Fri, 17 Nov 2023 00:00:00 +0000

I build a lot of Hugo websites. Currently we are (re)building 8 different websites. If you look at the BuiltWith list for Hugo websites from our region in the Netherlands, you will find 2 websites that we have built: aadprins.nl and search.nl.

It is funny to see your own websites in website lists. Especially the Aad Prins project, because it is based on our recently launched open-source Hugo theme called ‘Hugobricks’. It is not surprising that some of them show up though, as we currently host around 70 Hugo websites on our own server(s). These servers handle around 5 million requests per month. Bandwidth is ‘only’ 250 GB per month, but it is mainly due to the fact that we serve lightweight and superfast websites (to ensure a perfect Google Lighthouse score for each one of them).

Speaking at HugoConf 2023

Sun, 01 Oct 2023 00:00:00 +0000

It has been an honor to speak at HugoConf 2023. My talk was about Hugobricks, a theme/concept for stackable content blocks in Hugo. If you want to see my 7 minute (pre-recorded) talk, check it out on Vimeo or Youtube.

This was my third conference talk. I have also been presenting at JekyllConf 2019 and HugoConf 2022. I was accompanied by some great speakers, like Joe Mooring (famous in the Hugo community for his excellent support). He talked about contributing to open-source. His talk was my personal favorite. I also really liked Christian Oliff, who talked about render hooks, as well as Liam Bigelow, who talked about Pagefind. If you want to be astonished by numbers and magnitude, I recommend the talk of John Phamvan, who spoke about a Hugo website with 4 million pages. Finally, for anyone who has ever migrated a website to Hugo: you must watch George Phillips with his mind blowing automatic migration concept.

Is Netlify killing Jamstack?

Fri, 14 Jul 2023 00:00:00 +0000

The Netlify CEO made an announcement to the Netlify team. He did not say it with so many words, but they fired 25% of their employees over a strategy change. They changed from being developer oriented to being enterprise oriented. My big hero Kyle Mathews also got fired, so I asked him about it…

Joost: Hey Kyle, they ‘bought’ Gatsby and fired you? Or am I missing something here?

Kyle: They bought us mostly for the Gatsby data layer which we’ve been spinning out into a standalone API (so not just within Gatsby but in any framework) — https://www.netlify.com/ — I helped a lot when we started on this last year but then a team was rolling with it which they’ve continued to at Netlify. I wasn’t really involved anymore so was happy to step away to leave more room for others.

Why choose Hugo as your SSG?

Fri, 16 Jun 2023 00:00:00 +0000

In today’s digital landscape, having a fast, efficient, and scalable website is crucial for businesses and individuals alike. With numerous options available, choosing the right static site generator can be a daunting task. In this blog post, we will explore why Hugo stands out among the crowd and why it should be your preferred choice when building static websites.

Blazing fast performance

Hugo is renowned for its exceptional speed and performance. It is built using the Go programming language, which enables it to generate websites at an astonishing pace. Whether you have a small blog or a large enterprise site, Hugo’s speed ensures that your pages load quickly, providing an excellent user experience. This advantage becomes especially significant when dealing with large websites or making frequent updates.

Resize images in Linux

Tue, 13 Jun 2023 00:00:00 +0000

So I build (a lot of) websites. During this process I often receive a folder with a LOT of (large) images. These images sometimes exceed 10MB each, which is ridiculous when it comes to web.

My websites resize all images on build, so the website visitors do not notice these gigantic file sizes. However, during build time these huge files have to be read and processed. This causes a longer (initial) build time, while I always aim for instant deploys. Additionally they increase the repository size dramatically, which is also very inconvenient and inefficient. Therefore, I always resize these images (manually) before I add them to my repository.

Has WebP landed yet? (part 3)

Thu, 25 May 2023 00:00:00 +0000

I am looking forward to the day that everybody will switch to WebP without fallback. The reason for not changing to WebP-only is Safari, both on desktop and mobile, as you can see in caniuse.

In my last post on WebP, from October ‘22, I reported a 5% usage of Safari 16 (desktop). That number has grown to 60%. That is not yet the 90% I said that was required to convince everybody to change to WebP-only. If we extrapolate the last 7 months (adoption growth of 55%), we still need to wait another 5 months before we can safely use WebP without fallback.

What is Managed Hosting?

Sun, 23 Apr 2023 00:00:00 +0000

Managed hosting usually means ‘website hosting including support’. You can see managed hosting as a website as a service, while regular hosting can be better compared to hardware as a service.

The advantage of managed hosting is that you are not responsible for the operation of your website. It seems as if parties such as MijnDomein, Hostnet and Antagonist also take all the work off your hands, but in reality that is absolutely not the case. Some parties even call their hosting ‘managed hosting’ while it is not. The question to ask is: If your website is not working, whose problem is that? And do they answer the phone? And when they answer the phone, do they solve the problem, or do they bounce the ball back?

Free Instagram widget

Sat, 08 Apr 2023 00:00:00 +0000

So you want a clean, good looking, free Instagram widget on your website? I used to have the perfect solution for it. It was called Profile Page Images (PPI) and loaded your latest Instagram posts.

It was quite a success with LOTS of traffic and 200+ users. However, Facebook kept removing the app permissions. So I decided to look at the ‘competition’. They offered similar stuff, and also for free. I used the free Instagram widget from SnapWidget to create a good looking and very clean widget. The solution can be found on CodePen:

Toxic online communities

Tue, 28 Feb 2023 00:00:00 +0000

I am quite active on Stack Overflow. However, the atmosphere on Stack Overflow can be pretty hostile. I have experienced this multiple times.

Today was another one of those days. I asked the question whether two tags should be merged. I copied a piece of an external article into my question (first two paragraphs) to show why I thought they should be merged, along with the link to the original article. I immediately got a reaction from a certain ‘Thomas’ that my post was plagiarism and that ‘I should know better’ and called it ‘spam’. He did not address the actual question, but immediately voted for a delete. Because he had 85k+ points, he easily persuaded two others to approve the deletion.

The future of Netlify CMS

Sat, 25 Feb 2023 00:00:00 +0000

As a heavy user of Jamstack CMS systems (and the author of a Hugo CMS) I am very interested in everything that is going on in this scene. Netlify CMS (an open-source project by Netlify), has been deemed ‘dead’ for a while. Issues were no longer resolved and no new versions were published… untill now.

Netlify CMS has been ‘acquired’ by PM, a marketing agency with a techhub. On their website ( PM Techhub) I found the following:

Netlify CMS becomes Decap CMS

Fri, 24 Feb 2023 00:00:00 +0000

Netlify CMS has long been a flexible content management system for users, but opportunities still exist to further customize and extend its capabilities. To ensure continued support, investments, and maintenance both the product and the community deserve, Netlify has decided to transfer ownership of Netlify CMS to one of their trusted agency partners, PM.

This move is part of Netlify’s broader strategic shift towards becoming a more versatile platform for composable architecture. By allowing other composable elements to be integrated more seamlessly, Netlify can focus on being the centerpiece platform that provides even more customization and flexibility. As part of this change, Netlify CMS will be rebranded as Decap CMS and will now be fully maintained and developed as an open source project by PM.

Instagram solution disabled

Thu, 16 Feb 2023 00:00:00 +0000

Facebook disabled my web app profile page images and sent me the following message:

When reviewing your app, we weren’t able to find any Facebook integration or verify the permission use case that you provided during App Review, but don’t panic - we just need the following information from you:

Your app’s use case for the integration, such as Facebook Login, Invite Friends, Like, Share buttons.
Detailed instructions on where we can find and verify the integration/permissions in your app.
If applicable, detailed instructions on how we can access your app.
If applicable, valid credentials for us to login to your app and test its functionality and use of any Facebook API integration. These credentials should be valid for at least 10 business days. In the event your credentials expire, we will reach out to you requesting new credentials so that we can successfully review your app.

Well… I only required the Instagram API and the web app has no password authentication and immediately asks for Instagram permission once you sign up/in. The reviewer did not actually review the app, but sent this message without checking anything. Asking for the use case (especially referring to ‘Facebook’) is hilarious, as the second sentence on the homepage reads: We offer a safe and simple way to put (the first few) images from your Instagram account on your website. Detailed instructions on where to find the integration is also a joke. It is the first thing that happens when you log in or sign up. The last two questions are not applicable and make it clear that the person from Facebook did not even take the effort to personalize this message. The 200+ users of this web app had no problem reading the homepage and understanding how it works, but the Facebook employees working at the review department apparently do. Remarkable.

ButterCMS is great, but...

Tue, 31 Jan 2023 00:00:00 +0000

I watched this video in which Colby Fayock explains how ButterCMS works. I really like the concept (and looks) of ButterCMS.

However… at 5:19 minutes and at 25:33 minutes Colby edited out the wait for the deploy on Vercel. I wrote about deployment delays before. I think it is critical to have instant deploys and so does Kyle Matthews (CTO of Gatsby). If Colby had deployed to Gatsby Cloud, instead of Vercel, the deploy should have been instant due to Reactive Site Generation. Kyle is pretty clear about it. He says: “Site owners need one second publishes. Whether they’re previewing changes, publishing a typo fix for a news article from a CMS, or there’s real-time pricing or inventory updates on their ecommerce site, it’s critical the change goes live immediately.”

Deploy to a free hosting platform

Wed, 18 Jan 2023 00:00:00 +0000

Sometimes people ask me to deploy their websites to a free hosting platform, like Cloudflare Pages, Github Pages, Netlify or Vercel. Their reasoning is often that these platforms can handle endless amounts of requests and that they are cheaper to use. But is this really true?

Not immune to the Digg effect

The Digg effect is the effect that a spike in traffic brings a website down. You would think that most of these (free) big static hosting platforms are immune to the Digg effect, because they all use a CDN. A CDN is capable of handling thousands of visitors at the same time, right? I recently found out that this is not always true. One of my heavier/larger websites recently got increasingly popular, because the company was featured on Dutch national television. Guess what happened? The website, which was hosted on Cloudflare, became terribly slow. It became so slow it eventually ceased to fully load: the Digg effect. Cloudflare must have lowered the speed at which the data was served with each new request, in order to prevent heavy load on their systems. This resulted into the site going down (effectively). So, you cannot assume that these free platforms will keep your site up and running when it suddenly becomes popular and starts to cost them some money.

A CMS with Hugo shortcode support

Fri, 11 Nov 2022 00:00:00 +0000

Recently CloudCannon introduced Hugo shortcodes. Shortcodes were already supported, but CloudCannon made them even more accessible to content editors by adding some buttons in the editor.

Buttons for shortcodes is a good idea, because it guides editors on how to write these shortcodes. However, I was less enthousiastic about the implementation CloudCannon chose. They clearly copied the shortcode implementation from Gutenberg (Wordpress), which makes it feel clunky. They also require you to configure your shortcodes in a ‘CloudCannon.config.yml’ file, which Gutenberg does not.

Google metrics

Tue, 08 Nov 2022 00:00:00 +0000

People who know me, know that I am a fan of Google Lighthouse, and especially the performance statistics. Well, fan… ‘obsessed’ may be a better word. I rely on Google when it comes to website statistics. This is why I was shocked when I got an email from Google, about the performance of one of my websites, that was clearly wrong.

It showed me the following statistics (from Google Analytics):

Long live the lean web

Sun, 30 Oct 2022 00:00:00 +0000

The following text is a Twitter thread from Thomas Fuchs. Every web developer should have read this. He posted it in November 2017 and it becomes more valuable every year. Chris Ferdinandi even wrote a whole book about it. Thomas ended the thread with the title of this post: ‘Long live the lean web’.

It’s a weird dichotomy: the more capable underlying web tech gets (CSS features, HTML canvas, etc.) the more larger and more complex frameworks on top of it become. If you actually use the underlying improvements directly you’ll notice that you need less and less JavaScript. I noticed that in our new app. We get so much more done with a lot less scripting especially because of newer CSS features like flexbox, calc, vw/vh units, compositing modes, etc. Most of the scripting has to do with progressive enhancement, rather than making basic stuff work. This has so many positive effects:

Jamstack has matured

Wed, 19 Oct 2022 00:00:00 +0000

In the beginning Jamstack was fun. The main SSG was Jekyll, which was simple and open-source. It was not only free to use, but also free to host (on Github). Jamstack websites were blazing fast and scored high in Google Lighthouse. There were plenty of free CMS options to choose from. The Jamstack looked very promising! But times have changed…

Jekyll is dead

Sure… you can still use Jekyll. But Jekyll lost its most important developer and Github decided to freeze their Jekyll version. Without Github support there is no real reason to create new Jekyll versions. Jekyll is no longer a future-proof SSG.

Has WebP landed yet? (part 2)

Tue, 18 Oct 2022 00:00:00 +0000

One day(!) after my previous article about WebP, Safari launched Safari 16 for macOS… and… you guessed it: Safari 16 fully supports WebP. This is big news, because it means that we will all be using WebP as the preferred pixel format for images very soon.

But what is ‘very soon’? We are currently a little more than one month in and Safari 16 is already used by approximately 5% of the Safari users on macOS. This will grow rapidly over time, but how fast? We can only guess. But I think that once we hit 90% everybody will switch to WebP only.

Google Fonts illegal in EU

Thu, 13 Oct 2022 00:00:00 +0000

The instructions for using Google Fonts tell you to do something that is clearly illegal in the EU.

This has been confirmed more than six months ago by the German court. In the aforementioned case the website owner had to pay 100 euro to the complainer and faced a penalty payment of up to 250k euro if failing to comply. It is remarkable that Google does not warn developers about this infringement, as it has been illegal for years (and Google should know that). This law suit did not change the law.

Artisanal web development

Fri, 30 Sep 2022 00:00:00 +0000

Yesterday David Large invited me to his Static Feedback show. It was a big honor to be featured there. The interview went by in a flash… and I want this post to summarize it and add some points that we may have missed.

What is artisanal web development?

Anything CAN be artisanal web development, but what I mean is ‘knowing every line of code that goes into your project’. This implies that you are not using frameworks or any other type of third party code.

Code is poetry

Sat, 24 Sep 2022 00:00:00 +0000

I found the words ‘code is poetry’ in the footer of the new Wordpress frontpage, that has been launched recently.

I fully agree that code is poetry! I love to read and write beautiful and concise code. In a few days I will even be joining CloudCannon on their Youtube show ‘Static Feedback’ to talk about Artisanal Web Development. This is my hand-crafted take on building sites with absolute knowledge about every line of code.

Has WebP landed yet?

Sun, 11 Sep 2022 00:00:00 +0000

Those who know me, know I care about DX just as much as UX. I will not use a feature that requires prefixes, polyfills or other wizardry. I can wait for a feature to land in your browser. The question I asked myself today (from this perspective) was: Has WebP landed yet?

Although it is supported in almost any browser, it is not fully supported in Safari on macOS. Safari supports WebP, but it is not working on macOS versions below Big Sur (macOS 11). The question is… how many people are using Big Sur? Well, since Big Sur was introduced in June 2020 you cannot expect its market share to be very big by now. We could ignore those outdated Safari lovers on Mac, but that is not my style.

Misconceptions about performance

Sat, 10 Sep 2022 00:00:00 +0000

There are a lot of misconceptions about website performance. I run into them on a daily basis. This time I found an article on the awwwards website about performance with a lot of misconceptions.

According to this article your design should be minimalistic. However, design and performance are barely related at all. I build perfectly scoring webpages on a daily basis without putting ANY restraint on the designers involved. This (strong) relation between design and performance is a misconception.

The fastest website in the world

Wed, 07 Sep 2022 00:00:00 +0000

“This is the fastest website in the world. Don’t even try, you will not be able to find anything as fast as this website!”

This is what Mfon Abel Ekene wrote on this website. He continues: “I am tired of people, clients, and developers being too much obsessed with speed. The only way to have a super-fast website is to have a website with almost nothing!”

I do not agree with that… and yes, I am obsessed with speed. “Don’t even try” sounds like a challenge to me. Where Robin J.E. Scott claims to have the fastest website in the world with a top ranking monstrosity of 1Mb, Mfon has created a much lighter page at 172kb. However, that is still 100kb larger than this website.

A cute mascot

Fri, 02 Sep 2022 00:00:00 +0000

I added a mascot to my posts. It is a small (living) bot, made of simple HTML characters. It lives in the footer of each blog post and is part of my (new) signature.

The bot will react (differently) to moving your mouse over the bot, pressing the left mouse button (outside of the bot) and moving the mouse around the screen. When the bot is looking at you it will wink every now and then. When the bot is looking away it only blinks in a semi-random interval.

Gatsby has grown up

Sat, 27 Aug 2022 00:00:00 +0000

In February I created a post where I told the Jamstack ’to grow up’. I stated that waiting more than a few seconds for a site to deploy is not acceptable, while that is still normal for most non-technical SSG users. Kyle Mathews (CTO of Gatsby) has acknowledged this recenty and solved it in Gatsby Cloud.

Kyle says: “Site owners need one second publishes. Whether they’re previewing changes, publishing a typo fix for a news article from a CMS, or there’s real-time pricing or inventory updates on their ecommerce site, it’s critical the change goes live immediately.” And he proudly adds: “This experience is what we’ve shipped.”

The best CMS for Hugo

Fri, 26 Aug 2022 00:00:00 +0000

Are you using Hugo (the static site generator)? Then there is a CMS that exceeds all your expectations. It’s a one-stop shop with everything your website needs: a CMS, hosting, form handling, statistics and more. This not only saves you time and costs, but also reduces the complexity of your setup.

zero-config, so connect and go
never wait again (<1 second deploys)
image resizing in Hugo
formbuilder in Hugo
failover with dynamic DNS
GDPR compliant form handling
GDPR compliant captcha
GDPR compliant server-side statistics

Think about what you normally spend to make your forms, your statistics and your captchas GDPR-proof… and think about what a good image resizing service costs you… not to mention the time you save with instant deploys. This CMS is cheaper than most free CMS systems, because of the time savings, the lower complexity and because with free systems you often pay for extra features and overages on ‘build minutes’ and hosting.

Sometimes it should just work

Sat, 25 Jun 2022 00:00:00 +0000

I had to work on a clients Wordpress website and it was SLOOOOOWWWWW. You could get a fresh cup of coffee between page loads… well… almost. I asked this client why she would not use a cache plugin. ‘We tried’, she said… but all dynamic stuff broke when she turned it on. Obviously she did not know how to configure it correctly. Ouch…

Sometimes you just want a website that works.

Youtube removes dislike counter

Sat, 30 Apr 2022 00:00:00 +0000

In November I wrote a negative comment under a Youtube video from the Chrome team. I did not agree with its content. I felt like we were being manipulated by the way things were presented.

I was happy to find that I was not alone. A lot of people found the video bad and clicked the ’thumbs down’ button. The dislike counter was just as high as the ‘thumbs up’ counter. When I came back to that video today, to see what the current state of affairs was I was unpleasantly suprised. Youtube had decided to remove the dislike count. I was flagged by a comment below this video that read ‘Return dislikes!’. I immediately looked at a few other videos. Their dislike counter had also been removed! It turned out that Google had removed all dislike counters from Youtube on December 13th, 2021.

Make your site picture perfect

Wed, 20 Apr 2022 00:00:00 +0000

This is the title of an article on the web.dev blog I came across. It is written by Patrick Kettner. The fact that this article is published on web.dev angers/annoys me. Let me explain why.

Speed and conversion are highly correlated. This is generally known. However, Patricks suggestion that the amount of images and conversion are correlated comes out of thin air. Yes, speed is important, but big images are not the main culprits. By using lazy loading, below the fold images do not influence your page loads at all. The amount of Javascript and CSS is much more important. Patrick knows that too, as he worked on the AMP project, which is largely based on this premise.

Oh Jamstack, grow up!!!

Sun, 06 Feb 2022 00:00:00 +0000

Jamstack is showing rapid growth these days. Much has been said about the benefits of the Jamstack (SEO, speed, security). However, having a statically generated site comes with at least one significant drawback: build time. Every update requires your static site generator to recreate all pages.

A (single) change on a 100+ page website takes somewhere between 2 and 16 minutes on your average Jamstack platform. Waiting that long before your change goes live is almost unusable! Can you ask your clients to accept that? Even a free Wix or Wordpress website updates instantly.

How to pitch a Jamstack website to your clients

Wed, 02 Feb 2022 00:00:00 +0000

CloudCannon made a list of questions a (stereotypical) client might ask about the Jamstack. I listed their questions and answers below. I wrote a comment on each question/answer.

‘Static sites’? Isn’t that the way the web used to work? It sounds like it’s not exactly, well… dynamic.

CloudCannon: The difference between a static site and a dynamic site is a little technical, but worth understanding. With a dynamic site, the server gets the content from a database and builds the page for every single visitor. Static sites, by contrast, are pre-built, so when a visitor loads a page, the server simply returns a file. This is why static websites appear near-instantly, while a typical dynamic site can take seconds to appear.

Running a highly efficient digital agency

Tue, 18 Jan 2022 00:00:00 +0000

I have built almost 300 websites on the CloudCannon platform and CloudCannon featured Usecue on their website. They wrote a nice piece about me. You can read the full text below.

Building quality solutions and transparency with clients

Technical excellence, beautiful design, integrity. All of these are important for Joost van der Schee, owner and operator of Usecue B.V., to deliver amazing web solutions to clients, who can rest assured that speed and quality are a focus and not based on false promises.

A new algorithm for social media

Sat, 08 Jan 2022 00:00:00 +0000

Halfway through my study, around the year 2002, I was part of the website committee of the student association of Industrial Design (in Delft). At the time, we were having a discussion about a new concept for the main website of our student association.

An extreme idea

The idea was to make all content on the website judgeable/rateable. We had taken this idea from a controversial and popular website, called: ‘ Rate my face’. This website allowed you to upload peoples faces and rate them from 1 (very ugly) to 10 (very beautiful). You could upload the face of your neighbour and everybody on the internet could participate. We thought it was highly immoral, but we loved it! To be clear: we were a group of people in their twenties (mostly men) and we loved harsh and rude jokes. You didn’t have to expect any subtlety from us.

The story of Delete Agency

Mon, 03 Jan 2022 00:00:00 +0000

As far as I know there is only one other business that is also good at getting a perfect Lighthouse Score: Delete Agency. At the beginning of 2018 they challenged themselves to get a 100% score on their own website, but without changing how the site looked or functioned… and they succeeded!

Optimizing everything

They optimized their website in every way possible. They created the following checklist:

use small Javascript files
tree shaking
code splitting
use ES2015 modules
preload and prefetch
DNS prefetch and preconnect
use the correct cache headers
use Brotli or GZIP
use responsive images
use proper image formats
compress images
compress SVG
compress CSS and Javascript
subset fonts
use WOFF2 fonts with WOFF fallback
defer and lazy load scripts
use lazy loading on images, video, iframes, etc
use critical CSS
use service workers for caching
use save data hints
use opacity, transform and will-change only on GPU accelerated animations
use HTTP2
use HPCACK
use IPv6
replace GIF with MP4

Their huge list of optimizations led them to their beloved 100% score. They proudly presented their results and method on the International Search Summit, BrightonSEO and SearchLeeds. I was impressed and wrote some nice words about their achievement.

Thanks to Kev Quirk

Tue, 28 Dec 2021 00:00:00 +0000

I got an email from Kev Quirk. He pointed me at my missing RSS feed, which he apparently does frequently. I added it immediately. We exchanged a few emails and I got fascinated by his blog.

Thanks to Kev Quirk, I:

now have an RSS feed on my website
am now part of the 512kb club
know that 300 euro a year is reasonable for WP hosting
got to know some great blogs and podcasts
got inspired to write a ’things I use daily’ list (see below)
am curious to learn more about Fosstadon
had fun with his Weird Wide Web Ring
got mentioned on his blogroll

Things I use daily:

The website carbon calculator

Tue, 07 Dec 2021 00:00:00 +0000

Michelle Barker featured the website carbon calculator on CSS-Tricks today. She wrote a nice piece about the application of such a tool. Her suggestion to add it to the Google Lighthouse Score is a good one.

Google claims to have a PUE of 1.1. Adding the ‘carbon score’ to Lighthouse is a great way to further green wash their data hungry business model. However, I agree with Michelle that adding a ‘carbon score’ could have a positive effect and is actually a good idea.

The website obesity crisis

Mon, 06 Dec 2021 00:00:00 +0000

Websites get bigger every year. We can verify that by looking at the state of the web by the HTTP Archive. People like Maciej Cegłowski and Jeremy Keith are pushing to fight this.

Average versus median

An interesting thing is that the measurement changed from the average page weight to the median page weight somewhere around 2017, which shifted the perception enormously. Prior to 2016 people talked about the average page size exceeding 3MB, while we are currently talking about median page weight exceeding 2MB. That is quite a difference. Nevertheless the growth is still worrysome and the numbers are increasing every year.

Netlify pricing

Sun, 05 Dec 2021 00:00:00 +0000

I wrote about Netlify pricing when Netlify introduced analytics for 9 dollars a month per website, back in 2019. I compared it to the CloudCannon pricing and called Netlify ‘irrelevant’.

A lot has changed since then. Netlify has added a ‘unlimited’ plan to their offerings at 99 dollars a month. This was a little higher than the ‘unlimited’ plan from CloudCannon at 75 dollars a month (both plan included unlimited websites and analytics). However, CloudCannon has removed its 75 dollar unlimited plan and added a 250 dollar a month ‘Business’ plan, which is limited to 20 custom domains.

Jamstack means performance, right?

Sat, 04 Dec 2021 00:00:00 +0000

“Jamstack has revolutionized the way we think about building for the web by providing a simpler developer experience, better performance, lower cost and greater scalability”, acccording to Jamstack.wtf.

Most of us already know these claims. However, the HTTP Almanac has released its yearly analysis of the state of the web, which is a great chance to verify them. But, first some disclaimers on the research. There are (only) 8,198,531 websites in the dataset. Additionally, the data on detected SSGs is based on Wappalyzer technology, which has some limitations. It can’t detect whether the site was built with certain SSGs such as Eleventy. Only Jekyll, Hugo, Gatsby, Nuxt.js and Next.js show up. Although these are expected to be the five largest SSG’s around, this is still not very acurate.

Ain't no party like a third party

Fri, 03 Dec 2021 00:00:00 +0000

At the end of 2021 CSS tricks Chris Coyier asked web builders he admires: ‘What is one thing people can do to make their website better?’ I have highlighted two answers below.

“Just take a minute to consider the implications of that: any third-party script on your site is allowing someone else to execute code on your web pages. That’s astonishingly unsafe.”

I like this one from Jeremy Keith. He argues that removing third party scripts is hard, but my feeling is quite the opposite. I am an internet entrepreneur and I can choose any solution I like. My new hosting solution offers first party statistics and first party form handling. Therefore my average website does zero third party requests, which is not only good for speed and security, but also for GDPR compliancy. A win-win situation.

Embedding Youtube correctly

Sat, 27 Nov 2021 00:00:00 +0000

Paul Irish did a nice thing. He created a lighter Youtube embed. His solution does no longer slow your website down, like normal Youtube embeds do. There is only one downside: it loads content from Youtube without consent, while Youtube (Google) is a company that is known for tracking and profiling. This is not very privacy friendly.

The solution is to host the poster yourself and link it to Youtube. When you load the Hugo Lightbox the link will automatically get a class ‘lightbox-youtube’, which then can be styled. This looks like this:

Jamstack is eating the world

Tue, 16 Nov 2021 00:00:00 +0000

Netlify ran the 2021 developers survey and received over 7,000 responses, more than twice as many as last year. The community seems to have grown, adding not only experienced developers, but also becoming the first stop for those just breaking into the industry.

Jamstack seems to be a rising technology, especially among students. You can review the methodology document for a detailed breakdown of the demographics and accuracy of the survey sample and results.

A new Jamstack era

Mon, 15 Nov 2021 00:00:00 +0000

I started building Jamstack websites in 2015. In the past 7 years I never experienced any downtime. I have built 250 websites with Jekyll on CloudCannon. The speed of the websites and the CMS was quite good, especially when you compare it to WordPress on shared hosting. I also had relatively little maintenance work on my websites and not a single one got hacked and/or got infected with malware.

“Don’t change a winning team”, is what they say. But there were also some problems. I also found out that everything could be faster: both hosting and updating the website could be ‘instantly’. Additionally, the whole solution was not very privacy friendly. But the straw that broke the camel’s back was the fact that my supplier raised its prices significantly.

Google makes me sick

Wed, 03 Nov 2021 00:00:00 +0000

I posted a critical comment under this Keynote video of the Chrome Dev Summit. I got deleted immediately by the Google team, which made me write this post. But first some context. We are talking about this video. Did you watch it? Below you will find a transcript of the parts that I commented on.

3:28 Barb: Thank you, Ben. We believe it’s important for people to be in control of their information, including their online activity. Most users believe it’s important too, with privacy concerns increasingly driving choices about what people do online. We also see regulations around the world stepping up privacy requirements rapidly. And, yet, it’s difficult for developers to meet growing expectations for privacy, when so many capabilities rely on third-party cookies and other cross-site tracking mechanisms that weren’t designed with privacy in mind.

Why you should avoid Cloudflare's CDN

Sat, 23 Oct 2021 00:00:00 +0000

Wait!? I thought the Cloudflare’s CDN was good? Is it not responsible for fast loading times, server-side caching and local nodes, providing low response times? And is Cloudflare not the hero of the internet, saving us from DDOS attacks and securing our websites? I hate to tell you this… but no, Cloudflare is not that great.

Slow

First of all Cloudflare might slow down your website. Yup… not speed up, but slow down. The delay caused by a CDN can be quite significant. This website on Cloudflare has loading times of up to 0.8 seconds, while it loads in 0.1 second without a CDN when it is hosted on a VM in Amsterdam. Even when you visit it from San Francisco, this website loads in 1.2 seconds, which is certainly not fast, but acceptable. So, without CDN my website is 8 times as fast from the Netherlands, while from the other side of the world it is not even that much slower. Amazing right?

Chrome speed tests

Wed, 15 Sep 2021 00:00:00 +0000

Back in 2010 Chrome hired a company for some fun speed tests of their new v8 Javascript engine. More than 10 years later I compared these speed tests to todays loading times of really fast websites in my quest to beat the potato gun.

Therefore it is interesting to know what they exactly did in this potato video and why. The following text is taken from the video description at Youtube. I copied it to make sure these details would not get lost.

The Stackless Way

Tue, 14 Sep 2021 00:00:00 +0000

The Stackless Way wants to give beginners a gradual path from simple HTML into more power without encountering frameworks or build tools as a barrier. It shares my conviction that there are no shortcuts and you need to master your sword.

Good old HTML

The Stackless Way uses standard HTML elements. Daniel Kehoe, who inspired me to write something about Stackless, proposes to use custom HTML elements that are enriched with javascript, but I am a purist: loading unknown code from a package manager is not plain and Stackless enough for me.

Faster websites with a CDN?

Thu, 22 Jul 2021 00:00:00 +0000

Good websites load instantly. Almost everybody who wants a faster loading website uses a CDN (Content Delivery Network). This is a network of servers, distributed around the world, where every website is available on every server.

What does a CDN do?

A CDN does two things: it caches your files/requests (make them static and keep them in memory) and it serves them from a server near your geographical location. This should normally save time.

Elon Musk has been warned

Sat, 05 Jun 2021 00:00:00 +0000

Anonymous has warned Elon Musk. Elon has been telling us that technology will save our planet, while he recently invested heavily in (and profited from) the most polluting business on earth today: the bitcoin. That has infuriated quite a lot of people.

Hypocrisy like that (and at this scale) is exactly what baffles Greta Thunberg. I just watched her speak at TED and her words hit me like a hammer. ‘There is no hope’, she said. Not unless we change our behaviour and/or our legislations RIGHT NOW.

A message for Paul Kinlan

Wed, 12 May 2021 00:00:00 +0000

Paul Kinlan sent me a video message when I joined WebDev Insights. As a Google employee working in the Chrome team, he asked: How can we make Chrome, web development and the web better? I took the time to answer his question and focussed on the ‘making the web better’ part. You can find my answer below.

Hi Paul,

Thank you for your warm welcome. You say you want to make the web better (twice).

Carousel with scroll snap

Wed, 21 Apr 2021 00:00:00 +0000

Scroll snap is a relative new feature in CSS, that recenty got pretty decent support. It was ‘good for nothing’, if you believed these folks in 2016. But three years later Nolan Lawsons carousel with scroll snap was received much better.

But it was not Nolan, but the Google Scroll Survey that inspired me. The perfect use case for scroll snapping is a standard header carousel. I found Nolans work while doing research for building one. Nolan described three components: ‘scroll snap’, ‘smooth scroll’ and ‘pinch to zoom’. We do not need pinch to zoom and today we can achieve smooth scroll with a single line of CSS. Therefore I only needed to implement this one component: scroll snapping. Nolan was still worried about IE support, but we are not. Therefore I used anchor links instead of javascript for smooth scrolling, resulting in better performance and better degredation.

Great minds think alike

Thu, 01 Apr 2021 00:00:00 +0000

A few days ago I stumbled upon an article about FCP monkey business that was remarkably similar to an article I had written just five months ago. I confronted the author with this. ‘Great minds think alike’, he replied.

A day later I found a post about the new website of Formafantasma, designed and built by Studio Blanco. They built a website that is quite similar to mine: same colors, also lightweight, also for a company in Amsterdam and they also used Times New Roman as their main font. I really like their design, especially the typography and the color scheme(s). Their design is based on the concept that lightweight websites are greener. To support that claim they also link to the solar powered website. They did not mention the absence of form and the historical reference of their design, which (I think) is a missed chance. Their technical execution could also have been better (their homepage is 10 times as heavy). However, the essence and feel of their website is similar.

Instagram interface icons

Thu, 01 Apr 2021 00:00:00 +0000

I have created a web tool that allows you to easily publish your Instagram feed on your website, called ‘PPI Loader’.

To illustrate how this tool works I created a demo. I used the original interface icons from Instagram for this demo, but to my surprise those were PNG images instead of SVG (vector). Strange enough I could not find any vector variants online, so I dedicated some of my time to create them for you.

Instagram on your website

Tue, 02 Feb 2021 00:00:00 +0000

So you want to show your latest Instagram posts on your website? No problem, you would think… At least that was what I thought, when a client asked me this. Reality turned out to be quite different.

First of all I noticed that most solutions and plugins were not or no longer working.

I assumed that that had something to do with the Instagram API upates from last year. Instagram has introduced a new way of retrieving images. You used to be able to retrieve them with a simple API key. Instagram would provide you with a JSON file that contained the URL and all other info about your images. Very useful. Unfortunately the people at Facebook decided to stop this kind of access. The new method requires you to authenticate with Facebook, upon which you get a token. This token can be exchanged for a long-lived access token, which gives you access to a JSON with temporarily available image URL’s. You are allowed to retrieve this JSON for a month, after which you have to renew your token. I assumed that a lot of developers and plugin creators thought that implementing this was too much of a hassle and they had abandoned their projects.

Monkey business with banana leaves

Sun, 04 Oct 2020 00:00:00 +0000

My website is 40kb large and is an instantly loading website. That is great, but it used to be pretty spartan looking.

To fix this, I added some images of banana leaves (on desktop only). But, even when I converted them to SVG, they were still many times larger than my full website. That was very bad for page load times and did not fit my (relatively new) reputation as a performance expert. As I recently got international attention for creating fast loading websites, I did not want to compromise on the performance. So, if I wanted to keep these images, I had to come up with a plan.

Multilingual Jekyll websites

Thu, 20 Aug 2020 00:00:00 +0000

There are many guides for making multilingual Jekyll websites. Most of them involve plugins, and I do not really like plugins, because they execute unknown code. Fortunately, I did not need them. After trying several approaches, I found a way that is as easy as it is elegant.

Whenever I needed a multilingual Jekyll website in the past, I always copied my complete project and translated it. This is relatively easy and keeps the codebase simple, but it made maintenance and adjustments a tedious job. The logical alternative, besides using a plugin, was to use themes. However, I do not like the added complexity of themes either. I like to keep things simple.

The problem with multi-purpose themes

Fri, 07 Aug 2020 00:00:00 +0000

Envato is filled with very popular multi-purpose themes. The popular ones are sold almost a million times. You can virtually build any site with these themes without writing a single line of code. They offer a variety of different pre-made layouts. They seem like value for money… but there is a catch.

High maintenance costs

Multi-purpose themes (often) have no strict separation between content and design, which means that your client can ruin your carefully created design. This leads to high maintenance costs, as you have to review and correct your clients design choices. Additionally, the systems powering these multi-purpose themes are hard to grasp for your client. There are simply too many options/buttons, which leads to a lot of (undesired) support calls.

Help, my server is down!

Wed, 04 Mar 2020 00:00:00 +0000

I do not just build websites, I host them too. Hosting can be tricky, as databases get overloaded, certificates expire, servers run out of memory, open-source software gets hacked and hard disks crash. Yes, the internet is a fragile place.

But what exactly happens when your server goes down? Is your website unavailable, and for how long? Do you lose data, or source code? I think about these questions on a daily basis, as it is my job to prevent this from happening and to limit the consequences.

No-code platforms

Thu, 19 Dec 2019 00:00:00 +0000

No-code platforms promise the content creator that he/she does not need a designer or developer. We have seen very big players try this for many many years with mixed results. I am talking about Muse (from Adobe), Wix, Webflow, Squarespace and WordPress with all kinds of page builders.

No-code platforms for content creators

The things content creators create with these no-code platforms is often not very good from a developer and art director point of view. Theoretically a focussed theme with a completely fixed design and nearly unlimited options could work well when you sell it in large numbers, but this approach is very expensive, especially when you want something unique. WordPress themes like Avada try to hit that sweet spot between freedom (uniqueness) and fixed style, but they do not perform too well. And although some visual editors, like Gutenberg, strike this balance too, they are either quite limited or they have poor performance. For now a fixed and focussed theme in combination with a visual editor is the closest a content creator can get to creating something beautiful on a no-code platform. However, even in this optimal situation the end-result will be subpar in terms of design and code.

How to get a 100% Google Lighthouse score

Thu, 14 Nov 2019 00:00:00 +0000

Google will soon shame slow websites. A good reason to take a good look at your Google Lighthouse score right now.

You might feel that it is nearly impossible to get to a perfect 100% score. You minified your Javascript, properly scaled your images and even combined some requests, but that did not help nearly enough. The problem is: you might be looking at it from the wrong angle.

I build 100% scoring websites on a daily basis, so obviously it is very well possible to get a perfect score on all your websites with little effort. I will try to explain what we want to achieve and how we can achieve that.

Building websites in rem

Wed, 13 Nov 2019 00:00:00 +0000

Although I can almost build a website in my sleep (or in 20 minutes), I am not talking about REM sleep or Rapid Eye Movement, but about ‘root em’.

I used to build websites in pixels, but I have chosen to abandon pixels and to completely swap to em, and to be more specific root em. Forty percent of all pages use root em in some way, according to the HTTP Archive Almanac, so you are probably familiar with the abbreviation ‘rem’.

Google will shame slow websites

Tue, 12 Nov 2019 00:00:00 +0000

At Chrome Dev Summit Google announced that it “is looking at ways to reward developers for going the extra mile when it comes to website performance”.

They shared some early explorations which surface speed signals in the Chrome’s UI, like a preloading screen warning you about the slow experience or a colored loading bar. Google will identify sites that typically load fast or slow for users with clear badging, according to the official Chrome blog.

Speaking at JekyllConf 2019

Sat, 19 Oct 2019 00:00:00 +0000

It has been an enormous honor to speak at JekyllConf 2019. This was my first conference talk ever. Fortunately, I could speak live from my own home-based studio, so it involved no flying around the world.

I created this home-based studio especially for this occasion. It features a set of soft lights, a Logitech C920 webcam and a dynamic Q2U Samson microphone on an arm. This setup cost me roughly 200 euro, yet it provided me with professional grade video and audio. It is not just great for streaming video, but also works great for video conferences and creating Youtube videos.

A green website

Wed, 21 Aug 2019 00:00:00 +0000

Green is not only good for your brand, but also more important than ever. ICT is already responsible for more than 4.5% of the energy use worldwide. We have to take action… but how? It seems simple: Make sure that your website uses less energy and make sure that this energy comes from sustainable resources. But how do you realize that?

Let us take a look at the energy usage. What is the energy usage of a website made of? It consists of the energy usage of the server and the energy usage of the devices of the visitors.

Google Lighthouse score

Mon, 12 Aug 2019 00:00:00 +0000

What is the ‘Google score’ in your portfolio exactly, you ask? The short answer is: it is a measurement from Google, that indicates the quality of a website.

To generate this score Google renders the website in Chrome. While doing so, Google analyzes the code and performance of your website in a series of audits. These audits are separated into four categories: Performance, Accessibility, Best Practices and SEO. Each category scores between 0 and 100, where 100 is the best and 0 is the worst score. If you want to check the score or the audits yourself, you can do so at the web.dev website.

Speed index explained

Mon, 12 Aug 2019 00:00:00 +0000

What is the ‘Speed index’ in your portfolio exactly, you ask? The short answer is: it is the time a website needs to load.

As you can see these values vary from one to several seconds. That is remarkably slow. Especially considering that I can make websites load instantly. So what is up with this speed index? Why is it so high? This value comes from the Google Lighthouse performance audit and is calculated by simulating a slow 3G connection and a 4x CPU slowdown. A website with a speed index of two seconds will load significantly faster on a desktop computer or a fast mobile connection. Google uses this speed index to rank websites. Google prefers fast loading websites, so lower is better. Websites with a low speed index rank higher. By choosing a slow 3G connection as the standard, Google emphasizes the importance of a low ‘Page weight’, as a small page is delivered significantly faster over such a narrow connection. By emulating a very slow processor the amount of calculations becomes more important, while things like network latency become less important. This complexity is often the amount of CSS and Javascript that needs to be parsed.

Websites that load instantly

Thu, 01 Aug 2019 00:00:00 +0000

In 2008 Google promised us websites that would load as quick as shooting a potato through a slicer with explosives. In other words, in one or two tenths of a second, or as I like to call it: ‘instantly’.

Video of Chrome loading instantly and beating the potato gun.

Their campaign revolved around the introduction of v8, a new Javascript engine. This turned out to be a game changer and made Chrome significantly faster than any other browser at the time. The campaign was a big hit and Chrome (eventually) became the most used browser world wide, mostly due to this competitive advantage.

How Netlify became irrelevant

Wed, 10 Jul 2019 00:00:00 +0000

Launching a new product or feature is a good thing… except when it is not, like it is the case with the new analytics product from Netlify.

First of all, the recent product launch of Netlify makes it easier to compare Netlify to its biggest competitor (when it comes to Jekyll websites): CloudCannon. Netlify and CloudCannon both offer static website hosting on a CDN with analytics (through log analysis). Both will process your forms with an optional captcha and both offer a CMS for your static website. The main difference is the pricing.

A redesign that was long overdue

Thu, 04 Jul 2019 00:00:00 +0000

After twelve years of using the same logo, it was time for a redesign. An opportunity to do it right.

When I started Usecue in 2007 I needed a logo. I already loved typography so I chose for a typographic Swiss approach. Instead of choosing for Helvetica, I chose for the Open Sans, because it was open source. I experimented with font weights and finally came to a logo that consisted of the lowercase words ‘usecue web development’, where ‘usecue’ was bold (weight: 700) and ‘web development’ thin (weight: 300). Although it was visually pleasing, there was no real philosophy behind it. Finally, after twelve years of using this logo, I found the time for a redesign.

A tribute to the web

Mon, 01 Jul 2019 00:00:00 +0000

I have redesigned my website. The last redesign was from 2016. The new design is loud and blue. It looks like Yves Kleins 17 million dollar blue, but it is actually the native color of an unstyled HTML link. The exact color in RGB (hex) is #0000ee.

UPDATE 2024: I have changed the color slightly for better readability.

Does the font look familiar too? It is Times New Roman, the default serif of the web (on Mac and Windows). I have even taken the effort to embed it, so it will also show on devices that lack this historical font. Additionally, all links are underlined, like they are supposed to in HTML.

Code warriors

Sun, 02 Dec 2018 00:00:00 +0000

A true warrior masters his sword and his mind. A ‘code warrior’ masters his software and his system. Mastering your software is not the most difficult part, just read the quick-start and off you go. Mastering and truly understanding the system that makes your software function, however, will take a lifetime.

Most developers aspire to only master their software. They agree to a solution where their software operates in an environment where it executes unknown code. It seems that the more unknown code is being executed, the more popular a solution will be. Plugins are a great way of hiding code. The most popular blogging platform has millions of plugins. Newfangled (popular) strategies like ‘containers’ and ‘serverless’ are even better at hiding code. It is clearly the direction we are heading… and I am not a fan.

Arguments for the JAMstack

Fri, 23 Nov 2018 00:00:00 +0000

I have built more than 100 JAMstack websites in the past few years and I am a big fan. However, I hear a lot of unnuanced opinions about the JAMstack from people around me. To set that straight I will try to make an honest comparison between the JAMstack and WordPress.

First of all: What are JAMstack websites? It is easier to explain what they are NOT. JAMstack websites are website that typically do NOT fetch real-time data from a database to assemble the content on the page. JAMstack websites serve pre-generated pages that can be enriched by data from API’s fetched by Javascript. WordPress websites fetch their page content real-time from their own database and are therefore NOT JAMstack websites.

Goodbye Google

Sun, 11 Nov 2018 00:00:00 +0000

Today I found out that Google Maps on my website showed a dark ‘for development purposes only’ overlay. As a website developer and host I am responsible for hundreds of websites, so, as you can understand, I panicked.

I soon found out that I was in good company. The website of the Communal Transportation Company of the capital of the Netherlands, used by half a million people a day, was broken too. You can see this here:

The need for speed on the web

Sun, 25 Feb 2018 00:00:00 +0000

This is not a post about a web-version of the popular racing game title ‘ Need for Speed’ by EA, although I love that game and I have wasted too many hours racing through dark cities and endless highways, followed by a police squadron. This article is about something else: The speed of the internet and specifically the speed at which your website loads.

Equally exciting, but far more important, as website speed is a big success factor. More than 20 years after Neilson Norman Group posted an article with a similar title and similar content. Althought the online world has changed significantly in the meantime, this subject is still relevant. Allow me to explain why.

The new Nokia 3310 could give you your life back

Mon, 06 Nov 2017 00:00:00 +0000

Let’s face it: Modern smartphones make you dumb, anti-social and they steal your time. You know it is true, no need for figures. If you disagree it is only because you are addicted.

The old Nokia 3310 accompanied by a 2017 model.

But you need your smartphone, you say. But what is it that you actually need? You want to take an occasional picture, look up something on the internet, find a location or route, look up something in your email and communicate with your friends. That is it. Well the Nokia 3310 comes really close, providing a camera, a basic internet browser, Google Maps, Gmail, Twitter and Facebook.

Running Jekyll on Cloud9

Tue, 22 Aug 2017 00:00:00 +0000

If you start with Jekyll and do not run Linux as an operating system you might have some difficulties setting things up. If everything else fails (or you want a quick solution) you can try Cloud9.

Cloud9 offers a full development environment in the cloud (running Linux). Their IDE is also quite good and their environments are also very useful for collaboration. Setting up Git is really simple, using the ‘git clone’ command from the Cloud9 command line. With Cloud9 you will be able to work from any computer with a browser, without installing anything.

Why you should upgrade your website to SSL

Wed, 19 Jul 2017 00:00:00 +0000

SSL or Secure Socket Layer is better known as the S in HTTPS. It stands for an encrypted connection between the website and the visitor. So why should you upgrade? Here are the three main reasons:

1. Security and privacy

The most important reason is that is safer for you and for your visitors to use an SSL website.

2. Higher Google ranking

Google will rank websites with SSL higher than websites without SSL. This is Google’s way of promoting a safer internet.

Smashing new technology

Thu, 23 Mar 2017 00:00:00 +0000

Today marks an important milestone. Over the last 18 months the people from Smashing Magazine have been working on a complete overhaul of there website, both technical and visual. And they are almost ready to launch.

What’s different? Well, everything.

The website won’t be running on WordPress anymore; in fact, it won’t have a back end at all. They are moving to a JAMstack: articles published directly to Netlify CDNs, with a custom shop based on an open-sourced headless E-Commerce (GoCommerce) and a job board that’s all just static HTML; content editing with Netlify’s new open-source, Git-Based CMS, real-time search powered by Algolia, full HTTP/2 support, and the whole website running as a progressive web app with a service worker in the background (thanks to the awesome Service Worker Toolbox library). Booo-yah!

Turbolinks5 is awesome

Sun, 11 Dec 2016 00:00:00 +0000

I have the strong conviction that I will not build the same interface twice. Therefore I always chose to develop for the web ONLY (and not for native). I have seen ’native applications’ as an old-fashioned concept from the start. Installing software is a thing of the past, in my opinion.

So if you know Turbolinks, you understand why I got enthousiastic. If you don’t, let me explain… If you build a native application with a webview or a PWA for Safari/iOS you are required to make it a single page application (often referred to as an SPA). Turbolinks converts a normal website into an SPA. The concept is simple: Turbolinks swaps all page loads for Ajax calls. The nice thing is that it works in any HTML document. I have written a simple demo, showcasing how it works. You can find it here: https://www.usecue.com/turbolinks5.

Getting started with Jekyll

Wed, 21 Sep 2016 00:00:00 +0000

I have written a three step Getting Started manual for Jekyll. The manual can be followed by anyone (no command line needed). Everything you need to do, can be done in a browser and a text editor.

What is Jekyll? Jekyll is the most popular static site generator available. A lot of big companies, like Google and Netflix use Jekyll for their website development. The Obama campaign (fundraising) website was built with Jekyll.

Jekyll against the rest of the world

Wed, 17 Aug 2016 00:00:00 +0000

I’m stood in the center of a room, confident my choice to go all static had been a good one. It’s a serene scene — nothing can touch me.

There are website owners running around wildly, chasing WordPress security vulnerabilities, while at the same time trying to plug holes, which the dubious free plug-ins they downloaded had ripped into their sites.

I see a man standing at the window, bashing his head against it in a slow rhythmic pace. It’s not a medical condition. He’s simply repeating the rate at which his PHP-based, database-driven publishing solution, accepts new requests.

Hover is dead

Sun, 07 Aug 2016 00:00:00 +0000

Tablet-laptop hybrids, like Windows Surface, are gaining popularity. They do not allow for hover effects (the effects triggered by the mouse cursor hovering an HTML object), as they simply have no mouse cursor, just like phones and tablets. Therefore we can no longer rely on hover.

Nevertheless, hover actions are still very important. Mice and trackpads aren’t going anywhere yet. Using the hover action for them can give important user feedback about whether something is clickable or what the outcome may be. So here is a piece of advice:

From WordPress to CloudCannon

Sun, 03 Jul 2016 00:00:00 +0000

I am a web designer and I create elegant, hand-crafted websites for my clients. I have recently made the switch from WordPress to CloudCannon.

WordPress could do everything I needed, but my main concerns with using WordPress were the lack of security (due to third party plugins), the high maintenance cost and the lack of version control. I wanted a platform my clients loved and that would reduce the risk and work for me.

Two viewports to rule them all

Thu, 21 Apr 2016 00:00:00 +0000

The amount of available screen sizes is exploding. That is why we need responsive design. But what if I told you you only needed two sizes? Impossible, I hear you think. But you may be wrong. I came up with a technique that requires just two sizes and saves you a huge amount of time.

I have been experimenting with responsive web design a lot lately. This is mainly due to my side project called ‘Without Coding’. In this project I enable graphic designers to create websites on a Photoshop-like canvas. This canvas is based on absolute positioning, making normal responsive techniques unfit. To fix this problem, I came up with the concept of ‘fixed viewports’ (as opposed to fluid responsiveness).

No Javascript Please!

Mon, 04 Jan 2016 00:00:00 +0000

You probably load 100k jQuery in your page, because it makes programming soooo easy. But what if you want your page to be as small as 100k? Or usable by people who disable Javascript for security reasons?

Let us look at what the 100k jQuery in your website actually does. I bet it toggles your hamburger menu, it might toggle some tabs… and, of course, it powers that enormous homepage slider. So… without further ado, let me present you the replacements:

Why Static Website Generators Are The Next Big Thing

Wed, 04 Nov 2015 00:00:00 +0000

At StaticGen, the open-source directory of static website generators, they have kept track of more than a hundred generators for more than a year now.

You can see both the volume and popularity of these projects take off incredibly on GitHub during that time. It is going from just 50 to more than 100 generators and a total of more than 100,000 stars for static website generator repositories. Read more

The race to zero in webhosting

Fri, 14 Aug 2015 00:00:00 +0000

If you are a small business owner and you need a website, you will probably end up renting some cheap shared webspace at a big hosting company. Prices of these services are constantly under attack. XS4ALL used to ask 25 euro a month, but prices like 5 euro are more common these days.

It is the well-known ‘race to zero’… and we are waiting for the first company that offers this service for free. I have good news for you: Zero is here! Github offers free webhosting.

Flash scaling in HTML

Sat, 30 May 2015 00:00:00 +0000

Back in the days, your website would be a rectangle, filled with one big interactive Flash canvas. The nice thing about it was that it would always fit your screen. Nowadays I sometimes get the request to build something like that again.

Flash, obviously, is a no-go, so I built a demo to show how to do that in HTML and CSS. I have NOT used ‘rems’, ‘percentages’, or ‘viewport-width’ in the CSS. Everything is defined in pixels and then ’transform(scale)’ is applied to the HTML. Check it out!

The viewport meta tag on desktop

Sat, 30 May 2015 00:00:00 +0000

On an iPad you can force your website to display as if your iPad is 1200 pixels wide. To do that you should use the viewport meta tag. Viewport meta tags do not work on a desktop browser.

Could we simulate it nonetheless? And what would that look like? The answer is ‘yes’ and ‘let me show you’. Note that I have NOT used ‘rems’, ‘percentages’, or ‘viewport-width’ in the CSS. Everything is defined in pixels and then ’transform(scale)’ is applied to the HTML. Check it out!

Developing web applications on a Chromebook

Sun, 03 May 2015 00:00:00 +0000

I have bought a Chromebook 2 from Toshiba. Very nice machine. I have set up git on Cloud9 to develop web applications without leaving my browser. So far so good, but there are some steps required in the process to make it go smoothly.

First, you set up your account (in my case with the URL from Bitbucket). Then, after you log in you start MySQL, by typing mysql-ctl start. To start php, type service apache2 start. And to edit the database, use these credentials for adminer:

About 'usecues', also known as affordances!

Thu, 09 Apr 2015 00:00:00 +0000

Affordance is a term originally coined by a psychologist, J.J. Gibson, in the 1970s. He defined it as the relationship between an environment and an actor. Today, affordance extends beyond behavioral or cognitive psychology and into the design of digital interfaces.

Understanding affordance will allow you to better understand product and interfaces design, in turn, making you a much better designer. Crowdcube states that: ‘An affordance is a situation where an object’s sensory characteristics intuitively imply its functionality and use.’

About me