文章

目前顯示的是 2017的文章

Cockpit-Linux Server 管理頁面(可以同時與PVE管理並行)

Cockpit-Linux Server 管理頁面(可以同時與PVE管理並行) – pveCLI

不知道 pve cluster 支援否?有空可以試試看。

[參考] NGINX 常見設定

[參考] nginx 強制 http 轉 https

Uppy:open source 的檔案上傳套件

Uppy

open source 的檔案上傳套件,看起來有點強大啊

linux 上不錯的 git GUI

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

文章中提到兩套 GUI 工具:

SmartGitGitKraken 還有提到如何加入 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

Deferring Tasks in Laravel Using Queues

Deferring Tasks in Laravel Using Queues

文章中以上傳圖檔產生縮圖為範例

How to deploy a MySQL Cluster from Scratch with Docker

Creating Your Own PHP Helpers in a Laravel Project

Creating Your Own PHP Helpers in a Laravel Project - Laravel News

如何在 Laravel 專案中建立輔助函式

Understanding Callbacks, Promises, Observables and async/await

Finally understand Redux by building your own Store

Finally understand Redux by building your own Store

看完之後對於 redux 的原理應該就能了解囉

免費課程:
Ultimate Angular: NGRX Store + Effects

Nest.js framework 30天初探

Swarmpit: Lightweight Docker Swarm management UI

輕量化的Laravel群組/權限管理套件-spatie/laravel-permission

Google文件:打出漂亮的數學式

5 分鐘快速了解 FontAwesome 5

希望是最淺顯易懂的 RxJS 教學

Scratch & Math

letsencrypt-nginx-proxy-companion

jrcs/letsencrypt-nginx-proxy-companion - Docker Hub

jwilder/nginx-proxy: Automated nginx proxy for Docker containers using docker-gen

利用 nginx-proxy 自動建立反向代理,利用 letsencrypt-nginx-proxy-companion 建立 / 更新 SSL 憑證

用 angular material + angular flex layout 建立響應式導覽列

Responsive Navbar with Angular Flex Layout - The Info Grid

用 angular material + angular flex layout 建立響應式導覽列

Cross-Origin Request Blocked error in Laravel 5.5

angular crud 程式碼產生器

angular-crud

看起來很厲害的樣子....

測試 flexbox 規則的好工具

display: flex

網友分享,測試 flexbox 規則的好工具

Docker Compose 參考文章

Laravel 5.5 - import export data into excel and csv using maatwebsite

某校高手的 docker hub repository

leejoneshane - Docker Hub

據說是某校的高手作的,連 drbl server 都有

MEAN Stack CRUD 範例,使用 angular5

4 款下載器 for linux

Angular 5 – Handling Token Based Authentication

Angular 5 – Handling Token Based Authentication: Part 1 - The Info Grid

作者建議使用 session cookie 儲存 token,可跨 tab and window,瀏覽器關掉就刪除,而 local storage and session storage 各有缺點。

作者針對整個實作分為 4 個重點,提供一些方向與範例程式碼,值得觀摩。

Image Sliders and Carousels for Angular

Image Sliders and Carousels for Angular - The Info Grid

第 5 個 Angular2+ Draggable Carousel 看起來很不錯喔

Laravel 5.5 Using jwt Authentication

正規表達式的一些資料

從 Nginx 換到 Caddy

MySQL 之 sql-mode 設定

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

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

MySQL 嚴格模式 « MC Blog

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

Unbutu Chrome 瀏覽器會要求"輸入預設鑰匙圈的密碼"解決方法

ubuntu 下安裝 HP LaserJet P1102w

14.04 - How can I install HP Laserjet P1102w on Ubuntu? - Ask Ubuntu

sudo apt install hplip

hp-setup -i

照提示操作即可

有 web 界面的 docker registry

Enterprise 的 Docker registry 平台 Harbor | KaiRen's Blog
使用Harbor创建private Docker Registry

Portus

https://hub.docker.com/r/hyper/docker-registry-web/

sonatype/nexus3 - Docker Hub

前兩個似乎值得試試,第三個不知道還有沒有在維護....

nexus3 有稍微試過,看起來頗複雜,吃的資源似乎也不小

更新:目前使用 Harbor,架設簡單,使用上也算簡單

Caddy 搭配 Harbor 自架私有 Docker Registry | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY


透過 Swoole 加速 Laravel 效能

透過 Swoole 加速 Laravel 效能

數據看起來差距很大啊

Monit:監控伺服器的好物

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

M/Monit | Download

大神吳弘凱推薦!!

管理伺服器的好物!

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

