工作 6 年的成长和思考

工作 6 年的成长和思考

引言

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

阅读更多
aPaaS 系列 - 如何理解 aPaaS/无代码/低代码

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

引言

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

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

aPaaS 是什么

aPaaS = application Platform as a Service = 应用平台即服务。很多关于 aPaaS 介绍的文章都会直接给出这个解释,其实很多人通过这个定义还是无法直接清楚 aPaaS 具体干了个什么事。我对它的一句话理解就是:一个可以搭建应用的云服务平台,或者简而言之就是个云服务。也就是说它的产物是一个应用,aPaaS 本身是一个云服务而且是一个平台可以支持搭建很多不同的应用。

说到这里其实还是比较抽象,下面我们结合图来理解 aPaaS 在不同云服务之间的位置,以下是我在网上看到的最适合&清晰介绍 aPaaS 的图。

阅读更多
LayoutUnit & Subpixel Layout

LayoutUnit & Subpixel Layout

引言

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

LayoutUnit

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

虽然我们现在在布局计算时使用了 LayoutUnit,但是在最终将计算值渲染对应到设备上时仍然会出现计算值不能与物理像素对齐的情况。因为计算出的值可能是一个小数而 1 个物理像素已经不能再进行切割。所以出现了这样一个问题,次像素如何与物理像素进行对齐?

回到我们实际的编程过程中,我们会有很多场景遇到次像素的问题,只是很多人不会关注,或者会忽略掉这些细节。比如如果一个 box 的宽度是 10px,我们把它平均分成 3 份,那么里面的三个盒子的宽度分别是多少呢,3.3333px?再比如我们在使用 rem 布局的时候有时候会发现一个正方形设置了 border-raduis 预期让它展示成一个圆形,在一些设备上却并不那么圆,在整体比较小的时候可能会被渲染成一个椭圆形。以及这种时候这个元素还设置了一个 background-size 覆盖整个容器但是背景却被切掉了一小块。这些问题不是那么容易被发现,但是确实是存在的。

阅读更多
解析移动端滚动穿透

解析移动端滚动穿透

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

什么是滚动穿透

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

scroll-chaining

上方 demo 的遮罩层底部是一个逐渐变蓝的内容容器,但是滑动上面遮罩层时,底部也跟随滚动了,这只是一个最简单的场景,后面我们会讨论更复杂的情况。

阅读更多
VSCode 帮助贫困的乌干达儿童

VSCode 帮助贫困的乌干达儿童

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

模式

要学会使用 vim 首先要弄清楚它和其他编辑器最大的区别之一就是它拥有多个模式,而其他大部分编辑器就只有编辑模式,直接就能插入修改删除,作为一篇安利入门性质文章,我们需要知道 vim 中最重要的四种模式。

  • normal:可以简单的理解为浏览模式,默认就是 normal,在这种状态下你可以移动光标,跳转翻页,也可以做一些其他如删除等操作,在插入模式下按 esc 回到 normal 模式。
  • insert<i>:就是常用编辑器的编辑态,符合我们常规的使用方式,在 normal 下按 i 键进入插入模式。
  • command<:>: 在 normal 模式下按冒号进入命令模式,比如 :wq 退出 vim。
  • visual:和 normal 类似但是命令会高亮选中区域,类似普通编辑器选中了一段文本。

vim 不止这四种模式,但是这几种是比较常用到的,更多模式可以看 vim 文档。

阅读更多
awk 入坑指北

awk 入坑指北

awk(/ɔːk/) 是 *nix 下一种强大的文本处理工具,其名称取自三位作者 Alfred Aho,Peter Jay Weinberger,Brian Wilson Kernighan。awk 提供的功能包括不仅限于正则匹配、流控制、算术运算、甚至于函数等编程语言具备的一些特性。它发行于 1977 年,已经超过了 40 岁堪称古董级软件。为了更让人能直接明白它的用途,我把它称为是命令行下的 Excel,其中的一些概念和 Excel 有很多相似之处。

TR;DR

  • awk 是一种高效的文本处理工具。
  • awk 脚本的基本结构 BEGIN -> BODY -> END。
  • 基本语法,awk 脚本语法和 C 语言很很多相似之处。
  • awk 脚本编程实践以及需要注意的地方。

基本用法

在 linux 环境下我们有一些文本处理需求时,awk 就能派上用场了,比如 nginx 的访问日志,文本信息去重等等。awk 可以直接在命令行中执行比如:

1
echo "" | awk '{print "hello world!"}'

