Version 0

ruleset a60x557 {
  meta {
    name "advanced-hello-world"
    description <<
      advanced-hello-world
    >>
    author "Mike Grace"
    logging on
  }

  rule plain_krl_way {
    select when pageview "example\.com"
    pre {
      form =<<
        <form id="my-form">
          Your Name: <input type="text" name="user-name"/>
          <input type="submit" value="Submit"/>
        </form>
      >>;
    }
    {
      notify("Remembering your name",form) with sticky = true;
      watch("#my-form", "submit");
    }
  }

  rule get_form {
    select when web submit "#my-form"
    pre {
      userName = event:param("user-name");
    }
    {
      notify("Thanks #{userName}!","") with sticky = true;
    }
  }
}

• put form on page
• watch form
• respond to form submit with notify

This is super simple but falls short in several areas

• nothing to let the user know that the server is currently working on processing the form submit
• form can be submitted more than once
• submitted name isn’t stored into persistance
• interesting but not really useful in my opinion
• this isn’t how I get data out of forms (will show later)

Action shots:

running app for first time on example.com

submitting form first time

submitting form as many times as I want

Version 1

ruleset a60x557 {
  meta {
    name "advanced-hello-world"
    description <<
      advanced-hello-world
    >>
    author "Mike Grace"
    logging on
  }

  rule what_should_i_do {
    select when pageview "example\.com"
    pre {
      userName = ent:userName || "";
      form =<<
        <form id="my-form">
          Your Name: <input type="text" name="user-name"/>
          <input type="submit" value="Submit"/>
        </form>
      >>;
    }
    if (userName eq "") then {
      notify("Remembering your name",form) with sticky = true;
      watch("#my-form", "submit");
    }
    notfired {
      raise explicit event user_name_known with userName = userName;
    }
  }

  rule user_name_known {
    select when explicit user_name_known
    pre {
      userName = event:param("userName");
    }
    {
      notify("#{userName} is 'da bomb!","") with sticky = true;
    }
  }

  rule get_form {
    select when web submit "#my-form"
    pre {
      userName = event:param("user-name");
    }
    {
      notify("Thanks #{userName}!","") with sticky = true;
    }
    fired {
      set ent:userName userName;
    }
  }

}

• 14 get user’s name from persistance and set to blank string if not found
• 22 if the user’s name is not found in persistance then put the form up and watch for the form submit
• 26 if the user’s name was found in persistance then raise an explicit event to handle user’s name being found
• 34 get user’s name from passed parameters is raised explicit event. Could have just pulled it from persistance but then you wouldn’t have gotten to see how to pass parameters in explicit events.
• 50 set the user’s name into persistance when the rule runs responding to form submit event

This example is much better but still leaves a lot out.

• no form validation
• no way for user to change set user name once submitted
• still no indication that form submission is ‘in progress’
• still able to submit multiple times

Action shots:

running app on example.com for the first time

submitting form for the first time

submitting the form as many times as I want

After page reload and running app again

Version 2

ruleset a60x557 {
  meta {
    name "advanced-hello-world"
    description <<
      advanced-hello-world
    >>
    author "Mike Grace"
    logging on
  }

  global {
    css <<
      a {
        color: white;
      }
    >>;
  }

  rule what_should_i_do {
    select when pageview "example\.com"
    pre {
      userName = ent:userName || "";
      form =<<
        <form id="my-form">
          Your Name: <input type="text" name="user-name"/>
          <input type="submit" value="Submit"/>
        </form>
      >>;
      greeting =<<
        <p>#{userName} is 'da bomb!'</p>
        <p>Clear saved name by running the app on <a href="http://example.com/?clear">example.com/?clear</a></p>
      >>;
      content = (userName eq "") => form | greeting;
    }
    {
      notify("Hello World (advanced)", content) with sticky = true and opacity = 1;
      watch("#my-form", "submit");
    }
  }

  rule get_form {
    select when web submit "#my-form"
    pre {
      userName = event:param("user-name");
    }
    {
      notify("Thanks #{userName}!","") with sticky = true;
    }
    fired {
      set ent:userName userName;
    }
  }

  rule clearing {
    select when pageview "example\.com\/\?clear"
    notify("Cleared","");
    fired {
      clear ent:userName;
    }
  }

}

