Latest Quick Bits

A collection of my Quick Bits covering a wide range of topics

  • GitHub
  • LinkedIn
  • Twitter
  • Instagram
  • Email
  • Articles
  • Quick Bits
  • Home
  • Talks
  • Resume
Home
  • Quick Bits
Firebase
SPA
React.js
Next.js
Remix
API
PWA
TWA
Native
Prototype
Progressive enhancement
SEO
Serverless
GitHub
Front-end
Design
ES6+
  • 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

Hey explorer! You've reached the end!

Let's get in touch:

  • GitHub
  • LinkedIn
  • Twitter
  • Instagram
  • Email