Selenium 研究筆記
買了一堂自動化測試的課，做一些筆記 Selenium WebDriver Masterclass with C# compound class在C#不能跑，不過用XPath來選擇的話就可以 chrome要更新到最新，然後chrome driver抓相對應的版本 用id來當locator最好，可是舊頁...
科技
SQL學習心得
記錄一些看書或網路上學的咚咚，不定期更新 買了這堂課 The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert 感覺還不錯，發音標準，還會更新 每一條紀錄都是一個record，entity column: field，row: recor...
科技新聞
https://3c.ltn.com.tw/ https://www.cio.com/category/application-development/ INSIDE – 社群媒體、行動網路、行銷、技術、創業 TechNews科技新報 TechOrange DIGITIMES ̵...
webpack tutorial
※不定時更新 被打包好的檔案叫bundle 想要優化打包好的檔案，把它拆解出來的區塊叫chunk 1. 開始一個專案 npm init -y 2. 安裝webpack npm install webpack webpack-cli --save-dev 3. 創一個資料夾，src，再裡面再加一個檔案...
線上白板軟體
本文不定期更新 notebookcast 用起來頓頓的，這樣還上線= = Explain Everything 介面還蠻漂亮的，有範本可以選，還有麥克風 ziteboard 試用中，感覺還不錯 visme 感覺不錯，可以做簡報、infographic、圖表…，又有很多漂亮範本...
useEffect需要把useState的setter包起來嗎
https://stackoverflow.com/questions/57180731/react-is-usestate-s-setter-function-able-to-change https://atomizedobjects.com/blog/react/how-to-use-sets...
JavaScript Tips相關文章
22 Javascript shorthands that will save your time https://medium.com/coders-equity/22-javascript-shorthands-for-better-programming-e25da5571d73...
GTM/GA教學
Page View 改名叫 Container Loaded The data layer是什麼？ 一種拿來精製、客製化表達事件的物件，使用dataLayer來和GTM溝通， 告訴他：「欸我做了ｘｘｘ喔！」 另外記得dataLayer要寫在GTM的TAG上面 Pageview Trigger not...
Google Tag Manager 追蹤iframe
jellyfish How to track iframes with Google Tag Manager 這篇建議用postMessage charmaine-kruger Tracking in an iFrame using Google Tag Manager 這篇也建議用postMess...
JavaScript check is valid number
包含字串的判斷 (Built-in) way in JavaScript to check if a string is a valid number 這篇有用到 num.trim() !== ” Only numbers. Input number in React https://j...
遠端工作要求
軟硬技能沒有區分，人格特質 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...
styled-component 顯示 className in Create React App
安裝 react-app-rewired 安裝 react-app-rewire-styled-components 新增一個config-overrides.js檔案，內容參照2的寫法 在package.json的start做修改： “start”: “reac...
中山區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...
Unnecessary Re-renders
用這個放在背景圖，可以知道元件有沒有re-render const randomColour = () => '#'+(Math.random()*0xFFFFFF<<0).toString(16); style={{background: randomColour()}} React’s useC...
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...
圖表製作
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裡面讀。但就不同有太多客製化的東西。適合簡單的訊息提示窗。...
學英文的提案
買有翻譯的英文小說，之後再去買它的中文小說，交叉比對理解意思。 或是直接買有中英對照的書。例如愛麗絲夢遊仙境等等… 比較有名的作品例如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......... }, ...
前端學習懶人包
推薦網站： W3Schools Online Web Tutorials Developer Links 推薦的書： 以下是我覺得新手應該適用的書 網頁美編的救星！零基礎也能看得懂的 HTML & CSS 網頁設計 金魚都能懂的 CSS 選取器 最潮HTML5+CSS3網頁版型設計 深入淺出Java...
styled-components
我只知道用起來蠻爽的，因為不想要像tailwind css 寫一堆class在JSX上 （覺得看起來不好看） 不過eslint的檢查功能會失效，上網找到這個套件來用用： eslint-plugin-styled-components-a11y...
圖片資源站
https://www.canstockphoto.com/ https://www.storyblocks.com/ https://dominica.desertcart.com/ https://www.123rf.com/ https://www.iconfinder.com/ https:...
React Keys
不能重複 不能用uuid之類的，因為它每次都宣告一次會不一樣 一般如果來的資料裡，有獨一的id的話就用它（例如 item.id 如果沒有id，列表是不會變的話，可以用function給的index 如果列表是會變的話，不能用function給的index How to Choose a Key in...