FEDC 2018 小記

這次是第一次參加 FEDC，主要是參與前端的議程。

Path of web design modularization

模式化從我離開學校後，一直從別人口中聽到的字眼，總是說如果你的軟體可以快速的簡單的更換功能，就像樂高一樣，那就 bla bla bla

原本對這個議程有多的期待的，但是總覺得的是空談。
到底是先有頁面再切元件，還是有規劃元件再來組成頁面。

我想只有賣套裝軟體的才能賣元件給客戶組畫面吧（笑）。就像 MS office

在  Q&A 中，有人提出依 Atomic Design 當所有元素被拆細的時候，要再組出第二個元件的時候很可能缺漏部份 CSS 這時候該怎麼辦？如果說以魔鬼藏在細節中來說的話 Atomic Design 就像製造出了很多的魔鬼，可惜講者沒有明確的 Solution

結論：要怎麼拆不是問題，怎麼再組合才是問題 

10F - PureScript for JavaScript Developers

第一次接觸 PureScript ，果然跟事先在網路查的一樣，是數學阿.....
概念很不錯，但是覺得很難實作阿.....

Learn Tensorflow.js in 30 minutes

之前就有了解過一些 Tensorflow 內容大概如預期的一樣。

The (Finite) State of Reactive Animations

透過 State + Event 來規劃整個 UI 設計，蠻同講者的概念，把所有的狀態列出並透過事件的串聯，完成完整的操作流程。

不過這東西常常是聽別人說簡單套用到實作時到就遇到了太複雜的困難。

 講者提供了很不錯的工具

https://github.com/davidkpiano/xstate

fast.ai 學習筆記 - mnist 篇

簡單筆記

搭配資料：https://github.com/fastai/courses/blob/master/deeplearning1/nbs/mnist.ipynb

MNIST

手寫數字資料集，每個數字解析度都相同，固定為 28 x 28 的大小，ML界中的"Hello World!"
在 keras 中的匯入方式很簡單
```
from keras.datasets import mnist
```

np.expand_dims (numpy.expand_dims)

增加"一個"指定的維度在傳入的資料上，指定維度的範圍為被操作資料維度(n)的 n+1 中

例如：傳為的資料為 2 維資料，所以可以增度的維度為 0, 1, 2

在 mnist.ipynb 中，增加第二個維度，用以代表字體的灰階

Test code: http://ec2-35-163-5-73.us-west-2.compute.amazonaws.com:8888/notebooks/workspace/%5Btest%5D%20expand_dims%20.ipynb#

```
# 參數1：被操作的資料(不一定要是 Array )

# 參數2：增加在那一個維度

X_test = np.expand_dims(X_test,1)
```

onehot (OneHotEncoder)

簡化資料的一種手段，類似把填空變成選擇題

例如：原本的有[白天]、[晚上]兩種資料，經過 on hot encoder 後就會變為 [1,0] [0,1]

又例如，[眼睛][鼻子][嘴巴][耳朵]會轉換為[1,0,0,0][0,1,0,0][0,0,1,0][0,0,0,1]

在 mnist.ipynb 中用來轉換 0-9 的數字，數字5 就變成 [ 0., 0., 0., 0., 0., 1., 0., 0., 0., 0.]

pn.mean

求取均值，義意不明

pn.std

求標準差，義意不明

Sequential

Linear stack of layers

Flatten

把Array 從多維變單維

Test code: http://ec2-35-163-5-73.us-west-2.compute.amazonaws.com:8888/notebooks/workspace/%5Btest%5D%20Flatten.ipynb

Linear model

第一層：Lambda - normalize 圖檔，每張圖的資訊為 彩度灰階 1,  寬 28, 高 28px

第二層：Flatten - 攤平圖檔資訊 1x28x28

