林垚的头像

林垚

  • 网站管理员
  • 前端工程师

从 2009 年起接触前端技术至今,这些年的经历让我觉得自己天生就适合创作类的工作。我热爱技术,尤其是 web 技术。写代码让我神清气爽,使我感到自己能够改变世界!时不时的就想动手写点什么,哪怕是重复造轮子!

前端开发

了解并掌握 HTML 标签的语义,可以写出结构很好的语义化页面,即使「裸奔」也不怕认不出来是什么!并且能够在编写非 web app 的页面时尽可能地添加一些有利于 SEO 的属性或标签,提高网页收录率。能够使用纯 CSS 高完成度地还原设计图,秉承「不用 JavaScript 去解决布局问题」的原则编写高弹性页面,适当采用「渐进增强」或「优雅降级」策略兼容各浏览器。

理解「响应式 web 设计」与「移动优先」,具备「面向设计的半封装 web 组件开发」和「面向 HTML 的 UI 组件开发」的 UI 组件设计思想。熟练使用 jQuery 进行富互联网应用(RIA)和 UI 组件的封装开发。拥有丰富的桌面端和移动端开发经验,能够解决绝大多数问题。

具备优良的编码习惯:代码编写规范,有一致的命名模式;注重代码的复用性、可读性、优雅性。擅长用 Sass + Compass 及 CoffeeScript 编写源码。

熟悉 Ruby on Rails、Webx、Spring 等 web 框架中的视图目录结构和处理逻辑。对前端工程优化有一定自己的见解。能够运用 Grunt、Gulp 和 FIS 等构建工具完成前端工程的各个环节,并具备基于 Node.js 的命令行工具开发能力,目前已自主开发了如下工具:

  • 用于上传本地静态资源到 CDN 的 RocketZ
  • 处理前端团队在开发中常见事务的 Bumblebee

后端开发

拥有 WordPress 建站经验,能够利用 PHP 编写相对简单的业务处理逻辑。

代码版本控制

熟练使用命令行进行日常操作,能够运用 Git Flow 合理管理分支。

杭州一骑轻尘信息技术有限公司

前端工程师一职

带头与前端团队的 leader 及其他成员制定了编码规范和前端工程文件结构,确定了所要使用的技术、基础库和构建工具,并独立开发出结合上述构建工具将本地静态资源文件上传到 CDN 的插件。

推动开发部门 Git 使用的规范化:采用 Git Flow 进行分支管理;Git 操作的基本原则和注意事项等。

制定「前端工程师职业等级模型」并被采用。

参与了以下项目的开发:

卖好车

面向企业用户的买卖车平台

寻好车

以最低价买好车的寻车比价工具

买好车

面向个人用户的买卖车平台

杭州刺暮软件科技有限公司

前端工程师一职

负责在线教育产品「有渔」的前端部分的架构、开发、维护、优化和规范制定等。

由于业务需求增加,页面变多,资源文件变得越来越大,导致页面加载速度下降,加速页面呈现成为刻不容缓的事情。于是,决定通过 Turbolinks(产品是基于 Ruby on Rails 开发)将网站变成单页面应用来减少资源文件的请求。为了与原有程序兼容,改造的过程中遇到了一些因加载运行机制改变所引起的较为棘手的问题: UI 初始化异常、事件绑定及触发异常等。经过几天调查研究,最后通过修改 Node.prototype 的方法解决了 <script> 加载依赖问题;通过在脚本中记录页面初始化函数所对应的页面标识及顺序,解决了初始化异常和事件异常的问题。改造后的页面呈现速度提升了近 30%。

随着业务逻辑变得复杂,代码量的增多,产生重复代码的机率大大增高。这时,抽象提取出公用代码成了首要任务。因此我向上级申请了一段时间用来完善前端的基础建设。将常用的业务、工具函数方法和 UI 组件封装起来,并按照代码的功能特性模块化放在不同的目录、文件中。整理后的代码调用更为方便,文件引用更为灵活,大量减少了冗余代码。

为了提高协作效率,降低沟通成本,与交互设计师和 UI 设计师合作整理制定出一份交流用的 UI 文档,使用 Jekyll 在 GitHub 上搭建了在线浏览的页面。这个文档的作用主要有两个:

  1. 像 Google 的 Material Design 那样是一套设计规范,设计师在设计新页面及做标注时要参考;
  2. 像 API 文档那样,告诉开发人员如何去使用。

