詳解簡易 Timer 來學習 D3
The Pomodoro Technique 是一個簡易又廣為人知的時間管理方法，其主軸在於將工作時段切割成多個蕃茄時間，每個蕃茄時間包含： 25 分鐘的執行時間 5 分鐘的休息時間 蕃茄工作法 wiki詳細內容不管是網路上，或是書籍都有許多描述，有興趣深入了解的可以去看看。 今天重點不在番茄工作法。 重點在，番茄工作法中不可或缺的工具 - 計時器！ 我用過幾款 Chrome extension 的計時器，但剩餘時間都是用數字來顯示
Hacktoberfest：一起踏入 open source 的世界吧！
（圖片來自： Hacktoberfest is back） 前言Hacktoberfest 是由 hack + october + festival 組合而成的名詞，是由知名的 VPS 供應商 DigitalOcean 與大家所熟知的 github 所舉辦的活動，目的在於推廣 open source，希望許多人能藉由這個活動踏進 open source 的世界。 這個活動的口號是： Support and celebrate ope
用 JavaScript 學習資料結構和演算法：陣列（Array）篇
什麼是陣列（Array）？陣列可以說是程式語言中暫時儲存資料的櫃子，幾乎所有的程式語言都具備陣列這個廣泛運用的資料結構，但值得注意的是一般程式語言中陣列只能儲存同樣型別的值，但在 JavaScript 則可以儲存不同型別的值（但我們還是盡量避免）。 下面是陣列的簡單使用情境，當今天我們想儲存整個班級的學生姓名時，我們不可能使用一個個變數去一個個儲存，這時候陣列的功能就派上用場了： 1234567const student1 = &#x
使用 ROS 與 Gazebo 模擬一個自動避障機器人
前言機器人要在環境中隨心所欲移動，需要的最基礎功能之一就是避障。要能夠避障的首要條件是要有感測器接收環境中的資訊，才能藉由這個資訊判斷障礙物是否存在。 常見的感測器包含紅外線感測器、超音波感測器、雷射測距儀、一般的相機、RGB-D 感測器等等，底層的感測器 driver 不在這篇文章的討論範圍裡，我們先單純看看怎麼使用收到的 laser data 來避障。 建立模擬環境我們先用 Gazebo 建立一個簡單的環境，加上幾個障礙物，就可以把
淺談二分搜尋法
前言在寫程式的時候，其實會滿常用到「搜尋」的功能。最簡單的搜尋就是在一串數字裡面找出你想要的數字，而這也是我們今天的主題。 這一篇大致上會分成三個部分，第一部分會先介紹線性搜尋法，第二部分介紹二分搜尋法，最後一部分談談二分搜尋法在不同條件底下的實作方式會有什麼不同。 線性搜尋法為了由淺入深，我們從最基礎的線性搜尋法（Linear search）開始談起。就如同它的名字一樣，線性搜尋法就是「從頭到尾一個一個找」，時間複雜度為 O(n)
當 React web app 遇上 Progressive web app
先前介紹過 Progressive Web App，我們利用 vanilla js 與 css 刻出一個支援 PWA 的天氣 web app，但現在應該很少人這麼有風格的用純 JS 寫 web app，世俗如我還是會想用 React 來支援前端框架，但 React 的 configuration 就已經頗複雜，要再加上 service-worker 的設定，想想就覺得累。 好在 facebook 先前推出 create-react-ap
一看就懂的 React Native + Firebase Mobile App 入門教學
前言跨平台（Wirte once, Run Everywhere）一直以來是軟體工程的聖杯。過去一段時間市場上有許多嘗試跨平台開發原生行動裝置（Native Mobile App）的解決方案，嘗試運用 HTML、CSS 和 JavaScript 等網頁前端技術達到跨平台的效果，例如：運用 jQuery Mobile、Ionic 和 Framework7 等 Mobile UI 框架（Framework）結合 JavaScript 框架
如何用 ROS Topic 控制機器人移動
筆者今年在 COSCUP 2016 開了一個工作坊，教大家 ROS 的基礎以及 Gazebo 的基本概念，因為是第一次辦工作坊，還在學習怎麼拿捏時間跟內容，自覺並不是講得很完整，所以希望可以再提供一個簡單的範例，讓大家對 topic 傳輸要怎麼應用在控制機器人上會更有概念。 在工作坊講的內容 – Node, Topic and Service COSCUP 2016 - ROS + Gazebo機器人模擬器工作坊 from Po
一看就懂的 React Server Rendering（Isomorphic JavaScript）入門教學
前言由於可能有些讀者沒聽過 Isomorphic JavaScript 。因此在進到開發 React Redux Sever Rendering 應用程式的主題之前我們先來聊聊 Isomorphic JavaScript 這個議題。 根據 Isomorphic JavaScript 這個網站的說明： Isomorphic JavaScript apps are JavaScript applications that can run
用 D3.js v4 看 Pokemon 屬性表
自從 Pokemon Go 在台灣可以玩後，勾起了我許多兒時回憶，因此除了跟著大家一起抓神奇寶貝以外（對我就是不想講寶可夢啊啊啊），我也稍微去追了一下最新版的神奇寶貝動畫，似乎是在打什麼卡洛斯聯盟，也出現了好奇怪的 Mega 進化，會讓神奇寶貝在戰鬥中轉屬性… 咳咳，等等，再講下去這整篇都是神奇寶貝了… 總之，看到會轉屬性這件事情就讓我想到，我小時候從來都沒有認真研究過哪種屬性剋哪種屬性，只知道基本的水剋火之類的，於是乎決定來好好研究一