A Proposed New Language as an Alternative to HTML, CSS, and JavaScript

#21

I absolutely loved reading this discourse.

The idea that we could somehow describe content differently is fascinating.

I had a long conversation about computers with my mother the other day. She is currently 70 years old and claims to have no understanding of computers or design patterns.

We took a piece of paper and wrote down some content. It was a few sentences and a few bullet points. I explained:

so - the computer just sees a string of characters. You know what the weight and level of importance of each of these pieces of content are - but the computer does not. How can we get some shared understanding going between you?

She was very frustrated but I just kept prompting her. I told her that the computer can read the letters - and that we can make some rules. After a few minutes - she was exasperated. She did not enjoy this challenge - and she just said:

Well… just put an x in front of it…

(meaning that the x would declare that the first sentence was of level 1 importance.)

I said that was a great idea… but what about the second sentence? She said - that it was just a paragraph - so, it could be the default. “The computer should be able to know if it doesn’t have an x… then it’s just a paragraph, right?” I said, sure. But what about that other heading. That looks like a section heading - that might be in an essay.

Well, just put 2 x’s for that. It can be the 2nd most important.

So, - in about 10 minutes - my mom had basically described her own frustrated version of markdown with x instead of #

I’m excited to think about other options to HTML / but I’m also not really sure how to even start.

There is some content. We ‘mark’ it - so - that we can reference it — and then we write(declare) a bunch of rules - and apply styles based on those markers… - and even my mom ends up with this same idea.

HTML(DOM), CSS, and OO programing styles - all just end up as groups of key:value pairs.

node-1
  content='Title thing'

.thing {
  color: red;
}

const thing =  {
  amount: 3,
};

Regarding this proposal - I’d love to see an example of another way we could describe content for the web. Are there any experiments or examples?

1 Like
#22

This is a great idea. We do need a flexible way to present pages as an alternative to html and css. I’ve checked your post last year and now I’m coming back to see if there is any progress in the area. I believe that the new initiative of “WebAssembly” will solve this issue. WebAssembly will give us the flexibility to execute any code (kind of natively) on web browsers. that means someday we can design a page with Unity game engine without even converting it back to html,css, and JavaScript.

#23

I love thinking through the problems of web development at such a high level. Thank you for starting this excellent discussion, @tstyles

I think it’s interesting that HTML, a language perfectly designed for building static documents, is now used all the time for creating dynamic documents. I think someone could definitely invent a better language for creating web applications by flattening the modern application stack of HCJ + a back-end into a single layer.

In fact, I’ve been working on just such a project: Remake.

Remake is an open source, server-rendered framework that allows you to build interactive web apps with only HTML. It transforms HTML into a language that can store nested state, automatically creates components that can edit that state, and auto-saves that state to the current user’s account whenever it changes. It currently supports all the major CRUD operations (create, read, update, delete), as well as drag-and-drop sorting and file uploads (as of yesterday).

I’d be enthralled if you could give it a shot and tell me what you think. I’ve been working on it almost non-stop for the past year and a half and I’d really appreciate some feedback.

I think eventually Remake might even include a really nice default CSS framework like MVP.css, which would allow it to support the full vision of @tstyles — unifying the layout, styles, data, and functionality in one small package.

If you’re interested in other low code frameworks similar to this, you can check out this list I’m compiling. I think of particular interest is Mavo (already mentioned), Wasp, and Mint.

#24

Remake is solving a different problem than my idea. Remake simplifies web app development by reducing the back end effort, whereas my idea simplifies the development of the user interface for web sites and web apps. I am wondering what are the limitations of Remake in performance and adding functionality beyond CRUD. But I think Remake is a great idea. People need ways to develop web apps or prototypes much more quickly and easily.

@panphora, you are doing a lot of development to turn your product into a real venture. Good luck with it.

#25

Remake does mostly solve a different problem, but has a little overlap with your idea, I think. Because the state of database is stored directly in the HTML, you can use the data’s state to control the style of the page. It unifies the HTML’s state, the front-end state (which in React/Vue.js is usually stored in a separate component object), and the back-end state. I think if you’re idea of automatically creating a visual interface will come to pass, something like Remake has to come first. An expressive front-end state that’s styleable is a perfect starting point for automatically adding styles.

