2017年12月23日 星期六

linux 上不錯的 git GUI

第 12 天:git 版本管理系統 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天

文章中提到兩套 GUI 工具:

還有提到如何加入 git 官方 ppa:

sudo add-apt-repository ppa:git-core/ppa
sudo apt update
sudo apt install git

multipass:一個新的虛擬機器工具

multipass, management of virtual machines running Ubuntu – Mi blog lah!

看來還不錯,希望一段時間之後能更完整

要用 snap 安裝

Screenkey:在螢幕上顯示所按的鍵盤按鍵

Ubuntu Buzz !: Screenkey: On-screen Typing Indicator on Ubuntu & Trisquel

ubuntu and debian 都可以用 apt install screenkey 安裝

Learn Electron in Less than 60 Minutes - Free Beginner's Course

Learn Electron in Less than 60 Minutes - Free Beginner's Course - YouTube

Creating Desktop Apps with Electron Tutorial

Build an Electron App in Under 60 Minutes - YouTube

Electron | Christian Engvall

Electron packager tutorial | Christian Engvall

Icon Archive - Search 590,912 free icons, desktop icons, download icons, social icons, xp icons, vista icons


2017年11月17日 星期五

MySQL 之 sql-mode 設定

MySQL数据类型:SQL_MODE设置不容忽视-IT168 技术开发专区

MySQL學習筆記—SQL伺服器模式匯總 - 壹讀

MySQL 嚴格模式 « MC Blog

最近因為要在 docker 環境執行 xoops,參考了 laradock 的設置,很順利的在 docker 下完成安裝的工作,但在程式運作上遇到了一些奇怪的現象,沒想到 MySQL 的 sql-mode 設定是元兇之一,因為啟用了一些選項,尤其是嚴格模式,造成資料庫寫入失敗,該說是外國的開發者太嚴謹還是國內的開發者比較懶呢?

2017年11月10日 星期五

Monit:監控伺服器的好物

Easy, proactive monitoring of processes, programs, files, directories, filesystems and hosts | Monit

M/Monit | Download

大神吳弘凱推薦!!

管理伺服器的好物!

可以監控主機,有網頁界面可以觀看,可以自己設定條件,讓CPU或記憶體飆高自動執行某些動作(例如重啟伺服器)。

2017年11月6日 星期一

2017年10月16日 星期一

一套以 D3 為基底的圖表函式庫,可以直接在 Angular 中 import 使用

Taucharts flexible javascript charting library for data exploration

以下是保哥與網友的推薦文

是一套以 D3 為基底的圖表函式庫,其圖表的呈現效率極高,它的 API 簡單易用,也提供完整又清楚的文件,還有提供 CDN、npm 與 bower 等安裝方式,無論在任何專案下都可以使用,像是 Angular、React、Vue 這類 SPA 框架也都可以順利整合,相當不錯耶!

可以直接在 Angular 中 import 使用,而且已經內建完整的 TypeScript 模組定義檔 ( *.d.ts ),完全不用特別在安裝,直接 import 之後就有 IntelliSense 可以用,佛心啊!

2017年10月15日 星期日

讓 Form template 驗證錯誤訊息顯示的程式碼更乾淨

Angular — Clean Up your Form Template

簡單講就是用個 component 來封裝相關程式碼,讓樣板更乾淨,文章中提到的方法只適用於 template driven,reactive form 可以參考 這裡 。

2017年10月4日 星期三

手動更新 docker apt source

docker 的 apt source 似乎換了,以下是手動更換的步驟

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

# stable + edge 版
# for ubuntu 16.04
deb [arch=amd64] https://download.docker.com/linux/ubuntu xenial stable edge

# for ubuntu 17.04
deb [arch=amd64] https://download.docker.com/linux/ubuntu zesty stable edge

sudo apt update

sudo apt install docker-ce

Netshare - Docker volume plugin for NFS 3/4, EFS and CIFS/SMB

Netshare - Docker volume plugin for NFS 3/4, EFS and CIFS/SMB

可讓 Docker 支援 NFS、SMB volume 的外掛

安裝:

由 GitHub release 頁面下載 deb 安裝,0.34 版須 server 啟動 NFS4 支援

sudo service docker-volume-netshare start
sudo service docker-volume-netshare status

sudo systemctl enable docker-volume-netshare
sudo systemctl status docker-volume-netshare


Use Docker Engine plugins | Docker Documentation

可以找到幾個可支援 NFS 的外掛

MultiBootUSB 跨平台的多重開機 usb 製作工具

MultiBootUSB

How to Install Multiple Linux Distributions on One USB

試過 ubuntu 17.04 ok,deepin 15.4.1、clonzilla live 不行。

不過至少有人開始關注這方面,就看之後的發展能不能更便利囉,現階段還是辛苦一點自己來囉。

2017年9月16日 星期六

