iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

5 Like 1 留言 10682 瀏覽

鐵人賽開發技術 DAY 17

你不能不知道的Polymer開發實戰系列第 17 篇

技術用 JavaScript 實現人臉追蹤

今日目標: 學習如何使用強大的電腦視覺元件 [線上試玩] 用顏色物體控制企業號前進 (粉紅色、青綠色、黃色) 一、tracking.js 網站介紹 t...

martyshu ‧ 2014-10-07

3 Like 2 留言 5953 瀏覽

鐵人賽開發技術 DAY 16

你不能不知道的Polymer開發實戰系列第 16 篇

技術 VoiceTube元件解析 - 了解組裝元件的開發方式

今日目標: 了解源代碼與組裝元件的開發方式一、元件結構目前使用的元件清單如下 <voice-tube> 負責整合抓取字幕、youtube影片...

martyshu ‧ 2014-10-06

1 Like 1 留言 4112 瀏覽

鐵人賽 Modern Web DAY 2

Web Component 網頁元件之路系列第 2 篇

技術 [Day02] - 旅途開始前的行前解說

昨天提到了 Web Component , 今天先初步了解一下什麼是 WebComponent 跟他能做什麼吧 ! WebComponent 簡介 WebCo...

Tree ‧ 2021-09-06

0 Like 0 留言 3146 瀏覽

鐵人賽 Modern Web DAY 22

Web Component 網頁元件之路系列第 22 篇

技術 [Day22] - 介紹 LitElement 如何使用

今天我們來介紹一下 , 昨天說明的 Web Component 框架中的其中之一 - LitElement 特別拿出來介紹 , 是因為你可以不需要 compil...

Tree ‧ 2021-09-26

1 Like 0 留言 2943 瀏覽

鐵人賽 Software Development DAY 26

IT邦鐵人賽文章搜尋引擎系列第 26 篇

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

Github, Over Engineering 設計輸入欄位是我第一個設計撞牆的部分，光是其中的一個小部件就有很多眉角。其中也沒有絕對正確的答案，很多都有...

tainvecs ‧ 2022-10-11

3 Like 1 留言 2934 瀏覽

鐵人賽開發技術 DAY 19

你不能不知道的Polymer開發實戰系列第 19 篇

技術 AngularJS 的後宮佳麗 (上)

今日目標: 在 AngularJS 中使用 Polymer 元件本來題目想寫AngularJS與PolymerJS聯姻，但說聯姻好像不大對，Polymer比較...

martyshu ‧ 2014-10-09

1 Like 0 留言 2763 瀏覽

技術 Vue 圖片剪裁元件設計思考

前言當初接觸到rxjs 這套以流的方式處理事件及資料的庫時，覺得非常新奇，便嘗試自己從頭寫了一個rxjs + vuerx + vue 支援觸控端、響應式的圖片...

timtnlee ‧ 2018-11-13

1 Like 0 留言 2533 瀏覽

鐵人賽 Modern Web DAY 8

Web Component 網頁元件之路系列第 8 篇

技術 [Day08] - 彈跳視窗 Modal - Slot 介紹

網頁元件中 , 常會使用 Modal 這種類型的元件如果我們將其製作成一個 <Modal> 的 WebComponent , 之後在使用時 ,...

Tree ‧ 2021-09-12

0 Like 0 留言 2433 瀏覽

鐵人賽 Modern Web DAY 10

Web Component 網頁元件之路系列第 10 篇

技術 [Day10] - Tab頁籤切換效果 - Web Component 的樣式設定

在 Web Component 中有些特別的 css styling 可以設定 , ex : 如果我們想要設定元件根元素 (Root Element) 的底色時...

Tree ‧ 2021-09-14

1 Like 0 留言 2389 瀏覽

鐵人賽開發技術 DAY 20

你不能不知道的Polymer開發實戰系列第 20 篇

技術 AngularJS 的後宮佳麗 (下)

今日目標: 了解Polymer 元件和AngularJS Directive元件的差異昨天的說明在AngujarJS裏面可以直接使用Polymer元件，取代...

martyshu ‧ 2014-10-10