Remake is great for anything beyond CRUD yet, but it can handle CRUD operations at any level of the data. It kind of feels like having a web app backed by a big JSON blob, with a little more flexibility built in (e.g. the ability to save to a particular place in the blob or create a route based on a single piece of data in the blob). Also, with a little caching, Remake should be able to scale really well. I even have dreams of one day making it mostly output static pages. Thank you for the feedback though — I definitely need more help and advice from people like you.

#26

I think that very large changes would be very difficult, but I would like to see some changes in the way we develop that would be significant.

HTML as a single file

The combination of the three languages ​​in my thinking would be more interesting if they were compared to the current components of the VUE, where the styles and script are only incorporated into the file in question.

HTML Import

I would like to see HTML importing part of files / components without the need for another language.

Adding an icon tag

Where we could have more flexibility to import svg icons such as their edition without having to insert the xml of the entire file.

Refactoring CSS attributes

I think that writing CSS is quite confusing in some cases, unifying text attributes for font like font-align etc. Like the other attributes unifying them in a more simplified semantic pattern.

Future

Through my journey I realize that the great additions made in language come from inspirations of alternatives that exist today, however, it is never as good as. SASS variables are much simpler in semantic terms than using var (- name-var). The way in which SASS organizes multiple events for the same element using &: hover could also be added.

Many of these modifications would not break current sites, but would make a big difference in development.

1 Like
#27

I find this idea and proposal amazing to have an alternative to the standard css/html/js

My justification is this:

  1. html is increasingly approaching a scripting language, here is a proposal to transform html into a programmed language: [Proposal] "HTML7" , GitHub - webqit/oohtml: Object-Oriented HTML - a WICG proposal , Document.prototype.createHTML - 💡 Ideas - TC39 , Javascript Template Library - #7 by theScottyJam - 💡 Ideas - TC39 , Text Modules - #5 by Q.b - 💡 Ideas - TC39 , Extending HTML As a Hypermedia , Custom Elements in Templates [Proposal] CHTML , [Proposal] (Another) Alternative to HTML
  2. Frameworks like vuejs/react-js/svelte-js/mithril js etc do exactly what html doesn’t: customization of own html modules, object oriented to html elements etc
  3. I read everything on the web, I work with the web for 4 years - I have to use 3rd party tools as vuejs/react-js etc because html doesn’t offer anything i need - this in my opinion is very annoying
  4. CSS is another problem it’s not something like sass/stylus/less/scss does - you can’t reuse some components and you don’t have most of the functions of these frameworks
  5. In my opinion, one time or another we will have to have an integrated css-html-js model, what I think of this model would be something like vue-scss-js or react-scss-js or pug-scss-js or haml-scss-js
  6. The javascript itself has to take care of the css and html, because html and css are independent tools, they are not joint, integrated

Notes

  1. I read all the comments, I don’t want to criticize anyone, I have a sense for the common goal, I want to help as many people as I can in life - so I want to say that this comment is not intended to criticize anyone, I commented here a partial view of my web 3.0 and how this proposal would be great in web 3.0
  2. What I think is viable would be to have a new language for web 3.0, as it is a recent web and lacks technologies - still things are not so standardized with blockchains, smart contracts - things are very recent
  3. All links I put here are for bibliographic reference, it is not intended to advertise or promote any company, brand, service - I am not gaining anything from this.
  4. This can be bad now in web 2.0 as everything is already done with html as is - we would have to have the endorsement of tens of thousands of companies to get this done as properly as possible
  5. I even suggest some changes to the html for some specific things

References

#28

Hi all! @vtmx What do you think about this idea?

In short

  1. Single HTML integrated with js/css will be a starting point for web 3.0
  2. This is not to say the destruction of the css/html/js pattern - rather the integration of these 3 into something unique for web 3.0
  3. “Haml (HTML abstraction markup language)”
  4. alternative html: pugjs/yaml
#29

Hi all!

  1. I would like to contribute to the discussion here with a very important technical reference.
  2. I was reading about the history of the web and there is an old concept called Embedded markup.
  3. So… integrating css+js+html into a single language will allow what many call Embedded markup as RTF - Rich Text Format?

References

#30
There are several similar requests here

or alternative as JSON/JSOL/jsonlang/mdxjs is good too

so…