Saving a non-profit Six Figures a Year using Squarespace, Airtable and Glitch.
comReducing complexity and cost through SaaS and extensive documentationDanilo CamposBlockedUnblockFollowFollowingMay 15Photo by Austin Distel on UnsplashI swallowed hard.
I was staring face-to-face with a four-gigabyte website dump.
There was no documentation.
There was no version control.
Just thousands of PHP files across dozens of directories, plus a sprawling MySQL database.
What had I gotten myself into?The files I was looking at comprised the website for EveryoneOn, a non-profit that connects low-income families with affordable internet access.
We’d been working together for a few years, since ConnectHome in the Obama era when they approached me looking for leads on new web technology providers.
Their existing contract web developer cost as much as an entire senior salary, and they wanted more affordable options.
I offered them a sweetheart deal with one goal: get them to a point of self-sufficiency.
There are perverse incentives for a contract IT provider — it makes sense to increase complexity, making the client more dependent, ensuring future billings.
I wanted to break that cycle.
But as I looked at the innards of their site, I wondered if I was in over my head.
Technical complexityThere was a reason EveryoneOn was paying thousands of dollars each month just to keep their website online.
This thing was complicated.
Multiple IT providers were involved in its maintenance over the years.
A monolithic database drove everything from WordPress content to site analytics to the API that let users search for affordable internet offers.
This wasn’t my first LAMP server, but getting everything up and working took a couple of weeks of troubleshooting.
With no documentation, it was a matter of trial and error to figure out how to configure Apache and MySQL to work with the years of PHP layered all over the place.
This complexity had everyday costs for EveryoneOn’s staff, too.
Many changes to the site and its content had to happen through their contractor.
This made the process slow and limited the control they had over their web presence.
It took some work, but once the replacement server was in good shape, we switched the domain over.
My next tasks: putting out the occasional fire and coming up with a better, simpler, cheaper technology strategy.
Other people’s serversA tangle of interdependent services hosted on a single server meant a big component of EveryoneOn’s IT costs was having someone on-call to fix things when they broke.
But if we could use technology hosted and maintained by third parties, we could offload that burden to them.
I argued that the more custom code EveryoneOn was responsible for, the more expensive their technology had to be.
Yet, the tasks EveryoneOn needed their technology to accomplish were common:Content management system for a websiteAnalytics and statistics about web usage and offer adoptionStructured data about internet offersHaving bespoke versions of all of these didn’t provide a lot of value, relative to the steep costs they imposed.
But if we could use off-the-shelf tools, it would be someone else’s job to keep them online, updated and secure.
Instead of spending thousands of dollars a month, the organization’s fixed technology costs could be a few hundred dollars per year.
Best of all, because these products were built to sell to thousands or millions of users, they would be more accessible and intuitive than what we started with.
Here’s how we replaced a tangled soup of PHP and MySQL data with accessible, cost-effective third-party services:SquarespaceCost: $218/yearThe heavily customized WordPress installation gave way to Squarespace.
With 24/7 customer support and so many e-commerce customers using it every day, we knew we could rely on it to stay up and running.
More than that, Squarespace has an easy-to-use editing interface for both text and page layout.
Now, EveryoneOn could directly edit their website design whenever they wanted.
The other part about Squarespace I liked was its design constraints.
A global styles palette keeps everyone’s pages consistent.
Multiple people can build pages for the same site and the typography and colors will be the same across all of them.
Any changes to those styles automatically propagate later on.
For an organization without an in-house graphic designer, these details mattered a lot.
Leaving them with a website that steadily drifted away from professionalism and polish in its design would endanger their credibility and their mission.
No amount of automation will protect you from an ugly site, but guardrails baked into the product can go a long way.
Google AnalyticsCost: FreeMeanwhile, a large subset of the custom analytics dashboard could be handled by Google Analytics.
The basics of Google Analytics are pretty set-and-forget: make sure a script is included in your page header template.
In Squarespace, you just paste your site ID into a settings field.
But Google Analytics can do more than passively track pageviews.
You can also track events important to your users’ journey through a site by writing some custom JavaScript code.
Alongside custom event tracking, it’s possible to attach additional “dimensions” of data unique to your web app.
Between this and Google’s point-and-click custom report builder, you can assemble detailed reporting unique to your business needs.
From there, Google does the heavy lifting of slicing a growing data set across whatever time periods and dimensions you’d like.
AirtablePrice: $12 per user per month (non-profit pricing)Even with Google Analytics handling much of the site behavior stats, we still needed a database.
But more than that, we needed a tool that made data accessible.
MySQL is arcane technology.
Even its popular GUI, PHPMyAdmin, isn’t especially user-friendly.
If you’re not a software developer, and if no one has bothered to write some code exposing the database content you want, the data may as well not exist.
Airtable changes the game considerably.
It has all of the user-friendliness of spreadsheets, with all the technical benefits of a database.
It’s easy for anyone to read, filter or edit Airtable content — even niceties like copy and paste work great.
Yet, as a database, fields are formatted, structured and validated.
You can create relationships between records in different tables.
Because of this, Airtable is even better than spreadsheets for easily setting up fields that lookup data automatically.
It’s by far one of my favorite pieces of modern software.
In Airtable, we had a tool that could store relationships between zip codes and relevant internet connectivity offers.
It could store data about partner organizations, and display it on the website when relevant.
It could even store real-time events also being sent to Google Analytics, letting EveryoneOn audit the data at the foundation of their reporting.
Because Airtable has an API.
GlitchPrice: FreeThat brings me to Glitch.
If you’d told me six months ago I was using Glitch for website infrastructure, I wouldn’t of believed you.
But while we had plenty of great new tools maintained by someone else, there was one snag: a small percentage of EveryoneOn’s web technology would still need custom, server-side code.
Not thousands of files’-worth anymore, thankfully.
Still, the process that matched user zip codes to the internet offers available to them, then displayed the offers on a web page, was unique, and Squarespace offers no facility for server-side code.
I fretted over this for a few months.
My initial plan was a $5/month DigitalOcean instance to host the custom code.
This wasn’t ideal.
The barrier to understanding how to administer something like that can be significant.
The more complex their custom technology was, the more challenging and expensive it would be for EveryoneOn to make changes to it in the future.
For so much of the website, I’d managed to find hosted tools that were accessible to many technology skill levels.
I hated the thought of an inscrutable, hard-to-reach black box sneaking into the process after all.
Around this time, Glitch came out of beta.
Having a look at its limitations, I realized it could more than handle EveryoneOn’s traffic needs.
Glitch provides on-demand node.
js sandboxes where you can write any server-side code you want.
Even better, there’s built-in, automatic version control.
While I was a novice with node, it didn’t take long to build a replacement implementation of EveryoneOn’s offer API using Airtable as the storage mechanism.
From there I built a few more Airtable wrappers for other data the organization needed to display on its website.
I was especially tickled when it came time to migrate their offer search widgets.
These were PHP-based micro-pages that allowed third parties to embed EveryoneOn’s search into their own site.
Using Express and the EJS templating package, it was quick work to build an emulator that served widgets at the appropriate .
php URLs.
So the implementation changed completely, from PHP to JavaScript, but the change was transparent to end users.
No one had to make any updates to their pages.
What I found in Glitch was the perfect toolbox for adding custom functionality to a website.
It’s easy to get started — you just click a button to create a new project.
You don’t need to understand ssh or SFTP to make changes later on.
You don’t need any special software.
If you have a web browser, you can edit the code.
Which means that anyone who knows or can learn JavaScript can expand or enhance these services later on.
With automatic version control, the sharp edges are dulled.
If they break it, they can roll back to a known-working state no problem.
Because of Glitch’s per-project sandbox model, each service is isolated.
Breaking one doesn’t harm any others.
My one gripe with Glitch: I’d feel so much better if I could give them some money to ensure their long-term success.
Cash for custom domain names, cash for higher service limits — hell, even a tip jar.
Still, Glitch allows you to easily export a project to GitHub.
Worst case scenario, someone can dump out these projects and run them on a node server.
Long term effectsThese services aren’t a 100% replacement of the beast we started with, but we were able to handle the vast majority of the old tasks using tools that are much easier to understand, and orders of magnitude cheaper.
Annual fixed costs are down from six figures to under $1,000.
While some custom code remains, it’s only around a dozen files, it’s well-documented, fully version-controlled, and editing is easy.
A digital binder of documentation, hosted as a Google Sites wiki, provides an overview of all services, with explicit guidance on how to make changes.
Best of all, there’s nothing for a future contractor to hold hostage.
EveryoneOn directly controls every account that drives their web presence.
The project dramatically reduced the scope of custom code to maintain, while also bringing the number of servers to administer down to zero.
I don’t want this to be seen as a post bashing WordPress, or LAMP generally.
Sometimes that’s the perfect combination of tools for a job.
But while running your own server was once the only way to solve these sorts of problems, we now have more options available.
It’s exciting to see how a handful of hosted services can be composed to create a dynamic site that reports ample business intelligence, while still being user-friendly and cost-effective for a non-profit.
Instead of needing an experienced system admin, now EveryoneOn can advance their web needs with student interns or volunteers — anyone willing to learn basic JavaScript.
While saving EveryoneOn some cash from their operating budget is a great start, they still need help getting more than 60 million people connected to high-speed internet at home.
Kick them a few bucks to support their mission closing the digital divide.
.