Deconstructing Blogger Beta's HTML

Scott Wilkinson writes, "Google's Blogger is going through a major revamp, called Blogger Beta, with lots of nifty new graphical layout features and pesky bugs to annoy the users. Yesterday they finally opened up the HTML code behind the Beta, and it's a significant departure from the traditional Blogger. This post at Banana Stew deconstructs the Blogger Beta code and points out some nice new features like if-then, loops, and object-oriented structures."

Concentrate on their own site...

[LiquidCoooled]

...before they rip apart others.

The table and layout they are using makes the right hand side menu completely overlap the actual table and content (on my system at least - std firefox 1.5 on xp).

Stupid stupid stupid.

Re:

[phulegart]

then fix it and send it back to google.

Re:

[keitosama]

He was talking about TFA, not Blogger.

Re:

[turbodog42]

You're absolutely right. I couldn't read the tiny font size they chose and increasing text size in FF just mushes those narrow columns into incomprehensibility.

Re:

[BananaStewGuy]

Guys, it's just a sandbox for playing around. Get your panties out of their wadness.

However, I will agree that this particular post wasn't very well suited to the current incaranation of the blog format. It's a Blogger Blog - and a small side project - so there's not a lot of room to play with.

If you are actually interested in the content (as opposed to just interested in being snarky), there's a plain-jane version now up at http://www.wilkinsons.com/Bananna/BetaCodeLargeTyp e.htm [wilkinsons.com].

I plan to move the p

Re:

[LiquidCoooled]

Thanks for posting the cleaned up version, now I can read it and now it makes for a very interesting breakdown.
The original version as just a mishmash and I couldnt see anything, so to answer your final remark no I wasn't.
As for ripping apart thats technically what you were doing, ripping the entire template apart.

If-Then-Else

[colonslashslash]

Whoa.... if-then-else loops!? Truely, a marvellous new feature from Google that will revolutionise the intertubes. What an awesome age of technological advancement we live in!

Re:

[bananaguyc]

If-then-else loops in HTML code, no less!!! L33t!!!!

Re:

[smittyoneeach]

With a GOTO, would it not be Turing Complete?

From there, it's a tiny stretch to Emacs.

Soon, the Emacs psychologist will blog-tastically analyze itself!

Will it come out metro-sexual swinging, or come out neo-con swinging?

Stay tuned.

Re:

[CastrTroy]

Does this remind anybody else of ColdFusion? (the language) [wikipedia.org]

Re:

[SuperRob]

I'm a ColdFusion dev from way back, and it only reminds me of ColdFusion in that they are doing a couple of things similarly. Similar in that it would be the most logical, intuitive way to accomplish the task. Other than that, it's nothing like ColdFusion.

Re:If-Then-Else

[SuperBanana]

Whoa.... if-then-else loops!? Truely, a marvellous new feature from Google that will revolutionise the intertubes

I beg to differ; it's perfect for the blogging crowd.

IF $mood == "angsty" THEN display(AngryKittenGIF), SetBackground(Black)

Re:If-Then-Else

[xENoLocO]

Why bother to run a conditional against a public static final?

Re:

[AngusL]

Of course, any decent compiler would optimise that away to a NOP. ;)

Re:

[Americano]

The problem is, the blogging crowd doesn't NEED "if-then-else" loops:

$site_name = "Black Icicles In My Heart";
$mood = "angsty";

SetBackground(BlackWithSilverRosesAndLightning);
display(AngryKittenJPG);
display(SunnyDayRealEstateJPG);
display(JimmyEatWorldJPG);
display(DeathCabForCutieJPG);
printBlog("Sigh. My parents just don't understand me, and how hard it is to be young today! Sometimes I think only MTV gets me.");

See, there's not a SINGLE conditional everywhere... they're unconditiona

Re:

[araemo]

You had me going until you mentioned MTV.

I don't think MTV "Gets" anyone, let alone people who watch TV. ;)

Re:

[Andrew Kismet]

:s/MTV/MTV2/g

Re:

[Americano]