Scratch2 離線版安裝腳本

已測試:

  • ubuntu 17.04
  • mint 18.1
  • deepin 15.4

下載:
http://bit.ly/scratch2-offline


使用:

  1. 解壓縮,會產生 Scratch2_install 資料夾
  2. 依照 00_準備工作.txt 進行前置作業
  3. 執行 01_patch.sh
  4. 執行 02_install_scratch2.sh
注意事項:

  • .sh 檔需要執行權限
  • 檔案關聯需要重新登入或重開機才會生效

參考資料:

2017年9月12日 星期二

2017年9月7日 星期四

Understanding ViewContainerRef in Angular 2

Understanding ViewContainerRef in Angular 2

簡單說,ViewContainerRef 就像個錨點,標記可以動態插入內容的地方。

如果 ViewContainerRef 在 Component 的 template 中沒有指定,則指向 host 元素,也就是 Component 自己,插入的內容會緊鄰 Component,如文中第一個範例。

2017年8月11日 星期五

建立VLAN邏輯分割網段 詳解交換器Trunk設定

建立VLAN邏輯分割網段 詳解交換器Trunk設定 - 技術專欄 - 網管人NetAdmin

想了解 VLAN、Trunk ?可以看看這篇文章

當DHCP遇見IPv6 快速入門DHCPv6協定

當DHCP遇見IPv6 快速入門DHCPv6協定 - 技術專欄 - 網管人NetAdmin

文章中對於 DHCP 的運作原理、流程以及 v4 、 v6 IP 位址解釋的不錯,也解釋了 DHCP Relay Agent。主要內容還是 IPv4。

相關文章:深入了解IP位址與子網路遮罩 - 技術專欄 - 網管人NetAdmin

CSS Reference 前端設計師必備手冊

CSS Reference 前端設計師必備手冊!收錄 CSS 樣式表屬性說明及範例

超需要的!!!!

好用的 FFmpeg 轉檔指令

Useful FFmpeg Commands For Converting Audio & Video Files

好用的 FFmpeg 轉檔指令

2017年8月3日 星期四

Enable Remote API on Docker hosts running systemd

Enable Remote API on Docker hosts running systemd (like Ubuntu 15.04)

在 /etc/systemd/system 下新增 docker-tcp.socket

內容:

[Unit]
Description=Docker Socket for the API
[Socket]
ListenStream=2375
BindIPv6Only=both
Service=docker.service
[Install]
WantedBy=sockets.target

執行:

systemctl enable docker-tcp.socket
systemctl enable docker.socket
systemctl stop docker
systemctl start docker-tcp.socket
systemctl start docker

檢查,可於本機執行:
 docker -H tcp://127.0.0.1:2375 ps
接下來就可以由遠端來控制啦,建議 iptables 限制 2375/tcp 的存取,如:
(INPUT default policy = ACCEPT)
iptables -A INPUT -s 163.20.124.0/24 -p tcp --dport 2375 -j ACCEPT
iptables -A INPUT -p tcp --dport 2375 -j DROP

iptables 設定參考資料:

iptables 添加,删除,查看,修改«海底苍鹰(tank)博客
iptables 設定入門
Linux IPTables: How to Add Firewall Rules (With Allow SSH Example)
How To Set Up a Firewall Using Iptables on Ubuntu 14.04 | DigitalOcean

SSL with Docker Swarm, Let's Encrypt and Nginx

SSL with Docker Swarm, Let's Encrypt and Nginx

certbot/certbot - Docker Hub

在 Docker Swarm 下部署 nginx + ssl

2017年7月19日 星期三

2017年7月17日 星期一

透過 apt 將 proxmox 4.4 升級到 5.0

1. 先將 4.4 更新

apt update
apt dist-upgrade

2. 更新 apt 來源, jessie 更換為 stretch

sed -i 's/jessie/stretch/g' /etc/apt/sources.list
sed -i 's/jessie/stretch/g' /etc/apt/sources.list.d/pve-enterprise.list

ps. 如果 pve-enterprise.list 中的項目本來就註解掉,則第二道指令不一定要做

3. apt update

ps. 如果遇到如下錯誤訊息,則執行步驟 4

W: There is no public key available for the following key IDs:
EF0F382A1A7B6500

4. (選擇性) apt install debian-keyring debian-archive-keyring

5. apt dist-upgrade

ps. 這一個步驟最好在本機執行,不要 ssh 遠端做,以免時間過長 ssh timeout ,如果一定要 ssh 遠端執行而且 timeout 了,重新 ssh 進入後找出 apt dist-upgrade process id,kill 掉(不確定是否一定要?),執行  dpkg --configure -a 之後應該就可以了

6. reboot

參考資料:

2017年7月8日 星期六

Deepin 15.4 安裝 docker-ce 17.06

