bill.kang_个人页

前端工程化概述

HTML5实践 -- 使用css3创建动态3d立方体

　　在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。 　　demo地址：http://www.paulrhayes.com/experiments/cube-3d/ 　　demo下载地址：animated-css3-cube.zip   　　下面我们开始介绍如何制作。

HTML5实践 -- 如何使用css创建三角形，使用CSS3创建3d四面体

　　今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。原文地址：http://www.paulrhayes.com/2010-10/css-tetrahedron/。

HTML5实践 -- 如何使用css3完成google涂鸦动画

　　今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。

javascript的内存管理

　　介绍 　　低层次的语言，如C，具有低级别的内存管理命令，如：malloc()和free()，需要开发者手工释放内存。然而像javascript这样的高级语言情况则不同，对象（objects, strings 等）创建的时候分配内存，当他们不在使用的时候内存会被自动回收，这个自动回收的过程被称为垃圾回收。

从输入网址到显示页面：浏览器工作原理拆解分析

本文将深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～ 1. 首先嘛，你得在浏览器里输入网址: 2. 浏览器查找域名的IP地址 导航的第一步是通过访问的域名找出其IP地址。

Mozilla技术布道者给Web开发人员推荐的Firefox插件列表

原文地址：http://blog.jobbole.com/9189/   让Web开发人员的生活尽可能轻松和高效，这是Firefox一直坚持的目标之一。通过提供工具和可扩展的web浏览器，让开发人员能够创造出令人惊奇的东西。

前端必读：浏览器内部工作原理

原文地址：http://www.cnblogs.com/cnwebdeveloper/articles/2234423.html   浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。

HTML5实践 -- iPhone Safari Viewport Scaling Bug

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787555.html 　　 　　从事过iphone响应式设计的人，一定清楚iphone safari浏览器viewport 缩放的bug。

javascript中如何做对象的类型判断

　　最近在翻看John Resig的大作《Pro JavaScript Techniques》，里面讲到了如何做javascript的类型判断的问题。文中介绍了两种方式，一种是使用typeof，另一种是使用constructor。

HTML5实践 -- 三步实现响应式设计

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html   　　响应式web设计现在已经不是一个难事了，如果你还不熟悉他，可以参看我的文章《HTML5实践 -- 流式响应式设计》。

HTML5实践 -- 使用CSS 实现弹性视频

　　转载请注明原文地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html   　　当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。

HTML5实践 -- 在非响应式设计中如何使用ViewPort meta标签

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779900.html   　　大家都知道viewport标签对于响应式设计的意义，但是你们可能不清楚，他对于非响应式设计也有相当的作用。

HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html   　　现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。

HTML5实践 -- CSS3 Media Queries

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html 　　demo查看地址：http://www.webdesignerwall.com/demo/media-queries/ 　　 　　CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。

Google网站性能优化工具Page Speed试用报告

原文地址：http://dudo.org/archives/2009060611295.html   Google近日推出了一款网站性能优化工具：Page Speed（http://code.google.com/speed/page-speed/）。

Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS

原文地址：http://dudo.org/archives/2008051417218.html   英文地址：http://developer.yahoo.com/performance/rules.

Yahoo!网站性能最佳体验的34条黄金守则——图片、Coockie与移动应用

原文地址：http://dudo.org/archives/2008051511220.html   英文地址：http://developer.yahoo.com/performance/rules.html中文地址：http://www.dudo.org/article.asp?id=218      我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。

Yahoo!网站性能最佳体验的34条黄金守则——服务器

原文地址：http://dudo.org/archives/2008051322217.html   英文地址：http://developer.yahoo.com/performance/rules.html中文地址：http://www.dudo.org/article.asp?id=215      在本系列的第一节中，讲了提高网站性能中网站“内容”有关的10条原则。

HTML5实践 -- 使用css装饰你的图片画廊 - part2

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html   　　在上一讲中，我们的解决方案使用到了jquery去创建一个span标签。

HTML5实践 -- 使用css装饰你的图片画廊

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html   　　本节课我们将介绍，如何使用css在不修改图片源的前提下装饰你的图片画廊。

跨浏览器开发：CSS代码的金科玉律

