Iris

Those who have followed me these last five years or so are probably aware that I designed and coded this site’s layout on my own in an effort to learn the basics of Web design. Thus, shadowm.rewound.net has been redesigned no less than eight times since its inception.

Dorset6, the last iteration prior to this day, was first deployed on May 11th, 2011. Since then, it has only received minor incremental updates addressing bugs and minor practical concerns that cropped up later, since I found the overall design to be pleasing to the eyes — at least until I got a new screen where the lighter blue colors turn out to be purpler than intended, oops!

The last maintenance update to Dorset6 was Delta 24, deployed on April 26 2014.

The underlying template engine, Poison Ivy, has not seen any architectural changes all these years since it was first deployed in 2010. In the meantime, however, I have learned more about API design from my experience with various other projects. It can be very disheartening to look back on past practices and realize you were doing things completely wrong in production software!

During this time I have also heard all the hype surrounding HTML5 and CSS3, and got to experience the results firsthand as large websites started making use of the new technologies. On top of that, support for Internet Explorer 6 is finally dying off, and Windows XP just reached its definitive end of life last month; software and Web developers everywhere rejoice as they no longer have to give support to grossly obsolete products from the early 2000s.

I have actually made use of CSS3 and forward features in shadowm.rewound.net since Dorset6, but right after deployment I decided to aim for leveraging more of their potential in the next iteration, Dorset 7. I promptly begun throwing around style and layout ideas. However...

Nightshade

Since the live deployment of Dorset2 in January 2010, the non-blog portion of shadowm.rewound.net has run on the homegrown Poison Ivy templating engine, which is also shared with Kalari and later Hakone, the previous and current designs of the Wesnoth-UMC-Dev Project website. Due to my initial focus on porting over code and patterns from the original Dorset and Soradoc, Ivy became a horribly bloated mashup of coding styles and design philosophies, and dragged along with it a large amount of unused historical code.

Because I wanted to focus on the Web design essentials at a later date, at the onset of Dorset 7’s development cycle I determined to write a new templating engine from scratch, then codenamed Nightshade. Rather lamentably, the new codebase promptly fell victim to scope creep, as I apparently decided that having one CMS (Serendipity) wasn’t enough — I wanted to create my own and learn to develop with SQLite along the way. And thus, the foundations for Nightshade CMS were laid, and a roadmap was established.

I know what you are thinking at this point, and I concur: it was a certain recipe for disaster.

There is a silver lining to this failed undertaking, though. Over a year later, I revisited the aforementioned foundations, and found them to be quite apt for a Poison Ivy replacement in spite of all; because, while the “CMS” part never materialized, the simple core API I had devised continued to appear enticing to the eye, and refreshingly quick and easy to understand even after leaving it untouched for so long. Thus, the project’s scope took a few many steps back and became manageable again, and codename Nightshade became simply Nightshade — no CMS.

Dorset 7

Making a completely new and unique design, as it turns out, is easier said than done — especially when you are an amateur and fully preoccupied with an even larger project demanding an enormous investment of time and energy, to which you have to devote your programming and art skills, as limited as they already are.

The first pre-alpha iteration of Dorset 7 (codename Moonlight) was essentially a full reimplementation of Dorset6 (in HTML5 and CSS with Sass), neither adding nor changing anything in terms of features. This creative block led me to maintain Dorset6 for far longer than any of its predecessors, occasionally deploying ‘deltas’ addressing various small issues I found over time, and more rarely backporting minor ideas from Dorset 7.

Dorset 7 gradually became a staging area for all kinds of experiments that wouldn’t make it to either development branch, taking on a rather schizophrenic appearance as time went by (codename Ethea). I even experimented with sidebar-less designs and dropdown menus, until it became clear that I would never be able to part with the sidebar without an intermediate step.

On April 2014 — that is to say, just last month — I decided to take the Moonlight and Ethea branches and recycle them into a new theme reimplementing the basic layout of Dorset6, but taking it towards a different direction in preparation for a next, larger future step.

Iris

The Iris design encompasses more than just a chromatic overhaul of Dorset6. Under the hood, the style is now implemented using Sass, an awesome CSS preprocessor that includes such neat features as variables, static math (not to be confused with the CSS3 calc() value function), selector inheritance and scoping, and reusable mixins. My previous choice to make Dorset2 and later manageable using separate stylesheets had already begun to pose an insurmountable organizational challenge by the time Dorset6 was nearing completion, but with Sass I was able to rearrange everything so I could focus more on the actual styles rather than the implementation.

shadowm@nanacore:~/src/projects/dorset7/iris% make css-auto
  SASSW   css
>>> Sass is watching for changes. Press Ctrl-C to stop.
      write css/iris.css
>>> New template detected: sass/dorset/_base.scss
      error sass/dorset/_base.scss (Line 22: Undefined variable: "$body-bg-color".)
>>> New template detected: sass/dorset/_base.scss
      write css/iris.css

Plus it compiles on its own every time I save a file in my editor so I can instantly try out my changes in a web browser. Neat!
Note: Makefile not included. Some assembly required.

