在您已經安裝並運行Redis之後，您可以開始使用它了！ 最簡單的方法是使用redis-cli，這是在安裝Redis時一同安裝的應用程式。 這是一種內建的方法，可以在不需要設置應用程式的情況下對Redis進行命令操作。 您可以使用redis-cli -h <主機名> -p <埠號> -a <密碼>的方式連接到遠程Redis服務器 一旦進入Redis CLI應用程序，就可以開始將數據存儲到其中。 使用結構SET <鍵> <值>添加一個值： SET name "Flavio" 檢索值 使用結構GET <鍵>檢索值： 檢查鍵是否存在 我們也可以使用EXISTS <鍵>來檢查鍵是否存在： 該命令將返回1（存在）或0（不存在）。 僅在不存在時設置 SET的一種變體允許我們僅在尚未存在鍵時設置它： SETNX name "Roger" 刪除鍵 使用DEL <鍵>刪除鍵： 列出現有鍵 您可以使用KEYS *列出所有已插入的鍵 或者，使用類似KEYS n*的模式進行過濾，以列出僅以n開頭的鍵，例如。 每個存儲的值最多可容納512MB。 過期鍵 可以將鍵暫時存儲並在計時器結束時自動刪除： SETEX <鍵> <秒數> <值> 您可以使用TTL <鍵>獲取鍵清除剩餘的時間 在這個例子中，我使用Flavio作為值設置了一個name鍵，並使用TTL檢查鍵將返回值還有多少時間。 一旦計時器過期，結果將是空值（nil）： 您還可以使用EXPIRE <鍵>秒數>將現有鍵設置為過期。 递增和递减 可以使用INCR <鍵>進行數值增加，並使用DECR <鍵>進行递减。 您還可以使用INCRBY <鍵> <增量>和DECRBY <鍵> <減量>來將鍵值增加特定的數量： 這些命令非常適合高並發操作，其中許多客戶端可能會與相同的數據進行交互，以確保原子事務。 最常見的例子是當兩個不同的客戶端嘗試增加同一數字。 在像PostgreSQL或MongoDB這樣的數據庫中，您首先需要獲取數字值，然後進行增加，然後向服務器發出請求進行增加。 假設值為1，如果兩個客戶端使用GET讀取該值，然後它們分別調用SET進行增加，最終如果沒有任何防止並發更改發生的東西，結果將是2。 Redis從根本上解決了這個問題。 更複雜的數據結構 到目前為止，我們已經處理了像整數和字符串這樣的簡單數據類型。 Redis可以支持更複雜的結構。 接下來的文章中我們將看到如何處理以下內容： 列表 集合 有序集合 哈希

Redux Saga是一個用於處理Redux中的副作用的庫。當你觸發一個action時，應用的狀態會發生變化，你可能需要做一些從這個狀態變化衍生出來的操作。 何時使用Redux Saga 使用Redux Saga的基本示例 幕後工作原理 基本助手函數 takeEvery() takeLatest() take() put() call() 並行運行Effect all() race() 何時使用Redux Saga 在使用Redux的應用中，當你觸發一個action時，應用的狀態會發生變化。 在這種情況下，你可能需要做一些從這個狀態變化衍生出來的操作。 例如你可能想要： 向服務器發送HTTP請求 發送WebSocket事件 從GraphQL服務器獲取一些數據 將數據保存到緩存或瀏覽器本地存儲 這些操作都不是和應用狀態直接相關的，而且它們是異步的，你需要將它們放在與actions或reducers不同的地方（雖然理論上你可以這樣做，但這樣不利於保持代碼庫的整潔）。 這就是Redux Saga這個Redux中間件派上用場的地方。 使用Redux Saga的基本示例 為了展示一些實際的代碼，在講解太多理論之前，我簡要介紹一下在構建一個示例應用時我所面臨的問題，以及我是如何解決這個問題的。 在一個聊天室中，當一個用戶發送消息時，我會立即將該消息顯示在屏幕上，以提供即時的反饋。這是通過一個Redux Action來實現的： const addMessage = (message, author) => ({ type: 'ADD\_MESSAGE', message, author }) 並且狀態是通過reducer改變的： const messages = (state = [], action) => { switch (action.type) { case 'ADD\_MESSAGE': return state.concat([{ message: action.message, author: action.author }]) default: return state } } 首先，你需要導入Redux Saga，並將一個saga作為中間件應用到Redux Store上來初始化Redux Saga：...

