G'day! I'm Glen

In today’s episode, we’re moving from RC4 to RC5. RC5 is reported to be the last of the breaking changes before Go-Live, so it’s worth upgrading.

Here’s some cool resources to checkout for further deep diving on the RC5 migration:

• The Official Guide
• A Practical Guide - cool deep-dive from the field

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the cheat sheet to follow along at home…

[ ] Update package.json with rc5 links (Ctrl-D is your friend)

• @angular stuff rc5
• forms to 0.3.0
• router to rc.1

[ ] Do an npm install to fetch the new packages
[ ] Run ng serve to prove the backward compatible action is working
[ ] Add app.module.ts in root.

In today’s episode, we’re moving from “page thinking” to “component thinking” as we explore nesting Angular components within one another.

It’s also time to start getting our Twitter vibe happening using some magic stuff from Semantic UI

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the cheat sheet to follow along at home…

[ ] Twitter - in component terms rather than page terms
[ ] ng generate component menu
[ ] Add the <app-menu></app-menu> markup
[ ] import { MenuComponent } from './menu';
[ ] directives: [ MenuComponent ]
[ ] Rinse and repeat for Feed
[ ] Add layout magic from Semantic Menus

Here are the CDN links for Semantic UI that I used:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" >

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>

Day 2 is now live and we hack some properties on our first component (as well as learn how Angular’s component model hangs together).

Three big ideas on today’s show:

1. Where everything goes in an AngularJS CLI application
2. What SystemJS is, and how it bootstraps your main app code
3. How Angular components are structured with html, css and components (think “backing beans”)

Lots of groundwork laid today for the next episode where we hack our first component tree.

I’m also updating a YouTube Playlist of all the episodes as they come out.

Cheat sheets below if you’re interested in following along at home.

[ ] We now have a Git Repo which I will tag day1, day2, etc
[ ] Review we introduced angular-cli ng new & ng serve
[ ] Talk through the directories
[ ] SystemJS - Bootstrapping our application
[ ] Main.ts bootstraps our App for the browser

Well I have to get marks for getting started.

The first episode is now live where I talk about NPM, VSCode, and the Angular CLI

Here’s the cheat sheet of the episode if you’re keen to type the commands we run through:

[ ] Download NodeJS and NPM from Nodejs.org
[ ] mkdir nodeme
[ ] npm init .
[ ] npm install –save lodash
[ ] npm install –save-dev gulp
[ ] npm install -g angular-cli
[ ] ng help
[ ] ng new twit-ng
[ ] ng serve
[ ] Download Visual Studio Code or WebStorm or IntelliJ
[ ] Quick review of what we’ve done

Tomorrow we’re talking about project structure and we get coding!

Ok. Let’s file this one under “bite off more than you can chew, then chew hard”.

I’m committing to produce 21 bite-sized episodes covering the basics of Angular 2 as I learn them. The general idea is that we can build a bit of community to encourage one another to dig deep for 21 days and get a good sense of the framework (one coffee at a time).

The 21 Day Plan for Learning Angular 2

My scratchy outline for the series is:

1. Getting Installed / Background on the JS community. Dev toolchain.
2. Inside a blank Angular 2.0 project. What all the files are. What lives where.
3. Writing your first component. Selectors, Templates (internal/external), Styles (internal/external)
4. Introducing (events) and [properties]
5. TypeScript quickstart
6. Models and Data Binding
7. Refactoring Components (parent/child)
8. Communicating between components
9. Introduction to Services and dependency injection
10. Unit Testing services
11. Routing architecture and basic menu action
12. Routing for deep linking with parameters to URLs
13. Working with Http and CRUD operations (and mocks)
14. Forms and Validation with Component Binding
15. Forms using the Forms Builder API
16. Material design
17. Integrating 3rd Party JS and Component Libraries
18. Working with Observables and Promises and Reactive Programming
19. Linting, Code Coverage and Quality Tools
20. Integration Testing
21. Bundling and Minifying with WebPack

It’s going to be super fun!

If you’re keen, head on over to my YouTube Channel, and subscribe to stay up to date with the action.

I’m going to try and blog up the outlines of the daily vlog here, but who knows how I’ll keep up.

Always up for a challenge…

