blog

github actions？ actions ？action？首先需要补充说明这几个名词，因为都和 action 相关容易让人混淆。 github actions ：是对 gihub 所提供的 cicd 、test、build 和 deploy 功能的 workflow 的统称 actions: 指代每个项目中 github actions workflow 集合，每个项目都可以都有多个 yaml 描述文件，来实现不同的功能 action：在 github actions 实现了一个插件系统，允许用户自己实现，或是通过社区分享一些特殊的功能模块，由插件系统整合到 workflow 中，这些功能模块就叫 action 如何写一个基础的 action？官方提供了一个基础的 github repo template https://github.com/actions/javascript-action 打开，点击 use this template，恭喜你已经实现了一个基础的延时功能 action 了。 好吧，当然这个 template 本身非常简单，但是她已经包含了开发一 ...

变化之事个人的开发设备逐渐走向了无线蓝牙化，包括了 罗技的 mx master plum niz 双模版 除了这两个，本来我就有一个蓝牙 ikbc 键盘，一直没有用到，这次也用起来了。 带来的好处当然不至于说让工作效率翻倍，但 肉眼可见的的桌面变整洁了 设备的活动范围不再受到线缆的限制限制而更加自如 这些细微优化带来的体验，还确实不错。（当然也有可能只是因为我自己花了钱，产生的错觉。 延迟……吗？多数人对蓝牙鼠标，蓝牙键盘的顾虑大都源于蓝牙的延迟问题，特别是游戏方面 但是，这真的是个问题吗？ 就这段时间的开发工作体验，这些蓝牙设备感受不到延迟，性能非常足够。 而游戏方面，其实仔细一想，在这方面 不玩竞技性的游戏 好的蓝牙设备的延迟并没有很低 游戏使用时间只占到日常使用中非常小的一部分 的我来说，蓝牙设备又有何不可呢？ 更替的原因其实从换工作之后，就一直想着更新自己的设备，这些东西也不完全是一时冲动。 这次在家办公确实给了一个契机, 当时一段时间基本只能用 7590 的键盘和触摸板进行开发实在难受。 最终使我决定入手键鼠套。 至于为什么是蓝牙无线的，只能说在当时家里卧室 ...

前言之前的账号密码找不到了，恰好想要尝试一下久闻大名的 github action + netify，那就整一个吧 基本流程 参照 hexo 官方文档构建一个 blog repo 推送到 github 利用 action 执行构建，并部署到 github 的另一个 repo ，例如 blog-static 在 netify 关联到blog-static，拉取文件并正式部署 对应的 action 文档 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152# This is a basic workflow to help you get started with Actionsname: CI# Controls when the action will run. Triggers the workflow on push or pull request # events but only for the master branchon: push ...

workbox 的 service worker 缓存实现正如其名 workbox 是 google 封装的一个工具箱，旨在提供开箱即用的 service worker 相关特性。 precaching 缓存应该其中适用性最广的一个特性。正好最近在项目中使用的到，于是便去研究了一下其原理 service Worker + cache api = precache我们说 service worker 缓存其实并不正确，service worker 本身并不提供缓存功能，而是配合了 Cache 的 api 才提供完整的缓存功能。 在 workbox 中将这两者封装成一个 workbox-precaching Service Worker 生命周期在缓存功能中 Service Worker 的作用主要有两个 提供生命周期的钩子给 PrecacheController 进入执行缓存控制的相关逻辑 提供拦截请求的功能 Service Worker 的生命周期包括 installing 每个 service worker 只触发一次，初始化和注册 Service Worker ins ...

最近尝试为 vue 项目配合 TypeScript 不过发现毕竟 vue 不是原生 TypeScript 开发，在对 TypeScript 支持方面显然还问题多多，这里稍微记录两则 自动注入 h 问题如果你在 vue 中是用 jsx 你会明显感受到和 react 有明显的一个差异就是 react 中你可以很方便的到处写下 jsx，而 vue 中则限定的比较死，要么写在组建的 render 函数中，要么主动传递 h 函数到你想要写 jsx 的地方比如 123456789101112131415161718// 找不到 h 函数const component = <button />// okexport default { render (h) { return <button /> }}// 主动将 h 传递到需要的地方const component2 = h => <button />export default { render (h) { return com ...

本文建议结合 https://github.com/Tk-archer/functional-javaScript-code-refactoring 这个项目阅读查看 起『JavaScript函数式编程』这书其实在几年前我就入手了，但是当时并没能读下去，然后就一直尘封在书柜里面。 直到最近才偶然翻出来，打算好好读一下。本文说是读书笔记的话就过于正式了，所以就只能称之为备忘录了。 为了避免重蹈覆辙，我总结上一次没能读下来的原因 只是读书，书本身不厚，但是里面有不少示例代码，大量的概念直接蕴含着代码当中，而且前后关联，当时顾着硬啃书，而没有去实践一下代码，当然就很难读进去了 代码语法偏差，书中的代码实际上是以 es5 为准实现的，虽然等价，但是习惯了 es6 以上的代码的时候，会明显感受到 es5 所带来的阅读理解成本 类库不一致，本书成型的时候还是 Underscore.js 流行的时候，而我读到这本书的时候已经是 lodash 的时代了，这两者之间的偏差也为我带来了理解上的成本 因此，我所想到的更加好的复读这本书的方法就是—— 用 es6 以上的语法，以及根据自己的理解将示例 ...

