Developers Speculating About the Long-Distant Future: 2022
This is a wonderful roundup from Jeremy, who I picture circling January 1, 2022, in red marker on a giant paper calendar back in 2008 and patiently counting
A Chrome Extension for Cloudinary That Helps You Pluck Out Useful Media URLs From Your Library Quickly |
Cloudinary is a host for your digital assets like images and video. If you don't already know them, you should, because you can build it into the asset
SVGcode for Live Tracing Raster Images
A free online tool called SVGcode by Thomas Steiner is capable of an effect called "Live Trace" that converts a raster image into a vector image.
How to Make CSS Slanted Containers in 3 Steps
Here's how to created a CSS slanted container where the container itself is slanted, but the text and images are balanced for better legibility.
Color Spaces for More Interesting Gradients
Think of color spaces as a physical map where individual colors are points on the map. Gradients walk from one point on the map to the next.
CSS Scroll Snap Slide Deck That Supports Live Coding
We’ll build a CSS-only slide deck that supports live coding, using native web functionality and modern styling, like CSS scroll snap.
Building a newbie-friendly codebase
Pedro Santos suggests:
Building a Scrollable and Draggable Timeline with GSAP
Here's a super classy demo from Michelle Barker over on Codrops that shows how to build a scrollable and draggable timeline with GSAP. It's an interesting
User Registration With Firebase and React
This tutorial will work us through on how to implement user registration, verification, and authentication in React using Firebase.
“Evergreen” Does Not Mean Immediately Available
Before the advent of evergreen browsers, you would need to go to the manufacturer’s website and manually download and install the update.
The Optional Chaining Operator, “Modern” Browsers, and My Mom
Jim Nielsen's mom couldn't open a website. Jim worked on confirming the issue and documented how he got to the bottom of it:
The CSS from-font Value Explained in 4 Demos
I found the CSS from-font value for the text-decoration-thickness property. I did a little research what I found (and learned) is interesting.
Switching Unstaged Changes to a New Branch
Say you're on the wrong Git branch with unstaged changes. There are a few to go about switching unstaged changes to a new branch.
Demystifying TypeScript Discriminated Unions
TypeScript discriminated unions are types where a key or value can be used to differentiate between the keys and values of several types at once.
Fancy CSS Borders Using Masks (Zig-Zag, Wavy, and More)
In this article, we look at modern CSS mask techniques to create three fancy CSS borders without having to use a background image.
How to Make a Scroll-Triggered Animation With Basic JavaScript
Scroll-triggered events are very useful. There are libraries to create them but let's look at how to do it ourselves with a small handful of JavaScript.
Component Spacing in a Design System
How do you handle component spacing in a design system? Do you add margin directly to the components, or outsource it to another component?
Node and How it Works With npm
Let's look at Node and how it plays alongside npm to install features and tooling as packages in modern front-end web development.
A Deep Look at the Command Line
The command line is a place we can type commands to be executed directly by our computer. It’s extremely fast, and ideal for a tool like npm.
Install npm in a Few Easy Steps
In this article, we'll install npm and Node, then make a little sample project to give you real hands-on experience working with the npm basics
How to Install npm Packages
Next up in this beginner’s guide to npm is likely why you’re here in the first place: installing npm packages, which uses the `npm install` command.
The 60 Hottest Front-end Tools of 2021
A complete list of the most popular front-end tools in 2021, according to the Web Tools Weekly newsletter. See which resources made the list.
Using the CSS Me Not Bookmarklet
The CSS Me Not bookmarklet lets you see all of the CSS files on a site, notably unused files you might want to prevent from loading.
Mondrian Art in CSS From 5 Coders
I saw some Mondrian Art in CSS going around the other day and figured I'd go looking for others I've seen over the years and round them up.
Making Your First Custom Svelte Transition
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
8 Helpful Accessibility Links for January 2022
Every so often, I accumulated a bunch of links about various things I find interesting. Accessibility is one of them! Here are 8 helpful accessibility links.
A Practical Tip For Using Sass Default Parameters
Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don't provide
How to Make a Pure CSS 3D Package Toggle
You know how you can get cardboard boxes that come totally flat? You fold ‘em up and tape ‘em to make them into a useful box. Then when it’s time to recycle
Open Source & Sustainability
I don't feel confident operating or maintaining open source. That makes me scared of it, and my fear makes me avoid doing it at all.
Netlify Identity for Jamstack Aiuthentication
Netlify Identity is a robust offering that provides authentication on a Jamstack site. It’s super easy to enable and opens up a bunch of possibilities.
A New Container Query Polyfill That Just Works
There is an easy-to-use CSS container query polyfill now. You essentially conditionally load it and forget about it. Then write spec-compliant container queries code.
Notes on Josh Comeau's Custom CSS Reset
We recently talked with Elad Shechter on his new CSS reset, and shortly after that Josh Comeau blogged his.
Support Multiple Frameworks in a Monorepo
We're going to make a Yarn workspaces-based monorepo that supports multiple frameworks, including React, Vue, Svelte, and Angular.
Jetpack Features We Love and Use at CSS-Tricks
We use and love Jetpack around here. It's a WordPress plugin that brings a whole suite of functionality to your site ranging from security to marketing with
Should CSS Override Default Browser Styles?
Every CSS ruleset you write will likely changes the defaults of something. But should CSS override browser defaults defaults?
CSS-Based Fingerprinting
Fingerprinting is bad. It's a term that refers to building up enough metadata about a user that you can essentially figure out who they are. JavaScript has
How to Create a Browser Extension
I’ll bet you are using browser extensions right now. Some of them are extremely popular and useful, like ad blockers, password managers, and PDF viewers.
Thank You (2021 Edition)
The year has come to a close and it's time again for our end-of-year wrapup. The most important message is this: thank you. (thankyouthankyou)
On Yak Shaving and md-block, a new HTML element for Markdown
Lea Verou made a Web Component for processing Markdown. Looks like there were a couple of others out there already, but I agree with Lea in that this is a
Strut Your Stuff With a Custom Scrollbar
The first time I had my breath taken away by a humble scrollbar was on this very site. When CSS-Tricks v17 rolled out with its FAT CHONKY BOI, my jaw dropped.
Care for the Text
How do you make a great website? Everyone has an answer at the ready: Flashy animations! The latest punk-rock CSS trick! Gradients! Illustrations! Colors to
2021 Roundup of Web Research
Last year, we kicked out a roundup of published surveys, research, and other findings from around the web. There were some nice nuggets in there, like a
Remember You Are Not the User
One thing people can do to make their websites better is to remember that you are not representative of all your users. Our life experiences and how we
Show, Don't Tell
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Increase Your Reach
NGL, I was a little overwhelmed when I sat down to write this article. There are so many things that immediately flooded my mind—take out any extra divs; use
A visual introduction to machine learning
Just the first sentence alone here from Stepanie Yee and Tony Chu is solid:
The surprising behavior of !important in CSS custom property values
Huh! I did not realize that CSS custom properties had their own resolution behavior for how !important works in their values. Uh, despite writing a guide
Working With Web Feeds: It’s More Than RSS
Between Google Chrome experimenting with “following” sites, along with a growing frustration of how social media platforms limit a creator’s reach to their
Consistent, Fluidly Scaling Type and Spacing
When Chris first sent me this prompt, I was thinking about writing about progressive enhancement, but that subject is so wide-reaching to be one thing and all
Topological sort
Jordan Scales explores the computer science concept of topological sorting, and what it might look like if applied to the concept of z-index in CSS. So, you
HTML Sanitizer API
Three cheers for (draft stage) progress on a Sanitizer API! It's gospel that you can't trust user input. And indeed, any app I've ever worked on has dealt
Maybe there kinda is background-opacity?
I was reading Jake's "Cross-fading any two DOM elements is currently impossible" which is a wonderfully nerdy deep dive into how there is no real way to
Think Without Boxes
What’s the one thing people can do to make their website better? Now that is a good question. One with many right answers, like improving performance, taking
Faulty logic
Ain't this the truth:
CSS-Tricks Chronicle XLI
Ya know, I used to do one of these posts after making a few podcast appearances I hadn't had a chance to link up yet, so I could share them. As fate would
File Scaffolding With Hygen
I read a recent Smashing Magazine post that included a recommendation for Hygen. I just happen to be doing quite a bit of new UI work in a Next.js app and the
Ship a Full-Stack App in Days with AWS Amplify Studio
Amazon has a vision with AWS Amplify. First, a premise:
Shadow Palette Generator
Josh's Shadow Palette Generator is a fantastic tool. The premise is that box-shadow pretty much always looks better when there are multiple layered shadows
Embrace the Platform
So what is the one thing that people can do is to make their website better? To answer that, let's take a step back in time …
Standardizing Focus Styles With CSS Custom Properties
Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive