Really cool js library that creates a user friendly, semantic html 5 compatible wysiwyg text editor that works in your browser.

Very cool little tool to create pure CSS arrows for use on tooltips, dropdown menus and the like

Asides plugin David Caolo is using for his Diversions section.

a simple jQuery plugin that allows you to add a dynamically-resized background image to any page

iOS 4.3 新增的一个重要的功能是对 home sharing 的支持，这样你可以在一台安装了 iTunes 的机器上共享任何视频和音频而不需要同步到对应的 iDevice 中。这给打造基于 Mac 的家庭媒体中心带来了很大的便利。先前介绍过用 XBMC 构建媒体库的方法，安装了 XBMC 的 Mac mini 是我目前主要使用的视频播放设备，自从 Mac OS X 开放了视频硬件解码支持 之后，用低配置的 Mac mini 播放高码率的 1080p 视频也完全不是问题了。而且对于 iPad 2 和 iPhone 4S 以后的设备，因为已经支持到 H.264 的 High Profile 4.1，所以正常情况下，网上所有能下载到的 MKV 封装的视频，都只需要重新封装一下就可以无损地播放了。这里介绍一下我的配置。

从网上下载到的 mkv 视频，一般先用 MP4tools demux 再封装为 mp4，这是我目前找到的最方便工具。如图所示：

因为前面提到的原因，视频部分可以不转换，所以选择直接 Pass Thru，但音频部分一般是 AC3 或者 DTS 各式的，需要转换为 AAC 才可以给 iDevice 们播放，这里可以任选码率，大部分情况下 192 kbps 绰绰有余。

更新： @RioJot 提醒我有个开源的 Subler 工具也可以完成这个操作，它的界面比 MP4tools 更好一些，支持选择音频 downmix 的类型 (Dolby Pro Logic 2, Dolby Pro Logic, Stereo, Mono)，还可以自动抓取元数据和 Artwork。另外它的队列管理也比 MP4tools 好一些。唯一需要注意的是必须安装了 Perian 之后才可以进行音频的 downmix。

转换完之后的 mp4 已经可以直接加入 iTunes 中播放，但比较理想的还是添加一下文件的元数据，比如电影的标题、年份、电视剧的系列名和海报等等。这个工作可以用 iSubtitle 自动完成。只要用 iSubtitle 打开 mp4 文件，它就会根据该文件的名称在网上的对应数据库中匹配获得相关元数据 (比如电影从 themoviedb.org 中搜索)。iSubtitle 还支持的一个重要功能是给 mp4 文件添加软字幕，只需要把 srt/ssa 格式的字幕文件下载下来，取相同前缀，放在 mp4 文件所在的目录下即可。比如 Spartacus.S02E02.720p.HDTV.X264-DIMENSION.mkv 文件转换得到 Spartacus.S02E02.720p.HDTV.X264-DIMENSION.mp4，字幕文件可能是 Spartacus.S02E02.720p.HDTV.X264-DIMENSION.chs.srt。它的界面如图所示：

iSubtitle 执行的只是元数据操作，所以可以在 mp4 上直接保存。然后就可以加入 iTunes 中。iTunes 会根据元数据信息分类存放，比如下面这样：

更新：Subler 也可以完成添加字幕的操作，这样你可以把两步操作合并到一步完成，可是 Subler 必须手工选择字幕文件，而且字幕文件也必须已经转换为 UTF-8 编码才可以添加。

然后，在 iTunes 和 iDevice 中启用家庭共享 就可以在设备的 Video app 上看到这些视频了。根据我的经验，至少 720p 的视频在 wifi 下播放是非常流畅的，也几乎不需要任何缓存时间，如果出现播放缓慢、经常停滞的情况，就应该检查网络或者设备配置问题了。如图：

于此同时，因为 iTunes 已经将文件组织好了，我们还可以将 iTunes 的媒体文件所在目录直接添加到 XBMC 中，这样就可以自由选择是在电视的大屏幕观看还是在 iPad 上观看了 (当然也可以直接用 iTunes 观看，选用 XBMC 主要是习惯和方便用遥控器操作)。对于电视剧文件，因为文件名仅仅是标题，XBMC 无法直接搜索，所以可以在安装了 mp4v2 之后 (brew install --using-llvm mp4v2)，使用如下 Python 脚本生成符合 XBMC 需要的符号链接：

#!/usr/bin/python

import sys, os, commands

def linkfile(src):
output = commands.getoutput("mp4info '%s'" % src)
season = 0
episode = 0
for line in output.splitlines():
sl = line.strip()
if sl.startswith("TV Season"):
season = int(sl.split(":")[1].strip())
elif sl.startswith("TV Episode"):
episode = int(sl.split(":")[1].strip())

if season and episode:
ext = os.path.splitext(src)[1]
dst = "%s/%dx%02x%s" % (os.path.dirname(src), season, episode, ext)
print src, "->", dst
if not os.path.islink(dst):
os.symlink(src, dst)

for root, dirs, files in os.walk(sys.argv[1]):
for name in files:
linkfile(os.path.join(root, name))

这样在 XBMC 上看到的效果如图：

