Confessions of a Professional Developer

Recently I've been working on my new project Get JSON - I've had some brilliant responses from users on both Twitter and CodePen alike. One of my pens even got picked for the front page - something which I did not expect but am indeed truly grateful for.

Get JSON allows you to create ad-hoc data structures in JSON format and then pull them into either client or server side code for use within your application. It's great for semi-static lists, configuration info or indeed any data that can be modelled hierarchically.

I thought it might be a good idea to include the Pen whilst viewing the data so that other users have a "serving suggestion" showing how the data could be accessed and modelled. In order for this function to work it required making a call using oEmbed in order to retrieve the iframe info needed to get the Pen onto the page.

Upon investigation however I had significant difficulty getting this to work. Having tried several plugins to no avail I decided to simply write my own script to make the call to get the JSON containing the iframe code myself. Below is the code currently used in order to make the call to get the JSON containing the iframe code. Underneath the C# server side code is the JavaScript I used in order to get the Pen displayed on the page.

C# MVC 5 Controller

var request =
      WebRequest.CreateHttp(string.Format("http://codepen.io/api/oembed?&url={0}",
        codePenUrl));
request.Accept = "application/json";
request.Headers.Add(HttpRequestHeader.AcceptEncoding, "gzip,deflate,sdch");
request.Headers.Add(HttpRequestHeader.AcceptLanguage,
                 "en-GB,en;q=0.8,en-US;q=0.6,cy;q=0.4,ceb;q=0.2");
var json = string.Empty;
using (var response = await request.GetResponseAsync())
{
  using (var reader = new StreamReader(response.GetResponseStream()))
  {
    json = reader.ReadToEnd();
  }
}
ViewBag.CodePenDemoFrame = json;
return View();

JavaScript

var codePenJson = @Html.Raw(ViewBag.CodePenDemoFrame);
$('#codePenDemo').append(codePenJson.html);

Upload and Share ANY File!

On the odd occasion I need to share something with the world and it doesn't fit into the predefined file types of the major sharing sites. In order to overcome this problem I created http://tweet-file.com .
Tweet File lets you log in with your twitter account and upload a set of files (any type of files you like as long as they meet the fairly obvious terms and conditions). Then you can share the link with your followers.

All it takes is a few clicks and you're done!

Host external files for use with GitHub and CodePen

Tweet File is also particularly useful for sites like http://codepen.io and http://github.com that do not let you directly link to files without a paid account.

Simply upload your files to Tweet File and link to them as you would normally (All files on Tweet File are publicly accessible and indexed by Google) to host pictures for your GitHub readme.md files or pull them into your CodePen pens!

To save me looking this up again the modules for Angular JS are on google cdn and the full list can be found here

For general purposes though, the main ones to use are as follows (update version number where necessary):

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-cookies.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.min.js"></script>

This is just a quick tip, some may do this already but its something I've only just started doing recently and whilst I couldn't say for sure whether it's a GREAT tactic or not it's nevertheless better than a simple "Thank you" tweet.

When you get a new follower - especially if they're in Digital Marketing (Be it a freelancer, an agency, developer or designer) if they're on twitter they're probably engaged in other Social Media areas. What I like to do, instead of a thank you, is find their Blog, Website, About.me, Xee.me or something they've created on-line and Tweet about that with a "via @xxx" suffix and some nice useful Hash-tags.

Personally I can see this being positive on several fronts, firstly it shows you're engaged - they followed you and you helped to promote them - everyone likes to be promoted. It also shows some courtesy, after all they've been good enough to follow you so after following them back spread the love!

Secondly if you share something of theirs with a via tag they will see it and hopefully remember you - you've backed up their decision to follow you by doing something nice for them in return - this will hopefully stick in their mind and hopefully when they need help with something they might just remember you over and above those which didn't do anything or someone who just said "Thanks".

If everyone of your followers tweeted about something you'd done and you tweeted about each of your followers it will eventually create a positive feedback loop for those engaging and may even drive up your followers and theirs - its an all round win win and only takes a few seconds!