序言不得不说，我实际上并没有正儿八经的为自己写过一篇年度总结。所以这某种意义上来说也是一种“新年新气象”的行为，尽管这实际上是在回顾过去。 2018 我干了什么今年是我在我的第一家公司工作的第二年，也是我正式工作的第二年。工作上今年其实并不是很有意思。 不上不下的组件库年初我完成了公司内部的一套统一的 ui 组件库，现在看来只是马马虎虎，不足之处也数不胜数。但是实现的过程中可以说是对我个人的提升最大的一项工作，这对让我对需对组件的整合设计逻辑，以及这个组件概念本身都有了更多的了解。 但是不得不说，一个要维护一个成熟的 ui 库其实是非常花费精力的，看似一个 ui 组件库的核心是他自己，然而有没有方便的使用方法，明确的文档，能否有一套成熟的管理协作开发流程都对这个 ui 组件最终能发展成怎么样，有着非常大的影响。 ts/rx/react不得不承认我还是一个相当跟风又懒的人，在周围各种大佬的案例下，我最终可喜可贺的有时间“入门”了一下以上提到的这三个东西，的确可以说是打开了一些新方向 不过，可惜的是这些依然处于一个“入门”的阶段，能看懂使用了这些库的项目的源码，并一定程度理解到其实现思路的 ...

最近在公司负责了一个类似 element-ui 的 vue ui 库的开发，然后在如何合理分发的问题上遇到了麻烦。因为想要用起来更加方便，那么如何简单的安装使用起来显然也是需要考虑的问题。最终我们决定通过 npm 包管理的方式来分发使用我们的内部 ui 库。毕竟 npm install package 几乎是现实的标准了，也是前端最为熟悉的方式了，不过这也引发了额外一个问题。我们的内部 ui 库是放在公司内部的私有 gitlab 仓库当中，也并没有发包到 npm 上，自然还是需要格外做一些工作。 npm 常见安装包的方式先让我们回顾一下 npm 的安装方式。根据官网，撇开额外的 common options， npm install 可以处理的方式有如下 10 种，让我们来复习一下 12345678910111213141516171819202122232425// 不带任何参数，默认搜索安装当前目录下的package.json 中记录的包npm install (with no args, in package dir)// 根据 npm 服务器上记录的包名安装，这也是最常见的安 ...

我知道之所以知道这本书，源于去年的在 medium 翻看 javascript 相关技术文章的时候看到相关的介绍，该文章的作者对这本书的评价非常的高，因而引起了我的关注。 先说结论，这本书确实很值得一看。 纵观全书，虽然涉及丹尼尔/阿莫斯两人的研究成果的介绍及论述，但是点到为止，这本质上还是丹尼尔/阿莫斯两人的传记。 虽然有不少人认为作者花了整整一章来介绍NBA的人才选拔系统，很有一种为他旧作《魔球》作吹捧的意思。不过就像他的前言所写的，有很多人并不了解丹尼尔/阿莫斯，就像他自己也是机缘巧合下从别人对他的书评里才认识到丹尼尔/阿莫斯及其研究。所以不妨结合引言，姑且认为这一章是个有些过长的引子。 两人的关系回到本书的核心。两位才华横溢的学者，处于二次世界大战中后期犹太人的身份注，定他们会度过和西方世界人们不太一样的童年/青少年，这经历或多或少造就了他们截然不同的性格。而有趣的是，他们最初的才华展现都和在以色列从军的经历有关。他们好像两条截然不同的平行线，却到最终在名为心理学的交点上相遇。 他们两人的友谊的有趣之处，正如书里其中一章的标题所写的的那样，小白鼠和巨蟒的碰撞，谁也想不到性 ...

vue 要在 template 动态调用组件非常简单只需要 <component> 组件配合 is 属性就可以动态渲染组件。 123<template> <compoment :is='someComponent'></compoment></template> 不过在 jsx 中使用 <component> 组件的话会报错，显示该组件不存在无法渲染。因此需要换一个方式。 由于 jsx 本质就是 js 不需要 component 组件做中介，可以通过 js 直接找到对应组件 123456...render(){ const Comp = this.someComponent return (<Comp></Comp>)}... 这是由于如果一个变量指向了一个组件，那么这个变量名可以直接被 jsx 解析并渲染。 因此在文档中也会提到到我们可以不将组件加载到父组件当中，直接经由 jsx 渲染出来的原因 123456 ...