文章

目前顯示的是 2019的文章

使用 JavaScript 將 HTML 轉換為 PDF

由提供的測試案例產生對應的正規表達式的工具

pemistahl/grex: A command-line tool and library for generating regular expressions from user-provided test cases

可以由提供的測試案例產生對應的正規表達式,有機會用到,收下先。

rsync異地增量備份

實用的小工具 for win10

DHCP Server跨VLAN

Building Angular 9 Authentication System from scratch using Firebase

Building Angular 9 Authentication System from scratch using Firebase

不錯的文章,值得參考

把註冊、登入、email 認證、忘記密碼、第三方登入、Guard等功能都帶過一遍

修正 Ubuntu + Windows 雙系統的時間差

pxe 參考

DHCP 派發多個網段 IP

情境:

因為打算把電腦教室以外的所有電腦都收進 241 網段( VLAN ID 20,intra2),包含平板、手機等載具,ip 不夠用,再加上未來新增的智慧整人整合器所以向教網新申請 VLAN。本來預期會是個新 VLAN,所以打算在新  VLAN 增加一台 DHCP,結果教網回覆在員有的 VLAN ID 20 新增 10.195.180.0/22 網段,於是在一張網卡的情況下(也可以新增網卡,反正虛擬化了做起來也不難),原來的 DHCP 就要派發 2 個網段的 IP 啦。

------------------------------------------------------

步驟 1:DHCP Server 網卡新增 10.195.180.0/22 網段的 IP

原本想用 alias 的方式,但好像未來會被棄用(?),找了一下找到下面這篇文章,結果發現....哦....原來可以這樣子呀,不過新的 netplan 就要再找找怎麼做了。

像這樣:
auto eth1
iface eth1 inet static
    address 10.11.100.202
    netmask 255.255.255.0
iface eth1 inet static
    address 10.4.1.248
    netmask 255.255.255.0 參考資料:
debian - Aliased network interfaces and isc dhcp server - Server Fault

------------------------------------------------------

步驟 2:dhcpd.conf 新增 subnet

注意:所有 subnet 要包在 shared-network my-net { } 裡面,『my-net』 為自訂名稱。

像這樣:
shared-network my-net {
  subnet 10.1.1.0 netmask 255.255.255.0 {
    ...
  }
  subnet 10.1.2.0 netmask 255.255.255.0 {
    ...
  }
  subnet 10.1.3.0 netmask 255.255.255.0 {
    ...
  }
} 參考資料:
debian - …

[ 參考 ] 在 Linux 上建立一個 SFTP Server

如何讓 Angular CLI v8+ 建置專案時可以不要輸出 ES5 版本

解釋 forkJoin, zip, combineLatest, withLatestFrom 差異

一張圖解釋 LEFT JOIN 的運作過程

圖片

Scratch3.0 檔案於網頁上播放

圖片
參考:chocho的記事簿: Scratch3.0 檔案於網頁上播放

有人問,看了一下並不難,所以整理了一包

這一包

假設解壓縮到網站根目錄下的 sb3 目錄內,且 sb3 檔案都放在 sb3/demo/files/ 下:

index.html 修改:
js2/gui-player.min.js 修改: o.a.createElement(....),用 projectHost:" 去搜尋,第二個

Laravel online code generator + GUI

Livewire for Laravel:用 PHP 寫前端

在桌面上顯示系統資訊

Docker container 時區錯誤之處理

Docker中的时区问题处理 - 51CTO.COM

收下參考囉,實際上還真的有遇過

各廠牌電腦開機快速鍵進入"開機選單"熱鍵

網路上看到的資料。

一般會使用此功能的時機,通常是拿來開機並安裝作業系統或更新零件韌體,例如:使用光碟片安裝作業系統時就要從光碟機開機等等......以此類推。
>> 桌上型電腦 <<

電腦一開機啟動時,按下鍵盤上的按鍵

Asus(華碩):【F8】鍵

Acer(宏碁):【F12】鍵

DELL(戴爾):【F12】鍵

GigaByte(技嘉):【F12】鍵

HP(惠普):【F9】鍵

IBM(聯想):【F12】鍵

Intel(英特爾):【F10】鍵

MSI(微星):【F11】鍵


>> 筆記型電腦 <<

