Jekyll2022-12-31T00:02:33+08:00https://grimmer.io/feed.xmlGrimmer’s blogAn amazing website.Grimmer KangNew Blog (Beta)2018-04-10T00:00:00+08:002018-04-10T00:00:00+08:00https://grimmer.io/New-Site-Blog<p>https://grimmer.netlify.com</p>Grimmer Kanghttps://grimmer.netlify.comA list of Bluetooth API/Library for Electron Desktop Application2018-04-08T00:00:00+08:002018-04-08T00:00:00+08:00https://grimmer.io/Electron-Bluetooth<h3 id="rfcomm-bluetooth-ver-40-serial-io">RFCOMM (Bluetooth ver. <4.0, Serial I/O).</h3>
<p>Use Node.js Package:</p>
<ol>
<li>https://github.com/eelcocramer/node-bluetooth-serial-port</li>
<li>https://github.com/johnny-five-io/electron-serialport</li>
<li>https://github.com/song940/node-bluetooth</li>
</ol>
<h3 id="ble-bluetooth-low-energy-40">BLE (Bluetooth Low Energy, 4.0)</h3>
<p>Use Node.js Package</p>
<ol>
<li>https://github.com/noble/noble</li>
<li>https://github.com/torque/Arduino-101-BLE-Demo (使用noble)</li>
<li>https://github.com/adafruit/adafruit-bluefruit-le-desktop (使用noble)</li>
</ol>
<p>Use web bluetooth API</p>
<ol>
<li>https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web</li>
<li>https://github.com/aalhaimi/electron-web-bluetooth</li>
</ol>Grimmer KangRFCOMM (Bluetooth ver. <4.0, Serial I/O).TypeScript的介紹2018-03-31T00:00:00+08:002018-03-31T00:00:00+08:00https://grimmer.io/Node-TypeScript<h3 id="參考">參考:</h3>
<ol>
<li><a href="http://www.typescriptlang.org/">TypeScript的官網</a>, e.g. Node.js + TypeScript 的 example: https://github.com/Microsoft/TypeScript-Node-Starter</li>
<li>VS Code上的TypeScript說明: https://code.visualstudio.com/docs/languages/typescript.</li>
</ol>
<p>TypeScript 沒有強制性每個object都有type, 視需要才加,就算沒有加type的它有時候也會自動檢查出一些 型別的錯誤.
TypeScript 一般可以由以下三者任一來設定, 所以有的project會沒有 tsconfig.json設定檔</p>
<ol>
<li>只有 tsconfig.json設定檔</li>
<li>由gulpfile.js來管理</li>
<li>由webpack來管理</li>
</ol>
<h3 id="套件">套件</h3>
<p>在Atom及VS Code上面安裝外掛增強 JavaScript IDE 開發功能 (沒有列linter部份):
https://grimmer.io/atom-vscode-javascript-packages/</p>
<p>安裝TypeScript及其linter:
npm install -g typescript tslint (需先安裝node/npm, 不需安裝eslint)</p>
<p>安裝給純JavaScript用的eslint
npm install -g eslint</p>
<p>Linter方面:</p>
<ol>
<li>VS Code套件: TSLint, ESLint
)</li>
<li>Atom套件: Nuclide, linter-tslint, linter-eslint(後兩個可去其設定打開 Fix errors on save !!)</li>
<li>若是TypeScript project, 則在project folder裡建一個tslint.json檔案</li>
</ol>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
/* tslint-config-airbnb does not work somehow */
"extends": ["tslint:latest"]
}
</code></pre></div></div>
<ol>
<li>若是 Node.js project, 則 follow https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint</li>
<li>在 Atom or VS code右下角可以可以點button打開 linter的log.
p.s. 另有套件可以 show linter的error的說明頁</li>
</ol>
<hr />
<h3 id="examples">Examples</h3>
<p>JavaScript/TypeScript + Express (http framework) example:
repo: https://github.com/Microsoft/vscode-samples
TypeScript folder: ./node-express-typescript
JavaScript folder: ./node-express-javascript</p>
<h4 id="運行typescript-project的步驟notes">運行TypeScript project的步驟notes:</h4>
<p>準備:
<code class="language-plaintext highlighter-rouge">npm install</code></p>
<p>改了code, build (主要是把TypeScript compile成nomral JavaScript code, 可順便compile成ES5 JS code, 做到部份Babel的一樣功能):
<code class="language-plaintext highlighter-rouge">npm run compile</code></p>
<p>p.s. 有其他設定辦法可以不需要每次都去手動重build. 搜尋 “tsc watch”, 不過要新增一下 TypeScript的 tsconfig.json檔案.</p>
<p>launch + breakpoint debug:</p>
<ol>
<li>用mouse 設breakpoint</li>
<li>按左邊的debug button, trigger預設debug行為</li>
<li>開網頁打 http://localhost:3000/</li>
</ol>Grimmer Kang參考: TypeScript的官網, e.g. Node.js + TypeScript 的 example: https://github.com/Microsoft/TypeScript-Node-Starter VS Code上的TypeScript說明: https://code.visualstudio.com/docs/languages/typescript.在Atom及VS Code上面安裝外掛增強 JavaScript IDE 開發功能2017-12-31T00:00:00+08:002017-12-31T00:00:00+08:00https://grimmer.io/atom-vscode-javascript-packages<h2 id="symbol-function-global-variable-etc-list">symbol (function, global variable, etc.) list</h2>
<h3 id="atom---javascript">Atom - JavaScript</h3>
<ul>
<li>需安裝 <a href="https://atom.io/packages/nuclide">nuclide</a>, 使用toggle outline功能即可</li>
<li>可裝不可裝 <a href="https://github.com/atom/ide-typescript">ide-typescript</a>, 強化nuclide outline, 對JS也有效</li>
</ul>
<h3 id="atom---typescript">Atom - TypeScript</h3>
<p>需安裝以下兩個</p>
<ol>
<li><a href="https://atom.io/packages/nuclide">nuclide</a></li>
<li><a href="https://github.com/atom/ide-typescript">ide-typescript</a> 把nuclide-outline加上 TypeScript support</li>
</ol>
<h3 id="vs-code---typescript--javascript">VS Code - TypeScript & JavaScript</h3>
<ol>
<li>內建: use cmd+shift+o to get symbol list.或是以下</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=patrys.vscode-code-outline">vscode-code-outline</a></li>
</ol>
<h2 id="refactor-rename">Refactor (Rename)</h2>
<h3 id="atom---typessript-only">Atom - TypesSript only</h3>
<p><a href="https://atom.io/packages/atom-typescript">atom-typescript</a>, 按f2 (有時不work)</p>
<h3 id="vs-code---typescript--javascript-1">VS Code - TypeScript & JavaScript</h3>
<p>內建 (有時不work, TypeScript work機率高點?)</p>
<h2 id="ide---find-definition">IDE - find definition</h2>
<h3 id="atom---typescript--javascript">Atom - TypeScript & JavaScript</h3>
<p>以下任一種</p>
<ol>
<li><a href="https://atom.io/packages/goto-definition">goto-definition</a></li>
<li><a href="https://nuclide.io/docs/languages/flow/#features__jump-to-definition">nuclide-jump-to-definition</a>:
cmd+mouse click. 推薦這個</li>
<li><a href="https://atom.io/packages/atom-ternjs">atom-ternjs</a>: ctrl+shift+r; JavaScript only</li>
</ol>
<h3 id="vs-code---typescript--javascript-2">VS Code - TypeScript & JavaScript</h3>
<p>內建</p>
<h2 id="find-referencesusages-跨檔案好像都不work">find references/usages (跨檔案好像都不work?)</h2>
<h3 id="atom---typescript--javascript-1">Atom - TypeScript & JavaScript</h3>
<p><a href="https://github.com/atom/ide-typescript">ide-typescript</a> 對JS也有效</p>
<h3 id="vs-code---typescript--javascript-3">VS Code - TypeScript & JavaScript</h3>
<p>內建</p>
<h2 id="autocomplete-自動完成-intelligence">autocomplete (自動完成)/ Intelligence</h2>
<h3 id="atom">Atom</h3>
<ol>
<li><a href="https://atom.io/packages/atom-ternjs">atom-ternjs</a>: JavaScript only, function名稱, object property. <strong>function parameters 有時也會show(但不常)</strong></li>
<li><a href="https://github.com/atom/ide-typescript">ide-typescript</a>: TypeScript & JavaScript, function parameters及其type.</li>
<li><a href="https://atom.io/packages/atom-typescript">atom-typescript</a> TypeScript only, 有即時show type alias的每個property type, e.g. const bbb:test = {<strong>此時有提示property怎麼填</strong>}</li>
</ol>
<h3 id="vs-code---typescript--javascript-4">VS Code - TypeScript & JavaScript</h3>
<p>內建: function名稱, object property, <strong>function parameters</strong>, TypeScript type alias & TypeScript function parameter type</p>Grimmer Kangsymbol (function, global variable, etc.) listAnswer Of Regular Expression Puzzle2016-08-12T00:00:00+08:002016-08-12T00:00:00+08:00https://grimmer.io/answer-of-regular-expression-puzzle<p>This puzzle is from MIT. And the blow is just a record that I have spent hours to do this puzzle.
<img src="https://grimmer.io/images/puzzleAnswer.jpg" alt="My helpful screenshot" /></p>Grimmer KangThis puzzle is from MIT. And the blow is just a record that I have spent hours to do this puzzle.GitHub Pages的分類以及使用Custom Domain2016-08-10T00:00:00+08:002016-08-10T00:00:00+08:00https://grimmer.io/GitHub-Page%E7%9A%84%E5%88%86%E9%A1%9E%E4%BB%A5%E5%8F%8A%E4%BD%BF%E7%94%A8Custom-Domain<p>GitHub Pages Notes:</p>
<ol>
<li>
<p>GitHub pages分成兩大種, a. User & Organization Pages (使用master branch) b. Project Pages. (使用gh-pages branch) 詳細介紹 <a href="https://help.github.com/articles/user-organization-and-project-pages/">https://help.github.com/articles/user-organization-and-project-pages/</a></p>
</li>
<li>
<p>若已設定custom domain for user/organization pages (e.g. aa.example.com) , 則 Project Pages site 的domain會自動變成 aa.example.com//projectname, 參考
<a href="https://help.github.com/articles/custom-domain-redirects-for-github-pages-sites/">https://help.github.com/articles/custom-domain-redirects-for-github-pages-sites/</a>. <em>If no custom domain is used, the Project Pages sites are served under a subpath of the User Pages site: username.github.io/projectname</em></p>
</li>
<li>
<p>若需要在custom domain上加入 SSL 的功能,可考慮使用 cloudflare CDN. 教學. <a href="https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare/">https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare/</a>. 但經實驗在這種組合下,user pages的custom domain用有 subdomain(e.g. www.example.com) 的會有問題, 建議使用 example.com.(指的是是在GitHub repo那邊設定的custom domain, 非指DNS provider端)</p>
</li>
</ol>
<h2 id="ps-除了以上以外-剩下的github官方設定custom-domain的文章都沒有對userproject-pages做區分">p.s. 除了以上以外, 剩下的GitHub官方設定custom domain的文章都沒有對user/project pages做區分</h2>
<p>Custom domain on GitHub Pages:</p>
<ol>
<li>
<p>Custom domain的官方教學文章:<a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">https://help.github.com/articles/using-a-custom-domain-with-github-pages/</a></p>
</li>
<li>
<p>步驟是</p>
<ol>
<li>
<p>在GitHub的repo的settings裡 設定custom domain. 或是手動 建立一個CNAME file(內容是example.com/www.example.com<-只能有一行)在此repo裡.</p>
</li>
<li>
<p>如果是apex (沒有subdomain的, e.g. example.com)的, 在DNS provider那邊設定 aname/alias(這個就沒有講怎麼設定,只有說要去問DNS provider), 沒有提供aname設定, 則退而設定 a record(一定會有的). 細節教學: <a href="https://help.github.com/articles/setting-up-an-apex-domain/">https://help.github.com/articles/setting-up-an-apex-domain/</a> (設定如下的兩筆的a record, 因為有兩個GitHub ip). <code class="language-plaintext highlighter-rouge">@ -> githubIP</code></p>
</li>
<li>
<p>如果subdomain的(e.g. www.example.com or aa.exaomple.com),則是在DNS provider設定 CNAME record, e.g. <code class="language-plaintext highlighter-rouge">www -> username.github.io</code>. <a href="https://help.github.com/articles/setting-up-a-custom-subdomain/">https://help.github.com/articles/setting-up-a-custom-subdomain/</a></p>
</li>
</ol>
</li>
</ol>
<p>p.s.1. GitHub 是建議設定www.example.com 而不是example.com (apex type),若真需要設定apex type,則建議同時也設定www.(即example.com & www.example.com同時work, 即上面的2.2 & 2.3都做), 如下圖:
<img src="https://grimmer.io/images/dnsSetting.png" alt="My helpful screenshot" /></p>
<p>p.s.2. 若同時support apex跟subdomain type, 則會根據GitHub repo setting裡的custom domain來決定把那一個自動導到那一個. 亦即若在GitHub那邊是設定 example.com, 而DNS provider兩個都有設定, 則打開www.example.com會自動轉址到example.com . ref:<a href="https://help.github.com/articles/setting-up-an-apex-domain-and-www-subdomain/">https://help.github.com/articles/setting-up-an-apex-domain-and-www-subdomain/</a></p>Grimmer KangGitHub Pages Notes:DI (Dependency Injection) & Tests in Golang2016-07-19T00:00:00+08:002016-07-19T00:00:00+08:00https://grimmer.io/dependency-injection-and-tests-in-go<p>Ref:</p>
<p>编写测试友好的Golang代码:<a href="https://ipfans.github.io/2016/04/writing-testable-golang-code/">https://ipfans.github.io/2016/04/writing-testable-golang-code/</a>:</p>Grimmer KangRef:在GitHub Pages上撰寫Markdown文章的注意事項2016-07-19T00:00:00+08:002016-07-19T00:00:00+08:00https://grimmer.io/%E5%9C%A8Github-Pages%E4%B8%8A%E7%94%A8Markdown%E6%96%87%E7%AB%A0%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85<h2 id="總共有3大種markdown語法-以下13跟github相關">總共有3大種Markdown語法, 以下1~3跟GitHub相關</h2>
<ol>
<li>GitHub Flavored Markdown (修改於 kramdown) + fenced code blocks + Syntax Highlight(<-不知那一個套件). <em>GitHub uses what we’re calling “GitHub Flavored Markdown” (GFM) for messages, issues, and comments.</em>. GFM使用說明:<a href="https://guides.github.com/features/mastering-markdown/">https://guides.github.com/features/mastering-markdown/</a>.</li>
<li>GitHub 的線上看到的Readme.md及其Preview,部份的GitHub Flavored Markdown.</li>
<li>Github Pages 用的: <a href="https://guides.github.com/features/mastering-markdown/">kramdown</a> + fenced code blocks and 部份的syntax highlighting of GitHub Flavored Markdown.</li>
<li>第三大種: 其他非 kmarkdown 的 標準Markdown. 大部份網頁版 Markdown , Markdown軟體 或是Atom等Markdown外掛皆為這種. 這三種(1,3,4)皆有大小不等的差異。</li>
</ol>
<h2 id="front-matter">Front Matter</h2>
<p>GitHub Page使用的Jekyll有所謂的<a href="https://jekyllrb.com/docs/frontmatter/">Front Matter</a>,可以在文章裡面加上如下的Yaml設定, 客製化文章一些資料, 比如說 layout, title, tag, date 等. 如果不指定則像是文章名稱會預設用檔名(字首大寫). E.g. 2016-01-01-文章名.md. posts資料夾裡的文章檔名一定要帶有時間,</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
title: "It is a cat."
---
正文開始,最好與上面的Yaml空一行,不然有時排版會亂掉.
</code></pre></div></div>
<h2 id="需要注意的">需要注意的</h2>
<ol>
<li>若要測試寫好的.md/.markdown檔,若要100%確定效果,可以
<ol>
<li>在本地端跑 Jekyll</li>
<li>用 <a href="https://kramdown.herokuapp.com/">https://kramdown.herokuapp.com/</a> 或是 <a href="http://trykramdown.herokuapp.com/">http://trykramdown.herokuapp.com/</a> 來測效果,此兩者皆是用Ruby寫的 kramdown.</li>
<li>使用 Atom的 Package, <a href="https://atom.io/packages/markdown-preview-kramdown">https://atom.io/packages/markdown-preview-kramdown</a></li>
</ol>
</li>
<li>換一個段落的方法
<ol>
<li>空一行</li>
<li>第一行結尾留兩個空白</li>
</ol>
</li>
<li>
<p>inline code block:使用兩個<em>前導字元</em>包起來,e.g.</p>
<p><code class="language-plaintext highlighter-rouge">`test` </code></p>
</li>
<li>
<p>multiple line code block, 可使用四個空白 或是```(Fenced code blocks)的做法, 參考<a href="https://help.github.com/articles/creating-and-highlighting-code-blocks/">https://help.github.com/articles/creating-and-highlighting-code-blocks/</a></p>
</li>
<li>
<p>語法高亮度的清單(不確定正確): <a href="https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers">https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers</a>, <a href="https://github.com/github/linguist/blob/master/lib/linguist/languages.yml">https://github.com/github/linguist/blob/master/lib/linguist/languages.yml</a>, 有人說別的Blog(e.g. <a href="https://hexo.io">Hexo</a>)所使用的Markdown沒有支持Github用的```jascript這種</p>
</li>
<li>
<p><a href="https://kramdown.herokuapp.com/">https://kramdown.herokuapp.com/</a> 沒有支援ES6的語法高亮度.</p>
</li>
<li>在 code block or inline code 中打出 ` 符號的方法. <a href="http://stackoverflow.com/questions/33224686/how-to-render-triple-backticks-as-inline-code-block-in-markdown">http://stackoverflow.com/questions/33224686/how-to-render-triple-backticks-as-inline-code-block-in-markdown</a>, <em>So I’ve found that using 4 backticks as opening and closing deliminators does the trick:</em></li>
</ol>
<h2 id="about-fenced-code-block">About Fenced code block</h2>
<ol>
<li><a href="https://help.github.com/articles/creating-and-highlighting-code-blocks/">Syntax highlighting of GitHub Flavored Markdown </a>. It uses ```</li>
<li><a href="http://kramdown.gettalong.org/syntax.html#fenced-code-blocks">Fenced code block of Kramdown</a>. It uses ~~~.</li>
</ol>
<p>GitHub Pages and some/all markdown files on GitHub can accept these two types and show correctly. But this atom package only handles Kramdown type(~~~). Please keep in mind, and my opinion is to use ~~~. Also They both support non-fenced standard code block (4 indent) and single line code span.</p>
<h2 id="list相關">List相關:</h2>
<ol>
<li>list要視為新的段落,所以要空一行等動作.</li>
<li>多層list(Sub list). 要用四個空格來縮排</li>
<li>number後面要加文字才行, 不能直接換行接sub list</li>
<li>GitHub page 不支援 code block的 語法高亮度在 list中</li>
<li>list裡面有多行code , 一定要用四個空格</li>
<li>list裡面包multiple code block, 一定要空一行</li>
</ol>Grimmer Kang總共有3大種Markdown語法, 以下1~3跟GitHub相關An excellent recording screen software2016-07-18T00:00:00+08:002016-07-18T00:00:00+08:00https://grimmer.io/a-good-record-screen-software<p>It is Screenium 3 and its site is <a href="http://www.syniumsoftware.com/screenium">http://www.syniumsoftware.com/screenium</a></p>Grimmer KangIt is Screenium 3 and its site is http://www.syniumsoftware.com/screeniumClosure in Go, C#, Objective-C, Javascript and so on2016-07-14T00:00:00+08:002016-07-14T00:00:00+08:00https://grimmer.io/closures-in-Go-C#-Objc-JavaScript<p>A closure is a function value that references variables from outside its body.</p>
<p>Closure in GO:
<a href="https://tour.golang.org/moretypes/25">https://tour.golang.org/moretypes/25</a></p>
<p>Closure in C#:</p>
<ol>
<li><a href="http://blog.darkthread.net/post-2009-12-25-closure-in-c.aspx">http://blog.darkthread.net/post-2009-12-25-closure-in-c.aspx</a></li>
<li><a href="http://stackoverflow.com/questions/9591476/are-lambda-expressions-in-c-sharp-closures">http://stackoverflow.com/questions/9591476/are-lambda-expressions-in-c-sharp-closures</a></li>
</ol>
<p>Closure in Objective-C(need to set <code class="language-plaintext highlighter-rouge">__block</code>):
<a href="http://riddleapple.logdown.com/posts/220371-objetive-c-note-the-block">http://riddleapple.logdown.com/posts/220371-objetive-c-note-the-block</a></p>
<p>Closure in JavaScript:
<a href="http://www.w3schools.com/js/js_function_closures.asp">http://www.w3schools.com/js/js_function_closures.asp</a></p>Grimmer KangA closure is a function value that references variables from outside its body.