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

1 Like 0 留言 7495 瀏覽

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

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

7514 ‧ 2022-01-05

0 Like 1 留言 6857 瀏覽

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

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

7514 ‧ 2021-12-27

0 Like 0 留言 5421 瀏覽

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

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

7514 ‧ 2022-01-11

0 Like 0 留言 4732 瀏覽

技術【Git】發 PR 是什麼？

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

7514 ‧ 2022-01-17

0 Like 1 留言 4414 瀏覽

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

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

7514 ‧ 2021-12-03

1 Like 0 留言 3986 瀏覽

技術【Vue】引入 Vue Carousel 輪播圖套件｜專案實作

背景許多網頁時常會加入輪播圖的設計，用來放置活動訊息或是品牌視覺圖片，傳遞資訊及強化品牌形象。因此也有許多輪播圖的套件相繼而出，如：swpier、owl ca...

7514 ‧ 2021-11-29

2 Like 0 留言 3742 瀏覽

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

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

7514 ‧ 2022-01-06

0 Like 0 留言 3439 瀏覽

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

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

7514 ‧ 2022-01-12

1 Like 0 留言 3277 瀏覽

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

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

7514 ‧ 2021-12-14

1 Like 0 留言 3048 瀏覽

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

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

7514 ‧ 2022-01-07

2 Like 0 留言 2800 瀏覽

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

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

7514 ‧ 2022-01-10

1 Like 0 留言 2713 瀏覽

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

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

7514 ‧ 2022-01-14

0 Like 0 留言 2573 瀏覽

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

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

7514 ‧ 2022-03-03

0 Like 0 留言 2348 瀏覽

技術【Vue】按照文件操作，怎麼還是報錯｜macOS 安裝 CLI 指令

創建 CLI(command-line interface) 環境前，要先下載 node.js① ⌘ + space 搜尋終端機 terminal.app ②...

7514 ‧ 2021-11-25

0 Like 0 留言 2138 瀏覽

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

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

7514 ‧ 2022-01-18

0 Like 0 留言 1947 瀏覽

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

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

7514 ‧ 2021-12-28

0 Like 0 留言 1843 瀏覽

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

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

7514 ‧ 2022-11-26

0 Like 0 留言 1731 瀏覽

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

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

7514 ‧ 2021-12-09

1 Like 0 留言 1726 瀏覽

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

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

7514 ‧ 2021-12-15

0 Like 0 留言 1615 瀏覽

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

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

7514 ‧ 2021-12-08

0 Like 0 留言 1300 瀏覽

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

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

7514 ‧ 2021-12-10

0 Like 0 留言 1221 瀏覽

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

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

7514 ‧ 2022-01-04

0 Like 0 留言 1217 瀏覽

技術【Vue】幫元件加上樣式啦｜修改 bootstrap 變數供全域樣式共用失敗

將樣式區分為全域樣式/區域樣式全域樣式：大多頁面都會共用到的樣式，reset & variable & maxin ...區域樣式：限制在單一...

7514 ‧ 2021-11-29

1 Like 0 留言 1209 瀏覽

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

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

7514 ‧ 2022-01-13

0 Like 0 留言 1202 瀏覽

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

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

7514 ‧ 2021-12-01

0 Like 0 留言 1155 瀏覽

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

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

7514 ‧ 2021-12-07

1 Like 0 留言 1116 瀏覽

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

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

7514 ‧ 2022-03-02

0 Like 0 留言 1108 瀏覽

技術【Vue】建立第一個 component | 專案實作

為什麼選擇建立 header component 呢？網站各個頁面都會共用固定版型而且不需要傳入動態的資料，不會有傳接資料報錯的問題開始建立第一個元件...

7514 ‧ 2021-11-26

0 Like 0 留言 1075 瀏覽

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

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

7514 ‧ 2021-12-13

0 Like 0 留言 1060 瀏覽

技術【Vue】將元件輸出到畫面｜專案實作

輸出完 header 元件後，試著在 App.vue 引入 TaiHeader.vue。App.vue* <template> <div i...

7514 ‧ 2021-11-27

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

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

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

技術 【Git】 發 PR 是什麼？

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

技術 【Vue】引入 Vue Carousel 輪播圖套件｜ 專案實作

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

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

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

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

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

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

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

技術 【Vue】按照文件操作，怎麼還是報錯｜macOS 安裝 CLI 指令

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

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

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

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

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

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

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

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

技術 【Vue】幫元件加上樣式啦｜修改 bootstrap 變數供全域樣式共用 失敗

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

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

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

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

技術 【Vue】建立 第一個 component | 專案實作