Follow

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

I'm liking this post: dev.to/winduptoy/a-javascript-

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?

@alcinnz
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)
<dialog>
developer.mozilla.org/en-US/do
@alexbuzzbee

@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.

@alcinnz
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
@alexbuzzbee

@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.

@alcinnz
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
FLOSS.social

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