How to share private photos with Flickr Guest Pass

A co-worker and I were just discussing how to upload a bunch of photos to Flickr, but only make them viewable by our client so they can start selecting favorites for an ad.

You can make any Set of photos and or any single Flickr photo private. That makes the photos in that Set only viewable by you. First step complete.

Flickr has a feature called Guest Pass. This feature generates a URL that bypasses the privacy of that item. Give this URL out to anyone you would like to see that item, even though it’s marked private.

Easy. We now upload photos to a private Flickr Set, and give a Guest Pass to our client so they can begin making selects.

How to nudge exactly 1 pixel in Photoshop

nudging in PhotoshopWeb developers who work from Photoshop comps when creating markup know how important pixel-perfect accuracy is. We don’t deal well with shapes or edges that don’t line up on a whole pixel.

So, for all the designers out there using Photoshop to create web design comps, here’s an article from app all-stars Bjango on how to nudge your shapes with perfect, 1px accuracy. Usually, you have to keep your zoom level at 100% to pull off perfect nudges. This is a hack to make sure those arrow keys don’t get you in trouble.

Photoshop CS3 users please note, Command – `won’t work for flipping between open windows, which is possibly the most horribly frustrating thing this shortcut addict can think of.

How to add a full page background image to an old ass Word v.X Mac doc

Insert a full page background image in Word

Insert a full page background image in Word

1. View > Header and Footer
2. Insert > Picture > From File…
Choose the background image to insert. It will look funky, because Word puts it in the Header text area.
3. Select the image, right-click (control-click) it and choose Format Picture…
4. Under Wrapping Style (the little dog icons), select Behind text
5. You will now be able to resize and drag the image around in the document
6. When you’re done placing the background image, choose View > Header and Footer to leave the editing mode.

1. View > Header and Footer

2. Insert > Picture > From File…

Choose the background image to insert. It will look funky, because Word puts it in the Header text area.

3. Select the image, right-click (control-click) it and choose Format Picture…

4. Under Wrapping Style (the little dog icons), select Behind text

5. You will now be able to resize and drag the image around in the document

6. When you’re done placing the background image, choose View > Header and Footer to leave the editing mode.

Sync Apple Address Book with your Gmail Contacts

Apple Address Book preference pane to sync with Gmail

Apple Address Book preference pane enabled to sync with Gmail contacts

I store all of my contacts in Apple Address Book. Some social media sites offer to scan your Gmail address book to see which of your contacts are available to connect with. If your contacts are in Address Book, these services aren’t able to scan your contacts.

Did you know that you can sync your Apple Address Book contacts with your Google Gmail account (or Exchange, or Yahoo mail)? I didn’t until today. From Address Book, select Preferences > General. Check out those slick little checkboxes at the bottom of the preferences pane.

Just need a simple, one time CSV export from Apple Address Book? Try Address Book to CSV Exporter from Antonio Lore’. This handy tool exports your Apple Address Book to a CSV file, ready for import into Gmail or similar. You can customize the output a bit by ticking which fields to include in the export. This option is hidden in a little + (plus sign) button next to the Export button.

Changing the default month or day for an embedded Google calendar

How to embed a public Google calendar on your page: Embed on your website

Want to change which month or day the calendar displays on load? I found the answer on this Mark Mail page. Just include date values in the parameter string like so:


It also looks like you can pass other parameters to control color, etc.

How to track clicks and events in Flash with Google Analytics

Bookmark this Google page and keep it around for reference. Tracking click-throughs in Flash with Google Analytics turned out to be easier than I thought. Use the following ActionScript to make your visitors’ clicks in Flash register with Google Analytics.

on (release) {
_root.gotoAndPlay(3); //your action here

Of course, it’s the pageTracker._trackPageview() JavaScript function that’s really doing the work, so I assume you can call this function from within Flash wherever you can use the getURL() ActionScript function.

I am building a landing page for an online coupon campaign, and am using this code to track the number of downloads of the PDF coupon to compare to pageviews.

EDIT: Here’s another great post with a bunch of examples of tracking click throughs in Flash. Careful though, these examples are for use with the older Urchin Google Analytics JavaScript snippet.

Red X and alt tag visible over your PNG transparency fix images in IE6?

Red X and alt tag over PNG in IE6 with IE PNG Fix

Red X and alt tag over PNG in IE6 with IE PNG Fix

Today, I put a PNG transparency hack into use. For those of you with social lives, this is one of several PNG transparency fixes out there that blesses Internet Explorer 6 (and even IE5.5) with support for PNG32 images. Basically, utilizing one of these hacks will allow your older browser to show multiple levels of transparency instead of the more widely supported yes or no transparency. Newer versions of IE (IE7+) support PNG32 natively.

The method of the day was IE PNG Fix 1.0 from TwinHelix. It was extremely easy to implement, and only requires adding a line to your CSS. The ZIP package contains an HTML file that explains installation and use.

There’s one caveat I’d like to point out. No matter how tempting it is because it reminds you of the old single pixel spacer days, don’t delete the blank.gif image that is part of the installation. It’s there for a reason. Deleting or having blank.gif in the wrong folder will cause IE6′s red X and alt tag to display over what is otherwise the desired behavior. You’ll notice that that hack works, but without that GIF, your page gets red X measels.

See also PNG32 hacks and IE6. Is it worth it?

Turn web pages into stand-alone apps with Fluid

There are a few web pages that I always have open. Google Reader, Vitalist, and Workamajig (yikes). Sites like Mint and, (shameless plug) Twuffer are even beginning to make the tabs-never-to-be-closed list.

Fluid is written by ex-Apple Dashboard developer Todd Ditchendorf. It allows you to create Site Specific Browsers, or SSBs. Thanks to Fluid, “you can create SSBs to run each of your favorite WebApps as a separate Cocoa desktop application.” It’s Mac OSX Leopard only, so all you Tiger cats need to upgrade.

My immediate goal was to make an SSB of Google Reader. I think of Google Reader as a separate RSS aggregator app anyhow, so why not make it totally separate from the browser? I downloaded Fluid from the site, unpacked it, and moved it to my Apps folder.

Create a Fluid SSB

Create a Fluid SSB

When you launch Fluid, it asks you for the URL of the site to app-ize (appify?), what you want to call the app, where to put it, and even what you want to use for the app’s icon. If you leave the default on that last option, your app switcher will use a giant, blurry version of the favicon gleaned from the web.

Google Reader SSB. (yes, thats 1000+ unread)

Google Reader SSB. (yes, thats 1000+ unread)

The magic happens, and the next thing you’ll see is your new web app all neatly bundled in it’s own page, complete with it’s own taskbar. To really burn up time that might otherwise be productive, think about your web apps having their own taskbar and what that allows you to do. Super nerds will love the Convert to MenuExtra SSB option so you can drop the app down from next to your clock, then fold it up again. Google Calendar perhaps?

That’s right Gmail fans, you can now participate with your Apple Mail and Outlook cohorts in email client groan fests. And all you protective tweeters out there who like your Twitter in a comfy, toasted, no-butter browser style aesthetic, Fluid was made for you. I’m off to make a stand-alone Twuffer app.

Add or remove formatting buttons from the WordPress write post textarea

show more text formatting buttons in wordpress

show more text formatting buttons in wordpress

As I write this, I’m looking at at single row of buttons at the top of this WordPress ‘Write Post’ text area that allows me some basic text formatting options; bold, italic, strikethrough, bulleted list, numbered list, and so on. A few of my clients have asked for more formatting options like the ability to change the font size and color. Most of the options they’re after are actually just hiding.
If you’re seeing a single row of formatting buttons, try the last one on the right. It shows the ‘Kitchen Sink’ which is a second row of formatting options like style, underline, justify, text color, etc, and is sure to satisfy the perfectionist blogger.

$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'separator',

Now, feel free to remove or add any of the attributes listed on (thanks Lance!) until you’ve made formatting stew.

Stopping MSN Messenger SPAM in Adium

Blocking instant messenger spam in AdiumI use Adium as my IM chat client because it allows me to chat across networks (AIM MobileMe, Yahoo!, MSN, Google Talk, Jabber, ICQ, and so many more) from one app.

Somehow, my MSN Messenger contact info must have gotten out, because I began to get hit every 5 to 10 minutes on MSN with a SPAM instant message.  It varied slightly, but was usually something like “I can’t get (something) to work. Check out my pictures at (url)”, or “I saw you on (blah), login to (url) so we can chat.”

Thankfully, blocking this unwanted IM SPAM is easy in Adium.  From the menu bar, choose Adium>Privacy Settings…  Choose the offending Account, in my case, my MSN account.  Then, for Privacy Level, choose Allow only contacts on my contact list.  Close the window.  Presto, no more instant message SPAM from that account.

Tips for writing headlines and subject lines

Personally, I find it’s really not too complicated of a process.  When writing an email or blog post, I try to think of a subject line or heading that would instantly make me click a story, or open an email.  I can look through emails and stories that I have clicked, and re-engineer a headline based on the same principals.  For me, those principals are usually relevance to projects I’m working on, and time investment to process the article or email.  Off the top of my head, I’d be hooked by “Top 5 WordPress plugins for designers” or “How to build an events engine in PHP”, or “Quick, professional masking techniques for After Effects”,  etc.

For more info on the science of subject lines and headlines, check out these articles:

15 Tips for Improved Subject Lines

The Subject Line Dead Zone

Email Marketing Subject Line Comparison (ironically a non-compelling headine IMHO)

How to show only your single latest post on your WordPress home page.

Wordpress Settings > Reading - setting the number of posts per pageIn WordPress 2.x under Settings > Reading, you can set a number for “Blog pages show at most”.  This applies globally, however.  I discovered a method to make your home page to show only the latest post, while allowing all other blog pages to respect the “at most” number.

In index.php, just before the loop, I added the following line:

<?php query_posts('showposts=1'); ?>

Basically, that sets up a preemptive query and grabs only the latest post, rather than allowing the loop to query the latest “at most” number of posts.

How to download and save online or YouTube videos and play them offline

Tater Pig video as seen on of the online video content you’re going to see online these days has been encoded by Adobe Flash.  These are called FLV’s in the biz because of their .flv file extension.  A common request I’ve heard is for a method to download the FLV for later playback, offline or otherwise, say for a presentation or to edit into  another video.  Or dare I say mashup.

Safari users, congrats.  This method is for you:

  1. Navigate to the page where the video is embedded.
  2. Open your Activity window. (Window > Activity)
  3. Find the path to the .flv file in the Activity window and select it.  If you don’t find anything named .flv, select the path with the largest file size.  That’s probably the video.
  4. Choose Edit > Copy
  5. Now, open your Downloads window (Window > Downloads), and choose Edit > Paste to begin downloading the video file.

The video will be saved to your downloads folder, wherever you have that set. (Safari > Preferences… > General)  Sometimes, as with YouTube, it won’t be named (something).flv, so you might have to add the .flv part to the end.

iSquint, from the makers of Visual Hub for video conversionGood work.  Now we you downloaded the Flash video file.  How do you play it or use it in another app?  We have to convert it to a different format, probably Quicktime for most of you.  To do this, I use Visual Hub‘s little brother, iSquint.  iSquint is free, and will spit out a Quicktime movie, or even an H.264 encoded video, for all you video geeks.  The converted video can be played by Quicktime Player, included in your presentation, even edited in your favorite video editing suite.

Okay, so it’s not one-click easy, but it’s also not that tough to save your favorite videos from nearly any video sharing site.  See also if you want an online solution, or the Mac only app, Videobox.

5 basic rules to better accessibility in web design.

I’m kind of a podcast fiend.  So, as a web designer, it should be no surprise that I listen to the Boagworld podcast.  Recently, Paul and Marcus highlighted 5 key tips to designing accessible websites.  Here they are in my words.

  1. Utilize alt tags on images.
    The only way a screen reader (a device used to aid sight impaired internet users) will “see” your image is to describe exactly what the image is in words.  **Savvy designers will realize added benefit here, as search engines will pick up keywords in the alt tags.  Just make sure your alt tag copy is descriptive of the image, not loaded with keyword phrases that won’t aid the sight impaired.
  2. Utilize title tags on links.
    Imagine a web page being read aloud to you.  Now imagine the person reading the page to you encounters a link.  Instead of telling you where clicking that link will take you, they begin to read out the destination URL.  Yikes.  With a proper title tag, you can tell your sight impaired users exactly what clicking the link does.  ie “click here to login”, or “click to visit my portfolio.”
  3. Make sure you have fallback content for rich media.
    Most of us including rich media content will use Flash to do so.  If so, provide content that will be seen if the video or Flash cannot be loaded.  Usually, this can be taken care of with the SWFObject implementation method.  Don’t leave a hole where the media would be, fill it with a backup image or copy.  **Here’s another plus for you cheeky designers.  Continue reading
Related Posts Plugin for WordPress, Blogger...