├── .gitignore
├── src
├── getFonts.js
├── pulltorefresh.js
└── functions.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | video.md
--------------------------------------------------------------------------------
/src/getFonts.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 |
4 | 获取项目字型集，便于压缩字体库
5 | 放在项目目录下，cmd运行: node getFonts.js
6 |
7 | */
8 |
9 | let fs=require('fs'),
10 | files,
11 | content=[];
12 |
13 | //获取文件列表(.vue|html|js|json)可添加需要文件类型
14 | let getFiles=function(dir,exclude) {
15 | let results = [];
16 | let list = fs.readdirSync(dir);
17 | list.forEach(function(file) {
18 | file = dir + '/' + file;
19 | let stat = fs.statSync(file);
20 | if(stat&& stat.isDirectory()){
21 | results = results.concat(getFiles(file))
22 | }else{
23 | if(/.(vue|html|js|json)$/.test(file)){
24 | results.push(file)
25 | }
26 | }
27 | });
28 | return results
29 | };
30 |
31 | ((dir)=>{
32 | files=getFiles(dir);
33 | files.forEach(file=>{
34 | let text=fs.readFileSync(file);
35 | text.toString().split('').forEach(letter=>{
36 | if(/[\u4e00-\u9fa5]/.test(letter)&&content.indexOf(letter)==-1){
37 | content.push(letter);
38 | }
39 | })
40 | })
41 | //打印项目用到的所有字型集
42 | console.log(content.join(''));
43 |
44 | })('./src'); //相对node运行目录下的项目地址
45 |
46 |
47 |
--------------------------------------------------------------------------------
/src/pulltorefresh.js:
--------------------------------------------------------------------------------
1 |
2 | (function(window){
3 | const _defaults = {
4 | instructionsPullToRefresh: 'pull to refresh', // text
5 | instructionsReleaseToRefresh: 'Release to refresh', //text
6 | instructionsRefreshing: 'refreshing', // text
7 | threshold: 60, // minimum distance required to trigger the refresh.
8 | onPull: () => location.reload()
9 | };
10 | let _pullLengh = 0;
11 | let _startLength = 0;
12 | let _ptrEle = '';
13 | let _ptrTextEle = '';
14 | let _element = '';
15 | let pullToRefresh = {
16 | init: function(cfg){
17 | Object.keys(_defaults).forEach((key) => {
18 | cfg[key] = cfg[key] || _defaults[key];
19 | });
20 | _element = document.querySelector(cfg.targetElement);
21 | _ptrEle = document.querySelector(cfg.ptrElement);
22 | _ptrTextEle = document.querySelector(cfg.ptrTextElement);
23 |
24 | // init style
25 | _element.style.position = 'relative';
26 | _ptrEle.style.position = 'absolute';
27 | _ptrTextEle.innerText = cfg.instructionsPullToRefresh;
28 |
29 | // blind event
30 | _element.addEventListener('touchstart', function(event) {
31 | _startLength = event.touches[0].pageY;
32 | // _element.removeAttribute('style');
33 | _element.style['transition'] = 'transform 0s';
34 | // 'pull to refresh'
35 | _ptrTextEle.innerText = cfg.instructionsPullToRefresh;
36 | });
37 | _element.addEventListener('touchmove', function(event) {
38 | _pullLengh = event.touches[0].pageY - _startLength;
39 | // console.log(document.body.scrollTop)
40 | if(_pullLengh > 0){
41 | pullElement(_element, _pullLengh, cfg);
42 | }
43 | });
44 | _element.addEventListener('touchend', function() {
45 | // console.log(document.body.scrollTop)
46 | if(_pullLengh > cfg.threshold){
47 | // 'refreshing'
48 | _ptrTextEle.innerText = cfg.instructionsRefreshing;
49 | cfg.onPull();
50 | _pullLengh = 0;
51 | }
52 | _element.style['transition'] = 'transform 0.6s ease';
53 | _element.style['transform'] = 'translate(0, 0px)';
54 | });
55 | }
56 | };
57 |
58 | let pullElement = function(element, length, cfg){
59 | if(length < _ptrEle.offsetHeight){
60 | element.style['transform'] = 'translate(0, ' + length + 'px)';
61 | if(length > cfg.threshold){
62 | // 'release to fresh'
63 | _ptrTextEle.innerText = cfg.instructionsReleaseToRefresh;
64 | }
65 | }
66 | };
67 | window.pullToRefresh = pullToRefresh;
68 | })(window);
69 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 好用的工具/资源聚合仓库
2 | - 本仓库专门用来收集好用的工具/资源
3 | - 推荐好用的工具/资源，请[提交 Issue](https://github.com/yuniorzen/hub/issues)
4 | - 非常感谢阮一峰老师的[科技爱好者周刊](https://github.com/ruanyf/weekly)提供的分享
5 | - 喜欢视频化信息的朋友，可关注视频号：敲代码的人，每周一期精分享！
6 |
7 | ```
8 | Created by Yunior 2014-6-14 17:37
9 | ```
10 |
11 |
12 | ## 目录
13 | - [创意](#idea)
14 | - [效率](#good)
15 | - [设计](#design)
16 | - [前端](#frontend)
17 | - [后端](#backend)
18 | - [区块链](#blockchain)
19 | - [人工智能](#AI)
20 | - [免费教程资源](#freebook)
21 | - [其它](#other)
22 |
23 | ## 创意
24 | [Emoji 搜索](https://translate.yandex.com/?lang=zh-emj&text=%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C)
25 | 
26 | 俄罗斯搜索引擎 Yandex 推出了一个在线翻译工具。有趣的是，里面有一项“文本翻译 Emoji”，可以输入词语，得到对应的 Emoji。
27 |
28 | [千亿像素看中国](http://www.bigpixel.cn/)
29 | 一个绝对硬核的网站，千亿像素看中国。在这个网站，你可以在线观看中国各大城市的高清全景图片。
30 |
31 | [近地轨道的卫星可视化网站](https://platform.leolabs.space/visualization)
32 | 一个可视化站点，可以让大家感受一下地球低轨道太空的实际状态，看看有多少太空垃圾。
33 |
34 | [森林电台](https://www.tree.fm/)
35 | 可以在线倾听大自然的森林电台网站。
36 |
37 | [在线录屏工具](https://www.recordcast.com/)
38 | 屏幕录制通常需要下载特定的录屏软件，注册甚至付费才能够使用。而这是一个免费且无须下载注册的在线屏幕录制工具。
39 |
40 | [开放式摄像头的网站](https://www.skylinewebcams.com/)
41 | 在线观看开放式摄像头的网站,通过这个站点，让你足不出户就能欣赏到分布在世界各地的景点。
42 |
43 | [照片一键生成卡通头像](https://toonme.com/)
44 | 一个把照片一键转换成卡通头像的工具网站。
45 |
46 | [表情短片](https://www.facecards.com/)
47 | 输入一段文字和录音，可以自动制作会说话的个性表情视频。
48 |
49 | [油画头像](https://ai-art.tokyo/en/)
50 | 一个制作油画风格的头像小工具，上传头像自动生成。
51 |
52 | [像素化头像](https://pixel-me.tokyo/en/)
53 | 一个制作像素化的头像小工具，上传头像自动生成。
54 |
55 | [Google Earth Timelapse](https://earthengine.google.com/timelapse/)
56 | 
57 | Google Earth 提供的卫星照片时间线功能，可以查看同一个地点从1984年至2020年的变化，目前官方提供了十几个地点。
58 |
59 | [地球史视频](https://www.youtube.com/c/HistoryoftheEarth/videos)
60 | 
61 | 一个原创科普视频的 Youtube 频道，从地球诞生开始，一段一段介绍地球的历史。
62 |
63 | [低地轨道可视化](https://platform.leolabs.space/visualization)
64 | 
65 | 这个可视化作品，可以让大家感受一下地球低轨道太空的实际状态，看看有多少太空垃圾。
66 |
67 | [Deep Nostalgia](https://www.myheritage.com/deep-nostalgia)
68 | 
69 | 这个在线服务，只要上传一张老照片（需要免费注册），就能将里面的人物转成一段短视频，不仅提高了分辨率，而且有着各种脸部表情。
70 |
71 | [可视化频谱](https://borismus.github.io/spectrogram/)
72 | 一个网页工具，通过电脑麦克风捕捉各种声音，然后将它们的频率图显示在网页上。
73 |
74 | [How Music Taste Evolved](https://pudding.cool/2017/03/music-history/index.html)
75 | 
76 | 这个网站提供 1958 - 2016 每年美国最流行的五首歌曲，可以在线试听片段，了解美国大众音乐口味的变化。
77 |
78 | [openpilot](https://github.com/commaai/openpilot)
79 | 
80 | 一个开源的辅助驾驶系统，可以自动车道居中和自适应巡航控制，已经支持85种车型。
81 |
82 | [Multiavatar](https://multiavatar.com/)
83 | 
84 | 一个在线工具，可以根据输入的文字，生成用户头像图片（ avatar）。
85 |
86 | [Depix](https://github.com/beurtschipper/Depix)
87 | 
88 | 发布图片时，很多人喜欢使用马赛克隐去敏感信息，这个工具可以将打马赛克的文字还原。所以，隐藏信息尽量不要使用马赛克，最好是覆盖掉。
89 |
90 | [Antipodes Map](https://www.antipodesmap.com/)
91 | 
92 | 这个地图工具可以显示任意地点在地球另一边的对应地点，比如在上海打一个洞穿越地心，就会来到阿根廷的恩特雷里奥斯省。
93 |
94 | [Profile Pic Maker](https://pfpmaker.com/)
95 | 
96 | 一个在线工具，上传人像照片，可以自动提取头像，生成大头照图片。
97 |
98 | [Toonify](https://toonify.justinpinkney.com/)
99 | 
100 | 一个在线工具，可以将真人头像变成卡通头像。
101 |
102 | [如何在浏览器里制作一个互动地球仪](https://stripe.com/blog/globe)
103 | 
104 | 作者介绍如何使用 WebGL（通过 three.js）在浏览器里面做出一个可以互动的地球仪。
105 |
106 | [kosmi](https://kosmi.io/)
107 | 
108 | 一个桌面聊天应用，具有很强大的分享功能。本地打开视频，参与聊天的所有人都可以观看。
109 |
110 | [NightCafe](https://creator.nightcafe.studio/)
111 | 
112 | 一个图片处理的在线工具，可以让普通照片变成世界名画。下图就是基于凡高的《星夜》生成的照片。
113 |
114 | [窗口交换](https://window-swap.com/)
115 | 该网站让世界各地的人上传他们窗外的镜像，一段5到10分钟的视频。其他用户就可以在网站上随机看到别人的窗外。
116 |
117 | [Drive & Listen](https://driveandlisten.herokuapp.com/)
118 | 
119 | 一个很有趣的网站，让你在线体验一边开车一边听广播。使用驾驶员的视角，播放街景，有车速和街道噪音开关，配上当地的广播电台。目前支持几十个城市，包括北京和武汉。
120 |
121 | [Youka](https://github.com/youkaclub/youka-desktop/blob/master/README.md)
122 | 
123 | 一个卡拉OK生成器，它可以从 Youtube 下载音乐视频，然后配上歌词，生成卡拉OK视频。
124 |
125 | [换脸视频生成服务](https://myvoiceyourface.com/)
126 | 一个在线服务，用户可以上传一张照片和一段视频，网站会将照片里的人脸，替换视频里面的人脸。
127 |
128 | [pose-animator](https://github.com/yemount/pose-animator)
129 | 
130 | 一个浏览器 JS 库，通过摄像头，实时捕捉用户的动作，生成 2D 动画。
131 |
132 | [avatarify](https://github.com/alievk/avatarify)
133 | 一个开源软件，只需要提供一张头像照片，就可以生成人物开口讲话的视频。
134 |
135 | [archive.org](https://archive.org/)
136 | 互联网档案馆，包括视频音频文本，可以在线阅读，也可以下载，全免费。
137 |
138 | [NYC Cams](https://jott.live/html/nyc_cams)
139 | 
140 | 实时查看纽约街道上的摄像头。
141 |
142 | [Colorables](https://www.colorabl.es/all)
143 | 
144 | 这个网站可以下载各种填色图片，打印以后让小朋友用蜡笔填色。
145 |
146 | [Excalidraw](https://excalidraw.com/)
147 | 
148 | 一个非常简单易用的白板绘图开源工具。
149 |
150 | [Awesome Open Source](https://awesomeopensource.com/)
151 | 该网站对 GitHub 上的开源项目进行分类，共有7000多个类别。
152 |
153 | [socode.pd](https://socode.pro/)
154 | 
155 | 程序员的搜索工具，将各种网络资源汇总在一个搜索框里面。
156 |
157 | [Find yourself a hobby](http://findyourselfahobby.com/index.php)
158 | 该网站会随机显示一个业余爱好，以及介绍材料。如果你不知道自己有什么爱好，可以看看这个网站，也许能找到感兴趣的事。
159 |
160 | [cats-of-jasnah](https://github.com/countable/cats-of-jasnah)
161 | 
162 | 一个为2岁～4岁婴儿开发的网页游戏，让孩子选有多少只符合条件的猫，比如红色的猫有多少只。
163 |
164 | [这里有多少只猫？](https://stylishsite.github.io/)
165 | 一个供幼儿练习辨识能力的在线游戏，第93期曾介绍过英文版，这里是网友做的汉化版。
166 |
167 | [无意义的发明](https://www.unnecessaryinventions.com/)
168 | 该网站收集一些看似无用的发明。
169 |
170 | [Sketchviz](https://sketchviz.com/new)
171 | 
172 | 生成手绘风格的流程图的在线工具。
173 |
174 | [诺基亚短信图片生成器](https://github.com/dcalsky/zzkia)
175 | 
176 | 这个工具可以生成老式诺基亚手机的短信图片。
177 |
178 | [Bot Land](https://bot.land/)
179 | 
180 | 一个在线策略游戏，玩家编程设计自己的机器人进行战斗。
181 |
182 | [drinkNow](https://github.com/sologgfun/drinkNow)
183 | 
184 | Chrome 浏览器插件。每过一段时候，就会弹出一只小鸭子，提醒你要喝水。
185 |
186 | [No CS Degree](https://www.nocsdegree.com/)
187 | 该网站专门采访自学成才的程序员，每个采访对象都会问他们怎么学会编程，怎么找到工作。
188 |
189 | [Anime4K](https://github.com/bloc97/Anime4K)
190 | 
191 | 实时提升卡通动画的分辨率，使其成为高清动画的工具。
192 |
193 | [996.Blockchain](https://github.com/996BC/996.Blockchain)
194 | 一个区块链项目，专门用于保存加班记录，用户可以把自己的加班记录存到区块链。
195 |
196 | [Never-Blink](https://github.com/ByronHsu/Never-Blink)
197 | 
198 | 一个开源游戏，浏览器随机选择另一个用户，双方通过摄像头出现在网页上，谁先眨眼谁就输。
199 |
200 | [开源游戏克隆](https://osgameclones.com/)
201 | 该网站收集各种游戏开源的克隆版。
202 |
203 | [被自己的发明杀死的发明者](https://en.wikipedia.org/wiki/List_of_inventors_killed_by_their_own_inventions)
204 | 维基百科收集的名单，已经有两人在试验自己发明的飞行汽车时死亡。
205 |
206 | [声音地图](https://s3-us-west-1.amazonaws.com/vocs/map.html#)
207 | 该网站将不同情绪对应的声音，画成一幅地图。鼠标移到每个点上，都会听到声音，比如包含了50%的敬爱、33%的同情、17%满意的声音。
208 |
209 | [wikiHow](https://zh.wikihow.com/)
210 | 一个人人都可编辑、教大家做任何事情的百科全书，网站上几乎全是“如何「xxxx」”的内容，包含生活、工作、金融、技能、旅行、宗教等等内容。
211 |
212 | [表情能手](https://emojiwiz.com/zh/)
213 | 一个属于 Emoji 的百科全书「表情能手」,搜索查找、一键复制粘贴任意表情!
214 |
215 | [Code Combat](https://codecombat.com/)
216 | 
217 | 一款学习编程的网页游戏。更多>> [12款助你学编程的免费游戏](https://zhuanlan.zhihu.com/p/23936161)
218 |
219 | [JSCity](https://github.com/aserg-ufmg/JSCity)
220 | 
221 | 该工具可以将 JS 项目的源代码显示为一座城市。还有一个类似的[项目](https://github.com/rodrigo-brito/gocity)，专用于 Go 语言。
222 |
223 | [网页设计博物馆](https://www.webdesignmuseum.org/)
224 | 
225 | 该博物馆展出了1600多个精心挑选和分类的网站，展示了1995年至2019年间的网页设计趋势。上图是苹果公司2001年的主页。
226 |
227 | 
228 | 调查发现，安卓手机的 3 x 3 的认证点阵，虽然理论上可以有近400,000种的解锁模式，但是实际上，20%的用户采用的是上面12种手势之一。
229 | 拿到手机的人，只要尝试这12种手势，就有很大可能解锁进入系统。你中招了吗？
230 |
231 | [Windows 2000 的浏览器版](https://bellard.org/jslinux/vm.html?url=https://bellard.org/jslinux/win2k.cfg&mem=192&graphic=1&w=1024&h=768)
232 | 
233 | Windows 2000 通过 WebAssembly，可以在浏览器里运行了。
234 |
235 | [chinese-xinhua](https://github.com/pwxcoo/chinese-xinhua)
236 | 新华字典数据库和 API，收录 14032 条歇后语，16142 个汉字，264434 个词语，31648 个成语。
237 |
238 | [cartoonify](https://github.com/danmacnish/cartoonify)
239 | 
240 | 非常有创意发明：自制的"拍立得"照相机，拍出来的不是照片，而是卡通图片！它的内部是摄像头+树莓派+热敏打印机。获得照片以后，自动调用谷歌的服务，处理成卡通图片，然后打印出来。
241 |
242 |
243 | [Emoji 官方表情搜索](https://emojiratings.tumblr.com)
244 | 输入表情，搜索展示全球大厂的官方表情，可以清晰看出各家设计风格的不同。
245 |
246 | [Radio Garden](http://radio.garden/live/)
247 | 
248 | 世界地图上每一个绿点，就代表一个当地的电台。光标移上去，就可以听到该电台的现场直播。
249 | 原站点无法访问，可以访问谷歌商店下载应用体验。
250 |
251 | [Gource](http://gource.io/)
252 | 
253 | Gource 是一个很好玩的可视化工具，可以将代码仓库的历史变成视频，支持 Git 和 SVN 等多种格式。只要在仓库目录执行 gource 命令，就能看到提交历史的视频。
254 |
255 | [如何在抖音上找到漂亮小姐姐？](https://github.com/wangshub/Douyin-Bot)
256 | 作者用 Python + ADB 做的 Bot。它会自动打开 APP 对视频截图，然后请求腾讯的 [人脸识别 API](http://ai.qq.com/)，当颜值大于门限值 `BEAUTY_THRESHOLD`时，点赞并关注，接着翻到下一页，重复进行该过程用来收集漂亮的小姐姐。
257 |
258 | [github-contributions-chart](https://github.com/sallar/github-contributions-chart)（[Demo](https://github-contributions.now.sh/)）
259 | GitHub 用户主页有一张图，每一天就是一个小格子。你只要在这一天提交了代码，这个格子就是绿色。但是，这张图只显示过去的一年，即365个格子。
260 | 这个工具可以生成从你加入 GitHub 那天起的所有格子。
261 |
262 | [rebound](https://github.com/shobrook/rebound)
263 | 
264 | 有人终于把这个工具写出来了，一旦 Python 或 JS 脚本报错，就到 Stack Overflow 取回报错信息的解释。
265 |
266 | [Remote Browser](https://github.com/intoli/remote-browser)
267 | 一个浏览器自动化框架，可以用脚本控制已经打开的浏览器。
268 |
269 |
270 | ## 效率
271 | [read-aloud](https://github.com/ken107/read-aloud)
272 | 开源的浏览器朗读插件，可以朗读整个网页或选定文本，支持40多种语言，包括中文。
273 |
274 | [Pitch Deck Hunt](https://www.pitchdeckhunt.com/)
275 | 创业公司向投资者和用户介绍自己的 PPT，叫做 Pitch Deck。该网站收集了150多家著名公司早期的 Pitch Deck，可以用来当作模板。
276 |
277 | [push-bot](https://github.com/tans/push-bot)
278 | 一个基于 wechaty 的微信推送机器人，可以用脚本向微信推送消息。
279 |
280 | [文本生成图表的在线工具](https://xosh.org/text-to-diagram/)
281 | 
282 | 这个网页收集各种从文本生成图表（text-to-diagram）的在线工具，一共有40多种。
283 |
284 | [Clone Wars](https://github.com/GorvGoyl/Clone-Wars)
285 | 
286 | 该仓库收集热门网站的开源实现，比如 Airbnb、Amazon、Instagram、Netflix、Tiktok、Spotify 等，已经有70多个项目了。
287 |
288 | [Buzzing](https://www.buzzing.cc/)
289 | 
290 | 该网站汇集了国外社交媒体里的热门讨论，并且标题都自动翻译成了中文。
291 |
292 | [Frinkiac](https://frinkiac.com/)
293 | 
294 | 这个网站收集了300万张动画片《辛普森一家》的截图，可以按照主题搜索。类似的网站还有 [Futurama 的图片搜索](https://morbotron.com/)。
295 |
296 |
297 | [Bing Wallpaper](https://github.com/niumoo/bing-wallpaper)
298 | 
299 | 这个项目使用 GitHub Actions，收集 Bing 搜索引擎每天的壁纸，提供下载，
300 |
301 | [pcp](https://github.com/dennis-tra/pcp)
302 | 一个命令行的点对点文件传输软件，用法非常简单。一个命令上传文件，然后返回一个接收码，另一台电脑使用接收码接收文件。
303 |
304 |
305 | [视频的自然语言搜索](https://github.com/haltakov/natural-language-youtube-search)
306 | 
307 | 这一个概念性的开源软件，它会下载 Youtube 视频，提取每一帧进行物体识别，然后支持用户使用英语搜索，比如搜索“fire truck”（消防车）就会跳出上面的画面。
308 |
309 | [Beaker](https://beakerbrowser.com/)
310 | 
311 | 一个实验性浏览器，提供点对点访问。你可以在浏览器里面架设自己的网站，然后让其他人访问它。
312 |
313 | [Build your own x](https://github.com/danistefanovic/build-your-own-x)
314 | 这个仓库专门收集各种教程，教你如何自己实现各种软件，比如 Web 服务器、BT 下载客户端、Git、数据库等等。
315 |
316 | [Remark42](https://github.com/umputun/remark42)
317 | 
318 | 一个开源的、可以自己搭建的网站留言服务。
319 |
320 | [ArchiveBox](https://github.com/ArchiveBox/ArchiveBox)
321 | 
322 | 一个将网页存档的工具，可以将 HTML、CSS、JS、图片、媒体文件都保存下来，供日后查看。
323 |
324 | [Thumbnail.AI](https://thumbnail.ai/)
325 | 
326 | 这个在线服务可以为任意 URL，自动生成标题图片，便于在社交媒体引用文章时，提供缩略图。
327 |
328 |
329 | [AI Picture Restorer](https://hotpot.ai/restore-picture)
330 | 
331 | 一个在线工具，去除老照片的破损和折痕。
332 |
333 | [imgdiff](https://github.com/n7olkachev/imgdiff)
334 | 比较两张图片差异的命令行工具。
335 |
336 | [Watermark Video](https://shotstack.io/demo/watermarker/)
337 | 
338 | 一个开源的在线工具，可以为小视频加上水印图片。
339 |
340 | 三个通过搜索台词找影片素材的工具网站，[找台词](http://zhaotaici.cn/)、[33台词](http://33.agilestudio.cn/)、[电影名言](http://www.subzin.com/)
341 |
342 |
343 | [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
344 | 谷歌官方的网页性能的在线评分工具
345 |
346 | [FreePN](https://www.freepn.org/)
347 | 
348 | 一个点对点的 VPN 网络，通过用户共享带宽实现加密访问。
349 |
350 | [real-live](https://github.com/parzulpan/real-live)
351 | 
352 | 一个开源的直播聚合收看平台。采用 Qt 作为前端框架，后端用到 Requests、MySQL、Redis技术等，目前支持在该平台收看 36 个视频直播、59 个高清电视频道和 74 个广播电台。
353 |
354 | [Diffchecker](https://www.diffchecker.com/)
355 | 一个在线工具，可以检查文本、图片、PDF 之间的差异。
356 |
357 | [talk](https://github.com/vasanthv/talk)
358 | 一个开源的 Web 视频对话软件，把 URL 发给对方，就可以在浏览器进行视频对话，不需要下载和注册。
359 |
360 | [hackernews-daily](https://github.com/headllines/hackernews-daily)
361 | 
362 | 订阅 Hacker News 每日排名最高的10条新闻。具体方法是，通过 GitHub Actions 定时执行脚本，获取帖子，记录到了项目的 issue 里，用户通过 watch GitHub 仓库或者 RSS 订阅。
363 |
364 | [snapcode](https://github.com/sergeichestakov/snapcode)
365 | 
366 | 一个很有创意的玩具项目，对手写的代码拍照后，通过 Google Cloud Vision 进行识别，然后自动在 repl.it 上运行。
367 |
368 | [Wiki.js](https://wiki.js.org/)
369 | 
370 | 架设个人 Wiki 的 Node.js 应用。
371 |
372 | [EasyOCR](https://github.com/JaidedAI/EasyOCR)
373 | 
374 | 一个开源的 OCR 软件，支持识别40种语言，包括中日韩文字。
375 |
376 | [icdiff](https://www.jefftk.com/icdiff)
377 | 
378 | 一个命令行的彩色 diff 工具。
379 |
380 | [WebTorrent](https://webtorrent.io/)
381 | 一个在浏览器进行 BT 下载的 JS 库，可以[网页 BT 下载](https://instant.io/)，也有[桌面客户端](https://webtorrent.io/desktop/)。
382 |
383 | [Sendfiles.online](https://sendfiles.online/)
384 | 一个免费的、不用注册的在线文件储存服务，最大可以上传 2GB，保存48小时。它会自动生成下载链接，可以分享给其他人。
385 |
386 | [WebWormhole](https://webwormhole.io/)
387 | 一个点对点的文件在线传输工具，利用 Webrtc 在两台电脑之间建立直接连接，代码[开源](https://github.com/saljam/webwormhole)。
388 |
389 | [endpoints.dev](https://www.endpoints.dev/)
390 | 该网站向每个用户提供一个独特的 API 终点（endpoint），用于接受 HTTP 请求。用户发来的所有请求，都可以在该网站实时显示，用于调试和记录。
391 |
392 | [droppy](https://github.com/silverwind/droppy)
393 | 一个可以自己架设的网盘服务，适合搭建在内网，从 Web 界面上传和下载文件。
394 |
395 | [markmap-lib](https://markmap.js.org/)
396 | 
397 | 一个将 Markdown 转为思维导图的开源工具。
398 |
399 | [大圣盘](https://www.dashengpan.com/)
400 | 一个百度网盘资源搜索引擎，由网络爬虫自动抓取。
401 |
402 | [Unscreen](https://www.unscreen.com/)
403 | 一个在线工具，可以免费删除视频背景。
404 |
405 | [Wifi 登录二维码](https://wifi.dev.bdw.to/)
406 | 一个生成 Wifi 登录二维码的在线工具，手机扫码就可以登录 Wifi。
407 |
408 | [monica](https://github.com/monicahq/monica)
409 | 
410 | 一个个人的 CRM（客户关系管理）系统，可以自己架设服务，管理你的所有人际关系。
411 |
412 | [Happy Hues](https://www.happyhues.co/palettes/17)
413 | 
414 | 该网站提供一系列配色方案，可以实时切换、定制，查看效果。
415 |
416 | [划词二维码](https://github.com/tanghuibo/qrcode-chrome-plug-in)
417 | Chrome 浏览器插件，为选中的文字生成二维码，可以用来为网页提到的网址生成二维码。
418 |
419 | [scoper](https://github.com/RameshAditya/scoper)
420 | 一个开源工具，可以搜索 Youtube 视频的字幕，返回关键词在视频里面出现的时间。
421 |
422 | [ShowMeBug](https://www.showmebug.com/)
423 | 
424 | 一个国产的在线实时编程环境，程序员面试助手，可以实时观看应聘者远程编程。
425 |
426 | [Raccoon](https://raccoon.onyxbits.de/)
427 | 
428 | 从 Google Play 将安卓 apk 安装包下载到桌面的工具。
429 |
430 | [awesome-qrcode](https://github.com/ruanyf/weekly/issues/795)
431 | 二维码生成工具，可以生成静态二维码、图像二维码和动画二维码。
432 |
433 | [Rough.js](https://github.com/pshihn/rough/)
434 | 
435 | 生成手绘风格图片的 JS 库。
436 |
437 | [DarkDarkGo](https://github.com/Bennington-Distributed-Systems-2017/DarkDarkGo)
438 | 开源的暗网搜索引擎工具
439 |
440 | [TagUI-Python](https://github.com/tebelorg/TagUI-Python)
441 | 一个 Python 的自动化模块，可以自己编写脚本，完成浏览器自动化、键盘自动化、鼠标自动化等操作。
442 |
443 | [Serveo](https://serveo.net/)
444 | 一个将本地计算机暴露在互联网上的服务。它的原理很简单，你在本地通过 SSH 与该网站建立远程代理，该网站会生成一个 URL，通过这个 URL 其他人就能访问你的本地计算机。
445 |
446 | [userrecon](https://github.com/thelinuxchoice/userrecon)
447 | 
448 | 一次查询75个社交媒体，看看某个用户名是否还未注册。
449 |
450 | [中国哲学古籍电子化计划](https://ctext.org/zh)
451 | 免费的线上图书馆，提供中国古籍电子版，已收藏超过3万本著作，约50亿字。
452 |
453 | [航班实时追踪](http://flightadsb.variflight.com)
454 | 
455 | 国内做的全球航班实时位置展示，国内航班的覆盖是全球最好的。
456 |
457 | [colorSpace](https://color.4ty2.fun/)
458 | 一个网页工具，可以去除图像里面的用户指定的颜色，对去除背景很有用。
459 |
460 | [you-get](https://github.com/soimort/you-get)
461 | You-Get 一小小哒命令行程序，提供便利的方式来下载近乎全网的视频。
462 |
463 | [Squoosh](https://squoosh.app/)
464 | 谷歌推出的图像压缩工具，代码开源。官网可以在线压缩图片，而且可以转换图片格式（比如 webp 转 jpg）。
465 |
466 | [twitter2facebook](https://github.com/gslin/twitter2facebook)
467 | 推特同步到 Facebook 的工具，最大特点是不使用 Facebook API，而是使用无头版的 Chrome。
468 |
469 | [Photopea](https://www.photopea.com/)
470 | 
471 | 在线图像编辑器，免费，可以替代 PhotoShop 的一部分功能。
472 |
473 | [strapdown](https://github.com/arturadib/strapdown)
474 | Markdown 文件直接部署成静态网站，不需要编译。
475 |
476 | [Screen to GIF](https://www.screentogif.com/)
477 | 一个可以录制 GIF 图片的开源工具，同时还具备编辑帧、调用摄像头录制、录制画板等功能。
478 |
479 | [Youtube 资源](https://www.bestyoutubechannels.info/)
480 | 该网站列出分类的最受欢迎 Youtube 频道。如果你不知道 Youtube 上看什么，可以浏览一下这个网站。
481 |
482 | [全球假日 API](https://www.calendarindex.com/)
483 | 该数据库覆盖全球180多个国家的公众假期。
484 |
485 | [OpenCC](https://github.com/BYVoid/OpenCC)
486 | 中文繁体和简体互相转换的开源工具，C 语言开发的。
487 |
488 | [camelot](https://github.com/socialcopsdev/camelot)
489 | 从 PDF 文件（非扫描）里面提取表格的 Python 库。
490 |
491 | [ytdl-webserver](https://github.com/Algram/ytdl-webserver)
492 | 
493 | 搭建 Web 服务下载 Youtube 视频的工具。
494 |
495 | [reminiscence](https://github.com/kanishka-linux/reminiscence)
496 | 一个架设在本地的网络书签管理系统，会自动抓取书签内容，并生成标签和摘要，使用 django 框架开发。
497 |
498 | [AnimeGAN](https://github.com/TachibanaYoshino/AnimeGAN)
499 | 该项目可借助 AI 技术快速将真实图像转换为日漫风格的画作，让你分分钟化身成新海诚、宫崎骏等漫画大师。
500 |
501 | [RSSHub](https://docs.rsshub.app/)
502 | 
503 | 直接提供各种 Web 应用的 RSS 供订阅。代码开源，可以自己部署。
504 |
505 | [ReLaXed](https://github.com/RelaxedJS/ReLaXed)
506 | 一个将 HTML 文件转为 PDF 文件的命令行工具。
507 |
508 |
509 | ## 设计
510 | [Free Stock Photos](https://taken.photos/)
511 | 免费的图库网站，所有图片都可以免费下载，可用于商业用途，包含数百万张图片。
512 |
513 | [avataaars generator](https://getavataaars.com/)
514 | 
515 | 开源的卡通头像生成器，可以定制各种头像参数。
516 |
517 | [创意共享图像搜索引擎](https://search.creativecommons.org/)
518 | 创意共享基金会推出的官方图像搜索引擎，索引了3亿张图片，都可以免费使用。素材主要来自 Flickr 和 Behance，下一步会把维基百科的图片放进来。
519 |
520 | [manypixels](https://gallery.manypixels.co/)
521 | 
522 | 一个收集无版权插图的网站，提供 SVG / PNG 格式下载，并且允许更改颜色。
523 |
524 | [colorise](https://colourise.sg/#colorize)
525 | 一个为黑白照片着色的在线服务。
526 |
527 | [页面加载动画](https://medium.com/@ann.green/loading-indicators-e9d9ac9680b)
528 | 这篇文章收集了近20个加载页面的优秀动画效果。
529 |
530 | [艺术品图像](https://www.artic.edu/collection?is_public_domain=1)
531 | 
532 | 芝加哥艺术学院的网站提供5万多张艺术品图片，全部都是高分辨率，而且可以免费使用。
533 |
534 | [Lottie](http://airbnb.io/lottie/)
535 | Airbnb 推出的动画效果库，可以把 Adobe After Effects 制作的动画用于 Web、安卓和 iOS。
536 |
537 | [Cool Backgrounds](https://coolbackgrounds.io/)
538 | 
539 | 自动生成背景图片的工具网站，现在提供五种风格，每种都可以定制，看上去赏心悦目。
540 |
541 | [Feature Icons](https://github.com/feathericons/feather)
542 | 一个开源图标库，提供一些简单漂亮的常用图标。
543 |
544 |
545 | ## 前端
546 | [elevator.js](https://github.com/tholman/elevator.js)
547 | 一个使得“回到顶部”的网页滚动，具有电梯效果的 JS 库。
548 |
549 | [设计工具收集](https://nodesign.dev/)
550 | 
551 | 该网站收集各种设计工具和设计资源，没有设计师的时候，可以使用它们。
552 |
553 | [字体裁剪工具](https://github.com/2234839/web-font)
554 | 中文的字体文件都非常大，网页全部加载不现实。这个工具可以从字体里面，选取网页需要的字符，生成新的字体文件。
555 |
556 | [qier-progress](https://github.com/vortesnail/qier-progress)
557 | 一个网页顶部进度条的 JS 库。
558 |
559 | [craft.js](https://github.com/prevwong/craft.js)
560 | 一个可以通过拖拽生成 React 应用的可视化框架。
561 |
562 | [数字雨](https://codepen.io/yuanchuan/pen/YoqWeR)
563 | 浏览器还原电影《黑客帝国》的数字雨，链接为 Codepen.io 演示。
564 |
565 | [tracking.js](https://trackingjs.com/)
566 | 一个浏览器里面的人脸捕捉、颜色追踪的 JS 库。
567 |
568 | [臆病な魔女](https://github.com/yui540/Cowardly-Witch)
569 | 
570 | 一个具有非常酷炫动画的日本动漫网站，代码开源。
571 |
572 | [PaperCSS](https://github.com/papercss/papercss)
573 | 
574 | 具有手绘效果的 CSS 组件库。
575 |
576 | [PeerJS](https://peerjs.com/)
577 | 一个简化 WebRTC 的点对点通信的 JS 库。
578 |
579 | [jimp](https://github.com/oliver-moran/jimp)
580 | 一个 Node.js 的图像处理库，为图像加特效。
581 |
582 | [send](https://github.com/mozilla/send)
583 | Mozilla 的文件上传服务 send.firefox.com 的源码，基于 Nodejs。
584 |
585 | [Maze_Solver_Generator](https://github.com/dmaydan/Maze_Solver_Generator)
586 | 
587 | 一个在 <canvas> 元素上绘制和解决迷宫的 JavaScript 库。
588 |
589 | [ImmortalDB](https://github.com/gruns/ImmortalDB)
590 | ImmortalDB 是一个浏览器 key-value 储存的封装库，把 Cookies、IndexedDB、LocalStorage、SessionStorage 统一成一个接口。它的最大特色就是数据冗余机制，即使某种底层储存机制失效，它可以从其他机制恢复数据。
591 |
592 | [gRPC-Web](https://www.cncf.io/blog/2018/10/24/grpc-web-is-going-ga/)
593 | 
594 | gRPC-Web 是一个JavaScript客户端库，使 Web 应用程序能够直接与后端gRPC服务通信，不需要 HTTP 服务器充当中介。这意味着可以构建真正的端到端 gRPC 应用程序体系结构。
595 |
596 | [arwes](https://github.com/arwesjs/arwes)
597 | 
598 | 一个质量不错的科幻风格 React UI 组件库。
599 |
600 | [retejs](https://github.com/retejs/rete)
601 | 
602 | 可视化编程的 JavaScript 框架。
603 |
604 | [puppeteer-recorder](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda)
605 | Chrome 插件，可以将用户在浏览器里面的操作，自动生成对应的 Puppeteer 脚本。
606 |
607 | [react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button)
608 | 
609 | 一个 React 组件，按钮点击后会像粒子状消解。
610 |
611 | [wired-elements](https://github.com/wiredjs/wired-elements)
612 | 
613 | 一个有手绘效果的网页组件库。但是，真正特别之处在于它的底层是 Web components，让我们看到了除了React/Vue之外，还有其他的路。
614 |
615 | [JavaScript 算法与数据结构](https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md)
616 | 这个仓库收集了30多种算法的 JavaScript 实现。
617 |
618 | [tlsh-js](https://github.com/idealista/tlsh-js)
619 | 一个生成字符串哈希的 JavaScript 库。它的特点是，字符串越相似，或者重复同样的模式，生成的哈希也越相似，可以用来计算两个字符串的相似程度。
620 |
621 | [css-protips](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
622 | 一个收集 CSS 使用技巧的库。
623 |
624 | [img-2](https://github.com/RevillWeb/img-2)
625 | 一个 WebComponent 组件，使用 <img-2> 取代 <img>，可以只显示第一屏的图片，其他图片通过 Web Worker 预下载，一旦该图片进入可视区域后再加载显示。
626 |
627 | [Proton Native](https://proton-native.js.org/)
628 | React Native 可以写桌面应用了，不必使用 Electron 了。有人写了一个渲染器，把 RN 渲染成桌面操作系统的 Native 应用。为了表示跟 Electron （电子）项目的竞争关系，它故意起名为 Proton（质子）。
629 |
630 |
631 | ## 后端
632 | [script-httpd](https://github.com/beefsack/script-httpd/)
633 | 这个程序可以将任何的命令行程序，变成网络服务。它提供一个网络接口，收到 HTTP 请求后，启动容器环境执行命令行程序，然后返回结果。
634 |
635 | [NGINX Config](https://www.digitalocean.com/community/tools/nginx)
636 | Nginx 的图形配置界面，点几下鼠标，自动生成配置文件，可以上传到服务器。
637 |
638 | [spiderman](https://github.com/TurboWay/spiderman)
639 | 一个通用的分布式爬虫框架，基于 scrapy-redis，只需编写少量代码即可完成分布式爬虫抓取数据。
640 |
641 | [SimpleCTO screenshot](https://github.com/simplecto/screenshots)
642 | 一个在线生成网站截图的工具，用户提交 URL，就能下载网页截图，代码开源。
643 |
644 | [bigbluebutton](https://github.com/bigbluebutton/bigbluebutton)
645 | 
646 | 开源的远程教育软件，也可用作视频会议。
647 |
648 | [openVidu](https://openvidu.io/)
649 | 
650 | 一个开源的视频会议软件，使用 WebRTC 技术。
651 |
652 | [kutt](https://github.com/thedevs-network/kutt)
653 | 开源的短链接生成器，基于 Node.js，允许自定义短链接、设置链接密码，还提供访问统计。
654 |
655 | [snapdrop](https://github.com/RobinLinus/snapdrop)
656 | 一个开源的文件分享服务，使用 WebRTC 协议进行点对点传输。
657 |
658 | [tesseract.js](https://github.com/naptha/tesseract.js)
659 | 
660 | 一个可以完成 62 种语言 OCR （光学识别）的 JS 库。
661 |
662 | [如何使用 GitHub issue 作为博客后端？](https://github.com/ruanyf/weekly/issues/585)
663 | 你可以使用 GitHub issue 写博客，然后依靠 API 通过 Circle-CI 构建出网站。
664 |
665 | [Dork-Admin](https://github.com/No-Github/Dork-Admin)
666 | 这是一个中文仓库，盘点世界上比较重大的数据泄漏事件。
667 |
668 | [Tox](https://tox.chat/)
669 | 
670 | Tox 是一个开源的实时通信协议，不需要中央服务器，提供多种跨平台的客户端。
671 |
672 | [webtty](https://github.com/maxmcd/webtty)
673 | 一个使用 WebRTC 协议分享命令行对话的工具，特点就是点对点的分享，不需要中间代理，而且可以在浏览器之中使用。
674 |
675 |
676 | [树莓派如何搭建 NAS](https://opensource.com/article/18/7/network-attached-storage-Raspberry-Pi)
677 | 想要搭建家用储存系统的朋友，可以看这篇教程，使用树莓派和移动硬盘，搭建一个 NAS，操作简单，可玩性高，费用便宜。
678 |
679 | [perkeep](https://perkeep.org/)
680 | perkeep 是一个开源工具，可以将你的文件同步储存到多个节点，保证不会丢失。它可以用作个人的储存系统，可以看作是亚马逊 S3 服务的本地实现。
681 |
682 | [pygmy](https://github.com/amitt001/pygmy)
683 | Python 语言写的短网址服务，前后端代码都包括。
684 |
685 | [最简单的反向代理服务器](https://hackernoon.com/writing-a-reverse-proxy-in-just-one-line-with-go-c1edfa78c84b)
686 | 本文介绍如何用 Go 语言实现一个最简单的反向代理服务器。
687 |
688 | [Night-Reading-Go](https://github.com/developer-learning/night-reading-go)
689 | 由 Go 夜读 SIG 成员维护，并通过 zoom 在线直播的方式分享 Go 相关的技术话题，每天大家在微信/Slack 上及时沟通交流编程技术话题。
690 |
691 | [Jib](https://jaxenter.com/jib-java-containerization-146647.html)
692 | 谷歌开源的 Java 应用容器生成工具，不用写 Dockerfile，构造过程中自动生成一个 Docker 容器。
693 |
694 | [Gitea](https://gitea.io/en-us/)
695 | 类似于 GitHub 和 GitLab 的开源项目，用于个人架设 Git 代码托管服务，使用 Go 语言实现。
696 |
697 | [bat](https://github.com/sharkdp/bat)
698 | 
699 | 命令行的 cat 命令用来显示文件的内容，bat 命令完全跟 cat 一致，只有一个地方不一样，就是现在的内容会带有行号和代码高亮。
700 |
701 |
702 | ## 区块链
703 | [Post-Pages-to-IPFS](https://github.com/SaltyLeo/Post-Pages-to-IPFS)
704 | 一个开源的在线工具，可以将文章发布到 IPFS 网络。一经发布就无法再删改，理论上可以永久储存。
705 |
706 | [从头构建一个 BitTorrent 客户端](https://blog.jse.li/posts/torrent/)（英文）
707 | 本文介绍 BitTorrent 点对点下载的原理，并给出 Go 语言的实现。
708 |
709 | [区块链背后的密码学](https://learning.nervos.org/crypto-block/0-intro.html)
710 | 中文的密码学入门介绍，向非专业读者介绍了密码学的基本概念，没有涉及到技术细节。
711 |
712 | [GitTorrent](https://blog.printf.net/articles/2015/05/29/announcing-gittorrent-a-decentralized-github/)
713 | 一个采用 BitTorrent 协议的 GitHub 替代品，真正做到了无中心。虽然这个项目很久没有更新了，但是可以阅读上面的文章，了解它的原理。
714 |
715 | [IPFS 教程](https://github.com/miaoski/ipfs-tutorial)
716 | 
717 | 如果你想把一个文件放到网上，从此任何人无法删除和屏蔽，别人只要想看就能看到，你可以使用 IPFS。
718 |
719 | 它是一个分布式网络，采用点对点通信。内部是一个区块链，文件写入以后就没法删除了，然后通过哈希可以读出文件。缺点是本地需要架设一个客户端，资源开销有点大。
720 |
721 |
722 | ## 人工智能
723 | [video-object-removal](https://github.com/zllrunning/video-object-removal)
724 | 
725 | 这个工具使用机器学习算法，去除视频里面的运动物体。
726 |
727 | [sketch-code](https://github.com/ashnkumar/sketch-code)
728 | 
729 | 人工智能生成前端网页的工具，已经可用了。自动将手绘图，变成 HTML 网页。作者还写了一篇文章[介绍原理](https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82)。
730 |
731 |
732 | [Comixify](https://comixify.ii.pw.edu.pl/)
733 | 
734 | 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。
735 |
736 | [CycleGAN](https://github.com/junyanz/CycleGAN)
737 | 
738 | 图像处理软件，可以把马变成斑马、苹果变成橙子。
739 |
740 | [DeOldify](https://github.com/jantic/DeOldify)
741 | 
742 | 老照片着色的机器学习库。
743 |
744 | [ml5.js](https://ml5js.org/)
745 | 一个基于 TensorFlow.js 的机器学习封装库，提供方便易用的 API，可以用于图像分类和视频分类等常见用途。
746 |
747 | [TensorFlow-Course](https://github.com/open-source-for-science/TensorFlow-Course)
748 | 针对新手的 TensorFlow 教程。
749 |
750 | [lip-reading-deeplearning](https://github.com/astorfi/lip-reading-deeplearning)
751 | 
752 | 一个使用深度学习，从嘴唇变化识别语言的库。
753 |
754 | [faceai](https://github.com/vipstone/faceai)
755 | 一款入门级的人脸、视频、文字检测以及识别的项目。
756 |
757 | [机器学习50个最佳免费数据集](https://gengo.ai/articles/the-50-best-free-datasets-for-machine-learning/)
758 | 这里列出50个可以用来训练模型的免费大型数据集。
759 |
760 | [self-driving-toy-car](https://github.com/experiencor/self-driving-toy-car)
761 | 
762 | 一个开源的自动驾驶玩具车，在小车上面绑了一个树莓派和摄像头。
763 |
764 | ## 免费教程资源
765 | [Notion Clone](https://github.com/konstantinmuenster/notion-clone)
766 | 一个 Notion 的开源克隆，提供在线的笔记管理功能。
767 |
768 | [WebRTC 示例仓库](https://webrtc.github.io/samples/)
769 | WebRTC 是浏览器点对点通信的 API，这个仓库给出了各种使用示例，覆盖了主要的使用场景。
770 |
771 | [webRTC 执行流程演示](https://nashaofu.github.io/webrtc-demo/)
772 | 这个网页演示和讲解，如何在无后端的情况下，通过 webRTC 建立双方的实时视频通话。
773 |
774 | [《斯诺登自传》](https://a.temporaryrecord.com/)
775 | 斯诺登自传《永久记录》，未删节的简体中文版 PDF 下载，作者本人授权。
776 |
777 | [如何制作树莓派 NAS](https://www.instructables.com/id/PiNAS-the-Raspberry-Pi-NAS/)
778 | 
779 | 
780 | 一个详细的图片教程，介绍如何自己从头制作一个基于树莓派的 NAS 网络硬盘。
781 |
782 | [动手学深度学习](https://zh.d2l.ai/)
783 | 
784 | 《Dive into Deep Learning》英文教材的中文翻译。
785 |
786 | [设计模式](https://refactoringguru.cn/design-patterns)
787 | 
788 | 该网站为中文教程，使用通俗的语言，介绍各种设计模式，图文并茂。此外，还有代码重构方面的英语内容。
789 |
790 | [机器学习漫画](https://cloud.google.com/products/ai/ml-comic-1/)
791 | 
792 | 谷歌推出的机器学习漫画，解释基本知识。
793 |
794 | [BBC 的音效库](http://bbcsfx.acropolis.org.uk/)
795 | 英国广播公司 BBC 的音效库，包含16000多种可以下载的音效，比如停车的声音、机床的声音、鸟叫的声音等等。
796 |
797 | [libpku](https://lib-pku.github.io/)
798 | 北京大学各种课程资料收集，目前已经接近100门课，让你在网上读北大。
799 |
800 | [业余无线电爱好者入门](https://www.yuque.com/ham/base/iw8xi2)
801 | 如何在国内拥有一个个人的无线电台。
802 |
803 | [树莓派的项目](https://hackaday.io/projects?tag=raspberry%20pi)
804 | 该网站收集各种树莓派的项目，目前已经有1000多项了。
805 |
806 | [中国科大计算机学院课程资源](https://github.com/mbinary/USTC-CS-Courses-Resource)
807 | 该仓库收集中科大计算机学院的课程资源, 包括课程电子版书籍、参考书、slides(ppt)、考试试卷、学习心得、一部分习题答案。
808 |
809 | [3Blue1Brown 视频的中文官方账号](https://space.bilibili.com/88461692/video)
810 | 3Blue1Brown 是著名的数学科普视频制作者。
811 |
812 | [node best practices](https://github.com/i0natan/nodebestpractices)
813 | 一个收集 Node 最佳实践的仓库。
814 |
815 | [如何使用 Node 优化图片？](https://freshman.tech/image-optimisation/)
816 | 本文教你使用 JS 的 imagemin 模块，压缩图片的大小。
817 |
818 | [C 语言教程：构建 Lisp 编译器](https://ksco.gitbooks.io/build-your-own-lisp/)
819 | 一本免费电子书，从零开始讲解 C 语言，目标是写出一个 Lisp 语言的编译器。
820 |
821 | [WebAssembly 现状与实战](https://www.ibm.com/developerworks/cn/web/wa-lo-webassembly-status-and-reality/index.html)
822 | WebAssembly 并不是一门编程语言，而是一份字节码标准，需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行， 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。本文重点介绍如何使用 AssemblyScript 来编写 WebAssembly。
823 |
824 | [Python - 100天从新手到大师](https://github.com/jackfrued/Python-100-Days)
825 | 一本针对初学者的 Python 教程。
826 |
827 | [前端人工智能？TensorFlow.js 学会游戏通关](https://zhuanlan.zhihu.com/p/35451395)
828 | 作者使用 TensorFlow.js，让程序自动完成 Chrome 浏览器的内置小游戏"恐龙快跑"。
829 |
830 | [只有 13 台 DNS 根域名服务器原因](https://jaminzhang.github.io/dns/The-Reason-of-There-Is-Only-13-DNS-Root-Servers/)
831 | 我们经常听到 DNS 根域名服务有 13 台，那么是为什么呢？ 今天我们来深入了解下。
832 |
833 | [互联网公司技术架构](https://github.com/davideuler/architecture.of.internet-product)
834 | 作者收集的国内各大互联网公司技术架构的资料。
835 |
836 | [《React in patterns》](https://sangka.github.io/react-in-patterns-cn/)
837 | 介绍了使用 React 开发时的一些常用设计模式，其中包括的技术有组合( composition )、数据流、依赖管理，等等。
838 |
839 | [GitHub 最受欢迎的20个课程仓库](https://education.github.community/t/20-of-the-most-popular-courses-on-github/27832)
840 | 很多开放课程的仓库放在 GitHub 上面，GItHub 官方列出了最受欢迎的20个仓库。
841 |
842 | [《计算与推断：数据科学基础》](https://ds8.gitbooks.io/textbook/content/)
843 | 本书是加州大学伯克利分校《数据科学导论》课程的教材，现在开源了。
844 |
845 |
846 | ## 其它
847 | [Finger Pool](https://github.com/victorqribeiro/fingerPool)
848 | 
849 | 开源的 2D 网页桌球游戏，撞击效果做得很好。
850 |
851 | [如何不靠运气变得富有](https://github.com/fat-garage/how-to-get-rich-without-getting-lucky)（中文）
852 | Naval 是美国风险投资家，这是他的3小时长播客《如何不靠运气变得富有》的中文翻译，介绍了他的财富观，非常值得一读。
853 |
854 | [提早退休](https://en.wikipedia.org/wiki/FIRE_movement)
855 | 这是维基百科的条目，介绍正在兴起的一种社会运动，能否通过高度储蓄，实现提前退休？具体做法是，年收入的50%以上都储蓄，目标是把每年的消费压低到你个人财富总额的4%。
856 |
857 | [深海](https://neal.fun/deep-sea/)
858 | 
859 | 这个网站可以不停往下拉，看看每个深度的海底都有些什么生物。上图是海底45米。
860 |
861 | [gov-takedowns](https://github.com/github/gov-takedowns)
862 | GitHub 有一个官方仓库，收录政府的来函，要求取缔某些内容。现在里面有三个国家的政府来函：中国、俄国和西班牙。所以，放在 GitHub 上的东西，可以合法地被政府拿掉。因此不要在 GitHub 乱放东西，尤其考虑到 GitHub 的老板是微软。
863 |
864 |
865 | [bruno simon](https://bruno-simon.com/)
866 | 
867 | 这是很久以来，我见过的最酷主页，整个页面都是 3D 的。[页面源码](https://github.com/brunosimon/folio-2019)是开源的。
868 |
869 | [法信](http://www.faxin.cn/keyword/index.aspx)
870 | 一个法律仓库，可以在线搜索国内的各种法律。
871 |
872 | [几枝](https://chrome.google.com/webstore/detail/%E5%87%A0%E6%9E%9D/hfohpokminpknagcgncibpacohagppjn)
873 | 
874 | Chrome 浏览器的插件，在新标签页展示中国传统色的层叠波浪动画效果，搭配经典诗词。
875 |
876 | [我的透明创业实验](https://blog.t9t.io/transparent-startup-experiment-2019-05-20/)
877 | 一个正在进行的创业实验，一年时间做10个小产品，看看能否达到每月被动收入1000美元的目标
878 |
879 | [死刑犯的遗言](https://www.tdcj.texas.gov/death_row/dr_executed_offenders.html)
880 | 美国得州政府有一个网页，专门收集犯人执行死刑前的遗言。
881 |
882 | [什么是真正的程序员](https://www.cnblogs.com/xueweihan/p/5220513.html)
883 | 本文是一篇译文，作者仿照《小王子》中的情节，通过小 printf 遇见的不同类型的程序员，最后悟出什么才是真正的程序员！
884 |
885 | [Maths is fun](https://www.mathsisfun.com/)
886 | 该网站是数学知识科普，覆盖了代数，几何，统计，微积分等领域。有一个爱好者翻译的[中文镜像](http://www.shuxuele.com/index.html)。
887 |
888 | [Maze Battles](http://www.mazebattles.com/)
889 | 
890 | 一个在线的迷宫游戏网站，支持多人同时游戏。我玩了一局，还挺有意思。
891 |
892 | [需要学习的是编程，而不是编程语言](https://phpocean.com/blog/article/learning-programming-is-different-from-learning-a-programming-language/80)（英文）
893 | 作者注意到，编程与编程语言几乎没有关系，学生可能只是在学编程语言，而不是在学编程。
894 |
895 | [Vialer-js](https://github.com/vialer/vialer-js)
896 | 一个基于 WebRTC 技术的实时通讯平台，可以实现 P2P 的文字聊天、语音和视频对话。
897 |
898 | [Google CTF 的试题](https://github.com/google/google-ctf)
899 | 这个是试题库，收集了 Google 主办的黑客安全大赛 CTF 的题目。
900 |
901 | [docsmall](https://docsmall.com/image-compress)
902 | 国内开发团队打造的工具，可能是国内最棒的在线压缩工具。支持JPG、PNG、GIF、PDF，单个文件最大25Mb。
903 |
904 | [merge-images](https://github.com/lukechilds/merge-images)
905 | 多张图片合成一张图片的浏览器 JS 库，使用了 Canvas。
--------------------------------------------------------------------------------
/src/functions.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * 格式化日期时间 eg:2019-09-24 11:31:06
4 | * @method formatDateTime
5 | *
6 | * @params
7 | * time {Number}} 需要格式化的时间戳
8 | *
9 | * @returns
10 | * {String} 格式化的时间字符串
11 | *
12 | * @author Yunior
13 | * */
14 | export const formatDateTime = time => {
15 | let date=new Date(time*1)
16 | let year = date.getFullYear(),
17 | month = date.getMonth() + 1,
18 | day = date.getDate(),
19 | hour = date.getHours(),
20 | minute = date.getMinutes(),
21 | second = date.getSeconds();
22 |
23 | let formatNumber = n => {
24 | n = n.toString()
25 | return n[1] ? n : '0' + n
26 | }
27 |
28 | return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
29 | }
30 |
31 |
32 | /**
33 | * 函数节流限制频次,每time毫秒只会执行一次callback函数
34 | * @method throttleFn
35 | *
36 | * @params
37 | * delay {Number} 毫秒数
38 | * callback {Function} 待执行的函数
39 | * @returns
40 | *
41 | * @author Yunior
42 | * */
43 | export const throttleFn=(delay, callback)=>{
44 | let timeoutID;
45 | let lastExec = 0;
46 |
47 | function wrapper() {
48 | const self = this;
49 | const elapsed = Number(new Date()) - lastExec;
50 | const args = arguments;
51 |
52 | function exec() {
53 | lastExec = Number(new Date());
54 | callback.apply(self, args);
55 | }
56 |
57 | clearTimeout(timeoutID);
58 |
59 | if (elapsed > delay) {
60 | exec();
61 | } else {
62 | timeoutID = setTimeout(exec, delay - elapsed);
63 | }
64 | }
65 |
66 | return wrapper;
67 | }
68 |
69 |
70 | /* 滚动到页面顶部 */
71 | export const backTop=()=>{
72 | let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
73 | if (currentScroll > 0) {
74 | window.requestAnimationFrame(backTop);
75 | window.scrollTo (0,currentScroll - (currentScroll/5));
76 | }
77 | }
78 |
79 |
80 | 局部滚动不影响浏览滚动
81 | ~function scrollUnique(id) {
82 | let contain=document.getElementById(id),
83 | eventType = document.mozHidden !== undefined?'DOMMouseScroll':'mousewheel';
84 |
85 | handleEvent=function(event) {
86 | event=event||window.event;
87 | let target=contain,
88 | scrollTop = target.scrollTop,
89 | scrollHeight = target.scrollHeight,
90 | height = target.clientHeight;
91 |
92 | let delta = (event.wheelDelta) ? event.wheelDelta : -(event.detail || 0);
93 | console.log(`${delta}---${scrollTop}---${scrollHeight}---${height}---${(delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)}`)
94 | if ((delta > 0 && scrollTop <= delta) || delta < 0 && (scrollHeight - height-scrollTop) <= -1 * delta) {
95 | target.scrollTop = delta > 0? 0: scrollHeight;
96 | window.event?event.returnValue=false:event.preventDefault()
97 | }
98 | }
99 |
100 | if(contain.addEventListener){
101 | contain.addEventListener(eventType,handleEvent,false)
102 | }else{
103 | contain.attachEvent(''+eventType,handleEvent)
104 | }
105 | }('rcs-message-list')
106 |
107 | //复制到剪切板跨浏览器 select_all_and_copy(document.getElementById('copy')) ##http://www.seabreezecomputers.com/tips/copy2clipboard.htm
108 | function select_all_and_copy(el){
109 | var tooltip=function(el,msg){
110 | alert(msg);
111 | };
112 | // Copy textarea, pre, div, etc.
113 | if (document.body.createTextRange) {
114 | // IE
115 | var textRange = document.body.createTextRange();
116 | textRange.moveToElementText(el);
117 | textRange.select();
118 | textRange.execCommand("Copy");
119 | tooltip(el, "Copied!");
120 | }
121 | else if (window.getSelection && document.createRange) {
122 | // non-IE
123 | var editable = el.contentEditable; // Record contentEditable status of element
124 | var readOnly = el.readOnly; // Record readOnly status of element
125 | el.contentEditable = true; // iOS will only select text on non-form elements if contentEditable = true;
126 | el.readOnly = false; // iOS will not select in a read only form element
127 | var range = document.createRange();
128 | range.selectNodeContents(el);
129 | var sel = window.getSelection();
130 | sel.removeAllRanges();
131 | sel.addRange(range); // Does not work for Firefox if a textarea or input
132 | if (el.nodeName == "TEXTAREA" || el.nodeName == "INPUT")
133 | el.select(); // Firefox will only select a form element with select()
134 | if (el.setSelectionRange && navigator.userAgent.match(/ipad|ipod|iphone/i))
135 | el.setSelectionRange(0, 999999); // iOS only selects "form" elements with SelectionRange
136 | el.contentEditable = editable; // Restore previous contentEditable status
137 | el.readOnly = readOnly; // Restore previous readOnly status
138 | if (document.queryCommandSupported("copy"))
139 | {
140 | var successful = document.execCommand('copy');
141 | if (successful) tooltip(el, "Copied to clipboard.");
142 | else tooltip(el, "Press CTRL+C to copy");
143 | }
144 | else
145 | {
146 | if (!navigator.userAgent.match(/ipad|ipod|iphone|android|silk/i))
147 | tooltip(el, "Press CTRL+C to copy");
148 | }
149 | }
150 | }
151 |
152 |
153 | //创建可运行html代码段的iframe ele：父元素，code：html代码段，w:宽度， h:高度
154 | getFrameCode=function(ele,code,w,h){
155 | var l=document,
156 | j = l.getElementsByTagName('base'),
157 | m = j[j.length - 1],
158 | i = l.createElement('iframe'),
159 | u = ['', ''].join(code||"");
160 | try {
161 | i = l.createElement('