HTML語意化及前端架構 About HTML semantics and front-end architecture

About HTML semantics and front-end architecture原文

一篇有點歷史的文章,作者有在Twitter工作過,沒錯!馬上該想到有名的Bootstrap(不過不知道作者有沒有參與)。不算完全翻譯,這是一遍蠻深奧的文章,所以翻譯中除了原作者提供的之外,有加入我找到的相關資料以及我的看法。雖然英文不是很好,但我儘量表達到位。那我們開始吧。


集合了一些想法、經驗、我喜歡的概念,還有最近這些年我已經在嘗試的概念,包括了HTML的語意化、元件、前端架構的設計方法,類別的命名方式、HTTP壓縮。

We shall not cease from exploration
And the end of all our exploring
Will be to arrive where we started
And know the place for the first time.
T.S. Eliot – “Little Gidding”

我們不會停止探索
而一切探索的終點
將會是我們下一次探索的開始
T.S. Eliot – “Little Gidding”

Read on

使用Skrollr.js實作視差滾動-(一)入門篇

Parallax Scrolling又名視差滾動,在江湖上已經流傳了這麼久,雖然是老梗但用在網頁上的效果一直很不錯,作前端工程師應該總會遇過設計或是需求用閃亮期待的眼神問你作不作得到。我們會在接下來的章節中利用工具實作視差滾動的的效果。

我們將假設你會以下技術,否則在接下來的介紹裡,你可能會感覺有點吃力。

  • Css3:動畫實作經驗
  • JQuery 或 Javascript
  • SASS 或 SCSS
Read on

印度日-自制咖哩跟烤餅

天氣非常好,大家都知道我們家那隻非常喜歡下廚,昨天看了Gordon.Ramsays去印度學作菜的節目於是非常的想吃印度咖哩,我們家那隻馬上行動達成我的願望,為了表達感謝,我決定幫忙制作印度烤餅,原因是他全程都可以用機器,哈哈哈哈哈。

Read on

筆記 Modernizr

前言

功能概述

  • 他提供了超過40種的新世代功能,而且一切都發生在毫秒間
  • It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties
  • 他會將他支援及不支援(前綴no-功能名稱)的功能新增到html的class上
  • It provides a script loader so you can pull in polyfills to backfill functionality in old browsers

使用方法

放在head裡而且最好緊貼在css後面(而某些功能要在<body>前生效)

Modernizr.load() tutorial

在下面的例子中,Modernizr會判斷Broswer支不支援geolocation
如果是的話則載入geo.js,否則載入geo-polyfill.js這個降級用的js

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});
Read on

讀感-標記文案:管理使用者的期望

原文引用 http://tympanus.net/codrops/2014/01/08/labels-managing-user-expectations/
中文引用 http://select.yeeyan.org/view/418335/394820

雖然有中文,但我為了練習看的是原文XD
因為偷懶引用一下人家的翻譯
值得標注一下的內容如下

我們往往在為按鈕的整體設計操心:

  • 它看上去足夠像按鈕嗎?
  • 使用者知道它是個按鈕嗎?
  • 使用著知道它有鏈接嗎?
  • 應該用扁平配色還是漸變?
  • 要把這個按鈕擺在哪裡?

Too often we worry about the overall design of the button:

  • Does it look enough like a button?
  • Will the user know it’s a button?
  • Will the user know that it’s a link?
  • Should I use a flat color or gradient?
  • Where should I put the button?

上面這個問題真的每次都在需求確認會議中出現XDD

Read on

讀感 HAPPYUX參加分享

前言

這是一些重點整理跟我的心得,純分享,如果有錯誤也歡迎大家指出讓我來訂正
版權都來自於我參考的BLOG或是網頁,我會儘量標示清楚,如果希望我拿掉也可以留言我馬上拿

Q:什麼是UX?

“User Experience / UX Design

A:FOR USE

  • 品牌: 視覺
  • 功能性: 軟體功能、實體服務
  • 可用性: 易學性、接受度、容錯性 等等等
  • 內容

BUT! 並不是USER說什麼就作什麼

A: FOR US

  • 互動設計
  • 視覺設計
  • 使用者經驗設計
  • 易用度分析
  • 資訊架構
  • 使用者研究

BUT!對企業來說無條件服務USER是不存在的 [UX最重要的是…能讓我們直接或間接的利益]

對我們來說USER不只是網頁使用者

Read on