Who needs Jekyll for GitHub pages? Introducing Hyde!

I've been playing with various blogging/CMS engines since I started messing about with code. I even played with the fore-runner of WordPress for a long time before moving my own blog over to WordPress and now over to blogger. I created another one a little while ago that could be hosted on Google Drive but it didn't really peak my interest TBH, then along came a lovely article via Feedly (I love Feedly - I love it so much I've paid for it! Why don't you?) about GitHub pages. The article was lovely except that it wasn't really aimed at Windows users (what can I say? Windows works for me and seems to work a treat with most things I ask it to do... there's something about messing with Ruby though that leaves me feeling cold).

Anyway, the article talked about using Ruby to generate a static site using a combination of markdown and a Ruby gem by the name of Jekyll. This, after thrashing around trying to get the bloody thing to work on Windows 8 for a little while, got me thinking about my original GDB and about how cool it would be if I stored markdown rather than Base64 encoded HTML within my spreadsheet. So I got to work making that happen.

Thankfully all this happened during the Xmas and New Year break so I had some time to play (plus ample opportunity to play seeing as whenever I'm not playing/coding, driving, drinking or sleeping I'm an emotional mess) so I got to work and created a markdown powered dynamic blogging engine that seems to work a treat as a replacement for Jekyll on GitHub pages while using Google Sheets as a backend! Strangely enough I decided to call it Hyde. It's not likely to be fast but it does the job a treat and I'm going to write some instructions about it's use later on, in the meantime you can see it an action here.

gMusic

I love music, I really do, which is just as well seeing as I'm tone deaf. #1 son makes and produces music and some of it is really to my taste (very little not TBH) so along with SoundCloud I've tried most of the online music services going. Rdio was lovely but I found Spotify a wee bit intrusive... then Google Music came along and I was in heaven. A wee few squid a month means I get to listen to nigh on anything that takes my fancy... and I do do so... all day long! As well as all the music I've been collecting since my adolescence. Coding with music should really be obligatory!

Thing is though, I do need to talk to other people sometimes and I end up losing the Google Music tab while I'm away with the music fairies. I end up getting reminded that there's a meeting or a scrum that I need to attend and whilst I can always go without pausing the music I find that my headphones (without my head between the speakers to muffle the sound) tend to distract others with that there tinny noise! Thus I decided to spend a few days of my annual leave creating a remote control in the form of a Chrome Extension. It should just display a play/pause icon that, when clicked, plays or pauses the music I'm listening to.

It seems to work for me but I reckon that the whole spirit of opensource should mean that if anyone else can see an improvement then I should embrace it - thus it's hosted on GitHub. Please do take it and play, but please do help others by sending your enhancements back.

Eventually I'll work up the bottle to submit it to the Chrome Store but I think I need to do a wee bit more research along the way yet.

UPDATE [21/12/2013]: Research is done and the extension is now available on the Chrome Store here: gMusic.

Cool ehh?

Less for Murder

