iT邦幫忙

frontend相關文章
共有 377 則文章
鐵人賽 Modern Web DAY 10

技術 #10 CSS3 Flexbox: nav style setting

What is nav? nav = navagator “The <nav> HTML element represents a sectio...

徵才 【徵才】Zyxel_Cloud Engineer

彈性上下班時間, 開放的辦公環境與文化;與一流高手切磋技術, 與全球人才互動交流, 高效投資個人未來發展 Responsibilities-SD-WAN Orc...

鐵人賽 Modern Web DAY 24

技術 Day 24. slate × Normalizing

在開始繼續深入源碼之前,我們先花點篇幅討論 Normalizing 這回事。 Normalizing - 正規化,對資料庫稍有著墨的話對這個名詞一定不陌生。...

鐵人賽 Modern Web DAY 7

技術 Day 7. Compare × G2 × Draft

接下來的 Draft 與 Slate 就是提供建立編輯器環境為主的 Framework Library 了,如果對這個名詞不太熟悉的話可以回頭去看 Day5...

鐵人賽 Modern Web DAY 20

技術 從實作To Do List理解useContext搭配useReducer運作模型—(附圖)(中)

本文將以實作To Do List理解Listing State Up包含以下部分 useContext運作模型—圖解 useReducer運作模型—圖解 資料...

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 14

技術 Day 14. slate × Interfaces × Ref

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

徵才 PHP Front-end Programmer 前端工程師

職務說明:1. 負責網站前端開發,優化前端功能設計2. 與UI/UX Designers、後端工程師合作,開發網頁前端互動3. 主要使用 PHP, Javas...

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Software Development DAY 28

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

Github, Over Engineering 搜尋引擎會透過用戶指定 <title> ,以鐵人賽文章來說就是文章標題,用來產生搜尋結果的標題。...

鐵人賽 Modern Web DAY 20

技術 #20 JS: Object Fundamentals

What is an Object? Introduction by W3C School Elements creating Object: prope...

鐵人賽 Modern Web DAY 19

技術 #19 JS: Modified functions & how function create spaces

Modified functions(變形函式) Before introducing modified function, let's recall our...

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

技術 【Day25】元件高度 - 步驟對話框的高度

情境 步驟對話框/步驟條元件,是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣,或者有順序性,以至於不太適合一次把全部的資訊展示在一個頁面當...

鐵人賽 Modern Web DAY 7

技術 第 7 幅 - 加入真實圖片,讓你的 Canvas 更有料

學過幾何,圖片當然也是不可或缺的元素!相信大家日常生活中也很常用到圖片縮放、裁切、在圖片上繪圖等功能。今天的圖片範例都會用可愛的動物表情包來做範例,希望大家可以...

鐵人賽 Modern Web DAY 8

技術 第 8 幅 - 剪裁遮色片,隨心所欲留下「重點部位」

有沒有被標題騙進來~ 每次想到剪裁遮色片腦袋裡就會浮現...嘿嘿嘿!今天就帶大家來認識剪裁遮色片,剪裁遮色片顧名思義就是將某個形狀遮在其他圖片上,看到圖片時只會...

鐵人賽 Modern Web DAY 19

技術 Day 19. slate × Operation × WeakMap

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

鐵人賽 Modern Web DAY 22

技術 #22 JS: HTML DOM Fundamentals

What is the HTML DOM? "The HTML DOM is a standard object model and programm...

鐵人賽 Modern Web DAY 4

技術 #4 CSS Box Model, Selector, Absolute/Relative Position

CSS Box Model Frame & tag design: <div style="padding:10px;width:30...

鐵人賽 Modern Web DAY 7

技術 #7 Web Layout: CSS Fundamentals

Final Design CSS Web Layout Tips 1. Horizontally center the text: try text-ali...

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 24

技術 【Day24】Flexbox - 使用 justify-content: space-between 佈局

情境 Flexbox 是 CSS3 的盒子模型(box model),他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做...

鐵人賽 自我挑戰組 DAY 23

技術 [Day 23] 網路常識 - (9) 為什麼要知道 TCP 四次握手終止?四次握手過程為何?

為什麼比建立連結時多了一次 handshake ? 多了一次 handshake 的主要差別在 Server 發送 segment 時,把 FIN segme...

鐵人賽 Modern Web DAY 23

技術 Day 23. slate × Operation × L-transform

上一篇文章我們深入瞭解了 Operation 的 transform function 是如何實作針對各種不同的 Operation types 的更新功能的...

鐵人賽 Modern Web DAY 20

技術 非同步處理 Ⅱ (Async / Await)

Async / Await 是 ECMAScript 8 ( ES2017 ) 引入的一個功能,它是建立在 Promise 之上的語法糖,允許我們使用 asyn...

鐵人賽 Modern Web DAY 16

技術 Day 16. slate × Interfaces × CustomType

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

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

技術 Day 9. Compare × Final

Conclusion 呼~到今天為止 9 天過去了,Libraries 之間的比較篇章也到今天告一個段落。 今天就來對這個章節做個小小總結。(言下之意就是準...

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 27

技術 【Day27】CSS 語法 - 分組選擇器

情境 CSS 選擇器的分組,能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。 舉個例子來說,假設我們要讓兩個元素都改變顏色,不用分組選擇器的寫法會是這樣...