基礎 JavaScript ES6 和 CSS cheat sheet PDF 下載

es6-logoToptal 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 語法差別,什麼時候要用 constlet,或 Template String,預設參數 .. 等功能,其實非常不賴。CSS 則是介紹基本的 Box Model、Selectors、Pseudo-selectors .. 等。 Continue reading “基礎 JavaScript ES6 和 CSS cheat sheet PDF 下載”

前端工程師必看: 十大 CSS 技巧

css3

2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧,此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer,裡面作者紀錄了十大 CSS 技巧,看完這十大後,發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文,這些技巧都算是蠻基本的,對於前端工程師有很大的幫助,如果尚未瞭解或還沒開始使用的開發者,也可以建議團隊開始使用。底下內容來自於原網站,在加上筆者的一些補充。

Continue reading “前端工程師必看: 十大 CSS 技巧”

CSS Clear Fix 小技巧

記的之前 evenwu 為了找尋外包 CSS 人才,出了一份考題,有提供上機考,真是佛心來的,還給用 Inspector 或上網。其中一題就是

第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況?如果我要在X元素內下背景,卻沒有顯示,請問如何解決?

解決方式就是實作本身 clearfix,或者是在元素後加上 clear: both 的標籤,大概就是底下的樣子

如果是要在 container 實作 clearfix,就必須透過 css beforeafter

.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+

Twitter Bootstrap 發佈 3 RC1 版本

今天非常開心看到 Twitter 團隊發佈 Bootstrap 3 RC1 版本,Twitter 這次是大動作的改版,連官網都換掉了,如果你還在使用 2.3.2,Twitter 也提供之前的網站版本,讓使用者可以繼續使用,當然希望各開發者可以盡快轉換到 3 RC1,此版本超過 1600 commits 修正。Twitter 也另外開了 Github Organization,如果要找範例的話,可以到 bootstrap-examples 來看看。另外大家最關心的是效能,底下影片介紹 Bootstrap 3 vs Bootstrap 2.3.2 版本差異。

CSS 垂直置中解法

相信大家在 Google 可以找到很多解法,這幾天在 Facebook 發現更精彩的解決方式,就是用 CSS:beforeinline-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>
Continue reading “CSS 垂直置中解法”

測試 Web Responsive Design Tool

responsive-website-design-tips

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”

開發 iPhone Mobile Web App 一些小技巧

開發 Mobile Web App 有好一陣子,底下來紀錄過去開發的一些經驗以及 iPhone 上面一些 meta 的設定小技巧,適用於 Mobile Web 開發,如果有任何錯誤,請大家可以留言給我,也或者有不錯的建議都可以一起討論。不過此篇文章會比較偏向 iOS iPhone Device 上面的開發技巧。那廢話不多說了,來看看設計 Mobile 需要注意哪些事項。

良好的設計模式

底下是 Web 程式設計師應該注意的事項
  • html 檔案必須宣告 DOCTYPE 型態
    以目前 HTML5 就必須寫成 <!DOCTYPE html>
  • 完全區隔 HTML, CSS, 和 JavaScript 檔案,以便將來好維護或擴充
  • 完整的 html 架構,不要少個單引號或雙引號,或是少寫 close tag
Continue reading “開發 iPhone Mobile Web App 一些小技巧”

CSS Layout 好幫手 Twitter bootstrap CDN

我相信大家對於 Twitter Bootstrap 並不陌生,它解決了程式設計師 Layout CSS 版面很多問題,並且提供多種 js plugin 及 CSS 樣式讓整個網站看起來更專業了。這次發現 NetDNA 這間 CDN 公司推出了 Twitter Bootstrap CDN 服務,不管 twitter bootstrap 提供了哪些 CSS 和 javascript,CDN 都已經有檔案可以使用。 如果要載入整個 CSS 和 Javascript 可以直接 include底下兩個檔案
# CSS
//current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css
# JS
//current.bootstrapcdn.com/bootstrap-v204/js/bootstrap.min.js
Continue reading “CSS Layout 好幫手 Twitter bootstrap CDN”