Skip to content

Commit

Permalink
adding whole code catalog!
Browse files Browse the repository at this point in the history
  • Loading branch information
Steve Krouse committed Sep 9, 2019
1 parent cc639ae commit 6374e83
Show file tree
Hide file tree
Showing 32 changed files with 2,956 additions and 0 deletions.
Binary file added catalog/Windsor Regular.ttf
View file
Binary file not shown.
33 changes: 33 additions & 0 deletions catalog/article.css
View file
@@ -0,0 +1,33 @@
article {
padding: 1rem 0rem;
}

#title {
font-size: 1.8em;
margin-bottom: 10px;
}

#the {
margin-left: 10px;
}

#catalog {
margin-left: 70px;
}

h1 {
font-size: 2em;
}

h1, h2, h3 {
margin: 0px;
}

/* @media (max-width: 500px) {
#title {
margin-left: auto;
margin-right: auto;
width: 200px;
}
} */
121 changes: 121 additions & 0 deletions catalog/bubble.html
View file
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bubble - The Whole Code Catalog</title>
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Noto+Serif+JP&display=swap" rel="stylesheet">
<link href="shared.css" rel="stylesheet" type="text/css" />
<link href="article.css" rel="stylesheet" type="text/css" />
</head>

<body>
<article>
<div id="title" style=" cursor: pointer;" onclick="window.location.href='./'">
<div id="the">The</div>
<br>
<div id="wholecode">Whole Code</div>
<br>
<div id="catalog">Catalog</div>
</div>
<section>
<h1 id="bubble">Bubble</h1>
<em>Reviewed July 17, 2019</em>
<p>Bubble is a visual, no-code web app builder. The company's vision is to become the default for app creation. It features a WYSIWYG UI editor, the ability to create workflows in response to events, an integrated database, ~700 of 3rd-party plugins and a <a href="https://forum.bubble.is/">very active user forum</a>. It was founded in 2012 and bootstrapped to $115,000 MRR over seven years. Much of their early revenue came from one very large customer, but as of 2017 they had ~100k users (286,999 as of July 2019), ~10% paying. In early 2019, Bubble raised its first round of $6.25M.</p>

</section>

<section>
<h2 id="productfeel">Product Feel</h2>
<img src="https://user-images.githubusercontent.com/2288939/61382520-3b58e180-a8ad-11e9-8298-093b28632593.gif"><img>
<ul>
<li>👍 WYSIWYG editor is standard, slightly clunky</li>
<li>👍 Adding dynamic data is shockingly easy</li>
<li>👍 It&rsquo;s straightforward to create basic data tables</li>
<li>👎 Building anything slightly complicated feels like stringing together a series of hacks. (They even call them &ldquo;hacks&rdquo; in their <a href="https://blog.bubble.is/the-keyboard-shortcuts-hack-2217c29872da">blog posts</a>.) There is usually a way to approximate your desired effect, but you have to learn it by via asking in the Bubble Forum.</li>
👍 Yet, most of what users want seem possible
</li>
</ul>
</section>

<section>
<h2 id="basicusage">Basic Usage</h2>
<iframe class="video" src="https://www.youtube.com/embed/23gort9b2PA?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>The above video creates a simple web app that display a random GIF of a dog. It demonstrates:</p>
<ul>
<li>adding an image to the page</li>
<li>using the WYSIWYG editor</li>
<li>inserting dynamic data into a field</li>
<li>using an API call to GIPHY</li>
<li>type error detection in field shown via red text</li>
<li>autocomplete for selecting a random item from a list</li>
<li>autocomplete for selecting the URL property from an item</li>
<li>previewing a webpage</li>
</ul>
</section>

