文章

目前顯示的是 2018的文章

幾何原本 數位版

Bttn.css:專注於按鈕的 CSS library

Bttn.css - Demo

把按鈕作好作滿的 CSS

超強去背網站

Remove Background from Image – remove.bg

目前只能針對「人」....

NGINX 設定檔產生器

介紹文:
NGINXConfig 網頁伺服器 NGINX 設定檔產生器,依需求產生各種 conf 檔

產生器:
nginxconfig.io

雖然我目前主要是用 Caddy 啦,收藏起來備用

.vimrc設定教學

談 JS 中的作用域與 Closure

.desktop 產生器

Desktop File Creator - www.linux-apps.com

sudo apt install python3-pyside

下載後解壓縮

執行 install.sh

GNOME .desktop file generator - Tools

線上產生器

angular directive for lazy loading images

Determine Your Private and Public IP Addresses from the Command Line

6 Online Tools for Generating and Testing Cron Jobs for Linux

6 Online Tools for Generating and Testing Cron Jobs for Linux

有用的工具,常常記不住 cron 的參數說....

editable : 點擊編輯

sortable : 拖拉排序

ngx-admin: Admin dashboard template based on Angular 7+, Bootstrap 4

AdonisJs - Node.js 版的 Laravel

JavaScript Pro Tips - Code This, NOT That

JavaScript Pro Tips - Code This, NOT That - YouTube

不錯的影片,善用裡面提到的技巧可以大大提昇程式碼可讀性

玩遊戲學 Service Worker

Service Workies

玩遊戲學 Service Worker

awk 入门教程

awk 入门教程 - 阮一峰的网络日志

收下參考,有機會用到

JavaScript 浮点数陷阱及解法

JetBrains IDE 設定 scss 編譯

How to setup Filewatcher with node-sass? – IDEs Support (IntelliJ Platform) | JetBrains

先安裝 node-sass

npm i -g node-sass

查詢 node-sass 執行檔路徑

whereis node-sass

再依照上面連結設定 file watcher,然後啟用之

我知道你懂 hoisting,可是你了解到多深?

Docker 下的 reverse proxy 參考資料

Linux 下藍牙音訊延遲之修正

How to fix Bluetooth sound synchronization

我的電腦無效,也許別的電腦有用....

sed 一次性插入多行

nth-child and nth-of-type Tester

純 CSS 寫的開關

Loaders.css component for Angular X

好用工具:Pandoc ( 萬用的文件轉換器 )

Ionic 4, Angular 6 and Cordova: Export and View PDF File

[ 參考 ] 刪除 Google Drive FIle Stream 登入使用者

[ 參考 ] Intervention Image 圖片處理

Laravel 之 javascript 事件處理失效之解法

Laravel 預設的 layouts/app.blade.php 中,預設使用 defer 載入 js/app.js

結果導致自己寫的 javascript 中 event handler 失效,似乎根本沒註冊的樣子,後來拔掉 app.js,自己加入 bootstrap 4 與相關 js,即使都有加入 defer,也都沒有問題

網路社群大大推測 app.js 似乎有做清除事件的動作,導致 app.js 因為 defer 的關係,會在頁面解析完成,頁面中的 script 執行完成之後才執行,而把我註冊的事件清除了

解決方式:

繼續使用 app.js,但不用 defer繼續使用 defer app.js,但需要把 code 寫在 document 的 DOMContentLoaded 事件中繼續使用 defer app.js,但需要把 code 寫在外部檔,在 app.js 之後用 script defer 引入不使用 app.js,自行載入相關 js
參考資料: https://stackoverflow.com/questions/40199551/how-to-preserve-script-execution-order-with-defer-and-inline-scriptshttps://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/script

解決空連結造成 SPA reload 的問題

The Will Will Web | 在 Angular 套版時應注意多層次選單超連結的使用

解決 <a href="#"></a> 這樣的空連結造成 SPA reload 的問題

Linux下检查硬盘是否4K对齐

