Formatting Jekyll HTML output, third party JavaScript and the async attribute

Three things I learned this week were: styling HTML output with Jekyll, checking third party APIs and the async attribute.

Formatting HTML

Jekyll Tip: Adding Styling To Html Output. This blog post showed me how to include CSS when using Jekyll and Markdown. I use Bootstrap with my blog and wanted a way to include the .table and .table-striped Bootstrap CSS classes. My first approach was to use the JQuery addClass method. This method worked and I was happy with it. But, then I found that post which was even easier!

To add a class use the {:.ClassName} syntax.

Example:

{:.table .table-striped}
|Header 1|Header 2|
|--------|--------|
|data 1  |data 2  |
|data 3  |data 4  |

Remember to monitor third party JavaScript packages

While using the Chrome Developer Tools during the above investigation, I noticed I had a warning the MathJax CDN had shut down. My posts that used MathJax still rendered properly, as the MathJax CDN was redirecting to Cloudflare. I had not looked at my third party JavaScript providers in many months.

When I use my blog, I write posts and do not look at the underlying code. This was a good reminder to myself to look at the code periodically to see if any of it has been deprecated. I need to investigate if there is a way to automatically detect these types of issues.

The async attribute

Updating MathJax led me to another discovery this week. The documentation gave the following example of how to update the CDN:

<script type="text/JavaScript" async
  src="https://cdn.mathjax.org/mathjax/2.7-latest/MathJax.js?...">
</script>

The async attribute was new to me. I did a little investigation to learn more. The async attribute tells the browser to download the script and execute it while the page is parsed. If multiple scripts use the async attribute, then they are downloaded in parallel. The order the scripts are executed in is not guaranteed. So, if one script depends on another an error could occur if the dependent JavaScript is downloaded first.

After reading Deep dive into the murky waters of script loading and Async Attribute and Scripts At The Bottom I decided to not use the async attribute, as my JavaScript is at the bottom of the page. It seems safe to leave my JavaScript loading as is.

Final Thoughts

Updating my blog distracted me from Swift this past week. I look forward to learning more Swift this upcoming week!