<section>
<h2 id="dyanmic-editor">Dynamic Editor</h2>
<p>One of Bubble's best features is its editor for adding what they call "dynamic data" into your web app. There is an "Insert Dynamic Data" button anywhere you could put a static value. Clicking on it results in a list of options to choose from. Once you select an option, it allows you to select "More" next to the resulting piece of data to see the possible operations you can perform on it, such as numerical calculations, string operations, or obtaining properties of an object. As a structured editor, there are no syntax errors possible, but it allows for arbitrarily-complex expressions. In the following video I construct a (nonsensical) expression by fluidly clicking on suggested autocompletions:</p>
<iframe class="video" src="https://www.youtube.com/embed/0Fz75KEf7n4?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<section>
<h2 id="workflows">Workflows</h2>
<p>The Workflow tab is where Bubble creators organize the event-driven logic of their app. Events are organized by their triggers, a "when ..." statement. In the following video, I explore (but don't modify) a few of the workflows for a todo list application. Notice how many clicks it takes to read through these flows, as contrasted with typical textual code.</p>
<iframe class="video" src="https://www.youtube.com/embed/-NdzAVVWHjU?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<section>
<h2 id="inspector">Inspector</h2>
<p>Bubble comes with its own custom inspector built-in, which allows its creators to debug and inspect their applications in the Bubble terms in which they created it, not by inspecting the compiled HTML. In the following video I inspect the intermediate values that produce a dynamic GIF:</p>
<iframe class="video" src="https://www.youtube.com/embed/xM50FLmN6AQ?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<section>
<h2 id="plugins">Plugins</h2>
<p>The Bubble Plugin marketplace has 686 plugins, some free and some paid.</p>
<img src="https://user-images.githubusercontent.com/2288939/61382718-95f23d80-a8ad-11e9-8a4b-70529387f616.gif">
</section>

<section>
<h2 id="agencies">Integrates with agencies</h2>
<p>They have a special interface for agencies to build out an app initially with an eventual transfer to a customer.</p>
</section>

<section>
<h2 id="pricing">Pricing</h2>
<ul>
<li>Hobby - Free</li>
<li>Personal - $14/month</li>
<li>Professional - $62/month</li>
<li>Team - $165 / month</li>
<li>Production - $445 / month</li>
<li>Additional capacity is $20 / unit / month</li>
</ul>
<img src="https://user-images.githubusercontent.com/2288939/61382088-5ecf5c80-a8ac-11e9-8b41-fce13096413b.png"></img>
</section>

<section>
<h2 id="wishes">Wishes</h2>
<ul>
<li>Auto-refresh preview page instead of "You will not be able to use the app until you refresh."</li>
<li>Detect a keydown event and check which key was pressed</li>
<li>Detect doubleclick events</li>
<li>Save a list of objects to local memory</li>
<li>Save to localstorage</li>
</ul>
</section>

<section>
<h2 id="further-reading">Further Reading</h2>
<ul>
<li><a href="https://forum.bubble.is/">Forum</a></li>
<li><a href="https://bubble.is/documentation">Learning Center</a></li>
<li><a href="https://www.indiehackers.com/interview/creating-a-100-000-mo-business-that-helps-people-learn-to-code-c5e87bdbf9">Indie Hackers: Creating a $100,000/mo Business That Helps People Learn to Code</a></li>
</ul>
</section>
</article>
</body>
</html>
150 changes: 150 additions & 0 deletions catalog/coda.html
View file
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Coda - The Whole Code Catalog</title>
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Noto+Serif+JP&display=swap" rel="stylesheet">
<link href="shared.css" rel="stylesheet" type="text/css" />
<link href="article.css" rel="stylesheet" type="text/css" />
</head>

<body>
<article>
<div id="title" style=" cursor: pointer;" onclick="window.location.href='./'">
<div id="the">The</div>
<br>
<div id="wholecode">Whole Code</div>
<br>
<div id="catalog">Catalog</div>
</div>
<section>
<h1 id="coda">Coda</h1>
<em>Reviewed July 18, 2019</em>
<p>Coda is a collaborative document surface augmented with functionality from spreadsheets, kanban boards, calendars, databases, automated workflows, and 3rd party integrations. It aims to start as a simple document and grow with the users' needs to be the single place where they add their structure, workflows, data, and customized views. It was founded in 2014 and launched publicly in 2019. While it still has a long way to go to accomplish it, Coda's mission of creating a medium to democratize computation is very compelling. </p>
</section>

<section>
<h2 id="productfeel">Product Feel</h2>
<ul>
<li>👍 Slick, clean, modern</li>
<li>👍 Blurs the line between editing a doc and programming</li>
<li>👎 Jack of all trades - master of none</li>
<li>
👎 No first-class tables or functions
<ul>
<li>Instead: add or modify rows, functional expressions, buttons, buttons pushing buttons</li>
<ul>
</li>
</ul>
</section>

<section>
<h2 id="basicusage">Basic Usage</h2>
<iframe class="loom" src="https://www.loom.com/embed/29dff5647ad34aa98822585e6b184886" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>The above video shows me exploring Coda's CRM template. It demonstrates:</p>
<ul>
<li>hovering over dynamic values to see their formula and details</li>
<li>viewing the main "All ..." spreadsheets and various subset views</li>
<li>changing the column type to multi-select</li>
<li>changing a table view's filter to sort for active deals of the current user</li>
<li>creating a multi-select that will toggle the filter expression between all deals and this user's deals</li>
<li>the kanban board and calendar interfaces to data</li>
<li>adding lookup columns to data</li>
</ul>
</section>

<section>
<h2 id="templates">Templates</h2>
<img src="https://user-images.githubusercontent.com/2288939/61432980-60436800-a932-11e9-82d4-2f6bd708a72c.png">
<p>Coda launched with an impressive amount and quality of templates, including with brand-name partners, such as:</p>
<ul>
<li>Uber’s App Redesign</li>
<li>Intercom Feedback Tracker</li>
<li>Box’s Candidate Coordination Doc</li>
<li>Fear-Setting by Tim Ferris</li>
<li>OKRs with John Doer</li>
<li>Gamestorming</li>
<li>Blogilates March Workout</li>
<li>#100AbChallenge</li>
</ul>
</section>

<section>
<h2 id="basicusage">Formulas</h2>
<p>There are a lot of little features that make constructing formulas much more pleasant in Coda:</p>
<ul>
<li>inline documentation</li>
<li>code completion</li>
<li>live data preview</li>
<li>live type error detection</li>
</ul>
<img src="https://user-images.githubusercontent.com/2288939/61432981-60436800-a932-11e9-8ee6-fa4e55ffd641.png">
<p>The icons within formulas subtley convey type information, such as:</p>
<ul>
<li>data type (date, number, text)</li>
<li>single vs multiple (list)</li>
<li>distinguishes between different objects via color</li>
</ul>

</section>

<section>
<h2 id="automations">Automations</h2>
<p>In Coda, Automations are simple workflows (a la Zapier or IFTTT). They can be triggered via on changes to specific columns in tables or on a set time-based schedule. They can cause changes to data in tables or actions in 3rd-party services via packs.</p>
<iframe class="loom" src="https://www.loom.com/embed/51bbe4afa0bc47dcb09f4136a0806344" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</section>

<section>
<h2 id="map">Doc Map</h2>
<p>The Doc Map allows users to see a global structure of a doc, such as where tables are referenced in controls and formulas.</p>
<img src="https://user-images.githubusercontent.com/2288939/61432983-60436800-a932-11e9-854f-789557cb8fd3.gif">
</section>

<section>
<h2 id="mobile">Automatic mobile app interface</h2>
<p>The Coda mobile app automatically reskins the desktop interface as a mobile app, converting pages to tab-based navigation at the bottom of the screen, and table buttons to swipe-able actions.</p>
<video class="video" autoplay muted loop>
<source src="https://video.twimg.com/tweet_video/Dyn5wa4UcAA59GZ.mp4" type="video/mp4">
</video>
</section>

<section>
<h2 id="packs">Packs</h2>
<p>Packs are Coda's answer to 3rd party integrations. They allow you to pull in data, such as from Figma and Github, as well as send messages to Slack, create Google Calendar events, etc. Adding a pack prompts you to sign in to your account in the 3rd party service, and then provides you with extra views, buttons and formulas specific to that service.</p>
<img src="https://user-images.githubusercontent.com/2288939/61430745-389cd180-a92b-11e9-9862-67c58359617f.gif">
</section>

<section>
<h2 id="pricing">Pricing</h2>
<p>Today Coda is entirely free. They plan to introduce a paid tier eventually, but promise to always keep a free version.</p>
</section>

<section>
<h2 id="wishes">Wishes</h2>
<ul>
<li>Create tables declaratively instead of adding rows manually</li>
<li>Trigger multiple actions without a button that pushes buttons</li>
</ul>
<p>Past wishes that were granted:</p>
<ul>
<li>Synced pack tables</li>
<li>Faster loading times and <a href="https://community.coda.io/t/some-performance-announcements/8670">a built-in benchmarking tool</a></li>
</ul>
</section>

<section>
<h2 id="further-reading">Further Reading</h2>
<ul>
<li><a href="https://medium.com/@tmkiefer/thanks-to-coda-io-i-built-a-much-needed-app-in-one-night-d3b8793b8a3d">Thanks to Coda.io I Built a Much-Needed “App” in One Night</a></li>
<li><a href="https://twitter.com/FrancescoD_Ales/status/1096410550022610946">Coda vs Notion</a></li>
<li><a href="https://techcrunch.com/2019/02/05/codas-programmable-document-editor-comes-out-of-beta-launches-ios-app/">Coda’s programmable document editor comes out of beta, launches iOS app</a></li>
<li><a href="https://venturebeat.com/2019/02/04/workplace-collaboration-platform-coda-launches-publicly-after-2-years-in-beta/">Workplace collaboration platform Coda launches publicly after a year in beta</a></li>
<li><a href="https://blog.coda.io/coda-intercom-d8d1e8d5355a">Coda + Intercom</a></li>
<li>Future of Coding #42 - <a href="https://futureofcoding.org/episodes/042">Blurring the Line Between User and Programmer: Lane Shackleton</a></li>
</ul>
</section>
</article>
</body>
</html>

0 comments on commit 6374e83

Please sign in to comment.