post[0]: wk4 project retro

console.log(“hello, friends!”) 👋

After a decade of customer-facing roles, I bid adieu to my headset in February to join General Assembly’s coding bootcamp.

The ride hasn’t always been smooth, but the setbacks and bugs have been some of my biggest learning moments. As I make small slow steps forward, I'm drawn to learning the "why" behind concepts, and improving my coding approach and knowledge. 💖

One of my favorite activities is the weekly meeting with my amazing wizard mentor, where we discuss those topics. 🧙 On project weeks, after completion, we do a retro together to identify areas of improvement.

In Week 4, students were tasked with translating a wireframe into a social media website framework using HTML, CSS, JavaScript (my project: Refer-all). During our retro session that Friday, I learned two key concepts: data handling and data integrity.

Data Handling

One project requirement was sorting the newly created posts by date. These newPost (and related comments, etc) are added to the postedContent div when the Post button is clicked.

To approach this, there are 3 key questions:

1. What data do we need to solve that problem?
In this case, we need the date that a post was created.

2. Does the data already exist?
Yes, the date is calculated on each post through:
const postDate = getCurrentDate();

3. Can I get this data? Is there a way I could get the data more easily?
Yes, it would be better if we could attach the date to each newPost in a way which makes it easier to retrieve later.

In the code below, date is being added as a dataset attribute to each newPost.

const postDate = getCurrentDate(); 
newPost.dataset.date = postDate;

For example, say a newPost is created today. The date dataset would appear as follows
<div id="newPost" data-date="2024-04-06">.

This way, when the sort function is called on the array of posts, the dates of each post can easily be compared by checking the value of their respective dataset date attribute.

Data Integrity

The sort and search functionality meant I needed my newPost data in array format. Initially, I declared an empty postArray variable that has newPost added into the array- each with its own array of comments, etc. The issue is this creates two sources of truth. You can see this illustrated in the screenshot below (credit to my mentor for diagramming that).

The additional screenshot below (taken from the console) shows with the DOM that as elements are appended with JavasScript, they exist as children under the postedContentLog. The data we need already exists there. postArray is just unnecessarily creating another source of truth.

Instead, by using the spread operator, a copy of the pre-existing array of children within postedContentLog is created. (This allows us to manipulate and modify that array without altering the original array- such as when we want to sort and search.)

const posts = [...postedContentLog.children]

With search, we can filter that posts array to return only newPost that match the search term. Then, that filtered array is iterated through, and the matching posts and their children are displayed in the postedContent div.