漠漠水田飞白鹭 —— 王维的自然世界

最近碰到了一个神奇的问题，在一个overflow:auto的容器上点击滚轮（鼠标中键），导致整个页面卡住。 其实说卡住也不完全，因为可以进行TAB切换焦点等键盘操作，说明渲染引擎并没有卡死，而是页面无法交互。 经过一番Debug，终于找到了原因，下面给出一个最小复现例子。 BUG复现，测试使用Chrome Version 110.0.5481.177 (Official Build) (64-bit) 进入后拖动滚动条(绿色)可以正常左右滚动，但是当按下鼠标中键后整个TAB卡死。

开心往前飞吧，皮奥莱维奇。

我最近在做WebGL相关的图表开发，主要使用Three.js（不过本文和Three.js无关）。 我遇到一个非常简单且典型的需求是散点图(Scatter)，但是这在GL的世界并不容易。 散点图的点不同于普通的三维物体，其不具备透视性，即放大缩小后仍然保持原始的大小。 如果使用Mesh，则需要在缩放的时候动态调整大小，一方面很不方便，另一方面每一个圆点都是数十个三角形，对于大规模数据有性能方面的影响。 这时我注意到Three.js提供的Points物体，其具备了不透视的性质。

我已经阳了六天了，悦悦阳了三天。 好消息是我的手术卡在了爆发前，已经告一段落。 坏消息是六天了我还没好，头痛欲裂。 悦悦和我把这些天的各种症状和我们尝试的方法总结在此，供大家参考。 鼻腔和口腔，哪里难受捅哪里 —— 悦悦 我在有症状的第二天按照说明书指示捅鼻腔，但是得到的是一条杠阴性。 当时没有鼻塞等症状，而是咽痛。 在悦悦的建议下，第二天改为捅嗓子，一滴上去10秒钟就鲜红的两道杠。 后来又问了其他朋友，有好几个人也都是捅嗓子才阳的。

2013年我第一次住院，一个月的时间里见了许多有趣的故事。

今天是我一个新的开始，我想常常写下一些文字，来记录生活和思考。

最近进行了第一次深入的Web JS内存优化。遇到了一些问题在此记录。 许多工具和三方库会在开发模式下有特定的debug逻辑，可能会导致内存泄漏。 最好是在production模式下进行调试，但是即使如此，也有可能会受到干扰。 我在本次调试中发现了以下几点需要注意的外部环境问题 一些第三方库可能需要手动销毁对象，这通常是由于使用了ArrayBuffer等native对象。 例如Three.js，专门有一篇文档：如何废置对象 不过此类问题比较容易发现，也容易解决。

扔鸡蛋问题是一道经典的算法题，LeetCode链接。 该题目下有很多算法详解，包括官方解答。 但是今天我们不聊动态规划，从数学的角度解决这个问题。 有kkk个鸡蛋，fff层楼，求最小次数n(k,f)n(k,f)n(k,f)。 易知，n(1,f)=fn(1,f) = fn(1,f)=f，即一个鸡蛋只能从一楼开始逐层尝试。 然而，当k=2k=2k=2的时候，问题就难以通过简单的心算来得到答案。但是容易观察到：

JS以其单线程事件循环模型在UI和IO密集型应用中有着很好的表现相性。 但是当我们用Electron构建桌面应用时，不可避免地需要进行某些CPU密集的任务。 为了解决JS多线程的问题，WebWorker应运而生(MDN WebWorker)。 WebWorker是独立的工作者线程，它与主线程不共享任何状态，只通过事件通信。 类似的，在Node世界中，标准库为我们提供了worker_threads模块，其实现了与WebWorker相同的工作者。DOC

Electron是基于Javascript构建桌面应用的框架。 而React是最流行的Javascript UI库。 为了能在Electron框架下更好地使用React，于是就有了 Electron React Boilerplate。 本文基于ERB-4.5.0版本。 ERB集成了丰富的特性，包括但不限于 这些内容都可以在官方文档中找到怎样使用，本文将不再赘述。 下面将详细讲解ERB的整体流程和各个组件如何协作，重在WHY，而不止于HOW。

