[Reflective Coding Journal] The DRY Principle: A Lazy Programmer's Best Friend

As I continue my journey in programming, I've often realized the immense value of coding smarter, not harder. My recent experiences have brought me to deeply appreciate the DRY principle — “Don’t Repeat Yourself” — an attitude for any software developer who values their productivity.

During my projects, I've found myself creating multiple HTML cards with identical layouts but different content. It's the kind of task that, at first glance, seems to be straightforward and requires copy-pasting. However, the redundancy codes cause complex issues, which not only test my patience but also undermine the code's performance and maintainability.

Let's say you need to update repeated cards. With a small number like three or five, manual updates are boring but manageable. However, when you scale that number to 10, 20 or more, and suddenly, it's very clear that it's not efficient. The DRY principle serves as a crucial strategy in this context, which focuses on coding smartly - do something once, and only once.

 

Application in Practice:

To embody the DRY principle, I’ve adopted a dynamic approach to generating repeated HTML elements. JavaScript has become my tool of choice for this task. Here’s how I typically proceed:

 

1. Initial Layout and Styling

I design a single layout template with placeholder text and apply styling using CSS and HTML. Also, it might be better to wrap the model in a container to prepare the dynamic insertion of content through JavaScript.

<!-- HTML template with placeholder content -->
<div id="card-container">
  <div class="card">
    <h2 class="card-title">Title here</h2>
    <p class="card-content">Content here</p>
  </div>
</div>

<style>
  .card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 10px;
  }
</style>

 

2. Dynamic Data Looping

Next, I iterate through a data source, which could be a JSON file or sometimes an array or object directly within a JavaScript file. Then, I take the earlier designed layout template and paste it into my JavaScript as a single string, and I replace placeholders with actual values from the looped data.

For an array of objects:

const cardsData = [
  { title: 'Card 1', content: 'Content for card 1.' },
  { title: 'Card 2', content: 'Content for card 2.' },
  // More cards...
];

For JSON data:

// Assume this JSON data is fetched from an API or file
const cardsJson = `[
  {"title": "Card 1", "content": "Content for card 1."},
  {"title": "Card 2", "content": "Content for card 2."}
  // More cards...
]`;

// Parsing the JSON data into JavaScript objects
const cardsData = JSON.parse(cardsJson);

 
To generate HTML from the data, cardsData:

let cardsHTML = '';
for (let card of cardsData) {
  cardsHTML += `<div class="card"><h2 class="card-title">${card.title}</h2><p class="card-content">${card.content}</p></div>`;
}

 

3. Content Injection

During the loop, HTML for each card is created by replacing placeholders with real data. Once it finishes, the string HTML for all the cards is added to the container's innerHTML, or you can use insertAdjacentHTML to insert it just before an element. This step takes away the need to manually make each card. Therefore, any changes to the layout or content now require a singular update, regardless of the amount of data.

document.getElementById('card-container').innerHTML = cardsHTML;

 

Reflections and Learnings

This experience with the DRY principle has been a lesson in efficiency. Using vanilla JavaScript for HTML content generation was a good start, but it's clear that it's a basic approach. For dynamic updates, directly editing HTML in JavaScript is less than ideal. This has led me to explore frameworks like React, which offer a more advanced, maintainable way of coding. This progression mirrors my personal transition from coding as a casual hobby to preparing for the collaborative, professional arenas. I'm now committed to writing clear, maintainable code that's accessible to future collaborators. This evolution reflects a broader shift in mindset, underlining the importance of adaptability and foresight in my development practices.