Sorry, my emo-coding skills are rusty... I should have included a YouTube link to my favorite emo video, and just left it at "My parents just don't understand me."

My Eyes!!!

[Anonymous Coward]

The page layout made that article was completely unreadable. I was about to turn off CSS when I realized that the article is basically a huge table of non-tabular information. What a waste of time.

Re:

[Aladrin]

Well, except that it isn't an article, it's a blog entry, and that they weren't intending for it to be generalized info for the masses, yeah. It's unreadable.

But given that it's just an attempt to describe the new layout of a blog entry, and that the 'non-tabular' info you hate so much IS the entire article, I'd say it's fine.

The reason it's in a table is to keep information together. He could have attempted to CSS it, and make it nearly impossible to line up correctly in every browser, but instead used t

Re:

[Tremor (APi)]

That's not "how tables are meant to be used". They're meant to be used for tabular data. Hence the name. Personally, I put text documents in a word processor, not in a spreadsheet, because the word processor has all the functionality I need to properly format and style my documents. Same exact concept.

I've never had problems getting pure-CSS documents to align properly in IE and FireFox, which make up the vast majority of internet users. I use tables for displaying rows and columns of tabular data. I use di

Re:

[Khuffie]

CSS is all good and well, and I do my best to make my designs fully CSS, but at times, it's just far, far easier to use a table than to spend hours putting in hackneyed CSS code that won't be 'valid' in the end just to get a simple thing done.

Re:

[BananaStewGuy]

The table was a nice, fast way to keep things aligned as I was going through the template. Pick a snippet, paste it in a cell, write pithy little comments on the other side so that I can remember what that snippet was doing. Repeat until eyes blur.

Remember, this was done for my benefit and posted only in the thought that others might find it useful.

Here's a larger version, pre-enlarged for geriatric eyes. Enjoy at your leisure. [wilkinsons.com]

PS Much love to the gracious anonymous defenders.

Deconstructing?

[uncl_bob]

Be sure to call Jacques Derrida about this first!!

Hrm.

[TubeSteak]

I'm not impressed with this Banana Stew character.

"I'm not personally familiar with <dl>, <dt>, and <dd>, but I'm guessing that those are standard html tags."

Even though it's been part of /.'s allowed html, I never bothered to look it up till now. About 5 seconds of searching showed me what the tags are about.

DL = Definition lists
DT = Definition term
DD = Definition description

It's just a quick way of creating lists without the bullet points.

Re:

[Anonymous Coward]

Thats incorrect, the visual rendering of a definition lists depends on the UA. While generally the definition is indented and the term is bold this is not a requirement as per the specification. http://www.w3.org/TR/html4/struct/lists.html [w3.org]

Yes, definition lists don't have bullets, but there's a greater difference you're missing. A UL has no order, it doesn't matter what order the items are read in, they mean the same thing. An OL is the oposite, the order matters. A DL is very different from both of them, it

Re:

[BananaStewGuy]

Alas, I have not impressed you. My life and wellbeing are for naught. Goodbye cruel world.

Or maybe not.

In any case, thanks for doing the lookups for me. I'll be sure to plagiarize your conclusions in a later update to the post.

Not really too interesting if you RTA

[x3nos]

1. Beta has been out for awhile . . . missed the scoop - too little too late IMO
2. How pointless is it to comment on commented code?
3. Author of TA didnt really get into a lot of the features like Labels, modifiable templates from an AJAX control, blah blah
4. For once I actually did RTA and I think Ill go back to just making flippant comments about comments

Now about Beta - my big gripe is the continued lack of xhtml compliance on the part of the blogger developers. I go through the extra 5% effort it takes to ensure my code validates. It makes things easier on the end user, and its just good best practices. Despite several years of complaints by bloggers, they [Google] have yet to enforce compliance with their blogger product.

Re:

[mizhi]

You see this with a lot of content management systems. I usually spend the first 30-45 minutes on a new layout by making it xhtml strict. One of the advantages of good CMS is the ability to edit the templates so that you can make this happen; the difference tends to be in the degree of ease. With Movabletype, it's a snap to get the page to validate. With something like PHPBB, it's pure agony. That's my opinion, so YMMV.

