all repos — h3rald @ 6b243ded05a7593922d198634c681075de1c12e2

The sources of https://h3rald.com

contents/articles/h3rald-81.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
-----
title: "H3RALD.com v8.1 Released"
content-type: article
subtitle: "Featuring a a brand new newspaper-like design, powered by HTML5 and CSS3"
timestamp: 1285243465
tags: "website|webdevelopment"
-----

<section class="section">
	<p>Just <a href="/articles/take-back-your-site-with-nanoc">over a year ago</a> I released the 8th version of this
		web site. The biggest change then was abandoning the Rails-powered <a
			href="http://wiki.github.com/fdv/typo/">Typo</a> blogging platform in favor of <a
			href="http://nanoc.stoneship.org/">nanoc</a>, arguably the most versatile static site generator out there.
	</p>
	<p>A year later, I am still very happy with nanoc, hence there's no need for another major release.
		Nonetheless, I decided to improve the site's overall design and image, making it (hopefully) easier to use
		and more pleasant to the eye.</p>
	<p>I always had a problem finding the right theme for my web site. I always wanted to find something related to the
		word <em>herald</em>, so in the last release I went for a herandry-oriented theme. For this release, I decided
		to go for a newspaper-style layout: after all, the word <em>herald</em> is often used in newspaper titles, and I
		picked the name &#8220;h3rald&#8221; after the <a href="http://global.nytimes.com/?iht">International Herald
			Tribune</a>.</p>
	<p>Also, I was desperate to try out the new features offered by HTML5 and CSS3, and a newspaper layout seemed a good
		excuse to use columns.</p>
	<section class="section">
		<header>
			<h1 id="h_1" class="toc">Browser Compatibility</h1>
		</header>
		<p>Although I shouldn't really say this, the site is meant to be viewed with a WebKit-based browser,
			really. It works in other (modern) browsers (read: no IE6), and it degrades more or less gracefully if a
			particular feature is not supported.</p>
		<p>That being said:</p>
		<ul>
			<li>IE7 and IE8 just barely render it (Javascript is used to &#8220;patch&#8221; the <span
					class="caps">DOM</span> with the new HTML5 elements)</li>
			<li>Firefox 3+ renders pretty much everything right.</li>
			<li>Safari and Chrome render the site as it is actually meant to be rendered</li>
		</ul>
		<p>Nobody ever died from not being able to see CSS3 rounded corners anyhow. The most important thing about this
			site is its content, and I made sure that whatever browser you're using you can still read it.</p>

	</section>
	<section class="section">
		<header>
			<h1 id="h_2" class="toc">Columns and hyphenation</h1>
		</header>
		<p>As I previously stated, I couldn't wait to try out CSS3 columns so I kinda went crazy on the home page,
			but just there. Some may argue that they are not suitable for web use of course, but I think they contribute
			to give the site layout a unique feeling.</p>
		<p>The problem with having columns is of course text alignment: justified text looks good, but unless you
			hyphenate text properly it shows a lot of blank space. Luckily, I discovered <a
				href="http://code.google.com/p/hyphenator/">hyphenator.js</a>, which solved the problem nicely.</p>

	</section>
	<section class="section">
		<header>
			<h1 id="h_3" class="toc">CSS and layout improvements</h1>
		</header>
		<p>I made a point out of improving the old stylesheet to make the site easier to read and generally prettier.
			Beauty is in the eye of the beholder, but still, I think the new stylesheet brings some improvements,
			especially concerning text (the <a href="http://scripts.sil.org/gentium">Gentium</a> font is used throughout
			the site) and syntax highlighting.</p>
		<p>Moreover, I worked on streamlining navigations across different sections of the site, in particular on
			article pages:</p>
		<p><img src="/images/pictures/h3rald_81_article.png" /></p>

	</section>
	<section class="section">
		<header>
			<h1 id="h_4" class="toc">Under the hood</h1>
		</header>
		<p>Besides appearence, the new site also features some improvements in its underlying business logic. In
			particular:</p>
		<ul>
			<li>Better nanoc <a href="http://github.com/h3rald/h3rald/blob/master/Rules">Rules</a></li>
			<li>Improved <a href="/glyph/">Glyph</a> integration, by extending nanoc <a
					href="http://github.com/h3rald/h3rald/blob/master/lib/glyph_context.rb">RuleContext</a></li>
			<li>Minor updates to the custom <a href="http://github.com/h3rald/h3rald/blob/master/tasks/site.rake">Rake
					tasks</a></li>
			<li><a href="http://disqus.com/overview/">Disqus</a> comments</li>
		</ul>

	</section>

</section>