Blog posts and Reddit threads give opinions. I wanted code. So I had Claude Code build the same dashboard — stat cards, charts, data tables, activity feeds, dark mode toggle — eight times, once with each of the most popular React UI libraries available today. Same Vite + React 19 + TypeScript + Recharts stack across the board. The only variable is the UI library.

The result is a 1-for-1 reference implementation I can pull from when starting future projects instead of wondering “what does a data table actually look like in Mantine vs. MUI?”

The Libraries

Here’s what made the cut, with production bundle sizes from the identical dashboard build:

What Stood Out

Bundle size tells a clear story. Tailwind CSS (573 KB) and shadcn/ui (577 KB) produce the smallest builds by a wide margin. Utility CSS tree-shakes aggressively. Ant Design at 1.3 MB is more than double — its CSS-in-JS runtime and comprehensive component set add real weight.

shadcn/ui is the sweet spot for most new projects. Near-smallest bundle, beautiful defaults, you own the component code, built on Radix for accessibility. It’s rapidly becoming the de facto standard for modern React apps, and after building this comparison I understand why.

MUI is still the safe enterprise pick. The most mature, battle-tested option with the largest ecosystem. If Material Design aesthetic works for your use case, the documentation and community support are unmatched.

Mantine is the hidden gem. 100+ components, 50+ hooks, form handling, notifications, rich text editor — all free, no paid tiers. CSS Modules instead of CSS-in-JS means zero runtime overhead. If you need MUI-level completeness with better performance, Mantine deserves a serious look.

React Bootstrap shows its age. Still the fastest path for teams with Bootstrap experience, but the aesthetic feels dated and the component set is limited compared to modern alternatives.

Recommendations by Use Case

• Enterprise / Internal Tools → MUI or Ant Design for comprehensive component sets and enterprise support
• Modern SaaS / Startup → shadcn/ui for owned components, beautiful defaults, tiny bundle
• Performance-Critical → Tailwind CSS or shadcn/ui for smallest bundles, zero CSS-in-JS runtime
• Full-Featured + Free → Mantine for the most complete free library available
• Rapid Prototyping → Mantine or React Bootstrap for familiar patterns and fast iteration
• Design-Forward Consumer App → HeroUI or Chakra UI for polished aesthetics and smooth animations

The Process

The whole comparison — eight fully functional dashboard implementations, side-by-side screenshots in light and dark mode, and a detailed report — took about an afternoon with Claude Code doing the heavy lifting. Each implementation runs on its own port (5001-5008) so you can compare them live in the browser.

Having identical reference implementations removes the guesswork. Next time a project needs a data table with sorting, or a dashboard layout with responsive cards, I have working code in eight different libraries to pull from instead of reading docs and hoping the API works how I think it does.

The full report with screenshots and detailed pros/cons analysis for each library is available at the project repository.

On Windows (and other platforms) you can grab images off the clipboard. The green light hit me today and I set up a custom Claude command with Claude’s help.

Setup

Create two files in your ~/.claude/ folder:

commands/clip.md

---
allowed-tools: Bash(powershell.exe:*), Read
description: Grab an image from clipboard for analysis
---

Capture the clipboard image by running the clipboard-image.ps1 script:

powershell.exe -NoProfile -ExecutionPolicy Bypass -File "C:\Users\YOUR_USERNAME\.claude\clipboard-image.ps1"

The script outputs the saved image path (with timestamp) to stdout. Read the image file at that path to analyze it.

After analyzing the image, address the user's request: $ARGUMENTS

clipboard-image.ps1

# clipboard-image.ps1
# Saves clipboard image to temp folder with timestamp

Add-Type -AssemblyName System.Windows.Forms

$img = [System.Windows.Forms.Clipboard]::GetImage()

if ($img) {
    $timestamp = Get-Date -Format "yyyyMMdd_HHmmss"
    $path = "$env:TEMP\clipboard_$timestamp.png"
    $img.Save($path)
    Write-Host $path
} else {
    Write-Error "No image in clipboard"
    exit 1
}

Usage

/clip can you fix the button alignment shown here to be below the cancel button

What Happens

1. Claude runs the PowerShell script to capture the clipboard image
2. Saves it to %TEMP%\clipboard_TIMESTAMP.png
3. Reads the image file
4. Analyzes it and responds to your prompt

Try It

