LavaBlast Software Blog

Help your franchise business get to the next level.
AddThis Feed Button

New Grant for Canadian Franchises to Adopt Tech

clock November 15, 2011 11:18 by author JKealey

(From left to right) Jason Kealey (President, LavaBlast Software), The Honourable Christian Paradis (Minister of Industry) Yesterday, the Minister of Industry announced a new grant pilot program (DTAPP) offering up to $99,999 in financial support to Canadian small- and medium-sized enterprises (SMEs) to facilitate the adoption of digital technologies. The announcement featured FranchiseBlast as an example of such a digital technology and was made inside one of the Boomerang Kids stores, our newest franchise client (see photo).

This pilot program is great news for Canadian franchises as it includes the adoption of business systems (franchise management, customer/work order management, inventory management, etc.). In the context of a franchise, these are often customized systems ensuring the uniformity of their proprietary business processes across all franchisees. Off-the-shelf hardware and software are not covered by this grant, but the following are:

  • Internal labour costs: franchisor’s time spent elaborating the system
  • Contractors: technology firm helping the franchisor adopt the technology
  • Travel & Training
  • Hiring of recent college graduates as a part of the adoption process

The new grant program is managed by NRC-IRAP. As with all NRC-IRAP grants, the process starts with the franchisor developing a relationship with an Industrial Technology Advisor (ITA). Over 240 ITAs, located all over Canada, will work with you to determine the best course of action for your business, whether is be via the new Digital Technology Adoption Pilot Program (DTAPP) or one of the numerous existing grant program­s.

As our specialty is creating franchise-specific software solutions, we’ve gone through the process in the past. Our team can work with both you and your ITA to establish the scope and requirements for your project.

For more information about DTAPP, please visit this site and call toll-free 1-855-453-3940 to be assigned an ITA in your area. 



LavaBlast and Boomerang Kids: When helping local families meets the Cloud

clock November 14, 2011 20:17 by author JKealey

(From left to right): Jason Kealey (President LavaBlast Software Inc.), Honourable Christian Paradis (Minister of Industry), Bogdan Ciobanu (Director General NRC-IRAP), Lynne Plante (Directrice NRC-IRAP), Heather Meek (co-owner, Boomerang Kids Consignment Shops) LavaBlast, a leading provider of cloud-based franchise management solutions, announced today the deployment of its flagship product, FranchiseBlast, to the first of four Boomerang Kids locations. This state of the art software solution enables Boomerang Kids to grow their consignment franchise nationwide while allowing local families to shop smarter.

"Using the FranchiseBlast system will allow employees to focus more on helping local families," said Heather Meek, owner of Boomerang Kids. "We are expanding our franchise throughout Canada and we want to ensure the success of our current and future franchisees. FranchiseBlast will allow us to offer a complete easy-to-use system that helps store owners, employees and their customers. And now, I can even manage my business on my iPad!"

The FranchiseBlast deployment consists of an integrated suite of local and cloud-based tools that allow Boomerang Kids to automate the management recipes they’ve perfected throughout the years and replicate them in a franchise environment. FranchiseBlast will boost Boomerang Kids’ efficiency and customer service with:

  • Point of Sale (POS) stations to allow employees manage and sell all items under consignment.
  • In-store interactive kiosks and web-based tools to making it possible for parents to review their account and item statuses
  • A cloud-based franchise management solution giving both franchisees and franchisors immediate insight into the franchise’s operations.

"We are excited to be powering the expansion of a local franchise. Boomerang Kids has a solid management team and now has the tools to support its upcoming rapid growth." said Jason Kealey, President of LavaBlast. "This collaboration strengthens our position in the Franchise Management market and has allowed us to bring on new team members and scale up our operations."

image

About Boomerang Kids:

At Boomerang Kids, families can help the planet and their wallet through reuse and recycling of kids clothing and equipment. Parents bring the items into the store and Boomerang Kids will take care of verifying quality, selling and, best of all, sharing profits. The concept is extremely popular and independent of the economic climate. From their four initial locations in the Ottawa region, Boomerang Kids is now expanding Canada-wide via franchising.

image

About LavaBlast Software Inc.:

LavaBlast produces state of the art software solutions for the franchise industry and has played an integral part in the growth of numerous franchises, both in Canada and globally. By migrating to FranchiseBlast, franchisors reap the benefits of a turn-key software solution for their franchisees and LavaBlast’s deep software engineering skills to adapt their franchise in a rapidly changing technological environment.

image

About our flagship product, FranchiseBlast:

FranchiseBlast empowers you to run a successful franchise business with easy-to-use operational software. Manage day-to-day issues with franchisees, see everything happening in real-time and increase the level of control you have over your franchise business.

Download this press release (PDF format).



LavaBlast POS v4.0.0

clock September 6, 2011 13:49 by author JKealey

