The Joy of Extending Tailwind
2026-07-14 The joy of extending Tailwind One of the biggest upgrade that came with Tailwind 4 has been the new CSS-based configuration and extensibility system. The CSS configuration came with a new s...
评论
点赞
收藏A Self-maintaining filesystem for static blogs
2026-07-01 A Self-maintaining filesystem for static blogs I've just finished revamping the folder structure of this blog's content to include the date in the file name as in This finally made opening ...
CSS Tricks for Markdown Blogs
2026-06-28 CSS tricks for markdown blogs All the post content you are reading here comes from a single markdown file converted into HTML and stylized with CSS. Reducing what is rendered via template w...
可复用Web组件的实践心得
作者分享将同一款代码沙箱Web Component复用到多个真实项目后的经验总结。核心看点：用自己的简短、独特命名空间来避免冲突，这一条看似简单却是长期维护的关键。文章不涉及Shadow DOM等高级技术，但基于亲手迭代的实践，给出的建议可推广到通用UI组件和CSS库的设计中。适合正在构建或维护前端组件库的开发者参考。
Lessons for small reusable web components
jun 07, 2026 🔗 Lessons for small reusable web components Last year I wrote about a small code-sandbox web component. Since then I've dropped it into a handful of projects. Reusing the thing confirmed...
CSS 原生的视差滚动效果
用 CSS Scroll-driven Animations 原生实现视差滚动效果，无需 JavaScript 事件监听。本文提供了一个完整的.parallax 工具类代码，通过 view-timeline-name 创建视图进度时间线，利用 CSS 动画驱动元素在滚动过程中产生视差位移。同时解释了子元素缩放的计算逻辑（scale 随 --parallax-offset 自动适配），以及通过 prefers-reduced-motion 尊重用户无障碍偏好。作者语气自然，有明确个人偏好判断（"我最喜欢的是简洁性"），代码简洁、开箱即用，强调声明式方案性能更优且维护成本更低。
CSS 色彩对比度自校验——contrast-color() 函数实战
CSS 的 contrast-color 函数于 2026 年达到基线支持，浏览器能自动计算并保证高亮选中文字（::selection 等伪元素）的色彩对比度，不再需要手动选色、跑检查器、品牌色一迭代就重新校验。作者从自己之前关于文字选中色的文章切入，点出传统方案的维护痛点，然后直接用代码示例展示新函数如何落地。一条简短但信息密度高的前端技巧，适合关注无障碍体验且想减少重复工作的开发者。
用 PostCSS 插件实现流体 clamp() 样式
一位前端开发者分享了自己从 Tailwind v3 插件生成流体样式到改用 PostCSS 插件的真实技术迭代历程。文章坦诚对比了旧方案的三大痛点——CSS 输出臃肿、选择器脆弱、灵活性差，然后展示新思路：让 Tailwind 只负责基础 CSS 生成，把流体计算逻辑交给 PostCSS Clampwind 插件，大幅压缩输出体积、提升可维护性。有具体的实现对比、技术选型思考和踩坑复盘，不是泛泛的「最佳实践」或 SEO 拼凑文，属于有手感的个人技术笔记。适合关注 CSS 工程化、Tailwind v4 和 PostCSS 生态的开发者参考。
用 Tailwind 插件生成流体样式
作者分享了自行开发的 Tailwind 插件，用于生成流体 CSS 样式——即排版和间距随屏幕或容器宽度按比例自动适配。文章先解释了流体 CSS 的价值：让设计在任何屏幕尺寸下都能充分利用空间、始终保持协调感，随后介绍了现有方案的不足，并给出了自己的插件实现思路。对使用 Tailwind 且有响应式设计需求的开发者来说，是一个有实操参考的踩坑记录和技术分享。
将任意网页转换为 SVG 并进行绘图
作者分享了一个将任意网页转为SVG并绘图的实用技术方案：用Node应用抓取URL，通过mozilla/readability提取精简页面内容（类似浏览器阅读模式），再将结果写入客户端index.html，并用CSS将内容切割为独立页面（设定--page-width和--page-height变量）。提供核心代码片段，方法清晰可复用。适合前端开发者、SVG爱好者或想将网页内容转为可视化排版的读者参考。
纸面与文件：用纯Markdown打印博客文章
给博客文章提供一份纯Markdown版本用于打印或离线阅读——这个看似简单的想法，来自一位前端开发者的个人实践。他在文中反思：网页开发者在屏幕适配和无障碍访问上投入了大量精力，却常常忽略"纸质阅读"这一场景。通过提供无样式干扰的Markdown原文，既保留了内容的可移植性，也为读者打开了另一种消费入口。文章短小但观点明确，体现了个人的技术审美和实用主义思考，对有类似需求的写作者有直接参考价值。
一个代码沙盒 Web 组件
作者分享了自己 fork 自 Chris Ferdinandi 的一个代码沙盒 Web 组件，可用于在页面中嵌入交互式 HTML/CSS/JavaScript 代码演示，类似 CodePen 但无需依赖任何第三方服务。该组件原本是为一个 vanilla 项目启动模板开发的，但可以轻松复用到任何项目中。文章内容极简，仅简要介绍了组件来源和用途，没有代码示例、使用教程或深度技术分析。
用 Eleventy 提供静态文件服务
一篇极简的技术笔记，介绍在 Eleventy 静态站点生成器中通过 Passthrough File Copy 工具提供 PDF、代码片段等静态文件。作者因开发代码沙盒 Web Component 的需要而做了这项调研，内容仅停留在提及工具名称层面，没有配置示例、路径说明或踩坑细节，信息密度极低，相当于文档一句话的复述。对熟悉 Eleventy 的开发者无额外价值，也缺乏引发讨论或收藏的吸引力。
Web组件与Eleventy
一篇个人技术博客，探讨在 Eleventy 静态站点生成器中使用 Web Components 的灵活性与取舍。作者指出 Eleventy 的特点（也是"诅咒"）在于实现同一目标有太多路径，而 Web Components 作为纯客户端 JavaScript 本就可以自由处理。他提到 Eleventy 官方文档推荐 WebC 方案，优势在于支持服务端渲染和更结构化的组件管理方式。文章带有鲜明的个人实践视角，属于有真实使用体验的工程笔记，适合对 Eleventy 或 Web Components 感兴趣的前端开发者。
使用新的 OKLCH 颜色空间来移除第三方依赖
作者分享在个人博客中利用 CSS 原生 OKLCH 颜色函数替换 hsluv 和 chroma.js 两个 JavaScript 库的亲身经验。随着新 Web 特性在主流浏览器中逐步落地，开发者不仅能获得新的创作可能，还能让浏览器承担原本需要依赖库完成的工作——例如颜色生成与插值。文章以实际项目切入，展示了用原生方案简化技术栈、减少依赖的具体路径，对有类似重构需求的开发者有直接参考价值。
将3D打印机用作笔式绘图仪
3D打印机本质上是一台CNC数控机床，加装笔架就能变身为笔式绘图仪。作者分享了自己动手改装的真实经历：亲手设计了一个无需拆卸挤出头、可快速拆装的笔架，让打印机既能打印塑料件也能提笔画图。文章列出了笔架的设计约束条件（不拆挤出头、易装易拆等），对拥有3D打印机又想做绘图的创客有直接的参考价值。内容人味足、有具体操作思路，不是泛泛的教程通稿。
将Sonoff智能继电器嵌入Ender 3D打印机电源单元内部
给3D打印机加装自动关机功能：作者将Sonoff智能继电器内置到Ender电源单元中，因原外壳空间不够，专门设计并3D打印了新的外壳。这是个人DIY项目的硬核实践记录，涉及电源改装、3D建模与打印、电路接线等一手技术细节。配合此前用Raspberry Pi和ESPHome实现自动关机的方案，形成一个完整的打印机智能化改造体系。对于玩3D打印机改装、智能家居集成的读者有直接参考价值。
用树莓派和ESPHome实现3D打印机自动关机
用树莓派和ESPHome实现3D打印机打印完成后自动关机——作者讨厌打印结束风扇还转几小时，于是动手做了个自动化方案。这是真实的个人项目记录，有具体的动机（安静、省心）、技术选型（ESPHome + NodeRED + MQTT）和实践路径。文章风格自然、有人味，不是教程搬运而是解决问题的实际记录，适合3D打印和智能家居爱好者参考。
树莓派与Ender 3打印机电子元件的一体化外壳方案
一位3D打印玩家分享了自己为Ender 3打印机升级静音主板后，不想单独摆一个树莓派盒子，于是在Thingiverse上找方案，最终把树莓派、降压模块和Creality Silent Motherboard v4.2.7整合进一个外壳的实践记录。作者称换静音主板是必做升级，打印噪音明显降低、打印质量也有提升。内容虽短但来自真实动手经验，适合正在折腾Ender 3改装或想精简设备摆放的DIY爱好者参考。
动态更新 SVG 网站图标与 CSS 伪元素
作者分享通过 CSS background-image 渐变（径向渐变+线性渐变）实现 SVG 网站图标颜色动态更新的 hack 技巧。文章援引了之前关于生成漂亮颜色渐变的技术，记录了在需要 hack 才能动态变色场景下的个人探索与实践心得。适合对前端小众技巧和 CSS 高级玩法感兴趣的技术读者。