Personal blog

工作中需要经常检索工蜂上的仓库代码，快速执行某些操作，直接浏览器多次操作，还是不够效率，因此做个workflow。大致效果就像GitHub for Alfred。 workflow下载地址 实现基础工蜂有提供API，比如模糊搜索项目，因此可以实现关键词搜索项目功能，具体API可以参考这里 只要申 ...

最近参与开发的产品有国内站和国际站之分，但代码维护的同一份，国际站与国内站，除了特定业务的不同，比如某些产品没有之外，主要即链接地址区别， 为了可维护性，代码中我们仍然写的是国内站链接，如果国际站用户访问，点击链接，则会302自动跳转到国际站链接下，足够的快，这个体验还OK。 但最近多种原因下，自 ...

之前已封装了Alfred sdk，使用方式是在具体的workflow js中，手动安装包，然后require对应模块。常用的script filter构建，筛选，quicklook都已封装了fn，使用起来还算省事。但还没有CLI支持，为了进一步提升效率，CLI的开发可以驱动出来了。这里就mark下 ...

前端构建/或者node开发时经常会遇到这个变量，但这个变量到底什么来历，能有什么影响呢，之前并没有系统了解下，这里就整理mark下。 NODE_ENV是个环境变量 安装NodeJS，或者Webpack并不会带来这个变量的设定，我们往往需要自己设定，在没有进行设定前，如果打印会发现是undefi ...

一直没有港/美卡，最近我司有团办，报名办理了下，手续繁琐复杂，避免遗忘，这里mark下。 流程 注册登陆富途app上-我的，可以看到牛牛号 办理中信储值卡，随意转点钱，进行点交易，确保在之后见证时，近3个月有交易 填写开户申请书，下载另存为PDF 港澳通行证/护照，打印复印件 两种证件二选一即 ...

最近调研区块链钱包插件的技术可行性，其中牵扯到grpc技术，官方repo有demo，但正常跑起有些门槛儿的，因此这里总结下。 安装protobuf# 推荐安装方式，这样不需要再编译及进行环境变量配置$ brew install protobuf# 验证安装成功$ protoc --versi ...

在docker部署前端静态资源时遇到如下信息npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lock ...

最近2周时间从事小程序开发，其代码风格同样需要配套设置，而配置与一般Web开发还是有些许区别，这里Mark下。 配置文件所在位置小程序项目默认如下，因此package.json/eslint等配置的根目录在miniprogram下，并非在项目根目录下。 eslint.eslintignoren ...

最近社区项目接到一个需求是用户Mac连接外置摄像头，希望Alfred中支持一键切换不同的摄像头。因为平时很少有开视频的需求，还没注意过Mac怎么使用外置，这里就捣鼓下。 摄像头安装想起，曾经买过一个罗技网络摄像头C110，于是找出来尝试，USB接口，我通过拓展坞USB=>TypeC转换连接 ...

Whistle在当前工作中挺常用，同时大部分站点已开启HTTPS，而为了能够正常的代理操作这些站点，Whistle需要进行一些设定。 但有时会出现状况，比如抓不到请求等，搞清楚背后的原理/设计有益于解决相关问题。因此这里Mark下。 Chrome开发者工具下:开头的头部字段在Chrome下查看 ...

一直使用的1Password个人版，资费大概是$35.88/year。最近看到有免费申请License的机会，本着能省则省的态度试了下还行，于是又节约一笔钱了，同时赠送的是Team License也可以适合多人使用，刚好。 申请条件申请门槛儿如下 开源项目作者/协作者/核心贡献者 开源项目创 ...

最近使用Surge时遇到几个坑，相关设定在Surge中归类为杂项，因此这里总结下。 skip-proxy 之前已经使用Surge+Whistle来解决工作中代理规则的切换问题，但是最近遇到192.168.x.x rule不生效，查看network发现也没有相关记录。一开始以为是Whistle问题 ...

Mac的Find My功能挺常用的，选择某个Apple设备播放声音，同时查看设备的大致位置及在线状态。但无论是网页版还是app版，操作体验还是繁琐了些，并且加载也很慢。 个人是Alfred效率粉，借着周末，尝试开发workflow解决使用效率问题。 实现基础 Find My有App版及Web版 ...

最近入手了Apple TV 4K一代即TV五代，觉得还不错，但还是有些使用门槛儿的，这里分享下我的使用经验 购买建议 美版最佳，港版插口为英标，使用需要加转换器 个人觉得TV这设备更新换代频率很低，配置也足够，不需要最新的，够用即可，当然5代之前就算了 一些门槛儿TV在国内不算畅销，我觉得最 ...

之前被同事快速的编码操作吸引，询问之下原来是ideavim-IDEA下的vim插件，使用了一会儿，觉得不适应，同时又有一堆的热键冲突，因此放弃了。 最近翻看了一本书《Vim实用技巧》，被其中Vim对于模式编辑，所有命令设计哲学所吸引，同时评论中的一句话打动了我-一次投资，终身受益。 想想身为程序 ...

最近从事微信小程序开发，期间还是踩了些坑/遇到些问题，这里总结下 微信预览图片有时需要实现长按图片，弹出菜单，进行分享等，SDK支持这个，即wx.previewImage，但当前不支持自定义菜单。 wxml中不支持调用JS函数实现条件判断需要在JS逻辑层计算赋值。 当前系统不是安全代理 开发者工 ...

最近v2ex上大家在讨论Google搜索频繁遇到小 X 知识网等内容农场式结果的问题，都觉得倍感恶心，毕竟百度垃圾，大家才转投谷歌，如果谷歌也废了，那就完蛋了。 好在技术人也总是办法总比问题多，当前有个办法就是使用uBlacklist插件，将这些站点域名配进去从而在搜索结果中屏蔽该内容。同时有网友 ...

借着周末优化下个人博客的构建性能，之前每次构建需要10m+，优化后需要6M。不考虑搜索索引的话，单博客部署到VPS生效，只需要3m+。这里总结下优化项。 优化项 去除部分插件/功能 tag category rss baidu sitemap Pagination这里我保留了archive，与 ...

很早在玩Ionic时见过相关介绍，并没有去了解下，最近看到相关文章讲到这个，于是了解了下，填补下知识空白。 一些RTL的站点我们平时看到的网站都是LTR（Left-To-Right）的，但实际上还存在一些网站是RTL（Right-To-Left）的，比如下面这些 https://news.un ...

最近做服务端时有db-postgres部署需求，期间踩了点坑，这里mark下。 部署postgres服务直接挂postgres镜像即可，但牵扯到初始化数据库/及磁盘映射，我在实际操作中发现报如下错误 cannot access '/docker-entrypoint-initdb.d/& ...

最近尝试搞个Android TV App，涉及到使用Ionic/capacitor，这里将了解/开发遇到的问题梳理下。 好久没做过App开发了，难免对于新技术生疏，因此也确实踩了坑。 理论知识Ionic vs Cordova Ionic与Cordova解决的问题层面并不相同，Ionic更上层一些 ...

Surge经是我必不可少的代理工具，灵活的代理规则及开放的API使得我也很容易二次开发来进一步的提升效率，但工作中一直使用公司OA客户端及Whistle等，借着假期考虑下结合使用的可能 当前的使用情况 非工作机，Surge作为我的个人网络代理利器，非工作机解决科学上网等代理问题 工作机， 使用O ...

最近个人图片上传工具上传后的图片，当进行HTTP访问失败，均报403，一开始以为是nginx防盗链设定等，最后确定了直接原因是文件权限不够导致。 这里记录下这个问题 关于403 状态码 403 Forbidden 代表客户端错误，指的是服务器端有能力处理该请求，但是拒绝授权访问。 这个状态类似于 ...

Alfred推出Universal Action也有几个月了，我也已经习惯用它来解决部分场景诉求，这里就总结下action在我的效率使用中扮演的角色。 Universal Action的定位这里谈下个人对于这种交互方式与之前Alfred提供的关键词，热键场景的区别 主要区别Universal ...

例行周四的技术会议时，有人抛出了一个线上故障，Web上有个表格表头过滤，当选择所有值请求时会报错ERR_CONNECTION_CLOSED，但当选择较少的时正常返回200。因为不清楚ERR_CONNECTION_CLOSED的含义，因此排查过程也走了点弯路，这里总结下。 ERR_CONNECTI ...

最近在做开源项目，临上线前被告知，需要在每个程序文件追加下版权归属。由于时间紧，我也就放弃了寻找自动化的办法，选择了人工编辑，一番体力操作，花了几分钟时间解决该问题 但为了以后可以高效解决同类问题，还是需要寻找下高效/自动化的办法。因为程序文件动辄百十个，人工编辑麻烦且存在失误可能。 借着节假日 ...

