this post was submitted on 13 Nov 2023
101 points (85.8% liked)

Programming

17534 readers
248 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Rules

  • Follow the programming.dev instance rules
  • Keep content related to programming in some way
  • If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities [email protected]



founded 2 years ago
MODERATORS
101
HTML First (html-first.com)
submitted 1 year ago by mac to c/programming
all 21 comments
sorted by: hot top controversial new old
[–] [email protected] 39 points 1 year ago* (last edited 1 year ago) (1 children)

Half of fine. Half is not. I support their cause because CSS has taken a lot of the complexities of JS with it, and would love to see HTML do more as well.

But half this stuff is like... Noooooo...

I'm just waking up so I might be rambly. Sorry. Let's nail two key issues.

#1 - The reason why html compiler languages exist is because html is still butt-ugly to write. And without a way to natively include html inside html (or pass data values to a "component"), it's a LOT of copy/paste.

Try making a form with 20 labels and include selectors/inputs/text fields. Include errors and help text too. That form element will be at least 400 lines of code, not including wrappers. The quantity isn't a problem. The problem is it becomes spaghetti. It's a lot of repeating the same thing over and over again.

#2 - onclick events

Edit: Lemmy sync code block markdown is breaking the code. Replaced it with a image.

The "discouraged" part, I somewhat agree. It's badly named for one.

But I don't agree with the "encourage". Rarely will adding onclick to turn on a class be the only thing you're doing. Frequently, you're swapping classes. Turn one off, turn on another.

Let's assume you really are just adding a single event that just adds a class (which in my many years of web dev, is a extremely lucky usecsde)

You've already coupled JS into your html by requiring that event. Why not call it by reference, rather than invoke the command directly? You've already added the noise. And a good vanilla JS developer would add all their event listeners into one neat file so you can scan all the events. Versus sprinkling JS actions into the HTML.

#3 - the build step I kinda agree with, but in the year 2023, we are not ready to remove it. Ignore building for JS frameworks or compiling libraries. The huge bonus for build tools is backwards compatibility. Browsers have gotten extremely better at not requiring browser specific hacks (except Safari. Fuck Safari). But Chrome has been going off the rails lately adding new html/CSS features and forcing everyone to catch up.

Worse, we cant assume every consumer is updating browsers. Many older tech cannot. Your iPad from 6 years ago no longer gets updated, which means the last browser update it can get is already a few years old. The build system handles that usecase. Again, this requires hardware companies to stop locking their system. But as software people, we can solve that using a build step.

[–] [email protected] 21 points 1 year ago (1 children)

this is fairly naive. this is not intended as an insult, just an observation. these suggestions get painful at scale.

[–] jeebus 5 points 1 year ago (1 children)

Not everything is at scale. We have adopted these techniques (at the beginning of this year) for our internal web frontend to our build system at work and it makes it possible for all of the team to work on this system without having to setup a complex node environment or deal with npm. We also get the pretty shiny that Tailwind brings to the table. Our system is as simple as can be but not any simpler.

[–] [email protected] 4 points 1 year ago (1 children)

I don't consider Tailwind (or any atomic CSS library) "as simple as can be". Having to know a bunch of custom naming conventions seems to go against this whole idea.

[–] jeebus 0 points 1 year ago

As compared to writing css by hand? Fuck that. We do was the site to look good.

[–] [email protected] 19 points 1 year ago (1 children)
[–] [email protected] 9 points 1 year ago (1 children)
[–] stifle867 8 points 1 year ago (1 children)
[–] [email protected] 4 points 1 year ago (1 children)
[–] [email protected] 4 points 1 year ago (1 children)

Single-celled organisms first

[–] [email protected] 2 points 1 year ago

Self-replicating RNA first

[–] [email protected] 19 points 1 year ago

I'm all about this. When I made my personal webpage, this is how I do it. I'm surprised it's not more popular (at least for certain things) because it looks nice and clean, is fast, and crucially, is easy to put together. Most webpages don't need a ton of JS to "accomplish the mission." I get that not everything can do this, but there are soooooo many sites that can strip down to a more minimal site and have better functionality and a better experience. This is a case of less-is-more.

[–] Olissipo 11 points 1 year ago

I don't agree with the problem they aim to solve with those goals.

But today it takes several years of mastering tools and frameworks to get to that stage. HTML First principles should allow people to unlock that feeling, and level of mastery, much earlier on in their coding journey.

The onboarding process can be made easier for devs new to the project (junior or senior) with decent documentation. Just enough install/build the project in their local machine and understand the gist of the technologies.

[–] [email protected] 7 points 1 year ago* (last edited 1 year ago)
  1. Rule - Prefer Naked HTML

HTML? Naked?? Man, I always did 😍.

[–] [email protected] 5 points 1 year ago

Using tools the way they are built for has advantages, who knew?

[–] [email protected] 4 points 1 year ago* (last edited 1 year ago) (1 children)

Where possible, maintain the right-click-view-source affordance. The beauty of the early web was that it was always possible to "peek behind the curtains".

Just make the source code availible behind a visible link (hosted on Github or another similiar platform if possible). I don't see this being a problem by any means.

[–] [email protected] 1 points 1 year ago

You don't even need to do that, we figured out sourcemaps an eternity ago.

[–] [email protected] 3 points 1 year ago

Fantastic. Much appreciate the awareness of Hyperscript.org and Tachyons.io as well.

[–] CodeMonkey 2 points 1 year ago

As someone who was a web developer since the mid-2000's (and not more recently), an HTML first approach speaks to me. I am still of the belief that your contents should be in HTML and not pulled in via JavaScript.

The article is a bit self contradictory. It encourages specifying style and behavior inline and not using external styles and scripts but also discourages using a website build pipeline or dynamically generated HTML. So how can you maintain a consistent look and feel between pages? Copy and paste?