Blogging Tip: Use Real Quotes

What’s one thing that separates a great site from merely good sites?

Great sites use real quotes.

No, I’m not saying that other sites make things up (though I’m sure some do). This article is about the other kind of quotes.

Quotation Marks.

Okay, so what the heck am I talking about? Quotation marks are quotation marks are quotation marks, right? Just press Shift+apostrophe and you’ll get some.

Well, no, not exactly.

If you’re typing anywhere but in Microsoft Word (or another word processing program with Smart Quotes turned on), what you’ll get is not a set of quotation marks. Instead, you’ll be greeted with some of what I like to call Stupid Quotes (more commonly known as Dumb Quotes, straight quotes, or - somewhat incorrectly - a double prime, though this is another mark altogether, used for measurements and usually slanted).

What separates Stupid Quotes from Smart Quotes?

Here’s a comparison in some well-known typefaces:


The easy way to tell the two apart is that Stupid Quotes look like a Dunce Cap turned upside-down, and Smart Quotes look, well, nice. Like they were designed by a font-designer, not some grunt with a hammer and chisel.

Now you know the difference. How do you start rocking the intelligent use of this rather basic but supremely important typographical concept? Easy. Well, it takes a bit more effort than what you’re used to, but it’s worth it.

You can specify Smart Quotes by typing special codes known as HTML entities (don’t worry what this means, just go with me) where the quotes are supposed to go.

Here’s a handy table for reference:

How To Make A Smart Quote
Name	Secret Code	Voila
Left Double Quote	“ or “	“
Right Double Quote	” or ”	”
Left Single Quote	‘ or ‘	‘
Right Single Quote	’ or ’	’

Now, it takes some getting used to, but when you get the hang of it and start seeing the difference, there’s no turning back.

Don’t be a dummy. Do what the pros do and use Real Quotes. Real Smart Quotes.

It’s the cool thing to do.

How To Organize Your Music: Part 3

Here’s a quick addition to the How To Organize Your Music series. It’s a bit of a departure from the method the past posts have taken, but stay with me.

What if the best way to organize your music is to not organize it at all?

In many ways, search is becoming the new organization. It’s becoming less and less important to know where something is than to be able to access it when you want it. This is how Google works, and this seems to be the direction Apple is heading with Spotlight, which in Leopard will add the great feature of being able to search across a network. Simply type a couple letters and the results come flying into place. iTunes has Spotlight functionality built in, too, so it’s easy to find what you want when you want it.

This is obviously an entirely different philosophy than the one put forth by previous articles in this series, which focused on corralling, controlling, and compartmentalizing your music library. But there’s certainly a benefit to this model as well. It’s less time-consuming, for one, not using smart playlists and ratings and genres lets you focus on constructing playlists of songs, not of the more general sounds. Give it a try - focus on enjoying music, not on devising a system which will hopefully allow you to enjoy music in the future. There is only now. Getting Things Done (GTD) might work great for some parts of life, but when the framework stands in the way of your ability to enjoy and appreciate things, it defeats the purpose.

Resist the tendency to analyze and quantify. Let the computer do the work for you.

And just sit back and enjoy the tunes. After all, that’s the point, right?


More in How To Organize Your Music

• How Much Music Is Enough?
• How To Organize Your Music - Part 1: Rate Everything
  
• How To Organize Your Music - Part 2: Genre
  

Quick Photoshop Trick: Use Layer Masks

Next time you’re trying to remove a background from an image using Photoshop (and you haven’t heeded my other advice), you’ll be doing yourself a huge, huge favor by using a Layer Mask.

It’s really quite simple.

With the layer you want to remove the background from selected (Mine is empty. How’s that for a Zen puzzle? Remove a background from an empty layer, and you shall find peace.), click the layer mask icon in the Layers palette (see below).


It’ll add something that looks like this:


Then all you have to do is use a black, soft-edged paintbrush to paint away what you don’t want (or use the pen tool, if you’re feeling like a pro). Anytime you mess up, you can simply press X to switch the brush color to white, and wherever you paint, the stuff you just got rid of will come back, because it was never actually erased - it was only “masked.” Resize your brush, zoom in, zoom out, wash, rinse, and repeat. You know, the usual trial and error stuff. At least this time you won’t actually lose your original photo because you forgot to save it as a new file before you started working on it.

This is what’s known as non-destructive editing. Lord knows you could probably use a little bit more of that in your life.

Tutorial: How To Remove A Background In Photoshop

Everyone asks me how to remove a background from a photo using (usually a pirated copy of) Adobe Photoshop. I start to talk, “Layers palette blah blah, duplicate blah, add a layer mask blah blah, pen tool blah blah lasso blah soft-edged brush blah blah levels blah blah curves blah clone stamp blah burn dodge blah high-contrast photo blah blah blah blah blah...” and the eyes glaze over (which I can see even over the phone, believe me). So I’ve done a ton of thinking and completely honed a simple, fast, and ultra-high-quality method of removing the background from a photo so you can replace it with something awesome.

Three simple steps:

1. Send the photo as an attachment to kevin@frivolousmotion.com


2. Mail a $25 check to the address contained in my reply email.


3. Receive a .PSD file with the background removed (and new one added for extra) in your email inbox (usually within a week).

See? Easy as pie! Tell your friends.

I’m serious. Don’t attempt this on your own.

How To Make An Awesome Tag Cloud!

I get a lot of emails asking me about the giant tag cloud hanging out at the top of my site. So many, in fact, that I thought it’d be a great idea to make a post out of it, as a bit of a mini-tutorial. So, without further ado, here’s how to get an awesome tag cloud in the New Blogger (formerly Blogger Beta).

(UPDATE 24/08/2007: Obviously there’s no tag cloud up there anymore, since I redesigned the site. I’ve posted a screenshot below of what it used to look like. Click it for a larger version.)



Okay, back to the regularly scheduled tutorial.

First start a new blog in Blogger. Got one? Cool.

Now, navigate in Blogger to Template > Page Elements (clicking Layout from the Dashboard will get you there, too). You’re looking for the screen that says “Add and Arrange Page Elements.” Now, in the sidebar of this representation of your blog, click “Add a Page Element.” You’ll get a nice pop-up with a ton of options. Click Labels, cause that’s what you want to add, after all. Keep it alphabetical, change the name if you feel like it, and click “Save Changes.”

Save your template.

Now click over to “Edit HTML.” Definitely a good idea to “Download Full Template” here, to be safe, before you start editing the code. I’ll wait.

Backed up? Good. Moving on.

Search through your code for a line that looks exactly like this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

The “title” attribute might be different if you changed it in the step above. Otherwise, this is the line you’re looking for.

Copy all of this code below.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
  max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = &quot;";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + &quot;<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> &quot;;
</b:loop>

obj = document.getElementById(&#39;LabelDisplay&#39;);
obj.innerHTML = display;
}


zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

And paste it over (on top of, instead of, replacing!) the line you found. Be very careful not to overwrite the </b:section> that will most likely follow it in your template code.

Click preview, and if you’ve done everything properly, you’ll have a sweet tag cloud with links of various sizes based on frequency of occurrence (if your blog is brand new, you’ll need to post in it first to see the code at work).

If you don’t want it in your sidebar, go back to the Page Elements page, and move the widget around to wherever you like (different templates set different limits on this, which can be subverted, but that’s beyond the scope of this tutorial - email me if you want to get hardcore).

Enjoy! Get tagging! Post your results in the comments for all to see!

(Note: The code up there is a modified version of the Multi-style labels widget written up on Hackosphere. Credit where it’s due.)