web development

如何使用CSS的filter屬性 濾鏡允許我們對元素進行操作。 你通常可以在Photoshop或其他圖片編輯軟件中進行的操作，像是更改透明度、亮度等等。 使用filter屬性。這是一個對圖片應用的例子，但這個屬性可以用於任何元素： img { filter: <something>; } 你可以在這裡使用各種不同的值： blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() url() 注意每個選項後面的括號，因為它們都需要一個參數。 例如： img { filter: opacity(0.5); } 這意味著圖片將是50%透明，因為opacity()接受介於0到1之間的值，或者是一個百分比。 你也可以同時應用多個濾鏡： img { filter: opacity(0.5) blur(2px); } 現在讓我們詳細介紹每個濾鏡。 blur() 對元素的內容進行模糊處理。你需要傳遞一個值，以px、em或rem表示，用於確定模糊半徑。 例子： img { filter: blur(4px); } opacity() opacity()接受介於0到1之間的值，或者是一個百分比，並根據它來確定圖片的透明度。 0或0%表示完全透明。 1、100%或更高表示完全可見。 例子： img { filter: opacity(0.5); } CSS還有一個opacity屬性，但filter可以根據實現方式進行硬件加速，所以應該優先使用filter。 drop-shadow() drop-shadow()在元素後面顯示一個陰影，該陰影遵循alpha通道。這意味著如果你有一個透明的圖片，在圖片的形狀上應用陰影，而不是在整個圖片框上應用陰影。如果圖片沒有alpha通道，陰影將應用於整個圖片框。 它接受至少2個參數，最多5個： 偏移X設置水平偏移量。可以是負數。 偏移Y設置垂直偏移量。可以是負數。 模糊半徑，可選，設置陰影的模糊半徑。它的默認值為0，表示不模糊。 擴散半徑，可選，設置擴散半徑。以px、rem或em表示。 顏色，可選，設置陰影的顏色。 你可以只設置顏色而不設置擴散半徑或模糊半徑。CSS會將該值理解為顏色而不是長度值。 例子： img { filter: drop-shadow(10px 10px 5px orange); } img { filter: drop-shadow(10px 10px orange); } img { filter: drop-shadow(10px 10px 5px 5px #333); } grayscale() 使元素變為灰色。...

Gatsby是一個使用React構建應用程序和網站的平台。 它是一個允許你使用一系列技術和實踐來構建的工具，這些技術和實踐被統稱為JAMstack。 Gatsby是當前前端開發領域中最火熱的工具之一。為什麼呢？我認為有以下幾個原因： “JAMstack"方法用於構建Web應用程序和網站的大幅增長 行業中對於"Progressive Web Apps”（漸進式Web應用程序）技術的快速采用，這也是Gatsby的關鍵功能之一 它是使用React和GraphQL構建的，這兩個技術非常流行和備受追捧 它功能強大 它的速度很快 文檔很好 網絡效應（有人使用它，創建站點，製作教程，更多人了解它，形成一種循環） 一切都是JavaScript（不需要學習新的模板語言） 它隱藏了複雜性，但允許我們逐步定制每一步 以上都是很好的優點，Gatsby絕對值得一試。 它是如何工作的？ 使用Gatsby，您可以使用React組件來構建應用程序。 您通常會使用Markdown編寫在站點中呈現的內容，但您也可以使用任何類型的數據源，例如無頭CMS或像Contentful這樣的Web服務。 Gatsby會構建站點，並將其編譯為靜態HTML，可以部署在任何Web服務器上，例如Netlify、AWS S3、GitHub Pages、常規託管提供商、PAAS等。您只需要找一個可以提供普通HTTP頁面和內容給客戶端的地方。 我在上面的列表中提到了漸進式Web應用程序。Gatsby會自動將您的站點生成為PWA，並使用服務工作器加快頁面加載和資源緩存。 您可以通過插件來增加Gatsby的功能。 安裝 您可以在終端中運行以下命令安裝Gatsby： npm install -g gatsby-cli 這將安裝gatsby命令行工具。 （當有新版本時，可以使用相同的命令進行更新） 您可以運行以下命令創建一個新的"Hello World"站點： gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world 此命令將在mysite文件夾中創建一個全新的Gatsby站點，使用位於https://github.com/gatsbyjs/gatsby-starter-hello-world的starter。 Starter是您可以基於的示例站點。另一個常見的starter是default，可在https://github.com/gatsbyjs/gatsby-starter-default上找到。 您可以在這裡找到所有可用的starter的列表 運行Gatsby站點 在終端完成安裝starter之後，可以運行以下命令來運行網站： cd mysite gatsby develop 這將在本地主機的8000端口上啟動一個新的Web服務器並提供網站。 以下是我們的Hello World starter的運作示例： 檢查站點 如果用您喜歡的代碼編輯器（我使用VS Code）打開您創建的站點，您會發現有3個文件夾： .cache：一個包含Gatsby內部代碼的隱藏文件夾，您在現在不需要更改其中的任何內容 public：在構建站點後包含生成網站的靜態文件 src：包含React組件的文件夾，這裡只有index組件 static：將包含靜態資源，例如CSS和圖片 現在，對默認頁面進行簡單的更改非常容易，只需打開src/pages/index.js文件，將“Hello World！”更改為其他內容，然後保存。網頁應立即熱重載該組件（這意味著網頁實際上不會刷新，但內容會更改 - 這是由底層技術支持的一個技巧）。 要添加第二個頁面，只需在此文件夾中創建另一個.js文件，與index.js具有相同的內容（調整内容）並保存。 例如，我創建了一個名為second.js的文件，具有以下內容： import React from 'react' export default () => <div>Second page!...

主要介紹了REST與GraphQL之間的差異以及在什麼情況下使用其中之一。 由於REST是建立API的一種常用方法，比GraphQL更為廣泛使用，所以可以假設你對其相當熟悉，現在讓我們看看GraphQL和REST之間的差異。 REST是一種概念 REST是一種事實上的架構標準，但沒有具體的規範，有許多非官方定義。而GraphQL有一個規範草案，它是一個查詢語言，而不是一種架構，其周圍建立了一套明確的工具集（和一個蓬勃發展的生態系統）。 REST是建立在現有架構之上的，最常見的情況是使用HTTP。而GraphQL則正在構建自己的一套約定，這既可以是優點，也可能不是優點。因為REST可以通過HTTP層的緩存功能免費獲益。 單一端點 GraphQL只有一個端點，您將所有的查詢都發送到該端點。而REST則使用多個端點，並使用HTTP 動詞來區分讀取操作（GET）和寫入操作（POST，PUT，DELETE）。GraphQL不使用HTTP動詞來確定請求類型。 根據需求量身定制 在REST中，您通常無法選擇服務器返回的數據，除非服務器實現了使用稀疏字段集進行部分響應的功能，並且客戶端使用該功能。API維護者無法強制執行此類過濾。 除非您也控制API服務器並為每個不同的請求定制響應，否則API通常會返回比您所需的更多信息。 在GraphQL中，您明確要求您所需的信息，您不會“選擇退出”完整的默認響應，而需要選擇您想要的字段。 這有助於節省服務器的資源，因為您可能需要更少的處理，同時也節省了網絡流量，因為要傳輸的有效載荷更小。 一個很好的例子來形象地展示這一點是一個Pizza端點的示例（我是義大利人，一個披薩的例子很完美）。 如果你調用GET /pizza/margherita，你會得到一個馬若里披薩。 如果你調用GET /pizza/napoli，你會得到一個拿坡里披薩。 如果你有30個不同的口味，你將有30個端點（除非你把披薩名稱作為參數傳遞給GET /pizza，例如）。 但也許你想要一種特定的披薩，但卻不要一種你不喜歡的成分。向服務生提出這個要求很容易，但對於REST端點來說有點困難。 一個GraphQL端點將讓你調用/pizza，然後你可以要求特定的成分，來打造你想要的完美披薩。 GraphQL使得監測字段使用變得容易 在REST中通常無法確定客戶端是否需要某個字段，因此在進行重構或淘汰時，無法確定實際使用情況。 GraphQL使得追踪客戶端使用的字段成為可能。 訪問嵌套數據資源 GraphQL允許進行更少的網絡調用。 來看一個例子：您需要訪問一個人的朋友的名字。如果您的REST API公開了一個/person端點，該端點返回一個包含朋友ID列表的人物對象，通常可以先通過GET /person/1獲取人物信息，其中包含朋友的ID列表。 除非該人的朋友列表已經包含有朋友的名字，否則對於有100個朋友的情況，您需要對/person端點發起101個HTTP請求，這是一個巨大的時間成本，也是一個資源密集型操作。 而GraphQL只需要一個請求，該請求要求查詢該人物的朋友的名字。 類型 REST API基於無法提供類型控制的JSON。GraphQL具有一個類型系統。 哪一個更好？ 全球各地的組織都在質疑他們的API技術選擇，他們正試圖找出從REST遷移到GraphQL是否適合他們的需求。 當您需要公開複雜的數據表示且客戶端可能只需要數據的子集，或者他們定期執行嵌套查詢以獲取所需的數據時，GraphQL非常適合。 和編程語言一樣，沒有絕對的贏家，一切都取決於您的需求。 同時，我還想說一點：您可以同時使用兩種方法。 您可以根據您的需求混合使用REST和GraphQL，有時這是最好的方法。

JSONP 是從第三方服務器加載數據的一種方式，可以繞過同源策略。 默認情況下，你無法從不是當前域名和端口的地方加載 JSON 文件並在應用程序中使用它。 你可能將應用程序從 localhost:8080 服務，但API是由另一個運行在 localhost:2001 上的Node.js應用程序提供的。 或者你可能希望在瀏覽器中訪問一些以JSON格式提供的公共API。 使用API是一個常見需求，在瀏覽器中，由於安全原因，由於同源策略，默認情況下必須禁止這種行為，以防止可能的問題。 JSONP 在 CORS 存在之前誕生。如今，CORS 是一種更（也是唯一一種？）明智的方法來解決這個問題，但你也需要了解 JSONP，因為它可能在你的情況下更好。此外，自 JSONP 誕生以來，一些安全問題已被發現，所以你需要了解使用 JSONP 的所有 安全問題。 JSONP 僅支持 GET HTTP 方法，因此它比CORS要不那麼強大。 它是如何工作的 服務器必須支持 JSONP，例如 Express 中可以使用 Response.jsonp() 方法，它類似於 Response.json() ，但處理 JSONP 回調： res.jsonp({ username: 'Flavio' }) 在客戶端，你可以加載指定了回調函數的端點： <script src="http://localhost:2001/api.json?callback=theCallbackFunction"></script> 回調函數必須是全局的，它將接收 JSON 數據： const theCallbackFunction = (data) => { console.log(data) } jQuery 通過在其 ajax() 方法中封裝 JSONP，簡化了此方法： $.ajax({ url: 'http://localhost:2001/api.json', dataType: 'jsonp', success: (data) => { console....

我寫這篇文章是因為我在Twitter上看到很多人在問這個問題。如果您使用Linux或Windows，這個問題對您來說根本不成問題。此外，您並不需要一台MacBook來學習網頁開發，您可以使用任何電腦。 蘋果目前推出了兩款筆記本電腦，第一款是MacBook Air，然後是MacBook Pro。 我兩種都用過，所以讓我告訴你我會選擇哪一款。 如果僅考慮功率和速度，您會選擇自己負擔得起的最強大的MacBook Pro。 但還有可攜性：當您需要搬動它、上下班或者想要帶著它去徒步旅行時，16英寸的MacBook Pro能否放進您的背包中？因為誰知道，您可能需要做三分鐘的工作來維持業務運行，而在露營時。有時候我也會碰到這種情況。 這時MacBook Air看起來是一個不錯的選擇。它更輕，更小。從背包中減去的每一克重都會讓體驗更好。 MBA M2 2022重1.24公斤，MBP M2 13英寸重1.4公斤，MBP M1 14英寸重1.6公斤。 16英寸的機型不在比較範圍內，因為它重2.1公斤，屬於一個不同的類別。我曾經用過一台2019年的16英寸，它太大、太重了，無法舒適地搬動。 我現在使用的是MacBook Pro M1 14英寸，這是一種很好的妥協，因為它比Air多一個USB端口（3個對比2個），還有HDMI輸出（對我來說沒有用）和SD卡槽（對我很重要），但這是一個困難的選擇。 USB端口非常重要，因為當您在家或辦公室時，其中一個端口通常會連接到外部顯示器上，但如果您的顯示器提供更多的USB端口，您可以直接使用它們。 由於MBA更便宜（根據規格而定，價格大約為一半），並且作為網頁開發人員解決了99％的需求，您無論選擇哪一款都不會錯。 特別是如果您喜歡旅行或經常攜帶。

關於 node_modules 資料夾大小辯論的我的想法 我曾對於 node_modules 資料夾的大小感到懊惱。一個 JavaScript 應用程式怎麼可能在沒有我加入任何一行程式碼的情況下就有100、200MB的大小呢？我只是執行 npx create-react-app todolist，然後下載了218.7MB的東西！（我現在剛剛檢查了一下，這是真的數字）。 每當你思考 node_modules 的大小時，請想想我們程式開發人員投入的無數工時。 這是完全開源的軟體，是你可以檢視和學習的軟體。它是由世界各地的程式開發人員和公司慷慨捐贈的。它是一個全球性的努力，某人將它變得非常簡單好用。首先是 npm 這個工具，接著才是 npm 公司。 我們都同意將自己的程式碼發布到他們的伺服器上，人們在上面進一步建立了其他東西，直到我們得到了快速入門工具（如 create-react-app 或 Vue CLI 等），可以免費獲得大量功能。 在 TB 級快速儲存的時代，200MB 的大小算太大嗎？ 請記住，在這個大小中，絕大多數是測試、文件等等。而且剩下的程式碼絕大多數只會在開發環境中使用。這並不意味著你會將一個200MB的應用程式提供給用戶，我認為這一點是深入人心的。 我以 create-react-app 為例，那 200MB 中有些什麼？ 首先，create-react-app 包含了： 編譯器 (Babel) 打包工具 (Webpack) 程式碼壓縮工具 程式碼檢查工具 (ESLint) 樣式流程工具 (SCSS) 具有熱重載功能的開發伺服器 測試執行工具 (Jest) 如果你想要開發 Mac 或 iPhone 應用程式，你必須安裝蘋果提供的 IDE，即 Xcode。Xcode 的大小（等一下……）幾乎是 14GB。那是 node_modules 的 70 倍大小。確實，我們在比較兩件不同的事物，但 node_modules 包含了你開始編寫程式碼所需的一切。你可以搭配大小為 200MB 的 VS Code 或大小為 30MB 的 Sublime Text 使用，都沒關係，並不是必須的（而你卻無法在沒有 Xcode 的情況下創建 iOS/macOS 應用程式）。...

需要懂數學才能做程式設計嗎？ 不一定需要。即使在學校的數學成績不好，你仍然可以成為一個優秀的程式設計師。 我自己從事程式設計已經有20年了，從來沒有因為忘記需要的數學知識而去翻數學書。我在高中和大學時學習了很多數學，那些內容非常高深抽象，甚至我現在都忘記了學習的目標是什麼（除了通過考試）。 有一種普遍的觀點是，要成為一個優秀的程式設計師，你必須擁有出色的數學能力。這種觀點可能是因為最早從事計算機編程的人大多數是數學家，主要是因為當時還沒有“計算機編程師”的專業學校。當然，計算機科學或計算機工程專業涉及許多數學知識，但這些對實際應用來說並非必須。計算機科學學位中90%的內容都是非常有趣但鮮有實用價值的。你需要數學來理解底層理論，但在日常編程中並不是必需的。 我的論點基本上是針對網頁開發這個領域而言。當然，有些編程工作需要數學。例如，在三維渲染引擎、地理信息系統應用、密碼學/區塊鏈/人工智能/機器學習等領域工作所需的數學知識肯定是很多的，但這些都是非常特定的數學知識，並不是在學校裡教授的。任何涉及底層圖形或遊戲編程的工作也需要數學知識，你需要在嘗試進行這方面工作之前先學習相應的數學知識。數學也對理解算法的複雜度有所幫助，但在最初幾年的編程中，你不太可能需要創造出新的算法。 然而，你需要擅長解決問題。我認為學校數學教育教會你如何解決問題，但其他愛好，比如玩數獨也同樣能訓練你解決問題的能力。 當然，你需要掌握一些基本的數學概念，如微積分、代數和邏輯，但只是一些基礎知識罷了。你不需要了解複數、概率、方程、圖形、指數與對數、極限、導數、積分、微分方程等任何複雜的知識。 不要聽信那些門戶守衛的話：如果他們告訴你因為數學不好，你就不能成為程式設計師，那就不要理他們。你總是可以在途中學到你需要的一切。保持學習的態度比已經知道一切更加重要。 再次強調，我講的是網頁開發，而不是需要數學知識的圖形學或特定應用領域。

Python 程式語言介紹系列 Python 正在吞噬著整個程式設計世界。它正以一種史無前例的方式在流行度和使用上不斷成長。 Python 在各種場景中都表現出色，既能用於「Shell 腳本」、「任務自動化」，也適用於「網頁開發」等基本應用。 Python 是「數據分析」和「機器學習」的首選程式語言，同時也能用於遊戲開發和嵌入式設備工作。 更重要的是，它是世界各地大學入門的「計算機科學課程」中的首選程式語言。 許多學生將 Python 作為他們的第一個程式語言學習。許多人正在學習它，許多人將在未來學習它。對於他們中的許多人來說，Python 將是他們唯一需要的程式語言。 由於這種獨特的地位，Python 很可能在未來持續成長。 這種程式語言簡單易懂、表達力強，並且相當直觀。 Python 生態系統龐大。幾乎可以想像到的所有功能都已經有相應的庫。 Python 是一種高級程式語言，對於初學者來說非常適合，因為它有直觀的語法、龐大的社群和繁榮的生態系統。 它也受到來自不同領域的專業人士的青睞。 從技術上講，Python 是一種解釋性語言，不像 C 或 Java 等編譯語言有中間編譯階段。 像許多解釋性語言一樣，它是動態類型的，這意味著您不需要指示使用的變數類型，並且變數不會結合特定的類型。 這有優點和缺點。特別是，您可以更快地編寫程式，但另一方面，在預防可能的錯誤方面，工具的幫助較少，只有在運行時才能發現某些問題。 Python 支持各種不同的編程範式，包括過程式編程、物件導向編程和函數式編程。它靈活適應許多不同的需求。 Python 是由 Guido van Rossum 於 1991 年創建的，隨著時間的推移，它的受歡迎程度不斷上升，特別是在過去的五年中，正如 Google Trends 的資訊圖表所顯示的： 開始使用 Python 非常簡單。您只需要從 python.org 官方網站安裝官方套件，適用於 Windows、macOS 或 Linux，就可以開始了。 如果您是初學者，我將在接下來的文章中指導您從零開始成為 Python 程式設計師。 即使您目前是專門使用其他程式語言的開發人員，Python 也值得了解，因為我認為我們只是剛剛開始。 對於專業的程式設計師來說，低階語言（如 C++ 和 Rust）可能非常出色，但對於初學者來說可能有些難以入門，並且需要很長時間的學習。相反，Python 是一種編程語言，適用於程式設計師當然，也適用於非程式設計師，例如學生、使用 Excel 的人、科學家等等。 每個對編程感興趣的人應該首先學習的語言。 從這篇文章開始，我想開始一個專門介紹 Python 程式語言的系列。 開始吧。 在 macOS 上安裝 Python 運行 Python 程式 Python 2 vs Python 3 基本的 Python 使用方法 數據類型 運算符 字符串 布林值 處理數字 接受輸入 控制語句 列表 元組 字典 集合 函數 物件 迴圈 使用類定義新物件 模組 標準庫 除錯 變數作用域 從命令行接受參數 Lambda 函式 遞歸 巢狀函式 閉包 裝飾器 文檔字符串 內省 註解 列出目錄中的文件 獲取文件的詳細信息 異常處理 檢查文件或目錄是否存在 創建空文件 創建目錄 將內容寫入文件 讀取文件的內容 with 語句 創建網絡請求 創建 Web（HTTP）伺服器 創建 TCP 伺服器 安裝第三方套件 正則表達式 列表生成式 使用 Tkinter 進行 GUI 編程 多態 運算符重載 多執行緒簡介 map reduce filter …更多即將推出！

帶有語法高亮的網頁中的任何區塊 我需要在網頁中添加語法高亮，但我不能更改標記。 大多數語法高亮庫（例如 Prism.js）都要求您使用固定的結構，如下所示： 引用如下： Prism 會盡力鼓勵良好的作者實踐。因此，它僅與 <pre> 元素配合工作，因為在沒有 <pre> 元素的情況下，將代碼標記為無語義是無效的。 這聽起來很理想，但是我從外部來源得到的代碼在 div 中。你要求我使用那種標記，但我卻沒有。 最終，我找到了一個工具 https://highlightjs.org/，它讓我可以將語法高亮應用於我想要的頁面上的任何元素，只需先加載該庫，然後調用以下代碼： document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.my-code-div').forEach((el) => { hljs.highlightElement(el) }) })

如何使用Vue Router，這是Vue應用程式中必不可少的一部分之一 簡介 在JavaScript網頁應用程式中，路由器是將目前顯示的視圖與瀏覽器地址欄內容同步的部分。 換句話說，它是當你在頁面上點擊某個元素時，使URL改變並顯示正確視圖的部分。 傳統上，網頁是基於URL構建的。當你訪問特定的URL時，會顯示特定的頁面。 隨著在瀏覽器內運行並改變使用者所見的應用程式的引入，許多應用程式打破了這種交互方式，你必須手動使用瀏覽器的History API更新URL。 當你需要將URL與應用程式中的視圖同步時，你就需要一個路由器。這是一個非常常見的需求，現代的主要框架現在都允許你進行路由管理。 Vue Router庫是Vue.js應用程式開發時的首選。Vue並不強制使用這個庫。你可以使用任何通用的路由庫，或者自己創建和History API集成，但是使用Vue Router的好處是它是官方的。 這意味著它是由維護Vue的同一群人維護的，所以你可以在框架中得到更一致的整合，並且保證它將始終與未來的版本兼容，無論是什麼版本。 安裝 Vue Router可以通過npm的vue-router包來獲取。 如果你使用script標籤引入Vue，可以使用以下方式引入Vue Router。 <script src="https://unpkg.com/vue-router"></script> unpkg.com是一個非常方便的工具，可以通過一個簡單的鏈接在瀏覽器中提供每個npm包 如果你使用Vue CLI，可以使用以下方式安裝 npm install vue-router 一旦你安裝了vue-router並使其可用，可以在你的應用程序中導入它。 你需要在vue之後導入它，並調用Vue.use(VueRouter)將其安裝在應用程序中。 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 在調用Vue.use()並傳遞路由器對象之後，在應用程式的任何組件中都可以訪問這些對象： this.$router是路由器對象 this.$route是當前路由對象 路由器對象 當在將Vue Router安裝到根Vue組件時，可以使用this.$router從任何組件中訪問路由器對象，它提供了許多不錯的功能。 我們可以使用以下方法導航至新路由： this.$router.push() this.$router.replace() this.$router.go() 這類似於History API的pushState，replaceState和go方法。 push()用於切換到新的路由，將新項目添加到瀏覽器的歷史記錄中。replace()類似，只是它不會將新狀態推送到歷史記錄中。 使用示例： this.$router.push('about') //命名路由，稍後查看 this.$router.push({ path: 'about' }) this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //使用查詢參數（post?post_slug=hello-world） this.$router.replace({ path: 'about' }) go()可以前進和後退，接受一個可能為正或負的數字來倒退或前進歷史記錄：...