第三層：Dense - 歸類為 10 類 ( 數字 0-9）

上課後記 [Raspberry Pi 3樹莓派寵物小車]

起因：
某日公司同事傳了一個連結問要不要去上課，課程內容就是 [Raspberry Pi 3樹莓派寵物小車] 因為原本就在想能不能做到 Raspberry Pi + opencv + Bluetooth 做到看臉播歌
所以就報名啦，雖然找我的同事後來去生增產報國了....

上課心得：
有老師還是比自已土炮好，雖然講解的不深但還是說明了很多原本在網路上
看資料看的似懂非懂的觀念。
因為之前就用過 ESP-8266 做過類似的小車，所以組裝及程式基本上都沒什麼問題
但是 opencv 就離我十分遙遠....
最後的成果，因為上課現場網路混亂其實效果不好
回到家裡也改做手機遙控車（這不是上次8266做過了嗎==），不過這次加上了視訊串流（好棒棒？）

待整理資料
開機自動執行 script
web server
streaming server
remote car code


相關連結
https://www.techbang.com/posts/51579-course-raspberry-raspberry-pi-3-real-pet-car-workshops-gpio-displays-camera-image-identification-pets-car-implementations-application-entry-to-the-institute

PL2303HX windows 10 dirver 問題

原本明明還可以，結果突然就不行了。
上網找了一下答案，在小狐狸事務所找到了解答
可能買到了盜版晶片，改用2009之前的 Driver 就行了

小狐狸事務所
http://yhhuang1966.blogspot.tw/2015/07/pl2303hx-win8.html

2016 QNAP 黑客松記錄

報名了公司辦的第一屆黑客松活動，運氣不錯的在各組中拿了第一名。

我報名的項目是 IoT 應用，在公司剛公佈時先是想了很久是否要參加
以及要報名的組別，總共有三組 [UI/UX] [IoT] [Voice]，其中我覺得最難的應該是 [UI/UX]
[UI/UX] 本來就是需要時間調整及發想，要在一天內做出改善原有項目的內容，是很困難的事。

所以我選擇了 [IoT] ，內容就是之前自已一直很想做的多裝置連結，最基礎的構想就是透過 Linkit One 上的溫溼度感測器來觸發 ESP-8266 控制的斷電器控制電扇或是除溼機。

接下來就是尋找隊友，這次我們總共有四個人
Ricky - 設計部，負責視覺相關以及最後的上台簡報
Aix - RD1，負責核心規則引擎及觀察系統的資料流通是否正常
Wade - RD1，負責執行 device 與 NAS 的溝通介面
Dian - RD1，負責 device 及 UI 介面

運氣很好的架構的各項目都有不同的負責人，讓大家可以專心負責自已的功能範圍。

在短短的一天的黑客松中，最後的五分鐘Demo 才是重點
能不能在這黃金五分鐘中完整表達你想做的東西、你完成的東西。
在這次我看到很多組別做的東西都比我們厲害很多，結合了各種服務，但是很可惜在Demo時，不是來不及 Demo 就是出了一些狀況。

所以我們在項目快完成時做了很多 Demo 時的內容，一直調整要 Demo 的內容。

不知道明年還會不會有黑客松，不過我已經有一些想法了:P

ESP8266 WiFi 遙控車

還是要來記錄一下，畢竟是讓車子動起來了。
先列一下材料
--------
淘實買的小車套件 (零件品質還OK，但是沒附說明書，一開始的組裝有點辛苦 = ="）
ESP8266 ESP-201 - 主板
L289N - 雙輪馬達控制
YwRobot Power MB V2 - 5V 3.3V 電源供應
行動電源
9V乾電池一個

程式碼開發過程，很意外的沒有找到小車的範例，都是分開的像是 web server, L289N 控制馬達，又加上我是初學者，過程其實一直碰壁。
不過還好最後還是有解決，起碼動起來了。

但其實過系統很不穩定，反應又慢。但是我想還是可以參考一下。
下個版本的改進目標。

1. 穩定性要提高，目前有機率性死當，可以在console 中看到錯誤訊息
2. 反應速度加快（web socket?)
3. 把9V乾電池換掉，我測試程式跑完他也沒電了，傻眼
4. 在 Web UI 上要看到下的指令是否正常送出，現在不明原因，常常沒送出指令


附上程式碼連結
https://github.com/dianwu/ESP8266-Web-Ctrl-Car/blob/master/car.ino

順便看示我的實機照

看起來像是電子癈棄物

自製燈塔 V 0.5

上次帶彥去看 Maker 展後，某一天彥突然說要做「燈塔」
為了帶領彥的 Maker 魂，也只好硬著頭皮答應了。

燈塔......怎麼做呢？用比較長的箱子嗎？
在搜尋燈塔的照片時突然靈光一現，可以用兩個紙杯疊起來！！！
所以我的主結構就是紙杯，以下就是我的材料

1. 彥的勞作作品 x 1
2. 外帶用咖啡紙杯 x 2
3. 小手電筒 x 1
4. 閃光光膠帶 x 1 （我不知道正確名稱）
5. 瓦楞紙少許，做燈塔屋頂用
6. 熱熔膠少許

第一步：

全家的咖啡杯剛好在杯身上有劃兩條線，將其中一個杯子依藍線切下，就是燈塔的上半部

第二步：

挖洞，在兩個杯子的杯底挖洞，用來放手電筒的位置

以及在燈塔上半部依自已喜好挖讓光線透出來的窗戶

第三步：

將所有東西黏好，完成！！！！

其實跟我一開始所想像的差距甚多，所以有以下想改進的項目

1. 要會轉，燈塔要會轉阿，這也是彥提出的第一個問題
2. 不好開關，沒有改造手電筒的開關，所以每次開關都必須將整個燈塔拿起來
3. 希望可以加上網路，用聲音控制，開關及旋轉，難度很高，再想想。

看圖吧

ESP-8266 ESP-201 注意事項

因為我對電子的東西完全不懂， 剛買回來的 ESP-2866，依網路上的說明要更新 firmware 但是搞好久都搞不定，一直到我看到 如何燒錄 ESP8266 無線模組的韌體 ( 使用一鍵燒錄軟體，燒錄版本：0018000902 ) 才發現更新時的順序是
1. 先將8266及LLT 的 TXD 及 RXD 對接好
2. 將 LLT 接上 ＰC
3. 燒錄軟體設定好正確的 PORT ，執行
4.再將8266接上電源 〈---
就是最後一步的順序搞錯，讓我試了超久都失敗。
特別在這邊記錄一下。
=== 2016/07/03 更新 ===

後來發現每次斷電重開後，firmware 好像就被 reset 了
花了不少時間找問題，最後還是爬文找到了問題點。
主要是燒錄模式及工作模式的切換。
原本以為只要把 GPIO0 及 GPIO15 的接線移除就好了，實際是要把GPIO0再接回 3.3v 才是回到工作模式。

下列是幫助我找到問題的blog
http://sky4s.blogspot.tw/2015/11/esp8266-esp-201-x-arduino.html

=== 分隔線 ===
當我依網路上的說明更新完 Firmware 後又開始試 AT 指令
但是這完全是錯誤的一步阿！！！因為更新的 Firmware 就是 NodeMCU，傻瓜本人我一直以為只是更新 8266 的官方 Firmware，明明我自已從 NodeMCU 的 Git 上抓下來的更新程式 Orz


以上記錄內容有任何錯誤也歡迎路過的你好心指出錯誤糾正，避免誤人子弟。

附上接線圖，我不知道是不是我上方的3.3V 有問題，似乎接了沒反應

參考資料

*教學*Arduino WIFI(ESP8266) 初次上手應用

如何燒錄 ESP8266 無線模組的韌體 ( 使用一鍵燒錄軟體，燒錄版本：0018000902 )

IOT 專利課程感想

課程中提到 IOT 相關的內容，大概就是說因為 IOT 太抽像了，很多專利跟本不會寫 IOT ，所以在專利的搜尋的技巧及keyword 必須要注意，像 SMART HOME/ HEALTH/... ，課程中有提供一份國際專利組織的iot相關的專利編號統計報告，之後就是在說一些專利的解讀，有效無效等等的專利課程。

專利課程在公司所舉辦的課程中專利應該是最多的，應該有四五次了，但是除了課程及辦過一次比賽之外，好像也沒什麼力道在所謂的創新及專利，希望只是我不知道而已。
不知道其他公司是怎麼執行的，是由主管來判斷某某功能有沒有專利可能呢？還是有專人在檢視公司產品相關的新舊功能。

希望公司可以主動公佈有那些專利，對於激利士氣應該有些幫助吧。

由 Line bot 及 FB Message bot 猜測未來的App

以前在 MSN 盛行的時間，流行過一種 MSN 機器人，也就是透過簡單的對話選項，讓 User 與 MSN 機器人做資訊的交換，而最近 Line 跟 FB Message 都各自開放了 bot API

與之前的MSN 機器人的差別，是 MSN 其實沒有開放 API 是鄉民自已拆解 MSN 使用的 Protocol 而且可能隨著MSN 的改版，Protocol 也改了

但現在的 Line 跟 FB Message 則是由官方直接開放 API，所以不再會有因為改版而程式不能使用的問題。

另外在應用方面，以前的 MSN 機器人的溝通方式，大多類似於電話的答錄系統，你要北部天氣輸入[1]，你要中部天氣輸入[2]，輸入[1]之後可能又要再輸入各種不同的代碼，來取得 User 想要的資訊

但是現在有大數據的加持，光Siri 聽你說就可以幫你做事 ，如果再加上文字就可以更精確的給 User 要的資訊，起碼不應該再有像電話答錄的那種多層式的迷宮出現

所以將來小型的商家可能不用需要向使用說「我們的APP 上線了，下載可享優惠」，而是「你有Line/ FB Message 嗎？快加我好友享優惠」甚至主動加在店內路邊的客戶為好友

這是我想像的將來 ：）

Linux 指令系列 - profile

# 編輯 profile 設定

# vi /etc/profile

# 在 PATH 最後加上新增的路徑，格式為路徑1：路徑2：路徑3export PATH=path1:path2:path3

# 套用更新

# source /etc/profile

NAS 更換硬碟血淚記錄

前陣子NAS 的硬碟突然出現狀況，而且還兩顆一起，所以就開始了這場要命的更換硬碟之旅。

硬碟壞了怎麼辦？
當然趕快買新的來的換阿!!!立馬到PCHOME 買兩個來換
印像中容量只用了1T 左右，所以買個2T的來換是很合理的考慮，但是我錯了。

因為我原本是使用兩個 3T 的硬碟來做 RAID 1，所以換上 2T 的系統就跟我說"不行唷!這個硬碟太小了"
在這個情況下，系統也不給我把 2T 的硬碟直接做一個新的 Volume，這個限制我覺得很麻煩。
系統可以不自動建立新 Volume 但是希望可以給使用者手動操作。

所以我又買了一個硬碟的外接 dock，收到 dock 後就把原本的舊硬碟接到 dock 上，想說直接把資料 copy 到新硬碟上就好了
沒想到系統認不出來....也許是壞的比較嚴重吧。(但是後來又認到了......)

只好無奈的將舊硬碟接回系統，讓資料旅行一下，以下我安排的行程
[舊硬碟@NAS] -COPY-> [新硬碟A@外接] -COPY-> [新硬碟B@NAS] -建立RAID 1-> [新硬碟AB@NAS]

BUT!BUT!!BUT!!! 就是這個BUT!
我在建立RAID 1操作錯誤，應該要選 [遷移/migrate] 但是我卻選到 [建立/Create]，因為很神奇的是他們不在同一個分頁裡，如果在同一個分頁也許我就不會選錯了吧(馬後炮來著....)

每次資料 COPY 的時間跟建RAID都大約都要 8 到 9 個小時，就算只搬一次，還是很久。
所以我在建RAID 時選錯，等於浪費了18個小時左右。

不過幸運的時我在建完 RIAD 後，再次把舊硬碟用外接的方式存取成功了，所以我應該只要再花 9 小時就可以把 NAS 回復正常狀況了。

這次的過程讓我深刻體驗到在使用 NAS 維護的麻煩

總之
1. 組成RAID後硬碟只能越買越大，買錯就麻煩了。
2. 資料搬移的時間非常的長，我才 1T 的資料 就要搬 9 個小時，正常？
3. 硬碟的費用與線上空間相比算是便宜，如果以 Google Drive 的方案來算 1T/月/310NTD (9.99US)，5000(兩個 2T 硬碟)只能用八個月
4. 我也忘了我到底壞掉的硬碟用了多久，如果 NAS 能夠提供這個資訊也不錯。

How to use Sencha Cmd for Chrome offline App

之前就試過直接用 sencha cmd build 出來的 code 是沒辦法在 Chrome App 模下執行的
像這個教學中，他是使用 ext-all-dev.js 及 app.js 而不是使用 Sencha Cmd build 出來的 code
如果直接用 build 出來的 code ， 整個 Extjs 會因為安全因素而無法初始化完成

在 console 看到下列的訊息

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

但是只要加上這個設定 app.output.manifest.embed=true，build 出來的 code 就可以正常的初始化了 :-)
不過還有沒有其他的問題就不知道了 :P

