Edition: 2026-02-28

Daily Digest - 2026-02-28

Total articles in digest: 20

Must Read

5 shifts redefining design systems in the AI era

  • Source: Figma Blog | Shortcut
  • Words: 1182
  • Category: Design
  • Published: 2025-11-19T00:00:00.000Z
  • Score: 7.0

As AI reshapes how we make products, design systems are evolving from libraries of reusable parts into living frameworks that scale taste and craft.

  • Why it's relevant: matches terms: design systems; fits Design category
  • Summary:
    • As AI reshapes how we make products, design systems are evolving from libraries of reusable parts into living frameworks that scale taste and craft.
    • We spoke with product leaders and practitioners about the shifts they’re seeing in how design systems are built, used, and maintained.
    • Illustrations by John Provencher We talk a lot about craft—what it is, how to hone it, and how it sets products apart in a crowded market.

Also Interesting

Silent, automatic updates are the way to go

  • Source: Lea Verou’s blog
  • Words: 605
  • Category: Design
  • Published: 2009-02-18T00:00:00Z
  • Score: 5.4

Recently, PPK stated that he hates Google Chrome’s automatic updates.

  • Why it's relevant: matches terms: javascript, web; fits Design category
  • Summary:
    • Recently, PPK stated that he hates Google Chrome’s automatic updates.
    • In fact, I think that all browser vendors should enforce automatic updates as violently as Google Chrome does.
    • There should be no option to disable them.

Creating the perfect slider

  • Source: Lea Verou’s blog
  • Words: 909
  • Category: Design
  • Published: 2009-04-24T00:00:00Z
  • Score: 5.4

I’ve previously discussed many times the color picker I have to create, and blogged about my findings on the way.

  • Why it's relevant: matches terms: javascript, web; fits Design category; appears to be a deep read
  • Summary:
    • I’ve previously discussed many times the color picker I have to create, and blogged about my findings on the way.
    • An essential component of most color pickers is a slider control.
    • I won’t go through much techincal details or JavaScript code in this article (after all the usability guidelines presented don’t only apply to JavaScript applications, and this is why I used Adobe Kuler as a good or bad example for some of them), it’s been done numerous times before and I prefer being a bit original than duplicating web content.

On password masking and usability

  • Source: Lea Verou’s blog
  • Words: 728
  • Category: Design
  • Published: 2009-06-28T00:00:00Z
  • Score: 5.4

I just read Jakob Nielsen’s recent post in which he urged web designers/developers to stop password masking due to it’s inherent usability issues.

  • Why it's relevant: matches terms: javascript, web; fits Design category
  • Summary:
    • I just read Jakob Nielsen’s recent post in which he urged web designers/developers to stop password masking due to it’s inherent usability issues.
    • Hey, at last, someone dared to talk about the elephant in the room!
    • In most cases password masking is indeed useless, but still, there are several cases where you need that kind of protection.

Figma expands support for India with local data hosting and new governance tools

  • Source: Figma Blog | Shortcut
  • Words: 550
  • Category: Design
  • Published: 2025-12-05T00:00:00.000Z
  • Score: 5.0

Figma introduces new governance features for enterprise customers, with local data residency expected next quarter.

  • Why it's relevant: matches terms: figma; fits Design category
  • Summary:
    • Figma introduces new governance features for enterprise customers, with local data residency expected next quarter.
    • Today, Figma announced that it is launching new governance features for enterprise customers and the option to host Figma file data within India, starting next quarter.
    • Following Figma’s official launch in India this November With our new hub in Bengaluru, we’re investing in India’s fast-growing product development community.Figma opens a new hub in India to support our growing community of builders “Hot on the heels of our Bengaluru office opening, we’re continuing to invest in India,” said Scott Pugh, Vice President of Sales and General Manager, Asia Pacific, at Figma.

