Elias; Separation of concerns; 3 WEEKS

[EliasMlopez99]

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

[EliasMlopez99]

Week 1

where am i?

i'm currently doing "catch me" exercise presented by Daniel in today's meeting

need to help with

so far i'm just digesting the first exercises, if i present any issue i will let you know in the comments below

What went well?

Understanding function roles theory, i guess it was difficult at the beginning because there's no way of understanding something that you never try( by the fact the JS is more practical)

What went less well?

the examples did not make any sense for me, though with the explanation given today, at least i know where am i walking

Lessons Learned

• I learned the five function roles: listeners, handlers, components, utils, custom events. Plus if any function does not fit in any of the category previously mentioned automatically becomes a procedure.
• How to easily identify a function role
• Every role has a specific file from where it can be imported or exported but that does not apply to all the categories.
• Basic method to construct a EventListener

  Sunday Prep Work

  I have asked a friend (out of the course) to help me out with exercises to understand more what am i doing. Also i will study the material of the repo for the class of Sunday

[EliasMlopez99]

Week 2

where am i?

i'm currently starting to do the feature that lets the user see their items

need to help with

I will ask help if needed there are plenty examples apart from the ones presented in the repo

What went well?

The point of separating our functions in different javascript files in order to have a better codification, and if any of our functions fail we can easily identify the problem without losing time searching trough each line

What went less well?

The part of splitting up the codification, is something that definitely brought problems but i am working to do it more efficiently

Lessons Learned

• Separating our functions make our codes easy to understand for our fellow programmers
• Separating our functions makes easier to identify errors non-desired without diving into long lines of codes

Sunday Prep Work

Try to end my tasks assigned for my deliverables

[EliasMlopez99]

Week 3

where am i?

i'm trying to figure out how to help out my team, @Dnyandeo33 has been helping us a lot, i want to try out something myself but i have been experiencing internet issues lately, that has not allowed me to work as i would wanted to

need to help with

i would like to know how to create a feature that allows me select an element from a list of them i used this article about HTMLSelectElement but it only works with elements previously defined in a constant and not the ones that get add by JS

• https://www.javascripttutorial.net/javascript-dom/javascript-select-box/

What went well?

Working as a team and separating a function, this was because my fellow classmate explained me how

What went less well?

Trying to create my feature that allows me to delete/remove elements at least specific ones

Sunday Prep Work

I will try to figure out how to create the features mentioned above by myself, if not i will ask someone on Sunday to help me

[colevandersWands]

@EliasMlopez99 , this is a tricky feature. take a look at /separated/5-list-component-custom-event for a similar example.
Using custom events in components is more advanced, but also makes this feature much easier to implement because you can send the array item you want to delete (not the DOM element) as an event property

[danielhalasz]

i have been experiencing internet issues lately

are these related to the center..or is it a computer issue we can help with?

[danielhalasz]

i would like to know how to create a feature that allows me select an element from a list of them i used this article about HTMLSelectElement but it only works with elements previously defined in a constant and not the ones that get add by JS

1 way would be to create a listener that is listening for a click event on the list..and then use the event.target to get the selected element specifically

[danielhalasz]

Trying to create my feature that allows me to delete/remove elements at least specific ones

indeed, this is a more complex feature.. you could maybe have 2 separate parts of it... one for selecting the element and one for removing it.. so separate listeners/handlers