Six Studios

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.

Google – Webmaster Tools

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.

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:

1
2
3

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

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.

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:

1
2
3
4

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).

You can read more on browser specific CSS here.

Here is the final product:

The Basics

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:

1
2
3
4
5
6

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

if(is_integer($var))
...

1
2
3
4
5
6
7
8

# 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.

1
2
3
4
5
6
7
8

# 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:

1
2
3
4
5
6
7
8
9
10
11

# 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.

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.

The very basics

The Basics

1
2
3
4
5
6

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

Ruby handles arrays and hashes separately.

1
2
3
4
5
6

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

Problem

1
2
3
4
5
6
7
8

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

My CSS was as follows:

1
2
3
4
5
6
7
8

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

div#container ul {
  position: relative;
}

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

Solution

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.

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.

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

1
2
3
4
5
6
7
8
9
10

<!-- 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]-->