Day4 //....(心虛)Fire.app搭配Source Map前端開發！

哎喲尾呀...好久不見的發文（心虛...）

說好的一天一文章沒想到第三天就破功了...只好硬改標題為第四篇了...

我知道再怎麼找理由也是於事無補...

但如果硬要說的話...（硬要講）

就是案子突然變趕變多＋人懶散＋運動好累＋中秋好忙

於是相隔兩個禮拜多後，我終於又要來寫了！

再怎麼樣也要硬著頭皮寫完三十篇！

不過我想應該也是少少人看，但這只是自我期許啊阿啊啊～～


好了，與其懺悔不如趕快寫這一篇...

今天的文章有點不太一樣
因為不是網路上得知的

這是我去參加FEA.TW 桃園前端講座時，發現有些很好用的前端技術

可以幫助我在前端開發節省時間
於是我回家實驗看看
但事實上已經過了快一個月了吧....
還好他們還有影音檔可以提供我回想...

基本上有三個出處

一併附上

自從學會Sass / Compass後，考試都考100分！[ 影音檔 ] [ 投影片 ] 講者：洧杰
但以上內容對我來說的重點在於

利用fire.app sass 搭配chrome sourcemap做前端開發

於是上網找了一些文章

請觀看[ 此篇 ]

因為作者寫的比我還詳細，還附教學，所以建議大家去那邊看文章
這邊也有一個步驟一個步驟的英文教學[ 此篇 ]
但英文那邊不是使用fire.app來做
所以只是提供參考～

而我服用並實際使用的情況下

簡直是神器啊！

雖然作者說是還未成熟的功能

但目前對我來說，已經解決了我修改完還要複製貼上的時間了

變相的縮短我的開發時間

很多時候，只要多了解一些新工具，就能使開發時間縮短

並且還可以擴展自己的視野

網路實在是好神奇啊

但如果大家要使用

請記得先購買fire.app工具

這個也是我用了好幾年

是個非常超值的工具

另外介紹

FEA.TW 桃園前端 這個協會

起先是一些很熱血然後住桃園的人自發性發起的聚會
原本是小小的團體，想照顧不在臺北但非常想獲得新知或技術的桃園人
雖然我在臺北，但我還是會衝下去參加

現在這個協會會辦一些講座，也有一些工作坊

我猜想他們是想要規模化這個模式，把聚會做大

於是朝協會方向邁進

很多新知訊息或技術都可以從這邊獲得

也有facebook粉絲團

想精進的同學們，可以多多關注，因為現在關注的人不多，但我覺得他們很努力

想替他們宣傳一下

晚一天的中秋節快樂！

Day3 // 學習CSS版面配置

