網站太慢？小心 Google Chrome 標註你的網站過慢

這幾天 (11/11~11/12) 是 Google 的 Chrome Dev Summit 活動，活動中展示了瀏覽器相關的技術，包括了 SEO、網路安全、網站速度等相關的議題，你可以在官方的 Youtube 頻道看到所有講者的直播影片。

在這次的活動中，Google 宣佈了一項目前正在實驗中的功能，就是未來可能會在使用者於瀏覽器中載入網站時，標示這個網站的載入的速度是快還是慢。

提示的方法主要有三種，包含了載入畫面（ loading screen ）、載入進度條（ loading progress bar）以及針對連結的操作功能選單（context-menu for links）。後者可以在你點擊連結前提供你網站的速度狀況（應該是在搜尋結果頁面上顯示）。

圖片來源：Chromium Blog

如上圖所示，如果載入的速度比較慢，則會透過網址列下方的藍色進度條來提示，同時頁面中會有文字說明告知使用者這個網站的載入通常比較慢。如果載入速度比較快，則會以綠色的進度條來提示。

這項功能目前仍純屬實驗性，Google 團隊正在收集各方意見，來決定哪樣的呈現方式能帶給使用者最多的價值，所以最後呈現的結果也許不會如目前所公布的這樣，也或許在實驗以及接收各方意見之後，Google 決定放棄也有可能，但 Google 的最終目標在於提供一個良好的使用者體驗，所以這個標示所衡量的標準可能也不會只有單純的速度。而最終 Google 也會提供一個務實且可以達到的標準給所有的網站開發者。

資料來源：

[Notion 教學] – 如何在 Notion 中插入表情符號 emoji

在 Notion 中你可以在幾個地方插入表情符號 emoji 來提升文字或頁面內容的辨識度。

  • 文章標題
  • 文章內容

如果要在文章標題或是文章內容插入 emoji ，你可以使用快捷鍵 Ctrl + Command + Space (MAC) 或是 Windows Key + . 或 ; (Windows) 來叫出 emoji 選擇器。這個 emoji 選擇器是作業系統內建的，你可以把常用的 emoji 加入喜好項目，方便日後使用。

另外在一些地方你也可以加入選擇器，例如當你在頁面編輯時，要連結到某個頁面時，這個頁面連結前面會帶有一個 icon。

另外在 sidebar 側欄中的頁面，也可以修改 icon。

點擊這個 icon 會跳出一個選擇器，這個選擇器裡面的 emoji 內容看起來好像也是去抓系統的，但是選擇器的外觀不太一樣。你除了可以選擇 emoji 以外，還可以上傳自己的圖片或是插入外部連結來當作 icon。

不過實際使用上還是有點差異，例如如果要快速找到你要的 emoji，可以透過輸入關鍵字來找到相關的 emoji，但使用系統內建的選擇器跟 Notion 的選擇器所呈現的結果會有點不太一樣。在系統內建的 emoji 選擇器有時候可能需要用中文的關鍵字才能找到相關的圖示。

在系統內建的 emoji 選擇器中用關鍵字搜尋

使用 Notion 的 emoji 選擇器搜尋

實際在 Notion 中插入 emoji 還是有點不是很方便，比較理想的方式應該是可以類似 Slack 那樣輸入冒號(:) 加入關鍵字就可以插入 emoji，這個需求在 Notion 官方的 twitter 有使用者提到，也許未來就會加入這個功能。

將 Notion 文章內容匯入到 WordPress

Notion 的編輯器對於寫文章來說是一個很好的工具，相對於 WordPress 的古騰堡編輯器順手很多，所以我在思考能不能用 Notion 來寫作，然後同步到 WordPress?

Notion vs. WordPress 古騰堡編輯器 * 小程故事

由於 Notion 目前沒有官方的 API，所以要自動同步文章到 WordPress 目前還無法做到，必須要手動來做。雖然有人透過 reverse-engineering 的方式開發了一套 Go lang API，不過這畢竟不是正規的做法，參考參考就好囉。本篇文章除了介紹如何在 Notion 中寫文章並匯入到 WordPress 網站，你也可以比較一下兩者在內容顯示上的差異。

註：本篇文章由 Notion 攥寫後，匯出為 Markdown 格式再匯入到 WordPress 中。除了設定標題、複製貼上內容圖片以及設定特色圖片、編輯 Loom 影片嵌入方式和本段文字外，沒有做其他的編輯，您可以比較其中的差異。Notion 文章頁面：https://www.notion.so/yuchengblog/Notion-WordPress-1f24f42187d0427a8ddb0a7c59a52748

匯出

Notion 支援 Markdown 語法，且可以匯出 Markdown 格式的內容，所以在匯出的部分算是解決了。匯出文章的 Markdown 檔案後，使用編輯器打開，並全選複製內容。

在 Notion 中匯出 Markdown 格式

