err
...
文章 - 第 29 頁
React carousel
需求功能： 要有swipe功能 無限loop 參考文章： Create a react carousel using react hooks 用了flex, hook React Hooks Slider: How to Build an Image Slider With React Hooks...
用 translate3d 取代 translateX
記得之前自己做輪播的時候主管教的 用 translate3d 取代 translateX，效能會比較好 查了一下詳情： How to GPU accelerate CSS transform?...
React tooltip
https://morioh.com/p/35861cd474a2 運用新的技術解決tooltip的index問題...
Waffle Please 比利時列日鬆餅
週五下午事情告落，主管心情不差的樣子，請大家鬆餅 花生醬卡士達鬆餅，很好ㄘ～！🥳🥰🤗 週一主管心情不好，又點了鬆餅（蝦？） 焦糖卡士達鬆餅…感覺味道搭起來沒有很喜歡...
useCallback
When to use React.useCallback() Your Guide to React.useCallback() Performance Optimizations React Hooks 第一期：聊聊 useCallback...
專案checklist
．component有更新，一定要跑npm run compile2...
git資料夾大小寫
ex: dist資料夾有一個folder叫 LunaCute 後來改成 lunaCute之後， git 無法判斷 lunaCute的 L變成大寫了 所以再怎麼push，還是一樣會是小寫 這時候可以：刪除整個資料夾，push(刪掉的進度)，之後再再推新的資料夾上去...
React Router教學
Route Matchers 幾乎是最重要的部份！連結要「深入淺出」 <Route path="/contact/:id"> <Contact /> </Route> <Route path="/contact"> <AllContacts /> </Route> 在這裡如果連結是 /contact...
有做lazy loading的網站
https://stripe.com/docs...
安裝最新套件
先刪除舊的！ rm -rf node_modules/ 或是 npm uninstall xxx 再npm install 之後 再手動安裝 npm install git+ssh://git@lunacute.com/jelly.git 就會裝到最新版本了～就跟安裝 react router一樣…...
一些甜點
Color C’ode 凱莉小姐...
mock API
一些不錯的站站 Mocky: The world easiest & fastest tool to mock your APIs response的參考： https://jsonapi.org/examples/...
Jira使用
Epic：類似一個里埕碑，可以以小專案名命名（feature release）：odds Spread Setting, 帳戶中心、新增風控帳號… Components： 類似樂高積木，可以用模組命名，例如：API、UI、購物車… Label：類似關鍵字，hashtag，方便搜尋用 參考： http...
screen 指令
screen -S 23536.component -X quit...
React Hooks
Collection of React Hooks...
抓不到新的套套
嘗試把npm 快取清一清、 Try npm cache clean --force if it doesn’t work then manually delete %appdata%\npm-cache folder. Node.js移除，重開機，就解決了*__* 我也有小改一下套件的p...
網頁都是預設port 80
網頁都是預設port 80。所以不用加 : 80 例如輸入： http://www.lunacute.io:80/api/ 會變成 http://www.lunacute.io/api/...
英文詞彙使用範例搜尋
DeepL 查查綫上翻譯 xyz線上翻譯 Engoo Taiwan 英語 學習教材 Collins Online Dictionary | Definitions, Thesaurus and Translations...
JavaScript改變CSS變數
參考這篇文章，很淺顯易懂，可以馬上上手： Updating a CSS Variable with JavaScript...
Handle clicks outside of React components
Click outside listener for React components in 10 lines of code 內含TypeScript Little neat Trick to capture click outside React component | by Pitipat S...
React工具書
...
useEffect – compare object
https://twitter.com/dan_abramov/status/1104414469629898754...
目前專案常見問題：stackoverflow
有空多了解一下 Why Is `Export Default Const` invalid? `export const` vs. `export default` in ES6...
play JavaScript
[].concat({name: ‘lunaCute’});...
react.js PropTypes
導入這樣導： import PropTypes from 'prop-types'; // ES6 設定這樣設： CuteLuna.propTypes = { order: PropTypes.arrayOf(PropTypes.string), }; 各種類型： // array of strin...
寫程式的心得
寫專案就像一堆小小的程式的集合。每個程式幾乎都可以拆開來變成一個小部份，一個小部份就像MDN看到的那樣，有時候會覺得寫一個小部份可以做到，但整合成一個大部份就覺得複雜亂亂。可能可以先想好每塊部份要怎麼寫，然後畫個流程圖，就會好寫很多。（流程圖是寫扣的流程圖） 不過以前的專案大多都是舊有專案要增加新功...
敏捷開發筆記
敏捷其實不是代表快，它只是讓自己可以早點發現作品符不符合需求。 敏捷開發其實也可以當成一個自我管理的方法。 TASK想到什麼就加上去，不是一定只要做只有planning的時候開的需求。 你沒有去溝通的話，溝通是不會發生的。通常客戶把需求告訴PM後，PM如果吸收了百分之八十％算強了，他再傳給主管，主管...
reorder list
export const langMapDataA = { sports: "Sports", casino: "Casino", esports: "E-Sports", }; const reCraftArray = Object.keys(viewLang).map((key) => ({ k...
Array.prototype.slice()
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] ...