AC/DC Releases First Ever Music Video Done Purely in MS Excel...
I have no idea what prompted this idea, but AC/DC has released what they call "the world's first music video in Excel format." You can download the video from AC/DC's website. Here's the YouTube video of the video with audio from AC/DC's new single Rock-n-Roll Train.
Barney Boisvert releases FlexChart v2.0
Barney Boisvert released FlexChart 2.0 yesterday. This is a Flex-based charting tool that can be used to easily adding graphs to your ColdFusion projects. While ColdFusion does have a number of Charting tools integrated into the product, it seems every time I go to use them I run into limitation after limitation that prevents me from using them. So, if you're looking for alternative charting for ColdFusion, the you should check out the FlexChart demos.
Chimpanzee Rides Segway
Segway's are so easy to use, even a Chimp can use one! This just cracks me up—but I get a kick out of just any video that stars a Chimpanzee.
Linkselect jQuery Plug-in Released!
My current employer (Giva, Inc) has released another jQuery plug-in today called the Linkselect jQuery Plug-in. This plug-in converts a normal <select /> element into a component that can be highly stylized via CSS. While there are a number of similar plug-ins already, there are a several of key differences which we think make this unique:
- Drop down menus are intelligently positioned to stay in the viewport
- Specifically designed to work in a limited amount of real estate
- Specifically designed to work well with elements aligned on the right edge of the viewport
- Full keyboard support (emulates IE6's <select /> element)
- Feature rich API (for updating value, replacing options, disabling elements, etc)
- Many callback features to control behavior (on change, on init, on format, etc.)
- Supports tabindex
We've put together an example page that demos many of the features and how to use the plug-in.
Gas prices... $2.92/gallon for premium in Central Ohio...
I just filled up the tank this morning and for the first time in a long time I saw "Premium" under $3/gallon. I filled up at Giant Eagle's GetGo here in Hilliard, OH (so I could take advantage of our fuel perks) and premium was listed at $2.92/gallon. I've seen the price of regular drop under the $3 mark a couple of times in the past few years, but this is the first time I remember seeing premium under the mark.
I'm beginning to think the oil companies are worried that the US is really serious about trying to find other renewal energy sources this time and is dropping prices in hopes that it stalls the momentum of change.
Find all tags with an attribute containing a specific phrase in Eclipse
If you want to quickly find all tags that have an attribute containing a specific value, you can use the following regular expression:
You can use this from either the Global Search (CTRL+H) or from the Find/Replace (CTRL+F) dialogs (just remember to check the "regular expressions" option.)
You'll need to replace the following tokens in the string with the correct values:
TAGNAME = The name of the tag
ATTRIBUTE = The tag's attribute to search
VALUE = The value to search for in the tag's attribute
This regular expression is designed to find the VALUE anywhere in the attribute's value. If you wanted to find exact values, you can remove the [^"]* around the (VALUE) string to make it find exact values.
For example, to find all anchor tags pointing to the file "hello_world.htm" you could use:
Finding all matching open/close tags in Eclipse
If you want to quickly find all matching open and close tags, you can use the following regular expression:
You can use this from either the Global Search (CTRL+H) or from the Find/Replace (CTRL+F) dialogs (just remember to check the "regular expressions" option.)
The "(?is)" makes the regular expression ignore case and search over multiple lines. Just replace the string "TAGNAME" with the tag you want to search. For example, to find all <cfloop> tags, just do:
Yahoo! Sirius Radio Widget mod
[UPDATED: Tuesday, October 20, 2009 at 4:27:19 PM]
Tanner Jepsen created a Sirius Radio widget I've been using for years. He's since upgraded the widget to a v3 status, but I've never cared for the new UI. I prefer the compact nature of the original version.
Sometime last year, I sent Tanner a mod I had done which adds the ability to post song information to a URL (which is how I get my "now listening to" on my blog updated with my Sirius listening.) He mentioned he'd add the feature to existing updates, but I don't think he ever got around to adding the feature.
However, I recently started using Yahoo! Widget v4.5 and the Sirius Widget v2.2.x stopped working. The reason is the KON file uses some depreciated syntax. So over the weekend I modded the Sirius Widget again so that it would work in Yahoo! Widgets v4.5.
So, I thought I'd go ahead and release my mod to the wild. My mod is based on the original v2.2.0 and does the following:
- Works with Yahoo! Widgets v4.5
- Adds the "Web Status URL" preference to the "IM Status" tab (this posts listening information to a URL)
- Adds new preference for toggle "Check for update" status (you can now disable this to speed initializing)
This mod is not support by Tanner and I make no guarantees the widget will work for you.
Tanner has updated his v2.2.x to include my mods in v2.2.3, but also removed some code that was hitting his server. I've updated the link on this site to point to his new version
Yahoo! Widget - Sirius Tuner v2.2.4
Version History
v2.2.4 [October 18, 2009]
+ This is a link to Tanner's v2.2.4 which includes changes to the code
v2.2.3 [September 30, 2008]
+ Added new preference for toggling the "check for updates" feature
Adding visual page breaks to your web page
Today I was working on a project where I needed to add some visual "page breaks" to the screen—very similar to the page breaks Microsoft Word shows in "Normal" view. The goal is for visual indicator to show on the screen, but actually trigger page breaks when printing.
After playing around with the HTML and CSS for a few minutes, here's what I came up with:
My BlogCFC mods for Windows Live Writer
When I re-launched my blog last year I mentioned that I made several changes to the XML-RPC code in order to make blogging from Windows Live Writer simpler. I didn't release the XML-RPC mods at the time, because I wanted to make sure they were nice and stable. Now that I've been using the mods for almost a year, I think their stable enough to share.
The changes I made most involved trying to simplify blog posting. My key objective was to try and avoid having to drop down to the "source code" mode altogether, but still be able to use the custom tags that BlogCFC supports such as the <more/>, <code> and <textblock> tags.
To solve this problem I build some parsing functions which look at the incoming HTML and look for these special tags written in escaped HTML. When it finds these tags, it then converts the escaped HTML into their unescaped format. This allows me to just cut-n-paste or type in my <code> blocks directly into Windows Live Writer and never have to go into "View Source" code. This means I can use the "Normal" (Design View) and just type into Live Writer:
<code>
<h1>Hello World!</h1>
</code>
To produce:
I can also just type in the <more/> tag into Live Writer in the place where I want to split text into two.
You may be wondering how I'm able to use the type in these special tags without the parsing functions picking them up. Since I knew I may want to actually blog these tags at some time, I build in some escape characters you can use to avoid processing and have the tags displayed correctly. In order to display one of the special tags, just write the tags with brackets (i.e. "[" and "]") just inside the < and > characters, for example: <[specialTag]>. This only works with the <code>, <more/> and <textblock> tags.
I have not tested this code with that latest BlogCFC code, but this should work with BlogCFC v5.9 (released Oct 12, 2007.) Either way, before implementing I recommend making a backup of your "xmlrpc" folder and even doing a diff on the folders to compare the changes.
The one change you'll need to make to your Live Writer setup, is you must add the query string "?parseMarkup=true" to your XML-RPC URL in order for BlogCFC to use the parsing functions. I did this to make it easy to toggle this functionality on or off on a per blog basis.
If you download my XML-RPC mods and use them, let me know how they work out for you! Perhaps if the mods are well received, I'll tidy them up even more to see if Raymond Camden wants to include them in the official release.
Using jQuery to determine if an element is a child of another element
I seem to be writing a lot of code as of late that needs to check if a certain element is a child of another element. This is extremely useful in drag and drop operations (for determine where an element is being dropped) or if you want to make sure that a global event was trigger on a specific set of elements (I use this to check if a document.click occurred on a specific container.)
While jQuery makes this easy enough to do, I don't find the code very readable or reusable so I started using the following snippet:
return (this.parents(b).length > 0);
};
What this does is checks to see if the current element is a child of the specified selector. For example:
$("#list > li > a").isChildOf("#list > li"); // return true
$("#list > li").isChildOf("#list > li > a"); // return false
This function definitely comes in handy when doing any sort of event delegation and I hope it eventually makes its way into the jQuery core in some form or another.
A quick and dirty swap() method for jQuery
A few weeks ago I needed a jQuery swap() function for some drag and drop code I was writing. While it would have been easy enough to whip up a quick little function, I found this little snippet courtesy of Brandon Aaron's blog:
b = jQuery(b)[0];
var a = this[0];
var t = a.parentNode.insertBefore(document.createTextNode(''), a);
b.parentNode.insertBefore(a, b);
t.parentNode.insertBefore(b, t);
t.parentNode.removeChild(t);
return this;
};
This particular method only works with the first DOM element in each of the jQuery objects. Using the code is easy enough, the following example would swap the first and last nodes in an unordered list who's id is "list".
Sorting DOM elements using jQuery
I'm working on an interface that uses drag-n-drop to arrange how some fields appear on the page. The page basically has two containers—a canvas and a toolbar. You drag fields from the toolbar to the canvas, and then you can position the fields in the canvas to order them anyway you want. To remove a field, just drag it from the canvas back to the toolbar.
One of the things I wanted to implement was to always make sure the fields in the toolbar stayed in alphabetically ordered. While I knew it would be easy enough to whip up a sorting function, I decided to first search the jQuery Plug-ins to see if I could find something that was already written. That's when I found the TinySort jQuery Plug-in.
This plug-in allows you to sort an number of sibling DOM elements and you can sort by either it's text, an attribute or even a child element. Here's some examples (taken from the Sjeiti website:)
$("ul#people>li").tsort();
// sort by a child's text
$("ul#people>li").tsort("span.surname");
// sort by the img element, order descending using the img's "alt" attribute
$("ul#people>li").tsort("img",{order:"desc",attr:"alt"});
// sort's element, but puts the sorted items at the end of the parent element
$("ul#people>li").tsort({place:"end"});
The "place" option (as seen in the last example) is interesting because it allows you to control how the matching siblings are ordered in context to their non-matching siblings. In most cases you're probably sorting all of the children items of an element, but there may be times when you're ignoring certain elements (like disabled items.)
There are lots of working examples on the authors home page. If you need a way to quickly sort some elements on the page, I definitely recommend checking this plug-in out. It seems to have every option one would need to implement some basic sorting to some generic elements on a page.
Firefox 3.1's TraceMonkey, color me impressed...
I just installed the lastest nightly build of Firefox v3.1a2pre, because I was very curious to see how an application I've been working on (which is very JavaScript intensive) would work with Mozilla's new TraceMonkey (JavaScript JIT) engine.
I'm extremely impressed by the performance of the JIT. The application I'm working has a lot of dependencies on JS behaviors that are initialized on page load. I've spent a lot of time to minimize the the impact of this code on page load, but there can be a good 250-1250ms delay (depending on PC hardware, the configuration of the page, etc.) before every element on the page is completely usable. So while there is a delay, I've designed things so that it should be pretty transparent to the user because they see the page immediately and by the time they'd actually go to do anything on the page, everything should be initialized.
While just testing the page under the latest nightly Firefox 3.1 build, this page is blazingly fast. It's so fast, I generally can't even see the initialization occur. I'm very impressed and I think things will only get better.
The addition of JavaScript JIT compilers is just a natural progression and I think it'll be the way we see all browsers head. The dependence on JavaScript in web design is greater than ever and with good reason—it allows us to build better web-based applications. However, with the greater dependence on the usage of JavaScript, it can be a really battle at times to tweak performance out of an application. It looks like TraceMonkey is making great strides in handling this problem natively in the browser.
I definitely recommend reading John Resig's blog post on TraceMonkey. It contains a lot of technical detail as well as a brief overview on how it all works.
IE7 not firing onmouseover event properly on element with padding
I ran into a really weird bug this morning. I was having an issue with a jQuery plug-in I wrote, where for some reason IE7 was not triggering the onmouseover event properly. After spending a bunch of time trying to track down the problem, I finally realized that it wasn't triggering the event until it got inside the padding of the element—which is the wrong behavior.
I whipped up a quick test case of a <div> with onmouseevent and some padding, but that worked as expected (with the event firing as soon as it reached the padding of the element.) As I started to debug the problem, I added a background color to the root element in order to see if I could tell when the even actually fired. However, as soon as I added the background-color, the event started firing correctly.
I'm not exactly sure what combination of HTML/CSS is causing the problem. I've been trying to to put together a straightforward example that illustrates the problem, but I've yet to be able to recreate without really complex code.
I believe the problem is related to having an absolutely positioned parent element with relatively positioned children and then moving the parent item's position in the DOM. Even stranger was that if I hide the entire content and would re-show it, everything would work properly.
It sounds like it's a pretty obscure buried bug, but if you're ever having problems getting an event to fire properly in IE7, try defining a background-color for the element to see if that fixes the problem.