2014年10月 ’ 的文章存档

7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉。一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等。今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示。

1、SyntaxHighlighter – 最优秀的JavaScript代码高亮插件

SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,SyntaxHighlighter 可以对大部分编程语言进行着色渲染,而且代码高亮的性能也非常不错。SyntaxHighlighter 可以自定义主题文件,在初始化的时候指定自己喜欢的主题即可。

r1

 

官方网站:http://alexgorbatchev.com/SyntaxHighlighter/

2、Google Code Prettify – 自由地JavaScript代码高亮插件

Google Code Prettify是一款由Google推出的JavaScript代码高亮插件,Google Code Prettify可以对C/C++, Java, Python, Ruby, PHP, VisualBasic, AWK, Bash, SQL, HTML, XML, CSS, JavaScript, Makefiles和部分Perl编程语言代码高亮着色。

r2

 

官方网站:http://code.google.com/p/google-code-prettify/

3、Highlight.js – 多风格JavaScript代码高亮插件

highlight.js是一个用于在任何web页面上高亮着色显示各种示例源代码语法的JavaScript项目。具有以下特色:

  • 支持 92 种语言,49 种代码格式化风格。
  • 自动检测语言种类
  • 支持多语言混合的代码高亮
  • 支持Node.js
  • 支持使用任何HTML标记
  • 兼容任意js框架

Highlight
阅读全文

修复bug的12个关键步骤

boss:那么,你需要多长时间来修复这个bug?

没有经验的程序员:给我一个小时?最多两个小时?我能马上搞定它!

有经验的程序员:这么说吧,钓到一条鱼要多久我就要多久?!

要多少时间才能修复bug,事先是很难知道的,特别是如果你和这些代码还素不相识的话,情况就更加扑朔迷离了。James Shore在《The Art of Agile 》一书中,明确指出要想修复问题得先知道问题的所在。而我们之所以无法准确估计时间是因为我们不知道需要多久才能发现症结的所在,只有清楚这一点,我们才能合理估计修复bug所需要花费的时间。不过,这个时候恐怕黄花菜都凉了。 Steve McConnell曾说过:

“发现问题—理解问题—这就是程序员90%的工作。”

很多bug都只需改动某一行代码即可。但是需要投入大量时间的是,后面还得指出怎么样才是正确的——就像我们在钓鱼的时候,得知道往哪里下诱饵,什么时候鱼儿容易上钩等等。话说bug有四种类型:第一种易寻易修复,第二种难寻易修复,第三种易寻难修复,第四种难寻难修复。最悲剧的就是最后一型的,不但“寻寻觅觅,凄凄凉凉戚戚”,哪怕终于千辛万苦滴水穿石,也只能在那边不由自主地抓耳挠腮,无奈叹一句“路漫漫其修远兮”。可以这么说,除非是新鲜出炉的代码,不然让你找bug就跟瞎子摸象一样——糊里糊涂,不知道归属于哪种bug类型。

ccc

 

查找和修复bug

你知道“查找和修复bug”意味着什么吗?没错,就是调试!不断的调试,无数次的调试!Paul Butcher通过大量工作,总结出以下结构化的步骤:

1.明确目的。仔细查阅异常报告,确定是否是个bug,找出各种有用的信息发现问题的症结,予以重现。再次检查是否与报告发生重复。如果发生重复,那看看曾经的相关人员是如何处理的。

2.准备工作——找出正确的代码,用排除法清理工作区域。

3.匹配测试环境。如果客户正在操作计算机配置,那么此过程可以跳跃。

4.明确代码的用途,确保现有测试工具一切正常。

5.好了,现在可以出发钓鱼去咯——重现和诊断错误。如果你不能做到重现,那你就不能证明你已经完成修复工作。

6.编写测试案例,或者通过现成的测试案例来捕获bug。

7.进入修复模式——请务必确保不会影响到其他任何部分。但是,在开展修复工作之前,可能你还要包揽重构工作,因为只有这样,你才能无所顾忌地捣鼓代码。而且事后回归测试,还能确保你不会加入任何新的bug。

8.整理代码。通过一步一步重构,让你的代码更易于理解,更安全。

9.找别人来审查一下,当局者迷旁观者清。

10.再次检查此修复过程。

11.试着不从主线出发,以检查这些bug是否会影响其他支线。合并这些变化,处理代码中的差异,回顾所有的审查和测试等工作。

12.思考。好好想一想哪里错了以及为什么错了?为什么你的修复会起效?这种类型的bug还会出现在哪里?在《 The Pragmatic Programmer》一书中,Andy Hunt 和Dave Thomas也如是指出“如果一个bug需要耗费你很多时间,那么一定要好好弄清楚原因”。此外,还需要思考的是,怎么做才能吸取经验教训,将来在类似的问题上不再栽跟头?以及,我们采用的方法、使用的工具是否还有可以改进的地方?以及这些bug的影响和严重程度。

 找到bug,还是修复bug,哪个需要更多时间?

或许建立一个测试环境、重现问题和测试bug所需的时间,要远远多于找到bug和修复bug的时间。不过对于一小部分显而易见的bug,找到它们很简单——不过修复起来可能就不尽如人意了。
阅读全文

Instagram工程师教你如何改善App的性能

【编者按】扁平化设计由于其简洁的外表,更少的按钮和选项使得界面干净整齐,从而减少认知障碍的产生。扁平化设计更是功能上的简化于与重组,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来。本文来自Instagram一名工程师的分享。

以下为译文:

扁平化设计仅仅只是一个漂亮的外表,还是一个性能利器,从而触发一场UI革命?实践证明是后者。

Tyler Kieft 是Instagram一名工程师,他详细解释了这其中的缘由,更详细的内容请关注他在@scale会议上的演讲: 标准安卓手机上的Instagram 。这个演讲是由Facebook提供的,是“如何在实际情况下设计移动应用程序”系列的一部分,这里的“实际情况”是指那些手机速度更慢、屏幕更小、网络比美国更慢的地方。

为标准手机设计App和高端手机并不一样,Instagram团队需要重新思考他们的设计。从Tyler的谈话中得到的启示之一是转变到扁平化设计,因为这将让应用程序更美观、更实用、并且还能大大提高性能。

这的确出乎我的意料,我曾经认为扁平化设计只是构建更美观的UI。现在想想真是愚蠢之极。感谢Tyler如此详细的解释了扁平化设计的好处, Instagram说明了一切。

扁平化设计是反拟物化,它采用简单的元素、简单的排版、单调的颜色以及简单的设计。

使用扁平化设计,Instagram可以减少120 ms的冷启动时间,同时应用程序更美观、更好用、并且更专注将内容传送到不同大小的手机上。
阅读全文

5种你未必知道的JavaScript和CSS交互的方法

随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!

用JavaScript获取伪元素(pseudo-element)属性

大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也可以访问页面中的伪元素。

// Get the color value of .element:before
var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('content');

看见了吗,我能访问伪元素里的content属性值。如果你想创建一个动态的,风格别致的网站,这是一种非常有用的技术!
阅读全文