文章列表: 2023 | 卡斯伯 Blog - 前端，沒有極限

2013-08-20

CSS3 文字陰影範例

本篇會介紹許多CSS3文字陰影範例，而text-shadow在瀏覽器的支援度還算高，有興趣的朋友都可以試試。來源參考：http://www.w3cplus.com/blog/52.html...

html

2013-08-21

image 與 SVG

image與SVG的運用...

html

2013-08-22

html meta基本語法

傳說中meta只要能夠使用的好，可以帶來許多意想不到的效果，甚至是連用了都不知道有什麼功能...。參考文章：http://www.cnblogs.com/sniper007/p/3258389.html 延伸閱讀：http://code.lancepollard.com/complete-list...

2013-08-26

Sass HSL function

sass在顏色的處理有許多function可以用，如果多善用這些function可以讓網頁有更多的變化，並且提高網頁的一致性。...

2013-08-23

Web Font的基本設定

Web Font的基本用法不會很難，如果是要用本機的方式，首先就是要先找個資料夾放字型檔，接下來參考@font-face的作法即可。...

2013-08-30

Sass 基礎教學-為何要學Sass

Sass官網看不到簡報請點此連結http://www.slideshare.net/slideshow/embed_code/11639772 上面這個簡報介紹了的很清楚，在經過一段時間的使用，發現已經回不去了(相信用過的都有這種感覺!)。為何要用Sass ?這用說的都是說不清楚，看範例比較清...

2013-08-24

CSS transition 各種速率

今天要介紹的是CSS transition中的timing-function，transition語法在CSS3動態中是相當容易被使用，如果再改變他的timing-function，可以獲得更豐富的效果。 ...

2013-09-02

安裝ruby以及sass環境

使用sass前的準備分為兩個部分: 文字編輯器編譯環境文字編輯器對於視覺設計師有Dreamweaver，而對於程式設計師則有vim、Visual studio等，除了以上之外這邊還會推薦使用sublime text，但本篇主要會先介紹編譯環境，所以在此不多敘述。編譯環境是踏入sass...

2013-08-31

Sass 開始前的問與答

sass官方網站 : http://sass-lang.com/ 如何開始使用sass呢? 在開始前，還是先認識一下這是怎樣的東西。...

2013-09-03

開始使用fire.app

上一篇介紹ruby的安裝並使用它來編譯sass，本篇就要介紹如何開始使用fire.app。官方網站 : http://fireapp.handlino.com/...

html

2013-09-15

網頁設計技能樹!

每天分享一篇文章，到今天差不多一個月了。剛好，明天開始是IT邦的鐵人賽，而這邊我會希望和鐵人賽的文章同步，不只整理過去的文章，並且以更細膩的文字去描述CSS的語法。...

2013-09-06

立體字風格

今天在Fb上看到justfont發了一篇文，就是他們官網上的字可以做立體的風格，我看到這個立體字，突然想到和之前long-shadow有一點點像，所以我決定來試試看sass版本的立體字。...

2013-09-17

CSS沒有極限 - CSS 的改變

本篇內容同步發表於http://ashareaday.wcc.tw/#2013-09-17 (建議使用Chrome瀏覽器) CSS是用來決定網頁的顏色、字型、排版等顯示的特性，現在除了以上功能外，CSS3增加了更多的效果，不僅可以增加網頁的閱讀性，還可以吸引使用者的目光。而許多的改變，正在影響著CS...

2013-09-04

CSS的小箭頭

常常在很多網站會看到小三角形箭頭，當期都是使用圖片去製作，而時代的改變，就是要用寫的比較潮，為了趕上流行，所以在這分享小箭頭的製作方法。...

2013-09-18

CSS沒有極限 - 瀏覽器的戰爭

承上篇，瀏覽器的數量越來越多，有許多需要克服。如老不死的IE瀏覽器、各式各樣的瀏覽器前輟詞、各種CSS語法的支援程度，都是需要去注意的。...

2013-09-19

CSS沒有極限 - Sass 與 Compass(1)

在先前的幾篇，有提過好幾次的Sass以及Compass、Fire.app等工具，在這邊就來釐清這些是什麼樣的工具。 Sass官方網站：http://sass-lang.com/...

2013-09-20

CSS沒有極限 - Sass 與 Compass(2)

承上篇，上一篇主要是介紹Sass和Compass是什麼，而本篇會介紹Sass和Compass究竟對CSS的撰寫有什麼樣的影響，讓許多工程師及設計師都說已經回不去了(回不去CSS)，現在就讓大家瞧瞧，它是多麼的強大吧(本篇介紹主要語法將會以Sass為主，並非使用Scss)。...

2013-09-22

CSS沒有極限 - 別忘了偽元素

偽元素在IE8之後全面都有支援，而這樣功能在CSS3可以創造出更多的效果。...

2013-09-23

CSS沒有極限 - text-shadow初試身手

text-shadow算是CSS3中較早出現的語法，而且不需要打前輟詞就能夠執行。...

2013-09-21

CSS沒有極限 - CSS3的色彩

在過去我們只要使用色碼來表示顏色，色碼是用三組十六進制數位表示，每位元組從00到FF，相當十進位數位從0到255...，而現在我們有了新的屬性alpha(透明度)。...

2013-09-25

CSS沒有極限 - 意想不到的background-attachment

background-attachment是背景固定模式的屬性，而不同的固定方式就能夠有不同的視覺效果，而人類的視覺是很容易欺騙的，適當的利用可以有意想不到的效果。...

2013-09-26

CSS的運算

今天來介紹CSS最犯規的function calc，通常會用來做數值的運算，尤其是針對於長寬等等，而他最特別的是運算的數值"不需要"相同單位。...

2013-09-24

CSS沒有極限 - CSS3的漸層

本篇介紹CSS3的漸層，而就漸層這功能聽起來，似乎沒有什麼樣的變化，但其實透過復合式的背景可以堆疊出相當多的變化。...

2013-09-27

CSS沒有極限 - CSS的新"文字"及"尺寸"單位

CSS3 新的文字單位大多數網站在文字的單位都是使用px，尤其在台灣多數使用者都是用windows系統，不管是什麼瀏覽器，在windows下都是以單數px是較為清楚的，如13xp．15px等，而px在建立網站時也是較為方便及準確的，但他的彈性是比較差的。...

2013-09-28

CSS沒有極限 - CSS藏頭詩 Selection

這是一個很簡單的技術，就是可以改變文字反選後的樣式，而支援的樣式並不多，目前僅有Color、background、background-color、text-shadow在內。...

2013-09-29

CSS沒有極限 - CSS3 :target選取器

CSS3多了相當多的selectors，而:target是其中一個，它可以讓html的id被套用上新的樣式，而這功能也可以讓html的互動性更高。...

2013-10-01

用sass 做long shadow

網頁設計的趨勢從擬物轉換為扁平化，而扁平化顧名思義就是較扁、較平，去除了真實化實體，扁平化也延伸出許多的視覺風格，而long shadow就是其中一種，讓扁平的世界裡，增添一些的立體感。...

2013-10-02

CSS沒有極限 - Transition 實作波動拳動圖

CSS3除了有更多的樣式外，其中一個重點就是動態，而transition是動態效果最容易達成的；所以本篇主要要介紹的是transition，以及transition的timing-function。...

2013-10-04

CSS沒有極限 - Web-font & icons

本篇所用的範例是Ligature Symbols，它所提供的的icons非常多，而且簡單易用。...

2013-10-05

自己做web fonts icons

承上一篇，本篇會介紹自己做web fonts icons，讓會手癢的設計師可以自行設計web font icon。...

2013-10-06

CSS沒有極限 - CSS3 Fliter 效果

假日都來介紹些單篇的主題吧~，今天要介紹的是filter。...

2013-10-08

CSS沒有極限 - CSS transform 概觀

接下來要介紹CSS transform，CSS3許多新功能中，我認為transform和animation是相當有難度的，但也是最有趣的，尤其在兩者搭配後，能夠展現出類似過去flash的動態效果，但卻能保持html原有的互動性。而在接下來的四至五天會分享transform相關的屬性運用。...

2013-10-09

CSS沒有極限 - CSS transform 軸線的謊言

從小上數學課，都會知道X軸是左右，Y軸是垂直，看起來就是這麼容易，但是一到了CSS上卻是常常分不清楚，而其中最大的陷阱就是旋轉(rotate)。這篇會用簡單的動態效果，讓大家了解旋轉與軸線之間的關係(本篇都是使用sass)。...

2013-10-07

CSS沒有極限 - Checkbox的妙用

CSS3 新增了:checked的偽元素，它可以判斷目前的checkbox 及 radio 是否有被選核，這樣html就能夠做出基本的點擊功能；並且結合label標籤，label標籤能夠讓樣式的套用更為自由，藉此增加畫面的豐富性。...

2013-10-10

CSS沒有極限 - CSS transform-origin

本篇介紹transform的起始點，一般來說變形的起始點都在物件的中心點，但如果需要像時鐘的分秒針一樣，中心點並不再物件的中心，就需要靠transform-origin去設定物件變形的起始點。...

2013-10-11

CSS沒有極限 - CSS transform-3D的透視(perspective)

本篇介紹的transform 3D的透視，如果沒有設定透視(perspective)，transform 3D就會像平面一樣呈現。所以在3D的物件上，一定要設定好"適合"的透視，怎樣是適合，來看看以下範例就能夠了解。...

2013-10-12

CSS沒有極限 - pure CSS 專輯列表效果

鐵人賽快要結束了，今明兩天會介紹純CSS可以做些什麼特別的效果。今天要介紹的是專輯相簿的效果。...

2013-10-14

CSS沒有極限 - CSS 的相關資料

今天沒有要介紹任何效果，是要介紹這些CSS資料是從何處獲得的。...

2013-10-15

CSS沒有極限 - 鐵人賽不是開始，也不是結束

在鐵人賽前一個月，我在進行一個計劃，就是挑戰100天發文，內容以前端為主，雖然每天都有新的文章，但我都不會特別去核對文章的內容。而鐵人賽開始後，將主題調整為CSS為主，內容也不是只將demo貼上後隨便貼個原始碼就結束了，許多內容都必須去尋找相關的資料，讓主題及內容更加可看性，這過程中也讓CSS的基礎...

2013-10-17

Animation 和 keyframe

CSS的Animation分為兩個部分，一個是決定動畫該如何跑的Keyframe，另一個是將動畫載入元素的Animation。簡單來說，就是先製作一個keyframe來決定動畫的影格動作，在將動作載入元素，而這兩個都是必要的。...

2013-10-20

CSS3 垂直文字書寫

html最早都是應用於拉丁文上，而拉丁文主要是水平由左到右的書寫方式，而到了其他的語系國家，文字也只能用水平由左到右的書寫方式；而漢字是屬於垂直書寫由右到左的書寫方式，現在也能透過CSS的writing-mode改變，就來看一下範例吧。...

2013-10-18

Animation 的各項設定值

和其他屬性一樣，animation有許多屬性可以設定，當然也可以用一個animation涵蓋全部，以下會分別介紹以下屬性的用途。來源：http://css.doyoe.com/ [ animation-name ]：設置物件所應用的動畫名稱(必填) [ animation-durati...

2013-10-24

CSS3 display:flex

display: box及display: flex，兩者是類似的伸縮排版語法但現在已經改成display: flex。 display: box; is a version of 2009. display: flexbox; is a version of 2011. display: fle...

2013-10-25

CSS3 Flex的排版方式

flex是用來排版的CSS屬性，在本章就用所了解的flex來排版看看，並且在介紹幾個flex屬性。...

2013-10-26

CSS3 Flex的對齊

今天參加了MOPCON，所以來介紹簡單一點的。承前篇，Flex是為了改善過去的CSS2排版模式所衍生出的新語法，本章則要介紹他的對齊方式。大量參考：http://www.w3.org/html/ig/zh/wiki/Css3-flexbox...

2013-10-29

CSS - pure CSS 星球公轉(3D)

有些時候技術光學習還不夠，必須想一些作品來實作，而這邊我要展示一個星球公轉效果，接下來介紹一些這當中所遇到的問題。...

2013-10-31

Transform3D 翻牌效果

再經過一連串的CSS3苦練之後...，發現我對CSS transform3D挺有興趣的，但是一個3D的Demo都要花很多的時間才做得出來...，如果不嫌棄就先看一些以前做的吧~。...

2013-11-01

試試看Json

之前寫了很久的CSS，很久都沒機會碰js，原本就沒多厲害的js又變得更生疏了...，最近正在學json就來稍微介紹一下吧。...

2013-11-05

利用json取得公開資料(2)

在上回已經取得資料，這次就來把取回來的資料放入到表格內。...

2013-11-04

利用json取得公開資料

之前寫了很久的CSS，很久都沒機會碰js，原本就沒多厲害的js又變得更生疏了...，最近正在學json就來稍微介紹一下吧。今天就來試試看抓政府的公開資料吧。...

2013-11-06

利用json取得公開資料(3) 並繪製圖表

上次已經把資料放進表格內，接下來我們可以透過一些圖表功能來視覺化這些資料，這邊可以透過一些線上資源來繪製圖表。圖表plugin：http://www.open-open.com/ajax/ajax20090708091447.htm...

2013-11-09

jQuery Mobile 載入google map顯示不完全的問題

Jquery Mobile的頁面載入google map會有一個bug(如第一個Go map button)，這一個bug會造成map只有顯示一小塊(如果螢幕大一點的裝置，就真的是很小一塊了)。 ...

2013-12-10

Just Another Beginner~

告別了一百多天的aShareaDay，在這裡即將有新的開始。在結束aShareaDay前一直在思考要用什麼樣的平台繼續寫文章，其中的選項有：目前超夯的logdown 自由簡單的wordpress 以及jekyll 當然，看到我這網站的位置，就是使用Jekyll in Github page，本...

2013-12-16

純 "CSS" Banner animation教學

在座這網站的時候，上方有保留一塊區域打算放banner，一般來說banner都會用jquery跑馬燈的方式去做，但是對我來說那要做好幾張圖…好麻煩，所以我就做一張連續圖片(左右可以相連的圖片)，讓他不斷的向右移動。...

2013-12-18

jQuery step by step 教學

不久前在高雄前端社群有介紹jquery教學，我的部分盡量做成一個步驟一個步驟，且就算沒有人教，也可以看著講義做下去。...

2013-12-14

aShare使用技術

上一篇簡單介紹了本站為什麼選擇jekyll，但是這其中並不是只有這一項技術就可以達成，其中除了我已經很熟悉的html、css、sass外，必須要了解Git、Liquid、Markdown等等的技術，當然其中會有許多困難，但是不斷的突破困境是進步最快的方式。本站所使用的技術如下 Jekyll Liq...

2013-12-19

效能更好的banner animation

之前有一篇介紹利用background-position製作動態的banner，不久後就接到效能不好的問題，所以我就重新用另一種方式製作，發現效能有明顯的提升，也很有成就感，本篇就介紹不同的動態banner作法。...

2013-12-27

前端軟體-Prepos介紹

情境當在進行前端設計的時候，如果想要分享Html給夥伴看看，有哪些方式呢？叫他過來看截圖之後，傳line給他看上傳到空間，丟網址給他看今天介紹一個更快的方式，利用prepos免上傳，直接傳網址給他看。...

2013-12-24

簡易CSS transform 視差效果

在先前範例中可以得知，CSS transform 來做視覺特效，效能會比原始的CSS2還要好，所以本篇就利用css transform 以及hover來簡單做一個互動的效果吧！...

2014

2014-01-01

font-family要怎麼玩

在平面設計中，字型的運用是一門高深的學問，而網頁設計中雖然大多使用內建的字體，但如果沒有的仔細的去調整，就像是word直接用內建的字型一樣，會產生不協調感。參考 Just Font...

2014-01-04

Jekyll 介紹

本篇開始會重頭介紹Jekyll，如果對jekyll有興趣的開發者，請先必備以下的技能。熟悉 Git (至少要會git push) 熟悉 Html (修改 template 及寫文章用) ...

2014-01-04

Emmet Live Style 加減用啦~

livereload for Windows因為是測試版，經常性的有問題，有時候還會不能使用，這時候可以試試Emmet LiveStyle，他主要會針對CSS的部分直接reload。來看看官方的影片吧。 ...

2014-01-06

GitHub Page

這一篇先介紹Github Page，這一個空間是每一個GitHub使用者都可以了解的地方，如果需要做一些DEMO給其他人看，可以試試看這方式，速度快，而且免費!...

2014-01-12

