Eric Wendelin's Blog

I have blogged before that knowledge of command-line tools is essential to take the next step in programming productivity. I think it would be useful to provide simple tutorials for these powerful tools, starting with find. I hope you agree, and would appreciate your feedback via the contact page or in the comments.

Tutorial

If you’re on Windows, I would recommend installing Cygwin to bring the power of a real shell to your OS. Let us start with a simple example and build upon it:

find . -name "*.css"

This will list all CSS files (and directories ending with ".css") under the current directory (represented by "."). We only want to match files so we’ll go ahead and change it to this:

find . -type f -name "*.css"

Now we will only match CSS files. Nothing special? Fine, I see how it is. Let’s find all CSS files that do something with your HTML ID #content next:

find . -name "*.css" -exec grep -l "#content" {} \;

Here we combine find with grep (covered in detail later) using the
We’re starting to get productive now, so let’s keep going. Suppose now we want to change every reference to the color #FF0000 (red) to #00FF00 (green). Normally you would have to have your editor search and replace them, if it even has that capability. Even then it’s slow, this statement is fast:

find . -name "*.css" -exec sed -i -r 's/#(FF0000|F00)\b/#0F0/' {} \;

Gasp! Wait a minute, I just searched for both ways to specify red and replaced it with green in my CSS!! How long would that have taken otherwise? Do you see now how you can code faster by automating it and combining powerful tools? Let’s look at some other cool search options find has to offer:

Other Examples

# find files changed in the last 1 day
find . -ctime -1 -type f 

#find files larger than 1 Mb in /tmp
find /tmp -size 1M -type f

#find files newer than main.css in ~/src
find ~/src -newer main.css

Conclusion

By itself, find is only as good as say… Google Desktop. The real power, as with other shell tools, is the ability to combine with other tools seamlessly. Effective use of tools like find very often make the difference between an average programmer and one that is 10x more effective (actual multiples up for debate).

These are just some of the basic features of find. Take advice from Chris Coyier and use your new power responsibly. Find is a beautiful tool.

Popularity: 88% [?]

June was a fairly lively month. Firefox 3 is now out! I see most of my viewers are now using FF3! Well done :). In all seriousness, I found some pretty cool stuff in the June bookmarks.

Firefox

• Functional Firefox User Styles [Lifehacker] - There are some killer Firefox tweaks here. I know many of you readers have been asking about some of these so it’s definitely worth a look.
• Jiffy [Firefox Add-ons] - A new extension for Firebug that seems very promising. I’ll be keeping my eye on this one.
• Keyconfig for Firefox 3 [random($foo)] - The keyconfig Firefox extension didn’t support Firefox 3 until Leonard Lin updated it for us. Get it here!
• Field Guide to Firefox 3 [dria.org] - An article containing a great list of new features in Firefox 3. Something that is great to send on to others undecided about upgrading (seriously, their only "reasonable" excuse is extension non-compatibility).

Web Design

• Create a Slick iPhone/Mobile Interface from any RSS Feed [CSS-Tricks] - A thorough guide to creating an uber-sweet iPhone interface from your RSS feed. Chris Coyier worked hard to put together this awesome tutorial and shows us why he is highly respected in design-land.
• Should Links Open In New Windows? [Smashing Magazine] - A good read that explains why I don’t force links on eriwen.com to open in a new window and why, in general, you shouldn’t either.

Productivity

• Advanced GTD with Remember the Milk [Remember the Milk Blog] - Remember The Milk is my todo-list web application of choice. There are some really great ideas for managing your todo-lists here and I’m definitely going to be using some of these.

Javascript

• Learning MooTools: MooTools Tutorials and Examples [Six Revisions] - In general, I don’t try to advocate one JavaScript library over another, but this is one of the best lists I’ve seen. MooTools genius David Walsh is featured a bunch here with some great stuff!
• XSS (Cross Site Scripting) Cheat Sheet [ha.ckers] - Anyone that cares at all about securing their site needs to test every input with the patterns here. If you don’t know what XSS is then you are probably vulnerable!
• MooTools 1.2 Tooltips: Customize Your Tips [David Walsh Blog] - I had to single this post out because the way David goes about is really informative. Even if you don’t care about tooltips, you will learn a lot about doing similar things in MooTools.

Tools

• Announcing GNOME Do 0.5: "The Fighting 0.5" [David Siegel] - GNOME-Do is by far the coolest application launcher for open-source OSes. It looks exactly like Quicksilver and it’s functionality is almost equivalent.
• the unofficial google shell [goosh.org] - What? A web command-line for searching? Sweet! GUIs are waaaaaay overrated :). Seriously, it is faster and has much more functionality that you’d think.

You can always keep up-to-date on the new technologies I’m following by Adding me to your del.icio.us network or simply checking my del.icio.us bookmarks once in awhile. If I like what you bookmark, I’ll add you back :)

Popularity: 5% [?]

Similar to the CSS Adjacent Sibling Combinator that I wrote about before, the indirect adjacent combinator is pretty nifty and supported by IE7+, FF2+, Opera 9.5+, Safari 3+, and even Konqueror. It is actually part of the CSS3 spec but it’s surprisingly well supported. Here’s how to use it and what it does:

Using the CSS Indirect Adjacent Combinator

h3 ~ p {
  color: #FFFFFF;
  padding-left: 20px;
  border-left: 3px solid;
}

This would affect each <p> element that is a sibling of a preceding <h3> element. This is different from the Adjacent Sibling Combinator (+) in that it affects all following <p> siblings instead of just the immediate sibling. Let us see an example:

CSS Indirect Adjacent example

Here is the CSS for the above example:

#indirect-example1 h4 + p,
#indirect-example2 h4 ~ p {
    background-color: #CCC; color: #F00;
}

Cool, yes? So you see how you can use this instead of the (+) selector to apply styles to the elements you want in basically everything except IE6-! This is a good example of something used for progressive enhancement that should be used to add detail to elements to give your users more information.

Update: Sorry for the name confusion. The latest draft of the CSS3 spec calls this the "General Sibling Combinator" and I didn’t think it had changed from "Indirect Adjacent Combinator" when I first learned of it so I used the latter. My apologies!

Have you ever used this? What was your experience and what ideas do you have for this CSS gem?

Popularity: 15% [?]