2021-04
每天给你推荐一个新奇,好玩,高品质的开源库,好文,观点或言论等。
项目主页维护当前月份的内容,想看往期内容,可以翻到下方历史汇总部分,然后选择自己感兴趣的月份点进去即可。

2021-04

2021-04-30[网站]

一个可视化正则的网站。类似的网站我之前推荐过一个,之所以再次推荐这个是因为它是基于 JS 的正则引擎,因此如果你使用 JS 的正则,使用它可能会更精确。
由于不可描述的原因,不同语言正则的标准都不太一样。

2021-04-29[工具]

今天推荐的是一个 mac 端的 app 《Dropover》。通过它可以使得拖拽如丝般柔顺,实现一些很有趣的功能。

2021-04-28[工具]

markdown-preview-enhanced 是一个增强版的 markdown 预览工具,目前支持 atom 和 vscode。
说它是增强版一点都不过分,它是我见过的最强的 markdown 预览插件。支持 ppt 模式,主题定制,公式显示等等诸多功能。
markdown-preview-enhanced
导出的 ppt 效果
此外也有一款工具也可以将 md 转化为 ppt,效果比较一般。 都是他自带了一个服务端,你可以实现云端投屏(air play)的效果。
air play

2021-04-27[言论]

我建议大家多学习几门编程语言。 这样不仅在必要的时候可以用到,而且可以扩展你的视野。 比如 JS 中有一个 import 语法。
1
import { useState } from "react";
Copied!
这种语法我个人觉得设计地并不好。相反,我觉得 Python 的设计就很好。Python 的话是这样导入的:
1
from bisect import bisect_left
Copied!
可以看出是 from 在前,这有什么好处? 这样就可以输入 from 就有智能提示, 输入 from bisect import 会得到进一步的智能提示。而 JS 呢?
类似的例子还有很多,所以我建议大家多学习几门编程语言。 我推荐几门语言给大家吧。 Python, Scala(或者 Elm),C++,这几个各有特色。

2021-04-26[仓库]

所谓talk is cheap, show me code。平时我们参加面试,有时候会有一些笔试环节,让你手写代码。而现在很多都是线上的视频面试,因此很多公司开始使用云端编辑器,使得面试官和求职者贡献一个页面,实时进行”友好“交流。
大公司可能会直接自研(比如阿里的伯乐系统),也会直接买商用的(比如牛客系统)。这方面的开源工具不多,今天给大家介绍的就是一个开源的在线笔试平台 show me the code

2021-04-23[好文]

一个非常详细的 vscode 插件编写指南。通过它你可以实现一个最简单的插件。万事开头难,等你开了头之后,后面就可以自己摸索了。

2021-04-22[好文]

awk 是一个简单,好用的基于列的文本处理工具。如果你需要处理一些列分割的文本,那么一定考虑它。功能非常强大,很多语法和 Python 比较像,学习成本不高(一个小时就够了)。
最近看了一篇文章使用 awk 生成二维数组,并基于此处理文本。由于以前都没这么用过,感觉还是蛮有意思的。文章地址:https://www.lujun9972.win/blog/2021/04/15/%E4%BD%BF%E7%94%A8awk%E6%9F%A5%E6%89%BE%E5%B9%B6%E4%BF%AE%E5%A4%8D%E6%95%B0%E6%8D%AE%E4%B8%AD%E4%B8%80%E5%AF%B9%E5%A4%9A%E7%9A%84%E4%B8%8D%E4%B8%80%E8%87%B4%E9%97%AE%E9%A2%98/index.html
虽然学习 awk 不难,但是网上资料良莠不齐,我推荐一个快速入门,十分钟左右就能看完。看完掌握 80% awk 内容不成问题。

2021-04-21[好文]

