Camenisch Creative

Sunburst with CSS3 Gradients

2011-04-26T00:00:00+00:00

This post was inspired by Lea Verou’s delighfully creative CSS3 pattern gallery. I was so impressed with the creative calculating that went into some of the examples that I thought I’d like to try my own hand at CSS3 gradient-wrangling.

The background of this page is my first attempt to contribute something a bit different. Technically, it’s not even a “pattern,” though it’s certainly a background, so it could be of use for similar reasons. I’ve also found that you can use the same technique to make a rather ugly pattern.

It weighs in rather heavy—almost 1KB for just one of the prefixes. Perhaps a better guru could accomplish the same thing at a lighter weight. One could also simply use fewer rays, but I’m not sure that would make for a very nice look.

Below is the basic sunburst CSS. View the actual file to see all the prefixes.

If this is of any use to you, feel free to copy it or adapt it however you’d like.

Thanks to Lea Verou for the inspiration, and for helping me trim down the syntax.

Sunburst Pattern with CSS3 Gradients

2011-04-26T00:00:00+00:00

Here’s a variation on the sunburst CSS background, reworked into a pattern.

The code, sans prefixes:

Email address obfuscation as view helper

2011-04-20T00:00:00+00:00

The Goal

I recently published my email address on my simple new website. Instead of the common approach of providing a web form, I decided to go quick and dirty this time and just provide a mailto: link.

I’ve seen several approaches to obfuscating email addresses on the web to protect them from pesky bots, and I’ve used one or two myself. This time, I wanted to meet these requirements:

Keep the view itself clean—encapsulate all obfuscation in an easy-to-call helper.
Make the link completely user-friendly—readable and clickable
Require javascript execution to render the link
And just in case bots can run Javascript now:
- Require loading of an external js file to get the address.
- Provide no hint in the html source that the external file does contain an email address.

In other words, I’d like a fully functional email address link, but demand as much from bots as I can. And the highest bar I can think to set for bots is that they must not only execute Javascript, but also download every script file on every page they spider. This seems to me like unlikely functionality not only today, but in the near future as well.

The Implementation

My implementation is in Ruby, using the lovely Serve prototyping framework. However, You can easily adapt the code for a Rails application, or the algorithm into PHP or any other language.

The View

Here’s the Ruby snippet I want to end up with in my actual template:

email_link('me@mydomain.com')

I might want to pass at least one other parameter, like the text to go into the link. I’ll leave that out for now though. The point is, again, to have a perfectly clean api for the view, and encapsulate the logic somewhere else.

The View Helper

In Serve, the place to encapsulate this sort of thing is in a helper. So I crack open my /views/view_helpers file, and write the method called above. Let’s start with a working method, and get to the obfuscation later.

module ViewHelpers
  def email_link(address)
    "<a href='mailto:\#{address}'>\#{address}</a>"
  end
end

With all this code in place, we should have a working page. We’ve met our first two requirements: the view is clean, and the email link is readable and clickable.