利用Jekyll Bootstrap 快速建立Blog

Bootstrap是一套好用的framework，而jekyll就利用bootstrap的便利建立一套jekyll framework，稱作為Jekyll Bootstrap。除了版型外，還另外增加許多實用的模組，如Disqus、google analytic等等，本篇就來介紹如何在github上建...

2014-01-13

在Winodws上運作jekyll

Jekyll是在Ruby環境下運行，而Windows對於Ruby的支援性較差，所以在安裝時較為麻煩(Mac OS使用者可以直接參考官方網站)，並且會有些問題，有興趣的Windows user就來參考我這篇吧~(我至少從頭裝了5次!)。...

2014-01-14

在Jekyll設定自己的留言板

寫blog的作者，都會希望每篇文章都能有些回覆，所以一個留言機制是必要的，但是jekyll本身是屬於靜態網頁，並沒有資料庫，所以必須透過其他服務來做。在jekyll bootstrap內已經有包含disqus的留言板，而且設定容易，使用者也相當多，非常建議用disqus服務。...

2014-01-15

在Jekyll中調整屬於自己的Template

會用jekyll有一部分是想要自己設計版型，我所擅長的是視覺設計、HTML、CSS，我就用這幾個技能設計自己的版型，當然這並不是那麼的一兩篇就可以介紹完。所以這篇會說明一個範例，介紹Jekyll中的版型運作邏輯，有興趣的使用者可以依據這概念設計屬於自己的blog。...

2014-01-22

從CSS到Sass 學習分享

本身是視覺設計系所畢業，在學期間雖然有做過網站，但其實Html及CSS可以算沒有寫過，連html需要結尾都不知道。兩年前，進路職場還是相當依賴Dreavweaver，所以更別說Sublime text這麼潮的工具，我是根本連聽都沒聽過。但到了現在，對於CSS及Sass已經可以和人侃侃而談，閒暇之餘...

2014-01-27

Amazon book 書籍封面展示效果 (CSS 3D)

自從學了CSS 3D後，就一直想嘗試使用在網頁上，但除了形象網頁外，使用CSS 3D的網站似乎不是很多，畢竟這不是必要的效果。而最近在Amazon Books的購物商城上，發現他們有用CSS 3D在展示書籍的正反面。 Amazon books...

2014-02-10

做網頁如果缺Icons怎麼辦

最近很多人跟我討論到的網站上icon的問題，如果要畫icon要花多久時間、使用的方法等等。而以我來說，較傾向使用免費icons或者是付費的向量icon，不建議自己畫這些icon，因為要畫一個icon所花的時間成本，都可以買一套200枚的icons了= =。而今天要推薦的是ico moon，這在之前...

2014-02-14

Sass 模組開發

最近社群上有人分享了一個連結，是關於sass模組製作的教學，大致看了一下，發現和我的方式頗為接近，所以就在這介紹我的Sass模組開發方式。 http://www.sitepoint.com/sass-component-10-minutes/...

2014-02-21

CSS設定中英文不同的字體

Just font中的字型學文章都相當有意思，而有一篇是關於中英文字搭配的問題；這篇雖然是以windows word為例，但裡面的概念在網頁上也是很有幫助，而其中一段”以 Windows 內建的三種字型為例，表現最好的是微軟正黑體，英文部分採用了微軟的 Segoe UI，粗細與中文較一致“，在目前w...

2014-02-26

大陸面試題如何反轉元素內容

最近大陸網路上有篇問題文，問題：看到一道面試題：ul有10000 個li子元素，如何將這10000 個li顛倒順序。而其中有一個神回復，真的是活用CSS3的特色，所以在這邊分享給大家看看(本篇以150個為例)。來源：http://v2ex.com/t/100982...

2014-03-01

Jquery 重複click判斷

今天要分享的是Jquery 重複click判斷。來源參考http://jsfiddle.net/visualidiot/WJEBr/...

2014-03-13

Spriting with Compass

因為最近剛轉換工作，所以一段時間沒寫文章，沒寫文章的時間雖然不至於會退步，但會感覺到進步遲緩…。這次來介紹利用Compass製作sprites，sprites 就像是的Google icons，他把許多的icons集合在同一張的png，這樣可以減少用戶對於伺服器的請求數。而這次會有兩篇sprite...

2014-03-24

Sprites for Retina

上禮拜教召，讓這篇已經準備好的文章又拖了一個禮拜…，然後現在打開卻有點忘記怎麼做…。 Compass sprites for retina來源：https://speakerdeck.com/hlb/maintainable-css-with-sass-and-compass Hlb的簡報有介紹，本...

2014-04-21

SVG 簡介

好久沒寫文章了，這段時間工作還是經常的會翻這Blog的資料，裡面很多很多的技術雖然很基礎，但是就是很實用。所以呢！現在要挑戰”基礎”SVG！...

2014-04-30

SVG Group

上一篇有簡單介紹一下SVG的元素，雖然沒有介紹很詳細，但是很多部分都和Canvas很相近，所以就不詳細介紹了。而這篇要介紹svg <g>這個標簽，它的用途是群組化元素，而被群組後的元素就可以一起被控制，甚至是一起設定樣式。...

2014-05-01

SVG 矩形、圓形、橢圓

SVG是屬於向量的圖形，所以他有許多的繪圖概念與Illustrator，所以這次就來了解他的一些常用的基本圖形。 ...

2014-05-02

Sass 3.3

Sass3.3出一段時間了，而Fire.app目前還是3.2的版本，據說是因為在等Compass 1.0正式版，而如果用Ruby的Compass確實也只能用3.2 版的sass。不過新東西就是想用看看，上網查了一下並不複雜，所以這次就來試試看Sass 3.3 + Compass 1.0.alpha...

2014-05-05

SVG 線段

這次要練習的是SVG的line、polyline、polygon，這三個都有點類似，但是Polyline和Polygon兩者之間卻有線與塊之間的差異。...

rails

2014-05-09

玩玩看Rails

對Rails有些興趣，而線上剛好有Step by step教學，不如就試試看(本篇只是個操作記錄，並不是教學)。...

2014-05-20

純CSS Drop Menu

CSS 有很多技巧，都很值得去開發，最近發現了一個很簡單的技術，就是純CSS下拉式選單，這讓我避免使用Jquery去做slider的效果，重點是…超簡單！ ...

2014-06-02

Sass 3.3 Source Maps

Sass 3.3 除了上次提到的$Map外，還有另一個很有特色的功能就是Source Maps，這功能主要是配合開發者工具，直接就可以看Sass原始碼在哪一個檔甚至是哪一段，而這篇會配合Chrome 開發者工具來介紹Source Maps。...

2014-05-23

CSS + html 冷知識

CSS及HTML已經學了有段時間，但還有許多不清楚的點都會在(偶然)的情況下發現，而有些只是有趣，但有些發現，或許是以前忽略的，但在卻是那麼的實用…。...

2014-06-05

SVG 漸層沒想到是這樣的做法

最近在研究SVG，在做專案的時候就會想用一些相關的技術，當時想在stroke上使用漸層色，所以就研究了SVG的漸層做法。 SVG的漸層做法，和我想像有些落差，原本以為會是類似CSS的寫法，但結果卻…。...

2014-06-15

CSS + SVG stroke 動態描繪

SVG有很多有趣的效果，尤其是stroke，它有許多不同的屬性參數，套用上css animation就有意想不到的效果，雖然不能達到豐富的互動，但至少可以在視覺上令人為之一亮。這篇要利用stroke的dash特性，做出圖形描繪的動態效果。...

rails

2014-06-22

Rails 環境建設

最近要學的技術有兩個，一個是D3.js，另一個是Rails，目前是參考Xdite所提供的Rails 101，安裝過程中有發生些小問題，所以特別記錄起來，以免之後要在裝的時候忘記…。 Rails不是要打算精通後端，而是希望了解，以便往後再配合後端時能更有效率的處理問題。...

d3

2014-06-24

D3 Js 介紹

之前有提到最近要學的技能是Rails以及D3.js，這也是我今年的計劃，剛好也趁最近Diablo III手氣不好，一直打不到華戒，就抽空來都學學吧。最近的文章，都不算是什麼教學文，算是學習記錄。...

2014-07-23

翻譯Material Design心得

距離上次的文章也將近一個月…，這段時間主要是在翻譯Google Design，所以有一段時間沒有發新的文章。然而翻譯Google Material Design的原因，也是想要讓中文化後的更多人閱讀，進而引起大家的討論。整體翻譯的時間從6月27日到7月23日將近一個月的時間，特別感謝從一開始就協助...

2014-09-04

安裝Gitbook

利用Gitbook製作電子書是相當容易的，作者只要熟悉markdown語法以及簡易的安裝，就可以快速編寫屬於自己的書籍，它有著以下幾點特色。利用git 版本控制用git就可以發佈新版本利用markdown語法編寫包含手機版這邊就簡單介紹如何安裝gitbook server在自己本機上，...

2014-09-22

Gulp 環境安裝

鐵人賽我有準備一些文章，如網頁視覺設計(技巧、grid system)、前端設計工具的文章，比較偏向視覺設計以及前端工程的混和，但是鐵人賽我決定要換主題，所以文章就直接放出來(都寫了別浪費…)。這一篇是Gulp的安裝，後來還有一系列的Gulp文章。 Gulp 可以做什麼Gulp 是一個前端任務管理...

2014-09-05

Gem Github pages

最近聽說github pages有更新，那我也稍微看一下(真的只是稍微)，之前都是用純Jekyll寫Blog，現在發現有github pages的gem(其實已經存在很久了)，似乎可以方便很多。這篇主要就是記錄安裝過程以及簡易使用。 https://github.com/github/pages-...

2014-09-30

2014 鐵人賽慢慢開始跑

去年參加了鐵人賽，主題是CSS，這過程中讓我獲得很多，重點並不是在於得獎，而是在每天追求的過程中，必須在有限的時間內不斷地追求知識，也不斷的挖掘有什麼是可以分享的。...

2014-10-01

SVG 簡介

這部分會持續幾篇，主要是我先前Blog整理出來的，不會相當的深入，是為了解SVG的使用方式。另外這次鐵人賽也有高手是介紹SVG，如果有興趣也可以參考其他高手的文章。 SVG(Scalable Vector Graphics)，中文直譯就是”可縮放向量圖形 “，它是以XML格式儲存，而在瀏覽器上是從I...

2014-09-24

Gulp Task and Gulp Pipe

Gulp主要有四個指令，用這些指令就可以完成大部份工作。 gulp.task(name, fn) 定義一個任務名稱，接下來指定任務的工作內容 gulp.run(task) 運行指定的任務 gulp.src(glob) 檔案來源 gulp.dest(folder) 檔案的存檔路徑而在上回的範例裡...

2014-10-02

SVG 超硬派了解 line, polygon, polyline, path (手工繪製)

這部分會持續幾篇，主要是我先前Blog整理出來的，不會相當的深入，是為了解SVG的使用方式。另外這次鐵人賽也有高手是介紹SVG，如果有興趣也可以參考其他高手的文章。今天要介紹的是線段系列，可以想像成Illustrator的鋼筆工具(也不知道為什麼要翻譯鋼筆工具，據說是設計師不會懂貝茲曲線…)，分為...

2014-10-03

SVG 超硬派了解 path Arcs

這次來到Path的最後一個屬性A，A是所謂的弧形，和先前不同的是，弧形一個屬性可以比上一章全部的難度…。這次看看能不能用硬派的方式來學習Arcs弧形…。本篇建議使用超過720px裝置觀看...

2014-10-04

SVG Defs 以及 CSS

SVG內還有一個相當有趣的標簽<def>，用途是先定義一些圖形、漸層、形狀等等，甚至可以把它們群組起來，等待使用，如果用Illustrator 來介紹的話，就像是圖樣工具。...

2014-10-06

D3js 前置作業，製作簡易Server

部分情況下，直接點兩下index.html就可以打開網頁，而且js都可以正常運行，但某些瀏覽器會限制js載入本地端的檔案，主要是安全性考量，這也可能影響到d3js嘗試載入任何外部檔案(CSV、Json等等)，為了避免往後的範例有這樣的問題，所以必須要有個簡易的伺服器。...

2014-10-05

SVG Stroke , Marker 以及 CSS

今天是假日，就來個簡單的收尾，來介紹這幾天的混合用法，當然，我不會想在假日看到<Path>…。會先介紹之前Blog所提到的stroke animation，在介紹marker，marker是製作一個圖形，套用在line、path、polygon等等的線段上，可以定義在起始點、終點、以及...

2014-10-08

D3js 將資料投影到SVG上

先前介紹SVG那麼多的篇幅，結果上一篇居然用Div了事，這樣怎麼說得過去…，所以這篇要用SVG把”資料”畫出來。...

2014-10-09

D3.js Scale 尺度

上一篇其實就已經介紹了D3.js相當重要的data()以及enter()，今天要介紹的也是很重要，就是(Scale)尺度。...

2014-10-10

D3.js 國慶日在家裡畫長條圖

上一篇的重點相當重要，可以運用在各種圖表上，而其實在之前介紹的用div繪製直條圖，在SVG上當然也是行得通，而且相當容易，今天是國慶日，當然就要來點簡易好吸收的主題。...

2014-10-11

D3.js 利用Excel建立資料(CSV)

做了那麼多，資料都是隨機產生的，雖然每次打開都不一樣，但是還是假的資料，這次來試試看讀取Excel的資料吧。...

2014-10-12

D3.js 讀取CSV資料並繪製成長條圖

有了Excel的資料，也可以用d3.js去轉換成json，再結合前幾篇所做的長條圖，不就可以輕易的完成資訊圖表了!?是的，這次就來完成這個圖表吧。...

2014-10-13

D3.js 軸線(Axis)

到上一次為止，其實就可以畫出簡單的資料圖表，現在開始就要讓資料圖表更為豐富且好閱讀。今天要介紹的軸線(Axis)，讓圖表上多一個可以閱讀的尺標，D3.js正好有提供這樣的函式，可以輕鬆的產出軸線。...

2014-10-07

初入D3.js

先前的練習差不多了，接下來要開始實作，不過要先聲明本文是學習過程的記錄，所以很多範例是參考網頁互動式資料視覺化: 使用D3，當然到了後面也會有很多不同的運用，並不會重頭到尾都是這本書的內容，就像上一篇一樣，還可以玩玩柯P的API。...

2014-10-14

D3.js 折線圖(Line Chart)

在開始有題到網頁互動式資料視覺化：使用D3這本書，整本大致上都看完了，但是裡面居然沒有折線圖！雖然這本書主要教的是觀念，不過折線圖還是很重要，所以還是另外找了折線圖的範例來仔細學習一下。...

2014-10-15

D3.js 究竟搭不搭捷運與死亡率有沒有關係？(1)

D3js最終還是需要與資料串接，在玩了一段時間基本的功能後，就會想找點東西試試看，於是就到處搜尋可以用的資料(希望與時事結合)，雖然取得資料方法相當多，但是能夠派上用場而且又要會使用，就沒有那麼容易。因為我的jsonp，或者json能力並不是挺好，所以在找資料前，有先研究怎麼與Google Dri...

2014-10-16

D3.js 究竟搭不搭捷運與死亡率有沒有關係？(2) - Google 試算表

上一篇提到資料是放在Google 試算表上，然後再透過web 前端去接資料，當初會想這麼做的原因有以下幾點：資料路徑穩定，不易掛點技術上只要成功一次，以後都沒問題資料建立簡單，大部份的人都可以參與可以多人協作對我來說，資料怎麼接一直是很大的問題，也在想如果沒有後端技術，要處理資料是不是...

2014-10-17

D3.js 究竟搭不搭捷運與死亡率有沒有關係？(3) - 將資料繪製成折線圖

有了資料跟一些D3.js基礎後，就可以嘗試把資料轉換成圖，雖然萬事已經具備，但要繪製成圖，還是需要費些心力。...

2014-10-18

D3.js 圈圈小效果

D3js除了繪製圖表外，還有許多開發者拿來作為視覺或者互動效果，假日的文章，就來介紹一些網路上所找到的效果。...

2014-10-19

D3.js 超粘的Voronoi Diagram繪圖

Voronoi Diagram這個繪圖我在Blog的Banner上，主要原因也是因為他很有趣，除了視覺感外，它還包含了簡單的互動。...

2014-10-20

D3.js Transition動態效果

先前的資料，都是固定的，沒有任何變化，這次要介紹的是利用資料的轉變以及transition的效果。...

2014-10-21

D3.js 資料數量增減

