(6 min) I’ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You’re essentially leaving money on the table without them, because they … The post Auto-Generated Social Media Images appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(4 min) !default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet: $variable: 'test' !default; To the Sass compiler, this line … The post Creating Stylesheet Feature Flags With Sass !default appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about … The post HTML Boilerplates appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(1 min) JSNation Live is online conference running from June 9-11. I’ll be there speaking about service workers, and why I think they can (and should) replace some of our old best practices. We—web developers—have broken the web. We’ve built the front end around JavaScript, which is a fragile house of cards… it’s unreliable and easily broken. Service workers are a newerish tool in our toolkit that provide more resilience in the things that we build.

(8 min) “Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects.

(5 min) Chen Hui Jing covers some recent movement in DevTools: Firefox’s grid inspector was pretty full-featured from the get-to and released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a basic grid inspector … The post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) My friends at Sparkbox are doing a survey on design systems, as they do each year. Go ahead and fill it out if you please. Here are the results from last year. In both 2019 and 2020, the vibe was … The post 2021 Design Systems (Survey/Courses) appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(9 min) When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier, while staying in … The post Advanced CSS Animation Using cubic-bezier() appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(3 min) Building animations can get complicated, particularly compelling animations where you aren’t just rolling a ball across the screen, but building a scene where many things are moving and changing in concert. When compelling animation is the goal, a timeline GUI … The post SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) A few months ago, I wrote about the IntersectionObserver API, which is useful for things like lazy loading scripts. Today, though, I wanted to take a look at the native HTML [loading] attribute, which can be used to lazy load images and iframes without the need for any JavaScript. Let’s dig in. How to use the [loading] attribute To make an image lazy load, add the [loading] attribute to it and assign a value of lazy.

(9 min) Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled. There are lots of … The post Making Disabled Buttons More Inclusive appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(1 min) Yesterday, we looked at how to get the first and last elements inside a parent. Today, we’re going to look at how to get the next and previous sibling elements. Once again, we’re going to use some sample markup for today’s article. <ul> <!-- The gray wizard --> <li>Gandalf</li> <li>Radagast</li> <li id="hermione">Hermione</li> <!-- The surprise hero --> <li>Neville</li> </ul> Let’s dig in! The Node.nextSi…

(11 min) In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one. Let’s start with an infamous birthday picker.

(7 min) Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.

(2 min) I’m super happy to announce that a new class of mine is now live at Skillshare. The title is Product Management: Tools for Improving Product Accessibility and in it I am covering a lot of tools to automatically check for accessibility in your products, but more importantly what you can do in your browser to […]

(2 min) Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function… The post CSS Pie Timer Re-Revisited appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(5 min) How many times have you heard that (or even uttered it under your own breath)? I know I’ve heard it in conversations. I also know I’ve wondered the same thing about a product or two — hey, the idea here … The post I could build this during the weekend appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(4 min) Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to … The post Next Gen CSS: @container appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(3 min) Like Jamstack, Netlify is coining this term. If your reaction is: great, a new thing I need to know about and learn, know that while Distributed Persistent Rendering (DPR) does involve some new things, this is actually a push … The post Distributed Persistent Rendering (DPR) appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) Today, we’re going to look at a few different ways that you can get the first and last elements inside a parent. We’ll be using the following markup for our examples. <ul> <!-- The gray wizard --> <li>Gandalf</li> <li>Radagast</li> <li>Hermione</li> <!-- The surprise hero --> <li>Neville</li> </ul> Let’s dig in. The Node.firstChild and Node.lastChild properties You can use the Node.firstChild and Node.lastChild propert…

(7 min) My thoughts on Tailwind CSS.

(16 min) A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.

(7 min) At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops](https://smashingconf.com/online-workshops/) from our home offices to yours — but how?

(2 min) This is extremely fun. Jeff Lindsay has created Topframe, and writes: Anybody that knows how to mess around with HTML can now mess around with their desktop computing experience. Topframe is an open source tool that lets you … The post Topframe appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(10 min) I find build tooling endlessly interesting, especially right now as we’re in a juicy next-gen transitional period with players like Vite, wmr, Snowpack, and esbuild. Hugh Haworth has a good run-down of the new players, and we’ve chatted on … The post Migrating from Parcel to Snowpack appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(10 min) I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio custom property. Boxes with a certain aspect ratio are a classic problem in … The post Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(1 min) Today, I rolled out monthly payment plans for all of my Pocket Guide bundles as well as Vanilla JS Academy. These plans allow you to spread the cost over a three month period, so you can start learning now and pay over time. The next session of Academy starts at the end of the month, and early-bird registration opens today. You can take sign up with a monthly payment plan right now if you want.

(21 min) Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!

(6 min) I have a real distaste for this question. It might seem like a fun question to dig into on the surface, but the way it enters public discourse rarely seems to be in good faith. There are ulterior motives at … The post Is CSS a Programming Language? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(3 min) These are a few great links about typography that have been burning a hole in my saved bookmarks folder that I'm just now getting around to sharing. There's good stuff in there, from how to choose typefaces for app design to ideas for how to fix the concept of font sizing in CSS. The post Links on Typography appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(1 min) While I’m 85% certain you’ve seen and used Can I Use…, I bet there is only a 13% chance that you’ve seen and used Can I Email…. It’s the same vibe—detailed support information for web platform features—except instead … The post Can I Email… appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) Yesterday, we wrote a simple progressively enhanced autocomplete component using the datalist element and some vanilla JS. Today, I wanted to look at how to abstract it to work with multiple components and endpoints. Let’s dig in! (You should go read yesterday’s article first, if you haven’t already, or this one won’t make much sense.) Updating the HTML First, I don’t want to hard code the endpoint for my data into the JavaScript.