Because Nightshade handles less responsibilities as part of its lighter design, some features previously provided by Poison Ivy found their way to the Iris codebase. In turn, it’s all made more manageable by a more consistent and compact coding style, and less obsolete and unused cruft from shadowm.rewound.net’s early days.

Code boxes (which I use a lot for some subjects) now include Expand/Collapse and Select All buttons where applicable, and generally look nicer — especially if you are using a modern browser supporting the CSS Flexible Box Layout specification. In order to let me write content as usual, this new functionality requires Javascript support, but really, who doesn’t have it enabled for everything these days? No, you do not need to answer that.

The site layout also no longer has a minimum width. If you feel like admiring my beautiful handwriting while watching a movie, you can shrink the browser window as much as you want and things should get magically rearranged into a single column so that the matter of the page remains fully readable. Want to take me with you to the street? To the kitchen? To the bathroom? Er, hopefully not the toilet...? Anyway, the simplified layout will adapt to your smartphone’s tiny screen too! Probably.

Oh, and you can also print my words in paper now without all the pesky navigational elements that only make sense on a computer screen! How cool is that?!

There are other changes in the same vein which hopefully make the site more adaptable to different devices and form factors. It’s hard to tell whether I succeeded in this regard or not, since I don’t own anything other than regular laptops and desktops. I expect that icons will still look ugly on high-DPI screens and Retina devices, though. I hope to find a solution in the future!

And back to the visual changes... I feel that I have outgrown the idealistic-looking light blue highlights of the Dorset series, and the more neutral black/dark gray scheme probably reflects better the aura of mystery surrounding some of my work. The monochrome building blocks also seem more elegant in some way, and the contrast with the main column makes the latter stand out better, even seeming wider than before when it actually is only by a negligible degree. The CSS gradients on the sidebar and code box controls give them a more tangible, solid appearance that is not as easily achieved with pure flat colors, like the fallbacks in place for older browsers.

Without any major blue areas in the new scheme, something felt missing... until I added a fading gradient background for the whole page, sitting behind the major sections. My plan to use a fading image or color actually dates back to the very first version of Dorset, but at the time CSS gradient support was not as widespread as it is nowadays, and I found it a waste of bandwidth to implement it using large PNGs. I revisited the idea in pretty much every iteration since then, but it never seemed to serve a valid purpose until now.

Sadly, Mozilla Firefox has some notable performance issues with radial gradients in particular, at least here. Because I still use Firefox in spite of all, I plan to look into replacing the background with a suitable alternative soon. UPDATE (2014-05-19): A full replacement wasn’t actually necessary after all, just a few background size optimizations which I have just deployed.

Content

The deployment of the Iris design seemed as good a opportunity as any to review and replace some of the dated content in this site.

Several projects that I have abandoned had their pages purged for good, although the intra-site links had started to disappear months in advance. I find it pointless to openly talk about ideas that weren’t that good in retrospect unless it is for didactic purposes — which is why I decided at the last minute to exclude my planned “Defunct Projects” list from the Projects section. On the upside, I had enough time to redesign the projects listing and make it more enticing to casual visitors; they say a picture is worth a thousand words, no?

The About and Contact sections should also be more concise and readable now, and cover more recent developments. I tried to make them a bit more familiar, colorful, and approachable to people who don’t know me much or at all.

Now that the refurbished Articles page is up, I hope to find the energy later to carry out my nefarious plan to review every single Wesnoth add-on I can get my hands on — for fun. It should come as no surprise, however, that I have officially discontinued the Wesnoth: Evolution series. It’s just too demanding to write a single article for such a tiny audience when there are so many other things I want to do and work on instead. In order to write thorough reviews of previous Wesnoth version, I had to spend too much time playing them, comparing every minor inconsequential detail, and go back over the information I had previously gathered, multiple times. As the number of changes between versions increases — and the release count itself does as well — the task becomes insurmountable at an exponential rate. Or something like that. Maths aren’t my thing.

Finally, the front page sees the reintroduction of a longer — but by no means boring — introduction, and the content has been rearranged a little bit to make it stand out against the rest of the site, without departing too much from the overall Iris visuals.

⁂

Conclusion

What eventually turned into Iris was originally supposed to be completed before the start of 2013 (and then again before January 1st 2014), but Dorset 7’s development schedule and (symbolic) budget conflicted with that of my last Wesnoth add-on, After the Storm, which had a higher priority than any other of my projects due to its own turbulent production. And since I was relatively happy with Dorset6 before purchasing a new monitor and computer in October 2012, I decided to let the key concepts settle for a while.

Ever since the original deployment of its predecessor, a lot changed for the better in the Web technologies front. I also learned many new tricks and shifted my programming style towards more maintainable code, since I have been on the receiving end of my past self’s incompetence way too many times to count. Really, it would be highly inconsiderate on my part to subject my future self to similar displays of foolish shortsightedness and their devastating consequences!

But like every other Web design effort preceding Iris, my intention is to put some of the things I learned along the way into use for more serious projects — eventually.