Introducing Biologic

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

We’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:

  1. Generate a new key with

    openssl genrsa -des3 -out example.com.key 2048

  2. 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.

  3. Copy/paste the CSR into RapidSSL’s form as part of the purchase process
  4. 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.
  5. Await your certificates by email. This wasn’t as rapid as we’d hoped, it took about an hour.
  6. 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.

  7. 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.
  8. 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).

  9. Upload the certificate and unlocked key to Heroku for your app:

    heroku ssl:add example.com.pem example.com.unlocked.key --app example-app

  10. Activate Hostname SSL, and consent to being charged $20/month:

    heroku addons:add ssl:hostname --app example-app

  11. 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

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!

Bloom Planetary 2 screenshot

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.


Bloom is Hiring

Bloom is a growing start-up based in mid-Market in San Francisco, funded by Betaworks and OATV. Our long term vision is to produce a suite of apps across different devices that combine motion graphics, game design and data visualization to deliver new ways of seeing what’s important. Our current focus is on app development for iOS; our first iPad app Planetary was released last month.

Are you our Design Technologist or Creative Coder?

Do you have recurring dreams involving emergent patterns that make sense out of data in your environment? Maybe that’s just us. Can you imagine playing an instrument that helps you understand and organize information? How about a physics simulation of your social graph? Do you play where others work? Do you aspire to a world where tools take beauty seriously? If you can imagine what we’re describing, you might belong here.

Responsibilities

Explore/Create – we’re delivering novel experiences: sometimes we have to discover them first. You should be comfortable operating in uncharted territory: choosing from a broad selection of possibilities, starting from scratch, evaluating what works and what doesn’t, pressing on if things seem promising, turning back if a path turns out to be uninteresting.

Improve/Adapt – after you, our software is our biggest asset. We want to take advantage of the momentum we gather when launching new work to learn from our audience and adapt our products accordingly.

Deliver – we like to play and experiment and we’re also in the business of shipping things. We want people to see our work, preferably sooner rather than later. We’re doing our best to ship early and ship often!

Qualifications

You’ve worked on software that people use. You’ve been paid for your work. You can show us code that you wrote, or interfaces you designed, or preferably both.

If you’re a programming specialist, you’ve worked closely with designers before and know how to ask for help with things and how to work with a visual designer’s direction. You’re not afraid of Photoshop or Illustrator but you don’t mind if someone else takes the lead in that area.

If you’re a visual design specialist, you’ve worked closely with programmers before and you know when to specify things carefully and when to let a programmer do what they do best. You’re not afraid of code but you don’t mind if someone else takes the lead in that area.

If you’re a rare blend of designer and coder, you’re ready to work alongside other folks (specialists and hybrids alike) to achieve results that are greater than you could achieve alone.

If you’re adept at networked application development and technology integration, we want to hear from you too. We hope you love reading esoteric network specifications and reverse engineering protocols and building tools to help data flow. You wonder how systems might scale and how to design those systems for unexpected behaviors and serendipitous discoveries. You’re ready to help us deliver wide streams of data through thin straws and separate the meaningful raw material from the unnecessary noise.

Essential:

  • designing, prototyping and ideally building complex, interactive, data-driven graphical interfaces
  • experience with one or more of Objective-C, C++, Java, C#, Python, Ruby, Javascript, Lua, Actionscript (or equivalent) and one or more of iOS, Android, Cinder, Processing, OpenFrameworks, XNA, OpenGL, DirectX (or equivalent)
  • portfolio, showreel or links to completed work

Nice:

  • experience with HTML/CSS/Javascript
  • experience with a server-side language and web stack (Ruby e.g. Rails, Python e.g. Django, Node.js e.g. Express)
  • other fun things: knowledge of OpenGL shaders (GLSL), WebGL, physics simulations, etc.
  • experience with version control, ideally git

Big Bonus Points:

  • completed and shipped an app for iOS or Android, ideally using 3D OpenGL
  • shipped a game to any platform implementing high-end graphics and physics engines
  • good writing skills, for internal documentation but also for blogging, tweeting, press etc.
  • experience with 3D software, motion graphics, video editing, special effects
  • deep network experience (HTTP, sockets, zeroconf, TCP, UDP, etc.)
  • managed complex collaborative projects with git, xcode, etc.
  • surprise us!

OK, Really, Enough Words… That’s Me!

Email us jobs@bloom.io and tell us about yourself (no recruiters or agencies please). Be sure to show us your work (videos are good) and attach a resume if available (LinkedIn does a nice PDF export if it’s been a while). Go for it!


Planetary, Day 2

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

Here 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

On 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

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.


Welcome

This is the blog for Bloom. We’re just getting started. There are a few notes on our work and team at http://bloom.io/ but please check back here for more news soon. Thanks!


Follow

Get every new post delivered to your Inbox.