作为Web设计师，你的网站在各种浏览器中有完全一样的表现是很多人的目标，然而这是一个永远无法真正实现的目标，很多人认为，完美的跨浏览器兼容并不必要，这样说虽然没错，但在很多情形，一种近似的兼容还是很容易实现的。

落枫推荐:firefox插件firebug的8个最优秀扩展

原文地址：http://blog.163.com/seo_luofeng/blog/static/17657502420112302540348/?suggestedreading&wumii   　　从事跟网站有关的懂行的人一般都会使用firefox浏览器,那肯定离不开firefox下面强大的插件,而Firebug是Firefox下的一款开发类插件，现属于Firefox的 五星级强力推荐插件之一。

怎么让CSS兼容IE和FireFox火狐的技巧大全

CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理 方法并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。

浏览器内核及渲染过程介绍

原文地址：http://www.nowamagic.net/librarys/veda/detail/634   　　浏览器可以分为两部分，shell+内核。其中shell的种类相对比较多，内核则比较少。

HTML5实践 -- 实现跨浏览器HTML5文字占位符 - placeholder

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779878.html 　　 　　html5为web的form表单增强了一个功能，他就是input的占位符--placeholder。

HTML5实践 -- 如何使用css3丰富我们的图片样式 - part2

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/23/2780892.html   　　之前的教程《HTML5实践 -- css3图片样式》，我介绍了如何为图片添加background-image包装，借助box-shadow 和 border-radius为图片设置多种多样的样式，有兴趣的朋友可以回头阅读。

HTML5实践 -- 如何使用css3丰富我们的图片样式

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/22/2779876.html   　　在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。

HTML5实践 -- 介绍css3中的几个属性：text-shadow、box-shadow 和 border-radius

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html   　　今天我们的内容是css3的text-shadow、box-shadow 和 border-radius几个属性的介绍，他能增强页面布局，值得学习。

HTML5实践 -- 可伸缩的mobile搜索框

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779845.html   　　今天我将介绍如何使用css制作一个可伸缩的mobile的搜索框，他非常适合于mobile的响应式设计的需要。

手机站点和桌面站点设计的10个区别

桌面网站的一些设计原则是大家广泛认可，并积极付诸实践的。例如：系统状态保持可见，避免错误信息，在错误发生时，应该提供一些具体的指南帮助用户解决这些问题等。 很多人认为这些适合网页设计的原则和指南也同样适用于移动平台。

移动网站开发——CSS

上一篇我们谈到了移动网站中的标签，想必很多人也很想了解Mobile CSS的情况吧，本文将和大家一起探讨移动网站中的CSS标准。 介绍 Mobile css的标准也是有些复杂的，与前一篇文章中提到的类似，之前存在着一个W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事实上它们都是CSS 2.1的子集，而且内容非常接近，不同的是，WAP CSS 1.0针对移动设备加入了一些扩展，这些扩展通过-wap-前缀来实现。

手机网站前端开发布局技巧

在 此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。

用谷歌浏览器来当手机模拟器(模拟头信息)

很多网站都通过User-Agent来判断浏览器类型，如果是3G手机，显示手机页面内容，如果是普通浏览器，显示普通网页内容。 谷歌Chrome浏览器，可以很方便地用来当3G手机模拟器。在Windows的【开始】–>【运行】中输入以下命令，启动谷歌浏览器，即可模拟相应手机的浏览器去访问3G手机网页： 谷歌Android： chrome.

为 iPhone 和 iPad 自定义网站的主屏幕图标

iPhone 和 iPad 等苹果设备使用主屏幕 (Home Screen, 也称桌面) 管理应用程序, 还可以通过浏览器的添加到主屏幕功能将网站链接作为快捷方式添加为主屏幕图标. 是否你也想过为网站定义一个图标, 如果用户将网站添加至主屏幕, 网站链接看起来更像原生程序, 也能获得更多的关注.

苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究

苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的，之前在网上查了下相关的资料和苹果的开发文档手册，对这两中属性区别说的不够详细，导致现在大家开发的时候有些混淆。

测试驱动javascript开发 -- 5.性能测试

　　自动化测试另外一个比较重要的内容点是性能测试，很多问题可能有不止一种解决方案，很多时候并不知道哪个是最好的解决方案。例如有很多创建javascript对象的方法，使用javascript构造器、使用函数的方法或者使用闭包。

