前言 當使用者從瀏覽器上傳檔案後，可以取得修改時間、檔案名稱、檔案大小...相關的資訊如下： lastModifiedReturns the last mo...
賦予值 一開始在學習 JavaScript 時，常需要宣告參數並賦予值，而等號右邊便是宣告參數的值。 範例中宣告兩個參數分別為 device、fruit ，他們...
Deep Link 可以開啟 app 的特定頁面，而不僅僅是打開 app 首頁而已。 In the context of mobile apps, deep...
本篇搭配 LeetCode 1.Two Sum 題目： Given an array of integers nums and an integer targe...
簡單來說 Docker 就是一個虛擬機，確保執行專案時的環境都一樣。 畢竟影響程式執行成功或失敗的變數太多了，不管是在開發、測試時，都很常遇到「在我的電腦看起來...
第一次遇到發PR，原來就是檔案修改後，發通知請原作來拉回去（Pull）的請求（Request） 1.先複製（Fork）一份原作的專案到你自己的 GitHub 帳...
判斷的條件？符合條件執行冒號前：不符合條件執行冒號後 看 w3c setInterval() 的範例時學習到的三元運算子概念 const myInterval...
面試的時候很常會被問到 DOM 是什麼？那 Node 和 HTMLElement 又是什麼呢？ DOM(Document Object Model) 是由多個...
JavaScript 有許多處理日期的方法，toLocaleDateString() 可以將日期的標準格式，轉換為僅保留日期(不含時間)的字串格式。 toLo...
串接地圖 JavaScript API 中雖然相較起來難度較高，不過官方文件寫的也很簡單易懂。 使用方式 1.宣告 HTML5 文件，將 JS CDN 引入檔案...
Google Static Map API 是將網頁上需要的地圖畫面，以靜態地圖圖片的方式顯示。優點 效能很好，因為只是一張圖片缺點 無法對圖片縮放、移動，只能...
工具有許多種，不過隨著專案大小與需求不同，搭配適合的實作方式才能達到最佳效益，常見的 Google Maps 優缺點比較看這裡。此次的需求只要在地圖上呈現座標地...
在網頁內嵌入地圖的需求時常會用到，以下三種是最常見的方法： Google Maps Embed API (內嵌網頁) Google Static Map...
params - 命名的路由，加上参数讓路由建立 url 動態的參數前要加上冒號 ":" let router = new VueRoute...
網頁呈現若有內文有「標題+內文的清單」會怎麼排版呢？ 可以使用 description list 哦 你可能像我一樣有試過這幾種方式，多個<ul>...
Path Ranker 是一款檢測 Vue Router 路由的工具，確認網址會進到正確的路由。 第一種方式，可以手動輸入 第二種是用匯入的方式，也只要2個步...
最近在看前端 3D 動畫相關的技術，突然發現 Spline 這個設計工具，可以做出那種帥帥的3D＆單色圖案。 除此之外，在 Spline 製作互動動畫，可以一鍵...
圖片緩載入是為了避免第一次進到網頁載入大量圖片，造成網頁載入速度太慢，因此非第一個畫面看到的圖片，可以等到需要時再依序載入畫面。 Lazy Load 概念 圖...
這次2021 iThome鐵人賽得獎名單出爐啦，看了 @搋兔 寫的排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！雖然僅僅只看了概念描述，...
原先的網站表現分數只有 74分 更換圖片格式後網站表現分數 97分 可以看見最大內容繪製 LCP(Largest Contentful Paint)的秒數從5...
常見的圖片格式有 GIF：常用來做動態圖片 JPEG：適合 Banner、風景等大圖片 PNG：透明、有線條及文字的圖片 SVG：Icon、圖表類型，任意放大...
Lighthouse 一款在 Google Chrome 上安裝的擴充套件，用來檢測網站的效能，Lighthouse 會產出改善建議報告，讓開發者有更實質的效能...
npm 引用 bootstrap $ npm install bootstrap CDN 引用 bootstrap 不需要載入 JQuery 函式庫，減少載入...
箭頭函式和普通函式之間的區別 箭頭函式並沒有自己的 this this 會往上找到最近的函數主體作為物件 this 指向定義時所在的物件，而不是呼叫時所在的物...
為什麼要設定路由呢？ 過去的網頁大多是 Multi Page Application(多頁式應用程式)，一個網頁畫面對應到一個網址，當切換一個網址就換開啟一份...
@load 用在圖片標籤時 image src 有值的时候，才會開始加載 onload 事件是在 src 的資源加載完畢的時候，才會觸發 <img s...
new Vue()：建立Vue實例 export default：輸出模塊 先前建立組件時輸入和輸出組件都是使用 import/export default，從...
Vue Devtools 是一款擴充 Chorme 瀏覽器的套件，只需要按照官網上的指示，在瀏覽器上擴充後可以用來檢查組件的資料。 較常利用 Vue Devt...
Axios 是一個 Promise based 的HTTP 請求工具。那 Promise based 是什麼？ Promise 用來解決 JavaScript...
背景 許多網頁時常會加入輪播圖的設計，用來放置活動訊息或是品牌視覺圖片，傳遞資訊及強化品牌形象。因此也有許多輪播圖的套件相繼而出，如：swpier、owl ca...
iThome鐵人賽
看影片追技術