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

1 Like 0 留言 5985 瀏覽

鐵人賽 Modern Web

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

技術 Day 44. 通用武裝・介面與類別 X 泛型註記機制 - TypeScript Generic Class & Interface

閱讀本篇文章前，仔細想想看泛用型別化名的如何進行宣告？泛用化名註記在變數時的注意事項為何？泛用函式的特點為何？如果還不清楚可以看一下前一篇文章喔...

Maxwell Alexius ‧ 2019-10-25

3 Like 0 留言 5971 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 Day15 X Tree Shaking

在昨天我們學會了 code splitting 與 dynamic import 的技巧，讓程式在打包時可以形成好幾個 bundle chunks，並在真的需...

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

3 Like 0 留言 5965 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day20 X CDN

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

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

0 Like 0 留言 5934 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 Day24-line chart(using D3.js)

前言在講完長條圖之後接下來要介紹的是折線圖，折線圖也是視覺化中非常重要且基礎的一種圖表，廢話不多說馬上開始今天的文章吧！折線圖折線圖是用直線段將各數據點連...

陳奕帆 Andy Chen ‧ 2019-10-10

0 Like 0 留言 5911 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day12-D3基本介紹(作用、svg)

前言從今天開始到結束的文章沒意外都會講 D3.js 了，前端能做資料視覺化的套件非常多，只是筆者覺得在用其他比較方便的套件之前應該要先了解整個圖表繪製過程，而...

陳奕帆 Andy Chen ‧ 2019-09-28

3 Like 0 留言 5886 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 Day08 X 瀏覽器架構演進史 & 渲染機制

「在未來，瀏覽器會變得越來越強，以後我們可以在瀏覽器做越來越多事。」身為常與瀏覽器共舞的 Web 工程師，尤其是 Frontend Engineer，如...

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

2 Like 0 留言 5879 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 Day13-D3基本介紹(scale、range)

前言今天要來介紹 D3.js 中第一個重要觀念： scale 以及 range ，在 D3.js 中的每個圖表都必須要設定 scale 以及 range ，今...

陳奕帆 Andy Chen ‧ 2019-09-29

2 Like 0 留言 5877 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 Day29 X 面對高流量，前端可以做些什麼？

在現今的 Web 應用中，要建構一個穩定的大型系統，能夠處理 High Concurrency 的流量是一個不可或缺的條件，尤其是在服務的熱門時段，例如優惠活...

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

1 Like 0 留言 5820 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 Day17-D3基本介紹(select、append、attr)

前言從今天開始的文章就正式進入 D3 的圖表繪製設定了，光最基本的輸入輸出區域就花了不少篇幅說明 (其實是為了拖台錢讓鐵人賽更容易完賽XD) ，總之接下來的文...

陳奕帆 Andy Chen ‧ 2019-10-03

1 Like 0 留言 5768 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 Day21-D3基本介紹(transform)

前言今天的內容會比較輕鬆一些，前幾天的文章內容可能有點太多而且不太好消化，所以今天筆者就打算講一點輕鬆的內容，但這個內容也是非常重要的，想要把一張圖表繪製好這...

陳奕帆 Andy Chen ‧ 2019-10-07

0 Like 0 留言 5764 瀏覽

鐵人賽 Modern Web DAY 19

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

技術【Day19 React】React router 在 Single Page Application(SPA) 的應用