(14 min) How do you organize your Google Drive assets? How do you name your Dropbox Paper documents? How do you deal with comments? Let’s get it right.

(14 min) This Person Does Not Exist is a website that generates human faces with a machine learning algorithm. It takes real portraits and recombines them into fake human faces. We recently scrolled past a LinkedIn post stating that this website could be useful “if you are developing a persona and looking for a photo.”  We agree: the computer-generated faces could be a great match for personas—but not for the reason you might think. Ironically, the website highlights the core issue of this very common design me…

(5 min) Route53 is DNS management service by AWS. DNS is absolutely not a database, and yet here’s Nicholas Martin writing up some very clever trickery originally done by Corey Quinn: When you think about it, DNS configuration is actually a … The post Apparently, You Can Use Route53 as a Blazingly Fast Database appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(8 min) It’s easy to forget that, as a search engine, Google doesn’t just compare keywords to generate search results. Google knows that if people don’t enjoy their experience on a web page, they won’t stay on the page long enough to … The post What Google’s New Page Experience Update Means for Images on Your Website appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(3 min) There is an increasing number of “custom” features on the web platform. We have custom properties (--my-property), custom elements (<my-element>), and custom events (new CustomEvent('myEvent')). At one point, we might even get custom media … The post Custom State Pseudo-Classes in Chrome appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) I turned 41 at the end of April. Another pandemic birthday in the books. This one was special thanks to grandparents coming to visit which allowed my wife and I to escape to a hotel for a night. A small relief to be off parenting duty for ~18 hours after fourteen months of so much parenting. We ate Korean food, drank cocktails, and watched Deadpool in our hotel room. A tranquil birthday. April was a bit of a hangover from March work-wise. My project load carried over and, while they’re all great projects, I…

(3 min) Yesterday on Twitter, Eric Scheid asked me… do you have a sample vanilla js implementation of a type-ahead ajax-driven drop-down menu? … (have 15,000 rows of label/value pairs, don’t want to hardcode that into a <datalist>) Today, we’re going to look at how you can pair a datalist element with an ajax fetch() call to create a simple, progressively enhanced autocomplete component. Let’s dig in! How HTML-native autocomplete components work HTML provides a native way to …

(9 min) When dealing with themes for large platforms and CMS, legacy issues often become a bottleneck. In this article, Carson Shold discusses how his team improved the performance and organization of their Shopify themes, and improved maintainability along the way.

(3 min) You can’t even look at code or documentation for Astro (publicly) yet — it’s an in-progress idea — but you can watch a video of Fred showing it off to Feross. I gotta admit: it looks awesome. I’m bullish … The post Astro appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(22 min) The bombshell article of the week is from Alex Russell of Google/Chrome. Alex has long been super critical of Apple, particularly about how there is literally no option to run any other browser than Safari on iOS. This article isn’t … The post Progress Delayed Is Progress Denied appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(10 min) Let‘s take a quick stroll down memory-lane to revisit how vendor prefixing CSS properties came to be. I hope I don’t trigger PTSD for anyone! It‘s not clear who started prefixing, or when it began exactly. What is clear, is … The post Is Vendor Prefixing Dead? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(1 min) Lets imagine that we have a comma-separated string of shoppingList items, and we want to convert it into an array. let shoppingList = 'soda, turkey sandwiches, potato chips, chocolate chip cookies'; Today, we’re going to look at how to do that, and a few considerations. Let’s dig in… The String.split() method The String.split() method converts a string into an array by splitting it after a specific character (or characters).

(8 min) This article showcases a case study of Bookaway’s landing page performance. We’ll see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better.

(1 min) A few weeks ago Honeypot.io asked me to answer a few questions about my career, and here is the video of my answers. 00:00 Introduction 00:31 What are your top tips for career advancement? 02:03 What strengths are most important for a developer? 04:07 Work-life balance: how do you do it? 05:11 What mistakes have […]

