How to Use JavaScript to Reduce HTML Code: A Simple Example

Efficient Coding Practices: Leveraging JavaScript for Scalable Web Development

Writing clean, easily scalable code is crucial for any programmer. This is especially important in projects like blog websites where content constantly grows. Maintaining such projects should be quick and error-free, preventing reputational damage for your clients. JavaScript offers a powerful solution for improving code efficiency and debuggability. This article demonstrates how I used JavaScript to streamline social media link integration in a blog website project.

Many blogs include social media links for enhanced online visibility. A common approach is to display these links on every page, often in a footer or sidebar, as shown below:

Manually adding these links (14 lines of code in this instance) to each HTML page is inefficient and error-prone, as illustrated here:

While manageable in small projects, this copy-and-paste method creates bloated code, slowing page load times and hindering modification. Consider the scenario of a client changing their Instagram handle. Updating every HTML page manually is tedious and risky.

A superior solution involves JavaScript. I created a JavaScript function to dynamically add these links to a <div> element already present on all HTML pages (stored in the <code>socialsPanel variable). The function is shown below:

This approach centralizes link information, simplifying updates. Changes only need to be made in one location, eliminating the need for repetitive manual updates across numerous HTML files. Adding or removing links is equally streamlined.

This method not only saves time but also reduces HTML code. Instead of repeating 14 lines of code per page, we simply call the popSocialsPanel() function on each page, as highlighted below:

The efficiency gains are significant. Adding 9 lines of JavaScript code replaces 14 lines of HTML per page. In my project, this approach has already saved 56 lines of code, with an additional 13 lines saved per new blog post page.

This simple example highlights a key principle: develop an instinct for identifying repetitive code. Refactoring such code usually leads to more efficient and maintainable solutions.

Your feedback and suggestions are welcome. Please share this article if you found it helpful.

Originally published on Medium for JavaScript in Plain English on September 28, 2022