oscartong

[oscartong]

How to page-up & down with Mac's keyboard?

Well of course there are no Pg Up and Pg Dn keys in mac's keyboard. But scrolling looooooooong pages or documents line by line is really tired :( So, what to do?

fn+↑ = Pg Up

fn+↓ = Pg Dn

:)

[oscartong]

Installing Zmodem Protocol Tool lrzsz on Amazon EC2 Instance

There is no default zmodem protocol support on amazon ec2 instance, so we need to install one manually (We use lrzsz as example here. You can get the latest version on lrzsz's website). Follow these simple steps to install:

wget http://ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz

tar -xzvf lrzsz-0.12.20.tar.gz

cd lrzsz-0.12.20

./configure--prefix=/usr/local/lrzsz

make

sudo make install

cd /usr/bin

ln -s /usr/local/lrzsz/bin/lrz rz

ln -s /usr/local/lrzsz/bin/lsz sz

now try running rz on your ec2 install, the file upload window should be shown :)

[oscartong]

Port forwarding with iptables

一般来说服务器都不允许我们的webserver绑定低于1024的端口，比如我们经常都用8080之类，访问的时候url都要写成YOUR_HOST:8080/index.html，但服务器的外网防火墙一般都只开了80、443这些web常用端口，怎么可以把80端口的请求转发到我们webserver的端口呢？只需要下面这句iptables的命令即可：

iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT -to 8080

[oscartong]

How to access your AppEngine Dev Server from LAN?

从前用AppEngine的开发服务器调试应用的时候，都是用localhost:xxxx/...这样的本地地址来访问，那如果我需要从局域网里的其他电脑或手机访问我的应用该点��？此时我们可以用terminal来启动开发服务器，手动提供绑定的服务器地址即可（比如我的电脑局域网地址系10.66.38.135）：

dev_appserver.py YOUR_APP_DIRECTORY --address=10.66.38.135

启动后就可以在局域网里的其他电脑或手机里输入地址10.66.38.135:8080/...来访问 :)

还可以用--port参数来指定服务器端口，默认系8080。Google AppEngine开发服务器的所有参数文档在这里。

[oscartong]

Dart異步編程

本文譯自A Tour of the Dart Libraries - Asynchronous programming。

（JS的）異步編程一般都用回調函數（callback function）來實現，Dart提供了另外一種方式：Future接口，Future是一種“承諾”，保證調用者會在未來的某個不確定的時間得到一個結果。你可以用Completer來創建一個Future并稍後提供結果給Future，下面系個例子：

