HN Explorer

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

47 points by deanmoriarty ↗ HN
Hi,

Over the years, I have accumulated many “calculators” in various spreadsheets to make my personal life easier: tax simulations, startup equity, investment allocation, real estate, …

Clearly calculators online are a dime a dozen, yet I’ve never found the competition (top hits on Google) as accurate as mine, they all seem very wonky, slapped together quickly and missing important details.

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.

For context, I’m a software engineer working in FAANG as a backend developer in distributed systems and Linux kernel for many years. I just really dislike dealing with anything frontend-related and I’m utterly incompetent in it, I find CSS to be the biggest monster in computer science (and I troubleshooted bugs in distributed consensus algorithms, ha!), so I’m ideally looking for a framework/template where I can mostly focus on my business logic functions/invariants and get as a result a few static assets to host.

Thanks!

83 comments

[ 2.7 ms ] story [ 151 ms ] thread
mtmail
https://usesummit.com/ allows to setup your own logic and then you can embed it on your own website. Target customer is agencies but maybe you still fit into the free plan and/or gives you ideas how to build your own.
speedgoose
The low-code/no-code frameworks may be interesting to you. Like Appsmith or Retool.

Otherwise the Python community likes to avoid touching anything that is not Python. Dash Plotly or Streamlit are great tools to make web apps in Python.

zach_garwood
For styling, if your interface is focused on tables and forms, as opposed to bespoke components, you might try a minimalist CSS library like Pico or Milligram.

As for functionality, if you're "just" doing some calculations and presenting it like a spreadsheet, you probably don't need a framework. Some plain Javascript onChange event listeners for your various input fields might be all you need.

dave4420
Little bit unconventional, but try writing your front end in Elm, and use the elm-ui library to avoid writing html or javascript.

It compiles to javascript and will generate an index.html for you if you want.

Elm is highly opinionated… maybe you’ll love it, or maybe you’ll hate it, but it’s a good fit for what you want to do.

https://elm-lang.org/

logicalmonster
I may be wrong, but I think this is probably bad advice for this situation.

