Fenny: Separation of concerns, 3 weeks

[FennyWilriani]

[my fork of module repository]()

Learning Objectives

Priorities: 🥚, 🐣, 🐥, 🐔 (click to learn more)

There is a lot to learn in this repository. If you can't master all the material at once, that's expected! Anything you don't master now will always be waiting for you to review when you need it. These 4 emoji's will help you prioritize your study time and to measure your progress: - 🥚: Understanding this material is required, it covers the base skills you'll need to move on. You do not need to finish all of them but should feel comfortable that you could with enough time. - 🐣: You have started all of these exercises and feel you could complete them all if you just had more time. It may not be easy for you but with effort you can make it through. - 🐥: You have studied the examples and started some exercises if you had time. You should have a big-picture understanding of these concepts/skills, but may not be confident completing the exercises. - 🐔: These concepts or skills are not necessary but are related to this module. If you are finished with 🥚, 🐣 and 🐥 you can use the 🐔 exercises to push yourself without getting distracted from the module's main 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 functions using BDD syntax

• [ ] Practice DOM manipulation exercises from the repo
• [ ] After if there's more time, continue with CS50 SQL lab and pset and last week of CS50
• [ ] Start studying REST if there's additional time

[FennyWilriani]

I Need Help With:

What went well?

I've been reading about HTML DOM to understand more how it applies and what it does to the elements of an HTML document.

• Understanding getElementById and innerHTML
• Understanding Events, eventsListener

What went less well?

My understanding of DOM events/events listeners is only theoretical and it is still very shallow, and with the exercise, I don't quite know what to do or what result I need to achieve, yet after the Thursday-call organized by @danielhalasz where we try to work on a couple of exercises from the repo, it all makes easier to understand. Thank you so much @danielhalasz and I am very sorry for the super late check-in. 😅✌️

Lessons Learned

Sunday Prep Work

[danielhalasz]

hi Fenny, glad to hear the session helped a bit. there are a lot of examples / exercises in the repo to practice on.

most of the examples go through from the beginning how to achieve the separation of concerns..so it is important to keep in mind that the end result that we aim for is actually the last folder in most examples in the repo 🙂 such as: https://github.com/HackYourFutureBelgium/separation-of-concerns/tree/master/3-stepped/3-separated/madlibs/5-refactor-logic

[FennyWilriani]

Week 2

I Need Help With:

What went well?

• Understanding further of DOM manipulation and I'm about to practicing on JS Doc
• Communicate and brainstorming with current group about the exercise, set the goals, and working on it while (we) I learn how to separate each function into files.

What went less well?

I'm currently struggling with time as I just started my work. If HYF coaches have any more suggestion of YT tutorial about separation of concern, JS HTML DOM, or things related to the module we are currently studying which as good as Traversy media, it would be super amazing as I usually looking up their tutorials to kill time on train 😅

Lessons Learned

Sunday Prep Work

Keep working on the group exercise

[danielhalasz]

If HYF coaches have any more suggestion of YT tutorial about separation of concern,

there are videos about DOM manipulation, but for separation of concerns, the best way is to slowly go through the examples and exercises..and maybe watch some previous class recordings with different coaches

[danielhalasz]

week 3?

[FennyWilriani]

Week 2

I Need Help With:

What went well?

Do my reading for the next module and build understanding on the concept of Asynchronous Programming, what differentiate it from Synchronous and how it beneficial for the users. My reading reference for the next module of Asynchronous Programming are

• Mdn_web docs
• Eloquent Javascript

What went less well?

I apologies for the super late check-in @danielhalasz. I have quite a lot going on this week with work training and family funeral. I haven't been able progressing on the next exercise to this module, yet I already put on my list to do more research on rendering and create simple search engine. 🙏

Lessons Learned

Sunday Prep Work

Clone repo, looking up video on group slack, and do more reading related to the module to be studied next week.