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

0 Like 0 留言 1519 瀏覽

鐵人賽 Modern Web DAY 21

Follow me! 來一場前端技能樹之旅系列第 21 篇

技術 [Day 21 - React] 今晚我想來點，React的其他功能

前情提要：在上一篇網頁UI組件化 — React component，大致了解 React 最重要的核心 — Component，並且學會了在組件內控制資料...

May ‧ 2021-10-04

0 Like 0 留言 600 瀏覽

鐵人賽 Modern Web DAY 19

用React刻自己的投資Dashboard 系列第 19 篇

技術用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

tags: 2021鐵人賽 React 2.0首頁想加上各國股市的最新盤勢資訊，畢竟這些資料是投資人每天都會需要看一下的，所以放在首頁會是不錯的選擇。首頁會放...

Sean Liu ‧ 2021-10-04

0 Like 0 留言 1598 瀏覽

鐵人賽 Modern Web DAY 19

今晚，我想來點 Web 前端效能優化大補帖！系列第 19 篇

技術 Day19 X Application Shell Architecture

昨天介紹 Service Workers 後我們知道它是 PWA 的要素之一，且也是讓 Web App 實現離線瀏覽的關鍵技術。今天我們將延伸昨天的知識，介紹...

莫力全 Kyle Mo ‧ 2021-10-04 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 1278 瀏覽

鐵人賽 Modern Web DAY 18

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 18 篇

技術 Day 18 — To Do List (5) 新增 To Do Event

昨天我們快樂 (?) 的把資料 render 到網頁上（雖然會有點 Delay，對 UX 不好…不過那可以靠其他東西稍微彌補的。有空才處理）那麼下一步我們就來...

鳳黃酥 ‧ 2021-10-03

0 Like 0 留言 1689 瀏覽

鐵人賽 Modern Web DAY 20

Follow me! 來一場前端技能樹之旅系列第 20 篇

技術 [Day 20 - React] 網頁UI組件化 — React component

前情提要：在上一篇現在開始用框架寫網頁 — React，我們學習了如何在 React 使用 JSX 撰寫 Element 呈現出網頁頁面，接下來就會帶著大家將...

May ‧ 2021-10-03

0 Like 0 留言 1572 瀏覽

鐵人賽 Modern Web DAY 18

用React刻自己的投資Dashboard 系列第 18 篇

技術用React刻自己的投資Dashboard Day18 - 選單列active style功能

tags: 2021鐵人賽 React 上一篇將選單列做出來，並且完成點擊上方按鈕會跳轉至對應頁面的功能，不過總覺得好像少了些什麼？原來是點擊按鈕之後，按鈕的樣...

Sean Liu ‧ 2021-10-03

3 Like 0 留言 3908 瀏覽

鐵人賽 Modern Web DAY 18

今晚，我想來點 Web 前端效能優化大補帖！系列第 18 篇

技術 Day18 X Service Workers Cache

如果你聽過 PWA，那麼對今天的主題ㄧ定不陌生，因為今天要講的 Service Worker 就是 PWA 的一個重要元件。不過 PWA 這個主題本身就已經足...

莫力全 Kyle Mo ‧ 2021-10-03 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 1489 瀏覽

鐵人賽 Modern Web DAY 17

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 17 篇

技術 Day 17 — To Do List (4) 讓網頁呈現試算表資料

經過前面兩天稍微了解了 HTML Service 後，今天我們要來開始實作我們的 To Do List 了！今天我們分成三個部分進行：建立假資料。...

鳳黃酥 ‧ 2021-10-02

0 Like 0 留言 3682 瀏覽

鐵人賽 Modern Web DAY 19

Follow me! 來一場前端技能樹之旅系列第 19 篇

技術 [Day 19 - React] 現在開始用框架寫網頁 — React

為什麼要使用框架？前端最重要的工作，就是讓網頁的資料與狀態視覺化，有資料狀態改變時，就要更動網頁內容的顯示。但當網頁內容複雜化，網頁元件、元件操作功能和資料狀...

