Frontend Fundamentals 11, 12, 13, 14, 15 (Wtf is `this`?)

1. Understanding this, apply, call, and bind with ChatGPT.

So I told GPT I was unsure of these concepts and made it test me with some questions then evaluate my answers. Here are my takeaways.

• call uses comma-separated arguments, and apply uses array of arguments
• this refers to (1) object itself in object methods, (2) newly created instance in constructor methods, and (3) global object (window) in global function non-strict mode
• arrow functions inherit this from lexical context, while traditional functions inherit this from where it is called
• bind() helps us attach a context to a function that will be used later

More questioning:

• global mode is not preferred these days, but may be encountered when dealing with legacy code

const user = {
  name: 'Bob',
  greet: function() {
    // Regular function in setTimeout: `this` is not bound to `user`.
    setTimeout(function() {
      console.log('Regular timer:', this.name);
    }, 1000);

    // Arrow function in setTimeout: inherits `this` from greet.
    setTimeout(() => {
      console.log('Arrow timer:', this.name);
    }, 1000);
  }
};

user.greet();
// Expected Output after 1 second:
// "Regular timer:" may log undefined (or error in strict mode).
// "Arrow timer: Bob" logs correctly.

2. Sample 3 JS this questions to solidify understanding

• 🚨 Promise Time Limit
• Promise.all

3. Open-ended Discussions

• STAR framework
• 7 to 10 good stories
• interest, enthusiasm

Things people are interested in:

• Will this person be a superstar, driven teammate? e.g. communicates well, resourceful and independent in solving problems, able to manage stakeholders, proactive and works hard in enacting new initiatives to drive the team forward.
• Will this person be easy to manage? e.g. takes feedback well, likable, sociable and does not give you problems.

4. Answer 16 Common Questions on ChatGPT and Evaluate Answers

• 🚨 + how does this learning point lead to future improvements
• 🚨 anticipate follow up questions

5. Prepare 7 to 10 Stories

1. Credit Card Flip Animation
2. QA that likes to test extreme edge case
3. Reduce bundle size 7% via CV
4. Reducing possible investment states with PM
5. Guiding a junior engineer / writing es lint
6. RichText component cross-market
7. Optimising homepage load times (8. Cybersecurity project) (9. Gitlab CICD for website crash) (10. Supporting BE - reduce data load by 200%, debugging shared system) (11. Script to reduce transify bugs)

Frontend Fundamentals 12

1, 2, and 3. JS Questions

Revisiting some old problems like

1. Debounce ✅
2. Function.prototype.call ✅
3. Curry ✅
4. Promisify ✅ 🚨 Need to work on more in-depth understanding

4. System Design 1: Global Payments Dashboard

• Websockets provide low latency
• Caching strategies in high-update environment (Cache for non-laggy UI, fetch in background for clean UX)
• Handling race conditions in high-update environment (Optimistic update, for quicker UI response. Version and timestamp, to ensure updates are applied in correct order)

5. System Design 2: Internal Corporate Messaging Platform

🚨 What do big companies use?

Frontend Fundamentals 13: Taking a step back

Taking a step back, I realise I might have been too focused on practice questions. A holistic approach to understanding such as trying questions specific to my existing knowledge and required tasks may be helpful. ChatGPT created a list of 9 questions for this, and my takeaways were:

• virtualised lists keeps the Virtual DOM clean by hiding items not rendered, and removing items scrolled-past.
• BFF, Apollo Client / GraphQL

And then I got another 5 questions:

• CSP and CSRF token-based protection

FF 14: Revision Time

This time a focus on 2 random JS questions from the internet for practice on knowledge application, and revision on 3 alarm bell items on my past notes might be helpful.

1. Flatten Array ✅

2. GFE Medium

• First Bad Version
• Memoize (with resolver function)
• Implement Queue using Stack (🚨 I wrote the same code but it don't return)
• sum() curry (🚨 func.valueOf() is unstable)

3. BFF / Apollo Client / GraphQL

BFF handled by FE team allows them to customize response for each device type (eg. Less data required for mobile). This is also something GraphQL provides, sort of as intermediate backend. Apollo Client helps with that. I think no need to study this since it's a framework that can be learnt when required.

4. Big Tech's Approach to High Update Messaging

Seems that Telegram use MTProto (websocket), Whatsapp use MQTT (pub/sub). But none of it relies on the basic transport protocol. They seem to stack a lot more to achieve their business needs.

Websocket provides low latency but potentially less safe, unless you add things on top of it. Pub/Sub is uni-directional and may need deconflicting in an actual app...

5. CSP / CSRF token protection

OWASP has a guide on Synchronizer Token Pattern, which require a per-session valid token for every network request so we can ensure token used is from the actual user, not forged.

FF15 and later: (a) 2 JS questions, and (b) 2 SD/B questions, per day

1. JS Questions (Medium)

• array.prototype.flat()
• decode message
• string.trim()

2. React (Hooks) Questions

• usePrevious
• useTimeout

🚨 Need to work on my hooks debugging skills

3. CSS Questions

• center a div
• truncate one-line text with ellipsis
• two column layout

🚨 Need to work on my CSS debugging skills