iT邦幫忙

frontend相關文章
共有 330 則文章
鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 6
React + D3 的正確姿勢 系列 第 6

技術 Day06-React元件比較

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

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

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

鐵人賽 Modern Web DAY 19
React + D3 的正確姿勢 系列 第 19

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

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

鐵人賽 Modern Web DAY 25

技術 [Day 25] 菜鳥工程師的初次 Open Source Contribution - (1)

鐵人賽剩下 5 天,接下來我想聚焦在一些經驗分享,畢竟除了學習技術以外,適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師, Github 自...

鐵人賽 Modern Web DAY 16
React + D3 的正確姿勢 系列 第 16

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

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

達標好文 技術 5個學習CSS的遊戲分享 | 我在路易莎的日子

最近愛上以玩遊戲的方式去學習CSSヽ(✿゚▽゚)ノ好快樂~ 尤其是之前對選擇器和Grid Layout一直沒有很熟練,透過遊戲,印象更深刻,也不失為一個不錯的學...

鐵人賽 Modern Web DAY 14

技術 Day 14 - UML x Interface — Portal

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

鐵人賽 Modern Web DAY 1

技術 Day01_還是要廢話一下吧

前言 想分享這個主題其實是有點心虛的,畢竟自己對Javascript也是一知半解,怎麼還敢分享出來誤人子弟,但我認為,錯誤中才能改正,能用自己的話語表達才是真正...

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 20
Zero to hero with React.js 系列 第 20

技術 【Day20 React】Redux 入門

後面這二十天,將專攻 Redux,一樣也是透過做中學的方式來理解 Redux。首先,官方文件是必備材料:Redux 官方中文文件 另外,這一篇 Code Car...

鐵人賽 Modern Web DAY 15

技術 Day 15. slate × Interfaces × Iteration

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

鐵人賽 Modern Web DAY 24

技術 JS 原力覺醒 Day24 - DOM

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 13
Zero to hero with React.js 系列 第 13

技術 【Day 13 React】React + Webpack ——搜尋功能 #Part2

取得 input 的值 昨天做到 input event 的綁定,不過尚未取得 input 的值,在 handleQuery 裡,我們可以用 event.tar...

鐵人賽 Modern Web DAY 28
React + D3 的正確姿勢 系列 第 28

技術 Day28-React + D3(一)

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

鐵人賽 Modern Web DAY 17

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

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

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

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

鐵人賽 Modern Web DAY 25
Zero to hero with React.js 系列 第 25

技術 【Day 25 React】Redux 做遊戲角色陣容應用程式——趴ㄈ ㄞˋ

mapping dispatch to props import { bindActionCreators } from 'redux'; import {...

鐵人賽 Modern Web DAY 30

技術 Day30 X 系列文總結

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

鐵人賽 Modern Web DAY 18
React + D3 的正確姿勢 系列 第 18

技術 Day18-D3基本介紹(data)

前言 在昨天的文章講完如何先初始化一個 svg 容器來填入圖表後,今天要來介紹如何把資料傳進去 svg 內進行圖表繪製嘍! selectAll 昨天介紹了 d3...

鐵人賽 Modern Web DAY 13

技術 【Day13】圖片 - 圖片的最大寬度

情境 我們先前也提到一些圖片處理的相關防禦性 CSS,例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候,防止圖片的比例變...

鐵人賽 Modern Web DAY 21

技術 JS 原力覺醒 Day21 - 原型

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

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

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

鐵人賽 Modern Web DAY 28

技術 [Day 28] 菜鳥工程師的初次開發「偽」 Open Source Project

ConsumerX 這篇文章的標題似乎跟前幾天的「菜鳥工程師的初次 Open Source Contribution」 這篇文章有點像欸!不同的是上次是去貢獻...

鐵人賽 Modern Web DAY 5
React + D3 的正確姿勢 系列 第 5

技術 Day05-state and props

前言 今天要來談一談 React 是如何更新 component ,今天的文章會跟昨天講到的 component life cycle 息息相關,假如讀者對 c...

鐵人賽 Modern Web DAY 22

技術 Day22 X Web Workers

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

鐵人賽 Modern Web DAY 11
React + D3 的正確姿勢 系列 第 11

技術 Day11-React環境架設(Webpack)

前言 今天要來介紹如何手動建立 React.js 的開發環境,今天要介紹的東西需要對 Webpack 有點基礎知識,由於 Webpack 的基本觀念非常多因此筆...

鐵人賽 Software Development DAY 26

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

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

鐵人賽 Modern Web DAY 10

技術 Day 10. slate × 架構藍圖

在開始今天的主題前,雖然在前面介紹 Slate 時已經有稍微提到過了,我們還是先從 slate 的各個 packages 分別負責的領域開始介紹起。 sl...