We’re just about to release the version 4.0.0 of our franchise point of sale system. One of the most noteworthy change is the fact we’ve given the look & feel a major overhaul, thanks to jQuery Mobile which we’ve blogged about previously. We thought we’d take a minute to share with you what makes it so special!

First off, I’ve recorded a short video featuring a variation of our franchise POS for the Teddy Mountain franchise. Teddy Mountain provides the stuff your own teddy bear experience to children worldwide and have been using our POS since 2006.

 

As you’ll see, I focus on a few of our differentiators in the point of sale space. We’re not a point of sale company and our POS is not conventional: we’re a franchise software company and we’ve created the best point of sale system for a franchise environment.

We bake in a franchise’s unique business processes into the point of sale, making it very powerful while still extremely easy to use. By integrating our point of sale with FranchiseBlast, we’ve also eliminated dozens of standardization/uniformity issues which face small retail chains or franchises.

Furthermore, we’ve given additional focus to cross-browser compatibility in this release as our POS is not only used regular POS hardware (in brick & mortar stores) but also on the Apple iPad for back office operations an for managing the warehouses that feed our franchise e-commerce websites.  We’re definitely excited by the potential tablets have for both retail and service-based franchises! Expect more news from us in this space soon!

In the meantime, if you know of small chains / new franchises which want to explore disruptive technologies in their locations, we hope you’ll point them in our direction!



Gotcha: Reporting Services Viewer bugs on Google Chrome

clock June 28, 2011 11:09 by author JKealey

We include the ASP.NET ReportViewer which comes with Microsoft SQL Reporting Services inside some of our applications. Simply put, it generates a web-based version of the report and can easily be integrated within a website. However, the ReportViewer has been plagued with numerous cross-browser compatibility bugs over the years. Some have been fixed, while others remain. Recently, we’ve had the following issues:

  • On Google Chrome, each button in the toolbar takes a separate line. You thus end up with 5 toolbars instead of one, taking up all the space.
  • On Google Chrome, the width & height were slightly off (50 to 100 pixels), causing scrollbars to appear.
    A quick search revealed some sample code for similar issues, but none of them fully resolved our issues. Mainly, we require AsyncRendering=”true” and most of the fixes didn’t work in this context. Here’s what we ended up rolling with (uses jQuery and Microsoft AJAX).
    ~/js/fixReportViewer.js
       1:  // container is either the ReportViewer control itself, or a div containing it. 
       2:  function fixReportingServices(container) {
       3:      if ($.browser.safari) { // toolbars appeared on separate lines. 
       4:          $('#' + container + ' table').each(function (i, item) {
       5:              if ($(item).attr('id') && $(item).attr('id').match(/fixedTable$/) != null)
       6:                  $(item).css('display', 'table');
       7:              else
       8:                  $(item).css('display', 'inline-block');
       9:          });
      10:      }
      11:  }
      12:  // needed when AsyncEnabled=true. 
      13:  Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () { fixReportingServices('rpt-container'); });
      14:  /*$(document).ready(function () { fixReportingServices('rpt-container');});*/
    example .aspx
   1:  <div style="background-color: White; width: 950px" id="rpt-container">
   2:      <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Times New Roman"
   3:          Font-Size="8pt" Height="700px" Width="950px" ShowExportControls="true" ShowPrintButton="false" 
   4:          ShowRefreshButton="false" ShowZoomControl="false" SkinID="" AsyncRendering="true"
   5:          ShowBackButton="false">
   6:          <LocalReport ReportPath="contract.rdlc"
   7:              DisplayName="Contract">
   8:          </LocalReport>
   9:      </rsweb:ReportViewer>
  10:  </div>
  11:  <asp:ScriptManagerProxy ID="proxy" runat="server">
  12:      <Scripts>
  13:          <asp:ScriptReference Path="~/js/fixReportViewer.js" />
  14:      </Scripts>
  15:  </asp:ScriptManagerProxy>

The fixes we found on other websites (setting the display to inline-block on the included tables) only worked for the first load – as soon as the report changed due to AsyncRendering=”true”, the toolbars were broken again. This was fixed by replacing jQuery’s ready function with Microsoft ASP.NET Ajax’s PageLoaded function.

We also noticed that these fixes also broke down our width & height. We pinpointed the issue to the generated HTML table with the id ending with fixedTable, which needed to be left as display table instead of inline-block. We thus adapted the JavaScript.

The HTML wraps the ReportViewer with a div, mostly for convenience (to avoid peppering our code with <%= ReportViewer1.ClientID %>). Furthermore, if my memory serves me well, we set the background-color manually because some browsers made the ReportViewer transparent.

Hope this helps! If you find more elegant ways of doing this, or know of more gotchas, please let us know!



Using Microsoft POS for .NET in 2011

clock June 6, 2011 08:41 by author JKealey

