Week 10 Project, Part 1: More JavaScript…

No New News Here – I’m Behind!

I’m way behind on my “52 Weekly Websites.” Sigh. I hope to do better going into the new year (2019). I started this venture in October… of 2016! I’ve actually been working on this project – on and off – for a couple of months now. A non-trivial project mixed with a lot of learning apparently takes time.

An Actual Project This “Week”

So, last “week,” I was tinkering with creating content (and menus) using only JavaScript. I learned a lot and I’m happy with the results, so I thought I’d continue with JavaScript for the next project, which is an actual app that I want to be able to use to track business miles in my vehicle(s).

This week’s project will also use the localStorage (or Web Storage) or maybe the IndexedDB features of HTML5 (or maybe both – but I’ll probably start with localStorage). For this project, I want to be able to input data about trips, both local and long distance – date, time, mileage, vehicle, and a short description. I don’t want to have to use a back-end database on a website somewhere for the data storage, so I plan to store it locally in the browser, and then export it to a file that I can use to track business miles.

A Couple of Realizations (Finally)

Woo-hoo! The DOM is a collection of objects! Well, yeah, everyone except for me realized that already. After all, DOM stands for Document Object Model. I guess I just never quite put together that the elements in the DOM for an HTML page were also child elements, which in turn could have child elements. This became important when both sorting the divs for the trip records (but it didn’t dawn on me then) and when creating, harvesting, and destroying the divs for the data entry/edit form (finally, the reality began to seep into my consciousness).

Also, the CSS3 “important!” tag is sometimes, well, important. I spent more time that I should have trying to figure out why some of my styling wasn’t being applied to a specific element. I pored over the styles for the element using the browser’s developer tools, and making changes on the fly to get the result I wanted, but nothing worked. I finally broke down and just used the important! tag and, voila – success.

Details Begin Next Week

Well, that’s the plan. I sure hope I make it. This project will be split up over at least 3 weeks of posts, but not more than 5. Stand by…

Week 7 Project: CSS Grids

Well, after a lapse of 8 months, I finally have a new project up and running at Kobayashi Coding – an example of using CSS Grid layout. (Click on the “Projects” dropdown and choose “Week 7.”)

The result is similar to what Bootstrap and other grid frameworks provide, but without the additional Javascript and CSS files. The example on my project site is basically taken directly from the Mozilla Developer Network tutorial titled “Introduction to CSS Grid Layout” with very minor changes to the HTML and CSS. I found this particular tutorial through a Facebook post on the Firefox page – https://www.facebook.com/Firefox/videos/4910150590250/.

While this has increased my understanding of both CSS and grid layouts, I did have one problem that manifested itself in a couple of ways. You’ll notice that there are no spaces around the two links in the “Header” panel. This is so even though there are spaces around them in the HTML for the page. This same problem also prevented me from arranging the text in the “Header” panel in the way I really wanted – with the word “Header” centered on one line, and the rest of the text centered below the first on a second line. I could get the two lines by using the CSS property “display: block” in the definition for the “.header” class, but I could never get it centered. Also, using a <br /> between the word “Header” and the opening parenthesis before the word “Note” did not yield two separate lines. Finally, putting paragraph tags (<p></p>) around the two desired lines also did not render the correct result. Sigh.

Update 2017-12-05: After watching the YouTube video of Morten Rand-Hendriksen’s excellent talk, “CSS Grid Changes EVERYTHING”, I made a few changes and now the result is what I wanted. I removed the “display: flex;” from the CSS for the .item class, and also removed the “display: block:” from the CSS for the “a” tags. Finally, I added a “margin: 5px;” to the CSS for the “a” tags, which put the desired spaces around them.

Finally, the page works fine in both Firefox and Chrome, but does not seem to work in any version of Internet Explorer or Edge. Hmmm…

Week 6 Project: Update a page with a “push” from the server – Part 1, WordPress

This week’s project will be broken down into multiple parts – it seems too big to do all in one week. The end goal is to have a process that runs on the server and outputs updates to a <div> on a web page in real time without user intervention, and without reloading the browser page. I also would like to avoid using AJAX so that there is minimal impact on the user’s performance. Finally, I hope to be able to do this in such a way that the user could close the page/browser, log off the site, and then come back at some later time, log in, visit the appropriate page, and continue getting real-time updates if the process is still going, or get a final status if the process has finished.

The primary motivation for this project is because I want to be able to write code to load a text file (probably a .CSV file) into a database, get the process status (however that is defined), and not be required to leave the browser page open for the entire time the process takes (in case it takes a really long time (thinking in terms of many hours or maybe even in terms of days)). This is necessarily a simplified version of the requirements, and I’ll fill in more details in each of the upcoming blog posts that deal with this project.

This project will need a database, an authentication and authorization mechanism, and a way to easily create pages with forms to control the upload of the text file and the parameters of the database loading process. A basic WordPress site will provide all three and is easy to set up. So, I’ve set up a WordPress play site and configured it with the theme I like to customize (Colinear by Automattic), the child theme I use to do the customization (Colinear-KC by Kobayashi Computing), and a couple of plug-ins that I use on most sites.

You can see the results of this week’s work by going to the project site, clicking the “Projects” drop-down and choosing “Week 6 (2017-02-22)” or you can go directly to the WordPress play site.