• 12 set CSS so link on black background is visible
• 29 setup greeting HTML at the same time as the form
• 33 decide what to put on the page using condition expression
• 54 clear saved name when user runs on specified clear page

This is getting closer but still lacks

• form validation or disallowing user to submit multiple times
• when persistance is cleared the greeting is also displayed
• no indication that form submission is ‘in progress’
• still not the way I would do it

Action Shots:

running app first time

submitting name first time

submitting name many times

running app again after refresh of page

running app on designated clear page

Version 3

ruleset a60x557 {
  meta {
    name "advanced-hello-world"
    description <<
      advanced-hello-world
    >>
    author "Mike Grace"
    logging on
  }

  global {
    css <<
      .kGrowl-notification a {
        color: white;
      }

      #a60x557-working, #a60x557-notice {
        display: none;
      }
    >>;
  }

  rule what_should_i_do {
    select when pageview "example\.com(?!.+clear)"
    pre {
      userName = ent:userName || "";
      form =<<
        <p id="a60x557-notice">Your name input must be more than 2 characters</p>
        <p id="a60x557-form">Your Name: <input type="text" id="a60x557-user-name"/> <button id="a60x557-submit">Submit</button></p>
        <img id="a60x557-working" style="display: none" src="http://kynetx-apps.s3.amazonaws.com/advanced-hello-world/working.gif"/>
      >>;
      greeting =<<
        <p>#{userName} is 'da bomb!'</p>
        <p>Clear saved name by running the app on <a href="http://example.com/?clear">example.com/?clear</a></p>
      >>;
      content = (userName eq "") => form | greeting;
    }
    {
      notify("Hello World (advanced)", content) with sticky = true and opacity = 1;
      emit <|
        $K("#a60x557-submit").bind("click", function() {

          // get user name from input
          var userName = $K("#a60x557-user-name").val();

          // check input
          if (userName.length > 2) {
            // don't allow user to submit more than once
            $K(this).unbind("click");

            // get app object to raise web event
            app = KOBJ.get_application("a60x557");

            // raise web event to system with user name
            app.raise_event("user_name_submitted", {"user-name":userName});

            // show user 'in progress'
            $K("#a60x557-form,#a60x557-notice").remove();
            $K("#a60x557-working").show();
          } else {
            $K("#a60x557-notice").show()
          };
        });
      |>;
    }
  }

  rule get_form {
    select when web user_name_submitted
    pre {
      userName = event:param("user-name");
      reset =<<
        <p>Clear saved name by running the app on <a href="http://example.com/?clear">example.com/?clear</a></p>
      >>;
    }
    {
      emit <|
        // close previous notify
        $K(".kGrowl-notification .close").trigger("click");
      |>;
      notify("Thanks #{userName}!", reset) with sticky = true and opacity = 1;
    }
    fired {
      set ent:userName userName;
    }
  }

  rule clearing {
    select when pageview "example\.com\/\?clear"
    notify("The saved name has been cleared","");
    fired {
      clear ent:userName;
    }
  }

}

• updated CSS to only change links inside the notify
• 24 don’t show form/welcome back notify if on the clear page
• 28 add notice to show if user input doesn’t match validation rule
• 30 add working notification image to let user know app is ‘in progress’
• 41 watch for user to submit form using jquery
• 47 check user input against validation rule
• 49 release click listener so form only gets submitted once
• 52 get application JS object to raise web event
• 55 raise web event with user’s name
• 58 remove form stuff
• 59 show working spinner image
• 61 show notice if user’s input doesn’t pass input validation
• 79 close previous notify once saved form returns

Now this advanced hello world example app

• only allows the user to submit name once
• allows user to clear set name
• better CSS selectors
• form validation
• in progress visual
• stores user’s name into persistance
• this is how I would do it

