d3、vue 畫一個台灣地圖

本篇大綱:畫一個台灣地圖需要很多資源的幫忙、畫台灣地圖步驟、下載縣市界線經緯度、SHP轉檔GeoJSON、製作頁面、HTML、引用d3.js、d3.js append svg path、參考資源、原始碼、Demo。本篇紀錄在畫一個台灣的步驟,包含拿資料、轉檔、用d3.js繪製地圖,以及把台灣本島放在區塊中央。

ml5.js 神經網路 開發圖像辨識

本篇大綱:機器學習的JS Library、vue.js抓input file、ml5.js 圖像辨識API、第一個坑 沒等model載完、第二個坑 沒給圖片寬高、補充 關於圖片辨識模組、原始碼。本篇筆記主要寫用vue.js,搭配file API、ml5.js,做一個簡單的圖像識別頁面來玩。

切詞工具結巴Jeiba 優化標籤關鍵字

本篇大綱:切詞功能 幫你找到適合的標籤、結巴 Jieba 基本使用、切詞功能實際應用、參考資料。每篇文章都需要下標籤(tags),有時會不知道要下哪些,或是這個詞是不是大家比較常搜尋的關鍵字。Wordpress會把每個標籤獨立成一頁,所以想把標籤盡量設成跟關鍵字有關,以利SEO。

用原生JS做一個簡單的手風琴Accordion/Collapse功能

本篇大綱:從jQuery到原生JS、HTML、CSS、JavaScript、原始碼下載。今年開始在工作時逼自己寫原生的JS(Vanilla JavaScript),今天趁著意外的假日,試著把手風琴用原生JS寫了一個出來。寫完後發現,其實沒幾行就可以完成,也有了一點小小的成就感。

Promise, Async, Await 基本使用筆記

本篇大綱:Promise, Async, Await 真是個好物、Promise使用、Promise polyfill、Async, Await使用、Async, Await polyfill、筆記後心得。Promise, async, await,覺得又是一個前端必學的語法,可以很有效的解決以前遇到的問題。

用原生JS做一個簡單的抽獎功能頁面

本篇大綱:本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎,就自己動手寫了一個出來。把名稱改成「午餐吃什麼」,把抽獎的名單換成店家名稱,順便再加上Google Map進去,就解決不知道午餐要吃什麼的煩惱啦~

File API 客製上傳檔案按鈕(input file)

本篇大綱:客製上傳檔案input html 部份、客製上傳檔案input js 部份、示範頁面。最近朋友遇到一個需求,就是要客製上傳檔案的按鈕。覺得寫成一篇,然後把code存起來,以後要用比較好找。可以看到input的id,跟label的for,兩個值要是相同的,這樣就可以把label跟input綁起來。

vue transition中用多個v-if, v-show

本篇大綱:v-if, v-show tab功能好幫手、transition中放多個v-if、transition中放多個v-show、vue transition多個v-if, v-show整理。自從開始在用vue.js後,寫頁籤(tab)功能簡單多了。不只頁籤,相似的也很好用,比方線上測驗的換頁、手風琴。

如何使用vivus.js製作輕量快速svg動畫

本篇大綱:vivus.js主要在做svg的邊框動畫、安裝、使用、頁面引用svg、執行vivus.js、實作範例、svg圖、壓縮svg、寫code。最後完成的範例頁面在這,基本上都是使用vivus包含的ajax方法,可以直接看頁面上的原始碼。推薦這個套件,花個幾分鐘就可以做出看上去很厲害的作品。

用Firebase、Google Apps Script、GTM自己做一個讚按鈕

用Firebase、Google Apps Script、GTM自己做一個讚按鈕 本篇大綱:為什麼要自己開發一個按鈕、按鈕樣式部份、按鈕功能部份、判斷使用者語系、在google apps script上寫API、cookies、發Google Analytics事件、埋程式碼html、css、js、結論