• Designing For Attention

    We face many competing interests for users’ time and attention. If we factor in perceptions of dwindling human attention spans, we might speculate capturing and holding users’ attention is based on luck as much as sound design. However, we can incorporate meaningful tactics into our design to ensure we grab users’ attention. This is critical, […]

    READ MORE
  • Comparing Styling Methods In Next.js

    As you might be aware, there are many differing perspectives on CSS-in-JS, and we all have an opinion of the topic in one way or the other that might be quite different from the opinions of framework authors. Next.js is one of the recommended tool-chains when creating a new React app. Tools like Next have […]

    READ MORE
  • Advanced GraphQL Usage In Gatsby Websites

    Before the release of GraphQL in 2015, Representational State Transfer (REST) was the main way to interface with an API. The introduction of GraphQL was therefore a major change in software development. As a modern static site generator, Gatsby leverages GraphQL to provide a concise methodology for bringing in and manipulating data into the framework. […]

    READ MORE
  • SmashingConfs, Inspiring Talks And Birthday Cake

    Do you know when the very first article got published on Smashing Magazine? Well, it doesn’t take long to research and find out: it was back in September ’06. Since then, the web has obviously changed a lot, but there’s one thing that has always remained true for us: we care about quality content. We […]

    READ MORE
  • How To Build Rapport With Your Web Design Clients

    Working as a freelancer in the creative space is rife with obstacles. Some we can see coming, others we can’t. One of the challenges that many freelance web designers face in their first few years is managing client relationships. We’ve all heard about — and experienced — the horrors of clients running amok on our […]

    READ MORE
  • How To Build A Blog With Next And MDX

    Next.js is a React framework that enables you to build static and dynamic apps quickly. It is production-ready and supports server-side rendering and static site generation out of the box, making Next.js apps fast and SEO-friendly. In this tutorial, I will first explain what exactly Next.js is and why you’d use it instead of Create […]

    READ MORE
  • Get Up And Running With Craft CMS

    Craft CMS is brought to you by the talented folks at Pixel & Tonic. It is actively maintained and kept in line with the changes in the modern web development world and is rising in popularity amongst CMS’s — with an impressive client list such as Netflix. It also has a very active Discord server, […]

    READ MORE
  • An Introduction To Running Lighthouse Programmatically

    Lighthouse is Google’s suite of website quality analysis tools. It allows you to assess your site’s performance, accessibility, SEO, and more. It is also highly configurable, making it flexible enough to be useful for all sites, from the simplest to the highly complex. This flexibility includes several different ways of running the tests, allowing you […]

    READ MORE
  • Smashing Magazine Is Fourteen!

    This week at Smashing, we celebrated 14 years of bringing you the best web design and development content — and what an interesting year it has been! Last year, I published the 13th birthday post from our team meeting in Freiburg. Back then, we were about to run SmashingConf Freiburg and our meeting was full […]

    READ MORE
  • Animating React Components With GreenSock

    During the early days of the World Wide Web, things were rather static and boring. Webpages were mostly based on graphic design and layouts from the print world until animations were introduced. Animation can engage and hold people’s attention longer than a static web page and communicates an idea or concept more clearly and effectively. […]

    READ MORE
  • Building A Component Library With React And Emotion

    According to Clearleft, a component library is: “A collection of components, organised in a meaningful manner, and often (but not necessarily) providing some way to browse and preview those components and their associated assets.”— “On Building Component Libraries,” Clearleft We’ll learn how to build a component library by making one that comprises four components: ButtonA […]

    READ MORE
  • How To Automate API Testing With Postman

    One of my favorite features in Postman is the ability to write automated tests for my APIs. So if you are like me and you use Postman and you are tired of manually testing your APIs, this article will show how to harness the test automation feature provided by Postman. In case you don’t know […]

    READ MORE
  • Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

    Last month we released Smart Interface Design Checklists PDF, a deck of 100 cards with questions to ask when designing and building pretty much any interface component. Each checklist — from intricate data tables and web forms to troublesome hamburgers and carousels — has been curated and refined for years. All checklists are based upon […]

    READ MORE
  • Smashing Podcast Episode 24 With Cassie Evans: What Is SVG Animation?

    Today we’re talking about SVG Animation. How can vector images, JavaScript and CSS all work together to provide engaging motion graphics? I spoke to SVG expert Cassie Evans to find out. Show Notes The SVG Animation Masterclass with Smashing Conference Cassie on Twitter Cassie’s personal website Weekly Update “How To Do More With Vue Router”by […]

    READ MORE
  • Designing With Reduced Motion For Motion Sensitivities

    CSS has recently added features that allow us to recognize certain user preferences and qualities of the user’s current environment. One of those new features, specifically the prefers-reduced-motion media feature, can be especially useful for designing more inclusive motion on the web. A few years back, I wrote an article about designing safer web animation […]

    READ MORE
  • September In All Its Facets (2020 Wallpapers Edition)

    September is just around the corner and, well, that means it’s time for some new wallpapers! Since more than nine years already, our monthly wallpapers series is the perfect opportunity for artists and designers from all across the globe to challenge their creative skills and dive into a little project just for fun. What tools […]

    READ MORE
  • How To Do More With Vue Router

    Vue Router is the official router for Vue. It deeply integrates with Vue core to make building Single Page Applications with Vue a breeze. Some of its popular features include: Dynamic Route matching. Named Routes. Named views. Programmatic navigation. These features are heavily used when developing with Vue and this is because they are part […]

    READ MORE
  • Building React Apps With Storybook

    Storybook is a UI explorer that eases the task of testing components during development. In this article, you will learn what storybook is about and how to use it to build and test React components by building a simple application. We’ll start with a basic example that shows how to work with storybook, then we’ll […]

    READ MORE
  • Everything Developers Need To Know About Figma

    If you aren’t using it yet the name Figma is surely a name that you’ve heard more and more over the last few years. Figma is a relatively new design tool that is browser-based. This means you don’t need to install it locally or buy expensive licenses to give team members access to design files. […]

    READ MORE
  • 4 Ways To Creatively Use Icons In Your Mobile Apps

    There’s nothing novel about using icons within mobile apps. From the home screen icon to the navigation menu, they’re pretty much a standard part of the apps that designers build. They come with big benefits too: Minimized distractions, More attractive UIs, Empowerment of users to easily engage with the app, Elimination of language barriers, Improvement […]

    READ MORE