akira_cn 发布于 06月23, 2016

【译】给 Web 开发者 3 个更有效地工作的建议

原文:http://www.zcfy.cc/article/630

working in a development team

开发者倾向于停留在他们所了解和喜欢的领域,做那些让他们舒适和感觉良好的事。这在一个团队环境中可能会成为问题。回顾我的职业生涯,我在这方面犯了一些错误。

现在想一想你喜欢的框架:是否项目里添加了它就万事大吉?

想一想你喜欢的那些设计模式:将它堆砌在历史遗留代码上有帮助吗?

那个差到你不堪卒读的组件怎样?避免用它或者在它之上包一层有用吗?

带着这样的问题,我想要给你三个建议,让你在一个团队里更有效地工作。这是给在一个团队中工作的 Web 开发者的建议。我将借鉴过去的经验和过程中得到的教训。

阅读全文 »

akira_cn 发布于 06月21, 2016

【译】建立更好的可访问性原语

原文:http://www.zcfy.cc/article/607

随着我们建立的网站逐渐变得更像 app,web 平台也需要跟上,提供给开发者所需的创建高可访问性用户体验的工具,这一点很重要。

最近,我遇到两个场景,在这两个场景下我添加合适的键盘支持到我所创建的组件上是极其困难的。在经过很多实验和研究之后,我比较清晰地意识到可能在 web 平台上缺少了一些原语,如果有这些原语,我的工作将会变得简单一些。我将会解释这两个场景,并涵盖一些关于如何解决这两个问题的思路。

阅读全文 »

akira_cn 发布于 06月20, 2016

【译】Spying on the DOM

原文:http://www.zcfy.cc/article/613

我一直是对 TDD(测试驱动开发)和代码测试持怀疑态度的。我发现它很难做到而且很耗时间。尽管如此,有比测试难得多而且更耗时间的事情。你可能已经猜到了,改 bug!。当代码库变大了,开发团队来了新人,你会发现晚上越来越难睡个安稳觉,因为你不知道一周前写的代码在明天的需求变更中还能不能存活下来。我不想讨论单元测试的好处,因为这个话题可以单独写一整篇文章,而如果你快速 google 一下,你一定会找到关于单元测试这个话题的高质量的内容

所以让我们直奔主题。我正在做一个 Backbone 项目。在此处我不关心用什么框架,我更关心代码库将如何增长以及代码库将如何保持稳定。我并不是说框架不重要。不管怎样,有一件事情是肯定的,如果有人不理解所使用的库或框架构建的基础——不论这个库或框架是什么,一切都会变得一团糟。

阅读全文 »

akira_cn 发布于 06月18, 2016

【译】Emoji 可以如何改进你的代码——严肃地讨论

原文:http://www.zcfy.cc/article/584

谁不喜欢 emoji?如同大量的 emoji 用户在聊天和 email 中使用它,我开始尝试看我是否能将它用到每天的软件开发中去。

虽然这咋一听起来像是在开玩笑,但我发现在开发工作的某些场景中, emoji 将会是真正有价值的。为什么呢?

我们,作为开发者,通常查看大量的文本——不管无论是代码、产品日志、代码提交信息、文档又或者别的什么——而 emoji 天然地从一大堆文本里面凸现出来。将 emoji 从一个列表中挑选出来要比在其中找一段随机字符串要容易得多,在大段文本中 emoji 很容易被捕捉到,这能够让真实的生产效率得到提高。此外,即使没有真正提高生产效率,emoji 也很好玩。以下是我最近的一些玩法:

阅读全文 »

akira_cn 发布于 06月17, 2016

【译】关于静态类型令人震惊的秘密

原文:http://www.zcfy.cc/article/575

TypeScript 最近迅速流行起来。我喜欢 TypeScript,我也喜欢静态类型。我不使用 TypeScript,但由于它的类型系统,它获得一些非常棒的特性。TypeScript 的静态类型是结构不是名义,意味着它基本上像自动鸭子类型一样工作,而不是基于名字或者标识符的类型检查。这对于 JavaScript 一类的动态语言来说很合适。(TypeScript 的静态类型检查是声明式的动态类型检查而不是像传统语言那样涉及到静态类型绑定和内存分配——译者注)

