2021 Weeknotes 3
Tags: devjournal
Published: 2021-01-16 06:47:32

🧠 This is a brain dump. 

- [Development BTS](#development-bts)
- [React Hook Form | What to do with server-side responses](#react-hook-form-what-to-do-with-serverside-responses)
- [Tree-shaking with Webpack5 and Material UI](#treeshaking-with-webpack5-and-material-ui)
- [Writing Brag Books](#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](https://github.com/react-hook-form/react-hook-form/issues/566)
- [Server-side validation / Carl Rippon](https://www.carlrippon.com/react-hook-form-server-validation/). 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.

1. 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). 

2. Try making my own TextField but still using mui.
  - Tried this. But hmm. Is it worth doing this? Stopped.

3. Use another package that also implements material design like [Material Web Components](https://github.com/material-components/material-components-web-components)
  - There are ways to incorporate it into React but, again, is the effort worth it? And is it actually smaller?

4. 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](https://material-ui.com/guides/minimizing-bundle-size/)
- [Webpack Build Analysis](https://survivejs.com/webpack/optimizing/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](https://jvns.ca/blog/brag-documents/). 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.