Renjani: Separation-of-concerns, 3 weeks

[renjani2022]

my fork of module repository

Learning Objectives

• [ ] 🥚 event-driven programming: identify the concept in a JS program via listeners & handlers
• [ ]🥚 entry points: describe what an entry point is, there are 2 kinds in the programs for this module - initialization & interaction. identify them in a program
• 🥚 function roles: describe what function roles are and why they're important. they can identify a function's role given checklists for each role covered in this module:
  • [ ] listeners: functions that attach event listeners to the DOM
  • [ ] 🥚 handlers: entry point for user interactions
  • [ ] 🥚 utils (utilities): pure functions to help do things with data
  • [ ] 🐣 components: render data into DOM elements to display for the user
  • [ ] 🐥 custom events: create custom events events in your components, passing useful data between components and handlers
• [ ] 🥚 DOM access: You read and write values from the DOM in an event handler
• [ ] 🥚 es5 vs. es6: You can demonstrate the change in developer-experience pre and post es6 by stepping through in the debugger and explaining differences in scoping (global vs. script, block vs. local, modules) between two programs with identical user experience but different implementations.
• [ ] 🥚 Scope Hierarchy: You is comfortable navigating different scopes in the browser's debugger to understand an existing application (script, module, closure, local, block)
• [ ] 🥚 Code Splitting: You can use ES Modules to split your code into multiple files & folders according to function role, data, listeners and initialization. They can use generated dependency diagrams and documentation to understand and navigate this folder structure.
• [ ] 🥚 Dependency Graphs: You can use a project's dependency graph to understand how it is organized and to navigate the source code.
• [ ] 🥚 Development Strategies: You can write development strategies that have all of the program's state defined at the beginning, and separate each user story into interface and interaction tasks.
• [ ] 🐣 Naming Functions: You can come up with clear and helpful names for the functions in your program. A good function name will take into account the function's role and the program's domain, like in the /naming-variables exercises from Debugging.
• [ ] 🐣 DOM manipulation: You can manipulate the DOM when implementing level-appropriate user interactions
• [ ] 🐣 Isolating Components: You can use a test.html file to render your components with different inputs
• [ ] 🐣 Forms: You can do basic handling of form data via event.target.form
• [ ] 🐣 Handling events: You can use the event argument to process user interactions, including bubbled events using event.target
• [ ] 🐣 Passing Component Unit Tests: You can write vanilla DOM component functions to pass provided unit tests
• [ ] 🐣 refactoring: refactor a single-script tutorial-style web page into multiple files using imports and exports
• [ ] 🐥 reverse-engineering: You can incrementally reverse-engineer a level-appropriate user interaction following these steps:
  • init
  • Listeners
  • Handlers
  • (possibly): Utils, Components, Custom Events
• [ ] 🐔 From Spec: given user stories, You can develop a site from scratch using a template repository.
• [ ] 🐔 Writing Component Unit Tests: You can write unit tests to validate your component functio

[renjani2022]

my fork of module repository

Week 1

I Need Help With:

• for a moment it's okay, perhaps later

What went well?

• It was confusing at first with debugging (DOM manipulation), but as we understood the workflow it became more challenging.

What went less well?

• exercises, did some trials before finally work out

Lessons Learned

• DOM manipulation, separation of concern concept

Sunday Prep Work

• on it

[renjani2022]

Week 2

my fork of module repository

[renjani2022]

my fork of module repository

Week 3

I Need Help With:

• exercises rendering: virtual dom element & links map reduce

What went well?

• some exercises

What went less well?

• exercises rendering: virtual dom element & links map reduce

Lessons Learned

• DOM manipulation
• Refactoring
• Rendering
• Test Case

Sunday Prep Work

• on it

[dobbels]

Are you still stuck on the rendering exercises? And if so, which ones? I am happy to help through Slack

[renjani2022]

Are you still stuck on the rendering exercises? And if so, which ones? I am happy to help through Slack

Hi Steven @dobbels, many thanks for your offer. Yes I am still stuck on this rendering exercise. Any help/solution shared in Slack for us would be great (and welcomed)