匯出的資料夾包含了 markdown 格式的文件內容和圖片

匯入

由於目前內建的 Gutenberg 編輯器不支援 Markdown 語法，所以必須靠第三方外掛來支援。這邊使用的是之前提到的 EditorsKit，EditorsKit 支援 Markdown 語法，請先安裝並啟用 EditorsKit。在第一個步驟完成匯出並複製內容後，打開古騰堡編輯器，直接貼上內容即可。

複製 Markdown 內容並貼上到古騰堡編輯器

格式

以下列出一些常用的內容格式，您可以跟 WordPress 的文章內容做比較

一般文字

文字色彩

粗體

斜體

  • 清單

標題1

標題2

標題3

這是一段引言

感想

使用 Notion 當作編輯器在整個書寫的過程真的流暢很多，當然這樣的方式目前還是存在著一些問題。整理如下：

優點

  • 使用 Notion 寫作，提升撰寫體驗。
  • 由於 Notion 本身有頁面的歷史紀錄(Page History)，所以可以用來取代 WordPress 的版本紀錄(Revision)，節省資料庫空間。
  • 你可以使用 Notion 作為文章的靈感收集、排程規劃和寫作工具，將整個內容發佈流程集中在 Notion 中。參考：How to Use Notion for Blogging。

缺點

  • 許多樣式並不支援，例如在 Notion 分兩欄顯示，匯出後 Markdown 並不支援這樣的顯示。如果想要維持同樣的顯示，就必須要再自行編輯。另外文字的顏色也是不支援的。
  • 在 Notion 中如果要插入站內文章，必須切換回 WordPress 來找到該篇文章的連結，相對不方便(或是文章連結留到匯入WP後再處理)。
  • 圖片需要另外上傳。在古騰堡中你可以直接複製下載的圖片並在編輯器中直接貼上。或是你可以在 Notion 寫文章時，插入外部圖床圖片(Flickr等)，這樣在匯入 WordPress 時就不用再上傳圖片。若原本 Notion 中的圖片有設定說明文字(Caption)，則在匯入 WordPress 後說明文字會變成另一個段落內容。

以上就是我針對 Notion 作為部落格文章編輯器的嘗試，希望日後 Notion 開放 API 之後，能夠讓整個書寫和發佈文章的流程更加順暢。

安裝 WordPress 本機端環境

如果你想要貢獻 WordPress，例如修正一個 bug，或是針對其他開發者所提交的 patch 進行測試，那麼首先你必須要有一個本機端的開發環境，這個開發環境跟我們之前介紹的架設網站的開發環境不太一樣。因為在修正bug或是測試時，所針對的版本一定是目前開發中最新的程式(尚未發佈)，所以透過建置這個環境，你可以確認每個開發者的開發環境都是一致的，也比較不會產生其他問題。

如果你要建置 WordPress 本機端環境 (WordPress Local Environment)，首先你必須要確認你的電腦中有安裝 Docker 以及 node.js。

1.下載最新開發中版本 WordPress

WordPress 目前開發中的版本可以在 Github 上找到，請透過 git 指令將程式碼下載到你電腦中的資料夾。

下載完成後，切換到安裝的目錄中，可以看到整個檔案目錄結構，可以看到這跟我們一般架設網站時所安裝的 WordPress 資料夾並不一樣，這個資料夾包除了包含了 WordPress 本身的核心檔案外(src資料夾中)，還包含了一些讓本機環境執行起來的設定檔，以及開發和測試的相關工具。

2.執行 npm install

在你剛剛下載核心程式的資料夾中，執行 npm install。這個指令會根據 package.json 中的定義安裝相關的套件到 node_modules 資料夾中。

3.執行 npm run build:dev

這個指令會執行一些工作，例如確認程式碼的格式是否符合標準，同時根據設定將程式準備適合開發者使用。

4.執行 npm run env:start

這個指令會啟動 docker。

啟動之後，在瀏覽器輸入 http://localhost:8889，即可連線到剛啟動的 WordPress 網站。

5.執行 npm run env:install

6.執行 npm run env:stop

如果你要停止開發環境，請執行 npm run env:stop

結論

以上就是使用官方的工具來架設本機的開發環境，如果你要貢獻 WordPress 核心，這絕對是不可忽略的第一步喔！

參考資料

修正 npm 錯誤

最近在嘗試架設 WordPress Local Environment，因為需要 node，所以就試著看看電腦上的 node 能不能跑(因為之前有安裝過了)。結果一跑就出現錯誤，錯誤訊息類似這個。網路上找了一些參考資料，大概的原因可以歸納為 node 沒有安裝乾淨，所以必須重新安裝和進行一些設定。

主要參考的文章如下：

把 node 移除

brew uninstall --ignore-dependencies node 
rm -rf /usr/local/bin/node 
rm -rf /usr/local/bin/npm 
rm -rf /usr/local/bin/node_modules

