A review of Themify’s Minshop theme

Minshop is a responsive WooCommerce theme from the good people at themify.me. In building out the eCommerce solution for The Men’s Fashion, Minshop has allowed us to jump start the front end thus saving weeks of design effort and allowed us team to deliver a working product in minimal time.

Responsive Layout

Minshop is an HTML5 WordPress theme with a responsive layout that optimizes the view for both desktop and mobile audiences. You can test out the response layout for yourself by resizing your browser window. The “mobile” view is accessible on your desktop if you re-size your browser to 480 pixels. The entire top navigation becomes a mouse/touch enabled menu that is easier to navigate in a mobile browser.

Layout and Design

Minshop offers a minimal interface but also allows you to choose from a variety of skins to help you get your store out the door as quickly as possible. The responsive theme looks great on both desktop and tablet/phone browsers out of the box.

Slider

The slider feature has been instrumental in showcasing new and featured products.

Social Sharing & Open Graph

Out of the box, the Minshop theme generates the OpenGraph tags that will control how your pages’ content are displayed when shared on Facebook, Pinterest, and any other OpenGraph enabled service.

Search engine optimization

Minshop implements the following Schema.org schemas

  • http://schema.org/Offer
  • http://schema.org/Product

Feature Wish list

There are a few additions I would love to see the Minshop team make on their great theme.

  • More HTML5 semantic markup
  • The ability to have the copy for the Shop page show to the left or right of a 2 or 3 column grid of products

ASP.NET MVC4 Project + SQL CE 4 limitations

With the official RTM release of Visual Studio 2012 and the MVC 4 project (also available for VS 2010), I have been using some of the features of new features and out of the box features of hte MVC 4 project to ease the development of my user stories.

SQL CE 4 made database backends much simpler by allowing developers to utilize a SQL engine even if you don’t have it installed on your computer and the zero-config usage is great. SQL CE does have some its limitations and the OAuthWebSecurity class  exposes one such limitation: Transasction Scopes.

Given a development environment with a SQL CE 4 database, you can register a number of authentication providers such as Facebook and Google out of the box with no issues.

Dictionary<String,Object> facebookPermissions = new Dictionary<string,object>() ;
facebookPermissions.Add( "scope", "email" );
OAuthWebSecurity.RegisterFacebookClient(
  appId: "My Facebook App ID",
  appSecret: "My Facebook App Secret",
  displayName: "Facebook",
  extraData: facebookPermissions
);

OAuthWebSecurity.RegisterGoogleClient();

The limitation materializes when trying to disassociate the authentication provider (in this case, Google) from the base account. If you are using SQL CE 4 and the code made available to you with the out of the box ASP.NET MVC 4 project, you will get the following error when attempting to disassociate the account with the OAuth provider.

The connection object can not be enlisted in transaction scope.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: The connection object can not be enlisted in transaction scope.

Source Error:

