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

3 Like 0 留言 3482 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 Day27 X Stale While Revalidate Cache Policy

在 Day24 介紹 Web 前端渲染架構時，有提到 Stale While Revalidate 這個快取的應用策略，今天將更詳細介紹這個策略，並看看怎麼運...

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

1 Like 1 留言 3472 瀏覽

鐵人賽 Modern Web DAY 4

從零開始認識 Node.js 系列第 4 篇

技術 [Day 4] Node.js 的 Document (1) - 與 ES6 的友好關係

前言花了 3 天篇幅大致說完了 Node.js 外圍的事情，也該說說 Node.js 的內在。看書第一件事情我習慣先看書背、目錄，Node.js 文件目錄...

Ivan Wei ‧ 2016-12-04

1 Like 0 留言 3468 瀏覽

鐵人賽 Modern Web DAY 8

Zero to hero with React.js 系列第 8 篇

技術【Day8 React】從拆解電子名片學習 React Components #Part2

今天講解把如何模組化程式碼前提：我們目前所有的程式碼都放在 index.html 裡面，分別嵌入了 React, React-dom, babel 的 CDN...

TSAI ‧ 2017-12-14

3 Like 0 留言 3452 瀏覽

鐵人賽 Modern Web DAY 1

React + D3 的正確姿勢系列第 1 篇

技術 Day01-系列文規劃、介紹

前言大家好我是Andy，今年又回來參加鐵人賽了，希望今年也能順利地完賽XDD 這次要帶給大家的是資料視覺化的技能，使用的是最麻煩同時也最彈性的 D3.js，同...

陳奕帆 Andy Chen ‧ 2019-09-17

3 Like 0 留言 3452 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 Day13 X CSS GPU Acceleration

其實今天的主題應該算是昨天 High Performance CSS 的延伸。大家應該都有遇過網頁的動畫有點不順暢甚至卡頓的經驗吧？是不是覺得很煩人呢？就算...

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

0 Like 0 留言 3433 瀏覽

鐵人賽 Modern Web DAY 10

React + D3 的正確姿勢系列第 10 篇

技術 Day10-React環境架設(create-react-app)

前言在之前的文章都是講如何透過線上編輯器來進行 React.js 的撰寫，在今明兩天的文章會教大家如何在本地端也能撰寫 React.js ，俗話說的好：萬事起...

陳奕帆 Andy Chen ‧ 2019-09-26

0 Like 0 留言 3324 瀏覽

鐵人賽 Modern Web DAY 26

React + D3 的正確姿勢系列第 26 篇

技術 Day26-donut chart(using D3.js)

前言昨天的文章介紹了圓餅圖，今天要來介紹圓餅圖的變形版：環圈圖，其實筆者自己比較少用圓餅圖，只要是這種要計算數據比例的統計圖現在都改用環圈圖了，至於為什麼會有...

陳奕帆 Andy Chen ‧ 2019-10-12

2 Like 0 留言 3320 瀏覽

鐵人賽 Modern Web DAY 28

防禦性 CSS - 建立「防患未然」的匠人心態系列第 28 篇

技術【Day28】CSS 語法 - 隱藏網頁上的元件

情境有時候我們會需要隱藏網頁上的元件。舉幾個例子來說，例如我們為了使用者體驗的目的，我們希望在某某情境下，某些按鈕不要被使用者誤觸，或是為了畫面上排版的簡潔...

Taiming ‧ 2022-10-12 ‧團隊光明頂

2 Like 0 留言 3239 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Day05 X Code Minimize & Uglify

從今天開始終於要正式進入介紹前端效能優化各種技巧的章節了，如果到今天還願意繼續堅持看下去的讀者記得給自己一些掌聲 ? 如果對效能優化幾乎是零基礎的讀者也別擔心...

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

6 Like 2 留言 3217 瀏覽

鐵人賽 Modern Web DAY 30

JavaScript 原力覺醒 - 成為絕地武士之路系列第 30 篇

技術 JS 原力覺醒 Day30 - 我是怎麼活過這三十天的？

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-15 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

2 Like 0 留言 3172 瀏覽

鐵人賽 Modern Web DAY 11

JavaScript 原力覺醒 - 成為絕地武士之路系列第 11 篇

技術 JS 原力覺醒 Day11 - Falsy / Truthy

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-09-26 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

3 Like 0 留言 3097 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 Day014 X Code Splitting & Dynamic Import

