Find all tags with an attribute containing a specific phrase in Eclipse

Categories: HTML/ColdFusion

If you want to quickly find all tags that have an attribute containing a specific value, you can use the following regular expression:

(?is)<(TAGNAME)\s*[^>]*(ATTRIBUTE)="[^"]*(VALUE)[^"]*"[^>]*>

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:

(?is)<(a)\s*[^>]*(href)="[^"]*(hello_world.htm)[^"]*"[^>]*>

Finding all matching open/close tags in Eclipse

Categories: HTML/ColdFusion

If you want to quickly find all matching open and close tags, you can use the following regular expression:

(?is)<(TAGNAME)\b[^>]*>(.*?)</\1>

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:

(?is)<(cfloop)\b[^>]*>(.*?)</\1>

Yahoo! Sirius Radio Widget mod

Categories: Music, Personal

[UPDATED: Tuesday, September 30, 2008 at 2:30: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.

Yahoo! Widget - Sirius Tuner v2.2.3

Version History

v2.2.3 [September 30, 2008]

+ Added new preference for toggling the "check for updates" feature

Adding visual page breaks to your web page

Categories: HTML/ColdFusion

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:

image

My BlogCFC mods for Windows Live Writer

Categories: HTML/ColdFusion

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:

<h1>Hello World!</h1>

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

Categories: jQuery

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:

jQuery.fn.isChildOf = function(b){
   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"); // return true
$("#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

Categories: 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:

jQuery.fn.swap = function(b){
   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".

$('ul#list > li:first').swap('ul#list > li:last');

Sorting DOM elements using jQuery

Categories: JavaScript, 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:)

// sort by the element's text
$("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...

Categories: JavaScript, jQuery

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

Categories: HTML/ColdFusion, jQuery

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.

Review of Extreme's new CD Saudades de Rock

Categories: Music

I've been eagerly waiting a new Extreme album since the 1995 release of Waiting for the Punchline. imageWhen Extreme broke up a few years later, I thought I'd never see another Extreme album. On Tuesday, August 12, 2008 that all changed when Extreme released Saudades de Rock.

Before I get into my review, I should give a little background on my music tastes. Some of my earliest memories are of riding in my parent's car listening to the Beatles—so they probably are the single largest influence in my music tastes. There's nothing I like more in my music than a strong melody and vocal harmonies (which explains why I've loved bands such as King's X and Galactic Cowboys—two bands that have always done a great job with vocal harmonies.

For those of you just know Extreme from their few commercial hits, that's not a really great representation of the band. They've always been extremely diverse in their music. Each album they put out from their self-title debut through Waiting for the Punchline should their growth as song writers and musicians.

So after my first listen of the new album, here are my thoughts track-by-track:

Kyle Lograsso a remarkable 5-year old...

Categories: Sports, Potpourri

If you're a fan of golf or just of heartwarming stories, then this is for you. My mom sent me this story and it is indeed remarkable (and heartwarming.) Kyle began his fascination with golf at age 2, but it wasn't until after developing cancer and losing his left eye did he actually play the sport for the first time.

Steelers football starts tonight!

Categories: Sports

I actually always look forward to preseason football. I mean I'm always worried about the injury bug, but I love seeing all the young rookies trying to make their mark. What diehard football fan can't wait to see their top draft picks in uniform.

Tonight's the first Steelers preseason game, against the Eagles. The game starts at 7:30pm EST. Those not in the Pittsburgh area, but lucky enough to have NFL Network will get to see the game live. Here are some of the guys I'm keeping an eye out for:

  • Rashard Mendenhall, RB - Our #1 draft pick. I'm anxious to see how well he does in short yardage situations—since the Steelers Coaching staff has been really looking for a power inside runner to compliment parker.
  • Gary Russell, RB - Russell is a second year undrafted player. He played his college ball in Minnesota with Lawrence Maroney. I was really impressed with him last year (and in college) and his running style reminds me of Emmit Smith. He tends to always fall forward. Even with Melwede Moore and Rashard Mendenhall on the team, I still won't be surprised if Russell finds his way into the normal rotation.
  • Limas Sweed, WR - Can't wait to see our #2 pick. The Steelers discovered he had an astigmatism a few weeks ago and fitted him with contacts. He claims he's seeing the ball much better now too.
  • Dallas Baker, WR - Baker is another second year player who supposedly had a tremendous spring camp. Baker "The Touchdown Maker" was hidden on the practice squad, but everything I've heard from camp sounds like he'll make the team. If he pans out, the Steelers will have a ridiculously talented WR corp.
  • Kyle Clement, DE - The Steelers need youth and depth on the defensive line. Clement comes from a small school program, but has lots of athleticism. It sounds like he's been spotty in camp, but I'm anxious to see how the guy plays in a real game.
  • Roy Lewis, DB - From everything I've read, this undrafted rookie has really stood out in camp. They have him playing both FS and CB. His coverage skills are supposedly very solid and he can really lay the wood when making a tackle.
  • Dennis Dixon, QB - Can this kid be the future backup QB? He started off pretty poorly in training camp, but it's said he's getting much better every day. The Steelers scouting team hasn't done a very good job evaluating late round QBs lately. There's no doubt Dixon is a heck of an athlete, but will he be able to handle the reigns of QB if he's asked to play. Hopefully I'll get a feel for that tonight.
  • Bruce Davis, OLB - Another rookie, who terrorized opposing QBs the past few years in the PAC-10 as a defensive end. While its said he needs to bulk up a bit (his upper body strength is reported to not be great) he was primarily a speed rusher in College. He put up like 22 1/2 sacks the past two years at UCLA, so I'm hoping we have our future bookend to Lamar Woodley.
  • Lamar Woodley, OLB - Woodley's a second year player, who from all reports, has been the star of camp. Word is he's unblockable and everyone says he reminds them of Shawn Merriman. Kevin Greene, who came in a special advisor to the LB corp, said Woodley might be the best rushing LB to every put on the Black-n-Gold (and that says a ton coming from KG.)
  • Paul Ernster, P - Yeah, I know a punter. Who pays attention to a punter. Well, the Steelers starting Punter (Daniel Sepulveda) was injured on the first few days of camp. Since the Steelers didn't have a second punter, they called this guy up and got him into camp. I saw Ernster punt the couple of games he played in last year and he really stunk. Word from camp is that he shanks a couple, then booms a couple—which is what I remember as well. Consistency and accuracy are two of the key components I look for in a Punter and constantly shanking the ball in practice does not bode well to me.

I'm also going to really be paying special attention to special teams. The Steelers have brought in a number of big name players to try and find a top-notch Punt Returner (Eddie Drummond, Melwede Moore, Jeremy Bloom, etc.) The Steelers Special Teams has been anything but special the past few years, so I'm hoping to see some improvement. Poor special teams cost us a couple of games last year (and almost cost us a couple others.)

So, there's lots to look forward to in a preseason game, but most importantly it means the regular season is getting closer!

Using Eclipse to find queries that aren't using <cfqueryparam />

Categories: HTML/ColdFusion

With all the chatter about recently SQL injections attacks, I thought I'd try and whip up a regex I could use in Eclipse/CFEclipse to find <cfquery> tags that have exposed variables (strings wrapped in #...#) that don't use the <cfqueryparam /> tag.

Well I'm far from a regex master, here's what I came up with:

<cfquery\s[^>]*>([^#]*(((?<!value=")#[^#]*#)))((?<!</cfquery)[^>]*?)</cfquery>

The query does not explicitly check for the token <cfqueryparam, but instead checks to make sure that CF variables are preceded with the string value="—which is the attribute used in <cfqueryparam />.

The query isn't perfect and may pick up occasional false positives, but from my testing it seems to work pretty well. If you have some improvements to the regex, make sure to post a comment and I'll update the post with the most recent version.

Dream Theater to appear in Rock Band 2

Categories: Games, Music

I was just looking over the song list announced for Rock Band 2 and the inclusion of Dream Theater really caught my eye. While I would have picked a song different from Panic Attack, I'm giddy to see Dream Theater show up in a game like this.

Some other song that caught my eye were:

  • AC/DC - Let There Be Rock
  • Alice in Chains - Man in the Box
  • Billy Idol - White Wedding Pt. I
  • Foo Fighters - Everlong
  • Kansas - Carry On Wayward Son
  • Megadeth - Peace Sells
  • Metallica - Battery
  • Ratt - Round & Round
  • Rush - The Trees

For a complete song list, see Gizmodo's coverage of Rock Band 2.