剧中人魔幻的2020

时间:2021-2-13 作者:剧中人

剧中人的2020

2020 年的魔幻,对于所有人来说是不言而喻的,每个人身在其中,感受着历史进程中一个个非比寻常的时刻。但一天天的往前走,又好像没有太大的不同。

2020 年小剧经历了不少和以往有很大不同的事情,普通又魔幻。

对于小剧来说,2020 年最大的关键词就是一个字【变】。

下面就从工作、摄影、旅行、生活四个方面,来聊聊小剧的 2020 年有哪些变化。

一、工作 - 加入新团队

2020 年,小剧加入了讯飞消费者 BG 商业产品部。

这是自 2017 年入职讯飞以来,最接近小剧理想化的团队。C 端的用户产品、完备的工种、上下游紧密的协作模式、高精细度的交互雕琢,这些特征都让我这个前端小工匠异常兴奋。

了解小剧的朋友可能知道,小剧最大爱好是对 UI 精细的刻画,对交互细节的探索以及尝试。商业产品部这样的工作氛围,很好的满足了小剧的这些小癖好。

1.1、讯飞文档

讯飞文档

加入商业产品部之后,全部精力投入在讯飞文档产品的开发上,可能你还不了解讯飞文档是一款什么样的产品,我来简单介绍一下。

讯飞文档是一款支持多人多端同时编辑的在线文档 App。

上面这句话是从某个文档上抄下来的,我来给大伙儿翻译翻译。

它是一款文档产品,多人协作和多端使用这两个特性同时支持,最神奇的是还可以相互协作,同时编辑同一篇文档不成问题。

这里的多端涵盖了传统意义上的 IOS、Android、Windows、Mac、Web,以及微信小程序。基本上可以覆盖多种场景下的高效使用。

之所以能实现这样的特性,除了 B/S、C/S 混合架构作为基础外,还有不少和编辑器、协作相关的技术点,以及 PC 混合开发的能力支持。

这些技术都是小剧之前未曾涉足过的,下面就简单聊一下讯飞文档中的这些关键点。

1.2、数据驱动的编辑器

相信提起富文本编辑器,各位脑海中肯定会浮现出一批类似于 Ueditor 的编辑器。这类编辑器开箱即用,以及良好的浏览器兼容让他们在国内市场占有很大比例,基于 Dom 的开发模式更受到众多开发者的喜爱。

然而在在线协作场景下,富文本编辑器需要更清晰的语义,更严谨的数据结构,更方便的差值捕获与重放,以及更高的一致性。

传统编辑器很难同时胜任以上几点,举两个最简单的例子。

一段文字同时具有加粗(b)、倾斜(i)、下划线(u),他们的嵌套关系如何 ?

b > i > u 还是 u > b > i,再或者是其它四种排列组合 ?

当用户在编辑器中插入了一个链接,如何精准的将这一行为捕获,并且低干扰的在其他参与协作的用户侧进行准确回放 ?

这些都是传统编辑器实现起来较为吃力的地方,我们就不展开聊编辑器的特性了,只说比较重要的一点。

数据驱动视图,是目前解决在线协作最好的方式。

1.3、基于 delta 的在线协作

讯飞文档之所以能够办到多人多端在线协作,前面提到的数据驱动的编辑器是核心基础。

在这个基础之上,用户操作的差值捕获与重放是实现在线协作的关键步骤。

我们将这里的差值称之为 delta。

因为我们使用的是基于数据驱动视图的编辑器,只要将编辑过程中每个人产生的 delta 捕获到,广播出去,并且在所有参与用户设备上进行重放,一个完整的协作流程即可完成。

当然这里要解决的问题还有很多,但是至此核心基础和关键步骤都已经准备完毕。

1.4、PC客户端与WEB通用的 Electron 混合开发

前端在混合开发上已经积累了很多经验,除了更多的移动端混合开发模式,在 PC 端也有趋于成熟的混合开发范式。

Electron 就是其中表现比较优秀的解决方案。

可能你已经在其他地方接触过 Electron,甚至在项目中已经有所涉及,但我猜测你大概率没有接触过 PC 客户端与 WEB 兼容的开发模式。

为了达成这一点,我们做了明晰的客户端与 WEB 的模块划分,开发了客户端与 WEB 通用的多标签路由管理工具,并且在交互高度统一的前提下提供了端侧交互差异化的能力。

有了这些,我们的开发效率得到了大幅的提升,在较少的人员投入前提下取得了比较不错的版本交付能力。

二、摄影 - 尝试二次创作的乐趣

