Update: FeedHub is dead. It’s been deceased for almost a year now. Their parent company mSpoke shut the free news feed authority weighing system. I have replaced FeedHub with another free feed weighing service, PostRank. It’s not as convenient to use. All your feeds are not combined into one feed. If you have over one hundred feeds that you subscribe to, you will want to export an OPML file (collection of feed URLs) and import that file into your feed reader. You do however have the option within each feed to allow either all, good, great, or only the best ranked news feed articles.

Original Article: Whether you believe that micro-blogging and syndication feeds provide too much information and makes us either dumber or smarter, information overload has been here for a while. Even though, Microsoft Internet Explorer has had an RSS button for two versions, I would say that syndication feeds are still not mainstream, yet highly valuable that you can feast on such a cornucopia of information without browsing to a single web page. Think of syndication as requested email (in juxtaposition to the majority of your Inbox, right?). If you are in the anal-retentive 43 folders crowd, you’ve probably already have a syndication feed management process in place for two years. If you haven’t and the thought of having to browse through 100 new blog posts every day is overwhelming, I recommend FeedHub.

I use FeedHub to provide me with the “most popular” blog posts from over 80 sources. As a web designer, I have a plethora of blogs to choose from. Some recommend if you don’t regularly get to read your feeds you have too many in your feed reader that you should declare RSS bankruptcy (similar to email bankruptcy). Another option is to create categories so that one category is for your “read all posts from these providers” and some is your “if I have time, read these posts.” I do not prefer this latter method, since I like a well-rounded mix of graphic design, programming (mostly front-end, but a little back-end), social media, blogging, and user interface posts. It is difficult to draw upon raw feeds to receive a variety of information. Some websites can be quite prolific. Do you really want to browse the headlines of all 23 posts from Mashable yesterday?  Probably not, unless you are one of the thousands of social media experts on Twitter.

What’s most popular?

I mentioned above that FeedHub only provides the “most popular” blog posts. I don’t have the exact details–that would be similar to figuring out Google’s PageRank, but I know that you can set preferences for certain blog tags over others in order to customize your reading. You can also set that you want the articles with the most comments or links to them. It’s all part of a machine they call mSpoke.

I like the idea. Where do I start?

You can import an OPML of my “daily feeds” (Right Click/Save As…) into FeedHub, if you think we would have similar tastes. My original list of blogs to read came from a computer science department of a university that I’ve now forgotten, and I’ve slowly added graphic design and social media oriented blogs. You can find a sample of my daily feed reads at the bottom of the Interactive Llama sidebar.

Going forward

For most of us, how connected we are is a lifestyle decision. You can always unplug to hike through the Canadian Rockies or to spend time with your children, unless your job mandates you reply to be “on call” and reply within five minutes. If you are in a creative, forward-thinking job (like a web designer at an agency) then, I highly recommend this hybrid of reading RSS feeds–but not too many, so that you are not overwhelmed, but do stay informed.

There is an army of spiders out there.  Some, like GoogleBot, you want scanning your site to be listed in their search engine. Many however have a devious purpose–to collect email addresses to add to spam email lists. If your email address is already out there, then there is no pulling it back in. The only way to eliminate spam is to create a different address and inform all your contacts that you have changed email addresses.

Ways to combat email spam:

• A non-linked image
• HTML entity encoding
• Client-side obfuscation/abstraction (via JavaScript)
• Server-side redirect
• Contact form (no email address listed)

If your email address, is spelled out with any client viewable code, it is possible to obtain. Now that search engines can read PDF documents, including your email within a PDF as text may be suspect. I have not gone into great depth on any of them below but have provided a short description of each method with advantages and disadvantages listed.

A non-linked image

• Anyone viewing images can see your address, but has to visually remember and re-type this address
• Low chance of your email address being grabbed by a spam robot

This is how Facebook displays email addresses in one’s profile. It is inconvenient to the user, since he or she cannot click the email address in order to send an email. The spider may grab one’s email address if a spam robot uses image reading (Optical Character Recognition) though this is unlikely at this time.

HTML entity encoding

• Anyone with a typical browser will be able to contact you
• Medium to high chance of your email address being grabbed by a spam robot

