What is it?

JS Bin is a form of paste bin, but with a twist. It allows you to also include the HTML and CSS to provide context to your pasty. As such, it means you can actually run the JavaScript and pass this on to a colleague to help to debug.

A short list of features:

• Save private snippet
• Remote Ajax debugging
• Snippet URLs run entirely on their own (i.e. without the JS Bin framework around them)
• Support to quickly inject major JS libraries
• Saves state within the open window (i.e. refresh and the code doesn't reset)

In addition, any code snippet can be edited.

Take this example: query string aware JavaScript (http://jsbin.com/utala/)

...to edit it, you just add '/edit' to the URL and you can modify the snippet yourself and save it as new:

http://jsbin.com/utala/edit

Why?

I had a conversation with Rey Bango some months ago where he was trying to debug a piece of code that had an Ajax hit. He sent me the code, but without seeing it running I wasn't too much help to him.

I made a start some time ago offline and planned for a system to allow you to create fake Ajax handlers to respond to requests.

In the last couple of weeks I saw John Resig's learning app and the sandbox idea suddenly had legs again. I knew I could write something very quickly, almost entirely in JavaScript (and since it's a JS debugger, there's no point in the extra work to make it degrade).

A small server side php file does the saving work (and maintaining old code snippets) and over the course of a few hours I had a fully working webapp that allows me to create Ajax responders and code snippets that run live and can make real Ajax calls.

Examples

I've recorded a couple of screencasts showing how it can be used:

• General introduction
• Ajax debugging

Feedback

If anyone has suggestions, feedback, bugs, etc - please let me know!

However, I didn't think I could read the query string in the script tag from within the JavaScript - until now.

The Trick

The trick is simple, in your externally loaded script, you read the last DOM element loaded (this script tag that loaded the current script), grab the last DOM element, read the src and there's your query string.

The Code

// script included using test.js?a=10&z=50
function getLastChild(el) {
  return (el.lastChild && el.lastChild.nodeName != '#text') ? getLastChild(el.lastChild) : el;
}

var query = getLastChild(document.lastChild).getAttribute('src').replace(/.*\?/, '');

The query variable now contains the full query string and can be used to change the result of your script.

I would then pass that in to my getQuery function so I had access to it as an object.

Demo

I've created two separate snippets on JS Bin (my new weekend project), one containing the external script code (with getQuery) and one that makes the call:

• Demo of query string read (source)
• Source of external script

A few hours of weekend playing later, I've got automatic Twitter keys (or optionally tab completed). But I've also decided to take it a little further and pull the autocomplete in to it's own greasemonkey script that can be run on any page.

There's two versions:

1. Twitter Keys
2. Autocomplete for any site

Twitter Keys via Greasemonkey from Remy Sharp on Vimeo.

For now you'll have to use Greasemonkey to install (rather than a straight plugin), and if you want to add more shortcuts, you'll have to edit the script by hand - though I hope to create an interface soon.

Get the twitter upgrade or via userscripts.org

The autocomplete script (for use on any page) is available here:

Get the autocomplete script or userscripts.org

Note that with autocomplete, you will need to open the greasemonkey script and add new shortcuts manually. They only currently trigger on space (or new line).

List of Twitter key auto completes

You can poke around the code, but here's a list of all the keys:

love : ♥
plane : ✈
smile : ☺
: ☺
: ☺
music : ♬
boxtick : ☑
spade : ♠
phone : ☎
darksmile : ☻
song : ♫
box : ☒
whitespade : ♤
carrot : ☤
sad : ☹
: ☹
: ☹
note : ♪
female : ♀
star : ✩
letter : ✉
pirate : ☠
tick : ✔
male : ♂
darkstar : ★
cross : ✖

cook : ♨
random1 : ❦
cloud : ☁
peaceout : ✌
king : ♛
rose : ❁
islam : ☪
umbrella : ☂
pen : ✏
bishop : ♝
flower : ❀
tools : ☭
snowman : ☃
right : ☛
-> : ☛
darkknight : ♞
darkflower : ✿
peace : ☮
sun : ☼
left : ☚
<- : ☚
knight : ♘
random2 : ✾
ying : ☯
christ : ✝

moon : ☾
up : ☝
rook : ♖
snow : ✽
comet : ☄
down : ☟
pawn : ♟
random3 : ✺
prince : ☥
cut : ✂
write : ✍
queen : ♕
darkstar2 : ✵
copy : ©
tm : ™
euro : €
<< : «
>> : »
yen : ¥
wheel : ✇
recycle : ♺
retweet : ♺
rt : ♺
radioactive : ☢

So I've taken it upon myself to a) upgrade his script to work on all pages, not just the home page, and meld together my Twitter scripts with his moving towards (in my best deep Jerry Bruckheimer voiceover voice): The Ultimate Twitter Upgrade Script!

I've also striped out the code that waited for the DOM to be ready - not sure why I did it in the first place, but it looks like the whole DOM is available to greasemonkey as soon as it hit the code - so it means the lat/long lookup is quicker.

Get the twitter upgrade or via userscripts.org

For more information on my bits of the script, have a read of my initial post

Rather than bitch and moan the whole time, I've made myself a solution: I can now pull a tweet in to an email and thus continue/create the conversation offline.

In addition, since I'm writing code that will parse the Twitter DOM, I might as well fix the latitude and longitude data that appears on Twitter (since I can't do geo mapping in my head).

I've done this as a Greasemonkey script:

Tweet offline & Locations

Offline Replies

It simply adds a reply icon to each tweet, which plugs the contents of the tweet in to the subject of an email allowing you to continue a conversation offline.

It doesn't plug in the person's email address since Twitter's API doesn't (rightly) open that information up - but it's a quick convenient plug in. I'm considering taking a look at Ubiquity to see if I can extend this to a plugin that you can continue the last conversation offline for X user.

Locations

With the iPhone having GPS or using the 'locate me' functionality, there are more Twitter profiles that show 'iPhone: lat,long' which doesn't mean anything to the regular user that can't map latitudes and longitudes in their head. So, inside the twitter greasemonkey script, it will use Google to work out the actual location of the lat/long coordinates.

Few examples

Load up the Twitter greasemonkey script and take a look at a few people that have the lat/long on their Twitter profiles:

• rem
• shapeshed
• simonw

How's the techie stuff done?

It's actually two calls to Google's API - but since it's done through your browser, there's no worry about hitting limits.

The first call goes off an requests the directions from the lat/long combo to the same lat/long position. This results in the road name being given. This is used to zoom out a little bit more to give a reasonable description of the location.

The second call is to Google's typical geo mapping API, giving the street name from the first call and the original lat/long to help locate the street.

The result is the full location in a string.

In some ways I wonder if this information is a little too much, knowing exactly which street the tweet was made, but then on the other hand, the lat/long is there in the first place, which is actually giving me this detail (I just can't work it out in my head!).

Aside from that, there's some nifty little iframe magic going on in the script to get around the sandboxing that greasemonkey does, so that I can hook JSONP callbacks in (the Google map requests).

I've actually been looking forward to turning 30. I've been working towards this kind of "stable" version of myself over the last few years. Getting to know myself (not that way you cheeky buggers) and understanding what I want.

In fact, the last year has been a pretty successful one for me:

• I started jQuery for Designers and it receives almost 3 times the amount of traffic compared to this blog and only contains 12 articles.
• I've been approached about writing a book of jQuery for Designers - very flattering and plan to take it up.
• I've done my first 3 public speaking gigs.
• Finally got out of the flat and attended some local meetups (particularly SkillSwaps), and made a few friends in the process.
• Left Logic (my business) is going very, very well. Clients are approaching me for new and interesting work and I'm always excited when they've found me through one of my sites.
• Finally resigned, entirely, from DL, after 9 1/2 years, though have been scaling down the days over the last few years as I was given time to focus on building Left Logic.
• Cycled from London to Paris (and Tweeted it)

Finally, I'm most proud of myself, for attending the gym for the last 9 months, going 6-8 times a week and now I've got back down to the same waist size I was when I was 22 and clothes fit me again that I used to wear in the 90s...though apparently that's not a reason to wear my shiny tight red top according to my wife

I'm really looking forward to the next era of my life, I'm planning on moving to a co-working office space in Brighton (perhaps the Werks), I want to grow my business and take on employees who are as passionate about the web as I am, I'm thinking about running a workshop course at some point in the next year or two and I'm likely to have started a family with my rockin' wife.

There's actually a very strong business case and requirement for the marquee tag - since the only the alternative is often a hacky solution (I feel) that shifts the CSS left position which, depending on your browser, will begin to eat away at your CPU.

Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it's built directly in to the browser). So let's solve this with JavaScript.

Demo

This demonstration shows 3 jQuerified marquees and 3 standard marquees. You can see how the untouched marquees are jumpy to animate, even in the later browsers such as Firefox 3 and Safari - let alone IE6.

Demonstration of jQuery Marquee

Download

Download jQuery marquee plugin

Usage

Include the latest jQuery and the plugin file via the script tag, then:

$('marquee').marquee(optionalClass);

Note that the enhanced marquee doesn't particularly have to apply to a marquee tag - but it is reading the effect details from the tag - currently it will default to behaviour = scroll, dir = left, speed = 2. There's no (current) option for setting an overall default - but I'll add this if people feel it's required.

How it Works

There's a few solutions available that create a similar effect, but this plugin does two things differently:

1. Progressively enhances the marquee tag making this plugin uber easy to use.
2. The effect is not achieved using CSS. It's created using the overflow scroll on the element, which massively reduces the work the browser has to do - i.e. there's no re-rendering due to changes in CSS, it's scrolling using native functions of the browser.

It's worth noting that behind the scenes, the marquee tag is being lifted out of the DOM and replaced with divs. However, when it's chains in jQuery, it returns the new enhanced marquee div, so you can still hook click events, or navigate the DOM element if you wish - i.e. business as usual.

However, be warned - as we are lifting the marquee's contents in to a new div, it means and predefined events or data will be lost. To avoid this, make sure the marquee plugin is called before hand.

Events

The following events can be bound to:

• stop - triggers when a loop is completed
• start - triggers when a loop is started
• end - completely finishes the loops if set

The follow events can be triggered by the user:

• pause/stop (both do the same thing)
• unpause/start (both do the same thing)

Support

I've written the marquee to run on a single timer function rather than one per marquee, the idea being that you could go crazy and add lots of marquees, and this code should scale^†.

Also, the marquee doesn't currently support direction="up" or direction="down"...yet. Come back later and I'll upgrade if there's any interest.

† I've not tested it with more than 3 marquees yet - feel free to test and give feedback

Other Uses

I've played around with the implementation of the marquee and I've been able to easily create the effect of the user clicking and dragging the marquee back and forth - which is very smooth (note that before I start the drag effect, I need to trigger a stop event):

$('div.demo marquee').marquee('pointer').mouseover(function () {
  $(this).trigger('stop');
}).mouseout(function () {
  $(this).trigger('start');
}).mousemove(function (event) {
  if ($(this).data('drag') == true) {
    this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
  }
}).mousedown(function (event) {
  $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
  $(this).data('drag', false);
});

This year was much more focused on the theoretical than practical, which in retrospect, last year appealed to skills I was a lot more familiar with. That being said, this years talks were superb, and stimulated a lot of conversation and thought.

Inspiring Talks

My two favourite talks were by Aleks Krotoski, and Jeremy Keith.

Play

Aleks talked about gaming and the web, and although I'd heard some of the buzz on the Intertubes about how game play can be introduced to web sites, her talk really helped me visualise how that can be done, and opened my mind a little more beyond just using the Internet to deliver web pages.

My biggest gripe with the console gaming world and the Internet is the proprietary BS that we're still seeing. Though perhaps it's getting better - at least you can buy Guitar Hero 3 on a multitude of platforms. My gripe is that, although GH3 has been developed by the same company, and multiplayer works via the web, and there must be a standardised protocol for joining players together: I can't play my Wii version of GH3 against my friend who has an Xbox 360. WTF?

In a way, I see the Xbox Live subscription service a little like the IE6 of gaming.

The Universe of Links

I was warned by Andy Budd earlier in the morning that 20% of people would probably get and love Jeremy's talk, the other 80% will think it's pretentious waffle.

Whether that was a subtle reference to the Pareto principle or not - I actually (a little to my surprise) found the talk superb and inspiring.

I thought the talk was so good that I'm close to convincing my non-techie wife to listening to the podcast once it's available.

Some of the best bits:

• Black swans, and our need to explain
• Small world, 6 degrees of separation - and our logically random minds not being able to accept it.
• Not a particular point in the talk, but 6 degrees of separation is only successful from the weakest links in our social network, so therefore they're sometimes the best links to have. Something I'm trying to make use of in my "real world" starting today.

Post Conference

As much as I love having my brain go crazy with inspiration and ideas, I always experience the same drop off after conferences: the distinct feeling that I must build something.

That something needs to both be of business value and challenging existing products.

I've got lots of little ideas brewing, and God knows I've got too many domains (and there's more that don't point to my machine), but it's a matter of finding time and finding an idea that I'm passionate enough about to take to fruition.

The symptoms of this bug are that when you set the CSS display property to block from none the element doesn't appear. In fact, it has a height of zero.

The bug only happens in a specific markup situation, as such I've never seen it before now - but it's worth being aware of since debugging the issue would normally start in the JavaScript, when in fact it's Webkit that's the problem.

The bug occurs when your hidden content is an inline element, containing <br /> tags and proceeded by another inline element. It's tricky to explain, but can be seen in the source code of the example below:

View the demonstration of the bug

The fix, after a lot of debugging, turned out to be simply to follow the inline element with a block element. Somehow the height in the first example is being set to zero allowing the inline span to sit above the element. In the second example, the block element clears the newly displayed span and it appears correctly.

It's pretty convoluted, which is why it reminds me a of an IE bug!

<xsl:variable name="show_comments">
  <xsl:choose>
    <xsl:when test="//QUERY_STRING/show_comments"><xsl:value-of select="//QUERY_STRING/show_comments"/></xsl:when>
    <xsl:otherwise>0</xsl:otherwise> <!-- default value -->
  </xsl:choose>
</xsl:variable>

Note: //QUERY_STRING is a made up variable

I know XSLT might be a bit random for me, but client wants: client gets