When Sass and New CSS Features Collide
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can
Styling Layout Wrappers In CSS
Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most
Firebase Push Notifications In React — Smashing Magazine
In this tutorial, Chidi Orji will show you how to work with Firebase push notifications in the backend and frontend. We’ll set up the notifications system with an Express back-end server. Afterwards, you’ll listen for the notifications in a React front-end app. You will implement the backend first, then move on to the frontend. In that way, you can use whichever section appeals more to you. So let
Quick Tips for High Contrast Mode
Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
The Return of the 90s Web
One of my forever-lessons here on CSS-Tricks is that having your own website and blogging on it is a good idea. It's probably one of the best decisions I've
Line-Animated Hamburger Menu
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the "three lines" thing you're well familiar
Dropbox dives into CoffeeScript
During July's Hackweek, the three of us rewrote Dropbox's full browser-side codebase to use CoffeeScript instead of JavaScript, and we've been really happy with how it's been going so far. This is a controversial subject, so we thought we'd start by explaining why...
The Mad Magazine Fold-In Effect in CSS
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page
A Practical Guide To Testing React Applications With Jest — Smashing Magazine
Building a well-functioning application requires good testing; otherwise, knowing whether your application works as expected would be a matter of guesswork and luck. Jest is one of the best tools available for testing React applications. In this article, Adeneye David Abiodun will show you everything you need to create a solid test for your React components and application.
Let's Make a Multi-Thumb Slider That Calculates The Width Between Thumbs
HTML has an <input type="range">, which is, you could argue, the simplest type of proportion slider. Wherever the thumb of that slider ends up could
Using Custom Property "Stacks" to Tame the Cascade
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we've had
Rough Notation
This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are
An Introduction To SWR: React Hooks For Remote Data Fetching — Smashing Magazine
In this article, we’ll be looking at a new way of retrieving data in React Apps named SWR. This is a set of hooks for remote data fetching that makes things easier, such as caching, pagination, and so on.
Easing Animations in Canvas
The <canvas> element in HTML and Canvas API in JavaScript combine to form one of the main raster graphics and animation possibilities on the web. A
Everything You Need to Know About FLIP Animations in React
With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE). Here’s a handy Pen
Better Reducers With Immer — Smashing Magazine
In this article, we’re going to learn how to use Immer to write reducers. When working with React, we maintain a lot of state. To make updates to our state, we need to write a lot of reducers. Manually writing reducers results in bloated code where we have to touch almost every part of our state. This is tedious and error-prone. In this article, Chidi Orjil going to see how Immer brings more simpl
Smashing Podcast Episode 18 With Mina Markham: How Can I Learn React? — Smashing Magazine
In this episode of the Smashing Podcast, we’re talking about learning React. What’s React like to work with, and how can experienced developers get started? Drew McLellan chats to Mina Markham to find out.
Internationalization In Vue With The Vue I18n Plugin — Smashing Magazine
Adding Internationalization to your Vue.js application has a lot of use cases and in this tutorial, we’re going to learn how to do this with the Vue I18n plugin and how to set it up in our application.
On Adding IDs to Headings
Here's a two-second review. If an element has an ID, you can link to it with natural browser behavior. It's great if headings have them, because it's often
CUBE CSS
A CSS methodology from Andy Bell:
How to Reverse CSS Custom Counters
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
Building A Facial Recognition Web Application With React — Smashing Magazine
In this article, Adeneye David Abiodun explains how to build a facial recognition web app with React by using the Face Recognition API, as well as the Face Detection model and Predict API. The app built in this article is similar to the face detection box on a pop-up camera in a mobile phone — it’s able to detect a human face in any image fetched from the Internet. Please note that you will need t
Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis
You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are
CSS :is() and :where() are coming to browsers
Šime Vidas with the lowdown on what these pseudo-selectors are and why they will be useful:
Cool Little CSS Grid Tricks for Your Blog
I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more
The Trickery it Takes to Create eBook-Like Text Columns
There's some interesting CSS trickery in Jason Pamental's latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book
How to Get All Custom Properties on a Page in JavaScript
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with
Higher-Order Components In React — Smashing Magazine
In this tutorial, Shedrack Akintayo is going to learn about higher-order components, the syntax of higher-order components, as well as use cases for them. In the process, you will build a higher-order component from an existing React component. By the end of this tutorial, you will understand the basics of higher-order components and how to build them.
Consuming REST APIs In React With Fetch And Axios — Smashing Magazine
If you’re a React developer who’d like to learn how you can start consuming APIs in your React applications, then this article is for you. Consuming REST APIs in a React Application can be done in various ways, but in this tutorial, Shedrack Akintayo will be discussing how we can consume REST APIs using two of the most popular methods known as Axios and Fetch API. You will learn what a REST API is
A New Way to Delay Keyframes Animations
If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, you’ve probably been frustrated to find there’s no built-in way
Overlapping Header with CSS Grid
Snook shows off a classic design with an oversized header up top, and a content area that is "pulled up" into that header area. My mind goes to the same place:
Rotated Table Column Headers… Now With Fewer Magic Numbers!
Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping
React Error Handling And Reporting With Error Boundary And Sentry — Smashing Magazine
In this article, Chidi Orji will explore the concept of error boundaries in a React application. You’ll work through an example app to see how we can use error boundaries to deliver a better app experience. Finally, you’ll integrate Sentry into our error boundary for realtime error reporting. The only prerequisite is that you have some familiarity with React class components. Let’s dig in!
Increment Issue 13: Frontend
Increment is a beautiful quarterly magazine (print and web) published by Stripe "about how teams build and operate software systems at scale". While there is
How To Create Better Angular Templates With Pug — Smashing Magazine
Pug is a template engine that allows you to write cleaner templates with less repetition. In Angular, you can use Pug to write component templates and improve a project’s development workflow. In this article, Zara Cooper In will cover how you — as an Angular developer — can use Pug to write better templates more efficiently. You’ll learn how to install Pug in your Angular apps and transition exis
The Many Bad (and Good!) Patterns for Close Buttons
Manuel Matuzović details 10 bad HTML patterns for a close button. You know, stuff like this:
Get Programmatic Control of your Builds with Netlify Build Plugins
Today at Jamstack_Conf, Netlify announced Build Plugins. What it does is allow you to have particular hooks for events within your build, like when the build
Code in the browser with GitHub Classroom
Learn about some new ways students can code in the browser. With online integrated development environments (IDEs), students can get right to work in a web browser, avoiding software conflicts that might happen on their local machines.
Getting Started With Axios In Nuxt — Smashing Magazine
Axios is a promise-based HTTP client that works in the browser and Node.js environment or, in simpler terms, it is a tool for making requests in client-side applications and Node.js environment. In this tutorial, Timi Omoyeni will learn how to make a request in our Nuxt.js applications using the Axios module. You will also learn how to use the `ayncData` and `fetch` methods to fetch data on the se
Building Reusable React Components Using Tailwind — Smashing Magazine
Tailwind is a popular utility-first CSS framework that provides low-level class names to web developers. It does not have any JavaScript and works well with existing frameworks such as React, Vue, Angular, Ember, and others. Whilst this is positive, it can be confusing for new developers to understand how to integrate Tailwind in their applications. In this article, Tilo Mitra will explore ways to
Understanding Machines: An Open Standard For JavaScript Functions — Smashing Magazine
In this article, Kelvin Omereshone introduces you to machines, an open standard for JavaScript functions. At the end of this article, you should be familiar with what machines are and how to implement them. There is no special prerequisite for this article. If you can write a JavaScript function, then you’ll be able to follow along. With all that said, let’s dive in.
WordPress Block Transforms
This has been the year of Gutenberg for us here at CSS-Tricks. In fact, that's a goal we set at the end of last year. We're much further along that I thought
Animated Sparkles in React
In this dazzling tutorial, we'll see how to build an animated component. Wrap it around text or images and watch them twinkle! This neat trick is a perfect way to emphasize positive or exciting things.
Unprefixed `appearance `
It's interesting how third-parties are sometimes super involved in pushing browser things forward. One big story there was how Bloomberg hired Igalia to
First Steps into a Possible CSS Masonry Layout
It's not at the level of demand as, say, container queries, but being able to make "masonry" layouts in CSS has been a big ask for CSS developers for a long
How To Create A Mobile App In Expo And Firebase (For iOS And Android) — Smashing Magazine
The social media company released React Native, and it quickly became the most popular framework for building mobile apps with JavaScript. In this article, based on his experience with creating a GPS and navigation application, Chafik Gharbi will show you how to create a mobile app using Expo and Firebase services such as Firestore, Firebase functions and Expo push notifications.
How to Tame Line Height in CSS
In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we
CSS fix for 100vh in mobile WebKit
A surprisingly common response when asking people about things they'd fix about anything in CSS, is to improve the handling of viewport units.
A Day in the Life of a Frontend Foundations Engineer at Slack
6:28 am First alarm rings. Snooze. 6:30 am Second alarm rings. Snooze. 6:34 am Final alarm rings and I know this is the last one, so I hop out of bed and immediately play some music. Music really has a way of waking me up, and I typically play Sofi Tukker or Rufus Du Sol…
Styling Components In React — Smashing Magazine
React is a fantastic JavaScript library for building rich user interfaces. It provides a great component abstraction for organizing your interfaces into well-functioning code, but what about the look and feel of the app? There are various ways of styling React components from using stylesheets to using external styling libraries. In this article, Shedrack Akintayo will explain the cons and pros of
Equal Width Columns in CSS Grid are Kinda Weird
Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you'd have equal-width columns, but that's a rare day. What
Using CSS Masks to Create Jagged Edges
I was working on a project that had this neat jagged edge along the bottom of a banner image.
React Single File Components Are Here
Shawn Wang is talking about RedwoodJS here:
Dealing With Stale Props and States in React’s Functional Components
There’s one aspect of JavaScript that always has me pulling my hair: closures. I work with React a lot, and the overlap there is that they can sometimes be
How I Put the Scroll Percentage in the Browser Title Bar
Some nice trickery from Knut Melvær.
min(), max(), and clamp() are CSS magic!
Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with
Tracing user interactions with React
How to use the (EXPERIMENTAL) interactions tracing API in React.
Rebuilding our tech stack for the new Facebook.com
Facebook.com launched in 2004 as a simple, server-rendered PHP website. Over time, we’ve added layer upon layer of new technology to deliver more interactive features. Each of these new features and technologies incrementally slowed the site down and made it harder to maintain. This made it harder to introduce new experiences. Features like dark mode […]
Angular + Jamstack! (Free Webinar)
It's easy to think that working with Jamstack means working with some specific set of technologies. That's how it's traditionally been packaged for us. Think
`lh` and `rlh` units
There's some new units I was totally unaware of from the Level 4 spec for CSS values! The lh unit is "equal to the computed value of line-height" and rlh is