This method encodes certain characters of the email address into Unicode.  For instance, “Bob” in Unicode is “Bob” Since computers create Unicode, it does not seem like a hard task to decode from Unicode. I do not recommend this solution.

Client-side obfuscation/abstraction (via JavaScript)

• Anyone with a typical browser will be able to contact you
• Low chance of your email address being grabbed by a spam robot

This anti-spam solution is not a cure all–but it is my favorite right now. Some spider bots do run JavaScript. The majority of the spider robots do not however. The method described here not only prevents your email address from being obvious simple text, but it also performs levels of obfuscation and abstraction that makes it useable for actual browsers to read and gracefully degrade for those without JavaScript running.

In a related form, if you create your JavaScript function or call of the function on the server-side (ASP, PHP, etc) then you can slightly change the function over a period of time.  The user will never notice, since the output being given is exactly the same. It is only the input (the simple text) into the JavaScript function that is being changed.

Server-side redirect

• Anyone with a typical browser will be able to contact you
• Medium to high chance of your email address being grabbed by a spam robot

There are several ways to do this. Most redirect to a script that provides the email address. The problem with this solution is that spam robots will follow the link and eventually grab the URL although the email address is not in plain text. It is being given out. This is an example of the server-side redirect method. A similar solution is MailHide from Captcha. I don’t recommend any use of Captcha except as a last resort, since I don’t enjoy using captchas myself.

Contact form (no email address listed)

• Anyone with a typical browser will be able to contact you, but will not know your email address
  
• Next to no chance of your email address being grabbed by a spam robot

This is guaranteed to save your email address from spam lists, since your email address is never used within your page. This solution could be annoying, since a potential vendor will have to use the contact form to hear more about your product. I’ve always thought this was impersonal. Although less of an issue for personal sites, a user often does not feel he or she is contacting the site owner.

In conclusion

The contact form is the only full-proof way, but right now, I prefer JavaScript obscuration. If my email address is captured, Gmail does a very good job (if sometimes, too aggressive) of ferreting out the email spam. If you’d like to have a small sense of justice, you can link your website to a multitude of email addresses that are all fake.

Photo: Lake Tawakoni State Park, Texas, August 15, 2007 (Donna Garde)

The writer, Stewart O’Nan, once said “The two hardest things about writing are starting and not stopping.” Programming at its essentials is writing. When I’m wearing my web developer hat, it seems that I spend over a quarter of my time browsing around the OS-X Finder. So what better way to start programming then having a file framework. Not only can you start more quickly, but your structure will stay consistent. Think of the last time you edited someone else’s project and that person placed all their files in one folder. Oh, the horror!

Introduction to my file framework

The guiding principle for my file framework is:

Either precisely title all files with hierarchical prefixes or create sub folders to categorize your files.

With video projects and print projects that output to one file, file organization isn’t as essential. With web design, you do not want the files you publish getting mixed up with your source files. Yes, we all have at least once uploaded a 100MB Photoshop file to the online server and wondered why it was taking so long. This file framework focuses on web production and output.

Balance is key to file organization–it’s a means to an end. Besides SEO of a static web site or ease of future editing, most of the time your file organization isn’t going to impact the final product. I’ve seen both sides of the coin:

• Artistic Pilers: one folder file organization where that person has taken the visual metaphor of the desktop a little too far, “creating a well-named folder is not very creative”
• Obsessive Compulsive Filers: the overcompensation that there are too many files in a folder if you have to scroll or look for a file.

The source folder

My source folder has an abbreviated name of the project. All the subfolders within my source folder start with an underscore. This is because under OS-X folders are not sorted first (this is very annoying!).

• __jobNumber: (folder) Sometimes I receive job numbers for my projects after I began them. If you don’t have the job number before you begin work, then do not place the job number in the name of the main folder. This will invalidate all linked files within the folder. Naming a sub folder with the job number will still allow a search for that job number. Remember, do not change the name of the project folder!
• _copy: (folder) Place the Word Documents and the text files that you have created from them here. In general, you will want to create text documents before pasting copy into an HTML page to to rid yourself of the Word character encoding.
• _flash: (folder) Place Adobe Flash files here (SWFs and FLAs) and move the finalized SWFs to the “live folder.” If you have many external file dependencies, it may be more productive to work with the source files in the “live folder.”
• _flash_source: (folder) Place images and any files that your Flash files link to. If you keep all these linked files here, you can update them by overwriting the old files and clicking Update from within the Flash library.
• _fromSuper: (folder) Place original layout files (such as Adobe Illustrator and Photoshop) from your creative director here. There have been too many times in the past that I’ve overwritten the original and had to ask for it again from my supervisor. Another option could be a _fromClient folder.
• _layout: (folder) Place the edited layout files here, and take time to name these files correctly, so that you can refer to them later on.
• _old: (folder) Place any files you want to keep, but don’t want to clutter up the other folders here
• Notice to Future Designers: (file) If you want to tell future designers any important information, write a note here. Suggestions include your name and contact information and the path name to your working folder.