如何写一个 vscode 插件?这篇文章告诉你。
这篇文章的特色有:
    提供代码,更具有实战价值。
    系统讲解了 vscode 插件的整体结构。虽然不够详细,但是知识系统化,你需要什么更精细的内容,可以阅读官方文档或者其他细粒度的资料。
    vscode 的插件需要用到的常见 api 都进行了讲解。除此之外还讲了如何调试和测试插件,可以说相当全面了。
如果你正准备开发 vscode 插件,或者将来有开发 vscode 插件的打算,那么这篇入门文章会很适合你。

2021-04-20[好文]

vim 是一门语言。掌握 vim 的人对其爱不释手,不懂得人对其望而生畏。
你有过使用 vim ,却不知道如何退出的窘境么?
我的浏览器和 vscode 都装了 vim。 (如果可能的话,想给自己操作系统也装一个 vim 插件)。
文章提到了学习 vim 的几种境界:
    Level 0: not knowing about Vim
    Level 1: knows Vim basics
    Level 2: knows visual mode
    Level 3: knows various motions
    Level 4: not needing visual mode
我感觉自己在 2 和 3 之间,如果能达到 4,你肯定会对 vim 爱不释手的。
这篇文章是我见过的 vim 讲的比较不错的之一,推荐给大家。

2021-04-19[类库]

    language: JS
你或许听说过使用 gpu 加速动画。你听过使用 gpu 运行 js 代码么?就像 web worker 一样?
gpu.js 就是这样的一个工具库,可以帮助你使用 gpu 的能力加速你的应用。不过不建议在一些简单的项目中使用,因为那样做不仅增加了项目复杂度还有可能造成性能不升反降。

2021-04-16[好文]

Git Submodule 大家使用过么? submodule 其实不难理解,它就像是一个指向另外一个远程仓库的远程指针。
我其实早就知道这个概念了,但是一直没有机会使用,直到最近在做公司的一个项目的时候。这让我感受到了”纸上得来终觉浅“。这篇文章从作者自身的角度出发,一步一步讲述了为啥使用 submodule 以及如何做的,解决了什么问题。每一个问题都讲解地很清楚。读完之后自己试下,效果更好哦~

2021-04-15[好文]

正如文章所说,做一个打包工具其实不难的,我之前就自己徒手撸了一个小的打包器,核心代码不到 100 行,仓库地址:从零开始开发一个 Webpack。打包器难的地方在于如何设计插件系统。以及如何支持更多其他功能(比如虚拟模块)。
文章标题《基于 esbuild 的 universal bundler 设计》,详细讲述了打包器是什么,以及设计一个通用的打包器需要考虑什么。

2021-04-14[类库]

eslint-plugin-clean-regex 是一个帮助你写出干净正则表达式的 eslint 插件。
比如如下的正则就是”不干净“的。
    /(?:\w|\d)+/
    /(?:a|(b)|c|(?:d)|(?:ee)){0,}/
    /(?<!\w)a+(?=$)/mi
    /[\s\S]#[\0-\uFFFF]/ysi
    /\d\w(?:[a-z_]|\d+)/im
这个插件会提示你改成下面这样(和上面一一对应):
    /\w+/
    /(?:[acd]|(b)|ee)*/
    /\ba+$/im
    /.#./sy
    /\w+/

2021-04-13[好文]

不少前端 npm script 太过依赖。将所有的命令都写到 package.json 的 script 中,然后通过 npm run xxx 的形式执行。
这在一些小项目没啥问题,甚至 react 和 vue 的脚手架生产的项目工程都是这样的。但是当你的项目规模增长,脚本增多。npm script 的问题就暴露出来了,比如依赖管理比较复杂,再比如每次构建都是全量构建(不考虑优化),即使你根本没有改变代码。相比于 npm script, 老牌的 makefile 可以很好地解决这些问题。
如果你参与的是大型项目,不妨考虑使用 makefile 来管理你的项目。

2021-04-12[好文]

