iT邦幫忙

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

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

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

鐵人賽 Modern Web DAY 18

技術 #18 JS: Intro to function

What is function? Simple explanation: when you find out that you’re repeating c...

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 8

技術 Day 8. Compare × G2 × Slate

這一篇是這一系列 Libraries 比較文實質性的最後一篇了,在下一篇稍做總結以後接著我們就要正式進入到 source-code 解析的篇章了! 這篇我們主...

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

技術 D3JsDay08做為視覺化圖表的燃料,從網路擷取檔案的資料—fetch Data

淺談原始碼 D3包裝了Javascript的fetchAPI來擷取資料我們這裡可以看到D3Js的原始碼為以下片段,不難看出它是return了fetchAPI f...

鐵人賽 Modern Web DAY 12

技術 #12 JavaScript Introduction

What is JavaScript? HTML is like the structure/bone of our body; JavaScript is...

鐵人賽 Modern Web DAY 13

技術 Day 13. slate × Interfaces × Positioning

緊接著這一篇要來探討 slate 是如何實現『定位』這件事的。 在開發以 text 文字資料模型為主的功能時,有辦法精準地定位到特定的文字位置,甚至是文字集合...

鐵人賽 Modern Web DAY 23

技術 類別封裝 ( Class Encapsulation )

類別封裝是一種將類別的內部細節隱藏起來,確保類別的屬性和方法在外部程式碼中不被隨意訪問,提高程式碼的可維護性和可讀性,同時提供了一定程度的安全性。 存取修飾符...

鐵人賽 Modern Web DAY 6

技術 #6 CSS Table x Stock Price

An ordinary CSS table looks like Ways of making CSS table beautiful 1. Change...

鐵人賽 Modern Web DAY 16

技術 #16 JS: loop - Part 1

while statement If the statement is true, the code inside of {} would be execute...

鐵人賽 Modern Web DAY 20

技術 Day 20. slate × Operation × Interface

我們接下來就要進入到 slate 世界裡的另一大領域: Operations 。 這一整段章節其實也是筆者準備整個系列文章中數一數二期待的章節。因為在面對 W...

鐵人賽 Modern Web DAY 10

技術 斷言(Assertion)

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

鐵人賽 Modern Web DAY 24

技術 #24 JS: HTML DOM Events - Part 2

For the topic today, I can't fully understand the logic that it works.So forgive...

鐵人賽 自我挑戰組 DAY 25

技術 [Day 25] 網路常識 - (11) HTTP 的發展史 - 簡單易用的 HTTP 0.9 ~ 1.1

HTTP 發展史簡介 今天又是新的網路常識主題: HTTP,我會就我所知道的來介紹 HTTP 的發展史,主要介紹 HTTP 0.9 ~ HTTP 3.0 的時空...

鐵人賽 Modern Web DAY 11

技術 #11 CSS3 Flexbox: RWD

How do RWD control columns displaying on devices of different pixels ? First of...

鐵人賽 Modern Web DAY 17

技術 void VS. never

在上一個章節中,我們知道如果函式沒有返回值的話,可以使用 void 型別,今天我們來比較 void 和 never 的不同的情境和用途,雖然它們看起來相似,但它...

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 30

技術 Day 30. Goal × 微結語

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

鐵人賽 自我挑戰組 DAY 24

技術 [Day 24] 網路常識 - (10) TCP connection 沒有你想像的簡單! 細談大量 TCP 連結的效能問題和資安問題

在建立 TCP connection 時,實際情況不是發出一個 request,server 就會馬上處理,可能同時還有許多 user 想建立 TCP conn...

鐵人賽 Modern Web DAY 7

技術 陣列的基本方法

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

鐵人賽 Modern Web DAY 13

技術 Utility 型別 Ⅰ

TypeScript 提供了多種內建的 Utility 型別,它是一組 內建的型別操作工具,可以幫助我們更輕鬆、更有效率地進行型別操作,今天威爾豬先介紹基本且常...

鐵人賽 Modern Web DAY 15

技術 JSON to TS (Vscode 套件)

在前面的章節我們介紹了使用 interface 來聲明物件的結構和形狀,但如果我們是要接收從 api 上取得回來的資料 (我們使用 TDX 的觀光資訊 隨便其中...

鐵人賽 Modern Web DAY 24

技術 模組 & 命名空間 ( Modules & Namespaces )

相信使用 ES6 的小夥伴們對模組都不陌生,現代前端框架也都使用模組在運作。而模組和命名空間是兩種組織和封裝程式碼的方式,雖然它們都有類似的目標,但它們在某些方...

技術 前端 SEO 基礎流程

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

鐵人賽 Modern Web DAY 6

技術 第 6 幅 - 圖形應用:旋轉!變形!我閉著眼~

標題不知道會不會透露了我的年紀哈哈哈,在下標時不知道為什麼腦袋浮現旋轉、跳躍,我閉著眼!雖然閉著眼是寫不出 code 的~ 聽歌配文章 旋轉!旋轉!旋轉!Rot...

鐵人賽 Modern Web DAY 14

技術 #14 JS: create a calculator by prompt()

Final Calculator Design <!DOCTYPE html> <html> <head> <tit...

鐵人賽 Modern Web DAY 19

技術 非同步處理 Ⅰ (Promise)

在說明 Promise 前,首先我們要知道為什麼需要有 Promise。我們知道 setTimeout() 是屬於非同步的一種,如果我們需要第一個執行完成後才執...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06 CSS <複合選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器本日將將繼續說明複合選擇器 複合選擇器可以更準確更高效的選擇元素(標籤) 是由兩個或多個基礎選擇器透過不同方式組合而...