Introducing Biologic
Posted: March 8, 2012 Filed under: Biologic 2 Comments »Bloom’s newest iPad app Biologic is available now as a free download from the App Store. Biologic shows your contacts from Twitter, Facebook and LinkedIn as a collection of biological cells filled with their most recent updates. CNET’s Daniel Terdiman has an interview with Ben about the thinking behind the release and our plans for future versions of the app.
We’re excited to share this with the world – and we look forward to trying it out on the new iPad next week! – and we have plans to release several new features in the coming weeks. An update featuring improved UI for settings and item selection is already awaiting App Store approval, and we’d love to hear your suggestions what what comes next. You can talk to us on Twitter, on Facebook, or using the comments on this post.
SSL and HTTPS are Table Stakes
Posted: September 16, 2011 Filed under: CTO-Hat | Tags: apis, back-end, certificates, cto-hat, heroku, hosting, https, nginx, openssl, rapidssl, security, signing, ssl Comments OffWe’re working on a new back-end to support our visualizations of personal data from services like Twitter, Facebook and LinkedIn. These services now routinely offer https, the secure form of http, as an option to protect users from eavesdropping on open networks. It took a high profile release of a simple tool, FireSheep, to give users the awareness to activate this by default, and many users still aren’t aware that they need to do it. A few months later, https is “table stakes” for online services that handle personal data and it makes sense to activate it in new products by default. For example, your server must support https if you want to use Foursquare’s new push APIs or display content on Facebook after October 1st. Other services will surely follow suit.
If like me you’ve never needed to activate https you might not know what’s involved or what to look for. I’m still learning, but I thought I’d share what I’ve found so far.
To enable https you need to make sure your web server host supports it and you need an SSL certificate. SSL certificates are “just” text files of data that represent a chain of trust from a certificate authority through the certificate seller and down to you. The certificate authority’s credentials are installed in your browser to allow it to verify the certificates of websites you visit. Ideally there are identity checks at all stages of the certification process, though in practice it’s probably just an automated phone message and an email by the time it gets to you. Of course you need a credit card to pay for a certificate; those are table stakes too.
SSL on Heroku
We’re using Heroku for our hosting and they support a few different options for SSL in their add-ons section. If you’re using a *.heroku.com or *.herokuapp.com domain for your app you can just activate “piggy-back” SSL for free and stop reading. I’m told by support that this will be activated by default for new apps and that it definitely supports the new herokuapp.com Cedar stack, which wasn’t clear from the add-on page.
Otherwise, the differences between SSL options are fairly well explained on the SSL add-on page and from Heroku’s perspective it’s a matter of pushing you towards solutions that are most compatible with cloud hosting. Securing every subdomain is usually what you want, but in the cloud this means a dedicated IP address for your domain and you will be charged accordingly. We went with hostname SSL, which is a bit more convenient in the cloud but still requires a load balancer step, so Heroku currently charges $20/month for this option. Hostname SSL enables us to secure a single subdomain like secure.example.com.
Note: if you’re using Heroku their graphical tools are beautifully designed but not especially feature-complete, especially for SSL. It’s better to jump straight to the technical documentation and complete tasks on the command line. Their documentation for SSL support is clear and up-to-date.
Choosing a Provider
After asking around we received a couple of recommendations for an SSL certificate. Most useful articles you’ll find with Google talk about using GoDaddy but we’re not big fans of their up-sell process or tools so we wanted to try another seller. Gandi.net looked good but wouldn’t support our .io domain name, so we went with RapidSSL.
The main thing we were looking for was straight-talk and focus, which is why we chose RapidSSL. Our DNS provider also sells SSL certificates but their documentation seemed out of date and links to help documents were broken. But if you like one of your existing providers then of course check with them first.
Note: RapidSSL is an entry-level reseller of certificates from GeoTrust. If you’re not on a budget, or you want Extended Validation which will show your name in the address bar in modern browsers, then go directly to GeoTrust and pay a little bit more. We’re not conducting credit card transactions and our API traffic is largely behind the scenes, so we’re more interested in privacy and security than user experience at the moment.
Making a key and Certificate Signing Request
To acquire an SSL certificate you need to create a private key for your server and use it to create a Certificate Signing Request which you upload during the purchase process.
Heroku uses Nginx to serve your pages (no matter which language you’re using to serve responses, Nginx sees the requests first and forwards them to your app). RapidSSL didn’t have instructions for creating a key/CSR for Nginx but the instructions for Apache worked fine. I used the openssl command in my Mac terminal, as follows:
- Generate a new key with
openssl genrsa -des3 -out example.com.key 2048
- Generate a CSR with
openssl req -new -key example.com.key -out example.com.csr
– note that Common Name will be the name of the subdomain you’re securing.
- Copy/paste the CSR into RapidSSL’s form as part of the purchase process
- Complete the phone confirmation step. I also needed to activate a new forwarding email address on our domain to handle the admin email, because our .io domain couldn’t provide the relevant admin contacts automatically.
- Await your certificates by email. This wasn’t as rapid as we’d hoped, it took about an hour.
- A web server usually requires an unlocked key, so do
openssl rsa -in example.com.key -out example.com.unlocked.key
to create that. With hindsight you could leave out the -des3 in step one and skip this step.
- Save the keys you receive by email. For filenames we used example.com.crt for ours and intermediate.crt for the certificate authority’s certificate.
- Combine your key and the intermediate key using
cat example.com.crt intermediate.crt > example.com.pem
(.pem and .crt seem to be used interchangeably, please let us know if this is incorrect).
- Upload the certificate and unlocked key to Heroku for your app:
heroku ssl:add example.com.pem example.com.unlocked.key --app example-app
- Activate Hostname SSL, and consent to being charged $20/month:
heroku addons:add ssl:hostname --app example-app
- Lastly, update the CNAME DNS record for your subdomain to point to the new hostname provided to you in an email from Heroku. This arrived as quickly as I could check my email.
That’s it! Phewf! A simple 11-step process. There’s a full transcript of this on github if you want to see what the responses look like, and once you have a certificate Heroku’s SSL docs are excellent. Good luck!
Planetary, Version 2
Posted: September 11, 2011 Filed under: Hiring, Planetary | Tags: apps, bloom, cinder, hiring, ipad, itunes, libcinder, music, opengl, planetary, releases 16 Comments »We’re proud to announce that version 2.0 of Planetary, our celestial music player for iPad, is now available for download in the iTunes App Store!
To learn more about how Planetary was made, check-out Robert’s in-depth behind-the-scenes post and the extra notes on his personal portfolio site, or read on for a summary of “What’s New”:
Planetary 2.0 features a full graphical update: new galaxy detail, solar flares, eclipses, atmospheric glow, accretion disks and much more fine detail at planet and moon level. Additional detail is available for iPad 2.
To address your most popular feature requests we’ve added in-app support for playlist selection and shuffle/repeat modes.
Other new features include optional automatic camera motion (great for long playlists!), gyroscope support for iPad 2 and scale and speed sliders to adjust the universe to your tastes.
Several small bugs with version one are also fixed and Planetary 2.0 has much better interactive performance, especially when flying between planets and when interacting with the playhead slider.
Many thanks for all the feedback and kind words we received about version 1 – keep it coming!
Beginnings and Endings
This second release of Planetary also marks the departure of our colleague Robert Hodgin. You might remember that we announced Robert had joined us as Creative Director earlier this year. With hindsight we realize it would have been more appropriate for him to join us as artist in residence for the duration of the Planetary project. In practice that’s what his role has been, and he’s made the choice to step away at this point.
Robert returns to pursuing his own projects and plans to increase his contributions to the Cinder library. We’ll continue to use Cinder in future Bloom projects too so we’re very excited about this and wish him well in all his future endeavors. Thanks Robert, it’s been a fantastic journey!
What Next?
We hope to play host to more artists-in-residence in future, without blending that process with a more traditional production role unless that’s the right thing to do. If you’re an ambitious digital artist interesed in working with Bloom in this capacity, and helping us define it, please get in touch.
We’re also considering creating a more traditional Creative Director role within our team, if you’re interested in helping us define this role please get in touch.
As with all our openings, we’re not interested in hearing from recruiters or agencies at this time.
Planetary, Day 2
Posted: May 3, 2011 Filed under: Planetary 20 Comments »Our first iPad app Planetary launched yesterday and can be downloaded for free from the App Store. We had a great day responding to feedback and requests from our first users and watching the waves of positive responses roll in on Twitter and elsewhere. We’re both humbled and proud to be getting all this attention, especially on such a busy news day.
CNET kicked things off for us yesterday with an IM interview with Ben, a good insight into some of the thinking that’s gone into the app. Gizmodo granted us a coveted App of the Day badge with a lovely video review. We’ve also received welcome mainstream coverage from the New York Times, Time and Wired, specialist reportage from TUAW, AppAdvice and Creative Applications as well as reports from our three favorite visualization blogs Infosthetics, Flowing Data and DataVisualisation.ch.
Our friends at Laughing Squid were among several blogs to use our introductory video from video. It takes a village to produce a video and we couldn’t have done it without Scott Schiller, Tomas Apodaca, Owen Granich-Young and Yoz Grahame. We had great fun making it so here it is again for those who haven’t had a chance to catch it yet:
The video is also a great opportunity to showcase the music of Zoë Keating. Robert is lucky enough to have collaborated with Zoë in live performances such as last year’s In The Trees from Zer01 San Jose. If you like what you hear in our video then be sure to try the full album.
Web 2.0 Expo Slides
Posted: March 29, 2011 Filed under: Talks Comments OffHere are the slides and notes from my Web 2.0 Expo talk Data Visualization for Web Designers:
You can also download the PDF version. Both are exports from Keynote including extra notes and links that should cover most of the material from the session.
Upcoming Bloom appearances: Web 2.0 Expo SF and Geeky by Nature NYC
Posted: March 26, 2011 Filed under: Talks Comments OffOn Tuesday (March 29th) I’ll be speaking at in San Francisco at Web 2.0 Expo. My talk is Data Visualization for Web Designers: You Already Know How to Do This, here’s the overview:
Today’s web developer is armed with a powerful suite of tools optimized for writing network-aware, data-driven, interactive graphical applications. Modern web browsers provide a powerful flexible programming language (Javascript), an expressive and elaborate styling system (CSS) and two robust, battle tested document models (HTML and SVG). In the rare cases these aren’t enough, new technologies like WebGL and Canvas can fill the gaps and old standbys like Flash haven’t gone anywhere. You know how to do this!
In this session we’ll:
- take a look at the best examples of interactive, web-based data visualization and talk about how they work and what they achieve (and where they fail)
- explore the tools, techniques and resources out there for today’s web developers and designers working with graphical presentations of data (e.g. Processing JS, Protovis, D3, Google Maps, etc.)
- look to the future of data visualization online and what features new technologies like WebGL will offer that we haven’t seen before
On Friday (April 1st) Bloom’s Robert Hodgin is speaking in New York at Geeky by Nature. His talk is Practice Makes Perfect, So What Are You Practicing?, here’s the overview:
Six years ago, I created my first programmed magnetic repulsion effect. In the years that followed, I continued to fine tune and explore the phenomenon of electrostatic fields and gravitational forces.
I used the necessary equations for these invisible forces to create audio visualizations, natural simulations, and artistic interpretations. Everything fell into place as things tend to do when you are dealing with specific formula in controlled situations.
Recently, however, my fascination with these invisible forces has started to work its way into my day to day. I can’t close my eyes to sleep without seeing charged particles spreading out in the blackness. I can’t walk down a crowded sidewalk without thinking about how repulsive forces lead to collision avoidance. I can’t look at flowering tree without considering the complex mathematics and infinite iterations it would take to create such intense beauty and variety.
In my presentation, I will discuss these forces at greater length and show some implementations and unexpected uses.
If you’re at either event (or both!) please don’t hesitate to say hi and ask us more about Bloom!
Introducing Fizz
Posted: February 25, 2011 Filed under: Fizz | Tags: fizz, works, facebook, twitter, announcements 1 Comment »The response to our website and company launch on Monday has been great. We’re already hearing from people who are as excited about our vision for data expression as we are and we’re getting great feedback on our initial offerings, Fizz and Cartagram.
We’re also sensing a blend of curiosity and hope, especially from our friends at blogs like Infosthetics, Flowing Data and Datavisualization.ch. We’re working hard to fulfill that hope!
Our long-term plan is to build a product that offers many different visualizations that can be applied to a wide variety of data sources. We’re building the product one piece at a time, starting with Fizz.
Fizz shows recent updates from your network on Facebook or Twitter. Large circles are people, small circles are their updates. Typing in the search box highlights matching terms:
Fizz can connect to data from two places right now: Twitter and Facebook. Both of these are personalized to present recent updates from your own network of connections. We plan to add more data sources soon.
Designing Personal Data Visualizations
The personal nature of the data immediately presents an interesting design problem. How do we show you what Fizz is and does without knowing who you are and what data is relevant to you? We’ve introduced a wireframe mode to the visualization as one possible answer to this question.
Fizz is the first of many visualizations we’re building. It’s adaptated from a fairly common chart, the bubble chart (well implemented by our friends at Many Eyes and offered in open source libraries like Protovis) but we’ve adapted it to be more dynamic and playful. It’s a different way to look at textual information, like tweets, and as we develop it we’ll add extra layers of relationships and connections onto the foundation it provides. It’s also a nice stress test of the new features in browsers like Safari, Chrome and Firefox, and we’re using the Processing JS library to handle the drawing and animation.
As we add new data sources to Fizz we don’t want to be tied to a lowest common denominator treatment of that data. For example, if we add LinkedIn as a data source it might be easy to limit Fizz to showing people and status updates as it does for Facebook and Twitter but we might also want to represent people and companies instead. Ultimately, the Bloom platform will allow these choices to be made by anyone but for now we’re exploring them one by one. That’s why we began simply with Fizz for now, and it will gain in flexibility and expressiveness as we develop our tools.
If you have thoughts on features or inputs we should add to Fizz next then please let us know in the comments, on Twitter, or fill out or feedback form on Google Docs.


