2019-10
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。。
虽然我们不是专门的网络工程师，但是不免在实际工作以及面试中会需要这方面的知识，当然这是浅层的即可。如果完全不知道，那么对于一些网络性能优化问题肯定是没有概念，从而无从下手的。
网上关于 HTTP 协议的文章很多，面试的时候关于 HTTP 三大版本的差异也是热门考点。这篇文章就通俗易懂地解释了
HTTP/2与HTTP/3 的新特性, 相比于之前，为什么要推出新的协议，核心解决了什么问题？有什么不足？ 这些东西网上资料要么就是太专业，要么就是太笼统和人云亦云，这篇文章是相对比较适合新手读的一个文章。
文章地址： https://segmentfault.com/a/1190000020714686#articleHeader16
很多年前我自己写过一个简陋的
pub/sub库, 这个仓库甚至被一些人在用。很多时候我们需要用到这种灵活的pub/sub功能，这个时候我们就会自己实现，或者用一些开源的。 今天给大家介绍的就是鼎鼎大名的 Jason Miller 写的一个tiny event pub sub implement，代码就几十行，不仅注释详实，而且给出了丰富的类型定义，代码简单易懂，非常适合学习。代码地址： https://github.com/developit/mitt/blob/master/src/index.js
今天我继续给大家介绍几个正则学习&练习的网站。
- regexone 是一个交互友好，面向新手的一个正则练习网站，可以交互式地学习正则，右边还贴心地给出了 Notes，另外语言不同其实正则规范也不太一样，这个网站给出了不同语言的正则讲解，很用心。值得一题的是，里面的资料非常新，最新的
/u- interpret the regular expression as unicode codepoints都有。
这个是人称贺老的百姓网贺师俊
Hax整理的一份中文技术活动日程， 这些活动有几个特点：- 技术活动的主要语言是中文
- 技术活动的主要参与者是程序员
- 技术活动的主要日程接受公开报名
- 技术活动具有一定规模
目前 这个仓库仅有个简陋的
yaml 数据文件，记录技术活动的时间和一些信息。后续希望能加入一个更好的查询界面。活动组织者可直接修改数据文件并提交 PR，或提交 issue 描述一下活动情况。活动组织者也可以 watch 本仓库，这样当有变动时（通常是会议信息更新），可以收到通知。
仓库地址：https://github.com/hax/chinese-tech-conf-schedule
使用起来也非常简单，直接复制图片，然后点击对应的图片即可，另外值得一提的是它本身还支持直接生成 MardDown 链接，这对经常用 MarkDown 写作的我来说绝对是一个非常实用的功能。
今天是 1024 程序员节，祝广大的程序员们节日快乐。🎩🎩🎩🎩🎩🎩
之前给大家介绍了一款跨平台的 Web 平台技术栈检测工具 Wappalyzer。这几天我看了下他的源码，觉得很不错，于是就想着推荐给大家。
Wappalyzer 的整体架构非常有意思，这里讲一下我发现的主要特点，更多细节等待着你的探索。
- 平台相关的代码放在 drivers 文件夹下，公共的代码在 src/wappalyzer.js
- 特地写了 validate 脚本来检测代码。
- 将检测逻辑抽离到了 src/app.json 中， 以配置文件的形式存放（这个 json 文件结构设计地很精巧，应该是花了心思的）
- 主要采用正则来检测应用
- 考虑到间接引用，比如框架 A 引用了 B，那么检测到了 A 也会把 B 带上
Github 地址： https://github.com/AliasIO/Wappalyzer
今天给广大的前端朋友们介绍一个在线做题的网站，可以瞬间在线知道答案，而且不需要登陆，一共 58 道题目，不知道后续会不会更新。 这个网站的题目我看了其实没有什么新意，但是不需要登陆而是直接使用 LocalStorage 来存储你的答题情况对用户来说很轻量，给我的感觉很 好，感兴趣的可以试一下。
(题目列表)
(题目详情)
网址： https://quiz.typeofnan.dev/
前一段时间王思聪的股权遭到了冻结，据中新经纬记者计算，王思聪名下冻结股权价值合计已经超过 8445 万元。
“这种情况一般是王思聪欠别人钱，别人追讨，作为诉讼保全措施冻结的。”金杜律师事务所律师李量接受虎嗅采访时说，“王思聪欠钱可以是直接欠，或和贾跃亭一样，给别人提供担保，承担了连带责任。”
但是实际上这种冻结对于王思聪来说根本起不到作用，他会有很多方法来免除所谓的强制执行，他只要将自己的股权先一步将股权质押给万达集团，这样
质押权人就对被保全的股份有优先权, 换句话说这对王思聪来说这种冻结根本无效。现实中有很多这样的事情，这些规则似乎是在
限制那些“能力不足”的人，而对社会上这些“制造规则的人”无能为力。更可悲的是，很多人对这些不知道，不关注。其实越是贫穷的家庭，越是生活在社会底层的人，他们的后代，大概率还会是穷人。其实，我们奋斗的目标无非就是：让子女一出生就站在了别人的肩膀上！我是一个有着轻微强迫症的人，社交软件的小红点有时候会打乱我的节奏，将我从专注模式(Focus Mode)强制转化为发散模式（Diffuse Mode）。 这两种模式适合我们做不同类型的工作，因此掌控小红点，避免这种不希望的模式切换是提高效率的一个有效途径。
我的做法是：
- 手机静音
- 电脑关闭红点提醒
mac 电脑可以在系统偏好设置 - 通知 - 对应 APP - 将标记应用程序的勾去掉
一般而言，你也不用担心会错过什么东西，因为右侧通知还是会有的，比如钉钉的会议提醒等。
经过这样的设置，你就可以自由切换两种模式，而不会被频繁打断，当然还是会有人来打断你，这个问题我们以后再讲。
UMI 的官方定位是
可插拔的企业级 react 应用框架。其作者云谦也是 Ant-Design，dvajs 的核心贡献者，同时也是我早期关注的人之一。这个项目的价值绝对不亚于更受大家欢迎的 dvajs，是一个值得学习的项目。说白了，Umi 和 create-react-app（cra）类似，就是现有技术栈的组合，封装细节，让开发者用起来更简单，只写业务代码就可以了，它有几个特点：
- 零配置就是默认选型都给你做好了。
- 开箱即用就是技术栈都固化了。
- 约定大于配置，开发模式也固化好了。
下图是云谦介绍 umi 的定位的时候贴的一张架构图：
项目地址：https://github.com/umijs/umi
之前分享过《2019-09-23 - 为什么一行 80 个字符是一个值得遵守的规范，即使你拥有 4k 显示器？》，里面提到了并排窗口的问题。 多个显示器确实可以提高效率，如果你能高效地利用每一个显示器，效果会更 棒。
配合 4k 大屏显示器效果更棒
今天介绍的这款工具就是一款窗口布局工具，能够快速修改当前窗口大小并放置在指定位置，Moom 默认操作点设立在了窗口左上角的绿色按钮上，将鼠标 hover 在绿钮上就会弹出一个选择菜单，里面有五种尺寸可选，单击选项即可变化窗口大小，并能将窗口移动到指定位置。
搭配使用快捷键效果更棒
今天给大家推荐的是一款非常好用的 Chrome 插件，可以用来查看网站是由什么技术栈构建的。其实类似的软件也有别的，但是这个是我使用过的最好的一个。
（这个是其官网的检测结果）
（这个是 GitHub 的检测结果）
项目主页： https://www.wappalyzer.com
今天给大家分享一个微信小技巧，据说有的人还不知道，所以今天就把它分享出来，大家如果有什么微信使用小技巧也欢迎在下方进行评论。
今天的小技巧是
判断对方是否把你拉黑或者删除:- 1.给对方转账，是好友会让你输入密码，不是好友都不用你输入密码，直接弹出下图，整个过程好友不知情的！
- 如果拉黑会提示：
请确认你和他（她）的好友关系是否正常 - 如果删除，则会提示：
你不是收款方的好友
- 1.点开好友名片，如果显示左图，说明她真的没有发过一条朋友圈。若显示右图，点开个人相册却什么也看不到，那么你有可能被删除、拉黑、朋友圈屏蔽，或者发过朋友圈但设为私密了。
为了搞清楚对方是删除还是屏蔽，你就可以用到开头转账的那一招啦！
如果想做一些高级的东西，编译是一个绕不过的坎，Babel 是一个前端的转义工具，Babel 有着自己的插件系统，这是个系列文章，通过这个系列你可以学到 AST，以及 Babel 插件相关的东西，并且你可以自己动手写一个 Babel 插件。
文章地址：
前端在调试兼容性样式的时候是一个很头疼的问题，各个浏览器以及同一个浏览器不同版本支持的 css 都是不同的，比如有些不支持 Grid，有些不支持 cal 函数。如果你自己根据这些去修改代码肯定是非常低效的，这个 Chrome 插件就是解决这样的问题，你可以在高级的浏览器上调试，自行禁用一些 css 特性来 debug。
仓库地址： https://github.com/keithclark/css-feature-toggle-devtools-extension
chrome 插件地址： https://chrome.google.com/webstore/detail/css-feature-toggles/aeinmfddnniiloadoappmdnffcbffnjg
常用正则大全, 支持 vscode 扩展插件
值得一提的是它支持 VSCode 插件形式使用：
目前有 57 个正则：
插件地址： https://github.com/any86/any-rule
傅里叶变换是一种在各个领域都经常使用的数学工具。这个网站将为你介绍傅里叶变换能干什么，为什么傅里叶变换非常有用，以及你如何利用傅里叶变换干漂亮的事。傅立叶变换有很多实际的应用，比如 MP3 的原理，MP3 是如何将声波转化为二进制，并如何进行压缩的？ 比如 JPEG 的原理等。
这个文章（网站）是我见过傅立叶变换最直观的一个解释之一，并且支持交互式操作。
网站地址： http://www.jezzamon.com/fourier/zh-cn.html
VSCode 是我经常使用的一个软件，结合自己的开发习惯我也会增加很多配置和插件等，如何将这些插件进行备份以便将来换电脑可以及时同步过来，这里关于 VScode 的配置我用的是 VSCode setting sync 插件。
这个需要结合 Gist 使用，具体使用方式请查看官方文档：
如果大家没有更好的方式，不妨采用这种方式，如果你有更好的方式欢迎给我留言。
今天是国庆结束的第一天，大家假期玩的怎么样？ 希望大家可以尽快从假期的状态中转变回来。今天给大家推荐一个我个人使用比较多的一个功能，就是
剪贴板历史。我在使用手机的时候（笔者使用的是安卓机），会经常复制一些文字或者图片，然后进行粘贴，有时候会需要粘贴之前复制的一个东西，因此剪贴板历史就显得很重要，手机上我用的就是
搜索输入法 自带的剪贴板历史功能。而在电脑上我使用的是 Alfred 自带的
剪贴板历史功能，只不过默认不开启，你需要去配置一下才行。
然后你就可以查看你的剪贴板历史了：
我重新整理了下自己的公众号，并且我还给它换了一个名字
脑洞前端，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解 ，图解是我的目标。
之后我的文章会同步到微信公众号
脑洞前端 ，你可以关注获取最新的文章，并和我进行交流。另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。
Last modified 2mo ago