Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML First

html-first.com

Post reply on HN
Print view View original

1–10 of 551 posts

Re: HTML First

#2

Post by ricardobeat »

“Locality of behaviour” is such a poorly defined rule. It’s just an invented name for going against separation of concerns. Calling CSS “spooky action at a distance” is a massive stretch too. Good principles here but the arguments are quite weak and could be much simpler.

Re: HTML First

#3

Post by pc86 »

I want to agree with this based on the title, but why would you do something like this:

    Click me
if you're already using React? Yes the React code is a lot more verbose and has a bunch of "cruft" for lack of a better word. But you're already using it for the rest of your site, so you should (IMO) continue using it rather than mixing and matching approaches.

Re: HTML First

#5

Post by Dunedan »

I'm a big fan of that approach, but it's kind of funny (and sad) that such a simple page doesn't even look as intended with JavaScript disabled, as there are some placeholders of CloudFlare's Email Address Obfuscation visiable in some of the code listings.

Re: HTML First

#6

Post by 8organicbits »

pc86 wrote: post #3

I want to agree with this based on the title, but why would you do something like this: Click me if you're already using React? Yes the React code is a lot more verbose and has a bunch of "cruft" for lack of a better word. But you're already using it for the rest of your site, so you should (IMO) continue using it rather than mixing and matching approaches.

I don't think you'd mix in React with this approach.

Re: HTML First

#7

Post by oceanstone »

8organicbits wrote: post #4

Does anyone have a good list of vanilla approaches? I'm a fan of details/summary, but I'm sure there are more I don't know.

These vanilla JavaScript features are pretty great IMO

- https://developer.mozilla.org/en-US/docs/Web/API/Document/qu...

- https://developer.mozilla.org/en-US/docs/Web/API/Document/qu...

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

- https://developer.mozilla.org/en-US/docs/Web/API/Element/ins...

- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget...

- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Re: HTML First

#8

Post by pc86 »

8organicbits wrote: post #6
pc86 wrote: post #3

I want to agree with this based on the title, but why would you do something like this: Click me if you're already using React? Yes the React code is a lot more verbose and has a bunch of "cruft" for lack of a better word. But you're already using it for the rest of your site, so you should (IMO) continue using it rather than mixing and matching approaches.

I don't think you'd mix in React with this approach.

Isn't it much easier to know you're going to use React (or Svelte or Vue or anything else) and just start there? Starting a build in HTML-first only to bolt on a JS framework after the fact seems like a lot of wasted effort.

Re: HTML First

#10

Post by HerrBertling »

8organicbits wrote: post #4

Does anyone have a good list of vanilla approaches? I'm a fan of details/summary, but I'm sure there are more I don't know.

I like datalist quite a bit for „poor man‘s autocomplete“ - you can dynamically fill it via JS and will get the suggestions shown in the completion fields above the keyboard on mobile and… well, something (?) on desktop. Not as nice as an autocomplete, but with way less issues re accessibility etc.

Edit: Forgot two things:

- You can disable the `fieldset` attribute to disable all inputs within. So properly nest your forms and you‘ll have a simpler way of controlling forms.

- Buttons can have a `value` attribute which works great to differentiate between various action paths for e.g. list items (delete, edit,…)

Post reply on HN