Coding life

現在都在給人家傳教使用electron((X github page 之前的編輯器介紹部分也有做介紹visual studio code, bracket, Atom, 這一系列編輯器base on electron 那就來介紹一下何謂electron吧 把你在網頁上運行的程式碼可以做成桌面APP 只要簡單幾行程式碼，可以達成前後端溝通，底層控制，而且跟網頁執行情況一樣 簡而言之，他就是包含了一個可以進行底層運作的瀏覽器，底層實作是透過nodejs， 渲染畫面則是用了chromium來實作，背後支援團隊是github 原本項目的名稱為atom-shell，之後再改名為electron，目前已經有很多家的企業採用electron為製作desktop application 打著Build cross platform desktop apps with web technologies的electron，其實從之前就有一直關注，我有時會利用它來撰寫一些比較簡易的桌面APP來玩 基本安裝 yarn [global] add electron 因為最新的electron使用node7 的版本，意味著基本的ES6都支援了，連ES7的async/await都可以玩的到 以下是簡易的開啟一個視窗的功能 啊...另外由於我懶得用typescript再重新進行compile過程，所以接下來都是用香草js來進行實作 const { app , BrowserWindow } = require ( 'electron' ); function createWindow () { // 設定寬*高 let mainWindow = new BrowserWindow ({ width: 1024 , height: 768 }); // 將畫面放到最大 mainWindow . maximize () // 主頁面設定，相當於web首頁 mainWindow . loadURL ( 'file://' + __dirname + '/index.html' )

這兩個都是nodejs的版本管理工具 不過很可惜的是n無法在windows上使用，而nvm則是要利用nvm-window 額外補充:nodist也是一款在windows尚可運行的管理套件不過我還沒有測試過之後在進行補充 照例 n : github page nvm : github page nvm-window : github page 因為現在工作環境在ubuntu16.04上面，所以我比較常用n來去做我的nodejs版本更新或者返回的動作 另外值得一提的是 n在切換nodejs版本時不會重新設定你的node_modules而nvm會 所以常用的global套件在使用nvm切換版本就得注意要重新安裝，不過當切回版本時global相關又會回來了 還有，在安裝nvm的時候，系統當中必須'沒有'安裝nodejs，nvm才能開始進行初步安裝 如果是使用n就不會有這問題 主要原因是兩者的安裝nodejs方式不同 首先看n安裝的部份 yarn global add n 再來是nvm安裝 (安裝在ubuntu 16.04\) curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 或者 wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 一個是裝在global node_modules當中，另外一個則是利用shell script的方式安裝， 如果一開始就有先安裝nodejs的話，在初始進行shell script的階段就會出錯 這點須特別注意 接下來就是指令對照，我只取常用的部份 n lts 安裝或者使用lts版本的nodejs n [version] 安裝或者使用者輸入特定版本號之nodejs version can be latest lts or x.x.x version name nvm install --lts nvm安裝lts版本nodejs nvm install [version] 注意：nvm當安裝

照例： github page 最原本我是使用connect搭配 serve-static 實做 const   connect  =  require ( 'connect' ); const   serveStatic  =  require ( 'serve-static' ); connect (). use ( serveStatic ( __dirname )). listen ( 8080 ,  function (){      console . log ( 'Server running on 8080...' ); }); 主要流程大概就是如此，搭配上 ngrok 大概可以測試個ssl需求的東西 後來從其他地方發現live-server這個好用的東西就拿他來做我暫時性測試和restful api的實做 另外live-server有提供live-reload的功能，只要當前關注的資料夾有異動，會自行reload，不過缺點是並不會clean cached 和 hard reload，這點請注意 一樣起手式 yarn global add live-server 在全域底下安裝live-server live-server [--arguments] 在該資料夾底下直接透過cmd、teminal直接啟動，在指令完成時會啟動default browser然後開啟頁面 沒有做其餘的設定的話，基本出來的url為 http://127.0.0.1:8080/ 如果沒有其他的指令的話，這基本上為固定的預設值，當然接下來就是介紹其他我常用的arguments --port=NUMBER 其實liver-server會自行檢測那一個port被佔用，然後自行尋找新的port --cors 這個提供api可以提供Access-Control-Allow-Origin，拿來做api測試服務很好用 --ignore=PATH || --ignorePattern=REGEX 設定忽略的位置，或者透過regular expression來做設定，這項我通常是放node_modules, package.json的部份 --watch=

github page ts-node是直接執行typescript使用的，若是不想做tsc的動作而直接執行的話可以直接利用 ts-node <path-to-file> 直接去做執行 這中間當然可以套用一些其他的options不過簡單執行這個即可 注意：因為ts-node是執行typescript，所以先確定系統當中是否已經安裝typescript 一開始當然先說起手勢啦 yarn global add ts-node 上一篇提到了yarn那就當然用yarn來做安裝的動作啦 安裝期間東西會有點多，網速慢的大概要注意一下 雖然說ts-node可以直接執行typescript的程式，但是實際上執行情況是先將typescript先compile後放在cache中，然後再做執行，所以並不會像nodejs運行js檔案那樣來的快速，中間還是會有經過一次編譯的動作 該報錯還是會報錯，不過好處是它會直接trace到.ts的檔案，一般的.map.js檔案如果當中沒有註冊或者安裝其他套件做設定的話，最高一層只會追蹤到js就停止，並不會往上追到原始碼去 Options: -e, --eval [code] Evaluate code -p, --print [code] Evaluate code and print result -r, --require [path] Require a node module for execution -C, --compiler [name] Specify a custom TypeScript compiler -I, --ignoreWarnings [code] Ignore TypeScript warnings by diagnostic code -D, --disableWarnings Ignore every TypeScript warning -P, --project [path] Path to TypeScript project (or \`false\`) -O, --compilerOpti

來整理一下覺得不錯用的工具...以後應該會在繼續更新 首先是 yarn ，這東西是由facebook開發的，速度號稱是比npm還要快，我之前沒有很認真測過速度，不過就某些已安裝過套件包的部份來做比較的話，yarn的確有其優勢 另外需要注意的是  yarn不支援nodejs 4.5以下的版本，所以有專案在4.5以下的使用的話要仔細考慮 現在安裝的部份就ubuntu來說可以透過apt-get安裝方法，具體方法如下 from : yarn installation curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt-get update && sudo apt-get install yarn 接下來介紹yarn的指令 yarn 跟  npm install   一樣的用法 先安裝package.json裡面的dependencies，不過這邊值得注意的一點是，在yarn 0.17好像會把bower_components幹掉，所以我會先yarn再做bower yarn add <package-name>@<version> [--dev] 只是把  npm install --save   稍微換個名稱而已，基本用法差不多，值得注意的重點在於安裝全域的套件時要用以下的指令安裝 yarn global add <add/bin/ls/remove/upgrade> [--prefix] prefix帶出的是你所想要安裝的位置 接下來講install的相關 yarn install [--options] 就是  npm install   的擴充 options有數種屬性，我挑我會用的簡介 force : 重新下載一次dependencies，在寫程式當中可能因為某些原因動到裡面的原始碼，這時後不需要幹掉node_modules重載，只

今天開機發現了螢幕log in的部分沒有了input field的黑色小框框 我猜是周五裝了一些東西沒有仔細檢查就做了update的關係吧.... 情況大概跟 這篇 有點像 不過還是可以輸入進去畫面 不過進去後所有的東西都跑掉啦，button的邊框、選擇的邊框、filesystem變得我都認不出來你是啥鬼、Wallpaper變黑的 第一直覺是unity你又再玩我了，基本上ubuntu有關視覺效果部分找unity算帳大概八九不離十 不過在檢查的時候一時不小心手賤KEY了以下指令 $ sudo startx GOOD  我的login部分可以loop了.... ctrl+alt+f1切上Terminal趕快把家目錄底下的.Xauthority幹掉重開再進去 接下來就是回復桌面的項目... sudo apt-get udpate sudo apt-get autoremove ubuntu-desktop unity sudo apt-get install ubuntu-desktop unity 或許有人說不是用 sudo apt-get install -reisntall ubuntu-desktop 就好，我試過，很神奇的沒有用... 結果我的桌面依然沒有出現不過按鈕其他的地方正常啦 想說就算了 之前因為有動過.conf的地方  很多東西要重來 開始處理輸入法問題((對  我的輸入法也跑掉了 這中間又發生一件手殘的事情.... sudo apt-get autoremove ibus 導致我的top banner 和 launch bar消失 然後就開始默默地重新安裝起了ubuntu-desktop 和 unity... 參考的是 這篇 然後回頭想到是不是我只有update沒有進行過一次upgrade 於是做了一次 sudo apt-get upgrade 謝天謝地  背景、launch bar、top banner全部都回來了，覺得開心

fetch是chrome 43版有的新功能 他是使用Promise去達成async的方法 可惜nodejs中沒有支援fetch必須安裝第三方node-fetch去達成fetch的使用 P.S. 目前我用的7.7.3版依然沒有內建，request老實說已經不想用了 另外最近覺得蠻感動的是chrome 57支援async/await原生啦，不過目前專案的瀏覽器受限於OS只能用43...OTL 就來簡單介紹一下它的功能吧 fetch說道能夠取代xhr和jquery的ajax大概是他的code捨棄了使用callback function這種噁心的東西 改成了目前處理同步/異步最方便的Promise語法 export   default   function   fetch ( url :  string  |  Request ,  init ?:  RequestInit ):  Promise<Response> ; 我直接拉node-fetch的定義檔說明 後面很明顯的return出來的是Promise的物件，解構之後會得出來是一個Response的東西。 一般對我來說最常用的大概就是POST和GET 所以使用方式就是 import   fetch   from   'node-fetch' ; let   a  =  async () => {      let   data  =  await   fetch ( 'localhost://getData.com' )                         . then ( res => res . json ()); } 如果用import * as fetch from 'node-fetch'; 會出現 Cannot invoke an expression whose type lacks a call signature. 這行錯誤，就像我文中那樣進行宣告就好了 .then(res=>res.json()) 這個階段的東西稱呼為body裡面含有一些相關的資訊，繼續來看定義檔(所以我說有定義檔真的對CODE理解幫

最近在使用 dbus-native 來讓後端service可以接收DBUS訊號以及發出訊號至DBUS 因為使用typscript開發習慣了(想當初寫JS才發現有強型別的定義真的..差很多)，所以一開始就在找這隻檔案的定義檔有沒有放到@types的倉庫 OK...沒有 這個意思就是說，假若說我想要使用DBUS的話我必須要自行去定義，或者...乾脆直接硬幹 硬幹的話大概就是加入以下的東西就可以使用 import dbus = require("dbus-native"); 可是這樣就是沒有定義檔的提示可以使用 對於已經被TS養大胃口的我來說就很不方便... (另外一提，在javascript也是有IDE做提示function使用，不過Linux沒辦法使用visual studio，eclipse 吃資源，Webstorm沒錢 QQ) 對於這種IntelliSense,可以使用以下的方法添加最基本的支持(不過這對我目前的專案支援度超低...) 在require dbus的package後，我們是會從index.js開始對整支程式存取及使用，網路上有人做出對於該項package轉definition的工具，可惜...沒用，以下是這支程式的一部分程式碼 module . exports  =  createConnection ; module . exports . createClient  =  function ( params ) {    var   connection  =  createConnection ( params  || {});    return   new   MessageBus ( connection ,  params  || {}); }; module . exports . systemBus  =  function () {    return   module . exports . createClient ({      socket:   '/var/run/dbus/system_bus_socket'   }); }; module . exp

其實es6是yield來做標題所述的流程控制, 不過說真的我比較習慣用promise with async await... setTimeout (() = > { console .log ( 1 )}, 5 ); setTimeout (() = > { console .log ( 2 )}, 1 ); setTimeout (() = > { console .log ( 3 )}, 3 ); setTimeout (() = > { console .log ( 4 )}, 2 ); 以下是結果 2 4 3 1 這樣的情況最容易發生在讀取外部資料時程式在還未接取完全資料,流程卻繼續進行下去 以往是使用callback function來解決這個衝突, 不過這樣非常形成callback hell導致程式維護以及閱讀不容易 目前的nodejs以及新的瀏覽器都有提供了promise的用法,在nodejs 7.0以上的版本有支援async await的語法, Typescript於 2.1也可以編譯async await後在es3 es5的情境下使用 剛剛寫的是用typescript不過在沒有加註情況下跟es6差不多.... 假若說我希望是顯示結果是1 2 3 4這樣照順序下來的話... new Promise ((res,rej) = > { setTimeout (() = > {res( 1 )}, 5 ); }).then(res = > { console .log (res); return new Promise ((res,rej) = > { setTimeout (() = > {res( 2 )}, 1 )}) }).then((res) = > { console .log (res); return new Promise ((res,rej) = > { setTimeout (() = > {res( 3 )}, 3 )}) }).then((res) = > { console .log (res); return new

在進行初始使用的時候, 沒有權限問題的database用起來感覺很不安心 search了一下一些基本資料開始將mongodb開始進行最初的簡易設定 以下的使用平台在ubuntu 16.04 LTS 4.7 linux kernel mongodb 3.2.1 一開始要先進行資料庫位置的起始設定,要不然會無法正常啟動database $ sudo mkdir -p /data/db 建立好資料庫之後, 我將執行權限進行變更 $ sudo chown username:username /data/db 這樣我的帳號就可以不用透過sudo去將資料庫執行以及讀取了 開始建立帳號密碼 在3.2.1的資料庫當中  帳號創立的方式不太一樣  一開始在設定時我還以委我做錯啥了XD 進入權限模式 $ mongod --auth 透過mongo shell去存取資料庫 $ mongo 進入權限 $ use admin 開始創立帳號密碼 $ db.createUser({         user : "<user-name>",         pwd : "<pass-word>",         roles : [                     "userAdminAnyDatabase" , "dbAdminAnyDatabase" , "readWriteAnyDatabase"                   ]     }) 之後要進行動作就要透過 $ db.auth('<user-name>', '<pass-word>') 來開始進行作業 mongodb最近開始打算練習啦, 新的一年有好多打算開始學習的東西, python, java, reactjs meteor,以及一些有的沒的 最近遇到一些事情真的有點喪