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

0 Like 0 留言 2115 瀏覽

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

鐵人賽 Modern Web DAY 16

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

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

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

May ‧ 2021-09-29

0 Like 0 留言 4925 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

May ‧ 2021-09-28

1 Like 0 留言 13907 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

May ‧ 2021-09-27

0 Like 0 留言 3188 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

May ‧ 2021-09-25

0 Like 1 留言 3488 瀏覽

鐵人賽 Modern Web DAY 10

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

技術用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

tags: 2021鐵人賽 React 在Day9說明了useEffect的用法，不過其實當Card.js渲染時，會發現console有錯誤訊息如下： src...

Sean Liu ‧ 2021-09-25

0 Like 0 留言 1494 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 Day 10- 物品借用紀錄系統 (2) 設定 Calendar

昨天我們完成了基礎建設，但是有個地方忘記講到，我現在趕快補充一下！我們昨天設定歸還日期時，一定有人會問：這樣他如果在當天的 23:59 分歸還不就也可以嗎...

鳳黃酥 ‧ 2021-09-25

0 Like 0 留言 4035 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 Day 9— 物品借用紀錄系統 (1) 基礎建構

今天我們要來製作新的專題：物品借用紀錄微服務！在學校，尤其是行政處室，最常出現的狀況應該就是「借物」這件事情。不過我想應該各種單位應該都是啦～畢竟資源有限嘛...

鳳黃酥 ‧ 2021-09-24

0 Like 0 留言 1470 瀏覽

鐵人賽 Modern Web DAY 9

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

技術用React刻自己的投資Dashboard Day9 - useEffect hook

tags: 2021鐵人賽 React 既上一篇介紹完useState hook後，本篇就來介紹Day6也有用到的useEffect hook，在React官網...

Sean Liu ‧ 2021-09-24

0 Like 0 留言 1561 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 Day 8 — 自動化回信機(5) 優化回信機

咦？我們都寫完了，為什麼還不進入下一個專題呢？嘖嘖，這你就不懂了！身為一個工程師，能動，只是交件標準。但是你後續如果還要維護，那麼你寫的這份爛 code 會在...

鳳黃酥 ‧ 2021-09-23

0 Like 0 留言 1573 瀏覽

鐵人賽 Modern Web DAY 8

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

技術用React刻自己的投資Dashboard Day8 - useState hook

tags: 2021鐵人賽 React 在Card元件中有使用到useState，是React中一個蠻重要的hook，是一個非常強大的功能，看起來跟用起來都非常...

Sean Liu ‧ 2021-09-23

0 Like 0 留言 4110 瀏覽

鐵人賽 Modern Web DAY 7

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

技術用React刻自己的投資Dashboard Day7 - CORS與Proxy Server

tags: 2021鐵人賽 React 上一篇在串接API的時候有遇到一個前端蠻常見的問題，跨來源資源共用(CORS)被阻擋，錯誤代碼如下：打開瀏覽器的con...

Sean Liu ‧ 2021-09-22

0 Like 0 留言 2207 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day 7— 自動化回信機(4) 勾選後寄出通知信

我們已經順利的將 onEdit(e) 以及 MailApp.sendMail(message) 學完了，那麼下一步當然就是把它結合起來囉！結合的概念非常簡單，...

鳳黃酥 ‧ 2021-09-22

5 Like 1 留言 2282 瀏覽

技術什麼是 HTTP ?

該文章同步發佈於我的部落格也歡迎關注我的 Facebook 以及 Instagram 接收軟體相關的資訊！前言有天在網路上看到一張很有趣的圖片，是關於瀏...

Robert Chang ‧ 2022-02-25

0 Like 0 留言 1776 瀏覽

鐵人賽 Modern Web DAY 6

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

技術用React刻自己的投資Dashboard Day6 - 建立圖表區元件，串接API取得數據

