首先你需要相信的是，下面的这个会跳舞的树是用纯HTML5和CSS3实现的，没有用任何的SVG、flash、JavaScript等技术，就是html和css。相信这会让你觉得不可思议，是的，难以相信。首先这棵树明显是个递归结构，需要用的数学上的算法，然后这棵树在跳舞时(摆动)，树枝上下摆动和左右摇晃的节奏并不同步，带有一种自然的随意和协调性。看起来很美。

Timesheet.js – 使用 Timesheet.js 你可以轻松的创建简单的时间和数据表，完全使用HTML5、JavaScript和CSS3技术。是的，没有使用任何JS工具包！

HTML<aside>元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。

Article元素(<article>)故名思议，可以表示论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。它的主要语义为表示自己是一个独立的内容结构。每一个<article>元素内部结构都应该是相似的，比如都应该包含一个头标题(h1-h6元素)等。

Base64 Encode 1x1px透明GIF图片能干什么？这种图片的特征就是体积最小化，最大限度的减少带宽。而且是透明的，具有隐身作用。用到的场景很多，比如测试浏览器是否支持data URI技术，或用来做一个透明的浮动层，或在lazy load图片时用它来做占位符

经常搜集整理一下网上发行的好代码，能不断扩充自己的知识库，这些知识在不用的时候就放着，需要用到的时候，从知识库里拿出来，会省掉很多的麻烦。

Address元素(<address>)是用来存放地址信息的，它可以和<article>元素配对来提供文章作者的联系信息。对它的使用需要注意一下几点

经过统计，发现恶意攻击的频率并不高，大多数都是404攻击，也就是向服务器请求不存在的页面资源。按按常理，Web服务器对404请求访问很容易应付的，消耗不了多少资源性能，但Wordpress网站为什么面对404攻击如此脆弱不堪呢？

IE9之后的IE浏览器也开始积极的支持现代浏览器技术，这给人非常积极进步的印象，但事实上没有多大的改观，即使在最新的Windows Phone在的移动IE浏览器，我们也很多时候需要专用的IEMobile CSS条件注释来将它和其它移动浏览器区别开来对待。

颜色反转(反相)能调节人眼的视觉感受，一般的电脑/电视的显示器上都有色彩调节功能，我能想出的invert的一个应用场景，就是夜里浏览网页时，将白色的网页颜色反转，眼睛看着会更舒服。你还能想出其它有用的地方吗？分享一下。

我还是第一次看见naturalWidth 和 naturalHeight这两个只读属性，真是两个非常有用的属性。不论你如何用CSS来变换一个img元素的高度和宽度，图片的原始大小都能用它们获取到。需要提醒的一点是，你不需要等待图片成功加载到页面后，才能正确的访问这两个属性，所以我它们放到了onload事件里。

代码执行效率对于程序员和程序来说都是至关重要的，尤其是遇到了那些需要大量调用、反复调用的函数方法。在很多Javascript框架里你都能看到有反复调用的函数。当在使用这些框架时，我们必须小心翼翼的尽量采取优化的代码编写。其中一种优化代码的方法就是在创建函数前先使用判断语句，而不是每次函数调用时都执行一次。

这些feed的链接都会输出到Wordpress页面的里。就像上面我展示的输出代码里的一样。但很显然，既然有了所有评论的feed。d单个文章的评论feed似乎有些多余。幸运的是，有很多方式可以禁止这些链接的出现，主要的手段就是把几个action/filter代码放置在functions.php里

随着浏览器的进步，现代浏览器都实现了多标签页(tab)的概念，就是在一个浏览器窗口里同时打开着多个页面实例。如果这时我们需要实现某个标签页的标题不停闪动，来提示页面内容有重要信息需要关注，这时候在用老的方法就不灵了。这时候需要我们针对每个标签页来单独修改它的窗口标题。

现代浏览器里提供的新的API越来越倾向于移动手机应用，而不是传统的桌面应用，比如JavaScript地理位置信息API。另外一个只针对手机应用的JavaScript API就是振动(Vibration) API。很明显，这个API就是允许mobile程序员使用JavaScript调用手机的振动功能，并且能设定振动的方式和时长。

CSS阴影效果(Box shadows)应用在Web页面设计上已经有了一段时间了。之前在CSS2阶段阴影效果还不是很有效之时，大部分的这种效果都是使用Photoshop图片实现的，但对于一些缺乏这些绘图技巧的人来说，比如我，学习Photoshop是件讨厌的事情。

