List Style Recipes
Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a
CSS Functions Guide
Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration.
No-Comma Color Functions in CSS
There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more
Accessible Animations in React
I really love animation, but not everybody does. In fact, it can make some people literally sick! In this tutorial, we'll see how to ensure that we respect user preferences, and create animations that can be disabled.
Common mistakes with React Testing Library
Some mistakes I frequently see people making with React Testing Library.
React Integration Testing: Greater Coverage, Fewer Tests
Integration tests are a natural fit for interactive websites, like ones you might build with React. They validate how a user interacts with your app without
Readability Algorithms Should Be Tools, Not Targets — Smashing Magazine
In recent years a slew of ‘readability’ programs have appeared to help us tidy up the things we write. Used everywhere from newsrooms to browser plugins, these systems offer automated feedback on how writing can be clearer, neater, and less contrived. Sounds good right? Well, up to a point. Readability programs may seem like a godsend, but the worst thing writers can do is write to please them abo
CSS-Tricks Chronicle XXXVIII
Hey hey, these "chronicle" posts are little roundups of news that I haven't gotten a chance to link up yet. They are often things that I've done off-site,
Using Formik to Handle Forms in React
There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a useful set of elements and features — from
Implementing Dark Mode In React Apps Using styled-components — Smashing Magazine
Light mode is a convention in most web and mobile apps. However, in modern development, we have seen how dark mode, which displays light text and interface elements on a dark background, is quickly becoming a user preference. In this article, Blessing Krofegha will show you how to efficiently implement dark mode in a React app on a simple web page, using the styled-components library and leveragin
How to Make a CSS-Only Carousel
Editor's Note: Chrome is prototyping a new feature for creating carousels directly in CSS, including scroll buttons and scroll markers for navigating between
Super Simple Start to React
The most simple React setup imaginable
The Quest for the Perfect Dark Mode
Dark Mode has become common enough that it's a user expectation. And yet, creating the perfect dark mode with a statically-built site/app is deceptively tricky. In this in-depth tutorial, we'll see how to build the perfect, flicker-free, customizable theming solution for React/Next.js apps.
Building a Scalable CSS Architecture With BEM and Utility Classes
Maintaining a large-scale CSS project is hard. Over the years, we've witnessed different approaches aimed at easing the process of writing scalable CSS. In
Implementing Skeleton Screens In React — Smashing Magazine
Skeleton screens offer a better user experience by reducing loading-time frustration. By focusing on progress instead of wait times, it create the illusion for users that information will be incrementally displayed on the screen. In this tutorial, Blessing Krofegha will show you what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons. We’ll build a
Better Form Inputs for Better Mobile User Experiences
Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and
Pseudo-Randomly Adding Illustrations with CSS
Between each post of Eric Meyer’s blog there’s this rather lovely illustration that can randomly be one of these five options:
npm has joined GitHub
With the npm acquisition complete, we’re ready to start the next chapter of npm and support the JavaScript community in a new way.
Best Practices With React Hooks — Smashing Magazine
React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components. The example below shows a counter whose state is managed using the useState() hook. Each time you click on the button, we make use of setCount() to update the value of count by 1. In this article, Adeneye David Abiodun covers the rules of React Hooks and ho
How To Create A Particle Trail Animation In JavaScript — Smashing Magazine
If you are thinking about distracting visitors of your website with a fancy, glittering particle animation for a few moments, while some data is loaded in the background, all you need is some basic knowledge of CSS and JavaScript and a lightweight animation library such as anime.js. In the end, we should have the following result: Particle animations belong to the most impressive animations that e
Styling in the Shadow DOM With CSS Shadow Parts
Safari 13.1 just shipped support for CSS Shadow Parts. That means the ::part() selector is now supported in Chrome, Edge, Opera, Safari, and Firefox. We’ll
No-Class CSS Frameworks
I linked up Water.css not long ago as an interesting sort of CSS framework. No classes. No <h2 class="is-title">. You just use semantic HTML and get
CSS Variables for React Devs
CSS variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our mental frame around media queries has been wrong all along.
Stop using client-side route redirects
Why you should stop using client-side route redirects (like the `from` prop on React Router's Redirect component) and what you should do instead.
Inspired Design Decisions With Herb Lubalin: Typography Can Be As Exciting As Illustration And Photography — Smashing Magazine
In this eighth issue of Inspired Design Decisions, Andy Clarke will explain how learning about American graphic designer and typographer Herb Lubalin has transformed his approach to typography on the web. How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise
Getting Started With The React Hooks API — Smashing Magazine
In this tutorial, you are going to learn and understand what React hooks are, the basic React Hooks that are available and also examples of how to write them for your React applications. In the process, you will also get to know about some additional hooks that were shipped with React 16.8 and also how to write your own custom React Hooks.
CSS Findings From The New Facebook Design
Ahmad Shadeed digs around the new Facebook's front-end code.
How to Re-Create a Nifty Netflix Animation in CSS
The design for Netflix's browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll
Styling Ordered Lists with CSS Counters
Styling an ordered list can be surprisingly tricky; there's no way to get at that bullet! In this tutorial, we'll see a handy trick using CSS counters that lets us style ordered lists without breaking proper semantics.
Building Arrive's Confetti in React Native with Reanimated - Shopify
Shopify is investing in React Native as our primary choice of mobile technology moving forward. As a part of this we’ve rewritten our package tracking app Arrive with React Native and launched it on Android—an app that previously only had an iOS version. One of the most cherished features by the users of the Arrive iOS app is the confetti that rains down on the screen when an order is delivered. T
The State Reducer Pattern with React Hooks
A pattern for you to use in custom hooks to enhance the power and flexibility of your hooks.
CSS-Only Marquee Effect
You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.
Getting JavaScript to Talk to CSS and Sass
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large
Accessibility Links
Austin Gil has kicked off the first in a five-part series about "HTML Forms Right" and to starts with semantics. It's talking to the "we build our front-ends
Why Do Some HTML Elements Become Deprecated?
The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things
Django Highlights: Templating Saves Lines (Part 2) — Smashing Magazine
Creating front-end code in Django with templating and server-side rendering combines the fine-grained control of handwritten HTML with the clean code and powerful features of generated pages. We explore breaking down a complex webpage into multiple templates, composing those components, and applying tags and filters to refactor a plain HTML page.
Performant Expandable Animations: Building Keyframes on the Fly
Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve
Building A Web App With Headless CMS And React — Smashing Magazine
In this article, Blessing Krofegha introduces the concept of the headless CMS, a backend-only content management system that allows developers to create, store, manage and publish the content over an API. It gives developers the power to quickly build excellent user experiences, free from the worry of its impact on the back-end business logic.
4 CSS Grid Properties (and One Value) for Most of Your Layout Needs
CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout
Announcing “use-sound”, a React Hook for Sound Effects
By and large, using the web is a visual experience. This is in terrible contrast to mobile apps, which interact with three of our human senses (sight, sound, and touch, through haptic feedback). I just released a library to make it easy to add sound to your React app, and I make the case that you should consider using it!
Creating a Pencil Effect in SVG
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why
How to use CSS Scroll Snap
Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling
Migrating to React land: Gatsby
As our developer documentation grows so does the need for tooling. Let’s walk through how we migrated our documentation site to Gatsby to take full advantage of static generation and React.
How to Animate Text with SVG and CSS
The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in
CSS Viewport Units
Deep dive from Ahmad. I like the coverage of vmin and vmax, which I think I don't reach for as often as I should.
Auto-Growing Inputs & Textareas
By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way
How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2) — Smashing Magazine
In [Part 1](https://www.smashingmagazine.com/2020/03/designers-code-terminal-text-editors-part-1/), Paul explained the basics of the terminal, shared a few productivity hacks to get you started, and how to choose a code editor. In this part, he’ll continue with the topics of version control (Git), HTML and CSS, semantic code, and a brief introduction to some key engineering principles.
Building a Real-Time Chat App with React and Firebase
In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth providers
CSS :nth-of-class selector
That's not a thing.
Inspired Design Decisions With Otto Storch: When Idea, Copy, Art And Typography Became Inseparable — Smashing Magazine
In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we’ll e
How to test custom React hooks
Get confidence your custom React hooks work properly with solid tests.
Creating Sortable Tables With React — Smashing Magazine
Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, Kristofer Giltvedt Selbbekk is going to show you how to implement all you need to sort out all of your table sorting needs. By the end of this tutorial, you will have found a way to model your state, wrote a generic sorting function, and wrote a way to update what our so
React Suspense in Practice
This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We'll look at how to integrate routing
A Practical Overview Of CSS Houdini — Smashing Magazine
Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process. Houdini’s browser support is improving
Tools for Optimizing SVG
This is our straight-to-the-point list of SVG optimizing tools across a number of categories. They are all largely based around SVGO, but how you use it depends. There are web apps, desktop apps, apis, and even design tool add-ons.
Implementing Infinite Scroll And Image Lazy Loading In React — Smashing Magazine
HTML is getting better at providing nice APIs for implementing cool features. In this tutorial, Chidi Orji is going to show you how to use the `HTML` `Intersection Observer` API to implement infinite scrolling and image lazy loading in a React functional component. In the process, we’ll learn how to use some of React’s hooks and how to create Custom Hooks. Let’s get started!
Using the HTML title attribute
Steve Faulkner:
Get Started Building GraphQL APIs With Node
We all have a number of interests and passions. For example, I’m interested in JavaScript, 90’s indie rock and hip hop, obscure jazz, the city of Pittsburgh,
Two Steps Forward, One Step Back
Brent Jackson says CSS utility libraries failed somewhat:
Node Photo Gallery Tutorial
A step by step tutorial to creating a photo gallery using Node.js and the Dropbox JavaScript SDK