Netlify+Gitlab 建一個免費靜態網站

Netlify + GitLab 建一個免費靜態網站

本篇大綱:免費架一個站的工具愈來愈多。開始前需要準備好的。1 註冊Netlify帳號。2 連接Gitlab專案。3 修改子網域名稱。4 自訂域名。本篇要筆記的是免費架站工具:Netlify。它可以直接抓Github、Gitlab裡的專案,想更新時只要push專案就行,而且還可以自訂網域。

IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動

IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動

本篇大綱:使用資源。lazy load 延遲載入(圖片、影片)、一個神奇的狀況(坑?)。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用(以下簡稱IO),本篇來寫三個實際應用。本篇的無限滾動,是像FB那樣子,頁面每捲到底,就會多載入一張卡片進來。

JavaScript載入方式 defer, async

JavaScript 載入方式 defer、async

本篇大綱:defer、async、都不寫。這是很久以前的筆記,這次來整理並更新,主要是筆記載入JavaScript時,defer、async這兩個標籤的不同。瀏覽器是一行一行讀下去的,defer、async都不寫的話,DOM繪製到引用JS的那一行時,就停下來先解讀、執行完,然後DOM才接著往下繪製。

SpeechSynthesisUtterance 讓瀏覽器說話

SpeechSynthesisUtterance 讓瀏覽器說話

本篇大綱:瀏覽器本身就可以發音、頁面製作、SpeechSynthesisUtterance、第一坑 拿瀏覽器支援的所有語音、第二坑 調整速度倍率、第三坑 Chrome的Google語音、原始碼、筆記後心得。原本以為照著用,然後用vue.js把參數接一接,馬上就可以完成的,但一接參數就踩坑了。

Markdown常用語法筆記

Markdown 常用語法筆記

本篇大綱:愈來愈常用到Markdown了、Markdown編輯器 Typora、標題、內文、文字斜體、粗體、清單、引言、超連結、圖片、圖片加上連結、寫程式碼、行內程式碼。本篇主要是筆記Augustus用Markdown寫文時,最常用到的幾個。

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

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

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

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

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

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

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.