電腦一開機啟動時,按下鍵盤上的按鍵

Asus(華碩):【Esc】鍵

Acer(宏碁):【F12】鍵

DELL(戴爾):【F12】鍵

GigaByte(技嘉):【F12】鍵

GENUINE(捷元):【F1】鍵

HP(惠普):【F9】鍵

Lenovo(聯想):【F12】鍵

MSI(微星):【F11】鍵

SONY(索尼):【F11】鍵

P>TOSHIBA(東芝):【F12】鍵

若您不知道你的電腦開機選項功能鍵:

您可按其他按鈕【Esc】【F1】【F8】【F9】【F10】【F11】【F12】等試看看!!

[參考] 透過shell script監控主機,並使用Line告警

[參考] 使用 WebP 格式減少圖片載入時間

Tad Web 多人網頁模組 bug 修正

圖片
Tad Web 多人網頁模組

版本:1.78 (2019-05-10)

在官方修正之前先自己來吧。

症狀 1:

按下更新出現錯誤











解法:

修改 tad_web/class/Update.php

將 2、4 行對調









-----------------------------------------------------------------------------------------

症狀 2:

XOOPS個人網頁群組人數統計與實際人數不符,因為資料庫有重複的紀錄
































解法:

編輯 tad_web/admin/main.php,將 186、187 行移至 184 行之下


正確







curl 使用指南

PVE kernel 清除工具

How to Use External and Custom JavaScript in Angular

最全HTTP安全响应头设置指南

pve vm 遷移失敗解法

圖片
參考:
https://forum.proxmox.com/threads/cant-connect-to-destination-address-using-public-key-task-error-migration-aborted.42390/



例如從 pve2 遷移至 pve5

解法1:

執行 pvecm updatecerts

PS. 應該在一台 node 執行就可以了吧?

-------------------

解法2:(這次採用這個方法)

在 pve2 執行

ssh -o "HostKeyAlias=pve5" root@IP_OF_PVE5



3 個 TypeScript 訣竅

Top 3 Useful TypeScript Tips for Angular - Morioh

不只能用在 Angular....


消除 import interface => 建議使用 namespace讓 interface property 成為選擇性的 => 使用 Partial讓 TypeScript 不要拋出錯誤 => 使用 @ts-ignore 註解

使用 youtube-dl 備份 YouTube 影片

圖片
參考:
好用的下載影片利器-youtube-dl @ Bryan的C語言筆記 :: 隨意窩 Xuite日誌 (推薦)
Youtube-dl濃縮教學筆記 | 小蛇蛇的筆記 (推薦)
使用 youtube-dl 備份 YouTube 影片,解決 1080p 高畫質影片無法下載問題 - 玩物尚誌
YouTube-dl 使用命令 - IT閱讀  =>  參數中文說明

GitHub - ytdl-org/youtube-dl: Command-line program to download videos from YouTube.com and other video sites

youtube-dl

最強的 網路影片下載 器 Youtube-dl-gui 只要有網址就能幫你搞定 - 電腦王阿達

GitHub - MrS0m30n3/youtube-dl-gui: A cross platform front-end GUI of the popular youtube-dl written in wxPython.

FFmpeg 视频处理入门教程 - 阮一峰的网络日志

------------------------------------------
安裝

sudo curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl
sudo chmod a+rx /usr/local/bin/youtube-dl

------------------------------------------
查詢版本

youtube-dl --version

------------------------------------------
升級

sudo youtube-dl -U

------------------------------------------

我是搭配 ffmpeg 做影片與聲音的合併


Usage: youtube-dl [OPTIONS] URL [URL...]

------------------------------------------
查詢可下載格式

youtube-dl -F http://www.youtube.com/watch?v=VIDE…

[Angular] Firebase 該如何連結多登入方式到同一個驗證帳號上

用 Angular and RxJS 打造音樂播放 app

Create an Audio Player app using Angular and RxJS - Morioh

收下參考,應該也可以用來做影片播放app吧....

jExcel : The javascript spreadsheet

youtube 廣告隱藏

How to handle errors in Angular

How to handle errors in Angular - Morioh

以後再慢慢啃吧,現在只能看懂一半....

Server-Side Pagination Using Angular 8 and Node.js

Server-Side Pagination Using Angular 8 and Node.js - Morioh

