My recent post on the EffectiveUI blog, Mobile Web, Hybrid, or Native Mobile – How Do You Choose?, was just featured on the Society Of Digital Agencies (SoDA) blog. Check it out here.
Continuing on my recent thread about decision making for choosing a mobile web, hybrid, or native mobile application architecture, I’ve added another question to consider for the decision tree:
After a discussion with a client last week, I ended up adding this question to my list. The client had already implemented a hybrid mobile application based on ASP.NET for Android and iPhone and wanted to have all of the registration take place through a web form, but I quickly noticed that the registration processes are very different between Android, iOS, and Windows Phone. Not only are the processes different, but the central application server needs to know what type of device it is to successfully send a push notification. Once the device is registered for push notifications, the basic mechanics of sending and receiving notifications are similar on each of the devices.
That being said, my first dive into the world of push notifications has suggested that the best approach for building push notifications would be to build all of the registration and message handling functionality as native mobile code, even within the context of a hybrid app. Push notifications are definitely a disqualifier for a pure mobile web solution, but don’t necessarily push all the way into a fully native mobile solution.
More reading:
Windows Phone 7 Push Notifications
Since my article in MSDN Magazine, “Develop Hybrid Native and Mobile Web Apps,” came out, I’ve received a lot of questions on how to decide what kind of mobile application to build: mobile web, hybrid, or native mobile? This is a really thorny question and one that doesn’t have a well-defined answer. I’ve spent a lot of time over the past week discussing how to go about answering this question with some of the members of the sales team at EffectiveUI and I’d like to share some of my process in the hope that it will help others with these decisions and spark a conversation to continue to refine the decision-making process.
I’ve just had a new post published on the EffectiveUI blog about these thoughts and I’d love to hear what you think.
Over the last week, I was building some data services for a demo project for our non-profit subsidiary, EffectiveSC, and we decided to use this quick project as an opportunity to get familiar with the ASP.NET Web API beta that is part of the ASP.NET MVC 4 beta. My first impressions of the Web API are generally very positive. I was able to get a basic Create-Read-Update-Delete (CRUD) service up and running using the appropriate HTTP verbs (PUT, GET, POST, DELETE respectively) in just a couple of hours and the service automatically translated my model to JSON or XML based on the Accepts header in the incoming request.
You can add the ASP.NET Web API to an existing project by running the following from the NuGet Package Manager console:
PM> Install-Package AspNetWebApi
or create a new project with the ASP.NET MVC 4 Web Application template installed with the ASP.NET MVC 4 beta.
If you create a new project, the Web API template creates a new controller, ValuesController, that inherits from the new ApiController class. This new class looks something like this:
public class BadgeController : ApiController
{
// GET /api/badge
public IEnumerable<EarnedBadge> Get()
{
RelationalDataModel data = new RelationalDataModel();
return data.EarnedBadges;
}
// GET /api/badge/5
public EarnedBadge Get(long id)
{
...
}
// POST /api/badge
public void Post(EarnedBadge value)
{
...
}
// PUT /api/badge/5
public long Put(EarnedBadge value)
{
...
}
// DELETE /api/badge/5
public void Delete(int id)
{
throw new HttpResponseException(HttpStatusCode.MethodNotAllowed);
}
}
In my case, I was sending a EarnedBadge object as my model. In each of the methods, I simply performed the required query operations against my Entity Framework Code First data store and the framework took care of all of the serialization. The EarnedBadge object was defined as:
public class EarnedBadge
{
[Key]
public long EarnedBadgeId { get; set; }
[Required]
public long ProviderId { get; set; }
[Required]
public long BadgeId { get; set; }
[Required]
public long UserId { get; set; }
[Required]
public DateTime EarnedDateTime { get; set; }
public string Note { get; set; }
}
While this is a pretty simple object, the serialization resulted in the following results for JSON and XML respectively:
{
"EarnedBadgeId":123456789,
"ProviderId":123456789,
"BadgeId":123456789,
"UserId":123456789,
"EarnedDateTime":"2012-03-28T00:54:06.843",
"Note":"string"
}
and
<?xml version="1.0" encoding="utf-8"?>
<EarnedBadge>
<EarnedBadgeId>123456789</EarnedBadgeId>
<ProviderId>123456789</ProviderId>
<BadgeId>123456789</BadgeId>
<UserId>123456789</UserId>
<EarnedDateTime>2012-02-18T00:54:06.843</EarnedDateTime>
<Note>String</Note>
</EarnedBadge>
I did use the JSON.NET formatter as described by Henrik Nielsen in order to format the dates into ISO-8601 format which is a little easier for JavaScript-based clients to consume. From my perspective, one of the nicest features of using the ASP.NET Web API is the control it gives over the HTTP response messages, especially for exceptions. The new HttpResponseException allows me to control the HTTP status codes that are sent when errors occur such as the HTTP 405 Method Not Allowed for the Delete method in the example above. This allows me to build the service in a truly RESTful fashion and to send meaningful error messages back to the client.
Another really impressive feature is the built in OData query support. Any IEnumerable or IQueryable object that is returned by the service is automatically queryable using the OData query string parameter syntax which makes building paging and searching of data sets really easy.
The one feature that I really like in WCF’s REST implementation that isn’t available yet in the ASP.NET Web API is the auto-generated service API documentation. The ASP.NET Web API team has confirmed that this feature will be available in the final release. It appears that, for most of the service work that I do at EffectiveUI, the Web API will be the way to go moving forward. A good discussion of the ASP.NET Web API vs. WCF can be found at iDesign and it largely mirrors my my own thoughts on the comparison.
I hope my initial thoughts and experiences prove useful and I’d love to hear how others are using this new tool.
My article on building hybrid native and mobile web applications has been published in the March issue of MSDN Magazine.
Mobile applications are all the rage these days. There are currently three major mobile platforms: Apple’s iOS (iPhone and iPad), Google’s Android , and Microsoft’s Windows Phone , and countless variations within these platforms for the developer to consider. Focusing on any one of these platforms leaves 50% or more of the market unable to use your application, but the cost of building and maintaining the same application on each of the platforms quickly becomes problematic. A web application is another option, but one that leaves the experience diluted and leaves the developer without access to many of the native hardware capabilities.
In one of my recent projects at EffectiveUI, I spent a lot of time thinking about how to solve this conundrum in a way that provides the best possible user experience while still being cost effective and maintainable. My solution was an application that is a hybrid of a native application and a mobile web application. I had the opportunity to share this solution, and provide a tutorial for building it, in an article for MSDN Magazine , “Develop Hybrid Native and Mobile Web Apps .” I truly believe that this approach is a “best of both worlds” solution that leaves the developer and end user in a better place.
I hope that my approach to this problem helps you in building your applications and I’d love to hear any feedback that anyone might have.
The main text of this post is also cross-posted on the EffectiveUI blog.
I got the design comp above for one of my projects at EffectiveUI and immediately thought, “How am I going to be able to do that in HTML and CSS?'” The table headers are generated dynamically by system defined sections and could be different for different groups of users, so using an image for the table header was impractical. I knew CSS3 gave me some new options using 2D transforms, but browser support was uneven. Another problem in this design that looks like a really minor feature is the carrot under the “QuickNav” text. Fortunately, the requirements of this project are that we are just supporting the latest versions of IE, Firefox, Chrome, and Safari, so CSS3 2D transforms it is.
My initial attempt didn’t go so well as you can see below. Not only were the browser implementations of the 2D transforms uneven, but the documentation available online was less than complete as well.
So all of my headers didn’t line up with their columns and the text was way out of whack too. It turns out that the browsers calculate the position of an element first, then transform it, so I had to adjust the positioning of the elements to end up where I wanted them. After some playing with the Skew() and Rotate() CSS3 2D transform methods, I discovered that I needed a little extra markup in each <th> cell to get the display to show up correctly. Even with that being said, the end markup is still very clean to generate the table:
<div class="quick-nav-container">
<h4>QuickNav</h4>
<a class="close" href="#">x</a>
<div class="quick-nav">
<table>
<thead>
<tr>
<th></th>
<th class="skew"><div class="odd"><span>All</span></div></th>
<th class="skew"><div class=""><span>General</span></div></th>
<th class="skew"><div class="odd"><span>Typography</span></div></th>
<th class="skew"><div class=""><span>Colors</span></div></th>
<th class="skew"><div class="odd"><span>Buttons</span></div></th>
<th class="skew"><div class=""><span>Form Elements</span></div></th>
<th class="skew"><div class="odd"><span>Windows</span></div></th>
<th class="skew"><div class=""><span>Utilities</span></div></th>
<th class="skew"><div class="odd"><span>Images</span></div></th>
<th class="skew"><div class=""><span>Iconography</span></div></th>
<th class="skew"><div class="odd"><span>Layout Grids</span></div></th>
<th class="skew"><div class=""><span>Page Templates</span></div></th>
<th class="skew"><div class="odd"><span>Media</span></div></th>
<th class="skew"><div class=""><span>Misc.</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td class="project-name">EffectiveUI DxG</td>
<td class="odd"><a href="/Search/SearchByProject?projectName=EffectiveUI%20DxG">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=1&sectionId=1">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=1&sectionId=2">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=1&sectionId=3">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=1&sectionId=4">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=1&sectionId=5">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=1&sectionId=6">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=1&sectionId=7">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=1&sectionId=8">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=1&sectionId=9">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=1&sectionId=10">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=1&sectionId=11">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=1&sectionId=12">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=1&sectionId=13">»</a></td>
</tr>
<tr>
<td class="project-name">Test Project</td>
<td class="odd"><a href="/Search/SearchByProject?projectName=Test%20Project">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=2&sectionId=1">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=2&sectionId=2">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=2&sectionId=3">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=2&sectionId=4">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=2&sectionId=5">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=2&sectionId=6">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=2&sectionId=7">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=2&sectionId=8">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=2&sectionId=9">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=2&sectionId=10">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=2&sectionId=11">»</a></td>
<td class="odd"><a href="/Search/QuickNav?projectId=2&sectionId=12">»</a></td>
<td class=""><a href="/Search/QuickNav?projectId=2&sectionId=13">»</a></td>
</tr>
</tbody>
</table>
</div>
</div>
As you can see in the code above, I used no images to achieve this effect. The X close button in the upper right is a simple anchor tag with the border-radius property set to make it appear to be a circle. The most interesting pieces to note for the angled headers are the <th class=”skew”> tags and the <div> and <span> tags contained within. Those div and span tags are the extra markup needed to make all of the 2D transforms play nice with each other to generate the 45 degree angled headers.
The CSS used to generate the table is as follows:
.quick-nav-container {
background-color: #666666;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
z-index: 100;
padding: 30px 14px 14px 14px;
display: none;
}
.quick-nav-container h4 {
position:absolute;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
width: 112px;
top: 0px;
left: 0px;
text-align: center;
padding: 8px;
}
/* creates triangle */
.quick-nav-container h4:after {
content:"";
position:absolute;
bottom:-10px; /* value = - border-top-width - border-bottom-width */
left:56px; /* controls horizontal position */
border-width:10px 10px 0; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#666666 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
z-index: 1;
}
.quick-nav-container a.close {
position: absolute;
top: 4px;
right: -12px;
width: 16px;
height: 16px;
text-decoration: none;
color: #333333;
background-color: #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.quick-nav {
position: relative;
background-color: #FFFFFF;
font-size: 10px;
padding: 20px 90px 20px 20px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.quick-nav a {
color: #333333;
text-decoration: none;
font-size: 14px;
}
.quick-nav table th.skew {
height: 60px;
width: 40px;
position: relative;
vertical-align: bottom;
}
.quick-nav table th.skew > div {
position: relative;
top: 0px;
left: 30px;
height: 100%;
transform:skew(-45deg,0deg);
-ms-transform:skew(-45deg,0deg); /* IE 9 */
-moz-transform:skew(-45deg,0deg); /* Firefox */
-webkit-transform:skew(-45deg,0deg); /* Safari and Chrome */
-o-transform:skew(-45deg,0deg); /* Opera */
overflow: hidden;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.quick-nav table th.skew span {
transform:skew(45deg,0deg) rotate(315deg);
-ms-transform:skew(45deg,0deg) rotate(315deg); /* IE 9 */
-moz-transform:skew(45deg,0deg) rotate(315deg); /* Firefox */
-webkit-transform:skew(45deg,0deg) rotate(315deg); /* Safari and Chrome */
-o-transform:skew(45deg,0deg) rotate(315deg); /* Opera */
position: absolute;
bottom: 15px;
left: 1px;
display: inline-block;
width: 100%;
text-align: left;
}
.quick-nav table td {
width: 40px;
height: 35px;
text-align: center;
vertical-align: middle;
border: 1px solid #CCCCCC;
}
.quick-nav table td a {
display: block;
width: 100%;
text-align: center;
}
.quick-nav table td.project-name {
width: auto;
text-align: right;
font-weight: bold;
border: none;
padding-right: 8px;
}
.quick-nav table .odd {
background-color: #E8E8E8;
}
The most important sections are highlighted above in the selectors for “.quick-nav table th.skew,” “.quick-nav table th.skew > div,” and “.quick-nav table th.skew span.” This is where the rotation and absolute positioning happens to make the rotation happen correctly. For the carrot below, “QuickNav,” I used the speech bubbles technique described by Nicolas Gallagher at http://nicolasgallagher.com/pure-css-speech-bubbles/. The final result is below, pixel for pixel perfect with the design comp and a new technique that I will definitely be keeping in my back pocket for future projects.
This week for our all-staff meeting at EffectiveUI, our CEO gave a presentation on what we’ve learned from the customer experience research that we have been doing in order to continue to improve the experiences that our customers have with us and to strengthen those relationships. She used a word cloud of terms that our customers had used to illustrate both what we, as a company, are doing well, and what areas our customers perceive a need for improvement in. One of the phrases in the areas for improvement that stuck out to me was “industry knowledge.” She explained that our customers were looking for us to show more knowledge of their particular industry so that we could help guide them more effectively. This got me thinking more on what “industry knowledge” means for a software developer.
One of this things that I’ve said at numerous interviews in the past is how I think that Computer Science is a great generalist’s degree. Having a degree in Computer Science is like having a degree in problem solving. I can say with 100% certainty that I’ve never solved a computer problem for the sake of solving a computer problem. Any problem that I’m addressing is directly related to the needs of the business and the computer is simply a tool to accomplish that goal. I have to be able to understand the business problem in order to be successful.
In my career, I’ve developed software for the nuclear environmental cleanup, laboratory operations, time and attendance tracking, financial services, mine safety, telecommunications, real estate, and municipal management industries. All of those different industries span a career of just 14 years (counting my internship during college). In each project, I find myself needing to rapidly learn the business of my client in order to develop software that actually works for them.
Going into each of these projects, I usually know almost nothing about the industry or the business model. For example, I was asked in my interview at the Mine Safety and Health Information if I had a mobile device, continuous miner, and conveyer belt in a mine, what could the mobile device tell me about the continuous miner and conveyor belt. Having never had any contact with any mining equipment, I had a hard time coming up with a very detailed answer, but I asked a lot of questions to try to figure out what might be useful. If I can’t understand the conversation, I have no hope of understanding the problem well enough to build a solution. I have to be conversant in my client’s language in order for me to understand them and for them to trust my ability to deliver the solution that they need.
With all of that being said, I will never be the subject matter expert that my client is. I will always have to rely on them to some degree to be able to tell me if I’m pointing in the right direction. So how do I gain the industry knowledge that customers are asking for and demonstrate to them that I truly care about them and their business?
First, I listen and I ask a lot of questions. I have learned to be assertive about asking questions about terms, acronyms, and interactions that I don’t understand. I’m not shy about interrupting a customer if need be to ask them to explain a term or a concept that I don’t understand or I am not familiar with. I paraphrase the answers to make sure that I truly understood what they were trying to communicate. Through these questions I learn more about the company, the industry, and the business problems.
Second, I draw pictures. Diagrams are a software engineer’s best friend when it comes to understanding complex systems and business models and the relationships between them. Drawing a diagram of the problem space really helps me see the bigger picture.
Third, I read a lot. I read on a broad range of topics, both work related and not, to be able to understand a wide range of problems and ideas. Having this breadth of knowledge helps me see parallels between the customer’s current problem and others that might be related. I can say that I’ve solved a similar problem before or that I’m familiar with a similar concept, easing the customer’s concerns about lack of knowledge in their particular space.
Finally, I liberally search online. There is definitely a skill to locating the right information online and building a search to find it. It’s taken a lot of practice in critical thinking and information analysis to be able to separate the really useful information from the sheer volume of other noise online. The best result is usually not the first one.
This ongoing learning process about new problems and industries is one of my favorite things about being a software engineer. I consider myself very fortunate to be in a position where I get the opportunity to be constantly learning new things and taking on new projects. It’s important to me that my customers feel that I understand their business, their problems, and value them as a customer and learning their business is critical to accomplishing this.
Basecamp People Sync is now featured on the 37signals Basecamp Extras page. It’s listed as the last entry in the Miscellaneous section at the bottom of the page.
I just released my latest tool, Basecamp People Sync, on my Windows software page. Basecamp People Sync is a Microsoft Outlook 2010 add-in to create or update contacts from your 37signals Basecamp account. The add-in displays in the Microsoft Outlook 2010 ribbon in the Add-Ins tab. To update your contacts, simply click the Sync button in the ribbon. The add-in will update the contact's name, IM address, phone numbers, email address, job title, company information and picture. All changes made to any existing contact are saved in the contact's notes field.
Along with the posts that I’ve been getting back into making recently, I also spent quite a bit of time recently redeveloping the infrastructure of s-church.net. I rebuilt the site from the ground up using ASP.NET MVC 3, HTML5, CSS 3, and jQuery and I’d like to take some time to describe what I did from a technical standpoint.
The first part of what I did was to create a new ASP.NET MVC 3 project in Visual Studio. I then analyzed my existing site and and created MVC controllers for each of the main menu items that you see above. I rebuilt the main _Layout.cshtml master page for the site using HTML5 and the ASP.NET MVC 3 Razor view engine as seen in Master Layout code snippet below. I take advantage of the new HTML5 semantic tags like <header>, <nav>, <section>, <article>, and <footer>. The <header>, <nav>, and <footer> tags are relatively straightforward in their usage, but the <section> and <article> tags are less obvious. In this site, I use <section> as a container for various pieces of the layout. Each blog post or photo item container is an <article> in the semantic markup.
<div class="page">
<header>
<div id="title">
<h1>@ViewBag.Header</h1>
</div>
</header>
<nav>
<ul class="ssc_nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li><a href="@Url.Content("~/Resume.pdf")">Resume</a></li>
<li>@Html.ActionLink("Blog", "Index", "Blog")</li>
<li>@Html.ActionLink("Photo Album", "Index", "PhotoAlbum")</li>
<li>
<a href="#">Software</a>
<div class="ssc_sub_nav">
@Html.ActionLink("Windows 7 Gadgets", "Win7Gadgets", "Software")
@Html.ActionLink("Windows Mobile Smartphone", "WMSmartphone", "Software")
@Html.ActionLink("Windows Mobile Pocket PC", "WMPocketPC", "Software")
@Html.ActionLink("Windows", "MSWindows", "Software")
@Html.ActionLink("Pocket PC", "MSPocketPC", "Software")
@Html.ActionLink("Palm OS", "Palm", "Software")
</div>
</li>
<li>
@Html.ActionLink("Reading List", "Index", "ReadingList")
</li>
@if (Request.IsAuthenticated && User.IsInRole("Admin"))
{
<li>@Html.ActionLink("Admin", "Index", "Admin")</li>
}
</ul>
</nav>
<section id="main">
<div class="main_container">
@RenderBody()
</div>
<div class="side_nav">
<div class="container">
<img src="@Url.Content("~/Content/Images/side_nav_photo.jpg")" alt="Shane Church, Andrea Love, and Ethan Love-Church" class="side_photo" />
<h3>Contact</h3>
<a href="mailto:shane@s-church.net" class="logo_link">Email Me</a>
@RenderSection("SideNav", false)
</div>
@RenderSection("SideNavPostContainer", false)
</div>
<div class="clear"> </div>
</section>
<footer>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
Copyright © Shane Church 2011
</footer>
</div>
I built the menu hover and drop down behaviors myself using jQuery and some CSS. The behavior is relatively straightforward and, as I’ve been learning more about HTML, CSS, and JavaScript in my role at EffectiveUI, I found it very easy to implement the menu on my own as shown in the code snippet below.
var menuTimeout = null;
$(document).ready(function () {
$(".ssc_nav li").mouseenter(function () {
var $this = $(this);
$this.find(".ssc_sub_nav").slideDown(200, function () {
menuTimeout = window.setTimeout(function () {
$this.find(".ssc_sub_nav").slideUp(200);
}, 500);
});
});
$(".ssc_sub_nav a").mouseenter(function () {
window.clearTimeout(menuTimeout);
menuTimeout = null;
});
$(".ssc_sub_nav a").mouseleave(function () {
window.clearTimeout(menuTimeout);
menuTimeout = null;
var $this = $(this);
menuTimeout = window.setTimeout(function () {
$this.parent().slideUp(200);
}, 500);
});
});
All of the styling of the new site is using CSS 3 with minimal use of images for item backgrounds. This significantly improves the download size and speed of the individual pages by reducing the number of HTTP requests for images and allowing the browser to do the rendering work. I’m using Eric Meyer’s Reset CSS to reset all of the CSS settings across all browsers before applying my own styling to achieve consistency between all of the different browsers. One annoyance to me in the new CSS 3 implementations is the addition of browser specific prefixes like -moz- for Firefox and -webkit- for Chrome and Safari and -ie- for Internet Explorer. This requires me as the developer to know a lot more about the workings of each browser to achieve consistent results and I end up having the W3Schools reference pages open constantly while developing. For example, the gradient in the main menu is described by the CSS code below.
ul.ssc_nav {
height: 34px;
background: #999999; /* Old browsers */
background: -moz-linear-gradient(top, #999999 0%, #5B5B5B 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#5B5B5B)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999999 0%,#5B5B5B 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999999 0%,#5B5B5B 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #999999 0%,#5B5B5B 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#5B5B5B',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #999999 0%,#5B5B5B 100%); /* W3C */
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
z-index: 200;
}
I wanted to make sure that I maintained all of the existing links which were in the format of /Blog.aspx?id=<id> even though I was switching the site to use a more SEO-friendly URL routing scheme of /Blog/<id>, so I added a route in Global.asax to my LegacyController which then executes a HTTP 301 Permanent Redirect to the new URL so that search engines and people with favorites marked for the old URLs will continue to work correctly. The routing entry is as follows:
routes.MapRoute(
"{*allaspx}",
@"{id}.aspx",
new { controller = "Legacy", action = "Index" });
and the PermanentRedirectResult MVC action is highlighted below.
public class PermanentRedirectResult: ActionResult
{
//...
public override void ExecuteResult(ControllerContext context)
{
if (_action == null || _controller == null)
{
context.HttpContext.Response.Status = "404 Not Found";
context.HttpContext.Response.StatusCode = 404;
}
else
{
context.HttpContext.Response.Status = "301 Moved Permanently";
context.HttpContext.Response.StatusCode = 301;
context.HttpContext.Response.AppendHeader("Location", ((Controller)(context.Controller)).Url.Action(_action, _controller, _routeValues));
}
}
}
During the transition, I also converted my photo album from local file storage to use Amazon’s S3 service. This change required me to implement a simple controller to use Amazon’s AWS SDK and then I added an ASP.NET MVC controller method in my photo album controller to actually respond with the image from the Amazon service as shown below. This conversion also required me to retool my custom screensaver that displays images from this site (shown to the left) and my Windows Live Photo Gallery plugin for publishing images to the site to use the Amazon S3 service as well.
public ActionResult Image(long id)
{
MySQLSiteModel model = new MySQLSiteModel();
var photo = (from p in model.photo
join pg in model.page on p.LINK_ID equals pg.ID
where p.ID == id
select new PhotoViewModel() { ID = p.ID, CategoryID = pg.ID, CategoryName = pg.DISPLAY_NAME, Caption = p.CAPTION, File = p.FILE, UpdatedDate = p.UPDATED_DATE }).FirstOrDefault();
try
{
S3Controller amazonController = new S3Controller();
Stream data = amazonController.ReadObject("photos", photo.CategoryID.ToLower() + "." + photo.File.Substring(photo.File.LastIndexOf('/') + 1).ToLower());
return File(data, "image/jpeg");
}
catch
{
return new HttpStatusCodeResult(404);
}
}
As you can see illustrated in the snippet above, I have also moved my database connection code to use the Microsoft Entity Framework using the MySQL .NET provider. The database connections are then handled in code using LINQ-to-Entities, significantly reducing the amount of raw SQL code that I needed. I did run into some issues with the MySQL provider not supporting some of the standard LINQ operations like .Take() consistently, though I don’t have a good code example for that since I came up with some workarounds.
I also implemented the Metaweblog API in order to facilitate using Windows Live Writer to publish to the blog. I implemented this using the XML-RPC.Net library as a ASP.NET generic handler. The interface is shown below.
public interface IMetaWeblog
{
#region MetaWeblog API
[XmlRpcMethod("metaWeblog.newPost")]
string AddPost(string blogid, string username, string password, Post post, bool publish);
[XmlRpcMethod("metaWeblog.editPost")]
bool UpdatePost(string postid, string username, string password, Post post, bool publish);
[XmlRpcMethod("metaWeblog.getPost")]
Post GetPost(string postid, string username, string password);
[XmlRpcMethod("metaWeblog.getCategories")]
CategoryInfo[] GetCategories(string blogid, string username, string password);
[XmlRpcMethod("metaWeblog.getRecentPosts")]
Post[] GetRecentPosts(string blogid, string username, string password, int numberOfPosts);
[XmlRpcMethod("metaWeblog.newMediaObject")]
MediaObjectInfo NewMediaObject(string blogid, string username, string password,
MediaObject mediaObject);
#endregion
#region Blogger API
[XmlRpcMethod("blogger.deletePost")]
[return: XmlRpcReturnValue(Description = "Returns true.")]
bool DeletePost(string key, string postid, string username, string password, bool publish);
[XmlRpcMethod("blogger.getUsersBlogs")]
BlogInfo[] GetUsersBlogs(string key, string username, string password);
[XmlRpcMethod("blogger.getUserInfo")]
UserInfo GetUserInfo(string key, string username, string password);
#endregion
}
One final piece to note is the use of jQuery to make the pages more interactive. For each major section of the site, I wrote the code as a jQuery Plugin in order to encapsulate the code for each section. This is a technique that we commonly use at EffectiveUI to make it easier for our clients to maintain the code after a project is complete. An example from the Photo Album plugin that I wrote is shown below.
//jquery.PhotoAlbum.js
//Copyright © Shane Church 2011
(function ($) {
var methods = {
init: function () { },
loadPage: function (options) {
var defaults = {
href: "",
callback: function () { }
};
var opts = $.extend(defaults, options);
var $this = $(this);
$.ajax({
url: opts.href,
type: "GET",
dataType: 'html',
success: function (data) {
var $data = $(data);
$(".photos_container").empty();
$(".photos_container").append($data.find(".photos_container").children());
$(".pager").empty();
$(".pager").append($data.find(".pager").children());
opts.callback();
},
error: function (request, status, error) {
}
});
},
showPhoto: function (options) {
var defaults = {
href: "",
title: "",
category: "",
file: "",
callback: function () { }
};
var opts = $.extend(defaults, options);
var $content = $("#modal-view-photo");
$content.find(".image img").attr("src", opts.file).attr("alt", opts.category + " - " + opts.title);
$content.find("h4").text(opts.title);
$content.find("h5").text(opts.category);
$content.find("a.close").unbind("click").click(function () {
$().HideModal({ strId: "#modal-view-photo" });
return false;
});
var options = {
strId: "#modal-view-photo"
};
$().ShowModal(options);
}
};
$.fn.PhotoAlbum = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.PhotoAlbum');
}
};
})(jQuery);
As you can see, this was a pretty major rearchitecture of the entire site, but it gave me the opportunity to put a lot of the new techniques that I’ve learned over the last year into practice as well as build an updated portfolio site. I hope this detailed tour of the site proves useful. Feel free to comment or contact me directly with any comments or questions!
A few weeks ago, I submitted an abstract of an article on the Cartegraph mobile prototype that I worked on for EffectiveUI to MSDN Magazine. The concept is about addressing the costs of building a mobile application for all of the rapidly proliferating mobile platforms (iPhone, iPad, Android, Windows Phone) by building the application primarily as a web application using ASP.NET MVC 3 and jQuery Mobile while still being able to leverage native hardware features like the camera, GPS, or accelerometer. A few minutes ago I got a phone call from Dr. James McCaffrey of Microsoft Research and author of MSDN Magazine’s monthly Test Run column. The magazine editors liked the abstract, had asked him to review my submission from a technical perspective and he had a few clarifying questions that he wanted to ask. He really liked the idea and is recommending to them that they move forward with the idea toward publication. He commented that the abstract was really well written and also offered some advice about how to catch the readers with the concept in the first few sentences of the article. Hopefully, with any luck, I’ll have a byline in MSDN Magazine here in a few months.
I spent Monday through Thursday in Dubuque visiting the Cartegraph offices again. We were out there again to talk through common agile software development process mistakes, discussing the mistakes that they were making and how to improve their process.
Some of the high level points we were highlighting were:
I really think the first and last points are probably the most important for most development organizations. I realize that agile and/or scrum is the big buzzword for development methodology at this point, but the reality is that agile isn’t a fit for every organization. There are a number of cultural issues that can make agile development unsuccessful in a given organization and it is important to have the self-awareness within the organization to recognize and correct those shortcomings or choose a different methodology that suits the organization better.
Comments