Note: Here is a quick overview of JavaScript that is as short as possible, but explains every major feature. I would also recommend following the 2ality website

Today JavaScript projects have the complexity, size, and structure of projects written in languages like C# and Java. Thankfully, the developer tools for debugging and logging are solid across browsers. *Opera is still a little funky about logging using “opera.postError.apply(opera, arguments);”. Looking particularly good, Google’s version of the webkit dev tools and some API’s they have in beta. I’ve started to use quint for unit testing. I’ve also been looking leveraging these frameworks: underscore.js, coffee script, raphaeljs, and closure compiler.

It’s amazing how much has changed. Now examples of good JavaScript are much easier to find. Hell, here is a step by step walkthrough of how to build your very own JavaScript framework.

So to get some practice I went and found some JS that needed cleanup. I wanted to focus on structure and namespaces and this script needed some love. View source on that page and you will notice global variables and one big pile of code.

The first thing I did was break up the logic into separate functional script files that will later be compiled and minified into one. You can see the python script I use to minify here.

1. animation.js
2. builder.js
3. core.js
4. pie.js
5. rendering.js
6. styles.js

I then added a test folder and setup the same file names but which had test cases for each script. Then an index.html file to display the test groups or “modules” as they are called in QUnit. Here is an example of a test that always passes

module("sample test");

test("a sample qunit test", function () {
    ok(true, "always fine");
});

The next thing I worked on was getting a namespace around the code. I went with the following which seems to work for my needs.

var MYAPP = MYAPP || {};

MYAPP.namespace = function (ns_string) { var parts = ns_string.split('.'), parent = MYAPP, i; // strip redundant leading global 

if (parts[0] === "MYAPP") { parts = parts.slice(1); } for (i = 0; i < parts.length; i += 1) { // create a property if it doesn't exist 

if (typeof parent[parts[i]] === "undefined") { parent[parts[i]] = {}; 

} parent = parent[parts[i]]; } return parent; }; 

Stefanov, Stoyan (2010). JavaScript Patterns (pp. 89-90). OReilly Media – A. Kindle Edition.

So after refactoring, I’ve got the pie chart setup code to the following.

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');

var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData);

$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

To customize the style I allow passing in a custom style object to override the defaults.

var customStyles = {
    chartSizePercent: 49,
    maxPullOutDistance: 10,
    pullOutFrameStep: 4,
    pullOutFrameInterval: 40,
    pullOutLabelPadding: 42
};

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');
var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData, customStyles);
$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

If you are curious about how the other parts of the chart were organized you can see the source code on github.

I can also be found on Google+ Jason Rowe and twitter @jsonrow

A recent post and talk on twitter about host providers got me interested in building a blog using Google App Engine (GAE). It’s free to use and would eliminate having to pay for a hosting provider for a small site. My blog turned out like this jsoncharts. I’m pretty happy with it so far.

