Recently, when starting out on new projects I’ve been working to ensure that the code I write is more generic so that it is reusable throughout both the initial build of the project as well as in the future.
Previously I’ve created a generic show/hide function for features such as drop-down menus. This time I wanted to tackle replacement content, such as that you might see in a tabbed section.
When rebuilding the homepage for a long-term client one of our goals was to improve the loading speed of the website, and reduce the overall page weight.
The page included third-party widgets used to display Instagram and Youtube playlists that could not be replaced or edited to make them less impactful to the speed of the website. Removing them also wasn’t an option.
But we could look at delaying their inclusion on the page thus reducing their impact on a number of speed metrics.
To do this we would place the widgets within a tabbed section. Traditionally this may mean that the widgets are still present in the code and so some, if not all, assets would be loaded even though they’re not in view. To ensure this isn’t the case we would instead utilise AJAX loading to request the content only on user selection; ensuring the page is lightweight on initial load as the widget would not be anywhere in the code.
Here is our example code. When the relevant tab is clicked the jQuery makes the request tot he server and new content replaces the existing tabbed content.
As you’ll see we target the data-replace attribute which can be placed on an individual
<a> element or on a parent container as shown in the example.
This worked great, but in our specific case there was an issue. With tabbed content it’s common for new users to click around the tabs to view the content present, before returning to what they might actually wish to view.
While any request back to the server could appear slow to some users, this was especially obvious with the widgets where, after being added to the page, would subsequently request a number of assets from a third party. This results in a much more obvious delay when clicking around the various tabs.
What we needed was a solution where new content would be appended to the page, and for this to be made visible on subsequent views rather than reloading the content each time.
Note: You may need to open dev tools to confirm that the newly added content remains in the code, rather than replaced as occurs on the example furth up this article
Though this potentially makes the function somewhat less generic it’s only by finding other cases where we might want to use such a function that we can determine what is specific to the implementation we’ve tested and what changes are necessary to make things more versatile.
It can be easy at the start of a project to code up something quick for a particular purpose. But as the project grows it’s likely that you’ll find yourself writing similar code that already exists. You could revisit the original code but there’s always the concern you may cause something to break that you hadn’t accounted for.
Instead starting from a more generic mindset at the start of project helps ensure that the code you’re writing is more versatile, not just on this project but potentially future projects too.
Like what you’ve read, then why not tell others about it... they might enjoy it too
If you think Bronco has the skills to take your business forward then what are you waiting for?Get in Touch Today!