An Interview With Elad Shechter on "The New CSS Reset"
Hey folks! Elad reached out to me to show me his new CSS reset project called the-new-css-reset. It’s quite interesting! I thought a neat way to share it with
Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study) — Smashing Magazine
Cumulative Layout Shift is one of the hardest core web vital to debug. In this article, we go through different tools to investigate CLS, when to use them(and when not), and solutions to some of the CLS issues we faced in our Next.js-based e-commerce website.
Smart CSS Solutions For Common UI Challenges — Smashing Magazine
Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. If you’re interested, we’ve also just recently covered [CSS auditing tools](https://www.smashingmagazine.com/2021/03/css-auditing-tools/), [CSS generators](https://www.smashingmagazine.com/
Bonsai Browser
Web-browser for research that helps programmers think clearly.
Less Absolute Positioning With Modern CSS
Ahmad Shadeed blogs the sentiment that we might not need to lean on position: absolute as much as we might have in the past. For one thing: stacking elements.
How Remix makes CSS clashes predictable
Remix has this beautifully simple feature for CSS that I want to tell you all about.
Upcoming Live Workshops On Front-End & UX (Oct 2021–Jan 2022) — Smashing Magazine
Do you like a good interface design challenge? What about accessibility testing and design systems? Or maybe Next.js and advanced CSS? With our [new online workshops](https://smashingconf.com/online-workshops/) on front-end & design, we cover all of it. Below you’ll find a schedule of what’s coming up next. Ah, and [here
WooCommerce + Google Analytics
Google Analytics is powerful analytics software. A common way to use it is to just slap the JavaScript snippet on every page template you have and let it
Useful React APIs For Building Flexible Components With TypeScript — Smashing Magazine
React with JSX is a fantastic tool for making easy-to-use components. Typescript components make it an absolute pleasure for developers to integrate your components into their apps and explore your APIs. Learn about three lesser-known React APIs that can take your components to the next level, and help you build even better React Components in this article.
The Autofill Dark Pattern — Smashing Magazine
A “dark pattern” is a deceptive UX pattern that tricks users into doing things they may not really want to do. Autofill is a widespread feature either by choice or by accident: who hasn’t accepted to let the browser save/use web form information, either on purpose or by mistake? In this article, Alvaro Montoro does a little experiment to find out how much privacy is taken away from users across th
Composable CSS Animation In Vue With AnimXYZ — Smashing Magazine
Most animation libraries like GSAP and Framer Motion are built purely with JavaScript or TypeScript, unlike AnimXYZ, which is labelled “the first composable CSS animation toolkit”, built mainly with SCSS. While a simple library, it can be used to achieve a lot of awesome animation on the web in a short amount of time and little code. In this article, Ejiro Asiuwhu will show you how to use the Anim
Building a Tennis Trivia App With Next.js and Netlify
Today we will be learning how to build a tennis trivia app using Next.js and Netlify. This technology stack has become my go-to on many projects. It allows
A Themeable React Data Grid With Great UX-Focused Features
KendoReact can save you boatloads of time because it offers pre-built componentry you can use in your app right away. They look nice, but more importantly,
A Guide To CSS Debugging — Smashing Magazine
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. Today, Stephanie Eckles will look at a few categories bugs often fit into, see how you can evaluate the situation, and explore techniques that help prevent these bugs.
Quickly Testing CSS Fallbacks
Dumb trick alert!
Animation Techniques for Adding and Removing Items From a Stack
Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when
How To Build An Expandable Accessible Gallery — Smashing Magazine
One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on its own may not be that exciting. In this article, Silvestar Bistrović will be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!
Comparing HTML Preprocessor Features
Of the languages that browsers speak, I'd wager that the very first one that developers decided needed some additional processing was HTML. Every single CMS
Open-sourcing Mariana Trench: Analyzing Android and Java app security in depth
We’re sharing details about Mariana Trench (MT), a tool we use to spot and prevent security and privacy bugs in Android and Java applications. As part of our effort to help scale security through building automation, we recently open-sourced MT to support security engineers at Facebook and across the industry. This post is the third […]
Our Learning Partner: Frontend Masters
Frontend Masters has been our learning partner for a couple of years now. I love it. If you need structured learning to up your web development skills,
Rebuilding A Large E-Commerce Website With Next.js (Case Study) — Smashing Magazine
Developing with Next.js is amazing, but there are definitely some challenges. The developer experience with Next.js is something you just need to experience. We made the switch from a more traditional integrated e-commerce platform to a headless platform with Next.js. Here are the most important lessons learned while rebuilding a large e-commerce site with Next.js.
Simplifying Form Styles With accent-color — Smashing Magazine
The new CSS `accent-color` property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. It has the potential to provide quick and easy styling for many of our form elements, especially where extensive customization isn’t needed, as well as allowing the browser to pick the best options for accessibility. In this article Michelle Barker will t
Twitter's div Soup and Uglyfied CSS, Explained
When I came up in web development (2005-2010 were formative years for me), one of the first lessons I learned was to have a clean foundation of HTML. "What
Proposal for CSS @when
CSS is on a tear lately. Again, I've heard of a brand new thing I've never seen before, and again it's via Miriam: CSS Conditionals.
7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS
CSS ::before and ::after pseudo-elements allow you to insert "content" before and after any non-replaced element (e.g. they work on a <div> but not
Exploring the CSS Paint API: Polygon Border
Nowadays, creating complex shapes is an easy task using clip-path, but adding a border to the shapes is always a pain. There is no robust CSS solution and we
Resources aren't requested by CSS, but by the DOM
This is a good tweet from Harry:
imba
It's not every day you see a new processor for building websites that reinvents the syntax for HTML and CSS and JavaScript. That's what imba is doing.
Announcing Project Turpentine: an easy way to get off Varnish
Project Turpentine is the easiest way to replicate a varnish configuration on Cloudflare. Just export your full VCL from another provider and use Turpentine to move to a TypeScript-based runtime for varnish on Cloudflare Workers.
Designing Beautiful Shadows in CSS
My favorite kind of blog post is when someone takes a subject that I’ve spent all of five minutes considering and then says—no!—this is an enormous topic
Early Hints: How Cloudflare Can Improve Website Load Times by 30%
Today, Cloudflare is announcing support for Early Hints. Early Hints takes advantage of “server think time” to asynchronously send instructions to the browser to begin loading resources while the origin server is compiling the full response, which can improve page load time by 30%.
Minding the "gap"
Read an updated article with an approach that uses modern CSS features.
Superpack: Pushing the limits of compression in Facebook’s mobile apps
Managing app size at Facebook is a unique challenge: Every day, developers check in large volumes of code, and each line of code translates into additional bits in the apps that people ultimately download onto their phones. Left unchecked, this added code would make the app bigger and bigger until eventually the time it takes […]
Orchestrating Complexity With Web Animations API — Smashing Magazine
There are way too many options in Web Animations API to pick them up that easily. There’s no middle ground between simple transitions and complex animations. You’re either fine with what CSS Transitions and Animations provide or you suddenly need all the power you can get. Learning how timing works and how to control the playback of several animations at once makes for a solid foundation on which
"Just in Time" CSS
I believe acss.io is the first usage of "Atomic CSS" where the point of it is to be a compiler. You write CSS like this:
Native Rust support on Cloudflare Workers
Introducing the Cloudflare Workers Rust SDK: write your entire Worker in Rust, no JavaScript required.
The Story Behind TryShape, a Showcase for the CSS clip-path property
I love shapes, especially colorful ones! Shapes on websites are in the same category of helpfulness as background colors, images, banners, section separators,
Developer Decisions For Building Flexible Components — Smashing Magazine
Being able to look past the apparent simplicity, break down a component into its constituent parts, ask key questions, and even consider future uses, are all skills that will serve any developer well when building websites In this article, we’ll walk through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mi
New Smashing Online Workshops on Front-End & UX — Smashing Magazine
What’s the state of HTML Email, Vue.js and Next.js? What are new, smart interface design patterns we could use? Let’s figure it out. With our brand new online workshops on front-end & design. Now with **free workshops** for you to test the waters.
Fire SVG animations (SMIL) when the SVG is visible
When requirements read "when visible" your brain should go straight to IntersectionObserver. That's exactly what Zach is doing here to kick off an animation
Behind the Scenes of Slack’s Acquisition Announcement
On July 21st, 2021, Slack officially became a part of Salesforce at the price tag of $27.7 billion. This was undoubtedly Slack’s most significant event in the past year. As a frontend intern on Slack’s Customer Acquisition team this summer, I had the once-in-a-lifetime opportunity to be directly involved with announcing the closing of one…
What’s New With DevTools: Cross-Browser Edition — Smashing Magazine
Learn what’s new with developer tools in Firefox, Edge, Chrome and Safari. Discover new and powerful features that will help you be more comfortable and productive when testing and debugging across browsers. With this article, Patrick Brosset tries to make you want to try them out, and maybe will help you get more comfortable next time you need to debug a browser-specific issue.
Early Days for CSS Scoping
There is a working draft spec for CSS scoping now. Other than a weird period where <style scoped> shipped and then was subsequently removed from the
A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine
What exactly is a displacement filter? In this article, Dirk Weber will be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, Dirk has divided the article into three parts in which you’ll be exploring how the feDisplacementMap works, methods to create fancy displacement maps in SVG, and methods to animate th
An Interactive Guide to Keyframe Animations
CSS keyframe animations are incredibly flexible and powerful, but they’re also a bit weird. In this deep-dive tutorial, we'll learn how CSS keyframes work from the ground up, and see how to use them to build high-quality animations.
State Management In Next.js — Smashing Magazine
By combining some React APIs, we can accurately manage “simple” states. With Next.js though, we can quickly find situations where we need to accommodate many other requirements. This article is intended to be used as a primer for managing complex states in a Next.js app. These strategies should fit the vast majority of apps around with little to no adjustments. Let’s have a look at some patterns t
Exploring the CSS Paint API: Blob Animation
After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we
Compound Components In React — Smashing Magazine
A compound component is one of the advanced patterns of React which makes use of an interesting way to communicate the relationship between UI components and share implicit state by leveraging an explicit parent-child relationship. In this article, Ichoku Chinoso will show you one of the advanced patterns of React which is the compound component pattern. It’s an awesome method to build reusable co
How I Made a Generator for SVG Loaders With Sass and SMIL Options
While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a
Architecting With Next.js
Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It's just a little half-day thing. No brainer.
Detecting Media Query Support in CSS and JavaScript
You can't just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says:
Native JavaScript Routing?
We can update the URL in JavaScript. We've got the APIs pushState and replaceState:
Data protection controls with Cloudflare Browser Isolation
Starting today, your team can use Cloudflare’s Browser Isolation service to protect sensitive data inside the web browser. Administrators can define Zero Trust policies to control who can copy, paste, and print data in any web based application.
Creating An Interactive Gantt Chart Component With Vanilla JavaScript (Part 1) — Smashing Magazine
In this article, we will code a Gantt chart as a reusable Web component. We will focus on the architecture of the component, rendering the calendar with CSS Grid and managing the state of the draggable tasks with JavaScript Proxy Objects.
Free Open-Source Icons — Smashing Magazine
Your project is on a tight budget? We’ve collected some wonderful, free icons and goodies that we’ve discovered lately and that are bound to give your design the finishing touch. We’ve also just recently covered [Figma plugins](https://www.smashingmagazine.com/2021/08/figma-tools-plugins-resources/), [SVG generators](https://www.smashingmagazine.com/2021/03/svg-generators/), [accessible front-end
HTML is Not a Programming Language?
HTML is not a programming language.
Tabs in HTML?
Brian Kardell shares a bit about the progress of bringing "Tabs" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.
Wanna see a whiter white?
Heck of a CSS trick here from Dongsung Kim.
Open-sourcing a more precise time appliance
Facebook engineers have built and open-sourced an Open Compute Time Appliance, an important component of the modern timing infrastructure. To make this possible, we came up with the Time Card — a PCI Express (PCIe) card that can turn almost any commodity server into a time appliance. With the help of the OCP community, we […]
New Smashing Workshops on Front-End & Design — Smashing Magazine
How do we build and establish a successful, bulletproof design system? What’s the state of HTML Email? And what are new, smart interface design patterns we could use? Let’s find out. With our [brand new online workshops](https://smashingconf.com/online-workshops/) on front-end & design — to help us all boost skills online.