web development

使用還是不使用？學習還是不學習？讓我們看看如何完全避免使用jQuery，以及保留使用它的原因。 無論你在JavaScript框架和庫方面有什麼偏好，jQuery在JavaScript生態系統中發揮了重要作用。 幾年前它更受歡迎，現在一些jQuery的需求已經被現代瀏覽器替代（幸運的是！），但這個JavaScript庫仍然被許多人使用。 為什麼jQuery一開始會變得如此受歡迎？首先，jQuery誕生於JavaScript應用程序還不是主流的年代。在2000年代初至中期，JavaScript主要用於賦予網頁中出現的幻燈片和其他小工具（如圖片庫、日期選擇器等）功能。如果過於複雜，JavaScript很難進行許多操作（當然，電腦當時也更慢）。 值得一提的是，jQuery並不是唯一的或第一個庫。那個時候其他庫也非常受歡迎，比如Mootools、YUI、Dojo Toolkit、Scriptaculous和Prototype。jQuery後來可能成為了那些庫中最著名的。 當時的瀏覽器存在許多互操作性問題。我們遇到了很多跨瀏覽器的怪異行為和標準化問題，而jQuery通過創建一個抽象層並處理所有解決方案來幫助我們。 jQuery允許你使用CSS選擇器語法來選擇DOM元素，它非常用戶友好且易於擴展。它使JavaScript動畫變得簡單。 同時，它還簡化了使用AJAX（及其跨瀏覽器差異）的操作，這在時下非常流行的術語中也為jQuery帶來了一定的知名度。 如今，我們已經沒有太多的瀏覽器兼容性問題了，Selectors API和Fetch使瀏覽器標準化了jQuery的兩個最佳功能。 jQuery肯定是一個充滿爭議的主題。有些人說jQuery是過時的遺物，有些人仍然每天使用它。有些人花時間撰寫「為什麼我們不需要jQuery」的文章。 在過去幾年中，它的使用率確實有所下降： 如今，JavaScript的面貌已經截然不同。但是，了解jQuery的用途仍然是有用的。 曾經使用jQuery的功能現在已經有了標準化的瀏覽器API 選擇DOM元素 jQuery的用法： $('.button') 現在我們可以使用Selectors API： document.querySelector('.button') 如果需要多個元素： document.querySelectorAll('.button') 等待DOM加載完成 jQuery的用法： $(document).ready(() => { //... }) DOM的做法： document.addEventListener("DOMContentLoaded", () => { //... }) 為DOM元素添加或移除類 jQuery的用法： el.addClass('big') el.removeClass('big') el.toggleClass('big') DOM的做法： el.classList.add('big') el.classList.remove('big') el.classList.toggle('big') 從DOM中移除元素 jQuery的用法： el.remove() DOM的做法： el.remove() （是的，沒有變化） 更改DOM元素的內容 jQuery的用法： el.text('Hello') el.html('Hello') el.text() el.html() DOM的做法： el.innerHTML = 'Hello' el.textContent = 'Hello' el.innerHTML el.textContent 選擇DOM元素的父元素 jQuery的用法： el.parent() DOM的做法：...

網頁開發一直在不斷演進，每年一月，我都喜歡停下腳步重新評估並觀察這個生態系統。 問題是：2022年初學者應該從哪裡開始學習，才能學到能找到工作的技能呢？ 地圖有變嗎？與去年有不同嗎？ 變革似乎需要很長的時間，但它們可以很微妙，有時候從一年到另一年事情會徹底變化，你甚至都意識不到。 因此，我開始撰寫這篇文章，指導您如何在網頁開發領域中導航。 對於想要跟上生態系統並保持相關性的開發人員來說，這也是很有用的。有什麼新東西你一定要學嗎？ 讓我們開始吧。 先說一下，這是一個高度主觀的路線圖。這不是一個列出了1000種不同技術的路線圖，然後就讓你淚流滿面地愁眉苦臉。 讓我為您挑選最好的技術，相信我，這樣您就可以停止無休止的分析，並繼續前進。 在網頁開發中，我們有3條路線： 前端開發人員 後端開發人員 全棧開發人員 這些角色之間的界線有點模糊。在這篇文章中，我將聚焦於全棧開發人員，這是我最喜歡的專業化領域——在這個領域中，您不需要專攻前端或後端，而是能夠創建出所有展示出來的內容。 積極忽略 首先，讓我們從我們將忽略的內容開始。 在這個路線圖中，我將忽略像UI/UX工程師、可訪問性和其他重要主題這樣更專業的範疇。這些完全是不同的職業，有自己獨特的學習路徑。 您不可能從一開始就假設您需要學習所有東西。 積極排除。 我們將忽略使用Web技術進行移動開發。那是一個完全不同的領域。我們還將忽略一切不屬於網頁開發的趨勢，而是不同類型的開發專業化，比如AI、數據科學、web3等等。 深入研究5個核心技術 我建議深入研究一組核心的5個技術： HTML CSS JavaScript React Next.js 這些5個技術按順序是您需要掌握的5個東西。 您可以用一只手數清楚。 其中3個是基礎。HTML、CSS、JavaScript。您無法避免它們。這些是我們的工具。 HTML定義了內容 CSS定義了我們希望內容呈現的樣子 JavaScript定義了行為 React是我在這裡的首個選擇。 React是一種簡化創建用戶界面的技術。 它以許多不同的方式讓我們的生活更輕鬆。 HTML、CSS和JavaScript沒有其他替代品，但您可以選擇使用其他東西，比如Svelte、Vue、Angular，但我選擇了React。 但是React非常流行，它有一個悠久的歷史和遺產，使它成為事實上的標準。它被使用得如此廣泛，以至於您可以找到一切，每個庫，大量的教程和課程，需要幫助時也不用擔心。 您可以賭一個替代品，但您還可以看看工作市場和React帶來的機會，並選擇它。 現在我們需要最後一個組件。一個網絡應用程序框架。 我們選擇了React，所以我們需要選擇一個與React配合的網絡應用程序框架。 在React和HTML/CSS/JavaScript三者之上，我選擇了Next.js，它可以讓React-based網站和應用程序的服務和前端無縫集成。 所以，我們共同使用的3個核心技術是HTML/CSS/JavaScript，最上面的是非常流行的UI庫React，再加上一個非常流行的框架Next.js。 現在還有更多的東西可以添加到這5個選擇中，但您需要從某個地方開始。 通過這5個選擇，您已經排除了很多其他可能分散注意力、讓您在成為網頁開發者的道路上分心的東西。 讓我再強調一下這個排除。至少在開始時忽略TypeScript。我知道你會一直聽到它，但它對你的旅程並不重要，你可以在未來的任何時候添加它。 JavaScript讓事情變得簡單得多，這對於保持動力至關重要。 從HTML和CSS開始 此時，開始學習並進行實驗。學習HTML，創建網頁。閱讀我的[HTML手冊](https://flaviocopes.com/page/html-handbook/）。多做練習。Codepen是一個很好的工具。 只是不要被“我使用CSS完成了這個”吸引住，有些人用CSS做了一些不可能的事情。我不知道他們是怎麼做到的，這是藝術（如果您喜歡，那很好，但在我們的旅程中不是很有用）。 至於CSS，學習基礎知識。閱讀我的[CSS手冊](https://flaviocopes.com/page/css-handbook/）。並立即開始學習Tailwind，這是一種非常實用且流行的將CSS應用於您的網頁的方法。 CSS可能很復雜，但Tailwind使它變得更簡單。相信我，我從事CSS已有 20 年，使用Tailwind讓我終於能夠在每個項目上都處理好事情。這也是其他很多人的感受。 您應該使用HTML和CSS/Tailwind創建哪些項目呢？嗯，從您的愛好和興趣開始。創建一些隨機的網頁，看看它們在瀏覽器中如何顯示。 創建一個有關狗的網頁，有關足球、橄欖球、棒球的網頁，有關您最喜歡的Netflix系列、最喜歡的音樂家的網頁，等等。重要的是進行實驗。 在HTML和CSS/Tailwind上別太花哨。它們是兔子洞。關於這兩者有很多東西要學。熟悉它們，使用它們來完成任務。 熟悉像VS Code這樣的編輯器，以及終端和Bash shell的基礎知識。學習Git來管理版本。它將為您節省很多時間和麻煩。 添加JavaScript 現在是學習JavaScript的時候了。下載並閱讀我的JavaScript初學者手冊。 HTML和CSS定義了內容和呈現方式，而JavaScript是一門程式語言。 使用JavaScript，我們可以開始玩樂。 基礎知識有點……無聊並且可能會令人困惑，因為有很多理論和新概念。但這是您在網頁開發中最常使用的東西。因此，掌握它是至關重要的。 逐步將JavaScript添加到您的網頁中。 使用JavaScript，您將能夠為您的網頁添加一些互動性。您將探索DOM，這是瀏覽器讓我們與頁面上的元素進行交互的方式。 您將創建您的第一個表單。 在創建第一個表單之後，您將需要將表單數據發送到某個地方。 想像一下，您建立了一個電子報註冊表單。您想要將電子郵件發送到某個地方以便存儲它。...

Babel 是 Web 開發者工具箱中令人驚艷的一員。它是一個很棒的工具，已經存在很長一段時間，但現在幾乎每個 JavaScript 開發者都依賴它，這種情況還會持續，因為 Babel 現在不可或缺，並為所有人解決了一個大問題。 Babel 簡介 安裝 Babel 一個示例 Babel 配置 Babel 預設 env 預設 react 預設 更多關於預設的資訊 使用 Babel 與 webpack 本文介紹的是 Babel 7，目前的穩定版本。 Babel 簡介 Babel 是一個很棒的工具，已經存在很長一段時間，但現在幾乎每個 JavaScript 開發者都依賴它，這種情況還會持續，因為 Babel 現在不可或缺，並為所有人解決了一個大問題。 哪個問題？ 這是每個 Web 開發者肯定都遇到過的問題：JavaScript 的某個特性在最新版本的瀏覽器中可用，但在舊版本中卻不行。或者 Chrome 或 Firefox 實現了它，但 Safari iOS 和 Edge 卻沒有。 例如，ES6 引入了箭頭函數： [1, 2, 3].map((n) => n + 1) 這在現代瀏覽器中都有支持。但 IE11 不支持它，也不支持 Opera Mini（怎么知道的？通過檢查 ES6 兼容性表）。 那麼你應該如何解決這個問題呢？你是應該放棄那些舊的/不兼容的瀏覽器，還是應該編寫舊的 JavaScript 代碼，讓所有用戶都開心？...

學習如何使用 CSS 的 calc() 函式 calc() 函式可以讓您對數值進行基本的數學運算，尤其在需要將長度值加減百分比時非常有用。 以下是它的工作方式： div { max-width: calc(80% - 100px) } 它會返回一個長度值，因此可以在任何需要像素值的地方使用。 您可以進行以下運算： 使用 + 進行加法 使用 - 進行減法 使用 * 進行乘法 使用 / 進行除法 注意：在進行加法和減法時，運算符號周圍的空格是必需的，否則它將不按預期工作。 範例： div { max-width: calc(50% / 3) } div { max-width: calc(50% + 3px) }

如何在 CSS 中使用填充 (padding) padding 是 CSS 中常用的屬性，用於在元素的內側添加空間。 記住： margin 會在元素邊框外添加空間 padding 會在元素邊框內添加空間 特定 padding 屬性 (Specific padding properties) padding 有 4 個相關屬性，可以一次性修改單個邊緣的填充效果： padding-top padding-right padding-bottom padding-left 使用這些屬性非常簡單，不會混淆。例如： padding-left: 30px; padding-right: 3em; 使用 padding 簡寫 (Using the padding shorthand) padding 是一個簡寫形式，用於同時指定多個填充值，根據輸入的值的數量不同，其行為也不同。 單一值 (1 value) 使用單一值會將其應用於所有填充：上，右，下，左。 padding: 20px; 2 個值 (2 values) 使用 2 個值將第一個值應用於上和下，第二個值應用於左和右。 padding: 20px 10px; 3 個值 (3 values) 使用 3 個值將第一個值應用於上，第二個值應用於左和右，第三個值應用於下。 padding: 20px 10px 30px; 4 個值 (4 values) 使用 4 個值將第一個值應用於上，第二個值應用於右，第三個值應用於下，第四個值應用於左。...

CSS 是一種語言，用於定義網頁在瀏覽器中的視覺外觀。由於最新的功能，CSS 的使用變得更加簡單。 什麼是 CSS CSS 的簡要歷史 CSS 的外觀 分號 格式和縮排 如何在網頁中加載 CSS 1：使用 link 標籤 2：使用 style 標籤 3：內聯樣式 什麼是 CSS CSS（層疊樣式表的縮寫）是用於為 HTML 文件添加樣式的語言，它告訴瀏覽器如何渲染頁面上的元素。 在 CSS 出現之前，人們希望能夠為他們的網頁添加樣式，因為當時的網頁看起來都很相似和“學術”。在個性化方面，你不能做許多事情。 HTML 3.2 引入了內聯定義顏色的選項，以及像 center 和 font 這樣的呈現標籤，但它很快變成了一個不理想的情況。 CSS 讓我們將所有與展示相關的內容從 HTML 移動到 CSS 中，這樣 HTML 就可以恢復為定義文檔結構而不是在瀏覽器中的外觀的格式。 CSS 不斷演進，5年前使用的 CSS 可能已經過時了，因為新的慣用 CSS 技術和瀏覽器的變化。 很難想象 CSS 誕生時的情況以及網頁有多麼不同。 當時，我們有幾個競爭的瀏覽器，主要有 Internet Explorer 和 Netscape Navigator。 通過使用 HTML，頁面被樣式化，使用特殊的呈現標籤（例如 bold）和特殊的屬性，其中大部分現在已被棄用。 這意味著你只能有有限的自定義機會。 大部分的樣式決策都由瀏覽器決定。 此外，你要為它們之一構建一個網站，因為每個瀏覽器都引入了不同的非標準標籤以提供更多的功能和機會。 不久後，人們意識到需要一種方法來跨瀏覽器樣式化頁面。 1994 年提出了最初的想法，1996 年，CSS 發布了第一個版本，即 CSS Level 1（“CSS 1”）。...

如何在 CSS 中使用系統字型，以提升您的網站速度並為使用者提供更好的體驗和網頁載入時間 一點歷史 現在 網頁字型的影響 系統字型登場 著名的網站使用系統字型 我決定使用系統字型，給我程式碼 關於 system-ui 的一點說明 使用 @font-face 規則來使用字型變化 閱讀更多 一點歷史 多年來，網站只能使用所有電腦上可用的字型，例如 Georgia、Verdana、Arial、Helvetica、Times New Roman。其他字型無法保證在所有網站上運作。 如果你想使用花俏的字型，你就得使用圖片。 在 2008 年，Safari 和 Firefox 引入了 @font-face CSS 屬性，線上服務開始提供 Web 字型的授權。第一個是 2009 年的 Typekit，後來由於免費提供，Google Fonts 變得非常受歡迎。 @font-face 在所有主要瀏覽器上實現，現在是現代設備的標準功能。如果你是年輕的網頁開發者，你可能沒有意識到，在 2012 年我們仍然有文章解釋這種新的 Web 字型技術。 現在 現在你可以使用任何你想使用的字型，無論是依賴於像 Google Fonts 這樣的服務，還是提供自己的字型進行下載。 你可以這麼做，但你應該這麼做嗎？ 如果你有選擇的權利（這意味著你不是在實現客戶提供的設計），你可能會想好好考慮一下，回歸到基本（但仍具有風格！）。 網頁字型的影響 在你的網頁上載入的每個內容都有一個成本。這個成本在移動設備上特別明顯，因為你所需的每個位元組都會影響載入時間和使用者消耗的頻寬量。 在內容渲染之前，字型必須被載入，因此您需要在用戶能夠閱讀您所寫的任何單詞之前等待該資源載入完成。 但網頁字型是提供出色的用戶體驗的一種方式，通過良好的排版。 系統字型登場 作業系統具有優秀的預設字型。 系統字型具有速度和性能上的優勢，而且能夠減少網頁大小。 但是，它們讓您的網站對任何查看該網站的人來說都非常熟悉，因為他們每天都在使用自己的電腦或移動設備上看到相同的字型。 它實際上就是一種原生字型。 由於它是系統字型，所以保證看起來很棒。 著名的網站使用系統字型 您可能知道其中一些著名的網站，例如： GitHub Medium Ghost Bootstrap Booking.com 他們多年來一直使用系統字型。 甚至 WordPress 控制台 - 用於運行數百萬個網站的平台 - 也使用系統字型，而以閱讀為主的 Medium 也決定使用系統字型。...

學習如何使用 CSS 更改元素背景 可以使用多個 CSS 屬性來更改元素的背景： background-color 背景顏色 background-image 背景圖像 background-clip 背景區域 background-position 背景位置 background-origin 背景原點 background-repeat 背景重複 background-attachment 背景附著 background-size 背景大小 還有一個縮寫屬性 background，可以縮短定義並將它們分組在一行。 background-color 接受顏色值，可以是顏色關鍵字，也可以是 rgb 或 hsl 值： p { background-color: yellow; } div { background-color: #333; } 除了使用顏色，你還可以使用圖像作為元素的背景，指定圖像位置的 URL： div { background-image: url(image.png); } background-clip 可讓你決定背景圖片或顏色的區域。默認值為 border-box，該值延伸到邊框外緣。 其他值包括： padding-box：將背景延伸到填充邊緣，不包括邊框。 content-box：將背景延伸到內容邊緣，不包括填充。 inherit：應用父元素的值。 當使用圖像作為背景時，你需要使用 background-position 屬性來設置圖像的放置位置。left、right、center 都是 X 軸的有效值，top、bottom 是 Y 軸的有效值： div { background-position: top right; } 如果圖像比背景小，則需要使用 background-repeat 屬性設置行為。它應該在所有軸上重複 repeat-x、repeat-y，或者在所有軸上上重複 repeat？後者是默認值。還有一個值 no-repeat。...

學習CSS虛擬元素的基礎知識 虛擬元素用於樣式化元素的特定部分。 它們以兩個冒號::開頭。 有時你會在代碼中看到它們用單個冒號表示，但這只是一種為了向後兼容而支持的語法。應該使用兩個冒號來區分它們和虛擬類別。 ::before和::after可能是最常用的虛擬元素。它們用於在元素之前或之後添加內容，例如圖標。 以下是虛擬元素的列表： 虛擬元素 目標 ::after 在元素之後創建一個虛擬元素 ::before 在元素之前創建一個虛擬元素 ::first-letter 可用於樣式化一塊文本的首個字母 ::first-line 可用於樣式化一塊文本的首行 ::selection 標記用戶選中的文本 讓我們來做個例子。假設您想要設置段落的第一行字體大小稍大，這在印刷排版中很常見： p::first-line { font-size: 2rem; } 或者您想讓首個字母加粗： p::first-letter { font-weight: bolder; } ::after 和 ::before 則稍微有點不直觀。我記得在使用 CSS 添加圖標時使用過它們。 使用 content 屬性來在元素之後或之前插入任何形式的內容： p::before { content: url(/myimage.png); } .myElement::before { content: "嘿嘿！"; }

學習CSS偽類的基礎知識 偽類是預定義的關鍵字，用於根據元素的狀態或對特定子元素進行選擇。 它們以單冒號:開頭。 它們可以作為選擇器的一部分使用，非常有用，例如在活動或訪問鏈接上更改樣式，懸停時更改樣式，聚焦或對第一個子元素或奇數行進行目標。在許多情況下非常方便。 以下是您可能會使用的最常用的偽類： 偽類 目標 :active 正在被用戶激活的元素（例如點擊）。通常用於鏈接或按鈕 :checked 已啟用的複選框，選項或單選按鈕輸入類型 :default 一組選項中的默認選項（例如，在select或單選按鈕中的選項） :disabled 已禁用的元素 :empty 沒有子元素的元素 :enabled 已啟用的元素（與:disabled相反） :first-child 兄弟姐妹中的第一個子元素 :focus 具有焦點的元素 :hover 鼠標懸停的元素 :last-child 兄弟姐妹中的最後一個子元素 :link 尚未訪問過的鏈接 :not() 不匹配傳遞的選擇器的任何元素。例如:not(span) :nth-child() 匹配指定位置的元素 :nth-last-child() 從末尾開始匹配指定位置的元素 :only-child 沒有任何兄弟姐妹的元素 :required 具有設置了required屬性的表單元素 :root 表示html元素。就像定位html，但更具體。在CSS變量中很有用。 :target 匹配當前URL片段的元素（用於頁面內導航） :valid 在客戶端成功驗證的表單元素 :visited 已訪問過的鏈接 讓我們舉個例子。實際上是一個常見的例子。您想要樣式化一個鏈接，因此創建一個CSS規則以定位a元素： a { color: yellow; } 事情看起來很正常，直到您點擊一個鏈接。當您點擊鏈接時，鏈接會返回預定義的顏色（藍色）。然後，當您打開鏈接並返回頁面時，鏈接現在是藍色的。 為什麼會這樣？ 因為點擊鏈接會改變狀態，並進入:active狀態。當它被訪問時，它處於:visited狀態。永遠如此，直到用戶清除瀏覽歷史。 因此，為了正確地在所有狀態下將鏈接設置為黃色，您需要編寫： a, a:visited, a:active { color: yellow; } :nth-child() 值得特別一提。它可用於通過 :nth-child(odd) 和 :nth-child(even) 定位奇數或偶數位置的子項。...