brief intro to git, socket.io, node.js and cloud9

The intent of this post is simply to explain the basics of Socket.IO, but with just a simple JavaScript background, there may be a few hurdles to jump over first, so this will be more of a "hand-holding" exercise.

Cloud9

Cloud9, simply put, is a web-based IDE for JavaScript. Go over there. Sign up. It's free, don't worry. Also, if you want to get super adventurous, Cloud9 is open source and available over on GitHub. I'm not going to install it on my own, but just know that's a possibility. Now, create a new project. Name it anything. Just make sure you make it a Git project. Now, once that's done, let's jump in and start editing! But, I don't want to bore you with the drawn out stuff... so, why not just copy the code I already have?

Git

Git is another version control system. I like Git. It is a bit difficult to grasp at first, but it feels "right". Instead of having copies of files for branches and tags, like SVN does, Git has it's own nice little thing it does. Everything is just the branch you're working on. In my opinion, at least, this leads one to adopt a process of locally branching files. Branches everywhere. Anyway, we're going to pull the current codebase from Git. So click in the console window down at the bottom of your Cloud9 project and grab it. Use the following commands to do so:

git remote add origin https://github.com/tyllyn/js-notifications.git

git pull origin master

I don't believe Cloud9 refreshes the files automatically (at least it didn't while writing this up), so refresh the page! Bam! You have files there! What exactly did we do, though. Well, the first command sets up "origin" as a remote repository - the one I have set up over on GitHub with the code we're working with. The next statement pulled the "master" branch from "origin" into our local copy. "Master" is the main branch in Git, pretty much how "trunk" is the main branch in SVN. There's a lot more to Git, but this isn't an exercise on the specifics of it. You can always learn more on the Git website.

node.js

I have a simple web-server set up in that repo, so let's add a new run configuration, just like this:

And click run. Your console at the bottom will now show a URL. Click this. And look, it's that file we're hosting!

socket.io

socket.io eases the communication between a server and a client. We're going to use this in one its most simplest forms - for a chat server. As you set up your run configuration for the web-server, set one up for the "svr-socket-io.js" file. And run it. Whoa, you might have got an error about how socket.io broke into your house and stole your wife (I'm not a great reader, but I'm assuming that's what it says). This is because socket.io is not installed just yet. Trying typing these into the console, if so:

npm install socket.io

npm install socket.io-client

Anyway, I'll leave the rest of the debugging up to you. Enjoy your simple chat server, now. :)

wiggleIt

You can find a few example implemtations of it below. Each one opens in a new window. As I improve upon it I'll be posting updates.

• Horizontal example implementation of Wiggle It


• Vertical example implementation of Wiggle It


• Square example implementation of Wiggle It


• Download It (zip file containing compressed and uncompressed versions of the script with an example)

In it's simplest implementation, you can just call it out without any params.

$('.wiggleIt').wiggleIt();

The default param values are as follows:

$('.wiggleIt').wiggleIt({

'imageWidth' : 200,

'imageHeight' : 200,

'divisions' : 8,

'direction' : 'vertical',

'speed' : 250
});

If you set the direction parameter to vertical or square, the divisions parameter will be the number of vertical slices comprising the width of the image. If you set the direction to horizontal the divisions will be the number of horizontal slices comprising the height of the image. The minimal CSS involved is included within the HTML files. Obviously, the higher the number of divisions you specify the greater the demands on the browser. It works everywhere, even IE8.

CSS 3 . . no, wait . . 4

CSS34

I know what you're thinking. "What!? We barely started using 3! I don't even have all those snazzy transitions in my geocities blog."

Easy now, buster. The CSS4 Public Draft was last created by the W3C on the 29th of September, 2011, barely three months prior to this blog post. We probably won't see this cool stuff in action for a number of years. In fact, CSS 3 is still going through some working process, so it isn't even completely done.

But let's go on a magical adventure into what may be.