Linux下检查硬盘是否4K对齐 - SztWejtsNppTDCcfZYEe的个人空间 - 开源中国

sudo fdisk -lu

看分区的Start地址要能被 8 整除

PHP 7 中 ?? 與 ?: 的差別

php 7 - PHP ternary operator vs null coalescing operator - Stack Overflow

echo $a ? : $b;

echo $a ?? $b;

以上兩種用法相當於如下之傳統三元運算

echo $a ? $a : $b;

若 $a 為 truthy 值則 echo 出 $a 之值,$a 為 falsy 值則 echo 出 $b 之值

但 $a 未宣告或未賦值時會 echo 出 $b 之值,但有警告訊息,可加 isset() 避免

echo (isset($a) && $a) ? $a : $b;

?:  (ternary operator) 之行為表現與傳統三元運算一致,單純簡寫而已

??  (null coalescing operator) 則不會有警告訊息

若 $a = null 則三種語法表現一致,均  echo 出 $b 之值

介绍 Laravel 授权方式 Gate 和 Policy

[ 參考 ] 釐清幾個超容易混淆又很常用的 RxJS 運算子

讓你的 Angular CLI v6 專案加入 webpack 強大的 Hot Module Replacement (HMR) 功能

Enabling Hot Module Replacement (HMR) in Angular 6 - The Info Grid

保哥提供的參考文章

不想看文章的人,直接輸入 ng add hmr-enabled 命令,就會全自動幫你設定到好! 感謝保哥!!

[ 參考 ] 離線安裝完整 Angular 開發環境的標準作業流程 (大型企業適用)

[ 工具 ] CSS clip-path maker

利用 Google 試算表 (Google Sheet) 作為外部資料來源

建立自定義的 checkbox

CSS Grid in 45 Minutes

[ 參考 ] How to create submodule

Git-Tutorials/git_submodule_turorial.md at master · twtrubiks/Git-Tutorials

最近發現可能有需要用到 submodule ....

Laravel's Dependency Injection Container in Depth

Caddy Reverse Proxy Tutorial

[ 參考 ] Angular 結合 nginx 反向代理的 Docker 容器化封裝技巧

一個可編輯 SQL 查詢並支援視覺化查詢結果的網頁應用程式

[ 參考 ] 使用Synology NAS + iPXE建立遠端啟動系統

立刻加速 Chrome 瀏覽器的 4 個方法

Creating Multi-Stage Docker Builds for Laravel

7 種 Linux network bonding mode 的簡單介紹

傲笑紅塵路: Linux 網路結合(network bonding)技術與實務

zh-tw/TipsAndTricks/BondingInterfaces - CentOS Wiki

多網卡的7種bond模式原理 For Linux - 掃文資訊

第 3 堂課 - LACP 與 bonding/team 及 IPv6 簡易設定(by 鳥哥)

除了 802.3ad ( LACP ) 需要交換器配合之外,其餘不須設定交換器

據說比較建議使用  802.3ad ( LACP ) 和 balance-alb

在 proxmox,新增 Linux Bond 之後,還要新增一個 Linux Bridge,Bridge ports 使用 Linux Bond 之名稱,然後在 vm 的網卡設定連到新的 Linux Bridge 即可

vue2-google-maps:Vue google map component

Enable Laravel CSRF Token to Prevent Malicious Attacks

Webpack教學文

你可能不知道的好用功能 in Angular

10 Useful Angular Features You Might Not Have Heard Of

KeyValuePipeSlicePipeDeimalPipe 、formatNumber functionJsonPipeTitle and Meta Service  ==> 有時需搭配  Angular Universalng-container@AttributeProfile Change DetectionNgPlural  and NgPluralCase directivengPreserveWhitespaces and NgNonBindable

10 More Useful Angular Features You Might Not Have Heard Of