Code Splitting 是一個非常重要的觀念，現代網頁程式漸漸走向使用框架以模組化方式來開發，通常會透過如 webpack 等 bundler 來 ug...

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

2 Like 0 留言 3051 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 43 篇

技術 Day 43. 通用武裝・泛型註記 X 推論未來 - TypeScript Generic Declaration & Annotation

閱讀本篇文章前，仔細想想看泛用型別的意義是什麼？泛用型別大致上有哪些種類或形式？如果還不清楚可以看一下前一篇文章喔～以下就直接正文開始～泛用...

Maxwell Alexius ‧ 2019-10-23

3 Like 0 留言 3037 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 Day28 X Runtime Performance Debugging

提到 Web 前端的效能優化，有許多的技巧是聚焦在如何減少頁面的「載入時間 Loading Time」，例如 Code Splitting 透過減少需要載入的...

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

3 Like 2 留言 3020 瀏覽

鐵人賽 Modern Web DAY 8

JavaScript 原力覺醒 - 成為絕地武士之路系列第 8 篇

技術 JS 原力覺醒 Day08 - Closures

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-09-23 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

3 Like 0 留言 3019 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 Day24 X Web Rendering Architectures

今天開始正式進入系列文的最後一個章節 - Framework, Architecture and Memory Management，探索前端架構與底層實作對...

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

2 Like 0 留言 2989 瀏覽

鐵人賽 Modern Web DAY 14

JavaScript 原力覺醒 - 成為絕地武士之路系列第 14 篇

技術 JS 原力覺醒 Day14 - 一生懸命的約定：Promise

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-09-29 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 1 留言 2988 瀏覽

鐵人賽 Modern Web DAY 7

關於 UI 元件你所該知道的事系列第 7 篇

技術 Day 07 - Design System — 前端工程師也該知道的那些事

在前一天我們知道了 Design System 為什麼出現、它試圖解決的問題和一些使用上的 Mindset 後，今天要來介紹 Design System 到底...

parkerhiphop027 ‧ 2021-09-22

1 Like 1 留言 2980 瀏覽

鐵人賽 Modern Web DAY 5

JavaScript 原力覺醒 - 成為絕地武士之路系列第 5 篇

技術 JS 原力覺醒 Day05 - Scope Chain

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-09-20 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

0 Like 0 留言 2944 瀏覽

鐵人賽 Modern Web DAY 22

React + D3 的正確姿勢系列第 22 篇

技術 Day22-bar chart(using D3.js)

前言從今天開始的文章就正式進入實作的過程啦~ 這次的系列文預計會帶給大家 5 種不一樣的圖表，視覺化是個非常深奧的世界，筆者我也只會一點皮毛而已XD 所以這次...

陳奕帆 Andy Chen ‧ 2019-10-08

1 Like 0 留言 2942 瀏覽

鐵人賽 Modern Web DAY 3

React + D3 的正確姿勢系列第 3 篇

技術 Day03-virtual DOM

前言今天要來介紹一項非常重要的觀念，只要講到 React.js 就一定會提到 virtual DOM 這個東西，究竟為什麼需要 virtual DOM 呢？今...

陳奕帆 Andy Chen ‧ 2019-09-19

1 Like 1 留言 2933 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day12 X Writing High Performance CSS

CSS 是前端開發者不可不學的技術之一，沒有了它就好像你做出來的網頁都沒有穿衣服一樣，有點羞於見人呀！? 但你有想過 CSS 如果亂寫也可能會影響到網頁的效能...

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

1 Like 0 留言 2881 瀏覽

鐵人賽 Modern Web DAY 7

React + D3 的正確姿勢系列第 7 篇

技術 Day07-React event handler

前言在講完 React.js 中的基本架構後，今天要來講講要如何在 JSX 中加入 event handler ，既然 React.js 可以說是將 HTML...

陳奕帆 Andy Chen ‧ 2019-09-23

1 Like 0 留言 2856 瀏覽

鐵人賽 Modern Web DAY 16

JavaScript 原力覺醒 - 成為絕地武士之路系列第 16 篇

技術 JS 原力覺醒 Day16 - Async / Await：Promise 語法糖

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-01 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

4 Like 1 留言 2834 瀏覽

鐵人賽 Modern Web DAY 16

防禦性 CSS - 建立「防患未然」的匠人心態系列第 16 篇

技術【Day16】滾動條 - 避免滾動穿透

