Bridge, Out Ahead website
We got themes.
The subtitle of this post, “we got themes,” might lead you to think that themes are a new development for my deal-generating program. Not so! In fact, changeable themes were there long before I coded any bridge logic. I made the theme changeable for several reasons.
One, the program is a learning project for me on two fronts: web development, and bridge. I had not written a substantial web-based application before, so before getting around to the bridge logic it was necessary for me to learn enough web technology to allow me to build a user interface and then figure out where the bridge logic would come in. And so for the first few weeks of development all I had was a web page.
I’m sure you have noticed that the default theme is rather garish and it has a seemingly random graphic of a hot dog. This little guy:
But neither the colors nor the hot dog are random at all. They are a tribute to a theme that was built into an early version of Windows, called Hot Dog Stand. It looked like this:
I loved that theme. I used to use it at work. Besides being fun, it was handy to keep people from spying over my shoulder, for anyone who rounded the corner with nefarious intent was guaranteed to gasp and say, “My God, doesn’t that hurt your eyes?” Yes, it did kind of hurt my eyes, so I could only use it for a few hours at a time. But we had fun, me and ol’ Hot Dog Stand. Sadly, that theme eventually disappeared from later versions of Windows.
And so naturally my first non-mainframe user interface simply had to use that theme:
While this may seem like pure foolishness, it also served my learning goals because I used CSS to specify the colors and fonts. In earlier much less ambitious attempts at writing web pages, I had simply embedded all the color and font attributes in the HTML. Putting that stuff into CSS files led to the simple realization that by segregating the style info I could easily change it. And thus were born my alternative themes.
Now, since my approach this time around was to learn just enough web development to get to the point where I could write bridge logic, I did not delve deeply into the subject of properly defining and changing themes. I was to find out eventually that there are standard ways of doing that. Although it varies by type of browser, in general there is a built-in mechanism for specifying and changing the theme. I didn’t look for any of that. What I did was write separate CSS files for each theme, provide a separate image (in lieu of the little hot dog guy) for each theme, and then use a rather kludgy way of pointing to different CSS and image files.
My method doesn’t work on all browsers. In fact, it may only work on Mozilla Firefox, which is my chosen target for my web development. Some people take pains to make their application work on all major browsers. I am not one of those people. I learned long ago that you can either focus on your application functionality, or you can focus on development and execution environments. Actually you can do both, but if the time you have available to spend on the project is limited you must make choices. I chose to make this thing work at least on Mozilla Firefox, and then to focus on bridge logic.
I have tried my theme-changing on other browsers, and it simply doesn’t work. What happens is when you use my method to try to change the theme, you lose all styling and you wind up with a black and white page and the element spacing goes haywire. So if you really want to see the themes in action, you have to use the Firefox browser.
I referred earlier to a kludgy way of changing the theme. On my web page, you change the theme by clicking on the image of the hot dog guy (or whatever image is in that spot, which varies by theme). So let’s do that and run through the themes. Click the hot dog guy and you should now see this (again, only in Firefox):
Click on good ol’ Santa and you see this Eastery delight:
Next up, a little something for the ladies. Idris Elba:
Next up is 4th of July. You can’t tell from this still shot, but the image across the top of the page is an animated GIF of fireworks:
Next is my tribute to everyone’s favorite little sycophant, Li’l Enos from “Smokey and the Bandit”:
Finally, a soothing autumnal or Thanksgiving theme:
As you may have figured out, these themes were selected because each one provides an opportunity to design a different color scheme. The fact that they are enormous fun (for me, at least) is a bonus.
Themes are so much fun, in fact, that I have to force myself to not work on coming up with more of them, with more features such as animation, until after I have the bridge logic farther along.