almost 4 years ago

服貿網摘:http://fumao.digest.cc

太陽花學運318發動以來已創下了台灣歷史上許多新紀錄,其中包括驚人的網路動員與快速的資訊流通。在410光榮退場畫下逗號的同時,有很多人希望能將這歷史上重要的一章保留下來,例如中研院便積極地保留議場內外的標語、宣言、畫作等創作文物,作為未來回顧歷史的重要史料。

我們都知道,PTT的文章沒有被板主「m文」予以保留的話,將會隨著時間的流逝,在未來的數個月後被系統自動清除。身為網路世代的一分子,經歷了這次學運在網路上的另一個戰場,當然希望這些重要的文章也能夠保留下來,於是我製作了「服貿網摘」,收錄本次事件在批踢踢兩個重要的看板(八卦板、服貿板)以及其他網路媒體、社群網站上的重要文章。

當時在板上不斷被貼出的現場最新情況,以及許多一一被揭露出的政府奧步,或是大家對服貿議題的討論與辯證,許多文章不斷被推著「幫高調」、「中肯」等推文,最後卻逐漸被淹沒在文章海中成了過眼雲煙,這是非常可惜的一件事。而「服貿網摘」還有另一個功能,每篇文章都能歸類到相關的分類中,未來要檢視時只需直接瀏覽該分類,即可查看所有性質相同的高度關注文章。

我花了一週的時間將317開始板上所有推文數高的文章都看過一遍,並將有價值的文章挑出來各自分類:

  • 打臉文」把所有臉已經腫到像神豬的文章都列出來,一次看完全部真的很過癮!
  • 苦中作樂」則蒐集了這次學運發展過程中,鄉民無限的創意與令人發噱的時事變化。
  • 可恥的奧步」將所有政府或統媒的卑劣手段都彙整在一起,看過這些內容你還能不氣憤嗎?
  • 各界聲援」將所有知名人士與專家學者站出來聲援太陽花的紀錄整理出來,這麼多有名望的人相挺,難道太陽花的正當性還不夠高嗎?
  • 全民運動」將不分行業支持這次運動的行為一一保存,台灣人這次這麼團結,政府的所作所為真的完全沒錯嗎?
  • 遍地開花」彙整世界各地的支持聲浪,這麼多旅外同胞都勇敢站出來發聲了,馬政府還是一意孤行嗎?

還有其他類別,就等各位一一去查看了。文章數量非常多,未來網站會加上搜尋功能,如果您有發現有價值但沒被收錄的文章,歡迎各位自行新增!
(註:文章列表最上方可以選擇排序方式,方便直接以各種指標閱讀文章)

 
almost 4 years ago

自從去年七月手機從 2.3.5 升級到 4.1.2 之後就一直覺得越來越不順暢,用越久感覺越卡越頓。且中華電信客製版也裝了一堆用不到的 apps,導致 S2 少少的 2G app 空間一直爆滿,索性就在網路上查了些資料大膽進行刷機…
(目前刷了 CeleriterRom 2.7,即 Android 4.4 KitKat,順暢使用中)

S2 刷機流程

此流程適用於 從未刷機過第一次想嘗試刷機 的 S2 使用者

刷之前有先把 app 空間從 2G 改成 6G,如果單純只是想安裝其他 ROM 的話可以直接從第 3 步驟開始:(第 1 步驟只是個人備份時的小筆記,可忽略)

  1. 備份

    • 快速備份 LINE 所有紀錄:http://mobileai.net/2013/10/27/line-backup-and-restore-without-root/
    • 備份檔案:
      • /GT-I9100/Phone/LINE_Backup (上面那種方法失敗時的備案)
      • /GT-I9100/Phone/DCIM/Camera
      • /GT-I9100/Phone/cwmoney/backup/cwmoney_ex_db_20140310.sdb
      • /GT-I9100/Phone/Music
      • /GT-I9100/Phone/Pictures/Screenshots
      • /GT-I9100/Phone/data/com.anod.calendar/backup
  2. 先修改分割區將 2G 安裝限制改為 6G

  3. 下載 CWM Recovery

  4. 下載 CeleriterRom (4.4 KitKat)

  5. 將上面兩個步驟的檔案都放到 SDCard 中,先雙 wipe

  6. 進原廠 recovery(3e) 用臨時 CWM 安裝支援 4.4 的 CWM(v6 以上),再用裝好的 CWM 刷 CeleriterRom,最後再雙 wipe 並恢復原廠

 
almost 4 years ago

前陣子我的 Google Chrome 在更新之後狀態列就莫名消失了,對我來說平常上網時能隨時 preview 有瀏覽意圖的連結的 URL 是非常重要的功能,因此狀態列消失著實造成了一點困擾。

