\n
\n\n ![](\"/images/blog/2015/10/02/cfcamp2015.png\")
\n
\n \n Unfortunately I haven't given my site much attention for a while. So I decided to take the time to revamp it a little and alter the way I build it (static site generation). You'll have to bare with me for a bit as I'm going through my old posts and tidying them up / converting them, meaning not everything that was here is currently here (blog posts older than 2012-03 at least). Also thought I'd provide a brief update on upcoming posts and other stuff I'm up to.
\n\n\n CFCamp is a ColdFusion / CFML related conference that's based in Germany. I've never been to a previous instance of this event but have heard it mentioned by plenty of others. This will mark the second time I've spoken at a conference, the first being Scotch on the Rocks 2014, and I can't wait to give it a go.
\n![](\"/images/blog/2015/10/02/fullstack2015.jpg\")
\n This was one I wasn't expecting! I threw my proposal at this conference after WAIT 2015 was canceled, not really convinced that I'd get a spot but thought I'd try my luck. FullStack was also pushed back from the original June date, to October, so I had totally forgotten about it. Very pleased to be speaking on static site generation at the event, which I'll detail a little further in a follow up post.
\n![](\"/images/blog/2015/10/02/magazine.jpg\")
\n During my time away from blogging, I've had several articles published in Web Designer magazine. A fantastic publication that comes out monthly, featuring all sorts of coverage for web design and development. While it may have taken away from my blog as an outlet on occasion, I may start producing follow up entries based off the back of those articles.
\nNot much going on at the moment. I'm still playing around with Node.js, but have been busy enough to not have a little side-project to tinker away on. Doesn't mean I don't have some ideas up my sleeve so maybe I'll get back to something small soon enough, like the little game idea I had...
\nStill working in the NHS Wales Informatics Service, doing some quite interesting stuff lately which is allowing me to stretch my skills a little in areas I enjoy. I've also had the chance to share some of my Node.js knowledge by holding a short session providing an introduction to it for other software developers in the organisation.
\nHere is my tech related hit list for things I really want to try out more:
\nThis is a short post just to cover a little grunt plugin I create called grunt-twbs. It's designed to help you with the process of creating customised versions of Twitter Bootstrap.
Whenever I've played around with Twitter Bootstrap, I end up altering its less/bootstrap.less file and then building my custom version using Grunt to execute its own Gruntfile.js. While this is fine, it means you've got a separate Gruntfile.js hanging around and your modifications are made within the Bootstrap source, so you have to backup your changes before upgrading Bootstrap.
My second approach was to tear out chunks of Bootstrap's Gruntfile.js, alter them to work with a .less file located outside of the Bootstrap directory and place those chunks within my main Gruntfile.js. I covered this in a previous blog post and while it keeps the Bootstrap free of modifications (for easier upgrading), it doesn't get around the fact that we have to keep in line with any changes to Bootstrap's Gruntfile.js for building the CSS.
Execute Bootstrap's Gruntfile.js from my main projects Gruntfile.js. This seemed to make the most sense as I don'thave to worry about changes to the build process between versions and I can use Grunt to copy across my custom .less file. Upgrading will also be painless as there's nothing vital held within the Bootstrap directory.
grunt-twbsI wrapped my idea up as a Grunt plugin and figured I'd share (I'm good like that). It's still early days, so I may eventually add some more functionality to it or even find better ways to achieve my goal. As the plugin currently stands, it'll do the following:
\n.less file..less file should be based on Bootstrap's less/bootstrap.less file (obviously with your own modifications).dist/css/bootstrap.min.css to a directory and filename of your choice.If you've any ideas for additional features (like building Bootstrap's JavaScript as well) or other suggestions, feel free to head over to the GitHub page linked above and log an issue.
\n","date_published":"2014-12-05T13:00:00.000Z"},{"id":"blog\\speaking\\2014-11-21.md","url":"https://misterdai.yougeezer.co.ukblog\\speaking\\2014-11-21.md","title":"Speaking at WAIT 2015","content_html":"I've managed to secure my second speaking appearance at a conference. This time it's Web Applications In Trend (WAIT) which is taking place in Manchester at the awesome venue, the Manchester Conference Centre (Manchester, UK), on the 4th & 5th June 2015. But apart from myself, there are plenty of other reasons for yourself to attend or speak.
\n\nFrom the little feedback I had, from my first attempt at conference speaking, it went smoothly and was reasonably well received. On my side of the talk, a few things went badly (laptop display failing, cut off screens, nerves!) but I somehow just knuckled down and got through it anyway. Being stubborn and a glutton for punishment, how could I resist not speaking again!
\nThis WAIT conference is the first to take place and it already has a couple of things going for it, that made it my conference of choice (I usually only get allowed out once a year). If I hadn't managed to get a speaker slot, I'd have definitely bought a ticket to attend.
\n![](\"/images/blog/2014/11/21/matt_gifford.png\")
Matt Gifford is the one pulling the strings to make this conference happen. Personally, I really respect this dude having gotten to know him over the past couple of years at another conference and through his open source projects.
\n\n\nWith a guy like that behind the event, I'm pretty confident he has the skills and experience to put together a fantastic conference.
\nObviously I've already indicated that I'm speaking at the conference and Matt is making himself to speak and run the conference at the same time. He's also managed to secure some other speakers early on, which I'll briefly mention here but if you follow their links I'm sure you'll learn much more about them ;)
\n![](\"/images/blog/2014/11/21/bruce_lawson.png\")
I've heard Bruce speak several times and each time has been extremely informative and thoroughly enjoyable. Lanyrd currently (at the time of writing) has him with a tally of 93 past speaker appearances! Evangelising open web standards through his role at Opera, he's someone definitely worth listening to.
\n\n![](\"/images/blog/2014/11/21/camille_baldock.png\")
Camille isn't someone I've seen present before, but looking through the organisations she's worked with previously, her developer coaching, open source contributions and other interests... I'm certain that she'll be worthy of your time and share something worthwhile.
\nConference Profile\n\nWebsite\nGovernment Digital Service (GDS)
\n![](\"/images/blog/2014/11/21/chris_mills.png\")
Chris is another very experienced speaker with 35 past appearances, who has previously worked at Opera before his current role at Mozilla and been involved with books covering CSS and HTML. I missed a previous chance to attend one of his talks since I had to sit in on a different track at that event, but I'm going to try and make sure I don't miss out this time.
\n\n![](\"/images/blog/2014/11/21/sally_jenkinson.png\")
Sally, who works as a technical consultant and solutions architect, has spoken multiple times before and recently authored a book on documentation. I've crossed paths with her a couple of times at previous conferences I've attended and she definitely knows her stuff. Absolutely worthy of your time if you have the chance to attend one of her sessions.
\n\nManchester is pretty central to the UK, making it a great location to hold the event, with its airport, trains and infrastructure. The conference is being held in the Manchester Conference Centre which looks like an amazing and very professional venue.
\nThe conference has opened it's call for speakers. If you have something that's worth sharing and web related, why not submit a session (or multiple) and join the rest of us speaking at this event.
\n\nIf I wasn't speaking, I probably would have bought a ticket to the event already. There's early bird pricing available on the tickets (until January 1st 2015!) and, as I've mentioned already, a pretty decent selection of speakers already announced. There's also a ticket incentive system for the conference where the more tickets that are sold, the more bonuses are unlocked for the event (such as t-shirts, evening function, session recordings). So if you do book yourself a ticket, it's worth encourage others to come along as well ;)
\n\nHopefully I've done enough to convince you that this conference is worth attending. If you're going to attend, I'd love to heard from you and always happy to meet up at the event itself. Always willing to have a chat about anything I know, learn new things and usually try and give away a collection of GitHub stickers I've acquired ;)
\nUnfortunately WAIT 2015 didn't end up taking place. Due to several factors that are best all explained by the conference blog post on the subject. While I was of course gutted, I didn't let that stop me and actually secured two further speaker appearances for 2015, at CFCamp and FullStack.
\n","date_published":"2014-11-21T13:00:00.000Z"},{"id":"blog\\article\\2014-11-20.md","url":"https://misterdai.yougeezer.co.ukblog\\article\\2014-11-20.md","title":"The World of JavaScript Tomorrow, Today.","content_html":"As much as I enjoy writing JavaScript, there are various parts of it I'm not the biggest fan of. When I saw Coffee-Script, I loved how much more enjoyable and easier it seemed to write JavaScript. But eventually there were places that Coffee-Script just seemed to get in the way or was overly fussy. I then started finding out about what the future holds for JavaScript, I liked what I saw and I wanted it now.\n
\nI won't delve into everything that ES6 holds, but I'll cover what caught my eye as the most interesting. Don't let me stop you researching into the other changes in ES6 as you might find something more applicable to your own work.
\nClass support has been signed off for ES6. It includes features such as constructors, inheritance (extends), instances, static methods and calling parent class methods (super.method()).
class Game {\n constructor(config) {\n this.config = config;\n this.players = [];\n }\n\n getType() {\n return this.config.type;\n }\n\n addPlayer(player) {\n this.players.push(player);\n }\n}\nThese are used for constructing strings with variables and also add support for multiline strings.
\nvar multi = `This is\na multiple lined string\nin JavaScript`;\n\nvar mood = 'hate';\nvar output = 'I ' + mood + ' joining strings together';\n\nvar output = `I ${mood} joining strings together`;\nIf you've used Coffee-Script, it's very similar. You can create a function as a statement or expression with the advantage of it being bound to the same this that you defined it in. This can be really helpful as this can be quite confusing sometimes unless you've bound it to something (.bind(this)).
var array = [1,2,3,4].map((v) => v * Math.PI);\n\nvar random = (num) => {\n return num * Math.random();\n};\nObjects have had a couple of improvements added.
\nvar name = 'bob';\nvar data = {name};\nconsole.log(data);\n// data = {"name": "bob"};\n\nvar obj = {\n method() {\n // Bound to `this`\n }\n}\nThis provides a nice way to pull out parts of an array or object.
\nvar {readdir} = require('fs');\n// Sets readdir to require('fs').readdir;\n\nvar [exec, script] = process.argv;\n\n// Set a default if it doesn't exist\nvar [name = 'Dave'] = [];\nlet and constBlock scoping provides tighter control over your variables and constants. This can help when you want to avoid clashing variable names or changing values of a variable you've referenced in the wrong way.
\n{\n let name = 'Bob';\n console.log(name); // "Bob"\n}\nconsole.log(name); // Undefined\n\n// Doesn't have to be uppercase, I just like uppercase constants ;)\nconst HARDLIMIT = 5;\nHARDLIMIT = 20;\n// Throws an error\nYou've probably encountered modules in JavaScript before, either with Node.js (require()) or with libraries such as CommonJS, AMD and others.
export const fpRatio = Math.PI * 9.23 / 0.7734;\n\nexport function facePalmFactor(embarrassmentLevel, handSize) {\n return embarrassmentLevel / handSize * fpRatio;\n}\nimport facePalmFactor from 'lib/facePalm';\nconsole.log(facePalmFactor(707, 618))\nTwo new types to play with in ES6 are Map and Set.
A Map is similar to how a lot of developers currently use the Object type, as a key - value store. One of the advantages Map offers is that the key can be anything, whereas the key in an Object is always a string.
var map = new Map();\n// Use a string a as a key\nmap.set('name', 'bob');\n\n// 1 and '1' are not equal\nmap.set(1, 1).set("1", "One");\nconsole.log(map.get(1), map.get("1"));\n// Outputs: 1 "One"\n\n// Use anything you like as a key\nvar obj = {some: 'random', data: Math.random()};\nmap.set(obj, {trash: 'rubbish'});\nconsole.log(map.get(obj));\n// Outputs: {trash: 'rubbish'}\n\nconsole.log(map.size); // 4\nThe Set type behaves as an ordered list, which will not contain any duplicates. You add items using its .add(value) method, which will check if it already contains that value using a === comparison (value and type). A Set doesn't allow random access, so you can't jump straight to the fifth item within one, but it is an ES6 iterator allowing you to walk through the values. It also provides a .has(value) method which returns a Boolean indicator of presence in the set.
var set = new Set();\ns.add('I').add('like'.add('pi').add(3.14);\ns.size; // 4\n\ns.add(3.14);\ns.size; // 4\n\ns.add('3.14');\ns.size; // 5\n\ns.has('pi'); // true\nNow that you've got an idea of Set and Map types, here are their weak variants. These work in almost the exact same way, except they don't hold onto references. If an object is garbage collected by your JavaScript engine, if it had a reference within a WeakMap or WeakSet, it'd still be collected and vanish from your WeakMap or WeakSet.
Another important point to remember is that these weak versions can not be iterated over. This is due to the fact that garbage collection may occur and change the data. If you need a list of the contents (such as the keys in WeakMap), you'd have to maintain a separate list.
Now a Promise is something that'll prove really useful when trying to deal with callbacks. It allows you to wrap code within a promise and use that promise to fulfil other code (or further promises). Error management is also easier with certain methods provided. These are worth investigating further, I'd really recommend research further if you haven't used them before.
// Famous setTimeout example\nfunction fakeAsync(message) {\n return new Promise((resolve, reject) => {\n console.log(message);\n setTimeout(resolve, 923);\n });\n}\n\nfake('Hello')\n .then(() => {\n fakeAsync('Goodbye');\n }).then(() => {\n console.log('.');\n });\n\n\n// --- fictional example\nUser.find({name: 'misterdai'})\n .then((user) => {\n return Post.save(data, user);\n })\n .catch((error) => {\n console.error(error);\n process.exit(1);\n });\nI'll let the above resources explain these features. Simply because I haven't had chance to play around with them enough to confidently explain them and provide an example. Also, they feel worthy of their own blog post once I'm comfortable with them.
\nThere isn't much in the way of support for ES6 in Node.js, but parts are there. This is mostly due to the specifications not being fully signed off yet and the V8 version Node.js uses being a little behind (also dependant on which Node version you use).
\nAt the time of writing this was the highest stable release line (0.10.33 to be exact). It doesn't contain much from ES6: Number.isFinite, Number.isNaN, const and some other minor parts. Even then, you may find the implementations incomplete or out of date (e.g. const is not block-scoped).
There are some command line options you can invoke to beef this support up a little, hidden in the list of V8 options (--v8-options).
\n--harmony_typeof (enable harmony semantics for typeof)\n type: bool default: false\n--harmony_scoping (enable harmony block scoping)\n type: bool default: false\n--harmony_modules (enable harmony modules (implies block scoping))\n type: bool default: false\n--harmony_proxies (enable harmony proxies)\n type: bool default: false\n--harmony_collections (enable harmony collections (sets, maps, and weak maps))\n type: bool default: false\n--harmony (enable all harmony features (except typeof))\n type: bool default: false\n
\nIgnore --harmony-typeof, the reason why it isn't enabled when you use --harmony is due to it being rejected from the ES6 standard. Better off without it really. Other features like --harmony_modules won't work as the specification wasn't complete enough at the time.
Running with the --harmony flag (e.g. node --harmony index.js) will brighten our dark little world a little with some ES6 goodies. But in places it'll work if you set strict mode "use strict"; in your files.
const support (strict only)let support (strict only)WeakMap'sThe 0.11 series has been around for over a year at the time of writing (release March 2013) and contains
Math.imulNumber complete number properties from ES6Promise which makes async code management a little easierWeakMap and WeakSetTake this version of node and running it with --harmony provides the following additional support for ES6, on top of what the harmony flag enables for 0.10.x.
Math.Array now supports .find, .findIndex, .fill, .keys, .values, .entries.Symbol functionality, although some areas are lacking.String gets .repeat, .startsWith, .endsWith and .contains.Map and SetNumber support.yield keyword.Not for me, what can I say apart from "I'm greedy". I could probably also say that I really like the look of some other ES6 functionality like: modules, classes and having more complete support of the features Node.js can supply.
Enter Google's Traceur. This is a compiler that'll take your ES6 (and even some ES7) code and convert it into ES5 code, providing polyfills for missing features and rewriting code to behave as intended but in your ES5 environment (like Node.js or most web browsers).
\n\nYou can use Traceur to run your code as is or pre-compile it before hand. I prefer to pre-compile it, as I may not want the extra overhead or additional files required when deploying the code.
\nThis is where we'll actually start getting to work. The following example shows how I set up my project.
\ngrunt-traceurA grunt plugin that wraps traceur, making it a little easier to use. It makes it easier to set the options you may want to supply or even have different options for various parts of your source.
\nWe've already established that Node.js has some ES6 support with it's harmony flag, especially the 0.11 series. In the following examples, I'm going to be targeting Node.js 0.11 with the --harmony flag enabled. Because of this choice, there are some ES6 features that I want traceur to leave alone. There's no point in recompiling code if Node.js can support it.
This may not be a complete list but I'll ask traceur to skip over Octal/Binary literals and generators.
\nIf we're going to try and trace an error in our code back to our original source files, we'll need a map. Simply due to the fact that traceur will be altering our code to work in ES5. Traceur will support creation of the map files but we'll also need an additional module for Node.js to make use of them.
\nsource-map-supportnpm install --save source-map-support
\nWe won't actually make use of this module in any code under es6/src. Instead it'll go into the es6/index.js file which will bootstrap our code.
With all the code rewrites that Traceur performs, it also needs a runtime to inject the rest of its polyfills. Just like the source map support, we'll make use of this in our es6/index.js file.
npm install --save traceur-runtime
\nAll the code we create should live under es6/src, which is where we'll tell traceur to look.
module.exports = function(grunt) {\n grunt.initConfig({\n traceur: {\n options: {\n sourceMaps: 'file',\n generators: 'parse',\n numericLiterals: 'parse',\n modules: 'commonjs'\n },\n custom: {\n files: [{\n expand: true,\n cwd: 'src/',\n src: ['**/*.js'],\n dest: 'lib/'\n }]\n },\n },\n }\n });\n\n grunt.loadNpmTasks('grunt-traceur');\n\n grunt.registerTask('default', ['traceur']);\n};\nNow we should be able to run grunt and any code contained within es6/src will be compiled by traceur and saved (along with source maps) to es6/lib.
Our main bootstrap file. This will be executed with node --harmony index.js and contains the following:
require('source-map-support').install();\nrequire('traceur-runtime');\n\n// Execute our code\nrequire('./lib/index.js');\nJust to get you started, here is a rather short and daft example.
\n// es6/src/module.js\nexport const fpRatio = Math.PI * 9.23 / 0.7734;\n\nexport function facePalmFactor(embarrassmentLevel, handSize) {\n return embarrassmentLevel / handSize * fpRatio;\n}\n// es6/src/index.js\nimport {facePalmFactor} from './module.js';\n\nconsole.log(facePalmFactor(10, 3));\nThen run the following to compile and execute:
\nGood luck! If you have any problems putting this together, let me know and I'll try to help out. I'm still feeling my way around all of this myself, so if you've spotted a mistake or want to suggest something, feel free to let me know in the comments or the various other ways to contact me.
\n","date_published":"2014-11-20T13:00:00.000Z"},{"id":"blog\\project\\2014-11-18.md","url":"https://misterdai.yougeezer.co.ukblog\\project\\2014-11-18.md","title":"Whatever happened to hubReports?","content_html":"Another little side project of mine bites the dust, but not due to failure. I discontinued this one due to hitting the limits of my hosting resources and a few other reasons. Read of if you're curious.
\n\nIf you have no idea what hubreports was, I'll try and provide a simple explanation. It was a side project of mine that accessed GitHub's API on a daily basis. Information was collected on each programming language (that GitHub recognised): Counts of repositories / users / code, top repositories and users, top new repositories and a few other bits and bobs.
\nFrom all the information gathered, several reports were generated as a website. From the website you could browse these statistics for github as a whole or a specific language (some features were restricted to the top 10 or so languages). Historical information was also retained, so you could see how a repositories number of stars changed over time or their chart position in relation to other projects.
\nOriginally I wanted to keep track of new popular repositories on github for my own blog posts. But the more I dabbled with their API, the more I wanted to create something larger out of it. I also wanted an excuse to put Node.js and MongoDB to good use, provided a good experience to gain knowledge with them.
\nI used hubreports as a learning exercise. It became too easy to pick various new trends and try them all out at the same time. Looking back, I should have stayed well away from AngularJS for this project. Without having the spare time to come up with a solution, it meant that the site wasn't going to be indexed by search engines correctly. With few ways to encourage visitors, it ended up getting pretty quite as no one knew it was there.
\nIt was a personal project, so with no relation to my day job there was never going to be any help forthcoming with any costs from there. Personally, I've got zero money spare for this sort of thing. On the odd occasion with my little pet projects, I'll splash out on a domain or some other cheap one off cost, but any regular cost would always be out of the question.
\nThankfully there were resources available to help with this to a degree. I took advantage of OpenShift's free tier to host the project and it worked perfectly...
\nEverything has a limit, especially stuff that's offered for free. Eventually hubreports had sucked up enough data to reach the memory limits on the OpenShift free tier. At that point the database server was no longer responding to any requested and I struggled to even get my data out of it manually. That meant that I could either try and slim down the database or call it a day.
\nI still consider the project a success. Sure, it didn't make me millions, but it did help my wrap my head around Node.js and move into more interesting areas with it. From the knowledge I gained, I felt confident enough to speak on Node.js and Express at a conference for the first time. Then off the back of that I worked with Matt Gifford on three Node.js related articles for Web Designer Magazine.
\nIt's a success because all I want out of my side projects is a learning experience. Sure if one of them ever makes me some money or secures me an amazing job somewhere, I'll be really happy. But that's never the reason I start any of them ;)
\nThere's something I'm playing around with. It'll be GitHub related again, simply because I love fooling around with their data and I'll also make use of OpenShift again due to my limited resources. I don't want to give much else away but it'll be a bit of useless fun and not very productive at all. My challenge with it will be to try and make use of Web Sockets and possibly a client side framework like React or something similar. Just don't hold your breath that it'll be out any time soon ;)
\n","date_published":"2014-11-18T13:00:00.000Z"},{"id":"blog\\article\\2014-07-25.md","url":"https://misterdai.yougeezer.co.ukblog\\article\\2014-07-25.md","title":"Twitter Bootstrap, customising CSS","content_html":"I've always wanted a way to customise Twitter Bootstrap easily, without having to overwrite existing CSS styles with my own or worry about how I would keep it up to date. So I decided it was time to try and put together a process to build my own Bootstrap CSS file using the .less files Bootstrap is built from. Here's what I managed to come up with.
First things first, you'll need to make sure you have your tools ready.
\nFor node and npm, check out their websites for more information on their installation. Under most circumstances, npm will be available after you have installed node. Once they are available, you can use them to install grunt and bower.
Execute this command
\nnpm install -g grunt-cli bower\nThe grunt-cli package provides the grunt command that we'll be using to execute our build tasks.
If you ran the above command and received an EACCES error message, then the user you ran npm with hasn't got permission to the directory that globally available modules are installed to. This is usually seen on Linux based systems as they'll default to /usr/local/lib/node_modules/. There are a few ways to approach this and the one I'd recommend the most would be to configure npm to use a directory underneath your users $HOME.
Execute this command
\nnpm config set prefix ~/npm\nAppend this to your ~/.bashrc file
export PATH=$HOME/npm/bin:$PATH\nIf you're still having problems with this, try searching for help with it elsewhere as there are various other approaches available. Most suggestions recommend using sudo, but I prefer not having to invoke root powers to install global modules.
We should now be ready to roll. Time to grab Twitter Bootstrap. We'll create a folder to house our project and ask bower to retrieve Bootstrap for us.
mkdir website\ncd website\nbower init\nbower install --save bootstrap\nmkdir webroot\nmkdir webroot/css\nThe bower init line is interactive and will ask you a bunch of questions. For our basic usage you should be able to go with the default for all of them, except you may want to consider the question [?] would you like to mark this package as private which prevents it from being accidentally published to the registry?, which I normally answer with Y as you can always change it later if needed.
Hopefully, you'll see bower produce messages about Bootstrap and any dependencies, like jquery. Once it has finished, there will be a new bower_components directory that contains Bootstrap and probably jQuery too.
We have Bootstrap and our tools at the ready but what approach are we taking with our customisations? I prefer to leave anything under bower_components untouched, to make life simple if we ever update anything underneath it (which is simple with bower update). The idea is the follow:
.less file, in our folder, that includes the Bootstrap .less files.Gruntfile.js for building our own .css file.This will provide us with the ability to exclude parts of Bootstrap that we may not be using, slimming down the size of the .css file produced. Plus, the chance to customise the Less variables that control the appearance of Bootstrap, like its colours, sizes and grid. Following Bootstrap's approach closely for building means we'll retain their copyright / license banner, minimised .css file and the .css.map file for easier style debugging.
We're going to be using grunt and several of its task modules. It's always a good idea to keep track of these when installing them into your project, through creation of a package.json file. We'll use npm for the task.
npm init\nAgain, you'll be asked a bunch of question. If you want to make sure that you never accidentally publish this to the package registry, add a "private": true" to the package.json file.
It's a good idea to check what Bootstrap is using, to protect yourself from any changes them may make to their build process. Within bower_components/bootstrap/Gruntfile.js you will find lines that declare the CSS build tasks.
// CSS distribution task.\ngrunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);\ngrunt.registerTask('dist-css', ['less-compile', 'autoprefixer', 'usebanner', 'csscomb', 'cssmin']);\nFrom the registered tasks we can build a list of modules to install and task definitions to duplicate. We can also skip certain items, if we don't need them. In this post I won't bother with less:compileTheme as I want the standard Bootstrap for customisation, plus I'll skip the csscomb task as that is used for CSS code style formatting. This gives us the following list:
Those are our grunt task configurations and the module names. We now need to check bower_components/bootstrap/package.json file, as it lists the modules installed and their versions, allowing us to easily match module names against the grunt tasks.
"grunt": "~0.4.5",\n "grunt-autoprefixer": "~0.8.2",\n "grunt-banner": "~0.2.3",\n "grunt-contrib-cssmin": "~0.10.0",\n "grunt-contrib-less": "~0.11.3",\nNow we'll install those module versions for our own use.
\nnpm install --save-dev grunt@~0.4.5 grunt-autoprefixer@~0.8.2 grunt-banner@~0.2.3 grunt-contrib-cssmin@~0.10.0 grunt-contrib-less@~0.11.3\nOur modules are ready, we now need to prep our own Gruntfile.js and drop in our customised versions of the tasks we're mimicking from Bootstrap. Create Gruntfile.js in our project folder and open it up in an editor, along with bower_componets/bootstrap/Gruntfile.js. Look for the following tasks:
Then we need to take a few steps to customise it for our usage.
\ncssmin.docsless.compileThemeautoprefixer.docsautoprefixer.examplesUpdate configuration
\n// in less.compileCore\nfiles: {\n 'webroot/css/<%= bspkg.name %>.css': 'webroot/css/customboot.less'\n}\n\n// in less.compileCore.options\nsourceMapURL: '<%= bspkg.name %>.css.map',\nsourceMapFilename: 'webroot/css/<%= bspkg.name %>.css.map',\npaths: '<%= bspath %>/less'\n\n// in autoprefixer.core\nsrc: 'webroot/css/<%= bspkg.name %>.css'\n\n// in cssmin.core, note we remove the "-theme" related line\nfiles: {\n 'webroot/css/<%= bspkg.name %>.min.css': 'webroot/css/<%= bspkg.name %>.css'\n}\n\n// in usebanner.options\nbanner: '<%= banner %>'\n\n// in usebanner\nfiles: {\n src: 'webroot/css/<%= bspkg.name %>.css'\n}\nAfter these changes, your Gruntfile.js should look like this:
module.exports = function(grunt) {\n grunt.initConfig({\n bspkg: grunt.file.readJSON('bower_components/bootstrap/package.json'),\n bspath: 'bower_components/bootstrap',\n banner: '/*!\\n' +\n ' * Bootstrap v<%= bspkg.version %> (<%= bspkg.homepage %>)\\n' +\n ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= bspkg.author %>\\n' +\n ' * Licensed under <%= bspkg.license.type %> (<%= bspkg.license.url %>)\\n' +\n ' */\\n',\n less: {\n compileCore: {\n options: {\n strictMath: true,\n sourceMap: true,\n outputSourceFiles: true,\n sourceMapURL: 'bootstrap.css.map',\n sourceMapFilename: 'webroot/css/bootstrap.css.map',\n paths: '<%= bspath %>/less'\n },\n files: {\n 'webroot/css/bootstrap.css': 'webroot/css/customboot.less'\n }\n }\n },\n autoprefixer: {\n options: {\n browsers: [\n 'Android 2.3',\n 'Android >= 4',\n 'Chrome >= 20',\n 'Firefox >= 24', // Firefox 24 is the latest ESR\n 'Explorer >= 8',\n 'iOS >= 6',\n 'Opera >= 12',\n 'Safari >= 6'\n ]\n },\n core: {\n options: {\n map: true\n },\n src: 'webroot/css/bootstrap.css'\n }\n },\n cssmin: {\n options: {\n compatibility: 'ie8',\n keepSpecialComments: '*',\n noAdvanced: true\n },\n core: {\n files: {\n 'webroot/css/bootstrap.min.css': 'webroot/css/bootstrap.css'\n }\n }\n },\n usebanner: {\n options: {\n position: 'top',\n banner: '<%= banner %>'\n },\n files: {\n src: 'webroot/css/bootstrap.css'\n }\n }\n });\n\n // Loading our grunt modules\n grunt.loadNpmTasks('grunt-autoprefixer');\n grunt.loadNpmTasks('grunt-banner');\n grunt.loadNpmTasks('grunt-contrib-cssmin');\n grunt.loadNpmTasks('grunt-contrib-less');\n\n // CSS distribution task.\n grunt.registerTask('dist-css', ['less:compileCore', 'autoprefixer', 'usebanner', 'cssmin']);\n\n};\nWe're almost there! One last step before we can execute grunt is the creation of our webroot/css/customboot.less file. The contents of which will be exactly the same as bower_components/bootstrap/less/bootstrap.less so take a copy of that file and rename it for our use.
Let's do this. It's finally time to run grunt and execute our dist-css task.
grunt dist-css\nThis should output something similar to:
\nRunning "less:compileCore" (less) task\nFile webroot/css/bootstrap.css.map created.\nFile webroot/css/bootstrap.css created: 131.45 kB → 131.5 kB\n\nRunning "autoprefixer:core" (autoprefixer) task\nFile webroot/css/bootstrap.css created.\nFile webroot/css/bootstrap.css.map created (source map).\n\nRunning "usebanner:files" (usebanner) task\n? grunt-banner completed successfully\n\nRunning "cssmin:core" (cssmin) task\nFile webroot/css/bootstrap.min.css created: 132.64 kB → 109.39 kB\n\nDone, without errors.\nWe did it! In our webroot/css folder are the following:
bootstrap.css: Our customised Bootstrap CSS file.bootstrap.min.css: Minimised version of our custom Bootstrap.bootstrap.css.map: For debugging our CSS.customboot.less: Our Less based customisations of Bootstrap.Taking our customboot.less file, we can now trim Bootstrap a little by simply commenting out parts that we aren't currently using. For example, you might not be using the alerts or progress bars. Rebuilding now results in a working Bootstrap file that's a little bit lighter. If you start using those components, you can simply uncomment them and rebuild.
// @import "alerts.less";\n// @import "progress-bars.less";\nPersonally, I often like to use Font Awesome with Bootstrap, meaning that Bootstrap's glyph icons won't get used. So I'll comment it out // @import "glyphicons.less";, saving myself ~10 kb of CSS and avoiding any chance of loading the icon font.
How about we change some colours and sizes? Just peep inside bower_components/bootstrap/less/variables.less for the variables available and append your changes to the bottom of our customboot.less file.
// This will not look nice!\n@body-bg: #efe;\n@font-size-base: 12px;\n@headings-color: red;\n@navbar-height: 100px;\nSince we're operating in the land of Less, you can always start using it to create your own CSS in addition to Bootstraps. Or even create new CSS rules that are based off Bootstraps existing variables. That way, if you change a core Bootstrap colour, it'll be reflected in your own rules that use it.
\n","date_published":"2014-07-25T13:00:00.000Z"},{"id":"blog\\publication\\2014-07-24.md","url":"https://misterdai.yougeezer.co.ukblog\\publication\\2014-07-24.md","title":"Contributed to Web Designer #225","content_html":"If you happen upon an issue of Web Designer magazine issue 225, why not grab a copy. For one, it's always got some great content, but issue 225 contains a sprinkling of myself within it as I've had two mini tutorials published from a super hero team up between myself and Matt Gifford, who provided me with the opportunity in the first place.
\n\nThe main theme of the issue is building HTML5 based games, but if you checkout the bottom right hand corner of the front cover, you'll see that there's also a feature article on Node.js. This is one I contributed to by writing two of the short tutorials.
\n![\"Photo](\"/images/blog/2014/07/24/article.jpg\")
Unfortunately the magazine missed out on the opportunity of a sales boost from having my beautiful face gracing it's pages. Instead you'll find my name tucked away on the contributors list on page 4.
\n![\"Photo](\"/images/blog/2014/07/24/contributors.jpg\")
Don't expect any spoilers, if you want to see the complete article then go and grab yourself a copy of Web Designer Magazine issue 225. Apart from taking a walk to your local shop who may sell a copy, there are a few other ways to get one:
\n\n\n\nHopefully! I really enjoyed working with Matt on the article and the challenges involved. I've no idea what my chances are of getting a similar opportunity again when it comes to a magazine but I'll probably look at posting more on my blog and perhaps trying to submit some tutorials to some of the popular sites out there.
\n","date_published":"2014-07-24T13:00:00.000Z"},{"id":"blog\\speaking\\2014-06-20.md","url":"https://misterdai.yougeezer.co.ukblog\\speaking\\2014-06-20.md","title":"Video - All aboard the NodeJS Express","content_html":"For my first ever go of being a speaker, I jumped in at the deep end. Lots of people, popular subject, lots of cover within the time limit, loads of nerves and a sprinkling of technical issues. Now you good people get to watch, as a deer caught in headlights presents his talk covering Node.js, NPM and Express at Scotch on the Rocks 2014.
\n\nViewer discretion is advised:
\nThanks to @SOTR (the Scotch on the Rocks team) and @ukfast for recording my talk.
\nAlso, Matt Gifford (monkehWorks) who was the conference staff member assigned to my talk. Simply because, at the time of writing, we've got the closest to the 50 minute limit (1 minute 1 second under) ;-)
\nIf you've any questions related to the talk, I'm happy to answer them. Feel free to comment here, on the video itself, Twitter or via my contact page.
\n","date_published":"2014-06-20T13:00:00.000Z"},{"id":"blog\\speaking\\2014-06-10.md","url":"https://misterdai.yougeezer.co.ukblog\\speaking\\2014-06-10.md","title":"Scotch on the Rocks 2014 - As a Speaker","content_html":"I recently gave my first talk at a conference. It was covering Node.js, it's package manager npm and the framework Express. The conference was "Scotch on the Rocks 2014". This post shares my experience of being a first time speaker, before going up to speak, during the talk and what happened afterwards. Be warned, it's a lengthy story...
\n\nWait... before I go any further, let's go back... to Scotch on the Rocks 2011 (Apex International Hotel, Edinburgh, my 3rd Scotch) to the end of the second day. I was standing around waiting for my work colleagues as we had to leave before the final sessions to catch our flight. Andy Allan, the man who is SotR, came over to me for a quick chat, generally see if I had enjoyed the conference and questioned if I'd ever thought about speaking.
\nAt that moment, the thought had been planted, it just took a few years to grow (plus now you know who to blame). I've never remembered to ask Andy why he asked, I'd like to think it was the way I carried myself on the Guitar Hero night at that same conference (only joking, but I did rock). For whatever reason, it was now there in my head.
\nUnforunately there was no Scotch on the Rocks for 2012, the fantastic people behind it were simply too busy at the time.
\nThen came Scotch 2013 (my 4th). Scotch was back on the schedule but it didn't look like I was going to be able to attend, I again toyed with submitting a talk but couldn't think of a topic I'd like to present on. Some had suggested my CFTracker project (something else that sprouted from previous SotR's), but I didn't feel comfortable with it since it wasn't very active anymore. In the end I was very lucky and thankful for two amazing people who managed to sort out accommodation and a ticket as an attendee again.
\nScotch on the Rocks 2014 was announced and the call for speaker submissions was due to start. That seed planted by Andy finally sprouted into life, partly due to thinking that without speaking I wouldn't get to attend. At the time I had been getting into Node.js, using it to power a little side project called hubReports (monitoring github statistics). I figured if I shared my experience with Node, especially getting my head around the differences from other server-side solutions, it'd make a good basis for a presentation.
\nI got in! Part of me had doubts that I would, due to being a first time speaker. All I can think of is that I picked the right topic, title and didn't have a half bad summary to get selected.
\nI'm the kind of guy who has nerves of steel, up until the moment you should be nervous of is right around the corner... Around two hours before I was due on I started feeling nervous. I barely ate anything in the food put on for lunch, walked around aimlessly for a bit and then settled down in a corner of the bar with Kev McCabe. After pottering around with my slides for a bit I ventured back to my hotel room with an hour left but getting more nervous by the minute. I figured doing a run through in my room would help, except I didn't manage to get that far before stopping myself.
\nFirst thing that helped was reminding myself that this wasn't an interview or a test, the people who were going to show up wanted to hear what I was going to say. Secondly, I'd given up a lot of my free time to constantly research what I was going to speak on so I convinced myself that the content was good enough. Then with about half an hour left I strolled over to the CAB desk so the heroic Rob Parkhill could keep an eye on me and make sure I didn't do a runner
\n@misterdai no way. Where are you? In coming to good you down... Looking forward to your preso!
— Rob Parkhill (@rob_parkhill) June 5, 2014The 'Show and Tell' session came to an end and I walked over to the man that is, Matt Gifford. As well as speaking at the conference in the morning, he'd been tasked with being my CAB member for my talk. He got me geared up, on stage, plugged in, ready to rock and more relaxed since we're usually clowning around in GTAV every week ;-). So it had begun...
\nIt felt like a slightly rocky start, getting used to being up on stage and everyone listening. But the nerves started to settled and I felt like I was getting into it. Until... my laptop display messed up. Normally it would be displaying the current slide, next slide, timer (for pacing) and notes for the slide. Except 10 to 15 minutes into my talk, all that vanished and I felt my stomach pitch.
\nI didn't want to stop, waste some unknown amount of time trying to fix it or start asking for everyone's patience while I panic. So I just kept going and somehow managed to get through it all. Everyone I spoke to said I did a very good job, a lot of them couldn't tell I was nervous or a first timer. Even fewer appeared to have any idea that I had my notes disappear on me. Up on stage though, I felt pretty shaky, struggling to remember what was next, the link between slides and the points I was supposed to be making. Didn't remember to get my water out before starting and felt pretty dry.
\nThankfully I made it through to the end, letting my code examples pad out the time until Matt gave me a 5 minute warning. I finished up and switched to my "Thanks for listening" slide and got stunned by the applause! My head was so wrapped up in presenting that I totally forgot that I'd probably get one, as thanks for the information I just shared, and it totally shocked me that I even forgot to display my end slide.
\nOf course I had a few minutes available to ask for any questions and got a very sensible one about Express templating and how it worked. Unfortunately part of the audience decided to leave, not that quietly, which caused a cascade effect of others leaving. I was gutted that I didn't get more questions while on stage but at least I answered the one (had many more asked off stage thankfully).
\nDear attendees. If a speaker is answering a question please don't get up to leave and make a lot of noise. Bad form. #sotr14
— Matt Gifford (@coldfumonkeh) June 5, 2014It felt like such a rush clambering down off the stage. I really didn't know what to do with myself and my head was buzzing from believing that I did a pretty good job. Amazing to see tweets in response to my talk and others commenting in person as I walked around in a daze ;-)
\n@misterdai Well done on the talk. You came across really well :) also liked the NotBen refs!
— Sally Jenkinson (@sjenkinson) June 5, 2014Good taster of node.js from @misterdai #SOTR14
— Adam Cameron (@dacCfml) June 5, 2014You would not have known that was his first conference talk! @misterdai just confidently explained Node.js at #sotr14
— Claire Brotherton (@abrightclearweb) June 5, 2014There have been some blog posts from others at the conference, all good in my opinion so far :)
\n\n\nI still must confess, that even with the enthusiastic words of David Boyer, I don’t have a use-case scenario for using node.js in my head yet – on a dev server, sure, essential – but haven’t got a project where it would work on a production server yet. One to keep in mind though.\nTom King via his blog
\nThis was the presentation I was most looking forward to, and David delivered the goods. What surprised me was that it was his first time presenting, and his notes disappeared from screen 10min into the presentation. He held it together well (I did not notice a change in presentation quality at the 10min mark, for one thing), and he's convinced us to get Node.js installed (which we'd need to do for Grunt.js anyhow) @ work and see what we can do with it. Nolte had it installed and running and doing stuff during the presentation itself.\nAdam Cameron via his blog
\n
When putting my presentation together, I started out constructing the slides as I went along. This definitely didn't feel right for me (may work for others) and it felt like I wasted a lot of time and thought. Eventually I decided to cat brain > dump.talk the entire details of the talk from my head to a single file, then start splitting it apart and matching it up with slides. I felt this approach worked really well.
My laptop isn't the best ;) but I could have spent more time trying to test / configure / fix it before. It didn't want to mirror displays in an easy (and non-buggy) way and I managed to break my bluetooth dongle on my way to the conference. Which meant no wii-mote for controlling the slides.
\nA printed version of my slides + notes as a backup would have been useful and a pdf copy so they're separate from the browser based presentation.
\nA top quality tip from John Whish, who I met at a previous Scotch just before his own first ever conference talk. I'm guessing my nerves distracted me and I left it in my bag, didn't really want to rummage around for it half way through so struggled on with a very dry mouth and throat.
\n@misterdai @coldfumonkeh my advice: backup everything, get water, say if you want questions only at the end (e.g. you have a lot to fit in).
— John Whish (@aliaspooryorik) June 3, 2014Dear presenters at every dev conference ever:
Your code examples need to be super high-contrast and MASSIVE, or they're worthless. #sotr14
— Laura Kishimoto (@chicgeek) June 6, 2014I've yet to find out if Laura attended my talk but I hope the text was large enough, I even had one comment that my terminal text was too big! Her point about high-contrast is probably valid to parts of my presentation. Code within my slides weren't using the best theme and I could have also picked a better scheme for Brackets too.
\nI felt like I failed a bit with my live coding. Again, I'll lay most of the blame on the laptop, since it wouldn't mirror the displays I had to crane my neck to see the code on the large screens. Plus, I'd geared everything towards 16:9 and the stage screens were unfortunately 4:3, kept losing the edge off my slides and editor.
\nOriginally I had a node-webkit powered presentation kit but I chickened out from using it. I put it together so I could avoid having to drop out of the presentation slides since it had the following features:
\nWith some more polish, it'd be a fantastic way to demo everything.
\nNumerous people helped me along the way with little comments and tips. My awesome family & friends, Matt Gifford (especially this post of his), Rob Parkhill, Andy Allan (seed planter), Guust Nieuwenhuis and numerous others.
\nHeck yeah! Except for the nerves, which I managed and will be better next time, I really enjoyed the whole experience. The only thing that would stop me speaking would be cost and possibly time away from home. I've a zero budget for this sort of thing and normally restrict myself to "Scotch on the Rocks" only, because I love it and I can usually get my employer to help. Anything I can get to, and back from, on the day would be doable, or conferences who cover travel+hotel (I'll eat cheap :P).
\nBottom line, I've got the bug and it wants me to present again :)
\n\n","date_published":"2014-06-10T13:00:00.000Z"},{"id":"blog\\article\\2014-02-15.md","url":"https://misterdai.yougeezer.co.ukblog\\article\\2014-02-15.md","title":"DocPad","content_html":"As I've mentioned previously on my blog, I've jumped ship from using Wordpress.com to a DocPad produced static site that is hosted on GitHub using their "pages" feature. In this post I'll walk through the basic steps I took to get up and running with DocPad.
\n\nYou'll need to have Node.js and NPM installed before you go any further. Once you've sorted that out, we'll continue.
\nFirst, you'll need to open up a command prompt and type the following command.
\nnpm install -g docpad\nNote: If you run into any permission problems you may need to slap a "sudo " infront of it.
\nThis installs docpad as a global command that'll now be available where ever you type it. From here you'll need to create a directory to house your docpad development area and then get docpad up and running.
\nmkdir geekonomics\ncd geekonomics\ndocpad run\nAt this point, docpad will provide you a list of skeletons you can base your site upon. These include the HTML5 Boilerplate, Twitter Bootstrap, various flavours of them and a few others as well. For the sake of finding our way around docpad, let's make like a jellyfish and go with "No Skeleton".
\nDocpad will now go about grabbing all the Node.js modules your new site will use and create the basic folders. When it has finished, it'll load up a load web server and tell you the address (usually http://localhost:9778). Don't expect to find much there, yet...
\nWe picked the "No Skeleton" option, so docpad has given us a blank canvas to work with. If you go to the site as it stands, you'll just get a "Not Found" message.
\nTaking a look at the folder we've run docpad within, you'll see that it's created a few folders and files. These are pretty important going forward so I'll briefly explain each of them.
\nLet's get started. Fire up an editor of your choice, create a file src/documents/index.html and get creative with some HTML content within it. Once you've saved the file, checkout your command prompt that should still have docpad running. You'll see some activity where it spotted the file you created and regenerated the site. Confirm this by refreshing your browser http://localhost:9778.
Before we go any further, I'd like to mention template engines. Docpad supports a diverse range of template engines via plugins, which are easy to install and use. For this post I'll initially be using one that adds support for embedded CoffeeScript. You'll first need to stop docpad (Ctrl+C) and then run the following command to install the plugin.
docpad install eco\nNow rename src/documents/index.html to index.html.eco and edit the contents to include something like:
<p>It's all fun and games.</p>\n<p>Generated on: <%= new Date().toString() %></p>\nFire docpad back up with docpad run and go to your browser and refresh. You should now see our same old index.html page with a date outputted. Docpad saw that your file ended with .eco and processed it with the embedded CoffeeScript plugin. It then chopped the .eco off the name when it created the final index.html file within the out directory. Clever ;-)
You could of course leave the file as index.html if you've no need of any dynamic content during generation. I only did this as an excuse to desribe the template engine before we moved onto...
Remember how I mentioned that src/documents was a special place. Well every (text based) file that lives in that folder can have metadata associated with it. We do this at the top of the file (like our src/documents/index.html.eco) between two lines of --- and writing some YAML or you could use CSON if you indicate it with --- cson at the top.
---\ntitle: "Welcome to the jungle!"\nlayout: "default"\n---\n<p>It's all fun and games.</p>\n<p>Generated on: <%= new Date().toString() %>\nNow when docpad generates the page, it'll internally carry the data you've specified... and throw an error. Why!? Because we've used a special metadata item of layout and set it to "default". This tells docpad that we want to wrap the output of this file within a layout file. We'd better go and create one then as src/layouts/default.html.eco. Make sure you add that .eco to the file name and throw in the follow as the contents:
<html>\n<head>\n <title><%= @document.title %> | My Website</title>\n</head>\n<body>\n <h1><%= @document.title %></h1>\n <%- @content %>\n</body>\n</html>\nWe're getting somewhere now! Refresh and you'll see that your content has been injected into the layout file we've created. Now we could have numerous pages that use this layout, which should save us a lot of time. If you've other layouts you'd like to use, simple create them within the layouts folder and specify them in the metadata of the document. It's even possible to have nested layouts.
\nsrc/documents/pages/about.html
---\ntitle: "About me"\nlayout: "page"\n---\n<h2>About me</h2>\n<p>Some interesting facts about myself...</p>\nsrc/layouts/page.html.eco
---\nlayout: "default"\n---\n<p>Page: <%= document.title %></p>\n<div class="content">\n <%- @content %>\n</div>\nIn the above example, the about page would be injected into the page layout before it's then injected into the default layout. You could use this to provide a similar layout for a set area of your site (e.g. pages, posts, projects...) compared to other areas of your site.
\nThere are a few methods available to get your posts out of wordpress. However, I decided to make my life harder and do it manually. I won't go into the process I put myself through in detail but it involved the following steps:
\nIn the end I had a folder full of markdown files named after their ID: /posts/*.html.markdown
\n","date_published":"2014-02-15T13:00:00.000Z"},{"id":"blog\\gaming\\2014-02-12.md","url":"https://misterdai.yougeezer.co.ukblog\\gaming\\2014-02-12.md","title":"XBox Avatars","content_html":"I get quite a few hits from people coming here looking at an old post about XBox avatar images. I decided to update it a little by adding a simple form that'll let you type in your gamertag to display the images and provide the URL's.
\n\n\n![\"XBox](\"http://avatar.xboxlive.com/avatar/MisterDai/avatarpic-s.png\"){kind=avatar}
\n ![\"XBox](\"http://avatar.xboxlive.com/avatar/MisterDai/avatarpic-l.png\"){kind=avatar}
\n ![\"XBox](\"http://avatar.xboxlive.com/avatar/MisterDai/avatar-body.png\"){kind=avatar}
\n This post looks at the top 10 JavaScript projects on GitHub that were created in the last 30 days. I'm using my hubReports project for the information and then looked into each entry to learn a little more about them. I've also linked each entry to its GitHub page and hubReports statistics page. This should be the start of a series of posts that'll I'll endeavour to put out monthly.
\n\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nPutting a smile on my face and my screen at the same time. This is a CLI, Node and Browser module for returning an ascii character based "face". That's all there is to it :-). I love how it has taken the number one spot and the fact it has had pull requests.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nA bitcoin (BTC) wallet for your terminal using Node.js. It uses bitcoind for the backend but is compatible with other cryptocurrency RPC servers, so it can also operate as your litecoin, dogecoin and other wallets.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nMax Ogden with another entry in the charts. This time it's for a taco, his attempt at creating a "taco themed" PaaS for Node.js servers. He mentions that it's still early days (alpha quality), so if you do try it out, be careful and be sure to help him iron those bugs out.
\nThe goal is to automate / configure everything to avoid the need to SSH in and configure stuff yourself. Checkout the repo page for more details and his feature wishlist if you're interested in helping out.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nA possibly controversial entry from Sean Haufler. It's the source code for his Chrome Extension, which is designed to enhance the Yale Bluebook site with the ability to sort courses by average rating and workload. This is after Yale decided to block a website that did the exact same thing. See his blog post for more details.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nLightTable is a JavaScript (I think...) based IDE and this is a plugin for it that adds support for Ruby. Jakub Arnold states that it's simple at the moment but indicates that it'll grow more powerful as he takes it further.
\nnote from this point on, the order won't match that on hubReports due to certain issues.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nThis project appears to focus on binding data between your frontend and backend modules, using HTML attributes. Initially we're shown data-binding similar to what you'd experience in AngularJs, applying a HTML attribute to an input box and HTML elsewhere, type in the box and the data magically updates in the respective places. We're then shown an example of "live-updating", having a Node.js web app keep the browser side bind updated with any database changes of the server-side data item.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nAnother one from the amazing James Halliday (a.k.a. SubStack). This is a Node.js powered backend to serve a git repository over http. Create a repo or use an existing one and then fire this project up. You've then created a http server you can (at the very least) push to and clone from. It also makes mention of supporting your own git-{receive,upload}-pack implementations or it can make use of system versions.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nA handy extension to Chrome's DevTools. It adds a shortcut tab to the elements sidebar-pane which will display a list of DOM elements that have been marked by having the HTML attributes inspect=true, inspect or data-inspect set. I've yet to try it out myself but many a time I've disliked having to dig through the DOM to find certain elements, it's nice to have a way to highlight them via an attribute.
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nThis is a client side JavaScript library for browsers in the vain of jQuery. But not just any browsers, "Evergreen Browsers". What are they? Tom Dale has a great blog post detailing it which is definitely worth a read, but to quickly summarise it is a browser that updates itself without prompting the user (e.g. like Chrome updates). So for a project like this, it can provide essential jQuery-like methods using a lot less code as it won't worry about older browsers that require manual updates (read: linger around too long).
\nhubReport{:.btn .btn-sm .btn-primary} GitHub{:.btn .btn-sm .btn-info}
\nNot sure if this entry should have made it into the charts, but GitHub decided it was 85% JavaScript based. The server side of it is written in Python though. It's a web application designed to help you find whiskys you'd hopefully like via an open database it accesses. You can also try out a live version of the web app if you're tempted to have a tipple.
\n","date_published":"2014-02-07T13:00:00.000Z"},{"id":"blog\\article\\2014-02-06.md","url":"https://misterdai.yougeezer.co.ukblog\\article\\2014-02-06.md","title":"From Wordpress.com to DocPad","content_html":"I've moved away from WordPress.com for hosting of my blog. Due to a combination of wanting more control over my site (and not having to pay for some of that control) plus the chance to try out some of these static site generators that are available for Node.js
\n\nMy first step in migration was to grab an export from WordPress. Easily enough to achive through the dashboard and selecting the options to export. This produced an XML file with all my pages, posts and comments. My only issue with the resulting XML was WordPress's source for each of my posts. Each was HTML based, still including their shortcode tags (not much of a problem) but without any paragraph tags.
\nAfter toying around with some static site generates and investigating other potentially related projects like Ghost, I settled on DocPad. It appeared to be very popular in comparison to other similar projects and I found the documentation very useful.
\nI ended up feeling much more in control of my site than when I've used a CMS / Blogging platform. While I do miss having a front-end to create content easily, it's nice having such a flexible system and simplified hosting requirements.
\nIt's all static :) Don't need to worry about any effort trying to boost performance or stressing over a database.
\nThis one isn't really the fault of DocPad, more of an issue with the Markdown parsers available. I really like Markdown, but wanted just a little extra control. There's a few other flavours of Markdown available, like Maruku and the "Extra" versions. Of which, I liked the idea of being able to specify attributes for the generated HTML the most.
\n{:.img-thumbnail}\n<img src="image.png" alt="Fake image" class="img-thumbnail">\nPlus inline HTML was a must. Unfortunately for me, I couldn't find a decent parser for Node.js that supported this extra syntax and allowed inline HTML. Markdown-js was the best I stumbled across but didn't support the inline HTML. In the end I modified the library to prevent it escape HTML characters (except within code examples). Then I replaced the "Marked" module used by a docpad plugin to process markdown to HTML. Worked in the end ;-)
\nThere's an RSS plugin available. I would have liked to use it but it didn't seem flexible enough to allow me to only use the initial part of a blog post in the feed, instead of the whole article. Instead I went with an XML template that creates the feed itself, allow me the extra flexibility when constructing the RSS feed.
\nWith just over 100 posts, DocPad takes a long time to regenerate on my slightly old laptop. Not especially the fault of DocPad but an annoyance for me when updating my site. I'm still finding my way around DocPad, so I may have contributed to the generation time in some way.
\n","date_published":"2014-02-06T21:30:00.000Z"},{"id":"blog\\project\\2014-01-26.md","url":"https://misterdai.yougeezer.co.ukblog\\project\\2014-01-26.md","title":"hubReports: Project review","content_html":"hubReports is a side project of mine. It's a site that gathers data from GitHub on a daily basis and then presents it via the website. I went live with the latest interation of it on November 1st 2013 and thought it was time to review how I think it did and where to go next.
\n\nThe project had previously existed under a different domain but with the hubreports name still and a slightly different focus. After rewriting the project, adjusting its target, I felt ready to go public.
\nFirst week page views (all stats mentioned are from Google Analytics) total 1,172 followed by 1,444 the next. Not a bad start but that was with a lot of tweeting, Google plus posts and a blog post. The big factor of the launch was being featured in the "StatusCode" weekly newsletter, issue #46, from Peter Cooper of JavaScript Weekly. Off the back of that I hit 6,161 for that week and a second week of 5,287.
\nI didn't receive much in the way of feedback except for a few comments from people on Twitter. It seemed to be liked as there were plenty of tweets that simply shared the site, which also helped pull in more visitors. The lack of more in-depth feedback did make me wonder which parts of the site were working well and which needed the most attention.
\nThis year so far, the site gets around 300 to 200 page views a week. Not amazingly busy but considering this whole project was based on teaching myself new stuff and better techniques, I'm reasonably happy with that number.
\nEarly in the project I decided to use AngularJS. There were a few reasons behind this, including some planned features being easier to implement and trying to keep the bandwidth usage to an absolute minimum. Mostly because of my hosting budget (zero). Unfortunately, AngularJS based sites aren't easily indexable by search engines as they require JavaScript. There are a few techniques I've seen that provide server rendered versions or data to search engines, but I haven't looked into those yet and don't know if any would be out of reach for my available resources.
\nNot being easy to index for search engines makes the site very difficult to find. The majority of visitors are refered from the Statuscode newletters, blog posts and tweets.
\nNo hard feelings towards GitHub, couldn't have done hubReports without them, but they went and created a weekly newsletter for trending repositories. That's going to cut into my expected audience a little but probably wouldn't have made much of an impact.
\nI have all this data, but I'm not entirely sure what the best method for display it is. I've also certain features planned (allowing language / repo / user comparisons) but without any feedback I've held back on implementing them as I'm unsure on the best way to display the data. Purely based on my worry on how the rest of the existing site is being received.
\nThere was a "News generation" feature planned, I haven't had chance to work on it enough. It was to be used for the basis of weekly newsletters for each "top / specially selected" language that hubReports monitors. Having those newsletters available, I believe, would increase the regular audience of the site.
\nhubReports gathers all of its data from the GitHub API. While having the advantage of making my life easier, there have been the odd bugs with the API that'll cause headaches in my data (missing repositories / users) or failure of a collection for that day. I'd much prefer to be working with the data from the GitHub Archive. But that isn't quite on the cards from my initial investigation. Mostly due to the fact that it's a lot of data to process and I haven't the available resources to constantly process the feed for statistics, without impacting the hubReports site itself.
\nEven though it made my life difficult with search engines, it made my life easier when it came to putting the site together.
\nThrowing this project together allowed me the chance to work with: Node.js, MongoDB, OpenShift hosting, CDN's, AngularJS, Grunt, Express and a few others. While I've toyed around with some of this stuff already, it was nice to have a set purpose to aim for and apply them to.
\nWhere will hubReports go from here? I've decided to focus on a few areas that I felt let the project down:
\nAny comments on any of this is more than welcome. But if you think the whole project is pointless, it may not be worth saying so as I value the site primarily as a learning experience, so it wouldn't be entirely constructive if you did ;-)
\n","date_published":"2014-01-26T21:30:00.000Z"},{"id":"blog\\speaking\\2013-12-18.md","url":"https://misterdai.yougeezer.co.ukblog\\speaking\\2013-12-18.md","title":"Speaking at Scotch on the Rocks 2014","content_html":"Let me just state that again as you may need to double check it as much as I did. I’m speaking at Scotch on the Rocks 2014, taking place in Edinburgh on the 5th and 6th of June 2014.\n
\n![\"\"](\"/images/blog/2013/12/18/logo_change_grey.png\" "\\".img-thumbnail.center-block\\""){kind=logo}
Scotch on the Rocks is a conference held in Edinburgh, Scotland. It’ll be covering topics in the following areas:
\nHeld at the Hilton Edinburgh Grosvenor on June 5th & 6th 2014. It’s a fantastic conference that’s been around since 2005 (want more history?), originally focused on ColdFusion (a.k.a. CFML) it has expanded to cover other languages, development techniques and other web development related topics. The awesome learning experience aside, it also has a brilliant social atmosphere with plenty going on outside the main conference hours.
\n![\"\"](\"/images/blog/2013/12/18/p1260670.jpg\" "\\".img-thumbnail.center-block\\"")
It’s a privilege to be speaking at SotR14. I’ve managed to attend the conference on four previous occasions (2009, 2010, 2011, 2013) and thoroughly enjoyed it every time (which should be obvious from the photo). The speakers have always been fantastic, the organisers know how to put on a great show, I always come back with a head bursting with ideas and found the other attendees an amazing bunch. Having learnt so much from attending, this year I thought I’d try my hand at speaking instead.
\n![\"alt\"](\"/images/blog/2013/12/18/nodejs.png\" "\\".img-thumbnail.center-block\\"")
I’ll be presenting my talk titled “All aboard the NodeJS Express”. It will start with an introduction to Node.js, followed by its amazing package management tool (NPM) and then showing how to bring in Express to create a basic site. Why am I qualified to talk about this? I have a project called hubReports, which is built using Node.js and Express (with a sprinkling of MongoDB and AngularJS), collecting information from GitHub on a daily basis to produce language, repository and user charts. Alongside that I’ve used Node.js for various other tasks, inside and outside of my day job.
\nIt’s scary enough being in the same line up as the mighty Bruce Lawson (Opera), let alone some of the other speakers (I won’t mention names as some have yet to be announced). I will say that they have a fantastic line up of speakers covering a nice range of topics. For myself, as a first time speaker at this kind of event, it’s a little bit intimidating looking at the caliber of the line up but I’ll not worry myself until I know who I’m sharing a timeslot with ;-)
\nIf you’re attending SotR14 and tempted by my session, feel free to mention any areas of my topic that you’re most interested in. Hopefully I’ll be able to either include it, expand on it or brush up and chat about it afterwards. :-)
\n","date_published":"2013-12-18T12:53:25.000Z"},{"id":"blog\\project\\2013-11-11.md","url":"https://misterdai.yougeezer.co.ukblog\\project\\2013-11-11.md","title":"Properly introducing... hubReports","content_html":"I’ve finally released a version of my github report site "hubReports" that I’m happy with. This post covers how this little side project came into being, what it grew into and where it’s going.\n
\nBack in November 2012 I was playing around with the github API to try and monitor new CFML based projects for my open source update posts. I liked the idea of tracking some of the statistics (stars / forks) available for each repositories and the idea of “charts”, for example: Top 20 Starred repositories overall. This spawned a little side project, resulting in reports like this:
\n![\"\"](\"/images/blog/2013/11/11/hubreports-old.png\" "\\".img-thumbnail.center-block\\"")
Originally it was a manually executed job, written in ColdFusion, run on a weekly basis. It produced a set of static HTML reports with trends shown as sparklines for each aspect. Eventually I had it monitoring 5 selected languages.
\nFrom there I started rewriting it with the idea of running it daily. I also took the opportunity to learn something new and threw NodeJS, MongoDB and AngularJS into the mix. Things went well and I had a few early alpha versions but the hosting I was using had some issues that prevented me taking it much further.
\n![\"\"](\"/images/blog/2013/11/11/hubreports-alpha.png\" "\\".img-thumbnail.center-block\\"")
After that, I went idle for a while. I took some time to learn more about NodeJS and saw some changes planned for the github API that would be of use to me. Then came the current iteration of the project…
\n![\"\"](\"/images/blog/2013/11/11/hubreports-home.png\" "\\".img-thumbnail.center-block\\"")
http://hubreports.yougeezer.co.uk
\nThis does mean that you might not find yourself on the hubReports site as I only monitor those who appear in the charts. I haven’t got access to enough API calls and storage to monitor everything ;-)
\nThere are still some features I’d love to add to the site and currently working on. They include stuff like:
\nApart from the my spare time I’ve managed to avoid having to pay out anything. The site is running on OpenShift, which provide 3 “gears” for free. 1 instance runs the MongoDB for storing all the information collected and the other 2 host the NodeJS based application. It’s an awesome service and I’m so grateful that it’s available for trying out little projects like these. There are two factors to note. If the site gets too popular, it may struggle to cope. My OpenShift setup runs on a single gear currently and set to scale up to 2 if things get busy. After that point, it’s all down to optimising the code further or working out how to cover the cost of scaling further. The other issue is data retention. At some point down the line, MongoDB instance will hit its allowance and stop accepting any more data. From there on, I’ve some tricks to compress the data down, remove non-changing statistics where I can but they’ll only carry me onto a certain point. After that, certain repositories and users will have to be removed if they haven’t been seen in the “charts” for a long enough period. Finally, older data would have to be expired or costs will be involved. Why am I rattling on about this? Just so people know that the site could go through some teething issues or even disappear if it can’t scale up to the task. Not due to my lack of trying ;)
\nGo on! Give me some feedback! I’d love to hear what you think. The whole project was spawned out of a little need of mine, plus a desire to try out NodeJS, MongoDB and AngularJS. But if anyone finds it useful, or thinks it could be with a few additions or changes, let me know. You can leave comments on this blog post, use my contact form or fill out the survey after visiting the site itself.
\n\n","date_published":"2013-11-11T12:50:12.000Z"},{"id":"blog\\article\\2013-06-14.md","url":"https://misterdai.yougeezer.co.ukblog\\article\\2013-06-14.md","title":"My Adobe ColdFusion wishlist","content_html":"Here’s my wish list for any future versions of Adobe ColdFusion. It’s partially inspired from what Adobe stated at their SotR13 keynote. Some of it may have already been covered by their roadmap and some parts are wishes for improvements to existing features. I’ve not thought much about the new mobile features that Adobe are aiming for, simply because I’d like to see this stuff in action first and don’t really know how much usage I’d make of it in my day job.\n
\nAdobe always seemed to try and sell ColdFusion for “Rapid Development”. That’s great but if you want to boost that further, make it easier to do the development tasks that us developers should be doing. Help us with solutions (guides, software, scripts etc…) to improve deployments (from dev to staging and production), do unit testing and CI. Mike Henke has a "Cloudy with a chance of tests" project that helps developers get started with this sort of thing. But what if Adobe worked with developers to make this more standard and an optional part of the “developer” install?
\nHaving spent a bit of time in the world of NodeJS, I love how nice it feels to only bring in a module for some functionality when you need it. I’d think this would probably improve performance in some areas as well as possibly allow for easier deprecation and removal of old features.
\nI can understand that this is always a tricky one to approach. If ACF was more modular in nature and allowed developers to create their own modules that could operate as normally named tags / functions, we’d have a nicer solution for deprecation. Take "ParameterExists()" as an example, if it’s removed from a new version of ACF and a customer wants to upgrade but still needs the tag (lol), they could easily hire a developer to create a module for it. You could even allow overwriting of existing function, with your module code reimplementing old behaviour on top of the new version of the function. I’m sure some would abuse this to create something horrible, but for the more sensible developers / customers, it’d allow the rubbish to be removed from the engine.
Kind of leading on from the Modular nature above. A package management tool would work wonders for ColdFusion. Especially if it came with an open standard for projects to support for easy installation or inclusion into an existing project. Adam Tuttle’s Ramen looks good but something official would be even better, especially if it was web and command line based.
\nI love me some CFScript. Tags are great for my view templates but script feels much nicer when it comes to the grunt work. Pretty sure that Adobe have stated several times that they’ll achieve parity with the tags but it always seems to get pushed back to CFNext+1.
\nThere are probably a lot of things that CFML projects always reimplement. If Adobe went through some of the major projects, found out what these were and included built in solutions, they’d make for some happier developers and improve development time. Plus there are certain things that projects have to go digging into Java or abusing bits of ColdFusion to get at. If it’s something simple or some kind of information, it’d be better for everything if it was exposed officially instead of being left to go digging for.
\nAt SotR13, Adobe did talk about the importance of security and I hope they really do focus on this.
\nThese are the people who have the experience with deploying ColdFusion for multiple customers, trying to maintain all those instances and making sure they’re secure. If Adobe put more effort into working with these providers, it might provide insight into changes that’d make everyone’s life easier and more secure when it comes to deployment.
\nThis is one of the things I really like about Railo and I’m not expecting Adobe to implement the idea in the exact same way but it’d be nice to have the ability to separate out settings / administration at a lower level than just instance wide.
\nWarning: This bit will get a little rant-ish due to CFTracker ;)
\nBetter monitoring and instance inspection! Some people out there (points towards the internet) find CFTracker a useful tool for monitoring their Adobe CF servers. While that makes me happy, it also boggles my mind to think that a poor developer with a full time job, wife and 3 kids could manage to create something useful that Adobe haven’t thought about feature stealing from. I don’t expect them to try and include something at the level of FusionReactor/Analytics, SeeFusion or this new Morpheus4Railo thingybob. Those products have money, teams and time behind them. But my little side project… come on, seriously?
\nP.S. Adobe, if that’s you reading this, I’m happy to have money thrown at me to help you out in this area. K, thanks, bye. P.P.S. If not, any other company? ;)
\n","date_published":"2013-06-14T12:41:09.000Z"},{"id":"blog\\conference\\2013-06-12.md","url":"https://misterdai.yougeezer.co.ukblog\\conference\\2013-06-12.md","title":"The Ben Nadel Mask of SotR13","content_html":"Eventually I’ll write up a summary post on my thoughts of Scotch on the Rocks 2013, but until then I wanted to share this magical moment. It all began when I realised that Ben Nadel wouldn’t be making an appearance at SotR13. If you don’t know who he is, apart from being an awesome developer and prolific blogger, he has a tradition of taking photos with people and doing a thumbs up pose. These pictures are then posted as part of his blog header, randomly being displayed.
\n\n![\"\"](\"/images/blog/2013/06/12/bennadelblog.png\" "\\".img-thumbnail.center-block\\"")
No Ben for 2013 meant no photo opportunities! I did jokingly suggest a cardboard cut\nout but it didn’t get picked up on. So, come the final day before SotR13, I quickly found a decent picture of Ben facing straight forward and printed it out. Then during my 8 hour train journey to Edinburgh, I carefully crafted the mask out of a “Contractor” neck lanyard loop, some thin cardboard and the excess sticky paper from around some Moo CFTracker stickers I had.
\nI honestly had no idea how well people would take this daft idea as I usually only meet them at the conferences and sometimes haven’t had much chance to socialise. Gave Ben Nadel the heads up (accidental pun!) on the mask, just to be sure he was okay with things and then waited for a good time to strike…
\nThat moment was near the end of the first day. With some time in hand before Bruce Lawson’s session started, I sat down behind James Allen (big Ben Nadel fan :P), put the mask on and tapped him on the shoulder. Awesome reaction and it lead to the first picture…
\n![\"\"](\"/images/blog/2013/06/12/guust.jpg\" "\\".img-thumbnail.center-block\\"")
Then quickly, before it made it up on Twitter, Guust and I went into the FuzzyOrange room. Guust, camera ready, walked up to Andy Allan and started saying that he thought Ben Nadel couldn’t make it. My cue to sneak up and grab Andy for a classic Ben Nadel pose…
\n![\"\"](\"/images/blog/2013/06/12/andy.jpg\" "\\".img-thumbnail.center-block\\"")
I’d have been bonkers not to take the mask to the free bar. So in I strolled, focusing on grabbing a drink and finding people I know. After some fooling around between ourselves, things had to escalate ;) Just as the free bar was closing, Matt Gifford announced a special guest who’d be willing to pose for pictures, Ben Nadel (myself behind the mask).
\n![\"\"](\"/images/blog/2013/06/12/free.jpg\" "\\".img-thumbnail.center-block\\"")
It was such a good laugh. Loads of people came up for a photo, with the fantastic James Allen as official “Not Ben” photographer. From there we progress to the main hotel bar, fooling around with the mask, others having a go at wearing it and posing with more people. You can see all the pictures in the:
\nThe Wacky Adventures of Ben Nadel
\nThe end of the last day of SotR13. Some people had left but there were still quite a few of us staying for another night. Yet more opportunities to use the Not Ben Nadel Mask. It all started out similar to the previous night, more pictures but mostly with anyone we missed. Then a totally random moment occurred that made us step everything up a gear. A father and his little boy came over, with the Dad asking if his boy could try on the mask, so we let him…
\n![\"\"](\"/images/blog/2013/06/12/little.jpg\" "\\".img-thumbnail.center-block\\"")
The Mum of the family kept asking “But who is it?…” with the Dad appearing to not be worried. At this point I was laughing so much I was crying and had to steal away the camera to show some of the others. This spurred us on to photo bombing of the mask into pictures (foreground and far background), recreating the lift scene from the Gangnam Style music video and taking to the street for some extra madness.
\nIt came to a point where James and myself were drained from the whole experience. Laughed out, running low on inspiration and starting to run out of time. We kept talking about trying a Harlem Shake but didn’t think we could convince enough people as it’d need a decent section of the bar. In the end it started to come together. Opening sequence cast:
\nClosing shake cast then included the additions of:
\nAll together producing one incredible Scotch on the Rocks 2013 final moment…
\n\n\nEventually this was followed up with this lovely video :)
\n\n","date_published":"2013-06-12T11:25:10.000Z"},{"id":"blog\\article\\2013-05-22.md","url":"https://misterdai.yougeezer.co.ukblog\\article\\2013-05-22.md","title":"CF9: onRequestEnd Vs. CFDocument","content_html":"An odd thing happened to me on the way to the end of my request… I bumped into CFDocument, caught up on old times, but without realising I managed to end up back tracking a few steps, to a place I had already travelled through. Here is my story of a weird behaviour between CFDocument and onRequestEnd().\n
\nOur opening scene contains a simple Application.cfc file. It’s using onRequest to capture the output from the requested file and then onRequestEnd to embed it in a layout file. Everything goes to plan and requesting index.cfm throws it’s content into layout-html.cfm. The world’s a happy place and we all move on with our lifes… until CFDocument comes along. It’s decided that we need a PDF version of the page, so we simply switch to another layout file, pretty similar to the last apart from a CFDocument tag wrapping around the whole thing.
\nEverything starts out normal, until you get to CFDocument being executed. That’s where the oddity begins by firing onRequestEnd a second time. Here’s a walk through of what happens:
\nonRequest fired.
\nonRequestEnd fired.
\nonRequestEnd fired (again?).
\nRequest ends.
\nStrangely enough, you won’t get any errors. The 2nd CFDocument doesn’t appear to do anything and thankfully won’t attempt to run onRequestEnd again, avoiding a loop.
\nOur Application.cfc file, as mentioned above has been written to capture the output from onRequest and use onRequestEnd to apply it onto a layout file. Some logging code has added to onRequestEnd to highlight what’s going on.
\n<cfset this.name = 'AFunnyThingHappenOnTheWay...' />\n\n<cffunction name="onRequest" returntype="void">\n <cfargument name="thisPage" required="true" type="string" />\n <cfsavecontent variable="request.content">\n <cfinclude template="#arguments.thisPage#" />\n </cfsavecontent>\n</cffunction>\n\n<cffunction name="onRequestEnd" returntype="void">\n <cfset var msg = '' />\n <cfif Not StructKeyExists(request, 'onRequestEndCount')>\n <cfset msg = '<hr>' & Chr(10) />\n <cfset request.onRequestEndCount = 1 />\n <cfelse>\n <cfset request.onRequestEndCount++ />\n </cfif>\n <cfset msg &= 'onRequestEnd() Fired: ' & Now() & '<br>' & Chr(10) />\n <cfset msg &= 'Count in single request = #request.onRequestEndCount#<br>' />\n <cffile action="append" file="#ExpandPath('./log.html')#" output="#msg#" />\n <cfcontent reset="true" /><cfinclude template="layout.cfm" />\n</cffunction>\nAn awesome index.cfm file…
\n<p>This content is super fantastico!</p>\n<p><cfoutput>#Now()#</cfoutput></p>\nAnd our layout file using CFDocument.
\n<cfset msg = 'layout.cfm executed: ' & Now() & '<br>' & Chr(10) />\n<cffile action="append" file="#ExpandPath('./log.html')#" output="#msg#" />\n<cfdocument format="pdf">\n<!doctype html>\n<html>\n<body>\n <h1>Layout</h1>\n <h2>Content</h2>\n <cfoutput>#request.content#</cfoutput>\n</body>\n</html>\n</cfdocument>\nPut it all together and what do you get? onRequestEnd being fired twice. Here’s what you’ll probably see in log.html.
\n<hr>\nonRequestEnd() Fired: {ts '2013-05-22 12:37:09'}<br>\nCount in single request = 1<br>\nlayout.cfm executed: {ts '2013-05-22 12:37:09'}<br>\n\nonRequestEnd() Fired: {ts '2013-05-22 12:37:09'}<br>\nCount in single request = 2<br>\nlayout.cfm executed: {ts '2013-05-22 12:37:09'}<br>\nSo having CFDocument execute within onRequestEnd will fire onRequestEnd a second time. This doesn’t happen in CF8, haven’t tested CF10 as I haven’t a version handy at the moment. I believe this is probably related to the change in onRequestEnd behaviour in CF9. Where it’ll fire even after a CFLocation. Haven’t stumbled across any bug entries for this so far, but will log one for it if I’m certain no one has beaten me to it.
\n","date_published":"2013-05-22T11:40:28.000Z"},{"id":"blog\\article\\2013-05-21.md","url":"https://misterdai.yougeezer.co.ukblog\\article\\2013-05-21.md","title":"SQL Server: Creating XML","content_html":"Today’s little task was to grab some data from a database and create an XML file from it. So I decided to play around with the XML features in SQL Server (I used 2008 for this).\n
\nThe Microsoft documentation.aspx) told me that the “FOR XML” clause was what I’d need for the task. It comes in four different flavours, each with its own unique talents:
\nWhile I won’t delve into each other them, I’m sure the documentation would better explain, I’ll just focus on the ones I found useful. The first was PATH.
Being described as “a simpler way to mix elements and attributes”, it seemed like a good place to start as any. Tacking it onto the end of a query produce a simple XML structure, a row element per row returned each with child elements per column.
SELECT id, name\nFROM users\nFOR XML PATH\nGiving you the XML of…
\n<row>\n <id>1</id>\n <name>Bob</name>\n</row>\n<row>\n <id>2</id>\n <name>Jonesy</name>\n</row>\nThat worked out quite well but it’d be nice to have the “id” element as an attribute on the row tag. I’d also like to wrap a root element around everything.
SELECT id AS '@id',\n name\nFROM users\nFOR XML PATH, ROOT('Rows')\n<Rows>\n <row id="1">\n <name>Bob</name>\n </row>\n <row id="2">\n <name>Jonesy</name>\n </row>\n</Rows>\nWhat you’d like it to be named something else. You may have a specific XML structure that you have to comply with, so having each item wrapped in a row tag may not be ideal. Thankfully it’s simple to change by just adding the element name to the PATH as a parameter.
SELECT id AS '@id',\n name\nFROM users\nFOR XML PATH('User'), ROOT('Group')\n<Group>\n <User id="1">\n <name>Bob</name>\n </User>\n <User id="2">\n <name>Jonesy</name>\n </User>\n</Group>\n(“Yes, I can’t help myself with silly title names… sorry”) We’ve now got a root element for the group of users, but what group is it? It’d be useful to add an XML attribute to the Group tag but from what I could tell, that wasn’t possible via the ROOT option. So how about using a sub-query?
SELECT\n 1 AS '@id',\n (SELECT id AS '@id',\n name\n FROM users\n FOR XML PATH('User')\n )\nFOR XML PATH('Group')\n<Group id="1"><User id="1"><name>Bob<...\nWait… what? Well it turns out that when running my first examples in SQL Management Studio Express that it’d happily treat it as an XML datatype. But when using the returned data for anything else, it ends up as a varchar or similar string type. To work around this, I needed to use an additional clause of TYPE on the end of the FOR XML bit.
\nThe following shows an example of creating an XML document. One of the main differences is my use of FOR RAW on the outer query. This allows me to easily set the name space attributes for the root element.
\nSELECT\n -- Root element attributes\n 'http://www.w3.org/2001/XMLSchema-instance' AS 'xmlns:xsi',\n 'http://www.w3.org/2001/XMLSchema' AS 'xmlns:xsd',\n (\n SELECT\n -- Creating a default element\n (\n SELECT 0 AS ID,\n '' AS Name\n FOR XML PATH('Item'),\n ELEMENTS,\n TYPE\n ),\n (\n SELECT id AS ID,\n title AS Name\n FROM items\n ORDER BY id\n FOR XML PATH('Item'),\n ELEMENTS,\n TYPE\n )\n FOR XML PATH('Items'),\n TYPE\n )\nFOR XML RAW('Information')\nBelow is what’s returned
\n<Information xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">\n <Items>\n <Item>\n <ID>0</ID>\n <Name />\n </Item>\n <Item>\n <ID>1</ID>\n <Name>Item number A</Name>\n </Item>\n <Item>\n <ID>2</ID>\n <Name>Item number B</Name>\n </Item>\n <Item>\n <ID>3</ID>\n <Name>Item number C</Name>\n </Item>\n <Item>\n <ID>4</ID>\n <Name>Item number D</Name>\n </Item>\n <Item>\n <ID>5</ID>\n <Name>Item number E</Name>\n </Item>\n </Items>\n</Information>\n