歸檔: 2019

CSS3 文字陰影範例

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

html meta基本語法

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

Web Font的基本設定

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

CSS transition 各種速率

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

Sass HSL function

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

Sass 基礎教學-為何要學Sass

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

Sass 開始前的問與答

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

安裝ruby以及sass環境

使用sass前的準備分為兩個部分: 文字編輯器 編譯環境 文字編輯器對於視覺設計師有Dreamweaver,而對於程式設計師則有vim、Visual studio等,除了以上之外這邊還會推薦使用sublime text,但本篇主要會先介紹編譯環境,所以在此不多敘述。 編譯環境是踏入sass最困難的一步,先前有提過sass是透過ruby所編譯的,所以在編譯前還需要有ruby,本篇會從如何建立ruby環境到sass的安裝。 說實在,本篇範例不建議使用,編譯sass並沒有這麼困難,但會讓大家了解ruby是怎樣的東西,這安裝流程是怎麼樣的,這有助於更了解sass,後面會介紹其他編譯sass的方式。

開始使用fire.app

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

CSS的小箭頭

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

立體字風格

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

網頁設計 技能樹!

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

CSS沒有極限 - CSS 的改變

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

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

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

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

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

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

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

CSS沒有極限 - CSS3的色彩

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

CSS沒有極限 - CSS3的漸層

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

CSS的運算

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

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

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

CSS沒有極限 - CSS藏頭詩 Selection

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

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

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

用sass 做long shadow

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

自己做web fonts icons

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

CSS沒有極限 - Checkbox的妙用

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

CSS沒有極限 - CSS transform-origin

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

CSS沒有極限 - CSS transform 概觀

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

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

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

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

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

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

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

Animation 的各項設定值

和其他屬性一樣,animation有許多屬性可以設定,當然也可以用一個animation涵蓋全部,以下會分別介紹以下屬性的用途。 來源:http://css.doyoe.com/ [ animation-name ]:設置物件所應用的動畫名稱(必填) [ animation-duration ]:檢索或設置對象動畫的持續時間(必填) [ animation-timing-function ]:檢索或設置物件動畫的過渡類型 [ animation-delay ]:檢索或設置對象動畫延遲的時間 [ animation-iteration-count ]:檢索或設置物件動畫的迴圈次數 [ animation-direction ]:檢索或設置物件動畫在迴圈中是否反向運動

Animation 和 keyframe

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

CSS3 垂直文字書寫

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

CSS3 display:flex

display: box及display: flex,兩者是類似的伸縮排版語法但現在已經改成display: flex。 display: box; is a version of 2009. display: flexbox; is a version of 2011. display: flex; is the actual version. display: box是存在的版本,但是它是過去的,現在使用的是display: flex。 目前compass的核心也還是使用display: box

CSS3 Flex的排版方式

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

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

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

CSS3 Flex的對齊

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

Transform3D 翻牌效果

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

試試看Json

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

利用json取得公開資料

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

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

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

Just Another Beginner~

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

aShare使用技術

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

純 "CSS" Banner animation教學

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

jQuery step by step 教學

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

效能更好的banner animation

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

簡易CSS transform 視差效果

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

前端軟體-Prepos介紹

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

Emmet Live Style 加減用啦~

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

Jekyll 介紹

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

font-family要怎麼玩

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

GitHub Page

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

利用Jekyll Bootstrap 快速建立Blog

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

在Winodws上運作jekyll

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

在Jekyll設定自己的留言板

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

在Jekyll中調整屬於自己的Template

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

從CSS到Sass 學習分享

本身是視覺設計系所畢業,在學期間雖然有做過網站,但其實Html及CSS可以算沒有寫過,連html需要結尾都不知道。兩年前,進路職場還是相當依賴Dreavweaver,所以更別說Sublime text這麼潮的工具,我是根本連聽都沒聽過。 但到了現在,對於CSS及Sass已經可以和人侃侃而談,閒暇之餘還去參加鐵人賽分享一下CSS3的研究心得;而這當中,我覺得最重要的就是”開始”的行為,不論是從基礎的CSS,或者是利用Sass開發,只要跨出了第一步,剩下就容易許多了。

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

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

Sass 模組開發

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

做網頁如果缺Icons怎麼辦

最近很多人跟我討論到的網站上icon的問題,如果要畫icon要花多久時間、使用的方法等等。而以我來說,較傾向使用免費icons或者是付費的向量icon,不建議自己畫這些icon,因為要畫一個icon所花的時間成本,都可以買一套200枚的icons了= =。 而今天要推薦的是ico moon,這在之前就有推薦過,而這次的教學,要針對於要直接使用他的icons在網頁上。 http://icomoon.io/

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

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

CSS設定中英文不同的字體

Just font中的字型學文章都相當有意思,而有一篇是關於中英文字搭配的問題;這篇雖然是以windows word為例,但裡面的概念在網頁上也是很有幫助,而其中一段”以 Windows 內建的三種字型為例,表現最好的是微軟正黑體,英文部分採用了微軟的 Segoe UI,粗細與中文較一致“,在目前web中當然也可以有這樣的設定,只要用CSS3的unicode-range,就能夠在中文字中套用”微軟正黑體”,英文套用”Segoe UI”。

Spriting with Compass

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

Sprites for Retina

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

SVG 簡介

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

SVG Group

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

SVG 矩形、圓形、橢圓

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

Sass 3.3

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

SVG 線段

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

玩玩看Rails

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

純CSS Drop Menu

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

CSS + html 冷知識

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

Sass 3.3 Source Maps

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

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

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

CSS + SVG stroke 動態描繪

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

Rails 環境建設

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

D3 Js 介紹

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

翻譯Material Design心得

距離上次的文章也將近一個月…,這段時間主要是在翻譯Google Design,所以有一段時間沒有發新的文章。然而翻譯Google Material Design的原因,也是想要讓中文化後的更多人閱讀,進而引起大家的討論。 整體翻譯的時間從6月27日到7月23日將近一個月的時間,特別感謝從一開始就協助翻譯的Tillonter Hsu、Helen兩位,到最後都還在翻譯;也很感謝Peter、Frances的加入,讓整體進度突飛猛進,還有社群其他的好友Charlene、Mkdodos、陳聖博、Xuan沒有大家的幫忙,這是沒有辦法再這麼快的速度完成的,當然研究所的朋友Xunyi,感謝一起入坑幫忙。 https://www.gitbook.io/book/wcc723/google_design_translate

安裝Gitbook

利用Gitbook製作電子書是相當容易的,作者只要熟悉markdown語法以及簡易的安裝,就可以快速編寫屬於自己的書籍,它有著以下幾點特色。 利用git 版本控制 用git就可以發佈新版本 利用markdown語法編寫 包含手機版 這邊就簡單介紹如何安裝gitbook server在自己本機上,以利於快速與他人合作。 注意:本文不會提到git操作,在使用gitbook前,請先熟悉git。

Gem Github pages

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

Gulp 環境安裝