伺服器端分頁的例子,可以參考

Angular 中匯出 excel 檔

LineLogin-ForPHP:用 LINE 帳號登入

GitHub - slps970093/LineLogin-ForPHP

台灣用 LINE 的人應該非常非常多吧....

這個套件也可用在 Laravel

深入解析 ng-template

JW Angular Pagination Component:分頁元件 for Angular

Angular 8 - JWT Authentication Example & Tutorial

Angular 8 - JWT Authentication Example & Tutorial - Morioh

前後端分離時用得到,參考參考

在 Angular 中管理使用者權限:使用 CASL

laravel-sso:Simple PHP SSO integration for Laravel

laravel-sso/README.md at master · zefy/laravel-sso

Simple PHP SSO integration for Laravel

感覺有機會用到....

Uppy - 最方便的上傳套件

Uppy - 最方便的上傳套件

收下參考,文章是以 angular 為例

Inertia.js : A framework for creating server-driven single page apps

Data Composition with RxJS

Mastering the Subject: Communication Options in RxJS

一次 unsubscribe 多個 observable

解決 Proxmox VE 變更 IP 後 Banner 沒有同步異動問題

Docker长时间运行后的volumes目录清理

CentOS 7 擴大與縮小LV空間

PHPWord 參考資源

docker-compose-laravel: A docker-compose workflow for local Laravel development

How To Proxy To Backend Server – Angular With Examples

Proxmox VE 將節點由叢集分離出來為獨立節點

利用 Laravel 實作 Line 登入,並取得使用者的 ID 及 資料

PVE 5.1 設定 KVM 虛擬機能夠使用 xterm.js

PVE 5.1 設定 KVM 虛擬機能夠使用 xterm.js

難怪我不能用在 vm,原來要自己開呀

以 angular + electron 打造桌面應用程式

安裝 laravel-snappy package與解決字型亂碼

解決npm install 時 node-sass build error

圖片
node 8.15.0
npm 6.9.0
mint 19

解決方式:
sudo apt install gcc g++ build-essential

也許還有其他方式

參考

keyPress vs keyDown, keyCode vs charCode

從 React 原始碼看 keyPress 與 keyDown 事件 · Issue #40 · aszx87410/blog

總結:當你要偵測使用者輸入文字的時候,就用 keyPress,並且搭配 charCode 來看使用者剛剛輸入了什麼;當你想偵測使用者「按下按鍵」的時候,就用 keyDown,搭配 keyCode 獲得使用者所按下的按鍵。

linux下的上傳,下載命令rz,sz

一些不錯的 Angular library

My favorite Angular libraries to use in any project - DEV Community 👩‍💻👨‍💻

ng-animate  提供的動畫雖然不多,不過對於我這種藝術白痴來說,是個好物啊!!!!

修正 shutter 在 ubuntu 18.04 and Mint 19 無法編輯圖片的問題

laravel-factory-enhanced: 為 Laravel Factory 提供關聯支援

Node.js RESTful Web API 登入認證令牌範例 for OAuth 2.0 + JWT

6 Tips About Data Seeding in Laravel

signature_pad: HTML5 canvas based smooth signature drawing

szimek/signature_pad: HTML5 canvas based smooth signature drawing

可以用來做簽名板 / 簡易電子白板的套件

在本機端快速產生網站免費憑證

在本機端快速產生網站免費憑證 | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY => 產憑證比較簡單


建立好自簽憑證,將 server.key 與 server.crt 放到 Angular CLI 專案下,就可以用以下命令啟動擁有 SSL/TLS 加密連線的 Angular 開發伺服器!

ng serve --ssl --ssl-key server.key --ssl-cert server.crt

https://localhost:4200/

如何使用 OpenSSL 建立開發測試用途的自簽憑證 (Self-Signed Certificate) | The Will Will Web

cleave.js:輸入時即時做格式化

變更 grub 背景圖 in Ubuntu and Mint

Lunar - Free Bootstrap Modal and Popups

Lunar - Free Bootstrap Modal and Popups

看起來蠻不錯的 modal,要有 bootstrap 喔

簡單的狀態管理:使用 service and RxJS

Simple state management in Angular with only Services and RxJS - Morioh

對於簡單的應用來說是個不錯的作法