In CSS3 we got a lot more in terms of selector power. Attributes being part of the selector means that you can target every anchor tag that opens a new window by applying styles to:

a[target='_blank'] { }

 (Fun fact, you can chain attribute selectors! input[type='radio'][name='awesome'] !! How cool is that? You can also negate them using not())

We also got some pseudo classes, which are basically afterthoughts to your selector. "I want a link, but only if it's being hovered over, or only if I visited it.)

a:hover { }

 In CSS4, we start getting some more powerful pseudo classes. Here are some examples, though they may change as the draft is exactly that, a draft, and they change very often.

Location based selectors (going somewhere?)

:any-link
Information is limited on this selector but I gather it is meant to target elements that are made into links, like if you surround a div or image in an anchor tag. It might also mean an element other than "a" which has an href attribute.

:local-link
This pseudo selector matches any link which links to another page within the matching absolute URI.
For example, if you are on http://www.barkleyrei.com/ on a sub page, any link with barkleyrei.com in it will match the pseudo selector. It strips out fragments, but otherwise the entire absolute URI is used in the match.

:target
This pseudo selector will match any link that targets a fragment.

<a href="example.com#manual">See the manual</a>

:scope
There is limited information on this selector, but the jist is that this will match links within a certain reference, which defaults to :root and is set by a function called querySelector(), which is expected to be part of the CSS 4 selectors but there doesn't appear to be any information about it yet.

Time-dimensional pseudo classes (aka time travel)


:current
This selector has a fantastic use related to screen reading. In the example below:

:current(p, li, dt, dd) { background: yellow; }

The selected items would be highlighted yellow when their content was being read. It seems like while the verbiage is time-based, it can also mean context as well.

:past and :future
These two selectors relate to :current and refer, respectively, to elements before and after it.

I could see adding on to the above example by fading out :past and :future elements so that they do not distract a reader from the :current element being read/displayed.

Linguistic pseudo classes (que?)

:dir()
This matches items whose content is meant to be read in a specific direct, for example if it were in a language read from left to right

:lang(C)
This selector matches elements that are in language C. It differs in functionality than the selector '|=' (which checks if the attribute is a hypen seperated list of values starting with your match) because |= will only match the specified elements exactly, while :lang will reference the document's actual encoding information.


It's just a small look into what may come, and it's exciting to think about what we can affect with these selectors (and how they will translate into jQuery scripts)

CSS available in IE8 and above

Generated content (:before, :after)

• Cleaner markup


• Easier changes


• Supports images, counters, and strings

Demo

Display inline-block

• Vertical align columns


• No clearing floats

Demo

Display Table

• vertically align multiple lines of text


• equal height columns that expand to content

Demo

Dart!

In October, Google released a new open source programming language for the web, Dart. It's meant to offer better performance, managability, & scalability over javascript for large web apps (think GMail or Google Docs).

- Dart allows for classes, interfaces, and looks familiar to anyone with experience in java, C#, or other object oriented languages.

- It can run in a VM, or be compiled as a javascript that will run in "modern browsers" (so far, Chrome, Safari 5+, and Firefox 4+).

- Has it's own IDE, Dart Editor (similar to Eclipse). Code completion, pointers to open declarations, class, method, and field outlining (see the Dart Editor Tutorial for screenshots).

I compiled some sample apps to give an idea of what it can do with HTML5 canvas:

Clock

Spirodraw

Sunflower

Here's what the sunflower class looks like.

While still in its infancy, looks like we'll be able to do some fun stuff with Dart and HTML5.

Static Filter with Built-in Paging

You can find 2 example implemtations of it below. They each open in a new window, and each use slightly altered versions of the plugin. As I improve upon them I'll be posting updates.

• Simple example implementation of the Static Filter using a keyword search from Minnesota.


• Slightly more complex example implementation of the Static Filter using a dynically written JSONP feed of my foursquare checkins.


• Download It (zip file containing both examples)

The default param values are as follows:

