• Happy June Vibes For Your Screen (2021 Desktop Wallpapers Edition)

    There’s an artist in everyone. Some bring their creative ideas to life with digital tools, others capture the perfect moment with a camera, or love to grab pen and paper to create little doodles or pieces of lettering. And even if you think you’re far away from being an artist, well, it might just be […]

    READ MORE
  • Adding A Commenting System To A WYSIWYG Editor

    In recent years, we’ve seen Collaboration penetrate a lot of digital workflows and use-cases across many professions. Just within the Design and Software Engineering community, we see designers collaborate on design artifacts using tools like Figma, teams doing Sprint and Project Planning using tools like Mural and interviews being conducted using CoderPad. All these tools […]

    READ MORE
  • Useful VS Code Extensions For Front-End Developers

    We spend so much time in our text editors, and every now and again we encounter those little frustrating issues that slow us down. Perhaps finding the right file takes too long, or finding a matching closing bracket becomes a long-winded adventure on its own. Let’s fix all these annoyances for good. In this post, […]

    READ MORE
  • How To Build And Launch Responsive Websites Faster With Editor X

    As designers, we are used to having a lot of creative freedom within our tools. We intuitively select, move and fine-tune things until they look just right. Once the work leaves the design tool, we give away this level of control to an unpredictable, diverse, and fluid browser environment. There, some of our decisions suddenly […]

    READ MORE
  • Accessible SVGs: Perfect Patterns For Screen Reader Users

    While Scalable Vector Graphics (SVGs) were first introduced in the late 90s, they have seen a massive resurgence in popularity in the last decade due to their extreme flexibility, high fidelity, and relative lightness in a world where bandwidth and performance matter more than ever. Advancements in JavaScript and the introduction of CSS media queries […]

    READ MORE
  • A Guide To Undoing Mistakes With Git (Part 2)

    In this second part of our series on “Undoing Mistakes with Git”, we’ll bravely look danger in the eye again: I’ve prepared four new doomsday scenarios — including, of course, some clever ways to save our necks! But before we dive in: take a look at the check out previous articles on Git for even […]

    READ MORE
  • A New Way To Reduce Font Loading Impact: CSS Font Descriptors

    Font loading has long been a bugbear of web performance, and there really are no good choices here. If you want to use web fonts your choices are basically Flash of Invisible Text (aka FOIT) where the text is hidden until the font downloads or Flash of Unstyled Text (FOUT) where you use the fallback […]

    READ MORE
  • CSS Container Queries: Use-Cases And Migration Strategies

    When we write media queries for a UI element, we always describe how that element is styled depending on the screen dimensions. This approach works well when the responsiveness of the target element media query should only depend on viewport size. Let’s take a look at the following responsive page layout example. However, responsive Web […]

    READ MORE
  • Building A Rich Text Editor (WYSIWYG) From Scratch

    In recent years, the field of Content Creation and Representation on Digital platforms has seen a massive disruption. The widespread success of products like Quip, Google Docs and Dropbox Paper has shown how companies are racing to build the best experience for content creators in the enterprise domain and trying to find innovative ways of […]

    READ MORE
  • Boost Your Skills Online: Smashing Workshops On Front-End And Design

    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 online workshops, we try to answer these questions well. Our […]

    READ MORE
  • How To Implement Authentication In Next.js With Auth0

    “Authentication” is the action of validating that a user is who he or she claims to be. We usually do this by implementing a credentials system, like user/password, security questions, or even facial recognition. “Authorization” determines what a user can (or can’t) do. If we need to handle authentication and authorization in our web application, […]

    READ MORE
  • Frustrating Design Patterns: Mega-Dropdown Hover Menus

    Complex websites often rely on complex navigation. When a website houses thousands of pages, often combined with micro-websites and hundreds of subsections, eventually the navigation will go deep and broad. And with such a complex multi-level navigation, showing the breadth of options requires quite a bit of space. Think of large eCommerce retailers and large […]

    READ MORE
  • How To Create, Edit And Animate SVGs All In One Place With SVGator 3.0

    SVGator is evolving and it’s evolving a lot. Three years ago, we published a comprehensive introduction to the basic use of SVGator. At that time it was an app meant solely for animating SVG files created in other apps. Two years ago, we introduced you to a new version of SVGator and its improved animation […]

    READ MORE
  • Smashing Podcast Episode 37 With Adam Argyle: What Is VisBug?

    In this episode, we’re talking about VisBug. What is it, and how is it different from the array of options already found in Chrome DevTools? Drew McLellan talks to its creator Adam Argyle to find out. Show Notes VisBug sandbox and playground Adam on Twitter Adam’s personal site VisBug on YouTube VisBug 101 Weekly Update […]

    READ MORE
  • How We Improved Our Core Web Vitals (Case Study)

    Last year, Google started emphasizing the importance of Core Web Vitals and how they reflect a person’s real experience when visiting sites around the web. Performance is a core feature of our company, Instant Domain Search—it’s in the name. Imagine our surprise when we found that our vitals scores were not great for a lot […]

    READ MORE
  • Tree-Shaking: A Reference Guide

    Before starting our journey to learn what tree-shaking is and how to set ourselves up for success with it, we need to understand what modules are in the JavaScript ecosystem. Since its early days, JavaScript programs have grown in complexity and the number of tasks they perform. The need to compartmentalize such tasks into closed […]

    READ MORE
  • Frustrating Design Patterns That Need Fixing: Birthday Picker

    You’ve seen them before. Confusing and frustrating design patterns that seem to be chasing you everywhere you go, from one website to another. Perhaps it’s a disabled submit button that never communicates what’s actually wrong, or tooltips that — once opened — cover the input field just when you need to correct a mistake. They […]

    READ MORE
  • Little Smashing Stories

    This is not a regular Smashing article. Over a decade ago, we set out to send a truly smashing newsletter with useful tips and techniques for designers and developers. The first issue was sent out in early 2009. And we would have never imagined that we’d reach 190.000 wonderful folks like you, who read email […]

    READ MORE
  • A Primer On CSS Container Queries

    At present, container queries can be used in Chrome Canary by visiting chrome://flags and searching for and enabling them. A restart will be required. Note: Please keep in mind that the spec is in progress, and could change at any time. You can review the draft document which will update as the spec is formed. […]

    READ MORE
  • The Conference Platform We Use For Our Online Events: Hopin

    When the Smashing team first heard of COVID-19, we didn’t know what to think. On a Monday, we began making alterations to our event, adding space, cleaning stations, rules, etc. But that Friday we knew this would change the scope of our year. From there, began new discussions throughout Smashing. What is the heart of […]

    READ MORE