Go to http://dev.kobayashicoding.net/, drop down the “Projects” menu, and choose “Week 9 (2018-08-01)” to see the result of this week’s tinkering.
Changing the “Home” button to reload the main page sent me searching for a simple, clean, and efficient way to effect this that would work both when opening the site’s files on my local PC and when viewing the live site on the public Internet. Because button elements don’t have an href attribute, I went looking for how to accomplish this. My search quickly turned up the way to do this (setting the onclick event to assign ‘../index.html’ to window.location, which is part of the Browser Object Model (BOM)). This also got me thinking about the BOM, which I hadn’t really paid too much attention to before. So I decided to delve into it a bit. Which I did. Briefly. Because that’s all it took, really.
The next thing to do was to set sizes for the two panels. Because I’m using Bootstrap, and the panels are created using the div tag with a class of “panel,” I went to the Bootstrap site’s documentation to get the details of how to size and modify them. Alas, the version of Bootstrap I’d used was v3.7.3, and the “panel” class had been removed in the new version of Bootstrap (currently v4.1.3). So… part of this week’s project was to update the site from Bootstrap v3.7.3 to v4.1.3. In was… interesting… and informative.
The first task of the migration was to read the Migrating to v4 summary on the Bootstrap site. This was quite helpful in pointing out things that would break the site and would have to be changed. The main changes for me were going to entail replacing the “panel” references with references to the new “card” component.
As an aside, in upgrading from Bootstrap v3.7.3 to v4.1.3, I also had to decide how I wanted to implement Bootstrap. There are basically two ways to use the various, required files, either (1) download them and put them in a sub-directory of the site being developed or deployed, or (2) link to the files on the Bootstrap CDN. Previously, I had downloaded the files and stored them on the server with my project’s code. This time, I decided to use the link approach. The advantage of downloading the code and including it on the server is that if any changes are made to the framework, they won’t affect the site, so nothing breaks unexpectedly. And, that’s also the disadvantage – if errors are corrected or new features added, they won’t affect the site or be useful until the version on the site is replaced with the newest code. I figure it’s better to get bug fixes and take a chance on something breaking unexpectedly.
It turned out that the only major change I needed to make to accommodate the changes in Bootstrap was switching from “Panels” to “Cards.” The “Panel” component has been removed from Bootstrap and replaced by the “Card” component. Actually, the Card component is the new flexible content container that replaces Panels, Wells, and Thumbnails. It took only a few minutes to do a global search-and-replace, followed by a few more minutes of cleaning up to replace the Panels with Cards.
There were a few minor changes that I had to accommodate as well. The previously used “hidden” class has been replaced with the HTML 5 “hidden” attribute for elements that need to be displayed only at certain times. I also had to adjust some of the padding around the navbar as well as the margins around navbar-btn buttons and navbar-text text strings.
So, this week’s page looks fine, but doesn’t do anything. Maybe that will be next week’s project. Maybe.