導航器對象

了解什麼是導航器對象以及如何使用它。 瀏覽器提供的window.navigator屬性指向一個導航器對象,它是一個容器對象,提供了許多 Web 平台 API。 標準且被廣泛實現的屬性包括: cookieEnabled - 如果啟用了 cookies,則返回 true。 geolocation - 指向由 Geolocation API 使用的Geolocation對象。 language - 返回表示瀏覽器當前語言的字符串。 onLine - 如果瀏覽器處於在線狀態,則返回 true(不同瀏覽器對此解釋方式不同,請注意)。 serviceWorker - 分配給文檔的ServiceWorkerContainer對象(請參閱Service Workers)。 userAgent - 瀏覽器的用戶代理識別符。 標準的方法包括: registerProtocolHandler() - 一種讓網站以協議處理程序身份註冊的方式。 還有許多其他的方法和屬性,這些方法和屬性可能是實驗性的,或者只在少數瀏覽器上實現並且尚未最終確定,因此我沒有在這裡列舉它們,但是你可以在 MDN 上探索它們。

廣播頻道 API

學習使用廣播頻道 API 進行一對多通訊的基礎知識 通道訊息 API 是一個很好的方式,可以從視窗發送訊息到 iframe,從視窗發送訊息到 Web Worker 等等。 廣播頻道 API 可以用於發送一對多訊息,同時與多個實體進行通訊。 你可以通過初始化一個 BroadcastChannel 物件來開始: const channel = new BroadcastChannel('thechannel'); 要在頻道上發送訊息,可以使用 postMessage() 方法: channel.postMessage('嘿!'); 訊息可以是以下任何支援的值: 所有的基元類型,除了符號類型 數組 物件字面量 字串、日期、正則表達式 物件 Blob、File、FileList 物件 ArrayBuffer、ArrayBufferView 物件 FormData 物件 ImageData 物件 Map 和 Set 物件 要從頻道接收訊息,可以監聽 message 事件: channel.onmessage = (event) => { console.log('接收到的訊息:', event.data); }; 除了發送訊息的來源外,此事件將針對所有聽眾觸發。 你可以使用以下方法關閉頻道: channel.close();

編程音樂

對我來說,進入「狀態」是能做出最好工作的方法。什麼是狀態?就是你在時間和空間上百分之百地專注於你正在做的事情。 如果我無法百分之百地專注於我正在做的事情,結果就會平庸。 對我來說,在編程或寫作時,音樂是必不可少的。 對我來說,最適合編程的音樂是純音樂,沒有人聲。 如果有人聲,我會感覺到我心中的某個部分在嘗試處理聲音並將其轉化為信息。純音樂能避免這種情況。 但我也需要一些有節奏感的音樂。我不能編程時聽著新世紀冥想音樂。那太「柔和」了,如果背景有任何噪音,我都會聽到它,這會分散我的注意力。 我最近最喜歡的音樂類型是Synthwave和Sovietwave。 如果在YouTube上搜索這些關鍵詞,你會找到一些杰出的音樂和視覺效果的視頻收藏,這些在編程時很好看。找到一些我喜歡的視頻後,我將它們下載為mp3格式,這樣我就不必一直開著視頻。 Music for programming這個網站是一個很好的地方,可以找到一些適合作為背景音樂的好歌曲。 我還喜歡的其他音樂是Casey Neistat的背景音樂。 另一個我喜歡聽音樂的頻道是Xerf Xpec或Kuma’s campfire。在這些頻道上,你可以找到一些很棒的老派日本音樂,像這個或這個,是編程時的好伴侶。

編碼是一門藝術