參考資料：
https://crxdoc-zh.appspot.com/apps/sencha_framework
http://www.sencha.com/blog/how-to-create-google-chrome-apps-and-extensions-from-your-ext-js-app/

g0v summit 心得

難得去參加了，留個心得做紀念吧

自問自答開始

Q2. 參加那些項目呢？
Ans: 開放國會 - [Interest Inspector/Using Open Data to Empower Others]
參與式民主議程座談
開放資料與環境 - [Open Weatherdata/環評為何這麼容易被判決撤銷？－兼談經濟與環保的拔河/環境議程座談]

Q1. 有什麼收獲呢？
Ans: 對我來說，內容有點太硬了，好像去聽程式技術的比較實在一些
在開放國會的部分主要是外國的講者介紹，他們在各自的國家透過開放的資料怎麼記錄監督政府，從法案、金流、到網路上的一言一行。在美國因為歐巴馬上任後一直在推動開放資料所以在美國的確人民在監督政府是相對有利的。

Q2. 下次還會參加嗎？

JSDC 2014 心得報告

我個人比較有感覺得的是

= 第一天 =

- Use Node Modules In The Browser With Browserify

- 很有趣，透過 Browserify 把後端跟前端的區隔拿掉了，雖然node.js 也是用 js 在執行，但是實際上後端跟前端的東西還是不太一樣，有了 Browserify 讓前後端的差異更小一些，雖然我目前還沒想到有什麼地方可以運用的上