Introduction and Breakdown

Firstly let me start by saying that Single Page Applications are in their infancy. The technologies used to create then have been around for a while but with the advent of HTML and the coming of age of some core libraries they now seems to be going mainstream. By this I mean that your average developer should now have enough of the heavy lifting done that they can concentrate on business logic and plug-in syntax rather than build everything from the ground up!

Secondly a Single Page Application in this context can be thought of as:

 "A website that relies almost exclusively on Client Side technology to display and update user interface (UI) elements to provide a more fluid and context based User Experience (UX). Server side technologies tend to be used to query data (or create/update it) and returns data (usually JSON) NOT a rendered page."

Common Features of a SPA

With that sorted lets dig a bit deeper - the following list are common features used within SPAs:

• Client based routing engine
• Client based data-binding
• HTML Templates 
• Asynchronous Client-Server communication

Visual Studio & SPA

If you're lucky enough to be using Visual Studio 2012 you will be getting a starter template in a coming update details of this can be found on John Papa's blog here - I'm not going to even try and expand on this as it covers things from a Visual Studio stand point extremely well but rather I'd like to talk about SPA's and related technologies to fill in some background information which I've been scratching together over the past week or so. Incidentally John Papa's post will show you how to implement some of the technologies listed below using the SPA template - well worth a read to see how the technologies hang together even if you do not have or intend to use Visual Studio.

Technology & Frameworks

Javascript & AJAX Framework
We're going to need a good JavaScript framework for working with DOM elements & getting and receiving data. My preference (and the rest of the world it seems) is jQuery. if you've not used jQuery I strongly recommend learning it RIGHT NOW it will be your JavaScript crutch throughout this type of development.

jQuery Project Home
jQuery on NuGet
jQuery AJAX Documentation

Data Binding & Templating
When we make an AJAX request we're probably expecting our server to return data in JSON format. Once we have the data we need to BIND that data to some elements or a REUSABLE TEMPLATE. Microsoft package KnockoutJS for this purpose. In essence it allows you to declare (mark-up) your HTML using data- attributes on the HTML nodes. Knockout does this by implementing an MVVM pattern using observable objects.

What this means is that you have a JavaScript ViewModel that can be populated with JSON data returned from the server and bound to HTML to update the interface. Because knockout is bi-directional this whole process can also work in reverse and server updates can be issued from observed client-side events. This all sounds remarkably time consuming and complicated - the key thing to remember is that WHAT it is doing IS complicated but that complication is abstracted by using the library so that HOW you get it to do it is NOT complicated.

KnockoutJS Project Home
Knockout on NuGet
Learn KnockoutJS (Excellent interactive resource well worth using)
Knockout templates documentation

Client-side Request Routing
Whether you're from a Windows background or not the concept Server-side Routing has been around for a while (Common implementations include apache's mod_rewrite and the ASP.NET Routing engine).

Routing allows you to de-couple URL's from files on the webserver. In essence that means that you can navigate from a request to a resource on the server that is not necessarily located at that exact location BUT the server knows where it should go and ROUTEs it to the appropriate request handler.

So the request  http://somedomain.com/page/1/really-interesting-resource  could end up being routed by the server to a webpage or other resource that actually exists here http://somedomain.com/getPageData.aspx?id=1.

This helps us to make URL's human (and search engine) readable and can help with SEO rankings and making links more memorable.

Client-side routing takes this a stage further and uses the anchor mark # in the URL to "overload" the server-side route with client-side requests and navigation. Essentially this means you can make a request like http://somedomain.com/#/page/1 and have the client handle the request and make a server-side call for data and refresh the UI accordingly without a page refresh.

This creates create a better UI/UX in the long run as the web site appears to react very similarly to desktop applications and can update only the areas of the page that concern the request rather than redrawing the whole page.

SammyJS Project Home
Sammy on NuGet
Sammy documentation

Summary

