Automatically Escape HTML Entities of Code Fragments in Comments

Update: Ryan has made this into a plugin — Code Comments.

Add this to your theme’s functions.php to allow readers post fragments of code in their comments (wrapped in <code>...</code>) which are automatically encoded (think of < and <)

add_filter('pre_comment_content', 'encode_code_in_comment');

function encode_code_in_comment($source) {
  $encoded = preg_replace_callback('/<code>(.*?)<\/code>/ims',
  create_function(
    '$matches',
    '$matches[1] = preg_replace(
        array("/^[\r|\n]+/i", "/[\r|\n]+$/i"), "",
        $matches[1]);
      return "<code>" . htmlentities($matches[1]) . "</code>";'
  ),
  $source);

  if ($encoded)
    return $encoded;
  else
    return $source;
}

Worth noting:

• Everything wrapped in <code>...</code> is encoded.
• Line breaks after opening <code> and before closing </code> are removed in order to avoid unnecessary <br /> tags.

— § / 7 comments, add yours

How to Create Beautiful and Elegant HTML Lists Using CSS

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries.

This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.

Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or •, ») for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list. Read more »

Logos and Names Are Not <h1> Headings

It is a common trend among many web designers and developers to use h1 tag for a logo of a website. Although such decision has no impact on the visual presentation of the content, it drastically diminishes the semantic power of h1 tag.

Every page on the web can be viewed as a single document. Hypertext enables linking and organizing them into groups and sets, which requires that each document has a clear purpose and structure.

Domain names are unique identifiers of those different groups of documents and are the broadest description of their content. Therefore usually they already include the name of a business, person or product (I will refer to them as ‘logos’). Read more »