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…
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:
git branch -m master main
git push —-set-upstream origin main
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. …
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…
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.
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…
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.
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.
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.
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.
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:
Frontend Engineer, aiming for a better world.