Archive for the ‘Interactivity’ Category

A Wonder Day for Pumpkins

Recently the Q team participated in an internal, no-holds-barred, pumpkin carving contest. It seems simple enough, right?

I’m sure you can all guess which team I was on: the Technical Tyrannosaurus’.

A few months back, Paul had brought in an Arduino for the tech team. It turned out to be a really fun combination of my old Electrical Engineering training and my Software Development profession. I put together a simple device which would monitor twitter for mentions of agencyQ and play the Super Mario Bros. theme song. It would also light up some LED’s, though they weren’t visible due to keeping the Arduino hidden in a little box.

So how does that relate to a pumpkin carving contest? Matt was on my team and envisioned a pixilated Q with the twitter-monitoring Arduino software. Leave it to techies to over-complicate a simple pumpkin carving contest. Of course, it was also somewhat expected of us. The problem was: it only had 2 songs, neither of them Halloween-themed.

It was also written using the deprecated Twitter 1.0 API. (Hey, who ordered the OAuth?!)

After putting together a new (secret) song, there were now 3; which further inspired me to create a queue-able playlist allowing any of the 3 songs to be played upon the hash tag being used. The options are as follows:

  • #mario – The Super Mario Bros. theme
  • #victory – The victory song from Final Fantasy
  • #monster – The Monster Mash

As well as playing the song, the Q-O-Lantern blinks a different color for every note to the intensity of the pitch, cast against a range of pitches.

Matt unveiled the idea with the following tenants: code re-use is great, marketing is important, and never let developers do visual design. And so it was presented, to the tune of many synthesized songs.

Tweet @agencyQ one of these hash tags and the Q-O-Lantern will play a little song and flash joyfully.

Here are some classes that were developed to accomplish this task and a video of the Q-O-Lantern in action:

class Note {
  private:
    unsigned int _value;
    float _duration;
    bool _rhythm;

  public:
    Note(unsigned int value, float duration);
    Note(unsigned int value, float duration, bool rhythm);

    unsigned int getValue();
    float getDuration();
    bool isLegato();
};

class Song {
  private:
    Note *_notes;
    unsigned int _len;
    unsigned int _whole;
    unsigned int _pause;
    int _pin;
    void (*_callback)(Note*);

    void execCallback(Note *note);

  public:
    Song(Note *notes, unsigned int noteSize, int pin);
    Song(Note *notes, unsigned int noteSize, int pin, unsigned int whole);
    Song(Note *notes, unsigned int noteSize, int pin, unsigned int whole, unsigned int pause);

    void play();
    void setCallback(void (*callback)(Note*));
};

class PlayQueue {
  private:
    Song** _queue;
    unsigned int _growth;
    unsigned int _pause;
    unsigned int _size;
    unsigned int _ptr;

    void resize();

  public:
    PlayQueue();
    PlayQueue(unsigned int pause);
    PlayQueue(unsigned int pause, unsigned int growth);

    void clearAll();
    void add(Song* song);
    void play();
};
Read More Comments


“Get Your Feet Wet” in Scala

The programming language Scala, an acronym for “Scalable Language,” has been around for a while but is getting more popular recently due to its capability of mixing functional and object oriented features. Some of the features considered promising from a developer perspective are its static typing, expressive syntax similar to Java, and compilation to byte code which allows it to be executed on JVM and seamlessly integrated into existing Java applications if need be.

Scala supports many out-of-the-box features which include:

  • Full scale functional style programming which can be basically explained by the way it interprets everything as an expression with a value and also capabilities like tail recursion, lazy loading, pattern matching and immutability.
  • Object oriented programming by treating every value as an object and method – call as an operation.

As a simple example, a + b is actually interpreted as a.+(b) where ‘+’ is a method and ‘b’ as a  parameter to the method.

  • Static typing that supports inner classes, generic classes, views, polymorphic methods and many other types.
  • Interoperability with Java is a like a walk in the park.  It allows the use of Scala with the existing code but might need additional code on how the data is being handled on either side.

Getting Started. . .

With Scala, all you need to do is download it from its website and include in the path. This lets you run some simple Scala programs in command line which makes it even easier to play with.

Scala is also supported in Eclipse and Jet Brains IDEA with the appropriate plug-in.

Below is a SS of Scala Interpreter often called REPL (Read-Evaluate-Print Loop) which provides you with instant feedback and you can test it yourself with a task as simple as appending two strings to writing a function and then calling it. Some simple examples are shown in the snap shot.

