最近遇到一個 CSS bug，主要是在 Chrome 上發生，一開始是有些元素在做 CSS Transition 時會不見，而且有時候 transition 結束還是看不到，要隨便作一些事情觸發瀏覽器 redraw 東西才會回來，作什麼事情又很不一定，而且去 access clientWidth 之類的屬性來想要叫瀏覽器重新畫在這個 bug 上是無效的，後來在網路上找到避開的作法：
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
加上這兩個 CSS 屬性就可以讓會消失的元件不要消失了，後來才知道之前也有同事處理過一樣的問題。然後，接著又遇到另外一個神秘的現象，因為做的東西有投影片播放，動畫 transition 換頁和 video，加起來就是要作一個 transition 讓 video 進入頁面，然後自動播放的機制，結果就發生怪事了，如果 video 沒播過，還沒有 cache 的話，會發生 video 消失的狀況，一開始以為是抓檔案 loading 到真的開始播放之中間的這段時間，Chrome 實作不好，會讓影片節點變成透明的，然後因為其他的問題讓影片卡在那個狀況，所以就變成一直看不到。
後來花了很多時間測試，最後發現影片根本就有在播，只是東西都看不到，進一步發現根本和上面講的是同一個 bug，加上同樣的 style 後，影片就不再消失了，而且連那開始 loading 到開始播放間的那段時間，畫面也完全不會消失了，就從原來給它的 poster 接到真的影片，一切都很順暢。
至於什麼情況下會有這個 bug 出現，目前只知道是position: absolute;的元件加上 transition 後有發生的機會。
Ref: Element disappearing during transition in Chrome
昨天參加 Happy Designer Mini #3，有人介紹了 lungo 這個 framework，說到裡面一些 convention，可以用<header>就產生頁首，<footer>就是頁尾，然後主要內容就是 article，不過對於 article 的使用其實我算蠻有意見的。畢竟 article 的語意還是比較偏文章，對於應用程式來說，主要的區塊應該要用 WAI-ARIA 的role="main"才是，不過其實這篇文章想要說的是 HTML 5.1 的 Draft 其實已經提出了<main>這個標籤，用途就和role="main"一樣。
而除了<main>之外，其實還有一個新的<data>標籤，這個標籤是用來代替以前在使用 microdata、microformat 之類的格式化資料時，為了寫機器讀取用資料時，在行內加上的<span>標籤的，<data>本身歸類在 Phrasing content，可以想成是display: inline;的使用方式，雖然第一眼看起很像是區塊等級的就是了。
至於我為什麼會注意到有這些新標籤呢，其實我也沒閒閒沒事去關注 HTML 5.1 Draft 更新啦，是因為 html5.vim 會有人來報說有新東西要加，意外的好處～
這次 COSCUP 因為講的是 Vim 的主題，就想說要用 Vim 來做投影片，第一個想到的是 OSDC 常客 Ingy 做的 Vroom，這個套件也是他幾年前在 OSDC 用的，因為當年有聽他的 Talk 所以有印象，還算蠻簡單學的，安裝可以用 cpan 或是 cpanminus，然後看他的文件格式就可以開始寫投影片了，我還做了一個 Vroom syntax，因為看著單色的文件看久了還蠻煩躁的，我想未來也有人會想要用 Vim 來做簡報，所以就花了些時間把它弄的比較完美，以後應該就會有其他人用的上了吧。
COSCUP 從 2006 年開始，到今年已經是第 8 屆了，小弟有幸每屆都有參與到，最近幾年還開始幫忙紀錄組攝影，不過今年可以說是最深刻的一屆了，所以特別想寫一篇文章記錄，剛好參加這麼多次都沒寫過。相信大家都知道，為了因應逐年成長的參與人數，今年我們終於離開中研院，到了台北國際會議中心（TICC），也就是脫離學術單位保護傘了，而且對應場地，一口氣開了八軌的議程，距離 OSCON 也只差 10 軌而已（咦）。
從中研院離開，意味著記錄組可能需要自己處理錄影設備，而且因為一口氣成長到八軌，所以一下子從不用準備錄影設備，變成到要生出至少 8 組設備，而且剛好 8 組是有風險的，整個就是非常刺激，還好有 Scott 幫忙，才可以從文化大學和他學長那邊借到這麼多設備，不說主廳的設備，我們借到了 14 台 Full HD 硬碟式錄影機，可以交互使用，錄個幾場就先把檔案抓出來，減少後續處理的麻煩問題，不過為了這些設備，組員人數一口氣成長了五六倍，還有本來是要負責攝影工作的日落都被抓去管理設備，真的是很辛苦，連我本來不預期會有事前工作的，都跑去幫忙搬了幾次設備，還好今年我一個月前就把投影片準備好了，不然最後那兩週應該會爆炸吧。結果撤場時，因為相關經驗不足，又發生一些意外狀況，真的是非常的混亂。
攝影的部分，延續 OSDC，這次有海哥幫忙攝影指導，攝影師人數也比往年還要多一些，以前三軌一兩個人其實勉強跑一跑體力還是可以全部 cover，可是都排了四五位攝影，拍完兩天也還是很累，算線性成長的話，8 軌應該要個 13 位吧，不過其實沒有這麼多人力，就算有人能幫忙，大會也沒辦法給這麼多工作人員名額（即使是義工，成本也是很高的），結果就是幾乎都是一次負責兩個廳，而且排班表時不清楚地理位置，還排出悲劇班表，然後有人就照表操課，一直在二樓兩頭跑，而且場地狀況其實對攝影不太友善，其中最大的問題就是燈關成投影模式時，講者那邊幾乎是全黑的，這個狀況在場勘時完全沒考慮到，館方也沒說，雖然有燈光可以打，不過都是要計價的，加上主廳總共要 10 顆兩天，約會臨時多兩萬塊支出，且不是馬上說要亮就亮的，畢竟不是上帝。結果就是只能用閃燈打光了，其實我是不太喜歡打閃燈的，在中研院幾乎只有國際會議廳我才會用，而且其實我對他很不熟，不過一切就是這麼巧，因為感受到不用閃燈的限制，所以今年年初去日本才買了現在用的這隻閃燈，其實還在摸索中，大概只是到可以邊拍邊調整的程度，加上剛好開始有偶爾玩 RAW 檔，目前還在嚴重需要修的才去找 RAW 來處理的程度，不過光是這樣就可以以前只能看照片就這樣黃黃的狀況幾乎是不再發生了，其實還蠻有成就感的。
講到燈光的部分，其實錄影的影響更大，所以等正式放出影片後，發現講者都黑的請不要打我們 m(_ _)m，再來說說和錄影有點關係的轉播部分吧，轉播其實很麻煩的，尤其是想要做多軌 + HD 轉播，所以這兩年都只有主廳的 SD 轉播而已，不過今年有點悲劇是網路發生悲劇，好幾場的轉播就只能用 3G 撐，還好今年還是 SD 訊號，要用 HD 訊號轉播有兩個關鍵問題，一是設備、二是網路服務，以我們目前在 YouTube 上發芽的情勢來看，就是只能用 YouTube Live，只是限制一直以來都很嚴，本來是要商業合作，後來有放寬到美國的非營利組織，前陣子才放寬到訂閱數一千人以上的頻道，這目標我們一直沒達成，所以只能用 Hangout Live，但是它只能抓 Webcam 的畫面，或是可以偽裝成 Webcam 的裝置（UVC/UAC），YouTube Live 則是會有 stream 的輸入點可以給其他轉播軟體用，甚至有些硬體可以直接連網路上傳的，不過就在 COSCUP 前一天，YouTube 說只要訂閱人數超過 100 人就可以申請 YouTube Live 了，可惜我們是在會後才知道這件事，沒機會順便就跑跑看，至少 HD 轉播的一大障礙已經突破了，只要明年還有這些設備可以用，就有希望做了。另一個說多軌轉播有困難的原因，其實就是電腦要很多台，而且要處理 HD 訊號需要的機種以也不能太差，要借到這麼多台其實難度還蠻高的，雖然說場地費都不知道可以買幾台了...
今年我依然是講者，這次很幸運的我在會議開始前一個月就把東西作完了，不是一個月前開始動工，是完工，其實這樣是有點太早，因為等會議快到時，會發現腦袋裡面的記憶都不見了，需要花不少時間暖機，很幸運的點是因為紀錄組的事前工作增加很多，如果像往年一樣，最後一兩週還在調整的話，時間根本就不夠，不過結果我內容太多，演講超時～，演講內容則是以 Vim 為主，以前幾乎都是 Web 和前端相關的，這次似乎有感覺會後迴響比較大，不知道是不是因為現場沒桌子沒網路沒電源，大家被迫聽台上的講話的關係XD，不過其實還有個問題也跟著消失了，不知道有多少人注意到，就是佔位問題，不知道是因為沒桌子比較不方便，還是覺得 TICC 治安比較不好，今年佔位的情形很少了，其實我想追根究柢，沒人佔位是因為位子的資源不再那麼多，沒了電源、有線網路，那個位子就只是個位子，加上位子還蠻充足的，所以佔位情形幾乎是沒有了，個人覺得這是個好方向。話說今年主廳第一次有講者用的顯示幕了，不知道你們有沒有發現。
Pingooo 說過，來參加 COSCUP 應該有 40% 是用在交朋友，雖然參與這些社群研討會一路下來認識了不少朋友，不過其實這兩年有點...反正就是那匹人的狀況，認識人的成長速度趨緩很多，不過今年倒是比較有感覺認識到一些新朋友，像是之前我幫忙 patch COSCUP 官網時聯絡的 Evelyn，只是第一天他跟我打招呼時我還沒想起來，另外還有紀錄組裡面好幾位新面孔：海哥、Anna、文聖 等，其實紀錄組新人多很多，但是沒什麼時間去認識，像是錄影組的幾乎都沒認識到。然後我這幾年幫忙研討會頻繁到連桑格書店的人都跟我打呼了，只是我沒發現原來都是同樣那兩位來顧攤，真羞愧，下次應該交換一下名片，記一下人的，其實他們的書有些有興趣，只是沒什麼時間讓我考慮要不要買。
其實這邊要藉這篇文章的機會感謝 Pingooo，當年第一屆我就是被他找去講 Ajax 和 Web 2.0 的，其實那個時候根本還搞不清楚是什麼場子，因為有在寫 blog 分享所以被找去的，過兩年回頭才發現原來當時是這麼多前輩的場合，不過沒有那次機會，我就不會認識到社群研討會，雖然當時有參與一些社群活動和聚會了，只是和研討會比起來差距還是很大的，而且當年沒被找去上台的話，現在可能也很難變成常常跑上台的狀況。
話說今年也是拿了三張 badge，工作人員，講者之外，還有一張一般會眾的，所以最後一部份就要來用會眾的身分講點感想，其實我有機會真的聽的只有 lightning talk 而已啦，連本來主要想聽的蝦蝦的分享都只有聽一半而已，今年的 lightning talk 真的是非常刺激，雖然最後是全員沒超時，不過戲劇性十足，除了最後一位之外都是真的有講些東西，最後一位的玩法其實我之前就想過會發生，因為 lightning talk 完全沒有限制，先搶先贏，所以我就想過可能會發生這種事情，第一次出現其實效果還不錯，不過希望未來不要再有人來這樣搞了，因為第二次就不好玩了，而且會有反效果的～～
最後，TICC 這個場地其實還不錯，就是很貴，有些技術落後，我們第一次用這個場地也有很多問題事前沒注意到，讓人很想在挑戰一次，不過我也從理性上知道，短時間要再回來這邊非常有難度，不過還是期待在次挑戰這種商業研討會等級的場地啊。
附註：今年記錄組的照片總數約五千多張，還要等海哥處理，我的相簿雖然已經上線，不過今年規模很大，我所包含到的範圍沒很多，所以還是請期待官方相簿上線喔！
今天在 COSCUP 講的 JavaScript on Vim 投影片因為是用 Vroom 做的，所以沒有 PDF 可以上傳到 SlideShare 和 Speaker Deck，不過他有內建生成 html 版，所以我開了個 gh-pages 來放著讓大家看，按鍵盤空白鍵是下一頁，Backspace 是上一頁。
這次有超過時間，事前練習也超過一點，不過這次正式上場講的還比較慢，結果總時間就不夠了，算是意外，所以只好補充一下最後面我想要說的。如果你要學 Vim Script，除了看教學外，有個很重要的東西就是 Vim Document，一定要學著如何閱讀，包括怎麼搜尋、怎樣在文件連結中穿梭等等，Vim 的文件是我看過的程式文件中數一數二詳細的，幾乎是把 Vim 的所有細節都寫在內了，有些時候你的問題可能用 google 搜尋不到，但是其實文件內都已經有記載了，所以學習讀他真的很重要。
會後有聽眾跑來跟我說 Vim 可以輸入:help ctrl然後還不要按 enter，改按 CTRL + D，會變成用 ctrl 當關鍵字搜尋所有的 help document 連結關鍵字，我覺得這功能應該是蠻有幫助的，所以在這邊補充一下。