Latest articles and tags

A collection of my articles and tags covering a wide range of topics

  • GitHub
  • LinkedIn
  • Twitter
  • Instagram
  • Email
  • Articles
  • Quick Bits
  • Home
  • Talks
  • Resume
Home
  • Tags
Firebase
SPA
React.js
Next.js
Remix
API
PWA
TWA
Native
Prototype
Progressive enhancement
SEO
Serverless
GitHub
Front-end
Design
ES6+
  • Article

    The File System Access API: Unlocking New Possibilities for Web Developers

    February 3, 2023
    /img/articles/file-system-access-api-hero.webp

    An incredibly powerful API exists to access the local file system of a user. Let’s have a look at how this works and why this could be interesting for your next project.

    Front-end
    PWA
    read The File System Access API: Unlocking New Possibilities for Web Developers
  • Article

    Unleash the Power of Web Workers for Blazing Fast JavaScript Execution

    December 7, 2022
    /img/articles/web-workers-threads.jpg

    Web Workers are a valuable tool for JavaScript developers, allowing for concurrent execution of code and improved performance and user experience. In this blog post, we explore the benefits of Web Workers and provide a practical use case with code examples.

    Front-end
    read Unleash the Power of Web Workers for Blazing Fast JavaScript Execution
  • Article

    I want to React.use() this!

    November 22, 2022
    /img/articles/i-want-to-react-use-this-hero.jpg

    A big part of working with React.js is fetching data and displaying the results. Let’s see how the new React.use() hook can can help you!

    Front-end
    React.js
    read I want to React.use() this!
  • Article

    You need CSS Cascade Layers

    November 15, 2022
    /img/articles/you-need-css-cascade-layers-hero.jpg

    Let’s have a look at how you can better structure your CSS layers with CSS Cascade Layers!

    Front-end
    read You need CSS Cascade Layers
  • Article

    Developers are not Trusted Types!

    October 20, 2022
    /img/articles/developers-are-not-trusted-types-hero.jpg

    Even with our best intentions as developers, we all make mistakes. XSS being one of the most common web vulnerabilities on the web proves that we need to better defend ourselves and our users against this. Let’s see how Trusted Types can help us!

    Front-end
    read Developers are not Trusted Types!
  • Article

    How do I setup CI/CD & hosting?

    September 7, 2022
    /img/articles/ci-cd-hosting-hero.png

    How to build a component library Part 4: Setting up CI/CD & hosting.

    Front-end
    read How do I setup CI/CD & hosting?
  • Article

    How do I set up linting, unit, snapshot and visual regression testing?

    August 31, 2022
    /img/articles/linting-testing-hero.png

    How to build a component library Part 3: Setting up linting, unit, snapshot and visual regression testing.

    Front-end
    read How do I set up linting, unit, snapshot and visual regression testing?
  • Article

    How do I pick a front-end framework & showcase it with Storybook?

    August 24, 2022
    /img/articles/front-end-framework-storybook-hero.png

    How to build a component library Part 2: Picking a front-end framework and setting up Storybook.

    Front-end
    read How do I pick a front-end framework & showcase it with Storybook?
  • Article

    How do I set up a Monorepo, SemVer strategy and Private package registry?

    August 17, 2022
    /img/articles/monorepo-semver-package-registry-hero.png

    How to build a component library Part 1: Setting up a Monorepo, Semver strategy and Private package registry.

    Front-end
    read How do I set up a Monorepo, SemVer strategy and Private package registry?
  • Article

    Smart cropping with native browser Face Detection

    June 29, 2022
    /img/articles/face-cropper-teaser.png

    Many online services will help you with cropping an image while keeping face(s) in view. We can however do this just using an (experimental) browser native API. Let’s build it!

    Front-end
    read Smart cropping with native browser Face Detection
  • Article

    The infinite legacy cycle in front-end

    June 8, 2022
    /img/articles/interview.jpg

    Projects often become legacy in an incredibly short time. I have spoken to people in technology with a variety of skills, experience and roles. Time to find out how they think about this, what tips they have to prevent these issues and more.

    Front-end
    read The infinite legacy cycle in front-end
  • Article

    Remix’ powerful hidden feature you might not have noticed yet

    February 15, 2022
    /img/articles/remix.jpg

    There is an awesome feature in Remix that is easily overlooked, but is incredibly powerful! Let’s have a look at the Remix handle export object.

    Remix
    Progressive enhancement
    read Remix’ powerful hidden feature you might not have noticed yet
  • Article

    Remix LoaderFunction vs ActionFunction

    January 7, 2022
    /img/articles/remix.jpg

    The LoaderFunction and ActionFunction are two core functionalities of working with data in Remix. Let’s have a look at how they work.

    Remix
    Progressive enhancement
    read Remix LoaderFunction vs ActionFunction
  • Article

    First look at Remix

    December 8, 2021
    /img/articles/remix.jpg

    There has been a lot of buzz around the open-source release of Remix. I took a first look by following the deep-dive tutorial and this is what I found.

    Remix
    Progressive enhancement
    SEO
    Serverless
    read First look at Remix
  • Article

    You should use the Intl browser API

    August 4, 2021
    /img/articles/internationalisation.jpg

    If you have worked with internationalisation in a project you know what a hassle it can be. Besides the regular content, you have to worry about the formatting of numbers, currencies and dates. In this article, we’ll go over how we can make this easier with Intl.

    ES6+
    API
    read You should use the Intl browser API
  • Article

    What's new in Next.js 11?

    June 15, 2021
    /img/articles/next-js-11-hero.jpg

    The team over at Vercel just announced Next.js 11. These are the important new updates to Next.js you need to know about.

    Next.js
    React.js
    read What's new in Next.js 11?
  • Article

    Why I write and you should too

    June 4, 2021
    /img/articles/why-i-write-hero.jpg

    Writing articles is one of the things I started doing fairly regularly over the past year. It took quite a while for me to get into it so I want to share why I write and why you should start.

    read Why I write and you should too
  • Article

    Design handoff in the browser

    February 17, 2021
    /img/articles/design-handoff-browser.jpg

    I strongly believe in the concept of leveraging design handoff in the browser. I noticed many benefits for me as a front-end developer and the designers I work with using this approach. In this blog post, you will find out why you should design in the browser, how it works and how to start

    Front-end
    Design
    read Design handoff in the browser
  • Article

    I build a neumorphic Pomodoro to stay sane

    January 19, 2021
    /img/articles/pomodoro-hero.jpg

    There is this view many developers share of having a productive coding session by crawling behind your laptop, put on your fancy noise-cancelling headphones and grinding out a few hours of work. I often fall for this novelty of hyper-productive work state in development. Since working full-time from home I noticed a serious decline in my productivity and focus. How is this possible and how can I resolve this?

    PWA
    Next.js
    React.js
    read I build a neumorphic Pomodoro to stay sane
  • Article

    A simple, yet detailed introduction to Next.js

    December 7, 2020
    /img/articles/create-next-app-hero.jpg

    Many of my articles regarding Next.js are intermediate to advanced. Even though there are many articles out there for starting with Next.js, I want to share my point of view and perhaps help you on your way to creating your first kick-ass Next.js application.

    Next.js
    React.js
    SPA
    read A simple, yet detailed introduction to Next.js
  • Article

    How can we develop and design for a PWA to deliver the best native user experience?

    October 8, 2020
    /img/articles/design-and-develop-for-pwa.jpg

    Progressive Web App (PWA) is often written about. These articles, including mine, mostly only cover the technical parts. Although vital, one aspect of building a successful PWA is design. How can we develop and design for PWA to deliver the best native user experience (UX)?

    PWA
    TWA
    Native
    read How can we develop and design for a PWA to deliver the best native user experience?
  • Article

    Wrapping your Progressive Web App for Android with Trusted Web Activity

    September 15, 2020
    /img/articles/wrapping-your-progressive-web-app-for-android-with-trusted-web-activities.jpg

    One of the first things people mention when proposing Progressive Web Apps (PWA) is the need for native store presence. Fair enough, let's make that work.

    PWA
    TWA
    Native
    read Wrapping your Progressive Web App for Android with Trusted Web Activity
  • Article

    Next.js page generation

    September 2, 2020
    /img/articles/next-page-generation.jpg

    I often write about Next.js as it is my go-to framework when developing interactive React.js web applications. One of the core features of Next.js is the ability to generate pages on the server. Let's have a look at what is possible, how this works and how can leverage this when building web applications.

    Next.js
    React.js
    SPA
    read Next.js page generation
  • Article

    How to take an idea from sketch to a fully functioning and rapidly built prototype?

    August 17, 2020
    /img/articles/firebase-dave.jpg

    I often come up with new ideas for applications and tools. I used to stop at sketching these ideas in my notebook to build whenever I have spare time. I asked myself 'How can I take my idea from sketch to a fully functioning and rapidly built prototype?'.

    Firebase
    SPA
    React.js
    read How to take an idea from sketch to a fully functioning and rapidly built prototype?
  • Article

    Next.js API routes

    August 14, 2020
    /img/articles/next-js-api-routes.jpg

    Next.js is my framework of choice for any React.js application I develop. One of the big features I haven't covered before is Next.js API routes. Although not as big of a feature as page generation, it is one of the features I'm starting to enjoy more and more. Let's have a look at this feature and how to use it.

    API
    Next.js
    React.js
    read Next.js API routes
  • Article

    You might not need a native app

    June 12, 2020
    /img/articles/pwa-vs-native.png

    "We need a native app for performance, the 'feel', offline functionalities, notifications and...". Native apps have provided fundamental functionalities that serve the purpose of creating a wonderful user experience. But, you might not need that native app and opt for the technology of the wondrous web!

    PWA
    Native
    SPA
    read You might not need a native app
  • Article

    Building a Number Code Input

    June 11, 2020
    /img/articles/number-code-input.jpg

    I often come across Number Code Inputs on various websites used for security measures, voucher codes and more. These Number Code Inputs often have a bit more functionality behind them then you might think at first. Let's create our own as an exercise.

    Prototype
    Progressive enhancement
    read Building a Number Code Input
  • Article

    How can I handle SEO in my Single-page application?

    March 31, 2020
    /img/articles/dave-seo.jpg

    One of the biggest drawbacks when building a Single-Page Application (SPA) is to provide solid Search Engine Optimisation, often shortened to SEO. How can we improve SEO with some modern tools and techniques I love the most?

    SEO
    SPA
    Next.js
    read How can I handle SEO in my Single-page application?
  • Article

    Implementing the latest web technologies to boost the Mirabeau blog

    February 3, 2020
    /img/articles/dave-behind-laptop.jpg

    The Mirabeau blog was suffering from technical debt. I decided to rebuild it using the latest web technologies to make it 2020 ready, which includes boosting the overall performance and user-friendliness.

    Next.js
    React.js
    Serverless
    read Implementing the latest web technologies to boost the Mirabeau blog
  • Article

    Writing progressively enhanced custom inputs for the web

    October 1, 2019
    /img/articles/progressive-enhancement.png

    How can we make custom inputs for the web while still offering a working solution without JavaScript?

    Progressive enhancement
    Prototype
    read Writing progressively enhanced custom inputs for the web
  • Quick Bit

    The unexpected behaviour of rem units in media queries

    December 19, 2022
    /img/quick-bits/match-media-hero.jpg

    Confused about why your rem units aren't behaving in media queries? Find out the reason behind this unexpected behaviour and learn more about using rem units in responsive design in this article.

    Front-end
    read The unexpected behaviour of rem units in media queries
  • Quick Bit

    How to use matchMedia to create a performant custom viewport hook

    September 16, 2022
    /img/quick-bits/match-media-hero.jpg

    Unfortunately, sometimes you need to write viewport-based logic in your JavaScript code. Usually, this is done with a listener on the window for a resize. Let’s look at a better way.

    Front-end
    read How to use matchMedia to create a performant custom viewport hook
  • Quick Bit

    Keeping dependencies in sync in your mono-repo

    June 1, 2022
    /img/quick-bits/mono-repo.jpg

    When building a component library as a mono-repo, you need to keep internal and external dependencies up-to-date between packages. You could do this manually once in a while, but there is a better way. Let’s have a look at Manypkg!

    Front-end
    read Keeping dependencies in sync in your mono-repo
  • Quick Bit

    Full page scroll snapping with CSS only

    November 18, 2021
    /img/quick-bits/scroll-snap.png

    Scroll snapping is a popular technique to focus on a single piece of information. How can we implement this without the need and complexity of Javascript-based solutions?

    Front-end
    read Full page scroll snapping with CSS only
  • Quick Bit

    Avoid the Async Await try-catch hell

    October 14, 2021
    /img/quick-bits/js.png

    Remember the old callback hell we used to deal with? Luckily, we can circumvent this nowadays with the use of Async Await. Unfortunately, this can introduce a new Async Await try-catch hell. Here's the solution on how to fix this.

    ES6+
    read Avoid the Async Await try-catch hell
  • Quick Bit

    Why I use data attributes over classes for declarative element states

    June 30, 2021
    /img/quick-bits/js.png

    I always use data attributes over classes to query declarative elements in my JS code for a few reasons. Here's why.

    ES6+
    read Why I use data attributes over classes for declarative element states
  • Quick Bit

    Nullish Coalescing (try to say it quickly ten times)

    April 26, 2021
    /img/quick-bits/js.png

    One of my favourite features which were added in ES2020 is nullish coalescing. Despite its difficult pronunciation, this feature is a simple way of checking for falsey values. Let's have a look.

    ES6+
    read Nullish Coalescing (try to say it quickly ten times)
  • Quick Bit

    Optionally add a key to an object in one line

    April 13, 2021
    /img/quick-bits/js.png

    I sometimes need to optionally add a key to an object based on a statement. This can easily be done with a few lines of code, but where's the fun in that? How can I do this as clean as possible?

    ES6+
    read Optionally add a key to an object in one line
  • Quick Bit

    GitHub profile README

    September 16, 2020
    /img/articles/github-profile-readme.jpg

    GitHub profiles always seemed a bit impersonal to me. Generally, you would pin some repositories and give some information like employer, location and website. To give developers more control, GitHub released the possibility for a profile README. Let's have a quick look.

    GitHub
    read GitHub profile README
  • Quick Bit

    Using template repositories with GitHub

    June 18, 2020
    /img/articles/next-boilerplate-repository.png

    Let's have a quick look at GitHub Template repositores. We'll go over the why and the how with a practical example.

    GitHub
    read Using template repositories with GitHub
  • Quick Bit

    Backdrop Filter

    March 1, 2019
    /img/articles.jpg

    The backdrop-filter property is one of the most useful new, at the time of writing, CSS properties that are landing in major browsers. It will allow you to set a custom backdrop-filter on a div. This is not to be mistaken for the CSS filter property.

    Prototype
    Progressive enhancement
    read Backdrop Filter
  • read

Hey explorer! You've reached the end!

Let's get in touch:

  • GitHub
  • LinkedIn
  • Twitter
  • Instagram
  • Email