1. Copy an image to your clipboard (e.g., take a screenshot with Win+Shift+S)
2. Type /clip describe what you see

The command is stored at ~/.claude/commands/clip.md so it works in any Claude Code session.

Update: January 13, 2026

I refactored to use an external PowerShell script instead of an inline command. On Windows, being more explicit with powershell.exe and the full script path prevents Claude from iterating on a working script each time the command runs.

Real-world test: My wife had knee surgery yesterday and I copied one of the doctor-supplied arthroscopic images to the clipboard:

❯ /clip what is this an image of

● Bash(powershell.exe -NoProfile -ExecutionPolicy Bypass -File "...")
  ⎿  C:\Users\toddw\AppData\Local\Temp\clipboard_20260113_103327.png

● Read(~\AppData\Local\Temp\clipboard_20260113_103327.png)
  ⎿  Read image (1.5MB)

● Arthroscopic surgery image. Looks like a view inside a joint
  (likely shoulder or knee) through a scope. You can see:

  - Smooth cartilage surface (left side, cream-colored dome)
  - Torn/damaged tissue (white fibrous material in center)
  - Surgical instrument (metal probe on right)
  - Typical circular arthroscope view with black border

  Possibly a labral tear repair or rotator cuff procedure based
  on the anatomy visible.

Claude nailed it.

Microsoft rebranded Team Foundation Service as Visual Studio Online with the launch of Visual Studio 2013 last fall. Visual Studio Online enables team collaboration using either Git or TFS source code control directly inside Visual Studio 2013, web browser, or the command line. Microsoft is entering a space dominated by GitHub & Bitbucket, and developers will seek familiar workflows and features offered by by these platforms.

GitHub Fork

GitHub established the paradigm of forking, upstream repositories, and pull requests for a lot of developers. VonC put together a nice graphic to illustrate the relationship of repositories in his response to a Stack Overflow question on the topic.

GitHub simplifies the process of forking an upstream repository with the simple click of the Fork button:

Visual Studio Online Fork

Visual Studio Online might not currently have a Fork button but the process of forking Git repositories between accounts is quite straightforward and involves:

1. Creating the target project to contain the fork repository
2. Cloning the upstream repository
3. Adding a remote origin link to the fork
4. Pushing the cloned repository to the fork origin

In this scenario, I will fork a Git repository name VisualStudioOnlineFork from an upstream master repository located in woodcp.visualstudio.com to a fork project located in toddwood.visualstudio.com using the owner account of the fork repository. The fork project owner account had access granted to the upstream repository by the upstream owner account.

Create Fork Repository

Login to the fork account and create a new team project named the same as the upstream repository. Technically the names do not need to match but that is the convention established by the GitHub Fork button.

Once the project is created, Visual Studio Online will display the empty repository and instructions on how to set the remote and push the upstream or any existing repository:

Clone Upstream Repository

With the target and empty fork repository created, we can clone the upstream repository to our local computer. Access the upstream repository in Visual Studio Online if you need  to identify the clone Url:

A nice feature of the git clone command is to set the origin name to upstream when cloning the master repository using the --origin=upstream directive:

C:\> mkdir fork
    Directory: C:\
Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d----          1/3/2014   8:58 PM            fork

C:\> cd fork

C:\fork> git clone --origin=upstream https://woodcp.visualstudio.com/DefaultCollection/_git/VisualStudioOnlineFork
Cloning into 'VisualStudioOnlineFork'...
remote:
remote:                    fTfs
remote:                  fSSSSSSSs
remote:                fSSSSSSSSSS
remote: TSSf         fSSSSSSSSSSSS
remote: SSSSSF     fSSSSSSST SSSSS
remote: SSfSSSSSsfSSSSSSSt   SSSSS
remote: SS  tSSSSSSSSSs      SSSSS
remote: SS   fSSSSSSST       SSSSS
remote: SS fSSSSSFSSSSSSf    SSSSS
remote: SSSSSST    FSSSSSSFt SSSSS
remote: SSSSt        FSSSSSSSSSSSS
remote:                FSSSSSSSSSS
remote:                  FSSSSSSs
remote:                    FSFs    (TM)
remote:
remote:  Microsoft (R) Visual Studio (R) Team Foundation Server
remote:
Unpacking objects: 100% (3/3), done.
Checking connectivity... done

Configure Remote Origin