查了一下發現這個狀況似乎是個已知的問題,但網路上的解法[1][2][3]在我的電腦上都沒辦法成功讓狀態列恢復,後來乾脆直接寫了一個 extention 來顯示 link href。

Source Code

https://github.com/dylango/DStatusBar

Download crx File

https://github.com/dylango/DStatusBar/blob/master/DStatusBar.crx?raw=true

Screenshot

DStatusBar Screenshot

Known Issues

  • hover target 的 tagNameA 時不會顯示(例如 <a href="..."><img src="..."></a>,即 <a> 裡還有包其他 tag),有空再來修
 
about 4 years ago

無聊來練習一下 Sass & Compass,也是第一次用 CSS3 來畫圖。先挑了張比較單純的圖案來試試,探險活寶(Adventure Time)的老皮,大部分都是用 border-radius,只有小地方用到 rotate 和 scale,其餘沒什麼特殊技巧…

See the Pen Jake in CSS3 by Dylan Chang (@dylango) on CodePen

Read on →
 
over 4 years ago

Prefix

  • IE: -ms
  • Firefox: -moz-
  • Chrome: -webkit-
  • Safari: -webkit-
  • Opara: -o-

顏色

  • rgb(<red>, <green>, <blue>)
  • hsl(<hue>, <saturation>, <lightness>)
    • hue:色調,表示色盤角度
    • saturation:飽和度,100% 表示最高
    • lightness:亮度,0% 最暗,100% 最亮,50% 為 normal
  • rgba(<red>, <green>, <blue>, <alpha>)
    • alpha:透明度,0 完全透明,1 完全不透明
  • hsla(<hue>, <saturation>, <lightness>, <alpha>)

圓角

  • border-radius: <value>
    • 1 個值:四個角
    • 2 個值:左上右下、右上左下
    • 4 個值:左上、右上、右下、左下

陰影

  • box-shadow: <水平位移> <垂直位移> <模糊半徑>[ <擴散距離>] <顏色>[ inset]
  • text-shadow: <水平位移> <垂直位移>[ <模糊半徑>]
  • 可設定多組,以 , 分隔

漸層

  • linear-gradient([<orientation>, ]<color>, ...)
    • orientation:預設以垂直方向呈現,設定特定角度可改變方向,如 45deg
    • color:可設中斷點,多加一組 px 單位或百分比的數值即可,如 #CCC 20%
  • radial-gradient(<color>, ...)
  • (tool)

多重背景

  • , 分隔多組設定即可

Selector

  • :first-child:第一個元件
  • :last-child:最後一個元件
  • :only-child:自己是唯一子元件的元件
  • :target:目前 URL 的 hash 指向的元件
  • :checked:目前勾選的 checkbox
  • :nth-child(x)
    • x = 1:即 :first-child
    • x = 2n 或 x = even:即偶數項元件
    • x = 2n+1 或 x = odd:即奇數項元件
    • x = 3n:即 3 的倍數項元件
    • nth-last-child(x):反向操作,從底部算回來
  • direct descendant:>
  • negation::not(<selector>)

轉換

  • transition: <duration> <CSS property>[ <time-function>][ <delay>]
    • duration:單位為 s 或 ms
    • time-function:linearease-inease-outease-in-out,或用 cubic-bezier() (tool)
    • 可設定多組,以 , 分隔

Box Sizing

  • box-sizing: border-box | content-box
    • context-box:預設值,先算出 block 寬度再加上 marginpaddingborder
    • border-box:反之

變形

  • trasform: <transform-function>
    • rotate(x):以參考點為中心軸 2D 旋轉 x 度
    • skewX(x):以參考點為中心軸沿著橫向傾斜 x 度
    • skewY(x):以參考點為中心軸沿著縱向傾斜 x 度
    • skew(x,y):以參考點為中心軸沿著橫向傾斜 z 度、縱向傾斜 y 度
    • scaleX(x):由參考點橫向縮放 x 倍
    • scaleY(x):由參考點縱向縮放 x 倍
    • scale(x,y):由參考點 2D 橫向縮放 x 倍、縱向縮放 y 倍
    • translateX(x):由參考點橫向移動 x 距離
    • translateY(x):由參考點縱向移動 x 距離
    • translate(x,y):由參考點 2D 橫向移動 x 距離、縱向移動 y 距離
    • matrix(a,b,c,d,e,f):transformation matrix (tool)
    • 角度單位:degradgrad
    • 可設定多組,以空白分隔

Flexible Box Model

  • display: box; 可使子元件水平排列(如傳統使用 float 效果),子元件預設會延展成父元件大小,若要控制子元件大小需設定其 box-flex
  • box-flex: 0; 元件不會延展,設為 1 或大於 1 則會延展至填滿可用空間為止(亦可藉此設定比例)

字型

@font-face {
    font-family: myFont;
    src: url('font.ttf');
}