Izdihar - Magic Kingdom Escapology

It's a few weeks since I last posted about the plans for this blog and a move to something rather more current. As you may have noted, a good few things have now been ticked off. It's still a little rough around the edges but many of the basics are beginning to fall into place. The fixed-width is gone, fonts have changed, colours are more distinct, and there are now a few grid layout ideas going on.

There still plenty to do though; the CSS organisation is messy, it has a lot of duplication still, and the layout begins to break at smaller sizes. Oddly, despite the max-width being set at 960px, it breaks on an iPad, where it looks just fine on a laptop or desktop device - it should work, but doesn't. Lastly, running the site against http://www.webpagetest.org/ throws up a rather turgid result where performance of the site is concerned - go check it yourself if you wish, but it does highlight how web development has moved on since I first stood this thing up, and how my own skills have fallen back. Work to do then...

On a more positive front though, there is some proof of the value of doing what I have done so far, I ran the site through Google's 'Mobile Friendly Test' page. Whilst at first the test came up negative, the addition of the Viewport meta tag got the tick in the box I'd wanted - izdihar.com is now, officially, a mobile-friendly site.

This is just a short test of the Prism code rendering plugin written by Lea Verou. For some, as yet, inexplicable reason, it isn't applying the CSS as it should, hence the code being shades of brown, rather than the nice rainbow coloured stuff it ought to be.

Edit: So, problem solved. I'd used an incorrect piece of markup. Things are now as they should be.

/*
 *	- Add todos
 *	- Delete todos
 *
 *	## Further challenges
 *	- Mark as completed; styled with a strikethrough.
 *	- Mark all as completed
 *	- delete all todos
 *	- delete all completed todos.
 *	- Edit a todo. Inline editing.
 */

function makeTodo(text) {
  var $todo = $("<li></li>");
  var $button = $("<button>x</button>");
  $todo

    .text(text)
    .addClass("todo")
    .append($button);

  $button.on("click", function() {
    $(this).parent("li.todo").remove();
    // Or $todo.remove(;) as a more terse option
  });

  return $todo;
}

$("#save-button").on("click", function(e) {
  e.preventDefault();
  var input = $("#input-field").val();

  var $todo = makeTodo(input);
  $(".todo-list").append($todo);
  $("#input-field").val("").focus();
});


// (strings) Array of strings
// (string) Item in the array of strings

var strings = [
  "Foo",
  "Bar",
  "Baz"
];

strings.forEach(function(string) {
  var todo = makeTodo(string);
  $(".todo-list").append(todo);
})

Procrastination is a terrible thing. At times, It seems my default response to many things, so they get put off until they're absolutely needed and can no longer be avoided.Witness this blog. For too long, I have left vague (and not so vague) hints that it needs looking at, but then got nowhere with it. I did start something on my offline installation, but once I got word that the new b2evolution was coming out, that stalled. Well v6.6.x has come and gone, been installed, been upgraded, and upgraded, and is now up to 6.6.4 like the number means anything particularly at this point, yet the skin is the same.

So why this post then?

Well, a few weeks back Francois and team announced that they'd updated all of their skins to be compatible with version 6, including the one I've been using here since it was first set up around 10 years back (happy birthday blog). For the sake of swapping out the header image to the one of my Desert Tower shot, I'd supposedly got myself an upgrade to something rather more current, hadn't I? Well, it seemed not.

I tried swapping over to the new one, but it quickly became apparent more was needed than that. So what's wrong with it then, putting aside the obvious point that it's all a bit brown - #895c46 brown to be precise - there are a few other things that mitigate it being a straight swap out and job done:

• The contrast between the background and text is fairly low. At some point I've tweaked things a little here; the basic text for paragraphs is a bit darker, the links are a bit lighter, but not so in the updated skin at b2evo
• The text is generally on the small side, making it harder to read than it needs to be. For some reason, the new version starts things off by shrinking the default sizing a little to 0.9em. This doesn't look a comfortable on all devices; it's OK on my old 24" HP monitor, but not so much on my 13" laptop screen with it's 1,600 x 900px display.
• The font is a bit boring if truth be told. It's based around Tahoma, falling back through Lucida Sans, Arial, Verdana, and Sans-Serif if it's not available. Possibly worse, is that it doesn't veer away from san serif fonts at all for any component on the page - it's all a bit samey, and rather workmanlike.
• On higher resolution screens, the rather narrow width for the content - it's 900px wide - seems rather a waste of all that screen real estate to be going for a narrow strip down its middle. It doesn't even seem to take any design cues from any of the grid systems out there, like 960GS, an approach which now feels feels like it's been around since the ark in web terms
• Lastly, and this is the BIG ONE, the skin has been created as a 'fixed width' design and is in no way responsive, or mobile friendly. That needs fixing - seriously...

What needs to be done then? Sounds like time for another list doesn't it, but first let me just explain why this post even exists. In part it's going to be a reference as to what needs doing; a 'Statement of Requirements', but mostly it's going to be a constant reminder that I must actually get it done - no escaping, no skivvying off, and definitely no more procrastinating. The list then...

1. The v6.x version of Vastitude is to be installed and its included header image replaced [COMPLETED]
2. The font-size is to be made larger and line-height adjusted if needed [COMPLETED]
3. The font-color is to be matched to the old skin you see here now (this may have changed by the time you read this) [PARTIAL - more to do]
4. The overall width of the content area is to be widened to 960px initially, and the rest of the grid adjusted to match [COMPLETED]
5. A new font stack is to be selected from the rather excellent selection of choices across at Google Fonts and applied as a direct replacement for the current one [COMPLETED]
6. The font stack is to be split. This is to vary what's used for body text, header tags and possibly something a little more esoteric for the heading text to sit in keeping with the header image itself [COMPLETED]
7. Lastly, the skin is to be made responsive. At first, this will just be a case of removing the fixed pixel dimensions to get it fluid, but once that's behaving as expected, @media queries can be introduced to tidy things up at various break points [PARTIAL - @media queries to be addressed]

There are a few constraints I'll introduce at this point.

• I'm not writing the skin from scratch, so all changes will be done as changes to the current style.css file
• I've no wish to open up the PHP code on the site - I don't think I have to to be honest
• The site will retain it's background colour for now (I have other ideas ruminating). As easy as that is to change, it would likely raise a whole bunch of other design considerations
• I'll be avoiding anything that messes with the default CSS Prism code rendering plugin - as the skin sits at the moment, it turns most of it brown, which doesn't help the readability of code at all

With that, it's time to get on with something and see what happens. Let me know what you think as it goes along.

This blog is beginning to look like all I do is report on software updates - the kind of stuff no one gives a flying fart about. Still, it's now running b2evolution version 6.6.2, which is a sizeable upgrade, though you, the outside viewer, would not know that. There is though, more to come (honest).

This blog skin looks like a piece of crap. It needs updating to the new version first, but other things to do first...

You may notice that I've added a ShareThis feature/icon to each post. It clearly isn't sitting comfortably within the skin at the moment. I can only attribute this to my less than stellar HTML/CSS skills. I will get round to sorting it out over the next day or two, but in the meantime the feature does work, even if it does need a little attention.

OK, as you were...