Version control: One founder’s mission to save local farms with Figma Make

  • Source: Figma Blog | Shortcut
  • Words: 1466
  • Category: Design
  • Published: 2025-11-26T00:00:00.000Z
  • Score: 5.0

Factory farms and rising costs are putting British Columbia’s small growers out of business at an alarming rate.

  • Why it's relevant: matches terms: figma; fits Design category
  • Summary:
    • Factory farms and rising costs are putting British Columbia’s small growers out of business at an alarming rate.
    • To fight back, entrepreneur Aaron Veale used Figma Make to build a marketplace app that helps farmers sell their produce—all in a matter of weeks.
    • Hero illustration by Kurt Woerpel “A farmer goes out of business every week in British Columbia,” says entrepreneur Aaron Veale.

Offloading JavaScript With Custom Properties

  • Source: HeydonWorks
  • Words: 1089
  • Category: a11y
  • Published: 2024-02-07T00:00:00.000Z
  • Score: 5.0

Using a custom property to store IntersectionObserver ratio values

  • Why it's relevant: matches terms: javascript; fits a11y category
  • Summary:
    • Offloading JavaScript With Custom Properties Sometimes a web development client doesn’t know quite what they want.
    • Trying to guess is difficult and delivering a guess is risky.
    • Where they have a vague idea, I offer to set them up with the means to create what they want for themselves—when they work out precisely what that is.

Improving CSS Shapes with Trigonometric Functions

  • Source: Dan Wilson
  • Words: 2039
  • Category: Developers
  • Published: 2023-03-28T00:00:00Z
  • Score: 5.0

CSS Trigonometric functions are supported in the latest versions of Safari, Firefox, Edge, and Chrome.

  • Why it's relevant: matches terms: javascript, web; fits Developers category; appears to be a deep read
  • Summary:
    • Improving CSS Shapes with Trigonometric Functions CSS Trigonometric functions are supported in the latest versions of Safari, Firefox, Edge, and Chrome.
    • We also discuss animation via @property , which is supported in the latest Safari, Edge, and Chrome (as of this writing).
    • The CSS Shapes specification enabled a lot to make interesting shapes on the web today, via clip-path , shape-outside , and more.

A Houdini Quickstart: registerProperty

  • Source: Dan Wilson
  • Words: 888
  • Category: Developers
  • Published: 2018-02-12T00:00:00Z
  • Score: 5.0

Houdini has been discussed here and there for a few years now, always with the promise that it will open doors we have never had.

  • Why it's relevant: matches terms: javascript, web; fits Developers category; appears to be a deep read
  • Summary:
    • A Houdini Quickstart: registerProperty Houdini has been discussed here and there for a few years now, always with the promise that it will open doors we have never had.
    • In short, Houdini gives a developer building blocks in JavaScript to allow writing new kinds of CSS.
    • We have reached the point where this is more than just an idea or a spec.

A Trick: Individual CSS Transform Functions

  • Source: Dan Wilson
  • Words: 732
  • Category: Developers
  • Published: 2017-02-21T00:00:00Z
  • Score: 5.0

We get a lot of power through the single transform property in CSS - allowing us to rotate, translate, scale, and more all at once.

  • Why it's relevant: matches terms: javascript, web; fits Developers category
  • Summary:
    • A Trick: Individual CSS Transform Functions We get a lot of power through the single transform property in CSS - allowing us to rotate, translate, scale, and more all at once.
    • But allowing all of those different transform functions into one property can trip us up.
    • It's common to want to apply different transforms to different states of our elements.

trot

  • Source: Robin Rendle
  • Words: 1877
  • Category: Developers
  • Published: 2025-02-15T17:46:17Z
  • Score: 5.0

I’ve been tinkering with an iOS app for the last month or so.

  • Why it's relevant: matches terms: programming, web; fits Developers category; appears to be a deep read
  • Summary:
    • I’ve been tinkering with an iOS app for the last month or so.
    • Working in Swift and moving away from the web has made my work feel all new and fresh, with so many things to learn.
    • The project codename is Trot (for now!) and here’s some notes about what I’ve learned so far.

