April 26th, 2007

Alternate Idea: Encytemedia Reincarnated

10 comments on 1376 words

If you’ve stumbled here and haven’t already read this post, please do so now to understand what’s going on. In short, I’ve moved Encytemedia.com to AlternateIdea.com and have some new branding.

I’ll be a tumblin’

With the recent explosion of Twitter and Tubmlelogs, I’ve decided to integrate a tumblelog directly into the blog. All the tumbles are integrated into the main RSS feed. We’ll see how this goes though. If your looking to start tumbling yourself, you definitely should check out tumblr.com–It’s fantastic!

This ain’t your Momma’s CSS

I haven’t looked, but I’m sure this website will bomb in IE 6, possibly 7. All the fancy hover stuff, quote marks, and rounded corners are done with pure css. It was such a joy to have stuff just work. For those of you who are curious, here is how I managed to accomplish some of it.

Generated content and blockquotes

The blockquotes on this site use Hexadecimal representations of quote entities in order to render them correctly.


#sbody blockquote p:before {
    content: "\201C";
    font-size: 120%;
    color: #e70 !important;
}

#sbody blockquote p:last-child:after {
    content: "\201D";
    font-size: 120%;
    color: #e70 !important;
}

You can’t just use the entity itself, it will bomb. Your also required to escape the hex with a \ or it just won’t work. One thing to note is that Firefox supports open-quote and close-quote as valid property values for content, but Safari doesn’t support these.

The pullquotes on the site have to use a little JavaScript though. I took the “Automatic pullquotes with JavaScript and CSS” by Roger Johansson and implemented it in Prototype because I was already using Prototype on the site. I also used innerHTML instead of the DOM and I sleep well at night. Which pretty much condensed the code you see in his article to the code below. 


  $$('span.pullquote').each(function(quote) {
    var newquote = $($blockquote($p(quote.innerHTML)));
    newquote.addClassName('pullquote');
    quote.parentNode.appendChild(newquote);
  });

I bet you’ll read this as a pull quote before you read it in the content flow. See how effective pull quotes are? Whoa! Lookout! Lookout! Don’t run off including Prototype in your site just to do pull quotes! Use Roger’s technique if your not already using a Library.

Rounded corners in less than 3 billion lines

I’m perplexed by the level of difficulty involved with rounded corners. Even the simplest rounded corners involve a sacrificial lamb. In search of a solution that would cater to 90% of my audience, I decided to use the following code.


.round {
  -moz-border-radius: 8px;
  border-radius: 8px;
  background-image: url(../images/tr.png), 
      url(../images/br.png), 
      url(../images/tl.png), 
      url(../images/bl.png);
  background-position: 100% 0, 100% 100%, 0 0, 0 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

The little tags you see at the bottom of this post and the subtle rounding you see when hovering over an item in the archives, uses this simple technique. This works in Firefox and Safari, but why?

  • -moz-border-radius and border-radius: Mozilla supports the CSS 3 border-radius property through -moz-border-radius. The additional border-radius is there for future purposes in the event a browser comes along that supports it.
  • Multiple background images and Safari: Safari has supported multiple background images for some time now. What I’m basically doing is supplying four clipping images that create the rounded effect.

Note that the multiple background images are the white-space areas if the rounded rectangle was put into a solid rectangle. The reason I do this is because I can make a rounded rectangle of any color and use the same images, unlike when you use an actual corner like so many of those generates use. When you hover over a tag at the bottom of this post, all I’m doing is changing the background-color. There aren’t any new images that are used when you hover to create the lighter blue.

The only real downside with using the white-space clippings is that you’ll need to create new images if your rounded item will be on different color backgrounds, and it also doesn’t work well on gradient backgrounds. With that said, this is the way I’ll be implementing rounded corners for some time until someone comes up with something better.

Now you see me now you don’t: Using display and hover

The final bit of trickery on this site is the date boxes and permalink icon you see when hovering over a tumble log entry in the sidebar. This would normally have to be implemented in JavaScript for it to work in IE 6, but since I’m no longer supporting IE 6 with this site, I decided to stick with CSS and the :hover pseudo property.


#tumbles li { position: relative; }

#tumbles li div.date {
  background: url(../images/datebg.png) no-repeat;
  width: 64px;
  height: 50px;
  padding: 4px 0;
  font-weight: bold;
  color: #fff;
  text-align: center;
  position: absolute;
  left: -64px;
  top: 10px;
  display: none;
  line-height: 100%;
}

#tumbles li:hover .permalink, #tumbles li:hover .date {
  display: block;
}

The only thing I’m doing here is setting the date and permalink elements display property to block when someone hovers their mouse over an li element.

Thats about it

I’m still polishing things up and trying to work the kinks out, so if you notice anything fishy let me know.

