给你点颜色看看 - 下篇

在这篇文章中,我们从实践层面来讨论如何搭配颜色,并在实际场景中正确运用。

August 26, 2021 1 min

前端性能调优心法

性能问题是软件开发中的常见问题,我们在几乎每个项目在某个时期(往往是在后期快要交付的时候,或者已经上线以后收到用户反馈)都或多或少会遇到。这篇文章想要从流程方面和具体的技术细节上对软件性能优化上遇到的问题做一些总结和分类,以方便在后续类似的场景下可以提供给开发者一个参考。

June 16, 2021 2 min

组件设计之组合原则

表面上看起来这个优化工作包括两大部分:性能优化和结构重整。不过经过这几个月对十多个组件的重构之后,我们发现这两部分工作在很大程度上是同一件事的两个方面:好的设计往往可以带来更好的性能,反之亦然.

May 1, 2021 3 min

自动化重构 - jscodeshift

自动化重构(jscodeshift) 在这篇文章里我想要通过一些小例子来介绍使用jscodeshift来进行自动化重构的技术。具体来说,我想要介绍在一个组件库的开发和维护过程中,如何使用jscodeshift来自动修改公开的API接口,从而尽可能小的产生对组件用户的影响。 如果你们团队开发的组件被其消费者(组织内部或者外部)使用了,而这些代码又不在你的控制之内,那么这里讨论的技术和模式可能对你很有帮助。而如果你的日常工作更多的是使用组件库来开发应用程序,我希望这里的知识和技巧仍然对你有所启发,毕竟在软件系统中,我们往往都既是某些库的消费者,又同时是另外一些库的生产者。 从一个简单场景出发 设想这样一个场景,你发布了一个酷炫的组件库(fancylib),其中有一个按钮(Button)组件。这个Button的一个属性是当点击后处于加载中(loading)状态时现实一个表示加载中的小图标。 (图片来源:https://xd.adobe.com/ideas/process/ui-design/designing-interactive-buttons-states/) 在代码实现中,这个加载中状态被定义为了名为isInLoadingStatus公开prop。用户可以通过设置其值来控制Button的状态: import Button from '@fancylib/button'; const app = () => ( <Button isInLoadingStatus>Click me</Button> ) 一个实习生在某一天code review的时候提出了一个问题:在组件库中的其他地方,所有的boolean状态都是用一个单词来表示的,比如checked, disabled等。如果按照这个惯例,这里应该把isInLoadingStatus简化为loading。好主意! import Button from '@fancylib/button'; const app = () => ( <Button loading>Click me</Button> ) 假如所有用到Button的地方都在你的控制之内,字符串替换大约是一个快速且80%有效的方案。不过稍微分析一下,你就会发现简单的Shift+F6会遇到很多问题。 复杂情况 比如用户对其做了二次包装以适配更符合自己用户的使用习惯,这使得简单的全局字符串替换变成了不可能:: import Button as FancyButton from '@fancylib/button'; const MyEvenFancierButton = (props: FancyButtonProps) => ( const theme = { backgroundColor: "orangered", color: "white" }; <FancyButton {...props} theme={theme}>Click me</FancyButton> ); 除了这些问题之外,由于这是一个非常受欢迎的组件库,Button在很多(包括内部和外部的)产品中都有使用,你没有办法访问所有的用户代码,更没有办法让所有人都用手工的查找替换来做更新,你需要另寻出路。 你需要一个工具 – 一个可以读懂代码意图的工具 – 来帮助你做修改,而且整个过程最好可以自动化,比如通过执行一个脚本来完成。...

December 11, 2020 2 min

夜钓布莱顿与禅

夜钓布莱顿 如果你是一个严肃的钓者,你当然会知道,钓鱼并不想那些门外汉眼里那样仅仅是一项简单的运动。你更知道钓胜于鱼的道理。每次钓鱼,更像是一个项目:你需要事先(可能是数天之前)就开始计划,钓哪种鱼,用哪种钓法,采用的鱼饵,当天的天气,潮汐,气温/水温,大气压强,风力及风向等等,当然你也会将运气纳入考虑之中(虽然这是你无法控制的,这样至少当你两手空空离开钓场时心里舒坦一些)。 坐在水边,不论是鱼情如何,心中总是怀有一线若有若无,若即若离的希望。初学之时,轻微的鱼铃声都会惊动你的思绪,将你从葱姜蒜或者二荆条的迷思中拉回道黑暗且冷清的防波堤上。当你意识到那不过是小鱼在试饵时,又不得不开始怀疑它们是否已经将鱼饵偷走,从而不得不把线收回来再甩一次。你会不时的看看杆稍,细微的震动都令你兴奋 — 有时候甚至不是真的震动,而更多是你的幻觉 — 会不会有鱼在试探呢? 等到慢慢有了经验之后,鱼竿上细小的的震动再也提不起你的兴趣,你会视而不见,听而不闻,甚至当鱼上钩之后鱼竿开始大弯、震颤,你也会不慌不忙的走过去,然后将鱼杆抬起,杆稍朝上,在保持线是紧绷的前提下,缓缓收线,直到上鱼。 没有什么比将鱼提上岸时失去它更让人沮丧的事情了。不过这种事情时有发生,可能是线太细,也可能是钩子没有set好,也可能是其他故障,总之它会令你扼腕叹息,捶胸顿足。我有一次在land一条Port Jackson Shark的时候,被它拉断了鱼钩(注意不是鱼线,而是纯钢的鱼钩),不过好在这种鲨鱼并非食用鱼,我只是可惜没有拍张照片,并没有太难过。 而有一次印象深刻的则是丢了一条闪着若隐若现彩虹色彩的trevally,实实在在可以当鱼生的trevally。好容易将其拖进了岸边,结果由于钩子set的不是很牢固,被它挣脱了。这时候你心头有种欲说还休的惆怅,跌入谷底的失落,无以名状的悔恨,甚至歇斯底里的暴怒。 我在Williams Town的防波堤上钓鱼的时候,亲眼看到一个意大利中年男子在land一条40-50cm左右的Butter fish的时候,在提鱼上岸的一瞬间被它挣脱。那个瞬间他脑海里的那种快乐突然被人剥夺,恰如一根紧绷着的铉被人用利刃切断一般,他彻底疯了。站在风浪滔天的黑礁石上大声Fuck了大约有20遍后,他回头重新取出鱼线,开始制作线组,嘴里依然喃喃自语,Shit/Damn不休。 那时节,我有点担心他突然纵身一跃跳入狂风巨浪中一去不复返。不过当我收拾行囊准备撤离,经过他的时候,他明显的冷静了很多,低声自语:我当时应该松一手线的,但是我错误的大力提了一下。我似乎看到了他眼角依稀的泪光。 P.S. 发出来这篇纯属觉得《祭螃蟹》那篇太过孤单。

November 17, 2020 1 min