鐵人檔案
以技術開發為主的前端工程師，如何在開發流程中，加入使用者經驗設計的工作項目，然後以 React 開發一個線上相簿。希望透過這個分享，讓工程師有基本的 UX 能力，能在開發前就介入產品設計，避免在過程中亡羊補牢，導致產品最終像是個拼湊起來的結果，增加開發的成功率。並且以一個 ES6 新手記錄 React 心得。
補講一個前面忘了講的部份 — 要怎麼在React裡加CSS？ CSS很好用，但是它一個最大的缺點是所有變數都是全域，為了避免元件間的樣式互相影響，於是有了BEM...
今天插播一個主題，我為了這個鐵人賽正在將原始碼重新寫過，在這段時間我知道了 ESLint 這個代碼檢查工具，想說來裝一下，讓自己寫的代碼更符合標準。 我採用熱門...
Create New Component 在 gallery 顯示的地方新增 Gallery 元件，並匯入 Unsplash 的資料 <Gallery...
照片和相簿的佈局其實很類似，差別只在 item 的外觀、間距、以及相簿文字而已，所以我們可以改造 Gallery component 讓它能吃二種設定。 App...
Unsplash 網站的照片是以 tag 來分類而不是傳統的樹狀資料夾結構，幸好在每個 collection 裡有 “related collection” 這...
點擊照片縮圖會跳出覆蓋全螢幕的黑色微透明底，照片的幻燈片在畫面正中央，這叫做 lightbox。使用者可以切換來觀看照片，並且下載與分享，按了右上角的關閉按鈕關...
我們要在 Lightbox 裡面放照片的幻燈片(slide)，使用者可以按左右箭頭看下一張或前一張照片，在行動裝置上支援觸控手勢。 Slide的做法是把所有照片...
我們的照片要給使用者分享和下載的功能，雖然說可以拷貝瀏覽器的網址，但是在手機上要拷貝文字實在是不方便，我們可以做一個按鈕讓使用者按下去就將網址複製到剪貼簿裡。R...
做好的網站歡歡喜喜的快要結束，最後還有一件重要的事，那就是「支援IE」。我們用的技術有一些東西IE不能用，像是 Babel, Fetch, .remove()，...
Apple 新推出的 iPhone X 有圓角的螢幕，以及特異的「瀏海」，如果沒有針對 iPhone X 優化的話，在 mobile Safari 上看網頁就會...