At this point, we have cloned the repository with only a remote named upstream pointing to the master repository. Referencing the bare repository instructions in the fork repository, we add the remote origin pointing to the fork repository location:

C:\fork> cd .\VisualStudioOnlineFork

C:\fork\VisualStudioOnlineFork [master]> git remote add origin https://toddwood.visualstudio.com/DefaultCollection/_git/VisualStudioOnlineFork

Push to Fork

Once again, using the bare repository instructions we perform a git push -u origin --all to complete the fork process:

C:\fork\VisualStudioOnlineFork [master]> git push -u origin --all
Counting objects: 3, done.
Writing objects: 100% (3/3), 250 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
remote: Analyzing objects (3/3) (2 ms)
remote: Storing pack file and index...  done (800 ms)
To https://toddwood.visualstudio.com/DefaultCollection/_git/VisualStudioOnlineFork
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

The fork of the upstream repository is now complete and available in Visual Studio Online:

Visual Studio Online Merge Upstream Changes

As time progresses the upstream repository will diverge from the forked repository. The fork maintainer can easily merge the upstream changes by fetching from upstream, merging master, and pushing to origin. This process is no different than when dealing with GitHub hosted repositories.

Upstream Changes

C:\WCP\VisualStudioOnlineFork [master]> echo Downstream Merge >> .\README.md
C:\WCP\VisualStudioOnlineFork [master +0 ~1 -0]> echo MIT >LICENSE.md
C:\WCP\VisualStudioOnlineFork [master +1 ~1 -0 !]> git add -A
C:\WCP\VisualStudioOnlineFork [master +1 ~1 -0]> git commit -m "Added LICENSE and updated README"
[master 7f7d2ab] Added LICENSE and updated README
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 LICENSE.md
C:\WCP\VisualStudioOnlineFork [master]> git push
Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (4/4), 368 bytes | 0 bytes/s, done.
Total 4 (delta 0), reused 0 (delta 0)
remote: Analyzing objects (4/4) (2 ms)
remote: Storing pack file and index...  done (374 ms)
To https://woodcp.visualstudio.com/DefaultCollection/_git/VisualStudioOnlineFork
   d2c3b1a..7f7d2ab  master -> master
C:\WCP\VisualStudioOnlineFork [master]>

Downstream Merge

C:\WCP\VisualStudioOnlineFork [master]> cd C:\fork\VisualStudioOnlineFork
C:\fork\VisualStudioOnlineFork [master]> git fetch upstream
remote: Microsoft (R) Visual Studio (R) Team Foundation Server
Unpacking objects: 100% (4/4), done.
From https://woodcp.visualstudio.com/DefaultCollection/_git/VisualStudioOnlineFork
   d2c3b1a..7f7d2ab  master     -> upstream/master
C:\fork\VisualStudioOnlineFork [master]> git merge master upstream/master
Updating d2c3b1a..7f7d2ab
Fast-forward
 LICENSE.md | Bin 0 -> 12 bytes
 README.md  | Bin 26 -> 64 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 LICENSE.md
C:\fork\VisualStudioOnlineFork [master]> git push
Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (4/4), 368 bytes | 0 bytes/s, done.
Total 4 (delta 0), reused 0 (delta 0)
remote: Analyzing objects (4/4) (2 ms)
remote: Storing pack file and index...  done (496 ms)
To https://toddwood.visualstudio.com/DefaultCollection/_git/VisualStudioOnlineFork
   d2c3b1a..7f7d2ab  master -> master
C:\fork\VisualStudioOnlineFork [master]>

Conclusion

I am a big fan of GitHub but when your clients decide to use Visual Studio Online that is exactly what you do. However, this does not mean you need to abandon certain Git repository work flows and setups that are proven to work.

I have been using Visual Studio Online for the past three months without any complaints. The integration with Visual Studio 2013 is very nice and the agile management online is well done. The lack of a Fork button on Visual Studio Online is a minor inconvenience considering the process of forking repositories is still possible as I demonstrated.

Introducing case sensitive file paths into the git index on a case insensitive operating system like Windows is easier than you think. A simple ‘ git mv .\Where\Waldo where\is\Waldo' is all you need to create two separate paths in the git index, but the Windows working directory will only report one. There might be git config settings that help avoid this problem, but controlling the settings and behavior of 20+ contributors on a project team is nearly impossible.