資料很多時候需要比較、切換，所以可能會同時加入多筆資料，前一篇文章所介紹的是相同數量的資料，這次要做隨機的資料量。...

2014-10-22

像jQuery 一樣的D3.js，柯P野生官網API

D3.js其實最重要的還是資料，恰巧有一位候選人做了Open data，他的API格式相當優良，如果對於找不到合適資料，但需要做些練習，不如試試看柯文哲野生官網吧！ http://unlimited.kptaipei.tw/...

2014-10-24

D3.js 也可以像音樂一樣動吃動吃動(2)

上一篇介紹了資料的來源以及動機，這篇就來介紹執行的層面吧。在原本的範例中，是只有一個圓在跳動，但是音樂所能擷取的資料是一段很長的陣列，我就思考著是不是有辦法做成折線圖，並且讓他有躍動的感覺。...

2014-10-23

D3.js 也可以像音樂一樣動吃動吃動(1)

學習D3之後會常思考有什麼樣的資料可以圖形化，除了Open data外，還想到一個就是音樂，以前使用Media Player，有許許多多的音樂視覺化的效果，都是透過聲音大小變化，所以如果有聲音大小變化的資訊，似乎就可以達到這樣的效果。...

2014-10-25

d3.js layout (以環保局資料為例)

介紹這麼多，但是還沒有介紹到d3.layout，這用途是可以快速建立圖表，這篇來介紹pie layout，用的是環保局的資料。...

2014-10-26

d3.js 再看更多layout前，先來轉換json結構

上次提到d3.js有包含許多的layout，但是每種layout都有些結構上的限制，就比如說 Tree Map，這樣的layout就需要巢狀結構的json才可以製作，D3js也有提供巢狀結構的轉換，這邊就來介紹最常用的轉換方式。...

2014-10-27

柯P的財務報表套用 D3js Partition Layout

看到KP API裡面有提供競選經費查詢，如果之前把資料撈回來，很難了解支出收入的關係，而且在支出與收入之中，何者比例較高。...

2014-10-28

PDF轉CSV，利用Tabula

D3.js最重要的就是資料，所以需要有許多不同的資料轉換方式。PDF是常見的檔案格式，因為製作方便，又可以跨裝置，所以PDF也是經常取得的檔案格式之一，相信大家都使用過PDF格式，它很適合閱讀，但至於轉成資料格式呢？似乎就沒有那麼容易。這篇就來介紹Tabula將PDF轉換成CSV作為D3.js所需...

2014-10-29

D3.js 鐵人賽的結束

這次參加鐵人賽，我也猶豫了很久，在開始前我已經準備好了近十篇另一個主題(視覺前端與前端技術)，但是牙一咬就報名了另一個主題d3.js，用意是想學d3.js。學習的過程中挫折也是挺大的，因為我對於資料處理並不擅長，光在json的處理就費盡心思，還好在學習的過程中有許多人可以讓我詢問該怎麼做，不然真知道...

2014-11-07

Gulp RUN ruby-compass

最後一篇，來介紹gulp-compass，這一篇的內容較短，但是要特別注意系統是否可以運作ruby以及ruby compass(由於compass有更新)，所以和前一篇的差別會是多了ruby。...

2014-11-12

前端設計師的設計與執行

圖片來源 google material design 看到嫁給RD的 UI Designer 的這篇文章有感，想說也寫一下我對於這個主題的想法，在工作的流程中，每個人所佔的崗位不同，都會有不同的觀點，她的這一篇所在的角色是UI，我的看法是設計師與前端之間的角色。從學設計到現在轉職成前端，因...

2014-11-06

Gulp webserver 以及在不同系統上運作 Gulp

透過以上兩篇，基本上已經可以套用許多gulp的工具，而這篇要介紹的是gulp webserver，以及在不同環境使用gulp (mac OS, Windows)。...

2014-11-24

視覺前端 - 按鈕的個性

在參加完鐵人賽以後，會想要再精進UI設計的部分，所以想試著寫設計得文章，接下來會連續幾篇UI設計的文章，有些是在鐵人賽前就準備好的，最近在重新整理PO出來，希望大家會感興趣。網路上有許多開源的Framework，通常我都會參考他們的按鈕以及表單設計，因為這是最能夠表達Framework特色的元件。...

2014-11-26

視覺前端 - 按鈕的使用情境

視覺規範沒有一定的標準，究竟是美醜優先，還是使用者體驗優先，這都沒有一個準則，當然在最理想的情況下，是能同時符合兩者。所以在按鈕的使用上，我嘗試找出一些規則，來讓畫面不至於凌亂，並且讓使用者可以感受到舒適。而按鈕本身有著不同的個性，所以在畫面的使用上，也會依據需求的不同，來使用不同個性的按鈕。就算...

2014-11-25

高雄前端社群 - d3js

上週在高雄前端社群介紹的D3.js，忘記放到Blog上，這次介紹的內容，和之前在鐵人賽有許多不同的點，範例很多都是全新的喲。...

2014-12-02

Jquery 重複點擊判斷

這篇是舊文重貼，原本是在aShareaDay上的文章，可能因為太短…，所以我沒放到這新的Blog上，但最近有人在詢問(感謝貴人提醒)，範例也相當實用，就再重新放上來。...

2014-12-03

Webkit 自定義Scroll Bar外觀

Webkit 可以利用CSS修改Scoll bar的外觀，有試過其他瀏覽器是不行的，而有時候在使用局部範圍的overflow: auto，會需要較為纖細的scroll bar，如果不在意webkit以外的瀏覽器，可以試試看這個方法。...

2014-12-04

試試看Canvas

這篇也是前一個Blog的文章，最近在整理就一起拿出來。 Canvas挺有趣的，在一年前試過，而網路上也有相當多的library，但是在使用lib前還是先簡單了解一下canvas的運作吧。參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HT...

2014-12-08

試試看Canvas (2)，調整Canvas圖片色調

這篇也是前一個Blog的文章，最近在整理就一起拿出來。 Canvas挺有趣的，在一年前試過，而網路上也有相當多的library，但是在使用lib前還是先簡單了解一下canvas的運作吧。參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HT...

2014-12-18

專輯封面顏色作為背景色(平均色)

現在有些音樂專輯選單做得很豐富，其中一種背景色會隨著專輯色改變，我剛好想到以前有做一個CSS專輯選單，如果結合Canvas似乎就能達到差不多的效果，所以就來試試看。...

2015

2015-01-08

2014年度回顧

2014年在學習上是豐收的一年…，踩著過往的基礎，學習速度越來越快；但還有許多地方經歷不足，對於許多事情也相當任性，除了能力的上升以外，對於人生也要多學習啊～。...

2015-01-13

CSS 冷知識

前幾天參加了Happy designer + RGBA的活動，這次不僅僅是兩個社群的合作，還是以CSS為主題作為介紹。這次活動不只介紹了CSS架構，還介紹了許多CSS的奇妙解法，想到很久以前也寫過類似的文章(CSS 冷知識)，個人認為這類冷僻解法相當有趣…，有機會應該定期發表CSS冷知識。...

2014

project

2014-12-31

參與開源專案

最近有參與高雄的開源社群Code for Kaohsiung，除了人到場以外，也想盡份心力，所以試著來提出一個構想，花了些許時間建立了模型，並且拿到社群介紹這個構想。這個構想源自於之前所研究的D3.js，在後期的學習，會思考怎樣可以簡易的建立資料，並且運用圖表分享。...

2015

2015-01-16

CSS 5種垂直置中方法

說到垂直置中一直是網頁設計師的痛，早期解決方法沒有那麼多，最常見到的就是height = line-height這種方式，可是這方式彈性很低，如果遇到多行文字就無法使用。然而隨著CSS的演進，越來越多種垂直置中的方法，這邊就介紹幾種實用性高的垂直置中方法。...

2014

2014-12-09

試試看Canvas (3)，Canvas 小畫家

這篇也是前一個Blog的文章，最近在整理就一起拿出來。翻翻一年之前做的，才發現原來有很多很酷的東西，還好有寫成簡易的文章，讓現在再重新看可以很快瞭解，這篇是介紹用Canvas做小畫家，並且還可以下載下來的功能，有分為好幾段，這邊全部合併成一篇。...

2015

2015-03-16

投資自己、投資資產

之前就有打算Blog的內容不全部都是技術文，最近看了不同領域的資料，有很多不一樣的看法，其中有一本書對我的看法有很大的改變，富爸爸告訴你，為什麼A咖學生當員工，C咖學生當老闆！，這本書是屬於理財方面的書籍，之前理財完全沒有概念，想說閱讀看看，說不定有幫助，看完之後想法改變非常多…。...

2015-03-23

Middleman 超級快上手

之前長時間都是使用Fire.app(到目前也有在用)，因為少許原因，所以一直有在嘗試其他工具，而之前有介紹過Gulp，他可以透過Node.js做出類似Fire.app的工具。而最近，有人和我介紹了Middleman，嘗試了一小段時間後，比想像中更容易，更貼近Fire.app，比Gulp更好設定，有興...

2015-02-11

Sass map get

去年有介紹sass模組的開發方式連結，sass 3.3 釋出以後有更好的方式去執行，這篇來介紹快速且好管理的模組製作方法。...

2015-04-09

Zeplin, 跨越工程師與設計師的鴻溝

從去年開始，做網頁設計時都開始使用Sketch，一方面是對於Web來說，Sketch相當的合適，另一方面則是Sketch有相當多的擴增工具，讓在執行上可以方便不少。這次就來介紹Sketch的擴增工具Zeplin，設計師可以透過這套工具，快速的傳達設計的內容，包含顏色、間距、字型等等，而工程師不會因...

2015-04-10

Javascript 閉包

一直以來我都不太敢寫純 Javascript的文章，主要原因是底子不夠深，害怕寫了之後錯誤太多，但最近想學看看React.js，如果說一直不敢寫的話，那麼就無法進步。這篇是要介紹Javascript閉包，參考的是這篇文章，這篇寫得不錯，從頭到尾看到有感受到閉包的用法，但或許有錯誤，也在這邊重頭到尾...

2015-04-20

開始學習 React js

最近開始來學react，相關的文章不會寫得非常細，主要是要寫學習過程。參考文章：http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/...

2015-04-21

Reactjs 元件的生命週期

這篇也是React.js的學習過程文章。...

2015-04-23

Reactjs JSX格式轉換

剛接觸React.js通常遇到一個問題，就是開發環境怎麼配置，原因在於JSX的格式需要轉換。JSX讓javascript內可以插入html tag，雖然是可以選擇使用，但官方也建議使用JSX格式來進行開發，如果對於React.js有興趣的，不妨參考一下這篇JSX格式轉換吧。...

2015-04-27

Middleman + Reactjs

上一篇是使用gulp來轉換jsx，這篇是介紹用middleman 結合 React.js。...

study

2015-04-30

關於學習

在學習上和以前看法有很大的不同，以前讀書是為了分數，但我本來功課就不好，也對分數沒什麼追求，只要勉強及格就好，記得在復興商工(復興美工)的時候，每年祈禱不要留級就好…。現在學習比以前更有成就感，認真學習可以效率更高、拿到更好的薪水、甚至認識更多的高手。不過就這幾年來的心得，學習並不是短時間所達到的...

2015-05-06

壓縮css的終極必殺技

CSS 再怎麼開起開壓縮，頂多縮個幾十k，uncss可以搜尋html內所用的class、id，再將.css內的多餘class or id移除，達到最佳化的壓縮。...

2015-07-22

用CSS呈現影像比對效果

http://lea.verou.me/這位工程師的CSS能力非常優異，他的blog有很多意想不到的效果(而且是個正妹)，這邊來分享他的其中一個效果。...

web

2015-08-13

隨意玩玩的 nw.js

之前就有聽說 web可以上桌面應用程式，也找到相關的工具，這次就是把實驗的成果記錄下來。...

2015-07-23

CSS column 教學

CSS column對於文字排版有很大的幫助，就類似Adobe indesign在文字排版時，只要指定文字欄數，再將文字全部匯入即可。這樣在文字編排時則會以內容為優先，並非受限於html規則。...

2015-08-14

動手玩 CSS，快速學會Flex

上次製作了CSS column的範例，對於學習CSS column可以快速地瞭解(但實際運用相信坑非常多)，這次用angular製作了flex的範例，讓大家透過動手玩來快速瞭解這是怎樣的坑。...

2015-10-07

Hotjar 網站熱圖

Hotjar 是監視網站使用者資訊的工具，提供 Heatmap、Recording、Funnels、Forms 四種監測服務，透過這四種服務可以分析使用者行為，判斷使用者操作是否符合預期。...

2015-10-19

SVG 客製化 checkbox

先前有看到酷炫的checkbox效果，一直想要做看看，最近在整理資料的時候發現還沒做(因為坑還很多)，這次就來介紹這樣的效果要怎麼完成。...

2015-11-20

將 Sketch icons 轉成 web icon fonts