项目中使用过redux 声明文件的作用 编辑器代码不全，接口提示等feat 类型安全检测 声明文件的创建/使用方式 编写TS类型程序文件，TSC编译tsc --declaration，生成JS文件的同时即生成.d.ts的声明文件 手动编写.d.ts类型文件，一般是面向不活跃的项目，无法在本身包 ...

今天访问Web突然报错，原来是网站被重定向到HTTPS，而请求API服务仍然是HTTP，Chrome安全策略进行了拦截，从而报错。 为什么会突然出现重定向到HTTPS呢，经过排查，最终发现原来是Chrome下的HSTS导致。 这里围绕着这个问题排查过程总结梳理下。 307通过network，查看 ...

最近在做开源项目，因此可以脱离公司成熟的CI/CD，自己搞搞。为了降低用户部署门槛，因此决定使用Docker来构建部署镜像，解决部署效率问题。 dockerfile这里贴下构建镜像文件，文件名称比如是build.Dockerfile FROM node:14.17.0 as builderENV ...

对于我当前所在team来说，TS几乎已是JS项目标配，估计其他厂也类似。原因很简单，就是类型检测可以为项目保驾护航，同时也TS类型声明本身充当了一部分文档的作用。 不知不觉，使用TS也好多年头，但是有些类型并不常用，必须承认原因就是没懂。因此，这里根据实践和学习，Mark下。 never关于ne ...

最近生产环境监控系统报告一个前端渲染报错。于是着手分析了下，这里记录总结下 报错信息this.service.apply(…).then(…).catch(…).finally is not a function 报错环境 Mac OS 10.14.6 Mojave Chrome 92.0.45 ...

Web请求抓包，一般使用Chrome network进行分析，如果是HTTPS解密抓包，或者Mac下对iPhone进行抓包，我会使用Surge，但是如果我想具体查看HTTP请求/响应的原始数据，同时了解HTTP应用层之下的传输层等数据的话，那就得更专业的工具，比如说Wireshark。 最近因为 ...

最近在跟后端对接压缩包下载遇到了下载OK，解压报错inappropriate file type or format，尝试使用postman却可以正常下载解压，所以很是奇怪。毕竟postman可以，后端不改的基础上前端一定是有解的，于是继续摸索，最终因为进度所赶，改用base64编码传输，解决了这 ...

最近team收到通知，安全团队扫描WEB是遇到有人提交了.DS_Store文件到公司CDN，于是告之告知大家注意这个文件，不要提交。 那问题来了，为什么这个文件会影响安全，我们又如何最大程度规避这个呢，这里总结下。 .DS_Store 先了解下该文件 .DS_Store是Mac系统中产生的一个隐 ...

Surge Module之前一直忽视，我也安装过一些别人贡献的module，但没有仔细对比体会作用。最近看了些资料，经过实践，觉得有些场景下非常适合使用，顿时觉得真香。 module介绍关于module先介绍几点，方便了解。 用官方的话说module即给当前profile打patch补丁，因此 ...

开发时，有时会遇到 ESLint: Component definition is missing display name (react/display-name)，这个原因是什么及如何处理呢，这里讨论下。 react/display-name组件添加display-name唯一的好处是服务于 ...

由于历史原因，项目代码中还有一些函数使用arguments，而同时公司定下的lintRule对于arguments只是warning，因此有些还是没人去修改。 那么arguments还有必要存在吗，这里总结下 arguments vs rest parameters arguments是类数组， ...

一次，CD部署时WEB项目打包的TS最终编译为了ES3，而ES3下的JS代码最终导致了白屏。 事故直接原因项目下的业务组件库没有执行TSC配置的target，而我司封装的构建打包工具在进行编译打包时，会优先使用找到的第一个TSconfig配置，于是主项目的ES5被忽视，而业务组件库又因为没有配置t ...

