Ask HN: How do I build a website as a backend engineer?

Re:Ask HN: How do I build a website as a backend engineer? by divbzero on Saturday November 19, 2022 @01:33PM (#33673126)

I like superkuh’s suggestion to serve the spreadsheeets directly, so you don’t need to worry about converting the “calculators” to another language.

If you do want to go through the trouble of converting to another language, JavaScript would be the natural choice because it can run directly in the browser with just “a few static assets to host”. A simple template like the following would probably work just fine.

foo.js:

  function foo(a, b, c) {
    // do whatever calculations and return output
    return a + b + c;
  }

foo.html:

  <!doctype html>
  <meta charset=utf-8>
  <title>Foo Calculator</title>
  <link rel=stylesheet href=https://cdn.simplecss.org/simple.css>
  
  <main>
    <h1>Foo Calculator</h1>
  
    <label for=a>A</label>
    <input type=number id=a>
  
    <label for=b>B</label>
    <input type=number id=b>
  
    <label for=c>C</label>
    <input type=number id=c>
  
    <label for=z>Z</label>
    <output id=z></output>
  </main>
  
  <script src=foo.js></script>
  
  <script>
    // calculate output when any input changes
    a.oninput = b.oninput = c.oninput = function () {
      z.value = foo(
        Number(a.value),
        Number(b.value),
        Number(c.value),
      ); 
    };
  </script>

a, b, c, z, and foo will be global variables in foo.html so make sure they have unique names.

simple.css could also be replaced with other classless CSS frameworks.

[ Parent | on HN ]

Re:Ask HN: How do I build a website as a backend engineer? by jrururufuf666 on Saturday November 19, 2022 @02:11PM (#33673505)

THIS is a helpful straightforward answer!!! simple, to the point. the rest on here shows how the wheel gets reinvented over and over and everyone wants to use ever-bigger frameworks to shot flamethrowers on a fly.

[ Parent | on HN ]

Re:Ask HN: How do I build a website as a backend engineer? by divbzero on Saturday November 19, 2022 @03:52PM (#33674539)

I think ”persist the input in the URL query string” could also be doable with static assets alone. The last <script> block in foo.html would need to be replaced with something like:

  <script>
    // calculate output and update query string when any input changes
    a.oninput = b.oninput = c.oninput = function () {
      z.value = foo(
        Number(a.value),
        Number(b.value),
        Number(c.value),
      );
  
      var params = new URLSearchParams();
      if (a.value) params.set('a', a.value);
      if (b.value) params.set('b', b.value);
      if (c.value) params.set('c', c.value);
      history.replaceState(null, '', '?' + params);
    };
  
    // fill in input from query string when page is loaded
    var params = new URLSearchParams(location.search);
    a.value = params.get('a');
    b.value = params.get('b');
    c.value = params.get('c');
    a.oninput();
  </script>

[ Parent | on HN ]

Re:Ask HN: How do I build a website as a backend engineer? by night_ship on Saturday November 19, 2022 @03:54PM (#33674559)

a.oninput = b.oninput = c.oninput = function () {

That is one slick anonymous event handler... would never have thought of that having first learned listeners in the days of Java AWT/Swing addActionListener(new ActionListener()

[ Parent | on HN ]

Re:Ask HN: How do I build a website as a backend engineer? by LostRick on Saturday November 19, 2022 @05:13PM (#33675366)

Very nice. I'm curious how far it could go.

<table contenteditable> a1.innertext = eval(a2.innerText)

[ Parent | on HN ]

Re:Ask HN: How do I build a website as a backend engineer? by solardev on Sunday November 20, 2022 @03:20PM (#33684837)

This is great! SimpleCSS makes it look good, and the straightforward code means it's fast, easy to understand, and super quick to load.

[ Parent | on HN ]