tags: 2021鐵人賽 React 上一篇使用靜態的資料，將多張數據資料表畫成線圖呈現在網頁上，因為這個資料來源是JSON檔，所以是相對難更新的，因此本篇要...

Sean Liu ‧ 2021-09-21

0 Like 0 留言 2645 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Day 6— 自動化回信機(3) 寄出信件功能

昨天我們終於把取得試算表內資訊的任務搞定了！接下來就是打勾之後，我們把信件寄出這個任務了！首先，按照慣例我們來看一下 Docs 的部分，了解一下怎麼把信寄出：...

鳳黃酥 ‧ 2021-09-21

1 Like 1 留言 5428 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Day 5— 自動化回信機(2) 讀取試算表內容

昨天我們把試算表的前置作業完成，今天我們來看看將別人填表單後送到試算表中的內容怎麼被讀取。首先先來看看昨天的問題： onEdit() 能在 Google 表單...

鳳黃酥 ‧ 2021-09-20

0 Like 0 留言 2208 瀏覽

鐵人賽 Modern Web DAY 5

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

技術用React刻自己的投資Dashboard Day5 - 多張圖表渲染(Rendering lists)

tags: 2021鐵人賽 React 上一篇只畫了一張圖表，投資怎麼可能只需要看一張圖呢？這邊就再加上兩張圖來看看吧! 更改資料放置位置專案架構圖如下這...

Sean Liu ‧ 2021-09-20

0 Like 0 留言 3215 瀏覽

鐵人賽 Modern Web DAY 4

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

技術用React刻自己的投資Dashboard Day4 - highcharts製作線圖

tags: 2021鐵人賽 React Javascript繪圖套件在搜尋chart library的時候，發現JS可以用的library很多，包含 D3.j...

Sean Liu ‧ 2021-09-19

0 Like 0 留言 2021 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 Day 4— 自動化回信機(1) 前置作業

今天開始就要來利用專題了解 GAS 的各項功能囉～說到要能優雅、或是狼狽的…總之要能夠享受下午茶，不管你的狀態為何，你都必須要有「時間」。而系統自動化，也就...

鳳黃酥 ‧ 2021-09-19

0 Like 0 留言 2959 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Day 3 — 拆解 GAS 的執行

昨天我們寫了第一個 GAS 程式： Hello World ，今天我們來拆解一下我們到底寫了什麼東西。昨天我們直接開始寫程式，還沒有機會好好認識一下 GAS...

鳳黃酥 ‧ 2021-09-18

1 Like 0 留言 2356 瀏覽

鐵人賽 Modern Web DAY 3

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

技術用React刻自己的投資Dashboard Day3 - React專案初始架構

tags: 2021鐵人賽 React 使用 Creat react app 對於React的初學者來說，create react app是最好的朋友，可以快速...

Sean Liu ‧ 2021-09-18

0 Like 0 留言 2258 瀏覽

鐵人賽 Modern Web DAY 2

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

技術用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

tags: 2021鐵人賽 React 投資Dashboard內容設計要實際動手製作wireframe之前，先來規劃一下圖表的內容有什麼，一般來說，投資相關的...

Sean Liu ‧ 2021-09-17

0 Like 1 留言 4321 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 Day 2— 你的第一次聞GAS

今天來直接上手開始我們的 Google Apps Script 之旅啦！我們在使用 Google Apps Script 之前，一定要先了解一件事情： Goo...

鳳黃酥 ‧ 2021-09-17

1 Like 1 留言 2719 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 Day 1 — GAS 能聞嗎？

引言大家好，我是 CXPhoenix ，你可以叫我 Phoenix，或是鳳黃酥，平時都是在學校服務廣大莘(ㄧㄠ)莘(ㄇㄛˊ)學(ㄍㄨㄟˇ)子(ㄍㄨㄞˋ)了解資...

鳳黃酥 ‧ 2021-09-16

0 Like 0 留言 3105 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