Last week I did my first full day of hacking on an Angular 2 application. I’ve been wanting to get into Angular2 for a while, having hacked a bit of Angular back in the day.

I wasn’t a massive Angular 1 fan, but I really love what’s happening in the Angular 2 space. Having worked my way through the (excellent) getting started application, there’s a few things that immediately jump out at you.

Java/DotNet guys are going to love this!

To be honest, this is the first JavaScript framework I’ve used that feels immediately familiar for an enterprise developer - it feels entirely non-JavaScripty, designed for scale and (actually) feels very much like Enterprise Java.

What makes me say that?

• TypeScript is all kinds of wonderful. It’s not just “strongly typed JavaScript” - it’s an altogether more wonderful experience for an enterprise dev. You have real interfaces, subtypes, scoping, annotations - and all with great IDE support. It feels like JavaScript written for scale. And it must be - the Azure Portal rocks over a million lines of the stuff.
• Angular itself has a consistent framework feel - with all the things Java devs are used to - Annotations, Dependency Injection, Services, Taglibs, Mockability, Unit and Intergration testing.
• Components everywhere. I know everyone rags on JSF, but the component stuff in JSF 2.0 was really just so great. Binding a table to a List<Employee>. Oh baby. I can really see Angular developing an awesome ecosystem of that kind of thing. And writing components to do that sort of thing really is an “every dev” level of complexity - not for rock stars.
• Excellent documentation and a great style guide to get your application structured in a consistent way.
• Lots of momentum - have already found Stack Overflow answers to the common kinds of errors that I’ve encountered - but the error messages themselves are pretty great.
• Good CLI support. The existing angular-cli project gives you great bootstrapping and component template creation.
• Awesome IDEs. VSCode is a rocking cross-platform editor with completions, and WebStorm takes things to a whole new level (and is super cheap - or if you’ve already licensed Intellij IDEA all the same goodness is baked in).

So what’s the learning plan for a Java dev?

Everyone learns things differently - and you’re probably the best judge of what will work for you. But we all appreciate some motivation to get started, so feel free to follow along the path I’m blazing:

• Subscribe to my YouTube channel. It’ll pump you up. And I’m just about to start a 21 day series on Angular2 for Java Devs. It’s going to be dodgy. But I’m all about “don’t worry, be crappy” as a philosophy for taking action.
• The Angular 2 Quickstart on the Angular site is a great place to just get a taste
• The Tour of Heroes is a longer-form tutorial, but gives you a pretty good vibe for a larger Angular 2 app with some CRUD/REST action
• If you want to buy a resource, I’m really enjoying the Ng2-Book.
• Best of all.. commit to build a small hobby project! And blog your journey to keep us posted!

I know all the rage is around VMs and Docker these days, but there are still some of us that have to manage imaging real physical workstations - in my case the ones we use in our mobile training labs (for our rocking Aussie Git Course, for example).

In the past we’ve used Acronis SnapDeploy, but since our current version (4) wasn’t working on Windows 10, and the upgrade options were bamboozling, I decided to do a bit of a scan to see what’s been happened in the space in the last little while.

The end result is that we’ve moved to an Open Source cloning and imaging app called CloneDeploy, and it’s all kind of awesome.

What’s to love? Here’s eight things!

Well, for one, it it’s browser based, and runs fantastic on IIS and Windows 10. I really don’t want to have to boot a VM to run an imaging solution, and this one works just great out of the gate on Windows 10. Someone has taken the time to make that a great experience. Thank you, someone!

Secondly, the install process was completely turnkey. Run the exe, then point your browser at http://localhost/clonedeploy. Done. All the config is browser-based, in a nice friendly, responsive GUI.

Thirdly, I can easily change the paths for image storage locations onto a bigger disk. This is a big deal for me. My OS boots off an SSD, but I have big storage drives in there that are slower, but perfect for storing images. That’s all supported. And nicely documented.

Fourthly, it does a great job of compressing images. My typical workstation images compress down to about 10Gb which is Windows plus a bunch of standard training apps (VS Code, SourceTree, the Browsers, Markdown tooling, Java, Node, etc, etc). That’s pretty tidy for a reimage.

