Github, Over Engineering 版型設計 這邊的設計確實讓人頭痛，作為搜尋引擎，你無法肯定用戶送出搜尋之後，回傳的資料集大小。假設有大量的資料...
情境 我們用下面這個垂直下拉選單來說明這個情境： 上圖示我們常見的下拉選單形式，這些選單有一些選項，例如我們可以對這個帳號做一些設定、登出、查看自己的個人資料...
本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...
優點： JavaScript 存在，TypeScript 就存在 還記得昨天的圖嗎？因為 TypeScript 是建立在 JavaScript 之上的程...
彈性上下班時間, 開放的辦公環境與文化；與一流高手切磋技術, 與全球人才互動交流, 高效投資個人未來發展 Responsibilities-SD-WAN Orc...
ImmutableJS v.s. ImmerJS 舊版的 Slate 選擇 Immutable.js 這個套件去建立 Immutable object ，但...
情境 在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。我相信我們的讀者一定也很能夠舉一反三，既然固定高度下，內容過長有可能會溢出，那換個...
如何開始D3js 方法一 使用CDN 請google搜尋D3Js到D3Js的官方網站。滑鼠滾輪到下方處複製<script src="https:...
A10 is more than a technology company. We provide security. We provide intellige...
職務說明:1. 負責網站前端開發，優化前端功能設計2. 與UI/UX Designers、後端工程師合作，開發網頁前端互動3. 主要使用 PHP, Javas...
What is RWD? “Responsive web design (RWD) is a design and technical approach tha...
The World of G1 G1 的編輯器在網路還沒進入到前端 framework 御三家（Angular、React、Vue）之前就已經存在了 在 W...
參賽前言 大家好！我又來啦～～～在心裡默默下定決心，說好今年絕對死不參加，但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情，所以我又來啦 XD 相信每一位參...
情境 談到響應式的佈局排版，除了 Flexbox 之外，還有一個不容忽視的重要屬性，就是 Grid。 以下圖為例，我們透過 Grid 也能夠很輕易的將主要內容以...
A10 is more than a technology company. We provide security. We provide intellige...
測試會用到的工具是 React Testing Library，後續對元件有改動時也可以使用 Snapshot testing。 基本上測試撰寫的 SOP 就...
情境 如下圖，網站中有這樣一塊又一塊的圖形設計，稱之為「卡片」。近年來 卡片式設計 在網站上越來越常見。 矩形的卡片設計能夠順利的與不同視窗大小做搭配，因此無論...
想先看 Code 或是 Demo 的由此去 Github Repo： ithelp-ui-demo Live Demo：** Tabs** Tabs 這邊整個...
情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為， html 元素在 CSS 裡面，都可以視為一個一個的盒子(Box)。 如下...
經過了三天的文章後，我們總算要進到新的『 Compare 』篇章了。 前兩天我們介紹了 WYSIWYG 一詞本身所代表的涵意，並列舉了一些市面上知名的應用，並接...
破折號後的題目名稱由來 破折號後的名稱是來自於React繁體中文官方網站<header>的裡面的<h1>小字參見下圖 React是一個...
Slate 正規化的相關功能由兩個主要函式： interfaces/editor.ts 的 normalize method create-editor 編...
接著我們要進入到 slate 的下一個重點章節： Immutability 。 雖然這已經算是一個老生常談的主題了，但還是先讓我們稍微花點篇幅討論一下：什麼是...
今天要介紹的是網頁元件會用到的動畫，在 Day 07 已經介紹過過渡動畫這邊主要就是三大重點要定義：過渡類型（ Transition Type）、持續時間（D...
上一篇我們有提到上圖這些畫了黃框的 files ，是我們在建立 editor 與操作 editor value 時主要會使用到的概念。 同時介紹了 slate...
What is Flexbox? Flexbox = Flexible Box "CSS3 Flexbox was designed as a o...
Final Design CSS Web Layout Tips 1. Horizontally center the text: try text-ali...
前面把有依賴關係的 Component 都講一講之後，今天就來帶過其他的 UI 元件吧，因為想介紹的元件還有點多，因此會區分成兩天，今天主要講的是 Navig...
情境 今天我們來討論一個卡片容器的例子： 當內容在一般裝況下，我們不會需要滾動條，但是當內容長度過多時，我們會需要滾動調，讓我們在不改變卡片容器大小的狀況下，...
格式介紹 通常你的資料會是檔案、API接口或是一個連結作為D3輸入的資料，這邊就以下常見的資料格式簡單介紹一下 CSV逗號分隔值(Comma-Separated...
tainvecs
Taiming
DannyChen
威爾豬
boogieyan1997
Vida Lin
parkerhiphop027
iThome鐵人賽
看影片追技術