iT邦幫忙

frontend相關文章
共有 368 則文章
鐵人賽 Modern Web DAY 4

技術 第 4 幅 - 風格文字:致敬時代的眼淚「文字藝術師」

昨天畫完畫,今天來看看如何用 Canvas 寫出文字吧!不知道大家對 Word 的文字藝術師有沒有印象?以前超多海報和宣傳單上都會出現文字藝術師做出來的經典風格...

鐵人賽 Modern Web DAY 5

技術 【Day05】內容長度 - 類別標籤

情境 如下圖,網站中有這樣一塊又一塊的圖形設計,稱之為「卡片」。近年來 卡片式設計 在網站上越來越常見。 矩形的卡片設計能夠順利的與不同視窗大小做搭配,因此無論...

鐵人賽 Modern Web DAY 3

技術 第 3 幅 - 藝起寫 Code,復刻蒙德里安抽象畫

昨天練習了許許多多的幾何圖形,今天來休息一下,順便沾沾藝術氣息吧!不知道大家知不知道蒙德里安?他是 19 世紀的荷蘭畫家,他將抽象派推至極限,僅通過構圖和色彩等...

鐵人賽 Modern Web DAY 2

技術 解構賦值Destructuring assignment—為什麼需要和用途

什麼是解構賦值?根據MDN-Destructuring assignment的說法,他是一種把陣列或物件解開擷取成為獨立的變數。 這篇文章將會提到以下幾點 為...

鐵人賽 Modern Web DAY 2

技術 第 2 幅 - 圖形入門:心裡有坐標,幾何自然來

相信每個人的童年都有一個幾何積木玩具,今天我們就是要重返童年,一起用 Canvas 完成一些常用的幾何圖形! 準備好畫布 剛開始就先不用框架,以 Vanilla...

鐵人賽 Modern Web DAY 3

技術 【Day03】間距 - 標題與圖示

情境 今天我們來討論一個常見的設計,標題與圖示。下面這是一張很常見的卡片式設計,看起來很正常不是嗎? 我們在生活當中很常遇到類似這樣的設計,就是在一個卡片式的...

鐵人賽 Modern Web DAY 1

技術 名稱與規劃—React生態系 library?framework?

破折號後的題目名稱由來 破折號後的名稱是來自於React繁體中文官方網站<header>的裡面的<h1>小字參見下圖 React是一個...

鐵人賽 Modern Web DAY 1

技術 【Day01】參賽前言 & 精神喊話

參賽前言 大家好!我又來啦~~~在心裡默默下定決心,說好今年絕對死不參加,但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情,所以我又來啦 XD 相信每一位參...

技術 關於 git stash 你可能不知道的用法

相信大家可能都會有這種經驗: 當你在開發某一功能時,突然被PM打斷,要求你現在要先去修正一個急單,這時候你可以有兩個選擇: 直接下commit,然後開始改急單...

鐵人賽 Modern Web DAY 1

技術 第 1 幅 - 這就是工程師的快樂啊!

嗨,大家好!我是珊迪,還有點菜味的前端工程師。這是我第一次參加鐵人賽,希望能在這趟旅程中,為自己立下一個小小的里程碑,紀念 Hello World 一週年。 為...

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

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

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

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

鐵人賽 Modern Web DAY 30

技術 Day 30. Goal × 微結語

一天過一天,終於走到了今天(撒花~ 從最一開始的 Pre-Start 篇章:帶讀者們認識 WYSIWYG 、瀏覽器的 contenteditable 屬性、...

鐵人賽 Modern Web DAY 30

技術 Day30 X 系列文總結

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

鐵人賽 Modern Web DAY 30

技術 Day 30 - 結語 — 首尾呼應&致謝

最後一篇來個首尾呼應,回答在 Day 01 問大家的七個關於 UI 元件的問題! 你知道 為什麼會有 UI LibraryA:讓我們可以不用再自己造輪子,...

鐵人賽 Modern Web DAY 29

技術 [Day29] CI /CD with GitLab CI

credit: https://medium.com/@brilvio/how-i-implemented-a-ci-build-of-delphi-bina...

鐵人賽 Modern Web DAY 29

技術 Day 29. slate × Transforms × Selection & Text

上一篇我們統整了 NodeTransforms 裡各個 methods 的用法以及參數介紹, 傳送門 在此~ 這一篇同樣會以 reference 的形式統整...

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 29

技術 Day 29 - 實戰演練 — 元件單元測試

測試會用到的工具是 React Testing Library,後續對元件有改動時也可以使用 Snapshot testing。 基本上測試撰寫的 SOP 就...

鐵人賽 Modern Web DAY 28

技術 Day 28. slate × Transforms × Node

最後終於來到了我們最後一個章節:『 Transforms 』。 Transform 在 slate package 裡頭也是佔了舉足輕重的地位,它提供了最 h...

鐵人賽 Modern Web DAY 28

技術 Day28 X Runtime Performance Debugging

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

鐵人賽 Modern Web DAY 28

技術 Day 28 - 實戰演練 — Pagination

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

鐵人賽 DevOps DAY 28

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

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

鐵人賽 Modern Web DAY 27

技術 Day 27. slate × Normalizing × normalize

前一篇我們介紹了 Slate Normalizing 裡負責實作節點正規化以及讓使用者自定義 constraints 的主要函式: create-editor...

鐵人賽 Modern Web DAY 27

技術 Day 27 - 實戰演練 — Tabs

想先看 Code 或是 Demo 的由此去 Github Repo: ithelp-ui-demo Live Demo:** Tabs** Tabs 這邊整個...

鐵人賽 Modern Web DAY 27

技術 Day27 X Stale While Revalidate Cache Policy

在 Day24 介紹 Web 前端渲染架構時,有提到 Stale While Revalidate 這個快取的應用策略,今天將更詳細介紹這個策略,並看看怎麼運...

鐵人賽 Modern Web DAY 26

技術 Day 26. slate × Normalizing × normalizeNode

Slate 正規化的相關功能由兩個主要函式: interfaces/editor.ts 的 normalize method create-editor 編...

鐵人賽 Modern Web DAY 26

技術 Day 26 - 實戰演練 — Notifier 、Notification

想先看 Code 或是 Demo 的由此去 Github Repo: ithelp-ui-demo/Notifier Live Demo:** Notific...

鐵人賽 Modern Web DAY 25

技術 Day 25. slate × Normalizing × Dirty-Path

我們在 上上一篇 也有提到過 slate 將 Normalizing 這項功能的實現拆成了第一步驟的『骯髒標記( Dirty-Path ) 』以及透過骯髒標記...

鐵人賽 Modern Web DAY 25

技術 Day25 X ESR: Rendering On The Edge

基本上 CDN 是現在的 Web 應用不可或缺的技術,當對被 CDN 加速過的域名發出請求時,CDN 會自動將 request 導到地理位置離使用者較近或是流...