My first post for this Celestial Toys blog was written in early November, 2013: Welcome to My Blog. At that time, I was happy to be able to embed MathJax and AngularJS v1.2, and was using Jekyll as my blog engine (the tool that turns a set of Markdown and HTML into an interlinked set of blog posts and pages).

I subsequently migrated my mostly-Markdown content to use Hugo: Jekyll to Hugo, a Lost Weekend?, which helps illustrate the power and longevity of using Markdown for content.

This weekend (March 10-11, 2018), I updated many of the dependent libraries that were needed for my AngularJS and ReactJS programming examples, as well as updating as many other supporting libraries (e.g., MathJax) as possible. I’m trying to simplify the non-content part of the blog in preparation for adopting Smartdown as a blogging tech.

Updating Hugo and Theme

I updated to Hugo v0.37 on my MacBook and it’s working great. I also obtained an updated version of the Herring Cove theme that I based my original blog on, and re-incorporated my customizations into the newer version of the theme. This allowed me to throw away a lot of stuff that I no longer used.

Conditional Inclusion of Resources

Previously, my partials/header.html file included various resources (Angular, React, Bootstrap, MathJax), whether or not these were needed for a particular post. I’ve improved this behavior by using per-post Hugo front-matter variables like useangularjs and usereactjs so that the relevant resources are only loaded when they are needed. Current options include:

• useangularjs
• useangularfire
• usereactjs
• usemathjax
• usehighlightjs
• usemlm (My Little Machines directives)
• usesmartdown

Updating AngularJS

My original AngularJS examples used v1.2, where a named function could serve as a Controller, even without explicitly associating it with the app.module via a .controller() call. But in v1.6.9 (the latest AngularJS at the time of this writing), explicit registration is required, so I needed to augument my controller functions with registration. For example:

function MyController($scope, $compile, $element) {
	...
}
angular
  .module('BlogApp')
  .controller('MyController', MyController);

Another change regarded $http.jsonp(), which now returns a value that uses .then() instead of .success() to attach handlers to promise outcomes:

      $http.jsonp('https://ipinfo.io/').then(
        function(response) {
        	...
        }
      );

Related to the $http.jsonp issue was using $sceDelegateProvider to whitelist any URLs I perform $http operations on:

  BlogApp.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow JSONP calls that match this pattern
       'https://ipinfo.io/'
    ]);
  });

Updating ReactJS

When I originally taught myself ReactJS and wrote some posts about it, I was using ReactJS v0.12.2, which was about when ReactJS was beginning to become popular. I recently upgraded my ReactJS examples to v16.2.0. In order to get my old code working with minimal changes, I needed to make the following changes.

• Replace my use of React.createClass with createReactClass, which is provided by an optional module create-react-class.
• I needed to replace the use of React.DOM.div with ReactDOM.div, as provided by the optional module react-dom-factories.
• For some reason I don’t recall, I needed to add the optional classnames module.
• Because the use of JSXTransformer.js has been unsupported since ReactJS v14.0, I ended up using the last working version of JSXTransformer.js from the ReactJS v0.13.3 release. The new way that in-browser JSX compilation is supposed to happen is via an in-browser Babel transformation, rather than the use of JSXTransformer.js, but I didn’t want to distort my original React examples to accommodate this.

Updating Bootstrap

I made the possibly unwise choice to upgrade my Bootstrap version from 3.3.7 to 4.0. I knew what was coming, because I had studied Migrating to v4, but the reality was more tedious and frustrating because I was using the default bundled version of Bootstrap, rather than creating my own custom CSS from the source SCSS files as described in Theming Bootstrap The main challenges here were:

• The CSS classes well and panel have been replaced by card. This was pretty easy to deal with, although I couldn’t rely upon using class="card bg-light p-1" as a replacement, because bg-light is only created in a custom Bootstrap build by setting the $enable-gradients SCSS variable.
• The default font size increased, along with the sizes for various h1 - h6 classes, so suddenly all headers were larger than expected.
• The bootstrap theme is no longer available, so gradients for buttons disappeared. Of course, if I was using a custom build, I could set the $enable-gradients variable and use the gradient classes.
• The bootstrap responsive grid classes are no longer available by default, so that instead of col-xs-8 you must use col-8. A custom build would let me set $enable-grid-classes, which would generate the legacy responsive grid classes.

Adding Comments

I initially added Disqus, because the Hugo documentation and templates made it quite easy. I got it working pretty quickly and fairly quickly grew to dislike the product and its company; I’ll write a separate post about Disqus’ problems, but the lack of Markdown support is primary, and the network and code bloat is secondary. I’ve since removed Disqus.

I am in the process of adopting Commento, which I’ve incorporated into this blog. Commento is nicer, for my purposes, as it lets me own the comments associated with my blog, and has no advertising or other bloat. It’s still an evolving piece of open source software, but because it is open source and uses in-browser Markdown rendering via Showdown, I expect it will be easy to adapt so that it supports Smartdown.