YP的開發備忘

The boilplate I begin with is the production of the tutorial by BugBytes on Youtube in the video: Golang + HTMX - Creating a Go webserver / HTMX Integration / Template Fragments. It’s really good and straightforward. And I made these changes and will talk about them in this article: Instead of Booststrap, I used Tailwind CSS as the CSS library. I deployed the project on Zeabur, which is a personal preference (mainly because it’s free for the demo 😅)....

技術ぎじゅつを学まなぶ以外いがいにも、時々休憩を取るために何か他のことをするべきです。今回はコンサートを聴きに日本に行きます。 まずは、日本政府観光局（JNTO） - Japan National Tourism Organization のウェブページを参考します。 (切回中文模式) 規劃行程 JNTO 有很多實用的資訊並整理成單元方便瀏覽：日本旅遊計劃 | Travel Japan（日本觀光局） 台灣人入境日本免簽證，但還是需要填寫入境資訊，在出發前先到 Visit Japan Web | Digital Agency Services 登錄相關訊息。詳細填寫的步驟可以參考 Visit Japan Web教學》2024日本入境辦理入境手續/QR Code/注意事項 (kkday.com)。 Visit Japan Web 也可以申請免稅的 QR Code，方法可參考 日本退稅攻略》最高退稅10%！2024退稅流程手續/計算方式教學 (kkday.com) 保險 我參考了這兩篇文章： 出遊必看！2023 熱門海外旅遊保險推薦與比較（旅平險、不便險、綜合保險） - InsKeeper 保險管家 《整理包》2024最新旅平險+不便險比較，10間公司哪家最推薦？ (polida.com.tw) 幸運的是這次旅程我並沒有遇到需要使用它們的情況，但也就無法分享實際要用到時公司的服務如何。 訂房 我使用了 Agoda，操作蠻簡便的，規定期間內退訂沒有壓力，但要注意的是，瀏覽的幣別會直接關連到結帳幣別，結帳可以選擇： 預先付款 延遲付款 到店付款 若選擇延遲付款，到時結帳的匯率並不是單純的銀行匯率：#其他 Agoda訂房盡量不要使用延遲付款！（有建議解決方法） - 旅遊 forum | Dcard。 買機票 如果要買聯航，可以等等看不定期的機票特價，雖然時間可能比較多晚去早回的航班，但半價的折扣確實吸引人；當然犧牲的是座位空間與服務；像是機上餐、託運行李這些服務都是要另外加價的。 如果要搭聯航，要意識到機上可能沒有 Wi-Fi 可用 報到 行程確認單上的注意事項一定要看清楚；人生第一次搭飛機，透過電子機票 + 線上預辦登機的方式，並且沒有托運行李的需求，完全自助的情況下，讓我沒注意到要在起飛時間前 1 小時就到登機門前預備…(寫在行程確認的注意事項)。如果有託運的話，在櫃台服務人會貼心提醒有這件事，至少從日本回來的時候我是有被提醒的。

因為剛開始要啟動這個課程的資源時繞了一點路，想簡單分享一下： 可以上哪個版本？ 怎麼提交作業？ 前言 CS61B 是 UC Berkeley 在電腦科學的「入門課」，關於它的討論在 PTT、一畝三分地等論壇，或是直接 google 都可以找到學習心得的分享，就不多在此贅述這門課程的特點。 課程以英文以及 Java 程式語言來教學，但不要求有 Java 基礎，課程中會逐步帶到。反倒是因為此課有前置課程– CS61A，以 Python 程式語言教學電腦科學基礎的課程，在 CS61B 中會常聽到教授以 Python 作為對比來幫助理解。 延伸閱讀：CS61A 跟 CS61B 的差別 可以上哪個版本？ 首先可以打開瀏覽器，搜尋：CS61B，就能看到最新一季的課程頁面；以這篇文章撰寫的時間是 CS61B Spring 2024，在看到網頁中 Course Info 這個頁面的最下面，有個 “Auditing CS61B” 的條目– 提到目前可以使用的 “public” autograder 是 Spring 2021。這門課程是透過 Gradescope 的服務來做自動化評分，而此頁提供的課程碼– MB7ZPY，開啟的畫面如下圖。 上圖中，可以看到還有個 CS61B Spring 2019，那就是非 “public” 的課程碼開啟的– 如果是直接從課程網站的 week 1 開始跟著做，基本上影片都能看，直到跟著 Lab 1 的教學到了註冊 Gradescope 並開始了第一個提交才會發現…提交會失敗呀😅。 怎麼提交作業？ 先回到有公開評分器的 CS61B SP21 的頁面，跟著 Lab 1 的說明：...

