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

0 Like 0 留言 2514 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 [Day 28 - 小試身手] Todolist with React (3)

在上一章Todolist with React (2)，完成所有樣式設定後，現在就讓我們在 React 中加入 Redux，使用 React-redux 動態...

May ‧ 2021-10-11

0 Like 0 留言 2513 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 [Day 27 - 小試身手] Todolist with React (2)

在上一章Todolist with React (1)，建立了專案環境、並且拆離 UI 設定好所有 Component 後，現在就讓我們使用套件 Styled...

May ‧ 2021-10-10

0 Like 0 留言 5895 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 [Day 26 - 小試身手] Todolist with React (1)

終於差不多進入30天前端技能樹之旅的尾聲，最後就來利用系列後半部所學的 React，搭配 Redux、Styled-components 來個小試身手，實作一個...

May ‧ 2021-10-09

0 Like 0 留言 1721 瀏覽

鐵人賽 Modern Web DAY 23

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

技術用React刻自己的投資Dashboard Day23 - 非同步呼叫API，完成首頁資料串接

tags: 2021鐵人賽 React 上一篇確認過API內容之後，剩下的部份就是串接API，並將資料呈現在畫面上了，雖然描述起來是短短兩句，不過還是寫了好多的...

Sean Liu ‧ 2021-10-08

0 Like 0 留言 3469 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 [Day 25 - Modern CSS] 指定CSS作用域，模組化開發 CSS Modules

要在 React 中撰寫 CSS，為元素添加樣式，除了 Styled-components，另外還有一種方式就是 CSS Modules。之前我們提過，在寫 C...

May ‧ 2021-10-08

4 Like 0 留言 6967 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 Day23 X WebAssembly

也許你早就聽過 WebAssembly 這個詞，傳說中它可以讓 C, C++, Rust 等系統語言的程式碼在瀏覽器上執行，解決 JS 的效能已經快要逼近極限...

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

0 Like 0 留言 1596 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 Day 22- Google Apps Script 線上文件更新

咦？To-Do-List 怎麼突然結束了！？恩…主要是最近接到了不少新的任務，而我想，To Do List 這麼簡單的東西，就不用我一直做了吧？（絕對不會承...

鳳黃酥 ‧ 2021-10-07

0 Like 0 留言 2471 瀏覽

鐵人賽 Modern Web DAY 22

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

技術用React刻自己的投資Dashboard Day22 - API與前端資料需求比對

tags: 2021鐵人賽 React 一般來說在開發階段，前端與後端會討論資料需求，讓API產出的內容能夠滿足前端畫面的需求，不過這次因為是串接外部的API，...

Sean Liu ‧ 2021-10-07

0 Like 0 留言 1640 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 Day 21- To Do List (8) 利用 HTML Template 呈現資料

今天我們一起來實作用 HTML Template 來顯示 To-Do-List 的資料吧！首先我們一樣先開一個 Google Apps Script 吧！...

鳳黃酥 ‧ 2021-10-06

2 Like 2 留言 3806 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 Day22 X Web Workers

身為前端開發者，整日與 JavaScript 這門程式語言打交道，應該都知道它是一個 single-threaded 的程式語言，剛開始會覺得有點詫異，現在的...

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

0 Like 0 留言 2255 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 [Day 24 - Modern CSS] 在JS中寫CSS，神套件Styled-components

要如何在 React 中撰寫 CSS，為元素添加樣式？目前的方法有 Inline-Style、CSS Modules...，其中一個方法就是很多人使用的 Sty...

May ‧ 2021-10-07

0 Like 0 留言 2091 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 [Day 23 - Redux] React + Redux = React-redux

前情提要：在前面的文章有了Redux，狀態管理沒煩惱，學到了如何在 Redux 透過 Action 管理更新所有的 State。接下來就讓我們學習如何在 Re...

May ‧ 2021-10-06

0 Like 0 留言 4891 瀏覽

鐵人賽 Modern Web DAY 21

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

技術用React刻自己的投資Dashboard Day21 - 介紹Finmind API

tags: 2021鐵人賽 React 接下來幾篇都會串接Finmind這個開源API，本篇就先來理解一下Finmind有哪些資料可以使用。看了一下官方網站的資...

Sean Liu ‧ 2021-10-06

3 Like 1 留言 7560 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 Day21 X Upgrade Your HTTP Connection

