May 2014

A Web Page for Reformatting JSON Text, using AngularJS

A little over a year ago, I published A Web Page for Reformatting JSON Text, which is a simple web page for pretty-printing JSON data. I'm now learning AngularJS, so as an exercise I reimplemented the page using Angular rather than the original's jQuery.

This version is a little nicer than the original in the following ways:

  • You can type or paste text into the top box and the formatted JSON immediately appears in the lower box. There is no longer a need to press a Format button because Angular's data-binding mechanism takes care of automatically updating the output whenever the input changes. (This is possible with jQuery too, but takes more work.)
  • You can control the indentation width of the formatted JSON.
  • When the input is not valid JSON, the output panel changes its background color to red when displaying the error message.

Here it is: JSON Formatter with AngularJS

Short link: http://bit.ly/formatjson

You can look at the full source here: Gist

or as a fiddle: http://jsfiddle.net/oldmankris/qK9LK/

If don't know anything about AngularJS, but are curious about it, look at the source and note the following:

  • The magic of Angular comes from the ng- attributes attached to HTML elements. There is no need for a separate template language or explicit DOM manipulation.
  • The ng-app attribute attached to the html element sets up the module that contains our app's code.
  • The ng-controller attribute attached to the div element defines which controller function to use.
  • The ng-model attribute attached to the first textarea element binds its content to the inputText variable
  • The ng-bind attribute attached to the second textarea element binds its content to the value of the outputText variable, and the ng-class attribute binds its CSS class to the value of the outputClass variable.
  • The ng-options and ng-model directives on the select element bind it to the indentOptions and selectedIndentOption variable.
  • In the controller code, we set initial values for the inputText, indentOptions, and selectedInputOption variables, and then use $scope.$watch() to update the values of outputText and outputClass whenever any of the inputs change.

OS X Server Local Websites for Web Developers

OS X Server is now available free of charge for members of Apple's iOS Developer Program, so I have it installed on most of my machines. Unfortunately, having OS X Server installed complicates the use of the built-in local Apache web server which I use for web development. I've figured out how to make things work the way I like, and I have written this article so that I can find the information again when I need it. Maybe it will help somebody else too.

Zenburn for Xamarin Studio

I've been playing around with Xamarin. Its IDE, Xamarin Studio, comes with a bunch of (IMHO) terrible color schemes, so I ported Zenburn to the Xamarin format.

You can find my Zenburn for Xamarin theme here: https://gist.github.com/kristopherjohnson/784360f9676b59766678

To use it, download the .json file, open Xamarin Studio, go to Preferences > Syntax Highlighting, click the Add button, and select the file.

It's not a complete rendition of Zenburn. I've only defined the colors that are used in C# and F# code, and haven't bothered with all of the subtle color distinctions between different varieties of syntax elements.