Five years ago, we decided to utilize Microsoft’s Point Of Service for .NET (POS for .NET) in our point of sale (POS) to integrate with the various peripherals used by POS systems. Simply put, POS for .NET enables developers to utilize receipt printers, cash drawers, barcode scanners, magnetic stripe readers (MSR), line displays (and many other peripherals) within their .NET applications. Back then, the .NET framework was at version 2.0. Obviously, many things have changed since then with the advent of .NET 3.0, 3.5 and, more recently, 4.0. However, the latest version of POS for .NET’s is v1.12 and it was released in 2008.

Being forward-thinking as we are, we structured our point of sale as a web application from day one, to enable future deployment scenarios (being browser-based means we can easily use our point of sale on the iPad or any other hot hardware platform) and code-reuse within our e-commerce application and FranchiseBlast. However, this made it a bit harder on us to integrate with the peripherals as we weren’t using them in the traditional context of a desktop application (especially access Windows printers from a server-side web application). However, we solved those issues many years ago and have continued to evolve the solution ever since.

Fast forward to 2011: POS for .NET has not been refreshed in three years, we’ve moved to 64-bit machines and .NET 4.0. This blog post is a collection of tips & tricks for issues commonly faced by .NET developers working with POS for .NET in 2011.

Common Control Objects – don’t forget about them!

This is just a reminder, as this was true back in 2006 too. You’d typically expect to be able to install the peripheral’s driver and then utilize it within your .NET application. However, you also need to install intermediary Common Control Objects.  I always end up downloading the CCOs from here.  I always forget the proper order and sometimes run into trouble because of this and end up having to uninstall and reinstall half a dozen times until it works (… pleasant…). I believe this is the installation order I use (you may need to reboot between each step).

  1. Install Epson OPOS ADK
  2. Install other drivers (scanners, etc.)
  3. Install the Common Control Objects
  4. Define logical device names (LDN) using Epson OPOS
  5. Install POS for .NET 

 

POS for .NET doesn’t work in 64-bit

Long story short, due to the legacy hardware it supports, POS for .NET only works in 32-bit. If you’re running an app on a 64-bit machine, it will fail with a cryptic error message or will simply be unable to find your peripherals. Example:

System.Runtime.InteropServices.COMException (0x80040154): Retrieving the COM class factory for component with CLSID {CCB90102-B81E-11D2-AB74-0040054C3719} failed due to the following error: 80040154 Class not registered (Exception from HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG)).

You can still use the peripherals on 64-bit operating systems, but you will need to compile your desktop application as 32-bit (Right click on your project –> Build –> Platform target: x86). You even need to do this with the example application that comes with POS for .NET (in C:\Program Files (x86)\Microsoft Point Of Service\SDK\Samples\Sample Application) if you want to use it.

You’ll probably run into the same issues with all the .NET test applications supplied by the device manufacturers. Unless you can manage to find an updated sample, you’ll have to work your magic with a decompiler. In addition to probably being illegal, it is a pain and a half. Therefore, you’re better off using the test application that comes with POS for .NET.

As for web applications, you need to force IIS to run your application in a 32-bit application pool.

POS for .NET doesn’t work in .NET 4.0

Another bad surprise is migrating your application to .NET 4.0 and then realizing the POS hardware stops working. Long story short, you’ll get this error:

This method explicitly uses CAS policy, which has been obsoleted by the .NET Framework. In order to enable CAS policy for compatibility reasons, please use the NetFx40_LegacySecurityPolicy configuration switch. Please see http://go.microsoft.com/fwlink/?LinkID=155570

The error message is fairly self-explanatory. Microsoft stopped supporting '”Code Access Security”, which is internally used by POS for .NET. You can either turn on a configuration option that re-enables the legacy CAS model or wait for Microsoft to release a new version of POS for .NET.  We’ve been told not to hold our breath, so the configuration option is the preferred flag. 

If you’re creating a desktop application, the solution is in the error message – more details here.  Add this to your app.config:

<configuration>
   <runtime>
      <NetFx40_LegacySecurityPolicy enabled="true"/>
   </runtime>
</configuration>

 

If you’re creating a web application, the flag is a bit different. Add this to your web.config:

<configuration>
    <system.web>
      <trust legacyCasModel="true"/>
   </system.web>
</configuration>

POS for .NET doesn’t work with ASP.NET MVC / dynamic data/operations

The above flag will cause your legacy code to run properly on .NET 4.0 but it does have a side-effect. You will not be able to use some of the newer .NET framework features such as the dynamic keyword. Not only can you not use it explicitly within your own code, but ASP.NET MVC 3 uses it internally within the ViewBag.

Dynamic operations can only be performed in homogenous AppDomain.

Thus, you have to choose between POS for .NET or ASP.NET MVC 3, unless you load up your POS objects in another AppDomain. Here’s some sample code to help you do that.

