打造离线使用的Mobile Web App

HTML5

最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家。正好前段时间翻译了一本书《HTML5 Mobile Development Cookbook》,中文译本在此。其中讲到了不少移动端Web开发的Best Practices,正好就用到了10K Hours这个应用上。其中我觉得非常有用但是又让人头痛的一个功能就是AppCache:它可以让用户在访问一次网页以后,下次再来时不能访问网络的情况下,...

如何构建自动化的前端开发流程

如今的前端开发中,已经不再只是一些简单的静态文件了,对于很多Web App来说,前端代码甚至比后端代码要更加复杂,更加难于管理,例如:

  • 我们有许多的第三方库的依赖需要管理;
  • 我们有独立的前端测试需要自动运行;
  • 我们还有很多代码需要在发布时进行打包压缩;
  • ⋯⋯

所以构建一个自动化的前端开发流程是非常必要的,但现在前端开发流程的构建是百花齐放,没有一个统一的标准,还有很多依赖于后端的架构来做前端开发管理。例如在Rails开发中,就有各种前端库的gem包。但是这种依赖于后端框架的管理方式有许多问题:

  • 许多gem包的维护者并不是前端库的维护者,所以更新不一定即时;
  • 不利于前端代码与后端代码做分离;
  • 增加了前端开发者的学习和使用成本;
  • ⋯⋯

于是现在出现了一些不依赖于后端代码(虽然还是要依赖Node.js⋯⋯)的管理工具,对于前端开发者非常友好,例如:YEMANJamvolocomponentBrunch⋯⋯但是这些工具都或多或少有自己的一些问题,所以我决定用一些更轻量的工具(bowergrunt)来搭建自己的前端开发流程。本文的例子来自本人正在开发的一个项目,可以在github上查看所有的代码

使用CSS3制作一个有趣的搜索框

CSS3

动画效果在交互设计中占据着一个非常重要的位置,因为当我们在设计一个产品的时候,我们不仅仅是在设计它的外观,更是在设计它的行为。举例来说,一个好的演员可以利用他的动作、肢体语言使观众感受到角色的内心与特点,甚至将观众带入到相同的内心中,感同身受。同理,一系列好的动画设计,可以让使用者更容易了解产品的用法,感受到产品的特点,从而提升用户体验,甚至是让用户发出“Awesome! I love it!”的感叹。(关于动画到底是如何提升用户体验的,请看Alfredo Aponte的PPT:UX: Enhancing Experiences with Animation。)

如今CSS3的日趋成熟,使我们制作网页中动画效果的方式更加的方便和多样,下面让我们来看看使用CSS3如何制作一个有趣的搜索框,所使用到的属性包括tansformanimationkeyframes。最终效果情况本站右上角。

数独生成浅尝

Sudoku

数独是一种非常有意思的游戏,也是我很喜欢的一种游戏,当闲来无事的时候,常常会打开手机里的数独游戏来打发时间。当我们在享受数独游戏的时候,有没有想过每一局游戏是如何生成的呢?看似简单,其实很复杂。有不少相关的算法,还有一个困惑了数学家多年的谜题(2011年12月被解开)。下面就让我们一起来看看数独的生成。

利用Backbone.js重构项目代码

进入现在这个项目已经一年多了,这是我呆过时间最长的一个项目,见证了项目的前端从简单的一些效果到有了复杂的逻辑,最后需要借助JavaScript的MVC框架来重构前端代码,以避免前端代码爆炸失控。具体来说我们的前端代码在增长过程中遇到了以下问题:

  • 多个页面组件根据同一数据来源做更新显示时,会有不少逻辑上重复的代码,或者过多的回调嵌套;
  • 由于缺乏一个消息传递机制,导致全局变量很多;
  • 组件之间耦合太深,单个组件很难被重用;
  • 数据被写在DOM元素的属性中,当显示需求改变时很难只修改DOM而不破坏功能;
  • 测试代码中需要准备大量的html fixture,每个测试都是很大的集成测试,难以重构、相当耗时。

当你遇到其中一个或几个问题时,请开始考虑用Backbone.js来重构吧,越是问题严重的时候重构的风险越大,花费的时间和精力也越多,最后可能是遗留一大堆垃圾代码而草草了结项目。

Sass & Compass Best Practices 3

——图片处理

前一篇文章中我们介绍了如何利用Sass来简化我们的代码,使我们的代码可复用且易维护。本文讲介绍如何使用Compass来管理我们用于样式的图片。

Compass的图片处理主要有以下功能:

  • 自动将一系列单个图片拼接生成一个Sprites;
  • 根据图片名,自动计算background-position并生成CSS代码;
  • 自动给图片加上防缓存机制。

下面我们就来看看如何具体实现这些功能。

Sass & Compass Best Practices 2

——简化代码

前一篇文章中我们介绍了如何利用Sass来组织我们的代码结构,本文中将会介绍如何利用Compass来简化我们的CSS代码,并且提高CSS代码的复用性。

在我们的CSS开发中,你是否遇到过以下的问题:

  • 为了浏览器的兼容性,同样的效果要写很多行,维护起来很麻烦;
  • CSS Selector需要有层级关系,但重复的写同样的父元素使代码看起来很冗余;
  • 不同的组件拥有同样的样式,但由于有一些细微的差别,导致很难复用,而一旦复用,由于CSS的特性,又不易阅读和维护。

这个时候就应该用到Sass的nest和@extend以及Compass的一些内建mixin了。

Sass & Compass Best Practices 1

——组织结构

在CSS开发中你有没有遇到以下问题:

  • 一个CSS文件几百上千行,要修改一个样式要找半天;
  • 为了不同浏览器的兼容性,同样的样式要写好几行代码;
  • 为了防止背景图片被缓存,每次更改背景图片都要修改图片名称和代码;
  • 当sprites修改以后,在代码中需要调试半天background-position才能适应新的sprites;
  • ⋯⋯

当你遇到其中一个或多个问题的时候,说明在CSS代码的管理和维护上出了问题。而这个时候,传统的CSS开发方式已经无法满足这些需求了,我们需要新的开发框架和工具,也就是:SassCompass

不在这里重生,就在这里死去

——我在ThoughtWorks的2012

2012

在2012的尾巴上回头看去,这几乎就是工作的一年。整整一年我都在西安出差,除了偶尔回成都见见朋友和亲人,就是在公寓与公司之间工作、学习。但这样的一年里,我却有了很多新的尝试和改变:

  • 我在西安电子科技大学给大学生做了演讲
  • 我在公司做了两次系统的CSS Session
  • 翻译了《HTML5 Mobile Development Cookbook》
  • 在Openparty上show了一把现场写jasmine测试
  • 学习了别人听都没听过的乐器——陶笛
  • 通宵爬上了华山,却在穿越莫不知名的山峰时以为自己就要死在上面
  • 我开始阅读经济、创业方面的书籍
  • ⋯⋯

但是更多的,使我思维和观念的转变。