Lessons learned from projects

• Page speed reported initial load JS for Walcron was large.
• Page load was slow when throttled with slow 3G.

1. Check on browser the file size loaded. Found one of the big chunk goes up-to 837kb.
   
2. Ran `npm run analyze`, which was configured in next.config.js. Shows the big chunk was due to typescript ~902kb to load.
   
3. The whole project was written in typescript, but strangely it should was imported and wasn' compiled! Then did a search and found a file importing the WHOLE typescript !
   
4. Check alternative to find how 'eval' can be replaced. Unlike lodash, transpile is included only in typescript. Apparently eval can be replaced, it's actually Function.Global_Object
   const evaluatedResult = Function(“"use strict";return ${mathEval}”)() return evaluatedResult
5. Replaced code with Function and file size was fixed!
   

Test suite that have Object.definedProperty override on certain behaviours cannot be redefined. If test case runs after it's used hence it cannot be erased.

 describe( "test", () => {
   it("should one", ()=>{console.log(navigator.share)}) // = undefined 
   it("should two", ()=> {Object.defineProperty(window.navigator, "share"...}) 
   it("should three", ()=>; {console.log(navigator.share)}) // = function (); 
 }
            

Error of `Cannot use import statement outside a module`, cannot be solved at the moment when 3rd party library are executed via mock. Only solution is to mock the whole library with jest.mock('whole library').

https://www.internalpointers.com/post/squash-commits-into-one-git

            git rebase --interactive HEAD~3
            

A new way to handle asynchronous response. But take notes on this:

1. For it to work with NextJS, it needs to load via client side. Hence a need to use dynamic/lazy import.
2. due to dynamic import, one will face a problem if directly routed of:A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.. To overcome it (sample in pageComponents/*/SnakeGame.tsx) it, simply wrap it in another Suspense tag

   <Suspense><LazyLoadedComponent/></Suspense>

• Click on a container and select Preview, find a button "Select Version" and do debugging. Do not use latest/live.
• Trigger some custom events sent to google tag. All google custom events sent with 'gtag(event)' requires manual configuration. To do so:
  • Make sure codes sent a gtag event, e.g.

    
     gtag("event", "CLS", {...metrics_id: 1})
     //OR
     gaLibrary.event("CLS", {...metrics_id: 1})
                      

  • Do a preview on the current page and to debug the event sent.
  • Take note if "Tag Fired"; if it doesn't, meant something needs to be setup in google tag Trigger. Image below has INP configured to fire to GTM's GA.
  • Take note of the event model and this needs to be setup as well. In this example for INP event name model is:

    
      eventModel { //take note this is using custom library, in pure gtag it is flat unless defined.
        ...
        metric_delta: 72
        sent_to: 'GTM...'
      }
                      

    
• Setup Google Tag
  • Setup data variables matching the event model with Variables by selecting Select New in User Defined
  • Create Data Layer Variable, and write the name similar to the model. As in this case "eventModel.metric.delta". Set as Version 2.
  • Create a Trigger, name the Event name with a regex (without /) and make sure it triggers All Custom Events. Sample means matching all INP or CLS or LCP event name.
  • Create a Tag. For the first step Tag the configuration as"Google Analytics: GA4 Event". Then:
    • Get you measurement ID from google analytics -> Admin -> Data Collection and Modification -> Data Stream
    • Use {{ Event }} as variable name instead of hardcoding. If hardcoded, all you custom event name will be the new name.
    • Expand Event Parameters and map a new name to the data layer variable created. (Old version have a prefix of DLV)
    • Add in consent with "No Additional Consent Required"
    • Tie a trigger created with this Event
    
  • Publish it then click Preview. During preview make sure debug is on and select "Version" of the newly published version.

Justify center doesn't support overflow. Meaning if overflow is auto, the content gets snipped off.

To solve this, use margin auto with pseudo ::before and ::after. Refer to minimenu.

CI/CD Caveat