Imagine a world where you don't need to install a single dependency, but you're still able to use all modern JavaScript features. Where you don't need to run a build script every time you change a file. And you can do all of that knowing that your app will be perfectly minified and optimized for old browsers on production...
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 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...
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...
One of my top priorities is to create the fastest possible websites (think marketing sites, not web applications), but I also don't want to do without modern tools and a component-based workflow. While there are developments in the right direction, I don't think tools like Gatsby and Nuxt.js are quite there yet when it comes to building content heavy, mostly static sites...
One of my top priorities is to create the fastest possible websites (think marketing sites, not web applications), but I also don't want to do without modern tools and a component-based workflow. While there are developments in the right direction, I don't think tools like Gatsby and Nuxt.js are quite there yet when it comes to building content heavy, mostly static sites...
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...
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't want to roll my own custom authentication flow, but I didn't want to go the cheap way and work with Netlify Identity either, because although I'm sure it's great (like any Netlify service), I want to learn new things with my side projects. So I decided to go the middle way and use the very popular Passport Express middleware...
In this article, we'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...
Recently I'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 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...
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's it. Right? Yeah, kind of. But also kind of not...
In this article, we explore how we can leverage the power of WebSockets to push content and even component updates to simple Vue.js client applications...
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...
Reliable error handling is one of those things which can make the difference between a good application and a great application. In today's article we'll take a look at how we can build renderless components to help us capture errors in our Vue.js applications...
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. In this article we'll use Jest and Puppeteer to set up Visual Regression Tests...
Reusing logic and keeping your codebase DRY should be one of your top priorities. In a Vue.js application components are the most important means of code reuse. But usually we think of components as a combination of markup, logic and CSS. At first, it might not be very intuitive to use components to provide only logic and not render anything at all...
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...
In my previous article about Advanced Component Composition, we wrote Unit Tests for all of our Vue.js components except the Container Components. Writing Unit Tests for components with a lot of external dependencies (e.g. making API calls or accessing the $route object) is usually very hard to do because most of the time you have to mock a lot of their dependencies...
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 very difficult to test some of the components of the application. A common reason for this is that you have to mock a lot of global dependencies like the Vue Router or the Vuex Store...
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. But usually, we think of components as a combination of markup, logic, and CSS. At first, it might not be very intuitive to use components to provide only logic and not render anything at all...
In today's article we'll learn how to build Vue.js Single File Components (SFC) which export multiple components at once using ES6 named exports. Furthermore we'll utilize render functions to render the markup of our components via JSX. By combining these techniques, we are able to create UI components that consist of several separate components combined into a single file...
Recently I started thinking about magic numbers. Until this point I haven'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...
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...
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. Although those are great projects and especially the developer experience is amazing, there is one huge downside of using those systems to generate mostly static, text and image based websites...
Recently, I've been thinking a lot about variables in (Sass based) design systems. My approach with avalanche, and more recently with the design system we're building at work, always was to use variables for everything from spacings to colors and things like border radius...
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't get easier, even after years of working on all sorts of design systems and CSS frameworks...
In today's quick tip we'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...
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...
Today we're going to look at the approach of using CSS selector namespaces to help us with detecting changes which have to be considered in the tests. Using separate selectors for testing also leads to a more stable way of structuring our code without tightly coupling our tests with the markup and CSS styles of the implementation...
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. But there are new challenges coming up in the fast-moving web development world...
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...