- Beth @bethanyios
- Reda @redahaq
- Pat @pat-cki
- Dan @plasticneuron
To run our tests, you'll need to do the following:
- Clone the repo
cdinto the directory- run
npm install
This will install tape, tap-spec, nodemon and nyc as dev-dependencies, since these are listed in our package.json file.
You can then run npm test to run the tests, or npm run coverage to run nyc alongside.
- Use TDD! Follow the 'red, green, refactor' cycle.
- Make it green then make it clean, kids!
- Become familiar with using the DOM
- Make it pretty!
As a disorganised person I want to:
- enter tasks so that I don't forget them
- view the tasks I have added in a list so that I can plan my day
- mark tasks as complete so that I can focus on the tasks I have left
- the to-dos to be large enough so that I don't hit the wrong one with my thumb
- once a list item added clear the input
As a disorganised person I want to:
- [] edit my to-dos so that I can amend them if the task changes
- click on any part of a to-do to mark it as complete so that it's easier for me to check to-dos off
- a visual indication of which to-do I'm about to interact with so that it's clear what I'm editing (ISH!)
- SUPER STRETCH: spin dodo when you complete a task
We turned to our retrospective notes to improve our ways of working.
- continue mobbing the HTML
- switch up pairs
- leave our comfort zones
- continue asking for and offering help
- ensure we all understand the codebase
- [] make more granular commits (SOME of us!)
- have fun! ✓✓✓✓✓✓✓✓✓
As TDD is still a pretty new and unfamiliar concept, we thought mobbing our first logic function together would be a great way to learn.
We really loved this approach, and although it took the four of us 3 hours to write 7 lines of code...
addTodo: function (todos, newTodo) { var allTodos = this.cloneArrayOfObjects(todos); newTodo.id = this.generateId(); // generate fresh id for newTodo newTodo.done = false; allTodos.push(newTodo); // add newTodo to cloned array return allTodos; },
... we did write 137 lines of test code on the way.
- test that function appends newTodo to cloned todo array
- test that array length has increased by 1
- check that appended element is an object
- test original todos remains unchanged by checking length
- check newTodo has an id prop after appending
- test original todos remains unchanged by checking deep equality
Cut to Thursday morning. The scent of freshly brewed coffee perfumes the air. Our heroes enter, and split up for some pair programming!
We paused writing our logic and had a little brainstorm to get an overarching sense of how everything would fit together and how we wanted our Todo app to look.
We used coolors to choose a colour palette, and created these as variables in our root directory. <3
Some of us were great at remembering to commit regularly... Beth, Dan, Pat 👏👏👏.
Others, not so much... cough Reda cough.
We did, however, use the 'co-authored-by' commit trick and our commits this week are so much more balanced!
We paired up again, trying to work on areas where we felt we wanted to improve, or could offer a lot of guidance to someone else.
We raised issues in github from the very beginning to track all our Todos! This was a goal we'd noted last week and we're pleased to say it worked really well for us in keeping everything very visible across the team.
- Sort functionality:
- We built the function but didn't end up using it
-
- Separating marked todos in another part of the webpage (alive > extinct)
- Adding animated interactions once a task completed
- How to write simple failing tests, and use these to construct functions
- DOM!
- Almost every JS array method (map, every, forEach...)
- CSS variables are AMAZING
- "LET's all start CONSTantly use ES6 scoping" - Jan : use const as a default, let if you are sure you need the functionality
By osmosis: 😎 We're pretty much gitflow ninjas now.
- Forgetting to return something at the end of our functions and wondering why our tests weren't working. This happened more times than we'd care to admit.
- Our DOM disappeared, taking all our todos!
- Wrapping of todos and input - for a while they were overflowing to the next line
- Weird merge conflicts: eagle-eyes necessary
We left our accessibility audit til quite late in the day on Thursday; we'd want to ideally check accessibility as we go along.
Don't forget about basic stuff: like html lang, link titles and form labels in your index.html.
