Are we overusing variables in design systems? In this article I try to articulate my thoughts about using variables in design systems in kind of a dogmatic way.| markus.oberlehner.net
Learn how to implement Route Model Binding and how to use models in Vue.js in combination with vue-router and Vuex.| markus.oberlehner.net
Best practices for using Vuex modules to structure a Vuex store. Learn how to enable lazy loading of Vuex store modules and how to fetch data via an API.| markus.oberlehner.net
Learn how to handle multi-row form data the Vuex way with the vuex-map-fields package.| markus.oberlehner.net
Learn how to use Vuex in combination with v-model to store form data in the Vuex store and how to handle input fields with Vuex.| markus.oberlehner.net
Learn how to decouple Vue.js components from the Vuex store by using a provider abstraction.| markus.oberlehner.net
Learn how to combine GraphQL and Vuex for managing state in Vue applications and how to set up a simple GraphQL powered API server.| markus.oberlehner.net
Learn how to build a modal dialog component in Vue.js powered by Vuex using the TDD methodology.| markus.oberlehner.net
Learn how to design a flat Vuex store architecture to avoid deeply nested state trees.| markus.oberlehner.net
My personal recap of the last week with thoughts about the Single Parameter Object pattern and craftsmanship vs. engineering.| markus.oberlehner.net
Learn more about my opinions about utility-first CSS frameworks like Tailwind CSS.| markus.oberlehner.net
Set up Tailwind CSS v2 with Vue.js and configure PurgeCSS to work with a Vue CLI powered app.| markus.oberlehner.net
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) success stories...| Markus Oberlehner
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...| Markus Oberlehner
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 slightest idea why this is the correct answer...| Markus Oberlehner
'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, where he clarifies what is what and how these three terms relate to each other...| Markus Oberlehner
Learn how to decide which data should be stored in a centralized Vuex store and alternative solutions to share data across Vue.js components.| markus.oberlehner.net
Learn how to quickly create new generic Vuex modules for typical CRUD applications with factory functions.| markus.oberlehner.net
Learn how to build dynamic CRUD applications with Vue.js with the primary goal of keeping the codebase DRY.| markus.oberlehner.net
Learn how to structure your Vuex store using a combination of data model and feature modules.| markus.oberlehner.net
Learn how to work with utility-first CSS frameworks like Tailwind in Vue.js and how to avoid potential pitfalls.| markus.oberlehner.net
The endless pursuit of professional achievements feels like drinking salt water when thirsty. A personal reflection on seeking a different path beyond not-enoughness.| markus.oberlehner.net
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 we can't run tests in parallel with this setup because Specmatic's stub server, by default, isn't designed for parallel execution...| Markus Oberlehner
Learn how to use react-hook-form with React 19, useActionState, and Next.js 15 App Router to build forms with client-side validation.| markus.oberlehner.net
Using German, French, Spanish, or other non-English terms in code? Sometimes it makes sense! Explore when to keep native terms for clarity and avoid translation pitfalls.| markus.oberlehner.net
Learn how to set up Playwright with Storybook for free visual regression testing, ensuring UI components remain consistent across environments using Docker.| markus.oberlehner.net
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 Next.js-powered application within a Docker container. Docker containers offer numerous advantages, like portability and a standardized environment. The Docker container we create in the following few steps can be run and deployed on every system capa...| Blog on Markus Oberlehner
For the last couple of years, microservices and, to a lesser degree, microfrontends have been all the rage when it came to building new software systems. However, although microservices promise vast benefits over traditional monolithic approaches, in many projects, those didn’t materialize. More and more people talk about returning to a more traditional, monolithic architecture and are happy with it. Why is that? I think there are effectively two major reasons for this:| Markus Oberlehner - Web Developer, Blogger, Open Source Contributor on Markus...
How to test microservices-based applications and why we can't use end-to-end tests in a loosely coupled architecture.| markus.oberlehner.net
Explore how AI-assisted development can be enhanced by best practices like Test-Driven Development (TDD), writing user stories, and setting acceptance criteria. Learn about the limitations of LLMs and how to adapt workflows for successful AI-enhanced application development.| markus.oberlehner.net
Explore if returning composables from other composables is an anti-pattern in Vue applications. Insights on code ergonomics and best practices in Vue development.| markus.oberlehner.net
Learn how to effectively test SSR applications (like Nuxt and Next.js) interacting with HTTP APIs through Contract Testing with Specmatic.| markus.oberlehner.net
Learn how to build a similar products recommendation feature using SQLite, OpenAI embeddings, and Nuxt.| markus.oberlehner.net
Learn how to build a powerful search experience using SQLite, OpenAI embeddings, and Node.js by understanding the concept of Vector Search and text embeddings.| markus.oberlehner.net
Streamline reactive data fetching in Nuxt 3, simplifying updates across components. E.g., deleting data in one component updates a list of data in another.| markus.oberlehner.net
Explore the Rule of Least Power in coding, demonstrating how choosing simpler, secure PostgreSQL policies for data access can enhance application security and maintainability.| markus.oberlehner.net
Maximize software quality with outcome-focused testing strategies, including efficient unit and application tests, for faster, better development.| markus.oberlehner.net
Discover the Three-Layer UI Component Architecture for crafting versatile, reusable components as a basis for multiple design systems.| markus.oberlehner.net
How to use timeboxing to manage TODO lists effectively. Avoid TODO bankruptcy by making a realistic plan for the items on your TODO list.| markus.oberlehner.net
Learn how to use Composables with the Vue 3 Composition API. Vue Composables are similar to React Hooks. They make it very easy to share code across components.| markus.oberlehner.net
Writing documentation is a time-consuming process. We can't afford it as long as we have deficits in other areas of our process.| markus.oberlehner.net
Learn how to set up Cypress to automatically rerun your tests when you make changes to your code.| markus.oberlehner.net
Learn about the differences between the Composition API and the Options API and why I think you should use the Composition API exclusively.| markus.oberlehner.net
Learn when to use ref() and when to use reactive() and why you should consider always using ref() instead of reactive().| markus.oberlehner.net
Learn about what makes Tailwind CSS antifragile and why it is more robust than BEM in certain situations.| markus.oberlehner.net
Learn how to identify when your components are doing too much and what to do against it.| markus.oberlehner.net
Learn about my thoughts about how to become a professional. There is no easy answer to that, but why not?| markus.oberlehner.net
Learn how to set up a Vue.js project without webpack or any other complicated build tools, including features like code splitting and automatically refreshing the browser during development.| markus.oberlehner.net
Learn about a concept for bundling JavaScript files server-side at runtime| markus.oberlehner.net
Learn about my thoughts about Progressive Enhancement in the time of modern frontend frameworks.| markus.oberlehner.net
Learn about different Partial Hydration stategies and a new concept for Active Hydration.| markus.oberlehner.net
Learn how to implement feature toggles in a Vue.js application with the Context Provider Pattern.| markus.oberlehner.net
Learn about the 4 Principles of State Managment in modern Vue 3 applications: Embrace the Local State, Lift State Up, Utilize the Context Provider Pattern, and Use the SWR Cache Pattern.| markus.oberlehner.net
Wrapping Third-Party Libraries can make refactoring a lot easier. But it also has some downsides.| markus.oberlehner.net
Learn how to use the Provider Pattern to build components for sharing styles.| markus.oberlehner.net
Learn more about how to apply some lessons from Nassim Nicholas Taleb's book Antifragile to Web Development.| markus.oberlehner.net
Learn how to derive default values for properties from the context of a component.| markus.oberlehner.net
Learn how to differentiate between situations where you should use loose coupling or tight coupling in your Vue.js applications.| markus.oberlehner.net
Learn how to automatically retry failed requests before finally throwing an error.| markus.oberlehner.net
Learn how to deal with and where to put your business logic in modern, client-heavy SPAs.| markus.oberlehner.net
Learn how to build fight the habit of procrastination with 5 simple techniques.| markus.oberlehner.net
Having a system that helps you find good variable names faster can significantly increase your productivity.| markus.oberlehner.net
Learn how to use $refs with the Vue 3 Composition API and how to create dynamic $refs.| markus.oberlehner.net
Learn how to create a pre-commit hook which runs ESLint and stylelint only on files with changes.| markus.oberlehner.net
Learn more about how to improve your tests so they can serve as a vital part of your documentation.| markus.oberlehner.net
Learn how to use Eleventy in combination with Preact to build super fast websites with a modern component-based workflow.| markus.oberlehner.net
Discover how to use Docker to run CLI tools in languages like Java, Ruby, or PHP without installing them on your machine. Use Docker for CLI commands to keep your local system clean and efficient.| markus.oberlehner.net
Build a chatbot running the LLaMA 2 model locally in a Next.js application. How to set up the environment, integrate LLaMA 2 with Next.js, and create an interactive chat interface.| markus.oberlehner.net
Explore the problem with attribute inheritance in Vue components, the importance of a minimal API surface area, and best practices for component design. Learn how to create maintainable and robust components in Vue by avoiding the pitfalls of attribute inheritance.| markus.oberlehner.net
Learn how to run Nuxt 3 in Docker and how to set up Dockerfiles for both production and development, build and run Docker images using Docker Compose, and leverage Docker's features to ensure a consistent environment.| markus.oberlehner.net
Discover Progressive Enhanced Hybrid Applications (PEHAs), a web development approach combining the best features of MPAs and SPAs. Learn how PEHAs improve performance, resilience, and accessibility for a better user experience.| markus.oberlehner.net
How to build a ChatGPT client with Remix, using response streaming for a chat-like experience. Follow this step-by-step guide to build a ChatGPT-style chat bot with Remix and OpenAI API.| markus.oberlehner.net
Learn how to use error boundaries in the Remix framework to prevent broken pages caused by client-side errors. Learn how to create custom error boundaries that ensure your progressive-enhanced web application remains functional, providing a superior user experience.| markus.oberlehner.net
How to build a ChatGPT client with Nuxt 3, using response streaming for a chat-like experience. Follow this step-by-step guide to to build a ChatGPT-style chat bot with Nuxt and OpenAI API.| markus.oberlehner.net
Discover how to utilize TypeScript's powerful Omit and Partial utilities for data creation and updates, streamlining your code and enhancing developer experience.| markus.oberlehner.net
Discover how to harness ChatGPT as a powerful writing assistant with our step-by-step guide. Learn about its strengths, limitations, and how to effectively collaborate with AI for creating engaging content tailored to your technical audience.| markus.oberlehner.net
Learn how to make the line height of text elements not affect its margin, so the visual spacing between elements remains consistent.| markus.oberlehner.net
Is Software Architecture just the same as real Architecture? Or is the term Software Architecture misleading or even harmful?| markus.oberlehner.net
Using @testing-library/jest-dom with Vitest is possible by manually extending the Vitest expect function with the jest-dom matchers.| markus.oberlehner.net
If Mock Service Worker does not seem to work in combination with Vitest, the solution is to add a fetch polyfill.| markus.oberlehner.net
Learn about the different definitions of certain types of automated tests and when to use what testing strategy.| markus.oberlehner.net
Learn how to use the onUnmounted hook in Vue components to clean up global event listeners, intervals, and third-party library instances.| markus.oberlehner.net
The drawbacks of automatic non-prop attribute inheritance in Vue and how things get even more complicated with multiple root nodes.| markus.oberlehner.net
Learn three strategies for how to set up your Vue projects' file tree: either by using a flat hierarchy or group your components by domain.| markus.oberlehner.net
Stop wasting time and learn how to use the VueUse Composition API composable library for a lot of everyday use cases.| markus.oberlehner.net
What does maintaining a shared codebase and air pollution have in common? Both belong to the few areas where we find it acceptable to apply the Inversion of Responsibility Principle.| markus.oberlehner.net
Learn how to use Preconditions to decouple tests from Implementation Details.| markus.oberlehner.net
Learn why determining the spacing between elements on their shared parent element leads to more resilient and maintainable code.| markus.oberlehner.net
Handpicked selection of Vue.js based Bootstrap and Material Desing templates to build beautiful Web Apps and Websites.| markus.oberlehner.net
Learn why callbacks are considered an anti-pattern in Vue and when to use callbacks instead of events in Vue.js.| markus.oberlehner.net
Learn how the problem-solving skills we learn, playing Chess and video games can help us become better developers.| markus.oberlehner.net
Learn how you can decide when to use slots in Vue.js components based on the file structure of your project.| markus.oberlehner.net
Learn how to extract and share logic to build flexible components with the Vue 3 Composition API.| markus.oberlehner.net
Learn about the differences between watch and watchEffect hooks, when to use what, and how watchEffect is similar to computed.| markus.oberlehner.net
Learn how to implement Automatic Dependency Injection in Vue.js with the Context Provider Pattern.| markus.oberlehner.net
Learn how to replicate the useState and useReducer React Hooks with the Vue 3 Composition API.| markus.oberlehner.net
Learn which dependency injection techniques to avoid when building Vue.js applications.| markus.oberlehner.net
CSS has some shortcomings. But we have solved them multiple times for now. Learn more about how.| markus.oberlehner.net
Learn more about when to use utility classes with BEM or other non-utility-first approaches to CSS.| markus.oberlehner.net
Learn how to automatically generate srcset and sizes attributes for responsive images based on context.| markus.oberlehner.net