Design comparison
SolutionDesign
Solution retrospective
his was an increase in complexity!
Few things are undone:
- Not fully understanding reasons for needing "registration" a relative-time webcomponent in my
index.html
- specifically because log shows "already registered", so code does nothing? But without it things don't work. - Changing color of SVG elements, maybe it's easy if I inline them as code
- Not adding '@' tag to replies. current component hierarcy makes it awkward to conditionally display '@' in replies and not in top level comments, also - in the "edit" mode, design docs are not detailed enough to explain presence of '@user' - is it editable? what happens when it's edited?
Note: code would be a lot simpler in a full-stack app. With laminar I can propagate Stream of app state to all components, from the server websocket that sends all updates, so no callbacks to register state chages from the child components would be necessary, only doing http requests to api from the child components.
Things done:
- Message component
- display message, author, score
- functionality for reply
- checking and displaying if OWN
- functionality to delete - create modal https://blog.webdevsimplified.com/2023-04/html-dialog/
- functionality to edit - swap body with form
- make hover on buttons - making them more white
- save state into local storage with easy serialization into JSON
- component to reply \ send message could be shared?
- component for Whole Comment with Replies
- component for all comments
- component for whole comment section & submit new top level ui
- text wrap, when word is longer than element width
- submit by ctrl + Enter
- let's style the desktop version
- add relative time webcomponent
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord