# 粥里有勺糖 > 粥里有勺糖的个人博客，记录随笔与学习笔记，大前端相关的知识，高频面试题，个人面经等 ## Table of Contents ### Other - [【2020】我眼中的前端🧐](https://sugarat.top/_configDoc/show/whyfe.md) - [【2024】🚧 我眼中的前端🧐](https://sugarat.top/_configDoc/show/whyfe-2024.md) - [【免费】Node.js 入门教程](https://sugarat.top/technology/learn/nodejs-getting-started.md) - [【跑图经验】🏠家 => 🏙公司](https://sugarat.top/essay/life/home2company.md) - [【期🐴】注册了一个爱发电账号❤️⚡](https://sugarat.top/essay/dev/afdian.md): 笔者长期维护着一个 Web 项目，但由于种种原因近几个月在其上的投入时间减少了，群里反馈的一些功能建议没办法及时给到支持。有群友就建议开个众筹 - [==和===有什么区别](https://sugarat.top/interview/js/equal.md) - [💡 一些想法&计划做的事](https://sugarat.top/bigWeb/idea.md) - [🤔为什么需要手动刷新本站点](https://sugarat.top/_configDoc/show/sw.md) - [🧧 2024公众号创作回顾](https://sugarat.top/offer/experience/2024-wechat-summary.md) - [🧧 红包封面来了](https://sugarat.top/offer/experience/2025-wechat-red-packet.md) - [🚀 VitePress 插件开发计划](https://sugarat.top/essay/dev/vitepress-plugins.md): 主题在近几年里集成了非常的多功能了，接下来计划将这些能力拆分成组件，以便于更方便的与其它主题集成。 - [🚀校招考点汇总-计算机网络](https://sugarat.top/offer/campus/internet.md) - [🚀校招考点汇总-CSS](https://sugarat.top/offer/campus/css.md) - [🚀校招考点汇总-HTML](https://sugarat.top/offer/campus/html.md) - [🚀校招考点汇总-JavaScript](https://sugarat.top/offer/campus/javascript.md) - [🚧 搭建 easypicker2 docker 镜像实践](https://sugarat.top/technology/learn/ep2-docker.md) - [🚧 Arc 浏览器使用实践](https://sugarat.top/essay/tools/arc.md) - [01-01](https://sugarat.top/offer/review/01-01.md) - [01-04](https://sugarat.top/offer/review/01-04.md) - [01-16](https://sugarat.top/offer/review/01-16.md) - [01-17](https://sugarat.top/offer/review/01-17.md) - [01-19](https://sugarat.top/offer/review/01-19.md) - [01-20](https://sugarat.top/offer/review/01-20.md) - [01-20](https://sugarat.top/offer/review/01-21.md) - [01-22](https://sugarat.top/offer/review/01-22.md) - [01-23](https://sugarat.top/offer/review/01-23.md) - [01-24](https://sugarat.top/offer/review/01-24.md) - [01-25](https://sugarat.top/offer/review/01-25.md) - [01-26](https://sugarat.top/offer/review/01-26.md) - [01-27](https://sugarat.top/offer/review/01-27.md) - [01-28](https://sugarat.top/offer/review/01-28.md) - [01-29](https://sugarat.top/offer/review/01-29.md) - [01-30](https://sugarat.top/offer/review/01-30.md) - [01-31](https://sugarat.top/offer/review/01-31.md) - [02-01](https://sugarat.top/offer/review/02-01.md) - [12-15](https://sugarat.top/offer/review/12-15.md) - [12-16](https://sugarat.top/offer/review/12-16.md) - [12-17](https://sugarat.top/offer/review/12-17.md) - [12-18](https://sugarat.top/offer/review/12-18.md) - [12-21](https://sugarat.top/offer/review/12-21.md) - [12-23](https://sugarat.top/offer/review/12-23.md) - [12-25](https://sugarat.top/offer/review/12-25.md) - [12-27](https://sugarat.top/offer/review/12-27.md) - [12-29](https://sugarat.top/offer/review/12-29.md) - [12-30](https://sugarat.top/offer/review/12-30.md) - [2020年度总结](https://sugarat.top/offer/experience/2020summary.md) - [2020前端春招经验分享](https://sugarat.top/offer/experience/2020spring_wechat.md) - [2021年度总结](https://sugarat.top/offer/experience/2021summary.md) - [2022年度总结](https://sugarat.top/offer/experience/2022summary.md): 千万不要因为走得太久，而忘记了我们为什么出发；2022也是波折比较多的一年，工作上换了组，工作内容发生翻天覆地的变化；生活中换了租处，换了新的装备；经历了防疫政策的突变，从🐑变为阳康，更多细节文中慢慢道来。。。 - [2023公众号创作回顾](https://sugarat.top/offer/experience/2023-wechat-summary.md) - [2023年度总结](https://sugarat.top/offer/experience/2023summary.md): 时间不在于你拥有多少，而在于你怎样使用 - [2025年度总结](https://sugarat.top/offer/experience/2025summary.md): 跌宕起伏但又被幸运眷顾的的一年。 - [20年春招](https://sugarat.top/offer/sum-interview/20-spring.md) - [20年秋招](https://sugarat.top/offer/sum-interview/20-autumn.md) - [21年春招](https://sugarat.top/offer/sum-interview/21-spring.md) - [22年春招](https://sugarat.top/offer/sum-interview/22-spring.md) - [30行代码实现合并指定目录下的所有文件的内容](https://sugarat.top/technology/learn/mergefile.md) - [3分钟使用OSS搭建个人的在线图床](https://sugarat.top/technology/learn/qiniu-imgbed.md) - [安全](https://sugarat.top/offer/campus/safe.md) - [安装nvm后终端启动变慢,更快的Node版本管理工具推荐](https://sugarat.top/bigWeb/node/nvm-iterm.md): 终端启动时总会卡顿一下，没去探究原因，看到咲奈的分享才知道是nvm在作祟 - [百度-百度文库](https://sugarat.top/offer/sum-interview/20-spring/baidu.md) - [笔试题-数组去重](https://sugarat.top/coding/js/duplicate.md) - [闭包](https://sugarat.top/bigWeb/js/closure.md) - [闭包调用](https://sugarat.top/coding/js/closureUse.md) - [编译template的过程](https://sugarat.top/bigWeb/vue/compile.md) - [变量对象](https://sugarat.top/bigWeb/js/variableObject.md) - [表格斑马纹](https://sugarat.top/bigWeb/css/p2.md) - [博客构建性能优化笔记 | 提速 3 倍](https://sugarat.top/essay/dev/2024-blog-build-perf.md) - [博客性能优化笔记 | 99分](https://sugarat.top/essay/dev/2024-blog-perf.md) - [参数按值传递](https://sugarat.top/bigWeb/js/valuePass.md) - [操作系统](https://sugarat.top/offer/campus/os.md) - [层序遍历二叉树](https://sugarat.top/coding/algorithm/treeLevelTraverse.md) - [场景题-请求合并](https://sugarat.top/coding/js/mergeRequest.md) - [成都某公司](https://sugarat.top/offer/sum-interview/22-spring/cd-mini-1.md) - [抽象工厂模式](https://sugarat.top/computerBase/design/abstractfactory.md) - [出院咯🎉 - 0403](https://sugarat.top/essay/life/sbzy-3-cy.md): 3月19日入院，3月24日手术，4月3日出院 - [纯前端实现 JPG 图片压缩 | canvas](https://sugarat.top/technology/learn/jpg-compress.md): 在迭代图床应用时，需要用到图片压缩，在之前分享了使用UPNG.js 处理 PNG 图片，这里记录分享一下如何处理JPG图片，并附上完整 Demo。 - [纯前端实现 PNG 图片压缩 | UPNG.js](https://sugarat.top/technology/learn/png-compress.md): 最近在迭代应用的时候用到了 UPNG.js 压缩 PNG 图片，这里记录分享一下使用经验，并附上完整 Demo。 - [从0-1实现文件下载CLI工具](https://sugarat.top/technology/works/fs-cli.md) - [大数相加&数字字符串相加](https://sugarat.top/coding/algorithm/addString.md) - [单例模式](https://sugarat.top/computerBase/design/single.md) - [单链表转置](https://sugarat.top/coding/algorithm/linkReserve.md) - [弹性布局](https://sugarat.top/bigWeb/css/flex.md) - [滴滴-效能平台](https://sugarat.top/offer/sum-interview/22-spring/dd-power.md) - [滴滴国际化](https://sugarat.top/offer/sum-interview/22-spring/dd-global.md) - [第三次到上海](https://sugarat.top/essay/life/sbzy-9.md): 来上海复查身体状况。 - [定时器](https://sugarat.top/bigWeb/js/clock.md) - [定时器实现](https://sugarat.top/interview/code/myClock.md) - [独立博客自省问卷 15 题](https://sugarat.top/essay/dev/blog-15-problem.md): 最近看到的独立博客里比较火的一个问卷，本文是我的回答 - [堆排序](https://sugarat.top/coding/algorithm/headSort.md) - [对象类型和原始类型的不同之处](https://sugarat.top/interview/js/objDiffPrim.md) - [对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？](https://sugarat.top/interview/other/object.md) - [二叉树的遍历](https://sugarat.top/interview/code/treeTraverse.md) - [防抖与节流实现](https://sugarat.top/interview/code/debounce-throttle.md) - [斐波拉契数列](https://sugarat.top/coding/algorithm/feibo1.md) - [斐波拉契数列](https://sugarat.top/coding/algorithm/feibo2.md) - [分享封装的一些七牛云OSS操作方法](https://sugarat.top/technology/learn/qiniu-oss.md) - [分享小册《Chrome-DevTools的使用技巧》中的精华](https://sugarat.top/bigWeb/browser/chrome-devtools-study.md) - [分享一下笔者的 Mac 装机必备软件](https://sugarat.top/essay/dev/mac-init.md): 分享一下笔者高频使用的一些 Mac 软件 - [分享一下最近 VibeCoding 的项目部署工具：Kite](https://sugarat.top/technology/works/kite.md): 之前用 ssh/scp 推本地项目到服务器，索性做了一个本地构建 + 一键上传的工具，走 HTTP 协议更方便 - [分享一下最近做的AI记账 App](https://sugarat.top/technology/works/miaowa.md): 自己做了个记账 App「妙蛙记账」。支持自然语言记账和查询。Web 和 Android 都能用。 - [封装dotenv库实现类似Vite加载环境变量的行为](https://sugarat.top/technology/learn/loadEnv.md) - [服务端渲染](https://sugarat.top/bigWeb/performance/ssr.md) - [浮点数](https://sugarat.top/bigWeb/js/float.md) - [概念知识-理论干货](https://sugarat.top/technology/theory.md) - [个人作品](https://sugarat.top/technology/works.md) - [个人作品展示](https://sugarat.top/works/work.md) - [工程模板搭建](https://sugarat.top/technology/tpl.md) - [工具方法汇总](https://sugarat.top/technology/learn/tool-methods.md) - [公众号头图生成器](https://sugarat.top/wechat-cover.md): 基于 edge-aura 的公众号头图生成工具 - [关于前端一些综合知识](https://sugarat.top/interview/other.md) - [关于自己](https://sugarat.top/aboutme.md) - [归并排序](https://sugarat.top/coding/algorithm/mergeSort.md) - [函数参数是对象会发生什么问题](https://sugarat.top/interview/js/objparam.md) - [盒模型](https://sugarat.top/bigWeb/css/box.md) - [互联网校招相关名词](https://sugarat.top/offer/experience/words.md) - [回流与重绘](https://sugarat.top/bigWeb/css/reflow.md) - [获取dom元素的几种方式](https://sugarat.top/bigWeb/js/getElement.md) - [基本工](https://sugarat.top/offer/campus/coder.md) - [几种隐藏元素的方式比较](https://sugarat.top/interview/css/hideElement.md) - [记录操作系统相关知识](https://sugarat.top/computerBase/os.md) - [记录操作系统相关知识](https://sugarat.top/interview/os.md) - [记一次 CDN 流量被盗刷经历](https://sugarat.top/essay/dev/cdn-ds1.md) - [记一次服务器迁移](https://sugarat.top/essay/dev/migrate-bt-server.md) - [记一下 rustup 切换 rustc 版本不生效的问题](https://sugarat.top/bigWeb/rust/rustup-rustc-change-fail.md) - [技术杂文集](https://sugarat.top/technology/learn.md) - [继承实现](https://sugarat.top/coding/js/inherit.md) - [加群交流](https://sugarat.top/group.md): 欢迎大家加入主题交流群 - [监控](https://sugarat.top/bigWeb/performance/monitor.md) - [简单工厂模式](https://sugarat.top/computerBase/design/factory.md) - [简介](https://sugarat.top/bigWeb/js.md) - [简介](https://sugarat.top/computerBase/design.md) - [剑指Offer刷题记录](https://sugarat.top/computerBase/offer.md) - [箭头函数?](https://sugarat.top/bigWeb/js/arrowfun.md) - [将任意类型转为Boolean的方案](https://sugarat.top/interview/js/getBool.md) - [节流与防抖](https://sugarat.top/bigWeb/js/throttling.md) - [节流与防抖](https://sugarat.top/bigWeb/performance/throttling.md) - [解决Vite-React项目中js使用jsx语法报错的问题](https://sugarat.top/technology/learn/vite-react-js.md) - [进程](https://sugarat.top/computerBase/os/process.md) - [进程和线程怎么通信](https://sugarat.top/computerBase/os/communicate.md) - [进程与线程的区别](https://sugarat.top/computerBase/os/difprothr.md) - [居中](https://sugarat.top/interview/code/middle-center.md) - [开发日记 | 不定时更新](https://sugarat.top/essay/dev/changelog-2024.md): 记录一下每天干的杂事，写的杂七杂八的代码，用于日后回顾，翻开尘封的记忆 - [开发一个美观的 VitePress 图片预览插件](https://sugarat.top/technology/works/vitepress-plugin-image-preview.md): 开发了一个适用于 VitePress 的图片预览插件 vitepress-plugin-image-preview，风格样式类似 element-plus 的图片预览组件 - [柯里化(Currying)](https://sugarat.top/bigWeb/js/currying.md) - [快手-最大的前端团队](https://sugarat.top/offer/sum-interview/20-autumn/ks.md) - [快手-Acfun](https://sugarat.top/offer/sum-interview/20-spring/kuaishou-acfun.md) - [快速排序](https://sugarat.top/coding/algorithm/quickSort.md) - [垃圾回收机制](https://sugarat.top/bigWeb/js/garbage.md) - [懒加载与执行](https://sugarat.top/bigWeb/performance/lazyLoad.md) - [类数组与arguments](https://sugarat.top/bigWeb/js/likearray.md) - [离开上海回家啦](https://sugarat.top/essay/life/sbzy-9-cy.md): 9-25日出院，回家休养了🚄 - [力扣刷题记录](https://sugarat.top/computerBase/leetcode.md) - [浏览器](https://sugarat.top/offer/campus/browser.md) - [浏览器-安全问题](https://sugarat.top/bigWeb/browser/safe.md) - [浏览器-本地存储](https://sugarat.top/bigWeb/browser/storage.md) - [浏览器-常见面试题](https://sugarat.top/bigWeb/browser/problem.md) - [浏览器-缓存机制](https://sugarat.top/bigWeb/browser/cache.md) - [浏览器-跨域与跨站](https://sugarat.top/bigWeb/browser/cors.md) - [浏览器-内核](https://sugarat.top/bigWeb/browser/core.md) - [浏览器-事件循环机制](https://sugarat.top/bigWeb/browser/eventloop.md) - [浏览器-渲染原理](https://sugarat.top/bigWeb/browser/render.md) - [浏览器-阻塞](https://sugarat.top/bigWeb/browser/block.md) - [浏览器中生成 OSS 令牌 | Web Crypto API](https://sugarat.top/technology/learn/oss-token-generate-web.md): 使用 Web Crypto API，btoa，spark-md5（第三方库），在前端中生成 OSS 上传令牌，支持七牛云，又拍云 - [浏览器专题系列文章](https://sugarat.top/bigWeb/browser.md) - [路由原理](https://sugarat.top/bigWeb/vue/routing.md) - [马上中秋了，把鼠标指针变为小玉兔](https://sugarat.top/technology/learn/mid-autumn-festival.md) - [每天几道面试题](https://sugarat.top/offer/review.md) - [美团-到店事业群](https://sugarat.top/offer/sum-interview/20-spring/meituan-dd.md) - [美团招聘](https://sugarat.top/_configDoc/show/bole.md) - [迷惑代码赏析&吐槽](https://sugarat.top/case/bad.md) - [迷惑代码赏析第1期](https://sugarat.top/case/bad/issue1.md): 工作中遇到了许多的 💩 代码，单独开个系列和大家分享&吐槽一下，一起品(xue)鉴(xi)一下。 - [面试题50第一个只出现一次的字符](https://sugarat.top/computerBase/offer/p50.md) - [面试题53-.0～n-1中缺失的数字](https://sugarat.top/computerBase/offer/p53-2.md) - [面试题54.二叉搜索树的第k大节点](https://sugarat.top/computerBase/offer/p54.md) - [面试题55-.二叉树的深度](https://sugarat.top/computerBase/offer/p55-1.md) - [面试题55-.平衡二叉树](https://sugarat.top/computerBase/offer/p55.md) - [面试题58-.左旋转字符串](https://sugarat.top/computerBase/offer/p58.md) - [面试题合集](https://sugarat.top/interview/problem.md) - [面试指南](https://sugarat.top/interview.md) - [模板工程搭建：Vite-Vue3工程化模板](https://sugarat.top/technology/tpl/vite-vue3-template.md) - [模板工程搭建：Vue-Cli搭建Vue3/TS/uni-app小程序工程(上)](https://sugarat.top/technology/tpl/uni-vue3-cli_1.md) - [模板工程搭建：Vue-Cli搭建Vue3/TS/uni-app小程序工程(下)](https://sugarat.top/technology/tpl/uni-vue3-cli_3.md) - [模板工程搭建：Vue-Cli搭建Vue3/TS/uni-app小程序工程(中)](https://sugarat.top/technology/tpl/uni-vue3-cli_2.md) - [模板工程搭建：Web-SDK/Library](https://sugarat.top/technology/tpl/web-sdk-tpl.md) - [模式串匹配](https://sugarat.top/interview/code/kmp.md) - [蘑菇街-小程序BU](https://sugarat.top/offer/sum-interview/20-spring/mogu.md) - [内联JS处理(ES语法降级&内容压缩)](https://sugarat.top/technology/works/html-inline-js-transform.md) - [内容预告-最近准备整理的内容](https://sugarat.top/_configDoc/top/notice.md) - [牛客网-大前端团队](https://sugarat.top/offer/sum-interview/20-autumn/nowcoder.md) - [排序算法是否稳定](https://sugarat.top/computerBase/algorithm/sort.md) - [判断两个时间是否在同一周](https://sugarat.top/coding/js/judgeDate.md) - [判断是否为对称二叉树](https://sugarat.top/coding/algorithm/judgeSymmetryTree.md) - [判断数据类型的方案](https://sugarat.top/bigWeb/js/p4.md) - [配置SSH免密登录服务器](https://sugarat.top/technology/learn/ssh-no-pwd-login.md) - [其它](https://sugarat.top/offer/campus/other.md) - [前端备战之操作系统](https://sugarat.top/offer/experience/os.md) - [前端备战之计算机网络](https://sugarat.top/offer/experience/Internet.md) - [前端工程化](https://sugarat.top/interview/other/engineering.md) - [前端校招考点汇总](https://sugarat.top/_configDoc/top/campusProblem.md) - [前端校招考点汇总](https://sugarat.top/offer/campus.md) - [浅拷贝与深拷贝](https://sugarat.top/bigWeb/js/copy.md) - [任意进制转换](https://sugarat.top/interview/code/transfer.md) - [日期格式化](https://sugarat.top/bigWeb/js/p2.md) - [如何编写一份好的互联网校招简历](https://sugarat.top/offer/experience/resume.md) - [如何加快首屏渲染?](https://sugarat.top/interview/performance/firstScreenRender.md) - [如何理解原型？如何理解原型链？](https://sugarat.top/interview/other/prototype.md) - [如何判断变量类型是对象](https://sugarat.top/interview/js/judgeObj.md) - [如何判断数组](https://sugarat.top/interview/js/judgeArr.md) - [如何实现变量a同时等于多个值](https://sugarat.top/coding/js/equalA.md) - [如何优雅的复制当前项目分支名](https://sugarat.top/technology/learn/copy-branch.md): 本文简单介绍了如何通过`Shell`和`Node.js`实现复制当前分支名到剪贴板 - [如何正确判断this？箭头函数的this是什么？](https://sugarat.top/interview/js/this.md) - [润了](https://sugarat.top/offer/experience/run-2026.md): 提 🪣 跑路了 - [设计模式](https://sugarat.top/offer/campus/designPattern.md) - [设计模式-创建型模式](https://sugarat.top/technology/study/design-patterns1.md) - [设计模式-结构型模式](https://sugarat.top/technology/study/design-patterns2.md) - [设计模式-设计原则](https://sugarat.top/technology/study/design-patterns0.md) - [什么是提升？什么是暂时性死区？var、let及const区别？](https://sugarat.top/interview/other/promote.md) - [生病了 - 主动脉夹层](https://sugarat.top/essay/life/sbzy-3.md): 2025年2月4日突发胸痛，急诊紧急入院；确诊为主动脉夹层B型，没做手术，保守治疗3月1日出院 - [生命周期钩子](https://sugarat.top/bigWeb/vue/hook.md) - [时光恋人](https://sugarat.top/works/time-lover.md) - [时间管理CLI工具](https://sugarat.top/works/time-tools.md) - [实践：给女朋友个性化定制应用-体重记录（二）](https://sugarat.top/works/time-lover/timeLover-2.md) - [实践：给女朋友个性化定制应用-体重记录（三）](https://sugarat.top/works/time-lover/timeLover-3.md) - [实践：给女朋友个性化定制应用-体重记录（一）](https://sugarat.top/works/time-lover/timeLover-1.md) - [实践：利用ArrayBuffer实现预览指定目录下的所有文件的内容](https://sugarat.top/technology/learn/array-buffer.md) - [实践：使用jsencrypt配合axios实现非对称加密传输的数据](https://sugarat.top/technology/learn/jsencrypt.md) - [实现调用就执行一次的定时器](https://sugarat.top/coding/js/immed-setInterval.md) - [实现深拷贝](https://sugarat.top/coding/js/deepClone.md) - [实现一个幽灵依赖扫描工具](https://sugarat.top/bigWeb/node/phantom-dep-cli.md) - [实现一个Web UI检测(视觉走查)工具ing](https://sugarat.top/technology/works/ewuit.md) - [实现一下new](https://sugarat.top/coding/js/myNew.md) - [实现自动扫描工作区npm包并同步cnpm](https://sugarat.top/technology/learn/cnnc.md): 批量且自动的做cnpm的同步，如果你是一个多npm包的项目，那么这个工具非常适合你 - [实现自动为 VitePress 网站添加 RSS 订阅的插件](https://sugarat.top/technology/learn/vitepress-plugin-rss.md): 使用 VitePress 作为个人博客的站点越来越多，RSS支持也是博客上的一个功能点，方便读者订阅，本文将介绍如何通过Vite 插件为 VitePress 站点一键添加RSS支持 - [实现apply](https://sugarat.top/coding/js/myApply.md) - [实现async/await](https://sugarat.top/coding/js/async.md) - [实现bind](https://sugarat.top/coding/js/myBind.md) - [实现call](https://sugarat.top/coding/js/myCall.md) - [实现instanceOf](https://sugarat.top/coding/js/instanceof.md) - [实现promiseAll](https://sugarat.top/coding/js/promiseAll.md) - [实现VNode节点](https://sugarat.top/bigWeb/vue/vnode.md) - [使用豆包 MarsCode IDE 搭建 VitePress博客并使用 GitHub 部署](https://sugarat.top/ai/doubao/marscode-cn.md) - [使用又拍云极速搭建图床](https://sugarat.top/technology/learn/upyun.md): 分享一下又拍云的简单用法，以及使用它搭建图床。 - [使用http-proxy-agent出现ECONNRESET error](https://sugarat.top/technology/study/http-proxy-fail.md) - [使用Node.js从终端读入内容](https://sugarat.top/bigWeb/node/p1.md) - [使用Pagefind为VitePress文档添加离线全文搜索能力](https://sugarat.top/technology/works/vitepress-plugin-pagefind.md): Pagefind是基于Rust实现的离线搜索库，检索生成后的HTML页面内容，然后自动构建索引文件，提供搜索使用的API和组件 - [使用TS封装操作MongoDB数据库的工具方法](https://sugarat.top/bigWeb/node/mongoDb.md) - [事件的触发过程是怎么样的？知道什么是事件代理嘛？](https://sugarat.top/interview/js/event.md) - [视野修炼 - 技术周刊](https://sugarat.top/weekly.md) - [视野修炼第100期 | CSS observer](https://sugarat.top/weekly/2024-09-08.md): ① style-observer - 监听 CSS 变化 ② Jimp - JS 图片处理库 ③ yocto-spinner - 终端旋转 loading ④ revideo - Code 生成视频 ⑤ button-stealer - 按钮收藏 ⑥ 免费头像合集 ⑦ 应该使用的HTML TOP5 特性 ⑧ 3.78MB 大小的 JS 服务 Docker 镜像 - [视野修炼第101期 | 垂直居中](https://sugarat.top/weekly/2024-09-16.md): ① align-content - 垂直居中普通元素 ② up mode - 一键隐藏 Chrome 插件 ③ Chrome 性能面板新功能 ④ k-colors.js - 图片主色提取 ⑤ 英：优化JS性能的一些技巧 ⑥ 英：Web 的剪贴板，如何存储不同类型的数据 ⑦ 英：不简单的 js 入门教程 ⑧ Peter Cat - GitHub 仓库智能答疑机器人 - [视野修炼第102期 | js 编译运行C](https://sugarat.top/weekly/2024-09-22.md): ① Bun 现在允许直接在js中直接编译运行 C ！ ② caniuse-cli ③ SSL证书管理工具 ④ 好的重构与坏的重构 ⑤ sisi - 命令行图片检索工具 ⑥ cvbee.ai - AI 简历生成 - [视野修炼第103期 | 优雅的移除事件](https://sugarat.top/weekly/2024-09-28.md): ① 你不知道的 AbortController ② AI 驱动的JS反混淆工具 ③ 开源许可证选择 ④ UptimeFlare - 网站在线状态监控 ⑤ MingCute Icon - 开源图标库 ⑥ JS 各个压缩库对比 ⑦ 即将到来的 Deno 2.0 ⑧ Compress JPG - 图片压缩工具 - [视野修炼第104期 | 下一代 JavaScript 工具链](https://sugarat.top/weekly/2024-10-07.md): ① 🐙 尤大创办公司 VoidZero ② Tauri 2.0 稳定版发布 ③ Vite 时髦的新主页 ④ qrframe - 漂亮二维码生成 ⑤ HTTP QUERY 方法提案 ⑥ TinyJS - 轻量级的创建DOM元素 ⑦ 9月 Web 平台的新功能 ⑧ ESLint 现在正式支持 Linting JSON 和 Markdown - [视野修炼第105期 | AI驱动全栈应用开发](https://sugarat.top/weekly/2024-10-13.md): ① bolt - AI驱动一站式的应用开发 ② WebChat - 同网页在线聊天 ③ 一年一度的 js13kGames结果公布 - 13KB 大小的游戏 ④ 新的 CSS logo？ ⑤ TS 类型体操练习 ⑥ 100+ 免费独特的 SVG 图标 ⑦ TutorialKit - 交互式教程创建 - [视野修炼第106期 | Node23值得关注的新特性](https://sugarat.top/weekly/2024-10-20.md): ① Node23 发布 ② Recce - 如何突破动态化容器的天花板 ③ 上网的糟糕感受 ④ 如何设定超过25天的定时器 ⑤ 快速预览目标链接在各种社交软件的展示 ⑥ 为网站添加气球 ⑦ VItePress 中预览组件 ⑧ 哔哩哔哩：基于源码的可视化编辑方案 ⑨ 图片主色提取 ⑩ 使用 TS 约束正则表达式 ⑪ 英：HTML入门教程 - ⑫ Web 框架 Hono 的故事 - [视野修炼第107期 | 2024 CSS 现状](https://sugarat.top/weekly/2024-10-27.md): ① 2024 CSS 现状 ② 开发术语百科全书 ③ 对用更快的语言重写 JS 工具持怀疑态度 ④ JSBEN - JS代码性能对比 ⑤ Emoji-Fallback.js ⑥ Web 缓存网 - CDN资源 - [视野修炼第108期 | AI脚本语言](https://sugarat.top/weekly/2024-11-03.md): ① GenAIScript - AI脚本语言 ② iCraft Editor - 3D架构图设计 ③ URL Parser Online - 网页内容解析工具 ④ Flock - Flutter 社区版 ⑤ baseline-status - 展示特性兼容性的Web组件 ⑥ 开源贡献墙生成 - [视野修炼第109期 | VSCode主题定制](https://sugarat.top/weekly/2024-11-10.md): ① VS Code 主题定制生成 ② skellyCSS - 轻量级的CSS骨架屏方案 ③ create-vue 实现性集成 Oxlint ④ 英：从 URL 输入到页面渲染的过程 ⑤ 使用 JS 生成随机迷宫 ⑥ gounfaked - 免费的AI图片 - [视野修炼第110期 | 紫色的纪念](https://sugarat.top/weekly/2024-11-17.md): ① CSS 新 logo - 紫色的纪念 ② 一站式 iframe 生成器 ③ vlt - 新的 js 包管理器 ④ kkTerminal - Web实现SSH终端 ⑤ Emoji的隐藏玩法 - [视野修炼第111期 | 读文件 API 性能对比](https://sugarat.top/weekly/2024-11-24.md): ① Node.js 与 Bun 读取文件速度对比 ② 2024 HTML现状调研 ③ Viselect - 直观的 DOM 选择 ④ fraction.js - 精确的十进制运算库 ⑤ npmpackage.info - 在线查看 npm 包相关概览信息 ⑥ dive - 展示 docker 镜像里层的内容 ⑦ lcl.host - 一键本地生SSL证书 ⑧ 12 个现代CSS技巧 - 1行代码 - [视野修炼第112期 | GitHub 数据分析](https://sugarat.top/weekly/2024-12-01.md): ① 免费的页面模板 1500+ ② GitHub 数据分析的瑞士军刀 ③ Spoiler - 内容隐藏组件 ④ 简单的文本 diff 工具 ⑤ Vite 6.0 发布 ⑥ rmtrash - 移到废纸篓的终端工具 ⑦ 浏览器的存储方法比较 - [视野修炼第113期 | JS 29周年](https://sugarat.top/weekly/2024-12-08.md): ① Node.js 22.12.0 发布 - 默认支持require(esm) ② Linkify - 自动链接生成 ③ Todoctor - 分析追踪代码中的TODO ④ JS 29周年 ⑤ Kinesis.js - 复杂交互动画创建 ⑥ jsontr.ee - JSON 可视化工具 ⑦ EasyResizer - 图片批量尺寸调整工具 - [视野修炼第114期 | 2024JS现状调查结果](https://sugarat.top/weekly/2024-12-22.md): ① 2024 JavaScript 现状调查结果 ② Text Fragment - 直接链接网页文本 ③ my-github-2024 - 2024 GitHub 报告生成 ④ 优秀的单页网站案例 ⑤ Gradienty - 一套CSS工具集 ⑥ 并发和并行的区别 ⑦ AI 音效生成 - [视野修炼第115期 | 今年最后一期](https://sugarat.top/weekly/2024-12-29.md): ① 一些现代的 Nodejs 能力 ② MarkItDown ③ ReactAI ④ 背景移除 ⑤ 智能图片描述生成器生成器 - [视野修炼第116期 | NB Ping](https://sugarat.top/weekly/2025-01-05.md): ① NB Ping - 多地址并发 Ping 工具 ② 动画图标 ③ RSS.Beauty - RSS 订阅源美化展示 ④ Console.trace：JavaScript调试的利器 ⑤ 关于跨端的前世今生 ⑥ LogoShip - 图标生成器 - [视野修炼第117期 | 24年明星项目](https://sugarat.top/weekly/2025-01-18.md): ① 2024年 JS 明星项目 ② CSS 选择器知识合集 ③ 从任意图像生成渐变背景色 ④ Node v23.6 - 内置默认支持TS ⑤ trimMiddle - 字符串中间截断 ⑥ Easing Wizard - CSS 动画缓动曲线编辑 ⑦ opfs-finder ⑧ facad - ls美化 ⑨ CSS变量编辑器 ⑩ pnpm v10 ⑪ electrobun - 基于Bun的跨平台桌面应用框架 ⑫ CSS 中平衡文本展示的方法 ⑬ htmx的未来规划 ⑭ Raphael AI - 无限制的文生图 - [视野修炼第118期 | 周刊回归🎉](https://sugarat.top/weekly/2025-05-10.md): ① BongoCat - 键盘搭子🐱 ② 喝了么 - 喝水搭子 ③ 符号收集站点 ④ Lexe - Node.js 应用打包 ⑤ Vert - 格式转换工具 ⑥ SVG转3D模型 ⑦ 线上问题处理经验分享 ⑧ Emoji 换脸工具 - [视野修炼第119期 | 终端调色](https://sugarat.top/weekly/2025-05-18.md): ① console支持的格式化字符串 - 小知识 ② ANSIS 4.0 - 终端调色盘 ③ uni-app x 支持鸿蒙 ④ color-convert ⑤ mono-jsx - 服务器端 JSX 运行时 ⑥ LinkSumm - AI 总结网页内容 - [视野修炼第120期 | NoCode](https://sugarat.top/weekly/2025-05-25.md): ① NoCode - 一句话，呈所想 ② 直接获取输入框value的number类型值 ③ prompt-kit - AI组件库 ④ Next BConvert ⑤ jsPad ⑥ Chrome 137 开发者工具的新变化 ⑦ JavaScript 30年 ⑧ TS GO 实现预览版 ⑨ 免费的 AI 图像处理工具 - [视野修炼第121期 | Rolldown-Vite](https://sugarat.top/weekly/2025-05-31.md): ① Rolldown-Vite ② 对话月影 - AI风口下做啥 ③ snapDOM - 捕获DOM为图像 ④ ForesightJS - 预测鼠标意图库 ⑤ Text2SVG ⑥ MD标题外链转二维码工具 ⑦ 通义灵码 AI IDE - [视野修炼第122期 | 发光图片制作](https://sugarat.top/weekly/2025-06-07.md): ① HDRify - 发光 HDR 图片制作 ② qnm - node_modules分析工具 ③ Glow UI - 开源SVG图标 ④ 在线的图片编辑器 ⑤ 面向 JS 开发的 Go 学习指南 ⑥ CSS 聚光灯效果 ⑦ Arc 浏览器停止开发 - [视野修炼第123期 | 你在用Node几？](https://sugarat.top/weekly/2025-06-15.md): ① Node 18 早已停止支持，官方建议直接上v22 ② Oxlint 1.0 发布 ③ 🍊 Orange ORM ④ darkmodejs - 深色模式工具库 ⑤ 逼真的颜色混合工具 ⑥ 依赖可视化分析工具 ⑦ 速率限制交互式指南 - [视野修炼第124期 | 终端艺术字](https://sugarat.top/weekly/2025-06-21.md): ① figlet.js - 终端生成 ASCII 艺术字体 ② state-in-url ③ 语法高亮组件 ④ log-vwer - 轻量的日志监控面板 ⑤ 网站链接检测 ⑥ 小恐龙二维码生成 ⑦ 3D 拟物图标资源 ⑧ Biome V2 - [视野修炼第125期 | nano-banana](https://sugarat.top/weekly/2025-08-30.md): ① nano-banana ② 现代 Nodejs 开发姿势 ③ PongHub - 开源服务监控平台 ④ SSR 渲染 Check工具 ⑤ difit - Diff CLI ⑥ image-js - 图像处理库 ⑦ 免费HTTPS证书申请 - 90天 ⑧ 图片转成像素画 ⑨ 国内SVG Logo资源 ⑩ 各种定价页的设计参考 - [视野修炼第126期 | TypeScript #1](https://sugarat.top/weekly/2025-11-08.md): ① 🤫spoilerjs ② 🏆 TypeScript 跃升至 \#1 - GitHub 上最常用的语言 ③ 中国法定假日查询库 ④ type-flag - 类型化命令行参数解析 ⑤ Node v24 已经是最新的LTS 版本 ⑥ TypingSVG ⑦ 腾讯 TDesign 组件库的 uniapp 适配 ⑧ Dayflow - 每日的电脑使用分析 ⑨ image-dimensions ⑩ Biome v2.3 ⑪ Vercel 支持 Bun 运行时 ⑫ emoji-regex - [视野修炼第127期 | Valdi](https://sugarat.top/weekly/2025-11-16.md): ① tasuku - 极简 Node 任务处理 ② fkill - 强制终止进程 ③ FileMock ④ Valdi - 新的跨平台 UI 框架 ⑤ JavaScript 引擎大全 ⑥ 使用 Error.cause 进行错误处理 ⑦ GitHub Repo Visibility Analyzer - [视野修炼第128期 | Bun 被收购](https://sugarat.top/weekly/2025-12-07.md): ① Anthropic 收购 Bun ② Mole - Mac 垃圾清理工具 ③ React 高危漏洞 ④ code996 ⑤ Vite 8 发布 Beta ⑥ 基于Web本地化的图片编辑器 ⑦ Gitmal - Git 仓库变成静态站点 ⑧ GitHub 分享卡片生成 - [视野修炼第129期 | 上一次古法编程是什么时候](https://sugarat.top/weekly/2026-04-11.md): ① 杀死那个写代码的人 ② 插件离线安装包获取 ③ Harness Engineering是什么？ ④ SSGOI - Native 过度效果 ⑤ boneyard-js - 自动骨架屏 ⑥ gitlogue - 动画展示 Git 提交历史 ⑦ gh-space-shooter - 贡献图转为射击小游戏 ⑧ Tunelo - 穿透工具 ⑨ 图解演示 CC 工作流程 ⑩ Open Agent SDK - [视野修炼第130期 | 光影效果](https://sugarat.top/weekly/2026-08-23.md): ① 屏幕边缘光影效果 ② Blossom Carousel - 轮播组件 ③ 10. Virtua - 快且小的虚拟滚动库 ④ Dot Matrix = 点阵动画 ⑤ Stolen Buttons - 可供参考的一大批按钮 ⑥ termdom - 使用3剑客构建终端应用 ⑦ Ant - 仅 9 MB的运行时 ⑧ gridstack.js ⑨ tslog - Beautiful logging ⑩ import defer ⑪ hucre - 0 依赖的 Excel 处理库 ⑫ scriptc - TS2Native ⑬ Node 新文档站 - [视野修炼第131期 | Bun 与 pnpm Rust 化](https://sugarat.top/weekly/2026-08-29.md): ① MobileView - 同屏网站在不同设备上的效果 ② orb - 液态玻璃球效果 ③ Bun 1.4 - Rust 重构版上线 ④ Node.js 26.8.0 - 原生支持读写ZIP ⑤ pnpm 12 - Rust 重构 ⑥ 反转 PDF 文档颜色 ⑦ PicLite - 压缩图片的客户端 ⑧ MicroLighter - 轻量的代码高亮库 ⑨ 图片转 SVG - [视野修炼第132期 | 一些有趣的组件](https://sugarat.top/weekly/2026-09-05.md): ① React Bits - 充满艺术的 React 组件 ② 粒子效果的图表 ③ bloub - gork 机器人头像的 ④ tree-qr - 将二维转成3D的一颗树 ⑤ Infographic - AI 友好的信息图表 ⑥ Mac 应用多开工具 ⑦ srvx - 基于 Web 标准的通用 Server ⑧ 代码打字机动画生成 ⑨ Ambient CSS - 通过光源产生阴影 - [视野修炼第133期 | Native 回春了?](https://sugarat.top/weekly/2026-09-19.md): ① Shopify 从 React Native 又转向 Native ② UI SKILLS 合集 ③ JS 13KB 做出来的小游戏 ④ Claude也默认支持 AGENTS.md 了 ⑤ Tailwind CSS 加入 Shopify ⑥ iPhone Duo 风格 一 Mac 状态栏图标 ⑦ 复古手绘风格组件 ⑧ 纯CSS手绘风格标注 ⑨ Rslib 1.0 正式发布 ⑩ SQL Playground ⑪ 可视化3D讲解引力 ⑫ await fetch 在等什么 ⑬ VS Code 的故事 ⑭ 最好的深色模式切换按钮，就是 "不设置按钮 - [视野修炼第134期 | 豆豆眼头像](https://sugarat.top/weekly/2026-09-26.md): ① Gork Bot风格头像生成 ② Node.js 26.10.0内置防抖节流 ③ HTML 元素周期表 ④ Claude 实现逼真的水波纹效果 ⑤ gpt-6-astra 3D提示词 ⑥ 测试GPT 是否降智 ⑦ vitepress-plugin-llms 插件 ⑧ tinyjs.app - 使用 js 构建原生应用 ⑨ Chrome 154 支持自适应 iframe ⑩ Lovable 用 Rust 重写 Vite DevServer ⑪ Node 27 官方不再支持 Mac Intel ⑫ 可以替代第三方包的12个Node内置能力 - [视野修炼第18期](https://sugarat.top/weekly/2022-12-30.md) - [视野修炼第19期](https://sugarat.top/weekly/2023-01-06.md): 1. console.log会导致内存泄露？2.如何治伸手党 3.未来的前端路由实现 4.跨Web和RN的组件库 5. 2023的框架会是什么一的 6. Vue的2022总结 - [视野修炼第20期](https://sugarat.top/weekly/2023-01-13.md) - [视野修炼第21期](https://sugarat.top/weekly/2023-01-20.md): 【文末福利🎁】1. 2022 State of JS 结果出炉 2. CodePen 2022 Top100 3. 中国亲戚关系计算器。。。更多内容详见文章 - [视野修炼第22期](https://sugarat.top/weekly/2023-01-26.md): ① 纯CSS实现树状视图 ② 为什么JSON中不支持注释 ③ 漫画HTTPS工作原理 ④ 🎉Github有1亿开发者了 ... - [视野修炼第23期](https://sugarat.top/weekly/2023-02-02.md): ① Svelte纪录片总结 ② CLI工具推荐 ③ CRA讨论大战 ④ 🔧认认配置文件 ... - [视野修炼第24期](https://sugarat.top/weekly/2023-02-10.md): ① 原生的CSS嵌套语法 ② 原生深拷贝API ③ OpenAI GPT体验生成周报 ④ 快速通过页面元素定位到源码的Chrome插件 ⑤ 终端里运行Chrome... - [视野修炼第25期](https://sugarat.top/weekly/2023-02-17.md): ① 如何做到报错信息和commit关联 ② React纪录片（前端娱乐圈新增大片） ③ corejs的未来（💰💰）④ 如何在RN中使用ECharts？⑤ inquirer.js 的替代品 ⑥ Chrome 重定向限制次数? - [视野修炼第26期](https://sugarat.top/weekly/2023-02-24.md): ① 一个程序员决定写代码到60岁 ② 开源的webContainer（浏览器里直接跑Node代码） ③ AI应用：和历史人物对话 ④ HTML性能优化 - prerender2.0 ⑤ 一些实用的Git技巧 ⑥ 2022Q4移动互联网行业数据研究报告... - [视野修炼第27期](https://sugarat.top/weekly/2023-03-03.md): ① 最近很🔥的Signal ② 可以做镜子的Button ③ 如何快速估算出git仓库开发所用的时间 ④ @antfu/ni ⑤ GPT3.5 - [视野修炼第28期](https://sugarat.top/weekly/2023-03-10.md): ① 1. 字节自研构建工具 Rspack 发布 ② 你可能不需要build步骤？③ 模块联邦sdk化微模块方案 ④ gpt 网页皮 ⑤ 前端8年老兵的自述.... - [视野修炼第29期](https://sugarat.top/weekly/2023-03-17.md): ① 免费的GPT4帮你写代码 ② 跨平台GPT客户端 ③ 一键总结B站视频内容 ④ GPT CSS代码功力测试 ⑤ New Bing不用排队了 - [视野修炼第30期](https://sugarat.top/weekly/2023-03-24.md): ① 如何调整静态资源加载优先级？ ② chatGPT提示语合集 ③ React新文档，Vite5，pnpm8... ④ 文心魔性作图等一大波AI资讯... - [视野修炼第31期](https://sugarat.top/weekly/2023-03-31.md): ① Vite4.3 - 一系列的性能优化手段 ② 一文了解 URL 编码 ③ Sass和原生CSS嵌套语法对比 ④ chatGPT生成SQL的在线WEB应用 ⑤ tauri + Vue3实现的的ChatGPT客户端 - [视野修炼第32期](https://sugarat.top/weekly/2023-04-07.md): ① 如何简单的向Mac菜单栏输出自定义内容？② Node.js 各版本EOL时间 ③ Vue3 新增defineOptions API ④ exports 属性 ⑤ 一个交互友好的单包发布工具 ⑥ 阿里云的chat机器人 ⑦ chatGPT风口？⑧ 如何与chatGPT结对编程提升研发效率 - [视野修炼第33期](https://sugarat.top/weekly/2023-04-14.md): ① 开发者专属搜索引擎 ② 更加优雅的操作AST方式 ③ 面向21世纪的终端工具 ④ Node.js事件循环可视化指南 ⑤ 本周最火🔥的项目是什么？ - [视野修炼第34期](https://sugarat.top/weekly/2023-04-21.md): ① 免费的GPT编程助手 ② Chrome 113 DevTools新功能 ③ == 的魅力 ④ 微信聊天记录实现克隆数字人 ⑤ BingChat桌面应用 - [视野修炼第35期](https://sugarat.top/weekly/2023-04-28.md): ① ECMAScript 2023 新特性 ② Xmind Copilot - AI生成思维导图 ③ AI 工具箱 ④ 2023 Web Components 现状（中文） ⑤ HTML 的新增标签 search ⑥ wails - 使用 Go 构建跨平台应用 ⑦ AI 法律助手 ⑧ 语雀：Midjourney&Stable diffusion 知识库 ⑨ OpenAI现场演示官方版AutoGPT ⑩ 讯飞版ChatGPT ⑪ MiniGPT-4 - 看图聊天，不在话下 - [视野修炼第36期](https://sugarat.top/weekly/2023-05-05.md): ① 多种技巧实现，超长溢出头部省略打点 ② Fluent Emoji Maker ③ 开源项目与开源经历分享 ④ 简易的CodePen实现 ⑤ ChatPDF/PPT/Excel ⑥ 面向开发人员的 ChatGPT 提示工程 ⑦ AI转绘清明上河图 ⑧ newBing全面开放，注册即可用 ⑨ AI论文速递 - [视野修炼第37期](https://sugarat.top/weekly/2023-05-12.md): ① chathub - chat工具集合 ② dnrm - deno实现的nrm ③ Vue3.3新特性讲解 ④ lerna-7.0.0-alpha.0 ⑤ 2023CSS的一些新特性 ⑥ viz-gpt - GPT驱动的数据可视化 ⑦ AI在电商场景的运用 ⑧ 保姆级教程：打造AI孙燕姿 ⑨ Firework发布全球首个直播购物GPT ⑩ 能说会唱的AudioGPT - [视野修炼第38期](https://sugarat.top/weekly/2023-05-19.md): ① Bun Bundler ② Niva - 跨桌面端应用开发框架 ③ Google I/O 2023 — Web 相关动态 ④ Chat2DB - 智能的数据库客户端 ⑤ dora AI - Prompt 生成网站 ⑥ WPS AI 上新 ⑦ Prompt 中文指南 ⑧ 尝试你的第一个AI程序 - [视野修炼第39期](https://sugarat.top/weekly/2023-05-26.md): ① Transformers.js - 浏览器直接运行AI模型 ② ChatALL - all in one 的chat客户端 ③ Node.js 14周年 ④ eslint-plugin-check-file ⑤ Parcel v2.9.0 ⑥ 这 67+ 工具，帮你驾驭 AI ⑦ Windows Copilot 登场 ⑧ 拽一拽关键点就能让狮子张嘴&大象转身 - [视野修炼第40期](https://sugarat.top/weekly/2023-06-02.md): ① 从浏览器到 Node.js 环境，一文彻底搞懂前端沙箱 ② Vite是如何兼容旧版本浏览器的 ③ npmmirror 镜像站已内置支持类似 unpkg cdn 解析能力 ④ chrome114的一些新东西 ⑤ Deno 1.34 ⑥ flutter_chat_box ⑦ Dify ⑧ 读取大脑重建高清视频 ⑨ 阿里云「通义听悟」公测 - [视野修炼第41期](https://sugarat.top/weekly/2023-06-09.md): ① 使用纯CSS实现噪点效果 ② 从零开发——微前端框架实践 ③ Rspack 0.2 发布,支持 Vue! ④ StackBlitz WebContainers 额外支持yarn/pnpm现在 ⑤ Create Next Stack ⑥ Merse Comic - AI生成漫画 - [视野修炼第42期](https://sugarat.top/weekly/2023-06-16.md): ① 生成带图的二维码 ② framer - AI生成网站 ③ Vercel AI SDK ④ 从 0 实现 RSC ⑤ 字节跳动 Mobile DevOps 工程实践 ⑥ ChatGPT做2023高考数学题 ⑦ OpenAI 大更新 ⑧ 微软Bing升级「识图」功能 - [视野修炼第43期](https://sugarat.top/weekly/2023-07-02.md): ① 2023 Stackoverflow 开发者调查报告 ② ArtQR 艺术二维码生成 ③ webpack v5.88.0 feature ④ 更亮的 QR.码 ⑤ TypeScript 5.2：新关键字 using 介绍 ⑥ AIGC 如何影响下一代文档搜索方案 ⑦ DragGAN 开源（AI图像编辑） ⑧ 胎教级Stable Diffusion使用教程 ⑨ 语音转字幕工具 - [视野修炼第44期](https://sugarat.top/weekly/2023-07-07.md): ① ECMAScript 2023 正式发布，有哪些新特性？ ② 字节跳动的前端工程化实践 ③ 基于 Nginx 实现一个灰度上线系统 ④ foxact- React Hooks/Utils ⑤ Vue2、Vue3 使用率 7:3 开 ⑥ 稀土开发者大会（XDC 2023）回放 + PPT ⑦ Wonder Studio：将视频中的人物替换为 3D CG 角色 ⑧ OpenAI 向所有付费用户开放GPT-4 API权限 ⑨ 阿里「通义听悟」推出浏览器插件 - [视野修炼第45期](https://sugarat.top/weekly/2023-07-14.md): ① Sass 支持直接在浏览器中编译 ② pnpm 替代 npm-run-all的用法 ③ 模拟旗帜飘扬效果-Cool ④ Bun 1.0 正式版定于9月7日发布 ⑤ react1s ⑥ AI Commits工具 ⑦ Google Bard 支持中文了 - [视野修炼第46期](https://sugarat.top/weekly/2023-07-22.md): ① killport - 优雅的结束占用端口的进程 ② 两个值得关注的stage3的提案 ③ Chrome 115 有哪些值得关注的新特性？ ④ pkg-size - 在线分析npm包大小 ⑤ pnpm 下载量远超 yarn ⑥ Dan 即将从Meta React团队离职 ⑦ Meta 开源 Llama 2 大模型 - [视野修炼第47期](https://sugarat.top/weekly/2023-07-28.md): ① Arc 浏览器！！！ ② 前端代理神器 whistle 客户端 ③ 显示页面重定向历史chrome插件 ④ clang.js - 支持在浏览器里执行C/C++代码 ⑤ JS minification benchmarks ⑥ Bun v0.7.0 支持Vite ⑦ ChatGPT 国粹版 ⑧ ChatGPT 安卓版APP上线 - [视野修炼第48期](https://sugarat.top/weekly/2023-08-04.md): ① 美团前端研发框架Rome实践和演进趋势 ② 狗屁不通文章生成器：PUA版 ③ 三个实用的CSS伪类 ④ H5如何监听手机键盘是否弹起 ⑤ HTML kbd、var、samp元素使用场景介绍 ⑥ emaction ⑦ 页面引导库 driver.js ⑧ 向量数据库 - [视野修炼第49期](https://sugarat.top/weekly/2023-08-12.md): ① ikun-ui ② langui - AI组件库 ③ 未备案模拟器 ④ TypeCell - [视野修炼第50期](https://sugarat.top/weekly/2023-08-20.md): ① glitchtext - 毛刺字符生成 ② 博客园：会员救园 ③ Novel - 所见即所得的开源编辑器 ④ vanjs - 0.9kb的响应式UI框架 ⑤ Node.js 配置地狱问题 ⑥ 阮一峰:《TypeScript 教程》 ⑦ 基于 RPC 和 TypeScript 的 BFF 设计与实践 ⑧ 讯飞星火V2.0发布 - [视野修炼第51期](https://sugarat.top/weekly/2023-08-27.md): ① 🍉 CEC-IDE ② 天工AI搜索 ③ Million（一键为React项目提速70%） ④ Rollup 计划切换解析器从 acorn 到 swc ⑤ 为什么 TypeScript 不能正确处理 Object.keys() ⑥ background-removal-js - 自动抠图 JS SDK ⑦ GPT-3.5 Turbo 新增微调 API - [视野修炼第52期](https://sugarat.top/weekly/2023-09-02.md): ① 极速图片压缩器 ② use autojump in vscode ③ Node.js 20.6 将原生支持 .env 文件 ④ pnpm v8.7.0 发布，提升安装速度 33% ⑤ WordPress 推出百年域名服务 ⑥ Iconbuddy - 收录10w+图标资源库 ⑦ 编程的未来 - 还有未来么？ ⑧ 面试押题王 - 使用AI帮你精准押中面试题 ⑨ 文心一言向全社会开放 - [视野修炼第53期](https://sugarat.top/weekly/2023-09-10.md): ① rome 停止维护 ② Bun 1.0 正式发布 - 遥遥领先 ③ npkill - 轻松查找和删除 node_modules 文件夹 ④ Web Infra：Bundler的设计取舍 ⑤ 纯前端JPG/PNG尺寸缩放+压缩的在线工具 ⑥ Web上体验Windows ⑦ Chrome 即将支持隐藏扩展的网络请求 ⑧ Yesicon - 开源、免费的矢量图标库 支持中文搜索 - [视野修炼第54期](https://sugarat.top/weekly/2023-09-17.md): ① Node.js 16 EOL ② New in Chrome 117 ③ lodash 从Node迁移至Bun ④ github-old-feed - GitHub 旧版动态 ⑤ JS复制图片到剪切板 ⑥ Pagefind v1.0 本周发布 ⑦ puck 基于 React 的可视化编辑器。 ⑧ 阿里云通义千问 AI 大模型正式向全社会开放 - [视野修炼第55期](https://sugarat.top/weekly/2023-09-24.md): ① disable-devtool - 一行代码禁用 devTool ② Sqids - 短字母 ID生成 ③ 一键查询子域名信息 ④ Happy DOM - Web 浏览器的 JavaScript 实现 ⑤ Alins - 又一个新奇的JS框架 ⑥ 关于 Bun 1.0 发布的一些看法 ⑦ 华为云低代码引擎 TinyEngine 正式发布！ - [视野修炼第56期](https://sugarat.top/weekly/2023-10-06.md): ① Vite 的现状与未来展望 ② Web版Photoshop ③ Console Ninja：console调试神器 ④ 为 Eslint 9.0 提前做准备 ⑤ 使用 documate 为 VitePress 文档站添加AI对话能力 - [视野修炼第57期](https://sugarat.top/weekly/2023-10-15.md): ① Rspress - 基于 Rspack 的高性能静态站点生成器 ② We OCR - 支持离线使用的图片文字识别工具 ③ pnpm v8.9 - MacOS上带来更大的性能提升 ④ 用户体验：嵌套菜单！ ⑤ Draggable objects - 详细介绍网页元素的拖拽实现 - [视野修炼第58期](https://sugarat.top/weekly/2023-10-22.md): ① LocalSend - 开源的跨平台文件传送软件 ② 周爱民：告前端同学书 ③ 京东前端：发布微前端框架 MicroApp ④ 如何制作落地页：保姆级实操指南 ⑤ React 代码如何跑在小程序上 ⑥ ESLint9 默认使用Flat Config ⑦ 英：编程四十年 ⑧ github copilot voice - 用嘴写代码 - [视野修炼第59期](https://sugarat.top/weekly/2023-10-29.md): ① Yarn 4.0 正式发布，性能大幅提升！ ② JSDoc 真能取代 TypeScript？ ③ 页面Loading加载动画合集 ④ Spacedive - 开源的跨平台资源管理器 ⑤ 2024 React 生态系统展望 ⑥ TypeScript 5.3 beta ⑦ 一些特殊 HTTP 标头字段 - [视野修炼第60期](https://sugarat.top/weekly/2023-11-05.md): ① 通义灵码 ② System Design 101 - ③ ofajs - 不需要打包的MVVM框架 ④ tailspin - 实时高亮展示日志 ⑤ Olive - 开源的跨平台的视频编辑器 ⑥ 深入架构原理与实践 ⑦ Clash 相关资讯 - [视野修炼第61期](https://sugarat.top/weekly/2023-11-12.md): ① 2023年🧑‍💻工程师的 Mac 工具箱 ② react-exercise-playground - React playground 组件 ③ Caravaggio - 一个快速的图片处理服务 ④ eslint-stylistic ⑤ 新版 React 文档中的九项最佳建议 ⑥ AIGC相关教程资源收集 - [视野修炼第62期](https://sugarat.top/weekly/2023-11-19.md): ① Vite5.0 发布！ ② Bubble - README 小组件 ③ EmojiGen - AI emoji生成 ④ 自适应文本框的 CSS 实现 ⑤ 悬赏1w$做 Rust 版 Prettier ⑥ pacquet - Rust重写pnpm ⑦ ShortbreadAI - AI 漫画生成 ⑧ ChatGot - 一个窗口调用多个模型 ⑨ 最佳AI标题、描述和关键词生成器 ⑩ YesChat.ai - 免费的GPT体验 - [视野修炼第63期](https://sugarat.top/weekly/2023-11-26.md): ① 前端量子纠缠效果 ② Rsbuild 登场 ③ Easydict - 词典翻译 macOS App ④ 一文带你了解前端渲染模式演进史 ⑤ 截图生成网页源码 - [视野修炼第64期](https://sugarat.top/weekly/2023-12-03.md): ① VueDraggablePlus - 祖师爷推荐拖拽库 ② 三行 CSS 实现文本悬停浮空 ③ 可视化CSS动画编辑器 ④ Biome 赢得了 Prettier 悬赏奖金 ⑤ 微前端时代：打造高效、灵活的前端开发体系 ⑥ menu with the popover API ⑦ COLR Font ⑧ SDXL Turbo - 体验极快的文生图 ⑨ Vectorizer.ai - PNG/JPEG转SVG - [视野修炼第65期 - 兴趣是一种天赋](https://sugarat.top/weekly/2023-12-10.md): ① 和尤大聊项目进展、开源社区协作和前端思考 ② 盘点2023年前端大事件 ③ VS Code 1.85 发布 - 支持浮动窗口 ④ 前端DevOps平台的探索及设计理念 - 哔哩哔哩技术 ⑤ Vitest 1.0 发布 - 下一代测试框架 ⑥ URL.canParse - JS 新增方法 ⑦ What the f*ck JavaScript? ⑧ 获取随机头像API ⑨ Devv - 最懂程序员的新一代 AI 搜索引擎 ⑩ Ai Cute Wallpapers - 免费的文生图 - [视野修炼第66期](https://sugarat.top/weekly/2023-12-17.md): ① Oxlint 正式发布 ② CSS 发展总结 - 2023年 ③ bproxy - 抓包代理工具 ④ GPT Assistant - 开源的GPT安卓客户端 ⑤ CodeGeeX2 - 更强大的多语言代码生成模型 - [视野修炼第67期](https://sugarat.top/weekly/2023-12-24.md): ① 掌中宇宙，浩瀚星海，一眼万年 ② Vue 2 即将停止维护 ③ Emoji 搜索引擎 ④ JS 引擎和运行时合集 ⑤ Bun 2024年目标 ⑥ GitHubUnwrapped - 2023年的GitHub行为总结 ⑦ Devv AI 是如何构建高效的 RAG 系统的 - [视野修炼第68期 | 2023 年前端明星项目](https://sugarat.top/weekly/2024-01-06.md): 🎈 24 年第一期 🐲 🎉 ：① 2023 年 JavaScript 明星项目 ② fast-create-variable - 自动生成变量模板 ③ Vue 3.4 ④ Memo Card - 文字卡片生成 ⑤ svgl - 技术相关 SVG 图标汇总 ⑥ 揭秘 Vue 有趣的版本名称 ⑦ Drawing Prompt - 提示语扩展工具 ⑧ Rolldown 计划24年Q1 开源 ⑨ 不要被前端框架PUA - [视野修炼第69期](https://sugarat.top/weekly/2024-01-14.md): ① 2023 CodePen Top 100 ② CSS Hooks | 原生内联样式解决方案 ③ 2024 年前端预测 ④ 媒体查询 scripting ⑤ vscode-common-intellisense - 主流前端组件库提示 ⑥ 在线截图编辑 ⑦ AI Search ⑧ 阿里 AnyText 模型 - [视野修炼第70期](https://sugarat.top/weekly/2024-01-21.md): ① vscode-eslint-disable - vscode 插件 ② npm 2023 回顾 ③ 使用JS快速获取视频任意位置缩略图 ④ 基于七牛云OSS的简洁图床 ⑤ FRE123 开源 - 快速搭建个性化导航网站 ⑥ 英：交互式 CSS Grid 教程 ⑦ Calendar Remark - 自定义标记&分享日历 ⑧ 科普：了解文件大小单位 - [视野修炼第71期 | Rspack 家族新成员 Rsdoctor](https://sugarat.top/weekly/2024-01-28.md): ① Rspack 新成员：Rsdoctor ② Bun Shell ③ DCloud:App跨平台框架对比2023版 ④ 🐟WoodenFish - 敲木鱼 ⑤ CSS 实现卡片翻转效果 ⑥ fsx - JavaScript 的现代文件系统 API ⑦ 在vscode中悄无声息地摸鱼 ⑧ 人像生成工具 ⑨ Inpaint-web - 开源的图片修复工具 - [视野修炼第72期 | 22 种方式实现弹 🏀 动画](https://sugarat.top/weekly/2024-02-03.md): ① code-inspector - 自动定位跳转 IDE 代码 ② AskYourDatabase - GPT驱动的数据库chat工具 ③ 22 种实现弹 🏀 动画的方式 ④ 拿npm存储库《武林外传》 ⑤ unlazy - 图片延迟加载 ⑥ autosize-textarea ⑦ CSS 3D 云彩 - [视野修炼第73期 | AI 春联生成](https://sugarat.top/weekly/2024-02-10.md): ① AI 春联 ② Vue 10周年啦！ ③ 2024 你应该知道的几个CSS特性 ④ Vite 5.1 发布 ⑤ Baklava:基于web component实现的设计系统 ⑥ Heat.js - 热力图生成 ⑦ React Native 2023调查结果出炉 ⑧ Capacitor - 跨平台应用开发框架 - [视野修炼第74期 | 火箭龟🚀🐢](https://sugarat.top/weekly/2024-02-25.md): ① Node.js 正式推出了它的吉祥物 “火箭龟” - 🚀🐢 ② Web 终极拦截技巧 ③ EasyDevo - Mac垃圾清理&系统监控 ④ Keep Screen On ⑤ WXT - 下一代Web扩展开发框架 ⑥ Localtunnel - 内网穿透工具 ⑦ React 面试题和解答 ⑧ SVG 国旗图标 ⑨ SVG Tutorial - SVG 教程 ⑩ 14 分钟入门 JavaScript - 交互式教程 ⑪ 英：如何居中一个 div ⑫ 使用纯 CSS 创建 DVD 动画 ⑬ Sora 合集 - [视野修炼第75期](https://sugarat.top/weekly/2024-03-03.md): ① JSR - Deno 开发的新的 js 注册表 ② Node.js 新官网 - beta ③ 获取 Web 性能指标的精选代码片段 ④ Mojo CSS - 新的CSS原子化框架 ⑤ Omnivore - 稍后阅读工具 ⑥ tsdiagram - 可视化生成TS关系图表 ⑦ 自渲染的 "Eval Shirt" - StackBlitz 官方整活 ⑧ shoelace - 具有前瞻性的Web Components 组件库 ⑨ CSS :has() 交互式指南 ⑩ image2music - AI 图像音乐生成器 ⑪ AI没有护城河，OpenAI也没有 ⑫ 魅族 All in AI - [视野修炼第76期 | Rolldown 开源](https://sugarat.top/weekly/2024-03-10.md): ① Rolldown 开源 - Rollup 的锈化版 ② 前端调试工具超全汇总 ③ OhMyLive2D - Live2D Web 看板组件 ④ 100万级安装量的开源作品，一年有多少打赏收入？ ⑤ Web-Check - 开源的网站分析工具 ⑥ Safari 提供原生 HTML Switch 控件 ⑦ Simple Icons - 流行标志的 SVG 图标 ⑧ CSS 中玩转 Infinity - [视野修炼第77期 | JSR 的愿景](https://sugarat.top/weekly/2024-03-17.md): ① UPNG.js - 纯前端实现PNG图片压缩 ② 视频：Deno 团队介绍 JSR，涵盖了主要动机和功能 ③ 摸头杀生成 ④ fig 团队加入亚马逊 ⑤ fx - 终端中友好的处理JSON ⑥ cmdk - 命令行式的React菜单组件 ⑦ Chat Nio - 下一代 AI 一站式解决方案 ⑧ StickerBaker - 个性化贴纸生成工具 - [视野修炼第78期 | Node.js纪录片](https://sugarat.top/weekly/2024-03-24.md): ① Node.js 纪录片发布 ② emgithub - github 嵌入链接获取 ③ Emojisplosion - 表情烟花效果 ④ Chrome DevTools 现在与 Chrome 主题相匹配！ ⑤ CartoSVG - SVG 地图制作 ⑥ MistCSS - 仅使用CSS编写React组件 ⑦ kimi - 支持20万汉字输入 ⑧ Suno v3 - AI 创作音乐 - [视野修炼第79期 | 人很重要，软件只是乐趣](https://sugarat.top/weekly/2024-03-31.md): ① 译：编程 40 年 - 软件只是乐趣 ② CJS 和 ESM 相互兼容？ ③ superjson - 复杂的JS对象序列化 ④ play-button - 播放音视频的按钮 ⑤ Docker 快速入门 ⑥ 使用样式查询增强 CSS 变量能力 ⑦ 你需要了解的现代 CSS 特性 - 2024 春季版 - [视野修炼第80期 | Bundows](https://sugarat.top/weekly/2024-04-14.md): ① Bun 1.1 发布 - Bundows ② Signals 的标准化提案 ③ 免费的AI咒语聚合网站 ④ 前端框架新势力大盘点 ⑤ dashpress - 数据库管理 ⑥ node.js 截图库 ⑦ autospec - API 规范描述文件生成 ⑧ Journey.js - 交互式引导 ⑨ barbajs - 页面切换的平滑过渡 ⑩ CSS 容器查询交互式教程 - [视野修炼第81期 | Chrome 124 新功能](https://sugarat.top/weekly/2024-04-21.md): ① Chrome devtools 124 新功能 ② sshx - 终端协作 ③ ElemSnap - 浏览器美化截图插件 ④ PNPM v9发布 ⑤ Classnames - 变量命名单词表 ⑥ SVG Encoder - SVG 转其它编码 ⑦ 头像动漫化 - [视野修炼第82期 | Node.js v22](https://sugarat.top/weekly/2024-04-29.md): ① Node.js v22 发布 ② Module Federation 2.0 正式发布！ ③ 终极 CSS 形状实现合集 — 单元素实现 ④ 像和朋友聊天一样编写Alt文本 ⑤ 2024 前端工程师手册 ⑥ HTML 属性与 DOM 属性对比 ⑦ LLM Price Check - AI 模型价格对比 ⑧ Image2Text - 图片转描述 - [视野修炼第83期 | MarsCode](https://sugarat.top/weekly/2024-05-12.md): ① MarsCode - 在线 AI IDE ② Turbo Console Log - 快速创建console ③ mcfly - 命令行历史搜索 ④ emoji-mart - emoji 选择组件 ⑤ OpenSumi 3.0 正式发布 ⑥ ElysiaJS - 基于Bun的Web框架 ⑦ extension.js - 跨浏览器插件开发 ⑧ 服务器实时消息获取5种方案 ⑨ Remix Yourself - 图片三合一 ⑩ Arc Windows - [视野修炼第84期 | Mako](https://sugarat.top/weekly/2024-05-19.md): ① npmmirror 下线 unpkg 服务 ② Mako - 又一基于 Rust 的构建工具 ③ Icônes - 图标集合检索 ④ go-masonry-gallery - 图片瀑布流页面生成 ⑤ Color Pick - 在线从图片中提取颜色的 ⑥ 制作 CSS 形状的现代指南 ⑦ 针对前端初学者的项目合集 ⑧ Jan - 本地运行大模型客户端 - [视野修炼第85期 | 图小小](https://sugarat.top/weekly/2024-05-26.md): ① pic-smaller - 图小小 ② 精美的 CSS 背景图 ③ js 进阶问题 ④ Vue Fluid DnD - 适用于Vue的拖拽库 ⑤ 径向渐变背景生成 ⑥ TrasHTTPandas - HTTP 状态码测试 ⑦ 不使用font-weight实现文字变瘦或变胖效果 ⑧ 256字节生成一个动态的城市画面 - [视野修炼第86期 | CSS 马里奥](https://sugarat.top/weekly/2024-06-02.md): ① TTSMaker - 在线语音合成工具 ② js 读取文件速度对比 ③ 仅使用 CSS 实现的一个马里奥小游戏 ④ widget-qrcode - 二维码生成组件 ⑤ 使用 npm 分发的开源字体合集 ⑥ jessquery - jQuery 的轻量级平替方案 ⑦ Bau.js - 极小的响应式 WEB 框架 ⑧ 只使用 span 可以做些什么？ ⑨ 5个提升网站访问性能的技巧 ⑩ ollama - 本地运行大模型 - [视野修炼第87期 | 端午安康](https://sugarat.top/weekly/2024-06-09.md): ① js 中的经典八股 ② merge-anything - 深度合并对象的库 ③ DOM 树深度对渲染性能的影响 ④ Node.js 15周年 ⑤ 页面元素测量工具 ⑥ Best Cookier - cookie管理插件 ⑦ ShotEasy - 在线的图片压缩 ⑧ 2024 应该了解的 Node.js 特性 ⑨ CSS 长度单位介绍 - 非常全面的指南 ⑩ 仅使用CSS实现计时器 - [视野修炼第88期 | 突出变量插件](https://sugarat.top/weekly/2024-06-16.md): ① Bread Jam - 变量上色 ② JsonTree.js - JSON 数据可视化 ③ Reshot - 免费图标和插图 ④ 2024 年度备受期待的 JavaScript 项目 ⑤ 万能视频图片解析下载 ⑥ Chromicons - 线条风格图标集合 ⑦ DGM.js - 无限画布 ⑧ 英：从头开始了解 JS Promise ⑨ TextToSpeech - 免费在线转换文字为语音 - [视野修炼第89期 | 2023 年度 JS 报告](https://sugarat.top/weekly/2024-06-23.md): ① JavaScript 2023 年度调查报告 - Vite 赢麻了！ ② Node.js setTimeout Promise ③ local-web-server ④ 尤大：Vue 10周年演讲 - Vue过去与未来 ⑤ loadership - 纯 CSS loading 动画生成 ⑥ Entity Code - 插件CV符号 ⑦ linaria - 0运行时的 CSS in JS库 ⑧ 镜头模糊效果 ⑨ DeepSeek Coder - 在线生成网页代码并执行 - [视野修炼第90期 | 豆包AI IDE](https://sugarat.top/weekly/2024-06-30.md): ① 豆包 MarsCode 正式发布 ② ECMAScript 2024 正式发布 ③ Mako 开源 - 蚂蚁的 Rust 力作 ④ CSDN批量搬运Github项目伪造开发者主页 ⑤ HTML 旋转图像实现示例 ⑥ 一组看着糙的组件库 ⑦ Chrome 126 中 DevTools 的新增功能 ⑧ 纯 CSS 实现环形文本 - [视野修炼第91期 | 惊讶线条](https://sugarat.top/weekly/2024-07-07.md): ① 漫画：浏览器的 UA 为什么这么长？ ② 500+种js方法实现页面重载 ③ CSS 实现惊讶线条 ④ onefetch - 本地仓库信息查看工具 ⑤ StarFlare - 管理 Star 的项目 ⑥ 开源项目落地页模板 ⑦ 纯CSS鉴别是不是Safari浏览器 ⑧ 使用 MarsCode IDE 搭建 VitePress博客并使用 GitHub 部署 ⑨ 预渲染页面配置教程 - [视野修炼第92期 | 薅牛毛](https://sugarat.top/weekly/2024-07-14.md): ① YakShaving - 薅牛毛 ② CSS OneLiners ③ Vue Vine - 单文件编写多 Vue 组件 ④ CDN 流量被盗刷经历 ⑤ es-toolkit ⑥ console.log 体验优化 ⑦ 诗境 - 根据图片匹配诗句 - [视野修炼第93期 | polyfill.io 异常](https://sugarat.top/weekly/2024-07-21.md): ① JS 如何检测用户打开了大写锁定 ② 改善 console 开发体验 ③ polyfill.io 异常④ MathLive - 数学公式输入组件 ⑤ Shell360 - 全平台支持的SSH客户端 ⑥ node:sqlite 工作进展 ⑦ 图片加载性能优化 ⑧ 前端开发一些流行术语 ⑨ WordSea - AI 生成单词图片 - [视野修炼第94期 | 2024 开发者调查报告](https://sugarat.top/weekly/2024-07-28.md): ① Stack Overflow 2024 开发者调查报告 ② React 2023 调查结果 ③ Sendune - HTML 邮件制作工具 ④ hash-wasm - 哈希函数库 ⑤ ky - 基于 fetch 的 HTTP 客户端 ⑥ 英：前端构建概述 ⑦ Album AI - AI 图片检索 ⑧ AI Emoji Search - [视野修炼第95期 | 终端里展示图片](https://sugarat.top/weekly/2024-08-04.md): ① terminal-image - 终端展示图片 ② staticrypt - 静态站点加密 ③ Node.js 实验性支持 TS ④ canvas-confetti - 纸屑动画 ⑤ code-box ⑥ trash ⑦ 英：巴黎 2024 年夏季奥运会如何影响互联网流量 - [视野修炼第96期 | 即时媒体格式转换](https://sugarat.top/weekly/2024-08-11.md): ① Formatify - 即时的媒体转换 ② emoji-picker-element - 轻量级表情符号选择器 ③ DNS.fish - DNS 查询API ④ remote-storage - 多设备LocalStorage同步 ⑤ json2csv - 自动将 JSON 转换为 CSV 下载 ⑥ Whirl - CSS loading 库 ⑦ 视频：CSS 创建 3D 场景和对象 ⑧ 页面级可视动画 View Transitions API - [视野修炼第97期 | ?=提案](https://sugarat.top/weekly/2024-08-18.md): ① 安全赋值运算符提案 ② 英：45个提升生产力的VS Code快捷指令 ③ 文字徽标制作工具 ④ Rslib - ⑤ 使用js实现打字机效果 ⑥ Aide - 在 VSCode 中征服任何代码 ⑦ Product Hunt 每日中文热榜 - [视野修炼第98期 | Node原生支持TS](https://sugarat.top/weekly/2024-08-25.md): ① Node 22.7 支持直接运行TS ② js 模糊搜索库 ③ Favicon 一键获取 ④ fuite - 网页内存泄露分析工具 ⑤ logtape - 0依赖日志库 ⑥ Volta 2.0 ⑦ AI 昆虫图识别 - [视野修炼第99期 | Rspack 1.0](https://sugarat.top/weekly/2024-09-01.md): ① Rspack 1.0 发布公告 ② 通过绘图评论 ③ Coolify - 开源应用运行平台 ④ Tagger - 标签选择组件 ⑤ npm 依赖更新检查工具 ⑥ 使用 CSS 实现页面弹性效果 ⑦ 10大Git 技巧 ⑧ Emoji 搜索 - [手撕代码](https://sugarat.top/interview/code.md) - [数据结构](https://sugarat.top/offer/campus/dataStruture.md) - [数据库](https://sugarat.top/offer/campus/database.md) - [数据状态更新时的差异diff及patch机制](https://sugarat.top/bigWeb/vue/diff.md) - [数组扁平化的多种方案](https://sugarat.top/bigWeb/js/p3.md) - [数组哪些方法会改变自身](https://sugarat.top/interview/js/changeArr.md) - [死锁](https://sugarat.top/computerBase/os/deadlock.md) - [搜狐焦点](https://sugarat.top/offer/sum-interview/22-spring/souhu.md) - [算法与数据结构](https://sugarat.top/coding/algorithm.md) - [算法与数据结构](https://sugarat.top/computerBase/algorithm.md) - [腾讯-腾讯看点](https://sugarat.top/offer/sum-interview/20-spring/tencent-kd.md) - [腾讯-腾讯视频](https://sugarat.top/offer/sum-interview/20-spring/tencent-video.md) - [腾讯-腾讯云](https://sugarat.top/offer/sum-interview/20-autumn/txcloud.md) - [腾讯云Serverless实践-静态网站托管](https://sugarat.top/technology/learn/tx-serverless-static.md) - [腾讯云Serverless实践-Node.js服务部署](https://sugarat.top/technology/learn/tx-serverless-node.md) - [提取样式表中url()中的内容](https://sugarat.top/bigWeb/regexp/p1.md) - [体验一下最近比较🔥的闪卡SKILL](https://sugarat.top/ai/skills/flashcard-test.md) - [图片优化](https://sugarat.top/bigWeb/performance/image.md) - [网络层面优化](https://sugarat.top/bigWeb/performance/Internet.md) - [网络相关问题](https://sugarat.top/computerBase/Internet.md) - [网络相关问题](https://sugarat.top/interview/internet.md) - [网易-云音乐](https://sugarat.top/offer/sum-interview/20-spring/wy-music.md) - [网易-云音乐](https://sugarat.top/offer/sum-interview/20-autumn/cloudmusic.md) - [网易传媒](https://sugarat.top/offer/sum-interview/22-spring/wy.md) - [网易互娱](https://sugarat.top/offer/sum-interview/20-spring/wy-hy.md) - [微多多](https://sugarat.top/offer/sum-interview/22-spring/wdd.md) - [伪类](https://sugarat.top/bigWeb/css/pseudo-class.md) - [伪元素](https://sugarat.top/bigWeb/css/pseudo-element.md) - [为什么'\x1B'.length===1？\x与\u知识延伸](https://sugarat.top/technology/learn/ux.md) - [为什么0.1+0.2!=0.3](https://sugarat.top/interview/js/numNotEqual.md) - [为什么要使用模块化？有哪几种方式可以实现模块化，各有什么特点？](https://sugarat.top/interview/js/module.md) - [文件上传下载](https://sugarat.top/bigWeb/js/p5.md) - [我打造的在线简历生成应用](https://sugarat.top/technology/works/online-resume.md) - [我如何使用Coze来分析掘金热榜数据 | Coze插件开发](https://sugarat.top/ai/coze/juejin-hot-rank-bot.md) - [我收藏的资源](https://sugarat.top/_configDoc/top/address.md) - [线程](https://sugarat.top/computerBase/os/thread.md) - [响应式的基本原理](https://sugarat.top/bigWeb/vue/responsive.md) - [响应式系统的依赖收集追踪原理](https://sugarat.top/bigWeb/vue/dep.md) - [向页面注入js实现为图片和文字元素添加透明蒙层](https://sugarat.top/technology/learn/js-cover.md) - [小🐑人日记](https://sugarat.top/essay/life/ylgy.md): 发烧3天，第4天开始轻症咳嗽流涕，第6天抗原阳，第7天基本回归正常生活 - [小程序的原理?](https://sugarat.top/interview/mini/principle.md) - [小程序特点](https://sugarat.top/interview/mini/feature.md) - [小程序相关面试问题](https://sugarat.top/interview/mini.md) - [小程序中使用 lottie 动画 | 踩坑经验分享](https://sugarat.top/technology/learn/mini-lottie.md): 记录分享在小程序中使用 lottie 播放AE动画的方法，以及踩坑经验。 - [小技巧：for of中获取index](https://sugarat.top/technology/learn/forof-idx.md) - [校招考点汇总-算法](https://sugarat.top/offer/campus/algorithm.md) - [校招考点汇总-Webpack](https://sugarat.top/offer/campus/webpack.md) - [校招面经汇总](https://sugarat.top/offer/sum-interview.md) - [心得总结](https://sugarat.top/offer/experience.md) - [心外“天花板”手术经历](https://sugarat.top/essay/life/sbzy-26-1-5.md): 25年12月25日进行的胸腹主替换手术，时长约6小时，由心外顶尖医生"孙立忠"主刀，顺利拿下；近期状态恢复得还行，在这里记录分享一下相关细节。 - [新年快乐，虎虎生威](https://sugarat.top/_configDoc/newyear/2022.md) - [性能优化笔记](https://sugarat.top/bigWeb/performance.md) - [性能优化面试题](https://sugarat.top/interview/performance.md) - [续费了9年域名！](https://sugarat.top/essay/notes/2023-08-12.md): 偶然发现域名快到期了，花费261元直接再续9年域名（拉满） - [学习笔记：TypeScript装饰器](https://sugarat.top/technology/study/ts-decorators.md) - [学习过程中学到的一些取巧之法](https://sugarat.top/bigWeb/js/p0.md) - [学习新知识-分享干货](https://sugarat.top/technology/study.md) - [业务相关](https://sugarat.top/offer/campus/work.md) - [页面预渲染](https://sugarat.top/bigWeb/performance/preRender.md) - [一个简约风的vitepress博客主题](https://sugarat.top/technology/works/theme.md): 简约风的vitepress博客主题介绍 - [一个通过NPM包共(分)享代码块的解决方案](https://sugarat.top/technology/works/snippets.md) - [一款检测代码中TODO的eslint插件](https://sugarat.top/technology/works/eslint-plugin-todo-ddl.md) - [移动端](https://sugarat.top/offer/campus/mobile.md) - [移动端阻止弹窗下层页面被滑动](https://sugarat.top/technology/learn/fixed-page.md) - [译：使用 Bun 执行 Shell 脚本](https://sugarat.top/bigWeb/bun/bun-shell.md): JavaScript 是世界上最流行的脚本语言。那么为什么在 `JavaScript` 中执行 `Shell` 脚本很困难呢？Bun 又是怎么解决这个问题的？ - [译：使用现代的 Node.js 构建简单的CLI工具](https://sugarat.top/bigWeb/node/standard-node-cli.md): 只使用 Node.js 的标准库，不安装任何外部依赖，写一个命令行工具 - [用AI做了个图片上传/下发应用](https://sugarat.top/technology/works/image-uploader.md): 微信群的二维码每周都要更新一次，比较麻烦。于是搞了个简单的上传/下发的 Web 应用。 - [用Trae做了个公众号小工具](https://sugarat.top/technology/works/md-qrlink.md): 将Markdown文档中带超链接的标题提取出来，在标题下方显示对应的链接和二维码图片。 - [优秀装饰器源码学习（二）](https://sugarat.top/technology/source/core-decorators-2.md) - [优秀装饰器源码学习（三）](https://sugarat.top/technology/source/core-decorators-3.md) - [优秀装饰器源码学习（一）：time](https://sugarat.top/technology/source/core-decorators-1.md) - [优雅的处理挂载window上的函数可能不存在的情况](https://sugarat.top/technology/learn/window-var.md) - [又生病住院了](https://sugarat.top/essay/life/sbzy-7.md): 😭 又在医院躺了一个月，连着住了 2 次院 6-29=>7-29 - [又双叒住院了](https://sugarat.top/essay/life/sbzy-12.md): 今年第七次住院了；不过这次手术处理完，就没有隐患了。 - [与传统移动web的异同](https://sugarat.top/interview/mini/differentweb.md) - [语义化标签](https://sugarat.top/bigWeb/html/semantic.md) - [原始类型有哪些](https://sugarat.top/interview/js/primitiveType.md) - [原型与原型链](https://sugarat.top/bigWeb/js/prototype.md) - [源码学习：MongoDB-Objectd生成原理](https://sugarat.top/technology/source/objectId.md) - [源码学习：Vite中加载环境变量（loadEnv）的实现](https://sugarat.top/technology/source/vite-loadEnv.md) - [源码学习笔记](https://sugarat.top/technology/source.md) - [运行机制概述](https://sugarat.top/bigWeb/vue/mechanism.md) - [在浏览器中输入URL到页面渲染的整个过程](https://sugarat.top/interview/other/inputurl.md) - [在linux-deepin上使用deepin-wine5完美运行腾讯会议/QQ/微信等此类应用](https://sugarat.top/technology/learn/deepin-wemeet.md) - [正则表达式](https://sugarat.top/bigWeb/regexp.md) - [正则表达式](https://sugarat.top/offer/campus/regexp.md) - [执行上下文](https://sugarat.top/bigWeb/js/runcontext.md) - [执行上下文栈](https://sugarat.top/bigWeb/js/runStack.md) - [助你轻松编写与分享snippet的VsCode插件](https://sugarat.top/technology/works/share-snippets.md) - [准备手术 - 同步一下近况](https://sugarat.top/essay/life/sbzy-3-ss.md): 3月24日早上手术，记录一下这半个月的经历 - [资源预加载](https://sugarat.top/bigWeb/performance/preLoad.md) - [字节](https://sugarat.top/offer/sum-interview/22-spring/byte.md) - [字节飞书](https://sugarat.top/offer/sum-interview/22-spring/feishu.md) - [字节跳动-抖音架构](https://sugarat.top/offer/sum-interview/21-spring/bytedance-dy.md) - [字节跳动-飞书](https://sugarat.top/offer/sum-interview/20-spring/bytedance-fs.md) - [字节跳动-商业变现-广告](https://sugarat.top/offer/sum-interview/20-autumn/bytedance.md) - [综合问题](https://sugarat.top/offer/campus/complex.md) - [组件通信](https://sugarat.top/bigWeb/vue/communicate.md) - [组装个支持记笔记的CodePen](https://sugarat.top/technology/works/codeNote.md) - [最长公共子串](https://sugarat.top/coding/algorithm/publicStringLen.md) - [最长公共子序列长度](https://sugarat.top/coding/algorithm/publicString.md) - [作业帮-前端团队](https://sugarat.top/offer/sum-interview/20-autumn/zyb.md) - [作用域](https://sugarat.top/bigWeb/js/scope.md) - [作用域链](https://sugarat.top/bigWeb/js/scopeLink.md) - [做一个CL版的时间管理工具（11）](https://sugarat.top/works/time-tools/time-tools-11.md) - [做一个CL版的时间管理工具（12）](https://sugarat.top/works/time-tools/time-tools-12.md) - [做一个CL版的时间管理工具（13）](https://sugarat.top/works/time-tools/time-tools-13.md) - [做一个CL版的时间管理工具（14）](https://sugarat.top/works/time-tools/time-tools-14.md) - [做一个CL版的时间管理工具（15）](https://sugarat.top/works/time-tools/time-tools-15.md) - [做一个CL版的时间管理工具（八）](https://sugarat.top/works/time-tools/time-tools-8.md) - [做一个CL版的时间管理工具（二）](https://sugarat.top/works/time-tools/time-tools-2.md) - [做一个CL版的时间管理工具（九）](https://sugarat.top/works/time-tools/time-tools-9.md) - [做一个CL版的时间管理工具（六）](https://sugarat.top/works/time-tools/time-tools-6.md) - [做一个CL版的时间管理工具（七）](https://sugarat.top/works/time-tools/time-tools-7.md) - [做一个CL版的时间管理工具（三）](https://sugarat.top/works/time-tools/time-tools-3.md) - [做一个CL版的时间管理工具（十）](https://sugarat.top/works/time-tools/time-tools-10.md) - [做一个CL版的时间管理工具（四）](https://sugarat.top/works/time-tools/time-tools-4.md) - [做一个CL版的时间管理工具（五）](https://sugarat.top/works/time-tools/time-tools-5.md) - [做一个CL版的时间管理工具（一）](https://sugarat.top/works/time-tools/time-tools-1.md) - [AI记账小程序上线](https://sugarat.top/technology/works/miaowa-miniapp.md): 自己做了个 AI 记账 App「妙蛙记账」。最近上线了小程序版本。 - [apply,call,bind的异同](https://sugarat.top/bigWeb/js/apply.md) - [async及await的特点，它们的优点和缺点分别是什么？await原理是什么？](https://sugarat.top/interview/js/asyncawait.md) - [B站-主站技术中心](https://sugarat.top/offer/sum-interview/20-autumn/blibili.md) - [BFC](https://sugarat.top/bigWeb/css/bfc.md) - [blob与file](https://sugarat.top/bigWeb/js/blob.md) - [Bun 使用实践&经验分享](https://sugarat.top/bigWeb/bun/bun-play.md): 解决安装 Bun 的网络问题，bun 管理 npm 镜像源切换，monorepo 依赖的处理 - [CDN的缓存与回源机制](https://sugarat.top/bigWeb/performance/cdn.md) - [Chrome调试技巧-基础](https://sugarat.top/technology/study/chrome-debug1.md) - [Chrome调试技巧-Console](https://sugarat.top/technology/study/chrome-debug2.md) - [Chrome调试技巧-Drawer](https://sugarat.top/technology/study/chrome-debug5.md) - [Chrome调试技巧-Elements](https://sugarat.top/technology/study/chrome-debug4.md) - [Chrome调试技巧-Network](https://sugarat.top/technology/study/chrome-debug3.md) - [Chrome调试技巧-workspace](https://sugarat.top/technology/study/chrome-debug6.md) - [computed与watch](https://sugarat.top/bigWeb/vue/computed.md) - [Content-Length](https://sugarat.top/computerBase/Internet/clength.md) - [css](https://sugarat.top/coding/css.md) - [CSS层级关系](https://sugarat.top/bigWeb/css/level.md) - [CSS伪元素before与after](https://sugarat.top/bigWeb/css/p1.md) - [css相关面试题](https://sugarat.top/interview/css.md) - [css选择器](https://sugarat.top/bigWeb/css/selectors.md) - [CSS中哪些属性不能被继承](https://sugarat.top/interview/css/inherit.md) - [CSS足迹](https://sugarat.top/bigWeb/css.md) - [delete](https://sugarat.top/bigWeb/js/delete.md) - [display属性有哪些?作用分别是什么?](https://sugarat.top/interview/css/display.md) - [DNS预解析](https://sugarat.top/bigWeb/performance/dnsPre.md) - [ECMAScript规范解读this(未完待续)](https://sugarat.top/bigWeb/js/ecmathis.md) - [ES6 学习笔记](https://sugarat.top/bigWeb/es6.md) - [ES6+的一些新语法糖和方法整理](https://sugarat.top/bigWeb/js/es6+.md) - [ES6面试问题](https://sugarat.top/interview/js/es6.md) - [ESCheck工具原理解析及增强实现](https://sugarat.top/technology/works/escheck.md) - [eslint插件开发教程](https://sugarat.top/technology/learn/eslint-plugin.md) - [ESM中使用CJS模块特有的变量和方法](https://sugarat.top/technology/learn/esm-require.md) - [EventLoop](https://sugarat.top/bigWeb/js/eventloop.md) - [extendAP](https://sugarat.top/bigWeb/vue/extend.md) - [FC](https://sugarat.top/bigWeb/css/ifc.md) - [FileSaver.js源码学习，纯前端实现文件下载，防止浏览器直接打开预览](https://sugarat.top/technology/source/file-saver-source.md) - [for-of与for-in的区别](https://sugarat.top/interview/js/diff-for-in-of.md) - [Git常用的一些基本操作](https://sugarat.top/technology/learn/git-base.md) - [Gork Bot风格头像生成提示词](https://sugarat.top/ai/skills/gork-bot-icon-prompt.md) - [Harness 学习笔记分享（Part 1）](https://sugarat.top/technology/learn/harness.md): 学习过程参考了 Pi Agent 的源码。按照其分层思路和一些实现方案，笔者自行实现了一个 MVP 版本的 Agent - [HTML相关内容](https://sugarat.top/bigWeb/html.md) - [http协议](https://sugarat.top/computerBase/Internet/http.md) - [instanceof能正确判断对象的原因是什么](https://sugarat.top/interview/js/instanceof.md) - [javascript](https://sugarat.top/coding/js.md) - [JavaScript中的类型转换规则](https://sugarat.top/bigWeb/js/typeConvert.md) - [js获取某年某月的天数](https://sugarat.top/bigWeb/js/p1.md) - [js面试题](https://sugarat.top/interview/js.md) - [keep-alive](https://sugarat.top/bigWeb/vue/keep-alive.md) - [Mac 安装 stable-diffusion](https://sugarat.top/ai/stable-diffusion/mac-install.md): Mac 实操安装 stable-diffusion，包含环境配置，sd插件安装，模型安装等内容 - [Mac上抓包秒通关羊了个羊](https://sugarat.top/technology/learn/yanglegeyang.md) - [mixin与mixins](https://sugarat.top/bigWeb/vue/mixin.md) - [Node](https://sugarat.top/offer/campus/node.md) - [Node侧实现内容压缩(gzip/br/deflate)介绍与实践](https://sugarat.top/bigWeb/node/compress-response.md) - [Node中require与fs.readFile读取JSON文件的对比](https://sugarat.top/technology/learn/node-require-json.md) - [NodeCLI工具原理解析](https://sugarat.top/technology/works/node-cli.md) - [NodeJS](https://sugarat.top/bigWeb/node.md) - [null是对象吗](https://sugarat.top/interview/js/nullobj.md) - [nvm ls-remote 只有iojs列表](https://sugarat.top/technology/study/nvm-ls-remote.md) - [position的值有哪些](https://sugarat.top/interview/css/position.md) - [Promise](https://sugarat.top/bigWeb/js/promise.md) - [Promise的特点是什么，分别有什么优缺点？什么是Promise链？Promise构造函数执行和then函数执行有什么区别？](https://sugarat.top/interview/js/promise.md) - [React](https://sugarat.top/offer/campus/react.md) - [Serverless](https://sugarat.top/technology/theory/serverless.md) - [ServerLess之云函数实践-天气API](https://sugarat.top/technology/learn/faas.md) - [shopee-供应链](https://sugarat.top/offer/sum-interview/20-autumn/shopee.md) - [SourceMap解析CLI工具实现](https://sugarat.top/technology/works/sm-cli.md) - [stable-diffusion 学习笔记](https://sugarat.top/ai/stable-diffusion.md) - [Symbol的用法](https://sugarat.top/bigWeb/js/symbol.md) - [TCP协议](https://sugarat.top/computerBase/Internet/tcp.md) - [TCP与UDP的区别](https://sugarat.top/computerBase/Internet/tcp-udp.md) - [thoughtWorks-思特沃克](https://sugarat.top/offer/sum-interview/20-spring/thoughtWorks.md) - [typeof能否正常判断类型](https://sugarat.top/interview/js/typeof.md) - [typeof是否能正确判断类型？instanceof能正确判断对象的原理是什么？](https://sugarat.top/interview/other/judgeType.md) - [UDP协议](https://sugarat.top/computerBase/Internet/udp.md) - [Untitled](https://sugarat.top/bigWeb/node/methods.md) - [Untitled](https://sugarat.top/bigWeb/node/methods/issue1.md) - [v-show与v-if](https://sugarat.top/bigWeb/vue/showif.md) - [V8下的垃圾回收机制是怎么样的？](https://sugarat.top/interview/js/v8garbage.md) - [Vite插件开发纪实：vite-plugin-monitor（上）](https://sugarat.top/technology/learn/vite-plugin-monitor1.md) - [Vite插件开发纪实：vite-plugin-monitor（下）](https://sugarat.top/technology/learn/vite-plugin-monitor3.md) - [Vite插件开发纪实：vite-plugin-monitor（中）](https://sugarat.top/technology/learn/vite-plugin-monitor2.md) - [VitePress 产品卡片展示插件介绍](https://sugarat.top/technology/works/vitepress-plugin-product-card.md): VitePress 产品/作品展示卡片插件支持 markdown 容器语法与 GitHub 时间自动展示 - [VitePress 的公告插件开发实记](https://sugarat.top/technology/works/vitepress-plugin-announcement.md): 开发了一个适用于 VitePress 的公告插件 vitepress-plugin-announcement - [Vue面试题](https://sugarat.top/interview/vue.md) - [Vue全家桶](https://sugarat.top/offer/campus/vue.md) - [Vue源码学习](https://sugarat.top/bigWeb/vueResource.md) - [Vue知识点记录](https://sugarat.top/bigWeb/vue.md) - [webpack项目接入Vite的通用方案介绍](https://sugarat.top/technology/learn/webapck2vite.md) - [webpack项目接入Vite的通用方案介绍-草稿](https://sugarat.top/technology/learn/webapck2vite2.md) - [window.onload与document.ready执行顺序](https://sugarat.top/interview/js/onload-ready.md)