lit-html:HTML 樣板引擎 for javascript

lit-html

HTML 樣板引擎 for javascript

看起來不錯喔,似乎滿簡單的

ng2-dragula: Simple drag and drop with dragula

Laravel reCAPTCHA

跨域存取 localstorage

不錯的 cron 線上工具

[ 參考 ] 開發 Laravel 獨立套件,透過 Composer 發佈到內部重複使用

檢測你的 HTTPS 連線協定安全性

圖片

laravel-websockets

composer package 收集

hirak/prestissimo - Packagist => copmoser 加速

robmorgan/phinx - Packagist => db migrate

vlucas/phpdotenv - Packagist => env

propel/propel - Packagist => ORM

doctrine/orm - Packagist => ORM,沒用過,感覺挺大一包

smarty/smarty - Packagist => template engine

tinybutstrong/tinybutstrong - Packagist => template engine

twig/twig - Packagist => template engine

recca0120/laravel-tracy => debug


[Angular] NgZone 的應用 | CK's Notepad

事情是這樣的(節錄自上文):

「Angular 要如何做到檢查使用是否有在活動,如果一定時間內都沒有任何動作時,要自動登出系統」,這一個需求最直覺的方式是定時去檢查最後一次使用者有動作的時間,但使用 setInterval 會讓 Angular 的效能變差,這時候要怎麼解呢?

解法就是利用 NgZone 在 zone 之外執行檢查的動作,就不會觸發 CD 而影響效能囉
在 Laravel 專案中整合 Vue CLI | 網站製作學習誌

laravel/valet 的部份是 for mac,可以跳過

laravel 路由(web.php)的部份只要是 SPA 應該都適用

Lazy Load Non-Routable Modules in Angular

The magic of RXJS sharing operators and their differences

The magic of RXJS sharing operators and their differences - Morioh

好深奧的文章呀,大概只看懂 2/3,有用到再回頭來看囉

Laravel 產生 QR Code 之範例

把 Google 試算表轉換為 API 的服務

10 個未被充分利用的 blade directive

10 Underused Laravel Blade Directives | SimplestWeb.in


@forelse@each@json@verbatim@isset and @empty@php@push and @stack@inject@includeWhen@hasSection

建立一個多租戶的 Laravel App

Laravel multi-tenancy commands have arrived – Mohammed Osama – Medium

The Missing Laravel Commands have arrived. – Mohammed Osama – Medium

多租戶,就像是 XOOPS 的多人網頁模組。

作者寫了一個套件,可以簡化流程,而且每個租戶有獨立的資料庫。


Subdomain Multitenency Package for Laravel - Laravel News

angular 路由導向 navigate 筆記

路由導向 navigate | Emma Blog

網友的筆記,收下參考

如何在實體機器使用虛擬硬碟開機

[ 參考 ] 用 Docker 建置 DHCP Server

在 Angular 使用 HttpClient 的各種 TypeScript 地雷與陷阱

linux 下安裝 msttcorefonts

Msttcorefonts Download (DEB, RPM)

debian 9:

sudo apt install ttf-mscorefonts-installer

解決KMS大量授權啟動時出現的錯誤代碼 0xC004C003

Firebase Google SignIn + Firestore w/ Angular

Firebase Google SignIn + Firestore w/ Angular - YouTube

ngx-auth-firebaseui - npm Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication.

非常值得參考

用 Traefik 搭配 Docker 快速架設服務

Mkcert讓Localhost也能使用HTTPS憑證

[ES6] Javascript 開發者必須知道的 10 個新功能

HTML5 script 標籤之 async defer 屬性

Laravel-Searchable: Easily Search in Multiple Models

request header:Authorization

Authorization | MDN

最近有需要用到帶 Authorization basic 的 header

Five Additional Filters in belongsTo() or hasMany()

Laravel 檔案上傳,隱藏真實檔案位址

自訂 Laravel 註冊流程的 9 件事

9 Things You Can Customize in Laravel Registration - Laravel Daily


關閉註冊啟用 email 驗證關閉密碼重設自訂註冊後重導向變更欄位驗證規則關閉註冊後自動登入註冊表單增加更多欄位以帳號登入取代 email 登入???? 原文好像也沒有.....

用bash更新docker-compse