月度归档:2022年03月

做了两个转换 Color HEX Codes 的 PopClip 插件

最近这三年里头,我成了一个 Flutter 开发人员,加入了映客这家做直播的公司,主要做直播相关的业务开发。映客的产品研发流程中设计团队的设计稿交付通常都是通过蓝湖来完成的,我们也就习惯使用这个工具来查看设计稿了,开发的过程中确认尺寸和取色的过程基本上都是直接在蓝湖上完成。

通常我们需要使用的颜色值在设计稿页面右侧的标注栏中根据我们想要的颜色格式,在 HEX、AHEX、HEXA、RGBA、HSLA 这几种颜色表达格式中随意切换,然后直接拷贝即可。

但是由于我们做的是 Flutter 开发,Flutter 原生支持的颜色构造方法有以下几种:

const Color(int value) : value = value & 0xFFFFFFFF;

const Color.fromARGB(int a, int r, int g, int b) :
    value = (((a & 0xff) << 24) |
             ((r & 0xff) << 16) |
             ((g & 0xff) << 8)  |
             ((b & 0xff) << 0)) & 0xFFFFFFFF;

const Color.fromRGBO(int r, int g, int b, double opacity) :
    value = ((((opacity * 0xff ~/ 1) & 0xff) << 24) |
              ((r                    & 0xff) << 16) |
              ((g                    & 0xff) << 8)  |
              ((b                    & 0xff) << 0)) & 0xFFFFFFFF;

每次从蓝湖中拷贝过来的 HEX Color Codes 字符串总是无法直接拷贝粘贴到 Dart 代码中直接使用,每次要么得自己把 #FFFD3666 中的 # 换成 0x,最终变成 Color(0xFFFD3666) 这样才能正常构建出来一个颜色值对象。对于这种简单重复的劳动,我是有种本能的反感,在前两年的开发中,我自己实际动手写 UI 控件的机会不多,因为组内有其他能做得更好和更熟练的伙伴在负责 UI 控件这块儿,这近一年由于自己从原来的大项目组调整到了更小的团队中,由于人力配置的问题,日常开发工作中也开始自己写一些 UI 控件了。一次次地拷贝中,除了想着想把一些颜色值做成主题(更多依赖于研发和设计高度认同,严格遵守规范,定义好业务内不同场景下应用的颜色、尺寸、圆角半径等等),还有就是想着能不能把每次手动改动 # 符号为 0x 的这种机械式的动作简化掉。

恰巧我很多年之前使用过 PopClip 这款软件,具体为何我会购买这款软件,以及当时我用这款软件来帮助我完成什么事情,我已经记不起来了,但是我非常清楚地记得它有一个非常强大的插件生态和插件能力。所以我就想着是不是可以利用它的能力,帮助我达成每次拷贝到这种 HTML 的 Hex Color Codes 字符串的时候,弹出一个处理选项按钮,我直接点一下就帮我处理好了,我只需要切到我的 IDEA 代码编辑器中直接粘贴就好了,所以我这就直接先去这个官方整理的插件页面去找了一圈,不过看来这种需求还是有点小众,并没有完全匹配的。

想来想去,还是忍不了这样总是无聊的重复劳动,借着周末在家,刚好新项目的研发工作已经阶段性地告一段落了,只需要日常推进持续迭代即可。想着给自己来个代码按摩吧,了解了解这个编程世界中的其他一些美好的角落中的小故事,顺便给自己写个提效的小工具,也算不错,刚好北京近两周正处于疫情苗头又起来了的阶段,也不太能带娃出门。

既然选择要写自己的插件,那就找到官方的教程来读读看,不看不知道,一看吓一跳,真是要给这样的开发者竖大拇哥👍 啊,文档写得是真到位,写得真好,但凡作者觉得能对读者有帮助的内容,都给出了外链和应用方法。从这个文档中,我至少拓展阅读或了解了以下一些非常优秀的项目:

quickref

case-anything

 The Noun Project

SF Symbols

ICU specification

