用原生 JS 做一個簡單的手風琴 Accordion / Collapse 功能
本篇大綱:從jQuery到原生JS、HTML、CSS、JavaScript、原始碼下載。今年開始在工作時逼自己寫原生的JS(Vanilla JavaScript),今天趁著意外的假日,試著把手風琴用原生JS寫了一個出來。寫完後發現,其實沒幾行就可以完成,也有了一點小小的成就感。
本篇大綱:從jQuery到原生JS、HTML、CSS、JavaScript、原始碼下載。今年開始在工作時逼自己寫原生的JS(Vanilla JavaScript),今天趁著意外的假日,試著把手風琴用原生JS寫了一個出來。寫完後發現,其實沒幾行就可以完成,也有了一點小小的成就感。
本篇大綱:本篇要解決的問題。模擬取回的資料。整理資料。資料轉成 CSV 檔並下載。完成程式碼、範例。本篇會寫一個將取回的 JSON,轉成 CSV 檔後下載,並且保留原本資料的中文字。
本篇大綱:本篇要解決的問題。計算前 7 天。計算上週。計算上個月。處理閏年。30 天、31 天。完整判斷「上個月」程式碼。Day.js 的文件蠻簡潔的,而且沒有一個直接可以算出上個月的功能,本篇就是整理了一下算出前 x 天、上週、上個月的程式碼,也有在專案中實際使用。
本篇大綱:本篇要解決的問題。Instagram oEmbed 嵌入貼文流程。建立應用程式,取編號、密鑰。新增產品:oEmbed。新增 GAS 檔案當後端,取得 FB Access Token。取 Token、取 IG 貼文。
本篇大綱:需要工具。下載 Windows 10 ISO 檔。下載 Windows 支援軟體。下載 WinToUSB。WinToUSB 安裝 Windows 到隨身碟。Mac 用隨身碟開機。安全性設定不允許此 Mac 使用外部啟用磁碟。安裝 Windows 支援檔案
本篇大綱:本篇要解決的問題。selection 文字反白樣式。first-letter 每段的第一個字。marker li 「點」的樣式。target 被選擇的錨點、id。focus-within input 影響 form。:placeholder-shown。
本篇大綱:本篇要解決的問題。頁籤 Tab。手風琴 Collapse。本篇算是對 :target 選擇器的小練習,是真的可以不用寫 JavaScript 就做出頁籤、手風琴這二個功能。
本篇大綱:本篇要解決的問題。安裝 Clarity。Scroll depth 捲動深度。Dead clicks 無回應點擊。Rage clicks 憤怒點擊。JavaScript errors。Quick backs 過快點擊回上頁。基本數據。Recordings。Heatmaps。
本篇大綱:本篇要解決的問題。移動中心點-panTo、flyTo、panBy。抓取使用者位置並讓 Marker 跟隨移動-抓取使用者位置。本篇 Demo 及原始碼。
本篇大綱:本篇要解決的問題。請求地點,建立地圖。放置 Marker。Map 點擊事件。zoom in, zoom out。改變地圖樣式 Layer。本篇 Demo 及原始碼。Google Maps 好用,但過了一定的額度會收費,當時就有人留言問說免費地圖的事,有留上了心。
本篇大綱:本篇要解決的問題。工程師角度介紹合併列印。製作 Excel 檔。製作 Word。合併列印功能、啟用合併列印、選取收件者、插入合併欄位、完成合併。篩選功能。範例檔案下載。
本篇大綱:本篇要解決的問題。預覽、產出的HTML,要分開。用 replace 替代 hack,補上 width、html。檔案包成 zip 的套件:JSZip、FileSaver.js。抓圖檔要用 FileReader。JSZip 抓圖檔,要刪掉 base64 的開頭。demo 及原始檔下載。
前端工程師 August 的學習筆記 — solving problems, in simple ways.