The live folder

When working with web sites, your “live folder” will need to be in your local servers document folder.

• images: (folder) Place your graphics here. I recommend naming them close to the DOM of their usage
• css: (folder) Place your IE hacks files, PNG fixes, and CSS files here
• js: (folder) Place your JavaScript files here
• index.html: (file) HTML template containing header information such as meta tags and structural markup such as frameworks/grids/wrappers

Current project folders

You are going to want to get to these folders as fast as you possibly can. If you work on a Macintosh, place your source folder and your live folder on the left side of the Finder window. If you work on a Windows computer, place place your source folder and your live folder on the Start Bar or the Places Bar. On my Windows XP machine my Start Bar looks similar to the OS-X dock, since I have so many folder shortcuts (large icons) on it.

In conclusion

I hope these ideas better prepare you for starting new projects and increase your productivity by not placing all your files in one folder–while also not having to create the same folders when you begin your project or while you are in the middle of working. If you have more suggestions to add to this file framework, please respond below.

Amazon WishList to RSS feed

To create my WordPress Reading List and my Twitter Reading List, I start with an Amazon Wishlist. Why? Because I (and probably you) read the largest list of book reviews, before you either buy the book or go to pick it up from the library. So now using my Amazon Wishlist to RSS Pipe you have an RSS feed of your Reading list.

RSS feed to Twitter tweet

At first, I was dismayed when I heard about TwitterFeed.  My gut reaction was: What idiot would place a bot within their feed? The whole point of Twitter is to have one on one personal interaction with actual people. Recently, I’ve been moving away from that view. Bots are helpful if not over-used. I update my book reading list: Stephen M James: Books (Planning or have read) just a few times a month. Not enough to make my followers annoyed. After all, reading books is a part of my online persona that I’d like to share. In order implement your own Twitter Reading List:

1. Visit Yahoo! Pipes and clone Amazon Wishlist to RSS Pipe and enter your settings into it.
2. Publish your pipe and copy the URL of the RSS feed.
3. Log into TwitterFeed (you will have to share your Twitter credentials with TwitterFeed) and create a TwitterFeed from your Pipe RSS
4. Add your book reading list into an Amazon wishlist.

For your TwitterFeed prefix I recommend “Will read #book soon: ” so that your tweet will end up in the hash tag twitter search for #book. You have a maximum of 20 characters for the prefix, so make it worth it. Twitterfeed will shorten the name of the book and add a tinyURL to the end that links to the Amazon page (hopefully with your affiliate tag–although you are more than welcome to use mine!) You might be interested in my post, Create a reading list in WordPress from Amazon Wish List using Yahoo! Pipes, It’s about using pipes to create an RSS from an Amazon Wishlist and pulling your reading list into WordPress.

The default title for Gallery2 item uploads is the file name of the image. It easier to name your files well from the beginning from the safety of either than edit the URL, titles, and keywords for your item after they are uploaded. My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used “wedding-party-parents-rachel-stephen.jpg”

When creating titles this script does the following via regular expressions:

• Removes ‘copy’ (a common OS-X filename suffix)
• Removes underscores at beginning
• Removes underscores at end
• Removes double underscores
• Removes left and right parenthesis
• Removes all single digit numbers and letters
• Replaces underscores and hyphens with space

When creating keywords from titles, this script removes the following common words and inserts commas between the remaining words:

