Sign in

hasNext, next, for of…etc

如何建立一個屬於自己的疊代產生器(Iterator)?

先用一個函式回傳出有 .hasNext 以及 .next 的 function 來模擬出疊代器模式

如果要將這種模式套用於原生 javascript (各種 iterator 語法)的架構下, 需要導入 Symbol.iterator 並依照規範來製作


Using background-image to log user password

如果我們在 css 撰寫以下這些語法,會在 input[type=password] 的 value 被變更的時觸發資源請求

https://github.com/M-Izadmehr/security-playground-server/blob/master/public/keyloggerStyles.css

這裡的 value 並不是 dom 的 value,而是 dom 的 attribute

input[type=password] 在一般的存取時都是採取 dom value 的方式,所以觸發這個漏洞的機會並不高

但是有框架/函式庫…etc,或是自己土法煉鋼採用 access attribute value 的方式就會遇到這不安全的行為

雖然這會成為一個安全性漏洞,但是不用太過於擔心,因為實現一個完整的側錄,須解決以下問題
- background-image 如果不重新賦予的話,只會在第一次觸發請求,之後輸入同樣的字元只是將套用到的css改回而已,不會在二度觸發請求
- 非字元的控制符無法被側錄到(e.g. Enter/Backspace…etc)

下面例子中三個 Password 用了三種變更 value 的方式,第三種是強制使用變更 attribute value 的方式,所以才會觸發請求

須配合 Dev tools > Network 來測試

reference: https://dev.to/mizadmehr/missed-frontend-vulnerabilities-1-css-is-not-as-safe-as-you-think-3l64


Typing effect with javascript and css

簡單利用 setInterval 來完成打字的效果,另外搭配 animation 來完成插入符閃爍特效

reference: https://dev.to/ibrahima92/advanced-typescript-types-cheat-sheet-with-examples-5414?signin=true&utm_campaign=digest_email&utm_medium=email&utm_source=digest_mailer


動態加載內部資源及外部資源 https://github.com/FlyMaple/lazy-load-assets

起源

為什麼會用到 Lazy load (延遲加載),在 Angular build 的時候會將有使用到的 3rd party 做一個 bundle 的動作,會將這些 js 檔都打包在 vendor.js 中,若不使用 AOT 的前題下,這個檔案會越來越肥。

這個檔案變大變肥的後果就是第一次進入 Angular 網站時,也就是第一次載入會變得越來越慢,即使做了 Loading 圖示還是非常容易造成使用者反感。

思路

若可以將這些 3rd party 做動態載入,這樣就不會在打包的時候將不是第一時間使用的程式做打包的動作。

在早時的做法是用 document.createElement('l …


Advanced TypeScript Types cheat sheet (with examples)

交集

可以將多個類型(type)或介面(interface)做結合,將彼此的屬性合在一起成為新的類型(type)

雖為交集,但是不是取共同擁有的,而是全部合併

聯集

將多個類型(type)或介面(interface)同時指定成一個新的類型(type)

交集是將多個合為一個新的,聯集是將多個同一時間只會選用一個


nvm 基本介紹與用法記錄

  1. 安裝 NVM: https://www.onejar99.com/nvm-install-for-windows/
  2. 基本用法: https://dev.to/patricepeartree/how-to-run-multiple-node-and-angular-versions-simultaneously-3lfj
nvm run 還有 nvm exec 沒有這個指令,不知道為何

紀錄如何用 python 操作環境變數

建立一個檔案存放要檢查的環境變數

path
temp
tmp
home

env_check.conf

先用 os.environ 獲取全部環境變數來建立 env_check.conf,在由主程式逐行讀取做環境變數檢查 os.getenv(...)

# os.environ
# os.getenv
import osenv_check_path = './env_check.conf'with open(env_check_path) as env_check_file:
for env_name in env_check_file:
env_name = env_name.strip()
env = os.getenv(env_name)
if env:
print(f'Match the [{env_name}]={env}')
else:
print(f'[{env_name}] is not set')

env_check.py


說明如何使用 argparse 建立程序的輸入參數以及編寫說明文檔

我們先來看到如何建立 arg parser

prog: 程式名稱

description: 程式說明

parser = argparse.ArgumentParser(
prog='batch_file_rename.py',
description='This is batch rename function'
)

在建立好以後就可以著手添加參數設定

[必填參數]

第一個參數是放給程式使用的變數名

parser.add_argument('work_path', metavar='work_path', help='Target path')

metavar: (選填) 可以用來改變預設的變數名,預設變數名會是第一個字串參數來命名

help: (選填) 說明這個參數的文字

[選填參數]

第一和第二個參數是用來指訂名稱和名稱,會用名稱來決定程式的變數名

parser.add_argument(
'-r', '--recursive',
dest='recursive',
action='store_true',
help='Recursive folder need or not'
)

dest: (選填) 可以用來改變預設的變數名,預設變數名會是採用長名稱

metavar: (選填) 可以用來改變預設的變數名,預設變數名會是採用長名稱

action: (選填) 如果選項是 Flag,只有 True / False 兩種狀態,可以採用 store_true store_false,程式會自動轉譯為布林值

dest/metavar 差異: dest 是最後用於程式的變數名,metavar 是用於說明文檔,若只使用 metavar 沒有使用 dest,最後程式變數名就會是 metavar

參數型態

預設輸入的型態為字串 type=str,若要自動轉型可以這樣 type=int

選填參數帶值

nargs: (選填) 可輸入數字 + * 等,如果有選用這個參數,輸入參數會變成 list

添加互斥的參數群組

group = parser.add_mutually_exclusive_group()
group.add_argument('--arg1')
group.add_argument('--arg2')

被加入群組的參數皆會呈現互斥的效果,如果同時間使用互斥的參數,程式會報錯

參考資料: https://gist.github.com/FlyMaple/762b1aed845bdea95a530f268d3c8d8f


Python 各進制基本應用與 Unicode UTF-8 的介紹說明

在 Python 中也很多方便的函式可以直接處理各進制以及 unicode & utf8 的轉換.

[72, 105, 44, 32, 36889, 26159, 25105, 37341, 23565, 19981, 21516, 32232, 30908, 25152, 20570, 30340, 23567, 31243, 24207, 46]
[‘H’, ‘i’, ‘,’, ‘ ‘, ‘這’, ‘是’, ‘我’, ‘針’, ‘對’, ‘不’, ‘同’, ‘編’, ‘碼’, ‘所’, ‘做’, ‘的’, ‘小’, ‘程’, ‘序’, ‘.’]
[‘0b1001000’, ‘0b1101001’, ‘0b101100’, ‘0b100000’, ‘0b1001000000011001’, …

美式鍵盤逗號與俄羅斯鍵盤的 б

在 Material Chips 設置三個分隔符,分別為 "逗號" "回車" "空白",美式鍵盤的逗號在俄羅斯鍵盤上是另一個文字,所以導致在俄羅斯鍵盤輸入這個文字的時候會觸發 Chips 上的分隔功能。

export const SEPARATOR_KEYS_CODES: number[] | Set<number> = new Set([COMMA, ENTER, SPACE]);

分隔符

[matChipInputSeparatorKeyCodes]="SEPARATOR_KEYS_CODES"
(matChipInputTokenEnd)="add($event)"

Material Chips attributes

為了處理這種很少見的情況,我們將不使用 Chips 自帶的分隔功能,我們移除 …

Skye

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store