Eason's Playground

Let's make something awesome!

【DailyUI #003】Landing Page

這是今天DailyUI的成果,極限圈的Landing Page。 我實在不希望太晚睡搞壞身體(現在是凌晨3點QAQ),所以就不實作成網頁了,今天只有圖檔:)。 HD圖檔 這次我使用Keynote作為拼圖軟體(非常坑爹,可是沒錢買PS和AI啊,之後應該會去找開源的替代方案) 背景圖片來源:Librestock(超推) 向量圖片來源:Freepik(也是超推) 在山峰上放字的靈感來源是這支影......

【DailyUI #002】Credit Card Checkout

點我試試Live Demo 點我看看Github原始碼(可是完全沒有整理超級亂我覺得你還是不要看好了) It’s DailyUI day #2! 做一做就上癮了,所以當然要趁勝追擊繼續創造很厲害很厲害的UI! 我發現CSS還有很多特性是我還不了解的、pseudo-element(偽元素)、animetion、@keyframes、transform、… 我對於前端設計的掌握度還是非常低,......

【DailyUI #001】Sign Up

我今天做了什麼 新專案啟動!這是DailyUI! 今天的題目是**“Sign Up”**,設計一個註冊介面。 而我希望「註冊」這個行為可以脫離「填表單」這個框架。註冊也可以像是一位導遊,引領遊客們進入你精心設計的網站中探索,因此這個過程應該是以「對話、引導」的方式呈現,於是乎我就借用了通訊軟體的設計,將註冊表單包裹在與導遊的對話之中。 點我玩線上Demo 點我查看Github原始碼 ...

【DailyUI #000】成為最強前端設計師吧

什麼是 DailyUI 在網上衝浪的時候,不小心又看到了一個驚人的網站:DailyUI.co 這是一個協助你成為更專業的 UI Designer 的服務,透過激勵你連續 100 天進行 UI 設計,他的運作方式是這樣的: 每天都會寄一封 email 給你,告訴你今天的 UI 設計題目(假日沒有,假日是用來遊山玩水的) 題目只會指出大方向,沒有太多限制,發揮創意打造出最強 UI!It’s ......

【閱讀筆記】從《他是玩真的!》汲取鋼鐵人Elon Musk創造未來的關鍵能力

《他是玩真的!:「鋼鐵人」伊隆·馬斯克改變未來的10種能力》 作者:楊士範(Mario)、吳居叡(G Wu)、鄭緯筌(Vista) 一句話書摘:去思考!去辯論!像個鋼鐵人般做出改變吧!培養洞察力、執行力、領導力!賭上你的願景! 誰是馬斯克? 伊隆·馬斯克(Elon Musk),被稱為繼賈伯斯後最具創新能力的企業家,先後創立了多家成功企業,每次出擊都為世界帶來了驚人的改變。 馬斯克生於南......

【100sites #011】LifeGame,生命遊戲模擬無限的可能性

LifeGame,生命遊戲模擬無限的可能性 點我玩生命遊戲線上demo 點我查看Github原始碼 ENTER:暫停 滑鼠左鍵:放置或刪除細胞 什麼是生命遊戲? 生命遊戲,是由英國數學家John Horton Conway研發的一套細胞自動機模型,地圖中每個細胞會根據周圍8格細胞的狀態來決定自身的存亡,詳細規則如下:(摘錄自維基百科) 當前細胞為存活狀態時,當周圍低於 2 個(不......

【100sites #010】Piano,用P5js的sound函式庫實作虛擬鋼琴

Piano,用P5js的sound函式庫實作虛擬鋼琴 點我玩線上Demo 點我查看程式碼 要營造出好氣氛,一定要有適合的音樂,於是今天我想要玩音樂,所以就研究了一下P5.js的sound函式庫,做出了今天的Piano虛擬鋼琴。 這個函式庫有不少功能可以使用,播音錄音波型轉換都可以做到,今天的Piano使用了sine函數的oscillator製造聲音,再用FFT.analyze()來顯示波......

【100sites #009】Flame,P5js酷炫小動畫

一句話摘要:使用P5.js製作的類火焰互動效果 玩線上Demo 查看Github原始碼 我會知道P5.js的存在,是因為在今年SITCON年會上聽了游宭鎬(Chiun Hau You)先生的分享,而最近看他用P5.js做的視覺辨識專案: Hello World - Programmable Visual Identity上了CodePen的Picked Pens,迴響熱烈,讓我也開始......

【100sites #008】Showcase,單頁式網站設計展示我的作品集

Showcase,單頁式網站設計,展示我的網站練習作品集 一句話摘要:我的第一份單頁式網站 點我玩玩Showcase線上Demo 點我查看Showcase的Github程式碼 我一直很想要學習如何設計單頁式網站,於是今天的100sites的題目就是單頁式網站設計啦! 我找到了一份不錯的教學,PJCHENder愛分享 - jQuery學習筆記 第八堂-1及第八堂-2,手把手教你如何做出......

【100sites #007】Pong,使用P5.js建構的復古遊戲

Pong,使用P5.js建構的復古遊戲 點我遊玩 我想看看程式碼 一句話摘要:使用P5.js這個JavaScript繪圖框架,重建Pong這個復古遊戲,並重新開動100sites專案 因為一直很忙加上懶惰加上拖延,已經快一個月沒有持續我的100sites專案了,然現在我終於忙完了,是時候該重拾行囊,繼續走完這段成為專業全端工程師的修行之路了! 這次的#007成品是Pong,一個很經典......