Line 110: using (var scope = new TransactionScope(TransactionScopeOption.Required, new TransactionOptions { IsolationLevel = IsolationLevel.Serializable }))
Line 111: {
Line 112:  bool hasLocalAccount = OAuthWebSecurity.HasLocalAccount(WebSecurity.GetUserId(User.Identity.Name));
Line 113:   if (hasLocalAccount || OAuthWebSecurity.GetAccountsFromUserName(User.Identity.Name).Count > 1)
Line 114:   {

Hosted source control and project management with Subversion and Team Foundation Server

I have been using Subversion for many years both professionally and on open source projects (mainly Razor Image Viewer). Initially, I had Subversion running as a service on my local computer but the more I thought about a strategy for backing up my work, the more it made sense to use a hosted environment. The $25 dollars a year it costs me for a hosted source control service wouldn’t even cover the electricity for my own server.

I am currently using a hosted Subversion and TRAC with ProjectLocker. The hosted service allows me to focus on my development and other project without the need to maintain a server or keep it on all the time. I love TRAC’s custom workflows but it doesn’t offer the breadth of capabilities required for application lifecycle management (ALM).

I have used Microsoft’s Team Foundation Server and am more and more impressed by it as it has matured since its initial version in 2005. With the release of Team Foundation Server 2012, there will also soon be a TFS Express solution available to teams of 5 for free. Currently, Microsoft is offering a free web based preview of Team Foundation Service hosted online (under the hood, it’s a farm of Azure VMs). I am using this for a couple projects and will be writing more about this soon.

If you are using Visual Studio 2010 you will need to install a hotfix in order to connect Visual Studio 2010 with the TFS Preview hosted source control. Microsoft’s website makes you jump through a few hoops before directing you to the download page for hotfix KB2581206. Visual Studio 2012 connects properly to the hosted Team Foundation Service out of the box.

To connect Visual Studio 2010 to your TFS Preview repository, the Getting Started with Visual Studio page incorrectly states to use the full project URL https://fabrikamfiber.tfspreview.com/DefaultCollection/FabrikamFiber (to end the URL with your project’s name). The correct URL for your Team Foundation Server is https://fabrikamfiber.tfspreview.com/DefaultCollection, for example. Visual Studio will provide you a list with the projects to which you can connect.

Brian Harry has written more about TFS Express

iOS ‘native’ web apps with HTML5

I’ve been considering iOS development recently but I don’t have a Mac on which to develop. Alternatively, I have been looking into HTML5 ‘native’ web apps. These are web apps that look and feel like native iOS applications.

I am using my Batch Image Resize web app for my R&D on this topic.

Installation

The web app can be installed via Safari’s ‘Add to Home Page’ feature.

It looks like a native App

As per the Apple Developer Guide, adding the elements below will allow the site to act like a native app when access from your iOS device.

‘apple-touch-icon’ defines the image to use for the icon.

‘apple-touch-startup-image’ defines the splash screen image.

The ‘apple-mobile-web-app-capable’ meta tag allows the page opened via your home screen to behave like a native app. When I open the ‘app’, I see it in full screen browser with no address bar at the top or any of the menus at the bottom.

<link rel="apple-touch-icon" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-startup-image" href="/path/to/startup-image.png"></link>
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Full Screen --></meta>

Reference

https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html

Deploying an ASP.NET Web Application with SQL CE 4 & Entity Framework without installation

Update – 12/15/2011

As of Visual Studio 2010 SP1, there’s an easier way to do everything below.

In the Solution Explorer, right click the project and select ‘Add Deployable Dependencies…’, select the dependencies you want to include, and click OK.

Visual Studio 2010 - Add Deployable Dependencies

This will generate the folder _bin_deployableAssemblies with the proper DLLs. Now when you build your solution, the DLLs in _bin_deployableAssemblies are copied to the bin folder.

See Scott Hanselman’s post for a more thorough explanation.

Original Post

I have built an ASP.NET project using SQL CE 4.0 and Entity Framework 4.1. When the time came to deploy the web application to our managed environment, I ran into some issues due to some missing references.

Do to the nature of our hosted environment, installing the EntityFramework and SQLCE4 libraries was not an option but I have worked out all of the required steps to get the web application working in the deployed environment.

Referenced Libraries

The following libraries should be referenced in your project.

EntityFramework
System.Data.SqlServerCE
System.Data.SqlServerCE.Entity
System.Web.Providers

Make sure to set the Copy Local property to true.

Manual Copy

The following files should be copied as part of your build script process. These files are placed on your file system when you install the SQL CE 4 package.

sqlceca40.dll
sqlcecompact40.dll
sqlceer40EN.dll
sqlceme40.dll
sqlceoledb40.dll
sqlceqp40.dll

Web.config

On my development box, the machine.config has been modified (when I installed SQL CE 4) to include the SQL CE 4 provider. To use the provider without explicitly installing it on the server, we need to manually add the provider in the Web.config

  <system.data>
    <DbProviderFactories>
      <remove invariant="System.Data.SqlServerCe.4.0" />
      <add name="Microsoft SQL Server Compact Data Provider 4.0" invariant="System.Data.SqlServerCe.4.0" description=".NET Framework Data Provider for Microsoft SQL Server Compact" type="System.Data.SqlServerCe.SqlCeProviderFactory, System.Data.SqlServerCe, Version=4.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />
    </DbProviderFactories>
  </system.data>

Login/Register page design

Getty Login

I recently went to the Getty Villa website to get some tickets and came across their login/registration screen. Sadly, their page looks like the type of examples used in hyperbole-filled academic books on how NOT to design the login page. The notes defined here can be applied to most any user interface design.

Consistency of Design

There are three options associated with this part of the user interface: Log In, New User (registration), and Forgot Password. These three ‘associated’ features each have a different visual design. I’m not saying they should all look the same, but the differences in size, bolding, placement, and inconsistency of spaces made for a confusing UI.

The right edge of the ‘Log In’ and ‘Forgot Password?’ buttons should be flush. Personally, I would have placed the ‘New User?’ (what’s with the question mark?) above the log in box. This would allow the UI to explicity differentiate between new and existing users.

Breaking Change in Cruise Control .NET 1.6

Building on my earlier post about Setting up Cruise Control .NET 1.5/1.6 on Windows 7 + IIS7, I have identified a breaking change with CruiseControl .NET 1.6.x.

For readability, I like to place each -D flag in my <buildArgs> definition on a separate line

<tasks>�
  <nant>
  <executable>$(NAntExecutablePath)</executable>
  <buildFile>D:cidefault.build.xml</buildFile>
  <buildArgs>
    -D:SolutionFile="$(Batch_WorkingFolderTrunk)MySolution.sln"
    -D:LocalDeployRoot=D:cideployMyProject </buildArgs>
  <targetList>
    <target>build</target>
  </targetList>
  </nant>
</tasks>

however in upgrading to version 1.6.x, I have come across a breaking change. Using the same script in my 1.6.x implementation, I was getting the eror message Target ‘ ‘ does not exist in this project. I confirmed that the NAnt script worked by calling it directly with the same parameters that I was defining via my CCNET project configuration.

After looking into the issue for a while (and even posting a question on StackOverflow) I found a clue when reading through the server log. I noticed that the target was being specified to nant.exe following the <buildArgs> definitions along with the white spaces and newlines. Removing the white space and newlines resolved the issues.

<buildArgs>-D:SolutionFile="$(Batch_WorkingFolderTrunk)MySolution.sln" -D:LocalDeployRoot=D:cideployMyProject</buildArgs>

I have logged a bug report with the Cruise Control .NET team regarding this issue.

Batch Image Resize

I have been looking around for a method to resize multiple images in a single batch. There have been a number of downloadable tools and shell integration solutions, but I was hoping to find an online tool to do just that.

Not finding a solution that I liked, I decided to build one. Take a look at the Batch Image Resize tool and let me know what you think. There also a Facebook page for the tool.

Usage

  1. Upload the pictures you want to work with. The upload tool uses Uploadify to support mult-file uploads.
  2. Enter the desired maximum width and height
    • Images that are smaller than the specified dimensions are left unmodified.
  3. Clicking ‘Shrink my pictures’ generates a zip file with your resized images.

Privacy

All uploaded pictures are deleted within 5 minutes of inactivity.
Update
11/7/2011 – Scott Hanselman’s recent blog entry talks about a similar library for .NET

Client side sorting with ASP.NET GridView and jQuery TableSorter

UPDATE If you are looking for a more complete solution including filtering, search, paging, and server side sorting, look at my post on using the datatables plugin with ASP.NET.

Doing some quick data prototyping, I employed the use of the ASP.NET GridView to quickly report on my data objects. As is common, the prototypes quickly took on a life of their own and were asked to be matured into a full on reporting application.

For client-side sorting, I have been using the jQuery Tablesorter plugin. To integrate this plugin, you need simply call the initializing function.

  

  $(document).ready( function(){
    $(".tablesorter").tablesorter();
  });

Out of the box, however, the plugin will not work with the <table> node generated by the ASP.NET Gridview. Comparing the generated output from the GridView with the demo table I realized that the vanilla GridView doesn’t generate the <thead> nodes for the table’s header. To get the proper output, the following changes need to be made in the code behind.

...
gv.Datasource = myDataSource;
gv.DataBind();

//Here's the required code to add
gv.UseAccessibleHeader = true;
if (gv.HeaderRow != null)
{
   //This will tell ASP.NET to render the <thead> for the header row 
   //using instead of the simple <tr>
   gv.HeaderRow.TableSection = TableRowSection.TableHeader; 
} 
...

Email Scripting Fail

It’s time for another Good Idea, Bad Idea (anyone remember those snips from Animaniacs back in the 90s?)!

Good Idea

Scripting your auto emails to personalize them and make them more likely to be read.

Bad Idea

Placing your script in a string literal, preventing it from executing and emailing the script text instead. This is an email I received earlier today.

The feature is nice; it’s supposed to change to the subject line based on the number of people in your queue and assign either

“Reminder, 1 person wants to….” or “Reminder, 5 people want to…”

Sadly, I got neither.