i've built over 30 web apps or side projects in the last 5 years.
typically i keep it simple, opting for whatever "off the shelf" tools will Get the Job Done.
my personal website, for example, has been a WordPress since i launched it in 2012. it's slow, has no features except basic search, but works.
when my company launched a blog 2.5 years ago we chose a WordPress competitor called Ghost. and when we later acquired an ecommerce case study blog we rebuilt it with TinyMCE, a rich text editor plugin for custom websites.
at Rickshaw, before digging into technologies we sat down to figure out the function of this blog first; form comes second.
- interactive charts, tables
- API integrations (expenses, weather, air quality, locations, etc)
- structured data for real-time analysis
let's dig into how each of these functions is taking shape, and why we chose our tech stack: Rails 5, PostgreSQL, Heroku, UploaderWin, Plaid, Foursquare, Bootstrap.
i drink a lot of coffee. suppose i want to provide a top 10 ranking of cafes around Seoul, Korea.
a list is OK...
- 1. MANUFACT
- 2. Coffee Lab.
- 3. 5brewing
but a sortable table is even better:
same goes for bar charts, line graphs, and histograms.
as our bio says, we like data. static site generators don't.
it's normal for travel bloggers to take photos of their meals and experiences.
what isn't normal is itemizing every destination -- from restaurants to gas stations, drug stores and airports -- then having 100% recall of everywhere one goes, any day of the year.
to achieve this "where we've been" God Mode we integrated my Foursquare account, which hosts 90%+ of every place i've been for the past 10 years.
how it works:
- every hour, Rickshaw's backend imports recent "checkins" from my account
- locations are auto-matched to a category, ie "restaurant" or "gym"
- everywhere we've been, per category, is now searchable by date or location
the last part -- attaching locations and expenses and scoring to locations -- was a bit trickier. this required
polymorphic associations in our database, which we may cover in a later post.
but in summary we connected our Chase bank accounts and credit cards via Plaid, which similarly to Foursquare imports + categorizes all our expenses, daily, automatically.
another neat example of API integrations, coming soon to Rickshaw:
the expat owner of Gusto Taco told us to download air quality iPhone apps to know which days are safe to walk around with or without a face mask. transferring to our blog, why not give readers live insights on our health conditions?
by treating our blog like a web app instead of a static site we can easily build live counters detailing expenses over time, "X Factor" rankings per city, or the ratio of housing to meal costs.
these metrics will soon be available in the Data section, accessible in the main navigation up top.
for now we're exposing cafe visits, overall expenses, and our average per-day cost of living.
after we visit at least ~10 cities you'll be able to sort through each to learn which are the most fun, most safe, have the best food, etc.
Putting it All Together
needless to say, components such as these made it unfeasible to use WordPress.
because we both know how to code, building from scratch was also a bonding experience. since our "day jobs" are mostly spent on other projects, this blog provides a space to combine our personal and professional interests and skills.
so to do all this -- to write the content you're now reading -- we needed a sort of text field. a Composer. a WYSIWYG editor.
here's what we built.
The Rickshaw Labs CMS
plain text blogs are boring. so far in this post you've been exposed to inline images, tables, subheaders, and embedded code snippets.
since every piece of content is different, a "template" would lack the flexibility we need to express ideas prescriptively.
for this reason we created a "block builder" interface:
it currently supports 12 types of content, and adding new elements is just a few lines of code:
- paragraph w/ rich formatting
- embedded Instagram
- sortable table
- CTA buttons w/ destination links
- gallery via lightSlider
- email capture via Seva
- left aligned images
- right aligned images
but text is only half the battle.
image and asset management (file, video, audio, etc) are also critical to good blogs, so we implemented Uploader.win and within minutes gained an upload modal:
we wanted to avoid modifying template files just to publish content. we needed a way to organize each block (image, text, whatever) code-free.
the irony of code-free solutions, of course, is that building them often requires a lot of code(!)
luckily, thanks to open source libraries jQuery Sortable and acts_as_list, managing each post's structure is now effortless via drag & drop ordering:
like all technology, our post editor will improve over time. but this is version 1.0, and it's already kicking WordPress' ass.
another fun fact: the whole thing runs for just $7 per month on Heroku.
Built in Marketing Tools
what good is a blog if nobody can find it?
inspired heavily by popular WordPress plugin Yoast SEO, our post editor also features a "Meta" editor for things like page title (vs post title), SERP description, and open graph images.
bonus points: it's common to change URL slugs after publication, so we built an
OldSlugs table that monitors changes on a per-post basis and honors "old" links, forever.
finally, the email capture form can be dropped anywhere in a post, with custom titles for context.
this is our MVP, version 1.0, and we built it part-time in 5 days.
we sketched the data model in a hotel before our first trip (Seoul, Korea), began coding on the plane, and 6 days after arrival i'm writing this post from the Admin panel.
a few upcoming features:
- clickable categories / tags
- automatic "most popular" homepage feed
- charts in the Data portal
- blog post commenting
goodbye WordPress. this travel blog needs more.