Fifthly, it runs like lightening being served off my old PC. Imaging is really superfast (a few minutes), and ditto for deploys. It looks like it’s using Linux partclone magic under the covers, but whatever it’s doing it’s super fast.

Our last Canberra Java User Group had a theme of “Debugging” and Tim gave a great talk based around the book “The 9 Indespensable Rules of Debugging”.

You can checkout Tim’s slides on github for a quick overview.

Lots of cool ideas in there - many that you’ve heard before - but a few really stuck with me:

• changing one thing at a time
• validating the change
• debugging at the finest point of granularity
• rubber ducking

Introducing The VLog…

I had my GoPro with me, so I thought I’d take the opportunity to vlog it up and give you a bit of a vibe for our local JUG and the stuff we talk about. It’s a little scratchy as I learn how Premiere works - but it’s a bit of fun.

I’m hoping to get into Vlogging a little more this year (now that I actually have time to edit the stuff), so please Subscribe to my Channel to get me in your feed.

If you live in (or near) Canberra, checkout our Meetup.com page, and make sure you come along to our next event (it’s on Android apps next month and it’s going to be a cracker!).

It’s been over 20 great years…

I’ve been in client-facing consulting for over 20 years. I started on the University Helpdesk in 1993 - and loved the client time, but was busting to use my programming skills. I took a job in R&D on Web tech and I’ve never looked back. Counting it off, I’ve been in Enterprise/Web Development for at least 20 years. Man, I must be old!!!!

That’s a long time to be hacking on enterprise software, in a mainly Government environment (with a few years hiatus for various Startup projects), so this year, with my wife back at work as a Clinical Psychologist, and with my recruiting company providing a steady (small) passive income…

I’m taking a gap year!

(Or a Sabbatical, if my parents ask)

“Life is short. Do stuff that matters.”

Or so the startup quote goes. And I think that’s right on.

I’ve worked on lots of great projects in my time, and they’ve given a bunch of users a bunch of joy. That feels great!

But I’ve also worked on a lot of software which, for one reason or another, never saw the light of day.

I’ve spend the last two years in the Windows Phone ecosystem, and I’ve had a (mostly) wonderful time. The UI is buttery smooth, the hardware is solid (a little too solid in the case of the Lumia 930), and the A list apps are (mostly) all there.

But it’s time to move back to Android. At least for the next season.

Here’s some of my thinking.

flickr photo shared by Janitors under a Creative Commons ( BY ) license

My next season is Java and Google-centric

I entered the Microsoft Mobile ecosystem because I was day-jobbing in DotNet (had a wonderful time, but that’s the topic for next time).

I picked up a Windows Phone because I thought it would be good to drink deep of the platform. And to be honest I was shocked how great the UI on Windows Mobile is - seductively good (and certainly miles ahead of Android at the time - circa ICS).

It was a fun season - even though I only created a few sample apps and nothing worth publishing. I learned heaps about WPF, Azure, Keystoning and other MS tech. And enjoyed my time on the platform.

In this next season, I’ll be doing tons of Java work and getting into Kotlin in a big way (a popular choice for Android devs, apparently). I’ve also started subscribing to YouTube Red and making plenty of use of my Chromecast.

It’s going to be a Java/Google deep dive. With a little Node/Azure on the side ;-)

Just a short post to document some of the things I came across in Windows 10 recently when trying to delete recovery partitions on a freshly migrated SSD boot drive.

Have you noticed that you can right click on the recovery partition but don’t get any delete options?

It’s time to roll up the sleeves and unleash some commandline magic. The basic gist is:

• Find the disk number and partition you want to delete in Disk Manager
• Run the DISKPART tool
• Make Magic Happen with Commandline ITPRO skills

Finding the Disk Number and Partition Number

First, you’ll need find the disk you want to re-partition. You can use the Disk Manager that comes up when you right click on “This PC” in explorer and select “Manage…”

See those “Disk Number” labels on the left? Make a mental note. You’ll need that info shortly..

Deleting Protected Paritions with DISKPART

Time to startup a windows commandline as admin. If you’ve never done that before, click on the Windows menu in the bottom left and type command. The search will display “Command Prompt”. Right click on that icon and choose “Run as administrator”.

I’ve never really taken the time to get on top of WCAG2, ARIA and all the cool accessibility stuff that’s surrouding the modern web. So it was time to set that right!