a, about, above, across, act, add, after, again, against, all, along, also, amid, among, an, and, any, are, around, as, at, back, be, been, before, behind, below, beneath, beside, besides, between, beyond, but, by, came, can, cause, change, close, come, concerning, considering, could, cover, cross, despite, did, differ, do, does, down, draw, during, each, even, every, except, excepting, excluding, far, few, find, follow, following, for, found, four, from, get, give, go, grow, had, hard, has, have, he, her, here, high, him, his, how, if, in, inside, into, is, it, just, keep, know, large, last, late, left, let, like, little, long, look, made, make, many, may, might, minus, more, most, move, much, must, my, near, never, no, now, of, off, on, one, only, onto, opposite, or, other, our, out, outside, over, own, part, past, per, plus, put, regarding, right, said, same, saw, say, see, self, set, she, should, side, small, so, some, still, such, take, tell, than, that, the, their, them, then, there, these, they, thing, this, three, through, to, too, toward, towards, try, two, under, underneath, unlike, until, up, upon, us, use, versus, very, via, want, was, way, we, went, were, what, when, where, which, while, who, why, will, with, within, without, would, you, your

Usage

You can either edit the setup variables in the script or use URL variables (such as “?field=g_keywords&begin_id=3000″). That example would insert keywords (test insert, not commit) based on the titles of all items after item 3000.

Requirements

• Some familiarity with the PHP language
• Login credentials: server, username, database name, password
• Item ID to begin with (default is 0, that is “all items”)
• If you want to change my default title word removal listed above, familiarity with regular expressions

Download Gallery2 titles and keywords SEO script

NOTE: You will need to rename the “.txt” file to “.php” in order to run it on your server. Also this script will edit not only item names, but also albums. I’ve included copious comments in this script to aid in customizing it to your needs.

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken JavaScript and hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

There are online CSS sprite generators out there. My Photoshop script is not as remarkable as these 20 image sprites, but it’s much simpler, and you can assign a keyboard shortcut to it. Also, all my sites are designed in Illustrator which is a slightly different work flow than most. I find that Photoshop is an awful layout program.

Download CSSsprite.jsx

Installation

A JSX script is similar to a Photoshop plugin or an action, but are commands in Photoshop’s JavaScript based script interface. Download and copy this script within the Presets>>Scripts folder of your Photoshop application folder:

• OS-X: Macintosh HD/Applications/Adobe Photoshop CS3/Presets/Scripts/
• Windows: Program Files/Photoshop CS/Presets/Scripts

The Script will appear under File>>Scripts>>CSSsprite on the menu. You can assign a keyboard shortcut to this script. I prefer Control+Command+S. This shortcut fits well with the Save for Web shortcut, Command+Alt+Shift+S.

Usage

Open two files (and only two files) with the same height and width (if they are different sizes, the offset of your hover button state will not be half of the height). Select the non-hover background image, making it active–thus making the hover background image de-active. Run the script from the Scripts menu mentioned above. This will place the hover background image on the bottom of the sprite. This script does not support adding a third state to the sprite, but you could add a third and fourth state. To do this, first combine the third and fourth state, and then combine that image with the normal/hover sprite.

For your information: States for this script

The following is a list of Photoshop commands that are executed in this script:

• Convert Image Mode to RGB
• Make horizontal guide at 100% of canvas height
• Switch to inactive document (-1 in document array)
• “Duplicate Layer. . .” Layer Menu via right click
• Switch back to inactive document (+1 in document array)
• Double canvas size vertically
• Transform/Move top layer down (50% of canvas size)
• Zoom In (twice)

Result
This gives you a two-layered Photoshop file with second layer the CSS hover layer. Save the file as GIF, PNG, or JPEG using File>>Save for Web.

Notes
Adobe Photoshop JavaScript is the only cross-platform scripting language for Photoshop. This script was only tested Photoshop CS3 Extended (Mac). Our firm does not use Photoshop for web layout–only for image manipulation. We use Illustrator for layout.

I would like to thank the creators of ScriptingListenerJS and ActionToJavaScript.

My secondary browser: Safari

For over six months now, I’ve been running my web applications in Safari on my Mac at work and my PC at home (yes, you did read that correctly, Mac at work and PC at home!). I run Gmail, GDocs, Remember The Milk, and others within Safari while I use FireFox to browse the web. I have keyboard shortcuts that run safari.exe/safari.app with the URL of the service I want to use. I can’t imagine browsing the web without Web Developer, FireBug, Google Toolbar, spell checking and RSS feeds of specific tags of my delicious bookmarks as a LiveBookmark. It would be as if I want back to using Internet Explorer or something.