Compressed Fluid Typography

  • Source: Matthias Ott
  • Words: 2016
  • Category: Developers
  • Published: Sun, 12 Oct 2025 23:00:00 +0200
  • Score: 5.0

When it comes to web typography, I’m a sucker for fluid type.

  • Why it's relevant: matches terms: web, engineering; fits Developers category; appears to be a deep read
  • Summary:
    • When it comes to web typography, I’m a sucker for fluid type .
    • I love that it creates a harmonious rhythm for the typography of a project.
    • I love how it speeds up the responsive design process in the browser.

The beauty of progressive enhancement

  • Source: Manuel Matuzović - Blog
  • Words: 1324
  • Category: Developers
  • Published: 2020-04-28T00:00:00+00:00
  • Score: 5.0

Nokia released an updated version of its iconic Nokia 3310 about 3 years ago.

  • Why it's relevant: matches terms: javascript, web; fits Developers category; appears to be a deep read
  • Summary:
    • The beauty of progressive enhancement posted on Nokia released an updated version of its iconic Nokia 3310 about 3 years ago.
    • It was affordable for me (€60/$65), so I had to get one.
    • It came with a 2 MP camera, a battery that lasts 30 days (up to 22 hours talk time), 2G, 16 MB storage, the original Snake game, and a browser.

AI-Powered Search for Craft CMS with Meilisearch

  • Source: Viget Articles
  • Words: 2038
  • Category: Developers
  • Published: Thu, 24 Jul 2025 12:30:00 -0400
  • Score: 5.0

I've been on a bit of an "embeddings and AI search" kick this year.

  • Why it's relevant: matches terms: web, debugging; fits Developers category; appears to be a deep read
  • Summary:
    • AI-Powered Search for Craft CMS with Meilisearch Quickly add AI-powered search to Craft CMS with Meilisearch—a fast, open-source search engine that blends classic keyword search with smart semantic results.
    • I've been on a bit of an "embeddings and AI search" kick this year.
    • I recently stumbled across Meilisearch; a fast and open-source search engine.

Beautiful, Dynamic Charts

  • Source: Viget Articles
  • Words: 719
  • Category: Developers
  • Published: Mon, 30 Jun 2025 10:00:00 -0400
  • Score: 5.0

Showing data graphically is a challenge, and sometimes chart JS libraries don’t quite fit.

  • Why it's relevant: matches terms: javascript, web; fits Developers category
  • Summary:
    • Animated data visualization that matches the design is no longer a challenge as Rive makes it fast to build and deploy pixel-perfect dynamic charts.
    • Showing data graphically is a challenge, and sometimes chart JS libraries don’t quite fit.
    • But building something from scratch is just not in the budget.

Color Formats in CSS

  • Source: Josh Comeau's blog
  • Words: 2926
  • Category: Dev
  • Published: Mon, 28 Nov 2022 13:15:00 GMT
  • Score: 4.9

CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more.

  • Why it's relevant: matches terms: css; fits Dev category
  • Summary:
    • CSS has a whole slew of different color formats: hex codes, rgb(), hsl(), lch(), the list goes on!
    • It might seem like an inconsequential decision, but there are some pretty important differences between them.
    • And, honestly, I think most of us are prioritizing the wrong things.

CSS 还原拉斯维加斯球数字动画 - ChokCoco

  • Source: 博客园 - ChokCoco
  • Words: 1162
  • Category: Dev
  • Published: 2023-10-18T02:54:00Z
  • Score: 4.9

