Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/668https://channel.meo-ai.com/posts/668Sun, 21 Jun 2026 23:49:37 GMT<span class="post-title-source">《MDN 推出官方 MCP 服务器，让 AI 助手实时获取权威 Web 文档》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23AI%E5%B7%A5%E5%85%B7" title="#AI工具">#AI工具</a> <a href="/search/result?q=%23MCP" title="#MCP">#MCP</a> <a href="/search/result?q=%23MDN" title="#MDN">#MDN</a> <a href="/search/result?q=%23%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" title="#浏览器兼容性">#浏览器兼容性</a> <a href="/search/result?q=%23VSCode" title="#VSCode">#VSCode</a> <a href="/search/result?q=%23Claude" title="#Claude">#Claude</a><br /><br />总结：<br />MDN 官方发布了一款实验性 MCP（Model Context Protocol）服务器，旨在让 LLM 和编程助手直接访问 MDN 的搜索、文档及浏览器兼容性数据（BCD），解决 AI 回答中可能出现的过时或错误信息问题。开发者可通过远程服务或本地部署方式接入，支持 VS Code、Claude Code 等 MCP 兼容客户端，实现编码时一键查询 API 用法和兼容性，无需离开编辑器。<br /><br />文章要点：<br />1. 官方出品，权威数据源：这是 MDN 官方推出的 MCP 服务器，直接对接 MDN 的搜索 API、文档 JSON API 以及浏览器兼容性数据（BCD），确保 AI 获取的是最新、最准确的 Web 平台技术资料，而不是训练数据中的"旧知识"<br />2. 六大核心工具，覆盖开发全场景：提供 <code>mdn_search</code>（关键词搜索）、<code>mdn_doc</code>（获取完整文档）、<code>mdn_compat</code>（浏览器兼容性检查）、<code>mdn_list</code>（浏览 BCD 特性）、<code>mdn_css</code>（CSS 属性定义）、<code>mdn_http</code>（HTTP 参考）等工具，从查文档到看兼容性一站搞定<br />3. 远程 + 本地双模式部署：既可以一键接入官方远程服务（<code>https://mcp.mdn.mozilla.net/</code>），也可以克隆仓库本地运行，满足对数据隐私有顾虑的团队需求；本地模式支持 MCP Inspector 调试，开发体验友好<br />4. 无缝集成主流开发工具：完美支持 VS Code、Claude Code、Cursor 等 MCP 兼容客户端，配置简单，安装后直接在 AI 聊天中调用工具，真正实现"边写代码边查文档"的流畅体验<br />5. 实验性质，持续迭代中：目前处于实验阶段，Mozilla 会收集查询数据以优化服务（可 opt-out），且保留随时调整或下线服务的权利，建议开发者关注官方动态<br /><br />URL：<br /><a href="https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/" target="_blank" rel="noopener" title="https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/">https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/</a><a class="tgme_widget_message_link_preview" href="https://mcp.mdn.mozilla.net/" target="_blank" rel="noopener" title="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/MWzDnhywnpdY2bGFk6Pchxlv8pL-h5PUzTMPT2tp_uqLWPohVX7Ad-ipYtyVH_NCSOdNtSSKSlXn6GrTd5qTNcoDXBiKR3o0dgCsFTIx7iBfefoJkCpH3tN-hGXgCWHvDNxVM1Ig1qqkvgyoWlYCsqio4ktLx9PBzJmQU9mUzJUmYGMs8PsA87_C0PGREFxp1dD_nI_vDkGBTlPEW8CiqHkYeacH3jCtMBAwbsGPug6icGDFB3-c2HJSihYZJMNuqbK0FWUVBU8kTdXL3xf6XoHhjHK0PQJ-pf2RGCVASgwD2Uhc3O79eg-LPiNXyJ3zd-ZTapXF0UIyc5NqsIAcPQ.jpg')"></i> <div class="link_preview_site_name accent_color">MDN Web Docs</div> <div class="link_preview_title">MDN MCP server</div> <div class="link_preview_description">The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.</div> </a>https://channel.meo-ai.com/posts/565https://channel.meo-ai.com/posts/565Fri, 27 Feb 2026 02:29:12 GMT<span class="post-title-source">《利用浏览器Canvas进行数据压缩》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23JavaScript" title="#JavaScript">#JavaScript</a> <a href="/search/result?q=%23CanvasAPI" title="#CanvasAPI">#CanvasAPI</a> <a href="/search/result?q=%23%E6%95%B0%E6%8D%AE%E5%8E%8B%E7%BC%A9" title="#数据压缩">#数据压缩</a> <a href="/search/result?q=%23PNG%E7%BC%96%E7%A0%81" title="#PNG编码">#PNG编码</a> <a href="/search/result?q=%23%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" title="#浏览器兼容性">#浏览器兼容性</a> <a href="/search/result?q=%23SPA" title="#SPA">#SPA</a><br /><br />总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。<br /><br />文章要点：<br />- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案<br />- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力<br />- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据<br />- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据<br />- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖<br />- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求<br /><br />文章URL：<a href="https://jstrieb.github.io/posts/canvas-compress/" target="_blank" rel="noopener" title="https://jstrieb.github.io/posts/canvas-compress/">https://jstrieb.github.io/posts/canvas-compress/</a><a class="tgme_widget_message_link_preview" href="https://jstrieb.github.io/posts/canvas-compress" target="_blank" rel="noopener" title="Old browsers don’t have JavaScript compression APIs, so we store data in pixel color channels and export to PNG to compress data."> <div class="link_preview_site_name accent_color">jstrieb.github.io</div> <div class="link_preview_title">Using the Browser’s &lt;canvas&gt; for Data Compression</div> <div class="link_preview_description">Old browsers don’t have JavaScript compression APIs, so we store data in pixel color channels and export to PNG to compress data.</div> </a>