APP_INITIALIZER tokenGesture Recognition 手勢識別Template Type Checking (and how to bypass it) ==> $any type casting functionProvider Scoping ==> providedIn 、 providers 、 viewProvidersHost, Self, SkipSelf & Optional DecoratorsHttp InterceptorsRoute GuardsRxJS Subscriptions ==> unsubscribe 多個 subscriptionPreload Lazy ModulesReadonly Types for Immutability ==> Readonly 、 ReadonlyArray 、 ReadonlySet 、 ReadonlyMap types of TypeScript

Taucharts:支援 TypeScript 的 chart library,基於 D3.js

Bash Shell Script 流程控制之 select

bash script 之 switch case

SSL 檢測工具

localForage 將 localstorage 包裝,可以用 promise 操作

影片自動縮到螢幕角落,並能被拖拉的 js library

超入門JavaScript邏輯判斷

[偷米騎巴哥] 20180726 (超入門JavaScript邏輯判斷) - YouTube

&&  => 優先回傳可轉為 false 之值,否則回傳最後一個

||  => 優先回傳可轉為 true 之值,否則回傳最後一個

&& 優先於 ||

() 強制先處理

[] && {} => {}

[] || {} => []

({}) && [] => [],{} 要加 () 否則會產生語法錯誤

({}) || [] => {},{} 要加 () 否則會產生語法錯誤


實務應用:

&& => 可當 if 判斷

3 > 2 && (function(){.....})() => 結果是執行 function (此為立即函式 IIFE),等同於

if ( 3 > 2 ) {
    (function(){....})()
}

|| => 設定預設值,but 有雷,用 es6 較好

function run(n) {
    var n = n || 100
    console.log(n)
}

run(500) => 500
run() => 100
run(0) => 100,雷....我就是要 0
run(null) => 100,雷....我就是要 null

es6:

function run(n = 100) {
    console.log(n)
}

run(500) => 500
run() => 100
run(0) => 0
run(null) => null
run(NaN) => NaN
只要傳入之 n 不是 undefined 就採用傳入值
run() => 100
run(undefined) => 100

若不用 es6 ,原來寫法可用三元運算改寫:

var n = n !== undefined ? n : 100


可以用 babel 看看 es6 轉出的寫法




Accessing environment variables from a webpack bundle in a Docker container

[ 參考 ] 寫好 shell script 的 13 個技巧

自己打包 GIT CheatSheet 桌面應用程式

Linux 啟用 CPU 巢狀虛擬化

以下是針對 Intel CPU

查詢:

cat /sys/module/kvm_intel/parameters/nested

Y 代表已經啟用

啟用:

sudo -s

rmmod kvm_intel ; modprobe kvm_intel nested=1

GitHub 嵌入 youtube 影片之 markdown 語法產生器

處理時間的 js 套件

[ 工具 ] Unix时间戳(timestamp)转换工具

Unix时间戳(timestamp)转换工具 - 代码工具 - 脚本之家在线工具

還有在不同程式語言中取得现在的Unix时间戳(Unix timestamp)的方法

[ 參考 ] PHP 騙你,PDO prepare 並沒有準備好

PHP 騙你,PDO prepare 並沒有準備好 – wetprogrammer – Medium

如果 Driver 與 Database 已支援 Prepared Statement,則設定 PDO::ATTR_EMULATE_PREPARES 為 false


$dbh = new PDO(....);
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

[ 參考 ] 如何正確佈署 Laravel 專案

[ PHP ] PDO WHERE IN 之問題解決

sql - PHP PDO and DELETE with in() not working - Stack Overflow

使用 PDO prepare,SQL DELETE 語法使用 WHERE id IN (:id_string_list)

bindValue(':id_string_list', '1, 3, 5')

結果只有刪除一筆。

根據查到的資料,SQL 改成 WHERE FIND_IN_SET(id, :id_string_list) 即可

MySQL :: MySQL 5.5 Reference Manual :: 12.5 String Functions

更新:似乎只要用到 where in 就要改用 FIND_IN_SET

[ 參考 ] 在本機端快速產生網站免費憑證

[ 工具 ] excel 轉 csv 的線上工具

Document Converter (Online & Free) — Convertio

