設計與前端相關文章、資源整理

這篇文章是整理我粉絲團所發表過的資源,因為粉絲團很難搜尋舊文,又常有朋友私下問我某天分享的文章是否能再給他一次,但我自己也很難搜尋到 XD,所以透過 blog 將所有文章彙整如下。
文章不定期更新,歡迎大家把這篇加入你的 bookmark,當作資源文章 :)

參考目錄
1. CSS 觀念分享
2. CSS 實作語法
3. jQuery UI & Plugin
4. Mobile 相關文章與討論
5. mockup 和 development 相關工具
6. 設計與前端相關文章
7. color scheme 分享
8. 線上教學網站


(目前只紀錄到 6/26 的文章,因為 Facebook load 不出來 6/26 之前的文章…)

CSS 觀念分享

  • Just One(CSS Dev Conference keynote)
  • 這是 CSSdevconf 的 keynote,全英文,不用懷疑。但這篇是在講你踏入 web 行業的觀念建立,所以大家可以很輕鬆的讀過去。
    簡單分享其中一頁【slides p26】:
    想想我們剛學 CSS 的時候…

    • 既然我可以用 tag 做一樣的事,那為什麼還要用 CSS ?
    • 既然我可以用 CSS 做一樣的事,那為什麼我還要用 SASS ?
    • 花點時間去學習「新的、有趣的事物」,不要等他變成「標準」才開始碰。
  • Flat design 真的適合你的網站嗎?
  • 貫穿全文的核心句:「Don’t let your web design leave you feeling flat」

  • 2013 CSSconf 影片與簡報
  • 今年 5 月在佛羅里達洲舉辦的 CSSconf,網站已經放出了所有講者當天的投影片和演講錄影檔,有興趣的朋友可以針對想要了解的議題深入觀看唷:)
    有常參加國內 conf 的朋友,也可以順便看看國內國外的 conf 有什麼相同或相異之處!

  • 寫 CSS 最好方法:OOCSS+Sass
  • 很棒的一篇文章,大家可以參考看看。不過有點文不對題,文章根本一直在介紹 placeholder 的好,雖然他真的很好用 XD

  • CSS 疑難除錯
  • 寫的很不錯的一篇 slider

  • CSS Attribute Selectors: How and Why You Should Be Using Them | Design Shack
  • 所有 selectors ,我最愛的就是 attribute selectors ,真的非常好用。不過我的疑惑也跟這篇文章末段提到的一樣:「 After a little bit of research though I was stunned by how cool they are and baffled as to why they seem to be so rare.」(為什麼 attribute selectors 感覺沒什麼人使用,還蠻罕見的)

  • CSS: CamelCase Seriously Sucks! – CSS Wizardry
  • 雖然這是作者 3 年前的觀點了,但看了這篇文章後,瞬間放棄剛萌芽的念頭:「在 html tag 的命名改用 CamelCase」,可是 Facebook 也都用 CamelCase 做命名耶。不過這篇文章真的超義憤填膺的,連用底線都被罵進去了,害我覺得自己用底線真的是萬惡至極、真的是千古罪人阿!!!!我錯了媽媽 T口T
    但最後被這句話給驚住了….OTL,揪竟~要不要改回用 hyphen-delimited 呢?揪結阿 (╥_╥") 「The syntax of a language has already been decided for you; you might as well stick with it!」

CSS 實作語法

jQuery UI & Plugin

  • svg.js
  • 非常強大的 SVG.js,有了他就不用用 canvas 從零開始刻半天了,裏面有很多不錯的 element 可以直接用,還有好多強大的應用,有在使用 canvas 的朋友可以參考看看。
    附上我簡單寫的 svgjs 小範例(其實就是從他 github 文件抓 code 而已):http://jsfiddle.net/muki/ZapGV/1/

  • jQuery image slider with lightbox and skin support
  • 這款的特色:

    • slider + lightbox
    • slider 呈現方式
  • jQuery File Upload Demo
  • 讓上傳按鈕變得頗有質感的 UI,還有 AngularJS 的版本。

  • 保哥翻譯的前端開發工具: Frontend-tools
  • 雖然有保哥的翻譯版,但是也沒辦法明確指出這些工具該怎麼使用 (畢竟實在太多了,而且原文也只丟給連結),因此實際的操作還是要大家自己去摸透喔,文章只在幫忙大家做分類而已 :) ,因此可以換個角度想,把這串文章當成是個實用的書籤列吧。

  • Text Effect | Fourdesire
  • 充滿科技感的文字,如果有朋友在做科技感網站 (像是電影的 event site ),也許可以嘗試使用這款噢 XD

  • Creative Loading Effects | Codrops
  • 強大的 tympanus.net 做了非常多的 jQuery 特效,剛剛發現他們還有做「Load Effects」呢。強烈建議大家可以把該網站 bookmarks 起來,有很多非常棒的資源範例可以看 :)