I didn't intend this post to be quite as long as it has turned out to be, in short we've looked at the concept of Single Page Applications and the technologies that may be used to create one. In Part 2 I will be walking through some technologies and techniques that can be used to keep all these libraries under control, manage dependancies and helpers that make it easier to bring them all together. Some of these technologies include RequireJS, Microsoft TypeScript, the Durandal project (Nuget & GitHub)  and the Visual Studio Web Essentials plugin.

For the majority of my career I've been involved with the Windows stack of development products Visual Studio, SQL Server and so on. However From time to time I've had cause to get my hands dirty with some PHP coding both commercially and in a freelance basis.

Its been quite some time since I've used PHP but the other day a private client requested that I use it to deliver a website and I had to set about building a development environment for this on my PC. As it happened pretty much all the work could be done client side (jQuery, Google Maps API etc) so all I really needed was an IDE and the PHP interpreter.

There are really only 4 steps to getting a basic PHP environment setup which I've tried to detail below as succinctly as possible!

1. Download the software

PHP Binary Interpreter:
http://windows.php.net/downloads/releases/php-5.4.8-Win32-VC9-x86.zip

NetBeans 7.2.1 IDE:
http://netbeans.org/downloads/

2. Extract & add PHP location to PATH Environment variable
Create a directory for the PHP files something like:

C:\Program Files (x86)\php-5.4.8\

Extract the php zip file to the above directory.

If you're using Windows 7 hit "Start" and type "Environment" then click "Edit the system environment variables" when the search comes back - for me this is the second option appearing on the start menu.

In the "System Properties" window on the "Advanced" tab click the "Environment variables" button which is on the bottom right just above the "OK", "Cancel", "Apply" buttons.

In the "System variables" list (second one near the bottom of the window) scroll down until you see "path", left click this item and then click the "Edit" button. Scroll to the end of the text box (End key will work best here). Then type/paste the following:

;C:\Program Files (x86)\php-5.4.8

Modify the above accordingly if you've chosen to install to a different location. Ensure it starts with a semi-colon to "close" the previous variable.

3. Install & configure NetBeans
Run the NetBeans installer accepting all the defaults (or changing them where necessary). Open the IDE and then click "Tools" from the menu then Options then PHP. Click the "Browse" button next to the "PHP Interpreter" label and text box and navigate to the PHP directory you created earlier then click on the php.exe file and click "OK".

4. Reboot & Create New Project

Because we added an environment variable we should now close everything down and do a reboot. Once you're back into Windows start NetBeans and create a new project - choose the "Built in Webserver" option when prompted and you're good to go; write some PHP and then click the little green arrow to start!

After the initial flush of investments when signing up to Empire Avenue you may find it difficult to get as much interest in your shares as during the first few weeks. This can be frustrating but it is possible to generate continued interest with some savvy investing.

If you've not blown all your eaves on missions or upgrades consider investing in some of the Leader Board users. In effect these are "Top 100" lists for various social networks including those on Empire Avenue.

If you're looking for reciprocal investments I would suggest hitting the Portfolio Wealth section. This section is for those people/companies who are heavy investors (and therefore heavy users of EA). The interesting thing about these users is that they also tend to have high share prices and potentially a lot of Eaves to invest.

Follow this link and you should see the list:
http://www.empireavenue.com/leaders/wealth/portfolio

Once you're there go down the list clicking on names and hit the invest button and buy as many shares as you are able! Leave them a shout out or share the buy on a network to alert them to the fact you're buying and with any luck you'll get some investment back (This is more likely with these types of users as previously stated) - the earnings from your share sales can then be funnelled into buying even more shares from the same or other users on the board and hopefully create a positive feedback loop to keep your portfolio & wealth growing!

If you enjoyed this post please also consider buying a share or two of mine here:
http://www.empireavenue.com/bukaneer

A few days after writing this post I thought i would update it with a small graph of what this approach has done for my share price - please see the graph below, the red box shows what happened once I started investing a small amount of Eaves in each member of the Top 100 Portfolio Wealth users. I think it speaks for itself!