- Sign In
- Sign Up
The "Aha" Moment: How to Onboard an API Service and Get Active Users
Introducing Serverless Data Feeds
Share Data Without Sharing Credentials: Introducing Pipe-level Permissions
How to Embed a Live, Refreshable D3.js Chart into GitHub Pages
A 90 Degree Tilt: Introducing Vertical Pipes
A Simple Pipe Routing Example: HTML Upload to HTML Display
Introducing our API and Command Line Interface: Flex.io for Developers
Just Binge-Listened to 95 SaaStr Podcasts, Here's What I Learned
Adding Dynamic Content to a Static Web Page
Cloud-based data pipes are, by nature, pretty flexible and able to handle a bunch of different kinds of data busywork. One of those uses is to spin up dynamic content without spinning up a server. This makes it possible to host a rich, interactive website on static backends like S3, GitHub, or Forge.
We had occasion to do this ourselves today in an attempt at summarizing an experience of binge-listening to 95 SaaStr podcast episodes.
During the journey, we compiled a data set and then, in the post, offered the static CSV file for reference. But, we thought it might be fun to let follks search the set directly inside the blog post. Here’s how we knocked it out.
The actual pipe is pretty straightforward — grab a CSV file from GitHub, process it, filter it using a variable and convert it to JSON for ingesting. Here’s a visual representation of the pipe:
Here are the specific commands for each step used in the pipe:
input file: https://raw.githubusercontent.com/flexiodata/examples/master/demo-saastr-podcast-search/source-data/saastr-podcast-20170205.csv
The web page to get this up and running is pretty trivial. We used a simple HTML table to display our query results:
<table id="myTable" style="min-width: 1400px">
Then we did some minor prettying up in the CSS for the app and the iframe
The API call is also straightforward. Here’s a snippet of the API call using jQuery:
The “app” itself is trivial — simply a text input for the search that is passed to the pipe, which grabs the results and inserts the data into the table on the fly.