DEV Community: akio

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

akio — Sat, 04 Nov 2023 06:31:53 +0000

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.

From Games to Goals

akio — Wed, 06 Sep 2023 05:19:16 +0000

From a childhood hobby to studying in Canada, discover how I found my path in programming and my dreams for the future.

Introduction
About Me
Expectations
Reflection on the First Week
Vision for the Future

Introduction

This article talks about my personal journey, starting from my childhood, through my aspirations of becoming a software developer. Also, I will share my course expectations, reflection on the first week, and vision of my future.

About Me

Hello! My name is Akio. I was born in a rural part of Japan on January 8th, 2003. When I was young, I enjoyed building and creating things with cardboard, a hobby that still reflects my personality today.

The world of computers entered my life when I received an old Windows XP laptop from my grandfather at the age of nine. Since then, computers have become an essential tool in my daily life and have made me realize the countless possibilities.

As time went on, just before I entered junior high school back in 2015, I encountered something that changed my life completely, which was a well-known video game called ‘Minecraft’. The game allowed me to not only create and build anything by designing however I want, but also create unique multiplayer servers by creating plugins by myself using Java. This was my first practical experience with programming. Back then, I was not very proficient in English and even in programming, but I repeatedly tried and made errors while writing codes to produce what I wanted in the end. The experience showed me the joy of programming and introduced me to the career option of being a programmer.

During high school, I led a project to develop a mobile application that is useful for current students and junior high school students. Though we could not release it, I learned valuable lessons about teamwork, leadership, and time management.

Although I have now a clear career path, I did not have one when I was choosing which university to go to. Finally, I decided to go to Kanda University of International Studies where I could learn English because it was the only subject that I truly wanted to pursue, and I believed that it would be helpful to my programming career at the same time.

Until the summer of my sophomore year, I harbored some doubts about my direction, but participating in a one-week programming internship changed that. In this internship, we aimed to create a simple reservation app using Java as a team, which was actually my first proper experience working on a project as a team, since the project in high school, I was the only one in charge of coding. Also, I was concerned about turning my hobby of programming into a profession, but despite the short duration, I thoroughly enjoyed every moment of the internship. It allowed me to envision myself as a future programmer and gave me the confidence that I could succeed in this field. Therefore, this experience not only shattered those uncertainties but also solidified the career path that I currently pursue.

Now, I am here in Canada to study front-end development as my first step toward realizing my dream.

Expectations

The biggest reason why I decided to join CICCC, especially in the mobile and web development course, is to gain experience and confidence in working as a software developer. This is because, as of right now, I have no work experience as a programmer and am unsure whether I can keep up and stick with the job in the future as I am currently a university student who has no formal educational background in computer science or programming in school.

As job hunting approaches in Japan, I realize that it could be challenging for me to apply for that kind of job because of my background. Although I have heard some Japanese companies train new employees from scratch to become professional programmers, it means I will have fewer companies that I can apply to during my job hunt because not every company has the kind of educational program. To overcome this, I believe it is worth studying abroad to learn programming, even if it means taking a break from university, which is why I am here now.

Also, in actuality, I have always found it difficult and have often avoided studying HTML and CSS because they are totally different from what I have been used to in Java or any other similar programming languages. I believe that to become a professional programmer, it is essential to fully understand and be able to code in HTML and CSS. Therefore, I hope to acquire and master them throughout this course.

By the end of this course, I expect that what I once struggled with, HTML and CSS, will have become my strengths and built confidence in writing codes. Moreover, I hope to utilize the knowledge and experience that I will have gained by then to create a new portfolio website for my upcoming job hunting both in Canada and Japan.

Reflection on the First Week

The first week was like a review of what I learned in high school, and it was an excellent opportunity for me to reflect and relearn what I had forgotten. In particular, understanding unique numbering systems in computers and the conversions between binary to decimal was always a challenge and something I was not good at during high school. Therefore, it was incredibly valuable to learn them once again. I am indeed looking forward to the practical programming lessons that are about to start.

Vision for the Future

My ultimate goal is to become a project manager. The reason for this is that I enjoy leading and bringing people together, finding it fulfilling. My career will start as a programmer in areas like front-end development, and I aim to gradually climb the career ladder. After working as a programmer, I plan to move on to roles such as a software engineer, followed by a system engineer, progressively building my skills and experience, with the eventual aim of becoming a project manager.

Along the way, I understand that continuous learning is essential. As I progress in my career, I am going to take up certifications relevant to each phase of my career, attend workshops, and always stay updated with the latest in technology.

Thank you so much for taking the time to read my article till the end!