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.
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'.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.