Work Done So Far (on refactoring historyofcuba.com)

As of tonight, I’ve refactored about 75 pages, including most or all the timetable pages that you can click on from the Home Page (historyofcuba.com/cuba.htm), most of the timetables and various others. (Remember, this is not a full-time job with a team of dedicated professionals and free Starbucks coffee… it’s a one-person-operation taking place after hours and on weekends.)

  The tables.css stylesheet was completely redone, and the tags for most of the pages were updated in less than a week. The effort has made a difference in how things work today.

All these pages are now ready for the Super Bowl/Academy Awards season. Whether you’re using a cell phone or pad or the big screen on the Starship Enterprise, you should be able to scroll the timetables, regardless of screen availability. 

[Disclaimer: there may still be a thing to do, or two, on some of the pages.]

Changes made include:

·        Reorganizing the Head section

o   Adding mobile tags

o   Rewriting page titles (when necessary)

o   Removing old META tags that are no longer useful

·        Changing tags to lower-case

·        Removing old/deprecated tags

·        Eliminating most ids – they just weren’t necessary

·        In some cases, copying the page content to a whole new page

·        Adding new fonts (not all pages have them yet)

·        Discarding old JavaScripts – Remember this?

o   ONMOUSEOVER="window.status = 'An alphabetized list'; return true;"

·        In some cases, removing StatCounter JavaScript code from 2002

·        Adjusting shadows and border colors

o   The older borders and shadows seemed heavy and exaggerated.

·        Adding flexbox to the Home Page Elements section

·        Adding HTML5 headers and footers – Sure, the site used divs styled as headers and footers, but they’re just not the same thing.

Because the initial site was built over a ten-year period with some pages still brandishing HTML 3.0 tags, it is difficult to determine how long it will take to complete all the pages waiting in line for an overhaul.

The timetables are among the earliest pages I ever made (they’ve grown over time, like children). Those were the days of DS9 and AOL and square TVs and Billary Clinton. It never occurred to me back then that in 2020 I’d be refactoring the same pages while worrying about the end of Democracy.

On a practical level, refactoring the timetables was easier than the menu pages or the article pages (of which there are still many left to do). That’s because the timetables were refactored once already, sometime around the first Obama Administration. At this time all HTML tables were removed, along with loads of font-tags and other remnants of a brief affair with Microsoft Front Page. These were replaced by teamwork from HTML/CSS.

Maybe it’s the new fonts that make it feel like a whole new web site. But there’s still much more to do… the thought of a “hero” background image occurred to me recently, and I’ll have to give this some thought.

Would you like to see a menu?

Most of us can appreciate an attractive menu. They give us the opportunity to make choices and give us a unique way to express ourselves, sometimes serving us happy surprises along the way.  Pages that offer lots of links and few paragraphs of information are vital to historyofcuba.com. I call these Menu Pages.

The Menu page for the José Martí section (http://historyofcuba.com/history/havana/Marti.htm), for example, features many articles by and about the “Maestro” as well as related offerings. This may be a user’s first stop on the road to learning about Martí, and it may be the page bookmarked for further exploration.

At least 21 pages (so far) on the site use menu2.css, the stylesheet designated for these pages. They all basically do the same thing, with slight variations due to their specific content.  Their topics include: Struggle for Independence; Antonio Maceo; early history, Cuban sugar; Bay of Pigs; etc. These are not just menu pages, but important topics in a long and complex history.

Most of these pages were made at different times and with different tools, but now that they’ve been “refactored” to use menu2.css, this will be the first time they all march to the same drummer.

-

Initially I thought of this work as an “overhaul or redesign” but I like the word “refactoring” much better. It sounds like something Scotty would do in Engineering to give Captain Kirk more speed;

“I need warp speed NOW, Scotty!”

“Yes, Keptin, but it’ll take time… I’ll need to refactor the CSS, upgrade the pages to HTML5 and remove tons of analog JavaScript from the mid-1960s… this is delicate work, Keptin. One syntax error and the engines could blow!”

“Make it quick, Scotty, or we’re all dead!”

There’s no way that I can work as fast as Scotty. He had Roddenberry on his side.

But don’t be fooled… lots of what falls under “refactoring” is grunt work that Scotty would have assigned to a first-year cadet;

·        removing hotspots & re-writing links

·        Grouping font styles to eliminate clutter

·        “zeroing out” margins and removing margin measurements from html tags

·        removing old JavaScript

·        change all-caps HTML tags to lower-case

·        replacing or removing deprecated HTML (hspace, vspace, i, b, etc)

·        removing “target=_n” from hyperlinks  

·        sweeping dust under the rug

·        …and making sure pizza is ordered by 6 so it will arrive by 7

But that’s not all. Once the cadet is done, there’s still more to do. Here’s the next challenge;

·        exchanging ids for classes

·        Updating CSS order and reviewing the cascade

·        Removing ids and classes no longer in use…

·        Correcting/updating remaining classes to fit within the boundaries of a new decade

·        Thinking about what this page might be asked to do in the next few years

·        Normalizing “footers” across the pages; all of which have been wearing different shoes until recently

·        Removing outdated/unwanted/broken links

·        Adjusting/updating design elements for different screens: borders, corners, shadows, shading…

And just when you think you’re done with the page you notice something else that must be... refactored.

menu2.css

With the menu2.css style sheet, the first step was to reorganize it into a “mobile-first” model, which meant making some serious order changes, taking a sober look at all measurements provided and “drumming” up some new screen breaks. Once these changes were made, each of the connected pages was tested and adjusted. This is where the major HTML updates took place.

This may not have been the best approach… but I learned my lesson. I did rethink the complexity of the stylesheet and simplified it as much as possible. You would not believe how much crap I threw out.

For the articles3.css stylesheet, which is attached to many more (and more varied) pages, I’m exploring a different approach that I will describe later.

Old Enough to Buy a Drink

Over the twenty-plus year life of the site, the code has been refactored at various times, though back then this process was called “updating.” From HTML 2.0 to HTML 3.1 to HTML 4.1… from no-CSS to CSS2 and then CSS3… things slowed down about then, as my time was challenged by work that actually helped pay my rent.

The site performed well, leading me to think that a transition to HTML5 would be “easier and faster” than it is turning out to be.

Implementing a mobile-first ideology across all menu pages so that they perform in a consistent manner has made a major different in site performance. It has also led to minor cosmetic improvements.

Most of the pages on the site still need a lot of work. And looking at some of that old code feels like traveling back in time.

This “refactoring” mostly involves stuff under the hood… but it has already affected some of the visual elements, though I wouldn’t call it a “redesign” or a “revisioning” but a sharpening of the edges.