阅读全文 »

akira_cn 发布于 06月16, 2016

【译】在行内元素前注入一个换行 | CSS-Tricks

原文:http://www.zcfy.cc/article/517

我遇到了一个小问题,我有一个 span 在 header 中,而我想要在 span 的前面产生一个换行。郑重声明,在 span 前面插入一个 <br> 标签当然没问题(而事实上,你还可以显示/隐藏这个标签,这非常有用)。但是...不得不用 HTML 去做一个布局相关的事情始终感觉有点奇怪。

因此,让我们来深入探索一下,在这个探索中,我们会多次说到“然而...”。

<h1 class="one">

  Break right after this

  <!-- <br> could go here, but can we do it with CSS? -->

  <span>
    and before this
  </span>

</h1>

阅读全文 »

akira_cn 发布于 06月15, 2016

Babel 插件开发与单元测试覆盖度检查

原文:https://www.h5jun.com/post/code-coverage-with-babel-plugin.html

单元测试,对于控制项目代码质量,保障线上版本的安全性和稳定性,节省回归测试成本和降低风险,都有着非常重要的作用。

代码覆盖度(Code coverage) 是衡量单元测试有效程度的一个重要指标。

代码覆盖度也是持续集成质量把控的一个环节。coveralls 是一个非常好的代码覆盖度检查平台,它可以和我们的 github repo 以及 Travis CI 无缝集成在一起。

结合 node-coveralls,有很多 Node.js 工具可以生成并发送代码覆盖度报告(Code coverage report),相关的工具包括 MochaNodeunitBlanke.jsJSCoveragePonchoLab 等等。

在本文中,我将介绍如何使用 Babel 来开发插件,将 js 原文件编译为可被 Mocha 等工具生成代码覆盖度报告的测试文件。使用这个插件,可以让 coveralls 相关的工具很好地支持对最新的 ES6+ 代码生成代码覆盖度报告。

长文预警:本文内容很长,我先介绍怎样使用相关工具生成代码覆盖度数据,如果对 coveralls、lcov data 已经有所了解,可以跳过这一部分,直接看 Babel 插件的部分。

阅读全文 »

akira_cn 发布于 06月13, 2016

【译】粘连 Footer 的 5 种方法 | CSS-Tricks

原文:http://www.zcfy.cc/article/491

一个简短的历史,如果你愿意那样说的话。

粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部,如果有足够的内容将页面撑开,footer 可以被撑到网页下方去。但是,如果页面的内容很短,粘连 footer 仍然会出现在浏览器窗口的底部。

在 wrapper 上用负的 margin-bottom

用一个元素将除了 footer 之外的其他内容包起来。给它设一个负的 margin-bottom,让它正好等于 footer 的高度。这是一个最基本的方法(例子)。

例子:用负 margin 粘连 footer

阅读全文 »

akira_cn 发布于 06月09, 2016

【译】用 CSS 隐藏页面元素的 5 种方法

原文:http://www.zcfy.cc/article/457

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。

你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点,让你根据不同情况选择上面这些方法中适合的方法来隐藏元素。

阅读全文 »

akira_cn 发布于 06月08, 2016

【译】3 种不同的原型继承: ES6+ 版本

原文:http://www.zcfy.cc/article/425

这篇文章改编自 《Programming JavaScript Applications》 相关章节,我在这基础上扩充了一些内容,并新增了 ES6 部分。

为了更好地发挥 JavaScript 的能力,很重要的一点是理解 JavaScript 的 原生继承能力。这是一个在 JavaScript 实践和学习中经常被忽视的领域,但是理解了它能够获得极大的能力。

JavaScript 是表现力极强的编程语言之一。其中一个最好的特性是能够在没有类和类继承的情况下创建和继承对象。

结合代理原型(delegate prototypes)、运行时对象扩展和闭包,能够让你用三种不同的原型表达方式实现继承,它们与类继承方式相比有着显著的优点。

阅读全文 »