Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image — SVG, of course, being the more flexible, powerful, and accessible replacement. But an SVG image is, at the end of the day, just an image, so while it can visually replace a checkbox, it doesn’t really substitute for it — the user still needs a checkbox to interact with.

The faster the user can navigate your UI the better. The faster they can get to the content they need, the better. Therefore, the less steps they have to go through, the more efficient their overall experience with the UI will be. And this applies to keyboard tabbing, too: the less tabs the user needs to stop at while navigating, the faster they are to get to where they need.

Ever since I learned about CSS Variables a few years back, my absolute favorite feature has been the ability to scope variables to components. But to be honest, I haven't been putting this feature to much use over the years, until I created my own pattern library last year to speed up prototyping and client work. That’s where scoped CSS variables really shined for me. So I want to share my favorite two ways to use CSS Variables to organize and maintain styles in my projects today.

(This article was originally published on 24accessibility). A few years ago I didn't know what the term "accessibility" meant. I built Web sites that were partially inaccessible because I didn't know better. Fast forward to today, I know enough to be able to write, speak and run workshops on accessibility, helping others build more a accessible and inclusive Web. Much like everyone else in our field, I am still learning.

A few months ago I teamed up with SuperFriendly to create an accessible micro-site for the Khan Academy 2018 Annual Report. The site is a very beautiful visual representation of Khan’s real-life impact on world education, their end-of-year financial reports, and more. By nature, the annual report contains a lot of data and visualizations and charts to represent it. My mission was to make sure that the way this data is presented and implemented is as accessible to site’s visitors as possible, regardless of how they explore the site.

An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. These buttons can be found in the majority of app and user interfaces today. The infamous hamburger menu button is a great example of such buttons when not visually labelled “Menu”. Twitter’s Compose Tweet icons are an example of icon-only buttons in the wild.

This is a fantastic post that “contains everything you need to know about alt-texts! When to use them and how to perfectly craft them.” The post is written by Daniel Göransson, a visually-impaired screen reader user and front-end developer. Writing proper alternative text for images is of utmost importance for anyone and everyone who cannot see those images, especially screen reader users. Thus the importance of writing proper image descriptions.

In this last article of the SVG Filter Effects series, I’ll share a list of useful resources and experiments to learn more about SVG Filters to start creating your own effects.

In this fifth article in the series of articles about SVG Filters you'll learn how to conform text to surface texture using an SVG displacement map similar to how you would do in graphics editors like Photoshop.

In this fourth article in the series of articles about SVG Filters you'll learn how to use feComponentTransfer to recreate Photoshop’s duotone image effect and control an image's luminance and color contrast.

In this third article in the series of articles about SVG Filters you'll learn all about the powerful feComponentTransfer operation and how it can be used to control the individual R/G/B/A components on a pixel level independently. As a practical example, we will be creating a poster image effect by using this primitive to limit the number of colors in an image.

In this second part of the SVG Filter series you'll learn all about the feMorphology filter, how it works and how you can use it to create paint-like image effects and proper text outlines.

The first article in a series on SVG filters. This guide will help you understand what they are and show you how to use them to create your own visual effects.

I’ve never taken or had any design classes in school or university. Most of my (humble) design knowledge I’ve picked up online from random articles here and there, and from breaking down and building designs that I liked. So, when I found Steve on Twitter and saw how he was sharing design tips targeted at developers with no design background, I followed him in the blink of an eye. I'm not exaggerating when I say that he was one of my best follows in 2018.

Chris Coyier started a thought exercise thread last week asking the community how they would approach building nested links. I had the same requirement a couple of years ago when I was building the front-end foundation for Smashing Magazine. So I thought I’d write my response to Chris’s thread out in the form of a blog post. The Challenge The following video shows what an article on the home page’s list of Latest Articles behaves like.

I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answers. I specifically asked for markup suggestions. Turns out, people mark questions and answers up differently. I got some interesting insight from the responses I got that partly changed the way I would approach building an FAQ section, and some validation for the way I always have built them.

I think we're at a time in Web design where colors have become first class citizens that deserve to have their own, semantic HTML element. This is especially true given the role and importance of color swatches in design systems today. I wouldn’t mind having a <color> element for that. But, unfortunately, we don’t have HTML elements dedicated for colors swatches. Or, do we? I found this gem of an article by Taylor Hunt signing up for and browsing his RSS feed recently.

A couple of weeks ago I tweeted about a feature that I didn’t know existed in VS Code: the visual color editor that pops up when you hover over color values in a style sheet. Sorry, your browser doesn't support embedded videos. The VS Code color editor that pops up when you hover over a color value. The editor allows you to visually choose and edit colors, and to switch from one color format to another.

I always try to customize in-house client workshops to my client’s needs. That sometimes also means that if my client’s design and dev team is interested in learning something that is not covered in my workshop, I will tweak the content of the workshop to make sure they learn what they need to make their work better. One such example is when I ran my SVG Workshop for the design and engineering team at Netflix last year.

The September 2018 issue of net Magazine came out today, featuring a six-page interview with yours truly, discussing all things front-end development and UX ahead of my upcoming workshop at Generate Conference in London. The interview features photos taken by me, in and outside of my home office. This isn’t my first interview feature in net magazine. My first feature was in 2015, a short while after I was awarded the Developer of the Year award in the 2015 net awards.