Reminder: if you don't use JavaScript, you don't get crashes. And don't need loading screens.

I'm liking this post:

And he's got a list of things he wants to be able to do without JS. discuss?

"1. Why can't we have a standard search element that filters a list on the client side (similar to how ng-repeat | filter: worked on Angular)?
2. Wouldn't a standard HTML element for drag-and-drop sorting be awesome?
3. More advanced validation functionality, like comparing equality of two different form fields.
4. The ability to do the modal/checkbox trick above without it feeling like a hack and writing weird CSS."

@alcinnz I've felt for a while that most webapps could be implemented with <form> and reasonable CSS, if that. Client-side scripting is way overused.

@alcinnz Basically what you need for 4 is the ability for an element to toggle the hidden attribute on another element. Maybe a 'shows' and/or 'hides' attribute?

@alexbuzzbee I'd add that I think modals have become a useful and dominant enough UI pattern on The Web (particularly in the form of "lightboxes") that I believe they should be native to HTML.

Maybe there's an attribute on links and buttons for that. Which could also set a side of this element to place it on, or maybe even pull in entire webpages for UIs like Stripe or OpenStack Horizon.

@alcinnz Perhaps add a 'modal' attribute to <button> that opens a modal document iframe-style? Or perhaps a modal element which is given by id?

Actually, there is already an element for dialogs, lightboxes and modals, but it's still not supported everywhere (ex. It doesn't work on Firefox for android)

@ranfdev @alexbuzzbee From what I can tell from that page, this doesn't fully answer the need: how do you open the dialog without JS? But it would be useful to encourage using this element alongside what we were discussing.

You still need a bit of js to toggle the open attribute of the <dialog>, but at least it should be more accessible than a custom modal.
Maybe they could add a way to connect the value of an attribute (like open="true") to a checkbox's state

@alcinnz Yes! I like these proposals. I have gone myself through this when working with database-related frontends without JS and also came up with some needs:

1. A multi-column SELECT element.
2. A data grid. As opposed to tables, data grids can't span and allow sorting by columns.
3. Selecting the sort column for this hypothetical datagrid via URL, something like page.html?var=val#anchor##table1.sort=name,asc.
4. A "select all / deselect all" mechanism for forms.

@alcinnz the trick with `#myToggle:checked ~ #myToggledUI` was worth the read alone!

I don't think I can agree that it's "plain and simple" when you have to trick the UI into clicking that checkbox by abusing the `<label>` tag. But I really like it in principle, and I would love to see this formalized in a more intuitive way.

Interesting read, thanks for sharing.

Remember the times when it was called unobtrusive javascript?
Somehow things have gone a bit downhill since then.

Sign in to participate in the conversation

For people who care about, support, or build Free, Libre, and Open Source Software (FLOSS).