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.
How to run A/B tests with Next.js and Vercel
Learn how to run A/B tests with Next.js and Vercel Edge Middleware.
Hacking CSS Animation State and Playback Time
In a nutshell, my project is nothing but a carefully scripted long CSS animation. Plus a few instances of the checkbox hack.
Useful JavaScript Data Grid Libraries — Smashing Magazine
In this article, Zara Cooper provides a rundown of some popular data grid libraries that would be a great addition to any data-heavy application and shares recommendations on what factors to consider when choosing a suitable data grid library.
Interpolating Numeric CSS Variables
We can make variables in CSS pretty easily:
Understanding useMemo and useCallback
What's the deal with these two hooks?! Lots of devs find them confusing, for a whole host of reasons. In this tutorial, we'll dig deep and understand what they do, why they're useful, and how to get the most out of them.
How SZA and Integral Studio create at the moment of inspiration
In 2017, Integral Studio chose Vercel & Next.js to create a site that would mirror the creativity of then-up-and-coming artist, SZA. To celebrate the 5-year anniversary and re-release of her Grammy-winning album, they once again turned to Vercel.
When Do You Use CSS Columns?
That ain't rhetorical: I'm really interested in finding great use cases for CSS multi-column layouts.
An Introduction To Context Propagation In JavaScript — Smashing Magazine
React popularized context-propagation within applications with the context API. Evyatar Alush brings a brief intro to context propagation in JavaScript and how you can build React Context yourself.
Improving INP with React 18 and Suspense
Learn how to improve Interaction to Next Paint in React applications by using Suspense and selective hydration.
Approaches for optimizing your dashboard's frontend
Let’s review the techniques and strategies we used to improve the Vercel Dashboard so you can make a data-driven impact on your application.
Zooming Images in a Grid Layout
Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.
How I Added Scroll Snapping To My Twitter Timeline
CSS Scroll Snap allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation.
Migration From jQuery to Next.js: A Guide — Smashing Magazine
This guide will show you how to migrate your jQuery site to [React](/category/React) with [Next.js](/category/next.js) – which is a significant undertaking, especially for big code bases. However, this migration allows you to use newer concepts (such as data fetching at build time) to help with our code
Implicit Grids, Repeatable Layout Patterns, and Danglers
Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content
Mastering React’s Stable Values - Shopify
In this post, Colin Gray, Principal Developer at Shopify, delivers a crash course in how to make sense of stable values in React and when they matter most.
Fluid Sizing Instead Of Multiple Media Queries? — Smashing Magazine
If you like math and CSS, you’ll love this one. We don’t need to use media queries to change the values of some CSS properties — *font-size*, *padding*, *margin* etc. — depending on the viewport width, with the CSS `clamp` function. But: we still need to use media queries for changing colors, borders, shadows and other CSS styles.
Scroll Shadows? Pure CSS Parallax? Game Back On.
Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with
Recreating MDN's Truncated Text Effect
It's no secret that MDN rolled out a new design back in March. It's gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those
Testable Frontend: The Good, The Bad And The Flaky — Smashing Magazine
How to organize their testing between unit, integration, and E2E testing and how to test their UI components? Testing is not just about tools and processes. It’s about architecture. In this article, Noam Rosenthal will share his experience on how to organize testing and find the right balance between front-end and subsystems and between different strategies.
Launching Instagram Messaging on desktop
In 2020 we launched Instagram Messaging (referred to in this post simply as “Messaging”) for personal desktop computers. We believe that this feature will improve everyday experiences and enable new use cases for all of our desktop web users. In this post, we go through some of our overall learnings from our desktop users, and […]
vs. : How To Choose The Right One — Smashing Magazine
We may tend to think largely in terms of end-users when it comes to HTML. However, writing HTML that is easy to understand and self-explanatory for whoever will work on it is sufficient reason to use the correct semantic element. In this article, Olushuyi explores a mental model that helps you decide between the `` and `` elements when writing documents. You will explore how grouping content affec
Roundup of Recent Document Outline Chatter
It’s not everyday that HTML headings are the topic de jour, but my folder of saved links is accumulating articles about the recently merged removal of the
Tips & tricks for using GitHub Projects for personal productivity
GitHub Issues is a core component of how developers get things done and, as we built more project planning capabilities into GitHub, we’ve found some fun and unique ways to use the new projects experience for personal productivity.
Building text animations for Instagram Stories
In August 2020, Instagram launched a set of dynamic and fun text styles followed by animations to give people more choices to express themselves on Stories and Reels. This was the first major update to Stories’ text tools since 2016, and we wanted to share how we approached some obstacles we encountered and what we […]
How stroke-dasharray Patterns Work
Say you have a line in SVG:
In Praise of Shadows
Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and
Kendo UI For Angular Data Grid And Angular Material: Have Your Cake And Eat It Too — Smashing Magazine
Although Angular Material is one of the most popular component libraries which also offers a table, it lacks some crucial data handling features. In this article, Zara Cooper will examine some of the features of the Kendo UI for Angular Data Grid in comparison to those offered by the Angular Material Table.
Technical Writing for Developers
HTML, CSS, JavaScript, Python, PHP, C++, Dart — there are so many programming languages out there and you may even be totally fluent in several of them! But
Statements Vs. Expressions
One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressions. In this blog post, we'll dig into how these two structures work, and see how building an intuition about this can help us solve practical problems.