Ubuntu 20.04 Spotify無法播放本地音樂問題

一開始以為Ubuntu20.04不能播放本地音樂是資料夾問題,結果一查才發現原來只是缺少了某些Library罷了。 

首先安裝必要的軟體:

sudo apt install ubuntu-restricted-extras ffmpeg

下載Spotify提供的Library並複製檔案至:

git clone https://github.com/ramedeiros/spotify_libraries.git
cd spotify_libraries
sudo cp lib* /usr/lib/x86_64-linux-gnu/

執行ldconfig:

sudo ldconfig
#修正檔案連結
sudo ln -frs /usr/lib/x86_64-linux-gnu/libavutil.so.52.6.100 /usr/lib/x86_64-linux-gnu/libavutil.so.52
sudo ln -frs /usr/lib/x86_64-linux-gnu/libavformat.so.54.36.100 /usr/lib/x86_64-linux-gnu/libavformat.so.54
sudo ln -frs /usr/lib/x86_64-linux-gnu/libavcodec.so.54.71.100 /usr/lib/x86_64-linux-gnu/libavcodec.so.54

 完成。其實我也只是照樣參考資料寫的,這個解法… 

參考資料:

https://community.spotify.com/t5/Desktop-Linux/Linux-Local-files-do-not-play-on-Ubuntu-16-04-SOLVED/td-p/1343831

Ubuntu 18.04解決無法使用VirtualBox共享剪貼簿的問題

裝在VirtualBox裡的Ubuntu18.04之所以辦法共享剪貼簿,是因為缺少了名為virtualbox-guest-x11的套件。 

照樣安裝VirtualBox Guest Addition後,再打開終端機輸入指令安裝此套件:

sudo apt-get update
sudo apt-get install virtualbox-guest-x11

遇到版本相容性提示訊息時,選擇安裝新版本。

再手動啟用共享剪貼簿功能即可:

sudo VBoxClient --clipboard

Drupal 8 在/admin/config頁面下新增分類

首先在自訂模組的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 Watch不能正常使用的暫時代替方案

不知為何自從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

完成。逃避可恥但有用,對吧?

如何在使用Let’s Encrypt + Nginx 重定向的情況下避免CORS問題?

用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翁傳翔林坤南先生指出文中問題!

如何讓遠端伺服器使用自己電腦上的SSH Key?

習慣用Git在伺服器上部署網站後,已經不想再用FTP或者SFTP這麼老套的方法來做事了。

不過如果想用SSH的方法訪問Git,很多時侯我們需要先為伺服器準備獨立的KEY,這樣實在有點麻煩。其實最好的方法是使用SSH Agent Forwarding讓遠端伺服器也能使用你電腦原來的金鑰,做法也非常簡單。

首先,新建/修改你電腦上的~/.ssh/config檔案 ,新增以下內容:

Host your_server
HostName server.com
user root
ForwardAgent yes

Host是你設定的伺服器名稱,請隨意修改。HostName則是你的伺服器網址/IP,user是指定的伺服器用戶,至於ForwardAgent就是本次的重點,請務必設定為yes。

完成後,輸入以下指令檢查目前Agent是否正使用你的Key:

ssh-add -L

否則輸入指令:

ssh-add -K

完成後再次登入你的伺服器:(請使用之前設定的伺服器名稱登入,否則不會生效)

ssh your_server

想知道更多關於ForwardAgent的資料,可以查看以下參考網站:

SSH agent forwarding 的應用

Javascript 如何比對Object是否相同(Equal)

在沒有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這個模組解決問題:

https://github.com/doowb/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的模組了。

https://github.com/substack/node-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;
}

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

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

Mastodon Docker 更新版本教簡易教學

要用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。

https://github.com/tootsuite/mastodon/releases

WordPress get_posts() Function 排除特定分類的方法

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 Secure Mobility Client 開機時自動啟動的方法

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

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

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

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

好一個令人頭疼的軟體。

參考資料:

Stop Cisco AnyConnect Secure Mobility Client from starting up automatically