The problem is exacerbated when hundreds of files are moved during a repository layout reorganization. If the user moving the files is not careful, these case sensitive path names will pollute the git index but appear fine in the working directory. Cleaning up these case sensitive file path issues on Windows is tedious, and this is where Git Unite helps out.

Git Unite will search the git repository index for file paths that do not match the same case that Windows is using. For each git index path case mismatch found, Git Unite will update the git index entry with the case reported by the Windows file system.

Usage

Usage: Git.Unite [OPTIONS]+ repository
Unite the git repository index file paths with current Windows case usage.
If no repository path is specified, the current directory is used.

Options:
      --dry-run              dry run without making changes
  -h, --help                 show this message and exit

History

I work on a project that has one particular git repository tracking over 7,000 files. The repository contains a mixture of ASP.NET MVC3 code, SQL Server SSIS ETL packages, and PowerShell scripts. It all started one day when an ETL developer could not locate the package she developed on the GitHub web site.

I took a look at the git repository on her machine and the ETL package was clearly there under an Etl\Some\Dir\Path folder. The repository reported being up to date with origin/master, but it took several minutes before I noticed an etl and Etl folder on the GitHub web site.

It turns out that the ETL team was in the process reorganizing the ETL packages into a new directory structure layout. I booted up a VM running Ubuntu and cloned the repository down to a case sensitive file system. I found 694 ETL files that were tracked in the git index with a directory path case different than the one reported by the Windows file system.

I fixed the problem by using a combination of find, sort, and awk to build a bash script to run the 694 git mv commands. This was a painful process that I did not want to repeat so I decided to build a tool anyone on the team could use on Windows to fix the problem.

In fact, two months later the same issue appeared again in a different repository. This time I was able to install the Git Unite utility on the user’s machine and fix the issue in a couple minutes. We tracked down the source of the problem to a developer that hand-typed the target directory of a git mv command in all lowercase.

Example Scenario

Here is a representative example using Posh-Git on Windows 7 as to how someone can introduce case sensitive file paths on a case insensitive file system.

Step 1 – Create a new git repository and push it to GitHub

C:\demo> mkdir Where
C:\demo> touch .\Where\Waldo
C:\demo> touch .\Where\IsHere
C:\demo> git init .
Initialized empty Git repository in C:/demo/.git/
C:\demo [master +1 ~0 -0 !]> git add .
C:\demo [master +2 ~0 -0]> git commit -m initial
[master (root-commit) 42ea0fc] initial
 0 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 Where/IsHere
 create mode 100644 Where/Waldo

C:\demo [master]> git remote add origin git@github.com:tawman/waldo.git
C:\demo [master]> git push -u origin master
Counting objects: 4, done.
Delta compression using up to 6 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (4/4), 265 bytes, done.
Total 4 (delta 0), reused 0 (delta 0)
To git@github.com:tawman/waldo.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

When we look on GitHub the repository appears as expected:

Step 2 – Start asking some questions

C:\demo [master]> mkdir .\Where\Is
C:\demo [master]> touch .\Where\Is\He
C:\demo [master +1 ~0 -0 !]> git add -A
C:\demo [master +1 ~0 -0]> git commit -m "Good Question"
[master 3d9006e] Good Question
 0 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 Where/Is/He

Keep a close eye on where Waldo is going...

C:\demo [master]> git mv .\Where\Waldo where\is\Waldo
C:\demo [master +0 ~1 -0]> git commit -m "Find Me"
[master 35f843b] Find Me
 1 files changed, 0 insertions(+), 0 deletions(-)
 rename {Where => where/is}/Waldo (100%)

C:\demo [master]> find Where
Where
Where/Is
Where/Is/He
Where/Is/Waldo
Where/IsHere
C:\demo [master]> ls


    Directory: C:\demo


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d----         1/12/2013  10:54 PM            Where

Seems quite obvious Where Waldo is, but let’s check what GitHub thinks:

C:\demo [master]> git push
Counting objects: 11, done.
Delta compression using up to 6 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (9/9), 683 bytes, done.
Total 9 (delta 1), reused 0 (delta 0)
To git@github.com:tawman/waldo.git
   42ea0fc..35f843b  master -> master

It would appear that git and GitHub have narrowed down the location of Waldo to one of two possible locations:

Step 3 – Let the confusion begin

C:\demo [master]> ls .\Where\Is\Waldo


    Directory: C:\demo\Where\Is


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
-a---         1/12/2013  10:50 PM          0 Waldo

