Detail: Photoshop Painting
Tips
Posted: Nov. 1, 2005
Updated: Nov. 8, 2005


How to tell who distributed/sold your email address (maybe)
(posted: 6/20/2003)
Credit to Mike S.

If you have your own domain and you use it for email (for example I've secured www.snerst.com and I use briansnerst for my email) you can use the following process to track a company's use of your address.

When you set up your account to host your domain (I use www.pair.com for snerst.com), the host company may ask you if you want all email sent to your domain to forward to you. I think some people call this "wildcarding" and it is often an option in the account features provided by your domain host. Wildcarding works as follows:
Imagine that you reserve www.abc.com as your domain. Your account will probably come with a default mailbox — for instance, info@abc.com. With wildcarding turned on, any email sent to "@abc.com" will show up in your inbox. Thus I could send an email to info@abc.com or an email to 123456789_nonsense@abc.com and they will both appear in your inbox.

Continuing with the example case, lets say that you purchase a book from amazon.com. When entering your contact info, simply type in amazon@abc.com as your email address. Credible email from amazon will arrive in your inbox and the "To" field will show that they were sent to amazon@abc.com. But let's say that amazon sells your address to a marketing partner — shoponline.com, for example. When shoponline spams you, you can glance over to the "To" field and determine that they bought your address from amazon.

Note: I use this method with amazon and have never found them to have sold or distributed my address.



Avoid spambots with javascript
(posted: 8/10/2003)
Credit to twothirty.com

Perusing twothirty.com I noticed that their contact email launched via javascript. A little exploration lead me to determine that the reason was to avoid spambots. Apparently spambots scan web pages for anchor tags and email addresses, figuring that if an address is posted and active on a page then it must have a current recipient.

Here's the script from twothirty with a couple of variable names changed.
      function mailer(oName,oDomain)
      {
  	  email="mailto:"+oName+"@"+oDomain;
  	  window.location=email;
      }
      
Simply paste the above function in your .js file or within the script tag at the top of your html doc (it's better to store it centrally in a .js file if you will be using it throughout your site). Then you wrap your email text with the following tag:
      <a href="javascript:mailer('mailboxname','domain')">text here</a>
      
Thus your visitors will read a link as normal but javascript will launch the new email.

You can view the source code on this site to see examples.



Replace Images with Custom Fonts — Speed Up Your Web-based Application
(posted: 4/15/2003)
Additional credit to Simeon Kessler

I've been procrastinating the writing of this tip because the steps are really involved. Indeed, I am still putting it off but I will mention the following basics and you can contact me for details about the process.

This tip is intended for designing/optimizing a web application with a summary list that uses images as icons. A good example of what I'm talking about is your email Inbox. There may be 2,000 emails listed out and each row may have an attachment icon image or an importance icon image, etc. This isn't a big deal when the application is run off of your machine but watch out if it's over the web. Each one of those images is a request to the server. I'm a little out of my element here with client-server speak, but I believe that even with caching involved the browser will still request the image from the server to make sure the date/time stamp hasn't updated. In most cases it hasn't so the server says, "No need to re-download the image, just pull it from your cache." Your browser does so and thus you waste no cycles downloading the same image over and over again. The request is still made, however, and this eats up time.

Note: I never figured out how to make multi-colored fonts. Every font you create using this method will display your new font/icons as a single color (the color can change but it remains singular for the character). If you absolutely need multi-colored then you might be stuck with images. For an example of the single colored icons that I'm referring to, click here.

I should also mention that I've only replaced images with fonts in Internet Explorer. Netscape has an entirely different way of compressing and the W3C's opinion on a standard is murky.

Here are the basic steps to remove images and use fonts.
  1. First you need to get your hands on a font creation tool. I downloaded typetool from FontLab which seemed to be relatively painless to figure out and at the time of this writing (10/24/03) was $99.00 and the cheapest I found using google. Application acquisition out of the way, essentially what you'll be doing is creating a new font that has little graphics instead of letters; like wingdings. Thus instead of an "A" your font will display a simple (one-color) illustration — like a paper clip (to represent attachment).
  2. Once your font is saved out of your font creation tool (I think it will save as a .ttf file [True Type Font]), you'll need to load it into your system fonts. Either copy it over to your system fonts directory or install it through Adobe Type Manager if you use ATM. When the font compression app is launched (see step 3) it should scan your fonts directories and build a database of compressible fonts. Here's where you'll find out if your font can be compressed for the web.
  3. Step 3 (Font Compression) is downloading and learning the application to compress the font so that users all over the world can download and view your newly created typeface in their browser. Microsoft invented and uses Weft which is what I ended up using. The font compression process can be really frustrating to figure out and has a troubling requirement called a bind URL. Email me for help with bind Urls if you run into problems.
  4. Weft will produce an .eot file which the browser can download and display. You'll need a little code snippet in your style tag to point the font in the right direction. Code tips should be available at the Weft section of Microsoft's site. I think Weft can even produce the necessary code if need be.
The "fonts as icons" process I've outlined above is fairly complicated. The main point of this tip is to let you know that "fonts as icons" is possible and it does make a significant effect on your page size when loading 2,000 summary list rows. We never tested download speed times but the size reduction in image tag code alone will speed up the parsing of the page.
Thus instead of:
<td><img src='paperclip.gif' width='5' height='5'></td>

you can get away with
<td>G</td>
(where G would show your custom font character)


Again, feel free to contact me with any questions about the details of this process.



briansnerst