Google Sheets
用這個會好看多...
科技
Next.js 疑難雜症
【build打包不過怎麼辦】 在這查到解法 An unexpected error occurred: “EPERM: operation not permitted in Yarn 把dev server關掉就可以了...
webstorm設定
使用快捷鍵Ctrl + Alt + O 來移除unused import 使用Alt + Shift + Enter 來import沒有import的東西...
HTTP解釋
HTTP 1.0 -> HTTP 1.1 -> HTTP 2.0 -> HTTP 3.0 (QUIC). What problem does each generation of HTTP solve? 這篇說得還蠻好的，簡單易懂...
Icon庫使用心得
fontawesome 免費的很少，會面臨要使用一樣風格的icon的話，缺少喜歡的icon圖形的問題 react icon 有個恐佈的問題 連結 。有一些icon導入後會發現它無法修改style（…...
Next-dashboard
作品集要在上面列出tech stack 類似像 這樣 像 StrikingDash 它的產品介紹頁寫得不錯可以參考 首先加入dark mode 參考這一篇 Next.js 13 with Tailwind CSS and Dark Mode 然後導入Icon Set Using Font Aweso...
Front End Developer Needs
Knowledge of how REST APIs, cookies, and caching work Javascript knowledge, experience in building frontend apps using React.js Familiarity with the J...
收集Codepen
Pulse for Skeleton Screens (codepen.io)...
研究下這些咚咚
Access-Control-Allow-Origin when doing CORS request, the Access-Control-Allow-Origin vanished · Issue #3753 · axios/axios The Access-Control-Allow-Ori...
GA4文章研讀
基礎建設： Configure Google Analytics 4 tags in Google Tag Manager 進階： How to Track a “Button Click” Event in Google Analytics Using Google Tag Manager 教你追...
PlayWright研究日誌
實作一個網站來觸發PlayWright的測試，例如開這個網頁讓它跑Yahoo網站 ※本文不定期更新 使用pnpm建立PlayWright專案 pnpm dlx create-playwright 記得要開一個資料夾來跑這個指令，它是直接在開好得資料夾裡安裝，而不是建一個資料夾在裡面安裝。...
Postman mock server
mock server設定完之後會出現在collection 如果想要再增加API的話，在collection選Add request 選Add example可以客製化response...
Eslint配置
記得webstorm這邊要打開 編輯器才會跳提示！如果Disable ESLint就不會有提示！...
GA GTM tutorial from scratch
首先到 Google Tag Manager 建立一個Account 然後看彈窗的提示來埋code 還特地叫彈窗出來，好貼心 埋好之後創一個GA4 創完之後資料不會馬上有，要等等 切回GTM，把GA4加進來 點New Tag 反正我就全選惹 發現有加進企惹 有按鈕就會想點，點一下Submit 之後按...
ChatGPT
在React裡用querySelector的ChatGPT 這幾天嘗試用ChatGPT來寫自己不熟的框架和功能，發現也沒有那麼簡單，程式也不一定能順利run。扎實的學習、技術的穩扎穩打還是很重要，某方面來說有點放心，這也是我喜歡的學習方式。 而且ChatGPT有時候還會回答錯的答案，不能儘信。有時候...
Windows錄影功能
快捷鍵： Windows+Alt+R 如果錄影沒聲音，調整一下功能 按Windows + G ，開啟遊戲錄影設定：...
Master the Coding Interview: Data Structures + Algorithms
Master the Coding Interview: Data Structures + Algorithms | Udemy udemy上買的，為了熟悉演算法買的課。教得還不錯，英文講得也清楚！ 《Big O and Scalability》 JavaScript有提供一個方法來mesure程...
Photoshop刪除雲端檔案的方法
首先按 Your files 就會出現一堆雲端的檔案，再對…三個點點點按下去 然後按Delete...
Storybook參考
React slideshow Nivo...
Performance
做每一單前想想這個單子可以有什麼數據化的表現： bundle size caching (ex. RTK Query) Render 速度、次數 Web Vital performance.now() Big O caculate …...
導入React Testing Library到webpack＋react＋TypeScript專案裡
首先安裝好Jest npm install --save-dev jest @types/jest 接下來安裝RTL npm install --save-dev @testing-library/react 為了用useful matcher，安裝jest-dom npm install --sa...
Cypress v.s. Selenium
Cypress 用JavaScript寫，寫法很簡單 可以mock API 是一個framework，不用再安裝一堆阿哩拉雜的 不能測手機（？） 只能在同一個domain跑，不能再跳到其它domain（真假） 不能切換Tab（幹我selenium就切好切滿） 不支援Iframe 這是聽udemy講師...
好看的後台範本
google關鍵字：dashboard template Dashonic – Admin & Dashboard Template StrikingDash – React Admin Dashboard Template Preview – ThemeFore...
上一個新頁面要準備什麼
準備縮圖，大小：1200:630 px 看要不要埋GA看流量 寫Meta Tags，可以用這工具 https://metatags.io 上了之後用Telegram Bot來更新preview https://t.me/WebpageBot 看要不要加 .htaccess 檔案 https://ca...
DataGrip的版控
主要參考這一篇 Databases in the Version Control System 在Database Explorer上對資源點右鍵，選擇Dump to DDL Data Source 開一個資料夾存DDL檔 接下來Ctrl+Alt+Shift+S 點擊DDL Mappings的Tab...
DataGrip複製table
首先針對想複製的table右鍵，按Generate DDL to Clipboard 貼到另一個專案的Query Console，把Use那行刪掉，確認沒問題就全選然後Execute 再利用Export/Import來複製資料 參考文章： How to full copy mysql table t...
雞爪圖是什麼？
Conceptual ER diagram symbols...
使用dapper撈取本地資料庫的資料
注意如果是用SQL Server的話，Connection String一定要對… Data Source是「localhost\instance」（那個localhost可以改成電腦名子或是一個圓點點 『．』」 主要參考這篇來達成 Basics of Dapper...
.NET 7 Web API & Entity Framework Jumpstart
.NET 7 Web API & Entity Framework Jumpstart | Udemy udemy買的一堂課，一邊看一邊寫筆記。 一邊跟著實作（才不會無聊）： LunaGoodnight/DotnetRPG (github.com) 另外也可以參考微軟的文件 Create web A...
React做圖表的套件有哪些
FusionCharts 還蠻漂亮的拉 React Charts 他們的文件Example就只有放一個Sandbox CanvasJS 可能是底線關係，感覺有點沒質感 react-chartjs-2 React Google Charts Victory 好…好有風格＠＠＂ Recharts vis...