Web Dev Bros » CSS

Methods for hiding/obfuscating emails in your website

Michal — Tue, 05 Aug 2008 04:05:40 +0000

Hiding your emails on your website can be very tricky and the method should be chosen wisely. Yeah, its our war against email harvesters! Just now i have read the outcome of an interesting study made by Silvan Mühlemann. In his research he used nine different methods to obfuscate the email on his page. He created an email address for each method and was keeping track of the incoming spam for 1.5! years. Here is the outcome:

(source: Nine ways to obfuscate e-mail addresses compared)

Amazing! The simplest methods using CSS had the best results. No Spam at all. There is just one question: How long will it take for the harvesters to adapt their algorithms to this research results?

(If you’re interested to see the detailed implementation of those methods just check the original article. I have skipped it.)

Rounded div corners with Ruby on Rails

fab — Sat, 26 Apr 2008 08:24:52 +0000

So now you know how to do nicely rounded div corners without using images or any javascript after reading this post.

But how do we integrate this nicely into our rails app? The following solution might not be perfect but that's what i'm using and like:

put the css file from Deathshadow
in your public/stylesheets dir.

in your erb view, include the css with:

PLAIN TEXT

RUBY:

<%= stylesheet_link_tag "screen_borderstyles" %>

then add the following helper methods to the entire application:

PLAIN TEXT

RUBY:

# in application_helper.rb we add:
def rounded_div(options = {}, &block)
start, ending = rounded_div_html_code(options)
concat(start, block.binding)
block.call
concat(ending, block.binding)
end
def rounded_div_rb(options = {}, &block)
start, ending = rounded_div_html_code(options)
start + block.call + ending
end
def rounded_div_html_code(options = {})
id_attrib = options[:id] ? " id=\"#{options[:id]}\"" : ""
class_attrib = options[:class] ? " #{options[:class]}" : ""
border = options[:border] ? "_border" : ""
return %!
class="rounded#{border}#{class_attrib}"#{id_attrib}>
class="top">
class="rounded_content">
!,
%!

        class="bottom">

!

end

to let this work we still need to definde the proper css classes as explained on the rounded corners web page:

PLAIN TEXT

CSS:

# in your_stylesheet.css:
.my_rounded_div .top,
.my_rounded_div .top b,
.my_rounded_div .bottom,
.my_rounded_div .bottom b,
.my_rounded_div .rounded_content {
background-color: #ffffff;
border-color: green;
}

now in any of your views you can do fun stuff like:

PLAIN TEXT

RUBY:

<% rounded_div(:class => "my_rounded_div") do %>
This is the content of my rounded div. Arbitrary view code goes here.
<% end %>

or with a nice border around the div:

PLAIN TEXT

RUBY:

<% rounded_div(:class => "my_rounded_div", :border => true) do %>
This is the content of my rounded div with a border. Arbitrary view code goes here.
<% end %>

but also inside your view helpers you can generate rounded divs with pure ruby:

PLAIN TEXT

RUBY:

def display_category_helper(category)
rounded_div_rb(:class => "main-cat") do
link_to(h(category.name), category_path(category))
end
end

Rounded corners with CSS (and no images)

fab — Thu, 24 Apr 2008 14:43:33 +0000

I searched a lot to find this great solution for doing rounded borders with just CSS and no images. There are loads of solutions out there which use images to make the borders or doing some funky javascripts which take too much time on page load and the rounding is only applied after onload.

so thanks to Deathshadow for this great solution with pure CSS. just check out the link. there are the examples and the source needed.

Want to show your source code to someone else?

Michal — Mon, 17 Dec 2007 15:47:13 +0000

Today i stumbled across a nice tool called Pastie. Pastie helps you if you want to show some bits of your source code to someone else. e.g. you need some help, advice (or you just want to show off with your code). You paste an excerpt of your code and pastie saves it for under a unique URL. Then you send this URL to the person you want to show the code. The big advantage here is that the syntax is nicely highlighted ... very nice for remote troubleshooting! I have created a code snippet for demonstration.

(i've used code sections to create more sections.)

Building dialogs with auto adjusted content just with CSS

Michal — Mon, 20 Nov 2006 21:36:11 +0000

Each application/website uses some popup windows or modaldialogs (known from MS IE) to display some content. I will call them dialogs in the rest of the article. To keep such dialogs userfriendly and easy to use the dialog should have (or usually has) the structure which you can see in the picture on the left. A headline at the top, an endline at the bottom and a content container between those two. The best thing now would be to have the content dynamically adjusted to the free space between the headline and the endline. Also some scrollbars should come up if there is not enough space (see picture). I'll explain how to do this.

Okay before I move on i need to note that this solution only works in Internet Explorer 5.0 and higher because of the usage of a Javascript "expression" within the CSS. I am looking forward to some equivalent solution for Mozilla. Thanks a lot in advance.

Click here to see what we're going to produce...

Anyway here we go with the solution for this tricky problem As far as I remember I structured the dialog into headline, endline and content. This is a structure I would recommend you to use throughout your application. If you try to follow this easy structure you'll save a lot of troubles. Especially when designing forms you don't need to invent some new incredible design structures. Anyway so when you structure the dialog into these 3 sections we need to define some style for them. Here we go...

PLAIN TEXT

CSS:

#headline { }
#content {
overflow:auto;
height:expression(document.body.clientHeight-document.getElementById('headline').offsetHeight-document.getElementById('endline').offsetHeight);
}
#endline {
position:absolute;
bottom:0;
width:100%;
}

Thats it! This definitions are needed in order to achieve the behavior of the dynamic content. The important line is line 5 it does all the magic. You see that the endline will be placed always at the very bottom and the content definition calculates the height by deducting the height of headline and endline from the available body height. Yeah you are right. What's now nice is that we can call our dialog in whatever size we want to and the content is always adjusted to the dialogs size. So now you just need your HTML markup for the dialog which could look like this.

PLAIN TEXT

HTML:

id="headline">Headline

 id="endline">

 id="content">some content goes in here

Note the the endline is before the content. The reason is because the content normally takes longer to load but we need the height of the endline already to calculate the height of the content. In theory this should not work because the style is loaded even before the div is rendered but somehow it works I never tried it on the web just on intranets but it works fine. The code above has no appereance definitions in it so if you want it freaky & funky you need to play around with the CSS a bit or just hava look at the sourcecode of the sample ive created.

Dialog with auto adjusted content.