When Safari for Windows became available in early 2008, I decided to try it. It was fast, but I hated the interface (especially the dimming of the page when you try to Find a word). The interface was too minimalistic. If I wanted less crap on my browser window, I’d hit F11, thank you very much. What’s a fast loading, standards compliant, minimal interface browser good for? You guessed it: WebApps! I use Safari for my web applications.

Water-logged about logging in

One of the annoying aspects of web applications is authentication, you have to login. Things become even more annoying if you use multiple accounts. Anyone have more one Gmail account? Thought so.

Everyday scenario: I log into my secondary Gmail account that I send my WordPress web sites 404 errors to and new mail pops up from Gmail Notifier in Growl. I click the email and it launches my “primary web browser.” In this case it’s FireFox, and I’m already logged into Gmail with my secondary account. What happens? FireFox goes to my seconfary account’s Inbox. I have to log out and re-login in order to view my new email! Using a second browser that is only logged into my primary account solves this probem.

Advantages of using a separate browser for web applications

• It’s sand-boxed: Your browsing of other pages won’t crash browser and thus deleted the email to your mother
• It’s fast: WebKit renders HTML faster than Gecko (Mozilla)
• You’re primary user account is not logged out, it is always there when you need it.

Shrugging Chrome

I shrugged when Google announces its Chrome browser this week, I’ve practically been using it for months now. However, I look forward to see where this goes and will value any increase in performance and productivity a Google browser will give me when using their web applications as well as others.

Either way, I want to share my latest reading endeavors across my blogs. But how?

Originally I used Roblog’s WordPress Plugin, Now Reading, It’s truly a great plug-in. You can search Amazon for your book and grab the information. It has Now Reading, Have Read and Planned Reading sections. You can rate your books and write reviews. I discovered early on that I was not interested in writing reviews of the books. The other drawback was that it was locked into one blog. I placed it my Cultured Media blog where I list the podcasts and media that I listen to. I wanted to place my current reading in the sidebar or the footer of all my blogs–and why stop there? Why not Facebook, too? The other problem is that I didn’t want to search for the name of the book on Amazon, then log into my blog and paste the name into Now Reading to add it.

Portable list of information that can be subscribed to from multiple locations? Sounds like RSS feeds to me. I found an Amazon Wish List import for Yahoo! Pipes. It did an XML look-up on any public wish list and then published the information you wanted. I cloned it to my Pipes page, and soon found out it was an old version of Amazon Web Services. After a few hours spent parsing, the new version 4 web services offering from Amazon, I was good to go.

The limitation of my Amazon-Yahoo! Pipes RSS lookup is that you can only grab one page of items at a time. This isn’t a problem for my use. I didn’t want more than 10 items anyway.

Once, you have your pipes set up, then use FeedList to display your RSS feed from Yahoo! Pipes. An example of this is at the bottom of my blog. When I want to update my reading list, I add an item to my Amazon Wish List. And there’s nothing to limit this process to books. Whatever you add your Amazon Wish List will show up in the feed–not only books.

function replace_plain_text_link($plain_text) {
$url_html = preg_replace(
'/(?<!S)((http(s?):\/\/)|(www.))+([\w.1-9\&=#?\-~%;\/]+)/',
'<a href="http$3://$4$5">http$3://$4$5</a>', $plain_text);
return ($url_html);
}
echo replace_plain_text_link("hi this is dummy text before
http://www.smjdesign.com hi this is dummy text after")

The majority of the above regular expression was not created by me. I however cannot locate the original programmer. It was posted on a message board I visited along with ftp and mailto options. If you can help, please comment.

The premise of my presentation was to show an overview of the process between layout in Illustrator and PhotoShop to coding in HTML and CSS. I find that web design is often segmented between the coders and graphic designers. I propose that the best outcome can come from bridging that gap. I do this in my daily workplace and try to show tips and techniques for others to bridge that gap. The time slot was only a half hour, so I could not go into coding detail, but only point to tutorials via links.

You can view the Graphic Web Design and Cascading Style Sheets PowerPoint (431KB) or view the presentation in HTML. Some support images and all sites discussed can be found on Delicious (theses are notated by “{link}” within the presentation).