
Show HN: Markdown-UI – Write UI/UX with Markdown Syntax - jjuliano
http://jjuliano.github.io/markdown-ui/
======
florianletsch
I don't know what to make of this. I like the general idea but I really don't
like the use of Markdown here.

Markdown makes writing markup faster and reading markup easier. It's a limited
set of syntax elements optimised for writing and reading text. No more, no
less. It is not, however, a new set of language elements to be used for
whatever purpose.

For example, how is this:

    
    
      __Basic Button|Icon：User,Text：Add Friend__ 
    

Any better than this?

    
    
      <button icon="user" text="Add Friend">
    

Even YAML seems to be much better suited for structured data like this.

    
    
      button
          icon: text
          text: Add Friend
    

If your aim really is to "lessen the cognitive load", why not work with tools
that better work towards that goal?

~~~
jdkanani
At the end of the first draft, this YAML convention will become Jade.

~~~
btreecat
I think I would actually like that.

------
prezjordan
Please don't ever make buttons with <div>s! [0]

Focusable should be the default, as many folks can't (or don't want to) use a
mouse. Use the semantic <button> tag or even just an <a> with role="button"
and you'll get accessibility for free.

[0]: [http://thatjdanisso.cool/a11y/clicking-with-a-
keyboard/](http://thatjdanisso.cool/a11y/clicking-with-a-keyboard/)

~~~
jjuliano
Hmm, thanks noted, let me research on using the <button> semantic vs. <div>
more.

------
erikb
I like the idea of using something like Markdown to write GUI descriptions.
But I don't think pressing a meta-language into Markdown is the way to go.
Better use the same principles and create your own language. The principles
are: text is formatted nearly the same way a plain text email would have been
formatted, overview of the grammar is more important than complexity.

Don't be disappointed though if the result is not better than the solutions
using XML, JSON or YAML that already exist.

Maybe something like funciton would add a new perspective to it:
[http://esolangs.org/wiki/Funciton](http://esolangs.org/wiki/Funciton)

~~~
technomalogical
This is exactly what PIC is for images:
[https://en.wikipedia.org/wiki/Pic_language](https://en.wikipedia.org/wiki/Pic_language)

~~~
erikb
I really like
[https://en.wikipedia.org/wiki/DOT_%28graph_description_langu...](https://en.wikipedia.org/wiki/DOT_%28graph_description_language%29)
for diagrams.

------
RubyPinch
Why not just inline html? doesn't conflict with pre-existing markdown
specifications, more usable for breaking out of document flow (if one is
making a proper form, this helps a lot)

> Focusable Button

why not just have all of them be focus-able? I mean, unless you have a strong
dislike of people who don't use mice, this shouldn't be an option

~~~
nmcfarl
My guess as to the reason for not using inline html, is that according to the
markdown spec, block-level elements can’t have markdown inside of them. So his
DIV buttons couldn’t have markdown formatting inside them otherwise.

------
bradgessler
I built something similar called Formdown:
[https://github.com/bradgessler/formdown](https://github.com/bradgessler/formdown)

If you're wondering why something like this would be useful, it's great for
prototyping interactive web pages of UIs. A non-technical person can easily
write out their ideas and a more technical person can covert the markdown into
real form markup.

------
fiatjaf
Anyone interested in this should also look at

* Marx, the CSS framework without classes: [https://github.com/mblode/marx](https://github.com/mblode/marx)

* Classless, the HTML5 framework and themes for CMS-like templates: [http://fiatjaf.alhur.es/classless/](http://fiatjaf.alhur.es/classless/)

------
aries1980
What is the different goal here compared to Salt?
[http://plantuml.sourceforge.net/salt.html](http://plantuml.sourceforge.net/salt.html)

------
nudpiedo
It's a good beginning even if there are already some good alternatives out
there as well.

Wishing to see how you solve the problems of layouts and nested layouts
(including transitions in between). I really hope you can simplify the current
state of the art, because, at least for me personally UI programming is a pain
(too many options and abstractions I do not know).

~~~
jjuliano
For some of us technical programmers it's hard to come up with a website or
UIs than doing backend work.

------
sneak
That's not what User Experience means.

------
raphael_l
Maybe I'm not getting something quite right, but why is there a "UX" in the
title?

------
Animats
I don't get the fascination with "markdown". Even for messaging systems,
BBcode ([i]like this[/i]) was easier. Markdown is always fighting with
indentation for other purposes.

------
Ciantic
I don't think this should use the name of "Markdown" in the name, this is a
niche feature this just waters down the meaning of "Markdown".

------
talles
I'm not willing to learn a new set of markup just to not write some HTML (I'm
glad that Markdown plays nice with it).

~~~
aaronem
Seriously! Every editor in the world by now has an Emmet plugin (possibly
still called "zencoding" if it hasn't been updated in a while), and I'd rather
write an easy-to-learn superset of CSS selector syntax, then generate
conformant HTML from it right there in my editor, any day of the week.

------
waynenilsen
link to repo [https://github.com/jjuliano/markdown-
ui](https://github.com/jjuliano/markdown-ui)

~~~
jjuliano
The demo site itself is written in markdown, I'll fix this thanks.

