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

0 Like 0 留言 1121 瀏覽

鐵人賽 Modern Web DAY 25

從零開始手刻網站，30 天打造我的前端武器庫系列第 25 篇

技術 DAY 25：前端小功能實作-不分類

一、前言這篇收集了一些常見的組件，每個功能的程式碼並不多，於是決定將這些程式碼集中寫在一起啦～希望這些組件可以被重複利用，並且發揮一定的作用。那麼，現在就來...

東尼先生 ‧ 2022-10-09

0 Like 0 留言 3487 瀏覽

鐵人賽 Modern Web DAY 24

從零開始手刻網站，30 天打造我的前端武器庫系列第 24 篇

技術 Day 24：Scroll 組件實作

組件實作 : Demo、Demo2 一、前言 Scroll 的意思為滾動，它常見的應用，比如在頁面捲動時所產生的效果，這個效果被稱作為「視差滾動」 Par...

東尼先生 ‧ 2022-10-08

0 Like 0 留言 1319 瀏覽

鐵人賽自我挑戰組 DAY 24

手刻武器庫，30 天前端學習心得系列第 24 篇

技術 Day 24：React 的 Hook 初探

一、前言昨天我們把 React 的環境架起來，並且執行「Hello World」程式。今天要來學習一下 Hook 的寫法，至於 Hook 是什麼？以及要如何...

東尼先生 ‧ 2022-10-08

0 Like 0 留言 1788 瀏覽

鐵人賽自我挑戰組 DAY 23

手刻武器庫，30 天前端學習心得系列第 23 篇

技術 Day 23：React 環境建置 - Hello World

一、前言從今天起連續 5 天，我們會專注在前端框架 React 的學習上。學習框架原因不單只是因為專案需求，更多的原因是學框架對于求職來說，已經變成一種標準...

東尼先生 ‧ 2022-10-07

0 Like 0 留言 2471 瀏覽

鐵人賽 Modern Web DAY 23

從零開始手刻網站，30 天打造我的前端武器庫系列第 23 篇

技術 Day 23：Image Overlay 組件實作

組件實作：Demo 一、前言 Image Overlay 指的是圖片上的覆蓋效果，我們要做的是：「使用滑鼠移動到圖片上，頁面會從四個方向來滑入頁面，像是從...

東尼先生 ‧ 2022-10-07

0 Like 0 留言 2555 瀏覽

鐵人賽 Modern Web DAY 22

從零開始手刻網站，30 天打造我的前端武器庫系列第 22 篇

技術 Day 22：鍵盤輸入事件實作

組件實作：Demo 一、前言鍵盤輸入監聽事件是一個很有用的功能，或許在瀏覽一般的網頁時，比較不常使用鍵盤控制。但如果是遊玩網頁遊戲，取得鍵盤的監聽就會變...

東尼先生 ‧ 2022-10-06

0 Like 0 留言 1952 瀏覽

鐵人賽自我挑戰組 DAY 22

手刻武器庫，30 天前端學習心得系列第 22 篇

技術 Day 22：SVG Path 急速入門

組件實作：Demo 一、前言今天要來介紹的東西是「與繪畫相關的東西 - CSS 和 SVG」，CSS 來製作圖形是一件很常見的事情，至於為什麼會特別的提...

東尼先生 ‧ 2022-10-06

0 Like 0 留言 1211 瀏覽

鐵人賽自我挑戰組 DAY 21

手刻武器庫，30 天前端學習心得系列第 21 篇

技術 Day 21：小作品展示

組件實作 : Demo、Demo2 一、前言昨天學習 Sass 的最主要目的，就是為了要看懂自己以前寫的東西，我把它統稱為小作品，當時的這些小作品我是照...

東尼先生 ‧ 2022-10-05

0 Like 0 留言 1048 瀏覽

鐵人賽 Modern Web DAY 21

從零開始手刻網站，30 天打造我的前端武器庫系列第 21 篇

技術 Day 21：List 功能實作

組件實作 : Demo 一、前言 List 也是一種很常見的功能，其實 List 可以跟之前做的 Day 18：Collapsibles 組件實作搭配使...

東尼先生 ‧ 2022-10-05

0 Like 0 留言 1039 瀏覽

鐵人賽自我挑戰組 DAY 20

