how-to-learn

如何學會學習 學習事物更快、更有效率的方法的心得和觀察 作為開發人員和軟體工程師,我們注定要無休止地學習。 10-15年前,要想在這個行業成為頂尖人才,您必須掌握Java、JSP、Servlets和Tomcat。也許之後您學會了Objective-C和Cocoa Touch,因為手機應用程序是新潮流,而且老實說真的很激動人心!現在一切都關於React和現代JavaScript-3年前的JavaScript已經不再是JavaScript-它是過時的JavaScript。作為一名系統開發人員,C++然後是Go然後是Rust?Haskell和Elixir呢? 每隔幾年就會有一個重大的趨勢和就業市場的變化。 我喜歡學習。掌握新知識對於提高專業水平非常有用,作為一名開發人員,您學到的每一項知識都是您工具箱中的一個工具,對您的職業生涯有莫大的幫助。 在這篇文章中,我想討論我學習得更快更有效的方法。 戰勝拖延症 拖延是您的敵人。它可以以多種形式出現,例如看Netflix或瀏覽Reddit。它也可以表現為做一些淺薄的工作,一些不重要的任務,這些任務實際上並不值得做。但是這讓您有了生產力的感覺,同時又把您從真正的事情-學習新知識,分散了注意力。 如何戰勝拖延症?您需要對此進行訓練。有一種方法是開始做。例如,作家們迫使自己寫作的方式之一就是每天專注於寫作200個詞。一旦您開始寫作並寫滿這200個詞,您可能已經進入了寫作的狀態,可以繼續下去。您專注於過程,而不是結果。您也可以寫200個不好的字直到您進入“狀態”,並寫出5000個像《Inc》雜誌水平的字。 控制注意力 我們需要盡一切所能來戰勝拖延症。我所做的其中一件事是使用一個名為SelfControl的macOS應用程式,以及一個名為Block Site的Chrome擴展程式。我封鎖了所有與工作無關的社交媒體,以及我經常訪問的所有新聞網站。要觀看這些內容,我必須使用iPad或手機。 管理時間 另一種方式是進行時間分段。西番蓮(pomodoro)技巧在這方面非常有幫助:您工作25分鐘,休息5分鐘。按需調整時間,但主要的結論是您在指定的時間內進行工作,並有休息時間。然而,我無法接受這種固定性的技巧。我拒絕在我的工作周圍建立任何嚴格的結構,但我有類似的方法。只有在我有靈感時才寫作。如果我沒有靈感,我就不會坐在桌前寫作。 分而治之 我靠學習然後教授這些知識來維生。例如,下個月我將深入研究GraphQL並制作一個關於它的課程。對我來說,這樣做有很大的好處,因為我一直在學習新東西。當然,要學習的事情永遠不會有盡頭。對於參加我課程的人也有很大的好處:我從他們的起點開始,因此我不會陷入專家的陷阱,即假設事情並為錯誤的受眾創建一些資源。我喜歡這樣。 然而,這也帶來了一個挑戰:我怎樣才能學得足夠快?我按塊工作。我選擇一個主題,參加幾門課程,閱讀盡可能多的書,並嘗試列出整個論點的目錄。這將成為電子書的目錄。然後,我開始獨立地撰寫每個塊的內容。我有一份列印出來的清單,每天我選擇1、2或更多我心情可以學習和寫作的主題。根據心情學習更容易。此外,如果有一天我不想做,我就會跳過,明天再回來,精神饒恕,準備好開始。 將一個大主題分成小塊更加容易掌握和理解。如果我每天解決一個問題塊,到月底我已經學到了很多東西。每一個塊都是整個大畫面的一部分,我所要做的就是可視化這個大畫面。每個塊都是一篇博客文章,通過創建一本電子書來理解整個大畫面。 我真的鼓勵任何人採用我的方法,並嘗試立即解釋他們所學到的東西。不要害怕,即使您是這個主題的新手,您的觀點在此議題上也有一席之地。 從書中學習 值得討論的另一個項目是閱讀書籍。我有很多很多很多我想閱讀的書。我的圖書應用程式裡堆滿了我從未閱讀過的好書。我讀了很多書,很多很棒的書。很多時候我被一本書觸動到了,但一個月后,我忘記了在其中讀到的內容。您如何記住閱讀一本書時學到的東西? 這是我的技巧。無論我使用Kindle還是iPad閱讀,或者我手上有一本實體書,我都會對我想記住的所有主要概念進行標記。 然而,僅僅記住一些我想記住的內容是不夠的。 完成書籍閱讀後,我將只閱讀我所標示的內容,並在閱讀過程中對書籍進行摘要。這是私人的,但我也開始發布這些摘要,就像我為《深度思考》這本書一樣。 我不僅使這些概念在我腦海中形成了確定的印象,還將它們寫下來(這是一個很大的幫助),現在我有了一份可以回頭查看我從這本書學到了什麼的參考資料。 或者,我只是想寫下我從一章或一個段落中學到的東西,並根據我的意見進行擴展。這也很好。 應用所學 當涉及到學習一門編程語言或框架時,您最好的方法就是使用它來創建項目。側邊項目特別適合這個目的,因為您不需要完全掌握面向企業的設計模式,您可以一邊學習一邊進行。學習某樣東西並不需要100%的擴展架構。那只會讓您陷入停滯不前的困境。做一些有趣的項目也是很好的。我喜歡在注重樂趣的平台上工作,例如Glitch。 您也可以創建遊戲,或者正如許多人所做的那樣,在Product Hunt上推出小型產品。這是一個很好的方式,可以給您帶來迫切感和推動力,使您不惜一切努力,精心打造出一些讓人們看到並使用的東西,而不是將它完全閒置並在3天后遺忘於硬碟中的項目。 休息 休息對於放鬆心靈非常重要。每天花費1小時在某事上,可能比在一天內花費12小時更人性化。每天晚上,您的大腦都有機會思考您所學到的內容。我認為這樣更好。也許您可以輪流1小時閱讀和1小時收聽播客或進行一個實踐項目。 此外,當您被卡住某件事時,不要花費3小時在上面。出去走走。打個盹。出去跑步。做點別的事情,然後回來。我無法計算有多少次我在第二天醒來,頭腦中已經有了解決方案。 或者,解決方案在淋浴時等著您,或者在您在森林中遛狗時等著您。令人驚訝的是,當您在工作時,這麼多次點子就是藏起來不願出現。

