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

1 Like 0 留言 3885 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Day19-D3基本介紹(Axis)

前言在昨天的文章講完如何傳資料進去圖表後，今天要來介紹另一個重要的觀念： Axis 了，其實 Axis 代表的就是座標軸上的設定，透過客製化調整 Axis 的...

陳奕帆 Andy Chen ‧ 2019-10-05

1 Like 0 留言 3863 瀏覽

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

1 Like 1 留言 3741 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

陳奕帆 Andy Chen ‧ 2019-10-13

3 Like 0 留言 3699 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

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

1 Like 1 留言 3687 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 JS 原力覺醒 Day05 - Scope Chain

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

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

1 Like 0 留言 3673 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

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

1 Like 0 留言 3632 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Day03-virtual DOM

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

陳奕帆 Andy Chen ‧ 2019-09-19

0 Like 0 留言 3551 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

陳奕帆 Andy Chen ‧ 2019-10-08

3 Like 2 留言 3545 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 JS 原力覺醒 Day08 - Closures

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

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

0 Like 0 留言 3513 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 Day16-D3基本介紹(number format)

前言今天的文章跟昨天的內容基本上差不多，今天要來講講 D3 是如何處理數字格式，其實數字是不需要經由 D3 去轉換也可以直接使用 d3.scaleLinear...

陳奕帆 Andy Chen ‧ 2019-10-02

2 Like 2 留言 3491 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 Day22 X Web Workers

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

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

1 Like 0 留言 3466 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day07-React event handler

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

陳奕帆 Andy Chen ‧ 2019-09-23

2 Like 0 留言 3460 瀏覽

鐵人賽 Modern Web DAY 29

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

技術【Day29】CSS 語法 - 失效的 z-index

情境 z-index 可以幫助我們決定當元素重疊的時候，誰在上面，誰在下面。那我們該如何使用 z-index 呢？首先，因為 z-index 只用於「重疊」的...

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

0 Like 0 留言 3407 瀏覽

鐵人賽 Modern Web DAY 27

從Create到React—用來實作使用者介面的JavaScript函式庫系列第 27 篇

技術簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始

本文提及以下重點 GatsbyJS介紹靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...

DannyChen ‧ 2022-10-12 ‧團隊好想工作室 v6.0

1 Like 0 留言 3364 瀏覽

鐵人賽 Software Development DAY 23

IT邦鐵人賽文章搜尋引擎系列第 23 篇

技術 [Day 23] 如何規劃前端技術棧 - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 基礎對於整個 web 開發生命週期而言，技術棧是極其重要的第一步。選擇適合的技術棧等同建構一個好的骨幹，它讓...

tainvecs ‧ 2022-10-08

0 Like 0 留言 3344 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 Day 14 - UML x Interface — Portal

UML Portal 是什麼？開始之前，先說一下 Portal 其實是 React 比較常用的 Pattern，因此非 React 使用者可以斟酌一下怎麼...

parkerhiphop027 ‧ 2021-09-29

4 Like 0 留言 3340 瀏覽

技術 [CSS學習筆記] CSS Transition 轉場 | 我在路易莎的日子

在CSS中，有些屬性會以shorthand(速寫)的方式同時將多個屬性整合成一體，而這麼做的目的不外乎是為了簡化語法以及增加易讀性，讓日後更好維護。像是back...

hannnahTW ‧ 2022-08-16

3 Like 0 留言 3290 瀏覽

鐵人賽 Modern Web DAY 19

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

技術【Day19】Flexbox - 內元件溢出

情境 Flexbox 是 CSS3 的盒子模型(box model)，顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box)，這個模型讓排版變得容...

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

1 Like 0 留言 3248 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 JS 原力覺醒 Day24 - DOM

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

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

1 Like 0 留言 3226 瀏覽

鐵人賽 Software Development DAY 26

IT邦鐵人賽文章搜尋引擎系列第 26 篇

技術 [Day 26] 如何設計搜尋欄位 - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 設計輸入欄位是我第一個設計撞牆的部分，光是其中的一個小部件就有很多眉角。其中也沒有絕對正確的答案，很多都有...

tainvecs ‧ 2022-10-11

1 Like 0 留言 3191 瀏覽

技術 TapPay Web SDK 串接 - @types/tpdirect 介紹

前言非常非常久以前寫過一篇 TapPay 串接的文章但可惜的是 TapPay 沒有前端 npm 套件可以下載使用所以在串接前端的其實都不會有智能提示跳出來...

yujack ‧ 2020-12-12

0 Like 0 留言 3149 瀏覽

