Archive for the ‘JavaScript’ Category
Must-use Methods to Spam-Proof Your Email Address
Wednesday, June 25th, 2008Working for a busy web development & hosting company exposes me to the sad fact that well over 90% of website owners today do virtually nothing to protect themselves from email spam. Spam filters are good, and they’ve come a long way, but they are not the perfect solution — far from it. Even with a close to perfect spam filtering system in place (which never happens), users will still be inclined to waste time sifting through junk mail just to ensure that nothing was incorrectly filtered.
In this post, I’ll describe a few solid methods to ensure that your email address will not be harvested by “bots” or other automated programs that harvest emails from naive website owners.
The best junk mail folder is no junk mail folder
Okay, that sub-heading is a little misleading, since I don’t honestly believe it’s possible to eliminate the junk mail folder — even if the methods outlined below are used. But with good solid spam-proofing methods carefully followed, I believe that the junk mail folder can be empty 99% of the time, if not more.
1. Don’t use predictable user names for your email addresses
This is one of the methods that I haven’t really seen promoted much, and I’m listing it first because it really gets to the root of the issue. When I registered a domain name last year, I started out using a very typical email address: info@mydomain.com. Guess what? Within days, even though that email address was not listed on my site, I started getting spam in my inbox and junk mail folder regularly. Spammers know that as soon as a domain is registered, and a site goes up on the web, the “info”, “admin” and “sales” email accounts are likely used first. But don’t fall for this all too common mistake.
It is absolutely not true that potential customers are going to “guess” your email address using one of the “common” email prefixes (info, admin, support, etc). That is quite ridiculous. People don’t guess phone numbers, or bricks and mortar addresses; they look them up. The same applies to email. If they want to know your email address, they’ll look it up on your contact page, or else they’ll ask you directly, if that is an option.
So, choose an email address that is unique and cannot be “guessed”, but is still memorable and is associated with your product or service and the related company department. For example, instead of sales@yourdomain.com, use sales-dept@yourdomain.com. Or instead of support@yourdomain.com, use techsupport@yourdomain.com.
2. Do not display your email address on your web site
This is a tougher one, but it can be done, while still allowing users to send you email. There are tons of Javascript methods available online to “cloak” your email address, and many of them are easy to implement. If you are a novice web developer and aren’t familiar with any of these methods, then take the time to become familiar with them. One good one will do, and it will pay off in the end for your own sites, and for any client sites you work on.
There are also similar, simpler methods that involve replacing characters in the email string with HTML character codes. For example, this code & #64; (without the space after the ampersand) is equivalent to the @ symbol. You can also replace the entire email address, or parts of the email address with this kind of code, and so it is less likely that an email harvesting program or spider-like bot will find your address. I personally like to mix up regular letters with HTML character codes to keep it inconsistent, just in case the bot is programmed to sniff out the character codes and interpret them. But the JavaScript methods are much more secure, from my experience.
Also, be sure that the clickable link that appears for the user to see on the page does not contain your actual email address. Instead use a “call to action” phrase inside the anchor tag. For example:
This ensures that the bots will not be able to find your email address in the code or in the web page’s text. Definitely a safer way to go.
3. Use a contact form instead of an email address
This is a simple one, and is probably the only guaranteed method. The fact is, although the methods above work quite well, a human can still find your email address – it just takes more effort. So, if you want to completely avoid all spam, then I would suggest using a simple contact form. Don’t forget to validate the fields using JavaScript and a server side language, to ensure the fields are filled out correctly, thus reducing form submission spam.
4. Use a separate email address for subscriptions, forums, etc.
I have a hotmail address that I’ve been using for about 7 years, and I have never received a single spam message in it. I have never given out that address to anyone except close friends. But for newsletters, subscriptions, forum registrations, online purchases, etc., I have a completely separate email account. I expect junk in that one, so it’s no big deal. So take the time to register a separate “subscription only” email address that you don’t mind being public. That way, the email you use for business communications will not be made public – except where it appears on your website in the protected manner I’ve listed above.
What about using an image, or spaces, or the word “AT”?
I personally don’t like methods like making your email address an image, or putting spaces in between the characters in your email address, or using the word “AT” in place of the @ symbol. I think those are amateurish solutions, and don’t belong on professionally developed websites.
What does this have to do with front end web development?
Although much of the information I’ve presented here is fairly well known to experienced web developers, I feel it hasn’t been taken seriously as “best practices” in web development. I don’t think web developers should wait for the client to suggest methods to secure their public email addresses. They probably will never suggest such a thing; they probably don’t even know it’s possible.
It’s the webdeveloper’s job to offer the client the best possible web site solution, and this includes taking measures to ensure the client’s email addresses are protected from, or at the very least, minimally affected by, unsolicited email.
Equal Column Height using JavaScript
Thursday, May 29th, 2008I’m currently working on a project that requires that I use either some very tricky CSS or else JavaScript to make a left column div expand automatically to fit its parent container. The parent container and left hand nav appear on multiple pages, and there is different content, including that which is dynamically generated, so I cannot just add a height to both elements in the CSS.
CSS Solutions available
I looked over some CSS possibilities for this, but since I was already quite far along in the development, I thought it would be best to use JavaScript to accomplish this task. This problem should be quite simple to solve, but because of current CSS limitations, it’s a little tricky, and in fact, would be easier with a table-based layout.
Enter Javascript – with caution
The first thing a developer should consider before using JavaScript to solve a problem is whether or not the page will degrade gracefully. That is, if JavaScript is not available on the client side, will the site or page be unusable? In this case, the answer was no. The page would be perfectly usable, just not as aesthetically pleasing. And in this particular design, some users may not even notice that something is missing (namely, the bottom of a light-colored gradient background image that needs to fill the column in question).
A simple calculation through the DOM
As mentioned, I need my navigation column on the left side of the page to stretch to fit its parent container. Here is the code I’m using:
var myContainerDivHeight = myContainerDiv.offsetHeight + “px”;
var myLeftNavDiv = document.getElementById(”leftNavDiv”);
myLeftNavDiv.style.height = myContainerDivHeight;
Here’s a rundown of the code (which obviously is stripped of its event handlers and any code that needs to trigger it like a function call): On line 1, I’m putting the container DIV into a variable via the DOM getElementById method. I then use the non-standard, but cross-browser friendly, offsetHeight property to get the height of the container. That’s done on line two, which sets another variable with the value of the height of that element, and appending ”px”, to prepare it for insertion as a CSS height value. For example, if my container is 400px high, then the variable myContainerDivHeight would equal the string “400px”. It’s important to note that this value is a string and not a number that we can manipulate mathematically, due to the trailing “px”. And finally, line 3 is almost identical to line 1, only this time I’m putting the left hand div into a variable to set it up for the “400px” value that I’ve already obtained. Thus, on line 4 (I hope you’re still with me!) I set the style.height property of the left hand div to be equal to the height of the child.
Further development on this technique
This solution assumes that the left hand DIV (whose size we are adjusting) will start at the top of the parent container (whose size we are obtaining). There could be a situation where the left hand div appears below an image, or below another DIV. In this case, your code would have to take this into consideration, and you could easily subtract the height of that DIV or image from the total height, to ensure that your left hand DIV doesn’t extend too long.
Use it the right way!
I hope my readers find this code useful. I think a CSS solution to this problem would be nice, but from the research I’ve done, it does not seem that there is an easy one. In virtually every CSS solution there will be nonsemantic markup included, so I really feel that a JavaScript solution is cleaner, and much easier, provided it’s done unobtrusively.