- 不被重視的 HTML: Accessibility

- 我從來不知道 HTML 有這功能(汗)，之前以為是外掛的程式依畫面上的文字唸給使用者聽，要我認為這是有必要的東西，網頁應該對每個使用者都公平。這功能其實很單純，就是讓網頁說話而已，但要做的好其實很困難 。

- RxJS for frontend developers.

- 介紹了 RxJS 的概念，一種更接近現實世界的處理模式，剛好我今天早上有用這個概念修好了某個BUG :)

= 第二天 =

- The 90 Minute App(本來就是主要目標)

- 主要就是快速了解一 Sencha CMD 跟 Extjs 5 的特性(我原本是用Extjs 3)，有人說明是比自已看document 好多了，我有打算用他的範例，改一個我想要的東西出來:)

- Teaching Git and GitHub with Node.js

- 大概是介紹他們怎麼推廣Git，有介紹一個 node.js 的模組，那個模組也是教你怎麼用git 的

其他的比較屬於後端，或者沒興趣的，就還好。

改進的部分的話，其實我會想要在會議開始前就可以看到講者的slide，可以事先預習一下，不然如果有聽到不懂的地方(特別是不同語音的時候)，你停下來想，講者還是持續前進，可能就掉就一大段了。

希望明年還會再去參加，但是票價可以低一點