You need to be able to create another AppDomain and specify that this AppDomain should use the NetFx40_LegacySecurityPolicy option, even if your current AppDomain doesn’t have this flag enabled.

   1:  var curr = AppDomain.CurrentDomain.SetupInformation;
   2:  var info = new AppDomainSetup()
   3:  {
   4:      ApplicationBase = curr.ApplicationBase,
   5:      LoaderOptimization = curr.LoaderOptimization,
   6:      ConfigurationFile = curr.ConfigurationFile,
   7:  };
   8:  info.SetCompatibilitySwitches(new[] { "NetFx40_LegacySecurityPolicy" });
   9:   
  10:  return AppDomain.CreateDomain("POS Hardware AppDomain", null , info);

 

You can then use this AppDomain to create your POS peripherals. All our peripherals extend our own custom PosHardware base class with a few standard methods such as FindAndOpenDevice(), so we use the following code. For testing purposes, we created a configuration option (IsHardwareLibInSameAppDomain) to toggle between loading in the current AppDomain versus a separate one.

   1:  private T Build<T>(string id) where T : PosHardware, new()
   2:  {
   3:      T hardware = null;
   4:      if (IsHardwareLibInSameAppDomain)
   5:          hardware = new T();
   6:      else
   7:          hardware = (T)OtherAppDomain.CreateInstanceFromAndUnwrap(Assembly.GetAssembly(typeof(T)).Location, typeof(T).FullName);
   8:   
   9:      if (!string.IsNullOrEmpty(id))
  10:          hardware.DeviceName = id;
  11:      hardware.FindAndOpenDevice();
  12:      return hardware;
  13:  }

 

Also, don’t forget to mark your classes as Serializable and MarshalByRefObject.

   1:  [Serializable]
   2:  public abstract class PosHardware : MarshalByRefObject

 

Working with objects in other AppDomains is a pain.  Any object that you pass between the two app domains (such as parameters to functions or return values) must be marked as Serializable and extend MarshalByRefObject if you wish to avoid surprises.  If you marshal by value instead, you will be working on read-only copies of (which may or may not be desirable, depending on your context.)

Conclusion

It only took three years without a new release before POS for .NET started being a pain to work with – unless you stick with past technologies. With the advice provided here, however, you should be able to move forward without issue. Did you discover any other gotchas with POS for .NET?


Gotcha: iPad versus ASP.NET

clock May 29, 2011 14:19 by author JKealey

Your web app looks awesome on the iPad, until…

FranchiseBlast: Franchise Intranet on iPad You decide to save it to your home screen.

If you’re doing this with a web application you’ve developed, you probably want to make it appear a bit more like a native app,  so you’ll add two meta tags to make the experience nicer (add an app icon and remove the navigation bar). Remember: Safari caches these tags when creating the shortcut, so you will need to delete/recreate the shortcut to force it to refresh.

Everything will look fine, until you reload the web app on some other occasion: ASP.NET Ajax is now completely broken and many of your styles are missing. Simply put, an application that worked fine when you shut down your iPad minutes ago will be completely unusable. No amount of refreshing will solve the issue. Clearing Safari’s cache and using it outside of the home screen icon is the only workaround.

Gotcha: Safari uses different HTTP User-Agent strings depending on context!

The iPad (and iPhone/iPod Touch) don’t use the same HTTP User-Agent string when a website is accessed normally via the Safari application versus a webpage that was saved to the home screen (which still uses Safar internally). Here’s an example:

  • Normal Safari: Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2
  • Website as app: Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8J2
    ASP.NET doesn’t recognize the latter as being Safari – it recognizes it as a generic browser with no capabilities. As an example: Supports JavaScript? Nope.
    Add this hack to your base page to fix it. It makes ASP.NET think that anything based on AppleWebkit is a newer browser – a much better default setting (for most of us) than assuming the browser was created back in 1994.
       1:     protected void Page_PreInit(object sender, EventArgs e)
       2:      {
       3:          if (Request.UserAgent != null && Request.UserAgent.IndexOf("AppleWebKit", StringComparison.CurrentCultureIgnoreCase) > -1)
       4:          {
       5:              this.ClientTarget = "uplevel";
       6:          }
       7:      }

The long answer

On and off over the course of a month, I spent dozens of hours investigating this issue. In the end, the fix is trivial and updated *.browser files will probably be produced by Microsoft over the next months/years. However, I did learn a lot about how to debug a web-app on the iPad in the process, and thought I’d share a few lessons learned. I’ve kept them purposefully brief as you can easily find detailed answers on Google or StackOverflow.

Enable Safari’s Developer Debug Console

That’s how I figured out ASP.NET AJAX wasn’t loading properly. Was getting JavaScript errors that you normally get when ASP.NET Ajax is not properly configured in the web.config file.

  • On the iPad: Settings –> Safari –> Developer –> Debug Console (on)

Install Firebug Lite on your iPad