有些網站中文轉出來會變問號,這個網站支援中文的轉換,轉出來的 csv 欄位會用雙引號包住

[ PHP ]利用openssl_random_pseudo_bytes和base64_encode函数来生成随机字串

[ PHP ] empty(),is_null(),isset 判斷結果列表

[ PHP ] PDOStatement fetch vs fetchAll

[ PHP ] 雜湊密碼

[ PHP ] textarea 轉成 陣列、textarea 中正確顯示換行

MySQL 自動初始化與更新 TIMESTAMP and DATETIME

圖片

JavaScript hoisting 、 function

Linux Desktop Entry 文件深入解析

Angular + PDF + Forms = PDF Dynamic Reactive Forms

如何在企業內部使用「完全離線」的方式安裝 npm 套件

前端資源收集

Windows 利用wscript 啟動的隨身碟病毒之解法

NitroShare 大量部署於 Linux 之調整

官網 | GitHub

NitroShare 是個免費的跨平台傳檔工具。

OS:Deepin 15.5

安裝於樣本機後派送下去,需要調整一下設定檔才能正常運作。

狀況:
裝置名稱都一樣裝置列表只有一個,其裝置名稱會像輪播一樣變換(影片)(issue) 需求: 更改裝置名稱,且不論老師與學生帳號其裝置名稱均以 ip 第四碼命名,如:PC-100每個裝置在列表中獨立顯示 原因: 因為 uuid 相同,所以只改裝置名稱,就會在列表中只有一個項目,但名稱會輪播。

解決方法:
修改設定檔: ~/.config/Nathan\ Osman/NitroShare.conf
修改以下項目: DeviceNameDeviceUUIDTransferDirectory 修改登入自動啟動檔: ~/.config/autostart/nitroshare.desktop
將 Exec 改為執行自訂腳本
因為不可能一台一台改,所以用 shell script 來處理啦
下載後先修改 nitroshare_tweak ,然後執行 tweak.sh 即可

目前版本還不能同時選擇多個傳送目標,只能一個一個傳

類似軟體:
Julian Sparber / teleport · GitLab
Teleport - Linux Apps on Flathub


Angular 5 Server Side Rendering With Firebase

完全清除硬碟資料

限制內容字數方法

限制內容字數方法 – ZoeTips

字數太多,在一定字數之後加入「...」

11 Javascript Animation Libraries For 2018

筆記:網頁 body font-size = 16px

網友分享

html {
  font-size:62.5%;
}
body {
  font-size:1.6rem;
  line-height:1.75;
}

這樣設定之後 body的字體大小就等於16px

跨平台的 udemy 影片下載工具

r0oth3x49/udemy-dl: A cross-platform python based utility to download courses from udemy for personal offline use.

我的 OS 是 deepin 15.5 , based on Debian stretch

安裝:
sudo apt install python-pip
git clone https://github.com/r0oth3x49/udemy-dl.git
cd udemy-dl
pip install -r requirements.txt

使用:
python udemy-dl.py COURSE_URL -q 720 -o "/path/to/directory/" -u USERNAME -p PASSWORD

COURSE_URL => 課程網址,點 課程內容 後複製網址
-q 720 =>下載 720p
-o "/path/to/directory/" => 指定儲存目錄,會在之下建立課程子目錄
-u USERNAME => udemy 帳號
-p PASSWORD => udemy 密碼

其他參數見 github

因為懶,所以寫了一支 shell script

直接執行或是執行時帶網址當參數

更新:
Udeler | Apps | Electron  ==> GUI 下載工具,超推薦,中文檔名ok

PHP 也有 Day #35 - 精通 PHP 錯誤處理,讓除錯更自在

設定 caddy 使用 Let's Encrypt Staging Environment 避免超過流量限制

Using the Angular Router to navigate to external links

Using the Angular Router to navigate to external links

以前都是直接 a 標籤設定 href 直接連外而沒有經過 angular route,這篇文章介紹了一種可行的方法。

避免淪為挖礦機 HTTP headers設置讓網站更安全

