Six Studios - Home

A new sitemap plugin for Mephisto

2009-04-12T20:33:00Z

Search engines such as Google, Yahoo, MSN and Ask decided on a sitemap.xml file/schema a while back.

The Sitemap Protocol allows you to inform search engines about URLs on your websites that are available for crawling.

When a website is re-indexed this sitemap.xml file is scanned for added and updated pages. For faster indexing, search engines can also be notified, or pinged, when content has been added to your website.

A plugin was made for the Mephisto Blog to generate the sitemap.xml file. That plugin can be found here.

I made a fork the mephisto_sitemap plugin and added code to ping Google, Yahoo, MSN and Ask everytime a post has been added/updated. You can find it on my Github Repository.

display: inline-block, browsers, and you

2009-04-04T23:13:00Z

Block level elements are easy to work with. You can give them a height and width, and they’ll pretty much look how you intended. Inline elements, such as links and spans, will flow with the document content. They can’t be styled with the height or width CSS attributes.

CSS to the rescue

CSS allows us to control how the element is displayed with the display attribute. A link will display as a block level element because of the following:

123	a:link, a:visited { display: block;}

inline-block?

There is a hybrid property of display: block and display: inline, it’s display: inline-block. You wont see it used much because Internet Explorer doesn’t fully support it. Firefox and Safari do support the inline-block property properly.

Internet Explorer offers no support for display: inline-block on block level elements (eg: ul, li, div, p, h1-h6, etc). It does, however, provide support with inline elements (eg: img, span, a). Here is an example of display: inline-block used on a paragraph tag and a span. The span works properly in Internet Explorer 6 and 7, Firefox and Safari. The paragraph, on the other hand, still presents itself as a block level element and ignores the display: inline-block styling.

How to use this

Floating HTML elements can get messy really fast and things like this can happen. In most sites I build floating starts in the main navigation and can grow to floating may elements after that. A combination of display: inline and display: inline-block can elevate the need for floating in the main navigation all together. Here is an example of it.

This code example sets the LI elements to display: inline to bring the list of links on the same line. The links are then set to display: inline-block This can be done because links are inline elements and, like stated above in the article, Internet Explorer 6 and 7, Firefox and Safari support display: inline-block on inline elements.

#mainNav li {
  display: inline;
}
#mainNav a:link, #mainNav a:visited {
  display: inline-block;
}

Happy coding!

Mephisto and Wordpress

2009-04-02T04:14:00Z

The Six Studios blog launched initially with Wordpress and has since moved to Mephisto. Both are excellent products, but appeal to two very different audiences.

Wordpress out of the box

Its PHP. Its easy to install and even easier to use. That’s why it was my first pick.

The text editor is very friendly (TinyMCE) and so is the interface. The text editor gives the user a presentation view of the content.

An HTML view of the post is available too. The presentation view allows the user to see what text is bold, underlined, and italicized, but wont indicate what content a search engine will deem most important. Though WYSIWYG editors are the easiest editors to use, presentation without proper tagging only solves half the problem. The code is left for the search engine to decide what is most relevant instead of tagging it as such.

Mephisto out of the box

Its Rails. You’re required to know how a Rails application works in order to set it up. This isn’t significant for a developer or a tech savvy person with Google at his/her finger tips, but for the average person that wants a blog it might be to much to ask.

Mephisto’s text editor allows the user to format each post with Textile, Markdown, Markdown with Smarty Pants and plain HTML. This gives the user much more control upfront, but requires knowledge of the markup syntax and proper tagging. Though more work is needed, utilizing proper tags such as header (h1-h6) tags will yield a better results in search engines.

Coderay for syntax highlighting and Akismet SPAM blocking are also built into Mephisto.

Thoughts

Out of the box Wordpress is meant to answer the needs of most. Get up and get posting. Mephisto answering the needs of a developer and the code-conscious. Syntax highlighting and proper code formatting.

Two very different targets. Two excellent products.

Labels align below radio dots and check boxes

2009-03-26T03:59:00Z

Like the title says, “labels align below radio dots and check boxes.”