$('#theList').palateExpander({

'sortListId' : 'sorter',

'resultListId' : 'fourSquare',

'alphaOnLoad' : false,

'filterType' : 'omni',

'pageSize' : 20,

'topPaging' : true,

'pageStatus' : true,

'bottomPaging' : true
});

I like to think that they're fairly intuitive once you start playing with them. If you pass a filterType of "Omni" it will write a toggle drop down that allows you to search inclusively or exclusively. If you select "exclusive" (either as an embed parameter or within the dropdown) your relevant results will have to meet all selected criteria. If you select "inclusive" anything that matches on any criteria will be deemed relevant.

I did leverage a chunk of my existing static paging plugin, and integrate it with the new static filtering functionality. Some modification was necessary. In the original static paging script the paging only gets written once. In the new filtering example it needs to get written repeatedly. The only drawback -in general- to this script is that sorting gets slower the more results you have being indexed. Paging is still fairly immediate however.

Need Query String Parameters?: jQuery.query

This extension creates a singleton query string object for quick and readable query string modification and creation.  This plugin provides a simple way of taking a page's query string and creating a modified version of this with little code.

Format/Structure:

Get:
          var value = $.query.get( [Query String Parameter Name] );

Set:
           var url = $.query.set( [Parameter Name] , [Parameter Value] );

Remove:
          var result = $.query.REMOVE ( [Parameter Name] );

Examples:

Getting a query string parameter:

          var id = $.query.get('id');

Setting a query string parameter:

          var queryString = $.query.set('id',1);

Removing a query string parameter:

          var results = $.query.REMOVE('id');


This plugin also contains the ability to customize a set of parameters to your liking.

Customization parameters:

• separator
• The default value for this setting is "&" as that is the standard for parameter separation.
• space
• The default value for this is true as most people prefer plus signs in query strings to be converted to spaces
• suffix
• The default for this is true.  If set to true, any arrays, when outputted to a query string will be suffixed with "[]" to show them as an array more clearly.
• hash
• The default for this is false.  If set to true, the output of a query string will be prefixed by a hash "#" rather than a question mark.
• prefix
• The default for this is true.  If set to false, the output of a query string is NOT prefixed by a hash or question mark.
• numbers
• The default for this is true.  If set to false, numbers in query strings will NOT be parsed.

View more information about this plugin here: JQuery.query

Download this plugin here: Download Page

Behold the wonder of jQTouch!

I had the pleasure of working with some jQTouch this past week while integrating a mobile site into our CMS.

jQTouch is, boiled down to basics, a simple framework for creating a mobile site that, when viewed on a phone, looks and feels like a native app. The site I was working with was more or less designed with iPhone-like interface elements, but it was all HTML and CSS, no native phone code whatsoever.

Creating a simple site is easy. First, we create the jQTouch object:

// Create jQTouch object
var jqt = new $.jQTouch(
{
 addGlossToIcon: false,
 statusBar: 'black',
 preloadImages: [
   '/images/mobile/back_button_tapped.png',
   '/images/mobile/back_button_tapped@2x.png',
   '/images/mobile/button_tapped.png',
   '/images/mobile/button_tapped@2x.png'
 ]
});

Some things you can set in this include class selectors that trigger navigation events (like "back", "cancel", "submit"), preloading assets so that they display quicker (as seen above), animation options, "app" options like home screen icons, etc. See a whole list here: https://github.com/senchalabs/jQTouch/wiki/initoptions

The jQTouch object is used throughout your code after it is made primarily for history navigation, but you can also add custom animations. Making a custom animation involves some CSS3 transitions, but we're not going to get into that here.