Some programmer who isn't familiar with the front-end world probably is going to develop a website by copying and pasting little HTML/CSS/JS snippets they find online that kinda solves their problems. It's not going to be particularly pretty code (and that's ok), but with a little brute force effort, they'll eventually make it work.

But using something like Elm means that probably somewhere near ~99% of the HTML/CSS/JS examples you find online aren't going to be helpful examples for you that you can easily translate into your own work.

gofreddygo
> looking for a framework/template where I can mostly focus on my business logic

Short of hiring/partnering with someone, learning yourself is the closest best bet.

I'd say have the api ready, go through vuejs tutorials to build something, and then ask for help ?

fsociety
My suggestion.. avoid using a framework for now and learn CSS. Become comfortable with it. Then decide if you need a framework and what framework fills that need.

https://css-for-js.dev is a good course.

lloydatkinson
He wishes to build a series of calculators and tables and your suggestion for some reason is to focus on the styling over the part that will handle the state and logic required for them? Inane.
mym1990
It seems like your history of comments is just continuously shooting people down for their 'inane' comments. Why not add something productive to the conversation like why you don't think learning CSS should be a priority for this kind of thing?
lloydatkinson
Yes, some of this thread has very questionable advice. I already provided a suggestion and rationalised it. It seems you have become annoyed at me pointing this out.

Instead of asking me to explain why OP should prioritise styling, why don’t you explain how styling allows OP to build financial calculators? Form over function is not a good thing and I would expect HN readers to understand this?

mym1990
Sorry, but it takes a bit more than a snide post on a forum to annoy me haha. The OPs question is very open ended, so what you're seeing is a lot of general answers. Whether you like it or not, form is an essential part of front-end development. The best designs have form AND function, which is understandably a difficult thing to get right.

For what its worth, I never said OP should prioritize CSS, you are assuming my stance improperly, something you probably do often. I merely suggested you be helpful and give constructive criticism rather than shoving half an opinion down another's throat.

lloydatkinson
> you are assuming my stance improperly, something you probably do often.

So you continue the personal attacks then? You say I'm assuming something and yet you indicated the goal of learning CSS was somehow the priority for OP.

> I merely suggested you be helpful and give constructive criticism rather than shoving half an opinion down another's throat.

I already gave quite an extensive series of steps with numerous possible sub-steps which is helpful. Not sure why that is shoving anything down anybodies throat. Certainly more advice than "go ask frontend engineers you already know" which I imagine OP may have already done but wanted to ask a wider audience.

You definitely seem annoyed, especially as it sounds like you're really quite fixated on guessing lots about me. I suggest you re-read HN rules.

lloydatkinson
Assuming no backend as you describe and based on everything else you’ve said I would go with React or another similar library/framework (even Elm like someone else posted but that’s going to be a bit harder in terms of support and learning curve).

I also suggest react because after extensively using multiple frameworks I can say without a doubt the react ecosystem stands out far above the rest. There’s many high quality graph and table libraries for React. And having also dealt with integrating these sorts of libraries into component frameworks, it’s just not the sort of thing you want to waste time on.

As for language I would highly recommend just embracing TypeScript and skipping JavaScript. This will certainly help eliminate a whole class of potential frontend-typical problems like strings being interpreted as numbers due to developer error.

For styling I would use tailwind (although if using react styled-components is another approach, but tailwind definitely gets out of your way). This will easily get you past the styling problem you mentioned.

For hosting I would use Vercel. I would have suggested Netlify and really both are good but I’m considering migrating my sites to Vercel because netlify appears to load CSS files in a weird order, but that’s not too relevant to the discussion here I suppose.

Happy to answer anymore questions or help you get started with the code and implementation - contact links in profile! I hope this advice has been practical.

[deleted]
(comment deleted)
tumidpandora
I’d suggest going the python route. I migrated a lot of my shell scripts to python, and then went on to building a simple front end with flask, and ended up using Django. Felt like natural progression to me.
lloydatkinson
As far as I know python isn’t going to fulfil OPs need for a static site. Is there a way of compiling python to JavaScript (that’s actually supported and not an experiment)?
_nhh
With html, css and js
lloydatkinson
Possibly the least useful advice in this thread
superkuh
Or the most useful. Simple making a bare HTML file using a static webserver and linking the actual spreadsheet files for download will provide the most value to other people while being the most robust, least attack surface, and least time to implement.
lloydatkinson
If all OP wanted to do was provide downloadable spreadsheets I don’t believe he would have asked the question.

Telling someone to just “use css html and js” is about as helpful as telling someone to “just write code”.

groffee
Come on, a 'FAANG engineer' asking for help with this is like a gourmet chef asking for help boiling an egg. It's pretty much the most basic stuff imaginable, kids are learning this in pre-school pretty much.
lloydatkinson
Kids are learning how to build data driven and reactive forms, graphs, and tables, for calculating financial data?
yellowapple
I will disown and disinherit any child of mine who cannot build a reactive web-scale application by age 4.
lloydatkinson
Least insane HN user.

(Don't worry I know you're joking).

superkuh
Op writes his request like he wants to help people. Doing it the simple html and files download way would help people quite a bit and very quickly. After all, it's the way he choses to do it, so it must be pretty good. It has all those properties he asked for and people don't even have to depend on a third party staying up.

But you and many others picked up on the implicit premise of this request: to make it in a form that ranks highly on search. A form that is monetizable even if it doesn't help as much. To be clear, I realized this too but I still wanted to point out the more helpful way to cut this for-profit gordion knot.

Maximize help instead of monetization and it's suddenly simple. And you can even work on making a JS/CSS web application after the 15 minutes the simple html+files way takes. Maybe someone else will even make it for you using the spreadsheets you put out. That'd save a lot of time and help everyone the same amount.

lloydatkinson
I’m afraid I don’t really agree - I didn’t write my suggestion or critique any of the other suggestions with Google or money in mind.

I also disagree that downloadable HTML files are a good solution here.

Downloading html files and then opening then isn’t really feasible for anyone outside the tech bubble we are in.

andrei_says_
Check out bootstrap and bulma or halfmooncss for the front end stuff and keep it as simple as possible.

Bootstrap is very popular and easy to find components for.

For simple interactions look into htmx or alpinejs. Or jquery.

These recommendations presume you want to get things off the ground asap, without spending months learning.

throwaway5874
As a backend/devops/mobile dev i would say that CSS is the easiest language. i learned in free time during grad classes.

Learn the tool designed for the puropse instead of looking for shortcuts

superkuh
As a backend engineer you should be familiar with the concept of files and the file systems. You can make a website by installing nginx from your repositories and making an index.html file (<html><head><title>Calculators</title></head><body>...</body></html>) and transferring it, and your spreadsheet files, to your distro's www directory. Link the files in your index.html like, <a href="/spreadsheetone.xls">Calculator for tax</a>. Then forward port 80 on your router to the port 80 on the internal LAN IP address of your computer running nginx.

Providing the actual spreadsheet files directly will be of far more use to other people than trying to turn them into an inferior website.

lvass
Or just place those files on archive.org. This route may be more or less convenient than a web version depending on what the user is doing and how much they're used to spreadsheet software.
huijzer
I would try to start simple and go the HTML + CSS + Javascript route. Accept an ugly site at first and handle the calculations with Javascript. In case Javascript turns out to not be numerically powerful enough, consider compiling Rust to WebAssembly. Due to your back end experience, you’ll probably find Rust much more enjoyable than Javascript.

Also, I would stay far away from any Javascript package manager. Your calculator should be working for 10 years at least since HTML, CSS, plain Javascript, and Rust will most likely still work in 10 years and math doesn’t change either.

lvass
Maybe export the spreadsheets to HTML tables and add interactivity with datatables.net? If you're going open-source, sharing the spreadsheets as-is would be great, I may be willing to hack on that.
[deleted]
(comment deleted)
xrayarx
The least amount of friction would probably be a public google spreadsheet.
rm_-rf_slash
Surprised nobody’s mentioned streamlit yet.

Maybe I’m misunderstanding your use case, but if you want to create web apps out of your backend work, streamlit may be your ticket for “easy to understand on the back end, hyper-simple front end.”

At least worth giving it a look.

https://streamlit.io/

Pepe1vo
I Had never heard of streamlit before, but it looks extremely nice!
foxbee
Try Budibase. It should help you out
ecshafer
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
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
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
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
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
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
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
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
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
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.
karmakaze
How about creating a javascript/typescript library with the better calculations and posting the library here on HN. There are probably quite a few that would happily create a usable and not too bad looking front-end for them.

I would deploy using Netlify with their CDN or Cloudflare.

risyachka
I've recently had a similar issue.

The best I've found is NextJS (you can use their API support if you don't have a separate one yet) + Chakra UI (removes practically all the need for css).

