2018年11月13日 星期二

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,然後啟用之

2018年9月30日 星期日

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 執行完成之後才執行,而把我註冊的事件清除了

解決方式:

  1. 繼續使用 app.js,但不用 defer
  2. 繼續使用 defer app.js,但需要把 code 寫在 document 的 DOMContentLoaded 事件中
  3. 繼續使用 defer app.js,但需要把 code 寫在外部檔,在 app.js 之後用 script defer 引入
  4. 不使用 app.js,自行載入相關 js

參考資料:

2018年9月17日 星期一

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 之值

2018年8月17日 星期五

Enable Laravel CSRF Token to Prevent Malicious Attacks

Enable Laravel CSRF Token to Prevent Malicious Attacks

Best Laravel Security Features For Your Application

Webpack教學文

Webpack教學 (一) :什麼是Webpack? 能吃嗎? – Mike

Webpack教學 (二) :檔案你要去哪裡? – Mike

Webpack教學 (三):永不停止的Watch – Mike

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

10 Useful Angular Features You Might Not Have Heard Of

  1. KeyValuePipe
  2. SlicePipe
  3. DeimalPipe 、formatNumber function
  4. JsonPipe
  5. Title and Meta Service  ==> 有時需搭配  Angular Universal
  6. ng-container
  7. @Attribute
  8. Profile Change Detection
  9. NgPlural  and NgPluralCase directive
  10. ngPreserveWhitespaces and NgNonBindable


10 More Useful Angular Features You Might Not Have Heard Of

  1. APP_INITIALIZER token
  2. Gesture Recognition 手勢識別
  3. Template Type Checking (and how to bypass it) ==> $any type casting function
  4. Provider Scoping ==> providedIn 、 providers 、 viewProviders
  5. Host, Self, SkipSelf & Optional Decorators
  6. Http Interceptors
  7. Route Guards
  8. RxJS Subscriptions ==> unsubscribe 多個 subscription
  9. Preload Lazy Modules
  10. Readonly Types for Immutability ==> Readonly 、 ReadonlyArray 、 ReadonlySet 、 ReadonlyMap types of TypeScript

2018年8月1日 星期三

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

nick66551/AutoPosition: Light Js Library use RxJs

FB 上網友的作品

超入門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 轉出的寫法




2018年7月7日 星期六

[ 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

2018年7月5日 星期四

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

Document Converter (Online & Free) — Convertio

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

2018年7月2日 星期一

[ PHP ] PDOStatement fetch vs fetchAll

fetch() vs fetch all()

有圖看的比較清楚啦

PDO-fetchAll()-取得所有結果列,以陣列或物件方式回傳 | Ben的編程、系統學習記錄

PDO-fetch()-取得一列結果列,以陣列或物件方式回傳 | Ben的編程、系統學習記錄

[ PHP ] 雜湊密碼

現代PHP password_hash 雜湊加密採用隨機SALT 使用方式 « 關於網路那些事...

PHP: password_hash - Manual

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

html - TextArea to Array with PHP - Stack Overflow

[PHP]簡單解決 <textarea> 的換行問題 | 電腦故我在

HTML中TextArea的換行符號? « EasonLin's Blog

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

MySQL :: MySQL 8.0 Reference Manual :: 11.3.5 Automatic Initialization and Updating for TIMESTAMP and DATETIME

adminer 設定:


對應之 SQL:



MySQL Timestamp 型態 的 屬性(新增/修改 自動更新 Timestamp型態 的 欄位) | Tsung's Blog

2018年6月14日 星期四

NitroShare 大量部署於 Linux 之調整

官網 | GitHub

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

OS:Deepin 15.5

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

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


解決方法:

修改設定檔:
~/.config/Nathan\ Osman/NitroShare.conf

修改以下項目:
  • DeviceName
  • DeviceUUID
  • TransferDirectory
修改登入自動啟動檔:
~/.config/autostart/nitroshare.desktop

將 Exec 改為執行自訂腳本

因為不可能一台一台改,所以用 shell script 來處理啦

下載後先修改 nitroshare_tweak ,然後執行 tweak.sh 即可

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

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



2018年6月5日 星期二

筆記:網頁 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

2018年5月26日 星期六

2018年5月25日 星期五

避免淪為挖礦機 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"
}

