CC0 Photography Part II


January 14, 2017

Essential development tips & tools – Part two

Welcome to the second installation of the ‘Essential development tips & tools’ series. In this series I’ll be sharing the tools that speed up and optimize my front end development process. Today’s new batch of tips & tools will: prevent email addresses being spammed, help you find out what technology the competition is using, assist you when replacing a pre-existing website.



1.Protect those email addresses!

One of the main goals of a website is to establish a communication line between your audience and yourself (or your client). This asks for several points of contact being coded into the website. Not all contact points are safe though! The safest way to establish contact is via a contact form, if possible, assisted by a captcha. However! Most of the time you’ll want to show an email address to your audience.

This is done with a ‘mailto link’. It will look something like this:

Screen Shot 2017-01-14 at 08.59.48

This is where it gets tricky, if you just put a mailto link in your code, this makes the address susceptible to being ‘crawled’ by spambots (little tiny spiders that crawl into every orifice of your code, true story). When this happens, you’ll soon find yourself receiving random emails from Nigerian princes with financial advice, Warren Buffet, Spanish lotteries, …

So how do we prevent our mailbox being spammed? Here’s one way that will surely reduce the odds of it happening:


Convert your address into character entities

Visit Email Address Encoder, enter your email address, click encode.. Boom! The entities are at your disposal! Use them wisely, or just do this:

Screen Shot 2017-01-14 at 09.00.15

Replace every occurrence of your email address with the entities.

Now you are protected against low level automated crawlers. Beats being unprotected!


2. Scope out the competition

As a developer you always want to know what everyone else is using (Awesome job benefit: constantly doubting every single thing you do!). You want to know which CMS is being used, which JS libraries, …

In the past I opened up the core code and started looking for clues. Those days are long gone! I discovered Built With, type in the url you’re curious about, click lookup, and watch the world unravel.

Screen Shot 2017-01-14 at 09.09.10

As you can see, my web server runs apache, I’m a filthy WordPress dog, and I’m tracking your asses with Google Analytics.


3. Don’t ignore previous website architecture

When you’re replacing a website with a brand spankin’ new one, it’s tempting to just throw every bit of that shitty old website out the window. Stop!

Before you unleash the wrath of Thor, there is one part of the old junker you should not erase from public memory: the architecture.

You need to list every existing URL being used by the old website. Why? SEO! Google still links to every old url when you upload your new website. So you need to redirect those previous URL’s to the new versions of them in your .htaccess file (More on this in a future post).


The number one tool for this job: Screaming Frog SEO Spider.

This offline tool allows you to scan the existing online directories and gives you a map of the entire shabang!

Screen Shot 2017-01-14 at 09.26.39

Bonus: it also checks meta tags, headings,… So it doesn’t hurt to run it on your existing websites.


That’s it for today,

See you next time!




View Project