Andrii: Separation of concerns, 3 weeks

[andriivam]

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 t

[andriivam]

Week 1

I Need Help With:

Be honest the start of this week was super hard for me. I had feeling like get lost and did not understand a lot of thinks. But till the end of the week its get better. One of the reasons why i submit mu issue today is that i just finally get some thinks and can say something about that. With this module i need time and a lot of practice.

What went well?

After meeting with @danielhalasz and his explanations the exercises and study materials became more clear and easy to understand. So i am really would like to say huge thank you to the @danielhalasz.

What went less well?

I hard to explain in few words but i will try it. In one of exercises which i was doing the behaviour was super weird (probably i did some mistake there but wasn't able to understand that) i and its a lot of complicated thinks which need time and practice.

Sunday Prep Work

Still doing exercises and some tutorial. As well watching Mr Traversy

[danielhalasz]

hard to explain in few words but i will try it. In one of exercises which i was doing the behaviour was super weird

which exercise was that?

[andriivam]

@danielhalasz it was exercise 3-update-list.html. I think my problem was with children elements and index of elements

[danielhalasz]

one solution would be

 document.getElementById('actual').children[1].children[0].innerText = 'robots';

[andriivam]

@danielhalasz thank you)I have done this exercise with this solution but i was trying to implement remove method but it didn't work for me(

[andriivam]

Week 2

I Need Help With:

Hard to say with what i need help as this module i'm completely get lost. Can't understand from what to start group project(

What went less well?

We don't have progress with our group project as no one in our group really know how to do it. As well trying to understand the separation concept but be honest struggling with that a lot.

Sunday Prep Work

Watching some tutorial and study materials about separation concept.

[danielhalasz]

Can't understand from what to start group project(

well, would have been great to ask in Slack either in public or private

[andriivam]

@danielhalasz you know that im not ashamed to ask. But in this situation when i don't understand it at all its hard to ask something so it kind personal issue as most of the time in HYF we need to study in our own so i think i need to go by myself through some theory and get some knowledge and than try to ask. I find this module hard personally to me and probably i need more time for it.

[andriivam]

Week 3

What was not clear, where did you get stuck?

• Still struggling with separation

What was clear, what did you master?

• With DOM i'm pretty good accept separation

  Where can you still use some help?

• Separation

  Where can you help others moving forwards?

• Not sure that in this module i can help someone.

  Sunday Prep Work

• I will take look at suggested materials

[andriivam]

---

The Course

What can there be more of?

• As for me would be really helpful small project which can help better understand separation

What can there be less of?

• Less theory at the class and more practical exercises

  What material were most helpful (from HYF or elsewhere)?

• For me was really helpful Mr Traversy tutorial

  What HYF material was least helpful?

• Any suggestions for future classes?

• Would be super great to have some extra class or possibly to come other days and study at HYF (with someone who can help and explain problems)

---- END RETRO TEMPLATE ---->

[danielhalasz]

• Still struggling with separation

what are you struggling with especially? understanding the concept or writing it yourself?

[danielhalasz]

• Less theory at the class and more practical exercises

we were looking at practical exercises in class that cover new concepts, so need some theoretical explanation as well..it is always a good idea to watch/read all the before class suggested study material..so you already have a rough idea about the topic beforehand.

[danielhalasz]

• Would be super great to have some extra class or possibly to come other days and study at HYF (with someone who can help and explain problems)

you mean other day then Tuesday or Thursday?

[andriivam]

• Still struggling with separation

what are you struggling with especially? understanding the concept or writing it yourself?

I understand separation concept but not able to write by myself