angular 可用之 notification / toast

TypeScript 綜合格鬥技

angular + firestore 教學

angular2开源库收集

複製到剪貼簿 for angular

一個無限滾動的套件 for angular

為什麼Mysql要設定用utf8mb4編碼 utf8mb4_unicode_ci

介紹 DOM 及事件流程

介紹 DOM 及事件流程

好文,淺顯易懂

nginx 基礎設定教學

nginx 基礎設定教學

是時候好好了解一下 nginx 怎麼設定了,先從基礎開始

文章底下留言有強制 http 轉 https 的方法

Advanced Angular Concepts by Alex Rickabaugh

使用HttpInterceptort為HttpClient Request打點前後大小事

HP LaserJet P1102w in ubuntu

ubuntu 17.04

sudo -s

apt install hplip

hp-setup -i

接下來照提示就好囉

參考:14.04 - How can I install HP Laserjet P1102w on Ubuntu? - Ask Ubuntu

正確撰寫Dockerfile

Docker Volume 與 Network 介紹

移除 Unity from Ubuntu 17.10

How To Remove the Unity Desktop from Ubuntu 17.10 - OMG! Ubuntu!

既然 Unity 已經不是預設桌面環境,那就徹底讓它從系統中消失吧....

An HTML5 saveAs() FileSaver implementation

讓設計師早點回家!日本團隊 TopeconHeroes 免費素材

具有 Angular 風格的後端框架:Nest

@ngrx/entity 介紹

NG-ZORRO

Ant Design of Angular - NG-ZORRO

看起來不錯的 ui 元件

Angular 2 window scroll event using @HostListener

Angular 2 window scroll event using @HostListener | Brian Love

用 @HostListener 監聽 window scroll 事件

How to Compose Multiple Web Apps With Docker (HAProxy Tutorial)

How to Compose Multiple Web Apps With Docker (HAProxy Tutorial) - YouTube

使用 HAProxy ,利用不同 url 將 request 導向到對應的 container,可以參考

Firebase OAuth Login With Custom Firestore User Data

Firebase OAuth Login With Custom Firestore User Data | AngularFirebase

搭配 firebase / firestore 實做 oauth login,裡面有 auth service 和 auth guard 的實做可以參考

一套以 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 可以用,佛心啊!

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

Angular — Clean Up your Form Template

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

啥是 javascript 的 this ?Kuro 大神好文必讀。

What's THIS in JavaScript ? [上] | Kuro's Blog

啥是 javascript 的 this ?Kuro 大神好文必讀。

CORS — a guided tour

CORS — a guided tour – Statuscode – Medium

用範例解釋 CORS,值得看看

How To Use Systemctl to Manage Systemd Services and Units

使用 angular-cli 的 6 個最佳實踐與提示

手動更新 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 不行。

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

用圖表解釋 eloquent 關聯

用 nginx 當 reverse proxy

Scheduling tasks with cron on Docker

Scheduling tasks with cron on Docker – Jon Ribeiro

雖然這篇文章是講在 container 中排程執行,不過文章後段的 systemd 我覺得才是亮點。

JWT authentication for Lumen 5.4

JWT authentication for Lumen 5.4 · @ziishaned

很少看到 lumen 的實做,底下的評論裡有 lumen 5.5 要注意的地方

[筆記] 從 JavaScript 學起演算法

How to Rescue, Repair and Reinstall GRUB Boot Loader in Ubuntu

Scratch2 離線版安裝腳本

已測試:

ubuntu 17.04mint 18.1deepin 15.4
下載:
http://bit.ly/scratch2-offline


使用:

解壓縮,會產生 Scratch2_install 資料夾依照 00_準備工作.txt 進行前置作業由 https://scratch.mit.edu/download 下載 Scratch 2.0 Offline Editor,變更檔名為 old_Scratch.air由 https://drive.google.com/drive/folders/0BxUPrupILzOEdUNTemF5OTZyazg 下載想替換的 Scratch.swf,變更檔名為 new_Scratch.swf執行 01_patch.sh執行 02_install_scratch2.sh 注意事項:

.sh 檔需要執行權限檔案關聯需要重新登入或重開機才會生效
參考資料: dpkg - How to install Scratch 2 on Ubuntu 16.10. or 17.04 (64bit)? - Ask Ubuntu[Ubuntu] 設定 scratch2 檔案關聯

How to install Scratch 2 on Ubuntu 16.10. or 17.04 (64bit)

Restful API In Laravel 5.5 Using jwt Authentication

Restful API In Laravel 5.5 Using jwt Authentication - Laravelcode