在之前轉web font icons 通常是使用Icomoon，他提供不錯的介面以及大量的icons供開發者使用，但有些時候Icomoon並不符合我們的需求，例如：公司專案，不宜上傳到第三方空間有版本控管需求時設計師控制慾很強時(? 而萬能的Sketch及Gulp再合體之後，就有了Sket...

2015-11-25

更棒的 Jekyll 編寫工具

這個Blog也維持很長一段時間了，曾經會想要放棄維護轉到其它平台，主要原因是Jekyll上稿有些麻煩的地方，其中一項最痛的就是上圖…。在上圖之前，都必須先將圖片放到/images，接下來再手動寫相對位置，如果圖片要換，就必須再打開/images資料夾，一來一往必須花很多時間。最近發現了Atom編輯...

2015-12-01

客製化屬於你的 Bootstrap 4

Bootstrap 是目前最流行的CSS Framework，第四版也釋出了開發版本，無論第幾版對於工程師來說 Bootstrap 就是那麼的容易上手，但扯上設計就要多多配合了，不同身份看待 Bootstrap 也有不同看法，例如：設計師：Bootstrap 很醜誒，你看那個濁濁的顏色 (當然每...

2015-11-28

過去的學習每天一分享

很多人會問我設計師怎麼轉工程師，主要的方式當然是每天練啊！ (故事回到了2013…)當時會的不多，基本的CSS(還有一些些sass)、簡單的jquery，不會任何框架，所有的技術都很基本，那時給自己的目標是連續一百天發文…。...

2015-12-12

被討厭的勇氣

你過得快樂嗎？如果不快樂，代表你不夠在乎你自己。 “被討厭的勇氣”是我今年看過最值得閱讀的一本書，書中的引言有許多人提到為何沒有早一點看到這本書，在我讀完以後也會有這樣的感覺，可見內容之精彩。本書的內容是以故事性的方式呈現，大綱是一位哲學家與具有反社會心態的年輕人對話，在不同的夜裡年輕人不斷挑戰哲...

2015-12-20

Compass 替代方案(1) - 更快速的 Sass

Compass 是一套非常優秀的 Sass 擴充套件，從剛開始學 Sass 就一直用到現在，許多優點是一般 CSS 或 Sass 較難達到的，如： CSS Sprites：可以將圖片轉成Sprite，並提供 CSS class。 CSS3 mixin：prefix 啊～ Vertical Rhyt...

2015-12-25

Compass 替代方案(2) - 透過 PostCSS，停止加入不必要的 prefix

承上篇，因為 compass 很久沒維護，所以在找替代方案。而這篇是要介紹很火紅的 post-css，主要是要解決 css3 prefix 的問題，post-css和 sass 不同的是，在 prefix 的方法不需要先定義成 @mixin ，可以在事後再決定是否加入 prefix，這讓不斷在更新改...

2016

2016-01-03

Compass 替代方案(3) - 加入 SVG Sprites

Compass 的 CSS Sprites 是非常好用的工具，在以前有介紹過 compass 的 Sprites 作法，只要把圖片丟一丟就可以完成，而且也可以做 for Retina 版本，但是使用SVG 製作 Sprites 就沒有辦法。一直以來我都是以向量工具做設計，如果不能轉 SVG 這樣高品...

2016-01-10

動手玩 CSS Blend Mode - 根本 Photoshop 的圖層效果

現在的 CSS 變化比過去還多，原本的 CSS 主要用於排版，在 CSS3 除了排版還會包含許多效果，本篇介紹的 Blend Mode 就是混合模式的效果，讓 CSS 像 Photoshop 一樣有圖層混合。...

2016-01-16

跟 Javascript 相比，CSS 還是友善多了 @@

本週參加了高雄 Javascript 讀書會，所選擇的書籍是 JavaScript設計模式與開發實踐，這本雖然原本是簡體書，但內容真的不錯(不過我只有看一兩章似乎沒什麼說服力 >O<)，也多虧這次的讀書會，讓我對於技術有更深層的看法。 JavaScript 什麼的太難了…，直接請人教比...

2016-01-30

第一次 CSS 讀書會

這次在高雄舉辦了 CSS 讀書會 (Grid syetem)，主要是之前參加了 javascript 讀書會，認為CSS 也能辦相同的聚會，在第一次試辦時有許多測試水溫的方式：想先瞭解受眾類型估計參與人數直播的方式是否可行未來讀書會的方向 ...

2016-01-24

動手玩 CSS 3d

一開始接觸 CSS3 時，常常會不了解每個 CSS 屬性的意思，就需要花些時間去查詢及嘗試，就算到了現在，對於不熟悉的語法，我還是經常回我的 Blog 查詢，如先前的動手玩 CSS，快速學會Flex，我就經常會回去查 Flex 的使用方法 Orz…，這次趁寒流來襲，不想出門的時間在家裡做簡單的 C...

2016-02-29

第二次 CSS 讀書會 - Sass 環境建置

這次是第二次的 CSS 讀書會，目標是要教大家 Sass 的環境建立，也算是比較大的挑戰，因為要在線上及現場教大家怎麼運行 Sass 的編譯環境，且主要的目標族群包含了設計師、網頁設計師，甚至是沒有碰過 command line 的開發者…。...

2016-04-11

響應式網站設計實作坊 - 高雄前端社群

本篇拖了很久很久才寫，主要原因是因為最近實在很忙，加上一直想跳到 Wordpress 平台上去寫作…(Server 都準備好了)，但 Wordpress的 Server 可能還會被我拿去做其他用途，所以又回來寫了，哈哈哈哈。這是高雄前端社群久久難得一次的 Responsive 課程，也很難得出現秒...

2016-04-12

專業前端都如何管理 CSS - CSS 讀書會

CSS 讀書會原本打算兩週辦一次，但在各種原因下已經自動發展成每月一次的活動了 Orz…(下次估計也要到五月才會有了T_T)。...

study

2016-04-19

轉行工程師必須克服的三大痛點

本篇是以設計師轉工程師為主要觀點在研究所那年，我投入大量的時間學程式，由於當時的 Flash 相當火紅，所以決定從 Actionscript 3.0 開始入手，那時也遇到相當多的挫折，印象很深的是在床上看著短短的程式碼 (手打沒問題，重點是我想了解原理，才會在床上看書…)，那段寫著什麼是 “變數”...

study

2016-04-22

讓使用者愛上你的表單，提升客戶轉換率

不知道你們在使用手機填寫表單的時候，會發現這樣的狀況，填寫地址跳出中文、填寫 E-mail 表單跳出中文、填寫電話也是跳出中文，甚至是日期欄位也是跳出中文，這樣其實對於使用者來說是很不便利的。如果這個狀況發生在結帳前，很高的機率導致使用者失去耐心，甚至離開網站，如果在表單上多花點小心思，就可以讓使用...

2016-05-26

Sass 基礎教學 - CSS 讀書會

先前的讀書會難度都有點過高，所以有時候聽的人會有點母煞煞，所以這次決定先介紹基礎的部分，以後再來介紹延伸的內容。...

2016-06-08

CSS 失控的 Margin top

失控的 margin-top 是指在使用 margin 時常出現的問題，內元素的 margin 被外層所吸收，導致無法正確的顯示，這我們稱為 Collapsing margins，本篇來教大家怎麼應對這個問題。...

nodejs

2016-10-18

Yarn - Node.js 的套件管理工具

NPM 每次在安裝的時候，都會安裝很久很久，就算是好幾個類似的專案，每次在執行 npm install 時都需要花費大量的時間，而且在網路不穩定的環境下還可能造成中斷。Yarn 可以讓這些問題好轉些，在實測時，安裝一次以上的套件時間將只需要原本的 20% 時間(甚至更短)，將大幅減少逛 FB 的機會...

2016-12-01

鐵人賽 1 - 前言，CSS 最重要的事？

鐵人賽系列文又開始囉，這次的主題是 CSS 你覺得 CSS 最重要的是什麼勒？如果換個方式思考，寫 CSS 最痛苦的事情是什麼呢？載入速度緩慢遇到不會解的問題接別人寫的 CSS 接別人寫的 CSS，然後還看不懂在寫什麼兩個月後維護自己寫的 CSS ，然後還看不懂在寫什麼稍有資歷的...

2016-12-02

鐵人賽 2 - OOCSS 結構與樣式、容器與內容

以前剛進入這行，掌握了 CSS2 的大部分關鍵之後，對於製作網頁非常有成就感，因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS)，而且 CSS2 語法數量也不多，查找時間也不需要太長，自然覺得世界美好(!?) 這樣快速入門時會有一些難以發現的問題，網站是否易於維護、C...

2016-12-03

鐵人賽 3 - OOCSS 結構與樣式、容器與內容(實際範例)

結構與樣式在執行的概念上就是這樣的白話，目標即是將這兩者分離，上一篇我們用建築物的結構與外觀樣式做分離，再依不同的需求去做組合。 CSS 上也是相同的道理，比如說我們可以做這樣的分類：結構：margin、padding、display、vertical-align 樣式：色彩樣式：color、...

2016-12-05

鐵人賽 5 - CSS 的命名技巧

程式語言的命名一直是個麻煩課題，除了要有良好邏輯外，還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯，但由於上手容易，團隊合作的命名就容易被其他小夥伴所影響。本篇透過圖文及小故事來介紹 CSS 命名概念，讓你與小夥伴的命名協作能力更順暢。...

2016-12-04

鐵人賽 4 - OOCSS 容器與內容分離 (最佳實踐)

結構與樣式分離，對於網頁的樣式設計是一種解放，所有元件的樣式組合搭配及擴增變得更自由。這篇要介紹的是容器與內容分離，簡單來說我們可以把元件分為兩大類型：容器型元件：如 grid、card、form 內容型元件：如 button、input、progress-bar 而不同類型的元件設計上應當...

2016-12-06

鐵人賽 6 - CSS 的元件狀態

CSS 元件狀態重點可以分為兩部分，一個是原生的 CSS 偽類(Pseudo-classes)，另一則是配合 Javascript 所提供的 Class，在這部分相當在元件的初始時，就同時完成兩個部分。...

2016-12-07

鐵人賽 7 - CSS 框架架構參考 PURE CSS

在瞭解完 OOCSS 後，可以看看主流框架是不是有帶入其中之概念，接下來會介紹兩篇 PureCSS 與 Bootstrap，這兩者的簡單架構概念讓大家參考參考。 Pure CSS 算是很老牌的 CSS 框架，到目前使用者已少了許多，但架構到現在都很是非常直得學習，不需倚靠太多的工具，就能夠將 CSS...

2016-12-08

鐵人賽 8 - CSS 框架架構參考 Bootstrap

Bootstrap 是目前我最喜歡的 CSS 框架。雖說如此，我以往可是很討厭 Bootstrap 的，身為一名設計師希望能夠有更多自己發揮的空間，所以早期一直在避免使用 Bootstrap 這樣的框架，總認為這些框架做出來的設計都很像，還因此自己寫一個 CSS 框架。經歷過了一段自幹的歷程，從...

2016-12-09

鐵人賽 9 - CSS 實戰心法搶到決定權，開發環境自己來

前端工程師一般來說只要搞定 HTML、CSS、Javascript 就可以了，所以後端的環境上不用太在意，但在這幾年的體悟下，這是一個不負責任的想法。我用過的前端自動化開發環境有： Fireapp：這用了有兩年之久，算是一個超級入門 GUI 自動化工具，但在 compass 不維護以後 Fire...

2016-12-10

鐵人賽 10 - Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具，在先前一篇也有介紹有哪些自動化工具，這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而本次系列文都是著重在 CSS 的開發，所以不會介紹 Javascript 的自動化工具。...

2016-12-12

鐵人賽 12 - Gulp - 定義預設開發環境

今天的進度來做個小調整，讓大家在使用 Gulp 時就能相容於目前的環境，目前使用的主要套件有：gulp-sass、gulp-postcss，這次調整後會有一個主要的前端專案資料夾，可以配合各個後端語言做調整，大家也可用相同的概念加入習慣的開發環境。...

2016-12-13

鐵人賽 13 - Gulp - 在本地端製作 Icon Fonts

網頁設計都會需要大量的小 icon，現在的 icon 都傾向使用 web fonts 來處理，因為 web font 所製作的 icon 有以下的好處：載入容易，HTML 只要載入一隻 CSS 就搞定套用容易，只要透過 Class 就能套用可自由調整大小、色彩 ...

2016-12-14

鐵人賽 14 - Gulp - Webserver

Gulp 很適合搭配任何其他的前後端結構，就先前介紹的幾個章節，只要略為修改輸入及輸出的路徑即可；除了搭配其他後端結構外，Gulp 也有適合直接開發的方法，本章會在介紹 Gulp Webserver，這樣就能夠直接在 Gulp 中開啟 Webserver。...

2016-12-11

鐵人賽 11 - Gulp - 透過 PostCSS 加入 CSS Prefix

說到 CSS prefix 相信大家都不是很清楚當下主流版本的 prefix 有哪些是必要？又有哪些是不必要的？以往都是使用 Sass 的 Compass 來加入 prefix，這種增加方式就是無差別的加入，但其實現在的 CSS 有 9 成以上的 prefix 都沒有加入的必要，相信在短期內除了測...

2016-12-16

鐵人賽 16 - 將 Bootstrap 導入自動化流程

先前的流程我們將 Gulp 的基礎流程已經建立起來了，現在我們要將 Bootstrap 導入自動化流程，讓接下來的客製化更為容易。...

2016-12-15

鐵人賽 15 - 為什麼 Boostrap

Bootstrap 是目前主流的 CSS 框架，先前也有提到，在起初我是很不喜歡 Bootstrap 的框架，認為他搶走我大部分的工作且缺乏特色，但在研究後會發現他並非我想的那麼缺乏特色，完全看開發者的使用及熟練度。我們也可以看到網路上有相當多的 HTML Template 都做的非常美，但其實底...

2016-12-17

鐵人賽 17 - Bootstrap 自定義樣式超簡單

在導入框架至網站時，還要考慮框架是否符合網站風格以及往後的維護性。Bootstrap 雖然設計上是要給開發者直接運用的，但實際上他所設計的彈性非常之高，也很適合做客製化，甚至 fork 作為公司團體的 Style Guide。...

2016-12-18

鐵人賽 18 - Bootstrap 元件分類概觀 (content, container)

接下來我們依循著 OOCSS 與 Bootstrap 的設計模式繼續擴資、修改元件，不過在繼續下一個階段以前，我們先來了解一下 Bootstrap 的設計模式。...

2016-12-19

鐵人賽 19 - Bootstrap 一次看懂元件的使用組合

Bootstrap 的官方文件有完整的說明以及範例，就算是如此，還是會有許多朋友希望有快速入門的介紹，本篇就來介紹絕大部分 Bootstrap 元件的組合手法，搞懂一次後就能快速運用到其他模組上，甚至 Bootstrap 4 也是用相同的概念就能夠運用唷。...

2016-12-21

鐵人賽 21 - Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時，如果有需要新增、調整，都是寫在 CSS 的後方或是另開一個新檔透過 “覆蓋” 的特性來新增、調整。先前的文章已經介紹了如何調整 Bootstrap 的 CSS，透過變數的方式，我們可以調整整體的樣式設定，而 “新增” 我們也應該用相同的方法來製作，這樣的方法更有...

2016-12-22

鐵人賽 22 - 實戰心法 - 經常使用，但卻容易被忽視的 CSS

Bootstrap 3 載入以後其實就有包含大部分的元件，原本的設計概念上是希望透過一套框架就能滿足大多的需求，但實際在專案運作時有許多客製化需要微調，而很多微調的項目如下：左邊一點、右邊一點、間格大一點文字色彩背景色對齊方法垂直置中方法 CSS 屬性：顯示屬性、背景屬性、Positio...

2016-12-23

鐵人賽 23 - 實戰心法 - 常見的垂直置中手法

上一章節介紹了各種 Utilities ，唯獨垂直置中不介紹，因為在製作、使用垂直置中時要先思考 “支援的瀏覽器”，就算現在全部 IE 的使用率低於 2% 的情況下，還是會有很多小兄弟會希望網站優先支援 IE。本篇會介紹幾種垂直置中手法(不包含舊瀏覽器)，每一種手法的寫法都不大一樣，所以使用時要特...

2016-12-24

鐵人賽 24 - 實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid，但透過自幹會了解更細的運作原理，grid system 和其他元件不太一樣，他是屬於外容器型的元件，一層包覆著一層變化性相當高，如果不熟悉的情況下會容易造成跑版。...

2016-12-26

鐵人賽 26 - 實戰心法 - 應避免的 Sass @extend

Sass 的 @extend 可以將相同的樣式整理再一起，在其他語言來說是非常帥氣的技法，但在 CSS 中請警慎使用。就如同本篇鐵人賽一開始所介紹到的 OOCSS 概念，在撰寫 CSS 時要盡可能符合兩個原則，結構與樣式分離、容器與內容分離，所以到這邊為止還是要貫徹這個概念，當使用 @extend...

2016-12-28

鐵人賽 28 - 實戰小技巧 - iOS 表單的使用者體驗優化

最後幾篇再來額外介紹一些小技巧，這些小技巧都是非常冷門的卻是實用的手法，分享給大家參考看看。...

2016-12-20

鐵人賽 20 - Sass 資料夾結構

對於 Bootstrap 有一定了解後，我們即將要開始新增元件，不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SMACSS 等，不過我們我們已經加入了 Bootstrap ，在開發時也要思考如何結合不同的開發概念 (自己的元件與 Bootstrap 元件...

2016-12-25

鐵人賽 25 - 實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 Grid System，然後還提供變數讓 Grid 還有額外的參數可以設定，手寫的 CSS 如果要重新計算 12 組以上的計算也太苦了 T_T，這也就是 Sass 的魅力所在。 Sass 的運用上手法非常多，這次來介紹透過簡單的變數，即可大量產生相似的模組。...

2016-12-29

鐵人賽 29 - CSS 實戰小技巧 - 不使用 important 的高優先值技巧

在維護舊的專案很多必須放下自尊，用一些手段來維持成果的運作，但有些作法如果過於殘暴可能會影響到未來的維護，CSS !important 就是一個很好用的手段，他可以直接將 CSS 的優先值拉到最高，並且超過標籤的 style 屬性樣式，那麼在未來就變成要修正這一段樣式無法再用 style 的方式覆蓋...

2016-12-27

鐵人賽 27 - CSS 框架自幹心得 - 失敗三次的框架建構經驗

先前提到過有自幹過框架，主要的經驗是兩次，第三次就不再完全重新自幹了，每次到了最後都會發現有些概念不夠完美，然後修正前一版的錯誤再出發一次!?後來發現自幹本身就有很大的風險在…。...

2016-12-30

鐵人賽 30 - CSS 鐵人賽的結束與接下來的研究

相較於 Javascript 來說，CSS 的演進速度算是非常緩慢的，主要原因當然是瀏覽器的相容性，瀏覽器不太能因為新的特色加入而毀了以前所建置的網站。在這個相對穩定的程式語言，精通一個的手法就可以活用的相當久，像是 Sass 來說，到目前為止他還是相當流行的前置語言。...

2017

2017-03-02

Javascript Promise 範例

Promise 現在已經被大部分瀏覽器所支援 (IE 以外)，在處理非同步的操作是一大助力，最近在寫 Node.js 也不需要再仰賴其它套件就能夠直接處理非同步問題，以下就提供一個範例來介紹簡單的 Promise 的操作過程。...

2017-03-03

VSCode 快速推坑介紹文

用過的 Editor 很多，常常出現新款的 Editor 都會嘗試一下，雖然主流的不一定會喜歡，但多嘗試也不是壞事，這邊稍微列出個人主觀的意見供大家參考參考： Dreamweaver這是早期在使用的 Editor，特色是所見即所得，但這個也成為 Dreamweaver 的致命傷，畢竟做網頁精準的還是...

2017-04-14

剛出社會要存錢嗎？

這個標題不是針對全聯老闆的，只是有感而發，因為我是反對靠存錢來增加存款(資產)的。...

2017-05-24

CSS3 Grid Layout

CSS gird layout 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思)，這和 Bootstrap 或是 960 Grid 沒有任何關係，而是新的 CSS 語法。...

2017-05-25

JavaScript ES6 Promise

本文章有提供新的版本，可參考：JavaScript Promise 全介紹 Promise 一直都是 JavaScript 夢寐以求的功能，非同步的處理如果沒有使用 Promise 經常導致函式或資料無法正常的運作。本篇避開許多深度的詞彙，直接透過範例來瞭解怎麼運行。簡單的 Promise 範例：...

2017-03-22

CSS Grid 屬性介紹

CSS gird 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思)，開始之前還是來介紹一些語法。與 CSS Flex 一樣，CSS Grid 用兩個部分來看比較快，一個是屬於外部容器的屬性，另一個是屬於內部容器的屬性；從外開始向內看可以加快理解的速度。...

