Modernizing Kitsap County’s Parcel Details

Parcel Details is a public service offered by Kitsap County that allows anyone to look up information on a parcel of land using a tax account, street address, or parcel ID number. Originally this application built over a period of about a year by a single developer. As part of my role with the County I took over as the maintainer of this web app in February of 2018.

In the gallery above you can see the current release of Parcel Details that I created over the past couple of months. In the gallery below you can see what the public release of this web app looked like when I took it over.

There are some really clear differences between these two versions of the app, but for me, the biggest difference is adding responsive design in the current build. Before the current release, Parcel Details was a fixed width web app; now it scales from phones to 21:9 desktop monitors. This is all thanks to scaffolding Bootstrap 3.3 over the top of the custom UI elements provided by a company called Telerik.

Integrating Responsive Design

The creator of Parcel Details built it using rapid application development or RAD tools from Telerik. These tools are drag and drop UI elements made available through a Visual Studio extension and a licensing fee. The database connections are made using Table Adapters and then the application sits on top of ASP.NET and .NET 4.0. In the current iteration you’ll see that it’s been upgraded to the latest 4.7.x release of .NET.

If you use Chrome’s inspect tool you’ll see that the pages are structured as a series of tables nested inside of other tables. At times this nesting is up to four layers deep. This complicated the process of applying bootstrap to this project and required me to spend some time removing unnecessary table nesting on the master page and in the views which when present either broke Bootstrap’s container system or signaled for line break elements where they weren’t necessary.

Another wrinkle to this process was trying to understand how Telerik’s RAD UI elements were styled. Simply referencing an element by its class tag in CSS resulted in no changes. The styling profile that Telerik was providing as a linked script was overriding those changes. To disable the default UI style I had to go element by element and table by table to add a flag to disable the built-in styling and give the element the tags it need to get styled by Bootstrap. Needless to say, this was a time-intensive trial and error prone process.

Trial and Error

The menu structure for this application is also unusual in that the nav button elements are generated by a loop at runtime that iterates through an XML list of parent and child navigation nodes. For web apps I’m used to seeing navigation elements defined as part of a static list rather generated through a loop, so this was rather confusing for me. Once I realized what was going on it was only a matter of finding the navigation generation class and having it assign each node a CSS class that Bootstrap could style like "btn btn-primary col-xs-4".

Finally, there was a lot of trial and error in tuning of this UX. Because I was going through and modifying the elements individually there were a number of times when I found a new page in Parcel Details that had unstyled or incorrectly styled elements. Additionally working through and controlling how the menu elements reflowed at different window widths is a process that requires a fair bit of experimentation.

With those major issues worked out I overrode the Bootstrap’s primary color with the County’s shade of blue, implemented a header bar with the logo, and added the footer from the main website. The purpose of these changes was to give Parcel Detail’s a look and feel that was consistent with the rest of the County’s online presence.

Adding Telemetry and Logging

The last step was to take advantage of the free services that Microsoft offers through its Azure platform and add Application Insights to this project. This tool handles all the logging and profiling that this app previously used a custom service to handle and dumps it into a nicely styled dashboard on my Azure account that I can share with my coworkers.

I can also use the telemetry it provides to trigger custom events like email blasts tied to downtime events. The catch is that you can only log up to a 1 GB of data per month per app before Azure will bill your account. This is a cap that was fine for testing and development but was surpassed in production. Luckily my account is credited with $50 a month thanks to my MSDN subscription which is more than enough to cover the $0.30 Azure is charging me.

For my purposes, Application Insights is a perfect fit and it has really streamlined my process for dealing with logs and troubleshooting exceptions. Often times I’m able to identify a service interruption or broken page using Application Insights before the help desk starts getting reports.

A Roadmap for the Future

With this mobile friendly conversion of the front-end of Parcel Details the next steps are to improve the page load performance of the application, improve the stability of this app’s server infrastructure, modernize the deployment model, and build out a suite of unit tests to prevent regressions. I call this a user-first application improvement roadmap. I’m starting with the changes that will have the biggest impact on the public’s perception of the application first, and then moving toward the items that will improve my perception of the application’s quality.

You can head over the see the public version of Parcel Details.

Kick the tires and ping me if you find anything. 😀