• Feb 27th HTML Includes

    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:

    1. add tests for recursive components to determine impact on performance
    2. try to optimize inclusion with fewer AJAX calls
    3. browser compatibility

    Demo:

    http://www.greggbowden.ca/code_library/HyperTextComponents/index.html

    On GitHub:

    https://github.com/greggbowden/HyperTextComponents

     


    by
  • Feb 17th Hello World

    Hi everyone… or no one…

    This is my blog, please be gentle.

    You can read more about me here


    by