文章裡頭的 middleware 可以參考參考

Building a Web App with AdonisJS

Building a Web App with AdonisJS ― Scotch

AdonisJS 很像 Laravel ,不過是 javascript....

似乎很少看到 AdonisJS 的範例,收下來參考

兩階段驗證 in Ubuntu

Understanding ViewContainerRef in Angular 2

Understanding ViewContainerRef in Angular 2

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

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

angular 驗證兩個密碼欄位是否一致

Angular 4 Form Password and Conform Password Match Validator

文中提供了兩種作法,可以參考

Angular Authentication: Using the Http Client and Http Interceptors

The 7-step process of Angular router navigation

The 7-step process of Angular router navigation

解釋了 angular router 運作的 7 個階段,不過....沒有全部看懂就是了

批次 / 大量變更檔名工具

vim 程式編輯器

鳥哥的 Linux 私房菜 -- 第九章、vim 程式編輯器

想在 vi/vim 下預設顯示行號,常常要上網查,直接看這篇啦

網友的 async 、 await 筆記

async 、 await - HackMD

想了解的不妨看看喔

製作可拖曳的元素(HTML5 Drag and Drop API)

Getting Started With Progressive Web Apps (PWA)

Favicon & App Icon Generator

一個 compareFn 的例子

理解 JavaScript 中的事件循環、堆疊、佇列和併發模式

用 RxJS and Angular 製作簡易電子白板

Install Budgie Desktop 10.3 in Ubuntu 16.04, 16.10, 17.04

限制 Google 表單「單選題」被選擇次數

Managing State in Angular Apps with ngrx/store and ngrx/effects

Avoiding common confusions with modules in Angular

Avoiding common confusions with modules in Angular – Angular In Depth

釐清一些關於 NgModule 的觀念,值得一讀的文章

NgRx: Patterns and Techniques

NgRx: Patterns and Techniques – nrwl

等到哪天要用到 ngrx 實在來好好研究研究

深入研究JavaScript原型鏈與繼承 + 秒懂JavaScipt的this

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

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

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

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

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

CSS Reference 前端設計師必備手冊

好用的 FFmpeg 轉檔指令

JavaScript: Truthy? Falsy?

JavaScript: Truthy? Falsy? | 格物致知

搞不清楚 truthy / falsy ?可以看看這一篇文章

Angular Custom Form Controls Made Easy

Angular Custom Form Controls Made Easy – Netanel Basal

angular 自訂 form control,寫得算清楚,ControlValueAccessor interface 中每個 method 的作用都有交待

最佳化 angular app 的效能

How to Show a Placeholder in Select Control

angular 開發者常犯的錯誤

Top Common Mistakes of Angular Developers – Hacker Noon

常犯的錯誤與解決方案,值得參考的一篇文章

其他:ngx-auto-unsubscribe

PHP & JavaScript & CSS Coding style

PHP & JavaScript & CSS Coding style

coding style 真的很重要呀

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

深入探討 JSON Web Token (JWT)

路由過渡動畫 in angular

Angular — Supercharge your Router transitions using new animation features (v4.3+)

果然,大架構看得懂,but 細節嗎....沒啥藝術天份的我看的是一頭霧水呀

相關網站:Welcome to yearofmoo

簡報:Angular Animations

angular 建立 tabs 的參考文章

Developing a tabs component in Angular by thoughtram

主要是利用 DI 達成

Learning Angular: Creating a tabs component

基於上一篇,但改用 ContentChildren

Create a dynamic tab component with Angular

進階用法,動態產生 tab,用到不少進階的技巧,目前只是勉強看懂而已....

docker restart 參數的解說與範例

Docker's Restart Policy: Ensure Containers Always Run | Codeship | via @codeship

把各種情況都以實際範例演練過一遍,看完應該就清楚囉

angular + jwt 應用範例

cron 線上編輯器

crontab.guru - the cron schedule expression editor

不會寫 cron rule ? 老是記不住那些欄位意義?那就試試這個工具吧!

favicon 線上產生器

透過 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
參考資料:
Upgrade from 4.x to 5.0 - Proxmox VE
[SOLVED] - PVE 4.4 to 5.0 : no public key EF0F382A1A7B6500 | Proxmox Support Forum

Quickly Create an Angular Carousel

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


CoreUI is free bootstrap admin template with Angular, AngularJS, React.js & Vue.js

Cybereason RansomFree 有效預防檔案勒索病毒,防勒索必備推薦安裝工具

DisplayLink Debian GNU/Linux driver installer (Debian/Ubuntu/Elementary)

用 Docker 建立 Laravel 的開發與上線環境