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

0 Like 0 留言 1378 瀏覽

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

1 Like 0 留言 1371 瀏覽

鐵人賽 Modern Web DAY 6

後端的鉗形攻勢系列第 6 篇

技術 [Day. 05] PHP，Please Help me Program.

Hi~大家，周末過的怎麼樣呢？距離禮拜一剩不到幾小時了，那就和筆者一起用短短的幾分鐘學習PHP的基礎八。在開始新進度之前，先來回憶一下我們前幾天學的東西吧！...

Dullszy ‧ 2020-09-20

0 Like 0 留言 1350 瀏覽

鐵人賽 Modern Web DAY 25

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

技術用React刻自己的投資Dashboard Day25 - 製作漢堡選單

tags: 2021鐵人賽 React 安裝styled-components套件在專案資料夾內一行安裝就完成了。 npm install --save st...

Sean Liu ‧ 2021-10-10

0 Like 0 留言 1343 瀏覽

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

鐵人賽 Modern Web DAY 8

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

技術 [Day 08 - CSS Architecture] CSS設計模式，擺脫義大利麵代碼

當別人說你的程式是義大利麵代碼 (Spaghetti code)，聽起來很好吃，應該是稱讚的意思吧！千萬不要誤會，那是在說你的程式碼雜亂無章、難以理解。在前面...

May ‧ 2021-09-21

1 Like 0 留言 1319 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 27 篇

技術 [Day27] 了解Media API和Geolocation API(Part3)

終於要開始實作「獲取用戶地理位置」的功能了要獲取地理位置必須使用「Geolocation API」這個Web API。先來看一下這個API的瀏覽器支援程度：整...

rehome ‧ 2019-10-12

2 Like 0 留言 1302 瀏覽

鐵人賽自我挑戰組 DAY 20

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 20 篇

技術在 media query 內使用 float:none 清除浮動效果

float的使用，我們常會用在 desktop 的排版上，不管是要將區塊並排顯示，或是要將選單橫列，常常都會使用到{float:left;}。今天我們要提到的是...

Alec ‧ 2019-09-28

0 Like 0 留言 1302 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 [Day 05 - CSS] 玩轉CSS樣式，進入網頁美麗新世界

在上一篇學到了 CSS 的基本語法、使用選擇器以及檔案的套用方法。接著就讓我們來學習如何運用樣式屬性！首先來簡單了解一下 CSS 是如何去進行網頁的排版和調整元...

May ‧ 2021-09-18

0 Like 0 留言 1296 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

May ‧ 2021-09-30

1 Like 0 留言 1292 瀏覽

鐵人賽 Modern Web DAY 16

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 16 篇

技術 [Day16] 使用IndexedDB暫存Dynamic Data(Part3)

昨天已經成功地將firebase裡的dynamic data儲存至indexedDB了，接下來因為我目前使用的cache strategies是「cache t...

rehome ‧ 2019-09-30

0 Like 0 留言 1289 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

Sean Liu ‧ 2021-09-21

1 Like 0 留言 1281 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

鳳黃酥 ‧ 2021-10-03

2 Like 1 留言 1276 瀏覽

鐵人賽自我挑戰組 DAY 21

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 21 篇

技術介紹了好多天的 RWD，今天來排一個完整一點的版型

我們花了好多天的時間來介紹 RWD 的設計概念，但是每一個概念都比較片斷與零散一點，今天我們來把所有的概念整合一下，變成一個完整的 RWD 網頁吧，來看一下我們...

Alec ‧ 2019-09-29

0 Like 0 留言 1271 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

鳳黃酥 ‧ 2021-09-28

1 Like 0 留言 1269 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 26 篇

技術 [Day26] 了解Media API和Geolocation API(Part2)

昨天已經將video stream添加到video元素中，今天要來繼續實作當用戶按下「拍照鈕」後，會將最新的「video stream snapshot」傳送到...

rehome ‧ 2019-10-10

1 Like 0 留言 1244 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

May ‧ 2021-10-05

2 Like 0 留言 1238 瀏覽

鐵人賽自我挑戰組 DAY 29

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 29 篇

技術將之前的 RWD 版型範例全面改寫成 Sass 的 SCSS 碼吧

之前我有一篇文章在說明 RWD 版型在瀏覽器縮放時進行的變化，那時候的 CSS 是直接用原生 CSS 撰寫的，這幾天我們花了一點時間說明了 CSS 預處理器 S...

Alec ‧ 2019-10-07

0 Like 0 留言 1230 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

鳳黃酥 ‧ 2021-09-27

3 Like 1 留言 1224 瀏覽

鐵人賽自我挑戰組 DAY 28

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 28 篇

技術什麼東西是 Sass Maps？

Sass Map 是 Sass 的地圖嗎？當然不是囉，但既然它取名為 Maps，姑且我們可以暫時以地圖的按圖索驥的精神來想像它。過往，我們提到了 Sass 的...

Alec ‧ 2019-10-06

0 Like 0 留言 1223 瀏覽

鐵人賽 Modern Web DAY 9

JavaScript初心者ノ研究日記。系列第 9 篇

技術九日目：JavaScript　switchノ章

OHa (U 'ᴗ' U)✧ 我是 SONYKO今天要講控制判斷用的switch。　說到switch ，因為一直坐著寫code感覺不太好，所以我買了健身環。想聽...

RIN ‧ 2020-09-22

1 Like 0 留言 1222 瀏覽

鐵人賽 Modern Web DAY 20

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 20 篇

技術 [Day20] 了解PWA中的背景同步(Part2)

