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 😄!
Top comments (0)