 |
lepture.com_rss.xml - sfeed_tests - sfeed tests and RSS and Atom files |
 |
git clone git://git.codemadness.org/sfeed_tests |
 |
Log |
|
Files |
|
Refs |
|
README |
|
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… |
|
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 comple… |
|
12 <div class="block-code"><pre><code>[[漢(かん)][字(じ)]](https://jis… |
|
13 <p>While in <a href="https://github.com/lepture/mistune">mistune</a> <st… |
|
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 … |
|
17 <p><a href="https://typlog.com/">Typlog</a> has been updated with mistun… |
|
18 <p><ruby><rb>漢</rb><rt>ㄏㄢˋ</rt></ruby><ruby><rb>字</rb><rt>ㄗˋ… |
|
19 ]]></content:encoded></item><item><title><![CDATA[ Display country flag… |
|
20 <p>In the <a href="https://typlog.com">Typlog</a> admin portal, there is… |
|
21 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
22 <ul> |
|
23 <li>Display country flags with <code><img></code> tag: <a href="ht… |
|
24 <li>Using CSS sprits with class names: <a href="https://github.com/lipis… |
|
25 <li>Render emoji with web fonts: <a href="https://github.com/talkjs/coun… |
|
26 </ul> |
|
27 <p>I prefer the web font way, although this repo contains only a few sta… |
|
28 <p>We would load the web font only on Windows because Mac and Linux can … |
|
29 <p>A simple JavaScript is required:</p> |
|
30 <div class="block-code" data-language="js"><div class="highlight"><pre><… |
|
31 </div><div class="line"><span class="w"> </span><span class="nb">docume… |
|
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>… |
|
36 <div class="block-code" data-language="css"><div class="highlight"><pre>… |
|
37 </div><div class="line"><span class="w"> </span><span class="nt">font-f… |
|
38 </div><div class="line"><span class="w"> </span><span class="nt">unicod… |
|
39 </div><div class="line"><span class="w"> </span><span class="nt">src</s… |
|
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"> </s… |
|
43 </div><div class="line"><span class="w"> </span><span class="k">font-fa… |
|
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</sp… |
|
47 </div><div class="line"><span class="w"> </span><span class="k">font-fa… |
|
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… |
|
53 <p>也許是身處疫情的自我隔離，也許是漫漫冬季的蕭瑟… |
|
54 <h2>作息調整</h2> |
|
55 <p>告别了昼夜颠倒的生活，作息終於規律了起來，現在… |
|
56 <ul> |
|
57 <li>自然醒，時間跨度比較大，大致 6:30 ～ 8:00</li> |
|
58 <li>早餐，可能是烤麵包，可能是出門吃，也可能不吃</… |
|
59 <li>學習日語，是的，我又一次開始學習日語了，大致�… |
|
60 <li>處理 Typlog 的 bug，或優化代碼，或寫新功能</li> |
|
61 <li>下午，處理真正的工作（養活自己的）</li> |
|
62 <li>晚餐後，看情況，可能還是在為 Typlog 工作，可能是… |
|
63 <li>11:00 ～ 12:00 睡覺</li> |
|
64 </ul> |
|
65 <p>以上安排比較彈性，實際上會有一些出入。</p> |
|
66 <h2>日語學習</h2> |
|
67 <p>不記得是第幾次學習日語了，這次是在 NHK 上學習<a h… |
|
68 <p>一點新知分享，<strong>こんにちは</strong>的漢字寫法�… |
|
69 <h2>Typlog</h2> |
|
70 <p>Typlog 最近做了一些優化，也新增了一些功能。</p> |
|
71 <ul> |
|
72 <li>Typlog 變快了，當然你可能也感受不到，反正我們服�… |
|
73 <li>優化了郵箱列表的任務隊列，開始記錄用戶發郵件�… |
|
74 <li>跳轉服務支持 wildcard matching 了。</li> |
|
75 <li>自動鏈接 embed 服務支持 App Store、IMDb、豆瓣電影以�… |
|
76 </ul> |
|
77 <p>因為豆瓣有中國特色的圖片防盜鏈設置，豆瓣電影的… |
|
78 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
79 </div></code></pre></div> |
|
80 </div> |
|
81 <p><a href="https://movie.douban.com/subject/1291843/">https://movie.dou… |
|
82 <h2>Authlib</h2> |
|
83 <p>修復了一些 bug，發佈了 <a href="https://github.com/lepture/a… |
|
84 <hr /> |
|
85 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
86 ]]></content:encoded></item><item><title><![CDATA[ 程序員與文學�… |
|
87 <div class="blockquote"><blockquote><p>一直很不喜欢「程序员」… |
|
88 <p>via <a href="https://twitter.com/Blankwonder/status/13350532633605406… |
|
89 </blockquote></div> |
|
90 <p>暫不言「員」字一解，且談他人回復，或曰其言「是… |
|
91 <div class="blockquote"><blockquote><p>所以只是我的言论映射出… |
|
92 </blockquote></div> |
|
93 <p>這一表述亦是常見的，不過於「你自己心裡有鬼」，… |
|
94 <p>我們不談他人心中所想，只談文字表達。</p> |
|
95 <p>原文 Tweet 建立了一個矛盾衝突，將程序員與收銀員�… |
|
96 <p>你們收銀員、駕駛員等的工作標準太低、太無趣了。… |
|
97 <p>作者心裏是否這樣想的，我們不知，也不必評說，但… |
|
98 <hr /> |
|
99 <p>再談「員」字，是否真的指「機械地反復做同一件事… |
|
100 <p>而「程序員」之員字，當指從事某一職業的人。這一… |
|
101 ]]></content:encoded></item><item><title><![CDATA[ Fireside 遷移記 ]… |
|
102 <p>但是我卻發現了 Fireside 有一個 Hiatus Mode，可以用 $5 �… |
|
103 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
104 <p>這樣等下去也不是辦法。據說互聯網是有記憶的（當… |
|
105 <p>再搜索，找到一個叫 <a href="https://www.listennotes.com/podc… |
|
106 <p>最終從 <a href="https://www.breaker.audio/biao-jiang-bitch-up">Bre… |
|
107 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
108 <p>這裡不得不說，<a href="http://typlog.com/">Typlog</a> 還是�… |
|
109 ]]></content:encoded></item><item><title><![CDATA[ Typlog 三週年 ]]>… |
|
110 <p>三年時間里，Typlog 修修改改亦有不少變化。經營日�… |
|
111 <h2>從靜態到動態</h2> |
|
112 <p>Typlog 是用 Python Flask 寫的，這一點沒有變化。初時的… |
|
113 <ol> |
|
114 <li>所有靜態文件生成到一個固定的文件夾，比如 <code>/… |
|
115 <li>創建軟鏈接 <code>/data/www/lepture.com</code> 和 <code>/data/w… |
|
116 <li>Nginx 配置里設置 <code>root /data/www/$http_host</code></li> |
|
117 </ol> |
|
118 <p>如是，當你訪問 <code>lepture.com</code> 或者 <code>lepture.t… |
|
119 <p>靜態化的方案堅持了許久，漸漸也有了些許用戶，功… |
|
120 <p>後來發現完全是自己考慮多了，動態化後一點都不慢… |
|
121 <h2>從博客到播客</h2> |
|
122 <p>Typlog 誕生時只是一個博客服務，當時的目標是做一�… |
|
123 <p>之後又心癢，想做一個播客節目，於是開始想方案將… |
|
124 <p>我需要感謝 <a href="http://nirokita.cn/">Niki</a>，他是我們… |
|
125 <p>Typlog 也漸漸清晰了自己的定位，才有了我們現在首�… |
|
126 <div class="blockquote"><blockquote><p>Share your stories, either in tex… |
|
127 </blockquote></div> |
|
128 <p>最近又將圖片功能升級了，於是有了 <a href="/moments/">… |
|
129 <h2>Admin 的三次重寫</h2> |
|
130 <p>Typlog 的後台 Admin 部分經歷了三次重寫。感謝 Vue，雖… |
|
131 <p>第一次，初版 Admin，未用第三方 UI 庫，界面簡潔，�… |
|
132 <p>第二次，新增播客功能，Admin 變得複雜許多，之前的… |
|
133 <p>第三次，iView 越使用越不好用，如果只使用他已有的… |
|
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 亦替換過不少服務�… |
|
145 <p>之後要做圖片自動裁剪的功能，於是自己搭了一個 <a… |
|
146 <p>Google Analytics 確實是很好用的，我在 Authlib 的博客里�… |
|
147 <h2>開放互聯網</h2> |
|
148 <p>我向來支持互聯網而反對 App，能用瀏覽器的話就不�… |
|
149 <p>再比如我們還支持 <a href="https://blog.typlog.com/pubsubhubbu… |
|
150 <h2>未來的規劃</h2> |
|
151 <p>Typlog 一點點成長，希望他能漸漸成長到可以養活我�… |
|
152 <ul> |
|
153 <li>搜索功能已經快完成了，還在優化 (更新：已在內測… |
|
154 <li>郵件列表，遷移到 AWS SES 便是為郵件列表功能做準�… |
|
155 <li>會員服務，方案還沒有想好</li> |
|
156 </ul> |
|
157 <hr /> |
|
158 <p>感謝 Typlog 用戶們的支持與包容。</p> |
|
159 ]]></content:encoded></item><item><title><![CDATA[ How to style RSS fee… |
|
160 <p>RSS feed is meant to be used by machine (apps) not by human. But peop… |
|
161 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
162 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
163 <div class="blockquote"><blockquote><p>But how can we make a RSS feed lo… |
|
164 </blockquote></div> |
|
165 <p>We added this UI in <a href="https://typlog.com/">Typlog</a> recently… |
|
166 <div class="block-code" data-language="xml"><div class="highlight"><pre>… |
|
167 </div><div class="line"><span class="cp"><?xml-stylesheet href="… |
|
168 </div><div class="line"><span class="nt"><rss</span> <span class="na"… |
|
169 </div></code></pre></div> |
|
170 </div> |
|
171 <p>Here you can see, the feed is styled by an external file <code>/rss.x… |
|
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.x… |
|
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>… |
|
177 </div><div class="line"><span class="nt"><xsl:stylesheet</span> <span… |
|
178 </div><div class="line"><span class="na">xmlns:atom=</span><span class="… |
|
179 </div><div class="line"> <span class="nt"><xsl:output</span> <span c… |
|
180 </div><div class="line"> <span class="nt"><xsl:template</span> <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 sel… |
|
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 e… |
|
200 ]]></content:encoded></item><item><title><![CDATA[ 談談獨立播客 ]… |
|
201 <p>我原先便有做一個播客列表的想法，不過是推薦一下… |
|
202 <p>愚聽播客並不算多，初始不過列舉三四個，幸得眾人… |
|
203 <p><a href="https://twitter.com/Jesoooor/status/1137520030826913793">Jes… |
|
204 <div class="blockquote"><blockquote><p>獨立 = 創作過程不受限制… |
|
205 <p>這是要從內容本身出發去判斷的，真正「獨立」的內… |
|
206 </blockquote></div> |
|
207 <p>愚非賢者，不敢斷言何為真正獨立的內容，亦不可能… |
|
208 <p>當前情形，愚不可能去評判播客內容之優劣。止以域… |
|
209 <p>針對蘋果國內播客政策，我以為有如下解決方案：</p> |
|
210 <ol> |
|
211 <li>保留現有獨立域名的 RSS 作為國際版播客，同時提供… |
|
212 <li>且<a href="https://blog.yitianshijie.net/2019/06/06/time-to-double-… |
|
213 </ol> |
|
214 ]]></content:encoded></item><item><title><![CDATA[ 貓與網絡暴力 ]… |
|
215 <p>而我卻擔心起室友來，恐怕其會有輕生之意。希望她… |
|
216 <p>我這裡也不願列出原始出處，算是保護一下二位當事… |
|
217 <p>我亦曾感嘆於互聯網之偉大，樂見社交網絡的興起。… |
|
218 <p>萬不料網絡最終成了威逼個人的利器。公權力？那是… |
|
219 <div class="blockquote"><blockquote><p>確實駭人聽聞，我單知道… |
|
220 </blockquote></div> |
|
221 <p>確實是我孤陋寡聞，大約網絡暴力已經是一種常態了… |
|
222 <p>社交網絡的力量很可怕，雖然還沒有公權力可怕，個… |
|
223 <p>我不想分辨室友算不算是在虐貓，貓很可愛，但這不… |
|
224 ]]></content:encoded></item><item><title><![CDATA[ 那霸的夜 ]]></ti… |
|
225 <p>走上國際通的街道。還有深夜經營的小店，居酒屋拉… |
|
226 <p>不遠處聞得歌聲，是首英文歌，我也哼得起來，便慢… |
|
227 <p>女生唱完後問我想聽點什麼，我說你隨意，唱你喜歡… |
|
228 <p>歌聲繼續，沒有人駐足，唯有微風吹拂。這那霸的夜… |
|
229 <p>大抵生命還是美好的。晚安。</p> |
|
230 ]]></content:encoded></item><item><title><![CDATA[ Authlib Under BSD Li… |
|
231 <h2>Background</h2> |
|
232 <p><a href="https://authlib.org/">Authlib</a> was created to replace my … |
|
233 <ul> |
|
234 <li><p>Flask-OAuthlib is not designed well.</p> |
|
235 <p>It was caused by the API provided by OAuthLib and my poor understandi… |
|
236 </li> |
|
237 <li><p>Flask-OAuthlib is not maintained well.</p> |
|
238 <p>It was caused by the maintenance problem of OAuthLib at that time (th… |
|
239 </li> |
|
240 </ul> |
|
241 <p>That is why I started Authlib <strong>from scratch</strong> and build… |
|
242 <h2>Sustainable</h2> |
|
243 <p>The original goal of making Authlib sustainable won't change. Being p… |
|
244 <ol> |
|
245 <li>You will be enlisted in the security mail list to get security notif… |
|
246 <li>Your feedbacks will get responses more quickly than community suppor… |
|
247 <li>There will be more features in the future.</li> |
|
248 </ol> |
|
249 <p>There is also another way to support my work on Authlib. I'm now acce… |
|
250 <a class="md-img-link" href="https://www.patreon.com/lepture" title="Sup… |
|
251 ![Patreon](https://c5.patreon.com/external/logo/become_a_patron_button@2… |
|
252 </a> |
|
253 |
|
254 <h2>Get Updates</h2> |
|
255 <p>Version 0.11 should be released in January soon. Follow <a href="http… |
|
256 <p>Here is the official blog announcement: <a href="https://blog.authlib… |
|
257 <hr /> |
|
258 <p><em>Happy new license, happy new year.</em></p> |
|
259 ]]></content:encoded></item><item><title><![CDATA[ PyCon JP 2018 記 ]]… |
|
260 <h2>分享</h2> |
|
261 <p>我自己偏愛概念類的分享，以傳播為主，這次的分享… |
|
262 <p><a href="https://www.youtube.com/watch?v=LesqkjqiCr8" title="The mode… |
|
263 <p>另外 slide 可見 <a href="https://speakerdeck.com/lepture/the-mode… |
|
264 <h2>體驗</h2> |
|
265 <p>這次參加 PyCon JP 算是偶然，來日本第三年了才第一�… |
|
266 <p>中途並沒有人來聯繫，也沒有提前要 slide，所以一直… |
|
267 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
268 <h2>收穫</h2> |
|
269 <p>PyCon JP 這邊有蠻多台灣 PyCon 過來的志願者，有好些�… |
|
270 <p>我自己的分享結束後，亦收到了幾張名片，可惜我自… |
|
271 <h2>感想</h2> |
|
272 <p>日本這邊辦得比中國要好。首先是議題，什麼樣的都… |
|
273 <p>另外一點，PyCon JP 和其他地方的聯繫比較多，比如 Py… |
|
274 <p>預祝十月的 PyCon 中國順利。</p> |
|
275 ]]></content:encoded></item><item><title><![CDATA[ 摩登 OAuth 2.0：�… |
|
276 <h2>歷史</h2> |
|
277 <p>OAuth 的歷史最早可追溯到 2006 年 11 月，Twitter 需要一… |
|
278 <p>這是 OAuth 1.0 的歷史。其後 OAuth 1.0 進入 IETF，2010 年 … |
|
279 <p>無論是 OAuth 1.0 還是 OAuth 2.0，他們解決的都是同一個… |
|
280 <h2>框架</h2> |
|
281 <p>OAuth 2.0 與 OAuth 1.0 並不兼容，其實是個全新的體系。… |
|
282 <p>時至今日，OAuth 2.0 框架體系里已經誕生了許多標準�… |
|
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 Authentic… |
|
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 工作組起草的。更全面… |
|
291 <h2>角色</h2> |
|
292 <p>在 OAuth 2.0 框架內，通常有 4 種角色。分別是：</p> |
|
293 <ol> |
|
294 <li>Resource Owner：資源所有者。例如一個圖片分享網站，… |
|
295 <li>Resource Server：資源服務。提供訪問這些圖片數據的 A… |
|
296 <li>Client：客戶端。例如能訪問這個圖片分享網站的 iOS … |
|
297 <li>Authorization Server：認證服務。在資源所有者的允許下… |
|
298 </ol> |
|
299 <p>有時你能明顯感受到這些角色的存在，有時則不然。… |
|
300 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
301 <ol> |
|
302 <li>客戶端提供其自身的信息，在資源所有者的允許下�… |
|
303 <li>認證服務驗證通過後，返回 Access Token 給客戶端。</l… |
|
304 <li>客戶端使用 Access Token 向資源服務請求用戶數據。</l… |
|
305 <li>資源服務驗證 Access Token 有效後，返回資源數據。</l… |
|
306 </ol> |
|
307 <p>須知，資源所有者的授權有多種方式，客戶端提供自… |
|
308 <section class="footnotes"> |
|
309 <ol> |
|
310 <li id="fn-1"><p>Authlib -- The ultimate Python library in building OAut… |
|
311 <li id="fn-2"><p>OAuth started around November 2006, while Blaine Cook w… |
|
312 <li id="fn-3"><p><strong>RFC5849: The OAuth 1.0 Protocol</strong> vs <st… |
|
313 </ol> |
|
314 </section> |
|
315 ]]></content:encoded></item><item><title><![CDATA[ 夜思 ]]></title><g… |
|
316 <p>玉兔隱長夜，寒蟬聒青堤。<br /> |
|
317 睹物思君意，憑欄空悲淒。<br /> |
|
318 杯淺迷人眼，相見何遲遲。</p> |
|
319 ]]></content:encoded></item><item><title><![CDATA[ Structure of a Flask… |
|
320 which is very good for experienced developers to organize things in thei… |
|
321 However, people new to Flask will get confused, they need some guide on … |
|
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://… |
|
326 to <a href="https://authlib.org">Authlib</a>. And I can't understand the… |
|
327 person explained it to me with a project structure, I finally got it. I … |
|
328 of posts, guide, boilerplates are backward importing modules from projec… |
|
329 <div class="block-code" data-language="py"><div class="highlight"><pre><… |
|
330 </div><div class="line"><span class="kn">from</span> <span class="nn">fl… |
|
331 </div><div class="line"><span class="kn">from</span> <span class="nn">fl… |
|
332 </div><div class="line"> |
|
333 </div><div class="line"><span class="n">db</span> <span class="o">=</spa… |
|
334 </div><div class="line"> |
|
335 </div><div class="line"><span class="k">def</span> <span class="nf">crea… |
|
336 </div><div class="line"> <span class="n">app</span> <span class="o">=… |
|
337 </div><div class="line"> <span class="n">db</span><span class="o">.</… |
|
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">..… |
|
341 </div><div class="line"> |
|
342 </div><div class="line"><span class="k">class</span> <span class="nc">Us… |
|
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 lat… |
|
347 cyclic dependencies problem. For instance, another extension requires to… |
|
348 <code>User</code> model:</p> |
|
349 <div class="block-code" data-language="py"><div class="highlight"><pre><… |
|
350 </div><div class="line"><span class="kn">from</span> <span class="nn">fl… |
|
351 </div><div class="line"><span class="kn">from</span> <span class="nn">an… |
|
352 </div><div class="line"><span class="kn">from</span> <span class="nn">pr… |
|
353 </div><div class="line"> |
|
354 </div><div class="line"><span class="n">db</span> <span class="o">=</spa… |
|
355 </div><div class="line"><span class="n">ext</span> <span class="o">=</sp… |
|
356 </div></code></pre></div> |
|
357 </div> |
|
358 <p>Oops, a cyclic dependency occurs. Because <code>auth.models</code> is… |
|
359 root can not import <code>User</code> module. This is a common cyclic pr… |
|
360 It is easy to fix, but junior developers may find it very hard. So why n… |
|
361 thing from the very begining? Actually, if you have read the <strong>off… |
|
362 in <a href="http://flask.pocoo.org/docs/0.12/patterns/appfactories/#basi… |
|
363 you can find this piece of code:</p> |
|
364 <div class="block-code" data-language="py"><div class="highlight"><pre><… |
|
365 </div><div class="line"> <span class="n">app</span> <span class="o">=… |
|
366 </div><div class="line"> <span class="n">app</span><span class="o">.<… |
|
367 </div><div class="line"> <span class="kn">from</span> <span class="nn… |
|
368 </div><div class="line"> <span class="n">db</span><span class="o">.</… |
|
369 </div><div class="line"> <span class="kn">from</span> <span class="nn… |
|
370 </div><div class="line"> <span class="kn">from</span> <span class="nn… |
|
371 </div><div class="line"> <span class="n">app</span><span class="o">.<… |
|
372 </div><div class="line"> <span class="n">app</span><span class="o">.<… |
|
373 </div><div class="line"> <span class="k">return</span> <span class="n… |
|
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… |
|
378 <div class="blockquote"><blockquote><p>Don't backward import from root <… |
|
379 </blockquote></div> |
|
380 <p>That's why I submitted <a href="https://github.com/pallets/flask/issu… |
|
381 as soon as I found this problem. People need a guide on folder structure… |
|
382 going to share my suggestions. But think it yourself, don't treat mine a… |
|
383 <h2>Functional Based Structure</h2> |
|
384 <p>There are many ways to setup your project folder structure. One is by… |
|
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… |
|
410 folder; if it behaves as a route, put it in routes folder. Build a <code… |
|
411 factory in <code>project/__init__.py</code>, and init_app of everything:… |
|
412 <div class="block-code" data-language="py"><div class="highlight"><pre><… |
|
413 </div><div class="line"><span class="kn">from</span> <span class="nn">fl… |
|
414 </div><div class="line"> |
|
415 </div><div class="line"><span class="k">def</span> <span class="nf">crea… |
|
416 </div><div class="line"> <span class="kn">from</span> <span class="nn… |
|
417 </div><div class="line"> <span class="n">app</span> <span class="o">=… |
|
418 </div><div class="line"> <span class="n">models</span><span class="o"… |
|
419 </div><div class="line"> <span class="n">routes</span><span class="o"… |
|
420 </div><div class="line"> <span class="n">services</span><span class="… |
|
421 </div><div class="line"> <span class="k">return</span> <span class="n… |
|
422 </div></code></pre></div> |
|
423 </div> |
|
424 <p>Here is a trick by me. In official documentation, <code>db</code> of … |
|
425 in this way:</p> |
|
426 <div class="block-code" data-language="python"><div class="highlight"><p… |
|
427 </div><div class="line"><span class="n">db</span><span class="o">.</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… |
|
431 progress as one:</p> |
|
432 <div class="block-code" data-language="python"><div class="highlight"><p… |
|
433 </div><div class="line"><span class="kn">from</span> <span class="nn">.b… |
|
434 </div><div class="line"> |
|
435 </div><div class="line"><span class="k">def</span> <span class="nf">init… |
|
436 </div><div class="line"> <span class="n">db</span><span class="o">.</… |
|
437 </div><div class="line"> |
|
438 </div><div class="line"><span class="c1"># project/routes/__init__.py</s… |
|
439 </div><div class="line"><span class="kn">from</span> <span class="nn">.u… |
|
440 </div><div class="line"><span class="kn">from</span> <span class="nn">.p… |
|
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… |
|
444 </div><div class="line"> <span class="n">app</span><span class="o">.<… |
|
445 </div><div class="line"> <span class="n">app</span><span class="o">.<… |
|
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 t… |
|
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 Dja… |
|
468 mean this pattern is better, you need to choose a folder structure depen… |
|
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><… |
|
472 </div><div class="line"><span class="kn">from</span> <span class="nn">fl… |
|
473 </div><div class="line"> |
|
474 </div><div class="line"><span class="k">def</span> <span class="nf">crea… |
|
475 </div><div class="line"> <span class="kn">from</span> <span class="nn… |
|
476 </div><div class="line"> <span class="n">app</span> <span class="o">=… |
|
477 </div><div class="line"> <span class="n">db</span><span class="o">.</… |
|
478 </div><div class="line"> <span class="n">auth</span><span class="o">.… |
|
479 </div><div class="line"> <span class="n">blog</span><span class="o">.… |
|
480 </div><div class="line"> <span class="k">return</span> <span class="n… |
|
481 </div></code></pre></div> |
|
482 </div> |
|
483 <h2>Configuration</h2> |
|
484 <p>Loading configuration would be another issue that many people find di… |
|
485 is also a folder structure problem. I don't know how other people are do… |
|
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… |
|
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 var… |
|
501 <div class="block-code" data-language="py"><div class="highlight"><pre><… |
|
502 </div><div class="line"><span class="kn">import</span> <span class="nn">… |
|
503 </div><div class="line"><span class="kn">from</span> <span class="nn">fl… |
|
504 </div><div class="line"> |
|
505 </div><div class="line"><span class="k">def</span> <span class="nf">crea… |
|
506 </div><div class="line"> <span class="n">app</span> <span class="o">=… |
|
507 </div><div class="line"> <span class="c1"># load default configuratio… |
|
508 </div><div class="line"> <span class="n">app</span><span class="o">.<… |
|
509 </div><div class="line"> <span class="c1"># load environment configur… |
|
510 </div><div class="line"> <span class="k">if</span> <span class="s1">&… |
|
511 </div><div class="line"> <span class="n">app</span><span class="o… |
|
512 </div><div class="line"> <span class="c1"># load app sepcified config… |
|
513 </div><div class="line"> <span class="k">if</span> <span class="n">co… |
|
514 </div><div class="line"> <span class="k">if</span> <span class="n… |
|
515 </div><div class="line"> <span class="n">app</span><span clas… |
|
516 </div><div class="line"> <span class="k">elif</span> <span class=… |
|
517 </div><div class="line"> <span class="n">app</span><span clas… |
|
518 </div><div class="line"> <span class="k">return</span> <span class="n… |
|
519 </div></code></pre></div> |
|
520 </div> |
|
521 <p>This <code>FLASK_CONF</code> is a python file path which contains con… |
|
522 be any name you want, e.g. your project is called Expanse, you can name … |
|
523 <code>EXPANSE_CONF</code>.</p> |
|
524 <p>I use this <code>FLASK_CONF</code> to load production configurations.… |
|
525 <hr /> |
|
526 <p>Again, Flask is very flexible, there is no certain patterns. You can … |
|
527 your favors. These are just my suggestions, <strong>do not blind by anyo… |
|
528 <p><em>I don't like to write posts like this. But there are so many wron… |
|
529 ]]></content:encoded></item><item><title><![CDATA[ Announcement of Auth… |
|
530 <p>Authlib contains everything you need to create OAuth clients and serv… |
|
531 <ul> |
|
532 <li><strong>python-requests</strong> <strong>OAuth1Session</strong> and… |
|
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 p… |
|
541 <p>To get a better understanding, you can read the official documentatio… |
|
542 <ol> |
|
543 <li>Official Documentation: <a href="https://docs.authlib.org/">https://… |
|
544 <li>Source Code of Authlib: <a href="https://github.com/lepture/authlib"… |
|
545 <li>Online Playground: <a href="https://play.authlib.org/">https://play.… |
|
546 <li>Source Code of Playground: <a href="https://github.com/authlib/playg… |
|
547 </ol> |
|
548 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
549 <p>I have several reasons to deprecate Flask-OAuthlib. But the main reas… |
|
550 <p><strong>I created <a href="https://authlib.org/">Authlib</a> from scr… |
|
551 <h2>Being Monolithic</h2> |
|
552 <p>I started <a href="https://authlib.org/">Authlib</a> with a monolithi… |
|
553 <p>Being monolithic means it won't break things. When specifications cha… |
|
554 <p>Will it always be monolithic? It depends. As time goes and Authlib be… |
|
555 <h2>Profitable = Sustainable</h2> |
|
556 <p>Flask-OAuthlib is not sustainable. I can't spare too much time on it.… |
|
557 <p><strong>Profitable equals sustainable</strong>. If I can make a livin… |
|
558 <p>The <a href="https://authlib.org/plans">price model for Authlib</a> i… |
|
559 <h2>Road Map</h2> |
|
560 <p>I've released <a href="https://docs.authlib.org/en/latest/changelog.h… |
|
561 <ol> |
|
562 <li>Common client and Flask client integration is available in <strong>v… |
|
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 s… |
|
567 </blockquote></div> |
|
568 <p>The next implementation will be Flask OAuth 1 server. After that, the… |
|
569 <hr /> |
|
570 <p>Now, head over to the <a href="https://docs.authlib.org/">documentati… |
|
571 ]]></content:encoded></item><item><title><![CDATA[ 三藩記 ]]></title… |
|
572 <p>余年少而家貧，無以直航，東京途次洛杉磯而適三藩… |
|
573 <p>余居三藩凡九日，得閒四天。</p> |
|
574 <p>初。邀大學同窗共遊伯克利。伯克利者，加州大學分… |
|
575 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
576 <p>是夜，與諸君聚於聖荷西，有飯團、Loddit、梁海、東… |
|
577 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
578 <p>三。央Bao君載余行射擊之樂也。其地近聖荷西，喚曰… |
|
579 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
580 <p>日本十一倒不放假，究竟在家呆久了，早想著出一趟… |
|
581 <p>這次又是一個人的旅行，小明倒也習以為常，往年亦… |
|
582 <p>佐渡一度算作流放犯人的蠻荒之地，及至金銀礦的發… |
|
583 <p>小木略顯荒涼，便是十一這樣的時節，到處都是中國… |
|
584 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
585 <p>此番行程未曾預訂宿所。他在觀光案內所<sup class="foo… |
|
586 <p>可巧還有房間。這一路皆是到了當地再找的，沒有中… |
|
587 <p>かもめ莊的老闆給了他一把雨傘，小明放過旅行包便… |
|
588 <p>宿根木的公車卻沒有了，要到五點才有一班。他那麼… |
|
589 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
590 <p>公車券要到第二日，去相川時才稍微用得多點。先是… |
|
591 <p>佐渡金山開放的坑道只有兩個，宗太夫坑與道游坑，… |
|
592 <p>後來才想到，如果能自己開車的話，宿根木也去得，… |
|
593 <p>回程時又去看過北澤浮游選礦場遺跡。到處都是爬山… |
|
594 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
595 <p>晚間宿道游，其地不大，房間不多，卻皆是面海的，… |
|
596 <p>火車行到津川站，他在這一站下車。上車時刷的交通… |
|
597 <p>房間很大，臨窗有一處休息區，窗外便是阿賀野川。… |
|
598 <p>相較起來，福泉的餐食亦是最豐富的。到底是新潟，… |
|
599 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
600 <p>麒麟山公園卻在維護，進不得，來途的「狐の嫁入り… |
|
601 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
602 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
603 <section class="footnotes"> |
|
604 <ol> |
|
605 <li id="fn-1"><p>日本各旅遊地一般都會有觀光案內所，離�… |
|
606 </ol> |
|
607 </section> |
|
608 ]]></content:encoded></item><item><title><![CDATA[ 週記，九月末 ]… |
|
609 <p>吃了兩日不知是誰剩下來的感冒藥，但是還不見好。… |
|
610 <p>填過一點基本信息，醫生問了幾個問題，便開了五日… |
|
611 <p>今日日語學習，自動詞與他動詞。另外記新單詞、複… |
|
612 <h2>9.26，晴</h2> |
|
613 <p>一整天都在處方藥的副作用裏度過，昏昏沈沈的，一… |
|
614 <h2>9.27，晴、陰、雨</h2> |
|
615 <p>今天天氣多變，感冒還不見好。藥的副作用稍微適應… |
|
616 <p>聽了一期太醫來了，講兒童性教育的。憶起自己並不… |
|
617 <p>寫了一篇博客《<a href="https://lepture.com/zh/2017/fe-live-reg… |
|
618 <p>今日日語學習，主要在記單詞，另外複習了形容詞的… |
|
619 <h2>9.30，晴</h2> |
|
620 <p>本來打算今天出門旅遊的，但是感冒還沒好，只好繼… |
|
621 <p>這一日便全身心投入 Typlog 上了，給 Typlog 加上播客�… |
|
622 <p>之前答應了給校友會寫稿子，晚間總算把中秋聚會的… |
|
623 <h2>10.1，晴</h2> |
|
624 <p>六點多咳嗽醒了，已經一週了，感冒還沒好。但是我… |
|
625 <p>目的地還沒想好，打算先往秩父。結果途中看地圖，… |
|
626 <p>房間是和室的，很大一間，因爲附近看起來沒有吃飯… |
|
627 <p>終於出門了，也有了今日攝影。可惜到上越後，天氣… |
|
628 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
629 ]]></content:encoded></item><item><title><![CDATA[ 前端的基礎修�… |
|
630 <p>這一篇還是談 Accessibility，未來亦有相當一部分這一�… |
|
631 <h2>Live Regions 是什麼</h2> |
|
632 <p>現代的 Web 越來越依賴 JavaScript，頁面裏的內容亦會�… |
|
633 <p>在實際應用裏，Live Regions 一般用作消息提醒。例如 T… |
|
634 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
635 </div><div class="line"> <span class="p"><</span><span class="nt">p<… |
|
636 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
637 </div></code></pre></div> |
|
638 </div> |
|
639 <p>如果你開啓了 Voice Over<sup class="footnote-ref" id="fnref-1"><… |
|
640 <div class="blockquote"><blockquote><p>New Tweets available. Press perio… |
|
641 </blockquote></div> |
|
642 <p>但是你在網頁裏並不會看到這段內容的呈現，因爲它… |
|
643 <h2>aria-live</h2> |
|
644 <p>如上代碼所示，我們使用 <code>aria-live</code> 來標示 Li… |
|
645 <ul> |
|
646 <li>off: 等同於不標示 Live Region，讀屏軟件不做任何處理… |
|
647 <li>polite: 通常使用這個設定，在用戶的當前行爲終止後… |
|
648 <li>assertive: 比 polite 的優先級高，當同時有其它消息時�… |
|
649 </ul> |
|
650 <p>我們看到 Twitter 的那段通知代碼正是用的 <code>polite</… |
|
651 <p><a href="https://vimeo.com/235672780">https://vimeo.com/235672780</a>… |
|
652 <ol> |
|
653 <li>註：如果你在中國大陸，可能看不到這個視頻演示�… |
|
654 <li>註：這個 UI 庫我暫時沒有精力（財力）更新，大家�… |
|
655 </ol> |
|
656 <h2>aria-atomic</h2> |
|
657 <p><code>aria-live</code> 用來標記 Live Regions，以及定義它們… |
|
658 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
659 </div><div class="line"><span class="p"><</span><span class="nt">div<… |
|
660 </div><div class="line"> You have entered |
|
661 </div><div class="line"> <span class="p"><</span><span class="nt">sp… |
|
662 </div><div class="line"> characters. |
|
663 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
664 </div></code></pre></div> |
|
665 </div> |
|
666 <p>假使我們不使用 <code>aria-atomic="true"</code>，那… |
|
667 <div class="blockquote"><blockquote><p>You have entered 3 characters.</p> |
|
668 </blockquote></div> |
|
669 <p>註：使用不同的讀屏軟件或者不同的瀏覽器，得到的… |
|
670 <h2>aria-relevant</h2> |
|
671 <p>我們使用 <code>aria-relevant</code> 控制讀屏軟件在何種�… |
|
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>�… |
|
679 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
680 </div><div class="line"> <span class="p"><</span><span class="nt">li… |
|
681 </div><div class="line"><span class="p"></</span><span class="nt">ul<… |
|
682 </div></code></pre></div> |
|
683 </div> |
|
684 <p>當我們在其它地方的操作導致 Todo 裏的項目減少時，… |
|
685 <hr /> |
|
686 <ul> |
|
687 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/… |
|
688 <li><a href="http://pauljadam.com/demos/aria-atomic-relevant.html">http:… |
|
689 <li><a href="https://dev.opera.com/articles/introduction-to-wai-aria/">h… |
|
690 </ul> |
|
691 <section class="footnotes"> |
|
692 <ol> |
|
693 <li id="fn-1"><p>Voice Over 是 Apple (Mac & iOS) 的讀屏軟件<a … |
|
694 </ol> |
|
695 </section> |
|
696 ]]></content:encoded></item><item><title><![CDATA[ 週記，九月三�… |
|
697 <h2>9.20，晴</h2> |
|
698 <p>今天去新宿，到一家喚作 サポート 的事務所咨詢辦�… |
|
699 <p>咨詢過後，去涉谷的 Apple Store 處理 AirPods 的問題。�… |
|
700 <p>在 Apple Store 排了很久的隊，順便在店裡寫了一段時�… |
|
701 <p>今日攝影</p> |
|
702 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
703 <p>昨日決定了週記事項，今日決定重啓日語學習計劃。… |
|
704 <p>因為已經有點日語知識了，跳過一些內容，先復習部… |
|
705 <p>晚間戴 AirPods 跑步，有點擔心 AirPods，便沒跑太快。�… |
|
706 <h2>9.22，雨</h2> |
|
707 <p>今日下了一天的雨，斷斷續續，時大時小。</p> |
|
708 <p>寫了一篇博客《[像遊客一樣生活][blog]》，這標題躺�… |
|
709 <p>今日日語學習，動詞的助詞，主要是 を、に、へ、�… |
|
710 <h2>9.23，陰</h2> |
|
711 <p>昨晚便有感冒的跡象，今早起來喉嚨便乾疼。但是還… |
|
712 <p>晚上很早就睡下了，便沒有學日語，不過看了一章《… |
|
713 <p>今日攝影</p> |
|
714 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
715 <h2>9.24，陰</h2> |
|
716 <p>晚上沒睡好，出了很多汗，被子翻來翻去的。到了早… |
|
717 <p>今天有一個武大校友會的活動，在龜有「中國文武學… |
|
718 <p>今日攝影</p> |
|
719 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
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://lep… |
|
727 ]]></content:encoded></item><item><title><![CDATA[ 像遊客一樣生�… |
|
728 <p>可是你想想，你自己生活的城市或者鄉村的當地人，… |
|
729 <p>為什麼旅行？或許只是看看，或許是散心，或者是度… |
|
730 <p>像當地人一樣旅行，多少有點荒誕。一個是當地人沒… |
|
731 <p>「我可不是逃避，我是帶了探索與發現的心態旅行的… |
|
732 <p>這很好，但是不要指望像當地人生活就可以瞭解到文… |
|
733 <p>相反，我倒覺得「像遊客一樣生活」是個更不錯的理… |
|
734 <p>像遊客一樣生活，卻又比遊客多了一份閒適，可以發… |
|
735 <p>但是真的遊客卻不一樣，冷門景點的小樂趣並不能沖… |
|
736 ]]></content:encoded></item><item><title><![CDATA[ 煙花八月 ]]></ti… |
|
737 <p>卻是在看過大曲競技煙花後，忽覺之前看過的煙花都… |
|
738 <p>是 Fonda 組織的，同行五人，週六（8.26）的清早，乘�… |
|
739 <p>我們一行到駐車場時大約四點。駐車場在一片田間，… |
|
740 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
741 <p>大曲花火有晝花火與夜花火。白天里的煙花是煙的主… |
|
742 <p>夜晚的花火在幾十束煙花的齊放中開始，地上如泉般… |
|
743 <p>創造花火伴隨音樂起舞，舞隨音樂的節奏，奏出各式… |
|
744 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
745 <p><strong>注：煙花照片爲相機直出 JPEG，未修圖</strong></… |
|
746 <p>中場與終場的煙花都是官方準備的，不是參賽作品，… |
|
747 <p>也只好拿著手機揮一揮。</p> |
|
748 <hr /> |
|
749 <p>煙花的拍攝需要許多準備，又要三腳架又要快門線又… |
|
750 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
751 <li>減少曝光，將曝光補償調爲負值</li> |
|
752 <li>盡量拍攝煙花的後半期</li> |
|
753 <li>避免被前面的煙花與後面的煙花干擾</li> |
|
754 <li>利用前面煙花的背景煙，營造雲的感覺</li> |
|
755 <li>可以調節冷色白平衡，讓背景煙看起來更乾淨</li> |
|
756 </ul> |
|
757 <p>但是你並不能知曉下一發煙花的樣子，所以只管多拍… |
|
758 ]]></content:encoded></item><item><title><![CDATA[ A semantic BEM style… |
|
759 <div class="block-code"><pre><code>.block-name_element-name.Modifier</co… |
|
760 <p>There are lots of people who don't like BEM. I don't like the origina… |
|
761 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
762 </div></code></pre></div> |
|
763 </div> |
|
764 <p>So I created a modified version of BEM, it is a mix of semantic and B… |
|
765 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
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 w… |
|
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>… |
|
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_… |
|
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_… |
|
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<… |
|
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>… |
|
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>… |
|
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… |
|
801 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
802 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
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… |
|
807 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
808 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
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… |
|
815 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
816 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
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… |
|
821 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
822 </div><div class="line"><span class="p"></</span><span class="nt">sec… |
|
823 </div></code></pre></div> |
|
824 </div> |
|
825 <p>The <strong>class name</strong> way is preferred. But it is better to… |
|
826 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
827 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
828 </div><div class="line"><span class="p"></</span><span class="nt">sec… |
|
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 … |
|
833 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
834 </div></code></pre></div> |
|
835 </div> |
|
836 <p>The class name <code>Large</code> is a modifier. But <code><button… |
|
837 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
838 </div></code></pre></div> |
|
839 </div> |
|
840 <p>This <code>_hover</code> is added by <code><button-comp></code>… |
|
841 <h2>Break the rules</h2> |
|
842 <p>Sometime, you have to break the rules. For instance, you need to chan… |
|
843 <p>In this case, you can add <code>.block</code> before <code>.block_ele… |
|
844 <div class="block-code" data-language="css"><div class="highlight"><pre>… |
|
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 h… |
|
849 <p>But don't break too many.</p> |
|
850 ]]></content:encoded></item><item><title><![CDATA[ 關西行 ]]></title… |
|
851 <p>原先打算一日京都、二日奈良、三日大阪、四日京都… |
|
852 <h2>6月22日</h2> |
|
853 <p>早起，乘東武晴空線到北千住轉 JR 線。</p> |
|
854 <p>我是在[日本旅行][nta]買的新幹線加宿泊的套票，含�… |
|
855 <p>經東華告知，該新幹線車票包含都內 JR 線，可在北�… |
|
856 <p>當初選擇住宿地未曾留意，選在了離京都偏遠的地方… |
|
857 <p>鄉間的風景卻還不錯，遮了一層薄幕的近山，鐵路附… |
|
858 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
859 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
860 <h2>6月23日</h2> |
|
861 <p>早起，住宿含早餐。未曾料到早餐如此豐盛，和式的… |
|
862 <p>因為昨晚被房間里的電冰箱吵得無法入睡，半夜裡起… |
|
863 <p>京都，晴，天很熱。</p> |
|
864 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
865 <p>沿鴨川騎行，往東福寺方向去，時而藏身於櫻花樹陰… |
|
866 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
867 <p>這便是今日的重頭戲了，亦未料想會用去大半的時光… |
|
868 <p>稻荷大社這一處遊客便多了，終於有種景點的感覺了… |
|
869 <p>遇到張姑娘他們是在千本鳥居處，在入口的地方便看… |
|
870 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
871 <p>千本鳥居之長我所未料，紅柱的門一個接一個，直到… |
|
872 <p>到山頂後返回，下山後沒能再見他們，趕緊去尋我的… |
|
873 <p>在シティプラザ大阪住宿，亦是在[日本旅行][nta]上�… |
|
874 <h2>6月24日</h2> |
|
875 <p>昨晚到酒店後便去頂樓泡湯，浴後回房即睡。昨晚睡… |
|
876 <p>上午的行程是大阪城，步行過去，亦不過逛逛。因為… |
|
877 <p>卻說車上遇到了一個法輪功老太太，坐我旁邊，一路… |
|
878 <p>我們約在「十三」站，去附近一家中餐館吃點正宗的… |
|
879 <p>今日的主題便是吃喝與閒談，十三後便去梅田了。女… |
|
880 <p>私下裡與黃公子相談，探聽一點戀愛的經歷，好期待… |
|
881 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
882 <p>行程最後一日。早起，慢悠悠吃過早餐，退房，乘電… |
|
883 <p>因為晚上便要乘車回東京了，也不想趕著逛景點，便… |
|
884 <p>便要離去的時候，想起寄明信片來。買了明信片才發… |
|
885 <p>買完伴手禮後便去車站，回東京。</p> |
|
886 <hr /> |
|
887 <p>這次比較可惜的是沒去成奈良，留下念想，小鹿亂撞… |
|
888 <p>[nta]: <a href="http://www.nta.co.jp/jr/">http://www.nta.co.jp/jr/</a… |
|
889 ]]></content:encoded></item><item><title><![CDATA[ 花田苑雜記 ]]><… |
|
890 <p>在這無聊的日常里，有一處風景卻是我時常會踏足的… |
|
891 <p>第一次去花田苑還是去歲二月。近處的元荒川風景觀… |
|
892 <p>究竟是鄉下，遊人偏少，便是櫻花季的時節，園內亦… |
|
893 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
894 <p>花田苑以湖為心，繞水一周栽種了花草樹木，湖中幾… |
|
895 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
896 <p>開花亭的茶會每月都有。第一次去花田苑便見著茶會… |
|
897 <p>開花亭的茶會入席料五百円，交過錢後，便在茶室外… |
|
898 <p>亭邊連著茶室，從月季茶花開口的小道進去，在門邊… |
|
899 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
900 <p>每有朋友來越谷，我必定會引來花田苑一游。週末時… |
|
901 ]]></content:encoded></item><item><title><![CDATA[ 利器拾遺 ]]></ti… |
|
902 <p>或有言我之責微信甚矣，國外的網站，譬如臉書等亦… |
|
903 <p>大抵大清的魂魄還在，閉關鎖國與文字獄還昌盛，先… |
|
904 <div class="blockquote"><blockquote><p>中文世界最大的悲劇便是… |
|
905 </blockquote></div> |
|
906 <p>這是在社交網絡流行之後的事了，此前的互聯網還是… |
|
907 <p>前些時日，也就是五月二十日的晚上，有一位姓張的… |
|
908 <div class="blockquote"><blockquote><p>要一個道歉：今天乘CZ3157… |
|
909 </blockquote></div> |
|
910 <p>下面又有該女士的照片。</p> |
|
911 <p>確實駭人聽聞，我單知道可以在網上批評某一類人的… |
|
912 <p>粉絲這麼多，不去與強權作鬥爭便罷了，好好掙粉絲… |
|
913 <p>粉絲是一個很奇妙的存在，明星們的粉絲便已經很可… |
|
914 <p>悲憤事十之八九，能言者不過七五三二一，借著這個… |
|
915 <p>[f]: <a href="https://blog.yitianshijie.net/2017/06/02/wechat-and-fac… |
|
916 ]]></content:encoded></item><item><title><![CDATA[ 五一二雜感 ]]><… |
|
917 <p>便是要寫點什麼，怕只能在網上抄抄，我一個程序員… |
|
918 <p>可是究竟要寫點什麼，好打發走這腦中的小人。也就… |
|
919 <p>是的，他就是楊永信，一個與少年們作鬥爭的勇士，… |
|
920 <p>我曾一度以為刑法終於正常地發揮了一次作用，楊永… |
|
921 <p>便是以我最惡毒的想像力，也實在無法猜測父母的心… |
|
922 <p>可是總覺得需要做點什麼，以中國人民的善忘，怕是… |
|
923 <p>所以做了一個自動發<a href="http://weibo.com/lepture">微博<… |
|
924 <p>雖然一個楊永信倒下去還會有千千萬萬楊永信站起來… |
|
925 <section class="footnotes"> |
|
926 <ol> |
|
927 <li id="fn-1"><p>語出魯迅《而已集》，這裡指艾未未發起�… |
|
928 <li id="fn-2"><p>語出外交部發言人姜瑜。<a href="#fnref-2" cla… |
|
929 </ol> |
|
930 </section> |
|
931 ]]></content:encoded></item><item><title><![CDATA[ 牛島觀藤記 ]]><… |
|
932 <p>剛好這次黃金週，看到<a href="https://www.ashikaga.co.jp/fuj… |
|
933 <p>我們是週五去的，這一天是立夏，也是こどもの日（… |
|
934 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
935 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
936 <p>記得上學時，學過一篇宗璞的《紫藤蘿瀑布》，不知… |
|
937 <hr /> |
|
938 <p>下午三點的時光，陽光很強烈，直照得人睜不開眼，… |
|
939 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
940 <p>我博客更新得不勤，內容又雜亂無章，沒有固定的主… |
|
941 <p>Typlog 仍然是一個靜態博客，所有給讀者查看的頁面�… |
|
942 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
943 <div class="block-code"><pre><code>![alt](/img/src "optional title&… |
|
944  ![alt](/img/src "option… |
|
945 <p>更多 Typlog 的介紹可以閱讀<a href="https://typlog.com/about"… |
|
946 <p>這些年寫了很多的開源項目，也做了幾個免費無廣告… |
|
947 <p>Typlog 便成了我第一個收費項目，我希望它能一直活�… |
|
948 <p>並不是所有人都適合使用 Typlog，它是為類似於我這�… |
|
949 <ul> |
|
950 <li>偶爾寫寫文章，不至於一年上百篇</li> |
|
951 <li>能用 Markdown，喜歡用 Markdown</li> |
|
952 <li>對獨立域名情有獨鍾，為自己寫博客</li> |
|
953 </ul> |
|
954 <p>為什麼說不能一年上百篇文章呢？如果你仔細觀察，… |
|
955 <p>Typlog 將在下週二開始公測，如果對此有興趣的話，�… |
|
956 <p>在此期間付費的話，除了公測的時間外，還會在公測… |
|
957 <p>你可以加我的 Telegram 或者微信咨詢，ID 都是 lepture。… |
|
958 <p>最後再提一下，請閱讀<a href="https://typlog.com/about">關�… |
|
959 <hr /> |
|
960 <p>公測已結束。</p> |
|
961 ]]></content:encoded></item><item><title><![CDATA[ 談談 AMP 及其他… |
|
962 <p>我的個人博客也支持 AMP。是的，我又改寫了我的博�… |
|
963 <h2>AMP 有什麼作用</h2> |
|
964 <p><a href="https://www.ampproject.org">AMP</a> 是由 Google 提出來�… |
|
965 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
966 <p>AMP 不只是加載速度快，Google 聲稱 AMP 的頁面在搜索�… |
|
967 <p>除了 Google，還有 Yahoo、<a href="https://blogs.bing.com/search… |
|
968 <p>AMP 的缺點亦是十分明顯的，因為 Google 的緩存，打開… |
|
969 <h2>如何實現 AMP</h2> |
|
970 <p>AMP 是為媒體內容設計的（博客也是媒體內容），不�… |
|
971 <p>首先，你需要額外製作一份 AMP 網頁，該網頁包含三�… |
|
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><h… |
|
983 <li>AMP 不能使用外鏈的 CSS 資源。</li> |
|
984 <li>AMP 不能使用 <code><img></code> 標籤，需要使用 <cod… |
|
985 </ul> |
|
986 <p>具體實現參考<a href="https://www.ampproject.org/docs/">官方�… |
|
987 <div class="block-code"><pre><code><link rel="amphtml" href… |
|
988 <p>正是因為 <code><amp-img></code> 需要標明圖片長寬，… |
|
989 <h2>AMP 與 Web Component</h2> |
|
990 <p>除了 <code><amp-img></code>，還有許多別的自定義標�… |
|
991 <p>Web Component 是一套編寫瀏覽器原生組件的標準，你可�… |
|
992 <p>AMP 正是使用 Custom Element、Shadow Dom、 template 等來實現… |
|
993 <h2>AMP 與開放標準</h2> |
|
994 <p>我最欣賞 Google 的一點便是它的開放標準意識。無論�… |
|
995 <p>與 AMP 同類型的移動端加速方案還有一些，比如 Facebo… |
|
996 <h2>重新思考</h2> |
|
997 <div class="blockquote"><blockquote><p>這些標準至少看起來像是… |
|
998 </blockquote></div> |
|
999 <p>果然只是看起來。AMP 只是 Google 的私家花園。</p> |
|
1000 ]]></content:encoded></item><item><title><![CDATA[ 日光一日遊 ]]><… |
|
1001 <p>東武日光觀光專線需要額外補票價 820 円，大約因為�… |
|
1002 <p>車行兩小時，沿途的田地還未播種，灰撲撲的土地沒… |
|
1003 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1004 <p>所謂彌生祭，便是三月祭，舊曆三月稱做彌生。至於… |
|
1005 <p>日光市只有一條主道，我是沿著靠河的偏道行走的。… |
|
1006 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
1007 <p>早晨出門的時候，<a href="/zh/2015/first-day-koshigaya">越谷… |
|
1008 <p>一路走著，經過一個院子，院中一座木制的花車，車… |
|
1009 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1010 <p>行至神橋處，看看將近中午了，腹中空空如也，又見… |
|
1011 <p>神橋倒沒上去。看神橋的景致，大約適合拍夕陽晚照… |
|
1012 <p>過橋後便是入山口，石階處立著一個石塊，上書「世… |
|
1013 <p>沿石階上山，過輪王寺而不入。輪王寺正在修繕，亦… |
|
1014 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1015 <p>遂買票入廟，票價倒不記得了，大約千円左右。東照… |
|
1016 <p>在東照宮內左右看看，於眠貓處排隊時，天竟下起了… |
|
1017 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
1018 <p>待到雨小些了便折返回去，出了眠貓見遊客們在圍觀… |
|
1019 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1020 <p>卻是晴天霹靂，哦，不對，這時是個陰天。到了二荒… |
|
1021 <p>中禪寺湖是懶得去了，彌生祭又見不到。一個人索然… |
|
1022 <p>興致已經去了，遊玩沒了心情，不得不往車站走去。… |
|
1023 <p>這一日的日光之旅告一段落，不太成功，究竟也算出… |
|
1024 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1025 <p>寫 <a href="https://github.com/lepture/editor">Markdown Editor</a> �… |
|
1026 <hr /> |
|
1027 <p>選擇 Markdown 便是選擇自由，選擇不受制於編輯器的�… |
|
1028 <p>正如 Markdown 的作者 John Gruber 所言：</p> |
|
1029 <div class="blockquote"><blockquote><p>A Markdown-formatted document sho… |
|
1030 </blockquote></div> |
|
1031 <div class="blockquote"><blockquote><p>To this end, Markdown’s syntax … |
|
1032 </blockquote></div> |
|
1033 <p>雖然 Markdown 整體的語法設計並不完美，但並不妨礙�… |
|
1034 <p>譬如當我們看到<code>**這種強調**</code>的文法時，我�… |
|
1035 <p>自然，我並不是排斥 Markdown 編輯器。即使達到了手�… |
|
1036 <p>最下者，實時預覽之 Markdown 編輯器。何也？實時預�… |
|
1037 <p>編輯器之實時預覽多半與最終呈現效果並不一致，最… |
|
1038 <p>更要緊者便是擾人思緒。寫作之時，當專注於內容，… |
|
1039 <p>次下者，花姿招展文法高亮之 Markdown 編輯器也。這�… |
|
1040 <p>我個人覺得 GitHub Issues 的輸入框便是很不錯的 Markdown… |
|
1041 <p>這樣想來，我之所作編輯器倒不算很壞的編輯器，文… |
|
1042 <p>最後一點建言。排版，應當是寫作完成之後才需要做… |
|
1043 <p>[mistune]: <a href="https://github.com/lepture/mistune">https://githu… |
|
1044 ]]></content:encoded></item><item><title><![CDATA[ 閱乎，再見 ]]><… |
|
1045 <p>這幾年前端的變化着實驚人，閱乎的代碼也多年沒有… |
|
1046 <p>其間並沒有人詢問網站的情況，大約確實沒什麼人用… |
|
1047 <hr /> |
|
1048 <p>三年前，在<a href="/zh/2014/introduce-yuehu">閱乎，你好</a>… |
|
1049 <p>現在想來，在閱乎上做錯了許多事，亦浪費了許多時… |
|
1050 <p>閱乎沒有做導出功能，如果你希望找回之前的數據，… |
|
1051 <p>閱乎，再見。</p> |
|
1052 ]]></content:encoded></item><item><title><![CDATA[ Vue: from view to vi… |
|
1053 manage your vue files.</p> |
|
1054 <script async class="speakerdeck-embed" data-id="8e462e5ccbc541ddb5cb2b6… |
|
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… |
|
1070 <h2>views</h2> |
|
1071 <p>Views are the pages. If you are using vue-router, it is the component… |
|
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, i… |
|
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 ta… |
|
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[ 小明的胡言 ]]><… |
|
1083 <h2>日常篇</h2> |
|
1084 <p>有朋友拍了許多照片，想挑一張發到 Instagram 上，正�… |
|
1085 <p>「我覺得白色的這個比較好。」</p> |
|
1086 <p>朋友故意嫌棄道：「不選這張。」</p> |
|
1087 <p>「哦，那至少算是幫你排除了一個選項。」</p> |
|
1088 <hr /> |
|
1089 <p>在淺草逛的時候，有一家店的台灣店員好可愛，想去… |
|
1090 <p>我便嘟噥了一句「這個不是丹麥的，是日本的。」</p> |
|
1091 <hr /> |
|
1092 <p>在 CEO 家裡玩時，談到夢想。</p> |
|
1093 <p>小靜姐姐道：「我以前的夢想是做徐太太，隨便走到… |
|
1094 <p>我便告訴她「現在差不多也做到了。」</p> |
|
1095 <p>「……」</p> |
|
1096 <p>「每天不是在亞馬遜上買到手軟麼？雖然不是買給自… |
|
1097 <hr /> |
|
1098 <p>有朋友說「我老婆都不知道我掙多少錢。」</p> |
|
1099 <p>我也回道「我老婆也不知道我掙多少錢。」</p> |
|
1100 <hr /> |
|
1101 <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 到底是敵人還是朋友啊？一會兒要備戰一會兒要�… |
|
1120 <p>我單知道飛盤是給狗玩的，沒想到人也可以玩。</p> |
|
1121 <p>群眾的眼光要麼是雪亮的要麼是盲目。</p> |
|
1122 <p>喜歡的就叫姊姊，不喜歡的就叫大嬸。</p> |
|
1123 <p>每次見到 豆郵(1) 都好興奮，結果打開一看，是豆瓣�… |
|
1124 <p>我一個澡從 2015 年洗到了 2016 年。</p> |
|
1125 <p>國內大公司的設計師大多都獲得過小紅點設計獎。</p> |
|
1126 <p>翻看郵件，發現有人寫郵件，第一句話居然也是「在… |
|
1127 <p>我叫小明，我的人生充滿了段子，這一點從我的名字… |
|
1128 <h2>日西篇</h2> |
|
1129 <p>最近談戀愛了，不免想曬曬生活里的俏皮話。</p> |
|
1130 <p>和女友在上海分別時，女友被問到生肖時答道「我屬… |
|
1131 <p>女友早起看了看鏡子，嫌臉腫，道「今天不想拍照，… |
|
1132 <p>女友背著包去結賬，我空手坐在沙發上等她。服務生… |
|
1133 <hr /> |
|
1134 <p>女友說：「你好像 gay 啊！」</p> |
|
1135 <p>我答：「是啊，我就是 gay，我是你的 gay。」</p> |
|
1136 <hr /> |
|
1137 <p>一起出去旅遊，回來後查看相機。</p> |
|
1138 <p>我說：「相機里都是你的照片，沒有風景照，發不了… |
|
1139 <p>女友表示無賴：「…」</p> |
|
1140 <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>初中時候的操場是煤渣跑道，晨練下來整個鼻子里都… |
|
1151 <p>我在 2013 年的時候打算來次環球旅行，剛游到廈門就… |
|
1152 <p>隔了半年，覺得沒什麼可以做的就離開了。於是改成… |
|
1153 ]]></content:encoded></item><item><title><![CDATA[ 列車上的女子 ]… |
|
1154 <p>我不記得爲何會同她聊天了，假使沒有開口，一切都… |
|
1155 <p>西行的火車滿載著回鄉過年的人，高鐵的過道裏也站… |
|
1156 <p>是一個靠窗的位置，向左瞥一眼便見著窗外景緻了。… |
|
1157 <p>坐在對面的女子低頭玩著手機，雖然是短髮，流海還… |
|
1158 <p>偶爾擡頭的時候，見著了她的顏，略帶輕妝，兩頰便… |
|
1159 <p>後來是如何開始聊天的，細細回想，也是枉然。我那… |
|
1160 <div class="blockquote"><blockquote><p>那女子嫣然一笑，秋波流… |
|
1161 </blockquote></div> |
|
1162 <p>起先卻也聊了些時間，不過些閑話，後來聊到職業的… |
|
1163 <p>我笑了笑，沒有說話。</p> |
|
1164 <p>正好火車駛出了山洞，我便轉頭看了看窗外，還是一… |
|
1165 ]]></content:encoded></item><item><title><![CDATA[ 日記、新年お�… |
|
1166 <p>太陽已是直射陽台的時光了，元荒川的堤上不時有跑… |
|
1167 <p>元荒川已走過許多次了，家門口的這一段，有一條附… |
|
1168 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
1169 <p>元荒川向西，過兩個路口，有一個神社，喚作<a href="… |
|
1170 <p>去往神社的石板路，兩邊架著棚子，燒烤、炒麪、丸… |
|
1171 <p>我也買了一份玉子燒當作午餐，可惜過於甜膩，雖然… |
|
1172 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1173 <p>這櫻堤頗長，走到川流拐彎處，是一片農田，在這裡… |
|
1174 <p>我到梅林公園時天色已晚，不一時便見著夕陽了。快… |
|
1175 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1176 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1177 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
1178 <hr /> |
|
1179 <p>圖片使用 Flickr 管理，如果你身處中華局域網，可能�… |
|
1180 ]]></content:encoded></item><item><title><![CDATA[ 日記、初めま�… |
|
1181 <p>我一向是不喝酒的，昨晚的忘年會飲了兩杯果酒（大… |
|
1182 <p>這是我在日本的第一個早晨。拉開窗簾，步到陽台上… |
|
1183 <p>我嗅了嗅外衣，還殘留著昨晚忘年會的燒烤味，裡面… |
|
1184 <p>元荒川的堤上鋪著瀝青，靠河的一邊長滿了青草，另… |
|
1185 <p>沿著堤向西，西邊天際倒還有幾絲雲，模模糊糊不太… |
|
1186 <p>後來才知道這不是家鴨，是野鴨。越谷市的吉祥物便… |
|
1187 <p>只可惜路還不太熟，不曾尋到吃早餐的店，又不太想… |
|
1188 <p>いいお天気ですね。初めまして。</p> |
|
1189 <hr /> |
|
1190 <p>2015.12.29 - 越谷</p> |
|
1191 <p>附注：日記者非每日記錄也，是日本記事之簡寫也。… |
|
1192 ]]></content:encoded></item><item><title><![CDATA[ 杭州記憶 ]]></ti… |
|
1193 <p>在良渚的時候，我住一樓的房子，進門便是水汪汪一… |
|
1194 <p>房子有一個花園，刷白漆的柵欄圍了一圈，裡面是一… |
|
1195 <p>四月的清晨，曉曦初現，陽光灑在草尖的露珠，晶瑩… |
|
1196 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1197 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1198 <p>良渚借住了些時候，中途移居清邁一月，回來後又住… |
|
1199 <p>我第一次來杭州是因為工作。那時候還沒有畢業，因… |
|
1200 <p>杭州多小河，連綴著穿行於城市中。龍應台在《大江… |
|
1201 <p>我們清晨步行上班，沿途也有一段小河，河邊有一片… |
|
1202 <p>我對杭州的第一印象便是乾淨，第二印象是友好。還… |
|
1203 <p>實習結束後回到武漢，鬧哄哄的城市，工地遍野，灰… |
|
1204 <p>我在支付寶呆了兩年多，斷斷續續在杭州也生活了三… |
|
1205 <p>譬如這春日里的紅楓，靜靜站在西湖邊，看遊客行色… |
|
1206 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
1207 <p>多半時候我會挑著遊人少的時間來西湖，比如下點小… |
|
1208 <p>「晴西湖不如雨西湖」我不能體會，「雨西湖不如霧… |
|
1209 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1210 <p>白堤蘇堤總是人來人往，滿載的遊客。楊公堤便清閒… |
|
1211 <p>沿著楊公堤往太子灣方向，在半途有一個路口通向杭… |
|
1212 <p>出了掇景園往西，上馬路再望南去便是茅家埠了，是… |
|
1213 <p>住在杭州，總是有各種去處，認真寫下來大約可以寫… |
|
1214 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
1215 <p>有一處卻是收門票的，我每年也會去上一兩次，便是… |
|
1216 <p>杭州不僅僅只有自然風光，僻如白堤蘇堤，不只是自… |
|
1217 <p>今年應該不會回杭州了，前不久去杭州辦理簽證，途… |
|
1218 <p>再見，杭州。</p> |
|
1219 <section class="footnotes"> |
|
1220 <ol> |
|
1221 <li id="fn-1"><p>好想列入「到杭州不得不做的幾件事」<a h… |
|
1222 <li id="fn-2"><p>兩個人可以隨隨便便晃上一天，不必花一�… |
|
1223 <li id="fn-3"><p>植物園對面的竹林亦是不錯的去處，附註�… |
|
1224 </ol> |
|
1225 </section> |
|
1226 ]]></content:encoded></item><item><title><![CDATA[ 月神 ]]></title><g… |
|
1227 <div class="blockquote"><blockquote><p>I remember all these things. And … |
|
1228 <p>— Amy Tan in <em><a href="https://kindle.amazon.com/post/7Ft-95wxR7… |
|
1229 </blockquote></div> |
|
1230 <p>然而我並不記得具體的時間，也許是夏天，也許是初… |
|
1231 <p>那時我還在上小學，我和弟弟下學回家，可是家裏沒… |
|
1232 <p>我們村子位於省道上，沿了省道，聚在同一邊稀稀落… |
|
1233 <p>我們幾個小朋友撿根樹枝，在稻場上畫一個方框，彎… |
|
1234 <p>弟弟趴在地上，瞄準了小偉的奶油彈珠。</p> |
|
1235 <p>奶油彈珠是一種不太常見的彈珠，乳白色的珠子上繪… |
|
1236 <p>弟弟瞄了一會兒，拇指用力彈出，彈珠倏忽而出，正… |
|
1237 <p>小偉道：「不行，稻場太平了，要挖幾個坑」便拿了… |
|
1238 <p>我們玩了些時候，又換了幾個花樣。有站着把彈珠舉… |
|
1239 <p>時間不早了，天邊的雲朵已經變了色，染了點腮紅。… |
|
1240 <p>回到家後，父母還沒回來。我們便各自清點起自己的… |
|
1241 <p>旁邊的菜園子裏黃瓜已經熟了，我們摘了兩條黃瓜，… |
|
1242 <p>天色一點一點暗下來，腮紅的一抹漸至緋色的一片。… |
|
1243 <p>我們再去菜園子裏摘了黃瓜，坐在臺階上啃起來。看… |
|
1244 <p>父母還沒有回來，家裏的門還是鎖着的。口袋裏的彈… |
|
1245 <p>時間一點一點流逝，口袋裏的彈珠也越來越少。弟弟… |
|
1246 <p>眼淚裏的月光模模糊糊矇矇矓矓，廣寒宮的嫦娥仙子… |
|
1247 <p>模糊的淚眼裏，兩個人向家裏走來。弟弟叫道，「是… |
|
1248 <section class="footnotes"> |
|
1249 <ol> |
|
1250 <li id="fn-1"><p>中文譯作《喜福會》<a href="#fnref-1" class="fo… |
|
1251 <li id="fn-2"><p>一種石器，圓柱形的，一頭大一頭小，用�… |
|
1252 </ol> |
|
1253 </section> |
|
1254 ]]></content:encoded></item><item><title><![CDATA[ 談藥 ]]></title><g… |
|
1255 <p>英文藥字作 drug，以醫人以害人也。或言藥字當作 med… |
|
1256 <p>常言道是藥三分毒，作 drug 亦未嘗不可，便如那嗎啡… |
|
1257 <div class="blockquote"><blockquote><p>那張驢儿把毒藥放在羊肚… |
|
1258 </blockquote></div> |
|
1259 <p>昔者，神農嚐百草以爲藥也，而未知後世鳥獸魚蟲亦… |
|
1260 <p>藥字，上草下樂。草爲意部，樂爲聲部。咦。樂字是… |
|
1261 <p>廣韻藥字「以灼切，以母藥韻」，中原音韻「<strong>�… |
|
1262 <p>何以現代發音便不相同了呢？便是普通話正韻擇音的… |
|
1263 <p>大陸簡化藥作「药」，上草下約，從約聲，這便很奇… |
|
1264 <p>忽而想到「藥药」聲部「樂約」單看作聲符不免浪費… |
|
1265 <p>以上乃愚之亂語，非學術研究，諸君自辨。</p> |
|
1266 <p>[1]: <a href="http://blog.josui.me/2015-09-03-the-battle-between-trad… |
|
1267 ]]></content:encoded></item><item><title><![CDATA[ 前端的基礎修�… |
|
1268 <p>這一篇談 Accessibility 相關的主題——aria-label 的使用�… |
|
1269 <p>可能有人不理解什麼是 Accessibility，這裡簡單解釋一�… |
|
1270 <p>這個話題去歲在台灣談過，是參加 JSDC 2014 時講的，<… |
|
1271 <h2>aria-label 初窺</h2> |
|
1272 <p>aria-label 是一個 HTML attribute，用來告訴讀屏軟件某個�… |
|
1273 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1274 </div></code></pre></div> |
|
1275 </div> |
|
1276 <p>讀屏軟件（比如說 Voice Over）就會讀出「按鈕，關閉�… |
|
1277 <p>假如 <code><img></code> 標籤同時有 <code>aria-label</cod… |
|
1278 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1279 <p>全局屬性 <code>title</code> 是用作提示與補充的，你認�… |
|
1280 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1281 </div></code></pre></div> |
|
1282 </div> |
|
1283 <p>這段代碼是一個鏈接，使用一個圖片表示「設置」，… |
|
1284 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1285 </div></code></pre></div> |
|
1286 </div> |
|
1287 <h2>aria-label 與 iconfont</h2> |
|
1288 <p>多數網站已經不使用圖片來表示 icon 了，轉而使用 ic… |
|
1289 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1290 </div><div class="line"><span class="p"><</span><span class="nt">a</s… |
|
1291 </div></code></pre></div> |
|
1292 </div> |
|
1293 <p>上面的例子里給出了兩種方案，一是在圖標本身的標… |
|
1294 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1295 </div></code></pre></div> |
|
1296 </div> |
|
1297 <p>這時便不能在 iconfont 上添加 <code>aria-label</code> 了，�… |
|
1298 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1299 </div></code></pre></div> |
|
1300 </div> |
|
1301 <h2>aria-label 作為提示</h2> |
|
1302 <p>但是許多時候，即使你能看清楚圖標，你也完全不知… |
|
1303 <p>jquery.tipsy 這個插件默認使用 <code>title</code> 作為數據… |
|
1304 <div class="block-code" data-language="js"><div class="highlight"><pre><… |
|
1305 </div></code></pre></div> |
|
1306 </div> |
|
1307 <p>GitHub 使用的純 CSS 方案不錯，使用 CSS <code>attr()</code>… |
|
1308 <div class="block-code" data-language="css"><div class="highlight"><pre>… |
|
1309 </div><div class="line"><span class="w"> </span><span class="k">positio… |
|
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</sp… |
|
1312 </div><div class="line"><span class="w"> </span><span class="k">display… |
|
1313 </div><div class="line"><span class="w"> </span><span class="k">positio… |
|
1314 </div><div class="line"><span class="w"> </span><span class="k">top</sp… |
|
1315 </div><div class="line"><span class="w"> </span><span class="k">right</… |
|
1316 </div><div class="line"><span class="w"> </span><span class="k">bottom<… |
|
1317 </div><div class="line"><span class="w"> </span><span class="k">margin-… |
|
1318 </div><div class="line"><span class="w"> </span><span class="k">width</… |
|
1319 </div><div class="line"><span class="w"> </span><span class="k">height<… |
|
1320 </div><div class="line"><span class="w"> </span><span class="k">content… |
|
1321 </div><div class="line"><span class="w"> </span><span class="k">border<… |
|
1322 </div><div class="line"><span class="w"> </span><span class="k">border-… |
|
1323 </div><div class="line"><span class="w"> </span><span class="k">pointer… |
|
1324 </div><div class="line"><span class="w"> </span><span class="k">z-index… |
|
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</sp… |
|
1327 </div><div class="line"><span class="w"> </span><span class="k">display… |
|
1328 </div><div class="line"><span class="w"> </span><span class="k">positio… |
|
1329 </div><div class="line"><span class="w"> </span><span class="k">top</sp… |
|
1330 </div><div class="line"><span class="w"> </span><span class="k">right</… |
|
1331 </div><div class="line"><span class="w"> </span><span class="k">padding… |
|
1332 </div><div class="line"><span class="w"> </span><span class="k">border-… |
|
1333 </div><div class="line"><span class="w"> </span><span class="k">backgro… |
|
1334 </div><div class="line"><span class="w"> </span><span class="k">color</… |
|
1335 </div><div class="line"><span class="w"> </span><span class="k">font-si… |
|
1336 </div><div class="line"><span class="w"> </span><span class="k">font-we… |
|
1337 </div><div class="line"><span class="w"> </span><span class="k">content… |
|
1338 </div><div class="line"><span class="w"> </span><span class="k">white-s… |
|
1339 </div><div class="line"><span class="w"> </span><span class="k">z-index… |
|
1340 </div><div class="line"><span class="w"> </span><span class="k">margin-… |
|
1341 </div><div class="line"><span class="w"> </span><span class="k">line-he… |
|
1342 </div><div class="line"><span class="w"> </span><span class="k">transfo… |
|
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… |
|
1347 <p><code>placeholder</code> 的出現導致了大量不帶 <code><lab… |
|
1348 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1349 </div><div class="line"><span class="p"><</span><span class="nt">inpu… |
|
1350 </div></code></pre></div> |
|
1351 </div> |
|
1352 <p>對於視覺正常的人來說沒有問題，但是在讀屏軟件看… |
|
1353 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1354 </div><div class="line"><span class="p"><</span><span class="nt">inpu… |
|
1355 </div></code></pre></div> |
|
1356 </div> |
|
1357 <p>還有另外一種方案，使用 <code><label></code>，但是… |
|
1358 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1359 </div><div class="line"><span class="p"><</span><span class="nt">inpu… |
|
1360 </div></code></pre></div> |
|
1361 </div> |
|
1362 <p>使用 CSS 來隱藏 <code>.sr-only</code>(screen reader only) 這個… |
|
1363 <h2>索引</h2> |
|
1364 <p><code>aria-label</code> 理論上是作用於所有 tag 的，但是�… |
|
1365 <ul> |
|
1366 <li><a href="https://dev.opera.com/articles/ux-accessibility-aria-label/… |
|
1367 <li><a href="http://webaim.org/techniques/forms/advanced">http://webaim.… |
|
1368 <li><a href="http://www.deque.com/blog/text-links-practices-screen-reade… |
|
1369 <li><a href="http://www.w3.org/TR/2015/WD-aria-in-html-20150521/">http:/… |
|
1370 </ul> |
|
1371 <section class="footnotes"> |
|
1372 <ol> |
|
1373 <li id="fn-1"><p>Voice Over 是 Apple (Mac & iOS) 的讀屏軟件<a … |
|
1374 <li id="fn-2"><p>JAWS 是一個讀屏軟件，適用於 Windows<a href="… |
|
1375 <li id="fn-3"><p>NVDA 是一個開源讀屏軟件 <a href="http://www.nv… |
|
1376 </ol> |
|
1377 </section> |
|
1378 ]]></content:encoded></item><item><title><![CDATA[ 前端的基礎修�… |
|
1379 <p>這是「前端的基礎修養」系列文章的第一篇，單講 <a… |
|
1380 <p>Microdata 是 HTML5 引入的，是為機器而不是用戶所設計�… |
|
1381 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1382 <h2>Microdata 基礎</h2> |
|
1383 <p>Mircodata 主要用到這幾個 attributes 來標注信息：itemscop… |
|
1384 <p>包含 <strong>itemscope</strong> 這個 attribute 的 DOM 樹就是�… |
|
1385 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1386 </div><div class="line">... |
|
1387 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
1388 </div></code></pre></div> |
|
1389 </div> |
|
1390 <p>我們可以給這個事物定義一個類型，比如一本書，這… |
|
1391 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1392 </div><div class="line">... |
|
1393 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
1394 </div></code></pre></div> |
|
1395 </div> |
|
1396 <p>如上的代碼片斷，我們知道它是一本書了，但是它還… |
|
1397 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1398 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1399 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1400 </div><div class="line"> ... |
|
1401 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
1402 </div></code></pre></div> |
|
1403 </div> |
|
1404 <p>也許因為奇怪的設計方案，也許因為 PM 的無理取鬧�… |
|
1405 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1406 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1407 </div><div class="line"> ... |
|
1408 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
1409 </div><div class="line"> |
|
1410 </div><div class="line"><span class="cm"><!-- 因為某些原因，�… |
|
1411 </div><div class="line"><span class="p"><</span><span class="nt">div<… |
|
1412 </div><div class="line"><span class="p"><</span><span class="nt">div<… |
|
1413 </div></code></pre></div> |
|
1414 </div> |
|
1415 <p>Microdata 也定義了 DOM API，目前只有 Firefox 與 Opera 支�… |
|
1416 <div class="block-code" data-language="js"><div class="highlight"><pre><… |
|
1417 </div><div class="line"><span class="nb">document</span><span class="p">… |
|
1418 </div></code></pre></div> |
|
1419 </div> |
|
1420 <h2>Microdata 與 Schema.org</h2> |
|
1421 <p>Microdata 作為規範，定義好了語法，其中 <strong>itemtype… |
|
1422 <p>Schema.org 不是標準化組織，所做的卻是標準化的事情�… |
|
1423 <p>Schema.org 定義了<a href="http://schema.org/docs/full.html">許多… |
|
1424 <p>比如我們來賣個車看看：<a href="http://schema.org/Car">http… |
|
1425 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1426 </div><div class="line"> <span class="p"><</span><span class="nt">h2… |
|
1427 </div><div class="line"> <span class="p"><</span><span class="nt">p<… |
|
1428 </div><div class="line"> <span class="p"><</span><span class="nt">im… |
|
1429 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1430 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
1431 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
1432 </div><div class="line"> <span class="p"></</span><span class="nt">d… |
|
1433 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1434 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
1435 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
1436 </div><div class="line"> <span class="p"></</span><span class="nt">d… |
|
1437 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1438 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
1439 </div><div class="line"> <span class="p"><</span><span class="nt… |
|
1440 </div><div class="line"> <span class="p"><</span><span class="nt… |
|
1441 </div><div class="line"> <span class="p"></</span><span class="nt"… |
|
1442 </div><div class="line"> <span class="p"></</span><span class="nt">d… |
|
1443 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1444 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
1445 </div><div class="line"> <span class="p"><</span><span class="nt">… |
|
1446 </div><div class="line"> <span class="p"></</span><span class="nt">d… |
|
1447 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
1448 </div></code></pre></div> |
|
1449 </div> |
|
1450 <h2>RDFa, Microformats 與 JSON-LD</h2> |
|
1451 <p>結構化數據在 Microdata 出來之前就已經有了，比如 RDF… |
|
1452 <p>Schema.org 的示例通常包含 Microdata，RDFa 與 JSON-LD 格式�… |
|
1453 <p>Microformats 已經十年了，這是一套使用 class 輔以其它�… |
|
1454 <div class="block-code" data-language="html"><div class="highlight"><pre… |
|
1455 </div><div class="line"> <span class="p"><</span><span class="nt">h1… |
|
1456 </div><div class="line"> <span class="p"><</span><span class="nt">di… |
|
1457 </div><div class="line"> ... |
|
1458 </div><div class="line"><span class="p"></</span><span class="nt">div… |
|
1459 </div></code></pre></div> |
|
1460 </div> |
|
1461 <p>JSON-LD 誕生的時間更晚，是一套使用 JSON 格式標注數�… |
|
1462 <h2>Microdata & Schema.org 的現狀與未來</h2> |
|
1463 <p>目前 Google, Bing, Yandex, Yahoo! 都支援 Microdata，但是進�… |
|
1464 <p>各個搜索引擎商的接入文檔：</p> |
|
1465 <ol> |
|
1466 <li><a href="https://developers.google.com/structured-data/">https://dev… |
|
1467 <li><a href="http://www.bing.com/webmaster/help/marking-up-your-site-wit… |
|
1468 <li><a href="https://help.yandex.com/webmaster/microdata/what-is-microda… |
|
1469 <li><a href="https://help.yandex.com/webmaster/schema-org/what-is-schema… |
|
1470 </ol> |
|
1471 <p>結構化的數據不僅僅能被這些 Web 搜索引擎使用，還�… |
|
1472 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1473 <p>再次詢問 Siri 附近吃飯的地方，返回了大眾點評的數… |
|
1474 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1475 <p>因為沒有 Android 與 Windows 手機，無法展示 Google Now 與… |
|
1476 <p>結構化的數據在未來相當有吸引力，方便未來的各種… |
|
1477 <p>目前正在應用的點有很多，比如日曆、地圖、郵件等… |
|
1478 <p>寫作此篇時發現國內不少網站已經在應用 Microdata 了�… |
|
1479 <h2>索引</h2> |
|
1480 <ul> |
|
1481 <li>Microdata: <a href="http://www.w3.org/TR/microdata/">http://www.w3.o… |
|
1482 <li>JSON-LD: <a href="http://www.w3.org/TR/json-ld/">http://www.w3.org/T… |
|
1483 <li>RDFa: <a href="http://www.w3.org/TR/xhtml-rdfa-primer/">http://www.w… |
|
1484 <li>Microformats: <a href="http://microformats.org/">http://microformats… |
|
1485 <li>Embed Schemas in Emails: <a href="https://developers.google.com/sche… |
|
1486 </ul> |
|
1487 ]]></content:encoded></item><item><title><![CDATA[ 戴珍珠耳環的�… |
|
1488 <p>然而我並不想談書。這部虛構的小說巧妙地將 Vermeer … |
|
1489 <p>他們聊天時這樣描述：</p> |
|
1490 <div class="blockquote"><blockquote><p>我們看到一幅畫，畫著台… |
|
1491 而且顔料中混了沙子，使磚牆和屋頂看起來有粗糙的感… |
|
1492 水面上有長長的倒影，幾個小小的人站在河岸邊，離我… |
|
1493 </blockquote></div> |
|
1494 <p>只是簡單幾句，沒有畫家想要表達什麼，單純地覺得… |
|
1495 <p>我欣賞古典的畫作、音樂、詩歌，因爲他們真誠，因… |
|
1496 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1497 <p>第一眼望過去時，總免不了自作多情地覺得少女正看… |
|
1498 <p>偶爾想到最初的畫作會不會不是黑色的背景，像 Verme… |
|
1499 <p>等到看到書的很後面時，書裏描寫的彷彿一開始便是… |
|
1500 <p>他後來也有純黑背景的作品，但是《戴珍珠耳環的少… |
|
1501 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1502 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1503 ]]></content:encoded></item><item><title><![CDATA[ 青島小住 ]]></ti… |
|
1504 <p>年後回上海，短暫待了幾天就逃到北京去了，在公司… |
|
1505 <p>第一次來青島還是大一的暑假，那時是第一次出省，… |
|
1506 <p>阿姨家在海邊，出了小區走幾步便到海岸線了。青島… |
|
1507 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16685… |
|
1508 <p>工作日的早晨，一般七點多起牀，看 Slack 上只有 slac… |
|
1509 <p>要做的事情很明確的時候，寫代碼就成了一種享受。… |
|
1510 <p>這些天的天氣並不好，海上霧氣一直很濃。後來下了… |
|
1511 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16673… |
|
1512 <p>這個時節頗多海鷗，可是沒有長焦鏡頭，相機與手機… |
|
1513 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16685… |
|
1514 <p>還沒到旅遊旺季，海邊的遊客很少，多是本地住戶。… |
|
1515 <p><a class="img-link" href="https://www.flickr.com/photos/lepture/16705… |
|
1516 <p>夜晚的時候，坐了一天也腰酸背痛了，需要運動運動… |
|
1517 <p>[<img src="https://i.typlog.com/lepture/z_17529349ac7f5b2a8477c28829b… |
|
1518 <p>最近正在玩 <a href="https://www.duolingo.com/lepture">Duolingo</… |
|
1519 <p>青島小住，工作日的一天大抵如此。</p> |
|
1520 <p>這段時間裏開始整理 Flickr 了，打算照片用 Flickr 來�… |
|
1521 <p>[6]: <a href="https://www.flickr.com/photos/lepture/16685096857/">htt… |
|
1522 ]]></content:encoded></item><item><title><![CDATA[ 東北偏北，漠�… |
|
1523 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1524 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1525 <p>這一天都是在交通工具上度過的。火車到達漠河後，… |
|
1526 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1527 <p>上午的時光都在北極村的各處景點閒逛，拍拍照。跑… |
|
1528 <p>中午便趕到龍江第一灣，其時已經餓透了，在東北唯… |
|
1529 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1530 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1531 <p>日間行車已經過於驚心了，不曾想夜間更是動魄。公… |
|
1532 <p>其間便出了一次意外，沒有匯車線，我們的車開到了… |
|
1533 <p>車到最北點時已經黑得不像樣了。有一個石塊落在這… |
|
1534 <hr /> |
|
1535 <p>北紅村是個沒有 Wi-Fi 的小村子。吃過晚飯後，大家�… |
|
1536 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1537 <p>五，四，三，二，一。一束光射向天空，訇然迸裂，… |
|
1538 <p>去看他們的拍照，雖然精心準備了，結果沒有出彩的… |
|
1539 <hr /> |
|
1540 <p>次日的行程，到白樺林，我終於使用上了我的相機。… |
|
1541 <div class="gallery"><div class="gallery_column"><figure><picture><sourc… |
|
1542 <p>「雪依然在下，那天空依然安祥，年輕的人們，消失… |
|
1543 <hr /> |
|
1544 <p>我沒有記日記的習慣，遊記又總是拖著，等到快要忘… |
|
1545 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1546 <div class="photo"><figure><picture><source srcset="https://i.typlog.com… |
|
1547 ]]></content:encoded></item><item><title><![CDATA[ Google 的初見面 … |
|
1548 <p>一直到大學前，電腦也只是另一種形式的遊戲機。我… |
|
1549 <p>大學時選了圖書館的一門選修課，本來的課程名字已… |
|
1550 <p>講課的是一位女老師，上了一點年紀，現在想來就覺… |
|
1551 <p>這是我第一次聽說 Google，知道它是一個數字，是 10 �… |
|
1552 <p>課程的內容現在有部分已經過時了，比如<a href="http:/… |
|
1553 <p>作爲一門選修課，一門有學分的課，自然不會這樣簡… |
|
1554 <p>圖書館的電腦對上網是有管控的，只能訪問教育網內… |
|
1555 <p>後來又發現了 Google 的翻譯服務，可以輸入一個網址�… |
|
1556 <p>過了一段時間 Google 的賬戶頁面出現了已開啓的服務�… |
|
1557 <p>那個時候已經有 GFW 了，可是直到大二下學期時，我�… |
|
1558 <p>現在 Google 完全無法訪問了，也不知道圖書館的這門�… |
|
1559 <p>猶記得第一堂課時，老師講我們現在是信息時代，講… |
|
1560 ]]></content:encoded></item><item><title><![CDATA[ 看不懂的文字 ]… |
|
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>這是「為你寫詩」的第一篇，記錄每一次的靈感。本… |
|
1583 ]]></content:encoded></item><item><title><
