Extraneous Whitespace in Jekyll HTML

One artifact of Jekyll that has bothered me is the redundant blank lines in the rendered HTML. In my case, I was seeing hundreds of blank lines creating the page navigation at the top of the page. It doesn’t affect what the visitor sees, but for developers who use Jekyll poor source is a bad practice. Also imagine someone new to Jekyll and HTML in general trying to view source to debug an issue. Turns out the problem is with the Liquid template language Jekyll uses. Seems the Liquid community have been discussing the issue for 3 years without a solution.

My first approach to solving this was to use a Ruby gem HTML Beautifier. It works great, but for a site like mine with over 500 posts with a lot of tag pages, it increases the build time exponentially. To the point I’ve seen Travis time out due to the long process. Today I went looking for another solution and stumbled upon this gist – remove empty lines. It concerned me the plugin would increase the build time in Jekyll vs in Travis, but was pleasantly surprised it added no noticeable overhead and produces much cleaner HTML output.

Now I get quick build times and cleaner source.

Headings – What Was Old is New Again

Seems HTML WG has reversed course on a previous recommendation that allowed sections to have their own H1 tag, now recommending the previous norm of cascading H tags.

Given that this bug has been around, and not fixed in browsers, for many
years, we are proposing to remove the suggestion, and return to the model
where elements `h1..h6` have a defined level of their own.

Tables For Layout: Now Conforming

In case you’ve been lost in all of the SXSWi hullabaloo, or just neck deep in work like myself, it seems the W3C HTML Working Group has decided using role=presentation on a table element is now conforming. So it seems after 5 years of fighting this out in the trenches, per one rebuttal to the proposal:

Over the past decade or more, Web designers have been moving away from tables for layout. For a while, limitations in the market leading Web browser made this somewhat impractical for sites with complicated flexible layouts that had to be compatible with a broad range of user agents, but this is no longer the case, and new sites can avoid using tables without difficulty. Old sites won’t change, but old sites are not affected by changes to conformance criteria, since they already exist. Conformance criteria only affect actively developed sites, and those can move away from tables (and many avoid using tables at all).

The counter argument from the working group:

This assertion does not mention a specific example. By contrast the authors of the proposal to make

conforming cite gmail, facebook, yahoo mail, numerous IBM applications, and toolkits such as DOJO and YUI. As each of these are actively maintained, we find that there was insufficient evidence provided to back up this assertion.

So Facebook prevails (again)? God help us all.

h2 tag inside anchor tag

I’m confused. I set an

< h2 >

tag with an #id, and give it a background image. I want both the image and the text to be a clickable link. Thus, I want to wrap the

< h2 >

tag inside the anchor tag. Validator tells me it’s not valid HTML. I set the anchor to a class of .block, which is defined as

.block {display:block}

. Still doesn’t validate. Do you see the logic? Or, am I just making a mistake?