查看JS项目时，会看到package.json中会有sideEffects配置，这个是什么含义，如何使用呢，这里总结下。 sideEffects顾名思义，副作用，如下函数，进行条件过滤，返回全新数组，但是也修改了原数组本身 function filterArr(arr) { retu ...

最近在做上传功能，需要将ZIP文件读取内容传到后台，后台将数据写入创建ZIP文件，最后解压处理，但是联调时，报错提示ZIP文件不合法。 由报错可以断定写入ZIP文件的字节流肯定不对。 当前代码查了下当前的读取ZIP文件的代码如下 前端const reader = new FileReader() ...

编写Alfred Workflows已经快30个，在使用中，我也会根据遇到的问题及不足进行版本迭代，然后更新到GitHub上，方便他人下载使用。但GitHub中存储的是workflow文件格式，没办法直接看到版本信息，除非下载安装。这样就无法直观确定，版本问题。 手动维护更新？no，太浪费实践 ...

公司项目有些用到了DvaJS[D.va]，为了更好的使用，这些调研总结下。 概述 React and redux based, lightweight and elm-style framework. dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体 ...

因为本人主要从事前端开发，于是Alfred的workflow更多是采用JS去写，但是每次都重复在写Script Filter，参数拆分拼接等等，于是萌生了开发个JS工具包的念头，这样以后workflow中常用的代码块直接调用即可，效率必然高不少。 心动不如行动，开搞。 这里贴出我的工具包地址，戳 ...

最近参与维护一些项目，其中有用到saga-duck，一脸茫然，于是了解了下，有点收获，这里Mark。 关联技术点saga-duck的学习，延伸出duck，extensible-duck，redux-saga，这些都有必要提下。 Duck一种模式/观点，当使用redux时，我们往往将{actio ...

当前工作中经常使用Whistle代理来进行Web模块开发，因为环境不同，项目不同，经常需要切换代理Rule。采用网页GUI操作还是过于低效，于是决定做个workflow来提升切换效率。 效果 操作指南 ⌥ ⏎ 访问WEB管理页面 ⏎ 切换rule选择状态 ⌘ C拷贝当前Rule具体配置项 ⌘ Y ...

最近发布Action到GitHub Market需要开启两步验证，于是就搞了下，但是发现还是有些坑的，这里记录下。 开启GitHub两步验证 点击右上角settings-Account security 按照提示开启即可，中间提醒下载恢复码，下载保存。 弹出的二维码需要用支持MFA ...

个人的开源项目每当被Star，会收到电报推送消息，这样以此进而激励我继续dev，做受欢迎的项目。 实现这个自动化的基础设施是GitHub Action，但是现在我想优化下推送体验，当被star时，获取项目:star:数目，于是研究使用Action来实现一键使用。 该action下载地址-Repo ...

个人博客中经常需要贴一些录制的GIF动画，考虑到GIF大小会影响页面加载体验，我需要手动进行GIF压缩，压缩过程乏味且浪费时间，因此动手写个小工具来提升操作效率。 效果 选中文件，唤起Alfred，输入gif，选中Compress GIF，回车即可。 Workflow下载地址，戳这里 注意当前w ...

好久没更新过Alfred Workflow相关文章了，这里就贴下最近的一个小开发。 工作中为了聚焦码字，我经常开启Mac的防扰模式，这样不会被微信/或QQ等高频信息轰炸，但比如下班又需要关闭。鼠标移动到右侧去关闭显得低效，设置热键开关又需要记忆一组较为复杂的，这两种方式都很不程序员，于是，我决定 ...

最近运维团队报说我们的生产A系统登陆失败了。登陆不上是个大问题，业务一度想直接提P1，P1即最高级Bug，必须在2个小时内解决。事态一度紧张严重。。。 帮忙去看了下，发现提示是连接不安全，一般HTTPS连接不安全的原因会有两种可能 证书过期 证书不适用 查看了证书发现果然，证书是*.leno ...

Fantastical支持日历订阅，但尴尬的是找不到优质源，比如法定节假日及调休日。并且即使对应的日历找到了，如果作者不一直维护，还是有时效问题。 索性，自己来维护一个日历，就从最基本的中国节假日安排走起。 这里先贴出订阅地址，因为我会持续更新，因此不用担心明年就失效的问题。 信息参考源该日历 ...

最近看到一道题，如何声明a，从而确保a ==1 && a== 2 && a==3返回true，额，虽然一眼就可以看出a需要声明为一个对象，但是却不清楚应该使用什么方法属性了，由此暴露对于JS的==运算符带来的自动类型转换还是印象不深刻，于是重新学习下。 ==的隐式 ...

WEB为了性能，可以上CDN，但是你真的了解CDN吗，这里梳理下原理，强化理解。 概念 内容分发网络（英语：Content Delivery Network或Content Distribution Network，缩写：CDN）是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务 ...

想要深入理解JS，就需要了解v8，通过v8-debug方便去理解字节码，JS优化等等。这里记录下v8-debug的安装 安装网上有提到brew install v8，但安装后发现没有–print-ast选项，原因不明，因此不建议 npm install jsvu -g jsvu运行，选择V8 ...

JIRA作为我们团队的项目管理工具是工具链中的一环。平时站会每个人也是基于JIRA上的看板来陈述自己做的事情及遇到的问题，但JIRA还是有体验差的地方，比如说Kanban board中的Quick Filters，不支持单选，每次选择都是叠加，这点并不利于我们去快速切换不同filter下的card ...

本着DRY，本着生产力，前端基础设施有很多事情可以做。UI组件库，自定义ESLintRule，ESLint配置共享，CI配置共享等，这些机制可以一定程度的提升前端工作效率，但还有一个环节需要优化。 工作中本身并不单单只有一个项目，每个项目如果都开始从配置，实际上效率会很低。 为此业界有了很多的脚手 ...

今天看到群里发了一道JS基础题，以为很简单，但是不小心还做错了，于是这里Mark下。 var user = { n: 1};user.x = user = { n: 2};console.log(user.x); 错误分析错误的以为等价于如下代码 v ...

原型链是JS基础知识之一，翻阅那么多的文章，不如自行总结一下，温故而知新。 关于原型链，绕不开几个关键词，prototype,proto,constructor,new等，这里总结下。 如有错误，欢迎斧正。 prototype是函数身上的属性，__proto__是对象身上的属性，constru ...

webpack5发布已经有5个月了，配套的插件都已基本到位，空闲时间，就着手项目升级工作。 webpack5的主要变化 持久化缓存改进，提升构建性能 摇树优化，一定程度降低构建资源体积大小 引入一些breaking change，从而为未来的升级，做些准备工作 总之，毕竟只是构建层次的工具，对 ...

iframe这种技术并没被淘汰，还是有一席之地，比如WEB广告播放，比如网页Chrome插件，都可能会用到。用户无感更多是在UI操作体验上，但实际上是两个不同的站点服务。对于iframe，这里总结下。 如果iframe包含的站点为同站，则共享父页面的渲染进程，Chrome并不会开启新的进程，如 ...

ES6 Module是官方推出的JS模块方案，随着babel，TypeScript，SPA的盛行，这个技术也用的再熟悉不过了，但有时还是会写错。反思错误，觉得是对其认识理解的还不够彻底，这里就Mark下。 如图即是有时出现的写法错误 首先这个错误是TS编译器报的，属于编译报错，与Lint报 ...

前端开发大多时候并没有用到Proxy，但是不代表其没有价值，而是没有掌握它。于是，这里梳理下。 元编程MDN将Reflect，Proxy归类于元编程，那什么是元编程呢。 元编程（英语：Metaprogramming），又译元编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或 ...

CSRF相较XSS名气小了点，但也是常见安全问题之一。借着空闲时间，梳理强化下。 概念CSRF(Cross Site Request Forgery)，中文意思跨站请求伪造，是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。 举例单从概念还是很难理解，那么就以几个例子来辅助理解下。 比如 ...

web性能优化能做的事情很多，比如压缩JS体积大小， 比如降低HTTP请求次数，比如CDN优化关键资源请求速度等等。其中一个优化点事降低重排重绘次数，这里总结下。 渲染流水线 上图摘自李兵老师的《浏览器工作原理与实践》 实践方法 使用 class 操作样式，而不是频繁操作 style 重排重绘次 ...

前端资源都会发送到浏览器端或者客户端，那么这些WEB资源尤其是JS如何最大程度的保护呢，毕竟辛苦开发的代码属于商业项目，如果被别人完整剽窃了甚是可惜，于是就需要利用一些手段来做控制。最终都是尽可能的提高安全门槛儿，提高别人剽窃的成本。 以下为我在实际项目中总结的点 生产模式打包，去掉调试方面的 ...

最近跟PM聊项目下一步发展，谈到了移动端网页，及移动端App的规划，期间就聊到了自适应布局，响应式布局，但是沟通中，觉得似乎这两个词一直是捆绑着，似乎在大家眼里自适应===响应式===一套代码走天下。 right？no，作为开发，很多时候我也把两个词混为一谈了，借着最近时间较为宽裕，整理下。 ...

最近了解到零宽字符，觉得挺有意思的，这里就Mark下。 如上即是我使用零宽空格发送的一条”空”微博，成功了，但同样方法微信朋友圈及推特不可以，应该是判空逻辑过滤了零宽字符。 OK，开启正文 零宽字符Unicode字符中有一类特殊的字符叫做零宽字符，零宽这个词应该会很熟悉，正则的断言即叫零宽断言 ...

很多教程把Promise搞的过于简单或复杂，这里梳理下，强化下个人理解。 Promise产生的原因promise是异步编程范畴内为了解决回调地狱的产物。 A.then(B).then(C) 这种写法相对回调明显是好些的。 Promise使用注意 Promise有三种状态pending，ful ...

IDEA作为code开发主力，但是更适合完整项目开发，而VSC作为轻量级开发编辑器，比如有时候处理一个Nginx配置，一个HTML测试文件等，因此两者不矛盾，一个重型武器，一个轻量级冲锋枪。 将VSC打造成一款利器更需要点成本，因为本身并不自带很多功能，因此需要安装相对较多的插件，这里列举下我安 ...

这三个词汇频繁出现在前端安全范畴，这里总结下。当然由这三个词汇还会串联出相关一些知识点，比如同站，跨域，XSS，CSRF等。 这些术语看着复杂多样，但是联系起来考虑他们实际的场景就很好理解了。 同源安全策略的出现 同源即协议，域名，端口均一致即是同源，不同源情况下发起异步请求即产生跨域，浏览 ...

最近项目并不紧张了，于是得空把一些基础理论梳理下 当用户URL输入一个网址，浏览器根据用户输入的信息判断是关键词还是网址，如果是关键词则利用默认搜索引擎拼接输入的关键词形成网址，如果输入即是有效网址，则加上协议形成URL，用户输入完内容，按下回车 回车前，如果当前有页面存在则，执行befor ...

作为前端developer总是要经常查看networks，HTTP请求不可避免要接触，但一直缺乏系统的学习，于是查询这里梳理下，加深下记忆。 HTTP定义 超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用 ...

Chrome DevTools下调试前端请求时，会注意到缓存分为两种MemoryCache，DiskCache，针对两者区别和Chrome是如何选择缓存介质的，这里基于我的认知总结下。 概念单说区别，简单，仅从名字上也可以看出两者的区别，MemoryCache是从内存中存取，因此速度快，但时生命 ...

身为前端er，在过去的几年经常使用这两个函数但是真的傻傻分不清，总是需要使用使用看API，或者TS定义，还是抵消，最好的办法还是脑子里彻底记住，毕竟漫威英雄啥的咱不是记得都门儿清吗。so，还是功夫用的不够。 这里就mark下两者的区别，用于记忆。 splice单词含义 绞接，捻接 函数说明Arr ...

最近Stackoverflow上看到一个问题，Are ES6 template literals faster than Array join at constructing long strings，这个问题被管理员直接关闭了，因此看不到有人给出答案，但问题确实有点意思，毕竟我不确定，于是这里就 ...

12036最难的应该是班次查询买票，但前端性能也可以做的更好，这里以前端视角来分析下页面性能可以优化的项。 HTML，CSS，JS没有做压缩，通过Webpack等打包工具去除空格，换行等 GZIP/BR压缩开启，体积可以进一步缩小，降低带宽开销2/3 全部使用的协商缓存，强缓存设置的0，这样带 ...

window.opener并非JS新特性，但有时却被忽视了，这里总结下它的价值 window.opener作用 The Window interface’s **opener** property returns a reference to the window that opened the ...

在实际开发中有时会遇到Maximum call stack size exceeded错误，顾名思义即栈溢出。但认知仅限于此是不够的，这里就针对这个话题总结下。 栈栈是一种数据结构，特征是后进先出，在JS中函数调用存在A函数调用B函数，B函数又调用C函数的复杂情况，对于多个执行上下文就涉及如何管 ...

最近脸部疼痛，就去了趟医院，没想到还是折腾了下的，这里Mark下。 携带物品 医保卡用于报销部分花费 手机-取号及最终买药支付等 身份证以备不时之需 就医全流程 官方微信解放军战略支援部队特色医学中心，在线预约需提前一天预约，不可以当天预约 防控新型冠状病毒诊前必查表填写，地址：http:// ...

margin-top、margin-bottom、padding-top、padding-bottom的值支持百分比设定，而百分比是基于容器即父元素的宽度而非高度来计算的(refer to logical width of containing block)，这点平时容易忽视，这里总结下。 举个 ...

个人习惯，同一类型的软件喜欢多家对比尝试，选择最合适的，然后熟悉，打磨，最终成为这个领域独一无二的生产力工具。比如Surge，会作为网络代理神器，又或者Alfred作为Mac系统搜索入口等。印证了那句话工欲善其事，必先利其器。好软件值得寻找，更值得打磨。 思维导图哪家强，之前一直很纠结，前后也用过 ...

有时需要快速查询Mac系统版本信息，或者内存信息，常规操作是点击屏幕顶部右上角Apple图标=>About This Mac=>然后在对应的Tab页寻找信息=>选择拷贝，这样做未免麻烦了些。 于是，趁着节假日，我快速做了个workflow，目标快速获取系统基础信息。 效果 说明 ...

假如家里路由级已经解决了科学上网，那么Mac等终端设备是没必要再重复开启代理的，不然速度会更慢，性能开销也属浪费，但是当出了家门，连到公司Wi-Fi，又或者在咖啡厅，那么又需要开启代理。OK，这个过程完全是固定模式，有办法自动吗？YES。 Surge提供了Event脚本支持，即可做到以上需求。 ...

SPA技术下，对于WEB前端路由，有两个选项HashRouter，BrowserRouter，两个选择，有利有弊，需要根据实际情况去选择，这里就总结下。 HashRouter vs BrowserRouter 两种路由展示形式不同，HashRouter使用的URL哈希形式(比如https:// ...

我们开发的网页需要运行在各种各样的浏览器下，而不同浏览器，不同版本对于网页解析都会有些许差异，如果是IE，就更麻烦。曾几何时，前端er聊起IE兼容就蛋疼，内心骂了IE多少次。 如何优雅的处理兼容性问题，是个固定的课题。现在对于这个问题已经有了相对系统化的方案来解决，这里就Mark下。 说明：场景 ...

记得之前看过一篇文章《Github带来的不止是开源，还有折叠的认知》，文章意思就是不要被这些开源的框架，模块，占据了你的全部，不要只会CV，如果我们今天跟着ABC框架走，明天跟着EFG框架走，我们永远学不完，我们也永远不是真的懂。 如果说我们自己创建了一个框架，一个工具，那么这个创造过程中一定会遇 ...

最近后端项目中投入使用了SonarQube，响应他们的号召，我在前端也开始使用。随着使用的同时，也发现之前对于Sonar的认知有错，这里Mark下。 SonarQube VS ESLint作为前端ESlint再熟悉不过了，ESLint本身确保了代码风格的一致，再加上我们的UT，之前认为不需要So ...

因为我司不提供JB License，但盗版又不想用，苦于囊中羞涩，因此一直使用家人的学生License，但这样做，需要每次临到期时麻烦他，因此这个方案不愿意再搞了。之前了解JB对于开源项目开发有支持计划，可以免费申请全家桶License，于是就尝试申请下，果然搞定了，这里简单记录下申请过程。 ...

最近在开发中遇到了数组遍历次数不对的问题，原因是未初始化，由此发现数组遍历次数不见的与数组长度一致。这里就总结下这个坑。 举个例子let array = [undefined, , 1, 2, 3]; console.log(array[0]); // undefined con ...

框架类库极度流行，它们都提供了各种各样简单的方式来操作JS，也或者其他的语言技术。使用一时爽，更为可怕的是它们也会折叠一部分的认知。比如这里要说的内联JS实现事件绑定，在实际开发中确实不怎么使用，但不代表不会使用，且需要懂。 React中事件绑定先说下React中的事件绑定，React帮我们包装 ...

最近修复一个数据问题，其中用到了左连接，我的意识里还以为A左连接B，查询出的记录数量会是A的记录数，然而实际操作后发现认知严重错。 网上关于左连接的一张图 摘自网上的一张图，图确实没毛病，但我却产生了误解，我会认为记录数量依然是A表的记录数量。 这里举个例子来说明问题 举个例子student表数 ...

很喜欢开源项目获得的成就感，近一年坚持做了几个开源项目，也收获了网友的一些Star，有些还加微信，提需求等，开源魅力也就在这里吧。 那么比如有人Star你的项目，能够及时收到电报通知会更好点，因为之前已做过NPM包发版通知，因此这个做起来也就简单了，但因为还是有些小坑，这里Mark下，兴许帮到些朋 ...

Surge进行网络代理很方便，但比如其它设备也需要网络代理，比如互联网电视、Nintendo Switch，这时如何快速解决墙的问题呢，个人总结有以下两个办法。 这里以NS设备需要爬墙-发推举例 允许WI-FI连接，充当代理设置 确保iPhone，NS连接同一个Wi-Fi网络即内网环境一致 启 ...

这里总结下个人购买NS游戏的策略，本着省钱，土豪不用看 因为NS游戏在各个国家商店的价钱不同，因此通过多账户进行游戏购买可以确保不丧失游戏可玩性的同时，节约部分人民币。 如何操作，姿势如下 Gmail开启多邮箱别名推荐别名策略如下,比如我的邮箱是alanhe@gmail.com，则对应各个国家 ...

最近项目面临一个表格性能问题，挺有意思的，这里记录下优化方案 业务需求 表格要无限滚动，不要有分页 表格列多且显示丰富，比如存在可编辑单元格，tooltip，弹窗等 表格行数较多，最大可达1000行，当前业务数据上看最多只有500行，但考虑长远最大需要支持到1000 目前效果 100行时已出现 ...

2020年相对之前的几年成长算大，但与高手相差甚远。 现在已经2021年了，回首过去的一年，依然需要总结反思下。 健康 身体是革命的本钱，2020年算是我系统健身的一年，上半年主要是户外跑步，下半年开始了健身房锻炼。 对于健身房的器材以前都是陌生的，利用油管教学视频，同时观看周边小伙伴们的 ...

JS生成器函数认识不足，最近开发中碰了壁，于是梳理学习，Mark下。 yield vs yield*yieldThe yield keyword is used to pause and resume a generator function or legacy generator funct ...

需求背景WEB中有些请求很慢，有些请求因为功能上要求，需要增加遮罩从而避免用户在WEB还是执行请求的同时进行其它操作，因此需要加增加loading动画。为了方便控制，采用的办法是在axios的配置项中拓展一个个性化参数配置，比如叫loading，一旦某个请求配置为loading:true，则在请求发 ...

WEB项目因为HTTP无状态，前端性能，SPA应用页面跳转数据共享等原因需要考虑前端存储方案，各个方案都有其特点，清楚才能合理选择及使用，这里总结下。 存储方案 cookie sessionStorage localStorage indexedDB Web SQL在Chrome浏览器开发工具 ...

微信支持添加GIF到表情包，为了丰富下自己贫瘠的表情包，需要方便的找到新的动图GIF。国外有个网站Giphy还不错，并且提供了API支持，于是花了点时间实现了搜索表情包的Workflow。 效果输入gif或sticker即可进行搜索，回车即可复制到剪贴板，然后⌘ V即可。当然还有些其它一些操作， ...

最近有需求需要Jenkins实现发布NPM新包，这里记录下配置方法。 具体需求 执行release命令，生成新版本号及changelog记录 提交修改后的package.json，changelog到GitLab仓库 打包新版本到私服Nexus Jenkins插件安装为实现该功能，需要确 ...

利器需要打磨，同时也需要更新换代。2020已完，盘点下20年入手及调整的利器【包含软硬】，梳理下当前的功能点，及通过调整实现的增强点。 AirPods25月底入手的2代，价格997CNY，1代在使用2年后，单次充电续航只剩下了半小时，因此买了2代接力。 功能点 开会 听歌、油管节目 电话随时唤 ...

元旦假期，花了点时间部署了个人的英文博客站点，与中文博客使用的服务，技术一致，本身只是内容的区别，因此也算回顾了博客部署中用到的vendor服务，这里就梳理下。 Hexojs-静态博客框架使用的hexo博客框架，博客文章是MD形式书写，最终转换为一个个静态HTML页面，因此访问速度很快，但当前会 ...

最近搭建起个人的英文博客，域名定为en.1991421.cn，之前的中文博客域名是1991421.cn，图床域名是static.1991421.cn。如果每个域名都申请单域名证书，后期维护过于麻烦。为了方便管理，且易于以后拓展新的子域名服务，因此决定申请泛域名证书。 泛域名泛域名即服务于一个域 ...

最近，我不满足光猪圈健身个人的健康数据只能由官方App查看的问题，于是利用Surge抓取了请求，现在利用postman，或自己写个App，脚本等，都可以轻松获取App数据。 解密的好处解密即抓取解密了请求中及返回数据。好处有以下几点。 了解一些WEB，App是否偷偷传递了敏感数据到后台 基于请 ...

最近跟朋友讨论一些前端面试题，总结如下，巩固下基础。 MVVMMVVM是一种架构模式，为方便理解，对比常见的几种架构模式 MVC Model–view–controller 模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的 ...

最近跟朋友讨论一些前端面试题，总结如下，巩固下基础 TCP三次握手三次握手，四次挥手需要了解，推荐朝三暮四这个词辅助记忆。 图解如下 数字精度console.log(0.1 + 0.2 > 0.3); // true 原因十进制的0.1和0.2都会被转换成二进制，但由于浮点数用二进制 ...

前后端分离的今天，后台提供的API一般都是JSON格式数据，但要知道这只是一种格式选项，其它有很多，比如XML。并不是任何服务通讯，前后端通讯都会使用JSON，一些服务我们也会明确使用XML而非JSON。因此对于两种格式的区别需要明晰，这样才能按需采用。 定义了解一个技术先从命名及发音开始，具 ...

Git越玩越喜欢，但有些底层的认识还不系统全面，比如快照是什么，Git又是如何存储这些快照的，关于这些机理，这里Mark下。 快照记录 Git在每次commit时会对仓库中所有文件进行扫描，如果某文件发生变化，则会将新文件生成一个Blob二进制文件，记录当前Commit时文件的所有内容，如果文件 ...

最近WEB遇到了两个问题，一个是JS报错SyntaxError: The URL must not contain a fragment，一个是window.btoa报错，经过调查都是编码问题，平时因为更多的使用框架从而折叠这部分的认知，因此这里Mark下。 错误截图 相关知识点URI，URL ...

一直很喜欢Mac的Touch ID及Apple watch的解锁体验，但身为开发，日常还经常会使用到shell sudo，这时也会提示输入Mac密码，于是我在想是不是也可以用Touch ID及Apple watch实现授权呢，惊喜发现还真可以。 配置方式注意：这里因为我要实现同时支持Touch ...

SPA应用的优势本来是流畅化的类App体验，但是随着业务功能的增加，代码逐步变得臃肿，性能也会出现瓶颈，因此就进入一个课题-性能优化。 其中一个优化的手段就是降低渲染次数。 这里以React的实际代码为例，当然Angular，Vue类似。 无论是哪个JS框架，实际上都是动态渲染新Dom，而框架 ...

在玩Angular时候，会遇到这两个编译方式AOT，JIT，但是玩React时却不提及，难道是NG所独有的？当然No，玩java也会提及JIT。这里就聊下两者区别。 如有错误，欢迎斧正。 上定义这里取Angular上的一段解释说明。 JIT：just-in-time Just-in-Tim ...

随着围绕着Mac生态的外设越来越多，经常需要切换声音输入输出设备，GUI操作效率太低，于是借着周末时间，做个workflow来提升切换效率。 实现基础调研了一番方案， 发现选择不多 命令行模块有个方案是switchaudio-osx，但不支持AirPlay，作者也不打算支持，改造的话需要C语 ...

componentWillUnmount意味着组件即将销毁时触发该钩子，但假如用户直接关闭浏览器tab，则该钩子时是不会被触发的。 这个问题在特定的场景下需要考虑，比如我在做websocket相关开发时，场景是用户进入某详情页，即开启文章topic订阅，当用户切换到其它URL时，该文章订阅即取消 ...

自己对于Alfred实在太爱，以至于一旦发现了自己的一个效率需求，就会研究Alfred的可行性，可行就立即寻找第三方的或者自己定制开发，直到今天，我也已经开发了16个workflow，经验贴也很多，给自己点个赞。 无论是自开发的还是第三方的，大部分我在日常会高频使用，这里share下，兴许可以帮 ...

JS的基本数据类型在ES6到来时增加了Symbol基本类型，而ES6即ES2015发布也已经5年半时间。 但实际的开发中，我并没有使用过Symbol，因为在TS的语言环境下，我似乎更不考虑用它了，因为TS下有个枚举类型的存在。但认真学习调研后，结论是理解错了。 这里就mark下两者的区别，明晰区别 ...

最近在使用GitHub Actions实现自动部署静态网页到VPS时，遇到问题，即同步文件只有文件，内容为空，万脸懵逼，于是开始排查问题原因。 具体问题执行的命令如下 $ rsync -zvr -e ssh public root@1991421.cn:/var/www/blog 同步结束 ...

一直以来很喜欢使用Alfred的Snippet，将常用的文本块录入，同时还支持配置一些参数，平时可以节约输入重复文本的时间。比如之前我们经常进行CR,结束后需要一个简单的总结，为了提升总结效率，我就做了Snippet。 但是Snippet的弊端是Alfred只存在于MacOS，身为Apple全家桶 ...

Airdrop算是Apple生态一个重要的体验了，便携的在各个设备之间传输文件，但是呢，离高效还差些，比如总是需要鼠标移动，点击share->airdrop。效率为王的时代，我还是选择自动化这个流程。 当前效果选择文件或链接，唤起Airdrop进行分享 下载地址：戳这里 使用注意 需要先 ...

一直没有系统总结过字面量与构造函数在声明正则中的区别，抽空总结下。 区别 字面量中对于特殊字符都是直接解析，而在构造函数中需要加正斜杠进行转译， 比如\d会被当作字符串\d看待，但比如 字面量前后正斜杠只是为了表示该值为正则，只是分割符，假如在构造函数中写就意味着匹配斜杠 字面量表达式的易读性是 ...

最近在写Alfred Workflow，期间遇到了很多文本问题，需要正则处理，于是杠上了正则，虽说正则是在学习任何一门变成语言时都一定会学习的，但是不得不说我的正则水平是渣渣。于是这次借机会重新认真学习了下。这里Mark下我的认知。 正则的价值记得14年时候就看过一本书，里面有句话很经典，正则 ...

一直在自己搭建的平台书写博客，但是同时也希望能够同步发布到medium。因为medium的社区用户质量较高，积极参与其中既可以大幅度加强我的博文的热度，同时增加与社区大佬们的交流频次，当然也可以提升我贫乏的外语，好处多多。 Medium上，一直以来我是人工进行的文章发布，并且WEB编辑页面不直接支 ...

噩耗，公司取消了O’Reilly的Safari online会员，于是为了继续阅读自由，只能自力更生解决问题。 首先官方价格还是比较贵的Safari Books Online costs $39 per month or $399 per year.，土豪直接上，穷人向下看。 网上看到有个可行方 ...

在使用代理App时，虽然开了系统代理，但是比如iTerm2终端中还是不行。针对此问题，虽然Surge有增强模式可以解决这个，但是因为日常我需要VPN公司的原因，默认不开增强，因此需要寻求手段使得终端走代理服务。 如下即为解决方案 配置 打开bash_profile，vi ~/.bash_prof ...

对Surge的使用一直有个痛点，就是比如我想切换系统代理开关状态，或者出站规则，我需要光标移动到右上角，点击，再点击，整个操作流程一点也不高效。之前曾考虑过Apple Script操作GUI来解决问题，但是编写较麻烦。 最近刷推发现Surge Mac4.0发版了，并且提供了HTTP API支持，对 ...

在家因为有了大屏显示器，所以Mac喜欢走主机模式，不使用屏幕。但注意到假如盒盖模式，Mac本身的mic是不可用的，扬声器还可以正常使用。如果想正常的使用mic，直接切换到耳机就行，但是如果不想使用耳机呢，那问题就来了，如何外接mic？ 购买mic及耳机转接线 成本如下 阿斯泛（XFAN） D ...

最近Team成员遇到一个问题，以为是TS编译方面的问题，并且还发我一个链接-flatMap is not a function #1822 当前这个问题很好解决，这个错明显是调用函数对象不是个数组造成的，但是他却断定是TS编译，暴露了对于TS的认识存在基础的误区。为了能够DRY的讲述这些基础认知， ...

最近偷偷的跑到了大理，在保证工作顺利完成的同时，开启了欣赏大理、洱海的模式。 原本预期也只是欣赏美景，但因入住的客栈太过美好美妙，使得旅行中增添了很多美妙的元素，以至于，我自己临走的时候都暗下决心，下次来了还住这里！ 寥寥数字记录下这份美好及点赞下经营这家客栈的这些美好的人。 不是广告软文，单纯 ...

惬意的一段旅行工作，花了点时间读了点闲书，其中就有这一本《高效能人士的七个习惯》。对于这七个习惯个人有自己的一点反思与想法。 Mark的同时，鼓励自己不断改进调整。 积极主动我想自己至少在学习方面还算是主动，回忆最近的一年比较觉得有所收获的是 阅读，尤其是英文阅读的提升，其结果就是英文阅读上 ...

最近工作内容有一部分是在与SQL打交道，还是遇到了点坑，这里mark下。 背景 当前系统，面对数十万的数据表进行复杂update操作会出现问题，最终采用一条条的更新方式解决 程序源码办法见源码 /** * @description * * 1. SQL查出目标数据主键，导出CSV * 2. 创建 ...

<template><div>{{a.b}}</div></template><script>export default { data(){ return  ...

如下为一道前端试题，要求是修改代码不造成死循环。 while (1) { console.log(Math.random());} 分析首先要知道 JS是单线程 JS不存在真正意义的并行，但存在并发 因此，如上循环如果正常执行必然死循环。如果想不死循环，不block，肯定 ...

学会看Git log也是一个必备的技能，之前对于Commit中父子关系有所疑惑，这里梳理总结下 如果不存在MR，实际上单个branch下commit是一条线，而因为有了MR，整个commit图谱就会是个树结构。 总结 针对一次commit，它创建时基于的commit也就是上次的commit就会 ...

周末决定来一趟旅行，漫长的4个小时航程实在睡不着，于是看起了这本书人生护城河，几个小时便看完了。踏雪有痕，这里简单Mark下自己的所思所感。 热爱写作时至今日毕业已6年半，而博客共有多少篇呢，311篇。少的可怜。比肩书作者辉哥，他能做到每日一更。之间的差距已不是简单的博文数量了，而是背后的诸多 ...

今天花了点时间进行了TypeScript的升级，好处是可以进一步使用TS/JS的新特性，比如短路赋值运算符等。这里简单Mark下升级细节。 注意，TS只是类型，原则上升级并不会造成项目任何功能BUG，这点要明确_ 升级包{ "typescript": "4.0.3" "@typescr ...

首页网址：https://www.meituan.com 前端代码是透明的，你可以直接获取。通过解读源码，总是可以学到很多技术点。这里我来梳理下美团首页源码中包含的技术点。 SEO<title>美团网-美食_团购_外卖_酒店_旅游_电影票_吃喝玩乐全都有</title>& ...

前端三要素，HTML，CSS，JS，无论是SPA，还是MPA，HTML相对较少，所以对于代码风格的控制更多在于JS和CSS。对于JS，我们有ESLint，而对于CSS，推荐使用StyleLint。 这里简单介绍下如何配置 配置安装包$ yarn add stylelint-config-stan ...

家里有人买了AFTERSHOKZ 韶音AS650 Air骨传导耳机，一直没体验过这类耳机，于是把玩了下，这里谈下个人的使用体验，同时兴许可以帮助那些纠结买哪类型耳机的朋友们。 优点 设计新颖，明显区别于入耳式/耳罩式，对于有些入耳困难且不喜欢耳罩的，确实是个option 做工不错，在千元档来说 ...

React文档中讲到一个概念-Error Boundaries（错误边界），今天正好在读一本书《Learning React》,借着刚读完的熟悉感 + 结合实际的项目，聊下个人的实践认知。 解决的问题范畴 A JavaScript error in a part of the UI should ...

应一个朋友的诉求，实现了基于百度翻译API的workflow，这里简单share下 翻译服务因为朋友的明确需求是百度翻译，所以这里也就选择了百度。但个人更喜欢谷歌翻译，因为确实翻译质量相对好些。 使用百度翻译服务需要以下两点 注册百度账号 获取APP ID，密钥，对应的API服务确保开通 开 ...

为了生产发版后，能够及时的通知BA，Dev同学，趁着周末，研究了会儿Jenkins，这里简单Mark下。 安装配置Plugin Manager自带的mail过于简单，为了实现邮件模版自定义，需安装以下插件 Email Extension Plugin Config File Provider ...

最近看到一道基础题，沉痛打脸，发现对于JS的事件循环机制理解不扎实，于是梳理下，巩固基础。 基础题先上原题 console.log('start');setTimeout(() => { console.log('children2'); Promise.resolve(). ...

今天接到一个需求，需要统计整个项目的代码量，为了系统且清晰的统计到整体的代码量，我还是做了些工作的。 于是这篇文章便诞生了。 Tasking要做代码量统计，大致需要以下工作 批量clone group下所有仓库日常开发，我们本地并不会clone下所有的仓库代码，因此还是有此需求，批量Clone ...

周末花了点时间，读了两本报告《2019-2020 中国开发者调查报告完整版》和《InfoQ-2020中国技术发展白皮书_toc》。 些许感悟这里简单Mark下 终身学习中国开发者调查报告中有这么一条近6成开发者每周学习6小时以上.这本报告，我印象15年开始我就喜欢读，记得之前的报告并没有这样维度 ...

在实际工作生活中，Mac+iPhone算是生产力中的主力设备，而iPad在我整个工具链中排位次之，但也重要。对于iPad，我的定位是阅读，因此这也是我选择mini尺寸的原因。 这里梳理下iPad上安装的App，留作记录，兴许也能为部分朋友提供参考 App清单 软件 功能 资费方案 备注 ...

梳理下个人iPhone软件，留作记录，也能为部分朋友提供参考 说明 部分为付费APP，对应也有很多免费开源的，但APP最终是看产出价值，这些APP对我的工作生活有了很大的帮助，还是值得的。 因个人贫穷，部分付费APP，采用学生license或者试用解决。学生认证可以免费，功能是完整的。试用版功能 ...

最近在老家远程办公，经常出现网络信号差及不稳定，尴尬的掉线频发。在忍无可忍之下，决定快速升级家里的路由器设备。。。 路由器选择之前曾买过小米路由器，华为路由器，但是这两个牌子的问题都在于稳定性差，当然也需要承认价格偏低。经过调查和朋友推荐，最终选择华硕RT-AC1900P即RT-AC68U升级 ...

项目上线后，每次遇到系统来回调用的问题，QA，BA往往需要询问开发，而开发先查代码，日志记录关键词，进而到kibana中进行检索，同时由于日志记录量大，还需要各种操作筛选等。最终可能问题的解决只花费了10分钟，但是确定到目标日志却花费了30分钟以上。之后再出现问题，又要进行这样一个流程，费时费力。 ...

Git已经成了开发中不可缺少的技能，Git玩的好，也是生产力。对于Git，我之前有一些人知盲区，于是碎片时间读了下《Pro Git, Second Edition》，不愧是GitHub官方推荐的学习资料，确是好书。 这里mark下几个知识点，强化记忆 Git Commit修改 如果只是本地已经 ...

公司代码管理一直使用GitLab,在实际的使用中也有一些大大小小的使用技巧，实践，这里记录下。 GitLab-丰富的API善用这些API，可以做到很多事情，比如利用API+pipeline本身可以建立自动Merge Request。 比如我们利用Jenkins定时跑Changelog提交到仓库 ...

无论是Java，还是JavaScript，在编程中都会遇到并发，并行问题，进而牵扯到线程，进程。这里就梳理下。 关于并发，并行的一个比喻知乎上看到一个形象的比喻 你吃饭吃到一半，电话来了，你一直到吃完了以后才去接，这就说明你不支持并发也不支持并行。 你吃饭吃到一半，电话来了，你停了下来接了电话 ...

最近在看《Thinking in Java》第四版-Bruce Eckel，其中讲到了这个名词，孤陋寡闻了，于是查了下WIKI，不禁觉得西方为何厉害就是将万事万物背后的行为模式，规律进行归纳总结，结合了下我最近工作的所思所想，觉得这个概念确有用武之地，于是这里MARK下。 概念承诺升级（英语： ...

必备条件 可科学上网-既然你可以上Medium，这一条应该是满足的，但还是强调下 Google Voice，可以作为注册时美国电话号码，收取短信有用，没有的，建议淘宝 一张国内银行储值卡，最终收益你想转账国内卡肯定少不了 具备这三个条件的继续向下看 Payoneer账户注册地址：https://w ...

在之前的文章里，我已经介绍了commitlint,standard-version来约束提交信息，最终生成漂亮的changelog，但是提交信息毕竟有一定的格式，人工去注意还是很繁琐，如果有个表单能够辅助书写就好了。好在确实有这样一个插件，且开源。 commit-template-idea-pl ...

有时存在这样的需求，GitHub个人项目的提交与GitLab公司项目的提交，我想走不同的Git配置，比如公司项目中，我想使用我的itcode heqiangx作为username,但是GitHub我想走个人的英文名字Alan He,如何解决呢，这就要做到根据仓库地址不同，自动切换Git配置信息了。 ...

在实际的项目分支管理中，我们往往有这样的需求，当我们面向生产-直接修复一个bugfix，生产分支确定OK后，我们还需要手动发起MR到其它分支，分支环境多了，这个问题会显的愈发啰嗦，因为完全是个体力活。但凡人工，必有失误，那么这个流程能否自动化呢。 分支自动化设想 简要介绍下图中的几个环境也即分支 ...

了解一些Chrome的小技巧，可以节约时间，提升效率，这里记录下平时摸索到的一些点。 拷贝请求部分数据比如拷贝返回body体，可能习惯了在请求详情的response tab页，双击全选，但是操作实际上不方便的，最快的方式如下。 选择多个资源类型按住⌘，即可选择多个 designMode控制台 ...

环境问题说难不难，但是从来也不是那么顺利的。 寥寥数字，希望能够帮助使用ionic进行安卓APP开发的朋友们。 本人是坚定Mac党，所以命令以Mac下运行为主，Win下请自行查找，都类似。 install java jdk install android studio 下载戳这里 i ...

对于package.json这个文件，我们并不能只知道依赖与开发依赖，丰富了解，善用package.json可以让我们的应用更改健壮，开发更高效 强制开发者使用yarn而不是npm进行装包总有那些不细心观察项目的人使用npm进行装包，最好的办法不是文档，而是自动检测。 添加 script pa ...

最近偶然看到crowdin，发现可以利用这个平台做一些技术文档的翻译，觉得太便捷了，于是给自己定下了Task，每日30M-的翻译贡献，当前我翻译的项目是ionic–移动端混合开发框架【也可以做桌面端】。 实际执行了5天后，有这么几点的认识 我的体会 技术文档翻译的质量取决于2点，1是本身对于技 ...

早在AngularJS时代(即Angular1)即有双向绑定这个功能，当然这个概念不见得NG是最早的(ActionScript也有)，但NG的流行助其推广开来，这是毋庸置疑的，今天的Vue也有双向绑定，React本身并没有提供支持，但也可以自己实现做到。那，双向绑定是如何做到的，利弊又是什么呢。以 ...

WWDC结束，我便快速的升级了iPhone,iWatch,Mac，以为会是一直升一直爽，然而心情就像过山车，先让我哭一会儿。 虽然多少对内测试版的不稳定有些心理准备，但真升级后，不得不说心情就像过山车。 如何升级访问该网页，按照提示下载安装Profile，之后就会有新版提醒，直接安装即可升级。 ...

最近在梳理JS基础，觉得闭包这个知识点并不清晰，研究了会儿，所谓踏雪有痕，这里MARK下。 什么是闭包 函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成 闭 包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScrip ...

最近在做Web前端性能优化-体积瘦身。如今的框架都已经成熟的封装了功能，似乎傻瓜使用即可。但只知其一造成的问题就是一旦遇到任何问题就只能哑巴巴的等待所谓的升级和论坛寻求中帮助，惨不忍睹。 因此这里对懒加载，简单梳理下。 实现原理 无论是React.lazyLoad，Angular的loadChi ...

技术人员习惯性查看网页console，我们会发现有些网页会输出一些炫酷的console信息，当然国内基本上都是招聘。但一直有个疑问怎么做到的呢。 趁着周末研究了会儿，这里mark下。 举例子先贴几个例子。 比如百度的 比如知乎的 看到这里有2个疑问，颜色样式及文本LOGO这种字符画如何做到的 ...

实际WEB中看到有些人习惯这么控制一些字符实体来空格展示hello&nbsp;world,个人觉得并不好，这里来简单解释下。 &nbsp;因为HTML是标签语言，也就是代码，HTML中有些字符是保留字符空格，大于，小于号，就类似于正则中的/ . 都是保留字符，但有时我们想要这些字 ...

最近在MR代码时发现有人这么写btoa,郁闷了一下，原来这个是原生的Base64编码，好吧，个人JS基础存在盲区，这里补充下。 浏览器原生支持base64编码解码console.log(window.btoa('hello')); // aGVsbG8=console.log(window.at ...

最近测试团队提出一个问题-Web有个请求Failed to load response data 于是开始了分析及解决，这里Mark下 排除情况 response.status是200，说明请求正常发起及返回 该请求的返回体为空，但面对空返回体，Chrome显示是This request ha ...

之前的一段时间，将参与的多个WEB项目已经已经从TSLint迁移到ESLint，紧接着的问题就是共享ESLint配置，方案自然还是npm包管理 包项目结构├── CHANGELOG.md├── README.md├── commitlint.config.js├── index.js // 规则 ...

今天刷了几道常见算法题，这里简单MARK下。 数组去重reducefunction uniqueArr(arr) { return arr.reduce((result, item) => { if (result.includes(item ...

最近在做ESLint规则配置，重新注意了下complexity规则，之前对该规则不够重视，理解有盲区，于是系统学习,这里mark下。 概念 循环复杂度 Cyclomatic complexity也称为条件复杂度或圈复杂度，是一种软件度量，是由老托马斯·J·麦凯布在1976年提出，用来表示程序的复 ...

一直以来有个不正确认识，就是断言只服务于测试。确实，在实际的项目中断言更多出现在了UT里，久而久之潜移默化下的我认为确实如此，然而这是错的。 断言的概念 在程序设计中，断言（assertion）是一种放在程序中的一阶逻辑（如一个结果为真或是假的逻辑判断式），目的是为了标示与验证程序开发者预期的结 ...

最近报了极客时间的一个学习课程-互联网人的英语私教课。课程开篇讲到了KSA模型，这点印象深刻，这里简单MARK下个人所想。 KSA（Knowledge, Skills and Abilities framework）即知识、技能和才华模型。这个模型阐述了知识和技能的区别和联系。 老师所阐释的观 ...

不能谷歌，不能正常访问GitHub，不能刷油管，我想信息获取会很闭塞，身为一个程序员，更严重。于是在如何翻墙这条道路上，一直也在摸索，毕竟强也越来越高。但办法总比问题多，还是可以一一克服的。 以下为我目前的手段 服务 走朋友的私服 朋友的私服好处是只有自己用，而且IP因为是动态的，所以真被封了， ...

最近在CR时，发现有人在P标签中包含了div等块级标签。这是个错误，这篇文章就系统说明下。 P标签的定位 HTML 元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。 短语元 ...

2018.1我以没有任何优惠的价格JD入手了AirPods1代，真印证了一句话，早买早享受，应该说这是一件非常值得买的利器，我曾后悔买晚了。2020年开始，电池极度不耐操，于是最近入手了新款的AirPods。所谓踏雪又痕，这里也就简单记录下，我是如何看待AirPods和选择的。兴许还能帮到些朋友。 ...

React v16.3+已标注componentWillReceiveProps为不提倡，17将予以删除，那么这个周期函数为什么要被废弃呢，弊端在哪里，及新的同需求新写法又是如何呢。这篇文章我来梳理下这个函数 componentWillReceiveProps的触发时间顾名思义即props发生 ...

趁着周末做下react-intl的类库升级。当前最新版本是v4.6.9,项目使用的版本是v2.3.18，这里决定升级到v3@latest 升级带来的benefit 修复已知的BUG，原先的版本当我传入de-de，国际化失效，当时的workaround是我将localData的key永远设定为en ...

最近因为Alfred的开发与社区的布道师沟通，期间在一个问题上我的描述让他出现了极大的困惑，他给了我这么个反馈-这是个X-Y-Problem，这时我才第一次知道X-Y Problem这个概念。 诚然，很多时候，我们去问的问题，我们需要自己先去想想，描述的问题是否是真正的问题，描述的是否自己能否看懂， ...

最近站点上了WebSocket,紧接面临的问题是Web服务集群下WS的通讯问题。Web服务多实例的情况下，假如A用户访问订阅了A服务的WS频道，但是B服务在后台发起了广播，实际上A用户是收不到消息的。于是问题来了,集群场景下，广播，单个用户准确发消息呢。 Tech Stack首先，介绍下当前项目 ...

个人是AirPods等无线设备的强烈支持者，很多年不曾使用过有线鼠标，耳机了。但日常使用存在这样一个场景，平时AirPods是连接的iPhone，但有时比如要开会，我需要快速连接到Mac上去。当前的操作是，滚动鼠标到屏幕右上角蓝牙图标=》点击蓝牙图标，选择AirPods=》选择连接。OK，操作繁琐 ...

一直没做过Chrome拓展开发，最近发现京东跟阿里一样，在一些权益上刻意为用户设绊子，浪费宝贵的时间，于是顺便做个小工具，也权当Chrome插件开发练手。 工具的目的 自动点击摇一摇 定时自动获取目标金额优惠券 工具作用不大，但节省了几次鼠标点击的体力操作和对于定时才可以领取优惠券的惦记。s ...

个人博客当前使用的搜索服务是Swiftype，但有一定试用期，到期后402报错。而local search的体验很差，于是我切换到使用algolia。发现这么个服务配置，网上说法不一，多少还是踩了点坑的，这里简单Mark下。 当前博客主题版本 hexo - v3.9.0 hexo-theme-n ...

最近思考如何在Alfred中实现印象笔记的检索功能，好在社区中已经有好人实现了一版，但其支持的是Alfred3及Evernote，所以需要进行下改进。当然如果功能有不满意的，还需定制自行改进下，不过问题不大，开搞。 当前效果 下载地址：戳这里 想知道如何做到的，继续看。 脚本改造将scpt文件中 ...

最近在刷题，发现很多公众号为了保护个人知识版权，都是用图片来发题，这样在测试时，每次都需要从零手写，这样就很浪费时间。于是考虑搞个截图识字来节约时间。 OCR服务-百度OCR服务商还是挺多的，谷歌，腾讯，百度等。因为百度的SDK支持NodeJS，而腾讯不行，谷歌毕竟在墙外，可靠性弱一些。所以选择 ...

现象 分析WEB用到了自定义字体，DOM解析渲染时，字体还未加载完全，立即使用缺省字体显示，字体加载完成后，重新渲染替换 手段明确了问题，就着手优化解决，改进点有以下几方面 样式抽离当前WEB样式是打包进JS，每次是动态插入Style到header部分，所以较慢。另外JS变动实际上造成指纹【即内容h ...

经常需要登陆公司VPN，一直使用脚本登陆，但还是不够高效，于是为了节约时间，利用Alfred来实现一键VPN workflowworkflow中的关键点有以下几步 keyword获取用户输入的手机验证码 临时存储keyword到变量中，原因是还需要用户进一步选择服务器节点 list filt ...

三元表达式在简单的判断取值中使用，还是很简洁的，但是当遇到嵌套逻辑时，可读性就变得很差，实际项目中，我是这么要求团队=》禁用。 var foo = bar ? baz : qux === quxx ? bing : bam; no-nested-ternary为了约束这类代码的存在，esli ...

最近阿里发布了阿里巴巴Java开发手册（泰山版），花了点时间阅读下，这里MARK下个人感受 无规矩不成方圆 有些人觉得没规矩不挺好？但假如项目中10个人，10个风格，10个规矩或者没规矩，代码又存在交集，这样的代码能维护吗？能不出问题吗？impossible！ 规矩，标准是为了提升协作性，降低 ...

之前年终Review时，与同事探讨一个项目总是会面临各种情况，而项目底层的架构，也是一直在发展，架构背后的人也是在发展，面对这种发展，我们需要系统反思、调整、分享。只有这样才能校正，才能统一整个team的认知等。 在交流中同事推荐我去了解 Architecture Decision Records ...

当前装饰器还只是ES提案[Stage 2]，在过去，还没定下来的东西，我们无话可说。但今天，项目中使用的是TypeScript，Babel，本身存在转译，所以我们往往可以用些超越当前的特性。比如Angular2框架中就有装饰器的大量存在。 这块之前我也只是在NG中较多的使用，并不算熟悉，于是冲下电 ...

最近花个把小时阅读了谷歌工程实践，当然现在只有CR，MR部分，但是仍然很有触动。这里谈下个人的感受 官方文档：戳这里 CL的规范化 CL means changelist CL提交新的subject，采用祈使句，一个命令的形式言简意赅的表达这次提交的改变是什么，如果需要详细的上下文，关联的卡号 ...

最近项目在做安全扫描，安全团队报过来了一个问题-没有满足CSP，如下图，错误提示已经很清晰了，但是源于我之前对此并有学习过，于是开始了调查学习 内容安全策略( CSP ) CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览 ...

最近在群里刷题看到这样一个问题 '✈️'.length,额，一脸懵逼，于是开始查找资料，系统了解，这里Mark下。 emoji是啥 emoji（英语：emoji，日语：絵文字／えもじ emoji），是使用在网页和聊天中的形意符号 我们输入的表情，并不是图片，而是实实在在的字 ...

最近因为折腾Alfred的热键绑定，了解到了一个术语modifier keys,查询了下才知道是什么按键。由此发现对于键盘的基本布局术语都没有系统认识，于是搜索查询，这里mark下。 modifier keysmodifier keys即修改键，也叫组合键，就是这些快捷键是为了结合其它键，起到 ...

tslint已标注deprecated，根据公布的roadmap,2020年将逐步退出历史舞台。为什么要这么折腾，其实核心原因就是整合JS社区资源，tslint没有必要另起炉灶。从个人而言也是好事，至少你不需要记忆两套规则 借着周末时间，我将当前的项目做了下lint迁移。 tslint roa ...

背景 关注社区的应该知道babel 7支持了TypeScript的转译，也就是说我们并不一定非得用之前的方案ts-loader或awesome-typescript-loader。 最近想解决saga报错的易读性，发现官方给出了方案babel-plugin-redux-saga，是个babel插件。 ...

Redux-Saga假如执行中报错，实际上是很难看懂的，这点官方也有提及，解决办法就是引入babel-plugin-redux-saga，来提升可读性。 直接开搞 插件安装$ yarn add babel-plugin-redux-saga -D 注意 虽然版本号已经是1.1.2吐槽下官方的 ...

国内我们常用的第三方支付是微信和支付宝，而国外比较流行的是PayPal. 之前是为了方便购买美区Apple Store的APP，所以注册了美区PayPal。这里简单总结下。 PayPal注册 招商Visa信用卡 大多数服务是不支持银联的，所以Visa卡很重要 Google Voice ...

有这样一个需求，我希望在finder中快速拷贝选中的文件或者文件夹路径。 不满意的方法 当然有第三方的APP比如Easy New File可以，但是为了一点需求，而安装一个臃肿的APP，实在不愿意 Alfred解决也可以，选中文件，或者文件夹，一个热键触发，搞定路径。但Alfred是无法拓展右键 ...

最近项目中用到了WebSocket，但个人对WS的认知太过空白，于是花了点时间阅读了相关书籍《WebSocket》。对于其中的一些收获，这里Mark下 WebSocket的使命技术的推出一定是为解决一个问题，就类似于ES推出了promise，是为了解决回调问题，XHR为了提供异步交互。WebS ...

最近项目存在一个需求，就是用户从我们A系统中打开标签页操作B系统，在点击某个操作按钮时，回call我们系统的API，改变一些数据。而我们要做到在事件爆发时，执行一些列动作，比如–页面刷新。这个需求的背后其实在告诉我们系统需要具备后端主动推送消息到前端的能力。如何做呢？WebSocket. 于是， ...

当前项目中很多处理耗时较长，单个API请求我们可以加拦截器做到loading的开启和关闭，但是假如是一个effects中包含了多个请求，同时夹杂了一些其它的逻辑，那么单纯靠API层的loading控制是不行的，并且还会出现抖动开关。so，我们需要做到saga-effects这层的loading控制 ...

最近快速阅读一本书《Beginning CSS Preprocessors》， 书中讲解的less,sass，compass使用略显过时，但整体读下来还是有几点收获和想法的，这里Mark下。 预处理器的使命与其宿命 CSS并不遵循DRY原则，所以实际上我们书写的样式中存在大量的重复，而预处理的 ...

风格很多时候没有绝对的对错，但是一个项目，一个team，群星璀璨，风格迥异一定是错。对于个人也一样，在实际的编程中，逐步也会形成自己的一套风格。这里梳理下我所认知的，抛砖引玉 已知的大小写风格 大驼峰命名法(Pascal Case) UserType 小驼峰命名法(camelCase) use ...

命名一直是个很有挑战的事情，需要做到的是一定的表意，一定的抽象，一定的言简意赅。之前看到一篇非常不错的文章【即该文】讲述一些事件处理函数的命名规范，其中的手法与我自己在实践中的一些认知一致，但解释的更为有理有力，这里翻译下，权当自己做了次复习，兴许也可以帮助一些Coder。 虽翻译，仍推荐看下 ...

年前已经拿到的X1因为账户问题，吃灰2个月～～～哭倒，节后，经过客服重做系统，最近才拿到手里。因为主力机器还是Mac，所以这台机器不免作为我的备机。 轻度把玩几个小时，这里记录下我的操作与看法。 备注：我拿到的本配置是第七代+i7+16G+2T,顶配，X1当前内存最多支持到16G，搞开发的同学 ...

因为个人博客从国内迁移到了国外，服务器销毁，备案域名也就失效了，博客中的图片等资源一直走的七牛云图床+自定义域名，因此受牵连不起作用。在考虑新图床时，尝试使用了下imgur，但该服务却是被墙的，总之各种不爽。 忍受一段时间后，决定自建图床，同时将七牛云的历史图片资源进行下迁移，保证之前博客中图片资 ...