lepture.com_rss.xml - sfeed_tests - sfeed tests and RSS and Atom files
(HTM) git clone git://git.codemadness.org/sfeed_tests
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
lepture.com_rss.xml (390455B)
---
1 <?xml version="1.0" encoding="UTF-8"?>
2 <?xml-stylesheet href="/rss.xsl" type="text/xsl"?>
3 <rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><generator>Typlog 3.1 (https://typlog.com)</generator><title><![CDATA[ Just lepture ]]></title><description><![CDATA[ Love its people, but never trust its government. ]]></description><link>https://lepture.com/</link><copyright><![CDATA[ Copyright 2017 Just lepture ]]></copyright><image><url>https://i.typlog.com/lepture/8443372661_918495.png?x-oss-process=style/sl</url><title><![CDATA[ Just lepture ]]></title><link>https://lepture.com/</link></image><atom:link href="https://lepture.com/feed.xml" rel="self" type="application/rss+xml"/><atom:link href="https://pubsubhubbub.appspot.com/" rel="hub"/><pubDate>Wed, 14 Jun 2023 17:34:25 +0000</pubDate><item><title><![CDATA[ Markdown on ruby markup ]]></title><guid>https://lepture.com/en/2022/markdown-ruby-markup</guid><link>https://lepture.com/en/2022/markdown-ruby-markup</link><description><![CDATA[ Design a better syntax of ruby markup for Markdown ]]></description><pubDate>Thu, 14 Jul 2022 13:44:30 +0000</pubDate><content:encoded><![CDATA[ <p>The <code><ruby></code> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of Japanese and Chinese characters. There is a <a href="https://talk.commonmark.org/t/proper-ruby-text-rb-syntax-support-in-markdown/2279"><code><ruby></code> markup syntax discussion</a> in the CommonMark Discussion, among which, I prefer the <a href="https://juanitofatas.com/series/ruby/markdown-ruby-markup">syntax designed by JuanitoFatas</a>.</p>
4 <div class="block-code"><pre><code>[漢字(かんじ)]
5 [漢字(かんじ)](https://jisho.org/search/漢字)</code></pre></div>
6 <p>The benefits are obvious:</p>
7 <ol>
8 <li>The markup looks pretty and easy to understand</li>
9 <li>It works well together with links</li>
10 </ol>
11 <p>However, the syntax for separated ruby annotations is a little complex:</p>
12 <div class="block-code"><pre><code>[[漢(かん)][字(じ)]](https://jisho.org/search/漢字)</code></pre></div>
13 <p>While in <a href="https://github.com/lepture/mistune">mistune</a> <strong>v3</strong>, I've added a ruby plugin for multiple annotations with the below syntax:</p>
14 <div class="block-code"><pre><code>[漢(ㄏㄢˋ)字(ㄗˋ)]
15 [漢(かん)字(じ)](https://jisho.org/search/漢字)</code></pre></div>
16 <p>You can group all ruby texts in <code>[]</code> which can reduce the use of punctuation characters.</p>
17 <p><a href="https://typlog.com/">Typlog</a> has been updated with mistune v3, you can use ruby syntax right now in Typlog. Here are the rendered results with the ruby markup syntax:</p>
18 <p><ruby><rb>漢</rb><rt>ㄏㄢˋ</rt></ruby><ruby><rb>字</rb><rt>ㄗˋ</rt></ruby> with zhuyin, <ruby><rb>漢</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby> with pinyin, and <ruby><rb>漢</rb><rt>かん</rt></ruby><ruby><rb>字</rb><rt>じ</rt></ruby> with hiragana.</p>
19 ]]></content:encoded></item><item><title><![CDATA[ Display country flags emoji on Windows ]]></title><guid>https://lepture.com/en/2022/windows-country-flags-emoji</guid><link>https://lepture.com/en/2022/windows-country-flags-emoji</link><description><![CDATA[ Fix country flags emoji display on Windows with web font. ]]></description><pubDate>Sat, 30 Apr 2022 09:51:46 +0000</pubDate><content:encoded><![CDATA[ <p>I've been using Windows for a while now. Everything goes well except it doesn't render country flags emoji. I didn't notice this until I became a Windows user.</p>
20 <p>In the <a href="https://typlog.com">Typlog</a> admin portal, there is a region visit metric that displays country flags via emoji. It looks terrible on Windows. Here is how would it look like on Windows:</p>
21 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8348687989_856062.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1534/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/8348687989_856062.jpg" alt="Broken country flags" title="Broken country flags"loading="lazy" decoding="async" width="1534" height="873" /></picture><figcaption>Broken country flags</figcaption></figure></div><p>There are several ways to fix this problem:</p>
22 <ul>
23 <li>Display country flags with <code><img></code> tag: <a href="https://github.com/hampusborgos/country-flags">https://github.com/hampusborgos/country-flags</a></li>
24 <li>Using CSS sprits with class names: <a href="https://github.com/lipis/flag-icons">https://github.com/lipis/flag-icons</a></li>
25 <li>Render emoji with web fonts: <a href="https://github.com/talkjs/country-flag-emoji-polyfill">https://github.com/talkjs/country-flag-emoji-polyfill</a></li>
26 </ul>
27 <p>I prefer the web font way, although this repo contains only a few stars on GitHub. I didn't use the code provided by <code>country-flag-emoji-polyfill</code>, it is the <code>woff2</code> font I'm using directly in CSS. The font is a subset of "Twemoji Mozilla".</p>
28 <p>We would load the web font only on Windows because Mac and Linux can display country flags emoji well. In this way, it would reduce the HTTP requests and net bandwidth, though the font is quite small.</p>
29 <p>A simple JavaScript is required:</p>
30 <div class="block-code" data-language="js"><div class="highlight"><pre><span></span><code><div class="line"><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="sr">/windows/i</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">))</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
31 </div><div class="line"><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'win'</span><span class="p">)</span><span class="w"></span>
32 </div><div class="line"><span class="p">}</span><span class="w"></span>
33 </div></code></pre></div>
34 </div>
35 <p>This code will add a <code>win</code> class to the <code><body></code> tag. We would only use the web font for <code>.win</code> in CSS:</p>
36 <div class="block-code" data-language="css"><div class="highlight"><pre><span></span><code><div class="line"><span class="p">@</span><span class="k">font-face</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
37 </div><div class="line"><span class="w"> </span><span class="nt">font-family</span><span class="o">:</span><span class="w"> </span><span class="s1">'Twemoji Country Flags'</span><span class="o">;</span><span class="w"></span>
38 </div><div class="line"><span class="w"> </span><span class="nt">unicode-range</span><span class="o">:</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">1F1E6-1F1FF</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">1F3F4</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E0062-E0063</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E0065</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E0067</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E006C</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E006E</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E0073-E0074</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E0077</span><span class="o">,</span><span class="w"> </span><span class="nt">U</span><span class="o">+</span><span class="nt">E007F</span><span class="o">;</span><span class="w"></span>
39 </div><div class="line"><span class="w"> </span><span class="nt">src</span><span class="o">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="s1">'https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2'</span><span class="o">)</span><span class="w"> </span><span class="nt">format</span><span class="o">(</span><span class="s1">'woff2'</span><span class="o">);</span><span class="w"></span>
40 </div><div class="line"><span class="p">}</span><span class="w"></span>
41 </div><div class="line">
42 </div><div class="line"><span class="nt">body</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
43 </div><div class="line"><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--user-defined-font</span><span class="p">),</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span><span class="w"></span>
44 </div><div class="line"><span class="p">}</span><span class="w"></span>
45 </div><div class="line">
46 </div><div class="line"><span class="p">.</span><span class="nc">win</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
47 </div><div class="line"><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s2">"Twemoji Country Flags"</span><span class="p">,</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--user-defined-font</span><span class="p">),</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span><span class="w"></span>
48 </div><div class="line"><span class="p">}</span><span class="w"></span>
49 </div></code></pre></div>
50 </div>
51 <p>Here is what the region visit metric looks like on Windows now.</p>
52 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8348687961_643282.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1539/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/8348687961_643282.jpg" alt="Twemoji Country Flags" title="Display with Twemoji Country Flags"loading="lazy" decoding="async" width="1539" height="864" /></picture><figcaption>Display with Twemoji Country Flags</figcaption></figure></div> ]]></content:encoded></item><item><title><![CDATA[ 週記，垂死病中驚坐起 ]]></title><guid>https://lepture.com/zh/2022/weekly-20220409</guid><link>https://lepture.com/zh/2022/weekly-20220409</link><description><![CDATA[ 重新振作的一週，希望好狀態能維持下去。 ]]></description><pubDate>Sat, 09 Apr 2022 09:42:37 +0000</pubDate><content:encoded><![CDATA[ <p>春光正好，人也從憂鬱厭世的情緒中解脫出來。也是長久未寫文章了，竟對寫字產生了一種疏離生僻之感。錢鐘書談寫作時說道：我們常把自己的寫作衝動誤認為自己的寫作才能，自以為要寫就意味著會寫。我大概連寫作的衝動都在逝去，同時逝去的還有各種興趣，比如好久沒去拍照了，就連玩遊戲看電影也提不起興致。</p>
53 <p>也許是身處疫情的自我隔離，也許是漫漫冬季的蕭瑟，也許是自我間歇性的抑鬱。之前的幾個月裡，整個人如在泥潭，想要掙脫卻越陷越深，什麼都不想做，不想工作，不想起床，不想吃飯，不想洗澡，不想睡覺。現下終於恢復了，趁著這個時候紀錄一下，寫點流水帳，也算是活在了人間。</p>
54 <h2>作息調整</h2>
55 <p>告别了昼夜颠倒的生活，作息終於規律了起來，現在也算是早睡早起了。一天的時間安排大致如下：</p>
56 <ul>
57 <li>自然醒，時間跨度比較大，大致 6:30 ～ 8:00</li>
58 <li>早餐，可能是烤麵包，可能是出門吃，也可能不吃</li>
59 <li>學習日語，是的，我又一次開始學習日語了，大致是 9:30 開始</li>
60 <li>處理 Typlog 的 bug，或優化代碼，或寫新功能</li>
61 <li>下午，處理真正的工作（養活自己的）</li>
62 <li>晚餐後，看情況，可能還是在為 Typlog 工作，可能是解決 GitHub 上的 Issue，也可能休閒</li>
63 <li>11:00 ～ 12:00 睡覺</li>
64 </ul>
65 <p>以上安排比較彈性，實際上會有一些出入。</p>
66 <h2>日語學習</h2>
67 <p>不記得是第幾次學習日語了，這次是在 NHK 上學習<a href="https://www.nhk.or.jp/lesson/chinese/learn/list/">《簡明日語 2015 》</a>，每天學習一到兩課，目前學到第九課了。這次至少要將這本書學完吧。</p>
68 <p>一點新知分享，<strong>こんにちは</strong>的漢字寫法是<strong><ruby><rb>今</rb><rt>こん</rt></ruby><ruby><rb>日</rb><rt>にち</rt></ruby>は</strong>，<strong>こんばんは</strong>的漢字寫法是<strong><ruby><rb>今</rb><rt>こん</rt></ruby><ruby><rb>晩</rb><rt>ばん</rt></ruby>は</strong>。所以日語的問安並沒有「安」字，亦如我們說早安時會說「早」而省略掉「安」字。當然，我們不會簡略地說「晚」。</p>
69 <h2>Typlog</h2>
70 <p>Typlog 最近做了一些優化，也新增了一些功能。</p>
71 <ul>
72 <li>Typlog 變快了，當然你可能也感受不到，反正我們服務器的壓力變小了點。</li>
73 <li>優化了郵箱列表的任務隊列，開始記錄用戶發郵件的次數，之後會做限制，Pro 用戶每月可免費發 2000 封郵件。</li>
74 <li>跳轉服務支持 wildcard matching 了。</li>
75 <li>自動鏈接 embed 服務支持 App Store、IMDb、豆瓣電影以及所有支持 Open Graph 的網站了。</li>
76 </ul>
77 <p>因為豆瓣有中國特色的圖片防盜鏈設置，豆瓣電影的卡片會出現圖片無法加載的問題，這是由於豆瓣設置了 referrer 校驗。但是在現代瀏覽器里，這種校驗是沒有意義的，除非限制必須帶有特定的 referrer。我們可以通過 <code>referrerpolicy="no-referrer"</code> 來防止瀏覽器發送 referrer 信息。</p>
78 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">img</span> <span class="na">referrerpolicy</span><span class="o">=</span><span class="s">"no-referrer"</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="p">/></span>
79 </div></code></pre></div>
80 </div>
81 <p><a href="https://movie.douban.com/subject/1291843/">https://movie.douban.com/subject/1291843/</a></p>
82 <h2>Authlib</h2>
83 <p>修復了一些 bug，發佈了 <a href="https://github.com/lepture/authlib/releases/tag/v1.0.1">v1.0.1</a> 版本。接下來可能會再次投入時間到 Authlib 的改進。</p>
84 <hr />
85 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1500/format,webp 1x, https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_3000/format,webp 2x" media="(min-width: 1500px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1500 1x, https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_3000 2x" media="(min-width: 1500px)"><source srcset="https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/8350430928_900284.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/8350430928_900284.jpg" alt="鯉幟"loading="lazy" decoding="async" width="4032" height="3024" /></picture></figure></div><p>又到了鯉魚旗飄揚的時節了，出門的時候手機隨手拍了一張，也算是拍照了吧。</p>
86 ]]></content:encoded></item><item><title><![CDATA[ 程序員與文學衝突 ]]></title><guid>https://lepture.com/zh/2020/tweet-yuan</guid><link>https://lepture.com/zh/2020/tweet-yuan</link><pubDate>Sun, 06 Dec 2020 06:21:58 +0000</pubDate><content:encoded><![CDATA[ <p>昨日 Yachen Liu 談「程序員」一詞引起了頗多討論，其文曰：</p>
87 <div class="blockquote"><blockquote><p>一直很不喜欢「程序员」这个描述。以「员」为后缀的职业，如收银员、驾驶员等，多为一种机械地反复做同一件事情的工作，这个标准对 coding 来说太低、太无趣了。「软件工程师」则好的多，既表明了专业性，也包含了 coding 所具备的艺术和创造的可能。</p>
88 <p>via <a href="https://twitter.com/Blankwonder/status/1335053263360540672">Tweet</a></p>
89 </blockquote></div>
90 <p>暫不言「員」字一解，且談他人回復，或曰其言「是對其他職業的貶低」。Yachen 表示否定，今<a href="https://link.medium.com/nVhkAMH8Ybb">撰文解釋於此</a>：</p>
91 <div class="blockquote"><blockquote><p>所以只是我的言论映射出了批判者自己内心的价值观，而这些批判者往往也是善良的，这个价值观很刺眼他不愿意相信是自己的偏见，所以要怪罪于我的言论。</p>
92 </blockquote></div>
93 <p>這一表述亦是常見的，不過於「你自己心裡有鬼」，此文怕也是不妥，再次演繹了「子非魚，安知魚之樂？」和「子非我，安知我不知魚之樂？」</p>
94 <p>我們不談他人心中所想，只談文字表達。</p>
95 <p>原文 Tweet 建立了一個矛盾衝突，將程序員與收銀員、駕駛員等對立起來，而這個矛盾衝突是比較激烈的，如果沒有「這個標準對 coding 來說太低、太無趣了」一句，則衝突會低很多。分析此句，「這個標準」即是指「收銀員、駕駛員等」的標準，不異於指桑罵槐：</p>
96 <p>你們收銀員、駕駛員等的工作標準太低、太無趣了。</p>
97 <p>作者心裏是否這樣想的，我們不知，也不必評說，但是文字的表達上確實是有此意的，所以也怪不得他人誤解。這裏並沒有解釋一文裏所說的「腦力勞動者與體力勞動者」的衝突，而且腦力勞動亦有許多重復性。</p>
98 <hr />
99 <p>再談「員」字，是否真的指「機械地反復做同一件事情的」人呢？並沒有，大家不要誤解了「員」字。員字源於二形，一是上口下貝，一是上口下鼎。其本意是指「物的數量」，這個物是什麼呢，是貝，貝是錢。而後引申為人數，比如關羽乃一員猛將，再引申指人，便有了官員、吏員。</p>
100 <p>而「程序員」之員字，當指從事某一職業的人。這一釋義倒是頗合本意，寫程序來獲得收入的人，收入是什麼，是錢，錢是什麼，是貝。那麼員字是不是可以理解為<strong>做某事來獲得錢的人</strong>呢？所以官員是做官來獲得收入的人，收銀員是靠幫別人收錢來獲得收入的人，駕駛員是靠駕駛車來獲得收入的人。</p>
101 ]]></content:encoded></item><item><title><![CDATA[ Fireside 遷移記 ]]></title><guid>https://lepture.com/zh/2020/fireside-export</guid><link>https://lepture.com/zh/2020/fireside-export</link><description><![CDATA[ 當你的 Fireside 賬戶過期了，如何遷移你的數據呢？ ]]></description><pubDate>Thu, 11 Jun 2020 02:52:34 +0000</pubDate><content:encoded><![CDATA[ <p>上周「<a href="https://biaojiangfm.typlog.io/episodes/">婊醬FM</a>」打算遷移到 Typlog，他們之前使用 Fireside 托管，但是賬戶已經過期，RSS 不能訪問，又未能找到 Fireside 的導出功能。於是將賬戶密碼告知我，委託我來處理。我卻是不信 Fireside 沒有導出功能的，結果是真的找不到。</p>
102 <p>但是我卻發現了 Fireside 有一個 Hiatus Mode，可以用 $5 來托管播客，方便遷移：</p>
103 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8408157585_794095.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/8408157585_794095.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8408157585_794095.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/8408157585_794095.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/8408157585_794095.png" alt="Hiatus Mode"loading="lazy" decoding="async" width="2406" height="822" /></picture></figure></div><p>告知「婊醬FM」確實需要再續費一個月才能方便遷移到 Typlog，但是可以使用這個 Hiatus Mode 來減少費用。申請後，兩個工作日依舊沒有反應，再次申請，還是沒有反應。賬戶信用卡已更新，但是賬戶依舊是 Suspended 狀態。不知道 Fireside 是否沒有人在工作，無法激活賬戶。</p>
104 <p>這樣等下去也不是辦法。據說互聯網是有記憶的（當然大國只有 404），也許可以在其他地方找回數據。先到<a href="http://archive.org/">互聯網檔案館</a>尋找，未能找到。</p>
105 <p>再搜索，找到一個叫 <a href="https://www.listennotes.com/podcasts/%E5%A9%8A%E9%85%B1bitch-up-bitchup-4NWS-sDvUr2/">Listen Notes</a> 的地方，似乎可以一用。頁面解析起來不太方便，但是這個網站是有 API 的，遂去申請，可惜需要填寫太多資料，還不知道 API 里是否有 Typlog 所需要的全部資料。便先放在一邊，再找找別的地方，實在不行再回來申請 API key。</p>
106 <p>最終從 <a href="https://www.breaker.audio/biao-jiang-bitch-up">Breaker</a> 處獲取到了所有數據：</p>
107 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8408156671_350819.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/8408156671_350819.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8408156671_350819.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/8408156671_350819.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/8408156671_350819.png" alt="Breaker" title="Breaker Network"loading="lazy" decoding="async" width="2830" height="1949" /></picture><figcaption>Breaker Network</figcaption></figure></div><p>將數據從 Network 里複製出來，剩下的便很簡單了，寫上幾行 Python 腳本，將數據整理成 Typlog 需要的格式導入到 Typlog 里便可以了。Fireside 那裡，即使賬戶已經過期，只要知道音頻文件的地址，音頻文件依然是可以訪問的，所以還是可以將音頻文件抓取到 Typlog 的存儲里。</p>
108 <p>這裡不得不說，<a href="http://typlog.com/">Typlog</a> 還是做得不錯的。從一開始就做了導出功能，即使賬戶過期了，網站不可訪問，導出功能依舊可用。</p>
109 ]]></content:encoded></item><item><title><![CDATA[ Typlog 三週年 ]]></title><guid>https://lepture.com/zh/2020/3-years-of-typlog</guid><link>https://lepture.com/zh/2020/3-years-of-typlog</link><description><![CDATA[ Typlog 不知不覺已存活了三年，分享這三年里 Typlog 的成長與變化。 ]]></description><pubDate>Sat, 02 May 2020 16:50:32 +0000</pubDate><content:encoded><![CDATA[ <p>不曾想，距離 <a href="https://lepture.com/zh/2017/hello-typlog">Typlog 正式亮像</a>已經三週年了。這是我第一次做付費服務，也虧得是付費服務，不然早就歇業了吧。Typlog 就這樣安安靜靜地過了三年，直到最近才在 <a href="https://www.producthunt.com/posts/typlog">Product Hunt</a> 上做了一下宣傳，可惜不太成功，只新增了一個付費用戶。</p>
110 <p>三年時間里，Typlog 修修改改亦有不少變化。經營日淺，多半靠著大家捧場口口相傳罷了，也只能分享一點技術方面的收穫了。</p>
111 <h2>從靜態到動態</h2>
112 <p>Typlog 是用 Python Flask 寫的，這一點沒有變化。初時的方案是文章內容存在數據庫里，文章發佈時，後端會讀取數據庫，遍歷文章表生成整個網站的靜態文件，這些靜態文件通常是 HTML，通過 nginx 托管。這裡可以分享一個小技巧，註冊 Typlog 後 Typlog 會給你分配一個 Typlog 的域名，在你綁定了域名後，你就有了兩個域名，需要兩個域名都可以訪問，我當時的做法是：</p>
113 <ol>
114 <li>所有靜態文件生成到一個固定的文件夾，比如 <code>/data/build/lepture</code></li>
115 <li>創建軟鏈接 <code>/data/www/lepture.com</code> 和 <code>/data/www/lepture.typlog.com</code> 到 <code>/data/build/lepture</code></li>
116 <li>Nginx 配置里設置 <code>root /data/www/$http_host</code></li>
117 </ol>
118 <p>如是，當你訪問 <code>lepture.com</code> 或者 <code>lepture.typlog.com</code> 時便都可以訪問到相應的頁面了。最初設計選擇使用靜態方案是因為之前自己的博客是靜態的，而且靜態博客速度上會快。考慮到靜態緩存的問題，當時我選擇了不做分頁，採用按年歸檔的方案。這樣的好處是顯而易見的，比如 <code>/archive/2019/</code>，當 2019 年過後，這個頁面的內容便不會再變化了，而形如 <code>/page/2</code> 的設計，每增加一篇文章所有的 <code>/page/</code> 頁面都要重新生成一遍。按年歸檔的設計亦保留到現在。</p>
119 <p>靜態化的方案堅持了許久，漸漸也有了些許用戶，功能也越加越多，設計亦不時變化，每次變化都需要將所有網站的所有內容重新生成一遍，用戶越多耗時越多，這樣是沒有辦法 scale 的，於是不得不考慮改成動態化。</p>
120 <p>後來發現完全是自己考慮多了，動態化後一點都不慢。我在 Nginx 的日誌里輸出了 <code>$request_time</code> 值，這是請求從 nginx 進入 Python 程序到返回 nginx 的時間，通常這個時間是 3ms，真的非常快，這歸功於 Typlog 的緩存設計。因為保留了按年歸檔的設計，我們的緩存非常方便處理，比如當一篇文章更新了，我們會自動清除相應的緩存，假如這篇文章是 2019 年寫的，我們同時也會清理掉 <code>/archive/2019/</code> 的緩存，如果是按頁歸檔的話，就沒有如此方便了，只能將緩存時間設置得短一點。</p>
121 <h2>從博客到播客</h2>
122 <p>Typlog 誕生時只是一個博客服務，當時的目標是做一個有管理後台的靜態博客。主要是給我自己用，另外如果有其他人能和我一起用的話，服務器的費用便可以省下來了。之前一直在用靜態生成器來生成自己的博客，一個是圖片不好管理，需要找圖床上傳照片；一個是生成的過程太程序員了，沒有寫作的感覺，而且經常時隔很久後相應的編譯環境會出點各種各樣的問題。這便有了做一個有管理後台的博客的想法。</p>
123 <p>之後又心癢，想做一個播客節目，於是開始想方案將播客融入進 Typlog。這便是為何播客的 Feed 地址是 <code>/episodes/feed.xml</code> 而文章的 Feed 是 <code>/feed.xml</code>。因為播客是後來加入的，一開始沒有考慮到，不然文章的 Feed 應該設計為 <code>/posts/feed.xml</code> 的。最終自己的播客節目並沒有做出來，但是播客的功能卻在 Typlog 里生根了。</p>
124 <p>我需要感謝 <a href="http://nirokita.cn/">Niki</a>，他是我們的第一個播客用戶。也因為有了播客用戶，Typlog 才能一點一點改進完善播客功能。播客功能亦為 Typlog 帶來了不少用戶，博客多半隨意，播客通常會注重品牌，感謝播客的品牌效應，Typlog 亦漸為人知。</p>
125 <p>Typlog 也漸漸清晰了自己的定位，才有了我們現在首頁上的宣傳語：</p>
126 <div class="blockquote"><blockquote><p>Share your stories, either in text, images or audio. Focus on your creation and let Typlog take care of the rest.</p>
127 </blockquote></div>
128 <p>最近又將圖片功能升級了，於是有了 <a href="/moments/">Moments</a>。</p>
129 <h2>Admin 的三次重寫</h2>
130 <p>Typlog 的後台 Admin 部分經歷了三次重寫。感謝 Vue，雖然重寫了三次，但是三次都是用的 Vue。</p>
131 <p>第一次，初版 Admin，未用第三方 UI 庫，界面簡潔，只有文章功能。</p>
132 <p>第二次，新增播客功能，Admin 變得複雜許多，之前的簡潔佈局已不再適用，於是重新開始設計佈局。當時在 ElementUI 和 iView 里選擇，不知是不是使用有誤，ElementUI 總是出現各種問題，於是選擇了 iView。</p>
133 <p>第三次，iView 越使用越不好用，如果只使用他已有的 UI 的話還是不錯的，自定義起來就會很麻煩，後來亦遇到了一些問題，也給 iView 提交了修改代碼，但是越用越覺得還是什麼 UI 框架都不用最好。於是便有了現在的 Admin，整個項目結構合理，邏輯清晰，用 Jessie 的話來說便是，Saber（項目代號） 寫起來特別省心。</p>
134 <h2>善用第三方服務</h2>
135 <p>Typlog 使用了許多第三方服務，比如：</p>
136 <ol>
137 <li>Stripe 用來收款</li>
138 <li>Cloudflare Partner 綁定用戶的域名，支持 SSL</li>
139 <li>Sentry 收集錯誤信息</li>
140 <li>Google Analytics API 生成後台圖表數據</li>
141 <li>AWS SES 發通知郵件</li>
142 <li>Alibaba Cloud JP 處理圖片</li>
143 </ol>
144 <p>這是目前使用的部分服務，Typlog 亦替換過不少服務，最典型的便是 Google Cloud Storage。這是一個大坑，慎入。初時不覺，使用量大起來後費用立刻大漲，賬單里的各種信息看不明白，這裡收一點費那裡收一點費，流量分了好幾種、存儲也分了好幾種，與 Cloudflare 里的流量數據對比，Google Cloud Storage 的流量翻了三倍，也不知他是如何計算的。後來便遷移到了 DigitalOcean Spaces，費用立刻降下來了。</p>
145 <p>之後要做圖片自動裁剪的功能，於是自己搭了一個 <a href="https://github.com/imgproxy/imgproxy">imgproxy</a>。用過一段時間，時常會遇到一些問題。後來發現阿里雲 OSS 自帶圖片處理功能，於是註冊了日本區的 Alibaba Cloud，將圖片遷移到了阿里的 OSS。現在圖片 URL 上的 <code>?x-oss-process=</code> 便是阿里雲 OSS 提供的功能。這一點特別好用，比 Google Cloud Storage 和 AWS S3 不知高到哪裡去了。</p>
146 <p>Google Analytics 確實是很好用的，我在 Authlib 的博客里分享過如何<a href="https://blog.authlib.org/2018/access-google-analytics-api">通過 API 讀取 Google Analytics 的數據</a>，有興趣可以一閱。</p>
147 <h2>開放互聯網</h2>
148 <p>我向來支持互聯網而反對 App，能用瀏覽器的話就不下載 App 了。Web 是互聯的，App 是隔裂的。所以在做 Typlog 時會非常在意規範。比如最基本的，我們支持 Open Graph 和 Twitter Card。此外，我們還完美支持 <a href="https://lepture.com/zh/2015/fe-microdata">Microdata</a> 以及 Microformats。最初 Typlog 使用的是 Microformats 1，後來改作了 Microformats 2。</p>
149 <p>再比如我們還支持 <a href="https://blog.typlog.com/pubsubhubbub">PubSubHubbub</a> 或者 WebSub，這樣的話當你的博客一有更新後，你的 RSS 訂閱者便會收到更新。新近，我們又加入了 IndieWeb 社會，支持了 <a href="https://typlog.com/integrations/webmention">Webmention</a>。</p>
150 <h2>未來的規劃</h2>
151 <p>Typlog 一點點成長，希望他能漸漸成長到可以養活我。近期的規劃是多做一些 Pro 功能，讓 Pro 套餐更吸引人，已經規劃好的功能點：</p>
152 <ul>
153 <li>搜索功能已經快完成了，還在優化 (更新：已在內測）</li>
154 <li>郵件列表，遷移到 AWS SES 便是為郵件列表功能做準備</li>
155 <li>會員服務，方案還沒有想好</li>
156 </ul>
157 <hr />
158 <p>感謝 Typlog 用戶們的支持與包容。</p>
159 ]]></content:encoded></item><item><title><![CDATA[ How to style RSS feed ]]></title><guid>https://lepture.com/en/2019/rss-style-with-xsl</guid><link>https://lepture.com/en/2019/rss-style-with-xsl</link><description><![CDATA[ Let's create a beautiful RSS feed UI for human before its dead in next year again. ]]></description><pubDate>Sat, 21 Dec 2019 08:24:08 +0000</pubDate><content:encoded><![CDATA[ <p>"RSS is dead" every year; it will be dead in the next year again. But before the dead coming in next year, we can do something to make it dead in an elegant way.</p>
160 <p>RSS feed is meant to be used by machine (apps) not by human. But people may visit a feed link directly and shout out WTF is this.</p>
161 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8424206158_188736.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/8424206158_188736.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8424206158_188736.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/8424206158_188736.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/8424206158_188736.jpg" alt="Raw RSS"loading="lazy" decoding="async" width="2274" height="1724" /></picture></figure></div><p>The RSS feed however can be human friendly. Take an example of my blog's RSS feed. It is simple and clean, not so scary to ordinary people.</p>
162 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8424206380_291282.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/8424206380_291282.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8424206380_291282.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/8424206380_291282.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/8424206380_291282.jpg" alt="My blog feed UI" title="My blog feed UI"loading="lazy" decoding="async" width="2592" height="2338" /></picture><figcaption>My blog feed UI</figcaption></figure></div><h2>XSL URL</h2>
163 <div class="blockquote"><blockquote><p>But how can we make a RSS feed look like the above UI?</p>
164 </blockquote></div>
165 <p>We added this UI in <a href="https://typlog.com/">Typlog</a> recently. It is pretty simple with <a href="https://www.w3.org/Style/XSL/"><strong>xsl</strong></a>. I'm not going to explain XSL in this post, instead, we can quickly decorate our RSS feeds with the famous copy paste method.</p>
166 <div class="block-code" data-language="xml"><div class="highlight"><pre><span></span><code><div class="line"><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span>
167 </div><div class="line"><span class="cp"><?xml-stylesheet href="/rss.xsl" type="text/xsl"?></span>
168 </div><div class="line"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span><span class="nt">></span>
169 </div></code></pre></div>
170 </div>
171 <p>Here you can see, the feed is styled by an external file <code>/rss.xsl</code>. Note here, instead of providing a shared URL <code>typlog.com/rss.xsl</code>, we are using a relative path here. Because it is required by some browsers for security reasons; we need to put the xsl file under the same domain, protocol and port with the RSS feed.</p>
172 <p>Next, we can inspect the source code of <code>rss.xsl</code>:</p>
173 <div class="block-code"><pre><code>view-source:https://lepture.com/rss.xsl</code></pre></div>
174 <h2>XSL Template</h2>
175 <p>Here is an overview of the XSL file:</p>
176 <div class="block-code" data-language="xml"><div class="highlight"><pre><span></span><code><div class="line"><span class="cp"><?xml version="1.0" encoding="utf-8"?></span>
177 </div><div class="line"><span class="nt"><xsl:stylesheet</span> <span class="na">version=</span><span class="s">"3.0"</span> <span class="na">xmlns:xsl=</span><span class="s">"http://www.w3.org/1999/XSL/Transform"</span>
178 </div><div class="line"><span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
179 </div><div class="line"> <span class="nt"><xsl:output</span> <span class="na">method=</span><span class="s">"html"</span> <span class="na">version=</span><span class="s">"1.0"</span> <span class="na">encoding=</span><span class="s">"UTF-8"</span> <span class="na">indent=</span><span class="s">"yes"</span><span class="nt">/></span>
180 </div><div class="line"> <span class="nt"><xsl:template</span> <span class="na">match=</span><span class="s">"/"</span><span class="nt">></span>
181 </div><div class="line"> ...
182 </div><div class="line"> <span class="nt"></xsl:template></span>
183 </div><div class="line"><span class="nt"></xsl:stylesheet></span>
184 </div></code></pre></div>
185 </div>
186 <p>Things to do:</p>
187 <ol>
188 <li>XML namespaces: register the required namespace when you need to select it via xpath.</li>
189 <li>XSL template: create the UI in XHTML</li>
190 </ol>
191 <h2>XSL Methods</h2>
192 <p>We will use some XSL methods to create our XHTML template:</p>
193 <ol>
194 <li><code>xsl:if</code></li>
195 <li><code>xsl:for-each</code></li>
196 <li><code>xsl:attribute</code></li>
197 <li><code>xsl:value-of</code></li>
198 </ol>
199 <p>Take a look at <code>https://lepture.com/rss.xsl</code>, follow the example. It is not hard to create a pretty UI for RSS feed.</p>
200 ]]></content:encoded></item><item><title><![CDATA[ 談談獨立播客 ]]></title><guid>https://lepture.com/zh/2019/indie-podcasts</guid><link>https://lepture.com/zh/2019/indie-podcasts</link><pubDate>Sun, 09 Jun 2019 06:51:41 +0000</pubDate><content:encoded><![CDATA[ <p>昨天發佈了一個<a href="https://typlog.com/podlist/">中文獨立播客</a>的項目，在 Twitter 上說了一句，不曾想應者雲集。愚頗為惶恐，怕是要解釋一番了，談一談<a href="https://blog.yitianshijie.net/2019/06/08/what-is-indie-podcast/">什麼是獨立播客</a>。</p>
201 <p>我原先便有做一個播客列表的想法，不過是推薦一下使用 <a href="https://typlog.com/">Typlog</a> 的播客用戶，順便給 Typlog 做點宣傳。然而<a href="https://blog.yitianshijie.net/2019/06/04/what-is-happening-to-chinese-podcasts-201906/">二零一九年春夏之交國內播客的異動</a>打斷了我的方案，與其只推薦 Typlog 上的播客，何如推薦中文獨立播客。</p>
202 <p>愚聽播客並不算多，初始不過列舉三四個，幸得眾人共襄，今已數十者矣。好壞暫且不論，至少都滿足了「獨立域名」這一條件，當是時所立之唯一准則。此番定義怕是很難讓人信服，然而「這可以算是獨立播客的一個不完美但有效的定義」。</p>
203 <p><a href="https://twitter.com/Jesoooor/status/1137520030826913793">Jesse Chan 言</a>：</p>
204 <div class="blockquote"><blockquote><p>獨立 = 創作過程不受限制、影響。</p>
205 <p>這是要從內容本身出發去判斷的，真正「獨立」的內容會散髮出獨一無二的氣質。</p>
206 </blockquote></div>
207 <p>愚非賢者，不敢斷言何為真正獨立的內容，亦不可能聽遍所有節目。這裡取「獨立域名」一條皆因中國播客審查之過，假使播客並沒有自己的域名，而是使用喜馬拉雅、荔枝等，其便不至於被蘋果除名，因為這些國內平台已經幫忙審查過了。</p>
208 <p>當前情形，愚不可能去評判播客內容之優劣。止以域名論之，何也？假使播客 RSS 地址不能自己控制，全仰仗平台，平台說刪就刪，何談獨立？而有了自己的域名，即使使用別人提供的服務，想移走時便可以移走，可對 RSS 地址做重定向。至少在這一點上算得獨立了。</p>
209 <p>針對蘋果國內播客政策，我以為有如下解決方案：</p>
210 <ol>
211 <li>保留現有獨立域名的 RSS 作為國際版播客，同時提供一個喜馬拉雅或荔枝等 RSS 作為特色社會主義版。</li>
212 <li>且<a href="https://blog.yitianshijie.net/2019/06/06/time-to-double-down-on-open-podcast-clients/">加倍鼓勵用户使用泛用型播客客戶端</a>，如 Castro、Pocket Casts、 Overcast 等。</li>
213 </ol>
214 ]]></content:encoded></item><item><title><![CDATA[ 貓與網絡暴力 ]]></title><guid>https://lepture.com/zh/2019/cat-and-violence</guid><link>https://lepture.com/zh/2019/cat-and-violence</link><description><![CDATA[ 貓很可愛，但這不是我們支持網絡暴力的理由。 ]]></description><pubDate>Wed, 01 May 2019 14:16:08 +0000</pubDate><content:encoded><![CDATA[ <p>今日偶遇一則微博，言其室友虐貓，轉發已過十萬。其文指名道姓，又向其室友之公司與學校控訴，望學校與公司對其室友作出應有的裁決。聲援者雲集，大約是能如意了。</p>
215 <p>而我卻擔心起室友來，恐怕其會有輕生之意。希望她能堅強一點，渡過此次難關，待事件平息後還能過上正常的生活。</p>
216 <p>我這裡也不願列出原始出處，算是保護一下二位當事人。也許是一廂情願，搜一搜便可以找到的，甚至都不需要「人肉」一下。</p>
217 <p>我亦曾感嘆於互聯網之偉大，樂見社交網絡的興起。那時我們一起見證社交網絡的力量一度左右過政府的政策，恍惚間便生出了幻覺，以為公權力終於有了束縛。</p>
218 <p>萬不料網絡最終成了威逼個人的利器。公權力？那是我無法理解的力量，畢竟年輕，畢竟單純。便是前年，<a href="https://lepture.com/zh/2017/liqi">我亦嘗言</a>：</p>
219 <div class="blockquote"><blockquote><p>確實駭人聽聞，我單知道可以在網上批評某一類人的，譬如中國的某類老人家。又或是怒斥強權，一邊健身一邊控訴幾個委員書記之類。此番號召眾人去人肉一個平民女子，還是第一次見。</p>
220 </blockquote></div>
221 <p>確實是我孤陋寡聞，大約網絡暴力已經是一種常態了。此番卻不必號召眾人去人肉了，姓名學校公司與照片齊全。倘使是正經的媒體，人物會化名，照片會打碼，我們知道發生了這樣的事，輿論可以去批評虐貓的行為，當事人能得到教訓而不必生活於恐懼之中。</p>
222 <p>社交網絡的力量很可怕，雖然還沒有公權力可怕，個人在其面前是如此的渺小，如何使用他，這是一件值得思考的事。我們縱然無法利用他做正確的事，亦當謹慎用其作惡。</p>
223 <p>我不想分辨室友算不算是在虐貓，貓很可愛，但這不是我們支持網絡暴力的理由。</p>
224 ]]></content:encoded></item><item><title><![CDATA[ 那霸的夜 ]]></title><guid>https://lepture.com/zh/2019/night-in-naha</guid><link>https://lepture.com/zh/2019/night-in-naha</link><pubDate>Wed, 10 Apr 2019 18:35:37 +0000</pubDate><content:encoded><![CDATA[ <p>夜，最是適合逃避的時間。沒有工作，沒有生活，只是純粹的夜。在那霸的夜裡漫步，暫時忘卻白天的煩惱。沿著馬路，一個人靜靜走著，邊上一輛輛出租車駛過，玻璃擋板里閃耀著紅色，模模糊糊看不清楚的二字分明是空車。</p>
225 <p>走上國際通的街道。還有深夜經營的小店，居酒屋拉麵店咖啡館。行人三三兩兩，行至人少處，終究忍不住尖叫了兩聲，權當發洩了。</p>
226 <p>不遠處聞得歌聲，是首英文歌，我也哼得起來，便慢慢向著歌聲走去。過了紅綠燈，見到是兩個年輕人在那裡唱歌，男生彈著吉他，女生捧著話筒，面前是個小音箱。我問了一聲能否坐在這裡，得到肯定的答復後便坐在了旁邊。</p>
227 <p>女生唱完後問我想聽點什麼，我說你隨意，唱你喜歡的就好了。而後便靜靜呆著，聽他們唱完一首又一首。路上偶爾一兩人丟下硬幣便走了。忽而一個大叔騎著自行車經過，又回轉回來，停下車，在對面坐下來，亦聽起歌來。兩首後過來與他們搭過話，再聽了聽也離開了。倒是以為我跟他們一起的，連忙解釋說我是外國人。</p>
228 <p>歌聲繼續，沒有人駐足，唯有微風吹拂。這那霸的夜溫暖濕潤，最是怡人。曲終人散，從錢包掏出幾張紙幣後匆匆離去。又是一個人漫無目的的閒轉。</p>
229 <p>大抵生命還是美好的。晚安。</p>
230 ]]></content:encoded></item><item><title><![CDATA[ Authlib Under BSD License ]]></title><guid>https://lepture.com/en/2019/authlib-bsd-license</guid><link>https://lepture.com/en/2019/authlib-bsd-license</link><description><![CDATA[ Happy new year, happy new license. Authlib will be licensed under BSD instead of AGPL starting from next release v0.11. ]]></description><pubDate>Tue, 01 Jan 2019 09:16:29 +0000</pubDate><content:encoded><
252 </a>
253
254 <h2>Get Updates</h2>
255 <p>Version 0.11 should be released in January soon. Follow <a href="https://twitter.com/authlib">Authlib's Twitter</a> account and subscribe <a href="https://blog.authlib.org/">Authlib's Blog</a> to get updates.</p>
256 <p>Here is the official blog announcement: <a href="https://blog.authlib.org/2019/switch-to-bsd-license">https://blog.authlib.org/2019/switch-to-bsd-license</a>.</p>
257 <hr />
258 <p><em>Happy new license, happy new year.</em></p>
259 ]]></content:encoded></item><item><title><![CDATA[ PyCon JP 2018 記 ]]></title><guid>https://lepture.com/zh/2018/pycon-jp-2018</guid><link>https://lepture.com/zh/2018/pycon-jp-2018</link><description><![CDATA[ 第一次參加日本 PyCon，記錄一下經歷與感想。 ]]></description><pubDate>Wed, 19 Sep 2018 13:40:56 +0000</pubDate><content:encoded><![CDATA[ <p>PyCon Japan 2018 剛剛結束。會議場地位於大田區，離我住處偏遠，於押上轉一趟車全程大抵一時半，倒不是怨言，整體感受挺不錯的。這次亦有在 PyCon 做一點分享，話題為 The Modern OAuth 2.0，正是最近在寫的<a href="/zh/2018/oauth2-intro">《摩登 OAuth 2.0》</a>系列。</p>
260 <h2>分享</h2>
261 <p>我自己偏愛概念類的分享，以傳播為主，這次的分享亦是順帶推廣自己的項目 <a href="https://github.com/lepture/authlib">Authlib</a>。下面的視頻大抵從 15:00 開始，英語口語不好講話不太流利（國語口語也不好），但是還算講清楚了。</p>
262 <p><a href="https://www.youtube.com/watch?v=LesqkjqiCr8" title="The modern OAuth 2.0">The modern OAuth 2.0</a></p>
263 <p>另外 slide 可見 <a href="https://speakerdeck.com/lepture/the-modern-oauth-2-dot-0">SpeakerDeck</a>。</p>
264 <h2>體驗</h2>
265 <p>這次參加 PyCon JP 算是偶然，來日本第三年了才第一次參加。報名後才發現原來講者亦要買票的，這卻是第一次聽說，查了一下，一般 PyCon 確實都要買票，但是可以申請補助。</p>
266 <p>中途並沒有人來聯繫，也沒有提前要 slide，所以一直拖到演講前一天才寫完。也正是這一天，PyCon 開始前的一天，主辦方終於有一個活動了，邀請了工作人員、贊助商、講者去晚餐。餐廳有點搞笑，將 PyCon 寫成了 TyCon——Welcome TyCon 樣。人很多，沒有自我介紹，就瞎聊，日語不太會，只能找人講講英語，我又不太會社交，有點尷尬。不過好歹還認識了幾人。</p>
267 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/We/TFohxYpr9A6lQJGBYDEg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/We/TFohxYpr9A6lQJGBYDEg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/We/TFohxYpr9A6lQJGBYDEg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/We/TFohxYpr9A6lQJGBYDEg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/We/TFohxYpr9A6lQJGBYDEg.jpg" alt="Welcome TyCon"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><p>這次 PyCon JP 規模很大，除了早上的 Keynote 沒有並行外（住太遠趕上不 keynote），下午場的演講都是 6 個場次並行的，參會者可以自行挑選。當然，我只能挑選英文場的去聽了，可選擇項就少了。</p>
268 <h2>收穫</h2>
269 <p>PyCon JP 這邊有蠻多台灣 PyCon 過來的志願者，有好些人差不多每個地方的 PyCon 都會去，還挺驚奇的。跟台灣的朋友聊了聊，畢竟講國語比較輕鬆，決定明年去台灣宣傳一下。</p>
270 <p>我自己的分享結束後，亦收到了幾張名片，可惜我自己沒有印名片。有一位大約是想找我做點什麼，不過好像名片弄丟了，沒辦法聯繫了。還有一位馬爾代夫來的先生邀請我去給他們團隊做一個短期的培訓，看名片上的網址還帶 gov 難道是政府人員？倒是可以考慮一下，順便去度個假，得找個空閒時間。</p>
271 <h2>感想</h2>
272 <p>日本這邊辦得比中國要好。首先是議題，什麼樣的都有，有適合初學者聽的，有適合中高級聽的，有公司的有社區的，比較多樣。中國的看起來都是架構師，感覺像是 Summit（峰會），而不是 Conference，話題太過厚重。PyCon 還是要多元一些，要有對初學者友好的話題。</p>
273 <p>另外一點，PyCon JP 和其他地方的聯繫比較多，比如 PyCon 台灣、印尼、新加坡等，國際化比較好。問了一下在場的人，大家都沒聽過 PyCon 中國，以為中國沒有。正巧我分享完後有北京 PyCon 的人聯繫我（我沒有時間去），幫他要了 PyCon 日本、台灣、印尼的主席們的聯繫方式，希望 PyCon 中國能走出來與其他地方多多聯繫。</p>
274 <p>預祝十月的 PyCon 中國順利。</p>
275 ]]></content:encoded></item><item><title><![CDATA[ 摩登 OAuth 2.0：簡介 ]]></title><guid>https://lepture.com/zh/2018/oauth2-intro</guid><link>https://lepture.com/zh/2018/oauth2-intro</link><description><![CDATA[ 隨著時間的推移，OAuth 2.0 相關的標準越來越多，該系列文章旨在介紹更現代的 OAuth 2.0 知識。本章乃第一章簡介。 ]]></description><pubDate>Tue, 11 Sep 2018 03:13:08 +0000</pubDate><content:encoded><![CDATA[ <p>OAuth 2.0 開發者應該不陌生。其正式發表至今已逾六年，加之眾多知名公司使用，圍繞著這些公司的開放（或偽開放）平台，開發者也越來越多，名氣也就愈發響亮了。但是認真讀過標準的卻沒有多少人，不按標準來實現 OAuth 2.0 服務的公司不可勝數。而況這些年里，OAuth 2.0 又有許多新的標準規範誕生。我因為在寫 <a href="https://authlib.org/">Authlib</a><sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>，相關的標準略有閱讀，或有所得，不才分享一二，但求解惑三四人。</p>
276 <h2>歷史</h2>
277 <p>OAuth 的歷史最早可追溯到 2006 年 11 月，Twitter 需要一套 API 的授權訪問方案，彼時並沒有一套開放的標準規範來實現 API 的授權。由 Twitter 的開發者 Blaine Cook 首倡<sup class="footnote-ref" id="fnref-2"><a href="#fn-2">2</a></sup>，最終於 2007 年 7 月完成了 OAuth 的初版草案。2007 年 12 月 4 日 OAuth Core 1.0 正式發佈。</p>
278 <p>這是 OAuth 1.0 的歷史。其後 OAuth 1.0 進入 IETF，2010 年 4 月 RFC5849 發佈。這期間，即 2009 年 IETF 成立了一個 OAuth 工作組，後來的 OAuth 2.0 正是由這個工作組創建的，用以取代 OAuth 1.0。</p>
279 <p>無論是 OAuth 1.0 還是 OAuth 2.0，他們解決的都是同一個問題，即「如何讓一個應用在用戶的授權下訪問操作用戶授權的有限資源」。</p>
280 <h2>框架</h2>
281 <p>OAuth 2.0 與 OAuth 1.0 並不兼容，其實是個全新的體系。不同於 OAuth 1.0，OAuth 2.0 是一個框架，而 OAuth 1.0 是一個協議<sup class="footnote-ref" id="fnref-3"><a href="#fn-3">3</a></sup>。框架，意味著開發者可以在 OAuth 2.0 這一體系里添磚加瓦，修補 OAuth 2.0 的不足，亦可以利用其構建新的協議。</p>
282 <p>時至今日，OAuth 2.0 框架體系里已經誕生了許多標準協議，亦有許多草案等待完善。除卻最初的 RFC6749 (OAuth 2.0 Framework) 和 RFC6750 (Bearer Token)，這裡列舉些許別的 RFC:</p>
283 <ol>
284 <li>RFC7009: OAuth 2.0 Token Revocation</li>
285 <li>RFC7519: JSON Web Token</li>
286 <li>RFC7523: JSON Web Token (JWT) Profile for OAuth 2.0 Client Authentication and Authorization Grants</li>
287 <li>RFC7591: OAuth 2.0 Dynamic Client Registration Protocol</li>
288 <li>RFC7636: Proof Key for Code Exchange by OAuth Public Clients</li>
289 </ol>
290 <p>發現沒有，就連 JWT 亦是 OAuth 工作組起草的。更全面的 RFC 列表可參考 <a href="https://tools.ietf.org/wg/oauth/">OAuth Status Page</a>。</p>
291 <h2>角色</h2>
292 <p>在 OAuth 2.0 框架內，通常有 4 種角色。分別是：</p>
293 <ol>
294 <li>Resource Owner：資源所有者。例如一個圖片分享網站，圖片就是資源，而圖片的上傳者便是資源所有者，通常便是這個圖片分享網站的用戶。</li>
295 <li>Resource Server：資源服務。提供訪問這些圖片數據的 API。</li>
296 <li>Client：客戶端。例如能訪問這個圖片分享網站的 iOS App。</li>
297 <li>Authorization Server：認證服務。在資源所有者的允許下，提供訪問權限給客戶端。</li>
298 </ol>
299 <p>有時你能明顯感受到這些角色的存在，有時則不然。但通常這四種角色都會存在於一個完整的 OAuth 2.0 授權訪問流程里，如圖所示：</p>
300 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/bV/9YWZijYr-qzIuJBko4NQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/bV/9YWZijYr-qzIuJBko4NQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/bV/9YWZijYr-qzIuJBko4NQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/bV/9YWZijYr-qzIuJBko4NQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/bV/9YWZijYr-qzIuJBko4NQ.png" alt="OAuth Flow" title="一個完整的 OAuth 2.0 授權訪問流程"loading="lazy" decoding="async" width="1800" height="1200" /></picture><figcaption>一個完整的 OAuth 2.0 授權訪問流程</figcaption></figure></div><p>OAuth 2.0 的授權流程：</p>
301 <ol>
302 <li>客戶端提供其自身的信息，在資源所有者的允許下，向認證服務請求 Access Token。</li>
303 <li>認證服務驗證通過後，返回 Access Token 給客戶端。</li>
304 <li>客戶端使用 Access Token 向資源服務請求用戶數據。</li>
305 <li>資源服務驗證 Access Token 有效後，返回資源數據。</li>
306 </ol>
307 <p>須知，資源所有者的授權有多種方式，客戶端提供自身信息有多種方式，請求 Access Token 的方法亦有多種方式，便連返回的 Access Token 種類也可以有多種形態。而這些不同的方式不同的形態，在 OAuth 2.0 框架體系里是可以擴展的，隨著時間的推移，會有更多的草案變成標準，亦會有更多人提出其他草案。</p>
308 <section class="footnotes">
309 <ol>
310 <li id="fn-1"><p>Authlib -- The ultimate Python library in building OAuth and OpenID Connect servers. Start it on GitHub <a href="https://github.com/lepture/authlib">lepture/authlib</a>.<a href="#fnref-1" class="footnote">↩</a></p></li>
311 <li id="fn-2"><p>OAuth started around November 2006, while Blaine Cook was working on the Twitter OpenID implementation. <a href="https://hueniverse.com/explaining-oauth-3735e3de27a8#582d">Read more</a><a href="#fnref-2" class="footnote">↩</a></p></li>
312 <li id="fn-3"><p><strong>RFC5849: The OAuth 1.0 Protocol</strong> vs <strong>RFC6749: The OAuth 2.0 Authorization Framework</strong><a href="#fnref-3" class="footnote">↩</a></p></li>
313 </ol>
314 </section>
315 ]]></content:encoded></item><item><title><![CDATA[ 夜思 ]]></title><guid>https://lepture.com/zh/2018/miss-you</guid><link>https://lepture.com/zh/2018/miss-you</link><description><![CDATA[ 寫一首小詩送給你，深夜裡的胡言亂語。 ]]></description><pubDate>Fri, 15 Jun 2018 02:59:24 +0000</pubDate><content:encoded><![CDATA[ <p>寫一首小詩送給你：</p>
316 <p>玉兔隱長夜，寒蟬聒青堤。<br />
317 睹物思君意，憑欄空悲淒。<br />
318 杯淺迷人眼，相見何遲遲。</p>
319 ]]></content:encoded></item><item><title><![CDATA[ Structure of a Flask Project ]]></title><guid>https://lepture.com/en/2018/structure-of-a-flask-project</guid><link>https://lepture.com/en/2018/structure-of-a-flask-project</link><description><![CDATA[ Flask is very flexible, it has no certain pattern of a project folder structure. Here is my suggestions. ]]></description><pubDate>Sat, 21 Apr 2018 14:30:44 +0000</pubDate><content:encoded><![CDATA[ <p>Flask itself is very flexible. It has no certain pattern for a project folder structure,
320 which is very good for experienced developers to organize things in their own favors.
321 However, people new to Flask will get confused, they need some guide on it, and usually
322 they are going to find something works but not good (or even bad).</p>
323 <div class="fund"><div id="codefund"></div></div>
324
325 <p>I didn't know such a problem until someone reported <a href="https://github.com/lepture/authlib/issues/8">an issue</a>
326 to <a href="https://authlib.org">Authlib</a>. And I can't understand the problem either. Then another
327 person explained it to me with a project structure, I finally got it. I was terrified that lots
328 of posts, guide, boilerplates are backward importing modules from project root <code>__init__.py</code>:</p>
329 <div class="block-code" data-language="py"><div class="highlight"><pre><span></span><code><div class="line"><span class="c1"># project/__init__.py</span>
330 </div><div class="line"><span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span>
331 </div><div class="line"><span class="kn">from</span> <span class="nn">flask_sqlalchemy</span> <span class="kn">import</span> <span class="n">SQLAlchemy</span>
332 </div><div class="line">
333 </div><div class="line"><span class="n">db</span> <span class="o">=</span> <span class="n">SQLAlchemy</span><span class="p">()</span>
334 </div><div class="line">
335 </div><div class="line"><span class="k">def</span> <span class="nf">create_app</span><span class="p">():</span>
336 </div><div class="line"> <span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">)</span>
337 </div><div class="line"> <span class="n">db</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
338 </div><div class="line">
339 </div><div class="line"><span class="c1"># project/auth/models.py</span>
340 </div><div class="line"><span class="kn">from</span> <span class="nn">..</span> <span class="kn">import</span> <span class="n">db</span>
341 </div><div class="line">
342 </div><div class="line"><span class="k">class</span> <span class="nc">User</span><span class="p">(</span><span class="n">db</span><span class="o">.</span><span class="n">Model</span><span class="p">):</span>
343 </div><div class="line"> <span class="c1"># define columns</span>
344 </div></code></pre></div>
345 </div>
346 <p>The code itself will work, but when your projects grow, sooner or later you will face a
347 cyclic dependencies problem. For instance, another extension requires to init with the
348 <code>User</code> model:</p>
349 <div class="block-code" data-language="py"><div class="highlight"><pre><span></span><code><div class="line"><span class="c1"># project/__init__.py</span>
350 </div><div class="line"><span class="kn">from</span> <span class="nn">flask_sqlalchemy</span> <span class="kn">import</span> <span class="n">SQLAlchemy</span>
351 </div><div class="line"><span class="kn">from</span> <span class="nn">another_extension</span> <span class="kn">import</span> <span class="n">AnotherExtension</span>
352 </div><div class="line"><span class="kn">from</span> <span class="nn">project.auth.models</span> <span class="kn">import</span> <span class="n">User</span>
353 </div><div class="line">
354 </div><div class="line"><span class="n">db</span> <span class="o">=</span> <span class="n">SQLAlchemy</span><span class="p">()</span>
355 </div><div class="line"><span class="n">ext</span> <span class="o">=</span> <span class="n">AnotherExtension</span><span class="p">(</span><span class="n">User</span><span class="p">)</span>
356 </div></code></pre></div>
357 </div>
358 <p>Oops, a cyclic dependency occurs. Because <code>auth.models</code> is importing <code>db</code> from the root,
359 root can not import <code>User</code> module. This is a common cyclic problem, not limited to Flask.
360 It is easy to fix, but junior developers may find it very hard. So why not avoid such
361 thing from the very begining? Actually, if you have read the <strong>official</strong> documentation,
362 in <a href="http://flask.pocoo.org/docs/0.12/patterns/appfactories/#basic-factories">application factories</a>
363 you can find this piece of code:</p>
364 <div class="block-code" data-language="py"><div class="highlight"><pre><span></span><code><div class="line"><span class="k">def</span> <span class="nf">create_app</span><span class="p">(</span><span class="n">config_filename</span><span class="p">):</span>
365 </div><div class="line"> <span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">)</span>
366 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">from_pyfile</span><span class="p">(</span><span class="n">config_filename</span><span class="p">)</span>
367 </div><div class="line"> <span class="kn">from</span> <span class="nn">yourapplication.model</span> <span class="kn">import</span> <span class="n">db</span>
368 </div><div class="line"> <span class="n">db</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
369 </div><div class="line"> <span class="kn">from</span> <span class="nn">yourapplication.views.admin</span> <span class="kn">import</span> <span class="n">admin</span>
370 </div><div class="line"> <span class="kn">from</span> <span class="nn">yourapplication.views.frontend</span> <span class="kn">import</span> <span class="n">frontend</span>
371 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">register_blueprint</span><span class="p">(</span><span class="n">admin</span><span class="p">)</span>
372 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">register_blueprint</span><span class="p">(</span><span class="n">frontend</span><span class="p">)</span>
373 </div><div class="line"> <span class="k">return</span> <span class="n">app</span>
374 </div></code></pre></div>
375 </div>
376 <p>See, we put <code>db</code> in <code>yourapplication.model</code>.</p>
377 <p>I always keep this one certain rule when writing modules and packages:</p>
378 <div class="blockquote"><blockquote><p>Don't backward import from root <code>__init__.py</code>.</p>
379 </blockquote></div>
380 <p>That's why I submitted <a href="https://github.com/pallets/flask/issues/2626">a ticket to Flask</a>
381 as soon as I found this problem. People need a guide on folder structure. And here I'm
382 going to share my suggestions. But think it yourself, don't treat mine as a golden rule.</p>
383 <h2>Functional Based Structure</h2>
384 <p>There are many ways to setup your project folder structure. One is by its function.
385 For instance:</p>
386 <div class="block-code"><pre><code>project/
387 __init__.py
388 models/
389 __init__.py
390 base.py
391 users.py
392 posts.py
393 ...
394 routes/
395 __init__.py
396 home.py
397 account.py
398 dashboard.py
399 ...
400 templates/
401 base.html
402 post.html
403 ...
404 services/
405 __init__.py
406 google.py
407 mail.py
408 ...</code></pre></div>
409 <p>All things are grouped by its function. If it hehaves as a model, put it in models
410 folder; if it behaves as a route, put it in routes folder. Build a <code>create_app</code>
411 factory in <code>project/__init__.py</code>, and init_app of everything:</p>
412 <div class="block-code" data-language="py"><div class="highlight"><pre><span></span><code><div class="line"><span class="c1"># project/__init__.py</span>
413 </div><div class="line"><span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span>
414 </div><div class="line">
415 </div><div class="line"><span class="k">def</span> <span class="nf">create_app</span><span class="p">()</span>
416 </div><div class="line"> <span class="kn">from</span> <span class="nn">.</span> <span class="kn">import</span> <span class="n">models</span><span class="p">,</span> <span class="n">routes</span><span class="p">,</span> <span class="n">services</span>
417 </div><div class="line"> <span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">)</span>
418 </div><div class="line"> <span class="n">models</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
419 </div><div class="line"> <span class="n">routes</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
420 </div><div class="line"> <span class="n">services</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
421 </div><div class="line"> <span class="k">return</span> <span class="n">app</span>
422 </div></code></pre></div>
423 </div>
424 <p>Here is a trick by me. In official documentation, <code>db</code> of Flask-SQLAlchemy is registered
425 in this way:</p>
426 <div class="block-code" data-language="python"><div class="highlight"><pre><span></span><code><div class="line"><span class="kn">from</span> <span class="nn">project.models</span> <span class="kn">import</span> <span class="n">db</span>
427 </div><div class="line"><span class="n">db</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
428 </div></code></pre></div>
429 </div>
430 <p>So my trick is define a <code>init_app</code> in every folder's <code>__init__.py</code>, and unify the init
431 progress as one:</p>
432 <div class="block-code" data-language="python"><div class="highlight"><pre><span></span><code><div class="line"><span class="c1"># project/models/__init__.py</span>
433 </div><div class="line"><span class="kn">from</span> <span class="nn">.base</span> <span class="kn">import</span> <span class="n">db</span>
434 </div><div class="line">
435 </div><div class="line"><span class="k">def</span> <span class="nf">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">):</span>
436 </div><div class="line"> <span class="n">db</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
437 </div><div class="line">
438 </div><div class="line"><span class="c1"># project/routes/__init__.py</span>
439 </div><div class="line"><span class="kn">from</span> <span class="nn">.users</span> <span class="kn">import</span> <span class="n">user_bp</span>
440 </div><div class="line"><span class="kn">from</span> <span class="nn">.posts</span> <span class="kn">import</span> <span class="n">posts_bp</span>
441 </div><div class="line"><span class="c1"># ...</span>
442 </div><div class="line">
443 </div><div class="line"><span class="k">def</span> <span class="nf">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">):</span>
444 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">register_blueprint</span><span class="p">(</span><span class="n">user_bp</span><span class="p">)</span>
445 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">register_blueprint</span><span class="p">(</span><span class="n">posts_bp</span><span class="p">)</span>
446 </div><div class="line">
447 </div><div class="line"><span class="c1"># ...</span>
448 </div></code></pre></div>
449 </div>
450 <h2>App Based Structure</h2>
451 <p>Another famous folder structure is app based structure, which means things are grouped
452 bp application. For instance:</p>
453 <div class="block-code"><pre><code>project/
454 __init__.py
455 db.py
456 auth/
457 __init__.py
458 route.py
459 models.py
460 templates/
461 blog/
462 __init__.py
463 route.py
464 models.py
465 templates/
466 ...</code></pre></div>
467 <p>Each folder is an application. This pattern is used by default in Django. It doesn't
468 mean this pattern is better, you need to choose a folder structure depending on your
469 project. And sometime, you will have to use a mixed pattern.</p>
470 <p>It is the same as above, we can <code>init_app</code> as:</p>
471 <div class="block-code" data-language="py"><div class="highlight"><pre><span></span><code><div class="line"><span class="c1"># project/__init__.py</span>
472 </div><div class="line"><span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span>
473 </div><div class="line">
474 </div><div class="line"><span class="k">def</span> <span class="nf">create_app</span><span class="p">()</span>
475 </div><div class="line"> <span class="kn">from</span> <span class="nn">.</span> <span class="kn">import</span> <span class="n">db</span><span class="p">,</span> <span class="n">auth</span><span class="p">,</span> <span class="n">blog</span>
476 </div><div class="line"> <span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">)</span>
477 </div><div class="line"> <span class="n">db</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
478 </div><div class="line"> <span class="n">auth</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
479 </div><div class="line"> <span class="n">blog</span><span class="o">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
480 </div><div class="line"> <span class="k">return</span> <span class="n">app</span>
481 </div></code></pre></div>
482 </div>
483 <h2>Configuration</h2>
484 <p>Loading configuration would be another issue that many people find difficult, it
485 is also a folder structure problem. I don't know how other people are doing,
486 I'm just sharing my solution.</p>
487 <ol>
488 <li>Put a <code>settings.py</code> in project folder, treat it as static configuration.</li>
489 <li>Load configration from environment variable.</li>
490 <li>Update configration within <code>create_app</code>.</li>
491 </ol>
492 <p>Here is a basic folder structure for configration:</p>
493 <div class="block-code"><pre><code>conf/
494 dev_config.py
495 test_config.py
496 project/
497 __init__.py
498 settings.py
499 app.py</code></pre></div>
500 <p>Define a <code>create_app</code> to load settings and environment variable:</p>
501 <div class="block-code" data-language="py"><div class="highlight"><pre><span></span><code><div class="line"><span class="c1"># project/__init__.py</span>
502 </div><div class="line"><span class="kn">import</span> <span class="nn">os</span>
503 </div><div class="line"><span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span>
504 </div><div class="line">
505 </div><div class="line"><span class="k">def</span> <span class="nf">create_app</span><span class="p">(</span><span class="n">config</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
506 </div><div class="line"> <span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">)</span>
507 </div><div class="line"> <span class="c1"># load default configuration</span>
508 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">from_object</span><span class="p">(</span><span class="s1">'project.settings'</span><span class="p">)</span>
509 </div><div class="line"> <span class="c1"># load environment configuration</span>
510 </div><div class="line"> <span class="k">if</span> <span class="s1">'FLASK_CONF'</span> <span class="ow">in</span> <span class="n">os</span><span class="o">.</span><span class="n">environ</span><span class="p">:</span>
511 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">from_envvar</span><span class="p">(</span><span class="s1">'FLASK_CONF'</span><span class="p">)</span>
512 </div><div class="line"> <span class="c1"># load app sepcified configuration</span>
513 </div><div class="line"> <span class="k">if</span> <span class="n">config</span> <span class="ow">is</span> <span class="ow">not</span> <span class="kc">None</span><span class="p">:</span>
514 </div><div class="line"> <span class="k">if</span> <span class="nb">isinstance</span><span class="p">(</span><span class="n">config</span><span class="p">,</span> <span class="nb">dict</span><span class="p">):</span>
515 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="n">config</span><span class="p">)</span>
516 </div><div class="line"> <span class="k">elif</span> <span class="n">config</span><span class="o">.</span><span class="n">endswith</span><span class="p">(</span><span class="s1">'.py'</span><span class="p">):</span>
517 </div><div class="line"> <span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">from_pyfile</span><span class="p">(</span><span class="n">config</span><span class="p">)</span>
518 </div><div class="line"> <span class="k">return</span> <span class="n">app</span>
519 </div></code></pre></div>
520 </div>
521 <p>This <code>FLASK_CONF</code> is a python file path which contains configrations. It can
522 be any name you want, e.g. your project is called Expanse, you can name it as
523 <code>EXPANSE_CONF</code>.</p>
524 <p>I use this <code>FLASK_CONF</code> to load production configurations.</p>
525 <hr />
526 <p>Again, Flask is very flexible, there is no certain patterns. You can always find
527 your favors. These are just my suggestions, <strong>do not blind by anyone</strong>.</p>
528 <p><em>I don't like to write posts like this. But there are so many wrong guide, I hope this post can get a better SEO, so that bad posts don't mislead people.</em></p>
529 ]]></content:encoded></item><item><title><![CDATA[ Announcement of Authlib ]]></title><guid>https://lepture.com/en/2018/announcement-of-authlib</guid><link>https://lepture.com/en/2018/announcement-of-authlib</link><description><![CDATA[ A Python library for OAuth/OpenID Authentication. With Authlib, you can create OAuth servers with ease. ]]></description><pubDate>Mon, 08 Jan 2018 13:21:37 +0000</pubDate><content:encoded><![CDATA[ <p>It has been 4 years since I posted <em><a href="https://lepture.com/en/2013/create-oauth-server">Create an OAuth Server</a></em>. Flask-OAuthlib has been shining in the Flask community, but it's time to say goodbye. <strong><a href="https://authlib.org/">Authlib</a></strong> is going to replace Flask-OAuthlib.</p>
530 <p>Authlib contains everything you need to create OAuth clients and servers. It contains:</p>
531 <ul>
532 <li><strong>python-requests</strong> <strong>OAuth1Session</strong> and <strong>OAuth2Session</strong></li>
533 <li>Flask OAuth clients integrations</li>
534 <li>Django OAuth clients integrations</li>
535 <li>Flask OAuth servers implementations</li>
536 <li>Django OAuth servers implementations (not ready)</li>
537 <li>OpenID and many other things</li>
538 </ul>
539 <h2>Documentation & Playground</h2>
540 <p>No, there will be no guide on how to create an OAuth server in this post. It is hard to keep information updated in a single blog post. Instead, I've deployed <strong>a real OAuth server online</strong> so that everyone can play with.</p>
541 <p>To get a better understanding, you can read the official documentation and the source code of Authlib playground:</p>
542 <ol>
543 <li>Official Documentation: <a href="https://docs.authlib.org/">https://docs.authlib.org/</a></li>
544 <li>Source Code of Authlib: <a href="https://github.com/lepture/authlib">https://github.com/lepture/authlib</a></li>
545 <li>Online Playground: <a href="https://play.authlib.org/">https://play.authlib.org/</a></li>
546 <li>Source Code of Playground: <a href="https://github.com/authlib/playground">https://github.com/authlib/playground</a></li>
547 </ol>
548 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/AW/tGz13rK1FpH3LfjzeWAQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/AW/tGz13rK1FpH3LfjzeWAQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/AW/tGz13rK1FpH3LfjzeWAQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/AW/tGz13rK1FpH3LfjzeWAQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/AW/tGz13rK1FpH3LfjzeWAQ.png" alt="Authlib Playground Screenshot"loading="lazy" decoding="async" width="2460" height="1632" /></picture></figure></div><h2>Starting from Scratch</h2>
549 <p>I have several reasons to deprecate Flask-OAuthlib. But the main reason is that Flask-OAuthlib is not maintained well. And it seems things will not go well in the future. Flask-OAuthlib depends on OAuthLib which I believe is in a chaotic maintenance (although I am a maintainer too). Besides, there are many designs I don't like.</p>
550 <p><strong>I created <a href="https://authlib.org/">Authlib</a> from scratch</strong> - from specification implementation to framework integrations. I didn't understand OAuth well enough when writing Flask-OAuthlib. However, this time, I read every RFC carefully so that there will be less misunderstanding (I'm not a native English speaker). <strong>The experience in OAuthLib helps too</strong>.</p>
551 <h2>Being Monolithic</h2>
552 <p>I started <a href="https://authlib.org/">Authlib</a> with a monolithic design in mind. As I've said <em>"it is designed from specification implementation to framework integrations"</em>. <strong>Being monolithic is a feature of Authlib</strong>. I've always hated the <em>micro modules</em> in Node ecosystem, there are even lots of one line code modules in npm.</p>
553 <p>Being monolithic means it won't break things. When specifications changed, implementation will change too. It keeps everything synchronized. You don’t have to worry about monolithic, it doesn’t cost your memory. If you don’t import a module, it won’t be loaded.</p>
554 <p>Will it always be monolithic? It depends. As time goes and Authlib becomes mature, maybe I will separate the framework integrations from Authlib source code.</p>
555 <h2>Profitable = Sustainable</h2>
556 <p>Flask-OAuthlib is not sustainable. I can't spare too much time on it. That's why I created <a href="https://authlib.org/">Authlib</a> with a sustainable idea from the beginning. I hope the project will last long enough.</p>
557 <p><strong>Profitable equals sustainable</strong>. If I can make a living on <a href="https://authlib.org/">Authlib</a>, I can spare more time on it, keeping it updated, fixing bugs, resolving vulnerable securities. OAuth server implementation is an enterprise level problem, if you are running a company, you wouldn't like to use a <strong>non-sustainable</strong> module for such an important feature. What you need is a sustainable solution.</p>
558 <p>The <a href="https://authlib.org/plans">price model for Authlib</a> is simple yet affordable. It is <strong>$1000/year</strong> (or <strong>$500/year</strong> if your company is small), it is just <strong>1/10</strong> of one month salary for one year. However, if you don't care, you can always use the open source license.</p>
559 <h2>Road Map</h2>
560 <p>I've released <a href="https://docs.authlib.org/en/latest/changelog.html">Authlib v0.3</a> when writing this post. It is started from Oct 21, 2017:</p>
561 <ol>
562 <li>Common client and Flask client integration is available in <strong>v0.1</strong></li>
563 <li>Django client integration is available in <strong>v0.2</strong></li>
564 <li>Flask OAuth 2 server is available in <strong>v0.3</strong></li>
565 </ol>
566 <div class="blockquote"><blockquote><p>Flask comes first, Django comes second.</p>
567 </blockquote></div>
568 <p>The next implementation will be Flask OAuth 1 server. After that, there will be Django OAuth servers, and more OAuth 2 specification implementation. I wish I can make a <strong>version 1.0</strong> in the end of this year.</p>
569 <hr />
570 <p>Now, head over to the <a href="https://docs.authlib.org/">documentation</a> and <a href="https://play.authlib.org/">play</a> with Authlib.</p>
571 ]]></content:encoded></item><item><title><![CDATA[ 三藩記 ]]></title><guid>https://lepture.com/zh/2017/san-francisco-trip</guid><link>https://lepture.com/zh/2017/san-francisco-trip</link><description><![CDATA[ 三藩九日遊記，流水帳記之。 ]]></description><pubDate>Thu, 02 Nov 2017 15:38:07 +0000</pubDate><content:encoded><![CDATA[ <p>維西曆十月下旬，余赴美利堅公事。初入國，幾番盤查，始得入境也。至於翻箱倒櫃脫屣赤足亦平常事也，其嚴，甚於西朝鮮矣。余頗惡之。</p>
572 <p>余年少而家貧，無以直航，東京途次洛杉磯而適三藩。三藩多苦民，衣衫襤褸，幽幽然無所歸者，或蹲或坐或行於街市馬路也。又有果皮紙屑棄於地，臟亂差如是，不及扶桑多矣。三藩之民疑焉，每及問必答曰：扶桑乃發達國家之宗也。</p>
573 <p>余居三藩凡九日，得閒四天。</p>
574 <p>初。邀大學同窗共遊伯克利。伯克利者，加州大學分校也，是名校也。其聲名於外，世人但知伯克利，不聞加州大學也。會伯克利慶典，吹號者、擊鼓者、舞者、觀者、錯錯然聚首一地。余與同窗隨慶典行，聞其聲樂觀其歌舞，少女短着，或搔首或旋足或立於他人之肩，青春之謂也。余不得習業於伯克利，奚爲之？購伯克利衛衣，假之充數耳。</p>
575 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_3b64228027d4f998409c5978167a63d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_3b64228027d4f998409c5978167a63d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_3b64228027d4f998409c5978167a63d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_3b64228027d4f998409c5978167a63d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_3b64228027d4f998409c5978167a63d5.jpg" alt="伯克利"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><p>再。適東原君赴蘋果公事，相約觀金門大橋。東原君驅車，載以出行，午食於天堂洲（Paradise Cay）泰國餐廳也。金門大橋者，蓋三藩名勝，客每至，必觀之也。余不敢自欺，隨波逐流耳。觀之以高山，觀之以近海，皆賴東原君相載也。其山皆灰黃而少植被，三藩環海，乾燥如斯，何爲之？</p>
576 <p>是夜，與諸君聚於聖荷西，有飯團、Loddit、梁海、東原等君。</p>
577 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_3cb64cd1f8d33aacb07a470aba9e9cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_3cb64cd1f8d33aacb07a470aba9e9cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_3cb64cd1f8d33aacb07a470aba9e9cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_3cb64cd1f8d33aacb07a470aba9e9cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_3cb64cd1f8d33aacb07a470aba9e9cf1.jpg" alt="金門大橋"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_cda230c70465104f307c07deb919244e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_cda230c70465104f307c07deb919244e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_cda230c70465104f307c07deb919244e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_cda230c70465104f307c07deb919244e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_cda230c70465104f307c07deb919244e.jpg" alt="海"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
578 <p>三。央Bao君載余行射擊之樂也。其地近聖荷西，喚曰「靶宗」（TargetMaster）。余，中國人也，未嘗近手銃也。Bao君親攜槍支彈藥，銃二彈百，余與Bao君相次射之。其聲也巨，余每射，初必入靶，次則未必，皆因初射之聲懼也。</p>
579 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_bae689d7089b59e718415d79762e9921.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1200/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/z_bae689d7089b59e718415d79762e9921.jpg" alt="射擊"loading="lazy" decoding="async" width="1200" height="1600" /></picture></figure></div> ]]></content:encoded></item><item><title><![CDATA[ 佐渡與阿賀町記 ]]></title><guid>https://lepture.com/zh/2017/sado-and-ago</guid><link>https://lepture.com/zh/2017/sado-and-ago</link><description><![CDATA[ 無計劃之旅途，有閒情於漫步。佐渡三日遊及阿賀町一日。 ]]></description><pubDate>Sat, 14 Oct 2017 12:34:03 +0000</pubDate><content:encoded><![CDATA[ <p>應該學一下車了，小明嘀咕道。他那時在火車上，臨時決定要去阿賀町住一晚。鐵道兩邊的稻田，多數只余枯黃的稻樁，他只偶爾抬頭瞥瞥，依舊回過來看著電腦終端里滾動的日誌，修改 <a href="https://typlog.com/">Typlog</a> 的代碼。下一站「馬下」，<a href="http://nirokita.cn/episodes/1">第一個播客節目</a>看起來沒有問題了，小明不禁松了口氣伸了一個懶腰。</p>
580 <p>日本十一倒不放假，究竟在家呆久了，早想著出一趟遠門。原本計劃回國去新疆玩的，機票都買好了，因為辦美國簽證，護照還在美國大使館裡，不得不更改行程。去佐渡是臨時決定的，十一的早晨，感冒還未好，小明搭了電車去往秩父，打算坐一坐蒸汽機車，路途翻看地圖，見著西邊有一個離島，便想著不妨到島上一遊，由是選定了佐渡島。</p>
581 <p>這次又是一個人的旅行，小明倒也習以為常，往年亦多是一人旅，雲南游山水、西北逛沙漠、清邁騎摩托，倒是快活。亦不知是上了年紀，還是異國的孤獨，一個人出行時常會<a href="/zh/2017/one-day-in-nikko">失了興致</a>，又或許因為日本的精緻，失之疏蕩宏博，無法暢懷胸意。</p>
582 <p>佐渡一度算作流放犯人的蠻荒之地，及至金銀礦的發現，德川幕府置佐渡奉行所直領之。明治時亦曾置縣，現下稱市，屬新潟。小明於小木港入島，両津港離島，其間不過三天，山川人物歷史風貌只得一點淺薄的認識。</p>
583 <p>小木略顯荒涼，便是十一這樣的時節，到處都是中國人，這裡卻見不著幾個遊客，入境時還見著懸了中文橫幅，上書不地道的歡迎語——歡迎光臨來到佐渡。走在路上，時而可見廢棄的房屋，斑駁的牆壁，爬了一牆的藤蔓，破窗上的蛛網，網中央安靜的蜘蛛。天又陰沈沈的，飄著點細雨。尋找旅館的路上，去城山公園散步的路上，到處散漫著這份荒蕪的詩意。</p>
584 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/GL/HHP6ySrpsTfi2I9ptzlw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/GL/HHP6ySrpsTfi2I9ptzlw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/GL/HHP6ySrpsTfi2I9ptzlw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/GL/HHP6ySrpsTfi2I9ptzlw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/GL/HHP6ySrpsTfi2I9ptzlw.jpg" alt="房屋"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/Ii/SSubPqipwgXsp4jHchCg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/Ii/SSubPqipwgXsp4jHchCg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/Ii/SSubPqipwgXsp4jHchCg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/Ii/SSubPqipwgXsp4jHchCg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/Ii/SSubPqipwgXsp4jHchCg.jpg" alt="蜘蛛"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
585 <p>此番行程未曾預訂宿所。他在觀光案內所<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>翻閱信息，看到小木溫泉有一家「かもめ莊」便記下了。在小木遊蕩，找了一家日式料理店，點了一份天婦羅的定食作午餐。究竟背著旅行包，不太方便，飯後便去尋溫泉旅館了。</p>
586 <p>可巧還有房間。這一路皆是到了當地再找的，沒有中國遊客，又是工作日，大約因為這些緣故，總是有空房。一路的溫泉旅館，和室加早晚餐，算起來真是便宜，不過一萬多日元，最貴的一回還是去了阿賀町，倒不是佐渡島上的，也不過一萬五。早晚餐又豐富，他竟擔心起會發胖來，也是，來日本後重了十斤。</p>
587 <p>かもめ莊的老闆給了他一把雨傘，小明放過旅行包便出門散步了。</p>
588 <p>宿根木的公車卻沒有了，要到五點才有一班。他那麼喜歡破落的人，不能去宿根木的舊房子散步，頗覺遺憾。本來買了三日的公車券，看看小木的情形，車次那麼少，今日大約作廢了，只得在附近走走，坐坐たらい舟，爬城山公園，再去日和山咖啡館喝點東西。</p>
589 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/Ry/hhUBBc0buyhace5Slyaw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/Ry/hhUBBc0buyhace5Slyaw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/Ry/hhUBBc0buyhace5Slyaw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/Ry/hhUBBc0buyhace5Slyaw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/Ry/hhUBBc0buyhace5Slyaw.jpg" alt="たらい舟"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/Qd/Jf7tqZEdVOJxhR9CXTcg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/Qd/Jf7tqZEdVOJxhR9CXTcg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/Qd/Jf7tqZEdVOJxhR9CXTcg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/Qd/Jf7tqZEdVOJxhR9CXTcg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/Qd/Jf7tqZEdVOJxhR9CXTcg.jpg" alt="城山公園"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
590 <p>公車券要到第二日，去相川時才稍微用得多點。先是從小木坐到佐和田，於佐和田轉車去相川，到相川再坐了車去「佐渡金山」觀光。他在相川觀光案內所內查資料，問所內工作人員近處的溫泉旅館，大叔給他介紹，聽得不太懂的便用紙寫漢字，後來詢問了價格又幫他打電話給旅館，總算是確定了晚上的住所。他把包存在案內所，等公車去佐渡金山。</p>
591 <p>佐渡金山開放的坑道只有兩個，宗太夫坑與道游坑，另有別的坑是要預約的。如果只看一個坑的話，選宗太夫坑。道游坑乃明治時的現代坑，沒有太多感覺。宗太夫坑卻是幕府時期人工挖掘出的坑道，內里頗具巧工，有<a href="https://twitter.com/lepture/status/919155585882382341">會動的人偶</a>扮演當時的情景，或是轉水輪，或是敲石塊，又有做文書工作的。除卻工作情景，亦有洞內的生活再現。坑道長，一路乒乒乓乓，又有介紹工具人物的，不及細看。因為要趕著下一班公車回去，只能草草觀之。</p>
592 <p>後來才想到，如果能自己開車的話，宿根木也去得，金山坑道也可看得愜意。</p>
593 <p>回程時又去看過北澤浮游選礦場遺跡。到處都是爬山虎，綠的紅的，垂著飛碟般形狀不知名的建築上，對面卻只有綠色的，蓋滿了階梯。此處又有個技能傳承展示館，可以一睹織布的技藝。</p>
594 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/xM/5q6-aolfPzwinpGQ5Epw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1536/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/xM/5q6-aolfPzwinpGQ5Epw.jpg" alt="相川"loading="lazy" decoding="async" width="1536" height="1152" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/Fn/V7suPXv_KsSvSWpqVZmg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/Fn/V7suPXv_KsSvSWpqVZmg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/Fn/V7suPXv_KsSvSWpqVZmg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/Fn/V7suPXv_KsSvSWpqVZmg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/Fn/V7suPXv_KsSvSWpqVZmg.jpg" alt="浮游選礦場遺跡"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/2Q/BzR2S1qb1HW9doHbqmJw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1152/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/2Q/BzR2S1qb1HW9doHbqmJw.jpg" alt="織布"loading="lazy" decoding="async" width="1152" height="1152" /></picture></figure></div></div>
595 <p>晚間宿道游，其地不大，房間不多，卻皆是面海的，拉開窗簾便可見著。他回相川觀光案內所，所內的大叔幫他致電旅館，不一時便有旅館開車來接了。這家叫道游的旅館，溫泉池太小，沒有露天溫泉。かもめ莊的都有，還有桑拿房。不過都比不了在阿賀町住的福泉。</p>
596 <p>火車行到津川站，他在這一站下車。上車時刷的交通卡，這一站卻沒有刷卡口，到底是有多鄉下呀。翻看手機地圖，見到兩家溫泉旅館，他便選了福泉，因為看著似乎便宜點。</p>
597 <p>房間很大，臨窗有一處休息區，窗外便是阿賀野川。川水不息，反照著天空的藍，對面是山，長滿了杉樹，這時節還顯綠。福泉的露天溫泉亦是臨著阿賀野川，彷彿懸在山間，男湯的風景略遜於女湯，因為女湯沒人，過去參觀了一下。</p>
598 <p>相較起來，福泉的餐食亦是最豐富的。到底是新潟，產米的大縣，晚餐的天婦羅里居然有一例炸稻穗。說起來，新潟的米真是好吃，當時不覺得，他回家後才發覺，因為再吃家裡的米時覺得不好吃了。以前還覺得自己在家煮的米挺好吃的，過年時節回國吃過國內的米，這一對比便知道平日里自家煮的有多好吃了。這回佐渡與阿賀町的旅途才發覺，還有更好吃的米。</p>
599 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/Hf/J9AwvYNXHQpXfpR8s3cg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/Hf/J9AwvYNXHQpXfpR8s3cg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/Hf/J9AwvYNXHQpXfpR8s3cg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/Hf/J9AwvYNXHQpXfpR8s3cg.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/Hf/J9AwvYNXHQpXfpR8s3cg.jpg" alt="炸稻穗" title="炸稻穗天婦羅"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>炸稻穗天婦羅</figcaption></figure></div><p>到福泉時不過二點。辦了手續，旅店的姐姐領著他去房間，一路介紹各種設施，他到房間放了包，姐姐泡了茶，稍微休息一下便出門閒逛了。這姐姐會點英文，又有筆紙，聊起來還算順暢，他亦在越谷住過，小明便覺得親切了許多。</p>
600 <p>麒麟山公園卻在維護，進不得，來途的「狐の嫁入り屋敷」亦閉館，真是憾事。他在麒麟山邊望見城山橋下有個老奶奶在洗東西，一時好奇過去看看，原來是在洗板栗。兩個人便聊起了天，老奶奶提到冬天時特別誇張地直呼「怖い、怖い」，逗得他直笑。</p>
601 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/J0/J8_bECFYVBAGgM54SrbA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/J0/J8_bECFYVBAGgM54SrbA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/J0/J8_bECFYVBAGgM54SrbA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/J0/J8_bECFYVBAGgM54SrbA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/J0/J8_bECFYVBAGgM54SrbA.jpg" alt="洗板栗的老奶奶" title="洗板栗的老奶奶"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>洗板栗的老奶奶</figcaption></figure></div><p>後來聽說他一個人過來玩，並且一路都是一個人時，不免可憐起來。</p>
602 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/Ak/UmLe6nJXDiMIvXYvJ3KQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/Ak/UmLe6nJXDiMIvXYvJ3KQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/Ak/UmLe6nJXDiMIvXYvJ3KQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/Ak/UmLe6nJXDiMIvXYvJ3KQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/Ak/UmLe6nJXDiMIvXYvJ3KQ.jpg" alt="阿賀町"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/xy/Qv4rm_t4Q3zpCuAdfDMQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/xy/Qv4rm_t4Q3zpCuAdfDMQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/xy/Qv4rm_t4Q3zpCuAdfDMQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/xy/Qv4rm_t4Q3zpCuAdfDMQ.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/xy/Qv4rm_t4Q3zpCuAdfDMQ.jpg" alt="阿賀町日常"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
603 <section class="footnotes">
604 <ol>
605 <li id="fn-1"><p>日本各旅遊地一般都會有觀光案內所，離下車點都不遠的，建議去裏面查查旅遊信息。<a href="#fnref-1" class="footnote">↩</a></p></li>
606 </ol>
607 </section>
608 ]]></content:encoded></item><item><title><![CDATA[ 週記，九月末 ]]></title><guid>https://lepture.com/zh/2017/weekly-20170930</guid><link>https://lepture.com/zh/2017/weekly-20170930</link><description><![CDATA[ 感冒的一週，結果到現在還沒好。即使這樣，也要出門旅遊。 ]]></description><pubDate>Sun, 01 Oct 2017 13:22:45 +0000</pubDate><content:encoded><![CDATA[ <h2>9.25，晴</h2>
609 <p>吃了兩日不知是誰剩下來的感冒藥，但是還不見好。下午便去診所看了醫生，開了處方藥。這是我第二次用健康保險，第一次是洗牙。</p>
610 <p>填過一點基本信息，醫生問了幾個問題，便開了五日份的藥，分四種，每種對應各自的病癥。問診費 1060，藥費 830。藥房開藥時又細緻講解了一下各種藥是什麼作用怎麼吃，可惜聽不太懂，不過開的藥單上都寫清楚了，上面的漢字信息便夠用了。</p>
611 <p>今日日語學習，自動詞與他動詞。另外記新單詞、複習舊單詞。</p>
612 <h2>9.26，晴</h2>
613 <p>一整天都在處方藥的副作用裏度過，昏昏沈沈的，一直想睡覺，只能做點機械類不用動腦子的工作。</p>
614 <h2>9.27，晴、陰、雨</h2>
615 <p>今天天氣多變，感冒還不見好。藥的副作用稍微適應了些。</p>
616 <p>聽了一期太醫來了，講兒童性教育的。憶起自己並不曾有過學習，讀書的時候好奇，常常翻字典，專門找相關的詞條來看，看詞條也是會勃起的哦。</p>
617 <p>寫了一篇博客《<a href="https://lepture.com/zh/2017/fe-live-regions">前端的基礎修養：ARIA Live Regions</a>》。</p>
618 <p>今日日語學習，主要在記單詞，另外複習了形容詞的文法。</p>
619 <h2>9.30，晴</h2>
620 <p>本來打算今天出門旅遊的，但是感冒還沒好，只好繼續呆在家裏。</p>
621 <p>這一日便全身心投入 Typlog 上了，給 Typlog 加上播客功能。之前已經寫了部分了，今天把設計都做完了，順便重構了許多代碼。Podcast 的功能不日便可上線，早期（現在還是早期）用戶將會免費贈送一個 Podcast 功能。</p>
622 <p>之前答應了給校友會寫稿子，晚間總算把中秋聚會的稿子寫完了。</p>
623 <h2>10.1，晴</h2>
624 <p>六點多咳嗽醒了，已經一週了，感冒還沒好。但是我一定得出門，憋了好久，必須得出去旅遊了。</p>
625 <p>目的地還沒想好，打算先往秩父。結果途中看地圖，又決定去佐渡了。一路猶豫不決，終於還是到高崎坐新幹線至上越妙高了。在上越妙高吃過午飯後，往直江津渡口趕去。不巧差了幾分鍾，沒能趕上今日的渡輪。直江津港前邊有一家叫「みなと荘」的旅館，過去打聽了一下，還有房間，便在這邊逗留一晚吧。</p>
626 <p>房間是和室的，很大一間，因爲附近看起來沒有吃飯的地方，便訂了夕食朝食付，房間加兩餐一起 6500 日元。等到吃晚餐的時候才發現挺豐盛的，一份煎魚、一份刺身、天婦羅、青菜、漬物、蒸蛋、豆腐味噌，大約是越谷 1600-2000 價位的。不知明早的早餐如何，算起來房費便很便宜了。</p>
627 <p>終於出門了，也有了今日攝影。可惜到上越後，天氣便不太好。</p>
628 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z9/8fqo82BYRn4HafPMnAfw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z9/8fqo82BYRn4HafPMnAfw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z9/8fqo82BYRn4HafPMnAfw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z9/8fqo82BYRn4HafPMnAfw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z9/8fqo82BYRn4HafPMnAfw.jpg" alt="草間觀船"loading="lazy" decoding="async" width="2048" height="1536" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/nK/uQAVnf2GGeKcDJHr65pw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/nK/uQAVnf2GGeKcDJHr65pw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/nK/uQAVnf2GGeKcDJHr65pw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/nK/uQAVnf2GGeKcDJHr65pw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/nK/uQAVnf2GGeKcDJHr65pw.jpg" alt="直江津港"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/gi/UO7p6zb5ljP4Idjv--lw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/gi/UO7p6zb5ljP4Idjv--lw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/gi/UO7p6zb5ljP4Idjv--lw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/gi/UO7p6zb5ljP4Idjv--lw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/gi/UO7p6zb5ljP4Idjv--lw.jpg" alt="夕陽"loading="lazy" decoding="async" width="2048" height="1536" /></picture></figure></div></div>
629 ]]></content:encoded></item><item><title><![CDATA[ 前端的基礎修養：ARIA Live Regions ]]></title><guid>https://lepture.com/zh/2017/fe-live-regions</guid><link>https://lepture.com/zh/2017/fe-live-regions</link><description><![CDATA[ Live Regions 可以通知讀屏軟件頁面上有什麼變化，有什麼重要的通知等。 ]]></description><pubDate>Wed, 27 Sep 2017 09:40:00 +0000</pubDate><content:encoded><![CDATA[ <p>「前端的基礎修養」這一系列時隔已久，原本打算持續更新的，中間竟斷了兩年，現在又撿起來，亦不知能否堅持下來。所以喚作「修養」，大抵因為心虛，覺得沒有什麼技術含量，不便言之技術。</p>
630 <p>這一篇還是談 Accessibility，未來亦有相當一部分這一主題的文章。由簡入繁，一點一點提高網站的可訪問性。也是因爲稍微複雜的話題我還需要學習。這一篇單講 Live Regions。</p>
631 <h2>Live Regions 是什麼</h2>
632 <p>現代的 Web 越來越依賴 JavaScript，頁面裏的內容亦會隨着使用者的操作發生變化，我們需要標註出哪些變化必須通知給讀屏軟件，這些需要標註的動態區域便是 Live Regions。</p>
633 <p>在實際應用裏，Live Regions 一般用作消息提醒。例如 Twitter，你可以 Inspect 一下頁面代碼，當有新的 Tweet 時會出現，在 <code><body></code> 的最下面會出現：</p>
634 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"sr-event-log"</span> <span class="na">class</span><span class="o">=</span><span class="s">"visuallyhidden"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span><span class="p">></span>
635 </div><div class="line"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>New Tweets available. Press period to review them.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
636 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
637 </div></code></pre></div>
638 </div>
639 <p>如果你開啓了 Voice Over<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup> 或者別的讀屏軟件，這些軟件便會誦讀：</p>
640 <div class="blockquote"><blockquote><p>New Tweets available. Press period to review them.</p>
641 </blockquote></div>
642 <p>但是你在網頁裏並不會看到這段內容的呈現，因爲它 <code>class="visuallyhidden"</code>，與我在 <a href="https://lepture.com/zh/2015/fe-aria-label">aria-label</a> 一文裏提到過 <code>.sr-only</code> 一樣。</p>
643 <h2>aria-live</h2>
644 <p>如上代碼所示，我們使用 <code>aria-live</code> 來標示 Live Region，它有三個可選參數：off/polite/assertive。</p>
645 <ul>
646 <li>off: 等同於不標示 Live Region，讀屏軟件不做任何處理</li>
647 <li>polite: 通常使用這個設定，在用戶的當前行爲終止後，讀屏軟件發出消息通知</li>
648 <li>assertive: 比 polite 的優先級高，當同時有其它消息時，讀屏軟件會先讀 assertive 的消息</li>
649 </ul>
650 <p>我們看到 Twitter 的那段通知代碼正是用的 <code>polite</code>。但是我們偶爾也會有重要的信息，需要即時反饋，這時便可以用 <code>aria-live="assertive"</code> 了。例如「保存錯誤」等消息。這裏有一個消息提醒的例子，我們可以看到 Voice Over 的效果：</p>
651 <p><a href="https://vimeo.com/235672780">https://vimeo.com/235672780</a></p>
652 <ol>
653 <li>註：如果你在中國大陸，可能看不到這個視頻演示。</li>
654 <li>註：這個 UI 庫我暫時沒有精力（財力）更新，大家看看就可以了，不要使用。</li>
655 </ol>
656 <h2>aria-atomic</h2>
657 <p><code>aria-live</code> 用來標記 Live Regions，以及定義它們是否打擾式提醒；<code>aria-atomic</code> 用來定義是否將 Live Region 當作一個整體。舉例如下：</p>
658 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">textarea</span> <span class="na">v-model</span><span class="o">=</span><span class="s">"content"</span><span class="p">></</span><span class="nt">textarea</span><span class="p">></span>
659 </div><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
660 </div><div class="line"> You have entered
661 </div><div class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">v-text</span><span class="o">=</span><span class="s">"content.length"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
662 </div><div class="line"> characters.
663 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
664 </div></code></pre></div>
665 </div>
666 <p>假使我們不使用 <code>aria-atomic="true"</code>，那麼當 <code>content</code> 的長度發生變化時，讀屏軟件將只讀出變化的內容，亦即 <code><span v-text="content.length"></span></code>，你聽到的便是 1、2、3 等。當標記了 <code>aria-atomic="true"</code> 後，你聽到的則是完整的一句話：</p>
667 <div class="blockquote"><blockquote><p>You have entered 3 characters.</p>
668 </blockquote></div>
669 <p>註：使用不同的讀屏軟件或者不同的瀏覽器，得到的效果會有差異。</p>
670 <h2>aria-relevant</h2>
671 <p>我們使用 <code>aria-relevant</code> 控制讀屏軟件在何種情況下發出通知消息。它的可選參數爲：</p>
672 <ol>
673 <li>additions: 當 live region 內有新增的 Node/Element 時</li>
674 <li>removals: 當 live region 內有 Node/Element 被刪除時</li>
675 <li>text: 當 live region 內的文本有變化時</li>
676 <li>all: 以上所有的情況</li>
677 </ol>
678 <p>默認值爲：<code>aria-relevant="additions text"</code>，也就是說，如果 live region 內有節點被移除的話，讀屏軟件不會通告。這在一般情況下是合理的，但是有時我們也想知道是否有節點被移除了，比如當我們要做一個 Todo 時：</p>
679 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">ul</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-relevant</span><span class="o">=</span><span class="s">"additions removals"</span><span class="p">></span>
680 </div><div class="line"> <span class="p"><</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">"(s, i) in todo"</span> <span class="na">:key</span><span class="o">=</span><span class="s">"i"</span><span class="p">></span>{{s}}<span class="p"></</span><span class="nt">li</span><span class="p">></span>
681 </div><div class="line"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
682 </div></code></pre></div>
683 </div>
684 <p>當我們在其它地方的操作導致 Todo 裏的項目減少時，我們亦希望得到通知，這時需要給 <code>aria-relevant</code> 添加 <code>removals</code> 參數。</p>
685 <hr />
686 <ul>
687 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions</a></li>
688 <li><a href="http://pauljadam.com/demos/aria-atomic-relevant.html">http://pauljadam.com/demos/aria-atomic-relevant.html</a></li>
689 <li><a href="https://dev.opera.com/articles/introduction-to-wai-aria/">https://dev.opera.com/articles/introduction-to-wai-aria/</a></li>
690 </ul>
691 <section class="footnotes">
692 <ol>
693 <li id="fn-1"><p>Voice Over 是 Apple (Mac & iOS) 的讀屏軟件<a href="#fnref-1" class="footnote">↩</a></p></li>
694 </ol>
695 </section>
696 ]]></content:encoded></item><item><title><![CDATA[ 週記，九月三週 ]]></title><guid>https://lepture.com/zh/2017/weekly-20170924</guid><link>https://lepture.com/zh/2017/weekly-20170924</link><description><![CDATA[ 開始週記，結果這一週竟然不順，感冒了。 ]]></description><pubDate>Sun, 24 Sep 2017 11:33:59 +0000</pubDate><content:encoded><![CDATA[ <p>最近字寫得太少，表達也跟著不流暢起來。雖然偶爾還有寫作的衝動，不至於荒廢了博客，往往因為拖延症，遲遲不肯下筆，甚至於失去了興趣。所以決定寫點週記，無論多麼無聊，總勝於無。</p>
697 <h2>9.20，晴</h2>
698 <p>今天去新宿，到一家喚作 サポート 的事務所咨詢辦公司或個人事業主的事宜。因為打算做自由職業，不想呆在辦公室里。結果卻不能滿意，辦公司需要雇人，個人事業主需要有日本公司的合同，目前都不具備。</p>
699 <p>咨詢過後，去涉谷的 Apple Store 處理 AirPods 的問題。是在上週六買的 AirPods，取出時左耳沒電，右耳有一半以上的電量。充電時當右耳充滿時左耳只有 60% 多一點。在都充滿的情況下使用，右耳還有 80% 左右時，左耳已經只有一半了。於是預訂了今天的 Genius Bar，結果 AirPods 又神奇地好了。</p>
700 <p>在 Apple Store 排了很久的隊，順便在店裡寫了一段時間代碼。Apple Store 的網絡挺不錯的，比附近的一家星巴克好多了。最終還是沒有處理 AirPods，等向一北過來時，還沒有輪到到我。畢竟 AirPods 又恢復了，就算了吧。</p>
701 <p>今日攝影</p>
702 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/BM/hZZjROVzK7m48xwHRfpw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/BM/hZZjROVzK7m48xwHRfpw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/BM/hZZjROVzK7m48xwHRfpw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/BM/hZZjROVzK7m48xwHRfpw.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/BM/hZZjROVzK7m48xwHRfpw.jpg" alt="涉谷街頭"loading="lazy" decoding="async" width="2048" height="1536" /></picture></figure></div><h2>9.21，晴</h2>
703 <p>昨日決定了週記事項，今日決定重啓日語學習計劃。每次都是學了點開頭，過些天便放棄了。倘使在週記里記錄一下，會不會能堅持下來呢？</p>
704 <p>因為已經有點日語知識了，跳過一些內容，先復習部分語法。今日日語學習動詞的未然形和過去形。</p>
705 <p>晚間戴 AirPods 跑步，有點擔心 AirPods，便沒跑太快。不知道跑太快了會不會掉出來。</p>
706 <h2>9.22，雨</h2>
707 <p>今日下了一天的雨，斷斷續續，時大時小。</p>
708 <p>寫了一篇博客《[像遊客一樣生活][blog]》，這標題躺在我的 Trello 里也有好幾個月了，今天終於解決了，雖然有點潦草，得意便可。</p>
709 <p>今日日語學習，動詞的助詞，主要是 を、に、へ、で。</p>
710 <h2>9.23，陰</h2>
711 <p>昨晚便有感冒的跡象，今早起來喉嚨便乾疼。但是還是堅持著出了一趟門，去附近的田野里轉轉，看秋的稻穗。</p>
712 <p>晚上很早就睡下了，便沒有學日語，不過看了一章《夾邊溝記事》——許霞山放羊。九點半醒來，燒熱水喝藥，打算泡個澡，似乎煤氣出了問題，沒能泡成。</p>
713 <p>今日攝影</p>
714 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/GC/E8IvyryPFWCJahArEjMA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/GC/E8IvyryPFWCJahArEjMA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/GC/E8IvyryPFWCJahArEjMA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/GC/E8IvyryPFWCJahArEjMA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/GC/E8IvyryPFWCJahArEjMA.jpg" alt="稻"loading="lazy" decoding="async" width="2048" height="1536" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/le/cRDHJEiAT-Wz8MfsAxfA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/le/cRDHJEiAT-Wz8MfsAxfA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/le/cRDHJEiAT-Wz8MfsAxfA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/le/cRDHJEiAT-Wz8MfsAxfA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/le/cRDHJEiAT-Wz8MfsAxfA.jpg" alt="稻"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/3e/e0ZoO1swi3W0YXA0o30g.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/3e/e0ZoO1swi3W0YXA0o30g.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/3e/e0ZoO1swi3W0YXA0o30g.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/3e/e0ZoO1swi3W0YXA0o30g.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/3e/e0ZoO1swi3W0YXA0o30g.jpg" alt="蕩鞦韆的小朋友"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
715 <h2>9.24，陰</h2>
716 <p>晚上沒睡好，出了很多汗，被子翻來翻去的。到了早上感冒還沒好。</p>
717 <p>今天有一個武大校友會的活動，在龜有「中國文武學校」做月餅。中間有活動，獎勵玫瑰和康乃馨。也得了幾束，可惜沒有能送的對象。</p>
718 <p>今日攝影</p>
719 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/08/CVxumG1D8rAjnSk5rS_w.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/08/CVxumG1D8rAjnSk5rS_w.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/08/CVxumG1D8rAjnSk5rS_w.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/08/CVxumG1D8rAjnSk5rS_w.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/08/CVxumG1D8rAjnSk5rS_w.jpg" alt="小朋友"loading="lazy" decoding="async" width="1800" height="1347" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/6l/MkpiDjCwHJLVGe7pJY7A.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/6l/MkpiDjCwHJLVGe7pJY7A.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/6l/MkpiDjCwHJLVGe7pJY7A.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/6l/MkpiDjCwHJLVGe7pJY7A.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/6l/MkpiDjCwHJLVGe7pJY7A.jpg" alt="做月餅"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
720 <h2>Typlog 一周回顧</h2>
721 <ul>
722 <li>如果不喜歡 AMP，現在可以在 Labs 里關掉了</li>
723 <li>完善了付款流程，內測將在十月一日結束</li>
724 <li>後台統計數據從最近 30 天改為本月數據</li>
725 </ul>
726 <p>[blog]: <a href="https://lepture.com/zh/2017/live-better">https://lepture.com/zh/2017/live-better</a></p>
727 ]]></content:encoded></item><item><title><![CDATA[ 像遊客一樣生活 ]]></title><guid>https://lepture.com/zh/2017/live-better</guid><link>https://lepture.com/zh/2017/live-better</link><description><![CDATA[ 不要像當地人一樣旅行，反而要像遊客一樣生活。 ]]></description><pubDate>Fri, 22 Sep 2017 07:25:08 +0000</pubDate><content:encoded><![CDATA[ <p>你時常也會聽到「像當地人一樣旅行」的言論吧，他們說遊客都是去千篇一律的地方，沒有辦法瞭解當地的文化。</p>
728 <p>可是你想想，你自己生活的城市或者鄉村的當地人，他們是怎樣在當地旅行的？大半並沒有旅行，只是平常的油鹽醬醋，過日子罷了。</p>
729 <p>為什麼旅行？或許只是看看，或許是散心，或者是度假。旅行也只是稀松平常的事，何必追問意義。有一點也許是真的，旅行是庸碌平靜生活里的一點波瀾，逃避無聊日常的一點小手段。</p>
730 <p>像當地人一樣旅行，多少有點荒誕。一個是當地人沒有旅行，一個是帶了逃避日常的心態難道要再進入另一份日常？</p>
731 <p>「我可不是逃避，我是帶了探索與發現的心態旅行的。」</p>
732 <p>這很好，但是不要指望像當地人生活就可以瞭解到文化了。你還是需要自己去研究旅行地的人物風俗歷史。當地人或許並沒有你熟悉。</p>
733 <p>相反，我倒覺得「像遊客一樣生活」是個更不錯的理念。心態上起了這點變化，日常反而並不平常了。<a href="http://lepture.com/zh/2015/beloved-hangzhou">杭州生活</a>的幾年，比故鄉的許多年精彩多了。倒不是因為杭州是個旅遊城市，<a href="http://lepture.com/zh/2017/hanataen">現在生活的小城鎮</a>，我一樣覺得有點意思。</p>
734 <p>像遊客一樣生活，卻又比遊客多了一份閒適，可以發現更多的風景，更冷門的景點。帶了相機出門，拍拍市井，以遊客心態看待日常，用疏離感建立美感。不亦快哉。</p>
735 <p>但是真的遊客卻不一樣，冷門景點的小樂趣並不能沖淡熱鬧景點的光彩，不要丟了西瓜撿芝麻。</p>
736 ]]></content:encoded></item><item><title><![CDATA[ 煙花八月 ]]></title><guid>https://lepture.com/zh/2017/hanabi</guid><link>https://lepture.com/zh/2017/hanabi</link><description><![CDATA[ 如果整個夏日只看一場花火大會的話，看大曲煙花便可。 ]]></description><pubDate>Wed, 06 Sep 2017 12:15:51 +0000</pubDate><content:encoded><![CDATA[ <p>日本的夏夜，煩悶、躁動以及荷爾蒙的不安分，輕易地消散在了一場又一場的煙花裡。夏日的花火大會大抵七月始而九月終，最盛當在八月。從南到北，從東到西。即使是我生活的小城越谷，亦有屬於自己的花火大會。</p>
737 <p>卻是在看過大曲競技煙花後，忽覺之前看過的煙花都不值一哂。如果整個夏日只看一場花火大會的話，看大曲煙花便可。</p>
738 <p>是 Fonda 組織的，同行五人，週六（8.26）的清早，乘新幹線從東京到盛岡，在盛岡吃過午餐後再租車至大曲。大曲市卻是沒有的，與別的町村合併後稱大仙市。花火大會的會場位於雄物川河川綠地公園，鋪了滿地的木板被分隔成一塊塊，編了座位號售賣。聽聞有七十多萬觀眾，來自五湖四海卻聚於河川一小塊，這在東京倒沒有什麼，放在鄉間卻是一個挑戰。</p>
739 <p>我們一行到駐車場時大約四點。駐車場在一片田間，早有許多車停於此，支了帳篷，一家子吃點東西聊聊天。邊上都是水稻田，抽了穗從桿里拋出，這時節還顯青綠，未到收穫的季節。一塊塊水稻田相接，直到世界的盡頭。田間風光醉人，我時常想著，以後上了年紀到鄉下種種地倒是不錯的選擇。</p>
740 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_21d3a8fd9aeabbbd8c34c830f96c46d1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_21d3a8fd9aeabbbd8c34c830f96c46d1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_21d3a8fd9aeabbbd8c34c830f96c46d1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_21d3a8fd9aeabbbd8c34c830f96c46d1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_21d3a8fd9aeabbbd8c34c830f96c46d1.jpg" alt="駐車場"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_b59f16c52b20fecae2ae5aac05ea551d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_b59f16c52b20fecae2ae5aac05ea551d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_b59f16c52b20fecae2ae5aac05ea551d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_b59f16c52b20fecae2ae5aac05ea551d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_b59f16c52b20fecae2ae5aac05ea551d.jpg" alt="水稻"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_c078510ffe7d48e3da737419614525e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_c078510ffe7d48e3da737419614525e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_c078510ffe7d48e3da737419614525e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_c078510ffe7d48e3da737419614525e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_c078510ffe7d48e3da737419614525e5.jpg" alt="世界盡頭的田野"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
741 <p>大曲花火有晝花火與夜花火。白天里的煙花是煙的主角，夜間便是光了。五點半準時開始，那時我們已經坐在席位上了，伴著砰砰爆裂聲，幾條彩煙在空中盤旋，勾畫出不同的形態。紅的黃的綠的紫的白的煙打著轉流淌著，或如龍，或似蛛，更有如哈利波特里的攝魂怪的，簡直嚇死人。每一發煙花皆有自己的名字，只記得一發名字裡帶日落的，恰在日落時綻放，夕陽落在對面的遠山裡，待到晚照已逝，這一束煙花便結束了。</p>
742 <p>夜晚的花火在幾十束煙花的齊放中開始，地上如泉般一直噴發著，交著叉閃耀著白光，並不太高，又有沖天的煙花在夜幕里飛灑。開場結束，後來的煙花便是參賽作品，分兩類，稱「10號玉の部」和「創造花火の部」。10號玉只兩發巨大的煙花，在天幕里開出大花，因為坐得近，整個眼睛都裝不下，只覺宏偉。而創造花火卻是另一番景象，每一次都不相同每一次都有自己的韻味。10號玉與創造花火交相綻放，一時雄偉，一時新奇。</p>
743 <p>創造花火伴隨音樂起舞，舞隨音樂的節奏，奏出各式光影。在這創造花火里，才見到許多不曾見過的煙花樣式。除卻一般圓盤式的，亦有流金般在夜色里滑落的，在空中划出金色如髮長絲的，又有照明彈似定在空中發出耀眼白光的，還有身懷武當梯雲縱功夫的，在爆裂處再向上發射一枚煙花，更有許多力有不逮描寫不出的。即使是圓盤式，亦有不一樣的創造，譬如在綻放時繞圓盤，在外圍按時針依次點亮一圈。創造花火無愧於創造二字。最喜歡的當屬《命運》，背景便是貝多芬的命運交響曲，節奏頗快，煙花也跟著激烈許多。</p>
744 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_23558d3ec998fb4f8a2e30a0258275d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_23558d3ec998fb4f8a2e30a0258275d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_23558d3ec998fb4f8a2e30a0258275d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_23558d3ec998fb4f8a2e30a0258275d5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_23558d3ec998fb4f8a2e30a0258275d5.jpg" alt="綻放的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_d34973bd14f1e8f02999a7d6e21487aa.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_d34973bd14f1e8f02999a7d6e21487aa.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_d34973bd14f1e8f02999a7d6e21487aa.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_d34973bd14f1e8f02999a7d6e21487aa.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_d34973bd14f1e8f02999a7d6e21487aa.jpg" alt="綻放的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_9dad81a88cef1ccd4f923a3540caefff.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_9dad81a88cef1ccd4f923a3540caefff.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_9dad81a88cef1ccd4f923a3540caefff.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_9dad81a88cef1ccd4f923a3540caefff.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_9dad81a88cef1ccd4f923a3540caefff.jpg" alt="綻放的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_848b34502fa213c41720f3c8559dbd11.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_848b34502fa213c41720f3c8559dbd11.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_848b34502fa213c41720f3c8559dbd11.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_848b34502fa213c41720f3c8559dbd11.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_848b34502fa213c41720f3c8559dbd11.jpg" alt="水彩的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_08757d510e4ad21a7a2030d38d855cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_08757d510e4ad21a7a2030d38d855cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_08757d510e4ad21a7a2030d38d855cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_08757d510e4ad21a7a2030d38d855cf1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_08757d510e4ad21a7a2030d38d855cf1.jpg" alt="星雲的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_ae6265a08456c8e0f817404b514d9ad7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_ae6265a08456c8e0f817404b514d9ad7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_ae6265a08456c8e0f817404b514d9ad7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_ae6265a08456c8e0f817404b514d9ad7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_ae6265a08456c8e0f817404b514d9ad7.jpg" alt="生命的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_13f53477bd28b3b0ca08a10cc1b849d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_13f53477bd28b3b0ca08a10cc1b849d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_13f53477bd28b3b0ca08a10cc1b849d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_13f53477bd28b3b0ca08a10cc1b849d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_13f53477bd28b3b0ca08a10cc1b849d4.jpg" alt="星系的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_86756007397cd6cca3a48ce20886cd1d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_86756007397cd6cca3a48ce20886cd1d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_86756007397cd6cca3a48ce20886cd1d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_86756007397cd6cca3a48ce20886cd1d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_86756007397cd6cca3a48ce20886cd1d.jpg" alt="精靈的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_cebd0e72c2d80268379fe3b1649f77ce.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_cebd0e72c2d80268379fe3b1649f77ce.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_cebd0e72c2d80268379fe3b1649f77ce.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_cebd0e72c2d80268379fe3b1649f77ce.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_cebd0e72c2d80268379fe3b1649f77ce.jpg" alt="梵高的煙花"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
745 <p><strong>注：煙花照片爲相機直出 JPEG，未修圖</strong></p>
746 <p>中場與終場的煙花都是官方準備的，不是參賽作品，如果要用一個詞來形容的話，應該是豪奢。沿著河，在對岸轟炸著，那長長的一排，搖著頭也看不盡，真正的目不暇接。終場煙花結束後，在場的觀眾舉起螢光棒揮舞，原來還有這樣一出，我們竟不知曉，不是合格的觀眾。</p>
747 <p>也只好拿著手機揮一揮。</p>
748 <hr />
749 <p>煙花的拍攝需要許多準備，又要三腳架又要快門線又要遮光布，我因為懶，便手持拍攝，正經的煙花效果是拍不好的，卻能拍出另外一番美。有一回在觀江戶川花火時無意拍到的，將煙花拍出了星空的感覺。後來細細琢磨了一下，總結出幾個要點。</p>
750 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_582da900b46c1593052e861e59d88f7f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_582da900b46c1593052e861e59d88f7f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_582da900b46c1593052e861e59d88f7f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_582da900b46c1593052e861e59d88f7f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_582da900b46c1593052e861e59d88f7f.jpg" alt="江戶川煙花" title="江戶川煙花，如星空一般"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>江戶川煙花，如星空一般</figcaption></figure></div><ul>
751 <li>減少曝光，將曝光補償調爲負值</li>
752 <li>盡量拍攝煙花的後半期</li>
753 <li>避免被前面的煙花與後面的煙花干擾</li>
754 <li>利用前面煙花的背景煙，營造雲的感覺</li>
755 <li>可以調節冷色白平衡，讓背景煙看起來更乾淨</li>
756 </ul>
757 <p>但是你並不能知曉下一發煙花的樣子，所以只管多拍，總會有驚喜出現的。</p>
758 ]]></content:encoded></item><item><title><![CDATA[ A semantic BEM style ]]></title><guid>https://lepture.com/en/2017/semantic-bem-style</guid><link>https://lepture.com/en/2017/semantic-bem-style</link><description><![CDATA[ Introduction of my modified version of BEM naming style guide. ]]></description><pubDate>Fri, 28 Jul 2017 02:56:45 +0000</pubDate><content:encoded><![CDATA[ <p>Naming is a big problem in programming, especially in CSS. There are a lot of ways to maintain CSS class names, it seems that BEM beats them all. I've always been using BEM in my projects, but in a modified way.</p>
759 <div class="block-code"><pre><code>.block-name_element-name.Modifier</code></pre></div>
760 <p>There are lots of people who don't like BEM. I don't like the original BEM too. Because it is ugly and takes too many characters. e.g.</p>
761 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"button button--primary button--large"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
762 </div></code></pre></div>
763 </div>
764 <p>So I created a modified version of BEM, it is a mix of semantic and BEM. I've used it for a while, and it works pretty well. I'd like to share it with you.</p>
765 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"button Primary Large"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
766 </div></code></pre></div>
767 </div>
768 <h2>Naming rules</h2>
769 <p>Rules for block, element and modifier names:</p>
770 <ol>
771 <li>if block/element names have multiple words, words should be joined with <code>-</code></li>
772 <li>block and element names are connected with <code>_</code></li>
773 <li>modifier name is in <code>CamelCase</code></li>
774 <li>modifier can not be used alone</li>
775 </ol>
776 <h2>Flat instead of Nested</h2>
777 <p>Always use flat class names for css rules:</p>
778 <div class="block-code" data-language="css"><div class="highlight"><pre><span></span><code><div class="line"><span class="p">.</span><span class="nc">dialog</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
779 </div><div class="line"><span class="p">}</span><span class="w"></span>
780 </div><div class="line"><span class="p">.</span><span class="nc">dialog_head</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
781 </div><div class="line"><span class="p">}</span><span class="w"></span>
782 </div><div class="line"><span class="p">.</span><span class="nc">dialog_foot</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
783 </div><div class="line"><span class="p">}</span><span class="w"></span>
784 </div><div class="line"><span class="p">.</span><span class="nc">dialog</span><span class="p">.</span><span class="nc">Primary</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
785 </div><div class="line"><span class="p">}</span><span class="w"></span>
786 </div></code></pre></div>
787 </div>
788 <p>Don't do this:</p>
789 <div class="block-code" data-language="css"><div class="highlight"><pre><span></span><code><div class="line"><span class="p">.</span><span class="nc">dialog</span><span class="w"> </span><span class="p">.</span><span class="nc">dialog_head</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
790 </div><div class="line"><span class="p">}</span><span class="w"></span>
791 </div></code></pre></div>
792 </div>
793 <p>However, you will use nested style when there is a modifier:</p>
794 <div class="block-code" data-language="css"><div class="highlight"><pre><span></span><code><div class="line"><span class="p">.</span><span class="nc">dialog</span><span class="p">.</span><span class="nc">Primary</span><span class="w"> </span><span class="p">.</span><span class="nc">dialog_head</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
795 </div><div class="line"><span class="p">}</span><span class="w"></span>
796 </div></code></pre></div>
797 </div>
798 <h2>Prefer block level modifier</h2>
799 <p>Always put a modifier on the block part if possible. For instance:</p>
800 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog Primary"</span><span class="p">></span>
801 </div><div class="line"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog_head"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
802 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
803 </div></code></pre></div>
804 </div>
805 <p>Don't put modifier on element. Don't do this unless you have to:</p>
806 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog"</span><span class="p">></span>
807 </div><div class="line"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog_head Primary"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
808 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
809 </div></code></pre></div>
810 </div>
811 <h2>Prefer class name over tag name</h2>
812 <p>There are two ways to create a component:</p>
813 <p><strong>class name</strong></p>
814 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog"</span><span class="p">></span>
815 </div><div class="line"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog_head"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
816 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
817 </div></code></pre></div>
818 </div>
819 <p><strong>tag name</strong></p>
820 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog"</span><span class="p">></span>
821 </div><div class="line"> <span class="p"><</span><span class="nt">header</span><span class="p">></</span><span class="nt">header</span><span class="p">></span>
822 </div><div class="line"><span class="p"></</span><span class="nt">section</span><span class="p">></span>
823 </div></code></pre></div>
824 </div>
825 <p>The <strong>class name</strong> way is preferred. But it is better to combine them together:</p>
826 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog"</span><span class="p">></span>
827 </div><div class="line"> <span class="p"><</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">"dialog_head"</span><span class="p">></</span><span class="nt">header</span><span class="p">></span>
828 </div><div class="line"><span class="p"></</span><span class="nt">section</span><span class="p">></span>
829 </div></code></pre></div>
830 </div>
831 <h2>Component inner state</h2>
832 <p>State is different from modifier. A state can only be used to create a component.</p>
833 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">button-comp</span> <span class="na">class</span><span class="o">=</span><span class="s">"Large"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button-comp</span><span class="p">></span>
834 </div></code></pre></div>
835 </div>
836 <p>The class name <code>Large</code> is a modifier. But <code><button-comp></code> has a <code>_hover</code> class when hovering:</p>
837 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"button-comp _hover Large"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
838 </div></code></pre></div>
839 </div>
840 <p>This <code>_hover</code> is added by <code><button-comp></code> itself, don't add it yourself. Naming state starts with <code>_</code> as protected class.</p>
841 <h2>Break the rules</h2>
842 <p>Sometime, you have to break the rules. For instance, you need to change the color of <code>dialog_head</code>, but the flat way has a very low priority, the color will be overwritten by the outer elements.</p>
843 <p>In this case, you can add <code>.block</code> before <code>.block_element</code> to create a higher priority:</p>
844 <div class="block-code" data-language="css"><div class="highlight"><pre><span></span><code><div class="line"><span class="p">.</span><span class="nc">dialog</span><span class="w"> </span><span class="p">.</span><span class="nc">dialog_head</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
845 </div><div class="line"><span class="p">}</span><span class="w"></span>
846 </div></code></pre></div>
847 </div>
848 <p>Rules are created for better maintenance. When a rule makes it very hard to implement your component, it is time to break it.</p>
849 <p>But don't break too many.</p>
850 ]]></content:encoded></item><item><title><![CDATA[ 關西行 ]]></title><guid>https://lepture.com/zh/2017/guan-xi-xing</guid><link>https://lepture.com/zh/2017/guan-xi-xing</link><description><![CDATA[ 京都大阪四日行程，浮光掠影，會友閒談。 ]]></description><pubDate>Fri, 07 Jul 2017 15:07:58 +0000</pubDate><content:encoded><![CDATA[ <p>關西我是早就想去了的，究竟還存了幻想，希冀著兩個人的時候再去。結果來日本一年半了，也未能成行。這次約了關西的朋友，於六月底去了一趟關西，不過四日行程，浮光掠影，流水賬記錄一下。</p>
851 <p>原先打算一日京都、二日奈良、三日大阪、四日京都，終究只是個計劃而已。</p>
852 <h2>6月22日</h2>
853 <p>早起，乘東武晴空線到北千住轉 JR 線。</p>
854 <p>我是在[日本旅行][nta]買的新幹線加宿泊的套票，含東京到京都來回車票加第一晚住宿，住宿地選在里湯昔話雄山荘，合計25,100円。</p>
855 <p>經東華告知，該新幹線車票包含都內 JR 線，可在北千住直接用新幹線車票乘 JR 線，又省了一筆去東京站的錢。</p>
856 <p>當初選擇住宿地未曾留意，選在了離京都偏遠的地方，在琵琶湖附近。到京都時已經下午一時許，繼續用新幹線車票換乘 JR 線，當在おごと溫泉駅下車。不曾想，竟坐過了站，因為突然感覺肚子好餓，疑心起怎麼還沒到，打開地圖一看，已經超過去六站了。到雄山荘時已是三點。</p>
857 <p>鄉間的風景卻還不錯，遮了一層薄幕的近山，鐵路附近的農田與房屋，雖然是陰天，卻還透著夏日的鬱鬱蔥蔥。坐過了許多站，於此拍過一張照，也不算白來。</p>
858 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_17e568c6bfbbd6289a618a4f8dacb2a1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_17e568c6bfbbd6289a618a4f8dacb2a1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_17e568c6bfbbd6289a618a4f8dacb2a1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_17e568c6bfbbd6289a618a4f8dacb2a1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_17e568c6bfbbd6289a618a4f8dacb2a1.jpg" alt="鄉間"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><p>第一日便在雄山荘度過了。下午在鄉間散步，晚間泡個溫泉。於是計劃里的第一日京都游便作廢了。</p>
859 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_43556980f014b2a8b8b50d9a2a71f3be.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_43556980f014b2a8b8b50d9a2a71f3be.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_43556980f014b2a8b8b50d9a2a71f3be.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_43556980f014b2a8b8b50d9a2a71f3be.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_43556980f014b2a8b8b50d9a2a71f3be.jpg" alt="農田"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_63f55afe12ced52c4de5c33759d1a898.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_63f55afe12ced52c4de5c33759d1a898.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_63f55afe12ced52c4de5c33759d1a898.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_63f55afe12ced52c4de5c33759d1a898.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_63f55afe12ced52c4de5c33759d1a898.jpg" alt="太陽能"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
860 <h2>6月23日</h2>
861 <p>早起，住宿含早餐。未曾料到早餐如此豐盛，和式的餐食，米飯小吃烤魚燉豆腐加飯後甜點。</p>
862 <p>因為昨晚被房間里的電冰箱吵得無法入睡，半夜裡起來找到電冰箱的插座，拔掉電源後才恨恨睡下，所以對該宿所充滿了怨念。吃過早餐後，氣便消去了。</p>
863 <p>京都，晴，天很熱。</p>
864 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_e62f86d29bb7ccd18b400762cabdd624.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_e62f86d29bb7ccd18b400762cabdd624.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_e62f86d29bb7ccd18b400762cabdd624.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_e62f86d29bb7ccd18b400762cabdd624.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_e62f86d29bb7ccd18b400762cabdd624.jpg" alt="京都塔"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><p>出京都站後，在街上閒逛，往鴨川方向行，路遇一對外國情侶騎腳踏車，遂攔住詢問在何處租車。之後自己也去租了一輛，1000円。登記好證件信息，付1000円即可，無需押金，無需押證件。領車後，租車小哥演示了一下如何還車，把車停在何處，鑰匙放到何處。因為還車時他們已經下班了，需要租客自己處理。信用社會就是方便。</p>
865 <p>沿鴨川騎行，往東福寺方向去，時而藏身於櫻花樹陰下，時而暴露在烈日灼灼里，途中川流不息，遊人卻嫌太少。過石橋，過鐵道，轉入一片寺廟群，過了臥雲橋便是東福寺了。點過卯，稍微小憩一下便離開了，望伏見稻荷大社騎去。</p>
866 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_c05e928fc64cf8b729d8f8b863c1d7c3.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_c05e928fc64cf8b729d8f8b863c1d7c3.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_c05e928fc64cf8b729d8f8b863c1d7c3.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_c05e928fc64cf8b729d8f8b863c1d7c3.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_c05e928fc64cf8b729d8f8b863c1d7c3.jpg" alt="電車"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_a6b2a7c84f4fa6c2b5ab7cc13ea3a03f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_a6b2a7c84f4fa6c2b5ab7cc13ea3a03f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_a6b2a7c84f4fa6c2b5ab7cc13ea3a03f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_a6b2a7c84f4fa6c2b5ab7cc13ea3a03f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_a6b2a7c84f4fa6c2b5ab7cc13ea3a03f.jpg" alt="臥雲橋"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
867 <p>這便是今日的重頭戲了，亦未料想會用去大半的時光。早是知道，便不租車了。</p>
868 <p>稻荷大社這一處遊客便多了，終於有種景點的感覺了。來日本後便愛上了遊客，這是因為新近喜歡起拍人，而日本人特別介意被拍，但是遊客便不一樣了，可以盡情享受快門的聲音，不必擔心遊客的反感。在這許多遊客里，最喜歡的還是中國遊客，喧鬧、大方、美麗，還能聊幾句天。</p>
869 <p>遇到張姑娘他們是在千本鳥居處，在入口的地方便看到了一個穿和服的美麗的姑娘，當時遠遠拍過照，不太清晰。後來去裡面又遇到了，看她們在畫狐仙的木牌，便過去打了招呼，一路上便可以光明正在的拍妹子啦。</p>
870 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_2affc87899e48038243ea6959d131eb9.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_2affc87899e48038243ea6959d131eb9.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_2affc87899e48038243ea6959d131eb9.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_2affc87899e48038243ea6959d131eb9.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_2affc87899e48038243ea6959d131eb9.jpg" alt="伏見稻荷大社"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_a74711d3af9b27c8e7898bd124eed91b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_a74711d3af9b27c8e7898bd124eed91b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_a74711d3af9b27c8e7898bd124eed91b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_a74711d3af9b27c8e7898bd124eed91b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_a74711d3af9b27c8e7898bd124eed91b.jpg" alt="千本鳥居"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_35cffd91f13db4ee54bab9d5ea597fbb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_35cffd91f13db4ee54bab9d5ea597fbb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_35cffd91f13db4ee54bab9d5ea597fbb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_35cffd91f13db4ee54bab9d5ea597fbb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_35cffd91f13db4ee54bab9d5ea597fbb.jpg" alt="盜攝"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_feb7850d20d68892367e8046a03f34a4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_feb7850d20d68892367e8046a03f34a4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_feb7850d20d68892367e8046a03f34a4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_feb7850d20d68892367e8046a03f34a4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_feb7850d20d68892367e8046a03f34a4.jpg" alt="千本鳥居"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_eb2095bb908a97586b84e58eefebe02e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_eb2095bb908a97586b84e58eefebe02e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_eb2095bb908a97586b84e58eefebe02e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_eb2095bb908a97586b84e58eefebe02e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_eb2095bb908a97586b84e58eefebe02e.jpg" alt="千本鳥居"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
871 <p>千本鳥居之長我所未料，紅柱的門一個接一個，直到山頂。女孩子們穿了和服踩著拖鞋走不太快，一路聊聊天拍拍照，晃晃悠悠行到半途，究竟懈怠了，打算放棄。我便搬出了大殺器——來都來了。大家又堅持了一截，終於還是放棄了。我一想到「來都來了」，總是要爬到山頂的，便與他們分手獨自一人往山頂急馳。</p>
872 <p>到山頂後返回，下山後沒能再見他們，趕緊去尋我的腳踏車。這一日已過得差不多了，偏偏還殘留了點時間，我便騎車去了祇園，在花見小路上閒逛了兩圈，希冀著能遇到一兩藝妓，終究敗興而返。還過車，回京都站拉麵小街吃碗麵，便乘電車去大阪了。</p>
873 <p>在シティプラザ大阪住宿，亦是在[日本旅行][nta]上訂的，兩晚合計25,400 円。</p>
874 <h2>6月24日</h2>
875 <p>昨晚到酒店後便去頂樓泡湯，浴後回房即睡。昨晚睡覺質量不錯，次日早起，早餐是西式自助。</p>
876 <p>上午的行程是大阪城，步行過去，亦不過逛逛。因為沒有太過研究，豊臣秀吉亦不是很熟，當作閒逛而已。卻是在裡面豊國神社遇到人家舉行婚禮，頗覺得有趣，便稍稍觀摩了一會。不過是在城裡打磨掉上午的時光，過後便乘車去見網友啦。</p>
877 <p>卻說車上遇到了一個法輪功老太太，坐我旁邊，一路上給我傳播著大紀元的新聞，還讓我去大紀元上退黨退團。也算不錯的插曲，這還是我第一次在日本遇到法輪功。</p>
878 <p>我們約在「十三」站，去附近一家中餐館吃點正宗的中餐。我第一個到，而後<a href="https://blog.shuiba.co">陳姑娘</a>攜夫君至，再稍後見著吳姑娘奔來，最後<a href="https://blog.fueis.com/">小F</a>至。餐廳是吳姑娘推薦的，便隨她引路，不巧餐廳只在晚間營業，不得已，去吃了韓國烤肉。</p>
879 <p>今日的主題便是吃喝與閒談，十三後便去梅田了。女生的聊天簡直沒有章法，忽晴忽陰，隔了這許多日，只記得兩個最恐怖的話題，眼睛與牙齒，「以眼還眼以牙還牙」。閒談之事，並沒有固定的主題，過後，細節便都忘卻了，倒是不曾停嘴。這一日便花去了我一個月的說話量，等到晚飯過後回住處之時，喉嚨不免有些沙啞了。</p>
880 <p>私下裡與黃公子相談，探聽一點戀愛的經歷，好期待一波三折的故事，可是並沒有。窺探他人的經歷，來豐富自己的人生。</p>
881 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_47ff1b0444629973cabec88f06ed56c1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_47ff1b0444629973cabec88f06ed56c1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_47ff1b0444629973cabec88f06ed56c1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_47ff1b0444629973cabec88f06ed56c1.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_47ff1b0444629973cabec88f06ed56c1.jpg" alt="三人行"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><h2>6月25日</h2>
882 <p>行程最後一日。早起，慢悠悠吃過早餐，退房，乘電車去京都。</p>
883 <p>因為晚上便要乘車回東京了，也不想趕著逛景點，便只在祇園附近閒逛，再去花見小路，可是依舊不能見到藝妓，拍點遊人打發時間罷了。這一日的天氣卻不穩定，忽然就有豆大雨粒砸了下來，行人紛紛躲到屋檐下，不一時雨便又去了。</p>
884 <p>便要離去的時候，想起寄明信片來。買了明信片才發現祇園近處的郵局卻是休息日，到處找郵局，可巧不遠處還有一間開著的。便給親愛的璇姐姐與喜愛的姑娘寄了過去。</p>
885 <p>買完伴手禮後便去車站，回東京。</p>
886 <hr />
887 <p>這次比較可惜的是沒去成奈良，留下念想，小鹿亂撞的地方還是留待兩個人再去吧。</p>
888 <p>[nta]: <a href="http://www.nta.co.jp/jr/">http://www.nta.co.jp/jr/</a></p>
889 ]]></content:encoded></item><item><title><![CDATA[ 花田苑雜記 ]]></title><guid>https://lepture.com/zh/2017/hanataen</guid><link>https://lepture.com/zh/2017/hanataen</link><description><![CDATA[ 花田苑便是我無聊生活里的一劑解藥，點綴著我在越谷平淡的時光。 ]]></description><pubDate>Mon, 19 Jun 2017 12:46:59 +0000</pubDate><content:encoded><![CDATA[ <p>我在越谷生活已經一年多了，初到時的新鮮感漸漸消散，生活也跟著平庸起來。四季的風呼呼而過，吹過元荒川堤岸的嫩綠，也吹過元荒川堤岸的枯黃，野鴨隨著風來又隨著風去，日子就這樣變得稀松平常，甚至於無聊了。</p>
890 <p>在這無聊的日常里，有一處風景卻是我時常會踏足的。在東越谷望北靠近新方川處有一個日式庭院，彷彿<a href="/zh/2015/beloved-hangzhou">杭州的西湖</a>一般，點綴著我在越谷平淡的時光，這便是花田苑了。</p>
891 <p>第一次去花田苑還是去歲二月。近處的元荒川風景觀賞過後，翻閱地圖，一眼便看見了這處園林，似乎是值得一去的地方。庭院正門乃宇田家長屋門，門前有兩株上了年紀的楓樹，秋日里倒比園內的楓葉紅得更有韻味。進門處有一個自動售票機，入園料百円，自己投幣買一張便可。</p>
892 <p>究竟是鄉下，遊人偏少，便是櫻花季的時節，園內亦顯清淨。花田苑並不以櫻花領群芳，四季各有景致。季冬與早春的寒梅最先開放，入了夏，枝頭便掛起了一顆顆青梅，青澀飽滿又顯成熟，直引誘著遊客去採摘。待梅花謝後才是櫻花爭春時節，大抵是在四月初，並不繁多，沒有目黑川般的盛況，不過三兩株簇擁在一起。倒是幾株粉櫻格外有特色，彷彿小家碧玉施了粉黛，五片細長的花瓣鑲嵌滿一束又一束枝頭。有兩株粉櫻離木橋不遠，最是遊人偏愛的拍攝點，或是幾對著和服的新婚夫婦，或是三五二次元愛好者。櫻花之後是紫藤，入了夏，只得幾圃草本的小花，名字我是不曉得的，只識得秋日里的菊花。嗟乎，秋日的主角乃是紅葉，不關菊花什麼事了。那麼冬季呢，大約是松的舞台吧。</p>
893 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_dda173e4a5e9cc6121ce218a621f4a79.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_dda173e4a5e9cc6121ce218a621f4a79.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_dda173e4a5e9cc6121ce218a621f4a79.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_dda173e4a5e9cc6121ce218a621f4a79.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_dda173e4a5e9cc6121ce218a621f4a79.jpg" alt="紅楓"loading="lazy" decoding="async" width="1600" height="1069" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_db8acc4145ddc30ae8566f51476e7adf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_db8acc4145ddc30ae8566f51476e7adf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_db8acc4145ddc30ae8566f51476e7adf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_db8acc4145ddc30ae8566f51476e7adf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_db8acc4145ddc30ae8566f51476e7adf.jpg" alt="紅楓"loading="lazy" decoding="async" width="1600" height="1069" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_e5fcb0b443502b8d131448502a1c5626.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_e5fcb0b443502b8d131448502a1c5626.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_e5fcb0b443502b8d131448502a1c5626.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_e5fcb0b443502b8d131448502a1c5626.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_e5fcb0b443502b8d131448502a1c5626.jpg" alt="綠楓"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_666945a6b6b2875f5c09b6cd2d82df86.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_666945a6b6b2875f5c09b6cd2d82df86.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_666945a6b6b2875f5c09b6cd2d82df86.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_666945a6b6b2875f5c09b6cd2d82df86.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_666945a6b6b2875f5c09b6cd2d82df86.jpg" alt="青梅"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_7d058d2f1a3119e9b55417a7186a3d70.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_7d058d2f1a3119e9b55417a7186a3d70.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_7d058d2f1a3119e9b55417a7186a3d70.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_7d058d2f1a3119e9b55417a7186a3d70.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_7d058d2f1a3119e9b55417a7186a3d70.jpg" alt="粉櫻"loading="lazy" decoding="async" width="1600" height="1202" /></picture></figure></div></div>
894 <p>花田苑以湖為心，繞水一周栽種了花草樹木，湖中幾片睡蓮，時有母鴨引一群小鴨漂著啄食。入長屋門，左手途至小山亭，亭邊假山瀑布，潭水里浮著蓮花。下山亭，便靠近圍牆了，沿石子路兩邊栽滿翠竹，一直通到後邊小門，門後是能樂堂，亦可在能樂堂里買票入園。於石子路盡頭折個彎，便是藤棚。繞湖行走，或賞花或觀松，過石板橋過木橋，在進園右手邊有一處茶室，名喚開花亭。亦可從粉櫻處過木橋，橋右有一處舟舍，橋左是琴柱燈籠，一腳入湖水一腳跨湖島，橋頭便接著開花亭了。</p>
895 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_de71bebc722add1d75f8ab7bbf3f10ea.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_de71bebc722add1d75f8ab7bbf3f10ea.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_de71bebc722add1d75f8ab7bbf3f10ea.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_de71bebc722add1d75f8ab7bbf3f10ea.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_de71bebc722add1d75f8ab7bbf3f10ea.jpg" alt="花田苑"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_72a44ef4b436f7cfaa1d4bf80771ba76.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_72a44ef4b436f7cfaa1d4bf80771ba76.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_72a44ef4b436f7cfaa1d4bf80771ba76.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_72a44ef4b436f7cfaa1d4bf80771ba76.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_72a44ef4b436f7cfaa1d4bf80771ba76.jpg" alt="琴柱燈籠"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_8ea5a391f9235adf33dcc75942a39046.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_8ea5a391f9235adf33dcc75942a39046.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_8ea5a391f9235adf33dcc75942a39046.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_8ea5a391f9235adf33dcc75942a39046.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_8ea5a391f9235adf33dcc75942a39046.jpg" alt="竹林"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
896 <p>開花亭的茶會每月都有。第一次去花田苑便見著茶會的廣告牌子了，正巧下個週末便有如月的茶會。如月乃是日本二月之稱謂，舊時指農歷二月，現今又用到了西曆頭上。主持茶會的老先生見我是外國人，問我是否需要椅子，我那時正是來體驗的，便拒絕了，跪坐不久便受不住，要了個墊子置於膝下。後來再去，連墊子也不用，其間換換姿勢，熬一熬，茶會也就結束了。亦是前不久，在<a href="/zh/2017/liqi">不能述說的日子</a>里又去了一次水無月的茶會，這次得了允許，攜相機入席，勉強拍過幾張茶會的照片。</p>
897 <p>開花亭的茶會入席料五百円，交過錢後，便在茶室外的長亭里等待，聚齊一圍後再入茶室。長亭里一攔長凳，盡頭牆面一盞燭燈，邊上掛一幅字，草書著「松風颯颯聲」，落款卻識不得，平日里，這幅字是收起來的，見不著。長凳前面擺了幾張茶几，稍後便有穿和服的少婦人或是小孫女端了清口的溫水過來。參加茶會的多是老奶奶，大約是常客，彼此認識，等候之時便相互聊起天。談了什麼卻不甚了了，誰讓我不曾學習日語呢。</p>
898 <p>亭邊連著茶室，從月季茶花開口的小道進去，在門邊脫了鞋便得進茶室了。今次茶會乃表千家流派，開花亭亦有其它幾種流派，反正我又不懂。這一次最尷尬的便是坐在了右首第一，本來應該是年長者的位置。點心過後，到吃茶時才發現，我的碗同別人的碗很不一樣。碗偏大，樣式亦稀松平常，不比他人精緻。待吃完茶後，大家竟輪流觀賞起我的碗來，這才發現原來是名器，只不知是何年何月之物。過後想想也有點後怕，萬一我那時沒拿穩，把碗摔壞了怎麼辦。</p>
899 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_fde363c11e95bce304bb6b9648a3829a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_fde363c11e95bce304bb6b9648a3829a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_fde363c11e95bce304bb6b9648a3829a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_fde363c11e95bce304bb6b9648a3829a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_fde363c11e95bce304bb6b9648a3829a.jpg" alt="茶會主持" title="主持茶會的老先生"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>主持茶會的老先生</figcaption></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_718ee5a5a36cb426e473bbb31e06e90c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_718ee5a5a36cb426e473bbb31e06e90c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_718ee5a5a36cb426e473bbb31e06e90c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_718ee5a5a36cb426e473bbb31e06e90c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_718ee5a5a36cb426e473bbb31e06e90c.jpg" alt="制茶"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_737bb367376e167458cfda9fce7a70d2.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_737bb367376e167458cfda9fce7a70d2.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_737bb367376e167458cfda9fce7a70d2.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_737bb367376e167458cfda9fce7a70d2.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_737bb367376e167458cfda9fce7a70d2.jpg" alt="碗"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
900 <p>每有朋友來越谷，我必定會引來花田苑一游。週末時候，假使不出去玩，亦會去花田苑一覽，花田苑便是我無聊生活里的一劑解藥。</p>
901 ]]></content:encoded></item><item><title><![CDATA[ 利器拾遺 ]]></title><guid>https://lepture.com/zh/2017/liqi</guid><link>https://lepture.com/zh/2017/liqi</link><description><![CDATA[ 閒話利器訪談未曾細說之事，兼論其它。 ]]></description><pubDate>Sun, 04 Jun 2017 13:20:26 +0000</pubDate><content:encoded><![CDATA[ <p>利器訪談一文已發，倘有興趣，或可觀於<a href="http://liqi.io/lepture/">利器官網</a>，這裡不再贅述，單表未曾暢言者。</p>
902 <p>或有言我之責微信甚矣，國外的網站，譬如臉書等亦是封閉以極。倒並非我有意袒護，我從來不曾喜歡過臉書，「[微信臉書，一丘之貉][f]」。不過因為是中文世界，談一個不存在的網站並沒有什麼意義。有一篇稿子一直在草稿箱里，標題寫作《越來越討厭的世界》，談及互聯網，我以為便是社交網絡開始流行之時，互聯網變得越來越討厭；而在中文互聯網，便是 <a href="http://lepture.com/zh/2014/first-sight-of-google">Google 退出中國</a>之時。</p>
903 <p>大抵大清的魂魄還在，閉關鎖國與文字獄還昌盛，先生們謹小慎微，吾日三省吾身，不敢言語出格。便是如此，倘有小子們擔心，先生這話怕是得收快遞了。更有聰明人學了大清，做起公司來，一路斬妖除魔順風順水，由是封了神。神說：要蒙蔽世人的雙眼。於是 T 家屏蔽 A 家，A 家也屏蔽起 T 家。直把互聯網最精髓之所在——超鏈接——毀於一旦。</p>
904 <div class="blockquote"><blockquote><p>中文世界最大的悲劇便是封閉。從國家到公司，從公司到個人，都在打造圍牆，建起一個又一個圈子。</p>
905 </blockquote></div>
906 <p>這是在社交網絡流行之後的事了，此前的互聯網還是挺可愛的。又或許是因為上網的人多了，圈養的視野究竟不算遼闊，便多出許多詫異之事來。</p>
907 <p>前些時日，也就是五月二十日的晚上，有一位姓張的公子，名喚向東者發了一條微博：</p>
908 <div class="blockquote"><blockquote><p>要一個道歉：今天乘CZ3157 從深回京。鄰座三次在飛行中開手機，空乘警告一次，之後又開，我勸阻後罵我說有病。空乘已按規定教育，個人要求她書面道歉。她開始不承認罵我，一會兒又說大兄弟算了。但不道歉。請大家轉轉，我就要一個正式的道歉。謝謝大家，無以為報，做自行車的就送三輛後街2017外變速版吧，作為剛直不阿的鼓勵。隨機抽。@中國南方航空</p>
909 </blockquote></div>
910 <p>下面又有該女士的照片。</p>
911 <p>確實駭人聽聞，我單知道可以在網上批評某一類人的，譬如中國的某類老人家。又或是怒斥強權，一邊健身一邊控訴幾個委員書記之類。此番號召眾人去人肉一個平民女子，還是第一次見（也許是我孤陋寡聞）。我便瞅了瞅張公子，簡直嚇了一跳，畢竟二百多萬粉絲，一般人是得罪不起的。</p>
912 <p>粉絲這麼多，不去與強權作鬥爭便罷了，好好掙粉絲的錢就好。咦。我再看一眼，不免不懷好意起來，只覺得張公子咧著嘴嘲笑我道：「我這不正是在掙粉絲的錢嘛」。</p>
913 <p>粉絲是一個很奇妙的存在，明星們的粉絲便已經很可怕了，比如你去說一點鹿晗的不好試試。更可怕的乃是宗教的粉絲，所以我才希望一個沒有宗教的世界。</p>
914 <p>悲憤事十之八九，能言者不過七五三二一，借著這個悲痛的日子，說一點無傷大雅的閒話罷了。</p>
915 <p>[f]: <a href="https://blog.yitianshijie.net/2017/06/02/wechat-and-facebook-and-anti-web/">https://blog.yitianshijie.net/2017/06/02/wechat-and-facebook-and-anti-web/</a></p>
916 ]]></content:encoded></item><item><title><![CDATA[ 五一二雜感 ]]></title><guid>https://lepture.com/zh/2017/yang-yong-xin</guid><link>https://lepture.com/zh/2017/yang-yong-xin</link><description><![CDATA[ 汶川地震雜感，想寫點什麼，又沒有實力與膽氣，只好隨便寫寫。 ]]></description><pubDate>Tue, 16 May 2017 14:22:36 +0000</pubDate><content:encoded><![CDATA[ <p>五一二已經過去幾日了，我總覺得應該寫點什麼，再過些時日，五一二也就要被忘卻了，腦中的小人便趕母雞似的直催人。可是死難者呢，不但姓名，連人數也不知道<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>。</p>
917 <p>便是要寫點什麼，怕只能在網上抄抄，我一個程序員又不是調查記者。何況我這麼膽小惜命，跑得也沒有記者快，又不是有名氣的人，沒有西方反動勢力的投資與保護，我就不作死了。</p>
918 <p>可是究竟要寫點什麼，好打發走這腦中的小人。也就是汶川大地震的同一年，有位技能樹點在了電屬性上的傳奇人物為世人所曉。這一年他登上了值得信賴的中央電視台，成為了無數不負責任的為了孩子好的父母心目中的救星。</p>
919 <p>是的，他就是楊永信，一個與少年們作鬥爭的勇士，一個幫助失敗父母找回自信的英雄，一個享受國務院政府特殊津貼的專家。雖然一度有身敗名裂之時，便是 2009 年媒體轉了風向，開始貶斥起他來，終究還是挺過來了，一直到今日亦生活得有滋有潤。</p>
920 <p>我曾一度以為刑法終於正常地發揮了一次作用，楊永信的消息不再見到，大約是進了局里。及至前些時候看到<a href="https://zhuanlan.zhihu.com/p/25884011">觸樂的一篇文章</a>，這才覺得原來法律真的不是擋箭牌<sup class="footnote-ref" id="fnref-2"><a href="#fn-2">2</a></sup>。是我想多了，楊教授還是父母的大救星呢。</p>
921 <p>便是以我最惡毒的想像力，也實在無法猜測父母的心思，竟至於要殘害起自己的孩子來。大抵因為父母憑自己的努力自己生的孩子，怎麼就不能讓孩子聽自己的話，怎麼就電擊不得了呢？你看古人也說了，棍棒下面出孝子嘛。今上又已經開始恢復起傳統文化中的糟粕來，你總不能反對今上吧。</p>
922 <p>可是總覺得需要做點什麼，以中國人民的善忘，怕是再過幾個月又沒有楊永信的消息了，又會以為有刑法的勝利了。這倒不怨大家，中國地大物博，每日里的熱點噼里啪啦，畢竟白小姐的小男朋友亦是頂要緊的事。</p>
923 <p>所以做了一個自動發<a href="http://weibo.com/lepture">微博</a>提醒的 IFTTT，每日十點發送一條「楊永信今天被繩之以法了麼」的消息。也希望能有更多的人關注這件事，更多的人討論這件事情，不要停歇，在每日里的熱點過後能稍微持續跟進同一件事，或許會有點效果呢？夢想總是要有的，萬一實現了呢？你看媒體曾經不也轉過風向，也許就成功了呢？</p>
924 <p>雖然一個楊永信倒下去還會有千千萬萬楊永信站起來，不過能倒一個是一個吧。</p>
925 <section class="footnotes">
926 <ol>
927 <li id="fn-1"><p>語出魯迅《而已集》，這裡指艾未未發起的<strong>5.12地震公民調查</strong>。<a href="#fnref-1" class="footnote">↩</a></p></li>
928 <li id="fn-2"><p>語出外交部發言人姜瑜。<a href="#fnref-2" class="footnote">↩</a></p></li>
929 </ol>
930 </section>
931 ]]></content:encoded></item><item><title><![CDATA[ 牛島觀藤記 ]]></title><guid>https://lepture.com/zh/2017/ushijima-fuji</guid><link>https://lepture.com/zh/2017/ushijima-fuji</link><description><![CDATA[ 週五與向一北去牛島觀一千二百年樹齡的藤，隨手記錄之。 ]]></description><pubDate>Mon, 08 May 2017 13:43:38 +0000</pubDate><content:encoded><![CDATA[ <p>春日部位於越谷的北邊，電車不過數站而已，最有名的人物當屬蠟筆小新。4月23日，春日部有一個藤まつり（祭），我因為別的事耽擱了，沒能成行。</p>
932 <p>剛好這次黃金週，看到<a href="https://www.ashikaga.co.jp/fujinohana_special2017/ch/">足利花卉公園紫藤花物語</a>的廣告，夜裡燈光照在紫藤蘿上，一條條瀑布般的藤蘿散發著紫色的光輝，夢境一般吸引著人，當時便約了向一北一起去看看。終於因為距離太遠，人又懶，遂放棄了，改去附近的春日部牛島觀藤。</p>
933 <p>我們是週五去的，這一天是立夏，也是こどもの日（兒童節），到牛島時是正午時分。我嘗在越谷車站書店翻閱旅遊雜誌，記得周邊有「牛島の藤」這樣一處景點。不曾想，牛島的這株紫藤蘿竟有一千二百年的樹齡。一千二百年前，那個時候的中國還是唐朝。</p>
934 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_a904573ec845deea9ada75d72adacfd7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_a904573ec845deea9ada75d72adacfd7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_a904573ec845deea9ada75d72adacfd7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_a904573ec845deea9ada75d72adacfd7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_a904573ec845deea9ada75d72adacfd7.jpg" alt="藤の根" title="另外一株八百多年樹齡的紫藤蘿"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>另外一株八百多年樹齡的紫藤蘿</figcaption></figure></div><p>園內大的藤蘿有三株，圍著樹根搭了涼棚，盤龍的樹根伸展開來，順著涼棚蜿蜒，藤的枝趴在棚頂上匍匐前進，佔滿了棚頂，藤的花便從涼棚的縫隙里探下頭來，晃悠悠地招摇着。這時已過了最盛時節，藤的花稍顯稀疏了點。園內遊客卻還很多，不時能聽到幾句東北話。</p>
935 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_f76bc0b32c6e64aa1e6732b8f002ece5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_f76bc0b32c6e64aa1e6732b8f002ece5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_f76bc0b32c6e64aa1e6732b8f002ece5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_f76bc0b32c6e64aa1e6732b8f002ece5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_f76bc0b32c6e64aa1e6732b8f002ece5.jpg" alt="藤の近景"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_36dce54b6905a56d282bb10526e6480d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_36dce54b6905a56d282bb10526e6480d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_36dce54b6905a56d282bb10526e6480d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_36dce54b6905a56d282bb10526e6480d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_36dce54b6905a56d282bb10526e6480d.jpg" alt="藤の近景"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_39a4013365d0617754ba0c7aa4d85f04.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_39a4013365d0617754ba0c7aa4d85f04.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_39a4013365d0617754ba0c7aa4d85f04.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_39a4013365d0617754ba0c7aa4d85f04.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_39a4013365d0617754ba0c7aa4d85f04.jpg" alt="白藤"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
936 <p>記得上學時，學過一篇宗璞的《紫藤蘿瀑布》，不知他所說的是否我所見的。感時花濺淚，我卻不曾觸景生情，只覺得好看罷了。一千二百年的樹齡，說起來應是很沈重的歷史感，我卻茫然無知，不過能夠欣賞自然的美便足夠了。</p>
937 <hr />
938 <p>下午三點的時光，陽光很強烈，直照得人睜不開眼，可是不小心抬頭一瞥，一片碧空，沒有一絲雲朵，晴空里卻出現了一個半月，給這片藍里塗上了一筆蔥白。真是清澈，不知國內何時能在這烈日里見到月光。</p>
939 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_648dad0b2247be30c887aefb75d98286.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_648dad0b2247be30c887aefb75d98286.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_648dad0b2247be30c887aefb75d98286.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_648dad0b2247be30c887aefb75d98286.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_648dad0b2247be30c887aefb75d98286.jpg" alt="白日的半月" title="沒有長焦，只能拍成這個樣子了"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>沒有長焦，只能拍成這個樣子了</figcaption></figure></div> ]]></content:encoded></item><item><title><![CDATA[ 你好，Typlog ]]></title><guid>https://lepture.com/zh/2017/hello-typlog</guid><link>https://lepture.com/zh/2017/hello-typlog</link><description><![CDATA[ 我的第一個收費項目，一個有寫作後台的靜態博客。 ]]></description><pubDate>Tue, 02 May 2017 15:32:15 +0000</pubDate><content:encoded><
944  </code></pre></div>
945 <p>更多 Typlog 的介紹可以閱讀<a href="https://typlog.com/about">關於 Typlog</a>這篇文章。接下來談談收費的話題。</p>
946 <p>這些年寫了很多的開源項目，也做了幾個免費無廣告的網站。去歲便覺得力不從心了，很多項目都沒有精力去維護，於是便開始精簡與移交項目。服務器的花費倒沒有什麼，自己投入了無數時間，最後卻沒有什麼意義，所以打算寫點收費產品了。</p>
947 <p>Typlog 便成了我第一個收費項目，我希望它能一直活下去。Typlog 的定價為 $6 每月，或者 $60 每年，有 5 位用戶就可以抵消掉服務器的花費了。</p>
948 <p>並不是所有人都適合使用 Typlog，它是為類似於我這樣的用戶設計的。</p>
949 <ul>
950 <li>偶爾寫寫文章，不至於一年上百篇</li>
951 <li>能用 Markdown，喜歡用 Markdown</li>
952 <li>對獨立域名情有獨鍾，為自己寫博客</li>
953 </ul>
954 <p>為什麼說不能一年上百篇文章呢？如果你仔細觀察，你會發現我的博客是沒有分頁的，博客歸檔是以年分的。假使一年上百篇文章，歸檔頁面便會很長很長了。</p>
955 <p>Typlog 將在下週二開始公測，如果對此有興趣的話，可以支付寶預訂。預訂價格為 30 元，我將在下週二將邀請碼發給你。</p>
956 <p>在此期間付費的話，除了公測的時間外，還會在公測結束之後贈送三個月，之後支付寶只能按年付費。如果公測結束後不想繼續使用的話，我會將預訂金返還給你。</p>
957 <p>你可以加我的 Telegram 或者微信咨詢，ID 都是 lepture。</p>
958 <p>最後再提一下，請閱讀<a href="https://typlog.com/about">關於 Typlog</a>。</p>
959 <hr />
960 <p>公測已結束。</p>
961 ]]></content:encoded></item><item><title><![CDATA[ 談談 AMP 及其他 ]]></title><guid>https://lepture.com/zh/2017/thought-on-amp</guid><link>https://lepture.com/zh/2017/thought-on-amp</link><description><![CDATA[ 是的，我的個人博客是支持 AMP 的。這裡談談 AMP 以及自己的感想。 ]]></description><pubDate>Thu, 20 Apr 2017 15:05:01 +0000</pubDate><content:encoded><![CDATA[ <p>AMP 是 Accelerated Mobile Pages 的縮寫，顧名思義，是用來加速 Mobile 頁面的。該項目由 Google 領頭，Twitter、Pinterest、WordPress 等協同，於 2015 年下半年創建，至今已有無數網站支持 AMP 了，包括 WIRED、華盛頓郵報、紐約時報等媒體——因為 AMP 正是為媒體而生的。</p>
962 <p>我的個人博客也支持 AMP。是的，我又改寫了我的博客程序。</p>
963 <h2>AMP 有什麼作用</h2>
964 <p><a href="https://www.ampproject.org">AMP</a> 是由 Google 提出來的一套移動加速方案與標準，它會在 Google 的服務器上緩存一份 AMP 網頁，用來快速加載。當你在移動端使用 Google 搜索時，支持 AMP 的網頁會顯示一個閃電標誌。點擊該鏈接，頁面是瞬間打開的，完全沒有延時。這是因為 Google 已經提前加載好了頁面所需內容。</p>
965 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/vh/a_mCeaIE11rbQUGa_T2A.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/vh/a_mCeaIE11rbQUGa_T2A.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/vh/a_mCeaIE11rbQUGa_T2A.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/vh/a_mCeaIE11rbQUGa_T2A.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/vh/a_mCeaIE11rbQUGa_T2A.png" alt="AMP 網絡請求"loading="lazy" decoding="async" width="1998" height="1578" /></picture></figure></div><p>如圖所示，我們在移動端使用 Google 搜索 <a href="/en/2014/markdown-parsers-in-python">Python Markdown Parsers</a>，第二條顯示該頁面支持 AMP，我們看看此時的網絡請求，發現當前頁面提前加載了一份 AMP 的緩存內容，該緩存內容在域名 <code>lepture-com.cdn.ampproject.org</code> 上。點擊該鏈接，打開的是 <code>https://www.google.com/amp/</code> 下的鏈接，而非 lepture.com 下面的頁面。因為已經提前載入了 HTML 內容，所以網頁才會瞬間打開。</p>
966 <p>AMP 不只是加載速度快，Google 聲稱 AMP 的頁面在搜索結果里排名會更靠前。</p>
967 <p>除了 Google，還有 Yahoo、<a href="https://blogs.bing.com/search/September-2016/bing-app-joins-the-amp-open-source-effort">Bing</a>、<a href="https://medium.com/@Pinterest_Engineering/building-a-faster-mobile-web-experience-with-amp-a73c651ded7">Pinterest</a> 等支持 AMP 瞬間打開。國內搜索引擎如百度、搜狗也聲稱支持 AMP，不過它們都搜索不到什麼有用的內容，我也沒有辦法驗證。</p>
968 <p>AMP 的缺點亦是十分明顯的，因為 Google 的緩存，打開網頁的地址是 Google 的鏈接，原網站的品牌感便消失了。</p>
969 <h2>如何實現 AMP</h2>
970 <p>AMP 是為媒體內容設計的（博客也是媒體內容），不適合功能型網站。在你打算給自己的網站添加 AMP 支持的時候，請先定位好自己的網站類型。</p>
971 <p>首先，你需要額外製作一份 AMP 網頁，該網頁包含三個核心部分：</p>
972 <ol>
973 <li><strong>AMP HTML</strong><br />
974 特定的 HTML 標籤及 AMP 自定義標籤。</li>
975 <li><strong>AMP JS</strong><br />
976 加速網頁加載速度，異步加載媒體資源。</li>
977 <li><strong>AMP Cache</strong><br />
978 Google 會幫你緩存頁面所需要的各種資源。</li>
979 </ol>
980 <p>一些製作 AMP 網頁的要點：</p>
981 <ul>
982 <li>AMP 頁面必須以 <code><html ⚡></code> 或者 <code><html amp></code> 來聲明自己。</li>
983 <li>AMP 不能使用外鏈的 CSS 資源。</li>
984 <li>AMP 不能使用 <code><img></code> 標籤，需要使用 <code><amp-img></code>，同時需要標明圖片長寬。</li>
985 </ul>
986 <p>具體實現參考<a href="https://www.ampproject.org/docs/">官方文檔</a>。製作完 AMP 頁面後，便可在相應的文章頁里聲明 AMP 網頁的地址：</p>
987 <div class="block-code"><pre><code><link rel="amphtml" href="https://lepture.com/amp/zh/2017/thought-on-amp></code></pre></div>
988 <p>正是因為 <code><amp-img></code> 需要標明圖片長寬，而 Markdown 的語法不支持添加圖片長寬信息，即使支持，我也懶得一個一個自己標注圖片大小，又有一些其它的功能點想實現，所以重寫了博客系統，來支援這些想法。</p>
989 <h2>AMP 與 Web Component</h2>
990 <p>除了 <code><amp-img></code>，還有許多別的自定義標籤，比如 <code><amp-carousel></code>、<code><amp-ad></code> 等。這些自定義標籤都是通過 Web Component 實現的，目前 Web Component 的可使用率大約 58%，剩下的都要靠 Polyfill 來打補丁了，可謂相當超前。</p>
991 <p>Web Component 是一套編寫瀏覽器原生組件的標準，你可以編寫一個可交互的可重用的自定義標籤，如同 React、Vue、Angular 的組件一樣，只是不再依賴特定框架了。</p>
992 <p>AMP 正是使用 Custom Element、Shadow Dom、 template 等來實現的。你可以在<a href="https://github.com/ampproject/amphtml/blob/master/src/custom-element.js">其源碼里</a>一窺究竟。</p>
993 <h2>AMP 與開放標準</h2>
994 <p>我最欣賞 Google 的一點便是它的開放標準意識。無論是 <a href="/zh/2015/fe-microdata">Schema</a> 還是 AMP，它們都有自己單獨的網站與組織，有標準的文檔，有與其它網站的合作，這些標準至少看起來像是第三方運營的，不是 Google 的私家花園。</p>
995 <p>與 AMP 同類型的移動端加速方案還有一些，比如 Facebook Instance Articles，微博的長文章等，但是它們都是私家羊圈，不過是吸血蟲，將互聯網變成一個又一個局域網。互聯網就這樣一點一點被蠶食，世界也變得越來越沒有意思。</p>
996 <h2>重新思考</h2>
997 <div class="blockquote"><blockquote><p>這些標準至少看起來像是第三方運營的，不是 Google 的私家花園。</p>
998 </blockquote></div>
999 <p>果然只是看起來。AMP 只是 Google 的私家花園。</p>
1000 ]]></content:encoded></item><item><title><![CDATA[ 日光一日遊 ]]></title><guid>https://lepture.com/zh/2017/one-day-in-nikko</guid><link>https://lepture.com/zh/2017/one-day-in-nikko</link><description><![CDATA[ 一次不成功的出遊，究竟也算出了一趟門，聊以記之。 ]]></description><pubDate>Sun, 16 Apr 2017 16:07:39 +0000</pubDate><content:encoded><![CDATA[ <p>去日光是上週決定的。週六的早晨便早早起來，於八點半趕到越谷車站，乘八點三十五分的電車，在春日部轉東武日光觀光專線，於十點四十到達東武日光站。</p>
1001 <p>東武日光觀光專線需要額外補票價 820 円，大約因為早晨，乘客並不多，而且沿途停站少，沒有太多乘客上車，車廂空了許多座位。其實不換乘也是可以的，亦不用加錢，但是需要花更多時間。</p>
1002 <p>車行兩小時，沿途的田地還未播種，灰撲撲的土地沒有春意，偶爾冒出一兩片綠色的田地，不知是播種過的還是雜草。我因為起得早，有些困倦，沿途又似乎沒什麼可看的，一路上多半時候便是睡過去的。</p>
1003 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_4710e192d6e1f4618cf8e46ab81d126e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_4710e192d6e1f4618cf8e46ab81d126e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_4710e192d6e1f4618cf8e46ab81d126e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_4710e192d6e1f4618cf8e46ab81d126e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_4710e192d6e1f4618cf8e46ab81d126e.jpg" alt="鐵道" title="東武日光線的盡頭"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>東武日光線的盡頭</figcaption></figure></div><p>出行之前倒也做了一點攻略，在日光市觀光網站上看到 4 月 13 日到 4 月 17 日有個彌生祭的活動，在二荒山神社。於是下了電車便往二荒山神社方向走去。</p>
1004 <p>所謂彌生祭，便是三月祭，舊曆三月稱做彌生。至於為何要祭三月，這我便不清楚了，大約是春祭吧。</p>
1005 <p>日光市只有一條主道，我是沿著靠河的偏道行走的。這偏道不見路人遊客，偶有一二輛車經過，與我在<a href="/zh/2016/new-year-koshigaya">越谷</a>的住處頗相似，安靜得可怖。沿途人家多關著門，家家戶戶門口皆掛著燈籠，是紅白相間的日式燈籠，於白底處印著墨色毛筆字樣的「御祭禮」三個字，又有些人家在燈籠上方插枝塑料制的粉櫻，這「御祭禮」便是為彌生祭而設吧。</p>
1006 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_18bf6b6e48dc88b34ae1f2a1a15185f4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_18bf6b6e48dc88b34ae1f2a1a15185f4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_18bf6b6e48dc88b34ae1f2a1a15185f4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_18bf6b6e48dc88b34ae1f2a1a15185f4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_18bf6b6e48dc88b34ae1f2a1a15185f4.jpg" alt="燈籠"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_7c6b87849db69bff6f23ff5b93daddd4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_7c6b87849db69bff6f23ff5b93daddd4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_7c6b87849db69bff6f23ff5b93daddd4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_7c6b87849db69bff6f23ff5b93daddd4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_7c6b87849db69bff6f23ff5b93daddd4.jpg" alt="燈籠"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_b7988fe89f17a40dc68c46506ab47584.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_b7988fe89f17a40dc68c46506ab47584.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_b7988fe89f17a40dc68c46506ab47584.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_b7988fe89f17a40dc68c46506ab47584.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_b7988fe89f17a40dc68c46506ab47584.jpg" alt="燈籠"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
1007 <p>早晨出門的時候，<a href="/zh/2015/first-day-koshigaya">越谷</a>天氣正好，風不甚大，碧空而少雲。到了日光反而見不到日光了，雲層遮住了太陽，或是大片的蔥白或是大片的青烏，這陰鬱著的光線怕是很難拍到好照片了。</p>
1008 <p>一路走著，經過一個院子，院中一座木制的花車，車頂上正有人擺弄著櫻花枝，三兩人在車邊比劃著。也是塑料制的粉櫻，與家戶門口燈籠上的形若彷彿，卻是大了許多。我看著倒是有趣，進門去拍了幾張照片，順便問了問這花車可是為彌生祭準備的，有人答應了聲。</p>
1009 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_7342af0bd25154a85520bc1547950d29.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_7342af0bd25154a85520bc1547950d29.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_7342af0bd25154a85520bc1547950d29.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_7342af0bd25154a85520bc1547950d29.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_7342af0bd25154a85520bc1547950d29.jpg" alt="花車"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><p>拍過幾張照片，出得門來，繼續往二荒山神社去，思量著祭典活動到底幾點開始。</p>
1010 <p>行至神橋處，看看將近中午了，腹中空空如也，又見得此處有幾家飯店，不妨先吃過午飯再去遊玩。誤進一家蕎麥麪店，喚作神橋庵。本來看中的是家叫「匠」的店，打算吃一份牛排的，看牆上箭頭，以為是進門後往里走的意思，誤入後又不好意思出來，於是點了份「鳥南蠻」。</p>
1011 <p>神橋倒沒上去。看神橋的景致，大約適合拍夕陽晚照，這個時間不見得好看，況且天色灰撲撲的，難得拍出美景，便不浪費這份錢了，從神橋旁的普通石橋過去。</p>
1012 <p>過橋後便是入山口，石階處立著一個石塊，上書「世界遺產，日光の社寺」，由東照宮、二荒山神社與輪王寺構成。其地是德川家族及幕府的聖地，東照宮乃是德川家康的靈廟，輪王寺的大猷院是德川家光的靈廟。大猷院卻不在輪王寺內，在二荒山神社邊上。</p>
1013 <p>沿石階上山，過輪王寺而不入。輪王寺正在修繕，亦是對外開放的，修繕處有一個空中迴廊，可以鳥瞰寺對面的庭院。到得山上，便見遊客多起來了，沒有了先前的荒涼之感。過輪王寺繼續上山，不過幾分鐘的腳程便到東照宮門口了。東照宮的遊客更見多了，熙熙攘攘地，舉著手機、平板電腦、或是相機，對宮前的五重塔拍照。</p>
1014 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_642b25775af590e1b2d42ce34f47a13f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_642b25775af590e1b2d42ce34f47a13f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_642b25775af590e1b2d42ce34f47a13f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_642b25775af590e1b2d42ce34f47a13f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_642b25775af590e1b2d42ce34f47a13f.jpg" alt="五重塔前拍照" title="五重塔前拍照的人"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>五重塔前拍照的人</figcaption></figure></div><p>日本佛塔大抵四角五重，此處亦不例外。塔身紅漆木，五重四角皆掛了翡翠綠小鐘，斗栱頗為繁復，祥雲頂著塔沿，蓮花托著翹木，斗升交錯，漆著綠紅藍三色，因為年代的原因，彩漆斑駁；又有百獸踩著楣木，甚是精緻。塔門緊閉，不得登塔瞻仰，略為遺憾。</p>
1015 <p>遂買票入廟，票價倒不記得了，大約千円左右。東照宮之遊玩，大抵是觀賞建築，探究歷史。或有旅行團駐留解說，日語我所不能，聽不太明白，於日本歷史又不甚了了，不過浮光掠影走馬觀花，隨了人流往里走動，及至出門時候才發現原來門口處有電子解說器出租的。</p>
1016 <p>在東照宮內左右看看，於眠貓處排隊時，天竟下起了小雨，稀稀疏疏的。過了眠貓又是石階，拾級而上，轉兩道彎，便到了奧宮御寶塔。其實並不算高，不想許多遊客皆氣喘吁吁。雨下得更見大了，繞塔轉了一圈便到塔旁的亭子里避雨。</p>
1017 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_ff030a374eb3e280006573b5f8de42bf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_ff030a374eb3e280006573b5f8de42bf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_ff030a374eb3e280006573b5f8de42bf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_ff030a374eb3e280006573b5f8de42bf.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_ff030a374eb3e280006573b5f8de42bf.jpg" alt="東照宮"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_88b5b5f990c1c67c8382159d991f3f2d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_88b5b5f990c1c67c8382159d991f3f2d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_88b5b5f990c1c67c8382159d991f3f2d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_88b5b5f990c1c67c8382159d991f3f2d.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_88b5b5f990c1c67c8382159d991f3f2d.jpg" alt="杉樹"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div></div>
1018 <p>待到雨小些了便折返回去，出了眠貓見遊客們在圍觀著一處屋子，原來是神社結婚式。男著紋付羽織袴，女著白無垢，站立著進行一道道的儀式。屋內光線略暗，看不太明白。</p>
1019 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_78d76597103540fda136d6e464bc49e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_78d76597103540fda136d6e464bc49e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_78d76597103540fda136d6e464bc49e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_78d76597103540fda136d6e464bc49e5.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_78d76597103540fda136d6e464bc49e5.jpg" alt="神社結婚式" title="東照宮內神社結婚式"loading="lazy" decoding="async" width="1600" height="1140" /></picture><figcaption>東照宮內神社結婚式</figcaption></figure></div><p>又在院內盤桓了此許時候，待雨小了許多後出得門來。雲層疊障，一時不見得會放晴。原本的計劃是要去一趟中禪寺湖的，這陰沈天氣，怕是拍不了碧湖，況且中禪寺湖離此又有些距離，坐公車來回便是二千円，猶豫著要不要去，還是先去二荒山神社看看，不知彌生祭是否開始了。</p>
1020 <p>卻是晴天霹靂，哦，不對，這時是個陰天。到了二荒山神社才看到告示，原來這段時間里亦不是每天都有祭的，週六沒有週日卻有。不免心寒，一下沒有了遊玩的興致，只匆匆在寺內走了走，便出寺下山了。</p>
1021 <p>中禪寺湖是懶得去了，彌生祭又見不到。一個人索然無味，走在街上，繞進了一處小道，不見人煙，一時竟悲從中來，不免感懷身世，只覺得孤獨寂寞。人生究竟為了什麼？一時思索不得，好想有個人能說說話。</p>
1022 <p>興致已經去了，遊玩沒了心情，不得不往車站走去。及至到了車站，太陽卻出來了，又還不想回家，便繼續前行，在一處喫茶店門口的白色漆木椅上坐了休息，曬曬太陽。此時的日光梅酒般柔和，不一時便醉倒了，靠著椅背，沐著陽光，竟然睡著了。待到太陽隱匿到了雲層里才醒來，時間已是五點。在車站前的店裡買了點土產，又花去了兩千円，便坐了一趟普通電車回家。</p>
1023 <p>這一日的日光之旅告一段落，不太成功，究竟也算出了一趟門，聊以記之。</p>
1024 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_15d320494fc952bea7a847352b3f64fb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_15d320494fc952bea7a847352b3f64fb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_15d320494fc952bea7a847352b3f64fb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_15d320494fc952bea7a847352b3f64fb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_15d320494fc952bea7a847352b3f64fb.jpg" alt="東武日光站"loading="lazy" decoding="async" width="1600" height="1064" /></picture></figure></div> ]]></content:encoded></item><item><title><![CDATA[ 談談 Markdown 編輯器 ]]></title><guid>https://lepture.com/zh/2017/about-markdown-editor</guid><link>https://lepture.com/zh/2017/about-markdown-editor</link><description><![CDATA[ 你真的需要一個 Markdown 編輯器麼？也許這只是個僞需求。 ]]></description><pubDate>Wed, 05 Apr 2017 15:17:02 +0000</pubDate><content:encoded><![CDATA[ <p>多年前，我曾寫過一個 <a href="https://github.com/lepture/editor">Markdown 編輯器</a>，不過是一時心血來潮，沒有認真打理，亦未作宣傳，不覺間竟成了我 GitHub 上星數最多的一個項目。而我認真寫作的一個 [Python Markdown Parser][mistune] 還未過千星，人心之難測幾何哉。</p>
1025 <p>寫 <a href="https://github.com/lepture/editor">Markdown Editor</a> 不過是因為好玩，過後自己並不曾使用，便至於荒疏了，因為「自己使用是一個很重要的原則」。</p>
1026 <hr />
1027 <p>選擇 Markdown 便是選擇自由，選擇不受制於編輯器的自由，因為任何一個文本輸入框都可以成為你的 Markdown 編輯器。</p>
1028 <p>正如 Markdown 的作者 John Gruber 所言：</p>
1029 <div class="blockquote"><blockquote><p>A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions...</p>
1030 </blockquote></div>
1031 <div class="blockquote"><blockquote><p>To this end, Markdown’s syntax is comprised entirely of punctuation characters, which punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like <em>emphasis</em>. Markdown lists look like, well, lists.</p>
1032 </blockquote></div>
1033 <p>雖然 Markdown 整體的語法設計並不完美，但並不妨礙它成為當今最流行的文本標記語言。誠如 John Gruber 所說，Markdown 的標記符號確實是精心挑選的（<em>carefully chosen</em>）的，符號本身的表意簡潔明瞭，而需要學習的語法量較少，最是<a href="http://lepture.com/zh/2013/typography-and-markdown">適合文字工作者</a>。</p>
1034 <p>譬如當我們看到<code>**這種強調**</code>的文法時，我們一眼便知道它表示強調，而不必看到渲染後的結果，這也正是 Markdown 的設計初衷。如果你必定要使用一個 Markdown 編輯器才能使用 Markdown 寫作的話，「你可能在用假的 Markdown」。</p>
1035 <p>自然，我並不是排斥 Markdown 編輯器。即使達到了手中無劍心中有劍的境界，亦不妨手持利刃，只是其究竟是否利刃？</p>
1036 <p>最下者，實時預覽之 Markdown 編輯器。何也？實時預覽一是無用，二是擾人思緒。</p>
1037 <p>編輯器之實時預覽多半與最終呈現效果並不一致，最終的展現效果當是由最終頁的樣式決定的，而這個樣式通常並非實時預覽時的樣式。既是如此，又何必實時預覽。Markdown 是所想即所得，假使預覽，亦只是檢查一下是否有些許不當的標記文法。</p>
1038 <p>更要緊者便是擾人思緒。寫作之時，當專注於內容，而非樣式。不像一般的所見即所得編輯器，Markdown 的實時預覽多半是與寫作輸入框分開的。實時預覽，屏幕便不得不實時刷新，勾引作者去看渲染後的結果，於寫作無益，打擾作者思緒罷了。</p>
1039 <p>次下者，花姿招展文法高亮之 Markdown 編輯器也。這不過是代碼編輯器的通病，用顏色來提示代碼文法固然不錯，但用於 Markdown 則失之偏頗了。顏色是用來提醒代碼文法的，Markdown 卻是寫作之用，這番提醒於寫作無益，亦只是打擾作者思緒罷了。便是有文法高亮，亦當節制，不過灰度上的變化便可。</p>
1040 <p>我個人覺得 GitHub Issues 的輸入框便是很不錯的 Markdown 編輯器。事實上任何一個大小適合的 <code><textarea></code> 都是個合格的 Markdown 編輯器，如果再加上一個最終預覽功能的話，便是錦上添花了。GitHub Issues 的輸入框正如此，其預覽功能所顯示的樣式亦是文字最終的呈現效果，最是完美的編輯器。</p>
1041 <p>這樣想來，我之所作編輯器倒不算很壞的編輯器，文法高亮之顏色相當節制，有預覽功能而無實時預覽之擾人。是否應該撿起這最多星之項目呢？可是我已成為了 <code><textarea></code> 愛好者，於此種編輯器並無憐惜之情。</p>
1042 <p>最後一點建言。排版，應當是寫作完成之後才需要做的事。寫作需要無拘無束，心無旁騖。便如圖片、鏈接等，可於寫作完成之後再標注，圖片不妨在其處放一個標記符號，鏈接不妨先放在文本框里，不急於與文字對應上。待到文字有成，需要預覽之時，再拾遺補缺。</p>
1043 <p>[mistune]: <a href="https://github.com/lepture/mistune">https://github.com/lepture/mistune</a></p>
1044 ]]></content:encoded></item><item><title><![CDATA[ 閱乎，再見 ]]></title><guid>https://lepture.com/zh/2017/close-yuehu</guid><link>https://lepture.com/zh/2017/close-yuehu</link><description><![CDATA[ 一個通知，閱乎下線了，靜悄悄地，彷彿沒有人注意到。 ]]></description><pubDate>Wed, 05 Apr 2017 04:26:10 +0000</pubDate><content:encoded><![CDATA[ <p>閱乎在四月一日下線了，其實應該更早關掉這個網站的，多半因爲懶，一直放着無所作爲，終於到了這個時候才關掉。</p>
1045 <p>這幾年前端的變化着實驚人，閱乎的代碼也多年沒有維護了，竟至於編譯不了前端的 JavaScript 了。因爲要關站，只草草修改了一下模版，於二月展示出「閱乎將於四月一日下線」。</p>
1046 <p>其間並沒有人詢問網站的情況，大約確實沒什麼人用。只有一封郵件提及 ，問我是否需要找工作，因爲「我工作的閱乎要關掉了」。</p>
1047 <hr />
1048 <p>三年前，在<a href="/zh/2014/introduce-yuehu">閱乎，你好</a>一文裏，我提到了閱乎的道德困境，一種「又要當婊子，又想立牌坊」的尷尬，所以終究不肯花太多心思在閱乎上面。</p>
1049 <p>現在想來，在閱乎上做錯了許多事，亦浪費了許多時間，悔之晚矣。既然不肯花太多心思，便應該早點停掉的，尤其是這種需要運營的網站。</p>
1050 <p>閱乎沒有做導出功能，如果你希望找回之前的數據，請郵件聯繫我，我將以附件形式發送給你。</p>
1051 <p>閱乎，再見。</p>
1052 ]]></content:encoded></item><item><title><![CDATA[ Vue: from view to view ]]></title><guid>https://lepture.com/en/2016/vuejs-from-view-to-view</guid><link>https://lepture.com/en/2016/vuejs-from-view-to-view</link><description><![CDATA[ A lightning talk for #vuejs Japan. An idea on maintainable vue project. ]]></description><pubDate>Mon, 06 Jun 2016 21:20:00 +0000</pubDate><content:encoded><![CDATA[ <p>This is a brief of my #vuejs Japan lightning talk. A concept on how to
1053 manage your vue files.</p>
1054 <script async class="speakerdeck-embed" data-id="8e462e5ccbc541ddb5cb2b6613af8c42" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
1055
1056 <p>A basic structure for your vue files:</p>
1057 <div class="block-code"><pre><code>App.vue
1058 views/
1059 Home.vue
1060 ...
1061 components/
1062 Avatar.vue
1063 ...
1064 widgets/
1065 ChatPopup.vue
1066 ...</code></pre></div>
1067 <h2>App.vue</h2>
1068 <p>The entry point for your project.</p>
1069 <p>If you are using vue-router, it is the file for <code><router-view></code>.</p>
1070 <h2>views</h2>
1071 <p>Views are the pages. If you are using vue-router, it is the component that
1072 <code><router-view></code> represents right now.</p>
1073 <p>Every vue file in <code>views</code> directory is a web page.</p>
1074 <h2>components</h2>
1075 <p>Components are just components. A component is a UI related module, it only
1076 cares about UI. It can never send HTTP requests.</p>
1077 <h2>widgets</h2>
1078 <p>A widget is a component that can handle data communication. It can talk to the
1079 server, and it must talk to the server.</p>
1080 <hr />
1081 <p>For more information, check the slide. A talk at 2016-05-31.</p>
1082 ]]></content:encoded></item><item><title><![CDATA[ 小明的胡言 ]]></title><guid>https://lepture.com/zh/2016/my-tweets</guid><link>https://lepture.com/zh/2016/my-tweets</link><description><![CDATA[ 摘錄一點自己的 Twitter 言論，聊以充數。 ]]></description><pubDate>Fri, 27 May 2016 00:10:00 +0000</pubDate><content:encoded><![CDATA[ <p>翻閱自己的 Twitter，發現有一些還是挺有意思的，故摘錄整理之，聊以充數。</p>
1083 <h2>日常篇</h2>
1084 <p>有朋友拍了許多照片，想挑一張發到 Instagram 上，正猶豫著，我便給了點自己的意見。</p>
1085 <p>「我覺得白色的這個比較好。」</p>
1086 <p>朋友故意嫌棄道：「不選這張。」</p>
1087 <p>「哦，那至少算是幫你排除了一個選項。」</p>
1088 <hr />
1089 <p>在淺草逛的時候，有一家店的台灣店員好可愛，想去搭訕又不好意思。正好有個中國客人過來詢問「請問這個是單賣的嗎？」</p>
1090 <p>我便嘟噥了一句「這個不是丹麥的，是日本的。」</p>
1091 <hr />
1092 <p>在 CEO 家裡玩時，談到夢想。</p>
1093 <p>小靜姐姐道：「我以前的夢想是做徐太太，隨便走到一家店裡，這個這個還有這個都包起來。」</p>
1094 <p>我便告訴她「現在差不多也做到了。」</p>
1095 <p>「……」</p>
1096 <p>「每天不是在亞馬遜上買到手軟麼？雖然不是買給自己的。」</p>
1097 <hr />
1098 <p>有朋友說「我老婆都不知道我掙多少錢。」</p>
1099 <p>我也回道「我老婆也不知道我掙多少錢。」</p>
1100 <hr />
1101 <p>有朋友正在生氣，於是有人問道：「今天誰得罪她了？」</p>
1102 <p>「沒有人啊。」</p>
1103 <p>「...」</p>
1104 <p>「得罪她的的都不是人。」</p>
1105 <hr />
1106 <p>一起開車出去玩時，有朋友暈車：</p>
1107 <p>「最好不要讓他看，他會暈。」</p>
1108 <p>「嗯，這個車禁不起吐。」</p>
1109 <hr />
1110 <p>新買了件衣服，有人問道：</p>
1111 <p>「你這件衣服是自己的錢買的嗎？」</p>
1112 <p>「不是。已經花出去了，不是我的錢了。」</p>
1113 <hr />
1114 <p>以前沒有女朋友的時候，被人問道：</p>
1115 <p>「你為什麼總是關注別人的女朋友？」</p>
1116 <p>「自己沒有呀，只好關注別人的。」</p>
1117 <h2>言論篇</h2>
1118 <p>程序員的事能算偷麼？那是爬。</p>
1119 <p>G20 到底是敵人還是朋友啊？一會兒要備戰一會兒要喜迎。</p>
1120 <p>我單知道飛盤是給狗玩的，沒想到人也可以玩。</p>
1121 <p>群眾的眼光要麼是雪亮的要麼是盲目。</p>
1122 <p>喜歡的就叫姊姊，不喜歡的就叫大嬸。</p>
1123 <p>每次見到 豆郵(1) 都好興奮，結果打開一看，是豆瓣發來的。</p>
1124 <p>我一個澡從 2015 年洗到了 2016 年。</p>
1125 <p>國內大公司的設計師大多都獲得過小紅點設計獎。</p>
1126 <p>翻看郵件，發現有人寫郵件，第一句話居然也是「在嗎」</p>
1127 <p>我叫小明，我的人生充滿了段子，這一點從我的名字就可以看出來。</p>
1128 <h2>日西篇</h2>
1129 <p>最近談戀愛了，不免想曬曬生活里的俏皮話。</p>
1130 <p>和女友在上海分別時，女友被問到生肖時答道「我屬猴的」，我便接道「那和上海還是挺有緣的」。</p>
1131 <p>女友早起看了看鏡子，嫌臉腫，道「今天不想拍照，好醜啊」。我便安慰她「嗯，鏡頭不好，如果把鏡頭換成我的眼睛就漂亮了」。</p>
1132 <p>女友背著包去結賬，我空手坐在沙發上等她。服務生都用很奇怪的眼神看著我，彷彿在說，看著也不像小白臉啊。</p>
1133 <hr />
1134 <p>女友說：「你好像 gay 啊！」</p>
1135 <p>我答：「是啊，我就是 gay，我是你的 gay。」</p>
1136 <hr />
1137 <p>一起出去旅遊，回來後查看相機。</p>
1138 <p>我說：「相機里都是你的照片，沒有風景照，發不了 Instagram 了。」</p>
1139 <p>女友表示無賴：「…」</p>
1140 <p>我道：「你就是我全部的風景，但是我不想和別人分享。」</p>
1141 <hr />
1142 <p>女友早晨發消息過來：</p>
1143 <p>「昨天做惡夢了。」</p>
1144 <p>「夢到什麼了？」</p>
1145 <p>「不記得了。」</p>
1146 <p>「我也做惡夢了。」</p>
1147 <p>「夢到什麼了？」</p>
1148 <p>「沒有夢到你就是惡夢。」</p>
1149 <h2>經歷篇</h2>
1150 <p>初中時候的操場是煤渣跑道，晨練下來整個鼻子里都是煤灰，黑黢黢的。後來我就養成了早上一定要遲到的好習慣。</p>
1151 <p>我在 2013 年的時候打算來次環球旅行，剛游到廈門就被朋友叫去他們公司了，於是我的環球旅行就結束了。</p>
1152 <p>隔了半年，覺得沒什麼可以做的就離開了。於是改成環遊中國，從雲南到成都，再飛北京，去西北，行至敦煌，打算去新疆。就在將去新疆的前天發生了砍人事件，於是中斷了行程，結束了環中國之旅。</p>
1153 ]]></content:encoded></item><item><title><![CDATA[ 列車上的女子 ]]></title><guid>https://lepture.com/zh/2016/girl-on-the-train</guid><link>https://lepture.com/zh/2016/girl-on-the-train</link><description><![CDATA[ 去歲回鄉記事，列車上座位對面的陌生女子。 ]]></description><pubDate>Sat, 06 Feb 2016 16:30:00 +0000</pubDate><content:encoded><![CDATA[ <p>「程序員都挺宅的，情商也低」，對面的女子如是說道。</p>
1154 <p>我不記得爲何會同她聊天了，假使沒有開口，一切都是如此美好，不免有些後悔起來，真希望留在心裏的依舊是一個美麗的<a href="/zh/2009/the-unknown-girl">陌生人</a>。</p>
1155 <p>西行的火車滿載著回鄉過年的人，高鐵的過道裏也站滿了。可巧我竟買到了一張坐票。每年都嘮叨著今年春節不要回家，懶得見那些個討厭的親戚，結果每年還是會回去。很不湊巧，又買到了車票。</p>
1156 <p>是一個靠窗的位置，向左瞥一眼便見著窗外景緻了。天色不太好，窗外風景隔了一層灰色簾幕便暗淡了許多。</p>
1157 <p>坐在對面的女子低頭玩著手機，雖然是短髮，流海還是遮住了臉，於偏左處分開來，見著了鼻尖。頭髮沒有染色，只是黑，無情的黑，流水一般垂著。她著一身黑色毛衣，分辨不出紋路，領口豎著，緊緊圍著脖子，直與黑色短髮融爲一體。</p>
1158 <p>偶爾擡頭的時候，見著了她的顏，略帶輕妝，兩頰便顯得粉嫩粉嫩，雙脣點綴，亦是偏粉色的胭脂。鼻樑上架著一副黑框眼鏡，稍顯方正，隔著眼鏡，看不太真切。也許是見著了什麼好笑的訊息，她嘴角微微翹起，於嘴角邊見著了淺淺的兩點酒窩。</p>
1159 <p>後來是如何開始聊天的，細細回想，也是枉然。我那時正看著《老殘遊記》，這一章正巧是璵姑見子平。</p>
1160 <div class="blockquote"><blockquote><p>那女子嫣然一笑，秋波流媚，向子平睇了一眼。子平覺得翠眉含嬌，丹脣啓秀，又似有一陣幽香沁入肌骨，不禁神魂飄蕩。那女子伸出一隻白如玉軟如棉的手來，隔著炕桌子，握著子平的手，握住了之後，說道：「請問先生：這個時候比你少年在書房裏貴業師握住你的手『撲作教刑』的時候何如？」</p>
1161 </blockquote></div>
1162 <p>起先卻也聊了些時間，不過些閑話，後來聊到職業的時候，我告訴她我是程序員。她看了我一眼，說道「程序員都挺宅的，情商也低。」</p>
1163 <p>我笑了笑，沒有說話。</p>
1164 <p>正好火車駛出了山洞，我便轉頭看了看窗外，還是一般的天色，枯黃的農田夾在兩山之間，遠處是一片雲層，厚厚的陰沈著臉，遮住了陽光，可是一時又不似要下雨的樣子，只管這樣陰沈著陰沈著。</p>
1165 ]]></content:encoded></item><item><title><![CDATA[ 日記、新年お願いします ]]></title><guid>https://lepture.com/zh/2016/new-year-koshigaya</guid><link>https://lepture.com/zh/2016/new-year-koshigaya</link><description><![CDATA[ 新年假期的最後一天，沿元荒川向西北，至梅林公園，閒逛的一天記事。 ]]></description><pubDate>Sat, 16 Jan 2016 11:15:00 +0000</pubDate><content:encoded><![CDATA[ <p>平成二十八年。新年里也不曾約到人，只好一個人去逛逛商場，買點生活用品。看看也就是假期的最後一天了，簡直辜負了好時光，沒有去都內的計劃，也沒有出去遊玩的想法。越谷的天氣一向不錯，早晨起來，又是一個好天氣，直催著人出去吧出去吧。</p>
1166 <p>太陽已是直射陽台的時光了，元荒川的堤上不時有跑步者經過。我攜了相機，打算沿著元荒川一直向西北，去梅林公園賞梅，也不知梅花是否已開。</p>
1167 <p>元荒川已走過許多次了，家門口的這一段，有一條附溪，在堤的另一邊，河水比較淺，長滿荒草的河底已經露了出來，枯黃的一片，到底是冬天的景致，頗合「元荒」二字。元荒川本身卻是一片綠草地，烏鴉、鴿子、麻雀、野鴨便在這草叢裏啄食，全無冬日痕跡。這附溪還有一片蘆葦蕩，在靠近新平和橋的一端，風過處，蘆葦肆意搖擺，一股繁盛的荒涼。</p>
1168 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_50de6be478788f83b21ea62e764109d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_50de6be478788f83b21ea62e764109d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_50de6be478788f83b21ea62e764109d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_50de6be478788f83b21ea62e764109d4.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_50de6be478788f83b21ea62e764109d4.jpg" alt="元荒川" title="元荒川附屬小溪"loading="lazy" decoding="async" width="1600" height="1202" /></picture><figcaption>元荒川附屬小溪</figcaption></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_fa2dd7cb660d3f997595c9dd8cb5485b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_fa2dd7cb660d3f997595c9dd8cb5485b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_fa2dd7cb660d3f997595c9dd8cb5485b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_fa2dd7cb660d3f997595c9dd8cb5485b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_fa2dd7cb660d3f997595c9dd8cb5485b.jpg" alt="野鴨" title="元荒川里的越谷吉祥物，野鴨"loading="lazy" decoding="async" width="1600" height="1066" /></picture><figcaption>元荒川里的越谷吉祥物，野鴨</figcaption></figure></div></div>
1169 <p>元荒川向西，過兩個路口，有一個神社，喚作<a href="http://www.hisaizu.jp/">久伊豆神社</a>，是越谷最大的神社，據聞創建於平安時代。新年里我還不曾去過神社，正巧路過，不妨去拜祭一下。神社有一處「久伊豆神社の藤」，是有名的景點，可惜未到花開時節，不能一睹紫藤蘿風採。</p>
1170 <p>去往神社的石板路，兩邊架著棚子，燒烤、炒麪、丸子、米飯，各式各樣的攤子。道路狹窄，越谷這偏僻小城也會有人擠人的情形，懐かしい。</p>
1171 <p>我也買了一份玉子燒當作午餐，可惜過於甜膩，雖然<a href="/zh/2015/beloved-hangzhou">在杭州</a>這麼多年，已經適應了甜味，但是依然無法接受這份玉子燒的甜膩。旁邊的小女孩卻吃得挺開心，不時叫喚著「見て、見て」希望能引起母親的注意。</p>
1172 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_6e1ecc009a4ed2385276acaa02675038.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_6e1ecc009a4ed2385276acaa02675038.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_6e1ecc009a4ed2385276acaa02675038.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_6e1ecc009a4ed2385276acaa02675038.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_6e1ecc009a4ed2385276acaa02675038.jpg" alt="楓" title="去往神社的路邊，陽光照耀下的楓葉"loading="lazy" decoding="async" width="1600" height="1202" /></picture><figcaption>去往神社的路邊，陽光照耀下的楓葉</figcaption></figure></div><p>沿著元荒川繼續向西北，有一段堤邊滿栽著櫻花樹，是謂元荒川櫻堤。這櫻花樹幹也有一人粗了，上了點年紀，黑黢黢的樹皮，光禿禿的樹枝。等到櫻花季節，漫步於這堤上，待櫻花落到肩膀上，輕輕拂去，想想也覺得浪漫。</p>
1173 <p>這櫻堤頗長，走到川流拐彎處，是一片農田，在這裡斷去了櫻花樹。本以為櫻堤到此就結束了，拐過了彎，堤邊又是櫻花樹了，一直綿延著綿延著。我寫西湖時嘗嘆道「蘇堤那麼長，牽著手就感覺是一生一世了」，這櫻堤卻是可以走到來生了。</p>
1174 <p>我到梅林公園時天色已晚，不一時便見著夕陽了。快到梅林時，遇著一個老爺子在河邊畫畫，畫元荒川兩岸，這時已經畫得差不多了。仔細一看，老爺子斷了左手，左邊的袖子空空蕩蕩的。我日語也不會，也只聽得懂一點簡單的詞，老爺子說話也不清楚，只是大約瞭解到他是從東京過來的。這裏又沒有其它人陪同，老爺子竟是一個人一條胳膊拖著個大箱子過來的呀。</p>
1175 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_d48ec26d58d49c42fabdee80b245030f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_d48ec26d58d49c42fabdee80b245030f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_d48ec26d58d49c42fabdee80b245030f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_d48ec26d58d49c42fabdee80b245030f.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_d48ec26d58d49c42fabdee80b245030f.jpg" alt="畫" title="從東京來的老爺子畫元荒川兩岸"loading="lazy" decoding="async" width="1600" height="1202" /></picture><figcaption>從東京來的老爺子畫元荒川兩岸</figcaption></figure></div><p>梅林公園的梅花還未盛開，原訂的賞梅計劃落了個空。其時樹上都是一點點紅色的小花蕾，初見時不免失望，入了梅林再向裏走，有幾株卻開了幾朵，亦算作是個驚喜吧，聊勝於無。</p>
1176 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_ac3b7af1398d5bf0d324d3fddc7b2875.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_ac3b7af1398d5bf0d324d3fddc7b2875.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_ac3b7af1398d5bf0d324d3fddc7b2875.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_ac3b7af1398d5bf0d324d3fddc7b2875.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_ac3b7af1398d5bf0d324d3fddc7b2875.jpg" alt="梅花" title="開放的梅花"loading="lazy" decoding="async" width="1600" height="1202" /></picture><figcaption>開放的梅花</figcaption></figure></div><p>天色已晚，假期的最後一天便這樣結束了，新的一年也開始了。新年、お願いします。</p>
1177 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_d32221107a48a8e553d826c677448208.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_d32221107a48a8e553d826c677448208.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_d32221107a48a8e553d826c677448208.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_d32221107a48a8e553d826c677448208.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_d32221107a48a8e553d826c677448208.jpg" alt="暮色" title="大袋站暮色"loading="lazy" decoding="async" width="1600" height="1202" /></picture><figcaption>大袋站暮色</figcaption></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_59d02f6a7f79001ff8c56d649eb0c93e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_59d02f6a7f79001ff8c56d649eb0c93e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_59d02f6a7f79001ff8c56d649eb0c93e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_59d02f6a7f79001ff8c56d649eb0c93e.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_59d02f6a7f79001ff8c56d649eb0c93e.jpg" alt="夕陽電軌" title="初到日本時拍的第一張夕陽"loading="lazy" decoding="async" width="1600" height="1229" /></picture><figcaption>初到日本時拍的第一張夕陽</figcaption></figure></div></div>
1178 <hr />
1179 <p>圖片使用 Flickr 管理，如果你身處中華局域網，可能無法看到圖片，請訪問<a href="http://weibo.com/1562776344/DdrMpD17B">備份微博</a>。</p>
1180 ]]></content:encoded></item><item><title><![CDATA[ 日記、初めまして ]]></title><guid>https://lepture.com/zh/2015/first-day-koshigaya</guid><link>https://lepture.com/zh/2015/first-day-koshigaya</link><description><![CDATA[ 初めまして、在日記事，記錄在日本的第一個早晨。 ]]></description><pubDate>Wed, 30 Dec 2015 11:30:00 +0000</pubDate><content:encoded><![CDATA[ <p>早晨醒來的時候，天已大亮，陽光透過窗簾，染就一片朦朧的黃，又有幾束光線鑽了簾幕的空隙射向地面，給室內憑添了幾分暖意。印象里，三四點的時候電視機突然自己打開了，播放起電視節目，我下了閣樓去關掉電視，也不知是真實還是夢境，或許只是昨晚的酒精作祟。</p>
1181 <p>我一向是不喝酒的，昨晚的忘年會飲了兩杯果酒（大約是果酒吧），甜甜的溫和的誘人的味道，純度雖然很低，臉卻熱乎乎起來，人也跟著興奮了，想想還是有點尷尬的。</p>
1182 <p>這是我在日本的第一個早晨。拉開窗簾，步到陽台上，陽台朝東南，正好遇著此時直射過來的太陽，整個人都暖洋洋的。天空藍得有點假，放眼望去，沒有一點雲。陽台正對著元荒川，早起的風吹拂水面，陽光灑在水上，一片一片閃爍著，波光粼粼。</p>
1183 <p>我嗅了嗅外衣，還殘留著昨晚忘年會的燒烤味，裡面的毛衣亦是，便拿到陽台晾著，順便把昨晚的衣服也丟進了洗衣機，就出門去買早餐了。我那時只穿了件襯衫，外面加了件羊毛開衫，走在元荒川的堤上，寒風吹過，原來今天也是很冷的，被陽台的陽光欺騙了。不過還是先忍一忍，待買過了早餐再回家加件外套。</p>
1184 <p>元荒川的堤上鋪著瀝青，靠河的一邊長滿了青草，另一邊的青草地偶爾有一片修剪過的灌木群，也是一片綠，簡直不像冬天。走在堤上，看風吹起河邊柳枝，水中倒映著柳枝飛舞。或有兩三行人經過，跑步的，牽著狗溜達的。</p>
1185 <p>沿著堤向西，西邊天際倒還有幾絲雲，模模糊糊不太真切。路上遇著一片鴨子，在河邊啄著草地，我以為是誰家養的，便左右望了望，也沒見著放鴨子的人。回家的時候，這群鴨子已經換了地方，靠近我的住所附近了。忽而有只黑色的大鳥展翅飛過，倒有點鷹姿，黑乎乎的呱呱叫著，原來是烏鴉。這麼大的烏鴉我還是第一回見到，老家的烏鴉個子都小小的，哪裡會有鷹的感覺。這烏鴉落向鴨子處，驚嚇了群鴨，鴨子們撲撲翅膀跳著飛往河中了。</p>
1186 <p>後來才知道這不是家鴨，是野鴨。越谷市的吉祥物便是野鴨背大蔥，是越谷挺有名的物種，大蔥我卻還沒見識到。野鴨害怕烏鴉，倒是一點都不怕人。</p>
1187 <p>只可惜路還不太熟，不曾尋到吃早餐的店，又不太想過河，只得回家先晾過洗衣機里的衣服再出門了。</p>
1188 <p>いいお天気ですね。初めまして。</p>
1189 <hr />
1190 <p>2015.12.29 - 越谷</p>
1191 <p>附注：日記者非每日記錄也，是日本記事之簡寫也。</p>
1192 ]]></content:encoded></item><item><title><![CDATA[ 杭州記憶 ]]></title><guid>https://lepture.com/zh/2015/beloved-hangzhou</guid><link>https://lepture.com/zh/2015/beloved-hangzhou</link><description><![CDATA[ 再見，杭州。每一次短暫的離去，過後總是回想起杭州的好處，忘卻了討人厭的陰雨天氣。 ]]></description><pubDate>Thu, 24 Dec 2015 10:30:00 +0000</pubDate><content:encoded><![CDATA[ <p>杭州這座城市陰沈沈濕噠噠的，徬彿童年的陰影，揮之不去。尤其是梅雨時候，屋裡地板一顆顆水珠，牆面也沁出一片，相框上桌面上都冒出了汗，像溺水的女鬼般縈繞著，滴滴答答，連帶著整個人也黏糊糊起來。</p>
1193 <p>在良渚的時候，我住一樓的房子，進門便是水汪汪一片，晾著的衣服一時半會也乾不了都濕漉漉的，空氣里散發著霉菌的氣味。後來買了個抽濕器，每日里抽去一盒水，這才好了些許。</p>
1194 <p>房子有一個花園，刷白漆的柵欄圍了一圈，裡面是一平草地。女主人把花園打點得有模有樣，柵欄的邊邊角角栽種著各色花草，雛菊茶花繡球月季。假使氣候乾燥點，住在這裡便愜意許多。</p>
1195 <p>四月的清晨，曉曦初現，陽光灑在草尖的露珠，晶瑩剔透，草地如初生般，嫩綠嫩綠。柵欄邊的春菊開得正盛，或有幾滴露珠點綴花瓣，因為清早，花瓣伴了朝氣直挺挺的。正是春日最好的註解。</p>
1196 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_1f209b8b7f0c98b94954fbd81a32d6af.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_1f209b8b7f0c98b94954fbd81a32d6af.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_1f209b8b7f0c98b94954fbd81a32d6af.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_1f209b8b7f0c98b94954fbd81a32d6af.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_1f209b8b7f0c98b94954fbd81a32d6af.jpg" alt="清晨的花瓣" title="清晨的花瓣"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>清晨的花瓣</figcaption></figure></div><p>這時節已是櫻花尾季，葉子已經長出，綠中帶黃，還是嫩芽，櫻花花瓣卻已開始謝去。良渚文化村栽種了不少櫻花樹，便是小區里也有些許，出樓棟便是兩株。這時節已有蜜蜂出沒，在這櫻花的尾季收穫最後一份蜜釀。</p>
1197 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_ee5aec1e5328f7c45f7e98519d9d4c6c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_ee5aec1e5328f7c45f7e98519d9d4c6c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_ee5aec1e5328f7c45f7e98519d9d4c6c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_ee5aec1e5328f7c45f7e98519d9d4c6c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_ee5aec1e5328f7c45f7e98519d9d4c6c.jpg" alt="蜜蜂與櫻花" title="蜜蜂與櫻花"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>蜜蜂與櫻花</figcaption></figure></div><p>我在良渚生活了一段時間，借住於朋友家，都是支付寶的前同事。良渚偏安一隅，不比城裡，平日里人煙稀少，安靜極了。我每日去春漫里的閱讀者咖啡館寫點代碼。工作日的白天咖啡館偶爾會有兩三個客人，時常一整天就我一個客人，點一杯咖啡或者白茶，一個人清清淨淨地使用 Wi-Fi。我不太懂咖啡，也沒有打算研究的意思，一般等茗禪來，由她隨自己心意。她喜歡兩種豆子混合起來，滴濾紙手衝。咖啡入口略有點酸，蓋過了苦味，稍等片刻便舌頭生津，唾液止不住分泌，嘴裡便是芳香甜味。</p>
1198 <p>良渚借住了些時候，中途移居清邁一月，回來後又住了兩個月才換到城西。我本不在杭州工作，杭州的空氣也不好，交通又差，可是多半時間還是選擇呆在了杭州，沒有辦法，止不住地喜歡著這座城市。</p>
1199 <p>我第一次來杭州是因為工作。那時候還沒有畢業，因為簽了支付寶的工作，先過來實習。我們幾個同期的實習生合租了一套破房子，在西溪路上靠近老和山上山口的地方，房子水壓不穩，時常停水，現在應該已經拆掉了吧。支付寶那時還在華星時代，路途不遠，我們每日清早便走路上班，也沒有擠公交車的煩惱。</p>
1200 <p>杭州多小河，連綴著穿行於城市中。龍應台在《大江大海一九四九》提及到她母親美君，說美君駛船往返於杭州與淳安間做生意呢，那時候的水路比起今時發達多了，想必河流也是多多了。</p>
1201 <p>我們清晨步行上班，沿途也有一段小河，河邊有一片綠地長滿了嫩草，草地上又是一團團紅的綠的七葉楓樹、紅葉石楠、桃樹、石榴樹。早晚途徑此處，偶爾能見到河上一人一船，船夫一邊撐著船一邊打撈河中的垃圾與落葉，船頭已經堆著一小倉雜物了，原來是環衛工人。公路上也時常可見這些環衛，穿著制服戴著袖章，景區尤其多，把杭州打掃得乾乾淨淨。有一個理論，說是如果有人隨地丟了垃圾，如果不及時打掃掉，這裡馬上就會變成垃圾堆。杭州是旅遊城市，遊客頗多，大家素質又不高，總不免有亂丟亂扔，杭州便是靠了這許多的環衛，及時清掃掉丟棄物，避免了垃圾堆的出現。</p>
1202 <p>我對杭州的第一印象便是乾淨，第二印象是友好。還是實習時候，有一回過馬路，因為沒有紅綠燈，便打算在路邊等著尋找空隙穿過馬路，不曾想才駐足便有小轎車停下，示意我先過馬路，後面的車也都開始減速，真是受寵若驚。你想啊，一個剛從武漢過來的學生，從武漢啊，遇到這樣的事總免不了詫異，後來又經歷過多次，對杭州不免又多了幾分喜愛。</p>
1203 <p>實習結束後回到武漢，鬧哄哄的城市，工地遍野，灰塵飛揚，公車馳騁，這一對比，只覺得除了我們可愛的校園，武漢真真叫人喜歡不上來。</p>
1204 <p>我在支付寶呆了兩年多，斷斷續續在杭州也生活了三年多。每一次短暫的離去，過後總是回想起杭州的好處，忘卻了討人厭的陰雨天氣。杭州生活便利，又不乏閒逛之處，週末的時候一個人出門散散步，走上一整天也是常有的事。最常去的還是西湖，雖然看過了一遍又一遍，總也看不厭，每每有朋友到杭州，總是要去西湖逛逛的。可惜一般遊客又如何能體會到西湖的好呢？她那麼嫻靜優雅，沒有老鴇的吆喝聲也沒有傾世的容顏，就在那裡，徬彿隔壁家的小姑娘，雖然人來人往，總不願意認真瞧瞧。</p>
1205 <p>譬如這春日里的紅楓，靜靜站在西湖邊，看遊客行色匆匆。只有我佇立其下，欣賞著這春天里的秋色，醉人的一片紅，紅於二月花。待到秋天再來的時候，這株楓樹又是一片綠了，簡直就是叛逆期的少年，一點也不守著時令。</p>
1206 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_06f3b4af0f7a0a8fe30c942956c7d83a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_06f3b4af0f7a0a8fe30c942956c7d83a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_06f3b4af0f7a0a8fe30c942956c7d83a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_06f3b4af0f7a0a8fe30c942956c7d83a.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_06f3b4af0f7a0a8fe30c942956c7d83a.jpg" alt="春天里的紅楓" title="春天里的紅楓"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>春天里的紅楓</figcaption></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_75493e81b25ff62d3626374e0700b8e7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_75493e81b25ff62d3626374e0700b8e7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_75493e81b25ff62d3626374e0700b8e7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_75493e81b25ff62d3626374e0700b8e7.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_75493e81b25ff62d3626374e0700b8e7.jpg" alt="春天里的綠楓" title="春天里的綠楓"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>春天里的綠楓</figcaption></figure></div></div>
1207 <p>多半時候我會挑著遊人少的時間來西湖，比如下點小雨，又或者工作日的白天。如果是工作日還下著點小雨的白天那就更妙了，尤其還是和璇姐姐一起。剛好玉伯不在，我們工作也做得差不多了，沒有什麼要緊的事，我便央著璇姐姐開了車去西湖附近吃午飯，飯後順便去西湖散散步。那時下著一點點細雨，也不甚大，飄零著落在人臉上一瞬間就消失了。沿北山路向西，偶爾也會遇上三兩行人。北山路道旁栽滿了梧桐，如蓋般遮蔽天幕，這時節已有葉子金黃了。輕風拂過，湖邊柳枝便跟著飄起，髮絲一般飄逸。雖然入了秋，柳枝還是青綠，只在這陰雨天里稍顯黯淡。人說「晴西湖不如雨西湖」，我倒沒有太大感觸，大約是因為雨西湖遊人少吧。於我，和璇姐姐一起散步就覺得很開心了。</p>
1208 <p>「晴西湖不如雨西湖」我不能體會，「雨西湖不如霧西湖」卻有點意思。正巧是個週末，連續幾天的大霧，空氣質量倒還好。我和<a href="http://imtx.me">圖拉鼎</a>約好了，要見見他家的女朋友。在他家吃過午飯，究竟是坐不住，下午些時候，三人便去爬寶石山了。寶石山上有一處絕佳的觀景點，視野空曠，一眼便可覽盡西湖全景。這觀景點也是到過一次又一次的，也有凌晨登山到這裡守著日出的，望向東邊，看太陽從保俶塔邊一點點升起，見著東邊天際一點點紅潤。下了山便是北山路，其時霧色已經淡了許多，西湖在這霧裡越發顯得安靜了，寧靜詳和，不起波瀾，只是一片朦朧。</p>
1209 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_b16d21474db12618b64c69daf252f338.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_b16d21474db12618b64c69daf252f338.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_b16d21474db12618b64c69daf252f338.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_b16d21474db12618b64c69daf252f338.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_b16d21474db12618b64c69daf252f338.jpg" alt="霧裡西湖" title="霧裡西湖"loading="lazy" decoding="async" width="1600" height="1202" /></picture><figcaption>霧裡西湖</figcaption></figure></div><p>西湖有好幾條堤，最有名的當屬白堤與蘇堤了，西湖十景之一的斷橋殘雪便與白堤相接，也算作白堤的一部分吧。我偏愛蘇堤，時常一個人漫步蘇堤上，看兩岸垂柳，看過往行人，跑步的，騎腳踏車的，牽著小孩散步的。有時也能見到蹲坐於堤邊寫生的姑娘，畫兩岸飄柳，畫湖中游船。一個人走過蘇堤一座一座拱橋，禁不住也會幻想，假使與心愛的姑娘牽著手散步在這蘇堤上該是怎樣的情景。蘇堤那麼長，牽著手就感覺是一生一世了。</p>
1210 <p>白堤蘇堤總是人來人往，滿載的遊客。楊公堤便清閒多了，名聲不甚響，隱匿於西湖西，其實離遊人多處也不甚遠，往南走幾步便是太子灣了。可是，這裡徬彿是另一個世界，遠離紛擾，大隱隱於世莫過於此了。楊公堤上有幾處拱橋，拱著腰有點陡，乘公交車過楊公堤<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>頗為有趣，每每經過拱橋，將要下橋之時，便聽得乘客一陣驚呼，因為失重，心也跟著撲通一下，徬彿過山車。</p>
1211 <p>沿著楊公堤往太子灣方向，在半途有一個路口通向杭州花圃，過了花圃，下去望南走，有一片公園藏在林蔭里。這片綠地遊客少至，偶爾會有三三兩兩閒步至此。林間有一個園子，頗有江南味道。掩映在綠叢的一堵白牆，青瓦的頂，中間開了個圓形的門，門上書著「掇景園」三個字，望過門去又是一堵白牆，靠牆角有一棵雪松伸展著。門映雪松，雪松依牆，前後兩堵白牆失去了層次，徬彿在同一張紙面上的文士畫。掇景園裡多有盆栽，形形色色，又有假山溪水，竹林掩映，一片鬱鬱蔥蔥。逛園林需要一份閒情與雅致，宜人少忌人多，宜靜謐忌嘈雜。譬如你逛蘇州園林，滿眼望去盡是人頭，這便少了雅致，又要被人擠被人催，這便沒了閒情，不能體會園林之美園林之妙了。你逛掇景園便少卻了這些煩惱，她隱於西湖西，藏於林蔭里，園裡園外皆是風景，只管靜下心來慢慢玩賞，享受週末的閒暇。</p>
1212 <p>出了掇景園往西，上馬路再望南去便是茅家埠了，是杭州小夫妻們常去的婚紗照攝影點，我也時常去茅家埠欣賞湖光景色，欣賞那一襲又一襲白紗。茅家埠湖邊是一片石子地，或大或小的，鋪了一大片，石子地上也有幾塊大石塊，可供小孩子玩耍，或者遊人依靠休息。湖邊有一座木橋的平台，探向湖水里，最是婚紗照的好景點。今年春天路過此處，見木橋有些破敗了，便打市長熱線，煩他們處理一下，不想入秋再去時，木橋竟被拆去了，很是可惜。</p>
1213 <p>住在杭州，總是有各種去處，認真寫下來大約可以寫好幾本書了。還有龍井山靈隱寺錢塘江六和塔，又有許多清靜優雅之所藏於這許多去處里。最妙的是這許多景點都不收門票，又還連成一片，挺合適年輕小情侶們的<sup class="footnote-ref" id="fnref-2"><a href="#fn-2">2</a></sup>。</p>
1214 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_ee233a7f20d6108f821e7a862d309f37.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_ee233a7f20d6108f821e7a862d309f37.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_ee233a7f20d6108f821e7a862d309f37.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_ee233a7f20d6108f821e7a862d309f37.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_ee233a7f20d6108f821e7a862d309f37.jpg" alt="錢塘夜色"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_3948f6e35e8c9b4c1f178c8ec23b6880.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_3948f6e35e8c9b4c1f178c8ec23b6880.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_3948f6e35e8c9b4c1f178c8ec23b6880.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_3948f6e35e8c9b4c1f178c8ec23b6880.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_3948f6e35e8c9b4c1f178c8ec23b6880.jpg" alt="煙雨六合塔"loading="lazy" decoding="async" width="1600" height="1200" /></picture></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_0a276d2cbe7ef9b1513a48c70b910a77.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_0a276d2cbe7ef9b1513a48c70b910a77.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_0a276d2cbe7ef9b1513a48c70b910a77.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_0a276d2cbe7ef9b1513a48c70b910a77.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_0a276d2cbe7ef9b1513a48c70b910a77.jpg" alt="錢塘煙雨"loading="lazy" decoding="async" width="1600" height="1202" /></picture></figure></div></div>
1215 <p>有一處卻是收門票的，我每年也會去上一兩次，便是杭州植物園<sup class="footnote-ref" id="fnref-3"><a href="#fn-3">3</a></sup>。金秋十月的菊花展也看過好幾屆了，想起來第一次的菊展還是和<a href="http://blog.quyi.de/">屈藝</a>一起去看的，那時他拿著順爺的二手相機，我拿著 iPhone 4 在園裡隨處拍照呢。菊花展之前還有一個石蒜展，可惜都錯過了，每年的這個時候大約都在外面遊玩吧。</p>
1216 <p>杭州不僅僅只有自然風光，僻如白堤蘇堤，不只是自然景致，亦是人文風光歷史遺跡。我一向以為只有自然景觀不夠好的地方才會去強調人文底蘊，如杭州這般，本不必提及人文環境的，杭州的人文早已與自然風物融為一體了。</p>
1217 <p>今年應該不會回杭州了，前不久去杭州辦理簽證，途經西湖，那時沒有帶相機，手機也快沒電了，只是匆匆一瞥，西湖還是如此有情調，怕是今年最後一眼西湖了。</p>
1218 <p>再見，杭州。</p>
1219 <section class="footnotes">
1220 <ol>
1221 <li id="fn-1"><p>好想列入「到杭州不得不做的幾件事」<a href="#fnref-1" class="footnote">↩</a></p></li>
1222 <li id="fn-2"><p>兩個人可以隨隨便便晃上一天，不必花一分錢，挺保護錢包的<a href="#fnref-2" class="footnote">↩</a></p></li>
1223 <li id="fn-3"><p>植物園對面的竹林亦是不錯的去處，附註之<a href="#fnref-3" class="footnote">↩</a></p></li>
1224 </ol>
1225 </section>
1226 ]]></content:encoded></item><item><title><![CDATA[ 月神 ]]></title><guid>https://lepture.com/zh/2015/wish-to-be-found</guid><link>https://lepture.com/zh/2015/wish-to-be-found</link><description><![CDATA[ 也許是夏天，也許是初秋。只記得是一個有陽光的下午。那時我還在上小學，我和弟弟下學回家，可是家裏沒人。 ]]></description><pubDate>Mon, 23 Nov 2015 23:00:00 +0000</pubDate><content:encoded><![CDATA[ <p>譚恩美的《The Joy Luck Club》<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>中，有一個關於迷失的故事《The Moon Lady》，很動人，很壓抑，也讓我想起了相似的經歷。</p>
1227 <div class="blockquote"><blockquote><p>I remember all these things. And tonight, on the fifteenth day of the eighth moon, I also remember what I asked the Moon Lady so long ago. I wished to be found.</p>
1228 <p>— Amy Tan in <em><a href="https://kindle.amazon.com/post/7Ft-95wxR7Wwcmht7LoKkg">The Moon Lady</a></em></p>
1229 </blockquote></div>
1230 <p>然而我並不記得具體的時間，也許是夏天，也許是初秋。只記得是一個有陽光的下午。</p>
1231 <p>那時我還在上小學，我和弟弟下學回家，可是家裏沒人。像往常一樣，我蹲下讓弟弟爬到背上，去門楣上摸索，結果沒有找到鑰匙，进不了家门。鄰居是我們姑爹，這個時候也關着門。我們屋子旁邊有一個草堆，枯黃的一個小矮垛子，沒有辦法，我們便把書包藏在這裏面，拿了彈珠出去玩了。</p>
1232 <p>我們村子位於省道上，沿了省道，聚在同一邊稀稀落落建了些房子，上坡處的四個房子卻在另一邊，我們便去坡上那幾家找同齡的孩子玩。房子前都有一塊平地，我們叫作稻場，光禿禿的土地被石滾<sup class="footnote-ref" id="fnref-2"><a href="#fn-2">2</a></sup>壓實了，不過偶爾還是會長出點雜草。</p>
1233 <p>我們幾個小朋友撿根樹枝，在稻場上畫一個方框，彎彎曲曲的一個長方形，又在方框外一兩步遠處劃條線。我們便從這條線處向方框裏射彈珠，待彈珠都進入框內後真正的廝殺便開始了。</p>
1234 <p>弟弟趴在地上，瞄準了小偉的奶油彈珠。</p>
1235 <p>奶油彈珠是一種不太常見的彈珠，乳白色的珠子上繪了些花紋。我們玩得多半是透明的玻璃珠子，裏面有一朵小花，紅的綠的黃的藍的或者多彩的。因爲稀少，奶油彈珠總會被優先照顧，但這並非壞事，稻場上總是有些坑坑窪窪，擊出的彈珠偏離了軌道，也許就直接跑出了方框，那這枚珠子便是奶油彈珠主人的戰利品了。</p>
1236 <p>弟弟瞄了一會兒，拇指用力彈出，彈珠倏忽而出，正中奶油彈珠中心，停在了奶油彈珠的位置上，奶油彈珠直飛出去，過了邊界。弟弟便過去撿進自己口袋。贏得一子後，還有連擊的權利。於是弟弟再次出擊，又贏得一子。</p>
1237 <p>小偉道：「不行，稻場太平了，要挖幾個坑」便拿了樹枝在地上鑿起來，在方框裏添了幾個坑幾條槽。果然弟弟便不再得手了。</p>
1238 <p>我們玩了些時候，又換了幾個花樣。有站着把彈珠舉到眼睛處掉下來砸別人彈珠的，這個我最擅長了；有挖大坑，把珠子從大坑裏擊出來的；有三個坑，按一定順序入坑出坑的。</p>
1239 <p>時間不早了，天邊的雲朵已經變了色，染了點腮紅。我們收拾一下，滿口袋的珠子，叮叮噹噹地跳躍着往坡下走回家。弟弟笑呵呵的，贏了不少奶油彈珠。</p>
1240 <p>回到家後，父母還沒回來。我們便各自清點起自己的珠子，我也贏了不少，真是難得。天色還好，我們尋了書包出來，打算寫點家庭作業，不然晚上一起寫也許寫不完。</p>
1241 <p>旁邊的菜園子裏黃瓜已經熟了，我們摘了兩條黃瓜，一邊啃着，一邊寫作業。房子有一個不高的臺階，大約一腳長，水泥的地面，我們便將作業攤在臺階上，趴在地上寫起作業來。</p>
1242 <p>天色一點一點暗下來，腮紅的一抹漸至緋色的一片。我作業已經寫完了，弟弟還在繼續寫。可是看我沒寫了，他雖然沒有做完，也停下來不寫了。</p>
1243 <p>我們再去菜園子裏摘了黃瓜，坐在臺階上啃起來。看遠處天邊的雲彩，看那通紅的喚作火燒雲的晚霞。霞光漸漸暗去，夜色矇矓起來，青色天幕裏點綴出幾點星光，月亮出來後星光又暗淡下來。</p>
1244 <p>父母還沒有回來，家裏的門還是鎖着的。口袋裏的彈珠不時叮叮一響，很煩人的聲音，我抓了一把出來，一顆一顆丟出去。有時也能撞到之前丟棄的珠子上，便是一聲脆響。弟弟看到了，也跟着丟起來。</p>
1245 <p>時間一點一點流逝，口袋裏的彈珠也越來越少。弟弟小聲道，「爸爸媽媽是不是不要我們了？」說着便開始啜泣起來。我也早忍不住了，眼眶熱得發燙，一眨眼眼淚便流了下來。</p>
1246 <p>眼淚裏的月光模模糊糊矇矇矓矓，廣寒宮的嫦娥仙子一個人住在一個星球上會如何寂寞，她的父母也都不要她了麼。</p>
1247 <p>模糊的淚眼裏，兩個人向家裏走來。弟弟叫道，「是爸爸媽媽」哇得一聲大哭起來，我也止住不眼淚，哭出了聲。</p>
1248 <section class="footnotes">
1249 <ol>
1250 <li id="fn-1"><p>中文譯作《喜福會》<a href="#fnref-1" class="footnote">↩</a></p></li>
1251 <li id="fn-2"><p>一種石器，圓柱形的，一頭大一頭小，用來碾壓土地、稻穀、麥子的。<a href="#fnref-2" class="footnote">↩</a></p></li>
1252 </ol>
1253 </section>
1254 ]]></content:encoded></item><item><title><![CDATA[ 談藥 ]]></title><guid>https://lepture.com/zh/2015/about-yao</guid><link>https://lepture.com/zh/2015/about-yao</link><description><![CDATA[ 藥字，上草下樂。草爲意部，樂爲聲部。大陸簡化藥作「药」，上草下約，從約聲。 ]]></description><pubDate>Thu, 10 Sep 2015 00:00:00 +0000</pubDate><content:encoded><![CDATA[ <p>本擬作「藥字的研究」，不過一時興致，觀 Bing 談[《簡化字、日本語漢字和正體字》][1]忽而想到的。到底心虛，故未敢妄言研究，且作談資罷了。</p>
1255 <p>英文藥字作 drug，以醫人以害人也。或言藥字當作 medicine，便是醫人良方了，無毒品之意，而 medicine 又有巫術之意，彷彿驅鬼的道士畫個符咒燒晝了兌水喝。噫，不料竟頗得中華傳統精髓。</p>
1256 <p>常言道是藥三分毒，作 drug 亦未嘗不可，便如那嗎啡，作藥使得，作毒亦使得。且待我藥死那武大郎，來與官人相歡：</p>
1257 <div class="blockquote"><blockquote><p>那張驢儿把毒藥放在羊肚儿湯里，實指望藥死了你，要霸占我為妻。</p>
1258 </blockquote></div>
1259 <p>昔者，神農嚐百草以爲藥也，而未知後世鳥獸魚蟲亦可入藥。是故，藥字作了個草頭，及至東壁先生作《本草綱目》仍以草爲藥之上賓。中華之藥或譯爲 herb 更爲合適。</p>
1260 <p>藥字，上草下樂。草爲意部，樂爲聲部。咦。樂字是聲部？何以樂音 yuè，藥音 yào 呢？</p>
1261 <p>廣韻藥字「以灼切，以母藥韻」，中原音韻「<strong>影母蕭豪韻</strong>」，換作普通話，大抵 yao 音。廣韻樂字「五敎切，疑母效韻」近似 yao 音，又有音「五角切，疑母 覺韻」近似 yue 音；中原音韻樂字收錄頗多音，中有「影母蕭豪韻」與藥一般。由是觀之，「樂」確爲「藥」字音部。</p>
1262 <p>何以現代發音便不相同了呢？便是普通話正韻擇音的問題了，沒能選擇恰當的標準音。比如我們家鄉話裏，藥樂便近似同音，大約 yo 音，陽平偏上聲。家鄉話裏「樂」作快樂之意時大約 lo 音，陽平偏去聲，近於洪武正韻音「歷各切 入聲六藥 洛小韻」。其實「音樂」之音，亦有不少人言「yin lo」。</p>
1263 <p>大陸簡化藥作「药」，上草下約，從約聲，這便很奇妙了。現代音「約」多用 yuē 音，約會嘛，不過口語 yāo 音有所保留，偶爾還能聽見。廣韻約字「於笑切 要小韻」或「於略切 約小韻，影母藥韻」，咦，竟是「影母藥韻」。中原音韻作「<strong>影母蕭豪韻</strong>」，與藥字同音。算是認真研究後做的「藥」字的簡化，不料「約」字又被正韻爲 yuē 了，頗爲可惜。</p>
1264 <p>忽而想到「藥药」聲部「樂約」單看作聲符不免浪費了。料想一個人生病了，必定痛苦，吃了藥，病好了，不亦「樂」乎。這樣說來，鴉片還真是好藥，令人快樂的草呀。大陸簡化「药」，彷彿催促着你按時吃药，便是與醫生作了約定般。</p>
1265 <p>以上乃愚之亂語，非學術研究，諸君自辨。</p>
1266 <p>[1]: <a href="http://blog.josui.me/2015-09-03-the-battle-between-traditional-chinese-and-simplified-chinese/">http://blog.josui.me/2015-09-03-the-battle-between-traditional-chinese-and-simplified-chinese/</a></p>
1267 ]]></content:encoded></item><item><title><![CDATA[ 前端的基礎修養：aria-label ]]></title><guid>https://lepture.com/zh/2015/fe-aria-label</guid><link>https://lepture.com/zh/2015/fe-aria-label</link><description><![CDATA[ aria-label 是一個 HTML attribute，用來告訴讀屏軟件某個元素是什麼，提升 Web Accessibility。 ]]></description><pubDate>Wed, 12 Aug 2015 21:40:00 +0000</pubDate><content:encoded><![CDATA[ <p>「前端的基礎修養」是我擬寫的一系列文章的總標題。所以喚作「修養」，大抵因為心虛，覺得沒有什麼技術含量，不便言之技術。這一系列會以亂序呈現，同一主題的文章會穿插出現。</p>
1268 <p>這一篇談 Accessibility 相關的主題——aria-label 的使用。Accessibility 作為一個整體，是一個龐大而複雜的主題。這裡單講 aria-label，因其比較簡單與實用，作為切入點正合適。</p>
1269 <p>可能有人不理解什麼是 Accessibility，這裡簡單解釋一下。比如地鐵有大通道方便輪椅通過，比如紅綠燈有聲音提示方便盲人通行，比如鼠標有左手模式方便習慣用左手的人使用。讓更廣泛（生理上有所不同）的人群可以使用，就是 Accessibility。</p>
1270 <p>這個話題去歲在台灣談過，是參加 JSDC 2014 時講的，<a href="/zh/2014/talk-on-accessibility-jsdc2014">不被重視的 HTML：Accessibility</a>。</p>
1271 <h2>aria-label 初窺</h2>
1272 <p>aria-label 是一個 HTML attribute，用來告訴讀屏軟件某個元素是什麼。例如一個關閉按鈕「×」，視覺上看來都能理解，但是讀屏軟件並不能正確讀出，這時就可以用 <code>aria-label</code> 告訴它：</p>
1273 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">button</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"關閉"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">button</span><span class="p">></span>
1274 </div></code></pre></div>
1275 </div>
1276 <p>讀屏軟件（比如說 Voice Over）就會讀出「按鈕，關閉」。圖片 <code><img></code> 的 <code>alt</code> 屬性亦有此效果，因為圖片本身是沒有辦法被讀出的，所以讀屏軟件會去閱讀 <code>alt</code> 的內容。</p>
1277 <p>假如 <code><img></code> 標籤同時有 <code>aria-label</code> 與 <code>alt</code> 屬性，那麼讀屏軟件應該閱讀哪個的內容呢？答案當然是 <code>aria-label</code>。這裡需要明白 <code>alt</code> 本身還有另一個作用，當圖片無法加載時，瀏覽器會將 <code>alt</code> 的內容展示給用戶。</p>
1278 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/Ei/XEmWA46zVb1CpY_Yeokg.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_457/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/Ei/XEmWA46zVb1CpY_Yeokg.png" alt="alt 在各個瀏覽器里的顯示情況" title="alt 在各個瀏覽器里的顯示情況"loading="lazy" decoding="async" width="457" height="300" /></picture><figcaption>alt 在各個瀏覽器里的顯示情況</figcaption></figure></div><h2>aria-label 與 title</h2>
1279 <p>全局屬性 <code>title</code> 是用作提示與補充的，你認為讀屏軟件會識別 <code>title</code> 麼？完全不會，Voice Over<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>、JAWS<sup class="footnote-ref" id="fnref-2"><a href="#fn-2">2</a></sup>、NVDA<sup class="footnote-ref" id="fnref-3"><a href="#fn-3">3</a></sup> 都不會去識別，<code>title</code> 對於 Accessibility 毫無幫助。</p>
1280 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">title</span><span class="o">=</span><span class="s">"設置"</span><span class="p">><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"gear.png"</span><span class="p">></</span><span class="nt">a</span><span class="p">></span>
1281 </div></code></pre></div>
1282 </div>
1283 <p>這段代碼是一個鏈接，使用一個圖片表示「設置」，使用 <code>title</code> 注釋。如果鼠標懸浮在鏈接上的話，會出現提示，但是讀屏軟件根本無法識別。你應該使用 <code>aria-label</code> 來代替 <code>title</code>:</p>
1284 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"設置"</span><span class="p">><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"gear.png"</span><span class="p">></</span><span class="nt">a</span><span class="p">></span>
1285 </div></code></pre></div>
1286 </div>
1287 <h2>aria-label 與 iconfont</h2>
1288 <p>多數網站已經不使用圖片來表示 icon 了，轉而使用 iconfont 又或者 svg。無論是哪種方案，圖標都只是給視覺正常的人使用的。這個時候你需要使用 <code>aria-label</code> 來標注：</p>
1289 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon-gear"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"設置"</span><span class="p">></</span><span class="nt">i</span><span class="p">></</span><span class="nt">a</span><span class="p">></span>
1290 </div><div class="line"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"設置"</span><span class="p">><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon-gear"</span><span class="p">></</span><span class="nt">i</span><span class="p">></</span><span class="nt">a</span><span class="p">></span>
1291 </div></code></pre></div>
1292 </div>
1293 <p>上面的例子里給出了兩種方案，一是在圖標本身的標籤上，一是在鏈接 <code><a></code> 上，兩種方案讀屏軟件都能正確識別，但是個人以為放在鏈接 <code><a></code> 上比較好，比如鏈接里是圖標加文字說明的形式：</p>
1294 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"設置"</span><span class="p">><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon-gear"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span> 設置<span class="p"></</span><span class="nt">a</span><span class="p">></span>
1295 </div></code></pre></div>
1296 </div>
1297 <p>這時便不能在 iconfont 上添加 <code>aria-label</code> 了，否則會念兩遍「設置」，但是這種情況更好的方法是使用 <code>aria-hidden</code>：</p>
1298 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon-gear"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span> 設置<span class="p"></</span><span class="nt">a</span><span class="p">></span>
1299 </div></code></pre></div>
1300 </div>
1301 <h2>aria-label 作為提示</h2>
1302 <p>但是許多時候，即使你能看清楚圖標，你也完全不知道那是個什麼鬼東西，圖標始終是一個抽象概念，並非人人都能理解。我們常會用 tooltip 作為提示，比如 <a href="http://onehackoranother.com/projects/jquery/tipsy/">jquery.tipsy</a>。</p>
1303 <p>jquery.tipsy 這個插件默認使用 <code>title</code> 作為數據來源，也可以使用其它屬性：</p>
1304 <div class="block-code" data-language="js"><div class="highlight"><pre><span></span><code><div class="line"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example-custom-attribute'</span><span class="p">).</span><span class="nx">tipsy</span><span class="p">({</span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">'aria-label'</span><span class="p">});</span><span class="w"></span>
1305 </div></code></pre></div>
1306 </div>
1307 <p>GitHub 使用的純 CSS 方案不錯，使用 CSS <code>attr()</code> 獲取 aria-label 的內容作為提示，在不需要兼容老舊瀏覽器的情況下建議使用，整理代碼如下：</p>
1308 <div class="block-code" data-language="css"><div class="highlight"><pre><span></span><code><div class="line"><span class="p">.</span><span class="nc">tip</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
1309 </div><div class="line"><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span><span class="w"></span>
1310 </div><div class="line"><span class="p">}</span><span class="w"></span>
1311 </div><div class="line"><span class="p">.</span><span class="nc">tip</span><span class="p">:</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
1312 </div><div class="line"><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span><span class="w"></span>
1313 </div><div class="line"><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span><span class="w"></span>
1314 </div><div class="line"><span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span><span class="w"></span>
1315 </div><div class="line"><span class="w"> </span><span class="k">right</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span><span class="w"></span>
1316 </div><div class="line"><span class="w"> </span><span class="k">bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">-7</span><span class="kt">px</span><span class="p">;</span><span class="w"></span>
1317 </div><div class="line"><span class="w"> </span><span class="k">margin-right</span><span class="p">:</span><span class="w"> </span><span class="mi">-5</span><span class="kt">px</span><span class="p">;</span><span class="w"></span>
1318 </div><div class="line"><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span><span class="w"></span>
1319 </div><div class="line"><span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span><span class="w"></span>
1320 </div><div class="line"><span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s1">''</span><span class="p">;</span><span class="w"></span>
1321 </div><div class="line"><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="kc">transparent</span><span class="p">;</span><span class="w"></span>
1322 </div><div class="line"><span class="w"> </span><span class="k">border-bottom-color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.9</span><span class="p">);</span><span class="w"></span>
1323 </div><div class="line"><span class="w"> </span><span class="k">pointer-events</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span><span class="w"></span>
1324 </div><div class="line"><span class="w"> </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">10000</span><span class="p">;</span><span class="w"></span>
1325 </div><div class="line"><span class="p">}</span><span class="w"></span>
1326 </div><div class="line"><span class="p">.</span><span class="nc">tip</span><span class="p">:</span><span class="nd">after</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
1327 </div><div class="line"><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span><span class="w"></span>
1328 </div><div class="line"><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span><span class="w"></span>
1329 </div><div class="line"><span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span><span class="w"></span>
1330 </div><div class="line"><span class="w"> </span><span class="k">right</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span><span class="w"></span>
1331 </div><div class="line"><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span><span class="w"></span>
1332 </div><div class="line"><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="kt">px</span><span class="p">;</span><span class="w"></span>
1333 </div><div class="line"><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.9</span><span class="p">);</span><span class="w"></span>
1334 </div><div class="line"><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span><span class="w"></span>
1335 </div><div class="line"><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">11</span><span class="kt">px</span><span class="p">;</span><span class="w"></span>
1336 </div><div class="line"><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="mi">500</span><span class="p">;</span><span class="w"></span>
1337 </div><div class="line"><span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="nb">attr</span><span class="p">(</span><span class="n">aria</span><span class="nv">-label</span><span class="p">);</span><span class="w"></span>
1338 </div><div class="line"><span class="w"> </span><span class="k">white-space</span><span class="p">:</span><span class="w"> </span><span class="kc">pre</span><span class="p">;</span><span class="w"></span>
1339 </div><div class="line"><span class="w"> </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">10000</span><span class="p">;</span><span class="w"></span>
1340 </div><div class="line"><span class="w"> </span><span class="k">margin-top</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span><span class="w"></span>
1341 </div><div class="line"><span class="w"> </span><span class="k">line-height</span><span class="p">:</span><span class="w"> </span><span class="mi">26</span><span class="kt">px</span><span class="p">;</span><span class="w"></span>
1342 </div><div class="line"><span class="w"> </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translateX</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span><span class="p">);</span><span class="w"></span>
1343 </div><div class="line"><span class="p">}</span><span class="w"></span>
1344 </div></code></pre></div>
1345 </div>
1346 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/1c/Ht0miwXYGNSne7wmNZDQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_303/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/1c/Ht0miwXYGNSne7wmNZDQ.png" alt="GitHub aria-label 提示" title="GitHub 使用 aria-label 提示"loading="lazy" decoding="async" width="303" height="95" /></picture><figcaption>GitHub 使用 aria-label 提示</figcaption></figure></div><h2>aria-label 與表單</h2>
1347 <p><code>placeholder</code> 的出現導致了大量不帶 <code><label></code> 的 form 表單，然而<strong>讀屏軟件是不會識別 <code>placeholder</code></strong> 的。例如：</p>
1348 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"username"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"用戶名"</span><span class="p">></span>
1349 </div><div class="line"><span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"email"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"郵箱"</span><span class="p">></span>
1350 </div></code></pre></div>
1351 </div>
1352 <p>對於視覺正常的人來說沒有問題，但是在讀屏軟件看來它只是兩個輸入框，至於需要輸入什麼，它是不知道的。這個時候你需要用 <code>aria-label</code> 再次標注：</p>
1353 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"username"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"用戶名"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"用戶名"</span><span class="p">></span>
1354 </div><div class="line"><span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"email"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"郵箱"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"郵箱"</span><span class="p">></span>
1355 </div></code></pre></div>
1356 </div>
1357 <p>還有另外一種方案，使用 <code><label></code>，但是不顯示 <code><label></code>：</p>
1358 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"username"</span> <span class="na">class</span><span class="o">=</span><span class="s">"sr-only"</span><span class="p">></span>用戶名<span class="p"></</span><span class="nt">label</span><span class="p">></span>
1359 </div><div class="line"><span class="p"><</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">"username"</span> <span class="na">name</span><span class="o">=</span><span class="s">"username"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"用戶名"</span><span class="p">></span>
1360 </div></code></pre></div>
1361 </div>
1362 <p>使用 CSS 來隱藏 <code>.sr-only</code>(screen reader only) 這個 class 的標籤，注意不能使用 <code>display: none</code>，否則讀屏軟件會忽略，只在<a href="http://a11yproject.com/posts/how-to-hide-content/">視覺上將其隱藏</a>即可。</p>
1363 <h2>索引</h2>
1364 <p><code>aria-label</code> 理論上是作用於所有 tag 的，但是我實際測試下來，不支持 h(n) 例如 h1-h6。</p>
1365 <ul>
1366 <li><a href="https://dev.opera.com/articles/ux-accessibility-aria-label/">https://dev.opera.com/articles/ux-accessibility-aria-label/</a></li>
1367 <li><a href="http://webaim.org/techniques/forms/advanced">http://webaim.org/techniques/forms/advanced</a></li>
1368 <li><a href="http://www.deque.com/blog/text-links-practices-screen-readers/">http://www.deque.com/blog/text-links-practices-screen-readers/</a></li>
1369 <li><a href="http://www.w3.org/TR/2015/WD-aria-in-html-20150521/">http://www.w3.org/TR/2015/WD-aria-in-html-20150521/</a></li>
1370 </ul>
1371 <section class="footnotes">
1372 <ol>
1373 <li id="fn-1"><p>Voice Over 是 Apple (Mac & iOS) 的讀屏軟件<a href="#fnref-1" class="footnote">↩</a></p></li>
1374 <li id="fn-2"><p>JAWS 是一個讀屏軟件，適用於 Windows<a href="#fnref-2" class="footnote">↩</a></p></li>
1375 <li id="fn-3"><p>NVDA 是一個開源讀屏軟件 <a href="http://www.nvaccess.org/">http://www.nvaccess.org/</a><a href="#fnref-3" class="footnote">↩</a></p></li>
1376 </ol>
1377 </section>
1378 ]]></content:encoded></item><item><title><![CDATA[ 前端的基礎修養：Microdata ]]></title><guid>https://lepture.com/zh/2015/fe-microdata</guid><link>https://lepture.com/zh/2015/fe-microdata</link><description><![CDATA[ Microdata 是為機器而不是用戶所設計的，雖然目的是易於機器理解，但最終也能惠於用戶。 ]]></description><pubDate>Thu, 23 Jul 2015 00:00:00 +0000</pubDate><content:encoded><![CDATA[ <p>「前端的基礎修養」是我擬寫的一系列文章的總標題。所以喚作「修養」，大抵因為心虛，覺得沒有什麼技術含量，不便言之技術。這一系列文章多與 HTML/XML 相關，許多主題一般前端從業者不是太知道，或者知道但不太重視，我以為很可惜。</p>
1379 <p>這是「前端的基礎修養」系列文章的第一篇，單講 <a href="http://www.w3.org/TR/microdata/">Microdata</a> 相關的內容，剩下的主題每周不定期更新。</p>
1380 <p>Microdata 是 HTML5 引入的，是為機器而不是用戶所設計的，主要目的是為了機器能更好的理解內容。這看起來與前端沒什麼關係，一般理解的前端是服務於用戶的，主要負責與用戶交互的部分。但是 microdata 是 HTML 的一部分，雖然目的是易於機器理解，但最終也能惠於用戶。</p>
1381 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/ku/vAi9n8owlWzfduzNru5Q.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_562/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/ku/vAi9n8owlWzfduzNru5Q.png" alt="Google 搜索結果展示"loading="lazy" decoding="async" width="562" height="142" /></picture></figure></div><p>Microdata 以機器可解析的語言來描述網頁里的內容是什麼，比如網頁描述的是一本書、一篇影評或者一張菜譜。例如上面的這張圖，展示的是我的<a href="/zh/2011/dajiangdahai">一篇書評</a>在 Google 搜索里的結果，它有作者信息、有評分、有發表時間，這都是因為這篇書評的網頁里使用 Microdata 標示出了相應的信息。</p>
1382 <h2>Microdata 基礎</h2>
1383 <p>Mircodata 主要用到這幾個 attributes 來標注信息：itemscope, itemtype, itemprop，另外還有 itemid 與 itemref。</p>
1384 <p>包含 <strong>itemscope</strong> 這個 attribute 的 DOM 樹就是一個事物(item)，例如：</p>
1385 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">itemscope</span><span class="p">></span>
1386 </div><div class="line">...
1387 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
1388 </div></code></pre></div>
1389 </div>
1390 <p>我們可以給這個事物定義一個類型，比如一本書，這時就需要用到 <strong>itemtype</strong>，它的值是一個或多個 URL：</p>
1391 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">"http://example.com/Book"</span><span class="p">></span>
1392 </div><div class="line">...
1393 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
1394 </div></code></pre></div>
1395 </div>
1396 <p>如上的代碼片斷，我們知道它是一本書了，但是它還缺少書的信息，需要用 <strong>itemprop</strong> 來標示：</p>
1397 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">"http://example.com/Book"</span><span class="p">></span>
1398 </div><div class="line"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>書名：<span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"name"</span><span class="p">></span>改革歷程<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
1399 </div><div class="line"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>作者：<span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"author"</span><span class="p">></span>趙紫陽<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
1400 </div><div class="line"> ...
1401 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
1402 </div></code></pre></div>
1403 </div>
1404 <p>也許因為奇怪的設計方案，也許因為 PM 的無理取鬧，也許就是因為代碼不太好寫，佈局並不能輕易合乎要求，itemprop 可能散落於其它地方，這時可以使用 <strong>itemref</strong> 將它們連接起來：</p>
1405 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">"http://example.com/Book"</span> <span class="na">itemref</span><span class="o">=</span><span class="s">"a b"</span><span class="p">></span>
1406 </div><div class="line"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>作者：<span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"author"</span><span class="p">></span>趙紫陽<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
1407 </div><div class="line"> ...
1408 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
1409 </div><div class="line">
1410 </div><div class="line"><span class="cm"><!-- 因為某些原因，書名與價格不在 scope 裡面 --></span>
1411 </div><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"a"</span><span class="p">></span>書名：<span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"name"</span><span class="p">></span>改革歷程<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
1412 </div><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"b"</span><span class="p">></span>價格：<span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"price"</span><span class="p">></span>$12<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
1413 </div></code></pre></div>
1414 </div>
1415 <p>Microdata 也定義了 DOM API，目前只有 Firefox 與 Opera 支持，用途不太大，可以在 Firefox 的終端里測試一下：</p>
1416 <div class="block-code" data-language="js"><div class="highlight"><pre><span></span><code><div class="line"><span class="nb">document</span><span class="p">.</span><span class="nx">getItems</span><span class="p">()</span><span class="w"></span>
1417 </div><div class="line"><span class="nb">document</span><span class="p">.</span><span class="nx">getItems</span><span class="p">(</span><span class="s1">'http://schema.org/Article'</span><span class="p">)</span><span class="w"></span>
1418 </div></code></pre></div>
1419 </div>
1420 <h2>Microdata 與 Schema.org</h2>
1421 <p>Microdata 作為規範，定義好了語法，其中 <strong>itemtype</strong> 表示事物的類型。如果每一家都自己定義 <strong>itemtype</strong> 的話，結局將相當糟糕，網站開發者也將頭疼不已。於是 Google, Bing, Yandex, Yahoo! 合作創建了 Schema.org 用以統一規範 Microdata。</p>
1422 <p>Schema.org 不是標準化組織，所做的卻是標準化的事情。查閱 <a href="https://schema.org/docs/gs.html">Schema.org 快速入門</a>文檔，瞭解如何使用。例如你正在看的這篇文章所在的頁面便在使用 <a href="http://schema.org/Article">http://schema.org/Article</a> 這個 itemtype，你可以查看一下本頁面的源碼。</p>
1423 <p>Schema.org 定義了<a href="http://schema.org/docs/full.html">許多類型</a>，仍然在<a href="https://github.com/schemaorg/schemaorg">創建更多的類型</a>。這些定義對後端開發也有意義，幫助你理解業務模型，瞭解某一模型應該包含哪些數據，亦是不小的啓發。</p>
1424 <p>比如我們來賣個車看看：<a href="http://schema.org/Car">http://schema.org/Car</a></p>
1425 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">"http://schema.org/Car"</span><span class="p">></span>
1426 </div><div class="line"> <span class="p"><</span><span class="nt">h2</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"name"</span><span class="p">></span>奇瑞QQ<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
1427 </div><div class="line"> <span class="p"><</span><span class="nt">p</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"description"</span><span class="p">></span>中國汽車製造商奇瑞汽車公司於2003年推出的一款微型車(...)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
1428 </div><div class="line"> <span class="p"><</span><span class="nt">img</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"image"</span> <span class="na">href</span><span class="o">=</span><span class="s">"2003_qq.png"</span> <span class="p">/></span>
1429 </div><div class="line"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>
1430 </div><div class="line"> <span class="p"><</span><span class="nt">strong</span><span class="p">></span>顏色<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
1431 </div><div class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"color"</span><span class="p">></span>黑色<span class="p"></</span><span class="nt">span</span><span class="p">></span>
1432 </div><div class="line"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
1433 </div><div class="line"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>
1434 </div><div class="line"> <span class="p"><</span><span class="nt">strong</span><span class="p">></span>齒輪數<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
1435 </div><div class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"numberOfForwardGears"</span><span class="p">></span>6<span class="p"></</span><span class="nt">span</span><span class="p">></span>
1436 </div><div class="line"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
1437 </div><div class="line"> <span class="p"><</span><span class="nt">div</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"vehicleEngine"</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">"http://schema.org/EngineSpecification"</span><span class="p">></span>
1438 </div><div class="line"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>
1439 </div><div class="line"> <span class="p"><</span><span class="nt">strong</span><span class="p">></span>引擎<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
1440 </div><div class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"name"</span><span class="p">></span>1.1 L SQR472F I4 DOHC 16v — 50 kW at 6000 rpm, 90 N·m at 3500 rpm<span class="p"></</span><span class="nt">span</span><span class="p">></span>
1441 </div><div class="line"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
1442 </div><div class="line"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
1443 </div><div class="line"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>
1444 </div><div class="line"> <span class="p"><</span><span class="nt">strong</span><span class="p">></span>氣囊數<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
1445 </div><div class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">"airbags"</span><span class="p">></span>4<span class="p"></</span><span class="nt">span</span><span class="p">></span>
1446 </div><div class="line"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
1447 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
1448 </div></code></pre></div>
1449 </div>
1450 <h2>RDFa, Microformats 與 JSON-LD</h2>
1451 <p>結構化數據在 Microdata 出來之前就已經有了，比如 RDFa，比如 Microformats。Microdata 正是站在他們肩膀上，總結他們的得失利弊發展起來的。</p>
1452 <p>Schema.org 的示例通常包含 Microdata，RDFa 與 JSON-LD 格式。RDFa 主要引入了 vocab, typeof 與 property 作為 attributes。這裡不再談 RDFa 的格式與實現，推薦使用 Microdata。但是需知 RDFa 仍然在被使用，比如豆瓣網，因為創建時間早，又沒有升級代碼，仍然使用著 RDFa，他們使用的字典集是 <a href="http://www.data-vocabulary.org/">http://www.data-vocabulary.org/</a>。</p>
1453 <p>Microformats 已經十年了，這是一套使用 class 輔以其它屬性來標記事物的方案。比如這篇文章的這個頁面亦使用 Microformats 做了標注，類型是 <a href="http://microformats.org/wiki/hentry">hentry</a>。Microformats 現在推出了 2.0 版本，預測支持性不會太好，但是仍然值得一讀，當作指導前端的 class 命名也不錯。正在使用的 hentry 是 1.0:</p>
1454 <div class="block-code" data-language="html"><div class="highlight"><pre><span></span><code><div class="line"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hentry"</span><span class="p">></span>
1455 </div><div class="line"> <span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"entry-title"</span><span class="p">></span>前端的基礎修養：Microdata<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
1456 </div><div class="line"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"entry-content"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
1457 </div><div class="line"> ...
1458 </div><div class="line"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
1459 </div></code></pre></div>
1460 </div>
1461 <p>JSON-LD 誕生的時間更晚，是一套使用 JSON 格式標注數據的方案。最大的優點是 JSON 格式便於解析，缺點是數據冗余，尤其是在需要 HTML 展示大段內容的情況下。</p>
1462 <h2>Microdata & Schema.org 的現狀與未來</h2>
1463 <p>目前 Google, Bing, Yandex, Yahoo! 都支援 Microdata，但是進度不一效果不一，支援度最好的還是 Google。據說<a href="http://www.zhihu.com/question/19918861">百度也是支持的</a>。</p>
1464 <p>各個搜索引擎商的接入文檔：</p>
1465 <ol>
1466 <li><a href="https://developers.google.com/structured-data/">https://developers.google.com/structured-data/</a></li>
1467 <li><a href="http://www.bing.com/webmaster/help/marking-up-your-site-with-structured-data-3a93e731">http://www.bing.com/webmaster/help/marking-up-your-site-with-structured-data-3a93e731</a></li>
1468 <li><a href="https://help.yandex.com/webmaster/microdata/what-is-microdata.xml">https://help.yandex.com/webmaster/microdata/what-is-microdata.xml</a></li>
1469 <li><a href="https://help.yandex.com/webmaster/schema-org/what-is-schema-org.xml">https://help.yandex.com/webmaster/schema-org/what-is-schema-org.xml</a></li>
1470 </ol>
1471 <p>結構化的數據不僅僅能被這些 Web 搜索引擎使用，還能被諸如 Siri, Cortana 等語音設備使用，當然，他們也能被當作搜索引擎。例如我問 Siri 最近有什麼電影可看，於是找到了《模仿遊戲》</p>
1472 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/6Q/j_G-tcI9ja2ch1GHQLeg.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_450/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/6Q/j_G-tcI9ja2ch1GHQLeg.png" alt="電影展示" title="Siri 展示的模仿遊戲"loading="lazy" decoding="async" width="450" height="800" /></picture><figcaption>Siri 展示的模仿遊戲</figcaption></figure></div><p>這個內容來自<a href="http://www.rottentomatoes.com/">爛番茄</a>，爛番茄的網頁有使用 Schema.org 的 Microdata 標注，不知道 Siri 是否解析了 Microdata，還是專門為爛番茄作了解析。</p>
1473 <p>再次詢問 Siri 附近吃飯的地方，返回了大眾點評的數據：</p>
1474 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/fs/3ua-Biy0_1qhNNcMFEfQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_450/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/fs/3ua-Biy0_1qhNNcMFEfQ.png" alt="餐廳列表" title="Siri 展示的餐廳列表"loading="lazy" decoding="async" width="450" height="800" /></picture><figcaption>Siri 展示的餐廳列表</figcaption></figure></div><p>查看大眾點評的網頁，亦是使用 Schema.org 的 Microdata 標注的。</p>
1475 <p>因為沒有 Android 與 Windows 手機，無法展示 Google Now 與 Cortana 的效果。查閱 <a href="https://msdn.microsoft.com/en-us/library/dn632191.aspx">Microsoft Cortana 的文檔</a>可知其是支持 Schema.org 的。Google Now 就更不必說了。</p>
1476 <p>結構化的數據在未來相當有吸引力，方便未來的各種設備接入。比如「智能廚房」，你告訴它你要做什麼菜，於是它從<a href="http://www.xiachufang.com/">下廚房</a>找到了菜譜，因為下廚房使用了結構化數據，「智能廚房」就能直接列出需要的材料與材料的份量。</p>
1477 <p>目前正在應用的點有很多，比如日曆、地圖、郵件等。尤其值得一提的是郵件，這個古老的通訊方式也許會在結構化數據下煥然一新。Gmail 已經在做<a href="https://developers.google.com/schemas/tutorials/embedding-schemas-in-emails">一系列嘗試</a>了，比如從郵件里提取出你的行程以及日程安排，比如匯總你的收據。</p>
1478 <p>寫作此篇時發現國內不少網站已經在應用 Microdata 了，頗感欣慰。然而國內大廠們依舊我行我素，走著自己的獨木橋。</p>
1479 <h2>索引</h2>
1480 <ul>
1481 <li>Microdata: <a href="http://www.w3.org/TR/microdata/">http://www.w3.org/TR/microdata/</a></li>
1482 <li>JSON-LD: <a href="http://www.w3.org/TR/json-ld/">http://www.w3.org/TR/json-ld/</a></li>
1483 <li>RDFa: <a href="http://www.w3.org/TR/xhtml-rdfa-primer/">http://www.w3.org/TR/xhtml-rdfa-primer/</a></li>
1484 <li>Microformats: <a href="http://microformats.org/">http://microformats.org/</a></li>
1485 <li>Embed Schemas in Emails: <a href="https://developers.google.com/schemas/tutorials/embedding-schemas-in-emails">https://developers.google.com/schemas/tutorials/embedding-schemas-in-emails</a></li>
1486 </ul>
1487 ]]></content:encoded></item><item><title><![CDATA[ 戴珍珠耳環的美少女 ]]></title><guid>https://lepture.com/zh/2015/meisje-met-de-parel</guid><link>https://lepture.com/zh/2015/meisje-met-de-parel</link><description><![CDATA[ 戴珍珠耳環的少女是這樣一幅畫，你完完全全覺得美麗的畫作。第一眼望過去時，總免不了自作多情地覺得少女正看着你，可是再細看一下便有些失望了。 ]]></description><pubDate>Thu, 16 Apr 2015 18:30:00 +0000</pubDate><content:encoded><![CDATA[ <p>我很早以前看過《戴珍珠耳環的少女》這部電影，情節已經忘卻了。最近又看了一次書，是我<a href="./one-week-at-qingdao">離開青島</a>後到杭州，在良渚文化村這邊的咖啡館辦公時看的。</p>
1488 <p>然而我並不想談書。這部虛構的小說巧妙地將 Vermeer 的多幅作品以及作品裏的人物結合起來，編織出了一個彷彿真實發生的故事。我卻只想談談畫，當我看到書裏 Griet 與她父親描述<a href="http://en.wikipedia.org/wiki/View_of_Delft">《台夫特的風景》</a>時，也有一種想要像這樣描述畫作的衝動。</p>
1489 <p>他們聊天時這樣描述：</p>
1490 <div class="blockquote"><blockquote><p>我們看到一幅畫，畫著台夫特的風景，是從鹿特丹和席丹城門的方向看出去的角度。畫中的天空佔了好大一部分，陽光照著其中幾棟房子。
1491 而且顔料中混了沙子，使磚牆和屋頂看起來有粗糙的感覺。
1492 水面上有長長的倒影，幾個小小的人站在河岸邊，離我們最近。</p>
1493 </blockquote></div>
1494 <p>只是簡單幾句，沒有畫家想要表達什麼，單純地覺得美就足夠了。現代藝術卻執著於思想，抽象得毫無美感，直呼着「你看，我在表現X，我在表現Y」。可是你還不敢批評，因爲你不懂呀。</p>
1495 <p>我欣賞古典的畫作、音樂、詩歌，因爲他們真誠，因爲他們容易理解，正如白居易的寫給老奶奶聽的詩一般。</p>
1496 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/GJ/DgNyQFd1VFDXDhBVsp0A.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_875/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/GJ/DgNyQFd1VFDXDhBVsp0A.jpg" alt="Girl with a Pearl Earring" title="戴珍珠耳環的少女"loading="lazy" decoding="async" width="875" height="1024" /></picture><figcaption>戴珍珠耳環的少女</figcaption></figure></div><p>戴珍珠耳環的少女是這樣一幅畫，你完完全全覺得美麗的畫作。黑色背景的畫布，光線從左上角斜射下來，稍稍從畫裏射向畫外，照亮少女的頭巾、前額、內側的面頰、脣與下巴。眼睛的左上角閃爍着，正是陽光照過來的方向。內側的面頰呈現出陰影，因爲沒有光的接觸。珍珠耳環也處於這陰影裏，餘輝卻照亮了它的左上，整體呈現出銀光的光澤。藍色頭巾裹住了頭髮，也裹住了大半的耳朵。於頭巾頂結成土色的一束，直垂到後背。光線，陰影，頭巾與衣服的褶皺的處理都好極了。</p>
1497 <p>第一眼望過去時，總免不了自作多情地覺得少女正看着你，可是再細看一下便有些失望了。她是那種什麼都沒看的眼神，就像你在想心事時的樣子。最讓人著迷的莫過於少女的嘴脣了。微啓的雙脣，彷彿微笑着，又彷彿沒有，因爲光線，也因爲胭脂，脣上閃動着光，簡直就想吻上去。</p>
1498 <p>偶爾想到最初的畫作會不會不是黑色的背景，像 Vermeer 的其他人物作品一樣，也有各種裝飾，只是後來修改成了這樣。畫家描繪的是他們眼中的世界，最初也許像《倒牛奶的女僕》那樣，有牆壁，有桌子。可是到了後來，畫家眼中只剩下了少女本人，旁的雜物已經黯淡無光了。</p>
1499 <p>等到看到書的很後面時，書裏描寫的彷彿一開始便是黑色的背景，「這幅畫一點都不像他其他的畫，上面只有我——我的頭和肩膀，沒有桌子或窗簾、沒有窗戶或粉刷來緩和或分散視線」。</p>
1500 <p>他後來也有純黑背景的作品，但是《戴珍珠耳環的少女》是他第一幅這樣的畫作，也是後來者無法超越的存在。比如他另作的一幅仿《戴珍珠耳環的少女》的畫作《少女》，重點是主人公不如戴珍珠耳環的少女。</p>
1501 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/-h/SPxKmJZyT2_W9vz45qmA.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/-h/SPxKmJZyT2_W9vz45qmA.jpg" alt="少女" title="Portrait of a Young Woman"loading="lazy" decoding="async" width="800" height="893" /></picture><figcaption>Portrait of a Young Woman</figcaption></figure></div><p>所以人美也是關鍵。我們看電影《戴珍珠耳環的少女》的劇照，看仿畫部分的劇照，結果便很不如人意。不如<a href="https://www.youtube.com/watch?v=dpNvNjl9OM8">武井咲扮演的</a>優雅。</p>
1502 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/gi/Sxi0J8H4dfSR_UzffmfQ.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_482/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/gi/Sxi0J8H4dfSR_UzffmfQ.png" alt="戴珍珠耳環的少女劇照"loading="lazy" decoding="async" width="482" height="720" /></picture></figure></div><p>沒能見到真跡真是遺憾，許多細節都無法觀察到。比如像書中描寫的，「後來我再去看那幅畫，在我左眼之上，他加了一縷從藍布底下偷溜出來的頭髮」。然而我卻如何也發現不了這「偷溜出來的頭髮」。也許有一天能一睹真顔，那時再細細分辨吧。</p>
1503 ]]></content:encoded></item><item><title><![CDATA[ 青島小住 ]]></title><guid>https://lepture.com/zh/2015/one-week-at-qingdao</guid><link>https://lepture.com/zh/2015/one-week-at-qingdao</link><description><![CDATA[ 一邊旅遊一邊工作，在青島短暫待了一週，閒暇時間，去海邊拍拍照，看海鷗浮水，又或者沿海岸線跑跑步。 ]]></description><pubDate>Sun, 29 Mar 2015 20:42:00 +0000</pubDate><content:encoded><![CDATA[ <p>上海的租房特別冷，空調不工作，夜晚的時候，瑟瑟躲在被子裏，聽窗外車來車往，不時又是幾聲汽車的鳴笛，時常難以入睡。</p>
1504 <p>年後回上海，短暫待了幾天就逃到北京去了，在公司的民居裏住了兩周。一時又不太願意回上海，正好去青島的機票便宜，北京到青島與青島到上海的機票加起來仍然比北京到上海的高鐵便宜，於是便過去小住一週。</p>
1505 <p>第一次來青島還是大一的暑假，那時是第一次出省，坐了一晚上的火車才到阿姨家。去嶗山，觀雲水，去海邊，看風帆。後來又來過一次，記憶卻很模糊。這次是第三次了。</p>
1506 <p>阿姨家在海邊，出了小區走幾步便到海岸線了。青島的海算是國內少有的看着還算乾淨的海了。</p>
1507 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16685078337/"><img src="https://i.typlog.com/lepture/z_ad1411292bfc534a3c12c59730c05463.jpg" alt="海中岩石" title="青島的海 by Olympus E-PL5" /></a></p>
1508 <p>工作日的早晨，一般七點多起牀，看 Slack 上只有 slackbot 與我兩個人在線，先看一下 GitHub，有沒有需要處理的 issue 與 pull request，再看一眼 Trello，想想今天要做點什麼。然後吃個早餐洗漱一下，便開始了一天的編碼工作。</p>
1509 <p>要做的事情很明確的時候，寫代碼就成了一種享受。沒有人在旁邊聊天，沒有人會突然跑過來找你，你只需要構思清楚，然後一點一點實現，一個接一個的 pull request，沉浸其中，只覺得這一天沒有虛度。當然這樣好的狀態也不是常有，也會有耗在一個小問題上很長時間的時候，到了晚上便有點「今天什麼也沒有做」的沮喪感。</p>
1510 <p>這些天的天氣並不好，海上霧氣一直很濃。後來下了一場雨，起了些風，終於吹淡了些許。下午四點多的時候，寫了一天代碼，眼睛也有點累了，伸個懶腰，到海邊放個風。</p>
1511 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16673050299/"><img src="https://i.typlog.com/lepture/z_462a143b793e2df95c26bd37798ce00a.jpg" alt="陰天時海鷗" title="陰天時拍攝的海鷗 by iPhone 6" /></a> <a class="img-link" href="https://www.flickr.com/photos/lepture/16704832398/"><img src="https://i.typlog.com/lepture/z_6fe1a374f7da4500fd883307c4c76990.jpg" alt="晴天時海鷗" title="晴天時拍攝的海鷗 by iPhone 6" /></a></p>
1512 <p>這個時節頗多海鷗，可是沒有長焦鏡頭，相機與手機的差距並不明顯。週末的時候，在奧帆中心看別人長焦拍攝，海鷗浮在水上，遊動時身前兩撇水紋清晰可見，一條條弧線優雅盪開。雖然想買，不過一想到攜帶不便，就猶豫了起來。</p>
1513 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16685079697/"><img src="https://i.typlog.com/lepture/z_ab538203214528c174e55b8a391c70db.jpg" alt="奧帆中心夕陽" title="在奧帆中心附近拍攝的夕陽 by iPhone 6" /></a></p>
1514 <p>還沒到旅遊旺季，海邊的遊客很少，多是本地住戶。小夫妻們提着個小桶，在海邊的水窪裏搜尋着海螺和小魚。小孩子拿着鏟子在沙灘上挖坑，旁邊的母親們坐着聊聊天。還有出來遛狗的，黑白的蘇牧，雪白的薩摩耶，歡快地在海邊奔跑着。還有坐在海岩上孤獨沉思的老者。</p>
1515 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16705011880/"><img src="https://i.typlog.com/lepture/z_088ebeb3f03ecc866eb369fd5fed46af.jpg" alt="海岩上孤獨沉思的老者" title="海岩上孤獨沉思的老者 by Olympus E-PL5" /></a></p>
1516 <p>夜晚的時候，坐了一天也腰酸背痛了，需要運動運動，於是沿着海岸線跑跑步。路燈微黃，海風吹拂，稍微跑一跑，出點汗，不亦快哉。</p>
1517 <p>[<img src="https://i.typlog.com/lepture/z_17529349ac7f5b2a8477c28829bfa728.jpg" alt="海岸線" title="海岸線 by iPhone 6" />][6]</p>
1518 <p>最近正在玩 <a href="https://www.duolingo.com/lepture">Duolingo</a>，臨睡前學一點西班牙語，十一點左右的時候便入睡了。不像在上海的時候，總是要到十二點以後，甚至一點以後才能入睡。</p>
1519 <p>青島小住，工作日的一天大抵如此。</p>
1520 <p>這段時間裏開始整理 Flickr 了，打算照片用 Flickr 來管理，歡迎 <a href="https://www.flickr.com/photos/lepture/">Follow 我的 Flickr</a>。</p>
1521 <p>[6]: <a href="https://www.flickr.com/photos/lepture/16685096857/">https://www.flickr.com/photos/lepture/16685096857/</a></p>
1522 ]]></content:encoded></item><item><title><![CDATA[ 東北偏北，漠河之美 ]]></title><guid>https://lepture.com/zh/2015/a-trip-in-mohe</guid><link>https://lepture.com/zh/2015/a-trip-in-mohe</link><description><![CDATA[ 元旦過後，與魚一起去漠河遊玩，流水賬般的遊記，以及照片里的雪景。 ]]></description><pubDate>Sun, 25 Jan 2015 19:25:00 +0000</pubDate><content:encoded><![CDATA[ <p>車廂里的溫度稍嫌高了，羽絨衣是不能穿的，即使只是襯衫外加一件單薄的羊絨毛衣，也有點熱得喘不過氣來。清晨醒來的時候，車窗內側卻還是結冰了，窗沿邊一層白色小丘，凹下去又凸起來，圍著一圈透明膠似的冰凍。窗外幾處房屋，天色尚早，再過一些時候便是炊煙裊裊，隔著模糊的車窗望去，彷彿舊電影的質感。</p>
1523 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_41a23dc9be9fc93784e5d7030600465b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_41a23dc9be9fc93784e5d7030600465b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_41a23dc9be9fc93784e5d7030600465b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_41a23dc9be9fc93784e5d7030600465b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_41a23dc9be9fc93784e5d7030600465b.jpg" alt="結冰的車窗" title="結冰的車窗 by iPhone 6"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>結冰的車窗 by iPhone 6</figcaption></figure></div><p>我已經好久沒有坐過熬夜的硬座了，彷彿睡著了，又彷彿一直醒著，睡眠當然是一個問題，但是還可以接受。最大的問題是總有人在車廂里吸煙，真是討厭，可是這種火車不像高鐵動車一樣是禁煙的，沒有辦法。返程的時候改乘飛機，第一次坐了中國產的螺旋槳民航飛機。暮色里的古蓮機場，藍色的天幕，黃色的照明，手機隨手拍一張也很有感覺的樣子。</p>
1524 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1500/format,webp 1x, https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_3000/format,webp 2x" media="(min-width: 1500px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1500 1x, https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_3000 2x" media="(min-width: 1500px)"><source srcset="https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/8347973195_971471.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/8347973195_971471.jpg" alt="漠河飛往哈爾濱的飛機" title="漠河飛往哈爾濱的中國產螺旋槳民航飛機 by iPhone 6，無修圖"loading="lazy" decoding="async" width="3264" height="2448" /></picture><figcaption>漠河飛往哈爾濱的中國產螺旋槳民航飛機 by iPhone 6，無修圖</figcaption></figure></div><p>魚邀我去漠河時已經臨近出發時間了。中午上海飛哈爾濱，當晚便乘火車哈爾濱到漠河。我們那時在火車站候車，兩個登山包彼此靠著放在地上，魚去買雪糕回來時遇到了接下來一起玩耍的小夥伴。他們來找人拼車，正好我們一點攻略都沒有做，沒有訂車，沒有訂住處，自然欣然應允了。我一向沒有做攻略的習慣，觀光而已，到目的地後自然什麼信息都會有的，這也是以往的經驗。但是有提前訂好的車，還是能省去不少事。</p>
1525 <p>這一天都是在交通工具上度過的。火車到達漠河後，大家在車站匯合，馬上就坐上聯繫好的汽車奔赴北極村，簡直一刻也不肯停歇。雖然黑乎乎的，一吃完晚飯，大家便往江邊跑。江邊有一個廣場，叫北極廣場，一排冰雕的牆與門立在一旁，未完成的雕塑落坐在中間，另一側的冰雕彷彿祭壇，第二天一早便吸引著一波波遊人在其下拍照。北極廣場亦是我們次日的第一站觀光點。</p>
1526 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1500/format,webp 1x, https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_3000/format,webp 2x" media="(min-width: 1500px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1500 1x, https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_3000 2x" media="(min-width: 1500px)"><source srcset="https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/8347973143_508206.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/8347973143_508206.jpg" alt="北極廣場的江雪" title="清晨江邊遠眺，陽光下閃爍的白雪 by iPhone 6"loading="lazy" decoding="async" width="3264" height="2448" /></picture><figcaption>清晨江邊遠眺，陽光下閃爍的白雪 by iPhone 6</figcaption></figure></div><p>漠河的雪很奇怪，像乾麵粉一般，揉不成團。一顆一顆的，在陽光下閃耀著。根本沒有辦法打雪仗，只能戲水一樣，向前拋撒，白麵般散開又落到地上。</p>
1527 <p>上午的時光都在北極村的各處景點閒逛，拍拍照。跑去江上，到國界線拍照留戀。江對岸便是俄羅斯，竪直的陡峭，與這邊的風光全然不同。立著的山，黑白的參差，像國畫的潑墨。</p>
1528 <p>中午便趕到龍江第一灣，其時已經餓透了，在東北唯一一次吃得特別乾淨的一餐。大家上廁所，外表典雅的廁所，裡面沒有馬桶，屎尿直接落下，冰淇淋一般立起，大家都惡趣味地拍照。可是卻放過了這廁所外的白樺樹，倒下的樹枝與站著的樹枝合成的幾何形態。</p>
1529 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_360cef613964343fd5b59bdab09e0954.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_360cef613964343fd5b59bdab09e0954.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_360cef613964343fd5b59bdab09e0954.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_360cef613964343fd5b59bdab09e0954.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_360cef613964343fd5b59bdab09e0954.jpg" alt="白樺樹的幾何形態" title="白樺樹的幾何形態 by iPhone 6"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>白樺樹的幾何形態 by iPhone 6</figcaption></figure></div><p>龍江第一灣的主題是登山。山並不算高，沿著台階很容易便上去了。上山時還天氣還好，可是在快要登頂時卻狂風大作，雪粉飛舞，眼前的景色會隔了一層白色簾幕的遮掩。等到下山時，天色已經黯淡下來了。今晚還要趕去北紅村，據說這才是最北的村子。</p>
1530 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_8508908d01d3f8b32ed05a4245c1d5ba.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1200/format,webp" type="image/webp"><img src="https://i.typlog.com/lepture/z_8508908d01d3f8b32ed05a4245c1d5ba.jpg" alt="龍江第一灣登山" title="龍江第一灣登山 by iPhone 6"loading="lazy" decoding="async" width="1200" height="1600" /></picture><figcaption>龍江第一灣登山 by iPhone 6</figcaption></figure></div><hr />
1531 <p>日間行車已經過於驚心了，不曾想夜間更是動魄。公路被白雪覆蓋著，中間是兩條被車碾壓實的雪道，兩側還是蓬松的高聳的雪層，隔一段路後出現一條分叉的實線，是兩車相遇時要用到的。遠遠地看到對面有車開過來，然後便在分叉道上停著，等對面的車通過後再繼續前行。</p>
1532 <p>其間便出了一次意外，沒有匯車線，我們的車開到了邊上的雪層里，怎麼使力都開不出來，大家只好下車推車。可是夜間的經歷卻全然不同，不需要我們出力，只是一顆心懸著，不安，緊張，與激動。</p>
1533 <p>車到最北點時已經黑得不像樣了。有一個石塊落在這裡，寫著「找到北了」，我們到這裡時還有遊客在石塊處拍照。師傅要從此處下江，在江冰上行駛。下江處很是陡峭，我們都下了車，車向前開去，車頭開始下傾，車輪已經停止旋轉，像坐滑梯一樣，整個車滑下江去，整個心都跟著顫抖。我們自己走下雪坡時都緊張死了，何況是開車。</p>
1534 <hr />
1535 <p>北紅村是個沒有 Wi-Fi 的小村子。吃過晚飯後，大家去小賣部買雪糕吃，凍山楂，藍梅酒，晚上玩乾瞪眼時的食物。裕買了煙火，說要晚上放。</p>
1536 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_94b73693f12d223d94dbcb41ff1929c0.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_94b73693f12d223d94dbcb41ff1929c0.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_94b73693f12d223d94dbcb41ff1929c0.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_94b73693f12d223d94dbcb41ff1929c0.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_94b73693f12d223d94dbcb41ff1929c0.jpg" alt="北紅村的清晨" title="北紅村的清晨，炊煙裊裊 by iPhone 6 無修圖"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>北紅村的清晨，炊煙裊裊 by iPhone 6 無修圖</figcaption></figure></div><p>正好是農歷十五，蟹色天幕里一輪圓月，幾點星光，可惜沒有璀璨銀河。魚與勳架好了相機，調整曝光，先拍拍冷月當作測試。裕早已準備好了煙火，它靜靜躺在雪地裡，只待燃起的那一刻。</p>
1537 <p>五，四，三，二，一。一束光射向天空，訇然迸裂，化作一圈又一圈紅黃火星從中心四處散開，然後又隱沒在了天色里。一顆，兩顆，煙火衝上半空，又消散得不著蹤跡，才剛開始就已經結束了。</p>
1538 <p>去看他們的拍照，雖然精心準備了，結果沒有出彩的照片。煙火時間太短，一瞬而逝，可是人窮志短，燒不起這個錢，只得作罷。</p>
1539 <hr />
1540 <p>次日的行程，到白樺林，我終於使用上了我的相機。一邊哼著樸樹的「白樺林」一邊到處拍拍。</p>
1541 <div class="gallery"><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_1e29b1b7aa9d473fae06a61f9546887b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_1e29b1b7aa9d473fae06a61f9546887b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_1e29b1b7aa9d473fae06a61f9546887b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_1e29b1b7aa9d473fae06a61f9546887b.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_1e29b1b7aa9d473fae06a61f9546887b.jpg" alt="白樺林的天空" title="白樺林的天空 by Olympus EP 5"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>白樺林的天空 by Olympus EP 5</figcaption></figure><figure><picture><source srcset="https://i.typlog.com/lepture/z_f62c594c40b4558d48b533b8821c7d55.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_f62c594c40b4558d48b533b8821c7d55.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_f62c594c40b4558d48b533b8821c7d55.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_f62c594c40b4558d48b533b8821c7d55.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_f62c594c40b4558d48b533b8821c7d55.jpg" alt="白樺林的閃爍" title="白樺林的閃爍 by Olympus EP 5"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>白樺林的閃爍 by Olympus EP 5</figcaption></figure></div><div class="gallery_column"><figure><picture><source srcset="https://i.typlog.com/lepture/z_9d9d241d643c0581d722aa96cd6a8a9c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_9d9d241d643c0581d722aa96cd6a8a9c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_9d9d241d643c0581d722aa96cd6a8a9c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_9d9d241d643c0581d722aa96cd6a8a9c.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_9d9d241d643c0581d722aa96cd6a8a9c.jpg" alt="白樺林里的雯" title="白樺林里的雯 by Olympus EP 5"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>白樺林里的雯 by Olympus EP 5</figcaption></figure></div></div>
1542 <p>「雪依然在下，那天空依然安祥，年輕的人們，消失在白樺林」</p>
1543 <hr />
1544 <p>我沒有記日記的習慣，遊記又總是拖著，等到快要忘卻時才流水賬般記錄下來。整理照片，跟隨照片去回憶。魚卻會記日記，他有一個 Moleskine 的筆記本，筆記本設計好了一天記一頁的日記。晚上的時候，他一邊回憶著行程，一邊記錄著，很快一頁紙便用完了，接著分配給明天的紙也用完了。</p>
1545 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_0ca2b53997ed6fcff2b9b359e29e3105.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_0ca2b53997ed6fcff2b9b359e29e3105.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_0ca2b53997ed6fcff2b9b359e29e3105.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_0ca2b53997ed6fcff2b9b359e29e3105.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_0ca2b53997ed6fcff2b9b359e29e3105.jpg" alt="魚向姑娘們展示照片" title="魚向姑娘們展示照片 by iPhone 6"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>魚向姑娘們展示照片 by iPhone 6</figcaption></figure></div><p>想一想，確實發生了好多事，可是於我而言並沒有深邃的感悟，我也並不需要深邃的感悟。親眼看看這個世界就已經足夠了。</p>
1546 <div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_fc173cbb0507ef74426ca1e0b7c8e0cb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_fc173cbb0507ef74426ca1e0b7c8e0cb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_fc173cbb0507ef74426ca1e0b7c8e0cb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_fc173cbb0507ef74426ca1e0b7c8e0cb.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_fc173cbb0507ef74426ca1e0b7c8e0cb.jpg" alt="日出在雪地公路上" title="日出在雪地公路上 by Olympus EP 5"loading="lazy" decoding="async" width="1600" height="1200" /></picture><figcaption>日出在雪地公路上 by Olympus EP 5</figcaption></figure></div><div class="photo"><figure><picture><source srcset="https://i.typlog.com/lepture/z_d172e0fb96440d7586e2451cbcc045cd.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800/format,webp 1x, https://i.typlog.com/lepture/z_d172e0fb96440d7586e2451cbcc045cd.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600/format,webp 2x" media="(min-width: 800px)" type="image/webp"><source srcset="https://i.typlog.com/lepture/z_d172e0fb96440d7586e2451cbcc045cd.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_800 1x, https://i.typlog.com/lepture/z_d172e0fb96440d7586e2451cbcc045cd.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/resize,m_lfit,w_1600 2x" media="(min-width: 800px)"><img src="https://i.typlog.com/lepture/z_d172e0fb96440d7586e2451cbcc045cd.jpg" alt="雪地公路上的汽車" title="雪地公路上的汽車 by Olympus EP 5"loading="lazy" decoding="async" width="1600" height="1136" /></picture><figcaption>雪地公路上的汽車 by Olympus EP 5</figcaption></figure></div><p>照片里留下的只是河山裡的片段，更多的景色留在了腦海裡，自動美化著，又或者遺忘著，時間走得太快，來不及道別。</p>
1547 ]]></content:encoded></item><item><title><![CDATA[ Google 的初見面 ]]></title><guid>https://lepture.com/zh/2014/first-sight-of-google</guid><link>https://lepture.com/zh/2014/first-sight-of-google</link><description><![CDATA[ 第一次知道 Google 要到上大學後，在圖書館上一門關於搜索引擎使用的選修課。 ]]></description><pubDate>Sun, 28 Dec 2014 19:20:00 +0000</pubDate><content:encoded><![CDATA[ <p>我接觸互聯網的時間比較晚，認真算來應該是大學時候了。電腦倒是一早就接觸了，那時剛讀初中，城裏的堂弟帶我去網吧，第一次就呆了一晚上，只是玩玩遊戲而已。</p>
1548 <p>一直到大學前，電腦也只是另一種形式的遊戲機。我遊戲玩得不好，不擅長操作類的遊戲，偏好於解迷，但是大家一起玩的時候，還是會跟着一起玩魔獸爭霸這一類遊戲，總是拖隊友的後腿，也不知他們私底下該怎麼埋怨我了。</p>
1549 <p>大學時選了圖書館的一門選修課，本來的課程名字已經忘卻了，內容是講搜索的，不是搜索引擎原理這樣的理論課，是純粹應用型的，講如何高效地使用搜索引擎。從此對電腦有了新的認識。</p>
1550 <p>講課的是一位女老師，上了一點年紀，現在想來就覺得不可思議，一般看來年輕人才容易接受新事物，講這門課的居然是年長的女老師。說是講搜索引擎的使用，其實只有講 Google 的使用，這門課也開了有幾年了，大約因爲教學不談八卦娛樂，所以不舉百度的例子吧。</p>
1551 <p>這是我第一次聽說 Google，知道它是一個數字，是 10 的 100 次方。如果我當時知道 Geek 這個詞的話，也許禁不住會感嘆一下，「真是太 Geek 了」。那個時候它還沒有中文名，即使後來有了「谷歌」這個名字，我還是喜歡寫作 Google。當你使用 Google 這個詞的時候，感受到的是工程師文化，10 的 100 次方哦，「谷歌」太過文藝了，彷彿在慶祝豐收。</p>
1552 <p>課程的內容現在有部分已經過時了，比如<a href="http://www.google.com/advanced_search">高級搜索</a>那個時候還在搜索框的右邊，不像現在連一個入口都沒有。當時的課程還教大家使用關鍵詞來搜索，老師講如何提煉出關鍵詞，諄諄教誨不要使用完整的一句話，使用關鍵詞更有效率，不像現在你可以搜索<a href="http://www.baidu.com/s?wd=%E8%B0%A2%E9%9C%86%E9%94%8B%E7%9A%84%E7%88%B8%E7%88%B8%E7%9A%84%E5%84%BF%E5%AD%90%E7%9A%84%E5%89%8D%E5%A6%BB">謝霆鋒的爸爸的兒子的前妻</a>。到現在我還保留着使用關鍵詞搜索的習慣。但是有一些內容我一直都不曾使用，比如使用 OR 這樣的條件詞。</p>
1553 <p>作爲一門選修課，一門有學分的課，自然不會這樣簡單，總要講一點理論方面的內容，比如 Page Rank，總要講一點學術相關的內容，比如 Google 的學術搜索，這個是老師盛贊的服務。</p>
1554 <p>圖書館的電腦對上網是有管控的，只能訪問教育網內容，各種郵箱服務，以及部分外部網站，而 Google 便是這少量外部網站中的一員。像 QQ 之類的娛樂性質的服務是無法訪問的。註冊 Gmail 的原因正是因爲無法使用 QQ，一同上這門課的室友發現 Gmail 裏有一個聊天功能，於是這才註冊了 Gmail，兩個人互加了好友，上課的時候偷偷聊着天。</p>
1555 <p>後來又發現了 Google 的翻譯服務，可以輸入一個網址，Google 翻譯會把整個網頁翻譯過來。依靠 Google 的翻譯功能，我可以在圖書館裏查看那些無法打開的網頁內容，雖然原網頁是中文的，但是翻譯時還是可以選擇翻譯成中文。當時激動的心情彷彿荒漠裏突然出現了一片綠洲。</p>
1556 <p>過了一段時間 Google 的賬戶頁面出現了已開啓的服務列表，但是它又不曾列出 Google 到底有哪些服務，從此踏上了探索 Google 服務的征程。像做遊戲一樣，努力發現與點亮每一個 Google 的服務，即使是 Orkut 這樣不會去用的服務。</p>
1557 <p>那個時候已經有 GFW 了，可是直到大二下學期時，我才聽說它。其時它還不像現在這般喪心病狂，對生活的影響微乎其微。</p>
1558 <p>現在 Google 完全無法訪問了，也不知道圖書館的這門課程現在還有沒有，大約可能應該沒有了吧。假使這門課程還存在的話，那要使用什麼搜索引擎呢？在課程裏教大家搜索「謝霆鋒的爸爸的兒子的前妻」似乎不太妥當吧。</p>
1559 <p>猶記得第一堂課時，老師講我們現在是信息時代，講掌握搜索技巧的重要性。我不知道我們現在還算信息時代麼？</p>
1560 ]]></content:encoded></item><item><title><![CDATA[ 看不懂的文字 ]]></title><guid>https://lepture.com/zh/2014/love-of-nonsense</guid><link>https://lepture.com/zh/2014/love-of-nonsense</link><description><![CDATA[ 寫一封情書送給你，一紙看不懂的不能稱作詩歌的亂語。 ]]></description><pubDate>Mon, 10 Nov 2014 18:00:00 +0000</pubDate><content:encoded><![CDATA[ <p>人們說，一切看不懂的留言都當作表白<br />
1561 不用去想不用去猜<br />
1562 書的扉頁正是寄託情思的所在</p>
1563 <p>異國的風情遮掩筆者的膽怯<br />
1564 他鄉的平凡掩飾詞藻的欠缺</p>
1565 <p>我如果用日語，淡淡一句<br />
1566 今天的晚霞真美<br />
1567 可是我沒有夏目漱石的婉轉</p>
1568 <p>我如果用法語，解構相思時的情境<br />
1569 遠離的卻是我，留下的才是你<br />
1570 但是我沒有羅蘭巴特的深沈</p>
1571 <p>我如果用英語<br />
1572 哦，親愛的如何說出口<br />
1573 況且，這世界語，你都看得懂</p>
1574 <p>用中文吧，寫點古體詩吧</p>
1575 <p>可是</p>
1576 <p>我想說的，詩經說的比我還要赤裸<br />
1577 我想寫的，唐人寫的比我還要瑰麗</p>
1578 <p>萬般思緒，卻無從下筆</p>
1579 <p>最後化作筆端的只是<br />
1580 一點看不懂的不能稱作詩歌的亂語</p>
1581 <hr />
1582 <p>這是「為你寫詩」的第一篇，記錄每一次的靈感。本來加過了腳注，但是想想，給自己的寫作加註釋也是蠻奇怪的。</p>
1583 ]]></content:encoded></item><item><title><![CDATA[ 不被重視的 HTML：Accessibility ]]></title><guid>https://lepture.com/zh/2014/talk-on-accessibility-jsdc2014</guid><link>https://lepture.com/zh/2014/talk-on-accessibility-jsdc2014</link><description><![CDATA[ 這是 JSDC 2014 的講稿（2014-10-11），內容是關於 Web Accessibility 的，與 JS 的關係不大，主要是關於 HTML 的。 ]]></description><pubDate>Sun, 12 Oct 2014 10:40:00 +0000</pubDate><content:encoded><![CDATA[ <ul>
1584 <li>Slide: <a href="http://lab.lepture.com/jsdc-2014/slide.html">http://lab.lepture.com/jsdc-2014/slide.html</a></li>
1585 <li>Repo: <a href="https://github.com/lepture/jsdc-2014">https://github.com/lepture/jsdc-2014</a></li>
1586 </ul>
1587 <p>大家好，我今天談一點 Web 可訪問性的話題，主要是 HTML 相關的，與 JS 的關係並不是很大。</p>
1588 <p>（自我介紹略）</p>
1589 <p>那我要講可訪問性，當然是因爲它很重要，比如說它有經濟價值，因爲生活中有許多某種能力缺失的人。比如說有些國家的法律規定了，你必須實現 Web 的可訪問性。但是最重要的是，做爲開發者，你本來就應該做這些事。爲什麼呢？因爲這是標準規範，你所需要的只是遵循這些標準與規範而已。</p>
1590 <p>我們舉點現實生活中可訪問性的例子，比如捷運都有一個可容輪椅的入口，這方便殘疾人通過，比如說小便池有一個比較低，這方便小朋友。但是還有一些事情就不太如意了，比如說紅綠燈。我們看這樣一個交通燈，對紅綠色盲來說就沒有識別度了。</p>
1591 <p>我們看看色盲這一塊，這個圖片你們能看到上面是什麼數字麼？如果你看到的不是 74 的話，那你可能就是色盲了。那這一塊呢，其實在現實生活中是做得挺差的。參見中華民國《道路交通安全規則》第六十四條，對考駕照者有一項要求，即能辨別紅、黃、綠色，也就是說紅綠色盲是不能考駕照者。這當然可以理解，但是只要我們的紅綠燈稍微改變一下，比如給紅綠燈加上形狀，那紅綠色盲者不就能識別了麼。你要知道，全世界有大約 8% 的人是紅綠色盲呢。現實挺不公平的，要改變也需要花費更多的人力與時間。</p>
1592 <p>但是互聯網不一樣。互聯網意味着自由平等，它從一開始就是爲所有人設計的，所有人理應都能正常的使用互聯網。我們舉個好一點的例子。大家知道 Trello 吧，不知道也沒關係，它是一個項目管理工具。Trello 的個人設置裏有一個選項叫色盲友好(Color Blind Friendly)，開啓之後 label 的背景就是不純色了，比如你看這個綠色裏有斜線，這樣就不會和紅色的 label 混淆了。</p>
1593 <p>本來講這個話題，我是挺擔心的，怕是班門弄斧了。不過用了一下臺灣的一些公共服務網站後，發現這個擔心有點多餘了。我之前以爲只有大陸的這類網站難用，原來臺灣的也一樣嘛。</p>
1594 <p>可訪問性其實是一個很大的話題，它應該從設計之初就被重視起來，比如前面提到的 Trello 的例子，它是一個設計方面的實現。當我們談可訪問性時，不僅僅只是只視覺障礙者，也包括其它感觀有問題的人，比如說聽覺，甚至也包括所有感觀都正常的人。例如在現在的屏幕分辨率下，還有許多網站的文章正文字體大小居然是 12px，根本就看不清楚嘛，這也可以說是可訪問性差。關於閱讀性文字，我有寫一個 CSS 庫，<a href="http://lab.lepture.com/yue.css/">yue.css</a>，大家有興趣可以看看。</p>
1595 <p>在可訪問性這一塊，我們有些官方網站確實有在做。但是他們的做法都是錯的，基本相當於形象工程。比如說人民網，這個是大陸的一個官方媒體網站。他們專門爲盲人開設了專欄，就會有語音讀內容了。還有一些政府網站也是差不多，給你專門開設一個盲人用的網站，好像獻愛心一樣。但是他們的網站其實正常人用起來都很費勁啦。</p>
1596 <p>這種特殊對待的方案都是錯誤的做法，大家也不怎麼埋單。因爲並沒有什麼特殊的地方，Web 在設計時就已經考慮到這些問題了，也都有通用的解決方案。</p>
1597 <p>我們講可訪問性，這個話題的內容有點多，不會在這裏細講。我們單講點與前端，與寫代碼有點關係的。雖然這件事應該從設計之初就要考慮。</p>
1598 <p>所謂工與善其事，必先利其器。所謂知已知彼，百戰不怠。我們看看盲人上網用什麼，用讀屏軟件嘛。Mac 在這一塊做得就比較好，系統自帶的 Voice Over 挺好用的。Windows 我沒有怎麼用過，也沒聽人說用 Windows 自帶的工具，一般都是另外買的。因爲我是用 Mac 的，只需要了解一下 Voice Over 就夠了。</p>
1599 <p>那現在有 Mac 的同學們可以看看 Voice Over 怎麼用的，Command + F5 就可以開啓了。</p>
1600 <p>（演示 Voice Over）</p>
1601 <p>其實 Accessibility 的實踐是件很簡單的事，並不需要花多少時間與精力，只需要做一點點小改變就可以提高不少。</p>
1602 <p>那我們舉個很簡單的例子。許多網站都有用 icon font 來做圖標，很流行哦，看起來都很不錯的樣子。可是許多時候就忽略了可訪問性了。比如有的圖標，你根本就猜不出來它是什麼意思，這對視力正常的人來說都沒有可訪問性，你需要加個 tooltip 之類的來解釋一下。那我這裏的這個例子是一個齒輪圖標，大家都知道它是 settings 的意思啦，那對視力正常的人來說還好，但是假如你看不見的話，你根本就不知道它是個什麼東西。</p>
1603 <p>那我們給這個圖標一個很簡單的屬性（attribute）aria-label=“Settings”，我們來看看 demo。</p>
1604 <p>（使用 Voice Over 演示一下兩者的區別）</p>
1605 <p>上面這個例子是不是很簡單？我們現在就可以開始做出改變了。比如零時政府不是有一個萌典網站麼，我們看看萌典的網站，上面不是有很多 icon font 麼，大家可以給它加上 aria-label。</p>
1606 <p>我們再舉一個簡單的例子，Landmarks。</p>
1607 <p>這個也是個挺簡單的東西，內容也不多，就這麼幾個（見 slide），但是作用卻很大，使用 Voice Over 可以方便的跳轉。那我們來看一個例子，其實就是給相應的 block element 標上相應的 role 就好了。我們先看一下 Voice Over 的設置，需要它支持 Landmarks，把這個勾上就好了。那我們看這個 demo，我們開啓 Voice Over，Command + F5，然後用 Web Rotor 快速定位 landmarks，VO + U，也就是 Control + Option + U，那如果沒有出現 Landmarks 的選項的話，就按一下左右鍵。那這個時候就可以很方便的定位了，比如你看一篇文章，那就是在 main 區域裏，那你要跳轉頁面的話，就跳到 navigation 裏去咯。</p>
1608 <p>我們再演示一個 aria live region 的例子。我們看這個 demo，只需要打開 Voice Over 就好了，它會自己提示你有新訊息。如果沒有效果的話，檢查一下 Voice Over，看看是否打開了 live region 的支持。這個功能在 Twitter 的信息流裏有用到哦。</p>
1609 <p>但是要真的做好可訪問性，又是一件很困難的事。它的困難主要還是在複雜度上面，你需要考慮的東西太多了。那這裏舉一個 UI widget 方面的例子，tablist。我們簡單看一下它的 HTML 結構，這裏使用的 attributes 就多很多了，我們看到有 role，有 aria-selected，aria-controls 之類的。看起來會比較複雜。同時我們還要考慮正常的視覺效果，這裏有個小 tricks，我們把 aria-hidden=true 設置爲 display none，這樣讀屏軟體讀不到，視覺上也會看不到。</p>
1610 <p>（演示 tablist demo）</p>
1611 <p>那這樣一個小的 UI widget 看起來就有點麻煩了，那想想整個網站，是不是會更無從下手呢。</p>
1612 <p>除了複雜以外，還有一些歷史問題。比如說這個 aria-required 與 required。aria-required 是給讀屏軟體用的，required 是 HTML5 新加的特性。那我們應該用什麼呢！放在今天來看的就，當然是用 required 就可以了。這裏就會有一個可訪問性上的 attributes 與 HTML5 的重複，我會激進一點，傾向於只用 HTML5 的部分，其實大多數瀏覽器已經支持得挺好了。那我們來看一下 aria required 的 demo。</p>
1613 <p>(演示 aria-required demo）</p>
1614 <p>那你還可能需要考慮一下 keyboard binding，就是鍵盤快捷鍵。有些需要滑鼠操作的才能工作的地方，你可能就需要設計一些 key binding 来幫助别人使用。那對於盲人來說呢，使用鍵盤是比使用滑鼠要方便多了的。</p>
1615 <p>然後還有驗證碼，就是你註冊時經常會出現的那個東西。比如這個，這個是支付寶登錄時的驗證碼，它是個扭曲的字符，K8WM，我們也許看得清楚，但是如果看不到的話，那怎麼處理呢。這是我聽說的，據說有一個 QQ 羣，你把圖片 copy 一下，發到羣裏，然後會有視力正常的人告訴你這是個什麼東西，挺麻煩的吧。但是在臺灣就不用這麼麻煩了，你們知道 reCaptcha 這個項目吧，現在是 Google 的了。我們看一下 reCaptcha，它不僅有圖片，還是聲音驗證碼，就是這裏，你點這個地方就會有語音，那這樣看不到的人就可以用聽的了。這個服務挺方便的，但是在大陸就用不成，因爲被牆了嘛。但是臺灣沒有呀，如果大家自己有做網站，需要用到驗證碼的話，就儘量使用 reCaptcha，也比你自己寫一套 Captcha 要方便。</p>
1616 <p>那我說到提升可訪問性是件很簡單的事，也是件很困難的事。做一點點改變是很簡單的，比如之前說的給 icon font 加上 aria-label，真的挺簡單的。可是你要一口氣做得很完美的話，那幾乎就不可能了。我們一點一點改變，慢慢來，總是好的。不積跬步無以至千裏嘛。</p>
1617 <p>同時它也能幫你更好的組織整理你的 HTML 結構，能幫助搜索引擎更好的索引。它對你寫 HTML 有一定的指導意義。（略）</p>
1618 <p>最重要的還是我們開發者，身爲開發者應該有的驕傲。我們有能力去實現這些標準，那我們就會做咯，這是基本的職業素養。下面這些鏈接都是不錯的資源，大家可以都看看。</p>
1619 <p>謝謝。那我就講完了。</p>
1620 <p>哦。 One more thing，這個 slide 本身也是 accessible 的。</p>
1621 <p>（演示 slide 的可訪問性）</p>
1622