Skip to content

Instantly share code, notes, and snippets.

View jackyu's full-sized avatar

Jack Yu jackyu

3 followers · 10 following
  • anue
  • Taiwan, Taipei
View GitHub Profile
@jackyu
jackyu / note_fix_nextjs_compiler_error_when_use_dompurify.md
Last active January 17, 2024 03:52
[筆記][錯誤解決] 修正使用 DOMPurify 套件造成 Next.js 編譯錯誤問題

[速記] 如果在 Next.js 專案中有使用 DOMPurify 套件，在編譯時會發生以下錯誤

Can't resolve 'canvas'
Can't resolve 'bufferutil'
Can't resolve 'utf-8-validate'

這是因為 DOMPurify 套件在編譯時會使用到 canvas 和 bufferutil 套件，但是這兩個套件在 Next.js Server Component 上是不支援的，所以會發生錯誤。

@jackyu
jackyu / note_dcard_tech_sharing.md
Last active September 22, 2022 02:10
[筆記][觀念/心得分享] Dcard 技術分享會

技術名詞

  • Monorepo with N3
  • Yarn v3

Yarn v3

*　yarn v3 不再採用原始的 node_modules 模式

  • 查找 node_modules 運行成本高，CI/CD 部署時下載時間太久，依赖版本不稳定（依赖包更新将改变原有版本
@jackyu
jackyu / note_wh_we_use_key_in_react.md
Last active December 2, 2021 02:59
[筆記][React] 為什麼要在 React 中使用 key

為什麼要在 React 中使用 key 屬性

為什麼要在 React 中使用 key 屬性，一切的原因都是 "效能"。 主要的問題是， 每次應用程式渲染 Reacrt 時，都會建立一個新的 react 元素樹，這裡的問題是更新 UI 為了匹配在渲染中建立出來的新 react 元素樹。React 提供了一個聰明的做法讓解決這件事的時間複雜度從 O(n^3) 降低至 O(n)，提供了以下二種假設

  1. 如果一個元素改變它的類型，就會建立一個新的樹
  2. 如果二個元素在兩顆樹中都有相同的 key id，則它們是相同的元素，不會從 0 重新渲染

Reconciliation algorithm

@jackyu
jackyu / note_google_sitemap.md
Last active November 10, 2021 08:21
[筆記][Sitemap] Google Sitemap 設定

Google Sitemap 設定

什麼是 Sitemap

當你到一個城市，一定會有地圖，以前還是很厚的紙本地圖，現在則是直接開啟導航的數位地圖，這樣我們才知道要去哪裡，往哪邊走。 當你到一個網站，也要有地圖，這樣搜尋引擎才知道你的網站哪一些網頁是能去的，有哪一些網頁可以抓取，而這個地圖就是「Sitemap 網站地圖」。

目的

提交 Sitemap 和提升 SEO 排名沒有直接相關，但是主要目的是增加網站被完整收錄的可能，讓搜尋引擎了解你的網站架構、內容

@jackyu
jackyu / note_for_ga_default_events.md
Last active May 31, 2021 02:35
[筆記][GA] 事件列表
@jackyu
jackyu / google-analytics-data-events.js
Created May 29, 2021 08:24 — forked from kevinblake/google-analytics-data-events.js
Fire Google Analytics Events using data attributes for label, action and category fields
var googleDataEvents = {
pageTracker: null,
init: function (document) {
document.find("a[data-ga-label],area[data-ga-label]").click(this.trackLink);
},
trackLink: function (e) {
if (_gaq) {
e.preventDefault();
var l = $(this);
var label = l.attr("data-ga-label");
@jackyu
jackyu / note_for_git_multiple_user_settings.md
Last active May 31, 2021 02:36
[筆記][Git] 如何在 gitconfig 中指定多個 user

如何在 gitconfig 中使用多組 user 設定

會有這個想法，是因為原始全域設定中，我設定的 user 資訊中，是使用我個人的 GMail 信箱 而隨著各專案的屬性不同，例如: 公司專案，需要使用的就是公司的 Email 但又不想每個專案都再建一份 .gitconfig 設定 於是，可以使用以下方式

在 git 2.13 版後，可以使用判斷條件 Conditional includes 在全域設定 ~/.gitconfig 中指定特定專案目錄下載入指定的 gitconfig

@jackyu
jackyu / git_message_sample.txt
Last active May 21, 2021 17:17
[GIt] .gitmessage sample
# commit log 請遵造以下格式，並注意冒號後面有一個空格
#
# <type>: <subject> {必要}
#
# <body> {非必要}
#
# <footer> {非必要}
#
# 範例
# feat: implementation login api function
@jackyu
jackyu / check_commit_message_hook_script_angular.txt
Last active May 21, 2021 17:25
[Git] Check commit message hook script (AngularJS ver)
#!/usr/bin/env python
"""
Git commit hook:
.git/hooks/commit-msg
Check commit message according to angularjs guidelines:
* https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#
"""
import sys
import re
@jackyu
jackyu / note_code_review_10_top_ways.md
Last active May 9, 2021 07:17
[筆記][CodeReview] 10 種快速執行 Code Review 的技巧

1. Review Less

簡單說，就是儘可能把工作都拆分成最小單位的功能，儘可能的送最小的提交內容，才可以比較快透過 Code Review 檢視對應的開發品質和問題

範例

Problem: My team likes to have big bulky commits. Solution: Start dividing your work into smaller commits. When your team sees the clear benefits of reviewing your code, they will most likely follow.

2. Timeboxing

儘量安排在一天內分配一些時間去執行 Code Review，如果無法做到，至少也要嘗試用 60/70/80 分鐘來執行 Code Review，儘量不要把自己搞到還要另外加班做這件事