Mikes Notes
I have been building a ribbon menu that can be placed at the top of every webpage at www.ajabbi.com—something similar to MS Office 365, Dreamweaver, and other products.
Requirements
- Batch generated from a database. (Database done)
- Limited version for visitors to the public website.
- A full array of button commands for logged-in users.
- Users can configure tab menus.
- Multi-language/writing systems (LTR, RTL, etc.).
- Adaptable and automatically generated by the CMS.
- Small, fast and stable.
- Fit screens of different sizes.
.png)
I liked the look and functionality of the open-source MetroUI ribbon created by Olton from Ukraine.
Options
- CSS
- HTMX
- JS
- Combo of the above
So far, I have a working version that uses CSS that friends have been testing. Next, I will try HTMX as a testing comparison. HTMX should be able to handle the DOM to generate the live UI interactions.
I want to avoid using a JS single-page application architecture like React; it's unnecessary and complicates future maintenance and technical debt.
Testing
Resources
- https://en.wikipedia.org/wiki/Ribbon_(computing)
- https://docs.metroui.org.ua/ribbon-menu.html
- https://en.wikipedia.org/wiki/React_(JavaScript_library)
- https://htmx.org/
- https://extensions.htmx.org/
- https://en.wikipedia.org/wiki/HATEOAS
- https://hypermedia.systems/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
- https://intercoolerjs.org/2016/01/18/rescuing-rest.html
- https://getbutterfly.com/click-instead-of-hover-a-css-only-clicky-menu
- https://stackoverflow.com/questions/11109362/how-can-i-change-a-css-hover-state-to-a-click-event
- https://codepen.io/mrwweb/pen/pXqKZO
- https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/
- https://www.w3schools.com/howto/howto_js_tabs.asp
- https://www.w3schools.com/howto/howto_css_subnav.asp
No comments:
Post a Comment