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

0 Like 0 留言 2473 瀏覽

鐵人賽 Modern Web DAY 12

用不到 30 天學會基本 TypeScript 系列第 12 篇

技術接口 / 介面 (Interface)

在 TypeScript 中，我們可以使用 interface 關鍵字來聲明自定義型別，用來描述物件的結構和形狀，以及物件應該具備的屬性和方法。我們可以使用 i...

威爾豬 ‧ 2023-09-12

0 Like 0 留言 1938 瀏覽

鐵人賽 Modern Web DAY 11

用不到 30 天學會基本 TypeScript 系列第 11 篇

技術類型別名 (Type)

在 TypeScript 中，我們可以使用 type 關鍵字來創建自定義的類型別名。它可以用來定義各種複雜的類型，使我們能夠更好地描述程式碼中的資料結構和變數類...

威爾豬 ‧ 2023-09-11

0 Like 0 留言 1627 瀏覽

鐵人賽 Modern Web DAY 10

用不到 30 天學會基本 TypeScript 系列第 10 篇

技術斷言（Assertion）

在昨天的範例中，應該有看到斷言的用法。斷言是一種告訴編譯器更多資訊的方式，用於強制指定型別。有時候，編譯器可能無法確定變數的精確型別，或者當我們需要將某個...

威爾豬 ‧ 2023-09-10

0 Like 0 留言 1848 瀏覽

鐵人賽 Modern Web DAY 9

用不到 30 天學會基本 TypeScript 系列第 9 篇

技術任意型別 VS. 未知型別 (any VS. unknown)

any 和 unknown 是兩個用於處理型別不確定的情況。雖然它們在某些情境下都可以用來處理不確定的值，但它們的用法和限制有所不同，我們一一來介紹： any...

威爾豬 ‧ 2023-09-09

0 Like 0 留言 1145 瀏覽

鐵人賽 Modern Web DAY 1

Angular 微前端實戰 module federation with nx monorepo 系列第 1 篇

技術 Day 1 前言微前端 Micro Frontend 前世今生

Micro Services 是2014年大神Martin Fowler和James Lewis提出的概念在現今雲端化容器化的web世界已是家餘戶曉的主流架...

ianwang83382784 ‧ 2023-09-16

0 Like 0 留言 2769 瀏覽

鐵人賽 Modern Web DAY 8

用不到 30 天學會基本 TypeScript 系列第 8 篇

技術枚舉 / 列舉 (Enum)

枚舉是自定義一組具名常數值的特殊型別，每個常數值都有一個名稱和一個關聯的數值，主要用於取值限定在一定的範圍內。在 TypeScript 中，我們使用 enu...

威爾豬 ‧ 2023-09-08

0 Like 0 留言 1497 瀏覽

鐵人賽 Modern Web DAY 7

用不到 30 天學會基本 TypeScript 系列第 7 篇

技術陣列的基本方法

今天的內容是屬於 JavaScript 的範疇，但陣列方法不管在 JavaScript 還是 TypeScript 裡，都是滿重要的一個環節，所以威爾豬還是決定...

威爾豬 ‧ 2023-09-07

0 Like 0 留言 1673 瀏覽

鐵人賽 Modern Web DAY 6

用不到 30 天學會基本 TypeScript 系列第 6 篇

技術陣列和元組 (Array & Tuple)