鐵人賽我有準備一些文章,如網頁視覺設計(技巧、grid system)、前端設計工具的文章,比較偏向視覺設計以及前端工程的混和,但是鐵人賽我決定要換主題,所以文章就直接放出來(都寫了別浪費…)。 這一篇是Gulp的安裝,後來還有一系列的Gulp文章。 Gulp 可以做什麼Gulp 是一個前端任務管理工具,它可以做到如Fire.app、Prepros、Grunt等等所能做的事情,如果這樣還不是很了解,那就列表給大家看看。 編譯 SASS、Coffeescript 壓縮 .CSS, .JS, 甚至圖檔 web server with Livereload 享受自己動手做Task工具的快感 others.. 雖然很多工具,都能做到類似的功能,但是如果需求不足的時候,就要開另一個工具來幫忙,如另外許多專案已經在執行中,或者是老專案,有些工具過於強大,就會顯得沒那麼合適,那麼就可以用gulp客製化屬於該專案使用的工具。

Gulp Task and Gulp Pipe

Gulp主要有四個指令,用這些指令就可以完成大部份工作。 gulp.task(name, fn) 定義一個任務名稱,接下來指定任務的工作內容 gulp.run(task) 運行指定的任務 gulp.src(glob) 檔案來源 gulp.dest(folder) 檔案的存檔路徑 而在上回的範例裡,已經呈現了主要的三個。 123456789//gulpfile.jsvar gulp = require('gulp'), coffee = require('gulp-coffee');gulp.task('coffee', function() { //'coffee'是排程名稱,可自定 gulp.src('./app/coffeescripts/*.coffee') //來源檔案 .pipe(coffee()) //編譯 .pipe(gulp.dest('./app/assets/js')) //輸出位置}); 而這篇會介紹如何用gulp將一個任務串接,並且監視它。

2014 鐵人賽慢慢開始跑

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

SVG 簡介

這部分會持續幾篇,主要是我先前Blog整理出來的,不會相當的深入,是為了解SVG的使用方式。另外這次鐵人賽也有高手是介紹SVG,如果有興趣也可以參考其他高手的文章。 SVG(Scalable Vector Graphics),中文直譯就是”可縮放向量圖形 “,它是以XML格式儲存,而在瀏覽器上是從IE9後才開始支援SVG。也因為是XML格式,所以D3對它特別容易進行操作。

SVG 超硬派了解 path Arcs

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

SVG Stroke , Marker 以及 CSS

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

SVG Defs 以及 CSS

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

D3js 前置作業,製作簡易Server

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

初入D3.js

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

D3js 將資料投影到SVG上

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

D3.js Scale 尺度

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

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

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

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

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

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

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

D3.js 軸線(Axis)

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

D3.js 折線圖(Line Chart)

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

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

上一篇提到資料是放在Google 試算表上,然後再透過web 前端去接資料,當初會想這麼做的原因有以下幾點: 資料路徑穩定,不易掛點 技術上只要成功一次,以後都沒問題 資料建立簡單,大部份的人都可以參與 可以多人協作 對我來說,資料怎麼接一直是很大的問題,也在想如果沒有後端技術,要處理資料是不是比較複雜,還好有Google Drive,不僅解決了資料處理以及介接的問題,還有許多的優點可以去活用。

D3.js 圈圈小效果

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

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

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

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

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

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

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

PDF轉CSV,利用Tabula

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

D3.js 鐵人賽的結束

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

Gulp RUN ruby-compass

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

前端設計師的設計與執行

圖片來源 google material design 看到 嫁給RD的 UI Designer 的這篇文章有感,想說也寫一下我對於這個主題的想法,在工作的流程中,每個人所佔的崗位不同,都會有不同的觀點,她的這一篇所在的角色是UI,我的看法是設計師與前端之間的角色。 從學設計到現在轉職成前端,因為設計背景的關係,所以大部份在執行時都是從設計到切版都是我做,這在執行上並一定是好的流程,只是不同崗位,有不同的觀點,同時橫跨兩個崗位,就會掌握不同的面向,但畢竟是一個人,無法面面俱到,所以這邊會提出一些我的看法及解決辦法。

視覺前端 - 按鈕的個性

在參加完鐵人賽以後,會想要再精進UI設計的部分,所以想試著寫設計得文章,接下來會連續幾篇UI設計的文章,有些是在鐵人賽前就準備好的,最近在重新整理PO出來,希望大家會感興趣。 網路上有許多開源的Framework,通常我都會參考他們的按鈕以及表單設計,因為這是最能夠表達Framework特色的元件。按鈕與表單,按鈕更能表達一個Framework的個性,如圓角、顏色填充的方式、預設的色彩變化、單位計算方式(em or px)等等,當然表單也有,但許多為了實用性,表單會將設計簡化。

高雄前端社群 - d3js

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

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

視覺規範沒有一定的標準,究竟是美醜優先,還是使用者體驗優先,這都沒有一個準則,當然在最理想的情況下,是能同時符合兩者。所以在按鈕的使用上,我嘗試找出一些規則,來讓畫面不至於凌亂,並且讓使用者可以感受到舒適。 而按鈕本身有著不同的個性,所以在畫面的使用上,也會依據需求的不同,來使用不同個性的按鈕。就算是同一個Framework所提供的按鈕,也會有相當多樣的選擇供開發者使用,但是選擇一多,往往也會造成困擾。 “目前的情況下該用哪種按鈕?” 上面的問題,我也思考很久,所以整理了幾種可能的性給大家參考參考。

Jquery 重複點擊判斷

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

Webkit 自定義Scroll Bar外觀

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

試試看Canvas

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

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

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

參與開源專案

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

2014年度回顧

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

CSS 冷知識

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

Sass map get

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

CSS 5種垂直置中方法

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

投資自己、投資資產

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

Middleman 超級快上手

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

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

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

Javascript 閉包

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

Reactjs JSX格式轉換

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

Middleman + Reactjs

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

關於學習

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

壓縮css的終極必殺技

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

用CSS呈現影像比對效果

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

隨意玩玩的 nw.js

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

動手玩 CSS,快速學會Flex

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

Hotjar 網站熱圖

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

SVG 客製化 checkbox

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

將 Sketch icons 轉成 web icon fonts

