Lambda Labs 8: Week 4 Recap
Polishing up our application
Part 1 - Individual Accomplishments this Week
Paste a link to your whiteboard interview. You may keep this set to private and add your PM, but you are encouraged to set it to unlisted. (Weeks 2-4)
Paste your team’s github contribution graph here and indicate your Github Handle (m4rkh0ng) :
Provide a paragraph (5-8 sentences) summarizing the work you did this week, the challenges you faced, the tools you used, and your accomplishments
This week I worked on a lot of different areas that were presenting the information that we wanted, but just to a bare minimum degree. Updating the CSS and the styling after we had our UI meeting, I'd tried to implement a lot of the different fixes that were mentioned. Styling the colors of our navigation bars, changing our billing page styling, changing our invoice cards, changing our dates on the invoice cards to be represented in a more human readable format, and working on autocompleting the form data had me shifting between doing CSS styling and also managing state properly on our InvoiceForm component.
By the end of this week, I'd properly coordinated the fields of our InvoiceForm component to update each other based off of the subtotal/total/balance due calculations and did a lot of styling to respond to our changes.
Tasks Pulled
List the tasks you pulled this week, and provide a link to the successfully merged PR completing that task and the trello card for that task. You must have at least one front end and one back end. The expected total is 6 with a minimum of 4.
Front End
Ticket 1: Updates to CSS Styling and Colors
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/69
Trello: https://trello.com/c/JwDwolKO/103-style-site-to-match-chosen-colors
Ticket 2: billing page CSS adjustment (after UI meeting)
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/70
Trello: https://trello.com/c/6mQHRHXM/106-style-billing-page-to-match-rest-of-components
Ticket 3: Navbar styling (again)
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/72
Trello: https://trello.com/c/Y7UXIwbT/113-navbar-styling
Ticket 4: added autofill for subtotal and total based off of other fields
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/80
Trello: https://trello.com/c/fISsLfjP/99-total-generated-after-change-to-any-inputs
Ticket 5: invoice card status redesign
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/83
Trello: https://trello.com/c/i7ohiXVs/101-redesign-invoice-cards-in-invoices-list
Ticket 6: fixed some errors after merge
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/86
Trello: https://trello.com/c/Yl6vw1RJ/121-formatting-for-invoice-cards-after-merge
Ticket 7: added momentjs to format dates on the invoice cards
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/88
Trello: https://trello.com/c/k5p6XDsg/127-dates-have-additional-string-information-thats-unnecessary-to-display
Ticket 8: fixed form updating based off of form data and also updated placeholder values
Github: https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/96
Trello: https://trello.com/c/AThQzll8/124-invoice-form-use-placeholder-values-for-missing-data-instead-of-updating-state-to-0
Back End
N/A
Detailed Analysis
Pick one of your tickets and provide a detailed analysis of the work you did. This should be approximately ¼ page of text, and at least three screenshots.
https://github.com/Lambda-School-Labs/Labs8-AutoInvoicer/pull/96
When I had initially set out to configure these updates to the subtotal, total, and balance due form fields, I had only achieved a partial solution due to my incomplete understanding of the code that I had come into editing. I was working mostly off of what was already created by one of my teammates, and so I had difficulty parsing what was happening at first.
Later, after my first try at completing this task, I had been given some help in further understanding how setState takes a callback function as its second parameter. By understanding this behavior, rather than trying to setState on everything from the changes all at the same time, I had set up the subtotal as the first part of the cascade of state changes to then update the total, which would then update to the balance due. This was necessary in order for the calculateTotal function to have the new state/changes to the relevant form fields after calculateSubtotal runs.
After getting this piece done, I felt very proud of what I'd accomplished not only for its solid functionality, but also because of my increased understanding of the problem and its solution that I'd implemented.
Part 2 - Milestone Reflections
Put your response to the weekly question and a link to your team journal assignment here.
As a part of your journal entry, write ¼ to ½ a page reflecting on your experiences working with a team to make your product look and feel as good as it works under the hood. Describe how the duties of you and your team shifted tasks shifted towards the front end - and debugging the back end to improve UX.
Having worked on some initial styling in the week prior, I found it that we each individually have some unique ideas for design. As such, putting these ideas together in a cohesive way after the initial CSS pass that I'd conducted, I realized that there were some gaps that weren't addressed. For example, the Landing Page not being also styled for mobile was a surprise to me, as I'd somewhat hoped that would have been included as a part of the redesign to be considered complete (the same way that it was regarded as needing to be complete for MVP for our mobile breakpoints to work).
While it's still an outstanding issue at the current time, it's not too difficult to address. However, there are some other concerns that I have in regard to certain details being passed over (for example, the appearance of the horizontal scrollbar on the landing page has me wondering how it was designed; also, the text size/chosen font for our website is does have tight kerning inbetween its letters, so I feel that it's a bit hard to read at times). These are the kinds of things that I would want to address in order to push the product to look more professional, and I'm proud of my team for getting as far as they have. We've generated a last list of cards to push towards getting that final polish done, so it's just a matter of getting that situated and divying up the cards appropriately. Thus, due to my experience and relative comfort in writing CSS, I hope that I can help as much as I am able during this time.
As a group, provide documentation of your progress and remaining tasks:
- Link to each page and describe any remaining bugs, fixes, or tasks that need to be completed on that page
- Minor bugs or quirks are expected, as documented in your writeup. Your PM will review your site to confirm that it has:
• Consistent UI • Appropriate color scheme • Few console errors or warnings • Error handling for expected user interaction cases • Load speeds are reasonable
