再版出來

這陣子邁向人生的第一份正式工作,應該也是俗稱的菜鳥年。 雖說把興趣結合工作是件挺幸福的事情,下班後寫個 code 也是很正常的事。 不過興趣還是太廣泛了啊,有時會想著,科技這樣的事物可以做到很多不可思議的事。 但如果可以跟人文結合,勢必會帶來更巨大的影響力吧,我是這樣深信這個道理的。 會想追這部,除了許多朋友推薦之外,也是因為想看看這個怪異的名字到底在演啥。 有趣的是,這部讓我聯想到爆漫王這部作品。 一個是從漫畫家角度去延伸世界觀,另一個則是從編輯的視野剖析整個故事情節。 聽起來相對立的設定,共通點是同樣做到了感動人心這件事。 再版出來的那句“再版”口號,前後呼應的安排讓這部日劇更顯得有張力。 社長不貪不應得的運氣而把中獎彩券拿給孫女剪紙的那幕也頗讓人會心一笑。 但我更喜歡的是從主角延伸出來的能量,給身旁的夥伴都帶來的正向的變化。 李開復老師寫過一本書,書名叫世界因你不同。 如果持續的做,每天的做,總有一天也會到達那樣的境界吧。 我想看看那樣的風景。

 

Hahow Practice – Brand Guideline Design

這是在 Hahow 課程募資網站所開的一門課 ( 動畫互動網頁程式入門 )其中一個小練習,真心,非常推薦這門課,對於前端實戰應用做出了很多觀念上深入淺出的講解。 在這項練習中包含了一些 Sass 這項 CSS 的 Precompiler,以及 HTML 相對應的 Jade的實務應用,雖然後來覺得 Jade 的語法反而讓我有點在 HTML 的架構上感到疑惑,儘管如此,多些新技術的嘗試總是好事,不試過又怎麼會知道好不好用,適不適合自己的習慣呢? 在配色上的著墨花了不少時間去調色,苦思之餘也找到了些好用的配色靈感工具: Brand Color – 各大品牌配色 COOLORS – 超級好用的配色產生器 以上兩個網站應該足以讓你配出好看的顏色對應,建議多去玩玩順便培養自己對顏色的感覺。 BTW,之前在 Codrops 網站上看到一個超屌的 SVG Ripples 效果,一直想找個機會實際用看看,剛好看到原先架構的 Button 有點單調 ,便做了些小嘗試XD,但前提還是要考慮到該特效的必要性啦,畢竟這是一個重點放在品牌主視覺規劃的網頁,用太多特效反而會失焦。 大概是所生出來的樣子。 附上 Codepen 參考連結,作品主架構臨摹自 Hahow 的課程練習。 See the Pen Brand Guideline Practice by WeiChiaChang (@WeiChiaChang) on CodePen.

 

NTUST Badge with Pure CSS

如題,大概記錄一下整個發想到實作的過程。 其實一開始會有這個想法純粹是因為當兵的後半階段實在是太無聊了。 除了上課之外很多時間都在看自己帶去的書,要不就是發呆,亂想東亂想西。 每天突然想到可以用純 CSS 做個圖試試看,也算是突發奇想。 於是便有了這次的嘗試。 完成品大致上長這樣。 由於是第一次,最初其實是很苦手的一個一個形狀刻出來,先來個圓形阿,再來個旁邊的把手阿等等。 等等,這實在是太傻逼了。 反正軍中時間多的是,又想了想,用圖層疊加的方式應該會容易許多。 簡單分析了一下台科大校徽的結構,其實不脫就幾個形狀的變化。 圓形,六角形,長方形,比起很多學校的校徽,台科大算是相當好實作了。 而且六角形還有這個超快速的 generator, 省掉一大半撞牆的時間。 從腦中想法到實作出來,花了休假的一些時間,技術就是這樣,有時站在巨人的肩膀上,像是組合樂高積木一樣,把想要的功能兜出來;有時沒找到滿意、符合需求的工具就重造一個更好的輪子。 做沒人做過的題目,感覺也挺有趣的。 See the Pen NTUST Badge by WeiChiaChang (@WeiChiaChang) on CodePen.

 

JavaScript 實作資料結構 – Stack 篇

Stack 以中文直翻的話,就是堆疊,可以理解成一直堆東西上去的感覺。 大家應該都有去大賣場的經驗吧? 如果有去過 Costco 應該更能體會貨櫃的 fu。 一脫拉庫的貨物一個一個由低到高,層層疊疊蓋上去。 「其實蠻像蓋飯的阿。」 「我看倒像一塊塊綠豆糕呢。」 堆疊的應用之處就像是程式語言中的 Compiler 和記憶體中貯存變數阿,遞迴阿,方法呼叫阿。 進一步來說,Stack 是種 FILO ( First In Last Out )的結構形式。 也就是說,資料若是最晚進去的,將會是最快出來的。 哀,人生有時候也是這樣不公平的吧,最晚出發的卻是最快抵達終點的。 不管啦,試著用 JavaScript 的語法實作看看堆疊吧。 先宣告這個類別吧:

當然你還需要一個陣列來儲存這些元素:

再來就是方法要先定義出來。 push(element): 新增一個元素到堆疊中。 pop( ): 從堆疊頂部移除元素,其值將會被 return 回來。 peek( ): 傳回堆疊頂部的元素,單純查看的動作。 isEmpty( ): 堆疊若為空則 true, 否則返回 false。 clean( ): 清除堆疊中的所有元素。 size( ): 傳回堆疊中的所有元素個數,類似於 Array …