在之前轉web font icons 通常是使用Icomoon,他提供不錯的介面以及大量的icons供開發者使用,但有些時候Icomoon並不符合我們的需求,例如: 公司專案,不宜上傳到第三方空間 有版本控管需求時 設計師控制慾很強時(? 而萬能的Sketch及Gulp再合體之後,就有了Sketch to icon fonts 的功能,只要轉一次,同時提供了: icon fonts 字型檔 寫好的css檔 還有HTML使用範本 對於前端以及設計師簡直接就是一大福音。

更棒的 Jekyll 編寫工具

這個Blog也維持很長一段時間了,曾經會想要放棄維護轉到其它平台,主要原因是Jekyll上稿有些麻煩的地方,其中一項最痛的就是上圖…。在上圖之前,都必須先將圖片放到/images,接下來再手動寫相對位置,如果圖片要換,就必須再打開/images資料夾,一來一往必須花很多時間。 最近發現了Atom編輯器有套件可以自動把圖片搬移到該資料夾,並且還有許多Jekyll的輔助功能,讓我可以更專注於Blog的文章內容。 如果您跟我一樣是 Jekyll 的使用者,相信你會很喜歡這編輯工具。 圖片來自於 Atom 官網

過去的學習 每天一分享

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

客製化屬於你的 Bootstrap 4

Bootstrap 是目前最流行的CSS Framework,第四版也釋出了開發版本,無論第幾版對於工程師來說 Bootstrap 就是那麼的容易上手,但扯上設計就要多多配合了,不同身份看待 Bootstrap 也有不同看法,例如: 設計師:Bootstrap 很醜誒,你看那個濁濁的顏色 (當然每個設計師觀點不同啦…)。 前端:Bootstrap 要配合設計師的稿,似乎有點麻煩…(看著對不上的Grid system)。 後端:不是都長一樣嗎? 其實Bootstrap的設定檔就有許多細節可以調整,不需要 Overwite,載入前就可以先調整,而且並不是一定要全部元件載入,可以只使用部分的元件,靈活的使用框架,才能發揮更大的價值。

被討厭的勇氣

你過得快樂嗎?如果不快樂,代表你不夠在乎你自己。 “被討厭的勇氣”是我今年看過最值得閱讀的一本書,書中的引言有許多人提到為何沒有早一點看到這本書,在我讀完以後也會有這樣的感覺,可見內容之精彩。 本書的內容是以故事性的方式呈現,大綱是一位哲學家與具有反社會心態的年輕人對話,在不同的夜裡年輕人不斷挑戰哲學家的阿德勒學說,在這一正一反的對話內容,更能凸顯出本書的內容以及古代哲學對話與辯論的精神。 在這書中有幾個段落對我啟發很深: 心理創傷並不存在 屬於別人的課題 尋找自己的歸屬感 認真地活在當下,人生的價值就在於此

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

Compass 是一套非常優秀的 Sass 擴充套件,從剛開始學 Sass 就一直用到現在,許多優點是一般 CSS 或 Sass 較難達到的,如: CSS Sprites:可以將圖片轉成Sprite,並提供 CSS class。 CSS3 mixin:prefix 啊~ Vertical Rhythm:CSS 文字排版的救星。 image-url, image-size:圖片路徑的取代以及取得圖片的尺寸。 但現在有些問題讓我考慮放棄使用 Compass 如: 很久沒更新,距離上次更新已將近一年 基於ruby sass,效能較差,編譯速度慢 因為久沒更新,很多 css3 @mixin 已不符合現在規範 CSS Sprites 沒有 SVG 版本 接下來會連續幾篇開始介紹透過 Node sass 取代 Compass 的相關技術研究,當然 Compass 不會馬上被取代,但也要準備好替代方案,畢竟工具只是要增加產能使用,並非一定要追最新的才行。 如果還在使用Compass的使用者可以當作參考就好,工具還是要用得上手比較重要~

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

承上篇,因為 compass 很久沒維護,所以在找替代方案。而這篇是要介紹很火紅的 post-css,主要是要解決 css3 prefix 的問題,post-css和 sass 不同的是,在 prefix 的方法不需要先定義成 @mixin ,可以在事後再決定是否加入 prefix,這讓不斷在更新改變的 prefix 流程簡化很多,並且可以有效減少 css 的檔案大小 (prefix 是很肥大的)。 Prefix 的減少速度也是相當快速,像是 box-shadow 的 Prefix 可能消失超過一年, transform 也大約一年左右不需要 Prefix,如果不想要明年慢慢的移除自己所種的 Prefix,或許可以參考看看 post-css的 autoprefixer 工具。 如果還在使用Compass的使用者可以當作參考就好,工具還是要用得上手比較重要~

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

Compass 的 CSS Sprites 是非常好用的工具,在以前有介紹過 compass 的 Sprites 作法,只要把圖片丟一丟就可以完成,而且也可以做 for Retina 版本,但是使用SVG 製作 Sprites 就沒有辦法。一直以來我都是以向量工具做設計,如果不能轉 SVG 這樣高品質的圖檔,對我來說也是挺困擾的。 這篇就要介紹如何使用 Gulp 來製作 SVG Sprites,並且同時產生一般 png 版本來相容於舊版的瀏覽器。 先前的 Sprites 介紹文章 Spriting with Compass Sprites for Retina

動手玩 CSS 3d

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

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

本週參加了高雄 Javascript 讀書會,所選擇的書籍是 JavaScript設計模式與開發實踐,這本雖然原本是簡體書,但內容真的不錯(不過我只有看一兩章似乎沒什麼說服力 >O<),也多虧這次的讀書會,讓我對於技術有更深層的看法。 JavaScript 什麼的太難了…,直接請人教比較快 了解設計模式對於大部分 JavaScript 的了解很有幫助 (如 Angular 的 Service 本身就具有 Closure 的觀念) 參加讀書會這樣的活動,對於技術的學習相當迅速,等於是直接吸別人的經驗值 工作上雖然會寫 Javascript,但這次讀書會光是 this 就可以玩死我 Orz,更別說 Closure、ES6 等等…,雖然最後還是有學到一兩招,但真的很累…。

第一次 CSS 讀書會

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

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

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

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

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

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

本篇是以設計師轉工程師為主要觀點 在研究所那年,我投入大量的時間學程式,由於當時的 Flash 相當火紅,所以決定從 Actionscript 3.0 開始入手,那時也遇到相當多的挫折,印象很深的是在床上看著短短的程式碼 (手打沒問題,重點是我想了解原理,才會在床上看書…),那段寫著什麼是 “變數”,就現在看來這是很簡單的觀念,但我也是花了好幾天才能理解是什麼意思。 現在有機會從事教育推廣,從與許多設計師想轉行工程師中的對談中,認為有以下三個原因阻擾著設計師,如果可以克服,在學習上會更為順利:

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

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

Sass 基礎教學 - CSS 讀書會

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

CSS 失控的 Margin top

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

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

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

鐵人賽 1 - 前言,CSS 最重要的事?

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

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

以前剛進入這行,掌握了 CSS2 的大部分關鍵之後,對於製作網頁非常有成就感,因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS),而且 CSS2 語法數量也不多,查找時間也不需要太長,自然覺得世界美好(!?) 這樣快速入門時會有一些難以發現的問題,網站是否易於維護、CSS 可複用性是否夠高、命名是否一致,當時也會思考這些問題,但在沒有統整性的觀念引導下,許多嘗試都是不斷的在碰壁。

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

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

鐵人賽 5 - CSS 的命名技巧

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

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

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

鐵人賽 6 - CSS 的元件狀態

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

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

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

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

