Progress on the Block Protocol
Since the 1990s, the web has been a publishing place for human-readable documents. Documents published on the web are in HTML. HTML has a little bit of… Read more “Progress on the Block Protocol”
Build a powerful notification system with Next.js and Knock
Notifications on Vercel
A Few Times Container Size Queries Would Have Helped Me Out
CSS Container Queries are still gaining traction and many of us are getting our hands wet with them, even if it’s for little experiments or whatnot. They’ve
Creating an accessible search experience with the QueryBuilder component
GitHub’s search inputs have several complex accessibility considerations. Let’s dive into what those are, how we addressed them, and talk about the standalone, reusable component that was ultimately built.
Animated Background Stripes That Transition on Hover
Learn to make background stripes that transition on hover, using a creative mix of CSS gradients, blend modes, and background sizing.
Migrate a large, open-source React application to Next.js and Vercel
Learn how we approached migrating the BBC's large, open-source React application to Next.js and Vercel to see both developer and user experience benefits.
Adding Box Shadows to WordPress Blocks and Elements
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
CSS is OK, I guess.
Nothing but ear-to-ear smiles as I was watching this video from @quayjn on YouTube. (No actual name in the byline, though I think it's Brian Katz if my paper
CSS Infinite and Circular Rotating Image Slider
Image sliders (also called carousels) are everywhere. There are a lot of CSS tricks to create the common slider where the images slide from left to right (or
The Anatomy Of Themed Design System Components — Smashing Magazine
The world of design systems can be overwhelming sometimes. There’s a lot to take in when you get into that space! In this article, Dan Donald dives into a simple component and explores some issues, complexity, and power we can encounter.
Digging Deeper Into Container Style Queries
I wrote up some early thoughts on container style queries a little while back. It's still early days. They're already defined in the CSS Containment Module
Using The New Constrained Layout In WordPress Block Themes
One of the main goals of the WordPress Site Editor (and, yes, that is now the “official” name) is to move basic block styling from CSS to structured JSON.
With Next.js, Vercel, and Sanity, Loom empowers every team to iterate
Color Formats in CSS
CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out to be a surprisingly important decision! In this article, we'll take a tour of color formats in CSS, and see which option will serve us best.
Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide — Smashing Magazine
In this guide, Pearl Akpan analyzes the methods and properties that make user interface solutions such as infinite scrolling, animating elements on scroll, or even the popular drag and drop achievable, and afterward, dives into some practical use cases for them.
Taming the Cascade With BEM and Modern CSS Selectors
BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is – at least in my Twitter
A Guide To Keyboard Accessibility: JavaScript (Part 2) — Smashing Magazine
This article is the second of two parts about a guide to making websites accessible to keyboard users. Here Cristian Diaz covers a toolset on JavaScript that you can mix into different components to create a great experience for keyboard users.
Improving Workers TypeScript support: accuracy, ergonomics and interoperability
Today, we’re excited to announce the next major release of Workers TypeScript definitions with a bunch of improvements, and the open-sourcing of the new automatic generation scripts.
The most programmable Supercloud with Cloudflare Snippets
Today we are announcing Cloudflare Snippets. Snippets are a simple way of executing a small piece of Javascript on select HTTP requests, using the ruleset engine filtering logic.
Incremental adoption of micro-frontends with Cloudflare Workers
With Cloudflare Workers, our fragment-based micro-frontend architecture, and fragment piercing technique, engineering teams can incrementally improve large frontends in a fraction of the time, yielding significant user and developer experience gains.
What We Learned from Open-Sourcing FlashList - Shopify
Here's how we launched the React Native List library FlashList as an open-source project, and how you can make your next open-source project a success.
Automate an isolated browser instance with just a few lines of code
Workers Browser Rendering API is our out-of-the-box solution for simplifying developer workflows, including capturing images or screenshots, by running browser automation in Workers. If you’re interested, sign up for the waitlist.
Classy and Cool Custom CSS Scrollbars: A Showcase
In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand
A Guide To Keyboard Accessibility: HTML And CSS (Part 1) — Smashing Magazine
In this article, Cristian Diaz covers how to use HTML and CSS to create an accessible experience for keyboard users while mentioning what WCAG criteria we should keep into consideration.
CSS Grid and Custom Shapes, Part 3
After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with
What CSS Do You Absolutely Have to Know in 2022?
Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that've shipped in browsers the past couple of years —
What’s New In Next.js 13? — Smashing Magazine
Let’s talk about Next.js, one of the most well-known React frameworks used for production. From new components to font optimization, Atila shares a quick overview and invites you to join his [Advanced Next.js Masterclass](https://smashingconf.com/online-workshops/workshops/advanced-nextjs-atila-fassina) taking place later this month.
New Smashing Front-End & UX Workshops — Smashing Magazine
What’s the state of HTML Email, Vue.js and Next.js? Would you like to level up with modern CSS? What are new, smart interface design patterns we could use? Let’s figure it all out together with our [brand new online workshops](https://smashingconf.com/online-workshops/) alongside our free community meetups.
Using Vercel comments to improve the Next.js 13 documentation
Help us build the Next.js 13 documentation by commenting directly on the docs themselves.
Some Links About CSS Gradients
Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it's like the saved articles in my bookmarks folder are having a
How To Create Advanced Animations With CSS — Smashing Magazine
In this article, Yosra Emad explains how to create a rollercoaster path that a ball follows using cubic beziers and CSS transitions. You’ll also learn how the cubic-bezier function in CSS works in detail and how to stack multiple simple animations to create one complex one.
Motion Controls In The Browser — Smashing Magazine
If you
Creating Animated, Clickable Cards With the :has() Relational Pseudo Class
The CSS :has() pseudo-class can help us solve solve situations that used to take an extra wrapper to achieve, including the clickable card pattern many of us love to use from time to time.
And here's another one: the Next.js Edge Runtime becomes the fourth full-stack framework supported by Cloudflare Pages
You can now deploy SSR Next.js applications to the Cloudflare Pages platform ⚡️
Is There Too Much CSS Now?
As front-end developers, we've wished for a lot of things over the years — ways to center things in CSS, encapsulate styles, set an element’s aspect ratio,
From zero to 10 million lines of Kotlin
We’re sharing lessons learned from shifting our Android development from Java to Kotlin. Kotlin is a popular language for Android development and offers some key advantages over Java. As of today, our Android codebase contains over 10 million lines of Kotlin code. We’re open sourcing various examples and utilities we used to manipulate Kotlin code […]
State Of CSS Survey: Influence The Future Of CSS — Smashing Magazine
The annual survey for anyone who writes CSS, [State of CSS](https://stateofcss.com/en-us/?source=smashing_magazine_css_survey), is nearing the end of its response period for 2022. The survey is available in many different languages and all questions are optional.
Page Shield can now watch for malicious outbound connections made by third-party JavaScript code
Starting today, Page Shield can now watch for malicious outbound connections made by third-party JavaScript code
Futuristic CSS — Smashing Magazine
In this article, Sacha Greif tries to anticipate future CSS trends and takes a look at some far-fetched and futuristic CSS features that might one day make their way to the browser.
Build an interactive WebGL experience with Next.js
Use interactive code sandboxes to build the Next.js Conf registration prism game.
How to Make a Folder “Slit” Effect With CSS
When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of
Next.js Conf 2022: Iterate, scale, and deliver a great UX
Learn how to iterate, scale, and deliver a great UX from the experts speaking at this year’s Next.js Conf. Register for the online event today.
Pure CSS Bezier Curve Motion Paths
Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas! Now, how about using Bezier curves as motion paths with CSS?
How we use data
Data is a vital component in how we improve Figma day by day. Learn more about what kind of data we use and how we use it.
JS13K 2022 winners 🏆
The eleventh annual js13kGames coding competition, challenging participants to create games in 13kB or less of JavaScript in a month, just wrapped up. This post highlights the top thirteen entries.
Easy Fluid Typography With clamp() Using Sass Functions — Smashing Magazine
We can use the `clamp()` method today because of the great browser support. In this article, Brecht De Ruyte explains how it can be a beautiful addition to your upcoming project or as an upgrade to a previous one.
State of CSS 2022 Survey Now Open
The State of CSS survey recently opened up. Last year, the survey confirmed everyone's assumptions that TailwindCSS is super popular and CSS variables are
Introducing Shoelace, a Framework-Independent Component-Based UX Library
This is a post about Shoelace, a component library by Cory LaViska, but with a twist. It defines all your standard UX components: tabs, modals, accordions,
Launching a new Chromium-based WebView for Android
Our in-app browser for Facebook on Android has historically relied on an Android System WebView based on Chromium, the open source project that powers many browsers on Android and other operating systems. On other mobile operating systems, the System WebView component cannot be updated without updating the entire operating system. On Android, this works differently, […]
Improve the accessibility of your Next.js site
Let's make the Web. Accessible.
Introducing workerd: the Open Source Workers runtime
workerd is the JavaScript/Wasm runtime code that powers Cloudflare Workers, now open source under the Apache 2.0 license
How to Create Wavy Shapes & Patterns in CSS
The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic
How I Made an Icon System Out of CSS Custom Properties
SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can
Things I Wish I Had Known About Angular When I Started — Smashing Magazine
If you’re considering learning Angular, this article sums up what William Juan wished he knew when he started, including the mistakes made and lessons learned the hard way.
SVG support in Cloudflare Images
Cloudflare Images now supports storing and delivering SVG files
Isolate browser-borne threats on any network with WAN-as-a-Service
Defend any network from browser-borne threats with Cloudflare Browser Isolation by connecting legacy firewalls over IPsec / GRE
Smashing Podcast Episode 53 With Rémi Parmentier: Can HTML Email Use Modern CSS? — Smashing Magazine
In this episode of the Smashing Podcast, we’re talking about HTML email. Do we still have to design like we would for IE5? Vitaly talks to expert Rémi Parmentier to find out.
Building A Retro Draggable Web Component With Lit — Smashing Magazine
In today’s article, Andrico Karoulla explains how to create a cool draggable effect by listening to the drag events and writing some custom logic inside the handlers.
Managing React Form State Using the React-Form Library - Shopify
We’ll delve further into Shopify’s open source Quilt repo that contains 72 npm packages, one of which is the react-form library.
JavaScript APIs You Don’t Know About — Smashing Magazine
In this article, Juan Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API. Together we will see what they are, where we should use them, and how to use them.