本來是用 https://get.docker.com/ 的 script 來安裝,但今天要安裝 17.06 版卻不行,apt install 找不到 docker-ce ,所以只好用比較麻煩的方式囉。

參考官網文件,前面的幾個步驟因為之前就做過了,所以略過,直接設定 apt sources.list ,加入:

deb [arch=amd64] https://download.docker.com/linux/debian stretch stable

如果有其他來源記得 刪 / 註解 掉

stretch 應該改成 jessie 比較好,但因為之前有的 source 是用 stretch,所以就沿用囉,是說用起來也沒遇到啥問題....

移除舊版:sudo apt remove docker docker-engine

sudo apt update
sudo apt install docker-ce

檢查一下版本:docker version

執行 portainer 方便管理:

docker run --name portainer -d --restart=always \
-p 9000:9000 \
 -v /var/run/docker.sock:/var/run/docker.sock \
-v $(pwd)/portainer-data:/data \
portainer/portainer

--restart=always 不一定要加,也不一定要設成 always



2017年6月22日 星期四

composer 的 GUI 工具

Composercat - GUI for Composer (PHP)


一行指令就上線 (直接管理本機容器)

docker run -d -p 9000:9000 -v "/var/run/docker.sock:/var/run/docker.sock" portainer/portainer


另一種選擇....

其他:

shipyard · shipyard

2017年5月22日 星期一

製作 Deepin 15.4 安裝 USB

下載 深度启动盘制作工具

只是 linux 版的 deb 我在我的桌機 ubuntu 16.04 裝不起來....


方法 1:在 windows 下使用 啟動盤製作工具 操作最簡單

方法 2:在 linux 下操作

假設 USB 隨身碟在 /dev/sdc

sudo dd if=/path/to/deepin.iso of=/dev/sdc


方法 3:解壓縮出來做成 live usb,進入 live 系統後用 啟動盤製作工具 操作

重要提醒:傳統 BIOS 製作出的隨身碟不能用在 UEFI ,要另外製作

[ 好文 ] 輕鬆理解 Ajax 與跨來源請求

輕鬆理解 Ajax 與跨來源請求 | TechBridge 技術共筆部落格

值得參考的一篇文章

2017年5月17日 星期三

運用 combineLatest 管理多個 filter,組合 Query String

Manage your Filters Like a Pro in Angular With combineLatest

文章中的例子有兩組篩選條件,任一個變更時即改變 query string 的內容

利用新增 decorator 自動退訂 Observable

🎩 Automagically Unsubscribe in Angular – NetanelBasal

利用新增 decorator 自動退訂 Observable,也可以選擇性保留某些不退訂

在 Angular 中用 directive 實作 Vue 的 event modifiers for v-on

Implementing Event Modifiers in Angular – NetanelBasal

好棒的 idea 呀....

阮一峰的 WebSocket 基礎教學

WebSocket 教程 - 阮一峰的网络日志

angular 事件綁定鍵盤按鍵列表(含組合鍵)

keydown.a
keydown.b
keydown.c
keydown.dot
keydown.Spacebar
keydown.meta.Enter
keydown.alt.Enter
keydown.control.Enter
keydown.shift.Enter
keydown.meta.o
keydown.meta.s
keydown.meta.f
keydown.escape
keydown.ArrowLeft
keydown.ArrowRight
keydown.ArrowUp
keydown.ArrowDown
keydown.0
keydown.1
keydown.2
keydown.3
keydown.4
keydown.5
keydown.6
keydown.7
keydown.8
keydown.9
keydown.tab

meta 就是 window 鍵 / Command 鍵( Mac )

參考資料:

Native Key-Combination Event-Binding Support In Angular 2 Beta 17

Understanding ViewChildren, ContentChildren, and QueryList in Angular

Understanding ViewChildren, ContentChildren, and QueryList in Angular

ViewChild
ViewChildren
ContentChild
ContentChildren
QueryList

搞不清楚這些東西嗎?來看看這篇文章吧

Dynamically Creating Components With Angular

Dynamically Creating Components With Angular – NetanelBasal

動態建立 component

相關資源:

05 Programmatically Create Components in Angular2 :: Learn Angular 4 Step by Step - YouTube

Handling Multiple Checkboxes in Angular Forms

Handling Multiple Checkboxes in Angular Forms – NetanelBasal

用 FormArray 處理多個 checkbox

RxJS Subjects for human beings

RxJS Subjects for human beings – NetanelBasal

提供的例子滿好了解的

Implementing Auth Guard with Componentless Route in Angular

Implementing Auth Guard with Componentless Route in Angular

需要做權限控管的可以參考參考

2017年5月11日 星期四

Component architecture recipes for Angular’s reactive forms

Component architecture recipes for Angular’s reactive forms

GitHub

文章中的作法值得深入思考,另外文章中有一段 code 我覺得特別有趣:

