iT邦幫忙

frontend相關文章
共有 226 則文章
鐵人賽 Modern Web DAY 7

技術 JS 原力覺醒 Day07 - 陳述式 表達式

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

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

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

把整張名片作為一個 component 每一個 component 外層都會用一個 class 包起來。extends 指的是 React.component...

鐵人賽 Modern Web DAY 14

技術 Day 14. 機動藍圖・函式超載 X 究極融合 - Function Overload & Interface Merging

閱讀本篇文章前,仔細想想看 試問介面跟型別系統的差異性在哪? 為何要儘量對程式碼進行抽象化的動作? 如果還沒理解完畢的話,可以先翻看前一篇文章喔! 什...

鐵人賽 Modern Web DAY 2

技術 Day02_JS的二三事

Javascript Introduction 身為一個前端工程師,對前端三本柱子大家一定不陌生,HTML、CSS、Javascript,在一個Page裡面,J...

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

技術 【Day9 React】從拆解電子名片學習 React Props #Part3

皮卡丘就這麼跑進我的文章裡。。。 目前我的專案長這樣~ 我一樣用電子名片這個專案來學習 React props 的運作原理,今天也會將我預先儲存在 json...

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

技術 【Day 12 React】React + Webpack ——搜尋功能 #Part1

前面幾篇的做法,我都是直接引用 CDN 來操作。我們還有第二種方法可以 include React,就是透過第二篇介紹過的 Webpack,所以今天就來學學 W...

徵才 [徵才]美商A10 Networks-FrontEnd Web Developer

【公司名稱】: 美商睿科網路科技有限公司 【公司地址】: 台北南港軟體園區三期 捷運南港展覽館站附近 台北市南港區三重路66號6樓 https://goo.gl...

鐵人賽 Modern Web DAY 9

技術 Day 09. 前線維護・選用屬性 X 型別擴展 - Optional Properties

閱讀本篇文章前,仔細想想看 明文型別(Literal Type)是什麼? 如何使用型別化名(Type Alias)?使用化名的好處是什麼? 變數被指派廣義...

鐵人賽 Modern Web DAY 10

技術 Day 10. 前線維護・特殊型別 X 永無止盡 - Never Type

閱讀本篇文章前,仔細想想看 如何跳脫死板定義的型別 type 格式? 對狹義物件的屬性下達 undefined 之原始型別跟使用選用屬性(Optional...

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 3

技術 JS 原力覺醒 Day03 - 執行環境與執行堆疊

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

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

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

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

鐵人賽 Modern Web

技術 Day 48. 通用武裝・非同步概念 X 脫離巢狀地獄 - TypeScript Generics with Asynchronous Programming I. Promise Chain

閱讀本篇文章前,仔細想想看 ES6 Map 與 Set 在 TypeScript 裡使用時需要注意的事項。 ES6 Promise 的基本運作機制為何?...

鐵人賽 Modern Web DAY 13

技術 Day 13. 機動藍圖・介面的延展 X 功能與意義 - Interface Extension & Significance

閱讀本篇文章前,仔細想想看 如何宣告介面(Interface)? 介面跟型別(Type)在語法上的差別與規則會是什麼?(筆者目前還沒講概念上的差別,讀者先...

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

技術 【Day 11 React】Events and Data Changes in React

今天要介紹如何即時得到使用者輸入的色碼,並即時 render 到氣球上。 DEMO 建立 Component 首先,建立一個 Balloon componen...

鐵人賽 Modern Web DAY 27

技術 JS 原力覺醒 Day27 - JS 常用 API - Object.assign && Object.defineProperty

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

鐵人賽 Modern Web DAY 11

技術 Day 11. 前線維護・特殊型別 X 無法無天 - Any & Unknown Type

閱讀本篇文章前,仔細想想看 當函式遇到 100% 無法跳脫或會拋出例外的狀況,這時 TypeScript 會如何對該函式進行推論? never 型別為所...

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 23

技術 [Day 23] 淺淺認識 Database Sharding

(這其實是一個很複雜且相對較進階的主題,本篇文章僅供認識這個概念,相關實作範例都是終極簡化版) 什麼是 DB Sharding,為什麼需要它 ? 在海量資料的儲...

鐵人賽 Modern Web DAY 29

技術 [Day 29] Frontend ? Backend ? 如何做選擇?

可能很多人一開始看到系列文主題就會產生疑惑了:「前後端都碰會不會都不專精啊?」 其實這個問題的答案我自己覺得是:會的。 但我仍然照自己的想法自己的步調在往前行,...

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

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

鐵人賽 Modern Web DAY 4
從零開始認識 Node.js 系列 第 4

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

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

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

技術 Day25-pie chart(using D3.js)

前言 今天要來介紹一個比較特別的圖表,在前天的文章提到長條圖,用來反映事物分布、集中情況,昨天的文章提到折線圖,用來顯示數據的變化趨勢,但是這些都無法得知單一數...

鐵人賽 Modern Web DAY 15

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

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

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

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

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 7

技術 07. [JS] 瀏覽器 DOM 元素的事件代理是指什麼?

本系列來到了 JavaScript 相關的主題,預計會在這逐步前進好一陣子,讓我們從較簡單的主題開始吧;今天就先來聊聊瀏覽器中的事件代理是怎麼一回事。 本系...

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

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

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