Neutralino是什麼？

自從有了Electron後，以往許多只在Windows上推出桌面應用程式的軟體都紛紛推出Mac和Linux版，讓在這兩個平台上工作變得簡單和舒服了許多；這都是多虧了它的跨平台性所賜。

大家常用的Vscode Studio，也是利用它開發出來的。

然而Electron有一個讓人恨到極點的缺點：那就是它會將網頁(應用程式內容)和顯示內容用的瀏覽器(Chromium）打包在一起，也就讓每一個Electron應用都胖得要死！於是雖然它能讓開發者輕鬆開發跨平台應用，也能利用HTML + JS + CSS 如同寫網頁那般隨意地製作GUI，但也遂漸被重視性能和輕巧的人們敬為遠之。而針對這個問題誕生的，正是Electron的替代品－－Neutralino。

Neutralino是一款主打輕量化的桌面應用開發框架，它在功能上基本跟Electron差不多，但不會像前者那樣把Chromium與應用打包在一起，而是會使用系統內建的瀏覽器內核（例如在Windows上會使用Edge）來渲染內容，如此一來就能保證速度之餘達到輕量化的效果。（關於Neutralino和其他同類框架之間的性能比較，請參考這裡 。）

由於Neutralino同時支援純Javascript和前端框架開發，本篇文章主要講述如何利用NeutralinoJS和VueJS，構建屬於自己的跨平台桌面應用程式。

1. 安裝Neutralino的命令行工具：
npm install -g @neutralinojs/neu

neu create [專案名稱] --template neutralinojs/neutralinojs-zero

3. 進入資料夾，移除空白模板內的網頁內容：
cd ./[專案名稱]
rf www

4. 建立存放Vue專案的資料夾替代之，並將專案命名為”vue-src”：
npm create vue@latest

neu update

7.  構建Vue專案內容：
cd ./vue-src
npm install
npm run build

8. 回到專案頂層資料夾，運行Neutralino：
cd ..
neu run

登登！大功告成！之後的開發基本上跟平常的Vue應用差不多，但如果需要用到本地應用的API（例如儲存檔案，打開檔案等），就需要參考官方文檔了。

更完整的例子可以參考我寫的這個簡易To-Do-List應用：

https://github.com/falconshark/Neutralino-To-Do/

祝各位開發愉快！

首先在自訂模組的links.menu.yml（例如your_custom_module.links.menu.yml）下新增以下內容：

system.admin_config_new:
title: 'My New Config'
route_name: system.admin_config_new
parent: system.admin_config

然後再在routing.yml（例如your_custom_module.routing.yml）新增內容：

system.admin_config_new:
  path: '/admin/config/new'
  defaults:
    _controller: '\Drupal\system\Controller\SystemController::systemAdminMenuBlockPage'
    _title: 'My New Config'
  requirements:
    _permission: 'access administration pages'

清除緩存後即會生效。

以上代碼中請將自行將route名改為想要的名字，path和title同理。

不知為何自從node-sass升級後，-w的選項就一直沒有生效過－－能執行成功，但無法偵測指定Sass/Scss檔案的修改，這樣在無法使用IDE（例如在伺服器作業）的情況下編譯檔案會變得有點麻煩。

目前想到的解決方法是改用Gulp 監視檔案修改，有點麻煩但最少有效。

1. 安裝gulp和gulp-sass：

npm install gulp gulp-sass
yarn add gulp gulp-sass

2.創建gulpfile.js，輸入以下內容：

vi gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('watch', function () {
  gulp.watch('./css/*.scss', gulp.series('build:scss'));
});

gulp.task('build:scss', function() {
    return gulp.src('./css/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css/'));
});

3.在Package.json加入Watch指令：

  "scripts": {
    "watch": "./node_modules/.bin/gulp watch"
  }

4.想要編譯Sass/Scss檔案時，運行Watch指令：

npm run watch
yarn watch

完成。逃避可恥但有用，對吧？

用Fetch抓取和傳輸資料雖然很方便，也遇上CORS問題的時侯就笑不出來了。查資料加上除錯了一整晚，最後終於知道要如何在API 使用Let’s Encrypt重定向的時侯到底要怎樣避免CORS問題。

首先，要在後端程式加上Access-Control-Allow-Origin的Header。這應該大家都知道了，但還是提醒一下這個是基礎第一步喔。以PHP為例子：

header("Access-Control-Allow-Origin: *");

之後你可能會發現：咦？為什麼我設定了Access-Control-Allow-Origin，還是會出現同樣的問題呢？原因非常簡單：CORS不接受2xx以外的Staus Code回應！