Stay tuned for more on advanced Scala functions.

Scala

Read More Comments


AngularJS and Sitecore

AngularJS and Sitecore

I’ve been using a lot of jQuery and it’s the same old manipulating the DOM to get a page to look, feel and work the way I want it to work. There’s nothing wrong with this but I wanted to explore other JS libraries, from the thousands available, to possibly find a replacement or a complimentary library for jQuery.

After playing with AngularJS, I found its simplicity and its MVC capabilities very useful. Instead of manipulating the DOM, like jQuery, you can use AngularJS to extend HTML and treat HTML like XML to perform objectives such as creating custom tags. AngularJS uses jQLite, which is a version of jQuery, but if jQuery is already present on your site, it will use your version of jQuery instead.

Below is a simple example to showcase a powerful use of AngularJS that requires very little coding as found on their website.

<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js”></script>
<div ng-app>
    <label>Name:</label>
    <input type=”text” ng-model=”yourName” placeholder=”Enter a name here”>
    <hr>
    <h1>Hello {{yourName}}!</h1>
</div>
 

The app above is simple, declared as an Angular JS app by the “ng-app” attribute on the <div> tag. Every markup within the <div> is part of the declared app. The “ng-model” attribute, “yourName”, has been data bound to the <input> tag, hence it constantly listens to the <input> tag and upon entering any value within the <input> tag the value entered can be instantly displayed using mustache tags. In this example, the value would be {{yourName}}. This example demonstrates how powerful AngularJS is, because this code in jQuery would require at least a few lines of JavaScript.

Integrating AngularJS with Sitecore

I work with Sitecore almost daily, so I wanted to push it a bit further and see how AngularJS could integrate with Sitecore. To put it to the test, I chose to display a list of items from Sitecore using AngularJS.

With a typical Sitecore implementation, this is accomplished by getting the list of items and data binding the list to an asp:Repeater (then the rest is history). For this example, I focused on getting the list of items and data binding the list of items to a scope in AngularJS to let the app handle the rest.

