A hodgepodge of examples in web design, web application development and custom business solutions. The first two are beta versions of web app's I built (custom and turn-key) for clients.

Notes:

All of the data is scrambled or fictitious and updates are ignored (not saved in the backend database).

Crane Rigging Demo - a complete MVC application

This ASP.NET MVC application is a makeover of a Microsoft Access application that could not practically be scaled up to meet new and evolving business needs. It is designed to track crane rigging; straps, slings, shackles, cables, chains, etc. Equipment that is essential to safe lifting operations, and regulatory compliance.
I am currently tinkering with a multi-tenant upgrade (subscription-based SaaS) to this app,

Video tutorial/demo: YouTube

Packages/libraries:

  • .NET Framework 4.5.1
  • ASP.NET MVC 5.2.2
  • Kendo.Mvc 2015.1.429.545
  • Kendo UI/jQuery/Bootstap 3.2
  • SQL Server 2016
  • Entity Framework 6.1.3
  • Identity 2.1
  • LinqKit 1.1.1

Sales Tracker Demo - a complete MVC application

This ASP.NET MVC application demonstrates business process analysis and automation in action. It is designed to simplify a complex data entry and receipting process for products used in the production of natural gas. The same interface incorporates a grid for data mining, reporting and extraction. The 'Overview' tab of the Login screen provides more detail.

Related blog post(s): BPA case study that highlights the Sales Tracker

Packages/libraries:

  • .NET Framework 4.5.1
  • ASP.NET MVC 5.2.2
  • Kendo.Mvc 2014.2.1008.545
  • Kendo UI/jQuery
  • SQL Server 2016
  • Entity Framework 6.1.1
  • WebMatrix SimpleMembership 3.0

Daily Production Logarithmic Charting - a single page app. demo

This demonstration uses historical well data (well names randomized), from the Permian Basin. The emphasis is on dynamic and responsive logarithmic charting.

The initial load automates a user selecting a well, rows from the grid and clicking on the chart button.

To trigger a slick redraw (of relatively complex data), resize the window or reorient (portrait/landscape) a mobile device.

Related blog post(s): Logarithmic Line Charting via Kendo UI

Misc. graphics: SVG, Adobe Photoshop and MS Visio

Miscellaneous tinkering with SVG and old graphics. Logos, trademarks etc.

WellPro Visio Add-in (VSTO and WinForms)

WellPro is a Microsoft Visio add-in built around VSTO (and MS Office PIA's), .NET Framework 2.0, C#, and WinForms
It is used by oil and gas operators to digitalize well sites and help manage construction, maintenance and regulatory obligations.

  • Create scaled well site drawings
  • Generate site survey data and work orders
  • Calculation of secondary containment requirements for SPCC compliance

The add-in is no longer maintained, but wow, what a cool project!

I started it in 2006, and it coincided with learning C#, .NET Framework 2.0, and Visual Studio Tools for Office (VSTO).

jobChum Chrome Extension - a Chrome/Browser extension à la Vue.js core lib's

This extension automates the search for jobs on Upwork.com. It utilizes a Vue CLI plugin that makes it a breeze to spin-up a robust extension project. It also utilizes a nifty monkey patch of the XMLHttpRequest object/api.

Related blog post

Related YouTube video

GitHub

Tools and libraries:

  • NPM/webpack/Babel (VS Code)
  • Vue.js, Vuex and Vue Router
  • Vue CLI with vue-cli-plugin-browser-extension
  • Mozilla's webextension-polyfill (Promise polyfill)
  • Custom XMLHttpRequest monkey patch

Super-simple SPA Demo - Single Page (ToDo) Application to demo REST, Web API and Vue.js

A simple SPA to accompany blog post and GitHub repository. There's no backend data persistence; just a demo!

Note: the big obnoxious spinner is by design...to highlight user actions that trigger a REST/AJAX request. See related blog.

Related blog post(s): Simply SPA – REST, Web API and Vue.js

Related video: YouTube Playlist - an introduction to using Fiddler (with Visual Studio 2015) to visualize and debug SPA, REST/Web API and HTTP.

Packages/libraries:

  • .NET Framework 4.6.1
  • Web API 5.2.3
  • Vue.js v2.3.3
  • vue-router v2.5.3
  • SQL Server 2016
  • Entity Framework 6.0

Tabs Widget Unfurling - a single page demo showing how to toggle a tab control to a print-friendly layout.

Ah yes, the ubiquitous tab control, a pattern no web designer can ignore. Of course it’s a markup metaphor for the old, 3x5 tabbed index cards or tabbed file folders. Although there are many variations, they all generally work the same way, (see demo). They are a great...
Update! Added a second demo page to highlight responsive toggling via matchMedia API

Related blog post(s): Tabs Widget Print Layout Toggle

Kendo Grid Excel Export (simple) - a single page app. demo

This is an example of exporting data from a simple Kendo Grid, (via the MVC Wrappers), to Excel. It highlights the simplicity of switching on the "Export to Excel" functionality for any Kendo grid.

Related blog post(s): Revisiting the Kendo Grid Excel Export

Kendo Grid Excel Export (complex) - a single page app. demo

This is an example of exporting data from a relatively complex Kendo Grid configuration. This example also uses the MVC grid wrappers to highlight how fairly complex grid- based user settings are automatically reflected to the spreadsheet. User applied sorts, filters, groupings, aggregate functions, and even frozen columns are all honored in the spreadsheet.

Related blog post(s): Revisiting the Kendo Grid Excel Export

Bootstrap 3 Grid Helper - a single page demo

This is a simple demonstration of the Bootstrap 3 fluid and responsive grid system.

Bootstrap 3 + Custom Fluid Tiles - a single page demo

This illustrates one approach to implementing square and rectangular tiles inside of Bootstrap 3 containers.

Kendo Widgets in BS3 Grid - a single page demo

This is a simple demonstration that combines a few Kendo UI widgets inside of Bootstrap 3 grid containers.

Your User-Agent - a single page demo

This explains a little about User-Agent; i.e. the HTTP header field protocol.

MVC Null Layout - a single page demo

This demonstrates what happens when your MVC view defines a "null" _Layout.cshtml.

Related blog post(s): in progress