how-to-learn-react

#如何學習React 找出從零開始成為React大師的最佳途徑 你該如何學習React? 和大多數事物一樣,你需要付出一些努力,找到一個好的學習資源,保持學習的一致性,並儘早將所學的應用到實踐中,以加強你的學習並讓所學的知識牢記在腦中。 但是…你應該從哪裡開始? 在本文中,我想列出一些我創建的資源,用於從零開始成為React大師。 首先,你需要堅實的JavaScript基礎。如果你剛開始學習,花點時間深入研究JavaScript基礎知識,再深入學習React。我建議你先閱讀我的JavaScript手冊。 如果你的JavaScript基礎還可以,但有點生疏且不熟悉最新的ECMAScript標準,我的ES5到ESNext手冊也是一個很好的參考資料。 接下來,我的React手冊將成為你最好的朋友。我在這份手冊中花了很多時間,確保它提供了你成為出色的React開發者所需的所有基礎知識。 我認為這些資源會讓你忙上一段時間。 正如我之前提到的,實踐至上。在學習的過程中,專注於每天建立一些東西,即使只是簡單的項目。不要僅僅閱讀理論,要將它應用到實踐中。建立示範應用程式。我有一個示範應用程式點子的長列表,可以從中獲得靈感。 我還開設了一門React課程,在課程中,我將教你如何使用React建立6個實用的項目(當然包括Hooks)。

how-to-list-object-methods-javascript

#如何列出JavaScript物件的所有方法 找出如何獲取包含JavaScript物件方法的陣列 我們可以使用 ‘Object.getOwnPropertyNames()’ 函數來獲取與物件相關聯的所有屬性名稱。 然後,我們可以過濾結果陣列,只包括那些屬性名稱是函數的。 我們可以通過使用typeof來判斷它是否為一個函數。 例如,以下是我們可能創建的實用程式函數: getMethods = (obj) => Object.getOwnPropertyNames(obj).filter(item => typeof obj[item] === 'function') 這只列出在特定物件上定義的方法,而不是在其原型鏈中定義的任何方法。 要做到這一點,我們必須採取稍微不同的路線。我們必須首先迭代原型鏈並將所有屬性列在一個陣列中。然後,我們檢查每個單個屬性是否為函數。 為了確保在瀏覽原型鏈時不重複方法(例如始終存在的 constructor ),我們使用了一個Set數據結構,它確保值是唯一的: const getMethods = (obj) => { let properties = new Set() let currentObj = obj do { Object.getOwnPropertyNames(currentObj).map(item => properties.add(item)) } while ((currentObj = Object.getPrototypeOf(currentObj))) return [...properties.keys()].filter(item => typeof obj[item] === 'function') } 使用示例: getMethods("") getMethods(new String('test')) getMethods({}) getMethods(Date.prototype)

