3 ms·

Just make a website like we did in the early 2000s for fun. Get an HTML file with form elements. When you click submit on the form, it calls your calculator scr

Just make a website like we did in the early 2000s for fun. Get an HTML file with form elements. When you click submit on the form, it calls your calculator scripts. Or you can rewrite the file calculators as JS, and do it all right on the client side, and just serve the file from the box. You can then put that html file on a linux box and point the web server to it. Talking about frameworks and css and all of this is massively over complicating things.

lloydatkinson 4y ago
And suggesting to simply “write the calculators as JavaScript” vastly understated the effort required to make a reactive form that performs calculations, drives graphs, renders tables, all as the user types (just like Excel or Google sheets). This is literally the reason frameworks exist: to handle user input, managing state over time, and then updating the UI in response to changing of state. By suggesting a framework like I did, allows OP to focus on writing the actual calculation code and and to build their site - not spending time writing user inputs and bindings and manual DOM updates.
- throw1234651234 4y ago
  The problem with React & Angular is that junior devs can't see the line between the framework and the raw JS/HTML/CSS. You genuinely do need to understand the basics of the former to use the latter. You do make a good point (perhaps accidentally) about libraries for output. As a backend dev, the opening poster should be able to understand the concept of magicLibrary.drawGraphyThingy(wowSuchValues);
  - lloydatkinson 4y ago
    Fortunately OP doesn’t appear to be a junior, so I imagine he would be able to use the frameworks (and learn why they exist to begin with) much faster than learning raw DOM just for some purity argument.
    - throw1234651234 4y ago
      I think we understand each other and are going down an argument rabbit hole here. I will just state what we agree on - OP shouldn't learn to write responsive pages through raw DOM. My side of the argument is that he/she doesn't need to go past let value = document.getElementById("foo").innerHTML and form submission. Your argument is that they should just learn a framework or something that can render React components. My counter-argument is that it's basically learning modern front end design, and there is nothing simplistic about it. tldr: DOM bad. Simple form submission and using server for heavy lifting is alternative. Using full power of modern tools is another alternative. Definitely mutually exclusive.
- ecshafer 4y ago
  I don't see any need for state management in these requirements. You have form that performs a calculation and prints out an html table in the results or a single value. All of this can be done with dead simple html and js, and it would probably be 10000x faster than a react hello world page. I have made little tools like this in pure html and JS before. Its really quite straight forward and using a framework is overkill.
throw1234651234 4y ago
This is the answer. You need like 3 things for this - grab data from form, send data using axios (3 lines), display the response.
- lloydatkinson 4y ago
  Why would axios be used for a form post over a HTML form post? Also, could you explain how sending the data to a server is the answer when OP specifically asked for a static site without a backend? You did read the question in full before deciding on the answer, I hope.
  - throw1234651234 4y ago
    The proposal is an alternative for quick delivery. I did read "What would be the path of least friction to produce a no-backend static website that can host these calculators? I believe that with the right intuitive UX and user-friendly features (i.e. persist the input in the URL query string, instant recomputation on input change, …) they could be valuable for someone." If he/she doesn't want to learn front end, just dumping data to an API is a workable solution. If he/she really wants to go the quoted route - sure, learn everything. Again though, SPAs are NOT a substitute for learning HTML/CSS/JS basics. At the end of the day, he has to understand that || is raw Javascript, even though it's used to render or not render. That creating a <tr> from data is actually populating a <table> that needs a <th>, etc, etc. So what we are recommending is "work around all that to your strengths". Your solution is pretty much "learn front end".
    - lloydatkinson 4y ago
      I didn’t suggest building a SPA, though I probably would if I was making this. Astro is an example of how to build traditional multi-page site that easily loads React components.

lloydatkinson 4y ago

And suggesting to simply “write the calculators as JavaScript” vastly understated the effort required to make a reactive form that performs calculations, drives graphs, renders tables, all as the user types (just like Excel or Google sheets). This is literally the reason frameworks exist: to handle user input, managing state over time, and then updating the UI in response to changing of state. By suggesting a framework like I did, allows OP to focus on writing the actual calculation code and and to build their site - not spending time writing user inputs and bindings and manual DOM updates.

throw1234651234 4y ago
The problem with React & Angular is that junior devs can't see the line between the framework and the raw JS/HTML/CSS. You genuinely do need to understand the basics of the former to use the latter. You do make a good point (perhaps accidentally) about libraries for output. As a backend dev, the opening poster should be able to understand the concept of magicLibrary.drawGraphyThingy(wowSuchValues);
- lloydatkinson 4y ago
  Fortunately OP doesn’t appear to be a junior, so I imagine he would be able to use the frameworks (and learn why they exist to begin with) much faster than learning raw DOM just for some purity argument.
  - throw1234651234 4y ago
    I think we understand each other and are going down an argument rabbit hole here. I will just state what we agree on - OP shouldn't learn to write responsive pages through raw DOM. My side of the argument is that he/she doesn't need to go past let value = document.getElementById("foo").innerHTML and form submission. Your argument is that they should just learn a framework or something that can render React components. My counter-argument is that it's basically learning modern front end design, and there is nothing simplistic about it. tldr: DOM bad. Simple form submission and using server for heavy lifting is alternative. Using full power of modern tools is another alternative. Definitely mutually exclusive.
ecshafer 4y ago
I don't see any need for state management in these requirements. You have form that performs a calculation and prints out an html table in the results or a single value. All of this can be done with dead simple html and js, and it would probably be 10000x faster than a react hello world page. I have made little tools like this in pure html and JS before. Its really quite straight forward and using a framework is overkill.

throw1234651234 4y ago

This is the answer. You need like 3 things for this - grab data from form, send data using axios (3 lines), display the response.

lloydatkinson 4y ago
Why would axios be used for a form post over a HTML form post? Also, could you explain how sending the data to a server is the answer when OP specifically asked for a static site without a backend? You did read the question in full before deciding on the answer, I hope.
- throw1234651234 4y ago
  The proposal is an alternative for quick delivery. I did read "What would be the path of least friction to produce a no-backend static website that can host these calculators? I believe that with the right intuitive UX and user-friendly features (i.e. persist the input in the URL query string, instant recomputation on input change, …) they could be valuable for someone." If he/she doesn't want to learn front end, just dumping data to an API is a workable solution. If he/she really wants to go the quoted route - sure, learn everything. Again though, SPAs are NOT a substitute for learning HTML/CSS/JS basics. At the end of the day, he has to understand that || is raw Javascript, even though it's used to render or not render. That creating a <tr> from data is actually populating a <table> that needs a <th>, etc, etc. So what we are recommending is "work around all that to your strengths". Your solution is pretty much "learn front end".
  - lloydatkinson 4y ago
    I didn’t suggest building a SPA, though I probably would if I was making this. Astro is an example of how to build traditional multi-page site that easily loads React components.