我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 最近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」: 场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震: 我的第一想法就是,这个看起来用 CSS 也可以实现嘛?还有

  • Why it's relevant: matches terms: css; fits Dev category
  • Summary:
    • 我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 最近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」: 场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震: 我的第一想法就是,这个看起来用 CSS 也可以实现嘛?还有 CSS 不能实现的? 本文,就将尝试使用 CSS,大致还原这个效果。 拆解动画效果 其实,上述的动画效果,本质就是一个 3D 立方体。 同时,3D 立方体上每个面存在颜色不一样的文字,文字和颜色都在随机变化。 也就是说,我们需要实现一个 3D 立方体: 同时,我们还需要实现这样一个动画效果 -- 文字和颜色都在随机变化的平面效果: 两者组合一下,再挪动 3D 元素的景深距离,就能实现我们想要的效果! 好,下面我们一个一个实现。 实现一个 3D 立方体 实现一个 3D 立方体,相对另外一个文字和颜色都在随机变化的平面效果而言,属于非常非常简单的一步了。 我们在非常多篇文章中也讲过具体的实现方式: 最常见的 3D 图形,莫过于一个 3D 立方体。 如果没有上下两个面,只是一个 4 个面的图形,大概是这样: 这样一个图形,利用 CSS 3D,如何快速实现呢? 首先,构造这么一个结构: 3 D 视 图 4 个面,就是最内层的 4 个 .img ,首先,需要给两个父容器,设置 3D 的属性: .perspective { perspective: 3000px; } .container { width: 400px; height: 400px; transform-style: preserve-3d; } 简单解释一下: perspective 可以作用于元素的后代,设置在最上层即可;transform-style: preserve-3d 设置给最终需要 3D 空间的元素的父容器之上,由于最终是 4 个.img 需要 3D 空间,因此设置给.container 即可。 接下来,就是最为核心的,如何设置 4 个 .img 元素的 3D 变换,使之形成 3D 立方体。 技巧就是:先旋转,再位移。 这里给出一个俯视效果图: 以上述 Demo 中的正方体为例子,class 为 .img 的 div 块的高宽为 400px*400px 。那么要利用 4 个 这样的 div 拼接成一个正方体,需要分别将 4 个 div 绕 Y 轴旋转 [90°, 180°, 270°, 360°],再 translateY(200px) 。 值得注意的是,一定是先旋转角度,再偏移距离,这个顺序很重要。 代码如下: .img { position: absolute; top: 0; left: 0; width: 400px; height: 400px; } @for $i from 1 through $imgCount { .img:nth-child(#{$i}) { transform: rotateY(($i * 90deg)) translateZ(200px); } } 效果如下: 此时,可能会觉得图片太太太大了,此时,我们可以通过给中间层 .container 设置一个恰当的 translateZ 进行视觉大小上的调节。 .container { transform: translateZ(-3000px); } 这样,就能得到恰当大小的立方体元素效果: 完整的代码,你可以戳这里:CodePen Demo -- 3D Cube 当然,对于我们这个效果,我们 5 要五个面(前后左右与上方即可),因此,我们基于上述的基础知识铺垫,重新实现一个我们需要的框架结构: 并且,我们希望我们的图形是一个立方体,只需要稍微改造长宽和 translateZ() 的即可。这样,我们就能得到一个前后左右与上方 5 个面的立方体元素。 示意效果如下: 实现文字动画效果 OK,立方体我们先放在一边。 接下来,我们尝试来实现这个效果: 这个效果如果一个文字用一个 DIV 承载实现,那是非常容易的,但是这样势必会造成元素过多,再设置动画效果,则会导致页面太为卡顿。 所以,我们需要另辟蹊径。这里,我们可以使用多层渐变配合 background-clip: text 。 首先,我们利用等宽字体,随机实现一列文字: ABCDEFGHIJKLMN div { font-family: monospace; text-align: center; font-size: 25px; width: 25px; line-height: 25px; color: #fff; } 效果大致如下: 此时,如果我们再利用线性渐变,给每个字符的对应空间(也就 25px x 25px ),设置上不同的颜色,大概是这样: @function randomLinear($count) { $value: ''; @for $i from 0 through ($count - 1) { $value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,"); } @return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%); } @function randomColor() { @return rgb(randomNum(255), randomNum(255), randomNum(255)); } div { // ...
    • background: randomLinear(14); } 其中,randomLinear(14) 是一个 SASS 函数,参数 14 表示生成 14 层线性渐变,每一个文字区域的颜色都是随机的,经过编译后的其中一种结果如下: div { // ...
    • background: linear-gradient(#feea96 0 25px, #edde42 0 50px, #e2344a 0 75px, #cdab7e 0 100px, #e16c8b 0 125px, #dcdc7d 0 150px, #dcb42a 0 175px, #d6a587 0 200px, #984f71 0 225px, #221e34 0 250px, #5e9a69 0 275px, #a955e4 0 300px, #4e908f 0 325px, #8d177e 0 350px); } 上面,我们按照每间隔 25px 的高度,利用线性渐变随机设置了一种颜色,最终,能够得到这么个效果: 此时,我们只需要再设置 background-clip: text ,配合透明文字颜色 color: transparent ,就可以实现单个 div 内,单列文字,每个字体的颜色都是不一样的: div { // ...

CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions

  • Source: Articles on Smashing Magazine — For Web Designers And Developers
  • Words: 1785
  • Category: Dev
  • Published: Thu, 05 Feb 2026 08:00:00 GMT
  • Score: 4.9

Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces.

  • Why it's relevant: matches terms: css; fits Dev category
  • Summary:
    • @scope rule finally give developers the confidence to write CSS that can keep up with modern front ends?When learning the principles of basic CSS, one is taught to write modular, reusable, and descriptive styles to ensure maintainability.
    • But when developers become involved with real-world applications, it often feels impossible to add UI features without styles leaking into unintended areas.
    • This issue often snowballs into a self-fulfilling loop; styles that are theoretically scoped to one element or class start showing up where they don’t belong.

Unstacking CSS Stacking Contexts

  • Source: Articles on Smashing Magazine — For Web Designers And Developers
  • Words: 3094
  • Category: Dev
  • Published: Tue, 27 Jan 2026 10:00:00 GMT
  • Score: 4.9

In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth.

  • Why it's relevant: matches terms: css; fits Dev category
  • Summary:
    • Have you ever set z-index: 99999 on an element in your CSS, and it doesn’t come out on top of other elements?
    • A value that large should easily place that element visually on top of anything else, assuming all the different elements are set at either a lower value or not set at all.
    • A webpage is usually represented in a two-dimensional space; however, by applying specific CSS properties, an imaginary z-axis plane is introduced to convey depth.

Rethinking “Pixel Perfect” Web Design

  • Source: Articles on Smashing Magazine — For Web Designers And Developers
  • Words: 2396
  • Category: Dev
  • Published: Tue, 20 Jan 2026 10:00:00 GMT
  • Score: 4.9

Amit Sheen takes a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.

  • Why it's relevant: matches terms: web; fits Dev category
  • Summary:
    • We are operating in an era of incredible technological leaps, where advanced tooling and AI-enhanced workflows have fundamentally transformed how we design, build, and bridge the gap between the two.
    • The web is moving faster than ever, with groundbreaking features and standards emerging almost daily.
    • Yet, in the middle of this high-speed evolution, there’s one thing we’ve been carrying with us since the early days of print, a phrase that feels increasingly out of sync with our modern reality: “Pixel Perfect.” I’ll be honest, I’m not a fan.

Connections

  • Developers leads today's digest with 8 posts.
  • Recurring themes: web, javascript, css, figma.
  • Figma Blog | Shortcut appears 3 times, signaling strong recent output.

Stats

  • Posts in digest: 20
  • Posts fetched: 2071
  • Feeds considered: 892
  • Feeds with new content: 192
  • Feed fetch failures: 5
  • Candidates selected: 20