Playing on the server side

As is well known, the greater part of email spiders (robots) surfs every website’s code, looking for email addresses and saves them. That is why I offer to find and replace every email address, which has been loaded as a single text or mailto hyperlink before spider will see it. The fastest way is by using PHP server side scripting.

First of all, we are going to write a function to use all over our website. The main purpose of this function is to find all the published email addresses and replace them into specific, but very useful format (example AT example DOT com). In this function we’ll use PHP Regular expressions to find all the necessary formats and some basic PHP function to rewrite them properly. By this way we hide all our emails on the server side and web spiders, bots, which catches emails, will get nothing at all.

Start to code a function

So, let’s start with the function coding:

// function which replaces mailto links into specific format
function tep_rewrite_email($content) {

  // function rules will go here

}

Include the right format email pattern

Inside this function we are going to include some variables, which will help us to do the job. And the first one is regex email pattern, which is written in a specific format to use further. Drop an eye on NetTuts+ Regular Expressions Complete Guide and than move forward to the code below:

// regex email address pattern, format (\\1)@(\\2).(\\3)
$email_patt = '([A-Za-z0-9._%-]+)\@([A-Za-z0-9._%-]+)\.([A-Za-z0-9._%-]+)';

Add standard mailto link pattern

Than we add standart html mailto link pattern, which will match all the mailto links. Moreover, this pattern is flexible, and that is why it will not skip any real link which contains ‘mailto:’ expression:

  // pattern for html links: <a href="mailto: example@exmaple.com">Some other text</a>
  // attributes before and after 'href' do not interfere
  $mailto_pattern = '#\<a[^>]*?href=\"mailto:\s?' . $email_patt . '[^>]*?\>[^>]*?<\/a\>#';

Set up a result you need to get

And the last variable to add is the result, which we finally would like to get. It’s specific (example AT example DOT com), but very usefull to avoid any spider. Have a look:

  // rewrtite result
  $rewrite_result = '<span class="mailme">\\1 AT \\2 DOT \\3</span>';

Find and replace is simple

When variables are completely added, we are going to use simple PHP functions to find and replace necessary content. I’d like to remeber, that emails can be published in two ways – as a mailto link and as a simple emails address. Therefore we check webpage’s content two times. Let’s see the code below:

  // firstly, look for html mailto links and replace them
  $content = preg_replace($mailto_pattern, $rewrite_result, $content);

  // secondly, find stacionary emails without links and replace them too
  $content = preg_replace('#' . $email_patt . '#', $rewrite_result, $content);

As you see, PHP preg_replace function is looking for our mailto link and email patterns and replace them completely by outputting a necessary result.

I will repeat again, that we need such a specific format (example AT example DOT com) for 2 aims:

1. To avoid spiders looking for a fresh emails to catch inside your page’s source code
2. To revert it back into clear, valid and visible format for real visitors, not bots

PHP function which is ready to work for you

Now, when every component of a function is ready, let’s group them all:

  function tep_rewrite_email($content) {
    $email_patt = '([A-Za-z0-9._%-]+)\@([A-Za-z0-9._%-]+)\.([A-Za-z0-9._%-]+)';
    $mailto_pattern = '#\<a[^>]*?href=\"mailto:\s?' . $email_patt . '[^>]*?\>[^>]*?<\/a\>#';
    $rewrite_result = '<span class="mailme">\\1 AT \\2 DOT \\3</span>';

    $content = preg_replace($mailto_pattern, $rewrite_result, $content);
    $content = preg_replace('#' . $email_patt . '#', $rewrite_result, $content);

    // remember to add return here
    return $content;
  }

Finally, we get a wonderful and necessary result in our source code. The image below show how does the code looks like:

JQuery or Mootools, it’s your choice

When all the single text or mailto hyperlink email addresses have been rewritten to a new format, we are going to turn them back into valid links by using JQuery, which provides client side scripting and works with all the major browsers. I think the best way here would be to use HTML-Advisor method. However, there are different ways to do it, for example using Oskar’s Mootools conversion.

I’d like to note, that JavaScript is a clients side language, therefore it provides us an ability to make code modifications directly in a visitor browser. And our aim here is to workout a simple function, which will find prepared email format and replace it back into a visible and understandable links to the audience.

JQuery function that works

Completely our JQuery code should look like this:

if ( $("span.mailme").length ) {
  // variables, which will be replaced
  var at = / AT /;
  var dot = / DOT /g;

  // function, which replaces pre-made class
  $('span.mailme').each(function () {
    var addr = $(this).text().replace(at, '@').replace(dot, '.');
    $(this).after('<a href="mailto:' + addr + '">' + addr + '</a>');
    $(this).remove();
  });
}

Mootools conversion

var mailme = $$('.mailme'), at = / AT /, dot = / DOT /g;

