Tic Tac Quarantine

I wrote a little web app based on WebRTC to play Tic Tac Toe live with someone else while video conferencing. You can check it out here (just copy your unique link and send it to a friend to start).

Play Now

Secure Peer to Peer Support via WebRTC

We had a hackathon at work and this support application was created. Secure peer to peer support with video conferencing and file transfer over WebRTC. Just vanilla JavaScript with some coordination via Scaledrone.

Launch Secure Peer to Peer Support

Cube (The Endless Word Game)

Check out Cube, a strange little word game I was playing with based on some Phaser sample code.

Play Cube

Integrated Auth with Selenium

In order to run Selenium with integrated auth you can create a Firefox profile in code and set your server as an NTLM auth trusted URI.

// Setup Firefox profile to support integrated auth
var profile = new FirefoxProfile();
profile.SetPreference("network.automatic-ntlm-auth.trusted-uris", "localhost");
profile.SetPreference("network.ntlm.send-lm-response", true);
this.Driver = new FirefoxDriver(profile);

// Set global wait timeout to 10 seconds
this.Driver.Manage().Timeouts().ImplicitlyWait(new TimeSpan(0, 0, 10));
this.BaseUrl = new Uri("http://localhost/");
this.VerificationErrors = new StringBuilder();

Range Validation with jQuery Validation Plugin

Sometimes you need to do client side validation based on other controls on the screen. Here is an example of how you can use the jQuery validation plugin to do dynamic range validation:

<style type="text/css">
  label.error { color: red; }
</style>

<form id="betweenForm" method="post" action="">
Change some values:<br/>
<label for="a">Field min:</label>
<input id="a" name="a" type="text" value="1" />

<br/>
<label for="b">Field max:</label>
<input id="b" name="b" type="text" value="100" />   
    
<br/>
<label for="c">Field between:</label>
<input id="c" class="required" name="c" type="text" value="" />

<p>
    <input class="submit" type="submit" value="Submit"/>
</p>
</form>

// Using jQuery Validation plugin    
    $("#betweenForm").validate({
        rules: {
            c: {
                required: true,
                min: function() {
                    return $('#a').val();
                },
                max: function() {
                    return $('#b').val();
                },
            }
        }
    });

The import part is to note how you can pass in an anonymous function instead of a static number for min and max.
View fiddle

jsFiddle

If you haven't already tried jsFiddle you are missing out. This is one of the handiest little websites for playing with JavaScript code and trying things out. It's actually kind of addicting once you start fiddling. Anyhow, here's a little JavaScript I have been fiddling with. Max int in array, reverse linked list, cached fibonacci, and tiny pub / sub.

jModified jQuery Plugin

Sometimes you need to know if the user has changed any of the fields on the page. I wrote a jModified jQuery plugin that will allow you to do just that. It works by hooking it up to form fields, and providing a callback method that will give you the form id, the original value, and the new value. Unlike a simple handling of the change event the original value is preserved so you can see if it actually changed.

The form fields:

<label for="a">Field A:</label>
<input id="a" name="a" type="text" value="a value" />

<br/>
<label for="b">Field B:</label>
<input id="b" name="b" type="text" value="b value" />   
    
<br/>
<label for="c">Field C:</label>
<input id="c" name="c" type="text" value="c value" />

The hookup:

<script> 
    $(function() {
        $("input").modified( { onModified: valueChanged } );
    });
    
    var isPageDirty = false;
    function valueChanged(id, previousVal, newVal) {
      isPageDirty = true;
      alert('The page is dirty.  The value for ' + id + ' has changed from ' + previousVal + " to " + newVal);
    }
  </script>

The jModified Plugin:

(function($){
 $.fn.modified = function(options) {
    
   var defaults = {  
     onModified: function(id, previousVal, newVal) { 
         alert('The value for ' + id + ' has changed from ' + previousVal + " to " + newVal ); }  
   };  
    
   var options = $.extend(defaults, options);  
  
   this.each(function() {
     $(this).data('originalValue', $(this).val());
   });
  
  return this.change(function() {
   var newValue = $(this).val();
   var originalValue = $(this).data('originalValue');
   
   if(newValue != originalValue)
     options.onModified($(this).attr("id"), originalValue, newValue);
   
  });
 };
})(jQuery);

Get the full source on GitHub.

jQuery Autocomplete via TextArea

It is always desirable to prevent users from making typos.  One tool that is great at preventing this is the jQuery AutoComplete.  However, sometimes you want to drive it off of client entered data and not via a constant array or ajax call.  Let's look at an example where we populate the AutoComplete via an existing TextArea on the page.

The jQuery splits on newline and fills the autocomplete whenever the textarea changes:

$("#Choices").change(function () {    
    var choices = $(this).val().split('\n');    
    $("#DefaultChoice").autocomplete({        
        source: choices    
    });
});

And the supporting markup:

<div id="DivList" class="dataChoice">
    <label for="Choices">Choices:</label>
    <textarea cols="20" id="Choices" name="Choices" rows="2"></textarea>
    
    <label for="DefaultChoice">Default Choice:</label>
    <input id="DefaultChoice" name="DefaultChoice" type="text" value="" />
</div>

Get the full source on GitHub.