(by AXDS)

Both are very similar but used in different situations. Both are build around ‘key=value’ relationships.

‘JSON’ stands for ‘JavaScript Object Notation’.
‘XML’ stands for ‘extensible Markup Language’.


  • (+) Fast, lightweight and compact.
  • (+) Same data types as Javascript.
  • (+) It’s documentation and design is simple and clear.
  • (-) Only supports a few data types.
  • (-) Sometimes syntax can be too simple.


  • (+) Can easily be split up and worked on my many different people.
  • (+) Can be used for all kinds of purposes. Very generalised.
  • (+) Support for namespaces.
  • (+) Can be manipulated and traversed using XPath/XQuery.
  • (-) More overhead than JSON. Resulting in a lot more words and space for the same information.

In general: JSON is better for lightweight scripting, XML is better for a secure ‘fixed’ markup.

Quickly create a ‘Website Viewer’ Android App using WebChromeClient.

(by AXDS)

Follow the bold words to speed up the tutorial 🙂

Create a new Android Studio Project. For this simple application a blank template will be a good choice.

Once it has all loaded replace the contents of the ‘mainActivity.xml’ file with:

<!--?xml version="1.0" encoding="utf-8"?--> <webview xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"></webview>

Add to the ‘AndroidManifest.xml’:

<uses-permission android:name="android.permission.INTERNET"> </uses-permission>

Replace nearly all the contents, don’t remove your package declaration of ‘mainActivity.java’ with:

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebPageLoader extends Activity
    final Activity activity = this;

    public void onCreate(Bundle savedInstanceState)
        WebView webView = (WebView) findViewById(R.id.webview);

        webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress)
                activity.setProgress(progress * 100);

                if(progress == 100)

        webView.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url)
                return true;


Connect your phone and run the application!

Display raw code in WordPress posts

(by AXDS)

Displaying some HTML code, inside of a post that renders out HTML, is tricky.

In order to display the code for viewing rather than to run, we need to wrap WordPress tags around it.








<div class="exampleDiv">Hello World</div>


The language can be selected to allow for syntax highlighting. The common languages are available such as ‘html’,’javascript’,’css’,’csharp’ etc. More are online.

How to: Create a WordPress post

(by AXDS)

The ‘Create a New Post’ button should be in the top right of the site. If it doesn’t appear you might not have author permissions in order to create posts.


Clicking this will take you to the post editor:


The image above shows the editor in the ‘Visual’ tab, this will give an idea of how the post will look. Sometimes this can be inaccurate, so take it as a rough estimate. The HTML tab allows you to create a post using element tags. You can also put scripts and code in this tab.


Once you’ve finished the post content, on the left hand side there is the menu for posting and tagging. Open up the ‘Categories & Tags’ section.


Pick or create some tags that are relevant to the post. This will allow the post to be categorised on the WordPress site,


Finally you can either preview the post, or go straight to the publishing



How to: AngularJS

(by AXDS)

Example: http://jsfiddle.net/jc5au247/

Angular is a JavaScript Framework that extends HTML with directives and attributes. When an Angular app is set up on an element it sets up a ‘scope’. The JavaScript deals with what happens to the values inside this scope. This is very useful for forms, inputs, or displaying data.

The AngularJS script can be referenced using:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Once the script has been added the functionality should be all there.

There are many ‘ng-directives’ that can be used inside HTML elements. All these are online.

The main directive is ‘ng-app’ which sets up an AngularJS section. This can be set to be for the whole page by including it in the <html> as <html ng-app=”myApp”> or inside any element.

For my example I’ll set it up in a <div>:

<div ng-app="myApp">

The next directive I’ll use is ‘ng-controller’. This defines a controller inside of the ‘ng-app’. This controller, once referenced, handles all the ‘ng-model’ elements included. The ‘ng-model’ elements just bind a name to the element so it can be used.

<div ng-app="myApp">
<div ng-controller="myCtrl">
<input ng-model="fullName">
<h1>My name is {{fullName}}</h1>
<div ng-controller="myCtrl">

Inside the ‘ng-controller’, a scoped variable name can be called using double brackets:


The AngularJS app is finished off by including script and calling a function to build a module. In this same script we can manipulate the controller scope.


//Sets up the App
var app = angular.module('myApp', []);

//Sets up the Controller
app.controller('myCtrl', function($scope) {
//Looks for the model 'fullName' in the controller and sets it.
$scope.fullName= "John Smith";


jQuery AJAX call to pass JSON to C# Method

(by AXDS)

Note: The C# method parameter needs to match the JSON key name.


public static void doSomethingCool(Object jsonDataName)


var jsonInnerData = {key1:value1,key2:value2};
var methodToCall = "webPage.aspx/doSomethingCool";
var jsonDataObject = JSON.Stringify({jsonDataName : jsonInnerData});

type: 'POST',
url: methodToCall,
data: jsonDataObject,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function ()
alert('doSomethingCool executed.');
error: function (XMLHttpRequest, textStatus, errorThrown)
alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);

How to: Google Maps

(by AXDS)

Example: http://jsfiddle.net/nLxqqx33/

Google Maps API works in a similar way to the Google Charts API.

The script is added:

<script src="http://maps.googleapis.com/maps/api/js"></script>

Create where the map is going to go:

<div id="googleMapLocation" style="height:500px;width:500px;"></div>

Remember to set the height and width of the div element. The Google map renders using percentage rather than pixels to work out sizing. Missing out the height and width from the div will show nothing, and look as though it hasn’t worked, but will actually produce a 0px * 0px map.

Similar to the Google Charts API the function that creates the map takes in the div location and map options as arguments.

var map = new google.maps.Map(mapDivLocation,mapSettings);

The list of all the map settings can be found online. The most common settings are the where the map should be centred and how much the map should be zoomed in at this place.

var mapSettings = {
center: new google.maps.LatLng(51.508742,-0.120850),

The functions that initialise the map needs to run after the page has loaded. All together it should look something like this:


<div id="googleMapLocation" style="height:500px;width:500px;"></div>


window.onload = function(){

function initMap(){
var mapLocation = document.getElementById("googleMapLocation");
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
var map = new google.maps.Map(mapLocation,mapProp);

This will produce a working Google Map.

Markers can be added to the map by calling the setMap function from the API (This would be inside the inside the initMap function after the map has been initialised:

 var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.508742,-0.120850),
title:"Hello World!";