iT邦幫忙

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

技術 Day 22 - 實戰演練 — Portal 系列

實作第二篇要來介紹的是 Portal 系列的實作,會一路從 Portal 實作到 Popconfirm,Overlay、Modal 就等之後有機會再做了! 開...

鐵人賽 Modern Web DAY 22

技術 Day22 X Web Workers

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

鐵人賽 Modern Web DAY 21

技術 Day 21. slate × Operation × Entrance

上一篇我們介紹了 interfaces/operations.ts 裡定義的 Operation types ,還沒看過的讀者們 傳送門 在此~ 接著從這一篇...

鐵人賽 Modern Web DAY 21

技術 Day21 X Upgrade Your HTTP Connection

其實很多的效能優化技巧都擁有「用了不一定會讓效能變得比較快,就算有可能也是使用者難以感知的微幅進步,甚至如果使用不當會讓網頁效能變的更差」的特性。 不過對於...

鐵人賽 Modern Web DAY 21

技術 Day 21 - 實戰演練 — Button / ButtonGroup / IconButton

從今天起到結賽都會是實戰演練的環節了! 接下來的日子真槍實彈、彈無虛發,帶大家從理論走向實踐,把一些基本的元件實作出來吧! 這篇章會怎麼實作? 老樣子我的風格...

鐵人賽 Modern Web DAY 20

技術 Day 20. slate × Operation × Interface

我們接下來就要進入到 slate 世界裡的另一大領域: Operations 。 這一整段章節其實也是筆者準備整個系列文章中數一數二期待的章節。因為在面對 W...

鐵人賽 Modern Web DAY 20

技術 Day20 X CDN

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

鐵人賽 Modern Web DAY 20

技術 Day 20 - UML x Component — Independent (下)

今天終於來到 UML 的最後一篇了,要來接著把沒介紹到的常見 UI 元件介紹完,那就廢話不囉唆直接進入正題! Table 網頁中的大魔王 Table,作為呈...

鐵人賽 Modern Web DAY 19

技術 Day 19. slate × Operation × WeakMap

在正式開始介紹 Operation 的內容之前,先讓我們花一點篇幅來介紹一下『 WeakMap 』這個感覺有點偏冷門的主題。 即便對它不熟悉的讀者們,第一眼看...

鐵人賽 Modern Web DAY 19

技術 Day 19 - UML x Component — Independent (上)

前面把有依賴關係的 Component 都講一講之後,今天就來帶過其他的 UI 元件吧,因為想介紹的元件還有點多,因此會區分成兩天,今天主要講的是 Navig...

鐵人賽 Modern Web DAY 18

技術 Day 18. slate × Immutable × Immer & slate

ImmutableJS v.s. ImmerJS 舊版的 Slate 選擇 Immutable.js 這個套件去建立 Immutable object ,但...

鐵人賽 Modern Web DAY 18

技術 Day 18 - UML x Component — Button

Button 是網頁中最常用的元件,跟他相依的元件和情境也不少,因此雖然他不是一個介面,依然還是可以把它單純抽出來介紹,下面的 UML 只是列舉了一個大概而已,...

鐵人賽 Modern Web DAY 17

技術 Day 17. slate × Immutable

接著我們要進入到 slate 的下一個重點章節: Immutability 。 雖然這已經算是一個老生常談的主題了,但還是先讓我們稍微花點篇幅討論一下:什麼是...

鐵人賽 Modern Web DAY 17

技術 Day17 X 初探快取 & HTTP Caching

今天即將進入 Caching & Networking 章節的第一天,快取,是一個非常重要的技術,不論是前端還是後端,甚至是再更底層的系統開發,都ㄧ定...

鐵人賽 Modern Web DAY 16

技術 Day 16. slate × Interfaces × CustomType

slate 將 typescript 的型別擴充相關的內容都集合在 interfaces/custom-types.ts 這個 file 裡面。 這個 fil...

鐵人賽 Modern Web DAY 16

技術 Day16 X Polyfill-less Bundling Script & File Compression

今天是 Build Optimizations 主題的最後一篇了,到目前為止我們已經認識了 Code Splitting, Dynamic Import 還有...

鐵人賽 Modern Web DAY 15

技術 Day 15. slate × Interfaces × Iteration

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

鐵人賽 Modern Web DAY 15

技術 Day15 X Tree Shaking

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

鐵人賽 Modern Web DAY 14

技術 Day 14. slate × Interfaces × Ref

相信有 React 開發經驗的讀者們對 Ref 這個詞一定不陌生。 其實 slate 裡頭的 Ref concept 與 React Ref 非常相似,同樣都...

鐵人賽 Modern Web DAY 14

技術 Day014 X Code Splitting & Dynamic Import

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

鐵人賽 Modern Web DAY 14

技術 Day 14 - UML x Interface — Portal

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

鐵人賽 Modern Web DAY 28

技術 #28 JS: Timing Events - Part 2

After introducing about the 2 methods for timing events in the last article, let...

鐵人賽 Modern Web DAY 13

技術 Day 13. slate × Interfaces × Positioning

緊接著這一篇要來探討 slate 是如何實現『定位』這件事的。 在開發以 text 文字資料模型為主的功能時,有辦法精準地定位到特定的文字位置,甚至是文字集合...

鐵人賽 Modern Web DAY 13

技術 Day13 X CSS GPU Acceleration

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

鐵人賽 Modern Web DAY 27

技術 #27 JS: Timing Events - Part 1

What is timing event? "JavaScript can be executed in time-intervals. This i...

鐵人賽 Modern Web DAY 12

技術 Day 12. slate × Interfaces × Data-Model

上一篇我們有提到上圖這些畫了黃框的 files ,是我們在建立 editor 與操作 editor value 時主要會使用到的概念。 同時介紹了 slate...

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 12

技術 Day12 X Writing High Performance CSS

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

鐵人賽 Modern Web DAY 11

技術 Day 11 - Design System x 實作 — Transition

今天要介紹的是網頁元件會用到的動畫,在 Day 07 已經介紹過過渡動畫這邊主要就是三大重點要定義:過渡類型( Transition Type)、持續時間(D...

鐵人賽 Modern Web DAY 11

技術 Day 11. slate × Interfaces × Document-Model

接下來的篇章我們會把目光聚焦於 interfaces/ 這個目錄底下的內容,想確認 slate package 完整的 src directory 的讀者們可...