-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (155 loc) · 18.5 KB
/
index.html
File metadata and controls
159 lines (155 loc) · 18.5 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
<!DOCTYPE html><html><head><link rel=manifest href=/manifest.json><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>StarBugs Weekly 星巴哥技術週刊</title><meta name="description" content=""><meta name="keywords" content="starbugs weekly"><meta name="author" content="StarBugs Weekly Editors"><meta name="copyright" content="StarBugs Weekly Editors"><meta name="format-detection" content="telephone=no"><link rel="shortcut icon" href="/img/favicon.ico"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="canonical" href="https://starbugs.dev/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="StarBugs Weekly 星巴哥技術週刊"><meta name="twitter:description" content=""><meta name="twitter:image" content="https://starbugs.dev/img/logo.jpg"><meta property="og:type" content="website"><meta property="og:title" content="StarBugs Weekly 星巴哥技術週刊"><meta property="og:url" content="https://starbugs.dev/"><meta property="og:site_name" content="StarBugs Weekly 星巴哥技術週刊"><meta property="og:description" content=""><meta property="og:image" content="https://starbugs.dev/img/logo.jpg"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="dns-prefetch" href="https://www.google-analytics.com"><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-151536743-1', 'auto');
ga('send', 'pageview');
</script><link rel="preload" href="/img/banner.jpeg" as="image"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web"><script>var GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: {"defaultEncoding":2,"translateDelay":0,"cookieDomain":"https://xxx/","msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
highlight_copy: 'false',
highlight_lang: 'true',
highlight_shrink: 'false',
copy: {
success: 'Copy successfully',
error: 'Copy error',
noSupport: 'The browser does not support'
},
bookmark: {
title: 'Bookmark',
message_prev: 'Press',
message_next: 'to bookmark this page'
},
runtime_unit: 'days',
copyright: undefined,
copy_copyright_js: false
}</script><link rel="alternate" href="/atom.xml" title="StarBugs Weekly 星巴哥技術週刊" type="application/atom+xml">
</head><body><div id="header"> <div id="page-header"><span class="pull-left" id="blog_name"><a class="blog_title" id="site-name" href="/">StarBugs Weekly 星巴哥技術週刊</a></span><i class="fa fa-bars fa-fw toggle-menu pull-right close" aria-hidden="true"></i><span class="pull-right menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="https://medium.com/starbugs" target="_blank" rel="noopener"><i class="fa-fw fa fa-medium"></i><span> 技術專欄</span></a></div><div class="menus_item"><a class="site-page" href="https://www.facebook.com/starbugsweekly" target="_blank" rel="noopener"><i class="fa-fw fa fa-facebook"></i><span> 粉絲專頁</span></a></div><div class="menus_item"><a class="site-page" href="/atom.xml"><i class="fa-fw fa fa-rss"></i><span> RSS</span></a></div><script>document.body.addEventListener('touchstart', function(){ });</script></div></span><span class="pull-right" id="search_button"></span></div></div><div id="mobile-sidebar"><div id="menu_mask"></div><div id="mobile-sidebar-menus"><div class="mobile_author_icon"><img class="lozad avatar_img" src="/img/logo.jpg" onerror="onerror=null;src='/img/friend_404.gif'"></div><div class="mobile_post_data"><div class="mobile_data_item is_center"><div class="mobile_data_link"><a href="/archives/"><div class="headline">Articles</div><div class="length_num">180</div></a></div></div><div class="mobile_data_item is_center"> <div class="mobile_data_link"><a href="/tags/"><div class="headline">Tags</div><div class="length_num">2</div></a></div></div></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="https://medium.com/starbugs" target="_blank" rel="noopener"><i class="fa-fw fa fa-medium"></i><span> 技術專欄</span></a></div><div class="menus_item"><a class="site-page" href="https://www.facebook.com/starbugsweekly" target="_blank" rel="noopener"><i class="fa-fw fa fa-facebook"></i><span> 粉絲專頁</span></a></div><div class="menus_item"><a class="site-page" href="/atom.xml"><i class="fa-fw fa fa-rss"></i><span> RSS</span></a></div><script>document.body.addEventListener('touchstart', function(){ });</script></div></div></div><div id="body-wrap"><div class="full_page" id="nav"><div class="nav_bg" style="background-image: url(/img/banner.jpeg)"></div><div id="site-info"><div id="site-title"><span class="blogtitle"><img class="bannerLogo" src="/img/logo.png"></span><!--= page.title || page.tag || page.category || config.title--></div><div id="site-sub-title" style="display: flex;justify-content: center;"><span class="subtitle" style="width: 75%; max-width: 900px; text-align: left;">StarBugs Weekly 由一群在星空般的 Bug 中求生存的開發者所創立的週刊。每週二我們會撰寫一篇原創文章與蒐集一系列國內外的好文與大家分享。內容包含 Web 前端、後端、DevOps、產品開發、專案管理 ... 等等，一切跟產品開發有關的知識。</span></div><div id="site-social-icons"><a class="social-icon" href="https://www.facebook.com/starbugsweekly" target="_blank"><i class="fa fa-facebook"></i></a><a class="social-icon" href="https://medium.com/starbugs" target="_blank"><i class="fa fa-medium"></i></a><a class="social-icon" href="/atom.xml" target="_blank"><i class="fa fa-rss"></i></a></div></div><div class="subscription"><span>SUBSCRIBE WITH MAIL</span><!--Zoho Campaigns Web-Optin Form Starts Here-->
<script type="text/javascript" src="https://zcsub-cmpzourl.maillist-manage.com/js/optin.min.js" onload="setupSF('sf3z342b3a93d283393efdaa180a2ac842e86a26a8e698e9f7562a3662a91314393c','ZCFORMVIEW',false,'light',false,'0')"></script>
<script type="text/javascript">
function runOnFormSubmit_sf3z342b3a93d283393efdaa180a2ac842e86a26a8e698e9f7562a3662a91314393c(th){
/*Before submit, if you want to trigger your event, "include your code here"*/
};
</script>
<style>
.SIGNUP_FLD {
display: inline-block;
}
#subscribe-button {
font-size: 13px;
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
letter-spacing: .03em;
color: #fff;
background: #E35751;
box-sizing: border-box;
height: 32px;
line-height: 32px;
padding: 0 18px;
display: inline-block;
margin: 0;
transition: all 0.23s ease-in-out 0s;
}
#EMBED_FORM_EMAIL_LABEL, #EMBED_FORM_NAME_LABEL {
font-family: "Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;
font-size: 15px;
border: 1px solid #ABB0B2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #343434;
background-color: #fff;
box-sizing: border-box;
height: 32px;
padding: 0px 0.4em;
display: inline-block;
margin: 0;
width: 250px;
vertical-align: middle;
}
#EMBED_FORM_NAME_LABEL{
width: 100px;
}
</style>
<div id="sf3z342b3a93d283393efdaa180a2ac842e86a26a8e698e9f7562a3662a91314393c" data-type="signupform">
<div id="customForm">
<div class="quick_form_5_css" name="SIGNUP_BODY">
<div>
<!-- <div id="SIGNUP_HEADING">Join Our Newsletter</div> -->
<div style="position:relative;">
<div id="Zc_SignupSuccess" style="display:none;position:absolute;margin-left:4%;width:90%;background-color: white; padding: 3px; border: 3px solid rgb(194, 225, 154); margin-top: 10px;margin-bottom:10px;word-break:break-all ">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="10%">
<img class="successicon" src="https://zcsub-cmpzourl.maillist-manage.com/images/challangeiconenable.jpg" align="absmiddle">
</td>
<td>
<span id="signupSuccessMsg" style="color: rgb(73, 140, 132); font-family: sans-serif; font-size: 14px;word-break:break-word"> Thank you for Signing Up</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<form method="POST" id="zcampaignOptinForm" action="https://zcsub-cmpzourl.maillist-manage.com/weboptin.zc" target="_zcSignup">
<!-- <div id="errorMsgDiv">Please correct the marked field(s) below.</div> -->
<!-- <div class="SIGNUP_FLD">
<input type="text" placeholder="Name" changeitem="SIGNUP_FORM_FIELD" name="LASTNAME" id="EMBED_FORM_NAME_LABEL">
</div> -->
<div class="SIGNUP_FLD">
<input type="text" placeholder="Email" changeitem="SIGNUP_FORM_FIELD" name="CONTACT_EMAIL" id="EMBED_FORM_EMAIL_LABEL">
</div>
<div class="SIGNUP_FLD">
<input id="subscribe-button" type="button" name="SIGNUP_SUBMIT_BUTTON" id="zcWebOptin" value="Subscribe">
</div>
<div>No spam, ever. We'll never share your address and you can opt out at any time</div>
<input type="hidden" id="fieldBorder" value="">
<input type="hidden" id="submitType" name="submitType" value="optinCustomView">
<input type="hidden" id="emailReportId" name="emailReportId" value="">
<input type="hidden" id="formType" name="formType" value="QuickForm">
<input type="hidden" name="zx" id="cmpZuid" value="1300df041">
<input type="hidden" name="zcvers" value="3.0">
<input type="hidden" name="oldListIds" id="allCheckedListIds" value="">
<input type="hidden" id="mode" name="mode" value="OptinCreateView">
<input type="hidden" id="zcld" name="zcld" value="">
<input type="hidden" id="zctd" name="zctd" value="">
<input type="hidden" id="document_domain" value="">
<input type="hidden" id="zc_Url" value="zcsub-cmpzourl.maillist-manage.com">
<input type="hidden" id="new_optin_response_in" value="0">
<input type="hidden" id="duplicate_optin_response_in" value="0">
<input type="hidden" name="zc_trackCode" id="zc_trackCode" value="ZCFORMVIEW">
<input type="hidden" id="zc_formIx" name="zc_formIx" value="3z342b3a93d283393efdaa180a2ac842e86a26a8e698e9f7562a3662a91314393c">
<input type="hidden" id="viewFrom" value="URL_ACTION">
<span style="display: none" id="dt_CONTACT_EMAIL">1,true,6,Contact Email,2</span>
<span style="display: none" id="dt_FIRSTNAME">1,false,1,First Name,2</span>
<span style="display: none" id="dt_LASTNAME">1,false,1,Last Name,2</span>
</form>
</div>
</div>
</div>
<img src="https://zcsub-cmpzourl.maillist-manage.com/images/spacer.gif" id="refImage" onload="referenceSetter(this)">
</div>
<input type="hidden" id="signupFormType" value="QuickForm_Horizontal">
<div id="zcOptinOverLay" oncontextmenu="return false" style="display:none;text-align: center; background-color: rgb(0, 0, 0); opacity: 0.5; z-index: 100; position: fixed; width: 100%; top: 0px; left: 0px; height: 988px;"></div>
<div id="zcOptinSuccessPopup" style="display:none;z-index: 9999;width: 800px; height: 40%;top: 84px;position: fixed; left: 26%;background-color: #FFFFFF;border-color: #E6E6E6; border-style: solid; border-width: 1px; box-shadow: 0 1px 10px #424242;padding: 35px;">
<span style="position: absolute;top: -16px;right:-14px;z-index:99999;cursor: pointer;" id="closeSuccess">
<img src="https://zcsub-cmpzourl.maillist-manage.com/images/videoclose.png">
</span>
<div id="zcOptinSuccessPanel"></div>
</div>
<!--Zoho Campaigns Web-Optin Form Ends Here--></div><div class="scroll-down"><i class="fa fa-angle-down scroll-down-effects"></i></div></div><div id="content-outer"><div class="layout_page" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/2023/08/08/180-goodbye/" title="第 180 期 - 未來看見 bug 記得想起我們，謝謝大家！"><img class="post_bg lozad" data-src="/img/180cover.jpg" onerror="onerror=null;src='/img/404.jpg'"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/08/08/180-goodbye/" title="第 180 期 - 未來看見 bug 記得想起我們，謝謝大家！">第 180 期 - 未來看見 bug 記得想起我們，謝謝大家！</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2023-08-08</time><div class="content">本週專欄用 JavaScript 玩轉設計模式 - 你一定用過但可能不知道的 Facade Pattern（外觀模式）在程式設計的時候，我們經常會將各個行為獨立拆開（例如文章例子中的取得資料、檢查權限邏輯、檢查），這麼做會得到的好處是能夠在只需要該功能時單獨使用，或是更容易地與其他行為做組合，例如： ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/2023/07/25/179-first-typhoon-after-starbugs/" title="第 179 期 - 星巴哥成立後的第一個颱風！"><img class="post_bg lozad" data-src="/img/179cover.jpg" onerror="onerror=null;src='/img/404.jpg'"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/25/179-first-typhoon-after-starbugs/" title="第 179 期 - 星巴哥成立後的第一個颱風！">第 179 期 - 星巴哥成立後的第一個颱風！</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2023-07-25</time><div class="content">本週專欄Refactor | 這 3 個重構技巧我很喜歡，推薦給你 feat. JavaScript在本週的專欄中，神 Q 超人要跟大家分享他前陣子讀了鼎鼎大名的「重構｜改善既有程式的設計」後，覺得很喜歡的幾個重構技巧。
雖然文中的範例都是用 JavaScript 寫的，但不論你寫的是什麼語言、是新 ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/2023/07/11/178-fighting/" title="第 178 期 - 月光照亮你的眼睛"><img class="post_bg lozad" data-src="/img/178cover.jpg" onerror="onerror=null;src='/img/404.jpg'"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/11/178-fighting/" title="第 178 期 - 月光照亮你的眼睛">第 178 期 - 月光照亮你的眼睛</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2023-07-11</time><div class="content">本週專欄開源專案讀起來 | 你看過計算機的裡面嗎？繼上次的「關於圈圈叉叉的雅量」之後，神 Q 的新文章「開源專案讀起來 | 你看過計算機的裡面嗎？」要再度帶你進入開源專案的世界。以計算機為主題，帶你看看三個開源專案分別是怎麼用 JavaScript 去實作加減乘除，以及他們的思路有什麼不同。
如果你 ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/2023/06/27/177-gold-bug-or-silver-bug/" title="第 177 期 - 你掉的是這個金 Bug 還是銀 Bug?"><img class="post_bg lozad" data-src="/img/177cover.jpg" onerror="onerror=null;src='/img/404.jpg'"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/06/27/177-gold-bug-or-silver-bug/" title="第 177 期 - 你掉的是這個金 Bug 還是銀 Bug?">第 177 期 - 你掉的是這個金 Bug 還是銀 Bug?</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2023-06-27</time><div class="content">本週專欄兩大 bundler 交鋒：Vite 與 Turbopack 的技術角力賽本週的專欄是由 Writer Leo 發佈的「兩大 Bundler 交鋒：Vite 與 Turbopack 的技術角力賽」。在這篇文章中，Leo 要跟大家介紹由 Vue.js 作者尤雨溪創建的 Vite、以及 Next ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/2023/06/13/176-will-karma-explode-bug/" title="第 176 期 - Bug 最近會不會也開始因為業力引爆？"><img class="post_bg lozad" data-src="/img/176cover.jpg" onerror="onerror=null;src='/img/404.jpg'"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/06/13/176-will-karma-explode-bug/" title="第 176 期 - Bug 最近會不會也開始因為業力引爆？">第 176 期 - Bug 最近會不會也開始因為業力引爆？</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2023-06-13</time><div class="content">本週專欄什麼?!元件竟然也有分可控制與不可控制 - 探討 React Controlled 以及 Uncontrolled Component在 React.js 的世界中有分成 Controlled 以及 Uncontrolled 兩種 Component，Andy 本篇文章除了介紹這兩種 Com ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/36/">36</a><a class="extend next" rel="next" href="/page/2/">></a></div></nav></div></div></div><footer style="background-image: url(/img/banner.jpeg)"><div id="footer"><div class="copyright">©2019 - 2023 By StarBugs Weekly Editors</div></div></footer></div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/nightshift.js"></script><script color="0,0,255" opacity="0.7" zIndex="-1" count="39" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/js/canvas-nest.js"></script><script src="/js/tw_cn.js"></script><script>translateInitilization()
</script><script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script><script>const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();
</script><script>if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js?t=1691460553344')
.then(function () {console.log('ServiceWorker Register Successfully.')})
.catch(function (e) {console.error(e)});
}
</script></body></html>