I frequently use Firebug on my desktop computer to analyse web pages. The lite version on the iPad helped me review the HTML/JavaScript in greater detail. Install this bookmarklet (found it painful to do) then install the FireBug Lite bookmarklet. More info here.

Setup an HTTP Proxy

This helped me get in-depth information about exactly what HTML/JavaScript was being served in response to which HTTP Headers. That’s how I realized certain scripts were not being included when the User-Agent changed.

  • As I develop on a Windows machine, I made it run through Fiddler on my desktop. Other options found here.
  • In Fiddler, Tools > Fiddler Options > Connections –> Allow Remote Computers To Connect. Restart Fiddler. (Not working? Check Windows Firewall.)
  • On the iPad: Settings –> Wi-Fi –> Click on the right arrow for your connection –> HTTP Proxy –> Manual –> Set Server and Port. 

Other limitations worth knowing about

As everyone knows, Flash doesn’t work on the iPad/iPhone/iPod. It doesn’t come as a surprise to use that we have to eliminate it from our app (not a big detail for us).

However, one gotcha that had not come to mind initially is that certain JavaScript functionality such as click&drag or drag&drop does not work on the iPad given the differences in gestures between a conventional computer and a tablet. That code needs to be rewritten.

Did you experience any issues you’d like to share?



Re-skin your existing web app using jQuery Mobile

clock May 24, 2011 15:44 by author EtienneT

IMG_3337Recently, for a new franchise client of ours, we had to add some new features to our web-based point of sale system.   This piece of software makes extensive use of touch screen functionality; we need to think about this when we design our UI.  The interface must be optimized to allow cashiers to perform their operations effectively and intuitively with a touch screen.  Our application isn’t traditionally used via a multi-touch interface like the iPhone or iPad; rather, operators use a traditional touch screen. In this project, we had to adapt existing pages and create completely new modules.

In the past, we had played with jQuery Mobile and we were really impressed.  Take a look at the demo site – all you need to do is including a reference to jQuery Mobile’s JavaScript and follow some conventions with your HTML to get a nice mobile-friendly user interface. However, when you think about it, mobile-friendly (touch friendly) user interfaces are also very appropriate for traditional touch screen technologies utilized by the retail industry for over a decade.

Given our point of sale was initially created to be compatible with IE6 back in the day, we felt it was time to enhance the look and feel utilizing new technologies. We liked jQuery Mobile’s look & feel and wanted to utilize some bits & pieces, without having to re-implement everything following their conventions.  When you peek at the jQuery Mobile source code on GitHub, you realize that each component is separated in it’s own little jQuery plugin.  Some plugins are not completely independent from the jQM (jQuery Mobile) page, but you can use most of them outside of that context; you can thus use them in your own applications without a jQM page that takes 100% of the screen real estate.  In a typical jQM scenario, you define a page and then jQM works it’s magic: it initializes all the controls for you - if you followed the conventions. In this post, we’ll cover using jQuery Mobile outside of the jQM page and mobile context.

How to trick jQuery Mobile

First, you simply have to trick jQM into thinking that there’s a jQM page in the HTML.  To do that, you have to bind to a special jQM event, mobileinit.  This is event is executed before any jQM code modifies your html:

$(document).bind("mobileinit", function ()
{
    if ($('div[data-role=page]').length === 0)
        $('<div data-role="page" id="pageTemp" style="display:none;"></div>').appendTo($('body'));
 
    $.mobile.ajaxEnabled = false;
 
    $('#pageTemp').live('pagebeforecreate', function (event)
    {
        return false;
    });
})

Here you insert a jQM page in your html if one hasn’t already been defined. This is required for some controls to work (like the dropdown list, if I remember correctly). We then disable AJAX page fetching and also disable the 'pagebeforecreate' event for the newly created dummy page.  Most of our pages utilize this placeholder (as we only use the UI controls), but we did – on a few occasions - utilize the standard jQM page in all its glory inside our point of sale. 

If there’s a better way to do this, please let us know - with the current version of jQuery Mobile (1.0a4.1) it appears to be working pretty well.

Interesting controls

The plugins we found most interesting were the one dealing with forms controls. You can see a gallery of all forms elements in jQuery Mobile here.

For example, some of the base HTML controls are not ideal in the context of a touch-enabled application. Take radio buttons, for example. They are way too small and hard to click on accurately - you have to manually change their styling via CSS to make them easy to touch.  Here is the jQM version of radio button list:

Radio Button List

radio

To create this, first you need a little bit HTML plus the checkboxradio plugin from jQuery Mobile:

<fieldset data-role="controlgroup">
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="Cat">
    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="Dog">
    <input type="radio" name="radio-choice-3" id="radio-choice-3" value="Hamster" checked="checked">
    <input type="radio" name="radio-choice-4" id="radio-choice-4" value="Lizard">
</fieldset>

Basically the fieldset groups the radio input together and gives the rounded corners only to the top and bottom items.

