JavaScript第 124 期
astryx
Meta 开源的 React 设计系统。该项目是基于 React 和 StyleX 构建的设计系统，在 Meta 内部经过多年实践。它内置 150+ 组件、7 套可定制主题、深色模式、页面模板和 CLI，对 AI Agent 友好。
来自 @JRZYgit 的分享
编程语言
← 项目库JavaScript
共 575 个项目
JavaScript第 124 期
ColorTxt
会给小说上色的阅读器。这是一款基于 Electron 构建的本地小说阅读器，支持 TXT、EPUB、MOBI、PDF 等格式。它可自动为正文中的人名和关键词设置颜色，并支持章节识别、划线笔记、语音朗读和 AI 剧情分析等功能。
JavaScript第 124 期
karakeep
可自托管的浏览器书签管理平台。这是一款可自托管的浏览器书签管理应用，可保存链接、笔记、图片和 PDF，并支持 AI 自动打标签与生成摘要。它提供全文搜索、OCR、浏览器扩展、移动端应用、RSS 自动收藏和网页归档等功能。
JavaScript第 124 期
magic-resume
在线 AI 简历编辑器。这是一款免费的在线 AI 简历编辑器，无需登录、内置多种模板。它基于 TanStack Start、TypeScript 和 Tiptap 构建，支持实时预览、配置 AI 服务商、深色模式、PDF 导出和自动保存等功能。
JavaScript第 124 期
TREK
可多人协作的旅行规划平台。这是一款可自托管的旅行规划平台，支持多人实时协作、交互式地图、费用分摊、行李清单、预订管理和旅行计划等功能。它内置 MCP 服务，可结合 AI 助手规划旅行。
JavaScript第 123 期
emdash
WordPress 的无服务器替代品。该项目是基于 Astro 构建的内容管理系统，可作为 WordPress 的替代品。它提供 WordPress 导入、可视化编辑、全文搜索、定时发布等功能，可直接运行在 Cloudflare 或本地 Node.js+SQLite 等环境上。
JavaScript第 123 期
r2-web
纯前端的在线文件管理平台。这是一款纯前端的 Cloudflare R2（云存储）文件管理器，打开网页输入 R2 凭证，就能直接管理桶里的文件。它内置图片、视频、音频和文本预览，支持拖拽/粘贴上传、图片压缩、批量管理等功能。
来自 @Viki9VD3M 的分享
JavaScript第 123 期
react-scan
自动揪出 React 应用性能问题的工具。该项目是专门用来发现 React 应用性能问题的可视化调试工具，无需改动任何代码，只需添加一个 script 标签或运行一条命令，即可在页面上高亮显示哪些组件发生了不必要的重渲染，适用于 React、Next.js、Vite、Remix 等项目。
来自 @JRZYgit 的分享
JavaScript第 123 期
tiny-world-builder
在浏览器里搭建 3D 体素迷你世界。这是一个基于 Three.js 构建的 3D 体素世界编辑器，类似迷你版《我的世界》创作沙盘。无需安装打开网页即可搭建地形、修道路、挖河流、搭房子、种作物、摆道具，支持本地保存、导入/导出、车辆自动寻路和避障。
JavaScript第 123 期
tolaria
基于 Git 的本地 Markdown 知识库工具。这是一款用来管理 Markdown 知识库的桌面应用，每个知识库即一个 Git 仓库，天然拥有版本历史和变更记录。笔记以 Markdown 文件存储随时可迁移，并内置 MCP 服务器，支持 Claude Code、Codex 等 AI 工具直接读写知识库，适用于搭建个人第二大脑、沉淀团队文档或作为 AI 助手的长期记忆库。
来自 @JRZYgit 的分享
JavaScript第 122 期
docmd
开箱即用的 Markdown 文档网站生成工具。这是一款开箱即用的 Markdown 文档站点生成工具，在任意含 Markdown 文件的目录执行一条命令即可启动，自动生成导航并输出静态 HTML。它内置 SEO 优化、国际化、版本管理、离线搜索、PWA 和 AI 上下文等功能，支持一键生成 Docker、Nginx 或 Caddy 部署配置文件。
来自 @Ghazi 的分享
暂无截图
JavaScript第 122 期
drizzle-orm
零依赖的 TypeScript ORM 库。这是一款轻量级、体积小、零依赖的 TypeScript ORM 库，支持 PostgreSQL、MySQL、SQLite 和 Serverless 数据库，可运行于 Node.js、Bun、Deno、Cloudflare Workers 及各类 Edge 运行时。
来自 @JRZYgit 的分享
暂无截图
JavaScript第 122 期
react-doctor
给 AI 兜底的 React 代码质量扫描工具。该项目是专为 React 项目设计的扫描工具，可检测状态、性能、架构和安全等问题。支持 Next.js、Vite、TanStack、React Native、Expo 等框架，可作为技能安装到 Claude Code、Cursor、Codex 等 AI 编程工具。
JavaScript第 122 期
react-native-graph
高性能 React Native 折线图组件。这是一款基于 Skia 渲染引擎的 React Native 高性能折线图组件，支持平移手势选点、轴标签和自定义数据范围，动画全程在原生端执行不阻塞导航与滚动，专为金融场景设计。
JavaScript第 122 期
Recordly
支持自动缩放和光标特效的屏幕录制工具。这是一款开源的桌面屏幕录制与编辑工具，内置基于鼠标活动的自动缩放、光标平滑和美化效果，支持摄像头画面、自定义壁纸、拖拽时间轴编辑等功能，适用于 Windows、macOS 和 Linux 平台。
JavaScript第 121 期
ACGTI
二次元版 MBTI 测试网站。这是一个基于 MBTI 理论的二次元角色测试网站，通过 39 道情境题和 110 位热门动漫角色生成专属角色代码，支持四维倾向展示、导出结果海报和排行榜等功能。
来自 @tianxingleo 的分享
JavaScript第 121 期
animal-island-ui
动物森友会风格的 React 组件库。这是一款以《集合啦！动物森友会》游戏界面为设计灵感的 React UI 组件库，包含 Button、Card、Switch、Time、Phone 等常用组件。
JavaScript第 121 期
pixijs
极快的 Web 2D 渲染库。这是一款轻量级、高性能的 Web 2D 图形库，支持 WebGL 和 WebGPU 双渲染器。它提供简洁易用的 API，内置资源加载器、多点触控、动态纹理和滤镜等功能，适用于开发 Web 游戏、数据可视化等场景。```typescript import { Application, Assets, Sprite } from 'pixi.js';(async () =>{// Create a new application const app = new Application();// Initialize the application await app.init({ background: '#1099bb', resizeTo: window });// Append the application canvas to the document body document.body.appendChild(app.canvas);// Load the bunny texture const texture = await Assets.load('https://pixijs.com/assets/bunny.png');// Create a bunny Sprite const bunny = new Sprite(texture);// Center the sprite's anchor point bunny.anchor.set(0.5);// Move the sprite to the center of the screen bunny.x = app.screen.width / 2;bunny.y = app.screen.height / 2;app.stage.addChild(bunny);// Listen for animate update app.ticker.add((time) =>{// Just for fun, let's rotate mr rabbit a little.// * Delta is 1 if running at 100% performance *// * Creates frame-independent transformation *bunny.rotation += 0.1 * time.deltaTime;});})();```
JavaScript第 121 期
pretext
绕过 DOM 的文字快速排版库。这是一款纯 TypeScript 写的文本测量与排版库，可在不依赖 DOM 的情况下，基于浏览器字体引擎精确计算文本的排版尺寸，不触发 DOM 重排。它支持多语言、Emoji 和富文本，适用于虚拟滚动列表、多行消息和响应式排版等场景。来自 [@99](https://hellogithub.com/user/4NVsjOq1oHenBtf) 的分享```typescript import { prepare, layout } from '@chenglou/pretext'const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')const { height, lineCount } = layout(prepared, 320, 20) // pure arithmetic. No DOM layout & reflow!```
JavaScript第 120 期
cobe
仅 5KB 的交互式地球库。这是一款超轻量级的地球 3D 可视化库。仅需几行代码，即可在网页中渲染出精美的 3D 交互式地球视觉效果。
JavaScript第 120 期
editor
极简的 3D 建筑编辑器。这是一款基于 React 和 WebGPU 构建的 3D 建筑编辑器，可以在浏览器中创建、编辑和分享 3D 建筑模型。
JavaScript第 120 期
EmulatorJS
在浏览器中运行多种复古游戏的模拟器。这是一款基于 JavaScript 和 WebAssembly 开发的复古游戏模拟器，支持 NES、SNES、GBA、PSP、PS1、街机等经典游戏。用户只需在网页中拖入游戏 ROM 即可开始游戏，支持存档、联机对战、屏幕录制等功能。
JavaScript第 120 期
GitNexus
生成代码仓库知识图谱的工具。该项目能够根据代码仓库生成包含调用链、依赖关系和执行流程的交互式知识图谱，为 Cursor、Claude Code 等 AI 编程工具提供结构化上下文。
JavaScript第 120 期
oat
极简零依赖的前端 UI 库。这是一个压缩后仅 8KB、零依赖的 UI 组件库，仅需引入极小体积的 CSS 和 JS 文件，就能轻松构建美观且包含常见组件的 Web 应用。
来自 @壮士 的分享
JavaScript第 119 期
cloud-mail
基于 Cloudflare 的轻量级邮箱服务。这是一款基于 Cloudflare 的轻量级、响应式邮箱服务，只需一个域名即可在 Cloudflare Workers 上低成本快速搭建邮件服务平台，支持群发、收发附件和人机验证等功能。
来自 @eoao 的分享
JavaScript第 119 期
folio-2025
当个人主页变成 3D 游戏。该项目是前端大神 Bruno Simon 的开源新作，他将个人主页打造成一个可以驾车探索的沉浸式 3D 开放世界游戏，融入了物理模拟、天气系统、植被、昼夜交替等元素。
来自 @卷卷卷 的分享
JavaScript第 119 期
hanzi-writer
让汉字在网页上动起来。这是一款用于展示汉字笔画顺序和交互式书写练习的 JavaScript 库，支持简/繁体字、调节播放速度、循环方式、实时检查笔画正确性等功能。```javascript var writer = HanziWriter.create('character-target-div', '你好', {width: 100,height: 100,padding: 5,showOutline: true});document.getElementById('animate-button').addEventListener('click', function() {writer.animateCharacter();});```
暂无截图
JavaScript第 119 期
streamdown
专为流式输出而生的 Markdown 渲染组件。该项目是专为流式传输场景设计的 React Markdown 组件，可用于解决大语言模型逐字输出 Markdown 内容时出现的闪烁、渲染错误和安全等问题。```typescript export default function Chat() {const { messages, status } = useChat();return ({messages.map(message => ({message.role === 'user' ? 'User: ' : 'AI: '}{message.parts.map((part, index) =>part.type === 'text' ? ({part.text}) : null,)}))});}```
JavaScript第 119 期
taoyuan
文字版田园模拟经营游戏。这是一款名为《桃源乡》的纯前端文字版田园模拟经营游戏，灵感来自《星露谷物语》。它采用像素与中国风相结合的视觉设计，玩家可以按照自己的想法经营农场，体验种植、钓鱼、烹饪、畜牧养殖和矿洞探险等多种玩法。
来自 @谦君 的分享
暂无截图
JavaScript第 118 期
chrome-devtools-mcp
AI 与 Chrome 浏览器之间的桥梁。该项目是 Chrome DevTools 团队开源的官方 MCP 服务实现，将 Chrome DevTools 的能力以 MCP 工具的形式提供给 AI 编程助手，支持自动化操作、调试和性能分析。```{"mcpServers": {"chrome-devtools": {"command": "npx","args": ["-y", "chrome-devtools-mcp@latest"]}}}```
JavaScript第 118 期
iii
终结后端碎片化的框架。这是一款一站式后端框架，集成了 API、事件驱动、定时任务、实时数据流和 AI Agent 等能力，支持 TypeScript、Python 等多语言混合开发。它内置状态管理、结构化日志、端到端链路追踪与可视化调试器，支持流程图、日志流和实时测试等功能。
JavaScript第 118 期
pdfcraft
无需上传文件的 PDF 全能工具箱。这是一款基于 Next.js 和 WebAssembly 构建的开源 PDF 工具箱，所有文件操作均在本地浏览器内完成，无需上传到外部服务器。它提供节点式编排 PDF 文件处理工作流，支持合并、拆分、OCR、格式转换等 90 多种功能。
来自 @pccprint 的分享
JavaScript第 118 期
puck
React 可视化编辑器组件。这是一款基于 TypeScript 和 React 构建的可视化编辑器，可轻松将拖拽式页面构建功能集成到 Next.js、Remix 等 React 应用中，并可直接复用现有 React 组件，将其转化为可拖拽的编辑单元。
JavaScript第 118 期
Rote
看起来不太一样的碎碎念本子。这是一款追求极简和优雅体验的个人笔记平台，采用 React 和 Node.js 构建支持 Docker 一键部署，提供开放的 API 接口，方便用户通过多种方式录入或获取数据。
暂无截图
JavaScript第 117 期
alpine
极简轻量级 JavaScript 框架。这是一个轻量级、极简的 JavaScript 框架，专为前端交互设计，提供类似 Vue 的声明式语法，但无需构建工具，可直接在 HTML 中使用。适用于为静态页面增强交互体验，如表单处理、模态框、手风琴菜单等，既解决了 jQuery 繁琐的 DOM 操作，又避免了 Vue/React 等框架的复杂性和性能开销，非常适合前后端分离的轻量级项目或仅需少量动态行为的页面。来自 [@两双筷子sqldc](https://hellogithub.com/user/5dGtvaZ6H3L4QMY) 的分享```html Increment```
JavaScript第 117 期
ChatLab
开箱即用的聊天记录分析工具。这是一款本地优先的聊天记录分析工具，无需上传数据到云端（AI 功能除外），支持 SQL 查询和 AI 智能挖掘、回顾个人聊天历史。
来自 @地瓜 的分享
JavaScript第 117 期
dev
多功能 Web 代码编辑器组件。该项目是知名 Web 代码编辑器组件 CodeMirror 的核心开发仓库。通过 npm 即可安装，轻松开发出一个可扩展、易用的代码编辑器，支持语法高亮、自动补全、错误提示、代码折叠等功能。
JavaScript第 117 期
ogame-vue-ts
纯文字的太空策略游戏。这是一款基于 TypeScript 和 Vue 3 构建的纯文字太空策略游戏，灵感源自经典的 OGame 银河帝国游戏。玩家将在银河系中建设行星与月球、发展科技、打造舰队和防御系统，并进行进攻星球、军官招募等策略玩法。
来自 @谦君 的分享
暂无截图
JavaScript第 117 期
tinypdf
极简零依赖 PDF 生成库。这是一个用 TypeScript 开发的 PDF 生成库，压缩后体积仅 3.3KB，核心代码不到 400 行。它删除了自定义字体、图片、压缩等非必要功能，适用于生成发票、收据、证书等简单文档。```typescript import { pdf } from 'tinypdf'import { writeFileSync } from 'fs'const doc = pdf()doc.page((ctx) => {ctx.rect(50, 700, 200, 40, '#2563eb') // blue rectangle ctx.text('Hello PDF!', 60, 712, 24, { color: '#ffffff' })ctx.line(50, 680, 250, 680, '#000000', 1) // black line})writeFileSync('output.pdf', doc.build())```
JavaScript第 116 期
cesium
3D 地理空间的 JavaScript 库。该项目是用于在 Web 网页中创建交互式 3D 地球和 2D 地图的 JavaScript 库，它利用了 WebGL 技术来加速图形处理，具备较好的渲染速度，可处理海量数据和动态数据可视化，支持地形和三维瓦片（3D Tiles）等多种数据格式，适用于构建地理信息系统（GIS）等 Web 应用。```javascript import { Viewer } from "cesium";import "cesium/Build/Cesium/Widgets/widgets.css";const viewer = new Viewer("cesiumContainer");```
暂无截图
JavaScript第 116 期
jsonrepair
自动兼容错误 JSON 格式的 JavaScript 库。这是一个用于修复/解析多种错误 JSON 格式的 JavaScript 库，与 JSON.parse() 遇到格式错误直接抛出异常不同。它可以自动处理常见的 JSON 格式问题，如键名缺失引号、单引号代替双引号、尾部多余逗号、缺失逗号和换行符不规范等。```javascript import { jsonrepair } from 'jsonrepair'try {// The following is invalid JSON: is consists of JSON contents copied from// a JavaScript code base, where the keys are missing double quotes,// and strings are using single quotes:const json = "{name: 'John'}"const repaired = jsonrepair(json)console.log(repaired) // '{"name": "John"}'} catch (err) {console.error(err)}```
JavaScript第 116 期
log-lottery
炫酷 3D 球体年会抽奖应用。这是一个基于 Three.js 和 Vue.js 构建的年会抽奖工具，支持导入人员名单、设置奖品/奖项、播放背景音乐、临时抽奖等功能。
来自 @1： 的分享
JavaScript第 116 期
openscreen
免费开源的屏幕录制工具。这是一款免费且开源的屏幕录制工具，可作为 Screen Studio 的轻量级替代品，支持应用录制、修改背景、自定义缩放时长等功能，适用于 Windows 和 macOS 系统。
暂无截图
JavaScript第 116 期
stylex
易扩展的 CSS-in-JS 解决方案。该项目是 Meta 开源的 CSS-in-JS 库，支持在 JavaScript 中定义样式，并在编译时自动优化和提取为独立的 CSS 文件，不仅消除运行时的性能开销，还能彻底避免样式冲突。来自 [@IZRINO](https://hellogithub.com/user/eK0Bv1dmJPxnrwy) 的分享```javascript import * as stylex from '@stylexjs/stylex';const styles = stylex.create({root: {padding: 10,},element: {backgroundColor: 'red',},});const styleProps = stylex.props(styles.root, styles.element);```
JavaScript第 115 期
chronoframe
极简的个人云相册平台。这是一款功能强大的自托管个人相册应用，专为展示与分享个人摄影作品而设计。它提供简洁易用的 Web 界面，可轻松管理和浏览照片，支持 Live Photo 与 Motion Photo 格式，并具备 EXIF 信息解析、地理位置识别和地图探索等功能。
来自 @星野鈴美 的分享
JavaScript第 115 期
OpenStock
免费炫酷的股票市场应用。这是一款基于 Next.js、TailwindCSS 和 MongoDB 构建的股票市场平台，提供实时行情、图表（K 线图、热力图）、新闻资讯和个性化监控等功能，专注于数据展示与分析，不支持交易。
JavaScript第 115 期
pagescms
专为静态网站打造的 CMS。这是一个专为静态网站生成器设计的内容管理系统（CMS），支持 Jekyll、Next.js、VuePress 和 Hugo 等。它提供友好的用户界面，让非技术人员也能轻松编辑和更新网站内容，所有更改将自动转化为 GitHub 上的提交。
JavaScript第 115 期
twake-drive-legacy
免费开源的 Google Drive 替代品。这是一款基于 Node.js 和 MongoDB 构建的云存储平台，提供类似 Google Drive 的文件管理和存储功能，支持 Docker 一键部署。
JavaScript第 115 期
zustand
让 React 状态管理更轻松。这是一款轻量、快速、易扩展的 React 状态管理库，为开发者提供简洁且高效的状态管理体验。它拥有简洁的 API，支持直接定义和使用状态，并通过自定义 Hooks 来管理状态，帮你远离传统状态管理方案的繁琐与陷阱。```typescript import { create } from 'zustand'type Store = {count: number inc: () => void}const useStore = create()((set) => ({count: 1,inc: () => set((state) => ({ count: state.count + 1 })),}))function Counter() {const { count, inc } = useStore()return ({count}one up)}```
JavaScript第 114 期
CubeCity
卡通风格城市建设模拟游戏。这是一款轻量级、卡通风格的 2.5D 城市模拟游戏，基于 Three.js 和 Vue3 构建。玩家可在浏览器中通过点选和拖放，实时建造、搬迁和拆除建筑。建筑会自动产出金币，可用于新建或升级设施。游戏融合了环境、社会与治理（ESG）理念，城市规划需兼顾多元需求，才能打造出可持续发展的理想城市。
JavaScript第 114 期
lazy-brush
平滑手写与签名的 JavaScript 库。这是一个用于平滑绘图的 JavaScript 库，支持通过鼠标或手指流畅绘制画笔轨迹。它采用“惰性画笔”算法，有效减少手抖、锯齿等问题，让线条更加自然顺滑，适用于画板、签名、手写等多种场景。
暂无截图
JavaScript第 114 期
mammoth.js
将 Word 文档转换为 HTML 的库。这是一个用于将 Word 文档（.docx）内容转换为 HTML 的 JavaScript 库。它能够提取文档中的结构信息，如标题、列表、表格、脚注等，并映射为相应的 HTML 标签。同时，忽略大部分样式（如字体颜色、字号、边距等），使得生成的 HTML 代码更加简洁、干净。```javascript var mammoth = require("mammoth");mammoth.convertToHtml({path: "path/to/document.docx"}).then(function(result){var html = result.value; // The generated HTML var messages = result.messages; // Any messages, such as warnings during conversion}).catch(function(error) {console.error(error);});```
JavaScript第 114 期
Termix
高颜值一站式服务器管理平台。这是一个基于 Web 的服务器管理平台，集成了 SSH 终端、SSH 隧道、服务器监控和文件管理等功能。它完全开源免费、可自托管，支持自动重连、文件上传、分屏显示和语法高亮等特性。
来自 @DeShuiYu 的分享
JavaScript第 114 期
websocket-devtools
开箱即用的 WebSocket 调试工具。这是一款专业的 WebSocket 调试与流量控制浏览器插件，安装后会在 Chrome DevTools 面板中新增一个标签页。操作便捷，支持 WebSocket 流量的实时监控、消息模拟和流量拦截等功能。
来自 @孤胆枪手 的分享
JavaScript第 113 期
ConvertX
自托管的在线文件转换工具。这是一个开源的在线文件格式转换工具，支持超过 1000 种主流文档、图片、音视频等多类型文件格式，不依赖第三方服务。它即装即用、操作便捷，并提供文件夹批量处理、实时进度条显示等功能。
JavaScript第 113 期
embedding-atlas
嵌入数据的交互式可视化利器。该项目是 Apple 开源的大规模嵌入（embeddings）数据可视化工具，旨在为高维嵌入数据提供交互式可视化方案。用户可以直观浏览、筛选和搜索嵌入数据及其元信息，从而更高效地探索和分析机器学习模型中的嵌入数据。
JavaScript第 113 期
jdenticon
独特几何头像生成器。这是一个用于生成独特且容易识别图像（identicons）的 JavaScript 库，可根据任意字符串（用户名、哈希值等）生成独特的几何图形，支持输出为 SVG 和 PNG 格式。
来自 @Zhan Ziyuan 的分享
JavaScript第 113 期
perfect-freehand
生成自由手绘线条的 JavaScript 库。这是一个实现类似真实纸笔手绘效果的库，可根据用户绘图时的压力变化，自动生成自然且流畅的变宽线条，并支持 Web、Flutter 及 Figma 插件，轻松集成于多种应用场景。
JavaScript第 113 期
refine
快速构建企业级 React 后台的框架。这是一个专为构建 CRUD（增删改查）应用设计的 Web 框架，只需一行命令即可生成项目骨架，内置登录、列表、详情、编辑页面等功能。业务逻辑与 UI、路由完全解耦，可灵活集成 Ant Design、Material-UI 等设计系统，适用于快速开发管理后台、仪表盘、内部工具和 B2B 应用。
JavaScript第 112 期
base-ui
轻松定制的无样式 React 组件库。该项目提供了一套基础、无样式的 React 组件，仅包含必要的功能逻辑，不附带任何预设样式。帮助开发者摆脱传统 UI 库的样式束缚，无需耗费大量精力覆盖和修改默认样式。
JavaScript第 112 期
cap
轻量级的 CAPTCHA 替代方案。这是一个轻量级、开源的验证码方案，适用于防止机器人滥用和数据抓取等场景。它基于 SHA-256 工作量证明（Proof-of-Work）技术，易于集成、即插即用，为网站提供自托管的防滥用验证机制。
JavaScript第 112 期
drawnix
极简的在线白板工具。这是一款免费、开源的在线白板工具。它提供一个无限画布，支持自由绘制、思维导图、流程图、画笔、插入图片、自动保存等功能，以及移动端适配、Docker 部署和插件机制等特性。
JavaScript第 112 期
FossFLOW
开源的伪 3D 图绘制工具。这是一款专为创建专业的等距（isometric）基础架构图而设计的绘图工具，支持离线使用。等距图是以 2D 形式呈现 3D 效果，能够更直观、精准地展现复杂的设计和系统架构。
来自 @孤胆枪手 的分享
JavaScript第 112 期
snapdom
精准的网页内容截图库。这是一个高效的网页截图 JavaScript 库，可将网页上的任意 Dom 元素快速、精确地转化为高质量图片，并支持导出为 PNG、JPG、WebP 或 Canvas 格式，适用于网页自动化测试、生成预览图、内容保存等场景。来自 [@Yee1014](https://hellogithub.com/user/1B5n92jVikAMPpc) 的分享```javascript const el = document.querySelector('#target');const result = await snapdom(el, { scale: 2 });const img = await result.toPng();document.body.appendChild(img);await result.download({ format: 'jpg', filename: 'my-capture' });```
暂无截图
JavaScript第 111 期
eslint-plugin-unicorn
提升 JavaScript 代码质量的 ESLint 插件。这是一款集成了 100 多条高质量 JavaScript 代码检查规则的 ESLint 插件，全面覆盖代码风格、性能、安全性和可读性等多个方面。
JavaScript第 111 期
heynote
专为程序员打造的记事本。这是一款专供开发者的便签应用，它的强大之处在于可以轻松将不同的内容分块暂存起来，不管是代码片段还是 Markdown 文字都可以往里放！支持自动语法高亮、自动格式化、计算器模式、多光标编辑、全局热键等功能，适用于 Windows、macOS 和 Linux。
JavaScript第 111 期
remotion
用 React 制作动态视频。这是一个能够通过代码生成视频的平台，开发者可以用 Web 技术（如 CSS、Canvas、SVG、WebGL）、React 组件、变量和函数动态生成视频内容，支持复杂的动画和效果。
JavaScript第 111 期
TypeWords
极简的打字背单词网站。这是一款基于网页的背单词软件，帮助用户通过键盘输入来记忆单词。它界面简洁、交互流畅，支持单词发音、错误统计和生词本等功能。
JavaScript第 111 期
workout-cool
开源的健身指导平台。这是一款免费、开源的健身指导平台，提供丰富的健身动作和视频演示。它采用 Next.js+TailwindCSS 构建，支持创建健身计划、进度跟踪和多语言功能。
JavaScript第 110 期
Abracadabra
古文风文本加密工具。这是一款兼具趣味性与安全性的文本加密工具，支持将任意明文加密为仿真古文或安全密文。它采用 AES-256 加密算法和三重转轮混淆技术，古文仿真加密功能参考《古文观止》《古文辞类纂》等古代典籍。
来自 @SheepChef 的分享
JavaScript第 110 期
aya
开箱即用的 Android 设备管理工具。这一款开源的 Android ADB 桌面客户端，提供图形化界面（GUI）以便用户更方便地管理和控制 Android 设备，支持屏幕镜像、文件管理、应用管理、进程监控、布局分析、CPU/内存/FPS 监控、交互式 shell 等功能。
JavaScript第 110 期
HomePage
炫酷的个人主页模板。这是一个美观易用的个人主页模板，拥有流体动画背景、响应式设计和丝滑的页面过渡效果，支持通过简单的配置文件自定义页面内容与样式，轻松打造自己的个性化主页。
来自 @SimonAKing 的分享
JavaScript第 110 期
pear-desktop
纯净无广告的 YouTube Music 桌面应用。这是一款基于 Electron 的 YouTube Music 桌面客户端，开箱即用无需登录。它保留了 YouTube Music 的原生界面，并支持插件扩展，内置广告拦截、下载器、主题切换、音频处理等功能，适用于 Windows、macOS 和 Linux 平台。
来自 @vladelaina 的分享
JavaScript第 110 期
uilayouts
免费高质量 React 动效组件库。这是一个专注于创意设计的 React/Next.js 组件库，内含 100 多个基于 Tailwind CSS、Framer Motion 和 GSAP 等技术构建的免费且美观的 UI 组件。
JavaScript第 109 期
AlgerMusicPlayer
简约美观的音乐播放器。这是一款基于 Electron 开发的第三方音乐播放器，拥有高颜值的界面和丰富的功能，支持本地化服务、桌面歌词显示、音乐下载等，适用于多平台使用。
JavaScript第 109 期
it-tools
程序员的在线工具箱。该项目基于 Vue.js 和 Naive UI 组件库开发，汇集了多种实用的在线工具。它界面清爽、完全免费且功能丰富，提供了加密、转化器、网络、文本等常用开发工具，并支持包括中文在内的多国语言。
JavaScript第 109 期
mazanoke
本地优先的图片压缩工具。这是一款注重隐私保护的浏览器端图片优化工具，无需联网可离线使用。它部署简单、功能丰富，提供图片压缩、格式转换和批量上传等功能，兼容 JPG、PNG、WebP、HEIC、AVIF、GIF、SVG 等图片格式。
JavaScript第 109 期
pokerogue
Roguelike 风格的宝可梦游戏。这是一个融合了宠物小精灵（宝可梦）和 Roguelike 游戏元素的在线小游戏。它无需安装、玩法新颖，玩家在游戏中扮演训练师的角色，无需走地图和做任务直接挑战关卡。开局先是选择宠物组合，然后与训练师和 Boss 战斗，随着战斗胜利将获得物品和奖励，用于提升你的宝可梦，让它们变得更强从而探索更多的关卡。
JavaScript第 109 期
wekan
完全免费开源的看板应用。这是一款基于 Meteor 框架和 MongoDB 构建的开源看板（Kanban），支持实时多用户协作、任务拖拽、标签分组、成员分配等功能。通过卡片和列表的方式，轻松组织待办事项、项目进度或团队任务，项目采用 MIT 协议，支持商用和大规模用户。
JavaScript第 108 期
CloudSaver
开箱即用的网盘资源转存平台。该项目是基于 Vue 3 和 Express 构建的网盘资源搜索与转存平台，支持多资源搜索、豆瓣热门榜单、网盘资源一键转存、多用户等功能，完美适配移动端和 PC 端。
JavaScript第 108 期
gitify
将 GitHub 通知带入你的系统菜单栏。这是一款开源免费的 GitHub 通知管理工具，可以将 GitHub 通知集成到用户的菜单栏，支持 Windows、Linux 和 macOS 平台。
JavaScript第 108 期
hedgedoc
极简的 Markdown 协作平台。这是一款基于 Markdown 的实时协作平台，界面清爽、功能实用，支持多人同时编辑同一份文档，实时同步内容，非常适合小型团队共享和管理文档。
JavaScript第 108 期
mitata
让基准测试变得轻松又高效。这是一款即插即用的基准测试（benchmark）工具，帮助开发者快速、精准地评估代码性能。它提供高精度的测量结果和直观的可视化报告，支持 JavaScript 和 C++ 语言。```javascript import { run, bench, boxplot, summary } from 'mitata';function fibonacci(n) {if (n fibonacci(40));boxplot(() => {summary(() => {bench('Array.from($size)', function* (state) {const size = state.get('size');yield () => Array.from({ length: size });}).range('size', 1, 1024);});});await run();```
JavaScript第 108 期
react-bits
让人惊艳的 React 动画库。该项是集动画与交互于一体的 React 组件库，包含文本动画和背景效果等多种类型。每个组件均提供了 JavaScript 和 TypeScript 版本，并全面支持 CSS 和 Tailwind CSS，满足不同的技术栈，帮助开发者快速构建出色的用户界面。
JavaScript第 107 期
canvas-confetti
五彩纸屑动画效果的 JavaScript 库。这是一个轻量级、高性能的五彩纸屑动画库，让你轻松地在网页中添加炫酷的动态特效。它基于 HTML5 Canvas 技术实现动画渲染，支持粒子数量、发射角度、速度、重力、颜色等多种参数，以及自定义形状和文本动画，适用于节日庆祝、游戏奖励效果等场景。
JavaScript第 107 期
color-thief
从图片中提取调色板的 JavaScript 库。这是一个轻松获取图片主要颜色或颜色组合的 JavaScript 库，适用于需要动态提取图片颜色的场景。
JavaScript第 107 期
newsnow
全开源的实时资讯平台。这是一款高颜值的实时新闻与热榜网站，相比传统热榜产品更加注重实时新闻。它前后端完全开源、部署简单，可轻松托管到 Cloudflare Pages 或 Vercel 等平台。
来自 @Ou 的分享
JavaScript第 107 期
soybean-admin
清新优雅的 Vue3 管理后台模板。该项目是采用 Vue3、Vite5、Pinia 和 UnoCSS 等技术栈构建的管理后台模板，它不仅拥有漂亮的界面，还有清晰的项目结构、严格的类型检查、统一的代码规范，内置丰富的主题配置、国际化方案、页面组件，并且支持移动端。
JavaScript第 107 期
web-check
全面的网站检查工具。这是一款网站检查工具，可以显示指定网站更多的信息。比如：DNS 记录、服务器位置、站点性能、SSL 证书、性能、SEO 等信息，可用于分析网站的服务器架构、查看安全漏洞等场景。
来自 @Zhiqiang Li 的分享
JavaScript第 106 期
openmtp
Mac 上的 Android 文件传输工具。这是一个专为 macOS 设计的开源 Android 文件传输工具。通过 USB 连接，实现 macOS 与 Android 设备之间快速稳定的文件传输，支持 macOS 11.0 及以上版本。
JavaScript第 106 期
readest
沉浸式的电子书阅读器。这是一款为热爱阅读的用户量身打造的阅读软件，将极简设计与强大功能融合，为你带来专注、沉浸的阅读体验。它基于 Next.js 和 Tauri 开发，支持跨平台运行，现已支持 macOS、Windows、Linux 和 Web 平台，未来还将推出 iOS 和 Android 版本，实现真正的全平台覆盖。
来自 @Huang Xin 的分享
暂无截图
JavaScript第 106 期
sharp
高性能的 Node.js 图像处理库。这是一个基于 libvips 的高性能 Node.js 图像处理库，支持对 JPEG、PNG、WebP、GIF 和 SVG 等格式的图像进行调整大小、格式转换、裁剪和旋转等操作。```javascript const semiTransparentRedPng = await sharp({create: {width: 48,height: 48,channels: 4,background: { r: 255, g: 0, b: 0, alpha: 0.5 }}}).png().toBuffer();```
JavaScript第 106 期
stretchly
跨平台的休息提醒助手。这是一款跨平台的 Electron 应用，旨在通过定时休息提醒，帮助用户养成健康的工作习惯，支持包括中文在内的多种语言，并提供自定义休息间隔、时长、提示音效等个性化设置。
JavaScript第 106 期
svgl
精美的 Logo 资源库。该项目是基于 SvelteKit 和 Tailwind CSS 构建的在线 Logo 库，收录了 400 多种标志和文字商标，覆盖技术、编程语言、框架、公司等分类，支持一键下载和复制代码。
暂无截图
JavaScript第 105 期
Dexie.js
轻量级的 IndexedDB 库。这一个轻量级的 JavaScript 库，封装了浏览器原生的 IndexedDB API，使得在客户端浏览器中进行数据存储和查询变得更加容易，支持存储大量数据、事务和索引等功能。```javascript const db = new Dexie('MyDatabase');// Find some old friends const oldFriends = await db.friends.where('age').above(75).toArray();// or make a new one await db.friends.add({name: 'HelloGitHub',age: 25,street: 'East 13:th Street',picture: await getBlob('HelloGitHub.png')});```
JavaScript第 105 期
gitstars
你的 GitHub Star 管家。这是一个用于管理 GitHub 上 Star 项目的工具，支持根据标签和编程语言对项目进行分类。
来自 @cfour 的分享
JavaScript第 105 期
jitsi-meet
开源的视频会议平台。这是一个基于 WebRTC 构建的视频会议平台，提供高清音视频质量，支持私聊、举手、投票和虚拟背景等多种功能，兼容所有主流浏览器和移动平台。
JavaScript第 105 期
mermaid
用类似 Markdown 的语法绘制图表。这是一个开源的图表绘制工具，支持通过类似 Markdown 的语法生成多种类型的图表，如流程图、序列图和甘特图等。
暂无截图
JavaScript第 105 期
semantic-release
自动化的版本管理和发布工具。这是一个基于 Node.js 开发的自动化版本管理和发布工具，旨在通过语义化版本控制（Semantic Versioning）简化项目发布流程。它通过分析 Git 提交信息，自动推导版本号，并生成相应的变更日志。
JavaScript第 104 期
moodist
免费、高颜值的白噪音网站。这是一个有助于专注与放松的听觉网站，无需注册完全免费。它界面简洁、操作方便，内置 75 种白噪音，用户可根据个人喜好自由选择与组合，找到适合自己的声音环境。同时，Moodist 还支持定时关闭、番茄时钟、快捷键等功能。
JavaScript第 104 期
rot.js
开发 Roguelike 游戏的 JavaScript 工具包。这是一个无依赖的 JavaScript 库，专为开发 Roguelike（肉鸽）游戏而设计，包含地图生成、随机数生成、路径寻找、按键处理和照明等多个模块。
暂无截图
JavaScript第 104 期
slugify
将字符串转化成 URL 友好的 JS 库。该项目是用于将字符串转换为适合在 URL 中使用的格式，输出由小写字母、数字和短横线组成的字符串，不含空格和特殊字符，这种格式有助于搜索引擎优化（SEO）。```javascript var slugify = require('slugify')slugify('some string') // some-string// if you prefer something other than '-' as separator slugify('some string', '_') // some_string```
JavaScript第 104 期
starlight
基于 Astro 的一站式文档解决方案。该项目是基于 Astro 框架打造的文档主题，可用于快速搭建和部署文档网站。它界面美观、开箱即用、访问速度快，支持网站导航、搜索、国际化、SEO 和各种插件。
来自 @小小修真者 的分享
JavaScript第 104 期
xiaoju-survey
企业级的问卷调研平台。这是一款免费且专业的调研系统，旨在为个人和企业提供一站式产品级的调研解决方案。它前后端均已开源，并支持 Docker 一键部署，内置了多种题型和模版，支持逻辑编排、自定义品牌、权限管理、数据分析以及 AI 生成问卷等功能，可用于创建问卷、考试、测评和复杂表单。
JavaScript第 103 期
icones
极简的图标搜索网站。这是一个用于快速查找各种图标的网站，支持分类过滤和多选模式。用户可将选择的图标打包为字体或直接下载 SVG 格式。
JavaScript第 103 期
media-chrome
打造现代化网页播放器界面的组件库。这是一个用于定制网页音频和视频播放器界面的库，兼容各种 JavaScript 框架。它高度可定制，开发者可以轻松调整组件的外观和功能，支持字幕、投屏、快捷键、倍速、预览缩略图、移动端和静音按钮等功能。```html```
JavaScript第 103 期
Moe-Counter
可爱的网站计数器。该项目是一个用于统计页面访问人数的计数器。它不仅简单易用，还提供多种可爱风格的主题，用户可根据个人喜好进行选择。
暂无截图
JavaScript第 103 期
piscina
灵活高效的 Node.js 线程池。该项目是用 TypeScript 编写的高性能 Node Worker 线程池，旨在简化 Node.js 多线程编程。它提供简单易用的 API，支持线程间通信、动态调整线程池大小、取消任务、设置内存限制和异步任务跟踪等功能。```javascript const path = require('path');const Piscina = require('piscina');const piscina = new Piscina({filename: path.resolve(__dirname, 'worker.js')});(async function() {const result = await piscina.run({ a: 4, b: 6 });console.log(result); // Prints 10})();```
JavaScript第 103 期
swapy
轻松实现拖动交换布局的库。该项目可以将任意布局转换为可拖动交换的形式，仅需几行代码即可实现。它支持设置交互动画，可以在 React、Vue、Svelte 等框架中使用，适用于各种需要交互式布局的场景。```typescript import { createSwapy } from 'swapy'const container = document.querySelector('.container')const swapy = createSwapy(container, {animation: 'dynamic' // or spring or none})// You can disable and enable it anytime you want swapy.enable(true)```
JavaScript第 102 期
create-t3-app
创建全栈、类型安全的 Next.js 项目的工具。这是一个用于创建全栈且类型安全的 Next.js 项目的脚手架工具。它开箱即用，仅需一条命令就能快速创建一个全新的 Next.js 项目。
JavaScript第 102 期
markmap
将 Markdown 可视化为思维导图。这是一个支持使用 Markdown 语法绘制思维导图的工具。它开箱即用并提供多种使用方式，包括在线、命令行以及 VSCode、Vim 和 Emacs 插件。
JavaScript第 102 期
pglite
在浏览器中运行 Postgres 数据库。该项目将 PostgreSQL 数据库编译成 WebAssembly (WASM)，并打包成一个 TypeScript/JavaScript 客户端库。它压缩后体积不到 3MB，可以在浏览器、Node.js、Bun 和 Deno 环境中运行，无需安装任何额外的依赖。提供灵活的存储选项，支持内存存储、本地持久化或 IndexedDB。```typescript import { PGlite } from "@electric-sql/pglite";const db = new PGlite();await db.query("select 'Hello world' as message;");// -> { rows: [ { message: "Hello world" } ] }```
JavaScript第 102 期
staticrypt
为静态网站提供密码保护功能。该项目无需服务器端支持，即可实现对 HTML 页面进行密码认证访问的功能。它使用 AES-256 加密算法和设定的密码，对需要保护的页面进行加密。生成的页面包含密码输入框，只有在输入正确的密码后，才会显示原始的 HTML 页面内容。
JavaScript第 102 期
ui
流行、设计精美的 UI 组件集合。这是一款由 Vercel 开源、基于 React 开发的 UI 组件集合，包括仪表板、卡片、模型对话、表单、登录等组件，拿来即用。通过 CLI 引入组件后，将得到该组件的源码，可随意修改和定制。
JavaScript第 101 期
paint-board
简洁易用的 Web 端创意画板。这是一款支持移动端的 Web 画板应用，它集成了多种创意画笔和绘画功能，支持形状绘制、橡皮擦、自定义画板等操作，并可以将作品保存为图片。
来自 @Leo Song 的分享
JavaScript第 101 期
PptxGenJS
创建演示文稿（PPT）的 JavaScript 库。这是一个用于生成 PPT 文件的 JavaScript 库，它上手无门槛、功能强大，支持添加图表、表格、SVG、GIF 等内容，并且生成的文件兼容 PowerPoint 和 Keynote 等应用。来自 [@Fenix](https://hellogithub.com/user/4dzVMWGUfYLPpak) 的分享```typescript import pptxgen from "pptxgenjs";// 1. Create a new Presentation let pres = new pptxgen();// 2. Add a Slide let slide = pres.addSlide();// 3. Add one or more objects (Tables, Shapes, Images, Text and Media) to the Slide let textboxText = "Hello World from PptxGenJS!";let textboxOpts = { x: 1, y: 1, color: "363636" };slide.addText(textboxText, textboxOpts);// 4. Save the Presentation pres.writeFile();```
JavaScript第 101 期
reactive-resume
免费开源的简历设计平台。这是一个免费、开源、无广告的在线简历制作平台，内置 12 款专业的简历模板，支持多语言、PDF 导出和 OpenAI 集成等功能。
JavaScript第 101 期
vue-xiuxiangame
开源的文字修仙游戏。这是一个基于 Vue.js 开发的修仙模拟器，互动式的文字游戏，适合喜欢放置类和修仙题材游戏的玩家。
JavaScript第 101 期
xyflow
强大灵活的流程图引擎。该项目是用于构建基于节点的编辑器和交互式图表，支持 React 和 Svelte 框架。它开箱即用且高度可定制，适用于开发工作流和流程图等场景。来自 [@塔咖](https://hellogithub.com/user/bzJpGyu0IanC6L7) 的分享```typescript const initialNodes = [{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },];const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];function Flow() {const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);return ();}```
JavaScript第 100 期
grapesjs
免费的可视化 Web 页面构建平台。该项目通过直观的可视化界面，让用户能够通过拖拽的方式，快速设计和构建网站的 HTML 模板。它所见即所得、移动端适配，适用于官网、新闻和 CMS 等类型的网站。
JavaScript第 100 期
react-content-loader
轻松创建骨架屏的 React 组件。该项目是用于创建页面加载时的占位图 React 组件，它体积小、易定制，提供了多种预设样式和示例代码，拿来即用极易上手，支持 React、Vue 和 Angular 等主流框架。```typescript import { Code } from 'react-content-loader'const MyCodeLoader = () =>```
JavaScript第 100 期
Sink
基于 Cloudflare 带访问统计的短链平台。该项目是运行在 Cloudflare 上的短链接服务，支持网址缩短、访问分析和链接有效期等功能。
来自 @面条 的分享
JavaScript第 100 期
typebot.io
自托管的聊天机器人构建器。该项目通过可视化的拖拽界面，让用户能够轻松创建高级聊天机器人，并将其嵌入网站中。它提供了 30 多种聊天构建块，支持自托管、分析工具、自定义域名和品牌定制等功能，适用于在线客服和销售支持等场景。
JavaScript第 100 期
typed.js
极易上手的 JavaScript 打字动画库。该项目是专门用于创建打字动画效果的 JavaScript 库，它简单易用且 SEO 友好，支持删除效果、设置打字速度和循环次数等功能。```javascript var typed = new Typed('.element', {strings: ["First sentence.", "Second sentence."],typeSpeed: 30});```
JavaScript第 99 期
earthworm
让你上瘾的英语学习网站。这是一个开源的在线学习英语网站，支持自托管和本地运行。它采用连词成句、循序渐进的方法帮你学习英语。通过不断地重复形成肌肉记忆，并结合游戏奖励和积分排名的方式，让背单词变得有趣且高效。
来自 @Immerse 的分享
JavaScript第 99 期
million
优化 React 组件性能的工具。该项目是专为 React 应用设计的优化编译器，它通过优化虚拟 DOM 和直接更新 DOM 节点，来减少页面更新的耗时，从而提升 React 组件性能，最高可达 70%，支持 VSCode 插件和命令行的使用方式。
暂无截图
JavaScript第 99 期
pouchdb
开源的 JavaScript 数据库。该项目是用 JavaScript 编写、运行在浏览器里的 NoSQL 数据库，它能够在离线状态下将数据存储至本地，并在网络恢复后自动同步数据，保持数据与服务器同步。```javascript var db = new PouchDB('dbname');db.put({_id: 'hellogithub-1',name: 'HelloGitHub',age: 69});db.changes().on('change', function() {console.log('Ch-Ch-Changes');});db.replicate.to('远程数据库地址');```
JavaScript第 99 期
stf
通过浏览器控制多台 Android 设备。这是一个用 Node.js 开发的安卓智能设备群测工具，它提供了一个可远程调试多台 Android 设备的 Web 平台，支持 Android 手机和手表等设备。
来自 @wang-qa 的分享
JavaScript第 99 期
ua-parser-js
解析 User-Agent 的 JS 库。这是一个用于解析 User-Agent 的库，它可将用户代理字符串解析为 UAParser 对象，便于检测和查看用户的浏览器、操作系统、CPU 和设备型号等信息。```javascript const parser = new UAParser(ua);console.log(parser.getResult());/*{ua: "Mozilla/5.0 (Linux; Android 10; STK-LX1 Build/HONORSTK-LX1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/110.0.5481.153 Mobile Safari/537.36 musical_ly_2022803040 JsSdk/1.0 NetType/WIFI Channel/huaweiadsglobal_int AppName/musical_ly app_version/28.3.4 ByteLocale/en ByteFullLocale/en Region/IQ Spark/1.2.7-alpha.8 AppVersion/28.3.4 PIA/1.5.11 BytedanceWebview/d8a21c6",browser: {name: "TikTok",version: "28.3.4",major: "28"},cpu: {},device: {type: "mobile",model: "STK-LX1",vendor: "Huawei"},engine: {name: "Blink",version: "110.0.5481.153"},os: {name: "Android",version: "10"}}*/```
JavaScript第 98 期
papermark
开源的文件分享平台。该项目作为 DocSend 服务的开源替代方案，提供了自托管、简单易用的文档分享功能。它采用 Next.js+Tailwind CSS 构建，用户仅需上传文档，就能获得一个可在线访问文件内容的地址，并支持自定义域名和访问数据追踪等功能。
JavaScript第 98 期
plane
开源的项目管理和问题跟踪平台。该项目是开源的项目管理系统，旨在简化团队的项目管理流程。它易于使用、可自托管，支持问题跟踪、周期管理、项目分解和分析统计等功能，可作为 JIRA 的替代品。
暂无截图
JavaScript第 98 期
swr
用于数据请求的 React Hooks 库。该项目是帮助开发者简化数据请求逻辑的 React 库，支持自动处理数据的缓存、重验证、错误重试等多种功能，比如当用户重新点击/回到页面时，自动请求接口获取最新数据。```javascript import useSWR from 'swr'function Profile() {const { data, error, isLoading } = useSWR('/api/user', fetcher)if (error) return failed to load if (isLoading) return loading...return hello {data.name}!}```
JavaScript第 98 期
undraw-ui
基于 Vue 3 的评论组件。这是一个基于 Vue 3 的 UI 组件，提供了评论、内容折叠、回复、表情等功能，以及目录、搜索等组件。
来自 @Mr.King 的分享
JavaScript第 98 期
uppy
易于集成的 JavaScript 文件上传组件。这是一个轻量级的 JavaScript 文件上传组件，它提供了一个美观的用户界面，支持从多个源导入文件、断点续传、国际化，以及预览、编辑和多文件上传的功能。```javascript import React, { useEffect } from 'react'import Uppy from '@uppy/core'import Webcam from '@uppy/webcam'import { Dashboard } from '@uppy/react'const uppy = new Uppy().use(Webcam)function Component () {return}```
JavaScript第 97 期
cmdk
快速、无样式的命令菜单 React 组件。该项目可以帮助开发者轻松实现一个直观且功能丰富的命令菜单，类似于 ⌘K 快捷键唤起的交互式菜单，从而提升用户的交互体验，适用于各种 Web 应用。来自 [@Daaihang Wong](https://hellogithub.com/user/G8ft6na1FH03KEW) 的分享```typescript import { Command } from 'cmdk'const CommandMenu = () => {return (No results found.a b c Apple)}```
JavaScript第 97 期
outline
开源的文档和团队知识库管理工具。这是一款用 React 和 Node.js 开发的在线文档编辑和协作工具，它界面美观、功能丰富、兼容 Markdown 的特点，支持中文和 Docker 部署。此外，它还提供了 Windows、macOS、iOS 和 Android 客户端，可作为私人 wiki 或中小型公司的内部文档和知识库平台。
JavaScript第 97 期
Photo-Sphere-Viewer
用于显示 360° 球体全景的 JavaScript 库。这是一个基于 Three.js 开发的全景照片查看器，提供了友好的交互和丰富的功能。它支持多种全景图格式和功能，包括 2:1 全景图、六面体全景图、全景图分片、显示文本、视频全景等。
来自 @wanzij 的分享
JavaScript第 97 期
strapi
全球领先的开源无头 CMS。这是一款完全免费、采用 JavaScript/TypeScript 开发的无头内容管理系统。它拥有开箱即用的 API 和友好的管理面板，自带权限管理、默认安全、SEO 友好等特点。Strapi 作为目前 GitHub 上最流行的开源内容管理系统之一，已成为多家世界 500 强公司的首选 CMS。
来自 @greatYe 的分享
JavaScript第 97 期
tailwind-landing-page-template
免费、开源的落地页模板。该项目是基于 TailwindCSS、React 和 Next.js 构建的落地页模板，它界面美观、代码简单、设计在线，适用于快速制作公司主页、活动落地页等。```git clone 项目yarn install yarn dev# http://localhost:3000```
JavaScript第 96 期
aspoem
现代化的古诗词学习网站。这是一个更加注重阅读体验和 UI 的诗词网站，采用 TypeScript、Next.js、Tailwind CSS 构建。它拥有简洁清爽的界面和好看的字体，提供了古诗词的拼音、注释、译文以及移动端适配、搜索和一键分享等功能。
来自 @meetqyhvkXU 的分享
JavaScript第 96 期
MyIP
好用的 IP 工具箱。该项目的作者是一位产品经理，这是他借助 ChatGPT 完成的第一个 Vue.js 项目。通过该项目，你可以在线查看自己的 IP 信息（多源），并进行网站可用性、网速、MTR、DNS 泄漏、WebRTC 等检测。
来自 @Jason Ng 的分享
JavaScript第 96 期
nutui
京东风格的移动端 Vue 组件库。该项目是由京东开源的移动端 Vue 组件库，专为移动端 H5 和小程序开发场景而设计。它内含 80 多个高质量组件，支持按需引用、TypeScript、国际化等特性。
JavaScript第 96 期
pikachu-volleyball
用 JavaScript 实现的皮卡丘排球游戏。该项目通过逆向工程解析原版的皮卡丘排球游戏，并使用 JavaScript 重新实现，包括物理引擎和对战机器人部分。
JavaScript第 96 期
wasp
一个类似 Rails 的 React、Node.js 全栈 Web 框架。该项目是一个面向 Web 开发人员的全栈 Web 框架，开发者只需编写简单的 .wasp 配置文件，就能自动生成基于 React 和 Node.js 构建的 Web 应用，而且内置了数据库、身份验证、路由等功能。
JavaScript第 95 期
excalidraw
手绘风格的白板 Web 应用。这是一款完全免费、开源的基于无限画布的白板 Web 应用，用户可以在上面创建手绘风格的作品。支持包括中文在内的多种语言，提供了自由绘制、多种工具、导出 PNG、实时协作、共享链接、自动保存等功能。
JavaScript第 95 期
jsoneditor
在线的 JSON 编辑器。该项目是一个基于 Web 的 JSON 编辑器，可用于查看、编辑、格式化和验证 JSON。它支持树形编辑器、代码编辑器和纯文本等模式，不仅可以直接在线使用，还可作为组件集成到项目中。
JavaScript第 95 期
reactjs-interview-questions
前端面试 React 高频问题和答案。该项目涵盖了一系列 React 相关的面试问题和答案，内容涉及基础知识、组件、状态管理、生命周期以及性能优化等方面。
JavaScript第 95 期
super-productivity
一款先进的待办事项列表应用。超级生产力是一款用 TypeScript 开发的高级 TODO 应用，旨在帮助用户规划任务和管理待办事项，培养健康高效的习惯。它开源、免费、无需注册，支持与 Jira、GitHub、GitLab 等第三方平台集成，可即时收到任务变动的通知。除了可在线使用的 Web 网页版，还提供了 Windows、Linux、macOS、iOS 和 Android 客户端。
JavaScript第 95 期
tsparticles
立刻给网站安排上动画背景的库。该项目可用于创建高度可定制的 JavaScript 粒子效果，比如雪花、彩带和烟花效果等。虽然它是一个独立库、不依赖其他库或框架，但项目内提供了 React、Vue、Angular、Svelte、jQuery 等框架的现成组件，以便于快速集成到项目中。
JavaScript第 94 期
awesome-hands-control
用手势操控电脑程序的工具。该项目基于手势识别进行自定义操控电脑程序，采用纯前端技术栈实现。它通过训练好的模型（MediaPipe）来识别手势，然后将特定手势与电脑操控绑定，最后，用户可以指定操作的进程，从而实现手势操控电脑程序。
来自 @Rylan 的分享
JavaScript第 94 期
bpmn-js
专注于流程图的可视化和编辑组件。该项目提供了直观的拖拽式创建和编辑流程图的功能，可用于构建业务流程管理、决策流可视化和低代码平台。来自 [@塔咖](https://hellogithub.com/user/bzJpGyu0IanC6L7) 的分享```javascript const xml = '...'; // my BPMN 2.0 xml const viewer = new BpmnJS({container: 'body'});try {const { warnings } = await viewer.importXML(xml);console.log('rendered');} catch (err) {console.log('error rendering', err);}```
JavaScript第 94 期
dockge
一个美观、易用的 Docker Compose 管理平台。该项目提供了一个 Web 界面，用于管理 docker-compose.yaml 文件。它开箱即用、界面设计精美，支持交互式编辑 compose.yaml 文件、更新 docker 镜像，以及启动、停止、重启、删除 docker 等操作。
来自 @猎隼丶止戈reNo7 的分享
JavaScript第 94 期
theatre
一个用于创建 Web 动画的 JavaScript 库。该项目是带图形用户界面的 Web 动画编辑器，能对任何 JavaScript 变量进行动画处理。它不仅支持处理 three.js 或其他 3D 库对象的动画功能，还能利用 React 等库对 HTML/SVG 进行动画处理。
JavaScript第 94 期
tiny-rdm
一款轻量级的跨平台 Redis 桌面客户端。该项目是基于 WebView2 的 Redis 桌面客户端，拥有小巧的体积和精美的界面，同时支持中文。它提供了多种连接方式、分段加载、慢日志、转码显示等功能，可以在 Windows、Linux 和 macOS 系统上使用。
JavaScript第 93 期
daedalOS
跑在浏览器里的桌面环境。该项目是用 JavaScript 写的运行在浏览器中的仿 Windows 桌面操作系统，支持开始菜单、动态壁纸、命令行终端、视频播放器、3D 弹球、Markdown 查看器、浏览器等功能。
JavaScript第 93 期
miniPaint
免费的在线图片编辑器。该项目无需安装、可直接在浏览器中运行，支持创建/编辑图像、图层、滤镜、马赛克、绘图工具等功能。
JavaScript第 93 期
multipleWindow3dScene
炫酷的前端量子纠缠效果。量子纠缠是一种量子力学现象，即两个或多个量子不论相距多远都存在一种关联。该项目通过使用 Three.js 和 localStorage 跨多个浏览器窗口，展示了这一量子力学现象。
来自 @YJLTF 的分享
JavaScript第 93 期
omnivore
一款免费、多端的稍后阅读工具。该项目采用 TypeScript + Next.js 构建而成，支持保存文章、电子邮件、文档和同步 Obsidian 等个人知识管理系统的内容，以便日后阅读。而且还提供了 iOS、Android 客户端和浏览器插件，方便随时随地阅读。
JavaScript第 93 期
vue-naive-admin
一款极简风格的 Vue 管理后台。这是一个开源、免费、可商用的后台管理模板，基于 Vue3、Vite4、Pinia、Unocss 和 Naive UI 等前端最新技术栈。它简洁、轻量、风格清新，上手成本低，适合中小型项目或者个人项目。
来自 @Ronnie Zhang 的分享
JavaScript第 92 期
Cronicle
一个简单的任务调度和运行平台。该项目是用 Node.js 写的 cron 替代品，它开箱即用、自带 Web 界面、无需数据库，提供了执行 shell 命令、实时统计、自动故障转移、自动重试、多时区等功能。
JavaScript第 92 期
earth
一个可视化全球天气实况的项目。该项目以可视化的方式展示了全球的天气情况，提供了风、温度、相对湿度等多种天气数据，以及风、洋流和波浪的动画效果。
JavaScript第 92 期
javascript-testing-best-practices
JavaScript 和 Node.js 的测试最佳实践。这是一份提升 JavaScript & Node.js 项目稳定性的指南，包括前/后端测试、持续集成、工具等方面。
JavaScript第 92 期
MikuTools
一个轻量级的在线工具集合。该项目是用 Vue + Nuxt.js 构建的在线工具箱，开源版本仅保留了部分无需后端的功能。
JavaScript第 92 期
page-spy-web
像使用谷歌控制台一样开始远程调试。这是一款用来调试远程 Web 项目的工具，提供了 Docker、NPM 等多种部署方案。
JavaScript第 91 期
auto-animate
一个即插即用的过渡动画库。该项目可以为你的 Web 应用添加平滑的过渡效果，它上手简单无需修改现有代码，动画会在子元素被添加、移除或移动时自动触发，适用于 React、Solid、Vue、Svelte 和 JavaScript 应用。
来自 @Uyloal 的分享
暂无截图
JavaScript第 91 期
html-to-image
将 HTML 网页转化成图片的库。该项目可以将任意 DOM 节点，转换成 SVG、PNG、JPEG 等多种格式的图像，可直接在 React 和原生 JavaScript 代码中使用。来自 [@鸿宇Hov](https://hellogithub.com/user/5kejt8yTpxHwsPK) 的分享```javascript var node = document.getElementById('my-node');htmlToImage.toPng(node).then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);}).catch(function (error) {console.error('oops, something went wrong!', error);});```
JavaScript第 91 期
lx-music-desktop
一款免费、没广告的音乐软件。洛雪音乐助手桌面版是基于 Electron + Vue 开发的音乐搜索工具，需要自己配置音乐源，支持在 Windows、macOS、Linux、Android 平台上运行。
JavaScript第 91 期
threejs-tetris-react
3D 俄罗斯方块。该项目是采用 Three.js + React + TypeScript 构建的 3D 俄罗斯方块游戏。
JavaScript第 91 期
workout-lol
制定你的肌肉训练计划。该项目是采用 NextJS 写的小型 Web 应用，可以帮你更好地健身。用户上来需要选择锻炼器材、指定身体部位，随后网站就会给出动作指导视频和文字描述。
来自 @鸿宇Hov 的分享
JavaScript第 90 期
Bangumi
类似豆瓣的二次元爱好者社区客户端。这是一个基于 React Native 构建的二次元社区 Bangumi 第三方客户端。它免费、无广告、因爱好而生、专为移动端设计，支持番组进度管理、用户动态、贴吧、搜索、排行榜、标签等功能。
JavaScript第 90 期
deprank
通过 PageRank 找到代码库中最重要的文件。该项目基于 PageRank 算法和源文件依赖关系，找到 JavaScript/TypeScript 代码仓库中被依赖最多的文件。
JavaScript第 90 期
json-server
仅需 30 秒、不用写代码就能模拟接口数据。这是一款小巧的接口模拟工具，它使用起来十分简单，只需创建 JSON 文件，然后一条命令就能快速启动接口服务。```# 安装npm install -g json-server# 启动json-server --watch db.json```
JavaScript第 90 期
mind-map
一个好用的 Web 思维导图。该项目包含一个不依赖任何框架的思维导图 JavaScript 库，以及一个采用 Vue.js+ElementUI 开发的支持本地部署、功能丰富的在线思维导图应用。```javascript import MindMap from "simple-mind-map";const mindMap = new MindMap({el: document.getElementById('mindMapContainer'),data: {"data": {"text": "根节点"},"children": []}});```
JavaScript第 90 期
yunxiaozhi
一款开源的校园教务查询微信小程序。该项目是由学生开发的智慧校园小程序，支持课程表查询、成绩查询、考试安排、空教室查询、水电查询等功能。
JavaScript第 89 期
biomes-game
一款开源沙盒 MMORPG 游戏。这是由已被 OpenAI 收购的 Global Illumination 公司，采用 React+Next.js+TypeScript 和 WebAssembly 等技术，构建的大型多人在线角色扮演游戏。玩家可以在游戏里探索世界、建造房子、交易、社交等，无需下载打开浏览器就可以玩。
JavaScript第 89 期
docsify
开箱即用的文档网站生成器。该项目可以帮你快速生成文档网站，开箱即用无需构建，写完文档即可发布。支持全文搜索、自定义主题、丰富的 API、Emoji 等实用功能。
JavaScript第 89 期
poster-design
一款强大的在线设计图片工具。采用 Vue3+Vite2+Vuex+ElementPlus 技术实现的在线海报图片设计工具，可用于生成电商分享图、文章长图、视频/公众号封面等。
JavaScript第 89 期
warriorjs
一个有趣的 JavaScript 编程 RPG 游戏。在游戏中你将通过 JavaScript 语法指挥战士与敌人战斗、营救俘虏，一步步走向塔顶，获得传说中的 JavaScript 之剑。
JavaScript第 89 期
WeHalo
清爽的微信小程序版博客。该项目是基于 Halo 博客后端的微信小程序，可以轻松地将博客内容搬到微信小程序上，支持个人名片、博文展示、评论、搜索文章、自定义导航栏等功能。
来自 @umail.com 的分享
JavaScript第 88 期
ahey
点开即用的在线视频应用。这是一款基于 WebRTC 构建的 P2P 在线视频应用，它免费、无需下载和注册、点开即用。
JavaScript第 88 期
Flowise
用拖拽的方式构建大模型应用。该项目可以让你通过可视化、拖拽组件的方式自定义大模型(LLM)流程，轻松构建 LLM 应用，支持 Docker 一键启动服务。
JavaScript第 88 期
habitica
用玩 RPG 游戏的方式养成好习惯。这是一款养成类 RPG 游戏，当你完成一个现实中的待办事项后，会获得相应的经验和金币。随着你的等级提升，将会开启更多的玩法，比如购买装备、孵化宠物、职业、专属技能、组队打副本等。
JavaScript第 88 期
jsnes
JavaScript 写的红白机模拟器。这是一个用 JavaScript 写的红白机(NES) 游戏模拟器，它可直接嵌入网页也可在 Node.js 中作为库使用。```javascript// Initialize and set up outputs var nes = new jsnes.NES({onFrame: function(frameBuffer) {// ... write frameBuffer to screen},onAudioSample: function(left, right) {// ... play audio sample}});// Read ROM data from disk (using Node.js APIs, for the sake of this example)const fs = require('fs');var romData = fs.readFileSync('path/to/rom.nes', {encoding: 'binary'});// Load ROM data as a string or byte array nes.loadROM(romData);// Run frames at 60 fps, or as fast as you can.// You are responsible for reliable timing as best you can on your platform.nes.frame();nes.frame();// ...// Hook up whatever input device you have to the controller.nes.buttonDown(1, jsnes.Controller.BUTTON_A);nes.frame();nes.buttonUp(1, jsnes.Controller.BUTTON_A);nes.frame();// ...```
JavaScript第 88 期
react-login-page
漂亮的 React 登录页组件。用于快速构建登录页面的 React 组件，内含十几款封装好的界面炫酷、即插即用的登陆页。
来自 @王楚江 的分享
JavaScript第 87 期
AFFiNE
类似 Notion 的协同知识库系统。它拥有清爽、简洁的界面，支持离线使用。集成了笔记、知识库、数据表格等功能，同时这些内容之间还可以灵活组合。
JavaScript第 87 期
giscus
基于 GitHub Discussions 的评论系统。该项目是基于 GitHub Discussions API 实现的评论系统，它免费、无广告、无需数据库，支持自定义主题、多语言等功能。
JavaScript第 87 期
NextChat
免费部署私人 ChatGPT 网页应用。该项目不仅提供了更加人性化的 ChatGPT 聊天界面，还支持一键部署到 Vercel。你只需要提供 OpenAI API Key，就能免费拥有私人 ChatGPT 服务。
JavaScript第 87 期
Painter
小程序生成图片库。该项目可以让小程序开发者通过 JSON 的方式绘制图片，支持绘制文本、图片、二维码、多种布局、自定义字体、圆角等功能。
JavaScript第 87 期
patch-package
给 npm 依赖项打补丁的库。如果项目依赖的第三方库有个 bug，需要手动添加一段代码才能解决，这个时候用它打个补丁就轻松搞定，支持 npm、yarn、pnpm 等。
JavaScript第 86 期
dub
功能丰富的短链接管理平台。采用 Next.js+Tailwind CSS 构建的短链接平台，可用于创建、追踪、分析短链接，支持地理位置统计、自定义域名、生成二维码等功能。
JavaScript第 86 期
EasySpider
一款可视化爬虫工具。该项目可以让用户在图形化界面下，无需写代码实现自动采集/爬虫的功能。用户只需要在网页上选择想要爬的内容，并根据提示框操作即可完成爬虫的设计和执行。
JavaScript第 86 期
lossless-cut
视频/音频无损编辑的工具。该项目支持快速、无损地切割/合并大型视频和音频文件，比如摄像机、GoPro、无人机等设备录制的原始文件都很大，通过粗剪可以减小文件体积、节省空间。
来自 @coolxy 的分享
暂无截图
JavaScript第 86 期
morjs
微信/支付宝小程序扩展到多端的框架。这是饿了么开源的一款基于小程序 DSL 的多端研发框架，该项目能根据微信或支付宝小程序的源码，编译出在不同平台（微信/支付宝/百度/字节/钉钉/快手/QQ/淘宝）流畅运行的小程序。
来自 @BboyZaki 的分享
暂无截图
JavaScript第 86 期
ts-config-helper
TypeScript 配置可视化工具。该项目提供了 TypeScript 配置解析、可视化、文档查阅等功能，帮你快速、准确地生成 tsconfig.json 文件。
JavaScript第 85 期
heroui
漂亮、快速、新式的 React UI 库。UI 的整体风格简洁大方，圆角设计用户体验友好。它不仅颜值能打，而且对开发者也十分友好，支持自定义默认主题、自定义组件样式、fully-typed、自动识别深色模式等功能。
来自 @鸿宇Hov 的分享
JavaScript第 85 期
mathquill
数学公式在线编辑器。这是一个 JavaScript 写的公式编辑器，它可以让数学公式输入变得简单和美观。
来自 @松果 的分享
JavaScript第 85 期
quill
一款强大的富文本编辑器。它是目前 GitHub 上 Star 数最多的所见即所得 Web 编辑器，具有强大的可扩展性和兼容性，支持台式机、平板电脑和手机上几乎所有的浏览器。
JavaScript第 85 期
react-hot-toast
轻便的 React toast 提示组件。它使用方便、易于定制、小于 5kb，支持 Emoji 图标、悬浮保持等功能，提供了多种不同样式的示例代码，拿来就能直接用。
来自 @鸿宇Hov 的分享
JavaScript第 85 期
workadventure
像素 RPG 风格的在线虚拟办公室。一个以 16-bit RPG 游戏形式呈现的在线协作工作区。用户可以在虚拟办公室内四处走动，并与同事进行文字交流、视频聊天或在线会议。
JavaScript第 84 期
koishi
一款极易扩展的聊天机器人框架。它提供了便利的控制台和插件市场，让你无需编程基础也可以开箱即用，几分钟内搭建出自己的聊天机器人，支持 QQ、Telegram、Discord、飞书等聊天平台。
来自 @HBSpy 的分享
JavaScript第 84 期
nginx-proxy-manager
一款强大的 Nginx 可视化管理平台。它开箱即用支持 Docker 一键部署，可以让用户通过 Web 界面在线配置、管理 Nginx 服务，支持转发、重定向、SSL 证书、高级配置等功能。
JavaScript第 84 期
qinglong
支持多种脚本语言的定时任务管理平台。这是一款定时执行脚本的平台，提供了在线管理脚本、环境变量、查看日志、秒级定时任务等功能，支持 Python3、JavaScript、shell 等脚本语言。
来自 @yanyuwangluo 的分享
JavaScript第 84 期
snk
“吃光”你所有的 GitHub 贡献。它可以根据 GitHub 上的贡献图，自动生成蛇的行走路径，一口气吃光所有“绿块”，支持生成 gif 或 svg 格式的动图。
JavaScript第 84 期
uptime-kuma
一款极简的 uptime 监控工具。该项目可以用来监控服务正常运行时间，它界面美观、支持 Docker 一键部署，提供了中文界面、通知、多状态页面等实用功能。
来自 @浮生若夢 的分享
JavaScript第 83 期
chatgpt-web
一款可自定义 API 的 ChatGPT 演示网页。基于 Express 和 Vue3 构建的 GPT-3 模型演示网页，支持接入 GPT-3 API 或网页 ChatGPT。
JavaScript第 83 期
illa-builder
一款灵活、清秀的低代码平台。由国内团队开源的低代码平台，它更新积极、处理反馈及时。功能上内置图表、表格、表单等数十种常用组件，直接拖拽即可使用。还支持 GUI 连接数据库或 API，分分钟构建出企业内部应用，支持在线、云服务和 Docker 本地部署多种使用方式。
JavaScript第 83 期
memos
一款清爽的轻量级备忘录中心。这是一个采用 React+Tailwind+TypeScript+Go 开发的备忘录中心，相当于极简的微博。支持私有/公开备忘录、标签、互动式日历等功能，以及 Docker 部署。来自 [@Yoshino-s](https://hellogithub.com/user/J6BeoT2SX1CUApN) 的分享```shell docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos neosmemo/memos:latest```
JavaScript第 83 期
SingleFile
用于网页存档的浏览器扩展。可实现一键下载网页，能够将网页上的文字、图片等内容，完整地整合到单个 HTML 文件里，支持 Chrome、Firefox、Safari、Microsoft Edge 等主流浏览器。
来自 @DarkBlue 的分享
暂无截图
JavaScript第 83 期
zx
Bash 很好但我选择用 JavaScript 写脚本。实现用 JavaScript 写 shell 脚本的工具，支持 cd、fetch、within 等函数，无需引入就可以使用 fs、os、yaml 等库。```shell#!/usr/bin/env zx await $`cat package.json | grep name`let branch = await $`git branch --show-current`await $`dep deploy --branch=${branch}`await Promise.all([$`sleep 1; echo 1`,$`sleep 2; echo 2`,$`sleep 3; echo 3`,])let name = 'foo bar'await $`mkdir /tmp/${name}````
JavaScript第 82 期
html2canvas
实现浏览器内截屏的 JavaScript 库。该项目可以让你在浏览器内对整个网页或部分内容进行截图，原理是通过读取 DOM 和样式，将当前页面渲染成一个画布图像。```javascript html2canvas(document.querySelector("#capture")).then(canvas => {document.body.appendChild(canvas)});```
暂无截图
JavaScript第 82 期
JavaScript-Algorithms
教你从零构建前端算法体系。学习算法不仅是为了面试，也是每个前端进阶必备的技能之一。该项目包含了前端的进阶算法、常见面试题、手写源码等，帮你构建完整的数据结构和算法的知识体系。
JavaScript第 82 期
pomotroid
视觉上令人愉悦的番茄时钟。这是一款 Vue 写的拥有超高颜值的番茄计时器，支持自定义时间、回合数、提示音、桌面通知等功能。
JavaScript第 82 期
satori
能够将 HTML 和 CSS 转换为 SVG 的库。由 Vercel 团队开源的可根据 HTML 和 CSS 代码生成 SVG 图像的库。支持 JSX 语法，使用起来十分方便和顺手。```typescript import satori from 'satori'const svg = await satori(hello, world,{width: 600,height: 400,fonts: [{name: 'Roboto',data: robotoArrayBuffer,weight: 400,style: 'normal',},],},)```
JavaScript第 82 期
underscore
强大的 JavaScript 函数库。该库提供了 100 多个实用的函数，包括常用的 map、filter、reduce、invoke 以及更专业的辅助函数，比如函数绑定、JavaScript 模板功能、创建快速索引等，让我们可以更加方便地在 JavaScript 中实现函数式编程。来自 [@Y. S](https://hellogithub.com/user/nSRYiOjq19vby5B) 的分享```javascript// countBy_.countBy([1, 2, 3, 4, 5], function(num) {return num % 2 == 0 ? 'even': 'odd';});// 输出：{odd: 3, even: 2}```
JavaScript第 81 期
infisical
一款帮助团队同步环境变量的工具。该项目可用于团队成员之前同步环境变量，拥有简单易懂的操作界面，支持端到端加密、自托管、权限控制、集成 CI/CD 等功能。
暂无截图
JavaScript第 81 期
outils
前端业务代码的工具库。该项目包含了前端开发中，经常会用到的日期格式化、浏览器类型判断、检测是否为手机号等函数。```javascript/**** @desc 获取操作系统类型* @return {String}*/function getOS() {var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) return 'ios'if (/android/i.test(userAgent)) return 'android'if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'if (/mac/i.test(appVersion)) return 'MacOSX'if (/win/i.test(appVersion)) return 'windows'if (/linux/i.test(appVersion)) return 'linux'}```
JavaScript第 81 期
podcast-together
和你的好友一起在线听播客。该项目无需注册和登录，即可创建/进入房间和三五好友，一起收听同一个博客，支持收听小宇宙、Apple Podcast 中国区等音源。
JavaScript第 81 期
terminalizer
强大的终端录制工具。该项目可以轻松记录下你在命令行的操作，并将录制好的内容输出成 gif 图像或直接分享到网上。
JavaScript第 81 期
watching-you
让 DOM 像眼睛一样注视的 JS 动画库。这是一个简易的动画库，主要用于计算一个 DOM 与观察目标，比如鼠标、DOM、输入框值之间的位置，从而做出一些有趣的动画，比方说让它变成跟眼睛一样。
JavaScript第 80 期
cypress
基于 JavaScript 的下一代前端测试工具。主要用于浏览器端到端测试的自动化工具，端到端(E2E)测试就是站在用户的角度，模拟实际使用场景的测试方式。Cypress 目前已成主流浏览器端到端测试工具，它运行速度快、上手简单，支持图形化界面可实时观察执行情况，以及截屏和视频记录测试结果。
JavaScript第 80 期
Dashboard
一款完全自定义配置的浏览器起始页。基于 Vite+Vue3+TypeScript 构建的浏览器起始页，预设了多款简洁清爽的主题开箱即用，能够随心所欲地添加组件，编辑模式下可拖拽组件更改大小和位置，支持浏览器插件和网页两种使用方式。
JavaScript第 80 期
Rocket.Chat
一款可自由定制的企业级开源通信平台。功能丰富的通信平台，可自托管做为 Slack 的开源替代品。支持创建频道、团队和讨论等多种不同功能的群聊，消息支持图片、文件、视频和语音，拥有包括 Windows、Linux、macOS、Android 和 iOS 在内的多种客户端。
JavaScript第 80 期
slidev
专为程序员打造的演示文稿工具。该项目是基于 Web 的幻灯片制作和演示工具，让用户可以使用 纯文本+Markdown 语法制作幻灯片，支持导出为 PDF 或 PNG 格式的文件，或以单页面展示幻灯片。对于大多数不擅长做 PPT 的程序员，基于提供的现成主题也可以制作出看起来不错的演示文稿。
来自 @总钻风 的分享
JavaScript第 80 期
the-super-tiny-compiler
可能是最小的编译器。仅用 1000 行 JavaScript 代码实现的迷你编译器，其中注释还占了一大半，实际代码只有 200 行左右。它虽然代码量不多，但完整地实现了编译器基本功能，可以用来学习编译器原理。
JavaScript第 79 期
ava
可以并发执行 JavaScript 测试的工具。这是一款 Node.js 的测试运行工具，拥有简洁的 API、详细的错误输出、较高的执行效率等特点。
JavaScript第 79 期
kbar
为你的站点提供命令面板界面的组件。这是一个即插即用的 React 组件，可以快速地为站点增加命令面板功能。让用户可以通过快捷键，灵活、交互式地访问网站。
JavaScript第 79 期
LogicFlow
滴滴开源的流程图编辑框架。该项目提供了一系列流程图交互和编辑的功能，支持实现脑图、ER 图、UML、工作流等各种场景。
JavaScript第 79 期
min
一款最小化的浏览器。它是仅包含搜索、书签、密码管理、广告屏蔽器等最基础功能的极简浏览器，适用于 Windows、Linux、macOS 操作系统。
JavaScript第 79 期
PPTist
在线编辑和演示 PPT 的应用。该项目采用 Vue3+TypeScript 构建，还原了大部分 Office PowerPoint 常用功能，支持在线编辑、演示和导出 PPT 文件。
JavaScript第 78 期
jsoncrack.com
优雅的 JSON 数据可视化工具。该项目不是简单的展示 JSON 数据，而是将其转化为类似脑图的形式，支持放大/缩小、展开/收缩、搜索节点、导出图片等操作，还可以快速部署成服务。
JavaScript第 78 期
m3u8-downloader
m3u8 视频在线提取工具。m3u8 视频格式常用于直播服务，其原理是将完整的视频拆分成多个 .ts 视频碎片，其中 .m3u8 文件会详细记录每个视频片段的地址。视频播放时，会先读取 .m3u8 文件，再逐个下载播放 .ts 视频片段。该项目就是基于上述原理实现的 m3u8 视频提取工具，使用方便无需安装打开网页即可下载完整的视频。```javascript// 下载整合后的 TS 文件downloadFile(fileDataList, fileName, fileType) {this.tips = 'ts 碎片整合中，请留意浏览器下载'const fileBlob = new Blob(fileDataList, { type: 'video/MP2T' }) // 创建一个 Blob 对象，并设置文件的 MIME 类型const a = document.createElement('a')a.download = fileName + '.' + fileType a.href = URL.createObjectURL(fileBlob)a.style.display = 'none'document.body.appendChild(a)a.click()a.remove()}```
JavaScript第 78 期
notesnook
一款端到端加密的笔记软件。这款笔记软件以保护用户隐私为主要特点，采用了安全的 XChaCha20-Poly1305 和 Argon2 算法对数据进行加密。它不仅安全还拥有丰富的功能，但免费版功能阉割严重，比如不支持 Markdown、插入图片等重要的功能。
JavaScript第 78 期
sakana
可爱的 Sakana 模拟器。Sakana 是出自动漫《莉可丽丝》的一个梗，可爱的动作加上 Sakana 这句话，使得这个场面迅速走红，这个项目可以让你轻松再现这个瞬间。
JavaScript第 78 期
tldraw
一款实用的微型在线绘图工具。这是一个”麻雀虽小，五脏俱全“的绘图工具，支持插入便签、保存进度、生成图片、多人协作等实用的功能。
JavaScript第 77 期
koodo-reader
先进的电子书阅读工具。该阅读器支持 EPUB、Kindle、PDF、漫画等多种常见文本格式，界面清爽功能丰富，拥有自定义字体、添加笔记、书签、划词翻译、导入图书、数据同步等功能。提供了 Windows、macOS 和 Linux 客户端，还支持网页版可在线使用。
JavaScript第 77 期
nocobase
易扩展的无代码开发平台。这个项目可以让你不写代码，仅通过点击和拖拽，分分钟搭建出协作和内部管理系统。项目还处于早期开发阶段，请勿用于生产环境。
JavaScript第 77 期
vanblog
实用的一站式个人博客系统。一款简洁优雅的博客系统，追求极致响应速度和博客体验。前后台均为响应式，支持 Docker 一键部署。前台为静态页面并支持增量渲染，按需构建更新页面。拒绝花里胡哨的功能，专注于个人博客场景。
JavaScript第 77 期
video.js
流行的 HTML5 视频播放器。一款开箱即用的 Web 视频播放器，它支持 HTML5 视频和流媒体格式，至今有超过 45 万个网站在使用它。
JavaScript第 77 期
vue-idle-game
挂机放置类小游戏。用 Vue.js 写的在线 RPG 游戏，装备完全随机全靠刷，没有任务就是刷。
JavaScript第 76 期
mjml
能够快速制作出响应式邮件的框架。邮件样式是一个让人头疼的问题，而通过这个项目制作的邮件，可以正常地显示在不同的邮件客户端。它还提供了在线编辑器，以及多种邮件模版和丰富的组件，能够帮你快速制作出精美、移动端优先、响应式的邮件。
JavaScript第 76 期
naive-ui
仅支持 Vue3 的组件库。拥有完善的 TypeScript 类型推导的 Vue3 组件库，拥有 80 多种组件、中文文档，如果你想换换“口味”可以试试它。
JavaScript第 76 期
regex-vis
在线可视化正则编辑器。该项目可将输入的正则表达式，自动生成对应的可视化图形，支持通过编辑图形节点修改正则表达式，以及对正则表达式进行测试等功能。
JavaScript第 76 期
vxe-table
好用的 Vue 表格组件。支持增删改查、虚拟列表、大数据懒加载、数据校验、分页、弹窗等功能的 Vue 表格组件。
JavaScript第 76 期
wangEditor
一款开源的 Web 富文本编辑器。基于 slate.js 和 snabbdom.js 实现的富文本编辑器，支持 JS、Vue 和 React 框架。开箱即用仅需几行代码，就能实现一个功能齐全的富文本编辑器。```javascript import '@wangeditor/editor/dist/css/style.css'import { createEditor, createToolbar } from '@wangeditor/editor'// 创建编辑器const editor = createEditor({selector: '#editor-container'})// 创建工具栏const toolbar = createToolbar({editor,selector: '#toolbar-container'})```
JavaScript第 75 期
dicebear
供设计师和开发者使用的头像库。可根据传入的字符串，自动生成对应用户头像的库，还有免费的接口服务。支持多种不同的风格，比如：像素、冒险家、标识等。```javascript// 安装：npm install --save @dicebear/avatars @dicebear/micah import { createAvatar } from '@dicebear/avatars';import * as style from '@dicebear/micah';let svg = createAvatar(style, {seed: 'custom-seed',// ... and other options});```
JavaScript第 75 期
FFCreator
轻量级的视频加工库。完全基于 Node.js 实现的快速制作视频的工具，能够根据添加的图片、视频和音乐，轻松地制作出新的视频。
JavaScript第 75 期
payload
完全由 TypeScript 编写的“无头” CMS 系统。该项目采用 TypeScript +Node.js+React+MongoDB 构建而成，提供了完整的内容管理功能。相较于传统的 CMS 系统 Django，它没有前台部分和模版引擎（无头 headless）仅通过接口为前端提供数据，从而可以轻松地实现前后端分离，让后端程序员可以更加专注于接口开发。
JavaScript第 75 期
react-illustration-series
图解 React 源码。作者从 React 项目结构和运行机制入手，先介绍 React 的整体结构，然后讲解运行核心、数据管理以及用到的高频算法。篇篇到“肉”干货满满，推荐给想要深入学习 React 源码的小伙伴。
JavaScript第 75 期
type-challenges
在线挑战 TypeScript 类型问题。该项目包含了不同难度的关于 TypeScript 类型的问题以及答案，通过这些挑战可以更好地理解 TypeScript 的类型系统。
JavaScript第 75 期
visual-drag-demo
教你做低代码平台的项目。低代码平台的核心功能就是拖拽组件生成页面，该项目用 Vue 实现了一个可视化拖拽组件库，不仅如此还有配套讲解技术要点和原理分析的文章。
JavaScript第 74 期
fortune-sheet
类似 Excel 的电子表格组件。使用简单无需繁琐的配置，内置多种 Excel 常用功能，并且支持在线协同编辑```javascript import React from 'react';import ReactDOM from 'react-dom';import { Workbook } from "@fortune-sheet/react";import "@fortune-sheet/react/dist/index.css"ReactDOM.render(,document.getElementById('root'));```
JavaScript第 74 期
hashmd
掘金社区开源的 Markdown 编辑器组件。基于 Svelte 构建的 Markdown 编辑器组件，功能齐全还可以通过插件扩展功能，默认安全且兼容 SSR，适用于 React、Vue 和 Angular 框架```javascript// React import { Editor, Viewer } from '@bytemd/react'import gfm from '@bytemd/plugin-gfm'const plugins = [gfm(),// Add more plugins here]const App = () => {const [value, setValue] = useState('')return ({setValue(v)}}/>)}```
JavaScript第 74 期
WebGAL
易于开发的网页端视觉小说引擎。无需开发基础分分钟就能学会所有语法，立马开始创作自己的 Galgame。[在线尝试](https://demo.msfasr.com/)
JavaScript第 74 期
xterm.js
功能齐全的终端前端组件。用 TypeScript 编写的前端组件，提供了完整的终端功能、支持鼠标事件、丰富的 Unicode 支持。在众多流行开源项目中都能看到它的身影，比如 VS Code、Hyper 和 Theia 等
JavaScript第 73 期
cnchar
小巧的汉字处理 JS 库。支持简体字拼音、多音字、笔画数等功能```javascript let spell = cnchar.spell('你好');let stroke = cnchar.stroke('你好');console.log(spell, stroke);```
暂无截图
JavaScript第 73 期
nanoid
用于生成随机 ID 的 JS 库- 小巧：无依赖，仅 130 字节- 快速：比 UUID 快 60%- 安全：加密的强随机 API，可在集群中使用- 紧凑：它使用比 UUID 更大的字母表- 易用：已移植到 20 多种编程语言```javascript const { nanoid } = require('nanoid');nanoid(); //=> "U9HDHNW3BkWMEd6GV_QPa"```
JavaScript第 73 期
nexe
可将 Node.js 应用程序，打包成一个可执行文件的命令行工具
JavaScript第 73 期
rough
手绘风格的图形库。可以让你用素描、类似手绘的风格来绘制图形```javascript const rc = rough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, width, height```
JavaScript第 73 期
rubiks-cube
使用 Three.js 制作的 3D 魔方。支持自定义魔方阶数，[在线尝试](https://pengfeiw.github.io/minicode/threejs-rubik)
JavaScript第 72 期
chameleon
一端所见即多端所见。适应不同环境的跨端整体解决方案，支持 Web、小程序、快应用 等平台
JavaScript第 72 期
charts
简单、零依赖、响应式的 SVG 图表库```javascript const data = {labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am","12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"],datasets: [{name: "Some Data", chartType: "bar",values: [25, 40, 30, 35, 8, 52, 17, -4]},...]}const chart = new frappe.Chart("#chart",{ // or a DOM element,// new Chart() in case of ES6 module with above usage title: "My Awesome Chart",data: data,type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'height: 250,colors: ['#7cd6fd', '#743ee2']})```
JavaScript第 72 期
lax.js
用于滚动时创建平滑和好看动画的库。简单轻量仅 4KB 大小，但功能齐全且灵活```html window.onload = function () {lax.init()// Add a driver that we use to control our animations lax.addDriver('scrollY', function () {return window.scrollY})// Add animation bindings to elements lax.addElements('.selector', {scrollY: {translateX: [["elInY", "elCenterY", "elOutY"],[0, 'screenWidth/2', 'screenWidth'],]}})}Hello```
JavaScript第 72 期
reveal.js
一款 HTML 演示框架。让你摆脱传统死板的 PPT 制作方法，可以方便地使用 HTML、Markdown 语言制作 PPT
暂无截图
JavaScript第 72 期
tinykeys
极小的键盘事件监听库```javascript import tinykeys from "tinykeys"tinykeys(window, {"Shift+D": () => {alert("The 'Shift' and 'd' keys were pressed at the same time")},"y e e t": () => {alert("The keys 'y', 'e', 'e', and 't' were pressed in order")},"$mod+KeyD": () => {alert("Either 'Control+d' or 'Meta+d' were pressed")},})```
JavaScript第 71 期
handle
汉字版 Wordle 游戏。[在线试玩](https://handle.antfu.me/)
JavaScript第 71 期
noclip.website
电子游戏关卡的数字博物馆。该项目包含了很多游戏的场景模型，可在线自由浏览。[在线体验](https://noclip.website/)
JavaScript第 71 期
summernote
基于 jQuery 的编辑器库。可用来创建所见即所得（WYSIWYG）编辑器，支持 Bootstrap 3、4 和 5
JavaScript第 71 期
ts-node
可直接在 Node.js 上执行 TypeScript 代码的库。通过 JIT 方式将 TypeScript 代码转换成 JavaScript，实现不需要预编译即可在 Node.js 上运行 TypeScript 代码
JavaScript第 71 期
yn
面向程序员的本地 Markdown 笔记工具。一款适合程序员的笔记工具，拥有和其它工具不一样的体验- 技术笔记：可直接在文档中运行代码块（默认支持 JS 代码，其它语言需配置）- 制作辅助工具：可在文档中嵌入 HTML 组件来制作辅助工具- 画图和图表：支持嵌入多种图形、思维导图、Plantunl、Drawio、Mermaid 、ECharts- 工作日报：支持任务代办列表，使用“宏替换”功能可以方便地生成日报周报
暂无截图
JavaScript第 70 期
js-sdsl
实用的 JavaScript 数据结构库。实现了 LinkList、Queue、Set、Map 等数据结构，严格的单元测试提供了正确性和性能的保证，可用于各种需要用到高级数据结构的场景```html const { Vector } = sdsl;const myVector = new Vector();// you code here...```
JavaScript第 70 期
lottery
年会抽奖程序。基于 Express + Three.js 的 3D 球体抽奖项目，能够自定义文字、图片和抽奖规则，还支持一键导入抽奖人员和导出抽奖结果
JavaScript第 70 期
mometa
前端代码可视化编辑器。一款低代码辅助开发的工具，可通过拖拽的方式构建和编辑页面。特性：- 🛠 直接作用于源码，支持移动端布局- 🍒 开放物料生态，可定制团队内物料库- 🌟 无缝兼容接入，不破坏已有项目开发模式
JavaScript第 70 期
resume
在线简历生成器。轻松实现在线简历，支持在线预览、编辑和下载 PDF 简历。[在线尝试](https://visiky.github.io/resume/?mode=edit)
JavaScript第 70 期
shepherd
用来引导用户浏览网站的 JavaScript 库
JavaScript第 69 期
arco-design
基于 ArcoDesign 的 React/Vue UI 组件库。包含 60 多个开箱即用的高质量组件，还提供了可视化的样式配置平台，可用于快速构建企业级管理后台```javascript import React from 'react';import ReactDOM from 'react-dom';import { Button } from '@arco-design/web-react';import '@arco-design/web-react/dist/css/arco.css';function App() {return (Hello World);}ReactDOM.render(, document.getElementById('app'));```
JavaScript第 69 期
context-note
带上下文的网页笔记浏览器插件。大多数时候我们使用书签来标记网站链接，但在一些特定的场景中比如阅读文章和浏览信息时，就需要对特定的句子及其上下文进行标记。这个项目提取了信息的内容和位置，有上下文容易回顾，一键跳转方便溯源
JavaScript第 69 期
prisma
适用于 Node.js 和 TypeScript 的 ORM。支持主流数据库可用于开发 REST API、GraphQL API、gRPC API 等任何需要连接数据库的程序，项目还包括了数据迁移工具和管理数据的 GUI 工具```javascript import { PrismaClient } from '@prisma/client'const prisma = new PrismaClient()// A `main` function so that you can use async/await async function main() {const allUsers = await prisma.user.findMany({include: { posts: true },})// use `console.dir` to print nested objects console.dir(allUsers, { depth: null })}main().catch((e) => {throw e}).finally(async () => {await prisma.$disconnect()})```
JavaScript第 69 期
S2
高性能多维交叉分析表格工具。提供 KPI 趋势表、占比表、对比表等多种表格样式，开箱即用上手简单拥有详细的文档。通过按需渲染和虚拟滚动等方式，实现在百万级数据量秒级渲染、滚动不卡顿。[在线体验](https://antv-s2.gitee.io/zh/examples/gallery/)
JavaScript第 68 期
automa
通过图形化界面拖拽功能模块，实现浏览器自动操作的扩展工具。轻松实现自动填表、截图、定时执行等操作。让浏览器自动完成预设工作流的插件，从而减少重复性操作提高效率
JavaScript第 68 期
colorfu
自动生成由文字/颜色/图片/纹理元素组成的壁纸。[在线尝试](https://colorfu.art/)
JavaScript第 68 期
pm2
Node.js 的进程管理工具。它容易上手操作简单，可以有效地提高 Node.js 程序运行的稳定性，支持自动重启、负载均衡、不停服务重启、性能监控等功能，多用于生产环境中管理、监控 Node.js 进程
JavaScript第 68 期
vue-color-avatar
纯前端实现的矢量风格头像生成网站。可以通过搭配不同的素材，生成个性化头像。该项目使用 Vite + Vue3 开发，能够帮助前端初学者熟悉 Vue3 语法并掌握项目搭建的相关知识
JavaScript第 67 期
city-roads
自动生成任意城市的道路图。采用 OpenStreetMap 的免费数据实现城市道路可视化，还支持导出图片用这些图片做壁纸感觉很酷。[在线尝试](https://anvaka.github.io/city-roads/)
JavaScript第 67 期
Leaflet
对移动端友好的交互式地图 JavaScript 库。它久负盛名且简单易用，别看它小但包含了地图常用功能。Leaflet 极易上手，几行代码就能实现地图功能，且支持多种地图数据源。很多大厂都在用它，可放心在生产环境中使用。[中文官网](https://leafletjs.cn/)```javascript var map = L.map('map').setView([51.505, -0.09], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '©OpenStreetMap contributors'}).addTo(map);L.marker([51.5, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup. Easily customizable.').openPopup();```
JavaScript第 67 期
lexer
在线编程语言词法分析器。基于 DFA 算法实现支持多语言扩展，可用于代码编辑器的语法高亮等场景。同时项目的代码量少还有详细的源码讲解文档，适合对词法分析感兴趣的小伙伴学习。[在线尝试](https://wgrape.github.io/lexer/?lang=c)```javascript// 词法分析器let lexer = {// 有限状态自动机 deterministic finite automaton DFA: {result: {matchs: [], // 已匹配的字符队列tokens: [], // 已生成的token列表},state: DFA_STATE_CONST.S_RESET, // 当前机器的状态events: {flowtoNextState(ch, state) {lexer.DFA.resultChange.pushToMatchs(ch);lexer.DFA.state = state;},flowtoResetState() {lexer.DFA.state = DFA_STATE_CONST.S_RESET;},},},};```
JavaScript第 67 期
React95
复古的 Win95 样式 React 组件。[在线预览](https://react95.io/)
JavaScript第 67 期
semi-design
抖音开源的中后台前端解决方案。包含设计语言、React 组件、主题，开箱即用可快速搭建美观的 React 应用- 使用 TypeScript- 强大的主题定制- 国际化- 支持 SSR
JavaScript第 67 期
towxml
可将 HTML 和 Markdown 转为微信小程序 WXML 的库。用于解决在微信小程序上 Markdown、HTML 不能直接渲染的问题
JavaScript第 66 期
30-Days-Of-JavaScript
30 天 JavaScript 编程挑战。该教程虽然是英文教程但是图文并茂通俗易通，内容循序渐进包含练习题，适合零基础想要学习 JavaScript 的同学
暂无截图
JavaScript第 66 期
javascript
Airbnb 开源的 JavaScript 风格指南。[中文](https://github.com/lin-123/javascript)```javascript// 采用数组解构const arr = [1, 2, 3, 4];// bad const first = arr[0];const second = arr[1];// good const [first, second] = arr;```
JavaScript第 66 期
sharedb
基于 JSON 数据 OT 算法的实时数据库。简单来说就是实时协同数据框架，可用来实现当页面因用户操作发生数据变化时，实时把数据同步展示到其它用户页面上，其中 OT 算法就是解决此协同过程中问题的通用算法。常见的场景比如：多用户之间的状态同步、在线协作文档、离线后数据改动同步等
JavaScript第 66 期
spy-debugger
远程调试手机页面和抓包的工具。操作简单仅需手机和电脑在同一个 WIFI 下，即可在实现真机调试页面
JavaScript第 66 期
YesPlayMusic
高颜值的第三方网易云播放器。它不仅拥有简洁美观的外观，还有丰富的功能- 支持 Windows/macOS/Linux- 私人 FM/每日推荐歌曲- 网易云账号登录- 歌词显示- 自定义快捷键和全局快捷键- 等等
JavaScript第 65 期
didact
教你从零写一个 React 框架。通过一系列的文章和代码，教授如何实现 React 框架，从而能够更好的理解 React 内部原理
JavaScript第 65 期
flat
前后端完全开源、功能丰富的在线教室项目。通过它可以快速完成支持多人视频、语音、白板互动、录制回放等功能的在线教室
JavaScript第 65 期
iDataV
大屏数据可视化项目集合
JavaScript第 65 期
milkdown
一款清爽所见即所得的 Markdown 编辑器。不同于大多数 Markdown 编辑器它是插件驱动的，类似开源可自由扩展的 Typora。项目由 prosemirror+remark 构建，入门开发者从中可以学习到如何使用 prosemirror 来开发富文本编辑器，以及如何设计一个针对编辑器的插件系统```javascript import { Editor } from '@milkdown/core';import { commonmark } from '@milkdown/preset-commonmark';import { history } from '@milkdown/plugin-history';// import theme import '@milkdown/theme-nord/lib/theme.css';new Editor().use(commonmark).use(history).create();```
JavaScript第 65 期
react-beautiful-dnd
漂亮易用的 React 列表拖拽库
JavaScript第 64 期
50projects50days
50 个采用 HTML+CSS+JS 的前端小项目集合。项目包含网页源码和效果展示，标准入门级的前端开源项目。通过查看效果让新手感受前端的美妙，简单的源码降低了上手写代码门槛。或许其中某个网页的效果也会让工作多年的你大呼哇塞
JavaScript第 64 期
etherpad
支持实时协作的富文本 WYSIWYG 编辑器
JavaScript第 64 期
gogocode
简化 JavaScript 抽象语法树（AST）处理的工具。借鉴了类似 jQuery 的预发和字符串构建 AST 的思想，大大简化了学习成本、降低了开发复杂度，官方团队在此基础上还开发出了 [Vue2 转 Vue3 的插件](https://gogocode.io/zh/docs/vue/vue2-to-vue3)
JavaScript第 64 期
rubick
基于 Electron 开发的开源插件化工具箱。起初项目作者是 uTools 的用户但 uTools 没有开源，他又想接入公司内部的工具，然后 Rubick（拉比克）就诞生了。它实现了 uTools 的大部分功能，可以适配 uTools 丰富的开源插件，享受用完即走的便利
暂无截图
JavaScript第 64 期
sjcl
斯坦福大学开源的 JavaScript 加密库。用于 JS 的加密和解密，体积小且支持多种加密算法```javascript sjcl.encrypt("password", "data") //加密数据sjcl.decrypt("password", "encrypted-data") //解密数据```
JavaScript第 63 期
cusdis
这是一个界面清爽、注重隐私的轻量级博客评论系统。可以很方便地与 React、Vue 或其他博客系统结合，并且还提供了一个后台来管理所有的评论。除此之外，还支持一键从 Disqus 导入、邮件通知等强大的功能
JavaScript第 63 期
eruda
一个专为手机端设计的前端页面调试工具。类似手机端迷你版开发者模式，可用于在手机端调试页面。主要功能包括：显示 console 日志、检查元素状态、捕获 XHR 请求、显示本地存储和 Cookie 等信息
暂无截图
JavaScript第 63 期
lowdb
支持浏览器和 Electron 的轻量级 JSON 文件数据库。如果是创建没有后端的小型前端项目，但还有存储和管理数据的需求，那就快试试 lowdb 吧```javascript import { join } from 'path'import { Low, JSONFile } from 'lowdb'// 新建 JSON 文件用于存储数据const file = join(__dirname, 'db.json')const adapter = new JSONFile(file)const db = new Low(adapter)// 把内容更新到 db.data 并写入 JSON 文件db.data.posts.push({ id: 1, title: 'lowdb is awesome' }).write()db.get('posts').filter({title: 'lowdb is awesome'}).sortBy('id').take(5).value()```
JavaScript第 63 期
moovie.js
专注于电影的 HTML5 播放器。容易上手和使用，支持倍速播放、快捷键操作、字幕偏移即时调整等功能
JavaScript第 63 期
nativefier
能够把 Web 页面变成本地应用的命令行工具。通过 Electron+Chromium 把网站包装成本地 .app、.exe 等可执行文件，支持运行在 Windows、macOS 和 Linux 操作系统上
JavaScript第 62 期
amis
通过 JSON 配置就能生成各种后台页面。这是百度开源的前端低代码框架，[中文文档](https://baidu.gitee.io/amis/zh-CN/docs/index)快速上手
JavaScript第 62 期
Ink-wash-docs
一款基于 egg.js+Vue.js 的在线文档管理平台。功能包含：文档编辑和预览、团队管理、访问权限、协作编辑等
JavaScript第 62 期
playground-macos
模拟 macOS 桌面样式的个人简介展示页
JavaScript第 62 期
use-gesture
丰富鼠标和触摸手势的 React 库
JavaScript第 61 期
drawio
一款简洁强大的绘图工具。免费开源可以自行部署也可以[在线使用](https://app.diagrams.net/)，功能上直追 Microsoft Visio。支持流程图、序列图、网络拓扑图、甘特图、思维导图、模型图等，还能导出多种格式类型比如 png、svg、PDF、HTML 和 VSDX 格式（Microsoft Visio 图形格式）
JavaScript第 61 期
kutt
免费开源的短链接服务。服务基于 Node.js+Express+React 实现，支持管理链接、自定义短链接、设置链接密码、访问统计等功能
JavaScript第 61 期
nav
一个支持 SEO 的静态导航网站。不依赖后端的纯前端项目开箱即用，简单清爽
JavaScript第 61 期
npkill
快速查找和轻松删除 node_modules 文件夹的工具。还在为 node_modules 占了很多磁盘空间而烦恼吗？还在手动找用不到的 node_modules 目录吗？快来试试 npkill 吧！轻松地删除 node_modules 目录
JavaScript第 61 期
taro
一款 Web 轻量级的 3D 游戏引擎。底层基于 three.js 和 cannon-es 支持 3D 刚体物理引擎
JavaScript第 60 期
ChatUI
专注于对话领域的 UI 开源项目。可以帮助用户快速搭建体验友好的机器人对话界面，特性：- 最佳实践：基于阿里小蜜业务积累和打磨的对话式交互最佳实践- TypeScript：使用 TypeScript 开发，提供完整的类型定义文件- 响应式：响应式布局，在无线和 PC 端都可以友好展现- 主题：支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求- 国际化：支持多语言和本土化特性```javascript import Chat, { Bubble, useMessages } from '@chatui/core';import '@chatui/core/dist/index.css';const App = () => {const { messages, appendMsg, setTyping } = useMessages([]);function handleSend(type, val) {if (type === 'text' && val.trim()) {appendMsg({type: 'text',content: { text: val },position: 'right',});setTyping(true);setTimeout(() => {appendMsg({type: 'text',content: { text: 'Bala bala' },});}, 1000);}}function renderMessageContent(msg) {const { content } = msg;return ;}return ();};```
JavaScript第 60 期
cool-admin-midway
一款基于 Node.js+midway.js 的后台权限管理系统。它开源免费不仅能够快速开发增删改查的需求，还支持 Serverless、Docker 等多种方便的部署方式，不管是用来学习如何开发管理后台，还是快速开发都是不错的选择
JavaScript第 60 期
edex-ui
一款跨平台基于 Electron 的炫酷终端工具。好莱坞级别的终端使用体验，拥有漂亮的启动动画、浮夸的音效，还能够直观地展示文件目录、系统资源、网络等信息
JavaScript第 60 期
joplin
Markdown 友好的开源笔记软件。这是一款免费的开源笔记软件，能够方便地管理待办事项和处理大量笔记。可以直接导入印象笔记（Evernote）的笔记和 Markdown 文件，提供了 Windows、macOS、Linux、Android 和 iOS 等主流操作系统客户端。它不仅支持离线使用，同时也支持自定义网盘同步笔记，从而实现多端无缝创作。
JavaScript第 60 期
MarioHTML
用 TypeScript 写的马里奥网页游戏。[在线试玩](https://www.neilb.net/MarioHTML/)
JavaScript第 60 期
semaphore
好看的 Ansible UI 项目。受够了 Ansible 老气的界面了吗？那就试试这个项目吧
JavaScript第 59 期
folio-2019
一个开源的 3D 博客项目。这个博客我点进去后就惊呆了，用户可通过操控一辆小汽车选择要阅读的文章，过程中还有汽车的声音和砖块碰撞的效果等，特别炫酷！快去体验下吧！[点击尝试](https://bruno-simon.com/)
JavaScript第 59 期
instant.page
通过预加载，提高网页加载速度的 JavaScript 库。它支持移动端和 PC 端，在 PC 端时当鼠标悬浮在链接上和在移动端时链接可见后立即预加载，从而降低点击后网页的加载时间。复制 HTML 代码片段加到网页上即可生效```html```
JavaScript第 59 期
majestic
美观且便捷的 JavaScript 测试框架 Jest 的图形界面工具。遵循“不写测试的项目，不是好项目”的原则，测试是一定要写的。如果有一个赏心悦目的测试运行界面，应该能略微减轻写单元测试时，痛苦的心情吧
JavaScript第 59 期
monitor
收集页面上的用户行为和报错信息的轻量级前端库。我问了下项目维护者，信息展示平台和后端服务还未开源，还需要等公司定开源协议。那就先看下前端的功能吧：- 请求错误和代码报错上传- 收集用户点击、跳转行为- 支持 React、Vue、微信小程序
JavaScript第 59 期
node-jvm
用 Node.js 实现 JVM 的项目。代码简洁易懂，而且 examples 目录下有运行 Java 代码的例子和所需文件
JavaScript第 58 期
cloudbase-framework
腾讯开源的云原生一体化部署工具。一键将项目部署上云，不限制框架和语言
JavaScript第 58 期
hearthstone-battlegrounds-tools
暴雪炉石传说游戏的记牌插件。不懂编程的小伙伴拿去用就好了，支持 Windows 和 macOS 系统。开发者的话，这是一整套完整的 Electronjs 开发流程，从多个渲染进程的管理、不同平台的差异化处理、版本的控制与发布等方面都做了细致的封装，学起来吧。功能上她还具有以下特性：- 🌴 当天战绩统计，历史战绩查询- 🎉 统计你所使用过的英雄，自动计算每个英雄的平均排名、选择率- 🙈 选择英雄时展示可选英雄的大数据选择率、平均排名等- 🃏 对局信息记录，记录对局过的对手阵容- ✈️ 一键拔线（可怕）- 等等
JavaScript第 58 期
Multiavatar
生成人物头像的 JS 库。支持随机生成一个好看、独特、多文化的头像
JavaScript第 58 期
newbee-mall-vue3-app
基于 Vue 3.0 技术栈的电商网站前端开源项目。它麻雀虽小五脏俱全，包含模块：首页、类型分类、搜索、地址管理、登录注册等等，该有的基本上都有涉及到。对新手友好，在熟悉 Vue 3.x 的朋友也可以来看看
JavaScript第 58 期
X6
AntV 旗下的图编辑引擎。提供了开箱即用的交互组件和简单易用的节点定制能力，从而能够快速完成流程图、DAG 图、ER 图等图应用。示例代码：```javascript import { Graph } from '@antv/x6';const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#fffbe6', // 设置画布背景颜色},grid: {size: 10, // 网格大小 10px visible: true, // 渲染网格背景},});```
JavaScript第 57 期
Ant-Forest
基于 Auto.js 的蚂蚁森林能量自动收获脚本。它是个“绿色环保”的项目，我能从中感受到满满的爱和想把它做好的决心！来看看作者开发 Ant-Forest 时解决了哪些难题：1. 能量球识别无法使用控件信息（使用基于霍夫变换的图像识别）2. 脚本执行逻辑易被打断（使用事件监听及扩展模块增强鲁棒性）3. 每次只能运行一次（完善的复查及定时循环功能）4. 不同设备分辨率及屏幕比例不同（使用等比缩放/定宽缩放等进行适配）
JavaScript第 57 期
h5-Dooring
一款功能齐全的 H5 页面可视化配置平台。让你通过可视化的方式制作出 H5 页面，技术栈以 React 为主，后台采用 Node.js 实现。虽然网上有很多这种工具，但本项目免费开源、功能齐全值得一试
JavaScript第 57 期
tui.image-editor
功能齐全的图片编辑器。支持图片剪裁、旋转、涂鸦等功能，实现了 Vue 和 React 封装的组件，便于整合进你的项目
JavaScript第 57 期
windows95
基于 Electron 实现的 Windows 95 操作系统。它实现了该操作系统下的所有东西，对！所有！想体验下 Windows 95 版的扫雷吗？下载安装即可
JavaScript第 57 期
x-spreadsheet
基于 JavaScript 实现的轻量级 Web 电子表格库。它功能齐全，包含表格的基本操作和函数等，还有详细的中文文档，[在线尝试](https://myliang.github.io/x-spreadsheet/)
JavaScript第 56 期
AdminLTE
基于 Bootstrap 4.5 和 jQuery 的管理后台模板
JavaScript第 56 期
blockly
不会编程也可以写代码，通过拖拽模块自动生成代码的 Web 编辑器。谷歌开源的一个可视化编程的前端项目，支持自动生成：Python、JavaScript、PHP 等编程语言的代码，在线尝试的地址网络不好，可以通过 `npm install blockly` 安装后使用和学习
JavaScript第 56 期
lucky-canvas
一个基于 Vue 的大转盘/九宫格抽奖插件。[在线尝试](https://100px.net/demo/wheel/ymc.html)，特性：- 可自由配置奖品、中奖概率等- 支持同步、异步式抽奖- 适配移动端- 等等
JavaScript第 56 期
piano
基于 Omi 和 Omi Snippets 构建的钢琴应用。你不需要懂乐理知识，仅用键盘即可弹奏简单而熟悉的音乐，也借此项目感谢音乐和编程的陪伴！也致敬各位奋斗于 996 的代码家和打工人，音乐不曾辜负任何人，正如 Leehom Wang 歌曲中唱到：如果世界太危险，只有音乐最安全，带着我进梦里面，让歌词都实现！上面这段是作者写的推荐语，我本来想从项目的角度再夸下这个项目，但我放弃了。虽然我之前推荐过的那个钢琴项目弹的比这个要好听，但我更喜欢这个项目。因为我从他的项目中感受到满满敬意和“爱”，致敬每一位奋斗的“代码家”，HG 爱你们。[在线尝试](http://wscats.gitee.io/piano/build/)，示例代码：```javascript playSong(song) {this.setSong([...song])let offset = 0 let time = 0 let playSong = async () => {// 右边是从外部来中断递归if (offset 0) {switch (typeof song[offset]) {// 简谱2演奏方法 根据 ++12345--6. 简单旋律情况case 'string':let letters = song[offset].match(/[0-9]/g)switch (letters.length) {case 1:time = this.handleString(song, offset)break default:time = this.handleStrings(song, offset)break}break// 简谱1演奏方法 根据 CDEFGAB，复杂旋律情况，比如有和弦case 'object':console.log(song[offset]['note'])time = song[offset]['time'];this.playNote(song[offset]['note'])break;case 'number':// 休止符switch (song[offset]) {case 0:time = 1000 break}break}await new Promise((resolve) => {let timer = setTimeout(() => {clearInterval(timer)resolve()}, time)})offset++// 自定义事件，跟下面底部的音符自动跳动结合this.add()playSong()} else {// 暂停播放clearTimeout(this.timer)this.store.data.song = []this.store.data.count = 0 return}}playSong()}```
JavaScript第 56 期
screenity
一个强大的屏幕录制和标注的 Chrome 插件。特性：- 🎥 可以录制任何应用的内容，包含“色相头”- ✏️ 在屏幕上的任何地方，添加文本和箭头等注释- 👀 突出你的点击操作、光标- 💾 支持导出为 mp4、gif 等常用格式- ✂️ 修剪或删除录像
JavaScript第 55 期
AnotherRedisDesktopManager
一款支持多语言、多平台的 redis 桌面管理工具。对比目前其它同类型工具，它拥有更丰富的功能、更高的稳定性和性能，支持集群等功能
暂无截图
JavaScript第 55 期
beeplay
让你可以用 JS 写一首“歌”的库。[在线尝试](http://watilde.github.io/beeplay/)，实例代码：```javascript var beeplay = require('beeplay')beeplay().play(null, 2).play('D#5', 1/4).play('E5', 1/4).play('F#5', 1/2).play('B5', 1/2).play('D#5', 1/4).play('E5', 1/4).play('F#5', 1/4).play('B5', 1/4).play('C#6', 1/4).play('D#6', 1/4).play('C#6', 1/4).play('A#5', 1/4).play('B5', 1/2).play('F#5', 1/2).play('D#5', 1/4).play('E5', 1/4).play('F#5', 1/2).play('B5', 1/2).play('C#6', 1/4).play('A#5', 1/4).play('B5', 1/4).play('C#6', 1/4).play('E6', 1/4).play('D#6', 1/4).play('E6', 1/4).play('C#6', 1/4);```
JavaScript第 55 期
Bilibili-Evolved
哔哩哔哩增强浏览器插件。安装插件后可支持：下载视频、删除广告、夜间模式等
JavaScript第 55 期
vant
由有赞前端团队开源的移动端组件库。目前官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。有完善的中英文文档和示例，60+ 高质量组件，90%+ 单元测试覆盖率，持续维护 4 年以上
JavaScript第 55 期
zooming
纯 JS 实现支持移动端的图像缩放库
JavaScript第 54 期
IconPark
该开源库提供了 1200+ 高质量图标，还有一个界面便于定制图标。强大之处是可以通过改变一个 SVG 文件的属性来变换出多种主题，支持导出 SVG、PNG、Vue 和 React 图标组件等。极大的方便了设计师和开发者，让他们有更多时间逛 HG 了
JavaScript第 54 期
mind-elixir-core
一款免费开源的思维导图 JS 库。[在线尝试](https://mindelixir.ink/#/)
JavaScript第 54 期
next
一套企业级中后台 UI 解决方案，致力于解决设计师与前端在工作协同、产品体验一致性、开发效率方面的问题。就是设计师修改颜色之类的，可以生成一个 NPM 主题包，前端拿到这个包就可以直接还原设计师的设计
JavaScript第 54 期
tesseract.js
支持多种语言的文字识别的 JS 库，能够方便、准确的把图片中的文字解析提取出来（就能复制了）。基于 Tesseract OCR 引擎实现的 JS 版本，方便前端实现文字识别功能和在浏览器中直接使用。[在线尝试](https://tesseract.projectnaptha.com/)
JavaScript第 53 期
genal-chat
适合前端新手学习的‘星空’聊天室项目。采用 Vue + socket.io 结合 TypeScript 语法构建，界面炫酷、良好的代码规范、支持群聊和好友搜索等功能
JavaScript第 53 期
jizhi
中国风新标签页的 Chrome/Firefox 插件。它将在新标签页上展示中国传统色的层叠波浪动画效果，搭配经典诗词
JavaScript第 53 期
MazeBattles.com
使用 Node.js 和 Socket.io 实现的在线迷宫游戏。入口在左上角出口在右下角，通过 [a][w][s][d] 按键移动位置。支持多人和单人两种模式，点击 “Show Solution” 可展示迷宫的解（BFS 算法实现）。[在线试玩](http://www.mazebattles.com/)
JavaScript第 53 期
remote-browser
实现用 JavaScript 语言控制 Chrome 和 Firefox 浏览器的库。可轻松实现自动化测试、抓取数据等功能
JavaScript第 53 期
star-history
展示 GitHub 项目 Star 历史的在线工具。支持多个项目展示在同一个图表上，效果如下图：
暂无截图
JavaScript第 52 期
apidoc
根据代码中的注释生成 RESTful 风格的 API 文档。注释示例：```/*** @api {get} /user/:id Request User information* @apiName GetUser* @apiGroup User** @apiParam {Number} id User's unique ID.** @apiSuccess {String} firstname Firstname of the User.* @apiSuccess {String} lastname Lastname of the User.*/```
JavaScript第 52 期
chrome-extensions-searchReplace
一款搜索并且替换文本的谷歌插件。在做产品 PPT 的时候，需要对某些个页面中的一些名词进行统一替换，这个插件就是为了解决这个问题而诞生的。同时作者也是调研了其他类似功能的插件，它们都包含或多或少的问题，最终作者自己动手做了这个项目。可以说这款替换插件应该就是你最终的选择了
JavaScript第 52 期
leetcode-cli
LeetCode 的命令行工具。之前我们推荐过命令行斗地主、划水逛社区等，真正努力的人用命令行来刷算法题！我颤抖了
JavaScript第 52 期
mongo-express
使用 Node.js、Express 和 Bootstrap3 编写的 MongoDB 管理平台
JavaScript第 52 期
Zettlr
开源免费支持多种操作系统的 Markdown 编辑器。如果你想尝试一款新的 Markdown 编辑器，它或许能满足你对编辑器所有想法，如果还不够那就自己动手增加吧
JavaScript第 51 期
brick-design
基于 React 组件的可视化拖拽、搭建页面的代码生成工具。所见即所得，可以完美还原 UI 设计搞，并支持多款型号手机（可配置）和 PC 效果展示，模板功能可以使你分享你的页面或者页面中局部任何部分组件组合，减少相似页面的重复操作。效果如下：
JavaScript第 51 期
elevator.js
一个 back to top 返回顶部的插件。如他的名字一样，网页在返回顶部过程中像电梯向上运行，当页面返回到顶部时，会有电梯“到达”的提示音。叮~页面已到达顶部
JavaScript第 51 期
mongood
MongoDB 图形化的管理工具。特性：- 基于微软 Fluent UI，支持自动黑暗模式- 支持完整的 Mongo-shell 数据类型和查询语法，利用索引实现的自动查询和排序- 支持 Json 数据库模式，既可用于 Server 也可用于 Client
JavaScript第 51 期
perfume.js
用于测量第一个 dom 生成的时间、用户最早可操作时间和组件的生命周期性能的库。示例代码：```javascript perfume.start('fibonacci');fibonacci(400);perfume.end('fibonacci');// Perfume.js: fibonacci 0.14 ms```
JavaScript第 51 期
react-trello
任务状态管理面板组件。实现了拖拽方式管理任务状态，点击即可编辑任务内容
暂无截图
JavaScript第 51 期
TimeCat
一款 JS 的网页录屏工具。参考了游戏录像的原理而实现的渲染引擎，生成的录像文件只有传统视频的百分之一！还可以在录制语音的同时自动生成字幕，导出的视频文件可以跨端播放。目前已经开发一段时间，后续还将实现更多有意思的功能，欢迎持续关注。[在线预览](https://oct16.gitee.io/static/timeCatReplay/antd.html)
JavaScript第 50 期
avataaars-generator
基于 React 实现的卡通头像生成工具。[在线尝试](https://getavataaars.com/)
JavaScript第 50 期
ce
一个轻量级、功能强大的电子表格库。轻松实现复杂数据的表格管理，支持 JS 数组、JSON、CSV 等数据，并且可以实现 excel 文件的直接复制和粘贴。示例代码：```javascript var data = [['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],];jexcel(document.getElementById('spreadsheet'), {data:data,columns: [{ type: 'text', title:'Car', width:120 },{ type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },{ type: 'calendar', title:'Available', width:200 },{ type: 'image', title:'Photo', width:120 },{ type: 'checkbox', title:'Stock', width:80 },{ type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },{ type: 'color', width:100, render:'square', }]});```
JavaScript第 50 期
form-create
一个可以通过 JSON 自动生成具有动态渲染、数据收集、验证和提交功能的表单生成器。结合内置多种常用表单组件和自定义组件，轻松搞定复杂的表单，支持 iview、element-ui、and-design-vue
JavaScript第 50 期
HueJumper2k
用 JS 实现的 2KB 大小的 3D 赛车游戏。[在线试试](https://killedbyapixel.itch.io/hue-jumper)
JavaScript第 50 期
typical
零依赖、仅 400 字节的输入动画库。示例代码：```javascript import {type,type as loop};const steps = [1000, 'Ready', 1000, 'Set', 1000, 'Go'];type(element, ...steps, loop);```
JavaScript第 49 期
chroma.js
一款极小、零依赖用于各种颜色转换的 JS 库，帮助前端把颜色操作于股掌之间。示例代码：```javascript chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6)```
JavaScript第 49 期
DoraCMS
基于 Nodejs + eggjs + Mongodb 编写的内容管理系统。项目结构清晰、易于拓展，适合前端开发工程师做二次开发
JavaScript第 49 期
falcon
一款免费、开源的 SQL 可视化编辑器，具有查询数据、可视化等功能。 支持 Windows、Mac、Linux 操作系统，能够链接 MySQL、PostgreSQL、SQLite 等多种数据库，并把查询结果通过不同形式图表展示。[下载地址](https://github.com/plotly/falcon/releases)
JavaScript第 49 期
gitstalk
这是一个使用 Vue.js 开发的网页，可以看到某一个 GitHub 用户最近干了些什么。比如 Star、Push commit、Fork 之类的操作，还会显示这个 GitHub 用户的一些信息。[网站](https://gitstalk.netlify.com/)
JavaScript第 49 期
refined-github
一款 GitHub 的浏览器插件，支持 Chrome 和 Firefox。这款插件给 GitHub 增加了非常多强大的功能，比如一键合并冲突修复、等待 check 成功后合并 PR、在代码中链接到 Issue/PR 和 url 等，在 README 中有详细的功能列表，可以时常学习一下提高你的生产力
JavaScript第 48 期
G2
一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。G2 是整个蚂蚁金服 AntV 可视化解决方案中的一个环节，主要针对在高交互、高扩展的二维统计图表
JavaScript第 48 期
gitmoji-cli
Git 交互式客户端，方便在提交信息中增加 emoji 表情。终于知道别人的提交信息为什么会有表情了，效果如下图：
JavaScript第 48 期
honeyed-words-generator
一个“土味情话”在线生成项目。支持生成图片、分享二维码，[在线访问](https://works.yangerxiao.com/honeyed-words-generator/)。你们先看，我看完被撩到了我先去静静
JavaScript第 48 期
panolens.js
基于 WebGL 的全景查看库。效果如下：
JavaScript第 47 期
breathe-relaxer
一个在线放松网站的项目。带上耳机，[点开网站](https://works.yangerxiao.com/breathe-relaxer/)然后深呼吸
JavaScript第 47 期
image-compress-without-backend
一个纯前端在线图片压缩小工具。即无需上传照片到服务器，一切都在浏览器端完成，快速而高效。非常适用于图片压缩后质量要求不是很高的场景，比如：移动端图片展示等
JavaScript第 47 期
qier-progress
这是一个用于缓解用户焦虑，给予用户请求回馈的顶部进度条。该项目使用 ts 重构了万星 star 的 nprogress 项目，打包体积更小、且支持了多彩模式、自定义高度和颜色等，最重要的是有良好的类型注解。该项目结构简单、代码量也比较少，非常利于学习 ts 相关用法和作为实战项目。示例代码：```javascript const qprogress = new QProgress()qprogress.start()qprogress.finish()```
JavaScript第 47 期
showdoc
一款基于 JavaScript 实现的开源在线文档工具。支持：多端编辑查看、权限管理、文档导出、Markdown 语法等，功能虽不多但已足够用了。推荐自建自用、小团队内部使用
暂无截图
JavaScript第 47 期
wx-promise-pro
支持 finnaly、typescript 的微信小程序异步解决方案。特性：- 方便集成：一处引用，处处使用- 把微信小程序所有异步 API promise 化并挂在到 wx.pro 对象下- 支持 ES2018 finally 特性- 支持 TypeScript 开发```javascript import { promisifyAll, promisify } from 'wx-promise-pro'// promisify all wx‘s api promisifyAll()// promisify single api promisify(wx.getSystemInfo)().then(console.log)```
暂无截图
JavaScript第 46 期
fe-interview
项目作者总结关于准备前端面试的复习汇总项目，项目不定时更新。这不仅仅是一份用于求职面试的攻略，也是一份前端小伙伴用来检视自己，实现突破的宝典。希望通过这个指南，大家可以打通自己的任督二脉，在前端的路上更进一步
JavaScript第 46 期
gods-pen
一个在线生成 H5 页面的平台。用户无需掌握复杂的编程技术，通过简单拖拽、少量配置即可快速制作精美的页面，可用于营销场景下的页面制作。同时，也为开发者提供了完备的编程接入能力，通过脚本和组件的形式获得强大的组件行为和交互控制能力
JavaScript第 46 期
helux
一个兼容 Redux 生态的渐进式和高性能状态管理方案。基于依赖标记、引用收集和状态分发原理工作，通过独有的实例上下文机制增强组件能力，抹平类组件和函数组件的生命周期函数写法差异。内置 computed、watch、setup、event 等高级特性，让逻辑复用更优雅、组件表现形式更丰富、应用架构更稳健
JavaScript第 46 期
p5.js
一个 JavaScript 创意编程程式库，可以用来绘图、实现艺术创意等。使用该库只需要会 JS 代码就可以用它画出许多有趣的东西，文档齐全能够快速上手，还有在线编辑器。[官网](https://p5js.org/zh-Hans/)，示例代码：```javascript function setup() {createCanvas(640, 480);}function draw() {if (mouseIsPressed) {fill(0);} else {fill(255);}ellipse(mouseX, mouseY, 80, 80);}```
JavaScript第 46 期
vue-monoplasty-slide-verify
基于 Vue2.0+ 的验证码插件。可用于网页注册等需要验证码的地方，滑动式的验证码免于字母验证码的繁琐输入。[在线演示](https://monoplasty.github.io/vue-monoplasty-slide-verify/)，示例代码：```javascript import Vue from 'vue';import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);export default {name: 'App',data(){return {msg: '',}},methods: {onSuccess(){this.msg = 'login success'},onFail(){this.msg = ''},onRefresh(){this.msg = ''}}}```
JavaScript第 45 期
formily
一款面向企业级复杂场景的高性能表单解决方案。特性：- 🚀 高性能，字段分布式渲染，大大减轻 React 渲染压力- 💡 支持 Ant Design/Fusion Next 组件体系- 🎨 JSX 标签化写法/JSON Schema 数据驱动方案无缝迁移过渡- 🏅 副作用逻辑独立管理，涵盖各种复杂联动校验逻辑- 🌯 支持各种表单复杂布局方案
JavaScript第 45 期
hoppscotch
一款基于 Node.js 的免费开源、便捷美观的 API 调试工具。它是调试接口的利器，能够尽快的发现问题提高开发效率。相信体会过 Postman 的同学，看到这个项目的名字就已经跃跃欲试了
JavaScript第 45 期
rc-bullets
基于 CSS3 Animation 使用 React 构建的弹幕组件。[演示地址](http://zerosoul.github.io/rc-bullets)，支持功能：- 管理弹幕：暂停、隐藏、清屏等- 设置弹幕：速度、循环次数、延迟播放、自定义动画类型等```javascript import React, { useEffect, useState } from 'react';import BulletScreen, { StyledBullet } from 'rc-bullets';const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';export default function Demo() {// 弹幕屏幕const [screen, setScreen] = useState(null);// 弹幕内容const [bullet, setBullet] = useState('');useEffect(() => {// 给页面中某个元素初始化弹幕屏幕，一般为一个大区块let s = new BulletScreen('.screen');// or// let s=new BulletScreen(document.querySelector('.screen));setScreen(s);}, []);// 弹幕内容输入事件处理const handleChange = ({ target: { value } }) => {setBullet(value);};// 发送弹幕const handleSend = () => {if (bullet) {// push 纯文本screen.push(bullet);// or 使用 StyledBullet screen.push();// or 还可以这样使用，效果等同使用 StyledBullet 组件screen.push({msg:bullet,head:headUrl,color:"#eee" bgColor:"rgba(2,2,2,.3)"})}};return (发送);}```
JavaScript第 45 期
react-loading
一款轻量、开箱即用并且支持按需加载的 React 动画组件库。示例代码：```javascript import React from 'react';import { DisappearedLoading } from 'react-loadingg';const Container = () => ;export default Container;```
JavaScript第 45 期
react-text-loop
实现文字循环展示的 React 组件
暂无截图
JavaScript第 44 期
FileSaver.js
文件保存的 JavaScript 库，支持多种常见的文件存储格式：xls、txt、png 等。它可以方便的把数据转成文件，然后供用户下载。示例代码：```javascript// 存储文本var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});FileSaver.saveAs(blob, "hello world.txt");```
JavaScript第 44 期
glut
一款用于团队内部 chrome 工具共享的工具，可以理解为 chrome 的小程序。它提供了比页面脚本更多的 API，可是实现更丰富的功能。可以随时在页面打开的小组件，它既可以作为页面的辅助工具或者也可以提供独立的功能。演示如下：
JavaScript第 44 期
kiwi
还在为前端的全球化多语言而发愁吗？可以试试阿里开源的这项目
JavaScript第 44 期
paint
在线体验下油画创作。呈上我的“杰作”：
JavaScript第 44 期
qier-player
一款基于 React 的轻量级在线视频播放器组件，界面简洁、操作流畅具有视频播放器的基础功能。方便你在项目中轻松添加播放器组件，实现视频播放功能。如果你嫌原生 video 功能太少、操作太傻、界面太简陋，那这个播放器就是你的菜。你还能够通过阅读源码学习到关于生命周期执行顺序、父子组件传值的方式、以及如何利用定时器进行一些实时的状态更新的技巧。示例代码：```javascript import React from 'react';import ReactDOM from 'react-dom';import QierPlayer from 'qier-player';ReactDOM.render(, document.getElementById('root'));```
JavaScript第 44 期
svrx
一个易于使用、插件化的前端开发工作台。帮助前端开发人员把折腾开发环境的时间，省下来做更有意义的事。快速开始：1. 安装：`npm install -g @svrx/cli`2. 创建目录：`mkdir example && cd example`3. 创建文件：`echo 'Hello svrx!' > index.html`4. 运行：svrx
JavaScript第 43 期
chart-race-react
一个简单易用的 Bar Chart Race（长条图赛跑动画） React 组件。示例代码：```javascript import ReactDOM from 'react-dom';import BarChart from 'chart-race-react';ReactDOM.render(, document.getElementById('root'));```
JavaScript第 43 期
fiora
一个功能丰富、支持多端的在线聊天室。它界面小清新，支持基本的聊天功能的同时还有好玩的消息朗读功能。项目上基于 TypeScript + React 16.9 代码逻辑清晰、注释较为完善，适合用来学习 node.js、 TypeScript、React 等技术
暂无截图
JavaScript第 43 期
nzh
阿拉伯数字与中文数字相互转化的 JS 库。示例代码如下：```javascript var nzhcn = Nzh.cn; // 使用简体中文, 另外有 Nzh.hk -- 繁体中文nzhcn.encodeS(100111); // 转中文小写 >> 十万零一百一十一nzhcn.encodeB(100111); // 转中文大写 >> 壹拾万零壹佰壹拾壹nzhcn.encodeS("1.23456789e+21"); // 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿nzhcn.toMoney("100111.11"); // 转中文金额 >> 人民币壹拾万零壹佰壹拾壹元壹角壹分```
暂无截图
JavaScript第 43 期
request
JavaScript 简单、易用的 HTTP 请求客户端。示例代码：```javascript const request = require('request');request('https://hellogithub.com', function (error, response, body) {console.error('error:', error); // 如果请求发生错误将被打印console.log('statusCode:', response && response.statusCode); // 输出返回的状态码console.log('body:', body); // 输出返回的 HTML});```
JavaScript第 43 期
SandDance
微软开源的数据可视化库。使用单元可视化，将数据库中的行一对一映射到屏幕中。在进行数据交互时，视图可无缝平滑过渡，展示效果炫酷
JavaScript第 42 期
leonsans
这是一个用 JS 编写的 Sans Serif 半衬线字体。Leon Sans 允许动态更改字体粗细并在 HTML 5 的 Canvas 元素中创建自定义动画、效果或形状，[点击](https://leon-kim.com/)查看动画效果。PS：这个字体是作者来庆祝他刚出生的婴儿 Leon 的哦
JavaScript第 42 期
markdown-nice
能够自定义样式的 Markdown 编辑器。支持内容和自定义样式浏览器中实时保存、上传图片、脚注、公式等，输出的内容可一件复制到微信公众号、知乎、掘金、博客园和 CSDN 等一系列平台。极大的减轻了微信公众号文章的排版和编辑工作
JavaScript第 42 期
marktext
一个简单且优雅的开源 Markdown 编辑器，支持 Linux、macOS 和 Windows [下载地址](https://github.com/marktext/marktext#download-and-install)。功能：- 实时预览（所见即所得）和简洁明了的界面- Markdown 扩展，例如数学表达式和 emoji 表情- 输出 HTML 和 PDF 文件- 各种编辑模式：源代码模式、打字机模式、专注模式- 等等
JavaScript第 42 期
star-battle
一个使用 JavaScript ES6、Canvas 开发的飞船射击类游戏。[在线试玩](https://4ark.me/star-battle/)
JavaScript第 42 期
taro-music
基于 Taro 与网易云音乐 API 开发的网易云音乐小程序。技术栈为 typescript+taro+taro-ui+redux 目前主要是着重小程序端的展示，可以通过项目学习上述几个技术栈的使用和实战，从而能够快速使用 Taro 开发一个属于你自己的小程序，目前已实现的主要功能点如下：- 用户登陆- 我的关注列表- 最近播放列表- 歌曲播放页面- 等等
JavaScript第 41 期
chart.xkcd
手绘风格的 JS 图表库。手绘风格的设计给人一种很可爱的感觉，看了这些图表你会发现数据也可以以萌萌哒的形式展示
JavaScript第 41 期
fullPage.js
通过调用 fullPage 可轻易创建全屏滚动网站（也称为单页网站）。 fullPage 可创建全屏滚动网站，同时也可在网站中添加横向滚动条。适合快速搭建全屏滚动或者拥有视觉差的站点，使得网站看上去更加高端、大气、上档次，示例代码：```javascript Some section Some section Some section Some section```
JavaScript第 41 期
PicGo
基于 electron-vue 实现的桌面图床工具。该工具可以帮助你高效、非常方便地上传图片到网络图床，包括了微博图床、七牛图床、腾讯云 COS、又拍云、GitHub、SM.MS、阿里云OSS、Imgur 等。只要使用快捷键或拖动就可以上传，而且上传成功的图片链接会自动复制到你的剪贴板里，支持 macOS、Windows、Linux 三大系统
JavaScript第 41 期
Valine
一款快速、简洁且高效的无后端的 JS 评论插件。该库使用 LeanCloud API 存储数据，且设计美观、体积小、支持 Markdown 和 Emoji。对于使用 Hexo、Hugo 等静态网页博客主来说，它简直就是福音。通过简单的几步就可以快速的给自己的博客增加评论功能，你还不快来试试
JavaScript第 41 期
webtorrent
基于 JS 的流媒体种子客户端。不需要等待种子中的内容下载完毕，就可以马上播放种子中的内容，且有 Windows、Mac 和 Linux 操作系统的桌面版客户端。还在为等待下载而苦恼吗？有了它即可复制种子链接观看对应的视频内容
JavaScript第 40 期
cdfang-spider
成都房源统计的数据可视化项目。该项目统计了成都开盘以来所有的房源信息，帮助想在成都买房的同学提供一些可视化的数据分析，比房协网官方的数据更直观，分析更透彻。此项目包含了一套完整的源代码，以及详细的项目搭建文档，开发者可以根据搭建文档一步一步搭建这个项目。可以帮助开发者学习前端，后端，数据库端，单元测试，持续集成等全套知识。基于此项目，你可以做任何地区的房源信息可视化，让数据说话
暂无截图
JavaScript第 40 期
javascript-questions
JavaScript 进阶问题列表，包含答案。[中文版阅读](https://github.com/lydiahallie/javascript-questions/blob/master/README-zh_CN.md)
暂无截图
JavaScript第 40 期
licia
比较实用的 JS 工具库，内置了很多可能在工程中经常会用到的工具函数。该库提供 npm 安装，可以很好的融合到现代前端工程的开发中，从而提高开发效率。示例代码：```javascript const uuid = require("licia/uuid");const dateFormat = require("licia/dateFormat");const now = require("licia/now");const randomBytes = require("licia/randomBytes");console.log(randomBytes(5));console.log(uuid());console.log(dateFormat(now(), "yyyy-mm-dd"));```
JavaScript第 40 期
styled-components
如果你是写 react 的开发人员一定不要错过这个库，它使用 ES6 模板字符串完成在 react 中的 css-in-js 的实现，更顺畅地在 React 中写样式。css-in-js 是前端圈中很火的话题，css-in-js 认为样式应该在组件文件中，而不是单独的一个样式文件，这样只是物理上的区分，并不是实际上的组件封装
暂无截图
JavaScript第 40 期
vue-unit-test-with-jest
一个 Vue 的单元测试项目，列出了 Vue 开发时大多需要测试的环节，并附有测试代码及说明文档。现在前端开发的技术越来越多，但是我们只是注意到了开发阶段并没有做好对应的单元测试步骤，我们可以通过这个项目学习如何针对 Vue 项目做单元测试。示例代码：```javascript import { shallowMount, createLocalVue } from '@vue/test-utils'import FilterTest from '@/components/FilterAddWatchTest.vue'...// 测试内容：filter ---- filter 不能通过 wrapper 或者 vm 获取，只能通过组件获取// filter 需要测试函数的所有可能性it('filter test', () => {// console.log(FilterTest.filters)expect(FilterTest.filters.formatText('12345678')).toBe('12...78')expect(FilterTest.filters.formatText('12345')).toBe('12345')expect(FilterTest.filters.formatText()).toBe('')})...```
暂无截图
JavaScript第 40 期
x-build
面向小型项目的脚手架工具，通过终端命令最快在几秒钟初始化项目目录。该库内部集成了 webpack、babel、eslint 等前端常用的工具。通过该项目可以了解脚手架的开发，并且可以熟悉如何在工具中集成 webpack 这对自定义脚手架开发很有帮助
JavaScript第 40 期
zdog
想在你的 Web 应用上应用 3D 图形吗？想用你熟悉的技术实现炫酷的 3D 效果吗？没错 zdog 就是你的首选。这是一款用于用于 Canvas 和 svg 的 JS 3D 渲染引擎，你可以使用它轻松创建扁平化风格的 3D 模型。这个库只有 2800 行代码，并且最小体积为 28KB。并且它还提供了对开发者十分友好的声明式 API，并没有特别复杂的配置只要你会 JS 你就可以使用它。下图都是使用 zdog 完成的作品
暂无截图
JavaScript第 39 期
AutoPiano
自由钢琴（AutoPiano）是利用 HTML5 技术开发的在线钢琴应用。在学习工作之余可以享受钢琴、音乐的美好，支持钢琴曲的自动播放功能、按键提示。让学习钢琴变得简单，谁都可以练成‘钢琴手’，[在线体验](http://www.autopiano.cn/)
暂无截图
JavaScript第 39 期
fe-interview
每天早上 4 个基础前端面试题，助你在前端面试中‘所向披靡’，无人能挡
JavaScript第 39 期
filepond
一个 JavaScript 文件上传库。可以上传拖入的任何内容，具有体积小、上传快、方便的文件管理等特点，从而让用户享受‘丝滑’般的文件上传体验
暂无截图
JavaScript第 39 期
HitUP
一款发现 Top 系列的 Chrome 扩展。它会替换掉浏览器默认的 New Tab 空白页面，助你保持对流行技术趋势的跟进。核心功能是展示 GitHub 上近期最流行的项目，并会围绕 “Find top things” 的主题谨慎添加新特性，让你对新技术和新事物‘了如指掌’
暂无截图
JavaScript第 39 期
wechat-format
公众号文章的排版真是让人头大，还好有这个微信公众号排版编辑器。便捷地把 Markdown 内容转换成微信特定的 HTML 内容，然后粘贴到公众号的编辑后台就完活了。虽然不是特别美观，但是节省了很多时间，[在线尝试](https://lab.lyric.im/wxformat/)
JavaScript第 38 期
ieaseMusic
基于网易云音乐 API 开发的第三方客户端，支持 Linux、Mac OS 系统。成熟的 JS 桌面应用产品，颜值很高，音乐资源丰富
暂无截图
JavaScript第 38 期
practice
使用当下流行的多种不同前端技术栈，实现不同项目的详细教程，教你如何快速上手这些技术。虽然项目名称叫做 `Practice` 但是内容为当前前端最火的框架实践，而且符合生产环境下的开发流程规范，推荐学习
暂无截图
JavaScript第 38 期
ts-utility-plugins
使用原生 TS 构建特效、插件、业务的实践教程项目。脱离各种框架实现原生的特效以及插件
JavaScript第 37 期
emoji-minesweeper
Emoji 符号的扫雷游戏。代码很简短，游戏创意很酷。寥寥 300+ 行代码实现该游戏，简短易于初学者学习
暂无截图
JavaScript第 37 期
leetcode
更加贴近前端的数据结构与算法的库。以 leetcode 作为切入点，详细讲解关于数据结构的方方面面， 并以JavaScript 语言作为解题语言。 后期会加入更多关于前端贴合的内容， 比如：`react fiber` 的实现和链表、`react hooks` 的实现和数组等等- 第一部分：leetcode 经典题目的解析，包括思路、关键点和具体的代码实现- 第二部分：对于数据结构与算法的总结- 第三部分：anki 卡片， 将 leetcode 题目按照一定的方式记录在 anki 中，方便大家记忆
JavaScript第 37 期
squoosh
谷歌开源的图片压缩工具。在保证图片质量的情况下快速压缩图片，支持多种图片格式。6.63M 的图片压缩后为 2.92M，使用起来简单方便
暂无截图
JavaScript第 37 期
xgplayer
由字节跳动西瓜视频开源的带解析器、能节省流量的 HTML5 视频播放器。可以作为 H5 组件、Vue、React 组件单独使用。它根据组件化的原则设计了一个独立的、可分离的 UI 组件。更重要的是，它不仅在 UI 层具有灵活性，而且在功能上也很大胆：它摆脱了视频加载、缓冲和格式支持。在播放器端加载视频、解析视频、转换格式，让不支持分段播放的 MP4 动态支持，这样就无须转换源视频的格式，服务器端也无其他开销。[官网](http://h5player.bytedance.com/)，示例代码：```javascript// 安装：$ npm install xgplayer// 第一步：// 第二步：import Player from 'xgplayer';const player = new Player({id: 'vs',url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'})```
JavaScript第 37 期
zhui
这是一款国风的组件库。好用的组件库千千万，有趣的创意万里挑一
暂无截图
JavaScript第 36 期
griffith
让流式播放变得简单。无论你视频格式是 `mp4` 还是 `hls`，Griffith 都能使用媒体源拓展（MSE）来实现分段加载等功能，提供在线视频播放。示例代码：```javascript// yarn add griffith import Player from 'griffith'const sources = {hd: {play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',},sd: {play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',},}render()```
JavaScript第 36 期
makegirlsmoe_web
动漫角色图片生成工具。支持：选择发色、发型、眼睛、皮肤、微笑、风格等等特征生成二次元图片。自定义生成可爱的二次元头像，二次元界福音。[在线尝试](https://make.girls.moe/#/)
JavaScript第 36 期
ncform
只需要配置相关参数，便可方便生成表单的UI组件，自带校验规则满足日常 90% 的要求。表单是 Web 应用中常见的组件，但是开发表单是一个重体力活，ncform 通过配置便可生成表单，极大的提高了开发效率
JavaScript第 36 期
vscode-leetcode
这是一个可以让用户在 VS Code 编辑器中，练习 LeetCode 习题的插件。支持：查看高票解答、提交答案、测试答案等。提高了刷题效率，助你在校招、社招中杀出重围。上班摸鱼刷题利器
暂无截图
JavaScript第 36 期
Web
前端入门的图文教程，从 0-1 的过程。内容详细，对于新入行前端的同学有很多的帮助
暂无截图
JavaScript第 35 期
ant-design-vue
Ant Design 的 Vue 实现，该项目已经得到 [Ant Design 官方](https://vue.ant.design/docs/vue/introduce-cn/)认可
JavaScript第 35 期
Chart.js
基于 canvas 的可视化库。可用于构建简单的 H5 图表，满足基本的日常可视化需求
JavaScript第 35 期
Gitter
GitHub 的小程序客户端。UI 设计漂亮，可作为小程序和 GitHub 结合的实战项目学习
JavaScript第 35 期
Motrix
免费开源功能齐全的下载工具。技术展采用 Vue + VueX + Element，不仅界面简洁大方而且支持下载 BT、磁力链等资源。如果你受够了下载限速、弹框广告等，就快来 Motrix 享受“纯”下载的平静吧！技术栈适合学习桌面应用开发- 支持 Windows、Linux、macOS- 最高支持 10 个任务同时下载- 单任务最高支持 64 线程下载- 设置上传/下载限速- 移除任务时可同时删除相关文件- 等等
暂无截图
JavaScript第 35 期
rainbow
体积小、易于使用、支持各种编程语言的语法高亮插件。该项目原理是通过正则过滤关键字，然后进行高亮。代码：```javascript// JS关键字判断Rainbow.extend('javascript', [/*** matches $. or $(*/{name: 'selector',pattern: /\$(?=\.|\()/g},{name: 'support',pattern: /\b(window|document)\b/g}...```
JavaScript第 34 期
axial3d
实现了类似 GitHub 404 页面的动画效果。效果有趣，使用场景较多，并且实现了组件化，示例代码：```javascript Demo - Axial3d(function () {var options = {selector: '#axial3d',imgs: [{src: 'https://bestvist.github.io/axial3d/public/demo1/bg.png', left: '50px', top: '10px'},{src: 'https://bestvist.github.io/axial3d/public/demo1/2.png', left: '150px', top: '10px'},{src: 'https://bestvist.github.io/axial3d/public/demo1/3.png', left: '50px', top: '300px'},{src: 'https://bestvist.github.io/axial3d/public/demo1/4.png', left: '300px', top: '300px'}]}var effect = new Axial3d(options);})()```
JavaScript第 34 期
giojs
基于 Three.js 的 Web 3D 地球数据可视化的开源组件库。使用 Gio.js 的网页应用开发者，可以快速地以申明的方式创建自定义的 Web3D 数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。支持静态 Dom、React和微信小程序。具有一下特点：- 易用性 -- 仅使用 4 行 Javascript 即可创建 3D 地球数据可视化模型- 定制化 -- 使用 Gio.js 提供的丰富的 API 来创建自定义样式的 3D 地球- 现代化 -- 基于 Gio.js 构建高交互、跨平台、自适应的现代化 3D 前端应用
JavaScript第 34 期
gridea
静态博客写作客户端，你可以用它来记录你的生活、心情、知识、笔记、创意。使用了 electron 技术，对于学习 Javascript 桌面端开发是一个很好的项目
暂无截图
JavaScript第 34 期
omi
腾讯开源的通用 Web 组件化框架。特点：- 拥有官方 UI 组件库- 使用 omio 可以兼容到 IE8- 设计精巧、兼容性好- 基于 Web Components 标准- 等等```javascript import { render, WeElement, define } from 'omi'define('my-counter', class extends WeElement {static observe = true data = {count: 1}sub = () => {this.data.count--}add = () => {this.data.count++}render() {return (-{this.data.count}+)}})render(, 'body')```
暂无截图
JavaScript第 34 期
RSSHub
轻量、易于扩展的 RSS 生成器，可以给任何奇奇怪怪的内容生成 RSS 订阅源。现已支持丰富的源，详情见[文档](https://docs.rsshub.app/)
JavaScript第 34 期
vConsole
腾讯开源的移动 H5 的控制台开发调试工具，支持查看 console 日志、网络请求、自定义插件等。示例代码：```javascript// init vConsole var vConsole = new VConsole();console.log('Hello world');```
JavaScript第 34 期
weapp-library
提供在线借书功能的开源小程序项目。连接读者与图书馆，实现图书借阅线上化。界面风格良好，功能完整。具有注册登录、图书搜索、书单系统、订单管理等功能。这是一个完整的小程序项目，包括了前后端的开发，并且撰写了完善的文档，适合初学者学习。可以扫描下面的小程序码体验：
JavaScript第 33 期
better-onetab
实用的管理浏览器多标签页面的工具，目前支持 Chrome 以及 FireFox 的扩展。支持标签页储存和标签页分组等功能
JavaScript第 33 期
js2image
将源代码压缩成圣诞树的样子，使用此项目压缩生产环境代码后请注意测试。有兴趣的小伙伴可以尝试扩展出压缩成其它样子，很有意思
JavaScript第 33 期
lint-md
用于检查中文 markdown 编写格式规范的命令行工具。方便集成 CI，支持 API 方法调用。对于矫正 markdown 编写格式来说是一个很好的检查工具，基于 AST 的格式规范检测的代码也可以借鉴和学习
暂无截图
JavaScript第 33 期
swc
基于 Rust 开发的 [Babel](https://github.com/babel/babel) 替代品，速度更快，值得关注
暂无截图
JavaScript第 32 期
hexo
基于 Node.js 快速、简洁且高效的静态博客生成框架。可以使用 hexo 快速生成静态博客，它拥有丰富的[插件库](https://hexo.io/plugins/)、[主题库](https://hexo.io/themes/)。在使用 hexo 的时候也可以自己创建、定制属于自己的主题
暂无截图
JavaScript第 32 期
picojs
200 行实现的面部识别库，[在线示例](https://tkv.io/posts/picojs-intro/demo/)
暂无截图
JavaScript第 32 期
storybook
UI 组件开发测试的环境。你可以使用 React、React Native、Vue、Angular、Ember 开发你的组件，并且可以使用 storybook 提供的众多插件进行测试以及开发。[在线示例](https://storybook.js.org/examples/)
JavaScript第 32 期
three.js
一个知名的 JavaScript 3D 库。随着数据可视化以及 Web AR 的流行，会越来越多使用到 three.js ，尤其是和 Vue/React 前端框架结合使用。官方网站包含丰富的[示例](https://threejs.org/examples/)和全面的[中文文档](https://threejs.org/docs/)，赶快去写几个 demo 熟悉下该库吧
暂无截图
JavaScript第 31 期
33-js-concepts
该项目介绍了每个 Javascript 开发者应该知道的 33 个概念。列举了 Javascript 中非常常见的 33 个概念，对于深入了解 Javascript 语言有很大的帮助。[中文阅读](https://github.com/stephentian/33-js-concepts)
暂无截图
JavaScript第 31 期
chrome-plugin-demo
Chrome 插件开发完整教程，可用来学习插件开发
暂无截图
JavaScript第 31 期
d3
D3 的全称是（Data-Driven Documents），该库提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。该库的使用是数据可视化必须掌握的技术，[入门教程](http://wiki.jikexueyuan.com/project/d3wiki/introduction.html)，[示例 demo](https://github.com/d3/d3/wiki/Gallery)
暂无截图
JavaScript第 31 期
TypeScript-React-Starter
由 Microsoft 创建，该项目详细介绍了如何使用 TS 基于 create-react-app 创建 React 项目模版的步骤。TS 出现使得 JS 具有了强类型语言的严谨性，并且还保留了JS的灵活。React 是目前超火的前端框架，两者的结合非常值得学习
JavaScript第 30 期
ice
让前端开发简单而友好，海量可复用物料，配套桌面工具极速构建前端应用。模板比较多，样式易于定制，物料的概念很好。可用来极速构建中后台应用，[官网](https://alibaba.github.io/ice/iceworks)
JavaScript第 30 期
legoflow
内置最前沿的 WebPack4、Babel7、Gulp4 的构建工具，无需安装复杂的系统环境，更轻、更强、开箱即用的前端工作流客户端
暂无截图
JavaScript第 30 期
thejsway
JavaScript 教程（英文），该教程对新手友好、全面。从编程基础到前端、后端 Web 开发。该教程采用 ES2015 语法编写，还有良好的编程习惯指导。使用 ESLint 、Pretties 工具，并遵循 [AirBnb 风格指南](https://github.com/airbnb/javascript)。每章都有练习，使得获得的技能付诸于事件。最后的一个实战项目将指导你创建[新闻 Web 应用](https://thejsway-publink.herokuapp.com/)
JavaScript第 30 期
v-uploader
基于 Vue2 简洁易用、可批量、拖拽的文件上传插件。该[作者 GitHub 仓库](https://github.com/TerryZ?tab=repositories) 还有很多使用 Vue 开发的组件，想学习编写 Vue 组件的同学可以前去学习、借鉴。[文档及示例](https://terryz.gitee.io/vue/#/upload/demo)，支持功能：- 单文件上传模式带图片预览框- 单文件上传模式预览框模式支持关闭、自定义尺寸、自定义默认展示图片等定制化功能- 批量上传模式支持图片预览、文件拖拽- 健全的上传文件限制，文件类型、文件尺寸、自定义校验等
暂无截图
JavaScript第 29 期
hotkeys-js
一个强健的 Javascript 库用于捕获键盘输入和输入的组合键。它没有依赖，压缩只有 3kb 左右。[在线展示](https://wangchujiang.com/hotkeys/)
JavaScript第 29 期
pacman
基于 HTML5 的吃豆人游戏。核心代码就两个文件，代码有注释、整洁。对于新手来说是个很好的实践项目。[在线试玩](http://passer-by.com/pacman/)
JavaScript第 29 期
react-developer-roadmap
该仓库中的线路图展示了学习 React 的路径，为成为一名 React 开发者指明了方向。[中文](https://github.com/adam-golab/react-developer-roadmap/blob/master/README-CN.md)
JavaScript第 29 期
react-image-process
图片处理的 React 组件。支持压缩、裁剪、加水印、滤镜、获取主色调等功能，[在线示例](https://lijinke666.github.io/react-image-process/)```javascript import React from "react";import ReactDOM from "react-dom";import ReactImageProcess from "react-image-process";const onComplete = data => {console.log("data:", data);};ReactDOM.render(,document.getElementById("root"));```
JavaScript第 28 期
DesktopNaotu
桌面版脑图是基于百度脑图的本地化版本，帮助你在没有互联网环境的情况下，依然可以使用脑图工具。开箱即用，跨平台支持 Windows/Linux/Mac OS。桌面版思维工具，目前 Xmind 使用很多，但是需要收费，对于不常用，要求没有严格可以考虑此项目
JavaScript第 28 期
G6
蚂蚁金服出品的关系数据可视化引擎，开发者可以基于 G6 拓展出属于自己的图分析应用或者图编辑器应用。[官方文档](https://antv.alipay.com/zh-cn/index.html)，示例代码：```javascript import G6 from '@antv/g6';const data = {nodes: [{id: 'node1',x: 100,y: 200},{id: 'node2',x: 300,y: 200}],edges: [{target: 'node2',source: 'node1'}]};const graph = new G6.Graph({container: 'mountNode',width: 500,height: 500});graph.read(data);```
暂无截图
JavaScript第 28 期
taro
一套 React 语法规范的多端开发解决方案。我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、React-Native 等）运行的代码。已经投入到了京东生产环境使用，示例代码如下：```javascript import Taro, { Component } from '@tarojs/taro'import { View, Button } from '@tarojs/components'export default class Index extends Component {constructor () {super(...arguments)this.state = {title: '首页',list: [1, 2, 3]}}.... // 代码来源官网示例}```
暂无截图
JavaScript第 28 期
Web-Notes
现代 Web 开发导论，内容大纲如下：- 基础篇- 进阶篇- 架构优化篇- React 篇- Vue 篇
JavaScript第 27 期
echarts
使用 JavaScript 实现的开源、流行、强大的可视化库。可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器。提供直观、交互丰富、可实现高度个性定制化的数据可视化图表，也可将其封装为任何 MVVM 框架的组件方便适用。[官网](http://echarts.baidu.com/)
JavaScript第 27 期
simpread
让你瞬间进入沉浸式阅读的扩展，还原阅读的本质，提升你的阅读体验。使用它可以为你剔除页面上无关的干扰信息，让用户专注于阅读主要的内容。通过这个项目，还可以学习如何开发 Chrome 扩展
JavaScript第 27 期
v-region
使用 Vue 创建的中国省市区选择组件，组件复用程度高、可直接引入项目中使用。使用场景适用于需要用户选择地址，采用该组件可以提高交互程度。[文档](https://terryz.github.io/vue/#/region/demo)，示例代码：```js// 只显示省份// 显示省市// 显示省市区```
暂无截图
JavaScript第 27 期
whistle
基于 Node.js 实现的跨平台 web 调试代理工具，类似于 Windows 平台上的 Fiddler。主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为 HTTP 代理服务器使用。不同于 Fiddler 通过断点修改请求响应的方式，whistle 采用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现。通过该工具，可以现实复杂的前端环境、生产、开发、bugFix 一键切换。
暂无截图
JavaScript第 26 期
BizCharts
蚂蚁出品的基于 React 的图表库。图表样式丰富、使用方便、易扩展、文档齐全，[官网](https://antv.alipay.com/zh-cn/g2/3.x/index.html)
JavaScript第 26 期
carbon
以美观、整洁的方式，展示你的代码片段。同时提供 SVG、PNG 多种方式展示
暂无截图
JavaScript第 26 期
dayjs
一个轻量的 JavaScript 时间日期处理库。保持和 Moment.js 的 API 设计完全一样。如果你曾经用过 Moment.js，那么你已经知道如何使用 Day.js 了。体积仅有 2kb 是 Moment.js 的轻量化方案，示例代码如下：```javascript dayjs().startOf('month').add(1, 'day').set('year', 2018).format('YYYY-MM-DD HH:mm:ss');```
暂无截图
JavaScript第 26 期
javascript-algorithms
包含了多种基于 JavaScript 的算法与数据结构，[中文](https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md)
JavaScript第 26 期
tui.calendar
功能全面的 JavaScript 日程安排日历。虽然项目依赖了 jQuery，但是对于真实项目来说这样做是可以的。此项目适用于多种场景，炫酷的交互和 UI
JavaScript第 25 期
battle-city
基于 React 的经典坦克大战，[在线试玩](http://shinima.pw/battle-city)。欢迎感兴趣的小伙伴动起手来提交代码加入到这个项目
暂无截图
JavaScript第 25 期
gcoord
一个处理地理坐标的轻型 JS 库。由于处理国内对于地理坐标有特殊的政策，导致从 API 得到的地理坐标放在百度地图或高德地图上会有数百米的偏移，gcoord 可以将坐标在不同坐标系下转换，修正偏移。转换为百度地图坐标系的示例代码：```javascript var result = gcoord.transform([ 116.403988, 39.914266 ], // 经纬度坐标gcoord.WGS84, // 当前坐标系gcoord.BD09 // 目标坐标系);console.log( result ); // [ 116.41661560068297, 39.92196580126834 ]```
JavaScript第 25 期
SVG-Skeleton
通过 SVG 元素去描述去骨骼图的占位元素。支持 JSX 让编写 SVG 无差别化、复用 SVG 片段、类组件化模式。让交互变得更加人性化，适合当下技术流行趋势，2KB 的大小根本不必担心加载问题。示例代码如下：```javascript import SVGSkeleton from 'svg-skeleton';const { h, render } = SVGSkeleton;// 内置 #shining 动画const Item = ();const Page = ( ( ) => {let List = [ ];for ( let i = 0; i ) );}return ({ List });} )( );render( Page, document.body );```
JavaScript第 25 期
vuepress
Vue 官方出品的静态网站生成器。大家的个人博客是不是要折腾一番了？[官方中文文档](https://vuepress.vuejs.org/zh/guide/)
JavaScript第 25 期
zan-proxy
该项目集成了 HTTP 请求转发、模拟响应数据、自定义 DNS 解析等功能。使得可以本地代码调试线上页面，环境再也不是问题。对于处于开发环境“恶劣”的开发者来说是种福音和解脱
JavaScript第 24 期
30-seconds-of-code
精选可以在 30秒 或更短的时间内理解的实用 JavaScript 代码片段集合
JavaScript第 24 期
chrome-music-lab
Chrome 音乐实验室是一个网站，让学习音乐变得更加简单、好玩。完全基于Web端，国内可直接访问、老少皆宜、支持多种乐器，圆你一个音乐梦
暂无截图
JavaScript第 24 期
mpvue
小程序的前端框架。框架基于 Vue.js 核心，修改了 Vue.js 的 runtime 和 compiler 实现。使其可以运行在小程序环境中，为小程序开发引入了整套 Vue.js 开发体验。[5 分钟上手视频](http://mpvue.com/mpvue/quickstart/)- 彻底的组件化开发能力：提高代码复用性- 完整的 Vue.js 开发体验- 方便的 Vuex 数据管理方案：方便构建复杂应用- 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload- 支持使用 npm 外部依赖- 使用 Vue.js 命令行工具 vue-cli 快速初始化项目- H5 代码转换编译成小程序目标代码的能力
暂无截图
JavaScript第 24 期
node-in-debugging
《Node.js 调试指南》作者整理了使用 Node.js 开发这几年的调试经验和思路
暂无截图
JavaScript第 23 期
node-fetch
将 fetch 引入了 node 环境，配合了 node 强大的 http 模块。做到了在不同的 JS 环境中使用一致的API。fetch API 是代替 XMLHttpRequest 的一种全新的解决方案，其简化了 XHR 的复杂步骤，采用了 Promise。示例代码如下：```javascript fetch('/url').then(res => {}).catch(err => {})```
JavaScript第 23 期
prettier
十分方便的代码格式化库。支持如：JavaScript、Flow、TypeScript、CSS、SCSS等编程语言。同时提供了编辑插件，在使用 vscode 开发 Vue 项目时候，使用此插件可以让代码更具有可读性```javascript/*** 格式化之前*/foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());/*** 格式化之后*/foo(reallyLongArg(),omgSoManyParameters(),IShouldRefactorThis(),isThereSeriouslyAnotherOne());```
JavaScript第 23 期
wiki
NodeJS+Git+Markdown 实现轻松搭建 wiki。对于团队内部的知识分享是一个不错的选择。[在线预览](https://docs.requarks.io/wiki)
JavaScript第 22 期
handsontable
强大的开源 HTML5 表格处理工具，适用于中后台的很多业务场景。API 方便、扩展性好、可操作性强，与Execl 等表格处理程序兼容好。并支持非常丰富的操作，如数据绑定、验证、排序及强大的上下文菜单。示例代码如下：```js var data = [["", "Tesla", "Volvo", "Toyota", "Honda"],["2017", 10, 11, 12, 13],["2018", 20, 11, 14, 13],["2019", 30, 15, 12, 13]];var container = document.getElementById('example');var hot = new Handsontable(container, {data: data,rowHeaders: true,colHeaders: true,filters: true,dropdownMenu: true});```
暂无截图
JavaScript第 22 期
learnVue
该项目记录了[染陌](https://github.com/answershuto)学习 Vue.js 源码的过程中的心得、收获。以及对于Vue 框架周边库的个人见解。可以帮助开发人员深入地理解 Vue.js 源码
JavaScript第 22 期
webpack-component-loader
在不借助框架的情况下，实现 Web component 的标准。该项目对于理解组件化的概念很有帮助
JavaScript第 21 期
anyupload
该项目是一款上传插件，使用方便、简单。支持多文件上传、上传速率动态控制、真实进度监控 kb/s、分块生成 MD5、分块上传、MD5 校验、暂停、取消等功能。[在线体验](https://www.threecss.com/AnyUploadClient/)
JavaScript第 21 期
git-point
基于 React Native 开发的非官方开源 GitHub 客户端，功能丰富包含查看项目和用户信息、接收通知、管理Issues 和 PR。支持 Android、iOS，选择对应的客户端[下载使用](https://github.com/gitpoint/git-point/releases)
JavaScript第 21 期
numeric-keyboard
手机数字键盘，包含一个纯键盘 UI 和输入框套件。有纯 JavaScript、React、Vue 三个版本
JavaScript第 21 期
webster
一款可以抓取网页中 AJAX 异步内容的分布式爬虫框架
暂无截图
JavaScript第 21 期
wepy
微信官方的开源项目，该项目是为了让小程序支持组件化开发的框架，特征如下：- 类 Vue 开发风格- 支持自定义组件开发- 支持引入 NPM 包- 等等
暂无截图
JavaScript第 20 期
flowhub
仅 6KB 通过简单的 API & 自由组合的链式写法，轻松订阅管理各类事件流。示例代码如下：```javascript import $hub from 'hub-js';// 定义一个 “test” 监听器$hub.listen('test', ( data ) => {console.log( 'test', data );});setInterval(( ) => {// 发出 “test” 事件$hub.emit('test', { code: 1 });}, 1000);```
暂无截图
JavaScript第 20 期
IDValidator
中国大陆个人身份证号验证，支持 15、18 位身份证号，API 如下：- `isValid` 验证号码是否合法，合法返回 True，不合法返回 False- `getInfo` 号码合法时返回分析信息（地区、出生日期、性别、校验位），不合法返回 False- `makeID` 伪造一个符合校验的 ID
JavaScript第 20 期
livepython
可视化、实时追踪展示 Python 代码
JavaScript第 20 期
nba-go
可以用命令终端查看 NBA 比赛，包括比赛开始时间表、实时比分情况、文字直播（英文）等。终端看 NBA，你才是最潮的。安装命令 `npm install -g nba-go`
JavaScript第 20 期
React-Cnode
适合新手的 React 全家桶项目学习，同时附有作者在开发中的一些[思考](http://www.jianshu.com/p/43c604177c08)
JavaScript第 19 期
emoji
方便快速查找获取 emoji 表情、名称，并且可以复制到任何文本中，另外支持中文搜索 💯 [网站地址](http://emoji.svend.cc/)
JavaScript第 19 期
H5
这是作者的个人项目，功能是可视化编辑、生成手机 H5 页面的单页应用 WebApp。该项目是一个全栈项目，具有前后端完整服务。并且项目结构清晰。后端服务具有控制器，模型，路由，前端服务具有组件，并且使用 Vuex 做状态管理，麻雀虽小五脏俱全
暂无截图
JavaScript第 19 期
project-guidelines
JavaScript 项目规范，[中文](https://github.com/wearehive/project-guidelines/blob/master/README-zh.md)
JavaScript第 19 期
SelectMenu
基于 jQuery 1.x 库的多样化的下拉菜单插件，源码具有中文注释，对于学习 jQuery 插件有帮助。示例代码如下：```javascript var data = [{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}];//initialize selectmenu$('#btnDemo').selectMenu({showField : 'desc',keyField : 'id',data : data});```
JavaScript第 18 期
flatpickr
扁平化的日期选择组件，项目源码使用 TypeScript 编写，可以学习使用 Typescript 编写 JS 插件，Typescript 语言的好处是：可以在多人协作中避免一些变量类型错误的问题，从而提高效率。使用示例代码：```javascript// ConnonJS 方式引入const flatpickr = require("flatpickr");flatpickr("#myID", {});flatpickr(".myClass", {});// jQuery 方式引入$(".selector").flatpickr(optional_config);```
JavaScript第 18 期
puppeteer
Google Chrome 团队开源的面向 Node.js 的，基于 DevTools 协议的远程 Headless Chrome 控制库，它可以生成网页截图、PDF、抓取单页应用与网页内容、进行自动化表单提交、界面测试与模拟键盘输入等功能。示例代码如下：```javascript// 访问 https://example.com 并将截图保存为 example.png const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://example.com');await page.screenshot({path: 'example.png'});await browser.close();})();```
JavaScript第 18 期
SelectPage
简洁优雅而功能强大的选择器，使用简单，适应各种UI环境，功能强大，丰富的参数和回调函数。它包含了 autocomplete、ajax 数据源、多选择 Tag、i18n 国际化，结果列表分页展示，键盘快捷操作等```javascript//defined a array, the data returned at the server side is also used that format：//Array[{Object},{...}]var data = [{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}];//init SelectPage$('#selectpage').selectPage({showField : 'desc',keyField : 'id',data : data});```
JavaScript第 18 期
vue-3d-model
展示三维模型的 Vue 组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，目前支持 obj、stl、dae 和 json 格式的模型，示例代码：```vue import { ModelObj } from 'vue-3d-model'export default {components: { ModelObj }}```
JavaScript第 18 期
weweChat
微信的第三方客户端。在完整实现 Web 微信功能的基础上，新增并优化部分功能，重设计整体 UI，提供更好的体验。Mac 安装命令：`brew cask install wewechat`
JavaScript第 17 期
gka
简单、高效的帧动画生成工具，图片处理工具。- 一键式：图片文件批量序列化重命名，生成帧动画文件，支持预览- 性能佳：支持相同帧图片复用✓，图片空白裁剪✓，合图模式✓，图片压缩✓- 多模板：内置多种文件输出模板，支持自定义模板
JavaScript第 17 期
parrot-mocker-web
小巧的 mock 服务器，配合 Chrome 插件可以轻松地拦截或 mock 页面上的 xhr/jsonp/fetch 请求。不需要侵入页面本身代码，让前端同学在后端接口没有 ready 或者难以模拟数据的时候，继续开心地开发玩耍
JavaScript第 17 期
sweetalert
纯 JS 写成的 alert 组件，很多公司都在使用的项目。源代码使用了 ES6 进行了重构，使得项目结构更加清晰。可以通过学习其项目结构可以更好的了解 JS 组件的文件结构，分析其源码可以学习如何使用原生 JS 操作 DOM 的高级技巧
JavaScript第 17 期
trust
一个合作博弈论的互动讲解手册，[中文版在线试玩](https://www.sekai.co/trust/)
暂无截图
JavaScript第 17 期
wtfjs
JavaScript 有趣和棘手（坑爹？）的示例
JavaScript第 16 期
APlayer
漂亮的 HTML5 音乐播放器
JavaScript第 16 期
docker-dashboard
基于控制台的 docker 工具，代码简单易读，可以做为学习 Node.js 的实践项目
JavaScript第 16 期
DPlayer
可爱的弹幕视频播放器
暂无截图
JavaScript第 16 期
GifW00t
纯 JavaScript 写的 Web 录像插件，可以用来实现网页在线游戏回放、反馈网站 bug、演示用途等，实用举例：- [Packman 游戏](http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html)- [Helicopter 游戏](http://s3-us-west-2.amazonaws.com/anigif100/examples/helicopter/index.html)- [在线画板](http://s3-us-west-2.amazonaws.com/anigif100/examples/paint/paint.html)
暂无截图
JavaScript第 16 期
mvvm
剖析 vue 实现原理，了解 vue 的双向数据绑定原理以及核心代码模块，自己动手实现简易版 mvvm
JavaScript第 15 期
font-spider
字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩
JavaScript第 15 期
slick
基于 jQuery 的触摸式幻灯片插件。支持动态增加、筛选、轮播、自动播放、延迟加载等功能，[中文官网](https://www.slickjs.cn/)
暂无截图
JavaScript第 15 期
veneno
一个基于 Node.js 编写的 web 安全漏洞自动化扫描框架
暂无截图
JavaScript第 15 期
xdomain
纯 JavaScript 实现 CROS 的库，[在线示例](http://jpillora.com/xdomain/)
JavaScript第 14 期
BrowserQuest
Mozilla 开源的多人在线角色扮演游戏项目
暂无截图
JavaScript第 14 期
deep-into-node
深入理解 Node.js 的核心思想与源码分析
JavaScript第 14 期
Rental
一款租房 APP，基于 Node.js 爬虫，爬取 58 同城租房信息，并用地图进行可视化展示，方便用户获取周围租房信息
JavaScript第 13 期
cmder
Windows 控制台模拟器，运行效果如下：
暂无截图
JavaScript第 13 期
element
一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。[官网](http://element.eleme.io/#/zh-CN)
JavaScript第 13 期
gifify
可以选择视频文件的某一时间间隔做成 gif 动图
暂无截图
JavaScript第 13 期
js-stack-from-scratch
从零开始构建 JavaScript 技术栈（中文版）
暂无截图
JavaScript第 13 期
typescript-tutorial
TypeScript 入门教程
JavaScript第 13 期
Vue2.0LOL
Vue2.0 版英雄联盟助手
JavaScript第 12 期
octotree
为 GitHub 和 GitLab 网站，提供直观地显示项目目录结构的浏览器插件，效果如下：
暂无截图
JavaScript第 12 期
screenfull
极小、跨平台的 JavaScript 全屏插件，[在线 demo](https://sindresorhus.com/screenfull.js/)
暂无截图
JavaScript第 12 期
standard
统一 JavaScript，只需一种样式，[中文](https://github.com/feross/standard/blob/master/docs/README-zhtw.md)
JavaScript第 12 期
vue2-elm
基于 vue2 + vuex 构建一个大型单页面应用，此项目大大小小共 45 个页面，涉及注册、登录、商品展示、购物车、下单等等，是一个完整的流程，
JavaScript第 11 期
react-tetris
逼真的俄罗斯方块（非常逼真、强大！），详细的技术介绍，[在线试玩](https://chvin.github.io/react-tetris/?lan=zh)
暂无截图
JavaScript第 10 期
flv.js
使用纯 JavaScript 写的 HTML5 Flash 视频（flv）播放器，示例代码如下：```javascript if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://example.com/flv/video.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}```
暂无截图
JavaScript第 10 期
iview
iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。特性：- 高质量、功能丰富- 友好的 API，自由灵活地使用空间- 事无巨细的文档- 细致、漂亮的 UI- 使用单文件的 Vue 组件化开发模式- 基于 npm + webpack + babel 开发，支持 ES2015
暂无截图
JavaScript第 9 期
N-blog
面向新手的 Node.js 教程，该教程讲述了 Node.js 基本知识点，同时结合搭建一个多人博客的实战，从零基础到实际开发，由浅到深帮助新手入门 Node.js 这门语言
暂无截图
JavaScript第 9 期
pomelo
Pomelo 网易开源的一个 Node.js 游戏服务器框架，[Demo](http://pomelo.netease.com/demo.html)
JavaScript第 9 期
vue-hackernews-2.0
这是一个 Vue2.0 示例，克隆 [Hacker News](https://news.ycombinator.com/) 网站（我感觉比原站好看多了😅）
JavaScript第 8 期
atrament
极小的 JavaScript 画板，[在线演示](http://fiala.uk/atrament.js/demo/)
暂无截图
JavaScript第 8 期
incubator-weex
移动端，跨平台前端框架，[详细的中文档](https://weex-project.io/cn/guide/)
JavaScript第 7 期
clipboard.js
实现了点击文本内容的 JavaScript 插件，优点：最新、极小、无任依赖、使用简单方便。[在线文档](https://clipboardjs.com)
JavaScript第 7 期
nodeclub
Nodeclub 是使用 Node.js 和 MongoDB 开发的社区系统，[社区地址](https://cnodejs.org/)
暂无截图
JavaScript第 6 期
nodeppt
这可能是迄今为止最好的网页版演示库，[在线演示](http://qdemo.sinaapp.com/)
JavaScript第 6 期
vue-sui-demo
这是一个用 Vue 和 SUI-Mobile 写的移动端 Demo，可以用来学习 Vue.js。[项目线上预览](https://eteplus.github.io/vue-sui-demo/)，效果图如下：
JavaScript第 5 期
share.js
一键分享到微博、QQ 空间、QQ 好友、微信、腾讯微博、豆瓣等社交网站的 JavaScript 项目。[在线演示](http://overtrue.me/share.js/)
JavaScript第 4 期
zhihudaily-vue
用 Vue.js 写的知乎日报手机 Web 版，需打开 chrome 浏览器的手机模拟功能，来获得比较好的浏览效果。访问展示图如下：
JavaScript第 4 期
zingtouch
支持移动端各种触摸动作包含：转动、挥动、滑动等动作的库，[官方网站](https://zingchart.github.io/zingtouch/)，展示图如下：
JavaScript第 3 期
editor.md
是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。[在线尝试](http://lab.lepture.com/editor/)，使用展示如图：
JavaScript第 3 期
OS.js
JavaScript 写的基于浏览器上的桌面操作系统。[在线演示](https://demo.os-js.org/)，使用展示如图：
暂无截图
JavaScript第 2 期
ant-motion
阿里开源的项目，一套 React 框架动效解决方案，可以帮助开发者，更容易的在项目中使用动效。同时可以方便快捷地制作一个公司的介绍页，[在线演示](https://motion.ant.design/)
JavaScript第 2 期
jquery-weui
可能是最好用 WeUI 版本，展示效果如下：
JavaScript第 2 期
listen1_desktop
Listen 1 让你用一个网页就能听到多个网站的在线音乐，支持各种平台。如图：
JavaScript第 2 期
ssbc
Python Django 写的种子搜索网站——手撕包菜，如图：
暂无截图
JavaScript第 2 期
waitForImages
背景加载完事件，示例代码：```html$('body').bgLoaded({afterLoaded : function() {alert('Background image done loading');}});```
JavaScript第 2 期
wechat-h5-boilerplate
为腾讯微信优化的 HTML5 动效模板，帮助你快速构建全屏滚动型 HTML5 页面，[示例](https://panteng.github.io/wechat-h5-boilerplate/)
JavaScript第 1 期
activate-power-mode
爆炸输入效果，[在线演示](http://0xabcdef.com/activate-power-mode/)
JavaScript第 1 期
ant-design
阿里开源的一套企业级的 UI 设计语言和 React 实现。[中文文档](https://ant.design/docs/react/introduce-cn)，样式偏向于后端，展示效果十分漂亮
JavaScript第 1 期
VeryNginx
一个功能强大而对人类友好的 Nginx 扩展程序。[VeryNginx 文档](https://github.com/alexazhou/VeryNginx/blob/master/readme_zh.md)