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)