I spend the day yesterday with Pierre from Vision Australia doing their Web Accessibility Techniques training package.

It was great to get the skillset, but more importantly it was great to get the heart for this work and what a huge difference it makes for people who are blind, deaf or need low vision assistance.

And the basic changes are all so doable! Even for a accessibility noob like myself. And definitely within every developer’s reach.

flickr photo shared by davehalb under a Creative Commons ( BY-NC-ND ) license

Big Takeway: Good page structure is its own reward

I was really stressed that this course would mean a massive deep dive on html5 articles and sections and other major semantic restructurings to make screen readers happy. It turns out (that to screen readers at least), a lot of that stuff is just more clutter to read to users. And a lot of accessibility users don’t actually like them!

But using consistent heading levels across your app is a game changer. And easy to implement!

Start small: h1 -> h2 -> h3 - Just keeping consistent and making sure you only go down one heading level at a time. Using that as your semantic “page skeleton” for logical groupings makes everything way better for a screen reader user to navigate your site via hotkeys that move between headings.

And making good use of html lists for listy things, and consistent labels for your form elements can make a real difference. All things we are probably doing anyway!

I do love working in Markdown.

I find it gets me out of “edit mode” and into “create mode” a lot easier. No distracting formatting to obsess over, and just lots of clean text to work on. And I can edit it with anything.

In fact, I love it so much, I moved this blog to Hexo last year to give myself an experience of writing it in more seriously. And it’s been a great experience. Everything is just text!

I’ve just finished Wes Bos great (and free) course on Mastering Markdown - and I learned a whole bunch of new Markdown hacks and thought I’d share a few that were new to me.

flickr photo shared by othree under a Creative Commons ( BY ) license

Links Redux

I’ve definitely been doing linking harder, not smarter. I’ve been using the common version of Markdown linking that everyone knows and loves:

I'm loving the [Mastering Markdown](http://masteringmarkdown.com/) course.

Which is fine, but adds a lot of visual clutter, and isn’t very DRY. In the course I learned that you can use literals instead of links, then dereference them later. Which is awesome in reducing visual clutter AND making your links easier to update.

So now I’ve switched to this style to simplifying my world even more:

I totally love Austin Kleon’s books on creativity.

Love. Them.

If you haven’t read them, they’re a few bucks on Amazon, and a great pint-sized books on inspiration. I’m currently re-reading “Steal Like an Artist” - and every time I read his stuff I get inspiration for other spheres of my life, whether it’s music, business, faith, family, or, in today’s case, programming.

flickr photo shared by Austin Kleon under a Creative Commons ( BY-NC-ND ) license

I was reading stuff today about how you are the sum of your influences, plus a bunch of your own stuff.

And I got to thinking about my own programming genetics. Who am I the sum of when it comes to programming practices, style and approach?

I know who I would like to be like.

Beyond the FOMO: Your programming genetics

Everyone today is on the hussle to convince you of the “right” platform/tools/frameworks/process for your next app, and feverishly trying to infect you with a FOMO (Fear Of Missing Out).

“If you don’t embrace this new shiny thing, you suck and are doomed to fail.”

Last night we rebooted CJUG for 2016 and it just awesome. Peter McNeil has been sustaining this group for over 18 years and is finally taking some time out to finish renovating his house!!! Such a legend!

The good news is that a whole bunch of us are stepping to form a team to take it on this year. And the first meeting was a scream! If you’re keen to give a talk this year, make sure you touch base with us on the new Meetup page.

Great turnout last night, and had talks ranging from immutable functions, to PaaS, to HTML5 Games, to SmallTalks, to JEE, to Node, to the Web. It was an awesome night and great to see a bunch of new visitors and old friends.

This year is shaping up to be a cracker. We have talks coming together for the next few month including:

• Microservices with Play
• Java8 & Functional Java
• Reactive Java with Rx
• Debugging tricks and tips
• DevOps and Cloud
• BigData tools and landscape
• Android and Mobile Dev
• Midyear Flashtalks Redux
• < your talk here? >

It’s going to be a fantastic year of networking, sharing, and inspiration. If you live in Canberra, come on over and hang out!

