Flat HTML(github.com)

65 pointsby samsquire6 anni fa44 comments

https://github.com/samsquire/flat-html

47 comments

What has the world come to if this mess is considered easier than writing some nested html tags? (Perhaps I'm not plugged into the SPA scene well enough to appreciate this project. I hope it is useful to some.) In fact, reading the examples made me check to see if the first commit to this project was today, April Fools...

bscphil6 anni fa

The link was shared here by someone with the same username as the github repo owner - presumably it was a pre-planned April Fools day joke for Hacker News.

mdturnerphys6 anni fa

It looks like the owner has shared it three times in the last 2 weeks, which suggests it isn't a joke.

m4636 anni fa

Come on, this is cutting edge stuff.

Personally I've been considering an alternative representation of python using YAML.

for example this python:

  if a == 3:
    b = y * 3
  else:
    b = x + 4

could be represented in YAML python as:

  if a == 3:
    b = y * 3
  else:
    b = x + 4

Stratoscope6 anni fa

That is amazing!

I hope you can share the toolchain that lets you convert from one to the other so seamlessly?

m4636 anni fa

     I will as soon as the indentation technology has been worked out, and the API stabilized and a documentation framework has been completed, targeting 4/1/21.

laumars6 anni fa

4th of Jan?

;)

panic6 anni fa

One advantage is security. The text after the equals sign in each string can't be misinterpreted as HTML syntax, so it's safe to build flat HTML using string concatenation.

ludami6 anni fa

I really hope it's a joke. I mean it's not even flat. It's just the nesting is represented in a different less intuitive way.

mebr6 anni fa

The reason behind the design is not mentioned. Why would one take this seriously?

zuckluni6 anni fa

Replugging bepis, another way to write 'flat' HTML using operators with a slightly different operator set: https://github.com/dosyago/bepis

For me I just wanted to stop writing all the extra syntax (like `< > =` and closing tags) and use symbols my fingers were already reaching for. Just about conciseness, efficiency and enjoyment.

I really like the operator choice in this project!

hn_throwaway_996 anni fa

Bravo, this is exactly what April Fools' jokes should be. Right on the line where you can think "Well, someone really could be crazy enough to propose this seriously!", where it's close enough that many of the replies here I can't even figure out if they are serious or joking.

yjftsjthsd-h6 anni fa

I personally prefer the ones that are obviously jokes, but then you look at it for a second and think, "wait, that could actually work..."

Spivak6 anni fa

I think the idea is a little rough around the edges but it has good bones. I think a better name might be something like "procedural HTML" since I think you're envisioning something like

    add paragraph "content"
    push division
    add image
    add attr src "https://..."
    add attr alt "cute cat"
    add paragraph "more content"
    pop division
    ...

But obviously with much terser syntax. Everyone seems to be on the declarative train these days that it's nice to see some interesting procedural work.

Such a thing composes pretty nicely too since basically any sequence of statements grouped together can be used as a component.

Lazare6 anni fa

Congratulations on re-inventing Emmet (and a bunch of other tools) very badly, I guess? :)

For anyone interested, the equivalent of the first example in Emmet is:

    div>h1{My Post}+ul>li{I am list item $}*3^ul>li{I am a different list item $}*2