Then you can add this JavaScript to your page:

$('input[type=checkbox], input[type=radio]').filter(function ()
{
    return $(this).parent('.ui-checkbox').length == 0;
}).checkboxradio();
$("fieldset[data-role='controlgroup']").not('.ui-controlgroup').controlgroup();

This piece of JavaScript will select all checkboxes or radios inputs, filter the ones we already applied the plugin and then call checkboxradio() to change them to follow the jQuery Mobile style.  We then use the controlgroup plugin to group the controls together visually.  Once again we don’t re-apply this code to fieldsets that were changed previously, for efficiency reasons.

For an horizontal look, simply add data-style=”horizontal” to the fieldset grouping the elements.  It is still a radio button list, but the layout is different.

radio-horiz

Checkbox list

You can even do the same thing with checkboxes:

checkboxes

Suddenly, your UI becomes much easier to use with a touchscreen.

Dropdown

Here is a dropdown list, in the jQuery Mobile style:

dropdown

You simply execute the following JavaScript code:

$('select:not([multiple="multiple"])').selectmenu();

We had some problems with multi-selection lists, so that’s why we don’t automatically style those.

Button

Buttons are pretty straightforward. In our application, we decided to automatically transform all of our buttons which utilize the CSS class ‘button’.  This could be an input[type=button], input[type=submit], a simple link <a></a>.  We’re using a mix of these in our application and modify them all like this:

$('.button').not('.ui-btn').button();

buttons2

Above, the two buttons are inline (add the data-inline=”true” attribute to the HTML elements). The Save button has a different theme (specify data-theme=”b”)

buttons

You can also group buttons as above, by defining a horizontal controlgroup.

<div data-role="controlgroup" data-type=”horizontal”>
    <a href="index.html" data-role="button">Yes</a>
    <a href="index.html" data-role="button">No</a>
    <a href="index.html" data-role="button">Maybe</a>
</div>

Working with controls

Visit this page to know operations you can do on your controls once they are modified by jQM: Form Plugin Methods. This reference is very useful if you want to enable/disable controls or refresh them with new values.

ASP.NET WebForms

If you are using ASP.NET WebForms as is our case, you want to run these plugins every time your page is modified.  If you are using ASP.NET UpdatePanels, then you can bind a function to the following event handler where you could modify your controls each time an UpdatePanel is updated:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function()
{
    // Add the jQuery Mobile code modifing controls here
});

Normally this job is done automatically by jQM, but since we are not using the controls inside a jQM page, we have to update the DOM manually after each postback.

Caveat

In its current form, jQuery Mobile is not compatible with Internet Explorer. Depending on the version of IE, it is easier completely unusable or doesn’t look as good (rounded corner issues). In our context (point of sale), we ended up utilizing Google Chrome Frame for our IE users – at least for the time being. The jQM team appears to be working towards full IE support for their beta release.

Future of jQuery Mobile

In conclusion, we loved working with jQuery Mobile once we figured out how to utilize bits & pieces of it individually. Currently, jQM focuses on development for mobile devices (which is normal) but we would be thrilled if they made integration into existing projects simpler. As this is an open source project, we weren’t afraid to peek at the code to figure out why it wasn’t working the way we intended it to. Let’s hope the project keeps on improving both its modularity and the desktop-based functionality.  Thank you to the jQuery Mobile team, continue the great work!



Positions to be filled at LavaBlast Software

clock February 8, 2011 09:26 by author JKealey

 

Positions to be filled at LavaBlast Software LavaBlast is currently looking to hire!

Want to help improve FranchiseBlast? Apply here: http://jobs.lavablast.com/apply.

Rather than rehash what’s in the job postings, I wanted to list a few cool projects we have in the works for the short/medium/long term.

  • SaaS application for tracking and managing franchise information requests.
  • Create an iPad-based version of our point of sale. (Most probably HTML5 instead of a native app).
  • Stream data from our point of sale into the cloud, for real-time tracking and data synchronization between stores and our data warehouse.
    In addition, we’re always building new operational software for our franchisor clients so our work is always full of fresh challenges. Interested, let us know


Slash your ASP.NET compile/load time without any hard work

clock December 1, 2010 09:18 by author JKealey

Jason has a cool eye :) FranchiseBlast, our franchise management platform, is a ‘large’ solution inside Visual Studio which currently contains 35 projects. In total, we manage over 60 interrelated projects, and have always been concerned at improving the compilation/load performance on our development machines. This post is a quick summary of what we did to keep things as fast as possible.

Personally, when it starts taking over a minute to compile or load my application, I start throwing things. This was the case early this week and with a bit of work, I managed to cut down things by an order of magnitude (from around 140 seconds down to around 14 seconds) with only software changes.  This is what prompted me to write this post.

There are three things worth improving:

  1. Compilation time
  2. First load time (ASP.NET)
  3. Application speed / database performance

 

