

Show HN: Generate perfect semantic HTML - begriffs
http://begriffs.github.io/showpiece/

======
prezjordan
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

~~~
begriffs
Thanks for reporting. What does the error say?

Alternately you can try the "playground:"
[http://begriffs.github.io/showpiece/playground/](http://begriffs.github.io/showpiece/playground/)

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

~~~
sigmavirus24
Ghostery is definitely the issue.

------
halisaurus
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?

~~~
begriffs
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?

------
soundandfeury
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.

~~~
begriffs
Good catch. I'll update the template.

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

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

~~~
sigmavirus24
Pretty sure that's what:
[http://begriffs.github.io/showpiece/playground/](http://begriffs.github.io/showpiece/playground/)
is for :)

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

~~~
sigmavirus24
Good question...

------
rjd
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?

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

------
_sabe_
"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...

~~~
szabba
That sarcasm feels unnecessary.