近期想透過「翻頁」這個互動方式來做一個 web 小遊戲，過程中發現意外地不好實現。 這篇文章需要讀者對 React 這個前端框架及 CSS 的 transition 屬性的應用有基本的了解，成果及原始碼是建立於這兩個技術之上的，內文會大略地對實踐的方式說明，但不會詳細地提及所使用的框架及函式庫確切 API 的功能及用法。 TL;DR Repo | Live demo 透過 CSS 的 translateZ 做出書頁的正反面 .back { transform: translateZ(-1px); } 2023/9/22 基於前端社群網友的建議，我把原先用 opacity 變換做出的頁面正反面，換成靜態、單純加在 CSS class– back 中的 translateZ，另外，為了讓它能正確作用，也需要在 page 這個 CSS class 中加入 transform-style: preserve-3d，如此一來，應該多少能減輕瀏覽器的運算負擔。 透過 position: relative/absolute 來堆疊書頁的上下一頁 用 z-index 切換堆疊的順序 react-spring 控制 rotateY 做翻頁轉場 配合 perspective 屬性改變視角增添立體感 use-gesture 加入拖曳翻頁功能 讓套件再次偉大 首先我想到的是有沒有現成的(免費)翻頁書效果套件可以用， turn.js– 建立在 jQuery 之上的套件，快十年沒更新了，考量後續擴充功能可能有困難，暫不考慮。 StPageFlip– 效果很擬真，從 demo 看起來使用體驗流暢；而且有 React 版本，但是，從 commits 看來有兩年沒更新了，以 front-end 的迭代速度加上，擔心搭 React 18 會不會出現不明的坑因此沒有使用。 後續又看了幾個套件(比較新的)好像也是搭在這些套件上實踐出來，覺得難以在短期理解其運作方式，怕未來不好改。...

This article won’t do a deep dive into the implementation of Vue.js reactivity, I just want to show some examples that will break the reactivity when you are writing with the framework. Should you be interested in the mechanism of the reactivity under the Vue.js, here are some information I think that would help: Reactivity in depth | Vue.js Vue 3 Reactivity | Vue Mastery Vue JS 3 Reactivity Fundamentals - Composition API by Marius Espejo TL;DR Primitive value props cannot be modified from the child component....

繼上一篇 – 有趣的 TypeScript 型別用法與機制，這次閱讀到 Gabriel Vergnaud 的 Type-Level TypeScript 這系列文章的第 1 到 4 章，屬於免費閱讀的章節，讓我重新認識了 TypeScript (以下簡稱 TS) 的型別系統；該系列文章中有提供即時的程式碼編輯區塊，每一章最後都有小測驗，閱讀與學習的體驗都很棒，非常值得一看。 這篇文章的內容是我個人針對這系列做的一個學習筆記，在寫這篇文章時也意外發現其實 Gabriel 提到的內容，TS 官網上都有條目寫到；過去只是讀過，從沒理解過😅。 Levels of Language 貫穿該系列文章的第一個重點；language of values (value-level) 和 language of types (type-level)，JavaScript (以下簡稱 JS) 因為(還)沒有型別的語法所以 100% 是 value-level 語言。 還沒有，但正在提案中的型別註釋– tc39/proposal-type-annotations: ECMAScript proposal for type syntax that is erased - Stage 1 如果對 TS 實作不陌生，有個錯誤就是：'Somthing' only refers to a type, but is being used as a value here– TS Playground；正是這個 value 和 type 的概念。於是乎，TS 不只是給 JS 寄住的外殼，而是用來撰寫型別，type-level 程式語言。...

