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 never wanted to be a big publishing house: Our team...

6h

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 a simple goal of abstracting away commonly...

1d

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....

2d

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, we won’t...

3d

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. However,...

4d

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 of our plans for 2020. We were looking forward...

1w

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...

1w

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, growing to over 5,000 members in just a year of it...

2w

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 React App or Gatsby....

2w

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...

2w