iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1820 瀏覽

技術【JavaScript】File 計算單位要用 1000 bytes 還是 1024 bytes？

前言當使用者從瀏覽器上傳檔案後，可以取得修改時間、檔案名稱、檔案大小...相關的資訊如下： lastModifiedReturns the last mo...

7514 ‧ 2022-11-26

1 Like 0 留言 792 瀏覽

技術【JavaScript】物件、陣列解構賦值 (Destructuring Assignment)

賦予值一開始在學習 JavaScript 時，常需要宣告參數並賦予值，而等號右邊便是宣告參數的值。範例中宣告兩個參數分別為 device、fruit ，他們...

7514 ‧ 2022-07-19

0 Like 0 留言 2566 瀏覽

技術 Deep Link / Deferred Deep Link 深度連結

Deep Link 可以開啟 app 的特定頁面，而不僅僅是打開 app 首頁而已。 In the context of mobile apps, deep...

7514 ‧ 2022-03-03

1 Like 0 留言 1107 瀏覽

技術【JavaScript】檢查Array陣列的各種方式

本篇搭配 LeetCode 1.Two Sum 題目： Given an array of integers nums and an integer targe...

7514 ‧ 2022-03-02

0 Like 0 留言 2128 瀏覽

技術 Docker是什麼？用 Docker 建置環境有什麼優點呢？

簡單來說 Docker 就是一個虛擬機，確保執行專案時的環境都一樣。畢竟影響程式執行成功或失敗的變數太多了，不管是在開發、測試時，都很常遇到「在我的電腦看起來...

7514 ‧ 2022-01-18

0 Like 0 留言 4679 瀏覽

技術【Git】發 PR 是什麼？

第一次遇到發PR，原來就是檔案修改後，發通知請原作來拉回去（Pull）的請求（Request） 1.先複製（Fork）一份原作的專案到你自己的 GitHub 帳...

7514 ‧ 2022-01-17

1 Like 0 留言 2702 瀏覽

技術 DOM 是什麼 ? 先了解 Node & HTMLElement 就知道了

面試的時候很常會被問到 DOM 是什麼？那 Node 和 HTMLElement 又是什麼呢？ DOM(Document Object Model) 是由多個...

7514 ‧ 2022-01-14

1 Like 0 留言 1194 瀏覽

技術【JavaScript】if 的簡潔寫法｜三元運算子

判斷的條件？符合條件執行冒號前：不符合條件執行冒號後看 w3c setInterval() 的範例時學習到的三元運算子概念 const myInterval...

7514 ‧ 2022-01-13

0 Like 0 留言 3408 瀏覽

技術【Vue】image 顯示預設圖 | @load

@load 用在圖片標籤時 image src 有值的时候，才會開始加載 onload 事件是在 src 的資源加載完畢的時候，才會觸發 <img s...

7514 ‧ 2022-01-12

0 Like 0 留言 5382 瀏覽

技術【JavaScript】日期轉換為年/月/日字串

JavaScript 有許多處理日期的方法，toLocaleDateString() 可以將日期的標準格式，轉換為僅保留日期(不含時間)的字串格式。 toLo...

7514 ‧ 2022-01-11

2 Like 0 留言 2779 瀏覽

技術 Google Maps JavaScript API 工具｜專案實作

串接地圖 JavaScript API 中雖然相較起來難度較高，不過官方文件寫的也很簡單易懂。使用方式 1.宣告 HTML5 文件，將 JS CDN 引入檔案...

7514 ‧ 2022-01-10

1 Like 0 留言 3012 瀏覽

技術 Google Static Map Maker 靜態地圖 API 工具｜專案實作

Google Static Map API 是將網頁上需要的地圖畫面，以靜態地圖圖片的方式顯示。優點效能很好，因為只是一張圖片缺點無法對圖片縮放、移動，只能...

7514 ‧ 2022-01-07

2 Like 0 留言 3717 瀏覽

技術最簡單的 Google Maps 嵌入方式｜專案實作

工具有許多種，不過隨著專案大小與需求不同，搭配適合的實作方式才能達到最佳效益，常見的 Google Maps 優缺點比較看這裡。此次的需求只要在地圖上呈現座標地...

7514 ‧ 2022-01-06

1 Like 0 留言 7437 瀏覽

技術 3 種常用的 Google Maps 嵌入方式

在網頁內嵌入地圖的需求時常會用到，以下三種是最常見的方法： Google Maps Embed API (內嵌網頁) Google Static Map...

7514 ‧ 2022-01-05

0 Like 0 留言 1201 瀏覽

技術【Vue】params vs. query | Vue Router

params - 命名的路由，加上参数讓路由建立 url 動態的參數前要加上冒號 ":" let router = new VueRoute...

7514 ‧ 2022-01-04

0 Like 0 留言 893 瀏覽

技術【Vue】2個步驟檢測路由 | Path Ranker

Path Ranker 是一款檢測 Vue Router 路由的工具，確認網址會進到正確的路由。第一種方式，可以手動輸入第二種是用匯入的方式，也只要2個步...

7514 ‧ 2021-12-29

0 Like 0 留言 1936 瀏覽

技術【Vue】Vue Router 設定路由｜專案實作

為什麼要設定路由呢？過去的網頁大多是 Multi Page Application(多頁式應用程式)，一個網頁畫面對應到一個網址，當切換一個網址就換開啟一份...

7514 ‧ 2021-12-28

0 Like 1 留言 6790 瀏覽

技術【HTML】dl dd dt 清單型的網頁標籤

