XMLHttpRequest（XHR）的引入是Web平台的重大胜利。让我们看看它是如何工作的。 介紹 一個XHR請求的例子 附加的open()參數 onreadystatechange 中止XHR請求 與jQuery的比較 與Fetch的比較 跨網域請求 使用XHR上傳文件 介紹 在2000年代中期，網絡瀏覽器中引入XMLHttpRequest（XHR）是Web平台的重大突破。讓我們看看它是如何工作的。 許多現在看起來很正常的東西，在當時看起來就像來自未來。例如，我談論的GMail或Google Maps在很大程度上都依賴於XHR。 XHR是在九十年代由Microsoft發明的，由於所有瀏覽器在2002年至2006年期間都實現了它，它成為事實上的標准。W3C於2006年將XMLHttpRequest標准化。 就像在Web平台上有時會發生的情況一樣，最初有一些不一致之處，這使得在不同的瀏覽器中使用XHR變得非常不同。 像jQuery這樣的庫通過提供一個易於使用的抽象層，受到開發人員的歡迎，這反過來又幫助傳播了這項技術。 一個XHR請求的例子 以下代碼創建一個XMLHttpRequest（XHR）請求對象，並附加一個在onreadystatechange事件上響應的回調函數。 xhr連接的設置為向https://yoursite.com發送GET請求，並使用send()方法開始： const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4) { xhr.status === 200 ? console.log(xhr.responseText) : console.error('error') } } xhr.open('GET', 'https://yoursite.com') xhr.send() 附加的open()參數 在上面的例子中，我們只傳遞了方法和URL給請求。 我們還可以指定其他HTTP方法-（get，post，head，put，delete，options）。 其他參數讓您可以指定一個標誌，如果將其設置為false，則可以使請求同步進行，並為HTTP驗證指定一組憑據： open(method, url, asynchronous, username, password) onreadystatechange onreadystatechange在XHR請求期間多次被調用。我們明確忽略除readyState === 4以外的所有狀態，這意味著請求已完成。 狀態有： 1（OPENED）：請求開始 2（HEADERS_RECEIVED）：已接收到HTTP標頭 3（LOADING）：響應開始下載 4（DONE）：響應已下載 中止XHR請求 可以通過在xhr對象上調用abort()方法來中止XHR請求。 與jQuery的比較 在使用jQuery時，這些代碼可以轉寫為： $.get('https://yoursite.com', data => { console....