how-to-set-fragment-part-url

#如何設置URL的片段部分 了解如何設置URL的片段部分的值 我有一次需要以編程方式更改URL的片段部分的需求 那是在#數字符號之後的部分 我當時在index.html上,我想要將URL更改為index.html#second這樣的形式 這是因為我有一個目錄,但是鏈接的工作方式並不符合我的期望 以下是我的解決方法: window.location.hash = 'second'

how-to-trim-leading-zero-number

#如何在JavaScript中刪除數字前面的零 如果你有一個以零開頭的數字,比如 010 或者 02,你該如何刪除那個零呢? 有多種方法。 最明確的方法是使用 parseInt(): parseInt(number, 10) 10 是進制,應該始終指定以避免在不同瀏覽器上出現不一致,儘管一些引擎可以正常工作而不需要指定進制。 另一種方法是使用 + 一元運算符: +number 這些都是最簡單的解決方案。 你還可以使用正則表達式,像這樣: number.replace(/^0+/, '')

HTML `a`標籤

了解使用HTML a標籤創建連結的基礎知識。 連結是使用a標籤來定義的。連結的目的地是通過其href屬性來設置。 例如: <a href="https://flaviocopes.com">點擊這裡</a> 在起始標籤和結束標籤之間是連結的文字內容。 上面的例子是絕對URL。連結也可以使用相對URL: <a href="/test">點擊這裡</a> 在這種情況下,點擊連結時,用戶會被移動到當前源頭的/testURL。 注意/字符的使用。如果省略,而不是從源頭開始,瀏覽器只會將test字符串添加到當前URL中。 例如,我在頁面https://flaviocopes.com/axios/上,有以下鏈接: /test點擊後會將我帶到https://flaviocopes.com/test test點擊後會將我帶到https://flaviocopes.com/axios/test 連結標籤內部可以包含其他元素,而不僅僅是文字。例如,圖像: <a href="https://flaviocopes.com"> <img src="test.jpg"> </a> 或者其他任何元素,除了其他的<a>標籤。 如果你想在新標籤中打開連結,你可以使用target屬性: <a href="https://flaviocopes.com" target="\_blank">在新標籤中打開</a>

HTML `audio` 標籤

瞭解使用 HTML audio 標籤的基本知識 audio 標籤允許您在 HTML 頁面中嵌入音訊內容。 此元素可以以流式傳輸音訊,也可以使用 src 屬性引用音訊來源,例如: <audio src="file.mp3" /> 預設情況下,瀏覽器不會為此元素顯示任何控制項。這意味著只有在設置為自動播放(稍後會講到)時,音訊才會播放,且用戶無法看到如何停止它、控制音量或移動到音軌的其他位置。 要顯示內建的控制項,您可以添加 controls 屬性: <audio src="file.mp3" controls /> 控制項可以具有自訂外觀。 您可以使用 type 屬性指定音訊檔案的 MIME 類型。如果未設置,瀏覽器將嘗試自動確定類型: <audio src="file.mp3" controls type="audio/mpeg" /> 音訊檔案默認不會自動播放。添加 autoplay 屬性可自動播放音訊: <audio src="file.mp3" controls autoplay /> 注意:移動瀏覽器不允許自動播放 如果設置了 loop 屬性,則音訊播放會在 0:00 繼續重新播放,否則如果未存在該屬性,音訊會在檔案結束時停止播放: <audio src="file.mp3" controls autoplay loop /> 您也可以使用 muted 屬性將音訊檔案設置為無聲播放(對於這樣做的有用性未知): <audio src="file.mp3" controls autoplay loop muted /> CORS 音訊受到 CORS 的限制,除非您在服務器端允許它,否則無法跨域播放音訊檔案。 預加載音訊 如果未設置 autoplay,則規範指定瀏覽器只會下載音訊的元資料(例如,獲取長度),而不會下載音訊本身。...

HTML `figure`標籤