從昨天的流程圖可以發現，我們還必須將用戶要發佈的貼文資訊儲存到indexedDB中才行R。那我就接續昨天在feed.js中增加的code： if('servic...

rehome ‧ 2019-10-04

1 Like 0 留言 1205 瀏覽

鐵人賽 Modern Web DAY 18

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 18 篇

技術 [Day18] PWA中不可或缺的響應式網頁設計(Part2)

繼續昨天的響應式網頁設計(RWD)，今天我要來將首頁中最大的那張圖片改成responsive。當我用電腦瀏覽頁面時，圖片旁邊會有空白的地方，但是我希望圖片的大...

rehome ‧ 2019-10-02

0 Like 0 留言 1196 瀏覽

鐵人賽 Modern Web DAY 27

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

技術用React刻自己的投資Dashboard Day27 - 台股技術面刻板

tags: 2021鐵人賽 React 一般來說刻板前應該會需要畫個wireframe會比較清楚一些，不過時間有限，就在紙上畫一畫就先開始寫code吧，先達成功...

Sean Liu ‧ 2021-10-12

0 Like 0 留言 1195 瀏覽

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

鐵人賽 Modern Web DAY 8

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

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

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

鳳黃酥 ‧ 2021-09-23

0 Like 0 留言 1173 瀏覽

鐵人賽 Modern Web DAY 1

前端新框架學習挑戰:solidjs 逼近原生的效能體驗統御前端框架極限系列第 3 篇

技術 Day03:了解 tsx/jsx 以及剖析 solidjs

小前言在 Day02 我們了解了專案結構，從 Day03 開始我們針對 src 內的資料夾做處理和觀看。如果我們是用 pnpx degit solidjs...

MichaelHo ‧ 2022-09-18

0 Like 0 留言 1173 瀏覽

鐵人賽 Modern Web DAY 22

後端的鉗形攻勢系列第 22 篇

技術 [Day. 21] Codeigniter 註冊/登入實作(2)

昨天，我們刻好了home頁面能引導使用者到登入或註冊也簡單做了個註冊的頁面(昨天打錯成login，已作修正)。其實登入頁面也差不多。login.php的內容：...

Dullszy ‧ 2020-10-06

0 Like 1 留言 1172 瀏覽

鐵人賽 Modern Web DAY 21

用不到 30 天學會基本 TypeScript 系列第 21 篇

技術泛型（Generics）

泛型在 TypeScript 裡，是很重要的一個環節，幾乎都會看到它的身影。在前面的文章範例裡，應該或多或少都有使用到泛型，那泛型究竟是什麼？為什麼這麼重要呢？...

威爾豬 ‧ 2023-09-21

0 Like 0 留言 1148 瀏覽

鐵人賽 Modern Web DAY 25

後端的鉗形攻勢系列第 25 篇

技術 [Day. 24] Codeigniter 登入了，之後呢？

如題，登入了，那之後呢？我們做完了註冊/登入，對資料庫的操作是新增、查詢。還記得前幾天的資料庫操作嗎？除了新增、查詢之外，還有刪除，以及之前沒有提到的更新。...

Dullszy ‧ 2020-10-09

0 Like 0 留言 1140 瀏覽

鐵人賽 Modern Web DAY 4

後端的鉗形攻勢系列第 4 篇

技術 [Day. 03] PHP，People who Hate to Program.

嗨大家，禮拜五結束準備迎接美好的假日了嗎？今天來教大家基礎的php！認識php PHP，是一隻大象(elePHPant)開開玩笑XDD這只是PHP的吉祥物&...

Dullszy ‧ 2020-09-18

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

技術 [Day. 05] PHP，Please Help me Program.

技術 用React刻自己的投資Dashboard Day25 - 製作漢堡選單

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

技術 [Day 08 - CSS Architecture] CSS設計模式，擺脫義大利麵代碼

技術 [Day27] 了解Media API和Geolocation API(Part3)

技術 在 media query 內使用 float:none 清除浮動效果

技術 [Day 05 - CSS] 玩轉CSS樣式，進入網頁美麗新世界

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

技術 [Day16] 使用IndexedDB暫存Dynamic Data(Part3)

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

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

技術 介紹了好多天的 RWD，今天來排一個完整一點的版型

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

技術 [Day26] 了解Media API和Geolocation API(Part2)

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

技術 將之前的 RWD 版型範例全面改寫成 Sass 的 SCSS 碼吧

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

技術 什麼東西是 Sass Maps？

技術 九日目：JavaScript switchノ章

技術 [Day20] 了解PWA中的背景同步(Part2)

技術 [Day18] PWA中不可或缺的響應式網頁設計(Part2)

技術 用React刻自己的投資Dashboard Day27 - 台股技術面刻板

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

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

技術 Day03:了解 tsx/jsx 以及剖析 solidjs

技術 [Day. 21] Codeigniter 註冊/登入實作(2)

技術 泛型（Generics）

技術 [Day. 24] Codeigniter 登入了，之後呢？

技術 [Day. 03] PHP，People who Hate to Program.

標記使用者

技術用React刻自己的投資Dashboard Day25 - 製作漢堡選單

技術在 media query 內使用 float:none 清除浮動效果

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

技術介紹了好多天的 RWD，今天來排一個完整一點的版型

技術將之前的 RWD 版型範例全面改寫成 Sass 的 SCSS 碼吧

技術什麼東西是 Sass Maps？

技術九日目：JavaScript　switchノ章

技術用React刻自己的投資Dashboard Day27 - 台股技術面刻板

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

技術泛型（Generics）