• The State Of Web Workers In 2021

    I’m weary of always comparing the web to so-called “native” platforms like Android and iOS. The web is streaming, meaning it has none of the resources locally available when you open an app for the first time. This is such a fundamental difference, that many architectural choices from native platforms don’t easily apply to the […]

    READ MORE
  • The Many Shades Of July (2021 Desktop Wallpapers Edition)

    Often, it’s the little things that inspire us and that we treasure most. The sky shining in the most beautiful colors as a seemingly endless summer day comes to an end, riding your bike through a light rain shower on a hot July afternoon, or maybe it’s a scoop of your favorite ice cream that […]

    READ MORE
  • Breaking Down Bulky Builds With Netlify And Next.js

    One of the biggest pains of working with statically generated websites is the incrementally slower builds as your app grows. This is an inevitable problem any stack faces at some point and it can strike from different points depending on what kind of product you are working with. For example, if your app has multiple […]

    READ MORE
  • Smashing Podcast Episode 40 Mike Cavaliere: What Is Chakra UI For React?

    In this episode, we’re talking about Chakra UI. What is it and how can it help with your React projects? Drew McLellan talks to expert Mike Cavaliere to find out. Show Notes Chakra UI Mike on Twitter Mike’s personal website Cut Into The Jamstack book Weekly Update Designing With Code: A Modern Approach To Designwritten […]

    READ MORE
  • Creating Custom Emmet Snippets In VS Code

    Earlier this year, I shared the HTML boilerplate I like to use when starting new web projects with line-by-line explanations on my blog. It’s a collection of mostly <head> tags and attributes I usually use on every website I build. Until recently, I would just copy and paste the boilerplate whenever I needed it, but […]

    READ MORE
  • Creating A Multi-Author Blog With Next.js

    In this article, we are going to build a blog with Next.js that supports two or more authors. We will attribute each post to an author and show their name and picture with their posts. Each author also gets a profile page, which lists all posts they contributed. It will look something like this: We […]

    READ MORE
  • How To Run A UX Audit For A Major EdTech Platform (Case Study)

    The business world today is obsessed with user experience (UX) design. And for good reason: Every dollar invested in UX brings $100 in return. So, having some free time in quarantine, I decided to check whether one of the most evolving industries right now, education technology (EdTech), uses this potential of UX. My plan was […]

    READ MORE
  • The Rise Of Design Thinking As A Problem Solving Strategy

    Having spent the last 20 years in the world of educational technology working on products for educators and students, I have learned to understand teachers and administrators as designers themselves, who use a wide set of tools and techniques to craft learning experiences for students. I have come to believe that by extending this model […]

    READ MORE
  • 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 […]

    READ MORE
  • 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 […]

    READ MORE
  • 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 […]

    READ MORE
  • 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, […]

    READ MORE
  • 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 […]

    READ MORE
  • 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 […]

    READ MORE
  • 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” /> […]

    READ MORE
  • 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 survey found that […]

    READ MORE
  • 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 […]

    READ MORE
  • 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 by […]

    READ MORE
  • When CSS Isn’t Enough: JavaScript Requirements For Accessible Components

    As the author of ModernCSS.dev, I’m a big proponent of CSS solutions. And, I love seeing the clever ways people use CSS for really out-of-the-box designs and interactivity! However, I’ve noticed a trend toward promoting “CSS-only” components using methods like the “checkbox hack”. Unfortunately, hacks like these leave a significant amount of users unable to […]

    READ MORE
  • Web Design Done Well: Making Use Of Audio

    It’s easy to get hyper-focused on how things look on the web. There’s a lot to look at. You’re looking at this right now! However, in the age of touchscreens and home assistants, it’s safe to say sight isn’t the only sense worth caring about. George Lucas once said half of any movie’s magic comes […]

    READ MORE