selectTopping(topping: Topping) { const index = this.control.value.indexOf(topping); if (!!~index) { this.removeTopping(index); } else { this.addTopping(topping); } }

!!~index ==> index 是 indexOf 的結果:

topping 存在陣列中的話 index >= 0,否則 index = -1
所以 !!~index 也可以寫成 index >= 0

後來實驗了一下:

!!~(-1) ==> false
!!~0     ==> true
!!~1     ==> true
!!~2     ==> true
發現了嗎? index = 0 時表示有找到,但 0 是 falsy 值,用 !! 轉換之後會是 false,這樣和 index > 0 時轉換後是不一致的,但是先用 ~ 處理過再用 !! 轉換之後就一致啦

參考資料:
JavaScript Bitwise

Javascript中的位元運算子 (1) - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天

2017年5月6日 星期六

preventDefault vs. stopPropagation vs. stopImmediatePropagation

preventDefault vs. stopPropagation vs. stopImmediatePropagation

解釋了三者的差異,文章舉的例子很容易懂喔

DOM 的事件傳遞機制:捕獲與冒泡 | TechBridge 技術共筆部落格 (推薦閱讀)

Termius:跨平台的 ssh client

Cross-Platform SSH Client Termius is available as a Snap app on Linux

Linux 下可以透過 snap 安裝,以下是以 Deepin 15.4 為例:

sudo apt install snapd

sudo snap install termius

json2ts - generate TypeScript interfaces from json

json2ts - generate TypeScript interfaces from json

將 json 轉成 typescript 的 interface

中文假字 plugin for sublime text

Chinese Lorem Ipsum plugin (sublime text plugin) - YouTube

ctlorem 再按 alt + c

2017年4月26日 星期三

Angular CLI: multiple apps in the same project

Angular CLI: multiple apps in the same project – Yakov Fain's Blog

目前還沒有這樣的用過,不過只需要一份 node_modules 這點很不錯呀

[ 心得 ] Structural Directive

Structural Directive · GitBook

我的一些心得

deepin linux 從PPA源安裝軟件

deepin linux 從PPA源安裝軟件 - IT閱讀

偽裝成 ubuntu .....

ubuntu 下安裝 Budgie 桌面環境

Budgie 10.3 Released, Here's How to Install it on Ubuntu

Ubuntu Budgie 是最近看到的 ubuntu 衍生版,其桌面環境還不錯,現在也可以安裝在 ubuntu 了呦

Ubuntu Budgie | Home

XnConvert:跨平台的圖片轉換、批次處理工具

XnConvert 1.74 released, Install in Ubuntu / Linux Mint

跨平台的圖片轉換、批次處理工具

Auto Shutdown, Reboot, Suspend, Hibernate Your Linux System

Auto Shutdown, Reboot, Suspend, Hibernate Your Linux System At A Specific Time - OSTechNix

linux 下的定時器,可重開機、關機、休眠

"Open as Root/Administrator" Add Powerful Entry To Nautilus Context Menu

"Open as Root/Administrator" Add Powerful Entry To Nautilus Context Menu

這個方便多了

2017年4月11日 星期二

2017年3月30日 星期四

Docker、Xdebug and PhpStorm 完整設定

Docker、Xdebug and PhpStorm 完整設定 - YouTube

雖然是在 dlaravel 的 docker-compose for mac 環境下編譯及安裝xdebug,還是值得參考。

影片最後,也說明不自行編譯,透過deviny/fpm:7.1.2-xdebug的image,直接安裝使用的方式說明。

excelify: 用Laravel建立的Excel資料轉換工具

excel 資料轉存DB工具。 - YouTube

GitHub - DevinY/excelify: 用Laravel建立的Excel資料轉換工具

不錯的轉換工具,光是轉出 sql 就夠威了


GitHub - DevinY/dexcel: Excelify standalone version.

Excelify 功能介紹(docker獨立運作版本) - YouTube

Docker-Excelify 獨立運作版本,不需要先安裝 laravel,有 docker 就可以用了

使用 Postman 取得 Token 打另一隻 API

使用 Postman 取得 Token 打另一隻 API | 未知

好文,這樣開發 API 在測試時就方便多了

Telegram 中文化

將Telegram改成中文版的介面!中文化檔案下載&設定教學(App、PC)

Linux 版也可以喔

2017年3月20日 星期一

Animista:製作 CSS 動畫

Animista

網友分享的網站,滑鼠點一點就可做出 CSS 動畫,還可產出原始碼

2017年3月18日 星期六

在 Ubuntu 中啟用桌面畫筆

xorg - Drawing over the desktop - Ask Ubuntu

Option 1 (compiz composite manager)

sudo apt-get install compizconfig-settings-manager compiz-plugins compiz-plugins-extra

安裝完成後似乎要先登出一次,所作設定才能即時生效

Note:super key 就是 win key