Posts

這篇文章是我學習 MIT 18.01SC Session 1 及 Session 2 做的學習筆記，希望能夠幫助閱眾更容易地吸收課程中的內容。 這篇主要會輔助說明課程中導數的用途(查資料歸納出來的)，並說明 EXAMPLE 2 裡提到要用二項式定理細部來看是怎麼來的。 EXAMPLE 1 因為課程講義和課程影片中就蠻清楚了，就不多做筆記了。 這篇文章會涉及到 導數(derivative) 二項式定理(binomial theorem) 基礎知識需求 切線(tangent line)和割線(secant line) – 參考：math is fun 斜率(slope) – 參考：math is fun 線性方程式(linear equation) – 參考：math is fun 組合(combination)與排列(permutation) – 參考：math is fun 前言 關於導數 (derivative) 的概念 18.01SC 講的簡明扼要，但又舉了很多深度的例子啟發思考。切得更細，以及更多小練習題，可以看 Khan Academy - Differential Calculus 下的 Unit: Derivatives: definition and basic rules，從 Average vs. instantaneous rate of change 這段到 Derivative definition 該段的 Formal definition of the derivative as a limit。...

活動表訂從9:40到17:30，實際製作應該是5個小時左右，當天是一組四個組員，兩個工程師搭兩個設計師。 題目是 WTM 官網註冊頁及首頁，我只做了首頁…另一位工程師除了註冊頁，還能給大家開發及設計的建議，希望自己也能慢慢朝這個方向邁進。 這次實作要的技術東西都看過，都沒自己深入想過、做過😅，沒能好好的判斷作法，寫個筆記警惕一下自己： Web Vitals <img>載入造成的版面位移，忘了寫個預設值的情況下可能影響web指標中的累積佈局偏移(CLS)，而且使用者要點東西的時候版面跳掉應該是蠻差的體驗。 React React 18 的 useEffect 在 render 時會跑兩次，原因參考這篇文章。 正常在元件中使用 setTimeout 來觸發 re-render 拿 state 不會有更新位址的問題，想太多了 - 寫了個例子。這個作法我用來實踐題目中輪播圖功能。 會有事的是在Line群上看到群友提出的這個情境；在useEffect中使用setTimeout必須配合 useRef 來更新 re-render 後的 state 位址，才能穩定的每秒倒數並考慮更新的 state - 該情境可行的解法。 至於不會穩定的每秒倒數則是我嘗試想解題時的這個例子；每次觸發按鈕確實更新了 log 中的 state，但計時也會跟著重置，連按的情況下就會等最後一下按完開始算一秒才有 log。😥 Tailwind CSS Tailwind CSS 預設的 utilities 想用自訂值只要個加方框… 透過CDN引入一樣可以寫 configure, utilities 和用官方 plugin，作法參考官方文件。我應用這個在漢堡選單的展開，寫了個影格及動畫。 關於codesandbox 不知道怎麼解，但純記錄下來： 嘗試了在 codesandbox 用非CDN的方式引入 Tailwind CSS，看了幾個設定好的環境，不是把 stylesheet 整個輸出出來，就是要改Node.js做環境，但我只是想要不顯示scrollbar…。 環境跑 HMR 時好像會讓 useEffect 變得怪怪的，有狀態殘留、重複觸發，但重整後又沒事了，也可能是我的寫法不安全造成的？🤔 沒有確認好展示時要用的環境，雖然開發時有跟工程夥伴說好用codesandbox的mobile preview為基準開發，但它這個preview就算是用內建的open in new window，版面也會變得不同，也沒再跟全部組員確認demo時會用什麼環境，結果就有很重要的東西跑板了…...