(Day3了，很好！(握拳！)

文章出處：
http://zh-tw.learnlayout.com/

很高興由前端大神 Will保哥 翻譯的一篇文章~~
這篇對於初入html,css開始寫網頁的設計師們很有幫助(以前我自學時都沒有...)
而且還追加說明了很多css3新奇的功能
簡直就是替現在作網頁設計的人解決了好多問題(box model阿...column阿...flex box阿...這些新的屬性在過去都沒有，都需要"經驗"才能獲知解決方案...)

總而言之，針對這篇文我想補充幾點~
依過去我的經驗作幾點分享(好像我是個老人似的....)

Display&Flaot

我幾乎都是使用float來作版面配置，而不使用display來作的原因有二
因為display有跨瀏覽器標準的議題(IE大魔王)，容易產生誤差，變的需要那邊寫一點hack這邊寫一點hack

而容易解決的方案就是float，瀏覽器沒什麼相關誤差，完美呈現(只要你對flaot很熟悉)！相關diaply議題可以參考這裡或這裡還有我曾經寫過的文章
當然也不是沒解，只是會有點傷腦筋，除非我必須要使用瀑布流排版或是我很確定不支援哪些瀏覽器時我才會使用display，或有時使用display只是用來做某一區塊內的layout才作
也許有人會說可以使用一些css framework來作...熟不知...有時候客戶出的版面可不是只是用framework就能解決的....

總之，我自認為沒有切不出的版，什麼視覺版面來我絕對切得出來，用不用framework我倒是沒什麼意見，好用就用囉

再來float在排版時都要去clear float，但只要你能"確定父層元素"的高，然後float內容不超過高度，你就可以不用清除囉，不過這牽扯到html結構上的排版，不太好解釋....不過也有人說那不是通則，所以也不是多好的撇步...

Clear

一般clear用來清除浮動的效果，而網路上很多神人寫出了clearfix hack來完美清除，而且我也用了好多年，方法就是使用偽元素:after加一個clear:both，其他還必須加content:"";，但我最近改用overfloat:hidden了(也可以auto)，而且效果一樣，語法可是節省很多

不過依據我的經驗，並不是完美可解，因為如果你需要在一個有高度數值的div內容設定overfloat:hidden的話，就會爆爆爆...不過我忘了我那時遇到的問題是什麼了(好不負責)，那時候就會使用clearfix，依照判斷在去取捨

Box model

上一篇文章有稍微提到過(真的只是提到而已)
文章中，他提醒你使用margin跟padding的問題
而我依據自己經驗的解釋來提供理解
假如要設定500x500正方形的div，還需要有上下左右20px的padding內距
那就可以這樣算：500的div寬=500-20(左邊距)+20(右邊距)=設定寬460
高度同理
會影響到box model的還有border-width，等於會直接加上你設定的寬度
例如你上面減掉padding後得到了460寬，但你想要在加上10px的邊框，那麼你就要在將你的寬度減掉20，才會等於你心目中有內距、有邊框，然後總共500寬的div
但!!是!! 你只要設定了box-size:border-box，以上問題一勞永逸，但還是有跨瀏覽器議題...

Margin

margin有時候會影響到父元素，尤其是在往上頂的時候，會連父元素一起頂，我自己也還沒找到原因，通常我就不設定子元素的margin-top，而是去設定父元素的padding-top
我後來想想我自己做的時候，要頂的時候都是margin-bottom而已，還真的比較少用top
另外margin可以設定負值(padding不可設定負值)，很多人利用他來作lightbox的垂直左右居中(前提是必須設定寬高)
千萬不用使用負值來排版，看過幾個案例，真的很慘...

Flexbox

這個是我認為最棒的屬性喔喔喔喔喔~~~
如果以後都能支援他多棒阿，頁面一下子就咻咻休切完囉~~~
期待他能夠普及化，目前還是有跨瀏覽器的議題存在....
根本就完勝float跟display(排版而言)

(其實我覺得那篇文章根本不是初學者阿~~)

Day-2 // 10件你不知道css能做的事...

第二篇了....


文章出處是：
http://www.realcombiz.com/2014/05/css-techniques-developers-should-know.html

這次看的文章呢是從fb前端粉絲團看來的文章(其實多半都是從FB看來滴)
雖然是英文但基本的還是認得幾個
起碼css 方面的都看得懂
不過想叫我整篇翻譯應該是不太可能(英文程度低落...設計師的通病..)

首先先簡介一下這10個功能(搭配著原著文章看可能比較對照得起來)

1是告訴邊框屬性可以分別設定，顏色、樣式、寬度等等
2是說css3多了一些背景的屬性還有box model(什麼是box model)
3是說css name可以用符合命名(這好瞎~~哈哈但我喜翻)
4是說邊框的寬可以用thin, medium, 和 thick(細、中等、粗)關鍵字命名，話說平常都是用單位(px,pt,em...etc)
5是說可以替下滑線設定樣式、顏色
6是可以設定Pointers events(老實說我還真的不知道有這個)長知識1 長知識2
7是可以設定邊框為圖片
8可設定table td的隱藏與出現
9就很普通了，就是用關鍵字設定顏色：yello,white之類的
10就很不錯了，重點在說明使用css3來作選單滑入滑出的效果，一般我們做菜單都用jQuery來slideDown跟slideUp，這個則是純css而且還吃GPU圖形加速，手機觀看就會很滑順


說到底...其實很多都是css3的功能，而且能實戰的不多(應該說也沒什麼必要)
2與10應該是收穫最大的點，6也不錯，但還不知道能應用在哪裡

我發覺我有寫跟沒寫一樣，好沒營養
不過這也只是想記錄我自己看完之後吸收的程度
起碼我看完之後在寫下這篇
能加強自己的印象
而且還能因為內容不懂，自己在去google而發覺的額外知識
如果各位不小心有看到我的文章
強烈建議各位去看原文出處喔

但想交換心得也是可以的喔~~

以後應該還是有機會寫一篇實作與比較詳解的文吧吧吧吧...(小聲)

自我挑戰每天閱讀一篇文章與寫一篇文章30天之Day 1

咳...

我開始發現我的網頁的分頁數目越來越多…
很多都是想要先開起來閱讀的技術文章與很前衛的網路工具
每天都心想說哪天要來好好的讀一下或是來玩一下新工具
(但為什麼每天都有資訊可以開~~)

BUT!

這就是分頁越來越多的原因！
因為我根本沒仔細專心看啊！
而且大多都先去申請一次後根本沒再繼續用
或是存到書籤去了！！！(好沒效率)
後來就不了了之
難道真的要等到哪天chrome死當掉然後分頁全部掛點無法回復才有辦法將分頁一頁一頁關閉

於是

今天不知哪根筋斷了，想要做這樣的挑戰…

可能又變孤身一人所以時間多了吧…

總之！！

Day1 開始！！

今日有閱讀到的資訊是：如何使用sass控管好你的z-index圖層

文章出處：
http://blog.mukispace.com/sass-z-index-management/
http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
http://css-tricks.com/handling-z-index/

方法大概有三種
基本上就採用一種就好
看自己方便

我自己今天實驗是採用了Muki的文章方式，應該是跟第二篇文章一樣
控管起來實在不錯
而且調整方便
自己的經驗是的確有時候會接到一些需要跑一堆動畫的案子
這時就會有一堆物件飛來咻去
如果沒有使用這個方法
那誰前誰後就會調到懶趴痛
以前都是看到誰壓到誰才去調整
實在是太北爛了~~
所以有個主控的方法就是一件很重要的事囉


自己這邊就沒有再多做語法的解釋跟實做了
看以上的文章也許會比我寫得更清楚了解


以上。

希望我挑戰期間分頁數目可以越來越少....

display:inline-block 會多出空白間距的完美解法

.inline-block{
  ul{ /*解法*/
letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
word-spacing: -4px;
font-size: 0;}
li{ padding:5px 8px;
background:#eee;
/*解法*/
font-size: 12px;
  letter-spacing: normal;
   word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
  }
}
P.S以上是SCSS寫法

參考來源：http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements


以上經過跨瀏覽器的測試，完美的支援chrome、safari、firefox、ie789，感動吶！！
來源經過了很多測試，但多數是對html標籤動手腳，請看最後一則範例，才是真正完美解決inline-block間距的解法

（話說我好懶得安裝SyntaxHighlighter.....所以讓大家看這麼直白的css真是慚愧...說是慚愧但還是懶得裝.....）

非常基本的html label標籤應用...

LABEL標籤

過去老實說...我還真的不知道為什麼要用這個標籤來放文字= =...(一整個很弱)
但終於昨天在試作一些選單的點選時...才發覺到他的用處!!
依我實作後的心得，最直白的感覺就是；用label標籤幫你把input點選範圍加大!加大!加大!!當然，這是我發現他目前最好用的點

說真的，配合CSS真的好好用，使用上不止增加了使用體驗，而視覺樣式也能良好的呈現(配合CSS3)，方法也很簡單，以下就實做記錄一下，知道門道的路過神人們就請略過這篇吧~~(目前因為知道用這招而自嗨中)

首先，因為我在製作投票的選項，所以我會需要有；標題、複選框、單選框、選項、送出按鈕...等資訊

準備好html

<div class="vote">
  <h1>為什麼在智慧型手機上網路購物的人很少？你自己不在手機上買東西的原因是什麼？</h1>
  <span>投票至2012/12/31</span>
<ul>
  <li>
    <input type="checkbox" />
　<h2>操作不易，網站沒有專屬手機的介面</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>沒有手機</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>怕連線中斷</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>我只玩遊戲</h2>
  </li>
</ul>
<div><input value="送出" type="button"></div>
</div>

以上是一般已經可以提供基本投票選項項目的html

那麼該優化並加入label標籤?

將html修改成

<div class="vote">
  <h1>為什麼在智慧型手機上網路購物的人很少？你自己不在手機上買東西的原因是什麼？</h1>
  <span>投票至2012/12/31</span>
<ul>
  <li>
    <label for="vote_1">
        <input type="checkbox" id="vote_1"/>
　    <h2>操作不易，網站沒有專屬手機的介面</h2>
    </label>
  </li>
  <li>
    <label for="vote_2">
        <input type="checkbox"  id="vote_2"/>
　    <h2>沒有手機</h2>
    </label>
  </li>
  <li>
    <label for="vote_3">
        <input type="checkbox"  id="vote_3"/>
　    <h2>怕連線中斷</h2>
    </label>
  </li>
  <li>
    <label for="vote_4">
        <input type="checkbox"  id="vote_4"/>
　    <h2>我只玩遊戲</h2>
    </label>
  </li>
</ul>
<div><input value="送出" type="button"></div>
</div>

黃色部分是我們增加的部分，說明一下
label標籤屬性"for" ，此屬性可以針對相對的標籤id名稱做綁定
那麼在label標籤裡面的內容都是可以被點選啟動checkbox的範圍
如果我們再透過CSS設定，將label標籤設定為：

label{
　display:block;
　padding:10px;
}

那麼可點選的範圍又變大了，使用者在點選項目時，就可以不用這麼精準的去對準複選框，只要移入label範圍內，就可以點選了，我們只需要做一點點小小的改變，就能大大增加使用者體驗，這麼好用，不學嘛!?

(搞不好大家早就會了...)

什麼是CDN?

最近在找jQuery的版本時發現的一個新名詞(對我來說...)

之前有過因為在蒐尋主機伺服器，結果發現也貫上"CDN"名詞，當時並不以為意的說...
後來才又在搜尋jQuery中又聽到這個字

CDN是什麼?

CDN是Content Delivery Network(內容傳遞網路)的縮寫，運用機制將檔案複製到全球各地的區域性伺服器，當使用者需要內容時，可以依距離就近取得，縮短傳輸時間，提高系統運作的流暢性。近年來，JavaScript Library在網頁開發扮演的角色日益吃重，常常一個網頁中就要載入數十個js檔，且隨著JavaScript功能的豐富化，js檔也愈來愈肥，於是Google、Microsoft及一些廠商組織開始提供CDN式JavaScript來源。 

對於網頁開發者而言，傳統做法是將要引用的js檔下載統一放在網站的特定目錄下(例如: /inc, /js, /Scripts...)，現在則多了CDN的選擇，將網頁的<script>來源由../Scripts/jquery-1.7.2.min.js改成httq://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js後，使用者便可透過CDN的大頻寬快速下載js檔，若使用者先前拜訪其他網站已從該CDN下載過同一js，還可直接使用Cache中的暫存複本，連下載動作都省起來。如此一方面能改善網頁載入速度，一方面還可以減少自家網站流量，省下頻寬費用，除了檔案在自家掌握之外的不確定風險(自家網站的妥善率通常不比Google/Microsoft CDN高，所以不用太擔心，但不適合需客製化或指定特定版本的場合)，選用JavaScript Library CDN是不錯的策略。

以上內容轉貼至黑暗執行緒：http://blog.darkthread.net/post-2012-06-02-my-js-cdn-list.aspx

好物好物~
對於空間與頻寬吃緊的"個人"前端開發者來說，這絕對是最好的選擇(反正頻寬都吃大廠的阿哈哈哈)。

內容補充：http://ten2.tw/blog/amazon-cloudfront-cdn/