测试驱动javascript开发 -- 4.测试驱动开发过程（下）

　　TDD是一个迭代的开发过程，他包括下面的步骤：1.编写测试；2.运行测试，观察失败；3.确保测试通过；4.重构，减少重复。 　　每次迭代中，测试就是规范。在我们完成开发之后，测试就可以通过了。之后我们就需要进行减少重复代码和提高设计的重构工作，然后再次运行测试，并保证其通过。

测试驱动javascript开发 -- 3.测试驱动开发过程（上）

　　通过之前文件关于单元测试的介绍，我们学会了如何减少代码的缺陷，通过回归测试抓取bug，减少对公共测试的依赖提高开发效率。本章我们的关注点将会放在测试驱动开发（TDD）上，他是测试先行、开发置后的开发模式。

javascriptMVC教程 -- 14.FuncUnit实例：完成jquery焦点图插件的自动化功能测试

　　FuncUnit相关的知识我在之前的博文已有简单介绍，大家可以自行阅读《javascriptMVC入门 -- 12.FuncUnit》。他提供了很多api方法，我的文章中没有涉及，大家可以去官网查看，地址：http://www.javascriptmvc.com/。

测试驱动javascript开发 -- 2.单元测试一例：学习断言、测试用例函数的编写

　　本篇我们将通过对Date.strftime编写单元测试的例子，学会断言、测试用例函数的相关知识。 　　首先我们先来看Date.strftime的实现代码。 Date.prototype.strftime = (function () { 　　function strftime(form...

测试驱动javascript开发 -- 1.单元测试

　　从今天开始，我将以读书笔记的方式向大家介绍《Test-Driven JavaScript Development》相关内容。我不太清楚这本书是否已经有了中文的译本，有兴趣的朋友可以去搜索下，或者直接读英文原版。

QUnit系列 -- 5.QUnit源码分析之<大致结构>

　　分析别人的源代码，除了可以了解程序功能是如何实现之外，还可以学到一些比较先进的编程方式和思想，进而提高自己的水平。本着这一想法，我将对QUnit的源代码加以解读，也希望对大家js水平的提高有个帮助作用。

QUnit系列 -- 4.QUnit介绍（下）

　　测试用户操作 　　问题 　　那些依赖于用户操作的代码，不能通过执行函数来测试。通常元素的事件使用异步函数，例如click，这些需要模拟。 　　解决方案 　　 你可以使用jQuery的 trigger()方法来触发事件，然后测试预期的行为。

QUnit系列 -- 3.QUnit介绍（上）

　　自动化测试软件对于开发来说是一个很重要的工具，而单元测试对于自动化测试来说是基本组成部分：软件的每一个组件或者单元可以在非人工介入的情况下，使用测试工具一遍遍的重复执行。换句话说，就是你可以写一次测试，然后不用付出额外成本的任意执行多次。

QUnit系列 -- 2.介绍单元测试（下）

　　JavaScript测试框架：QUnit 　　下面我们将介绍使用QUnit来完成前一章中的单元测试。 DOCTYPE html> Refactored date examples test...

HTML5实践 -- 使用css制作时间 ICON

　　最近我在重新设计自己的博客站点，决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片，感谢css3，现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。

HTML5实践 -- 灰色图片画廊

　　以前，在web上要显示灰度图片的话，只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程，而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo，来展示如何实现这个功能。

QUnit系列 -- 1.介绍单元测试（上）

　　大家都知道单元测试对于保证代码质量的重要性，但是对客户端代码进行单元测试则要困难的多。一个比较棘手的问题是，因为JavaScript代码和后台代码或者html结合的比较紧密，他缺少真正单元的概念。例如对dom的操作，无论我们是借助jquery这样的类库，把js代码单独放在一个文件，还是直接使用内嵌代码的实现方式，都没有可以测试的单元。

js双感叹号判断

　　今天看qunit源代码，发现一段很奇怪的代码，虽然能领会他的意思，但是不明白双感叹号起到的作用。 function id( name ) { return !!( typeof document !== "undefined" && document && document.getElementById ) && document.getElementById( name ); } 　　然后去网上查了些资料，他相当于三元运算符，返回boolean值。