Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.
For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"Follow up: How Apple.com will serve retina images to new iPads
The discovery I posted 1 month ago, explained.
Apple is reportedly using a 2x tag to differentiate between normal- and double-resolution files on its site. Here’s how.
Sick of the heaviness of jQuery? I do am.
Amazing three.js experiments and other cool stuff.
Yeah, everybody loves jQuery, as well as Content Delivery Networks.
But in case you missed the announcements, there were two important things about jQuery and its CDN.
jQuery Tools 是我最喜欢的 jQuery 插件，小巧，轻量，高度语义化。
对一个幻灯插件来说，最讨厌的莫过于生成一堆无意义的 HTML 代码，比如之前用到的 Coin Slider，而 jQuery Tools 的 Tabs 包含的 .slideshow() 却非常友好，只是配置起来容易犯晕。
比如，官方 API 指南上说加上 autoplay: true 即可让幻灯自动播放，所以想当然地就写：
$(".slidetabs").tabs(".images > div", {
effect: 'fade',
fadeOutSpeed: "slow",
autoplay: true,
rotate: true,
interval: 50,
clickable: false
}).slideshow();
但其实不然，因为 jQuery Tools 的插件包含关系是这样的：jQuery > jQuery Tools > Tabs > Slideshow，比如 effect, fadeOutSpeed 这些参数都是属于 Tabs 插件的，而 autoplay, interval, clickable 则是 Slideshow 的，所以要写成这个样子：
$(".slidetabs").tabs(".images > div", {
effect: 'fade',
fadeOutSpeed: "slow",
rotate: true
}).slideshow({
autoplay: true,
interval: 5000,
clickable: false
});
搜了下，看到官方论坛里很多人对这些参数的使用表示混乱不已，可能官方 API 写得不够清楚吧。
We build “teaser” pages for upcoming projects, we collect users’ email addresses and send them invitations. But be careful here, this is your first rollout, i.e. the first impression of your project. How sad would it be if you screw it up?
Back to our topic, you may wanna start with this:
<input type=”email” />
Nice, clean and neat. Then style it.
background-color: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.27), 1px 2px 3px rgba(0, 0, 0, 0.443) inset;
color: #888;
border: 1px solid #333;
cursor: text;
padding: 10px;
font: italic 16px Georgia;
width: 280px;
display: inline-block;Wait, did we mention it’s a input form for E-mail addresses?
<input type=”email” name=”email” />
This is tricky. When the “name” of elements are the same and the “autocomplete” is enabled, as you type, the browser will show “auto complete” results, hence we got your idiomatic Email address(es).
Wait, assume you have a unconventional name/username, like me, “disinfeqt”. Our browser made a difficult decision, then a ugly, red wavy line appears at the bottom of your Email address. You will thank me for this:
<input type=”email” name=”email” spellcheck=”false” />
Then you begin to think about some hints:
<input type=”email” name=”email” spellcheck=”false” placeholder=”yourname@example.com” />
The “placeholder” works dramatically in Webkit browsers, like Safari and Chrome, but does nothing in Firefox.
Last trick for our input form, try to disable this input form after submitting user’s Email, with jQuery:
$(“input[type=email]”).attr(“disabled”,”true”);
Isn’t this fun?
Update: I forget one last trick, add ime-mode: disabled; into your stylesheet, specific optimization for non-English users.