In retrospect looking up criminal offences associated with a 5 year term at work probably wasn't the best use of my time for the 20 minutes I thought I'd spend being romantic this morning (as you may or may not know I've been wed to Katrina Myers for 5 years today - sometimes feels like forever*).

I'd like her to know how ever-so grateful I am to her and apologise for the damaged nature of the goods she's ended up taking on.

I love you darling!

(Didn't say who was serving the prison term did I? Still, I'm aiming to make it a life sentence)

* forever in a good way!

Urbanisation

#2 son has been doing an awful lot of stuff on Urbanisation in his iGCSE Geography at InterHigh of late and then I came across this fantastic article on GIGAOM: Catering to employee demand: Tech companies relocate downtown which is well worth a read. I was mainly interested in that the developers I know have rarely had a university based background...

New Logos and a New Way to Verify Your Salesforce.com Certification Credentials

14 years ago

14 years ago my youngest was born. He was the cause of me leaving work early after dealing with a shit-storm of a night-shift and the reason for me falling ever-so-slightly in love with a settee. He was born on it and I slept on it with him over the first year or so of his life. He spent months strapped to my chest and hated the sound of the vacuum cleaner and lawn mower. We sang and burbled and he must have spent months listening to my heart beating. Even when he got older he seemed to relax when sat upon my lap. I miss him.

Ash's Cheese Cake

Playing with #888888

isBlank()

Another brilliant little bit of code to complement empty() is isBlank():

function isBlank(str) {
    return (!str || /^\s*$/.test(str));
}

DataTables (custom) sort by month name only

I use DataTables a lot, I think they're brilliant and I'm slowly getting to understand their intricacies. Anyway, I had a need to sort a column by month name only so I came up with this:

var monthNames = ["January", "February", "March", 
    "April", "May", "June", 
    "July", "August", "September", 
    "October", "November", "December"];
jQuery.fn.dataTableExt.oSort['month-name-asc'] = function (x, y) {
    var xPos, yPos;
    jQuery.each(monthNames, function (k, v) {
        if (x == v) xPos = k;
        if (y == v) yPos = k
    });
    return ((xPos < yPos) ? -1 : ((xPos > yPos) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['month-name-desc'] = function (x, y) {
    var xPos, yPos;
    jQuery.each(monthNames, function (k, v) {
        if (x == v) xPos = k
        if (y == v) yPos = k
    });
    return ((xPos > yPos) ? -1 : ((xPos < yPos) ? 1 : 0));
};

Simply add "sType": "month-name" to the column def and away you go!

Instant Meteor JavaScript Framework Starter "Grapher is not defined"

The image above is the view from the front of the boat taken on the 13th of July 2013. It's pretty is all so I thought I'd put it here. It's got nothing to do with the excellent book in the title of this post!

The excellent book does, however, have one small issue in that I couldn't get the application to work... I did all sorts of searches (using variations of the terms in the post title - which I found using FireBug) to no avail. Then I realised this was a Packt book and I really should check the books page on there, taht was when I found Errata link and the helpful:

Errata type: Code | Page number: 34 | Errata date: 28 May 2013

Only for versions 0.58 and higher

The first paragraph of page 34, where it states that the reader should add the line should read:

Grapher = {};

instead of:

var Grapher = {};

I hope that this helps someone as it was doing my poor little noggin in for about a week (Should remember to check the source!)!

Sunday 14/07/2013 cycle-ride

Jolly good cycle ride yesterday - though I couldn't move my legs when I go back! It was all I could manage to stand up after my pint of San Miguel (not sure why it's my tipple of choice when the sun's out...) at The Green Dragon when we got back. Still, the cat was happy to see us back... by my reckoning it was something like 29 miles all together. Cycling along the guided bus route was a pleasure though!

Pub Quiz (02/07/2013)

Last Tuesday's pub quiz had the wrong answer. It asked about this historic tightrope walk and said the answer was The Grand Canyon, but it wasn't was it? Ohh no, it was the Gorge of the Little Colorado wasn't it?

Seems as though the quiz setter wasn't the only one wrong though as MSN got it wrong as well.

Thank you Mr Graham Haigh for getting the right answer! And He should know as he's been there! ;-)

Immersed in my gMail

I found this via a RSS link so went over and checked my gMail account activity, after checking the labels I decided to put it here without the labels to protect the guilty ;-)

It's really rather cool though so have a crack. Don't worry about your privacy as the NSA can read all your email anyway so letting MIT read it as well can't hurt!

Making a web page 05: Preparing your orchard

I've been busy of late so I've neglected you, so sorry!

This lesson I'd like us to set up how an environment in which you can carry on learning whenever you want and wherever you are. I code for a living and have to get to grips with lots of different environments. I code PHP and some C# on the server-side and lots and lots of JavaScript on the client-side. Over the years people have come to understand that while you can code using something as simple as Notepad it's sometimes nice to have something that'll give you more help - coding can be hard you know!

This thing that makes coding a little easier is called an IDE and there are many out there to choose from. Sometimes a simple editor like Notepad can offer IDE-like features (One of my favourite editors is called Boxer and I used to use that only as it is really good at accessing files over the internet using FTP, which is a way of transferring files between machines on the internet. Lately I've also been using Sublime Text 2 which is cool in it's own way. I've bought both editors as I think that coders should be rewarded for the hard work that they do and because I value how each makes aspects of my coding life a little easier). But these types of editors only go so far! I appreciate both for the tools they offer me but sometimes I need a little more, this is when an IDE can come in useful.

Anyway, my environments for coding are pretty split, when doing PHP for fun stuff at home - and sometimes at work - I like to use PHPStorm. When at work I'm mostly using Visual Studio. PHPStorm costs money but I think it's worth it, Visual Studio has a free version which is cool as I still don't know all the ins and outs of either program and I use them nearly ever day! That can be a problem with IDEs - sometimes the work associated with learning their peculiarities means that you become more efficient in what you're doing, sometimes it's simply a waste of time - I guess that that's a decision you'll have to make as you progress along the path.

But this discussion about how I do things is all well and good, I've linked to 4 different editors or IDEs that I, or my employer, have paid for but I want you to do things for free (yes, I know that you can download a version of Visual Studio for free but that limits you to working on one PC - what about if you want to create a little webpage anywhere? You could end up spending the time you could be creating installing Visual Studio on another machine!).

If you've been reading this blog for a while you'll know that I've gotten really quite excited about being able to share content using Google's Drive. This is, in my own opinion, quite possibly one of the best things since sliced bread (and I really like sliced bread - especially toasted and with Marmite on!). In order to take advantage of this all you need is a Google account... what with Google+ becoming more and more popular and as good as - if not better than - Facebook you've probably already got one. If not then go ahead and set one up now. Go on, I'll be waiting when you get back.

...

Back? All done? Cool!

So now you're back? And reading this in one tab of Chrome (You are using Chrome aren't you? If not go and install it now - I'll wait.) with Gmail open in another tab? If not set that up - it's dead easy to have multiple tabs open in a browser. In Gmail, click Drive along the top black bar and create a folder and... actually I've found a really cool page with instructions so just go there and follow the instructions and then come back.

We'll start putting stuff on your site soon but look at what you've just done! You've spent 5 minutes setting up hosting for a webpage and it hasn't cost you a penny! Google are offering it to you for free! You've no idea how big a thing this is but not so very long ago you'd have to spend quite some time setting up a domain name and hosting but now it's almost a throwaway thing. I've done this myself a number of times and it just gets quicker, easier and cheaper each time. Ain't progress grand?

This post hasn't had any code or markup but it has had a lot of preparation for getting a lot more stuff done later on down the line. As I note above that preparation hasn't been all that hard but it has allowed you to host your future work for everyone to see so it's not at all bad really is it? We've looked at some tools that you might want to invest in in the future but hold fire until next time and I promise I'll show you a free semi-IDE.

UK Housing price changes

I love data visualisations and I've been playing lots of charts for #2 son's grades and scores in homework and exams (Bloody well done that lad) so I really, really liked this article on Flowing Data. It did get me wondering though about the state of play in the UK so after a wee bit of research I found a lovely spreadsheet with the data on it. I imported bit's into a Google Spreadsheet and started charting:

websafe color names and values

I'm going to be needing this soon, so I thought I'd put it here for others if they want it:

[
    {
        "name": "AliceBlue",
        "value": "#F0F8FF"
    },
    {
        "name": "AntiqueWhite",
        "value": "#FAEBD7"
    },
    {
        "name": "Aqua",
        "value": "#00FFFF"
    },
    {
        "name": "Aquamarine",
        "value": "#7FFFD4"
    },
    {
        "name": "Azure",
        "value": "#F0FFFF"
    },
    {
        "name": "Beige",
        "value": "#F5F5DC"
    },
    {
        "name": "Bisque",
        "value": "#FFE4C4"
    },
    {
        "name": "Black",
        "value": "#000000"
    },
    {
        "name": "BlanchedAlmond",
        "value": "#FFEBCD"
    },
    {
        "name": "Blue",
        "value": "#0000FF"
    },
    {
        "name": "BlueViolet",
        "value": "#8A2BE2"
    },
    {
        "name": "Brown",
        "value": "#A52A2A"
    },
    {
        "name": "BurlyWood",
        "value": "#DEB887"
    },
    {
        "name": "CadetBlue",
        "value": "#5F9EA0"
    },
    {
        "name": "Chartreuse",
        "value": "#7FFF00"
    },
    {
        "name": "Chocolate",
        "value": "#D2691E"
    },
    {
        "name": "Coral",
        "value": "#FF7F50"
    },
    {
        "name": "CornflowerBlue",
        "value": "#6495ED"
    },
    {
        "name": "Cornsilk",
        "value": "#FFF8DC"
    },
    {
        "name": "Crimson",
        "value": "#DC143C"
    },
    {
        "name": "Cyan",
        "value": "#00FFFF"
    },
    {
        "name": "DarkBlue",
        "value": "#00008B"
    },
    {
        "name": "DarkCyan",
        "value": "#008B8B"
    },
    {
        "name": "DarkGoldenRod",
        "value": "#B8860B"
    },
    {
        "name": "DarkGray",
        "value": "#A9A9A9"
    },
    {
        "name": "DarkGreen",
        "value": "#006400"
    },
    {
        "name": "DarkKhaki",
        "value": "#BDB76B"
    },
    {
        "name": "DarkMagenta",
        "value": "#8B008B"
    },
    {
        "name": "DarkOliveGreen",
        "value": "#556B2F"
    },
    {
        "name": "DarkOrange",
        "value": "#FF8C00"
    },
    {
        "name": "DarkOrchid",
        "value": "#9932CC"
    },
    {
        "name": "DarkRed",
        "value": "#8B0000"
    },
    {
        "name": "DarkSalmon",
        "value": "#E9967A"
    },
    {
        "name": "DarkSeaGreen",
        "value": "#8FBC8F"
    },
    {
        "name": "DarkSlateBlue",
        "value": "#483D8B"
    },
    {
        "name": "DarkSlateGray",
        "value": "#2F4F4F"
    },
    {
        "name": "DarkTurquoise",
        "value": "#00CED1"
    },
    {
        "name": "DarkViolet",
        "value": "#9400D3"
    },
    {
        "name": "DeepPink",
        "value": "#FF1493"
    },
    {
        "name": "DeepSkyBlue",
        "value": "#00BFFF"
    },
    {
        "name": "DimGray",
        "value": "#696969"
    },
    {
        "name": "DodgerBlue",
        "value": "#1E90FF"
    },
    {
        "name": "FireBrick",
        "value": "#B22222"
    },
    {
        "name": "FloralWhite",
        "value": "#FFFAF0"
    },
    {
        "name": "ForestGreen",
        "value": "#228B22"
    },
    {
        "name": "Fuchsia",
        "value": "#FF00FF"
    },
    {
        "name": "Gainsboro",
        "value": "#DCDCDC"
    },
    {
        "name": "GhostWhite",
        "value": "#F8F8FF"
    },
    {
        "name": "Gold",
        "value": "#FFD700"
    },
    {
        "name": "GoldenRod",
        "value": "#DAA520"
    },
    {
        "name": "Gray",
        "value": "#808080"
    },
    {
        "name": "Green",
        "value": "#008000"
    },
    {
        "name": "GreenYellow",
        "value": "#ADFF2F"
    },
    {
        "name": "HoneyDew",
        "value": "#F0FFF0"
    },
    {
        "name": "HotPink",
        "value": "#FF69B4"
    },
    {
        "name": "IndianRed",
        "value": "#CD5C5C"
    },
    {
        "name": "Indigo",
        "value": "#4B0082"
    },
    {
        "name": "Ivory",
        "value": "#FFFFF0"
    },
    {
        "name": "Khaki",
        "value": "#F0E68C"
    },
    {
        "name": "Lavender",
        "value": "#E6E6FA"
    },
    {
        "name": "LavenderBlush",
        "value": "#FFF0F5"
    },
    {
        "name": "LawnGreen",
        "value": "#7CFC00"
    },
    {
        "name": "LemonChiffon",
        "value": "#FFFACD"
    },
    {
        "name": "LightBlue",
        "value": "#ADD8E6"
    },
    {
        "name": "LightCoral",
        "value": "#F08080"
    },
    {
        "name": "LightCyan",
        "value": "#E0FFFF"
    },
    {
        "name": "LightGoldenRodYellow",
        "value": "#FAFAD2"
    },
    {
        "name": "LightGray",
        "value": "#D3D3D3"
    },
    {
        "name": "LightGreen",
        "value": "#90EE90"
    },
    {
        "name": "LightPink",
        "value": "#FFB6C1"
    },
    {
        "name": "LightSalmon",
        "value": "#FFA07A"
    },
    {
        "name": "LightSeaGreen",
        "value": "#20B2AA"
    },
    {
        "name": "LightSkyBlue",
        "value": "#87CEFA"
    },
    {
        "name": "LightSlateGray",
        "value": "#778899"
    },
    {
        "name": "LightSteelBlue",
        "value": "#B0C4DE"
    },
    {
        "name": "LightYellow",
        "value": "#FFFFE0"
    },
    {
        "name": "Lime",
        "value": "#00FF00"
    },
    {
        "name": "LimeGreen",
        "value": "#32CD32"
    },
    {
        "name": "Linen",
        "value": "#FAF0E6"
    },
    {
        "name": "Magenta",
        "value": "#FF00FF"
    },
    {
        "name": "Maroon",
        "value": "#800000"
    },
    {
        "name": "MediumAquaMarine",
        "value": "#66CDAA"
    },
    {
        "name": "MediumBlue",
        "value": "#0000CD"
    },
    {
        "name": "MediumOrchid",
        "value": "#BA55D3"
    },
    {
        "name": "MediumPurple",
        "value": "#9370DB"
    },
    {
        "name": "MediumSeaGreen",
        "value": "#3CB371"
    },
    {
        "name": "MediumSlateBlue",
        "value": "#7B68EE"
    },
    {
        "name": "MediumSpringGreen",
        "value": "#00FA9A"
    },
    {
        "name": "MediumTurquoise",
        "value": "#48D1CC"
    },
    {
        "name": "MediumVioletRed",
        "value": "#C71585"
    },
    {
        "name": "MidnightBlue",
        "value": "#191970"
    },
    {
        "name": "MintCream",
        "value": "#F5FFFA"
    },
    {
        "name": "MistyRose",
        "value": "#FFE4E1"
    },
    {
        "name": "Moccasin",
        "value": "#FFE4B5"
    },
    {
        "name": "NavajoWhite",
        "value": "#FFDEAD"
    },
    {
        "name": "Navy",
        "value": "#000080"
    },
    {
        "name": "OldLace",
        "value": "#FDF5E6"
    },
    {
        "name": "Olive",
        "value": "#808000"
    },
    {
        "name": "OliveDrab",
        "value": "#6B8E23"
    },
    {
        "name": "Orange",
        "value": "#FFA500"
    },
    {
        "name": "OrangeRed",
        "value": "#FF4500"
    },
    {
        "name": "Orchid",
        "value": "#DA70D6"
    },
    {
        "name": "PaleGoldenRod",
        "value": "#EEE8AA"
    },
    {
        "name": "PaleGreen",
        "value": "#98FB98"
    },
    {
        "name": "PaleTurquoise",
        "value": "#AFEEEE"
    },
    {
        "name": "PaleVioletRed",
        "value": "#DB7093"
    },
    {
        "name": "PapayaWhip",
        "value": "#FFEFD5"
    },
    {
        "name": "PeachPuff",
        "value": "#FFDAB9"
    },
    {
        "name": "Peru",
        "value": "#CD853F"
    },
    {
        "name": "Pink",
        "value": "#FFC0CB"
    },
    {
        "name": "Plum",
        "value": "#DDA0DD"
    },
    {
        "name": "PowderBlue",
        "value": "#B0E0E6"
    },
    {
        "name": "Purple",
        "value": "#800080"
    },
    {
        "name": "Red",
        "value": "#FF0000"
    },
    {
        "name": "RosyBrown",
        "value": "#BC8F8F"
    },
    {
        "name": "RoyalBlue",
        "value": "#4169E1"
    },
    {
        "name": "SaddleBrown",
        "value": "#8B4513"
    },
    {
        "name": "Salmon",
        "value": "#FA8072"
    },
    {
        "name": "SandyBrown",
        "value": "#F4A460"
    },
    {
        "name": "SeaGreen",
        "value": "#2E8B57"
    },
    {
        "name": "SeaShell",
        "value": "#FFF5EE"
    },
    {
        "name": "Sienna",
        "value": "#A0522D"
    },
    {
        "name": "Silver",
        "value": "#C0C0C0"
    },
    {
        "name": "SkyBlue",
        "value": "#87CEEB"
    },
    {
        "name": "SlateBlue",
        "value": "#6A5ACD"
    },
    {
        "name": "SlateGray",
        "value": "#708090"
    },
    {
        "name": "Snow",
        "value": "#FFFAFA"
    },
    {
        "name": "SpringGreen",
        "value": "#00FF7F"
    },
    {
        "name": "SteelBlue",
        "value": "#4682B4"
    },
    {
        "name": "Tan",
        "value": "#D2B48C"
    },
    {
        "name": "Teal",
        "value": "#008080"
    },
    {
        "name": "Thistle",
        "value": "#D8BFD8"
    },
    {
        "name": "Tomato",
        "value": "#FF6347"
    },
    {
        "name": "Turquoise",
        "value": "#40E0D0"
    },
    {
        "name": "Violet",
        "value": "#EE82EE"
    },
    {
        "name": "Wheat",
        "value": "#F5DEB3"
    },
    {
        "name": "White",
        "value": "#FFFFFF"
    },
    {
        "name": "WhiteSmoke",
        "value": "#F5F5F5"
    },
    {
        "name": "Yellow",
        "value": "#FFFF00"
    },
    {
        "name": "YellowGreen",
        "value": "#9ACD32"
    }
]

Taken from w3schools.com.