8 ms·
Show HN: Markdown-UI – Write UI/UX with Markdown Syntax
- RubyPinch 11y agoWhy 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 11y agoMy 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.
- erikb 11y agoI 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 11y agoThis is exactly what PIC is for images: https://en.wikipedia.org/wiki/Pic_language https://en.wikipedia.org/wiki/Pic_language
- erikb 11y agoI really like https://en.wikipedia.org/wiki/DOT_%28graph_description_language%29 https://en.wikipedia.org/wiki/DOT_%28graph_description_langu... for diagrams.
- waynenilsen 11y agolink to repo https://github.com/jjuliano/markdown-ui https://github.com/jjuliano/markdown-ui
- jjuliano 11y agoThe demo site itself is written in markdown, I'll fix this thanks.
- prezjordan 11y agoPlease 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 11y agoHmm, thanks noted, let me research on using the <button> semantic vs. <div> more.
- raphael_l 11y agoMaybe I'm not getting something quite right, but why is there a "UX" in the title?
- florianletsch 11y agoI 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 11y agoAt the end of the first draft, this YAML convention will become Jade.
- btreecat 11y agoI think I would actually like that.
- jjuliano 11y agoI like both representations, the HTML inline and the YAML is easy to read too. I think this is a niche for people who just want to use a whiteboard and draw their UI in front of people, and the non-technical audience will get it instantly. The goal is make is very easy for non-technical to create UIs, even just writing it in board or paper.
- fiatjaf 11y agoAnyone 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/
- nudpiedo 11y agoIt'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 11y agoFor some of us technical programmers it's hard to come up with a website or UIs than doing backend work.
- aries1980 11y agoWhat is the different goal here compared to Salt? http://plantuml.sourceforge.net/salt.html http://plantuml.sourceforge.net/salt.html
- talles 11y agoI'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 11y agoSeriously! 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.
- sneak 11y agoThat's not what User Experience means.
- bradgessler 11y agoI 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.
- Ciantic 11y agoI 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".
- Animats 11y agoI 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.