編碼是一門藝術,一種創造性的工藝,一件令人愉悅的事情。 這就是編碼的本質。 我在一所技術高中就讀,學習程式設計和電腦,然後進入計算機工程專業,但從一開始就清楚,大學教授的不是純粹的編程,而是各種工程題目,混合了一些與計算機相關的主題。 非常乾燥,我們只能在實驗室上課時學習實際編程。 缺少的是工藝部分。 人們晚上回家後繼續工作。 這就是自由軟件運動的起源,例如今天被視為理所當然的開源、GitHub、npm… 一個令人崇敬的現象。 對於許多人來說,最好的時間來編程是晚上。為什麼?我不知道。我會說對我來說也是如此。 我認為這是因為我們沒有其他要擔心的事情。不需要去杂货店或郵局。 進入“狀態”,那個你腦海中需要編寫的所有代碼都完美組織在一起的奇妙地方,你會像一位100倍效率的工程師一樣工作,因為在那個特定的時間點上,你就是。 有些人更適合早上,早上對於編碼也很有效。 我們可以強迫自己在一天的任何時間都寫代碼,但在我們最佳的時間這麼做,我們可以更高效率。 辦公室很難集中精神,但我們必須這麼做,因為我們不需要遵從腳本,我們需要找到解決問題的創造性方式。我還沒見過其他工作能讓你走進辦公室看見大家都戴著耳機,為了更聚焦而戴上。非常高強度。 有時我想,編程通常被認為是通過編程技能獲得報酬,成為程序員工作的陰暗陰影。 如果編程被視為繪畫或織毛衣一樣,那將是完全不同的感覺。這是我們晚餐後都喜歡做的事情,來娛樂自己。 這就是為什麼我喜歡像Glitch和Codepen這樣的平台,讓代碼變得很酷。特別是對於孩子和新手來說。 這也是為什麼像The Coding Train這樣的YouTube頻道如此美妙。他們讓事情變得有趣。 例如,當我聽到在工作中,程序員的生產力是基於他們寫的代碼行數時,我感到不舒服。真的嗎? 而截止日期所帶來的壓力在可能已經存在很多壓力的情況下,真的只會增加焦慮。 我並不是說您不應該成為一名程序員,對我來說這是愚蠢的。我們必須支付費用,對吧?在不發達地區,編程職業也是提高收入水平的一種很棒的方式,可以遠程工作。 但如果您唯一編程的時間是為了工作,您就無法將編程視為一門美妙的工藝,而只是作為達到目的的手段。 這很正常,我們每天只有有限的時間,您在日常工作中也可以成為一位優秀的專業人士。很多人都這樣做。我會說這裡有一個50/50的分配。 在我的職業生涯中,我討厭在編程時要追踪時間。這是一個非常愚蠢的做法,會使人感到立即處於灰色的辦公間。 有時我可能會遇到很難解決的錯誤,但由於我的經驗,我可以在10秒內修復。也許我的經驗不足,需要花4個小時去解決它,我是否需要因此獲得更多報酬? 編程也涉及關注一件事情。我可能有一個相對簡單的錯誤,但在修復它的同時,我開始改進代碼並消除一些技術債務。 這需要與提供給客戶更多價值以及附帶效益給業務的商業目標相一致。 對我來說,編程就像玩樂高積木。任何形式的編程,真的。我一段時間前買了一個Arduino套件,使這個東西工作很好,特別是因為它是一個實際的物理設備,而不只是在屏幕上運行的東西。我打算做更多這樣的事情,不是為了做任何特定的事情,而只是隨意嘗試。 企業家可能會因為“這不賺錢”這種想法而阻止內心的童心發揮。我們不要這樣做。 讓內心的童心保持快樂。

談論不同主題的寫作

我已經在這個博客上寫了很長一段時間了。在這段時間裡,我涵蓋了許多不同的主題。 回顧往事,我從一些隨機的 Web 開發主題開始,然後專注於 Go、React、Node.js、CSS、HTML、瀏覽器 APIs、Next.js、Vue.js、Svelte、數據庫、Python、Swift,甚至電子學和 C 語言。 有時候,當我有希望寫一些與我通常所寫的主題不同的內容時,我會考慮一下。 這是我的博客,它不是一本名為“Web 開發”或其他類似的出版物。 儘管如此,當你長時間寫關於一個主題時,即使是像我這樣涵蓋了廣泛範圍的主題,你也會開始覺得自己與讀者之間有一個“合約”。 如果我決定寫關於 X 的內容而讀者對此不感興趣,會發生什麼事呢?他們會停止閱讀或關注這個博客嗎?他們會取消訂閱郵件通訊嗎? 除非你完全偏離了主題,否則幾乎從不會有這種情況。 你讀到了上面的主題列表嗎?它們之間幾乎沒有什麼相關性,除了它們都與編程有關。但是一位 React 開發者對於 C 語言或 CSS 沒有興趣。 因此,廣泛的專業領域是編程,在這個領域下我可以寫關於任何事情。 如果我開始寫關於園藝、狗、或者徒步旅行之類的內容,那就不一樣了。 有時候我會談論商業方面的事情,或者內容的製作,但這些都是相關的。 我考慮過在旅行時寫一些類似“旅遊博客”的帖子,只是為了做些不同的事情。也許有一天我會寫,儘管我不想讓讀者困惑。還有 Google 啊哈哈。 對我來說,規則是寫我想寫的內容。每天寫一篇帖子是關鍵。否則我早就停下來了。如果有一天我想寫關於旅行、烹飪或其他任何事情的內容,我就會去寫。 有時候我寫一篇關於如何為數字遊牧在整個歐洲旅行期間設置我的面包車的帖子,說實話,關於這些主題我獲得了更多的回覆。也許只是因為在他們那個時代這有些不尋常。 我將來要做的一件事是開始寫關於 SwiftUI 和 iOS 開發的內容。我已經考慮了好幾個月了。其實,我想已經有幾年了。 但現在我覺得是合適的時候了。 過去,我決定寫一些我不是非常熱衷的主題,比如數據庫。我對數據庫有多少熱情呢?我開始寫了幾天後就停下來了。 但我想,我可以寫一些我對於 iOS 應用的想法,計劃階段,開發過程,上架 App Store,等等的內容,這可能是我的一部分讀者非常感興趣的內容。 也許他們也有一個 iOS 應用的想法,這可能會是他們開始的觸發點。 我是否對 Web 開發厭倦了?絕對不是。而且任何 iOS 應用也需要與 Web 或 API 相應的對應組件,所以這不意味著我會停止寫關於它的內容。 而且我喜歡 JavaScript。 我只是喜歡編程。用代碼創造事物。不管是 Web 應用、iOS 應用還是桌面應用,都無關緊要。 對我來說,改變一下我寫關於什麼的方式只是為了多元化並保持我的能量水平高。 對我來說一直都是這樣。我會工作在一個 Web 應用上,然後轉到 iOS 應用,然後再轉到 macOS 開發,然後再回到 Web 應用。...