跨站腳本(XSS)教學 跨站腳本攻擊的指南。它們是如何運作的？如何防止它們？ 什麼是XSS，也就是跨站腳本？ XSS是我們用來定義一種特定類型的攻擊的術語，該攻擊利用網站（如果你不小心）作為攻擊用的向量，因為它處理用戶輸入時存在著不安全的方式。 基本上，壞人（攻擊者）可以以某種方式將JavaScript注入到我們的網站中，利用我們在代碼中留下的漏洞。 利用這個漏洞，他們可以竊取用戶的信息。 根據如何利用XSS漏洞，我們有三種主要的XSS攻擊方式： * 持久XSS * 反射XSS * 基於DOM的XSS 為什麼XSS是危險的？ 想像一下你有一個網站。一個攻擊者可以以某種方式注入JavaScript代碼到你的網站中，並且在你用戶的瀏覽器中執行-無需你的意願和知識。 這是非常危險的。 由於你沒能妥善解決XSS漏洞，你的網站可以被用作攻擊向量，你的用戶信息就會受到風險。 特別是，當任何人都可以在頁面中注入JavaScript時，他們可以訪問與網站相關聯的用戶cookie，並讀取其中的任何信息。並將其發送到自己的服務器。他們可以監聽鍵盤事件，並獲取用戶在頁面中輸入的任何內容，然後使用fetch或XHR將其發送到攻擊者的服務器。例如用戶名和密碼。他們還可以操縱DOM，利用這個能力他們可以做很多壞事。 XSS是前端還是後端問題？ 兩者都是。這是一個涉及前端和後端的網站架構問題。 XSS攻擊的示例 XSS基本上是在你允許用戶輸入信息並將其存儲（在後端）後再次顯示的情況下啟用的。 假設你有一個博客，並且允許用戶對博客發表評論。如果你盲目接受用戶輸入的任何內容， 惡意用戶可以試圖輸入JavaScript片段，基本形式是用<script></script>括起來的。例如<script>alert（“test”）</script>。 你可能會將此評論存儲在數據庫中，而當頁面重新加載時-同樣，如果你沒有任何預防措施-加載該頁面的所有用戶都將運行該JavaScript片段。 我使用了一個簡單的alert（）調用作為例子，但就像上面列舉的，用戶可能輸入任何類型的腳本。此時，網站就受到了入侵。 什麼是持久性XSS？ 持久性XSS是我們在野外發現的三種XSS中的一種。這是我在博客文章示例中描述的那一種。 在此情況下，漏洞的代碼存儲在數據庫或由你自己託管的其他源中。 一旦有人可以輸入JavaScript片段，它就會自動由你的網站提供，不需要任何其他操作。 什麼是反射性XSS？ 反射性XSS是一種利用你的網站漏洞即時提供給最終用戶帶有腳本的鏈接的方式。 通過這種方式，攻擊者提供了一個類似於 yoursite.com/?example=<script>alert('test')</script> 如果你的網站使用example GET變量執行某些操作並在頁面上顯示它，而你沒有檢查和清理它的值，那麼該腳本將被用戶的瀏覽器執行。 典型的例子是搜索表單。它可能位於/search URL中，並且您可能會使用GET term變量來接受搜索詞。 當有人搜索時，您可能會顯示You searched for <term> 字符串。現在，如果你沒有對值進行清理，那麼你現在就有問題了。 垃圾郵件/釣魚郵件是這種XSS攻擊常用的媒介。當然，網站越大越重要，黑客就越頻繁地嘗試入侵它。 什麼是基於DOM的XSS？ 通過持久XSS和反射XSS，攻擊代碼必須被發送到服務器，並且它可能（並且希望是）經過了過濾。 基於DOM的XSS是一種攻擊代碼從未被發送到服務器的XSS。這種情況通常通過使用URL的片段部分或引用document.URL / document.location.href來實現。網上找到的一些例子現在不再起作用，因為現代瀏覽器會自動對地址欄中的JS進行轉義。只有在解碼後才能正常工作，這也有點可怕（不要這樣做！）。 這裡有一個簡單的工作示例。假設您有一個頁面聽取位於http://127.0.0.1:8081/testxss.html上的test變量： http://127.0.0.1:8081/testxss.html#test=something #test=something 值從不被發送到服務器。它只是本地值。持久/反射的XSS不起作用。但是，假設您的腳本使用以下方式訪問該值： const pos = document.URL.indexOf("test=") + 5; const value = document.URL.substring(document.URL.indexOf("test=") + 5, document.URL.length) 然後將其直接寫入DOM中： document.write(value) 一切都好，直到有人以這樣的方式調用URL：...

XState有限狀態機JavaScript庫的概述 我曾經在過去的文章中提到過有關有限狀態機的內容，並提到過XState。在這篇文章中，我想要介紹這個受歡迎的JavaScript庫。 有限狀態機是一種處理複雜狀態和狀態變化並保持程式碼幾乎無錯誤的有趣方法。 就像我們使用各種工具來設計軟體項目以在構建之前設計它一樣，我們在構建之前使用模型和使用者體驗工具來思考UI，有限狀態機幫助我們解決狀態轉換的問題。 電腦程式就是在輸入之後從一個狀態過渡到另一個狀態的事情。如果不仔細注意，事情會失控，而XState是一個非常有幫助的工具，可以幫助我們處理不斷增長的狀態複雜性。 你可以使用npm安裝XState： npm install xstate 然後，您可以使用ES模塊語法在程序中導入它。通常，您最少要導入Machine和 interpret函數： import { Machine, interpret } from 'xstate' 在瀏覽器中，您還可以直接從CDN導入它： <script src="https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/dist/xstate.js"></script> 這樣將在window對象上創建一個全局的XState變量。 接下來，您可以使用Machine工廠函數來定義一個有限狀態機。 這個函數接受一個配置對象，並返回一個對新創建的狀態機的引用： const machine = Machine({ }) 在配置中，我們傳遞一個標識狀態機的id字符串，以及初始狀態字符串。 這是一個簡單的交通信號燈示例： const machine = Machine({ id: 'trafficlights', initial: 'green' }) 我們還傳遞一個包含允許的狀態的states對象： const machine = Machine({ id: 'trafficlights', initial: 'green', states: { green: { }, yellow: { }, red: { } } }) 在這裡，我定義了三個狀態：green、yellow和red。 要從一個狀態過渡到另一個狀態，我們將向機器發送一個消息，並根據我們設置的配置知道該做什麼。 在這裡，我們設置了當我們處於green狀態並且收到TIMER事件時，切換到yellow狀態： const machine = Machine({ id: 'trafficlights', initial: 'green', states: { green: { on: { TIMER: 'yellow' } }, yellow: { }, red: { } } }) 我稱之為TIMER，因為交通信號燈通常有一個簡單的計時器，在每X秒改變燈的狀態。...