几乎每年的年终回顾,摄影都是必提的话题。可能摄影已经内化成个人潜意识里的一个消磨时光的方式,也可能因为外在的摄影这张标签,在催促我隔三差五拍些什么。

2020 年小剧没有计划性的进行一些拍摄,相较于往年,今年的照片产出较少。

熟悉小剧的朋友应该知道,全景摄影是小剧比较喜欢的摄影门类。然而全景因为画幅包罗万象很难突出重点,给人视觉震撼之余并不能在细节上有更多主观表达。

万幸的是保留原片是小剧后期的一个小习惯。基于这个习惯,小剧在 2020 年翻出不少往年的全景作品,做了几幅基于全景的二次创作的后期图片,也算是有所产出。

2.2、禹洲长卷

这张照片原始作品拍摄于 2019 年,是 大湖名城看合肥 - 俯瞰合肥 作品的俯视图局部截图。在 剧中人的2019年 文章中曾提到过这幅作品。

疫情初期闲来无事,找到这幅全景作品的原始图片进行二次加工得来。

因为小区南北跨度较大,正常视角很难很好的体现这一特征。无人机虽然能上升高度,但是在合法的限飞高度下,镜头焦距的限制也很难完整拍下全貌。

好在借助于多张拍摄的原图加上球面模型的后期拼接,最终通过折中的方案呈现出这幅作品。

禹洲长卷

2.3、云上霸都

这幅作品来自于 2020 年 3 月拍摄的 云上霸都 全景作品的一部分。

这是小剧第一次拍摄平流雾,起初也没有抱太大期望。当无人机上升到 40 米高度的时候,灰茫茫视野变得豁然开朗,继续上升到 80 米,开始呈现出一片云海翻涌的画面。

因为距离电视台主楼较近,信号干扰异常强烈,几乎全程是带着兴奋 + 心惊肉跳完成的拍摄。

作品最终表现出的效果让我耳目一新,也算是个人摄影新主题的第一次尝试。

云上霸都

2.4、数据中心几何视角

这幅这照片原摄于 2019 年初,为 2018 - 2019 年度讯飞年会的预热活动所拍。

原主题为讯飞锦鲤全景寻宝游戏,是一个由多位漂亮小姐姐作为模特拍摄、制作完成的全景互动小游戏。

拍摄地为讯飞数据中心大厅,这次的作品截取了仰视天窗的一部分。

整个造型几何感非常强,线条干净锐利,很适合做背景使用。

数据中心几何视角

2.5、淮河汛期

照片拍摄于 2020 年中,江淮流域大面积洪水爆发的时候。作为淮河边上的乡村,我的家乡也没有幸免于难。

回到老家时被眼前的场景惊呆了,飞起无人机拍摄了 俯瞰临淮岗 - 汪洋泽国 全景作品。

因为画面过于震撼,为了在乡村群体中快速流传,截取了下图。

可能是 2020 年社会底色过于浓郁,很多人已经忘记了 2020 年还发生过 50 年一遇的大洪水。

淮河汛期

2.6、流传度较广的一张照片

在去年的 年终总结,小剧曾介绍过两张以讯飞为主题的照片。

经过一整年的传播,这两幅作品几乎已经渗透到了公司的各个角落,在部门的宣传册、产品介绍、外宣 PPT、公众号等等场景都能看见它的身影。

照片被越来越多的人看到、记住、使用,算是对我这个伪摄影师最好的安慰了吧。

下图是讯飞门禁机器所使用的轮播背景。

讯飞打卡机

三、旅行 - 寻找三百公里内的短途旅行

2020 年是近几年旅游业最萧条的一年。为了支持疫情防控,也为了节省自己的腰包,今年没有太过追寻诗和远方。

节假日的消遣也只是在合肥周边三百公里内转悠,不过这也是一个很好的契机,让我们有机会发现周边被忽略的景色。

相比于长途旅行,就近旅行在时间上更为灵活。因为时间周期短,在不耽误工作的前提下可以有更多的选择和更丰富的安排。

【图】宣城中学

宣城中学

【图】扬子鳄

扬子鳄

【图】寿春城

寿春城

【图】太平湖

太平湖

【图】三河古镇

三河古镇

【图】宁国水杉

宁国水杉

四、生活 - 于无声处听惊雷

2020 年我们见过太多的恐慌、无助、混乱、纷争。很庆幸我所在的国家以及我所在的城市,在整个波涛汹涌的 2020 年里一直稳稳当当。

作为时代的一粒尘埃下的小人物,很感谢外部环境给我们提供的保障,让我们可以在一个很高的下限里去生活,有机会去争取更难能可贵的上限。