Its subtle, but its enough to make a page imperfect. The simple fix for this is to apply a class to the labels you wish to fix. In this example I’ll use the class “valign.”

Include the following CSS:

1234	label.valign { position: relative; bottom: 3px;}

The CSS will move the “valign” labels up 3 pixels. For Internet Explorer you’ll need to use 2 pixels (2px).

Here is the final product:

PHP to Ruby: Lesson 2

2009-03-22T03:47:00Z

In the first lesson we went over basic similarities of Ruby and PHP. Lets go over some more.

The Basics

Its essential to know what type of data you’re working with. Whether its a string, integer or an array, we need to know what type of data we’re about to manipulate.

PHP has the following functions is_array(), is_bool(), is_integer(), is_object(), is_string(), and many more.

Ruby also provides this functionality. Remember from the first lesson, Ruby is an object-oriented language so data type checking will be done with the method is_a?. Here are some examples:

# PHP
if(is_string($var))
...

if(is_integer($var))
...

In Ruby:

# Ruby
if var.is_a? String
...
end

if var.is_a? Integer
...
end

PHP is very powerful when working with arrays. A few useful functions are array_keys(), array_values(), explode() and implode().

For Ruby, in the same order, the methods are keys, values, split and join.

# PHP
$var = array( 'my',=>1, 'php'=>2, 'hash'=>3 );

$keys = array_keys($var); # using array_keys()
$values = array_values($var); # using array_values()

$new_array = explode(' ','my php array'); # using explode()
$new_string = implode(' ', $new_array); # using implode()

And for Ruby:

# Ruby
var = { 'my'=>1, 'ruby' =>2, 'hash'=>3 }

keys = var.keys # using keys method
values = var.values

new_array = 'my ruby array'.split(' ') # using split method
new_string = new_array.join(' ')

# splitting a string option 2
new_array = %W(my ruby array)

Hope this was helpful.

Floating results in floating text

2009-03-20T01:46:00Z

In a very special case Internet Explorer 6 will do something very strange with text. This special case is caused by excessive floating of parent and child elements.

You’ll notice the “magna, non” text belongs in the blue-ish box, but it appears in a mysterious location. I’ve only seen this in Internet Explorer 6.

Luckily this problem can be fixed by setting the container of the floating text to position: relative.

This is rendering issue inside Internet Explorer 6. I have only come across it, as stated above, after floating too many parent and child elements. Seeing this should inform the developer that the page can be structured in a cleaner manner, but if rebuilding isn’t an option just set the container to position: relative.

PHP to Ruby: Lesson 1

2009-03-14T00:15:00Z

The very basics

The Ruby language is object-oriented. PHP is not object-oriented, but has objects. Ruby’s object-oriented nature results in some areas of it’s syntax to look very much like JavaScript. PHP’s echo is puts in Ruby. PHP uses semicolons. Ruby uses semicolons, but only in specific cases. For clean, readable code, assume you won’t be needing semicolons. Lets being…

The Basics

PHP creates arrays and hashes with the same function array().

# PHP
$array = array('my', 'php', 'array');
$hash = array(
   'my_index'=>'my_value',
   'my_second_index'=>'my_second_value'
);

Ruby handles arrays and hashes separately.

# Ruby
array = ['my','ruby','array']
hash = {
   'my_index'=>'my_value',
   'my_second_index'=>'my_second_value'
}

Take note that Ruby creates arrays and hashes in the same syntax as JavaScript. Also note that there is no semicolon. Ruby doesn’t use them unless multiple commands are on the same line. That can lead to messy code or for loops so we’ll get into that later.

PHP uses curly brackets for blocking multiple commands and no curly brackets for single commands.

# PHP
if($is_php)
   echo "Yes this is PHP"; # single command

if($is_php) {
   echo "Yes this is PHP"; # first command
   echo "Its great!";
}

Ruby uses do and end for blocking multiple commands and curly brackets for single command blocks.

# Ruby
if is_ruby { puts "This is ruby!" } # single command