May ‧ 2021-09-26

1 Like 1 留言 2762 瀏覽

鐵人賽 Modern Web DAY 1

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

技術用React刻自己的投資Dashboard Day1 - 前言

tags: 2021鐵人賽 React 系列文想法來源因為筆者本身在金融業工作，日常生活中時常關注一些投資相關的數據，例如：總體經濟數據、個股財務報告、加密貨...

Sean Liu ‧ 2021-09-16

0 Like 0 留言 4893 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 [Day 11 - JS] 互動吧網頁 — Javascipt的DOM 操作 / 事件

在前一篇，我們介紹完 Javascript 的語法和基本功能，包括宣告變數、條件陳述式、函式、物件陣列 ... 等等，接下來就來了解如何透過 Javascipt...

May ‧ 2021-09-24

0 Like 0 留言 2758 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 [Day 10 - JS] 初探 Javascript 基本功能 — 函式、迴圈 / 陣列、物件

在前一篇，我們提到了一些 Javascript 的語法和基本功能，包括宣告變數、資料型別、條件陳述式，接下來就繼續來了解迴圈、函式、物件、陣列的觀念和用法。流...

May ‧ 2021-09-23

0 Like 0 留言 4013 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 [Day 09 - JS] 網頁第三大核心技術 — Javascript

What is Javascript？JavaScript （簡稱 JS）是一種直譯式(Interpreter) 程式語言，程式碼會由上到下立即執行，它與HT...

May ‧ 2021-09-22

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

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

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

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

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

技術 用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

技術 Day 10- 物品借用紀錄系統 (2) 設定 Calendar

技術 Day 9— 物品借用紀錄系統 (1) 基礎建構

技術 用React刻自己的投資Dashboard Day9 - useEffect hook

技術 Day 8 — 自動化回信機(5) 優化回信機

技術 用React刻自己的投資Dashboard Day8 - useState hook

技術 用React刻自己的投資Dashboard Day7 - CORS與Proxy Server

技術 Day 7— 自動化回信機(4) 勾選後寄出通知信

技術 什麼是 HTTP ?

技術 用React刻自己的投資Dashboard Day6 - 建立圖表區元件，串接API取得數據

技術 Day 6— 自動化回信機(3) 寄出信件功能

技術 Day 5— 自動化回信機(2) 讀取試算表內容

技術 用React刻自己的投資Dashboard Day5 - 多張圖表渲染(Rendering lists)

技術 用React刻自己的投資Dashboard Day4 - highcharts製作線圖

技術 Day 4— 自動化回信機(1) 前置作業

技術 Day 3 — 拆解 GAS 的執行

技術 用React刻自己的投資Dashboard Day3 - React專案初始架構

技術 用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

技術 Day 2— 你的第一次聞GAS

技術 Day 1 — GAS 能聞嗎？

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

技術 用React刻自己的投資Dashboard Day1 - 前言

技術 [Day 11 - JS] 互動吧網頁 — Javascipt的DOM 操作 / 事件

技術 [Day 10 - JS] 初探 Javascript 基本功能 — 函式、迴圈 / 陣列、物件

技術 [Day 09 - JS] 網頁第三大核心技術 — Javascript

標記使用者

技術用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

技術用React刻自己的投資Dashboard Day9 - useEffect hook

技術用React刻自己的投資Dashboard Day8 - useState hook

技術用React刻自己的投資Dashboard Day7 - CORS與Proxy Server

技術什麼是 HTTP ?

技術用React刻自己的投資Dashboard Day6 - 建立圖表區元件，串接API取得數據

技術用React刻自己的投資Dashboard Day5 - 多張圖表渲染(Rendering lists)

技術用React刻自己的投資Dashboard Day4 - highcharts製作線圖

技術用React刻自己的投資Dashboard Day3 - React專案初始架構

技術用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

技術用React刻自己的投資Dashboard Day1 - 前言