It's a lot terser, but since it uses a CSS-like syntax, it's slightly less bizarre than at first glance and not that hard to pick up. Fun tool, more powerful than it looks, and supported by a ton of editors (I believe it's enabled by default in Jetbrains IDEs, for example...).

https://emmet.io/

keithnz6 anni fa

Congratulations to yourself as the author reached his target audience and I'm sure the author is happy with your response :D

soneca6 anni fa

I don't think this is a joke, but an attempt of innovation. I think it is just rude to assume it is or make fun as it was.

Years ago I made an attempt to reinvent forums, with comments ordered horizontally instead vertically. It was very interesting to think about, but the end result had a lot of issues. I wouldn't appreciate people just making fun of it.

Some attempts to innovate might generate weird results, but there is no gain to society in pointing and laughing at the weird results. Thoughtful comments on why it's bad in anyone's point of view are much more helpful.

Different people have different perceptions of what is cleaner, or easier, or simpler. It is healthy to have this in mind while criticizing different approaches to a problem.

jmiskovic6 anni fa

Completely agree with you. I'm at least always interested in alternative ways of representing and manipulating a tree structure, so it was a nice find even though I'm never going to use it.

It's fascinating how these projects are intriguing enough to reach HN front page with positive votes, but then get bashed in by masses. Reading all the comments here leaves me with bad taste in mouth.

samsquire6 anni fa

Thank you for your kind words.

Yes, it's my attempt at innovating. I hate updating nested HTML templates.

axegon_6 anni fa

What's with everyone's obsession with treating html like assembly: "Only people with long white hair and beards, magic wands and capes know html... Like... Like Gandalf, bruh!"

General question, it's been my main criticism towards all the modern js "frameworks" like react, vue and whatnot. Seriously, what gives?

EamonnMR6 anni fa

This is the best April fool's joke this year, bravo

movedx6 anni fa

> this year

As opposed to the jokes being told all those other April 1st we're going to have this year? :P

AlbertoGP6 anni fa

I think that meant not the set of all April 1st days, but the set of all April 1st jokes this year.

kamikaz1k6 anni fa

Why go through the effort of embedding it in JSON? Why not just send plain text back and forth? If the goal is minimal markup anyway...

That being said, it reminded me of HAML[1] - but that uses whitespace to determine nesting.

[1] http://haml.info/

screamingninja6 anni fa

Or this-

https://github.com/pugjs/pug/blob/master/README.md#syntax

techntoke6 anni fa

I think markup languages need improvement, but as soon as I saw the syntax in JSON and how it was formatted it was an automatic turnoff.

Have you though instead about just developing a new markup language that has advanced HTML features?

quickthrower26 anni fa

Beats JSX. Why have a render() method with all that complicated JSX. Just store this stuff in state. This could be the next hooks. You could add callbacks to this structure too.

    "data": [
        "-h1 =My post",
        "^ul li = I am list item 1",
        "ul li = I am list item 2",
        "ul li = I am list item 3",
        "-ul li = I am a different list item 1",
        { xpathish: "ul li = I am a different list item 2", doer: function() {alert();} }
 ]

masswerk6 anni fa

This is great – however, there's space for improvement, namely, flattening the JSON. Readability may also benefit from the addition of a few backslashes added by this procedure. A further step of x-www-form-url encoding or base64 encoding (maybe even as a data-URL?) may also add another as pleasing as satisfying step to you tool chain!

masswerk6 anni fa

Personally, I'd prefer a more explicit declaration, which is also legitimate CSS, as in:

  html > body > h1 { content: "Example"; }
  html > body > h1 + p { content: "First Paragraph"; }
  html > body > h1 + p + p ( content: "Second Paragraph"; }
  html > body > h1 + p + p + ul > li:first-child { content: "A List Item"; }
  (etc)

Mind how missing content or copy text, like the second paragraph being omitted, may be easily detected!

tpae6 anni fa

https://github.com/pugjs/pug

cfv6 anni fa

I don't think I get the point? It's even more convoluted than haml, which is already pretty well established, and the syntax is subtly different enough that I can see myself tripping repeatedly while trying to write this.

Is this an exercise? Is there an actual project somewhere doing it?

itronitron6 anni fa

"First they ignore you, then they laugh at you, then they fight you, then you win."

samsquire6 anni fa

Thank you. I think.

[deleted]6 anni fa

keyle6 anni fa

Bahah that was fun. Also someone should totally make a brainfuck html generator.

All tags could be in alphabetical order and you cycle through them in brainfuck. Pop in class names and id's and you're onto a winner!

greencore6 anni fa

I think author haven't seen Slim or Pug templating languages

baybal26 anni fa

I think the author needs to lookup what xslt is

yashap6 anni fa

April fools?

DeathArrow6 anni fa

Is this a joke?

cookingoils6 anni fa

you could also just write html

https://html.energy

ltbarcly36 anni fa

wow, this looks horrific.