Modernized station communications and Space Tango’s modular CubeLabs stuffed to capacity with the latest in IoT technology are ready to go. Together they generate more experiment data and get it to the ground faster than ever before.

The mission: make that data as accessible as a Twitter feed.

An abbreviated discovery and design process helped develop this vision and give it a roadmap to realization. A prototype featuring dashboards and a team-based account system kicked it off, ready for experiments launching in July and most supply flights thereafter. An API-first strategy, a ES2015 codebase, and test coverage positioned the project on solid footing for a promising future of a (mostly) terrestrial nature.

Stack

• JSON API compliant Ruby on Rails / MySQL backend

• InfluxDB time series database and API

• node.js frontend integrated with both APIs, running hapi

• UI built with React and Redux

• Data visualized with D3 4

sparkart team project

Refresh with a new identity program and design; make it responsive and easy to update. A typical project, except for a co-founder with some PHP chops from Web 1.0. He was eager to modernize an existing homebrew file-based CMS but wary of startup churn and the prospect of seemingly endless maintenance required for a database-backed CMS.

Appreciating these concerns and also the flexibility of the original led us to static site generators. In addition to a totally new frontend, a node.js workflow was created to build and upload pages from Markdown content and gigabytes of images stored in a Dropbox folder maintained by the team. One command publishes the latest to a traditional web host, with any new or updated images resized. Manual included ✓

Stack

• Custom Markdown extensions via markdown-it
• Responsive images with libvips and the BBC’s Imager.js
• Pages built dynamically with gulp from Markdown content
• Static website deployed to Media Temple

design by TwoPoints.Net

Trnio is a free app for iPhone that scans a series of images to render an often eerily lifelike 3D model. This prototype (and WebGL) bring them to the browser with mouse and touch manipulation, a turntable demo mode, and social media sharing. The responsive layout keeps it mobile friendly and ready to embed. A node.js build process creates a static set of pages for every published model for highly scalable distribution over a CDN.

Stack

• WebGL viewer with three.js
• History API-enabled page navigation
• Pages built dynamically with gulp from a Parse backend
• Responsive images with imgix
• Static website deployed to Amazon S3/CloudFront

design by Terrence Mahlin / sparkart project

Founded by a pair of athletes fed up with the mediocrity of mass market products, Ten Thousand re-imagines just about everything. The initial version was built in under a month in an intensely collaborative process, iterating through every detail to hit the right balance of form and function. The Shopify platform was pushed to the limit with a product configurator, personalized sizing engine, and all sorts of custom content modules.

Stack

• Shopify
• Custom theme development and deployment with gulp
• Responsive images with imgix
• Custom promos built with AWS Lambda and the Shopify API

design by Nicolae Rusan and Christopher Sausto

An interesting problem presented by the Solidus concept is normalization. This especially comes to bear with the ever multiplying metadata tags required to represent content to services like Facebook and Twitter. Combined with the density of data available from the typical API, this led to some especially nasty code in the typical Solidus site.

This module helps safely and declaratively select API data from available resources, clean it up, and add a normalized metadata object to a page’s rendering context. Writing the config in YAML makes for an especially nice experience focused on the content — a sitemap of sorts, for free.

Leverages Shopify’s Theme Uploader to hook up a node.js bag of tricks. This upgraded the development experience with CSS preprocessing, JavaScript bundling, npm, live reload, a custom directory structure, and one-command deploy between a dev shop and production. More importantly it helped me work that much faster to bring a custom design to life and fulfill a wishlist of responsive images, a dynamic cart UI, and a S/S 2014 lookbook/Flash throwback.

Stack

• Shopify
• Custom theme development and deployment with gulp
• Cart built with Backbone.js
• Responsive images with responsive.io
• Custom lookbook with CSS animation

design by Stella Giovanni

Content as JSON can be rendered as pages, in-app messaging, documentation — anywhere. This module takes similarly portable Markdown files and pipes them into a workflow for all of the above. In addition to prose content, support for YAML frontmatter helps create ad hoc data structures, especially handy while prototyping.

Paired with the Solidus framework this service helps Sparkart developers build websites exclusively from API resources rather than a traditional CMS. A winning formula for scalability and ease of development, the technologies have powered dozens of Sparkart projects for clients such as the 34th America’s Cup, UFC Fight Club, Bon Jovi, Jason Aldean, Immunity Project, Keith Urban, The Killers, and many others.

Inspired by 37signals’ work on Basecamp Next and GitHub’s use of pjax, the UI embraces serverside rendering. We built our own UI components with Rails and used progressive enhancement.

Stack

• Ruby on Rails
• Grunt
• Sass
• CanJS
• D3

sparkart team project