部落格更新！

趁著有空，我更新了第二代部落格的程式。主要幾個點：

砍掉外部的 Milligram CSS，只留下需要的渲染程式需要的 Prism.js。
改寫 CSS。自己需要自己寫。
文章內部添加可以顯示日期與標籤的小程式。
favicon 用更小的 SVG 寫。

其中引入的新技術有幾個：

先簡單說明部落格的技術規則：首先，文章會放在 blog-source 裡面、再來在 blog-v2 使用自製的靜態網站產生器，把 blog-source 的文章都弄出來。

這樣做可以把維護文章本身，與其他事務分開。不用為了改 CSS 而去動部落格文章。反之亦然。未來做 API 或查歷史也比較容易。

而之所以有這次更新，是因為我看到了 https://bearblog.dev 這個網站。裡面的功能令我感觸不已：檔案小、速度快、沒有廣告追蹤器、自訂佈景、以及 RSS 服務、可以說是最接近我理想的網站。我心想，我一定要與這個網站看齊。

好，說完簡介後，講點感想。

CSS

這次寫 CSS 蠻快樂的：巢狀選擇器不難用，SCSS 背景的話很好入手；加上 CSS 變數的引入，相當適合近年來的組件化開發。相對單位可以用得很開心、不用擔心一大堆的設計問題……出來的效果我也還算滿意。按需增 code 也符合我的節奏。

自製 API 接合

比較麻煩的問題，是找完全免費的後端環境，以及架設符合該環境的 docker 來練練手。

因為預想中，後端環境不需要用什麼資料庫、接接其他 API 之類的，檔案也不大、暫時也沒有想買域名，所以我完全不想要付錢買程式、然後檢查額度是否被用完什麼的。相反，限制流量我倒是不太在乎。

不過……由於託管的網路雲，費用算法太麻煩，沒有保證每月低於多少完全免費啥的，所以這邊卡了很久──直到看到 Free for Developers 裡面的 Serv00.com 這網站，才想到這件事。

然後，架設 docker 的玩意是惡夢。最大的問題，大概是如何設定 nginx 了：一大堆莫名其妙的 API 名稱、還有奇奇怪怪的符號，根本弄不清楚哪裡幹嘛、路徑怎麼寫之類的。

唉……天知道還有 mysql 呢。如何設定資料庫，註定又會是另一場麻煩吧。我想。

然後呢，我在後端接 API 主要是想接日期時間，把文章的資訊補完。這樣，設定語言或得到時間什麼的，就用不著對靜態網站產生器下手了。

至於接 API 最大的問題，大概是如何應對這種錯誤回應吧：有些問題如 API 超過了使用的 rate limit，那錯誤回應就很難模擬與重現，如何是好？PHP 的經驗也與 JavaScript 不太一樣。所以寫起來，實在是有點尷尬。

標籤小程式：Web Component 與 Temporal API

Web Component 很難用。因為程式主要是寫了 Shadow DOM 以外、裡面各種元素也要靠 Web API 寫法完成：

class Foobar extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({ mode: "open" });
        shadow.appendChild( this.data_component() );
    }
    data_component() {
        const wrapper = document.createElement( "span" );
        wrapper.setAttribute("title", `Element: `);
        wrapper.classList.add("data-component");
        wrapper.appendChild( /* Whatever on earth the element is */ );
        return wrapper;
    }
}

這比起 Vue 或 React 都不直覺：

<template>
    <span class="data-component" v-bind:title="asd">
        <!-- Whatever on earth the element is -->
    </span>
</template>

<script>
const asd = ref("Element: ");
</script>

export function App() {
    const [asd, set_asd] = useState("Element: ");
    return <span className="data-component" title={asd}>
        {/* Whatever on earth the element is */}
    </span>;
}

所以我覺得，短期內 Vue 與 React 之類的 SPA 框架，應該還有一席之地。

Temporal API 是個曲線有點陡峭的 API。不好學，但學會了，就會發現比 Date API 好用：至少不同時區的同一個時間，可以簡單用下去。文字本地化也簡單多了。

小結

好啦，總之這次做得還不錯。我喜歡。

接下來，我想看看能不能把 blog-v2 的程式壓縮起來，看看大小會不會變小呢？但覺得很難吧。另外就是，能不能做 RSS 呢？