mailme.each(function(el){
 var addr = el.get('text').replace(at, '@').replace(dot, '.');

 new Element('a', {
 href: 'mailto:'+ addr,
 html: addr
 }).inject(el, 'after');

 el.destroy();
});

As you see we have made some modification to the clients side. As a result every website visitor will see published emails as a normal links, but email spiders won’t have a dinner this night.

Modifications to the output

The last we should make, is to modificate our webpages output. I mean to find out where our CMS outputs each page’s body text (which may consist email addresses) and replace it with our premade PHP function:

  // find a string which outputs every page body text from your database
  $string = 'Our company is based in London and we bring strong metallic structures to the world. Our experience are wide and stable. To get more information about products we offer, contact sales department by email: <a href="mailto: sales@company.com" title="Sales">sales@company.com</a>. And to offer sponsorship email directly to Lisa: lisa@company.com';
  $string = tep_rewrite_email($string);

What we get is what we have made

All in all, we get a quite simple result, which will be never cathed by email spiders. And our real website’s audience would see all the published email addresses as normal. By implementing this technique into each new page you are going to build, you will stay sure, that email addresses are hiden and spam is in the past.

I see this technique very useful for every website, which is updating by persons who don’t know how to keep an email address safe. It goes very well with different CMS systems and can be implemented in a simple way.

The “free” distribution of unwelcome or misleading messages to thousands of people is an annoying and sometimes destructive use of the Internet’s unprecedented efficiency.
Bill Gates, New York Times, 1998

Socialite is a special application build for .mac users by Realmac Software developers, which helps to completely manage all the social network accounts. There is possible to follow all the events that happen on your Twitter and Facebook. Moreover, you will be able to stay in touch with Flickr friends and participate in your ratings on Digg. To post your mood messages, status updates and share thoughts, pictures and videos everywhere with only one click. Aside from this features, there is RSS feed reader build in, where you can easily read all the latest news and manage your subscriptions.
Speaking about the minuses of this application, I can say for sure that this one is installable only on .mac systems and it isn’t free.

Such a great way of keeping all the necessary stuff together, saves your time, shows up your chosen news, friends, photos and provide additional opportunities on making traffic to your websites. Here are some screenshots:

To sum up, I’d like to add that there are some several applications, which can be as an alternatives to this one. These are TweetDeck (runs on Mac and Windows, is freeware), Pond (online app, but works too slowly) and Power (also online app). However, I suggest to use Desktop apps, because they works much faster than online tools, but speed is one of the most important things I need.

If I’d be a judge here, I would rate this applications in the following order:

1. Socialite
2. TweetDeck
3. Power and Pond, Socialmedian

But what’s on your mind? Have you tried any of these apps?

1. Task Managers

They will assist in short task lists building before each new working day starts. For example, I collect all the necessary tasks together to build a comfortable list to follow during a day. Then I print it and start my usual working day. When I complete any, I cross them out.
There is an opportunity to use good online tools:

2. Ideas and thoughts capturing tool

Every freelance web developer spends a lot of time surfing the net everyday. There he study, get new necessary knowledge and has fun. Moreover, many of web developers collaborate with each other. And sometime it’s necessary to save some information, to get down to it later. Storing this stuff in one place, helps to keep in mind every note, to be in a trend of growing technologies and to keep everything on eye. There are the most popular:

3. Screen capture tools

If we want to share our screen (and we often want it) we have an opportunity to capture screen image by using special soft to do that. I offer these tools: Snipping tool (Vista only) and Mac’s Capture Me.

4. Furious Code Editor