参与了以下项目的开发:

有渔

「有渔」是以国际化视野打造的翻转式学校,提供英语、创意计算、机器人等国际先进课程的翻转课堂教学服务,以及「翻转课堂」、「黑板报」等云端软件服务。

作为最新一代网络教学系统,「有渔・翻转课堂」融合了 MOOC(大规模在线公开课平台)、SNS(社交网络)、游戏化教学、数据化分析、百科等先进教育理念,通过 SaaS(软件服务)模式构建,旨在打造中国「翻转课堂」第一平台,为学校、企业、名师、个人等提供人性化、信息化和定制化的教学云服务。「有渔・翻转课堂」始终本着「让教者乐其教,让学者乐其学」的服务宗旨,从教、学、监三个方面综合设计,着意教学管理与学习交流相结合,立足三大角色,开创五大功能,兼摄四大优势,主张开放思维、自主教学、互促互进,最终实现和衷共济、教学相长的数字化创新教育。

杭州安恒信息技术有限公司

前端工程师一职

主要负责信息安全产品的前端部分的架构和开发。2011 年年末,为了防范快速发展的互联网所带来的新的安全威胁,公司决定开发新的产品——明鉴®网站安全监测平台。由于这个项目是从零开始,并且缺少交互设计师,产品的原型设计就落到了我的肩上,让我体验了一次开发之外的角色,使我对生产流程中各个环节有了更深的了解。

该平台有一个功能是查看监控数据的报表,需要在监控的结果列表中点击想要查看的数据(一个超链接),这时会打开一个新窗口显示报表。显示报表需要传递很多查询参数,通常做法是将相关信息通过 URL 传递到新页面中,这种方式有以下几个缺点:

  • URL 过长,看起来很不美观;
  • 需要对 queryString 进行解析与判断来判别是什么类型的报表;
  • 报表类型判断的代码量随着类型的个数成正比例增长,不仅维护成本高,还会影响性能;
  • 安全性欠佳,找到 queryString 的规律的话,有可能通过手输的 URL 获得想要看的数据。

鉴于以上几点,有点「洁癖」的我根据父子窗口的特性想到了一个隐式传递查询参数的方式完美地解决了上述问题。

在职期间曾被评为「优秀新人员工」,所在团队获得项目奖。

参与了以下项目的开发:

明鉴®网站安全监测平台

一套软、硬件一体化监测平台,是明鉴® WEB 应用弱点扫描器平台版的升级版本。采用远程监测技术对 Web 应用提供 7×24 小时实时安全监测服务。具有 Web 漏洞、网页木马、网页篡改、网站可用性及网页关键字等监测模块。用户通过 Web 页面进行新建、修改任务等操作,将数据传到服务器端之后,再将指令下发到底层引擎,从而进行对指定网站的周期性检测。

明鉴®WEB应用弱点扫描器平台版

提供了 Web 漏洞、网页木马及网页篡改等弱点扫描模块,使用户能够全方位地实时检测网站的安全情况。扫描结果中会展示出弱点名称、等级、分类等信息,还有详细的修复建议帮助用户避免再次出现相同漏洞。网站地址可以选择所属行业及分类等,用户可以更加快速地管理及查找网站地址。

RocketZ

既是一个 Node.js 脚本又是一个命令行工具,帮您将静态资源从「地面」(本地)发射到「云端」(CDN)!

Bumblebee

Bumblebee,简称「b3」,就是那个大家都很熟悉的《变形金刚》里的卖萌好手!本工具会为前端工程提供极大方便!

Tangram

「七巧板」是一种智力游戏。该项目所提供的就是像七巧板中的板块那样的单元,我称之为「模块」。每个「模块」都有它自己的一些特性,需要使用者了解并发挥自己的想象力将它们组装起来拼接成各种各样的页面。

H5Fx

这是一个基于 HTML5 Forms 规范的表单验证插件,即输入字段的值受标准的 HTML5 属性制约。

欧雷流

我的个人网站,没事来聊聊技术、谈谈思想、说说生活,是了解我的最佳方式!;-D