jQurey 套件

masonry

用 jQuery 來實作一種 css float 無法達成的 float 方式,會自動往上補。在 resize 時還有特效,很酷…

應該會有特殊情境需要用到~

http://elrte.org/ elRTE

用 jQuery UI 開發所見即所得(WYSIWYG)編輯器,完整度剖高,乍看之下有 tinymce 的感覺。

基於 jQuery 速度跟大小與發展上應有他的優勢在。

他還另外開發了一套 elFinder 有綁在編輯器裡面的檔案管理功能,也很強大完整。

支援各式檔案操作甚至可以拖曳~我自己找過元件來兜過,當時沒有發現他,不然應該會基於他來改~

http://thrivingkings.com/apprise/ pop dialog 工具


現在系統開發上都用 jquery prompt 來實作,主要是有參考樣式作為基底,功能上與這個大圖小異,

看喜歡哪種樣式與 api 選用囉~

leanModel http://leanmodal.finelysliced.com.au/

彈跳視窗,類似 jQuery dailog 不過樣式蠻漂亮的,且似乎對製作輸入的介面很親和…

dropkick http://jamielottering.github.com/DropKick/

自製的下拉式選單,可以用來替代 select ,因可具有 html 的特性與樣式。

只是不會因應捲軸位置而往上擺。

 

資料來源:

web-based shell ansi/vt100

ajaxterm

Python implement

shellinabox

http://shellinabox.googlecode.com

http://chunchaichang.blogspot.com/2011/04/shellinabox-linux-shell.html

貌似好用很多,只是我想改他但不是冠希…

介紹一下里面一個參數, –service,預設沒下等同於 –service /:LOGIN

這個參數的說明


SERVICE := <url-path> ':' APP
APP     := 'LOGIN' | 'SSH' [ : <host> ] | USER ':' CWD ':' CMD
USER    := 'AUTH' | <username> ':' <groupname>
CWD     := 'HOME' | <dir>
CMD     := 'SHELL' | <cmdline>

還蠻有趣的一個定義方式…,他讓你可以定義多種 shell ~

預設是一進去首頁 http://shell/ 就會預設登入該台伺服器的 /bin/login 並且開啟 shell。

記得加上 –css /usr/local/share/doc/shellinabox/white-on-black.css 改成習慣的黑色背景…

但是如果你想要用 ssh 登其他伺服器,可以設定一些其他的 APP,

例如 想要用 http://shell/mlwmlw 登 mlwmlw.org 就可以這樣下參數

–service /mlwmlw:SSH:mlwmlw.org –service /:LOGIN

而且也可以加入數個 service

但是…用 CentOS 好像指定 SSH 會有一個 bug 按照下文把

http://code.google.com/p/shellinabox/issues/detail?id=50

shellinabox/service.c 的 -oVisualHostKey=no 註解掉重編就能跑了。


$ /usr/local/bin/shellinaboxd --port 443 --cert /tmp \
  --css /usr/local/share/doc/shellinabox/white-on-black.css

other

想要用 node.js + websocket 實作一套..

目前已經用 libssh 寫了一個 node.js 的 module..還堪運作,配上 socket.io 來傳資料,接下來要瞭解一下 ansi 的 terminal code~在接上 shellinabox 寫好的 v100 的轉碼介面~

http://wiki.bash-hackers.org/scripting/terminalcodes 可以先看一下入門文章= =

Ansi/vt100 入門指引…

Ansi/Vt100 是比較常見通用的 控制碼 協定,好像在 bbs 跟 ssh 上都是用這個在表示的,這控制符號除了可以改變前景背景顏色,好像還可以表示滑鼠游標跟輸入游標等等的狀態。

tput 是 linux 上的一個指令,算是一種是用來查詢 終端符號 資料庫的指令,因為 terminal 的協定有很多種阿~每種的值都有點不一樣,但是他們的目的跟功能應該都大同小異的,所以這指令能偵測你現在終端用的協定幫你用字傳查出你想要的控制碼。

   _/_/  _/_/   _/    _/       _/
  _/  __/ _/   _/     _/ __/ _/
 _/      _/   _/_/_/  _/   _/
這蠻有趣的…玩一下= =