You can pick it up in a weekend and build beautiful products.

abetusk
Here's my personal goto:

Find some minimal CSS framework. My preference is Skeleton [0] or Bootstrap [1]. The key is just finding something minimal that works without too much fuss. Personally, I rather have a minimal framework provide 'responsiveness' so I don't have to worry about it but I also want it to get out of the way of anything I do.

Use JQuery [2]. Don't rely on CSS for animations or interactivity. In theory CSS does a lot. In practice it's a nightmare to use and to get it play well with whatever else I'm doing in the page.

Write in "bare" HTML and "vanilla" JavaScript. Don't use a static site generator and don't use a JavaScript framework.

Port in JavaScript libraries as needed. Some of the ones I tend to use are numeric.js [3], downlaod.js [4] and audience-minutes [5]. If you're doing spreadsheet things, maybe there's some JS package out there that will help.

Doing "raw" HTML/"vanilla" JavaScript makes me effectively unhirable but for limited scope side projects where I have full control and want to minimize bit-rot, this is fine.

The point is to create something that's minimal and focuses on functionality. The CSS is just there to make it not look like a Web 1.0 page but otherwise steps out of the way to focus on the actual usage of the application.

For context, here are some projects where I've used this philosophy (all open source, feel free to pilfer): Noixer [6], Resonator Voyant Tarot [7], Boston Train Track (now defunct) [8], CalebHarrington.com (an artist friend) [9], What Is This License [10], HSV Hero [11].

[0] http://getskeleton.com/

[1] https://getbootstrap.com/

[2] https://jquery.com/

[3] https://github.com/sloisel/numeric

[4] https://github.com/rndme/download

[5] https://github.com/berthubert/audience-minutes

[6] https://mechaelephant.com/noixer/

[7] https://abetusk.github.io/ResonatorVoyantTarot/

[8] https://github.com/abetusk/bostontraintrack

[9] https://calebharrington.com/

[10] https://mechaelephant.com/whatisthislicense/

[11] https://mechaelephant.com/hsvhero

meitros
Bootstrap with python flask will probably be the easiest way to write the ui code, imo. If you then add in one library - htmx - then you can have an idiom where the server handles all the rendering and you can avoid using javascript.

I think these tools should work for someone coming in without prior experience and figuring it out from the docs.