Interactive comments section documentation
See my project live here. See my source code here.
Since the day I decided to be a front-end developer, my projects were pretty much 95% UI with very minimal document manipulation using JavaScript.
This project, an interactive comments section, is my first project with actual algorithms. The song finder project had a little algorithm, but it was with the aid of a tutorial. I wrote this new project from scratch using the specifications provided by FrontendMentor.
Background on my past JavaScript projects
My past projects from two years ago were actually very algorithmic. In fact, the sungka project still feels like the heaviest in terms of algorithms.
The reason I was able to pull off those two projects was because of the programming experience I gained from my university. I was exposed to algorithmic thinking. And I know I love solving problems. I pushed for those two projects even with my little understanding of JavaScript.
I did not really know some of the widely-used JavaScript-specific syntaxes, objects, paradigms, and tricks. I learned basic JavaScript syntax, and of course, I had to learn some document manipulation. I just knew how to program, and I applied it.
Before I started this new project, I first went over FreeCodeCamp to refresh my JavaScript knowledge, especially on objects and asynchronous JS. With that, I gained more confidence in picking the project from FrontendMentor. I was assessing if the knowledge I got was capable of doing the projects.
Introduction to this new project
This project is a CRUD application — an application capable of Creating, Reading, Updating, and Deleting data. It’s a great practice! Since this is a comments section, the main data manipulated is comments. Just add the ability to post, send messages, and receive notifications, it’ll be halfway to becoming a social media app.
I intend to extend this project, that is why I was thoughtful on my naming scheme and implementations of functions.
Aside from the feature of creating, reading, updating, and deleting comments, it also has a feature to upvote and downvote and a feature to change users.
Daily log: User interface
June 7, 2022 - Day 1
There are results but not much documentation. Time: 4.62 hours.
June 8, 2022 - Day 2
I thought that I was almost done on this day, but there was still the modal to think about. Also, it took me a long time trying to figure out the optimal design for the stacking of comments with consistent 16px gaps.
At first, I was using paddings and margins, and some pseudo-classes to exempt the last elements from the padding and margin rules. It was a little complicated.
The gaps are essential for the line on the side of the comments that indicate the scope of the nesting. After thinking much, I realized that using column flex with gap: 16px is the way. Easier, cleaner. Time: 5.93 hours.
June 9, 2022 - Day 3
Again, I thought I was almost done, but there were still media queries to worry about.
I finished the hover and focus states, the modal design, refinements of some fonts and margins, and other grid layouts.
I also learned some tricks about SVG because I needed to modify the hover and focus states of some SVG images. I learned that this can be done by optimizing the SVG first, then adding the SVG code as inline SVG on the HTML. However, this can be messy in code, so there are certain tricks to help. For example, we can add SVG code using PHP. There is also the object tag. I still did not want to use those methods, so I simply used icons from FontAwesome. Time: 4.15 hours.
June 10, 2022 - Day 4
Before starting this day, I realized that there were still many things to do for the UI, like reply forms. I finished them, but l still needed to finish the update comment form layout. I thought the UI would be easy, but there were just too many layouts. Was I not able to code much? Time: 5.33 hours.
June 11, 2022 - Day 5
I could finally claim that the UI was finished on this day.
I had some HTML restructuring on the UI, particularly on the edit comment form. The edit comment form pretty much looks like the comment with the paragraph replaced with a textarea element. Initially, I used a form tag, but then I realized that it will be smoother to simply replace the paragraph with a textarea element in the same box. Just change the class to add a different style. It turned out much cleaner! Time: 3.67 hours.
Daily log: Script and other refinements
June 13, 2022 - Day 6
My goal was to understand the methods of fetching data. If I work in a web-based environment (thanks to the Live Server extension), I can easily use the fetch() method. However, I was not sure if I could use localStorage with that. If I work in a local file environment, it will be difficult to do the file handling, but I was sure I could use localStorage for that.
I learned that localStorage works just fine with Live Server.
I learned some quirks in localStorage. Seems like it works best on Firefox. On Chrome and Edge, when accessing the app through the local file directory, the keys stored in the localStorage are accessed on the same address file://. This means that if two applications access data with the same key, one app may access the wrong data.
On Firefox, the keys are accessed on different addresses file://C:/address1 and file://C:/address2. This means that even if two apps use the same keys, they will be able to access their respective data correctly.
Another goal was to organize the data properly after being fetched to appear on the screen.
On this day, I was also able to create a sample function that creates a new comment. It still needed refinement. Time: 6.28 hours.
June 14, 2022 - Day 7
The script was able to properly fetch data. Time: 3.03 hours.
June 15, 2022 - Day 8
The script could already read the comments and show them on screen. Up next, I needed to fix the HTML structure of the comment content, form, and replies, so that the algorithm for reading posts, comments, and replies is consistent. I tried to visualize it on paper. Time: 3.08 hours.
June 16, 2022 - Day 9
I figured out that I needed to restructure the data. It was just difficult to locate the ancestors of a nested reply through the current data format. The current format was something like this:
comments:
[
{content: __, id: 1},
{content: __, id: 2},
{content: __, id: 3,
replies:
[
{content: __, id: 4},
{content: __, id: 5,
replies:
[
{content: __, id: 7},
{content: __, id: 8},
{content: __, id: 9}
]
},
{content: __, id: 6}
]
}
]
For example, I need to write a reply to id: 9. To write the content of my reply on the HTML, I can simply append a reply to the reply section of the element corresponding to id: 9. However, updating it on the data structure requires that I know all its ancestors, which are id: 9, id:5, and id:3. I can either save all ancestor ids as a property of a comment, but this can be redundant for comments with the same ancestry — a waste of space.
I could also try tracing the ancestry through the HTML, but I didn't find this optimal.
What I simply did was put all posts, comments, and replies linearly (no nesting) on a single object. Then I simply specified a property called parentId which specifies their immediate ancestor. Through this, I have an easy way to trace back the ancestor of an ancestor when needed. Updating the data structure is also easy.
On this day, reading and creating new posts were already done! I was also able to create an update comment function, but it was still kind of messy. Time: 8.22 hours.
June 17, 2022 - Day 10
The restructuring of the data gave some difficulties for the deleting function. Basically, when I am deleting a comment, the whole thread should also be deleted. The original structure could easily delete a thread because of nested arrays.
My solution for the new structure was to add a childrenIds property to each comment so that I have an easy way of finding children comments under a thread. I simply used a recursive approach in deleting threads under threads.
On this day, scoring was also working. Pretty much done. I just needed to add a mechanism to change users. I was thinking to add an admin user who can upvote or downvote a comment infinitely. I was also thinking that all non-admin users can only vote once. However, this needs more changes to the data structure and algorithm. Time: 4.55 hours.
June 19, 2022 - Day 11
Changing users was also done. I did not add some of those extra features. I just want to submit this project to FrontendMentor, then work on my customizations afterward. Time: 1.32 hours.
June 20, 2022 - Day 12
I stumbled upon CSS again. Hover works badly on mobile. A click on an element leaves it stuck in hover state. I researched and experimented, and I was able to create a touch ripple effect for the button. I scrapped it, though, because it seemed too much.
I used :active for mobile and :hover for desktop. The :active pseudo-class seems to have more delay on mobile indicating a button "click" effect. I need to check for better alternatives for accessibility on mobile.
I can consider this project done by this day. I will submit this to FrontendMentor. Time: 2 hours.
Summary
Total time on the project: 52.18 hours.
Overall, I think I’ve improved my layout skills. I can create layouts faster and more effectively. Some of my learnings in layout:
- Using :active is better for mobile, compared to :hover.
- Chrome can have an unpleasant blue highlight for certain elements when tapped. It can be turned off using -webkit-tap-highlight-color.
- There are nice methods to manipulate SVG using CSS.
Extra question: I just checked the responsiveness before uploading this documentation. I saw that I need to think about width devices less than 320px, like the Galaxy Fold. How can I use wrapping in flex and grid to make the layout conform to that super small width?
I enjoyed programming. Here are some of my learnings:
- There are proper ways to delete an object’s contents and the object itself.
- Local storage is not the best way to go. For applications that need serious pulling of data, it is good to learn backend programming.
- Try to avoid using innerHTML. Programmatically creating, removing, and appending elements to the document is the better way even if it can be long to write or less pleasant compared to just writing innerHTML.