2017-06-29

JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]

陣列處理技巧是 JavaScript 中非常重要的一塊，現在框架大亂鬥的時代，框架基本上對於 DOM 的處理都有屬於自己一套良好的方法。只要能夠對於陣列資料操作熟悉，配合框架就能夠將開發效率更上層樓。本篇介紹到的方法有： filter() find() forEach() map() every...

2017-07-21

圖解：CSS Flex 屬性一點也不難

前幾篇有介紹過 CSS Grid Layout 的使用方法，當我們學習排版類型的 CSS 時，最好的方式是先作分類，以 Flex 與 Grid Layout 來說都有共同的特徵，就是他們有分為外容器屬性與內元件屬性。...

2017-07-27

從設計轉職工程師的原因及過程

跟很多人說過過去是 “設計師” 而現在轉職成前端工程師，這個轉換過程有兩個問題很多人長問到：為什麼會想做工程師設計師是怎麼轉成工程師的先前都會一一的回答，但相關的故事其實挺多的，所以整理成一篇給大家參考囉。...

tool

2017-11-09

在 VSCode 啟用程式碼規範工具 (ESLint)

許多同學會詢問到程式碼怎樣寫可以比較整齊且符合規範，在 VSCode 中非常容易整合這樣的工具，這邊提供兩個方法給大家參考，不過記得兩者不能混用，使用時請擇一即可。 ESLint：比較正式的方法，有完整的文件規範，適合團隊使用 JavaScript Standard Style 插件：比較簡單的方...

2017-12-05

鐵人賽：執行環境與堆疊

JavaScript 一次只能做一件事情，他會依據執行環境 (Execution Context) 來一一執行工作內容，本篇系列文會用舉例的方式，讓大家用簡單的方式瞭解這些艱深詞彙。全域執行環境與函式在一開始會登記一個函式在全域環境下(global context)，然後這個全域環境下可以登記其...

2017-12-04

鐵人賽：邁向 JavaScript 勇者之路 - 開始

iT邦幫忙的鐵人賽到目前是第四次參加，前幾次參加有兩次是 CSS，而本次是 JavaScript，主要原因當然是 JavaScript 即將要統治世界 (!?)，僅只有 CSS 的能力很難體會這個世界的險惡美好。 JavaScript 能做的事情非常多，Web 端的應用僅是其中的一小部分，現在包含後...

2017-12-06

鐵人賽：JavaScript 變數的宣告與他的作用域

