Breaking down Problems by Prepending a DOM Element with jQuery

This article was originally posted on Feb 27th 2018 at: https://nickjanetakis.com/blog/breaking-down-problems-by-prepending-a-dom-element-with-jquery

In the past, I’ve written about how breaking down problems is the number 1 skill you can have as a software developer. I discovered that early on in my programming adventures. It’s something I believed in 20 years ago and it’s something I still believe in today.

While putting together a free bonus app for my Build a SAAS App with Flask course I had to implement a feature where I wanted to show the 5 latest fake facts posted by community members in a sidebar.

Seeing What the Feature Does in a Demo Video

If you're curious, here's a few minute demo of what the application does. We're going to go over building this API driven app in the course but the feature I'm talking about in this article is at about 2:06 in the video below:

This isn't a terribly difficult feature to implement, especially with jQuery, but I want to go over my thought process on how I came to the code I ended up using because as I was implementing it, I smirked to myself while thinking "yep, this is a text book example of breaking down problems" and here we are.

Identifying and Breaking down the Problem

In order to break down the problem, we first need to identify it clearly.

Typically, problems are just features in disguise. My thought process was:

I'd like to list out the 5 latest community fake facts. They should get updated as new fake facts are pushed through a websocket channel, so the list needs to get updated on the client side as new facts get broadcast.

The above 3 things can be further broken down:

1. We're going to have to use Javascript

Since I'm already using jQuery in this project, it makes sense to use jQuery to help solve this problem because it has really good tools for working with DOM elements.

2. We're going to have to add new elements to the DOM

jQuery, has an .append() method that lets you append elements to whatever element you have set as a selector. Even more specifically, it has a prepend() method which does the same thing, but it puts the new element as the first element instead of the last element.

That's perfect. All we have to do is prepend the incoming fact to some container selector.

3. It should be something that happens when a websocket event is triggered

This part isn't too important for the sake of this article. In your case, maybe the trigger is submitting a form instead of a websocket event. I just wanted to include that step for completeness, because figuring out what causes the item to be added is important.

Creating an algorithm for prepending the item to the list:

For anything that's not stupidly simple I tend to write out pseudo code, or list out the steps using a combination of plain English and general programming terms. It wouldn't be "real" code, but it greatly helps you think through a problem and saves time in the long run.

Here's what that could look like in this example:

1. Define a max length parameter (5)
2. Get the max length of the latest facts container
3. Prepend the new fact to the facts container
4. If #2's length > #1's length, remove the last element in the facts container

Converting the algorithm into real code:

Now that we have everything in place, writing the code is really straight forward. I'm going to simplify things by not using a template engine or dealing with websocket events, but here's what the important bits of the code looks like:

var $factsContainer = $('#facts-container');
var maxFactsContainerLength = 5;
var factsContainerLength = $factsContainer.children().length;

$factsContainer.prepend('<p>This would be the fake fact message.</p>');

if (factsContainerLength > maxFactsContainerLength) {
  $factsContainer.children().last().remove();
}

Look how close the real code is to the algorithm / pseudo code. Pretty neat.