Tedious Life

窮極無聊，試著變成感受生活的人。

[ruoshin]

CSS垂直置中之二：absolute

第二種常使用到的置中法是在物件有 position: absolute 的情況。

1. 母元素

position: relative;

在要垂直置中的物件的母元素加上 relative，這是為了要讓物件本身依照母元素來定位，有使用 position: absolute 就要在外層設定 relative，否則物件本身會沒意外的飛出整個 layout。

2. 要垂直置中的物件本身

position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;

將四個方位都設定為 0 ，margin 也是四邊設為 auto 就可以對母元素垂直置中。因為都把四邊設為 0 了，這個物件本身會從最外邊開始定位，所以到這裡會出現變成填滿母元素的狀態。通常也有蠻多人用這招來填滿特定區塊。

3. 設定物件寬高

width: 100px; height: 100px;

要成功垂直置中，這個物件必須有寬高，再搭配 margin: auto 的特性，會平均分配並自動幫你算出從四邊開始到物件的邊距，如此一來這個物件就會置中了。

See the Pen Using position: absolute to align center by ruoshin (@oc0706) on CodePen.

[ruoshin]

CSS 之 table 離奇的寬度失控

對 table 實在非常不熟，之前寫過 email template 又是另一個故事了。最近在工作上使用 table ，卻無法控制寬度，不過這點只會發生在連續的英文字母上（沒有空白）

目前看到的兩種解法：

1. 設定 table 的 CSS 為 table-layout: fixed

預設值為 table-layout: auto，table 的寬度就會依照內容寬度來決定，而 table-layout: fixed 就會依照指定的寬度改變，而且可以提升效能。

當使用 table-layout: fixed 後內容有可能超出表格的寬度，可以搭配 text-overflow:ellipsis 使用，剛好以前有做相關筆記 使用 CSS 做出刪節號樣式

看看 MDN 怎麼說

auto

An automatic table layout algorithm is commonly used by most browsers for table layout. The width of the table and its cells depends on the content thereof.

fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

2. 設定 td 的 CSS 為 display: inline-block 或 display: block

因為 table 的 td 本身有 display: table-cell 的特性，寬度會被內容撐開，所以只要改掉 display 的屬性就好。發現通常樣式上無法修改，有一定機率都是 display 的問題（不負責任說法）

兩種方法選一個修改就好，不過應該是第一個方法比較合理。之後就可以快樂的設定 width 了。

懶人包重點

table 的 CSS 改成 table-layout: fixed 或是 td 的 CSS 改成 display: inline-block

若是修改 table 就把 width 也寫在 table，反之亦然。

只會發生在連續的英文字母上（沒有空白），有空白跟中文字在表格內的話基本上不會遇到上面的問題。

[ruoshin]

canvas 奧妙之輸出圖片

一直還沒有什麼機會與 canvas 正式接觸，今天工作中遇到要把 chart 輸出成圖片的功能，沒想到竟然使用一個 method 即可！嚇死我這沒見過世面的鄉巴佬！這麼方便真的可以嗎！

將 canvas 轉為 Data URL

// canvas 起手式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ... // 轉成 data URL canvas.toDataURL()

若要輸出 / 下載，使用 <a> 的 HTML5 新屬性 download 即可。

</a><a href="canvas.toDataURL()" download="chart.png">下載圖片</a>

萬用大字典

MDN - HTMLCanvasElement.toDataURL()

[ruoshin]

Diffused drop shadow

上禮拜 Invision 發表了一篇關於 diffused drop shadow 的教學文，記錄一下。這種有立體感的影子在 material design 中的應用非常廣泛。

原文：HOW TO MAKE THE PERFECT DIFFUSED DROP SHADOW

想要有精緻的 diffused shadow 訣竅就是：把本體跟影子分開來做。

影子本身範圍要比本體小一點，並且可以疊兩層顏色，一層是陰影的灰階，再加上一層物件本身的顏色，能夠模擬出自然光照的感覺。結果意外單純！

