Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/687https://channel.meo-ai.com/posts/687Sat, 01 Aug 2026 09:15:00 GMT<span class="post-title-source">《TanStack_Markdown与TanStack_Highlight发布：让技术文档渲染回归轻量》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23TanStack" title="#TanStack">#TanStack</a> <a href="/search/result?q=%23Markdown%E6%B8%B2%E6%9F%93" title="#Markdown渲染">#Markdown渲染</a> <a href="/search/result?q=%23%E8%AF%AD%E6%B3%95%E9%AB%98%E4%BA%AE" title="#语法高亮">#语法高亮</a> <a href="/search/result?q=%23%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" title="#性能优化">#性能优化</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23TypeScript" title="#TypeScript">#TypeScript</a><br /><br />总结：<br />TanStack发布两个新库：Markdown解析器与Highlight语法高亮，专为技术博客、文档和AI流式输出设计。通过将Markdown解析与语法高亮解耦，采用轻量级AST和语义化CSS类，将文档页脚本体积从1.1MiB大幅缩减至约27KiB，彻底摆脱了对React_Server_Components的依赖，实现了"让内容回归内容"的极简渲染理念。<br /><br />文章要点：<br />1. 痛点很真实：原来tanstack.com的文档页光是语法高亮就占了358KiB，加上Shiki、WASM、主题等，读个页面像下载小型出版系统，不得不靠RSC把负担藏到服务器端<br />2. 两个库分工明确：Markdown负责把内容解析成可序列化的普通数据树，Highlight负责把已知语言转成带语义CSS类的HTML，互不依赖，按需组合<br />3. 体积真的小：Markdown解析器仅4.9KB(gzipped)，HTML渲染器约6.7KB，Highlight核心才1.7KB，25种语言全包也才8KB，零运行时依赖<br />4. 暗色模式超优雅：Highlight输出一套带th-语义类的HTML，主题通过CSS变量切换，不用重新高亮，明暗切换只是一次CSS操作<br />5. AI流式输出有新招：不用维护复杂的增量解析状态，每次收到新文本就同步重新解析，已完成块保持稳定，未完成的标题列表不会留空占位<br />6. 已经扛住实战考验：这两个库已全面替换tanstack.com的文档和博客渲染，测试覆盖333个真实文档fixtures，不是玩具是生产力工具<br /><br />URL：<a href="https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight" target="_blank" rel="noopener" title="https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight">https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight</a><a class="tgme_widget_message_link_preview" href="https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight" target="_blank" rel="noopener" title="TanStack Markdown and TanStack Highlight are two tiny, synchronous libraries for turning technical content into deterministic, themeable webpages without shipping a general-purpose publishing system."> <div class="link_preview_site_name accent_color">TanStack</div> <img class="link_preview_image" alt="Introducing TanStack Markdown and TanStack Highlight | TanStack Blog" src="/static/https://cdn4.telesco.pe/file/UGIat6DB6OtQorR_7WxHpJzzGnXMNP4Rt2qGKjT9anm6BXOifi8Kcva8lwvQ2Dced1laZFWF15tbUvWBgejyUyV762v6DYd428J6Tg5LBshWtiXceQa_sw4UqS9RdZJrxIz59BApdziCXiiXNPZIRXBjCGq7c3ozUky2kdDt14UdfHQuz9ArvM5in554bxhhiovljoAQQS3Aj0Vbrd-LnPbHUrBLp6cAOAz4sB3vCtCRKUfji_c2ftLHQJ1O1_rDKIKNV4eRT5EKPqzHRRhhPaIJDDWqw3JH87UVTIf2Bv5sAi0qv2Wo4rHlk0Da2A23egGUApiNn4C6eQAnvoKIWg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Introducing TanStack Markdown and TanStack Highlight | TanStack Blog</div> <div class="link_preview_description">TanStack Markdown and TanStack Highlight are two tiny, synchronous libraries for turning technical content into deterministic, themeable webpages without shipping a general-purpose publishing system.</div> </a>https://channel.meo-ai.com/posts/642https://channel.meo-ai.com/posts/642Sun, 24 May 2026 00:07:06 GMT<span class="post-title-source">《告别Tailwind，重新学习组织CSS》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23CSS" title="#CSS">#CSS</a> <a href="/search/result?q=%23TailwindCSS" title="#TailwindCSS">#TailwindCSS</a> <a href="/search/result?q=%23CSS%E6%9E%B6%E6%9E%84" title="#CSS架构">#CSS架构</a> <a href="/search/result?q=%23%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1" title="#响应式设计">#响应式设计</a> <a href="/search/result?q=%23%E8%AF%AD%E4%B9%89%E5%8C%96HTML" title="#语义化HTML">#语义化HTML</a><br /><br />总结：<br /><br />文章要点：<br />1. 作者从Tailwind迁移到语义化HTML+原生CSS，发现Tailwind其实教会了她很多系统性思维（如重置样式、配色、字体层级），现在正把这些系统用原生CSS重新实现。<br />2. 采用"组件化"CSS架构：每个组件有独立类名和文件，CSS互不覆盖，编辑时只需关注100行左右的局部代码，大幅降低心智负担。<br />3. 保留Tailwind的实用系统：直接复制preflight重置样式，沿用配色变量和字体尺寸变量，让原生CSS也能像Tailwind一样快速决策"要大一点就用xl"。<br />4. 响应式设计新思路：减少媒体查询，改用CSS Grid的auto-fit和grid-template-areas实现自适应布局，这是Tailwind难以做到的"奇怪玩法"。<br />5. 迁移原因：新版Tailwind强依赖构建工具；作者CSS能力提升后想突破Tailwind的限制；受《Tailwind与CSS的女性气质》一文影响，决定认真对待CSS这门技术而非逃避它。<br /><br />URL：<a href="https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/" target="_blank" rel="noopener" title="https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/">https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/</a><a class="tgme_widget_message_link_preview" href="https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-" target="_blank" rel="noopener" title="Hello! 8 years ago, I wrote excitedly about discovering Tailwind."> <div class="link_preview_site_name accent_color">Julia Evans</div> <div class="link_preview_title">Moving away from Tailwind, and learning to structure my CSS</div> <div class="link_preview_description">Hello! 8 years ago, I wrote excitedly about discovering Tailwind.</div> </a>