因為面試被問倒 useCallback、useMemo 的用途和用法，還有如何避免 React 做無謂的重新渲染 (re-render)，特別是最後一個當下我完全沒有頭緒… 小提示：使用 React.memo，整理筆記發現有記過這個，但看來真的只是寫下來 😅 事後亡羊補牢時看到 Debug Bear 的這篇文章；文章中漸進式的說明與例子終於讓我比較看懂這三個方法對重新渲染的影響，另外也提到了 list 元素中，React 會提示需要提供給元件的 key 屬性也是影響是否重新渲染的因子之一。 我參考文章中的例子，寫了個應該算是互動式的應用範例： react-re-render - StackBlitz 範例中因為版面有限，主要透過題目中的簡短說明，期望使用者配合閱讀程式碼，及程式碼中設定 console.log 印出的資訊來瞭解這四個主題 – 總共有 9 個問題。 這篇文章則是進一步描述每個主題的癥結點，提取出關鍵的程式碼部份做說明 (因此會與實際範例中的程式碼有差異)，但不會細部的去分析這些方法原始碼的運作概念 (因為我也還不懂)。 React.memo 問題 1 及問題 2 是針對 React.memo 的應用， // @filename: Question1.tsx export default function Question1() { const [answer, setAnswer] = useState<boolean | null>(null); return <Selection setAnswer={setAnswer} /> } 因為 Selection 有設定 onClick 會觸發 setAnswer 改變 Question1 元件 answer 的值，因此造成整個元件重新更新。...

針對像是輸入、鼠標移動，和頁面滾動…等可能在短時間被使用者大量觸發的事件做觸發限制， debounce 是群組短時間觸發的多個事件成一次執行的動作 throttle 是觸發事件後進入冷卻時間 避免網頁在短時間內要對大量觸發的事件做出反應，而花費過多處理效能。 Live demo and source code on stackblitz

這篇文章需要閱讀者對於 TypeScript (以下簡稱 TS) 及 JavaScript (以下簡稱 JS) 的語法有基礎的認知，入門可以參考 TS 官網的 Get Started 並選擇適合你的章節開始閱讀。 這篇文章中 Generics、Error Type in Catch 和 Utility Types 是 Matt Pocock 超讚的 TS 教學 - Total TypeScript ，在 Beginner’s TypeScript 課程中有用到的。這些範例為了方便我有精簡修改程式碼來說明，完整程式邏輯可以看 Matt 的原始教學，有提供可以互動的範例唷 (透過像 Jest 測試的方式)。 Generics 可以給 constructor function 加上 <type parameter> 來定義可加入的值 (原教學中用 Set 做例子)，這邊給進 new Map() 的是要求 <key, value> 的型別：TS Playground const beverageOrder = new Map<string, number>(); beverageOrder.set('coffee', 1); // @ts-expect-error beverageOrder.set(1, 'coffee'); Error Type In Catch Try & catch 中，catch 的 e 參數是什麼型別呢？TS Playground...

關於這篇 JWT 的說明比較偏向我個人的筆記，節錄及參考了下方連結中的內容，拜訪連結文章會有更詳盡完整的資訊： JWT 官方的 Introduction to JSON web Tokens The Ultimate Guide to handling JWTs on frontend clients (GraphQL) 前段介紹了 JWT 是什麼，中後段則是使用流程與實踐，不過是搭配GraphQL，這裡不會提到。 這則推特貼文圖解了JWT的結構與基本的驗證流程。 JWT 是 JSON Web Token 的縮寫，這個 JSON 是一種資料傳輸格式，像是： { "sub": "1234567890", "name": "John Doe", "iat": 1516239022 } JWT 結構 JWT 是由三組字串組成，每組用 點(dot) 隔開，像這樣 xxxxx.yyyyy.zzzzz；x、y，和 z 分別代表了 header、payload，和signature，接下來會分別再對這三部份的內容用途進行說明。 可以先提到的是 header 和 payload 只是 base64加密，可以透過在瀏覽器的 console 使用 atob() 轉換回原來的訊息，比如說官網的範例： eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c 把中間 payload 的部份透過 atob 轉換： atob('eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ') // '{"sub":"1234567890","name":"John Doe","iat":1516239022}' 就可以看到原始資訊是 subject (sub)、name，和 issue at (iat)。...