May ‧ 2021-10-02

0 Like 0 留言 884 瀏覽

鐵人賽 Modern Web DAY 17

用React刻自己的投資Dashboard 系列第 17 篇

技術用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能

tags: 2021鐵人賽 React 如Day15的wireframe，為了要加上更多的功能，因此要在頂端列新增幾個按鈕，每個按鈕代表不同的路由，而不同的路由...

Sean Liu ‧ 2021-10-02

3 Like 0 留言 5755 瀏覽

鐵人賽 Modern Web DAY 17

今晚，我想來點 Web 前端效能優化大補帖！系列第 17 篇

技術 Day17 X 初探快取＆ HTTP Caching

今天即將進入 Caching & Networking 章節的第一天，快取，是一個非常重要的技術，不論是前端還是後端，甚至是再更底層的系統開發，都ㄧ定...

莫力全 Kyle Mo ‧ 2021-10-02 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 1436 瀏覽

鐵人賽 Modern Web DAY 16

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 16 篇

技術 Day 16 — To Do List (3) 深入HTML Service -1

我們今天要來繼續深入 HTML Service ，讓大家對於利用 GAS 架網站這件事情在之後可以更為輕便簡單。我們繼續看到 Docs 的部分 (註一) ：...

鳳黃酥 ‧ 2021-10-01

0 Like 0 留言 1713 瀏覽

鐵人賽 Modern Web DAY 18

Follow me! 來一場前端技能樹之旅系列第 18 篇

技術 [Day 18 - webpack] 模組化開發好幫手 — 打包工具 webpack

為什麼要使用 webpack？在前一篇文章提到，有愈來愈多開源套件，可以幫助我們加速開發。當功能愈來愈多，將所有程式碼都寫在同一個 JS 檔案中會難以管理。...

May ‧ 2021-10-01

1 Like 0 留言 1665 瀏覽

鐵人賽 Modern Web DAY 16

今晚，我想來點 Web 前端效能優化大補帖！系列第 16 篇

技術 Day16 X Polyfill-less Bundling Script & File Compression

今天是 Build Optimizations 主題的最後一篇了，到目前為止我們已經認識了 Code Splitting, Dynamic Import 還有...

莫力全 Kyle Mo ‧ 2021-10-01 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 925 瀏覽

鐵人賽 Modern Web DAY 16

用React刻自己的投資Dashboard 系列第 16 篇

技術用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

tags: 2021鐵人賽 React 前一篇提到的導覽列的各個按鈕，點擊之後會跳到不同的頁面，每個頁面都會是不同的路徑，這個功能可以使用react-route...

Sean Liu ‧ 2021-10-01

1 Like 0 留言 1033 瀏覽

鐵人賽 Modern Web DAY 15

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 15 篇

技術 Day 15 — To Do List (1) 了解 HTML Service

昨天我們做完前置作業了，今天我們來看一下這個 HTML Service 是怎麼用！簡單來說，就是可以乘載簡單的 GET 以及 POST 請求，讓你建立簡單...

鳳黃酥 ‧ 2021-09-30

0 Like 0 留言 1293 瀏覽

鐵人賽 Modern Web DAY 17

Follow me! 來一場前端技能樹之旅系列第 17 篇

技術 [Day 17 - npm] 哆啦A夢有百寶袋，我有套件管理工具npm

前端的社群發展愈來愈蓬勃，延伸出各式各樣基於 HTML、CSS、JS 的開源套件，像是 Bootstrap、React、Vue、Styled-component...

May ‧ 2021-09-30

0 Like 0 留言 736 瀏覽

鐵人賽 Modern Web DAY 15

用React刻自己的投資Dashboard 系列第 15 篇

技術用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

