卡斯伯提供的教學資源:

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...

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...

開始使用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增加了更多的效果,不僅可以增加網頁的閱讀性,還可以吸引使用者的目光。而許多的改變,正在影響著CS...

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就是其中一種,讓扁平的世界裡,增添一些的立體感。...

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

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

自己做web fonts icons

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

CSS沒有極限 - Checkbox的妙用

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

CSS沒有極限 - CSS transform 概觀

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

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

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

CSS沒有極限 - CSS transform-origin

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

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

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

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

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

Animation 和 keyframe

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

Animation 的各項設定值

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

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...

CSS3 垂直文字書寫

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

CSS3 Flex的排版方式

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

CSS3 Flex的對齊

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

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

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

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,本...

aShare使用技術

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

jQuery step by step 教學

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

純 "CSS" Banner animation教學

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

效能更好的banner animation

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

簡易CSS transform 視差效果

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

前端軟體-Prepos介紹

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

font-family要怎麼玩

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

Emmet Live Style 加減用啦~

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

Jekyll 介紹

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

GitHub Page

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

利用Jekyll Bootstrap 快速建立Blog

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

在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已經可以和人侃侃而談,閒暇之餘...

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

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

做網頁如果缺Icons怎麼辦

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

Sass 模組開發

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

CSS設定中英文不同的字體

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

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

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

Spriting with Compass

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

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已經學了有段時間,但還有許多不清楚的點都會在(偶然)的情況下發現,而有些只是有趣,但有些發現,或許是以前忽略的,但在卻是那麼的實用…。...

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

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

CSS + SVG stroke 動態描繪

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

Rails 環境建設

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

Sass 3.3 Source Maps

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

D3 Js 介紹

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

翻譯Material Design心得

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

安裝Gitbook

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

Gem Github pages

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

Gulp 環境安裝

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

Gulp Task and Gulp Pipe

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

2014 鐵人賽慢慢開始跑

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

SVG 簡介

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

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

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

SVG 超硬派了解 path Arcs

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

SVG Defs 以及 CSS

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

SVG Stroke , Marker 以及 CSS

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

初入D3.js

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

D3js 前置作業,製作簡易Server

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

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 究竟搭不搭捷運與死亡率有沒有關係?(1)

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

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

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

D3.js 圈圈小效果

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

D3.js 超粘的Voronoi Diagram繪圖

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

D3.js Transition動態效果

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

D3.js 資料數量增減

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

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

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

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

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

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

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

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特色的元件。...

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

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

高雄前端社群 - d3js

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

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/HT...

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

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

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

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

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

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

參與開源專案

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

CSS 冷知識

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

2014年度回顧

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

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,設計師可以透過這套工具,快速的傳達設計的內容,包含顏色、間距、字型等等,而工程師不會因...

Javascript 閉包

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

開始學習 React js

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

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有很多意想不到的效果(而且是個正妹),這邊來分享他的其中一個效果。...

CSS column 教學

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

隨意玩玩的 nw.js

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

動手玩 CSS,快速學會Flex

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

Hotjar 網站熱圖

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

SVG 客製化 checkbox

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

更棒的 Jekyll 編寫工具

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

將 Sketch icons 轉成 web icon fonts

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

過去的學習 每天一分享

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

客製化屬於你的 Bootstrap 4

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

被討厭的勇氣

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

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

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

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

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

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

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

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

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

動手玩 CSS 3d

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

第一次 CSS 讀書會

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

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

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

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

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

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

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

Sass 基礎教學 - CSS 讀書會

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

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

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

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 語法數量也不多,查找時間也不需要太長,自然覺得世界美好(!?) 這樣快速入門時會有一些難以發現的問題,網站是否易於維護、C...

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

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

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

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

鐵人賽 5 - CSS 的命名技巧

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

鐵人賽 6 - CSS 的元件狀態

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

鐵人賽 14 - Gulp - Webserver

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

鐵人賽 15 - 為什麼 Boostrap

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

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

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

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

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

鐵人賽 20 - Sass 資料夾結構

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

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

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

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

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

鐵人賽 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...

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

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

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

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

Javascript Promise 範例

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

VSCode 快速推坑介紹文

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

CSS Grid 屬性介紹

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

剛出社會要存錢嗎?

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

CSS3 Grid Layout

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

JavaScript ES6 Promise

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

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

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

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

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

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

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

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

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

鐵人賽:執行環境與堆疊

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

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

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

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

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

鐵人賽:動態型別的 JavaScript

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

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

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

鐵人賽:JavaScript 的文法學

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

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

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

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

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

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

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

鐵人賽:JavaScript 函式與參數

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

鐵人賽:JavaScript Function 與 Hoisting

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

鐵人賽:JavaScript 的原型繼承

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

鐵人賽:JavaScript 建構式

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

鐵人賽:JavaScript 建構式與原型

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

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

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

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

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

鐵人賽:ES6 的縮寫概念

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

鐵人賽:JavaScript 展開與其餘

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

鐵人賽:ES6 解構賦值

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

鐵人賽:ES6 陣列方法

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

鐵人賽:常用陣列方法

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

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

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

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

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

鐵人賽:JavaScript Await 與 Async

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

鐵人賽:ES6 建構式語法糖

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

鐵人賽:透過 ESLint 學習 JavaScript ES6

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

鐵人賽:邁向 JavaScript 的勇者

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

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

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

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

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

Github Pages 自訂網域免費升級 https

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

鐵人賽:系統字體介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

自建 Name Server

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

鐵人賽:iPhone 11 Pro Max 心得文

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

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

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

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

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

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

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

十分鐘快速掌握 Markdown

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

一分鐘切換成中文版 VSCode(完整圖文版)

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

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

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

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

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

單元測試 - 非同步及 Ajax

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

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

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

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

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

Flex 空間計算規則

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

開公司的流程及雷點分享

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

完全解析 JavaScript import、export

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

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

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

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

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

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

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

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

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

JS 加不加分號差在哪?

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

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

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

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

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

JS 記憶體釋放機制及驗證

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

JavaScript 一級函式 (First Class Functions)

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

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

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

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

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

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

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

箭頭函式常見陷阱題

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

閉包,原來這就是閉包啊!

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

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

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

AJAX 完整解說系列:新增、更新、刪除(POST/PATCH/DELETE)

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

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

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

AJAX 完整解說系列:輕鬆搞懂 HTTP 狀態碼(HTTP Status Code)

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

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

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

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

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

手把手自訂你的 Bootstrap 樣式

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

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

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

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

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

VSCode JS 註解就是你的文件

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

Async function / Await 深度介紹

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

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

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

Vue3 中使用 Event Bus

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

VSCode Prettier 整合 ESLint 自動排版

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

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

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

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

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

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

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

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

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

JavaScript Promise 全介紹

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

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

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

Vue 3 新手夏令營

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

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

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

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

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

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

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

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

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

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

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

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

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

撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))