Excel Bootstrap

So this is a real thing, that I actually built.

screenshot3

It’s an Excel workbook that can generate Bootstrap HTML sites. And what’s more, if you have a hosting key, it can publish that site to the web.

For real: https://github.com/woganmay/excel-bootstrap

Why, for the love of God

2016-10-14-20_00_26-slack-za-tech

Mainly: Why not. I know that VBA can do some basic string manipulation and conditional logic, and I know that it can work with HTTP, so I figured I’d put the two together.

Also, I felt like I needed some more experience with VBA. Despite all the love-to-hate that people throw at it, Excel is a remarkably capable platform and I was interested in what it might take to get it to do something weird.

Truly, though, I had been feeling a little bit irritated by the phrases “programming elite” and “bad language”. There’s this somewhat-arrogant notion out there (bordering on a holy war in some cases) that some languages are better at things than others, and there are some things you dare not consider using.

Well how about if I want to build websites using Excel? Who’s going to stop me?

How it works

The workbook is “open source”, for lack of a better term – you can download it and pop open the VBA modules in Excel to see how it works.

It’s pretty simple – the main worksheet lets you fill in a few cells, and those are substituted into some basic HTML by a macro. There’s even some “component logic” – you can turn parts of the site on or off.

The results can then be written out to an HTML file. Since all the CSS and JS files are hosted on CDNs, all you really need is that one file. And there you have a basic website.

2016-10-14-19_58_37-my-first-excel-bootstrap-website

It’s even themeable! I reference the library of themes via Bootswatch, so there’s a pre-defined list of themes to choose from.

Then there’s the hosting component. I have a server lying around, and you can get TLDs for free if you know where to look, so I quickly grabbed excel-bootstrap.cf, pointed it at my server, hooked up Apache and LetsEncrypt, and built a super-basic publishing endpoint with bare-minimum security.

I mean, literally, the entire thing looks like this:

2016-10-14-20_02_53-index-php-bs-visual-studio-code

Not pictured: the 4-line htaccess to enable url rewriting

Assuming you have an HTTP-capable client, that’s pretty much all the code you need to get a dumb-as-bricks “publishing” endpoint up and running. All it does is blindly dump whatever you send into an HTML file, that it then serves out on request, with a “pretty URL”.

Plus, it has rudimentary security – you can only publish to a named site if you have the correct GUID. I mean obviously the content’s not filtered at all, and a skilled hacker could probably exploit this to dump a reverse shell on my server, but you’re looking at maybe 10 minutes worth of work. Max.

Release and iterate!

This whole project took around 3 hours. Let me walk you through the timeline, starting with my stunning realization.

The principles behind this (rapid iteration) are perfectly valid when developing new applications of any kind. I think it’s a great idea to start with a minimum viable product, and then add on new things.

The app itself? Total bullshit. Do not use this as a reference for anything.

2016-10-14-20_00_26-slack-za-tech

It took all of 34 minutes to go from that, to a basic MVP. I would not have suspected Excel to be an ideal candidate for rapid prototyping, but you can’t argue with results!

(Yes, you can, you really really can. And for the love of all that is sacred, you really should when presented with an idea as dumb as this.)

2016-10-14-20_10_16-slack-za-tech

Getting up and running on Github took no time at all – I published my work under the Unlicense, and wrote up a basic readme.

2016-10-14-20_11_37-slack-za-tech

And with my MVP out the door, it was time to iterate!

All my MVP could do was create a basic 2-line site as seen in that screenshot. I wanted to add some of the basic Bootstrap components – a Navbar, Jumbotron – and offer some sort of control over theming.

I even added Font Awesome, because every site nowadays seems to have an icon font library.

So I grabbed a more complex block of sample HTML, and grabbed a few links from Bootswatch.com. Some copying-and-pasting later (and the good old Data-Validation-for-dropdowns workaround), I had a much more robust version of Excel Bootstrap, including an updated UI!

2016-10-14-20_15_01-slack-za-tech

At this point, I’d sunk 1h45m into this project. About the length of the average project management meeting. But it was time to go further!

Excel Bootstrap could now generate decent-looking websites, but what good is a website if you can’t host it? A quick trip to Freenom.com and I’d secured myself the excel-bootstrap.cf domain. I pointed it at my Afrihost server, hacked together a totally inadequate publishing API (pictured above), and set up my workbook with a macro that could upload data.

2016-10-14-20_18_45-microsoft-visual-basic-for-applications-excel-bootstrap-xlsm-module1-code

Which was actually not that difficult, all things considered.

Wired that up to a button, gave it a few test runs, and voila!

2016-10-14-20_19_30-slack-za-tech

Total time spent = 2 hours 15 minutes

Total IQ points lost from considering such a tortured path from content to published page = unknown

So the point of this was…?

Partially to prove that I could, partially to do something weird and stupid, but mainly to prove that when it comes to delivering value, there’s no objective “right” or “wrong” way to do things.

Would I ever use an Excel workbook to generate and publish websites? Not in a million years.

Could there be any number of business users out there that would save an enormous amount of time being able to publish content from Excel to a web platform? Possibly.

Who’s to judge what the “right” tool is for the job? Basically nobody.

When it comes to choosing your tech stack: use what you have, what you’re best at, what you can support, and what can get the job done.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s