I wish developers would take the extra effort to make sure their code is correct and

Re:Not really too interesting if you RTA

[nursegirl]

What particularly drivs me batty is that they just hired Douglas Bowman [stopdesign.com] as Visual Design Lead in May. He's been at the head of the XHTML/CSS progression/revolution for years, including the Wired News [wired.com] redesign in 2002.

I understand that it takes some time to get settled into a new workforce, so Bowman might not have had the time to get around to working on Blogger that much yet. According to his blog, he appears to have spent the first half of this year working as a contractor on Google Calendar. I just wonder, why wouldn't the Blogger team have waited until their Design guy/standards-compliance guru was free before rolling out this beta?

Feeds need more work

[Henry V .009]

They still haven't gotten the site-wide comment feed working yet. You can turn it on in the Blogger controls, but no link for it is provided anywhere. You have to guess the url from the post feed and the individual post comment feed.

Even after that, I found that it only lists the first 25 comments ever made to my blog. This makes a recent comments sidebar hard.

Whether this will ever get fixed, I don't know. Google uses "beta" to mean "released" for all their software and the practice sucks. I have the feeling that a lot of their free "beta" software will one day become non-free, and they will only at that point "release" it.

When Google comes out of Beta

[ribuck]

I have the feeling that a lot of their free "beta" software will one day become non-free, and they will only at that point "release" it.

You may have something there. The Google Answers service came out of Beta on the same day that it started running ads. Coincidence?

Gotta keep up with the Jones'

[dilweed]

In this case, that would be MySpace Jones.

But..

[wwiiol_toofless]

Does it run myspace?

No

[WebHostingGuy]

Google doesn't own it . . . yet.

Blogger Tags

[klenwell]

Is this the end then of Blogger's proprietary <$TAG$> markup? And just when I started getting the hang of it.

First they deprecate <font>. Now this. What's next? Myspace formatting its profile pages with no more than three layers of nested tables?

One problem...

[Andrew Nagy]

The new blogger beta doesn't allow you to host the blog on your own site anymore.... [blogger.com]

Re:

[SuperRob]

That's untrue. Blogger will still allow FTP posting to off-site servers, but many of the new features will not work as a result. Google stated that they were committed to continuing FTP posting

Re:

[Andrew Nagy]

No, what I said was not untrue. What I said was that the beta blogger will not allow FTP posting... as in, you can keep regular blogger, but if you want to upgrade to beta, you can't host off-site. It's all right there in the link I provided... which is why I provided it.

View Source

[Nom du Keyboard]

Opened up the HTML code behind it? Just how hard is it to View Source?

Amazing!

[Peganthyrus]

Blogger has a templating language now! How terribly newsworthy.

It's not like any blog system before this ever had conditionals!

Bonus points to the article for putting a table in monospaced Flyspeck 3 and having it in the middle of a design that completely breaks when you bump up the text size.

Deconstructing Blogger Beta's _Template Language_

[adnonsense]

Reading the Slashdot summary it sounds like Blogger has introduced a new sort of HTML. One with if-then, loops, and object-oriented structures. Ferchrissake, when people tell me they can "program in HTML" I ask them to write a for-loop for me... it's Blogger's new template language TFA's talking about here.

... and hopfully ...

[John Bokma]

They stopped eval and document.location JavaScript abuse. Or is that just limited to Blogspot? See: http://johnbokma.com/mexit/2006/07/13/ [johnbokma.com]

it is

[rice_burners_suck]

The aforementioned HTML is somewhat well written, I have to admit.

In other words, ColdFusion

[Tablizer]

and points out some nice new features like if-then, loops, and object-oriented structures.

Coldfusion has those in their XML/HTML extensions. (Well, except for full OOP, which some of us feel is not well-suited for web stuff and biz apps anyhow.) One can develop their own tags in ColdFusion, although I find that old-fashioned functions are usually easier to set up and manage.