Reuse template-section

[hanson-hschang]

Currently, all section pages, including about, resume, portfolio, blogs, notes, and contact, are first copy paste from template-section and modified through include-html.js. There should be a better way to reuse the template-section.

Similar ideas shown in each category of blogs, like science. It uses blog-post-loader.js to include necessary contents

[hanson-hschang]

• Reference blog post: Dynamically load JavaScript files in order

We can dynamically load JavaScript file using following code snippet:

function loadScript(src) {
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}

Scripts that are dynamically created and added to the document are async by default, which means they are not guaranteed to execute in the same order they are added.

---

• Reference blog post: What order do files load in the browser?

JavaScript files can also be loaded with async and defer attributes.

<script async src="script.js"></script>
<script defer src="script.js"></script>

The defer attribute tells the browser to download the file, but wait until all of the other stuff is done before running the file. The async attribute tells the browser to download this file, but don’t stop downloading others while you do. The two can be used together.

So, the short answer is files are loaded in the order they appear in the HTML file.
The longer answer is … but it depends!

---

• Reference website: JS: Load Order, defer, async, module

[hanson-hschang]

• responsive grid layout
• python + javascript