2018年5月24日 星期四

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

Configure Static IP Addresses on Ubuntu 18.04 LTS Server – Website for Students

How to configure Network Settings in Ubuntu 18.04 Bionic Beaver - Serverlab

netplan.io

設定方式完全不一樣了....

實際展示 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

Ultimate Laravel Performance Optimization Guide

Laravel 效能調校指南

告别 component 中一大堆的 subscription + unsubscribe

告别 component 中一大堆的 subscription + unsubscribe - 简书

參考參考

如何開發 Laravel Package

Laraning - Creating a Package

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

2018年5月20日 星期日

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)

2018年5月10日 星期四

修改 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

Developing Laravel Packages with Local Composer Dependencies - Laravel News

Local Composer Package Development – pvtl – Medium => 推

有需要開發 Laravel Package 的可以參考參考

2018年5月7日 星期一

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 CKEditor 整合 Laravel file manager | 一群棒子

參考

2018年5月3日 星期四

[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

2018年5月1日 星期二

Resilient CSS 系列影片

有好心的網友翻譯中文字幕呦

Introduction to Resilient CSS – 1/7 - YouTube

The Secrets of ‘Can I Use’ – 2/7 Resilient CSS - YouTube


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 即可

2018年4月11日 星期三

linux 下解決 chrome 不正常關閉後再開啟時是否還原的提問

本來是用無痕模式避開這個問題,後來因為程式中有用到 localstorage,導致無法用無痕模式了....

因為找不到官廖的方法,所以這次改用 shell script 來解決,先找出 chrome 的 pid,然後 kill 掉就好了,語法如下,不知道有沒有更好的寫法....

vim kill-chrome.sh
#!/bin/bash

# for Raspbian
# pids=`pidof /usr/lib/chromium-browser/chromium-browser`
pids=`pidof chrome`

for pid in $pids
do
  echo $pid > /dev/null
done

kill $pid


pidof 會找出所有的 pid,由大到小列出之間有空格,所以 for in 會將之一個一個取出,for 執行完後最後的 pid 才是最初的 pid,將之 kill 即可



2018年4月7日 星期六

caddy(with https) + php-fpm +xoops輕鬆架 on CentOS7


最小安裝

固定 ip v4 & v6

設定 hostname

=============================

安裝完成後.....

設定 /etc/ssh/sshd_config
PermitRootLogin no              #是否允許root登入
PubkeyAuthentication yes #是否允許Public key
GSSAPIAuthentication no #不用使用Kerberos認證
UseDNS no                 #是否使用dns反查

可視需要改 port (假設改 2266)
selinux 修改
semanage port -a -t ssh_port_t -p tcp 2266
防火牆也要改
firewall-cmd --add-port=2266/tcp --permanent
firewall-cmd --reload


sudo systemctl reload sshd

=============================

設定以公私鑰登入(登入時不須輸入密碼)
ssh-keygen
基本上都按 enter 就好
預設金鑰會在 ~/.ssh 目錄下,id_rsa 為私鑰,id_rsa.pub 為公鑰

ssh-copy-id mis@192.168.1.100
將預設公鑰 id_rsa.pub 上傳至 192.168.1.100 的帳號 mis 家目錄下 
~/.ssh/authorized_keys

=============================

安裝 selinux 相關工具
[Centos7] 安裝 semanage (selinux工具程式) @新精讚
yum install policycoreutils-python
鳥哥的 Linux 私房菜 -- 第十六章、程序管理與 SELinux 初探
yum install setools-console

=============================

安裝 caddy
sudo yum update
sudo yum install epel-release
sudo yum install caddy
防火牆設定
firewall-cmd --add-service=http --add-service=https --permanent
firewall-cmd --reload

查看目前 runtime 規則(public 為預設 zone,以下指定列出 public zone)
firewall-cmd --zone=public --list-all
查看目前 永久 規則

啟動 caddy
sudo systemctl start caddy
查看狀態
sudo systemctl status caddy


設定 caddy
設定檔 /etc/caddy/caddy.conf


設定開機啟動 caddy
sudo systemctl enable caddy

=============================

安裝資料庫 mariadb
sudo -s
yum group install mariadb mariadb-client
systemctl start mariadb
systemctl enable mariadb
mysql_secure_installation

設定預設 utf8
CentOS7安装MariaDB以及编码注意事项 - CSDN博客

修改前後可以觀察:
mysql -uroot -p
show variables like '%character%';
show variables like '%collation%';

vim /etc/my.cnf
在[mysqld]标签下添加下面内容
collation-server = utf8_general_ci
character-set-server = utf8

vim /etc/my.cnf.d/client.cnf
在[client]标签下添加下面内容
default-character-set=utf8

vim /etc/my.cnf.d/mysql-clients.cnf
在[mysql]标签下添加下面内容
default-character-set=utf8


systemctl restart mariadb


=============================



安裝 php-fpm
Getting Started - IUS
[Centos7] 安裝apache+php7+mariadb10+selinux @新精讚
RHEL / CentOS 7 安裝 PHP 7.0 及 7.1 – Linux 技術手札

yum install https://centos7.iuscommunity.org/ius-release.rpm

yum install php70u-fpm php70u-cli php70u-gd php70u-intl php70u-json php70u-mbstring php70u-mcrypt php70u-mysqlnd php70u-pdo php70u-soap php70u-xml

vim /etc/php.ini
timezone = Asia/Taipei

systemctl start php-fpm
systemctl enable php-fpm


=============================


設定 caddy 支援 php
caddy log 檔設定
cp /etc/caddy/caddy.conf /etc/caddy/caddy.conf.bak
vim /etc/caddy/caddy.conf

:80 {
    gzip
    root /var/www/html
    fastcgi / 127.0.0.1:9000 php {
        index index.php
    }
    log /var/log/caddy/access.log
    errors /var/log/caddy/error.log
    header / -server
}

import conf.d/*.conf


mkdir /var/log/caddy
chown caddy.caddy /var/log/caddy

systemctl restart caddy
systemctl status caddy


=============================

安裝 xoops 輕鬆架
selinux 設定:讀取、寫入


wget http://120.115.2.90/uploads/my_xoops.zip
unzip my_xoops.zip -d /var/www/html
chown php-fpm.user -Rf /var/www/html
cd /var/www/html
chmod 777 -R uploads
chmod 777 -R xoops_data
chcon -R -t httpd_sys_rw_content_t xoops_data modules
mv xoops_* ../


瀏覽 http://ip/modules/tad_adm/pma.php
以 root 登入,建立資料庫與資料庫帳號

瀏覽 http://ip 進行安裝

=============================

啟用 https
vim /etc/caddy/caddy.conf

centos.yljh.ntpc.edu.tw {
    gzip
    root /var/www/html
    fastcgi / 127.0.0.1:9000 php {
        index index.php
    }
    log /var/log/caddy/access.log
    errors /var/log/caddy/error.log
    tls mis@yljh.ntpc.edu.tw
}

:80 {
    redir https://centos.yljh.ntpc.edu.tw{uri}
}

import conf.d/*.conf


systemctl restart caddy
systemctl status caddy



=============================

設定 caddy log rotate
CentOS 7下使用Logrotate管理日志 - 简书
鳥哥的 Linux 私房菜 -- 第十八章、認識與分析登錄檔
http.log - Caddy User Guide

預設:
rotate_size 100 # Rotate a log when it reaches 100 MB
rotate_age  14  # Keep rotated log files for 14 days
rotate_keep 10  # Keep at most 10 rotated log files
rotate_compress # Compress rotated log files in gzip format












2018年3月31日 星期六

Caddy - 方便够用的 HTTPS server 新手教程

Caddy - 方便够用的 HTTPS server 新手教程 - 作业部落

值得參考,有多 host 的範例

docker 啟用 http private registry

https://docs.docker.com/registry/insecure/#deploy-a-plain-http-registry

private registry at 10.241.109.14:5555


/etc/docker/daemon.json  ==> 沒有則新增,加入以下內容(複製貼上時雙引號要重打)

{
  "insecure-registries" : ["10.241.109.14:5555"]
}

systemctl restart docker.service

systemctl status docker.service  ==> 確認正常執行



新增 image 到 private registry:

tag an image:

docker image tag ID 10.241.109.14:5555/IMAGE_NAME[:TAG]

ex:

nginx:1.13.5-alpine => id = 245a6s.....

docker image tag 245a 10.241.109.14:5555/nginx:1.13.5-alpine


docker image push 10.241.109.14:5555/nginx:1.13.5-alpine

ubuntu apt 改成國高

紀錄一下,免得每次都忘記....

參考:請改用國網中心的 apt 鏡像站 (mirror) | 凍仁的筆記

vi /etc/apt/sources.list

%s/us.archive.ubuntu.com/free.nchc.org.tw/g
%s/security.ubuntu.com/free.nchc.org.tw/g

2018年3月19日 星期一

讓 chrome 自動 載入不安全的指令碼 的參數

【密技】教你如何永久解決Google瀏覽器的黑畫面!! @新夢幻之城 哈啦板 - 巴哈姆特

參數:--allow-running-insecure-content


今天將電子看板部署到 firestore hosting 上,因為 firestore hosting 走的是 https ,而看板中時鐘

的部份其來源為 http,所以 chrome 就擋掉它了....

2018年3月16日 星期五

解決 chrome 以 file:// 開啟網頁檔發生 cors 的情形

chrome 64 版以 file:// 開啟網頁檔,javascript 還能存取遠端資源,但升級到 65 版就發生 cors 的問題,找到一篇文章有寫到如何解決。


加入以下參數:

--disable-web-security --user-data-dir=資料夾絕對路徑 --test-type

要達到以無痕、全螢幕、無解鎖的方式以 file:// 開啟,完整指令如下:

/usr/bin/google-chrome --incognito --start-fullscreen file://網頁檔絕對路徑 --password-store=basic --disable-web-security --user-data-dir=資料夾絕對路徑 --test-type

Login and Access Control in Angular

ngPoland 2017 - Manfred Steyer - Login and Access Control in Angular - YouTube

manfredsteyer/angular-oauth2-oidc: Support for OAuth 2 and OpenId Connect (OIDC) in Angular.

2018年3月14日 星期三

[筆記] ubuntu 17.10 下建置簡易電子看板

最近在開發簡易電子看板,OS 是 ubuntu 17.10,有幾個點要解決:
  • 自動登入
  • 登入後自動開啟 chrome 展示電子看板網頁
  • 螢幕不關閉,系統不休眠
  • 定時關機
  • 隱藏滑鼠游標
定時關機利用 crontab 達成(下午5點關機):
sudo -s
crontab -e
0 17 * * * shutdown -h now

在 chrome 的部份,有幾個比較棘手的點:
  • 以無痕模式開啟,避免自動關機時因 chrome 未正常關閉,導致開機啟動 chrome 時出現是否還原網頁的提問
  • 以全螢幕開啟電子看板網頁
  • 超煩人的解鎖問題
直接以無痕模式開啟:
加參數 --incognito

以全螢幕開啟:
加參數 --start-fullscreen url_to_open ==> 可用 F11 離開全螢幕
加參數 --kiosk url_to_open ==> 似乎無法離開全螢幕

解決解鎖提問:
加參數 --password-store=basic
設為 basic 則密碼將以未加密之純文字紀錄,但以電子看板或廣告機的用途來說應該沒關係吧....

開啟 chrome script:
新增 autostart-chrome.sh(檔名自訂)
#!/bin/bash
google-chrome-stable --incognito --password-store=basic --start-fullscreen http://url_to_open

賦予執行權限
chmod +x autostart-chrome.sh

設定自動執行:
Chrome autostart on ubuntu - Ask Ubuntu
17.10 叫初始應用程式(?),新增執行 autostart-chrome.sh 與 unclutter 的項目

============================================================

這一篇也是在講建置電子看板,也有提到自動執行,值得參考:
https://obrienlabs.net/setup-kiosk-ubuntu-chromium/

自動隱藏滑鼠游標:
Auto-Hide Your Mouse Pointer When Idle With "Unclutter"
unclutter -idle 5  ==> 5 秒後隱藏

chrome 參數 password-store 說明:
Where are my browser passwords stored? - Ask Ubuntu

[PC]Google Chrome參數一覽表|梅問題.教學網

Google Chrome 參數設定和彩蛋 | DreamersCorp.

[電腦學習園地] Google Chrome參數一覽表 @ 電腦學習園地 :: 痞客邦 ::

這一篇最後的幾個參數值得嘗試,尤其是解決 cors 的方法(還沒試過就是了)
利用 Google Chrome 作為 kiosk 應用時的設定項目 | 北風筆記

2018年3月7日 星期三

Photo slideshow - Google 簡報外掛程式

Photo slideshow - Google 簡報外掛程式

google 相簿現在不支援 slide show,利用這個外掛,建立簡報,發布到網路上讓其自動播放、循環播放,算是目前為止比較簡單的變通方法,只是需要多一道工....

2018年3月3日 星期六

Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps

Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps

當前後端分離時,app 載入階段分為兩部份:

  1. index.html 與 js 載入
  2. app 執行後以 ajax 取得資料以渲染畫面


此文章提供一種方式,由後端將所需初始資料嵌入 html 以讓 app 可以直接渲染畫面,提昇速度。

另外,針對多路由的 spa , 後端嵌入的初始資料(只會發生一次)是否為當前頁面所需,是否需要向後端請求資料,也提供了一種參考作法。

The Ultimate Vue.js & Laravel CRUD Tutorial

The Ultimate Vue.js & Laravel CRUD Tutorial

2018年2月15日 星期四

wellwind/ngx-schematics-collection: Some useful schematics collection for Angular CLI project

wellwind/ngx-schematics-collection: Some useful schematics collection for Angular CLI project

將 ubuntu 安裝至 usb 隨身碟( uefi mode )

之前只作過 legacy bios 模式,剛好最近有人問可以用 uefi 模式安裝嗎?於是這兩天試了一下,先說結論,uefi 果然是個讓人想罵 *** 的東西啊。

算是做出來了,步驟與注意事項如下,不知道有沒有更好的方法....

注意事項:

1、 用來安裝的目標 usb 隨身碟( 或硬碟 )其分割表必須是 gpt ( 可用 gparted 處理 ),且必須要有一個 esp (efi system partition,通常是 vfat、fat32),大小約 300 - 500 MB( 100 MB 似乎也可 )

2、 安裝時電腦原有的硬碟若有 esp,需要先處理,讓以安裝媒體( usb or cd / dvd )開機之後看不到 esp 的存在,否則安裝至 usb 時安裝程式似乎會自動使用本機硬碟的 esp,造成安裝之後的 usb 裝置無法開機。目前想到的方式是從 bios 暫時關閉本機硬碟,或乾脆開機殼把排線暫時拔掉。



步驟:

1、 安裝媒體以 uefi 模式開機。

2、 執行安裝程式,選擇安裝目的時用手動模式,確定 esp 只存在目標隨身碟,bootloader 安裝位置請選擇目標隨身碟(如:/dev/sdc)。

3、 等待安裝程序完成即可。


以上步驟不保證一定 ok 喔.....

做出來的隨身碟其實還有些問題,如 grub 選單可能會有多餘的開機選項,也不保證一定能開機(有時要調整 grub 開機參數,通常是硬碟編號),甚至也出現過 grub 選單無法顯示,但直接按 enter 由第一個選項開機仍可正常開機的狀況,總之....真的很想罵 *** 啊!

5 best Angular charting libraries

Angular chart - 5 best Angular charting libraries (Angular 2,4,5)

不知道會不會用到....

Reinstalling Grub2 (EFI partition)

boot - Reinstalling Grub2 (EFI partition) - Ask Ubuntu

ㄜ....最近剛好用到

How to Install LibreOffice 6.0 on Ubuntu or Linux Mint

How to Install LibreOffice 6.0 on Ubuntu or Linux Mint

2018年1月28日 星期日