設計師的進擊

徐桃花 2015/06

jsfiddle.net

Jsfiddle

沒有圖

還是

沒有圖

1.英文太差

2.不會搜尋

3.整理困難

Jsfiddle

github.com

GitHub

當然不是

交給彼得

題外話CodePen 也有Store

jsbin.com

Jsbin

當然還有........

cssdeck.com

功能太陽春

對不起,

很主觀

因為........

我是

設計師

www.yr.com

那看點數據

http://voidcanvas.com/jsbin-jsfiddle-or-codepen-which-one-to-use-and-why/

來說說主題吧

1. CSS選項

CSS Base

包括Normalize.cssReset.css,只需點擊一個單選按鈕。

Vendor Prefixing

選擇 -prefix-freeAutoprefixer

Quick-add

BootStrapFoundationAnimate

CodePen有CSSLint通過整合你的CSS代碼搜索並警告你,如果有錯誤,警告,瀏覽器的支持,等等。

2. HTML, CSS, and JavaScript 的寫法

HTML

HamlMarkdownSlimJade

CSS

LessSCSSSassStylus

JavaScript

CoffeeScriptLiveScriptTypeScriptBabel

3. Emmet and 綁定 Vim

https://codepen.io/floraya/settings#editor

4.收藏和搜尋

5. 不同的顯示方式

編輯視圖

這是默認,可以調整代碼預覽的大小和選擇要顯示的語言。

詳情查看

可以看到筆的標籤,like,評論,分叉筆等,包含了大部分的CodePen的社交功能。

全頁視圖

全屏幕的iframe中,只留下一個CodePen頁腳。

網頁視圖

全屏視圖,沒有iframe和CodePen頁腳容易。

6. 崁入部落格

輕鬆快速地崁入到

自己的部落格

跟一些厲害的人一起學習

The Most Hearted Pens of 2014

參考網站

聽說厲害的人都要有小當家

打完收工,

感謝大家。

codepen(設計師的進擊) - Google Slides