For the longest time I’ve had this pretty terrible company website that has been grating on my nerves. It was your typically horrible WordPress template kinda thing, albeit with a fair bit of orange involved for extra horror.

Back in the day is was really quite swish…

But cover your eyes, people…

Let’s get static: From WordPress to Hexo

I spent the day yesterday going hard at converting it over to a static Hexo setup, with a modern template, and I couldn’t be happier with the result.

Not only is it now properly responsive, with mobile-friendly menus, I’ve taken the opportunity to learn exactly how you can use Hexo to develop your own reusable static site templates.

For the UI design, I purchased one of the official bootstrap themes, then did the heavy lifting of splitting it into a re-usabled Hexo template. The whole “find a nice template and make it your own” is really my ideal way to work.

$99 later, and I’m cut over.

I’ve just come from sitting my Microsoft exam 70-480 Programming in HTML5 with JavaScript and CSS3.

And I passed.

Super Yay! I’m now a Microsoft Certified Professional. Cue the applause!

flickr photo shared by PRINCESS THEATER - Raising the Curtain under a Creative Commons ( BY ) license

Um. Certification? Like, 90s style?

“Come on, Glen? What’s the go with that?”

I get why you’d think that. I mean, I’m mostly known as a Java guy, and more recently a JavaScript/Node dev.

But these days I’ve stopped thinking about platforms, and am more focused on being a better programmer.

Full stop.

Consistent with my reknewed love for the web, I’ve been having fun developing a little Google Tasks mobile app. My plan is to target Windows Phone since there aren’t a lot of good tasks apps on that platform - and because that’s the platform I run!

At the moment I’m really loving Ionic. It’s a framework for building Angular apps for mobile (build on Cordova), but gives you a ton of the nice mobile animations, hamburger menu templates, and lovely Angular-friendly wrappers for other mobile goodness.

Check out the progress:

Moving things offline with IndexedDb

One of the problems with the current batch of Google Tasks apps for Windows phone is that they don’t work well offline.

So I was on the hunt for storage solutions that would play nice in a browser env. LocalStorage was nice and simple (basically a key-value string pair), but I needed something with a little more power that I could query JS objects without a bunch of marshalling and drama.

Enter IndexedDb.

If you haven’t played with it before, IndexedDb is a super powerful client side storage API for the browser. You can store complex objects, index and query fields, access it from Web Workers, and even do transactions!

But the API. Oh, the API.

I’m so pumped about 2016.

So. Pumped.

I’m coming into this year with a super positive headspace.

Loving where I’m at. Loving where I’m headed. Knowing what I’m about.

That is a rare headspace for me! And potentially fleeting..

But most of all I’m loving my current vision for all the things I want to set my hand to this year.

It’s compelling (for me, anyway!).

flickr photo shared by Austin Kleon under a Creative Commons ( BY-NC-ND ) license

Compelling 2016: Learn. Teach. Wonder. Share.

I ran a number of Git courses in Australia last year - and I’ve totally loved it. The students were engaged; I loved working with developers; I even loved developing the courseware!

While working on Glen’s Invaders, one of the challenges was coming up with a nice letter-by-letter text reveal for Phaser Bitmap fonts. Gives it a more legit Space Invaders coin-op vibe.

I ended up with something like this:

Turns out the solution was relatively straighforward: making use of a custom timer to fire once for each letter, then rendering a substring from 0 to the lettercount.

IF you want to try this at home:

1. Setup a timer to fire every 80ms, and get it to fire once for each letter in your message.
2. Pass your timer function a bit of context (the message you want to render, the text object you want to render it on, and the counter for how many letters to render right now).
3. Inside your displayNextLetter() routine, use the substr function to grab the first X letters of the text, and render that.
4. Increment your counter to point to the next letter
5. Rinse and repeat

Easier to see than describe:

function create() {
    var message = "Glen's Invaders";

    var textObject = game.add.bitmapText(game.world.centerX, eighthScreen * 1, 'minecraftia', message, fontHeight);
    textObject.x = game.width / 2  - textObject.textWidth / 2;
    
    displayLetterByLetterText(textObject, message, function() {
        // stuff you want to do at the end of the animation
        // eg. this.input.onDown.addOnce(this.start, this);
    });
}


function displayNextLetter() {

    this.textObject.text = this.message.substr(0, this.counter);
    this.counter += 1;

}