鐵人賽 Modern Web DAY 15

深入 slate.js ｘ一起打造專屬的富文字編輯器吧！系列第 15 篇

技術 Day 15. slate × Interfaces × Iteration

JS 的 Iteration 在 Slate 裡頭佔了不小的份量，即便有 Ref concepts 讓我們得以追蹤特定的 Location value ，在很...

boogieyan1997 ‧ 2021-09-30

0 Like 1 留言 3139 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 Day 28 - 實戰演練 — Pagination

Pagination 今天要實作的只是一個最基本的 Pagination，而我個人覺得在處理換頁時維持固定長度的邏輯挺有趣的，所以特別在最後一篇實作拿出來講...

parkerhiphop027 ‧ 2021-10-13

2 Like 0 留言 3094 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Day06-React元件比較

前言今天要來講講比較進階一點的 component 了，如果對於 component 的基本觀念有任何不懂的歡迎先去看前兩天的文章來奠定一下基礎，沒問題的話就...

陳奕帆 Andy Chen ‧ 2019-09-22

4 Like 9 留言 3077 瀏覽

鐵人賽 Modern Web DAY 30

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

技術 Day30 X 系列文總結

這是我第三年參加鐵人賽，每一次來到第 30 天，都有種如釋重負的感覺，不過同時也會感到一些遺憾，因為總是沒能把自己在開賽前預期的內容好好呈現出來。不論是主題內...

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

0 Like 0 留言 2998 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 Day28-React + D3（一）

前言前面的文章都介紹完圖表的繪製後，今天終於要回歸主題，把 D3 跟 React 結合在一起了，今天跟明天的文章都會把以前所講的內容做一個統整，假如對 Rea...

陳奕帆 Andy Chen ‧ 2019-10-14

1 Like 0 留言 2951 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 JS 原力覺醒 Day23 - Class 語法糖

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

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

4 Like 0 留言 2900 瀏覽

活動 [活動分享] 前端社群工作坊 --3月課程-設計師撈過界

Hello, 剛看到前端社群開課，特來分享給大家 ^^ 課程包含基礎 HTML、 CSS 教學、利用 Tumblr 做出作品集、MVP 網頁。 Tumblr 有...

小財神 ‧ 2015-03-18

0 Like 0 留言 2882 瀏覽

鐵人賽 DevOps DAY 28

前端工程師學習 DevOps 之路系列第 28 篇

技術 Day28-結合全部所學-前端實作篇

前言終於把這次系列文需要先學會的觀念都介紹完了，接下來就要進入實作環節的重頭戲，前面講了那麼多的觀念如果最後不自己親自實作一下相信讀者應該也沒辦法體會到 K8...

陳奕帆 Andy Chen ‧ 2021-10-13 ‧團隊StarBugs 星巴哥技術週刊

1 Like 1 留言 2876 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 JS 原力覺醒 Day17 - this 的四種繫結

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

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

技術 Day19-D3基本介紹(Axis)

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

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

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

技術 JS 原力覺醒 Day05 - Scope Chain

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

技術 Day03-virtual DOM

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

技術 JS 原力覺醒 Day08 - Closures

技術 Day16-D3基本介紹(number format)

技術 Day22 X Web Workers

技術 Day07-React event handler

技術 【Day29】CSS 語法 - 失效的 z-index

技術 簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始

技術 [Day 23] 如何規劃前端技術棧 - 實用至上主義前端 |【搜尋引擎製作錄】

技術 Day 14 - UML x Interface — Portal

技術 [CSS學習筆記] CSS Transition 轉場 | 我在路易莎的日子

技術 【Day19】Flexbox - 內元件溢出

技術 JS 原力覺醒 Day24 - DOM

技術 [Day 26] 如何設計搜尋欄位 - 實用至上主義前端 |【搜尋引擎製作錄】

技術 TapPay Web SDK 串接 - @types/tpdirect 介紹

技術 Day 15. slate × Interfaces × Iteration

技術 Day 28 - 實戰演練 — Pagination

技術 Day06-React元件比較

技術 Day30 X 系列文總結

技術 Day28-React + D3（一）

技術 JS 原力覺醒 Day23 - Class 語法糖

活動 [活動分享] 前端社群工作坊 --3月課程-設計師撈過界

技術 Day28-結合全部所學-前端實作篇

技術 JS 原力覺醒 Day17 - this 的四種繫結

標記使用者

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

技術【Day29】CSS 語法 - 失效的 z-index

技術簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始

技術【Day19】Flexbox - 內元件溢出