相较于时代的浪涌,小剧的生活显得只是一汪微波粼粼的清池。

4.1、一个勇敢的决定

私下里有联系的小伙伴可能知道,2020 年小剧经历了一些比较不一样的事情,也做过一个比较勇敢的决定。

有点困难,但就像这次疫情一样,几乎没人做了准备,但是我们都学会了去面对。

4.2、小剧客栈

玩博客是小剧在摄影之外的另一个小乐趣。

然而在 2020 年,小剧客栈几乎是处于半荒废的状态,博客自身的版本只有一次更新,博文也只写了三篇。

小剧客栈作为小剧在互联网上的一个投影,很自然的也会受个人生活、工作重心的影响。

4.2.1、Vue 版本博客上线

把玩过小剧客栈的小伙伴应该知道,小剧针对低端浏览器和搜索引擎开发了一套弱交互的基础视图,针对高版本浏览器开发了单页视图,并且二者兼容。

然而高版本的实现方式较为原始,从路由管理到页面里的各个组件都是小剧手工撸出来的。虽然很酷,但是新功能累加时效率相当低。

为了保持酷酷的个性,同时提高新功能的开发效率, 开发了 Vue 版本的博客。

如果你感兴趣,可以翻到页面最下方,切换到 Vue 版本、SSR 版本、原生 JS 版本,体验其中的差异。

4.2.2、《VUE 中如何转移 DOM》

查看原文

这篇文章写于 2020 年 3 月底,当时正在如火如荼的开发 讯飞文档 基础框架。

因为涉及到很多基础能力准备以及 UI 组件开发,需要写很多非主业务逻辑代码。其中最让我印象深刻的就是 Vue 中转移 Dom 的小技巧。

经过参考优秀框架的实现方式,结合自己探索出的另一种思路,整理出这么一篇文章,也算是记录一次深入开发 UI 组件的体验吧。

4.2.3、《居家隔离期间我在做什么》

查看原文

这篇文章写于 2020 年 3 月,公司正在有序组织分批复工时。以全国确诊病例为主线记录了居家隔离期间小剧做的一些事情。

现在回顾当时的所见所闻,不过只是暴风雨的前奏。好在趁这段时间做了很多计划已久的事情,没有浪费这么一个超长的假期。

4.2.4、《vue-stick 瀑布流的发展史》

查看原文

无论博客经历过多少次的改版,瀑布流一直以不同的实现方式,在博客的不同角落生根、发芽。直到成长为小剧客栈交互上的一大特色。

这篇文章原计划是单独介绍 vue-stick 的实现原理,但是干瘪的介绍代码一直不是小剧所喜欢的形式。 在回顾博客一次次次更新、改版过程的时候,小剧发现瀑布流其实一直都在,因此才把主题改为《vue-stick 瀑布流的发展史》

文章里将个人开发瀑布流分为了三个阶段,从发展的角度介绍小剧在开发瀑布流时的演进过程。

顺带还介绍了实现逻辑、关键部分代码结构,比前期设想的主题要丰满很多。

4.3、城市发现小分队

城市发现公众号

2020 年,小剧因为机缘巧合结识了城市发现计划小分队。

他们是一群对合肥这座古城有着深厚感情的年轻人,经常游走在合肥的大街小巷之内,用充满人间烟火的视角观察着这座城市的发展。

小剧曾经在 2019 年,有计划地拍摄过 合肥城中村 全景作品,主要记录合肥二环内现存的以及即将拆迁的城中村。这份作品和城市发现团队探索的主题有着奇妙的重合点。

非常有幸在 2020 年 5 月和城市发现小分队有过一次探讨,作为受访者聊聊这份作品的拍摄契机、过程经历以及所思所想。

感兴趣的话可以移步城市发现的公众号文章: 整整1年,这位90后只拍合肥城中村

如果你也对合肥的街头巷尾的故事感兴趣,也欢迎你持续关注他们,让城市发现小分队,替你去发现这座城市的秘密。

640

五、一句话概括小剧的2020年

冰雪奇缘 2 里有一个贯穿全片的主题:“Do the next right things”

当你不知道未来会发生什么,看不清未来会走向何处时,做好眼前的下一件事就是最重要的。

2020 年对于小剧来说也是如此,很多变化都是毫无预兆的,但好在小剧整个 2020 年一直在努力做好下一件事情。



最后!

向 2020 年力挽狂澜之后,国内外局势日渐紧张的情况下依然沉着冷静的祖国说声感谢!

向 2020 年所有给小剧提供过帮助的小伙伴说声感谢!

2020 年第一场雪 陪在小剧身边的人说声感谢!