The end result looks something like this.

    <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
    <script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js”></script>
    <div class=”angularjs-app”>
        <div class=”list-data”>
            <asp:HiddenField runat=”server” ID=”ListCtrlData” />
        </div>
        <script type=”text/javascript”>
            //<![CDATA[
            var data = $('.list-data input[type=hidden]‘).val();
            data = JSON.parse(data);
            function ListCtrl($scope) {
                $scope.list = data;
            }
            //]]>
        </script>
        <div ng-app>
            <div ng-controller=”ListCtrl”>
                <ul>
                    <li ng-repeat=”item in list”>
                        {{ item.title }}
                    </li>
                </ul>
            </div>
        </div>
    </div>

Let’s break it down.

        <div ng-app>
            <div ng-controller=”ListCtrl”>
                <ul>
                    <li ng-repeat=”item in list”>
                        {{ item.title }}
                    </li>
                </ul>
            </div>
        </div>

The “ng-controller” defines the initial scope with methods to control behavior within the scope. “ng-repeat”, “item in list”, acts the <asp:Repeater> as it loops through the list provided and outputs, using mustache tags, values. Hence the goal is to data bind the list of items from Sitecore to the “list”. This is accomplished by first getting the list of items, then serializing it to JSON and storing the list within the hidden input field of ID “ListCtrlData”.

        public class ChildItems
        {
            public string title { get; set; }
        }
        private JavaScriptSerializer serializer = new JavaScriptSerializer();
        protected void Page_Load(object sender, EventArgs e)
        {
            Item currentItem = Sitecore.Context.Item;
            List<Item> descendants = currentItem.GetChildren().Where(i => i.TemplateName == “Destination Category”).ToList();
            List<ChildItems> children = new List<ChildItems>();
            if (descendants != null)
            {
                foreach (Item item in descendants)
                {
                    if (item != null)
                    {
                        ChildItems childItems = new ChildItems();
                        if (item.Fields["Title"] != null)
                        {
                            childItems.title = item.Fields["Title"].ToString();
                        }
                        children.Add(childItems);
                    }
                }
                ListCtrlData.Value = serializer.Serialize(children);
            }
        }

I won’t go into details about getting items from Sitecore. Let’s assume the list of items from Sitecore has been successfully added to a list of child items, List <ChildItems> children. The next step is to serialize the list to the hidden input, taken care of on the line below.

ListCtrlData.Value = serializer.Serialize(children);

Now that we have our json string within the “ListCtrlData” hidden input, we can pass the value to the “list” within the “ListCtrl” controller in AngularJS.

        <script type=”text/javascript”>
            //<![CDATA[
            var data = $('.list-data input[type=hidden]‘).val(); // Get serialized Value
            data = JSON.parse(data); // Parse Serialized Value
            //]]>
        </script>

After getting the serialized data, data, we need to parse it with JSON in order to convert the data to a JavaScript Object. Next we create a function for our “ListCtrl” controller within which we will data bind the data object to the “ng-repeater”.

function ListCtrl($scope) {
            $scope.list = data; // Databind data to the list.
       }

The data object ends up looking something like:

[
                {"title": “Item A Title”}
                {"title": “Item B Title”}
                {"title": “Item C Title”}
                {"title": “Item D Title”}
                {"title": “Item E Title”}
]

Hence the output ends up being:

Item A Title

Item B Title

Item C Title

Item D Title

Item E Title

 Conclusions

 AngularJS can be integrated with Sitecore but it takes a few additional steps to convert the data source to JSON then data bind the data to an AngularJS control. This can be useful when creating AJAX oriented modules or mini-apps within a Sitecore site, but I wouldn’t recommend using it for the entire implementation at the moment. I know most developers, especially backend developers, are terrified of a site being entirely JAVASCRIPT; however, I would encourage developers to explore more on integrating AngularJS with any Back End language.  It may be worthwhile.

For more info, visit http://angularjs.org/

 Download example files:

list

list_ascx

Read More Comments


The Rise of Node.js

Node.js is a relatively new platform, based on Javascript, creating quite a buzz lately.  Looking a bit into this new programming, it fits on a list of programmer’s choice of languages. Node.js is JavaScript for the server-side.  It is JavaScript based, and adds features to the programming option apart from JavaScript, which is a fully functional programming language and is as good a scripting language as PHP.

Why you should start exploring with Node.js

The web is constantly changing; it started with viewing web pages, listening to music, watching videos, and evolved to pages interacting with each other in real-time.  HTTP was not created with these real-time interactions in mind; hence, polling large numbers of requests from the server through HTTP can get very expensive when dealing with real-time interactions. This is where Node.js comes in – it is very lightweight, scalable and capable of handling large request. It allows the developer to create web apps entirely in JavaScript, on both the client-side and server-side.

More about Node.js

Node.js, like JavaScript, is event-driven and runs using Google Chrome’s V8 engine. Using this engine makes running events faster and more efficient on the server-side because the V8 engine compiles JavaScript into native machine code.

Node.js vs. PHP

The most used language on the Internet today is PHP.  That said it could only be a matter of time before Node.js dethrones PHP + Apache. Node.js certainly has many advantages over PHP; most notably it is completely asynchronous and event-driven. All I/O intensive operations are performed asynchronously in an encapsulated, non-blocking Event Loop that keeps track of the async operation and the programmer can tell what function to pass the results to, through a callback function on complete. This allows for a large number of operations to be run with the Event Loop managing the operation efficiently.

With so many intuitive features and its high performance, Node.js may easily dethrone PHP in a few years.  On the other hand, PHP has been around for a long time, and built up a support network of developers and hosting companies. While Node.js does have a community of developers creating modules and constantly supporting it, PHP is a powerhouse with a whole lot of enterprise support and is the language used for the most usable CMS platforms today, including WordPress, Joomla and Drupal.

Although PHP will be around for a while, Node.js is certainly rising and making a mark while gaining support from the open source community. That alone is reason to start exploring and learning more about it.  If you haven’t already, do so.  Don’t forget, Node.js is JavaScript based, hence, the learning curve is minimal as most web developers are quite accustomed to JavaScript on the client-side.

Click HERE to start learning today.

Read More Comments


Friday Tech Link Round Up

Welcome to this edition of on Q with Q!  Below are links to this week’s top news in tech and social:

Apple announces the introduction of two new operating systems- MACWORLD

Facebook enters the hashtag game- FACEBOOK NEWSROOM

Twitter gives strategists a taste of an analytics dashboard- MASHABLE

Justin Timberlake tries to bring sexy back with new MySpace- WIRED

 

10
Read More Comments