• 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
  • Useful Front-End Boilerplates And Starter Kits

    Today, we’re shining the spotlight on boilerplates and starter kits for all kinds of projects, from static site templates and React/Vue starter kits to favicon and accessibility templates and emergency site templates. This collection is by no means complete, but rather a selection of things that the team at Smashing found useful and hope will […]

    READ MORE
  • Three Front-End Auditing Tools I Discovered Recently

    Is every resource properly minified and compressed? Are all the caching headers set correctly? Does the site load all the resources in the best order to guarantee a fast first paint? These are only a few questions to consider when having the goal of building a fast website. Building for the web is complex these […]

    READ MORE
  • Meet :has, A Native CSS Parent Selector (And More)

    Parent selector has been on developers’ wishlist for more than 10 years and it has become one of the most requested CSS features alongside container queries ever since. The main reason this feature wasn’t implemented all this time seems to be due to performance concerns. The same was being said about the container queries and […]

    READ MORE
  • From AVIF to WebP: A New Smashing Book By Addy Osmani

    Images have been a key part of the web for decades. We interpret images much faster than text, which is why high-quality visuals drive conversions and user engagement. To be effective, all these images need to be carefully orchestrated to appear on the screen fast — but as it turns out, loading images efficiently at […]

    READ MORE
  • How To Build A Geocoding App In Vue.js Using Mapbox

    Pinpoint accuracy and modularity are among the perks that make geocodes the perfect means of finding a particular location. In this guide, we’ll build a simple geocoding app from scratch, using Vue.js and Mapbox. We’ll cover the process from building the front-end scaffolding up to building a geocoder to handle forward geocoding and reverse geocoding. […]

    READ MORE
  • Getting Started With Webpack

    In the early days when modularity was introduced in JavaScript, there was no native support for running modules within the browser. Support for modular programming was being implemented in Node.js using the CommonJS blueprint and it was being adopted by those using JavaScript for building server-side applications. It also had prospects for large web applications […]

    READ MORE
  • Managing Shared State In Vue 3

    State can be hard. When we start a simple Vue project, it can be simple to just keep our working state on a particular component: setup() { let books: Work[] = reactive([]); onMounted(async () => { // Call the API const response = await bookService.getScienceBooks(); if (response.status === 200) { books.splice(0, books.length, …response.data.works); } }); […]

    READ MORE
  • How To Fix Cumulative Layout Shift (CLS) Issues

    Cumulative Layout Shift (CLS) attempts to measure those jarring movements of the page as new content — be it images, advertisements, or whatever — comes into play later than the rest of the page. It calculates a score based on how much of the page is unexpectedly moving about, and how often. These shifts of […]

    READ MORE
  • Improving The Performance Of An Online Store (Case Study)

    Every front-end developer is chasing the same holy grail of performance: green scores in Google Page Speed. Tangible signs of work well done are always appreciated. Like the hunt for the grail, though, you have to question whether this is really the answer you are looking for. Real-life performance for your users and how the […]

    READ MORE
  • Smashing Podcast Episode 38 With Ivan Akulov: Why Is My React App Slow?

    In this episode, we’re talking about React performance. What factors slow our React apps down, and how can we fix it? I spoke to expert Ivan Akulov to find out. Show Notes Ivan on Twitter Ivan’s consultancy PerfPerfPerf Smashing Workshop The React Performance Masterclass [SOLD OUT] Weekly Update A Guide To Undoing Mistakes With Git […]

    READ MORE
  • Setting Up A Currency Convertor With ExchangeRatesApi.io

    Products and services are increasingly accessed and bought online. As we live in a global village, if we have an online shop, many of our visitors will quite likely be based on a different country than our own, and use a different currency than our own. If we want to provide a great user experience […]

    READ MORE