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>