不過我對這種影子沒有特別喜歡，除非想要較有氛圍的呈現方式，不然好像很難應用於網頁之中，尤其是 mobile app 更難想像。 在參觀 Daily UI 的作品時有發現各位設計師大大大量應用（到底多大），但個人感覺用起來反而更像平面作品，很少看到應用自然的或是互動效果。

Detail Collection

Podcast Homepage

放了兩個蠻喜歡的應用，雖然根本不是 drop shadow （額）。發現似乎要有適度的空間及間距畫面才比較不突兀，還有應用在大塊的物件上比較適合。

不過影子的掌控這種細節本來就很難，就像畫鼻影一樣。

[ruoshin]

抱著感恩、讚嘆的心，回顧當初被驚艷的瞬間。

初次使用 Tumblr 的 link ，分享規劃已久的 project —— Weebmark 。名稱就是從 bookmark 演變而來（超爛）原本想要自己手動寫一個但後來發現 Tumblr 一次滿足，幾乎都能達到我的需求，所以又姍姍來遲的辦了一個。打理到一個程度來記錄一下。

總是很感謝做出這麼多出色作品的大大們，能夠讓人在灰心喪志時提醒自己的初衷，雖然自己還連一點渣都無法產出，但即使是一小絲的理念相同，或是又有什麼驚艷的小設計，就能夠替我做打氣的動作。之後會換上自己的網址，所以又要重發一篇文（超爛）

持續進行中。

想要做個題外話， Tumblr 使用下來真的很不錯，自由度很高，覺得不比 Wordpress 差（雖然還沒重度使用過 Wordpress）

不過唯一不滿的就是編輯器（這不是最重要的地方嗎）我不知道有什麼辦法可以把編輯器給拉寬一點，雖然不是什麼嚴重影響啦但就是個人習慣不佳。還有編輯器間的切換真的很 pain ，最近很喜歡用 markdown ，但又插入圖片障礙，切換到別的編輯器又格式炸毀，很 pain 。

持續習慣中。

[ruoshin]

半夜失眠無聊載了 asana 的 app ，之前都是使用電腦版 web app 。真的覺得他們做得好好哦！忍不住驚嘆第三百遍。極度喜歡 asana 的直覺操作，配色簡單但又有亮眼的漸層色搭配，無法不讚嘆！（第三百零一遍）

是近期最喜歡的 app ，想用它來管理生活雜事跟我的 serect project ，讓自己更 organized 一點。

但半夜發讚嘆文這行為好像超不 organized 。

[ruoshin]

拍灰塵

突然 too much going on ，就想要上來拍一下灰塵（毫無關聯）。不知道之前那種充滿幹勁的心現在都碎得如何？不過生命之火就是這麼回事，有時候就會突然燃起，趁還有火的時候就用力去進行。

[ruoshin]

世界就是這樣，即使單純的用盡全力，也無法如你所願。

[ruoshin]

Git安裝之新手村筆記

活了這麼久終於輪到我實際操作Git了（是在跟誰輪），以前一直想接觸卻沒時間，果然有時候只有想學的心是不夠的，還是必須有良機才能進步。

我真的沒想到安裝這個可以這麼像外星語，決定來趁有印象的時候做個筆記。身為新手村的一員，我想內容應該很適合新手啦哈哈哈哈，萬一有錯請大大鞭大力一點（是M就對了）

「我相信很多人一定也是在眼睛矇住的狀態下瞎試成功的」，若是有這種消極想法的人，這篇應該多少可以當作參考。（到底是有多消極） 裝完這個的感想是現在真的好依賴圖形化介面啊，我愛UI！（仰天咆哮）

注意

這篇是以Mac為主，其他作業系統下可能不適用哦。

現在立刻打開你的終端機（Terminal）

若有被系統要求裝Xcode就大膽地安裝吧！