3 Like 0 留言 2342 瀏覽

鐵人賽開發技術 DAY 18

你不能不知道的Polymer開發實戰系列第 18 篇

技術我所知道的元件聖殿、傳教士、軍火庫

今日目標: 了解元件大本營和各地軍火庫、威力強大的武器包裝成WebComponent，polymer不是第一家，但在Google加持下，的確有可能成為最大的一...

martyshu ‧ 2014-10-08

2 Like 0 留言 2251 瀏覽

鐵人賽開發技術 DAY 22

你不能不知道的Polymer開發實戰系列第 22 篇

技術打造鐵人賽積分排行榜 (D3元件)

今日目標: 了解如何包裝 D3 視覺化元件視覺化元件 <d3-flare> 這元件功能是顯示目前鐵人賽各組參與人數，以及積分的視覺化效果。...

martyshu ‧ 2014-10-12

0 Like 0 留言 2212 瀏覽

鐵人賽 Modern Web DAY 16

Web Component 網頁元件之路系列第 16 篇

技術 [Day16] - 在 Vue 中引入現成的 Web Component

當我們拿到一個現有的 Web Component 時 , 如果直接在 Vue 專案中使用會抱錯今天來解決這個 issue 吧 ! 利用 vue-cli...

Tree ‧ 2021-09-20

0 Like 0 留言 2184 瀏覽

鐵人賽 Modern Web DAY 8

web component - 次世代網頁技術的重要拼圖系列第 8 篇

技術 [Day7] shadow DOM 的使用和問題

我曾經看過某一篇文章是這樣說明的。如果說custom element是web component的骨架，那shadow DOM就是web component的靈...

BugofBook ‧ 2022-09-22

0 Like 1 留言 2173 瀏覽

鐵人賽 Modern Web DAY 23

Web Component 網頁元件之路系列第 23 篇

技術 [Day23] - 介紹 Stencil.js 如何使用

今天我們來介紹一下 , 昨天說明的 Web Component 框架中的其中之一 - stencil.js 特別拿出來介紹 , 是因為如果你想要用 TypeSc...

Tree ‧ 2021-09-27

0 Like 0 留言 2118 瀏覽

鐵人賽 Modern Web DAY 18

Web Component 網頁元件之路系列第 18 篇

技術 [Day18] - 打包 Element-UI 的 Vue Component to Web Component

day-14 我們說明了 , 如何將 Vue 的 Component 轉換成 Web Component day-17 說明了 , 如何在 React 專案中...

Tree ‧ 2021-09-22

0 Like 0 留言 2020 瀏覽

鐵人賽 Software Development DAY 27

IT邦鐵人賽文章搜尋引擎系列第 27 篇

技術 [Day 27] 如何設計搜尋結果清單 - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 版型設計這邊的設計確實讓人頭痛，作為搜尋引擎，你無法肯定用戶送出搜尋之後，回傳的資料集大小。假設有大量的資料...

tainvecs ‧ 2022-10-12

0 Like 0 留言 1957 瀏覽

鐵人賽 Modern Web DAY 3

Web Component 網頁元件之路系列第 3 篇

技術 [Day03] - 第一個 WebComponent 元件

昨天借用了 Wired Elements 來說明什麼是 WebComponent 跟它有什麼特點今天我們來製作一個 MyElement 吧 ! 素材準備我...

Tree ‧ 2021-09-07

1 Like 2 留言 1937 瀏覽

鐵人賽 Modern Web DAY 1

Web Component 網頁元件之路系列第 1 篇

技術 [Day01] - 旅途開始前的茶室閒聊

去年寶哥在 Modern WEB 中介紹過 Angular 有時會發生版本不相容的 issue , 利用 Web Component 可以讓舊版的 Angul...

Tree ‧ 2021-09-05

0 Like 0 留言 1923 瀏覽

鐵人賽 Modern Web DAY 4

Web Component 網頁元件之路系列第 4 篇

技術 [Day04] - 新擬物風按鈕(二) - shadow dom 介紹

昨天我們做了一個不能點的 neuomorphic-button 今天我們把他可以點擊 & 加上 shadow-dom 讓元件內外的 styling 區隔...

