Weekly Recap: Simple is Complicated
Last week was a slow week when it comes to discovering or learning about new things. Here are a few things I encountered...
Blog Page 11
Weekly Recap: Tight Coupling + Complexity = Errors
This week I thought a lot about two topics: reducing complexity and structuring your codebase and naming things. Recently I listened to an episode of 99% Invisible about what causes errors. Although this episode wasn’t specifically about programming, the basic idea very much applied to what we do in our daily jobs...
Weekly Recap: TDD is dead
Last week I did go down the rabbit hole reading about TDD best practices and misconceptions. Everything began with a Twitter discussion about David Heinemeier Hansson's (old) article: TDD is dead. Long live testing...
Vuex Data Model and Feature Module Strategy Part 2: Feature Modules
In this article, we extend the functionality of our very simple demo application from the previous article to display multiple paginated lists for the same content type. The paginated list feature module does not fetch any data itself but instead connects to the data model module. Doing so makes it possible to cache requests with the same query across feature modules to reduce the number of requests to your API and make your app feel snappy...
Vuex Data Model and Feature Module Strategy Part 1: The Data Model Module
The data model approach builds on the idea that you have a separate Vuex module for every data model of your application (e.g., users, posts, comments). Following this pattern makes it very straightforward to structure your Vuex store. But there are also some problems with a pure data model paradigm...
Thoughts about Utility-First CSS Frameworks
Many people, including me, are very skeptical about the utility-first approach of Tailwind CSS and other similar CSS frameworks like Tachyons. But I think it is essential to be open-minded about new ideas and techniques, especially if many people like it...
Reusable Functional Vue.js Components with Tailwind CSS
Tailwind is a CSS framework that I never used extensively, but I always found it interesting enough to keep it on my radar and occasionally play around with it. Today we explore how we can use Tailwind CSS with Vue.js. In this article, we identify potential pitfalls when using utility-first CSS frameworks and how to avoid them. Most importantly, we find out how to use Vue.js functional components to create abstractions for repeating patterns like cards and headlines...
Setting up Tailwind CSS v2 with Vue.js
Tailwind CSS is one of the rising stars in the CSS framework world. It's especially popular in the Laravel and Vue.js community. In this article, we learn how to set up Tailwind CSS to work with a Vue CLI powered application...
Simple Solution to Prevent Body Scrolling on iOS
In my last article about building accessible popup overlays with Vue.js we used a simple technique to prevent scrolling in the background. I think that this little trick for preventing scrolling on the `<body>` element on all devices, including iOS 12 and below (finally, this was fixed in iOS 13 🎉) is worth taking a closer look...
Scrolling Shadows with Vue.js
Sometimes we find ourselves in a situation where the content of a particular area of our website or web app is too big to fit inside of our layout. In such cases, overflow: auto can come in handy. But usually, this comes with the downside that users with browsers which do not show scrollbars by default (macOS or most mobile devices) might not be aware that it is possible to scroll...