According to Windows, Waldo should be hanging out right here: Unfortunately, according to git he is hanging out over there:

Step 4 – Get everyone back on the same page with Git Unite

C:\demo [master]> Git.Unite.exe C:\demo
C:\demo [master +0 ~1 -0]> git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#       renamed:    where/is/Waldo -> Where/Is/Waldo
#
C:\demo [master +0 ~1 -0]> git commit -m fixed
[master 4495f40] fixed
 1 files changed, 0 insertions(+), 0 deletions(-)
 rename {where/is => Where/Is}/Waldo (100%)
C:\demo [master]> git push
Counting objects: 7, done.
Delta compression using up to 6 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (4/4), 354 bytes, done.
Total 4 (delta 0), reused 0 (delta 0)
To git@github.com:tawman/waldo.git
   35f843b..4495f40  master -> master

Git Unite clears up the confusion by reconciling the git index file path with the same case Windows is using. When I go back and look at the repository on GitHub, there is only one place Where Waldo could be: As far as Windows was concerned, Waldo was here the whole time:

Fork me on GitHub

These webcasts changed my viewpoint of PowerShell from being a VBScript replacement (that I never used) to a powerful scripting framework and shell. I have modified and extended existing psake build scripts, but I did not realize some of the key concepts lurking just below the surface.

I did not consider it possible that PowerShell pipelines objects between commands instead of strings due to the many years I spent developing shell scripts on UNIX/Linux. Once Ed explained this key concept, I discarded my preconceived understanding of PowerShell and watched the entire series to learn more.

I can only imagine how useful object pipelining in UNIX shell scripts would be after witnessing the equivalent in PowerShell. For example, getting basic process information from the bash prompt on the Mac can be done with the ps command. The output of the ps command can be manipulated as standard ASCII text:

Conversely, the same process information in PowerShell passes along the entire process object to the next command to inspect:

Object passing between commands in PowerShell is just a minor fact hardly worth blogging about, but it is a fundamental reason you should ignore decades of preconceived ideas about shell scripting and give PowerShell an honest look.

The latest query from the 20% unsupported category prompted my pull request to bypass the PetaPoco query rewrite logic entirely and allow the caller to provide the count and paging queries. After all, PetaPoco is a single-file micro-ORM that expects the user to understand SQL already. The secret sauce covers the low friction data access layer between the database and your POCOs, and not the SQL itself.

Currently, PetaPoco supports server-side paging with the following Page<T> method overloads that generate count and page results queries from a single SQL statement:

• public Page<T> Page<T>(long page, long itemsPerPage, Sql sql)
• public Page<T> Page<T>(long page, long itemsPerPage, string sql, params object[] args)

My pull request simply adds another Page<T> method overload that accepts the two SQL statements to use for the count and page results without calling the BuildPageQueries<T> method: public Page<T> Page<T>(long page, long itemsPerPage, Sql sqlCount, Sql sqlPage)

The following gist provides a sample set of queries using the new Page<T> overload:

There has not been much activity in the PetaPoco GitHub repository in over 8 months, so you might want to pull this change into your own fork if faced with similar server-side paging requirements.

This blog post can be forked on GitHub: tawman / PetaPocoPage.

Sample Web Site and Data

For the sample web site, I used the Spawner Data Generator tool to generate 1,000,000 rows of test data for use in this example. As you can see from the timings, each table grid page request is limited to approximately 1.25 KB of data and a response time around 75 milliseconds.

On my current project, we initially used jQuery tablesorter with a table loading between 1,000 and 1,500 detail records for a report. There was a noticeable delay of a couple seconds while the data loaded. Obviously, we needed to implement server-side paging and I knew PetaPoco could help on the backend. However, tablesorter had some other issues with searching paged tables that lead me to discover DataTables

DataTables

DataTables is a great extensible jQuery plug-in and satisfied our searching, paging, and server-side processing requirements. The only negative issue I had is cosmetic since DataTables uses Hungarian notation. The other features and extensibility options shine through making DataTables an excellent client side UI choice.

Client Side Setup

Wiring up a view table with DataTables is very simple, and adding the server-side callbacks and Twitter Bootstrap formatting is also very straight forward. In my example view, there is very little markup required and actually no model is provided:

