Tinkering Under the Hood

This past summer, while Kitt Peak National Observatory was shut down for the COVID-19 pandemic, I took some online courses in web design. Web design is something I’ve learned largely on the job without any formal education, so even though I had been designing and editing web sites for several years, I decided to start with some fairly basic classes to improve my formal understanding of the process. One of the subjects covered was “hypertext transfer protocol.” This is basically the protocol computers use to speak to each other over the web. You’re probably most familiar with this from the “http” in front of web addresses in the address bar at the top of your browser. You’ve probably noticed that some of these addresses start with “https” instead of “http.” The “s” stands for “secure” and when it’s in the address, you should also see a lock icon in the bar.

Without getting into too many technical details, the way you secure the communication between your browser and the computer where a website lives is that the website’s computer has to have a piece of code called a secure socket layer certificate or a transfer layer security certificate. Without the certificate, the data transferred between the computers is just the code typed by the programmer, which can be viewed by a lurking third party. When the certificate is enabled, that communication stream is encrypted and can’t just be read by the third party. This is especially important when you’re using a form to send personal information across the web, and particularly when you’re sending something like a credit card number. When I started working on websites, secure certificates weren’t used and I haven’t tended to worry about them. On the Hadrosaur Productions websites, when I offered something for sale, I used a shopping cart from Paypal, which had all the necessary security in place. However, because of my recent classes, I learned that I could make a more secure web browsing experience for my customers.

Hadrosaur.com after modifications

This past week, the hosting for hadrosaur.com and talesofthetalisman.com both came up for renewal, which prompted me to check on the state of the security certificates offered by our web host. I discovered the hosting service does, indeed provide them. So, I’ve been tinkering with links throughout the sites I manage, including this blog, my personal website, and those two websites to make sure links were summoned using the https protocol. As you can see in the image above, hadrosaur.com now displays the lock icon in the address bar.

We have some exciting products coming to hadrosaur.com later this year, including the new edition of my novel Children of the Old Stars, a new edition of Hybrid by Greg Ballan, and the comic Guinevere and the Stranger adapted from my Scarlet Order Vampire series. Although Tales of the Talisman Magazine remains on hiatus, many back issues are still available at talesofthetalisman.com and they all have great stories. The changes to the sites are mostly invisible to the casual browser, and while shopping there has always been secure through the Paypal shopping cart structure, my goal has been to add another layer of security and trust to your shopping experience through our sites.

Updating the Hadrosaur Bookstore

While Kitt Peak National Observatory is shutdown for the COVID-19 pandemic, one of my jobs has been to review, edit, and update documentation on the observatory’s websites. I can’t really show off much of what I’ve been working on there since those are internal sites behind firewalls, and, unless you’re versed in astronomical observation, these documents probably wouldn’t hold much general interest. Part of the reason I edit these documents is that the observatory values my skills as a writer and an editor, which I really appreciate. Also, I’ve been coding HTML since the “Wild West” days of the World Wide Web in the early 1990s.

A benefit the company added in response to the pandemic was to make LinkedIn Learning available to employees. I first became interested in LinkedIn Learning, when Australian writer and artist Greg Long reviewed some of the courses he’s taken, so I knew there were courses there that could help me improve my skills. Because of how early I came to coding websites, there were no classes. I learned by trial and error and browsing through the w3 standards. If I remember right, when I started, all of the standards could be printed out on three or four sheets of paper! The web has evolved a lot since those days. HTML has been improved and things like cascading style sheets and Javascript were introduced. So, I knew I could do with some formal training. So I decided to enroll in a “learning path” for becoming a web developer. In LinkedIn Learning, learning paths are a bundle of courses that cover a broad topic. I’ve completed two of the courses and am about three-quarters of the way through a third.

This training doesn’t just benefit Kitt Peak National Observatory. It is helping me build a better writer’s website and a better website for my company Hadrosaur Productions. This is work I can show you and talk about.

Take One of the Hadrosaur Bookstore

A couple of years ago, my older daughter helped to redesign the Hadrosaur Productions website. She made it through several pages and they look really nice, but then she was hired away to a full-time software engineering job. One of the pages she left for me was the main bookstore page. My objective for this page was to show off our books so people could discover what we had. They could then click the covers to get more details. In the screenshot above, you can see the page as I originally coded it. It’s a rigid table structure, which looks nice on a modest home computer screen. The problem is that the grid becomes small on phones. If you are using a bigger screen, there would be a lot of wasted white space.

This particular layout does not need to be organized as a table. All it needs is to display the covers, and better yet the covers with some additional information, in a neat and orderly fashion. Fortunately, there are some tools to do that in CSS. These tools also give me “under the hood” functionality that make it much easier to add new titles as they’re released, or remove titles as they’re sold out. What’s more, the new layout will adapt so that if you display it on a phone, you’ll just see a column of book covers and titles. If you display it on a wide screen, the rows will expand to fill the browser’s viewport.

You can take a look at the updated design here: http://hadrosaur.com/bookstore.php

I’d love to hear what you think of the updated design. As I say, it’s a work in progress. In the long run, I hope to make this more searchable and sortable. While you’re visiting the page, if a book grabs your eye, feel free to click on it to learn more. The “Add to Cart” and “View cart” buttons are all hosted at PayPal, so all purchases are secure. We don’t get any of your information other than your shipping address.