情境有時候我們的畫面會需要用到如下圖的 Modal 彈窗：這樣的 Modal 彈窗，他的內容有可能是針對某個地方的額外說明，因此這個說明也有可能會需要詳細...

Taiming ‧ 2022-09-30 ‧團隊光明頂

3 Like 0 留言 2813 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 Day09 X Resource Hint & Non-Blocking Script Tag

經過昨天的內容，讀者們應該對於網頁的渲染流程有大致的理解了。我們再小小複習一下，大致上網頁的渲染流程為：讀取 HTML 後生成 DOM Tree 讀取...

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

2 Like 0 留言 2749 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 Day25 X ESR: Rendering On The Edge

基本上 CDN 是現在的 Web 應用不可或缺的技術，當對被 CDN 加速過的域名發出請求時，CDN 會自動將 request 導到地理位置離使用者較近或是流...

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

1 Like 1 留言 2712 瀏覽

鐵人賽 Modern Web DAY 27

React + D3 的正確姿勢系列第 27 篇

技術 Day27-bubble chart(using D3.js)

前言今天要來介紹本系列文最後一個圖表了，由於鐵人賽時間真的很有限沒辦法介紹全部的圖表，但筆者已經盡量把最常用的幾種圖表都介紹給大家了，相信大家學會這幾種圖表一...

陳奕帆 Andy Chen ‧ 2019-10-13

1 Like 0 留言 2684 瀏覽

鐵人賽 Modern Web DAY 19

JavaScript 原力覺醒 - 成為絕地武士之路系列第 19 篇

技術 JS 原力覺醒 Day19 - 一級函式與高階函式

今天要提到的是讓 JS 很適合用來撰寫 Functional Programming 的兩個特性的名詞解釋：「一級函式」與「高階函式」，如果你寫 JS 一段時...

Spark ‧ 2019-10-04 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 0 留言 2599 瀏覽

鐵人賽 Modern Web DAY 22

防禦性 CSS - 建立「防患未然」的匠人心態系列第 22 篇

技術【Day22】Grid - 自動填滿效果

情境 CSS Grid 是一個格線佈局屬性，跟 Flexbox 的使用非常相似，是由外容器和內元件來組成整個結構。以下面結構為例： <div class...

Taiming ‧ 2022-10-06 ‧團隊光明頂

技術 Day27 X Stale While Revalidate Cache Policy

技術 [Day 4] Node.js 的 Document (1) - 與 ES6 的友好關係

技術 【Day8 React】從拆解電子名片學習 React Components #Part2

技術 Day01-系列文規劃、介紹

技術 Day13 X CSS GPU Acceleration

技術 Day10-React環境架設(create-react-app)

技術 Day26-donut chart(using D3.js)

技術 【Day28】CSS 語法 - 隱藏網頁上的元件

技術 Day05 X Code Minimize & Uglify

技術 JS 原力覺醒 Day30 - 我是怎麼活過這三十天的？

技術 JS 原力覺醒 Day11 - Falsy / Truthy

技術 Day014 X Code Splitting & Dynamic Import

技術 Day 43. 通用武裝・泛型註記 X 推論未來 - TypeScript Generic Declaration & Annotation

技術 Day28 X Runtime Performance Debugging

技術 JS 原力覺醒 Day08 - Closures

技術 Day24 X Web Rendering Architectures

技術 JS 原力覺醒 Day14 - 一生懸命的約定：Promise

技術 Day 07 - Design System — 前端工程師也該知道的那些事

技術 JS 原力覺醒 Day05 - Scope Chain

技術 Day22-bar chart(using D3.js)

技術 Day03-virtual DOM

技術 Day12 X Writing High Performance CSS

技術 Day07-React event handler

技術 JS 原力覺醒 Day16 - Async / Await：Promise 語法糖

技術 【Day16】滾動條 - 避免滾動穿透

技術 Day09 X Resource Hint & Non-Blocking Script Tag

技術 Day25 X ESR: Rendering On The Edge

技術 Day27-bubble chart(using D3.js)

技術 JS 原力覺醒 Day19 - 一級函式與高階函式

技術 【Day22】Grid - 自動填滿效果

標記使用者

技術【Day8 React】從拆解電子名片學習 React Components #Part2

技術【Day28】CSS 語法 - 隱藏網頁上的元件

技術【Day16】滾動條 - 避免滾動穿透

技術【Day22】Grid - 自動填滿效果