Very often I meet developers asking about what code editor do I use?! Truly speaking, it depends on every person needs, because we should deal with coding languages we use, platform we work on and gadgets that could really help to accelerate our working process. But I suggest to use not more that 2 code editors to do programming. There are a lot of editors which support different languages (HTML, CSS, JavaScript, PHP, ASP, VB, JAVA, C#, RoR and other). On Windows I use Notepad++ and Eclipse, but playing on Mac I prefer Coda, TextMate, Dreamweaver. I request from editor two the most important details, such as code highlighting (coloring) and FTP environment to work directly online. Here’s the list:

5. Subversion client

If freelancers work as a team with many members, it is necessary to use any Subversion client. This one would keep all the updates up to date and will never miss any code. You can look for different SVN clients on Google, but I can’t suggest any this time, because haven’t got strong experience using them.

6. Project Managers

Working as a freelancer each of us faced with a lot of projects. Some of this completes one by one, some have got long terms. Therefore, to keep all the freelance projects in one stable place we are able to use comfortable projects manager tools:

7. Raster designing tool

Even if you’re a web designer or front end player, you will be in need of complete and easy-to-use graphics software to design, slice and work with graphical elements. Without this tool you’ll not be able to make lovely, handsome and modern websites, play with JQuery animation tools and optimize logo to output it as .png image, for example. I personally play only with Photoshop to complete such a tasks. Photoshop is familiar to me and it provide users with a casual graphic environment, I think so. But there are many other editors: Gimp, Krita, PS Express, Fireworks.

8. Website testing tools

I’m a front end web developer and my trumps are usability and UI. Of course, I like to test completed webpages in all major browsers, because I stand for the same display everywhere, for cross-browsing. It’s not important which browser does my client or his visitors use, website should be the same in every browser – there’s a point. Firstly, I test my websites locally, because I’ve got all the browsers installed. Moreover, I’ve got very smart software named IETester, which gives me an amazing opportunity to test website in all IE browsers, starting from version 5 and up to 8. And secondly, I try to re-pass each website’s page by using online trackers: Browsershot and Screenshots.jp.

Short summary

This eight ultimate tools, help me to be mobile and fast in projects building and studying day by day. I think it’s very important to keep everything under control and to avoid stress by the way.

Share your thoughts about this cool tools. And maybe I’ve forget something to add to my list?

What is a logo?

A logo is the starting point of your whole corporate image, it is unique sign, which symbolizes the head of your brand.

As it is said in Wikipedia:
The logo (ideogram), is the image embodying an organization. Read full wiki definition…

Truth about Spec Work and designing variants for free

Before I start speaking about things, which makes a logo imperial, I would like to retell very popular type of collaboration between a designer and a client.

Usually incompetent client turning to a designer expects, that executor will design some logo variants, and if any of this will be appropriate to client, he will buy it – it is not right, you know.

But, if no one of logos will be likely by client (it happens a lot of times in present design world), he will be satisfied with such a useless job and will leave you by saying: Sorry, I don’t like them! Sure he will not pay for anything at all. In this case, the question arises, why does client don’t respect designer?! Coming to a shop you can’t taste Sneakers before buying it.

This kind scenario happens in the design industry every day. Usually, young, green designers waste a lot of time on spec work with no paid. The main idea here is, that even the best designer sometimes gets negative feedback, but only new once gets self-concept drops. In other words, designer gets a lot of self-concept drops when growing, just because he can’t rate his job in appropriate way.
Therefore, I don’s simply suggest, I insist to keep clear of spec work by building a stable “airbag” every time you set an agreement with a client. This “airbag” stop will always cover hours spent on development. A designer should not have to invest time and resources with no guarantee of payment! So, guys, try to avoid spec work, because this one will not gain as much experience as lost positive attitude to a subject.

There is a little comic about spec work you’ll be keen on:
http://freelanceswitch.com/freelance-freedom/freelance-freedom-43/

Do you want that for 5 dollars?

Now, we have seen some negative aspects of spec work and let’s think about criteria, which every great logo should stand for. As a matter of fact, we design our logo with quality and soul or just try to perfect our skills by this way.
After consulting with some professional designers I understood the best logo is that one, which:

• is easy to remember and clearly identifiable;
• leaves a positive impression of purposeful;
• is also effective without color;
• gives an unique, special corporate style;
• raises your clients credibility;
• distinguishes itself with quality and professionalism.

I know, you never thought about this stuff, but logo has a great sense, which is perceived not only visually, but also mentally. And everyone should take, that designer needs to work very hard, to make necessary research, to paint sketch, to think about conception and to outline unique style to get a logo done like typed above. That is why professional designers don’t charge $5.00 for a job.

The design process of a professional logo designer usually consists of:

1. The Design Brief: They conduct a questionnaire or interview with the client to get the design brief.
2. Research: They conduct research focused on the industry itself, on its history, and on its competitors.
3. Reference: They conduct research into logo designs that have been successful and current styles and trends that are related to the design brief.
4. Sketching & Conceptualising: They develop the logo design concept(s) around the brief and research. They use creativity and know how to design a logo.
5. Reflection: They take breaks throughout their design process. This lets their ideas mature and lets them get renewed enthusiasm and receive feedback.
6. Presentation: They then choose whether to present only a select few logos to the client or a whole collection.
7. Celebration: They then drink beer or eat chocolate or sleep or start on next logo design. Or a combination.

Do you believe doing all of that costs 5 dollars?

Mutually beneficial cooperation

I hope, that after this post reading designers and clients will become friendlier to each other, they will try to collaborate punctually. I hope designers will catch, that favorable work conditions influence on job result, buildup their reputation and creates a very important “airbag” for our today’s environment!

Conclusion remarks

To compose this post I used and rechecked information from external resources (thanks to them):
- Why logo design does not cost $5.00
- Creating the Perfect Logo
- Logo, Font, and Lettering Bible

Post image from David Airey.

Participate in conversetion

Have you ever imagined, that so a lot of things, actions and tricks stays behind each fantastic logo? Do you agree, that logo doesn’t cost $5.00? How much money you shall invest in logo creation?