jquery checkbox tree

有幾套不錯的,這種類的 plugin 有幾個點可以比較,樣式、選擇後影響子節點的方式、維護。

描述一下關於這個套件需要實作的點。

  • 點上層下層應該被全選,下層全取消上層也會被取消。有相依關係。
  • 如果下層被沒有被全選,上層應要有中間的狀態,一般在安裝軟體套件會用框框表示。

但這種模式並不能滿足所有的需求,我的需求是我選了一個點以後,不一定要連動下面的層級,或者是選了一個點以後也不要連動上面的層級。依照這種都不需要連動的概念,實作上就完全沒辦法輔助到使用者。所以我想要用第三種狀態來表示一個概念,來修改一套既能不連動又可以輔助的 plugin。

使用概念如下圖:

單點包含下層全選,雙點只有下層取消,三點包含下層全取消。

一套是 http://code.google.com/p/checkboxtree/ 關於事件與設定的功能頗完整,但是沒樣式,沒特別要求就用他吧,簡單且完整性高,參數丟法不太喜歡。

另外一套是 checktree  http://project.yctin.com/checktree/

這個版本是經由第三方修改一些 bug 的因為原版沒維護了,裡面有寫歷史專案的追溯,不喜歡可以自己找原版。這版本有支援半選取的狀態,且有樣式,但輔助函式過少。

有個小 bug ,只有一個元素然後很多層的時候會發生半選取算法錯誤,因為要下而上觸發而不是由上而下~

125 行
$(this).parents(“ul”).siblings(“:checkbox”).change();

改成
$($(this).parents(“ul”).siblings(“:checkbox”).get().reverse()).change();

這套樣式與功能超多,因此略閒肥大,不是我的菜…但是介面可以參考。

http://wwwendt.de/tech/dynatree/doc/samples.html

css 定位模型

最近覺得自己講話、描述越來越不清楚,所以想找幾個曾經沒足夠能力用口頭來描述的概念,用文章的方式重整一下自己的條理。

今天的主題是 css 定位模型,主要範例為此網站 http://www.barelyfitz.com/screencast/html-training/css/positioning/

他內容有十個 tab 幾乎將所有較可能發生的情況都舉了一次例子,所以是一個適合說明的範例。

我想要用兩種方式描述,一種是整理成簡短適合口頭介紹 定位模型的解釋。

另一種是完整定義清楚的解釋。 Continue reading…

Fronteers 2010 Conference

前端工程師的會議,有很多關於網頁設計的技術分享,雖然已經2011了…

http://vimeo.com/16670431

This is a compilationvideo of The Fronteers 2010 Conference. Fronteers 2010 took place on Thursday 7th and Friday 8th of October, in Pathé Tuschinski in Amsterdam.

I record all 14 sessions and put them online for you to watch. See links below:

Thursday 7th of October 2010:
The Design of HTML5 by Jeremy Keith
vimeo.com/​15755349

JavaScript like a box of chocolates by Robert Nyman
vimeo.com/​15758849

Vector Graphics for the web by Brad Neuberg
vimeo.com/​15773144

A CSS3 Talk by Håkon Wium Lie
vimeo.com/​15775937

Progressive Downloads and Rendering by Stoyan Stefanov
vimeo.com/​15981041

CSS Workflow by Jina Bolton
vimeo.com/​15982903

Reusable Code, for good or for awesome! By Jake Archibald
vimeo.com/​15984466

Friday 8th of October 2010:
Real-World Responsive Design by Stephen Hay
vimeo.com/​15986231

The State of HTML5: inaugural Address by Paul Irish
vimeo.com/​15988666

Creating lifelike design with CSS3 by Meagan Fisher
vimeo.com/​15991551

High Performance Javascript by Nicholas Zakas
vimeo.com/​16241085

HTML5 Accesibility: is it ready yet? By Steve Faulkner & Hans Hillen
vimeo.com/​16243415

The renaissance of Browser Animation by Cameron Adams
vimeo.com/​16246110

Reasons to be cheerful by Chris Heilmann
vimeo.com/​16249024

For an overview of all the sessions:
vimeo.com/​channels/​fronteers10

For more information:
fronteers.nl/​congres/​2010