這篇文章的撰寫緣由是我在React中某一元件要傳入兩種不同的物件陣列： interface UserInfo { generalInfo: GeneralInfoTemplate; educationExps: Array<EducationExpInfoTemplate>; practicalExps: Array<PracticalExpInfoTemplate>; } type UserInfoKeys = Exclude<keyof UserInfo, "generalInfo">; interface Props { block: UserInfoKeys; blockKey: string; setInputs: React.Dispatch<React.SetStateAction<UserInfo[UserInfoKeys]>>; setAppUserData: React.Dispatch<React.SetStateAction<UserInfo>>; } 簡單來說，我想把const [state, setState] = React.useState()這類的setState用props傳給子元件，然後這個setState是設置UserInfo物件中的educationExps「或」praticalExps用的，結果當我使用setInputs把這兩種之一的值傳進時報錯了。 這個錯誤，也是簡單來說，他說我educationExps沒有praticalExps的屬性，praticalExps沒有educationExps屬性…(怎麼聯集變交互比對了？) 我把這個狀況另外寫個測試重現出來如下： CodeSandbox連結(問題) type Foo = { one: number; two: number }; type Bar = { three: number; four: number }; type Foobar = Foo | Bar; interface Props { value: Foobar; setValue: React.Dispatch<React.SetStateAction<Foobar>>; } /** This will be used in App component below */ function Beep(props: Props) { const boop = Object....

前言： 因為目前專案都是使用 JavaScript(文章中簡稱JS) + Vue 2 寫的，很多事發生在window底下，要知道某個變數是什麼、從何而來，又要去哪裡是件極度痛苦的事。因此開始尋找不用改寫原始程式邏輯，又能夠應用TypeScript(文章中簡稱TS)方式。 .d.ts – declaration file JSDoc Triple-slash directives 這篇文章要應用這三樣幫.js檔案套上TS型別裝甲；第一個是實際會存在的檔案，後兩個則是檔案內的註解。 TL;DR <declaration>請替換成你的檔案名稱 在JS檔案中加入/// <reference path="<declaration>.d.ts"> 在<declaration>.d.ts這個檔案內編寫TS定義 把定義的名稱透過JSDoc的語法註解到JS檔案中 .d.ts型別宣告檔 這個檔案是給TypeScript使用的，如果是用VSCode，不用安裝也可以用滑鼠去指JS檔案中的變數，會看到型別註解。 但要編譯.ts的檔案就還是要安裝TS，請參考官方頁面 – TypeScript: How to set up TypeScript 在 About “*.d.ts” in TypeScript - Stack Overflow 這個回答中提到： The “.d.ts” file is used to provide typescript type information about an API that’s written in JavaScript. 這個.d.ts的副檔名呢，簡單來說，就是我們JavaScript的型別參照檔案。 使用同樣來自該則回答內舉例的檔案及資料夾結構： |- src/ |- |- thing.js |- |- thing.d.ts |- |- index....

這篇文章是我在職訓班時寫來釐清這堆術語的，稍微更新了比較理解的部份（前端），但到了現在我也還在更了解他們中（後端和網路的部份），有錯誤的部份還請不吝指教。 文中資料來自以下兩篇The Odin Project的主題，或由其中導向的網頁提供： Introduction to the back end Introduction to frameworks 要開發一個網站，你需要選擇伺服器、資料庫、程式語言、框架及前端工具，這些開發技術一個個堆起來，被稱為堆疊(stack)1 這篇文章的末段有提到幾個知名網站使用的軟體堆疊。 前端 Front end 前端，又稱client-side1，通常是指應用HTML標識(markup), CSS演示(presentation), JavaScript編程(scripting)。 JavaScript有很多函式庫(library)可用，如jQuery，React(他寫自己是library)以及框架，如Angular, Vue等，幫助簡化及快速開發1。基本上，可以把框架想成有制定使用慣例的函式庫，選擇某個框架意味著要使用對應的框架生態圈，比如狀態管理（處理資料流），Vue的話就會用Vuex或Pinia，React的話可能是Context或Redux。 這篇文章提供了前端與後端的比較。 後端 Back end 後端，又稱server-side1；指運作在server端的應用，由於脫離了使用者瀏覽器相容性的限制，有大量的程式語言被應用在這塊。 主流的語言有：PHP, ASP.NET(C#), Ruby, Python, Node.js2和Java, Go等。 這些語言又延伸出對應的框架(framework)來幫助開發者們實踐功能，如Ruby on Rails, Laravel(PHP), Django(Python)…等。 普遍被提到的WordPress，就是一個將前端及後端整合起來的開源(open source)框架，建立在安裝了PHP的資料庫(database)，並允許設計者透過CSS, jQuery及JavaSript。3 什麼是後端開發 翻譯自TechTerms – Backend 以程式術語來說，後端是數據訪問層(data access layer)，前端是(presentation layer)表現層。 後端的運作流程大致如： 處理網頁送來的要求(request) 執行語法(PHP, ASP, JSP, etc.)來產生HTML 使用SQL查詢(queries)—某個特定主題(article)，然後訪問(accessing)該主題在資料庫中的資料。 儲存並更新資料庫 加密或解密資料 處理檔案上傳與下載 透過JavaScript運算使用者輸入的資訊 後端包括哪些部分及各部分的名稱 參考自Codecademy的這篇文章 – Back-End Web Architecture： 客戶端(clients)：任何發送要求給後端的東西 伺服器(server)：接收需求的電腦 應用(app)：運行在伺服器上，接收要求，從資料庫取回資訊並送出回應(response) 資料庫(database)：組織及保管資料 前面提到的這篇文章前段也有把client side, server side的軟體堆疊做成圖片幫助理解。...

Hugo? “Hugo is a static HTML and CSS website generator written in Go.” – Hugo’s GitHub 簡單來說，你只要照著操作指南進行，就能產出部署網站需要的檔案。 HTML 和 CSS 是標籤語言，分別做為網頁的文字骨架及渲染設定。 Go 是一種程式語言。 建立 首先我參考了這篇文章：Hugo 搭配 Github page 架設靜態部落格 | JCYH Develop Blog，以及文章內提到的參考文章，步驟上蠻清楚的，但因為我的作業系統是Windows： 另外要依照官方的安裝指南操作，也推薦跟著指南中的影片進行。 取得.exe檔後，要在C:\下創建Hugo\bin\，並把解壓縮的檔案放到bin資料夾內。 透過 Windows key + R 叫出執行視窗，輸入 cmd 叫出Command shell並移動到創建的bin資料夾下。 輸入 hugo version 可以確認Hugo是否有安裝成功。 要把 hugo 這個指令增加到Windows環境變數 (environment variable) - PATH 中。 新增這個位址 C:\Hugo\bin – 也就是我們創建來放Hugo相關檔案也是網站文章的資料夾。 在cmd用 echo %PATH% 可以看到PATH中現有的變數，有看到hugo被加入就是成功，或也可以離開 C:\Hugo\bin ，然後輸入 hugo version ，看到資訊就是成功了。(如果不行可以先關掉cmd再重開打指令確認) cmd 在 C:\Hugo\ 下輸入 hugo new site <folder_name> ，folder name的名字可以取自己喜歡的，我採用與參考的文章相同的名稱：website-hugo。 套用主題 這裡應該與作業系統無關，要幫我們的網站套用佈景主題，可以到 Hugo主題庫 選擇自己喜歡的，步驟上同參考文章，但一樣有遇到一些情況：...