做 SPA 囉~~ 唉不是！此 SPA 非彼 SPA。。。。今天要學習 React router，並透過 Single Page Application(SP...

TSAI ‧ 2017-12-25

5 Like 4 留言 5748 瀏覽

鐵人賽 Modern Web DAY 1

Angular 深入淺出三十天：表單與測試系列第 1 篇

技術 Angular 深入淺出三十天：表單與測試 Day01 - 前言

何謂表單？維基百科是這樣說的：表單是一種帶有空格可用於書寫以及能選擇和勾選相似內容的文件。表單可用於填寫聲明、請求、命令、支票、稅單。網頁...

Leo ‧ 2021-09-16 ‧團隊請支援 Coding

0 Like 0 留言 5742 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 Day14-D3基本介紹(domain、endpoint)

前言昨天講了跟輸出區域有關的 scale 以及 range ，今天要來談一下輸入區域的 domain 了，這裡筆者會多提一個 endpoint ，其實這個 e...

陳奕帆 Andy Chen ‧ 2019-09-30

2 Like 0 留言 5710 瀏覽

鐵人賽 Modern Web DAY 4

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

技術【Day4 React】終於跟 World 說 Hello World!

簡易起手式，我使用 CDN 引入 React 來理解 React 的運作原理我們需要的 CDN 有三個：最基本的 React CDN React 在 0....

TSAI ‧ 2017-12-10

4 Like 0 留言 5702 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 Day04 X Core Web Vital & RAIL Model

在昨天介紹網頁檢測工具時，我們看到它提供了一些看起來十分專業的 Metrics，不過光看文字還真的猜不出它們代表的是什麼意思 ? 今天第一個段落會介紹三個評...

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

1 Like 0 留言 5621 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 JS 原力覺醒 Day29 - Set / Map

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

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

0 Like 0 留言 5611 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 Day02-React.js基本介紹(JSX)

什麼是 React.js 在開始正式進入今天文章的教學內容之前，先帶大家簡單了解一下什麼是 React.js 。一進到 React.js 的官網便可以看到這段...

陳奕帆 Andy Chen ‧ 2019-09-18

3 Like 0 留言 5592 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 Day24 X Web Rendering Architectures

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

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

2 Like 4 留言 5513 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 Day 15. 機動藍圖・功能多樣性 X 多樣性介面 - More on TypeScript Interface

閱讀本篇文章前，仔細想想看到目前為止對於 TypeScript Interface 介面的理解到什麼程度呢？你認為 TypeScript 和第三方套件...

Maxwell Alexius ‧ 2019-09-25

1 Like 0 留言 5499 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 Day15-D3基本介紹(time format)

前言今天要來介紹一個蠻重要的技巧，一般來說 JS 用來處理時間的套件相信大家首選都是 Moment.js ，當然筆者也是一樣，不過今天筆者並沒有要介紹 Mom...

陳奕帆 Andy Chen ‧ 2019-10-01

0 Like 0 留言 5482 瀏覽

鐵人賽 Modern Web DAY 24

一步步帶你了解 AWS & LINE API 並使用 Serverless 介接的各種應用系列第 24 篇

技術 Day 24 - 簡單使用 LINE LIFF API

前言以下就為大家帶來簡單的實作以及如何去使用它。實作在views/下新增一個liff_test.html並加入以下內容 <html> &l...

NiJia ‧ 2019-10-09 ‧團隊HSCA x CHATBOT x SERVERLESS

3 Like 0 留言 5315 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 Day28 X Runtime Performance Debugging

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

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

2 Like 3 留言 5287 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day07 X Image Sprites

經過昨天的一番折騰，我想讀者們都對基本的圖片優化稍有概念了，今天要介紹的優化技巧其實嚴格來說也算是圖片的優化範疇，但是跟優化圖片本身的大小無關，因此我選擇獨立...

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

1 Like 0 留言 5266 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 JS 原力覺醒 Day28 - JS 裡的資料結構

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

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

3 Like 0 留言 5218 瀏覽

鐵人賽 Modern Web DAY 3

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

技術【Day3 React】認識 JSX Syntax

理解 JSX 在撰寫 React Component 的時候，使用 JSX 可以提高程式撰寫的效率。JSX（JavaScript Extention）並不是一種...

TSAI ‧ 2017-12-09

1 Like 0 留言 5186 瀏覽

鐵人賽 Modern Web

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

技術 Day 47. 通用武裝・泛型應用 X 結合 ES2015+ - TypeScript Generics with ES2015+ Features

閱讀本篇文章前，仔細想想看迭代器（Iterator）與聚合物（Collection）的差別在哪？迭代器模式要如何實踐？實踐的目的為何？什麼是多型巡訪...

Maxwell Alexius ‧ 2020-01-09

0 Like 0 留言 5183 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day 12 - UML — 系統設計不可不知的 UML

今天再度要進入新的篇章啦！！！身為軟體工程師，想要設計出好的系統架構，或是綜觀地去理解系統的話，UML 都是不可或缺的，但我在轉職自學的過程中卻遲遲沒有碰到這個...

parkerhiphop027 ‧ 2021-09-27

1 Like 0 留言 5142 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 JS 原力覺醒 Day26 - 常用 API： setTimeout / setTimeInterval

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

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

7 Like 0 留言 5137 瀏覽

鐵人賽 Modern Web DAY 15

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

技術【Day15】滾動條 - 保留滾動條的空間

情境當我們內容超出頁面的時候，我們會設置滾動條。上個單元中，我們介紹了使用 auto 來設置，避免不需要的時候還出現滾動條： .card { overfl...

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

3 Like 0 留言 5124 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 Day014 X Code Splitting & Dynamic Import

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

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

技術 Day 44. 通用武裝・介面與類別 X 泛型註記機制 - TypeScript Generic Class & Interface

技術 Day15 X Tree Shaking

技術 Day20 X CDN

技術 Day24-line chart(using D3.js)

技術 Day12-D3基本介紹(作用、svg)

技術 Day08 X 瀏覽器架構演進史 & 渲染機制

技術 Day13-D3基本介紹(scale、range)

技術 Day29 X 面對高流量，前端可以做些什麼？

技術 Day17-D3基本介紹(select、append、attr)

技術 Day21-D3基本介紹(transform)

技術 【Day19 React】React router 在 Single Page Application(SPA) 的應用

技術 Angular 深入淺出三十天：表單與測試 Day01 - 前言

技術 Day14-D3基本介紹(domain、endpoint)

技術 【Day4 React】終於跟 World 說 Hello World!

技術 Day04 X Core Web Vital & RAIL Model

技術 JS 原力覺醒 Day29 - Set / Map

技術 Day02-React.js基本介紹(JSX)

技術 Day24 X Web Rendering Architectures

技術 Day 15. 機動藍圖・功能多樣性 X 多樣性介面 - More on TypeScript Interface

技術 Day15-D3基本介紹(time format)

技術 Day 24 - 簡單使用 LINE LIFF API

技術 Day28 X Runtime Performance Debugging

技術 Day07 X Image Sprites

技術 JS 原力覺醒 Day28 - JS 裡的資料結構

技術 【Day3 React】認識 JSX Syntax

技術 Day 47. 通用武裝・泛型應用 X 結合 ES2015+ - TypeScript Generics with ES2015+ Features

技術 Day 12 - UML — 系統設計不可不知的 UML

技術 JS 原力覺醒 Day26 - 常用 API： setTimeout / setTimeInterval

技術 【Day15】滾動條 - 保留滾動條的空間

技術 Day014 X Code Splitting & Dynamic Import

標記使用者

技術【Day19 React】React router 在 Single Page Application(SPA) 的應用

技術【Day4 React】終於跟 World 說 Hello World!

技術【Day3 React】認識 JSX Syntax

技術【Day15】滾動條 - 保留滾動條的空間