This “week’s” project started with a desire to write some JavaScript. I added the sub-directory (or folder, in more common parlance) and copied the index.html and style.css files used for the site’s main page (found at http://dev.kobayashicoding.net) into it. I then removed the text variables used to populate the various panel components, and also removed the “About” and “Contact” buttons, and the “Projects” drop-down menu. I then made changes in the code to display two empty Bootstrap “panel” elements, even though I had not yet determined exactly what I was going to put in them. Finally, I wanted to change the remaining “Home” button so that it would open the base site’s main page again, as this week’s project replaces the main page instead of opening and new tab or window.
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.
After getting the site back to its previous functionality, it was time to think about what to actually do this week. Working with the BOM, as I mentioned above, combined with a desire to become more familiar with the Document Object Model (DOM), as well as recent interest in Progressive Web Apps (PWAs) got me thinking about using JavaScript to generate the HTML for the page. This was easily done using the DOM methods createElement(), setAttribute(), createTextNode(), and appendChild(). Using these to create the body of the main page allowed me to use nested loops to create the HTML for the rows and columns of Card components. That saved a lot of typing (or, let’s be real – cutting and pasting) and also allowed me to pass in variables to control how many rows and columns to create. Using the DOM methods to create the navigation bar for the page was a bit more tedious, but it helped solidify my mental picture of the Document model and how all of the HTML elements fit together.
So, this week’s page looks fine, but doesn’t do anything. Maybe that will be next week’s project. Maybe.