有了總體經濟的圖表之後，接下來就要來製作各國股市的資訊站，筆者最常看的就是台股的資訊，其次則是美股、英股、歐股、日股、匯率、利率...等等，想做的很多，剩下15...

Sean Liu ‧ 2021-09-30

1 Like 0 留言 889 瀏覽

鐵人賽 Modern Web DAY 14

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 14 篇

技術 Day 14— To Do List (1) 專案前置

我們今天要來正式開一個新的專案啦！不同於以往我們都用 Google Form 來當作載體，這次我們要來製作 Google Apps Script 中的 Web...

鳳黃酥 ‧ 2021-09-29

0 Like 0 留言 4664 瀏覽

鐵人賽 Modern Web DAY 16

Follow me! 來一場前端技能樹之旅系列第 16 篇

技術 [Day 16 - 小試身手] 用HTML、CSS、JS打造個人網站 (3)

在上一篇：用HTML、CSS、JS打造個人網站 (2)，完成了網頁的所有內容，接下來的工作就是讓網頁能夠適應各種螢幕大小，讓使用者在每個裝置都能有最基本的使用...

May ‧ 2021-09-29

0 Like 0 留言 1397 瀏覽

鐵人賽 Modern Web DAY 14

用React刻自己的投資Dashboard 系列第 14 篇

技術用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題

tags: 2021鐵人賽 React 之前剛開始設計call api取得資料的時間點是在Card元件載入的時候才讀取，但是加上分頁功能之後，會發現一個問題，假...

Sean Liu ‧ 2021-09-29

0 Like 0 留言 3468 瀏覽

鐵人賽 Modern Web DAY 15

Follow me! 來一場前端技能樹之旅系列第 15 篇

技術 [Day 15 - 小試身手] 用HTML、CSS、JS打造個人網站 (2)

在上一篇：用HTML、CSS、JS打造個人網站 (1)，講解了開發網頁的前置作業，以及 Header 跟 Section-Primary 的區塊，接下來就讓我...

May ‧ 2021-09-28

0 Like 0 留言 1269 瀏覽

鐵人賽 Modern Web DAY 13

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 13 篇

技術 Day 13 - 物品借用紀錄系統 (3) 程式碼解說

今天主要是來補足 Day11 和 Day12 簡(ㄏㄨㄚˊ)約(ㄕㄨㄟˇ)的部分。我們會講兩個東西： Range.getValues() 會抓到什麼東西。...

鳳黃酥 ‧ 2021-09-28

0 Like 0 留言 2570 瀏覽

鐵人賽 Modern Web DAY 12

用React刻自己的投資Dashboard 系列第 12 篇

技術用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

tags: 2021鐵人賽 React 還記得這個網站有篩選圖表的功能嗎？當初畫wireframe的時候考量到未來圖表可能會越來越多，因此規劃了下拉式選單來做篩...

Sean Liu ‧ 2021-09-27

1 Like 0 留言 9610 瀏覽

鐵人賽 Modern Web DAY 14

Follow me! 來一場前端技能樹之旅系列第 14 篇

技術 [Day 14 - 小試身手] 用HTML、CSS、JS打造個人網站 (1)

所有的網站大概可以分成兩類：靜態網頁、動態網頁，靜態網頁顧名思義就是靜止的網頁，不會去太頻繁的更新內容；動態網頁則是會根據使用者的輸入而有不同的內容更新，包含的...

May ‧ 2021-09-27

0 Like 0 留言 1228 瀏覽

鐵人賽 Modern Web DAY 12

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 12 篇

技術 Day 12 - 物品借用紀錄系統 (3) 系統完成

今天我們就把整個服務完成吧！不知道大家順利地收到通知了沒？我已經順利收到囉～咦咦咦？發生什麼事！為什麼我一次收到兩封咧？回頭看一下程式碼，以及對照...

鳳黃酥 ‧ 2021-09-27

0 Like 0 留言 874 瀏覽

鐵人賽 Modern Web DAY 11