避免淪為挖礦機 HTTP headers設置讓網站更安全 | 社群網路 | 數位 | 聯合新聞網

http.header - Caddy User Guide

檢測網站:
Analyse your HTTP response headers

我的 XOOPS 輕鬆架 in docker 檢測結果,

設定之前:D

設定之後:A

我的 Caddyfile 中 header 的設定:

header / -Server
header / {
        # Enable HTTP Strict Transport Security (HSTS) to force clients to always
        # connect via HTTPS (do not use if only testing)
        Strict-Transport-Security "max-age=31536000; includeSubDomains"
        # Enable cross-site filter (XSS) and tell browser to block detected attacks
        X-XSS-Protection "1; mode=block"
        # Prevent some browsers from MIME-sniffing a response away from the declared Content-Type
        X-Content-Type-Options "nosniff"
        # Disallow the site to be rendered within a frame (clickjacking protection)
        #X-Frame-Options "DENY"
        Referrer-Policy "strict-origin-when-cross-origin"
}

How to remove cloud-init from ubuntu

How to remove cloud init from ubuntu

How to remove cloud init from ubuntu
If you're trying to start a cloud-init based Ubuntu VM with KVM you will suffer long boot times and confusing output on the terminal. If you want to get rid of it you need to remove cloud-init.


echo 'datasource_list: [ None ]' | sudo -s tee /etc/cloud/cloud.cfg.d/90_dpkg.cfg
sudo apt-get purge cloud-init
sudo rm -rf /etc/cloud/; sudo rm -rf /var/lib/cloud/
reboot


感覺起來 ubuntu server 18.04 開機有點慢,cloud-init 似乎是兇手之一,移除掉果然快了不少

ubuntu server 18.04 設定固定 ip

實際展示 EM 與 REM 的差異

實際展示 EM 與 REM 的差異 | 六角學院

em、rem 傻傻分不清?看看這篇文章吧。

視覺化呈現 javascript stack / event loop

latentflip.com/loupe/

將 javascript stack / event loop 視覺化呈現

stack => 堆疊,後進先出

queue => 佇列,先進先出

[ Alex 宅幹嘛 ] 👨‍💻這些年經歷過的同步非同步 with Tommy - YouTube


Ultimate Laravel Performance Optimization Guide

告别 component 中一大堆的 subscription + unsubscribe

如何開發 Laravel Package

Laraning - Creating a Package

一共3段影片,教你如何開發 Laravel Package,並且可以 auto discovery

基於 Vue.js 的 Windows, OS X 及 Linux 等平台的桌面應用程式框架

Vuido - Vuido

基於 Vue.js 的 Windows, OS X 及 Linux 等平台的桌面應用程式框架

和 electron 類似的東西

systemd cheat sheet

Package 'php-soap' has no installation candidate

Package 'php-soap' has no installation candidate · Issue #1476 · laradock/laradock

laradock 在 build php-fpm 時,若有安裝 php-soap,會出現錯誤,這篇文章的解法可以試試看,7.0 ok,7.1、7.2 不確定。

XOOPS 輕鬆架搭配 MySQL 8.x 的調整

SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client · Issue #1392 · laradock/laradock

最近在使用 laradock 安裝 XOOPS 輕鬆架時,因為 MySQL 使用的 image 版本是 latest,所以會使用 8.x 版,在寫入資料庫時會出現問題,查了一下,可以降版使用 5.7。如果不想降版,那就在 my.cnf 中修改設定囉:

[mysqld]
default_authentication_plugin= mysql_native_password

下面這篇有解釋:(可用 mysql_native_password 搜尋)

MySQL :: MySQL 8.0 Release Notes :: Changes in MySQL 8.0.4 (2018-01-23, Release Candidate)

Linux 下解壓縮分片之 zip 檔

執行Chrome在headless模式

3C Tech Center-執行Chrome在headless模式

用 google apt source 安裝的話,執行檔在 /usr/bin/google-chrome

例如:
google-chrome --headless --window-size="1920,1080" --screenshot https://www.yljh.ntpc.edu.tw