puts "This is a backwards if statement" if is_ruby # variation of single command

if is_ruby do
   puts "This is ruby!" # first command
   puts "Its awesome!" # second command
end

Still pretty basic

PHP has the foreach() function.

1234	# PHP$array = array('this','is','a','php','test');foreach($array as $el) echo "$el";

Ruby has an each method.

# Ruby
array = ['this','is','a','ruby','test']
array.each do |el|
  puts el
end

array.each { |el| puts el } # the single lined version

Another Javascript similarity. The method each should look familiar to anyone that has used any of the popular Javascript frameworks Prototype, Mootools, and jQuery.

Ruby and the web

One of Ruby’s best web friends is eRuby (embedded Ruby). eRuby will make the PHP to Ruby transition that much smoother. For example:

1234	# PHP<? if($is_php) { ?>; PHP is great!<? } ?>

And with eRuby:

1234	# Ruby<% if is_ruby do %>; Ruby is awesome!<% end %>

That will wrap up this entry, but there is more to come.

overflow: hidden + position: relative doesn't work in IE 6/7

2009-01-07T23:32:00Z

Problem

I hit an IE 6/7 bug today. My HTML was as follows:

<div id="container">
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    ...
  </ul>
</div>

My CSS was as follows:

div#container {
  overflow: hidden;
  height: 400px;
}

div#container ul {
  position: relative;
}

The list content would display and flow outside of the container.

Solution

Setting the UL to position: relative causes the bug in Internet Explorer 6 and 7.

Moments after finding the source of the problem I was pointed to this article by a friend:

http://www.defusion.org.uk/archives/2007/04/02/when-overflow-hidden-doesnt-hide-in-ie/

In the article the writer isn’t aware if the bug exists in Internet Explorer 7. Yes it does.

Creating E-mail Newsletters

2009-01-06T23:22:00Z

Limit your tools

HTML newsletters can be very easy to build. To do this you’ll need to reduce your daily web toolset to a select few.

You’ll have tables, images, spans, paragraphs, div’s, links, hr’s, and br’s at your disposal.

All CSS will have to be inline and limited to the following attributes: height, width, line-height, font (and variants like font-size/font-family), color, text-align, border (and its variants), and list-style (and its variants) if needed.

Do not use CSS padding, margin or the table attribute cellpadding. These 3 attributes will drastically reduce the level of compatibility with webmail clients.

Prep for the newsletter

The first step of creating the e-mail newsletter is to place all of your required images in a publicly accessible location online. Keep in mind, some e-mail clients disable images by default so use them only when absolutely necessary.

The second and reoccurring step, set the padding and margin to “0” on each element that has default values to these attributes.

<body style="padding: 0; margin: 0">

These are the following elements that have default padding and margin values: body, headers (h1-h6), paragraphs, and lists (ul and ol). Make sure to set each of these attributes to “0” if/when you use them in your e-mail newsletter.

Begin development of the e-mail newsletter

Your e-mail newsletter will be built with tables. There will most likely be nested tables as well. For every table you create set cellpadding, cellspacing, and border attributes to “0.” You will also have to redefine the font styling for each table. This is necessary because tables do not inherit the font properties of their parent containers.

<table cellpadding="0" cellspacing="0" border="0" style="font: 12px Helvetica, Arial, sans-serif">

If your e-mail newsletter is multi-columned, create a containing table with an equal number of cells as the newsletter design has columns. This example depicts a two column newsletter.

<table cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td width="400"> <!-- main content block --> </td>
    <td width="200"> <!-- right column block --></td>
  </tr>
</table>

Need Padding?

That we can’t use padding in CSS or cellpadding in HTML, we’ll have to fake it. I’ve found the best way to create left and right padding is with additional table cells. Create the table cell, set the width of the cell to the amount of padding required, add a nonbreaking space ( ) to the cell. The nonbreaking space will ensure that the table cell displays.

To produce top and bottom padding I’ve found it cleanest to use a line break (br) and define the line-height.

<br style="line-height: 10px" />

Table rows can yield the same result, but this is just cleaner.