用React刻自己的投資Dashboard 系列第 11 篇

技術用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

tags: 2021鐵人賽 React 本篇要將call api的功能獨立成一個元件，在架構上會更清楚的分工不同檔案的功能，之後也有可能是其他元件會呼叫api的...

Sean Liu ‧ 2021-09-26

0 Like 0 留言 2006 瀏覽

鐵人賽 Modern Web DAY 13

Follow me! 來一場前端技能樹之旅系列第 13 篇

技術 [Day 13 - Git] Git版本控管，沒有它救不回來的專案

為什麼要做版本控管？其實版本控管就是備份的概念，相信大家都有體會過檔案誤刪、當機資料消失的經驗，養成備分的習慣可以減少很多麻煩。在開發的過程中，我們會對程式碼...

May ‧ 2021-09-26

0 Like 0 留言 1026 瀏覽

鐵人賽 Modern Web DAY 11

來自 GAS 的香氣～跟鳳黃酥一起享受 Google Apps Script 的午茶時光系列第 11 篇

技術 Day 11 - 物品借用紀錄系統 (3) 發送到期與逾期通知

我們昨天順利把借物歸還事件可以自動化上傳到 Google Calendar 上，但是如果借閱人不看 Google Calendar 怎麼辦？沒關係，我們就自動...

鳳黃酥 ‧ 2021-09-26

0 Like 0 留言 1991 瀏覽

鐵人賽 Modern Web DAY 12

Follow me! 來一場前端技能樹之旅系列第 12 篇

技術 [Day 12 - Bootstrap] Bootstrap一下，快速建立響應式網站

為什麼要使用Bootstrap？現在的網頁為了能夠適應不同裝置，會進行響應式設計；並且大多考量到使用者經驗設計(User Experience)，使用一致性的...

May ‧ 2021-09-25

技術 [Day 21 - React] 今晚我想來點，React的其他功能

技術 用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

技術 Day19 X Application Shell Architecture

技術 Day 18 — To Do List (5) 新增 To Do Event

技術 [Day 20 - React] 網頁UI組件化 — React component

技術 用React刻自己的投資Dashboard Day18 - 選單列active style功能

技術 Day18 X Service Workers Cache

技術 Day 17 — To Do List (4) 讓網頁呈現試算表資料

技術 [Day 19 - React] 現在開始用框架寫網頁 — React

技術 用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能

技術 Day17 X 初探快取 ＆ HTTP Caching

技術 Day 16 — To Do List (3) 深入HTML Service -1

技術 [Day 18 - webpack] 模組化開發好幫手 — 打包工具 webpack

技術 Day16 X Polyfill-less Bundling Script & File Compression

技術 用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

技術 Day 15 — To Do List (1) 了解 HTML Service

技術 [Day 17 - npm] 哆啦A夢有百寶袋，我有套件管理工具npm

技術 用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

技術 Day 14— To Do List (1) 專案前置

技術 [Day 16 - 小試身手] 用HTML、CSS、JS打造個人網站 (3)

技術 用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題

技術 [Day 15 - 小試身手] 用HTML、CSS、JS打造個人網站 (2)

技術 Day 13 - 物品借用紀錄系統 (3) 程式碼解說

技術 用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

技術 [Day 14 - 小試身手] 用HTML、CSS、JS打造個人網站 (1)

技術 Day 12 - 物品借用紀錄系統 (3) 系統完成

技術 用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

技術 [Day 13 - Git] Git版本控管，沒有它救不回來的專案

技術 Day 11 - 物品借用紀錄系統 (3) 發送到期與逾期通知

技術 [Day 12 - Bootstrap] Bootstrap一下，快速建立響應式網站

標記使用者

技術用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

技術用React刻自己的投資Dashboard Day18 - 選單列active style功能

技術用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能

技術 Day17 X 初探快取＆ HTTP Caching

技術用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

技術用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

技術用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題

技術用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

技術用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件