由于近期关于全年一次性奖金优惠税率的政策变动，引发了同事之间关于税收的大讨论。 简单的搜索了一下，没有找到很好用的个税计算器，关于年终奖的说明也不清晰。 故查阅了相关资料，自己做了下面的个税计算器。另附税率表以及关于奖金的常见问题。 希望对大家有所帮助。（如果需要对比，建议打开两个窗口） 年综合累计所得税率表

IDEA是JetBrain公司推出的Java集成开发环境。 由于其强大而又易用，受到了许多开发者的青睐。 JetBrain公司随后又推出了PyCharm, GoLand, WebStorm等软件用于各种语言的开发。 事实上他们都是IDEA的定制版，他们的核心功能都和IDEA相同。 本文将介绍IDEA的各种使用技巧，他们适用于所有一系列的JetBrain产品。 我们要学习的第一个也是最重要的功能就是查找动作 (Find Action)。默认快捷键为CTRL+SHIFT+A。

看到标题你或许会内心一惊，但是请放心，这里是正经博客，讨论的是一个数学问题 小便池问题是在我初中时期广为流传的一个问题(梗)。 在和H君和R君(当然，我早就和悦悦讲过🙂)两次提起这个问题之后，终于勾起了我重新解题的冲动。 距离上一次思考这个问题已经是十多年前了，彼时的我并没有得出通解，一觉过后也就未再深究。 今天希望我可以顺利解出。 男同胞可以选择跳过本节 一般男厕所由两部分组成，即小便池和单间。 其中小便池通常一字排开，条件好一点的还会有隔板隔开。

原题链接 原问题很简单，如何在Typescript中定义一个联合特定范围数字的整型类型。 Accepted Answer给出的答案是： No it's not possible. That kind of precise type constraint is not available in typescript (yet?) Only runtime checks/assertions can achieve that :(

自2012年诞生至今已有10个年头，Typescript已然成为Javascript项目的标配。 Typescript的类型系统是笔者学过的几门语言中表现力最强的，同时也兼顾了可读性易用性。 本文将介绍Typescript的类型系统的各种(高级)用法，帮助你在需要时定义更贴合业务的强大类型。 关于基础知识，在这里不做赘述，如有需要请自行阅读官方文档。主要包括 我们可以通过type关键字来定义类型别名，这可以简化我们的类型注解，不需要在每一处写冗长的类型。

渐进式网页应用(简称PWA)是一种Web应用标准。 通过使用一系列新兴技术让你的Web应用快速，安全，可安装，可离线使用，可适配各种设备，使其拥有不亚于原生应用的使用体验。 主要技术包括App Manifest, Service Worker, Web Push等 PWA最早由Google于2015年发起，同年Chrome支持Service Worker。 之后，Safari和Edge也相继在2018年和2019年提供支持。

屏障执行模式(Barrier Execution Mode)是Spark 2.4版本引入的新的执行模式。 旨在支持让Spark平台支持更多样化的工作类型，例如调度ML(机器学习)/DL(深度学习)训练任务。 本文将带你了解什么是屏障执行模式，为什么Spark需要，以及如何使用。 MapReduce是大多数流行框架的执行模式，通过划分Map和Reduce阶段(Stage)，可以灵活的处理各种作业(Job)。 在MapReduce中

在当今这个时代，大数据已经不是什么新鲜的名词了。 但凡是小有规模的公司，都配备了专门的数据部门。 而且这里的公司可不只是互联网公司，而是涵盖了能源，医疗，通信，零售，娱乐等等。 以至于数据本身成为了一种宝贵的资产，谁拥有了数据就拥有了未来。 但是，光有数据还不够，数据本身不会说话。我们需要对数据进行处理和挖掘。 这中间就需要用到我们的主角——分布式计算。 如果你是软件相关从业人员并且关心行业新闻，一定对Hadoop，Hive，Yarn，Spark这些技术如雷贯耳。

2020年刚刚过去不久，对于现实世界来说是特殊的一年，对于Javascript世界也是特殊的一年。 在Github Javascript排行榜上，Deno一举击败了蝉联5年冠军的Vue.js ，以30.2kstar荣登榜首。 如果你不太关注前沿消息，你一定会问，这个雨点里的小恐龙是什么来头？ 简单的说，Deno(蒂诺)是一个Javascript运行时。 这是你要问了，JS运行时，我们不是有Node了么？ 是的，Deno就是Node的——翻转, no-de => de-no。