Lifecode

One of the greatest problems of individuals or group of people is spam. Most of the time, they have their e-mail addresses posted on their public websites for contact purposes. And the addresses is in plain text. This, is one of the most common mistakes, which leads to spam. Encoding contact information in plain text.

I found a solution for this. Well actually two solutions. For a brief summary of how it works, for the first one, the e-mail address is encoded in html entities. The second one includes CSS code direction, the e-mail is somewhat reversed.

All credits to where it is due.

• I did not found the code(s).
• CSS Code Direction source

Wanna see it in action? Here is my own e-mail address, this is valid, and you can use this to contact me.

em.leur@leur

The Process

Actually, it’s not so hard. For the first one, encode your e-mail address to html entities. If you have an e-mail called: me@somedomain.com, the equivalent is:

me@somedomain.com

You can convert them here. And then you can just paste it on your html code.

For the second one, you need to reverse it. For reversing, what I did, is coded a C++ program. Well, you can find tools online, but I found it harder. Yes. So here is the source code if you’re interested.

#include <iostream>
#include <algorithm>
#include <string>
int main() {
	std::string inStr;

	//Take input
	std::cin >> inStr;

	//Reverse it
	std::reverse(inStr.begin(), inStr.end());

	std::cout << inStr << std::endl;
	return 0;
}

Actually, you can do the same in python, as it’s much easier. But I’ve been practicing, so I did this on C++. The output will be:

moc.niamodemos@em

Then, CSS code direction:

<style type="text/css">
	span.codedirection { unicode-bidi:bidi-override; direction: rtl; }
</style>

Basically it will reverse our reversed string. And then wrap it in html span tags (as defined in the CSS above).

<span class="codedirection">moc.niamodemos@em</span>

And, goodbye spam!

This is a pretty basic document I coded yesterday night. Basically this is a Web Design homework and the deadline is tomorrow morning. Yes I know it’s easy, but for the sake of the people curious about it, or those who are still starting with web design, I posted this.

HTML Version

In the past few days, while thinking about this, I decided to code this in HTML5 + CSS + JS. But then, because this is just a homework, and to be passed via e-mail, JS + HTML5 won’t be good.

First, because JS won’t automatically be executed locally, which destroys the first impression. I really wanted to do this in JS to add interactivity. Like, answering the crossword puzzle before revealing the answers, or have a button that will reveal the answers right away.

Second, some HTML5 tags will not work on older browsers, and only up-to-date and modern browsers can interpret its new tags. But if you would think, I only have one audience, my instructor. Well the problem is, if the code fails, my grade will fail too. I do not want to risk that, but anyway, XHTML 1.0 works just fine.

Style

I’m a minimalist, I like things simple, and for this one I sticked to one sans font. White background color, and gray text. Here’s the body style:

body {
	font-family: Arial, Helvetica, Verdana, sans;
	font-size: 1em;
	color: #666;
	background-color: #fff;
}

And yeah, for the table and data, I used the same color scheme.

#crosstable {
	margin: 0 auto 0 auto;
	border: 3px solid #666;
}

#crosstable td {
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	border-spacing: 0;
	padding: 5px 5px 5x 5px;
}

The tricky part is the superscript in the cells. It took me some time to remember all about negative margins. Well anyway, it went well.

#crosstable td sup {
	padding: -5px;
	vertical-align: super;
	font-size: 0.5em;
	position: relative;
	top: -6px;
	left: -7px;
	font-weight: normal;
	margin-right: -0.5em;
}

Output

Of course I’ll show it to you. Besides, I already e-mailed my instructor with a zip archive containing the HTML file and the CSS file. See it here.

Validation

The document is valid XHTML 1.0 Strict. You can see for yourself: Click Here.