Index of Demonstrations

Various code snippets, tips, techniques and complete solutions.

Many of the demonstrations below are relatively old and do not reflect modern JavaScript techniques I currently embrace and promote. An analysis of the JS source (especially the Kendo UI related stuff) will reveal a number faux pas and anti-patterns. For example:

  • pollution of the global scope; lack of closures (for data hiding and inheritance)
  • lack of custom callbacks and asynchronous best-practices
  • lack of object patterns; module and revealing module pattern, mixins and namespacing

In June of 2016, I took Microsoft’s 70-480 exam. Although I passed, the experience highlighted how much I still need to learn about ECMAScript 5 (ES5). Since taking this test, I’ve embarked on a mission to relearn JavaScript.

Interestingly, the process of understanding and appreciating object-oriented JavaScript (for ES5), has accelerated my transition to ES6 and beyond. Hopefully, I'll be adding more blogs and demos soon!

Todo SPA - Single Page Application utilizing REST, Web API and Vue.js

A simple SPA (no backend data persistence for security reasons) to accompany blog post and GitHub repository.

Note: the big obnoxious spinner is by 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.

Libraries: .NET Framework 4.6.1, Web API 5.2.3, Vue.js v2.3.3, vue-router v2.5.3 and SQL Server 2016 (v13.0.4001 SP1)

Crane Rigging Demo - a complete MVC app. based on a live, in-production system

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.

Video tutorial/demo: YouTube

Libraries: .NET Framework 4.5.1, ASP.NET MVC 5.2.2, Kendo.Mvc 2015.1.429.545, EF 6.0, Identity 2.0, LinqKit

Sales Tracker Demo - a complete MVC app. based on a retired system (in-prod. from 2014-16)

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

Libraries: .NET Framework 4.5.1, ASP.NET MVC 5.2.2, Kendo.Mvc 2014.2.1008.545, EF 6.0, WebMatrix SimpleMembership 3.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

Daily Production Logarithmic Charting - a single page app. demo

This demonstration uses historical well data, (with scrambled names), from the Anadarko Basin. The emphasis is on dynamic and responsive logarithmic charting.
To activate chart:
1) select records via drag-drop or by date range
2) click bar chart icon next to date range
3) resize window, (or reorient device), for slick redraw!

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

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

SVG Logo Magic - a single page demo and still a work in progress.

This is for a future demo/blog about breathing new life into an old logo's via SVG.