(2 min) This was a great “Today I Learned” for me from Josh W. Comeau. If the font-size of an <input> is 16px or larger, Safari on iOS will focus into the input normally. But as soon as the font-size is … The post 16px or Larger Text Prevents iOS Form Zoom appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) Here’s a dilemma: what happens if your WooCommerce site has a problem and the quickest and best way to fix it is to roll back to a previous version? The dilemma is, if you roll back the database, you would … The post Jetpack Backup: Roll Back Your WooCommerce Site Without Losing Orders appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(3 min) I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and Eric took the time to point out the misleading nature … The post Let’s use (X, X, X, X) for talking about specificity appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(4 min) A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image of an element, you inherit the background in a pseudo-element, kick it behind the original, then blur and filter it. … The post Creating Colorful, Smart Shadows appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(2 min) Introduced in ES6, template literals provide a simpler way to create strings that span multiple lines or contain data. Today, we’re going to look at how they work. The basic syntax Instead of quotes, template literals start and end with backticks (`). You do not need to concatenate new lines in template literals the way you would with quotes. let str1 = `<h1>Hello, world!</h1> <p>How are you today?</p>`; // logs "<h1>Hello, world!

(8 min) My thoughts on why cross-browser development is better than in the past.

(3 min) Futures are always arriving. They are never evenly distributed.

(6 min) No matter how experienced you are, mistakes are an inevitable part of software development. But we can learn to repair them! And this is what we'll be looking at in this two-part series: how to undo mistakes using Git.

(23 min) In this episode, we’re starting our new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.

(22 min) In June of 2006, web developers and designers from around the world came to London for the second annual @media conference. The first had been a huge success, and @media 2006 had even more promise. Its speaker lineup was pulled … The post Chapter 8: CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(3 min) I hope people think of SVG as a vector format that is good for drawing things. There is plenty more to know, but here’s one more: SVG is good for composition. You draw things at very specific coordinates … The post Swipey Image Grids appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

(5 min) One of the most common challenges I hear from students who are just learning JavaScript is around knowing how to actually build projects from scratch. You can learn a many of the commonly used JS methods and browser APIs and run through a bunch of practice exercises, but how do you take that knowledge and actually apply it to a task? Today, we’re going to talk about that. Breaking projects up into pieces The thing that helped me the most early on was figuring out how to take a big project and break it…

(7 min) Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever.

(2 min) This is another excerpt from my new and updated APIs and Asynchronous JS pocket guide. Yesterday, we looked at API credentials and security with vanilla JS. Near the end of the article, I noted… Sometimes, APIs require credentials but don’t provide short term tokens. For example, the Mailchimp API uses a permanent API key with basic auth to authenticate every request. Alternatively, you made need to make an authenticated API call that does not require any input from a user.

(7 min) Do you need a little inspiration boost? Well, then our new collection of wallpapers is for you. Designed with love by the community for the community, the wallpapers are available with and without a calendar for May 2021.

(18 min) Beyond the severe toll of the coronavirus pandemic, perhaps no other disruption has transformed user experiences quite like how the tethers to our formerly web-biased era of content have frayed. We’re transitioning to a new world of remote work and digital content. We’re also experimenting with unprecedented content channels that, not too long ago, elicited chuckles at the watercooler, like voice interfaces, digital signage, augmented reality, and virtual reality. Many factors are responsible. Perhaps it’s …

(2 min) This is another excerpt from my new and updated APIs and Asynchronous JS pocket guide. Yesterday, we looked at different ways to authenticate APIs with vanilla JS. Whenever you’re dealing with credentials, you need to be concerned about security. In the article, I had a few examples where the API credentials were hard-coded into the JS file, with this following note… IMPORTANT: You should not store your API credentials in a JS file like this.

(18 min) Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from [Addy's new book](https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/) (also, check a [free PDF preview](http://provide.smashingmagazine.com/eBooks/image-optimization-sample-chapter.pdf)).

(7 min) The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance.

(1 min) There’s two features I look for in good sci-fi: 1. something I hadn’t imagined before and 2. something that anticipates the automobile, as well as the traffic jam. The YouTube gods smiled up me and surfaced a channel called DUST, a massive collection sci-fi short films. The quality is much better than what you might expect from “free sci-fi” but one of their films, The OceanMaker, is an absolute standout that raptured me and took me somewhere I’ve never been. Extrapolating on the near future Water Wars, The…

(6 min) The goal of this article is to walk you through use-cases where CSS variables shine.

(9 min) Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. In this article, we’re going to take a deep dive into easing functions and see how we can use them to create those natural and stunning animations.

(11 min) Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to "layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early — when it’s easier and cheaper to fix them.