手刻武器庫，30 天前端學習心得系列第 20 篇

技術 Day 20：Sass 學習筆記

一、前言之前在 Hahow 學習前端相關的課程，學了一點 Sass 的基本寫法，印象中大概學了 4 個月，後來使用純 CSS 作為開發環境，導致 Sass...

東尼先生 ‧ 2022-10-04

0 Like 0 留言 6146 瀏覽

鐵人賽 Modern Web DAY 20

從零開始手刻網站，30 天打造我的前端武器庫系列第 20 篇

技術 Day 20：AJAX 功能實作

組件實作 : Demo 一、前言 AJAX（Asynchronous JavaScript and XML）中文翻作「非同步的 JavaScript 與...

東尼先生 ‧ 2022-10-04

0 Like 0 留言 1521 瀏覽

鐵人賽 Modern Web DAY 20

擊敗前端面試大作戰！系列第 20 篇

技術 [擊敗前端面試大作戰] 前端優化

今天是擊敗前端面試大作戰的第二十篇了！！！！我們前面討論了 HTML/CSS、Javascript、React 和 Typescript，基本上主要面試會考到...

bywater529 ‧ 2022-10-04

0 Like 0 留言 3713 瀏覽

鐵人賽 Modern Web DAY 19

從零開始手刻網站，30 天打造我的前端武器庫系列第 19 篇

技術 Day 19：滑動頁面組件實作

組件實作 : Demo 一、前言滑動頁面組件 Overlay 的用途是當作側邊選單，可以用在隱藏一部分的資訊，讓頁面看起來更乾淨，反過來說，Overla...

東尼先生 ‧ 2022-10-03

0 Like 0 留言 1833 瀏覽

鐵人賽自我挑戰組 DAY 19

手刻武器庫，30 天前端學習心得系列第 19 篇

技術 Day 19：jQuery 學習筆記-下

組件實作 : Demo、Demo2 一、前言今天要來繼續研究 jQuery 的用法，經過我非常努力的看書後，發現勾不起我寫文章的動力，索性就直接在網路上...

東尼先生 ‧ 2022-10-03

0 Like 0 留言 2557 瀏覽

鐵人賽 Modern Web DAY 18

從零開始手刻網站，30 天打造我的前端武器庫系列第 18 篇

技術 Day 18：Collapsibles 組件實作

組件實作 : Demo、Demo2 一、前言 Collapsibles 翻譯為折疊的意思，所以它可以像是下拉選單一樣，點擊按鈕後即可展開內容，其實這個組件的作...

東尼先生 ‧ 2022-10-02

0 Like 0 留言 2806 瀏覽

鐵人賽自我挑戰組 DAY 18

手刻武器庫，30 天前端學習心得系列第 18 篇

技術 Day 18：jQuery 學習筆記-上

一、前言伴隨著前端框架的不斷演進，jQuery 的使用慢慢地式微，甚至出現了棄用 jQuery 的建議【1】。雖然某些公司專案開上可能不再使用 jQuery...

東尼先生 ‧ 2022-10-02

0 Like 0 留言 2159 瀏覽

鐵人賽自我挑戰組 DAY 17

手刻武器庫，30 天前端學習心得系列第 17 篇

技術 Day 17：Docker 學習筆記

一、前言這篇文章的主要目的是在記錄學習 Docker 的相關議題，內容包括：「是如何入門？碰上問題時的解決方法？」等等，目標是把環境建立起來，還有整理相關的...

東尼先生 ‧ 2022-10-01

0 Like 0 留言 1126 瀏覽

鐵人賽 Modern Web DAY 17

從零開始手刻網站，30 天打造我的前端武器庫系列第 17 篇

技術 Day 17：Testimonials 組件實作

組件實作 : Demo 一、前言 Testimonials 這個組件意思是「證言」，類似推薦信的感覺，也就是網路上的文章底下常見的留言評論區，先不討論這些...

東尼先生 ‧ 2022-10-01

0 Like 0 留言 5270 瀏覽

鐵人賽 Modern Web DAY 16

從零開始手刻網站，30 天打造我的前端武器庫系列第 16 篇

技術 Day 16：Tooltip 組件實作