請求 Google 索引你的網頁

我在 Twitter 上看到一個討論,得知你可以要求 Google 索引你剛寫的特定頁面,這樣它就能更快地被索引(加入到 Google 的搜尋結果中)。 我認為這只對新網站有用,所以當我在建立一個新網站時,我想試試看。 假設你已經在 Google Search Console 上設定了你的網域(如果還沒有,請先進行設定),進入「URL 檢查」,在頂部輸入你想要索引的頁面,按下 Enter 以出現以下畫面: 點擊「請求索引」,等待幾秒鐘… 完成!

學習 JavaScript 箭頭函式的教程

箭頭函式是 ES6 / ES2015 中最具影響力的變化之一,現今廣泛使用。它們與常規函式稍有不同。讓我們來看看箭頭函式的用法。 箭頭函式是在 ES6 / ECMAScript 2015 中引入的,自那時以來,它們永遠改變了 JavaScript 代碼的外觀(和工作方式)。 在我看來,這種變化非常受歡迎,現代代碼庫中很少見到使用 function 關鍵字的情況。雖然這種用法仍然有它的用處。 從外觀上看,這是一個簡單而受歡迎的改變,它允許您使用更短的語法來編寫函式: const myFunction = function() { //... } 改為: const myFunction = () => { //... } 如果函式體只包含一條語句,您可以省略大括號,將所有內容寫在同一行上: const myFunction = () => doSomething() 參數通過括號傳遞: const myFunction = (param1, param2) => doSomething(param1, param2) 如果只有一個(且僅有一個)參數,您可以完全省略括號: const myFunction = param => doSomething(param) 由於這種簡潔的語法,箭頭函式鼓勵使用小函式。 隱式返回 箭頭函式允許您進行隱式返回:不需要使用 return 關鍵字就可以返回值。 它僅對函式體中一行的語句有效: const myFunction = () => 'test' myFunction() //'test' 另一個例子,當返回一個對象時,請記得用括號將大括號括起來,以避免它被認為是包含函式體的大括號:...

學習 Web 平台的路線圖

Web 平台是一個令人驚嘆的 API、工具和語言的生態系統,如今比以往任何時候都更加強大。通過我的路線圖,通過簡單的教程學習 Web 平台。 Web 平台是一個令人驚嘆的 API、工具、語言的生態系統,如今比以往任何時候都更加強大。 在這個博客上,我寫了很多與 Web 平台相關的教程和文章。 本文旨在將它們組織起來,讓您可以更輕松地找到它們,並作為學習如何在 Web 平台上進行開發的路線圖。 瀏覽器 API 指南 首先深入研究 DOM,這是瀏覽器提供的最基本的 API。一旦熟悉了這個,可以查看與瀏覽器相關的其他重要 API。 DOM Selectors API XHR API Fetch API Channel Messaging API Cache API Service Workers Progressive Web Apps History API Push API Notifications API Console API CORS Web Workers requestAnimationFrame WebSockets WebRTC Speech Synthesis API SVG,一個令人驚嘆的圖像格式 學習 SVG 存儲 API Web 平台提供了 3 個基本的存儲 API:cookies、Web Storage 和 IndexedDB。瞭解它們的優點和缺點: IndexedDB Cookies Web Storage Web 開發者工具 如果沒有所提供的令人驚奇的瀏覽器開發者工具,我們開發者會完全迷失和恐懼。...

學習React的路線圖

React是一個旨在簡化視覺界面開發的JavaScript函式庫。了解為什麼它如此受歡迎以及它解決了哪些問題。 React是一個JavaScript函式庫,旨在簡化視覺界面的開發。 React在Facebook開發並於2013年釋出,它驅動著一些最廣泛使用的應用程式,包括Facebook和Instagram等眾多應用程式。 它的主要目標是通過將UI切割成一系列的組件,使得在任何時間點上對界面及其狀態的推理變得容易。 React被用於構建單頁Web應用程式。 這個部落格上我寫了一系列關於React的資源和教程。 我將它們都收集在了React手冊中,這是一個方便的免費資源,你可以在這個頁面上下載。 現在就快來下載吧!

學習如何找解決方案和尋求幫助

作為一名開發人員,你需要培養的一項特殊技能是如何找到解決方案,以及在自己找不到解決方案時,如何尋求幫助。 作為開發人員,最好的技能之一就是知道如何解決問題。 你永遠不會遇到一個完全瞭解某項技術的開發人員。好吧,也許在花費大量時間學習其所有細節後才有可能。 但是,當你向某人請教一個略有不同的話題時,他們可能沒有答案。比如,他們對React了如指掌,但當你想知道如何使用React構建iOS應用程序時,他們可能完全沒有做過任何iOS開發。 這時,那個人就需要尋找答案。 你如何通過編程問題找到答案?你如何確定該如何正確地做某事? 這是一種你可以掌握的技能,就像任何一種技能一樣。很多時候,我收到的問題都可以通過一次谷歌搜索便能解答,對我來說這很明顯,因為我已經習慣了這樣做。所以我只需在谷歌上搜索該問題,然後將包含答案的頁面發送給對方。 使用谷歌是完全正常的。每個人都在使用它。這不是“作弊”。我們不是在學校,你被灌輸了從其他人那裡抄襲是不好的觀念。人們在線上分享他們的解決方案,這樣其他開發人員在未來就不用浪費時間了。 這也是我在我的博客中做的事情。 作為一個開發人員,你所擁有的最高級技能是快速找到解決方案,而谷歌是最好的工具。 學會如何正確使用谷歌會讓事情變得更快。例如,如果你想知道如何在JavaScript中獲取數組的第一個元素,你可以使用查詢 javascript get first item array 或 get first item array javascript。谷歌非常聰明,所以即使只是簡單地輸入 how to get the first item of the array in JavaScript?,就好像你正在大聲地說出來一樣,它也能理解你的意思。 有時你會得到太多的搜索結果。在這種情況下,使用谷歌的“-”運算符將刪除包含特定關鍵詞的搜索結果。 例如,how to loop array javascript -while 將顯示出展示如何在JavaScript中循環數組的頁面,但不包括while循環。 你會發現你自己很多時候都在搜索錯誤信息。假設你在React應用程序中遇到了cannot update a component while rendering a different component的錯誤。 你可以使用雙引號搜索該具體的短語。在谷歌中輸入它。有引號的搜索會得到600個結果。沒有引號,會得到3.25億個結果。這樣做有助於你集中注意力,避免看到只是無用的結果。 谷歌只是一個可以快速找到你需要的東西的工具,但谷歌給你的是其他人創建的頁面。 當然,你所找到的具體位置會因語言和框架而異。 有一些涵蓋幾乎所有內容的網站,比如StackOverflow。這是一個為開發人員而設的問答網站,它將出現在你搜索的90%情況下。通常,我遇到的問題以前已經解決過了,而且過去可能有很多方案。 你需要關注的一點是答案是否已經過時。有時,2012年的答案可能不再有效。技術發展得很快。 其他時候,你可能會找到個人開發者撰寫的個人博客。我強烈建議你創建自己的博客,分享你找到的解決方案。如果你花30分鐘查找如何以一個很酷的方式處理數組,那麼可能有其他開發者也遇到了同樣的問題。 如果你的博客文章能幫助他們更快地解決問題,那就是你得到好的因果報應。 有時谷歌並不能提供所有的答案。對於這種情況,每個框架/庫/工具都會有各自的交流平台。有時候是一個論壇,有時候是一個聊天工具,有時候是GitHub。 如果你在使用的技術有官方網站,尋找“社區”鏈接。那裡通常會有幫助。溫和地提問,你會得到答案。在StackOverflow上提問也是一個好主意。 你也可以在你所在的公司尋求幫助。更資深或專業的開發人員很樂意幫助你克服困難。不要害怕提問。對一個經驗老到的眼光來說,可能只需要2秒鐘就能解決你幾小時的問題。