Future(bool) longExpensiveSearch(){ var completer = new Completer(); database.search((){ //執行好耗時的搜索... //過了好久... //OK搜到結果了！ completer.complete(true); }); return completer.future; } Future result = longExpensiveSearch(); //這裡會立即返回，不會等待搜索操作的完成 //then方法也是立即返回不會阻塞 result.then((success){ //當搜索操作完成後，會執行這裡的代碼 print('The item was found: $success'); });

串行連接多個異步方法

Future定義了一個chain()方法，用於以指定順序串行化執行多個異步操作：

Future result = costlyQuery(); result.handleException((exception) => print('Oh shit ...')); result.chain((value) => expensiveWork()) .chain((value) => lengthyComputation()) .then((value) => print('done!'));

上述例子的執行順序如下：

coslyQuery()

expensiveWork()

lengthyComputation()

等待多個（并行的）Futures

有時我們需要創建多個異步執行的操作并等待他們全部完成，才繼續下一步。Dart允許我們創建多個Future并行執行并等待他們全部完成（類似操作系統的進程同步）：

Future deleteDone = deleteLotsOfFiles(); Future copyDone = copyLotsOfFiles(); Future checksumDone = checksumLotsOfOtherFiles(); Futures.join([deleteDone, copyDone, checksumDone]).then((){ print('Done with all the long steps'); });

更多信息

請參考Future，Futures和Completer的完整API文档。

[oscartong]

只需簡單的修改Tumblr主題的HTML代碼，即可給Tumblr文章内的代碼做代碼高亮（將代碼内容包含在<pre class="prettyprint"> ... </pre>内），效果如下：

function main(){ //this is just a test var a = 1, b = true; console.log('hey man'); }

[oscartong]

[Mac]How to set Chrome Canary as your default browser

Chrome Canary由於包含很多新鮮出爐但不太穩定的新特性，不允許用户將其設置爲默認瀏覽器。但如果我本身就很喜歡嘗鮮且願意承擔小小風險呢，其實在Mac上有個簡單到你唔信的方法可以將Canary設置爲默認瀏覽器，這就是...Safari：

打開Safari的偏好設置，即可選擇Chrome Canary成爲你的默認瀏覽器，如下圖：

[oscartong]

How to highlight .dart code in Sublime Text 2

很明顯Sublime Text2的語法高亮是不支持.dart文件的，但dart的語法和java系如此之接近，每次都要自己手動選擇高亮模式實在系嚴重的重復工作。要讓Sublime Text2自動高亮.dart文件，只需做如下配置：

首先去到Sublime Text2的Packages目錄：

Mac OS X: ~/Library/Application Support/Sublime Text 2/Packages

Linux: ~/.config/sublime-text-2/Packages

Windows: %APPDATA%/Sublime Text 2/Packages

找到Java的語言配置文件：

/Packages/Java/Java.tmLanguage

照下圖添加dart後綴名：

DONE，重啟Sublime Text2後，打開.dart文件就會自動使用Java語法高亮了 :)

[oscartong]

Sublime Text2 (Mac)破解

若你的系統系Windows，請直接睇這篇文章。

首先���裝好Sublime Text2，打開應用套件内容

找到下圖的Sublime Text2這個文件，用Sublime Text2自己打開這個文件

搜索3342，全部替換成3242

OK，破解工作基本完成，保存上述修改後重新運行Sublime Text2，在help菜單裏選擇enter license，輸入如下注册信息（包括BEGIN和END兩行）：

—–BEGIN LICENSE—– hiwanz Unlimited User License EA7E-26838 5B320641E6E11F5C6E16553C438A6839 72BA70FE439203367920D70E7DEB0E92 436D756177BBE49EFC9FBBB3420DB9D3 6AA8307E845B6AB8AF99D81734EEA961 02402C853F1FFF9854D94799D1317F37 1DAB52730F6CADDE701BF3BE03C34EF2 85E053D2B5E16502F4B009DE413591DE 0840D6E2CBF0A3049E2FAD940A53FF67 —–END LICENSE—–

確定後應該就能成功注册了 :)

[oscartong]

Chrome开发者工具现在可以查看到WebSocket数据帧的内容了 :)

以前在Chrome Inspector里，我们只能够知道WebSocket连接成功/失败，但不能看到WebSocket里都传输了些什么数据。现在RIM为WebKit提供了一个patch，允许开发者查看WebSocket数据帧的内容，并表示有数据的流动方向。

若想试试这项新功能，请安装Chrome Canary或最新版本的Chromium。

[oscartong]

jsconsole系一个网页版的js调试器，效果和Chrome Inspector的Console相似，可以：

执行js并查看执行结果

记录过往执行过的js供用户再次使用（刷新页面后之前的记录也不会丢失）

显示Object和Array的内容

输入时有代码提示，按Tab自动补全

...

其实在桌面浏览器上就没什么必要用这个工具了，本身浏览器就自己带有调试器。这里主要可以用来在mobile safari（iPad等）上测试一些js代码，很方便快捷，不用自己另外部署个页面来调试 :)

[oscartong]

How to use code template in WebStorm

