obfuscation

Hiding Emails from Spam Bots: The CSS3 Way

Hiding emails from spam bots can be really painful, but fortunately there are a lot of cool solutions out there. Here’s how you can do this with the CSS3 generated content and reversed text direction.

Let’s say that email you want to obfuscate is info@company.com. The first thing you need to do it to reverse it, so it looks like this: moc.ynapmoc@ofni. For instance, you can do this online here. The rest is CSS:

  • In your style sheets, create a new .contact rule.
  • Add the reversed string as value of the content property of your .contact rule.
  • Set the direction of the text as right to left via direction and unicode-bidi.
  • Use the .contact element in your markup.

The CSS

.contact::before
{
    content: "moc.ynapmoc@ofni";
    direction: rtl;
    unicode-bidi: bidi-override;
    text-decoration: underline;
    color: #00f;
}

The Markup

<p>To contact us, send an email
to <span class="contact"></span>.</p>

… And everything will look just right when you view it in the browser:

email

The drawback of this approach is that CSS3 generated content cannot be selected and copied, which is a usability issue, but this is just an idea and there are many other solutions worth trying.

One small consideration, regarding the syntax of generated content. Older browsers do not recognize the ::before or ::after double column syntax, so you may want to consider using :before / :after. Since this is just syntactical enhancement to distinguish pseudo elements (hover, active, etc) from generated content (before, after), introduced in CSS3, newer browsers understand both syntaxes, so  you can use the “old” syntax without concern.

Related Posts and Links

Development and Productivity Extensions for Google Chrome

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

If you are looking for cool development and productivity tools, here are a few, created by me, and available as handy Chrome Chrome extensions:

Builder.CSS

Builder.CSS is a free tool for merging and minifying style sheets into a single file, using some of the coolest HTML5 features like drag and drop of local files and processing them without uploading to the server. I am happy to announce that recently Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Get the Chrome extension or click here for more info and demo.

builder-css

W3C Validation Bookmarklet

Acid.JS Validator is a free bookmarklet that uses the W3C SGML parser’s API to validate the markup of the page on which it is called. Get the Chrome extension or click here for more info and demo.

validator-valid

Stickeez

Stickeez is a sticky notes JavaScript application using the new HTML5 File API, localStorage and CSS3. The data is fully persisted on the client. Stickeez also has an option for importing/exporting data so users can save their notes before cleaning up cookies or import notes to another browser. And finally – users can choose between 4 types of board styles – cork, fridge, whiteboard and skulls. Get the Chrome extension or click here for more info and demo.

stickeez

Image to Base-64 Data-URI Encoder

Image2Base64 is an online tool, provided by Acid.JS Web.UI for conversion of image files to base64 data URIs. It implements the new HTML5 file API, and the selected images are processed entirely on the client without uploading them onto the server. Get the Chrome extension or click here for more info and demo.

image-to-base-64

Hasher Message Digest Encoder

Hasher is an online service for creating message digests with a wide range of more than 40 encryption algorithms. Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. Get the Chrome extension or click here for more info and demo.

hasher

Builder.CSS 2.0 Minifier and Merger is Out

The new and improved version of Builder.CSS Minifier and Merger is out.

What is Builder.CSS?

Builder.CSS is a free tool for merging and minifying style sheets into a single file and thus reducing HTTP requests and file download time. It features cool UI with various options for adding, removing and rearranging files via drag-and-drop, build and output options and is extremely fast and responsive even with a large number of files that need to be compiled. You can use it along with Builder.JS JavaScript Obfuscator, Merger and Minifier.

What’s New in Version 2.0?

  • Improved and faster performance.
  • New log viewer, logging each step of the compilation.
  • Ability to add more files from the UI.
  • Drag an drop functionality for rearrangement the order of the files.
  • Better HTTP error handling.
  • The actual merging and minification is now done entirely on the client.
  • PHP is now required only to write the output to a physical file if set to.
  • A number of issues and bug have been addressed and fixed.
  • Automatic check and notification is a new version is available for download.

Features:

  • Easily configurable list of files that need to be merged.
  • Minification options:
    • Remove line-breaks and tabs;
    • Remove extra white-space;
    • Remove comments;
    • Remove comments;
  • Two types for saving the output code – as a physical file or as a copy-paste string.
  • Drag an drop functionality for rearrangement the order of the files.
  • Log viewer, logging each step of the compilation.
  • Add /remove and rearrange files from the UI.

Requirements:

  • The latest version of Mozilla FireFox, Google Chrome, Apple Safari, Opera or Internet Explorer (9x+).
  • Web-server.
  • PHP if you wish to save the compilation about to a physical file.
  • JavaScript should be enabled.

Screenshots:

Get Builder.CSS. It’s Free.

You can download it from this link or from its home page on Acid.JS. If you like Builder.CSS, maybe you will find Builder.JS JavaScript Minifier, Merger and Obfuscator also useful tool. As usual, the new version has been included to the latest release of Acid.JS Web.UI.

JavaScript Merger, Minifier and Obfuscator

Following last week’s release of Builder.CSS, I decided to create a similar tool for merging, minification and obfuscation of JavaScript. I am happy to announce the result of my new experiment, called Builder.JS.

The major difference compared to Builder.CSS is in the UI. This time I decided to implement console-like interface that works with a simple set of commands for listing, adding, removing, settings options and building the list of files. Don’t be mislead by the screenshots – regardless of what you see, Builder.JS is an application that works in the browser. All you need is the latest versions of FireFox, Chrome, Safari, Opera or Internet Explorer.

Screenshots:

Features:

  • Any number of JavaScript files can be merged into a single, minified and obfuscated file.
  • The default options and files list are set in the constructor of the Builder.JS object declaration (in index.php).
  • The excellent Packer JavaScript obfuscation tool, created by Dean Edwards is integrated to Builder.JS, ensuring flawless obfuscation and maximum protection of the code.
  • Add, remove and build files and set options from a simple console-like interface and commands.
  • Various build options – Base-62 encoding, variable name replacement, minification, etc.
  • Two types of outputting the result of the build – as a string, that you can copy and save manually or automatic saving to a physical file (using PHP).
  • You can use the Up and Down arrows of your keyboard to repeat previously used commands.

Requirements:

  • The latest versions of Mozilla FireFox, Google Chrome, Apple Safari, Opera or Internet Explorer.
  • Web-server.
  • PHP (if you wish to save the build output to a physical file).
  • JavaScript should be enabled.

You can download Builder.JS directly from this url or go to it’s home page on Acid.JS. You can combine it with Builder.CSS. Happy use!

Builder.JS is also included in the latest release of Acid.JS Web.UI.

CSS File Merger and Minifier

I am happy to announce that I have just finished a new tool that you may find useful. Builder.CSS merges and minifies style sheets into a single file and thus reduces HTTP requests and file download time.

Features:

  • Easily configurable list of files that need to be merged.
  • Minification options:
    • Remove line-breaks and tabs;
    • Remove extra white-space;
    • Remove comments;
    • Remove comments;
  • Two types for saving the output code – as a physical file or as a copy-paste string.

Requirements:

  • Latest version of Mozilla FireFox, Google Chrome, Apple Safari, Opera or Internet Explorer.
  • Web-server with PHP.
  • JavaScript should be enabled.

Screenshots:

Download directly from this link and enjoy! If you are looking for a JavaScript minifier and merger, you can try Builder.JS.