Bootstrap 是目前我最喜歡的 CSS 框架。 雖說如此,我以往可是很討厭 Bootstrap 的,身為一名設計師希望能夠有更多自己發揮的空間,所以早期一直在避免使用 Bootstrap 這樣的框架,總認為這些框架做出來的設計都很像,還因此自己寫一個 CSS 框架。 經歷過了一段自幹的歷程,從新再研究了 Bootstrap 的框架才發現自己很多觀念上的不足如: 過度的 sass @extend (良好的 CSS 架構,不太需要使用 @extend) OOCSS 觀念不夠強 (結構與樣式並未良好的分離) 框架可用套件不足 (自幹的怎會有套件 @_@) Bug 發現慢 (多人開發的框架 bug 自然少)

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

前端工程師一般來說只要搞定 HTML、CSS、Javascript 就可以了,所以後端的環境上不用太在意,但在這幾年的體悟下,這是一個不負責任的想法。 我用過的前端自動化開發環境有: Fireapp:這用了有兩年之久,算是一個超級入門 GUI 自動化工具,但在 compass 不維護以後 Fireapp 也不再維護了。 Prepros:當時 GUI 的自動化工具另一個選擇,到現在還有持續在更新,但一直有些小問題所以沒有想用在專案上,但對於入門來說是個不錯的選擇 Middleman:為了與 Ruby on Rails 專案做整合,算是不錯的 Command line 工具,也是使用很長的一段時間,現在懶得自己開環境還是會使用。 *gulp:相當推薦的自動化工具,易學且可以與任何環境結合,缺點是肥了點。 *webpack:很潮的自動化工具,但與 gulp 觀念差異很大,適合製作 SPA(sigle page application) 的網站。

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

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

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

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

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

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

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

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

鐵人賽 15 - 為什麼 Boostrap

Bootstrap 是目前主流的 CSS 框架,先前也有提到,在起初我是很不喜歡 Bootstrap 的框架,認為他搶走我大部分的工作且缺乏特色,但在研究後會發現他並非我想的那麼缺乏特色,完全看開發者的使用及熟練度。 我們也可以看到網路上有相當多的 HTML Template 都做的非常美,但其實底層都是 Bootstrap,有些已經調整得相當不像是原有的 Bootstrap 樣式。所以在熟練的情況下,Bootstrap 也是能做出超乎水平的網頁版型。

鐵人賽 14 - Gulp - Webserver

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

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

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

鐵人賽 20 - Sass 資料夾結構

對於 Bootstrap 有一定了解後,我們即將要開始新增元件,不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SMACSS 等,不過我們我們已經加入了 Bootstrap ,在開發時也要思考如何結合不同的開發概念 (自己的元件與 Bootstrap 元件的結合),並且還有往後的 Bootstrap 框架更新、專案的樣式更新等問題。

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

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

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

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

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

Bootstrap 3 載入以後其實就有包含大部分的元件,原本的設計概念上是希望透過一套框架就能滿足大多的需求,但實際在專案運作時有許多客製化需要微調,而很多微調的項目如下: 左邊一點、右邊一點、間格大一點 文字色彩 背景色 對齊方法 垂直置中方法 CSS 屬性:顯示屬性、背景屬性、Position … 這些雜七雜八的,通常會運用在每個元件上,但每個元件都補上重複性又高,這一個部分我們通常會用另一個元件 _utilities.scss 來管理。

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

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

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

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

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

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

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

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

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

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

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

在維護舊的專案很多必須放下自尊,用一些手段來維持成果的運作,但有些作法如果過於殘暴可能會影響到未來的維護,CSS !important 就是一個很好用的手段,他可以直接將 CSS 的優先值拉到最高,並且超過標籤的 style 屬性樣式,那麼在未來就變成要修正這一段樣式無法再用 style 的方式覆蓋。 這邊介紹一招只需要用 className 就能夠大幅提升優先值的手法,讓想快速結束這回合,但又怕傷了未來萌新的善良人參考。

VSCode 快速推坑介紹文

用過的 Editor 很多,常常出現新款的 Editor 都會嘗試一下,雖然主流的不一定會喜歡,但多嘗試也不是壞事,這邊稍微列出個人主觀的意見供大家參考參考: Dreamweaver這是早期在使用的 Editor,特色是所見即所得,但這個也成為 Dreamweaver 的致命傷,畢竟做網頁精準的還是瀏覽器上的呈現,過度依賴所見即所得對於學習會有所限制,後來開始精進 CSS 後就不太使用這個工具。

Javascript Promise 範例

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

CSS Grid 屬性介紹

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

剛出社會要存錢嗎?

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

JavaScript ES6 Promise

Promise 一直都是 JavaScript 夢寐以求的功能,非同步的處理如果沒有使用 Promise 經常導致函式或資料無法正常的運作。本篇避開許多深度的詞彙,直接透過範例來瞭解怎麼運行。 簡單的 Promise 範例: 123456789101112131415161718192021222324// 宣告 promise 建構式let newPromise = new Promise((r

CSS3 Grid Layout

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

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

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

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

iT邦幫忙的鐵人賽到目前是第四次參加,前幾次參加有兩次是 CSS,而本次是 JavaScript,主要原因當然是 JavaScript 即將要統治世界 (!?),僅只有 CSS 的能力很難體會這個世界的險惡美好。 JavaScript 能做的事情非常多,Web 端的應用僅是其中的一小部分,現在包含後端、自動化、IOT、區塊鏈…許多軟體運用都可借助 JavaScript 的語言來開發,雖說不一定是最適合所有情境的,但學一個語言做更多何樂而不為呢? 這次所介紹的 JavaScript 不限於瀏覽器上的運用,而是 JavaScript 運作上的概念,主要的文章內容包含: 執行環境 文法與陷阱 型別與物件 函式 原型 ES6 的語法說明

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

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

鐵人賽:執行環境與堆疊

JavaScript 一次只能做一件事情,他會依據 執行環境 (Execution Context) 來一一執行工作內容,本篇系列文會用舉例的方式,讓大家用簡單的方式瞭解這些艱深詞彙。 全域執行環境與函式在一開始會登記一個函式在全域環境下(global context),然後這個全域環境下可以登記其他函式,然後每一段執行環境下會有屬於他的變數以及物件,如果找不到該執行環境的變數或物件,則會向外層尋

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

在 JavaScript 中,一次只會執行一段程式碼,相信看到這段大家心中都會有所疑惑,我們實作中可以大量發出許多事件,並重複執行不同的函式,這樣為何還是單執行緒 (single threaded) 的程式語言呢? 這段如果用純文字解釋較為困難,所以本篇會加入動畫讓大家更容易了解原理。 故事說明小明故事:小明在完成早上的事情後,他會準備做以下事情: 打電話給漂亮阿姨 等待漂亮阿姨回覆 清理碗

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

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

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