顺带一说，在即将发布的 XBMC 11 “Eden” 中，还支持将 XBMC 作为 AirPlay 接收端，这样 iDevice 上保存的图片、音乐和视频也可以直接用 wifi 发送到 Mac 上观看了。

In this day and age, I try to avoid image replacement as much as possible but when necessary i tend to use the old -9999px technique. This is an interesting alternative without so many drawbacks.

Some awesome little hacks for the OSX terminal.

CSSDeck.

One of the great things about front end development is the ease of access to the source code. If you’re curious about how something works, with enough ambition you’ll be able to figure it out exactly by viewing a few readily accessible source files.

That’s very unlike the world of programming, so it’s something I hope you take advantage of. Education is available at every URL and I’ve viewed a lot of source to figure out how a particular effect was achieved.

You can think of CSSDeck as a design gallery for CSS snippets. Self described as:

A Collection of Pure CSS Creations! Let’s form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS.

You can peruse the site to find something visually interesting and then check out just exactly how it was done.


Advertise here with BSA

Boxer is an awesome little game emulator for Mac that allows you to play DOS games without leaving OSX!

scrollorama.

Yesterday seems to have been the day of project releases. scrollorama is a neat little piece of work that helps you better utilize “scrolly stuff”. The demo page outlines just a few things you can do when combined with other great things like lettering.js.

Scroll-based behavior changes, when used properly (read: responsibly), can really be an integral piece of your UX.

impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz.

Quite an impressive piece of work! impress.js aims to replicate the prezi.com presentation style in the browser by taking advantage of CSS3 transforms and transitions.

The demo is quite slick, especially the kicker at the end. Neat stuff!

It’s really rare that I make a presentation anymore, but hopefully when I’m able to get into speaking in one way or another, this little tool will come in really handy. I’ve heard all too many times about Keynote decks going haywire and losing tons of work, this seems like a way to get things just right and a bit more stable.

How the Postname Permalinks in WordPress 3.3 Work » Otto on WordPress.

One of the crowd favorite features brought in WordPress 3.3 was the ability to further customize your permalink structure to use only the postname as the slug. Prior to 3.3 this was extremely costly and didn’t scale very well, especially once your page count grew.

A stroke of genius from Otto illuminates just how this problem was solved.

Studying the URL routing of WordPress has helped me to build better websites. I think that goes for any system you use, you should really know how it works as much as you possibly can. Your quality of work will rise exponentially and everyone (including yourself) benefits from that.

Response JS: mobile-first progressive enhancement in HTML5..

This is a very interesting project. Responsive design will continue to be a steady topic of conversation in 2012 and tools like this help propel us to talking about it applicably.

Without going into too much detail about responsive design itself, I’d like to point out what Response JS does differently. Their spin is to be a mobile-first responsive design implementation. By piggybacking jQuery you’re able to be much more aggressive in optimizing for the mobile experience in a number of ways.

Serve resolution-optimized images
Swap code blocks based on breakpoints
Methods and hooks to trigger responsive actions

There’s definitely some cool stuff to check out, and with the Web moving to an increasingly JavaScript-dependent environment, we might see more implementations along these lines to make responsive designs more mobile-focused.

As with all good things, there are drawbacks however. Being this aggressive can sometimes take away from the core purpose of being a single document with ‘conditional’ styling that responds to the environment at hand. I’m not saying this direction is a bad thing, in fact I really like that it keeps the idea of progressive enhancement in mind with all it does.

Related: Nathan Smith’s Adapt.js can’t go without mention here.

Do away with little png's and use icon fonts to do all the heavy lifting instead!

An automated documentation system for CSS

I’m not sure how I missed it, but a new feature to OS X Lion is a Preference Pane called Network Link Conditioner. This is a thing of beauty for Web developers the world over; built in network throttling on an OS level.

Throttling comes in as a need for various reasons. I’ve wanted to throttle my connection a number of times to test the sequence of JavaScript events that get fired, check out how the initial load of a page would feel, or include some graceful fallback for those times when a connection would completely drop. Formerly, I would use the Charles Web Debugging Proxy and it was awesome.

Charles, at a very high level, was a proxy that you could direct your requests through and it would throttle how fast things took place. The recording tools were awesome, but way beyond what I was needing to do. The other issue with it was a required dependency on a Firefox Add-on. With that, you could only simulate alternative network conditions in a single browser.

Network Link Conditioner changes that by offering an altered connection on a system level, allowing you to throttle your bandwidth top to bottom. The pref pane gives a number of options for throttling too:

All in all, I’m really excited to have discovered Network Link Conditioner. Unfortunately, it’s limited to OS X Lion, so if you haven’t upgraded the preference pane won’t be available. If you have upgraded, Network Link Conditioner is not installed by default, but you can find it and install by double clicking /Applications/Utilities/Network Link Conditioner/Network Link Conditioner.prefpane — enjoy!

While checking out my Tivo last night, I was surprised and stoked to find that Monday’s Modern Marvels was all about food trucks. Ever wonder how the trucks are engineered, constructed and then wrapped in those colorful stickers we’ve all learned to spot here in Midtown? The show includes all the nerdy details, plus a history lesson that goes back to chuck wagons! While I’m sure the show will repeat on History Channel or H2, you can also watch the full episode online.