domFramework (dfw)
A framework that: Is global free. Is creating the objects out of the HTML document directly and from the ground up! Objects that are directly accessible where and whenever needed. Unlike the traditional way of creating a website, there aren't any use cases here for the; ❌ '*.querySelector', ❌'*.getElementsByClassName', ❌ '*.getElementById', STORY History: The History behind this framework is an other project I was working on and called moduleEditor. Within this project I make use of datasets a lot and at a point I was asking myself 'why is there not something like getElemsByDatasetName?', because with that, I would able to reduce the codebase a lot. Next Anyhow it kept me busy and I did some searches of how those dom methods are created. Those searches where educative and gave me some insights but I also realised that I better look for A way to create getElemsByDataset (getElemsByDatasetName is to long) with js myself. Creating 'getElemsByDataset' After a couple of failures, I succeded to created this js class and it's is exactly doing of what I had in mind 🙂 👉 Being able to get a group of elements and regardless of their tagName, with a single call! After With getElemsByDataset on the shelf, I first wanted to give my github page an update and using this class. But as an update is a bit of a job too, I began to think of something that is reusable. Born of 'domFramework' At first I named it as 'vanillaFramework', because that is what it is vanilla js. Then, and while taking the first steps I was also thinking about this 'is there a shorter name to think of?' This resulted in 'domFramework' and what covers the purpose better too! Development It's still in development but at a stage that it's worth to come out with it 🙂 Technical: ☛ Logical dir/file structure ☛ Small file sizes ☛ Object Orientated Programming ☛ modular ☛ Methodical and straight forward Features: ☛ Creating the objects out of the HTML document directly and from the ground up! ☛ Objects are directly accessible where and whenever needed. ☛ window.visualViewport based resizer. ☛ InfoPane to get basic information about devices and under an on/off flag. ☛ A bunch of custom elements. ☛ It's own style directory Todo: ☛ Updating the documentation. ☛ Creating a built-inn history handler. ☛ Creating a built-inn navigation handler. ☛ implementing my tooltipModule. ☛ Updating my demo site. ☛ Other? Finally: It's all vanilla brain here and no AI 😄! To Demo
This is a summary aggregated from Dev.to. Read the complete article on the original site:
Read full article at Dev.to