Eric Wendelin's Blog

Now that you know a bit about the Stream EDitor from the last sed tutorial, we are going to expand our knowledge of substitution and line printing with an interesting scenario.

Suppose we want to let someone else know what kinds of functions are in a given Javascript file. Think of it as a simple sort of Javadoc for CSS or Javascript. The way we are going to do this is look at all of the files modified in the last day and then extract the comments out of them and put them somewhere (on a wiki perhaps?). Doing this kind of automation will increase team communication and productivity immensely if done correctly.

Tutorial

Download and install Cygwin if you’re on Windows to follow along.

[code language="bash"]
# Single-line comments - grep is better but we can use sed
sed -n ‘/\/\/p’ blah.js > /tmp/comments.out

# Multi-line comments
sed -n ‘/\/\*/,/\*\//p’ blah.js >> /tmp/comments.out
[/code]

Popularity: 2% [?]

Today I’ll continue the series on command-line tools for productivity, with sed. Stream EDitor is the most complicated tool so far, an entire language in its own right. It is much too big to cover completely in one post, so I’m going to have a few posts covering the major parts of sed.

The bread and butter of sed is its search-and-replace functionality. Let’s start with that and then throw in some other fun commands.

Tutorial

As with the previous posts, if you are on Windows you’ll want to install Cygwin or one of the various other tools suggested in the previous comments. sed also uses regular expressions so you’ll want to keep your regex reference handy. From Wikipedia:

[sed] reads input files line by line (sequentially), applying the operation which has been specified via the command line (or a sed script), and then outputs the line.

[sourcecode language="bash"]
sed ’s/#FF0000/#0000FF/g’ main.css
[/sourcecode]

We can read this like so: search [s/] for red [#FF0000/] and replace it with blue [#0000FF], globally [/g] in main.css. Two notes here: 1) This does not actually modify the file, but outputs what the file would look like if it did the replace and 2) If we left off the "g" at the end it would only replace the first occurrence. So let’s modify the file this time.

Popularity: 7% [?]

Global Regular Expression Print is a staple of every command-line user’s toolbox. As with find, it derives a lot of power from being combined with other tools.

Following is a simple tutorial that will help you realize the power of this simple and most useful command. If you are on Windows and haven’t already, download and install Cygwin. If you are also new to regular expressions (regex), here is a great regular expressions reference to get you started.

Tutorial

Suppose we want to search for duplicate functions in all of our JavaScript files. Let’s start basic and work up to it. This technique can be used to search for a TON of duplicate items like:

• Duplicate HTML IDs
• Check how many times a CSS class is used
• Duplicate java classes
• many, many more…

[sourcecode language="bash"]
# Search JS files in this directory for “function”
grep function *.js
[/sourcecode]

The above command will print the lines containing "function" in all JavaScript files in the current directory (NOT subdirectories). Printing out line contents would be much more helpful if we knew what files they come from and their line numbers:

Popularity: 100% [?]

You already know that Firebug is quite possibly a web developer’s best friend. You also know that you can edit pretty much anything with it and see results immediately. We can add one more thing to that list today.

You may not have known that you can also edit the values in the layout pane as well! (You can find it on the right side of the HTML tab) This makes it even easier to adjust the layout of a block and see the results. As a bonus, if you press the up and down arrow keys while editing a value the pixel value will adjust by one pixel in that direction. One note on this though, you can’t specify values in anything other than pixels (sorry fluid layouts).

Popularity: 1% [?]