Coding 筆記

瀏覽器運作方式是所有Web工程師的都需要了解的，可以幫助我們了解網頁背後做了什麼事

本篇會先以主流的瀏覽器來做討論

• Chrome
• Firefox
• Internet Explorer
• Safari
  閱讀全文 »

兩種不同與Ｇit平台數據庫連接方式比較

:::info
SSH key 彈性高，必須要是專案管理員才能拉檔案
HTTPS 有網址的皆可以clone下來，需要輸入帳號密碼
:::

之前完全沒使用過閉包的技巧，身為一個前端工程師，寫了這麼多年的code，到底什麼是閉包？就用這篇來記錄自己對於閉包這個名詞的解釋吧！主要會以我在網路上蒐集到關於閉包的文章加上自己的見解來寫，盡量白話一點解釋

首先，在MDN上對於閉包的解釋如下

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

中文是

閉包（Closure）是函式以及該函式被宣告時所在的作用域環境（lexical environment）的組合。

重新解釋一遍

當一個function被建立時，會儲存一組當下的作用域及function本身在記憶體中

• 每行字數不要超過80個字元
• 當HTML上的元素擁有超過一個屬性時，分行寫
• 檔案命名時不要切超過三個段落(example-name-tmp.ts)
• 開發專案前先規劃好目錄命名原則
• 使用code formatter (TS ES lint)
• 將外部URL放在enviroment下
• 不要直接在component中呼叫API，寫service去把API request 包起來
• 語意化命名變數
• 在同一個component中，如果需要data，不要使用session
• 建立一個common service去取得local或session的storage
• 在service中不要調整到UI，單純處理邏輯
• 使用HTTP Interceptor 去處理任何的HTTP request、error handling、loader….
• Unit test every functionality. :face_with_raised_eyebrow:
  閱讀全文 »

執行hexo deploy時發現personal access token 過期了，導致無法上版

1
2
3
4
5
6
7
8
9
10

remote: No anonymous write access.
fatal: Authentication failed for 'https://github.com/wayne201299/wayne201299.github.io/'
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (/Users/ci-alan.zhuang/blogpsn/node_modules/hexo-util/lib/spawn.js:51:21)
      at ChildProcess.emit (node:events:390:28)
      at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

• 更新config.yaml<font-color=#> 內的repo加上token

  1 2 3 4 5

  deploy: type: git repo: https://[personalAccessToken]@github.com/wayne201299/wayne201299.github.io.git branch: main token: [personalAccessToken]

Hexo更新後，本地端的node如果沒更新，新語法會報錯

• 檢查node版本有沒有支援新語法

Each pattern describes a problem which occurs over and over again … and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without doing it the same way twice. @Christopher Alexander

目前有26種主要的設計模式，又可以分成三大類

• Creational：設計類別或物件的實例化
• Structural：類別的架構，設計的目的是增加類別的功能性、可擴充性
• Behavioral：類別的行為，包含與其他物件互動的方式
  閱讀全文 »

In those systems, the subject is usually named a “stream of events” or “stream source of events”, while the observers are called “sinks of events”

觀察者模式，設定一個被觀察物件(subject)，當subject的狀態變更時，觀察者也會有相對的行為，通常是用來處理事件，在此模式下被觀察物件會被稱為stream of events

TypeScript與HTML間溝通的橋樑，最主要分為這三種

• 屬性綁定
• 事件綁定
• 雙向綁定

內崁binding (Interpolation)

雙向，綁定script 與HTML變數使用

1

{{data}}

基於Node.js開發的網誌框架

優點

• 編譯速度快
• 外掛套件多
• 一鍵部署
• 需要快速架設部落格平台，
• 透過MarkDown來撰寫部落格文章
• 不需要太複雜的外觀
  閱讀全文 »