了解如何使用 Zeit 所創造的 Now 平台 Zeit 現在被稱為 Vercel，此教學可能已經過時。 部署 Node.js 應用程式最簡單的方法之一就是使用 Zeit 所創造的 Now 平台。 最近推出了 Now 2。此教學專注於 Now 2。與 Now 1 有許多不同之處，在這篇文章中有詳細說明。 Now 讓應用程式的部署和分發步驟變得非常簡單和快速。你可以把它當成「雲端」，因為你並不知道你的應用程式將被部署在哪裡，但你知道你將擁有一個可以訪問的 URL。 你可以使用 Now 部署 Node.js 應用程式、靜態網站等等。 Now 不僅支援 Node.js，還支援 Go、PHP、Python 和其他語言，但在這個教學中我只會考慮 Node.js 這個技術。 Now 有免費的使用方案，包括免費 SSL、100GB 的主機空間、每日 1000 次 無伺服器 函數調用、每月 1000 次建置、每月 100GB 的頻寬以及全球 CDN 的使用。如果你需要更多，價格頁面可以讓你對成本有個概念。 安裝 最好的方式是安裝 Now Desktop，你可以從 https://github.com/zeit/now-desktop 下載它。這是一個 Electron 應用程式，也會安裝 Now CLI，這是我們稍後會使用的工具。 透過 Now Desktop，你可以使用簡單的拖放介面部署應用程式，非常方便！ 提示：如果你喜歡，你也可以只安裝命令行工具，可以從 https://zeit.co/download 安裝 now CLI。...

