|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" > |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> |
| 7 | + <title>Archives: 2019/12 | TechBridge 技術共筆部落格</title> |
| 8 | + <meta name="description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享" /> |
| 9 | + <meta name="HandheldFriendly" content="True" /> |
| 10 | + <meta name="MobileOptimized" content="320" /> |
| 11 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 12 | + <!-- google-site-verification --> |
| 13 | + <meta name="google-site-verification" content="WX_9sZlrIYOEpy8RR7zCoa7-pJk611zZt11BSBUcDVY" /> |
| 14 | + <link rel="stylesheet preload" type="text/css" href="/css/screen.css" as="style" /> |
| 15 | + <link rel="stylesheet preload" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" as="style" /> |
| 16 | + |
| 17 | + <!-- Favicons --> |
| 18 | + <link rel="apple-touch-icon" href="/img/favicon.ico"> |
| 19 | + <link rel="icon preload" href="/img/favicon.ico" as="image"> |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | + <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="atom.xml"> |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | + |
| 28 | +</head> |
| 29 | + |
| 30 | + |
| 31 | +<body class="home-template"> |
| 32 | + |
| 33 | + <header class="site-head" > |
| 34 | + <div class="vertical"> |
| 35 | + <div class="site-head-content inner"> |
| 36 | + <a class="blog-logo" href="/"><img src="/img/logo-tb-500-500.png" alt="Blog Logo"/></a> |
| 37 | + <h1 class="blog-title">TechBridge 技術共筆部落格</h1> |
| 38 | + <h2 class="blog-description">var topics = ['Web前後端', '行動網路', '機器人/物聯網', '數據分析', '產品設計', 'etc.']</h2> |
| 39 | + <div class="navbar-block"> |
| 40 | + <span><a href="/">首頁</a></span> / <span><a href="/about/">關於我們</a></span> / <span><a href="http://weekly.techbridge.cc/" target="_blank">技術週刊</a></span> / <span><a href="https://www.facebook.com/techbridge.cc/" target="_blank">粉絲專頁</a></span> / <span><a href="/atom.xml" target="_blank">訂閱RSS </a></span> |
| 41 | + <br> |
| 42 | + </div> |
| 43 | + </div> |
| 44 | + </div> |
| 45 | +</header> |
| 46 | + |
| 47 | +<main class="content" role="main"> |
| 48 | + |
| 49 | + <article class="post"> |
| 50 | + <header class="post-header"> |
| 51 | + <span class="post-meta"> |
| 52 | + <time datetime="2019-12-30T19:32:59.000Z" itemprop="datePublished"> |
| 53 | + 2019-12-30 |
| 54 | + </time> |
| 55 | + |
| 56 | +</span> |
| 57 | + |
| 58 | +<meta name="generator" content="CDS2019 Next-generation web styling 整理介紹"> |
| 59 | +<meta name="og:title" content="CDS2019 Next-generation web styling 整理介紹"> |
| 60 | +<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。"> |
| 61 | +<meta name="og:type" content="website"> |
| 62 | +<meta name="og:image" content="/img/og-cover.png"> |
| 63 | + |
| 64 | + <h1 class="post-title"><a href="/2019/12/30/cds2019-next-generation-web-styling-整理介紹/">CDS2019 Next-generation web styling 整理介紹</a></h1> |
| 65 | + </header> |
| 66 | + <section class="post-excerpt"> |
| 67 | + <p> |
| 68 | + |
| 69 | + 前言一陣子沒有關注 CSS 的最新發展,最近趁著年假補帶 2019 Google Chrome Summit 時,看到這場 talk - Next-generation web styling,裡面提到不少有趣的新屬性,透過這篇文章整理一下內容,分享給各位與未來的我。註:官方在 12 月初也發佈了文字版本,習慣閱讀原文的讀者可以參考看看。 |
| 70 | +新世代的…CSS |
| 71 | +scroll-snap - native scroll inertia and |
| 72 | + |
| 73 | + </p> |
| 74 | + |
| 75 | + <p> |
| 76 | + <a href="/2019/12/30/cds2019-next-generation-web-styling-整理介紹/" class="excerpt-link">Read More...</a> |
| 77 | + </p> |
| 78 | + |
| 79 | + </section> |
| 80 | + </article> |
| 81 | + |
| 82 | + <article class="post"> |
| 83 | + <header class="post-header"> |
| 84 | + <span class="post-meta"> |
| 85 | + <time datetime="2019-12-27T19:32:59.000Z" itemprop="datePublished"> |
| 86 | + 2019-12-27 |
| 87 | + </time> |
| 88 | + |
| 89 | +</span> |
| 90 | + |
| 91 | +<meta name="generator" content="From Nand To Tetris:想理解電腦運作,就先做出一台吧!"> |
| 92 | +<meta name="og:title" content="From Nand To Tetris:想理解電腦運作,就先做出一台吧!"> |
| 93 | +<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。"> |
| 94 | +<meta name="og:type" content="website"> |
| 95 | +<meta name="og:image" content="/img/og-cover.png"> |
| 96 | + |
| 97 | + <h1 class="post-title"><a href="/2019/12/27/from-nand-to-tetris:想理解電腦運作,就先做出一台吧!/">From Nand To Tetris:想理解電腦運作,就先做出一台吧!</a></h1> |
| 98 | + </header> |
| 99 | + <section class="post-excerpt"> |
| 100 | + <p> |
| 101 | + |
| 102 | + <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>一直以來我都很推薦一門課叫做 <a target="_blank" rel="noopener" href="https://blog.huli.tw/2016/03/28/cs50-programming-course-like-ocean/">CS50</a>,原因是又深又廣,而且教得深入淺出,作業又紮實,是很棒的一堂課。</p> |
| 103 | +<p>而今天要介紹的這門課,我會形容它是「電腦底層版的 CS50」。</p> |
| 104 | +<p><a target="_blank" rel="noopener" href="https://www.nand2tetris.org/">From Nand to Tetris</a> 由兩位教授 Shimon Schocken 與 Noam Nisan 開設,與 CS50 一樣,一開始都是大學的課程,後來才轉為線上課程,在官網上這堂課還有一個副標題:「Building a Modern Computer From First Principles」,沒錯,要建一台電腦出來。</p> |
| 105 | +<p>這堂課分為兩個部分,Part1 是 From Nand To HACK,Nand 是一個邏輯閘的名稱,就像 Or、And、Xor 這些也都是邏輯閘。而 HACK 是在 Part1 最後會建造出來的電腦。因此 Part1 就是帶你從最基本的邏輯閘開始,一步步把一台電腦建立出來,所以是很偏向硬體的部分。</p> |
| 106 | +<p>Part2 則是 From HACK To Tetris,以電腦為基礎往軟體去延伸,會介紹到 Compiler 與作業系統等等的軟體。</p> |
| 107 | + |
| 108 | + </p> |
| 109 | + |
| 110 | + <p> |
| 111 | + <a href="/2019/12/27/from-nand-to-tetris:想理解電腦運作,就先做出一台吧!/" class="excerpt-link">Read More...</a> |
| 112 | + </p> |
| 113 | + |
| 114 | + </section> |
| 115 | + </article> |
| 116 | + |
| 117 | + <article class="post"> |
| 118 | + <header class="post-header"> |
| 119 | + <span class="post-meta"> |
| 120 | + <time datetime="2019-12-21T19:32:59.000Z" itemprop="datePublished"> |
| 121 | + 2019-12-21 |
| 122 | + </time> |
| 123 | + |
| 124 | +</span> |
| 125 | + |
| 126 | +<meta name="generator" content="Leetcode 刷題 pattern - Breadth-First Search"> |
| 127 | +<meta name="og:title" content="Leetcode 刷題 pattern - Breadth-First Search"> |
| 128 | +<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。"> |
| 129 | +<meta name="og:type" content="website"> |
| 130 | +<meta name="og:image" content="/img/og-cover.png"> |
| 131 | + |
| 132 | + <h1 class="post-title"><a href="/2019/12/21/leetcode-刷題-pattern-breadth-first-search/">Leetcode 刷題 pattern - Breadth-First Search</a></h1> |
| 133 | + </header> |
| 134 | + <section class="post-excerpt"> |
| 135 | + <p> |
| 136 | + |
| 137 | + 前言身在大 CS 時代,有越來越多人投入刷題的行列,在眼花撩亂的題海中,要想有效率地刷題,就需要掌握題目解法中,可以在許多地方應用的觀念,才能以簡禦繁。 Huli 寫的 程式解題新手入門注意事項 講得很好,寫題目是為了學會解題的思考方法,確保自己掌握重要的資料結構跟演算法。這也是為什麼我想要寫這系列的文章,把多個散落在各處的題目銜接起來,以後看到相似的問題就可以舉一反三,而不是去背各題目的解法。 |
| 138 | +舉例來說,之前遇過一題電話面試,問到的題 |
| 139 | + |
| 140 | + </p> |
| 141 | + |
| 142 | + <p> |
| 143 | + <a href="/2019/12/21/leetcode-刷題-pattern-breadth-first-search/" class="excerpt-link">Read More...</a> |
| 144 | + </p> |
| 145 | + |
| 146 | + </section> |
| 147 | + </article> |
| 148 | + |
| 149 | + <article class="post"> |
| 150 | + <header class="post-header"> |
| 151 | + <span class="post-meta"> |
| 152 | + <time datetime="2019-12-15T19:32:59.000Z" itemprop="datePublished"> |
| 153 | + 2019-12-15 |
| 154 | + </time> |
| 155 | + |
| 156 | +</span> |
| 157 | + |
| 158 | +<meta name="generator" content="簡明 APCS 大學程式設計先修檢測入門教學"> |
| 159 | +<meta name="og:title" content="簡明 APCS 大學程式設計先修檢測入門教學"> |
| 160 | +<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。"> |
| 161 | +<meta name="og:type" content="website"> |
| 162 | +<meta name="og:image" content="/img/og-cover.png"> |
| 163 | + |
| 164 | + <h1 class="post-title"><a href="/2019/12/15/APCS-大學程式設計先修檢測入門教學/">簡明 APCS 大學程式設計先修檢測入門教學</a></h1> |
| 165 | + </header> |
| 166 | + <section class="post-excerpt"> |
| 167 | + <p> |
| 168 | + |
| 169 | + 前言APCS(Advanced Placement Computer Science,大學程式設計先修檢測入門教學)是教育部所推動的資訊能力檢測,希望藉由舉辦具公信力之「程式設計檢測」,讓具備程式設計能力之高中職學生,能夠檢驗學習成果,並供作大學選才的參考依據(可以想成是類似程式設計版本的全民英檢)。即便引起許多討論和爭議(軟體開發重點在於透過程式語言這項工具解決生活上的問題,過分強調程式解題有可能會抹煞學生學習程式設計的熱情或是城鄉師 |
| 170 | + |
| 171 | + </p> |
| 172 | + |
| 173 | + <p> |
| 174 | + <a href="/2019/12/15/APCS-大學程式設計先修檢測入門教學/" class="excerpt-link">Read More...</a> |
| 175 | + </p> |
| 176 | + |
| 177 | + </section> |
| 178 | + </article> |
| 179 | + |
| 180 | + <article class="post"> |
| 181 | + <header class="post-header"> |
| 182 | + <span class="post-meta"> |
| 183 | + <time datetime="2019-12-07T19:32:59.000Z" itemprop="datePublished"> |
| 184 | + 2019-12-07 |
| 185 | + </time> |
| 186 | + |
| 187 | +</span> |
| 188 | + |
| 189 | +<meta name="generator" content="GraphQL Summit 2019 與會分享"> |
| 190 | +<meta name="og:title" content="GraphQL Summit 2019 與會分享"> |
| 191 | +<meta name="og:description" content="TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、數據分析與產品設計等技術分享。"> |
| 192 | +<meta name="og:type" content="website"> |
| 193 | +<meta name="og:image" content="/img/og-cover.png"> |
| 194 | + |
| 195 | + <h1 class="post-title"><a href="/2019/12/07/GraphQL-Summit-2019-與會心得/">GraphQL Summit 2019 與會分享</a></h1> |
| 196 | + </header> |
| 197 | + <section class="post-excerpt"> |
| 198 | + <p> |
| 199 | + |
| 200 | + 前言記得剛上研究所的時候參加了第一屆的 WebConf,沒記錯的話是 WebConf Taiwan 2013。當時兩天的議程下來,接收到的知識與衝擊讓我精疲力盡,但心中是滿溢的富足感,自此之後,只要有機會我就會去參加各種 Conference。 |
| 201 | +然而或許隨著經驗增長,平常獲取知識的管道變多,能從演講者的演說內容吸取到的新知越來越少,對於參與會議變得興致缺缺,直到我理解到在會議現場與人互動交流其實才是 Conference 的一個主要功能 |
| 202 | + |
| 203 | + </p> |
| 204 | + |
| 205 | + <p> |
| 206 | + <a href="/2019/12/07/GraphQL-Summit-2019-與會心得/" class="excerpt-link">Read More...</a> |
| 207 | + </p> |
| 208 | + |
| 209 | + </section> |
| 210 | + </article> |
| 211 | + |
| 212 | + <nav class="pagination" role="pagination"> |
| 213 | + |
| 214 | + <span class="page-number">Page 1 of 1</span> |
| 215 | + |
| 216 | + </nav> |
| 217 | +</main> |
| 218 | + |
| 219 | + |
| 220 | + <script> |
| 221 | + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| 222 | + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| 223 | + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| 224 | + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| 225 | + |
| 226 | + ga('create', 'UA-75308642-1', 'auto'); |
| 227 | + ga('send', 'pageview'); |
| 228 | + |
| 229 | +</script> |
| 230 | +<footer class="site-footer"> |
| 231 | + |
| 232 | + <a class="subscribe icon-feed" href="/atom.xml"><span class="tooltip">Subscribe!</span></a> |
| 233 | + |
| 234 | + <div class="inner"> |
| 235 | + <section class="copyright">All content copyright <a href="/">TechBridge 技術共筆部落格</a> © 2017 • All rights reserved.</section> |
| 236 | + </div> |
| 237 | +</footer> |
| 238 | + |
| 239 | + <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> |
| 240 | + |
| 241 | +<script type="text/javascript" src="/js/jquery.fitvids.js"></script> |
| 242 | +<script type="text/javascript" src="/js/index.js"></script> |
| 243 | + |
| 244 | + |
| 245 | +<script type="text/javascript"> |
| 246 | + var _gaq = _gaq || []; |
| 247 | + _gaq.push(['_setAccount', '[object Object]']); |
| 248 | + _gaq.push(['_trackPageview']); |
| 249 | + |
| 250 | + (function() { |
| 251 | + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
| 252 | + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
| 253 | + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
| 254 | + })(); |
| 255 | +</script> |
| 256 | + |
| 257 | + |
| 258 | +<script type="text/javascript"> |
| 259 | + var disqus_shortname = 'techbridgeweekly'; |
| 260 | + |
| 261 | + (function(){ |
| 262 | + var dsq = document.createElement('script'); |
| 263 | + dsq.type = 'text/javascript'; |
| 264 | + dsq.async = true; |
| 265 | + dsq.src = '//' + disqus_shortname + '.disqus.com/count.js'; |
| 266 | + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); |
| 267 | + }()); |
| 268 | +</script> |
| 269 | + |
| 270 | + |
| 271 | + |
| 272 | +<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.4/dist/medium-zoom.min.js"></script> |
| 273 | +<script> |
| 274 | +// NodeList |
| 275 | +mediumZoom(document.querySelectorAll('img')); |
| 276 | +</script> |
| 277 | + <div id="fb-root"></div> |
| 278 | + <script>(function(d, s, id) { |
| 279 | + var js, fjs = d.getElementsByTagName(s)[0]; |
| 280 | + if (d.getElementById(id)) return; |
| 281 | + js = d.createElement(s); js.id = id; |
| 282 | + js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; |
| 283 | + fjs.parentNode.insertBefore(js, fjs); |
| 284 | + }(document, 'script', 'facebook-jssdk'));</script> |
| 285 | +</body> |
| 286 | +</html> |
0 commit comments