每天打重复又重复的代码，不仅效率低下而且容易让开发者心情烦躁，说不定bug都会多几个。幸好我们的IDE一般都有代码模版的功能，可以让你把常用的代码片段存起来，需要用这些代码片段的时候，只需要输入定义好的关键词，替换片段里定义的变量即可。

我们这里说说WebStorm里怎么创建代码模版：

打开Preferences > Live Templates

新建一个代码模版

输入触发关键词、模版描述、和模版格式，其中变量用“$变量名$”这种格式定义

最后记得选择模版应用的场景

OK，保存

模版定义好后，输入关键词按TAB，WebStorm就会自动生成我们模版定义的代码 :D

[oscartong]

Google Drive 初體驗

今朝收到google的郵件，說我的drive已經開通���以使用了，drive除了網頁版，還提供了mac, pc, ios, android客户端，基本上體驗和dropbox差不多，安裝後會自動同步drive上的文件到本地。另外開通google drive之後，訪問docs.google.com也會自動跳轉到google drive。

[oscartong]

[Python] How to slice unicode string in byte

比如有这样的一个字符串：myUnicode = u'hey这是一个测试'，其中混杂了英文（每个字符一个字节）和中文字符（通常系每个字符三个字节），若你想剪切前10个字节，并自动忽略掉无效字符（10个字节刚好将“一”字拦腰截断），可以这样写：

myUnicode.encode('utf-8')[:10].decode('utf-8', 'ignore')

> u'hey这是'

[oscartong]

John Resig: I've been doing a lot of work, lately, with JavaScript inheritance - namely for my work-in-progress JavaScript book - and in doing so have examined a number of different JavaScript classical-inheritance-simulating techniques. Out of all the ones that I've looked at I think my favorites were the implementations employed by base2 and Prototype.

...

[oscartong]

Have you ever wanted to add a Save as… button to a webapp? Whether you're making an advanced WebGL-powered CAD webapp and want to save 3D object files or you just want to save plain text files in a simple Markdown text editor, saving files in the browser has always been a tricky business. Usually when you want to save a file generated with JavaScript, you have to send the data to your server and then return the data right back with a Content-disposition: attachment header. This is less than ideal for webapps that need to work offline. The W3C File API includes a FileSaver interface, which makes saving generated data as easy as saveAs(data, filename), though unfortunately it will eventually be removed from the spec. I have written a JavaScript library called FileSaver.js, which implementsFileSaver in all modern browsers. Now that it's possible to generate any type of file you want right in the browser, document editors can have an instant save button that doesn't rely on an online connection. When paired with the standard HTML5 canvas.toBlob()method, FileSaver.js lets you save canvases instantly and give them filenames, which is very useful for HTML5 image editing webapps. For browsers that don't yet support canvas.toBlob(), Devin Samarin and I wrote canvas-toBlob.js. Saving a canvas is as simple as running the following code:

canvas.toBlob(function(blob){ saveAs(blob, filename); });

I have created a demo of FileSaver.js in action that demonstrates saving a canvas doodle, plain text, and rich text. Please note that saving with custom filenames is only supported in browsers that either natively support FileSaver or browsers like Google Chrome 14 dev andGoogle Chrome Canary, that support <a>.download or web filesystems via LocalFileSystem.

...

[oscartong]

How to download a link (in Chrome)

在浏览器里，如果你直接点击一个链接，一般的默认行为都是打开这个链接（本窗口或新窗口），但如果开发��的��意是让用户下载链接指向的资源，则需要用户自己点右键去选择另存为。

现在chrome的a标签支持download属性，允许开发者改变浏览器的默认行为，指定该资源是用来下载的而不是直接打开的，点击带download属性的a标签，浏览器会弹出另存为窗口，让用户选择保持路径和修改文件名，开发者也可以指定download属性的值作为下载资源的默认文件名，例如：

<a download href="http://web.qq.com">WebQQ</a>

<a download="webqq.txt" href="http://web.qq.com">WebQQ</a>

download属性的详细描述可以看看这里 :)