在 JavaScript 中,除了上一篇所介紹到的原始型別以外的都是物件,包含陣列、函式…甚至全域本身都是物件,物件本身可以一層包著一層,其內層可以是字串、數值、陣列、物件,甚至是函式。 故事說明 小明的記事本都是用物件的概念在做紀錄,他會將要做的事情、筆記分門別類的做巢狀紀錄,這樣的好處可以讓他在尋找資料時比較好處理,並且可以自由地新增屬性及值。 那麼小明筆記本資料如果使用 JavaScri

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

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

鐵人賽:動態型別的 JavaScript

JavaScript 是屬於動態型別,它定義了七種資料型別,分別為六種原始型別 (ES6 新增一種原始型別)及 Object 型別。在開始之前先用小明來說明一下型別是怎樣的東西。 故事說明: 承先前故事,小明每天早上醒來都會忘記所有事物,但會在睡覺前把要做的事情先記錄下來,筆記本上會分門別類寫出要做的事情。 小明有時會將要詢問的事情留空白,等到知道結果後再填上數值,像是某一個商品的價格如果再詢問

鐵人賽:JavaScript 的文法學

大多數國家的語言都是由左到右、由上而下的閱讀方式,中文、拉丁語系就是屬於這類型,但也有部分國家是由右到左的,像是阿拉伯語系就是如此。而 JavaScript 是由左到右,還是由右到左呢?大多情況下我們會認為 JavaScript 是由左到右,但部份時候則會由右到左的喔。 運算子用簡單的一點的方式說明, +、=、== 都是運算子,本身這也是屬於函式的一種,是用來將它本身 前後方的值 做計算,然後回

鐵人賽:JavaScript 的 this 到底是誰?

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

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

閉包解釋非常多,這裡先透過幾個方式說明一下閉包是什麼: 運作原理:就是呼叫 Function 內的 Function 這樣有什麼用:內層 Function 作用域變數只會存在內層 然後勒:內層 Function 變數可以不被釋放,重複使用 卡斯伯會常用此方法嗎:沒注意,好像會不經意的使出來 那幹麻學:理解作用域 範例這個範例用花錢的概念來說明,我們每次都會傳入不同的金額,並且把剩餘的金額存在內

鐵人賽:JavaScript 函式與參數

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

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

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

鐵人賽:JavaScript Function 與 Hoisting

Hoisting 在 JavaScript 僅是一個觀念,主要是在說明變數、函式在宣告期間就會先建立一個記憶體空間,等到實際運行時再將值放入到該記憶體空間內。不過為了確保程式的穩定性,我們不會在實作中使用這個方法,僅了解觀念即可。 故事說明:小明的筆記本寫了每天要做的事情,但其實他並不是要做事情時,才會翻筆記本。在一早的醒來的時候小明會將全部的內容先看一次,讓腦中先有個印象。這個概念與 Java

鐵人賽:JavaScript 的原型繼承

許多人在寫 JavaScript 應該多少都會聽過原型鍊、原型繼承…,這個觀念在寫 JavaScript 是否重要呢?實作中會不會常使用到這樣的技巧?這裡可以先回答 “會”,而且我們很常使用到原型,而且了解原型會有助於我們加速理解 JavaScript 的概念。 以下有一個物件,物件裡面只有一個 name 及一個 function run(),所以我們了解以下物件只能執行 run(),因為他沒有其

鐵人賽:JavaScript 建構式