用Fetch POST JSON時，瀏覽器會先發出OPTION的請求。這時Nginx如果不好好處理，就會給出405回應，導致問題發生。

所以我們要在Nginx的設定裡加上這個：

location / {  
    if ($request_method = 'OPTIONS') {
        return 204;
    }
} 

重啟Nginx後就能解決問題了。

順便提醒一下，前端的Code也需要注意在CROS模式下Fetch的時侯不能帶Header，否則一樣會出現問題喔。嚶嚶嚶。

  fetch(apiUrl, {
      body:JSON.stringify({
        width: 500,
        height: 300,
        imageUrl: imgUrl,
      }),
      mode: 'cors',
      method: 'POST',
    })

鳴謝Front-End Developers Taiwan的翁傳翔和林坤南先生指出文中問題！

在沒有Key或者Id的情況下，比對Object真的是世界上最噁心的一件事情了。

最簡單的方法是這個：

const object1 = {"Name": "Hello"};
const object2 = {"Name": "Hello"};

if(JSON.stringify(object1) === JSON.stringify(object2)){
  return true;
}

很簡單對吧？然而世界沒有那麼美好。更多時侯你會遇到這種情況：

const object1 = {"Sex": "Girl", "Name": "Hello"};
const object2 = {"Name": "Hello", "Sex": "Girl"};

這種時侯用上一種方法是會Return False，失敗的。手寫排序Function是一種處理方法，但工時不足的情況下可以考慮用Sort Object這個模組解決問題：

const sortObj = require('sort-object');
const object1 = sortObj({"Sex": "Girl", "Name": "Hello"});
const object2 = sortObj({"Name": "Hello", "Sex": "Girl"});

if(JSON.stringify(object1) === JSON.stringify(object2)){
  return true;
}

好了，輕鬆搞定。如果遇到更複雜的情況，需要深度比對的話，那就需要另一個名為Deep Equal的模組了。

const sortObj = require('sort-object');
const equal = require('deep-equal');
const object1 = sortObj({"Sex": "Girl", "Name": "Hello"});
const object2 = sortObj({"Name": "Hello", "Sex": "Girl"});

if(equal(object1) === equal(object2)){
  return true;
}

過於依靠他人的模組是不好的事，但這是最簡單和最快的方法了。有空的時侯再研究一下怎麼手寫出同樣的功能吧！

◢▆▅▄▃崩╰(〒皿〒)╯潰▃▄▅▇◣

要用Docker架設Mastodon並不困難，要升級更加不難，但當初官方寫的教學文檔好像已經很久沒更新了，所以還是寫一寫吧。

要升級Docker版Mastodon，首先要進入你的Mastodon資料夾，運行以下指令：

cd <你的Mastodon資料夾路徑>
git fetch && git checkout <目前最新版本，例如v2.7.3>

Git Checkout能讓你的Mastodon代碼馬上更新到指定版本。但Docker裡的代碼並不會隨之更新，所以我們還需要用Docker Compose重建Image，最後重啟Container即可：

docker-compose build
docker-compose up -d

一般來說，到了這個步驟一切就已經大公告成。可是某些比較大型的更新需要更新資料庫或其他額外步驟，建議參閱Mastodon更新日誌裡的Upgrade notes。

WordPress 的get_posts() Function 對於Plugin或者Theme 開發者來說都很有用：相對上沒有WP_Query那麼複雜，但同樣支援WP_Query應有的功能。但是，Wordpress 的API文檔上好像沒有提到這點哪？

事實上，get_posts的參數是跟WP_Query共用的。也就是說，如果你想在使用get_posts()搜尋文章時排除特定分類，只要這樣就好了：

  $posts = get_posts(array(
    'category__not_in' => array(76), //此處必須為分類ID（TAG ID），不可使用SLUG
  ));

看，很簡單對吧？

不過，果然我還是比較喜歡Drupal …..

參考資料：

exclude category from get_posts?

Cisco AnyConnect Client每次當我打開Mac的時侯總會自己跳出來，偏偏因為工作因素又非裝不可，只好找點方法取消它了。

在網絡上查到的方法如下：

cd /Library/LaunchAgents
sudo rm com.cisco.anyconnect.*

原理是在LaunchAgents資料夾裡把Anyconnect的部份刪掉，理論上之後重新開機的時侯就不會再讓它跳出來了。

好一個令人頭疼的軟體。

參考資料：

Stop Cisco AnyConnect Secure Mobility Client from starting up automatically

