工作 6 年的成长和思考

引言

前段时间收到了公司的一封邮件,告诉我入职四周年快乐。突然发现自己已经「很老了」,回头一看已经大学毕业快 6 年,算上之前大三就开始实习的经历也就是差不多工作 7 年的时间。想起早在 2018 年的时候我在 Google Calendar 上标记了一个 2021.1.1 提醒的未来日程,列出了一些未来三年应该达成的事项并到期发生邮件提醒。在 2021 年那个时间节点上看了下过去,整体感觉自己做得还不错。但最近这几年似乎缺少了对未来的思考和规划,这也是为什么要写这篇文章的原因,回顾一下这 6 年谈下自己的一些思考,基于当下这个时间节点下的认知,期望自己未来变成一个怎样的人。

aPaaS 系列 - 如何理解 aPaaS/无代码/低代码

引言

最近几年 aPaaS 这个概念逐渐火了起来,但是很多人对这块的了解还是比较模糊。大家会容易联想到 PaaS、SaaS、IaaS 等概念,以及通常我们在谈论 aPaaS 这个领域的时候也会谈到低代码(Low-Code)和无代码(No-Code)。那么如何去理解这些不同概念、具体有哪些代表性的产品、目前行业的发展状况如何、涉及相关的技术是本系列探讨的话题。

正好博主也是低代码这个方向的从业人员,未来会逐步输出一些列 aPaaS 相关的文章包括不限于对这个行业发展、产品迭代、技术演进的关注、理解和思考。

LayoutUnit & Subpixel Layout

引言

为了更好的支持移动端和 PC 端的缩放,WebKit 增加了subpixel layout(次像素/亚像素布局)为此他们还改变了 rendering tree。一个次像素单元在 WebKit 内被称为 LayoutUnit 用于取代之前使用整数来布局一个元素在页面中位置和大小。从 2013 年开始 WebKit 就已经开启了这个 flag。

LayoutUnit

LayoutUnit 是逻辑像素的一种抽象表示,在 WebKit 的实现中它是一个像素的 1/64,这样我们就可以使用整数来进行布局计算,避免了使用浮点数计算而丢失精度的问题。

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决。

什么是滚动穿透

移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见的场景就是整个页面上有一个遮罩层,上面画着各种各样的东西,具体是什么就不讨论。实现这样一个遮罩层可难不住即使是一个刚开始写前端的小白。但是这里有一个问题就是如果不对遮罩层做任何处理,当用户在上面滑动时会发现遮罩层下方的页面居然也在滚动,这就很 interesting 了。就如下面的例子,一个名为mask长宽都是屏幕大小的遮罩层,我们在上面滑动时,下面的内容也在跟随滚动,即滚动“穿透”到了下方,这就是滚动穿透(scroll-chaining)。

VSCode 帮助贫困的乌干达儿童

最近把开发环境从 WebStorm 迁移到了世界上最好的编辑器 VSCode,因为需要经常开启多个项目,CPU 和内存都爆了只能弃坑。使用过一段时间 vsc 发现里面自带插件库有个叫做 vscodevim 的插件特别有意思。它使用了一些诡异的键位和模式,和普通编辑体验差别很大,但是一看评价这么高,下载量这么大,我一度怀疑自己。看来大家都很认可这个插件,坚持使用了一段时间,发现这些诡异的键位用起来是真的特别爽,颠覆了我对文本编辑体验的认知。接下来我要开始安利了!

你在用那种键盘写BUG?

键盘作为程序员写各种 BUG 的作案工具,你对自己在用什么样的键盘有所了解吗?最近身边的同事在换键盘的比较多,但是貌似不是所有程序员都对键盘有所了解,甚至基本不了解。本文对各种常见类型的键盘做一个简单的介绍包括但不仅限于主要构成、工作原理、手感。

按照内部结构的不同,键盘大致可以分为薄膜键盘机械键盘静电容键盘,本文也主要介绍这三种类型键盘。由于价格和使用人群的不同,这三种键盘也有一个鄙视链顺序。静电容 => 机械 => 薄膜,然后用薄膜键盘的无限嘲讽用其他键盘的,用这么好的键盘有什么用,还不是拿来写 bug 的?

字体渲染—¥还是Ұ?

总所周知,”羊角符号¥“被用于来表示人民币,但是这个羊角符号 Y 中间应该是两道水平线还是一道水平线呢?这是一个比较常见的问题,在前端开发中,往往设计师给出的设计稿是两道水平线但是在某些设备上却被显示成中间只有一道水平线的符号。

货币符号

是以下两种货币的符号:

  • 日元(JPY)
  • 人民币(CNY)

它们的货币单位都是圆,符号由拉丁字母Y两道平行水平线组成。在中国大陆早期多使用一道水平线,现在则多使用两道水平线。使用拉丁字母Y的原因是的中文和日语在英文中的拼写分别是yuanyen,它们的首字母都是Y

JavaScript 劫持 JSONP 请求

在某些 XSS 场景中我们需要劫持页面中的一些请求,前端页面中主要使用 XHR 来上报/获取数据。但是在一些对兼容性要求很高的 PC 端页面,网络请求可能是通过 JSONP 的方式发送的,如果是 XHR 请求就很简单,直接第三方页面上的 XHR 对象就可以拿到请求或响应的数据,如果是 JSONP,就不能直接拦截了,但是可以通过一些巧妙的方式来实现。

拦截 JSONP 首先我们得知道他是如何工作的,简而言之就是直接在 head 标签动态插入一个 script 标签,然后在 url 上带上需要执行的回调函数名称,script 标签发起一个不受同源策略限制的 GET 请求,服务端将返回的数据塞给回调函数作为参数,然后页面上直接就执行对应的回调函数。所以要劫持 JSONP 请求我们需要做到:

  • 捕获请求发送的时机以及获得请求的参数;
  • 重写页面上已经定义的回调函数,步获传入的参数;
  • 重新执行页面上正确的回调函数,保证之前的逻辑正常。
比特币数据结构科普

地址

私钥由 32 字节随机数组成,通过私钥可以计算出公钥,公钥通过一系列 hash 和编码(Base58,避免书写混淆如 I 和 L)可以得到比特币地址,可以简单的将地址理解为公钥的摘要。

# 比特币使用了椭圆曲线签名算法
私钥 => 公钥 => 比特币地址
过去的 2017

现在已经是 2018 年的 3 月份了,按照以往的惯例,每年到年终的时候都会更新一下博客,总结一下过去一年的学习与生活,由于去年比较懒,这篇文章迟迟没有写,一直推到了现在。过去的一年经历了太多的事情,从学生到职场人的角色转变,从重庆到北京。一路走来,很艰辛也很快乐。

2017 的上半年大部分时间都在小米实习,直到五一节后回到学校,重修之前大三挂掉的专业课,同时忙着做毕业设计,写水论文,然后就是和同学们开黑玩游戏、踢球。这段时间的日子可以说是非常的充实了。后面放弃参加毕业典礼来了一场说走就走的毕业旅行,从此告别了雾都到霾都正式入职。可能是之前在公司实习了太久(2016.6-2017.5)的原因,回到公司后感觉和之前的状态没有太多改变。同时身边的朋友有些已经离开了公司,有的创业有的回到了自己的城市。突然想到在豆瓣上看到的文章,问一个刚毕业的人为什么要选择来北京,她的回答是:我来北京的目的是为了离开北京。