Let’s talk about when not to use JavaScript and why HTML and CSS can often be the better tools for the job. This might sound counterintuitive—espec...
For further actions, you may consider blocking this person and/or reporting abuse
HTML is just one way to build the DOM, you can do the same using the HTML-DOM-API with Javascript. Or use one of the modern frameworks like React or Svelte, which - under the hood - do exactly this.
Finally it does not really matter how you create the DOM. You may find it convenient to use HTML, but if you create a Javascript heavy library like TinyMCE, this means, you need to maintain all your HTML files along with your Javascript code. So, it might be convenient to build the DOM from within Javascript and ditch HTML completely. This means, you just need to care for your codebase and do not need to keep all the HTML aligned with your code.
Yeah, you make a good point—using JavaScript to directly manage the DOM can definitely help keep everything in sync without worrying about separate HTML files. React and Svelte are great for making DOM updates easier, but they can also add some extra overhead compared to just using the DOM API directly. It really depends on what you’re building—sometimes keeping it lightweight and simple makes more sense, and sometimes the benefits of a framework are worth it for larger projects
We should be happy to have different tools to do the job. Each one has it´s own advantages.
The HTML-DOM-Api is surely a bit awkward, but it is fairly easy to make it more convenient. See this post for example.
Using JS to build the DOM has far more advantages then you might think. You get DOM references directly without using GetElementBy... And you get better access to DOM events. Some time ago I demonstated this for the (TipTap-Editor)[dev.to/efpage/event-based-state-co...].
Very good post!
You forgot to add the "scroll-behavior" property to the third example snippet. Also,
<detail>can be a bit complicated. Using multiple<div>elements and a hidden checkbox, like in the switch examples (or JavaScript), is simpler.But definitley not accessible.
What do you mean by 'accessible'?
If you're talking about accessible technology, the
roleattribute can help with that. If you're talking about visual accessibility/ergonomics, using<div>can simplify styling and responsiveness.I would greatly appreciate it if you could elaborate on your point. Statements that are not explained can be confusing and unhelpful for others who read them. When we share our thoughts and ideas, it's important to provide context and reasoning so that others can understand and learn from our perspectives. This helps to foster a more productive and inclusive discussion.
PS: Sorry if I sounded aggressive or condescending. I sometimes struggle with expressing myself clearly in writing.
Example 1: this is a wonderful case for the WAI ARIA role "switch".
Example 3: your code samples are missing the essential
scroll-behavior: smooth;that is causing the effect.Good catch will make the fix
Where has "datalist" been all my life?! Thank you for posting this.
Nice, and thanks for attaching an example for each with the code!
Thanks, glad you liked the examples
Thank you!
I appreciate how EchoAPI facilitates communication between APIs and CSS frameworks, enhancing the overall development process.
I appreciate the flexibility of EchoAPI. It supports various API types, allowing me to work with both open and authenticated APIs effortlessly.
I know to do switches without extra elements, just using a checkbox. Reply if you're interested, I can explain.