Tree ‧ 2021-09-08

0 Like 0 留言 1907 瀏覽

鐵人賽 Modern Web DAY 19

web component - 次世代網頁技術的重要拼圖系列第 19 篇

技術 [Day18] web component 的應用-微前端

因為時間不足，有些部分有少圖片。但考慮到我的進度，可能要完賽後慢慢補上了。微前端說實話，我對這個應用沒有很在行。不僅因為微前端本身就不像微服務一樣有一個固定...

BugofBook ‧ 2022-10-03

0 Like 0 留言 1873 瀏覽

鐵人賽 Modern Web DAY 14

Web Component 網頁元件之路系列第 14 篇

技術 [Day14] 利用 Vue CLI 3 來建立 Web Components 的 JS 檔

前面花了大把的時間 , 來建立跟 Vue 很像的 Web Components 其實 Vue CLI 也有提供建立 web-component 的方法下方來說...

Tree ‧ 2021-09-18

2 Like 0 留言 1866 瀏覽

鐵人賽 JavaScript DAY 5

前端也可以搞微服務？！前端最複雜的一種架構系列第 5 篇

技術 (五) 常見的微前端解決方案

常見的微前端解決方案要實施微前端有很多解決方案，目前有幾種主流的方法大致上會有幾種。以 Application 層級來說 xhr/fetch javascr...

造輪子的竹子 ‧ 2024-08-05

0 Like 0 留言 1829 瀏覽

鐵人賽 Software Development DAY 24

IT邦鐵人賽文章搜尋引擎系列第 24 篇

技術 [Day 24] 為什麼需要 design system - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 隨著作為開發者的時間年復一年的過去，我最終認識到 Design System 的重要性，它不僅僅只是為了設計...

tainvecs ‧ 2022-10-09

0 Like 0 留言 1644 瀏覽

鐵人賽 Modern Web DAY 17

Web Component 網頁元件之路系列第 17 篇

技術 [Day17] - 在 React 中引入現成的 Web Component

當我們拿到一個現有的 Web Component 時 , 如何在 React 專案中引用呢 ? 利用 [create]-react-app](https:/...

Tree ‧ 2021-09-21

0 Like 0 留言 1471 瀏覽

鐵人賽 Modern Web DAY 15

Web Component 網頁元件之路系列第 15 篇

技術 [Day15] - 利用 direflow.io 將 React Components 轉換成 Web Components

昨天解說 Vue 如何製作 Web-Component 今天來說明一下 , 那 React 如何製作 Web-Component 呢 ? 可以利用 direfl...

Tree ‧ 2021-09-19

0 Like 0 留言 1453 瀏覽

鐵人賽 Software Development DAY 28

IT邦鐵人賽文章搜尋引擎系列第 28 篇

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

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

tainvecs ‧ 2022-10-13

0 Like 0 留言 1402 瀏覽

鐵人賽 Modern Web DAY 9

Web Component 網頁元件之路系列第 9 篇

技術 [Day09] - 未知網址的彈跳視窗 - is 屬性

早上查看文章時 , 發現貼到昨天的資料本魯立馬作文章修改 , 如造成邦友的不便 , 請各位海涵有時客制化元件時 , 我們只是想在 HTML 基礎...

Tree ‧ 2021-09-13

0 Like 0 留言 1384 瀏覽

鐵人賽 Software Development DAY 25

IT邦鐵人賽文章搜尋引擎系列第 25 篇

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

Github, Over Engineering 向 Google 取經要能設計出實用性至上的搜尋結果，我們先做一些 Research。既然要設計搜尋引擎，...

tainvecs ‧ 2022-10-10

0 Like 0 留言 1283 瀏覽

鐵人賽 Modern Web DAY 11

web component - 次世代網頁技術的重要拼圖系列第 11 篇

技術 [Day10] web component的使用技巧-事件

監聽事件因為web component是使用custom element技術建構而成。web component內部也能使用addEventListener方...

BugofBook ‧ 2022-09-25

技術 用 JavaScript 實現人臉追蹤