function displayLetterByLetterText(textObject, message, onCompleteCallback) {

    var timerEvent = game.time.events.repeat(80, message.length, displayNextLetter, 
                                { textObject: textObject, message: message, counter: 1 });

    timerEvent.timer.onComplete.addOnce(onCompleteCallback, this);

}

Thought I write it up in case anyone needs to do this down the track.

This year, I’ve really been challenged by John Sonmez’s idea of “Become a Finisher“:

If you want to accomplish your goals, you need to learn to finish what you start. It really is as simple as that.

John’s big deal is “You’ve just gotta commit”. It’s called The War of Art.

And I’m not a shining example of this. But I’m aspirational. I did commit to building a game this year, and even though it took until December to make any decent progress, it’s actually happened! I’m a finisher!

I’ve just finished my first full-on, from scratch Phaser game. It’s called Glen’s Invaders.

I’ll wait while you play… Or just enjoy an animated gif below..

Enjoy it? I hope so.

It’s not special, but it’s fun.

And more importantly it’s finished. Totally good enough for a first game.

My little Space Invaders clone hit a wall:

How am I going to implement those bases?

The bases in the original invaders game had this cute way of incrementally “breaking down” on bullet collisions. In fact, one common strategy was to deliberately shoot a thin hole through them to fire at the aliens while hiding behind your base.

But how was I going to pull that off?

So far I’ve been working only with sprites. I can animate sprites, but I can’t animate my way out of this decomposing thing! Not without a very big spritesheet!

What I need is some kind of owner-draw sprite action!

Enter the BitmapData-backed Sprite

Phaser has this awesome BitmapData abstraction which basically gives you a Canvas to do your own drawing on.

But you don’t want to give up those cool spites and their cool collision detection. Turns out you don’t have to! You can back a Phaser sprite with your own bitmap and draw on it later. Just the ticket!

So I load my base png into a bitmap, then setup the sprite so it’s backed by the bitmap. Later on I can draw destruction “holes” right onto the bitmap, but still use the sprite for collision detection. Epic win!

As some of you may know, I’ve been working with Phaser lately to create my first HTML5 game has been too much fun!

My first serious project is a little port of Space Invaders - and it’s progressing with all kinds of win! Game programming is such a gratifying endeavour. You create, your run, (you debug), then you play! All from within your browser!

Brag shot of progress:

Looking forward to sharing it with you once I get the last few features in.

Setting up invisible walls

One trick that I’ve learned is how to handle detecting the edge of the world. In my case I want the invaders to move to the next line when they hit the edge of the screen.

As far as I know, there’s no way built into Phaser to do that, but one commonly recommended workaround is to create an invisible sprite on the edges of the screen and check for collision with that. I though I’d capture how I tackled it so I can google it later!

function createInvisibleWalls() {
    wallLeft = game.add.tileSprite((8*4), 0, 8, game.height, 'blank');
    wallRight = game.add.tileSprite(game.width-(8*4), 0, 8, game.height, 'blank');
    
    game.physics.enable([ wallLeft, wallRight ], Phaser.Physics.ARCADE);
    
    wallLeft.body.immovable = true;
    wallLeft.body.allowGravity = false;
    
    wallRight.body.immovable = true;
    wallRight.body.allowGravity = false;
}

In my case that blank simply points to an transparent png that is 8x8 like the rest of the game art. We create a tile that runs the full length on the left and right to get a “fake wall” for our collision deteaction.

Had a fantastic time running some cool Git Training for a Queensland company that runs a games studio. Very cool setting, and awesome devs too.

But it got me thinking… One of my goals this year was to write a small platform game. That goal is just not moving forward at all. It’s time to set that right!

So I did some googling…

And given I’m on a JS bender, it needed to be HTML5/JS based…

Voila!

I give you the most awesome HTML5 games engine ever - Phaser - and the best of all it comes with an excellent step-by-step tutorial which takes you step by step through writing your first platformer. Yes people, that “write a game” goal is now within your reach!

Stop it! Show me the sample game!

You can go check out the source on Plunker, or just dust off your cursor keys and get cracking on the game inlined below: (Note: you’ll need to click on it to give it focus - I’ll work out why down the track… )