Step.1 Git的好朋友——Homebrew

新手一開始大概都想說「額，所以我是要安裝哪一個？這裡也一包，那裡也一包」

這時候推薦使用非常方便的套件管理工具，是專門給OS X使用的 Homebrew，網頁內都有詳細介紹就不多說明了，而且也還沒真正仔細研究它能幹嘛啦哈哈哈。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在終端機直接貼上這一串指令進行安裝，中途會出現

Press RETURN to continue or any other key to abort

要求你按RETURN鍵繼續

To proceed, enter your password, or type Ctrl-C to abort. Password:

並且要你輸入電腦的密碼，就放膽去輸入吧。要注意的一點是在Terminal上打密碼它並不會顯示，密碼的字串也不會增加，所以它維持一個「・」是正常情況；若是覺得自己打錯了可以直接亂輸入，它就會重新叫你輸入了，千萬別緊張（在後面設置密碼時發現自己密碼打成大寫而緊張得要死的人）

輸入密碼完成它就會自動跑一大串，最後看到Installation successful!就安裝完成，可以進行安裝Git（或更新Git）的動作了！

Step.2 安裝Git

brew install git

這行指令是利用Homebrew來安裝Git，一樣是讓它放手去跑，看到啤酒圖案就完成了。

Step.3 設定個人資訊

git config --global user.name "your name" git config --global user.email [email protected]

然後要設定個人資訊，把your name換成自己的使用者名稱，email不一定要輸入email，只要是一個可以辨識是你這台電腦的名稱即可。（當然還是輸入email比較好啦）

因為指令中加了--global參數，就等於是設定全域的name及email，這動作只要做一次即可。若要在某專案使用別的名稱，只要在專案內再次輸入上面的指令，但不要加--global，就可以完成個別專案名稱設定了。

設定完後可以輸入git config --list來確認。

Step.4 產生 SSH keys

SSH key算是一個電腦驗證及授權的金鑰，關於SSH keys可以參考GitHub的教學 Generating SSH keys，非常詳細！還是以MAC為主，不過在它的頁面也可以選擇別的作業系統。

也可參考Git官方教學文件—— 生成 SSH 公開金鑰。

下面就簡易的帶過。

ls -al ~/.ssh

輸入上面的指令來確認電腦是否已經有SSH key，若它顯示「No such file or directory」是正常的，如果有id_rsa.pub或id_dsa.pub就是已經有公開金鑰了（而id_rsa或id_dsa這種沒有副檔名的檔案就是金鑰。）

ssh-keygen -t rsa -b 4096 -C "[email protected]"

再來輸入這行指令，ssh-keygen就是用來生成一個新的SSH key的指令。 當出現

Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]

按enter保持預設的設定就可以了。

接著會要求你輸入passphrase（通行碼）

Enter passphrase (empty for no passphrase): [Type a passphrase] Enter same passphrase again: [Type passphrase again]

就是類似密碼的東西啦，這邊不想設定的話可以直接enter跳過，但強烈建議要設定。然後依舊是Terminal新手貼心提醒，輸入通行碼的時候只會維持一個點的狀態，若覺得自己打錯的話也不用擔心，它會叫你try again的。

ssh-agent的部分，他可以自動管理私鑰，不用重複輸入密碼等等。

eval "$(ssh-agent -s)"

首先先啟動ssh-agent。

ssh-add ~/.ssh/id_rsa

然後新增你的key給ssh-agent，這樣基本上就完成產生金鑰及新增給ssh-agent管理了。

關於更多SSH key的內容可以參考 SSH 免密碼登入，我覺得是介紹詳細教學又算清楚的文章，雖然自己也還沒有真的搞很懂啦哈哈哈。

Step.5 新增SSH key給Github

看自己的SSH key要用在哪邊，而我是要新增到Github就以Github為主了。

先輸入複製金鑰的指令

pbcopy < ~/.ssh/id_rsa.pub

