September 14, 2020 — GreenSock Animation Platform (GSAP) is a set JavaScript functions that let you tween a value/attribute/CSS property over time and insert these tweens into a timeline for more complex animations. In this article, Blessing explains how GSAP plays well with the React library by integrating its functions into a React component in building an example landing page with a variety of animations. Read more…

September 11, 2020 — This week we celebrate the 14th birthday of Smashing Magazine. We didn’t quite have the year that we planned though! I took a look back at some memories from this year and previous years — with the help of the team and some Smashing friends. Read more…

September 11, 2020 — Being able to run Google’s Lighthouse analysis suite programmatically provides a lot of advantages, especially for larger or more complex web applications. Using Lighthouse programmatically allows engineers to set up quality monitoring for sites that need more customization than straightforward applications of Lighthouse (such as Lighthouse CI) allow. This article contains a brief introduction to Lighthouse, discusses the advantages of running it programmatically, and walks through a basic configuration. Read more…

September 10, 2020 — Choosing what CMS to use in your next development project is a critical decision for any business, large or small. In this guide, Jonathan Kelley is going to run through the potential of Craft CMS, setting up a local environment and creating a basic cat blog with an API endpoint to accompany it. It’s a perfect jumping off point for anyone looking to expand from their current CMS system, or make the leap from Wordpress. Read more…

September 9, 2020 — In this guide, Ibrahima Ndaw will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production. We will also build a blog, step by step, using Next.js and MDX. Finally, we’ll cover why you would opt for Next.js instead of “vanilla” React and alternatives such as Gatsby. Read more…

September 8, 2020 — Thanks to the wide support of the prefers-reduced-motion-media feature, we now have more advanced ways to design motion that can be creative and innovative while also being safer for those with motion sensitivities. Read more…

September 8, 2020 — We’re talking about SVG Animation. How can vector images, JavaScript and CSS all work together to provide engaging motion graphics? Drew McLellan talks to SVG expert Cassie Evans to find out. Read more…

September 7, 2020 — Meet our Smart Interface Design Patterns Checklist Cards, a deck of 100 cards with questions to ask when designing and building any interface component — carousel, hamburger, table, date picker, autocomplete, slider, onboarding, pricing plans, authentication, web forms and many others. Check the preview (PDF) and jump to description ↓ Read more…

September 7, 2020 — Postman allows you to manually test your APIs in both its desktop and web-based applications. However, it also has the ability for you to automate these tests by writing JavaScript assertions on your API endpoints. In this article, Kelvin Omereshone will learn how to write automated tests on web APIs with Postman. In order to follow along to this tutorial, you’ll need at least a fair amount of familiarity with Postman. Read more…

September 4, 2020 — A component library helps to keep a design consistent across multiple projects. It ensures consistency because any changes made will propagate across the projects that make use of it. In this tutorial, Ademola Adegbuyi will show you how to build a component library, using Emotion in React to resolve inconsistencies. At the end of this piece, you should be able to create a component library that fits whatever use case you have in mind! Read more…