以 1920x1080 將網頁擷圖,輸出 screenshot.png


參數列表:
List of Chromium Command Line Switches « Peter Beverloo

JS代码加密 | Javascript 不可逆加密 | JS混淆加密 —在线工具

CSS flex-shrink 属性

CSS flex-shrink 属性 | 菜鸟教程

主要是 flex-shrink 的計算公式

Unlocking the Power of CSS Grid Layout

深入解釋 @ViewChild 的用法

修改 chrome 自動播放政策,讓嵌入的 youtube 影片能自動播放同時有聲音

今天發現嵌入的 youtube 影片照以前下的參數在 chrome ver.66.0.3359.139 下無法自動播放,查了一下如果加入 url 參數 mute=1 (靜音) 就可以,可是這樣一來如果要有聲音,就只能透過人工播放,這用在電子看板實在是有點不方便。

Autoplay Policy Changes  |  Web  |  Google Developers

這邊文章解釋了為什麼,重點是有一些解決方案。

chrome://flags/#autoplay-policy

將 Autoplay policy 改為 No user gesture is required 即可

but firefox ver.58 倒是正常

其他參考:

Policy List - The Chromium Projects

Developing Laravel Packages with Local Composer Dependencies

ubuntu 18.04 使用 fcitx 取代 ibus

sublime text 在 ubuntu 18.04 下依然無法輸入中文,之前的修正方式在預設的 ibus 也無法解決中文輸入的問題,換用 fcitx 之後再修正就可以了

方法 1:
強迫 ibus 不執行
sudo mv /usr/bin/ibus-daemon /usr/bin/ibus-daemon.bak
kill 掉 ibus-daemon 或重開機

方法 2:
移除 ibus
sudo apt remove ibus


方法 2 會在打開語言支援時要求將 ibus 裝回,所以方法 1 似乎是比較好的選擇

安裝 fcitx 與新酷音:
sudo apt install fcitx fcitx-chewing

將  語言支援  中的  鍵盤輸入法系統  選擇 fcitx


sublime text 修正檔下載:
不專業網管筆記: ubuntu 下解決 Sublime Text 3 無法輸入中文的問題

Laravel CKEditor 整合 Laravel file manager

Laravel 5 - MongoDB CRUD Tutorial

Laravel 5 - MongoDB CRUD Tutorial

文章中用的是 Laravel 5.6

[bash] 取得某路徑下的第一層子目錄名稱列表

list directory names in bash shell | Bash

#!/bin/bash

MYDIR="/home/ntpc"

DIRS=`ls -l $MYDIR --time-style="long-iso" | egrep '^d' | awk '{print $8}'`

# "ls -l $MYDIR"      = get a directory listing
# "| egrep '^d'"           = pipe to egrep and select only the directories
# "awk '{print $8}'" = pipe the result from egrep to awk and print only the 8th field

# and now loop through the directories:
for DIR in $DIRS
do
echo  ${DIR}
done

How To Find BASH Shell Array Length

Build an API in 15 Minutes

Let’s Build an API in 15 Minutes – Shawn Mayzes – Medium

使用 Laravel 15分鐘建立 API,參考參考

Resilient CSS 系列影片

Angular 與 Firebase (Firestore) 共舞

[Angular] 與 Firebase 共舞 | CK's Notepad

文章中用到的資料庫是 firestore,大神的文章值得收藏參考

ubuntu 18.04 新增無密碼之帳號

現在新增帳號時一定要有密碼,但學生帳號沒有密碼比較方便,google 了一下果然有人也有相同需求。
https://www.psychocats.net/ubuntucat/creating-a-passwordless-account-in-ubuntu/
先新增帳號設好密碼,再到 /etc/shadow 把該帳號密碼改為 U6aMy0wojraho 即可

Multiple SSH Keys settings for different github account - 手把手教學

在 Ubuntu 中强制 APT 使用 IPv4 或IPv6

TypeScript and JavaScript 可用的 ORM