變數分為全域與區域變數，差異點在於宣告 (var) 的方式，就 MSDN 上的說明在函式定義之外宣告的變數就是全域變數，其值可在整個程式中存取和修改。所以我們可以使用函式來做兩個的分隔點，函式之內宣告的稱為區域，函式以外宣告的稱為全域。全域性的變數在函數外宣告的變數則是具有全域性(或是包含全域...

2017-12-07

鐵人賽：一次只能做一件事情的 JavaScript

在 JavaScript 中，一次只會執行一段程式碼，相信看到這段大家心中都會有所疑惑，我們實作中可以大量發出許多事件，並重複執行不同的函式，這樣為何還是單執行緒 (single threaded) 的程式語言呢？這段如果用純文字解釋較為困難，所以本篇會加入動畫讓大家更容易了解原理。故事說明小明...

2017-12-08

鐵人賽：動態型別的 JavaScript

JavaScript 是屬於動態型別，它定義了七種資料型別，分別為六種原始型別 (ES6 新增一種原始型別)及 Object 型別。在開始之前先用小明來說明一下型別是怎樣的東西。故事說明：承先前故事，小明每天早上醒來都會忘記所有事物，但會在睡覺前把要做的事情先記錄下來，筆記本上會分門別類寫出要做...

2017-12-09

鐵人賽：JavaScript 就是一堆物件的概念

在 JavaScript 中，除了上一篇所介紹到的原始型別以外的都是物件，包含陣列、函式…甚至全域本身都是物件，物件本身可以一層包著一層，其內層可以是字串、數值、陣列、物件，甚至是函式。故事說明小明的記事本都是用物件的概念在做紀錄，他會將要做的事情、筆記分門別類的做巢狀紀錄，這樣的好處可以讓他在...

2017-12-10

鐵人賽：JavaScript 物件的連連看!? 兩個物件的值居然會一樣

承上集，小明現在在漂亮阿姨 (陳小美) 家裡，漂亮阿姨還有一個雙胞胎姐姐 - 陳美美，陳美美的各方面與雙胞胎妹妹都很接近，除了名字以外。因此，偷懶的小明決定將兩個人的名字畫線連再一起，然後改個名字就好了。 var auntie = { name: '陳小美',...

2017-12-11

鐵人賽：JavaScript 的文法學

大多數國家的語言都是由左到右、由上而下的閱讀方式，中文、拉丁語系就是屬於這類型，但也有部分國家是由右到左的，像是阿拉伯語系就是如此。而 JavaScript 是由左到右，還是由右到左呢？大多情況下我們會認為 JavaScript 是由左到右，但部份時候則會由右到左的喔。運算子用簡單的一點的方式說明...

2017-12-12

鐵人賽：JavaScript 的 this 到底是誰？

This 的在 JS 使用上非常頻繁，但一個 this 每個 function 都各自表示，這裡就直接用範例說明 This 有哪些情境，不過請注意一點，影響 this 的是在於函式的呼叫方法，並非宣告的時機：純粹的調用 (Simple call)如果直接調用函式，此函式的 this 會指向 win...

2017-12-13

鐵人賽：另一種方式介紹 JavaScript 閉包

閉包解釋非常多，這裡先透過幾個方式說明一下閉包是什麼：運作原理：就是呼叫 Function 內的 Function 這樣有什麼用：內層 Function 作用域變數只會存在內層然後勒：內層 Function 變數可以不被釋放，重複使用卡斯伯會常用此方法嗎：沒注意，好像會不經意的使出來那幹麻...

2017-12-14

鐵人賽：JavaScript 函式與參數

函式可以將參數傳入，使得函式的可用性提高許多，不過其中也有許多小技巧及方法可以運用，以下我們用悠遊卡的概念來說明此段。小明的悠遊卡裡面有 1000 元，他要儲值一些零用錢進悠遊卡內 (真是優秀青年，這麼多錢還繼續儲)，好讓他可以繼續搭乘捷運。傳入變數以下是一個簡單的函式，用來更新悠遊卡的...

2017-12-15

鐵人賽：JavaScript 的嚴格模式 "use strict"

JavaScript 不斷的演進下，許多不嚴謹的寫法都應該逐漸被修正，但哪些是需要修正的字詞呢!? 'use strict' 則是新加入的標準，目的是為了讓編寫「具穩定性的 JavaScript 更容易」，在不穩定的語法或妨礙最佳化的語意都會跳出警告，讓開發者避開這些寫法。而在傳統...

2017-12-16

鐵人賽：JavaScript Function 與 Hoisting

Hoisting 在 JavaScript 僅是一個觀念，主要是在說明變數、函式在宣告期間就會先建立一個記憶體空間，等到實際運行時再將值放入到該記憶體空間內。不過為了確保程式的穩定性，我們不會在實作中使用這個方法，僅了解觀念即可。故事說明：小明的筆記本寫了每天要做的事情，但其實他並不是要做事情時...

2017-12-18

鐵人賽：JavaScript 建構式

了解原型繼承後，可以開始思考這個概念可以用在哪個地方，其中一個就是建構式。我們先不介紹建構式有什麼優點，先了解一下該怎麼透過 JavaScript 來寫建構式，然後再用原型的概念來介紹他的特別之處。小明到手機行決定挑選一支手機，手機款式很多但基本上都有相同的功能，僅有少部分的規格上有差異，過去那...

2017-12-17

鐵人賽：JavaScript 的原型繼承

許多人在寫 JavaScript 應該多少都會聽過原型鍊、原型繼承…，這個觀念在寫 JavaScript 是否重要呢？實作中會不會常使用到這樣的技巧？這裡可以先回答 “會”，而且我們很常使用到原型，而且了解原型會有助於我們加速理解 JavaScript 的概念。以下有一個物件，物件裡面只有一個 n...

2017-12-20

鐵人賽：ES6 開始的新生活 let, const

接下來本篇開始會介紹 ES6 語法，在很久之前聽到 ES6 這個名詞時我都是保持觀望的態度，裡面有許多語法讓我感覺的不是很真實，像是 ...、=>、class 等等，這些看起來與現有的 JavaScript 很不搭嘎 :(。 ES6 許多語法與現有的觀念有很大的關係，其中也很大一部分是為了改進...

2017-12-19

鐵人賽：JavaScript 建構式與原型

還記得先前幾篇的原型鍊嗎？多個物件可以使用相同原型的那個章節，兩個不同的角色但是共用相同的原型，所以當原型增加新的功能，另一個角色一樣會獲得相同功能：現在已經透過 JavaScript 建構式產生一個獨立的物件，我們接下來會使用原型鍊的概念來創造原型。範例目前已經使用建構式製作一個簡單手機樣板...

2017-12-22

鐵人賽：JavaScript Template String 樣板字串

在過去我們撰寫字串的時候都是使用 " ，這種寫法會讓程式碼變得很攏長且難以閱讀，再多行的時候也必須插入反斜線來換行。 const people = [ { name: '小明', friends: 2 }, { ...

2017-12-23

鐵人賽：ES6 的縮寫概念

再參加過那麼多次鐵人賽，我自己習慣在週六寫比較簡短的文章，因此本篇也是屬於短文，還要介紹 ES6 偷懶的方法(O)，這讓撰寫 JavaScript 變得更簡化，熟悉這些語法也會讓閱讀性更高 (一開始會有點不習慣啦)，本篇要來介紹一些 ES6 中簡化的 JavaScript 語法。物件縮寫在過去相同...

2017-12-24

鐵人賽：JavaScript 展開與其餘

這兩個分別稱為展開運算子(spread operator) 及其餘運算子 (rest operator，也可稱為其餘參數)，這兩個運算符有個兩個特點，就是都與陣列有關係，除此之外他都是 ...；第一次看到這樣的符號出現在 JavaScript 中，我還認為這是哪個預處理器的語法，不過在此他真的是...

2017-12-25

鐵人賽：ES6 解構賦值

解構賦值這是在 MDN 文件上的翻譯名詞，如果簡單來說他是個語法糖，讓我們在寫物件、陣列的時候可以使用縮寫來達到相同的效果，了解其中的規則再運用上最會很便利，且可以有效增加閱讀性 (程式碼短非常多)。解構賦值可以想像是鏡子的概念，將右方的資料往左邊送，然後會一個位置對一個值 (但沒有像鏡子左右...

2017-12-21

鐵人賽：箭頭函式 (Arrow functions)

Arrow function 對於它也是又愛又恨的，看似簡約的外型卻有著全新的體驗，它有著更簡短的語法以及重新定義的 this，所以先前學的 this 在此也會有不同的情境。簡短的語法一般使用箭頭函式與 function 的用法大致一致，可以傳入參數、也有大括號包起來，除此之外箭頭函式也有更簡短的...

2017-12-26

鐵人賽：ES6 陣列方法

在過去處理陣列的方法不外乎就是使用 for 迴圈，或是使用配合框架的 forEach 像是 jQuery, angular.js 這些過去的框架都會提供 forEach；但到了 ES6 後，許多框架都不再提供 forEach 的語法，主要原因也是因為 ES6 就已經包含許多實用的陣列方法。過去使用...

2017-12-27

鐵人賽：常用陣列方法

除了 forEach 外還有非常多實用的陣列方法，上一篇介紹一些注意事項，本篇要來介紹其它常用的陣列方法，這些陣列方法在大部分瀏覽器也都可以運作了，除了少數舊款的 Android Browser, ie 9 等等不能用以外。接下來都是使用這份資料來實作一些方法：累加比大小分別運算搜尋特定...

2017-12-29

鐵人賽：使用 Promise 處理非同步

JavaScript 中有很多非同步的事件，而這些事件我們很常使用 callback，在一層包一層後就會出現知名的 callback 地獄，而 Promise 就是為了解決此問題而生的，因此每次介紹到 Promise 都會先下以下這張圖鎮鎮樓。上一篇所介紹到的 Fetch() 就是使用 Prom...

2017-12-28

鐵人賽：ES6 原生 Fetch 遠端資料方法

如果不透過框架，要如何寫出一個 GET 請求呢？在 JavaScript 中可以使用 XMLHttpRequest 的方法，但其實我平常也不太會這樣寫，主要原因也是難以閱讀及撰寫，我們大多都會使用框架來處理這段，如 jQuery, Axios…，以下略為介紹如何製作一個原生的 GET 請求：本篇使...

2017-12-31

鐵人賽：ES6 建構式語法糖

這一段與先前介紹的建構式概念接近連結，單篇觀看可能無法理解為何 JavaScript 要加入 Class 的概念，而 Class 在 JavaScript 只是個語法糖，讓建構式及原型更容易被表現而已。 ES6 建構式這裡我們先將先前章節的程式碼整理過來，除了順序有些調換外，觀念上是沒有差異的，最後...

2017-12-30

鐵人賽：JavaScript Await 與 Async

不知道上一篇大家對於 Promise 概念如何，本篇介紹的內容與 Promise 依然有相關性，因為這兩者就是建構於 Promise 之上的，如果直接從原始碼看可能不是很好瞭解這語法怎麼使用，不過可以先直接用 Google 翻譯了解大概意思： await: 等待 async: 非同步 Await...

2018

2018-01-02

鐵人賽：邁向 JavaScript 的勇者

這次是第四次參加鐵人賽，先前參加的主題分別為兩次 CSS 及一次 JavaScript (D3.js)。因為原本是視覺設計師，在過去曾經打算專精於 CSS 就好，所以不斷專精 CSS 的表現模式以及他的開發模式，我還曾經開發過幾次的 CSS Framework (有實際運用過)，不過隨著時間發展這...

git

2018-02-12

Github 中的 ssh、https 路徑有什麼差異？ - 如何設定 Github SSH 金鑰

再推出 Hexo 介紹影片以後，會有許多同學私下問我關於 https 與 ssh 這兩個有什麼差異？另外會不會影響部署？為什麼看老師是使用 ssh 而自己用 ssh 卻跳出權限不足？ Git 中 https 與 ssh 這兩個有什麼差異？這兩個均是 Git 儲存庫的路徑，Github 官方推薦使用 ...

2018-05-25

老同學來相找，一同轉行做 UI 設計師

最近有些高中、研究所老同學、朋友們看到我在六角學院，也會問到如何轉行 UI、前端，很高興你們來詢問，如果對於此領域有興趣的朋友都可以來聊聊。在此我推薦一些資訊，可以協助你們(或大家)從網頁設計慢慢轉行到 UI、網頁設計師。不過首先，平面設計的觀念到這個領域不一定受用，有許多邏輯性的概念是不同的。如...

2018-01-01

鐵人賽：透過 ESLint 學習 JavaScript ES6

至於 ES6 該怎麼學比較好!?很建議安裝 ESLint 來邊學邊修正觀念。ESLint 是一個團隊統一程式碼結構的工具，如果程式碼不符合規範，則會出現相對應的提示，而其中有三大主流規範是許多開發者愛用的： Google Airbnb JavaScript Standard Style 三個都有...

2018-07-27

Github Pages 自訂網域免費升級 https

Chrome 在 68 版以後會將沒有 https 連線的網站標上不安全的字樣，如果使用 Github Pages 但又不想花大錢買憑證的朋友，可以參考本篇免費安裝 https 憑證。現在 Github Pages 免費提供自訂網域核發 HTTPS 憑證，且這段流程是完全自動，不需要額外申請，雖...

2018-10-15

鐵人賽：前端「設計」聖光之路

我是卡斯伯，本身是設計出身，從高職 -> 大學 -> 研究所都是設計相關領域，出社會後從事網頁設計後來轉職為前端工程師。雖然主要工作是前端，但還是會有不少時間接觸網頁設計，所以相信我的經驗也是能夠帶給大家許多參考，並且完整的前端經驗也會有助於這些概念的實作。為什麼要寫這系列文？不同領域...

2018-10-16

鐵人賽：別使用平面繪圖軟體繪製 UI 設計

除了前端課程外，自己也是有辦一些額外的活動，而這些都會說到我是一名設計師轉職的前端工程師，除了介紹前端外，我也會介紹一些設計觀念。介紹時我大多都會使用 Sketch 來進行說明，主要原因是 Sketch 的工具非常貼近於網頁及 UI 上的開發。而這些活動結束後，都會有些朋友詢問到：「一定要用 Sk...

2018-10-18

鐵人賽：網頁設計常用格線系統(上)

學習設計的時候，一定會討論到網格系統，透過網格可將圖片、文字做有條理的編排，只要有了網格做支撐，就算是複雜的圖文都會有規矩的排列。相反的，如果平面設計缺乏網格系統，就算簡單的圖文要排列整齊也並非容易的事情。本篇分別介紹幾個部分： 960gs 名詞解釋格線設定及計算方法實例實際運用格...

2018-10-17

鐵人賽：設計師思維及工程師思維

我接觸設計的時間也非常長了，從大學、研究所到剛出社會，都是維持著設計的思維，直到開始認真學習 Sass、JavaScript 思維才慢慢偏向工程師（不得不說，Sass 真的讓我革新了許多觀念），雖然現在不敢說是完全的工程師的思維，但中間的許多轉換是很值得與大家分享，建議設計師在執行時，不妨試試幾次以...

2018-10-19

鐵人賽：網頁設計常用格線系統(下)

上一篇介紹了格線系統的概念及計算方式，擁有了這些觀念後會如何運用在繪圖軟體上呢？無論你是使用 Sketch 或是 Adobe XD 都可以快速建立如前文所提到的格線，本篇不會著重在軟體的操作，而是網格如何運用在網頁的設計上。實際運用格線與響應式的搭配實際運用假設我們的網頁內容包含了以下元素...

2018-10-20

鐵人賽：文件、規範參考 - Material Design

程式領域裡面非常重視文件，當然 UI 中也是如此，為了確保設計可以被執行，大型應用程式、系統都會推出屬於自己的規範，如： iOS 的 Human Interface Guidelines Google 的 Material Design 而除了上述的作業系統 / 應用程式外，網頁開發也是有相關的...

2018-10-21

鐵人賽：網頁設計色彩配置概念

根據上一篇介紹的設計規範參考，實戰中有許多需要事先定義，而色彩是使用者打開網站最先體驗到的部分。好比說 Facebook 的深藍色、Google 的紅色、LINE 的綠色，Yahoo 的紫色，這些色彩都深深的存在我們腦海裡，所以在決定這些色彩絕不能馬乎，如果換了色彩用戶還可能會想「我進錯網站了嗎？」...

2018-10-22

鐵人賽：色彩運用(1) - 你的網頁文字是否足夠清楚呢？

上一篇介紹了整體色彩選擇，按造該概念完成一個網頁相信不是什麼問題，不過色彩到底怎麼選？運用上有什麼需要注意的？本篇就來介紹一下吧。 Accessibility：這個單字翻譯有很多意思，如：「無障礙」、「親和性」、「可訪問性」，其中我最喜歡的是親和性的翻譯，因此把它作為此篇文章的標題，而在 Googl...

2018-10-23

鐵人賽：色彩運用(2) - 連結的配色

除了親和性的配色外，訊息的傳遞也是很重要的，與平面設計不同的是訊息並非只有圖文的傳遞，還包含了狀態、互動、提示等等訊息，訊息也同時可以用許多不同色彩表示，增加訊息所能表示的情感、急迫性、引導性等等。連結色彩（包含不同狀態）網頁設計中的 <a> 除了本身的預設樣式外，另外還包含以下幾種 ...

2018-10-24

鐵人賽：色彩運用(3) - 按鈕的配色

上一篇透過連結的狀態了解運用，本篇則是探討按鈕再運用上的色彩變化，包含了一般、行動呼籲、外框線、警告意味等常見的類型，當然這些類型介紹上別不會包含上一篇的 “狀態”，實作中依然要記得補上喔。一般狀態一般狀態通常是最沒有特色的，但使用上也是最為普遍的，這類型的按鈕通常不會帶有太多色彩，並不會特別引人...

2018-10-25

鐵人賽：系統字體介紹

字體一直是設計師排版的關鍵之一，但由於網頁設計受到技術、法規、網路影響，在網頁上能夠使用的字體非常有限，本篇文章其實並非告訴大家怎麼使用字體才會「美」，而是了解字體運用上的「限制」，避免設計出執行上有困難或是效能極差的網頁。字體分類字體因為外觀的關係而有不同的名稱，如：黑體、明體、襯線、無襯線等字...

2018-10-26

鐵人賽：網頁設計 - 網路字體運用

字體如果沒有授權問題，是否能夠直接嵌入於網頁之中呢？（請注意：大部分中文字體都會有授權的問題）當然是可以的，英文網站中許多都會使用自訂的字體，但中文字體可就沒有這麼容易。因為英文字體檔案小，直接寫入 CSS 即可運作，而中文字體動輒數十 MB，Noto Sans 整包甚至高達上百 MB，下載這些字...

2018-10-28

鐵人賽：網頁設計 - 圖片格式的運用

隨著裝置解析度越來越高，如果是以 1:1 的尺寸輸出圖示時，都會明顯地看到圖示邊緣出現鋸齒，這樣的情況下無疑是降低設計的品質，為了避免這樣問題，實作中通常會使用兩種方式來解決：輸出更高解析度的圖片輸出向量圖片更高解析度需要多高？對於網路速度是否有影響？向量圖的使用情境及限制為何？本篇將依據...

2018-10-27

鐵人賽：網頁設計 - 文字大小、行高與空間上的關係

一般平面設計師再進入網頁環境時，會不清楚網頁設計所用的單位數值，造成設計稿與開發的畫面有嚴重的落差；且網頁設計本身有許多「慣用的數值」，建議一開始也能先使用大家通用的數值，待了解所有數值對於畫面、軟體、技術上等影響後再做調整。文字樣式屬性由於網頁並沒有像繪圖軟體那麼的自由，所以才會有許多文章提到「...

2018-10-29

鐵人賽：網頁設計 - 圖片壓縮方法

了解基本的格式後，接下來設計師還需要「正確的」輸出圖片並壓縮，網頁上輸出圖片雖然沒有印刷中那麼複雜，但依然有許多眉角需要注意，像是用什麼工具壓縮就很常被詢問到，本篇介紹我再壓縮上常用的一些技巧。工具輸出繪圖軟體均可輸出圖片（廢話），在此還是比較推薦使用 Sketch 或 Adobe XD，這兩套的...

2018-10-31

鐵人賽：網頁設計 - Icon fonts 的常見資源

網站開發加入一些圖示點綴，除了可以增加網頁的豐富度外，同時可以讓用戶從圖示中了解當下的行為為何。過去圖示大多使用 png 來呈現，具有豐富的色彩及尺寸，但隨著設計的概念不斷調整，現在流行單色系的小圖示，以及為了增加圖示可運用性目前大多使用向量的方式呈現。接續前文所介紹，SVG 是可縮放的向量圖形，...

2018-10-30

鐵人賽：網頁設計 - SVG 輸出注意事項

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片，但在輸出時有些小地方也需要注意一下，避免在本地端看似沒有問題，但用戶卻看到的卻與預期不同。首先瞭解一下 SVG 本身其實是 XML 格式的檔案，這是一個類似 HTML 格式的結構標記，如果要繪製一個方形，則會使用 <rec...

2018-11-01

鐵人賽：網頁設計 - 響應式圖片選用技巧

網站上總需要圖片來點綴，除了客戶提供解析度不足的圖片外，我們也看從許多素材網站找到不錯的圖片，而選用圖片除了找到合適主題外，也需要花不少時間來比對是否合適於網站。本篇依據 CSS 的觀念來提供一些選用圖片的技巧，藉此來減少 25% 搜尋素材的時間。技術限制響應式圖片運用上與技術限制有很大的關係，...

2018-11-02

鐵人賽：網頁設計 - 版面視覺動線配置(1)

本篇主要是描述網頁「登入頁」（Landing Page），這個頁面是用戶一開始接觸的畫面，雖然這個頁面沒有固定的設計方法，但其實可以從各大網頁尋找到雷同的跡象，本篇就去除掉配色概念，單純就依據視覺動線來做說明。群組首先，我們還是要提到設計本質為「傳遞訊息」，視覺動線也就是引導用戶了解網頁所需要傳達...

2018-11-03

鐵人賽：網頁設計 - 版面視覺動線配置(2)

上一篇介紹了版面配置的概念，其中最重要的是「群組」概念，而本篇就透過實際案例來說明各大網站如何運用這些概念，並且看看是否也有運用到交錯、韻律的手法。這些概念要特別注意僅適合用在「登入頁」（Landing Page），適合用在產品、服務推廣使用，當然也就不適合套用在應用程式的服務上（如：Facebo...

2018-11-04

鐵人賽：網頁設計 - 網頁設計規範 - 參考來源

網頁設計許多概念是受到限制的，因為除了設計外也要同時重視可行性，因此預先定義規範不僅預先了解可執行的限制，對於工程師來說更方便預先建構元件。但設計規範並不是一件容易的事情，同時必須在意可行性、延展性、穩定性。可行性：確保規範是可以被執行的延展性：未來的更新是有預先規劃的穩定性：不可隨意進行...

2018-11-05

鐵人賽：網頁設計 - 網頁設計規範 - 一致性的距離（計算方法、水平、垂直）

一開始的文章有介紹到格線系統，主要是針對水平欄位空間的介紹，而其實垂直空間也是需要有固定的間距，當然一方面是有一致的美感，另一方面則是讓開發者設定全網站可用間距時可以統一帶入。本篇主要會針對兩個部分做介紹，一是如何定義間距，另一則是針對運用上的介紹。定義間距（5 的倍數、以文字大小）統一的運...

2018-11-06

鐵人賽：網頁設計 - 網頁設計規範 - 定義不斷出現的網頁元素

定義玩基本要素如文字、色彩、空間等等後，就可以開始定義常用的「元件」，而每一種應用程式、環境都具有固定會不斷出現的 UI 元件，如桌面系統的應用程式會有固定的導覽列、關閉縮小視窗的控制項及固定的外框，雖然這些也是能夠調整，但調整的同時也意味可能會影響操作體驗。網頁設計、行動 APP 也是如此，本身...

2018-11-07

鐵人賽：網頁設計 - 網頁設計規範 - 通用視覺效果

規範定義除了元件設計、空間、格線等等外，另外還有經常重複使用的樣式也能夠被預先定義，比要常見的視覺效果如下：圓角邊線粗細、邊線色彩陰影背景圖樣、裝飾圓角圓角就有點類似於明體、黑體之間的關係，黑體與明體會有兩者截然不同的個性，明體讓人感受具有人文、藝術氣息；黑體則讓人感受具有科技、現代感...

2018-11-08

鐵人賽：網頁設計 - 實際透過工具測量用戶行為

開發、設計時我們會盡可能站在用戶的導向做思考，當中也會腦補許多行為，如：字要小才會顯得精緻輪播 Banner 很吸睛，最新消息放在上面大家都會看說明要拆很多頁，用戶不喜歡同一頁滾太久相信以上範例在目前網頁已經少見很多，畢竟這些都是經過許多前人的研究調整而成。但身為設計師，多少都會想透過不...

2018-11-09

鐵人賽：網頁設計 - 設計師與開發者的溝通工具

溝通非常重要，不好的溝通不只沒有效率，也會造成不同領域間的嫌隙。如同設計師跟業者索取素材資源時，業者提供的是低解析度的 word 檔案，也很難解釋什麼叫做更高解析度的圖片！設計師對上工程師也是相同道理，如果給予的是 .ai、.psd 檔案，工程師會難以從中獲得執行所需要的資訊（需要另外學習如何操作）...

2018-11-10

鐵人賽：網頁設計 - 設計「參考」資源

開始執行設計時，除了要明確了解目標外，另一重點則是需要大量的想法及設計參考，假設需要製作遊戲類型的網站，那麼就需要先了解該類型的風格、配色、變化性等等，缺少這些參考也會難以動手開工。本篇列出經常搜尋的網站，以及這些網站的特性和參考點。 Behancehttps://www.behance.net/ ...

2018-11-11

鐵人賽：網頁設計 - 設計「素材」資源

做設計總少不了一些圖庫當資源，圖庫資源在網路上非常多，無論免費、付費都可以找到不少，但是設計師在執行時，通常只會挑用一些偏好使用的站點來運用，以下介紹我在開發時比較常利用的素材網站。素材也有區分類別，先前有介紹的網頁圖示、字體重複的部分就不再列出，本篇另外介紹點陣、向量、日文字體、短影片等幾個類別...

2018-11-12

鐵人賽：網頁設計 - 平面設計師轉設計前端的經驗分享

平面設計師轉設計前端的經驗分享一開始的文章有提到，我原本也是從事設計，出社會以後開始轉往開發者。學習到目前也能開發到後端（還不會提到是全端工程師，畢竟術業有專攻），學開發觀念與過去學習設計有非常大的差異，也會不斷地反思過去設計思維的價值。為何要從設計轉前端？原因很簡單，設計師的薪資普遍低於開發者。...

2018-11-13

鐵人賽：網頁設計 - 設計的過去、現在、未來

「這張圖幫我美工一下」，讓工作中的設計師聽在耳裡非常的不爽，當下正想立即回嘴：「你才美工，你全家都美工！」才發現說話的是老闆。過去，許多設計師非常討厭這句話，「美工」原意應該為「美術工藝」的縮寫，在此用法則改為「美術工人」、「美術工作」之意，身為具有創意思維的設計師怎能接受這樣的說法。當然，隨著環...

2019

2019-03-18

JavaScript This 系列文：this 與物件的關係

本篇是接續先前的：鐵人賽：JavaScript 的 this 到底是誰？，會更深入的探討 JavaScript This 的運作及觀念，這一系列的文章順序上不會從基礎開始介紹，會建議先從先前文章開始閱讀。物件的方法調用 (As an object method)「物件的方法調用」是最常見改變 th...

2019-03-21

JavaScript This 系列文：this 為什麼指向 window

本篇是接續先前的：鐵人賽：JavaScript 的 this 到底是誰？，會更深入的探討 JavaScript This 的運作及觀念，這一系列的文章順序上不會從基礎開始介紹，會建議先從先前文章開始閱讀。純粹的調用 (Simple call)直接呼叫函式的情況下，this 會指向全域，在以下範例中...

ssl

2019-04-24

免費申請屬於自己的 SSL 憑證(手把手帶你加上 https 綠色鎖頭)

SSL For Free為了讓更多網站可以加上綠鎖頭(https)，並且提高網路的安全性，此服務免費提供網站 SSL 憑證，同時憑證不僅是免費的，還是屬於萬用憑證（包含所有子網域），雖然每次的憑證效期僅有三個月，但可以不斷的續約，對於每年需花個幾千、幾萬才能購買一個萬用憑證來說，算是節省不少。本篇將...

dns

2019-04-25

自建 Name Server

本篇教學是延續「大神來六角」的 “網址管理與 DNS 託管全攻略”，目的是讓參與的學員更了解 DNS 在轉址的過程觀念。對於 Name Serve 的概念可以參考 AWS 提供的架構圖：擁有一個網域後，只要網域的供應商可以設定 NS Record，都可以用來自行建立 Name Server，並...

2019-09-16

鐵人賽：你的願景是什麼？

當兵的後期，有一位和我很好的義務役也即將退伍，他在退伍的時候發表感謝內容表示：「特別感謝我給他的希望的感覺」，平常的時候我常會找他閒聊，也許是談話的內容讓他更具有信心，也讓他想要去追求屬於自己的夢想（印象中是機場塔台相關的工作）。現在想起，也許是那時比較天真吧，認為什麼事情拼一下就有機會了。天真的...

2019-09-17

鐵人賽：從設計轉開發者的思維改變

在學期間我的主力是「美術及平面設計」，從國中開始一直到研究所都是屬於相關領域，軟體開發是一個很大的轉變，這個轉變不僅影響我的生活更影響我的思維。也因為如此，我會向許多設計師推薦學習軟體開發，設計小時候很喜歡看動漫，也因此認為自己喜歡畫畫，家中也認為我應該對此是有興趣的（我也真切的這麼認為），後來從...

2019-09-19

鐵人賽：放棄十年本科經歷，投入網頁開發領域

當完兵投入社會的時候，家裡也剛好出了些事情，心中最大的希望就是找份工作。當時，Flash 因為 iPhone 的出現而沒落，所以當下選擇可以是回到設計的本業、網頁設計師或者是繼續找 Flash 工作試試看（沒落，但它還是存在的）。而無論哪一種，其實我當下的選擇是 “看哪個薪水多，就選哪個！”；打開...

2019-09-18

鐵人賽：初入程式語言，沒想到是 JavaScript 的親戚啊

由於家境的關係，對於金錢一直都沒有安全感，雖然視覺設計、繪畫等等是興趣，但很清楚趨勢不是如此，研究所期間可感受到：「平面設計是夕陽產業，網頁等多媒體會是趨勢」。許多面向都証明如此，如果對金錢沒有安全感，就勢必需要做一些改變。當時，網路上很紅的技術是 Flash，臉書在台灣也才剛崛起，那時候大家最常...

2019-09-21

鐵人賽：樂觀、悲觀 - 財務的思維改變

出社會以前，因為對於市場的不理解，所以有許多「天真」的用詞，也因為這個天真過去還認為自己挺樂觀的，曾經認為窮人與富人差異沒有那麼大，許多故事都告訴我們窮人也能翻身。但出了社會才瞭解故事只是故事，那並非容易的事情。小故事：舉個例子，一個不靠家中努力向上的青年，每天早出晚歸，年收入約落在 120...

2019-09-20

鐵人賽：改變思維的三個重要技能

當掌握第二個技能以後，視野自然也會更為開闊，出社會陸續掌握的技能不少，雖不一定到精通，但有些技能帶給我許多思維上的衝擊，讓我不得不思考過去的觀念是否需要調整，也慢慢地了解到為什麼能力越強的人會更為謙卑。出社會後主要改變思維的三個技能為：程式理財行銷程式語言雖然在學生時代就開始慢慢接觸程...

2019-09-23

鐵人賽：從哪邊學習投資？

在開始學習投資以前，我心裡是牴觸的，主要原因是不了解，認為這是高度風險的財富管理方式。身邊也有許多人對於投資不熟也會有這樣的疑惑：聽說買股票的人都賠錢誒 > 如果都賠錢怎麼會那麼多人投入是不是要很多錢才能開始學投資啊 > 是投資才有錢，不是有錢才投資那是內線的人玩的，我們這種局外...

2019-09-22

鐵人賽：充滿未來希望的成長公式

當初花了大量的時間不斷充實自己能力，目的就是可以能拿到更好的收入，雖然薪資也如預期的不斷成長，但是心中還是有一個結沒有解開，以台灣來說，每個人退休所需要的資金約是兩千萬，在薪資成長的幅度下，就算不吃不喝達到目標還是非常的困難。主計處所提供的網站來說，研究所畢業生年收入在 100 萬也算是接近中位數...

2019-09-24

鐵人賽：iPhone 11 Pro Max 心得文

參加個人挑戰的好處，就是可以隨意的歪樓！？最近入手了三眼神童 iPhone 11 Pro Max，在這支手機上是好幾個月前就已經打算入手，與這台本身的特性沒有什麼關係，會購買主要原因是一般的 LCD 手機螢幕只要看 5 分鐘就會開始頭暈，也因為如此，一天觀看手機的時間平均是不超過 30 分鐘的（不...

2019-09-26

鐵人賽：有土斯有財？還是緊握著負債

傳統觀念中有土斯有財，不斷的鼓勵大家去擁有自己的土地、住宅，出社會後也會有許多長輩洗腦「該擁有屬於自己的房子」。但在臺北這樣高房價的地區，許多人買了第一間房後就長期背著負債，「窮爸爸、富爸爸」一書中提到「自用住宅即是負債」，雖然房子也是資產的一種，但資產是可以脫手轉為現金的，第一間房是否可以轉為現金...

2019-09-25

鐵人賽：超簡易記帳 - 輕鬆規劃你的理財目標

前一篇介紹到退休所需要的資金是兩千萬，雖然這是大部分 “投資廣告” 所提出的金額，但這個金額確切是如何計算出來的呢？這個金額與每個人的花費習慣有很大的關係，兩千萬則是大部分人計算出來的結果，大家也可以用以下方法試著估算一下自己的每月花費，再用每月花費來估算 “年花費”。目前大部分人類都可以活到 9...

2019-11-23

十分鐘快速掌握 Markdown

Markdown 是目前非常普遍用來撰寫文檔的語言，一開始的目標就是使用「易讀易寫的純文字格式編寫文件」，此初衷讓使用者可以專注在文字的本身，而不需要透過其它工具來切換格式。以 Word 撰寫文檔來說，就必須透過上方的工具列來切換標題、列表、粗體、斜體等等；而 Markdown 並沒有這樣的工具列，...

2019-09-27

鐵人賽：獲利優先，將你的資金塊狀化

獲利優先的概念是來自於這本書：https://www.books.com.tw/products/0010794087 此書是在介紹公司的資金管理方式，大多數新創公司管理人，容易在資金上升後喪失對金錢的敏感度，導致支出費用過高，收入不敷支出使用而使公司倒閉，這個狀況不僅會出現在公司上，家庭中大數目的...

2019-12-01

一分鐘切換成中文版 VSCode（完整圖文版）

雖然開發者都具有一定的英文閱讀能力，但如果在不熟悉的情況下，就比較難以快速上手一個新工具。如果要快速掌握一個完整的工具或技術，最好的方式還是先切換成熟悉的語言。而 VSCode 雖然預設並無法直接切換語系，但官方有提供各國的語言套件，讓開發者可以自行選用。切換成中文版如果你對於 VSCode 有...

2019-12-22

CSS 技巧：精簡語法操作暗色主題 - CSS Dark Mode

Mac 暗色主題推出後，就讓黑色控非常喜愛，而且這樣的暗色佈景使用起來更不傷眼。以我來說是比較喜歡在亮色的佈景下工作的，但暗主題的對於長期需要在電腦面前工作來說，真的相對輕鬆很多。雖然如此，也並非所有的介面都是有提供暗主題，以網頁來說就需要開發者另外定義暗主題才會進行切換（不使用任何瀏覽器插件的情況...

2020

2020-01-04

前端開發者，圖片常犯的五個粗心錯誤

前端開發者是透過程式碼將資訊呈現成畫面，因此畫面的好壞也多少影響品質，在觀看許多履歷或作業的過程中，會發現許多相似的錯誤，而這些錯誤都是有跡可循，並且可以避免的；本篇先以常見的圖片問題與大家分享，看是否你也犯了這些錯誤呢？一、圖片變形新手錯誤率：⭐⭐⭐⭐令人感受的粗心度：👎👎👎👎 圖片變形...

2020-02-02

十分鐘上手前端單元測試 - 使用 Jest

隨著應用程式越來越大，人工流程的測試也會耗去許多的時間，許多功能再開發後都必須重新進行點擊特定目標、撰寫複雜表單、送出來檢驗功能的正確性，當功能越來越複雜時，人工測試所花的時間也會越來越常，因此改用測試工具相對會節省去許多時間。尤其到了上線時才發現錯誤，那時候心中真的會吶喊 No、No、No～。前...

2020-02-09

單元測試 - 非同步及 Ajax

本篇延續上一篇：十分鐘上手前端單元測試 - 使用 Jest JavaScript 是屬於同步，單執行緒的程式語言，因此當有非同步的事件時就會被往放到事件佇列，直到所有程式碼運行過後才會執行事件佇列內的程式，如果不熟悉這段觀念就會使程式的運行不符合預期，相關概念可以看此文章一次只能做一件事情的 Jav...

2020-02-16

JavaScript Promise 全介紹

最近直播介紹如何串接開源資料，也剛好許多朋友詢問到 Ajax、Promise 相關的問題，因此重新撰寫一篇文來介紹 Promise，這篇文章也與過去形勢不太一樣，試著先將常見的問題放在前頭，接下來才開始介紹 Promise。另外本文的內容較多，Promise 想看簡易版可參考：/javascrip...

2020-03-01

爬蟲、E2E 測試兩相宜的好工具 - Puppeteer

Puppeteer 是 Node.js 的函式庫，它提供各種 API 來控制 Chrome 或 Chromium 瀏覽器，而此瀏覽器也是目前主流的瀏覽器，用來做為測試、爬蟲都相當合適，並且所提供的 API 語法淺顯易懂，只要具有 jQuery 的使用經驗就可以很快速地上手。安裝官方提供兩個版本，一...

2020-02-21

CSS Border 運用技巧（手繪框線、三角形、空間運用）

CSS Border 大部份來說是用在裝飾上，卡片的邊線、hover 的視覺效果、物件之間的間隔等等，這些視覺效果除了 Border 以外亦有其它方式可以達到；雖然如此，Border 的使用率還是比較高，因為相對來說更為簡單方便，不過也別這樣小看它，透過一些小技巧時，Border 還有很多靈活運用的...

2020-03-08

Flex 空間計算規則

此篇是延續先前的 Flex 的文章（圖解：CSS Flex 屬性一點也不難），本篇則是著重在 flex 中的 flex-grow、flex-shrink 和 flex-basis 這三個屬性，如果對於 Flex 基礎尚不熟悉的可先閱讀前一篇文章。首先，回顧下先前的三個屬性介紹： flex 是縮寫，...

business

2020-03-18

開公司的流程及雷點分享

這次跟大家分享開公司上的一些心得，由於網路上可以找到許多開公司的流程，本篇會著重在心得的分享，當然我也並非專業的會計、法務，正確的流程建議可以詢問合作的會計。會計開公司如果要省時間，找一個好會計是必要的，因為開公司在學校並非必修課程，大部分人都不會有開公司的經驗，雖然說是「開公司」但林林總總的項目...

2020-03-25

完全解析 JavaScript import、export

import、export 是 JavaScript 模組管理的方法，可以將每個檔案視為一個獨立的模組匯出，並在另一個檔案匯入使用。透過此方式每個檔案更能專注在特定的功能上，且能避免單一檔案過度龐大。相容性介紹此方法前，還是要了解一下相容性，目前來說許多主流瀏覽器都是可以運行的，但是寫法需要稍做調...

2020-09-16

JavaScript 開發中常見錯誤解決辦法

身為一個開發者，當然都會了解經驗越多，除錯上會更為容易，這種事情你我都清楚。但對於一個新手來就是缺少錯誤上的經驗，所以當遇到紅字時會不知如何著手。這一系列的文章是專門給剛入門新手的前端開發者觀看的，盡可能用白話的方式，並且提供簡單的範例程式碼以供驗證。 Chrome 開發者工具的常見錯誤排解Chr...

2020-09-17

JavaScript 表達式觀念及運用 - JS Expression

JavaScript 分為兩大的語句類型，就像是我們日常語言中的動詞、名詞、連接詞等概念，但在 JS 中僅分為兩大類型，分別為「陳述式」及「表達式」，其中表達式更為重要，如果能夠熟練表達式更能解決許多開發上的問題，也更能活用各種語法。 JavaScript 中的表達式原文為「Expression...

2020-09-18

JavaScript 利用表達式優化你的程式碼

上一節介紹了表達式的基本概念「回傳結果」，那麼接下來你一定會想了解有哪些地方可以用到表達式，本篇就列出 JS 語法與常見框架的表達式運用，熟悉以後將會大幅增加 JS 語法的變化性。運算子運算子依據運算元數量，可分為一元、二元甚至是三元運算子，而運算元本身也是屬於表達式，以我們常見的 === 來說就...

2020-09-19

開發總是沒問題，上線老是各種錯

不果是新手或老手都可能遇過這樣的狀況，程式碼在測試時運作上看起來都很正常，雖然有一些些地方還不是很熟悉，不過打從心裡認定它是正確的，但麻煩卻上線後才發現出錯，仔細檢查也看不出任何問題，殊不知是表達式的觀念錯誤。程式碼的問題千萬種，本篇就持續在「表達式的觀念」挑出常見的問題，看看是否大家有遇到類似的...

2020-09-20

JS 加不加分號差在哪？

這個議題許多論壇、文件都有討論，在 ESlint 的規範中也可從加不加分號區分為兩大派系，至於加不加分號關鍵點則需要了解分號對於 JavaScript 的影響，開始之前可以先看看以下題目。下方程式碼的運行預期為：宣告 a 的值為 1 執行立即函式於 console 中呈現 2 請問這段程式...

2020-09-21

JS 物件名詞解釋及常見觀念問題

接下來來到 JavaScript 另一個坑「物件」。物件的定義方法差在哪？JavaScript 定義物件的方式主要有兩種形式： var a = {}：{} 稱為物件實字，是相對簡短且易讀的建立方式。 var b = new Object();：使用 Obj...

2020-09-22

讓我們一起到達終點！超過 60% 完課率的直播課程 - JavaScript 作品實戰直播班

2020 年 9 月 20 日是「JavaScript 作品實戰直播班」開班滿三個月的時間，也同時是本課程最後一天的繳交期限，同學們在家中努力趕工最終作品，而我在電腦前準備這份心得。昨天，還收到學員的感謝訊息，提到透過這次的直播班的作品以及履歷健檢服務順利找到工作，我也訝異有同學這麼早就能順利求...

2020-09-22

呼叫函式時，到底有多少個參數 / 變數可供使用？

建立一個函式並呼叫時我們可以傳入一些參數，或者在這個參數中引用全域的變數，不過一個被呼叫的函式中究竟有多少可取用的變數或參數呢？函式中的可用變數本篇會著重在參數的介紹，但一個函式中到底有哪些參數及變數呢？以下透過一段範例程式碼來檢驗呼叫函式會有哪些變數 / 參數，在此可以透過「無痕模式」直接運行...

2020-09-23

JS 記憶體釋放機制及驗證

作用域JavaScript 的變數有作用域的範圍，意思是指「宣告的變數有作用的區域限制」，如果超出了作用域則變數無法再被取得，這樣的做法優點為：可以避免所有變數轉為全域變數有效限制變數的作用區域而變數作用域也會依據宣告的方式不同，產生不同的作用域：未宣告：全域變數 var 宣告：作用域...

2020-09-24

JavaScript 一級函式（First Class Functions）

本篇重點是要介紹參數與函式的關係（尤其是常令人搞混的 callback function），但這個觀念又會扯到另一個常見的專有名詞（一級函式），因此在本篇就統一介紹。一級函式一級函式並非是 JavaScript 專有的特性，只要該語言的「函式可被視為與其它變數一樣時」，就可以稱為該語言有一級函式的...

2020-09-25

Chrome Console 中的 undefined 到底是哪來的？

教學的過程中，有許多學員會盡可能的搞懂程式碼運行過程中的各種結果，其中一個比較特別的案例就是想搞懂為什麼 Chrome Console 下方的 <· 會回傳 undefined。範例程式碼：var a = 1 本篇屬於不知道也不會怎樣的冷知識，但如果了解，你則會更清楚 JS 中的表達式觀念。...

2020-09-26

閉包，原來這就是閉包啊！

閉包，是一個 JavaScript 很常聽到的觀念，雖然會在不知不覺應用到閉包的基本概念，進階的用法在實戰中不一定很常用到，但這卻是面試中非常常見的問題，主要原因是它牽扯到許多的觀念，如詞法作用域、記憶體等觀念。原來這就是閉包：詞法作用域許多閉包文章都會提到「詞法作用域」的觀念，此觀念主要是說明 ...

2020-09-27

學好 this 前，先搞清楚 this 做什麼

過去到現在寫了很多 this 相關的文章，如果沒有實際運用過 this 的開發者可能會有疑惑「this 是不是只有在面試考題用到？」、「this 在實戰中會用到嗎？」、「為什麼要學 this？」。其實 this 在實戰中的應用非常廣，已經有接觸框架的開發者對此較不陌生，基本上所有的檔案都會存在 t...

2020-09-28

透過練習題，摸熟 This 的運作

JavaScript 的 this 會隨著調用的方式不同影響其指向的不同（ES6 的箭頭函式定義也會影響指向），網路上已經提供相當多的資源介紹 this 指向的觀念，本篇只著重在最常運用的物件方法調用做介紹，並且透過練習題的方式，帶大家一步一步認識 this 的指向。關於「物件方法調用」可以查看本...

2020-09-29

箭頭函式常見陷阱題

JavaScript ES6 以後加入了 ”箭頭函式“，就外觀看來它就像是一個縮寫，也因此許多新手會認為它是屬於傳統函式的縮寫形式；但其實不然，箭頭函式與傳統函式大不同，本篇僅列出最常見的 this 差異，並透過大量的範例題，並透過範例的方式讓新手避免踩到箭頭函式最常見的雷。傳統函式的 this ...

2020-09-30

AJAX 完整解說系列：基礎觀念

AJAX 全名是「Asynchronous JavaScript and XML」，在網頁上的功能主要是用於網頁前端與後端伺服器溝通的技術，也如同名稱一樣是透過 JavaScript 的非同步技術，在前端工程師中算是一個挑戰門檻，如果沒有此技能則難與不同領域開發者溝通，也因此在前端求職市場中趨近於基...

2020-10-01

AJAX 完整解說系列：新增、更新、刪除（POST/PATCH/DELETE）

AJAX 除了 GET 以外，其它幾個常見的請求方法通常都會對資料庫進行操作，尤其是 POST、PUT、PATCH 在發出請求的同時還會有附加資源傳送至伺服器。雖然相對於 GET 來說僅是多增加了 “資料”，但這個步驟卻讓許多新進的開發者困擾不已，可能是對於 JSON 結構不熟悉、或是對於 AP...

2020-10-03

AJAX 完整解說系列：輕鬆搞懂 HTTP 狀態碼（HTTP Status Code）

AJAX 是前端與後端的介接，當跨越不同的環境時，所有的狀態會越來越難預期，接著就可能會發生錯誤，造成的錯誤狀態可能會如下：流程與設計不同資料格式不符合連線失敗、網路不穩定程式碼上的錯誤（這就不是本章節要討論的）錯誤在開發的過程中是非常常見的，只不過我們在開發的過程中容易「忽視錯誤」僅...

2020-10-02

AJAX 完整解說系列：使用 Chrome Devtools 檢視請求及回應

從上一篇內容我們介紹到 AJAX 都是由瀏覽器發出請求，伺服器則會依據請求的內容進行回應。所以在這之中的 “請求”、“回應” 都會夾帶著不同資源，供瀏覽器及伺服器進行辨識及運用，所以此篇就針對瀏覽器與伺服器溝通的內容進行說明，帶大家更深入的認識 AJAX。發出請求到回應的過程示意圖注意：本...

2020-10-04

JS 常見陣列方法 [push(), unshift(), pop(), shift(), splice(), reverse(), concat(), include(), indexOf(), join()]

本篇陣列方法是延伸過去寫的 JavaScript 陣列處理方法，目前的框架主流觀念都是「關注點分離」，框架主要都是負責畫面上的渲染；資料面完全交由給原生的 JS 處理，因此，對於資料處理的語法就需要有更高的掌握度。熟悉陣列的方法，自然對於處理資料上會更得心應手，而先前的「陣列處理方法」是著重在迴圈...

2020-10-05

JS - for 迴圈與 forEach 有什麼不同

過去，當有一個陣列的內容需要依序取值時，都會使用 for... 迴圈(for loop)的形式將值一一取出，原始碼的結構如下：var array = ['小明', '杰倫', '漂亮阿姨', '小美'] for (var...

2020-10-08

手把手自訂你的 Bootstrap 樣式

Bootstrap 在第四版以後在介紹文檔，說明自己是一個函式庫而不是框架。樣式的框架代表載入後都是基於此架構開發，無論是否喜歡特定的內容，都需要先全盤接受後再自行調整；而函式庫代表你可以選用自己喜歡的部份，並且調整成合適的樣式，相對於框架來說有更高的彈性。本篇將會依據 Bootstrap 文檔及...

2020-10-11

新手前端也不該犯的錯：圖片變形

網頁常見錯誤的之一：圖片比例變形當網頁有此錯誤時，會大大的降低網頁的畫面水平，如果是作為一個求職作品，也會被貼上 “不細心” 的標籤，本篇介紹幾種簡單的方式來解決此問題。以下是原始圖片（圖片來自於 Unsplash，如果失連歡迎與我聯絡）。 .box { height: 400px !i...

2020-10-09

怎樣也不會失手的 Bootstrap 格線運用技巧

.box { height: 100px; background-color: #69F0AE; } .form-row>.col, .form-row>[class*=col-] { padding-right: 5px; padding-left: 5px; } .form...

2020-10-10

Bootstrap 5 格線的運作原理

.box { height: 100px; background-color: #69F0AE; display: flex; justify-content: center; align-items: center; } Bootstrap 4 中我經常會建議學員不要...

2020-10-12

純 CSS 毛玻璃特效 - backdrop-filter 屬性介紹

幾年前的 iOS、MacOS 更新以後，毛玻璃視覺效果越來越受到許多人喜愛，在使用毛玻璃以前，背景與主要的畫面區塊的風格整合是一件麻煩的事情，除了畫面的協調性外，還要維持資訊的傳達性。而毛玻璃可以讓背景的畫面霧化，凸顯上層的主要資訊，並讓背景與整體不致於產生衝突感。網頁在套用毛玻璃的特效流程近年有...

2020-10-13

VSCode JS 註解就是你的文件

在使用文字編輯器時，你是否有以下狀況呢？搞不懂，為什麼文字編輯器總是沒跳提示函式庫沒有安裝插件就不知道如何輸入同事或過去自己寫的函式不知道在寫什麼，都要花上許多時間去理解想要為函式補充註解，但不知道如何著手那麼你可以試著使用 VSCode，強大的 Intellisense 搞定所有函式...

2020-10-16

Async function / Await 深度介紹

非同步在前端的做法不斷的在進行優化調整，先前介紹過 Promise 可以解決非同步過度巢狀的問題，而本篇要介紹的 async function（非同步函式）及 await 則可以將非同步的程式碼寫成類似同步的形式。 Promise 與 async, awaitPromise 本篇不會詳細介紹，如...

2020-12-13

12 個前端愛用的 VSCode 擴充套件

工欲善其事，缺乏好工具必定壞脾氣。身為一名工程師，將文字編輯器打造出具個人風格也是理所當然的。VSCode 是現在主流的文字編輯器，也因為使用者相當多，沒有特別打理的情況不乏會有撞衫的情況：「你也是用 VSCode 喔」「我也是耶…」（不知怎麼往下接）為了避免尷尬情境，並且突顯自己的高尚，將 ...

2020-12-15

Vue3 中使用 Event Bus

Vue 2 中要進行跨元件通訊，除了 Vuex 以外的另一個常見手法是 Event Bus，對於小型專案來說 Event Bus 相當方便，僅需要 $on、$emit 兩個語法就能進行跨元件通訊。而 Vue 3 中移除了 $on、$off 等語法，因此 Event Bus 也等同於被移除。在 Vu...

2021

2021-04-11

VSCode Prettier 整合 ESLint 自動排版

VSCode 中有一個非常不錯的格式化工具，可以透過一個按鍵將雜亂的程式碼排列的整整齊齊，無論是 HTML、CSS、JavaScript 均可以套用。而此工具稱為 “Prettier”，在 VSCode 中也是屬於預設工具，除了預設選項外也能有許多的客製化調整。而我們在開發的過程中，為了確保團隊...

2021-06-03

NODE.JS 開 API 不求人 - 教學影片

直播主題：NODE.JS 開 API 不求人活動時間時間：5/19 晚間八點直播位置：六角學院 Youtube 頻道本次直播內容包含： API 的運作原理建立 CRUD 的 API 範例前端與後端的 API 串接示範共筆文件：共筆文件影片講者：卡斯伯六角學院共同創辦人從設計轉行前...

2021-06-13

Mac 擷取系統音效 - 直播、錄影均適用

直播遊戲或是錄影希望搭配系統的聲音，如果沒有另外進行設定，就只能透過麥克風接收系統所播放的聲音，這樣的品質對於聽眾來說真的不太好，且如果太大聲也會影響直播者 / 錄影者的思緒。因此，本篇介紹如何使用「軟體」的方式擷取系統的聲音，如果直播或錄影工具可接收多個收音裝置，將可使用系統的聲音進行錄影 / ...

2021-06-14

為什麼選擇使用 Mac 來進行開發

我在求學過程中以及剛開始接觸開發跟許多人都一樣，是使用 Windows 作為剛開始起手的作業系統。但現在，我主力的開發環境轉移到了 Mac OS 至今已經約有六、七年以上的時間，而這些轉移的心得也跟大家分享一下。也先說明一下，正式進入職場以前接觸 Mac 的時間不算長，只有在職業學校中使用 Ma...

2021-07-07

Vue 3 新手夏令營

現在前端所需技能越來越深，而三大框架雖然資源豐富，但對於新手來說卻也不知道如何入門，因此我們舉辦「Vue 3 夏令營」，讓更多的前端同好可以認識這門框架～這個活動適合哪些人呢？對於 JavaScript 有基礎掌握度對於 Vue 2 或其它框架有基本認識，想學習 Vue 3 的開發者想從基礎...

2021-09-11

CSS 選取器(基本篇) - CSS Selector

一個開發者對於畫面的掌控度高不高，完全都可以取決於「CSS 選取器」掌握度，無論是基本的 CSS 到 jQuery 甚至是原生的 JavaScript 都是使用 CSS 選取器。另外如果要寫道後端測試、爬蟲，也是持續使用這看似基礎的觀念，本篇將會循序漸進介紹各種選取器，讓大家從基礎開始學習此知識。 ...

2021-09-14

JavaScript Console 運用技巧 - 8 招讓你除錯更高效

寫 JavaScript 需要檢視運作是否正確時候，都會使用 console.log 來檢視輸出或運算的值，而 console 的運用技巧不僅僅只有將值呈現在開發的 Console 介面中。本篇就來介紹許多 console 語法的實戰運用方法吧！首先，在此先準備一份等等會用到的物件及陣列作為以下...

2021-09-17

履歷避雷技巧 - 技能描述篇

履歷中的「技能」描述是個人專業技能的主述，徵才單位會透過其內容理解求職者的能力，更重要的是透過字詞中分析對於技能的掌握深度，如果沒有善加利用，可能會造成：資深開發者：但沒有透過履歷展現出應有的深度新手開發者：錯誤的內容呈現，導致連面試的機會都沒有本篇僅針對履歷中的「技能」描述進行分析，包含...

2021-09-22

CSS 變數必學知識 - 宣告、繼承及 Bootstrap 中的運用技巧

在 Bootstrap 5 以後，大量導入 “CSS Variable” 的技巧，透過變數可以大幅增加 CSS 的可運用性，讓同一段程式碼透過修改變數的形式，大幅增加 CSS 的可用性，本篇將介紹 CSS 基本運用方式，以及在 Bootstrap 5 中如何運用此技巧來豐富性其用途。 CSS 變數基...

2021-09-28

Mac OSX 截圖全說明（單一視窗、全螢幕、重設截圖路徑、Touch Bar）

Mac OSX 的內建截圖熱鍵相當好用，雖然看起來熱鍵組合很多，但每一個鍵都有它的組合意義，在此先附上完整的熱鍵組合表。 Mac OSX 截圖熱鍵全表，使用方法可參考下方文章說明組合規則首先，要使用截圖一率會使用 command + shift 加上特定數字鍵作為開始，而這些數字鍵分別代表：...

2021-10-04

一個工具，帶你完整認識 CSS Animation

網頁上看到許多 CSS Animation 套效想要參考使用，但卻不知道其中的屬性各自代表什麼意思嗎？本篇將介紹 CSS Animation 的各項屬性運用技巧，並提供一個模擬工具，讓大家可以快速的了解每個屬性的意義。建立第一個動畫在學習每一個屬性之前，首先先動手試試看讓一個元素套用動態的效果，在...

2022

2022-03-10

JS 中的物件迴圈手法

陣列本身具有非常多好用的迴圈方法，如：forEach、map、reduce、find…，這些方法有助於處理各種陣列的資料。但實戰中，不一定所有的資料格式都會是使用陣列，尤其是從後端 API 串接的資料或是各種第三方資源，就有可能是使用物件的方式提供，此時就無法使用上述的各種陣列手法。以下方的資料...

2022-01-10

安裝 nvm 環境，Node.js 開發者必學（Windows、Mac 均適用）

使用 NVM 已經是 Node.js 開發者必備的工具，它最大的用途在於可以輕鬆切換不同版本的 Node.js，尤其在後端的專案中，團隊需要統一的開發環境時可以精確切換到同一個 Node.js 子版本上，避免發生版本不同所發生的問題。 NVM 為 Node Version Manager 的縮寫，顧...

2023

2023-09-26

藍新金流申請以及串接方式

這是鐵人賽相關文章，影片會在活動開始後發布藍新金流官方正式網站：https://www.newebpay.com/藍新金流測試站：https://cwww.newebpay.com/完整範例程式碼：GitHub - Wcc723/node-ironman-sample-2023 at featur...

2023-09-28

AWS S3 申請設定以及 Node.js 串接方式

這是鐵人賽相關文章，影片會在活動開始後發布 AWS S3 是雲端靜態檔案的儲存服務，簡單來說就是能夠把圖片、影片等上傳後不太會更動的檔案進行上傳，接下來用戶在觀看時，就能夠直接存取這些檔案。而這個服務僅會作為靜態檔案儲存使用，因此在價格上會相對直接將檔案存到虛擬主機來得低上許多，本篇會...

2023-09-29

Firebase Storage 申請設定以及 Node.js 串接方式

這是鐵人賽相關文章，影片會在活動開始後發布我很喜歡使用 Firebase Storage，相對於 AWS S3 來說，Firebase Storage 的設定、管理更加容易，而且還有提供每日免費額度，相當適合小型專案使用，而我的 Blog 圖片來說，絕大部分也都是上傳到 Firebas...

2023-10-03

Ubuntu 虛擬主機部署 Node.js 服務，使用 PM2 服務管理

這是鐵人賽相關文章，影片會在活動開始後發布本篇文章會介紹如何「租賃虛擬主機，並且部署 Node.js 服務」，因為會從零開始建置，因此本篇文章會包含以下文章： Ubuntu 環境建置：主要是準備 Node.js 及 PM2 環境專案建置：在此會部署 Node.js 服務，從 Git...

2023-10-07

在 Ubuntu 上加入 Docker 環境並部署 Node.js 專案

這是鐵人賽相關文章，影片會在活動開始後發布本篇文章會介紹如何「如何在 Ubuntu 環境上加入 Docker 環境，並且部署 Node.js 專案」，建議對於指令操作有基本的經驗，以下是本文包含的流程：在 Ubuntu 上安裝 Docker 環境本地端上傳 Docker Imag...

2023-10-08

在 Ubuntu 上加入 Docker 環境並部署 Node.js 專案

這是鐵人賽相關文章，影片會在活動開始後發布本篇文章會介紹如何「如何在 Ubuntu 環境上加入 Docker 環境，並且部署 Node.js 專案」，建議對於指令操作有基本的經驗，以下是本文包含的流程：在 Ubuntu 上安裝 Docker 環境本地端上傳 Docker Imag...

2023-10-04

使用 GitHub Action 部署 Node.js 專案至虛擬主機上

這是鐵人賽相關文章，影片會在活動開始後發布本篇文章會介紹如何「使用 GitHub Action 部署專案至虛擬主機上」，虛擬主機會使用 PM2 來進行管理，整個流程與業界實戰會略有落差，主要是作為 “基礎知識” 理解所使用，實戰中還是多利用 Docker 容器化來進行管理：虛擬主機...

2023-10-11

Portainer 環境建置 - Docker 伺服器端最易上手的 GUI 管理工具

這是鐵人賽相關文章，影片會在活動開始後發布本篇文章會介紹如何「如何在 Ubuntu 環境上加入 Portainer 工具，並且示範部署 Node.js 專案」，建議對於 Docker 操作有基本的經驗，以下是本文包含的流程：在 Ubuntu 上安裝 Portainer 環境從 D...

2023-10-14

在伺服器上建置 Traefik Proxy 反向代理伺服器

這是鐵人賽相關文章，影片會在活動開始後發布本篇文章會介紹如何「如何在 Ubuntu 環境上加入 Traefik 工具，並且搭配 Cloudflare 進行多應用配置」，建議對於 Docker、Ubuntu 指令有基本的經驗，以下是本文包含的流程：在 Ubuntu 上安裝 Traef...