The sample project also includes some additional JavaScript to setup a 500 ms filtering delay before sending the search term back to the server, pagination styling, and CSS styling. Fortunately, the DataTables library is thoroughly documented on its web site along with these extension configurations.

Server Side Setup

DataTables will POST a JSON request back to the server Controller that I process with a custom IModelBinder to keep the Controller code clean and remove the Hungarian notation:

The combination of the IModelBinder and a helper method to format the DataTable response keeps the Controller action code simple:

The DataTable response formatter simply combines the DataTablesPageRequest object with the PetaPoco Page<Customer> object into a JSON response expected by DataTables:

Fortunately, the DataTable request and response object formats are very compatible with how PetaPoco support paging.

PetaPoco

PetaPoco makes it very simple and efficient to issue paged queries to SQL Server and it handles the query rewrite to use ROW_NUMBER for you. The resulting PetaPoco Page<T> object makes it easy to interface with the DataTables response object:

public class Page<T> where T:new()
{
    public long CurrentPage { get; set; }
    public long ItemsPerPage { get; set; }
    public long TotalPages { get; set; }
    public long TotalItems { get; set; }
    public List<T> Items { get; set; }
}

To support the DataTables searching and ordering in my sample project, I used some helper methods to apply the search criteria against all columns and order by the columns selected. The resulting repository method to handle the PetaPoco Page<T> query request is quite straightforward:

In the end, it does not matter if you are dealing with 100, 1,000, or 1,000,000 rows of data. You can still achieve fast page response times and low latency calls to your backend database to serve data up one page at a time. The following timings are from pressing the Next page link 7 times:

Conclusion

The million row sample data is not a practical use case and merely used to illustrate a point. In fact, I reduced the sample data down to 4,000 rows for publishing on GitHub as a 250 MB database is not very clone friendly. Have a look at the project source on GitHub: tawman / PetaPocoPage and I hope it provides a useful reference for someone faced with a similar challenge.

DataTables and PetaPoco were made to page together.

This blog post can be forked on GitHub: tawman / PetaPocoPivot.

Dynamic Data Structures with PIVOT

SQL Server 2008 R2 provides the capability to PIVOT and UNPIVOT table data depending on your need to flatten rows into columns or columns into rows. In our case, we needed to transform multiple rows of employee expiration dates into a single employee row with columns for each requirement expiration date.

SQL PIVOT Query Example

The following source data is used to illustrate a SQL PIVOT query in action:

Employee	Requirement	Expiration Date
John Doe	Alpha	01/12/2011
John Doe	Bravo	11/07/2012
John Doe	Charlie	NULL
John Doe	Delta	10/11/2009
Sally Smith	Bravo	05/10/2012
Sally Smith	Charlie	07/04/2012
Sally Smith	Echo	08/31/2012

A simple SQL PIVOT query to transform the data:

The following table illustrates the results of the SQL PIVOT query:

Data Driven Object Structure

Obviously, defining a POCO object to load the PIVOT data ahead of time is not possible if the aggregated column values are not known until runtime. Our initial implementation bypassed PetaPoco entirely and used a DataTable to export the data to Excel using DoddleReport. Working around PetaPoco did not seem right so I looked for an alternate approach involving PetaPoco.

PetaPoco and Dynamic Types

Fortunately, C# provides a dynamic type but I did not know if PetaPoco and DoddleReport could support this option. Every time I think we pushed PetaPoco to its limit, I learn that it has more tricks up its sleeve. I decided to not even consult the documentation and wired it up to see if we could return an IEnumerable<dynamic> instead of a DataTable.

The answer came as no surprise when coding the PIVOT query into the Repository that PetaPoco could care less if you actually had a POCO:

DoddleReport and Dynamic Types

Now that PetaPoco was returning a dynamic data set, I needed to figure out what DoddleReport could do with it. I had not worked with DoddleReport up to this point, but quickly located the code in our Controller that performed the export to Excel functionality. I checked the ToReportSource() method overloads and saw it had one for an IEnumerable.

Typical ReportResult Action with DoddleReport does not require much code, but it sure does a lot behind the scenes:

My first attempt to run the export with no change to the DoddleReport code was met with a blank export. I tweeted out my status of trying this and Matt Hidinger quickly pointed me to the DynamicReportSource.cs on CodePlex. I added the DynamicReportSource code as a Helper in my project (Note: There is a Nuget package for it) and tried to use it. The first issue I ran into was that the code used an ExpandoObject, but I changed it to use dynamic instead. The second issue I ran into was the handling of NULL values, but I worked around this by using a new object() when the t.Value is null.

