5 ms·

Show HN: Generate perfect semantic HTML

28 points by begriffs 13y ago

prezjordan 13y ago
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 13y ago
  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/
  - kaoD 13y ago
    Does not work either. Blank everything.
  - binarycrusader 13y ago
    I have Ghostery installed and noticed the playground doesn't work unless I pause it temporarily. (Chrome 27)
    - sigmavirus24 13y ago
      Ghostery is definitely the issue.
    - yareally 13y ago
      Blocking Google Analytics seems to be the issue, just looking through what was/wasn't loading.
- UVB-76 13y ago
  AdBlock Plus appears to be blocking all the demos on Chrome 27
_sabe_ 13y ago
"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...
- sigmavirus24 13y ago
  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.
- szabba 13y ago
  That sarcasm feels unnecessary.
davesmylie 13y ago
The page seems very . . . static? Is it meant to be demoing something?
- sigmavirus24 13y ago
  Pretty sure that's what: http://begriffs.github.io/showpiece/playground/ http://begriffs.github.io/showpiece/playground/ is for :)
  - thepumpkin1979 13y ago
    Now it makes sense. Where is this demo page linking to the playground?
    - sigmavirus24 13y ago
      Good question...
halisaurus 13y ago
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 13y ago
  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 13y ago
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 13y ago
  Good catch. I'll update the template. I should really run the outputs through an HTML validator as part of continuous integration...
rjd 13y ago
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 13y ago
Sorry I may be confused as to what this is? Is it just for creating semantic menu systems?

28 points by begriffs 13y ago

prezjordan 13y ago

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 13y ago
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/
- kaoD 13y ago
  Does not work either. Blank everything.
- binarycrusader 13y ago
  I have Ghostery installed and noticed the playground doesn't work unless I pause it temporarily. (Chrome 27)
  - sigmavirus24 13y ago
    Ghostery is definitely the issue.
  - yareally 13y ago
    Blocking Google Analytics seems to be the issue, just looking through what was/wasn't loading.
UVB-76 13y ago
AdBlock Plus appears to be blocking all the demos on Chrome 27

_sabe_ 13y ago

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

sigmavirus24 13y ago
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.
szabba 13y ago
That sarcasm feels unnecessary.

davesmylie 13y ago

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

sigmavirus24 13y ago
Pretty sure that's what: http://begriffs.github.io/showpiece/playground/ http://begriffs.github.io/showpiece/playground/ is for :)
- thepumpkin1979 13y ago
  Now it makes sense. Where is this demo page linking to the playground?
  - sigmavirus24 13y ago
    Good question...

halisaurus 13y ago

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 13y ago
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 13y ago

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 13y ago
Good catch. I'll update the template. I should really run the outputs through an HTML validator as part of continuous integration...

rjd 13y ago

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 13y ago

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