前端

职业未来

• 前端面试
• 前端出路，ai/web3
• 算法通关手册
• 前端顶级应用
• ChoDocs 前端算法
• 阿秀的学习笔记，选择算法题
• 艾编程，前端相关，CSS 系列写得不错

项目

• walinejs/waline，评论系统应用
• sqlchat/sqlchat，sql chat 应用
• vbenjs/vue-vben-admin，vue 3 + shadcn + monorepo
• justboil/admin-one-vue-tailwind，鉴权抽取为 Layout 组件，Layout 层职责范围，Layout 层响应式管理
• sonofmagic/uni-app-vite-vue3-tailwind-vscode-template，小程序开发，作者其他模板也不错，如 monorepo 相关的。monorepo 技术选型思路
• Uninen/tauri-vue-template，使用自动导入插件
• zyronon/douyin，刷视频流应用
• jitsi/jitsi-meet，视频会议
• menloresearch/jan，AI 对话应用，可启动本地 AI 模型、提供 API

框架、组件、样式

Primitives

原始组件，低级别 UI 组件，是构建其他复杂组件的基础。

公共交互逻辑

• Portal，将组件渲染到任意 DOM 节点
• FocusScope，焦点范围限制，如：键盘导航时，焦点始终限制在组件范围内
• DismissableLayer，通过遮罩层，阻止背景交互，实现组件外点击管理。如：点击空白关闭下拉框
• Popper，浮动元素定位（Popper.js）、碰撞检测、自动重新定位
• Presence，在组件渲染、销毁时提供动画支持
• Collection，集合管理与集合交互，如：菜单项、单选按钮组

参考：Core Utilities | radix-ui/primitives | DeepWiki

• Component Party，框架语法对比
• Introduction | Ark UI
• cschroeter/park-ui，基于 Ark UI 的支持多框架的组件
• Why Panda - Panda CSS
• TheComputerM/mystic-ui，Solid.js 的炫酷动画组件
• Radix Primitives，shacn/ui 底层
• 张鑫旭 LuLu UI，基于原生 Web Components，兼容到平板尺寸，触摸支持
• nue，使用 web 标准构建应用
• wxt 浏览器扩展插件框架
• vue-scan，开发时组件更新检测
• 前端无头拖拽库
• hntrl/eventkit，类似 RxJS
• L-Blondy/up-fetch，请求库，非常多示例
• moonrepo/proto，各种语言的版本管理
• 免费安全的在线简历
• 根据 md 创建简历
• 在线个人信息页
• github cards
• 中文转拼音
• 拖拽库
• D2，流程图生成
• 特效组件
• js 多端通信包，iframe/server 等
• 艺术背景
• 纹理背景
• tailwindcss 类名简化
• UI elements: CSS & Tailwind
• tailwind 衍生 ui 库
• oklch 配色
• 开源配色方案
• 色彩方案
• Design tokens
• KonghaYao/chinese-free-web-font-storage，免费的中文 web 字体库
• 优质落地页
• Luxirty 搜索
• Tuboshu，网站转桌面应用
• barba.js 页面切换动画
• Motion，动画库
• 创意 vue 动画组件
• Material 3 Expressive 动画效果参考
• floating-ui/floating-ui，浮动元素定位

样式

• CSS 各种选择器（kimi）
• CSS not 选择器（kimi）

3D

• threejs 画星环
• threejs 示例
• 优秀 3d

PWA

• pwa
• pwa

SSR

• htmx+go

博客

• Hugo 迁移到 Astro
• satnaing/astro-paper，Astro 主题，
• lxchapu/astro-gyoza，Astro 主题，文章标题进度能同时高亮多个，但是移动端无法查看
• 博客主题
• 博客 UI 参考
• vitepress 各种使用经验
• 个人主页的优化
• 基于 github issues 自动生成并部署 github pages
• 浏览器书签生成导航网站

性能

• 网址性能优化清单
• web 埋点分析，无用户追踪，后台交互展示效果不错

调试

• 前端网络调试 http proxy
• 前端远程调试利器 PageSpy
• 前端内存泄露排查

构建

• webpack 5
• webpack chunk 优化
• Electron 迁移到 tauri
• 前端 vite 兼容性打包
• vite 构建优化
• egoist/tsup，TS 库打包，基于 esbuild

深入浅出

• awesome cheetsheets
• 编程笔记
• 前端架构思考，如何多人开发互不影响 > 多人开发共享内容互相影响
• 优秀的开发认知负担小
• promise 会被释放
• react context 逻辑复用
• Node.js 架构讲解最通俗的一次
• 全方面讲解 js
• js 中，哪些数组原型方法会修改数组本身，哪些会返回新数组（kimi）
• 前端 blob/file
• ai 创建前端网站
• 流式 json 解析
• js fragment 实现视图
• 前端滚动加载性能优化
• yjs 在线协作实现
• package.json 解析
• tsconfig.json 浏览器与 node 侧解析
• d.ts 是否生效解析
• 不得不用 any
• 精简类型体操（Kimi）
• 如何处理复杂的前端代码（vue 3 组合式 api，跳出单向数据流）
• 主题切换动画
• 移动端 hover 效果适配。移动端 hover 效果，点击触发 hover，再点击别处才能结束 hover 效果，可使用 any-hover/any-pointer 媒体查询来优化。需要考虑此优化的场景有： 悬浮菜单、悬浮下拉框等。对应 Tailwind 类写法（kimi）