🧠 This is a brain dump.
- Development BTS
- React Hook Form | What to do with server-side responses
- Tree-shaking with Webpack5 and Material UI
- Writing Brag Books
Development BTS
I've just realized that the redux-form integration with material-ui components is not magical.. at all. I am currently moving to react-hook-form for another project. Why is it not as easy as before?? Not that it's more complicated.. it’s just that I feel like there are too many things to do.
Soooo looking back at my old code, I've done a lot of customizations in my previous integration that made it easy to use from one project to another with little setup. I forgot these behind-the-scenes.
Now I need to do it again, except that I am not starting from scratch. Maybe I can just drop in the previous builds I made. Will see that later. 😝
Update: Yep. Pretty much like that. Plus the designer wants to change the UX, so yea. Same Same but not really. 😅
React Hook Form | What to do with server-side responses
Maybe I missed some examples in the docs, but it was hard to see how I should incorporate server responses into my form. For example, success messages or server-side validation error messages.
Found these helpful links along the way:
- Submit from outside the form / RHF Github
- Server-side validation / Carl Rippon. I like this site. Subscribed haha.
Tree-shaking with Webpack5 and Material UI
I kept looking for a way to make my build smaller.
Material UI. Found my code blowing up to like 900kb. Whyyyy. I was only using TextField, why do I have modal and popover. So I jumped into the code, and this component is more of a convenience wrapper. It's not just the normal text field, you can use it for select, etc. Plus, the lodash packages are killing me. I forgot if it's also material-ui, but proptypes kept creeping into the production build.
Step 1: Make sure my webpack + babel + material UI setup is correct.
- The bundle actually got a whole lot smaller. Lodash is not being loaded fully. But I still want to optimize what I can.
Step 2: Check other options.
-
Check the gzipped version. Maybe it's not that bad.
- Used the web-cli to get this working. The result's not bad at all. Everything was around 100kb (including react and other packages).
-
Try making my own TextField but still using mui.
- Tried this. But hmm. Is it worth doing this? Stopped.
-
Use another package that also implements material design like Material Web Components
- There are ways to incorporate it into React but, again, is the effort worth it? And is it actually smaller?
-
Write my own?
- Nope. Not this time. 🤣
Step 3: Decide.
- Went with #1. Will re-optimize next time.
More links:
- Material UI: Minimizing bundle size guide
- Webpack Build Analysis. Quite an extensive list. Ha. Real cool.
Writing Brag Books
Because it's that season again, performance assessment.
Common problems in presenting accomplishment reports:
- you don't remember things you did
- not writing down the impact of the action
- worrying about looking boastful
Thankfully, our new senior manager shared this: Julia Evans' Brag Documents Guide. There are guide questions at the end of the article. Helped me for last year's. Will continue to use this year, probably write down milestones every quarter at least? Yep.
Top comments (0)