這時複製好但不會有任何反應，最好先把複製的內容貼在其他空白處，以免又要重新複製。接著在GitHub上的設定就直接照著 Generating SSH keys 的Step 4做就可以了。

點擊profile photo -> Settings -> SSH keys -> Add SSH key -> 輸入title -> 貼上剛剛複製的key（是一大串亂碼） -> Add key -> 輸入 GitHub 密碼以確認

GitHub完成設定後再回到Terminal，貼上以下指令來測試

ssh -T [email protected]

會出現警告訊息

The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

輸入yes，之後就會出現有GitHub帳號的成功訊息，這樣就是設定成功。若出現「access denied」，可以參考 Error: Permission denied (publickey)

參考連結們，都是很棒很知名的教學

但新手看不看得懂又是一回事了。（只有妳）

官方文件-安裝Git

Git 版本控制系統-簡介與安裝

Generating SSH keys（百貼不膩耶這篇）

Git 教學(1) : Git 的基本使用

大概就到這邊，安裝完之後又是另一趟旅程，但其實沒有什麼難不難，只有熟不熟悉，混熟之後就會知道他人很nice的。

然後真的又忍不住抱怨，tumblr的編輯器實在是⋯⋯這篇是用Markdown編輯，但沒想到Markdown的link不能開新視窗，就想說改成HTML編輯器去加，結果這麼一加就毀了。夠ㄌ喔！！！！難道是不知道不能隨便換編輯器的我太蠢嗎嗚嗚

[ruoshin]

toggleClass—新手一步一腳印之簡單用jQuery控制CSS

當HTML跟CSS有了一定基礎後一定想要跨越新的牆，可能是jQuery甚至是javascript。現在的我就是這個狀況，不敢說自己「會jQuery」，真要說的話應該是想跨越牆但目前卡在牆上。

新手不會jQuery，但會寫class來設定CSS，所以可以用一步一腳印的方式，使用jQuery控制class，同樣能達到一些基本的互動效果！

.addClass()

首先一定要養成查文件跟注意大小寫的習慣。

這個方法就跟字面上一樣，增加class。把動作跟判斷做好，選擇器(selector)選好，加入有效果的class就可以達成。簡單到連說明看起來都很廢話。

有add就有remove，是同樣的道理，可以把class給移除。

$("button").click(function(){ $("nav").toggleClass("active"); })

這段的意思就是當點擊button之後，要讓nav加上active這個名稱的class，而active可能是已經設定好效果的class之類的。

.toggleClass()

蠢材如我，到最近才發現有這個方法！平常不多看文件的下場就是這樣，在那邊愚蠢的addClass跟removeClass，而toggleClass可以輕易做到前述的兩步驟。

See the Pen toggleClass by ruoshin (@oc0706) on CodePen.

寫了一個很簡單的例子，toggleClass真的超方便，可以直接切換跟雙向開關，這樣以後就可以嘗試自己手刻一個選單之類的。

[ruoshin]

Material Design Frameworks

今天研究了一下Material Design，其實還不是很明瞭Google訂出來的規範是什麼，真的有明確遵守的必要嗎？還是說只是一個參考的方向？

可能還要再多看幾篇文章，文件也還沒看完哈哈哈

Google Material Design 正體中文版

這可能是未來趨勢，不過到底是不是更貼近人類使用經驗，我想可能還是有點主觀，我自己是很喜歡這種簡約設計啦。

7 Material Design Web UI Frameworks

這篇文章有很多Framework可以使用，不用自己手刻，雖然我還是想知道那互動效果是怎麼寫出來的哈哈哈哈

不過有Framework真的方便了許多！

[ruoshin]

6/3

歡迎新戰友的加入雖然是一時衝動而結盟的新戰友

又可以對未來抱有期待了！

新電腦的味道好棒！

Looking forward to the future.

[ruoshin]

CSS垂直置中之一：transform