作为一个非冲动动手型选手,在动手写任何代码之前,我总是希望能对我即将要做的事情有一个大致的了解后再思考自己需要怎么做。虽然我也能直接拿着官方插件仓库中的代码之间改一改就能跑起来,但我显然一直都不是这样的一个人,我还是比较享受从 0 到 1 慢慢了解一个项目,这样难度相对更低,自己也能更舒服,渐进了解了 PopClip Extension 的设计思路和整体规范之后,再了解具体制作的流程和规范,再结合自己要做的事情,匹配到我需要使用的特性,最终确定我需要使用到其 Shell Script Action 的特性来执行我自己稍微熟一些的 python 脚本来完成我想要做的两件事情。

  1. 将 #FFFFFFFF 这样的 HTML Hex Color Codes 一键转换为 0xFFFFFFFF 这样的 16 进制字面常量表示形式;
  2. 将 #FFFFFFFF 这样的 HTML Hex Color Codes 一键转换为整型数 4294967295。

具体的制作过程就不展开了,实际上非常的简单,直接照着教程,创建一个目录,在目录下放上以下三个文件即可:

  1. Config.json => 用于声明这个插件的各项参数和具体需要使用的图标,执行的脚本,以及执行完脚本得到结果后的动作等等;
  2. h2d.py => 这是我写的两个插件中的其中一个插件依赖的 python 脚本的名称;
  3. README.md => 一个用于描述自己插件是干嘛的 MD 文档,可有可无,但是我认为是需要的,像优秀的人和优秀的项目靠近,我们才可能也变得更好一些;

然后将整个目录改名,加一个 .popclipext 后缀在目录名称后面即可,安装了 PopClip 的 macOS 系统会自动识别出来这个目录是一个插件,整个目录的图标展示都会变成 PopClip 的图标样式,双击安装插件,由于我们自己写的插件目录下没有签名文件(如果要签名可以联系 PopClip 的作者帮忙),所以 PopClip 会检测到这是一个未签名的插件,需要我们二次确认后才可安装成功,安装成功之后,即可使用了。

我的这两个插件的效果就是这样的,#FFFFFFFF => 4294967295,0xFFFFFFFF

插件效果演示

最后附上我自己 fork 出来的 PopClip-Extensions 的地址吧:https://github.com/lishali12345/PopClip-Extensions

另外这两个插件的代码分别在:https://github.com/lishali12345/PopClip-Extensions/tree/master/source/Hex2Decimalhttps://github.com/lishali12345/PopClip-Extensions/tree/master/source/HexColorCodes2HexText

下载后可以直接双击安装并使用的插件(注意未签名)在:https://github.com/lishali12345/PopClip-Extensions/blob/master/extensions/Hex2Decimal.popclipextzhttps://github.com/lishali12345/PopClip-Extensions/blob/master/extensions/HexColorCodes2HexText.popclipextz

「读库 App」给我带来了什么?

作为一个《读库》的 13 年长期订户,我从 2009 年毕业那一年开始每年都订阅当年的全年《读库》,在其推出「小册子」计划后每年订阅的就是全年《读库》+「小册子」。

时间由来已久,期间自己搬过大概 6 次家,每次搬家的时候都会发现自己需要搬的书中有近 1/4 是历年来在「读库」这个出版机构购买的各种书籍,每次搬家除了觉得书很沉,收拾起来和搬起来都很累(虽然每次都会找搬家公司,只不过自己每次搬家都是跟搬家师傅一起搬,不论是否有电梯,好像直到最近一次搬家才搬进电梯房,所以每次都有真正的切肤之感)之外,每次收拾这些书的时候还会发现一个巨大的真相,那就是「原来我订了这么多年的《读库》中至少有一半是我竟然都没有拆开塑封的或者没有翻开过的」。

所以每次搬家的时候,会觉得自己辜负了这些好书好文章,没能及时地跟她们在书中厮磨一番,将其冷落了,顺便也会怀疑自己是否还需要持续订阅下去。可是鉴于这些书实在是太便宜了,而买书又那么地能给自己提供一个虚妄的满足感,正所谓「买书如山倒,读书如抽丝」,显然不是我个人的感受和困惑。「买都买了,还需要读吗?」更是我们这帮买书不读人常挂在嘴边的自我开解之辞。所以每年只要老六开始吆喝新一年的饭票要续费的时候,总是第一时间就下单,感觉是给自己这一年的空虚又填上了一锹带有墨香的土。

