Fighting Procrastination
In the last couple of weeks, I'm not as motivated anymore to do all the things I have to, and I want to do. This led me to fall back into the habit of excessive procrastination...
Blog Page 9
Break out of CSS Grid: Align Image or Background at the Edge of the Screen
In the following screenshot, you can see a popular pattern for landing pages: repeating sections of an image on the one side and text on the other side where the image reaches the edge of the screen...
Variable Naming: Arrays and Booleans
To become a capable programmer, it is crucial to have systems that free you of the mental burden of thinking about all the little things while programming so you can focus on the big picture...
$refs and the Vue 3 Composition API
If you’re used to working with Vue 2 $refs and switch to the Vue 3 Composition API, you might wonder how to use $refs inside the new setup() method. In this article, we find out how to use the new ref() function as a replacement for static and dynamic HTML element references...
Are my Component Names Too Long? Vue.js Component Naming Best Practices
When naming your (Vue.js) components, you might sometimes be worried that the names are getting very long. In this article, we take a closer look at how long is too long and what are the most important best practices when it comes to naming your components...
React Context and Provider Pattern with the Vue 3 Composition API
The React Context API provides a way to share properties that are required by many components (e.g., user settings, UI theme) without having to pass a prop through every level of the tree (aka prop drilling)...
Automatically Generate your Vue Router Configuration with vue-auto-routing
When designing very large JavaScript applications, you have to be very careful about how you structure your dependencies. One particular example of this is the `router.js` configuration file...
Stale-While-Revalidate Data Fetching Composable with Vue 3 Composition API
When building apps that rely on data from an API, two things are essential: we want our data to be fresh, and we want it fast. The Stale-While-Revalidate cache pattern helps us to strike a balance between both...
Using Netlify Redirects to Proxy Images Hosted on a Third Party Image Provider or a Headless CMS
If you are using a third-party image hosting service like Cloudinary or if you are hosting your images via a headless CMS like Storyblok, you may have been annoyed that the images are not delivered from your domain...
Super Simple Progressively Enhanced Carousel with CSS Scroll Snap
In this article, we explore how to create a simple carousel with only HTML and CSS. Recently, when I was reminded of the existence of the CSS property scroll-snap, I thought it should be easy to create a simple carousel component with it. After outlining a quick proof of concept in a simple HTML file, my assumption was confirmed...