3 ms·

I don't understand why people don't base their apps and frameworks off of standard browser and JS supported techniques like custom elements and template literal

I don't understand why people don't base their apps and frameworks off of standard browser and JS supported techniques like custom elements and template literals with tag functions like Lit. Is this fragmentation really still serving a purpose or just legacy support for choices like JSX that were made in the past when these standards weren't available yet?

Existenceblinks 4y ago
component: custom element wrapped in init(name, store, listOfUpdateFnPair) view: uhtml or lit-html (don't use lit-element) action: DOM event delegation for intercepting anything happens on view model: a global store passed to when custom element is defined. update: list of [selector, f({model, view}] pairs passed to when custom element is defined. --- Congratulation we now have a self-contained Elm architecture.
akira2501 4y ago
I feel like an entire generation of programmers got cheated and didn't have to write desktop applications to get "their software" used in any real world context. As a result, they don't really understand what's possible, and the simple ways you can go about it... particularly, as you've flagged, with all the modern tools available in "standard browsers" now. The way I see people using flexbox makes me cringe a little, too.
- frosted-flakes 4y ago
  Can you elaborate on that flexbox comment? What don't you like about flexbox?
  - akira2501 4y ago
    I love absolutely love flexbox. This is super opinionated and based on the types of software I'm typically exposed to. I think most people just don't understand how to get the most out of it in terms of creating user interfaces, and use "table" oriented thinking like percentage widths and media size queries to control overall layout. I think you should use it the way that something like QT's BoxLayout and GridLayout containers work. Strictly using flex-grow and min-width, max-width and justify-content to control layout. I can design just about any interface with just these CSS classes, with very occasional use of the three properties above: .VBox { display: flex; flex-flow: column nowrap; } .HBox { display: flex; flex-flow: row nowrap; } .VGrid { display: flex; flex-flow: column wrap; align-items: flex-start; } .HGrid { display: flex; flex-flow: row wrap; align-items: flex-start; } .Grow { flex-grow: 2; }
    - dmitriid 4y ago
      There's a project called Sciter that uses a sub/superset of CSS and HTML to create native apps. They have their own flow styling for this, and boy is it nicer than flexbox: https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.... More details here: https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/ https://terrainformatica.com/2018/12/11/10-years-of-flexboxi... I know the author pitched this as an idea to w3c a while back, but I don't know why it was rejected in favor of flexbox.
      - akira2501 4y ago
        What I like about my style, is that the document structure enforces the layout structure. The two are much more closely bound, and with this style, you can perform arbitrary levels of subdivisions of your containers. Working off your last link, the final "holy grail" example, with less style but the same exact layout: https://jsfiddle.net/Lpedja35/ https://jsfiddle.net/Lpedja35/ You don't have to have a matrix with an artificial rank to represent this. I only need to specify the 1 and 4 rows once. I don't have to make a square and then decide how to divide it, which, is the "table thinking" I mentioned earlier. I just observe which elements need Grow and then design from the inside out.
dmitriid 4y ago
> I don't understand why people don't base their apps and frameworks off of standard browser and JS supported techniques like custom elements Because 12 years after their idea was pitched Custom Elements still suck? Just a tiny list of problems with them, with big consequences: https://twitter.com/Rich_Harris/status/1198332398561353728 https://twitter.com/Rich_Harris/status/1198332398561353728 > and template literals with tag functions like Lit The whole field of programming has taught us not to use string-based programming and not to rely on regexps for parsing said string based programming to arrive at results. Also. Why are you against JSX and React, but at the same time happy with such "standard" things from Lit like magical reactive properties and bullshit like ".value=" and "?hidden=" and "@click=" none of which are standard browser techniques. > for choices like JSX that were made in the past when these standards weren't available yet What standards? Very few frameworks want to touch custom components with a ten-foot stick. Yes, most can target them, but very few have the as the underlying abstraction because they are just horrendously bad.

Existenceblinks 4y ago

component: custom element wrapped in init(name, store, listOfUpdateFnPair) view: uhtml or lit-html (don't use lit-element) action: DOM event delegation for intercepting anything happens on view model: a global store passed to when custom element is defined. update: list of [selector, f({model, view}] pairs passed to when custom element is defined. --- Congratulation we now have a self-contained Elm architecture.

akira2501 4y ago

I feel like an entire generation of programmers got cheated and didn't have to write desktop applications to get "their software" used in any real world context. As a result, they don't really understand what's possible, and the simple ways you can go about it... particularly, as you've flagged, with all the modern tools available in "standard browsers" now. The way I see people using flexbox makes me cringe a little, too.

frosted-flakes 4y ago
Can you elaborate on that flexbox comment? What don't you like about flexbox?
- akira2501 4y ago
  I love absolutely love flexbox. This is super opinionated and based on the types of software I'm typically exposed to. I think most people just don't understand how to get the most out of it in terms of creating user interfaces, and use "table" oriented thinking like percentage widths and media size queries to control overall layout. I think you should use it the way that something like QT's BoxLayout and GridLayout containers work. Strictly using flex-grow and min-width, max-width and justify-content to control layout. I can design just about any interface with just these CSS classes, with very occasional use of the three properties above: .VBox { display: flex; flex-flow: column nowrap; } .HBox { display: flex; flex-flow: row nowrap; } .VGrid { display: flex; flex-flow: column wrap; align-items: flex-start; } .HGrid { display: flex; flex-flow: row wrap; align-items: flex-start; } .Grow { flex-grow: 2; }
  - dmitriid 4y ago
    There's a project called Sciter that uses a sub/superset of CSS and HTML to create native apps. They have their own flow styling for this, and boy is it nicer than flexbox: https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.... More details here: https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/ https://terrainformatica.com/2018/12/11/10-years-of-flexboxi... I know the author pitched this as an idea to w3c a while back, but I don't know why it was rejected in favor of flexbox.
    - akira2501 4y ago
      What I like about my style, is that the document structure enforces the layout structure. The two are much more closely bound, and with this style, you can perform arbitrary levels of subdivisions of your containers. Working off your last link, the final "holy grail" example, with less style but the same exact layout: https://jsfiddle.net/Lpedja35/ https://jsfiddle.net/Lpedja35/ You don't have to have a matrix with an artificial rank to represent this. I only need to specify the 1 and 4 rows once. I don't have to make a square and then decide how to divide it, which, is the "table thinking" I mentioned earlier. I just observe which elements need Grow and then design from the inside out.

dmitriid 4y ago

> I don't understand why people don't base their apps and frameworks off of standard browser and JS supported techniques like custom elements Because 12 years after their idea was pitched Custom Elements still suck? Just a tiny list of problems with them, with big consequences: https://twitter.com/Rich_Harris/status/1198332398561353728 https://twitter.com/Rich_Harris/status/1198332398561353728 > and template literals with tag functions like Lit The whole field of programming has taught us not to use string-based programming and not to rely on regexps for parsing said string based programming to arrive at results. Also. Why are you against JSX and React, but at the same time happy with such "standard" things from Lit like magical reactive properties and bullshit like ".value=" and "?hidden=" and "@click=" none of which are standard browser techniques. > for choices like JSX that were made in the past when these standards weren't available yet What standards? Very few frameworks want to touch custom components with a ten-foot stick. Yes, most can target them, but very few have the as the underlying abstraction because they are just horrendously bad.