-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
243 lines (214 loc) · 42.6 KB
/
index.html
File metadata and controls
243 lines (214 loc) · 42.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>Thomas Blog</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="Thomas Blog RSS Feed" href="/api/rss.xml">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-704JZ9KNS1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-704JZ9KNS1');
</script>
<script type="module" crossorigin="" src="/assets/index-BuaHOq7Q.js"></script>
<link rel="stylesheet" crossorigin="" href="/assets/index-mVzQNABK.css">
<style>[_nghost-ng-c3984273398] { display: block; }</style><style>[_nghost-ng-c1425333472] {
--bg: #ffffff;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--link: #2563eb;
display: block;
min-height: 100vh;
background: var(--bg);
color: var(--text);
}
[data-theme='dark'][_nghost-ng-c1425333472] {
--bg: #0b0f1a;
--text: #e5e7eb;
--muted: #94a3b8;
--border: #1f2937;
--link: #60a5fa;
}
header[_ngcontent-ng-c1425333472] {
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
backdrop-filter: saturate(180%) blur(8px);
background: color-mix(in oklab, var(--bg) 85%, transparent);
width: 100vw;
left: 0;
}
.nav-wrap[_ngcontent-ng-c1425333472] {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
padding: 1rem 2rem 1rem 2rem;
}
nav[_ngcontent-ng-c1425333472] {
display: flex;
gap: 1rem;
align-items: center;
}
nav[_ngcontent-ng-c1425333472] a[_ngcontent-ng-c1425333472] {
padding: 0.5rem 0.25rem;
text-decoration: none;
color: var(--text);
border-bottom: 2px solid transparent;
font-size: 1.08rem;
}
nav[_ngcontent-ng-c1425333472] a.active[_ngcontent-ng-c1425333472] {
border-bottom-color: var(--link);
color: var(--link);
}
.theme-toggle[_ngcontent-ng-c1425333472] {
margin-left: 1.5rem;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
padding: 0.4rem 0.7rem;
border-radius: 6px;
cursor: pointer;
}
.theme-toggle[_ngcontent-ng-c1425333472]:focus-visible {
outline: 2px solid var(--link);
outline-offset: 2px;
}
main[_ngcontent-ng-c1425333472] {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
min-height: 70vh;
}
.main-inner[_ngcontent-ng-c1425333472] {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 1rem 2rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
footer[_ngcontent-ng-c1425333472] {
border-top: 1px solid var(--border);
margin-top: 2rem;
padding: 2rem 1rem;
text-align: center;
color: var(--muted);
}
@media (max-width: 640px) {
nav[_ngcontent-ng-c1425333472] { flex-wrap: wrap; }
.theme-toggle[_ngcontent-ng-c1425333472] { margin-left: 0; }
}</style><style>[_nghost-ng-c1189003775] { display: block; }
.muted[_ngcontent-ng-c1189003775] { color: var(--muted); }
.hero-fullwidth[_ngcontent-ng-c1189003775] {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-bottom: 2rem;
}
.hero[_ngcontent-ng-c1189003775] {
width: 100%;
}
.hero__media[_ngcontent-ng-c1189003775] {
width: 100%;
display: flex;
}
.hero__media[_ngcontent-ng-c1189003775] img[_ngcontent-ng-c1189003775] {
width: 100%;
height: auto;
aspect-ratio: 16/5;
object-fit: cover;
display: block;
}
.hero__content[_ngcontent-ng-c1189003775] {
text-align: center;
margin-bottom: 2.5rem;
padding: 0 1rem;
}
.hero__content[_ngcontent-ng-c1189003775] h1[_ngcontent-ng-c1189003775] {
margin: 0 0 0.5rem;
}
.list[_ngcontent-ng-c1189003775] { display: grid; gap: 1.5rem; }
article[_ngcontent-ng-c1189003775] {
padding: 1.2rem;
border: 1px solid var(--border);
border-radius: 10px;
background: color-mix(in oklab, var(--bg) 95%, transparent);
}
.post__title[_ngcontent-ng-c1189003775] {
margin: 0 0 0.25rem;
font-size: 2.1rem;
font-weight: 700;
line-height: 1.18;
}
.post__title[_ngcontent-ng-c1189003775] a[_ngcontent-ng-c1189003775] {
color: var(--text);
text-decoration: none;
transition: color 0.2s;
}
.post__title[_ngcontent-ng-c1189003775] a[_ngcontent-ng-c1189003775]:hover {
color: var(--link);
}
.post__date[_ngcontent-ng-c1189003775] {
color: var(--muted);
font-size: 1.15rem;
margin-bottom: 0.5rem;
margin-left: 0.1em;
}
.post__desc[_ngcontent-ng-c1189003775] { margin: 0; color: var(--muted); }
.post__tags[_ngcontent-ng-c1189003775] {
margin-top: 1rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tag[_ngcontent-ng-c1189003775] {
font-size: 0.9rem;
padding: 0.2rem 0.6rem;
background-color: var(--border);
border-radius: 4px;
text-decoration: none;
color: var(--text);
transition: background-color 0.2s;
}
.tag[_ngcontent-ng-c1189003775]:hover {
background-color: var(--muted);
color: white;
}
.read-more[_ngcontent-ng-c1189003775] {
display: inline-block;
margin-top: 1rem;
color: var(--link);
font-weight: 500;
text-decoration: none;
}
.read-more[_ngcontent-ng-c1189003775]:hover {
text-decoration: underline;
}
@media (min-width: 768px) {
.hero__media[_ngcontent-ng-c1189003775] img[_ngcontent-ng-c1189003775] {
aspect-ratio: 16/5;
}
}
@media (max-width: 600px) {
.hero__media[_ngcontent-ng-c1189003775] img[_ngcontent-ng-c1189003775] {
aspect-ratio: 16/7;
}
}</style></head>
<body><!--nghm-->
<app-root ng-version="21.0.1" _nghost-ng-c3984273398="" ngh="2" ng-server-context="ssr-analog"><app-layout _ngcontent-ng-c3984273398="" _nghost-ng-c1425333472="" data-theme="light" ngh="1"><header _ngcontent-ng-c1425333472=""><div _ngcontent-ng-c1425333472="" class="nav-wrap"><nav _ngcontent-ng-c1425333472="" aria-label="Primary"><div _ngcontent-ng-c1425333472="" id="docsearch"></div><a _ngcontent-ng-c1425333472="" routerlink="/" routerlinkactive="active" href="/" class="active" jsaction="click:;">Blog</a><a _ngcontent-ng-c1425333472="" routerlink="/tags" routerlinkactive="active" href="/tags" class="" jsaction="click:;">Tags</a><a _ngcontent-ng-c1425333472="" routerlink="/about" routerlinkactive="active" href="/about" class="" jsaction="click:;">About</a><button _ngcontent-ng-c1425333472="" type="button" class="theme-toggle" aria-pressed="false" jsaction="click:;"> Light </button></nav></div></header><main _ngcontent-ng-c1425333472=""><div _ngcontent-ng-c1425333472="" class="main-inner"><router-outlet _ngcontent-ng-c1425333472=""></router-outlet><app-home _nghost-ng-c1189003775="" ngh="0"><div _ngcontent-ng-c1189003775="" class="hero-fullwidth"><section _ngcontent-ng-c1189003775="" aria-labelledby="hero-title" class="hero"><div _ngcontent-ng-c1189003775="" class="hero__media"><img _ngcontent-ng-c1189003775="" ngsrc="/images/bgBlog.png" width="1200" height="400" alt="Blog banner image" priority="" loading="eager" fetchpriority="high" decoding="sync" ng-img="true" src="/images/bgBlog.png"></div></section></div><div _ngcontent-ng-c1189003775="" class="hero__content"><h1 _ngcontent-ng-c1189003775="" id="hero-title">Thomas Blog</h1><p _ngcontent-ng-c1189003775="" class="muted">分享程式設計、工具與開發心得，保持持續學習。</p></div><section _ngcontent-ng-c1189003775="" aria-labelledby="articles-title"><h2 _ngcontent-ng-c1189003775="" id="articles-title">全部文章</h2><div _ngcontent-ng-c1189003775="" class="list"><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2026-03-29-angular-Httpresource" jsaction="click:;">Angular HttpResource</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2026-03-29</div><p _ngcontent-ng-c1189003775="" class="post__desc">Angular 在19之後推出的新功能，基於 Signal 的新功能：`httpResource`，它將原本的 `HttpClient` 進行了封裝，並內建了三種核心狀態：`isLoading`、`hasValue` 與 `error`，之前版本需要另外實作的功能，目前已成為內建標準</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/Angular" jsaction="click:;">Angular</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2026-03-29-angular-Httpresource" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2025-11-17-tsed-middleware" jsaction="click:;">Ts.ED 設定 middleware</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2025-11-17</div><p _ngcontent-ng-c1189003775="" class="post__desc">之前的文章介紹過 Ts.ED，它是一個建構在 express.js 或是 koa.js 之上，並添加許多便利功能的 TypeScript 框架。最近在設定自訂 middleware 時，我發現了一個不錯的作法，特此記錄下來。 根據官方文件，middleware 分為 Global middlewar</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/typescript" jsaction="click:;">Typescript</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2025-11-17-tsed-middleware" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2025-08-24-zen-browser" jsaction="click:;">Zen Browser小小心得</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2025-08-24</div><p _ngcontent-ng-c1189003775="" class="post__desc">最近瀏覽 daily.dev 上的文章時，偶然發現一款名為 Zen Browser 的瀏覽器。它不僅結合了其他瀏覽器的特色，更特別的是以 Firefox 為核心開發。身為 Firefox 的長期用戶，我立刻感到好奇並下載試用。隨著使用時間拉長，我越來越覺得它得心應手，甚至將其設為我的預設瀏覽器。因此</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2025-08-24-zen-browser" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2025-03-16-useful-web-sites" jsaction="click:;">開發程式中一些有用的網站</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2025-03-16</div><p _ngcontent-ng-c1189003775="" class="post__desc">隨著 IT 技術的快速發展，各種新的觀念和程式框架層出不窮，每年都有所更新。因此，我認為多閱讀一些文章是一個非常有效的方式。接下來，我想介紹兩個文章集合網站（Echo.js 和 Daily.dev）。此外，我還會分享一些我平常收集的工具類型網站。 Echo.js <img class="img-re</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2025-03-16-useful-web-sites" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2024-09-01-vs-code-extensions" jsaction="click:;">VSCode Extensions 其他的選擇</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2024-09-01</div><p _ngcontent-ng-c1189003775="" class="post__desc">這次我要跟大家分享一些我覺得很好用的 VSCode 擴充套件。這些套件可能不太熱門，但我覺得它們非常實用。當然，我們都知道像 ESLint 和 GitLens 這樣的知名套件，所以我不會再提到它們了。請大家參考看看。 Separators <img class="img-responsive" lo</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/vscode" jsaction="click:;">Vscode</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2024-09-01-vs-code-extensions" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2024-07-14-firtst-step-bulma" jsaction="click:;">Bulma的初體驗</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2024-07-14</div><p _ngcontent-ng-c1189003775="" class="post__desc">最近對一款 CSS 框架 Bulma 產生了興趣，發現它的開發者體驗（DX）非常出色，使用起來比 Bootstrap 更直觀。前不久，它推出了 1.0 版本，因此我想撰寫一篇心得文，稍微介紹一下。 使用 要引用`Bulma`，最簡單的方式，就是在頁面上使用 CDN 連結。 ```html <link</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/typescript" jsaction="click:;">Typescript</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2024-07-14-firtst-step-bulma" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2023-12-29-turorial-of-commnad-line" jsaction="click:;">.NET 好用套件 - commandline</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2023-12-29</div><p _ngcontent-ng-c1189003775="" class="post__desc">在.NET Framework 的時候，沒有內建的 CLI 指令參數解析，再到.NET Core 時，雖然有個套件System.CommandLine，但覺得沒有很好使用，之前有發現一個套件 commandline，設定及讀取參考很簡單易用，寫篇心得文分享一下。 設定 ```csharp publi</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2023-12-29-turorial-of-commnad-line" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2023-08-27-angular-on-changes" jsaction="click:;">Angular判斷 DOM Render 是否完成</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2023-08-27</div><p _ngcontent-ng-c1189003775="" class="post__desc">最近有遇到一個需求，是判斷頁面的捲軸是否到底，但有個不一様的點是會開啟 Dialog 後，才動態戴入內容再判斷捲軸是否到底，也就是需要判斷 DOM 是否 戴入完成，但碰到難題，Angular 並沒有像是 Vue.js 般有` $trick`方法，可以得知 Dom render 已完成。當查看 Sta</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/angular" jsaction="click:;">Angular</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2023-08-27-angular-on-changes" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2023-05-24-expressjs-typescript-tsed" jsaction="click:;">使用TypeScript建立Express.js-使用Ts.ED</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2023-05-24</div><p _ngcontent-ng-c1189003775="" class="post__desc">之前有寫過一篇文章使用 TypeScript 建立 Express.js，介紹了 routing-controllers，可以將 `TypeScipt` 與 `Express.js`整合，並使用 Controller 的方式建立 `Express.js`，然而發現套件更新有點緩慢，最近在該專案的Gi</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/typescript" jsaction="click:;">Typescript</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/javascript" jsaction="click:;">Javascript</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/express" jsaction="click:;">Express</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2023-05-24-expressjs-typescript-tsed" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2023-02-06-slidev" jsaction="click:;">建立簡報的工具 - Slidev 的介紹</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2023-02-06</div><p _ngcontent-ng-c1189003775="" class="post__desc">去年(2022 年) 11 月的時候，需要建立簡報向同事介紹 Angular 基礎，之前都是使用 Google 簡報或是 PowerPoint 來製作，但是發現有個缺點，對程式碼不夠有善。接著我想起在 GitHub Stars 中儲存一些簡報用的專案，其中發現 Slidev ，覺得簡單易用，就決定採</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2023-02-06-slidev" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2022-09-08-angular-typeform" jsaction="click:;">Angular TypeForm - 強型別Form的心得</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2022-09-08</div><p _ngcontent-ng-c1189003775="" class="post__desc">2024-11-10 更新：增加 FormBuild.group 和 class-validator 的程式說明 <hr 在 Angular v14 中最重要的 2 個功能，除了 Single Component 之外，就是 Typeform 了，而 Typeform 也就是在建立 Form 功能時</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/angular" jsaction="click:;">Angular</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2022-09-08-angular-typeform" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2022-05-20-window-teminal-and-oh-my-posh" jsaction="click:;">我的Terminal 設定方式 - Windows Terminal & ohmyposh</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2022-05-20</div><p _ngcontent-ng-c1189003775="" class="post__desc">一直以來都是使用 IDE 來開發程式，自從進入前端世界後，開始很常使用 CLI ，而 Windows 的 terminal 一直不是很好使用，直到 Windows Terminal 的出現。 Windows Terminal 整合 cmd、PowerShell，並可 以自定樣式，但是還是希望和 oh</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2022-05-20-window-teminal-and-oh-my-posh" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2021-12-09-tutorial-of-tsdx" jsaction="click:;">tsdx - 快速建立 npm 套件樣板的CLI工具</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2021-12-09</div><p _ngcontent-ng-c1189003775="" class="post__desc">之前的文章使用 TypeScript 建立 Express.js，需要快速建立 npm 套件，所以在 GitHub 上尋找有沒有方便的套件，結果發現到了 tsdx，這個方便的 CLI 工具。 建立 ``` npx tsdx create mylib ``` 按照文件的說明，直接執行`npx tsdx</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/typescript" jsaction="click:;">Typescript</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2021-12-09-tutorial-of-tsdx" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2021-09-20-netlify-function-tutorial" jsaction="click:;">Netlify functions 初體驗記錄</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2021-09-20</div><p _ngcontent-ng-c1189003775="" class="post__desc">一直以來斷斷續續接獨 Servless funcion 的服務，從 FireBase 到 Azure 都有，但是一些原因，而覺得沒有符合我的需求，直到前一陣子，我嘗試使用 Netlify functions ，發現簡單易用，並且也整合 CI/CD ，如果想整合至舊有專案也是挻方便的，就想寫篇文章做個</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2021-09-20-netlify-function-tutorial" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2021-08-07-codewars" jsaction="click:;">CodeWars - Coding Challenge Site</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2021-08-07</div><p _ngcontent-ng-c1189003775="" class="post__desc">一般說來，剛剛學習一門程式語言，或是學習一段時間後，除了建立 Side Project 之外，也可以至一些網站練習程式，而之前在 Twitter 上發現有人 PO 出 Coding challenge 的列表，其中有個網站CodeWars，嘗試了一陣子之後覺得很不錯，想說寫篇心得文分享。 <a hr</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2021-08-07-codewars" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2021-06-12-air-table-with-dotnet-core" jsaction="click:;">將AirTable做為資料庫的心得 - .NET Core 篇</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2021-06-12</div><p _ngcontent-ng-c1189003775="" class="post__desc">我在上一篇的文章將 AirTable 做為資料庫的心得，有寫到：我為什麼使用 AirTable 當作資料庫，以及優、缺點，並且環境是 Node.js ，語言是 TypeScript ，而這次想要使用 .NET Core 、 C來改寫。 串接 AirTable <img class="img-resp</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/dotnet" jsaction="click:;">Dotnet</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2021-06-12-air-table-with-dotnet-core" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2021-04-24-airtable-as-database" jsaction="click:;">將AirTable做為資料庫的心得</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2021-04-24</div><p _ngcontent-ng-c1189003775="" class="post__desc">當開始寫自已的 Side Project 時，常常遇到問題是，不知道要將資料寫入至那裡?最初是使用restdb，優點：很好串接，有 UI 介面很好設定，但是只能有 2 個免費的資料庫。 之後尋找了一些解決方案，發現AirTable符合我的需求。 優點： 有 UI 介面，可以很方便設定欄位。 欄位支援</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2021-04-24-airtable-as-database" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2021-02-07-expressjss-with-typescript" jsaction="click:;">使用TypeScript建立Express.js</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2021-02-07</div><p _ngcontent-ng-c1189003775="" class="post__desc">(2021-04-26 更新)service class 注入，@Inject 改為 @Service。 Express.js 是很受歡迎的 Node.js 框架，一般看來，比較少文章介紹使用 TypeScript 建立 Express.js，所以就想寫篇使用 TypeScript 建立 Expre</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/typescript" jsaction="click:;">Typescript</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/javascript" jsaction="click:;">Javascript</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/express" jsaction="click:;">Express</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2021-02-07-expressjss-with-typescript" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2020-09-05-introducing-daily-dev" jsaction="click:;">daily.dev - 整合各個技術文章的好用套件</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2020-09-05</div><p _ngcontent-ng-c1189003775="" class="post__desc">2025/03/16 重新改寫 我常常早上都會看一些技術文章，最近這幾年都是使用daily.dev 來閱讀文章。這個網站結合了各類文章，不只有網站，還有 Android 及 IOS 的 APP 可以使用，分享給大家參考看看。 <img class="img-responsive" loading="</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2020-09-05-introducing-daily-dev" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2020-08-03-build-blog-using-scully" jsaction="click:;">使用 Angular Static Generator - Scully 建立Blog的心得記錄</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2020-08-03</div><p _ngcontent-ng-c1189003775="" class="post__desc">2022/09/09 更新：程式碼著色，改為 `prismjs` 一直以來 Angular 缺 Static Site Generator，像是 Vue.js 有 Nuxt.js，而 React.js 也有 Gatsby.js，終於 Angular 也出了 Static Site Generator</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2020-08-03-build-blog-using-scully" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2020-07-05-angular-library" jsaction="click:;">6個推薦的Angular Library</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2020-07-05</div><p _ngcontent-ng-c1189003775="" class="post__desc">除了一些有名的 Library 之外，例如：Angular material，還有一些不為人知的 Library，我平常都會對有興趣的 Angular Library，加上星星加以儲藏，其中有使用過，有些覺得很不錯的想推薦給大家。 1. ngx-loading <img class="img-res</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/angular" jsaction="click:;">Angular</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2020-07-05-angular-library" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2020-03-13-class-validator-and-ngx-dynamic-form-builder" jsaction="click:;">class-validator & ngx-dynamic-form-builder</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2020-03-13</div><p _ngcontent-ng-c1189003775="" class="post__desc">資料驗證是常常碰到的議題，一般說來，前端及後端都要驗證，但常常是前端驗證要寫一套，後端又要寫另一套，不太能共用。JavaScript 的世界也是如此，都會做重工。之前發現套件class-validator，使用 decorator 來設定要驗證的項目，並且是用 Angular 的話，搭配使用ngx-</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2020-03-13-class-validator-and-ngx-dynamic-form-builder" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2019-11-30-svg-and-angular" jsaction="click:;">SVG與Angular</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2019-11-30</div><p _ngcontent-ng-c1189003775="" class="post__desc">處理 SVG 已經是前端常常會遇到的事情，現在很多頁面上的圖片都是用 SVG 來取代，而 SVG 的優點這裡就不多述說。這邊提供我處理 SVG 的一些心得。 icon 資源 想要免費並且可以編輯的 icon 資源，我尋找了很久，最後發現iconify.design這個網站，它的 GitHub 星星數</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/angular" jsaction="click:;">Angular</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2019-11-30-svg-and-angular" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2019-09-01-tutorial-of-vscode-extension" jsaction="click:;">VSCode Extension的開發心得</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2019-09-01</div><p _ngcontent-ng-c1189003775="" class="post__desc">[2020/08/29 更新：加上 package.json 的設定] 前一陣子，開發了產生 README.md 的 VSCode Readme Pattern，如何大家還沒安裝的話，可以試試看。在開發中，有遇到一些問題，以及累積了一些心得，分享給的大家。 初始 首先按照官方文件，需要先安裝Yeom</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/vscode" jsaction="click:;">Vscode</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2019-09-01-tutorial-of-vscode-extension" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2019-06-16-tutorial-of-uppy" jsaction="click:;">Uppy - 最方便的上傳套件</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2019-06-16</div><p _ngcontent-ng-c1189003775="" class="post__desc">一直以來，我都覺得上傳檔案的程式開發，是表單處理中的痛點，一般的&lt;input type="file" />的功能比較簡略，介面不甚美觀。之前有發現 Uppy 這個套件，就對它感興趣，現在已經出了 1.0 版，想寫篇文章記錄一下心得。 這篇的文章的原始碼在這邊ngx-uppy-demo 安裝 `</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2019-06-16-tutorial-of-uppy" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2019-02-20-create-library-with-angular" jsaction="click:;">於Angular中，建立Library的心得</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2019-02-20</div><p _ngcontent-ng-c1189003775="" class="post__desc">在 Angular CLI 6.0 以上就可以直接建立 Library，而 Library 的用途可以將自已建立的元件發佈至 NPM，或是專案一些共同的元件拆分出去。 建立 Library ``` ng new ngx-lib-demo ng g library shared-comp ``` 先使</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/angular" jsaction="click:;">Angular</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2019-02-20-create-library-with-angular" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2018-12-23-module-pattern-part2" jsaction="click:;">談談JavaScript Module part2</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2018-12-23</div><p _ngcontent-ng-c1189003775="" class="post__desc">這篇會繼續上篇的主題：Module，這篇會講述 ES6（ES2015）Module 寫法，而上一篇是談談 JavaScript Module part1。 Module 建立 ```javascript export const message = 'Hello'; export function </p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2018-12-23-module-pattern-part2" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2018-10-31-module-pattern" jsaction="click:;">談談JavaScript Module part1</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2018-10-31</div><p _ngcontent-ng-c1189003775="" class="post__desc">這次想談談模組(Module)，是 JavaScript 的設計模式的其中的一個，一般而言，我們都會希望程式有架構，被重覆使用，這時可以將程式分成一個個的模組，會用兩篇文章討論這個主題，這一篇是講述 Module pattern，下一篇會講述 ES2015 module。 Module patter</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2018-10-31-module-pattern" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2018-09-07-tutorial-of-draxtjs" jsaction="click:;">draxt.js-簡化存取檔案的小幫手</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2018-09-07</div><p _ngcontent-ng-c1189003775="" class="post__desc">Node.js 處理檔案我個人覺得不是很方便，有時候會覺得卡卡的。之前有發現 Node.js 套件draxt.js，它封裝了glob和fs-extra這兩個套件，並提供類似 jQuery 的語法，讓檔案的處理變簡單了。 因為我的 Blog 是分成兩個專案，一個是開發使用，一個是實際 Blog 的網站</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/javascript" jsaction="click:;">Javascript</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2018-09-07-tutorial-of-draxtjs" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2018-08-12-example-of-promise" jsaction="click:;">從範例講解Promise概念</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2018-08-12</div><p _ngcontent-ng-c1189003775="" class="post__desc">一般而言，呼叫多個 ajax，最簡單的方式是用 callback 函式，如以下的範例 執行完 1 個 ajax 之後，再執行另一個 ajax。 <iframe width="100%" height="300" src="//jsfiddle.net/thomascsd/ut3cv27k/embed</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2018-08-12-example-of-promise" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2018-06-23-nuxtjs-and-nuxtent" jsaction="click:;">使用Nuxt.js及Nuxtent建立Blog的心得</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2018-06-23</div><p _ngcontent-ng-c1189003775="" class="post__desc">Nuxt.js 是內建 SSR 的 vue.js 框架，我最感興趣的部份是可輸出靜態的 Html，如此就可以輕鬆的將程式部署至 GitHub Page 上，並且可以使用 module 來擴充功能。 當我看到了 Nuxtent 這個 module，它是可以取得 Markdown 內容的 module，</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/javascript" jsaction="click:;">Javascript</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2018-06-23-nuxtjs-and-nuxtent" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2017-12-23-vscode-debug-for-nodejs-andn-agular" jsaction="click:;">使用VSCode偵錯Node.js及Angular的小技巧</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2017-12-23</div><p _ngcontent-ng-c1189003775="" class="post__desc">使用 Angular 後就迷上了 TypeScript，我有建立一個小專案叫做angular-express-starter，Server 及 Client 端都是使用 TypeScript 建立的，而 Client 端是使用 Angular CLI，然後 Server 端是使用 Express.j</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/vscode" jsaction="click:;">Vscode</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/javascript" jsaction="click:;">Javascript</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/nodejs" jsaction="click:;">Nodejs</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2017-12-23-vscode-debug-for-nodejs-andn-agular" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2017-10-08-vuejs-in-aspnet-mvc" jsaction="click:;">在asp.net MVC上使用vue.js需注意的事項</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2017-10-08</div><p _ngcontent-ng-c1189003775="" class="post__desc">最近開始使用 vue.js 在公司的專案上，並且專案是用 asp.net mvc 來開發的，所以發現在.cshtml 上無法使用 vue.js 的需要注意的小地方。 第 1 個是@click 之類的事件綁定簡寫方式，因為會和原本的 Razor 語法衝突，所以需要使用完整的寫法。 下列的語法會發生錯誤</p><div _ngcontent-ng-c1189003775="" class="post__tags"><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/javascript" jsaction="click:;">Javascript</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/dotnet" jsaction="click:;">Dotnet</a><a _ngcontent-ng-c1189003775="" class="tag" href="/tags/vue" jsaction="click:;">Vue</a><!----></div><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2017-10-08-vuejs-in-aspnet-mvc" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2017-07-13-build-blog-with-jekyll" jsaction="click:;">使用Jekyll建立Blog -1</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2017-07-13</div><p _ngcontent-ng-c1189003775="" class="post__desc">建立 Blog 的工具有很多，但是可以一鍵馬上完成架站及能夠完全客制化的工具就不多了，其中一個就是Jekyll。 但是 Jekyll 需要在本機安裝 Ruby 環境，這樣還是有點麻煩，還要先設定環境，之後我找到一個很方便的工具Jekyll-now，只要 Fork 就可以建立一個網站。 1.到Jeky</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2017-07-13-build-blog-with-jekyll" jsaction="click:;">Read More →</a></article><article _ngcontent-ng-c1189003775=""><h2 _ngcontent-ng-c1189003775="" class="post__title"><a _ngcontent-ng-c1189003775="" href="/blog/2017-06-20-hello-world" jsaction="click:;">Hello World!</a></h2><div _ngcontent-ng-c1189003775="" class="post__date">2017-06-20</div><p _ngcontent-ng-c1189003775="" class="post__desc">第一篇文章，談談為什麼想寫 Blog，有兩個原因： 第一是 ITHome 有個鐵人幫幫忙的活動，其中有人說工程師就是要建 Blog，所以開始建立自己的 Blog，順便練習 Angular。 第二點是看了我為什麼鼓勵工程師寫 blog | In 91，想說寫程式這樣久，也有些心得可以分享，並且也可當成</p><!----><a _ngcontent-ng-c1189003775="" class="read-more" href="/blog/2017-06-20-hello-world" jsaction="click:;">Read More →</a></article><!----></div></section></app-home><!----></div></main><footer _ngcontent-ng-c1425333472=""><small _ngcontent-ng-c1425333472="">© 2026 · Contact: <a _ngcontent-ng-c1425333472="" href="https://github.com/thomascsd" rel="noopener" target="_blank">GitHub</a></small></footer></app-layout></app-root>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script type="text/javascript" id="ng-event-dispatch-contract">(()=>{function p(t,n,r,o,e,i,f,m){return{eventType:t,event:n,targetElement:r,eic:o,timeStamp:e,eia:i,eirp:f,eiack:m}}function u(t){let n=[],r=e=>{n.push(e)};return{c:t,q:n,et:[],etc:[],d:r,h:e=>{r(p(e.type,e,e.target,t,Date.now()))}}}function s(t,n,r){for(let o=0;o<n.length;o++){let e=n[o];(r?t.etc:t.et).push(e),t.c.addEventListener(e,t.h,r)}}function c(t,n,r,o,e=window){let i=u(t);e._ejsas||(e._ejsas={}),e._ejsas[n]=i,s(i,r),s(i,o,!0)}window.__jsaction_bootstrap=c;})();
</script><script>window.__jsaction_bootstrap(document.body,"ng",["click"],[]);</script>
<script id="ng-state" type="application/json">{"__nghData__":[{"t":{"14":"t0"},"c":{"14":[{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1,"x":3}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1,"x":3}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1}]}}]}},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[{"i":"t1","r":1,"t":{"2":"t2"},"c":{"2":[{"i":"t2","r":1,"x":3}]}}]},"x":2},{"i":"t0","r":1,"t":{"8":"t1"},"c":{"8":[]},"x":2}]}},{"c":{"14":[{"i":"c1189003775","r":1}]}},{}]}</script></body></html>