Let's talk about how a basic jQTouch page is set up...

    
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQTouch demo</title>

        <script type="text/javascript" src="//www.google.com/jsapi"></script>

        <script type="text/javascript"> google.load('jquery', '1.4.2'); </script>

        <script type="text/javascript" src="js/jqtouch.min.js"></script>

    </head>
    <body>
        <div id="jqt">
            <div id="home">
             <div class="toolbar">

                 <h1>Tech demo</h1>
                </div>
                <a href="#test" class="slideUp">Test</a><br /><br />
                <a href="#test2" class="flip">Test2</a><br /><br />
                <a href="#ajax" class="slideLeft">Let's try some AJAX</a>
            </div>  
            <div id="test">
         <div class="toolbar">
                    <h1>Tech demo</h1>
                    <a href="#" class="back">Go back</a>
                </div>  
                <div class="container">
                    OMG!
                </div>
            </div>
            <div id="test2">
            <div class="toolbar">
                    <h1>Tech demo</h1>
                    <a href="#" class="back">Go back</a>
                </div>             
                <div class="container">
                Hello!<br />
                </div>                
            </div>
            <div id="ajax">
             <div class="toolbar">
                    <h1>Tech demo</h1>
                    <a href="#" class="back">Go back</a>
                </div> 
                <div>Put data here: <br /></div>               
                <div class="container">
             Waiting...        
                </div>
            </div>
        </div> 
    </body>
</html>

Brutally simple, it consists of a container called "jqt", in which you put a div for every "screen" your "app" will have.

Animations are specified through classes. Some animations that exist by default are:

1. slide (Normal links, by default, use the "slide" animation.)
2. flip
3. slideUp
4. swap
5. pop
6. dissolve
7. cube
8. fade

Most of the stuff we do requires sending queries and transforming blocks of XML from data sources, but everything is on one page, so you have to resort to ajax to grab your data. Let's look at an example of how we'd do an ajax call to load some data.

$(function() {
    
 $("#ajax").bind("pageAnimationStart", function() {
  $("#ajax .container").load("test.txt");
 });
    
});

Looks easy enough, right?

We're still missing something. "pageAnimationStart" is an event that throws when you enter the page, AND when you exit the page. Luckily, you can pass some parameters into the empty function to grab the direction you are going. Then we just check for when the direction is "in" to only grab data when we are visiting the page.

$(function() {
    
 $("#ajax").bind("pageAnimationStart", function(e, info) {
                if (info.direction == 'in') {
          $("#ajax .container").load("test.txt");
                }
 });
    
});

Now we'll only get data once we visit the page, and avoid extra ajax calls, which can bog down mobile phones and use up their data. I'm using load in this example, but any sort of ajax function will work.

View this site live at http://www.nessthehero.com/junk/jqtdemo

Resources:

• jQTouch
• jQTouch GitHub

palateExpander.js Beta Release

This plugin gets instantiated on an un-ordered list (via an ID) with list items each containing an image and a link with a nested span. All of the class names and extra markup are dynamically injected. At the moment it only plays you tube videos, but it could easily be modified to handle the HTML5 video element. Each list item is initially detected by the script as being either a photo or video. They can be intermingled. CMS integration shouldn't be very difficult, and customization should be fairly easy.

• Example implementation of the Palate Expander


• Download It (zip file containing compressed and uncompressed versions of the script with an example)

In it's simplest implementation, you can just call it out without any params.

$('#theList').palateExpander();

The default param values are as follows:

$('#theList').palateExpander({

'size' : 'custom',

'randomStart' : 'yeah',

'carouselWidth' : 400,

'itemPadding' : 10,

'itemItemHeight' : 60,

'maxWidth' : 150,

'maxHeight' : 200,

'rowIncrement':5,

'maxPhotoHeight':400,

'videoHeight':259

});

Any combination of them can be passed. I like to think that they're fairly intuitive. I almost built an auto-rotation into it, but that seemed dumb. I haven't tested it at full screen yet...but why the hell would you want to do that anyway? Most importantly, you'll need to set the containing element to be position:relative; and give it a fixed width, because the script makes the targeted unordered list position:absolute to allow the expanded states to overlap other page elements. Obviously you will also not want to apply overflow:hidden; for exactly that same reason.