前端开发工具和网站

电脑环境

• 前端装机工具指南 window 真香版 - 掘金 (juejin.cn)

• https://hilanmiao.github.io/standards-recommendations/guide/#%E4%BB%8B%E7%BB%8D

编辑器或者 IDE

VS Code

介绍

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。前端最流行的编辑器

• github

  • https://github.com/microsoft/vscode

• 官网

  • code.visualstudio.com

• 文档

• 功能

  • 集成 Git

• 功能文档

VS Code 插件

• vscode-drawio：在线绘图

  • 功能

    • draw.io 是一个支持在线绘图的网站工具，因其界面简洁直观，功能丰富强大而受到不少用户喜爱。

    • draw.io 还支持将图形保存到 Google Drive、One Drive、GitHub 仓库 等云端硬盘上，让用户可以随时进行同步与读取。

  • 下载

    • 编辑器内搜索插件下载

    • github

      • https://github.com/hediet/vscode-drawio

• vscode-debug-visualizer：将代码调试结果以图的形式展示

  • 功能

    • 它提供了一种以图表的形式展示数据结构形成程的过程，有树形、表格、曲线、图等。

    • 这种展示形式，不仅可以帮我们在代码调试的时候用到，而且在学习数据结构、算法、刷 Leecode 的时候也可以用到，它会让你很清晰的看到数据生成的过程。

  • 下载

    • 编辑器内搜索插件下载

    • https://github.com/hediet/vscode-debug-visualizer

• vscode-gitlens：Git 增强

  • 功能

    • GitLens 增强了 VS Code 中的 Git，并解锁了每个存储库中未开发的知识。它可以帮助您通过 Git 责备注释和 CodeLens 直观地可视化代码作者身份，无缝导航和探索 Git 存储库，通过丰富的可视化和强大的比较命令获得有价值的见解等等。

    • GitLens 只是帮助您更好地理解代码。快速了解更改行或代码块的人员、原因和时间。回顾历史，以进一步了解代码如何以及为何演变。轻松探索代码库的历史和演变。

  • 下载

    • 编辑器内搜索插件下载

    • https://github.com/gitkraken/vscode-gitlens

• 编辑器的主题和图表美化

  • vscode-icons

    • 功能

      • 文件图标美化

    • 下载

      • 编辑器内搜索插件下载

      • https://github.com/vscode-icons/vscode-icons

  • • 功能

    • 下载

      • 编辑器内搜索插件下载

  • • 功能

    • 下载

      • 编辑器内搜索插件下载

• 代码截图美化插件

  • polacode

    • 功能

      • 一款代码截图美化插件，能够轻松创造出漂亮的代码截图。

    • 下载

      • 编辑器内搜索插件下载

      • https://github.com/octref/polacode

  • • 功能

    • 下载

      • 编辑器内搜索插件下载

• codetour：记录和回放代码库的演练和思路

  • 功能

    • CodeTour 允许记录和回放代码库的演练和思路。我们通常都是通过代码注释或者文档来解释某段代码或方法的功能及逻辑，这样的方法相对简便，但是对阅读的人来说还不够友好，CodeTour 允许我们为代码添加备注，并且将这些备注串联起来，动态地展示我们的思路以及代码逻辑。

    • 就像一个目录，可以轻松地加入到新的项目/功能，并且可视化错误报告或了解代码审查/PR 更改的上下文。"code tour"只是一系列交互步骤，每个步骤都与特定目录或文件/行进行关联，并包括对相应代码的描述。开发人员可以 clone 一个仓库，然后立即开始学习，而无需参考 CONTRIBUTING.md 文件或依赖他人的帮助。

  • 下载

    • 编辑器内搜索插件下载

    • https://github.com/microsoft/codetour

• vscode-database-client：数据库客户端扩展

  • 功能

    • 数据库客户端扩展, 支持 MySQL/MariaDB, PostgreSQL, SQLite, Redis, ClickHouse, 达梦以及 ElasticSearch 的管理, 且可以作为一个 SSH 客户端, 最大程度地提高你的生产力!

  • 下载

    • 编辑器内搜索插件下载

    • https://github.com/cweijan/vscode-database-client

• any-rule: 你要的"正则"都在这!

• Better Comments: 更友好的代码注释

• DotENV： env 文件高亮

• One Monokai Theme：换过很多主题还是觉得这个主题看着最舒服

• Volar: Vue3 必备，不多说

工具

• code-server：可服务器部署 VS Code

  • 介绍

    • 服务器端配置好 Code-Server 后，你就可以在任何浏览器上使用 VS Code。

    • code server 的目标是为开发者构建一个便捷统一的开发环境，让开发者能从任意设备、任意位置通过浏览器来进行代码的编写。从而免去了常规的 IDE 开发流程中的环境搭建的问题。

    • code server 解决的第一个问题就是跨设备的环境一致性。因为 code server 始终运行在一个远程的云端环境，因此他的开发环境始终是一致的，不会出现不同平台或者不同设备运行相同的代码而出现各种问题的情况。

  • 网址

    • github

      • https://github.com/coder/code-server

    • 官网

      • coder.com

• monaco-editor：开源的 VS Code 在线代码编辑器(浏览器版本)

  • 介绍

    • monaco editor 是一个由微软开发的代码编辑器，我们熟知的 vscode 就是基于其来实现的。也就是说，我们在 vscode 里面能够做到的功能理论上你也是可以通过 monaco editor 来实现的。

    • Monaco Editor 是一个浏览器端的代码编辑器库，同时它也是 VS Code 所使用的编辑器。

    • Monaco Editor 可以看作是一个编辑器控件，只提供了基础的编辑器与语言相关的接口，可以被用于任何基于 Web 技术构建的项目中，而 VS Code 包含了文件管理、版本控制、插件等功能，是一款桌面软件。

  • 网址

    • github

      • https://github.com/microsoft/monaco-editor

    • 官网

      • microsoft.github.io/monaco-editor/

• VSCodeVim： 是 VSCode 的 Vim 模拟器

  • https://github.com/VSCodeVim/Vim

• WebStrom

• SublimeText

• Atom

在线 IDE 编辑器工具

在线编辑代码

CodeSandbox

介绍

• CodeSandbox 是一个在线的代码编辑器，主要聚焦于创建 Web 应用项目。

• 支持主流的前端相关文件的编辑：JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。

• 支持自动代码提示。

• 比如选择创建相关的项目

  • 

• 可以直接编辑代码运行

  • 

网址

• github

  • https://github.com/codesandbox/codesandbox-client

• 官网

  • codesandbox.io

CodePen

• https://codepen.io/

codesandbox

• https://codesandbox.io/

CKEditor 5

介绍

CKEditor 5 是一个超现代的 JavaScript 富文本编辑器，具有 MVC 架构，自定义数据模型和虚拟 DOM。它是在 ES6 中从头开始编写的，并且具有出色的 webpack 支持。它提供了各种类型的所见即所得的编辑解决方案，并具有广泛的协作支持。从类似于 Google Docs 和 Medium 的编辑器，到类似 Slack 或 Twitter 的应用程序，所有这些都可以在一个编辑框架内实现。作为市场领导者，它不断扩展和更新。

网址

• 官网

  • https://ckeditor.com/ckeditor-5/

• github

  • https://github.com/ckeditor/ckeditor5

• 快速开发文档

  • Quick start - CKEditor 5 Documentation

carbon：代码图片生成

介绍

• 你见过推特上面的 这些 代码 图片 吗? 虽然这些代码令人印象深刻，但从审美角度来说还有提升空间。Carbon 能够轻松地将你的源码生成漂亮的图片并分享。还等什么呢？用这个新发现的美化工具秀给你的 followers 看吧。

• https://github.com/carbon-app/carbon/blob/main/docs/README.cn.zh.md

网址

• 官网

  • https://carbon.now.sh/

• github

  • https://github.com/carbon-app/carbon

Ace

• 介绍

  • 一个可以嵌入网页的代码编辑器，使用 JavaScript 开发。

• 网址

  • 官网

    • ace.c9.io

  • github

    • https://github.com/ajaxorg/ace

code-server：开源的 VS Code 在线版，支持大部分 VS Code 插件

• coder/code-server: VS Code in the browser (github.com)

• coder.com

• 免费的在线代码编辑器 · 语雀 (yuque.com)

Gitpod

• 浏览器里面的 IDE 编辑环境，一键加载 GitHub 仓库，内部使用的是 VSCode Web 版，支持主要的编程语言。

Bi.cool

笔.COOL，一个功能完备、使用便捷的在线HTML代码编辑器和前端作品分享平台

官网：https://bi.cool/

在线地址：https://bi.cool/bi

代码托管

• github

  • 如何才能最好地使用 GitHub 管理项目
    • Top GitHub best practices for developers | Datree.io

• bitbucket

• Gitee

• GitLab

• GITHUB 替代方案

  • GitHub 替代方案 （免费， 付费， 自托管） ：： 图茨维基测试版 (tutswiki.com)

在线工具

• caniuse：查询 CSS、Js 浏览器的特性和兼容性

  • 介绍

    • 这个是一个针对前端开发人员定制的一个查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站，可以很好的保证网页的浏览器兼容性。

    • 有了这个工具可以快速的了解到代码在各个浏览器钟的效果。

  • 网址

    • https://caniuse.com/

• LightHouse：网络应用的质量审查

  • 介绍

    • LightHouse 是一个开源的自动化工具，用于改进网络应用的质量。

    • 可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。

    • 当为 Lighthouse 提供一个要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

    • 让开发人员根据生成的页面性能的报告，来进行网站优化和完善，提高用户体验。

    • 可以参考失败的测试，看看可以采取哪些措施来改进应用。

    • 在里面你可以看到它给你各个方面的建议，比如图片、css、js 这些文件的处理，还有 html 里面标签的使用，缓存处理等建议，可以根据这些来对网站进行优化。

  • 网址

    • https://github.com/GoogleChrome/lighthouse

• 在线的代码转图片工具：Carbon

  • 介绍

    • Carbon 可以很容易的为你的代码创建漂亮的图片

  • 特性

    • GitHub gist 导入. 只需要在 url 后面加上 github gist id 就可以导入

    • 定制化. 可定制图片的语法主题，窗口样式等

    • 所见即分享. 点下鼠标就可以分享到推特上面

  • 网址

    • https://carbon.now.sh/

  • 在 VS Code 中 相同功能的截图代码的插件

    • polacode

    • carbon-now-sh

• IOS 字体支持查询和 IOS 系统自带字体查询：ios fonts

  • 网址
    • http://iosfonts.com/

• web 安全色查询：web color

  • web color 为了尽量让用户看到色彩相同的网页，请尽量使用 216 色的 web 安全色。

  • https://www.bootcss.com/p/websafecolors/

• PNG/JPG 图片在线压缩利器：TinyPNG

  • 介绍

    • PNG/JPG 图片在线压缩利器，智能 PNG 和 JPEG 图片压缩。

    • TinyPNG 使用智能有损压缩技术将您的 PNG 文件的文件大小降低。 通过选择性的减少图片中的颜色，只需要很少的字节数就能保存数据。 对视觉的影响几乎不可见，但是在文件大小上有非常大的差别。

  • 网址

    • https://tinypng.com/

• 草料二维码生成器

  • https://cli.im/

• 定制各种形状的网站分区 SVG 的工具：Shape Divider

  • 介绍

    • 定制各种形状的网站分区 SVG 的工具，调整好了自己想要的形状之后，可以一键复制和下载。

  • 网址

    • https://www.shapedivider.app/

• json 格式化

  • 介绍

    • 这是一个 json 在线解析的网站，是我最常使用的一个网站。

    • 功能包括了：json 在线解析，json 格式化，json 格式验证，json 转 xml，xml 转 json，json 压缩，json 转义，js 混淆加密，JSON 转实体，json 在线，JSON 校验。

  • http://json.cn/

• 前端 WEB 工具箱

  • 功能工具

    • JSON 在线工具：JSON 在线解析、JSON 格式化、JSON 对比、JSON 压缩

    • 加密/解密：在线加密/解密 | JS 加密 | JS 解密 | AES | DES | MD5 | Base64

    • 压缩/格式化：在线压缩/格式化/美化 | JSON | JS | HTML | Java | SQL

    • 开发文档：开发文档/API 文档

    • 前端 WEB 工具/前端工具

    • 在线转换：在线转换 | 单位转换 | 数据转换 | 格式转换

    • 二维码：二维码生成 | 二维码解析 | 动态二维码 | 二维码美化

    • 正则表达式：正则表达式 | 正则表达式测试工具 | 正则表达式教程

    • 站长工具：备案查询 | SEO 检测 | HTTPS 检测 | 微信防封检测 | DNS 检测 | Robots 生成

    • HTTP 工具：HTTP 模拟请求 | HTTP 测试工具 | HTTP 协议 | GET/POST

    • 房贷计算工具 房贷计算器 | 最新房贷计算器 | 2020 房贷利率

    • 生活工具：时间 | 万年历 | 放假 | 老黄历 | 测网速 | 天气

    • 修改图片：在线修改图片 | 图片尺寸修改 | 图片压缩 | 图片美化 | 图片批量处理 | 图片水印

    • JS 加密 / JS 解密：JS 解密 | JS 加密 | JS 美化 | JS 格式化 | JS 混淆

  • https://www.sojson.com/

• 站长工具

  • 介绍

    • 站长工具是站长的必备工具。

    • 经常上站长工具可以了解 SEO 数据变化。

    • 还可以检测网站死链接、蜘蛛访问、HTML 格式检测、网站速度测试、友情链接检查、网站域名 IP 查询。

    • SEO 相关类的有 WHOIS 查询，DNS 查询过期域名查询，NsLookup 查询，域名删除时间备案查询删除域名归档备案批量查询等，除此之外，还有 IP 类，百度相关，测速/监控，网页相关，网站优化人员必备

  • https://tool.chinaz.com/

• 开源代理抓包工具：whistle

  • 介绍

    • 基于 Node 实现的跨平台 web 调试代理工具，类似的工具有 Windows 平台上的 Fiddler，主要用于查看、修改 HTTP、HTTPS、Websocket 的请求、响应，也可以作为 HTTP 代理服务器使用。

    • 不同于 Fiddler 通过断点修改请求响应的方式，whistle 采用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过 Node 模块扩展功能。

  • 网址

    • 官网

      • https://wproxy.org/whistle/

    • github

      • https://github.com/avwo/whistle

• tool

  • https://tool.lu/

• 正则工具

  • regexr
    • 地址
      • https://regexr.com/

• asciinema：录制、分享命令行操作的工具

  • 介绍

    • 一个录制、分享命令行操作的工具，支持 Linux, macOS

  • 官网

    • https://asciinema.org/

• sketch-code：人工智能生成前端网页的工具

  • 介绍

  • 网址

    • 官网

    • github

      • https://github.com/ashnkumar/sketch-code

    • 介绍原理

• dbdiagram：制作数据库关系图的在线工具

  • https://dbdiagram.io/home

辅助工具

• 变量命名智能推荐（支持中文）：codelf

  • 介绍

    • 有一种痛，不是程序员可能不懂，但如果是程序员一定懂，那就是给变量或函数命名。

    • 随着项目越来越复杂，变量和函数数量越来越多，英语水平貌似也 hold 不住了。

    • 虽然每个编程语言都有各种命名规范，但是也不能解决所有的问题。

    • 每个程序员或多或少都在写代码的时候为变量和函数命名苦恼过！

  • 也可以在自己用的编辑器里安装插件，支持 VS Code、Atom、Sublime Text 和 Chrome

  • 网址

    • unbug.github.io/codelf

• Web 前端开发人员提供优质中文文档：印记中文

  • https://docschina.org/

• 正则表达式验证匹配：RegExr

  • 介绍

    • RegExr 是一个基于 HTML/JS 开发的在线工具，用来创建、测试和学习正则表达式

  • 特性

    • 输入时，结果会实时更新

    • 支持 JavaScript 和 PHP/PCRE RegEx

    • 将匹配项或表达式移至详细信息

    • 保存并与他人共享表达式

    • 在编辑器中使用 cmd-Z/Y 撤消和重做

  • 网址

    • https://regexr.com/

• 正则表达式库：any-rule

  • 介绍

    • any-rule 正则表达式

    • any-rule 维护了一个常用正则表达式合集，并且本身是一个支持 Web/VS Code/idea/Alfred Workflow 多平台的正则表达式工具

  • 网址

    • any-rule

• 多张图片合成雪碧图，并生成对应 css：CSS Sprites Generato

  • 介绍

    • 在很多前端展示页面需要用到将小图标拼合为一整个图片，然后在使用的时候，自动裁剪为单一图片展示。

    • 这个时候就需要一个便捷的工具，CSS Sprites Generator 就是这样一个便捷的 CSS 图像拼合工具。

    • 比如多张图片生成雪碧图，还有国内的 CDN 库，赶紧去试一试吧。

    • 

  • 网址

    • www.toptal.com/developers

• 众多工具集合

  • 介绍

    • 包括时间戳转换，进制转换等

  • 网址

    • tool.lu

• 国内的 CDN 库

  • www.bootcdn.cn

  • cdn.baomitu.com

• 国外的 cdn 库

  • 支持 github，npm，WordPress

  • www.jsdelivr.com

• 根据选择会去生成 .gitignore 文件

  • 介绍

    • 根据选择会去生成 .gitignore 文件。

    • 根据用户输入的语言类型或者平台类型，自动生成对应的 gitignore 文件。

    • 例如，输入 Vue，React，点击 "Create" 即可。

  • 网址

    • github

      • https://github.com/toptal/gitignore.io

    • 网站

      • www.gitignore.io

• 实用的 Markdown 写作工具：Typora

  • Typora 官方中文站 (typoraio.cn)

• 微信 Markdown 编辑器：MDNice(收费)

  • 介绍

    • MDNice 微信 Markdown 编辑器是一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床、强大的技术团队,提供文章一键排版,同时支持知乎、掘金、微信。

    • 使 markdown 语法更加美观，如果你有写博客，那这个非常合适你。

    • Markdown Nice 是一款非常实用的 markdown 在线编辑文档，自带丰富的文章主题和代码主题，同时支持微信公众号、知乎和稀土掘金等平台的文章排版（能用富文本编辑器写文章的平台基本都支持），并且上传的图片没有水印

  • 网址

    • github

      • https://github.com/mdnice/markdown-nice

    • 官网

      • Markdown | 让排版变 Nice (mdnice.com)

      • 墨滴 | 看颜值的文章社区 (mdnice.com)

• 免费在线作图工具的聚合平台：ProcessOn

  • 介绍

    • ProcessOn 是一个在线作图工具的聚合平台，它可以在线画流程图、思维导图、UI 原型图、UML、网络拓扑图、组织结构图等等， 不管 Mac 还是 Windows，一个浏览器就可以随时随地的发挥创意，规划工作。

    • 缺点

      • 是免费用户能创建 9 个图，不是无限的。

    • 

  • 网址

    • www.processon.com/

• 开源免费的在线图表编辑工具：draw.io

  • 介绍

    • draw.io 是一款免费的在线图表编辑工具, 可以用来编辑工作流, BPM, org charts, UML, ER 图, 网络拓朴图等，而且是免费的哦，创建的图表等可能无限哦。

    • 还可以 GitHub 授权登录，然后把自己创建的流程图等保存到 GitHub 仓库，还可以在 GitHub 仓库里面打开自己保存过的流程等图

  • 官网

    • www.draw.io/

  • 开源 2

    • github

      • https://github.com/jgraph/drawio

    • 官网 2

      • www.diagrams.net

  • 桌面端开源

    • github

      • https://github.com/jgraph/drawio-desktop/

    • 下载

      • https://github.com/jgraph/drawio-desktop/releases

    • 官网

      • www.diagrams.net

• 开源轻量的 在线白板 工具：Excalidraw

  • 介绍

    • Excalidraw 是一款非常轻量的 在线白板 工具，可以直接在浏览器打开，轻松绘制具有 手绘风格 的图形。

    • 

  • 特点

    • 一个开源免费的画图软件

    • 个人目前看到的最舒服的画图软件

    • 支持多人协作

  • 网址

    • github

      • https://github.com/excalidraw/excalidraw

    • 官网

      • https://excalidraw.com/

• 万兴科技：亿图图示和 MindMaster

  • 绘制精美的流程图、思维导图、信息图等 - 亿图官网 (edrawsoft.cn)

  • 亿图图示

    • 介绍

      • 各种流程图和库

    • 官网

      • 亿图图示，专业办公绘图软件 (edrawsoft.cn)

  • MindMaster

    • 介绍

      • 将纷繁复杂的知识和想法简化成一张张清晰的思维导图，以结构化有序化的方式呈现，提高归纳、学习和记忆的效率，方便展示和讲解。基于跨平台，云存储的产品优势，打破设备边界，助你随时随地捕捉灵感、激发创意。

    • 官网

      • https://www.edrawsoft.cn/mindmaster/

  • 亿图软件终身套餐合并：￥ 1160

    • 亿图图示

      • 价格￥ 680

      • 订阅版终身会员

    • MindMaster

      • 订阅版终身会员

      • 价格￥ 680

• 流程图绘制：Dia（Win）

• 流程图软件推荐

  • 评测了 10 款画流程图软件，这 4 款最好用！（完全免费） - 知乎 (zhihu.com)

  • 流程图 (flowus.cn)

• 思维导图推荐

  • 横向对比 22 款思维导图工具，最好用的我觉得是这款 - 知乎 (zhihu.com)

• 万彩软件全家桶

  • 全家桶套餐 (animiz.cn)

• Fiddler 抓包工具

  • 介绍

    • Fiddler 是一个好用的抓包工具，可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。

  • 官网

    • www.telerik.com/fiddler

• 在线转换(es6 转 es5)

  • Babeljs

    • Babel · The compiler for next generation JavaScript (babeljs.io)

  • es6console

    • https://es6console.com/

• 字体图标相关工具

  • 阿里图标库：

    • https://www.iconfont.cn/

  • 字体制作:

• 图片压缩

  • Squoosh：谷歌在线图片压缩网站

    • 介绍

      • 谷歌在线图片压缩工具

      • 可以压缩超过 5M 的图片，支持图片格式有 WEBP、JPEG 和 PNG。

    • 网址

      • https://squoosh.app/

  • picdiet

    • 支持 jpg 图片压缩，不支持 png，不限制图片大小。

    • https://picdiet.eula.club/

  • Tinypng

    • tinypng 使用有损压缩技术来减小图片大小，支持图片格式有 WEBP、JPEG 和 PNG。可以批量压缩图片，缺点是图片大小不能超过 5M。

    • https://tinypng.com/

• imgcook：设计稿生成代码工具

  • 介绍

    • 是阿里巴巴-大淘宝技术-导购和营销产品（原频道与 D2C 智能团队）研发的工具

    • 设计稿智能生成代码

  • 网址

    • https://www.imgcook.com/

• SVGOMG：SVG 图像的在线代码优化工具

  • 一个 SVG 图像的在线代码优化工具，用来降低 SVG 文件的大小。

  • 网址

    • 官网

      • https://jakearchibald.github.io/svgomg/

    • github

      • https://github.com/jakearchibald/svgomg

• diagrams：在线流程图

  • https://app.diagrams.net/

浏览器插件

• FeHelper
  • FeHelper 插件支持 Chrome、Firefox、MS-Edge 浏览器，内部工具集持续增加，目前包括 JSON 自动/手动格式化、JSON 内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片 Base64 编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具。

其他工具

• Nginxconfig：Nginx 配置可视化神器

  • 一款可以一键生成 Nginx 配置的神器，相当给力。功能的配置：反向代理、HTTPS、HTTP/2、IPv6, 缓存、WordPress、CDN、Node.js 支持、 Python (Django) 服务器等等。

  • 网址

    • https://github.com/digitalocean/nginxconfig.io

    • https://do.co/nginxconfig

    • NGINXConfig | DigitalOcean

• Elux：跨平台跨框架 Web 解决方案

  • 介绍

    • Elux：基于“微模块”和“模型驱动”的跨平台、跨框架同构方案，由开发者 @hiisea 开源。

    • 用同一个工程模式开发 Web（浏览器页面）SSR（服务器渲染）Micro（微前端）MP（小程序）APP（手机应用），更可以把 Redux 当 vuex 用，也可以把 vuex 当 redux 用。、

  • 网址

    • https://github.com/hiisea/elux

    • Elux-基于“微模块”和“模型驱动”的跨平台、跨框架『同构方案』 (eluxjs.com)

• pkg：Node.js 打包工具

  • 介绍

    • pkg 命令接口可让你把 Node.js 项目打包成可执行文件，甚至在没有安装 Node.js 的设备上运行。值得注意的是，pkg 本身是为了在容器中使用的，所以并不提倡在无服务器环境中用 pkg。

  • 网址

    • https://github.com/vercel/pkg

    • npmjs.com/pkg

• nodePPT：用 node 写 PPT

  • 介绍

    • nodeppt 2.0 基于webslides、webpack、markdown-it、posthtml 重构，新效果

    • 停止维护

  • 网址

    • github

      • https://github.com/ksky521/nodePPT

    • 官网

      • nodeppt.js.org

• Rome：是 JavaScript，TypeScript，JSON，HTML，Markdown 和 CSS 的格式化器，linter，bundler 等

  • 介绍

    • Rome 是 JavaScript，TypeScript，JSON，HTML，Markdown 和 CSS 的格式化器，linter，bundler等。

    • Rome 旨在取代Babel，ESLint，webpack，Prettier，Jest等。

    • 罗马统一了以前是独立工具的功能。基于共享基础构建，我们可以为处理代码、显示错误、并行化工作、缓存和配置提供内聚体验。

    • 罗马有很强的惯例，旨在拥有最小的配置。阅读更多有关我们项目理念的信息。

    • 罗马是用鲁斯特写的。

    • Rome 具有一流的 IDE 支持，具有复杂的解析器，可完全保真地表示源文本和一流的错误恢复。

    • 罗马是麻省理工学院根据贡献者契约行为准则许可和主持的。

  • 网址

    • 官网

      • https://rome.tools/

    • github

      • https://github.com/rome/tools

• 1、Collect UI

• 2、Taskade

• 3、Colordot

• 4、FontSpark

• 5、csseffects

• 6、unDraw

• 7、CSS Tricks

• 8、cssreference

• 9、Can I Use

• 10、Lighthouse

• 11、Majestic

• https://www.bilibili.com/video/BV1vV4y1W7wg/?is_story_h5=false&p=1&share_from=ugc&share_medium=android&share_plat=android&share_session_id=998616bd-7b84-42b0-9750-65245a6456af&share_source=WEIXIN&share_tag=s_i&timestamp=1663589479&unique_k=447HDO7

• https://js1k.com/

设计工具

• 万兴科技：墨刀

  • 介绍

    • 原型设计工具，原型、设计、流程图、思维导图......享受创造的乐趣，成就团队和个人

    • 产品设计，何止是快，简单的拖拽，即可快速完成产品设计，将更多的时间留给思考

    • 尺寸灵活，创作不受限，适配各类移动产品、网页设计、后台管理、小程序、活动原型....

    • 支持制作高、低保真原型，不论是工作交流，还是客户展示，都能完美满足团队需求

  • 网址

    • https://modao.cc/

• 蓝湖

  • 介绍

    • 一款产品文档和设计图的共享平台，帮助互联网团队更好地管理文档和设计图。

    • 蓝湖可以在线展示 Axure，自动生成设计图标注，与团队共享设计图，展示页面之间的跳转关系。

      • 高效的产品设计协作平台

      • 无缝衔接产品、设计、研发流程

      • 降低沟通成本，缩短开发周期，提高工作效率

  • 网址

    • https://lanhuapp.com

• PxCook

  • 介绍

    • 从设计到代码, 让团队高效协作

    • 高效易用的自动标注工具，生成前端代码，设计研发协作利器

  • 网址

    • https://www.fancynode.com.cn/pxcook

• 抠图神器类工具：removebg

  • 介绍

    • 一个抠图神器类工具，消除图片背景:100% 自动 – 只需 5 秒– 无需点击 – 免费。

    • Remove.bg 是一款非常神奇强大的在线人像照片/物品图片背景快速去除工具，你只需要上传图片，它就会利用「人工智能」技术全自动帮你扣掉背景，5 秒钟就能给你一张透明的移除背景后的主体照片。整个过程非常的简单傻瓜，你完完全全不需要花费任何精力去自己抠图。

  • 网址

    • https://www.remove.bg/zh

• 万兴科技：pixsoUI 设计(个人免费)

  • Pixso 官网 - 新一代 UI 设计工具，替代 Sketch，Figma，支持在线实时协作

• 即时设计 UI 设计工具：个人和小团队免费

  • 网址
    • 即时设计 - 可实时协作的专业 UI 设计工具 (js.design)

• FigmaUI 设计工具

  • Figma: the collaborative interface design tool.

• 在线 PS 等工具

  • 稿定设计：uupoop

    • 介绍

      • 稿定设计：一个在线高仿真的 PS 图片处理工具，是国内版的 Photopea 照片编辑、定制化的服务比如手机海报、公众号封面、手机海报制作、抠图、证件照换底色

      • PS 在线图片编辑器是一个专业精简的在线 ps 图片照片制作处理软件工具，直接在浏览器打开就可用它修正，调整和美化图像。

      • 相比同类软件，uupoop 支持的文件格式更多，包含 psd、xd、sketch、xcf、raw、pdf 及常见图片格式。

      • 整体体验下来，我觉得 uupoop 拥有了原版 PS 80% 的功能，基本可以满足轻量的编辑或应急情况下的编辑需求。

    • 网址

      • www.uupoop.com

  • Photopea

    • 介绍

      • Photopea 国外大神开发的一款在线 PS 设计软件工具支持的格式有 PSD、XD、SKETCH、XCF、RAW、及图片所有格式

    • 网址

      • github

        • Issues · photopea/photopea (github.com)

      • 官网

        • www.photopea.com

  • FotoJet

  • 美图秀秀网页版

    • 网址
      • https://xiuxiu.web.meitu.com/main.html

• penpot UI 设计工具

  • 介绍

    • Penpot 是一个开源的设计、原型绘制平台，支持跨部门合作。它不依赖操作系统，纯基于 Web 和 SVG，所以你只要有一个浏览器便可和他人共同完成设计。作为 Sketch 长期用户，个人觉得 Penpot 使用起来用户体验不如 Sketch 和 Figma，比如参考线不够明显。但如果你想自托管一个设计工具，且做一些简单的原型设计不妨试试 Penpot

  • 网址

    • 开源地址

      • https://github.com/penpot/penpot

    • 官网

      • penpot.app

学习练习社区工具网站

• 学习社区合集

  • 1. 项目类

    • 1.1 GitHub 代码托管

      • GitHub 作为全球最大的同性交友网站，也是矿资源非常丰富的矿场。

      • GitHub 有时比 Google 还有用，如果你不懂如何使用它来挖矿，那你不算一名合格的程序员。

      • GitHub 是一个宝藏库，可没有藏宝图，GitHub 这个亿计的优秀的开源项目也和你没有关系。

      • GitHub 也有非常多好的项目可以推荐，比如我自己的 github (逃了)

      • github.com/biaochenxuy…

    • 1.2 GitLab

      • 对于有些人，提到 GitHub 就会自然的想到 Gitlab, Gitlab 支持无限的公有项目和私有项目。

      • GitLab 是一个用于仓库管理系统的开源项目，使用 Git 作为代码管理工具，并在此基础上搭建起来的 web 服务。

      • about.gitlab.com/

    • 1.3 GitHub

      • GitHub 是非常受欢迎的开源代码库和版本控制服务提供者，前段时间推出了一项新的源代码搜索服务，虽然 GitHub 才刚刚进入源代码搜索服务领域不久，但是 GitHub 已经成为了这一领域非常受欢迎的搜索服务提供者，并且已经拥有了数以亿计的代码储存量

      • https://github.com/

  • 2. 博客类

    • 2.1 dev

      • dev 社区和国内的掘金社区很相似，技术分类也比较多，各种技术应有尽有，文章质量都很不错。

      • 像 Java、Python、js、分布式等应有尽有，文章质量普遍都还不错，其实如果平时多留意不难发现，掘金上有一些文章是翻译自 dev 社区。

      • https://dev.to/

    • 2.5 IBM Developer

      • 这里面都是一线工程师，技术性很强，每一篇文章都值得细细观看，认真学习。

      • developer.ibm.com

    • 2.2 dreamincode

      • dreamincode 是一个相对小众的技术博客，界面和 博客园 风格颇为相似，属于简约而不简单的那种，但是内容却不简单。

      • www.dreamincode.net

    • 2.3 bytes

      • bytes 和 dreamcode 类似，简约但不简单，不多说了。

      • bytes.com

    • 2.4 hongkiat

      • hongkiat 是与技术、设计领域相关的站点之一，大家可以在这里分享技术文章。

      • www.hongkiat.com/blog/design…

  • 3. 问答类

    • 3.3 daniweb

      • daniweb 也是一个质量比较高的问答平台，有一种像社交平台的感觉。

      • www.daniweb.com

    • 3.1 StackOverFlow

      • 作为一名程序员，如果没有听过 Stackoverflow，那么你最好去面壁思过一下。

      • 这是一个由外国人创办的专为程序员提供的国际性问题解答交流社区，正如网站签名：Stack Overflow - Where Developers Learn, Share, & Build Careers。

      • 这个网站非常的纯粹，一般人还真不太习惯用这个，没有一手好英语还看不太懂全英文的技术交流与问答。

      • 当你拋出一个技术问题时，最终是否能得到有用的回答，往往取决于你所提问和追问的方式。 –Eric S. Raymond

      • stackoverflow.com

    • 3.2 Reddit

      • reddit 是一个非常个性的社区，你可以在这里讨论编程问题，还可以学习学英语，reddit 还很幽默，有古怪的莫名笑点，评论接楼很有意思。

      • www.reddit.com

  • 4. 算法类

    • 4.1 LeetCode

      • 和国内的 leetcode 一样都是刷题用的，但是国际版的 leetcode 汇聚了全球各国大神，看看你和大神的思路是否一样呢。

      • leetcode.com

    • 4.2 LintCode

      • LintCode 领扣上有数量超过 1000 道的算法题目和人工智能题目，通过刷题熟练掌握数据结构和算法。

      • 完成各大名企的阶梯训练，为你斩获心仪的 offer 打下坚实的基础

      • www.lintcode.com

    • 4.3 Codeforces

      • Codeforces 是全球最著名的在线评测系统之一，这里有高水平的选手，高质量的题目，高密度的比赛。

      • 该网站由俄罗斯的一个团体创立并负责运营。当然，该网站上大部分博客、评论、题面都是英语的。

      • codeforces.com/

    • 4.4 Topcoder

      • Topcoder 据说是世界上规模最大的编程网站，这里面的题型，比赛形式跟 ACM/ICPC 极不相同。

      • 该网站把中国纳入其赛区，大家可以上去那里跟来自全世界的程序员(事实上大多数也是大学生)进行更直接的交流，可能也是 ACM/ICPC 练兵的好地方吧。

      • 该网站每个月都有两到三次在线比赛，根据比赛的结果对参赛者进行新的排名。

      • 参赛者可根据自己的爱好选用 Java, C++, C#, VB 或 python 进行编程。

      • www.topcoder.com

  • 5. 教程类

    • 5.7 YouTobe

      • YouTobe 这个网站可算是经典，和国内的哔哩哔哩一样，各类视频汇聚于此，当然各国编程大神也在这啦。

      • YouTube 是源自美国的视频分享网站，也是当前全球最大的视频搜索和分享平台，让用户上传、观看、分享及评论视频。

      • 此网站没有官方的中文名字，较为广泛使用的俗称有油管、水管、你管等。

      • www.youtube.com/

    • 5.1 tutorialspoint

      • 这是一个在线学习的网站，并且免费，里面有各种技术、各个知识点的讲解和 demo，灰常全面，这比查找 API 方便多了，遇到不明白的知识点直接根据索引找就是了，还有各种电子书。

      • www.tutorialspoint.com/index.htm

    • 5.2 codecademy

      • 学习新语言，敲代码玩就在这里了。这个网站将简化编程学习的过程。比如说网站左边会讲解知识点，右边直接练习。如果出现错误，就会有错误提示，直接给你反馈。所以，使用它不用想太多，直接拼命硬干敲代码入门。

      • www.codecademy.com

    • 5.3 Livecoding.tv

      • Livecoding.tv 由一群欧美程序爱好者共同发起成立，旨在为全球程序员提供一个实时高效的互动平台。特色是使用了录屏直播技术，用户可以在线观看高手实时编程并且可以向对方提问互动，网站现在已经汇集了一大批程序精英。现在 Livecoding.TV 来到中国，希望更多的中国程序员加入进来一起切磋技术。

      • www.livecoding.tv/accounts/lo…

    • 5.4 Dzone

      • Dzone 是一个技术涵盖比较全面的网站，像云平台、数据库、物联网、开发运维、Java 语言等都有。

      • dzone.com

    • 5.5 simpleprogrammer

      • simpleprogrammer 简单的程序员，这个网站上纯技术文章不多，指导建议性的文章比较多。

      • 讲述一些职场、以及软件开发中的一些“ 潜规则”。

      • simpleprogrammer.com/

    • 5.6 SitePoint

      • 通过 SitePoint 教程，课程和书籍学习 Web 设计和开发 HTML5，CSS3，JavaScript，PHP，移动应用。

      • 这是一个偏向前端方向的网站，在这里包含了各种高质量的前端方面的文章，电子书。

      • www.sitepoint.com/web

• 技术社区

  • IBM Developer

    • 介绍

      • 这里面都是一线工程师，技术性很强，每一篇文章都值得细细观看，认真学习。

    • 网址

      • https://developer.ibm.com

  • StackOverFlow

    • 介绍

      • 由外国人创办的专为程序员提供的国际性问题解答交流社区，正如网站签名：Stack Overflow - Where Developers Learn, Share, & Build Careers。

      • 这个网站非常的纯粹，一般人还真不太习惯用这个，没有一手好英语还看不太懂全英文的技术交流与问答。

    • 网址

      • https://stackoverflow.com

  • Reddit

    • 介绍

    • www.reddit.com

• 源码检索网站

  • Krugle

    • Krugle 声称他们的搜索包含超过 25 亿行代码，这一数量使他们成为互联网上最大的源代码搜索引擎之一，并且还称他们的搜索结果包含了全球三分之一开发者的源代码！同时他们还分别为全球多家大型公司或企业，如 Amazone、IBM、Collab.net、SourceForge.net、Yahoo!等提供企业级的代码搜索服务！

    • Home - Open Search | Krugle

  • Koders

    • Koders 号称其能够搜索的代码数目超过 10 亿行，并且深受 Ruby 程序员的青睐！在 Koders 被黑鸭软件公司(Black Duck Software)收购之后，该网站关于 Ruby 的搜索比过去四年的总和激增了 20 倍，超过了该站 PHP、Perl 和 Python 的搜索数目！并且 Ruby 已成为该网站继 Java、 C/C、和 C#之后搜索次数最多的语言。

    • Koders

    • KODERS ESN | DIGITAL TALENTS

  • Codaes

    • Codaes 在这个源代码搜索领域似乎并不起眼，能够搜索到的代码数量也只有 2.5 亿条，究其原因可能是该网站的搜索服务发展似乎已经停滞好几年了。Codaes 主要关注的是关于 Linux 方面的 C/C++项目代码，但这在今天似乎有些过时了！除非这就是你要找的内容，否则除此之外你有更好的搜索选择。

  • DZone

    • 在 DZone 中超过 13000 名用户所贡献的约 5000 个代码片段！这个源代码片段库不失为一个寻找代码的好地方，但是这绝对不是一个容易浏览的网站，这就需要看谁更有耐心去寻找那些隐藏在沙子中的金子了，如果你有耐心，你会发现这的确是一个非常有价值的网站！

  • Snipplr

    • Snipplr 是一个设计精美的源代码片段搜索网站，虽然它的用户并没有 DZone 的多(只有约 10000 名)，但是该站的源代码片段数量去比后者多很多(接近 8000 个代码片段)，并且代码片段正以惊人的数量激增，同时他们还针对 Textmate、Gedit、 Wordpress 等提供了非常方便的插件

• 编程学习社区网站

  • freeCodeCamp：自由开源的学习编程的社区

    • 介绍

      • reeCodeCamp 是一个自由开源的学习编程的社区，致力于帮助人们利用零散时间学习编程。

      • 它的使命是 Learn to code and help nonprofits（学习编程，去帮助那些非盈利组织）。

      • FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程，游戏化程度非常高，学员可以通过线上聊天室和线下社区活动（Coffee and Code）相互帮助。

      • 目前覆盖全球 160+ 个国家、1000+ 个城市，40W+ 开发者在平台学习

    • 网址

      • github

        • https://github.com/freeCodeCamp/freeCodeCamp

      • 官网

        • contribute.freecodecamp.org

  • 阮一峰学习教程

    • 网道 - 互联网开发文档 (wangdoc.com)

• 学编程的免费游戏

  • 12 款助你学编程的免费游戏 - 知乎 (zhihu.com)

  • 微软 MakeCode 街机：基于 Web 的初学者友好的代码编辑器

    • 介绍

      • 制作代码街机：复古游戏，现代编程 (makecode.com)

      • 基于网络的初学者友好的代码编辑器，为网络和专用硬件创建复古街机游戏

      • 你可以很容易地制作一款游戏，然后在浏览器里玩，也可以在专用硬件上玩。

    • 官网

      • https://arcade.makecode.com/

• 刷题社区

  • LeetCode （力扣）

    • 介绍

      • LeetCode 是个非常出名的刷题网站了，讨论区人比较多、题目覆盖也比较全面 。很多大厂算法题都从其中选择，重点刷完 hot100，还可以参加周赛提升手感。

    • 网址

      • 英文网址

        • https://leetcode.com/

      • 中文网址

        • https://leetcode.com/

    • 清华学霸的刷题笔记(leetcode 最优解)

      • 清华学霸的刷题笔记(leetcode 最优解) (qq.com)

    • 按照知识点进行分类的 LeetCode 题目清单

      • 算法小白的 LeetCode 刷题顺序（持续更新 2023/01/14） - 知乎 (zhihu.com)

    • 刷了几千道算法题，ACM 学长的一些心得。 - 知乎 (zhihu.com)

  • 牛客网

    • 介绍

      • 一个集笔面试系统、题库、课程教育、社群交流、招聘内推于一体的招聘类网站。

      • 包括各个公司的面试笔试题和面经分享，找工作前认真刷一刷，一定会有很大收获！拿到心仪的 offer！

      • 包含剑指 offer 的 66 题，校招真题 105 题，leecode148 题，ACM 训练题 7418 题（变态）,计算机考研复制 233 题，华为机试 108 题。

    • 网址

      • 牛客网 - 找工作神器|笔试题库|面试经验|实习招聘内推，求职就业一站解决_牛客网 (nowcoder.com)

  • hihocoder

    • 介绍

      • 另外，该网站每一周每一月都会有周赛，月赛。每周的周赛都是一道比较有意思的题目，可以开阔我们的思路，而月赛的题目都是由北大等一流高校 ACM 的大佬所准备的题目，通过每周每月的比赛，可以检验自己的真实水平。

      • 在该网站上经常会有一些知名大厂举办编程比赛，例如：微软，百度，腾讯，网易等等，该比赛风格与 ACM 类似。

      • 网站的技术团队来自于原北大 POJ 的开发团队，至于 POJ 会在后面的篇章中介绍，反正膜拜就完事了。一些知名的大厂比如微软、百度、腾讯、网易等会在上面举办在线编程比赛，风格倒是和 ACM 比赛类似。

      • 如果仅止步于此还不至于让我推荐，当初与它的结缘是因为 hihoCoder 每周有周赛，每月有月赛。周赛是一道题，题目比较难但是极有意思，可以很好的拓宽自己的解题思路，月赛就更厉害了，题目均出自北大等一流高校玩 ACM 的菊苣出题，通过这个的检验可以迅速定位到自己真实的水平，同时了解自身在解决问题过程中的不足。

    • 网址

      • https://hihocoder.com

  • LintCode

    • 介绍

      • 汇集了各大公司的算法面试题。有阶梯式训练题库，帮你选好应该刷的题目，特别适合小白和懒人。评测数独很快，最大的中文在线题库。

      • 在 学习频道 中有丰富的学习小节和练习题目，在 刷题频道 中提供了各种类型的在线编程题目，方便评测练习。

    • 网址

      • https://www.lintcode.com/

  • Codewars 社区

    • 介绍

      • 和 leetcode 有点类似，也是在平台上和其他人一起完成真实的代码挑战，提升你的技术。

      • 相比于其他平台，codewars 给出的问题更加贴合实际工作与生活，很多题都会给出题目背景，更有代入感。

      • 可以提升技能：在社区创建的 kata 上挑战自我，以增强各种技能。掌握您当前选择的语言，或扩展您对新语言的理解。

      • 要加入这个社区，您必须先答题证明自己的技能才可以的。

    • 网址

      • https://www.codewars.com/

  • 计蒜客

    • 介绍

      • 计蒜客这个网站可能很多人不知道，他也有可以刷题的题库，也会定期举办比赛

    • 网址

      • jisuanke.com/

  • virtual judge

    • 介绍

    • 网址

      • https://vjudge.net/

  • 洛谷官网

    • 介绍

    • 网址

      • 首页 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)

      • 题库 - 洛谷有题 (luogu.com.cn)

  • 赛玛

    • 介绍

    • 网址

      • 真题练习 - 【赛码网】免费在线考试系统、在线面试系统-易用稳定专业 (acmcoder.com)

  • edabit

    • 介绍

      • 收集各种编程语言（JS、Python、Ruby、Swift、PHP、Java、C#、C++）练习题的网站，可以在线编码，然后验证答案。

    • 官网

      • https://edabit.com/challenges

  • Codility

    • 介绍

      • Codility 是一家著名的国外刷题网站。

      • Codility 主要是帮助各大名企、中小企业笔试。支持多种语言，能够在线编程。

    • 网址

      • https://www.codility.com

      • Codility: Online Coding Tests & Technical Interviews

  • HackerRank

    • 介绍

      • 网站提供各种编程谜题、现实中的编程难题和挑战。

      • 一般程序员小伙伴们刷完 LeetCode 之后，就会选择 HackerRank 继续刷题，更多的是研究算法。

    • 网址

      • www.hackerrank.com

      • HackerRank

  • CodeChef

    • 介绍

      • CodeChef 编程题目的难度从入门、简单、中等到挑战都有，会举办竞赛，获胜者可是有奖金的哦!

    • 网址

      • Competitive Programming | Participate & Learn | CodeChef

  • 面圈网

    • 介绍

      • 我们是一个开放的面试、学习、考试的交流分享社区

    • 网址

      • 面圈网-面试、学习、考试交流分享平台 (mianshigee.com)

  • 开发者客栈 developers

    • 介绍

    • 网址

      • https://www.developers.pub/

      • https://www.developers.pub/wiki/

      • https://www.developers.pub/wiki/1065322

      • https://www.developers.pub/wiki/1005279

  • PTA

    • 介绍

      • PTA 是老牌的程序设计实验辅助教学平台 ，截止目前为止目前已经有足足 137847 道的题目了。

      • 里面汇集了各大 985 高校的习题集。

    • 网址

      • PTA | 程序设计类实验辅助教学平台 (pintia.cn)

  • Programming by Doing

    • 介绍

      • 对于一名编程的菜鸟而言，这个网站是在适合不过啦!

      • Programmingbydoing 含有的编程题目从简单到复杂，新手程序员可以循序渐进提高自己的水平。

      • 适合大一、大二的学生，尤其是非科班、跨专业的小伙伴

      • 这个网站，叫边做边编程，上面的题目超级基础，非常适合小白

    • 网址

      • Programming by Doing

  • 趣 IT

    • 介绍

      • 这是一个程序员刷题面试的网站，大厂真题、面试经验一样不少

    • 网址

      • https://www.funit.cn

  • 面试鸭

    • 介绍

      • 由 B 站 UP 主：程序员鱼皮(程序员鱼皮的个人空间-程序员鱼皮个人主页-哔哩哔哩视频 (bilibili.com))开发面试刷题网站

    • 网址

      • 官网

        • www.mianshiya.com

      • 开源 GitHub 地址

        • liyupi/mianshiya-public: 干净免费的面试刷题网站

  • dotcpp

    • 介绍

      • 这个网站的题第一页基本都非常简单非常适合入门的人刷，而且全中文，界面简单。

      • 即便做不出来，每个题还有很多题解可以参考，对自己查错以及拓宽思路都非常有帮助。

      • 而且还有小型比赛，这里的比赛都很亲民，适合个人提升编程水平参加。

    • 网址

      • Dotcpp 编程（C 语言网） - 实用的编程学练平台

      • 在线编程，代码在线运行，在线写代码工具 (dotcpp.com)

  • POJ，北大 OJ

    • 介绍

      • 国内最火的几大 OJ 之一，它的建立时间很早，一些上古时期的题目也能在上面找到，

      • 现在上面有 3k+ 的题量。

    • 网址

      • http://poj.org/

  • ZOJ 浙大 OJ

    • 介绍

      • 浙大 OJ 国内最早也是最有名气的 OJ，有很多高手在上面做题。打开速度快。

      • 题目数量多，来源广。

    • 网址

      • ZOJ (pintia.cn)

  • HDU 杭电 OJ

    • 介绍

      • 杭电（杭州电子科技大学）的 OJ 大概是国内最火的几个 OJ 之一了，大多数 ACMer 应该都知道（其实我想说所有来着），勿需多说，非常多比赛都在上面，比如每年暑假的多校联赛，朝鲜、外蒙等学校的队伍都会参加，想不知道都不可能。

      • 现在上面大概有接近 6k 的题量，网上有很多的刷题顺序，刷题指南

    • 网址

      • http://acm.hdu.edu.cn/

  • 中科大 USTCOJ

    • 介绍

    • 网址

      • http://acm.ustc.edu.cn/ustcoj/

  • FZU（福大）

    • 介绍

    • 网址

      • http://acm.fzu.edu.cn/

  • HIT（哈工大）

    • 介绍

    • 网址

      • http://acm.hit.edu.cn/

  • URAL

    • 介绍

    • 网址

      • http://acm.timus.ru/

  • SPOJ

    • 介绍

    • 网址

      • https://www.spoj.com/

  • VisuAlgo

    • 介绍

      • 该网站是一个算法可视化网站，目前支持英文，中文，日文等等

      • 每种算法都会有两种可视化方式：

      • 电子讲座模式：以知识点讲解的模式呈现

      • 示例模式：以动画的方式呈现

      • 两种方式都可以由你控制进度，帮助你了解算法的每一步执行过程。

    • 网址

      • https://visualgo.net/zh

  • Codehs

    • 介绍

      • 包含数据结构、游戏设计、动画类编程题。

    • 网址

      • https://codehs.com/

  • GeeksforGeeks

    • 介绍

      • 在该网站的代码解决方案中，你会看到解题者是如何将一个复杂的问题分解成更简单的部分，并提出代码解决方案

      • 在线编辑器中进行挑战

      • 通过该网站可以让你达到以下两个目的：

      • GeeksforGeeks 网站上包含了许多关于算法和数据结构的文章

    • 网址

      • https://www.geeksforgeeks.org/

  • Codeforces

    • 介绍

      • odeforces 又被戏称为 CF，是一家俄罗斯的网站，当然还是用英文食用。这里的很好的比赛，很好的题目，很好的选手，简称"三好"。

      • CF 最吸引人的地方在于它那超级牛批的比赛系统，CF 上每个用户都拥有 Rating，也就是比赛积分，新用户默认为 1500 分，每次比赛就会在你的积分上加加减减，上面的比赛一般分为四种：Div1、Div2、Div3、Educational Codeforces Round。Div 的比赛一般是根据积分来的，每个积分段只能参加对应的 Div 的比赛，Div1 的比赛是里面最难的，大佬基本都在这里。Educational Codeforces Round 则是类似 ACM 的比赛，提交之后立马出结果。

    • 网址

      • https://codeforces.com/

  • Topcoder

    • 介绍

      • Topcoder 据说是世界上规模最大的编程网站

      • TopCoder 是最早的在线编程竞技平台之一，该网站提供了一系列的算法挑战。经常在线举行编程竞赛，可以去练练手，找找成就感。

    • 网址

      • https://www.topcoder.com/

  • ACWing

    • 介绍

      • ACwing 是北京大学的学长闫学灿 所创立的，他也是 NOI 比赛的金牌得主，他所创办的 Acwing 网站主要用于帮助一些计算机专业的学生做工作的。

      • 需要注意的是该网站上的部分题目难度较大，没有必要全部刷完。

    • 网址

      • https://www.acwing.com/problem/

  • codechef

    • 介绍

    • 网址

      • Competitive Programming | Participate & Learn | CodeChef

• 如何学好数据结构和算法

  • 怎么学好数据结构？ - 知乎 (zhihu.com)

  • 如何系统地学习算法？ - 知乎 (zhihu.com)

  • 无意中发现一位大佬的算法刷题 pdf 笔记 - 知乎 (zhihu.com)

  • 谷歌工程师的 LeetCode 算法笔记是怎么样的？ - 知乎 (zhihu.com)

  • 大家一般刷满 500 道 LeetCode 题目要花多久？ - 知乎 (zhihu.com)

• 求职面试

  • yangshun/tech-interview-handbook: 💯 Curated coding interview preparation materials for busy software engineers (github.com)

  • 推荐这 10 个 GitHub 上超火的前端面试项目，打造自己的加薪宝库！ · Issue #6 · FrontEndGitHub/FrontEndGitHub

前端测试工具

• Cypress：下一代前端测试工具

  • 介绍

    • Cypress 是为现代网络而构建的下一代前端测试工具，用于解决开发者和 QA 工程师在测试现代应用程序时面临的关键难题。

    • Cypress 简化了设置测试、编写测试、运行测试和调试测试，支持端到端测试、集成测试和单元测试，支持测试在浏览器中运行的任意内容。支持 Mac OS、Linux 和 Windows 平台。

  • 网址

    • github

      • https://github.com/cypress-io/cypress

    • 官网

      • cypress.io

整理常见的国内镜像

• 简介

  • 由于国内网络原因，下载依赖包或者软件，对于不少互联网从业者来说，都有不小的挑战，时间浪费在这上边，实在可惜。这个项目介绍了常见依赖，软件的国内镜像，助力大家畅爽编码。

  • 这是一个归纳梳理类的项目，由开发者 @eryajf 创建，整理了常见的包管理工具，软件，系统的国内镜像，以助力运维同学自建企业私服，开发同学直接上手使用。

• 网址

  • https://github.com/eryajf/Thanks-Mirror

自托管服务项目

• 可以在您自己的服务器上托管的自由软件网络服务和 Web 应用程序列表

• 网址

  • https://github.com/awesome-selfhosted/awesome-selfhosted

  • reddit.com/r/selfhosted

静态站点生成器和其他依赖

• 生成器

  • 主流常用

    • VitePress：基于 Vue3

      • 介绍

        • VitePress 是基于 Vue3 的VuePress的精神继承者，建立在vite之上

        • 基于 vite 而不是 webpack，所有更快的启动时间，热重载等；

      • 特点

        • 使用真正的 SSG + SPA 架构，基于 Vite 构建

        • 利用 Vue 3 改进的模板静态分析对静态内容进行字符串化，降低 js 负载成本

        • VitePress 旨在缩减当前 VuePress 的复杂性

      • 网址

        • github

          • https://github.com/vuejs/vitepress

        • 官网

          • https://vitepress.vuejs.org/

    • VuePress：基于 Vue2

      • 介绍

        • 极简主义的 Vue2 的静态站点生成器

        • 建议投向 VitePress 的怀抱

      • 特点

        • 简洁至上

          • 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。

        • Vue 驱动

          • 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。

        • 高性能

          • VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

      • 网址

        • github

          • https://github.com/vuejs/vuepress

        • 官网

          • https://vuepress.vuejs.org/zh/

      • 教程

        • 来试试 VuePress 搭建个人博客 - 掘金 (juejin.cn)

        • 1 小时搞定 vuepress 快速制作 vue 文档/博客+免费部署预览 - 掘金 (juejin.cn)

        • VuePress 手摸手教你搭建一个类 Vue 文档风格的技术文档/博客 - 掘金 (juejin.cn)

        • vuepress 如何生成目录 | 全栈直通车-王世彪的博客 (sofineday.com)

        • 1024，快速打造你的文档库/静态博客 - 掘金 (juejin.cn)

    • Hugo（Go 编写）

      • 介绍

        • Go 编写的静态网站生成器

        • 世界上最快的网站建设框架

        • 一个快速灵活的静态站点生成器，由bep，spf13和Go 中的朋友用爱建造

      • 网址

        • github

          • https://github.com/gohugoio/hugo

        • 官网

          • https://gohugo.io/

        • 中文文档

          • https://www.gohugo.org/

    • Jekyll（Ruby 开发）

      • 介绍

        • 🌐Jekyll 是 Ruby 中的一个博客感知静态站点生成器

        • Jekyll 是一个简单的，博客感知的静态网站生成器，非常适合个人，项目或组织网站。可以将其视为基于文件的 CMS，而没有所有的复杂性。Jekyll 获取您的内容，呈现 Markdown 和 Liquid 模板，并吐出一个完整的静态网站，准备由 Apache，Nginx 或其他 Web 服务器提供服务。Jekyll 是 GitHub Pages 背后的引擎，您可以使用它直接从 GitHub 存储库托管站点。

      • 网址

        • github

          • https://github.com/jekyll/jekyll

        • 官网

          • jekyllrb.com

    • Ghost（基于 Node.js 构建的开源博客平台）

      • 介绍

        • Ghost 是一套基于 Node.js 构建的开源博客平台（Open source blogging platform），具有易用的书写界面和体验，博客内容默认采用 Markdown 语法书写，不过原生的不支持 Markdown 的表格和LaTeX，如果需要使用，需要在服务器端安装插件。

        • Ghost 目标是取代臃肿的 Wordpress，界面简洁，专注写作，支持在线预览和在线写作。

        • Ghost 属于动态博客，页面并不是像Hexo,Jekyll这类静态博客，在编译的时候会生成所有页面。Ghost 有前台和后台。后台负责写作，发布文章，系统配置，等等。

      • 网址

        • GitHub

          • https://github.com/tryghost/ghost/

        • 官网

          • https://ghost.org/

      • Ghost 博客搭建日记 - 掘金 (juejin.cn)

    • Hexo（基于 Node.js 的静态博客框架）

      • 介绍

        • 一个快速，简单和强大的博客框架，由 Node.js 提供支持。

        • Hexo 是基于 Node.js 的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在 GitHub 和 Coding 上，是搭建博客的首选框架。

      • 特征

        • 超快的生成速度

        • 支持 GitHub Flavored Markdown 和大多数 Octopress 插件

        • 一个命令部署到 GitHub Pages，Heroku 等。

        • 强大的 API，实现无限的可扩展性

        • 数以百计的主题和插件

      • 网址

        • github

          • https://github.com/hexojs/hexo

        • 官网

          • https://hexo.io/zh-cn/

    • NextJs

      • 介绍

      • 网址

        • github

          • https://github.com/vercel/next.js

        • 官网

          • https://www.nextjs.cn/

    • nextra

      • 介绍

        • NextJs 静态站点生成器

      • 网址

        • github

          • https://github.com/shuding/nextra

        • 官网

          • nextra.vercel.app

    • Gatsby

      • 介绍

        • 使用 React 构建超快速、现代的应用程序和网站

        • Gatsby 是一个基于 React 的免费开源框架，可帮助开发人员构建极快的网站和应用程序。

        • 它将动态渲染网站的控制和可扩展性与静态网站生成的速度相结合，创造了一个全新的可能性网络。

      • 特征

        • 从任何地方加载数据。Gatsby 从任何数据源中提取数据，无论是 Markdown 文件，Contentful 或 WordPress 等无头 CMS，还是 REST 或 GraphQL API。使用源插件加载数据，然后使用 Gatsby 的统一 GraphQL 接口进行开发。

        • 超越静态网站。获得静态网站的所有好处，没有任何限制。Gatsby 网站是功能齐全的 React 应用程序，因此您可以创建高质量的动态 Web 应用程序，从博客到电子商务网站再到用户仪表板。

        • 选择渲染选项。除了静态站点生成 （SSG） 之外，您还可以选择其他呈现选项，即延迟静态生成 （DSG） 和服务器端呈现 （SSR）， 以每页为基础。这种类型的精细控制允许您优化性能和生产力，而不会牺牲一个。

        • 性能是内在的。默认情况下，王牌您的绩效审核。Gatsby 可自动执行代码拆分、图像优化、内联关键样式、延迟加载、预取资源等功能，以确保您的网站快速运行，无需手动调整。

        • 对每个站点使用新式堆栈。无论数据来自哪里，Gatsby 网站都是使用 React 和 GraphQL 构建的。为您和您的团队构建统一的工作流，无论数据是否来自同一后端。

        • 在规模上为便士主持。Gatsby 站点不需要服务器，因此您可以在 CDN 上托管整个站点，而成本仅为服务器呈现站点的一小部分。许多 Gatsby 网站可以完全免费托管在Gatsby Cloud和其他类似服务上。

      • 网址

        • github

          • https://github.com/gatsbyjs/gatsby

        • 官网

          • www.gatsbyjs.com

    • docsify：一个神奇的文档网站生成器

      • 特征

        • 没有静态构建的 html 文件

        • 简单轻便

        • 智能全文搜索插件

        • 多个主题

        • 有用的插件 API

        • 兼容 IE11

        • 实验性 SSR 支持（示例）

        • 支持嵌入文件

      • 网址

        • github

          • https://github.com/docsifyjs/docsify

        • 官网

          • docsify.js.org

    • docusaurus：React.js 易于维护的开源文档网站

      • 介绍

        • Docusaurus 是一个用于轻松构建，部署和维护开源项目网站的项目

      • 网址

        • github

          • https://github.com/facebook/docusaurus

        • 官网

          • docusaurus.io

        • 文档

          • https://docusaurus.io/zh-CN/docs

    • docz

      • 介绍

        • Docz 使您可以轻松地为您的代码编写和发布漂亮的交互式文档。

        • 创建展示您的代码的 MDX 文件，Docz 将它们变成一个实时重新加载、生产就绪的站点。

      • 网址

        • github

          • https://github.com/doczjs/docz

        • 官网

          • docz.site

        • 文档

    • dumi

      • 介绍

        • React Component 的文档生成器

      • 网址

        • github

          • https://github.com/umijs/dumi

        • 官网

          • d.umijs.org

        • 文档

    • Astro

      • 介绍

        • 现代 Web 的网站构建工具 —强大的开发人员体验与轻量级输出的完美结合。

      • 网址

        • 官网

          • https://astro.build/

        • github

          • https://github.com/withastro/astro

        • 文档

          • https://docs.astro.build/zh-cn/getting-started/

      • 如何评价最近新出现的前端框架 Astro？ - 知乎 (zhihu.com)

    • mkdocs

      • 介绍

        • Markdown 文档站点生成器。

      • 网址

        • 官网

          • www.mkdocs.org

        • github

          • https://github.com/mkdocs/mkdocs

    • strapdown：Markdown 文件直接部署成静态网站

      • 介绍

        • Markdown 文件直接部署成静态网站，不需要编译。

        • 停止维护

      • 网址

        • 官网

          • strapdownjs.com

        • github

          • https://github.com/arturadib/strapdown

  • 不常用

    • pagic

      • 介绍

        • 由 Deno + React 提供支持的静态站点生成器

      • 网址

        • github

          • https://github.com/xcatliu/pagic

        • 官网

          • pagic.org

    • bisheng

      • 介绍

        • 使用 React 将 Markdown（和其他带有转换器的静态文件）转换为 SPA 网站

      • 网址

        • github

          • https://github.com/benjycui/bisheng

        • 官网

    • Tina：

      • 介绍

        • 是一个开源工具包，用于将内容管理直接构建到您的网站中

      • 网址

        • github

          • 用于 Markdown 的无头 CMS

        • 官网

          • tina.io

    • Metalsmith：

      • 介绍

        • 一个非常简单，可插拔的静态站点生成器。

        • 在 Metalsmith 中，所有逻辑都由插件处理。您只需将它们链接在一起即可。

      • 网址

        • github

          • https://github.com/metalsmith/metalsmith

        • 官网

          • metalsmith.io

    • MkDocs

      • 介绍

        • MkDocs 是一款快速，简单且非常华丽的静态站点生成器，适用于构建项目文档。文档源文件以 Markdown 格式编写，并使用单个 YAML 配置文件进行配置。它设计为易于使用，可以使用第三方主题，插件和 Markdown 扩展进行扩展。

        • 有关介绍性教程和完整的用户指南，请参阅文档。

      • 网址

        • github

          • https://github.com/mkdocs/mkdocs

        • 官网

          • www.mkdocs.org

    • Publii

      • 介绍

        • Publii 是一款基于桌面的 CMS，适用于 Windows，Mac 和 Linux，即使对于初学者来说，也可以快速轻松地创建静态网站。

      • 网址

        • github

          • https://github.com/GetPublii/Publii

        • 官网

          • getpublii.com

    • blogdown

      • 介绍

        • 使用 R Markdown 创建博客和网站

        • blogdown 软件包的目标是为R Markdown提供强大且可定制的网站输出格式。使用动态 R Markdown 文档构建具有以下特点的网页：

          • R 代码（或 knitr 支持的其他编程语言），

          • 自动呈现的输出，如图形、表格、分析结果和 HTML 小部件，以及

          • 技术写作元素，如引文、脚注和 LaTeX 数学，由 bookdown 包提供支持。

        • 默认情况下，blogdown 使用Hugo，一种流行的开源静态网站生成器，它提供了一种快速灵活的方法来构建要在线共享的网站内容。其他网站生成器，如 Jekyll 和 Hexo 也受支持。

        • 与其他基于 R Markdown 的网站相比，blogdown 网站的一个有用功能是，您可以在子目录中组织您的网站内容（包括 R Markdown 文件）。这使得 blogdown 成为一个很好的解决方案，不仅适用于博客或关于 R 的网站 - 它还可用于创建通用网站，以传达有关数据科学，统计，数据可视化，编程或教育的信息。

      • 网址

        • github

          • https://github.com/rstudio/blogdown

        • 官网

          • https://pkgs.rstudio.com/blogdown/

    • vite-ssg

      • 介绍

        • 由 antfu 开发

        • Vue 3 在 Vite 上生成静态站点

      • github

        • https://github.com/antfu/vite-ssg

• 网站托管服务平台(部署服务)（免费）

  • Vercel

    • 介绍

      • 一个个开箱即用的网站托管平台，方便开发者快速部署自己的网站。它在全球都拥有 CND 节点，因此比 Github 官方自带的 github pages 更加稳定，访问速度更快

      • 可以自定义域名。统计收费。自带 CDN

      • Vercel 还可以自定义域名、serverless、全球支持的 CDN 等等

      • 可以毫不夸张地说，用 Vercel 来代替繁琐的云服务器，配合 Github Action 做 CI/CD，就个人开发者或小团队而言，这或许就是神器

      • 他家的一个亮点就是所谓的 CMS 系统了。众所周知我们一般的部署方式是先在本地写好然后推送到云端的。用 CMS 可以在云端实现编辑，而无需配置本地环境。

      • 支持自定义域名且自定义域名支持一键开启 https（证书来自 Let’s Encrype）。支持自动构建。支持 CLI。提供模板。提供引导。

      • 使用体验：Vercel 的体验情况总体和 Netlify 相近，节点设置在海外，访问速度尚可。前身是 now.sh，作为一个高质量的静态托管平台，Vercel 的使用体验非常好，是一个可选的优秀平台。

      • 使用及扩展：提供二级域名，支持域名绑定及免费 SSL 证书。支持 Github 或者 Gitlab 等账号登录，如果仓库已经是静态网站文件，每次 Push 到仓库都会自动部署。Vercel 打出了 free forever 的口号，也就是说在非商用的情况下，个人可以永久免费使用。支持设置环境并执行相关命令，自动部署不在话下。

    • 特性

      • 支持部署静态网页和动态接口

      • 自带域名 https

      • 自带丰富的模板

      • 官方支持 Node.js、Go、Python、Ruby。

    • Vercel 和 Github 的区别

      • Vercel 是网站部署

      • Github 是代码网盘

    • 官网

      • https://vercel.com/

    • 工作流官网

      • https://vercel.com/workflow

    • 使用文档

      • https://vercel.com/docs/cli

    • 常见命令行

      • 将 Vercel 下载到全局（npm i vercel -g），不知道有什么命令就-h

      • vercel login：登录 Vercel 账号

      • vercel dev：本地开启服务

      • vercel dev --bug：本地开启服务并打印日志

      • vercel：部署本地资源到 Vercel 上

      • vercel --prod：更新本地网页

      • vercel 可以用 vc 来代替，vc 是 Vercel 的缩写

    • 部署静态服务

      • 这里我们从零部署一个简易静态服务

      • 1.本地安装 Vercel

        • npm i vercel -g

      • 2.登录 Vercel

        • vercel login

        • 选择登录连接的方式后，会在网站弹出

      • 3.创建一个 HTML 文件，后续我们要将其上传至 Vercel 服务器上

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vercel Demo</title>
	</head>
	<body>
		<h1>Vercel Demo</h1>
	</body>
</html>

  - 4.运行，输入命令行

    - vercel dev

    - 第一次执行，根目录下没有.vercel，所以要填写一些必要信息，这时你的本地和 Vercel 服务器就绑定好了

  - 5.部署服务

    - vercel

    - 在 提示的网址 中能访问到我们的静态服务

  - 6.后续我们要更新资源，用 vercel --prod 即可

  - 7.三个命令就把本地服务部署到 Vercel 服务器上

    - vercel dev ：开发时使用，查看应用是否跑得起来

    - vercel：部署服务

    - vercel --prod：更新应用（资源）

  - 8.可以登录 [Vercel 后台](https://link.juejin.cn/?target=https%3A//vercel.com/dashboard)查看部署情况

- 部署 Node 服务

  - 部署的是 Node 服务，是后端服务，以koa.js为服务端

  - 1.同样建立新项目

    - mkdir vercel-koa2

    - cd vercel-koa2

    - npm init -y

    - npm i koa -S

    - touch index.js

  - 2.编写 index.js 中的内容

    - const Koa = require('koa');const app = new Koa();app.use(async ctx => {    ctx.body = 'Hello Vercel';});app.listen(3008, () => {    console.log('3008项目启动')});

    - PS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口

  - 3.package.json中加入命令
    - "scripts": {    "build": "node index.js",},

  - 4.vercel.json文件 配置和覆盖 vercel 默认行为

    - https://vercel.com/docs/project-configuration

    - 1.下载 @vercel/node 包
      - npm i @vercel/node -S

    - vercel.json填写配置：
      - {  "version": 2,  "builds": [    {      "src": "index.js",      "use": "@vercel/node"    }  ]}

  - 5.使用命令运行
    - vercel dev

  - 6.部署服务

    - vercel

    - 访问地址：[vercel-koa2-t511069160.vercel.app](https://link.juejin.cn?target=https%3A//vercel-koa2-t511069160.vercel.app)

  - 7.可以登录 [Vercel 后台](https://link.juejin.cn/?target=https%3A//vercel.com/dashboard)查看部署情况

- 部署API参考
  - https://tangly1024.com/article/vercel-free-serverless-api

- 文档参考
  - https://coder.itclan.cn/fontend/tools/vercel-hosting/

- [用vercel部署一个前端项目 - 掘金 (juejin.cn)](https://juejin.cn/post/7101574837943926791)

• Netlify(推荐)

  • 介绍

    • 通过 Git 即时构建您的网站并将其部署到我们的全球网络。自定义域、HTTPS、部署预览、回滚等等。

    • 对 Next.js 应用提供无与伦比的支持，平台上的零配置，从而提高开发人员的工作效率。

    • 个人项目、业余爱好网站或实验的基础知识 免费部署

    • 使用体验：Netlify 的节点设置在海外，但 Netlify 的服务速度尚可，国内部分地区可以到达高速服务。在使用 CDN 的情况下，把网站部署在 Netlify 是可以比较好的选择。Vuejs 和 Hexo 的官网都部署在 Netlify 上，其稳定性可想而知。Netlify 虽然拥有付费功能，但是基本上我们需要使用到的服务都免费。

    • 使用及扩展：提供二级域名，支持域名绑定及免费 SSL 证书。Netlify 支持 Github 或者 Gitlab 等账号登录，如果仓库已经是静态网站文件，每次 Push 到仓库 Netlify 都会自动部署。支持 Build Command，源文件也可以通过提供的环境自动编译或渲染，类似于一款 CI，与 Github Pages 功能相近。

  • 特性

    • 可以使用 CLI 上传代码

    • 支持自定义域名且自定义域名支持一键开启 https（证书来自 Let's Encrype）

    • 支持强制让用户通过 https 访问网站（开启后此功能后，http 的访问一律会 301 跳转到 https

    • 支持自动构建

    • 支持重定向（Redirects）和重写（Rewrites）功能

    • 数据通过 HTTP2 协议传输

    • 提供 webhooks 与 API

  • 网址

    • 官网

      • https://www.netlify.com/

    • 文档

      • https://docs.netlify.com/?_ga=2.213190420.1888531084.1660633380-699960057.1660633380

    • github

      • https://github.com/netlify

    • 登录

      • https://app.netlify.com/

  • 官方网站生成器：netlify-cms

    • 介绍

      • 用于静态站点生成器的基于 Git 的 CMS

    • 网址

      • github

        • https://github.com/netlify/netlify-cms

      • 官网

        • www.netlifycms.org

      • 文档

  • 参考

    • Hexo+Github+Netlify 部署个人博客 - 掘金 (juejin.cn)

• cloudflare

  • 介绍

    • Cloudflare 是一个全球网络，旨在让您连接到互联网的一切都安全、私密、快速和可靠。

    • 和其他服务结合的很好，部署完成后可以直接添加到已有域名下，统计也很方便

    • 保护您的网站、API 和互联网应用程序。

    • 保护企业网络、员工和设备。

    • 编写和部署在网络边缘运行的代码。

    • 构建很慢

  • 网址

    • 官网

      • https://www.cloudflare.com/zh-cn/

    • 文档

    • 登录

      • https://dash.cloudflare.com/

• Coding

  • 介绍

    • 免费一般扩展性限制性

    • 使用体验：Coding 是腾讯系的一个国内托管平台，对于人数较少的团体实行免费制度。服务器节点部署在国内，在国内使用访问速度较快。也是国内开放程度比较高的一个代码托管平台了，静态网站功能 Coding 最近改版了一下，相对于之前来说更稳定了一些。

    • 使用及扩展：提供二级域名，支持域名绑定及免费 SSL 证书。基于 Kubernetes 的持续部署，可以人我们体验到与 DevOps 体系紧密结合的持续部署能力。持续中提供静态网站托管，但是静态网站托管需要实名和绑定手机号。

  • 网址

    • CODING - 一站式软件研发管理平台

• GitHub Pages

  • 介绍

    • GitHub 的网站托管服务。通过简单的配置就可以把你的仓库变成一个静态资源服务器， 直接从您的 GitHub 存储库托管

    • 自带域名可 https 访问，可配置自定义域名，无法给自定义域名配置 SSL。

    • GiteePage 是国内的，访问速度比较快

    • 使用体验：可以与仓库无缝对接，高效部署，但是没用设置国内节点，在国内访问速度较慢，作为一个海外节点还是非常不错的。相对而言，使用 jsdelivr 来加速网站相关文件可以满足基本使用。查看 Github Status，Pages 服务会出现偶尔挂掉的情况，但多数仓库文档、演示等都选择了 Github Pages 服务。

    • 使用及扩展：提供二级域名，支持域名绑定及免费 SSL 证书。网站内容与仓库保存一致，自动推送。通过使用 Github Actions 具有较强扩展性。

  • GitHub Action 持续集成服务

    • 介绍

      • GitHub 的持续集成服务。持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub Actions 允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。

    • 阮一峰文档

      • https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html

    • 部署教程

      • 1. 在 Github 新建仓库并提交代码

        • git initgit add .

          • 添加暂存区

        • git commit -m "first commit"

          • 提交

        • git branch -M maingit remote add origin

          • 添加

        • git@github.com:qq9694526/blog.git

          • 地址

        • git push -u origin main

          • 提交到分支
      • 2. 生成秘钥
        • 参照官方文档生成秘钥， Select scopes 仅选择 workflow 那一项即可。ps: 创建成功记得复制秘钥
      • 3. 设置秘钥

        • 把上一步复制的秘钥粘贴进去，并起个名字，后面脚本会用到。我这里用的 ACCESS_TOKEN

        • 

      • 4. 新建 actions 脚本

        • 在根目录下依次创建.github/workflows/deploy.yml，内容如下

        • name:

        Build and Deployon:  push:	    branches:	      - mainjobs:  build-and-deploy:    runs-on: ubuntu-latest    steps:    - name: Checkout      uses: actions/checkout@master      with:        submodules: true    - name: Build and Deploy      uses: solybum/hexo-deploy@master      env:        PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }}        PUBLISH_REPOSITORY: qq9694526/blog # The repository the action should deploy to.        BRANCH: blog  # The branch the action should deploy to.        PUBLISH_DIR: ./public # The folder the action should deploy.

        • 

        • 它的作用就是当 main 分支有代码提交时，自动构建并发布到 blog 分支。

        • 这里需要修改 PERSONAL_TOKEN、PUBLISH_REPOSITORY 和 BRANCH 为自己的

        • Ps: 这是我在Actions 库里搜 hexo 抄来的，大家也可以自行选择。

      • 5. 效果展示

        • 现在提交任意代码后，脚本会被触发，且在 Actions 能看到脚本执行情况。

        • 

        • 等待执行完毕，切换到 blog 分支(上面.yml 倒数第二行有配置)，可以看到构建后的代码被提交到了这里。

        • 

        • 以后咱们每次在 main push 代码，GitHub Actions 都会自动的帮我们构建并发布到远程分支

    • 自动化部署

      • 5 分钟教你快速掌握 GitHub Actions 自动部署博客_enoyao 的博客-CSDN 博客_github 自动部署

      • 使用 GitHub Actions 自动化部署 全栈个人博客项目_继续努力就好的博客-CSDN 博客_github 自动化部署

  • GitHub Pages 托管网站

    • 官网文档

      • 创建 GitHub Pages 站点 - GitHub Docs
    • 1. 设置参考为静态资源服务器

      • 这个设置就是把你的仓库变成一个静态资源服务器

      • 

      • 如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。咱们需要修改构建配置，在_config.yml 中新增根路径配置

        • // _config.ymlroot: '/blog/'

      • 可以本地 npm run build 验证下结果。看到 public/index.html 中（拉到最下面）js 路径有以下变化，说明配置已生效。

        • <script src="/js/boot.js" ></script>
        • <script src="/blog/js/boot.js" ></script>

      • 提交代码、触发 Actions 成功后，访问地址：

        • github 用户名.github.io/仓库名
    • 2. 域名解析

      • 没有域名的请直接第四步这是我在阿里云域名的解析配置

      • 

    • 3. 设置自定义域名

      • 

      • 保存后，就可以通过www.zhaohaipeng.com/访问了

    • 4. 不自定义域名
      • 如果不自定义域名，咱们可以直接通过qq9694526.github.io/blog/访问，但打开…Hexo 官网中有相关说明

    • 常见问题

      • 1. 自动化部署后自定义域名丢失
        • 在 source 新增 CNAME 文件
      • 2. 文档描述不具体、不理解配置项的作用？
        • 可以通过查看主题源码中的.ejs 文件，分析配置的作用和获取文档中未说明的配置项

    • 图床

      • 在 Markdown 编写过程中，不可避免的需要插入图片。

      • 我一开始的操作极其繁琐：先是把本地图片放到项目 source/img 目录下，然后 push 到 github 触发自动部署，等成功后复制图片地址，最后再回到 Markdown 修改图片链接。

      • 极度不舒适！随后搁网上查看了很多方案，试了一些。

      • 最终选择了：Typora + PicGo + 七牛云。

      • Typora：世界上最漂亮的 Markdown 编辑器，支持右键自动上传图片。

      • PicGo：一个用于快速上传图片并获取图片 URL 链接的工具，支持七牛等 7 种图床。

      • 七牛云：提供免费的存储空间(10G)。优点是比 github 快，缺点是需要实名认证和一个备案过的域名。七牛提供的测试域名域名仅有 1 个月失效。

      • 七牛融合 CDN 测试域名（以 clouddn.com/qiniucdn.com/qnssl.com/qbox.me 结尾），每个域名每日限总流量 10GB，每个测试域名自创建起 30 个自然日后系统会自动回收，仅供测试使用并且不支持 Https 访问，详情查看七牛测试域名使用规范。点击下列域名可查看每个域名剩余回收时间。

      • 操作步骤大致如下：

        • 注册七牛云并创建存储空间

        • 安装 PicGo 并配置七牛图床

        • 在 Typora 中设置 PicGo

        • 详细的图片教程可以参看 CodeSheep 的白嫖七牛云作为个人博客免费图床

• GitLab Pages

  • 介绍

    • 同样跟 GitHub Pages 的功能一样，但是：

    • 自定义域名可配置 https，不过需要上传证书

  • 网址

    • 官网

      • https://docs.gitlab.com/

    • 文档

• Gitee Pages

  • 介绍

    • 免费（国内限制）扩展性较低限制性强

    • 使用体验：Gitee 是一个国内托管平台，对比 coding 来说较为封闭。静态托管功能上拥有较大限制，且无法自动部署，功能残缺。

    • 使用及扩展：提供二级域名，非付费版不支持自动部署、域名绑定及免费 SSL 证书。如果强制使用 https，可能会造成样式文件失效等问题。

  • 网址

• Bitbucket Cloud

  • 介绍

    • 跟 GitHub Pages 的功能一样，但是：

      • 无法自定义域名

      • 能且只能通过 https 协议访问（http 协议会被跳转到 https 协议）

      • 所有项目的静态网站代码都只能放在专门的站点仓库里（accountName.bitbucket.io），不能像 GitHub 那样可以在每个项目里用 gh-pages 分支保存文件

  • 网址

    • 官网

      • https://support.atlassian.com/

    • 文档

  • aerobatic

    • 介绍

      • Bitbucket 旗下的静态网站托管服务。

      • 可以使用 CLI 上传代码

      • 支持自动构建（Continuous Deployment）

      • 可以自定义域名但是是收费功能，自定义域名支持 https 且不需要提供证书，它会帮你生成一个

    • 网址

      • https://www.aerobatic.com/

• Surge.sh

  • 介绍

    • 面向前端开发人员的静态 Web 发布

    • 简单的单命令 Web 发布。免费发布 HTML、CSS 和 JS，无需离开命令行

    • 只能使用 CLI 上传代码

    • 支持自定义域名，但开启 SSL 是收费功能且需要自行上传证书

    • 支持 200.html —— 适用于使用 History API 的 SPA

  • 网址

    • 官网

      • https://surge.sh/

    • 文档

• Firebase Hosting

  • 特性

    • 只能使用 CLI 上传代码

    • 支持自定义域名并支持一键开启 https

    • 支持重定向（Redirects）和重写（Rewrites）功能（当网站使用 History API 时特别有用

    • 有被墙的风险……

  • 网址

    • 官网

      • firebase.google.com

    • 文档

• now

  • 介绍

    • 可以使用 CLI 上传代码，或者链接一个 Git 仓库

    • 不仅提供静态网站托管，同时也支持托管 Node.js 服务

    • 支持自定义域名且自定义域名支持一键开启 https（证书来自 Let's Encrype）

    • 数据通过 HTTP2 协议传输

    • 提供 API

    • 顺便托管 Node.js 服务可以使用这个

  • 网址

    • 官网

      • https://zeit.co/now

    • 文档

• osrc

  • 官网
    • https://www.osrc.com/

• 介绍一些免费好用的静态网站托管服务 · Issue #55 · lmk123/blog (github.com)

• Serverless 平台

  • Heroku

    • 介绍

      • 支持 Docker，老牌 Serverless 平台，免费提供少量数据库空间，未绑定银行卡每月应用时间 550 小时，绑定后增加 450 小时

    • 官网

  • cloudflare Workers

    • 介绍

      • Cloudfalare 的新产品，似乎仅支持 js

    • 官网

  • 腾讯云函数

    • 介绍

    • 官网

  • 阿里云 Serverless

    • 介绍

    • 官网

  • LeanCloud

    • 介绍

      • 每天有一定的休眠时间，有少量免费资源

    • 官网

  • GCP

    • 介绍

      • 谷歌云平台，老牌 Serverless，国内无法访问

    • 官网

  • Glitch

    • 介绍

      • 免费每个月 1000 小时，无需银行卡，无数据库，原生支持 js，其他编程语言也有办法支持

    • 网址

      • https://glitch.com/

  • TCB

    • 介绍

      • 付费扩展性高一般限制性

      • 使用体验：TCB(Tencent CloudBase）采用 serverless 架构，提供静态托管服务。我的主站就是使用 TCB，相对而言因为付费了，所以效果较好，在全国各地有 CDN 节点，目前使用是因为腾讯的赞助计划，如果赞助计划失效了，价格过高可能会考虑切换平台。空间较大，流量较多，已经充当 CDN 使用了。

      • 使用及扩展：提供二级域名，支持自动部署及 免费 SSL 证书，但是 SSL 证书申请可能需要备案。扩展性较强，可以使用 CLI 工具或者 Tencent CloudBase Github Action 来部署。

    • 网址

• 免费托管服务

  • OPENSHIFT (www.openshift.com)

    • ## 白嫖项目

      • 2GB RAM, 2GB 硬盘空间

      • 无网络带宽流量限制

      • 一个账户只有一免费项目

      • 无需信用卡

      • 基于社区的客服

      • 安全性好

    • ## 限制

      • 不能自己配置域名

      • 自动休眠：项目如果 30 分钟没有请求就会自动进入休眠状态；每 72 小时，强制要求休眠时间 18 小时（项目可用性： 75%）

      • 会过期：免费的托管服务会再 60 天后过期，过期后重新激活下就好了。（永久白嫖）

    • 账号注册好了，要排队才能获得主机资源。都排了 3-4 个小时了，还是没拿到主机资源；OpenShift 让我先回家等消息，好了会发邮件的。所以想白嫖的同学要提前申请，或者换后面的服务。（最后是在两天后收到了 openShift 的来信，还提醒了我 60 天后会过期的，记得好好用！）

    • 部署方式：Git（采用 Paas 的服务）

      • 最低档付费：50 刀/月

      • 适合项目：简单的后端服务 ，API 和聊天机器人

      • 虽然 Openshift 项目是采用 Git 方式来部署，但是实际用的时候还是需要一些 Kubernetes 和 Docker 的基础知识才能顺利部署。

  • Openode (www.openode.io)

    • ## 白嫖项目

      • 100Mb RAM, 1GB SSD 硬盘空间

      • 一个月 10G 的流量

      • 一个账户一个免费项目

      • 不需要信用卡

    • ## 限制

      • 免费计划只能支持支持 xxxx.openode.io 形式的二级域名，付费了就能使用自定义域名

      • 每一个礼拜就需要重新部署一次，否则就服务就会下线；而且如果你的项目是开源的话，那代码会在 openode 的 hub 服务公开。

      • 如果项目不是学生项的话，代码强制开源。

      • 部署方式：openode 的命令行程序，通过 npm 就能安装；目是采用 PAAS 的方式

      • 最低档付费：0.40 刀/月

      • 适合项目：简单的后端服务 ，API，聊天机器人和开源项目

    • openode 的项目其实是采用 docker 容器的方式部署到云端的，所以如果有特殊要求，需要自己修改下 openode 提供的 dockerfile 模板。基于 docker 容器的话，理论上就可以部署任何开发语言的项目了。但这里还有个限制就是只能对外暴露 80 端口。

    • 注册完 openode 的账户记得立即去邮箱点击下激活邮件。未激活的账号是不能部署项目

  • Heroku (www.heroku.com)

    • ## 限制

      • 实例 30 分钟不活跃的话，会根据账户的可用时间决定是否进入休眠状态。

      • 有个小 tip 就是，你可以用一些免费的服务让你的实例一直保持清醒；比如https://uptimerobot.com/

      • 部署方式：采用 Git。

      • 最低档付费：7 刀/月

      • 适合项目：全栈项目和其他一些小项目

      • Heroku 是比较老牌的托管服务了，弄了一个基本不断的 curl 自己的服务，让他不要休眠。

    • ## 白嫖项目

      • 512M 内存，无持久化存储

      • 无限网络流量

      • 信用卡不是必须，为绑定信用卡的话部署的事例只有 550 小时的可用时间（约 75%的可用）；如果绑定信用卡的话每个月有 1000 个小时的可用时间。如果你只有一个项目的好是绰绰有余了。

      • 客服：只有工作时间，并且有 1 天以上的延迟。

  • Now.sh (https://zeit.co)

    • ## 限制

      • 最大文件限制 100mb

      • 原文作者曾经历过服务器崩溃的严重事故, pshu 用用还是感觉挺好的

      • 部署方式：采用命令行程序 now，多种方式可以安装，还有 GUI 的方式；支持集成 Github。

      • 最低档付费：0.99 刀/月

      • 适合项目：轻量计算后端或者全栈项目

      • Now.sh 是一个对开发人员特别友好的托管服务，所有的服务都能在 now 这个命令行工具里面完成。这么 Geek 的托管服务就是出自程序员大牛 Guillermo Rauch 之手 。Rauch 何许人？ Socket.io 和 mongoose 这 node.js 界鼎鼎有名的包就出自他手。现在 now 升级到了 2.0 版本了，很多对开发者贴心的 feature 加进去了，非常值得一试。

    • ## 白嫖项目

      • 无服务

      • RAM 无上限，100Gb 的存储空间

      • 网络流量 100G/月

      • 支持自定义域名（在域名提供商那配置下 CNAME 即可，而且直接支持 https）

      • 无需信用卡

      • 客服：社区和 Twitter

      • 每天部署上限 1000 次

      • 请求最长相应时间 10 秒

  • Glitch (https://glitch.com)

    • ## 白嫖项目

      • glitch 是一个在 web 上发现和创造好东西的地方，就是说在这里可以免费托管 app

      • glitch 网站上没有写什么具体限制，你的应用跑的一个容器里面

      • 无网络限制

      • 可以配置自定义域名，但是需要消耗社区内的积分，积分是通过帮助别人得到感谢来获得

      • 无需信用卡

    • ## 限制

      • 默认情况托管项目都是开源的，当然也你可以设置成私有项目

      • 因为没有具体的限制说明，大家可以看看他的帮助页面

      • 部署方式：支持从 Github，Gitlab 和 Bitbucket 导入项目，但是只能是导入

      • 最低档付费：无（完全免费）

      • 适合项目：什么项目都可以，非常值得一试

• 网站托管服务平台：应用部署（收费）

  • 腾讯云 cos / 阿里 oss

  • coding

    • CODING - 一站式软件研发管理平台

    • https://coding.net/

• 工具或组件

  • 图床构建

    • 七牛云 + Typora + PicGo 图床

    • 七牛云或者 OSS，COS

• 部署和工具参考

  • https://coder.itclan.cn/fontend/tools/#%E5%B7%A5%E6%AC%B2%E5%96%84%E5%85%B6%E4%BA%8B-%E5%BF%85%E5%85%88%E5%88%A9%E5%85%B6%E5%99%A8

• 网页特效

  • 看板娘

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>看板娘</title>
	</head>
	<body>
		<!-- 看板娘 -->
		<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"
		/>
		<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
	</body>
</html>

• 鼠标点击出现自定义文字

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			div {
				height: 100vh;
			}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	</head>
	<body style="width: 100%;height: 100%;">
		<div></div>
		<script src="http://zhouql.vip/cdn/click1.js"></script>
	</body>
</html>

• 樱花飘落特效

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>樱花特效</title>
	</head>
	<body>
		<script
			type="text/javascript"
			src="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/static/js/sakura-less.js"
		></script>
	</body>
</html>

• 小猫返回顶部

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>返回顶部</title>
		<link
			rel="stylesheet"
			type="text/css"
			href="http://zhouql.vip/cdn/css/szgotop.css"
		/>
	</head>
	<body style="height: 2000px;">
		<div
			class="back-to-top cd-top faa-float animated cd-is-visible"
			style="top: -900px;"
		></div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="http://zhouql.vip/cdn/szgotop.js"></script>
	</body>
</html>

• 可爱捂脸登录

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>掘金登录小案例</title>
		<!-- bootstrap4图标库引入 -->
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"
		/>
		<!-- css文件引入 -->
		<link rel="stylesheet" href="./index.css" />
		<!-- 网站图标 -->
		<link
			rel="shortcut icon"
			href="http://zhouql.vip/images/tou/t1.png"
			type="image/x-icon"
		/>
	</head>
	<body>
		<div id="app">
			<form action="" method="get">
				<button></button>
				<h2>手机登录</h2>
				<p>
					<input
						type="text"
						name=""
						autofocus
						id="phone"
						placeholder="请输入手机号"
					/>
				</p>
				<p><input type="password" name="" id="pwd" placeholder="验证码" /></p>
				<p><input type="submit" value="登录" /></p>
				<a href="">其他登录方式</a>
				<p>
					<span>注册登录即表示同意 <small>用户协议，隐私政策</small></span>
				</p>
			</form>
			<img
				class="t1"
				src="./images/4f6f6f316cde4398d201cd67e44ddea3.svg"
				alt=""
			/>
			<img
				class="t2"
				src="./images/500c1180a96859e5c54a5359f024a397.svg"
				alt=""
			/>
		</div>
		<script>
			document.querySelector("#phone").addEventListener("focus", function () {
				document.querySelector(".t2").style.display = "block";
			});
			document.querySelector("#phone").addEventListener("blur", function () {
				document.querySelector(".t2").style.display = "none";
			});
			document.querySelector("#pwd").addEventListener("focus", function () {
				document.querySelector(".t1").style.display = "block";
			});
			document.querySelector("#pwd").addEventListener("blur", function () {
				document.querySelector(".t1").style.display = "none";
			});
			document.querySelector("button").addEventListener("click", function (e) {
				document.body.style.backgroundColor = "#fff";
				document.querySelector("#app").style.display = "none";
				e.preventDefault();
			});
		</script>
	</body>
</html>

- css
  - *{    margin: 0;    padding: 0;    box-sizing: border-box;}body{    display: flex;    align-items: center;    justify-content: center;    min-height: 100vh;    background-color: #aaabab;}#app{    position: relative;    height: 290px;    width: 350px;    background-color: #fff;}#app form{    position: relative;    padding: 20px;}#app form h2{    color: #333333;    font-size: 18px;    user-select: none;}#app form p input{    width: 100%;    height: 38px;    color: #828282;    border: 1px solid #ddd;    padding-left: 8px;    margin-top: 18px;    border-radius: 2px;    outline: none;}#app form p:nth-of-type(3) input{    background-color: #007fff;    color: #edf6ff;}#app form a{    text-decoration: none;    color: #198fff;    margin: 10px 0;    display: inline-block;    font-size: 15px;}#app form p span{    margin-top: 10px;    font-size: 14px;    color: #847f7a;}#app form p span small{    font-size: 14px;    color: #198fff;}button{    position: absolute;    top: 20px;    right: 20px;    border: none;    background-color: transparent;    cursor: pointer;}button::after{    font-family: "bootstrap-icons";    content: '\F62A';    font-size: 24px;    color: #afafaf;}#app img{    position: absolute;    width: 100px;        left: 50%;    transform: translateX(-50%);    display: none;}#app img:nth-of-type(1){    top: -64px;}#app img:nth-of-type(2){    top: -62px;}

• 鼠标点击好看爆炸效果

  • <!--给网站添加鼠标点击爆炸五颜六色特效-->
    <script src="http://zhouql.vip/cdn/blast.js"></script>

博客写作和其他生产力工具

• 同步空间

• Markdown 编辑器

  • Typora：(收费 89 永久)

    • 介绍

      • 主要用于排版，我基于现有的 css 样式，定制了好几款文章、简历样式，文章写好之后，会根据不同的场景使用不同的样式，之后复制粘贴到 WX、知乎、掘金等等平台

      • 风格极简 / 多种主题 / 支持 macOS，Windows 及 Linux

      • 实时预览 / 图片与文字 / 代码块 / 数学公式 / 图表

      • 目录大纲 / 文件管理 / 导入与导出

    • 官网

      • Typora 官方中文站 (typoraio.cn)

  • Table Convert Online：Markdown 表格生成器

    • 介绍

      • 除了能快速生成格式化后的 Markdown 表格外，还支持导入各种数据，在线编辑

      • 支持 Excel、JSON、HTML、CSV 甚至是从 URL 中提取 HTML 表格转为 Markdown 表格，多功能集一身，并且融合在一个界面

    • 网址

      • https://tableconvert.com/

  • Obsidian 主要用于梳理知识框架、知识脉络，这里只会存储 整理好 或者 已经发布 的文章，不会有临时笔记之类的

  • Obsidian 提供了强大的插件，自动格式化文章的插件，实在是太好用了，是码字者的必备神器

    • 中文和英文/数字之间自动添加空格

    • 中文字符间自动去掉空格

    • 数字和标点之间自动添加空格

    • 行内代码和文字之间自动添加空格

    • 中文符号自动补齐

    • 行内自动格式化，首字母自动大写

  • Notion：这是一款笔记、知识库和任务管理整合在一起的协作工具，这里存放了所有的内容，包含写作、视频的规划、Leetcode 刷题规划、每日规划与总结、各类付费账号的到期管理、网络上的文章分类、开源项目的管理等等。

    • https://github.com/fabiospampinato/notable

  • Mweb：用于写作、记录一些临时笔记和临时的想法、管理外部的文档等等

• VS Code 编辑器写作

  • Markdown All in One

    • Markdown 编辑查看

  • Word Count

  • Polacode-2020

    • 代码截图

• 画图工具

  • ProcessOn

    • 介绍

      • 国产在线图片编辑器，支持多人协作。同时，还有大量好看的图标支持，可以让我们的绘图更加生动

    • 网址

      • https://www.processon.com

  • excalidraw

    • 介绍

      • 开源软件，人气很高，一直在维护

      • 操作简洁，有很多素材库可直接使用

      • 很棒的手画风格，看着非常舒服

    • 网址

      • 官网

      • github

• 截图

  • snipaste

    • 介绍

      • snipaste 是一款截图+贴图工具，按住 F1 快捷键就可轻松截图，还可调整窗口大小和移动截图窗口，除此之外，我还经常使用 snipaste 量尺寸，按 c 快捷键获取指定位置的色值，用图钉固定在某个窗口查看等等

    • 官网

      • https://www.snipaste.com/

• gif 录屏

  • gifox

    • 介绍

      • mac 系统 gif 录制工具

      • 提供全屏、窗口和部分选择模式录制 gif 动画

      • 支持视频转 gif 功能

      • 支持录制键盘输入

      • 支持自定义快捷键，使用更加便捷

      • 支持逐帧处理 gif

    • 下载

  • LICEcap

    • LICEcap 一款 windows 轻量级屏幕录制工具，可以导出 GIF 动画图片格式，支持导出 GIF 动画图片格式，可灵活调整录制窗口大小。

    • https://www.cockos.com/licecap/

• 图片存储

• 粘贴板

  • paste

• 思维导图和文档

  • xmind

  • 幕布

  • mindnode

  • 腾讯文档

  • 语雀

• 图床管理

  • PicGo
    • https://molunerfinn.com/PicGo/

• hightlight.js：代码高亮

  • 介绍

    • 适用于所有主流编程语言，兼容性好，多种多样的预设样式

  • 网址

    • github

      • https://github.com/highlightjs/highlight.js

    • 官网

      • https://highlightjs.org/

• utools 工具平台插件集合

  • 介绍

    • 一切皆插件，一个插件解决一个问题

    • 快捷键迅速启动，即用即走，不中断当下的工作

    • 体积小，流畅，不卡顿

  • 网址

    • https://u.tools/

• 文章多平台发布：

  • markdown-nice

    • 使用开源项目 mdnice 并进行本地化代码改造

    • 文章发布步骤如下：

      • 写好文章后，打开本地项目，导入文章，做了实时自动读取功能

      • 选择我想用的主题，可以根据自己的需求创建合适的主题，比如通用主题、掘金主题、公众号主题

      • 点击右侧的平台按钮，如掘金、公众号等平台，会自动将内容复制

      • 复制内容后，到各个平台的编辑中，进行粘贴，还原度非常高，大大节省了多平台调整文章版式的时间

  • 多博客平台文章同步

    • 介绍

      • 一键同步文章到多个内容平台，支持今日头条、WordPress、知乎、简书、掘金、CSDN、typecho 各大平台，一次发布，多平台同步发布。解放个人生产力

    • 网址

      • 官网

        • https://www.wechatsync.com/?utm_source=github_info

      • github

        • https://github.com/wechatsync/Wechatsync

• UI 工具

  • 我用过 ps 、 sketch 、 figma 。 在没使用 figma 的时候， 蓝湖也用过。不过目前我使用最多的是 figma ， 直接 web 端查看和编辑，很方便。 sketch 也带着用。随便提一句， figma 的 cto 就是 esbuild 的作者，非常强。可以预见的是，在未来， web 端 figma 之类的 ui 协同软件是主流了。

• 抓包-charles | wireshark

  • 目前 mac 开发环境下，我只用 charles 和 wireshark 。 使用如下：绝多数情况下，只用 charles ， 需要抓更底层和细节的内容就用 wireshark 。

  • 我之前也抱怨过 charles 体验不好，折腾过 proxyman ，但是在考虑到公司测试开发都使用 charles 情况下，就继续使用了，这个要结合工作情况去选择的。就像 ppt 那样，大家都用 wps 进行工作 ppt 交流，你去用 keynote ，就会存在一些问题。

• api 工具-apifox

  • api 工具是指接口文档、接口调试、接口 mock 等操作的工具集。之前折腾过各种 api 工具，现在我只用 apifox ， 它集成了接口文档、接口调试、接口 mock 等操作，还有很多开放 api 。

• 数据库-navicat

  • 折腾过很多数据库管理软件，如 MongoDB Compass 、 nosqlbooster for mongodb 、 MySQL Workbench 、 navicat 。 自从 navicat 支持 mongodb 后，我就固定使用 navicat 作为我的数据库管理软件了，功能稳定且强大。

• 掘金写作

  • 为什么我排版这么好看？怎么给文字变色的？ - 掘金 (juejin.cn)

  • 你的掘金文章本可以这么炫（博客美化工具一波带走） - 掘金 (juejin.cn)

• markdown 的语法技巧

  • 超实用 markdown 的语法技巧（表格、文字缩进、文字居中、文字颜色、背景色、代码高亮、标记） - 掘金 (juejin.cn)

• 文章书籍管理

  • gitbook

    • docs.gitbook.com/

  • Introduction - Census Docs (getcensus.com)

  • Choose your documentation - Documentation portal (forestadmin.com)

  • What is GitBook - GitBook Documentation

  • GitBook 安装部署和使用教程，创建文档网站的利器悟空非空也的博客-CSDN 博客部署 gitbook

• 【好物分享】分享给前端开发的 28 个资源（网站、软件、插件），简直是提高效率必备 - 掘金 (juejin.cn)

• 工具网站 - 掘金 (juejin.cn)

• 推荐 8 个值得推荐的神器软件和网站任务目标_办事 (sohu.com)

• (23 条消息) 有哪些开源或免费软件吊打商业收费软件的例子? - 知乎 (zhihu.com)

• carbon：将代码保存成图片

  • 介绍

    • 将代码保存成图片的开源服务，可以用来上传到社交媒体。

  • 网址

    • https://carbon.now.sh/

书籍笔记工具

• 匠果_你的积累值得成书 (jiangguo.net)

• 飞书

• 语雀

• GitBook

• 静态网站生成器

• Notion,笔记软件中的瑞士军刀，支持块和 markdown，其 database + 最近官方出的 api 绝杀

• wolai，Notion 的本土化软件。缺少 database，不需要的可以用 wolai

• Obisidian，双联笔记，国人开发，我目前最喜欢的笔记软件

• vscode，装几个插件也能写笔记

• typora，所见即所得，美观

• 语雀，支持块和 markdown，块没有 notion 那么多

• onenote 有 onemark 插件支持 markdown 了

  • OneMark - Markdown addin for OneNote (neux.studio)

• zotero

• Trilium

  • zadam/trilium: Build your personal knowledge base with Trilium Notes (github.com)

• yn

  • 程序员的可破解的 markdown 笔记应用程序。版本控制、AI 完成、思维导图、文档加密、代码片段运行、集成终端、图表嵌入、HTML 小程序、Reveal.js 插件和宏替换。

  • 咕噜咕噜/yn：程序员的可破解的降价笔记应用程序。版本控制、AI 完成、思维导图、文档加密、代码片段运行、集成终端、图表嵌入、HTML 小程序、显示.js 插件和宏替换。 (github.com)

  • yank-note.vercel.app

• Mermaid 在线作图

  • Mermaid 是一个网页作图的 JS 库，该页面可以实时编辑预览 Mermaid 图形

  • 官网

    • https://mermaid-js.github.io/mermaid/

  • github

    • https://github.com/mermaid-js/mermaid

网站技术分析

• 介绍

  • 在线网站的使用技术分析，包括使用的开源库和框架，有浏览器插件可供下载

• https://www.wappalyzer.com/technologies/

项目 README.md 说明美化

• github-profile-readme-generator：使用最小的 UI 使用最新的附加组件（如访问者计数，GitHub 统计信息等）

  • 介绍

    • 🚀 使用最小的 UI 使用最新的附加组件（如访问者计数，GitHub 统计信息等）轻松生成 GitHub 配置文件 README

  • 网址

    • github

      • https://github.com/rahuldkjain/github-profile-readme-generator

    • 官网

      • GitHub Profile Readme Generator | GitHub Profile Readme Generator (rahuldkjain.github.io)

• beautify-github-profile：更漂亮，更有吸引力的 github 配置文件

  • 介绍

    • 这个存储库可以帮助您拥有更漂亮，更有吸引力的 github 配置文件，并且您可以访问一套完整的工具和指南来美化您的 github 配置文件。🪄 ⭐

  • github

    • https://github.com/rzashakeri/beautify-github-profile

• emoji-cheat-sheet：表情符号备忘单

  • 介绍

    • 此备忘单是从 GitHub 表情符号 API 和 Unicode 完整表情符号列表自动生成的。

  • 网址

    • https://github.com/ikatyang/emoji-cheat-sheet

    • https://www.webfx.com/tools/emoji-cheat-sheet/

    • https://www.emojidaquan.com/

• README：README 文件语法解读

  • 介绍

    • 该文件用来测试和展示书写 README 的各种 markdown 语法。GitHub 的 markdown 语法在标准的 markdown 语法基础上做了扩充，称之为 GitHub Flavored Markdown。简称 GFM，GFM 在 GitHub 上有广泛应用，除了 README 文件外，issues 和 wiki 均支持 markdown 语法。

  • 网址

    • github

      • https://github.com/guodongxiaren/README

    • 教程

      • https://blog.csdn.net/guodongxiaren/article/details/23690801

• doctoc：为本地 git 存储库中的 Markdown 文件生成目录

  • 介绍

    • 📜 为本地 git 存储库中的 Markdown 文件生成目录。链接与 github 或其他网站生成的锚点兼容

  • 网址

    • github

      • https://github.com/thlorenz/doctoc

    • 官网

      • www.npmjs.com/package/doctoc

• markdown-badges：Markdown 的徽章

  • 介绍

    • 个人开发人员品牌、个人资料和项目的徽章。

    • 将徽章添加到您的个人资料和项目

  • 网址

    • github

      • https://github.com/Ileriayo/markdown-badges

    • 官网

      • ileriayo.github.io/markdown-badges

• badges：😎Markdown 代码的徽章

  • 介绍

    • 📝 许多小徽章的 Markdown 代码 🎀 📌（shields.io、forthebadge.com 等）😎.

  • 网址

    • github

      • https://github.com/Naereen/badges

    • 官网

      • naereen.github.io/badges/

• shields：简洁、一致且清晰的 markdown 徽章和徽章生成

  • 介绍

    • 简洁、一致且清晰的 markdown 徽章，采用 SVG 和栅格格式

  • 网址

    • github

      • https://github.com/badges/shields

    • 官网

      • https://shields.io/

• for-the-badge：徽章和徽章生成

  • 介绍

  • 网址

    • github

      • https://github.com/BraveUX/for-the-badge

    • 官网

      • https://forthebadge.com/

• readme.so：最简单方法创建 README.md

  • 介绍

    • Readme.so 是一个在线编辑器，可帮助开发人员为其项目制作自述文件。

  • 网址

    • 官网

      • readme.so

    • github

      • https://github.com/octokatherine/readme.so

  • gh-md-toc

    • 轻松创建 GitHub README.md 目录

    • github

      • https://github.com/ekalinin/github-markdown-toc

• • 介绍

  • 网址

• • 介绍

  • 网址

• Search · README (github.com)

• 徽章实现原理

  • git markdown 文件中小徽章实现原理和实现自己的版本控制逻辑_努力搬砖猿的博客-CSDN 博客_markdown 徽章

  • VLOOK 13！标签、徽章、表格阅读模式强化，实用好用的 Markdown 主题包和增强插件 | 码农网 (codercto.com)

  • 好看的博客

    • 简介 - VLOOK™ - Markdown 编辑器 Typora 的主题包和增强插件 (gitee.io)

  • 工具资源系列之 github 上各式各样的小徽章从何而来? - JavaShuo

  • GitHub 润色框架，让你的 GitHub 不再索然无味！！！ - 掘金 (juejin.cn)

  • 一个前端程序员的 README 能写到多好看 - 掘金 (juejin.cn)

• markdown-it-emoji/full.json at master · markdown-it/markdown-it-emoji (github.com)

git 提交的表情符号

• Emoji 简介 - 阮一峰的网络日志 (ruanyifeng.com)

• 【Git/GitHub/VSCode】Git 提交时使用 EMOJI 表情、在 VS Code 中使用 emoji commit_memcpy0 的博客-CSDN 博客_vscode 表情

• https://gitmoji.dev/

• 😋 Get Emoji — All Emojis to ✂️ Copy and 📋 Paste 👌

• https://www.webfx.com/tools/emoji-cheat-sheet/

• 🤣 Emoji 表情大全，颜文字百科 💌 - EmojiXD

• emoji 语言 - CSDN

• Emoji 大全 | Emoji 表情符号词典 📓 | EmojiAll 中文官方网站

• emoji 表情符号大全-emoji 在线复制粘贴 (emoji6.com)

• emoji 符号大全 (fhdq.net)

• 📖 Emoji 列表 | EmojiAll

• 最新 emoji 表情符号_全部带含义可复制的 Emoji 大全(fuhaozi.cn)

• Full Emoji List, v15.0 (unicode.org)

• node-emoji - npm (npmjs.com)

CSS 样式工具

• 工具包

  • tool：css 在线工具

    • 介绍

      • css 代码格式化

      • 像素单位转换工具

    • https://tool.lu/css/

  • CSS 样式工具合集

    • 介绍

      • 渐变色生成

      • 图片裁剪

      • 颜色选择器

      • 斑点生成器

      • 弹框生成器

      • 网格生成器

      • 渐变生成器

      • 动画生成器

      • .....等等工具

    • 网址

      • https://angrytools.com/

  • 零代码工具箱

    • 介绍

      • 在线生成 CSS 玻璃形态效果

        • 在线制作玻璃形态效果，实时预览

      • CSS 按钮在线设计

        • 在线设计按钮样式，并实时预览效果

      • CSS 文本排版工具

        • 可视化对文本排版，并生成 CSS 代码

      • CSS 背景生成器

        • 以像素为单位绘制任何 CSS 背景

      • SVG 波浪背景生成器

        • 快速制作波浪背景

      • CSS 精美样式库

        • 持续更新各种按钮、卡片等网页精美样式

      • 在线生成 CSS 渐变色工具

        • 功能强大，免费的渐变色生成工具

    • https://www.lingdaima.com/

  • 多个 CSS 工具

    • 介绍

      • 渐变

      • ...

    • https://bennettfeely.com/

• 组件样式 UI 工具集合

  • 为 Web 开发人员提供的免费单一用途在线工具的集合

    • https://tiny-helpers.dev/

  • 纯 CSS 实现的一套页面元素、组件集

    • https://csslayout.io/

  • 100 个现代 CSS 按钮

    • https://github.com/ui-buttons/core

  • awwwards：网站设计灵感

    • 介绍

      • 如果你要找网站设计灵感，那么 Awwwards 一定是你必看的网站，这里囊括了来自全球优秀设计师作品。

      • 如果网站设计有什么流行趋势，那一定是从这里先开始。

    • https://www.awwwards.com/

• 页面背景或者颜色网站工具

  • CSS3 Patterns Gallery

    • 介绍

      • Lea Verou ，CSS 揭秘（图灵出品）作者，她徒手写了几十个 纯 CSS 实现的背景图样式。 这个网站上提供了她的代码。

    • 网址

      • https://projects.verou.me/css3patterns/

      • https://lea.verou.me/

  • CSS3 Gradients

    • 介绍

      • 纯 CSS 背景

    • 网址

      • http://www.standardista.com/cssgradients/

  • CSS Gradients

    • 介绍

      • 也是纯 CSS 代码背景

      • 作者：上面的

        • 多个 CSS 工具

    • 网址

      • https://bennettfeely.com/gradients/

  • CSS Flags

    • 介绍

      • 使用 纯 CSS 的方式画出多国国旗。“右键 - 检查网页源代码” 可以获取代码。

    • 网址

      • http://www.standardista.com/CSS3gradients/flags.html

  • Hero Patterns

    • 介绍

      • Hero Patterns 的背景图使用了 base64 的方式去实现的

      • 网站提供了几十款纹理，你可以根据自己的需求设置两种对比色和不透明度。

      • 完成后会返回一段 CSS 代码

    • 网址

      • https://heropatterns.com/

  • HUE.CSS

    • 介绍

      • 使用 CSS 背景渐变 的方式做出的数十款高端大气的背景

    • 网址

      • http://evankarageorgos.github.io/hue/grid.html

  • Pure CSS Stripes Generator

    • 介绍

      • 生成 条纹背景 的代码。 你可以在网站上根据自己的需求设置条纹的颜色、大小、倾斜角度等属性。 最后会返回一段 css 代码给你。

    • 网址

      • https://stripesgenerator.com/

  • Glass Morphism：毛玻璃磨砂效果生成

    • 介绍

      • 设置 毛玻璃背景 样式，你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。 最后会返回 html 和 css 代码给你

    • 网址

      • https://glassgenerator.netlify.app/

  • uiGradients

    • 介绍

      • 提供了不同色系搭配的渐变颜色代码

    • 网址

      • https://uigradients.com/

  • Gradient Colors Collection Palette

    • 介绍

      • 几十种渐变色，可一键复制 css 代码

    • 网址

      • https://webkul.github.io/coolhue/

  • webgradients

    • 介绍

      • 提供了几十个配色方案，有双色的，也有多色的。提供一键复制 css 代码

    • 网址

      • https://webgradients.com/

  • Cool Backgrounds

    • 介绍

      • 可以生成 5 种类型 的背景图片，并且提供多套成熟的配色方案供你选择。 但该网站生成的是背景图片，不是代码。

    • 网址

      • https://coolbackgrounds.io/

  • Svg Wave

    • 介绍

      • 生成波浪背景图，可以自定义波浪的幅度、颜色等属性。 支持 SVG 和 PNG 下载。

    • 网址

      • https://svgwave.in/

  • Subtle Patterns

    • 介绍

      • 提供了几十种纹理图

    • 网址

      • https://www.toptal.com/designers/subtlepatterns/

  • Stripe Generator

    • 介绍

      • 可配置的条纹背景图片。

    • 网址

      • http://www.stripegenerator.com/

  • ZenBG

    • 介绍

      • 在线设置纹理背景和渐变颜色，最后融合在一起生成一张好看的图片。 同时还提供 css 代码给你参考，告诉你如何更好的使用这张图片。

    • 网址

      • https://galactic.ink/bg/

  • Patterninja

    • 介绍

      • 帮你生成可平铺的背景图，提供 svg 和 png 下载

    • 网址

      • https://patterninja.com/

  • The Pattern Library

    • 介绍

      • 提供几十款可平铺的好看背景。 注意：下载按钮在网页的左上角。

    • 网址

      • http://thepatternlibrary.com/

  • svg 背景

    • How to Use SVG Patterns as Backgrounds (tutsplus.com)

  • 背景图案

    • https://www.magicpattern.design/tools/css-backgrounds

  • pattern-css：CSS 库，用美丽的图案填充你的空背景

    • https://bansal.io/pattern-css

  • 布条背景图生成器

    • https://stripesgenerator.com/

  • 波纹生成器

    • https://svgwave.in/

  • numl design 的主题生成器

    • https://theme.numl.design/

  • color-accessibility

    • adobe 针对色盲用户可访问性，提供的一个色彩拾取工具

    • https://color.adobe.com/zh/create/color-accessibility

• CSS 样式生成工具

  • CSS Button Generator

    • CSS Button Generator 是一个免费的在线工具，可让您创建跨浏览器的 HTML 和 CSS 按钮样式，您不必学习任何复杂的 CSS 规则。只需单击并滑动即可制作 CSS 3 按钮。很多漂亮的按钮样本。

    • https://cssbuttongenerator.com/

  • fancy-border-radius：花式边界半径

    • 通过拖拽的形式生成需要的 border-radius 样式 CSS 代码

    • https://9elements.github.io/fancy-border-radius/

  • 阴影拟态拟物生成

    • smooth shadow：平滑阴影生成

      • https://shadows.brumm.af/

    • Neumorphism：阴影生成器(拟物拟态生成)

      • 此网站通过 选择颜色：或大小：半径：距离：强度：模糊：形状：复制边框半径：50px;背景，生成非常 nice 的阴影，让你的界面更加的美观自然。

      • https://neumorphism.io/

    • CSS3 Box Shadow(阴影)效果在线调试工具

      • CSS3 Box Shadow(阴影)效果在线调试工具 - 站长辅助工具 - W3Cschool

    • 在线 CSS 盒子阴影效果代码工具-站长工具

    • Shadows Brumm：平滑阴影

      • 介绍

        • 可以生成多个分层阴影，提供非常酷的效果，也可以从曲线中自定义颜色。

      • 网址

        • https://shadows.brumm.af/

    • css-box-shadow：在线工具 CSS 框阴影生成器

      • https://bfotool.com/zh/css-box-shadow

    • box-shadow：多种阴影集合

      • https://box-shadow.art/

    • CSS3 框阴影（box-shadow）效果在线生成器

      • https://techbrood.com/tool?p=cg-box-shadow

  • Box Shadow | 前端开发 CSS 阴影效果生成器

    • Box-shadow 左右生成器, 箱形阴影生成器, 框阴影右, 盒子阴影：插图, 仅底部框阴影, 盒子阴影不起作用, 箱形阴影 - 顶部, Td 阴影 CSS (zditect.com)

    • Box Shadow | 前端开发 CSS 阴影效果生成器 | Boss 设计 (bossdesign.cn)

  • Shadow Brumm：可视化阴影制作

    • 介绍

      • 使用 CSS 轻松创建凉爽且平滑的阴影。你只需定义一些阴影选项，它就会自动为你生成代码。

    • 网址

      • https://shadows.brumm.af/

  • 波浪生成器

    • getwaves：波浪生成器

      • 介绍

        • 它允许你使用 CSS 为你的项目创建 SVG 波形。它使它变得更容易，你只需选择选项，然后该工具就会为你的 wave 设计生成正确的 CSS 代码。

        • 生成简单的波浪，并有一些自定义功能

        • 如果这是你想要的，你还可以下载你创建的 SVG 波形。

      • https://getwaves.io/

    • svgwave：SVG 波浪生成

      • https://svgwave.in/

    • Gradient Multiple Waves

      • 可以生成多个渐变波浪，非常棒

      • https://www.softr.io/tools/svg-wave-generator

    • Multiple Animated Waves

      • 可以生成多个渐变波浪，但主要特点是它还可以为此生成实时动画。

      • https://svgwave.in/

  • 网格生成器

    • grid.layoutit：css grid 布局生成

      • https://grid.layoutit.com/

    • CSS Layout：CSS 布局生成

      • https://csslayout.io/

    • Flexbox Generator：flexbox 布局生成

      • https://loading.io/flexbox/

    • cssgr：行数列数快速布局

      • https://cssgr.id/

    • cssgrid-generator：css 网格生成器

      • https://cssgrid-generator.netlify.app/

    • Grid 网格布局生成器

      • https://grid.layoutit.com/

    • Griddy by Drew Minns

      • https://griddy.io/

    • Vue 网格生成器

      • Vue 网格生成器有几个方便的预设布局，圣杯和文章列表，您可以通过添加和删除元素以及调整大小来轻松自定义。这就是为什么我没有将自己限制在卡片容器的 CSS Grid 代码中，而是通过自定义预设的文章列表布局来近似整个布局的原因。

      • 此工具允许您使用 和相关属性构建 CSS 网格。此外，您需要媒体查询才能使页面具有响应性，并且您只能手动设置属性。grid-template-areasgrid-areagrid-gap

      • https://vue-grid-generator.netlify.app/

    • CSS 网格布局生成器

      • CSS 网格布局生成器是德米特里·贝科夫的全功能 CSS 网格生成器。要开始使用，您可以查看介绍视频，该视频简要概述了该工具的实际功能

      • https://css-grid-layout-generator.pw/

  • 渐变

    • gradient-generator：css 渐变生成工具

      • https://www.joshwcomeau.com/gradient-generator/

    • cssgradient：css 渐变生成工具

      • https://cssgradient.io/

  • 动画生成

    • 动画按钮

      • https://tympanus.net/Development/MagneticButtons/index.html

    • loading：加载动画生成

      • 这个网站可以生成多个加载动画，并以 SVG、GIF、PNG 和其他格式下载，但它的最大特点是你可以将这些动画定制到新的水平。

      • 在这里你可以生成多个加载动画并将其下载为 SVG、GIF、PNG 和其他格式，但它最棒的特点是你可以将这些动画自定义到一个新的水平。值得尝试。

      • https://loading.io/

    • spinkit

      • 介绍

        • 汇集了实现各种加载效果的 CSS 代码片段。

        • SpinKit 仅使用（transform 和 opacity）CSS 动画来创建平滑且易于自定义的动画。

      • https://tobiasahlin.com/spinkit/

    • transition.css：过渡动画

      • https://www.transition.style/

    • animista：动画生成工具

      • 介绍

        • 它为你提供了一组可以在 CSS 中使用的预制动画。你可以选择你喜欢的任何类型的动画并根据需要进行编辑。完成后，你可以为动画生成 CSS 代码并将其用于你的项目代码。

      • https://animista.net/

    • CSS 动画生成器

      • https://keyframes.app/animate/

    • cssanimate：CSS 动画生成器

      • https://cssanimate.com/

    • cubic-bezier：CSS 动画生成

      • https://cubic-bezier.com/

  • cssfiltergenerator：CSS 滤镜生成器

    • https://www.cssfiltergenerator.com/

  • shapedivider：自定义形状分隔线

    • https://www.shapedivider.app/

  • Interactions：生成您自己的自定义贝塞尔曲线

    • https://easings.co/

  • iconshock：带有渐变的图标

    • https://www.iconshock.com/svg-icons/

  • 自定义像素生成

    • 介绍

      • 生成自定义的像素 CSS 代码

    • https://www.pixelartcss.com/

  • 圆角 border-radius 生成

    • https://9elements.github.io/fancy-border-radius/

    • https://github.com/9elements/fancy-border-radius

  • UI 生成

    • https://accordionslider.com/

  • CSS Clip-path Maker：复杂点的效果生成

    • https://bennettfeely.com/clippy/

  • CSS 优惠券生成工具

    • https://coupon.codelabo.cn/

• 色彩搭配

  • Color Hunt

    • https://colorhunt.co/

  • 配色

    • https://mycolor.space/

  • 还是配色

    • https://clrs.cc/

  • CSS 渐变色

    • https://cssgradient.io/

• codepen 里的代码收藏

  • 趋势 - 密码笔 (codepen.io)

• 码上掘金里的代码收藏

  • 码上掘金 (juejin.cn)

CSS 学习

• caniuse：CSS 兼容性查询

  • https://caniuse.com/?search=clip-path

• CSS 文档

  • W3C 中 CSS 相关文档

    • https://www.w3.org/TR/css-syntax-3/

    • https://www.w3.org/TR/?title=css/

• 预处理器学习

  • 在 15 分钟内学习萨斯 - 教程津 (tutorialzine.com)

• CSS 风格指南

  • https://github.com/airbnb/css

  • https://github.com/Zhangjd/css-style-guide

• 学习

  • css-protips：一系列提示，可帮助您掌握 CSS 技能专家

    • https://github.com/AllThingsSmitty/css-protips

    • 各种 CSS 技巧

  • You-need-to-know-css：CSS 的各种效果实现

    • https://lhammer.cn/You-need-to-know-css/#/zh-cn/

    • https://github.com/l-hammer/You-need-to-know-css

  • CSS Inspiration -- CSS 灵感

    • 包含了：布局(Layout)、阴影(box-shadow、drop-shadow)、伪类/伪元素、滤镜(fliter)、边框(border)、背景/渐变(linear-gradient/radial-gradient/conic-gradient)、混合模式（mix-blend-mode/background-blend-mode)、3D、动画/过渡(transition/animation)、clip-path、文本类、综合、CSS-Doodle、SVG 等内容。

    • https://chokcoco.github.io/CSS-Inspiration/#/

  • css_tricks：常用的 CSS 样式、新属性、奇技淫巧

    • 介绍

      • 该项目总结了一些常用的 CSS 样式，记录一些 CSS 的新属性和一点奇技淫巧。

    • 网址

      • 官网

        • https://qishaoxuan.github.io/css_tricks/

      • GitHub

        • https://github.com/QiShaoXuan/css_tricks

  • css-tricks

    • 介绍

      • 各种技术文章，不过以 CSS 为主

    • 网址

      • https://css-tricks.com/

  • iCSS

    • CSS 奇技淫巧

    • https://github.com/chokcoco/iCSS

  • 令人惊叹的 CSS:)的精选内容

    • https://github.com/awesome-css-group/awesome-css#readme

  • awesome-css

    • https://github.com/awesome-css-group/awesome-css

  • CSS 资源大全中文版

    • https://github.com/jobbole/awesome-css-cn

  • Navnav：各种组件、动画、布局

    • 介绍

      • 收集 codepen 的各种组件、动画、布局等等样式代码

    • 网址

      • 官网
        • http://navnav.co/

  • 十天精通 CSS3

    • 介绍

      • 这是前端大佬大漠出的一个免费的 CSS3 教程，对于有一定 CSS2 经验的伙伴，能让您系统的学习 CSS3，快速的理解掌握并应用于工作之中。

      • 里面的内容有讲解，还有代码演习，学完之后，可以练习所学的 api ，真的很不错。

    • 网址

      • https://www.imooc.com/learn/33

  • CSSDeck：样式代码收集

    • 介绍

      • 各种组件、动画、布局样式代码收集

    • 网址

      • 官网
        • https://cssdeck.com/

  • codrops：面向前端创意人员代码收集

    • 介绍

      • 各种组件、动画、布局样式代码收集

    • 网址

      • 官网
        • https://tympanus.net/codrops/

  • 学习 CSS 布局

    • 介绍

      • 教授的是现在广泛使用于网站布局领域的 CSS 基础

    • 网址

      • https://zh.learnlayout.com/

  • CSS 速记表(备忘单)

    • 介绍

      • 各种 css 属性的速记

    • 网址

      • https://htmlcheatsheet.com/css/

  • cssreference.io：免费的 CSS 视觉指南

    • 介绍

      • 通过示例学习：cssreference.io 是 CSS 的免费视觉指南。它具有最受欢迎的属性，并通过插图和动画示例对其进行了解释。

    • 网址

      • https://cssreference.io/

  • web.dev 上的 CSS 教学专栏

    • 介绍

    • 网址

      • https://web.dev/learn/css/

  • W3 How To 学习如何实现常见的页面组件

    • 介绍

    • 网址

      • https://www.w3schools.com/howto/

  • pure-css：453 纯 CSS UI 设计示例

    • 介绍

      • 纯 CSS 示例或仅在 CSS 中设计的 HTML 元素，以使其具有一些时髦的效果。传统上，人们可能会起诉 JS 和其他东西来实现类似的效果，但只有纯粹的 CSS。

      • 从手风琴，滑块到下拉导航菜单，您可以在此处找到许多仅限 CSS 的代码片段。使用本节中的代码片段，您可以在没有编码经验的情况下在网站上重新创建这些效果。

    • 网址

      • https://codemyui.com/tag/pure-css/

  • 30 秒 css 代码片段

    • https://www.30secondsofcode.org/css/p/1

  • CSS 相关 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

  • Pure CSS Character：纯 HTML/CSS 绘图 - 游戏角色创建场景样式。完全用 HTML 和 CSS 手工编码

    • https://github.com/cyanharlow/purecss-character

  • 18 世纪油画风格的 HTML / CSS 绘图。完全用 HTML 和 CSS 手工编码

    • 青春/纯色-弗朗辛：18 世纪油画风格的 HTML/CSS 绘画。完全用 HTML 和 CSS 手工编码。 (github.com)

• Search · CSS (github.com)

• UI 灵感

  • UI 设计师的灵感源泉

    • 介绍

    • 网址

      • https://www.awwwards.com/sites/zero-impact

      • https://www.awwwards.com/

  • awwwards

    • 汇聚了世界各国前端以及 UI 设计师的灵感哦

    • 网站地址：www.awwwards.com/

• 学习游戏

  • Grid Garden：通过给萝卜浇水，学习 CSS 网格布局

    • 介绍

      • Grid 花园，共 28 关，通过 Grid 语法编程，种植，浇灌你自己的胡萝卜园，帮你熟悉和记忆 Grid 语法。

    • https://cssgridgarden.com/

  • Flexbox Defense：CSS 塔防游戏，学习 flex 布局

    • 介绍

      • Flexbox 塔防，一共 12 个关卡的塔防游戏，通过 Flex 语法摆放防御塔，阻挡敌方小兵通过。

    • http://www.flexboxdefense.com/

  • CSS Diner：通过做饭，练习 CSS 选择器

    • 介绍

      • CSS 晚餐，一共 32 个关卡，由简入难，通过 CSS 选择器语法选择跳动的盘子来进行通关，帮你熟悉和记忆选择器相关的语法。

    • https://flukeout.github.io/

  • Flexbox Froggy：送小青蛙回家，学习 flex 布局

    • 介绍

      • Flexbox 青蛙，一共 24 个关卡，每一关都有语法提示，鼠标 hover 到语法属性上，会显示其所有的属性值。

      • 通过 Flex 语法编程，移动青蛙到目标荷叶，帮助你加深记忆。

    • https://flexboxfroggy.com/

  • 收费游戏

    • Flexbox Zombies：通过打僵尸联系 flex 布局

      • 介绍

        • Flexbox 僵尸，共 12 章节，每一章中都有难度递增的挑战回合。

        • 自带剧情，炫酷的动画和音效，用 Flex 语法打僵尸

        • 创作者：戴夫·格德斯

      • https://mastery.games/flexboxzombies/

    • Service Workies

      • 介绍

        • 在这次冒险中，您将学习如何避免 PWA 陷阱。您将提升自己的技能，并与服务人员一起茁壮成长。甚至可能杀死几个世纪以来一直困扰着贫穷村庄工人的野蛮野兽！需要注册。

        • 创作者：戴夫·格德斯

      • https://serviceworkies.com

    • Grid Critters：网格小动物练习 CSS Grid 布局

      • 介绍

        • 网格小动物，数百个关卡，需要付费。

        • 你的旅程从神秘的 Grideros 星球开始，你的任务是使用你船上强大的网格工具来拯救外星生物免于灭绝。

        • 作者是一名拥有十多年前端经验的 UI 架构师，为了帮助人们可以轻松愉快的精通 CSS Grid 布局，他选择全职并投入了大量的精力开发了这款游戏。

        • 创作者：戴夫·格德斯

      • https://gridcritters.com/

  • CSS Battle：CSS 代码高尔夫游戏

    • 介绍

      • CSS 战斗更像是一个在线挑战，而不是一个实际的 CSS 练习游戏，目标是编写 HTML 和 CSS 代码，以尽可能少的代码复制给定的目标图像。这个游戏不断更新新的挑战。它具有全球排名系统，并且能够重新玩每个挑战，因此您可以提高自己的结果。

      • CSS 代码高尔夫游戏在这里！使用您的 CSS 技能，使用尽可能少的代码复制目标。请随时查看下面的目标，并测试您的 CSS 技能。

    • https://cssbattle.dev/

  • CodePip：通过玩游戏学习编码的平台

    • 介绍

      • 通过玩游戏学习编码

      • 网格花园和弹性框青蛙就是这个平台的免费游戏

      • 如果您在他们的网站上注册了专业帐户，他们也有从一般 CSS 评论到 JavaScript 的游戏。

    • https://codepip.com/

  • CodeMonkey

    • 介绍

      • 代码猴子使用 CoffeeScript（一种真正的编程语言）教授编码，以教你用 HTML5 构建自己的游戏。它旨在为孩子们编码，但对于成年人来说也绝对很有趣。

    • https://www.codemonkey.com/

  • CodinGame

    • 介绍

      • CodinGame 提供有趣的免费游戏，以帮助学习超过 25 种编程语言，包括 JavaScript，Ruby 和 PHP。

      • CodinGame 的一大优点是，您可以与朋友或同事一起玩，还可以参加国际编码比赛。

    • https://www.codingame.com/start

  • CodeCombat

    • 介绍

      • 学习 Python, JavaScript, CoffeeScript 或 Lua 游戏脚本语言。

      • 在初学者地牢关卡中，你将根据游戏的教程使用一些基本命令在游戏中移动你的英雄。

    • https://codecombat.cn/

  • 纯 CSS 开发的游戏

    • Roadmap：线路图

      • 介绍

        • 解决这个小游戏需要技巧和速度，只用 CSS 和 HTML 制作。它不是直接教 CSS，但是查看源代码可以教很多关于剪辑路径，变换和动画@keyframes

      • http://victordarras.fr/cssgame/

    • Carnival：嘉年华

      • 介绍

        • 你只有 8 秒的时间来击中所有目标！一个漂亮的小 CSS 游戏，使用复选框和 CSS 动画。

      • https://codepen.io/una/pen/NxZaNr

    • Service Workies

      • 介绍

        • 在这次冒险中，您将学习如何避免 PWA 陷阱。您将提升自己的技能，并与服务人员一起茁壮成长。甚至可能杀死几个世纪以来一直困扰着贫穷村庄工人的野蛮野兽！需要注册。

      • https://serviceworkies.com/

    • Unfold

      • 介绍

        • 这并不是一个游戏，而更像是一个关于 CSS 3D 转换的交互式演示。试一试，它并不无聊 😂，动画真的很棒，这是由纯 CSS 完成的。

      • https://rupl.github.io/unfold/

    • 井字游戏

      • 介绍

        • 井字游戏作为纯 CSS 游戏，具有 2 个难度级别，也使用复选框和 CSS 动画。

      • https://codepen.io/alvaromontoro/pen/BexWOw

50 多个提高前端人效率的工具、网站和书籍整理

https://mp.weixin.qq.com/s/beUBC9BfcsGLjmnE7F4ieQ

操作系统收集

• 存档操作系统 (archiveos.org)

• 黑苹果收集

  • Hackintosh-Installer-University/README-CN.md at master · huangyz0918/Hackintosh-Installer-University (github.com)

免费开源软件收集

• 2022 年最佳开源视窗软件 (sourceforge.net)

• 树莓派项目收集

  • [1779 Projects tagged with "raspberry pi" | Hackaday.io](https://hackaday.io/projects?tag=raspberry pi)

待验证

• 1、github-history

  • 该工具提供一个用户友好的界面，查看某个文件在 GitHub 上面的编辑历史。

• 4、Search Icons Visually

  • 图标搜索引擎。你上传一个图标，它就返回一系列相似的图标。

• 5、gitignore.io

  • 生成 gitignore 文件的网站。

• 6、DeskGap

  • 生成跨平台（Win & Mac）桌面应用的工具，类似 Electron，但是使用了系统内置的 WebView。

• 10、Marp

  • 跨平台的桌面工具，将 Markdown 文档转成幻灯片。

• 中国独立 iOS 和 macOS 开发者图鉴

  • 独立 (josephchang10.github.io)

• 9、instagram.css

  • 一个 CSS 开源库，提供纯 CSS 的 Instagram 滤镜实现

• 10、devices.css

  • 一些主要的电子消费产品外观图片的 CSS 实现

• 11、AutoPiano

  • 自由钢琴，HTML5 技术开发的网页钢琴应用。可以自动演奏曲谱，同步显示琴键的位置

• 5、cloudconvert

  • 在线文件格式转换工具，支持 218 种格式文件的转换

• 1、manypixels

  • 一个收集无版权插图的网站，提供 SVG / PNG 格式下载，并且允许更改颜色。

• 1、stylelint

  • 一个 CSS 的 lint 工具。

• 2、ColorUI

  • 专用于微信小程序的 UI 组件库，纯 CSS 组件。

• 4、cleave.js

  • 一个对输入框中用户输入的内容，进行格式化的 JS 库

• 9、dropcss

  • 一个清理样式表里面无用的 CSS 代码的工具。

• 1、fyne

  • 跨平台的 Go 语言的图形界面库。

• 2、jimp

  • 一个 Node.js 的图像处理库，为图像加特效

• 5、griffith

  • React 的视频播放器组件

• 1、Precise UI

  • 一个轻量级 React 组件库，提供 70 多个组件，特点是比较简洁。

• 5、MikuTools

  • 该网站收集一系列轻量级工具，比如各大视频网站的视频在线下载工具

• 6、hanzi-writer

  • 一个演示汉字笔画顺序的 JS 库。

• 7、PeerJS

  • 一个简化 WebRTC 的点对点通信的 JS 库

• 2、天线知识

  • 这是无线电天线的百科网站。

• 1、water.css

  • 一个极小化的 CSS 框架，用来快速为网页加上简单样式，特别是不必使用任何 class。

• 2、ElGrapho

  • 一个基于 WebGL 的浏览器数据可视化库，主要用于性能要求特别高的可视化图形。

• 9、js-cloudimage-360-view

  • 一个可以 360 度旋转观看图片的 JS 库，用于在网页上展示商品。

• 10、re-editor

  • 一个基于 Slate 的开箱即用的 React 富文本编辑器，可以定制化

• 10、只使用 CSS 的实时聊天（英文）

  • 一个匪夷所思的实验，不使用 JS，只使用 CSS 实现实时聊天。

• 2、纯 css 的 tooltip

  • 纯 CSS 的气泡提示框。

• 6、gridea

  • 一款跨平台桌面软件，可以在本地将 Markdown 文档编译成静态博客，然后发布到 GitHub Pages 或 Coding Pages。

• 7、code2flow

  • 一个符合直觉的，从伪码生成流程图的工具。

• 8、ikonate

  • 一套开源的 SVG 图标。

• 7、Base web

  • uber 公司开源的 React 组件库，风格比较简单干净。

• 8、Cedreo

  • 一个 3D 的家居建模渲染软件，还可以生成平面图，免费注册使用。

• 10、impression.js

  • 监测网页元素是否出现在视口内的 JS 库，用于监测广告的曝光。

• 1、龙猫学术导航

  • 一个外文期刊检索与下载的网站，里面有很多资源链接。类似网站还有“大木虫学术导航”。

• 2、MOOC 课程搜索引擎

  • 该引擎可以搜索全世界的开放课程，目前包含 1.2 万门课程，里面也有中文课程。

• 4、awesome-uikit

  • 该仓库收集前端各种 JS 框架，Web 组件库和后台管理模板

• 2、uppy

  • 一个文件上传的 JS 库。

• 8、sonic

  • 一个 Rust 语言写的搜索服务器，可以用作 Elasticsearch 的替代品

• 2、VS Code 能做到

  • 该网站收集 VS Code 能够实现的各种高级功能教程

• 3、如何 root

  • 该页面收集各种安卓手机 Root 的方法。

• 7、CTOLib 码库

  • 该网站收集并分类开源项目和资源，每日更新

• 6、fusuma

  • 将 Markdown 文件转成幻灯片的工具，功能很强大，在本地起一个 HTTP 服务，完成很多后端功能。

• CSSfx

  • 该网站收集各种 CSS 特效，可以复制粘贴到自己的项目。

  • https://cssfx.netlify.app/

  • https://github.com/jolaleye/cssfx

• 4、Colorize

  • 黑白照片自动上色的服务

• 3、tesseract.js

  • 一个可以完成 62 种语言 OCR （光学识别）的 JS 库。

• 10、saber

  • 一个 Node.js 的静态网站生成器，类似 Hugo，但是支持 Vue、React 或其他前端框架编写 UI。

• 1、PaperCSS

  • 具有手绘效果的 CSS 组件库

• 2、youtube-dl-interactive

  • 具有互动界面的命令行 Youtube 下载器，基于 youtube-dl。

• 4、React Simple Animate

  • React 的一个比较简单的动画组件库。

• 5、imgsquash

  • 基于 Node.js 的图像压缩服务，有 Web 界面，非常方便部署成微服务。

• 6、matomo

  • 网站访问统计工具，类似 Google Analytics，代码开源，可以自己部署服务。

• 9、star-history

  • 一个开源服务，帮助用户查看 GitHub 项目 star 数目的历史。它的网站可以免费使用，插件是收费的。

• 10、Fuse.js

  • 一个轻量级的 JS 模糊搜索引擎

• 11、Code Block Beautifier

  • Chrome 浏览器插件，用在那些没做代码高亮的网站，具有代码高亮效果

• 12、RMind

  • 在线的思维导图工具，使用 React Hooks 与 flex 布局实现。

• 2、ChineseBQB

  • 一个收集国内各种表情包图片的仓库

• 3、一个工具箱

  • 该网站收集了 100 多个实用的网页小工具

• 5、全世界各大城市的生活成本和生活质量

  • 一张散点图，可以查看哪些城市的居住性价比在平均水平之上。

• 7、awk 简明介绍（英文）

  • awk 是处理格式化文本文件的命令行工具，非常强大。本文是一篇简明易学的入门教程。

• 8、五个 JavaScript 小技巧（英文）

  • 作者总结了五个 JavaScript 代码写法的技巧。

• 6、Aminated Knots

  • 收集各种绳子打结的方法，并且有动画教学。

• 8、Antora

  • 一个静态站点生成器，针对 AsciiDoc 格式的技术文档。

• 9、userrecon

  • 一次查询 75 个社交媒体，看看某个用户名是否还未注册。

• 10、nodeppt

  • 将 Markdown 文档转成幻灯片，在浏览器演示的工具

• 12、QuickJS

  • ffmpeg 的作者写的 JavaScript 引擎。他等于自己从头实现了一个简化的 V8，这也太猛了……这个引擎体积很小，但是功能完整而且高效。

• 3、开源游戏克隆

  • 该网站收集各种游戏开源的克隆版。

• 4、gfycat

  • 收集人们上传的各种 GIF 动画，基本上就是只收录 GIF 动画的 Imgur。

• 5、中文独立播客

  • 高质量的中文独立播客列表

• 4、Automagica

  • 一个跨平台的桌面自动化工具，可以编写脚本，自动执行桌面操作。

• 6、videodownloader

  • 一个使用 Electron 制作的 Youtube-dl 的图形界面，可以下载包括 Youtube 在内的110 个网站的视频。

• 7、谷歌地球 Web 版

  • 谷歌地球的官方 Web 版，可以浏览全球的卫星照片。该应用体积很大，初始访问可能需要很长时间加载。

• 2、Zen Flowchart

  • 简单好用的在线流程图工具。

• 11、守望先锋 UI 组件库

  • 一个《守望先锋》游戏风格的组件库，基于 Vue.js。

• 1、favorite-link

  • 笔记仓库，收集各种开发工具和资源的链接

• 2、腾讯云软件源

  • 腾讯云提供的各种开源软件的下载镜像，更多类似的镜像请看这里。

• 4、简单英语指南

  • 美国政府的官方网页，有几百条单词建议，指导你怎么写出简单的文章，不要用复杂的单词。比如说，“a 和 b 可以同时使用，也可以单独使用”，不要用 a and/or b，而要用 a or b or both。

• 5、数字隐私档案

  • 该仓库收集互联网上保护用户隐私的各种工具和方案。

• 6、今日热榜

  • 这是一个信息聚合服务，聚合各站热点，包括微信、今日头条、百度、知乎、V2EX、微博、贴吧、豆瓣、天涯、虎扑、Github、华尔街见闻等，有 Web 版和 App 下载。

• 7、Vugu

  • 一个使用 Go 语言写 HTML 前端页面的工具。完全不用 JavaScript，就能写出前端页面。未来的全栈将不再限于 JS，后端语言都可以写前端。

• 10、licia

  • 这个库收集 Web 开发的各种 JavaScript 小工具，使得开发者只用加载它一个库即可，跟 lodash 的思路有点像。

• 6、SuperTinyIcons

  • 一个 SVG 图标库，提供 100 多个常用的 Logo 图标。

• 12、Zdog

  • 一个 JavaScript 的 3D 设计和动画制作库。

• 6、33 个免费图标网站

  • 该文收集了 33 个免费的图标资源网站。

• 9、如何自己写一个静态站点生成器（中文）

  • 一直很想自己写一个静态博客，但总是觉得比较麻烦。直到看到 Writing a small static site generator ，才发现原来写一个静态博客竟如此简单

• 2、TagUI-Python

  • 一个 Python 的自动化模块，可以自己编写脚本，完成浏览器自动化、键盘自动化、鼠标自动化等操作。

• 4、Gogh

  • 一个终端窗口颜色主题的安装工具，目前有 170 多种配色方案可选择，支持 Linux 和 Mac。

• 6、Pictool

  • 一个较为轻巧的前端 JS 库，用来处理图像效果。

• 10、plyr

  • 一个前端 HTML5 的视频/音频播放器，特点是简单易用，定制性好。

• 11、color

  • 一个 JavaScript 的颜色操作库，可以使用各种方法对颜色进行操作。

• 12、Oh My RSS

  • 一个中文 IT 网站的 RSS 聚合服务，代码开源

• 4、Research

  • 一个中文搜索的聚合网站，显示同一个关键字在不同网站的搜索结果。

• 5、oktools

  • 该网站收集了程序员需要的 10 多个在线小工具，包含 JSON 格式化、Base64 编解码、颜色值转换、图片压缩、正则测试、时间戳转换、HASH 计算等

• 4、Node.js 爬虫示例

  • 一个 Node.js 爬虫的示例项目，帮助感兴趣的同学了解爬虫的实现

• 5、wallace-cli

  • 一个 CSS 样式表的命令行分析工具，显示有多少条规则、选择器，压缩前后的文件大小等等。

• 6、Anime4K

  • 实时提升卡通动画的分辨率，使其成为高清动画的工具。

• 3、GIF cities

  • 该网站收集各种 GIF 动画图片。

• 7、No CS Degree

  • 该网站专门采访自学成才的程序员，每个采访对象都会问他们怎么学会编程，怎么找到工作

• 1、chart.xkcd

  • 一个 XKCD 漫画风格的网页图表库

• 5、pagemap

  • 一个 JS 库，在网页插入迷你的页面缩略导航图，用户可以点击这个图的不同部分，实现快速导航。

• 7、starcharts

  • 一个开源工具，可以查看 GitHub 仓库的 Star 变化情况，生成折线图。

• 8、awesome-qrcode

  • 二维码生成工具，可以生成静态二维码、图像二维码和动画二维码。

• 11、ShowMeBug

  • 一个国产的在线实时编程环境，程序员面试助手，可以实时观看应聘者远程编程

• 12、中国传统颜色手册

  • 一个方便使用的在线色表，列出中国古典的常见颜色。

• 4、GK Docs

  • 面向前端开发者的网址导航站，中文的。（@wuyinman 投稿）

• 5、free-for.dev

  • 该仓库收集互联网上的免费开发者资源

• 5、如何使用 CSS 变量写一个样式切换器？（英文）

  • 本文介绍 CSS 变量的概念和一些技巧，然后演示用它写一个暗模式/亮模式的切换器。

• 6、我对编程语言的评价（英文）

  • 一个程序员对十几种编程语言的简短评价，列出每种语言各自的优缺点。

• 1、gavatar

  • 生成类似 GitHub 用户头像的开源工具。

• 7、BPMN-JS

  • 一个在线绘制业务流程图的开源工具。

• 3、使用 Socket.io 开发一个最简单聊天应用（英文）

  • 本文介绍如何通过 Socket.io 这个库，开发一个前后端通过 WebSocket 协议互动的最简单聊天应用。

• 1、Postwoman

  • 一个在线 HTTP 请求调试工具，类似 Postman，不过是 Web 版。

• 2、WTF

  • 一个命令行的信息仪表盘，可以定制显示内容。

• 3、gradex

  • 一个开源的在线工具，从上传的图片里面提取两种主色，生成一张渐变的背景图

• 7、Xnip

  • 国产的 Mac 截图软件

• 9、dbdiagram.io

  • 创建数据库的实体-关系图的工具。

• 8、folder-explorer

  • 扫描一个目录，给出目录结构、文件大小等统计信息的桌面工具。

• 6、nanoid

  • 一个极小的 uuid 生成的 JS 库。

• 7、AutoCannon

  • 一个 Node.js 写的 Web 服务器负载性能测试工具。

• 7、CSS 如何自动切换明暗模式（英文）

  • 本文介绍如何让 CSS 根据不同设备，自动选择暗模式（dark mode）或明模式（light mode）。

• 9、诺基亚短信图片生成器（英文）

  • 这个工具可以生成老式诺基亚手机的短信图片

• 3、法信

  • 一个法律仓库，可以在线搜索国内的各种法律

• 9、Pinbox

  • 一个国产的收集网上各种资源（网址、图片、文本）的在线服务，类似 Pinterest

• 8、AntzGameOS

  • 该项目把游戏做成操作系统，打包成镜像，装到 U 盘，插入电脑开机启动，就能直接玩游戏

• 10、bruno simon

  • 这是很久以来，我见过的最酷主页，整个页面都是 3D 的。页面源码是开源的。

• 2、free-for.dev

  • 该仓库收集各种可以免费使用的（或有免费层的）互联网服务。

• 8、Web 图标指南（英文）

  • 本文介绍四种常用的图标解决方案：CSS Sprite、图标字体、内嵌的 SVG 图像、SVG 文件。

• 3、中文独立博客列表

  • 该仓库根据 feedly 的 RSS 订阅数，列出了主要的中文独立博客

• seekbetter.me

  • 该网站收录中国个人独立博客

• 1、hacker-laws-zh

  • 这是一个中文仓库，收集对开发人员有用的定律、理论、原则和模式，比如摩尔定律、侯世达定律、墨菲定律等等

• 3、OCR 教程（英文）

  • 这组系列文章教你如何自己写一个 OCR（光学字符识别）系统，从照片识别出文字。

• 4、Node.js 编程最佳实践

  • 该仓库收集 Node.js 编程的注意点，目前已经有 80 多条了。

• 5、全球生活费用排名

  • 该网站提供全世界国家和地区的生活费用排名，每个国家还可以查看各个城市的排名，以及各种生活费用的具体金额。

• 9、Sketchviz

  • 生成手绘风格的流程图的在线工具。

• 10、draw.io

  • 在线图表工具 draw.io 的源码。

• 3、CSS 打印样式 10 分钟教程（英文）

  • 一篇简短的教程，讲解如何使用 CSS 设置网页打印时的样式。

• 2、必收

  • 一个收集和订阅外部内容的应用，有手机端和桌面端，可以收藏网址、微信文章、头条文章等。

• 7、code-surfer

  • 一个以幻灯片的形式展示源码的工具。

• 8、配色可用性查看工具

  • 这个网站可以查看，某个配色方案对于不同视力障碍人群的可用性，比如色盲、白内障、青光眼患者能不能看到，并给出该方案的评分。

• 2、逐行剖析 Vue.js 源码

  • 一组中文的系列文章，从初学者的角度，将 Vue.js 分成九个模块讲解源码。

• 1、如何写出可复用的 CSS 样式表？（英文）

  • Tailwind CSS 框架的作者谈自己如何一步步探索，写出与 HTML 代码彻底分离的、可以复用的 CSS 样式表。

• 2、如何自己实现一个 React 框架（英文）

  • 本文一步步用简单的代码讲解，如何自己从头实现 React 框架。

• 6、隧道掘进机示意图（英文）

  • 本文收集了大量动画图片，展示各种隧道掘进机的工作原理。

• 7、我如何制作 3D 网页？（英文）

  • 作者的主页是一个 3D 网页，他介绍了这是怎么制作的。

• 9、我们制作 HTML5 游戏的所有工具（英文）

  • 作者是专业的 HTML5 游戏开发商，介绍了他们团队使用的工具。

• 10、Makefile 教程（英文）

  • 本文教你学会编写 Makefile 文件。

• 3、texme

  • 一个轻量级的 JavaScript 脚本，可以把 Markdown + LaTeX 文档直接渲染成网页。

• 1、软件 bug 大事记

  • 该网页收集历史上各种软件 Bug 导致的重大事件的新闻报道。

• 2、自托管软件列表

  • 该网站收集各种可以自己架设服务的软件。

• 7、roughViz.js

  • 一个生成手绘风格的网页图表的 JS 库。

• 9、Arya

  • Arya 是一款基于 Vue 的在线 Markdown 编辑器，粘贴 HTML 自动转换为 Markdown，支持 PPT 预览，以及绘制流程图、甘特图、时序图、任务列表、五线谱等功能。

• 1、deploy-your-own-saas

  • 该仓库收集可以自己部署的开源 SaaS 服务。

• 3、si78c

  • 早期电子游戏《太空侵略者》的命令行移植版，使用 C 语言编写。

• 6、knDB

  • 一个轻量级的 Node.js 数据持久化库。

• Happy Hues

  • 该网站提供一系列配色方案，可以实时切换、定制，查看效果。

• sizle

  • 一个在线制作 PPT 的网站。

• 10、magicCss

  • 一个实现各类图形的 CSS 库。

• 2、微信 Markdown 编辑器

  • 一款个微信公号文章的的编辑器，可以将 Markdown 编辑器，基于 wechat-format ，开放了一些可定制项目格式转为富文本格式，再贴到微信编辑器。

• 3、Hammerspoon

  • Mac 电脑的自动化操作工具，使用 Lua 语言编写脚本。

• 10、Boost Note

  • 一个笔记软件，有 Web 版和跨平台的桌面 App。

• 2、undraw

  • 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。

• 3、CoreUI Icons

  • 一套开源图标，有 1500 多个，支持 SVG、PNG、Webfonts 多种格式。

• 4、RosettaGit

  • 该网站收集一些典型的编程任务，然后用尽可能多的计算机语言，给出这些问题的实现。目前，它一共收集了 13 个编程任务，4392 种解决方案，涉及 749 种计算机语言。

• 6、从头构建一个 BitTorrent 客户端（英文）

  • 本文介绍 BitTorrent 点对点下载的原理，并给出 Go 语言的实现。

• 8、GitHub Actions v2 的新语法（英文）

  • 本文介绍 GitHub Actions 新引入的一些语法，主要介绍的是如何提供命令的输入（input）、如何使用命令的输出（output）。这里还有一篇 JavaScript 项目的实例，可以作为参考。

• 1、sscaffold-css

  • 一个极简的 CSS 默认样式库，目的是为 HTML 裸标签提供美观的样式

• 1、A Compiler Writing Journey

  • 一个英文介绍，一步步讲解如何写一个最小的 C 语言编译器。

• 7、qier-player

  • 一个 H5 视频播放器的 React 组件

• 9、MojoJS-Animation

  • 一个轻量级的 JS 网页动画引擎

• Sitdown

  • 一个将 HTML 源码转换为 Markdown 的 JS 库，可以定制规则

• 2、Excalidraw

  • 一个非常简单易用的白板绘图开源工具。

• 2、Zarm

  • 一个 React 组件库，众安科技出品。特点是依赖少体积小（压缩后 60KB），扩展性好，样式命名采用了 BEM 规范。

• 4、lossless-cut

  • electron 开发的一个开源项目，为视频工具库 ffmpeg 开发一个图形界面 GUI。

• 6、plausible

  • 一个 Google Analytics 的开源替代品，可以自己架设网站访问统计。特点是轻量级，结构简单

• 9、esbuild

  • 一个用 Go 语言写的 JS 脚本打包工具，根据作者提供的数据，打包时间仅仅是 Webpack 的几十分之一。

• 10、plink-plonk.js

  • 作者提供一段 JS 代码，只要插在网页里面，可以让 DOM 变动发出声音。如果 DOM 有改变，你就会听到声音。

• 1、markmap-lib

  • 一个将 Markdown 转为思维导图的开源工具。

• 2、codefence

  • 一个可以嵌入网页的交互式代码编辑器，用户能够直接在网页上输入代码并运行，得到结果。服务端是 Docker 容器，目前支持十几种主流的计算机语言。

• 3、droppy

  • 一个可以自己架设的网盘服务，适合搭建在内网，从 Web 界面上传和下载文件。

• 4、aind

  • 一个装在 Docker 容器里面的安卓模拟器。

• 5、jott.live

  • 一个轻量级 Markdown 笔记网站，不需要注册，只需要为文档指定密码，适合随手写一点东西分享出去。

• 6、Tablist

  • Chrome 浏览器插件，可以一次性列出所有 Tab 的网页 URL，方便复制。

• 2、生物插图下载

  • 生物多样性图书馆（Biodiversity Heritage Library，BHL）提供 15000 多张生物插图，可以免费下载，都来自历史上的各种资料。

• 9、pattern.css

  • 一个纯 CSS 库，提供各种形状的背景图案。这里还有一个类似的网站

• 10、98.css

  • 一个提供 Windows 98 风格的 UI 组件的 CSS 库。

• 2、Gossip

  • 一个制作幻灯片的在线工具，只需要少量拖拽和对齐操作，就可以生成通过浏览器播放的幻灯片

• 2、Insomnia

  • 一个开源的桌面软件，用于简化 API 的设计和开发。

  • https://github.com/Kong/insomnia

• 5、uPlot

  • 一个 JS 的网页小型图表库，用于快速渲染超大型数据集，系统资源占用少。

• 10、makeJs

  • 一个示例项目，用 JS 写的 JS 解释器，可以用来学习用编译原理

• 1、大英博物馆免费图片

  • 大英博物馆最近更新了它的网站，目前免费向公众提供 190 万张它的藏品的图片。

• 2、吉卜力壁纸

  • 宫崎骏的吉卜力工作室放出一批动画片图片，供免费下载，用来当作疫情期间的远程会议壁纸。上图是电影《龙猫》的壁纸。

• 3、拉美西斯六世陵墓的 3D 模拟

  • 这个网站是古埃及拉美西斯六世（约公元前 1145 年—约公元前 1137 年在位）陵墓的 3D 实景模拟，效果非常好，细节放大后都很清晰，手机也可以浏览。

• Valine

  • 一个静态网站的评论系统，不需要后端，数据储存在 LeanCloud。

  • 是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

  • 理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost、Docsify 等博客和文档程序在使用 Valine

• spiderman

  • 一个通用的分布式爬虫框架，基于 scrapy-redis，只需编写少量代码即可完成分布式爬虫抓取数据

• spug

  • 一个适用于中小企业的轻量级服务器自动化运维管理平台，界面为中文。功能包含主机管理、主机批量执行、主机在线终端、应用发布部署、端口监控、报警等。后端为 Python，前端为 React

• NGINX Config

  • Nginx 的图形配置界面，点几下鼠标，自动生成配置文件，可以上传到服务器。

• whoogle-search

  • 一个自己架设的搜索引擎，抓取谷歌的结果，无广告，不追踪用户。使用 Python 语言编写。

• Deckdeckgo

  • 一个在线编写幻灯片的服务。

• leetcode 前 300 题

  • Leetcode 前 300 题，每道都进行了详细通俗的分析，并且提供多种思路解法。

• Go 语言示例教程

  • 该仓库是一个 Go 语言初学者教程的示例库，收集了 1000 多个示例、练习和问题。

• 开源软件“爆米花时间”（Popcorn Time）是一个 BT 下载客户端，集成了媒体播放器，可以一边下载一边观看。毋庸讳言，它的主要用途是观看盗版的电影和电视剧。

• utterances

  • 一个将 GitHub issues 用作静态页面评论功能的开源库。

• Quickref

  • 一个针对程序员的搜索引擎，只搜索编程相关的网站，比如 GitHub 和 StackOverflow。

• goblog

  • 一个极小的个人博客网站 Go 语言实现，总共不到 500 行的后端代码，基本功能都具备，包括文章的分页展示、分类、访问量统计、排行、留言评论等。

• Python 选择题小测试

  • 这个网站提供一系列 Python 语言的选择题，测试你的 Python 水平级别。

• trilium

  • 一个 Markdown 格式的笔记软件，使用目录层级整理笔记。可以下载安装桌面版，也可以自己架设在线版。

• Unscreen

  • 一个在线工具，可以免费删除视频背景。

• 分析工具

  • 该网站收集各种思考工具（比如决策树和冰山模型），这些工具可以帮助你解决问题、制定决策和理解系统。

• 设计模式

  • 该网站为中文教程，使用通俗的语言，介绍各种设计模式，图文并茂。此外，还有代码重构方面的英语内容。

• Fuun.fun

  • 该网站收集了一些有趣的网页小程序，主要是 HTML5 小游戏

• 如何简单实现 CSS 主题的切换（英文）

  • 本文介绍一个简单的方法，为网页指定多个 CSS 主题，允许用户手动切换主题。

• WebTorrent

  • 一个在浏览器进行 BT 下载的 JS 库，可以网页 BT 下载，也有桌面客户端。

• pending-dns

  • 一个 Node.js 写的 DNS 服务器，可以通过 API 修改设置。

• shan-shui-inf

  • 一个自动生成中国山水画的 JS 实现。

• network-plus

  • 一款浏览器插件，可以修改浏览器发出的网络请求，相当于简易版的 Postman

• hyperbuild

  • HTML 代码的最小化工具，可以精简网页源码的体积。Rust 语言写的，有 Node.js、Python、Java、Ruby 的移植。

• 设计工具收集

  • 该网站收集各种设计工具和设计资源，没有设计师的时候，可以使用它们。

• 3、youdaonote-pull

  • 有道云笔记不能导出笔记，迁移笔记很麻烦。此脚本可将所有笔记下载到本地。

• VSCodium

  • VS Code 代码编辑器的重新打包，去掉了所有微软相关的东西（品牌、用户追踪、非开源的代码）等，以实现一个纯的自由软件。

• 6、Chakra UI

  • 一个 React 组件库，UI 很优雅。

• sjcl

  • 斯坦福大学推出的 JavaScript 加密库，只有 6KB，API 也很简单，但可以提供最佳的安全性。

• Mind elixir

  • 一个浏览器的思维导图 JS 内核。

• 程序员简历的常见错误（英文）

  • 这篇文章总结了程序员写简历时的几个注意点，下面是其中几个。

  • 不要试图提及你掌握的所有技能，这会给人一种“万事通”的感觉。

  • 将你的技能分成三个等级：“精通”（proficient in）、“有实战经验”（experienced with）、“熟悉”（familiar with）。

  • “精通”和“有实战经验”的技能，必须提供细节，要给出项目内容和你的个人成果。

• Geany

  • 一个跨平台的轻量级 IDE 编辑器，支持 50 多种语言。

• material-design-icons

  • 谷歌的官方开源图标库，谷歌和安卓就采用这一套图标。Material Design 官方网站可以查看所有图标。

• CSS 三角形生成器

  • 使用 CSS 生成三角形是网页设计常见的需求，比起使用图片，CSS 生成的三角形具有更好的可控性和灵活性。本工具支持自定义三角形大小、颜色、方向、边框等属性

• TimeCat

  • 一个网页录屏器，可以将网页操作录制下来，像视频那样播放，但是生成的录像文件的体积远远小于传统视频。

• generate-avatar

  • 根据用户的唯一 ID，自动生成头像图片的 JS 库。

• nginx-ui

  • 一个在线生成 nginx 配置文件的开源工具，可以在浏览器里面编辑和提交 nginx 配置文件。

• Rust 学习路线图（中文）

  • 近几个月，作者开始学习 Rust，并用 Rust 开始写一些代码，根据自己的学习经验，制作了这一份 Rust 的学习路径。

• Tiny C 编译器

  • 传奇程序员 Fabrice Bellard 写的一个 C 编译器，只有 100KB 大小，编译时间只有 GCC 的几分之一。

• webp2jpg

  • 一个纯前端的在线图片格式转换工具，可以快速将图片转为另一种格式，并且提供多个参数可以调节。

• robotjs

  • 一个 Node.js 的桌面自动化脚本库，支持 Mac、Windows 和 Linux。

• foam

  • VS Code 的一个插件，使得 VS Code 可以用于个人的笔记和知识管理，支持 Wiki 语法和可视化图形。

• Shoes

  • 一个开发桌面小程序的跨平台框架，特点是语法简单，容易上手。

• Linear

  • 一个在线的项目管理软件，用于 Bug 管理，比 Jira 用法简单。

• elevator.js

  • 一个使得“回到顶部”的网页滚动，具有电梯效果的 JS 库。

• 写给 JavaScript 程序员的 Rust 教程（英文）

  • 一组系列文章，使用 JavaScript 作为例子，介绍 Rust 语言。

• UIkit

  • 一个前端 Web 组件库，不依赖任何框架，组件类型多、功能强。

• Zettlr

  • 一个桌面 Markdown 编辑器，界面美观。

• Midway Serverless

  • 阿里发布的 Node.js 的 Serverless 框架，帮助 Node.js 开发人员迁移到云端 Serverless 平台。

• GitHub 的个人描述页怎么实现？（英文）

  • GitHub 最近改版以后，允许个人页面使用 Git 代码库定制，而且还允许插入外部图片，这意味着会出现很多有趣的玩法。这篇文章就教你怎么用外部图片，反映个人动态。

  • 还有人用 GitHub Actions 每天自动跑代码，生成个人描述文件，让主页自动更新。这个更酷，也很实用。

• EasyOCR

  • 一个开源的 OCR 软件，支持识别 40 种语言，包括中日韩文字。

• RediSearch

  • 以 Redis 作为后端的全文搜索引擎，支持中文。

• hugo-leetcode-dashboard

  • 一个将个人的 LeetCode 答题记录汇总的工具，展示题号、题目、你的解答、 题目通过率等，然后一键生成一个 Hugo 网站。

• 3D 封面生成器

  • 在线工具，让一张平面图片变成 3D 书籍封面。

• Wiki.js

  • 架设个人 Wiki 的 Node.js 应用。

• Brick Block

  • 一个浏览器小游戏，使用砖块随心所欲建造大楼，只支持桌面浏览器。

• remark42

  • 开源的评论服务，可以用来为静态网页加上留言功能。

• wiby

  • 一个极简的搜索引擎，加载速度很快。

• vscode-rss

  • Visual Studio Code 的插件，提供一个嵌入式的 RSS 阅读器，可以在 VScode 里面阅读新闻和博客。

• React Spectrum

  • Adobe 公司的 React 组件库，用法非常简单干净。

  • @adobe/react-spectrum - npm (npmjs.com)

  • https://github.com/adobe/react-spectrum

• css-sweeper

  • 一个只用 HTML 和 CSS 实现的扫雷游戏，不使用 JavaScript。

• project-citadel

  • 一个开源的看板程序，用于项目管理。

• react-table

  • React 的表格组件库，新的 7.0 版完全采用 Hooks 设计。

• 1、数据可视化图表目录

  • 这个网站收集各种数据可视化的图表类型，简要讲解每种类型的用途和特点，而且有中文版。

• 2、Gradio

  • 该网站提供一系列可以在线使用的 AI 工具，比如识别物体、识别手写数字、老照片着色、绘画生成等等。

• 3、impossible-objects

  • 这个仓库提供 3D 打印源码，可以打印一些不可思议的物体，在镜子里面呈现另一个形状。

• 开源地图 OpenStreetMap

• Git 工作流程的图示（英文）

  • 本文用清晰的图形解释了五种 Git 工作流程，比如上图是 master - develop - feature 的工作流程

• Tailwind CSS：从业余项目到数百万美元的业务（英文）

  • Tailwind CSS 的作者介绍这个框架的诞生过程，以及他们如何通过它赚到几百万美元。

• Luckysheet

  • 一个网页表格库，类似 Excel 的效果。

• Story Creator

  • 一个在线的视频编辑器，可以用来在浏览器里面编辑一些简单视频。

• 4、随机数据生成器

  • 这个网站提供一个 API，可以让你定制想要的随机数据，以 JSON 格式返回。

• 5、Compiler Explorer

  • 一个在线的编译器学习工具，可以显示高级语言对应的汇编代码，支持多种语言。

• 6、zebra-editor-core

  • 一个开源的富文本编辑器，功能丰富

• Yandex 图片搜索

  • 俄罗斯的搜索引擎 Yandex，我觉得体验不错，尤其是相似图片搜索，比谷歌好用。国内好像还没有被屏蔽。

• NightCafe

  • 一个图片处理的在线工具，可以让普通照片变成世界名画。下图就是基于凡高的《星夜》生成的照片。

• JS 1024 竞赛

  • 这是代码长度不超过 1024 字节的 JS 程序的比赛，2020 年的结果已经公布了。第一名是一个钢琴键盘，第二名和第三名是动画渲染，第四名是一个游戏。

• stackoverflow-top-cpp

  • StackOverflow 上面高票排名的 C/C++ 问题的中文翻译

• SVG Repo

  • 一个 SVG 图片（主要是图标）的搜索引擎。

• Motherboard DB

  • 电脑主板的数据库。

• 如何自己实现一个全文搜索引擎（英文）

  • 作者通过一个简单的例子，讲解全文搜索引擎的原理，自己如何实现倒排索引。举例用的是 Go 语言，代码很简单，接近伪代码。

• Fast

  • 微软官方的 Web Components 组件库。

• MeiliSearch

  • 一个开源的全文搜索软件，可以自己搭建服务，支持汉语搜索。

• Danfo.js

  • 一个提供跟 Pandas 相同功能的 JS 数学计算库。

• mvp.css

  • 一个最简化的 CSS 库，不提供任何自定义的类，只给出最基本的 HTML 元素的样式，适合在它的基础上添加自定义的样式。

• 1、CSS 生成艺术（英文）

  • 作者介绍如何用 CSS 生成各种形状的图形。

• 2、如何使用 Rust 开发单页应用 SPA（英文）

  • 单页应用（SPA）都是使用 JavaScript 开发，但是有了 WebAssembly 以后，其他语言也可以编译成 JavaScript。本文就完全使用 Rust 语言开发上图的 SPA，后端开发者现在也可以写前端了。

• 1、QRpicture

  • 一个在线工具，把图片变成可以扫描的二维码。

• 2、isoflow

  • 一个绘制示意图的在线工具。

• 5、umami

  • 一个开源的网站访问统计服务。

• 6、ts-migrate

  • Airbnb 公司新的开源项目，可以将 JavaScript 代码转成 TypeScript 代码。

• 9、maza

  • 一个本地的广告拦截器，通过封锁 DNS 达到拦截广告的目的。它的特点就是非常简单，就是一个 Bash 脚本，可以作为学习脚本编程的范例。

• 1、网络安全工程师的修炼途径（英文）

  • 作者在网络安全方面有 20 年的从业经验。他在本文中介绍网络安全工程所需的技能和培养途径。他提出，学习者一定要有自己的实验室，熟练使用虚拟机测试各种系统。

• 1、Ventoy

  • 一个制作可启动 U 盘的开源工具。

• 2、Songwhip

  • 一个音乐搜索引擎，特点是搜索歌曲可以返回各大影音平台的链接，支持中文歌曲搜索。

• 5、Ciphey

  • 有时，我们有一段加密文本，但是不知道它使用什么加密方法。这个命令行工具，会根据人工智能算法，自动判断加密方法，能不能解密。

• 7、ztext.js

  • 这个 JS 库可以将任何字体变成 3D 效果，支持中文。

• 1、CSS 渐变魔法

  • 该网站收集各种 CSS 渐变图像，可以复制到自己的项目。

• 2、labuladong 的算法小抄

  • 100 多道 LeetCode 算法题目的中文解释。

• 3、不可能的几何形状

  • 该网站收集各种不可能的几何形状图片，目前已经有两千多张了。

• 6、讲解开源项目

  • 一组中文的系列文章，介绍各种开源项目和用法。

• 1、Bootstrap 图标库

  • Bootstrap 的图标库发布 1.0 正式版，包含 1100 多个图标，全部都是 SVG 格式，可以插入 img 标签。

• 3、Broot

  • 一个很有特色的命令行目录浏览工具，有很多功能，比如列出每个子目录的大小。

• 4、Nessie

  • 一个极简的浏览器，快速、占用资源低、不需要安装，绿色使用。

• 1、searx.space

  • searX 是一个开源的搜索引擎，汇总来自 70 多个搜索服务（包括谷歌）的结果，不跟踪也不分析用户。使用时，需要自己架设实例。这个网站列出了世界各地现有的实例，以及访问速度的实时统计。

• 5、在线工具秘籍

  • 这个中文仓库收集各种好用的在线小工具。

• 9、Leetcode 刷题的一些技巧的经验之谈（中文）

  • 作者介绍 LeetCode 刷题体会：“坚持在 leetcode 刷题已经有近两年了，刷着刷着就成习惯了，就像每天刷牙吃饭一样，不刷会很不自然。”

• 1、responsively

  • 一个方便的桌面软件，集成了开发和调试响应式网页的各种功能。

• 2、网页骨架布局生成器

  • 有些网页加载时，会显示一个骨架布局（上图），获取正式内容后再替换掉。这个在线工具就用来生成骨架布局，支持 React、React Native、Vue 和 普通 HTML。

• 3、Skia Canvas

  • 一个 Node.js 库，可以在服务器渲染出 SVG 图片的展示效果，将 SVG 代码转为图片下载。

• 6、talk

  • 一个开源的 Web 视频对话软件，把 URL 发给对方，就可以在浏览器进行视频对话，不需要下载和注册。

• 7、OnlyOffice

  • 跨平台的 Office 套件，个人可以免费使用。

• 5、Linux 从零开始（Linux From Scratch）

  • 一本英文的免费书籍，讲述如何从源码一步步编译一个自己的 Linux 系统，帮助你深入理解 Linux。

• 3、微前端“容器”—— microcosmos 实现（中文）

  • 本文讨论了微前端的概念和实现，可以用来了解“微前端”这种新的做法

• 3、fastmac

  • 有时候，你需要 Mac 电脑的环境，但是手边又没有 mac 电脑。这个工具利用 GitHub Actions 提供的资源，让你可以免费使用 Mac 的命令行环境，不过只能使用一小会。

• 4、Screely

  • 一个在线工具，可以生成网页展示效果的示意图。

• 7、real-live

  • 一个开源的直播聚合收看平台。采用 Qt 作为前端框架，后端用到 Requests、MySQL、Redis 技术等，目前支持在该平台收看 36 个视频直播、59 个高清电视频道和 74 个广播电台。

• 10、BeeWare

  • 一个 Python 工具，让你的 Python 代码可以打包成跨平台图形界面应用，尤其是可以打包成手机 App，支持 iOS、Android、Windows、MacOS、Linux、Web 等平台。

• 1、Aggregated Awesome

  • GitHub 上面有很多 awesome 的仓库，收集某个主题的所有有用的内容。这个网页整理了一个 awesome 仓库的清单。

• 2、[Fuel Collection](https://app.ignitionrobotics.org/GoogleResearch/fuel/collections/Google Scanned Objects)

  • 谷歌对大量日常物品进行了 3D 扫描，将数据放在网上，提供公开下载

• 5、如何写一个简单的 C 语言解释器

  • 一个英语教程，通过写一个简单的 C 语言解释器，理解编译原理。

• 6、WebRTC 示例仓库

  • WebRTC 是浏览器点对点通信的 API，这个仓库给出了各种使用示例，覆盖了主要的使用场景。

• 4、谷歌搜索的 10 个小技巧（英文）

  • 谷歌搜索有很多小功能，比如搜索 stopwatch 会出现一个倒计时器（上图）。

• 6、GitHub 仓库的默认分支不叫“master”了（中文）

  • 从 2020 年 10 月 1 日开始，GitHub 所有新库的默认分支都将用中性词“main”命名，取代原来的“master”。

• 7、JavaScript 原生的日期和时间格式化（英文）

  • 通常使用外部库处理 JavaScript 的时间格式，但是原生的 Date.prototype.toLocale*方法其实也能满足需求。

• 1、instant.page

  • 一个 JavaScript 库，用户鼠标悬停在某个链接上方时，就自动加载该链接，从而加快页面跳转的速度。

• 2、Toonify

  • 一个在线工具，可以将真人头像变成卡通头像。

• 3、Advanced Rest Client

  • 一个 Rest API 测试工具，基于 Electron 的跨平台桌面软件。

• 4、kb

  • 一个极简的命令行笔记管理软件。

• 5、Aggie.io

  • 一个在线绘图工具，特点是可以多人实时协作绘制一幅作品。

• 6、Kivy

  • 一个 Python 的 UI 框架，可以打包成 Windows、Linux、MacOS、 Android 和 iOS 应用，特别为多点触摸设备而设计。

• 8、keenwrite

  • 一个跨平台的 Markdown 桌面编辑器，基于 Java。最大特点是支持自定义语法。

• 9、Twister OS

  • 一个树莓派的操作系统，可以让桌面变得像 MacOS 或 Windows。

• 暴力破解密码所需的时间

• 5、11 种 Node.js ORM 库的简介（英文）

  • 作者介绍了 11 种常用的用于连接数据库的 Node.js ORM 库。

• 3、visx

  • Airbnb 推出的一套数据可视化组件库，基于 D3 和 React。

• 4、Release

  • 一个 Node.js 库，一键生成软件包的 changelog。

• 5、Blacklight

  • 一个在线工具，可以检查某个网站使用了哪些追踪技术。

• 6、Wewatermark

  • 一个在线工具，可以为图片加上各种各样的水印。

• 9、Pixelixe Photo Editor

  • 一个 Chrome 浏览器插件，在浏览器里面打开一个图片编辑器。

• 3、Flexbox Defense

  • 一个在线的塔防小游戏，通过 CSS Flexbox 的练习，击退一波波进攻的敌人。

• 5、Wireflow

  • 一个开源的在线工具，用来画流程图和线框图。

• 7、Actionsflow

  • 一个 GitHub Actions 的模板库，用于对网上各种数据源，进行自动化组合操作，类似于 IFTTT。

• 8、Infer

  • Facebook 推出的一个静态代码分析工具，可以分析 Java、C++、Objective-C、C 代码里面的错误

• 9、alldocs.app

  • 一个开源的在线文档格式转换器，底层是 Pandoc。

• 1、Asmrion

  • 一个声效网站，用户点击不同图标（比如下雨、刮风、海边），就可以听到不同的声效作为背景音。

• 2、Git Exercises

  • Git 学习网站，通过示例仓库，提供一系列 Git 的小练习，帮助用户掌握这个版本管理工具。

• 4、静态网站的开源评论系统

  • 该网站列出了各种静态网站的开源评论系统，并进行了比较。

• 8、如何实现最简单的 Office 套件（英文）

  • 作者利用 Web 技术，在浏览器实现最简单的富文本编辑器、电子表格和幻灯片演示。

• 9、如何写一个最简单的 React 实现（英文）

  • 作者讲解如何自己实现一个最简单的 React，支持 JSX 语法和一些基本 API，压缩后代码不超过 1KB。本文可以用来了解 React 原理。

• 1、playwright-python

  • 微软推出的浏览器自动化工具，特点是浏览器的控制脚本用 Python 来写。

• 2、Anbox

  • Linux 系统的安卓模拟器。

• 3、Diagram Maker

  • 亚马逊推出的开源流程图制作工具。

• 4、DigitalOcean 应用程序平台

  • DigitalOcean 发布应用程序平台，跟 GitHub 深度融合，可以直接把 GitHub 项目在上面部署和运行，很适合那些需要后端的网络应用。

• 5、Apache JMeter

  • 一个服务器和数据库的性能压测工具，具有图形界面。

• 6、nb

  • 一个命令行的笔记软件。

• 8、optimizt

  • 一个命令行图片压缩工具，支持压缩 PNG、JPEG、GIF 和 SVG 格式，并可以选择输出 WebP 格式。

• 9、Calligrapher.ai

  • 一个在线工具，可以将英文输入变成手写体，并具有动画效果，提供 SVG 格式下载。上图是输入 Google 的效果。

• 1、CSS 3D 示例

  • 该网页收集一些常用 CSS 3D 示例。

• 2、漫游者的压缩知识指南

  • 一个面向初学者的英文的简单教程，介绍数据压缩知识，了解压缩算法

• 3、宇宙模型

  • 一个浏览器的 3D 显示实验项目，在网页上展示 10 万颗恒星，讲解宇宙知识。

• 4、names.io

  • 这个仓库通过各种数据库，收集所有出现过的英语人名（包括外国人的英文译名），分成姓和名两个文件。

• 1、tiptap

  • 一个轻量级的富文本编辑器。

• 4、SciterJS

  • 使用 HTML/CSS/JS 技术构建跨平台的桌面应用，类似于 Electron 的作用，但是它自己实现内核，比 Eletron 更简单，打包出来的程序也更小。详细介绍看这里。

• 5、KakaCSS

  • 在任意网站复制内容，粘贴到这个网站，会给出所复制内容的 CSS 样式代码。

• 9、ChineseBQB

  • 开源表情包搜索工具

• 1、ConsoleChat.io

  • 一个在浏览器控制台进行聊天的工具库。

• 2、SVG Favicon Maker

  • 一个在线工具，制作 SVG 格式的 Favicon。

• 6、Glow

  • 一个命令行的 Markdown 阅读工具。

• 7、vdx

  • 一个命令行的视频处理工具，属于 FFmpeg 的包装库，提供简单易用的语法格式。

• 1、使用 Scriptable App 开发 iPhone 小组件（中文）

  • iOS 14 升级了小组件功能，有一个 Scriptable App 可以使用 JavaScript 语言为 iPhone 创建各种小组件。

• 3、我怎么做鸡排外卖（中文）

  • 知乎的一个长帖，作者讲述自己怎么将鸡排外卖做成全国连锁，可以了解外卖商家是怎么运作的。

• 7、如何在 Markdown 文档显示 diff 效果（英文）

  • 很多人不知道的一个小技巧，Markdown 表示 diff 效果的语法（上图）。

• 2、youtube

  • 一个 Go 语言写的 Youtube 视频下载工具，youtube-dl 的替代品。

• 3、hoppscotch

  • 一个开源的 Postman 替代品，调试 HTTP 请求的在线工具。

• 4、Draw On PDF

  • 一个在 PDF 文件上作图的在线工具。

• 5、Vega-Lite

  • 一个制作互动式图表的 JS 库。

• 6、volute

  • 一个语音工具的集成软件，文档教你如何在树莓派上使用 Node.js，搭建自己的语音助手，可以识别语音，也可以将文本转为语音。

• 7、H5-Dooring

  • 一个可视化制作 H5 页面的在线工具

• 8、winXP

  • 该项目使用 React 做了一个跟 Windows XP 一模一样的网站。上图其实是一个网页。

• 9、Profile Pic Maker

  • 一个在线工具，上传人像照片，可以自动提取头像，生成大头照图片。

• 10、Gitako

  • 一个浏览器插件（支持 Chrome、Edge、Firefox），浏览 GitHub 时可以在网页上显示文件树。

• 2、中文技术文档写作风格指南

  • 作者综合了在互联网上能找到的各家中文文案风格指南、国外大厂成熟的文档规范、以及国标建议的出版要求，编写了这份超过 30 页的开源文档。

• 7、从头写一个 Deno 的 BitTorrent 下载器（中文）

  • 介绍 BT 下载的实现细节，有 JavaScript 代码的下载客户端示例

• 1、presenta

  • 一个 JS 的网页幻灯片库，特色是可定制的选项多。

• 2、Snake Classic

  • 一个 JS 代码演示，网页版小游戏《贪吃蛇》。

• 3、ox

  • 一个命令行的代码编辑器，具有部分 IDE 功能，使用 Rust 语言编写。

• 5、ffmpeg.wasm

  • ffmpeg 库的 wasm 移植，使得 Node.js 可以用这个库编辑视频。

• 6、Vue Hooks Form

  • Vue 3 的一个 Hook，用来制作表单

• 7、SvgPathEditor

  • 一个开源的 SVG 图形路径编辑的在线工具。

• 8、PageSpeed Insights

  • 谷歌官方的网页性能的在线评分工具。

• 9、ibis

  • 一个使用 PHP 写的命令行工具，可以把 Markdown 源文件转成 PDF 格式的电子书。

• 5、如何使用工具写出可维护的 Node.js 代码？（英文）

  • 本文介绍使用各种工具（TypeScript、Prettier、Sentry、Prometheus 等），提高 Node.js 代码的可维护性。

• 2、markdown-wasm

  • WebAssembly 版本的 markdown 解析器，比 JavaScript 写的解析器快两倍以上，而且体积很小（31KB）。

• 6、md

  • 一款开源的微信公众号 Markdown 编辑器，基于 wechat-format 进行了二次开发。

• 1、我开发 SaaS 的工具和服务（英文）

  • 作者列出了自己开发 SaaS 服务用到的各种工具和服务，包括前端工具和后端工具。

• 2、开源项目维护者的九个阶段（英文）

  • 一个成功的开源项目，它的维护者可能需要经历九个阶段，第一个阶段是发明家，最后一个阶段是光荣退休。

• 9、用 JS 写一个 JS 解释器（中文）

  • 本文解释了 JS 解释器如何将源代码转换成 AST（抽象语法树），并给出了一个简单的、便于理解的解释器实现。

• 1、 Your First GitHub Commit

  • 这个网站可以找出你的第一个 GitHub 提交。

• 2、Perfect Dark Mode

  • 一个 JS 库，一键切换网页的亮模式和暗模式。

• 4、gping

  • Rust 写的 ping 命令的替代品，带有图形界面。

• 6、Logseq

  • 一个开源的在线笔记工具，具有强大的知识整理功能。特点是所有数据都储存在你的 GitHub 仓库里面，网站本身不保存用户数据。

• 7、Drumbit

  • 一个在线的鼓点模拟器。

• 8、GitHub Pages URL Shortener

  • 使用 GitHub Pages 托管你自己的短网址服务，不需要后端和数据库，非常有创意的小工具。

• 9、SVGOMG

  • 一个在线工具，用来压缩 SVG 图像文件。

• 5、Linux 命令大全

  • 一个中文文档库，收集了 Linux 的各种命令，收集了命令的解释和配置项示例。

• 6、Notion Clone

  • 一个 Notion 的开源克隆，提供在线的笔记管理功能。

• 8、BundlePhobia

  • 一个在线工具，分析 npm 软件包的体积和加载性能，比如 lodash@4.17.20 的体积是 69.9kB，2G 网络下载需要 0.81 秒。

• 9、Blades

  • 一个 Rust 语言写的静态网站生成器，速度极快，号称比 Hugo 快 10 倍。

• 11、Presenta

  • 一个在线制作幻灯片演示的工具，只使用简单的 HTML 语法，就可以在线展示的幻灯片。

• 6、2020 年的 100 项最佳发明

  • 《时代》杂志评选的今年 100 项最佳发明。

• 3、texme

  • 一个 JS 库，可以将 Markdown 自动渲染成网页内容

• 8、使用 GitHub Issues 的数据生成静态网站（英文）

  • 作者介绍如何将 GitHub Issues 用做编辑器和数据储存，通过 GitHub Actions 和 Netlify 生成一个静态网站。

• 6、npm-unpkg

  • 一个在线工具，可以查看 JS 软件包里面包含哪些文件，每个文件的源码。

• 8、Watermark Video

  • 一个开源的在线工具，可以为小视频加上水印图片。

• 9、pronounce

  • 一个开源的浏览器插件，只要双击网页上的单词，就能听到这个词的发音，支持各种语言。

• 2、RegExLib

  • 该网站收集各种常用的正则表达式，比如搜索“email”，会返回 961 个正则表达式。

• 3、AI 事故数据库

  • 该网站收集各种人工智能 AI 产生的各种事故。

• 1、imgdiff

  • 比较两张图片差异的命令行工具。

• 2、BrowserTime

  • Chrome 浏览器的插件，显示一个仪表盘，分析你的浏览历史，显示你在哪些网站花费最多时间。

• 3、AI Picture Restorer

  • 一个在线工具，去除老照片的破损和折痕。

• 4、Cloudflare Pages

  • Cloudflare 推出的静态网站构建和托管服务

• 5、Geometrize

  • 一个在线工具，将照片转成基于几何形状的水彩画。

• 6、OwnCast

  • 一个可以自己搭建的开源流媒体服务，用作视频的在线播放。

• 7、tetris

  • 命令行的俄罗斯方块游戏。

• 8、Holiday Card Maker

  • 一个在线工具，上传肖像照，软件会自动去除背景，生成各种节日照片

• 1、[恐龙的声音](https://www.google.com/search?q=what sound does a dinosaur make)

  • 谷歌搜索 “what sound does a dinosaur make”（恐龙的声音是什么），网页就会显示一系列可以播放的动物叫声。

• 4、awesome-oss-by-country

  • 这个仓库按照国别，收集每个国家 awesome（优秀的）开源项目。

• 4、Mdpdf

  • 一个将 Markdown 转为 PDF 文件的 JS 库，底层是谷歌的无头浏览器 Puppeteer。

• 6、Personal Management System

  • 一个 Web 开源应用，可以自己搭建服务，将个人信息（笔记、代码事项、密码、日程安排、联系人等等）放在一个地方管理。

• 1、游戏 UI 数据库

  • 该网站收集各种游戏的 UI 设计，提供多种分类，比如上图是第一人称视角的游戏。

• 2、计算机教育缺失的一课

  • 麻省理工学院计算机课程的中文版，向学生介绍基本的软件开发工具，帮助学生提高使用工具的能力。

• 4、《如何创业》系列视频

  • 创业孵化公司 Y Combinator 的前总裁 Sam Altman，整理的系列视频讲座。

• 3、ArtLine

  • 一个深度学习项目，将照片转为线条素描画，这里有可以运行的 Demo（Flask 应用）

• 5、pure CSS digital clock

  • 一个纯 CSS 的数字时钟。但是，CSS 无法获取当前时间，所以只能显示为从 12 点开始。

• 7、Scrollama.js

  • 一个网页滚动效果的封装库，基于 IntersectionObserver API。

• 8、DALL-E

  • OpenAI 公司又推出了一个神奇的软件 DALL-E，可以根据文字描述自动生成图片。

• 9、My Icon

  • 一套免费图标，用来更换 iOS 14 的图标。一共有几千个图标可供选择，还允许自定义和编辑。

• 4、bigdata_analyse

  • 这个仓库收集一些真实的大数据分析案例，用来了解如何处理不同行业的分析指标。目前有 4 个案例，包括 1 亿条淘宝用户行为数据分析、7000 条租房数据分析等等。

• 6、 Go 语言高性能编程

  • 免费的中文电子书，作者介绍了 Go 程序提高性能的一些技巧。

• Excalidraw 是开源的手绘风格的一个在线作图工具，2020 年 1 月发布。

  • https://github.com/excalidraw/excalidraw

• 1、locust

  • 一个开源的负载压测工具。

• 3、HTML Editor

  • 一个最简易的 HTML 在线编辑器，可以实时自动预览效果。源码非常简单，有学习价值。

  • https://github.com/no-gravity/html_editor

• 7、Statically

  • 该服务可以免费将 GitHub 和 GitLab 的源码文件放上 CDN，供外部调用。

• 8、Thumbnail.AI

  • 这个在线服务可以为任意 URL，自动生成标题图片，便于在社交媒体引用文章时，提供缩略图。

• Backend Developer 后端开发者路线

  • 后端开发人员路线图：学习成为现代后端开发人员 (roadmap.sh)

• 6、极客阅读

  • 一站式的技术阅读网站，汇集中文技术博客、YouTube 视频、开源产品动态、公众号文章等

• 3、在线视频片段合并

  • 很多在线视频都是许多 .ts 文件组成的，这个在线工具可以输入 .ts 文件的网址，然后将它们合并。

• 4、Cavepaint CSS

  • 一个可以在线调节主要参数（CSS 变量）的 CSS 框架。

• 5、ssh-mitm

  • 一个 SSH 中间人服务器，拦截所有 SSH 操作。可以用作“蜜罐”，攻击者自以为登陆了真实服务器，从而让系统记录下他的操作。

• 7、LibreTranslate

  • 一个开源的、可以自己架设的机器翻译服务，支持多种语言的互相翻译，包括中文。

• 8、Multiavatar

  • 一个在线工具，可以根据输入的文字，生成用户头像图片（ avatar）。

• 9、Transform

  • 一个在线工具，可以将各种代码互相转换，比如把 HTML 转为 JSX，或者把 JSON 转为 XML。

• 1、Electronic References

  • 该网页收集网上免费的计算机科学教科书。

• 2、Proton 游戏数据库

  • 该网站提供所有可以通过 Proton 在 Linux 上运行的游戏资料。

• 4、最繁忙的航线

  • 该网站可以查看世界各地的航线数据，比如本月最繁忙的 10 条国际和地区航线，以及各国国内最繁忙的航线。

• 5、freeCodeCamp 课程

  • 该网站提供一系列免费的英文 IT 课程，内容比较浅显简单，适合初学者。

• 2、freeCodeCamp 中文版

  • 这是上一期介绍的 freeCodeCamp 初学者免费教程的中文版，由志愿者翻译的。

• 3、如何用 GitHub Actions 更新 WordPress 网站（中文）

  • 本文介绍使用 GitHub Actions 将仓库里面的 Markdown 文章，远程发布到 WordPress 网站。

• 4、PyG2Plot

  • Python 的数据可视化图表生成工具，基于蚂蚁集团开源的 G2Plot 封装

• 5、openpilot

  • 一个开源的辅助驾驶系统，可以自动车道居中和自适应巡航控制，已经支持 85 种车型

• 6、Swagger 文档导出

  • 一个在线工具，可以将 Swagger 文档（yaml 或者 json 格式）导出为 PDF、Markdown、EPUB、HTML 等格式。

• 7、Basemark

  • 一个可以跑分的网站，用来测试浏览器的性能。

• 8、LocalCDN

  • 一个浏览器插件，将常用的前端 CDN 库集成在插件里面，避免发出网络请求，加快加载速度，以及降低隐私泄漏的可能。

• 9、X6

  • 蚂蚁集团数据可视化工具 AntV 旗下的图编辑引擎，用来在网页上生成 SVG 图形

• 3、Games on GitHub

  • 这个仓库收集 GitHub 上面的各种开源游戏。

• 5、Radiance

  • 该网站收集了全世界几十个国家的艺术家创作的 VR 视频，可以戴 VR 眼镜欣赏。

• 1、Ebook Reader

  • 浏览器里面的电子书阅读器，只要把 azw3、epub、mobi、pdf 格式的电子书拖到网页上，就能打开阅读。如果临时需要一个阅读器，这个就很方便。

• 2、Darkwire.io

  • Web 端的多人在线聊天室，特色是支持端到端加密

• 4、Filmulator

  • 一个开源的 Raw 格式相片编辑器。

• 7、Text to Handwriting

  • 这个在线的开源工具，可以将文字转为手写体，并提供图片下载。默认只支持英文，但可以自己添加中文字体，并指定背景图片。

• 9、CSS Stripes Generator

  • 一个纯 CSS 的条纹生成器，可以在线调节各种参数，网站就会生成相应的代码。

• 10、Archivy

  • 一个开源的知识库软件，可以自己本地架设，管理个人笔记。

• 1、肌肉维基

  • 英文的维基网站，提供人体每一块肌肉的详细资料。

• 1、Coding Fonts

  • 代码编辑器使用什么字体？ CSS Tricks 推出的这个在线工具，可以浏览各种不同字体的渲染效果。帮助大家选择代码字体。

• 4、EPUB.to

  • 这个网站可以将 EPUB 格式的电子书转为其他格式，也可以将其他格式转为 EPUB。

• 5、Remark42

  • 一个开源的、可以自己搭建的网站留言服务。

• 7、react-darkreader

  • 一个 React 组件，允许网站在暗模式和亮模式之间切换

• 8、Qwerty Learner

  • 一个通过单词的打字输入加强记忆的在线工具，可以选择词库。

• 9、345Tool.com

  • 该网站收集一些可以提高编程效率的在线小工具

• 1、Build your own x

  • 这个仓库专门收集各种教程，教你如何自己实现各种软件，比如 Web 服务器、BT 下载客户端、Git、数据库等等。

• AIArtists.org

  • 这个网站收集所有可以生成艺术品的 AI 工具，比如 AI 画像、AI 音乐等等。

• 7、flameshot

  • 功能很强的桌面截图软件，支持 Windows 和 Linux。

• 1、GitHub Skyline

  • GitHub 官方出品，将你过去一年的提交统计转成一个三维的直方图，并且提供 stl 文件下载，进行 3D 打印。

• 3、Ray.so

  • 这个网站可以生成漂亮的代码截图，颜色、阴影、背景都可以调整。

• 8、嘎 RSS!

  • 使用免费的 GitHub Actions，定时抓取一系列 RSS 源，生成一个页面，还支持邮件通知

• 5、故宫博物院藏品总目

  • 故宫博物院官方的藏品目录，共收入 180 多万件，可以在线搜索，部分藏品带有彩色照片和文字介绍。

• 6、React 资源库搜索

  • 这个网站收集各种 React 相关的开源库，按照用途进行分类，相关的还有 Vue.js 资源库搜索。

• 3、uidea.tools

  • 一个在线 UI 设计工具，可以用来制作 H5 网页原型

• 5、Prisma

  • Node.js 和 TypeScript 的 ORM 库，还提供了单独的查看数据库的 GUI 程

• 6、Snyk

  • 一个开源程序，可以在本地检查 node.js 项目外部依赖模块的安全漏洞

• 7、Cloudflare Pages

  • Cloudflare Pages 开始了 beta 测试，可以自动构建 GitHub 仓库，发布为静态网站，跟部署到 Netlify 流程基本相同。

• 1、What the f*ck Python!

  • 这个仓库是原始英文版的中文翻译，收集 Python 语言的各种怪异的语法点，以及鲜为人知的功能特性，并尝试讨论这些语法现象背后真正的原理。

• 2、Buzzing

  • 该网站汇集了国外社交媒体里的热门讨论，并且标题都自动翻译成了中文

• 3、How they SRE

  • 各个仓库收集各大互联网公司的站点可靠性工程（SRE）最佳实践。

• 5、I Miss My Bar

  • 这个网站提供酒吧的环境音，可以选择加入什么声音：倒酒声、谈话声、街道声、雨声、背景音乐等。

• 2、SVG Waves

  • 一个在线工具，可以生成 SVG 的波浪图片，各种细节都可以定制。

• 3、NodeGui

  • 一个类似 Electron 的跨平台桌面应用开发框架，底层技术是 Node.js + Qt5。

• 4、ffmpeg-python

  • FFmpeg 的 Python 包装库，将复杂的命令行参数转成易用的 API。

• 5、SVG 俄罗斯方块

  • 在一个 SVG 文件里面，实现俄罗斯方块小游戏。原理是 SVG 可以内嵌<script>标签。

• 6、ghostwriter

  • 一个 Markdown 桌面编辑器，支持 Windows 和 Linux。设计思想是保持强大功能的同时，对写作产生最小干扰，提供全屏的简洁模式。

• 7、Image Renamer

  • 一个使用 EXIF 信息的图片文件批量改名工具，支持 MacOS 和 Windows

• 8、Github Star Count

  • 一个 Chrome 浏览器插件，在网页的 GitHub 仓库链接后面，插入该仓库的 Star 数目。

• 2、奇怪的词源

  • 这个网站收集各种 IT 单词的来源。

• 3、Web Browser Engineering

  • 一本正在写作中的开源书籍，介绍如何使用 1000 行 Python 代码，实现一个简单的网页浏览器。

• 4、DOS Zone

  • DOS 游戏仓库，收集的所有 DOS 游戏都可以在浏览器里玩。

• 2、UserLAnd

  • 一个安卓应用，让你在安卓手机上安装 Linux 发行版，就像安装一个常规 App，不需要系统 root

• 3、lint-md

  • 一个检查中文 Markdown 语法风格的命令行工具，比如英文字母与全角字符之间有一个空格

• 7、mdBook

  • GitBook 的 Rust 语言移植，可以将 markdown 源文件转成一个在线阅读网站。

• 8、flowchart-fun

  • 可能是最简单的流程图制作工具。左边的文本框输入，一行就代表一个新节点，缩进代表隶属关系，右边自动生成图形。

  • 

• 1、Clone Wars

  • 该仓库收集热门网站的开源实现，比如 Airbnb、Amazon、Instagram、Netflix、Tiktok、Spotify 等，已经有 70 多个项目了。

  • 

• 2、地球史视频

  • 一个原创科普视频的 Youtube 频道，从地球诞生开始，一段一段介绍地球的历史。

  • 

• 3、真实世界的密码学（Real-world Cryptography）

  • 本书使用简单的语言和示例，解释了普通用户在日常生活中遇到的密码学问题，可以免费在线阅读。

  • 

• 3、wormhole-gui

  • 一个桌面应用程序，可以在同一个局域网的各个机器之间，互相发送文件。

  • 

• 7、moovie.js

  • 一个 JavaScript 写的 HTML5 视频播放器，可以在网页上播放视频。特点是功能较全，支持外挂字幕文件。

  • 

• 8、Papercups

  • 一个可以自己架设的开源服务，在网页上插入聊天窗口，并可以集成 Slack，即在 Slack 上与网站访问者对话。

  • 

• 9、Fraidycat

  • 一个另类的 RSS 阅读器，作为浏览器扩展安装，可以订阅 RSS 和社交媒体动态。UI 有点像推特的时间线，可以高效地展示信息。

  • 

• 5、Android FFmpeg 音视频开发教程

  • 一个中文教程，介绍如何将 FFmpeg 集成进入安卓 App，带有示例工程源码

• 1、xeuledoc

  • 一个命令行工具，用于获取谷歌文档的各种元信息。

• 2、kill-sticky

  • 一个 Bookmarklet 书签脚本，用于消除网页上的粘性页眉或页脚。

• 3、I don't care about cookies

  • 浏览器插件，用来消除网页上的各种 Cookie 许可的提示层。

• 4、Sorted CSS Colors

  • CSS 标准一共列出了 148 种有名称的颜色，这个在线工具用来在它们当中找到合适的颜色。你在色轴上面确定一个基色，相近的颜色就会按照从浅到深的顺序列出。

  • 

• 5、Nyxt

  • 一个带有命令行的浏览器，可以完全不用鼠标，只通过命令行浏览网页

  • 

• 6、Charts.css

  • 一个只使用 CSS 的图形库（不需要 JS），可以把<table>标签变成折线图、直方图或其他图形。

• 7、Manim

  • 一个用来生成数学动画视频（比如绘制函数）的 Python 库。

  • 

• 8、React PIN Field

  • 一个 React 组件，生成漂亮的密码（验证码）输入框。

  • 

• 9、FocalBoard

  • 一个桌面的看板软件，类似 Trello，可以用来管理待办事项。

  • 

• 10、Workflow

  • 搜狗的 C++ 服务器引擎，支持各种后端协议，可以在它的基础上进行 C++ 开发，定制自己的高性能服务器。

• 1、Visu Algo

  • 该网站有各种常用算法的可视化演示。

  • 

• 3、文本编辑器比较

  • 文本编辑器是程序员的必备工具，这里比较了十几个常见编辑器的性能，包括内存占用、文件打开时间、正则搜索速度、大文件支持等方面。

• 4、Emoji Tracker

  • 这个网页按照推特的使用数量，对表情符号 Emoji 进行排序，最常用的放在最前面。可以用它查找哪些 Emoji 是经常使用的。

• 1、FicusJS

  • 一个 Web Component 组件开发框架，看上去挺简单。

• 3、PDFReal

  • 该网站提供了一系列在线工具，用于 PDF 文件的各种处理。

• 7、MDTU

  • Markdown 文档的微信公众号编辑器，支持微信外链转脚注（或二维码）、从 URL 采集 Markdown 等功能

  • 

• 8、VS Code 主题生成器

  • 一个在线工具，用来创建自己的 VS Code 主题。

  • 

• 10、DeaDBeeF

  • 桌面音频播放器，支持几乎所有的音频格式，并且可以互相转换。Linux 和 macOS 可用。

  • 

• 2、程序员的 IT 英语教材

  • 这是波兰某个大学的计算机专业英语教材，收集了一些 IT 方面的经典英语文章，用来提高非英语国家程序员的英语水平。

  • 

• 5、高教书苑

  • 高等教育出版社的在线平台，可以查阅该社出版的 3000 多本书籍的信息，还可以免费阅读全文或部分章节。

  • 

• 7、HTTP Toolkit

  • 一个桌面程序，用来拦截和调试各种应用的 HTTP 通信，包括浏览器、安卓应用、命令行应用、Electron 应用等等。

  • 

• 8、DBeaver

  • 

  • 数据库管理的桌面软件，支持各种主流数据库。

• 2、VR compare

  • 这个网站收集各种 VR 头盔的详细信息，并有对比表格。

  • 

• 3、kunstderfuge.com

  • 该网站可以按照古典音乐家的人名查询，免费下载他们作品的 MIDI 文件，各类作品接近 20000 个。

  • 

• 4、Google Earth Timelapse

  • Google Earth 提供的卫星照片时间线功能，可以查看同一个地点从 1984 年至 2020 年的变化，目前官方提供了十几个地点。

  • 

• 5、文本生成图表的在线工具

  • 这个网页收集各种从文本生成图表（text-to-diagram）的在线工具，一共有 40 多种。

  • 

• 4、NPlayer

  • 一个支持弹幕的网页视频播放器

  • 

• 7、GoGoCode

  • 一个 JavaScript 代码的 AST 抽象语法树的处理工具，便于方便地转换代码

  • 

• 8、Storyteller

  • 如何写软件教程，是一个令人头痛的问题。Storyteller 是一个在线工具，提供一个教程编辑器，以无代码的方式制作交互式教程。

  • 

• 5、CSS 技巧（英文）

  • 本文介绍一些较新的 CSS 技巧，可以不使用 JavaScript，就达到复杂的交互效果。

• 1、Puppeteer Console

  • 这个网站提供一个虚拟浏览器的控制台，可以在线输入 Puppeteer 脚本，然后就会在网页上可视化打开浏览器，看到运行结果。

  • 

• 2、React Flow

  • 一个基于 React 的库，用来制作功能强大的、可交互、可编辑的节点图工具。

  • 

• 3、Pexels 视频制作器

  • 这个在线工具根据关键字，从图库里面找出相关图片，自动生成一段 40 秒的视频。

  • 

• 4、Cusdis

  • 一个可以自己搭建的网页评论系统，类似于 Disqus。

  • 

• 5、nushell

  • 一个命令行 Shell，语法更加合理，通过管道功能可以更加便捷地管理系统。

• 6、Netdata

  • Linux 服务器的一个开源的监控服务，功能非常强大。

  • 

• 7、Triangula

  • 这个开源软件可以将照片转为三角形图案。

  • 

• 5、一天学习一个 npm 轮子

  • 一个教程库，作者选了十几个常用的前端 JS 库，演示如何自己从头实现这些库

• 3、新兴技术列表

  • 这是维基百科的一个页面，列出了目前最前沿的技术领域，将近有 100 个。

• 99 条建议

  • Kevin Kelly 给年轻人的 99 条建议 - Go123 博客

• 7、Prisma ORM 库介绍（英文）

  • Prisma 是 Node.js 和 TypeScript 项目新一代的 ORM 库，用来操作数据库。看上去功能非常强大，还带有配套的图形界面管理工具，下一个项目可以用它试试看。

• 1、Semgrep

  • 静态代码扫描工具，用来发现代码错误，类似于 ESLint，但可用于 17 种语言。

• 4、MarkShow

  • 一个在线工具，你输入 Markdown 文档，它自动转为 PPT 模式，进行在线演示。

  • 

• 5、virtocean

  • 该网站提供各种海洋相关的声音，作为背景音乐。

• Artbreeder——超级有趣的在线图像合成网站

  • Artbreeder——超级有趣的在线图像合成网站 - 知乎 (zhihu.com)

• 3、osmos::feed

  • 

  • 一个通过 GitHub Actions 自动更新的 RSS 阅读器，每次更新后会发布成 GitHub Pages 的静态网页

• 4、APK 在线分析

  • 一个在线工具，用来分析、修改 APK 文件（安卓应用安装包），以及提取 APK 图标

• 5、Come Browse With Me

  • 

  • 这个在线工具通过 WebRTC，可以将你的浏览器窗口分享给他人，也就是说，别人可以看到你在页面上的一举一动。

• 6、readme.so

  • 

  • 一个 Web 工具，通过拖拉自动生成代码仓库的 README 文件。

• 7、FicusJS

  • 一个轻量级的 Web Components 开发框架，用于快速开发 Web Components 组件。

• 8、github-elements

  • 这个仓库收集了 GitHub 发布的官方 Web Components 组件，目前有 17 个，都是 GitHub 官网实际在使用的项目。

• 9、一纸简历

  • 使用 Markdown 编写简历的在线工具，支持模板与实时预览，可以导出为 PDF 文件

  • 

• 10、木及简历

  • 

  • 编写简历的在线工具，与上一个软件类似，有多个模板可选择，源码见 GitHub。

• 1、FFmpeg 操作备忘

  • 这个网页收集了 FFmpeg 一些常见操作的命令行写法。

• 2、业余编译器作者的学习资源

  • 

  • 该网页收集各种编译器相关的自学资源。

• 2、Vulture

  • 一个 Python 的静态代码检查工具，可以发现没有用到的代码。

• 3、Send

  • Mozilla 基金会曾经推出了一个文件分享服务，后来停止开发了。社区就接过来，做成完全的开源版，现在可以自己搭建，并且有 Web、命令行和安卓等各种客户端。

• 4、Sequencer 64

  • 一个架子鼓的网页模拟器。

  • 

• 5、Id128

  • 一个 JavaScript 库，生成 UUID（通用唯一识别码），支持多种算法。

• 6、Pyodide

  • 这个库是浏览器的 Python 运行时，通过 WebAssembly 脚本让网页运行 Python 代码，可以通过它加载一些人工智能或者科学计算的库。

• 8、Play.js

  • 一个 iOS 应用，提供 JavaScript IDE，允许在 iPhone 和 iPad 上开发 Web 和 Node.js 应用。

• 10、NewTabEditor

  • Chrome 浏览器的插件，可以让新标签页变成一个文本编辑器

• 1、CSS 学习教程

  • 谷歌出品的 CSS 教程，内容很丰富全面，一共有 24 课

• 2、Iconic

  • 一个开放式的图标仓库，可以分类查找图标，免费下载。

  • 

• 4、MANUZOID

  • 这个网站可以搜索 100 多万种产品的英文产品说明书。

• 5、凤凰架构

  • 

  • 一本中文的开源书籍，介绍如何构建一套可靠的分布式大型软件系统，可以免费阅读

• 1、sqliteviz

  • 一个网页应用，可以在网页上可视化操作 SQLite 数据库。

  • 

• 2、git-split-diffs

  • 

  • 这个命令行工具可以将代码 diff 显示为类似 GitHub 的样子。

• 3、Hurl.it

  • 

  • 这个网站可以定制并发出 HTTP 请求，相当于 Postman 的网页版。

• 4、Compose for Web

  • 

  • JetBrains 公司推出的新工具，允许使用 Kotlin 语言开发 Web UI，目标是将来同一套代码适配桌面、Web 和安卓 App。这有希望成为 Java 开发写 Web 页面的最容易方案了。

• 5、octokit.js

  • 一个 GitHub API 的 JS 包装库，全部封装好了，可以更方便地操作 GitHub。

• 6、touchbar-systemmonitor

  • 一个 MacBook pro 笔记本的开源小工具，可以在 Touch Bar 显示系统状态。

• 7、firefox_explore

  • 一个本地工具，用来分析 Firefox 的浏览历史，比如最常访问的网址、一天各个时段的浏览统计等等。

• 8、Video Puppet

  • 

  • 这个工具可以将一篇 Markdown 文档转成视频，支持插入图片和音频，还可以使用自动合成的语音解说。

• 9、use-sound

  • 一个 React 钩子函数，用来添加声音效果，比如点击按钮发出"滴"的一声。

• 5、你不需要 GUI

  • 这个仓库收集了一些常用的命令行操作，可以替代图形界面 GUI，主要针对初学者，但也适合作为命令行操作的备忘和速查。

• 3、PINTR

  • 一个网页工具，可以让图片转为线条画。

  • 

• 5、Mockoon

  • 

  • 一个开源软件，提供各种云服务的 API 模拟。

• Hacker News、 Reddit、V2EX、GitHub Trending 等资讯网站

• 1、freesound.org

  • 该网站是一个社区，全世界志愿者上传自己收集的环境音，目前已经有 50 万种环境音。中国的环境音也有不少，比如北京的公交车、火车通过铁路道口。

• 1、n8n

  • 

  • 一个开源的工作流自动化工具，可以通过图形界面，选择 200 多种服务，组成一个工作流。

• 6、NocoDB

  • 

  • 这个 Web 软件可以将各种数据库，转为易于操作的智能电子表格，类似于 Airtable。

• 7、葫芦笔记

  • 

  • 国产的笔记软件，支持多种客户端，自动云端同步。笔记功能非常强大，提供大纲界面、双向链接视图、图谱化搜索等。

• 8、Text2image

  • 

  • 一个将文字或代码转换成图片的网页工具，可定制项多，主题、水印、阴影特效等都能自定义

• 9、Keptab

  • 

  • 浏览器插件，只需一次点击，就可将所有标签页转换成一个列表保存起来，以后可以单独或全部恢复

• 10、Redis Pro

  • 

  • 一个用 SwiftUI 写的 Redis 轻量级客户端管理工具

• 2、rfc.fyi

  • 

  • 一个 RFC（计算机协议标准）的分类引擎，根据关键字搜索，返回所有相关的 RFC 标准。

• 1、天宫空间站

  • 一个厄瓜多尔的航模爱好者，制作出了中国天宫空间站的纸模型。

  • 

  • 

  • 可以在他的网站下载 PDF 文件，打印以后自己来折。

  • 

  • 

  • 

• 1、Astro

  • 

  • 一个前端构建工具，构建出来的页面使用最少 的 JS，尽量是纯的 HTML 和 CSS 代码，大大提高页面的加载速度。实在必需的 JS 脚本，只有用到时才会动态加载。

• 7、Shoelace

  • 

  • 一个很不错的 Web Components 库，目前提供 30 多种网页组件。

• 8、 Handsfree.js

  • 

  • 一个 JavaScript 库，可以识别人体的动作、手势和面部表情。官网上有很酷的演示，通过扭头或手势，控制鼠标移动。

• 2、nuoshell

  • 一款 Mac 的桌面 SSH 客户端，集多功能于一身，简单、免费

• 3、gum

  • 

  • 一个命令行的 Git 用户管理器，适合需要不同身份，向不同仓库提交代码的情况

• 4、BookmarkHub

  • 

  • 一个浏览器插件，可以跨浏览器进行书签同步，数据存储在 GitHub Gist

• 7、Rustpad

  • 

  • 一个开源的 Web 文本编辑器，主要特点是支持多人同时编辑。

• 1、Track Awesome List

  • 

  • 这个网站收集 GitHub 上的 awesome 项目，追踪每个清单的更新，可以及时查看每天新增哪些资源

• 2、斯坦福大学计算机课程

  • 这是一个谷歌文档的电子表格，收集了斯坦福大学计算机系本科阶段的所有课程，每门课都给出了课程主页。

• 3、计算结构

  • 

  • 麻省理工学院课程《计算结构》（Computation Structures）的教学材料，介绍计算机架构的基本知识，包括讲义、视频、笔记等。

• 4、具有源码的商业视频游戏

  • 

  • 维基百科的这个页面，列出了所有可以拿到源码的商业视频游戏，包括开源的游戏和源码泄露的游戏。

• 2、Flomo

  • 

  • 一款卡片式笔记软件，界面非常清爽，有跨平台多种客户端，支持多端自动同步。

• 3、Animista

  • 

  • 一个网页 CSS 动画工具，可自由配置各种动画特效，并生成代码

• 4、TorrentNet

  • 

  • 这个工具是 BT 下载的种子文件（torrent）的本地搜索引擎。它的最大特点是不用下载整个索引数据库，就可以实现搜索。

• 5、Nuitka

  • 一个用 Python 语言写的 Python 编译器，可以取代 CPython。

• 6、DenoDB

  • 

  • 一个 Deno 专用的数据库 ORM 库，支持 MySQL、SQLite、MariaDB、PostgreSQL 和 MongoDB。

• 7、Fluid Paint

  • 

  • 一个网页画板工具，可以定制笔刷，产生刷油漆的流体效果，非常精美，值得一玩。

• 8、成都市城市轨道交通线网规划（2021 版）

  • 

  • 成都市 2021 年 7 月 6 日公布了《城市轨道交通线网规划图》，但是不方便缩放操作。作者写了一个静态页面将其和百度地图结合，方便查看未来地铁是否经过了你的家门。

• 2、五笔输入法 7 天速成

  • 

  • 作者结合自身学习经历，收集整理了五笔输入法相关知识，按照每天 2-3 小时的时间，结合五笔练习小游戏，预计一周时间即可掌握五笔输入法

• 4、古怪的 JavaScript

  • 这个网站给出了 25 道选择题，测试你对 JavaScript 的古怪语法点了解多少。

• 1、Git: An Interactive History

  • 一个数据可视化项目，展示如何将一个 Git 仓库的历史进行可视化。

  • 

• 2、PHP 在线开发环境

  • 

  • 一个网页的 PHP 软件开发环境，在浏览器里面 PHP 编程。

• 3、Utopia

  • 

  • 一个用户界面设计工具，在浏览器里面通过可视化操作，创建用户界面，实时生成对应的 React 代码。

• 4、markdown-css-smartisan

  • 

  • 一个锤子便签风格的网页主题，输入 Markdown 自动生成页面

• 5、Kindle2Flomo

  • 

  • Kindle 笔记导出工具，可以在线导出，然后写入笔记软件 Flomo

• 6、popular-message

  • 

  • 一个轻量级的网页提示消息（prompt）的 JS 库，无任何依赖

• 7、EFTP

  • 

  • MacOS 的 SFTP 服务的开源客户端，用来向 FTP 上传或下载文件

• 3、一行 CSS 代码实现全站中文简繁转换（中文）

  • CSS 命令 font-variant-east-asian: traditional;，可以让网站字体从简体变成繁体。

• 8、自己实现 nodemon（英文）

  • nodemon 是一个 Node.js 工具，只要发现源码文件有变动，就会自动重新启动服务。本文教你怎么自己写一个 nodemon。

• 1、Difftastic

  • 

  • 一个命令行工具，可以根据不同语言的代码，对 diff 结果进行不同的高亮显示。

• 2、SCImago Graphica

  • 

  • 一个桌面软件，可以选择各种指标，定制数据可视化图形，完全不用写一行代码。

• 4、Noice

  • 

  • 一款开源的安卓 App，提供各种环境声，比如下雨打雷。

• 6、KubeSphere

  • 一个国产的 Kubernetes 集群管理平台，操作容器的利器，功能强大，界面清爽易用，大大方便了 k8s 的使用

  • 

• 9、Yozora

  • 一个高度可扩展的、插件式的 Markdown 解析器，用于生成 Markdown AST（抽象语法树），可以在它的基础上，定制自己的 Markdown 解析器。

• 10、Bash 命令行提示符生成器

  • 一个网页工具，以可视化方式，通过拖拉不同的元素，自动生成 Bash 的命令行提示符。

  • 

• 1、谷歌 API 设计指南

  • 

  • 谷歌官方文档，讲解谷歌的 API 设计规范。

• 2、2020 年中国互联网网络安全报告

  • 

  • 7 月 20 日，国家计算机网络应急中心发布的年度报告，介绍我国网络安全情况，披露一些安全事件，可以免费下载。

• 3、自己动手写一个简单的数据库

  • 

  • 一份英语教程，教大家从头开始，用 C 语言写一个类似 sqlite 的数据库，理解数据库的实现原理。

• 4、编程音乐

  • 这个网站提供几十组精心选择的编程背景音乐。

• 1、Orbit

  • 

  • 一个 React 的组件库，由旅游网站 Kiwi.com 设计，带有旅游休闲的风格。

• 2、Feed me up, Scotty!

  • 

  • 这个工具使用 CSS 选择器，从任意页面提取想要的内容，通过 GitHub Actions，自动生成该页面的 RSS。

• 3、transfer.sh

  • 

  • 这个开源工具允许自己架设服务，从命令行分享文件给其他人，也可以直接使用官方的在线版。

• 4、MoviePy

  • 一个视频编辑的 Python 库，可以方便地编写脚本，进行各种视频操作，基于 ffmpeg。

  • 

• 5、Ampache

  • 一个开源的流媒体服务器，允许远程访问托管的音频和视频文件，有点类似于 Plex。

  • 

• 4、Pitch Deck Hunt

  • 创业公司向投资者和用户介绍自己的 PPT，叫做 Pitch Deck。该网站收集了 150 多家著名公司早期的 Pitch Deck，可以用来当作模板。

  • 

• 1、Obsidian

  • 手机 Markdown 编辑器，功能非常强，主要用于做笔记，有大量插件。编辑功能免费，桌面端同步功能需要付费。

  • 

• 5、DataEase

  • 

  • 一个开源的数据可视化分析工具，支持丰富的数据源连接，能够通过拖拉拽方式，快速制作图表和仪表盘

• 5、Public API Lists

  • 这个 GitHub 仓库收集了各种专供软件开发使用的免费 API。

• 4、使用 React Hooks 构建音乐播放器（英文）

  • 一篇详细的教程，一步步教你怎么用 React Hooks 写出上图的音乐播放器。

  • 

• 5、船只的原理（英文）

  • 本文从浮力的物理学原理开始讲起，介绍船只为什么会浮在水面上，以及螺旋桨为什么会产生推力。它的最大特色就是制作精美，网页上有大量互动式的小动画。

  • 

• 6、Postgres 全文搜索简介（英文）

  • Postgres 数据库自带全文搜索，本文简单介绍英语的全文搜索怎么实现

  • 

• 1、Muboard

  • 一个 JS 库，在网页上展示一个可以书写数学公式的黑板。

  • 

• 2、Muse

  • Muse 是一个无代码的网站生成器，但是生成的是 3D 虚拟网站。

  • 

• 4、Golang Security Checker

  • 一个开源的 Go 语言代码的安全扫描工具，静态扫描代码里面的安全漏洞。

• 5、interview-schedule

  • 作者开发这个项目，用来管理自己的秋招面试日程，使用 GitHub Action 从谷歌日历获取数据，同步到 GitHub 仓库的 issue 和 README

  • 

• 7、Hora

  • 一个最近相似节点的搜索算法库，可以用于搜索近似的文本或图形。它使用 Rust 开发，并且有 Python 和 JavaScript 的移植版，特点是搜素速度非常快。

  • 

• 10、JavaScript Cookie

  • 一个浏览器 Cookie 操作库，简单易用，非常轻量级，压缩后体积不到 1KB

• 5、MDN 如何实现自动补全搜索？（英文）

  • 本文介绍 Mozilla 的文档网站如何实现搜索框的自动补全功能。

  • 

• 1、txiki.js

  • 一个极小化的 JavaScript 运行时，跟 Node.js 类似，但只有 1.8MB。

• 2、static.wiki

  • 维基百科的静态化工具，将维基百科变成一个只读的离线静态网站。

  • 它将所有条目导入一个 SQLite 数据库，然后实现一个前端的查询展示页面。注意，它的查询是 SQLite 的静态化查询，不需要有后端服务。

  • 

• 3、daisyUI

  • 一个基于 Tailwind 的 CSS 组件库，用法简洁，封装掉了 Tailwind CSS 的复杂性，看上去还不错。

  • 

• 4、Bibi

  • 网页 Epub 阅读器，可以在网页上展示、阅读 Epub 书籍。

• 5、Text-To-Image Art

  • 一个在线工具，根据用户提供的英文句子，使用人工智能模型，自动生成一幅绘画，比如上图是《夏日微风中的白色建筑》（white architecture in the summer breeze）。

  • 这是一个收费服务，但提供三张图的免费额度。

  • 

• 6、Postgres.app

  • MacOS 系统的 PostgreSQL 数据库安装包，并且内置了许多常用插件，号称是在 Mac 上使用 PostgreSQL 的最简单方法。

  • 

• 7、Calligrapher.ai

  • 一个 Web 工具，自动生成英文字符串的手写动画，可以定制各种参数。还有桌面版下载。

  • 

• 8、Systemizer

  • 一个开源的计算机系统示意图的作图工具，可以快速在网页上画出系统结构图。

  • 

• 3、自己动手写编译器

  • 一本中文电子书，介绍一个非常简单的编译器的实现，通过实例，描述基本的编译原理及过程

  • 

• 1、RAWGraphs

  • 一个 Web 工具，只要把电子表格的数据复制粘贴到网页上，就可以转成数据可视化图形，不需要编写代码。

  • 

• 2、Cross Context Events

  • 一个 JS 事件库，允许在多个窗口、多个 iframe 之间共享事件。也就是说，使用它在一个浏览器窗口触发事件，其它窗口也能收到。

• 3、obvious.js

  • 一个国产的微前端框架，解决前端微应用的依赖管理、以及它们之间的通信问题。举例来说，它可以把 React 应用和 Vue 应用组合在一个网页里面

• 4、Web Captioner

  • 一个网页的语音转文字工具，使用 Chrome 浏览器的 Web Speech API，支持中文，代码开源，这里还有一篇介绍文章。

  • 

• 7、Mantine

  • 一个 React 组件库，特点是默认支持暗模式，可以对样式的各个方面进行精细的定制。

  • 

• 8、react-class-to-fc

  • 一个将 React 的 class 组件转成 function 组件的命令行工具

• 9、FireCMS

  • 一个基于 Firebase 的内容管理系统 CMS，数据存放在 Firebase，把这个工具架设在前端，就有了一个后台数据的管理系统。

  • 

• StackOverflow 网站每年会进行一次开发者调查，了解全世界程序员的动态和状况

  • Stack Overflow Insights - Developer Hiring, Marketing, and User Research

• 3、电鸭社区

  • 国内最早的远程工作社区，讨论和分享远程、外包、零活、兼职、驻场等工作机会

  • 

• 6、CSS 中 content 属性的妙用（中文）

  • CSS 的 content 属性可以向网页添加文本内容，本文总结了这个属性的用途，并逐一给出示例。

• 1、FeedAdd

  • 一个免费服务，提供微信公众号的 RSS 文件，用户可以自己创建订阅源。

  • 

• 4、Mac OS Monterey Web

  • 使用 Svelte 框架在网页上模拟 Mac OS Monterey 的 UI。

  • 

• 5、OneDev

  • 一个开源的 Git 仓库托管软件，类似于 GitHub / GitLab，可以自己架设，特点是资源消耗小。

  • 

• 6、BackgroundRemover

  • 一个开源软件，用来移除图像和视频的背景。

  • 

• 7、js-ziju

  • 一个自制的编译器，可以将 JS 代码输出为 LLVM IR 格式和 X86 Assembly 语言

• 8、zx

  • 一个 JS 库，用来在 JS 脚本里面方便地调用 Bash 命令，很适合使用 JS 语法来写 Bash 脚本。

• 9、HyperFormula

  • Excel 公式的 JS 版，目前有 300 多个公式。同时，这个库也提供数据操作功能，可以用作电子表格的后端。

• 3、Lit

  • 谷歌推出的基于 Web Components 的前端框架，非常小巧（5KB），用法很优雅。

  • 

• 8、TypeIt

  • 一个 JS 库，用来在网页上生成打字机输入文字的动画效果。

  • 

• 3、如何免费搭建一个 VS Code 网页版（中文）

  • VS Code 编辑器有网页版，本文教你怎么把它部署在免费服务器上，可以用来写笔记，或者偶尔远程编辑代码

  • 

• 1、Ventoy

  • 一个 U 盘的启动盘制作工具，直接把系统镜像文件复制到 U 盘即可。它支持电脑启动时，从多个系统镜像文件里面选择一个启动。

  • 

• 2、WebDen

  • 专供手机浏览器使用的网页代码编辑环境，提供 HTML、CSS、JS 的开发和调试。

  • 

• 3、View Source

  • 一个 Web 小工具，输入网址，就可以高亮显示该网址的源码，非常好用。

• 4、fishdraw

  • 一个 JS 脚本，可以自动生成鱼的图形。这里还有一个可以自动画树的库。

  • 

• 5、MDvideo

  • 一个桌面软件，自动将 Markdown 文档转成一段视频。文档里面的视频、音频、图片网址，都会抓取后插入视频，还可以根据文字生成人工语音的旁白朗读。

  • 它非常适合快速生成产品的介绍视频。

  • 

• 6、group-by-repo-on-github

  • 油猴脚本，用来处理 GitHub 的网页搜索结果，可以根据仓库分类，并自动获取分页结果，即不用点击"下一页"了。

  • 

• 7、iDraw.js

  • 一个简单的 JS 库，用来使用脚本进行网页绘图。它基于 Canvas，可以绘制文字、矩形、圆形、图片、HTML 片段和 SVG 文件

  • 

• 8、PikaScript

  • 这个项目用来为单片机提供 Python 支持，让你可以通过 Python 脚本操作单片机

• 9、mini-stores

  • 小程序状态管理库，方便管理页面状态，支持各公司的小程序

• 10、Neumorphism

  • 一个网页工具，用来生成照明阴影效果的 Flutter 代码。这里还有 CSS 版

  • 

• 1、Samantha Ming 个人网站

  • Samantha Ming 是一名加拿大前端工程师，她在个人网站上分享了很多前端代码的技巧，内容质量很高，制作精美。

  • 

• 2、糖尿病教育网站

  • 加州大学旧金山分校主办的网站，全部使用中文，提供糖尿病、健康、运动、饮食知识，内容很不错。

  • 

• 1、DataStation

  • 一个桌面软件，将数据库 SQL 查询、脚本编程、数据可视化结合在一起。用户可以在一个窗口里面，完成数据的查询、处理和呈现。

  • 

• 2、Speakeroo

  • 这个服务将文章转成语音。用户通过浏览器插件或手机 App，把文章提交到服务器，服务器返回一个 RSS 链接，就可以在播客播放器收听该文章。

  • 朗读质量相当高，接近真人朗读。目前支持英文、日文、韩文等，可能以后会支持中文。该服务收费，但每月有免费额度。

  • 

• 3、可视化代码执行

  • 这个网站会将代码的执行流程，转成可视化图形，展示代码一步步是怎么执行的。目前支持 Python、Java、C、C++、JavaScript 和 Ruby 代码

  • 

• 4、TabHub

  • 一个浏览器插件，可以定制打开新的标签页时，所要显示的内容，比如图片、RSS、或者其他网页

  • 

• 5、Duplicate Searcher

  • Windows 软件，用来找出重复的文件，然后用硬链接取代它们，可以节省大量硬盘空间。

  • 

• 6、webcam-filters

  • Linux 软件，为摄像头的直播视频添加各种实时的图像过滤器（目前只有背景模糊这一个过滤器），适合用于视频会议。

• 7、MDcat

  • GitHub 有一个官方接口，将 Markdown 源码转为 HTML 代码。这个项目是一个简单的演示，使用 Python 代码去调用这个接口，完成 Markdown 的代码转换。

  • 

• 8、favicon pang

  • 这个网页的 favicon 图标是一个乒乓球游戏，通过拖动网页滚动条来玩游戏。

• 9、FilesRemote

  • 一个 SSH 图形界面的文件管理器，通过 SSH 登录远程服务器，然后像管理本地文件一样，管理远程文件。

  • 

• 1、Cyber

  • 该网站允许用户创造虚拟画廊，展示自己创作的或拥有的数字艺术品（需要 NFT）。体验非常出色，值得参观，比如这个画廊和这个画廊。

  • 

  • 

• 2、Apps for GNOME

  • Gnome 是 Linux 的桌面系统，这个网站是官方的 App 站，介绍自带的各种 App，制作得非常清新漂亮。

  • 

• 3、手机上如何 Python 编程（英文）

  • 一个详细的指南，指导如何在手机上搭建一个 Python 开发环境。

  • 

• 4、数据库连接字符串大全

  • 软件连接数据库，必须提供一个数据库连接字符串。这个网站收集各种数据源的连接字符串。

• 5、10 个 Python 聚类算法

  • 聚类算法是常用的数据分析技术，这个教程介绍如何在 Python 语言中，使用 10 种流行的数据聚类算法。

• 4、Mithril.js

  • 一个非常易用的轻量级前端框架，只做了 DOM 的包装层，没有加任何其他接口，体积小，加载快，并且支持组件和前端路由。开发小型页面，明显优于 React。

  • 但是不知道什么原因，多年来它一直不流行，因为名字难记？

• 5、Pollen

  • 一个 CSS 变量库，提供一组常用的 CSS 变量（比如颜色、长度、字体大小等等）。开发者可以将这个库作为初始变量，以后通过调整变量来改变样式，比如从亮模式变成暗模式。

• 9、git-cliff

  • 一个根据提交信息，生成 Changelog 文件的命令行工具。

• 5、Mathlets

  • 这个网站提供网页小程序，帮助学习各种数学概念，比如正弦曲线、复数运算、傅里叶变换等等。

  • 

• 2、Notion Avatar Maker

  • 一个网页工具，可以在线制作 Notion 风格的个人头像

  • 

• 3、DeepFaceLive

  • 一个桌面软件，进行深度学习训练后，可以在视频直播和视频会议里面实时换脸。

  • 

• 4、FSNotes

  • 苹果设备的笔记软件，支持 Touchbar 和 iCloud 同步，还可以 Git 版本控制和备份。

  • 

• 7、youtube-dl-gui

  • youtube-dl 的图形界面封装，支持多个视频网站的视频下载。

  • 

• 10、message-box

  • 一个 Web Component 的消息框组件

  • 

• 1、云媒体速览

  • 该网站收集了中国 333 个地级市的报纸电子版和电视直播网址。

  • 

• 2、html2json

  • 一个 JS 库，可以将 HTML 代码与 JSON 代码互相转换。

• 3、My Room in 3D

  • 使用 Three.js 制作的网页 3D 家居模型，非常炫酷。

  • 

• 8、jsvu

  • jsvu 是一个 JS 引擎的调用器，用来调用各种 JS 引擎（比如 V8、QuickJS、Chakra 等等），或者同一个引擎的各种版本。它的主要用途是测试代码在不同引擎下的表现。

• 9、7.css

  • 一个 CSS 框架，用来复现 Windows 7 的 UI。

  • 

• 2、Javascript 游戏基础教程

  • 这个英文教程一共 10 节课，教你使用 JavaScript 开发一个网页游戏。

  • 

• 3、"一证通查"电话卡服务

  • 工信部推出的官方服务，查看个人名下登记了多少张电话卡。

• 4、Java 周刊

  • 国外开发者编写的 Java 周刊，提供各种关于 Java 技术进展的链接

• 5、Open Meteo

  • 免费的天气 API 服务，可以获取全球任意地点的天气数据，以 JSON 格式返回。

• 4、vscode.dev 发布（英文）

  • VS Code 正式发布官方的浏览器版，从此可以在浏览器里面使用这个编辑器。它跟另一个网站 github.dev 很接近，唯一的区别是还支持其他的代码托管服务。

  • 

• 1、EBS Design

  • 一个 React 组件库，设计很有现代感，目前还在积极开发中。

  • 

• 3、context-note

  • 一个 Chrome 浏览器插件，可以对网页做笔记，下次打开该网页，笔记就会显示，并提供富文本编辑器和笔记标签。

  • 

• 5、Composable

  • 一个网页版的矢量图作图工具。

  • 

• 1、10 个响应式网页的开发测试工具

  • 本文介绍 10 个小工具，用来测试响应式网页，在不同大小屏幕的显示效果。

  • 

• 2、树莓派家用服务器搭建指南

  • 树莓派系列教程。作者买了一台低配云服务器获得固定 ip 地址，通过 frp 内网穿透，把家里的树莓派 4B 变成了一个真正的云服务器，可以在公网访问

• 3、英特尔处理器博物馆

  • 

  • 一个爱好者的个人中文网站，图文并茂地介绍了自己收藏的从 3101 到 Pentium M 的多种英特尔处理器芯片资料

• 4、Git 飞行规则

  • 一个 Git FAQ 的中文翻译，收集各种 Git 操作出现问题后的应对措施

• 1、Waydroid

  • 一个 Linux 系统的安卓容器，可以让安卓应用在 Linux 桌面电脑的容器里面运行。

  • 

• 3、Agora Flat

  • 一个前后端都开源的在线教室，企业可以用来作为自己的内部培训工具，或者对外的远程教学工具。

  • 

• 4、Motion One

  • 一个 JS 动画库，底层使用 Web Animations API，上层则是自己设计的简单易懂的语法，可以很轻松让网页产生动画效果。

  • 

• 5、Semi Design

  • 抖音前端团队推出的设计系统，支撑字节内部近千平台产品。目前提供 50 多个组件、国际化 14 种语言、支持 TypeScript、SSR 等特性

  • 

• 6、smooth-signature

  • 带笔锋的手写签名 JS 库，支持 PC /移动端使用，另有小程序版。

  • 

• 8、微图

  • 一个批量压缩图片的网页工具，纯浏览器端压缩，不经过服务器，速度较快。

  • 

• 9、Tool.Graphics

  • 这个网站可以生成各种几何图形填充的随机图片，并且能够可以调节参数。

  • 

• 10、Read Aloud

  • 开源的浏览器朗读插件，可以朗读整个网页或选定文本，支持 40 多种语言，包括中文。

• 2、安全的互联网产品

  • Mozil 基金会在官网上列出了，经过该组织审核，确认为安全的、可以保护用户隐私的硬件和软件名单。

  • 

• 3、Modern Unix

  • 该仓库收集传统 Unix 命令行工具的现代替代品，比如 lds 替代 ls、ripgrep 替代 grep

• 4、awesome-console-services

  • 该仓库收集各种供命令行使用的外部服务，比如 curl ip-api.com可以查看当前 IP 地址对应的地理位置

• 5、awesome-metaverse

  • 该仓库收集元宇宙相关资源。

• 1、Cloudcraft

  • 一个网页工具，用来画网络架构图。

  • 

• 2、3D 人体模型

  • 

  • 这个网页工具可以生成各种姿势的 3D 人体模型，并可以配上道具，用作艺术家、建模师的参考。

  • 

• 3、SQLite Playground

  • 用户可以在这个网页上加载任意 SQLite 数据库，然后使用 SQL 语句进行操作，就是一个网页版的 SQLite 浏览器。

  • 

• 4、MistQL

  • 一个即可用于前端网页，又可以用于命令行的 JSON 数据查询库，用来从 JSON 里面提取指定数据

• 9、yoctocolors

  • 一个 JavaScript 的命令行颜色库，类似于 Chalk，优势是体积小、速度快。作者是著名的 Sindre Sorhus。

• 10、tiny-sass-compiler

  • 一个网友自己写的 SASS 编译器，将 SASS 代码编译为 CSS，没有第三方依赖，基本上所有功能都支持，可以用来学习怎么写编译器

• 1、Awesome Math

  • 这个仓库收集互联网上各种有用的数学资源。

• 2、用汇编语言编写 Python 扩展（英文）

  • 一篇长篇教程，前半部分介绍的都是汇编语言基本知识，可以用来学习汇编语言。

• 3、《计算机体系结构基础》教科书

  • 龙芯团队胡伟武老师等人编写的中文教科书《计算机体系结构基础》（第三版）的开源版本，上图是第二版封面。作者从微处理器设计的角度出发，介绍了计算机体系结构。（@Martins3 投稿）

  • 

• 4、Paul Graham 文集（Kindle 版）

  • 作者写了一个脚本，将 YC 创始人、创业导师 Paul Graham 官网上面的文章都抓下来，生成了 mobi 电子书，可以在 Kindle 阅读。

• 2、ColorFu

  • 一个基于网页的壁纸生成器，提供了丰富的颜色、简洁的界面，可以快速制作"文字 + 颜色/纹理/图片"这种形式的壁纸。

  • 

• 3、Xterm.js

  • 一个 JS 组件，在网页上加入命令行窗口，可以与服务器进行通信，接受并展示服务器的命令行输出。

• 5、ROAPI

  • 一个 API 服务器，不用编写任何代码，就可以把 JSON 文件或 CSV 文件转成 API 服务，自动提供 REST、GraphQL、SQL 接口，参见这篇教程。

• 6、Unicode 日历生成器

  • 这个网页工具可以生成一个纯 Unicode 字符组成的日历。

  • 

• 7、weird json

  • 一个 JS 库，采用了一种与众不同的方法，通过将对象转成字符串，完成两个对象之间的深拷贝。

• 9、Matrix Rain

  • 一个 JS 库，可以在命令行环境展示电影《黑客帝国》的绿色字符雨效果，还可以调整各种参数。

• 3、Vididoo

  • 这个网站收集了一些处理视频的在线工具，在网页上就可以完成视频缩放、剪接、图像转视频、提取音频等操作。

  • 

• 4、oldmouse.com

  • 这个网站记录鼠标的发展历史，你可以在上面找到各种老式鼠标。

  • 

• 4、CSS Doodle

  • 一个 Web Component 组件，可以使用 CSS 语法产生各种形状。

  • 

• 5、Arco Design

  • 字节跳动推出的企业级设计系统，提供丰富的原子组件，同时支持 React 组件库 和 Vue 组件库，可以进行各种定制。

  • 

• 6、Remix

  • React Router 的作者发布的一个框架，在服务器运行 React 脚本，类似 next.js。

  • 

• 9、树形目录列表生成器

  • 一个网页小工具，生成文本的树形目录结构，方便将目录结构插入 Markdown 文章

  • 

• 10、HTTP Server Online

  • 

  • 一个纯前端的静态资源服务器，可以在前端展示本地目录的内容。

• 1、DeepCourse

  • 一个深度学习课程，所有章节以路线图的形式呈现，可以一个个节点按顺序学习。点击一个节点，就可以学习相应的知识点。

  • 

• 2、OKR.com

  • 

  • OKR 是一种绩效目标管理方法，很多互联网公司采用这种方法。该网站收集了关于 OKR 的各种资料

• 3、Archive.org Serendipity

  • "互联网档案馆"收集了很多早期的黑胶唱片音乐作品，都已经过了版权保护期。这个网站可以收听这些音乐，按一下按钮，就会随机播放一段音乐。

• 4、免费图片资源

  • 这篇文章列出了常用的免费图片网站，可以获取各种能够自由使用的照片和插图。

• 5、十年前

  • 这个网站可以查看，十年前的同一天，美国的十几个著名网站是什么样子。

  • 

• 1、Microdiff

  • 一个 JS 库，用来对两个对象进行 Diff 比较，判断它们有何不同，体积非常小，不到 1KB。

• 2、OCRmyPDF

  • 一个对图像 PDF 进行文字识别，并添加为文字层的命令行工具。安装中文语言包后，支持识别中文。

• 3、Codepng

  • 该网站将代码片段转为美观的图片，可以贴到社交媒体上面。

  • 

• 4、Repobeats

  • 这个工具可以在 GitHub 仓库的 README 文件里面，加入图形化的项目数据统计。

  • 

• 5、Plectica

  • 这个网站可以在线绘制知识图谱，还可以分享给其他人

  • 

• 6、ASCII 字符播放器

  • 一个网页演示，将视频转成 ASCII 字符的形式播放。播放时，注意把字体尺寸调小。

  • 

• 7、Jam

  • 这个开源软件可以搭建语音聊天室，供多人（最高达几千人）一起实时聊天，类似于 Clubhouse。

• 8、waveshare-epaper-display

  • 

  • 这个仓库提供所有代码，教你用树莓派和电子墨水屏，搭建一个天气时间信息的显示屏。

• 9、JavaScript 限制器

  • 这是一个浏览器插件，禁止网页脚本使用某些浏览器的 API，从而避免被追踪或生成用户指纹。

• 10、giscus

  • 一个基于 GitHub Discussions（讨论区） 的网站评论系统，可以插在自己的网页中，供用户发表评论。无需数据库，全部数据存在 GitHub 仓库的 Discussions 中。

• 2、Ambient Chaos

  • 一个网页的背景音生成器，提供 20 多种声音，比如风声、雨声、火车站、教堂钟声等。每种都可以调节音量，还可以选择声音进行合成。

• 3、AnimeGANv2 动漫头像生成器效果（中文）

  • AnimeGANv2 是一款基于机器学习的动漫头像生成器，只要在网页提交头像照片，它就会将照片转为动漫形象。本文展示了这个工具的效果

• 3、AppFlowy

  • Notion 的开源替代品，可以自己架设一个多功能的在线编辑器。

  • 

• 4、caffeine

  • 一个极小化的 JSON 服务器，可以在本地快速起一个服务，提供 JSON 数据的 RESTful API。

• 6、MeterSphere

  • 一个开源的测试平台，适合多人团队管理测试用例，完成接口测试及性能测试。

• 8、HTML/URL To Markdown

  • 在线小工具，将网页转成 Markdown 代码

• 9、supabase

  • 一个 Postgres 数据库的云服务，号称是 Firebase 的开源替代品。

  • 

• 4、战壕里面的 Git（Git In The Trenches）

  • 一本 Git 的英文入门教程，用讲故事的方式教授 Git。

  • 

• 2、微软 TTS（2021 版）

  • 微软最新的机器语音库，逼真地吓人。大家可以听听官方网页的示例，根本听不出是机器在念。播音员的这个职业，以后大概要消失了。

• 4、RSS-Bridge

  • 一个开源的 Web 应用，用于为常见网站生成 RSS。

• 5、JavaScript 混淆器

  • 一个 JavaScript 代码混淆工具（obfuscator），将代码转成难以阅读的形式。

• 7、md-block

  • 一个 Web Component 组件，可以在 HTML 网页里面加载 Markdown 文档。

• 9、Tuner

  • 一个极简化的互联网电台收听软件。

• 10、Mall-Cook

  • 一个可视化的商城搭建平台，不用编写代码生成全站，基于 Vue.js 开发

• 1、LazyDocker

  • 一个终端里面的 Docker 管理面板，可以同时操作多个容器，并且实时显示每个容器的运行状况。

• 2、dog

  • 命令行的 DNS 查询工具，作用与 dig 类似，但是简化了用法和输出格式，更易于使用。

• 3、Vizzu

  • 一个 JS 的数据可视化动画库，功能很强，可以用来制作数据图表的动画。

• 4、TownScaper

  • 更妙的是，所有设置都保存在 URL 里面，可以分享给其他人。

  • 一个休闲小游戏，已经在主机平台上架，这里是它最近发布的浏览器版。只要随意点击，就能生成不可思议的美丽建筑物。

• 5、GitHub Web IDE

  • 一个浏览器插件，为 GitHub 和 Gitlab 的仓库主页加入"在 Web IDE 打开"的按钮。

  • 

• 6、GitHub Wrapped

  • 这个网页工具将你过去一年的 GitHub 活动，创建成一张图表。

• 7、知竹

  • 一款在线的甘特图工具，可以直观地体现出成员、任务、时间之间的关系。

• 8、PCB 名片

  • 作者用 PCB 电路板制作名片，并且分享了设计文件。只要在他的文件基础上进行修改，然后提交给 PCB 工厂就可以了。每张名片的成本大约为几块钱人民币。

• 9、Global Sequencer

  • 这个项目的创意很好，用户打开电脑的麦克风，录制一段声音上传，网站就把它显示在世界地图上，你可以选择地球的某个地点听那里的声音。

• 1、中华古籍资源库

  • 国家图书馆的项目，整理保存至今的中华古籍，做成数据库可以搜索，并且提供扫描版在线阅读。

• 2、Netflix 分类代码

  • 视频网站 Netflix 页面不提供节目的详细分类，但其实内部有一套视频分类。这个网站列出每个分类的编号，并提供进入链接。

  • 

• 3、静态网站加入评论系统的方法

  • 这篇文章总结了静态网站加入评论系统的方法，并列出了可用的服务和工具软件。

• 4、Nona

  • 德国的搜索引擎，可以搜索中文，搜索质量还可以。

  • 

• 5、Web 开发者的 Rust 语言动手教程

  • 这个 Rust 语言的入门教程，是为网站开发者定制的，一共 23 个例子，每个例子都有讲解，需要你自己在网页上动手完成练习题。

  • 

• 1、deeplinks.js

  • 这个 JS 库可以为选中的文本生成锚点，其他人访问带有这个锚点的 URL，就能看到选中的文本。

• 4、周刊的 RSS 订阅推送

  • 这是网友做的，利用 GitHub Actions 将每期周刊推送到企业微信/Slack

• 5、在线简历生成器

  • 一个开源的简历生成器，只要在自己的 GitHub 仓库存入数据文件，然后访问它提供的在线模板，就会自动生成个人简历。

• 6、SpiderFlow

  • 一个开源的爬虫平台，以图形化方式定义爬虫，不写代码即可完成抓取网页

• 7、pinyin-pro

  • 汉字与拼音转换的 JavaScript 库

• 8、DooringX

  • 一个开源的可视化搭建框架，可以自己架设低代码平台，用来快速制作 H5 页面

• 9、LaTeX 排版生成器

  • 一个开源的网页编辑器，可以将文本排版转成 LaTeX 代码

• 10、wfrest

  • 微型的 C++ 框架，让你快速架设一个高性能服务，提供 Rest API

• 1、中国哲学书电子化计划

  • 一个线上图书馆，提供中国历代传世文献。收藏的文本已超过三万部著作，为历代中文文献资料库最大者

• 2、书格

  • 中国古籍的在线图书馆，提供古籍的高清彩色影像版本 PDF 文件下载

• 1、xxh

  • 远程服务器登录的时候，往往只有 Bash 可用。这个工具可以把你本地的 Shell 环境（zsh、fish 等等）自动带到远程服务器。

• 2、Pico.css

  • 一个极小化的 CSS 框架，只有 8KB，优雅简单，功能也不弱。

• 3、uBlacklist

  • 一个浏览器插件，可以从 Google/Bing 的搜索结果里面，去除指定网站或 URL。

• 4、Lapce

  • 一个 Rust 语言写的轻量级代码编辑器，速度极快，功能上模仿了 VS Code，支持 Windows 和 MacOS。

• 5、console-helper

  • 一个 VS Code 插件，只要在 JavaScript 脚本里面选中一个变量，就可以自动为这个变量插入一行 console.log 打印语句。（@moore529 投稿）

• 6、PPTist

  • 一个 PPT 网页应用，还原了大部分 PowerPoint 常用功能，支持 PPT 的在线编辑、演示和导出。这里有 demo。（@pipipi-pikachu 投稿）

• 7、My LightNote

  • 一个 MacOS 的网页收藏器，支持分类、标记、收集图像、添加标签，所有数据都保存在你的 iCloud。（@hite 投稿）

• 8、Internal App Store

  • 一个开源的安卓 App 商店，可以用来搭建自己的应用商店。

• 9、GDBFrontend

  • 调试工具 GDB 的一个前端，可以在图形界面上调试 C/C++ 程序，使用 Python 语言写的。

• 1、彻底理解中国山水画生成器

  • 中国山水画生成器是一个很有名的软件，一个老外用户很惊叹，希望把它彻底搞懂，就写了这个由 24 篇文章组成的系列，逐一分析代码，看看能否自己重新实现

• 2、ES proposals

  • 该网站列出了 ECMAScript 标准所有各阶段的提案。

• 3、eja.tv

  • 该网站收集全世界可以网上免费观看的电视频道，目前一共收集了 4029 个频道，提供地区和语言分类。

• 4、黑客杂志《PoC || GTFO》

  • 这本在线刊物收集了世界众多黑客在逆向分析、渗透测试、生活感悟等方面的文章，再由编辑润色排版，图文并茂。国内网友特别制作了电子书，提供下载

• 5、DareBee

  • 这个网站收集了 1700 多种身体锻炼的方法，每种方法都有插图说明。

• 4、我的 CSS 重置代码（英文）

  • CSS 重置（reset）指的是重置浏览器的默认样式，完成 CSS 初始化。作者给出了自己的重置代码，并详细解释每一行的作用。

• 4、mometa

  • 一个开源的可视化低代码编程平台，可以引入外部组件库建立物料库

• 5、js-sdsl

  • 这个 JS 库提供各种高级数据结构，比如 Vector、Stack、Queue、LinkList 等等

• 8、Paint of Persia

  • 这个工具让你可以在屏幕任何一个窗口，框选一部分内容，将其变成像素画。

• 10、Zinc

  • 一个轻量级的全文搜索引擎，目标是充当 Elasticsearch 的替代品。只有一个二进制文件，自带 Web 管理界面。

• 1、Cloudflare Radar

  • Cloudflare 的互联网流量观察资料库，可以查看全网和各个网站的流量变化。

• 2、Emoji 搜索

  • 俄罗斯搜索引擎 Yandex 推出了一个在线翻译工具。有趣的是，里面有一项"文本翻译 Emoji"，可以输入词语，得到对应的 Emoji。

• 3、Emoji to Scale

  • 这个网站选出一组 Emoji 符号，按照体积从小到大的顺序排列，可以滚动浏览

• 7、Chrome 开发者工具的录制功能（英文）

  • Chrome 浏览器的开发者工具可以录制用户操作了，并且可以导出脚本供无头浏览器 Puppeteer 使用。

• 1、MockingBird

  • 一个基于机器学习的中文语音克隆库，只要 5 秒的原始讲话录音，就能克隆该声音，让它说出任意给定文本。

• 9、Jodd

  • 一个 Java 工具包，包含一些实用的小工具，增强 JDK 的功能，包体积不到 1.7M。

• 1、nginx playground

  • 一个线上的 nginx 游乐场。你可以在网页上填写 nginx 配置文件，然后在线启动一个 nginx 实例。接着，你输入各种 curl 命令，与这个实例互动。

  • 

• 2、1History

  • 一个跨平台的命令行工具，能够同时备份本机不同浏览器的浏览记录，放进一个 SQLite 数据库，支持导出和可视化

• 3、Denoflow

  • 一个自动化工作流工具，只要本地安装 Deno，然后使用 Yaml 格式写一个任务配置，就能执行，相当于一个轻量级的本地化 GitHub Actions 替代品

• 5、Perspec

  • 这个软件可以将照片里面透视变形的物体自动拉正。

• 7、Code2Flow

  • 这个工具自动分析代码，生成函数调用的流程图，即可视化显示所有函数的调用路径，支持 Python、Javascript、Ruby 和 PHP 等语言。

• 8、mdSilo

  • 一个基于浏览器的笔记工具，特点是支持双向链接，可以视作一个简单的 Wiki 式的知识管理工具。在线使用，无需注册和安装，数据保留在本地。

• 3、数据结构（C 语言）

  • 一个大三同学原创的系列文章，逐一分析 C 语言的各种数据结构，并配上自己画的图片，以及从零实现的源码

• 4、FFmpeg libav 教程

  • 一个如何调用 FFmpeg 视频库的教程，有中文翻译。

• 美国的黑客新闻社区有一个热门帖子 《你做过不在乎结果的项目吗？》（第一部分，第二部分），得到了热烈的反响。

  • 很多人贴出了自己的个人项目，都是业余时间出于爱好写的。推荐大家去看看，很多项目很有趣。

• FinClip：通用小程序容器

  • 提到小程序，大部分人的第一反应是微信小程序，最多还知道支付宝、百度、头条也有小程序。但是，很少有人知道，小程序其实是一种通用技术，所有 App 都可以嵌入，甚至我们自己开发的 App 也可以运行小程序。

  • 本周就向大家介绍一种小程序容器技术、也是小程序的通用解决方案： FinClip。它的最大特点，就是能够让任何 App 运行小程序。

  • 只需要在你的 App 里面，引入它的 SDK，就能加载运行外部小程序了。除了 SDK，它还提供一个后台管理系统，统一管理小程序的上架和下架，以及收集和分析小程序数据。

  • FinClip 完全遵循微信小程序的开发标准与规范。也就是说，现有的微信小程序可以不改一行代码，直接放进你的 App 里面，运行效果保持不变，不必额外二次开发和改造，大大节省了人力成本。

  • 不仅如此，FinClip 还支持手机以外的多种终端，包括 Linux、Windows、MacOS、麒麟等操作系统。这意味着，PC 端、车载设备、智能电视都能使用小程序了，实现了小程序的"一次开发，到处运行"，同时触达众多流量平台，而不仅仅局限于微信生态。

  • FinClip 还提供小程序 IDE 开发工具，界面与微信小程序的开发工具类似，自带调试和真机预览，简单易上手。你可以在这个 IDE 里面，对现有项目进行二次开发，扩展功能和接口，或者从零开始写出一个小程序。

  • 目前，FinClip 已经得到了很多大公司的认可，有上百家客户，包括券商、股份制银行、航空公司、车载设备服务商、省级移动警务平台等重要企业。开发者人数超过 3 万，服务用户达到 2500 万人，在真实的生产环境经受了百万级的并发压力考验。

  • FinClip 有社区版，供个人开发者免费使用；也有企业版，不过需要按年付费，或者购买专属私人化服务。

  • 如果你的 App 也想运行小程序，不妨考虑一下 FinClip。建议访问官方的上手教程和[产品手册](https://www-cdn.finclip.com/mp-home/FinClip产品手册 电子版.pdf)，详细了解，可以注册一个免费账号试试看。

  • 

  • 最后，欢迎扫描上方的二维码，加入他们的技术社群，了解和讨论小程序的技术问题。

• 5、Excel 世界杯

  • 电子表格软件 Excel 也有世界锦标赛，叫做"金融建模世界杯" （FMWC）。每一年，世界各地的 Excel 顶级玩家都会参加，经过资格赛淘汰以后，剩下八位顶级选手争夺冠军。2021 年的总决赛在 12 月 11 日举行，并在 YouTube 直播。

  • 每位参赛选手都会收到一个真实案例，长达五页。选手必须使用 Excel 进行财务建模，再运行这个模型，回答 6 到 15 个问题。往年比赛的案例，可以去官网下载。

  • 除了 Excel 世界杯，还有 Word + Excel + PowerPoint 的"Office 专家世界杯"也在举办。

• 5、花 10 年写一本编程语言实现的书（中文）

  • Robert Nystrom 是一位拥有 20 年工作经验的谷歌软件工程师。他花了近 10 年时间，写了一本关于编程语言实现的书，2020 年终于写完了。本文介绍这本书

• 1、ulid

  • 一个独特 ID 的生成库，对 uuid 进行了多方面的改进。

• 2、RSS-proxy

  • 这个工具可以为任意 HTML 页面生成 RSS 订阅，只要页面有变动，你就会得到通知。

  • 

• 3、Chokoku CAD

  • 基于浏览器的 CAD 建模工具。

  • 

• 4、Gyroflow

  • 一个桌面软件，用来处理抖动的视频，让画面变得稳定，效果相当好

• 5、Chrome OS Flex

  • 谷歌推出了 Chrome OS 的通用安装版，可以在现有的 PC 和 Mac 上安装，为普通用户提供了 Windows/MacOS 以外的第三种操作系统的选择。

• 6、SolidJS

  • 一个前端框架，完全借鉴了 React，但是把数据通信改成了基于事件的响应式（reactivity）。

• 7、asmrepl

  • 这个工具提供汇编语言的命令行解释环境，可以输入一行汇编指令（比如 mov rbx, 3）查看结果。

• 8、Bash-web-server

  • 一个用 Bash 写的 Web 服务器，只有 100 多行代码，很好懂，可以作为 Bash 学习材料。

• 9、indexeddb-fs

  • 这个库将浏览器的 indexedDB 包装成一个文件，允许像 Node.js 的 fs 模块那样使用。

• 1、GPS 原理解释（中文）

  • 这篇长文解释了 GPS 的数学原理：卫星为什么可以用来定位？大量使用了动画图片进行说明，这里是中文翻译

• 4、noty.js

  • 一个同学原创的网页通知组件，代码很简单，只有 41 行

• 5、伽马影迷

  • 一个浏览器插件，可以在 B 站/豆瓣/IMDb/烂番茄/MetaCritic 等网站上，聚合显示电影评分、短视频解说和片源信息。

• 6、Clover

  • 一个笔记本程序，将笔记、任务列表、日程安排融合在一起，目前有 Web 版和 iOS 版。

• 9、Animatize

  • 可能是最简单的动画制作工具。在网页上传背景图片和前景图片，然后将后者拖进前者，就会自动生成动画。

• 2、 Rust 语言数据结构和算法

  • 一本原创的中文 Rust 书籍

• 5、PaperSizes

  • 这个网站收集各种纸张的规格，按照行业和国别分类，总计有几百种之多。

• 8、如何指定 Git 提交说明的模板（英文）

  • Git 提交代码的时候，必须给出一段文字说明。有时候，会想要一个模板，提交时自动跳出来，只要填写一下就可以了。本文给出实现方法。

• 1、Rich

  • 一个 Python 的终端样式库，可以用在脚本里面，在命令行显示颜色和样式。

  • 另外，还有一个已经封装好的独立命令 Rich Cli，可以通过参数指定样式，比如下图是居中显示边距为 3 的蓝色方块。

• 2、Deskreen

  • 一个屏幕分享软件，可以把桌面电脑的屏幕（Windows、MacOS、Linux）分享到局域网内的任意设备，只要对方有浏览器就可以接收

• 4、iTab

  • 一个浏览器插件，提供大量选项，让你定制浏览器空白标签页

• 7、Pixi Color Effects

  • 一个 JS 库，提供各种图片滤镜

• 9、CyberChef

  • 一个开源网站，集合了上百种实用的小功能（比如 Base64 解码、提取 EXIF、生成 Hash 等等），都包括在一个网页里面。熟悉以后，非常好用。

• 2、WcoFun.com

  • 该网站提供大量动漫，免费在线观看。

• 3、MyNoise

  • 该网站收集了 200 多种环境音，可以当作工作时的背景声。

• 4、CSS 中文入门教程

  • 作者学习 CSS 时整理的一份教程，参考了谷歌的 learn css

• 5、Web Worker 中文播客

  • 两个前端程序员闲聊的中文音频播客节目，半年时间做了九期

• 2、家用 3D 打印不完全入坑指南（中文）

  • 作者介绍新手入门 3D 打印需要知道的一些事情。

• 1、Datawrapper

  • 著名的数据可视化生成工具，只要在网页上提交数据，经过几步配置，就能生成杂志级的可视化图表。不需要注册就可以免费使用。

• 5、BaseMap

  • 一个开源的机房平面图（园区，楼栋，楼层，房间）绘制工具，也可用来生成办公室、工厂、园区的平面图

• 6、Orange

  • 一个开源的跨平台文件搜索软件，用于搜索本机文件，简单好用

• 9、Remind

  • 一个简单的网页版思维脑图实现，可以用在自己项目里面

• 10、React Paint

  • 使用 React 实现的开源 Windows 画板

• 1、JustWatch

  • 这个网站可以查询某一部国外的影视作品在哪个平台（Netflix、Disney plus、Apple TV 等等）可以收看。

• 2、GNU coreutils 解码

  • Linux 基本的命令行工具（ls、cp、rm 等等）都是 GNU coreutils 工具包提供的，这个网站是对该工具包的详细介绍，逐一分析其中近 100 个工具的内部实现。

• 4、Redis Launchpad

  • Redis 官方的用户展示厅，展示各种使用 Redis 的网络应用，并有用法和架构的讲解。

• 5、Illlustrations

  • 一个艺术家开放自己的 100 多幅插图作品，免费下载。

  • 

• 2、Terrain2STL

  • 该网站可以获取全球任何一个地点的地形图，生成 STL 文件供下载，你可以用 3D 打印机把地形打印成模型。

• 3、SikuliX

  • 一个桌面电脑的自动化工具，支持视觉触发。比如，屏幕出现某种图形，这个软件用 OpenCV 库识别以后，发现符合条件，就触发预先写好的自动化流程。

• 7、Regex-Vis

  • 一个开源的正则表达式可视化编辑器。输入一个正则表达式，就能自动生成它的可视化图形，并能在网页上对每个节点进行编辑。

• 1、CSS 小测验

  • 这个网站提供一组 CSS 测试题，测试你的水平。用户在线回答，它会给你计时，看你用了多少时间。

• 2、DI.FM

  • 一个专门收集电子音乐的网站，可以按照频道收听。

• 3、电力设施地图

  • 该网站的地图显示全世界电力设施的位置，包括电厂、变电站、输电线等等，甚至还有风力发电机。

• 2、Wt

  • 一个 C++ 框架，用来写网页。你没有看错，就是用 C++ 写上面这样的网页，详见教程。

• 3、Fossil Wiki

  • 一个开源的 Wiki 软件，出自 SQLite 作者之手，质量肯定没有问题。它同时也是一个版本管理系统，数据保存在 SQLite 里面。

• 4、go-mitmproxy

  • Go 语言写的中间人拦截工具，可以拦截 HTTPS 通信，带有插件扩展功能和 Web 界面

• 5、S2

  • 一个表格可视化引擎，可以为数据表制作各种各样的效果

• 1、Web 技能图卡

  • 这个网站以图卡的形式，整理出了 Web 开发所需的各种技能，并且进行了分类。

• 2、野生架构师周刊

  • 网友写的中文周刊，介绍软件开发的各种内容

• 3、开始音乐创作之旅

  • 可视化的音乐教程，介绍了音乐的组成：鼓、贝斯、和弦与旋律，用户可以在网页界面上按照其提供的基本组成来构建自己的 demo

• 5、Awesome Games

  • 这个仓库收集 GitHub 上面的所有开源游戏。

• 6、一行 CSS 布局（英文）

  • 本文介绍 10 种可以用一行（关键）代码实现的网页布局。

• 1、PeaZip

  • 一个开源的桌面压缩软件，带有图形界面，优点是支持一些新的压缩算法，包括 Zstandard 和 Brotli 算法。

• 3、HertzBeat 赫兹跳动

  • 一个国产的开源云监控系统，具有监控网站、PING 连通性、端口可用性、数据库、操作系统、阈值告警等功能，告警通知可通过邮件、微信、钉钉、飞书等发送

• 5、视频 PPT 提取器

  • 某些教学视频都在讲解 PPT 文案，或者需要导出 PPT 供以后学习，这个工具可以从视频里面提取 PPT，保存为 PDF 文件。

• 6、sqlite-utils

  • 一个命令行工具，可以直接对 SQLite 数据库执行 SQL 查询。

• 7、Simple.css

  • 一个极简化的 CSS 框架，追求"无类化使用"，即不用指定 class，直接对 HTML 标签生效。

  • 类似的框架还有很多，比如 Pico.css、new.css、MVP.css、bamboo.css、Water.css、Vanilla CSS 等等。

• 1、动画电影的制作过程

  • 迪斯尼的官方网页，解释动画电影是如何制作的，网页很精美，配有很多图片和视频，值得一看。

• 3、前端食堂技术周刊

  • 一个中文的前端技术周刊

• 4、Golang 学习资源大全

  • 一个中国开发者整理的 Go 语言学习资源

• 5、study-is-wonderful

  • 本项目主要面向汉语人群，收集了一些比较好的公开课资源

• 1、Everything

  • 著名的 Windows 免费桌面软件，根据文件名，快速查找文件。

• 3、Pkg

  • 这个工具可以将 Node.js 应用打包成单个可执行文件，没有安装 Node.js 也能执行。

• 2、Orion 浏览器

  • 一种基于 Webkit 的新浏览器，只能用于 MacOS 和 iOS，但是能安装 Chrome 的插件，目前还是测试版。据说体验非常好，胜过 Safari。

• 3、密码生成器

  • 一个在线的随机密码生成器。

• 4、Portmaster

  • 一个跨平台的桌面软件，可以监控本机的所有网络通信。

• 5、东京地铁实时 3D 地图

  • 这是一个 3D 地图，实时显示每一部地铁列车的位置。它的源码看这里

• 6、SQLite Online IDE

  • 一个数据库在线管理工具，通过上传或在线连接，在网页上进行数据库管理和查询，支持 SQLite、MySQL、PostgreSQL 等数据库。

• 7、puml-for-markdown

  • 这个命令行工具可以将 Markdown 文档里面的 PUML 脚本，转为图片文件，再把图片链接插回 Markdown 文档。

• 8、HubFS

  • 这个工具支持把 Git 仓库挂载到文件系统，然后就能像常规目录那样访问该仓库，包括读取各个分支和历史提交。它同时支持 Windows、Mac 和 Linux。

• 9、cz-git

  • 一款可以定制 Git 提交信息的工具

• 1、OEC.world

  • 这个网站可以查询每个国家或地区的贸易数据，并用图文进行通俗解释

• 2、Monorepo

  • Monorepo 指的是多个相关项目放在同一个代码仓库里面。这个网站介绍了 Monorepo 的相关知识和工具。

• 3、Linux 系统管理入门

  • 长篇的学习笔记，介绍 Linux 系统管理入门操作。

• 4、Try Clojure

  • Clojure 语言入门教程，提供了一个网页执行环境。你跟着提示，动手在网页输入代码，边做边学。

• 3、JSON Visio

  • 一个开源的 JSON 可视化工具，将 JSON 数据转成树状图展示。

• 4、Starship

  • 这个软件定制各种命令行环境的提示符（prompt），可配置性极强，能够定制几百个参数，支持 Bash、Zsh、Fish、Powershell 等各种常见命令行环境。

• 5、Mailwind

  • 一个命令行工具，可以将使用 Tailwind CSS 的网页转成电子邮件专用的网页，省却了为电子邮件写样式的麻烦。

• 6、CodeTerminal

  • 从 VS Code 拆分出来的、独立的终端模拟器

• 9、Eoapi

  • 开源的 API 管理和测试 APP

• 我们如何以低于 400 美元的价格每月处理 80TB 和 500 万的页面浏览量 – Poly Haven 博客

• 1、SVG Silh

  • SVG 图片库，一共有几万张。

• 2、开放式学术期刊搜索引擎

  • 科学论文搜索引擎，目前共有 600 多万篇。

  • 

• 3、Device Info

  • 一个网页工具，显示浏览器可以收集的所有用户设备信息，比如电池、麦克风、蓝牙等。

• 如何使用 CSS 偷取用户信息

• 不需要 JavaScript 的 5 件事

• 1、Noto emoji

  • 谷歌推出的一款单色的 Emoji 表情字体，共有 3000 多个符号，优点是体积小。如果希望表情符号在各平台都是同一个样子，可以用它。

• 2、Fengari

  • 浏览器的 Lua 虚拟机，可以让网页执行 Lua 语言脚本。

• 3、Flmngr

  • 这个项目就是单个 index.php 文件，只要把该文件放在图片目录之中，就能作为图库访问。

• 4、Spacedrive

  • 跨平台的文件浏览器，可以挂载云盘，统一操作

• 5、bilibili2local

  • bilibili 视频命令行下载工具

• 6、GithubX

  • 一个浏览器插件，用来对你在 GitHub 上打星的项目，进行分类管理，因为 GitHub 官方不提供自定义分类，很难找某个收藏的项目

• 7、bookmark.style

  • 一个开源工具，可以将任意链接转换生成可分享的图片

• 8、xfrpc

  • frp 项目的 C 语言客户端，主要用于基于 Openwrt 的路由器上，进行内网穿透

• 9、CTFever 工具套件

  • 为 CTF 黑客比赛参加者准备的常用工具套件

• 10、Assembler Simulator

  • 一个网页应用，提供了 8 位 CPU 模拟器，可以用来学习 x86 架构的原理

• 2、动画云图

  • 该网站把气象云图的变化，以动画形式表现出来，并且可以按各个国家查看。

• 3、前端工程化三十八讲

  • 网友原创的前端工程化的三十八篇短文章，每篇大概五百字左右，涵盖了开发、打包、运维等众多内容

• 4、Iconoir

  • 开源的 SVG 图标搜索引擎，目前有 1000 多个图标。

• 5、深度学习面试题合集

  • 这是一本英文的正式出版物，收集了几百道深度学习面试题，每一道题都有解答。作者提供此书 PDF 文件的免费下载。

• 1、Postgres.js

  • Node.js 和 Deno 的 PostgreSQL 数据库操作库。

• 4、Geeker Admin

  • 一款基于 Vue3 的后台管理系统

• 5、Musicn

  • 下载高质量音乐的命令行工具，支持 flac、mp3 格式

• 7、zhihutime

  • 油猴脚本，在知乎答案的上方，显示回答时间距今多久

• 1、Type challenges

  • TypeScript 题库，用来刷题提升编写类型的能力。另有网友制作的视频解答。

• 2、Packages for Linux and Unix

  • 该网站返回各种 Linux 发行版下符合搜索条件的模块

• 3、Thanks-Mirror

  • 这个仓库整理各种包管理器的镜像站点，主要是国内镜像

• 7、如何使用 GitHub Actions 网页截图（英文）

  • 本文提供了一个 Action 模板，演示怎么使用它生成网页截图。

• 3、DownKyi

  • Windows 桌面软件，用来下载 B 站视频，支持批量下载，支持 8K、HDR、杜比视界，提供工具箱（音视频提取、去水印等）

• 4、Regular Expression Tester and Visualizer

  • 在线的正则表达式测试和可视化工具

• vue-dark-switch

  • 多合一的开箱即用 vue3 暗黑模式开关组件

• 6、小舒同学

  • 浏览器插件，将收藏夹里面的书签，展示在浏览器默认主页上

• 7、云策文档

  • 一款开源知识管理工具，可以自己部署。通过独立的知识库空间，结构化地组织在线协作文档，支持多人协作文档

• code996

  • 一款开源的分析工具，统计 Git 项目的 commit 时间分布，推导出这个项目的编码工作强度

• 9、Cortex.js

  • 一个数学公式的 Web Component 组件。

• 10、RedwoodJS

  • 一个前后端一体的 JS 框架，有点类似 Next.js，GitHub 超过一万颗星。它的 API 看上去很简洁优雅。

• 3、趣味数据分析

  • 介绍数据分析的中文电子书，免费在线阅读。侧重趣味性，比如用图还是表，是阈值还是阀值

• 4、前端部署十五章

  • 一组系列文章，介绍如何部署前端项目。从最原始的部署方案过渡到 Docker 与 Kubernetes，逐步优化，另有配套的视频讲解。

• 7、元素替换网页对话框（英文）

  • 本文用浏览器原生的<dialog>元素替换掉 alert、confirm、prompt 对话框，给出详细的代码实现。

• 1、Yaade

  • 一个开源的 API 开发环境，相当于开源的 Postman。

• 2、Regolith

  • 一个新的 Linux 发行版，特点是帮你做好了桌面环境和窗口管理器，基于 Ubuntu、GNOME 和 i3。

• 3、中文搜索结果黑名单

  • uBlacklist 插件的网址黑名单，用来过滤谷歌、百度搜索结果里面的中文垃圾站点

• 4、NocoBase

  • 一款开源的无代码平台，无需编程，用它搭建自己的协作平台、管理系统，只需要几分钟时间

• 7、CRX viewer

  • 一个浏览器插件，只要访问 Chrome 网上商店的某个插件主页，就会显示插件源码的地址。它还有在线版。

• Gephi

  • 一个跨平台的桌面软件，用来生成各种可视化图形效果，自称是"用于图表的 Photoshop"。

• 9、Rust Coreutils

  • Linux 系统的一些核心工具（比如 ls、cp 等）是由 GNU Coreutils 这个包提供的，都是使用 C 语言写的。这个项目使用 Rust 语言逐一重写这些工具，将 GNU Coreutils 替换为 Rust Coreutils。

• 2、Webcamtaxi

  • Youtube 上面有很多 24 小时的摄像头直播频道，可以看到世界各地的实时状况。该网站就是收集这些频道，按照地区和内容分类。

• 3、Side Project 指南

  • 原创的小册子，记录作者对做一些业余小项目的思考和经验

• 4、Jest 实践指南

  • 原创教程，帮助学习者使用 Jest 框架完成前端测试

• 5、Java Notes for Professionals book

  • 一本免费的 Java 学习材料，将 Stack Overflow 上面 Java 的常见解答，分门别类整理成了一本书

• 3、我如何搭建家用 NAS（中文）

  • 本文详细记录了作者选购硬件、安装软件，搭建一台 22TB 的家用 NAS （网络存储）服务器的过程，可以当作自己架设 NAS 的参考。这里是中文翻译，另有英文原文

• 5、使用 Cloudflare + Backblaze B2 打造一个免费的图像 CDN（英文）

  • 本文是一篇详细的教程，教你怎么把图片托管在 Backblaze B2 对象存储，然后连接到 Cloudflare 的 CDN 服务。两者都有免费额度，对于小网站来说，不用花钱就解决了图片的存储和带宽问题。

• 7、我的免费摄影软件工作流（英文）

  • 作者是一个专业的摄影师，完全采用免费软件处理数码照片。本文介绍他的解决方案。

• 2、ToolJet

  • 一个低代码框架，用来开发内部工具。部署到服务器后，它有一个 Web 界面，通过拖拽，就可以连接各种数据源，生成各种应用或管理面板。

• 3、i 微信读书

  • Chrome 浏览器插件，配合网页版微信读书使用，支持划线摘抄句子、划线生成分享图片、一键导出笔记等功能

• 4、Sogou C++ Workflow

  • 搜狗公司开源的 C++ 服务器引擎，支撑搜狗几乎所有后端 C++ 在线服务，提供了大量异步服务的功能

• Deno 框架

  • Deno 本身的开发已经接近稳定了，下一步只要有一个好用的框架，就能推广了。

  • Deno 是 JavaScript 语言的服务器运行环境，跟 Node.js 是竞争关系。

  • 1、Fresh 框架

    • 该框架直接使用 TypeScript 脚本，号称零配置、零构建，页面由服务端渲染，客户端不需要 JS 生成内容，也没有多余的 JS 脚本，追求小而快，值得关注。

    • 上周，基于 Deno 的 Fresh 框架发布了预览。

  • 2、Aleph.js

    • Aleph.js 是另一个基于 Deno 的全栈框架，类似于 Next.js，目前处于早期开发阶段，也可以关注。

  • 3、Express

    • 顺便提一下，老牌的 Node.js 框架 Express，最近要发布 5.0 版了。这是一件大事，因为 4.0 版是八年前发布的。这篇文章介绍了5.0 版的新特性

• 1、全球海底光缆

  • 这个网页提供了一个互动式的地球，上面有全世界海底光缆和骨干机房的位置。

• 2、极光

  • 这个网页构造了一个极地的背景，让你手绘动态的极光效果。

• 3、波斯波利斯

  • 波斯波利斯是古代波斯帝国的首都，位于现在的伊朗，已经是一片废墟了。这个页面还原了这座雄伟的帝国都城，重建了 3D 街景，让你在其中漫游。

• 4、思源笔记

  • 国产的个人知识管理系统，主要用于个人笔记，功能很多。除了云端存储和多端同步收费，其他都是免费功能

• 5、AI Doc Writer

  • 一个编辑器插件，只要选中函数代码，就会自动生成对应的 Javadoc 注释，可用来生成文档。

  • 它支持多种语言（JS、TS、Java、Python、PHP 等等），有 VScode、IntelliJ 的插件，还可以在线试用。

• 7、BiglyBT

  • 一个开源的跨平台 BitTorrent 客户端，自带搜索、数据分析、块视图等大量丰富功能。

• 8、Lemon design

  • 一个基于 Tailwind CSS 的 React 组件库。

• 9、Mizu

  • 查看 Kubernete 集群内部各个微服务 API 之间流量通信的软件。

• 10、Freeplane

  • 跨平台的桌面软件，用于制作思维脑图和知识管理。

• 1、濒危声音博物馆

  • 这个网站很有意思，收藏一些消失的声音，比如打字机的击键声、点阵式打印机的打印声、Windows 95 的开机声。

• 2、Fugu

  • 一款开源的网站访问统计服务，需要自己在服务器上架设。

• 3、Dufs

  • 一个简单的文件服务器，可以提供静态文件服务，支持上传、下载、搜索、访问控制、webdav 等功能

• 4、Quickbuild

  • C/C++ 项目的构建工具，类似于 GCC，号称是零配置，直接运行就能构建出项目。

• 1、黑客技巧（HackTricks）

  • 免费的英文电子书，介绍一些破解计算机系统的黑客方法。

• 2、合同示范文本库

  • 国家市场监管总局开发的一个数据库，面向社会免费开放，提供常见合同的示范文本。

• 3、100 个 numpy 练习

  • numpy 是一个很常用的 Python 库，这个网站从面试题、邮件列表和文档里面，选出了 100 个常见问题，并配上答案，供大家练习。

• 4、Airbnb 比赛

  • Airbnb 推出了一个比赛，向全世界征集最疯狂的建筑物改造的点子。最终评选出 100 位获奖者，每人可以得到 10 万美元资助，去实现自己的想法。报名截止期是 7 月 22 日。

• 5、Patterns.dev

  • 一本英文的原创教程，免费在线阅读和下载。它使用 JavaScript 语言为例，详细介绍每一种设计模式。最后演示如何将这些设计模式运用于 React 框架，搭建 Web 应用。

• 5、如何自制 CF 卡（英文）

  • CF 储存卡很贵，但它使用的是 NVME 接口，我们可以自己动手，轻松用 NVME 硬盘改装成 CF 卡。

• 1、React Arborist

  • 一个 React 树状视图组件，支持项目的拖拉和点击编辑。

• 3、Tkinter Helper

  • tkinter 是 Python 自带的标准库，用来制作简单的图形界面，无须另行安装，支持跨平台运行。这个小工具是 tkinter 布局助手，仅需在网页上拖拽组件，就能制作出 tkinter 界面，所见即所得，自动生成 Python 代码，这里是 Demo

• 4、ahooks

  • 阿里开源的 React Hooks 仓库，提供了非常多实用的 Hook

• Appwrite

  • 一个开源的通用后端解决方案，号称是 Firebase 的替代品。架设以后就会自动提供数据读写的 REST 接口，供各种应用连接。

• 6、Hooks Admin

  • 基于 React18、React-Router v6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 搭建的一套后台管理界面，这里有 Demo

• 7、diagrams.net

  • 一个在线画流程图的网站。

• 8、Sokrates

  • 一个对代码库进行分析、生成统计报告的工具，报告内容包括代码统计、复杂度、文件大小、主要提交者等指标。

• 电脑启动盘制作工具

  • 1、netboot.xyz

    • 这个工具可以制作电脑的网络启动盘，从网上加载各种操作系统的镜像文件，用户可以选择一个镜像，实现网络启动。

  • 2、Ventoy

    • 著名的可启动 U 盘制作工具，只要把操作系统的镜像文件拷贝进 U 盘，就可以启动安装了。

  • 3、UnattendTool

    • 安装启动盘时，会被要求做很多选择。这个工具可以根据事先的设定，实现自动选择，从而自动完成整个安装。它支持 Windows 10 和 Windows 11

• 1、前端程序员的命令行入门

  • 一篇英语的科普长文，向前端程序员介绍命令行的基本用法，适合不熟悉命令行、用惯 Windows 的同学。

• 3、通用 API 接口

  • 这个网站的构思很好，在一个地方提供开发者需要的所有常用 API，这样可以统一用法、简化认证。目前，已经提供了将近 100 个 API。

• 4、fintopea

  • 这个网站可以快速查询，美股上市公司的历年财务数据，并自定义生成可视化图表。

• 5、水果的水彩图库

  • 美国农业部的数据库，可以免费下载水果的水彩图片，一共有 7000 多种

• 世界最大的问答网站 Stack Overflow

• 3、零基础开发一个 Web/Hybird 项目（中文）

  • 作者零基础开发了一个完整的 Web/Hybird 的项目，支持浏览器端、Android 端、iOS 端，这篇长文记录了所有的学习和开发过程。

• 2、Pointless

  • 一个开源的网页画板，可以当作白板使用，效果不错。

• 3、PyScript

  • PyScript 是一个用于网页的 Python 解释器，能够在网页上运行 Python 代码。

• 5、doctree

  • 这个软件能够解析任何语言的代码，提取出函数、类等语法单位，生成一个可搜索的 API 文档网站。

• 6、htmx

  • 一个网页 JS 库，可以让任何一个网页元素发出 HTTP 请求，并且可以局部更新该元素，详见这篇教程。

• 8、Jbake

  • Java 的静态站点生成器，有跨平台的二进制可执行文件。

• 9、Repo Visualizer

  • GitHub 官方推出的一个代码库可视化工具，通过 GitHub Actions 生成 SVG 文件，代表整个代码库，空心圆表示目录，实心圆表示文件，圆的大小代表了文件的大小，还能根据提交历史，生成动态变化图。

• 2、谷歌软件工程（中文版）

  • 作者自己动手，中英对照翻译了《Software Engineering at Google》一书。原书是谷歌员工的文章合集，介绍谷歌内部的软件工程做法

• 3、Tauri 系列：打造属于自己的下一代跨端应用

  • 一组中文系列文章，介绍如何用 Tauri 开发一个跨平台桌面应用。Tauri 是 Electron 的替代品，使用平台自带的 WebView。

• 4、Vue.js 挑战

  • 一个 Vue.js 题库，可以选择不同的难度进行不同程度的练习

• 5、合成器原理（Learning Synths）

  • 一篇声音合成的教程，通过一个个小例子，介绍声音合成器的原理，有中文版。

• 1、Bud

  • 一个 Go 语言的全栈 Web 框架，用它来写网站的前端和后端，编译成一个二进制可执行文件，放到服务器上就能直接运行，不需要其他文件

• 2、Aspect

  • 一个 Web 应用，以可视化方式创建 React 组件，快速生成组件代码。

• 3、Vexip UI

  • 个人打造的 Vue 组件库，没有大厂背景，目前有 70 多个组件

• 4、gacm

  • 一个极简的 Git 帐号管理工具，可以用它方便地切换和管理 Git 用户

• 5、DBER

  • 数据库 ER 图的可视化设计工具，用来设计数据库结构，拖拽生成模型引用关系，可以一键导出 SQL 语句

• 7、Bing Wallpaper

  • 这个仓库使用 GitHub Actions，每天自动抓取必应首页的壁纸图片。

• 8、C2Rust

  • 这个工具可以将 C/C++ 代码转换成 Rust 代码，除了命令行工具，还提供在线转换。

• 9、Paperless-ngx

  • 一个用来管理个人文档的开源软件，可以把 PDF、Office、图片文件等都放在里面，需要自己架设服务

• 1、Bash-Oneliner

  • 该仓库收集各种一行的 Bash 命令，用来完成各种不同的任务。

• 2、Dracula

  • 这个网站收集了 266 个应用的暗色主题，比如 Zsh、Xcode、Vim、Figma 等

• 3、Tiny Python Projects

  • Python 教学书籍，PDF 免费下载，教初学者动手做 22 个 Python 小项目。

• 4、5 种限流算法，7 种限流方式（中文）

  • 本文总结了 Java 服务器端挡住突发流量的一些限流措施

• 5、我两年里面做过的小项目（英文）

  • 作者回顾了他在两年里面做过的 8 个小项目，每个项目的构思，以及有没有赚钱，还是有所启发的。

• QCAD

  • 一个 Windows 开源的 CAD（2D）做图软件。

• 3、Adaptive Cards

  • 微软推出的一套组件框架，使用 JSON 文件进行描述，因此任何平台都可以加载。也就是说，同一个组件可以用于手机、网页、.Net 应用等各种 UI。

• 4、code-server

  • 一个 VS Code 远程服务的封装，可以安装在任意机器上面，然后就能在浏览器使用 VS Code。你还能使用 Blink 作为 iOS 客户端，在 iPhone/iPad 上编码（下图）。

• 6、bore

  • 一个非常简单的命令行工具，让你轻松将内网端口暴露到互联网上。

• 7、r3DPhoto

  • 一个免费的 iPhone 应用，将平面照片转为 3D 模型文件。

  • 另有一个 Windows 文件管理器的插件 Space Thumbnails，提供 3D 模型文件的缩略图预览。

• 8、Pinry

  • 一个 Pinterest 的开源克隆，可以用来保存收藏的图片和网址，以"瀑布墙"的形式展示。

• 9、musikcube

  • 一个基于终端的跨平台音乐播放器，同时也是一个流媒体音频服务器，可以在手机上连接它收听音乐。

• HowToStartOpenSource

  • 一份作者自己整理的 GitHub 中文使用指南，初学者可以用来学习怎么使用 GitHub

• 4、cssbuttons

  • 这个仓库收集各种按钮的 CSS 代码，大部分都带有动画效果。

• 2、Chiphell 桌面 Show 活动

  • Chiphell 网站正在举办第四届桌面 Show 活动，请网友上传照片，展示他们的上网环境。

• 4、谷歌为什么要推出 Carbon 语言？（英文）

  • 最近几年，越来越多的公司尝试发明新语言，比如使用 TypeScript 更新 JavaScript，使用 Kotlin 更新 Java。

  • 本月，谷歌宣布推出 C++ 的替代品 Carbon 语言，因为谷歌认为 C++ 的发展太慢，希望设计出一种由社区推动而不是委员会控制的新语言。

• 5、如何将 Chrome 用作代码编辑器和调试器（英文）

  • Chrome 浏览器自带的开发者工具有很多功能，本文详细介绍如何用它来编辑和调试 JS 脚本。

• 1、PPZ.vscode

  • 一个 VSCode 插件，提供操作数据库的图形界面，支持多种数据库

• 2、浏览器 ADB

  • 在浏览器里面实现的 ADB（Android Debug Bridge），可以直接在 Chrome 浏览器中调试安卓设备

• 3、Sunmao

  • 开发低代码工具的开源框架，内置图形化编辑器，允许开发者封装任何 React 组件，放到编辑器里面使用，参见介绍文章。

• 5、Hakuba

  • 这个工具可以把 GitHub 讨论区（GitHub Discussion）转变成一个静态的博客网站。并且配置了自动构建，只要论坛发生变动，就会重新构建网站

• 7、JSONT

  • 在线的 JSON 格式化工具，方便展示、查看、编辑 JSON 数据。类似工具还有 JSON Hero。

• 8、Vue Color Avatar

  • 一个纯前端的矢量风格头像生成网站，可以搭配不同的素材组件，生成自己的个性化头像，参见源码仓库

• Xmake

  • 一个轻量级的跨平台构建工具，可以用它构建 C/C++、Go、Rust 等许多语言的项目

• 10、veinmind-tools

  • 这个工具可以检查 Docker 镜像文件是否存在安全问题

• 2、React 技术揭秘

  • 原创的中文电子书，解读 React 源码，并有配套的代码仓库，自己从零实现 React 18

• 3、Java 学习 + 面试指南

  • 一个收集 Java 核心知识和面试指南的网站，有开源仓库

• 4、3D 动画揭秘（Pixar in a Box）

  • 这是 Pixar 动画公司与可汗学院的一个合作教程，通过几十个视频短片，每个大约两三分钟，介绍 3D 动画电影的制作过程。

• 5、lofi.co

  • 一个用于放松的背景音乐网站，网页背景是一个咖啡馆，配有各种动画效果（比如驶过的汽车、飘下的落叶、雨点等等），还可以进入咖啡馆室内。

• 5、如何维护一个开源项目（中文）

  • 如果你要开源一个项目，要注意哪些事项，作者谈谈想法

• 1、Arctype SQL

  • 一个桌面的数据库查询工具，可以连接各种数据库，在其中执行 SQL 语句，以可视化形式展示数据。

• 2、CSS 手电筒

  • 这个网页演示了使用 CSS 实现各种手电筒效果。

• 3、snoopForms

  • Typeform 的开源替代品，可以用它搭建在线问卷。

• 4、favicon.io

  • 网站图标 Favicon 的在线生成工具

• YYEVA

  • YY 直播的动画效果方案，涉及 iOS、安卓和 Web，包括 After Effects 插件和其他工具，可以先看仓库里面的系列介绍文章。

• 6、Lorien

  • 一个绘图 + 笔记的画布软件，可以导出 SVG 格式。底层使用 Godot 游戏引擎，图形性能非常好，支持 Linux/Mac/Windows 系统。

• Vytal

  • 一个 Chrome 浏览器插件，可以修改你的时区、语言、地理位置和 Useragent 等设定，从而骗过页面脚本的 IP 侦测。

• 9、Git Command Explorer

  • 一个网页小工具，你选择要使用的 Git 命令，它给出这个命令具体的使用格式。

• Emoji 厨房

  • 2020 年，谷歌的设计师做了一个项目，将 Emoji 符号两两合成，组成新的 Emoji。

  • 这个项目起名为"Emoji 厨房"，意为对 Emoji 进行加工。

  • 设计师一共画了几万张图片，在安卓的 Gboard 应用提供，那是一个键盘应用，需要单独安装。不过，所有图片都放在谷歌的服务器上，可以随意调用。

  • 很多外部开发者就写了各种 UI，方便大家查找获取这些图片。

  • 1、Emoji Kitchen

  • 2、Emojimix

  • 3、Emoji Supply

  • 4、还有一个 Emoji 壁纸工具，可以选择 Emoji 符号，生成壁纸。

• 1、Awesome tunneling

  • 这个仓库收集各种隧道软件。

• 2、美国数学学会认可的教科书

  • 美国数学学会有一个网页，列出了该学会认可的教科书，各个数学领域都有，很多都可以免费获取。

• 新兴搜索引擎

  • 谷歌搜索多年来一直没有改进，广告越来越多，并且保存大量用户信息，搜索体验变差。

  • 于是最近几年，一些新兴搜索引擎诞生了，并且获得了不错的成绩。DuckDuckGo 就是其中最知名的。

  • 今年，又出现了三个新的搜索引擎，值得关注：

  • 1、Kagi

    • 它提供收费搜索服务，免费账户可以每月搜索 50 次。保证没有广告、不保存用户信息，搜索质量很不错，不仅是英文搜索，中文搜索的结果也比较准确。

  • 2、yep

    • 这个搜索引擎的特点是，保证广告收入的 90%会返回给内容的创作者。它的英文搜索质量还可以，中文不行。

  • 3、Neeva

    • 没有广告，承诺不保存用户信息，由前谷歌工程师创建，搜索质量相当好。

• 2、Diffsound

  • 腾讯和北大合作的一个模型，根据文本生成声音，比如输入"鸟儿和昆虫在白天鸣叫"，就会生成对应的声音。

• 3、TWINT

  • 一个开源的推特数据抓取分析工具，不需要注册即可使用。另有 Instagram 的数据抓取分析工具 Osintgram。

• 4、Shottr

  • 一款 Mac 电脑的免费截屏软件，性能非常好，支持滚动截屏，还可以像素级修补图像。

• 5、infinite

  • Go 语言的交互式命令行组件库，提供 progress、group、mulit select、input text、confirm 等常用组件

• 6、Temir

  • 使用 Vue.js 开发命令行工具的框架

• 7、vdoing-template

  • Vuepress 的一个模板库，通过 GitHub Actions，直接构建出一个静态博客

• 8、Melody

  • 个人用户的音乐管理工具，可以在网上搜索歌曲，然后一键下载或者上传到云盘

• 9、crypto-js-wasm

  • 哈希和加密算法库 crypto-js 的 wasm 版本

• 1、Knots 3D

  • 这个网站使用 3D 动画，一步步演示如何打各种绳结。

• 3、UISET

  • 收集免费 UI 资源（插图、图标、颜色等）的网站，可以通过 GitHub 仓库提交新资源

• 4、折纸地球仪

  • 这个网站提供 A4 的模板下载，打印出来，可以自己粘成地球仪。

• 2、Nude UI

  • 著名前端开发者 Lea Verou 做的 Web Component 组件库，目前只有五六个表单组件，都是轻量级组件，非常易用，效果不错。

• 3、卡通猫生成器

  • 一个网页小工具，可以生成卡通猫图片，猫的每个部分都可以定制。

• 4、Glances

  • 一个 Python 写的系统监控工具，最大特点就是跨平台，Linux/Windows/Mac 都能用。

• 5、XLite

  • 这个工具可以将 Excel 表格文件导入 SQLite，使用 SQL 进行查询。

• 6、Jina

  • 一个基于 Python 的框架，用于构建神经搜索系统，针对图像、音频、视频等进行搜索，比如口红搜索（寻找适合某张人脸照片的口红）

• 9、GitJournal

  • 一个手机的笔记 App，支持用 Markdown 做笔记，推送到远程 Git 仓库。它的安卓 App 是免费的，iOS App 是收费的。

• 10、Unpaywall

  • 一个浏览器插件，在各种论文数据库的页面上，添加下载按钮。周刊此前介绍过同类插件，这个看上去更正规一些。

  • 另有一个论文数据库 OA.mg，用来查找论文。

• 2、oPhysics

  • 这个网站收集可以网页交互的物理学演示，有几十个作品。实时调节参数，就能看到结果

• 3、treevis.net

  • 这个网站收集了 300 种数据可视化案例，可以当作自己选择可视化形式时的灵感。

• 1、u

  • 一个 JS 库，用于 JSON 数据的序列化。特点是需要定义数据的规格（spec），所以序列化后的字符串非常小。

• 2、Flipper Zero

  • 一个硬件小工具，将各种物联网协议（NFC、红外线、RFID、蓝牙等）做在一个设备里面，还能编程，方便进行各种实验，看上去很好玩。

• 3、Astrofox

  • 这个软件基于音频生成可视化的视频，也就是让音频变成视频，可以添加各种图层，有多个参数可以调整。

• 4、Mutant Standard

  • 一套有点另类的 Emoji 图案，将近 1000 个符号。如果你想要不一样的 Emoji，可以试试。

• 5、PocketBase

  • 单文件的数据库软件，使用 Go 编写，把数据库（SQLite）、后台 UI、数据管理、用户管理等，都做在一个文件里面。

• 6、Piano Trainer

  • 一个跨平台的钢琴训练软件，通过一个个小练习，帮助初学者学会弹钢琴。目前好像不支持电脑键盘，必须使用 MIDI 键盘。

• 7、Aspect

  • 一个浏览器插件，允许从网页里面拷贝任意 UI 组件，把它的代码还原出来，相当于从 UI 的逆向工程。

• 8、Markdeep

  • 一种扩展的 Markdown 格式，添加了很多功能，同时还是一个 JS 脚本，只要放入网页，就能自动把这种格式的文本文件渲染成 HTML 页面

• 9、AutoRegex

  • 这个网站将正则表达式"翻译"成英语解释。你填入一个正则表达式，它返回一段英文解释。

• 1、Stable Diffusion 资源

  • 上周的一件大事是 Stable Diffusion 模型发布了。

  • 它是一个"文本到图像"的开源引擎，功能跟闭源的 DALL·E 引擎类似，但代码是公开的。

  • 已经有很多人基于它开发各种应用，标题链接是一个仓库，收集各种相关链接。

  • 它还可以从草图生成详图，这里有一篇大开眼界的使用案例。下面是作者手绘的草图。

• 2、陕西博物馆 360 度实景浏览

  • 线上参观陕西博物馆，360 度展示，共有五个展厅 100 多个场景。可以网页浏览，也可以 VR 头盔浏览。

• 4、编程语言数据库 PLDB

  • 这个数据库专门收入各种编程语言，任何人都可以提交新语言，已经收入了 4044 种，还在快速增加中。

• 4、CSS Grid 在 Figma 的应用（英文）

  • Figma 操作面板使用 CSS 网格来实现，作者详细介绍它的实现，网格原来还能这样用。

• 2、NESBox

  • 一个开源的游戏平台，支持多人在线，一起玩 NES（俗称 FC 红白机） 游戏，有 web 版和桌面版。目前已经有很多游戏，预计有 1000+ 游戏，参考这篇介绍文章

• 4、Urara

  • 一个静态博客生成器，基于 SvelteKit

• 5、Cleanup Photos

  • 这个网页工具可以清除照片上不要的物体。用户上传照片以后，框选不需要的物体，系统会自动清除这些物体，用背景填充照片。

• 6、OurBoard

  • 一个在线白板，你创建一个房间，把网址分享给其他人，大家就可以在一块网页白板上共同涂写。

• 7、gh-dash

  • GitHub 官方命令行客户端 gh 的插件，可以在命令行以面板形式，显示仓库的 PR 和 issue。

• 9、Nginx Proxy Manager

  • Nginx 经常用作反向代理，这个工具为反向代理提供一个 Web 管理界面。

• 4、中华遗嘱网

  • 这个网站提供遗嘱的知识和服务，属于半官方组织，收费不低，但是比自己去找专业服务还是方便和便宜一点。

• 1、websocat

  • 一个命令行的 WebSocket 工具，用来跟 websocket 服务器互动，以及在本地架设 WebSocket 服务。

• 2、memlab

  • Facebook 公司开源的一个工具，用来检测 JavaScript 应用是否存在内存泄漏，参见介绍文章。

• 4、Rocket.Chat

  • 一款开源的聊天软件，服务端、桌面端、手机 App 都提供

• 5、QWER

  • 用 SvelteKit 打造的一个静态博客系统

• 6、OSS Insight

  • GitHub 开源动态观察，使用这个网站，可以获得某个 GitHub 仓库或者某个开发者的详细统计数据和趋势。

• 8、mpv

  • 一个跨平台的命令行视频播放器。

• 9、PimEyes

  • 一个人脸反向搜索引擎。你上传一张人像，它返回该人的其他照片。

• 10、Virtual Graph paper

  • 一个在线画板，可以方便地用鼠标做图。

• 2、中国铁路地图

  • 这个网站可以查看全国铁路的路线图，另有全世界的铁路地图。

• 5、Proof 维基

  • 一个收集数学证明的维基网站，目前收集了 2 万多个数学定理的证明。

• 4、巧用 CSS 显示 HTML 源码（英文）

  • 本文介绍了几个有用的技巧，很神奇地在渲染页面时，能够展示 HTML 源码。

• 1、Certificate Ripper

  • 一个命令行工具，用来获取网站的 HTTPS 证书。

• 2、ctop

  • 一个容器的终端监控界面，监控容器的运行状况，就像是容器的 top 命令。

• 3、Bottle

  • 一个在 Linux 上运行 Windows 软件的工具，主要用于运行游戏。

• 4、Umbrel

  • 个人服务器的操作系统，把常用工具做在一个启动页里面，主要用在树莓派。

• 5、Fighting Design

  • 一款个人开发者打造的 Vue3 组件库，已经有相当的规模了

• 数据库排名

  • 这个网站根据数据库的流行程度，对数据库软件进行排名。

• 5、fasteR

  • 这个仓库是 R 语言学习教程，有大量示例。

• 4、text-watermark

  • 一个 npm 模块，借助零宽度字符，在文本里面插入（或解码）不可见的文字水印

• 5、proxy-web-storage

  • 一个 JS 库，用 proxy 封装了 localStorage 和 sessionStorage。除了常规的数据存储，可支持事件监听和设置过期时间

• 8、Phoenix

  • Adobe 公司开发过一个代码编辑器 Bracket，现在将其做成了 Web 版，重新命名为 Phoenix，可以当作线上 IDE 使用，源码开源。

• 1、人生统计

  • 输入生日，这个网站会告诉你一些统计数字，比如你活了多少天、心跳了多少次、地球多了多少人口。

• 2、中文播客榜

  • 查看中文播客的排名和热门节目，数据取自小宇宙和 Apple Podcast，每日更新

• 3、云安全资源汇总

  • 这个项目收集云安全领域的博客、公众号、文章、工具、书籍、视频等资源

• 4、程序员音乐

  • 一个另类的背景音乐网站，精选了一些歌曲和专辑，适合编程时当作背景音乐。它的界面完全采用字符终端样式。

• 5、编程字体

  • 这个网站提供了近百种编程字体，可以切换查看效果，以供选择。

软件工具

学习资源

开发库

浏览器插件

笔记工具

• 工具软件 FlowUs 体验报告

  • 上周，一款今年刚发布的生产力软件 FlowUs（中文名"息流"）找我试用，希望通过我介绍给周刊读者。试用以后，我觉得这个产品体验不错，有好几个亮点，值得介绍给大家。

  • FlowUs 提供三大功能：文档+表格+网盘。 通过"块编辑器"，它们可以作为内容块（block）自由组合，满足不同场景：写笔记、做主页、管理项目、共享文件、多人协作......

  • 看到这里，有的朋友会说，这跟国外软件 Notion 很像。确实如此，FlowUs 的目标是本土化，添加了一些本土功能，更适合国内用户的使用习惯。另外，它的服务器都在国内，访问速度非常快，而且支持多端即时同步，任何改动都可以在其他客户端马上看到。

  • 它目前支持 50 多种块，国内常用的服务（B 站、腾讯视频、网易云音乐等）都有。编辑器里面，按下斜杠键（/），可以查看列表。

  • 因为是块编辑器，排版很简单，只要拖拽就能实现各种布局。再加上 FlowUs 内置了 80 多种模板，套用一下就能做出各种页面：读书笔记、个人（或团队）主页、项目管理、会议纪要、招聘管理等等。

  • 如果不写文档，只用 FlowUs 管理数据也可以。它的表格其实是一个轻量级的页面数据库。目前提供七种数据视图，基本满足了常见需求：表格、看板、日历、时间轴、目录和画廊等。

  • 最后，它的网盘功能很强，完全可以只当作网盘使用：上传文件不限制大小，也不限速，支持 Office 文件和视频的预览。免费帐户的空间是 2GB，年费 99 元的专业版则是不限制容量。

  • 上面是官方的网盘模板页，你完全可以把网盘块插入文档或其他模板，做出各种下载页。

  • 总的来说，我觉得它的完成度比较高，确实能够满足很多使用场景。Web 和手机 App 都齐全，个人和小团队都可以使用。

  • 目前推广的力度很大，免费账户没有任何限制（除了网盘空间）。大家可以关注 FlowUs 公众号，加入他们的用户反馈群，官方时不时会提供一些优惠，升级到专业版。

  • 感兴趣的朋友，欢迎扫描上方二维码，或者访问这个链接，前往注册使用。FlowUs 特别为周刊读者提供福利，本期的微信公众号留言点赞数前 10 位的同学，获赠无限空间的专业版一年。

• Excalidraw：开源实用的白板画图工具

  • 介绍

    • Excalidraw 是一款开源的画图工具，可以画一些简单的流程图，显示效果像是用笔在纸上画的一样，操作简单明了，可以在线使用或者通过谷歌浏览器插件安装在本地。

  • 网址

    • 官网

      • https://excalidraw.com/

    • github

      • https://github.com/excalidraw/excalidraw

• Obsidian

  • 介绍

  • 网站

    • 官网

      • Obsidian

    • 下载

      • Download - Obsidian

前端资源导航

综合类

前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/JacksonTian/fks Web 前端开发大系概览 - 中文版 http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html 免费的编程中文书籍索引 https://github.com/justjavac/free-programming-books-zh_CN 前端书籍 https://github.com/dypsilon/frontend-dev-bookmarks 前端免费书籍大全 https://github.com/vhf/free-programming-books

智能社 - 精通 JavaScript 开发 http://study.163.com/course/introduction/224014.htm 重新介绍 JavaScript（JS 教程） https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript 麻省理工学院公开课：计算机科学及编程导论 http://v.163.com/special/opencourse/bianchengdaolun.html JavaScript 中的 this 陷阱的最全收集—没有之一 http://segmentfault.com/a/1190000002640298 JS 函数式编程指南 https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html JavaScript Promise 迷你书（中文版） http://liubin.github.io/promises-book 腾讯移动 Web 前端知识库 https://github.com/AlloyTeam/Mars Front-End-Develop-Guide 前端开发指南 https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide 前端开发笔记本 https://li-xinyang.gitbooks.io/frontend-notebook/content 大前端工具集 - 聂微东 https://github.com/nieweidong/fetool 前端开发者手册 https://dwqs.gitbooks.io/frontenddevhandbook/content

入门类

前端入门教程 http://www.cnblogs.com/jikey/p/3613082.html 瘳雪峰的 Javascript 教程 http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 在线入门开发教程 http://www.hubwiz.com/course/?type=“入门” jQuery 基础教程 http://www.imooc.com/view/11 前端工程师必备的 PS 技能——切图篇 http://www.imooc.com/view/506 结合个人经历总结的前端入门方法 https://github.com/qiu-deqing/FE-learning

工具类

前端人的俱乐部 http://f2er.club/ 真可以解放你的收藏夹 如何优雅地使用 Sublime Text http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/# 新编码神器 Atom 使用纪要 http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/ css sprite 雪碧图制作 http://www.imooc.com/learn/93 版本控制入门 – 搬进 Github http://www.imooc.com/learn/390 Grunt-beginner 前端自动化工具 http://www.imooc.com/learn/30 IntelliJ IDEA 简体中文专题教程 https://github.com/judasn/IntelliJ-IDEA-Tutorial Webstorm,InterllIdea,Phpstorm http://t.cn/8kZZ1Uy SublimeText https://github.com/jikeytang/sublime-text Atom https://atom.io visual studio code https://code.visualstudio.com

综合效果搜索平台

zoommyapp.com http://zoommyapp.com/ 高质量图库 unsplash.com https://unsplash.com/ 高质量图库 www.pinterest.com https://www.pinterest.com/ 图库 New Old Stock http://nos.twnsnd.co 复古风图库 效果网 http://www.jq22.com 花瓣网 http://huaban.com/ 优美图 http://www.topit.me/ codepen http://codepen.io/ 17 素材 http://www.17sucai.com 摄图网 http://699pic.com/ 常用的 JavaScript 代码片段 http://microjs.com

周报类

奇舞周刊 http://old.75team.com/weekly/ 码农周刊 http://weekly.manong.io WEB 前端开发 http://www.css88.com A JS tip per day! http://www.jstips.co 平安科技移动开发二队技术周报 https://github.com/PaicHyperionDev/MobileDevWeekly

开发中心

mozilla js 参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScripthttps://developer.chrome.com/extensions/api_index.html safari 开发中心 https://developer.apple.com/library/safari/navigation microsoft js 参考 https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx js 秘密花园 http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html js 秘密花园 http://bonsaiden.github.io/JavaScript-Garden/zh w3help http://www.w3help.org 综合 Bug 集合网站

开发框架

• jQuery：http://jquery.com/
• Zepto.js：https://zeptojs.com/

Vue.js: Vue.js 介绍 — Vue.js

React.js: React 官方中文文档 – 用于构建用户界面的 JavaScript 库

Nuxt.js: Nuxt.js - Vue.js 通用应用框架

Next.js: Next.js - React 应用开发框架

Preact.js: Preact 是 React 的轻量化替代方案，体积仅有 3KB，并且提供了与 React 相同的 API

Redux.js: Redux 中文文档 - JavaScript 应用程序的状态容器，提供可预测的状态管理。 | Redux 中文文档

Recoil.js: Recoil 中文文档 | Recoil 中文网

Lodash.js: Lodash 中文文档 | Lodash 中文网

Gatsby.js: GatsbyJS 中文网

Underscore.js: Underscore.js 中文文档

Zepto.js: Zepto.js: 轻量且兼容 jQuery API 的 JavaScript 工具库

Moment.js: Moment.js 中文网

Chart.js: Chart.js 中文网

Rome.js: Rome 是一个完整的 JavaScript 工具链 | Rome 中文网

jQuery: jQuery API 中文文档 | jQuery 中文网

Tippy.js: Tippy.js - Tooltip and Popover Library

Popperjs: Home

• Angular：https://angular.cn/
• AngularJS：https://angularjs.org/
• Koa：https://koa.bootcss.com/

基于 Node.js 平台的下一代 Web 开发框架。

• Express：http://www.expressjs.com.cn/

基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

• Egg：https://eggjs.org/zh-cn/

Egg 继承于 Koa。

Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础。而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。

• Electron：https://www.electronjs.cn/

Electron（原名为Atom Shell）是GitHub开发的一个开源js框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。

也就是说，我们可以用 js 语言开发客户端软件了。其实呢，VS Code 这个客户端软件就是用 js 语言写的。

• Redux：https://www.redux.org.cn/

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

• ReactNative：https://reactnative.cn/

使用JavaScript编写原生移动应用。

• mpvue：http://mpvue.com/

基于 Vue.js 的小程序开发框架。

UI框架

• Bootstrap：http://www.bootcss.com/
• ElementUI：http://element-cn.eleme.io/

基于 Vue.js 的组件库。

• iView：https://www.iviewui.com/

一套基于 Vue.js 的高质量 UI 组件库。

• Ant Design：https://ant.design

基于 React 的 UI 组件库，主要用于研发企业级中后台产品。官网推出了 Ant Design pro 作为示例，可以看看。

• Ant Design Mobile：https://mobile.ant.design/

一个基于 Preact / React / React Native 的 移动端 UI 组件库。

• Ant Design of Vue：https://vue.ant.design/docs/vue/introduce-cn/

Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

CSS:

Bootstrap: Bootstrap中文网

Bootstrap Icons: Bootstrap 图标库

Bootstrap Docs: Bootstrap中文文档/中文教程

Bootstrap 编码规范: 编码规范 by @mdo

Bootstrap 网站实例: Bootstrap 优站精选

PurgeCSS: PurgeCSS 用于删除未使用的 CSS 代码的工具

Simple Icons: Simple Icons -- Icon汇

Cssnano: cssnano: 构建在 PostCSS 生态之上的模块化 CSS 代码压缩工具 - cssnano 中文文档

Stylus: Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器

Tailwind: Tailwind CSS - 助你快速实现定制化的网站设计的工具集 CSS 框架

Sass: Sass: Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。Sass 是 Syntactically Awesome Style Sheets 的缩写。

Less: Less.js 中文文档 - Less 中文网

包管理工具:

Yarn: Yarn 中文文档

Yarn v2: 首页

NPM: npm 中文文档 | npm 中文网

Lerna: Lerna · 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目

打包工具:

Webpack: webpack 中文文档 | webpack 中文网

Parcel: Parcel 中文文档 | Parcel 中文网

Rollup.js: Rollup.js 中文文档 | Rollup.js 中文网

Grunt: Grunt: JavaScript 世界的构建工具 | Grunt 中文网

Gulp: 基于流(stream)的自动化构建工具 | gulp.js 中文网

静态站点生成器:

VuePress:

Docusaurus: Docusaurus - 帮你快速构建并优化网站，让你专心于创造内容 | Docusaurus 中文文档

Hugo: Hugo 是世界上最快的网站搭建框架

Gridsome: Gridsome 是一个免费、开源、基于 Vue.js 构建的框架

Jekyll: Jekyll • 一个简洁的博客、静态网站生成工具

Nodejs

Node.js 包教不包会 https://github.com/alsotang/node-lessons 篇幅比较少 http://www.rainweb.cn/article/category/Nodejs node express 入门教程 http://www.w3cfuns.com/article-5598538-1-1.html nodejs 定时任务 http://my.oschina.net/u/568264/blog/193773 一个 nodejs 博客 http://60sky.com 【NodeJS 学习笔记 04】新闻发布系统 http://www.cnblogs.com/yexiaochai/p/3536547.html 过年 7 天乐，学 nodejs 也快乐 http://www.cnblogs.com/qqloving/p/3541099.html 七天学会 NodeJS https://github.com/nqdeng/7-days-nodejs Nodejs 学习笔记（二）—- 事件模块 http://www.cnblogs.com/zhongweiv/p/nodejs_events.html nodejs 入门 http://www.cnblogs.com/liusuqi/p/3735491.html angularjs nodejs https://github.com/zensh/jsgen 从零开始 nodejs 系列文章 http://blog.fens.me/series-nodejs 理解 nodejs http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb nodejs 事件轮询 http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop node 入门 http://www.nodebeginner.org/index-zh-cn.html nodejs cms http://ourjs.com/detail/53e1f281c5910a9806000001 Node 初学者入门，一本全面的 NodeJS 教程 http://ourjs.com/detail/529ca5950cb6498814000005 NodeJS 的代码调试和性能调优 http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line

综合 API

javascripting http://www.javascripting.com 各种流行库搜索 http://microjs.com runoob.com - 包含各种 API 集合 http://www.runoob.com 开源中国在线 API 文档合集 http://tool.oschina.net/apidocs devdocs http://devdocs.io 英文综合 API 网站

Ecmascript

Understanding ECMAScript 6 - Nicholas C. Zakas https://leanpub.com/understandinges6/read exploring-es6 https://leanpub.com/exploring-es6/read ECMAScript 6 入门 http://www.hubwiz.com/course/?type=JavaScript exploring-es6 翻译后预览 http://es6-org.github.io/exploring-es6 阮一峰 es6 http://es6.ruanyifeng.com 阮一峰 Javascript http://javascript.ruanyifeng.com ECMA-262，第 5 版 http://yanhaijing.com/es5 es5 http://es5.github.io

Js template

template-chooser http://garann.github.io/template-chooser artTemplate https://github.com/aui/artTemplate tomdjs https://github.com/aui/tmodjs/blob/master/README.md 淘宝模板 juicer 模板 http://juicer.name/docs/docs_zh_cn.html Fxtpl v1.0 繁星前端模板引擎 http://koen301.github.io/fxtpl laytpl http://laytpl.layui.com mozilla - nunjucks https://github.com/mozilla/nunjucks Juicer https://github.com/PaulGuo/Juicer dustjs http://akdubya.github.io/dustjs etpl http://ecomfe.github.io/etpl

CSS

CSS 语法参考 http://tympanus.net/codrops/css_reference CSS3 动画手册 http://isux.tencent.com/css3/index.html 腾讯 css3 动画制作工具 http://isux.tencent.com/css3/tools.html 志爷 css 小工具集合 http://linxz.github.io/tianyizone css3 js 移动大杂烩 http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb bouncejs 触摸库 http://bouncejs.com css3 按钮动画 http://fian.my.id/Waves animate.css http://daneden.github.io/animate.css 全局 CSS 的终结 (狗带 [译] http://www.alloyteam.com/2015/10/8536 browserhacks http://browserhacks.com

Angularjs

Angular.js 的一些学习资源 https://github.com/dolymood/AngularLearning angularjs 中文社区 http://angularjs.cn Angularjs 2 在线学习 http://www.hubwiz.com/course/?type=AngularJS Angularjs 源码学习 http://www.ifeenan.com/?c=AngularJS angular 对 bootstrap 的封装 http://angular-ui.github.io/bootstrap angularjs + nodejs https://cnodejs.org/topic/51404e0f069911196d2e3923 吕大豹 Angularjs http://www.cnblogs.com/lvdabao/tag/AngularJs AngularJS 最佳实践 http://www.infoq.com/cn/news/2013/02/angular-web-app Angular 的一些扩展指令 http://www.lovelucy.info/angularjs-best-practices.html Angular 数据绑定原理 https://github.com/Pasvaz/bindonce 一些扩展 Angular UI 组件 https://github.com/angular-ui Ember 和 AngularJS 的性能测试 http://voidcanvas.com/emberjs-vs-angularjs-performance-testing 带你走近 AngularJS - 基本功能介绍 http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html Angularjs 开发指南 http://angular.duapp.com/docs/guide Angularjs 学习 http://www.cnblogs.com/amosli/p/3710648.html 不要带着 jQuery 的思维去学习 AngularJS http://www.rainweb.cn/article/angularjs-jquery.html angularjs 学习笔记 http://wangjiatao.diandian.com/?tag=angularjs angularjs 开发指南 http://www.angularjs.cn/T008 angularjs 英文资料 https://github.com/jmcunningham/AngularJS-Learning angular bootstrap http://angular-ui.github.io/bootstrap angular jq mobile https://github.com/opitzconsulting/jquery-mobile-angular-adapter angular ui http://mgcrea.github.io/angular-strap 整合 jQuery Mobile+AngularJS 经验谈 http://www.tuicool.com/articles/7ZZVr2 有 jQuery 背景，该如何用 AngularJS 编程思想 http://blog.jobbole.com/46589/ AngularJS 在线教程 http://each.sinaapp.com/angular angular 学习笔记 http://www.zouyesheng.com/angular.html

React

react.js 中文论坛 http://www.react-china.org react.js 官方网址 https://facebook.github.io/react/index.html react.js 官方文档 https://facebook.github.io/react/docs/getting-started.html react.js material UI http://material-ui.com/# react.js TouchstoneJS UI http://touchstonejs.io react.js amazeui UI http://amazeui.org/react React 入门实例教程 - 阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html React Native 中文版 http://wiki.jikexueyuan.com/project/react-native Webpack 和 React 小书 - 前端乱炖 http://www.html-js.com/article/Fakefish%203053 Webpack 和 React 小书 - gitbook https://fakefish.github.io/react-webpack-cookbook webpack https://github.com/webpack/webpack Webpack，101 入门体验 http://html-js.com/article/3009 webpack 入门教程 http://html-js.com/article/3113 基于 webpack 搭建前端工程解决方案探索 http://segmentfault.com/a/1190000003499526 React 原创实战视频教程 http://www.piliyu.com

vue

Vue http://cn.vuejs.org Vue 论坛 http://forum.vuejs.org Vue 入门指南 http://www.hubwiz.com/course/?type=Vue.js Vue 的一些资源索引 http://segmentfault.com/a/1190000000411057 awesome-vue https://github.com/vuejs/awesome-vue

移动端 API

99 移动端知识集合 https://github.com/jtyjty99999/mobileTech 移动端前端开发知识库 https://github.com/AlloyTeam/Mars 移动前端的一些坑和解决方法（外观表现） http://caibaojian.com/mobile-web-bug.html 【原】移动 web 资源整理 http://www.cnblogs.com/PeunZhang/p/3407453.html zepto 1.0 中文手册 http://mweb.baidu.com/zeptoapi zepto 1.0 中文手册 http://www.html-5.cn/Manual/Zepto zepto 1.1.2 http://www.css88.com/doc/zeptojs_api zepto 中文注释 http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html jqmobile 手册 http://app-framework-software.intel.com/api.php 移动浏览器开发集合 https://github.com/maxzhang/maxzhang.github.com/issues 移动开发大杂烩 https://github.com/hoosin/mobile-web-favorites

jQuery

jQuery API 中文文档 http://www.jquery123.com hemin 在线版 http://hemin.cn/jq css88 jq api http://www.css88.com/jqapi-1.9/on css88 jqui api http://www.css88.com/jquery-ui-api 学习 jquery http://learn.jquery.com jquery 源码查找 http://james.padolsey.com/jquery

D3

d3 Tutorials https://github.com/mbostock/d3/wiki/Tutorials Gallery https://github.com/mbostock/d3/wiki/Gallery lofter http://datavisual.lofter.com/post/40cf3a_188e535 iteye http://alanland.iteye.com/blog/1878595 ruanyifeng http://javascript.ruanyifeng.com/library/d3.html

Requriejs

Javascript 模块化编程（一）：模块的写法 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript 模块化编程（二）：AMD 规范 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html Javascript 模块化编程（三）：require.js 的用法 http://www.ruanyifeng.com/blog/2012/11/require_js.html RequireJS 入门（一） http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html RequireJS 入门（二） http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html RequireJS 进阶（三） http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html requrie 源码学习 http://www.cnblogs.com/yexiaochai/p/3632580.html requrie 入门指南 http://www.oschina.net/translate/getting-started-with-the-requirejs-library requrieJS 学习笔记 http://www.cnblogs.com/yexiaochai/p/3214926.html requriejs 其一 http://cyj.me/why-seajs/requirejs/ require backbone 结合 http://www.cnblogs.com/yexiaochai/p/3221081.html

Seajs

seajs http://seajs.org seajs 中文手册 http://cyj.me/why-seajs/zh

Less,sass

sass http://www.w3cplus.com/sassguide sass 教程 - sass 中国 http://www.sass.hk Sass 中文文档 http://sass.bootcss.com less http://less.bootcss.com

Markdown

Markdown 语法说明 (简体中文版 http://wowubuntu.com/markdown markdown 入门参考 https://github.com/LearnShare/Learning-Markdown/blob/master/README.md gitbook https://www.gitbook.com 国外的在线 markdown 可编辑成书 mdeditor https://www.zybuluo.com/mdeditor 一款国内的在线 markdown 编辑器 stackedit https://stackedit.io 国外的在线 markdown 编辑器，功能强大，同步云盘 mditor http://bh-lay.github.io/mditor 一款轻量级的 markdown 编辑器 lepture-editor https://github.com/lepture/editor markdown-editor https://github.com/jbt/markdown-editor 作业部落 https://www.zybuluo.com 功能强大，速度流畅，全平台同步

兼容性

esma 兼容列表 http://kangax.github.io/compat-table/es6 W3C CSS 验证服务 http://jigsaw.w3.org/css-validator/validator.html.zh-cn caniuse http://caniuse.com/#index csscreator http://csscreator.com/properties microsoft https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx 在线测兼容 - 移动端 http://www.responsinator.com emulators https://www.manymo.com/emulators

UI 相关

bootcss http://v3.bootcss.com MetroUICSS http://www.w3cplus.com/MetroUICSS semantic http://semantic-ui.com Buttons http://alexwolfe.github.io/Buttons kitecss http://hiloki.github.io/kitecss pintuer http://www.pintuer.com amazeui http://amazeui.org worldhello http://www.worldhello.net/gotgithub/index.html linuxtoy http://igit.linuxtoy.org/contents.html gitmagic http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn rogerdudler http://rogerdudler.github.io/git-guide/index.zh.html gitref http://gitref.justjavac.com book http://git-scm.com/book/zh gogojimmy http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic

其它 API

HTTP API 设计指南 http://segmentfault.com/bookmark/1230000002521721 javascript 流行库汇总 javascriptoo 验证 api http://niceue.com/validator/demo/index.php underscore 中文手册 http://www.css88.com/doc/underscore underscore 源码分析 http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031 underscore 源码分析 - 亚里士朱德的博客 http://yalishizhude.github.io/tags/underscore underscrejs en api http://underscorejs.org lodash - underscore 的代替品 https://lodash.com ext4api http://extjs-doc-cn.github.io/ext4api backbone 中文手册 http://www.csser.com/tools/backbone/backbone.js.html qwrap 手册 http://dev.qwrap.com/resource/js/_docs/youa/#/qw/base/loadJs.htm 缓动函数 http://easings.net/zh-cn svg 中文参考 http://www.w3school.com.cn/svg/svg_reference.asp svg mdn 参考 https://developer.mozilla.org/en-US/docs/Web/SVG svg 导出 canvas https://github.com/gabelerner/canvg svg 导出 png https://github.com/exupero/saveSvgAsPng ai-to-svg http://www.zamzar.com/convert/ai-to-svg localStorage 库 https://github.com/machao/localStorage

图表类

Highcharts 中文 API http://www.hcharts.cn/api/index.php Highcharts 英文 API http://api.highcharts.com/highcharts ECharts 百度的图表软件 http://echarts.baidu.com/ 高德地图 http://lbs.amap.com/api 开源的矢量图脚本框架 http://paperjs.org svg 地图 http://jvectormap.com

正则

JS 正则表达式元字符 http://segmentfault.com/a/1190000002471140 正则表达式 30 分钟入门教程 http://deerchao.net/tutorials/regex/regex.htm MDN - 正则表达式 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions ruanyifeng - RegExp 对象 http://javascript.ruanyifeng.com/stdlib/regexp.html 小胡子哥 - 进阶正则表达式 http://div.io/topic/764?page=1 is.js https://github.com/Cedriking/is.js/blob/master/is.js 正则在线测试 http://regexper.com

前端

通过分析 github 代码库总结出来的工程师代码书写习惯 http://alloyteam.github.io/CodeGuide HTML&CSS 编码规范 by @mdo http://codeguide.bootcss.com 团队合作的 css 命名规范 - 腾讯 AlloyTeam 前端团队 http://www.alloyteam.com/2011/10/css-on-team-naming/ 前端编码规范之 js - by yuwenhui http://yuwenhui.github.io 前端编码规范之 js - by 李靖 http://www.cnblogs.com/hustskyking/p/javascript-spec.html 前端开发规范手册 http://zhibimo.com/read/Ashu/front-end-style-guide Airbnb JavaScript 编码规范（简体中文版） https://github.com/yuche/javascript#table-of-contents AMD 与 CMD 规范的区别 http://www.zhihu.com/question/20351507 AMD 与 CMD 规范的区别 http://www.cnblogs.com/tugenhua0707/p/3507957.html KISSY 源码规范 http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html bt 编码规范 http://codeguide.bootcss.com 规范加强版 https://github.com/Suxiaogang/Code_Guide 前端代码规范 及 最佳实践 http://blog.jobbole.com/79075 百度前端规范 http://coderlmn.github.io/code-standards 百度前端规范 http://isobar-idev.github.io/code-standards 百度前端规范 http://zhuanlan.zhihu.com/fuyun/19884834 ECMAScript6 编码规范—广发证券前端团队 https://github.com/gf-rd/es6-coding-style JavaScript 风格指南 / 编码规范（Airbnb 公司版） http://blog.jobbole.com/79484 网易前端开发规范 http://nec.netease.com/standard css 模块 http://www.75team.com/archives/1049 前端规范资源列表 https://github.com/ecomfe/spec

PHP

最流行的 PHP 代码规范 http://segmentfault.com/a/1190000000443795 最流行的 PHP 代码规范 https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md

各大公司开源项目

Facebook Projects https://code.facebook.com/projects/web 百度 web 前端研发部 http://fex.baidu.com 百度 EFE http://efe.baidu.com 百度 github https://github.com/fex-team alloyteam http://www.alloyteam.com alloyteam-github http://alloyteam.github.io alloyteam-AlloyGameEngine https://github.com/AlloyTeam/AlloyGameEngine AlloyDesigner http://alloyteam.github.io/AlloyDesigner 即时修改，即时保存，设计稿较正，其它开发辅助工具 H5 交互页编辑器 AEditor 介绍 http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao H5 动画交互页开发的工具介绍 AEditor http://aeditor.alloyteam.com H5 动画交互页开发的工具 maka http://forum.maka.im/wordpress 值得订阅的 weekly https://github.com/fenbility/weekly-feed 腾讯 html5 http://cube.qq.com 奇舞团开源项目 http://75team.github.io Qunar UED http://ued.qunar.com Scrat http://scrat.io

常用

ieBetter.js - 让 IE6-IE8 拥有 IE9+,Chrome 等浏览器特性 http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome 模拟键盘 http://mottie.github.io/Keyboard 拼音 https://github.com/hotoo/pinyin 中国个人身份证号验证 https://github.com/mc-zone/IDValidator

算法

数据结构与算法 JavaScript 描述. 章节练习 https://github.com/Ralph-Wang/algorithm.in.js 常见排序算法（JS 版） https://github.com/twobin/twobinSort 经典排序 https://github.com/luofei2011/jsAgm/blob/master/js/sort.js 常见排序算法 - js 版本 https://github.com/hechangmin/jssort JavaScript 算法与数据结构 精华集 https://github.com/lightningtgc/JavaScript-Algorithms 面试常考算法题精讲 http://www.nowcoder.com/live/courses

移动端

fastclick https://github.com/ftlabs/fastclick no-click-delay https://github.com/mmastrac/jquery-noclickdelay 【敏捷开发】Android 团队开发规范 http://www.cnblogs.com/lcw/p/3619181.html Android 开发规范与应用 http://www.jianshu.com/p/4390f4fe19b3 ionic https://github.com/ychow/ionic-guide

JSON

模拟生成 JSON 数据 http://beta.json-generator.com 返回跨域 JSONAPI http://jsonp.afeld.me

焦点图

myfocus https://github.com/koen301/myfocus myfocus - 官方演示站 http://www.chhua.com/myfocus SuperSlidev2.1 — 大话主席 http://www.superslide2.com soChange http://www.bujichong.com/sojs/soChange/index.html

Ext, EasyUI, J-UI 及其它各种 UI 方案

extjs https://www.sencha.com/products/extjs ext4 英文 api http://docs.sencha.com/extjs/4.0.7 ext4 中文 api http://extjs-doc-cn.github.io/ext4api jquery easyui 未压缩源代码 http://jquery-easyui.googlecode.com/svn/trunk/src J-UI http://jui.org MUI - 最接近原生 APP 体验的高性能前端框架 http://dcloudio.github.io/mui Amaze UI 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org 淘宝 HTML5 前端框架 http://m.sui.taobao.org KISSY - 阿里前端 JavaScript 库 http://docs.kissyui.com 网易 Nej - Nice Easy Javascript http://nej.netease.com Kendo UI MVVM Demo http://demos.telerik.com/kendo-ui/mvvm/index Bootstrap http://www.bootcss.com Smart UI http://smartui.chinamzz.com 雅虎 UI - CSS UI http://developer.yahoo.com/yui/grids

页面 社会化 分享功能

百度分享 http://share.baidu.com pc 端 JiaThis http://jiathis.com pc 端 社会化分享组件 http://developer.baidu.com/soc/share 移动端 ShareSDK 轻松实现社会化功能 http://www.mob.com/#/index 移动端 友盟分享 http://dev.umeng.com/social/android/quick-integration 移动端

富文本编辑器

功能齐全 tinymce https://www.tinymce.com 百度 ueditor http://ueditor.baidu.com/website 经典的 ckeditor http://ckeditor.com 经典的 kindeditor http://kindeditor.net wysiwyg http://www.bootcss.com/p/bootstrap-wysiwyg 一个有情怀的编辑器。Bach’s Editor http://integ.github.io/BachEditor tower 用的编辑器 https://github.com/mycolorway/simditor summernote 编辑器 https://github.com/summernote/summernote html5 编辑器 http://neilj.github.io/Squire XEditor http://lab.hustlzp.com/XEditor wangEditor https://github.com/wangfupeng1988/wangEditor

前端概述

前端工具大全 http://www.awesomes.cn 什么是前端工程化 https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#

Gulp

Gulp 官网 http://gulpjs.com Gulp 中文网 http://www.gulpjs.com.cn gulp 资料收集 https://github.com/Platform-CUF/use-gulp Gulp：任务自动管理工具 - ruanyifeng http://javascript.ruanyifeng.com/tool/gulp.html Gulp 插件 http://gulpjs.com/plugins Gulp 探究折腾之路 (I) http://www.jeffjade.com/2015/11/25/2015-11-25-toss-gulp/ Gulp 折腾之路 (II) http://www.jeffjade.com/2016/01/19/2016-01-19-toss-gulp/ Gulp 不完全入门教程 http://www.ido321.com/1622.html 为什么使用 gulp? https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33 Gulp 安装及配合组件构建前端开发一体化 http://www.dbpoo.com/getting-started-with-gulp Gulp 入门指南 https://github.com/nimojs/gulp-book Gulp 入门指南 - nimojs https://github.com/nimojs/blog/issues/19 Gulp in Action http://www.imooc.com/video/5692 Gulp 开发教程（翻译） http://www.w3ctech.com/topic/134 前端构建工具 gulpjs 的使用介绍及技巧 http://www.cnblogs.com/2050/p/4198792.html

Grunt

gruntjs http://gruntjs.com Grunt 中文网 http://www.gruntjs.net

Fis

fis 官网 http://fex-team.github.io/fis-site/index.html fis http://fis.baidu.com

pc 图轮

单屏轮播 sochange http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 左右按钮多图切换 http://bxslider.com/examples/carousel-demystified fullpage 全屏轮播 https://github.com/alvarotrigo/fullPage.js

移动端图轮

无缝切换 http://www.swipejs.com 滑屏效果 http://www.idangero.us/swiper 全屏 fullpage https://github.com/peunzhang/fullpage 单个图片切换 https://github.com/qiqiboy/touchslider 单个全屏切换 https://github.com/peunzhang/slip.js 百度的切换库 http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group 单个全屏切换 https://github.com/peunzhang/iSlider 滑屏效果 https://github.com/saw/touch-interfaces 旋转拖动设置 http://baijs.com/tinycircleslider 类似于 swipe 切换 http://touchslider.com 支持多种形式的触摸滑动 http://www.swiper.com.cn/demo/index.html 滑屏效果 https://github.com/joker-ye/main/blob/master/wap/index.html 大话主席 pc 移动图片轮换 http://www.superslide2.com 滑屏效果 https://github.com/hahnzhu/parallax.js 基于 zepto 的 fullpage https://github.com/yanhaijing/zepto.fullpage [WebApp] 定宽网页设计下，固定宽度布局开发 WebApp 并实现多终端下 WebApp 布局自适应 http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html 判断微信客户端的那些坑 http://loo2k.com/blog/detecting-wechat-client 可以通过 javascript 直接调用原生分享的工具 https://github.com/JefferyWang/nativeShare.js JiaThis 分享到微信代码 http://www.jiathis.com/help/html/weixin-share-code 聊聊移动端跨平台开发的各种技术 http://fex.baidu.com/blog/2015/05/cross-mobile 前端自动化测试 http://www.zhihu.com/question/29922082 多种轮换图片 http://ajccom.github.io/niceslider 滑动侧边栏 https://mango.github.io/slideout

文件上传

百度上传组件 http://fex.baidu.com/webuploader 上传 https://blueimp.github.io/jQuery-File-Upload flash 头像上传 http://www.hdfu.net 图片上传预览 http://www.dropzonejs.com 图片裁剪 http://elemefe.github.io/image-cropper 图片裁剪 - shearphoto http://www.shearphoto.com jQuery 图片处理 http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2

模拟 select

糖饼 select http://aui.github.io/popupjs/doc/selectbox.html flexselect https://github.com/rmm5t/jquery-flexselect 双 select http://loudev.com select2 http://select2.github.io

取色插件

类似 Photoshop 的界面取色插件 http://www.jq22.com/plugin/367 jquery color https://github.com/jquery/jquery-color 取色插件集合 http://www.oschina.net/project/tag/287/color-picker farbtastic 圆环＋正方形 https://github.com/mattfarina/farbtastic

城市联动

jquery.cityselect.js 基于 jQuery+JSON 的省市或自定义联动效果 http://www.ijquery.cn/?p=360

剪贴板

剪贴板 https://github.com/zeroclipboard/zeroclipboard clipboard 最新的剪切方案 http://zenorocha.github.io/clipboard.js 不是 Flash 的剪贴板 https://github.com/zenorocha/clipboard.js

简繁转换

简繁转换 https://github.com/BYVoid/OpenCC

表格 Grid

facebook 表格 http://facebook.github.io/fixed-data-table 类似于 Excel 编辑表格 - handsontable http://handsontable.com bootstrap-table 插件 http://bootstrap-table.wenzhixin.net.cn datatables https://www.datatables.net

在线演示

js 在线编辑 - runjs http://runjs.cn 各种开发语言的在线编辑 http://lab123.hubwiz.com/ js 在线编辑 - codepen http://codepen.io js 在线编辑 - jsfiddle http://jsfiddle.net java 在线编辑 - runjs http://ideone.com js 在线编辑 - hcharts http://code.hcharts.cn js 在线编辑 - jsdm http://jsdm.com sql 在线编辑 - sqlfiddle http://sqlfiddle.com mozilla 在线编辑器 https://thimble.mozilla.org

常规优化

Javascript 高性能动画与页面渲染 http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering 移动 H5 前端性能优化指南 http://isux.tencent.com/h5-performance.html 5173 首页前端性能优化实践 http://ued.5173.com/?p=1731 给网页设计师和前端开发者看的前端性能优化 http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers 复杂应用的 CSS 性能分析和优化建议 http://www.orzpoint.com/profiling-css-and-optimization-notes 张鑫旭——前端性能 张鑫旭——前端性能 前端性能监控总结 http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html 网站性能优化之 CSS 无图片技术 网站性能优化之 CSS 无图片技术 web 前端性能优化进阶路 web 前端性能优化进阶路 前端技术：网站性能优化之 CSS 无图片技术 http://my.eoe.cn/tuwandou/archive/4544.html 浏览器的加载与页面性能优化 http://www.baiduux.com/blog/2011/02/15/browser-loading 页面加载中的图片性能优化 http://www.w3ctech.com/p/1503 Hey——前端性能 Hey——前端性能 html 优化 html 优化 99css——性能 99css——性能 Yslow——性能优化 http://www.yslow.net/category.php?cid=20 YSLOW 中文介绍 http://www.cnblogs.com/yslow 转一篇 Yahoo 关于网站性能优化的文章，兼谈本站要做的优化 http://www.360ito.com/article/40.html Yahoo! 团队实践分享：网站性能 http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml 网站性能优化指南：什么使我们的网站变慢？ http://blog.jiasule.com/i/153 网站性能优化实践，减少加载时间，提高用户体验 http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html 浅谈网站性能优化 前端篇 http://www.umtry.com/archives/747.html 前端重构实践之如何对网站性能优化？ http://www.adinnet.cn/blog/designview/2012-7-12/678.html 前端性能优化：使用媒体查询加载指定大小的背景图片 http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9 网站性能系列博文 http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html 加载，不只是少一点点 http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml 前端性能的测试与优化 http://mzhou.me/article/95310 分享网页加载速度优化的一些技巧？ http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading 页面加载中的图片性能优化 http://www.f2es.com/images-bytes-opt web 前端优化 (基于 Yslow http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html 网站性能优化工具大全 https://www.qianduan.net/website-performance-optimization-tool.html 【高性能前端 1】高性能 HTML http://www.alloyteam.com/2012/10/high-performance-html 【高性能前端 2】高性能 CSS http://www.alloyteam.com/2012/10/high-performance-css 由 12306 谈谈网站前端性能和后端性能优化 http://coolshell.cn/articles/6470.html AlloyTeam——前端优化 AlloyTeam——前端优化 毫秒必争，前端网页性能最佳实践 http://www.cnblogs.com/developersupport/p/3248695.html 网站性能工具 Yslow 的使用方法 http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html 前端工程与性能优化（上）：静态资源版本更新与缓存 http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1 前端工程与性能优化（下）：静态资源管理与模板框架 http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2 HTTPS 连接的前几毫秒发生了什么 http://blog.jobbole.com/48369 Yslow http://uicss.cn/yslow/#more-12319 Essential Web Performance Metrics — A Primer, Part 1 http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1 Essential Web Performance Metrics — Part 2 http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2 YUISlide, 针对移动设备的动画性能优化 http://jayli.github.io/blog/data/2011/12/23/yuislide.html Improving Site Performance http://joelglovier.com/improving-site-performance 让网站提速的最佳前端实践 http://segmentfault.com/a/1190000000367899 Why Website Speed is Important http://sixrevisions.com/web-development/why-website-speed-is-important Need for Speed – How to Improve your Website Performance https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance 阿里无线前端性能优化指南 (Pt.1 加载期优化 https://github.com/amfe/article/issues/1

优化工具

JavaScript 性能分析新工具 OneProfile http://www.html-js.com/article/3083 JavaScript 堆内存分析新工具 OneHeap http://www.html-js.com/article/3091

在线工具

google 在线工具 https://developers.google.com/speed/pagespeed/insights 阿里测 http://www.alibench.com 阿里 - 免费测试服务 http://itest.aliyun.com 阿里 - F2etest 多浏览器兼容性测试解决方案 https://github.com/alibaba/f2etest js 性能测试 http://jsperf.com

前端架构

技术架构 http://www.zhihu.com/topic/19612641 前端架构 http://saito.im/note/The-Architecture-of-F2E 如何成为前端架构师 http://www.zhihu.com/question/24092572 关于前端架构 - 张克军 http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html 百度腾讯 offer 比较（腾讯游戏 VS 百度基础架构） http://www.zhihu.com/question/25583350

推荐作品

winter 代码片段需要翻墙 https://gist.github.com/wintercn 汇智网 - 使用 node.js 开发的网站 http://www.hubwiz.com 岑安作品集 https://github.com/hongru/hongru.github.com 当耐特 demo 集合 http://kmdjs.github.io 米空格 js 作品 http://www.laoshu133.com/Lab myFocus http://koen301.github.io SeaJS 组件库 http://panxuepeng.github.io/seajslib 颜海镜作品 http://yanhaijing.com/myProject 脚儿网作品 http://jo2.org/category/myworks javascript 个人作品 http://www.cnitblog.com/yemoo/category/3107.html 妙味的雷东升游戏作品 http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790 javascript 作品集 http://bbs.csdn.net/topics/380227212 云五笔，灰度产生生成工具 https://github.com/TooBug/works 项目主页 http://koen301.github.io 个性的作品主页 http://zaole.net 播放器 http://static.tingall.com/v2/player ucren js demos 集 http://ucren.com/blog/demos 智能社 http://www.zhinengshe.com/works_list.html 实例陈列架 http://demos.shizuwu.cn zoye demo http://zoye.sinaapp.com/demo 王员外 http://lab.yuanwai.wang 平凡 http://pingfan1990.sinaapp.com jyg 游戏案例 http://www.lovewebgames.com 很多 jquery 插件 http://www.helloweba.com/list.html 不羁虫 - soJs 作品系列 http://www.bujichong.com/sojs/api/index.html frozenui http://frozenui.github.io/case.html 黑白棋 http://js-game.github.io/othello fromone http://yansm.github.io/fromone/index.html pazguille http://pazguille.me Html5 VideoPlayer https://github.com/zmmbreeze/DeadSimpleVideoPlayer Proton 烟花 http://a-jie.github.io/Proton/#example

简历模板

不错的个人简历 http://learnshare.github.io/about/index.html 简历 http://hcy2367.github.io/resume 张伦 http://ncuey.sinaapp.com/CrispElite/ 简历 https://github.com/hacke2/ResumeSample 翁天信 http://blog.dandyweng.com/2013/07/how-my-website-was-created 动画方式的简历 http://www.webhek.com/misc/interactive-resume 组件丰富简历 http://www.linqing07.com/resume.html 简历池 http://www.mojianli.com/resume/view haorooms 博客 http://www.haorooms.com/about Justin Young http://cv.youngdze.com

面试题

那几个月在找工作（百度，网易游戏） http://www.nowcoder.com/discuss/3196 2014 最新面试题 http://www.html-js.com/article/1743 阿里前端面试题 http://www.w3cfuns.com/thread-5598563-2-1.html 2016 校招内推 — 阿里巴巴前端 — 三面面试经历 http://www.cnblogs.com/imwtr/p/4685546.html 腾讯面试题 http://www.w3cfuns.com/article-5599657-1-1.html 年后跳槽那点事：乐视 + 金山 + 360 面试之行 http://www.cnblogs.com/lvdabao/p/3660707.html 阿里前端面试题上线 http://fatesinger.com/2722.html 拉勾网 js 面试题 http://www.cnblogs.com/52cik/p/js-question-lg.html 前端面试 http://www.cnblogs.com/allenxing/p/3724382.html Web 开发笔试面试题 大全 http://mianshiti.diandian.com前端开发面试题 http://segmentfault.com/a/1190000000465431 2014 最新前端面试题 https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions 百度面试 https://github.com/fex-team/interview-questions 面试题 http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=51&filter=typeid&typeid=177 前端工作面试问题 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese 前端开发面试题 http://segmentfault.com/a/1190000000465431 5 个经典的前端面试问题 5 个经典的前端面试问题 最全前端面试问题及答案总结 http://segmentfault.com/a/1190000002562454 如何面试一名前端开发工程师？ http://www.html-js.com/article/Large-search-front-team-column%202961 史上最全 前端开发面试问题及答案整理 https://github.com/hawx1993/Front-end-Interview-questions 前端实习生面试总结 http://www.cnblogs.com/xiaoruo/p/4665163.html 史上最全 前端开发面试问题及答案整理 https://github.com/hawx1993/Front-end-Interview-questions BAT 及各大互联网公司 2014 前端笔试面试题：JavaScript 篇 http://blog.jobbole.com/78738 前端开发面试题大收集 https://github.com/paddingme/Front-end-Web-Development-Interview-Question 收集的前端面试题和答案 https://github.com/qiu-deqing/FE-interview 如何面试前端工程师 http://www.zhihu.com/question/19568008 前端开发面试题 https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md 牛客网 - 笔试面经 http://www.nowcoder.com/discuss?type=2

iconfont

中文字体 http://www.zhihu.com/question/21253343 淘宝字库 http://iconfont.cn 字体 http://mux.alimama.com/fonts 制作教程 http://iconfont.cn/help/platform.html zhangxinxu-icommon http://www.zhangxinxu.com/wordpress/?s=icomoon icommon https://icomoon.io/app 用字体在网页中画 ICON 图标 (推荐教程 http://imooc.com/learn/243 字体压缩工具 http://font-spider.org

Fiddler

Fiddler 调式使用知多少 (一深入研究 http://www.cnblogs.com/tugenhua0707/p/4623317.html 微信 fiddle http://www.cnblogs.com/strick/p/4570006.html 微信 fiddle http://gaoboy.com/article/26.html

Chrome

Google Chrome 官方 https://developer.chrome.com/devtools Chrome - 基础 http://www.cnblogs.com/constantince/p/4565261.html Chrome - 进阶 http://www.cnblogs.com/constantince/p/4579121.html Chrome - 性能 http://www.cnblogs.com/constantince/p/4585983.html Chrome - 性能进阶 http://www.cnblogs.com/constantince/p/4607497.html Chrome - 移动 http://www.cnblogs.com/constantince/p/4624241.html Chrome - 使用技巧 http://www.cnblogs.com/liyunhua/p/4544738.html Chrome - Console 控制台不完全指南 http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html Chrome - Workspace 使浏览器变成 IDE http://c7sky.com/chrome-devtools-workspace.html network 面板 http://www.html-js.com/article/Nothing-blind%202975 chrome 开发工具快捷键 http://anti-code.com/devtools-cheatsheet chrome 调试工具常用功能整理 http://www.html-js.com/article/2327 Chrome 开发工具 Workspace 使用 http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace Chrome 神器 Vimium 快捷键学习记录 http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html sass 调试 - w3cplus http://www.w3cplus.com/sassguide/debug.html 如何更专业的使用 Chrome 开发者工具 - w3cplus http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html chrome 调试 canvas http://sentsin.com/web/253.html chrome profiles1 https://developer.chrome.com/devtools/index chrome profiles2 http://h5dev.uc.cn/article-25-1.html chrome profiles3 http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles chrome 移动版调试 https://developer.chrome.com/devtools/docs/mobile-emulation chrome 调试 http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool chrome 的调试 http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html chrome console 命令详解 https://developer.chrome.com/devtools/docs/commandline-api 查看事件绑定 1 http://www.cnblogs.com/leonkao/p/3809655.html 查看事件绑定 2 http://www.cnblogs.com/xiaoyao2011/p/3447421.html 神器——Chrome 开发者工具 (一 http://segmentfault.com/a/1190000000683599 奇趣百科性能优化 (Chrome DevTools 中的 Timeline Profils 等工具使用介绍 https://xinranliu.me/2015-05-22-qiqu-performance chrome 开发者工具的 15 个小技巧 http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html Chrome 开发者工具不完全指南 http://1ke.co/course/361 Chrome 开发者工具使用技巧 http://segmentfault.com/a/1190000003882567

Firebug

firebug 视频教程 http://www.imooc.com/learn/137 firefox 模拟器 https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE console.log 命令详解 http://www.cnblogs.com/ctriphire/p/4116207.html Firebug 入门指南 http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html Firebug 控制台详解 http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

移动, 微信调试

浏览器端调试安卓 https://openstf.github.io 移动端前端开发调试 http://yujiangshui.com/multidevice-frontend-debug 使用 Chrome 远程调试 Android 设备 https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md mac 移动端调试 http://plus.uc.cn/document/webapp/doc5.html mac 移动端调试 http://www.mihtool.com 无线调试攻略 http://thx.github.io/mobile/debugging-in-mobile 无线调试攻略 http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile 屌爆了, 完美调试 微信 webview(x5 http://www.jianshu.com/p/ccf124f1f74b 微信调试的那些事 微信调试的那些事 远程 console http://jsconsole.com 微信调试工具 http://blog.qqbrowser.cc 各种真机远程调试方法汇总 https://github.com/jieyou/remote_inspect_web_on_real_device

iOS Simulator

Simulator iOS_Simulator_Guide-Introduction iOS Simulator 的介绍和使用心得 http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary

img

loading img http://preloaders.net/en/circular 智图 - 图片优化平台 http://zhitu.isux.us 在线 png 优化 https://tinypng.com

生成二维码

生成二维码 http://cli.im

浏览器同步

puer https://github.com/leeluolee/puer liveReload http://livereload.com f5 http://getf5.com File Watchers http://geek100.com/2608

JavaScript

• JavaScript 教程
• ES6 入门教程
• JavaScript 30 使用原生 JavaScript 在 30 天内完成 30 个项目
• Codewars 和其他人一起完成真实的代码挑战，提升你的技术
• JavaScript 教程 现代 JavaScript 教程
• 优秀的JS代码规范
• 开发的宝藏项目
• TypeScript 教程：https://github.com/xcatliu/typescript-tutorial
• Node.js学习 https://blog.poetries.top/node-learning-notes/

CSS

• css的各种效果实现 css的各种效果实现（尤其是动画效果）
• CSS Inspiration 在这里找到写 CSS 的灵感
• CSS 常用样式 总结一些常用的 CSS 样式
• Animate.css 开箱即用的跨浏览器 CSS 动画效果
• animista 按需定制 CSS 动画效果
• SpinKit 汇集了实现各种加载效果的 CSS 代码片段
• CSS Minifier 在线 CSS 代码极简化/压缩工具
• https://sass.bootcss.com/docu... Sass 是成熟、稳定、强大的 CSS 扩展语言
• https://less.bootcss.com/ 一种将css赋予了动态语言特性的动态样式语言
• https://stylus-lang.com/ 富有表现力、动态、健壮的CSS

算法

• JavaScript 算法与数据结构：https://github.com/trekhleb/javascript-algorithms
• leetcode解题之路：https://github.com/azl397985856/leetcode
• 五分钟学算法：https://github.com/MisterBooo/LeetCodeAnimation
• LeetCode题目的思路 https://github.com/MisterBooo/LeetCodeAnimation 用动画的形式呈现解LeetCode题目的思路。
• 极客时间 App 的《数据结构与算法之美》
• GitHub 上 170K+ Star 的前端学习的数据结构与算法项目 https://github.com/biaochenxu...
• JavaScript 数据结构与算法之美 - 十大经典排序汇总: https://github.com/biaochenxuying/blog/issues/42
• 算法可视化工具 https://github.com/algorithm-visualizer/algorithm-visualizer 算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法。
• 算法可视化来源 https://visualgo.net/en
• 观察算法的工作方式 https://github.com/skidding/illustrated-algorithms 变量和操作的可视化表示增强了控制流和实际源代码。

五分钟学算法

地址：https://www.cxyxiaowu.com/

LeetCode

地址：https://leetcode-cn.com/problemset/all/

代码随想录

地址：https://www.programmercarl.com/

前端面试

• 前端面试常考问题整理，按模块知识点分类：https://blog.poetries.top/FE-Interview-Questions/
• 前端开发面试题: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
• web前端面试宝典：https://github.com/h5bp/Front-end-Developer-Interview-Questions/
• 掘金前端面试题合集：https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md
• 前端面试图谱：https://yuchengkai.cn/docs/zh/
• GitHub 上 100K+ Star 的前端面试开源项目汇总 https://github.com/biaochenxu...

资讯

• 36氪：https://36kr.com/
• 虎嗅网：https://www.huxiu.com/
• 利器：https://liqi.io/

采访优秀的创造者，邀请他们来分享工作时所使用的工具。

• 湾区日报：https://wanqu.co/

每天推送 5 篇优质英文文章。

• Solidot：https://www.solidot.org/
• 品玩：https://www.pingwest.com/
• 极客公园：http://www.geekpark.net/

前端周刊

• WecTeam 前端周刊：https://github.com/wecteam/weekly
• Js中文网周刊：https://www.javascriptc.com/category/javascript-weekly
• 政采云 前端周刊：https://weekly.zoo.team/

团队

• 腾讯AlloyTeam：http://www.alloyteam.com/
• 腾讯社交用户体验ISUX：https://isux.tencent.com/
• 淘宝FED | 淘宝前端团队：http://taobaofed.org/
• 阿里巴巴国际UED：http://www.aliued.com/
• 京东 | 凹凸实验室：https://aotu.io/
• 饿了么前端:https://zhuanlan.zhihu.com/ElemeFE
• 百度前端研发部FEX：http://fex.baidu.com/
• 360 | 奇舞团：https://75team.com/
• 知道创宇FED：https://knownsec-fed.com/

前端大牛

阮一峰（蚂蚁金服）

• GitHub：https://github.com/ruanyf
• 博客：http://www.ruanyifeng.com/blog/

尤雨溪

• GitHub：https://github.com/yyx990803
• 博客：http://blog.evanyou.me/
• 知乎：https://www.zhihu.com/people/evanyou

玉伯

• GitHub：https://github.com/lifesinger
• 博客：https://github.com/lifesinger/blog
• 知乎：https://www.zhihu.com/people/lifesinger

司徒正美（去哪儿）

• GitHub：https://github.com/RubyLouvre
• 博客：http://www.cnblogs.com/rubylouvre/
• 知乎：https://www.zhihu.com/people/si-tu-zheng-mei

张鑫旭（腾讯）

• GitHub：https://github.com/zhangxinxu
• 博客：https://www.zhangxinxu.com/
• 知乎：https://www.zhihu.com/people/iamzhangxinxu

迷渡

• GitHub：https://github.com/justjavac
• 知乎：https://www.zhihu.com/people/justjavac.com

羡辙 | Ovilia

• GitHub：https://github.com/Ovilia
• 知乎：https://www.zhihu.com/people/ovilia

云谦（陈成）

• GitHub：https://github.com/sorrycc
• 博客：https://sorrycc.com/

云谦装了啥：https://github.com/sorrycc/awesome-tools

偏右

• GitHub：https://github.com/afc163
• 知乎：https://www.zhihu.com/people/afc163

黄峰达/Phodal Huang（ThoughtWorks）

• GitHub：https://github.com/phodal
• 博客：https://www.phodal.com/
• 知乎：https://www.zhihu.com/people/phodal

贺师俊/Hax（百姓网）

• GitHub：https://github.com/hax
• 博客：http://johnhax.net/
• 知乎：https://www.zhihu.com/people/he-shi-jun

大漠

链接：

• GitHub：https://github.com/airen

大漠的GitHub上没啥东西。

• 博客：https://www.w3cplus.com
• 知乎：https://www.zhihu.com/people/w3cplus

介绍：

常用昵称“大漠”，W3CPlus创始人，目前就职于淘宝。对HTML5、CSS3和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3和动画的研究，是国内最早研究和使用CSS3和CSS处理器技术的一批人。现在主要在探讨学习JavaScript、React和Vue相关技术知识。CSS、CSS处理器和Web动画中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

EGOIST

• 博客：https://egoist.sh/
• GitHub：https://github.com/egoist

冴羽

链接：

• GitHub：https://github.com/mqyqingfeng
• 博客：https://github.com/mqyqingfeng/Blog
• 知乎：https://www.zhihu.com/people/qing-feng-yi-yang

李靖/小胡子哥（淘宝网）

• GitHub：https://github.com/barretlee
• 博客：https://www.barretlee.com/
• 知乎：https://www.zhihu.com/people/barretlee/

cangdu

• GitHub：https://github.com/bailicangdu

Jackson Tian

• GitHub：https://github.com/JacksonTian
• 博客：http://jacksontian.org/

题叶（饿了么、前 Teambition）

• GitHub：https://github.com/jiyinyiyong
• 博客：http://tiye.me/

杨健（今日头条）

• GitHub：https://github.com/hardfist
• 知乎：https://www.zhihu.com/people/hardfist

流形

（阿里巴巴数据技术与产品部前端团队负责人）

• 知乎：https://www.zhihu.com/people/arcthur/

GitHub 作者推荐

晴小篆

• GitHub：https://github.com/yanlele

MuYunyun

• GitHub：https://github.com/MuYunyun

技术社区

• GitHub：https://github.com/ 高质量的内容创作和分享平台

• stackoverflow：https://stackoverflow.com/ 一个回答技术问题的网站

• 掘金：https://juejin.im/ 目前来看，国内的很多优质前端文章，都在掘金上。

• 博客园：https://www.cnblogs.com/ 一个很纯粹的技术博客平台。

• 知乎：https://www.zhihu.com/ 很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就非常活跃。

• CSDN：https://www.csdn.net/ 广告太多，但奈何你这么老牌。

• segmentfault：https://segmentfault.com/ 比较低调的技术博客平台。

• v2ex：https://www.v2ex.com/ 一个关于分享和探索的地方

• http://cnodejs.org/ Node.js专业中文社区

• https://www.smashingmagazine.... 一个web技术类的博客杂志站点

• https://www.jstips.co/ 每天推出一个JS技巧的网站

• W3cplus：https://www.w3cplus.com/ 是一个致力于推广国内前端行业的技术博客

• 印记中文 - https://docschina.org/ 印记中文是最权威是技术中文文档社区

• 收集优质的中文前端博客：https://github.com/FrankFang/best-chinese-front-end-blogs

• 掘金

• 地址：https://juejin.cn/

• DEV Community

• 地址：https://dev.to/

• WebDeveloper.com Forums

• https://www.webdeveloper.com/

• Bits and Pieces

• 地址：https://blog.bitsrc.io/

博客团队

• 腾讯AlloyTeam：http://www.alloyteam.com/
• 腾讯社交用户体验ISUX：https://isux.tencent.com/
• 淘宝FED | 淘宝前端团队：http://taobaofed.org/
• 阿里巴巴国际UED：http://www.aliued.com/
• 京东 | 凹凸实验室：https://aotu.io/
• 饿了么前端:https://zhuanlan.zhihu.com/ElemeFE
• 百度前端研发部FEX：http://fex.baidu.com/
• 360 | 奇舞团：https://75team.com/
• 美团技术团队: https://tech.meituan.com/

个人博客

阮一峰的网络日志

地址：https://www.ruanyifeng.com/blog/

秋风的笔记

地址：https://qiufeng.blue/

廖雪峰的官方网站

地址：https://www.liaoxuefeng.com/

GitHub 统计

• GitHub 中文排行榜、高分优秀中文项目：https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts

• GitHub 全球排名：https://gitstar-ranking.com/ 这个排名很权威。如果你的项目超过 10k star，就能上榜，跻身全球 GitHub 项目前1000名。

• GitHub 中文排行榜、高分优秀中文项目：https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts

中国区的高分项目，都在这里了。

• GitHub 全球排名：https://gitstar-ranking.com/

这个排名很权威。如果你的项目超过 10k star，就能上榜，跻身全球 GitHub 项目前1000名。

• GitHub trending（官网推荐）：https://github.com/trending

你的项目要是能上 GitHub trending，绝对火得一塌糊涂。

2019-12备注：现在的 GitHub trending 已经不是严格按照新增的 star 数来排行了。所以说，这个排名，也不是那么权威了。

• GitHub 中国区排名：https://githuber.cn/search?language=JavaScript

这个网站虽然比较小众，但排名还是相对比较准的。

• GitHub 中国区排名：http://githubrank.com/

这个排名很久没更新了，早就不准了；而且还经常打不开。

构建

• NPM：https://www.npmjs.com/
• Yarn：https://yarnpkg.com/zh-Hans/
• Webpack：https://webpack.js.org/
• Gulp：https://www.gulpjs.com.cn/
• Babel：https://babeljs.io/
• ESLint：https://cn.eslint.org/ 可组装的JavaScript和JSX检查工具。
• PostCSS：https://www.postcss.com.cn/ 用 JavaScript 工具和插件转换 CSS 代码的工具

部署

• GitHub Pages GitHub 提供的免费静态网站托管服务
• Netlify 30 秒内部署你的网站
• Vercel 快速部署你的网站
• Surge 只需一个命令就可以发布你的网站
• Heroku 在云端构建、运行你的应用

静态站点搭建工具

• Hexo：https://hexo.io/zh-cn/
• VuePress：https://www.vuepress.cn/
• GitBook：https://www.gitbook.com/

前端代码规范

• 腾讯的 http://tgideas.qq.com/doc/index.html

• 京东的 https://guide.aotu.io/index.html

• Bootstrap编码规范：https://codeguide.bootcss.com/

• es6编程风格：http://es6.ruanyifeng.com/#docs/style

• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript

• ESLint 检测、修正 JavaScript 代码的问题

• Prettier 格式化 JavaScript 代码

调试抓包

• whistle：https://wproxy.org/whistle/ 代理抓包工具，很好很强大。
• Fiddler：https://www.telerik.com/fiddler 代理抓包工具。
• Easy Mock：https://www.easy-mock.com

开发工具

• VS Code：https://code.visualstudio.com/
• Sublime Text：https://www.sublimetext.com/
• WebStorm：https://www.jetbrains.com/webstorm/
• Atom：https://atom.io/

在线工具

• CodePen - https://codepen.io/ 在线代码测试工具

• Can I use - https://caniuse.com/ Web前端兼容性列表

• TinyPNG - https://tinypng.com/ PNG/JPG 图片在线压缩利器

• CNZZ站点统计 - https://www.umeng.com/ 国内常用的站点统计工具

综合类

• CanIUse：https://caniuse.com/

浏览器兼容性查询。前端同学必须要知道。

• 国家企业信用信息公示系统：http://www.gsxt.gov.cn

通过这个网站，我们可以查到任何一家公司的基本信息（成立时间、法定代表人等）。如果你在这个网站上没有找到某公司的信息，放心吧，这个公司一定是个骗子。

• ProcessOn：https://www.processon.com/

在线制作流程图。推荐。

• 幕布：https://mubu.com

极简大纲笔记、一键生成思维导图。非常好用。

• JSON格式化：http://www.bejson.com/
• 草料二维码：https://cli.im/
• 短链生成：http://www.sina.lt
• GitHub短网址：https://git.io/
• 图片压缩：https://tinypng.com/

熊猫压缩。压缩后图片清晰度不会有太大变化。

• 图片压缩：https://www.yasuotu.com/
• 在线PS：https://www.photopea.com/
• 图片在线裁剪：https://www.asqql.com/gifc/
• 多数据源IP地址查询：https://haoip.cn/
• Gif添加字幕：http://www.yingjingtu.com/
• Photoshop的投影参数转换为 CSS代码：https://psd2css.mezw.com/

将Photoshop设计文件图层中的混合选项参数快速转换为CSS3代码，以节省前端开发人员的时间和精力。

• Get Emoji：https://emoji.svend.cc/
• 图片转Ascii：http://picascii.com/
• 视频转GIF：https://github.com/vvo/gifify
• OCR文字识别：https://app.xunjiepdf.com/ocr

图片类

• 图片转base64：http://imgbase64.duoshitong.com/

前端大会

• Vue.js开发者大会 https://fequan.com/ Vue.js开发者大会中国
• 中国JS开发者大会 https://jsconfchina.com/ 一场专注于JavaScript和Node.js技术的国际性大会
• 中国CSS开发者大会 https://css.w3ctech.com/ 提高css开发姿势的大会
• D2前端技术论坛 http://d2forum.alibaba-inc.com/ 阿里巴巴举办，分享技术的乐趣，探讨行业的发展

图标

• Font Awesome：http://www.fontawesome.com.cn/ 网站开发最流行的图标集
• Feather 简洁美观的开源图标
• Ionicons 精心绘制的开源图标
• Simple Icons 常见品牌的 SVG 图标
• Material Design Icons 轻快、精美的符号图标，包括常见操作和事项
• Tabler Icons 681 枚可定制的开源 SVG 图标
• Iconfont：https://www.iconfont.cn/
• icomoon：https://icomoon.io/
• EasyIcon：https://www.easyicon.net/
• icons8：https://icons8.cn/
• IconStore：https://iconstore.co/
• iconninja：http://www.iconninja.com/

色彩

• Material Design Colors Material Design 色彩
• Flat UI Colors 2 14 组配色、280 种颜色
• Color Hunt 分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感
• Color Space 配色方案、CSS 颜色渐变生成工具
• uiGradients 美观的颜色渐变
• Colors and Fonts 色彩和字体工具
• Coolors 配色方案生成工具

插画

• Undraw 持续更新的精美的 SVG 插画集
• manypixels 免费插画集
• IRA Design 通过调配渐变色、搭配手绘组件定制插画
• Free Illustrations by Lukasz Adam 免费 SVG 插画
• Blobmaker 在线 SVG 形状生成器
• Get Waves 在线 SVG 波形生成器
• 零基础如何学习前端，前端第一步要做什么以及开发工具讲解_

图片

• Unsplash 可供免费使用的图片
• Pexels 精美的免费图片和视频
• Burst 免费高分辨率图片，可用于网站和商业用途
• ISO Republic 使用 CC0 许可的免费高分辨率图片和视频
• Pixabay 令人惊叹的免费（公共领域）图片和视频站点
• StockSnap.io 精美的免费图片，同样使用 CC0 许可
• Photopea 在线图片编辑工具，支持大量高级功能
• Online Image Compressor 在线图片压缩工具，一次可以压缩多达 20 张图片
• Bulk Resize Photos 最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器）

其他

• 单元测试：https://github.com/goldbergyoni/javascript-testing-best-practices
• web.dev 评测网站性能（基于 Lighthouse）
• Shape Divider 定制各种形状的网站分区 SVG 的工具
• GTmetrix 网页性能分析工具
• Can I Use 前端技术的浏览器支持情况
• Carbon 代码转图片工具
• Wappalyzer 检测某个网站使用的技术栈

设计工具

• 墨刀：原型设计工具。网址：https://modao.cc/
• 蓝湖：一款产品文档和设计图的在线协作平台。网址：https://lanhuapp.com
• PxCook（像素大厨）：高效易用的自动标注工具。软件下载链接：https://www.fancynode.com.cn/pxcook

在线 PPT 制作

nodePPT nodePPT Cleaver 快速制作网页 PPT http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ impress.js http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html PPT https://github.com/ksky521/nodePPT reveal https://github.com/hakimel/reveal.js slippy https://github.com/Seldaek/slippy

设计素材

• 设优 SHEUI：http://www.sheui.com/Contact/

前端导航网站

界面清爽的前端导航 http://uxbees.com/index.html 前端导航 http://whycss.com 前端网址导航 http://www.daqianduan.com/nav 前端名录 http://sentsin.com/daohang 前端导航 http://123.jser.us 前端开发资源 http://www.css88.com/nav 网址导航 http://www.haourl.cn 前端开发仓库 - 众多效果的收集地 http://code.ciaoca.com 前端资源导航 https://github.com/jnoodle/f2e-collect F2E 前端导航 http://f2e.im/static/pages/nav/index.html

常用 CDN

新浪 CDN http://lib.sinaapp.com 百度静态资源公共库 http://cdn.code.baidu.com 360 网站卫士常用前端公共库 CDN 服务 http://libs.useso.com Bootstrap 中文网开源项目免费 CDN 服务 http://www.bootcdn.cn 开放静态文件 CDN - 七牛 http://staticfile.org CDN 加速 - jq22 http://www.jq22.com/cdn jQuery CDN http://code.jquery.com Google jQuery CDN http://www.google-jquery-cdn.com 微软 CDN http://www.asp.net/ajax/cdn

Git

git-scm http://git-scm.com 廖雪峰 - Git 教程 廖雪峰 - Git 教程 git-for-windows https://git-for-windows.github.io GitHub 添加 SSH keys http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github gogithub http://www.worldhello.net/gotgithub/index.html git 常规命令练习 http://pcottle.github.io/learnGitBranching git 的资料整理 https://github.com/xirong/my-git 我所记录的 git 命令（非常实用） http://www.cnblogs.com/fanfan259/p/4810517.html 企业开发 git 工作流模式探索部分休整 https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md GitHub 漫游指南 https://github.com/phodal/github-roam GitHub 秘籍 https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md 使用 git 和 github 进行协同开发流程 http://livoras.com/post/28 动画方式练习 git http://onlywei.github.io/explain-git-with-d3

各种日期日历

经典 my97 http://www.my97.net/dp/demo/index.htm 强大的独立日期选择器 http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html fullcalendar http://fullcalendar.io fullcalendar 日历控件知识点集合 http://blog.csdn.net/francislaw/article/details/7740630 中文 api http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html 农历日历 https://github.com/zzyss86/LunarCalendar 超酷的仿百度带节日日历老黄历控件 http://www.sucaisj.com/jiaoben/date/201509/16856.html 日期格式化 http://momentjs.com 大牛日历控件 https://github.com/Johnqing/QPAYCalendar 我群某管理作品 https://github.com/Iamlars/dateMarker input 按位替换 - 官网 http://digitalbush.com/projects/masked-input-plugin input 按位替换 - github https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2 bootstrap-daterangepicker https://github.com/dangrossman/bootstrap-daterangepicker 国外 30 个插件集合 http://www.vandelaydesign.com/30-best-free-jquery-plugins JavaScript datepicker http://dbushell.com/2012/10/09/pikaday-javascript-datepicker Datepair.js http://jonthornton.github.io/Datepair.js 一个风格多样的日历 https://github.com/glad/glDatePicker 弹出层式的全日历 http://amsul.ca/pickadate.js/date jquery 双日历 http://www.daterangepicker.com 大气实用 jQuery 手机移动端日历日期选择插件 http://www.frankdemo.cn/index.php?c=content&a=show&id=115 jQuery Mobile 移动开发中的日期插件 Mobiscroll https://mobiscroll.com

Date library

Datejs https://github.com/datejs/Datejs sugarjs http://sugarjs.com/api/Date

其它

Mock.js 是一款模拟数据生成器 http://mockjs.com 特色的 HTML 框架可以创建精美的 iOS 应用 http://framework7.taobao.org 淘宝 SUI http://m.sui.taobao.org avalonjs http://avalonjs.github.io Avalon 新一代 UI 库： OniUI http://ued.qunar.com/oniui/index.html avalon.oniui - 基于 avalon 的组件库 https://github.com/RubyLouvre/avalon.oniui

效果类

弹出层 http://www.imooc.com/learn/58 焦点图轮播特效 http://www.imooc.com/learn/18 HTML5 有哪些让你惊艳的 demo？ http://www.zhihu.com/question/24398907

弹出层

artDialog 最新版 https://github.com/aui/artDialog artDialog 文档 http://aui.github.io/artDialog/doc/index.html google code 下载地址 https://code.google.com/p/artdialog/downloads/list 贤心弹出层 http://layer.layui.com 响应式用户交互组件库 https://github.com/bh-lay/UI sweetalert - 有 css3 动画弹出层 http://t4t5.github.io/sweetalert

优秀 JavaScript 项目

Angular 和 Webpack 种子文件 https://github.com/AngularClass/angular2-webpack-starter Fis3 面向前端的工程构建系统 https://github.com/fex-team/fis3 Fis3 DEMO https://github.com/fex-team/fis3-demo 前端 JQuery 系列: 源码剖析 https://github.com/JsAaron/jQuery avalon 框架 https://github.com/RubyLouvre/avalon Microsoft ChakraCore 微软的 Chakra 引擎 https://github.com/Microsoft/ChakraCore Quintus HTML 游戏引擎 https://github.com/cykod/Quintus 一个用 node.js 搭建的网站 http://www.hubwiz.com/ Web 前端助手—FeHelper（Chrome 扩展） https://github.com/zxlie/FeHelper 百度前端技术学院 https://github.com/baidu-ife/ife Cheerio（node.js 中的 jQuery） https://github.com/cheeriojs/cheerio nodejs 的一个聊天软件 类似微信 https://github.com/BryanYang/freechat 使用 html5 和 node.js 构建的网易云音乐 https://github.com/stkevintan/Cube babel ES6 转换为 ES5 https://github.com/babel/babel 一个 JS 富文本编辑器 https://github.com/fex-team/ueditor 一个 JS 脑图可视化工具 https://github.com/fex-team/kityminder-core 一个 JS 写的 Flappy Bird Game https://github.com/ellisonleao/clumsy-bird 一个 JS 写的 GBA 模拟器 https://github.com/taisel/IodineGBA SegmentFault 写的 Markdown 解析器 https://github.com/SegmentFault/HyperDown.js 基于 node.js 的 Ghost 博客 https://github.com/TryGhost/Ghost 学习 react 的 demos https://github.com/ruanyf/react-demos

学习平台

---

w3school

这是一个免费的在线学习资源，提供HTML的完整教程，包括各种标签和属性的详细介绍，并附有实例演示。

MDN Web Docs

这是Mozilla开发的免费学习资源，提供HTML的详细介绍和教程，并包含实例演示和用法示例。

HTML Dog

这是一个HTML教程和参考网站，提供HTML的基础知识、标签、属性和实例，还包括HTML的最佳实践和CSS样式。

HTML.com

这是一个专门为HTML初学者准备的网站，提供HTML的入门教程和实例演示，以及更高级的技巧和用法。

菜鸟教程

菜鸟教程是一个免费的中文编程学习网站，它的内容丰富、易于理解，非常适合初学者学习使用。

CSS-Tricks

CSS-Tricks是一个由Coyier创办的CSS学习网站。它提供了大量的CSS教程、技巧和代码实例，适合初学者和进阶者使用。此外，它还有一个社区论坛和博客，让学习者可以和其他开发者交流。

Coding Fantasy

Coding Fantasy是一个通过游戏的方式，让你迅速学习到flex和grid布局方式，让你在玩游戏的过程学习到知识。

bilibili

在B站上，有很多优质的前端编程视频，其中包括Web开发入门、HTML、CSS、JavaScript等基础课程，也有Vue.js、React等流行前端框架的教程，以及一些实用的编程技巧和开发工具的介绍。这些视频由许多有经验的前端工程师制作，涵盖了从基础到高级的前端知识和实践内容。

leetcode

LeetCode 平台提供了一个大量的算法练习题库，其中包括了多个类别的算法问题，例如数组、链表、树、字符串、动态规划等等。在这里，用户可以免费练习、在线编程比赛和竞赛、提交和评估自己的算法问题解决能力，同时也可以通过和其他用户的比较，激发自己更好的表现。

技术交流

GitHub

一个非常受欢迎的开源代码托管平台，让开发者可以共享、合作、探索各种开源项目，同时也是一个非常活跃的技术社区。

Stack Overflow

一个专门针对编程问题的问答社区，开发者可以在这里提问、回答问题，并与其他开发者交流和分享经验。

dev

dev社区和国内的掘金社区很相似，技术分类也比较多，像 Java、Python、js、分布式等应有尽有，文章质量普遍都还不错，其实如果平时多留意不难发现，掘金上有一些文章是翻译自 dev社区。 书读百遍，其意自现

JS风格指南

这里包含了各种代码的规范风格，不会让你立刻变成一个优秀的工程师，长期奉行他们也并不意味着你能够高枕无忧不再犯错。 千里之行，始于足下。我们需要时常和同行们进行代码评审，不断优化自己的代码。 你不知道的JavaScript 这里讲述了很多你曾经并不在意但是又不可忽略的js小细节，它将带你把js的不同槽点、另类之处，一次性说个明白。

你不知道的JavaScript

这里讲述了很多你曾经并不在意但是又不可忽略的js小细节，它将带你把js的不同槽点、另类之处，一次性说个明白。

what the f*ck JavaScript

JavaScript 是一个不错的语言。它的语法简单，生态系统也很庞大，最重要的是，它拥有最伟大的社区力量。我们知道，JavaScript 是一个非常有趣的语言，但同时也充满了各种奇怪的行为。这些奇怪的行为有时会搞砸我们的日常工作，有时则会让我们忍俊不禁。

正确的学习JavaScript

这是一份为 JavaScript 新手准备的指南，同时也包含了可以给高手学习的最佳资料，虽然网站的名字是 the right way,但并不代表是学习 JavaScript 的唯一方法。这里只是将一些顶尖开发者的文章、提醒和技巧收集于此。由于它是由一些非常厉害的网民身上收集而来，故称之为 'the right way’或是最佳做法。

JavaScript数据结构和算法完全解析

这里包含了多种基于 JavaScript 语法的算法与数据结构。每种算法和数据结构都有自己的README.md，包含相关说明和链接，以便进一步阅读。

优秀开源项目大全

awesome-vite

awesome-vite 是一个收集了 Vite 生态圈相关资源的 GitHub 仓库，包括插件、模板、示例、文章等等。它的目的是为了帮助开发者更好地使用和探索 Vite。这个仓库由社区驱动，大家可以通过 Pull Request 来贡献自己发现的有价值的 Vite 资源，也可以通过 Issues 来反馈问题和建议。

awesome-react

awesome-react是一个收集了 React 相关资源的精选列表，包括工具、组件、学习资源、示例等等。如果你是 React 开发者，这个列表可能对你很有用。该列表包含了一些非常流行和广泛使用的 React 组件和工具，也包含了一些相对较新但很有潜力的项目。

awesome-webpack-cn

awesome-webpack-cn 是一个中文版的 Webpack 相关资源列表，收录了很多 Webpack 相关的文章、教程、插件等，方便开发者学习和使用 Webpack。它包含了从入门到深入的 Webpack 相关内容，以及在 Webpack 使用过程中会用到的各种工具和插件。同时，Awesome-Webpack-CN 的内容也在不断更新和完善中。

awesome-github-vue

awesome-github-vue 是一个汇集了许多 Vue 相关的优秀开源项目、组件、工具、插件等资源的 GitHub 仓库。该仓库以清晰的分类和详细的介绍，方便开发者查找和使用 Vue 生态中的优秀资源。

Javascript

正则

正则表达式是一种表示字符串模式的方法，常用于搜索、替换和匹配文本。它可以用来匹配特定模式的字符串，比如验证邮箱、手机号、身份证号码等。 RegexOne提供了一个互动的教程来学习正则表达式。 regulex是一个超级好用的正则表达式可视化工具。 regex101是一个在线的正则表达式测试平台。

ES6

ES6（ECMAScript 6）是 JavaScript 语言的一次重大更新，也称为 ECMAScript 2015。ES6 主要增加了许多新的语法特性，如箭头函数、解构赋值、let 和 const 关键字、模板字符串、类等，同时也增加了许多新的内置函数和方法，如 Promise、Set、Map、Array.from 等。 ECMAScript 6 入门(阮一峰)

typescript

TypeScript 中文网是 TypeScript 官方中文文档网站，提供全面的 TypeScript 中文学习资源，包括入门指南、手册、工具、文章、案例等。该网站由社区维护，更新及时、质量高，是学习 TypeScript 的好帮手。 深入理解 TypeScript

Vue.js

vue学习 vue Vue.js官方文档是学习 Vue.js 的最佳资源之一，提供了全面的 Vue.js 教程和 API 文档。 vue源码vue-routervuexpinia

vue开发插件

一个 Vue.js 应用程序的浏览器调试工具，可以在 Chrome 和 Firefox 上使用。 vueuse VueUse是一个基于Vue 3的轻量级、模块化的函数库，提供了一些方便实用的Vue自定义Hooks。这里包含了许多常用的功能，例如状态管理、表单处理、时间处理、剪贴板操作、动画效果、浏览器API等，也支持Tree Shaking，可以根据需求选择所需要的模块，避免浪费不必要的资源和加载时间。

vue项目模版

nuxt

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，用于创建服务端渲染 (SSR) 应用程序。它基于 Vue.js，封装了服务端渲染、异步数据加载、打包优化、静态资源预加载、路由系统等一系列的解决方案和最佳实践，使开发人员可以更快地构建高性能、可扩展的应用程序。

vuepress

VuePress是一个基于Vue.js的静态网站生成器，它能够生成具有文档阅读体验的静态网站。VuePress使用Vue.js的单文件组件和Webpack进行开发，支持Markdown写作格式，并提供了丰富的主题和插件可供选择。

vue-admin-template

Vue Admin Template 是一个基于 Vue.js 2.x 的后台管理系统模板，它使用了一些流行的技术栈，如 Element UI、Vue Router、Vuex 等等。Vue Admin Template 提供了丰富的页面和组件，使得快速搭建后台管理系统变得更加简单。

React.js

react学习

react

这是学习 React 最好的网站。它包含 React 完整的文档和教程,从基础到高级,涵盖了 React 的方方面面。建议从官网的 learn react 入手,系统学习 React。 react源码reduxReact RouterReact Hooksreact开发插件 这是一个由 Facebook 官方开发的浏览器插件，可以方便地查看 React 组件的层次结构，以及 props 和 state 的值。

react项目模板

next.js

Next.js是一个基于 React 的服务器端渲染框架，支持自动代码分割、静态页面生成和基于数据的客户端路由等特性，可以帮助开发者快速构建高性能、可扩展的 Web 应用。 next.js中文文档

Gatsby

Gatsby是一个基于 React 的静态网站生成器，支持使用 Markdown、React 组件、GraphQL 等构建静态网站，可以帮助开发者快速构建 SEO 友好、高性能的静态网站。 Gatsby中文文档

Ant Design Pro

Ant Design Pro是一个基于 Ant Design 的企业级后台管理系统模板，提供了丰富的组件和模板，可以帮助开发者快速构建高质量的企业级应用。

小程序开发

微信小程序

在该文档中，你可以学习如何开发小程序，包括小程序的基础知识、开发工具的使用、小程序开发的各种组件和接口的使用方法等等。

taro

Taro是由京东·凹凸实验室开发的一款多端统一开发框架，支持编译成微信小程序、百度智能小程序、支付宝小程序、字节跳动小程序、QQ小程序、H5等多个平台的代码。

uni-app

uni-app是由DCloud公司开发的一款基于Vue.js开发的多端统一开发框架，支持编译成微信小程序、支付宝小程序、百度智能小程序、QQ小程序、快应用、H5等多个平台的代码。

react Native

React Native是 Facebook 推出的一种跨平台移动应用开发框架，支持使用 JavaScript 和 React 以及其他web技术进行移动应用开发。可以在 Android 和 iOS 上构建本机应用，同时也支持在 web 上开发。

微前端

Qiankun

Qiankun是阿里巴巴前端体系基于微前端规范实现的一套解决方案。它提供主应用和微应用两种角色。主应用作为整个项目的入口,微应用负责独立业务场景。微应用可以选择React、Vue或者其他框架开发,并且可以部署在不同域名下。主应用动态加载微应用,微应用之间也可相互嵌套。提供沙箱机制,确保微应用之间的隔离性。提供主应用和微应用之间的通信方案。支持SSR渲染和TypeScript。 工具

环境配置

node.js

这是Node.js的官方网站，提供了关于Node.js的文档、API参考和下载链接等信息。官网还提供了一个交互式的Node.js教程，帮助初学者了解Node.js的基本概念和语法。

npm

npm是Node.js官方的包管理器，用于帮助Node.js开发人员安装、发布、分享和管理Node.js模块（也称为包或库）。这里提供了npm的文档、包管理器、包搜索和社区等。学习者可以在这里找到各种npm相关的信息和资源，包括如何使用npm安装、发布和管理包等。 npm快速入门。

git

Git 是一个开源的分布式版本控制系统，用于管理软件开发过程中的源代码。它最初由Linus Torvalds在2005年创建，目的是更好地管理Linux内核的开发。Git 可以轻松地管理大型项目，并使多人协作变得更加简单和高效。

常用 Git 命令清单

常用库

axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一种简洁、优雅、灵活和易于使用的方式，使得发送 HTTP 请求变得容易。 axios中文文档参考

moment.js

Moment.js 是一个流行的 JavaScript 库，用于处理、解析和显示日期和时间。它提供了丰富的日期和时间处理功能，包括格式化、解析、时区转换、相对时间计算等。

lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

echarts

ECharts 是一个由百度前端开发团队开发的基于 JavaScript 的可视化图表库，支持各种常见图表类型，如折线图、柱状图、散点图、饼图、仪表盘等，可以灵活扩展和定制化，广泛应用于数据可视化和图表展示的场景。

xlsx

sheetjs 提供了excel在前端使用纯js导出的解决方案，在线阅读excel和导出excel工具。

构建工具

webpack

webpack是一个非常强大的JavaScript模块打包工具，可以处理各种类型的文件，支持自定义配置和插件，同时也提供了一些优化功能，如代码压缩、缓存等。 webpack中文文档参考深入浅出 Webpack

vite

Vite是一个现代化的构建工具，可以快速构建现代Web应用程序。Vite可以快速启动项目，支持快速热更新、动态导入和静态分析等功能。与传统的打包工具不同，Vite采用原生ES模块作为开发时的模块系统，可以实现按需编译，避免了不必要的打包时间和编译过程。

rollup

rollup是一个专门用于打包JavaScript库的构建工具，支持ES6模块和Tree Shaking等功能。 rollup中文文档rollup-plugin-vuerollup团队仓库

项目配置

eslint

ESLint 是一个 JavaScript 代码检查工具，用于检测代码中潜在的问题和错误，以保证代码质量和一致性。它可以识别并纠正常见的代码风格问题，如缩进、括号、引号等，还可以检查语法错误、未使用变量、未声明变量、代码重复等问题。 eslint中文文档参考

prettier

Prettier 是一个代码格式化工具，可以根据配置自动格式化代码，使代码风格一致，减少开发者在代码格式上的时间和精力投入，从而提高开发效率。

style-lint

style-lint 是一款强大的 CSS 代码规范检查工具，它可以帮助开发者保持一致的 CSS 代码风格，提高代码可维护性和可读性。Stylelint 支持配置文件，可以针对不同的项目需求进行定制化设置。 style-lint中文文档参考

husky

Husky 是一个 Git hook 工具，可以让开发者在代码提交、推送等 Git 操作前自动执行一些脚本。常见的用途包括在提交代码前自动运行代码检查、格式化代码等操作，从而保证代码的质量和风格一致性。 husky中文文档参考

babel

Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。在使用 Babel 进行开发时，需要进行相应的配置才能使 Babel 正常工作。

lint-staged

lint-staged是一个在git暂存文件(staged files)上运行代码格式规范的工具。它只校验暂存文件的改动(diff),而不是整个项目。这样可以提高lint效率,并且避免提交未修改的文件产生的lint错误。

css编译器

less

Less 是一种动态样式语言，是 CSS 的一种扩展，提供了许多 CSS 所没有的功能，如嵌套规则、变量、运算、函数等，使得 CSS 更加易读、易维护和易扩展。 less中文文档参考

sass

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。它扩展了CSS，并添加了许多有用的特性，如变量、嵌套规则、Mixin（混合）、函数等。 sass中文文档参考

stylus

Stylus是一种CSS预处理器，Stylus具有类似于Less和Sass的功能，但它的语法更加简洁，并且可以非常容易地与Node.js集成。同时，Stylus还支持实时编译，可以让开发人员更快地调试和开发CSS样式。

PostCSS

PostCSS 是一个 CSS 后处理器，它能够解析 CSS 代码并且使用插件来转换 CSS。PostCSS 的插件生态系统非常丰富，可以实现各种 CSS 的转换，例如自动添加浏览器前缀、将 rem 单位转换为 px、压缩 CSS 等等。

单元测试

Jest

jest是由Facebook开发的JavaScript测试框架，可用于测试React、Angular和Vue等前端框架。

Mocha

Mocha是一个基于Node.js和浏览器的JavaScript测试框架，支持异步和同步测试，并且可以与各种断言库和测试覆盖率工具配合使用。

AVA

AVA是一个轻量级的JavaScript测试框架，支持异步测试和并发执行，具有快速、简单和易于使用的特点。

三维&游戏

三维开发

Three.js

Three.js 是一款基于 WebGL 的 3D 渲染引擎，可以用于制作各种 3D 场景、动画、交互等效果。它提供了丰富的 API 和示例，可用于创建复杂的 3D 网站、游戏、虚拟现实（VR）、增强现实（AR）等应用。

Cesium

cesium是一个开源的 JavaScript 库，用于创建基于 Web 的地球浏览器应用程序。 它使用 WebGL 进行硬件加速，并使用大量的开放数据标准，如 WMS、WFS、GeoJSON、KML 等。

Babylon.js

Babylon是一个功能强大的三维引擎，专门用于创建基于 WebGL 的游戏和应用程序，可在浏览器、移动设备和桌面上运行。

游戏开发

Phaser

Phaser是一个基于HTML5 Canvas和WebGL的开源游戏框架，支持跨平台游戏开发。

PixiJS

PixiJS是一个基于WebGL和Canvas的2D渲染引擎，提供高性能的渲染和交互功能。

Cocos2d-x

Cocos2d-x是一个跨平台的2D游戏框架,支持创建手机游戏,网页游戏,桌面游戏和命令行程序。

内容精简

资源这么多，多看看多学习再总结肯定是好的。多读读就算看重了不算浪费时间，毕竟一千个读者就有一千个林黛玉，还有温故而知新，说不定多读一些内容，就发现惊喜了呢。不过，在此也精简一些内容，就1~2项，只供参考。更多内容细看分类。

• 知乎：程序员应该如何注意身体健康？
• js：JavaScript 标准参考教程
• js：JavaScript 秘密花园
• Es6：ECMAScript 6入门
• Es6：深入浅出ES6
• css：CSS 参考手册
• html:HTML超文本标记语言
• jquery：从零开始学习jQuery
• jquery：前端开发者都应知道的 jQuery 小技巧
• 移动Web：腾讯移动Web前端知识库
• 移动Web：移动web知识资料集-白树
• 小程序：微信小程序开发资源汇总...
• Git：Git教程 - 廖雪峰
• Git：设置Git快捷命令
• React：React入门教程
• Angular: Angular.js 的一些学习资源
• underscore：underscore.js 手册
• vue：vue.js API 中文
• RegExp：RegExp对象 - 阮一峰
• Node：Node.js 包教不包会
• Express：Express 4.x API 中文手册
• Koa：Koa 框架学习
• 前端：Front-End-Develop-Guide 前端开发指南
• 模块化：JavaSript模块规范 - AMD规范与CMD规范介绍
• 规范化：通过分析github代码库总结出来的工程师代码书写习惯
• 工程化：前端工程——基础篇
• 博客：淘宝前端团队
• 博客：Tencent AlloyTeam
• 博客：FEX 百度WEB前端研发部
• 工具：sublime-text & 资料齐聚
• 工具：chrome 开发者工具的 15 个小技巧
• 优化：移动H5前端性能优化指南
• 面试：前端开发面试题

前端资源教程类

各种教程会有很多，我也精简的挑选了一些。选择一两个合适的就好了。有时间多看看多比比也是极好的。

JavaScript

• Javascript教程-小白的零基础JavaScript全栈教程-瘳雪峰
• JavaScript 标准参考教程
• You-Dont-Know-JS -- 不建议初学者查看
• You-Dont-Know-JS -- 翻译版
• 重新介绍 JavaScript（JS 教程）
• 前端入门教程
• 前端开发者手册
• JavaScript学习总结-trigkit4
• 温故js系列-对知识点进行回顾知新
• JS函数式编程指南
• JavaScript Promise迷你书（中文版）
• 精通JavaScript开发-智能社
• JavaScript秘密花园
• JavaScript 资源大全中文版
• JavaScript闯关记 - 编辑中
• JavaScript练习网站收集
• 统一回复《怎么学JavaScript？》
• runjs - js在线编辑学习
• 常用的Javascript设计模式
• 45个实用的JavaScript技巧、窍门和最佳实践
• 给JavaScript初学者的24条最佳实践
• 编写快速、高效的JavaScript代码
• Ajax知识体系
• javascript功能插件大集合
• Moment.js
• Moment.js 中文网
• TypeScript 2.1 新特性一览
• JS Tips – A JS tip per day!

ES6

• ECMAScript 6入门
• 深入浅出ES6
• 探索ES6
• ES6 你可能不知道的事 - 基础篇
• ES6 你可能不知道的事 - 进阶篇

HTML5

• HTML5与CSS3权威指南（书籍）
• html:HTML超文本标记语言
• 译谷歌 HTML/CSS 规范
• HTML5菜鸟教程
• 《每周一点canvas动画》
• 玩转html5画图
• HTML5+NodeJs实现WebSocket即时通讯

CSS3

• CSS 语法参考
• CSS 参考手册
• 腾讯css3动画制作工具
• Bootstrap 中文网
• css3 js 移动大杂烩
• Animate.css
• Sass guide
• Sass中文文档
• less
• 谈谈一些有趣的CSS题目系列
• CSS居中：完全指南（译）
• 业务代码中可用的css小技巧
• You Don't Know CSS（一）
• You Don't Know CSS（二）
• Css in Js

jQuery

• 从零开始学习jQuery
• jQuery API 中文文档
• learn JQuery
• JQuery 源码查找
• 前端开发者都应知道的 jQuery 小技巧
• 10 个 jQuery 图表插件推荐

移动WEB

• 腾讯移动Web前端知识库
• 支付宝-无线Web开发经验谈
• 移动web知识资料集-白树
• 移动端学习 - mobileTech
• 移动前端的一些坑和解决方法（外观表现）
• hotcss 移动端布局终极解决方案 - 让移动端布局开发更加容易
• zepto
• jqmobile 手册
• swiper中文网
• iscroll
• 移动开发大杂烩
• 特色的HTML框架可以创建精美的iOS应用-框架

微信小程序

• 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件...

Git

• Git教程 - 廖雪峰
• GitHub 漫游指南
• 企业开发git工作流模式探索
• Git资料
• Git常用命令
• 设置Git快捷命令

React

• React 教程
• Redux-saga 中文文档
• react.js 官方文档
• reactnative
• React 入门实例教程 - 阮一峰
• React Native 中文版
• 深入浅出React（一）：React的设计哲学 - 简单之美
• 一看就懂的ReactJs入门教程（精华版）
• React china 中文社区
• 深入浅出React（系列）
• React 设计思想
• dva- 基于 redux、redux-saga 和 react-router@2.x 的轻量级前端框架
• Ant Design of React
• tween-one 动效组件

Angularjs

• Angular.js 的一些学习资源
• 关于 AngularJS 框架的使用有哪些经验值得分享？
• 有jQuery背景，该如何用AngularJS编程思想
• AngularJS 源码分析
• AngularJS 中文社区
• AngularJS 入门教程 图灵社区

函数工具

• underscore-underscore.js 手册
• [underscore-underscore.js源码分析](http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis 3031)
• lodash-官方文档
• lodash-中文文档

vue.js

• vuejs 英文官网
• vuejs 中文官网
• vue.js API 中文
• vue.js 中文社区
• vue github 官方仓库
• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库
• vue最新实战 gank客户端（vue2 + vue-router2 + vuex +webpack+ es6）新手福利，干货多多
• Welcome to the Vue Forum!
• iView - 一套基于 Vue.js 的高质量 UI 组件库，主要服务于 PC 界面的中后台产品
• vue 性能优化
• Vue 2.0 构建单页应用最佳实战
• Vue 2.0源码学习
• Mint UI 使用文档

正则表达式

• RegExp对象 - 阮一峰
• 正则表达式&常用代码
• 正则表达式前端手册
• 进阶正则表达式
• 正则表达式 - MDN
• ES6正则的扩展
• 在线正则表达式测试

NodeJs

• 深入浅出NodeJs（推荐书籍）
• Node.js 包教不包会
• 七天学会NodeJS
• NodeJs学习笔记
• NodeJs-阮一峰
• Node.js 究竟是什么？
• NodeJs的代码调试和性能调优
• Express 框架学习
• Express 4.x API 中文手册
• Koa 框架学习
• Koa 手册
• ejs Embedded JavaScript Template

简单算法

• 数据结构与算法 JavaScript 描述. 章节练习
• 常见排序算法（JS版
• JS算法 数据结构 精华集
• 算法系列15天速成——第一天 七大经典排序【上】
• 常见排序算法及优化

前端综合

• Front-End-Develop-Guide 前端开发指南
• 前端知识体系
• 前端知识结构
• 前端开发的历史和趋势
• 前端工程师必备的PS技能——切图篇
• 结合个人经历总结的前端入门方法
• w3help
• 响应式布局指南
• 关于前端开发谈谈单元测试
• 最权威的中文开发文档

前端模块化开发类

• JavaSript模块规范 - AMD规范与CMD规范介绍
• Javascript模块化编程（一）：模块的写法 阮一峰
• Javascript模块化编程（二）：AMD规范 阮一峰
• Javascript模块化编程（三）：require.js的用法 阮一峰
• RequireJS入门（一）Snandy
• RequireJS入门（二）Snandy
• RequireJS入门（三）Snandy
• RequireJS进阶（一）Snandy
• RequireJS进阶（二）Snandy
• RequireJS进阶（二）Snandy
• RequireJS 入门指南
• Seajs 提供简单、极致的模块化开发体验

前端开发规范类

• 通过分析github代码库总结出来的工程师代码书写习惯
• HTML&CSS编码规范 by @mdo
• Javascript编码规范-Max Yu
• CSS编码规范-Max Yu
• 前端编码规范之JavaScript-小胡子哥
• 前端编码规范之css-小胡子哥
• 前端开发规范手册
• 前端代码规范 及 最佳实践
• 百度前端规范
• 网易前端规范

前端工程化类

工程化的工具都不是绝对的，选择合适的使用，项目多了，说不定你都用上了也不一定。反正在我身边我知道的项目中，不同项目用着不同工具，基本都包含了。

• 前端工程——基础篇
• Gulp中文网
• Gulp官网
• Gulp：任务自动管理工具 - 阮一峰
• Gulp 入门指南
• Gulp入门教程
• Grunt中文网
• Grunt官网
• fis 前端工具框架
• fis 文档
• Webpack
• Webpack 中文指南
• Webpack傻瓜式指南（一）
• Webpack傻瓜指南（二）开发和部署技巧
• 入门Webpack，看这篇就够了
• Webpack 2 入门教程
• Parcel中文网

前端开源Git类

• Facebook Projects
• Baidu FEX team
• nzakas
• chrome开发团队成员
• 玉伯 -支付宝前端Leader
• 豆瓣前端Leader
• JacksonTian 朴灵
• 伯乐在线
• 淘宝UED北京团队
• 国外TJ大神
• substack
• 支付宝前端美女沉鱼~
• fengmk2
• github上值得关注的前端项目 - 404

前端知名博客类

SF内有很多高手，可以前去排行榜看看。。。

• 淘宝前端团队
• Tencent AlloyTeam 2016
• FEX 百度WEB前端研发部
• EFE 百度EFE(Excellent FrontEnd)技术体系
• qunaer UED
• Ruby-China
• CNodeJs
• i5ting狼叔
• 伯乐在线
• 博客园
• 大漠
• 朴灵
• justjavac - 迷渡
• 阮一峰的网络日志
• 三生石上-专注于前端（JavaScript、jQuery、ExtJS）
• 司徒正美-Ruby's Louvre
• 张鑫旭 - CSSCSSCSS
• Snandy

前端开发工具类

• sublime-text & 资料齐聚
• SublimeText-快捷键大全
• Gif多图：我常用的 16 个 Sublime Text 快捷键
• sublime Text3 常用快捷键 - mac版
• AngularJS最理想开发工具WebStorm
• Fiddler调式深入研究(一)
• Fiddler实战深入研究(二)
• 移动web调式利器---Rosin研究
• 移动开发中Fiddler的那些事儿
• 微信内移动前端开发抓包调试工具fiddler使用教程
• Google Chrome 官方
• Chrome开发者工具不完全指南（一、基础功能篇）
• Chrome开发者工具不完全指南（二、进阶篇）
• Chrome开发者工具不完全指南（三、性能篇）
• Chrome开发者工具不完全指南（四、性能进阶篇）
• Chrome开发者工具不完全指南（五、移动篇）
• chrome开发工具快捷键
• Chrome 开发工具 Workspace 使用
• chrome 开发者工具的 15 个小技巧
• 天啦噜！原来Chrome自带的开发者工具还能这么用！
• 神器——Chrome开发者工具(一)
• 使用Chrome开发工具调试Canvas
• WEB调试工具---Firebug-慕课网
• Firefox 开发工具 WebIDE
• Firebug入门指南 - 阮一峰
• Firebug控制台详解 - 阮一峰
• 移动端前端开发调试
• 屌爆了,完美调试 微信webview(x5)
• 微信调试的那些事
• 在线二维码图片生成器
• Smart PNG and JPEG compression在线图片压缩
• easyicon 图标下载
• Icon Hover Effects

前端性能优化类

• Javascript高性能动画与页面渲染
• 移动H5前端性能优化指南
• 给网页设计师和前端开发者看的前端性能优化
• 转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化
• Yahoo!团队实践分享:网站性能优化的34条黄金守则(一)—内容
• 网站性能优化指南：什么使我们的网站变慢？
• 分享网页加载速度优化的一些技巧
• 【高性能前端1】高性能HTML -
• 【高性能前端2】高性能CSS
• 前端工程精粹（一）：静态资源版本更新与缓存
• 前端工程精粹（二）：静态资源管理与模板框架
• 让网站提速的最佳前端实践
• 阿里无线前端性能优化指南 (Pt.1 加载期优化)
• pagespeed - 检测网页性能及优化建议

前端面试类

面试题可以供我们学习补漏，但面试题始终有一种应对面试的感觉。请相信面试官能轻易的看出你的斤两，掌握基础和提升技术才是最重要的。这些面试题也是极好的。

• 前端开发面试题
• 前端开发面试题 - GitHub
• 前端开发面试问题及答案整理
• 前端实习生面试总结
• 前端开发面试题大收集
• 如何面试前端工程师？ - 知乎
• 5个经典的前端面试问题
• 10个常见的Node.js面试题
• 百度FEX 的面试
• 40 个重要的 HTML5 面试问题及答案
• BAT及各大互联网公司2014前端笔试面试题：JavaScript篇
• TCP三次握手&Render Tree页面渲染=>从输入URL到页面显示的过程
• 前端进阶-让你升级的网络知识