Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
早點回家的工具
Search
Kytu Lin
December 06, 2012
Technology
10
1k
早點回家的工具
Kytu Lin
December 06, 2012
Tweet
Share
More Decks by Kytu Lin
See All by Kytu Lin
那些用 programming 換得的麵包跟夢想
kytu
1
300
關於網站上線
kytu
1
180
Other Decks in Technology
See All in Technology
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
Larkご案内資料
customercloud
PRO
0
600
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A Tale of Four Properties
chriscoyier
158
23k
Bash Introduction
62gerente
610
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
RailsConf 2023
tenderlove
29
1k
Producing Creativity
orderedlist
PRO
343
39k
YesSQL, Process and Tooling at Scale
rocio
171
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Documentation Writing (for coders)
carmenintech
67
4.6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Transcript
早點下班的工具 Kytu @ CCSP 2012F
大綱 讓 CSS 寫得更快 – LESS、SCSS 讓 SITE 建立得更快 –
Bootstrap、Foundation 補充 – How to build a beautiful site
如何讓 CSS 寫得更快? 每天練寫一萬行 – 生命該浪費在美好的事物上 寫少行代表多行 – Compile into
CSS
Solution! LESS http://lesscss.org/ SCSS/SASS http://sass-lang.com/ Stylus http://learnboost.github.com/stylus/ 別擔心他們都差不多XD
None
LESS Compiler Nodejs module ( 最常用 ) https://npmjs.org/package/less-middleware Other server-side
compiler ( Such as Winless ) http://winless.org/ Client-side Compile ( use Javascript ) http://lesscss.org/ Less.js
Nodejs Module Usage 新建專案時 express -css less {專案名稱} 已有專案 npm
install less-middleware 在 app.configure 裡 app.use(require('less-middleware')({ src: __dirname + '/public' }));
Let’s Learn it online! (LESS) 官方 document http://lesscss.org/ Online LESS
Compiler ( 練習教學用) http://winless.org/online-less-compiler
How it works it Nodejs? 檢查是否更新,立即compile Live Demo
None
SCSS / SASS Compiler Compass.app http://compass.handlino.com/ Fire.app http://fireapp.handlino.com/ Ruby Gem
SCSS / SASS 官方 document http://sass-lang.com/ Try Sass Online (
練習用) http://sass-lang.com/try.html
None
Compass http://compass-style.org SCSS 的 library 提供 CSS3 Helper 及許多好工具 這過渡的年代(嘆
Sprite ─ 小圖示合成圖,減少request數 網路上 sprite online generator 也不少
Sass vs. LESS Which better? http://css-tricks.com/sass-vs-less/
練習 Compile LESS express -e -css less LESSTEST npm install
Copy https://gist.github.com/4221193 into index.ejs Download Bootstrap LESS source https://github.com/twitter/bootstrap Copy all file in less folder into /public/stylesheets
The similar concept in HTML Zen coding http://code.google.com/p/zen-coding/ Sublime text
2 安裝教學 http://fredchiu.wordpress.com/2011/12/14/install- zen-coding-plugin-for-sublime-text-2/ HAML (HTML abstraction markup language) http://haml.info/ HTML to HAML http://html2haml.heroku.com/
The similar concept in Javascript 用更高階的語言編譯成 Javascript CoffeeScript CoffeeScript is
a little language that compiles into JavaScript. http://coffeescript.org/ TypeScript 具有型別的 Javascript 超集合 http://www.typescriptlang.org/
None
如何讓 SITE 寫得更快? 現成漂亮的 UI Button、Navbar、Icon set 大量定義好的 JS component
Tooltip、Dropdown、Modal Grid System In old days, 960.gs、blueprint Responsive Design
Responsive Design Media Query Responsive Framework Bootstrap Foundation JQuery Mobile
Bootstrap 官方 document http://twitter.github.com/ Online Builder ( not so handy
actually… ) http://jetstrap.com
Bootstrap 其他工具 Font-Awesome http://fortawesome.github.com/Font-Awesome/ Bootswatch http://bootswatch.com/ 18 Useful Twitter Bootstrap
Goodies You Should Know http://www.queness.com/post/11632/18-useful- twitter-boostrap-goodies-you-should-know
快速起手 HTML5 ★ BOILERPLATE http://html5boilerplate.com/ Initializr http://www.initializr.com/
Modernizr 判斷瀏覽器支援性好工具! http://modernizr.com/
One More Thing How to build a beautiful site
Texture http://subtlepatterns.com/ Keywords (Google it!) Vintage, Retro, Fiber, Old paper,
Grunge, Leather, Metal, Silk, Wood, Bokeh, Noise … Kit, Bundle, Scraps
Icon http://www.iconarchive.com/ Icon is a design itself.
Detail The Devil is in the details Border-radius Shadow Border
line Gradient Font-size, Line-height, Font-face Padding, Margin
Gallery http://www.awwwards.com/ 詩經﹒小雅﹒鹿鳴: 「他山之石,可以攻錯。」
Design Trend http://webmarketingtoday.com/articles/10-web-design-trends-for-2012/ 滾動視差(Parallax Scrolling)、單頁設計 (SAP)、大圖設計、Infographics、自訂字形 等… 滾動視差範例 http://webdesignledger.com/inspiration/18-beautiful-examples-of-parallax- scrolling-in-web-design
Photoshop Photoshop、Illustrator You can learn it at http://thenewboston.org/ http://psd.tutsplus.com/ http://www.lynda.com/
(You know…)
下課 : ) Kytu @ CCSP 2012F