也可以将一些逻辑比较复杂的代码写到一个 awk 脚本中,然后指定脚本文件执行:

1
awk -f a.awk test.txt
阅读更多

关于自由软件与开源协议

在 GitHub 上浏览一些开源软件时,我们经常会看到 README.md 文件下会有一个关于 License 的声明,或者有一个单独的 LICENSE 文件来说明该软件或者类库是基于什么协议开源的,你能拿他做什么不能做什么。或许是因为习惯了在 Google 或者 Stackoverflow 上找到一份代码就开始使用的缘故,很多人不会留意这些软件是基于什么开源协议开源的。比如广泛使用的 jQuery,大家都在用,也没有任何人说直接复制了或者更改了 jQuery 源码产生衍生软件会有什么问题。但是在开发商业软件的过程中如果需要用到开源软件,它使用的何种开源协议对你的软件有直接或者致命的影响。

1 自由软件

在开始谈开源协议之前我们应该需要了解一些自由软件以及著作权相关的知识。

自由软件运动

自由软件运动(free software movement 或 free/open source software movement,简称 FSM 或 FOSSM)是一个推广用户有使用、复制、研究、修改和分发软件等权利的社会运动。接近和相关的运动包括开放源代码运动及自由软件的开放源代码运动。这运动跟 1970 年代的黑客文化有渊源,而理查德·斯托曼是该运动的主要发起人以及精神领袖。 自由软件运动人士认为自由软件的精神应当贯彻到所有软件,他们认为禁止计算机用户行使这种自由是不道德的行为。理察·马修·斯托曼认为贩卖不附带源代码的二进制软件是不道德的,因为这样阻止了软件用户学习以及帮助其他人的权利。

阅读更多
CPU 挖矿-利用 VPS 挖莱特币

CPU 挖矿-利用 VPS 挖莱特币

前段时间疯狂的WannaCry蠕虫病毒再一次将比特币带入大众视野,导致最近挖矿的人越来越多,AMD 显卡甚至都脱销还出现了专门的矿机。之前也还没有写过关于区块链技术的博客,后面打算有时间写两篇文章来介绍一下我对区块链技术的认识以及与比特币相关的一些东西。本文主要介绍了挖矿的概念,以及如何利用普通服务器的 CPU 来实现莱特币挖矿。

什么是挖矿

这里的挖矿不是挖煤,最早的 P2P 货币挖矿当然是出现在比特币中,如果还不知道什么是比特币的可以先看看这里。比特币包括其他山寨币的产生主要就是通过挖矿,对比特币有基础了解的都应该知道比特币的数量是有限的。其固定的总和不会超过 2100 万个,其实最开始在比特币网络中的比特币只有少数的,就是通过不断的挖矿来产生这些币,也就是说挖矿说得更加 official 的一种称法是“比特币的一次发行”。

在比特币网络中的每一次交易都需要被记录下来,那么谁来记录这些交易,将这些交易信息打包成一个区块放入比特币网络中那么他就会获得比特币奖励。这个过程中做这件事情的机器(可能是服务器、PC、矿机)就被称为矿工,那么矿工做这件事情的过程就被称为挖矿,每一次成功挖矿的背后就对应了一次比特币的发行,即对应了对矿工做这件事情的奖励。那么新的问题是,打包交易信息生成区块这种事情很简单,任何电脑都可以做,那么对于这么多的矿工,应该把这件事情交给谁来做?

阅读更多

Redux 中间件与异步 Action

在之前的浅谈 Flux 架构及 Redux 实践一文中我们初步的谈及了 Redux 的数据流思想,并做了一个简单的加减器。但是还没有接触到 Redux 更多常用的场景,异步操作、API 调用,如何连接到 UI 层等,Redux 可以与很多框架搭配包括 Vue、React 甚至是纯 JavaScript。后面我们会用一个实例–通过 github API 获取个人信息,来将 Redux middleware、async action、连接到 React 贯穿其中。先看看我们最后写的 demo 的样子。

/images/redux-demo.png

阅读更多

浅谈Flux架构及Redux实践

Flux 概述

Flux 是 Facebook 用来构建用户端的 Web 应用程序的体系架构,与其它形式化的框架相比,它更像是一个架构思想,用于管理和控制应用中数据的流向。这里应用中的数据指包括但不限于来自服务端的数据页面中 view 的一些状态(如一个面板是展开还是关闭),临时存储在本地需要持久化到服务端的数据等。

好了,说了这么多好像还是一脸懵逼,不慌,接下来看看展开式。

阅读更多