陣列 (Array) 陣列是一個包含元素的有序集合，元素可以是相同型別或不同型別。在 TypeScript 中，我們可以使用型別註記法 (型別[...

威爾豬 ‧ 2023-09-06

0 Like 0 留言 2191 瀏覽

鐵人賽 Modern Web DAY 5

用不到 30 天學會基本 TypeScript 系列第 5 篇

技術基本數據型別 (number、string、boolean) + 聯合類型、交叉類型

TypeScript 的型別大致分為下圖幾項，威爾豬會在之後章節陸續講，今天我們先談談最基本的三種數據型別。在 TypeScript 中，基本型別註解都是以...

威爾豬 ‧ 2023-09-05

0 Like 0 留言 2734 瀏覽

鐵人賽 Modern Web DAY 4

用不到 30 天學會基本 TypeScript 系列第 4 篇

技術 TypeScript 配置文件 (tsconfig.json)

建立 tsconfig.json 為了更有效地管理 TypeScript 專案，我們會創建一個配置文件，這在各大打包工具裡安裝 TypeScript 後...

威爾豬 ‧ 2023-09-04

0 Like 0 留言 2762 瀏覽

鐵人賽 Modern Web DAY 3

用不到 30 天學會基本 TypeScript 系列第 3 篇

技術建立 TypeScript 環境

在開始學習和開發 TypeScript 專案之前，我們需要先進行環境的安裝和設置。威爾豬將一步步完成 TypeScript 的環境安裝，創建我們的第一個 Typ...

威爾豬 ‧ 2023-09-03

2 Like 1 留言 3277 瀏覽

鐵人賽 Modern Web DAY 2

用不到 30 天學會基本 TypeScript 系列第 2 篇

技術 TypeScript 的優缺點

優點： JavaScript 存在，TypeScript 就存在還記得昨天的圖嗎？因為 TypeScript 是建立在 JavaScript 之上的程...

威爾豬 ‧ 2023-09-02

0 Like 1 留言 1386 瀏覽

技術前端 SEO 基礎流程

相信各位前端人都一定聽過SEO，也都了解要讓SEO分數高才會讓網頁曝光率更高，甚至衍生出 SSR, SSG 這種概念，無非就是希望在 SEO 分數更高不過 SE...

janlin002 ‧ 2023-02-10

1 Like 2 留言 2113 瀏覽

鐵人賽 Modern Web DAY 30

防禦性 CSS - 建立「防患未然」的匠人心態系列第 30 篇

技術【Day30】完賽心得

就算已經參加過兩屆了，到了這一天還是會有「天啊，沒想到我終於走到終點了啊！」的感覺。如果有讀過我的「Day01 參賽前言」的讀者就會知道，我今年絕對擁有一...

Taiming ‧ 2022-10-14 ‧團隊光明頂

2 Like 0 留言 3874 瀏覽

鐵人賽 Modern Web DAY 29

防禦性 CSS - 建立「防患未然」的匠人心態系列第 29 篇

技術【Day29】CSS 語法 - 失效的 z-index

情境 z-index 可以幫助我們決定當元素重疊的時候，誰在上面，誰在下面。那我們該如何使用 z-index 呢？首先，因為 z-index 只用於「重疊」的...

Taiming ‧ 2022-10-13 ‧團隊光明頂

0 Like 0 留言 1785 瀏覽

鐵人賽 Software Development DAY 28

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

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

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

tainvecs ‧ 2022-10-13

0 Like 0 留言 3901 瀏覽

鐵人賽 Modern Web DAY 27

從Create到React—用來實作使用者介面的JavaScript函式庫系列第 27 篇

技術簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始

本文提及以下重點 GatsbyJS介紹靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...

DannyChen ‧ 2022-10-12 ‧團隊好想工作室 v6.0

2 Like 0 留言 12355 瀏覽

鐵人賽 Modern Web DAY 28

防禦性 CSS - 建立「防患未然」的匠人心態系列第 28 篇

技術【Day28】CSS 語法 - 隱藏網頁上的元件

情境有時候我們會需要隱藏網頁上的元件。舉幾個例子來說，例如我們為了使用者體驗的目的，我們希望在某某情境下，某些按鈕不要被使用者誤觸，或是為了畫面上排版的簡潔...

Taiming ‧ 2022-10-12 ‧團隊光明頂

0 Like 0 留言 2365 瀏覽

鐵人賽 Software Development DAY 27

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

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

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

tainvecs ‧ 2022-10-12

1 Like 0 留言 3589 瀏覽

鐵人賽 Software Development DAY 26

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

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

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

tainvecs ‧ 2022-10-11

1 Like 0 留言 1738 瀏覽

鐵人賽 Modern Web DAY 27

防禦性 CSS - 建立「防患未然」的匠人心態系列第 27 篇

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

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

Taiming ‧ 2022-10-11 ‧團隊光明頂

1 Like 1 留言 3097 瀏覽

鐵人賽 Modern Web DAY 26

防禦性 CSS - 建立「防患未然」的匠人心態系列第 26 篇

技術【Day26】元件高度 - 響應式高度設計

情境響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為...

Taiming ‧ 2022-10-10 ‧團隊光明頂

1 Like 0 留言 1749 瀏覽

鐵人賽 Modern Web DAY 25

防禦性 CSS - 建立「防患未然」的匠人心態系列第 25 篇

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

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

Taiming ‧ 2022-10-09 ‧團隊光明頂

1 Like 0 留言 3683 瀏覽

鐵人賽 Software Development DAY 23

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

技術 [Day 23] 如何規劃前端技術棧 - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 基礎對於整個 web 開發生命週期而言，技術棧是極其重要的第一步。選擇適合的技術棧等同建構一個好的骨幹，它讓...

tainvecs ‧ 2022-10-08

1 Like 0 留言 1787 瀏覽

鐵人賽 Modern Web DAY 24

防禦性 CSS - 建立「防患未然」的匠人心態系列第 24 篇

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

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

Taiming ‧ 2022-10-08 ‧團隊光明頂

2 Like 0 留言 2850 瀏覽

鐵人賽 Modern Web DAY 23

防禦性 CSS - 建立「防患未然」的匠人心態系列第 23 篇

技術【Day23】Grid - 使用 Sticky

情境在網頁內容很豐富的情境中，頁面上放置導覽列是很重要的功能，如下圖：假設這是一個新聞或論壇網站，左邊 aside 部分就是我們的導覽列，上面有網站的 B...

Taiming ‧ 2022-10-07 ‧團隊光明頂

1 Like 0 留言 6979 瀏覽

鐵人賽 Modern Web DAY 22

防禦性 CSS - 建立「防患未然」的匠人心態系列第 22 篇

技術【Day22】Grid - 自動填滿效果

情境 CSS Grid 是一個格線佈局屬性，跟 Flexbox 的使用非常相似，是由外容器和內元件來組成整個結構。以下面結構為例： <div class...

Taiming ‧ 2022-10-06 ‧團隊光明頂

1 Like 1 留言 2532 瀏覽

鐵人賽 Modern Web DAY 21

防禦性 CSS - 建立「防患未然」的匠人心態系列第 21 篇

技術【Day21】Grid - 最小內容大小

情境談到響應式的佈局排版，除了 Flexbox 之外，還有一個不容忽視的重要屬性，就是 Grid。以下圖為例，我們透過 Grid 也能夠很輕易的將主要內容以...

Taiming ‧ 2022-10-05 ‧團隊光明頂

0 Like 0 留言 1822 瀏覽

鐵人賽 Modern Web DAY 20

從Create到React—用來實作使用者介面的JavaScript函式庫系列第 20 篇

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

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

DannyChen ‧ 2022-10-05 ‧團隊好想工作室 v6.0

0 Like 0 留言 1549 瀏覽

鐵人賽 Modern Web DAY 19

從Create到React—用來實作使用者介面的JavaScript函式庫系列第 19 篇

技術從實作To Do List理解Listing State Up(附圖)(上)

本文將以實作To Do List理解Listing State Up包含以下部分 component拆分—圖解 lifting-state說明重要概念具體...

DannyChen ‧ 2022-10-04 ‧團隊好想工作室 v6.0

技術 接口 / 介面 (Interface)

技術 類型別名 (Type)

技術 斷言（Assertion）

技術 任意型別 VS. 未知型別 (any VS. unknown)

技術 Day 1 前言 微前端 Micro Frontend 前世今生

技術 枚舉 / 列舉 (Enum)

技術 陣列的基本方法

技術 陣列和元組 (Array & Tuple)

技術 基本數據型別 (number、string、boolean) + 聯合類型、交叉類型

技術 TypeScript 配置文件 (tsconfig.json)

技術 建立 TypeScript 環境

技術 TypeScript 的優缺點

技術 前端 SEO 基礎流程

技術 【Day30】完賽心得

技術 【Day29】CSS 語法 - 失效的 z-index