Action shots:

running app first time

submitting name first time

name successfully saved

running app again after reload

running app on designated clear page

Get the bookmarklet to try it out yourself!

Gratuitous day 38 crazy face

ruleset a60x556 {
  meta {
    name "youtuber-test"
    description <<
      youtuber-test
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    domain "youtube.com"
  }

  rule on_video_page {
    select when pageview "\/watch\?"
    {
      notify("Current Time","<h1 id='a60x556-time'>-</h1>") with sticky = true;
      emit <|
        KOBJ.a60x556.player = document.getElementById("movie_player");
        KOBJ.a60x556.update = function() {
          var current = KOBJ.a60x556.player.getCurrentTime()
          $K("#a60x556-time").text(current);
          setTimeout(function() {
            KOBJ.a60x556.update();
          }, 100);
        }

        KOBJ.a60x556.update();
      |>;
    }
  }
}

• 16 only run on youtube pages with a single video loaded on the page. This selection expression is not robust enough to encompass all youtube pages with videos but it’s good enough for a demo app
• 18 setup place to put current video time
• 20 grab reference of embedded object
• 21 function to got time of video and update to interface. Setting up function reference on the global KOBJ object so I can call it recursively
• 26 update current time of video every 100 milliseconds. Could have set this lower or higher but this fits this demo well.
• 29 get the recursive function going

App run on youtube.com video using a bookmarklet

Video Demo

Get the bookmarklet to try it out yourself!

Gratuitous day 37 Grace face

AWS console

log into console and find extension file

Right click on file

Set content-type to application/x-xpinstall

Cyberduck

Find file in cyberduck

Right click and select info or be cool and use the keyboard shortcut ‘cmd + i’

Set content-type to application/x-xpinstall in Metadata tab

Results

For Google Chrome extensions, check out the documentation at http://code.google.com/chrome/extensions/hosting.html

ruleset a60x551 {
  meta {
    name "Foul Fowl Control"
    description <<
      hides foul language in twitter stream
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    domain "twitter.com"
  }

  rule find_dem_foul_fowls {
    select when pageview ".*"
    {
      emit <|
        // add repeat function to String object
        // http://stackoverflow.com/questions/4549894/how-can-i-repeat-strings-in-javascript
        String.prototype.repeat = function(times) {
           return (new Array(times + 1)).join(this);
        };

        // list of words to find and replace
        // var foulWords = ["it","is","the","on","a","i","of","my","me","for","in","up","and","to","be","that"];

        // build regex to find and replace foul words
        KOBJ.a60x550.theReplacer = new RegExp('\\b('+foulWords.join('|')+')\\b','gi');

        // attatch function to global KOBJ object so it's callable outside of closure
        KOBJ.a60x550.findFoulFowls = function() {

          // process tweets not marked as processed
          $(".stream-item:not(.defouled)").each(function(index, element) {

            // mark as processed and cache object
            var $current = $K(element).addClass("defouled");

            // get text of tweet
            var $tweet = $current.find(".tweet-text");
            var tweet = $tweet.text();

            // clean it up!
            var needsCleaning = false;
            var cleanTweet = tweet.replace(KOBJ.a60x550.theReplacer, function(match) {
              needsCleaning = true;
              return "*".repeat(match.length);
            });

            // only write back to the DOM if the tweet was changed because DOM access is expen$ive!
            if (needsCleaning) {
              $tweet.text(cleanTweet);
            };

          }); // end of each

          setTimeout(function() {
            KOBJ.a60x550.findFoulFowls();
          }, 1000);
        };

        KOBJ.a60x550.findFoulFowls();
      |>;
    }
  }
}

The code is fairly well commented so I’ll just point out one thing. Because I am using a setTimout function to recursively call the function that looks for new tweets, I needed to attach the function to the global KOBJ object. This is because the emitted JavaScript gets executed inside a closure and won’t be accessible from outside the closure.