了解原型繼承後,可以開始思考這個概念可以用在哪個地方,其中一個就是建構式。我們先不介紹建構式有什麼優點,先了解一下該怎麼透過 JavaScript 來寫建構式,然後再用原型的概念來介紹他的特別之處。 小明到手機行決定挑選一支手機,手機款式很多但基本上都有相同的功能,僅有少部分的規格上有差異,過去那種資料連連看的方式一定會把資料搞得一團亂 (參考先前的 Javascript 物件 “傳參考” 特性

鐵人賽:JavaScript 建構式與原型

還記得先前幾篇的原型鍊嗎?多個物件可以使用相同原型的那個章節,兩個不同的角色但是共用相同的原型,所以當原型增加新的功能,另一個角色一樣會獲得相同功能: 現在已經透過 JavaScript 建構式產生一個獨立的物件,我們接下來會使用原型鍊的概念來創造原型。 範例目前已經使用建構式製作一個簡單手機樣板,但我們會發現作為一個手機似乎少了一個重要的功能 打電話,這個功能是所有手機都具備個功能,無論他是何

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

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

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

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

鐵人賽:JavaScript 展開與其餘

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

鐵人賽:JavaScript Template String 樣板字串

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

鐵人賽:ES6 陣列方法

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

鐵人賽:ES6 解構賦值

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

鐵人賽:常用陣列方法

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

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

如果不透過框架,要如何寫出一個 GET 請求呢?在 JavaScript 中可以使用 XMLHttpRequest 的方法,但其實我平常也不太會這樣寫,主要原因也是難以閱讀及撰寫,我們大多都會使用框架來處理這段,如 jQuery, Axios…,以下略為介紹如何製作一個原生的 GET 請求: 本篇使用的是 https://randomuser.me/ 隨機用戶產生器,這很適合用來作為 AJAX G

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

JavaScript 中有很多非同步的事件,而這些事件我們很常使用 callback,在一層包一層後就會出現知名的 callback 地獄,而 Promise 就是為了解決此問題而生的,因此每次介紹到 Promise 都會先下以下這張圖鎮鎮樓。 上一篇所介紹到的 Fetch() 就是使用 Promise,資料接收後才會繼續跑 then() 的內容。而 fetch() 是已經包裝好的 Promis

鐵人賽:ES6 建構式語法糖

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

鐵人賽:ES6 的縮寫概念

再參加過那麼多次鐵人賽,我自己習慣在週六寫比較簡短的文章,因此本篇也是屬於短文,還要介紹 ES6 偷懶的方法(O),這讓撰寫 JavaScript 變得更簡化,熟悉這些語法也會讓閱讀性更高 (一開始會有點不習慣啦),本篇要來介紹一些 ES6 中簡化的 JavaScript 語法。 物件縮寫在過去相同名稱的物件如果要賦予在另一個屬性上,必須寫成 屬性: 物件,這個邏輯很直覺,不過在 ES6 中如果物

鐵人賽:JavaScript Await 與 Async

不知道上一篇大家對於 Promise 概念如何,本篇介紹的內容與 Promise 依然有相關性,因為這兩者就是建構於 Promise 之上的,如果直接從原始碼看可能不是很好瞭解這語法怎麼使用,不過可以先直接用 Google 翻譯了解大概意思: await: 等待 async: 非同步 Await 等待Promise 中完成會透過 then 來回傳,在 await 中他則是會等待這段函式完成後在

鐵人賽:透過 ESLint 學習 JavaScript ES6

至於 ES6 該怎麼學比較好!?很建議安裝 ESLint 來邊學邊修正觀念。ESLint 是一個團隊統一程式碼結構的工具,如果程式碼不符合規範,則會出現相對應的提示,而其中有三大主流規範是許多開發者愛用的: Google Airbnb JavaScript Standard Style 三個都有各自的擁護者,風格上 Airbnb 較為嚴謹,每一種語法都有嚴格的規範;而 JavaScript S

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

再推出 Hexo 介紹影片以後,會有許多同學私下問我關於 https 與 ssh 這兩個有什麼差異?另外會不會影響部署?為什麼看老師是使用 ssh 而自己用 ssh 卻跳出權限不足? Git 中 https 與 ssh 這兩個有什麼差異?這兩個均是 Git 儲存庫的路徑,Github 官方推薦使用 https 但同時也提供 ssh 的連線方式,兩者差異點在於: https: 在上傳時需要輸入帳密

Github Pages 自訂網域免費升級 https

Chrome 在 68 版以後會將沒有 https 連線的網站標上不安全的字樣,如果使用 Github Pages 但又不想花大錢買憑證的朋友,可以參考本篇免費安裝 https 憑證。 現在 Github Pages 免費提供自訂網域核發 HTTPS 憑證,且這段流程是完全自動,不需要額外申請,雖然是全自動的,但也需要符合規範才能自動申請。 需要注意的地方憑證是 Github 代為與 Let’s

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

最近有些高中、研究所老同學、朋友們看到我在六角學院,也會問到如何轉行 UI、前端,很高興你們來詢問,如果對於此領域有興趣的朋友都可以來聊聊。 在此我推薦一些資訊,可以協助你們(或大家)從網頁設計慢慢轉行到 UI、網頁設計師。不過首先,平面設計的觀念到這個領域不一定受用,有許多邏輯性的概念是不同的。如:單位尺寸、色彩、字體字型、資訊流觀念都還是要重新學習,許多東西簡化了,也有許多複雜化了,可以先花點

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

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

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

除了前端課程外,自己也是有辦一些額外的活動,而這些都會說到我是一名設計師轉職的前端工程師,除了介紹前端外,我也會介紹一些設計觀念。介紹時我大多都會使用 Sketch 來進行說明,主要原因是 Sketch 的工具非常貼近於網頁及 UI 上的開發。 而這些活動結束後,都會有些朋友詢問到:「一定要用 Sketch 來做設計嗎?Illustrator 或 Photoshop 不足夠嗎?」,我總是會不厭其煩

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

我接觸設計的時間也非常長了,從大學、研究所到剛出社會,都是維持著設計的思維,直到開始認真學習 Sass、JavaScript 思維才慢慢偏向工程師(不得不說,Sass 真的讓我革新了許多觀念),雖然現在不敢說是完全的工程師的思維,但中間的許多轉換是很值得與大家分享,建議設計師在執行時,不妨試試幾次以工程師為導向的概念來設計網頁,會有很大觀念變化。 以下我列出幾個常見的差異,而這些差異並非全部,僅是

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

學習設計的時候,一定會討論到網格系統,透過網格可將圖片、文字做有條理的編排,只要有了網格做支撐,就算是複雜的圖文都會有規矩的排列。相反的,如果平面設計缺乏網格系統,就算簡單的圖文要排列整齊也並非容易的事情。 本篇分別介紹幾個部分: 960gs 名詞解釋 格線設定 及 計算方法 實例 實際運用 格線與響應式的搭配 960gs當然網頁設計也不例外,我們通常稱為 Grid System。在 RWD

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

上一篇介紹了格線系統的概念及計算方式,擁有了這些觀念後會如何運用在繪圖軟體上呢?無論你是使用 Sketch 或是 Adobe XD 都可以快速建立如前文所提到的格線,本篇不會著重在軟體的操作,而是網格如何運用在網頁的設計上。 實際運用 格線與響應式的搭配 實際運用假設我們的網頁內容包含了以下元素: 頂部的大 Banner(頁首) 側邊選單 主要內容區域 頁腳 我們一樣先依據下圖的數據打開格

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

程式領域裡面非常重視文件,當然 UI 中也是如此,為了確保設計可以被執行,大型應用程式、系統都會推出屬於自己的規範,如: iOS 的 Human Interface Guidelines Google 的 Material Design 而除了上述的作業系統 / 應用程式外,網頁開發也是有相關的概念,在 Styleguide 這個網站中就可以查詢到許多相關的範例。 規範可以帶給我們什麼?簡單來

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

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

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

根據上一篇介紹的設計規範參考,實戰中有許多需要事先定義,而色彩是使用者打開網站最先體驗到的部分。好比說 Facebook 的深藍色、Google 的紅色、LINE 的綠色,Yahoo 的紫色,這些色彩都深深的存在我們腦海裡,所以在決定這些色彩絕不能馬乎,如果換了色彩用戶還可能會想「我進錯網站了嗎?」。 除此之外,每個色彩也帶有不同的行動意味,因此顏色要怎麼選、怎麼配才會好看、好用呢?畢竟五顏六色

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

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

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

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

鐵人賽:系統字體介紹

字體一直是設計師排版的關鍵之一,但由於網頁設計受到技術、法規、網路影響,在網頁上能夠使用的字體非常有限,本篇文章其實並非告訴大家怎麼使用字體才會「美」,而是了解字體運用上的「限制」,避免設計出執行上有困難或是效能極差的網頁。 字體分類字體因為外觀的關係而有不同的名稱,如:黑體、明體、襯線、無襯線等字體,以上或許大家都有聽過名稱,但不清楚外型(如果熟悉可以跳下一段),這裡就來解釋這些字體的分類及常見

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

字體如果沒有授權問題,是否能夠直接嵌入於網頁之中呢?(請注意:大部分中文字體都會有授權的問題) 當然是可以的,英文網站中許多都會使用自訂的字體,但中文字體可就沒有這麼容易。因為英文字體檔案小,直接寫入 CSS 即可運作,而中文字體動輒數十 MB,Noto Sans 整包甚至高達上百 MB,下載這些字體就會花去許多時間且非常消耗網路資源。 英文網頁字體英文字體運用上僅需要注意授權,而最大宗的免費字體

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

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

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

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

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

隨著裝置解析度越來越高,如果是以 1:1 的尺寸輸出圖示時,都會明顯地看到圖示邊緣出現鋸齒,這樣的情況下無疑是降低設計的品質,為了避免這樣問題,實作中通常會使用兩種方式來解決: 輸出更高解析度的圖片 輸出向量圖片 更高解析度需要多高?對於網路速度是否有影響?向量圖的使用情境及限制為何?本篇將依據這些概念介紹。 格式選擇參考網頁靜態圖片選擇主要有三種(還有另一種為 base64,這就不在我們討論

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

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

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

本篇主要是描述網頁「登入頁」(Landing Page),這個頁面是用戶一開始接觸的畫面,雖然這個頁面沒有固定的設計方法,但其實可以從各大網頁尋找到雷同的跡象,本篇就去除掉配色概念,單純就依據視覺動線來做說明。 群組首先,我們還是要提到設計本質為「傳遞訊息」,視覺動線也就是引導用戶了解網頁所需要傳達的訊息,而網頁本身需要傳達的訊息非常多,通常難以用少量文字、話語呈現。就像是業務推廣產品時並不會只問

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

網站上總需要圖片來點綴,除了客戶提供解析度不足的圖片外,我們也看從許多素材網站找到不錯的圖片,而選用圖片除了找到合適主題外,也需要花不少時間來比對是否合適於網站。 本篇依據 CSS 的觀念來提供一些選用圖片的技巧,藉此來減少 25% 搜尋素材的時間。 技術限制響應式圖片運用上與技術限制有很大的關係,其中有兩個要點是必須要注意的: CSS 呈現圖片的方法 裝置尺寸變化 CSS 呈現圖片的方法以下

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

上一篇介紹了版面配置的概念,其中最重要的是「群組」概念,而本篇就透過實際案例來說明各大網站如何運用這些概念,並且看看是否也有運用到交錯、韻律的手法。 這些概念要特別注意僅適合用在「登入頁」(Landing Page),適合用在產品、服務推廣使用,當然也就不適合套用在應用程式的服務上(如:Facebook、Youtube、Google…)。 首先還是要強調從這些網站中是否可以觀察到「群組」概念,並且

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

網頁設計許多概念是受到限制的,因為除了設計外也要同時重視可行性,因此預先定義規範不僅預先了解可執行的限制,對於工程師來說更方便預先建構元件。 但設計規範並不是一件容易的事情,同時必須在意可行性、延展性、穩定性。 可行性:確保規範是可以被執行的 延展性:未來的更新是有預先規劃的 穩定性:不可隨意進行破壞性更新(break change) 本篇提供一些概念給予參考,讓還沒有想法的設計師了解可以從何

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

一開始的文章有介紹到格線系統,主要是針對水平欄位空間的介紹,而其實垂直空間也是需要有固定的間距,當然一方面是有一致的美感,另一方面則是讓開發者設定全網站可用間距時可以統一帶入。 本篇主要會針對兩個部分做介紹,一是如何定義間距,另一則是針對運用上的介紹。 定義間距(5 的倍數、以文字大小) 統一的運用(文字段落、小元件空間、大區塊的間隔) 定義間距雖說間距需要定義固定的數值,但至於如何定義其實沒

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

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

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

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

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

開發、設計時我們會盡可能站在用戶的導向做思考,當中也會腦補許多行為,如: 字要小才會顯得精緻 輪播 Banner 很吸睛,最新消息放在上面大家都會看 說明要拆很多頁,用戶不喜歡同一頁滾太久 相信以上範例在目前網頁已經少見很多,畢竟這些都是經過許多前人的研究調整而成。但身為設計師,多少都會想透過不同的視覺調整,嘗試是否能夠做出更好的使用者體驗,本篇就透過一些工具介紹,讓大家了解如何「觀察」使用者

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

溝通非常重要,不好的溝通不只沒有效率,也會造成不同領域間的嫌隙。如同設計師跟業者索取素材資源時,業者提供的是低解析度的 word 檔案,也很難解釋什麼叫做更高解析度的圖片!設計師對上工程師也是相同道理,如果給予的是 .ai、.psd 檔案,工程師會難以從中獲得執行所需要的資訊(需要另外學習如何操作)。 本篇就提供一些好用的工具,讓工程師與開發者可以了解設計師的規範,並且可以即時回饋讓設計師便於修改

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

開始執行設計時,除了要明確了解目標外,另一重點則是需要大量的想法及設計參考,假設需要製作遊戲類型的網站,那麼就需要先了解該類型的風格、配色、變化性等等,缺少這些參考也會難以動手開工。本篇列出經常搜尋的網站,以及這些網站的特性和參考點。 Behancehttps://www.behance.net/ Adobe 旗下的作品張貼網站,相當中規中矩的呈現各設計師作品,上方也可以透過搜尋的方式找尋特定類別

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

平面設計師轉設計前端的經驗分享一開始的文章有提到,我原本也是從事設計,出社會以後開始轉往開發者。學習到目前也能開發到後端(還不會提到是全端工程師,畢竟術業有專攻),學開發觀念與過去學習設計有非常大的差異,也會不斷地反思過去設計思維的價值。 為何要從設計轉前端?原因很簡單,設計師的薪資普遍低於開發者。這也並非台灣特有現象,而是商業的上設計和開發本質就有很大的不同。設計主要的收入都是以專案為概念,雇主

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

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

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

本篇是接續先前的:鐵人賽:JavaScript 的 this 到底是誰?,會更深入的探討 JavaScript This 的運作及觀念,這一系列的文章順序上不會從基礎開始介紹,會建議先從先前文章開始閱讀。 物件的方法調用 (As an object method)「物件的方法調用」是最常見改變 this 的方法,只要搞懂這一部份就能了解決大部分的 this 運作,大部分的文件介紹此部分說明為:在函

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

本篇是接續先前的:鐵人賽:JavaScript 的 this 到底是誰?,會更深入的探討 JavaScript This 的運作及觀念,這一系列的文章順序上不會從基礎開始介紹,會建議先從先前文章開始閱讀。 純粹的調用 (Simple call)直接呼叫函式的情況下,this 會指向全域,在以下範例中可以取到 name 的值,但一般來說很不推薦這樣的寫法,後面會提到這樣的寫法是怎麼造成的。12345

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

SSL For Free為了讓更多網站可以加上綠鎖頭(https),並且提高網路的安全性,此服務免費提供網站 SSL 憑證,同時憑證不僅是免費的,還是屬於萬用憑證(包含所有子網域),雖然每次的憑證效期僅有三個月,但可以不斷的續約,對於每年需花個幾千、幾萬才能購買一個萬用憑證來說,算是節省不少。本篇將會一步一步介紹如何申請到此憑證。 開發環境說明: 主機 Digital Ocean:Ubuntu

鐵人賽:你的願景是什麼?

當兵的後期,有一位和我很好的義務役也即將退伍,他在退伍的時候發表感謝內容表示:「特別感謝我給他的希望的感覺」,平常的時候我常會找他閒聊,也許是談話的內容讓他更具有信心,也讓他想要去追求屬於自己的夢想(印象中是機場塔台相關的工作)。現在想起,也許是那時比較天真吧,認為什麼事情拼一下就有機會了。 天真的夢想與真誠的願景小時候各位應該都有自己的夢想,當超人、當總統、假面騎士、鋼彈駕駛員等等,但到了成年以

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

在學期間我的主力是「美術及平面設計」,從國中開始一直到研究所都是屬於相關領域,軟體開發是一個很大的轉變,這個轉變不僅影響我的生活更影響我的思維。也因為如此,我會向許多設計師推薦學習軟體開發, 設計小時候很喜歡看動漫,也因此認為自己喜歡畫畫,家中也認為我應該對此是有興趣的(我也真切的這麼認為),後來從國中在美術才藝班(算補習班吧!?)> 復興商工美工科 > 台南大學美術系 > 高雄

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

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

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

當完兵投入社會的時候,家裡也剛好出了些事情,心中最大的希望就是找份工作。當時,Flash 因為 iPhone 的出現而沒落,所以當下選擇可以是回到設計的本業、網頁設計師或者是繼續找 Flash 工作試試看(沒落,但它還是存在的)。 而無論哪一種,其實我當下的選擇是 “看哪個薪水多,就選哪個!”;打開求職網站後「設計的工作基本上可以移除了」,普遍的薪資是低於網頁設計、Flash 的工作,所以就以網頁

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

當掌握第二個技能以後,視野自然也會更為開闊,出社會陸續掌握的技能不少,雖不一定到精通,但有些技能帶給我許多思維上的衝擊,讓我不得不思考過去的觀念是否需要調整,也慢慢地了解到為什麼能力越強的人會更為謙卑。 出社會後主要改變思維的三個技能為: 程式 理財 行銷 程式語言雖然在學生時代就開始慢慢接觸程式語言,但真正認識則是出社會以後,程式語言真正教給我的並不是單純一個技能,它同時能夠影響工作效率及思

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

出社會以前,因為對於市場的不理解,所以有許多「天真」的用詞,也因為這個天真過去還認為自己挺樂觀的,曾經認為窮人與富人差異沒有那麼大,許多故事都告訴我們窮人也能翻身。 但出了社會才瞭解故事只是故事,那並非容易的事情。 小故事: 舉個例子,一個不靠家中努力向上的青年,每天早出晚歸,年收入約落在 120 萬的情況下,除了生活費、卡費、孝親費等每年亦能存下 60 萬(實際上收入越高,支出也會越高),後來

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

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

鐵人賽:從哪邊學習投資?

在開始學習投資以前,我心裡是牴觸的,主要原因是不了解,認為這是高度風險的財富管理方式。身邊也有許多人對於投資不熟也會有這樣的疑惑: 聽說買股票的人都賠錢誒 > 如果都賠錢怎麼會那麼多人投入 是不是要很多錢才能開始學投資啊 > 是投資才有錢,不是有錢才投資 那是內線的人玩的,我們這種局外人玩不起 > 真正好的股票不是少數人決定的 這些疑惑其實是來自於自身恐懼心理造成的,各種優點

鐵人賽:iPhone 11 Pro Max 心得文

參加個人挑戰的好處,就是可以隨意的歪樓!? 最近入手了三眼神童 iPhone 11 Pro Max,在這支手機上是好幾個月前就已經打算入手,與這台本身的特性沒有什麼關係,會購買主要原因是一般的 LCD 手機螢幕只要看 5 分鐘就會開始頭暈,也因為如此,一天觀看手機的時間平均是不超過 30 分鐘的(不清楚原因,目前僅了解對於要專注細微的發光體會感到不適);看過 OLED 後發現可以減輕看螢幕的不適,

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

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

鐵人賽:有土斯有財?還是緊握著負債

傳統觀念中有土斯有財,不斷的鼓勵大家去擁有自己的土地、住宅,出社會後也會有許多長輩洗腦「該擁有屬於自己的房子」。但在臺北這樣高房價的地區,許多人買了第一間房後就長期背著負債,「窮爸爸、富爸爸」一書中提到「自用住宅即是負債」,雖然房子也是資產的一種,但資產是可以脫手轉為現金的,第一間房是否可以轉為現金呢?還是在房貸的壓力下產生難以轉移的問題。 開始工作幾年以後,到許多同輩開始擁有屬於自己房子,有些人

鐵人賽:獲利優先,將你的資金塊狀化

獲利優先的概念是來自於這本書:https://www.books.com.tw/products/0010794087 此書是在介紹公司的資金管理方式,大多數新創公司管理人,容易在資金上升後喪失對金錢的敏感度,導致支出費用過高,收入不敷支出使用而使公司倒閉,這個狀況不僅會出現在公司上,家庭中大數目的資金運用時都很容易忽略掉細節。 這會導致: 跳巢加薪才 3000 ,下個月就多花 6000 高金額

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

這部分會持續幾篇,主要是我先前Blog整理出來的,不會相當的深入,是為了解SVG的使用方式。另外這次鐵人賽也有高手是介紹SVG,如果有興趣也可以參考其他高手的文章。 今天要介紹的是線段系列,可以想像成Illustrator的鋼筆工具(也不知道為什麼要翻譯鋼筆工具,據說是設計師不會懂貝茲曲線…),分為line、polygon、polyline、path,而其中我認為最難的是path…,希望今天能夠突破他。我將用非天才型的硬派學習法! 本篇建議使用超過720px裝置觀看

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

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

D3.js Transition動態效果

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

D3.js 資料數量增減

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

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

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

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

這篇也是前一個Blog的文章,最近在整理就一起拿出來。 Canvas挺有趣的,在一年前試過,而網路上也有相當多的library,但是在使用lib前還是先簡單了解一下canvas的運作吧。 參考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage 這篇主要是介紹Canvas中調整RGB的值,藉此改變顏色色調。

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

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

開始學習 React js

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

CSS column 教學

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

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

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

鐵人賽:邁向 JavaScript 的勇者

這次是第四次參加鐵人賽,先前參加的主題分別為兩次 CSS 及一次 JavaScript (D3.js)。 因為原本是視覺設計師,在過去曾經打算專精於 CSS 就好,所以不斷專精 CSS 的表現模式以及他的開發模式,我還曾經開發過幾次的 CSS Framework (有實際運用過),不過隨著時間發展這個概念有了改變 :D。 撇開 CSS 不說,對於多變的 JavaScript 還是有一些自己的看法,

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

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片,但在輸出時有些小地方也需要注意一下,避免在本地端看似沒有問題,但用戶卻看到的卻與預期不同。 首先瞭解一下 SVG 本身其實是 XML 格式的檔案,這是一個類似 HTML 格式的結構標記,如果要繪製一個方形,則會使用 <rect> 的標籤,並定義他的座標、尺寸、填色樣式等等。 12345<!-- SVG tag

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

「這張圖幫我美工一下」,讓工作中的設計師聽在耳裡非常的不爽,當下正想立即回嘴:「你才美工,你全家都美工!」才發現說話的是老闆。 過去,許多設計師非常討厭這句話,「美工」原意應該為「美術工藝」的縮寫,在此用法則改為「美術工人」、「美術工作」之意,身為具有創意思維的設計師怎能接受這樣的說法。當然,隨著環境的變遷,會這樣說的老闆、同事也就越來越少,與其它領域合作時應互相尊重。 你是美工嗎?「工人」指從事

自建 Name Server

本篇教學是延續「大神來六角」的 “網址管理與 DNS 託管全攻略”,目的是讓參與的學員更了解 DNS 在轉址的過程觀念。 對於 Name Serve 的概念可以參考 AWS 提供的架構圖: 擁有一個網域後,只要網域的供應商可以設定 NS Record,都可以用來自行建立 Name Server,並且可以自行代管該網域下的所有子網域。 本篇中的環境在教學結束後被釋放,所以無法再次連接。 參考文