Archive for the ‘jQuery’ Category

New Cometd client and server demo

Friday, November 7th, 2008

On and off for the last couple weeks I have really been pushing myself to learn Java better. I constantly find myself unable to do things I want to with the languages I usually use (PHP specifically). As I am getting better I am coming to like it a lot more. As any reader of my blog (do I actually have ‘readers’?) know, I am really into Cometd, which the most major implementation of is written in Java. So in order to utilize Cometd Java and push my jQuery plugin further along, I figured it was high time I learn Java. I am really glad I am too. Just in time for my new Android phone too :)

CometdMap
Almost every demo of Cometd out there is a chat application, next up is stock tickers. There are one or two more I can think of off hand, none of which could be made into something more useful. I have had an application idea in the back of my head for quick some time. I really like doing work with maps, have been doing professional Google Maps work for a couple years, had to get the (second) dorkiest bike computer with GPS to map my rides. I have wanted for some time to do a real-time map. CometdMap is a proof of concept of that. It has no actually data input at the moment, infact, it is really basic right now. What it really does is show how simply you can build a Cometd Java app. I was really surprised at how easily I built this with my limited knowledge of Java.

What does it do
Right now, if you build and run the application you will get a simple Google Map. Clicking on the map will place a marker. Wowee! Pretty basic yeah, but what is going on here. Clicking the map publishes the point to the server, it is not until the server returns the data to the subscription callback that it is added. That is about all for the client side. On the server side two things are going on. First, when a new client joins they are added to a list, very similar to the way the Cometd Chat demo handles clients for private messages. Second, when points are published they are tracked on another list. So what can we do with these lists? Add a couple points and reload your browser. Since you are now a new client and there are points on the list, the old points are sent back to you. This will work for any new clients joining also. With multiple clients connected markers are updated to each in real-time.

Download & Build
Download
As I have mentioned before, the Java build environment and I do not exactly get along. In the tarball there is a script call build (partially ripped from the Harmony build script). If you have built the Cometd demo from Jetty with Maven this script should work just fine. Otherwise change the paths in the build (and server) scripts to point to the directories where your Jetty and Comet components are.

Enjoy, hopefully everyone is able to build with few problems. Check back in a couple weeks to see what I have in store next. Cheers, Morgan.

Progressive Enhacement

Wednesday, October 15th, 2008

Just read this blog post over at Learning jQuery. It is a tip on how to avoid ’style flashing’ on large and complex pages. Read it. Read it to get the explanation as to why just CSS cannot solve this problem. If you have been unfortunate enough to work with me, especially in a JS/design roll you will have heard me bitching about CSS in jQuery. I do not like when this is done. CSS is way better at CSS then jQuery. The benefits of apply the style is this global manner are huge.

  • Speed of CSS
  • <linked> files get cached
  • Your Javacript will be simpler, smaller, faster
  • If you are working with a team a designer can work on it without causing conflicts

And this does not just apply to jQuery either, any framework or script can (and should) utilize this technique. Keep in mind this is not a cure all for progressive enhancement. You still cannot go all willy nilly AJAX without an already working base system. Thanks for the great tip.

jQuery Comet update (finally).

Tuesday, September 9th, 2008

Now that I am semi-settled in here in Berlin (anyone have a room for rent? (cheap)), I am trying to get caught up on stuff. I finally pushed some fixes suggested by Jörn and got the chat demo reported. Its all in the SVN at Google Code and setup an external item in the jQuery SVN. Also sent an email to Greg Wilkins today, hopefully I can get this into the Cometd SVN also.
Next release will be a total rewrite, I made a lot of mistakes in the original, and the prefer jQuery plugin style has changed. Getting back to this point will not be too difficult, and well worth it.

Euro to USD Ubiquity command

Friday, September 5th, 2008

I have been playing quite a bit with Ubiquity lately. So far, I think it is really cool. One thing that has always prevented me from really getting into Firefox extension development is the constant restarting. I am a two or three line and test type of developer and that just does not work. But Ubiquity reload all the command every time you open it. And its got jQuery. Since I am living in German now but still earning the US Dollar, I am constantly concerned with the exchange rate and find myself visiting xe.com frequently. Perfect chance to make a new command. So far it just does Euro to USD, I hope to add all their options. Here it is.

DBXMLAdmin updates

Thursday, May 29th, 2008

After being completely annoyed by SimpleXML earlier I decided it was time to look at DBXML again. This time I ran across a forum posting saying that DBXML 2.4.11 had a bug in it preventing updating. After upgrading to 2.4.13 I was able to update documents in a container. So I made some update to the project but realized that this was more of an out of control experiment than a real project. Already started redoing it, all the PHP is going to be new but I have managed to reuse most of the Javascript.