其實很多的效能優化技巧都擁有「用了不一定會讓效能變得比較快，就算有可能也是使用者難以感知的微幅進步，甚至如果使用不當會讓網頁效能變的更差」的特性。不過對於...

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

1 Like 0 留言 1554 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day 20- To Do List (7) 了解 HTML Template

我們今天來研究另一個 HTML Service: HTML Template。其實你可以把它想成是 Server Side Render 的一種 (註一)，他...

鳳黃酥 ‧ 2021-10-05

1 Like 0 留言 1895 瀏覽

鐵人賽 Modern Web DAY 20

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

技術用React刻自己的投資Dashboard Day20 - 首頁功能切板

tags: 2021鐵人賽 React 先從mobile版型的頁面來看，可以分為幾個部份，如下圖：分為最上面Title、TaiwanStock、USStock...

Sean Liu ‧ 2021-10-05

3 Like 0 留言 6593 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day20 X CDN

CDN 這個名詞在前面的篇章應該出現過蠻多次的，一直感到困惑的朋友們不用擔心，今天終於要來好好介紹它了！什麼是 CDN ? CDN 的全名為 Conten...

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

0 Like 0 留言 1354 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Day 19 - To Do List (6) 刪除 To Do Event

很快的我們來到做刪除的部分，很快速的，我們先來看一下如果我們要把東西從試算表刪除該怎麼做：我們從上面可以知道，使用 Sheet.deletRow(rowP...

鳳黃酥 ‧ 2021-10-04

0 Like 0 留言 1263 瀏覽

鐵人賽 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 留言 2758 瀏覽

鐵人賽 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 留言 2030 瀏覽

鐵人賽 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 留言 2661 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

Sean Liu ‧ 2021-10-03

3 Like 0 留言 6840 瀏覽

鐵人賽 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 留言 2564 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

鳳黃酥 ‧ 2021-10-02

1 Like 0 留言 2074 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 [Day 22 - Redux] 有了Redux，狀態管理沒煩惱

前情提要：在前面關於 React 的幾篇文章，學會了建立 React Component，依據使用者操作在組件間處理資料。接下來就會提到如何使用 Redux，...

May ‧ 2021-10-05

0 Like 0 留言 2259 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

May ‧ 2021-10-04

0 Like 0 留言 3100 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

May ‧ 2021-10-03

0 Like 0 留言 1808 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

Sean Liu ‧ 2021-10-02

6 Like 0 留言 9964 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 Day17 X 初探快取＆ HTTP Caching

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

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

0 Like 0 留言 2628 瀏覽

鐵人賽 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

技術 [Day 28 - 小試身手] Todolist with React (3)

技術 [Day 27 - 小試身手] Todolist with React (2)

技術 [Day 26 - 小試身手] Todolist with React (1)

技術 用React刻自己的投資Dashboard Day23 - 非同步呼叫API，完成首頁資料串接

技術 [Day 25 - Modern CSS] 指定CSS作用域，模組化開發 CSS Modules

技術 Day23 X WebAssembly

技術 Day 22- Google Apps Script 線上文件更新

技術 用React刻自己的投資Dashboard Day22 - API與前端資料需求比對

技術 Day 21- To Do List (8) 利用 HTML Template 呈現資料

技術 Day22 X Web Workers

技術 [Day 24 - Modern CSS] 在JS中寫CSS，神套件Styled-components

技術 [Day 23 - Redux] React + Redux = React-redux

技術 用React刻自己的投資Dashboard Day21 - 介紹Finmind API

技術 Day21 X Upgrade Your HTTP Connection

技術 Day 20- To Do List (7) 了解 HTML Template

技術 用React刻自己的投資Dashboard Day20 - 首頁功能切板

技術 Day20 X CDN

技術 Day 19 - To Do List (6) 刪除 To Do Event

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

技術 Day19 X Application Shell Architecture

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

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

技術 Day18 X Service Workers Cache

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

技術 [Day 22 - Redux] 有了Redux，狀態管理沒煩惱

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

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

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

技術 Day17 X 初探快取 ＆ HTTP Caching

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

標記使用者

技術用React刻自己的投資Dashboard Day23 - 非同步呼叫API，完成首頁資料串接

技術用React刻自己的投資Dashboard Day22 - API與前端資料需求比對

技術用React刻自己的投資Dashboard Day21 - 介紹Finmind API

技術用React刻自己的投資Dashboard Day20 - 首頁功能切板

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

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

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

技術 Day17 X 初探快取＆ HTTP Caching