使用 Page Visibility API ,让网站更友好

我们可能都有这样的经历:打开一个浏览器,加载之前打开的所有标签页,听到几个页面发出的混合在一起的声音。虽然浏览器通过标签的声音图标、插件等方法告知用户发声的页面,但这种体验还是很糟糕。作为开发者和设计者,我们有责任让网站更受欢迎。

网站是不是应该在被激活使用时才能发出声音?为什么我们要浪费资源和进程在我们看不到的动画上?

幸运的是,现在有一个解决方案:HTML5 有个页面可见(Page Visibility)的API。你可以看到Active Theory已经在新项目里使用了这个API。例如Under ArmorA Spacecraft For All:点击其他标签页,刚才还在运行的多媒体就会暂停。我喜欢把这样的网站成为“有礼貌的网站(polite web)”:网站考虑了用户的注意力、带宽等。

Read More

不依赖jQuery也能做好动画

在开发者社区中有种错误的观念——认为在web中,CSS动画是唯一高性能的动画方式。这使很多开发者放弃基于JavaScript的动画。所以导致——(1)强制使用大量样式表来完成复杂的UI交互,(2)不能很好地支持IE8、9,(3)放弃只有JS才能完成的完美物理运动效果。

事实证明:基于JavaScript的动画和基于CSS的动画一样快,甚至有时更快。CSS动画通常是和非常慢的jQuery $.animate()比较。但是,JavaScript库如果能避免像jQuery那样大量的DOM操作,性能就会非常高。这些库能比jQuery快20倍。

所以,让我们来打破一些神话,通过一些动画实例,并在此过程中提高自己的设计技巧。

Read More

世界各地程序员共同总结的前端面试题

常规问题

  • 最近你学了什么?
  • 是什么激发你对编程的兴趣?
  • 你最近在挑战什么新技术、你是怎么解决遇到的问题?
  • 当你在构建Web应用程序或网站时,你会考虑什么样的用户界面、安全性、性能、SEO、可维护性、选用的技术?
  • 谈谈你首选的开发环境(系统、编辑器或IDE、浏览器、工具等)
  • 你熟悉什么版本控制系统?
  • 请描述一下你创建一个网页的工作流程?

Read More

征服命令行

help.png

命令行(command line),也称为 CLI, Terminal, bash, shell……我们中有很多人很怕使用它,但其实只要你知道一些基本的命令和概念,就没什么好怕的了。(文中接下来的内容,命令行统一用 CLI 称呼)

Read More

小小标签,强大功能——深藏不露的 input

<input> 虽只是一个看似简单的 HTML 表单元素,但它这么一个单一的元素,就有多达 30 多个属性(attribute),相信无论你是个小菜鸟还是像我一样写了 15 年 HTML 的老手,知道这点的时候还是会惊讶不已的。而且如果再加上全局属性那就更多了,例如最重要的 type 属性有超过20个可能的值!可以来简单看看 MDN 文档

Read More

Ajax上传多文件

AJAX的采用标志着的Web历史上的一个巨大飞跃。与Web服务器通信而不需要重新加载页面的能力已改变了Web应用程序构建。动态网站的概念形成以后,AJAX(XMLHttpRequests) 技术发展迅速。

近年来XMLHttpRequests增加了一个很好的功能来处理文件上传。传统上,许多开发者用其他技术如Flash上传文件到服务器。这种方法的问题是,用户需要安装第三方浏览器插件的。

在这篇文章中你会学到如何用JavaScript技术将文件上传到服务器。我们将教你一个请求上传多文件的例子。然而,你可以用同样的办法上传单个文件。
让我们开始吧!

Read More

Macbook 光盘卡住的处理办法

前几天老妈让我帮拷贝一张大光盘里的表演节目出来,我把光盘插入后很顺利被吸进去,但是没有读盘的迹象,打算退盘,但是按退盘键没有反应。上网搜了各种方案未果。整理一下我尝试过的方法,也许你会有用:
1.开机的时候长按OPTION后,一直按住推出键
2.开机的时候长按触控板
3.开机的时候同时按住鼠标左+(右)键
4.用另一张盘适当用力往光驱里推
5.拿住电脑另一头使劲甩

像我这种穷光蛋,没钱送苹果维修店,只好最后一招,拆机取盘。。。以前都没拆过,在学长远程怂恿和协助下还是放手一拆。

Read More