spugbrap’s blog

I’ve never been a fan of using tabs to indent my code; I prefer spaces. Writing code is an art form, and when you use tabs to indent, you can’t assume that it will still look pretty on someone else’s machine, or in another application, etc., since tab sizes are platform-dependent and–although usually user-definable–the default size (typically 8 spaces, I think) tends to be much larger than my own 2-4 space indentation style.

However, some of my co-workers indent with tabs, and others indent with spaces. I’ve found that it’s easier for me to avoid inadvertently messing up existing code when I just bite the bullet and use tabs.

So, what follows are a couple of search/replace regular expressions I’ve recently used in TextPad, to make some existing code more consistent, by converting the spaces to tabs in certain relevant locations.

---

1. Regular expressions for aligning inline comments with tabs

Find what:		\;( *) {2}(\t*)\/\/
Replace with:		\;\1\t\2//

Customization: The number 2, in curly braces (above), should be replaced with the number of spaces that are used for indentation, in the code you’re running this on. In this case, the code was indented in increments of 2 spaces. Sometimes I deal with code that’s indented in increments of 4 spaces, in which case that 2 would change to a 4.

Manner of execution: Run via Replace All, repeatedly, until there are no more matches.

Recommended scope: I used it on a very specific block of selected code. Keep reading for the specific format.

When I used this on a block of code that consisted of variable declarations and //-style comments, it ended up making the comment blocks all line up nicely. Here is an animated GIF¹ of a series of screenshots, showing how repeatedly running this expression transformed the comments into tab-indented comments that lined up nicely:

I’m not sure how useful this will be, in general, because I think I just kind of lucked out when I got the results that I did. I thought it was worth sharing, though, because it impressed me when it produced results that were better than I had actually envisioned. :)

Two important things to note are:

• The actual variable declarations (beginning of each line) were already indented with 1 tab.
• There were a consistent number of spaces between the semicolons ending the variable declarations, and the double slashes starting the comments. While this didn’t help them line up, as spaces, it did make things pretty when the spaces were replaced with tabs.

If you’d like, you can see what my TextPad Replace dialog looked like, so you can see things like which checkboxes are checked, etc. Also, please note that in my TextPad preferences, I have it set to Use POSIX regular expression syntax (as previously mentioned, in another TextPad search/replace expression entry, a couple years ago).

---

2. Regular expressions for changing leading indentation spaces to tabs

Find what:		^(\t*) {4}
Replace with:		\1\t

Customization: As with the first expression, above, the number in curly braces should be changed to the spacing increment used for indentation, in the code you’re running this on.

Manner of execution: Run via Replace All, repeatedly, until there are no more matches.

Recommended scope: It can be used on a block of selected text, the entire active document, or even on all open documents, if you’re brave and somewhat evil. :)

---

Footnotes

¹ Sorry for using an animated GIF. I’d rather not have something constantly flashing on the page, because it distracts, and resembles an advertisement. I would have preferred another solution, but I racked my brain for over two hours, trying to decide how to present this series of 9 screenshots. I didn’t want to alienate readers who might read this using a feed reader that doesn’t support javascript, and I hate making people click through from the feed to the main site–I strongly prefer full-text rss feeds! Laying the 9 images out horizontally or vertically took up either too much space, or required making the images too tiny to read. In the end, this animated GIF seemed like the best portable way to show the effect I was trying to show. I won’t make a habit of using them, though. :)

[return to top] / [expression 1] / [expression 2]

As a professional web application developer, I’m well aware of the challenges involved in coding for multiple browsers (and, even worse, older/buggier versions of those browsers). I also hate it when a website won’t behave the way I want it to, so I often end up viewing the source with FireBug, then messing around with the code.

If I just need to “fix” it on a one-time basis, I’ll just edit it with FireBug, but if I need it to behave better every time I visit the site, I’ll write a GreaseMonkey script (Incidentally, I use Platypus to generate a lot of my GM scripts. So easy!).

Sometimes, in the course of viewing/hacking up their code, I run across funny things that developers left in there. Here are a few of them that I’ve run across, which express the designers/developers’ browser preferences.

From viewing the source of a last.fm page:

<span class="iesucks" style="display: block">&nbsp;</span>>

[I just liked their css class name]

---

A friend sent this next one to me a couple months ago. I went and tried it, at the time, and I got the error message. But they seem to have fixed it since then. Anyways, this online icon maker page, when viewed in IE, would throw a javascript error when you moved your mouse over the editor component on the page.The funny part was the error message:

'shitty_IE_needs_this' is undefined

Ooh, I just noticed that this site was featured on my favorite geek humor blog, Worse Than Failure (formerly known as The Daily WTF). They’ve got a screenshot of it, so you can still see how silly it looked.

---

This last one was not found in source code, so it may or may not have been written by developers, but it sounds to me like it was. From Google Reader’s FAQ (bold/italics added for emphasis):

15. What are Google Reader’s system requirements?

For the best user experience, Google Reader requires an up-to-date browser. We recommend that you use Firefox (download: Windows Mac Linux) or Safari (download: Mac), but Internet Explorer will work too (download: Windows).

From A Handy CSS Debugging Snippet:

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

This code, if placed in your stylesheet, outlines every element on the page with colored boxes. I like this because it’s simple, and I learned something from it. I had no idea that you could use an asterisk for a css selector. Then, the idea of stringing them together to represent the elements that are most deeply nested with different colored outlines. Pretty slick!

I will probably still use the many functions in the Outline menu of the Web Developer Extension for Firefox, and the Internet Explorer Developer Toolbar, for most of my everyday outlining-for-debugging needs. There are also bookmarklets out there to do this type of thing. But, this snippet deserves a spot in my toolbox, because it seems like it could could come in handy someday.

$url = “Foo bar com.dx?q=23″;
$url =~ s/([^\w\-\.\@])/$1 eq ” “?”+”:
sprintf(”%%%2.2x”,ord($1))/eg;
print $url;

I don’t remember where I got this, but it must have come in handy for me at some point. Never hurts to have this kind of stuff laying around, just in case.

At some point, recently, I needed to do both of these things in one little Java expression:
- output a String to stdout
- return the same String

System.out.println() returns ‘void’, and you can’t cast void to String, so I struggled with this for a little while. Here’s what I came up with (download here if it looks ugly in the blog):

public class VoidToString
{
public static void main(String[] args)
{
System.out.println(”returned value: [” +
new Object()
{
public String q(String p)
{
System.out.println(”stdout: [” + p + “]”);
return p;
}
}.q(”blah”) + “]”);
}
}


It ended up not working in the context I was trying to use it in, because the 3rd-party API I was using did not appreciate the inner class, but I still thought it was a neat little trick.