Front End Architecture

Reusing Logic With Renderless Vue.js Frame Components

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...

Read more

Multi Export Vue.js Single File UI Components

In todays 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...

Read more

Magic Numbers in CSS: How to Identify and Fight Them

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...

Read more

abomination: a Concept for a Static HTML / Dynamic JavaScript Hybrid Application

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...

Read more

Variables in Design Systems

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...

Read more

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't get easier, even after years of working on all sorts of design systems and CSS frameworks...

Read more

Two Tier Sass Variables / 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 very useful tool to help with consistency and flexibility. Although variables can make your life as a developer a lot easier, there are many considerations you have to keep in mind when defining variables for your CSS framework...

Read more

CSS Selector Namespaces for Stable Acceptance Tests

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...

Read more