Joy's Frontend Learning Blog

有時候做網頁會想要加上一些小動畫或小圖案，但放上 jpg 圖片或 gif 動圖放大後圖片又會糊掉。這時可以改使用 SVG。
SVG 是向量圖，不像 JPG 或 PNG 點陣圖放大後會一格一格的；此外，在修改顏色、邊線或是製作動畫也能直接使用 CSS 來控制。

這是我在初學 TypeScript 時遇到的問題，現在做個補充筆記。

React Form 的 onSubmit ，callback 裡的 event.target 總是找不到 element 屬性
改成 currentTarget 即可 - e.currentTarget .sound.value

今天用 Next 開發時遇到一個狀況，在使用 MUI 的 AutoComplete 時跳出兩個 Error，雖然沒有影響操作，但還是查了一下如何解決。

通常初學者學到 for loop，應該都是從以下陳述式開始學

for( 起點; 終點; 如何遞增 ){ … }

1
2
3
4
5
6
7

const arr = ["Ben", "Ken", "Men"];
for (let i = 0; i < arr.length; i++) {
  console.log(`${arr[i]} is here!`);
}
// "Ben is here!"
// "Ken is here!"
// "Men is here!"

但 for loop 還有另外兩種

What is Electron for?

Electron 簡單來說就是使用 Web 技術寫桌面應用程式，讓開發者不需要另外學新的語言。
這邊介紹幾個 Electron 的基本概念。

根據 React 官方文件，useContext 可以解決 Prop Drilling 的問題，但 Prop Drilling 是什麼呢? Context 又是什麼?

“If you don’t add key to each mapped element, React will b*tch about it” 這是我在某個 tutorial 裡聽到的。因為只要將 index 加上就可以避免報錯，我也就沒有太在意到底 key 的用意為何。

當 React 在用 VirtualDom 作比對的時候，他要有辦法辨識哪些 element 是新的、哪些 element 有做改變。特別是 map 出來的 element，因為 render 出來的東西都一樣只是裡面的參數不同，所以必須要有獨特的 key 讓 React 去做比對。

Have this ever happen to you?

• 當你在某分支大展身手時，同事走過來問你問題，但他的問題只出現在另一支分支裡，這時候該怎麼辦呢?
• 你研究一個新功能到一半，需要臨時中斷處理別的事情。你想保留寫到一半的 code 但又不想要影響到既有的 code

你該試試 Git Stash!

當網頁向 API 要求資料時，如果網頁的 URL 與 API URL 不相同時，瀏覽器會報錯

Why

因為瀏覽器大多有同源政策安全機制，讓網頁可自由向自己的 URL 送出請求，但對其他 URL 的請求會被拒絕。

今天來聊聊 閉包 Closure 在幹嘛以及能幹嘛

在巢狀 function 中，內部 function 仍可以外部 function 執行完畢後，取得外部 function 的變數