Don’t ask me why, but I needed a way to explode some stars in a fancy animation on a page. At first I found Fireworks.js, which was kinda cool at first–but I quickly realized a few things:
1. It’s using raw javascript, which is a pity if you are already loading the power of jquery and jquery.ui
2. It wasn’t what I really wanted. I wanted STARS!
Although, the default implementation uses a star graphic I whipped up in Illustrator:
You can still attach the plugin to any image–either on the page or not. Soccer balls? Severed heads? I don’t care what you do with it but FORK the code if you’ve got improvement ideas.
Check out the Demos Page for examples.
I’m working on a project that required some apparently previously unexpected UI controls. One of them, I decided should be made into a jQuery plugin and get some feedback from the community. I call it jquery.codeassist.
OK… so what the hell does it do?
The plugin creates a code assist menu within textarea and input fields, which allows users to select from a list of suggested values. This effect is triggered by the entry of a key character such as %, $ or [
So far, only %, $ and [ (with an optional closing key of ]) are supported–though, with some tweaks, I know I can get it to accept any input.
OK… but really, what the hell does it do?
It was built for the purpose of allowing users to enter dynamically replaceable code bits into textareas and input fields. A use case example would be if you are allowing users to create a page template or message template that will need to be filtered for the audience or some other situation involving different values for different pieces of data at a time. A user can enter in the code bits, which you can replace behind the scenes in the template.
OK… so is there a real world example?
Since the impetus for this plugin comes from a proprietary and as of yet unseen stealthy startup, I’m not at liberty to show the awesome reason why I found it necessary to create this plugin. But here’s a totally crappy and simple demo so you can see what the hell I’m actually talking about: Crappy, Simple Demo
And you can download, fork and whatnot on github: Source on GitHub
Issues I had with the implementation
Mouse position
The thing that is bugging me most at the moment is that I wanted the menu to appear where the mouse is. Simple enough, right? Just take a look at the triggered event pageX and pageY, right? Well, that would work if I was attaching to a mouse event–but the trigger for the menu is a key event, which doesn’t care about the position of the mouse. So to get around this, I’ve got a listener that’s caching the mouse coordinates so we can look at it when we need to:
// this is stupid but I can't find a better way to get the current mouse position// since the key events don't contain the pageX and pageY // so following it around and caching the position :(
$(document).mousemove(function(e){
codeassist.pageX= e.pageX;
codeassist.pageY= e.pageY;});
// this is stupid but I can't find a better way to get the current mouse position
// since the key events don't contain the pageX and pageY
// so following it around and caching the position :(
$(document).mousemove(function(e){
codeassist.pageX = e.pageX;
codeassist.pageY = e.pageY;
});
I am genuinely annoyed about this.
Cursor position
For sane browsers, you can simply access element.selectionStart to get the index that the cursor is positioned within the text. However, for IE, you have to hack up a nasty solution:
... // up here, we've defined el as the input, v as the current value of the input, and t = $(this), etc..var before ='';// text before cursorif(el.selectionStart!==undefined){// sane browser
before = v.substring(0,el.selectionStart);}else{// IE
t.focus();var range = document.selection.createRange();
range.moveStart('character',-v.length);
before = v.substring(0,range.text.length);}
... // up here, we've defined el as the input, v as the current value of the input, and t = $(this), etc..
var before = ''; // text before cursor
if (el.selectionStart!==undefined){ // sane browser
before = v.substring(0,el.selectionStart);
}else{ // IE
t.focus();
var range = document.selection.createRange();
range.moveStart ('character', -v.length);
before = v.substring(0,range.text.length);
}
I just stumbled upon this opinion column in Smashing Magazine, which claims that Web Designers should not use ad blockers. Along with a bunch of lousy arguments, the author fails to account for my two biggest reasons for using ad blocking:
Resource Consumption (time and bandwidth) – it makes the web faster
Ads Mostly Suck (and are equally ineffective)
First, let me say that rather than adding adblocker software or plugins, I use Dan Pollock’s host file: http://someonewhocares.org/hosts/. Instead of blocking ads directly, it redirects ad server domain resolution to localhost. It’s fast, it’s free, and it doesn’t take up resources running any extra processes.
A note from his file explains a bit of why it’s useful:
# Use this file to prevent your computer from connecting to selected# internet hosts. This is an easy and effective way to protect you from # many types of spyware, reduces bandwidth use, blocks certain pop-up # traps, prevents user tracking by way of "web bugs" embedded in spam,# provides partial protection to IE from certain web-based exploits and# blocks most advertising you would otherwise be subjected to on the internet.
# Use this file to prevent your computer from connecting to selected
# internet hosts. This is an easy and effective way to protect you from
# many types of spyware, reduces bandwidth use, blocks certain pop-up
# traps, prevents user tracking by way of "web bugs" embedded in spam,
# provides partial protection to IE from certain web-based exploits and
# blocks most advertising you would otherwise be subjected to on the internet.
I started using this when I moved to Germany and ended up with a mobile internet connection for my main line, which is dirt slow. I couldn’t afford to waste my 5GB/month capped usage on ads–or slow down my general use with waiting for all the analytics and ad servers to resolve and load (yes, I block analytics too but that’s another post with a whole new topic).
But now that I’ve been using the hosts file for a while I’ve started to think that this is like when I abandoned television in favor of the internet for viewing videos. I got sick of the commercials. So much that I joined a revolution in a new medium that allowed me more fine-grained control over what I consume and how I consume it. I can’t watch TV anymore–the commercials are insufferable.
Yes, I’m a Web Developer, and yes, I use ad services on my sites–and I feel genuinely icky about it (but it pays for my hosting and gives me pet-project freedom). So, please, block my ads. If you don’t want them, I don’t want you to have to suffer them. You probably aren’t the person who makes me money on my ads anyway.
But here’s the kicker: When I find that there’s an ad company I like, who does things right, I allow them through my hosts file filter. Sadly, I haven’t found a decent service for sporting ads that don’t suck on my websites.
Commercials need to be better. Ads need to be better. Ad services need to be a hell of a lot better. A few ad agencies have caught onto this, creating viral advertising that people actually WANT to consume. I’m sure you remember the Sonia Bravia superball video. People didn’t block it. Instead it got passed around.
Here’s another ad-woth-watching by Nokia that gives me goose bumps, which I found at the end of a TED.com talk:
In closing, if you don’t want people to block your ads, make them not only worth consuming but sharing, make the ad servers fast and don’t put them in the way of what users actually want to consume. Make your ads into content that is served with the other content users want–so they can’t block it without blocking everything else they came to see (all of it hopefully as good as the rest). If your ads are the content that consumers want, consumers won’t worry about blocking it. Besides, if consumers want to block your ads, face it, your ads suck.
