了解網路運作
IP address standards and services Network protocols to use when you implement a network 這幾個軟體開發比較常用到 差別在你要比較熟的部分跟當故事看的部分XDDD 接著是把 network 和 host 的關係連...
文章 - 第 15 頁
AWS Learning
來學習用用看AWS AWS Amplify 看著它的文件，安裝了CLI之後，輸入接下來它會帶你到 IAM dashboard 學習連結： AWS Training & Certification Twitter： https://twitter.com/simonholdorf...
哈根大使
好吃的口味： 芒果覆盆子：第一名！甜中帶酸味道讓人睡醒 藍莓：還不差 咖啡：還不差 巧克力：還可以 榛果巧克力：不錯！香味濃 淇淋巧酥：還不錯 桑果雪酪：好酸不喜歡 草莓起酥蛋糕：不錯！ 草莓：讚讚讚 焦糖牛奶：不喜歡，太甜 萊姆葡萄：還不差 花生醬：讚讚讚，裡面有花生顆粒 抹茶：味道濃郁，不意外的...
日K點捨摸
https://www.youtube.com/watch?v=vSowFAYoqAY https://www.youtube.com/watch?v=2K1KaUyYIuM&ab_channel=199302021...
Redux Toolkit
reducer裡面要判斷陣列的時候，可以先slice深拷貝一下， 可是發現太多都是Proxy了，還是別在reducer故判斷好了 在createSlice裡面的initialState，記得如果有的值要設成null的話，它會沒辦法被destructuring出來。 例如 infoList: null...
React Label
<label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"> <label> Name: <input type="text" name="name" /> </label> HTML...
玩玩Vim編輯
常用指令： :wq save and exit :qa! exit Esc back to normal mode i insert 在pick那邊按ctrl + A 可以切換狀態（pick、squash…） 參考文章 How to Save a File in Vim / Vi and...
Complete guide to building an app with .Net Core and React
解釋Walking skeleton是什麼 這是烏的咪的一堂課，一邊聽課一邊做點筆記。 Complete guide to building an app with .Net Core and React 1-2教安裝.NET SDK Creating the .Net projects and r...
英文字典站
Lexico.com Cambridge Dictionary English Dictionary, Translations & Thesaurus YourDictionary Vocabulary.com – Learn Words – English Diction...
練習不用滑鼠
WebStorm快捷鍵 Ctrl + B Go To Definition（Navigate to declaration） Alt + Enter Show intention actions Alt + Shift + F10 Run configurations Ctrl + W Extend...
機器，平台，群眾：如何駕馭我們的數位未來
很多人會做什麼事，可是他自己很難表達出來他是怎麼做到的，這是波蘭尼弔詭（Polanyi’s Paradox） nugget ice 礦塊冰感覺很特別… 機器人的創作 書上提到的企業： FirstBuild Indiegogo 喜飛思分析 Civis Analytics 小松製作所 K...
useRef()
大多應用的場景： 記錄之前的值，不需要re-render 對DOM加上一個ref 對input做focus… 這裡有個實用的 usePrevious 可以直接拿來用，不過用在input的時候，發現用右鍵刪掉input的值，再新增的話，它就會記空字串，要注意一下。...
讀書心得：未來十年微趨勢
騎單車通勤的人，身體健康，降低很多疾病上身的機率 兼職工作的人對工作的滿意度平均高於全職工作的人。 美國以前創業很難，會讓人想加入共和黨。 在美國很多有錢的亞洲人，教育程度也高。 在美國，經濟好的大多會投共和黨。 在有的國家，大麻合法化是個趨勢。...
C# Unit Test 學習
Anatomy of a Unit Test Unit Testing Framework Microsoft.VisualStudio.TestTools.UnitTesting Namespace Unit test your code Unit testing C# with MSTest a...
ESLint: Expected linebreaks to be ‘LF’ but found ‘CRLF’.(linebreak-style)
eslint報錯解決方式： ESLint: Expected linebreaks to be ‘LF’ but found ‘CRLF’.(linebreak-style) 編輯器如果這邊是CRLF就會每一行都有紅波浪 開始研究怎麼解決 在打開專案的...
每天吸下補一下
藍色的地方就是keyword cw再打Tab，就會變成Console.WriteLine() An object is an instance of a class. One class per file. 對 class 的名子按 Alt + Enter 可以給它抽出來變成一個檔案 對Projec...
壓縮圖片
已經有原生的方法可以壓縮圖片惹，前端可以直接使用： <img src="image.png" loading="lazy" alt="…" width="200" height="200"> 另外，也可以把圖片轉成webp，是一個新的圖片格式，輕量快速 可以直接用軟體來轉： Webpconv 參考：...
在react專案使用Google fonts
超級簡單的，只要二個步驟！ 1. 到 Google fonts 選一個font 按那個加，右邊會彈出教學 2. 選好之後，可以選要加入的方式 有三種方法： 1. 在html的head上加link 2. 在html的head上加style 3. 直接在css上import 在css上加的範例， fam...
如何算是跑敏捷
這周在公司遇到Yves，他順便幫忙解惑了一下： 只要符合四大宣言，就是跑敏捷。 不過跑敏捷不等於跑scrum，跑scrum就要照它的flow走，沒有照著走的話，就是scrum, but… 敏捷不等於用新的技術，但敏捷代表持續學習（它的精神有）所以如果新的技術用了對軟體是有加分的話，就是可...
Jest 配置
在import css檔案的時候會有問題，這時候可以： 加一個styleMock.js檔案，把css都變成空物件 styleMock.js module.exports = {}; 加了之後在 jest.config.js 裡面對應這個檔案 module.exports = { setupFiles...
Array方法選用
const words = [{...}, {...},{...},{...},{...},{...}]; 這時候想要取出其中一個物件，要用什麼方法呢？ 如果使用filter，可能會變這樣 [{...}, {...}] 回傳的還是陣列，要取它裡面的值，需要這樣 words[0].value ...
Async/Await
因為JavaScript是non-blocking，例如去買電影票排隊，排到跟剪票的人說：「欸，我沒帶票，我老婆要過來了，可以等我嗎？」剪票的人說：「不行，你後面還有一排人欸，你先站邊邊，等老婆來了再排啦。」這就是JavaScript的運作方式。 If something needs to wait...
Good code || Bad code
看了這篇，大致重點如下： const fatLuna = { kg: 999, test: true }; const ano = { kg: 7, style: "flurry" }; 要console.log的時候， bad code： console.log(fatLuna); console...
手把手的webpack + react教學
首先先開一個專案 npm init 開好專案之後，安裝webpack npm install webpack webpack-cli --save-dev npm install react react-dom npm i @babel/core babel-loader @babel/preset...
Eslint 配置教學
如圖，可以快速裝好airbnb規範 輸入這個指令 npx eslint --init 安裝完之後，在webStorm的設定那邊開啟eslint 之後就會看到一堆可怕的紅線惹。然後再搭配prettier 再新增.prettierrc檔案 { "printWidth": 100, "singleQuot...
Babel
babel裡的plugins是晶片，有各種晶片可以提供各種的功能。然後就有懶人包：presets，可以想像成是晶片包（其實也可以比喻成各種菜組合成的便當） babel7可以建一個 babel.config.json 檔案來做設定 使用async/await會報錯： regeneratorRuntim...
架webpack-dev-server在本機端跑跑
姆喵要在本機端看程式變怎麼樣，所以需要這個功能。 很簡單，首先先安裝 webpack-dev-server 再看怎麼辦。 npm install webpack webpack-cli webpack-dev-server --save-dev 喔對了還要安裝這個 npm i html-webpac...
webpack && react
不想用腳手架 create-react-app 的時候，就需要研究一些有的沒的。 搜尋關鍵字： react webpack tutorial 參考文章： A mostly complete guide to webpack (2020) Tutorial: How to set up React, ...
ES6 Modules
在寫react常用到import和export，這些就是ES Modules，目前已經被大部份的瀏覽器支援。就連Node.js 12版以上也支援了。 需要用到module的程式，在script上需要加上type=”module”註記 <script type="module"...
React-Testing-Library 學習
要看render出來的結構長怎麼樣，可以用 screen . debug ( ) ; 覺得要query的element有可能不在的話，用queryBy，因為getBy如果找不到就會throw Error。 不應該去測試DOM的結構，DOM的結構應該當成黑箱子。 假設有個按鈕，用getByRole不要...