I got started with Python and GAE by reading the documentation and using the examples on the Google App Engine site. Then I used this article and framework for the base of my blog. The major changes I made were adding commenting and friendly URL’s. I can have URL’s like this (http://jsoncharts.appspot.com/blog/force-directed-graph-with-raphael) and comments on the articles (http://jsoncharts.appspot.com/blog/force-directed-graph-with-raphael#respond).

Adding friendly URL’s was easy enough. Following Bret Taylor’s example here is what my WSGIApplication instance looks like.

 
application = webapp.WSGIApplication(
    [('/', FrontPageHandler),
     ('/tag/([^/]+)/*$', ArticlesByTagHandler),
     ('/date/(\d\d\d\d)-(\d\d)/?$', ArticlesForMonthHandler),
     ('/'+ defs.ARTICLE_URL_PATH +'/(\d+)/?$', SingleArticleHandler),
     ('/'+ defs.ARTICLE_URL_PATH +'/([^/]+)', SingleArticleHandlerBySlug),
     ('/archive/?$', ArchivePageHandler),
     ('/rss2/?$', RSSFeedHandler),
     ('/.*$', NotFoundPageHandler),
     ], 

The following line routes incoming request to a class handler named “SingleArticleHandlerBySlug”.

 
('/'+ defs.ARTICLE_URL_PATH +'/([^/]+)', SingleArticleHandlerBySlug),

The handler looks like this:

 
class SingleArticleHandlerBySlug(AbstractPageHandler):
    """
    Handles requests to display a single article, given its unique ID.
    Handles nonexistent IDs.
    """
    def get(self, slug):
        article = Article.get_for_slug(slug)
        comments = None
        if article:
            comments = Comment.get_all_by_articleId(article.id)
            template = 'show-single-article.html'
            articles = [article]
            more = None
        else:
            template = 'not-found.html'
            articles = [] 

        self.response.out.write(self.render_articles(articles=articles,
                                                     request=self.request,
                                                     recent=self.get_recent(),
                                                     template_name=template,
                                                     comments=comments)) 

To add the commenting I had to create a new model class for storage. This was very simple.

 
class Comment(db.Model): 

    name = db.TextProperty()
    email = db.TextProperty()
    website = db.TextProperty()
    body = db.TextProperty()
    commented_when = db.DateTimeProperty(auto_now_add=True)
    id = db.IntegerProperty()
    articleId = db.IntegerProperty()
    gravatar_url = db.TextProperty() 

Then I added a few functions for finding and deleting and then added them in. I can’t remember ever doing something with storage this fast. I don’t miss SQL at all. GAE really hides all the storage implementation details for you. Here is an example of the functions used to access the data store.

 
@classmethod
def get_all(cls):
    q = db.Query(Comment)
    q.order('-commented_when')
    return q.fetch(FETCH_THEM_ALL)
@classmethod
def get_all_by_articleId(cls, articleId):
    q = db.Query(Comment)
    q.filter('articleId = ', articleId)
    q.order('-commented_when')
    return q.fetch(FETCH_THEM_ALL) 

That’s all it takes and you are ready to go.

Overall I was very impressed with the experience. In the future I’ll probably look into using Django’s form validation framework for comments and figure out how backups would work.

• JsonChart Fork on GitHub
• PicoBlog on GitHub
• Writing Blogging Software for Google App Engine

static double F(double x)
{

return Math.Pow(x, 2.0) + 5 * x + 7;

}

OneV firstExp = x => Math.Pow(x, 2.0) + 5 * x + 7;

delegate double OneV(double x);

TwoV Exp = (x, y) => Math.Pow(y, 2.0) + 5 * y + 18 * x + 2 * x * y + 7;

using System;
using System.Collections.Generic;

namespace PropositionalLogic
{
    public class Program
    {
        public class truthvalue
        {
            public bool X { get; set; }
            public bool Y { get; set; }
        }

        public static bool XorY(bool x, bool y)
        {
            return (x || y);
        }

        public static bool XandY(bool x, bool y)
        {
            return (x && y);
        }

        public static bool Exclusive(bool x, bool y)
        {
            return (x && y) && !(x && y);// always false
        }

        public static bool Tautoloty(bool x, bool y)
        {
            return x || y || (!x && !y);// always true
        }

        public static bool Contradition(bool x, bool y)
        {
            return x || (y && !y);
        }

        public static bool MaterialImplication(bool x, bool y)
        {
            return !x || y; //this can also be expressed as the following conjunction !(x && !y);
        }

        public static bool BiConditional(bool x, bool y)
        {
            return MaterialImplication(x, y) && MaterialImplication(y, x); //"if and only if"
        }

        static void Main(string[] args)
        {
            var truthTable = new List<truthvalue>
                                 {
                                     new truthvalue() {X = false, Y = false},
                                     new truthvalue() {X = false, Y = true},
                                     new truthvalue() {X = true, Y = false},
                                     new truthvalue() {X = true, Y = true}
                                 };

            var sentences = new Dictionary<string , Func<bool, bool, bool>>
                                {
                                    {"X v Y", XorY},
                                    {"X & Y", XandY},
                                    {"(x v y)& -(x & y)", Exclusive},
                                    {"x v y v (-x & -y)", Tautoloty},
                                    {"x -> y", MaterialImplication},
                                    {"x ~ y", BiConditional}
                                };

            CalculateTruthTable(truthTable, sentences);

            Console.ReadLine();
        }

        private static void CalculateTruthTable(IEnumerable<truthvalue> truthTable, Dictionary<string , Func<bool, bool, bool>> sentences)
        {
            foreach (var sentence in sentences)
            {
                Console.WriteLine("");
                Console.WriteLine("|X      |Y      |{0}  |", sentence.Key);

                foreach (var value in truthTable)
                {
                    var x = value.X;
                    var y = value.Y;

                    var result = sentence.Value(x, y);

                    Console.WriteLine("|{0}  |{1}  |{2}  |", PrettyPrint(x), PrettyPrint(y), PrettyPrint(result));
                }
            }
        }

        private static string PrettyPrint(bool input)
        {
            return input ? input + " " : input.ToString();
        }
    }
}