I’m putting on my developer hat today.
One of the biggest problems I’ve run into in building browser based applications, is the inability to use includes in HTML.
As a result I’ve started working on a component based HTML includes framework for browser based applications which can extend into the mobile app world. I call them HyperTextComponents.
Example: (note the bolded tags)
<!doctype html> <html> <head> <meta http-equiv="PRAGMA" content="NO-CACHE"> <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"> <meta http-equiv="EXPIRES" content="Tue, 31 Jan 2012 12:00:01 GMT"> <title>Hyper Text Components</title> <link type="text/css" rel="stylesheet" href="css/body.css"/> </head> <body> <div id="page"> <component id="header" htmlsrc="components/header.html" csssrc="css/header.css"></component> <component id="nav" htmlsrc="components/nav.html" csssrc="css/nav.css" jssrc="js/nav.js"></component> <div> <component id="content" htmlsrc="components/content.html" csssrc="css/content.css" cssclass="content"></component> <component id="content1" htmlsrc="components/content1.html" cssclass="subcontent"></component> </div> <component id="footer" htmlsrc="components/footer.html" csssrc="css/footer.css"></component> </div> <div id="loading"> <div id="loadingani">loading...</div> </div> </body> <script type="text/javascript" src="js/HyperTextComponents.js"></script> </html>
Yes, I realize that the component tag does not comply with HTML standards… but we have to start somewhere.
Next steps for the project:
- add tests for recursive components to determine impact on performance
- try to optimize inclusion with fewer AJAX calls
- browser compatibility
Demo:
https://www.greggbowden.ca/code_library/HyperTextComponents/index.html
On GitHub:
https://github.com/greggbowden/HyperTextComponents