之前我曾經寫過一篇文章教大家怎樣用LiquidSky來在Mac上玩遊戲，但非常不幸地Liquidsky突然宣告關閉，從此我們就失去了如今世上唯一支援亞洲地區的雲端遊戲服務，只剩下貴得嚇死人的Parsec + AWS方案可以用。

但真的這樣就完了嗎？不！為了節省開支的同時維持原來的雲端遊戲習慣，我做了非常多研究，到最後得出的結論是－－只要用Google Cloud，一切還是有可能的！為什麼偏偏是它呢？

使用Google Cloud有以下幾個優點：

1. 註冊後會贈送為期1年的300美元免費限額，在這段期間可以無限任玩。

2.   允許自訂虛擬機器的配置。你可以按照自己的遊戲需求訂制雲端電腦，不必像AWS那樣必須使用它準備好的機器，增加開支。

3. 顯卡效能比AWS好。（畢竟可是Tesla P100啊）

4. 支援台灣地區（這個最重要！）

玩雲端遊戲時如果伺服器跟客戶端不處於同一／鄰近地區，延遲將會讓遊戲體驗大打折扣，這樣一點都無法體驗到好處。所以Google Cloud支援台灣地區這點，可是說是它最大的優勢。

關於如何註冊Google Cloud Platform將不多解釋，詳情可以參考以下文章：

谷歌免费一年vps：Google Cloud Platform

首先，打開Google Cloud Compute Engine，建立虛擬機器，區域選擇asia-east1（台灣）的asia-east1-a或asia-east1-c，因為a區的GPU只有K80可以選擇。以下是我的雲端遊戲機器規格，各位可以按照自己需要作出調整，但筆者推薦使用Windows Data Center 2016，最少有100GB SSD，4 vCPU和8GB 記憶體的機器，否則遊玩時容易出現卡頓情況，影響遊戲體驗。另外Tesla P100是GPU的最低配備，K80雖然便宜但並不適合遊戲。

設定虛擬機完畢後，點擊管理並勾選先佔狀態。先佔伺服器只能維持24小時，但我們一般不需要長時間運行遊戲伺服器，只要每次關機前建立快照保存狀態即可，因此使用先佔能為我們減省不少開支。

完成後，我們還需要設定防火牆規則。Google Cloud預設的網絡支持透過RDP連線至Windows伺服器，但那並不能滿足我們的遊戲需求，只能作系統管理之用。之前在介紹Liquidsky時提過的Parsec遙控軟體，才足以應付一切。所以，我們要在選單＝＞VPC網絡＝＞防火牆規則裡新增一條規則：允許所有UDP輸入。詳細參照以下圖片：

如此一來，你的VM就基本設定完成了。但是等一等！這麼簡單就解決了嗎？答案當然是「NO」！

我們必須透過RDP連接至伺服器，安裝顯示卡驅動程式，音效驅動程式，Parsec，建立登入帳戶才算得上是完成一切。Mac可以在App Store取得Windows Remote Desktop Client，Windows的話本身已經自帶客戶端，無需額外安裝。

RDP的使用方法請參照微軟官方的Remote Desktop教學：

各種驅動程式可至此處取得：

Nvidia GRID video driver: http://zuikaku.me/onlineDisk/downfile.php?id=a3d854f66c1b58865f6767ee834638b1d60ea878

Parsec: https://s3.amazonaws.com/parsec-build/package/parsec-windows.exe

VB-Cable virtual audio driver: http://vincent.burel.free.fr/VirtualAudioApps/VBCABLE_Driver_Pack43.zip

重新啟動後，右鍵工具列上的開始按鈕，選擇Computer Management ，選擇 Local Users & Groups ，右鍵User新增用於Parsec的Windows帳號，輸入帳號及密碼後選擇Password never expires，建立後到Group雙擊Administrators，將剛才新增的帳號加入到Administrators即可。

最後跟Liquidsky時一樣，在伺服器上啟動Parsec，再透過客戶端連線，登入，一切大公告成！

為什麼不能使用Google Cloud預設的帳號，要額外設置呢？原因是因為我們每次開始使用雲端機器前，必須先用RDP連接預設帳號並打開Parsec，這樣我們才能透過後者連接到伺服器。但由於Windows帳號不能被同時登入，一但預設帳號登出Parsec將無法運作，因此我們需要準備兩個帳號，新建立的帳號用來在Parsec上登入，才能避免這個情況發生。

最後的最後，記得設置RDP Session時間上限避免被自動登出喔！

Disable remote session timeout on Win Server 2012 R2