tag:blogger.com,1999:blog-52403613552186987972024-03-06T00:39:58.327-05:00The Byte Shredders BlogAnonymoushttp://www.blogger.com/profile/12802386884113231629noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-5240361355218698797.post-11912734954255773802013-09-06T21:30:00.001-04:002013-09-06T22:24:27.239-04:00Shredder Tips : Mustache.js for Cleaner JavaScript<br />
<i>This post is the first in a series that I will be writing to share some of the techniques and tools we use at Byte Shredders. The intended audience of this series is software and web developers of all skill levels. I am always learning about new programming styles, tools, and shortcuts. I hope to share with the programming community some of the knowledge that I've gathered from reading other blogs and working with clients (not to mention looking at Stack Overflow!).</i><br />
<br />
Beautiful, easy to understand code - something every software craftsman strives for. The last few months, I've been focused on improving the readability of my JavaScript. Generating and displaying web page content after the page has first loaded can become quite messy. To solve this problem, I started looking into client side template systems. My favorite solution is mustache.js - named after the look of the curly brace syntax. I've used it in a few projects already, and I've been satisfied with the results.<br />
<br />
<a name='more'></a><br />
To illustrate how mustache.js can help, I prepared two working examples that render some JSON data in different ways. The first section of code below shows one method I have used in the past. It uses jQuery to iterate over each item in the OrderLines array, and dynamically create HTML elements. After each row is created, it is added to the end of the existing table. <br />
<br />
<pre class="brush:jscript;">var orderData = {
OrderNumber: "1",
CustomerName: "Cat Traders Inc.",
OrderLines: [
{ LineNumber: 1, Item: "American Shorthair", UnitPrice: 149.99, URL: "#"},
{ LineNumber: 2, Item: "Persian", UnitPrice: 2499.99, URL: "#"},
{ LineNumber: 3, Item: "Scottish Fold", UnitPrice: 899.99, URL: "#"},
{ LineNumber: 4, Item: "Bombay", UnitPrice: 399.99, URL: "#"}
]
};
$.each(orderData.OrderLines, function(i, orderline) {
var itemRow = $("<tr/>");
$("<td/>").text(orderline.LineNumber).appendTo(itemRow);
itemlink = $("<a/>", { href: orderline.URL, text: orderline.Item});
$("<td/>").append(itemlink).appendTo(itemRow)
$("<td/>").text(orderline.UnitPrice).appendTo(itemRow);
$("#orderTable").append(itemRow)
});
</pre>
<pre class="brush:html;"><table id="orderTable">
<tr>
<th>Line</th>
<th>Item</th>
<th>Price</th>
</tr>
</table>
</pre>
<a href="http://jsfiddle.net/kgUkz/">Live example - http://jsfiddle.net/kgUkz/</a><br />
<br />
As you add more tags and attributes using this method, the JS becomes increasingly cryptic. Now take a look at the mustache style below. All of the work is done by three lines of JavaScript. The nice thing about this method is that you can look at the template and immediately have an idea of the output's HTML structure. <br />
<br />
The most beneficial reason for using mustache is the ease of changing the templates. When a client required more data on their site, I didn't have to look back at my code and figure out how the the section was being generated. After modifying the web service to return another field from the database, displaying it was as simple as adding an HTML table column. <br />
<br />
<pre class="brush:jscript;">var orderData = {
OrderNumber: "1",
CustomerName: "Cat Traders Inc.",
OrderLines: [
{ LineNumber: 1, Item: "American Shorthair", UnitPrice: 149.99, URL: "#"},
{ LineNumber: 2, Item: "Persian", UnitPrice: 2499.99, URL: "#"},
{ LineNumber: 3, Item: "Scottish Fold", UnitPrice: 899.99, URL: "#"},
{ LineNumber: 4, Item: "Bombay", UnitPrice: 399.99, URL: "#"}
]
};
//Use jQuery to load the template
var orderTemplate = $('#ordertable').html();
//Use mustache to populate the template with data
var html = Mustache.to_html(orderTemplate, orderData);
//Use jQuery to replace the contents of #orders with our html output
$('#orders').html(html);
</pre>
<pre class="brush:html;"><script id="ordertable" type="text/template">
<h3>#{{OrderNumber}} - {{CustomerName}}</h3>
<table>
<tr>
<th>Line</th>
<th>Item</th>
<th>Price</th>
</tr>
{{#OrderLines}}
<tr>
<td>{{LineNumber}}</td>
<td><a href="{{URL}}">{{Item}}</a></td>
<td>${{UnitPrice}}</td>
</tr>
{{/OrderLines}}
</table>
</script>
<h1>Open Orders:</h1>
<div id="orders"></div>
</pre>
<a href="http://jsfiddle.net/45rHt/">Live example - http://jsfiddle.net/45rHt/</a><br />
<br />
Now that you've seen it in action, I'll explain the key features used here. Any JavaScript variables in the object you pass to mustache are accessible via the double curly braces notation - {{VariableName}}. The main benefit of mustache is when you're looping through an array, and don't have to write JS code for it. You can start a section that is repeated for each item in an array with {{#ArrayName}} and end it with {{/ArrayName}}. Inside the array block, you can directly access each array item's variables by its name in double curly braces. <br />
<br />
What happens if the object you pass in is an array? Mustache recognizes a period as a reference to the current item. Using {{#.}} and {{/.}} will let you iterate through each item in the array. Likewise, if the items in the array are primitive data types instead of named values, you can access them with {{.}}.<br />
<br />
<pre class="brush:jscript;">var html = Mustache.to_html("<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>", [0,1,2,3]);
$('#example').html(html);
</pre>
<a href="http://jsfiddle.net/FHCzF/">Live example - http://jsfiddle.net/FHCzF/</a><br />
<br />
Another thing to note is that the template doesn't have to come from a script tag, as you can see above. The text/template script is just my personal preference to separate it from other content in the file. Mustache's function just expects a string, so some other ways you can load the template are from an inline string, a web service call, or an external file. There are plenty of other features in mustache, so check out the project's GitHub if you think it can help you out.<br />
<br />
<br />
Feel free to leave a comment if you have a different way of doing things that you want to share, or if you think my cat prices are wildly inaccurate. The link to get mustache is below. If you found this interesting, take a look at the Handlebars and Underscore.<br />
<ul>
<li>Mustache - <a href="https://github.com/janl/mustache.js/">https://github.com/janl/mustache.js/</a></li>
<li>Handlebars - <a href="http://handlebarsjs.com/">http://handlebarsjs.com/</a> - Similar to mustache with more features</li>
<li>Underscore - <a href="http://underscorejs.org/">http://underscorejs.org</a> - Includes similar template engine </li>
</ul>
<ul>
</ul>
<br />
Remember to follow us on <a href="http://www.facebook.com/byteshredders">Facebook </a>to stay connected with our latest tips!<br />
<br />sslopekhttp://www.blogger.com/profile/10689245343892809566noreply@blogger.com0tag:blogger.com,1999:blog-5240361355218698797.post-85901824915194595942013-07-23T12:27:00.001-04:002013-09-06T21:33:12.700-04:00Cleveland Givecamp 2013What a great weekend! We had a great time at <a href="http://clevelandgivecamp.org/" target="_blank">Cleveland GiveCamp</a> on the <a href="http://www.leandog.com/" target="_blank">LeanDog</a> Boat as we do what we do best. All 18 teams completed their projects, and every non-profit walked away with a smile on their face. I can't think of any better way to spend our talents than what we helped pull off this weekend.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijr3mkGtoBEUDWCFcXk-v_jsQGPs0j4FZZgmai-aYBLTwuXsHQvpmR2kU3cYjaI9yBVf675Z_nUnvq_WVi_zLxh0qx9ZXj4VdvPLFtDE0ZFU6gE5Ir9X5PQwzvXA3Qe3caK9dIePXTv64/s1600/IMAG0118.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijr3mkGtoBEUDWCFcXk-v_jsQGPs0j4FZZgmai-aYBLTwuXsHQvpmR2kU3cYjaI9yBVf675Z_nUnvq_WVi_zLxh0qx9ZXj4VdvPLFtDE0ZFU6gE5Ir9X5PQwzvXA3Qe3caK9dIePXTv64/s1600/IMAG0118.jpg" width="320" /></a></div>
On day one, we were assigned to teams and informed on who we were going to be helping. I had the opportunity of helping <a href="http://www.heightsarts.org/" target="_blank">Heights Arts</a> design a fresh new site using WordPress and multiple plug-ins to make it easy for them to maintain. Meanwhile, Steven was on a larger team building a mobile app for <a href="http://www.ncch.org/" target="_blank">North Coast Community Homes</a>. After we met with our groups, the project managers organized us and gave us all the tasks that needed to be completed. Night one was finalized with a nice fireworks show, followed by a pretty fierce storm. The Byte Shredders tent held up to it, though, and we made it through the night.<br />
<br />
<a name='more'></a><br /><br />
Day two began while it was still raining from the storm, and I immediately rushed to the coffee station before I met with my group. It seemed like we were pretty far ahead, so it made for a pretty relaxing afternoon to try and put the final pieces in place. My team worked well together to make sure everything got done. We had one minor hitch with some of the WordPress plug-ins that was solved fairly quickly when we decided to pitch a PHP plugin that allowed us to code inside of the text-editor. Turns out plug-ins really don't like other plug-ins.<br />
<br />
Steven's team also shot ahead and were able to make time to make additional improvements to NCCH's site. After that, we turned on 'shred' mode, staying up until 5:00 AM on night 2 offering our help to other teams that were biting their nails to get their project finished. Needless to say, caffeine was an invaluable resource.<br />
<br />
On Sunday, we woke up around 8:30 to go meet with our teams. We were very tired but since we were so far ahead, all my team needed to do was pretty things up and put together some documentation. I created the backup plan for Heights Arts site and handed the backup to the GiveCamp organizers. Steven's team cleaned up bugs and finalized a few features before packing up NCCH's site. They put their source up on Bitbucket so they had source control going forward. We then headed over to the Burke Lakefront Airport to view the results of everyone's hard work over the weekend.<br />
<br />
Everyone did a great job, and it all seemed to go without a hitch. Our teams were full of fun and interesting people, and we were fed very well all weekend. It all made for an awesome weekend we will never forget. Thank you Cleveland GiveCamp organizers, along with all of the sponsors for giving us such an opportunity to put our talents to great use.<br />
<br />
GiveCamp Sponsors:<br />
<ul>
<li><a href="http://www.arrasgroup.com/" target="_blank">Arras Keathley Agency </a></li>
<li><a href="http://www.burkeairport.com/" target="_blank">Burke Lakefront Airport</a> </li>
<li><a href="https://www.explorys.com/" target="_blank">Explorys</a></li>
<li><a href="http://www.hyland.com/" target="_blank">Hyland Software </a></li>
<li><a href="http://www.clevelandieee.org/" target="_blank">IEEE Cleveland Section</a> </li>
<li><a href="http://www.jumpstartinc.org/" target="_blank">JumpStart</a></li>
<li><a href="https://www.key.com/personal/index.jsp?key=com" target="_blank">KeyBank</a></li>
<li><a href="http://www.leandog.com/" target="_blank">LeanDog</a></li>
<li><a href="http://www.rosetta.com/" target="_blank">Rosetta</a></li>
<li><a href="http://www.coffeeandcode.com/" target="_blank">Coffee and Code</a></li>
<li><a href="http://www.onshoremomentum.com/" target="_blank">Onshore Momentum</a></li>
<li><a href="http://bizdom.com/" target="_blank">Bizdom</a></li>
<li><a href="http://www.bluebridgenetworks.com/" target="_blank">BlueBridge Networks, LLC</a></li>
<li><a href="http://www.dxysolutions.com/" target="_blank">DXY</a></li>
<li><a href="http://www.pantek.com/" target="_blank">Pantek</a></li>
</ul>
<br />Anonymoushttp://www.blogger.com/profile/12802386884113231629noreply@blogger.com0LeanDog41.51071 -81.6915315.988675500000003 -123.000124 67.0327445 -40.382936tag:blogger.com,1999:blog-5240361355218698797.post-56761188452022593302013-05-07T23:01:00.001-04:002013-09-06T21:33:43.075-04:00Our First Post: Why Agile?<br />
<a href="http://www.byteshredders.com/" target="_blank">Byte Shredders</a> would like to welcome you to our blog and thank you for wanting to know more about us. We will use this blog to help keep you informed on what we are doing, give you a glimpse of how we operate, and see some of our work. With that said, I believe our first post should discuss the Agile methodology and how we are using it.<br />
<div>
<br />
<a name='more'></a><br /></div>
<div>
Basically, Agile software development is a way to manage the production of software within a team so that deliverables are produced swiftly. The <a href="http://www.agilemanifesto.org/" target="_blank">Agile Manifesto</a> has four important values:<br />
<br />
<ul>
<li>Individuals and interactions over processes and tools</li>
<li>Working software over comprehensive documentation</li>
<li>Customer collaboration over contract negotiation</li>
<li>Responding to change over following a plan</li>
</ul>
<br /></div>
<div>
<span style="line-height: 22px;">Not to say the values on the right are not important, but typically it is more important to follow the values on the left. For example, a customer will not want to read through a 200 page document on something that doesn't work. They would rather have the software work than have to read a manual at all! </span></div>
<div>
<span style="line-height: 22px;"><br /></span></div>
<div>
<span style="line-height: 22px;">There are also 12 key principles to follow:</span></div>
<div>
<span style="line-height: 22px;"><br /></span></div>
<div>
<div style="text-align: -webkit-center;">
</div>
<div>
<ul>
<li><span style="font-family: inherit;">Our highest priority is to satisfy the customer </span><span style="font-family: inherit;">through early and continuous delivery </span><span style="font-family: inherit;">of valuable software.</span></li>
<li><span style="font-family: inherit;">Welcome changing requirements, even late in</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">development. Agile processes harness change for</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">the customer's competitive advantage.</span></li>
<li><span style="font-family: inherit;">Deliver working software frequently, from a</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">couple of weeks to a couple of months, with a</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">preference to the shorter timescale.</span></li>
<li><span style="font-family: inherit;">Business people and developers must work</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">together daily throughout the project.</span></li>
<li><span style="font-family: inherit;">Build projects around motivated individuals.</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">Give them the environment and support they need,</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">and trust them to get the job done.</span></li>
<li><span style="font-family: inherit;">The most efficient and effective method of</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">conveying information to and within a development</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">team is face-to-face conversation.</span></li>
<li><span style="font-family: inherit;">Working software is the primary measure of progress. </span></li>
<li><span style="font-family: inherit;">Agile processes promote sustainable development.</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">The sponsors, developers, and users should be able</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">to maintain a constant pace indefinitely.</span></li>
<li><span style="font-family: inherit;">Continuous attention to technical excellence</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">and good design enhances agility.</span></li>
<li><span style="font-family: inherit;">Simplicity--the art of maximizing the amount</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">of work not done--is essential.</span></li>
<li><span style="font-family: inherit;">The best architectures, requirements, and designs</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">emerge from self-organizing teams.</span></li>
<li><span style="font-family: inherit;">At regular intervals, the team reflects on how</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">to become more effective, then tunes and adjusts</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">its behavior accordingly. </span></li>
</ul>
<div>
<br />
So what are we doing with all this? We've been using the Scrum methodology to help us follow these values and principles. We put together a backlog of user stories or tasks, prioritize them, assign them, and then perform a sprint to get the most important tasks done. Along the sprint we discuss daily what we've gotten accomplished, what we plan to accomplish that day, and discuss any hurdles we may be having. Once the sprint is complete, we have a deliverable! The customer can then see the progress of their project and inform of us any changes they feel needs to be made. We believe that's a lot better than just simply dropping a giant solution on them for them to sort through months later, only to have to change things around so that it fits (all while the customer waits and waits to get a usable product). </div>
<div>
<br /></div>
<div>
Using these methods, we can quickly 'shred' through projects and get them delivered. </div>
</div>
</div>
<div>
<br /></div>
<div>
<b>Other Resources:</b></div>
<div>
Wiki - <a href="http://en.wikipedia.org/wiki/Agile_software_development" target="_blank">http://en.wikipedia.org/wiki/Agile_software_development</a></div>
<div>
Agile Alliance - <a href="http://www.agilealliance.org/" target="_blank">http://www.agilealliance.org/</a></div>
<div>
All About Agile - <a href="http://www.allaboutagile.com/" target="_blank">http://www.allaboutagile.com/</a></div>
<div>
Scrum Alliance - <a href="http://www.scrumalliance.org/" target="_blank">http://www.scrumalliance.org/</a></div>
Anonymoushttp://www.blogger.com/profile/12802386884113231629noreply@blogger.com0