Smashing Online Workshops (July-October 2021)

How do we build and establish a successful design system? What about modern CSS and JavaScript? What’s the state of HTML Email? And what are new, smart design patterns we could use? What will it take us to move to TypeScript or Vue.js? With our line-up of online workshops, we try to answer these questions well. Our workshops bring in knowledgeable,...

3h

Automating Screen Reader Testing On macOS Using Auto VO

If you’re an accessibility nerd like me, or just curious about assistive technology, you’ll dig Auto-VO. Auto-VO is a node module and CLI for automated testing of web content with the VoiceOver screen reader on macOS. I created Auto VO to make it easier for developers, PMs, and QA to more quickly perform repeatable, automated tests with real assistive...

7h

Designing With Code: A Modern Approach To Design (Development Challenges)

Friction in cooperation between designers and developers is fueling an ever-evolving discussion as old as the industry itself. We came a long way to where we are today. Our tools have changed. Our processes and methodologies have changed. But the underlying problems often remained the same. One of the recurring problems I often tend to see, regardless...

1d

Image To Text Conversion With React And Tesseract.js (OCR)

Data is the backbone of every software application because the main purpose of an application is to solve human problems. To solve human problems, it is necessary to have some information about them. Such information is represented as data, especially through computation. On the web, data is mostly collected in the form of texts, images, videos, and...

2d

An Alternative Voice UI To Voice Assistants

For most people, the first thing that comes to mind when thinking of voice user interfaces are voice assistants, such as Siri, Amazon Alexa or Google Assistant. In fact, assistants are the only context where most people have ever used voice to interact with a computer system. While voice assistants have brought voice user interfaces to the mainstream,...

5d

Client-Side Routing In Next.js

Hyperlinks have been one of the jewels of the Web since its inception . According to MDN, hyperlinks are what makes the Web, a web. While used for purposes such as linking between documents, its primary use is to reference different web pages identifiable by a unique web address or a URL. Routing is an important aspect of each web application as much...

5d

Your Image Is Probably Not Decorative

The img element’s alt attribute can be “nulled,” which is the act of setting it to an empty string instead of a text description. Nulling an alt description means there is no information between the opening and close quotes. If there is an empty space, it will not be considered nulled: <img alt="" src="/images/cat.jpg" /> This image...

6d

A Complete Guide To Accessibility Tooling

Learning to build accessible websites can be a daunting task for those who are just starting to implement accessible practices. We’ve pulled together a wide range of accessibility tooling, ranging from single-use bookmarklets to full-blown applications, in order to help you get started with building more accessible websites. ARIA The WebAIM Million...

1w

Spinning Up Multiple WordPress Sites Locally With DevKinsta

When building themes and plugins for WordPress, we need to make sure they work well in all the different environments where they will be installed. We can sometimes control this environment when creating a theme for our own websites, but at other times we cannot, such as when distributing our plugins via the public WordPress repository for anyone to...

2w

Smashing Podcast Episode 39 With Addy Osmani: Image Optimization

In today’s episode of the Smashing Podcast, we’re talking about image optimization. What steps should we follow for performant images in 2021? I spoke with expert Addy Osmani to find out. Show Notes “Image Optimization,” Addy Osmani Addy on Twitter Addy’s personal website Weekly Update Meet :has, A Native CSS Parent Selector (And More)written...

2w