All post in HTML

Are Tailwind Container Queries Supreme? - React, Tailwind - Frontend

Are Tailwind Container Queries Supreme?

Henri Remonen

Acquiring a specific layout design using media queries can be a daunting task. Fortunately, container queries offer an excellent solution to this challenge. In this article, we will explore how to use container queries and the fundamental concepts behind them. Additionally, we will dive into a more "real-world" use case of container queries in more detail.
5 Essential Advanced Tailwind Tips

5 Essential Advanced Tailwind Tips

Henri Remonen

Tailwind has gained a lot of popularity. Because of its utility-first approach, it is easy and intuitive to get started with. I feel like the main benefit is not having to juggle between separate CSS files speeding up the development process. This is not a tutorial on how to set up Tailwind. Nor will I cover how to center a div. I’ll showcase five Tailwind techniques which helped me on my dev journey and I’ve found out to be the most helpful.
Start Fostering the Accessibility Tree

Start Fostering the Accessibility Tree

Henri Remonen

When talking about trees you probably think of a forest or something like that, not so much a accessibility tree in your browser. However, if you do not foster your accessibility tree accordingly, it will start rotting and we do not like rot in our trees.
A shocked person viewing a web page with non-descriptive links. A list of links window is open on the side.

Crushing Descriptive Links – Getting Accessibility Just Right

Henri Remonen

Have you noticed that some links on the web are not very descriptive and don't give you a good idea of where they will take you? This can make it harder for users to navigate the web since they rely on the information scent provided by the links to decide where to go next. To make the user experience more accessible and enjoyable, it's important to use descriptive links that clearly explain where the user will end up if they click on them. If you're interested in learning more about how to create effective link texts, check out this post!
Accessible Navbar In Next.js. React, Next.js - Frontend.

Start Creating Accessible Navbars in Next.js 14

Henri Remonen

Creating navbars is kinda easy right? Well yes, but have you considered the accessibility aspects of the navbar. This post is more of a guide on how to implement an accessible navbar in React. However, the underlying HTML can be integrated into your workflow regardless of the framework.
Blind person navigating a website with a white cane. Once hit an image, an alternative text is read.

Effortless Alternative Texts for Accessibility – Getting Accessibility Just Right

Henri Remonen

Ah, the good old alt texts. When I first started my journey as a dev I was like what alt texts? Then a little later on my journey, I was like "Picture of..." until I had come to the conclusion: I don't know sh*t about alt texts. In this post, I will highlight the why, how, and when of alt texts. Do not be like the earlier version of me, learn how to take the most out of the alt text attribute right now.
Non-semantic HTML layout with a red cross and arrow pointing to a semantic HTML layout with green check mark.

Essential Semantic HTML – Getting Accessibility Just Right

Henri Remonen

Semantic HTML is a crucial part of the markup language to get the most default functionality out of HTML. Writing semantic HTML not only makes it more readable, requires less custom logic but also comes with pre-defined accessibility features. There is not a single good reason not to write semantic HTML over non-semantic HTML.