重新安裝 node

brew install node
npm -v

出現以下錯誤

執行 brew link node

執行 brew link node，會出現無法 symlink 的錯誤，建議使用 brew link --overwrite node。
執行後發現有權限的問題，改執行 sudo chown -R $(whoami) $(brew --prefix)/*

執行 brew doctor

發現有一些 unbrew header files 和 broken symlink，建議使用 brew cleanup 來移除

執行 brew cleanup

執行完後，再次執行 brew link node ，會出現下圖中的錯誤訊息。

執行 brew update-reset

再次執行 brew link node

執行 brew link node ，如果出錯則嘗試執行 brew link --overwrite node
終於可以 link 了！執行 node -v ，顯示安裝的 node 版本。

以上，終於修正 node 的問題啦！可以繼續下一步了！

Notion vs. WordPress 古騰堡編輯器

最近在學習使用 Notion 作為 Evernote 的替代工具 ，突然覺得 Notion 的編輯模式跟 WordPress 的古騰堡 (Gutenberg) 編輯器有幾分類似，雖然這兩者的設計和使用定位不一樣，但就編輯的這個概念應該是可以互相學習的。不相信嗎？來看看吧！

核心概念

  • Notion：將內容分成不同的 Block，Block 是不同的內容元件，例如文字、圖片、To Do List。免費的帳號可以使用 1000 個 Block。
  • 古騰堡： 官方都直接稱呼為區塊編輯器(Block Editor)了，應該就不用多做解釋了吧。

開始編輯&加入區塊

在 Notion 和 古騰堡的編輯器中，都可以直接輸入文字來開始編輯，預設的就是文字段落區塊。如果你要加入不同的區塊，都可以透過輸入斜線(/)，來快速選擇要加入的區塊。不同的是，在 Notion 中除了可以選擇區塊外，還可以執行一些命令，例如輸入/delete 可以刪除當前的區塊。輸入/color 可以改變當前區塊文字的顏色。

Notion：輸入斜線來選擇要加入的 Block。
Gutenberg：輸入斜線來選擇要加入的區塊

移動區塊

在 Notion 和古騰堡中，都可以透過拖曳的方式來改變區塊順序。

Notion：滑鼠按住區塊左邊的六個灰點，透過拖曳的方式來改變順序。若是點擊的話可以叫出 Action 選單。

Gutenberg：一樣是透過滑鼠按著區塊左側的六個灰點來拖曳改變順序，另外也可以透過上下的箭頭來改變順序。

變更和轉換區塊

在 Notion 和古騰堡中，都可以將目前的區塊轉換成不同的區塊，但 Notion 可以選擇的操作方式相對多了一點也比較彈性。

Notion：點擊區塊左側的六個灰點來開啟選單，點擊 Turn Into 選單來選擇要轉換的區塊

Notion：在區塊內容在區塊內容的任何一個地方輸入 /turn 來開啟快速選單，選擇要轉換的區塊

Notion：可以一次選擇多個區塊，透過滑鼠右鍵來開啟選單，點擊 Turn Into 來批次轉換成其他區塊

Notion：雙擊文字內容或選擇文字可以叫出工具列，在工具列上的最左側會顯示目前的區塊類型，也可以選擇轉換成其他區塊

Gutenberg：在區塊的工具列上可以改變區塊的類型

工具列

Notion 和古騰堡編輯器針對行內文字都提供了工具列，讓你可以快速編輯文字的樣字、加入連結或是進行其他動作。

Notion：如果要針對行內文字進行樣式設定，需要雙擊文字，或用滑鼠選擇文字，來叫出工具列，在工具列中你可以變更文字樣式，例如常見的粗體、斜體或是加入連結等動作。

Gutenberg：當你滑鼠點擊了某個區塊，就會直接開啟工具列，個人覺得會有點干擾，因為我可能只是要輸入文字，不一定是要改變文字樣式或是做其他動作。在只是要單純輸入文字的狀況下，這個工具列因為會遮住上方的內容反而造成視覺上的干擾，折衷的方式是在設定的地方，將工具列置於編輯器的頂部，但相對的又會影響編輯的順暢度，變成要修改文字樣式滑鼠就必須再移到畫面的上方。

心得

Notion 和 古騰堡編輯器在編輯上同樣都是以區塊 (Block) 為核心概念，但在操作的一些小細節上仍有些微的不一樣。

Notion 作為筆記和協作軟體在一些編輯的體驗上還是做得比較好一點，古騰堡則還有一些進步的空間，例如要修改行內文字 (inline text)，古騰堡就必須另外安裝外掛來達到。另外古騰堡的工具列在單純編輯內容的時候，多少會有點干擾，希望能有改善的方式。但總體而言，兩者都是很好的工具，古騰堡編輯器作為開放原始碼的工具，相信會有更大的改善和擴充空間。

延伸閱讀：