這是一個非常簡單的例子，展示了一個表單接受GitHub用戶名稱，一旦接收到submit事件，它將向 GitHub API 請求該用戶的信息並打印。 這段代碼創建了一個可重用的Card組件。當你在由Form組件管理的input字段中輸入一個名稱時，這個名稱被綁定到它的狀態中。 當按下Add card時，清除Form組件的userName狀態，以清除輸入表單。 除了 React，該示例還使用了Axios庫。這是一個很好的輕量級庫，用於處理網絡請求。可在 CodePen 中的設置中添加它，或者使用npm install axios在本地安裝它。 輸出: 代碼: 首先創建 Card 組件，這個組件將顯示我們從 GitHub 獲取的圖像和詳細信息。它通過 props 獲取數據，使用： props.avatar_url 用戶頭像 props.name 用戶名稱 props.blog 用戶個人網站的URL const Card = props => { return ( <div style={{ margin: '1em' }}> <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} /> <div> <div style={{ fontWeight: 'bold' }}>{props.name}</div> <div>{props.blog}</div> </div> </div> ) } 我們創建了一個 Card 組件的列表，它將作為父組件中的 cards 屬性傳遞給 CardList ，使用 map() 函數遍歷它並輸出一個卡片列表： const CardList = props => ( <div> {props....

我愛我的白板。 它是一個大的、巨大的白板。 今天我剛剛把它移到一個新的位置，鑽了一些洞在一個新的牆上（意思是它從未被放過的牆）。 我從小就有這個白板，不記得它是從哪裡來的。 它可能是一件聖誕禮物或生日禮物。我現在還留著它。 我把所有事情都計劃在這個白板上。 它比任何的待辦事項應用程式，比任何思維導圖工具都強大。 可能是因為它是一個現實世界的物品。 它是真實的，就像你把大腦裡的思緒下載到這個大大的白色表面時，白板筆的味道也是真實的。 我不斷地改變我用來管理我的日程的應用程式。可能是 Wunderlist、Things、Workflowy，現在是 Notion。 但這個大的、巨大的白板不會改變。 如果你在計劃、組織一個專案，把事情從腦袋裡拿出來並以清晰的流程來組織，那麼我強烈推薦你買一個這樣的白板。 白板唯一的問題是它的可用空間有限。這也是一個優點，如果你想一想的話。它不能無限地增長。這有點迫使你保持專注。 但在某些時候，你需要清空它，也許在將這些想法存入數字工具或僅僅是拍照後。 我的白板大小是150 x 120 cm。我在網上查了一下，你可以找到一個類似的白板，價格不到100歐元。 這是一個很好的投資。 一個可以持續一生的投資。從字面上看，我的白板已經35歲了，或者類似這樣。看起來仍然「幾乎」像新的。 科技產品兩年後就會變老。 白板的壽命要長得多。 如果你真的買了一個，買一個需要時可以移動的。 因為思考的房間可能會改變。

網絡上充滿了Git教程。以下是我推薦的一些教程。 入門教程 Flavio的GitHub指南 GitHub教程 GitHub Git Cheat Sheet Gun.io的GitHub入門 WebDesigner Depot的網頁設計師Git入門 Git視頻指南 像Git一樣思考 每天使用20個Git命令 - kernel.org 完整且深入的指南 Pro Git書籍 由下而上的Git Git Ready Git magic Git Immersion 有趣的Git視頻 Git介紹 - GitHub的Scott Chacon, 2011 Linus Torvalds談git - Google Tech Talks 2007 Randal Schwartz談Git - Google Tech Talks 2007 開始使用Git - IAmTimCorey Git視頻教程：命令行基礎知識

Chrome DevTools提供了一套令人驚艷的工具，幫助您進行Web平台的開發。這裡有一些您可能還不知道的小貼士。 在Elements面板中拖放 在Console中參考當前選中的元素 使用上一個操作的值在Console中 添加CSS並編輯元素狀態 查找CSS屬性的定義位置 將修改後的CSS保存到文件 截取單個元素的屏幕截圖 使用CSS選擇器查找元素 在Console中使用Shift+Enter 清除Console 前往… Watch Expression XHR/Fetch調試 DOM修改的調試 如果您對Chrome DevTools還不熟悉，可以查看Chrome DevTools概述。 在Elements面板中拖放 在Elements面板中，您可以拖放任何HTML元素並更改其在頁面中的位置。 在Console中參考當前選中的元素 在Elements面板中選擇一個節點，然後在控制台中輸入$0來引用它。 提示：如果您正在使用jQuery，您可以輸入$($0)以訪問該元素上的jQuery API。 在Console中使用上一個操作的值 使用$_來引用在Console中執行的上一個操作的返回值。 添加CSS並編輯元素狀態 在Elements面板中有兩個非常有用的按鈕。 第一個按鈕允許您添加一個新的CSS屬性，可以選擇任何選擇器，但預填當前選中的元素。 第二個按鈕允許您觸發選中元素的狀態，這樣您可以看到它處於活動狀態、懸停狀態或焦點狀態時應用的樣式。 查找CSS屬性的定義位置 在Elements面板中cmd-click（Windows上的ctrl-click）一個CSS屬性，DevTools將指向定義該屬性的位置，在Source面板中顯示。 將修改後的CSS保存到文件 點擊您編輯的CSS文件名。檢查器將其打開到Sources面板中，然後您可以保存其中應用的實時編輯。 這個技巧不適用於使用"+“添加的新選擇器，也不適用於element.style屬性，只適用於修改的現有選擇器。 截取單個元素的屏幕截圖 選擇一個元素，然後按cmd-shift-p（或Windows上的ctrl-shift-p）打開命令菜單，選擇Capture node screenshot。 使用CSS選擇器查找元素 按下cmd-f（Windows上的ctrl-f）在Elements面板中打開搜索框。 您可以在其中輸入任何字符串來匹配源代碼，或者您也可以使用CSS選擇器讓Chrome為您生成圖像。 在Console中使用Shift+Enter 要在Console中編寫跨越多行的命令，按shift-enter。 一旦準備就緒，按Enter執行腳本的末尾。 清除Console 您可以使用Console頂部左側的Clear按鈕清除控制台，也可以按ctrl-l或cmd-k。 前往… 在Sources面板中： cmd-o（Windows上的ctrl-o）顯示頁面加載的所有文件。 cmd-shift-o（Windows上的ctrl-shift-o）顯示當前文件中的符號（屬性、函數、類）。 ctrl-g 跳轉到特定行。 Watch Expression 將您將在調試會話期間多次檢查的變量名稱或表達式添加到Watch Expression列表中。 XHR/Fetch調試 從調試器打開XHR/Fetch Breakpoints面板。 您可以設置它在發送任何XHR / Fetch調用時中斷，或只在特定調用上中斷。 DOM修改的調試 右鍵單擊一個元素並啟用Break on Subtree Modifications：每當腳本遍歷該元素的子元素並修改它們時，調試器會自動停止，讓您檢查出問題所在。

我需要捕獲不帶查詢參數的URL。 適用於 http 和 https 鏈接。 下面是我使用的正則表達式： /^(http[^?#]+).\*/gm 這是一個示例： const regex = /^(http[^?#]+).\*/gm const result = regex.exec("https://test.com?test=2") console.log(result) /* [ 'https://test.com?test=2', 'https://test.com', index: 0, input: 'https://test.com?test=2', groups: undefined ] */

SVG是一個令人驚嘆且非常強大的圖像格式。本教程將通過簡單易懂的方式提供SVG的概述，以解釋您需要知道的一切。 簡介 SVG的優勢 您的第一個SVG圖像 使用SVG SVG元素 text circle rect line path textPath polygon g SVG視口和viewBox 將SVG插入Web頁面 使用img標籤 使用CSS的background-image屬性 內聯在HTML中 使用object，iframe或embed標籤 使用數據URL內聯SVG 樣式化元素 使用CSS或JavaScript與SVG交互 SVG內部的CSS SVG內部的JavaScript SVG外部的JavaScript SVG外部的CSS SVG vs Canvas API SVG符號 驗證SVG 是否應該包含xmlns屬性？ 是否需要擔心瀏覽器支持？ 簡介 儘管SVG（可縮放矢量圖形）在2000年代初已經定為標準，但它仍然是如今的熱門話題。 多年來，由於瀏覽器的支持（尤其是IE），SVG一直受到懲罰。 我在一本2011年的書中找到了這樣的語句：“在寫作時，將SVG直接嵌入HTML只適用於最新的瀏覽器。”這句話已經過去7年了，現在我們可以安全地使用SVG圖像。 今天，除非您有很多使用IE8及以下版本或舊版Android設備的用戶，否則我們可以安全地使用SVG圖像，此時可使用回退選項。 SVG之所以取得一部分成功，部分原因是我們必須支持各種屏幕顯示器，具有不同的分辨率和尺寸。這是SVG的理想任務。 此外，近年來Flash的急劇衰落，使SVG重新引起人們的興趣，這對於過去Flash完成的許多工作來說是一個很好的選擇。 SVG是一種矢量圖像文件格式。這使它們與PNG、GIF或JPG等光柵圖像文件格式完全不同。 SVG的優勢 由於是矢量圖像，SVG圖像可以進行無限縮放，並且在圖像質量下降方面沒有任何問題。為什麼這樣呢？因為SVG圖像使用XML標記來構建，瀏覽器通過繪製每個點和線而打印它們，而不是使用預定義的像素填充某些空間。這保證了SVG圖像可以適應不同的屏幕尺寸和分辨率，甚至還有尚未發現的尺寸。 由於在XML中定義，SVG圖像比JPG或PNG圖像更靈活，我們甚至可以使用CSS和JavaScript與之交互。SVG圖像甚至可以包含CSS和JavaScript。 SVG圖像可以以比其他格式更小的方式渲染矢量風格圖像，主要用於商標和插圖。另一個巨大的用例是圖標，曾經是FontAwesome之類的圖標字體的範疇，現在設計師更喜歡使用SVG圖像，因為它們更小，並且可以具有多色圖標。 SVG很容易實現動畫效果，這是一個很酷的主題。 SVG提供了一些圖像編輯效果，例如遮罩和裁剪、應用過濾器等。 SVG只是文本，因此可以使用GZip進行高效壓縮。 您的第一個SVG圖像 SVG圖像使用XML進行定義。這意味著，如果您瞭解HTML，則SVG看起來會非常熟悉，只不過，與用於文檔構建（如p，article，footer，aside）的標籤不同，在SVG中我們有用於矢量圖像構建的基本元素：path，rect，line等。 這是一個示例SVG圖像： <svg width="10" height="10"> <rect x="0" y="0" width="10" height="10" fill="blue" /> </svg> 請注意，它非常容易讀取和理解圖像的外觀：這是一個簡單的10x10像素（默認單位）的藍色矩形。 大多數情況下，您不需要編輯SVG代碼，而是使用諸如Sketch、Figma或任何其他矢量圖形工具來創建圖像，然後導出為SVG。 當前版本的SVG是1.1版本，SVG 2.0版本正在開發中。 使用SVG 可以通過將SVG包含在img標籤中來顯示SVG圖像：...