App 分享 - 哆啦A夢 AR

因為彥彥非常喜歡哆啦A夢，所以在網路上看到有關的消息多少都會注意一下，前陣子因為哆啦A夢要出 3D 電影，所以日本當地有做了一些活動，其中一個就是哆啦A夢 AR 的 App。

Git + Grunt

花了一個晚上終於搞定 Git + Grunt 環境設定，必須把他記錄下來，不然我想應該大約三天我又忘了，然後再花一個晚上設定

首先依 gruntjs 的教學頁，設定初始環境
有一個問題是，我在 windows 7 的環境下用　PowerShell 不能依他的說明使用 %USERPROFILE%\.grunt-init\ 來安裝 init template，所以我是手動切換到使用者目錄下執行下載 init template的動作。
接下來scp 的設定，我上次也卡到一次參數 cwd 就已經切換到指定的目錄了，src 的路徑要設對，不然會一直鬼打牆沒錯也不知道錯在那。

這次好像就這樣.....
突然要打又沒有東西可以打....加油

http://dianwu.github.io/d3-d3/

angularJs With Diablo 3 API - 3

今天使用 ng 的 select 來把資料做成 select option 但是在第一筆的位置多了一個selected 的資料，應該是 d3api 直接回傳回來的。

主要的code


參考網址
https://docs.angularjs.org/api/ng/directive/select

angularJs With Diablo 3 API - 2

今天把亂亂的資料，透過 ngRepeat 把 heroes 的資料列表出來。

也算前進一點點。

angularJs With Diablo 3 API - 1

今天花了點時間，練習一下 angularJs。
其實一直在想要做些什麼，太大的東西又沒時間做，所以就拿平常在玩的D3來練習，
然後又在想要用什麼來做，nodeJs, Chrome Extension 都有想過。

nodejs 我加上npm 的 forever 模組，讓他可以持續的記錄我 D3 裡面的狀態，暫時沒有其他進度，等到資料多一點，看能不能玩個圖表之類的東西。

Chrome Extension，之前試過一下子，但是沒有後續…。

目前這個想做成可以比較兩個 BattleTag 的角色資料，因為每次在巴哈上看到的，其實我都看不懂差別在那><。

最簡單就是直接用表格，但是目標是透過 d3js 來產出圖表。

進度整理：

• 指定 Server
• 指定 BattleTag
• 取得 BattleTag profile

都是最最基本的東西…，加油!!!