CSS Nesting, specificity, and you
Here’s Kilian Valkhof on CSS nesting which isn't available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and
Exploring the CSS Paint API: Image Fragmentation Effect
In my previous article, I created a fragmentation effect using CSS mask and custom properties. It was a neat effect but it has one drawback: it uses a lot of
Choice Words about the Upcoming Deprecation of JavaScript Dialogs
It might be the very first thing a lot of people learn in JavaScript:
The World of CSS Transforms
The “transform” property is such a powerful part of the CSS language! In this blog post, we'll take a deep look at this property and see some of the nifty things it can do.
Introducing Deploy Hooks for Cloudflare Pages
Today, we are proud to announce a new way to connect your Pages application with your headless CMSs and databases: introducing Deploy Hooks for Pages.
Efficient Infinite Utility Helpers Using Inline CSS Custom Properties and calc()
I recently wrote a very basic Sass loop that outputs several padding and margin utility classes. Nothing fancy, really, just a Sass map with 11 spacing
How To Build Resilient JavaScript UIs — Smashing Magazine
Embracing the fragility of the web empowers us to build UIs capable of adapting to the functionality they can offer, whilst still providing value to users. The User Experience (UX) doesn’t need to be all or nothing — just what is usable. This premise, known as graceful degradation allows a system to continue working when parts of it are dysfunctional — much like an electric bike becomes a regular
Refactoring CSS: Strategy, Regression Testing And Maintenance (Part 2) — Smashing Magazine
After analyzing CSS and its weaknesses, and management giving a green light to the refactoring project, it’s time to get to work. A team needs to agree on the internal code standards and best practices, plan out the refactoring strategy, and outline individual tasks. We need to set up a visual regression testing suite, and a maintenance plan to enforce the new standards and best practices in the f
How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal — Smashing Magazine
Having an e-commerce store is crucial for any store owner as more and more customers are turning to online shopping. In this article, Zara Cooper will cover how to build an e-commerce store using Angular 11. You shall use Commerce Layer as our headless e-commerce API. Although there may be tonnes of ways to process payments, she’ll demonstrate how to use just one, Paypal.
There Is No Such Thing As A CSS Absolute Unit — Smashing Magazine
What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? It’s important to note that there are still significant differences between relative and absolute units. CSS relative units are sized according to other style definitions defined by parent elements or are affected by the size of a parent container. As for absolute
Using Absolute Value, Sign, Rounding and Modulo in CSS Today
For quite a while now, the CSS spec has included a lot of really useful mathematical functions, such as trigonometric functions (sin(), cos(), tan(), asin(),
Creating An Accessible Dialog From Scratch — Smashing Magazine
Dialogs are everywhere in modern interface design (for good or for bad), and yet many of them are not accessible to assistive technologies. In this post, Kitty Giraudel is going to write a small JavaScript library for authoring accessible dialogs from the very beginning. The goal is to understand what goes into it. She’s not going to deal with styling too much, just the JavaScript part.
CSS Logical Properties and Values
Now that cross-browser support is at a tipping point, it's a good time to take a look at logical properties and values. If you're creating a website in
Global vs. Local Styling In Next.js — Smashing Magazine
Next.js has strong opinions about how to organize JavaScript but not CSS. How can we develop patterns that encourage best CSS practices while also following the framework’s logic? The answer is surprisingly simple — to write well-structured CSS that balances global and local styling concerns. In this article, Alexander Dubovoy will build a website (a tea shop!) to demonstrate these patterns.
Slinkity
Perhaps the #1 reason I love Astro is that it brings the JavaScript component authoring experience to the Static Site Generator world with zero JavaScript
Gatsby Serverless Functions And The International Space Station — Smashing Magazine
Gatsby recently announced the launch of “functions”. In this article, Paul Scanlon explains how to get the current location of the International Space Station (ISS) as it orbits the Earth in real-time using [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions/) and then display it on a 3D interactive globe using [React Three Fibre](https://github.com/pmndrs/react-three-fiber).
Color Tools And Resources — Smashing Magazine
Do you need a little inspiration boost? We’ve collected some useful color tools and resources that we’ve discovered lately — to help you get the most out of your creativity. We’ve also just recently covered [CSS auditing tools](https://www.smashingmagazine.com/2021/03/css-auditing-tools/), [CSS generators](https://www.smashingmagazine.com/2021/03/css-generators/), [accessible front-end components]
Some Typography Links VI
Glitter text — whO (I learned a name for people who go by a one-word moniker like that: Mononymous) created a builder for fancy SVG-based type. It's a custom
WordPress Admin Warnings in the Block Editor
We sent out an email the other week that ultimately had a <video> in the HTML markup. We send the newsletter by creating it here in the WordPress block
Of Course We Can Make a CSS-Only Clock That Tells the Current Time!
Let’s build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then we’ll convert it into a “digital” clock
Perspectives on React Native from Three Shopify Developers - Shopify
We hope that by sharing our experiences learning React Native, we can help soothe your anxieties and empower you to explore this exciting technology.
Three Insights I Gained While Researching Vue.js Accessibility — Smashing Magazine
Web app accessibility appears difficult because it seems that there is little information on the subject available online. Let’s take a closer look at the accessible use of framework features, concrete Vue.js traits, as well as community initiatives and vetted patterns.
How to Get a Pixel-Perfect, Linearly Scaled UI
Dynamically scaling CSS values based on the viewport width is hardly a new topic. You can find plenty of in-depth coverage right here on CSS-Tricks in
Build Complex CSS Transitions using Custom Properties and cubic-bezier()
I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to
How To Migrate From jQuery To Next.js — Smashing Magazine
There are many scenarios where we don’t need to follow the architecture that frameworks like React or Next.js impose on us, and that is OK. However, jQuery is a library that contains a lot of code and features that are not needed anymore. In this article, Facundo Giuliani will take a closer look at different approaches and strategies on how you can migrate a web application that uses jQuery framew
Adding support for cross-cluster associations to Rails 7
At GitHub, we recently added a new feature to Rails that will be available in 7.0: support for handling associations across database clusters.
A Look at Building with Astro
Astro is a brand new framework for building websites. To me, the big thing is that it allows you to build a site like you're using a JavaScript framework (and
The Web’s Worst Default
There are a lot of great defaults when it comes to browsers and the web. Think about all the accessibility features that are baked into HTML so that you don’t
Using HSL Colors In CSS — Smashing Magazine
HSL colors are very powerful when we use them the right way. They can save us time and effort and even help us to explore options for how to apply color to design. In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.
When a Click is Not Just a Click
The click event is quite simple and easy to use; you listen for the event and run code when the event is fired. It works on just about every HTML element
Chromium spelling and grammar features
Delan Azabani digs into the (hopefully) coming soon ::spelling-error and ::grammar-error pseudo selectors in CSS. Design control is always nice. Hey, if we
Smashing Podcast Episode 40 With Mike Cavaliere: What Is Chakra UI For React? — Smashing Magazine
In this episode, we’re talking about Chakra UI. What is it and how can it help with your React projects? Drew McLellan talks to expert Mike Cavaliere to find out.
Working around the viewport-based fluid typography bug in Safari
Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn't resize when the browser window resized. Back then, it affected Chrome
Positioning Overlay Content with CSS Grid
Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts.
Creating Custom Emmet Snippets In VS Code — Smashing Magazine
In this article, Manuel explains why Emmet is one of his favorite productivity tools for writing HTML and CSS, and how you can create custom Emmet snippets in Visual Studio Code to help you improve your front-end workflows even more. It takes some time to create these snippets, but it’s worth the effort because you can customize Emmet to your personal preferences, automate repetitive tasks and sav
Creating A Multi-Author Blog With Next.js — Smashing Magazine
This article explains how we can connect different types of content in a Next.js application. With this technique, we can add any kind of one-to-one, one-to-many, or even many-to-many relationship to our projects. Today, Dom Habersack is going to build a blog with Next.js that supports two or more authors. You will attribute each post to an author and show their name and picture with their posts.
Browser VNC with Zero Trust Rules
Starting today, we’re excited to share that you can now shift another traditional client-driven use case to a browser. Teams can now provide their users with a Virtual Network Computing (VNC) client fully rendered in the browser with built-in Zero Trust controls.
Smashing Online Workshops (July-October 2021) — Smashing Magazine
What’s the state of HTML Email? How do we build and establish a successful design system? Frontend and design are remarkably complex these days. That’s why we invite kind, smart folks from the community to run [online workshops](https://smashingconf.com/online-workshops/) for all of us to learn together. And we have new ones coming up, and we’d like to kindly welcome you to join in.
inherit, initial, unset, revert
There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I'd say I see the inherit used the most. Perhaps
Using Custom Elements in Svelte
Svelte fully supports custom elements (e.g. <my-component>) without any custom configuration or wrapper components and has a perfect score on Custom
If we're gonna criticize utility-class frameworks, let's be fair about it
I'm not here to raise a shield protecting CSS utility frameworks. I don't even particularly like the approach, myself, and nothing is above fair criticism.
Next.js 11, Next.js Live and more: A recap of Next.js Conf Special Edition
Learn more about the latest releases announced at Next.js Conf, including Next.js 11 and Next.js Live.
How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji
Let’s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a
Image To Text Conversion With React And Tesseract.js (OCR) — Smashing Magazine
Do you have to process data manually because it is served through images or scanned documents? An image-to-text conversion makes it possible to extract text from images to automate the processing of texts on images, videos, and scanned documents. In this article, we look at how to convert an image to text with React and Tesseract.js(OCR), preprocess images, and deal with the limitations of Tessera
Using the `outline` Property as a Collapsable Border
The outline property in CSS draws a line around the outside of an element. This is quite similar to the border property, the main exception being that outline
Client-Side Routing In Next.js — Smashing Magazine
Next.js has a file-based routing system in which each page automatically becomes a route based on its file name. Each page is a default exported React component from the pages directory that can be used to define the most common route patterns. This article will guide you through almost everything you need to know about Routing in Next.js and point you in the direction of related topics and concep
Perfect Tooltips With CSS Clipping and Masking
Clipping and masking have been around for a while now in CSS and even have pretty decent browser support. I recently worked on a project that needed to use a
Start Serving Optimized Images in Vue
Images have become extremely important to the effectiveness of websites. They speak a 1000 words, attract attention, and stimulate emotions.
How I Used the WAAPI to Build an Animation Library
The Web Animations API lets us construct animations and control their playback with JavaScript. The API opens the browser’s animation engine to developers and
A Complete Guide To Accessibility Tooling — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don’t miss the next one.
When CSS Isn’t Enough: JavaScript Requirements For Accessible Components — Smashing Magazine
Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.
Safari 15: New UI, Theme Colors, and... a CSS-Tricks Cameo!
There's a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail.
Adding Shadows to SVG Icons With CSS and SVG Filters
Why would we need to apply shadows to SVG?
A Cornucopia of Container Queries
I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries
Meet :has, A Native CSS Parent Selector (And More) — Smashing Magazine
What makes relational selector one of the most requested features and how are we, as developers, working around not having it? In this article, we’re going to check the early spec of the :has selector, and see how it should improve the CSS workflow once it’s released.
CSS-Trickz: An Experiment with Netlify's On-Demand Builders
WordPress sites have an API by default. Wanna see this site's most recent posts, with just a specific set of data... in JSON format? Here ya go. Alex Riviere
VS Code Extensions for HTML
Let's look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not
How To Build A Geocoding App In Vue.js Using Mapbox — Smashing Magazine
In this guide, Prince Chukwudire will show you how to build a simple geocoding app from scratch, using Vue.js and Mapbox. He’ll cover the process from building the front-end scaffolding up to building a geocoder to handle forward geocoding and reverse geocoding. To get the most out of this guide, you’ll need a basic understanding of JavaScript and Vue.js and how to make API calls.
How to use React Context effectively
How to create and expose React Context providers and consumers
Getting Started With Webpack — Smashing Magazine
Modern browsers provide good support for JavaScript modules, but module bundlers such as webpack stay a critical part of the JavaScript toolchain. Module bundlers such as webpack, Parcel, Rollup and also Google’s Closure Compiler were written to create optimized bundles of your code for your end-user’s browser to download and execute. In this article, Nwani Victory will take a deep dive into what