.Htaccess对与一个网站来说是一种功能非常强大的配置文件。对它的功能了解的越多，你就越容易掌控你的网站配置。利用.Htaccess来禁止某个IP对网站的访问是它是基本功能之一。上面的配置只是用法之一，下面我将汇总一下在这个相关主题下的更多的用法。

火狐浏览器里提供了大量辅助程序员的开发工具。其中一个工具就是 Developer Toolbar，它看起来很像是我们程序员常用的控制台(console)，但它的作用完全不同。比如说，它提供的一个独特功能就是能够让你在火狐浏览器里对当前网页进行截屏。

因为上面使用了浏览器引擎前缀，所以看起来有些复杂，但实际上本质是非常简单的，也就2句代码。关于CSS竖向居中之前也说过几种方法，但使用flexbox也不失为一个非常漂亮的解决方案。我相信以后会发现Flexbox更多更有价值的用法。

WEBM格式的媒体将会越来越好，越来越流行，我期望着这种新格式逐渐替换掉之前Web上的老格式，因为将来真是移动web世界，需要体积更小，质量更高的流媒体文件技术。

我不想揣测这些黑客为什么要工具我的网站，因为，对于一个WEB服务器来说，经常受到这样的攻击时很常见的。最重要的是，当遇到这样的情况时你要知道如何应对，如何化解。

当第一次看到HTML5的表单校验功能时，我真是的感觉是十分怀疑的。虽然这是一种非常优秀的新HTML5新功能，但说实话，相比起JavaScript校验，它又显得不是那么自由，不是那么强大，不是那么实用。

Prism插件的代码组成就是一个js文件和一个CSS文件。经过对这两个文件的修改，我就可以用简单的方法标注pre里的是什么编程语言的代码，Prism能根据这些语种提示个性化的高亮其中的代码，让这些代码显得更清晰，更适合读者阅读。

几年前我就看到过CSS里有一些属性很奇怪，当我设置这些属性或取消这些属性后，字体看起来会变得好看和不那么好看。这就是字体平滑设置的效果。我推荐大家读一下Font smoothing explained这篇文件，你会从中学到更多的关于字体平滑效果的知识，但今天这里，我只是介绍一下它们的基本用法

上周我曾介绍过获取HTML5视频时长的方法。这是一项在操作HTML5视频时经常会用到的技术，但很容易想到，还有一种比获取视频时长更有用的操作，那就是获取或设置视频当前播放的时间点。

因为大部分的GIF动图都是要放在网页上，最终下载到用户的浏览器里，所以，优化这些GIF图片的体积是十分必要的，这里我们就需要用到另外一个非常有用的GIF图片修改工具：gifsicle，它有一个内置的方法能够优化GIF动图。

对于Web程序员来说，处理简单的URL格式也许会成为一场噩梦。试想一下，一个网址里有很多组成部分都会影响你对它的解析方法： 是否以/字符开头 是否以//开头 是否以?号开头 是否以#号开头 …等等

在HTML5视频上我们可以自定义播放控制和现实效果，我们还可以在线获取视频的各种信息，比如今天要说的如果获取视频时长信息。

HTML5的革命，现代浏览器的诞生，JavaScript的升级，这些给我们提供了使用Javascript和input[type=file]元素获取上传文件过程信息的能力。下面就来看看这些上传文件API是如何使用的！

那么，如何能够将一个完整小视频，或一个长视频的某一部分转化成GIF动图呢？这里要使用一种多媒体工具：ffmpeg

在这个accept属性里，你可以填入多个mime类型文件，使用逗号分隔它们。经过这样的设定，这个上传组件就对上传的文件类型有了特点的限制。

在浏览器里用JavaScript获取地理位置信息API在很多移动应用里是最常见的API运用，作为Web程序员，它应该是你必须具备的一项知识技巧。幸运的是，目前所有流行的浏览器都支持了这种技术。

对于用惯了图像界面操作的朋友们，我可以告诉你，命令行工具就像是一个宝藏，只要你挖掘，就会发现取之不尽的宝贝。相反，很多事情你觉得只有用图形界面才能获取，但事实上，命令行也能执行，甚至更方便。

至于为什么要用这样的格式化效果，它能帮助你更好的在控制台(console)输出debug信息，更好的为调试程序服务。比如，严重错误或警告信息就需要用打个字体，醒目的颜色突出显示，你觉得呢，你会用这个彩色的控制台(console)信息输出技巧吗？

修改文件后缀是我们经常会遇到的操作，在Windows系统下，这个操作也许很简单。但在Linux下，我们经常需要 […]