I only want to talk about the first two; the only tip I’ll give you for #3 is to get your hands on a profiler such as dotTrace as it is a real time saver. 

Get better hardware (Big impact)

You’ll get the best bang for your buck by upgrading your hard disk, especially if you’re using a single 5400 RPM or 7200 RPM drive (download benchmark software to evaluate your current disk). Our projects are stored on a solid state disk. We currently use Intel X25-M G2, but the RevoDrive x2 looks much faster (basically a RAID-0 array of SSDs) if you have an available PCI-Express x4 slot. If you’re cheap and find the SSDs to be too small, just get two large 7200 RPM drives and put them in RAID-0. Make sure you’ve got a robust backup solution.

We have 12GB RAM on our development machines and a recent Core i7 processor, but nothing fancy. This is more than sufficient.

Store your temporary IIS files on your fastest disk or a RAM disk

Depending on the amount of RAM you have, it may make sense to use a RAM disk. I use my RAM disk for my temporary internet files and for IIS’s temporary folder (compilation results). I haven’t measured specific performance details but since I have so much free RAM, might as well try use it in creative ways.

To speed up the first load time, you can tell IIS to store its temporary files on your RAM disk (or fastest disk) by changing the following setting in your web.config files:

<compilation ... tempDirectory="q:\temp\iistemp\"> ... </compilation>

 

You can either change your project files directly, or, if you’ve lazy and have numerous applications running on your development machine (like I do), update the system-wide web.config files. Note that you need to update this for each runtime version of the Framework and, if running a 64-bit machine, for both Framework and Framework64. On my machine, I needed to modify the following files:

   1:  C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Web.config
   2:  C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Web.config
   3:  C:\Windows\Microsoft.NET\Framework64\v2.0.50727\CONFIG\Web.config
   4:  C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config\Web.config

 

Trade-off: If you save your RAM disk when shutting down, you’ll notice how much longer it takes to reboot. I can live with that, rebooting only once every couple months.

Review a few magical settings (Most impact)

When an ASP.NET website is loaded for the first time, it pre-compiles all your pages and user controls. Once done, everything runs faster. This is great for production websites, but horrible for your development machine. Why?  When programming, you’re usually only modifying a page or two (or back-end code). You’ll iteratively make a change, compile, launch the website, test, and start over; often dozens of times. A two minute compile/load time (like we had) forces you to lose focus and get distracted. The following setting makes pre-compilation more selective, making the first load time massively faster in development scenarios. On my machine, it cut the first load time from around 74 seconds to 6 seconds.

<compilation ... batch="false"> ...</compilation>

 

While on the subject of random boolean flags that make your life better, I should mention the following:

<compilation ... optimizeCompilations="true"> ... </compilation>

This flag has a number of gotcha’s that are documented here. I’ve enabled it for now, although my quick tests didn’t show any significant performance improvements compared to the previous one. However, I was probably not testing the right thing.

Restructure your projects

Try multiple solutions

About a year ago, we took 50% of our least used projects and moved them into a secondary solution. We compile that solution only when changing one of these projects, once every couple months. After rebuilding the secondary solution, we copy the *.dll files to a separate folder. Our primary projects reference those pre-generated libraries. I should repeat this process again, but I like having all my projects in one place and splitting them was a pain. However, this is probably the only sustainable way to manage extremely large solutions.

Selectively build the necessary projects

Using Visual Studio’s Configuration Manager, I also created different active solution configurations in my primary solution with only a subset of the projects included in the build.  I can thus swap between configurations depending on my primary task (working on our point of sale instead of FranchiseBlast, for example). This can drastically reduce compilation time, but I don’t use it as often as I should because:

  1. I find the user interface slow to refresh (Visual Studio).
  2. My dependency tree is complex and going through the list of projects to remove those I don’t want built is a pain.
  3. I context-switch a lot and often hit cases where I modify a project and forget that is not included in the build.

 

A simpler option is to build only the current project (and its dependencies) instead of all projects. Just make sure you don’t accidentally break the build (recompile everything before a commit).

Parallel compilation (Big impact)

Following Scott Hanselman’s post, I setup my project to compile in parallel. I did add a few options to make it easier for me to see errors/warnings without MSBuild’s typical clutter. (I also had a post-build action using NAnt which I set to quiet). This reduced my full rebuild time from 96 seconds down to 16 (after a clean solution). In a typical recompilation, we’re talking roughly 8 seconds instead of around 66.

Title: Parallel Build
Command: C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe
Arguments: /m $(SolutionFileName) /v:m /ds /nologo /clp:Summary;Verbosity=minimal
Initial Directory: $(SolutionDir)
Check: Use Output window.

Trade-off: Error messages aren’t nicely presented in the Visual Studio Error List tab and you are not notified when the build is complete. 

Other noteworthy attempts

