(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.
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.
Yesterday I was working on creating the slides and accompanying demos for my upcoming Web Directions Code talk next week. One of the demos I’m creating is a basic proof of concept for a simple switch that is used to switch the theme of a UI from light to dark and vice versa. I liked, and was inspired, by the theme switch in the Medium app, shown below.
The Medium app’s theme customizer is a simple popup panel that includes a simple switch for switching from light to dark mode and vice versa.
I’m currently in Toronto, Canada, where I ran a workshop two days ago and gave a talk today at yet another SmashingConf event. Like all previous SmashingConfs, it was.. well.. smashing! But this one stood out for me so much that, for the first time ever, I found myself firing my code editor up to write this short and sweet conference review. I felt like I needed to save a part of this experience in written format.
Earlier this month I rolled out a new and long overdue feature on this Web site: offline viewing. In other words, from now on, after your first visit, you can re-visit my Web site even when you’re not connected to the Internet. Furthermore, depending on the device and application you’re using to visit this site, you may also be able to add the site to your mobile homescreen, similar to other native applications.