Modified DoddleReport DynamicReportSource.cs file used:

Dynamic PetaPoco and DoddleReport

With the final changes to DoddleReport in place, our project now supports exporting PIVOT reports to Microsoft Excel. I put together a sample ASP.NET MVC3 application that demonstrates the flow of the dynamic data from SQL Server via PetaPoco and DoddleReport to Excel.

Standard MVC ActionResult View

The default Index action displays the dynamic data in a normal table view by iterating over the dynamic results:

Exporting Data to Excel

The DoddleReport Excel link in the header will call the /Home/PivotReport .xlsx ReportAction to trigger the export to Excel. The .xlsx extension it what tells DoddleReport we want an Excel result:

Generating a Default HTML View

If you leave off the extension like the DoddleReport HTML header link does, then DoddleReport will generate the HTML view similar to the Index view I coded:

DoddleReport supports additional formats like PDF, but I did not add the necessary Nuget packages to support it. With the proper library references in place, all it takes to generate a PDF is to add the .PDF extension to the ReportResult Action URL and DoddleReport will happily generate it for you.

Conclusion

Yet again I learned to never underestimate PetaPoco. I now have the same respect for DoddleReport as it makes a dynamic teammate with PetaPoco to deliver Excel exports based on our PIVOT query results.

I hope you found this blog post helpful and be sure to check out the full source code on GitHub: tawman / PetaPocoPivot to see this dynamic pair in action.

This blog post can be forked on GitHub: tawman / PetaPocoHierarchy.

PetaPoco – A Tiny ORM-ish Thing

We are using PetaPoco on a current project implementation since our data management needs do not rise to the level of NHibernate. I learn something new each time I think we reached the limits of what PetaPoco can achieve for us. The most recent scenario involved loading hierarchical data without introducing a SELECT N+1 problem. I will demonstrate how to use the PetaPoco Multi-Poco Mapping Feature to load hierarchical table data with a single SELECT statement.

Multi-Poco Mapping Feature

The PetaPoco – Mapping One-to-Many and Many-to-One Relationships blog article described using the Multi-Poco Mapping Feature for loading one-to-many relationships, but I found the same technique works well with hierarchical data.

Organization Hierarchical Data Example

I built a simple ASP.NET MVC3 website involving an organization hierarchy modeled as a single table with a self-referencing column for the parent organization. The site contains a single page and table to display the hierarchical organization tree.

The DDL used to generate the table in SQL Server 2008 R2 Express is shown in the following gist:

The following table illustrates the sample data loaded in the Organization table and used for this demo, but I replaced the Guid values with integers to make the parent-child relationships easier to identify:

The website uses the following Organization POCO object to store the hierarchical data from the Organization table:

Loading the data from SQL Server is accomplished with a single CTE query, but processed by PetaPoco with a custom helper method to transform the query results. The Organization Repository GetAll() method invokes the PetaPoco Multi-Poco Mapping feature as follows:

The CTE query prepares the Organization data for processing by the custom Multi-Poco Mapping Helper OrganizationParentRelator().BuildHierarchy with the following query result set (only last 4 of Guid shown):

The custom helper is supplied as a parameter to the PetaPoco Multi Fetch call:

The repository query is structured such that each resulting row of data contains an Organization (T1) and Parent Organization (T2). The query will return multiple rows for the same Organization equal to its depth in the hierarchy. The rows are sorted by Organization Hierarchy Level in descending order.

The OrganizationParentRelator.BuildHierarchy(organization, parent) helper method will push the parent organization upward as each Organization row is processed and then return the hierarchical representation of the Organization (TRet) when no more parents are present:

Resulting Organization Structure Displayed Online

Conclusion

I hope you found this blog post helpful and be sure to check out the full source code on GitHub: tawman / PetaPocoHierarchy. The PetaPoco project page over on Topten Software has more examples under the blog posts sections for using the Multi-Poco Mapping feature in other ways.

Turbulence

It did not take long before I hit my first patch of turbulence in the Windows Azure Cloud. My second blog post about using Parallels Desktop® 7 for Mac for a development machine was retweeted by @ParallelsMac to its 18K+ followers. I checked my blog entry for any comments, but was greeted by the message: Error establishing a database connection.

