HN Explorer

Ask HN: There has to be a better way to write web pages, right?

3 points by awestbro ↗ HN
I've been writing front-end code for about 9 years now. Everything from custom JS frameworks with XML/XSLT bindings, to React, to plain HTML and a bit of jQuery and everything in between.

The whole time I've had the lingering thought, "There has to be a better of doing this than popping open my text editor and manually writing all these tags".

Was it the "field-group" tag I needed to wrap these in? Why won't this damn thing align vertically? What was the structure of that select element that's not actually a <select>? Why did I think this was a good career choice again? Even with years of experience, little things like these eat up so much of my time. I'm jealous of tools like Elementor that work well in Wordpress but not for custom frameworks that so many of us work in from day to day.

Pretty much all the ui builder tools I've seen are scoped to a specific framework, or aren't programmable/ extensible enough for me to drag and drop custom elements onto pages and save me dev time.

Has anyone else had the same thought? Are you using tools like this today and I'm just missing something?

4 comments

[ 3.6 ms ] story [ 20.5 ms ] thread
bird_monster
I've had similar thoughts. It's funny to me that it is possible to make a Diablo 3 clone in Unreal Engine without a single line of code, and yet simple two dimensional pages featuring largely consistent widgets (dropdowns, input fields, text boxes, scrolling, etc) is still such an unnecessarily massive undertaking.

I think web development is kind of a gateway drug into the rest of software development for a lot of people. New devs often start with Javascript if they aren't coming from a college, so I think there is definitely some value in keeping the web using hand written software (to not further gatekeep the profession), but I agree with you entirely. Web development, I think, is complexity for complexity's sake. I think people that master it are legitimately very talented engineers, I just wish engineers spent that time and talent on more interesting problems.

I am not speaking negatively about Javascript or front end development, I think it's incredibly difficult to do well and applaud those that pull it off. I just don't think it needs to be.

awestbro
I think its a gateway drug as well. Its just odd that it really doesn’t get much better from beginner -> expert. Expertise in the front end world is largely knowing how not to shoot yourself in the foot.

The unnecessary complexity holds back a lot of people as well. I know plenty of incredibly talented back end people who don’t have the confidence to develop web UIs when comparatively its a simple task (if you remove the always changing complexities of front-end tooling).

I feel like there should be a solution where you can codify this knowledge and share it with others, kind of like a storybook JS for the masses.

qohen
"There has to be a better of doing this than popping open my text editor and manually writing all these tags".

This isn't a silver bullet, but perhaps the open-source tool, Emmet [0], can help remove some/much of the drudgery. There's a little demo on its docs page[1] and here's how it's described there:

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

There are also a bunch of YouTube videos about it.[2]

(It even has a Wikipedia page[3]).

[0] https://emmet.io/

[1] https://docs.emmet.io/

[2] https://www.google.com/search?q=site%3Ayoutube.com+emmet&ie=...

[3] https://en.wikipedia.org/wiki/Emmet_(software)

awestbro
Thanks for the emmet mention! I use emmet a lot and it is very helpful to the normal workflow.

The tool I have in my head is more visual. Almost a bridge between what you see in something like Wordpress theme editors, and emmet.