From 190dc0f0e2281f326edd35323ef3d415393deaa6 Mon Sep 17 00:00:00 2001 From: z3rOR0ne Date: Thu, 6 Apr 2023 19:28:29 -0700 Subject: [PATCH] :memo: Added sub to markus oberlehner blog --- .config/newsboat/my_urls | 1 + .config/newsboat/rss/markus_oberlehner.xml | 2257 ++++++++++++++++++++ 2 files changed, 2258 insertions(+) create mode 100644 .config/newsboat/rss/markus_oberlehner.xml diff --git a/.config/newsboat/my_urls b/.config/newsboat/my_urls index 7e9863ab..19c8a733 100644 --- a/.config/newsboat/my_urls +++ b/.config/newsboat/my_urls @@ -40,3 +40,4 @@ file://./rss/radiolab.rss file://./rss/pluralistic.rss file://./rss/tech_over_tea.rss file://./rss/sometechblog.xml +file://./rss/markus_oberlehner.xml diff --git a/.config/newsboat/rss/markus_oberlehner.xml b/.config/newsboat/rss/markus_oberlehner.xml new file mode 100644 index 00000000..1faeeed0 --- /dev/null +++ b/.config/newsboat/rss/markus_oberlehner.xml @@ -0,0 +1,2257 @@ + + + + Blog on Markus Oberlehner + https://markus.oberlehner.net/blog/ + Recent content in Blog on Markus Oberlehner + Hugo -- gohugo.io + en + Mon, 20 Mar 2023 12:54:54 +0200 + + + + + + The Three-Layer UI Component Architecture: Versatile Building Blocks for Crafting Multiple Design Systems + https://markus.oberlehner.net/blog/the-three-layer-ui-component-architecture-versatile-building-blocks-for-crafting-multiple-design-systems/ + Mon, 20 Mar 2023 12:54:54 +0200 + + https://markus.oberlehner.net/blog/the-three-layer-ui-component-architecture-versatile-building-blocks-for-crafting-multiple-design-systems/ + 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 attempt to solve this problem. This approach helps us maintain reusable components that serve as building blocks for multiple design systems. +TL;DR The Three-Layer UI Component Architecture helps create multiple design systems by utilizing reusable components. + + + + 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/ + Sat, 24 Dec 2022 12:46:46 +0200 + + https://markus.oberlehner.net/blog/how-to-fix-spacing-between-text-blocks-when-using-tailwind-css/ + Did you ever encounter the problem that the space between a text block and some other element seems wrong? For example, although we&rsquo;ve added the same mt-4 to a text block and some images, the space between text and image looks much larger than the space between two images. So instead of mt-4 we try mt-3, but it just doesn&rsquo;t work out. This happens because the same margin can look visually different if it separates text from some element instead of separating two non-text elements. + + + + Using Testing Library jest-dom with Vitest + https://markus.oberlehner.net/blog/using-testing-library-jest-dom-with-vitest/ + Tue, 28 Jun 2022 17:15:33 +0200 + + https://markus.oberlehner.net/blog/using-testing-library-jest-dom-with-vitest/ + Jest is excellent, but Vitest is more excellent. 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&rsquo;m mostly transitioning away from Jest in favor of Vitest. But there are a lot of amazing tools in the Jest ecosystem, and not all of them can be easily replaced. Luckily, the Vitest API is mostly compatible with the Jest API, making it possible to reuse many tools originally built for Jest. + + + + Using Mock Service Worker with Vitest and fetch + https://markus.oberlehner.net/blog/using-mock-service-worker-with-vitest-and-fetch/ + Sat, 25 Jun 2022 08:15:33 +0200 + + https://markus.oberlehner.net/blog/using-mock-service-worker-with-vitest-and-fetch/ + 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 requests in the browser and Node.js. +Let&rsquo;s see how we can combine the power of both tools to write awesome tests. +Polyfilling fetch On the surface of it, using Mock Service Worker and Vitest together is straightforward. + + + + Refactoring a House: Software Architecture is Architecture After All + https://markus.oberlehner.net/blog/refactoring-a-house-software-architecture-is-architecture-after-all/ + Tue, 24 May 2022 09:33:33 +0200 + + https://markus.oberlehner.net/blog/refactoring-a-house-software-architecture-is-architecture-after-all/ + Now and then, fierce debates ignite on Twitter about whether the term Software Architecture is misleading or even harmful. The argument goes as follows: Code is ever evolving while buildings are static. Furthermore, making changes to code is easy and cheap and making changes to buildings is borderline impossible. Therefore rigorous planning of an architect is justified when building a house but a waste of time when writing code. + + + + TODO Timeboxing + https://markus.oberlehner.net/blog/todo-timeboxing/ + Tue, 11 Jan 2022 18:22:22 +0200 + + https://markus.oberlehner.net/blog/todo-timeboxing/ + 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&rsquo;t work—quite the opposite. I never manage to get everything I put on the list done on any given day, which frustrates me. +There is an easy fix: prioritization and timeboxing. + + + + Manual testing, E2E testing, unit testing – how to decide which testing strategy to use? + https://markus.oberlehner.net/blog/manual-testing-e2e-testing-unit-testing-how-to-decide-which-testing-strategy-to-use/ + Sat, 27 Nov 2021 13:55:55 +0100 + + https://markus.oberlehner.net/blog/manual-testing-e2e-testing-unit-testing-how-to-decide-which-testing-strategy-to-use/ + 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 tutorial, you should have a much clearer picture of the strengths and weaknesses of the different kinds of testing methodologies. +When it comes to automated testing, there are a lot of different names for certain types of tests thrown around: E2E testing, acceptance testing, integration testing, unit testing,&hellip; to name a few. + + + + How to Clean Up Global Event Listeners, Intervals, and Third-party Libraries in Vue Components + https://markus.oberlehner.net/blog/how-to-clean-up-global-event-listeners-intervals-and-third-party-libraries-in-vue-components/ + Sat, 02 Oct 2021 18:49:49 +0200 + + https://markus.oberlehner.net/blog/how-to-clean-up-global-event-listeners-intervals-and-third-party-libraries-in-vue-components/ + Ideally, Vue components are self-contained pieces of UI without any observable side effects to matters outside the component&rsquo;s scope. But unfortunately, that&rsquo;s not always possible. For example, sometimes, we need to bind global event listeners, use setInterval, or initialize a particular third-party library inside of a component. +❌ // Vue 3 export default defineComponent({ name: &#39;SomeComponent&#39;, setup() { // Global event listener document.body.addEventListener(&#39;click&#39;, () =&gt; { // do something expensive . + + + + Multiple Root Nodes and Attribute Inheritance in Vue 3 + https://markus.oberlehner.net/blog/multiple-root-nodes-and-attribute-inheritance-in-vue-3/ + Sun, 05 Sep 2021 09:12:12 +0200 + + https://markus.oberlehner.net/blog/multiple-root-nodes-and-attribute-inheritance-in-vue-3/ + 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. +&lt;template&gt; &lt;!-- ✅ --&gt; &lt;SingleRootNodeComponent class=&#34;myClass&#34;/&gt; &lt;!-- ❌ No attr inheritance with multiple root nodes! --&gt; &lt;MultiNodeComponent class=&#34;myClass&#34;/&gt; &lt;/template&gt;&lt;!-- MultiNodeComponent.vue --&gt; &lt;template&gt; &lt;div&gt;&lt;!-- ... --&gt;&lt;/div&gt; &lt;div&gt;&lt;!-- ... --&gt;&lt;/div&gt; &lt;/template&gt; Although using class on MultiNodeComponent will log a warning to the console, I think it leads to a suboptimal developer experience when using MultiNodeComponent. + + + + 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/ + Wed, 25 Aug 2021 20:09:09 +0200 + + https://markus.oberlehner.net/blog/vue-project-directory-structure-keep-it-flat-or-group-by-domain/ + When starting a new project or refactoring an existing one, the question often arises: how to set up the project&rsquo;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 of our project, there might be a time where we feel the need to add additional folders to organize our Vue components and other files. + + + + Vue Composition API: VueUse Composable Library + https://markus.oberlehner.net/blog/vue-composition-api-vueuse-composable-library/ + Tue, 24 Aug 2021 17:36:36 +0200 + + https://markus.oberlehner.net/blog/vue-composition-api-vueuse-composable-library/ + 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 take a closer look at some of the most interesting ones. +Installing VueUse in Our Project There are two ways how we can use VueUse in our projects. + + + + Maintaining Shared Code and the Inversion of Responsibility Principle + https://markus.oberlehner.net/blog/maintaining-shared-code-and-the-inversion-of-responsibility-principle/ + Sat, 21 Aug 2021 17:53:53 +0200 + + https://markus.oberlehner.net/blog/maintaining-shared-code-and-the-inversion-of-responsibility-principle/ + Over the past few weeks, I&rsquo;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 don&rsquo;t break Team B and C&rsquo;s code? And how can we make the process of updating all related codebases as painless as possible? +The more I think about it, the more I&rsquo;m convinced that the most effective solution to this problem is to make the team that introduces the breaking change responsible for updating all affected projects. + + + + Vue Composition API: Composables + https://markus.oberlehner.net/blog/vue-composition-api-composables/ + Thu, 05 Aug 2021 19:02:02 +0200 + + https://markus.oberlehner.net/blog/vue-composition-api-composables/ + 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 components. +A pattern is emerging to call such pieces of reusable reactive code Composables. Composables are similar to what is called Hooks in the React world. + + + + Don't Write Documentation! + https://markus.oberlehner.net/blog/dont-write-documentation/ + Sat, 24 Jul 2021 11:24:24 +0200 + + https://markus.oberlehner.net/blog/dont-write-documentation/ + 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 do. I argue that this is a waste of time. +The 5 Pillars of a Self-documented Codebase Write detailed tickets and user stories. + + + + Cypress Live-Reload Tests on Code Changes + https://markus.oberlehner.net/blog/cypress-live-reload-tests-on-code-changes/ + Mon, 19 Jul 2021 20:10:10 +0200 + + https://markus.oberlehner.net/blog/cypress-live-reload-tests-on-code-changes/ + 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 hot module replacement (HMR) and other fantastic development tools like Vite or Snowpack. If we had something similar in Cypress, practicing TDD would be a lot easier: write a failing test and update the code until the Cypress test turns green, all without ever manually testing the application ourselves. + + + + Decoupling Component Tests From Implementation Details with Preconditions + https://markus.oberlehner.net/blog/decoupling-component-tests-from-implementation-details-with-preconditions/ + Sat, 10 Jul 2021 10:42:42 +0200 + + https://markus.oberlehner.net/blog/decoupling-component-tests-from-implementation-details-with-preconditions/ + 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 with the public API of the component under test. +test(&#39;It should increment the count when clicking the `+` button.&#39;, async () =&gt; { let wrapper = mount(Counter); await wrapper. + + + + Vue 3 Composition API vs. Options API + https://markus.oberlehner.net/blog/vue-3-composition-api-vs-options-api/ + Sat, 03 Jul 2021 08:29:29 +0200 + + https://markus.oberlehner.net/blog/vue-3-composition-api-vs-options-api/ + 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 looking back. + What Makes the Composition API Better than the Options API? Code Sharing with Composables Make Constants and Dependencies Available in the Template Using the Composition API with Vue 2 // Options API export default { data() { return { name: &#39;John&#39;, }; }, methods: { doIt() { console. + + + + CSS: The Spacing Between Elements Should Be Determined by the Parent Element + https://markus.oberlehner.net/blog/css-the-spacing-between-elements-should-be-determined-by-the-parent-element/ + Mon, 21 Jun 2021 13:00:00 +0200 + + https://markus.oberlehner.net/blog/css-the-spacing-between-elements-should-be-determined-by-the-parent-element/ + 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. + Layout Components What Are the Advantages of Putting the Spacing on the Parent Element? Exceptions &lt;ul class=&#34;nav&#34;&gt; &lt;li class=&#34;nav-item&#34;&gt;&lt;!-- ... --&gt;&lt;/li&gt; &lt;li class=&#34;nav-item&#34;&gt;&lt;!-- ... --&gt;&lt;/li&gt; &lt;!-- ... --&gt; &lt;ul&gt; &lt;style&gt; /* ❌ Bad */ . + + + + Vue 3 Composition API: ref() vs. reactive() + https://markus.oberlehner.net/blog/vue-3-composition-api-ref-vs-reactive/ + Tue, 20 Apr 2021 21:26:26 +0200 + + https://markus.oberlehner.net/blog/vue-3-composition-api-ref-vs-reactive/ + 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,&hellip;) and reactive() for objects. But there is more to it. + When to Use ref() and When to Use reactive()? The Downside of Using ref() Is Mixing ref() and reactive() a Good Idea? When to Use ref() and When to Use reactive()? + + + + 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/ + Sun, 07 Mar 2021 13:13:13 +0200 + + https://markus.oberlehner.net/blog/premium-vue-and-nuxt-templates-for-web-apps-and-sites/ + Suppose you&rsquo;re searching for high-quality Vue.js templates, I recommend you to take a look at the work of Creative Tim (affiliate link). In this article, I&rsquo;ll show you a list of handpicked premium templates to build Web Applications or Websites with Vue.js and Nuxt.js. + Dashboard and Application Templates for Vue Templates for Building Websites with Vue Dashboard and Application Templates for Vue The following templates help you get started building beautiful web applications with stunning dashboards. + + + + Tailwind CSS: The Antifragile CSS Framework + https://markus.oberlehner.net/blog/tailwind-css-the-antifragile-css-framework/ + Sun, 24 Jan 2021 09:33:33 +0200 + + https://markus.oberlehner.net/blog/tailwind-css-the-antifragile-css-framework/ + Tailwind CSS is a divisive issue in the web development world: some love it, others love to hate it. I already wrote about my thoughts about Tailwind in a separate article, and there are a ton of articles from different people about why they like it and why they don&rsquo;t like it. This article is about one specific feature of Tailwind CSS: its antifragility. + Disclaimer: Although this article focuses on one particular strength of Tailwind, which happens to be a weakness of BEM, I&rsquo;m not advising using one over the other. + + + + Your Components Do Too Much + https://markus.oberlehner.net/blog/your-components-do-too-much/ + Sun, 17 Jan 2021 08:56:56 +0200 + + https://markus.oberlehner.net/blog/your-components-do-too-much/ + 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&rsquo;re working on is doing too much. +We can think of our applications as a tree structure. The App component (or the individual page components in a multi-page app) is the trunk. App is the main entry point of our application. Every component is a direct or indirect child component of App in the same way every branch and every leaf connects directly or indirectly to a tree&rsquo;s trunk. + + + + Events and Callbacks: Parent/Child Component Communication in Vue + https://markus.oberlehner.net/blog/events-and-callbacks-parent-child-component-communication-in-vue/ + Sun, 10 Jan 2021 10:25:25 +0200 + + https://markus.oberlehner.net/blog/events-and-callbacks-parent-child-component-communication-in-vue/ + 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? And what are the conceptual differences? +Apart from answers to those questions, we will explore how to solve events&rsquo; two most significant problems: that we can&rsquo;t force parent components to handle them and that they can silently break. + + + + What Makes a Senior Developer? It Depends! + https://markus.oberlehner.net/blog/what-makes-a-senior-developer-it-depends/ + Sun, 03 Jan 2021 09:04:04 +0200 + + https://markus.oberlehner.net/blog/what-makes-a-senior-developer-it-depends/ + 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 for the less experienced person asking the question. When I&rsquo;m the one to say those two words, I try not to say them but explain what I think it depends on instead. + + + + Building Vue.js Applications Without webpack + https://markus.oberlehner.net/blog/goodbye-webpack-building-vue-applications-without-webpack/ + Sun, 27 Dec 2020 11:18:18 +0200 + + https://markus.oberlehner.net/blog/goodbye-webpack-building-vue-applications-without-webpack/ + In the good old times, creating a JavaScript-enhanced website was straightforward: create a .html file, add a &lt;script&gt; tag, write some JavaScript, and open the file in the browser. Nowadays, building web applications requires complex build toolchains, a node_modules directory with gigabytes of dependencies, and a complicated webpack configuration file. +But is it really necessary to use webpack to build modern JavaScript applications? Is it really necessary to use webpack to build Vue. + + + + JavaScript Runtime Bundling Concept + https://markus.oberlehner.net/blog/javascript-runtime-bundling-concept/ + Sun, 20 Dec 2020 08:44:44 +0200 + + https://markus.oberlehner.net/blog/javascript-runtime-bundling-concept/ + Imagine a world where you don&rsquo;t need to install a single dependency, but you&rsquo;re still able to use all modern JavaScript features. Where you don&rsquo;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 be perfectly minified and optimized for old browsers on production. +One thing that always bugged me since I&rsquo;ve been a web developer is that minification of JavaScript and CSS assets is not done automatically by the server (in addition to compression). + + + + 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/ + Sun, 13 Dec 2020 12:03:03 +0200 + + https://markus.oberlehner.net/blog/what-developers-can-learn-from-playing-chess-and-video-games/ + 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 figure and where they can move it to save it. The more advanced players reacted very differently: either they moved a different chess piece to cover their piece, or they seemingly ignored the threat and attacked an equally or even more valuable piece of the opponent. + + + + 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/ + Sun, 06 Dec 2020 11:11:11 +0200 + + https://markus.oberlehner.net/blog/utilize-the-file-structure-to-decide-when-to-use-vuejs-slots/ + One of my biggest aha moments in the last couple of months was when I realized that Loose Coupling makes the most sense when dependencies trigger side-effects. +So my first principle for when to use Dependency Injection is: + Always inject dependencies that trigger side effects. + 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/ + Sun, 29 Nov 2020 09:34:34 +0200 + + https://markus.oberlehner.net/blog/progressive-enhancement-and-the-modern-web/ + 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 impression is that this consensus has vanished since. I&rsquo;m not sure if this is because of the rise of React and Vue.js or if it just seems that way to me because back then, I was in the Progressive Enhancement bubble, and nowadays, I&rsquo;m in a bubble that doesn&rsquo;t seem to care about that. + + + + Group, Extract, Share: Working with the Vue Composition API + https://markus.oberlehner.net/blog/group-extract-share-working-with-the-vue-composition-api/ + Sun, 22 Nov 2020 10:29:29 +0200 + + https://markus.oberlehner.net/blog/group-extract-share-working-with-the-vue-composition-api/ + 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 components and applications with Vue 3 and the Composition API. + Group Stateful Logic Inside of Components Extract Logic Into Functions Share Stateful Logic Between Components Group Stateful Logic Inside of Components With the Options API, we can&rsquo;t group logic by the task it fulfills. + + + + watch vs. watchEffect when to use what with Vue.js + https://markus.oberlehner.net/blog/watch-vs-watcheffect-when-to-use-what-with-vue/ + Sun, 15 Nov 2020 11:20:20 +0200 + + https://markus.oberlehner.net/blog/watch-vs-watcheffect-when-to-use-what-with-vue/ + { "@context": "https://schema.org", "@type": "VideoObject", "name": "Vue.js watch vs. watchEffect When to Use What", "description": "Learn about the differences between watch and watchEffect hooks in the Vue.js Composition API, when to use what, and how watchEffect is similar to computed.", "thumbnailUrl": "/images/f_auto,q_auto,w_1920,h_1080/v1542158522/blog/2020-11-15/watch-vs-watcheffect-video-thumbnail", "uploadDate": "2021-07-24T17:23:23Z", "duration": "PT14M00S", "embedUrl": "https://www.youtube.com/embed/OSU9jeIDlws" } When I first studied the new Composition API, I was confused that there are two watch hooks: watch() and watchEffect(). + + + + Partial Hydration Concepts: Lazy and Active + https://markus.oberlehner.net/blog/partial-hydration-concepts-lazy-and-active/ + Sun, 08 Nov 2020 08:58:58 +0200 + + https://markus.oberlehner.net/blog/partial-hydration-concepts-lazy-and-active/ + 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 general concept of hydration. +Partial Hydration vs. Lazy Hydration First, start with the shared word: Hydration. In the context of client-side frameworks, this means making server-side rendered HTML interactive without completely re-rendering it from scratch. + + + + Automatic Dependency Injection in Vue with Context Providers + https://markus.oberlehner.net/blog/automatic-dependency-injection-in-vue-with-context-providers/ + Sun, 01 Nov 2020 08:15:15 +0200 + + https://markus.oberlehner.net/blog/automatic-dependency-injection-in-vue-with-context-providers/ + I&rsquo;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. I&rsquo;m not saying there is only one right way; I know for a fact that there are many ways. But it is crucial to find a way that fits the overall architecture of your application. + Automatic Dependency Injection via a Context Provider With provide/inject, we always had a powerful tool in Vue. + + + + Vue.js Feature Toggle Context Provider + https://markus.oberlehner.net/blog/vuejs-feature-toggle-context-provider/ + Sun, 25 Oct 2020 06:47:47 +0200 + + https://markus.oberlehner.net/blog/vuejs-feature-toggle-context-provider/ + Some time ago, I read a very informative article by Pete Hodgson about feature toggles. The article goes into much detail, and I highly recommend you read it if you want to implement feature toggles yourself. Currently, I&rsquo;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 where this pattern can provide a lot of o value. + + + + useState and useReducer with the Vue 3 Composition API + https://markus.oberlehner.net/blog/usestate-and-usereducer-with-the-vue-3-composition-api/ + Sun, 18 Oct 2020 07:15:15 +0200 + + https://markus.oberlehner.net/blog/usestate-and-usereducer-with-the-vue-3-composition-api/ + 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 reactivity under the hood is quite different. +In React, we have to use useState() and useReducer() hooks to declare reactive data. In Vue.js we have reactive() and ref() instead. + + + + Application State Management with Vue 3 + https://markus.oberlehner.net/blog/application-state-management-with-vue-3/ + Sun, 11 Oct 2020 07:59:59 +0200 + + https://markus.oberlehner.net/blog/application-state-management-with-vue-3/ + 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 API&rsquo;s new tools, Vuex is rarely necessary anymore. But we have to use the right tools for the job. +In his phenomenal article about state management in React applications, Kent C. + + + + Wrap Third-Party Libraries + https://markus.oberlehner.net/blog/wrap-third-party-libraries/ + Sun, 04 Oct 2020 10:36:36 +0200 + + https://markus.oberlehner.net/blog/wrap-third-party-libraries/ + 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 those practices. +Although I won&rsquo;t advise you to wrap all of your dependencies 100% of the time, especially when it comes to libraries with a large API surface area, you should definitely consider it. + + + + Vue.js Style Provider Pattern + https://markus.oberlehner.net/blog/vuejs-style-provider-pattern/ + Sun, 27 Sep 2020 09:13:13 +0200 + + https://markus.oberlehner.net/blog/vuejs-style-provider-pattern/ + 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. +&lt;template&gt; &lt;BaseCard class=&#34;ArticleTeaser&#34;&gt; &lt;BaseCardImage src=&#34;...&#34; alt=&#34;...&#34;&gt; &lt;BaseCardBody padding=&#34;[&#39;m&#39;, &#39;l@m&#39;]&#34;&gt; &lt;!-- ... --&gt; &lt;/BaseCardBody&gt; &lt;/BaseCard&gt; &lt;/template&gt; In the example code snippet above, you can see that we use BaseCard components to build an ArticleTeaser component. + + + + Avoid Opaque Dependency Injection Techniques with Vue.js + https://markus.oberlehner.net/blog/avoid-opaque-dependency-injection-techniques-with-vuejs/ + Sun, 20 Sep 2020 08:27:27 +0200 + + https://markus.oberlehner.net/blog/avoid-opaque-dependency-injection-techniques-with-vuejs/ + 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. +Especially in the Vue.js ecosystem, we have many techniques for injecting dependencies into our application that do this in an opaque way. This means it is not always transparent where a dependency is initialized and injected. + + + + We Have Solved CSS! With BEM, Scoped Components, and Utility First Frameworks + https://markus.oberlehner.net/blog/we-have-solved-css-with-bem-scoped-components-and-utility-first-frameworks/ + Sat, 12 Sep 2020 10:42:42 +0200 + + https://markus.oberlehner.net/blog/we-have-solved-css-with-bem-scoped-components-and-utility-first-frameworks/ + 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 have solved those problems now multiple times, with BEM, scoped components (e.g., Vue, Svelte, and CSS in JS), and utility-class-based CSS frameworks (e.g., Tachyons and Tailwind). +Problem 1: No Scoping or Namespacing Because of the lack of native support for scoping CSS styles, we might use the same class name without realizing that they sabotage each other. + + + + 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/ + Sun, 06 Sep 2020 07:58:58 +0200 + + https://markus.oberlehner.net/blog/when-and-when-not-to-use-utility-classes-with-bem/ + 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&rsquo;m not perhaps just being stubborn. I&rsquo;ve been using utility classes for a long time, even before full-blown utility class-based frameworks like Tachyons and Tailwind CSS became popular. But what I have discovered lately is that more and more utility classes are sneaking into my codebases. + + + + Antifragile Web Development + https://markus.oberlehner.net/blog/antifragile-web-development/ + Sun, 30 Aug 2020 10:47:47 +0200 + + https://markus.oberlehner.net/blog/antifragile-web-development/ + Recently I&rsquo;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 few ideas I had about applying some of the concepts in the book to web development. +Do You Have Evidence for No (Long Term) Harm? His anecdote about how doctors often prescribe drugs, with potentially serious side effects, to treat minor illnesses, immediately reminded me of how careless we usually are when it comes to adding dependencies to our projects. + + + + Automatically Generate Responsive Image Attributes Based on the Context of a Vue Component + https://markus.oberlehner.net/blog/automatically-generate-responsive-image-attributes-based-on-the-context-of-a-vue-component/ + Sun, 23 Aug 2020 08:28:28 +0200 + + https://markus.oberlehner.net/blog/automatically-generate-responsive-image-attributes-based-on-the-context-of-a-vue-component/ + Two weeks ago, we explored how we can make Vue components aware of their context and change their props accordingly. We used this technique to detect the background context of a component to adapt its background color and styling. Today we use the same approach but take it a step further: we identify the approximate width of the context in which we render an image component so that we can automatically generate srcset and sizes attributes that match our breakpoints. + + + + Cross-Browser Acceptance Tests with LambdaTest and TestCafe + https://markus.oberlehner.net/blog/cross-browser-acceptance-tests-with-lambdatest-and-testcafe/ + Sun, 16 Aug 2020 07:07:07 +0200 + + https://markus.oberlehner.net/blog/cross-browser-acceptance-tests-with-lambdatest-and-testcafe/ + This is a sponsored article. Thank you, LambdaTest, for supporting me and this blog! + 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. LambdaTest is a modern and fast browser testing service with powerful features when it comes to automated cross-browser testing. It provides advanced features like Selenium Grid to automate Selenium testing in the cloud. + + + + Context-Aware Props in Vue.js Components + https://markus.oberlehner.net/blog/context-aware-props-in-vuejs-components/ + Sun, 09 Aug 2020 08:18:18 +0200 + + https://markus.oberlehner.net/blog/context-aware-props-in-vuejs-components/ + 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. + The Context-Aware Component Pattern Table of Contents Basic Concept Pure CSS Solution The Context-Aware Component Pattern Basic Concept In the following screenshot, you can see two buttons: a dark button on a white background and a light button on a black background. + + + + Tight Coupling vs. Loose Coupling in Vue.js + https://markus.oberlehner.net/blog/tight-coupling-vs-loose-coupling-in-vuejs/ + Sun, 02 Aug 2020 08:20:20 +0200 + + https://markus.oberlehner.net/blog/tight-coupling-vs-loose-coupling-in-vuejs/ + 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&rsquo;s essential is that we use loose coupling when bridging the gap between layers of our application. Within a layer, though, it is often no problem if there is tight coupling. In this article, we will look at when tight coupling is unproblematic, and when it is better to use loose coupling. + + + + Retry Failed API Requests with JavaScript + https://markus.oberlehner.net/blog/retry-failed-api-requests-with-javascript/ + Sun, 26 Jul 2020 07:36:36 +0200 + + https://markus.oberlehner.net/blog/retry-failed-api-requests-with-javascript/ + 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 connection failure. +In this article, we take a look at how we can retry a failed request. This can be especially useful if many people who use our application are on the move, where there can be dead spots or other disruptions, which can lead to short periods without a network connection. + + + + How to Avoid Bugs from Unanticipated Behavior? + https://markus.oberlehner.net/blog/how-to-avoid-bugs-from-unanticipated-behavior/ + Sun, 19 Jul 2020 08:21:21 +0200 + + https://markus.oberlehner.net/blog/how-to-avoid-bugs-from-unanticipated-behavior/ + Recently I was responsible for introducing a major bug into the code base of the product I&rsquo;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. But when I thought about it more deeply, I realized that the problem was that I did not anticipate a specific outcome of a piece of code. If I did not foresee it when writing the code, there is a high probability that I would not foresee it when writing a test; therefore, not testing for it. + + + + Business Logic in Fat Client Applications + https://markus.oberlehner.net/blog/business-logic-in-fat-client-applications/ + Sun, 12 Jul 2020 10:41:41 +0200 + + https://markus.oberlehner.net/blog/business-logic-in-fat-client-applications/ + 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 live on the client-side. +Services, models and controllers If we look at popular server-side frameworks, we often have applications made out of services, models, and controllers. Typically we handle the business logic inside of the services and controllers. + + + + Make it Simple + https://markus.oberlehner.net/blog/make-it-simple/ + Sun, 05 Jul 2020 13:17:17 +0200 + + https://markus.oberlehner.net/blog/make-it-simple/ + Last weekend I had the pleasure to dine at Das Maier. I don&rsquo;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 husband, who served us, told us about the secret of her delicious food: make the dishes simple and leave out everything that can be left out. + + + + Fighting Procrastination + https://markus.oberlehner.net/blog/fighting-procrastination/ + Sun, 28 Jun 2020 09:38:38 +0200 + + https://markus.oberlehner.net/blog/fighting-procrastination/ + In the last couple of weeks, I&rsquo;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. +A few days ago, I started to fight back. In this article, you can read about what helped me overcome my lack of motivation and stop procrastinating. + Do nothing Do less Do it SMART Do something useful Do it longer Do nothing If you can&rsquo;t bring yourself to work on the task you should be doing, and you feel this strong urge to check your email or Twitter feed, you can try doing nothing instead. + + + + Break out of CSS Grid: Align Image or Background at the Edge of the Screen + https://markus.oberlehner.net/blog/break-out-of-css-grid-align-image-or-background-at-the-edge-of-the-screen/ + Sun, 21 Jun 2020 07:16:16 +0200 + + https://markus.oberlehner.net/blog/break-out-of-css-grid-align-image-or-background-at-the-edge-of-the-screen/ + 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. + Alternating image / text layout There are a couple of ways how we can achieve something like this, but if you want to align the text block precisely to a 12 column grid, things can get a little bit tricky. + + + + Variable Naming: Arrays and Booleans + https://markus.oberlehner.net/blog/variable-naming-arrays-and-booleans/ + Sun, 14 Jun 2020 06:35:35 +0200 + + https://markus.oberlehner.net/blog/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. +I often find myself thinking long and hard about how to name a particular variable or function. This is because I know how important it is to choose proper names so that other programmers and your future self can easily understand your code. + + + + $refs and the Vue 3 Composition API + https://markus.oberlehner.net/blog/refs-and-the-vue-3-composition-api/ + Sun, 07 Jun 2020 09:33:33 +0200 + + https://markus.oberlehner.net/blog/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. +Static $refs When using the Vue 3 Composition API via the setup() method, we don&rsquo;t have access to this. + + + + Are my Component Names Too Long? Vue.js Component Naming Best Practices + https://markus.oberlehner.net/blog/are-my-component-names-too-long-vuejs-component-naming-best-practices/ + Sun, 31 May 2020 07:27:27 +0200 + + https://markus.oberlehner.net/blog/are-my-component-names-too-long-vuejs-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. +What is too long? Jane Manchun Wong from Facebook has gathered data from more than 3000 components in the Facebook React codebase. Her results are that the mean length of a component name is 27 characters: ImA27CharacterComponentName. + + + + 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/ + Sun, 24 May 2020 09:05:05 +0200 + + https://markus.oberlehner.net/blog/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). Although Vue.js does not provide the same abstraction out of the box, in this article, we&rsquo;ll see that in Vue 3, we have all the tools we need to replicate the same functionality quickly. + + + + Automatically Generate your Vue Router Configuration with vue-auto-routing + https://markus.oberlehner.net/blog/automatically-generate-your-vue-router-configuration-with-vue-auto-routing/ + Sun, 17 May 2020 08:38:38 +0200 + + https://markus.oberlehner.net/blog/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. +// src/router.js // ... export default createRouter({ routes: [ { path: &#39;/&#39;, name: &#39;dashboard&#39;, // Here, this `router.js` file depends // on the `Dashboard.vue` component and ... component: () =&gt; import(&#39;./pages/Dashboard.vue&#39;), }, { path: &#39;/holiday-special-2017&#39;, name: &#39;holiday-special-2017&#39;, // . + + + + Stale-While-Revalidate Data Fetching Composable with Vue 3 Composition API + https://markus.oberlehner.net/blog/stale-while-revalidate-data-fetching-composable-with-vue-3-composition-api/ + Sun, 10 May 2020 10:28:28 +0200 + + https://markus.oberlehner.net/blog/stale-while-revalidate-data-fetching-composable-with-vue-3-composition-api/ + This article covers the basics of how to build a simple implementation of the SWR pattern. If you want to use it in a production application, I recommend using a fully-equipped package like swrv. + 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 + https://markus.oberlehner.net/blog/using-netlify-redirects-to-proxy-images-hosted-on-a-third-party-image-provider-or-a-headless-cms/ + Sun, 03 May 2020 08:51:51 +0200 + + https://markus.oberlehner.net/blog/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. +# Image served via Cloudinary https://res.cloudinary.com/maoberlehner/image/upload/v1584257421/blog/2020-03-15/eleventy-preact.png # Image served via Storyblok https://a.storyblok.com/f/56283/1024x768/8a9c71a740/eleventy-preact.png # What I want https://markus.oberlehner.net/images/v1584257421/blog/2020-03-15/eleventy-preact.png If you host your website with Netlify, you&rsquo;re in luck: we can use Netlify redirects to proxy the requests to our third-party image provider, so it looks like the images are served from our domain. + + + + Super Simple Progressively Enhanced Carousel with CSS Scroll Snap + https://markus.oberlehner.net/blog/super-simple-progressively-enhanced-carousel-with-css-scroll-snap/ + Sun, 26 Apr 2020 08:16:16 +0200 + + https://markus.oberlehner.net/blog/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. + Simple image carousel with pure HTML and CSS Pure HTML and CSS solution In the past, I absolutely loved to implement things with pure HTML and CSS for which other people used JavaScript. + + + + Simple Solution for Anchor Links Behind Sticky Headers + https://markus.oberlehner.net/blog/simple-solution-for-anchor-links-behind-sticky-headers/ + Sun, 19 Apr 2020 07:31:31 +0200 + + https://markus.oberlehner.net/blog/simple-solution-for-anchor-links-behind-sticky-headers/ + 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 headers right is harder than you might think. +In this article, we take a look at one of the pieces you need to solve to make sticky headers work great, rather than being a nuisance: anchor links disappearing behind sticky headers. + + + + Lint Only Files with Changes on pre-commit + https://markus.oberlehner.net/blog/lint-only-files-with-changes-on-pre-commit/ + Sun, 12 Apr 2020 11:27:27 +0200 + + https://markus.oberlehner.net/blog/lint-only-files-with-changes-on-pre-commit/ + 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 how I could have the same convenience for my projects. +Manually create a pre-commit hook for linting There are multiple ways of how to achieve this, and what I see a lot is using something like the npm package Husky to help with managing git hooks. + + + + Telling a Story with Test Code + https://markus.oberlehner.net/blog/telling-a-story-with-test-code/ + Sun, 05 Apr 2020 10:04:04 +0200 + + https://markus.oberlehner.net/blog/telling-a-story-with-test-code/ + 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&rsquo;ve described in this article, I noticed a couple of drawbacks. +Keeping test code DRY? Generally speaking, the principles of DRY do not apply to test code. + + + + 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/ + Sun, 29 Mar 2020 07:37:37 +0200 + + https://markus.oberlehner.net/blog/cut-your-nuxt-generate-build-time-in-half-with-context-payload/ + One of my freelancing projects is a Nuxt.js project powered by the wonderful 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 generate 1.000+ pages, the build time got long (over 10 minutes). +The way that I&rsquo;ve set up my Nuxt.js project, every page made a separate request to fetch the data it needs. + + + + Building Partially Hydrated, Progressively Enhanced Static Websites with Isomorphic Preact and Eleventy + https://markus.oberlehner.net/blog/building-partially-hydrated-progressively-enhanced-static-websites-with-isomorphic-preact-and-eleventy/ + Sun, 22 Mar 2020 07:33:33 +0200 + + https://markus.oberlehner.net/blog/building-partially-hydrated-progressively-enhanced-static-websites-with-isomorphic-preact-and-eleventy/ + Lately, a tweet by Jake Archibald and a post by Jeremy Keith reinforced my feeling that modern frameworks like Gatsby and Nuxt.js are not always the best tool for the job. In my experience, there are better ways of how to build content-heavy websites (think marketing sites, not web applications). +But working with Nuxt.js and Gatsby also has tremendous advantages. Those are amazingly powerful tools. Component-based workflows make frontend development fun again, and it is a lot easier to do with modern frontend frameworks than with using templating languages like Nunjucks or Handlebars. + + + + Setting up Eleventy with Preact and htm + https://markus.oberlehner.net/blog/setting-up-eleventy-with-preact-and-htm/ + Sun, 15 Mar 2020 08:09:09 +0200 + + https://markus.oberlehner.net/blog/setting-up-eleventy-with-preact-and-htm/ + One of my top priorities is to create the fastest possible websites (think marketing sites, not web applications), but I also don&rsquo;t want to do without modern tools and a component-based workflow. I have already written a few articles about the problems I&rsquo;ve encountered when using state-of-the-art tools that promise to achieve this. While there are developments in the right direction, I don&rsquo;t think tools like Gatsby and Nuxt.js are quite there yet when it comes to building content heavy, mostly static sites. + + + + Naming Things: Staying in Line with the System + https://markus.oberlehner.net/blog/naming-things-staying-in-line-with-the-system/ + Sun, 08 Mar 2020 07:20:20 +0200 + + https://markus.oberlehner.net/blog/naming-things-staying-in-line-with-the-system/ + 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. +But it does not have to be a struggle to make a decision, often the systems and tools we work with already have naming conventions in place. + + + + Naming Your Unit Tests: It Should vs. Given/When/Then + https://markus.oberlehner.net/blog/naming-your-unit-tests-it-should-vs-given-when-then/ + Sun, 01 Mar 2020 08:56:56 +0200 + + https://markus.oberlehner.net/blog/naming-your-unit-tests-it-should-vs-given-when-then/ + UPDATE: I have written a follow-up article with more thoughts on this topic. + For the most time, when writing unit tests, I favored the it should ... pattern for naming my tests. But time and time again, I noticed that when following this naming convention, I either had to write very long test cases or omit important information. +Let&rsquo;s take a look at the following example where I use the it should pattern. + + + + Weekly Recap: There is no Global State, Technical Debt and Writing Everything Twice + https://markus.oberlehner.net/blog/weekly-recap-there-is-no-global-state-technical-debt-and-writing-everything-twice/ + Sun, 23 Feb 2020 09:12:12 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-there-is-no-global-state-technical-debt-and-writing-everything-twice/ + In the last week, thoughts about global state management, technical debt, and using a WET first approach for building components sparked my interest. +Table of Contents There is no global state What is technical debt WET first component architecture There is no global state Kent C. Dodds started an interesting discussion about what is application state and what is actually a client-side cache of server state. I very much agree with his conclusion that many apps could be made much simpler by using less smart query mechanisms. + + + + Weekly Recap: Eleventy + Preact, Boring Technology and the Right Amount of Magic + https://markus.oberlehner.net/blog/weekly-recap-eleventy-preact-boring-technology-and-the-right-amount-of-magic/ + Sun, 16 Feb 2020 09:43:43 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-eleventy-preact-boring-technology-and-the-right-amount-of-magic/ + In the last week, I enjoyed working with Eleventy and Preact very much. Furthermore, I realized that boring but proven technology is often better than new and shiny tools. +Table of Contents Eleventy + Preact Boring technology The right amount auf magic Eleventy + Preact I&rsquo;m currently tinkering with using Preact as the template language for the excellent static website generator Eleventy. So far, I am quite impressed with how fast Eleventy is at generating pages. + + + + Weekly Recap: Atomic Commits, Legacy Code and Evil String Identifiers + https://markus.oberlehner.net/blog/weekly-recap-atomic-commits-legacy-code-and-evil-string-identifiers/ + Sun, 09 Feb 2020 07:44:44 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-atomic-commits-legacy-code-and-evil-string-identifiers/ + Over the last two weeks, I&rsquo;ve been thinking about how to Git, legacy code, why our profession is terrible at what we do, and why string identifiers are evil. +Git: atomic commits vs squashing The topic of how to use Git effectively is always on my mind. I&rsquo;m a Git pedant, so I have a pretty strong opinion on the subject. +As so often, it was a tweet from Jake Archibald that got me thinking. + + + + Vue.js Functional Base Components Powered by CSS Modules + https://markus.oberlehner.net/blog/vue-functional-base-components-powered-by-css-modules/ + Sun, 02 Feb 2020 08:29:29 +0200 + + https://markus.oberlehner.net/blog/vue-functional-base-components-powered-by-css-modules/ + In one of my earlier articles, I wrote about how to use functional Vue.js components so that they inherit attributes such as classes and styles. This way, functional components are perfect for creating simple base components. +In this article, we take a look at how we can simplify and generalize the process of creating new functional base components by automatically creating new Vue.js components from CSS files. +import makeCssModuleComponent from &#39;. + + + + Weekly Recap: Data Sanitizing and Reducing Complexity up the Tree + https://markus.oberlehner.net/blog/weekly-recap-data-sanitizing-and-reducing-complexity-up-the-tree/ + Sun, 26 Jan 2020 08:18:18 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-data-sanitizing-and-reducing-complexity-up-the-tree/ + Last week I had two insights: sanitizing data as early as possible can make it much easier to reason about your code. And reducing the complexity of your components, the deeper down they are in the component tree can lead to a cleaner architecture. +Sanitize (reactive) data as early as possible A few days ago, I got frustrated when I was working on some piece of code that needed to process a bunch of data from multiple sources. + + + + Weekly Recap: Single Parameter Object and Craftsmanship vs. Engineering + https://markus.oberlehner.net/blog/weekly-recap-single-parameter-object-and-craftsmanship-vs-engineering/ + Sun, 19 Jan 2020 07:33:33 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-single-parameter-object-and-craftsmanship-vs-engineering/ + The last week was, on the one hand, a busy week and, on the other hand, a slow week when it comes to learning new things. One topic that comes up again and again in my daily programming work is the handling of function parameters: Is it a good idea to always use a single object as the only parameter for functions? +Another recurring theme for me is what motivates me to code? + + + + Weekly Recap: Less Array.reduce(), SQL and JSON, Dunning-Kruger and Changing Your Mind + https://markus.oberlehner.net/blog/weekly-recap-less-reduce-sql-and-json-dunning-kruger-and-changing-your-mind/ + Sun, 12 Jan 2020 07:19:19 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-less-reduce-sql-and-json-dunning-kruger-and-changing-your-mind/ + Last week I discovered some things that made me question myself. Do I use Array.reduce() too much? Do I sometimes feel too competent in subjects about which I know little in reality? +Table of Contents Array.reduce() considered harmful? SQL and JSON with PostgreSQL Dunning-Kruger effect How to change your mind Array.reduce() considered harmful? I like to use Array.reduce() because I assume it makes my code look cleaner. Also, I have to admit that sometimes it makes me feel smart when writing my code. + + + + Weekly Recap: Playing with State Machines, Complexity and Best Practices + https://markus.oberlehner.net/blog/weekly-recap-playing-with-state-machines-complexity-and-best-practices/ + Sun, 05 Jan 2020 08:48:48 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-playing-with-state-machines-complexity-and-best-practices/ + The last couple of weeks, David Khourshid seemed to be everywhere. He appeared on both the Syntax FM and the Full Stack Radio podcast. And in both, he spoke about the advantages of state machines. I was interested in that, and I&rsquo;ve been playing around with the concept for the last two weeks. +Testing State Machine powered Vue.js components What interested me most about State Machines was the automated testing workflow they enable. + + + + Lazy Resolving Observable API Services with Vue.js + https://markus.oberlehner.net/blog/lazy-resolving-observable-api-services-with-vue/ + Sun, 29 Dec 2019 07:14:14 +0200 + + https://markus.oberlehner.net/blog/lazy-resolving-observable-api-services-with-vue/ + Although GraphQL is pretty cool and powerful, I also like the simplicity of good old REST API endpoints. Also, we often can&rsquo;t use GraphQL for everything because there is no GraphQL endpoint available. +In this article, we take a closer look at how we can replicate one of the core features of GraphQL, which makes it possible only to load what is absolutely necessary, in a classic REST API-based application. + + + + Weekly Recap: Simple is Complicated + https://markus.oberlehner.net/blog/weekly-recap-simple-is-complicated/ + Sun, 22 Dec 2019 07:25:25 +0200 + + https://markus.oberlehner.net/blog/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. +Make things flat It’s a mantra in programming that you should strive for simplicity. But often we have to solve complex problems and coming up with a simple solution isn’t always doable or seems to be utterly impossible. +One thing I discovered is that it can help to work with flat data structures. + + + + Weekly Recap: Tight Coupling + Complexity = Errors + https://markus.oberlehner.net/blog/weekly-recap-tight-coupling-plus-complexity-equals-errors/ + Sun, 15 Dec 2019 06:50:50 +0200 + + https://markus.oberlehner.net/blog/weekly-recap-tight-coupling-plus-complexity-equals-errors/ + This week I thought a lot about two topics: reducing complexity and structuring your codebase and naming things. +Complexity and error mitigation measures 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. The key message was that errors are inevitable if you have both tightly coupled and complex systems. + + + + Weekly Recap: TDD is dead + https://markus.oberlehner.net/blog/weekly-recap-tdd-is-dead/ + Sun, 08 Dec 2019 10:01:01 +0200 + + https://markus.oberlehner.net/blog/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&rsquo;s (old) article: TDD is dead. Long live testing. +TDD, Where Did It All Go Wrong Next, I watched a YouTube video of a talk named TDD, Where Did It All Go Wrong by Ian Cooper. His talk opened my eyes to what is the system under test. + + + + Vuex Data Model and Feature Module Strategy Part 2: Feature Modules + https://markus.oberlehner.net/blog/vuex-data-model-and-feature-module-strategy-feature-modules/ + Sun, 01 Dec 2019 05:28:28 +0200 + + https://markus.oberlehner.net/blog/vuex-data-model-and-feature-module-strategy-feature-modules/ + This is the second part of a series about the separation of Vuex Store modules into data model modules and feature modules. If you have not done so, you should read the first article before proceeding. +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. + + + + Vuex Data Model and Feature Module Strategy Part 1: The Data Model Module + https://markus.oberlehner.net/blog/vuex-data-model-and-feature-module-strategy-data-model-module/ + Sun, 24 Nov 2019 07:25:25 +0200 + + https://markus.oberlehner.net/blog/vuex-data-model-and-feature-module-strategy-data-model-module/ + A few days ago, I read this excellent article about building and maintaining large Vue.js projects by Nada Rifki. The one section I&rsquo;m most interested in is about organizing your Vuex store. I have experimented with both approaches she mentions in her article and also ended up mostly using data model modules. +The data model approach builds on the idea that you have a separate Vuex module for every data model of your application (e. + + + + Thoughts about Utility-First CSS Frameworks + https://markus.oberlehner.net/blog/thoughts-about-utility-first-css-frameworks/ + Sun, 17 Nov 2019 05:58:58 +0200 + + https://markus.oberlehner.net/blog/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. +In the following paragraphs, I write about my thoughts on this approach. But keep in mind that I only dipped a toe in the water. So take everything I write with a grain of salt. + + + + Reusable Functional Vue.js Components with Tailwind CSS + https://markus.oberlehner.net/blog/reusable-functional-vue-components-with-tailwind-css/ + Sun, 10 Nov 2019 05:01:01 +0200 + + https://markus.oberlehner.net/blog/reusable-functional-vue-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, for example. + + + + Setting up Tailwind CSS v2 with Vue.js + https://markus.oberlehner.net/blog/setting-up-tailwind-css-with-vue/ + Sun, 03 Nov 2019 06:38:38 +0200 + + https://markus.oberlehner.net/blog/setting-up-tailwind-css-with-vue/ + Tailwind CSS is one of the rising stars in the CSS framework world. It&rsquo;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. Because Tailwind CSS is a utility-first CSS framework which provides a lot of utility classes out of the box, its file size without any optimizations is pretty massive. But luckily, we can use PurgeCSS to improve the final bundle size of our application tremendously. + + + + Simple Solution to Prevent Body Scrolling on iOS + https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/ + Wed, 30 Oct 2019 16:06:06 +0200 + + https://markus.oberlehner.net/blog/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 &lt;body&gt; element on all devices, including iOS 12 and below (finally, this was fixed in iOS 13 🎉) is worth taking a closer look. +Usually, we can use overflow: hidden on the &lt;body&gt; element to prevent scrolling. + + + + Scrolling Shadows with Vue.js + https://markus.oberlehner.net/blog/scrolling-shadows-with-vue/ + Sun, 27 Oct 2019 07:44:44 +0200 + + https://markus.oberlehner.net/blog/scrolling-shadows-with-vue/ + 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. + + + + Popup Overlays with Vue Router and Portal Vue + https://markus.oberlehner.net/blog/popup-overlays-with-vue-router-and-portal-vue/ + Sun, 20 Oct 2019 05:42:42 +0200 + + https://markus.oberlehner.net/blog/popup-overlays-with-vue-router-and-portal-vue/ + If we like it or not, modal dialogs and overlays are a recurring pattern on many websites and apps. In this article, we take a look at how to implement popup overlays with Vue Router so that they have a URL. +We attach great importance to making our solution accessible so all of our users can use it without frustration. Also, we want to keep it simple but still create a reusable solution. + + + + Dynamic Vue.js CRUD Applications + https://markus.oberlehner.net/blog/dynamic-vue-crud-applications/ + Sun, 13 Oct 2019 06:37:37 +0200 + + https://markus.oberlehner.net/blog/dynamic-vue-crud-applications/ + Often it seems like we build the same applications again and again. And at least sometimes it feels like that because indeed we do. Again and again, we build the same CRUD applications with their generic list views, edit forms, and previews. +When I wrote my article about keeping the Vuex Store generic, I started thinking about how to generalize other parts of Vue.js applications as well. +Throughout this article, we examine how to create a generic and reusable structure for a traditional CRUD application. + + + + Decouple Vue.js components from the Vuex Store + https://markus.oberlehner.net/blog/decouple-vue-components-from-the-vuex-store/ + Sun, 06 Oct 2019 04:39:39 +0200 + + https://markus.oberlehner.net/blog/decouple-vue-components-from-the-vuex-store/ + One of the main concerns I have when building Vuex-based applications is the tight coupling of components with the Vuex store that seems inevitable when using Vuex. Ideally, I want to be able to switch the data layer of my application at any time without having to touch all my components that rely on data from an external resource. +Today we will explore how to add an abstraction that completely decouples our Vue. + + + + Dependency Injection in Vue.js with Functional Component Factories + https://markus.oberlehner.net/blog/dependency-injection-in-vue-with-functional-component-factories/ + Sun, 29 Sep 2019 09:08:08 +0200 + + https://markus.oberlehner.net/blog/dependency-injection-in-vue-with-functional-component-factories/ + If you are a regular reader of my blog, you may have noticed that many of my articles are about decoupling components from dependencies. Over the past few months, I have written a few articles on this subject. + Vue.js Single File Component Factory The IoC Container Pattern with Vue.js Dependency Injection in Vue.js Applications I regularly use variations of the approaches mentioned in these articles in my daily work. + + + + Generic Content Vuex Modules + https://markus.oberlehner.net/blog/generic-content-vuex-modules/ + Sun, 22 Sep 2019 06:32:32 +0200 + + https://markus.oberlehner.net/blog/generic-content-vuex-modules/ + In my last article, we examined the advantages of a flat Vuex state tree. Today we look at how we can design a system for quickly creating generic Vuex modules for typical CRUD content types. +Often when creating applications, rather sooner than later, we catch ourselves repeating the same boilerplate code over and over again because most of our content types are very similar at their core. +We have several forms for entering data for different content types, which are usually pretty much the same but have different fields. + + + + Make your Vuex State Flat: State Normalization with Vuex + https://markus.oberlehner.net/blog/make-your-vuex-state-flat-state-normalization-with-vuex/ + Sun, 15 Sep 2019 07:36:36 +0200 + + https://markus.oberlehner.net/blog/make-your-vuex-state-flat-state-normalization-with-vuex/ + Listening to one of Full Stack Radio&rsquo;s latest episodes, I was very impressed by the expertise of Matt Biilmann, CEO of Netlify. Adam Wathan and Matt talked a lot about how global state is handled in the Netlify web application. Although the Netlify app is built with React and Redux when he spoke of his philosophy for structuring the global state of the app, it motivated me to think a little more about this topic in the context of Vue. + + + + Controlling the LEGO Mindstorms NXT with Node.js Part 2: It's Moving + https://markus.oberlehner.net/blog/controlling-the-lego-mindstorms-nxt-with-nodejs-its-moving/ + Sun, 08 Sep 2019 08:22:22 +0200 + + https://markus.oberlehner.net/blog/controlling-the-lego-mindstorms-nxt-with-nodejs-its-moving/ + In the first part of this series we made sure that we can connect to our NXT and send commands via Node.js. Today, we&rsquo;re exploring how we can control the motors of our LEGO Mindstorms robot to make it move. +As it turns out, the nodejs-nxt package is quite simple and has no comfort features to make the robot run faster or slower, or maybe even help with curves and turns. + + + + Controlling the LEGO Mindstorms NXT with Node.js Part 1: It's Alive + https://markus.oberlehner.net/blog/controlling-the-lego-mindstorms-nxt-with-nodejs-its-alive/ + Sun, 01 Sep 2019 09:09:09 +0200 + + https://markus.oberlehner.net/blog/controlling-the-lego-mindstorms-nxt-with-nodejs-its-alive/ + For several years now, my LEGO Mindstorms NXT has been living a life as a decorative item on my desk. Since I wasn&rsquo;t in the mood to do real work today, I was wondering if it wouldn&rsquo;t be possible to use JavaScript to control it. After searching the web I found out that it is actually possible to do this. So let&rsquo;s have some fun. +This is the first article in a multi-part series. + + + + Vue.js Powered Data Model and Query Builder + https://markus.oberlehner.net/blog/vue-powered-data-model-and-query-builder/ + Sun, 25 Aug 2019 07:45:45 +0200 + + https://markus.oberlehner.net/blog/vue-powered-data-model-and-query-builder/ + I love the concept of reactive computed properties in Vue.js. So much so that I miss them in situations where I don&rsquo;t have them available. In this article, we explore how to create reactive data models with all the features of regular Vue.js components such as computed properties. Our goal is to fetch data from an API and store it in a reactive data model. +Reactive data models Most of the time, we tend to fetch data directly in our components and use computed properties if we need to process the received data. + + + + Separation of Concerns Re-Revisited + https://markus.oberlehner.net/blog/separation-of-concerns-re-revisited/ + Sun, 18 Aug 2019 10:47:47 +0200 + + https://markus.oberlehner.net/blog/separation-of-concerns-re-revisited/ + The more I read about React Hooks and the RFC for the Vue.js Composition API, the more I think about the early days of modern frontend frameworks like React and Vue.js. Basically, the development community was divided into two camps: the people who immediately embraced the new mental model of these modern front-end frameworks, and those who absolutely hated that they broke with the then prevalent understanding of separation of concerns. + + + + Vue.js Single File Component Factory + https://markus.oberlehner.net/blog/vue-single-file-component-factory/ + Sun, 11 Aug 2019 06:52:52 +0200 + + https://markus.oberlehner.net/blog/vue-single-file-component-factory/ + In my opinion, the best way to inject dependencies is via factory functions that take the dependencies as parameters. Unfortunately, it is not possible to export factory functions from Vue.js Single File Components. According to the specification, the default export should be a Vue.js component options object. +In this article, we examine a solution that makes it possible to overcome this limitation. If you want to see the full code of a working example of the approach described in this article, you can take a look at this GitHub repository. + + + + Implementing an Authentication Flow with Passport and Netlify Functions + https://markus.oberlehner.net/blog/implementing-an-authentication-flow-with-passport-and-netlify-functions/ + Sun, 04 Aug 2019 05:24:24 +0200 + + https://markus.oberlehner.net/blog/implementing-an-authentication-flow-with-passport-and-netlify-functions/ + A few weeks ago I started working on a small side project where it is a requirement to authenticate users. It was pretty clear to me that I didn&rsquo;t want to roll my own custom authentication flow, but I didn&rsquo;t want to go the cheap way and work with Netlify Identity either, because although I&rsquo;m sure it&rsquo;s great (like any Netlify service), I want to learn new things with my side projects. + + + + Accessible Custom Vue.js Select Component Part 2: Advanced + https://markus.oberlehner.net/blog/accessible-custom-vue-form-select-component-simple-but-advanced/ + Sun, 28 Jul 2019 06:35:35 +0200 + + https://markus.oberlehner.net/blog/accessible-custom-vue-form-select-component-simple-but-advanced/ + This is the second article in a two-part series on how to build accessible, custom form select components with Vue.js. You can read about the first technique, which is more of a concept, in my previous article. +Today, we will follow the W3C guidelines, on how to build a collapsible dropdown, very closely, to create a solid custom form select Vue.js component that works well for both keyboard and screen reader users as well as people who use a mouse or their finger to browse the web. + + + + Accessible Custom Vue.js Select Component Part 1: Simple but Experimental + https://markus.oberlehner.net/blog/accessible-custom-vue-form-select-component-simple-but-experimental/ + Sun, 21 Jul 2019 05:16:16 +0200 + + https://markus.oberlehner.net/blog/accessible-custom-vue-form-select-component-simple-but-experimental/ + Unfortunately, accessibility (a11y) is often treated as an afterthought by many of us developers, including myself. For me, there are two reasons why I often don&rsquo;t treat a11y as a priority: approaching deadlines and lack of knowledge. +In the last two weeks I&rsquo;ve taken the time to build a simple but in my opinion also quite nifty custom Multi-Select Vue.js component with the goal of making it work very well for keyboard and screen reader users. + + + + Building Vue.js UI Components With HTML Semantics in Mind + https://markus.oberlehner.net/blog/building-vue-ui-components-with-html-semantics-in-mind/ + Sun, 14 Jul 2019 05:09:09 +0200 + + https://markus.oberlehner.net/blog/building-vue-ui-components-with-html-semantics-in-mind/ + When building modern, component-based client-side applications, we often tend to forget about the foundations of web development: HTML and CSS. Sometimes we act as if the rules of writing semantic HTML are somehow no longer relevant. But the opposite is true. More and more people use web applications every day, and the reasons why we should strive to write semantic and accessible HTML are at least as valid today as they were in the past. + + + + Working With Functional Vue.js Components + https://markus.oberlehner.net/blog/working-with-functional-vue-components/ + Sun, 07 Jul 2019 06:25:25 +0200 + + https://markus.oberlehner.net/blog/working-with-functional-vue-components/ + On my journey to find ways to improve the rendering performance of large scale Vue.js applications, I stumble upon functional components as a possible solution from time to time. But so far, I&rsquo;ve always found one or two reasons why I can&rsquo;t use them in my application. +Table of Contents Special characteristics Attributes and event listeners Classes, styles and refs Benchmarks Special characteristics of functional components Functional components have some restrictions that cause them to behave differently than other components. + + + + Multi Export Vue.js Single File Components With Proxy Exports + https://markus.oberlehner.net/blog/multi-export-vue-single-file-components-with-proxy-exports/ + Sun, 30 Jun 2019 06:17:17 +0200 + + https://markus.oberlehner.net/blog/multi-export-vue-single-file-components-with-proxy-exports/ + In one of my previous articles, we examined how we can use JSX in Vue.js to export multiple Vue.js components from a single Single File Component (SFC) .vue file. Just recently I found an even easier solution to this problem. +Although it can be handy to use JSX for simple UI components, as I described in my article, there are some drawbacks to this approach. First, JSX doesn&rsquo;t feel very natural in a Vue. + + + + Styling HTML Tables: How to Apply Margin, Border and z-index on Table Elements + https://markus.oberlehner.net/blog/styling-html-tables-how-to-apply-margins-borders-and-z-index-on-table-elements/ + Sun, 23 Jun 2019 06:49:49 +0200 + + https://markus.oberlehner.net/blog/styling-html-tables-how-to-apply-margins-borders-and-z-index-on-table-elements/ + A long time ago, there was practically no way around the HTML &lt;table&gt; element for creating complex layouts on the web. Fortunately, those days are long gone. Nowadays, we only use the &lt;table&gt; element as it should be used: to display tabular data. However, only recently, I was reminded again that styling tables is not as easy as one might think. +Unfortunately, some CSS properties (e.g. margin, border-radius, and z-index) do not work on certain HTML table elements like &lt;tbody&gt;, &lt;thead&gt;, and &lt;tr&gt;. + + + + Use Fragments to Avoid Obsolete GraphQL Fields in Vue.js Applications + https://markus.oberlehner.net/blog/use-fragments-to-avoid-obsolete-graphql-fields-in-vue-applications/ + Sun, 16 Jun 2019 06:41:41 +0200 + + https://markus.oberlehner.net/blog/use-fragments-to-avoid-obsolete-graphql-fields-in-vue-applications/ + The more I use GraphQl, the more I ask myself the following question: How can I avoid GraphQL queries which query a bunch of fields that were once needed but are no longer used because the code has changed and the fields are now obsolete? +The problem Let&rsquo;s take look at the following application structure. The snippet shows a component tree of a typical Vue.js application: a base component that has several levels deep of child components. + + + + Build Decoupled Vue.js Applications with Hooks + https://markus.oberlehner.net/blog/build-decoupled-vue-applications-with-hooks/ + Sun, 09 Jun 2019 06:42:42 +0200 + + https://markus.oberlehner.net/blog/build-decoupled-vue-applications-with-hooks/ + Recently, I was wondering how best to decouple the code needed to track certain form submissions (e.g. conversion tracking in Google Analytics or Matomo) from the business logic of the forms. +Hooks are often used to solve these types of problems. Using hooks makes it possible to decouple our components responsible for handling business logic from the purely optional tracking logic, which we can then keep in one place instead of scattering across all our components. + + + + Observable REST API with Vue.js + https://markus.oberlehner.net/blog/observable-rest-api-with-vue/ + Sun, 02 Jun 2019 06:24:24 +0200 + + https://markus.oberlehner.net/blog/observable-rest-api-with-vue/ + Just recently, I discovered a rather new feature in Vue.js (since 2.6.0+): Vue.observable(). Vue.observable() is used internally in Vue.js to make the object returned by the data() function of a component reactive. +In this article, we take a look at how we can use this new feature to build a straightforward reactive polling system for a regular REST API. +REST API utility function with polling Let&rsquo;s jump right in. In the following example you can see a simple implementation of a withPolling() wrapper function which takes a callback function and an interval as parameters. + + + + Implementing the Builder Pattern in Vue.js Part 2: Forms + https://markus.oberlehner.net/blog/implementing-the-builder-pattern-in-vue-forms/ + Sun, 26 May 2019 07:02:02 +0200 + + https://markus.oberlehner.net/blog/implementing-the-builder-pattern-in-vue-forms/ + In the last article in this two-part series about implementing the Builder Pattern in Vue.js, we saw how we can use this technique to quickly create slightly different variants of the same component. Another area in which it is very typical to have fairly similar components over and over again are forms in a CRUD application with many different content types. In this article, we&rsquo;ll take a look at how we can use the Builder Pattern to make it very easy to create many different form components for each content type of a typical CRUD application. + + + + Implementing the Builder Pattern in Vue.js Part 1: Listings + https://markus.oberlehner.net/blog/implementing-the-builder-pattern-in-vue-listings/ + Sun, 19 May 2019 06:07:07 +0200 + + https://markus.oberlehner.net/blog/implementing-the-builder-pattern-in-vue-listings/ + Recently I&rsquo;ve seen a great talk by Jacob Schatz about Phenomenal Design Patterns in Vue. One of the patterns he mentioned in his talk was the Builder Pattern. I found his example very interesting, so it was clear to me that I had to experiment with this pattern myself. +In this article, we take a look at a possible implementation of the Builder Pattern that is custom tailored to how I typically structure my Vue. + + + + The IoC Container Pattern with Vue.js + https://markus.oberlehner.net/blog/the-ioc-container-pattern-with-vue/ + Sun, 05 May 2019 08:45:45 +0200 + + https://markus.oberlehner.net/blog/the-ioc-container-pattern-with-vue/ + In this article, we experiment with implementing the IoC container pattern in Vue.js. The IoC container pattern is prevalent in other languages and frameworks, but not so much in the JavaScript world – we also take a look at why that might be so. The implementation we build is inspired by the IoC container solution in Laravel. +In the first step, we build a rather simple service container, which imports all the services of our application in one place. + + + + try...catch: The Right Way + https://markus.oberlehner.net/blog/try-catch-the-right-way/ + Sun, 28 Apr 2019 06:05:05 +0200 + + https://markus.oberlehner.net/blog/try-catch-the-right-way/ + Because of a recent bug hunting session where it took me a couple of hours to drill down several levels of npm dependencies in order to finally find a try...catch statement with the catch part being empty, I decided to write an article about this topic. Although, I have to admit, my first instinct was to be angry at the developer who did this, I figured taking a closer look at how to properly deal with exceptions in Node. + + + + Dependency Injection in Vue.js Applications + https://markus.oberlehner.net/blog/dependency-injection-in-vue-applications/ + Sun, 21 Apr 2019 06:23:23 +0200 + + https://markus.oberlehner.net/blog/dependency-injection-in-vue-applications/ + I often wonder how to decouple certain parts of an application best. At first, this seems pretty straightforward in the context of Vue.js applications. You have components and components pass down properties and emit events; that&rsquo;s it. Right? Yeah, kind of. But also kind of not. Soon there will be the need to access global state or retrieve data from an external resource via an API. If we don&rsquo;t be careful how we tackle these challenges, there will be the time when we realize that our components, which we planned to be nicely decoupled, use many external dependencies and are anything but decoupled. + + + + Distributed Vue.js Applications Part 2: Pushing Content and Component Updates to the Client + https://markus.oberlehner.net/blog/distributed-vue-applications-pushing-content-and-component-updates-to-the-client/ + Sun, 14 Apr 2019 10:38:38 +0200 + + https://markus.oberlehner.net/blog/distributed-vue-applications-pushing-content-and-component-updates-to-the-client/ + In the first part of this series, we’ve seen how we can build standalone Vue.js components and how we can load them via HTTP to make it possible to share them via a central distribution server. In this article, we explore how we can leverage the power of WebSockets to push content and even component updates to lean Vue.js client applications. + Content and Vue.js component distribution architecture The final result is a simple news feed application that demonstrates the basic principles of this approach. + + + + Distributed Vue.js Applications Part 1: Loading Components via HTTP + https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/ + Sun, 07 Apr 2019 07:34:34 +0200 + + https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/ + Imagine the following scenario: We have a central content distribution server responsible for pushing new content (think of news articles, for example) to a variety of Vue.js-based client applications. But we not only want to push new content but also describe the shape of the content via Vue.js components. One possibility would be to share those Vue.js components as npm packages. Still, that way, every client application must be updated whenever a new version or a completely new component is released. + + + + Using Docker to Run Visual Regression Tests with Jest and Puppeteer + https://markus.oberlehner.net/blog/using-docker-to-run-visual-regression-tests-with-jest-and-puppeteer/ + Sun, 31 Mar 2019 06:35:35 +0200 + + https://markus.oberlehner.net/blog/using-docker-to-run-visual-regression-tests-with-jest-and-puppeteer/ + This is a follow-up to my last article about about how to create Visual Regression Tests with Jest and Puppeteer for Vue.js applications. Today we&rsquo;ll explore how we can use Docker to run our tests in a standardized environment in order to prevent false positives because of differences between operating systems. For a detailed explanation of how to set up Jest and Puppeteer please take a look at the previous article. + + + + Vue.js Error Handling with Renderless Components + https://markus.oberlehner.net/blog/vue-error-handling-with-renderless-components/ + Sun, 24 Mar 2019 05:24:24 +0200 + + https://markus.oberlehner.net/blog/vue-error-handling-with-renderless-components/ + Reliable error handling is one of those things which can make the difference between a good application and a great application. In today&rsquo;s article we take a look at how we can build renderless components to help us capture errors in our Vue.js applications. We build a generic error handling component which we can use to wrap other components to catch errors and notify the user that something went wrong. + + + + Visual Regression Tests for Vue.Js Applications with Jest and Puppeteer + https://markus.oberlehner.net/blog/visual-regression-tests-for-vue-applications-with-jest-and-puppeteer/ + Sun, 17 Mar 2019 06:08:08 +0200 + + https://markus.oberlehner.net/blog/visual-regression-tests-for-vue-applications-with-jest-and-puppeteer/ + Note: This is the seventh part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there&rsquo;s more to come! Follow me on Twitter if you don&rsquo;t want to miss the next article. +&lt;&lt; First &lt; Previous + Assuming that we already have integration tests and unit tests in place, it’s time to take a look at how we can build our next line of defense against unwanted regressions in our app. + + + + Renderless Vue.js Lifecycle Hook Components + https://markus.oberlehner.net/blog/renderless-vue-lifecycle-hook-components/ + Sun, 10 Mar 2019 06:14:14 +0200 + + https://markus.oberlehner.net/blog/renderless-vue-lifecycle-hook-components/ + Note: This is the third part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there&rsquo;s more to come! Follow me on Twitter if you don&rsquo;t want to miss the next article. +&lt;&lt; First &lt; Previous Next &gt; + Today we’ll take a look at how we can build renderless Vue.js components which make it possible to react to lifecycle hooks and route changes directly in the template section of a component. + + + + Integration Testing Vue.js Components With Jest and Puppeteer + https://markus.oberlehner.net/blog/integration-testing-vue-components-with-jest-and-puppeteer/ + Sun, 03 Mar 2019 05:57:57 +0200 + + https://markus.oberlehner.net/blog/integration-testing-vue-components-with-jest-and-puppeteer/ + Note: This is the sixth part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there&rsquo;s more to come! Follow me on Twitter if you don&rsquo;t want to miss the next article. +&lt;&lt; First &lt; Previous Next &gt; + This is a followup article of my previous article about Integration Testing Vue.js applications with Cypress. In this article, we test the same application but, instead of using Cypress, we want to use the combined forces of Jest and Puppeteer. + + + + Integration Testing Vue.js Container Components With Cypress + https://markus.oberlehner.net/blog/integration-testing-vue-container-components-with-cypress/ + Sun, 24 Feb 2019 06:11:11 +0200 + + https://markus.oberlehner.net/blog/integration-testing-vue-container-components-with-cypress/ + Note: This is the fifth part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there&rsquo;s more to come! Follow me on Twitter if you don&rsquo;t want to miss the next article. +&lt;&lt; First &lt; Previous Next &gt; + In my previous article about Advanced Component Composition, we wrote Unit Tests for all of our Vue.js components except the Container Components. + + + + Container Components in Vue.js: Advanced Component Composition + https://markus.oberlehner.net/blog/advanced-vue-component-composition-with-container-components/ + Sun, 17 Feb 2019 11:20:20 +0200 + + https://markus.oberlehner.net/blog/advanced-vue-component-composition-with-container-components/ + Note: This is the fourth part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there&rsquo;s more to come! Follow me on Twitter if you don&rsquo;t want to miss the next article. +&lt;&lt; First &lt; Previous Next &gt; + When building large scale applications where it is a top priority to achieve high test coverage, you are often faced with the problem that it becomes complicated to test some of the components of the application. + + + + Reusing Logic With Renderless Vue.js Frame Components + https://markus.oberlehner.net/blog/reusing-logic-with-renderless-vue-frame-components/ + Sun, 10 Feb 2019 06:18:18 +0200 + + https://markus.oberlehner.net/blog/reusing-logic-with-renderless-vue-frame-components/ + Note: This is the second part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there&rsquo;s more to come! Follow me on Twitter if you don&rsquo;t want to miss the next article. +&lt; Previous Next &gt; + Reusing logic and keeping your codebase DRY should be one of your top priorities. In a Vue.js application, components are the primary means of code reuse. + + + + Multi Export Vue.js Single File UI Components + https://markus.oberlehner.net/blog/multi-export-vue-single-file-ui-components/ + Sun, 03 Feb 2019 04:42:42 +0200 + + https://markus.oberlehner.net/blog/multi-export-vue-single-file-ui-components/ + Note: This is the first part of my “Advanced Vue.js Application Architecture” series on how to structure and test large scale Vue.js applications. Stay tuned, there&rsquo;s more to come! Follow me on Twitter if you don&rsquo;t want to miss any new article. +Next &gt; + In today&rsquo;s article we&rsquo;ll learn how to build Vue.js Single File Components (SFC) which export multiple components at once using ES6 named exports. Furthermore we&rsquo;ll utilize render functions to render the markup of our components via JSX. + + + + Magic Numbers in CSS: How to Identify and Fight Them + https://markus.oberlehner.net/blog/magic-numbers-in-css-how-to-identify-and-fight-them/ + Sun, 27 Jan 2019 05:36:36 +0200 + + https://markus.oberlehner.net/blog/magic-numbers-in-css-how-to-identify-and-fight-them/ + Recently I started thinking about magic numbers. Until this point I haven&rsquo;t given much thought to what the term “magic number“ actually means in the context of CSS. I thought about it as basically all numbers in my CSS. The logical solution was to use variables for everything. +But having read some articles on this topic and after further thinking about it, I realised that not every number in your CSS code is inevitably a magic one. + + + + How to Use GraphQL with Vue Apollo Components and Netlify Functions + https://markus.oberlehner.net/blog/how-to-use-graphql-with-vue-apollo-components-and-netlify-functions/ + Sun, 20 Jan 2019 04:56:56 +0200 + + https://markus.oberlehner.net/blog/how-to-use-graphql-with-vue-apollo-components-and-netlify-functions/ + Although I&rsquo;ve already experimented a little bit with GraphQL, especially how to integrate GraphQL in a Vuex powered application, I never took the time to delve into the details. +In today&rsquo;s article we&rsquo;ll build a simple example application using Apollo Components which basically are renderless components (although they do render a wrapper &lt;div&gt;) for querying a GraphQL backend. Furthermore we’ll set up Netlify Functions to run our GraphQL endpoint. + + + + How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications + https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/ + Sun, 13 Jan 2019 06:10:10 +0200 + + https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/ + Performance is a huge topic in the web dev world. Furthermore, performance is especially a huge topic in the context of SPAs. Ironically, performance is frequently stated as one of the biggest benefits and also as one of the most pressing concerns when it comes to this architectural pattern. While subsequent page views are typically very fast with client-side rendered applications, the initial page load can require to load (and even more importantly: to parse) a few megabytes (! + + + + Building a Renderless reCAPTCHA v3 Form Component with Vue.js + https://markus.oberlehner.net/blog/building-a-renderless-recaptcha-v3-form-component-with-vue/ + Sun, 06 Jan 2019 07:04:04 +0200 + + https://markus.oberlehner.net/blog/building-a-renderless-recaptcha-v3-form-component-with-vue/ + The modern frontend stack is all about reusable components. The renderless component pattern is one of the most elegant ways of how to build highly reusable components. Today we&rsquo;ll build a renderless component for handling form submission, loading and error logic in a generic and reusable way. Additionally we&rsquo;ll take a look at how we can use the new reCAPTCHA v3 to secure our form from spam submissions. + Generic error and success handling You can take a look at the full code at GitHub and you can try out the demo hosted on Netlify. + + + + Lazy Load Vue.js Components When They Become Visible + https://markus.oberlehner.net/blog/lazy-load-vue-components-when-they-become-visible/ + Sun, 30 Dec 2018 06:59:59 +0200 + + https://markus.oberlehner.net/blog/lazy-load-vue-components-when-they-become-visible/ + Over the last couple of years as a web developer, I&rsquo;ve seen the same pattern over and over again: the homepage becomes a political issue within a company because every department wants to present itself and, of course, every department considers itself the most important. Usually, two things happen: a slider is added at the top of the page so that each department can get its slide at the very top, and more and more stuff is added to the homepage because: everything is important. + + + + Using the Google Maps API with Vue.js + https://markus.oberlehner.net/blog/using-the-google-maps-api-with-vue/ + Sun, 23 Dec 2018 06:29:29 +0200 + + https://markus.oberlehner.net/blog/using-the-google-maps-api-with-vue/ + In today&rsquo;s article, we take a look at how we can use the Google Maps API in combination with Vue.js. We build a simple Vue.js component, which renders a Google Map. Furthermore, we learn how to listen for click events on markers and how we can cluster multiple markers in close distance to each other. +You can take a look at the complete source code on GitHub, or you can check out the demo application hosted on Netlify. + + + + abomination: a Concept for a Static HTML / Dynamic JavaScript Hybrid Application + https://markus.oberlehner.net/blog/abomination-a-concept-for-a-static-html-dynamic-javascript-hybrid-application/ + Sun, 16 Dec 2018 08:43:43 +0200 + + https://markus.oberlehner.net/blog/abomination-a-concept-for-a-static-html-dynamic-javascript-hybrid-application/ + UPDATE: Since writing this article, I have created a new npm package that allows you to use the technique described in the article in a clean way. You can read more about it in my article about how to drastically reduce estimated input latency. +Static site generators are on the rise. To be more specific: static site generators like Gatsby.js (React) and VuePress (Vue.js) which are based on modern frontend frameworks are becoming more and more popular. + + + + Variables in Design Systems + https://markus.oberlehner.net/blog/variables-in-design-systems/ + Sun, 09 Dec 2018 06:13:13 +0200 + + https://markus.oberlehner.net/blog/variables-in-design-systems/ + Recently, I&rsquo;ve been thinking a lot about variables in (Sass based) design systems. My approach with avalanche, and more recently with the design system we&rsquo;re building at work, always was to use variables for everything from spacings to colors and things like border radius for example. The rule is, that there are no colors or spacings, like margins and paddings, that do not use a variable value. +It has became kind of a dogma. + + + + Using the Wrapper Factory Pattern for Vue.js Unit Testing + https://markus.oberlehner.net/blog/using-the-wrapper-factory-pattern-for-vue-unit-testing/ + Sun, 02 Dec 2018 06:04:04 +0200 + + https://markus.oberlehner.net/blog/using-the-wrapper-factory-pattern-for-vue-unit-testing/ + If you test Vue.js Components with a certain complexity, oftentimes you&rsquo;ll be faced with the situation of repeating the same component initialization code again and again. There are multiple patterns to deal with situations like that but today we&rsquo;ll take a look at how we can solve this problem by using a wrapper factory function. +The problem First of all, let me show you the problem before we examine a possible solution. + + + + Building a Parallax Scrolling Effect Component with Vue.js + https://markus.oberlehner.net/blog/building-a-parallax-scrolling-effect-component-with-vue/ + Sun, 25 Nov 2018 08:54:54 +0200 + + https://markus.oberlehner.net/blog/building-a-parallax-scrolling-effect-component-with-vue/ + In this article, we explore how to build a Vue.js component for handling parallax scrolling. And how to structure the components in a way, which makes them very flexible and highly reusable. + The final result You can take a look at a live demo of the final result hosted on Netlify, and you can check out the code on GitHub. +The parallax scrolling wrapper component Let&rsquo;s start with building a wrapper component for handling all the calculations necessary for the parallax effect. + + + + Building a Static Site with Storyblok and Gridsome + https://markus.oberlehner.net/blog/building-a-static-site-with-storyblok-and-gridsome/ + Sun, 18 Nov 2018 06:24:24 +0200 + + https://markus.oberlehner.net/blog/building-a-static-site-with-storyblok-and-gridsome/ + Gridsome is a relatively new static site generator based on Vue.js. It&rsquo;s similar to Gatsby.js but powered by Vue instead of React. In today&rsquo;s article we&rsquo;ll take a closer look at Gridsome and how it compares to the well established Nuxt.js framework. +We will integrate the headless CMS Storyblok as a datasource for Gridsome an we&rsquo;ll build a simple site to demonstrate the capabilities of those systems. +For this article, I&rsquo;ll assume that you have some basic knowledge about how to build websites with Storyblok. + + + + Building a Simple Content Slider with Vue.js + https://markus.oberlehner.net/blog/building-a-simple-content-slider-with-vue/ + Sun, 11 Nov 2018 06:24:24 +0200 + + https://markus.oberlehner.net/blog/building-a-simple-content-slider-with-vue/ + Today we&rsquo;ll take a look at how we can build a simple content slider with Vue.js. We&rsquo;ll use the renderless component technique to create a reusable component which we then use to build multiple versions of a content slider. Thanks to the flexibility of the renderless component pattern, we&rsquo;ll be able to use one and the same component to power a simple content slider, a component for tabbed content and an image slider component. + + + + Skeleton Loading Animation with Vue.js + https://markus.oberlehner.net/blog/skeleton-loading-animation-with-vue/ + Sun, 04 Nov 2018 05:32:32 +0200 + + https://markus.oberlehner.net/blog/skeleton-loading-animation-with-vue/ + Although there is some debate as to whether skeleton loading screens do enhance the perceived performance or not, there seems to be some evidence that they do work if they are done right. So today, we take a look at how we can implement the skeleton loading animation pattern with Vue.js. + The final result of our work: a skeleton loading screen with a shimmer animation The baseline Let&rsquo;s take a look at our example application which we want to improve with a loading animation. + + + + Using Location Data with Vue.js and Open Street Map + https://markus.oberlehner.net/blog/using-location-data-with-vue-and-open-street-map/ + Sun, 28 Oct 2018 06:28:28 +0200 + + https://markus.oberlehner.net/blog/using-location-data-with-vue-and-open-street-map/ + Today we&rsquo;ll explore how we can use the native browser geolocation API and the Open Street Map API to handle location data in a Vue.js applications. In our example app the users can press a button to automatically enter their address data into a form by allowing the geolocation API to access their current location. +You can find a live demo of the application on Netlify and you can take a look at the code on GitHub. + + + + Creating PDF Invoices with Airtable, Vue.js and Puppeteer + https://markus.oberlehner.net/blog/creating-pdf-invoices-with-airtable-vue-and-puppeteer/ + Sun, 21 Oct 2018 06:41:41 +0200 + + https://markus.oberlehner.net/blog/creating-pdf-invoices-with-airtable-vue-and-puppeteer/ + I recently started freelancing. After doing my thing, building great web stuff (of course), there also is much extra work that I am not so experienced with: time tracking, bookkeeping, and accounting, to name a few. Recently I had to send my first invoice, and because the invoice has to not only list all the line items in a boring way, but also look on point, my business partner, who is a great designer, decided to do it in InDesign. + + + + Poor Man's Container Queries: Hide Content Based on the Width of Its Container + https://markus.oberlehner.net/blog/poor-mans-container-queries-hide-content-based-on-the-width-of-its-container/ + Sun, 14 Oct 2018 06:45:45 +0200 + + https://markus.oberlehner.net/blog/poor-mans-container-queries-hide-content-based-on-the-width-of-its-container/ + The more we think about websites as collections of separate components (or atoms, molecules and organisms, to use the terms of the popular Atomic Design methodology), the more clear it becomes, that Media Queries are not the best solution for building truly responsive websites and applications. +I&rsquo;ve already written about how to build responsive layouts without relying on Media Queries in this article we&rsquo;ve explored how to change the layout of a component based on the available space. + + + + Thoughts About Design Systems and Naming Things + https://markus.oberlehner.net/blog/thoughts-about-design-systems-and-naming-things/ + Sun, 07 Oct 2018 06:42:42 +0200 + + https://markus.oberlehner.net/blog/thoughts-about-design-systems-and-naming-things/ + In the last couple of days I started thinking about how to name certain things in design systems. Naming things is one of those exercises which seem to just don&rsquo;t get easier, even after years of working on all sorts of design systems and CSS frameworks. + There are only two hard things in Computer Science: cache invalidation and naming things. + – Phil Karlton +It&rsquo;s a well-known saying in the programming world: naming things is hard. + + + + How the BEM CSS Naming Scheme Can Improve Vue.js Component Architecture + https://markus.oberlehner.net/blog/how-the-bem-css-naming-scheme-can-improve-vue-component-architecture/ + Sun, 30 Sep 2018 12:21:21 +0200 + + https://markus.oberlehner.net/blog/how-the-bem-css-naming-scheme-can-improve-vue-component-architecture/ + In today&rsquo;s quick tip we&rsquo;ll take a look at how the BEM CSS naming scheme can be quite useful to detect when it might be better to split up a large component into multiple smaller ones. +Let&rsquo;s say you have a component for displaying a list of the latest articles of your blog in a grid layout. +&lt;template&gt; &lt;div class=&#34;LatestArticles&#34;&gt; &lt;h2 class=&#34;LatestArticles__headline&#34;&gt; Latest articles &lt;/h2&gt; &lt;ul v-for=&#34;article in articles&#34; :key=&#34;article. + + + + Implementing a GDPR Consent Workflow with Vue.js + https://markus.oberlehner.net/blog/implementing-a-gdpr-consent-workflow-with-vue/ + Sun, 23 Sep 2018 08:56:56 +0200 + + https://markus.oberlehner.net/blog/implementing-a-gdpr-consent-workflow-with-vue/ + Love it or hate it, GDPR compliance is now a requirement if you want to collect data from EU citizens. Today we take a look at how we can use the concept of renderless components to implement a basic GDPR consent workflow. + GDPR modal form built with Vue.js Additionally to the concept of renderless components, we use Portal Vue to display a modal dialog. +If you’re curious about the final result, you can take a look at the full code at GitHub or a demo application hosted on Netlify. + + + + Using Cloudinary and Storyblok to Handle Assets for a Vue.js Application + https://markus.oberlehner.net/blog/using-cloudinary-and-storyblok-to-handle-assets-for-a-vue-application/ + Fri, 14 Sep 2018 06:51:51 +0200 + + https://markus.oberlehner.net/blog/using-cloudinary-and-storyblok-to-handle-assets-for-a-vue-application/ + In one of my recent articles, we took a closer look at how to build websites with the Headless CMS Storyblok and Vue.js. In this article we‘ll learn how we can combine the awesome digital asset management platform Cloudinary with the power of Storyblok to automatically handle image optimazation for us. We‘ll also explore how we can use the additional data, like the dominant color or the aspect ratio of an image, provided by the Storyblok Cloudinary Assets plugin, to implement enhanced image lazy loading. + + + + Creating a Responsive Alternating Two Column Layout with Flexbox + https://markus.oberlehner.net/blog/creating-a-responsive-alternating-two-column-layout-with-flexbox/ + Sun, 09 Sep 2018 06:05:05 +0200 + + https://markus.oberlehner.net/blog/creating-a-responsive-alternating-two-column-layout-with-flexbox/ + Last week a Tweet by Benjamin De Cock about how to achieve a two-column layout with CSS Grid popped up in my timeline. +Quick example of an alternating two column layout made with CSS Grid: pic.twitter.com/IwQFyiyh6l +&mdash; Benjamin De Cock (@bdc) 4. September 2018 +This reminded me of my journey of creating a two-column layout featuring the image left / text right, text right/image left pattern, I&rsquo;ve gone through very recently. + + + + Using Docker to run BackstopJS Powered Visual Regression Tests + https://markus.oberlehner.net/blog/using-docker-to-run-backstopjs-powered-visual-regression-tests/ + Sun, 02 Sep 2018 06:11:11 +0200 + + https://markus.oberlehner.net/blog/using-docker-to-run-backstopjs-powered-visual-regression-tests/ + My very own CSS framework avalanche, uses BackstopJS for regression testing. Unfortunately, for the most time, this didn&rsquo;t work as expected on my continuous integration service of choice: Travis CI. The rendering of fonts is slightly different on the Linux image which is used on Travis CI compared to macOS which I use for development on my end. This prevents visual regression tests from being useful in this configuration, because, the reference images, taken on my macOS machine, do not match the comparison images on Travis CI. + + + + Implementing a Simple Middleware with Vue Router + https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/ + Sun, 26 Aug 2018 05:31:31 +0200 + + https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/ + The concept of Middleware in frameworks like Laravel makes it fairly easy to do things like requiring an authenticated user for specific routes. Today we explore how we can implement a similar concept in the Vue.js world using the Vue Router. +If you want to see the Middleware powered application in action, you can view a demo hosted on Netlify, and you can check out the full code on GitHub. + + + + Building a Simple Ken Burns Slider with Vue.js + https://markus.oberlehner.net/blog/building-a-simple-ken-burns-slider-with-vue/ + Sun, 19 Aug 2018 05:08:08 +0200 + + https://markus.oberlehner.net/blog/building-a-simple-ken-burns-slider-with-vue/ + Clients love them; most web developers hate them: sliders with fancy transition effects. Today we’ll build a straightforward implementation of an image slider featuring the famous Ken Burns transition effect (named after the American filmmaker Kenneth Lauren Burns). + Vue.js powered slider with Ken Burns transition effect You can find a demo of the final result of our work hosted on Netlify, and you can check out all the code necessary to run the demo on GitHub. + + + + Automatic SPA FTP Deploys with CircleCI + https://markus.oberlehner.net/blog/automatic-spa-ftp-deploys-with-circleci/ + Sun, 12 Aug 2018 06:00:00 +0200 + + https://markus.oberlehner.net/blog/automatic-spa-ftp-deploys-with-circleci/ + Most of my articles are about the latest and greatest tools and technologies out there. One of the nice things about writing blog articles is that you can devote yourself fully to exploring new technologies. There is no client dictating the specifications, and there is no legacy code and technologies you need to consider, so you can freely choose any new and shiny technology you want. +The reality, however, is different. + + + + Building a Serverless Comment System with Netlify Functions, Storyblok and Vue.js + https://markus.oberlehner.net/blog/building-a-serverless-comment-system-with-netlify-functions-storyblok-and-vue/ + Sun, 05 Aug 2018 06:30:30 +0200 + + https://markus.oberlehner.net/blog/building-a-serverless-comment-system-with-netlify-functions-storyblok-and-vue/ + For a long time, I was able to abstain, but now the time has come: I&rsquo;m jumping on the Serverless hype train. Today we build a Serverless comment system powered by Netlify Functions, and we use the headless CMS Storyblok as a database (on steroids) to store the comments entered by our users. Furthermore, we use Vue.js to build the frontend of our application. Because we want to make sure that only humans are allowed to add new comments, we use the latest reCAPTCHA v3 beta to get a score of the likelihood that a comment was entered not by a human but a bot. + + + + Vue.js Responsive Image Lazy Loading + https://markus.oberlehner.net/blog/lazy-loading-responsive-images-with-vue/ + Sun, 29 Jul 2018 06:30:30 +0200 + + https://markus.oberlehner.net/blog/lazy-loading-responsive-images-with-vue/ + In today&rsquo;s article, we take a closer look at how we can build our own custom lazy loading image component with Vue.js. We use the fast and lightweight Lozad.js package for handling the lazy loading logic for us, and we&rsquo;ll enhance it with the ability to display the dominant color of the image as a fallback color, which is shown while the original image is loading. Additionally, the lazy loading component handles maintaining the correct aspect ratio while a placeholder rectangle is shown. + + + + Building a Website with Vue.js, the Storyblok Visual Editor and Netlify + https://markus.oberlehner.net/blog/building-a-website-with-vue-the-storyblok-visual-editor-and-netlify/ + Sun, 22 Jul 2018 06:06:06 +0200 + + https://markus.oberlehner.net/blog/building-a-website-with-vue-the-storyblok-visual-editor-and-netlify/ + In some of my recent articles I wrote about how to build websites with a headless CMS backend and a Vue.js frontend. We explored the topic of pre-rendering with Vue.js and Nuxt.js. My headless CMS of choice for my last two articles was Storyblok, which is one of the most feature packed headless content management systems out there. But up until now I completely neglected one of the core features of Storyblok, which sets it apart from most competitors: the Visual Editor. + + + + Building a Custom Storyblok Field Type Plugin With Vue.js + https://markus.oberlehner.net/blog/building-a-custom-storyblok-field-type-plugin-with-vue/ + Sun, 15 Jul 2018 06:41:41 +0200 + + https://markus.oberlehner.net/blog/building-a-custom-storyblok-field-type-plugin-with-vue/ + I&rsquo;m currently invested in exploring the world of headless content management systems and how to use modern web frameworks – like Vue.js – to build applications and websites on top of them. One of my favorite headless CMS so far is Storyblok, especially because it makes it possible to roll your own field type plugins with Vue.js. +In my recent article I wrote about how to build a simple website with Storyblok. + + + + Building a Pre-Rendered Website With Nuxt.js and Storyblok + https://markus.oberlehner.net/blog/building-a-pre-rendered-website-with-nuxt-and-storyblok/ + Sun, 08 Jul 2018 07:03:03 +0200 + + https://markus.oberlehner.net/blog/building-a-pre-rendered-website-with-nuxt-and-storyblok/ + In recent weeks I played around with a ton of headless content management systems. To cut a long story short: there are a lot of bad and a couple of pretty good ones out there. At the end of my journey, I was left with two systems I both very much enjoy: Contentful and Storyblok. +Contentful is beautiful and the UI is very intuitive. But it lacks one major feature which is important to me: repeatable grouped fields. + + + + How to Pre-render Vue.js Powered Websites with webpack + https://markus.oberlehner.net/blog/how-to-pre-render-vue-powered-websites-with-webpack/ + Sun, 01 Jul 2018 06:18:18 +0200 + + https://markus.oberlehner.net/blog/how-to-pre-render-vue-powered-websites-with-webpack/ + UPDATE: Since I wrote this article, the vue-cli-plugin-prerender-spa was created. I recommend that you take a look at it before you continue with this article. + In my recent article, we built a landing page type website powered by a headless CMS and Vue.js. We&rsquo;ve seen how quickly we can build a simple site with these two technologies. However, there is still a major problem with the result of our work: the loading performance is pretty terrible. + + + + Building Landing Pages with Vue.js and a Headless CMS + https://markus.oberlehner.net/blog/building-landing-pages-with-vue-and-a-headless-cms/ + Sun, 24 Jun 2018 06:52:52 +0200 + + https://markus.oberlehner.net/blog/building-landing-pages-with-vue-and-a-headless-cms/ + Although, nowadays, my main focus at work is to build app like websites, at my former employer, I generally worked on brochure pages. We built a variety of small to medium scale websites powered by the PHP based CMS Drupal. +A couple of days ago, I started thinking about how I would build such sites today. Drupal is a very powerful CMS and there is nothing inherently bad about it, but it&rsquo;s very heavyweight and the frontend part is pretty outdated. + + + + Layouts with Vue.js - How to Create Dynamic Layout Components + https://markus.oberlehner.net/blog/dynamic-vue-layout-components/ + Sun, 17 Jun 2018 06:47:47 +0200 + + https://markus.oberlehner.net/blog/dynamic-vue-layout-components/ + Vue.js is flexible enough to serve as a tool for either progressively enhancing certain parts of traditional server-side rendered applications or powering large scale single-page applications, and everything in between. If you build complex single-page applications, you&rsquo;ll most likely encounter situations where you need different page layouts for certain parts of your app. +Today we&rsquo;ll take a look at multiple ways of how to handle layouts in Vue.js, and we&rsquo;ll explore the potential up and downsides of the different approaches. + + + + Vue Router Page Transitions with Fade, Slide and Zoom Effects + https://markus.oberlehner.net/blog/vue-router-page-transitions/ + Sun, 10 Jun 2018 10:15:15 +0200 + + https://markus.oberlehner.net/blog/vue-router-page-transitions/ + In my last article, we&rsquo;ve explored how to use the powerful Vue.js transition component, to animate an element from zero height to auto height. Today we&rsquo;ll take a look at how we can utilize the transition component to create fancy transitions between different pages of a Vue Router powered Vue.js application. +If you&rsquo;re curious about the result, you can take a look at the final result hosted on Netlify, or you can check out the full code on GitHub. + + + + Transition to Height Auto With Vue.js + https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ + Sun, 03 Jun 2018 07:14:14 +0200 + + https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ + Every now and then, I end up in a situation where I need to animate an HTML element from height: 0 to its natural height (height: auto). Based on my experience, I already know that there are only three ways of achieving this: transitioning from max-height: 0 to max-height: Xpx, transitioning from transform: scaleY(0) to transform: scaleY(1) and JavaScript magic (you can read about all three of them in this Stack Overflow thread). + + + + Should I Store This Data in Vuex – When Should I use Vuex? + https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/ + Sun, 27 May 2018 10:33:33 +0200 + + https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/ + When first starting with Vuex, most people wonder what data should be stored in Vuex in the first place? In the journey of answering this question, for many people (including me) comes what I call the “Let&rsquo;s Store Everything in Vuex” phase. But very quickly, after having encountered the first obstacles, comes the realization that this cannot be the be-all and end-all solution to managing state in Vue.js applications. + + + + Building Renderless Components to Handle CRUD Operations in Vue.js + https://markus.oberlehner.net/blog/building-renderless-components-to-handle-crud-operations-in-vue/ + Mon, 21 May 2018 08:25:25 +0200 + + https://markus.oberlehner.net/blog/building-renderless-components-to-handle-crud-operations-in-vue/ + In episode 81 of the Full Stack Radio podcast Adam Wathan and Evan You talked about the possibility of utilizing the power of slot scopes to build components which sole purpose is to fetch data and provide the result via slot scope properties to the markup. In today&rsquo;s article we&rsquo;re going to take this into practice and we even go a little further: we&rsquo;ll build “renderless components” to handle all CRUD operations in a reusable way. + + + + Building Custom Multi-Option Form Components with Vue.js + https://markus.oberlehner.net/blog/building-custom-multi-option-form-components-with-vue/ + Sun, 06 May 2018 08:06:42 +0200 + + https://markus.oberlehner.net/blog/building-custom-multi-option-form-components-with-vue/ + In my opinion, one of the most significant features of Vue.js, is the ability to build custom form components with ease. Thanks to v-model and the straightforward event system, we can build powerful new form components or enhance existing form fields and input types with superpowers. + Multiple values selected and rendered as a table of products Today we focus on building custom form components for selecting multiple options in various ways. + + + + Replicating the Twitter Tweet Box with Vue.js + https://markus.oberlehner.net/blog/replicating-the-twitter-tweet-box-with-vue/ + Sun, 29 Apr 2018 13:32:32 +0200 + + https://markus.oberlehner.net/blog/replicating-the-twitter-tweet-box-with-vue/ + Today we will take a look at how to replicate the Twitter Tweet Box (the text area you use to compose new tweets) using Vue.js. At first glance, the Tweet text field might look like a straightforward &lt;textarea&gt; element, but it is not. It&rsquo;s certainly much more complicated than that. In this article, we&rsquo;ll find out why the Twitter Tweet Box isn&rsquo;t a simple &lt;textarea&gt; element and how the developers of Twitter have solved this problem. + + + + Visual Regression Testing with Nightwatch.js and Cucumber.js + https://markus.oberlehner.net/blog/visual-regression-testing-with-nightwatch-and-cucumber/ + Sun, 22 Apr 2018 08:01:12 +0200 + + https://markus.oberlehner.net/blog/visual-regression-testing-with-nightwatch-and-cucumber/ + As most of my regular readers have probably already noticed, I&rsquo;m a huge fan of testing all the things. In many of my recent articles, we&rsquo;ve already explored multiple techniques for unit testing and acceptance testing. +Unit testing ensures that certain parts (or units) of our code do work correctly; with acceptance testing, we can guarantee that what we&rsquo;ve built does what it should do. Visual regression testing makes it possible that we can test if our application looks the way it&rsquo;s supposed to look. + + + + Building a Date Input Component with Vue.js + https://markus.oberlehner.net/blog/building-a-date-input-component-with-vue/ + Sun, 15 Apr 2018 10:42:42 +0200 + + https://markus.oberlehner.net/blog/building-a-date-input-component-with-vue/ + Today we build a custom date input component powered by Vue.js. Although there is a native date input type available in all modern browsers, there are certain situations where the native date input field falls short. So let us take a look at how we can build a custom date input field with Vue.js. + Custom date input field powered by Vue.js If you want to play around with the component we build yourself, you can find a working example of the date input component on GitHub, or you can take a look at a demo running on Netlify. + + + + Crazy Powerful Nightwatch.js Cucumber Step Definitions + https://markus.oberlehner.net/blog/crazy-powerful-nightwatch-cucumber-step-definitions/ + Sun, 08 Apr 2018 10:06:31 +0200 + + https://markus.oberlehner.net/blog/crazy-powerful-nightwatch-cucumber-step-definitions/ + Although testing, and especially acceptance testing, seems like a rather boring topic (at least to many developers) in the past few months I acquired an interest in optimizing the test setup and come up with better ways of writing tests. Especially when using Nightwatch.js in combination with Cucumber.js, there is another challenging aspect to it: writing step definitions. +I&rsquo;ve already written an article about writing smart step definitions. Although we&rsquo;re using this approach with great success, I&rsquo;m still not satisfied with all aspects of this technique. + + + + Setting up a Vue.js Project with webpack 4 and Babel 7 + https://markus.oberlehner.net/blog/setting-up-a-vue-project-with-webpack-4-and-babel-7/ + Tue, 03 Apr 2018 12:30:00 +0200 + + https://markus.oberlehner.net/blog/setting-up-a-vue-project-with-webpack-4-and-babel-7/ + For my previous article about three different ways of how to structure a Vue.js application, I wanted to set up a build system which not only allows for regular JavaScript code splitting, but also CSS code splitting. Thanks to webpack 4 and the mini-css-extract-plugin (which basically is the successor of the extract-text-webpack-plugin), CSS code splitting is finally possible. +I quickly realized though, that there is currently no official way of how to setup a webpack 4 powered Vue. + + + + Vue.js Application Structure and CSS Architecture + https://markus.oberlehner.net/blog/vue-application-structure-and-css-architecture/ + Sun, 01 Apr 2018 13:45:21 +0200 + + https://markus.oberlehner.net/blog/vue-application-structure-and-css-architecture/ + In recent days, I thought a lot about structuring large scale component-based applications. Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together, and without too much effort, you&rsquo;ve implemented the first feature of your application in a reasonable amount of time. +Deceived by the project&rsquo;s rapid progress, you think, now that you already have a bunch of components, developing the next feature must be even easier and faster. + + + + Route Model Binding with Vue.js and Vuex + https://markus.oberlehner.net/blog/route-model-binding-with-vue-and-vuex/ + Sun, 25 Mar 2018 07:07:10 +0200 + + https://markus.oberlehner.net/blog/route-model-binding-with-vue-and-vuex/ + I&rsquo;m currently in the process of refreshing my knowledge about Laravel. I do so by reading the official documentation. Although, I almost exclusively work on the front side of things with Vue.js nowadays, there is a lot to be learned by getting to know techniques outside of your comfort zone. Laravel is doing some pretty great things to make the life of developers easier. One of those featuers is Route Model Binding. + + + + Network Stubs and Timers with Nightwatch.js and Cucumber.js + https://markus.oberlehner.net/blog/network-stubs-and-timers-with-nightwatch-and-cucumber/ + Sun, 18 Mar 2018 11:05:31 +0200 + + https://markus.oberlehner.net/blog/network-stubs-and-timers-with-nightwatch-and-cucumber/ + In my previous article about automated acceptance testing with Cypress I explored the possibilities of the cy.route() and cy.clock() commands. Because I fell in love with how easy it is to stub network requests and manipulate JavaScript timeout functions (like setTimeout and setInterval) with those two commands, I began to feel bad about not having this functionality in Nightwatch.js und Cucumber.js powered acceptance tests. +Making the switch to Cypress in all of my projects isn&rsquo;t possible for two reasons: changing your testing framework isn&rsquo;t a small task to begin with, and full-blown support for the Gherkin syntax is a must-have in my book. + + + + Automated Acceptance Testing with Cypress and Vue.js Part 2: Network Stubs and Timers + https://markus.oberlehner.net/blog/automated-acceptance-testing-with-cypress-and-vue-network-stubs-and-timers/ + Sun, 11 Mar 2018 09:08:12 +0200 + + https://markus.oberlehner.net/blog/automated-acceptance-testing-with-cypress-and-vue-network-stubs-and-timers/ + This is the second part of my article series about automated acceptance testing with Cypress. In the first part of this series we&rsquo;ve learned how to set up Cypress. Today we take a look at two advanced features of Cypress: Network Stubs and Timers. +If you want to see the full code used in this article, you can check out the GitHub repository for this article. +Acceptance testing vs. end-to-end testing Before we delve deeper into the matter, let&rsquo;s think about the difference between end-to-end testing and automated acceptance testing. + + + + Automated Acceptance Testing with Cypress and Vue.js Part 1: Setup + https://markus.oberlehner.net/blog/automated-acceptance-testing-with-cypress-and-vue-setup/ + Sun, 04 Mar 2018 10:45:32 +0200 + + https://markus.oberlehner.net/blog/automated-acceptance-testing-with-cypress-and-vue-setup/ + In today&rsquo;s article, we&rsquo;re going to take a look at one of the rising stars in the automated end-to-end testing scene: Cypress. When I first discovered Cypress, I thought that it looks very promising, but I was skeptical if it can live up to the hype. Although Nightwatch.js is rather old and boring, it has proven to be a useful tool, which, even though it has its quirks, does its job well, most of the time. + + + + Dynamically Loading SVG Icons with Vue.js + https://markus.oberlehner.net/blog/dynamically-loading-svg-icons-with-vue/ + Sun, 11 Feb 2018 09:12:10 +0200 + + https://markus.oberlehner.net/blog/dynamically-loading-svg-icons-with-vue/ + In this article we&rsquo;re going to explore two approaches for dynamically loading SVG icons with Vue.js. We&rsquo;ll use the wonderful vue-svgicon package as a foundation for our SVG icon workflow. +If you want to take a closer look at the example code, you can find it on GitHub. Or you can check out a live example of the code hosted on Netlify. + Dynamically loading icons with Vue.js Installing vue-svgicon There are multiple ways of how to integrate SVG icons into a website, but because we&rsquo;re using Vue. + + + + How to Structure a Complex Vuex Store with Modules + https://markus.oberlehner.net/blog/how-to-structure-a-complex-vuex-store/ + Sun, 04 Feb 2018 10:01:01 +0200 + + https://markus.oberlehner.net/blog/how-to-structure-a-complex-vuex-store/ + Update from 2019: I wrote this article about a year ago, and I changed my mind about a few things regarding the use of Vuex at scale since then. Although most of this article is still relevant today, I highly recommend you also read my article about possible alternatives for Vuex and how you can decide when to use Vuex over an alternative solution. Moreover, I plan to write a book about this topic, and you can follow me on Twitter or subscribe to my newsletter if you want to stay up to date. + + + + How to Handle Multi-row Forms with Vue, Vuex and vuex-map-fields + https://markus.oberlehner.net/blog/how-to-handle-multi-row-forms-with-vue-vuex-and-vuex-map-fields/ + Sun, 28 Jan 2018 11:11:11 +0200 + + https://markus.oberlehner.net/blog/how-to-handle-multi-row-forms-with-vue-vuex-and-vuex-map-fields/ + In one of my previous articles about form field handling in combination with Vuex, I introduced the vuex-map-fields package, which allows to conveniently map a list of fields to Vuex conform getter and setter functions. +In today&rsquo;s article we take it a step further and we&rsquo;ll explore how we can use the latest release of vuex-map-fields to build a Vuex powered multi-row form. + Add and edit rows of form fields Multi-row form with Vue and Vuex In our example form component, we want to have a form which makes it possible to enter and edit multiple rows of addresses. + + + + Money in Open Source + https://markus.oberlehner.net/blog/money-in-open-source/ + Sun, 21 Jan 2018 09:26:02 +0200 + + https://markus.oberlehner.net/blog/money-in-open-source/ + Last week at Scriptconf in Linz, Austria, Evan You, the creator of Vue.js, spoke about his journey to becoming a full-time open source developer. Although most of the things he talked about don&rsquo;t apply to small open source projects and their contributors, I still found it interesting to gain some insight into the world of highly successful open source projects. +But the one thing that people seemed to talk most about after the talk was how much money Evan makes on Patreon ($12,526 / month at the time of writing). + + + + Vue.js Form Validation with Vuelidate + https://markus.oberlehner.net/blog/vue-form-validation-with-vuelidate/ + Sun, 14 Jan 2018 08:01:21 +0200 + + https://markus.oberlehner.net/blog/vue-form-validation-with-vuelidate/ + In today&rsquo;s article, we build a simple contact form with inline validation powered by Vuelidate. One of the best features of Vuelidate is its relatively small footprint, which is about 4.2 kB (gzipped). But the small package size comes with a cost: Vuelidate focuses on validation only. It&rsquo;s the task of us programmers to add further functionality like displaying validation error messages and scrolling to the first validation error. + + + + Combining GraphQL and Vuex + https://markus.oberlehner.net/blog/combining-graphql-and-vuex/ + Sat, 06 Jan 2018 08:11:11 +0200 + + https://markus.oberlehner.net/blog/combining-graphql-and-vuex/ + In today&rsquo;s article, we&rsquo;re going to take a look at how we can combine GraphQL and Vuex to manage the state of a Vue application. But first of all, let me say that the way we&rsquo;re going to integrate the Apollo GraphQL client into our Vue application is not the “official” way of how to integrate GraphQL into a Vue powered application. The most standard way of using GraphQL with Vue would be the vue-apollo plugin. + + + + Two-Way Data Binding with v-model and Vuex + https://markus.oberlehner.net/blog/form-fields-two-way-data-binding-and-vuex/ + Sun, 31 Dec 2017 11:22:24 +0200 + + https://markus.oberlehner.net/blog/form-fields-two-way-data-binding-and-vuex/ + One of the most valuable features that Vue.js has to offer is painless two-way data binding. By using the v-model directive, you can quickly set up two-way data binding on form elements. +&lt;template&gt; &lt;input v-model=&#34;message&#34;&gt; &lt;/template&gt; &lt;script&gt; export default { data() { // Changing the value of `message` here // or changing the value of the `input` // directly, updates the value in both // places. return { message: &#39;&#39; }, }, }; &lt;/script&gt; So far, so good. + + + + Building a Modal Dialog with Vue.js and Vuex + https://markus.oberlehner.net/blog/building-a-modal-dialog-with-vue-and-vuex/ + Sun, 17 Dec 2017 16:22:14 +0200 + + https://markus.oberlehner.net/blog/building-a-modal-dialog-with-vue-and-vuex/ + Today we&rsquo;re building a modal dialog in Vue using Vuex. In my last article about exploratory TDD I wrote about the lack of tutorials demonstrating TDD in more complex, real world scenarios, so I decided to guide you through the whole process of building a modal dialog using the TDD methodology. +We&rsquo;re using Jest as our test runner of choice and the official vue-test-utils package to drive our tests. You can find all the code demonstrated in this article on GitHub. + + + + Exploratory TDD + https://markus.oberlehner.net/blog/exploratory-tdd/ + Sun, 10 Dec 2017 06:55:59 +0200 + + https://markus.oberlehner.net/blog/exploratory-tdd/ + I&rsquo;m currently working hard on making TDD my default way of writing code. Although I have noticed that the more I practice TDD, the easier it becomes, I still often fall back on writing dozens of lines of code without running tests that cover them. +Sometimes laziness is the reason why I fall back into my old habit of writing code without coming up with a test first. But oftentimes the reason is that I just don&rsquo;t know how to start. + + + + Testing Vuex Powered Vue.js Components with Jest + https://markus.oberlehner.net/blog/testing-vuex-powered-vue-components-with-jest/ + Sun, 03 Dec 2017 10:48:34 +0200 + + https://markus.oberlehner.net/blog/testing-vuex-powered-vue-components-with-jest/ + Thanks to the vue-test-utils, testing Vue components has become much more comfortable. But things can get a little more complicated if you add Vuex to the equation. One way to deal with the additional complexity of Vuex would be not to mock the Vuex store at all and also use the regular store implementation for testing. But in many cases, this is not the optimal solution. Usually, you want to test only the thing and mock everything else, which is required for the thing to run. + + + + Git, the pedantic way + https://markus.oberlehner.net/blog/git-the-pedantic-way/ + Sun, 26 Nov 2017 09:06:56 +0200 + + https://markus.oberlehner.net/blog/git-the-pedantic-way/ + When people think of programmers, they think of pale nerds sitting in front of their computers writing code all day long. As we all know, this couldn&rsquo;t be further from the truth. In reality, we&rsquo;re pale nerds, who spend most of our time sitting in front of our computers reading (and trying to make sense of) code, written by other people (or our past selves). +Since what most of us do most of the time is read code and try to understand it, it is even more important to write code that is easy to understand. + + + + Speeding up Nightwatch.js Powered Acceptance Tests + https://markus.oberlehner.net/blog/speeding-up-nightwatch-powered-acceptance-tests/ + Sun, 19 Nov 2017 08:42:22 +0200 + + https://markus.oberlehner.net/blog/speeding-up-nightwatch-powered-acceptance-tests/ + In my last article series on automated testing, we explored how to set up Nightwatch.js, write smart step definitions, and how to run automated cross-browser acceptance tests on BrowserStack with Nightwatch.js. Today we examine two ways how we can speed up the testing process with Nightwatch.js – because faster is always better. +Running Nightwatch.js without Selenium We can achieve the first small speed improvement by eliminating Selenium from the setup. + + + + Intelligent Design vs. Evolution + https://markus.oberlehner.net/blog/intelligent-design-vs-evolution/ + Sun, 12 Nov 2017 09:26:18 +0200 + + https://markus.oberlehner.net/blog/intelligent-design-vs-evolution/ + In the last few days I have been confronted with the results of planning mistakes in several (personal and professional) projects on which I work. It&rsquo;s an unpleasant feeling to have to refactor large parts of the architecture of a project because you&rsquo;ve come to realize that what initially looked like a good idea doesn&rsquo;t work the way you imagined it would. +Why is it, that we – as developers, people of science, as which we know of evolution as a fact and chuckle about the idea of an “Intelligent Design” forming the world we live in – don&rsquo;t honor the principles of evolution in our own craft and instead try to apply the idea of an “Intelligent Design” to our projects? + + + + Two-Tier Sass Variables / CSS Custom Properties + https://markus.oberlehner.net/blog/two-tier-sass-variables-and-css-custom-properties/ + Sun, 05 Nov 2017 06:52:25 +0200 + + https://markus.oberlehner.net/blog/two-tier-sass-variables-and-css-custom-properties/ + One of the hardest challenges when working with CSS (or Sass) at scale, is to keep everything consistent and maintainable. Sass variables or CSS custom properties can be a handy tool to help with consistency and flexibility. Variables can make your life as a developer a lot easier. But there are many considerations you have to keep in mind when defining variables for your CSS framework. +Imagine the following situation: you may have variables for certain shades of gray you might use in your styles. + + + + The Ultimative Flexbox Based CSS Layout + https://markus.oberlehner.net/blog/the-ultimative-flexbox-based-css-layout/ + Sun, 29 Oct 2017 06:26:53 +0200 + + https://markus.oberlehner.net/blog/the-ultimative-flexbox-based-css-layout/ + Things are looking good on the CSS layout front. Flexbox can be used in all major browsers and CSS Grid Layout is almost at a point where browser support has reached a sweet spot – for some of us it might even be feasible to build production websites using CSS Grid Layout and some form of graceful fallback. +Until the rest of us can finally switch to CSS Grid Layout, we have to rely solely on Flexbox to satisfy all our layout needs. + + + + Unit Testing Vue.js Single File Components with ava + https://markus.oberlehner.net/blog/unit-testing-vue-single-file-components-with-ava/ + Sun, 22 Oct 2017 13:26:12 +0200 + + https://markus.oberlehner.net/blog/unit-testing-vue-single-file-components-with-ava/ + In today&rsquo;s article, we will explore how to unit test Vue.js single file components using the ava test framework and the vue-test-utils package. I&rsquo;ve decided to write this article because ava is my favorite test framework, if you&rsquo;re more into the Mocha test framework, I highly recommend you to watch the Testing Vue series on Laracasts. +Testing Vue.js components is different from testing regular JavaScript modules or classes in two ways. + + + + Acceptance Testing with Nightwatch.js and Cucumber.js Part 3: BrowserStack + https://markus.oberlehner.net/blog/acceptance-testing-with-nightwatch-and-cucumber-browserstack/ + Sun, 15 Oct 2017 13:04:52 +0200 + + https://markus.oberlehner.net/blog/acceptance-testing-with-nightwatch-and-cucumber-browserstack/ + In the first part of this three-part series we&rsquo;ve set up a Nightwatch.js and Cucumber.js powered test environment. In the second part we&rsquo;ve looked at how to write smart step definitions for Cucumber.js. +Today, in the third and final part of this series about acceptance testing with Nightwatch.js and Cucumber.js, we will integrate automated cross-browser testing powered by BrowserStack into our workflow. +Configuration Currently we&rsquo;re using the default configuration file test/conf/default. + + + + Acceptance Testing with Nightwatch.js and Cucumber.js Part 2: Smart Step Definitions + https://markus.oberlehner.net/blog/acceptance-testing-with-nightwatch-and-cucumber-smart-step-definitions/ + Thu, 12 Oct 2017 19:02:14 +0200 + + https://markus.oberlehner.net/blog/acceptance-testing-with-nightwatch-and-cucumber-smart-step-definitions/ + In the first part of this three-part series, we&rsquo;ve set up an automated system to run acceptance tests with Nightwatch.js and Cucumber.js. Today we&rsquo;re extending what we&rsquo;ve built previously and make our Cucumber.js step definitions a little bit smarter. +In an ideal world, it should be possible to write basic acceptance test specifications without having to add any new step definitions. In the real world this is not always possible, because some features, with some very specific functionality, might need special treatment and are impossible to test without writing custom step definitions. + + + + Acceptance Testing with Nightwatch.js and Cucumber.js Part 1: Setup + https://markus.oberlehner.net/blog/acceptance-testing-with-nightwatch-and-cucumber-setup/ + Sun, 08 Oct 2017 07:42:33 +0200 + + https://markus.oberlehner.net/blog/acceptance-testing-with-nightwatch-and-cucumber-setup/ + In my previous article series about front-end testing (Part 1 / Part 2), I wrote about how to run acceptance tests with TestCafe. Although I&rsquo;m a huge fan of TestCafe because it&rsquo;s shiny and new and uses the latest JavaScript features, there are several good reasons to use established systems like Nightwatch.js and Cucumber.js. +Nightwatch.js is battle-tested and has proven to be a potent tool in the utility belt when it comes to conducting end-to-end tests. + + + + Setting up a PWA with Vue, Vue Router and webpack Code Splitting + https://markus.oberlehner.net/blog/setting-up-a-pwa-with-vue-vue-router-and-webpack-code-splitting/ + Sun, 01 Oct 2017 09:47:23 +0200 + + https://markus.oberlehner.net/blog/setting-up-a-pwa-with-vue-vue-router-and-webpack-code-splitting/ + Today we will create a progressive web app (PWA) based on Vue.js with Vue Router, featuring code splitting with webpack. +Luckily, building progressive web apps has never been easier. Thanks to the hard work of many wonderful people in the open source community, every major JavaScript framework comes with an effortless way of kickstarting a new PWA powered project via a simple CLI command. +A special thanks goes to Addy Osmani who is a driving force behind the Vue PWA template and also a contributor to many PWA related open source projects like preact-cli. + + + + CSS Selector Namespaces for Stable Acceptance Tests + https://markus.oberlehner.net/blog/css-selector-namespaces-for-stable-acceptance-tests/ + Sun, 24 Sep 2017 09:39:12 +0200 + + https://markus.oberlehner.net/blog/css-selector-namespaces-for-stable-acceptance-tests/ + I have been experimenting with acceptance tests for a few weeks now - you can read more about my journey in my article about implementing cross-browser acceptance tests with TestCafe. A common problem when working with acceptance tests is that the implementation and the tests get out of sync. For example: somebody changes the markup of a module which leads to a failing test although the functionality stays the same. + + + + Don't Make Things More Complicated as They Are + https://markus.oberlehner.net/blog/do-not-make-things-more-complicated-than-they-are/ + Sun, 17 Sep 2017 06:56:54 +0200 + + https://markus.oberlehner.net/blog/do-not-make-things-more-complicated-than-they-are/ + Yesterday I learned a valuable lesson on how to solve a problem by looking at it from a different angle. +The longest open issues in the node-sass-magic-importer GitHub issue queue, is about source map support. A source map maps from the transformed source (CSS) served to the browser to the original source (SCSS), enabling the browser to reconstruct the original source and present the reconstructed original in the developer tools. + + + + Payment Request API Part 3: Taxes and Discounts + https://markus.oberlehner.net/blog/payment-request-api-taxes-and-discounts/ + Thu, 14 Sep 2017 09:37:14 +0200 + + https://markus.oberlehner.net/blog/payment-request-api-taxes-and-discounts/ + In the first part of this three-part series about the Payment Request API, we explored how to implement a basic payment process using the new Payment Request API. +To further improve the functionality, we looked at how to build a Payment Request API powered shopping cart in the second article of this series. +Today we&rsquo;re going to implement taxes and discounts into our existing checkout process. The code is based on the code we&rsquo;ve produced in the previous steps. + + + + Payment Request API Part 2: Building a Shopping Cart + https://markus.oberlehner.net/blog/payment-request-api-building-a-shopping-cart/ + Sun, 10 Sep 2017 10:42:04 +0200 + + https://markus.oberlehner.net/blog/payment-request-api-building-a-shopping-cart/ + The first article of this three-part series was about building a very basic checkout process using the Payment Request API. In this article we&rsquo;re going to build a basic shopping cart implementation followed by a Payment Request API powered checkout process. + Payment Request API popup with multiple line items and quantity (Chrome 61) The following code examples are based on the code in the previous article about the Payment Request API, you can look at the full code featured in this article at GitHub and you can check out the functionality by looking at the demo. + + + + Payment Request API Part 1: Payment Process Using the Credit Card Payment Method + https://markus.oberlehner.net/blog/payment-request-api-payment-process-using-the-credit-card-payment-method/ + Thu, 07 Sep 2017 07:38:14 +0200 + + https://markus.oberlehner.net/blog/payment-request-api-payment-process-using-the-credit-card-payment-method/ + This is the first part of a three-part series on how to use the new Payment Request browser API. In this article we&rsquo;re implementing a very basic payment process, collecting credit card data via the Payment Request API. In the second article we&rsquo;re going to look at how to build a Payment Request API powered shopping cart. Last but not least in the third article of this series, we&rsquo;ll implement taxes and discounts into our payment process. + + + + Dealing with the BrowserStack Parallel Test Limit When Using TestCafe + https://markus.oberlehner.net/blog/dealing-with-the-browserstack-parallel-test-limit-when-using-testcafe/ + Wed, 06 Sep 2017 08:52:50 +0200 + + https://markus.oberlehner.net/blog/dealing-with-the-browserstack-parallel-test-limit-when-using-testcafe/ + In my previous article about automated testing with TestCafe and BrowserStack, we explored how to utilize TestCafe to run cross-browser acceptance tests powered by BrowserStack. +One problem you might encounter when trying to run cross-browser tests in multiple browsers on BrowserStack with TestCafe is the parallel test limit that depends on your BrowserStack plan. At the time of writing, all regular BrowserStack plans include only one parallel test - which means you can only run one automated test at a time. + + + + Front-End Testing Part 2: Cross-Browser Acceptance Tests with TestCafe, BrowserStack, and npm Scripts + https://markus.oberlehner.net/blog/front-end-testing-cross-browser-acceptance-tests-with-testcafe-browserstack-and-npm-scripts/ + Mon, 04 Sep 2017 08:21:21 +0200 + + https://markus.oberlehner.net/blog/front-end-testing-cross-browser-acceptance-tests-with-testcafe-browserstack-and-npm-scripts/ + In the first part of this two-part series about front-end testing, we explored how to write JavaScript unit tests. In this article, we build acceptance tests powered by TestCafe, BrowserStack, and npm scripts. After setting up local testing, we configure Travis CI to automatically run our tests after pushing new code to a Git repository. +Setup First of all we&rsquo;re creating the directory structure for our test code. In the first part of this series we&rsquo;ve already created a test directory containing a sub directory for our unit tests now we add an additional acceptance directory for our acceptance test files. + + + + Front-End Testing Part 1: Writing JavaScript Unit Tests with ava and mock-browser + https://markus.oberlehner.net/blog/front-end-testing-writing-javascript-unit-tests-with-ava-and-mock-browser/ + Sun, 03 Sep 2017 10:40:25 +0200 + + https://markus.oberlehner.net/blog/front-end-testing-writing-javascript-unit-tests-with-ava-and-mock-browser/ + In this article, we will examine how to write unit tests for JavaScript code that is intended to run in the browser. We will use use ava as our test runner and the mock-browser package to simulate a browser environment. +The code we&rsquo;re testing is the code of a real world project of mine: perfundo – a pure CSS lightbox. +Real browser vs. mock browser There&rsquo;re basically two ways how to run unit tests which depend on a browser environment. + + + + Building a Responsive Priority+ Horizontal Scroll Navigation + https://markus.oberlehner.net/blog/building-a-responsive-priority-plus-horizontal-scroll-navigation/ + Sun, 20 Aug 2017 07:50:21 +0200 + + https://markus.oberlehner.net/blog/building-a-responsive-priority-plus-horizontal-scroll-navigation/ + One of the most difficult problems to solve when designing websites that are supposed to work well on small screens is creating user-friendly navigations. For a long time the goto solution was to hide the navigation items behind a hamburger button. Although the hamburger button is still going strong, there are some new approaches coming up and gaining traction. +One of this (kinda) new approaches is a variant of the Priority+ pattern (coined by Michael Scharnagl) combined with horizontal scrolling. + + + + Building npm Packages with TypeScript + https://markus.oberlehner.net/blog/building-npm-packages-with-typescript/ + Tue, 15 Aug 2017 18:47:53 +0200 + + https://markus.oberlehner.net/blog/building-npm-packages-with-typescript/ + Recently I worked on a couple of npm packages which I built using TypeScript. In the process of figuring things out I encountered some challenges with publishing my code built with TypeScript to npm. In this article I&rsquo;m going to show you how to setup your project to make publishing your TypeScript powered package to npm a pleasant experience. +Module exporting A vital part of working with Node.js is the approach of exporting and importing JavaScript modules. + + + + Getting Off of Information Addiction (Part 2: News) + https://markus.oberlehner.net/blog/getting-off-of-information-addiction-part-2-news/ + Sun, 13 Aug 2017 09:32:14 +0200 + + https://markus.oberlehner.net/blog/getting-off-of-information-addiction-part-2-news/ + In the first part of this two-part series about how to escape information addiction, I wrote about why and how to leave certain social media platforms, or at least limit how often you check them for updates. Although leaving social media platforms and especially Facebook, might seem a little extreme in the eyes of many people, more and more sociologists and psychologists are suggesting that the way how a lot of us are using social media, can be problematic. + + + + What I’ve Learned from Rewriting an Open Source Project from Scratch + https://markus.oberlehner.net/blog/what-i-have-learned-from-rewriting-an-open-source-project-from-scratch/ + Sun, 06 Aug 2017 08:24:33 +0200 + + https://markus.oberlehner.net/blog/what-i-have-learned-from-rewriting-an-open-source-project-from-scratch/ + A few months ago I started learning more about TypeScript. It was very refreshing and I learned a lot about type-based programming in general. So I was overcome by the natural urge of every programmer who is learning a new technique that they enjoy: I wanted to rewrite everything I ever built with TypeScript. +I don&rsquo;t know exactly why I thought starting with node-sass-magic-importer, which is one of my bigger projects, was a good idea. + + + + Using Gulp and UnCSS in Combination with Sass based Hugo themes + https://markus.oberlehner.net/blog/using-gulp-and-uncss-in-combination-with-sass-based-hugo-themes/ + Sun, 30 Jul 2017 12:05:21 +0200 + + https://markus.oberlehner.net/blog/using-gulp-and-uncss-in-combination-with-sass-based-hugo-themes/ + In one of my previous articles, I wrote about setting up a basic blog with Hugo. My blog – you&rsquo;re currently reading – runs on Hugo, and so far I&rsquo;m very happy with its simplicity and speed. Today I&rsquo;ll show you how we can use a Gulp build process to establish a convenient way to work on Hugo themes. Furthermore, we will utilize UnCSS to enable building a blog that loads almost instantly and scores highly in the Google PageSpeed Insights test. + + + + How to Show a Placeholder for a <select> Tag + https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/ + Sun, 16 Jul 2017 07:55:22 +0200 + + https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/ + Styling native HTML form fields – especially select fields – with CSS has always been a little tricky. Recently I was confronted with the task of creating a select field with a placeholder value so that the select field blends in nicely with other form fields on the page. +The problem of custom styled select elements is a hard one. Styling a select form field in a particular way is often impossible. + + + + Getting Off of Information Addiction (Part 1: Social Media) + https://markus.oberlehner.net/blog/getting-off-of-information-addiction/ + Sun, 09 Jul 2017 07:15:44 +0200 + + https://markus.oberlehner.net/blog/getting-off-of-information-addiction/ + If there is not enough time in your day to do all the things you wan&rsquo;t to do, naturally you&rsquo;ll start looking for opportunities to stop wasting time to have more time available for doing things which add real value to your life. +As I started looking for such things, I quickly realized that I wasted a ton of time with consuming (mostly worthless) information from various sources across the internet. + + + + Building a Good Ol' 12 Column CSS Grid Framework with CSS Grid Layout + https://markus.oberlehner.net/blog/building-a-good-old-12-column-css-grid-framework-with-css-grid-layout/ + Sun, 02 Jul 2017 07:15:33 +0200 + + https://markus.oberlehner.net/blog/building-a-good-old-12-column-css-grid-framework-with-css-grid-layout/ + Placing elements side by side is one of the oldest challenges in web development. Over the years smart developers have invented a plethora of techniques to achieve the goal of displaying HTML elements in parallel. +One of the first methods to build layouts was using HTML tables. With CSS taking over the rise of grid frameworks began. Most grid frameworks relied on the float property to be set either to right or left. + + + + Dreaming of a Package Based CSS Workflow + https://markus.oberlehner.net/blog/dreaming-of-a-package-based-css-workflow/ + Tue, 27 Jun 2017 19:21:11 +0200 + + https://markus.oberlehner.net/blog/dreaming-of-a-package-based-css-workflow/ + CSS has a pretty bad reputation with programmers of all kinds. For many people CSS still remains a source of annoying problems such as seemingly impossible vertical centering, rendering headaches between different browsers, and unpredictable behavior in general, to name a few. However, the first two problems have been solved for years and the latter is usually a result of developers not knowing the language well enough. +Another reason why many developers are not very fond of CSS is the massive amounts of poor quality legacy code many of us have to deal with on a regular basis. + + + + Get Going + https://markus.oberlehner.net/blog/get-going/ + Sat, 17 Jun 2017 12:33:15 +0200 + + https://markus.oberlehner.net/blog/get-going/ + In the last two weeks I have started to learn more about what motivates people to do what they do. I myself experience varying levels of motivation. Sometimes I feel very motivated to do a lot of stuff, especially on the weekend, and sometimes I can&rsquo;t motivate me to do a thing. What I already learned previously (and I even wrote about it earlier) is, that you can&rsquo;t rely solely on motivation to achieve excellence. + + + + Creating a Pure CSS Animated SVG Circle Chart + https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/ + Thu, 15 Jun 2017 16:36:01 +0200 + + https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/ + At my workplace, we recently faced the task of creating an animated SVG pie/doughnut/circle chart. At first, it didn&rsquo;t seem like a big challenge, but after playing around with a JavaScript-based solution provided to us, and aiming to find a solution that would work without JavaScript, my colleagues and I, concluded that a little JavaScript is necessary to animate the fill state of the circle. +Although I usually love JavaScript and most of what I do at work, and in my spare time has something to do with JavaScript, there are situations where I also hate JavaScript – sometimes. + + + + Talk: Monorepos in the Wild + https://markus.oberlehner.net/blog/talk-monorepos-in-the-wild/ + Wed, 07 Jun 2017 12:42:01 +0200 + + https://markus.oberlehner.net/blog/talk-monorepos-in-the-wild/ + About a month ago I held my first talk at a major conference, the We are Developers conference 2017. I talked about Monorepos and how they can be used to manage huge codebases at an organizational level or smaller codebases like modular open source projects. +I also talk about how Lerna can be used to manage multiple npm packages which are contained in a single monolithic repository. +The talk + + + + An Introvert on a Stage + https://markus.oberlehner.net/blog/an-introvert-on-a-stage/ + Sat, 13 May 2017 18:57:41 +0200 + + https://markus.oberlehner.net/blog/an-introvert-on-a-stage/ + Yesterday I had the privilege of speaking on one of the side stages of the WeAreDevelopers conference, the largest development conference in Europe. +I would like to take this opportunity to thank my boss for giving me the chance and trusting me enough to replace him as speaker at this conference, and I would also like to thank my colleagues who supported me before, during and after the presentation. + + + + Building the Berlin Skyline with LEGO + https://markus.oberlehner.net/blog/building-the-berlin-skyline-with-lego/ + Sun, 16 Apr 2017 10:33:51 +0200 + + https://markus.oberlehner.net/blog/building-the-berlin-skyline-with-lego/ + Today I didn&rsquo;t feel like programming so I decided to build the LEGO Architecture - Berlin set. I&rsquo;ve made the experience that building a LEGO set can be quite relaxing and sometimes it can help to regain motivation for doing the important work you have to do. +I already built some sets from the LEGO Architecture series and I really like the little details they put into the sets. What&rsquo;s also very nice about them is that you can build most of the LEGO Architecture sets in about under an hour which is really convenient if you&rsquo;re just searching some distraction before going back to work. + + + + Code Quality Matters (for Developers) + https://markus.oberlehner.net/blog/code-quality-matters-for-developers/ + Sun, 09 Apr 2017 08:57:02 +0200 + + https://markus.oberlehner.net/blog/code-quality-matters-for-developers/ + Earlier today, I read an interesting article speculating about the code quality of Facebook. There is also a Reddit thread discussing the article with some insights from current and former Facebook employees. +Most of the comments agree with the article&rsquo;s conclusions, and I myself know the pain of working with bad code all too well. But still, there was one comment from ”barry” against the popular opinion, which I also can&rsquo;t disagree with. + + + + AMP and the Open Web + https://markus.oberlehner.net/blog/amp-and-the-open-web/ + Tue, 04 Apr 2017 06:04:01 +0200 + + https://markus.oberlehner.net/blog/amp-and-the-open-web/ + About three months ago I did a talk about Google AMP at the local stahlstadt.js meet up. Since then AMP has gained a lot of traction. Today most of my Google search results for news on mobile have this little lightning bolt which marks them as valid (and cached) AMP pages. +My talk focused almost exclusively on the technical aspects of AMP. Although I also talked about the possible ups and downs the AMP Cache could have, I didn&rsquo;t consider the further implications. + + + + Building a Blog with the Static Website Generator Hugo + https://markus.oberlehner.net/blog/building-a-blog-with-the-static-website-generator-hugo/ + Sat, 01 Apr 2017 20:18:06 +0200 + + https://markus.oberlehner.net/blog/building-a-blog-with-the-static-website-generator-hugo/ + There are currently three huge trends in the web development world: reactive JavaScript frameworks, progressive web apps, and static website generators. Especially static website generators are getting a lot of attention since smashingmagazine.com – one of the most well-known web design blogs – has announced to make the switch from WordPress to a static website generator. Their choice fell on Hugo, which is the current rising star in the static website generator universe. + + + + Building a Simple (but Overengineered) Database Abstraction with TypeScript + https://markus.oberlehner.net/blog/building-a-simple-database-abstraction-with-typescript/ + Sat, 18 Mar 2017 16:27:05 +0200 + + https://markus.oberlehner.net/blog/building-a-simple-database-abstraction-with-typescript/ + Two weeks ago, I had this idea for an app. I decided this was the perfect opportunity to give Ionic a try. Long story short – I quickly realized it would be too much work to build the app I had in mind. But I found the technologies used by Ionic 2 to be interesting. Ionic 2 is built on top of Angular 2 which in turn is built with TypeScript. + + + + A (Final?) Look at Grid Frameworks + https://markus.oberlehner.net/blog/a-final-look-at-grid-frameworks/ + Sun, 05 Mar 2017 13:17:05 +0200 + + https://markus.oberlehner.net/blog/a-final-look-at-grid-frameworks/ + With CSS Grid Layout around the corner and Flexbox being broadly supported, it seems that the importance of grid frameworks is declining. Some people even say that Flexbox made grid frameworks obsolete. I disagree. As an advocate of OOCSS I&rsquo;m a fan ob abstracting away complexity as much as possible. Flexbox made it easier to build grid layouts but it is still a good practice to use CSS classes whenever a repeating pattern needs a solution. + + + + Perfectionism Kills Motivation + https://markus.oberlehner.net/blog/perfectionism-kills-motivation/ + Sun, 26 Feb 2017 11:07:05 +0200 + + https://markus.oberlehner.net/blog/perfectionism-kills-motivation/ + In the last couple of days, I felt like I was running out of steam. Following my daily routine of committing at least two enhancements to one or more open source projects (mostly my own) felt very exhausting. Yesterday I finally took the time to think about why I&rsquo;m losing my motivation. I have come to the conclusion that there are several factors why I felt less and less motivated to work on my pet projects. + + + + CSS, BEM and Context + https://markus.oberlehner.net/blog/css-bem-and-context/ + Sat, 18 Feb 2017 10:09:05 +0200 + + https://markus.oberlehner.net/blog/css-bem-and-context/ + One of my favorite CSS architecture topics has been discussed over the last few days: styling things in the context of other things. +It all started with a tweet from Dave Rupert. He asked whether the style .some-context .thing {} belongs into thing.css or some-context.css. Harry Roberts weighed in saying the style should be put in thing.css. +Some days later Harry Roberts wrote a blog article referencing Dave Rupert&rsquo;s tweet and Jonathan Snook also wrote a blog article referencing both, Dave Rupert&rsquo;s tweet and Harry&rsquo;s article (this is getting really meta). + + + + The Testable Module Pattern + https://markus.oberlehner.net/blog/the-testable-module-pattern/ + Sun, 12 Feb 2017 10:19:05 +0200 + + https://markus.oberlehner.net/blog/the-testable-module-pattern/ + The Testable Module Pattern is a pattern to write JavaScript modules which are fully testable by unit tests but also easy to use without the overhead of directly using a factory function. +You might use this pattern when you want to use unit tests but you do not want to give up on the flexibility of a modular, dependency based approach of structuring your code. +The testable module pattern builds upon the traditional approach of using dependency injection in combination with a factory function to make modules testable. + + + + Test Driven Development with JavaScript Using ava and Sinon.JS + https://markus.oberlehner.net/blog/test-driven-development-with-javascript-using-ava-and-sinonjs/ + Sun, 05 Feb 2017 11:07:05 +0200 + + https://markus.oberlehner.net/blog/test-driven-development-with-javascript-using-ava-and-sinonjs/ + For a long time testing and test-driven development (TDD) was a magical thing for me. I didn&rsquo;t really know what it meant and it seemed to be something only “real” developers can do correctly. Many developers suffer from imposter syndrome and so did (sometimes even today do) I and I was too scared to get into this magical thing called TDD. +Two or three years ago I started to work on some open source projects and I needed a way to stop things from breaking because of changes made to the codebase. + + + + Abbreviations Suck + https://markus.oberlehner.net/blog/abbreviations-suck/ + Sun, 22 Jan 2017 09:06:05 +0200 + + https://markus.oberlehner.net/blog/abbreviations-suck/ + For a recent project, I had to work a lot with the express Node.js framework. Abbreviations are used everywhere in the express documentation: req, res, err, etc. As I copied code snippets from the documentation into my project and kept changing the abbreviations into the words they stand for, I figured I could write an article on the subject. +The case for abbreviations Let&rsquo;s start with the opposing opinion - why use abbreviations in the first place? + + + + Investing Money (as a Developer) + https://markus.oberlehner.net/blog/investing-money-as-a-developer/ + Sat, 14 Jan 2017 10:18:05 +0200 + + https://markus.oberlehner.net/blog/investing-money-as-a-developer/ + Developers tend to earn a decent amount of money. Although this varies from country to country and job to job, it is true most of the time. So what to do with all the money? Invest it! +How much money is enough money to even start thinking about investing it? As with so many things in life: it depends™. +How much money do you earn? Do you have a car? + + + + Building avalanche 4.x.x + https://markus.oberlehner.net/blog/building-avalanche-v4/ + Fri, 30 Dec 2016 09:15:05 +0200 + + https://markus.oberlehner.net/blog/building-avalanche-v4/ + Up until a few years ago, most people didn&rsquo;t put much thought into „CSS architecture“ (I&rsquo;m quite sure it wasn&rsquo;t even a thing). Around the year 2009 some sophisticated fronted folks (most notably Nicole Sullivan) started talking about concepts like OOCSS. +/* Typical CSS code, ca. 2010 */ .selector ul &gt; li #imAnID { background-color: hotpink !important; } I tinkered around with OOCSS and really liked it, so I started to build some reusable components and used them for my personal projects. + + + + \ No newline at end of file