The Cathedral and the Bazaar in the Sky

I had WordPress 3.3.1 configured to run on two Extra Small Azure server instances (Shared CPU Cores and 768 MB Memory) with a SQL Azure backend. I figured this configuration would suffice for a single blog site with no following.

The first action I took during the outage was to start up an additional two instances via the web management interface. This immediately resolved the issue, but I assumed the traffic that caused it was long gone and never to return. Since I was only 3 days into my 90 day free trial of Azure, there was no cost for spinning up additional instances. However, projecting the cost forward under normal conditions after the trial period gave me cause for concern.

Cloud with a Silver Lining

Windows Azure is quite up front about its pricing levels and provides an excellent Pricing Calculator to check out the cost of various configurations. It took me several days, but I finally spotted the Billing link on my management portal page. I checked today to see the net effect of running five Extra Small Azure instances the past couple days. The 6 days worth of statistics made it clear I would not be needing the full 90 day free trial period:

• Database (DB / Month) – Web Edition: 19.355% of 1 db/month
• Compute Hours – Windows Azure Compute: 17.2% of 750 Unit
• Storage Transactions (in 10,000s) – Windows Azure Storage: 3.112% of 5 10,000s
• liData Transfer Out: 0.17 GB of 80GB
• Data Transfer In: 0.39 GB

The free trial period includes 750 hours of compute time per month, but that is only enough for a single Extra Small instance. The recommended configuration by Azure is two instances and that was not even enough for my small burst of traffic.

Seeding Your Own Cloud

I thoroughly enjoyed rolling my own instance of WordPress in the Azure cloud, but the price of scaling it is too much for the average blogger. Change management of the WordPress site is not as straight forward either when running your own cloud. I found this out quickly when using the WordPress administration interface.

I knew from the start that running multiple instances would isolate certain aspects of the framework but not by how much. The Windows-Azure-PHP-Scaffolders included a Windows Azure Storage plug-in to make images and static content available across all instances. In addition, the WordPress database will keep your content and plug-in settings available for all instances. The problem is with the other items that you frequently change when first setting up a new WordPress site:

• Plugins – You cannot install or uninstall plugins using the online admin interface unless you understand the fine art of round robin load balance dancing (F5 or Command-R) to install them on all nodes
• Themes – You cannot install or modify themes using the online admin interface without the same issue
• You could install the certificates to Remote Desktop into the instances, but Azure will use the base image uploaded when starting up any new instances. All component and template changes will be lost on the new instance.

The remedy is to configure the WordPress plugins and theme modifications on your local computer, repackage the changes into a new Azure deployment, and use the Azure management console to stage the upgrade into the Cloud. Azure makes the process quite simple for someone like myself, but it is more complicated than simply using the WP-Admin interface to make the changes online.

The Specialists

Reliability and performance is rarely free or inexpensive, so I went back to where I started 6 days ago looking for hosted WordPress providers. I had no interest in the standard web hosting shared / VPS offerings thereby limiting my search to true SaaS providers like WordPress.com and WP Engine. After seeing the cost of Azure, I did not even bother with exploring Amazon AWS.

WordPress .COM

My new review of WordPress.com left me with the same concerns as before. It needs to control your DNS zone file, only short form domain name URL, and from what I read you cannot use any plugin that generates / uses javascript. There was some confusing verbiage on ads and I am not looking to run ads on my blog no matter how much I mention the products I use and find value.

WP Engine

WP Engine on the other hand, provides exactly what I was attempting to accomplish on my own, but without the change management opportunity and scaling costs. I also like the idea of supporting a locally operated Austin business. If I am not mistaken, I only know of WP Engine by word of mouth of them either sponsoring or helping out at some Austin technical user group meeting or something. This just goes to prove that more tech companies should be sponsoring local tech user groups with beer and food.

The best part, it literally only took me 43 minutes from the time I received the Welcome to WP Engine! email until the moment I logged into Namecheap.com to update my DNS settings to point my CNAME record directly to WP Engine.

Closing Thought

In the end, Azure is fun but WP Engine will get it done. I enjoyed the experience of understanding the finer points of packaging and deploying to Azure, but I am not willing to spend the dollars necessary to operate successfully on it. Stay tuned, I have only been on WP Engine for 5 hours now.

References

• Eric S. Raymond (1999). The Cathedral & the Bazaar. O'Reilly. ISBN 1-56592-724-9