I also found this site DBXML With PHP, it is a small wiki for, as the name says, using DBXML with PHP. It has not been updated in a while (until today) but I will keep adding things as I progress on DBXML. Hopefully other will help out too, right now there are few resources for DBXML in PHP.

jQuery multiSubSelector

Sunday, May 11th, 2008

I am doing some work today on the DBXML Admin adding editable tag names, attributes and values like in Firebug. The way the HTML was laid out, the attributes each had a tag around them for styling. I was working on returning the LI/SPAN representation of the XML as an XML string for updating the server. The problem I was running into was in the way the selector was ordering the elements to be returned. The right way. What I wanted was different.

$('li:eq(1)').find('span.tagName,span.tagAttr,span.tagAttrValue,span.tagValue');

This worked fine if the node only had one or no attributes. But if there was more than one, it would group attribute names together and then group their values together. I know this could be solved with a bit of mapping or checking the tags while eaching, but making a new selector sounded funner.
So this is what I came up with. First I changed around the attribute tags. The span.tagAttr was a wrapper for the new span.tagAttrName and the original span.tagAttrValue. And the new subselector allow grabbing multiple descendant rather then just one ($(‘ascendant descendant‘))

$('li:eq(1)'.find('span.tagName,span.tagAttr(span.tagAttrName,span.tagAttrValue),span.tagValue');

Simple as that and I have everything in the order it was supposed to be. I know this could be accomplished several different way. It was more of an exercise in selectors, but in the end I think it addition to the selector engine.
Here is a link to the patch for the current SVN.

Exact content selector for jQuery

Wednesday, April 16th, 2008

I whipped up this selector after having the problem described in my last post with :contains(‘16F88′) returning 16F88, 16F883, 16F886, etc.


jQuery.extend(jQuery.expr[":"],
{
content: "(a.textContent||a.innerText||'') == m[3]"
});

This will add the :content selector, that will return only exact matches.

Fun with jQuery and bookmarklets

Wednesday, April 16th, 2008

So I pretty much use jQuery for everything. I have used it with Rhino and jetty to parse web pages in data mining. While doing CSS or design for work I regularly use jQuery and the Firebug console to make alterations before making changes to XSL or any other backend. Sometimes while on other sites, something will either just really bug me, like flash or bad element positioning. Firebug takes great care of this, inspect element, delete element. Done. But in a situation like doing a chip comparison on website for piklab. But they do not use jQuery.

The Bookmarklet.
The idea of a bookmarklet is too add the link to your favorites and when it is clicked the Javascript is executed in the pages scope. This script create a new script element, sets the src attribute to the latest version of jQuery and adds it to the current page. Now you can start choppin’ up anyones pages with jQuery.

The Problem.
So like I said. I was trying to look up info on piklabs website. They have headers on a really long data set and I am lazy. The chip I was looking at was near the bottom, and I cannot remember what those headers said by the time I got there, so those checks and x’s mean nothing. Inspect Element… We have some tr.headers (only at the top). tr.odd_row and tr.even_row for the zebra striping.

The Selector.
The chip I want is the 16F88 in the Midrange Family. First I get the row elements
$('tr.odd_row,tr.even_row')
This get all the non header row, now I want to remove all the element not containing 16F88, this is where jQuery really sets itself apart from other framework because of the way selectors can be stacked even within a single string.
$('tr.odd_row,tr_even_row').filter(':visible:not(:contains("16F88"))')
Because :not is a selector function that takes another selector, I can invert the :contains string removing all the other chips in the list. Yay. The one short coming here is that the :contains selector is a non-exact selector, so this match F88, F883, F886. This is not so much a problem of this selector, but that there is not an exact content selector in jQuery yet, unlike the attribute =, !=, ^=, $= (equal, not equal, starts with, ends with) selectors. And even with that, jQuery is still my favorite framework, and this is a nice little out of the normal use for it.

jQuery Comet in the wild

Monday, February 4th, 2008

I am really exited about recent talks I have had with the Erlycomet team, and now they are including an early version of the jQuery cometd plugin as one of their demo options! I am working now to include some code they contributed in the main distribution. I also setup a Google Code project with the latest SVN. I am really exited about all of this, and hope to see more interest and contributions to the project.

Callback polling

Monday, January 21st, 2008

I spent this last weekend in Carson CA watching the UCI Worldcup of Track Racing. Pretty amazing sight. But between races I managed to implement callback-polling in the Comet jQuery plugin. Now cross domain calls are supported. As usual you can get the code here.