Over time, I’ve tried a few things that didn’t work out. In general, they improved things slightly but I don’t use them on a daily basis due to the tradeoffs.

I tried putting the whole project (source and output folders) onto the RAM disk but its volatility scared me away, regardless of the performance enhancements (Off the top of my head, it was between 25% and 50%). I then tried putting my only project’s bin folders on my RAM disk (by creating symbolic links from my bin folders to my RAM disk). This also had a positive impact on performance, but not significant enough to warrant the kludge (around 25% reduction in compilation time).

I also found a few tips & tricks for larger projects on Stack Overflow. First, I tried putting ‘Copy Local’ to false for all project references. This gave me a 25% reduction in compilation time, but broke my deployment scripts which needed all the files in the bin folder.  Separately, I configured all my projects Output Paths to the same folder, avoiding content duplication on the disk. This also gave me a 25% reduction in compilation time. Oddly enough, moving this folder to my RAM disk did not impact performance.

Summary

I hope this post gave you some ideas on how to improve your compilation speeds and first load times. I didn’t intend to give exact benchmarks, as performance will vary greatly depending on your projects. However, the main lesson learned is that there are dozens of improvements you can make; it’s up to you to try them out and keep what works for you.

The top three time savers for us are:

  1. Setting batch=false in the ASP.NET configuration page. (Now ~10 times faster)
  2. Parallel compilation for our projects (Now ~8 times faster)
  3. Better hardware (Now between 2 and 5 times faster)

 

Honorable mention goes to splitting your solution files, even though it’s painful and time consuming process to setup.

Do you have any other tips & tricks you’d like to share with us?



Startup Pivot: Lessons Learned

clock November 16, 2010 10:12 by author JKealey

logoWe’ve just launched a new website, FranchiseBlast.Com. Simply put, we’re spinning off all the content related to our franchise software from our main site onto this domain. We did this for a number of reasons, but one of them was that we decided to perform a minor segment pivot. We launched LavaBlast in 2007, focusing on an integrated solution for retail franchises. We built an awesome solution around this problem but, for a number of reasons – mainly scalability, we are pivoting to service-based franchises instead. We provide an equivalent feature set to both types of franchises; the main distinction is simply the deployment architecture. Our differentiators are still our focus on integration and our desire to build franchise-specific software solutions.

Since we’ve just pivoted, I don’t have any witty insights on the business aspects of the pivot. Sorry folks, you’ll have to tune in later to see if was a good idea or not! However, I do want to share a few lessons about the nitty-gritty details of the pivot.

 

1) Working with an outsider

Early on in the process, we got Ben Yoskovitz involved. In case you didn’t know, Ben is not only a co-founder of Year One Labs but also assists existing startups with product development via Flow Ventures.

  1. Working with A-Team individuals simplifies things. Even though our backgrounds are dissimilar, we share the same general philosophy about how to grow a business. Therefore, our debates were short and focused on key decisions to be made. Once decided, everyone could run with the idea and get things done.
  2. We didn’t want to look like fools. Explaining what you do to a respected outsider forces you to better articulate your thoughts. He didn’t need to point anything out; we preemptively realized inconsistencies or flaws in our own logic while explaining our business strategies. 
  3. Get some different thoughts. A breath of fresh air… unrelated to the use of Binaca.

 

As time passes, the business context changes. Going through this exercise once in a while helps you refocus and re-orient when necessary.

2) Moving away from SubSonic CMS

The LavaBlast website is built using a tweaked version of the SubSonic CMS.  We started using that CMS the first week it came out and slightly tweaked it for our needs. It is plain and simple and did what we needed it to in 2007. However, the open source project was never maintained and we keep getting burned by random issues. As an example, the rich text editor it includes doesn’t seem to work consistently on Google Chrome (which did not exist back then) and has issues with session timeouts.

The FranchiseBlast website is built on WordPress. Given our busy schedules, we didn’t waste any time with the revamp. Having never played with WordPress before, the main thing that struck us was the wide variety of plugins that are available. 

  1. Install WordPress. [Yes, you can install it on IIS. ]
  2. Purchase a WordPress theme. [There are awesome ones for software-as-a-service type startups].
  3. Tweak the site structure/theme. Pump out some content.
  4. Install plug-ins as you go.

 

As an example, we installed one plugin for our contact forms. Time spent configuring: 5 minutes. This enabled us to focus on the message, not the form or infrastructure-related-time-wasters.

3) The social web has changed dramatically

I remember reaching out to franchisors and franchise bloggers back in 2007. There were a handful of blogs and that’s about it.  Social media adoption has tremendously increased in the past years thanks to services such as Twitter. It is much easier to get in touch with someone now (using warm introductions) than it was back then.  We’ve now reached an era where franchisors are overwhelmed by the number of social media services they need to feed information to.

Have you been in business for a few years? Do you have lessons learned to share?



Month List

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2017

Sign in