Blog posts

  • Soft breaks in HTML text

    May 02, 2012 | Tags: HTML, Snippet

    If you want to hint to the web browser where to break a word when it doesn't fit on the same line there's a nice little thing called soft hyphen, available through ­ (also ­ or ­).

    <p>This is an example of a wordthat&shy;shouldbreak in the middle if it doesn't fit on the same line.</p>

    The above example will break the made up "wordthatshouldbreak" at the &shy; character if the whole word doesn't fit on the same line, resulting in "wordthat-shouldbreak".

    More info about line breaks and hyphenation over at W3's HTML 4.01 Specification.

  • Circled number with pure CSS

    April 24, 2012 | Tags: CSS, HTML, Snippet
    CSS3 has introduced some nice features, one of them is rounded corners. This is a little snippet to create a circled number looking like this:

    The CSS:

    span.step {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 5px;
    text-align: center;
    width: 1.6em;

    The HTML:
    <span class="step">1</span>
    A couple of tips:
    If you want a bigger circle, change either font-size to enlarge everything by the same amount (both text and circle) or width, line-height and the border-radius' to only affect the circle (border-radius = half of the width and line-height values).
    To center the circle with other text, place it in an element where you set a line-height that equals or exceeds the one of the circle.

  • CSS add link arrow using :after without underline

    April 11, 2012 | Tags: CSS, Snippet
    This little snippet will show how to add an right double arrow (») to every link on the page. It's a little bit tricky to use special characters as :after content. Instead of using the standard escaped encoding (like &raquo;) you need to use the unicode hex value (like "\00bb"). You'll find the correct unicode hex values at

    In order to prevent the arrow to be underlined, position: absolute; is added to the a:after style. If you want it underlined, just remove this.

    If you want to combine :after and :hover you must do it in this particular order a:hover:after, the other way around won't work.

    a {

    a:hover {

    /* Lets add an arrow after each link */
    a:after {
    position: absolute; /* Prevent underline of arrow */
    padding-left:2px; /* Add a little space between text and arrow */
    content: "\00bb"; /* Unicode hex for &raquo; */

  • List all tables in a SQL database

    February 14, 2012 | Tags: SQL, Snippet
    Need to list which tables exists in your database? Then this will do the trick:
    select table_name as Name 

  • Generate class from config section

    November 09, 2011 | Tags: ASP.NET, C#
    Writing your own configuration handlers for custom config sections can sometimes be troublesome. ClassFromConfig is a nice little tool that generate wrapper classes based on your web.config or app.config.

    ClassFromConfig on Google Code
    Direct download of version 1.5.1