垂直置中永遠是個課題，即使用了很多次還是會陷入茫然，讓我想起前陣子有個大大做了置中生產器：HOW TO CENTER IN CSS

還衝到文章分享平台的熱門文章第一名，真的太幽默了，可見有多少人被它所困。雖然現在已經有很多方便的語法可以快速達成，但還是有瀏覽器向下支援的問題，尤其是在台灣……額。

最近愛用的方法是用 position 加上 transform，算是個支援度不錯，又簡單、不用計算的方法，只要設定 top、left 為 50% 還有對應的 translate 就可以自動置中。

例如以下的 CSS

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

因為設定 top 數值時，它是以物件本身的最上緣開始算，因此無法達到置中效果，而這裡的原理是利用 translate(x,y) 的特性去把對應數值減回來。當 translate(x,y) 設定的數值是百分比時，它就會以物件自己的長寬去計算，像是一個高 100px 的物件若設定 translateY(50%) 就會是 50px，高 150px 的物件設定 translateY(50%) 就會是 75px ，所以用 translate(x,y) 的數值相減，就能修正物件的位置偏差了。 

See the Pen Using position and trasform to center by ruoshin (@oc0706) on CodePen.

藍色區塊為 top: 50%，粉紅色是已經置中完成、對齊中線的區塊。

可以看到左邊兩個區塊重疊的深色部分，跟右邊 transform 區塊的上邊距是一樣的，必須把藍色區塊往上移才能置中，而這往上移的數值就是 transform 所計算的數值。

解釋這個也太難！希望無意間看到這篇的人能理解我在說什麼哈哈哈。

[ruoshin]

Bootstrap Validator

找到一個好用的表單驗證，必須引入 Bootstrap及 Validator

只要在form上面加

data-toggle="validator"

或是script

$('#myForm').validator();

就可以開始玩了，是非常容易使用的套件

不過要注意的是

每一個欄位與欄位的錯誤訊息都必須在自己的.form-group內，不然會無法顯示錯誤訊息

<div class="form-group"> <label for="inputEmail">Email</label> <input type="email" id="inputEmail" /> <div class="help-block with-errors"></div> </div>

顯示錯誤訊息的方法就是在input欄位後加上

<div class="help-block with-errors"></div>

若要自訂訊息就是在input欄位本身加上

data-error=""

--

今天新同事說他面試的時候踩到屎

鳩促咪

[ruoshin]

CSS偽元素的雙冒號::

W3C為了區分偽類及偽元素，在CSS3把偽元素的單冒號標記法改為雙冒號，但是單冒號還是有支援偽元素的判斷，是因為在CSS2跟CSS1都是統一使用單冒號。

也就是說單冒號跟雙冒號都可以，但都特地開發一個專門用來區別的標記了，還是養成使用雙冒號的習慣吧。

參考自W3C小字典

http://www.w3schools.com/css/css_pseudo_elements.asp

[ruoshin]

使用 CSS 做出刪節號樣式

筆記一下如何用 CSS 來做出刪節號，這樣就不用特地判斷字數。

overflow : hidden; text-overflow : ellipsis; white-space : nowrap;

overflow : hidden; 隱藏超出的內容

white-space : nowrap; 用來強制不換行

text-overflow : ellipsis; 文字超出區域寬度時要以「...」省略後面內容。（default是clip，強制切斷文字。）

[ruoshin]

如何修改type=“file”樣式？

當不想使用 <input type="file" /> 的預設樣式時

可以自行寫一個按鈕樣式，用div把兩者包起來，並且把<input type=“file” />點擊範圍填滿div，透明度設成0，這樣就可以冒充成按鈕了。

.fileUpload {    position: relative;    overflow: hidden;    margin: 10px; } .fileUpload input.upload {    position: absolute;    top: 0;    right: 0;    margin: 0;    padding: 0;    font-size: 20px;    cursor: pointer;    opacity: 0;    filter: alpha(opacity=0); }

原文

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/