美团技术团队出的优质 Flutter Web 实践文章,文章标题《Flutter Web 在美团外卖的实践》。
文章从基础架构,性能优化,流程等多方面对问题进行了分析,值得大家学习。如果你正好在学习和使用 Flutter,那么就更应该看一下啦~

2021-04-09[类库]

bytemd 字节跳动团队开发的一个基于 svelte(一个 JS 框架)的 Markdown 编辑器。功能非常多,符合了代码高亮,流程图,主题等方方面面,掘金就是基于它开发的。你可以基于它做一些扩展,给你的网站增加 markdown 编辑的能力。
bytemd 使用效果

2021-04-08[仓库]

为了学习 html 的解析过程,手写的一个 html 解析器,用于将 html 字符串解析为树形结构。

2021-04-07[类库]

sql.js 是一个在 web 端运行的 SQLite 库。 通过它,你就可以直接在 web 端操作”SQLite“ 了。之所以加了引号,是因为它并不是真正的 sqlite,而是符合 sqlite 规范的内存型数据库。它将所有的数据统一放到内存中进行管理。
它允许你导入已有的 sqlite 数据库,并支持导出符合 sqlite 规范的格式,很神奇吧?
下面是官方提供的演示代码:
1
const initSqlJs = require("sql.js");
2
3
const SQL = await initSqlJs({
4
locateFile: (file) => `https://sql.js.org/dist/${file}`,
5
});
6
7
// Create a database
8
var db = new SQL.Database();
9
10
// Prepare an sql statement
11
var stmt = db.prepare("SELECT * FROM hello WHERE a=:aval AND b=:bval");
12
13
// Bind values to the parameters and fetch the results of the query
14
var result = stmt.getAsObject({ ":aval": 1, ":bval": "world" });
15
console.log(result); // Will print {a:1, b:'world'}
Copied!

2021-04-06[工具]

今天介绍的 spectacle 并不是 mac 上的窗口管理工具,而是一个 JS 库。 功能和 revealjs 一样,都是用来做精美的 PPT 的。

2021-04-05[好文]

网上讲 https 文章很多。但是大多数是讲原理的,本文直接使用 openssl 通过代码(严格来说是命令行)让你理解 https,毕竟纸上得来终觉浅,绝知此事要躬行。

2021-04-02[类库]

之前我关注 lit-html,现在我开始关注 linkeddom。两者都是没有编译时,在运行时解决字符串为 DOM 的类库。
一个简单的用法:
1
const {
2
// note, these are *not* globals
3
window, document, customElements,
4
HTMLElement,
5
Event, CustomEvent
6
// other exports ..
7
} = parseHTML(`
8
<!doctype html>
9
<html lang="en">
10
<head>
11
<title>Hello SSR</title>
12
</head>
13
<body>
14
<form>
15
<input name="user">
16
<button>
17
Submit
18
</button>
19
</form>
20
</body>
21
</html>
Copied!
linkdom 功能更加丰富,而且对标准的支持更加好一点。不过两者也不是替代关系,这两个大家都可以关注一下。

2021-04-01[Github Action]

Issues Translator 是一个可以自动将 Github 的中文 issue 翻译为英文的 Github Action。如果你的项目是面向全世界开发者的,那么就可以考虑使用 ta 。

关注我

我重新整理了下自己的公众号,并且我还给它换了一个名字脑洞前端,它是一个帮助你打开大前端新世界大门的钥匙 🔑,在这里你可以听到新奇的观点,看到一些技术尝新,还会收到系统性总结和思考。
在这里我会尽量通过图的形式来阐述一些概念和逻辑,帮助大家快速理解,图解是我的目标。
之后我的文章会同步到微信公众号 脑洞前端 ,你可以关注获取最新的文章,并和我进行交流。
另外你可以回复大前端进大前端微信交流群, 回复 leetcode 拉你进 leetcode 微信群,如果想加入 qq 群,请回复 qq。
Last modified 2mo ago