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:- With the exception of the Visio Add-in, all examples relate to web design and development.
- In the past, I leveraged the Telerik/Kendo UI Grid quite often, I became a big fan.
- Given my proximity to the San Juan Basin, I did lots work in the energy industry.
All of the data is scrambled or fictitious and updates are ignored (not saved in the backend database).
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
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
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
Miscellaneous tinkering with SVG and old graphics. Logos, trademarks etc.
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).
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.
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
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
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
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
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
This is a simple demonstration of the Bootstrap 3 fluid and responsive grid system.
This illustrates one approach to implementing square and rectangular tiles inside of Bootstrap 3 containers.
This is a simple demonstration that combines a few Kendo UI widgets inside of Bootstrap 3 grid containers.
This explains a little about User-Agent; i.e. the HTTP header field protocol.
This demonstrates what happens when your MVC view defines a "null" _Layout.cshtml.
Related blog post(s): in progress