Articles by Smashing Magazine

  • How To Build A Real-Time Multi-User Game From Scratch

    As the pandemic lingered, the suddenly-remote team I work with became increasingly foosball-deprived. I thought about how to play foosball in a remote setting, but it was clear that simply reconstructing the rules of foosball on a screen would not be a lot of fun. What _is_ fun is to kick a ball using toy […]

    READ MORE
  • Respecting Users’ Motion Preferences

    When working with motion on the web, it’s important to consider that not everyone experiences it in the same way. What might feel smooth and slick to some might be annoying or distracting to others — or worse, induce feelings of sickness, or even cause seizures. Websites with a lot of motion might also have […]

    READ MORE
  • Building The SSG I’ve Always Wanted: An 11ty, Vite And JAM Sandwich

    I don’t know about you, but I’ve been overwhelmed by all the web development tools we have these days. Whether you like Markdown, plain HTML, React, Vue, Svelte, Pug templates, Handlebars, Vibranium — you can probably mix it up with some CMS data and get a nice static site cocktail. I’m not going to tell […]

    READ MORE
  • Building An API With Gatsby Functions

    You’ve probably heard about Serverless Functions, but if you haven’t, Serverless Functions provide functionality typically associated with server-side technologies that can be implemented alongside front-end code without getting caught up in server-side infrastructures. With server-side and client-side code coexisting in the same code base, front-end developers like myself can extend the reach of what’s possible […]

    READ MORE
  • Smashing Podcast Episode 42 With Jeff Smith: What Is DevOps?

    In this episode, we’re talking about DevOps. What is it, and is it a string to add to your web development bow? Drew McLellan talks to expert Jeff Smith to find out. Show Notes Jeff on Twitter Jeff’s book Operations Anti-Patterns, DevOps Solutions Attainable DevOps Weekly Update Bridging The Gap Between Designers And Developers written […]

    READ MORE
  • Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)

    Fairprice is one of the largest online grocery stores in Singapore. We are continuously looking out for areas of opportunities to improve the user’s online shopping experience. Performance is one of the core aspects to ensure our users are having a delightful user experience irrespective of their devices or network connection. There are many key […]

    READ MORE
  • Tips And Tricks For Evaluating UX/UI Designers

    When a company’s digital representation lacks a dedicated UX/UI design team, it can be hard to produce something that stands out from the crowd. The best designers and agencies have a touch of magic about them, transforming your company’s goals, customers’ demands, user specifications, and design instruments into a beneficial experience for both users and […]

    READ MORE
  • Smart CSS Solutions For Common UI Challenges

    It’s incredible to see what we can do with CSS today, especially if you still remember how difficult it once was to figure out stacking contexts or why margins collapsed and why top: float didn’t work. In this post, we’ll look at just that: exciting and fun things we can do with CSS, exploring common […]

    READ MORE
  • Upcoming Live Workshops On Front-End & UX (Oct 2021–Jan 2022)

    There are fantastic video courses out there, yet online workshops are just different. You can always ask a question live, you can share your screen and get immediate feedback, and you can work on group exercises with people around the world. In fact, that’s why we’ve fallen in love with online workshops — and have […]

    READ MORE
  • Useful React APIs For Building Flexible Components With TypeScript

    Have you ever used React.createElement directly? What about React.cloneElement? React is more than just transforming your JSX into HTML. Much more, and to help you level up your knowledge of lesser-known (but very useful) APIs the React library ships with. We’re going to go over a few of them and some of their use cases […]

    READ MORE
  • Bridging The Gap Between Designers And Developers

    In the past couple of years, it’s no secret that our design tools have exponentially evolved. With many having great component management and prototyping, you may be wondering what big leap could possibly be next? Let’s look at a typical dilemma: Let’s say that you’re a designer for the design systems team where you are […]

    READ MORE
  • The Autofill Dark Pattern

    A newspaper sign-up form had fields for name, email, and password. So, I started typing on the name field, and the autofill suggested my profile. But there was something funky. The autocomplete suggestion included my mailing address. Needless to say, it was puzzling: the address was not a field in the form. Why was it […]

    READ MORE
  • Composable CSS Animation In Vue With AnimXYZ

    In this article, you will learn how to use the AnimXYZ toolkit to create unique, interactive, and visually engaging animations in Vue.js and plain HTML. By the end of this article, you will have learned how adding a few CSS classes to elements in Vue.js components can give you a lot of control over how […]

    READ MORE
  • Building A Static-First MadLib Generator With Portable Text And Netlify On-Demand Builder Functions

    Creating an interactive experience with fiction can be a chore with traditional content management tools. Writing the prose, creating the forms, combining them in the frontend — these are often the domain of three different people. Let’s make it the domain of just one content creator in which the user will fill out a form […]

    READ MORE
  • Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG)

    In the fight against the COVID-19 pandemic, scientists are tirelessly working on vaccines and medicine against COVID-19 in laboratories. In the meantime, the entire world is waiting for good news while people worldwide are hardly waiting to unite and return to a peaceful life. For now, we can still only observe the regime of social […]

    READ MORE
  • A Guide To CSS Debugging

    We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. And on some browsers, that new feature just doesn’t seem to be working. Debugging — regardless of the language — is never a favorite task. CSS, […]

    READ MORE
  • Local Testing A Serverless API (API Gateway And Lambda)

    This article is for anyone struggling with testing cloud services locally, and specifically for people wanting to locally test an API that uses API Gateway and Lambda, with the Serverless framework, on AWS. I was once in desperate need of this knowledge, and my co-worker Joseph Jaffe helped me put this solution into place. A […]

    READ MORE
  • How To Build An Expandable Accessible Gallery

    One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on its own may not be that exciting. We could, for example, add a click effect to enlarge the image without affecting the grid to make it a little bit more fun. And of course, as […]

    READ MORE
  • How To Implement Search Functionality In Your Nuxt App Using Algolia InstantSearch

    Giving users the ability to quickly search through and navigate our content easily comes with great benefits. This not only improves the user experience, but also increases user retention and boosts conversion as users can now explore beyond what brought them to our site in the first place. In this tutorial, we’ll be looking at […]

    READ MORE
  • A Time Of Transition (October 2021 Desktop Wallpapers Edition)

    Inspiration lies everywhere. In the fall leaves shining in the most beautiful colors these days, in the misty mornings and golden afternoons that October might bring along, or taking a walk on a windy day. Whatever it is that gets you inspired, our monthly wallpapers series is bound to give you a little inspiration boost, […]

    READ MORE