作为一个卷心菜式的互联网打工人,连续创业多年,连续失败多次的自我压榨者,坦率地讲,这么多年来,一直没能做到传说中的「work life balance」。作为两个男娃不太合格的爹,工作日基本上没有在 9 点之前下班的时候,留给自己捧读的时间和机会确实不太多。这倒不是想给自己读书不多找什么借口,我也不需要这样的自我承认,活到这个年纪了,自己大概是个什么样的鸟人,基本上自我认知已经比较真实了,就看自己愿不愿意面对了。

坦白地讲,我就是一个在普通不过的普通互联网打工人了,时间不多,疲于奔命,渴望精神世界的自由和财富自由而不得。想进步,每次制定了一个成长的计划后,基本上在 3 ~ 30 天之内就夭折,想健康,基本上在坚持了两周之后以各种各样的姿势再次花式扑街。基本上,大家都看的综艺,我也看一些;基本上,大家都看的电影,我也看一些;基本上,大家都看的美剧,我也看一些;基本上,大家都听的音乐,我也听一些;基本上,大家都买的基金,我也买一些;基本上,大家都炒的股,我也炒一些;基本上,大家犯过的错,我也犯一些;基本上,大家打的鸡血,我也打一些。

看吧,就是这么一个如此普通和无聊的人罢了。所以书买了没读,内在原因在那儿,外在原因在那儿。不过这一两周里,开始尝试使用「读库」App 之后,我发现还是有些变化的。

首先,我已经养成了每天在有空闲的碎片时间时,主动打开「微信读书」App 随便翻翻的习惯。所以当我把「读库」App 跟「微信读书」App 放在手机桌面隔壁时,已经养成习惯的我在想打开「微信读书」的时候,会有一定的概率会打开「读库」。就着这个「裙带关系」,在不到两周的时间里,利用工作日通勤路上的时间,午休的时间,休息日的闲暇时间,我已经读完了《读库 2201》了,而家里的纸质版的《读库 2201》才被翻开了没几回。

其次,由于「读库 App」实际上提供的内容不止限于其出版的《读库》每期刊载的内容,还有其他周边的内容,例如非当期的内容,往期成系列的文章,如我自己花时间最长读着尤为喜爱的《文学的故乡》系列文章。其中关于毕飞宇,莫言,迟子建,这三人的文章我也在往期的《读库》中已经读过了,但是借着这次「读库 App」上的主题系列阅读,我又非常愉快地先重读了一遍,然后接着一口气把刘震云,贾平凹和阿来的三篇文章都给读完了。这一系列的文章,要是从篇幅上来看,已经接近一部小书了,成系列地连续阅读会让人读着读着读出一些勾连和互通的感觉,我能读出这些作家对于自己写作的内源力的探究的殊途同归,我会发现优秀的作家或者说作者实际上他们的认知和行为方式都是那么的诚实,相似处很多,共通性很多,也有着故乡土地给予他们各自不同的底色,更有着不同成长路线给予他们的视角的不同,但是大爱是一样的,那就是书写自己的内心,书写自己看到的普通大众的内心。

借着 App 的便利性,不但不自觉中把原来基本上已经很难再按时读完的书给读了,还因着 App 中编辑的推荐和形式的灵活,有了系统化阅读的快乐和拓展阅读的可能,比如,关于拍了《盲山》和《盲井》的导演李杨的文章,关于区块链原理的文章等等。

认清这个事实了之后,自己蛮开心的,承认自己不是那么爱书的人,已经被手机和 App 驯化成为了一个普通的现代人,那么就借着这个事实,把手边能用起来的时间稍微分配一些给到阅读这件事情就好了,纸质阅读很好,继续保持就好了,手机上的电子阅读也很好,可以补充很多的场景,并且让阅读这件事情完成。

不要为了某种形式,追求某种完美,也不要因为缺失某个条件就不去做某件事情。大概就是这样吧。