Discussion

  1. Tobie Langel Tobie Langel said on April 27th

    Hi Justin,

    This new site looks great. sorry to hear about all the shit you had to go through with your previous domain name.

    Good luck solving that issue once and for all.

  2. topfunky topfunky said on April 27th

    Beautiful! Thanks for the explanation.

    I implemented Dan Webb’s code highlighter and made a rough CSS version of your Vibrant Ink TextMate theme, but I see that you’ve moved on to another color scheme.

    What I’m really can’t resist wondering is, Can I pullquote myself in the comments?

  3. Justin Palmer Justin Palmer said on April 27th

    Thanks guys. I just disabled pullquotes in comments, that was an oversight. ;-)

  4. Will Will said on April 27th

    There is nothing worse than when things get shady. I’m diggin the new setup though…and speaking of domain names, I think one of mine is about to expire. Ugh.

  5. Arpit Jacob Arpit Jacob said on April 27th

    hey new site looks good mate :D

  6. Andrew Andrew said on April 30th

    The pullquotes JS doesn’t seem to actually run. On Firefox on the PC, the pullquotes don’t get the quote characters prepended and appended. All the pullquotes are just naked words.

    Also, the moz-border-radius technique does work…but it looks like ass on the PC. The curves aren’t antialiased, so they’re really chunky looking. I’d suggest just normal bgimages for these…

  7. Dan Dan said on April 30th

    Justin,

    you may want to check how the site looks/works on IE. On a 1280×1024 resolution with IE 6, the sidebar is under the main content. See on http://zerolab.org/misc/alternateidea.png

    Other than that, the new look works very well.

  8. Justin Palmer Justin Palmer said on April 30th

    @andrew: Interesting that the pull quotes don’t work on FF Win. I’ll have to look into that. On the rounded edges, they aren’t anti-aliased on the mac either.

    @Dan: Thanks! Yeah, I said in the post that it would probably bomb in IE 6, possibly 7. I’ll do what I can to get it in shape for IE 7, but I don’t plan to IE 6ify it. The content should still be accessible though.

  9. Andry Andry said on May 3rd

    Hi Justin.

    I love the idea of integrating tumble within main blog. It is good to see our current fluffs organized in same place.

    The thing is, many of my readers complaint when I start to mix other-than-usual blog stuff in main feed. I’ve tried, once, to mix tumble and main blog on same feed. The feedbacks usually said: “this is too noisy”. And I think, I go along with my readers on this. Just take a look at noisy Kottke’s main feed and you’ll see what I mean.

    Like I said, I’m not saying putting tumblr in main blog is a bad idea. But I think, it would be wise to separate them in main feed. You’re a Mephisto God, and I’m just a humble newly Mephisto converted. Some directions about how to do this in single instance of Mephisto would be very much appreciated.

    Only my 0.2$.

    Oh by the way, I love your CSS techniques (as usual). I’d would steal some :)

  10. Justin Palmer Justin Palmer said on May 3rd

    Hey Andry, Thanks for the suggestions. As far as integrating the tumblelog, it was fairly easy.

    First I create a top level section called /tumble and then I create subsections for it url, quote, etc. You need to give these subsections paths like /tumble/url or else they won’t be children of the tubmle section.

    Next, I grab the articles for for tumble section and spit them out in my sidebar.

    
     {{ 'tumble' | section | assign_to: 'tumbles' }}
        <div class="sblock" id="tumbles">
          <ol>
            {{ 'tumble' | section | assign_to:'tumbles' }}
            {% for article in tumbles.articles | limit: 20 %}
              {% for sect in article.sections %}
               {{ 'video code quote image longquote chat url' | contains: sect.name | assign_to_global: 'is_tumble' }}
               {% if is_tumble %}
                {{ sect | assign_to_global: 'type' }}
               {% endif %}
            {% endfor %}
            {{ 'quote longquote chat url' | contains: type.name | assign_to: 'is_quote' }}
            <li class="{{type.name}}">
              <div class="date">{{ article.published_at | strftime: '<span class="mon">%b</span><span class="day">%d</span>' }}</div>
              {% if is_quote %}
                  {{article.excerpt}}
                  <a class="permalink" href="{{article.url}}">permalink</a>
              {% elsif type.name == 'code' %}
              <a class="permalink" href="{{article.url}}">permalink</a>
                <p class="attribute">{{ article | link_to_article }}</p>              
                {{article.excerpt}}
              {% elsif type.name == 'image' %}
                <a class="permalink" href="{{article.url}}">permalink</a>
                <p class="attribute">{{ article | link_to_article }}</p>              
                {{article.excerpt}}
              {% else %}
                {{article.excerpt}}
                <p class="attribute">{{ article | link_to_article }}</p>
              {% endif %}
            </li>
            {% endfor %}
          </ol>
      </div>

    The final bit of advice (assuming your on a Mac and using TextMate) is to create snippets for the tumble types. That way you just press apple+enter and you can hop into TextMate and have it write out a template for the kind of tumble you want to do.

Sorry, comments are closed for this article.