Skip to main content

Read my latest thoughts in these blogs

DX

Better Developer Experience with function arguments as an object

Write more readable code and help your colleagues and yourself

Passing an object as an argument is easier to read when you use the function in other places. The function also gets the added benefit of more flexibility when editing as the order of the arguments doesn't matter anymore. In this small guide I'll show you why and how.

Read more
accessibility

Improving accessibility with a skip-link

Allow jumping straight to the main content skipping the long navigation

Accessibility is hard. You have to find the right balance between helping and not obstructing the browser defaults. When surfing a well structured page with a screenreader or the tab key you mostly start at the navigation. But what if the navigation is really long with a lot of links. That's a lot of tabbing. We can solve this with a simple 'skip-link'.

Read more
ui
browser-api

Watching for viewport changes with the Intersection Observer API

Trigger events when they scroll into your viewport

Want to create animations on scroll? Or you need to update your Table of Contents when the reader is scrolling your article? You want to use the browser's Intersection Observer API.

Read more
ui

Easy animations in your HTML

How to compose customizable animations in HTML with AnimXYZ

It's easier than ever to declare special functionality in your markup. Frameworks like Vue and Alpinejs compose JavaScript in the markup. Tailwind CSS allows you to style inside your markup. And now there's Animxyz to animate your markup.

Read more
vue
nuxt
seo

Social share cards for Vue and Nuxt

How to improve your content's word-of-mouth by providing good looking social cards

Yes! People are able to find our content. They're so impressed they're sharing it. Writing their tweet and 'Eeehw...', the tweet looks awful. They were hoping they'd get a nice title, description and image when they copied your url. In this post we're going to fix this by adding social card information to a `createMeta` function.

Read more
vue
nuxt
seo

Better SEO in Vue or Nuxt - part 2

How to add structured data to your site to get rich search results

Ever searched for a recipe and a lot of images popped up with user reviews? This are rich results. this is Google's way of trying to provide a better user experience. And it's working. The rich results get a larger click through rate. To support rich results you can provide structured data to Google. In this second part of our SEO blog we're going to add this structured data to our `createMeta` function from part 1.

Read more
vue
nuxt
seo

Better SEO in Vue or Nuxt - part 1

How to create a title- and description tag and appoint a canonical url

When sharing your content you want it to be found on Google. This can be done by Search Engine Optimization (SEO). In this blog I'm going to share 3 SEO basic must haves to improve your chances on a top page search result in Vue or Nuxt.

Read more
html
accessibility
seo

Better HTML with semantic elements

How to make your code more readable, your site more accessible and your SEO score better with semantic HTML

Every web developer can write HTML. But what does it mean to write good HTML. It's more than knowing how to use a `div` or `span`. In this blog I'm going to discus the use of semantic HTML to improve the readability for you as a developer, improve the accessibility for people with assisted technologies and how you will better rank you in Google.

Read more
graphql
typescript

GraphQL + TypeScript, a love story

How I use GraphQL, TypeScript, a VSCode extension and GraphQL Code Generator to create a robust api with little room for mistakes

I love working with GraphQL. Especially because it is typed. This makes it the perfect match for TypeScript. With GraphQL exactly returning what you query, add a VS Code extension for checking the schema and a code generator to return typed results and we'll build a type safe api that will prevent us from messing up.

Read more
ui
tailwindcss

5 quick Tailwind CSS tips and a bunch of resources

Save yourself hours of refactoring with these tips and resources

If you're a Tailwind CSS user, you know it's hard to shut up about it. At least for me. I'm always happy to share my experience with it, so here are 5 quick tips and resources.

Read more
performance
nuxt

How I decrease render-blocking resources with local fonts in Nuxt

I show you why and how to self-host your fonts

Ever wondered how to fix the 'Eliminate render-blocking resources' warning in Lighthouse for the fonts you're loading? In this blog I'll describe why you're getting this warning and how we can solve this with local fonts. With the extra benefit of your text not jumping around anymore.

Read more
ui
ux
vue
nuxt

Enjoyable micro-interactions with animated icons

How I use Lottie in Vue.js to render animated icons

Animated icons are a great way to make micro-interactions on your application just a little more enjoyable and understandable. I use them in my applications a lot. Not long ago they've always seem kind of difficult to get but I'm going to show you that it shouldn't be hard.

Read more