Category Archives: Tools

Delete Blank Lines in TextMate

I use TextMate for coding on the Mac. At work, I use Dreamweaver. I’ve noticed if I switch between the 2, Dreamweaver throws an extra line break in for every line. Some text editors have a command to handle reformatting like deleting blank lines. TextMate by default does not.

You can customize TextMate though and add this command. Here is how you do it.

To add a new command to TextMate simply open the Bundle editor (bundles menu, Bundle Editor, Show Bundle Editor) and press the add button (+) and select “New Command”. This command will appear under the user’s bundle, you can move this later.

The command edtor window has several options these are:

1. Save: This allows you to configure whether to save the file or the current project before running the command
2. Command(s): This is where you enter your commands
3. Input: The text that becomes the standard input to the command. This can either be a selection or the entire document (and selection)
4. Output: This option is how the ouput from the command is handled. This can either be discarded, replace the selection, replace the document, insert as text, insert as snippet, Show as HTML, show as tooltip create a new document.
5. Activation: How the command is triggerred, in each case I’ll leave this up to you.
6. Scope: the scope of documents this should effect, e.g all js files etc.

For this example, we are going to use the sed command to remove all of the blank lines from a document.

Here’s the command configuration:

Save: Nothing
Command: sed /^$/d
Input: Entire document
Output: Replace Document
Activation: I’d recommend using a keystroke of your choice
Scope: Leave this blank

Sed processes a file line by line and carries out substitution based on regular expressions. In this example “/” is the delimiter. The regex part “^$” matches the beginning of a line and the end of a line (i.e a blank line) and lastly the “d” deletes the match.

One note, you may want to make a back up of any files in case something goes wrong.

via Muffin Research Labs.

Using Web Inspector in Safari 3

I am really digging Safari 3. One of the cool features in Safari 3 is web inspector. Web inspector is a tool mainly for web developers to use in debugging web pages. It is basically Firebug for Safari.

Web inspector is not new. It has been available for a while in Safari 2. But it has been redesigned for Safari 3. Here is a screenshot of it.

The tricky part is that you need to enable it in order to use it. First, if you are using Tiger, you need to get 10.4.11 in order to make sure you have Safari 3. If you are using Leopard, you already have Safari 3. Once you have it you need to be able to use command line in Terminal. To enable Web inspector, open up Terminal and type the followwing command.

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Now you have it enabled. To use it, restart Safari and right click on any element on a web page and select Inspect Element. This will open up Web inspector.

I won’t take the time here to give a thorough review of everything it does, but play around with it and test it out. It lets you view the underlying code of your page along with the CSS applied to each element in the correct cascade order of the properties. It also gives you an error view and a network view. The network view shows you how each item on the page downloaded and how long it took. There is also an element inspector that lets you view each element that was downloaded that can be very useful for developers.

I also have to comment on how fast Safari 3 is. I noticed while using it that it is much faster than Firefox. It was enough to get me to switch to Safari from Firefox while using a web application. It’s that much faster.

So there you go. If you aren’t using Safari yet, I just gave you two good reasons to check it out.

Twitter Tools = Awesome!

Okay, I really like WordPress, and I really like Twitter. Which means, I love Twitter Tools! I decided the other day it would be awesome if someone created a wordpress plugin that showed my latest tweets on my blog. Twitter Tools is exactly what I was looking for. It not only shows your latest tweets on your site, but it can also create a tweet whenever you update your blog, letting people know that you just updated your blog!

Other options include Twittering from the WordPress admin or the front end and creating a blog post every time you update Twitter. The cool thing is you can set it up anyway you want. I really gotta give credit to Alex King. The man creates some awesome WordPress plugins.

Update – 10/28/07: It looks like the Twitter updates in the sidebar are showing the blog post links. Something is wrong because Twitter tools is not supposed to be showing those. I will turn off the auto Twitter updating for the time being in the interest of not cross posting. I will contact Alex to see if there is a solution for this.

Reflection Maker

From the makers of Stripe Generator and Tabs Generator, comes a similar, easy to use, web based automator called Reflection Maker. I want to like this tool, but unfortunately it lacks a few things that prevent me from using it in a production environment.

I found that the way it calculates the size of the reflection confusing. It does so using percentages, rather than length. It took me a few tries to figure that out, then I had to calculate the percentage I wanted to use. I would like more precise control over the size of the reflection than that. You also have no control over the transparency of the reflection, which is a problem for me. The last problem is that the image is too pixelated once it is generated. They should at least let you control the optimization as well.

Based on those criteria, it doesn’t stack up to their other tool Stripe Generator. It is too bare bones in its current state. Stripe Generator, by contrast, gives you a lot more options. If they improve the tool by adding these features, I would highly recommend it and probably use it myself. Right now, I am still stuck doing it by hand.

Update: Here is a good tutorial for creating the reflection effect in Photoshop.

Thoughts on Pixelmator 1.0

If you are a Mac user that is into design or editing images on your Mac, you may have heard of Pixelmator. Pixelmator is a layers-based image editor that uses Apple’s Core Image. It is even compatible with Photoshop in that it can open and save PSD files.

Here are my main likes and dislikes about the product so far.

Positives:

  • Frequent updates
  • Blog
  • Mailing list
  • Mac OS X look and feel
  • Low price
  • Free 30 day demo
  • Manual PDF
  • Open Source

Negatives:

  • No history panel
  • Demo leaves watermark
  • Export options weak
  • No view/zoom indicators
  • No info panel for tools
  • No rulers

Likes

One of the things I like about it is their marketing. They have a blog and an e-mail list for communicating with customers. They have already updated the product since I downloaded it, and through the blog, they are promising updates and additional features.

I also like that it integrates so well with the Mac OS X, including the beautiful look and feel. It also open source, being based on the Image Magick image libraries.

Dislikes

I have a lot of dislikes as well, and I am hoping they add these features soon. The main thing I find lacking is the several features that Photoshop has, that I use often, that Pixelmator lacks. There is no history panel, no info panel, no rulers and the export dialog is really weak. There is also no zoom indicator that shows you how far in or out you are when you are viewing a document. It is due to these problems that I am not able to currently use this as a Photoshop replacement.

I need a good image editor on my Mac without paying bucketloads of money. Since the 30 day demo will eventually expire and the demo leaves watermarks, I went ahead and bought the full version of Pixelmator, in spite of it’s short comings compared to Photoshop.

I believe that the creators have good things in store for it and will continue to improve. They are also taking suggestions, so if it lacks a feature, tell them what you want to see. Since I am paying, I am going to do that and hopefully they will add the features I want.

Stripe Generator

This tool is right up your web 2.0 alley. It’s called Stripe Generator, and everything about says Web 2.0, from it’s design and functionality to it’s purpose.

It’s basically a web application to generate striped patterns to use in your web design. In case you didn’t know, striped backgrounds are the latest thing in web 2.0 design. It’s also basically a widget, which is another component of the web 2.0 world.

What’s cool about it is that it takes something that is not that hard to do and makes it that much easier. It also makes it really easy for the novice to do. The implementation is very smart in that it only does one thing but does it well. The interface is a particularly important part in this aspect. Notice the use of Ajax here!

The marketing is really well done also in that it is obvious who their core audience is and they have aimed it squarely at them. They have also made it easy to link back to them by including a banner. They even provide a mailing list I guess to stay up to date on their current projects. What they need to do is to figure out how to make this a widget that other people can add directly on their site.

Well, the inventors have really done a great job here. Hopefully, they will expand this concept into other areas. Well done!