ruleset a60x545 {
  meta {
    name "beesting-in-pick"
    description <<
      beesting-in-pick
    >>
    author "Mike Grace"
    logging on
  }

  rule test_pick {
    select when pageview ".*"
    pre {
      r = math:random(2);
      pleasePick = (r == 0) => "userName" | "cool";
      myHash = {
        "userName":"mike",
        "cool":"yes"
      };
      picked = myHash.pick("$.#{pleasePick}");
    }
    {
      notify("picked","Picked with: #{pleasePick}<br/>Picked value: #{picked}") with sticky = true;
    }
  }
}

• 14 get random number to simulate picking based on condition
• 15 set pick based on random based condition
• 20 get value from pick statement

App run several times in a row on example.com with a bookmarklet

Get the bookmarklet to try it out yourself!

Gratuitous day 34 Grace face

ruleset a60x541 {
  meta {
    name "new-day-test"
    description <<
      for when you want to run a rule only once on a new day.
      ie. a (script like) rule to clean up or prep for new day.
    >>
    author "Mike Grace"
    logging on
  }

  rule check_the_day_for_a_single_user {
    select when pageview ".*"
    pre {
      today = time:strftime(time:now({"tz":"America/Denver"}), "%d");
      savedDay = ent:savedDay || 0;
    }
    if (today != savedDay) then {
      noop();
    }
    fired {
      raise explicit event new_day_for_user;
      set ent:savedDay today;
    } else {
      raise explicit event same_day_for_user;
    }
  }

  rule its_a_new_day {
    select when explicit new_day_for_user
    {
      notify("Hey!","It's a new day!") with sticky = true;
    }
  }

  rule same_day {
    select when explicit same_day_for_user
    {
      notify("Hello again","Looks like it is still the same day") with sticky = true;
    }
  }

  rule check_the_day_for_app {
    select when pageview ".*"
    pre {
      today = time:strftime(time:now({"tz":"America/Denver"}), "%d");
      savedDay = app:savedDay || 0;
    }
    if (today != savedDay) then {
      noop();
    }
    fired {
      raise explicit event new_day_for_app;
      set app:savedDay today;
    } else {
      raise explicit event same_day_for_app;
    }
  }

  rule its_a_new_day_for_app {
    select when explicit new_day_for_app
    {
      notify("App: Hey!","It's a new day!") with sticky = true;
    }
  }

  rule same_day_for_app {
    select when explicit same_day_for_app
    {
      notify("App: Hello again","Looks like it is still the same day") with sticky = true;
    }
  }

}

• 12 checking to see if it is a new day for each individual user
• 15 get current day
• 16 get the saved day from last time it was run or set to ’0′ if not yet set
• 18 executed action block if it’s a new day
• 22 raise event for new day rules
• 23 save todays date as the saved day so we know while it is still the same day
• 25 raise event for same day rules if it is still the same day
• 43-58 do the same thing but only raise the event for the first user that runs it on the new day using app variables instead of entity variables

App run on example.com using bookmarklet for the first time

App run on example.com using bookmarklet for the second time within seconds of running it the first time

App run on example.com using bookmarklet for the first time in a different browser

Get the bookmarklet to try it out yourself!

Gratuitous day 33 Grace face

ruleset a60x532 {
  meta {
    name "old-school-retweet"
    description <<
      old-school-retweet
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    domain "twitter.com"
  }

  global {
    css <<
      .old-school-enabled .old-school-rt {
         background: url("http://a2.twimg.com/a/1294279085/phoenix/img/sprite-icons.png") no-repeat scroll 0 0 transparent;
         background-position: -176px 0;
         display: inline-block;
         margin-bottom: -3px;
         margin-right: 3px;
         position: relative;
         vertical-align: baseline;
         height: 12px;
         margin: 0 2px;
         outline: medium none;
         text-indent: -99999px;
         width: 15px;
      }
    >>;
  }

  rule twitter_page_loaded {
    select when pageview "twitter\.com"
    pre {
      oldSchool =<<
        <a class="old-school-retweet-action" href="#"><span><span class="old-school-rt"></span><b>RT</b></span></a>
      >>;
    }
    {
      emit <|
        $K(".stream-item").live("mouseenter", function() {
          var $tweet = $K(this);
          if ( $tweet.hasClass("old-school-enabled") == false ) {
            $tweet.addClass("old-school-enabled").find(".tweet-actions").append(oldSchool);

            $tweet.find(".old-school-retweet-action").click(function() {
              var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
              var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();
              var retweet = "RT @"+name+" "+tweet;
              $("#new-tweet").trigger("click");
              $K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
              $K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");
            });
          };
        });
      |>;
    }
  }
}

