@markus.oberlehner.net@rss-parrot.net
I'm an automated parrot! I relay a website's RSS feed to the Fediverse. Every time a new post appears in the feed, I toot about it. Follow me to get all new posts in your Mastodon timeline! Brought to you by the RSS Parrot.
---
Markus Oberlehner is a Software Engineer living in Austria. He writes articles about Vue.js / Nuxt, React / Next.js, Test-driven Development, and CSS.
Site URL: markus.oberlehner.net/
Feed URL: markus.oberlehner.net/index.xml
Posts: 259
Followers: 1
What We Do
https://markus.oberlehner.net/blog/what-we-do/
Published: November 1, 2025 09:53
Is it worth automating things? I'm a software developer. My job is to automate things. Automation, over the last couple of hundred years, has made many of us rich (compared to our ancestors). So the answer should be simple, and yet it isn't...
Escaping the Apple Ecosystem - My Journey to Digital Sovereignty
https://markus.oberlehner.net/blog/escaping-the-apple-ecosystem-my-journey-to-digital-sovereignty/
Published: October 5, 2025 09:18
There are plenty of good reasons to turn your back on the major US technology companies: from shady monopolistic business practices (e.g., app stores); to crafting ever more addictive algorithms that tie us to our screens; to enabling state mass…
Visual Regression Testing With Vitest
https://markus.oberlehner.net/blog/visual-regression-testing-with-vitest/
Published: October 1, 2025 17:32
Visual regression testing is the perfect tool to catch regressions within our UI component libraries and applications early, yet few teams practice it. Teams often avoid it due to complicated setups, cumbersome workflows, and difficulties syncing tests…
Let's Share Our Failures Not Our Successes!
https://markus.oberlehner.net/blog/lets-share-our-failures-not-our-successes/
Published: April 2, 2025 07:00
Stop sharing only the things that went well! Start sharing your failures instead! I wholeheartedly agree with David Duchovny that there is more to learn from failure than from success. So why are we so obsessed with sharing mostly useless (and often fake)…
Understanding 'Magic' in Programming Frameworks: Examples, Pros and Cons
https://markus.oberlehner.net/blog/what-is-magic-in-programming-frameworks-examples-pros-and-cons/
Published: March 23, 2025 07:00
What do we mean when we talk about "magic" in programming? I recently came up with a simple definition while watching Ricky Gervais explain the difference between believing in science and believing in religion...
Will LLMs Ever Be Creative Enough To Solve Programming?
https://markus.oberlehner.net/blog/will-llms-ever-be-creative-enough-to-solve-programming/
Published: March 23, 2025 06:00
Imagine you train a toddler to read, mixing in texts about physics and mathematics. Sure, at some point, the toddler might be able to predict the correct formula when you ask them to solve a particular mathematical problem, but they don't have the…
Nomenclature in Microservices Architecture: Modules, Components, and Services
Published: March 19, 2025 06:00
'Naming things is hard!' is a common saying in developer circles. One thing that has confused me more than once is how to differentiate between modules, components, and services in the context of microservices. But recently, I watched a talk by Ian Cooper,…
Parallelizing Specmatic Contract Tests with Playwright
https://markus.oberlehner.net/blog/parallelizing-specmatic-contract-tests-with-playwright/
Published: February 20, 2025 06:00
Specmatic quickly became my favorite tool for contract testing microservices and for using it as a stub service to test frontend applications. Together with Playwright this makes for a great combo! Yet there is a problem with this approach: Out of the box…
You Can't Fight 'Not-enoughness' with 'More'
https://markus.oberlehner.net/blog/you-cant-fight-not-enoughness-with-more/
Published: February 16, 2025 09:00
After being rejected to speak at several conferences, I wondered: Why is it so important to me? The answer: a deep sense of not-enoughness that I try to overcome by pushing harder and harder to accomplish more and more...
Using react-hook-form with React 19, useActionState, and Next.js 15 App Router
Published: January 18, 2025 09:00
I'm currently working on building a comprehensive form component with React. As usual, as I typically do, I built it all by myself without reaching for a form library. And, as usual, although I kinda got where I wanted, I was not satisfied with my code and…
Non-English Variable, Function, and Symbol Names in Code
https://markus.oberlehner.net/blog/non-english-variable-function-and-symbol-names-in-code/
Published: December 17, 2024 09:00
Recently, I switched jobs from karriere.at, Austria's largest job platform, to the Austrian Federal Computing Centre, where my colleagues and I work on modernizing Austria's digital tax services. One of the first things I noticed, looking at the new…
Running Visual Regression Tests with Storybook and Playwright for Free
Published: October 8, 2024 07:07
Storybook’s visual regression testing tool Chromatic is powerful but expensive. Luckily, with tools like Playwright, we can build a free alternative for running visual regression tests on our UI components. In this article, we’ll explore how to integrate…
Running Next.js with Docker
https://markus.oberlehner.net/blog/running-nextjs-with-docker/
Published: September 22, 2024 07:07
Nowadays, there are plenty of ways to run and deploy our Next.js application to the World Wide Web. Yet, especially in an enterprise environment or when we don't want to depend on a particular provider like Vercel, we may consider bundling our…
The Microservices and Microfrontend Mindset: Think Decoupled
https://markus.oberlehner.net/blog/the-microservices-and-microfrontend-mindset-think-decoupled/
Published: September 15, 2024 08:00
Although microservices and microfrontends have been popular choices for building modern software systems, many projects fail to reap their promised benefits. In this article, we explore why this happens and how embracing a decoupled mindset can help you…
Microservices, the Expulsion From E2E Testing Paradise, and the Path to Salvation: Contract Testing
Published: July 13, 2024 04:07
Recently, I was back on the job hunt. At one particular interview, my potential future colleagues and I got into a discussion about testing, specifically the term end-to-end testing. I was in the awkward position that I didn't have a word to describe a…
Using Testing Library jest-dom with Vitest
https://markus.oberlehner.net/blog/using-testing-library-jest-dom-with-vitest/
Published: June 4, 2024 04:15
Vite brought super fast bundling and hot reloading to our regular dev workflow, and Vitest is doing the same for our testing workflow. So I'm mostly transitioning away from Jest in favor of Vitest. But there are a lot of amazing tools in the Jest…
AI-Enhanced Development: Building Successful Applications with the Support of LLMs
Published: May 28, 2024 07:07
In this article, we'll explore the integration of AI-assisted development with established best practices. We'll discuss how to leverage techniques like TDD, writing user stories, and setting acceptance criteria in the post-ChatGPT era, addressing the…
No More Mocking! Write Better Tests for Microservices-powered Server-side Rendered Applications with Contract Tests
Published: March 23, 2024 14:07
I could never quite wrap my head around how to test SSR applications (Nuxt, Next.js, Laravel, etc.) that talk to HTTP APIs (e.g., microservices). Using the built-in mocking capabilities of tools like Playwright and Cypress is not possible in this scenario…
Nuxt: Building a Similar Products Feature with Vector Search and SQLite
Published: February 23, 2024 14:07
In this article, we’ll explore using SQLite with the VSS plugin to build a “similar products” functionality with Nuxt, Vectory Search, and SQLite...
Your Own Vector Search in 5 Minutes with SQLite, OpenAI Embeddings, and Node.js
Published: February 18, 2024 14:07
One thing that is often overlooked in the current AI chatbot hype is another use case for Large Language Models (LLMs): Vector Search with text embeddings...
Is Returning Composables from Composables an Anti-Pattern in Vue Applications?
Published: January 26, 2024 08:07
This article might not meet your expectations if you're looking for a black-and-white answer to whether returning composables from other composables in Vue is an anti-pattern. Instead, I aim to explore this concept and share my perspective...
Reactive Data Fetching and Updating in Nuxt 3: Automatically Refresh `useFetch()` When Deleting or Updating Data
https://markus.oberlehner.net/blog/reactive-data-fetching-and-updating-in-nuxt-3/
Published: January 25, 2024 08:07
Managing data across different components is a common challenge when working with modern web frameworks. Imagine a typical scenario where actions (e.g., deleting or updating data) in one component must reflect changes in another—for example, fetching a…
Test Smarter, Not Harder: Focus on Outcomes, Not Outputs
https://markus.oberlehner.net/blog/test-smarter-not-harder-focus-on-outcomes-not-outputs/
Published: December 31, 2023 09:07
When we dive into the world of testing in programming, it's easy to get caught up in the numbers game—how many tests have we written? What's our code coverage? However, if we pause and consider the bigger picture, we realize that the true measure of…
Embracing Simplicity: The Rule of Least Power
https://markus.oberlehner.net/blog/embracing-simplicity-the-rule-of-least-power/
Published: December 31, 2023 08:07
When it comes to coding, sometimes less is more. This concept is encapsulated in The Rule of Least Power, a principle suggesting that for any given task, we should reach for the least powerful language or tool that gets the job done...
Building a Chatbot with Next.js Running LLaMA 2 Locally
https://markus.oberlehner.net/blog/building-a-chatbot-with-nextjs-running-llama-2-locally/
Published: July 22, 2023 18:07
LLaMA 2, a fresh Open Source language model by meta, is a powerful tool for natural language processing tasks. In this guide, we'll build a chatbot using LLaMA 2 and Next.js, the popular React framework...
Running Nuxt 3 in a Docker Container
https://markus.oberlehner.net/blog/running-nuxt-3-in-a-docker-container/
Published: July 8, 2023 12:07
In this article, we'll dive into the world of Nuxt 3 and Docker, exploring how they can work together to streamline our development and deployment processes. We'll walk through setting up a Nuxt 3 application in a Docker environment for production and…
Leveraging Docker to Run CLI Tools in Languages Like Java, Ruby, and PHP Without Local Installation
Published: July 6, 2023 18:21
We often find ourselves needing to use various command-line interface (CLI) tools written in different programming languages. Sometimes, we don't have the required programming environment set up on our local machines or may not want to install it for…
Beware of Leaky Abstractions When Relying on Attribute Inheritance in Vue Components
Published: June 6, 2023 16:13
In this article, we will discuss the problems associated with attribute inheritance, also known as fallthrough attributes, in Vue components and why it might be best to avoid using them. Attribute inheritance can increase the API surface of components,…
The Best of Both Worlds: Progressive Enhanced Hybrid Applications
https://markus.oberlehner.net/blog/the-best-of-both-worlds-progressive-enhanced-hybrid-applications/
Published: May 22, 2023 08:00
In the ever-evolving landscape of web development, we have seen a shift from traditional Multi-Page Applications (MPAs) to modern Single Page Applications (SPAs), each with advantages and drawbacks. To deal with those drawbacks, frameworks embracing the…
Building a ChatGPT Client with Remix: Leveraging Response Streaming for a Chat-like Experience
Published: May 10, 2023 08:00
ChatGPT has recently gained significant attention due to its powerful natural language understanding and generation capabilities. While the official ChatGPT client offers a decent UX, I wanted to create a better client as a pet project. In this article,…
Using Error Boundaries in Remix to Prevent Broken Pages on Client-Side-Only Errors
Published: May 9, 2023 08:00
Error handling is essential when developing web applications to let users know why and what is going wrong and ensure a smooth user experience. In React applications, error boundaries provide an excellent way to catch errors and display fallback UIs when…
Building a ChatGPT Client with Nuxt 3: Leveraging Response Streaming for a Chat-like Experience
Published: May 7, 2023 08:00
ChatGPT has recently gained significant attention due to its powerful natural language understanding and generation capabilities. While the official ChatGPT client offers a decent UX, I wanted to create a better client as a pet project. In this article,…
Utilize TypeScript's Omit & Partial for Data Creation & Update Scenarios
Published: May 6, 2023 17:00
Dive into the world of TypeScript's powerful utilities, Omit and Partial, as we explore their potential in data creation and updates. Learn how to harness their power to streamline your code and elevate your TypeScript game...
Harnessing ChatGPT as Your Writing Assistant: A Step-by-Step Guide
Published: April 28, 2023 11:54
Are you seeking a trusty sidekick to help you tackle your writing projects? Enter ChatGPT, an AI-powered language model that can give you a helping hand! As a powerful writing assistant, ChatGPT can support you in creating engaging content for your…
The Three-Layer UI Component Architecture: Versatile Building Blocks for Crafting Multiple Design Systems
Published: March 20, 2023 10:54
Creating custom component libraries for multiple products or applications can be challenging, particularly for companies that need to maintain two or more different design systems. The Three Layer UI Component Architecture is an approach for maintaining…
How To Fix Spacing Between Text Blocks When Using Tailwind CSS
https://markus.oberlehner.net/blog/how-to-fix-spacing-between-text-blocks-when-using-tailwind-css/
Published: December 24, 2022 10:46
Did you ever encounter the problem that the space between a text block and some other element does not seem right? For example, although we've added the same `mt-4` to a text block and some images, the space between text and image looks much larger than…
Using Mock Service Worker with Vitest and fetch
https://markus.oberlehner.net/blog/using-mock-service-worker-with-vitest-and-fetch/
Published: June 25, 2022 06:15
The JavaScript ecosystem has a lot to offer when it comes to testing. With the recent addition of Vitest we get the performance and convenience features of Vite for testing too. Mock Service Worker is an excellent mocking solution for mocking network…
Refactoring a House: Software Architecture is Architecture After All
Published: May 24, 2022 07:33
Now and then, fierce debates ignite on Twitter about whether the term Software Architecture is misleading or even harmful. The argument goes as follows...
TODO Timeboxing
https://markus.oberlehner.net/blog/todo-timeboxing/
Published: January 11, 2022 16:22
Every couple of months, I reach a point where I have to declare TODO bankruptcy. The items on my TODO list are getting more and more, and I schedule more and more todos each day to get ahead. But obviously, that doesn't work—quite the opposite...
Manual testing, E2E testing, unit testing – how to decide which testing strategy to use?
Published: November 27, 2021 12:55
When we first start to dip our toes into the deep waters of automated software testing, all those different kinds of tests can feel intimidating. In this article, I give you a quick overview of the most crucial testing strategies. After reading this…
How to Clean Up Global Event Listeners, Intervals, and Third-party Libraries in Vue Components
Published: October 2, 2021 16:49
Ideally, Vue components are self-contained pieces of UI without any observable side effects to matters outside the component's scope. But unfortunately, that's not always possible...
Multiple Root Nodes and Attribute Inheritance in Vue 3
https://markus.oberlehner.net/blog/multiple-root-nodes-and-attribute-inheritance-in-vue-3/
Published: September 5, 2021 07:12
A tweet by Manuel Matuzović reminded me that in Vue 3, we finally have fragments. But I also remembered that this is not without its problems...
Vue Project Directory Structure: Keep It Flat or Group by Domain
https://markus.oberlehner.net/blog/vue-project-directory-structure-keep-it-flat-or-group-by-domain/
Published: August 25, 2021 18:09
When starting a new project or refactoring an existing one, the question often arises: how to set up the project's directory structure. My first advice is to keep the folder hierarchy as flat as possible for as long as possible. But depending on the size…
Vue Composition API: VueUse Composable Library
https://markus.oberlehner.net/blog/vue-composition-api-vueuse-composable-library/
Published: August 24, 2021 15:36
The Composition API makes it very easy to share code between components in our codebase or even across projects via npm packages. I recently stumbled upon the excellent VueUse library that provides us with a ton of valuable composables. In this article, we…
Maintaining Shared Code and the Inversion of Responsibility Principle
Published: August 21, 2021 15:53
Over the past few weeks, I've been thinking a lot about effectively maintaining shared code within an organization. For example, think of a private npm package that multiple teams depend on. How can we ensure that changes to shared code made by Team A…
Vue Composition API: Composables
https://markus.oberlehner.net/blog/vue-composition-api-composables/
Published: August 5, 2021 17:02
What makes the Vue 3 Composition API so much better than the Options API is code sharing. Inside the setup hook of a component, we can group parts of our code by logical concern. We then can extract pieces of reactive logic and share the code with other…
Don't Write Documentation!
https://markus.oberlehner.net/blog/dont-write-documentation/
Published: July 24, 2021 09:24
Whenever we find a severe bug that is caused by an error in a complicated piece of code, in my experience, the first instinct is that better documentation is needed. So that the next time we need to debug the code, at least we know what it is supposed to…
Cypress Live-Reload Tests on Code Changes
https://markus.oberlehner.net/blog/cypress-live-reload-tests-on-code-changes/
Published: July 19, 2021 18:10
Out of the box, Cypress offers an amazing live-reloading feature. But there is one caveat: live-reloading only works when changing test code, not when updating the application code. Nowadays, we are used to live-reloading in the browser thanks to webpack…
Decoupling Component Tests From Implementation Details with Preconditions
Published: July 10, 2021 08:42
When testing components (e.g., Vue or React) or regular JavaScript modules, we typically want to decouple our test code from the implementation as much as possible. Ideally, we want to write black box tests. That means that we are only allowed to interact…
Vue 3 Composition API vs. Options API
https://markus.oberlehner.net/blog/vue-3-composition-api-vs-options-api/
Published: July 3, 2021 06:29
When migrating from Vue 2 to Vue 3 or starting a new Vue 3 project, many people wonder if they should continue using the Options API or go all-in on the Composition API. I advise using the Composition API (for new components) exclusively ASAP and never…
CSS: The Spacing Between Elements Should Be Determined by the Parent Element
Published: June 21, 2021 11:00
Years of writing and maintaining CSS code and remarks by Mark Dalgleish and Adam Wathan, along the same line, lead me to conclude that the spacing between HTML elements should be determined by their parent element in almost all cases.
Vue 3 Composition API: ref() vs. reactive()
https://markus.oberlehner.net/blog/vue-3-composition-api-ref-vs-reactive/
Published: April 20, 2021 19:26
One of the first questions that arise when starting with the new Vue Composition API is ref() or reactive()? The initial instinct is to use ref() for primitives (Boolean, String,...) and reactive() for objects. But there is more to it...
Premium Vue and Nuxt Templates for Web Apps and Sites
https://markus.oberlehner.net/blog/premium-vue-and-nuxt-templates-for-web-apps-and-sites/
Published: March 7, 2021 11:13
Suppose you're searching for high-quality Vue.js templates, I recommend you to take a look at the work of Creative Tim. In this article, I'll show you a list of handpicked premium templates to build Web Applications or Websites with Vue.js and Nuxt.js...
Tailwind CSS: The Antifragile CSS Framework
https://markus.oberlehner.net/blog/tailwind-css-the-antifragile-css-framework/
Published: January 24, 2021 07:33
Tailwind CSS is a divisive issue in the web development world: some love it, others love to hate it. This article is about one specific feature of Tailwind CSS: its antifragility...
Your Components Do Too Much
https://markus.oberlehner.net/blog/your-components-do-too-much/
Published: January 17, 2021 06:56
Whenever you feel the need to access global state or globally injected plugin methods or global anything for that matter, often it is a sign that the component you're working on is doing too much...
Events and Callbacks: Parent/Child Component Communication in Vue
https://markus.oberlehner.net/blog/events-and-callbacks-parent-child-component-communication-in-vue/
Published: January 10, 2021 08:25
Props Down / Events Up is the standard paradigm for communication between parent and child components in Vue.js. React, on the other hand, uses callback functions instead of events. But why is using callbacks considered an anti-pattern in the Vue.js world?…
What Makes a Senior Developer? It Depends!
https://markus.oberlehner.net/blog/what-makes-a-senior-developer-it-depends/
Published: January 3, 2021 07:04
The most common answer when you ask a professional about how to solve a specific problem is: it depends. I find myself regularly in this situation when I talk to craftspeople about home renovation projects. I can understand how frustrating this can be...
Building Vue.js Applications Without webpack
https://markus.oberlehner.net/blog/goodbye-webpack-building-vue-applications-without-webpack/
Published: December 27, 2020 09:18
In the good old times, creating a JavaScript-enhanced website was straightforward: create a .html file, add a
JavaScript Runtime Bundling Concept
https://markus.oberlehner.net/blog/javascript-runtime-bundling-concept/
Published: December 20, 2020 06:44
Imagine a world where you don't need to install a single dependency, but you're still able to use all modern JavaScript features. Where you don't need to run a build script every time you change a file. And you can do all of that knowing that your app will…
What Developers Can Learn from Playing Chess and Video Games
https://markus.oberlehner.net/blog/what-developers-can-learn-from-playing-chess-and-video-games/
Published: December 13, 2020 10:03
I watched some chess recently. Amateurs played against each other, and a grandmaster commented it. It was fascinating to see that the weaker players all made the same mistake: when the opponent attacked one of their figures, they solely focused on this one…
Utilize the File Structure to Decide When to Use Vue.js Slots
https://markus.oberlehner.net/blog/utilize-the-file-structure-to-decide-when-to-use-vuejs-slots/
Published: December 6, 2020 09:11
I recently discovered that we can let the file structure of our projects guide us to find out which components we should inject into other components via slots and which components we can import directly...
Progressive Enhancement and the Modern Web
https://markus.oberlehner.net/blog/progressive-enhancement-and-the-modern-web/
Published: November 29, 2020 07:34
A few years ago, before frameworks like React and Vue.js became popular and WordPress and jQuery dominated the web (which, strictly speaking, still is the case today), there seemed to be an agreement on the overall importance of Progressive Enhancement. My…
Group, Extract, Share: Working with the Vue Composition API
https://markus.oberlehner.net/blog/group-extract-share-working-with-the-vue-composition-api/
Published: November 22, 2020 08:29
One problem with the Vue Options API is that it is hard to share stateful logic that relies on reactive variables. The Composition API offers us an excellent solution to this problem. In this article, we look at a possible workflow for efficiently building…
watch vs. watchEffect when to use what with Vue.js
https://markus.oberlehner.net/blog/watch-vs-watcheffect-when-to-use-what-with-vue/
Published: November 15, 2020 09:20
When I first studied the new Composition API, I was confused that there are two watch hooks: `watch()` and `watchEffect()`. From the documentation alone, it was not immediately apparent to me what's the difference...
Partial Hydration Concepts: Lazy and Active
https://markus.oberlehner.net/blog/partial-hydration-concepts-lazy-and-active/
Published: November 8, 2020 06:58
I am currently working on porting vue-lazy-hydration to Vue 3. With that comes the potential to make some significant improvements since Vue 3 has an API that allows controlling the hydration of VNodes. Working with the new APIs got me thinking about the…
Automatic Dependency Injection in Vue with Context Providers
https://markus.oberlehner.net/blog/automatic-dependency-injection-in-vue-with-context-providers/
Published: November 1, 2020 06:15
I'm kind of obsessed with Dependency Injection. But for a good reason. I believe that an essential factor when it comes to building maintainable, large-scale applications is to get Dependency Injection right...
Vue.js Feature Toggle Context Provider
https://markus.oberlehner.net/blog/vuejs-feature-toggle-context-provider/
Published: October 25, 2020 04:47
Some time ago, I read a very informative article by Pete Hodgson about feature toggles. I'm thinking a lot about the Context Provider Pattern and the types of problems it can help solve, and it appeared to me as if feature toggles are one of the use cases…
useState and useReducer with the Vue 3 Composition API
https://markus.oberlehner.net/blog/usestate-and-usereducer-with-the-vue-3-composition-api/
Published: October 18, 2020 05:15
In the React world, React Hooks are basically what in the Vue world is the Composition API. Although React Hooks and the Vue Composition API try to solve similar problems (mainly, reusability of stateful logic), how those two frameworks deal with…
Application State Management with Vue 3
https://markus.oberlehner.net/blog/application-state-management-with-vue-3/
Published: October 11, 2020 05:59
With the new Composition API and Vue 3, there is a lot of talk about whether or not we still need Vuex or if it is possible to replace Vuex completely by making reactive objects globally available. In this article, I argue that thanks to the Composition…
Wrap Third-Party Libraries
https://markus.oberlehner.net/blog/wrap-third-party-libraries/
Published: October 4, 2020 08:36
Certain coding practices seem superfluous when you first encounter them, but sooner rather than later you get into a situation where you wish you had stuck with them. Wrapping third-party libraries instead of using them directly in your codebase is one of…
Vue.js Style Provider Pattern
https://markus.oberlehner.net/blog/vuejs-style-provider-pattern/
Published: September 27, 2020 07:13
I recently played around with the idea of using renderless provider components not only for data but for styles too. This pattern seems especially promising when it comes to building base components with style modifier props...
Avoid Opaque Dependency Injection Techniques with Vue.js
https://markus.oberlehner.net/blog/avoid-opaque-dependency-injection-techniques-with-vuejs/
Published: September 20, 2020 06:27
We use Dependency Injection to achieve loose coupling. But loose coupling and Dependency Injection can make it harder to understand how our code works. It can make it more challenging to determine where a particular dependency is coming from...
We Have Solved CSS! With BEM, Scoped Components, and Utility First Frameworks
Published: September 12, 2020 08:42
Again and yet again, we hear and read about the problems of CSS. And there are some pitfalls you can fall into, mostly because of the global nature of CSS. But I argue that we solved those problems now multiple times...
When and When Not to Use Utility Classes With BEM
https://markus.oberlehner.net/blog/when-and-when-not-to-use-utility-classes-with-bem/
Published: September 6, 2020 05:58
After trying to go all-in with utility classes a few times, I decided that, for me, this is not the right approach. But one thing irks me and makes me think twice if I'm not perhaps just being stubborn...
Antifragile Web Development
https://markus.oberlehner.net/blog/antifragile-web-development/
Published: August 30, 2020 08:47
Recently I've finished reading the book Antifragile by Nassim Nicholas Taleb. I was fascinated by the concept of antifragility. He uses the term to describe systems that benefit from volatility and disorder. In this article, I would like to reflect on a…
Automatically Generate Responsive Image Attributes Based on the Context of a Vue Component
Published: August 23, 2020 06:28
Recently I saw an interesting Tweet by Mark Dalgleish, about the idea of contextual defaults for React components. I was especially interested in this because I had to solve a similar problem only a few days before...
Cross-Browser Acceptance Tests with LambdaTest and TestCafe
https://markus.oberlehner.net/blog/cross-browser-acceptance-tests-with-lambdatest-and-testcafe/
Published: August 16, 2020 05:07
In this article, we will take a closer look at how we can run automated cross-browser acceptance tests in real browsers on LambdaTest using TestCafe as our test framework...
Context-Aware Props in Vue.js Components
https://markus.oberlehner.net/blog/context-aware-props-in-vuejs-components/
Published: August 9, 2020 06:18
Recently I saw an interesting Tweet by Mark Dalgleish, about the idea of contextual defaults for React components. I was especially interested in this because I had to solve a similar problem only a few days before...
Tight Coupling vs. Loose Coupling in Vue.js
https://markus.oberlehner.net/blog/tight-coupling-vs-loose-coupling-in-vuejs/
Published: August 2, 2020 06:20
When talking about loose coupling and tight coupling, often, the impression arises that tight coupling is something we always have to avoid. But this is almost impossible. What's essential is that we use loose coupling when bridging the gap between layers…
Retry Failed API Requests with JavaScript
https://markus.oberlehner.net/blog/retry-failed-api-requests-with-javascript/
Published: July 26, 2020 05:36
One of the most fragile parts of modern web applications is the network connection. Any API request that we make in our code has a significant risk of failing. We can use several techniques to make our applications more resilient in the event of a network…
How to Avoid Bugs from Unanticipated Behavior?
https://markus.oberlehner.net/blog/how-to-avoid-bugs-from-unanticipated-behavior/
Published: July 19, 2020 06:21
Recently I was responsible for introducing a major bug into the code base of the product I'm working on. There were no tests for the code, so my first instinct was that this could have been prevented with better test coverage...
Business Logic in Fat Client Applications
https://markus.oberlehner.net/blog/business-logic-in-fat-client-applications/
Published: July 12, 2020 08:41
In typical server-side rendered web applications, the separation of the business logic from the view layer was usually straightforward. But the boundaries are becoming blurry as we create fat client applications where much of the business logic tend to…
Make it Simple
https://markus.oberlehner.net/blog/make-it-simple/
Published: July 5, 2020 11:17
Last weekend I had the pleasure to dine at Das Maier. I don't need to mention that the menu, cooked by the four-star chef, (by the way the first woman to be awarded four stars) was excellent. But besides the culinary delights, it was fascinating what her…
Fighting Procrastination
https://markus.oberlehner.net/blog/fighting-procrastination/
Published: June 28, 2020 07:38
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...
Break out of CSS Grid: Align Image or Background at the Edge of the Screen
Published: June 21, 2020 05:16
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
https://markus.oberlehner.net/blog/variable-naming-arrays-and-booleans/
Published: June 14, 2020 04:35
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
https://markus.oberlehner.net/blog/refs-and-the-vue-3-composition-api/
Published: June 7, 2020 07:33
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…
Are my Component Names Too Long? Vue.js Component Naming Best Practices
Published: May 31, 2020 05:27
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…
React Context and Provider Pattern with the Vue 3 Composition API
https://markus.oberlehner.net/blog/context-and-provider-pattern-with-the-vue-3-composition-api/
Published: May 24, 2020 07:05
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
Published: May 17, 2020 06:38
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
Published: May 10, 2020 08:28
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
Published: May 3, 2020 06:51
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
Published: April 26, 2020 06:16
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…
Simple Solution for Anchor Links Behind Sticky Headers
https://markus.oberlehner.net/blog/simple-solution-for-anchor-links-behind-sticky-headers/
Published: April 19, 2020 05:31
In my experience, customers love sticky headers. And indeed, they prove to be very useful in certain situations. But there are also terrible implementations of this pattern out there. And I cannot blame the developers who created them. Getting sticky…
Lint Only Files with Changes on pre-commit
https://markus.oberlehner.net/blog/lint-only-files-with-changes-on-pre-commit/
Published: April 12, 2020 09:27
A few days ago, I remembered that at my former workplace, karriere.at, we had a pre-commit hook bash script that executed ESLint and Stylelint, not on the entire repo, but only on files that were changed. Because that was pretty handy, I was looking into…
Telling a Story with Test Code
https://markus.oberlehner.net/blog/telling-a-story-with-test-code/
Published: April 5, 2020 08:04
A few weeks ago, I wrote about naming unit tests BDD style using Given/When/Then. In this article, I have expressed the thought that I do not like to repeat information in the description and in the expect statement. After writing some tests the way I've…
Cut Your Nuxt.js generate Build Time in Half with context.payload
https://markus.oberlehner.net/blog/cut-your-nuxt-generate-build-time-in-half-with-context-payload/
Published: March 29, 2020 05:37
One of my freelancing projects is a Nuxt.js project powered by the headless CMS Storyblok. Because performance is critical, I decided to use Nuxt.js in generate mode outputs static HTML files for each page at build time. But because Nuxt.js needs to…
Building Partially Hydrated, Progressively Enhanced Static Websites with Isomorphic Preact and Eleventy
Published: March 22, 2020 05:33
One of my top priorities is to create the fastest possible websites (think marketing sites, not web applications), but I also don't want to do without modern tools and a component-based workflow. While there are developments in the right direction, I don't…
Setting up Eleventy with Preact and htm
https://markus.oberlehner.net/blog/setting-up-eleventy-with-preact-and-htm/
Published: March 15, 2020 06:09
One of my top priorities is to create the fastest possible websites (think marketing sites, not web applications), but I also don't want to do without modern tools and a component-based workflow. While there are developments in the right direction, I don't…
Naming Things: Staying in Line with the System
https://markus.oberlehner.net/blog/naming-things-staying-in-line-with-the-system/
Published: March 8, 2020 05:20
When multiple people are working together on a project, it is important to define some rules to make sure that everything stays tidy and chaos does not arise. How to name things is one of the areas in which there are always differences in opinion...
~ 159 additional posts are not shown ~