Clodelio C. Delfino's Blog

Most devel­op­ers are com­fort­able work­ing with the lead­ing frame­work to achieve dif­fer­ent func­tion­al­ity that uses javascript whether it’s a web 2.0 or mobile related projects; we have the ele­gance of Mootools, cool effects of Dojo, stan­dard look/feel using Yahoo User Interface(YUI) library and of course, every programmer/developer sweet­heart…jQuery!

Above men­tioned are just a few of them and check­ing Wikipedia alone…we still have sev­eral on the list that is worth eval­u­at­ing and add in our web devel­op­ment arse­nal, some are open source oth­ers are not. Yes­ter­day, I’ve stum­bled upon MIDORI cre­ated by Aycan Gulez which check­ing the exam­ples given; IMHO, it would surely be another frame­work that any devel­oper can use on their appli­ca­tion or project. Based on the intro­duc­tion from the site, below are some of the things that the frame­work can offer…

What is midori?
midori is an ultra-lightweight JavaScript frame­work that gets the job done with­out get­ting in your way.

• Use CSS selec­tors to quickly access match­ing ele­ments on a page: midori.get(‘div.serious’).apply(‘className += ” fun”’) anyone?
• Ajax with­out break­ing the back but­ton. Peo­ple don’t like to go back to the home­page after click­ing 30 links (“what do you mean they weren’t actu­ally links?!”), nor do they like bro­ken bookmarks.
• Auto com­plete. Thanks to social net­work­ing, every­one on the planet knows about a mil­lion peo­ple on aver­age now. So, make it easy for them to find the right “John” in your next-gen address book app.
• And more which check­ing the site is a must to know more on what MIDORI can offer!

After min­utes of read­ing the exam­ples, I’ve open up my Intype and do some basic codes to eval­u­ate the frame­work. Voila, after a few minutes…got a basic exam­ple which basi­cally access DOM ele­ment and it’s quite really easy! Just like the lead­ing frame­work that most devel­op­ers are already using, MIDORI had sev­eral func­tion­al­ity that is ready to use; DOM Manip­u­la­tion, FX effect, Auto­com­plete, AJAX..and more.

HTML:

<!-- somewhere in header -->
<link rel="stylesheet" href="reset-min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />

<!-- somewhere in body -->
<div id="container">
 <div id="el-example">"Use CSS selectors to quickly access matching elements on a page..."</div>
 <div id="el-trigger">
 Trigger: <input type="button" id="el-button" value="Run" />
 </div>
 <div id="el-output"></div>
</div>

CSS:

body {
 margin:0;
 padding:0;
 font-family:"Lucida Grande", Verdana, Arial, sans-serif;
 font-size: 12px;
}

a:link,
a:visited { text-decoration: none; color: #cd5500; }
a:hover { color: #147DB6; }

#container {
 margin-top: 50px;
 margin-left: 100px;
 margin-bottom: 50px;
 margin-right: 100px;
}

#el-example {
 padding: 5px;
 border: gray dotted 1px;
 color: white;
 background-color: black;
}

#el-trigger {
 padding-top: 10px;
 padding-left: 0;
 padding-bottom: 10px;
 border-bottom: black solid 3px;
}

#el-output {
 margin-top: 5px;
 padding-top: 20px;
 padding-left: 10px;
 padding-bottom: 20px;
 padding-right: 10px;
 border: orange solid 1px;
}

.el-demo {
 color: white;
 background-color: orange;
}

JS:

<script type="text/javascript">
 //<![CDATA[
 midori.addEventListener(window,'ready',function(e) {
 midori.addEventListener(midori.get("#el-button"),'click',function(e) {
 var oOutput = midori.get("#el-output");
 oOutput.innerHTML = "Welcome midorijs!";
 oOutput.className = 'el-demo';
 });
 });
 //]]>
 </script>

Source code can be down­loaded MIDORI Demo.

Some JS library achieve things in shorter line of codes with prob­a­bly better/faster imple­men­ta­tion but there’s no harm in try­ing so check­ing it out is def­i­nitely worth it. The only minus point on my very short eval­u­a­tion of the frame­work is that I can’t minify/pack the library and there seems to be no forum or basic sup­port at least within the site.