wood sign with written text on it: welcome — we are open.
wood sign with written text on it: welcome — we are open.
Picture by Ketut Subiyanto at Pexels

Web accessibility is a vast topic and there are a lot of very good resources around standards and implementation details. But its very hard to know where to begin. In this article, you will learn how to improve your web applications accessibility by following 5 basic techniques.

This is an issue I see a lot on web applications. Div tags, or other container elements, with onClick handlers. They are used to have pretty looking interactive elements and also often used in the context of (multi) selectable data. Like lists of elements to choose from. While they are easier to…


Image Credit: Prateek Katyal https://www.pexels.com/de-de/foto/herz-und-null-neonlicht-beschilderung-2694434/

Especially in times like the pandemic social media has become more important than ever. To keep informed and stay in touch with your loved ones. Unfortunately, some of them are lacking in inclusiveness and accessibility.

Disclaimer: This is not a list of all social media apps there are, just the ones that are most popular among my circles in Europe. I tested the apps myself on 02/21 mostly on an Android device, and if a Desktop Version was available, I tested them on a Mac with Chrome Browser. I was trying to assert also the accessibility of the apps with…


If you want to remove the default branch named master from your git repository this is how it works:

  • after initializing your project create a new branch based on master and push it to origin

git branch -m master main

git push —-set-upstream origin main

  • delete your local master branch

git branch -D master

You have to be the owner of the repository in order to change these settings.

gitlab has set that the master branch as default and protected, which means you can not just remove it from your local machine. …


A protest sign on a climate march. The sign says: “Fight today for a better tomorrow”
A protest sign on a climate march. The sign says: “Fight today for a better tomorrow”
Protest sign on a climate crisis march

Many companies posted statements in the recent days that they are allies of minorities and with the black live matters movement. But posting a black square or a rainbow flag on social media is easy. Being an ally is often not. Here are 10 steps about how you and your company can become better allies.

Disclaimer: this list does not cover everything that is to know about being an ally company. See it as a starting point for things to learn more about or a small checklist when looking for a new company to work with.

If you have only…


Bring order into style chaos.

There are many ways to add styles to your frontend applications. One of the most popular ones right now is Styled Components. It not only promises us fast, non-render blocking styles, but also solving our scoping and naming issues.

While working with styled-components over the last years, I gained some more insights about said promises and how to get more out of Styled Components. Here are my Top 3.

1. Use Babel to generate better readable class names

Why should you care? I am a big fan of automating issues away to minimise repeating tasks and human error possibilities. Letting Styled Components generate class names for you is fantastic…


A women looking at classic paintings in a museum
A women looking at classic paintings in a museum

We develop user interfaces for humans, not for robots. Which is why it's hard to remove manual testing from our applications and also not the overall goal. But there are some tools that can catch certain mistakes before wasting a persons time clicking through your application.

In the last part of test-driven frontend, we will cover visual regression testing, snapshots and semantic testing.

Part1 — Testing strategies
Part 2 — How to set up a unit testing Environment
Part 3 — Accessibility testing
Part 4 — Functional and behaviour testing

Visual regression test

AI might not be able to tell if you implemented…


In this article, you will learn how to test React Components for functions and user behaviour in a test-driven way

This story is Part 4 of test-driven frontend series. Find the other Parts of the series here:
Part1 — Testing strategies
Part 2 — How to set up a unit testing Environment
Part 3 — Accessibility testing
Part 5— Design testing

If you want to start the code along straight away without implementing the 3 & 2 yourself, you can clone this branch here

To run a functional test that covers user interaction, we need to implement three steps.

  • Render…

accessibility emojis, person with cane, deaf person, service dog, limp prostetics, hearing aid, wheelchair users
accessibility emojis, person with cane, deaf person, service dog, limp prostetics, hearing aid, wheelchair users

In Part 3 of the Test-driven Frontend series, you will learn about accessibility testing.

Around 15% of the world’s population has some form of disability. The internet and smartphones have given voice, eyes, and ears to people who did not have these possibilities before. But this is only achievable when we as Software Engineers make accessibility a standard. Instead, it is often an afterthought. And like every change that comes in late into our project, it becomes expensive to implement. This article will help you to integrate accessibility into your workflow, so it becomes a natural part of developing.

How…


When you build a Living Design System, you want the components to be ready to use and stable. To achieve this goal, we want to be able to test our components for three areas: accessibility, design and functionality.

In this article, you will learn how to set up a unit test environment for a Living Design System with Storybook and React.

This article is part 2 of ‘Test-driven frontend’.

In the first part, we set up a testing strategy and learned what is unique about frontend testing. Let’s take first dips now into the world of testing.

Boilerplate

We will be…


laboratory test tubes with blue liquids inside
laboratory test tubes with blue liquids inside

Some developers treat it like a religion, and others think it’s an unnecessary waste of time. I am talking about Test Driven Development and Unit Tests.

In this series of articles, I would like to introduce you to the test strategy I am using successfully in Living Design Systems. I will present why and how to test different areas in a React Component Library.

A little Disclaimer — even though this series uses React Code, some of the broader ideas will still apply to other libraries.

Find the other parts here:

Part 2 — How to set up a unit…

Kathrin Holzmann

Frontend Engineer, aiming for a better world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store