用Vue.js製作圖片版EDM生成器
本篇大綱:本篇要解決的問題。預覽、產出的HTML,要分開。用 replace 替代 hack,補上 width、html。檔案包成 zip 的套件:JSZip、FileSaver.js。抓圖檔要用 FileReader。JSZip 抓圖檔,要刪掉 base64 的開頭。demo 及原始檔下載。
本篇大綱:本篇要解決的問題。預覽、產出的HTML,要分開。用 replace 替代 hack,補上 width、html。檔案包成 zip 的套件:JSZip、FileSaver.js。抓圖檔要用 FileReader。JSZip 抓圖檔,要刪掉 base64 的開頭。demo 及原始檔下載。
本篇大綱:使用資源。lazy load 延遲載入(圖片、影片)、一個神奇的狀況(坑?)。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用(以下簡稱IO),本篇來寫三個實際應用。本篇的無限滾動,是像FB那樣子,頁面每捲到底,就會多載入一張卡片進來。
本篇大綱:IntersectionObserver?拿超商的歡迎光臨來說明。IO使用3步驟:1 建立觀察器(observer)、2 指定觀察器要觀察的獵物(entry)、3 當獵物 進入(true) / 離開(false) 觀察器視窗的範圍,觀察器就執行callback。原始碼。參考資源。
本篇大綱:愈來愈常用到Markdown了、Markdown編輯器 Typora、標題、內文、文字斜體、粗體、清單、引言、超連結、圖片、圖片加上連結、寫程式碼、行內程式碼。本篇主要是筆記Augustus用Markdown寫文時,最常用到的幾個。
本篇大綱:機器學習的JS Library、vue.js抓input file、ml5.js 圖像辨識API、第一個坑 沒等model載完、第二個坑 沒給圖片寬高、補充 關於圖片辨識模組、原始碼。本篇筆記主要寫用vue.js,搭配file API、ml5.js,做一個簡單的圖像識別頁面來玩。
從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。
本篇大綱:圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入,實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後,頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據,4.57秒,下面這張是用了延遲載入後的數據,降到2.02秒。
前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.