阮一峰网络日志
2021.04.235、如何制作一个纯 CSS 的密码生成器（英文） https://dev.to/inhuofficial/a-pure-css-password-generator-they-said-it-can-t-be-done-4pla6、深入了解 CORS（英文）本文详细介绍浏览器跨域请求的概念、原理和最佳实践。 https://ieftimov.com/post/deep-dive-cors-history-how-it-works-best-practices/7、浏览器 Fullscreen API 使用指南（英文）FullScreen API 可以让你完全控制，将整个页面或某个页面元素全屏显示，并且提供 CSS 伪类:fullscreen控制样式。 https://css-tricks.com/how-to-leverage-the-fullscreen-api-and-style-it/工具2、darkhttpdC 语言编写的单文件 Web 服务器，无需安装，只要编译一下就能使用，可以替代python -m http.server。https://github.com/emikulic/darkhttpd
4、Mail Studio一个桌面软件，通过可视化界面，创建响应式邮件。 https://mailstudio.app/5、dnspeep一个命令行工具，查看本机发出的所有 DNS 请求和获得的回应。 https://jvns.ca/blog/2021/03/31/dnspeep-tool/6、CORS Anywhere脚本的跨域请求，需要对方服务器支持 CORS，否则就很麻烦。这个工具是一个 CORS 代理，需要自己架设，然后轻松将任何跨域请求变成同域请求。https://github.com/Rob--W/cors-anywhere7、HTTP Toolkit一个桌面程序，用来拦截和调试各种应用的 HTTP 通信，包括浏览器、安卓应用、命令行应用、Electron 应用等等。https://httptoolkit.tech8、DBeaver数据库管理的桌面软件，支持各种主流数据库。https://dbeaver.io/9、dahliaOS这个网站是用 Flutter Web 框架开发的，使用 Dart 语言编写，然后编译成 JS，相当流畅。以后，开发网站时，除了 React 和 Vue，还可以考虑用 Flutter。资源https://web.dahliaos.io/#/5、文本生成图表的在线工具这个网页收集各种从文本生成图表（text-to-diagram）的在线工具，一共有40多种。https://xosh.org/text-to-diagram/
本帖最后由 Qter 于 2021-5-14 23:45 编辑
6、我的 HTML 页面模板（英文）作者介绍了自己目前使用的 HTML 页面模板，解释了每一行的用途。 我的 HTML 页面模板: https://www.matuzo.at/blog/html-boilerplate/7、Prisma ORM 库介绍（英文）Prisma 是 Node.js 和 TypeScript 项目新一代的 ORM 库，用来操作数据库。看上去功能非常强大，还带有配套的图形界面管理工具，下一个项目可以用它试试看。 Prisma ORM 库介绍: https://www.prisma.io/blog/prisma-the-complete-orm-inw24qjeawmb3、Boxedwine这个库用来在网页上建立一个虚拟机，运行 Windows 的 exe 程序。 Boxedwine: http://www.boxedwine.org/demo/6、pass一个命令行的密码管理器，有图形界面客户端，能用于各种平台和手机系统。特点是比较简单直观。 pass: https://www.passwordstore.org/7、cherrytree一个桌面的笔记软件，支持文件夹结构，可以将所有内容保存成一个 SQLite 文件。 cherrytree: https://www.giuspen.com/cherrytree/8、标准笔记跨平台的笔记软件，有在线版，支持端对端加密，基础功能可以免费使用。 标准笔记: https://standardnotes.org/2、卡通漫画人物的面容一个美国学生使用 Artbreeder 软件，通过人工智能，将二维的漫画人物生成三维真实人像。卡通漫画人物的面容: https://designyoutrust.com/2021/04/person-uses-artificial-intelligence-to-make-anime-and-cartoon-characters-look-more-realistic/3、远程工作软件地图（2021版）本文列出了远程工作可选择的软件，一共有几十种。 远程工作软件地图（2021版）: https://friday.app/remote-work/market-map
1、Scheme flood大家用桌面浏览器访问这个网站，会列出你的电脑安装了什么应用（上图）。这样做的目的，是生成一个用户指纹，从而追踪用户，作者写了一篇详细的文章，解释这是怎么实现的。（@jwenjian 投稿） Scheme flood: https://schemeflood.com/
文章: https://fingerprintjs.com/blog/external-protocol-flooding/
@jwenjian: https://github.com/ruanyf/weekly/issues/17594、APK 在线分析一个在线工具，用来分析、修改 APK 文件（安卓应用安装包），以及提取 APK 图标。（@codemofa 投稿） APK 在线分析: https://apkinfo.online/
@codemofa: https://github.com/ruanyf/weekly/issues/17655、Come Browse With Me这个在线工具通过 WebRTC，可以将你的浏览器窗口分享给他人，也就是说，别人可以看到你在页面上的一举一动。 Come Browse With Me: https://comebrowsewithme.com/1、FFmpeg 操作备忘这个网页收集了 FFmpeg 一些常见操作的命令行写法。 FFmpeg 操作备忘: https://gist.github.com/steven2358/ba153c642fe2bb1e47485962df07c7303、JavaScript 数据科学教程一本英文的 JavaScript 教程，免费阅读。从零基础的语法开始讲起，为数据研究人员提供必要的 JavaScript 知识。 JavaScript 数据科学教程: http://js4ds.org
3、树莓派架设公网网站（英文）作家介绍如何在家庭网络之中，使用树莓派架设一个网站，然后通过端口映射，供外网访问。树莓派架设公网网站: https://viggy28.dev/article/setting-up-ghost-in-raspberry-pi-for-free/5、为什么我们从 Webpack 切换到 Vite？（英文）Replit 解释为什么将前端打包工具，从 Webpack 转为 Vite。] 为什么我们从 Webpack 切换到 Vite？: https://blog.replit.com/vite7、x86 计算机的栈顶位置（英文）C 语言变量储存在内存的栈（stack）里面，从栈底开始存放，直到栈顶。这个概念很容易混淆，因为栈底是内存的高位地址，栈顶是内存的低位地址，本文就来分析这个概念。 x86 计算机的栈顶位置: https://eli.thegreenplace.net/2011/02/04/where-the-top-of-the-stack-is-on-x863、SendMozilla 基金会曾经推出了一个文件分享服务，后来停止开发了。社区就接过来，做成完全的开源版，现在可以自己搭建，并且有 Web、命令行和安卓等各种客户端。Send: https://github.com/timvisee/send7、Zulip一个团队协作工具，将聊天和电子邮件的线程模型结合在一起，类似 Slack，但是更像一个内部论坛。Zulip: https://zulip.com/8、Play.js一个 iOS 应用，提供 JavaScript IDE，允许在 iPhone 和 iPad 上开发 Web 和 Node.js 应用。Play.js: https://apps.apple.com/us/app/play-js-javascript-ide/id1423330822
3、Shein，一家悄悄崛起的中国电商（英文）美国的电商应用，排名第一位的是 Amazon，第二位是来自中国的 Shein，可是国内很少有人听说过这家公司。一个美国分析师利用收集到的各种材料，对这家公司进行了长篇分析。 Shein，一家悄悄崛起的中国电商: https://www.notboring.co/p/shein-the-tiktok-of-ecommerce5、HTTP 安全标头快速参考（英文）HTTP 标头里面有一些跟安全相关，本文对它们一一介绍，比如Content-Security-Policy、X-Content-Type-Options等等。 HTTP 安全标头快速参考: https://web.dev/security-headers/6、CAP 定理解读（英文）这篇文章从学术角度，详细解读分布式系统的 CAP 定理，写得很好。CAP 定理的核心含义就是，发生故障时，开发者必须选择，优先满足一致性还是可用性。 CAP 定理解读: https://codahale.com/you-cant-sacrifice-partition-tolerance/8、为什么 MySQL 数据库的字符串列宽是191？（英文）MySQL 数据库的 varchar 格式的列，长度常常是191个字符，这是为什么？ 为什么 MySQL 数据库的字符串列宽是191？: https://www.grouparoo.com/blog/varchar-1911、sqliteviz一个网页应用，可以在网页上可视化操作 SQLite 数据库。 sqliteviz: https://github.com/lana-k/sqliteviz3、Hurl.it这个网站可以定制并发出 HTTP 请求，相当于 Postman 的网页版。 Hurl.it: https://www.hurlit.com/8、Video Puppet这个工具可以将一篇 Markdown 文档转成视频，支持插入图片和音频，还可以使用自动合成的语音解说。 Video Puppet: https://www.videopuppet.com/docs/script/5、你不需要 GUI这个仓库收集了一些常用的命令行操作，可以替代图形界面 GUI，主要针对初学者，但也适合作为命令行操作的备忘和速查。 你不需要 GUI: https://github.com/you-dont-need/You-Dont-Need-GUI1、多出来的一美元三名游客来到一家旅馆，经理告诉他们，三人间的价格是30美元。游客每人掏出10美元，入住了房间。第二天退房时，经理意识到，这间客房的定价应该是25美元，便要求服务员将多收的5美元退还给客人。服务员不诚实，仅向每位游客退还1美元，将剩下的2美元占为己有。现在，三名游客每人实际花费了9美元，总计27美元。服务员保留了2美元，加在一起是29美元，请问剩下的1美元去了哪里？ 多出来的一美元: https://blog.cloudandtree.com/2021/04/the-other-dollar/
本帖最后由 Qter 于 2021-6-11 09:35 编辑
《吃豆人》: https://baike.baidu.com/item/%E5%90%83%E8%B1%86%E4%BA%BA/9119559
2、Vosk一个语音识别的工具包，支持18种语言（包括中文），体积较小（50MB），可以绑定各种语言，适合为聊天机器人提供语音识别。 Vosk: https://alphacephei.com/vosk/index.zh3、PINTR一个网页工具，可以让图片转为线条画。PINTR: https://javier.xyz/pintr/4、Grafar一个专门用于数学的前端可视化库。 Grafar: https://thoughtspile.github.io/grafar2、Can I email这个网站可以查询哪些前端 API 可以用于电子邮件。 Can I email: https://www.caniemail.com/
6、热重载 C （中文）热重载指的是，在不重启的情况下更新应用。脚本语言都能支持这个功能，本文通俗地讲解，如何让 C 语言这样的编译语言，也支持热重载。（@cj1128 投稿） 热重载 C: https://cjting.me/hot-reload-c/
@cj1128: https://github.com/ruanyf/weekly/issues/17967、HTML 技巧（英文）本文总结了一些不为人熟知的 HTML 特性。 HTML 技巧: https://markodenic.com/html-tips/8、列数据库的兴起（英文）主流的关系型数据都以行为单位，储存数据。但是，对于大型数据集，以列为单位储存数据有巨大的优势。实际上，数据仓库基本都是列数据库。本文解释为什么会这样，写得很通俗，但是读起来需要一点耐心。 列数据库的兴起: https://www.holistics.io/blog/the-rise-and-fall-of-the-olap-cube/9、如何将 SHA-256 哈希可视化？（英文）作者一步步示范如何使用 JavaScript，将一个哈希值转成 SVG 图形（上图）。也就是说，可以为任意字符串生成一一对应的图案。 如何将 SHA-256 哈希可视化？: https://francoisbest.com/posts/2021/hashvatars2、Termpair一个远程终端控制工具。用户在一个终端窗口中，启动这个工具，它会返回一个链接，使用这个链接就能在其它计算机的浏览器里面，控制原始的终端窗口。 Termpair: https://github.com/cs01/termpair3、Synthesia这是一个收费的视频合成服务，很有意思。用户选择一个视频模板，然后提供一段文本，该网站就会自动让视频里面的人物，说出你的文本，适合用来生成产品介绍视频。它支持中文，可以免费试用一个视频。 Synthesia: https://www.synthesia.io/7、葫芦笔记国产的笔记软件，支持多种客户端，自动云端同步。笔记功能非常强大，提供大纲界面、双向链接视图、图谱化搜索等。（@pimgeek 投稿） 葫芦笔记: https://www.hulunote.com/
@pimgeek: https://github.com/ruanyf/weekly/issues/17928、Text2image一个将文字或代码转换成图片的网页工具，可定制项多，主题、水印、阴影特效等都能自定义。（@chenjiayao 投稿） Text2image: https://text2image.jaychen.fun/
@chenjiayao: https://github.com/ruanyf/weekly/issues/17982、rfc.fyi一个 RFC（计算机协议标准）的分类引擎，根据关键字搜索，返回所有相关的 RFC 标准。 rfc.fyi: https://rfc.fyi/3、Awesome Privacy该仓库收集各种注重用户隐私保护的软件工具和服务。 Awesome Privacy: https://github.com/pluja/awesome-privacy
2、三种前端实现 VR 全景看房方案（中文）
某品牌要搭建一个在线 VR 展厅，用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅，前端有三个方案可以实现。
三种前端实现 VR 全景看房方案: https://juejin.cn/post/6973865268426571784
3、CSS 与 CSS-in-JS 的性能比较（英文）单独加载的 CSS 文件与写在 JS 脚本里面的 CSS，性能相差多少？作者实验证明，差距很大。 CSS 与 CSS-in-JS 的性能比较: https://pustelto.com/blog/css-vs-css-in-js-perf/4、跨太平洋海底电缆 PLCN 的影响（英文）2017年，跨太平洋海底电缆（PLCN）开始建设，原计划连接洛杉矶和香港（下图一）。但是，2020年由于美国政府的反对，香港节点被取消（下图二）。本文讨论这个事件的影响。 跨太平洋海底电缆 PLCN 的影响: https://blog.telegeography.com/trans-pacific-cables-asian-hubs-plcn-status5、使用 Skynet 和 Filebase 实现分布式文件储存（英文）Skynet 是一个开源的分布式内容托管系统，只要把内容接入这个系统，就可以从全世界无数入口，获取这些内容。本文就介绍一种非常方便的方法，通过 Filebase 这个服务，将图片快速接入 Skynet。 使用 Skynet 和 Filebase 实现分布式文件储存: https://filebase.com/blog/drag-and-drop-files-onto-the-decentralized-web-using-skynet-and-filebase/1、Astro一个前端构建工具，构建出来的页面使用最少 的 JS，尽量是纯的 HTML 和 CSS 代码，大大提高页面的加载速度。实在必需的 JS 脚本，只有用到时才会动态加载。 Astro: https://github.com/snowpackjs/astro2、AlthttpdSQLite 作者 D.理查德·希普写的 HTTP 服务器，SQLite 网站就是用它架设的，整个软件只有一个 C 文件。希普这个人真是有性格，用到的所有工具都是自己写的。先写了数据库SQLite，接着写了 Bug 追踪系统 CVSTrac，然后写了版本管理系统Fossil，现在是 Web 服务器。 Althttpd: https://sqlite.org/althttpd/doc/trunk/althttpd.md6、Mastershot免费的网页视频编辑器，用的是 FFmpeg 的 webassembly 版本，可以在网页上进行简单的视频编辑。 Mastershot: https://mastershot.app/7、Shoelace一个很不错的 Web Components 库，目前提供30多种网页组件。 Shoelace: https://shoelace.style/8、 Handsfree.js一个 JavaScript 库，可以识别人体的动作、手势和面部表情。官网上有很酷的演示，通过扭头或手势，控制鼠标移动。 Handsfree.js: https://handsfree.js.org/1、初等微积分一本大学新生的微积分英文教程《Elementary Calculus: An Infinitesimal Approach》，从无穷小入手，详细解释什么是微积分。 初等微积分: https://people.math.wisc.edu/~keisler/calc.html2、设计比特币一个英文的教程网站，介绍比特币的原理和设计方案。 设计比特币: https://bitcoin.design/guide/3、Deep JavaScript一本免费阅读的英文电子书，介绍 JavaScript 语言的底层机制和设计思想。 Deep JavaScript: https://exploringjs.com/deep-js/toc.html
3、静态网站如何启用数据库查询（英文）
作者演示静态网站（比如 GitHub Pages）如何通过 SQLite 数据库，实现查询功能，完全不需要后台脚本。这种操作的实现原理有两个：一是 SQLite 数据库以页为单位存储数据，每页默认是 4KB，可以按页读取数据；二是前端可以用 sql.js 模拟一个内存文件系统，从而实现按页读取文件。（@joyc 投稿） 静态网站如何启用数据库查询: https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/
@joyc: https://github.com/ruanyf/weekly/issues/18204、Telegram 创始人和他的黑暗帝国（英文）德国《明镜》杂志的长篇英语报道，介绍聊天软件 Telegram 现年36岁的创始人帕维尔·杜罗夫 (Pavel Durov) （上图），以及 Telegram 的故事。 Telegram 创始人和他的黑暗帝国: https://www.spiegel.de/international/world/the-telegram-billionaire-and-his-dark-empire-a-f27cb79f-86ae-48de-bdbd-8df604d07cc85、老电脑如何安装 Windows 11（英文）Windows 11 发布测试版本后，很多人发现老电脑安装不了，因为有主板 BIOS 限制。本文介绍一种规避的方法。 老电脑如何安装 Windows 11: https://allthings.how/how-to-install-windows-11-on-legacy-bios-without-secure-boot-or-tpm-2-0/7、浏览器的原生代理功能示例（英文）本文教你如何使用浏览器原生提供的代理功能，绕过 sci-hub 域名的访问限制。 浏览器的原生代理功能示例: https://fragile-credences.github.io/scihub-proxy/3、gum一个命令行的 Git 用户管理器，适合需要不同身份，向不同仓库提交代码的情况。（@gauseen 投稿） gum: https://github.com/gauseen/gum
@gauseen: https://github.com/ruanyf/weekly/issues/1816
5、EssayKiller一个 AI 框架，可以自动根据给出的题目（上图），生成中文的命题作文，达到高中生作文的水平。（@dllen 投稿） EssayKiller: https://github.com/EssayKillerBrain/EssayKiller_V2
@dllen: https://github.com/ruanyf/weekly/issues/18186、T-Rex RunnerChrome 浏览器内置的“恐龙跳跃”小游戏，被网友从 JavaScript 改成了 C 语言版本。 T-Rex Runner: https://github.com/shlomnissan/t-rex-runner-c7、Rustpad一个开源的 Web 文本编辑器，主要特点是支持多人同时编辑。 Rustpad: https://rustpad.io/8、零宽度短网址生成器一个非常有创意的短网址生成器，看上去生成的短网址都一样，其实里面插入了不同数量的零宽度空格字符。 零宽度短网址生成器: https://zws.im/4、具有源码的商业视频游戏维基百科的这个页面，列出了所有可以拿到源码的商业视频游戏，包括开源的游戏和源码泄露的游戏。 具有源码的商业视频游戏: https://en.wikipedia.org/wiki/List_of_commercial_video_games_with_available_source_code
https://mp.weixin.qq.com/s/HwEbvfQF6-P45R5tZ2VqMg本周话题：视频学习胜过读书吗？现在，网上的课程视频和讲座视频，越来越多。同样的内容，可以读书学习，也可以视频学习，大家喜欢哪一种？我比较喜欢读书，实在没耐心视频学习。书籍只要随手一翻，就知道大概的内容了，哪些章节需要重点阅读。视频行吗？不行，只能从头到尾，看完整个视频。看完才发现，10分钟的视频，只有1分钟是想听的。读书读到精彩之处，可以停下来慢慢琢磨，反复读上几遍。视频行吗？很麻烦，如果要回到10秒前，多拖几次播放轴，保证让你心情烦躁。奇怪的是，我发现， 很多人宁愿看视频，也不想读书。举例来说，我遇到过同学跟我说：老师，我想学习 React，你有好的视频教程推荐吗？你可以看文档啊，官方文档写得不错。老师，我觉得视频学起来更快，文档不好懂，看起来太慢了。我感到很困惑，明明是读书的学习效率比较高，为什么别人不这样想呢？最近，我读到一篇文章，里面有一句话，让我恍然大悟，明白了为什么人们喜欢视频学习。文章说， 人类学习效率最高的方式，不是“读书 + 思考”，而是“观察 + 模仿”。 前者需要较长时间的注意力投入，后者只需要短时间注意力，更符合人类的天性。我一下子就想通了，有些知识，读书读半天也不一定明白，但是亲眼看别人做一遍，马上就能懂。即使不完全懂，至少知道怎么模仿。所以才会有“百闻（文）不如一见”，人们更容易接受形象的东西，而不是抽象的文字。
大部分领域的入门方式，都是“观察和模仿”，所以视频学习更有效。 对于深入学习，文字和书籍的效果可能好于视频，因为入门以后再往上走，“理解 + 思考”的作用越来越大，“观察 + 模仿”的作用越来越小。但是，大多数人需要的只是入门，成为专业工作者毕竟是少数。所以，视频学习才是初学者更好的方式，或者说，视频是大众学习的主流，读书更适用于某个主题的进阶学习。以前没条件视频学习，现在不一样了。智能手机的普及，使得以前没人拍的知识，现在都有人拍；宽带互联网的普及，又使得人们可以随时随地消费视频。我们已经进了视频学习的时代，视频网站可能是新时代的图书馆和印刷机。
4、离线互联网资源库美国加州大学的“离线互联网”（Internet in a box）迎来了8周年的纪念。这个项目收集了互联网主要的免费资源，维基百科、可汗学院课程、OpenStreetMap 地图、电子书……，把它们放进一个移动硬盘，容量可达 1tb。用户只需要使用一个树莓派，就能在没有网络的条件下，浏览和使用这些资源。这些设备赠送给不发达国家的学校，让没有上网条件的学生，也能使用互联网。如果使用树莓派的 Zero W 迷你板，还可以把它封装成一个鼠标大小的主机，便携性就更好了，价格只要30美元。 离线互联网资源库: http://internet-in-a-box.org/7、美国科学家发现，提早入睡可以减轻罹患忧郁症的风险。平时半夜1点钟入睡的人，如果提早到11点入睡，忧郁症发病率可以减少40%。科学家猜测，原因可能是，早睡早起有助于照到更多的阳光，改变体内荷尔蒙分泌，进而影响情绪变化。 美国科学家: https://medlifestyle.news/2021/05/29/waking-up-one-hour-earlier-can-lower-a-persons-chance-of-major-depression-by-23-new-research-finds/7、SQL 查询顺序（英文）
SQL 的 select 查询语句有很多组成部分，本文介绍内部执行时数据库引擎的处理顺序（上图）。 SQL 查询顺序: https://jvns.ca/blog/2019/10/03/sql-queries-don-t-start-with-select/2、Flomo一款卡片式笔记软件，界面非常清爽，有跨平台多种客户端，支持多端自动同步。（@RangeChoi 投稿） Flomo: https://flomoapp.com/
@RangeChoi: https://github.com/ruanyf/weekly/issues/18213、Animista一个网页 CSS 动画工具，可自由配置各种动画特效，并生成代码。（@fish-404 投稿） Animista: https://animista.net/
@fish-404: https://github.com/ruanyf/weekly/issues/18244、TorrentNet这个工具是 BT 下载的种子文件（torrent）的本地搜索引擎。它的最大特点是不用下载整个索引数据库，就可以实现搜索。 TorrentNet: https://github.com/lmatteis/torrent-net7、Fluid Paint一个网页画板工具，可以定制笔刷，产生刷油漆的流体效果，非常精美，值得一玩。 Fluid Paint: https://david.li/paint/1、 写给 Node.js 程序员的 Rust 教程一篇英文的长篇教程，帮助 Node.js 开发者学习 Rust 语言，让你学会怎样写出能在 Node.js 运行的从 Rust 编译的 WebAssembly 代码。 写给 Node.js 程序员的 Rust 教程: https://itnext.io/deep-dive-into-rust-for-node-js-developers-5faace6dc71f2、五笔输入法7天速成作者结合自身学习经历，收集整理了五笔输入法相关知识，按照每天2-3小时的时间，结合五笔练习小游戏，预计一周时间即可掌握五笔输入法。（@yhf7952 投稿）36] 五笔输入法7天速成: https://github.com/ruanyf/weekly/issues/1830
五笔练习: https://wubigame.yantuz.cn/
@yhf7952: https://github.com/ruanyf/weekly/issues/18304、古怪的 JavaScript这个网站给出了25道选择题，测试你对 JavaScript 的古怪语法点了解多少。 古怪的 JavaScript: https://jsisweird.com/