Show HN: Generate perfect semantic HTML | Hacker News Reader

Show HN: Generate perfect semantic HTML

begriffs.github.io

28 pointsbegriffs20 comments

Open articleView on HN

Just a heads up, I'm getting a require.js error and can't see any demos.

Mac OS X 10.8 - Chrome 27.0.1453.116

Thanks for reporting. What does the error say?

Alternately you can try the "playground:" http://begriffs.github.io/showpiece/playground/

I have Ghostery installed and noticed the playground doesn't work unless I pause it temporarily. (Chrome 27)

Ghostery is definitely the issue.

Blocking Google Analytics seems to be the issue, just looking through what was/wasn't loading.

Does not work either. Blank everything.

AdBlock Plus appears to be blocking all the demos on Chrome 27

Does writing a nested list in json cut down on the work much? I feel like a ul block is a small "repeater" (a bunch of li following the same pattern) and using this is a "6-of-1, half dozen of the other" scenario.

The concept sounds more useful for a table scenario, especially considering the table might be populated by json to begin with. It would make the HTML work easier and provide a easy connection between whatever feed I'm using and the parsed & rendered table.

If you (or anyone else) is building out new "blocks" that work with this project, I'd prefer to use it for parts of a site/page I'm likely to pull from a live/updated/for_each type section of code.

*ninja edit: How do you do inline code?

The original goal of the project was to examine elements of web sites and find a single style of markup that would be flexible enough to be styled like any of them. I started with menus because they vary so much.

While adjusting the markup to fit examples, I found it was easier to translate it from an intermediate description. Small changes in the JSON domain specific language can cause bulky changes in the markup. If you add a "description" attribute to a menu item it transforms into a definition list. If you remove the "url" attribute it erases the anchor and replaces it with raw text.

While the translation has proved to be useful, I think it's not as important as simply identifying a markup standard for menus and other page elements. If developers can stick to such a standard their job gets easier because it will be easy to reuse CSS.

It's kind of like an anti-twitter-bootstrap because the meaning and flexibility of the markup is treated as most important, and styles can be applied à la carte.

You make a good point that pages are often built from repeated server-side partials, and that the looped block needs most attention. I'm curious about the table scenario. Can you send me a link to a table which is populated by JSON?

in the "Groups" example, there is an <li/> nested inside an <li/> with no list element in between. is this valid markup?

  <ul class="main">
    <li class="main">
      <details>
        <summary>File</summary>
        <div class="options">
          <fieldset>
            <li class="sub"><a href="/open">Open</a></li>
          </fieldset>
        </div>
      </details>
    </li>
  </ul>

i would think that an <li/> must be the direct child of an ol, ul, or menu.

Good catch. I'll update the template.

I should really run the outputs through an HTML validator as part of continuous integration...

The page seems very . . . static? Is it meant to be demoing something?

Pretty sure that's what: http://begriffs.github.io/showpiece/playground/ is for :)

Now it makes sense. Where is this demo page linking to the playground?

Good question...

The use of details/summary as a hierarchy device doesn't strike me as very semantic. Anyone got an explanation which would fit it being so?

Sorry I may be confused as to what this is? Is it just for creating semantic menu systems?

"Suppose you want to add a main menu. It's not always an easy task."

Tying your shoes are not always an easy task, let's spend 2 years building a shoe tying machine! In a hundred lifetimes well saved in the time it took building the machine on tying shoelaces. I bet it's well worth it!

Edit: "You need simple semantic markup that gives you room to grow."

As far as I can tell your script only generates a list. If it's semantic or not depends entirely on the context...

That sarcasm feels unnecessary.

And all engineering software is useless because it allows you to plan out your design ahead of time. I'm glad I know that now. Thanks for your insightful hyperbole.

Reply on news.ycombinator.com