• 38 html to emulate same style/layout as other twitter action buttons
• 43 add the RT button when a user mouses over a tweet
• 45 only add the button if it hasn’t already been done
• 48 bind click handler to newly added RT button
• 49 get the tweet text when the RT button is clicked
• 50 get the username of the tweeter the tweet came from
• 51 build new tweet in RT style
• 52 use Twitter’s jquery to trigger a click on the new tweet button
• 53 put the cursor in the tweet box and put the RT in the box
• 54 enable the tweet button so user doesn’t have to type before being allowed to tweet

Tweet moused over after running app on Twitter.com as a Chrome extension

Get the extension to try it out yourself! (Chrome / Firefox / IE)

Gratuitous day 32 Grace face

ruleset a60x531 {
  meta {
    name "xkcd-on-twitter"
    description <<
      xkcd-on-twitter
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    domain "twitter.com"
  }

  global {
    datasource xkcd:HTML <- "http://xkcd.com/";

    css <<
      div.xkcd-loaded-via-kynetx img {
        max-width: 445px;
      }
    >>;
  }

  rule starting {
    select when pageview "twitter\.com"
    {
      emit <|
        $K(".stream-item").live("click",
        function() {
            var clicked = this;
            var attempts = 0;
            var found = false;
            if ($K(clicked).attr("processed") != "true") {
                $K(clicked).attr("processed", "true");
                var itemId = $K(clicked).attr("data-item-id");
                var interval = setInterval(function() {
                    if ((attempts > 6) || (found == true)) {
                        clearInterval(interval);
                    } else {
                        attempts = attempts + 1;
                        found = ($K("div.tweet.details-pane-tweet[data-tweet-id='" + itemId + "']").length != 0) ? true: false;
                        if (found) {
                            app = KOBJ.get_application("a60x531");
                            var $links = $K(clicked).find("div.tweet-text a.twitter-timeline-link");
                            $links.each(function(index, element) {
                                var url = $K(element).text();
                                if (url.match(/xkcd\.com/gi)) {
                                  $K("<img class='kynetx-working' src='http://kynetx-apps.s3.amazonaws.com/super-skitch/working.gif'/>").hide().css({
                                      "position": "absolute",
                                      "right": "10px",
                                      "top": "10px"
                                  }).appendTo("div.tweet.details-pane-tweet[data-tweet-id='" + itemId + "']").fadeIn("slow");
                                  app.raise_event("xkcd", {
                                      "url": url,
                                      "itemId": itemId
                                  });
                                };
                            });
                        };
                    };
                },
                500);
            };
        });

      |>;
    }
  }

  rule get_image_from_mini_link {
    select when web xkcd
    pre {
      url = event:param("url");
      itemId = event:param("itemId");
      target = "div.tweet.details-pane-tweet[data-tweet-id='#{itemId}']";
      pathBeta = url.replace(re/http:\/\/xkcd\.com(\/.*)/,"$1");
      path = pathBeta.replace(re/xkcd\.com(\/.*)/,"$1");
      page = datasource:xkcd(path);
      middleContent = page.query("#middleContent");
      title = middleContent.query("h1");
      images = middleContent.query("img");
      image = images[0];
      returnHtml =<<
        <div class="xkcd-loaded-via-kynetx">
          #{title}
          #{image}
        </div>
      >>;
    }
    {
      emit <|
        $K(target).find(".kynetx-working").fadeOut();
        $K('<div>'+returnHtml+'</div>').hide().appendTo(target).fadeIn();
      |>;
    }
  }
}