組件實作 : Demo 一、前言 Tooltip 是文字提示的組件，感覺上它很容易被忽略，其實這一個功能在網頁上也很常找到它的芳蹤，其實作的原理，也不會太...

東尼先生 ‧ 2022-09-30

0 Like 0 留言 2446 瀏覽

鐵人賽自我挑戰組 DAY 16

手刻武器庫，30 天前端學習心得系列第 16 篇

技術 Day 16：Gulp 學習筆記

一、前言 Gulp 是工作流程自動化的工具，可以幫我們處理一些需要重複執行的指令，像這類繁瑣的工作，可以交給 Gulp 來處理，在初學 Gulp 時，可以直接...

東尼先生 ‧ 2022-09-30

0 Like 0 留言 1491 瀏覽

鐵人賽自我挑戰組 DAY 15

手刻武器庫，30 天前端學習心得系列第 15 篇

技術 Day 15：偽元素與偽類

組件實作 : Demo 一、前言在寫某些專案或者是練習，時不時會看到::before、::after這類元素的用法，在第一次接觸時，總是會感到困惑，不清...

東尼先生 ‧ 2022-09-29

0 Like 0 留言 2811 瀏覽

鐵人賽 Modern Web DAY 15

從零開始手刻網站，30 天打造我的前端武器庫系列第 15 篇

技術 Day 15：Animation 組件實作

組件實作 : Demo 一、前言 Animation 動畫是網頁中不可或缺的重要元素，它能夠為網頁帶來生命力，讓整個網頁「活了起來」，在本篇中介紹幾個語法...

東尼先生 ‧ 2022-09-29

0 Like 0 留言 1728 瀏覽

鐵人賽自我挑戰組 DAY 14

手刻武器庫，30 天前端學習心得系列第 14 篇

技術 Day 14：JS ES6 學習筆記

組件實作 : Demo 一、前言關於 JavaScript 的故事其實是這樣的：「JavaScript 誕生於 1995 年的景網通訊（Netscape...

東尼先生 ‧ 2022-09-28

0 Like 0 留言 1380 瀏覽

鐵人賽 Modern Web DAY 14

從零開始手刻網站，30 天打造我的前端武器庫系列第 14 篇

技術 Day 14：Typing Effect 組件實作

組件實作：Demo 一、前言 Typing Effect 是一種好用的文字效果，看似簡單的語法下，其實藏著一些不太好理解的概念，例如 CSS 的 Anim...

東尼先生 ‧ 2022-09-28

1 Like 0 留言 1347 瀏覽

鐵人賽自我挑戰組 DAY 13

手刻武器庫，30 天前端學習心得系列第 13 篇

技術 Day 13：Vim 學習筆記

一、前言其實，我也不知道自己怎麼會想加入這個主題，只是有點想要學習 Vim 的基本操作，順便紀錄一下學過的操作方法，現階段我也沒有想要背任何的指令或是快捷鍵...

東尼先生 ‧ 2022-09-27

0 Like 0 留言 1718 瀏覽

鐵人賽 Modern Web DAY 13

從零開始手刻網站，30 天打造我的前端武器庫系列第 13 篇

技術 Day 13：Tab 組件實作

組件實作 : Demo 一、前言 Tab 組件是一種高互動性的組件，構造是由一個 Menu 選單和一個訊息框組合而成，當選單項目被選中時，會切換到對應的訊...

東尼先生 ‧ 2022-09-27

0 Like 0 留言 2700 瀏覽

鐵人賽 Modern Web DAY 12

從零開始手刻網站，30 天打造我的前端武器庫系列第 12 篇

技術 Day 12：Ｍodal 組件實作

組件實作 : Demo 一、前言Ｍodal 指的是互動視窗，也就是讓畫面跳出一個蓋板訊息框。使用 Modal 背景大多由半透明黑色覆蓋；訊息框（互動視窗...

東尼先生 ‧ 2022-09-26

0 Like 0 留言 3842 瀏覽

鐵人賽自我挑戰組 DAY 12

手刻武器庫，30 天前端學習心得系列第 12 篇

技術 Day 12：Google Maps API

組件實作 : Demo 一、前言網頁上要顯示店家、場地等地理位置資訊，都會使用到 Google 地圖來輔助。在這個篇章中，我們要來研究關於 Google...