了解如何修復“referenceerror: window未定義”錯誤。 在Node.js或類似Next.js的工具中，你可能會遇到這個錯誤。 window是瀏覽器提供的一個對象，在服務器端的JavaScript環境中不可用。 我在我的詳細的DOM 文檔物件模型指南中詳細介紹了window對象。 對於Node.js來說，沒有辦法解決這個問題 - 你必須找到使用window的特定位置，並重新檢查代碼以找出為什麼要訪問window對象。 你在後端環境中運行前端代碼。 在Next.js中，你可以通過將代碼包裝在條件語句中來解決這個問題。 該代碼在兩種情況下運行 - 前端情況下，當你使用鏈接訪問頁面時，以及如果你在頁面中引入了服務器端的代碼，例如通過運行getServerSideProps()。 在這種情況下，你可以將引用限制在一個條件語句中，檢查window對象是否可用，像這樣： if (typeof window !== 'undefined') { // 這裡`window`是可用的 } 這樣就可以解決你的問題，因為你只在瀏覽器環境中運行條件語句內的任何代碼。

發佈出去，就會輕鬆銷售 當我推出 JavaScript Bootcamp 時，我發了幾封電子郵件告訴大家這個課程現在可以報名了。作為一年一度只有一週時間報名的活動，開放時窗很短，我在八天內發了七封郵件。 根據你的信念，這個數字可能太多或太少。 如果你是開發者或技術人員，你會覺得這太過分了。如果你是營銷人員或普通人，這才是少數郵件。 我見過並研究過各個領域的無數次推出和營銷策略。市場越不懂技術，人們收到的郵件越多。但我也見過許多科技推出活動有更多郵件比我發的還多。我特別記得一個課程在最後48小時裡發了6封郵件，這有點好笑。 在我所有的推出郵件中，我總是添加一個連結，供你點擊以完全跳過推出。這並不成問題，你仍會成為我一般名單的一部分，這是我向你們每週免費發送編碼教程的地方。 多虧了這個，推出期間我沒有收到「憎恨郵件」。我只收到一個投訴。這結果非常好。當然，有些人完全取消了訂閱。但如果沒有這個「忽略推出」連結，我將收到更多的投訴。 現在有趣的是討論這個人告訴我的內容。 根據這個人的說法，發送推出的電子郵件提醒是不必要的。有興趣的人只會自動報名，不需要額外的提醒，我可以「自然發生」地讓事情發生，不需要額外的提醒。 我第一個反應是：“多麼可愛”。 然後我告訴我家人，這個人從來沒有把他們的事情推出到外部世界。我不知道這是不是真的，但這是我的想法。 外面的世界很嘈雜。在網絡的無垠中，如果你不先讓自己可見，就沒辦法被注意到。 而且，即使你使自己盡可能可見，這仍然很困難，因為有太多因素會使你的推出從零收入，成為你謀生的手段。 這實在太難了，在正確的地方，許多星星必須對齊✨。你必須善用你的一切手段來幫助這些星星。 如果「它應該發生」，你不能只是讓某事「發生」。我花了無數的時間和日子來準備這門課程。事先準備工作相當於全職工作一年的時間。 想象一下投資所有這些時間。你會只是「讓它發生」嗎？ 當然不會。 你會盡一切可能確保事情以正確的方式發展。 人們傾向於拖延到最後一刻。我說的不是開玩笑。即使有我發了七封郵件，許多人仍然錯過了報名截止日期。有人在我關閉報名後，還給我發郵件要加入課程。他們錯過了我的郵件。 所以我想告訴你的一件事是，當你發佈自己的產品、電子書或其他東西時，你必須告訴人們。如果你碰巧將電子郵件作為一對多的通信渠道，別害怕再發一封郵件。這是一件非常壓力巨大的事情。但這是必須做的事情。 你傾向於認為你已經發了太多郵件。但你可能發得遠遠不夠。 記住這一點：你創造了這個有價值的產品，人們註冊希望從你這裡聽到消息。他們希望聽到你的消息。 當然，這適用於許可營銷。人們必須首先同意你給他們發送電子郵件。否則就是垃圾郵件。不要發垃圾郵件。但是當該通知喜歡你和你所做的事情的人時，不要害羞地傳達你所產生的價值。

學習使用API以可預測的方式執行動畫並安排事件 requestAnimationFrame()是一個相對較新的瀏覽器API。它提供一種更可預測的方式來連接到瀏覽器的渲染循環。 目前，所有現代瀏覽器（包括IE 10+）都支援這個API。 它不是專門用於動畫的API，但這是它被最廣泛使用的領域。 JavaScript有一個事件循環（event loop）。它不斷運行以執行JavaScript。 在過去，使用setTimeout()或setInterval()執行動畫。你執行一點點動畫，然後使用setTimeout()在幾毫秒後重複執行這段代碼： const performAnimation = () => { //... setTimeout(performAnimation, 1000 / 60) } setTimeout(performAnimation, 1000 / 60) 或是 const performAnimation = () => { //... } setInterval(performAnimation, 1000 / 60) 你可以透過獲取timeout或interval的參考並將其清除來停止動畫： let timer const performAnimation = () => { //... timer = setTimeout(performAnimation, 1000 / 60) } timer = setTimeout(performAnimation, 1000 / 60) //... clearTimeout(timer) performAnimation()調用之間的1000 / 60間隔取決於顯示器的刷新頻率，大多數情況下是60 Hz（每秒重繪60次），因為由於其限制，如果顯示器無法顯示，執行重繪將是無用的。這導致我們有大約16.6毫秒的時間來顯示每一個幀。 這種方法的問題是，即使我們精確指定了這個間隔，瀏覽器可能忙於執行其他操作，我們的setTimeout調用可能不能及時進行重繪，並且將被延遲到下一個循環。 這很糟糕，因為我們丟失了一個幀，在下一個幀中，動畫將被執行兩次，使眼睛注意到不平滑的動畫。 在Glitch上的這個使用setTimeout()構建的動畫的示例中可以看到這個問題。 requestAnimationFrame是執行動畫的標準方式，儘管代碼看起來非常類似於setTimeout/setInterval的代碼，它的工作方式非常不同：...

從REST API創建者和使用者的角度來看，什麼是REST API？ API代表應用程式介面（Application Programming Interface），是一個涵蓋許多不同事物的總稱。 我們已經看到瀏覽器如何提供一些API，以可用於我們的函式的形式。 我們已經看到Node.js如何通過其預設模塊為我們提供編程API。 API還表示另一種東西：創建通過可以被多個客戶端訪問的服務，並提供一些特定功能的服務。 廣義而言，我們目前有2類API：REST API和GraphQL API。 還有其他類型的API範式存在，例如SOAP，但它們在JavaScript世界中並不常見。 在本文中，我們將談論REST API。 端點 在REST API中，我們創建了客戶端可以訪問的多個端點。 假設我們想要公開一個人員列表。我們可以創建一個將響應於/people路徑的端點。 如果我們的服務監聽在test.com域上，我們將有test.com/people的URL。 該端點可以提供任何格式的數據，但通常我們使用JSON，這是一種方便的文本格式，用於在兩個服務之間通信數據。 該/people端點可以提供一個人的名字列表，以及每個人的id。這可能是我們用來儲存它們在數據庫中的id。 我們的系統還可以公開另一個我們稱之為/person的端點。它接受唯一標識一個人的id，類似於/person/1的形式。 我們的API將提供有關該人的更多信息，例如年齡、電子郵件和地址。 請注意，在第一個端點中我們沒有任何參數，但這一次我們有一個參數。 參數可以以不同的方式發送，並且並不是所有的端點都用於從服務器發送信息。我們很快就會看到一些其他的端點將用於執行操作。 方法 我提到了/people端點將返回我們系統中的人員列表。 這只是一個簡化，現在是時候進一步研究了。 REST API使用HTTP協議的原則來提供基於使用的HTTP方法的不同功能：GET，POST，PUT，DELETE。 GET是最常用的方法。當客戶端使用GET方法調用我們的API端點時，它表示它希望讀取數據。 GET /people將返回人員列表。 GET /person/1將返回一個人的詳細信息。 當HTTP方法為POST時，意義完全不同。端點將是相同的，但所需的操作將是另一個。 我們作為API構建者可以定義含義是什麼。 例如，我們可以創建一個POST /person端點，當被調用時會在數據庫中創建一個新的人。 它接收來自客戶端的數據，以我們可以選擇的預定義格式。我們很快將通過使用Express來看一個示例。 GET和POST是主要使用的2個方法。 有時我們使用PUT和DELETE：PUT有時用於更新資源，例如更改個人的地址。DELETE用於刪除一個資源。 在其他時候，POST用於除讀取之外的所有操作，其中使用GET。 在這個選擇中我們有自由。 在資源中，我們指的是一個實體，例如在/people的復數形式中的人員，或在/person的單數形式中的一個人。 命名API端點 看看上面我使用的/people和/person。 這些都是名詞。 使用名詞作為端點的名稱，並使用HTTP方法表示動作，被認為是最佳做法。 更新一個人使用POST請求到/person端點。 如果你想創建一個API來發送消息給一個人，你將使用POST請求，使用/message端點，並通過它傳遞數據來識別要發送的人和消息。 一個REST API是無狀態的 REST API是無狀態的。 這意味著它在不同請求之間沒有記憶。 你可以找到大多數API實現一個API密鑰機制，作為追蹤誰在調用API的一種方式，並提供一種監控使用情況並強制限制的方法。 API也可以使用登錄/密碼機制進行保護。在這種情況下，API身份驗證過程將需要考慮到握手過程，以提供一個令牌，然後需要在每個未來的請求中發送它，以識別用戶和正確的授權。 回應 API調用會以兩種形式將回應返回給用戶：HTTP回應狀態碼和HTTP回應正文。 每個HTTP請求都有一個狀態碼。 對於HTTP回應狀態碼，我們有一些慣例：當你使用瀏覽器打開一個網頁時，網頁將返回一個200 OK狀態碼。如果找不到該頁面，則返回404 NOT FOUND狀態碼。 對於我們的API也是如此。 常見的狀態碼有： 200 OK：這是成功的標準 HTTP 請求的標準回應。 201 Created：通常是 POST 請求的回應。請求已完成，並建立了一個新的資源。 400 Bad Request：由於用戶端引起的請求錯誤，服務器無法處理請求。錯誤可以包括錯誤的請求格式、過大無法處理等。 401 Unauthorized：需要身份驗證並且客戶端未經授權。 403 Forbidden：由於各種原因，該資源不可用。如果原因是對身份驗證，請使用401 Unauthorized狀態碼。 404 Not Found：找不到所請求的資源。 405 Method Not Allowed：該資源不能使用該HTTP方法訪問，但可能可以使用其他方法訪問。 500 Internal Server Error：一個通用的啟示服器錯誤消息，當遇到意外情況並且沒有更具體的消息時給出。 你可以在HTTP狀態碼列表中找到完整的列表。值得注意的是，當你創建一個API時，應該始終返回正確的狀態碼，以通知你的用戶。...

一個整理了 RGB 色碼的表格，這些色碼很有用但很難記住。你可以透過色碼找到對應的顏色，或是相反地透過顏色找到對應的色碼。 快速找到 RGB 色碼的組合。 顏色 名稱 #RRGGBB (十六進位碼) R,G,B (十進位碼) maroon #800000 (128,0,0) darkred #8B0000 (139,0,0) brown #A52A2A (165,42,42) firebrick #B22222 (178,34,34) crimson #DC143C (220,20,60) red #FF0000 (255,0,0) tomato #FF6347 (255,99,71) coral #FF7F50 (255,127,80) indianred #CD5C5C (205,92,92) lightcoral #F08080 (240,128,128) darksalmon #E9967A (233,150,122) salmon #FA8072 (250,128,114) lightsalmon #FFA07A (255,160,122) orangered #FF4500 (255,69,0) darkorange #FF8C00 (255,140,0) orange #FFA500 (255,165,0) gold #FFD700 (255,215,0) darkgoldenrod #B8860B (184,134,11) goldenrod #DAA520 (218,165,32) palegoldenrod #EEE8AA (238,232,170) darkkhaki #BDB76B (189,183,107) khaki #F0E68C (240,230,140) olive #808000 (128,128,0) yellow #FFFF00 (255,255,0) yellowgreen #9ACD32 (154,205,50) darkolivegreen #556B2F (85,107,47) olivedrab #6B8E23 (107,142,35) lawngreen #7CFC00 (124,252,0) chartreuse #7FFF00 (127,255,0) greenyellow #ADFF2F (173,255,47) darkgreen #006400 (0,100,0) green #008000 (0,128,0) forestgreen #228B22 (34,139,34) lime #00FF00 (0,255,0) limegreen #32CD32 (50,205,50) lightgreen #90EE90 (144,238,144) palegreen #98FB98 (152,251,152) darkseagreen #8FBC8F (143,188,143) mediumspringgreen #00FA9A (0,250,154) springgreen #00FF7F (0,255,127) seagreen #2E8B57 (46,139,87) mediumaquamarine #66CDAA (102,205,170) mediumseagreen #3CB371 (60,179,113) lightseagreen #20B2AA (32,178,170) darkslategray #2F4F4F (47,79,79) teal #008080 (0,128,128) darkcyan #008B8B (0,139,139) aqua #00FFFF (0,255,255) cyan #00FFFF (0,255,255) lightcyan #E0FFFF (224,255,255) darkturquoise #00CED1 (0,206,209) turquoise #40E0D0 (64,224,208) mediumturquoise #48D1CC (72,209,204) paleturquoise #AFEEEE (175,238,238) aquamarine #7FFFD4 (127,255,212) powderblue #B0E0E6 (176,224,230) cadetblue #5F9EA0 (95,158,160) steelblue #4682B4 (70,130,180) cornflowerblue #6495ED (100,149,237) deepskyblue #00BFFF (0,191,255) dodgerblue #1E90FF (30,144,255) lightblue #ADD8E6 (173,216,230) skyblue #87CEEB (135,206,235) lightskyblue #87CEFA (135,206,250) midnightblue #191970 (25,25,112) navy #000080 (0,0,128) darkblue #00008B (0,0,139) mediumblue #0000CD (0,0,205) blue #0000FF (0,0,255) royalblue #4169E1 (65,105,225) blueviolet #8A2BE2 (138,43,226) indigo #4B0082 (75,0,130) darkslateblue #483D8B (72,61,139) slateblue #6A5ACD (106,90,205) mediumslateblue #7B68EE (123,104,238) mediumpurple #9370DB (147,112,219) darkmagenta #8B008B (139,0,139) darkviolet #9400D3 (148,0,211) darkorchid #9932CC (153,50,204) mediumorchid #BA55D3 (186,85,211) purple #800080 (128,0,128) thistle #D8BFD8 (216,191,216) plum #DDA0DD (221,160,221) violet #EE82EE (238,130,238) magenta / fuchsia #FF00FF (255,0,255) orchid #DA70D6 (218,112,214) mediumvioletred #C71585 (199,21,133) palevioletred #DB7093 (219,112,147) deeppink #FF1493 (255,20,147) hotpink #FF69B4 (255,105,180) lightpink #FFB6C1 (255,182,193) pink #FFC0CB (255,192,203) antiquewhite #FAEBD7 (250,235,215) beige #F5F5DC (245,245,220) bisque #FFE4C4 (255,228,196) blanchedalmond #FFEBCD (255,235,205) wheat #F5DEB3 (245,222,179) cornsilk #FFF8DC (255,248,220) lemonchiffon #FFFACD (255,250,205) lightgoldenrodyellow #FAFAD2 (250,250,210) lightyellow #FFFFE0 (255,255,224) saddlebrown #8B4513 (139,69,19) sienna #A0522D (160,82,45) chocolate #D2691E (210,105,30) peru #CD853F (205,133,63) sandybrown #F4A460 (244,164,96) burlywood #DEB887 (222,184,135) tan #D2B48C (210,180,140) rosybrown #BC8F8F (188,143,143) moccasin #FFE4B5 (255,228,181) navajowhite #FFDEAD (255,222,173) peachpuff #FFDAB9 (255,218,185) mistyrose #FFE4E1 (255,228,225) lavenderblush #FFF0F5 (255,240,245) linen #FAF0E6 (250,240,230) oldlace #FDF5E6 (253,245,230) papayawhip #FFEFD5 (255,239,213) seashell #FFF5EE (255,245,238) mintcream #F5FFFA (245,255,250) slategray #708090 (112,128,144) lightslategray #778899 (119,136,153) lightsteelblue #B0C4DE (176,196,222) lavender #E6E6FA (230,230,250) floralwhite #FFFAF0 (255,250,240) aliceblue #F0F8FF (240,248,255) ghostwhite #F8F8FF (248,248,255) honeydew #F0FFF0 (240,255,240) ivory #FFFFF0 (255,255,240) azure #F0FFFF (240,255,255) snow #FFFAFA (255,250,250) black #000000 (0,0,0) dimgray / dimgrey #696969 (105,105,105) gray / grey #808080 (128,128,128) darkgray / darkgrey #A9A9A9 (169,169,169) silver #C0C0C0 (192,192,192) lightgray / lightgrey #D3D3D3 (211,211,211) gainsboro #DCDCDC (220,220,220) whitesmoke #F5F5F5 (245,245,245) white #FFFFFF (255,255,255)

如何避免意外關閉Safari，使用一個簡單的技巧 我是一個經常換瀏覽器的人。 我每天使用瀏覽器的時間太多了，有時候只是想換一個新的瀏覽器來試試新功能。 今天輪到了Safari。 我很喜歡Safari。它輕巧，功能簡單，非常快速。 然而，在打開新的標籤時，我不小心按下了cmd-Q，導致瀏覽器退出了。 Chrome和Firefox在試圖關閉它們時提供了一個很好的可選確認對話框： 但是Safari沒有這個功能。 因此，我重新將cmd-Q映射為cmd-option-Q。 以下是我如何做到的：打開系統偏好設置，點擊鍵盤： 點擊快捷鍵，然後點擊應用程式快捷鍵： 添加一個新的快捷鍵，選擇Safari並將選單標題命名為“Quit Safari”，添加新的快捷鍵： 就這樣： 由於這個選單標題與現有的Quit Safari選單相同，快捷鍵現在會改變： 再也不會意外退出了。

如何在技術博客中贏得SEO？您知道您想要更多的訪問量，希望谷歌每天都能帶來更多的訪客。 介紹 內容為王 分享您的內容 玩長遠的遊戲 撰寫長青內容 為你的內容優化結構 介紹 每次我在我的博客上發布一些內容時，我知道已經有幾十篇甚至數百篇的文章涵蓋了同一個主題。這是非常正常的：即使是10年甚至更久的技術，隨著時間的推移，人們已經寫了所有關於它們的內容。 MDN，Google開發者，Smashing Magazine，CSS Tricks，Stack Overflow和許多其他大型網站佔據了谷歌的頂端位置，無論主題是什麼。這沒有問題，也沒有辦法改變它。 這就是現狀，你很少有機會在谷歌搜索結果中排名靠前，但你仍然可以爬升到無窮的長尾關鍵詞。 內容為王 有人曾經說過“內容為王”。作為一個博主，這是你的真理：沒有什麼比內容更重要。 專注於內容。 編寫面向用戶的高質量內容。忘記關鍵詞研究，關鍵詞密度和所有那些懶人包。寫一些你的讀者想要閱讀的東西。 你怎麼知道？隨著時間的推移，他們會讓你知道。如果你剛開始寫作，開始寫一切你知道有興趣的人可能會感興趣的東西。 例如，我是一個前端開發人員，當我剛開始時，我首先寫了一些關於React及其生態系統的內容，這是我知道每個人都感興趣的，或者將來會感興趣的內容。 我寫的每篇文章在谷歌上都排名靠前嗎？不！ 大約有3-4篇文章獲得了所有訪問量的30％。其中一篇文章絕對比其他文章排名更高。有時候這只是瞎猜。 有些文章每周訪問量非常少，但我相信通過適當地鏈接我撰寫的文章，隨著時間的推移，排名更高的文章將提升其他文章的排名。 分享您的內容 這很難。你寫了一篇完美的文章，你只是“按下發布按鈕”，但現在你害怕將它放在Reddit上或者（驚！）放在Hacker News上。 這對每個人都是一樣的。每個人都害怕自己的工作被公眾看到。 在這種情況下，有一個幫助我的事情是： 95％的情況下沒人會關注你的帖子，你會“安然無恙”。 如果帖子引起了一些良好的討論並上了頭條，你會得到很多很好的反饋。 有時候我會猶豫去看評論，因為這些網站上的人有時候不友善😆，但更多的時候這真的不是個問題，帖子更受歡迎而不是受到批評。 如果我寫的東西不準確，更有經驗的人不會猶豫寫一個嚴厲的評論（這讓我更正！）。 從Reddit和Hacker News來的訪客在保留和頁面瀏覽方面通常是最差的，根據谷歌分析，所以對我來說，評論是我在那些地方發布帖子的主要原因。 那麼Medium呢？Medium是一個非常酷的平台，但請記住，這不是你的平台。 總是在自己的網站上用自己的域名寫帖子，然後使用導入故事功能將它們導入Medium。 最重要的是，試著在已經有觀眾的出版物上發布它們。出版物需要您的內容，因為他們每天都需要一些好的文章來滿足他們渴望知識的人們的需求。 玩長遠的遊戲 沒有什麼比內容更重要。 除此之外，沒有什麼比玩長遠遊戲更重要。 根據我的計算，除非發生某種“星體對齊”的情況，我寫的每篇文章至少需要6個月才能開始排名靠前。我如何知道這一點？經驗。 我在2007年開始我的第一個技術博客，並經營了4年，直到內容過時。我鎖定目前已經淘汰的技術，使用意大利語寫作（這是一個錯誤，因為我的目標觀眾比使用英語寫作的目標觀眾少了大約50倍），並且犯了一些技術上的錯誤，導致我的流量減少一半並使我的動力下降（小貼士：永遠不要遷移到不同的域，即使您當前的域名很糟糕 - 即使所有正確的重定向都放在那裡）。 2012年，我在當前域名下重新開始我的博客，並隨著時間的推移寫了一些帖子，沒什麼特別的。在2017年夏天，我開始學習Go語言，並打算找到一份“正式工作”，所以我決定每天寫一篇關於我的學習內容的博客文章，進行一些小教程，以建立一個“作品集”，並希望給雇主留下好印象。結果，我找不到一份讓我感興趣的好的遠程Go工作，於是我停止了寫關於Go的博客文章。 然後我轉向學習React，這是我一直想學習的東西之一。我開始在另一個網站上寫關於我的新學習的文章，這個網站名為writesoftware.org。域名很酷，我有一個雄心勃勃的項目計劃。我想寫關於我所知道和學到的一切。 然而，幾個月後，我注意到我的Go博客文章在谷歌上開始排名。週週增加的數字已經接近翻倍，直到變得明顯很高。我想：“嗯，這個域名終究應該有一些權威性，而且它很老（5年），它比我這個沒人知道的嶄新域名更有機會排名”。所以在2018年1月，我決定逐漸將writesoftware.org上的帖子移動到flaviocopes.com博客並將它們重新寫成長篇內容。 我寫的關於Go的博客文章在寫完後大約5-6個月開始穩定排名。在接下來的幾個月裡，它們的排名甚至更高，吸引了許多人在我的網站上尋找Go教程。 我的新文章很少排名靠前。有時候一篇文章在前兩天排在頂部，但然後在排名中下降，然後緩慢攀升，並持續幾個月吸引訪客。 撰寫長青內容 注意每個查詢中排名靠前的文章。那些是永遠存在的博客和網站。 展望未來：如果在5年或10年後你是“永遠存在的網站之一”，並且在許多熱門搜索詞上處於頂部，將會發生什麼？ 您的文章在5年後還會有價值嗎？ 10年後呢？ 撰寫長青內容，不要寫關於新聞、會議、X庫的最新版本或任何其他與時事有關的事情。 為你的內容優化結構 內容為王，對吧，但它必須被很好地呈現。 任何CMS或網站生成器（我使用Hugo）都將讓您應用一系列常用的技巧，以使您的內容更容易： 優化共享 優化搜索引擎 優化共享意味著您應該擁有og元屬性，在Twitter上分享時將顯示恰當的卡片。Twitter對開發者來說很重要，每篇帖子都應該有一個自定義圖片。 優化搜索引擎意味著您應該應用一切可能使搜索引擎更喜歡您的內容的方法。沒有太過瘋狂，但是： 使您的網站以移動設備優先 絕對要使您的網站在服務器端渲染 使網站盡可能快速。靜態網站很好 使用越少的CSS和JavaScript越好 使用schema.org微格式 將帖子的發布日期和更新日期設置為微格式 在您的博客文章中添加盡可能多的鏈接，以增加站內鏈接 這應該足夠開始了，不要太瘋狂。

Service Workers是行動網頁上預先引進Web應用中的一項核心技術。它們允許資源的快取和推播通知，這兩個主要的特點早期只在本機應用程序中出現。 Service Workers介紹 背景處理 離線支援 安裝期間進行預快取資源 快取網路請求 Service Worker生命週期 註冊 範圍 安裝 啟動 更新Service Worker 提取事件 背景同步 推播事件 關於控制台日誌的注釋 Service Workers介紹 Service Workers是漸進式Web應用的核心，因為它們允許資源的快取和推播通知，這是到目前為止區分本機應用程式的兩個主要特點之一。 Service Worker是您的網頁與網路之間的可編程代理，提供截取和快取網路請求的能力，有效地為您的應用程序創建了一個離線優先的體驗。 它是Web workers的一種特殊類型，是與Web頁面關聯的JavaScript文件，在工作上下文中運行在另一個線程上，不阻塞主線程，並且具有非阻塞的好處 - 因此可以進行計算而不會犧牲用戶界面的響應速度。 由於處於單獨的線程上，它沒有DOM訪問權限，也無法訪問本地存儲API和XHR API，只能使用通道消息API與主線程進行通信。 Service Workers與其他最新的Web API合作： Fetch API Cache API 而且它們僅在HTTPS協議頁面上可用，除了不需要安全連接的本地請求以進行更簡單的測試。 背景處理 Service Workers獨立於它們相關的應用程序運行，當它們處於非活躍狀態時，它們可以接收消息。 例如，在以下情況下，它們可以運作： 手機應用程式處於背景狀態，未活躍 手機應用程式已關閉，所以即使在背景中也未運行 瀏覽器已關閉，如果應用程式在瀏覽器中運行 Service Workers非常有用的主要情境有： 它們可以被用作快取層來處理網路請求，並在離線時快取內容供使用 允許推播通知 Service Worker只在需要時運行，並在不使用時停止運行。 離線支援 以往，Web應用的離線體驗非常差。沒有網路時，許多網頁移動應用程式將無法工作，而本機移動應用程式卻能提供正常運作的版本或某種令人愉悅的訊息。 這不是一個愉快的消息，但以下是Chrome在沒有網路連接的情況下的網頁外觀： 也許這唯一好玩的地方是通過點擊恐龍可以玩一場免費遊戲，但很快就會變得無聊。 在最近的過去，HTML5 AppCache已經有望允許Web應用快取資源並離線工作，但由於其缺乏靈活性和令人困惑的行為，清楚地表明它不夠好，未能兌現它的承諾（並且已經停用）。 Service Workers是離線快取的新標準。 哪種類型的快取是可能的？ 安裝期間進行預快取資源 可以在首次開啟應用時安裝應用中重複使用的資源，例如圖像、CSS和JavaScript文件。 這為被稱為App Shell架構的基礎提供了。 快取網路請求 使用Fetch API，我們可以編輯來自服務器的響應，確定服務器是否不可到達，並提供快取中的響應。 Service Worker生命週期 Service Worker需要經過3個步驟才能完全運作：...