• 12 deployed as a browser extension so only check select statements on twitter.com
• 16 going to query the XKCD site as an HTML datasource and grab the image and title
• 18-22 make sure comic fits within meta tray of Twitter
• 34 only process clicked tweet if not already previously processed to prevent duplication
• 35 mark tweet as processed
• 36 data-item-id required to find correct meta tray to load comic in
• 37 use setInterval to wait for the  meta tray to load since it is not immediate
• 38-39 clear interval if we’ve waiter longer than 3 seconds or if the tray loaded
• 42 look for correct meta tray to be loaded
• 45 get link from tweet that was clicked on
• 46 go through each tweet
• 48 if the url found in the tweet is a link to an xkcd comic then lets raise an event to KNS with the link
• 49-53 show user spinner to let them know the app is working
• 54 raise event

• 72 when an event is raised with xkcd link in tweet
• 77 get path portion of url extracted
• 78 extract path from url’s that didn’t have ‘http’ prepended
• 79 get contents of xkcd comic page
• 80 filter through html of xkcd page and grab html with id of middleContent
• 81 grab title of comic
• 82 grab all the images which happens to be just one but query returns an array
• 83 get first image in array
• 93 fadeout working spinning gif to let user know the app is done working
• 94 append the comic into the meta tray of Twitter interface

Tweet with xkcd link clicked on after running app on Twitter.com as a Chrome extension

Get the extension to try it out yourself! (Chrome / Firefox)

Gratuitous day 31 Grace face

ruleset a60x526 {
  meta {
    name "hash-pick-detect"
    description <<
      hash-pick-detect
    >>
    author "Mike Grace"
    logging on
  }

  global {
    dataHash = {
      "one": {
        "name": "Mike"
      }, // number
      "two": {
        "random": 8
      }, // number
      "three": {
        "name": "Alex"
      } // number

    }; // dataHash

  } // global

  rule detect_the_pick {
    select when pageview ".*"
    foreach dataHash setting (key, value)
    pre {
      userName = value.pick("$.name", true);
      length = userName.length();
    }
    if (length > 0) then {
      notify("Key: #{key}","Name: #{userName}<br/>Length: #{length}") with sticky = true;
    }
    notfired {
      raise explicit event empty_pick
        with pickedKey = key;
    }
  }

  rule empty_pick_found {
    select when explicit empty_pick
    pre {
      pickedKey = event:param("pickedKey");
      results =<<
        Key: #{pickedKey}<br/>
        doesn't have a name associated with it to pick from
      >>; //' fixing syntax highlighting
    }
    {
      notify("An empty pick was detected",results) with sticky = true;
    }
  }
}

• 12-23 hash to pick from
• 29 iterate through top level hash elements
• 31 pick name from hash element and ALWAYS return results in an array – second optional parameter of pick tells it to always return an array
• 32 get length of array returned from pick
• 34 if the length is greater than 0 then we know it found something to pick from the hash
• 37 if the action block didn’t fire because data wasn’t found to pick then raise explicit event to process that situation

App run on example.com with bookmarklet

Get the bookmarklet to try it out yourself!

Gratuitous day 30 Grace face

ruleset a60x525 {
  meta {
    name "uri-escape"
    description <<
      uri-escape
    >>
    author "Mike Grace"
    logging on
  }

  rule ehskahpeh {
    select when pageview ".*"
    pre {
      restfulYql = "http://query.yahooapis.com/v1/public/yql?q=";
      queryStatement = "select * from html where url='www.kynetx.com'";
      finalThingy = restfulYql + uri:escape(queryStatement);
      appender =<<
        <h1>#{finalThingy}</h1>
      >>;
    }
    {
      append("body", appender);
    }
  }
}

• 11 movie reference

App run on example.com with bookmarklet

Get the bookmarklet to try it out yourself!

Gratuitous day 29 Grace face