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(排版而言)

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