卡斯伯提供的教學資源:


d3js

D3js 前置作業,製作簡易Server

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

d3js

SVG Stroke , Marker 以及 CSS

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

d3js

SVG Defs 以及 CSS

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

d3js

SVG 超硬派了解 path Arcs

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

d3js

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

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

d3js

SVG 簡介

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

d3js

2014 鐵人賽慢慢開始跑

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

gulp

Gulp Task and Gulp Pipe

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

gulp

Gulp 環境安裝

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

jekyll

Gem Github pages

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

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