介紹一堆美食日記，生活日記，電腦筆記
在 Toptal Blog 看到 JavaScript Cheat Sheet: ES6 And Beyond 及另外一篇 A Practical CSS Cheat Sheet by Toptal Developers，這兩篇提供了一些 JavaScript ES6 及 CSS 的基礎寫法及教學，蠻適合前端工程師將 PDF 印出來貼在座位前面，cheat sheet 內提供的語法幾乎都是天天在用，像是在 ES2015 內 let vs var 語法差別，什麼時候要用 const 或 let，或 Template String，預設參數 .. 等功能，其實非常不賴。CSS 則是介紹基本的 Box Model、Selectors、Pseudo-selectors .. 等。
Continue reading “基礎 JavaScript ES6 和 CSS cheat sheet PDF 下載” 
2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧，此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer，裡面作者紀錄了十大 CSS 技巧，看完這十大後，發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文，這些技巧都算是蠻基本的，對於前端工程師有很大的幫助，如果尚未瞭解或還沒開始使用的開發者，也可以建議團隊開始使用。底下內容來自於原網站，在加上筆者的一些補充。
Continue reading “前端工程師必看: 十大 CSS 技巧”記的之前 evenwu 為了找尋外包 CSS 人才，出了一份考題，有提供上機考，真是佛心來的，還給用 Inspector 或上網。其中一題就是
第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況？如果我要在X元素內下背景，卻沒有顯示，請問如何解決？
解決方式就是實作本身 clearfix，或者是在元素後加上 clear: both 的標籤，大概就是底下的樣子
如果是要在 container 實作 clearfix，就必須透過 css before 和 after。
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}SASS 版本
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
line-height: 0;
}
&:after {
clear: both;
}
}這樣只要在任何 element 加上 clearfix css 就可以了，支援瀏覽器版版: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
相信大家在 Google 可以找到很多解法，這幾天在 Facebook 發現更精彩的解決方式，就是用 CSS:before 跟 inline-block，底下提供範例:
html 程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="ot">
<div class="wrapper"></div>
</div>
</body>
</html>
Web CSS Programer 在撰寫 Responsive CSS Style 時，手邊一定會有一堆 Device，來測試當畫面小於 480 px 或大於 768 px 時，呈現的版面是否有亂掉，公司也花費許多成本來測試，現在不需要這樣了，我們可以透過線上 Tool 或者是 Plugin 來測試 Responsive Web Page，首先來介紹
Viewport resizer，此工具用法很簡單，進入官網後，將官網 Javascript 連結加入到我的最愛或 bookmarks，之後打開您的測試網站，再點選該 bookmark，你會發現網站上面多了一條 tool bar，可以自訂或調整 view size，預設也給了平板手機等多種畫面調整，讓您測試 Media Queries 是否有錯誤。 Continue reading “測試 Web Responsive Design Tool”
# CSS //current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css # JS //current.bootstrapcdn.com/bootstrap-v204/js/bootstrap.min.jsContinue reading “CSS Layout 好幫手 Twitter bootstrap CDN”