No background-color…

The CSS attribute background and its variants aren’t completely supported in e-mail clients. Instead, use the bgcolor table and table cell attribute. This will yield the same results as CSS’s background-color.

Don’t forget!

It’s best practice to start your e-mail newsletter with a “view online version” link. An “unsubscribe” link is required. This can be presented as a link or instructions.

As stated previously, some e-mail clients disable images by default. Most of these e-mail clients will display images automatically if the sender is in the recipients address book. Add a sentance reminding the reader to add the sending e-mail address to their address book.

Thats it

Those are the rules I follow to create e-mail newsletters that are supported almost everywhere. Here is an example to show all of the development concepts applied in a single newsletter. Check it out!

The e-mail newsletters I create a properly supported on the following platforms:

AOL Web
Comcast
Earthlink
Gmail
Mail.com
MSN Hotmail
Windows Live Hotmail
Yahoo! Mail
AOL 9
Outlook 2003
Outlook 2007
Outlook Express 6
Outlook XP
Thunderbird
Apple Mail

Hope it helped!

Browser specific CSS files

2008-12-03T21:43:00Z

Browsers render HTML and CSS differently. Box model hacking is too messy. And there are just better ways of solving your cross-browser problems.

If the compatibility issues only exist between Internet Explorer and Firefox/Safari the following should suffice:

<!-- Firefox/Safari -->
<link rel="stylesheet" href="/assets/css/style.css" type="text/css" media="screen" />

<!--[if IE 6]>
<link rel="stylesheet" href="/assets/css/style_ie6.css type="text/css" media="screen" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="/assets/css/style_ie7.css" type="text/css" media="screen" />
<![endif]-->

The first and primary style sheet, “style.css,” handles everything presentation-wise. Its processed by every browser. If there are rendering issues between Internet Explorer and Firefox and Safari it should contain values appropriate for Firefox and Safari.

Next we have some inline logic.

<!--[if IE 7]> ...<![endif]-->

This is viewed as a comment to every browser except Internet Explorer 7. Anything that exists between the opening and closing if statement is processed solely by the Internet Explorer 7 browser.

The next code segment is almost identical to the Internet Explorer 7 block.

<!--[if IE 6]> ...<![endif]-->

Instead of being read by version 7 of the browser it is only processed by Internet Explorer 6. In these Internet Explorer 6 and 7 specific style sheets you can define CSS values to override problematic values existing in “style.css.” These files are only meant to contain CSS values that differ from the primary style sheet, in order to preserve the desired presentation.

JavaScript

A second approach to solving this problem can be a JavaScript solution. In this example I’ll use the Prototype framework.

document.observe('dom:loaded',function(){
  var link = new Element('link',{ rel: 'Stylesheet', rev: 'Stylesheet', media: 'screen' });;
  if(Prototype.Browser.IE)
  {
    if(navigator.appVersion.search(/MSIE\ 7\.0/)&gt;-1) // Internet Explorer 7
      link.setAttribute('href', '/blog/examples/2008/12/css/browser-specific-ie7.css');
    else if(navigator.appVersion.search(/MSIE\ 6\.0/)&gt;-1) // Internet Explorer 6
      link.setAttribute('href', '/blog/examples/2008/12/css/browser-specific-ie6.css');
  }
  else if(Prototype.Browser.WebKit)// Safari
    link.setAttribute('href', '/blog/examples/2008/12/css/browser-specific-safari.css');
  else if(Prototype.Browser.Opera) // Opera
    link.setAttribute('href', '/blog/examples/2008/12/css/browser-specific-opera.css');

  // insert link tag into the head of the document
  $(document.getElementsByTagName('head')[0]).insert(link);
});

The Prototype framework allows you to process JavaScript once the DOM is available, prior the “onload” event. This is very useful in our case since we want to include a new style sheet before the page renders.

The code segment has a check being done for each browser. First it checks if the browser is Internet Explorer and then the version. Next it checks against Safari and finally Opera.

The final line of the code segment shows how the link tag is inserted into the document head.

Here is an example