網頁呈現若有內文有「標題+內文的清單」會怎麼排版呢？可以使用 description list 哦你可能像我一樣有試過這幾種方式，多個<ul>...

7514 ‧ 2021-12-27

1 Like 0 留言 1718 瀏覽

技術繪製 3D 圖片的工具｜Spline

最近在看前端 3D 動畫相關的技術，突然發現 Spline 這個設計工具，可以做出那種帥帥的3D＆單色圖案。除此之外，在 Spline 製作互動動畫，可以一鍵...

7514 ‧ 2021-12-15

1 Like 0 留言 3251 瀏覽

技術【前端效能優化】圖片懶加載 Lazy Load

圖片緩載入是為了避免第一次進到網頁載入大量圖片，造成網頁載入速度太慢，因此非第一個畫面看到的圖片，可以等到需要時再依序載入畫面。 Lazy Load 概念圖...

7514 ‧ 2021-12-14

0 Like 0 留言 1060 瀏覽

技術 TailWind CSS 使用套件還是可以輕鬆客製化樣式

這次2021 iThome鐵人賽得獎名單出爐啦，看了 @搋兔寫的排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！雖然僅僅只看了概念描述，...

7514 ‧ 2021-12-13

0 Like 0 留言 904 瀏覽

技術【前端效能優化】Lighthouse 檢測後將圖片轉為 webp 格式

原先的網站表現分數只有 74分更換圖片格式後網站表現分數 97分可以看見最大內容繪製 LCP(Largest Contentful Paint)的秒數從5...

7514 ‧ 2021-12-11

0 Like 0 留言 1294 瀏覽

技術【前端效能優化】WebP - 較小容量的圖片格式選擇

常見的圖片格式有 GIF：常用來做動態圖片 JPEG：適合 Banner、風景等大圖片 PNG：透明、有線條及文字的圖片 SVG：Icon、圖表類型，任意放大...

7514 ‧ 2021-12-10

0 Like 0 留言 1714 瀏覽

技術【前端效能優化】Lighthouse 網站效能檢測工具

Lighthouse 一款在 Google Chrome 上安裝的擴充套件，用來檢測網站的效能，Lighthouse 會產出改善建議報告，讓開發者有更實質的效能...

7514 ‧ 2021-12-09

0 Like 0 留言 1611 瀏覽

技術【Vue】引用 bootstrap 5 不再依賴 JQuery ｜專案實作

npm 引用 bootstrap $ npm install bootstrap CDN 引用 bootstrap 不需要載入 JQuery 函式庫，減少載入...

7514 ‧ 2021-12-08

0 Like 0 留言 1147 瀏覽

技術【Vue】this = undefined 可能是箭頭函式搞的鬼

箭頭函式和普通函式之間的區別箭頭函式並沒有自己的 this this 會往上找到最近的函數主體作為物件 this 指向定義時所在的物件，而不是呼叫時所在的物...

7514 ‧ 2021-12-07

0 Like 1 留言 4369 瀏覽

技術【Vue】new Vue() 和 export default 差別

new Vue()：建立Vue實例 export default：輸出模塊先前建立組件時輸入和輸出組件都是使用 import/export default，從...

7514 ‧ 2021-12-03

0 Like 0 留言 993 瀏覽

技術【Vue】Vue Devtools 開發工具

Vue Devtools 是一款擴充 Chorme 瀏覽器的套件，只需要按照官網上的指示，在瀏覽器上擴充後可以用來檢查組件的資料。較常利用 Vue Devt...

7514 ‧ 2021-12-02

0 Like 0 留言 1197 瀏覽

技術【Vue】串 API 前置作業｜Axios 是什麼？

Axios 是一個 Promise based 的HTTP 請求工具。那 Promise based 是什麼？ Promise 用來解決 JavaScript...

7514 ‧ 2021-12-01

0 Like 0 留言 1045 瀏覽

技術【Vue】幫卡片式排版加上假資料｜components v-for & data

作法定義好單一元件 (template+區域樣式)，在畫面內引入元件，並根據需求再做調整如：樣板迴圈 v-for、傳資料回元件。不將資料寫在小元件內，是避免後...

7514 ‧ 2021-11-30

技術 【JavaScript】File 計算單位要用 1000 bytes 還是 1024 bytes？

技術 【JavaScript】物件、陣列 解構賦值 (Destructuring Assignment)

技術 Deep Link / Deferred Deep Link 深度連結

技術 【JavaScript】檢查Array陣列的各種方式

技術 Docker是什麼？用 Docker 建置環境有什麼優點呢？

技術 【Git】 發 PR 是什麼？

技術 DOM 是什麼 ? 先了解 Node & HTMLElement 就知道了

技術 【JavaScript】if 的簡潔寫法｜ 三元運算子

技術 【Vue】image 顯示預設圖 | @load

技術 【JavaScript】 日期轉換為 年/月/日 字串

技術 Google Maps JavaScript API 工具｜專案實作

技術 Google Static Map Maker 靜態地圖 API 工具｜專案實作

技術 最簡單的 Google Maps 嵌入方式 ｜ 專案實作

技術 3 種常用的 Google Maps 嵌入方式

技術 【Vue】params vs. query | Vue Router

技術 【Vue】2個步驟檢測路由 | Path Ranker

技術 【Vue】Vue Router 設定路由｜ 專案實作

技術 【HTML】dl dd dt 清單型的網頁標籤

技術 繪製 3D 圖片的工具｜Spline

技術 【前端效能優化】圖片懶加載 Lazy Load