從今天開始，我的域名從 jerryc.me 換到 immyw.com 了。 2018年6月，心血來潮去買了一個域名。當時看到一個 me 後綴，感覺挺適合做個人博客的。本來想買 jerry.me , 很顯然這麼好的域名早就被人註冊了。無奈之下，退而一步選擇了 jerryc。 jerryc 也是我很多賬號的名字（畢竟 jerry 註冊不到）。之後一直有人問我，是不是彈吉他的那位。我就納悶，我也不會彈吉他。去 Google 了之後才發現 原來 jerryc 是一個有名的吉他手啊，怪不得有人問我是不是他本人。 這也帶來另一個煩惱，就是搜索首頁都是他的內容，我自己的網站要到第2，3頁才顯示。畢竟網站的流量不高，那排在首頁的機會就越來越小的。加上 me 域名還是太小眾了，選擇 com 域名還是最好的選擇。 好的 com 域名基本已經被註冊掉了，曾聯繫過一個賣家詢問域名出售，然而報價太高，只能望而卻步。在 Godaddy 上試了很多域名，最終選擇了 immyw 這個域名。不得不説 com 域名比 me 域名便宜太多。 immyw = I AM M** Y** W*** myw 是我的名字粵拼的縮 ...

本文轉自微信公衆號 - 大海我來了原文地址 1.5 萬字 CSS 基礎拾遺（核心知識、常見需求） 本篇文章圍繞了 CSS 的核心知識點和項目中常見的需求來展開。雖然行文偏長，但偏基礎，適合初級中級前端閲讀，閲讀的時候請適當跳過已經掌握的部分。 這篇文章斷斷續續寫了比較久，也參考了許多優秀的文章，但或許文章裏還是存在不好或不對的地方，請多多指教，可以評論裏直接提出來哈。 小 tip：後續內容更精彩哦。 核心概念和知識點語法CSS 的核心功能是將 CSS 屬性設定為特定的值。一個屬性與值的鍵值對被稱為聲明（declaration）。 1color: red; 而如果將一個或者多個聲明用 {} 包裹起來後，那就組成了一個聲明塊（declaration block）。 1234{    color: red;    text-align: center;} 聲明塊如果需要作用到對應的 HTML 元素，那還需要加上選擇器。選擇器和聲明塊組成了 CSS 規則集（CSS ruleset），常簡稱為 CSS 規則。 1234span {   ...

DateDate 類型使用自 UTC 世界協調時間 1970 年 1 月 1 日午夜零時開始經過的毫秒數來保存日期 創建通過使用 new 操作符和 Date 構造函數來創建日期對象 var now = new Date() Date() 可以選擇傳入參數，如果不傳入參數 不傳入參數 會依據系統設置的當前時間來創建一個Date對象，返回當前的日期和時間 傳入參數 Unix 时间戳 即 从1970-1-1 00:00:00 UTC 到该日期對象（UTC時間）的毫秒数 傳入 时间戳字符串 與下文的 Date.parse()所需的參數一樣 傳入 日期成員 與 下文的 Date.UTC() 所需的參數一樣，但是 Date() 會以 本地時間 來處理參數，而不是 UTC。 123// 可見最終的結果 兩個不一樣， 原因是 Date() 會以本地時間來處理參數console.log(new Date(Date.UTC(2021,1,2,12,12,12))) // Tue Feb 02 2021 20:12:12 GMT+0800 (香港標準時間)console.log(new Date(2 ...

Array 類型ECMAScript 數組的每一項可以保存任何類型的數據。 ECMAScript 數組的大小是可以動態調整的，既可以隨著數據的添加自動增長以容納新數據。 創建數組的方法 使用 Array 構造函數 使用 new Array(), new 可以省略不寫。 1234var colors = new Array();var colors = Array();var colors = new Array(20); // 創建長度為20的數組var colors = new Array("red","blue","green") // 創建包含3個字符串的數組 使用數組字面量表示法 1234var color = ['red','blue']var color = [] // 空數組var color = [1,2,] // ie8及之前的版本，會是一個包含1，2，undefined 的數組（長度3），其它的瀏覽器會生成一個包含1，2的數組（長度2）var col ...

以下文章轉載自前端自習課，作者王平安 前言在《初中級前端 JavaScript 自測清單 - 1》部分中，和大家簡單過了一遍 JavaScript 的一些基礎知識，沒看過的朋友可以回顧一下 😁 本系列文章是我在我們團隊內部的 “「現代 JavaScript 突擊隊」”，第一期學習內容為《現代 JavaScript 教程》系列的「第二部分」輸出內容，希望這份自測清單，能夠幫助大家鞏固知識，温故知新。 本部分內容，以 「JavaScript 對象」為主，大致包括以下內容： 對象JavaScript 有八種數據額類型，有七種原始類型，它們值只包含一種類型（字符串，數字或其他），而對象是用來「保存鍵值對和更復雜實體。」我們可以通過使用帶有可選「屬性列表」的花括號 {...} 來創建對象，一個屬性就是一個鍵值對 {"key" : "value"} ，其中鍵（ key ）是一個字符串（或稱屬性名），值（ value ）可以是任何類型。 創建對象我們可以使用 2 種方式來創建一個新對象： 12345// 1. 通 ...

以下文章轉載自前端自習課，作者王平安 前言最近與部門老大一起面試了許多前端求職者，其中「想換個學習氛圍較好的人佔多數」，但良好的學習氛圍也是需要一點點營造出來的🌺。 為此我們組建了我們團隊內部的 “「現代 JavaScript 突擊隊」”，第一期學習內容為《現代 JavaScript 教程》系列，幫助小組成員系統地進行學習鞏固，並「讓大家養成系統性學習和輸出學習總結的學習方式」。 本文作為我輸出的第一部分學習總結，希望作為一份自測清單，幫助大家鞏固知識，温故知新。 接下來開始分享自測清單的內容。 Hello World!腳本引入方式JavaScript 腳本引入方式有兩種： <script>  標籤插入腳本； <script> 標籤 src 設置腳本地址。 script 標籤屬性<script>  標籤有以下常用屬性： srcsrc ：指定外部腳本的 URI， 如果設置了 src 特性，script 標籤內容將會被忽略； 1<script src="example-url.js"></s ...

對於靜態博客來説，Hexo是一款很受歡迎的博客生成器。其擁有數百的主題和插件，方便我們部署和自定義博客內容。然而，很多生成器都有一個跟明顯的缺點，當網站的文章越來越多時，生成所需要的時間也越來越久。如果電腦效能差的話，部署時間則會更加的久。 為了解決這個問題，採用自動化部署是一個絕佳的選擇。現如今提供自動化部署的平台越來越多。像Travis CI，還有最近發佈的Github Actions。我們只需要把Hexo的目錄推送到GitHub去，相關平台監測到對應的Repositories發佈變化，就會自動去執行編譯，並把編譯好的內容發佈到博客Repositories去。 Travis CITravis CI有提供免費版和企業版，以下的教程是在免費版上操作。 免費版 企業版 免費版不支持私人倉庫(Private Repositories)部署 註冊 點擊Sign Up會自動跳到Github上去授權登錄。只需授權登錄就行，完成後會進入操作界面。 設置倉庫Repositories接下來要選擇哪一個倉庫Repositories需要被監測。 點擊Activate all repositor ...

從 Windows Terminal v1.5.10271.0 開始，官方已經支持添加鼠標右鍵菜單，而無須自己添加。 Windows上有很多命令行程序，例如CMD和PowerShell。微軟在Build 2019上推出了一款面向Windows10的命令行程序，這款程序集合了Windows上的PowerShell、CMD以及Windows Subsystem for Linux於一身，解決了不少惹人吐槽的毛病，甚至被稱為Windows下命令體驗的救世主。而我早在Preview版發佈時，就已經下載使用，現在也是我主要使用的命令行工具。然而畢竟現在還是體驗版的關係，所以並沒有集成在右鍵菜單上。在搜索了許久之後，終於在Github上找到了安裝方法。 軟件安裝 Windows Terminal 現在還是 Preview 狀態，我們可以在 Microsoft Store 上下載安裝。當然有能力的人，可以下載Github的代碼自己編譯。 Windows Terminal (Preview) - Microsoft Store GitHub - microsoft/terminal: The ne ...

本文轉載自【总结】调研实现高性能动画 本文是調研如何實現高性能動畫, 提升用户體驗的總結, 文章內容來源於對看過的相關技術文章的總結, 相關技術文章已列到文章末尾, 如有遺漏, 敬請諒解. 快速響應和高度交互的頁面往往能夠吸引大量的用户群體. 相反, 如果頁面存在性能低下的動畫, 動畫不流暢, 動畫過程中頁面閃爍等等, 如此粗糙的交互體驗必然喪失用户量. 對於大多數的設備而言, 屏幕以 60 次每秒的頻率刷新, 即60HZ. 如果一個動畫中的某些幀超過了這個時間, 就會導致瀏覽器的刷新頻率跟不上設備的刷新頻率（跳幀現象）, 出現頁面閃爍. 因此, 高性能的動畫都應該保持在60fps左右. 接下來我們看幾種動畫的實現方式. 基於setTimeout或者setInterval實現的動畫基於幀算法實現的動畫 這是一個基於幀算法實現的 JavaScript 動畫, 這裏設置的每秒鐘更新 60 次, 即60fps. 大家可以看到現在的動畫還是非常流暢的. 動畫的幀率也在 60 附近. 但是由於 JavaScript 運行時需要耗費時間, 而 JavaScript 又是單線程的, 所以如 ...

本文轉自4ark 這個問題已經是老生常談了，更是經常被作為面試的壓軸題出現，網上也有很多文章，但最近閒的無聊，然後就自己做了一篇筆記，感覺比之前理解更透徹了。 前言這個問題已經是老生常談了，更是經常被作為面試的壓軸題出現，網上也有很多文章，但最近閒的無聊，然後就自己做了一篇筆記，感覺比之前理解更透徹了。 這篇筆記是我這兩天看了數十篇文章總結出來的，所以相對全面一點，但由於我是做前端的，所以會比較重點分析瀏覽器渲染頁面那一部分，至於其他部分我會羅列出關鍵詞，感興趣的可以自行查閲， 注意: 本文的步驟是建立在，請求的是一個簡單的 HTTP 請求，沒有 HTTPS、HTTP2、最簡單的 DNS、沒有代理、並且服務器沒有任何問題的基礎上，儘管這是不切實際的。 大致流程 URL 解析 DNS 查詢 TCP 連接 處理請求 接受響應 渲染頁面 URL 解析地址解析： 首先判斷你輸入的是一個合法的 URL 還是一個待搜索的關鍵詞，並且根據你輸入的內容進行自動完成、字符編碼等操作。 HSTS 由於安全隱患，會使用 HSTS 強制客户端使用 HTTPS 訪問頁面。詳見：你所不知道的 HSTS。 ...