遠端工作要求
軟硬技能沒有區分，人格特質 You know and love the basics: semantic HTML and pure CSS (SCSS) / Tailwind. You dream about Javascript and have experience with a framew...
科技
React.js各種技巧
慢慢更新中 1. Dynamic component React — Dynamic Component Names with JSX Dispatching an Action to Show the Modal...
進行中的練習專案/課程
Complete guide to building an app with .Net Core and React 開始...
styled-component 顯示 className in Create React App
安裝 react-app-rewired 安裝 react-app-rewire-styled-components 新增一個config-overrides.js檔案，內容參照2的寫法 在package.json的start做修改： “start”: “reac...
邪魔歪道的isNaN
...
中山區uberEats、foodPanda心得
怪獸小雞排，農安店 還蠻好吃的，但我要減肥，下次不考慮點。 覺得雞排我吃不飽，豆腐也少少的QQ 雞排的皮脆脆的很好看，蒜片大顆，也不錯吃，四季豆也好吃， 算是吃口味的吧，但對我來說CP值不高 臻曈棧 網路狂飆 點了牛肉咖哩，還蠻好吃，但吃一個便當吃不飽，感覺要多點一些的 少點鹽健康餐盒專賣 小巨蛋店...
專案心得
要全選按鈕的check的值就用 selectedItems.length === tablelist.length 來比較 state還是儘量用global比較好…這樣假設要重置資料，如果它沒有unmount，local state在dispatch的function裡面要重置很麻煩。又多了一個地方...
Google Analytics教學
．一開始接好之後，需要等24小時才會有資料 首先要建立自己的GA帳號，也要定一個property。 A property represents a business’s web and/or app data. An account can contain one or more propertie...
更新telegram的網站preview
@webpagebot 點它更新preview...
Unnecessary Re-renders
用這個放在背景圖，可以知道元件有沒有re-render const randomColour = () => '#'+(Math.random()*0xFFFFFF<<0).toString(16); style={{background: randomColour()}} React’s useC...
default parameter in destructuring
在設計hooks的時候，想要不用帶參數也不會整組壞掉（因為有時候api還沒接），用這個語法很實用...
精熟React
React的特性： 單向資料流 Unidirectional Data Flow in React...
styled component
...
Learning Map
讀書順序： C# => Front end Testing => JavaScript => React => webpack 2小=>1小=>1小=>1小=>1小 C#學習 C# Intermediate: Classes, Interfaces and OOP 正在看udemy的課程，看完準備第...
開發疑惑問題集
每個component要用一個redux的state的時候，是都直接useSelector來抓還是由上層抓，一直用props來往下放好？ 一個reducer改很多值好嗎？ 做modal的時候，開一個值modal: false, setModalTitle: “success”...
Functional Programming
https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0 https://opensource.com/article/17/6/fu...
Backend Roadmap
Back-end Developers RoadMap❤ Relational Databases...
Webstorm搜尋不到文字的問題
https://youtrack.jetbrains.com/issue/WEB-50774...
圖表製作
https://www.npmjs.com/package/highcharts-react-official https://github.com/highcharts/highcharts-react#readme...
custom select
有input可以輸入值 自動補完 (打兩個字元才出現 用鍵盤↓↑移動 (若有hover從hover的位置開始) 彈出視窗，一開始點擊即彈出，提供兩種選擇 一、可以輸入文字 二、可以往下滑來選 （有的需求是打了二個字才出現dropdown，不是點擊就彈出） 可以清除文字 搜尋後保留原本搜尋的文字 搜尋...
做Modal的方式
共用style，然後不同的內容用props來填，但是每個不同的modal要各別開一個component來呈現。適合各別客製化需求多的modal 共用同一個component，訊息從redux裡面讀。但就不同有太多客製化的東西。適合簡單的訊息提示窗。...
有空要研究的功能
自己刻select下拉式選單，還要可以搜尋、可以用鍵盤移動...
webpack react-testing-library
用webpack，不用腳手架create-react-app，來配置react-testing-library 參考Jest官網的教學 Using with webpack...
學英文的提案
買有翻譯的英文小說，之後再去買它的中文小說，交叉比對理解意思。 或是直接買有中英對照的書。例如愛麗絲夢遊仙境等等… 比較有名的作品例如1984就有英文/中文版。或是國外歐美翻譯小說也可以，總之逛逛書局有中文版的，它應該都有英文版，除非它原文是西班牙文什麼的！...
學習優先順序/比重
C# 後端相關 寫測試 加強React 英文文法 GA/GTM JavaScript繼續深造 AWS https://github.com/kamranahmedse/developer-roadmap?fbclid=IwAR2RlyWI7gOiEv0C3mZPxyE7GuWRLO-2mX2Shef...
isFirstRef
const isFirstRef = useRef(true); useEffect(() => { if (isFirstRef.current) { isFirstRef.current = false; return; } ...........code to run......... }, ...
create custom hooks
把JSX分出來做成container 把用到的function包成一個useXXX的hook...
前端學習懶人包
推薦網站： W3Schools Online Web Tutorials Developer Links 推薦的書： 以下是我覺得新手應該適用的書 網頁美編的救星！零基礎也能看得懂的 HTML & CSS 網頁設計 金魚都能懂的 CSS 選取器 最潮HTML5+CSS3網頁版型設計 深入淺出Java...
SEO學習
※注意，這是一些以前學的概念，現在應該不一樣了，看情況調整 越老的網域越好 常常更新更好 內容要優質 裡面的連結有人點的話，會加分 img 要有alt的文字 Should be Mobile Friendly...
styled-components
我只知道用起來蠻爽的，因為不想要像tailwind css 寫一堆class在JSX上 （覺得看起來不好看） 不過eslint的檢查功能會失效，上網找到這個套件來用用： eslint-plugin-styled-components-a11y...