A riproaring rollercoaster of a journey through time, space and that side road just over there...

Changes

Written by:Chris of Arabia
Published on November 20th, 2016 @ 17:56:00 , using 408 words,
Posted in Web & IT Stuff, GA-WDI

I've hesitated about posting on this subject for a while, though there's no particular reason to, especially as some people know already - those that I've told on a one-to-one basis; I think it's the 'standby for broadcast' aspect of it that's held me back, I never was much of a one for a crowd.

Having left Saudi Arabia and the 'safety' of a well paid role doing project management for an IT company, one I could probably carried on until the point of retirement, I have decided to have something of a career change. In a week's time I will be starting a 3-month course down in London with General Assembly on their Web Development Immersive track.

I've harboured an ambition to get more closely involved with hands-on web development for years now, but it hasn't seemed feasible to progress this further until now, not least because the 'bootcamp' approach taken by the like of GA hasn't really become noticeably available until relatively recently. It has been neither a quick nor easy decision to take, I've been looking at it as an option for around 2 years now and actively working on admission to the course since the beginning of the year. That work paid off and I was offered a place back in June, since when, all the effort has been aimed at re-locating back to the UK - the only slight fly in the ointment came when we found out that the paperwork for our two cats, Remy & Emile (Ratatouille ref) was not going to be accepted by the UK authorities, since when they've been stuck in quarantine - ho hum...

There's something of an element of risk to all this of course; there's a lot of effort and self-study involved, it will touch on areas of technology I've not dealt with before, it does not come cheap, and perhaps the biggest hurdle will be finding a role at the end of it. What does not concern me though is my own ability to be able to learn the material, nor my capacity to put in the work required. The only thing I'm not overly happy about is being obliged to use a Mac for the course, but no doubt I'll become more familiar with their intricacies as time goes on.

For now then, wish me luck, and I'll update you as I go along. Maybe I'll even get back into the swing of posting here more regularly.

Pandora

Written by:Chris of Arabia
Published on November 10th, 2016 @ 18:46:00 , using 165 words,
Posted in General

Just had a very weird half hour. I was in the garage looking for old insurance policy paperwork. I've still not found that, but I did find some history; my history... Old hand written letters, postcards, birthday cards, letters jointly named, people I've not forgotten, but lost the connection to. Some people to whom the connection still exists, people here even, and the photographs.

It seems I was once organised enough to sort things into compartments; buff manilla envelopes marked "electricity", another marked "gas", one for the "building society", and the one scribbled in black marker pen with the word "letters". That one did it, a past me staring back through some 25+ years inviting me to relive a piece of life I'd not even realised I'd saved a memory of. There are things there I should share with those who were there at the time, before it becomes too late.

Perhaps Pandora's box should have had its lid more tightly sealed...

Now where's that policy document?

'Mobile Friendly' At Last

Written by:Chris of Arabia
Published on October 28th, 2015 @ 21:04:00 , using 249 words,
Posted in Blog Updates

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. :>>

Prism Plugin Test [PROBLEM SOLVED]

Written by:Chris of Arabia
Published on October 11th, 2015 @ 18:10:00 , using 152 words,

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. :yes:

/*
 *	- 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);
})

Updating the skin on this blog

Written by:Chris of Arabia
Published on October 9th, 2015 @ 20:18:00 , using 920 words,

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.

Read this fantastic article about b2evolution

Written by:Chris of Arabia
Published on August 18th, 2015 @ 22:48:00 , using 51 words,
I would say that wouldn't I. Well I did write it after all. Seriously, though, if you'd like to learn a little about the software that powers the blog you're reading right now, give this article at Sitepoint a read and let me know what you think - An Introduction to b2evolution.

1 3 4 5 6 7 8 9 10 11 ... 69

©2016 by Chris of Arabia • ContactHelpCommunity software
Blog theme design by Andrew Hreschak