了解使用HTML figure標籤的基礎知識 通常與 img 標籤一起使用的是 figure 標籤。 figure 是一個語義化的標籤,通常用於在圖像中顯示標題。使用方式如下: <figure> <img src="dog.png" alt="一隻可愛的狗"> <figcaption>一隻可愛的狗</figcaption> </figure> figcaption 標籤包裹著標題文本。

HTML `video`標籤

探索使用HTML video標籤的基本知識。 video標籤允許您在HTML頁面中嵌入視頻內容。 此元素可以通過getUserMedia()或WebRTC使用網絡攝像頭來進行視訊流,也可以通過使用src屬性引用視頻源來播放視頻: <video src="file.mp4" /> 默認情況下,瀏覽器不會為此元素顯示任何控件,只顯示視頻。 這意味著只有在設置為自動播放時(稍後將介紹),音頻才會播放,用戶無法看到如何停止播放、暫停、控制音量或在視頻的特定位置跳轉。 要顯示內置控件,可以添加controls屬性: <video src="file.mp4" controls /> 在Chrome中的外觀如下: 初始顯示的圖像是視頻的第一幀。 您可以使用poster屬性顯示另一個圖像,這是一個常見的需求: <video src="video.mp4" poster="image.png" controls /> 如果沒有指定poster屬性,瀏覽器將在可用時顯示視頻的第一幀。 您可以使用type屬性指定視頻文件的MIME類型。如果未設置,瀏覽器將嘗試自動確定: <video src="file.mp4" controls type="video/mp4" /> 視頻文件默認不自動播放。添加autoplay屬性以自動播放音頻: <video src="file.mp4" controls autoplay /> 某些瀏覽器還需要muted屬性以自動播放。僅將視頻靜音時,視頻才會自動播放: <video src="file.mp3" controls autoplay muted /> 如果設置了loop屬性,則該視頻在0:00處重新開始播放,否則如果該屬性不存在,視頻將停在文件結尾: <video src="file.mp4" controls autoplay loop /> 您可以設置width和height屬性來設置元素的佔用空間,以便瀏覽器可以進行考慮,並且在最終加載時不會更改布局。它接受一個以像素為單位的數值。 CORS 視頻受到CORS的約束,除非在服務器端允許,否則無法跨域播放視頻。 將此標籤放在網頁中並不會發生任何事情。沒有辦法開始播放視頻,並且它不會自動播放。要使視頻播放,必須添加autoplay屬性: <video src="video.mp4" autoplay /> 更改視頻顯示屬性 您可以使用width和height屬性為視頻區域設置寬度和高度,以像素表示: <video src="video.mp4" poster="image.png" controls height="600" width="800" /> 如果不支持video標籤,則顯示內容 video標籤在非常好地支持,直到IE9,所以現在應該不再需要有占位文本,但我們有這個選項。只需添加一個關閉標籤,并在開始標籤和關閉標籤之間插入文本: <video src="video.mp4">不支持視頻標籤</video> 添加多個源 瀏覽器可以實現一種視頻編解碼器,但無法實現另一種。也許您希望使用將文件大小減半的新標準,但仍然希望支持舊的瀏覽器。...

HTML Canvas API 教程

一個用於瀏覽器繪製到屏幕上的方法之一,Canvas API 的指南。 提示:還可以查看我的教程 如何將畫布列印到數據URL、如何將文本寫入到HTML畫布、如何在HTML畫布中加載圖像 和 如何使用Node.js和Canvas創建並保存圖像 HTML Canvas 是一個 HTML 標籤 <canvas>,我們可以使用 Canvas API 在其中繪製。 創建一個畫布 創建一個畫布就像在空白的 HTML 文件中添加一個 <canvas></canvas> 一樣簡單: 在頁面中看不到任何內容,因為畫布是一個不可見的元素。讓我們添加一些邊框: Chrome 自動給 body 元素添加了 8px 的邊距。這就是為什麼我們的邊框看起來像一個框架,你可以通過設置 body { margin: 0; } 來刪除邊距。我們暫時使用默認值。 現在我們可以使用 DOM 選擇器 API 從 JavaScript 中訪問我們的畫布,可以使用 document.querySelector(): const canvas = document.querySelector('canvas') 更改畫布的背景顏色 在 CSS 中更改背景顏色: canvas { background-color: lightblue; } 調整畫布大小 在 CSS 中設置寬度和高度: canvas { border: 1px solid black; width: 100%; height: 100%; } 這樣,畫布就會擴展到填滿外部元素的尺寸。...