Mobile 相關文章與討論

mockup 和 development 相關工具

設計與前端相關文章

  • 12 Must-Read RWD Resources
  • 對 RWD 有興趣,或是想更了解觀念與實作技巧的朋友,可以參考 mobify 在 9 月幫大家整理的 12 篇必讀 RWD 文章!

    如果是全新手想先了解概念,我建議可以先看的篇數有:

    • 3. Lesson’s learnt building the Guardian
    • 4. Five Steps to Make Your Website More Accessible
    • 5. Smashing Conf: Responsive Web Design is Easy/Hard
    • 9. Planning for Content Beyond the Web
    • 10. Responsive Design is Not About Screen Sizes Any More

    有實作經驗,或正準備要踏入實作領域的朋友,可以參考:

    • 1. Seven Habits of Highly Effective Media Queries
    • 2. Build a Freshly Squeezed Responsive Grid System
    • 6. Responsive Navigation On Complex Websites
    • 7. Responsive web design tool review: Embed Responsively
    • 8. Page Height, Scrolling and Responsive Web Design

    使用 Bootstrap 或 SASS 做網站的朋友歡迎閱讀:

    • 11. Break The Wrist And Walk Away: Responsive Design And Bootstrap 3
    • 12. Create flexible grids using Sass

    以上,希望對大家在做 RWD 有所幫助 :)

  • 寫給設計師:如何與工程師合作
  • 「很有趣,人們形容設計師是「細節導向」,但事實上大部分他們給的設計規格會遺漏很多使用上可能遭遇的狀況,最後靠著必須將所有情形都實作的工程師去把他們找出來。」

  • 行動裝置時代的創意畫布:卡片式設計
  • 來自 36Kr 的刪減版譯文: Why Cards are the future of the web?
    有興趣的朋友可以看原文: http://insideintercom.io/why-cards-are-the-future-of-the-web/
    Cards 的 app 設計也不是那麼簡單的,看了一下留言有 starup 蓋略分享了一下他們公司設計 app 的一點想法:
    「We wanted to empower users with the ability to transform these cards into something that was more fitting for their context, aka share a music link, why not turn it into a music player. We narrowed down to one type of card, text overlaid on a nice image, and that has been really challenging. There is a lot you can do though once you have this concept of cards in mind.」

  • (just for fun) 【 WEB Designers VS WEB Developers
  • 設計師與開發者的特點分析比較

  • 【UI 陷阱】消失的三角地帶 | Desiring Clicks
  • 這篇好細節阿!!!!! 好文!!!

  • 設計師自學完全手冊,讓你從零基礎到成為專業設計師
  • 看完之後有人想要一起在 amazon 團購嗎 XDD,歡迎開團!

color scheme 分享

  • Themes for Web Developer’s Toys – devthemez
  • devthemez 是一個 github 網頁開發工具佈景主題的收集站,雖然現在還在 beta 階段,可是已經有一些很有質感的佈景主題囉。
    目前提供以下這幾個工具的 theme:

    • chrome dev tools
    • sublime text 2
    • VIM
    • BBedit

    如果你剛好有用這些工具,不妨來這邊逛一逛。
    其實我是到這邊挖 chrome dev tools theme 的,我目前使用的 theme 是 ZeroDarkMatrix ,如果你也喜歡這款的話,可以下載 custom-stable.css 唷,issue 有我問作者的問題,作者人超好的 XDDDD

  • Colorsublime
  • 可以直接預覽 code 的 color style,超酷的!

線上教學網站

  • Hack Design
  • 想學設計的工程師們,可以參考這個免費的課程網站。

(last update: 2013/10/25)

You may also like...

14 Responses

  1. 凍仁翔 說道:

    ZeroDarkMatrix 在下就拿來用了,還是暗暗的主題比較適合閱讀啊!

  2. 凍仁翔 說道:

    可惜「參考目錄」沒連結可點滿不能快速跳轉各個主題。 :(

  3. KUO 說道:

    寫 CSS 最好方法:OOCSS+Sass
    文章連結失效囉

  4. Quni 說道:

    請問除了變換Custom.css,
    該如何加入chrome dev tools的theme嗎?

  5. Demo大全 說道:

    博文很精彩,不知能否与小站做个友链?

  6. 恒生 說道:

    簽到,踩踩:D

  7. 你我知 說道:

    网站弄得挺不错,支持一下!!!!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>