Bowen
### 💻 - [ ] Would you like to work on a fix? ### How are you using Babel? babel-loader (webpack) ### Input code ```js class App extends React.Component {...
I created this project one year after graduation. In the past few years, the front-end technology stack has greatly changed, some dependencies of this project have become outdated or unmaintained....
之前在公司 hackday 中需要渲染一个树形结构的数据，需要对树的布局进行计算，最后当然是使用现成的库。 之前开发 [regex-vis](https://github.com/Bowen7/regex-vis) 也渲染了类似树形结构的数据，因为特定的呈现效果，`regex-vis` 的图形渲染比较简单，就直接手写了 这两次经历促使我想更深入了解树的布局算法，于是阅读了几篇相关的论文，这里记录一下。 下文每个小标题即是论文的标题，关于论文具体可见文末的参考文献 文中的每个算法代码片段，在我的 [博客网站](https://www.bowencodes.com/post/tree-layout-algorithm) 可实时预览渲染结果。 同时为了便于理解，文中树的每个节点都是边长为单位 1 的正方形 ## Aesthetic layout of generalized tree 首先，绘制一棵树，我们当然希望它尽可能的美观，那怎样才算美观呢？ 这里列出文中提到的 7 条美观要求，我们在下面的布局算法也会对照这 7 条： 1. 兄弟节点的顶部边缘在同一水平线上 2....
[博客地址](https://www.bowencodes.com/post/regex-vis) [regex-vis.com](https://regex-vis.com) 是一个辅助学习、编写和验证正则的工具。它不仅能对正则进行可视化展示，而且提供可视编辑正则的能力 ## 功能简介 可以直接去 [regex-vis.com](https://regex-vis.com) 体验它的功能，[仓库](https://github.com/Bowen7/regex-vis) 的 README 也有一个简单演示。如果喜欢的可以点个 Star。如果发现问题可以提 [Issue](https://github.com/Bowen7/regex-vis/issues)，我会尽快修复 简单来说，你输入一个正则表达式后，会生成它的可视化图形。然后可以点选或框选图形中的单个或多个节点，再在右侧操作面板对其进行操作，具体操作取决于节点的类型，比如在其右侧插入空节点、为节点编组、为节点增加量词等 其他小功能: - 黑夜 / 白天模式切换 - 输入测试用例，测试正则表达式 - 常用正则表达式样例展示 ## 工作流程 ### 从正则表达式到可视化图形 #### Parser Parser...
[博客地址](https://www.bowencodes.com/post/rust-mdx) [@mdxor/compiler](https://github.com/mdxor/compiler) 是一个用 Rust 编写、高速并且零依赖的 MDX 解析器。 我刚刚完成它的绝大部分功能，这里分享一下它的实际效果和实现原理 ## Benchmark 为了测试其在前端领域的性能，我不仅将 `@mdxor/compiler` 通过 Napi-rs 封装成 Node.js native addon， 还把 `@mdxor/compiler` 编译成 wasm，以分别测试其在 Node.js 和浏览器上的速度 以下是测试结果（仅供参考，[Benchmark 代码](https://github.com/mdxor/compiler/tree/main/benchmark)）： ```ssh MacBook Pro (13-inch,...
[在线预览](https://bowencodes.com/demos/buildings) [Demo 源码](https://github.com/Bowen7/Blog/tree/master/demos/buildings) 在新版本的 Cesium(1.87.0)，支持了 CustomShader，可以为 Cesium3DTileset 编写自定义的 GLSL 代码。在此之前，要修改 3D Tileset 的样式，只能通过 style 属性，能做的最多也就是根据高度使不同建筑展示不同颜色这种程度。 CustomShader 的基础用法可以查看[官方文档](https://github.com/CesiumGS/cesium/blob/main/Source/Scene/ModelExperimental/CustomShaderGuide/README.md)，这里不再赘述，主要是介绍如何利用 CustomShader 实现建筑贴图。 ### 楼顶着色 首先，楼顶不会和四周贴一样的图，先统一处理成深色。 并没有直接的属性表明当前点位于哪块墙上，但阅读文档可以发现，Cesium 提供了 normalMC 属性，也就是这个点所在平面的单位法向量。而楼顶一般是于地面平行的，将其法向量与地面的法向量比较，如果夹角较小，就可以把它看作楼顶。 FragmentShader 代码如下（normalMC 在片段着色器不可用，需要在顶点着色器中通过 varying...
访问我的 [个人博客网站](https://bowencodes.com/post/fast-blur) ，获取更好的阅读体验 本文主要是针对高斯模糊算法进行优化，最后在线性时间内实现高斯模糊效果。当然，该算法并非本人原创，实现过程中也借鉴了一些文章和论文，相关链接都在文末贴出 搭配阅读，我写了一个简单的 Demo， [Demo 链接](https://bowencodes.com/demos/blur) ， [Demo 代码地址](https://github.com/Bowen7/Blog/tree/master/demos/blur) ，可以在 Demo 中测试各种模糊效果及其耗时 ### 高斯模糊 高斯模糊可以实现非常平滑的模糊效果，对于每一个像素，它会取它本身及其周围一定范围内的像素，去计算模糊后的效果，当然，每个像素在计算过程中所占的权重并不相同，距离其本身越近，权重越高 —— 这当然是合理的。权重的计算公式如下：  公式中的 σ(sigma) 是人为定值的，值越大，生成的图像越模糊 当然，并非所有像素都会互相影响，以当前像素为圆心，取一个半径，在这个半径以内的像素才会影响该像素的模糊效果。这个半径与 sigma 成正比，不过没有统一的公式，在 [这个提问](https://stackoverflow.com/questions/17841098/gaussian-blur-standard-deviation-radius-and-kernel-size) 下，有回答说 NVidia 采用的是...
访问 [https://bowencodes.com](https://bowencodes.com) 以获得最佳体验 最近看[https://github.com/isaacs/node-lru-cache/blob/master/index.js](https://github.com/isaacs/node-lru-cache/blob/master/index.js)源码，发现用到一个叫`yallist`的库，`yallist`的readme上写着`For when an array would be too big, and a Map can't be iterated in reverse order.`，翻译一下就是当数组特别大的时候可以用它，为什么不用Map呢，因为Map不能倒序遍历 可以从 lru-cache 的 issue 看到（`https://github.com/isaacs/node-lru-cache/issues/63`），在它较早的版本中，它使用的是Map储存cache，因为Map无法直接进行倒序遍历，而是需要进行`reverseKeys`，每一次倒序遍历都先需要进行一次正序遍历&创建一个额外的数组；若是使用数组储存，则无法很快捷地拿到在缓存中的位置 后来作者进行了修改，`yallist`也由此诞生。`yallist`使用的是双向链表储存，很好地解决了上述问题 ### 双向链表的实现 用js实现一波双向链表（这是我自己的实现，想看`yallist`的实现可移步至[https://github.com/isaacs/yallist/blob/master/yallist.js](https://github.com/isaacs/yallist/blob/master/yallist.js)）： ```js...
访问 [https://bowencodes.com](https://bowencodes.com) 以获得最佳体验 上周因为不可抗力的因素，没能写出文章出来（实在没有办法，中秋假期花了两天，还是没弄懂），这次正好工作中遇到了一个小坑，写出来，当作补上周的吧 在一个项目中，由于项目很大，不便多人协作开发，遂拆分一些业务代码单独成一个npm包，这些包通过主包传的store和一些基础方法与主包通信，而在这种情况下，我们一般都会使用npm link的方式进行开发调试： ```js // 姑且主包名为project，分出的npm包名为module cd module npm link cd project npm link module ``` 很简单的几句命令，module就被链接到project的node_modules下了，正常情况下，我们能很轻松地进行开发和调试。但由于module并不是真正地移动到了project的node_modules下，而是以一种链接的形式，所以，module无法使用project的node_modules下的其他包，而是单独维护一个node_modules，这在一般情况下并无异常，但在有些情况下却会发生出意外的错误 这就是在project和module有相同的依赖包，且这个包会因为存在两个实例出现问题时。 比如我在npm link时对project里的A包做了一些操作，同时module里也有A包，这时两个A包并不是一个实例，它们互不影响。而在通过npm安装module时，它们用的都是一个A实例，这时可能就会出现一些问题 那有没有比较好的解决方案呢？ ~~我暂时还没有找到，如果你有完美的解决方案，请告诉我~~ ~~但我提供了一种稍好一些的方法：~~ ~~在npm link发生问题时，我们可能会想到通过npm publish再npm install的方式去调试，但这样会频繁的发布npm包，显然是不太好和不规范的（有时甚至没有权限发布）；我想到的一种替代方式是，将package.json中模块的版本号改为git+ssh://[git地址]#[分支名]，这样就不会去npm资源里拉取了，而是去git里拉取，而且可以指定分支，操控性比较大。~~...
访问 [https://bowencodes.com](https://bowencodes.com) 以获得最佳体验 在百度或者 Google 搜索的时候，有时会小手一抖，打错了个别字母，比如我们想搜索`apple`，错打成了`appel`，但神奇的是，即使我们敲下回车，搜索引擎也会自动搜索`apple`而不是`appel`，这是怎么实现的呢？本文就将从头实现一个 JavaScript 版的拼写检查器 ### 基础理论 首先，我们要确定如何量化敲错单词的概率，我们将原本想打出的单词设为 origin(O)，错打的单词设为 error(E) 由`贝叶斯定理`我们可知：`P(O|E)=P(O)*P(E|O)/P(E)` P(O|E)是我们需要的结果，也就是在打出错误单词 E 的情况下，原本想打的单词是 O 的概率 P(O)我们可以看作是 O 出现的概率，是先验概率，这个我们可以从大量的语料环境中获取 P(E|O)是原本想打单词 O 却打成了 E 的概率，这个可以用最短编辑距离模拟概率，比如原本想打的单词是`apple`，打成`applee`(最短编辑距离为 1)的概率比`appleee`(最短编辑距离为 2)自然要大 P(E)由于我们已知...