September 21, 2022

你可能不知道URL的路徑編碼Percent-encoding

前言

語言文字事件有趣的事情，英文由26個字母反覆組合，描述各種現象。中文永字八筆，構築千萬象形文字。在電腦的世界裡，一切的一切都是由無數個0和1所表示，你所從螢幕見到的任何文字、圖片、影片都是。在文字的表示法中，有一個最早誕生的編碼方式–ASCII Code。從某種角度來說，它也是在電腦世界中最安全的表示方式。

我們介紹過如何安全的儲存JavaScript程式碼而不受到編碼影響。如何在有限的字元中，在網頁HTML表達多國語言的文字。分享過DNS與電腦是如何認識IDN。這次，要來說說URL裡關於Path字段的編碼方式。

URL格式

當我們瀏覽https://bob:bobby@www.lunatech.com:8080/file;p=1?q=2#third¹，實際上可以將這個URL拆分成好幾個部分來看。

+-------------------+---------------------+
|        Part       |       Data          |
+-------------------+---------------------+
|  Scheme           | https               |
|  User             | bob                 |
|  Password         | bobby               |
|  Host             | www.lunatech.com    |
|  Port             | 8080                |
|  Path             | /file;p=1           |
|  Path parameter   | p=1                 |
|  Query            | q=2                 |
|  Fragment         | third               |
+-------------------+---------------------+

https://bob:bobby@www.lunatech.com:8080/file;p=1?q=2#third
\___/   \_/ \___/ \______________/ \__/\_______/ \_/ \___/
  |      |    |          |          |      | \_/  |    |
Scheme User Password    Host       Port  Path |   | Fragment
        \_____________________________/       | Query
                       |               Path parameter
                   Authority

September 20, 2022

你可能不知道隱藏在Domain裡的編碼punycode

前言

2017年我有幸取得一年免費的「.台灣」域名。自此我也花了一點時間了解什麼是國際化域名（Internationalized Domain Name，IDN）。

在今天你可能也看過不少並非由英文、數字組成的域名，如果是中文或是你的母語，或許會感到一種貼切感，有些又比羅馬拼音更好記。但你知道的嗎？這可能是隱藏在網址列的假象。

國際化域名（Internationalized Domain Name，IDN）

國際化域名（英語：Internationalized Domain Name，縮寫：IDN）又稱特殊字元域名，是指部分或完全使用特殊的文字或非拉丁字母組成的網際網路域名¹

早期的頂級域名只有.com、.gov、.org、.net、.int、.edu、.mil。

這些頂級域名最初指的都是美國。後來才開始有了國家級域名如.tw。加上作用後同樣視為頂級域名如.com.tw。

隨後也出現了.jobs、.info、.tv、.cc等等為後綴的域名。

域名的功用性，個人感覺某種程度在降低。有些域名的申請越來越容易。

在「.台灣」後綴前，似乎就已經有非英文組成的域名了。譬如：https://中文.tw/ 。

現在，除了.tw的後綴，還可以申請.台灣(繁體)、.台湾(簡體)的後綴。譬如： https://中文.台灣/ 。

國際化域名(IDN)可以提供一個好記、在地化的名字，有時候或許可以提升品牌形象。

國際化域名編碼（英語：Punycode）

不過，早期的DNS其實並不認得這麼多字。實際上這部分瀏覽器事先做了轉換了，像是 https://中文.tw/ ，在我使用的Mozilla Firefox Browser還可以短暫看到https://xn--fiq228c.tw/。是的這就是 https://中文.tw/ 編碼後的結果。透過在瀏覽器網址列輸入xn--fiq228c.tw，同樣可以進入 https://中文.tw/ 。

September 19, 2022

你可能不知道HTML Code Number

我們都知道的 `<` 和 `>`

如果需要在HTML裡面讓瀏覽器顯示<和>，可不能直接寫。你應該要這樣寫：

<p>
    example: &lt;input/&gt;
</p>

來呈現內容

example: <input/>

其中lt表示: LESS-THAN ；而gt表示：GREATER-THAN。這是他們的符號名稱，同時還有號碼名稱。可以使用10進制或16進制來表示這兩個符號，因此還可以寫成：

<p>
    example: &#60;input/&#62;
</p>
<p>
    example: &#x3c;input/&#x3e;
</p>

關於HTML編碼這件事情

與其他程式語言的原始碼儲存方式一樣，HTML文件是以純文字方式存在的。這也就存在一個問題：如果不告訴電腦該用什麼編碼方式解讀它，就可能解讀成亂碼。

比如以下HTML內容使用Big5儲存：

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8"/>
    <title>你好，世界</title>
  </head>
  <body>
    <h1>你好，世界</h1>
    <p>怎麼跟得上臺灣</p>
  </body>
</html>

你可能得到這樣的結果：

September 18, 2022

你可能不知道在JavaScript裡的萬國碼

那時、天下人的口音言語、都是一樣。
他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。
他們彼此商量說、來罷、我們要作甎、把甎燒透了。他們就拿甎當石頭、又拿石漆當灰泥。
他們說、來罷、我們要建造一座城、和一座塔、塔頂通天、爲要傳揚我們的名、免得我們分散在全地上。
耶和華降臨要看看世人所建造的城和塔。
耶和華說、看哪、他們成爲一樣的人民、都是一樣的言語、如今旣作起這事來、以後他們所要作的事、就沒有不成就的了。
我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。
於是耶和華使他們從那裏分散在全地上．他們就停工、不造那城了。
因爲耶和華在那裏變亂天下人的言語、使衆人分散在全地上、所以那城名叫巴別。〈就是變亂的意思〉
– 創世記11

從一封亂碼郵件開始說起

自己個人很少書寫電子郵件，收到的郵件也多數是某種活動、告知事項或廣告類信件。有些時候會收到一些需要回信或是主動發信件的情況。絕大多數文字語言上都不是什麼問題。但就是偶爾會有一兩封信件在眼前呈現的是我看不懂得符號。

最近，我就收到過一封信件…是亂碼。

會呈現亂碼的原因，有很大程度是顯示軟體錯誤的解讀了信件內容。這種情況可能可以透過取得原始信件資料，在使用其他編輯器和解碼方式打開顯示。

以信件來說，常見的分成兩種類型：

純文字
HTML文件

特別是HTML文件，會有一段以<meta/>標記內容使用的編碼方式(charset)。

September 17, 2022

你可能不知道void也是一個運算子

void也是一個運算子

你可能不知道void也是一個ECMAScript的保留關鍵字 (reserved keyword)，也可能不知道它也是一個 運算子。

誒黑~！
因爲這張卡的效果就是：

什麼都不給

你可以像是一元運算子那樣使用它:

var a = 1;
a = -a; // -1
a = !a; // false
a = typeof a; // boolean
a = void a; // undefined

也可以將表達式用括號包起來，像是函式呼叫：

var a = 100
a = void(a) // undefined

實際上這個行爲更像是先針對表達式(a)求值，在使用運算子void。過程中不存在一般意義上的函式呼叫。

September 16, 2022

這些那些你可能不知道我不知道的Web技術細節系列(前言)

前言

「這些、那些你可能不知道、我不知道的Web技術細節」，這是個我在這短短兩年實際工作上，遇到的一些原先並不清楚，甚至不知道的Web技術。

有一些或許是新的技術規範、有一些只是很冷門的技術知識、也有一些與實際實現有關。

你可能已經知道，也可能不清楚。邀請你與我一起探索這些冷門舊技術、鮮爲人知的新技術的技術細節喔～