Front End on Rails slides online

Posted by Juice10 Tue, 28 Oct 2008 18:43:00 GMT

Yesterday at the Amsterdam.rb meeting I did a presentation on Haskell Front End on Rails.

Here are the presentation slides: Front End on Rails

And for those of you that prefer a pdf file I have the pdf version of Front End on Rails presentation.

Posted in presentation, amsterdam.rb, html, webstandards, css, netherlands, ruby, rails | 1 comment

Safari 3 Beta launched! (also for Windows)

Posted by Juice10 Tue, 12 Jun 2007 14:03:00 GMT

Apple has released Safari 3 in beta to the public, running both on Mac OS X and on Windows. Its jam packed with all kind of cool CSS3 stuff. But that is not the only thing.

Form control elements

The webkit team has enabled the styling of form elements.

CSS3

Safari 3 now has a bunch of new CSS3 properties

Try it out!!!

Check out the new Safari and download it

Posted in css, safari | no comments

Semantic Spam-Proof Email Display

Posted by Juice10 Mon, 13 Nov 2006 12:56:00 GMT

After deleting quite a bit of spam from my inbox I came up with a semantic way of displaying email addresses on a HTML page.

The concept is very simple, you add text within a <del> element to an email address needs to be removed from in order to show the real address.

Example

Your email address is: nobody@example.com Then you would add some text to scramble the email address from spam engines: nscrableobody@examscrableple.coremovem

To make sure that people can still see what the real address is wrap the fake text in the <del> element: n<del>scrable</del>obody@exam<del>scrable</del>ple.co<del>remove</del>m This would give you the following: nscrableobody@examscrableple.coremovem

This makes it quite hard to read even for the person wanting your email address. So to simplify this we could do two things:

  1. just add one bit of fake text to it: nobody@removeexample.com
  2. make sure the <del> element is hidden. This can be done multiple ways. You could add an inline style tag to the <del> element: <del style="display:none"></del>. Or you could give it a class: <del class="fake_email_text"></del> and add a little snippet of CSS to your page/css file: 
    .fake_email_text {
  display: none;
}

Pros

  • Screen readers will not read the text that is not being displayed by the CSS.
  • You can copy paste the email address.
  • It works with CSS, Javascript & images off.

Cons

  • It isn’t a link.

(If anyone can think of more just shoot)

Posted in email, html, css | 3 comments | no trackbacks