Over the last one month, I've got a lot of queries on what Popfly is, what it can do and what it is going to do in the future. Instead of repeating myself over and over again, I thought I'll save myself some typing by compiling a few blog posts.

Unlike most of my friends who started off with C/C++ or Java or GW-Basic, I learnt programming with Visual Basic. I actually had tried to learn C and C++ but I just didn't find that interesting back then. Most tutorials focused on the syntax of the language, how to write simple math applications or how to draw circles or simple graphics. None of that stuff excited me - so I had made up my mind that programming and computers were just not my thing.

All that changed one sunny afternoon in mid-2000. I had just installed Windows 2000 on my first home computer and I fired up VB6 for the first time. I gingerly drag-dropped a button onto the main form and then hit 'Run'. What followed was pure bliss. I actually saw an application *I* had created running. Not Microsoft. Not Adobe or some professional. *Me* .It looked just like any other Windows application and the button was clickable ! This was a huge moment for me and probably the pivotal moment which changed me from just a computer user to someone who could create software.

Popfly tries to recreate this 'aha' moment for a new generation of computer users.

The Past

Two great technologies have done in the past what Popfly is trying to do now for a new generation.

The first is Visual Basic. VB let users create GUI applications without having to learn how Win32 worked. A lot of the features made popular by VB have stuck around. You see VB's influence in current day Visual Studio and even frameworks like Winforms which were built years after VB. I would credit VB with features like Intellisense, controls and being able to generate code for them by drag-drop, a WYSIWYG GUI tool with code generation and everything surrounding data access (ADO, the data designers, data binding, etc).

The second is the combination of HTTP+HTML+Javascript+the webbrowser. There are a couple of features from this world which stand out for me. The first is 'View Source'. Like I said in a previous post, this let everyone learn web development by just picking apart a webpage they liked. The second is the forgiving nature of the web browser world. If the smallest HTML mistake had just shown an empty page and a parsing error, a lot of web developers would have never become at what they do today.¹

What is Popfly?

Let me copy-paste from the official description page (which you should definitely read)

Popfly is the fun, easy way to build and share mashups, gadgets, Web pages, and applications. Popfly consists of two parts:

1. Popfly Creator is a set of online visual tools for building Web pages and mashups.

2. Popfly Space is an online community of creators where you can host, share, rate, comment and even remix creations from other Popfly users.

You can get a good overview of all the features here but let me try and point out the highlights.

• Blocks
  
  You can think of blocks in two ways. One way to think of them is as a component which provides some functionality. Blocks usually provide one or more of three types of functionality. Blocks that let you display stuff (like in a carousel, sphere or one of the mapping blocks), blocks that wrap around a web site and let you access data from that site (Flickr, Digg, Twitter, etc) and blocks which do some sort of transformation on their input (Sort, Combine, etc). Of course, there are a lot of blocks which don't fall into this neat classification (e.g. Calculator, the Block Inspector block) but they're (currently) few in number.
  
  Another way to think of them is as arbitrary chunks of Javascript code. Since it is Javascript, blocks are free to (and often) use HTML and/or XAML for Silverlight. Every block on the site maps to a Javascript class². Blocks are represented throughout the site with a spinning red 'block' shown on the right. You can use any of the default blocks provided (written by the Popfly team) or over a hundred blocks (as of writing this) created by Popfly users. You can create your own - from scratch or by 'rip'- ing some other block's which lets you see how another block works and lets you build upon/modify it.
  
  Blocks by themselves aren't that interesting - they're like the individual characters in Super Human Samurai³. It's when they join together that true magic happens!
  
• Mashups
  
  Like I said in the previous section, the blocks by themselves aren't that powerful - like the individual characters in an old TV show. A better analogy is components (COM/ActiveX/Corba/beans/pick-your-poison). When you put these blocks together, you create what we call 'mashups'. An example of a mashup would be joining the Soapbox block (which generates video output) and the video player block (which, well, lets you play videos) and voila! You instantly have your own mashup which plays Soapbox videos. Another popular type are ones involving maps. One slightly advanced mashup you can create using the Virtual Earth, Timer and GeoNames service lets you replicate Twittervision in seconds.
  
  The primary tool used to create these mashups is the mashup design surface (shown on the right). Most people would agree that this is one of the most visually intense development environments created ⁴ . You can search for blocks and add and connect them. When you connect blocks, Popfly tries to match the right output to the right input. We try to do this using the 'type' of the input/output (more on that in a later post).You also have the ability to customize all the Javascript and HTML generated by the designer using the custom HTML view.
  
  Currently, adding custom Javascript to mashups (as opposed to blocks) is slightly difficult - we're working on making this easier in future releases.
  
• Web Page Creator
  
  Popfly includes a WYSIWYG web page creator which was built off the Office Live Web Designer. This is very popular - users can easily create pages, change themes, styles and colors without writing any HTML. You also have the ability to embed Popfly mashups and share them externally just like mashup projects. When I initially came across this feature, I was surprised by the huge number of themes available - over 150!
  
• Popfly Space
  
  'Popfly Space' is the umbrella term we use to refer to all the social network aspects of the site. You can add friends, look at anyone's projects, rip anyone's projects, etc. There are a lot of interesting features that this lets us do. Every person gets a 'rating' which is an aggregation of how their projects have been rated - so you can see who the best creators on Popfly are, what the top projects are and so on. I personally use it as a sort of 'geek social network' :-)
  
  
• Embedding and publishing
  
  Popfly lets you embed Popfly mashups/webpage pretty much everywhere. Here are some of the places you can embed your mashup in

• Any TypePad/MetaWebLog API blog
• Live Spaces
• As a gadget which you can embed in your Vista sidebar
• As an iframe which you can embed..well..anywhere.
  
  I've already seen bloggers embed Popfly mashups in their site. One frequently asked question is - do my blog readers also have to be Popfly users to view these embedded mashups? The answer is no - the embedded mashups are opened up for anonymous viewing. Since you're using an iframe to embed the mashup, you're also ensuring that there are no potential security issues. The mashup runs in its own iframe sandbox and hence can't do bad things to your site.
  
• Popfly Explorer
  
  This lets you upload and share projects built with Visual Studio Express. Note - you can share *any* type of project- Winforms/ConsoleApp/whatever. When you share it, your friends can access it and pull it down to their machines. The only limitation is that you have a 25 mb space limit on our servers currently. This is a great way to share projects without having to send zip files back and forth - a process I'm sure a lot of you are familiar with.

Resources

I plan on writing a series of blog posts to dig into various parts of Popfly. There's some great content available on the web about Popfly - I've linked to a few below.

• Overview page and video
• Tutorial videos (you need to be a Popfly member to view this). The 'Create a Mashup in 30 seconds' blew me away the first time I saw it.
• The official Popfly FAQ
• Popfly team blog. You can find links to the blogs of all the team members here. ⁵
• Mike Ganotti's post on integrating Sharepoint and Popfly
• Chris Craft's collection of Popfly links
• Popfly Forums - for any questions, suggestions and bug reports. We monitor these forums very closely and you'll frequently see Popfly team members in the forum threads.

Notes

1. I've spoken about this a long time ago in 'Tyranny of the geeks'.

2. I know that Javascript doesn't have 'classes' per-se but now is not the time to quibble about prototype-based languages.

3. Does anyone else remember this show? I loved this as a kid!

4. Adam Nathan is the man!

5. I just noticed that my blog isn't up there. Need to go around and beat up some people into adding it (or sneak in the change myself ;-) )

I just spent a few hours debugging something that I finally tracked down to IE and Firefox dealing with HTTP caching differently. To make a very *long* story short (and believe me, this was a story of hours in Firebug and Fiddler and VS), IE does *not* cache HTTP pages if you send down the no-cache directive. Firefox does not cache HTTPS pages but *caches* HTTP responses even if you send down a no-cache. The fix is simple - send down a no-store directive instead. So instead of

Cache-Control	no-cache

you send down

Cache-Control   no-store

I eventually found a Bugzilla bug which deals with this exact scenario. It seems to be a contentious issue with different opinions on what the right behaviour should be. I'm just happy that I get to fix it with just a one-line code change :-)

Response.Cache.SetNoStore();

I'm putting it out there so that some poor soul in the future can save some time. :-)

We just pushed out a major update to our site. You can get the entire list here but the biggest changes for me are the tremendous perf improvements and the fixes for embedding your mashups.

My actual contribution to this release is quite minimal but the entire team has put in some real hard work to get this out the door.

For those of you already inside Popfly, play with the new release. Everything should just work and if it doesn't, it is a bug <grin/>. Let us know if you find an issue (mail me or puff@microsoft.com or post on the forums).

For those of you not inside Popfly, sign up for an invite. We are sending out thousands and thousands and you should get yours real quick. Of if you have a friend inside Popfly and get them to send you one.

Have fun playing with the new stuff. Don't be gentle. :-)

Random comment from our team meeting yesterday - "Let's not get stuck with the evil duck"

In the middle of a thread on whether Zooomr stole code from Flickr or not, Stewart Butterfield from Flickr has one of the best comments I've seen on our industry in a long time.

... My favorite analogy to software development and product design is music: it's possible to be entirely original in a context where there pretty much every chord progression, every rhythm, every melody and every harmony has been done before, even if it is combining influences and whole elements from those who influence you....

That's truly what our industry is about - making music. Easy to forget in the blur of Google vs Microsoft vs Yahoo or the latest Techcrunch startup.

P.S On a tangential (and jarring) note, the way Zooomr operates perplexes me. You have a CEO who says he isn't familiar with coding ethics and legality and a sole developer who hand waves away suspiciously similar-looking code as just naming conventions. What gives?

P.P.S As always, do read the disclaimer at the bottom of the page (this is my own opinion, yada, yada)

People have often used the phrase 'drinking from a firehose' to describe their first few weeks at Microsoft. I felt the same way when I joined two years ago and I feel the same way now, starting afresh at Redmond and Popfly. The last few days have been a blur. On one hand, I've been immersed in setting up life at Redmond (which is quite challenging when you're vegetarian and can't drive a car). The real challenge has been to come up to speed on Popfly and to absorb all the knowledge the team has built up. This team has done a tremendous amount of work, spanning teams, technologies and geographical regions. The buzz after our launch has been insane - you know you're in a good spot when you've got MarkL talking about you ;-)

Why Popfly?

Before Popfly went live, I had a tough time explaining what my new team does to folks at Microsoft (talking to people outside was obviously a strict no-no). I eventually wound up telling people either or both of the below

"Think Visual Basic meets Flickr"

I learnt to code using Visual Basic. My first ever program was a tabbed browser (years before Firefox :-) )built by drag-dropping the webbrowser control and writing a few lines of code. If I had had to learn to program using just a text editor without an IDE, I don't think I would have ever learnt to enjoy programming. I know tons of people who learn to code that way - I'm just not one of them and I'm not alone. Popfly really tries to capture that same essence of VB within the context of Web 2.0². Imagine if you, the newbie VB developer, could share your creations with your friends or with the entire world with a click of a button, let them learn from it and modify it, rate it and run it on any website they wanted to. That's exactly what Popfly is. We can extend this analogy in interesting ways.Instead of VB's COM components and controls, you get to use any web service you want (wrapped by Popfly blocks). For UI, instead of Win32 controls in VB, you get to use Silverlight or plain ol' HTML controls with Ajax.

VB made software developers out of an entire generation of people who never thought they could create software. If Popfly can accomplish even half of what VB did (and continues to do), I think we would have been a resounding success.

"'View Source' for the next generation of coders"¹

  Almost all web developers I know learnt HTML by doing a 'View Source' in their browser. I remember 'stealing' the color '#6699CC' from the old Microsoft.com site and using it on all my personal sites for years. Popfly embraces the same principles. Any creation you see on Popfly can be 'ripped' and modified. So if you see some interesting creation on the Popfly site or embedded on a page, go ahead and see how the code is written - it's the best way to learn. I should know - I've spent a lot of time in the last week learning from Adam's mashups.

 On the site, this can be done by clicking 'Rip It' next to any creation, be it a project or a block. When you see an embedded Popfly mashup on a webpage, just mouse-over and click on the VS infinity icon. You should now be able to click 'Customize this' which will open up the mashup in the Popfly designer.

 

The Team

This has to be the craziest, most kick-ass bunch of folks I've seen. Here's a random sampling of the craziness  from just last week alone

- Me: Are you always this weird?
  John: No - I'm usually just hostile

- Adam trying to recreate the Popfly designer with red pieces of jello and a fork.

- Me hitting a breakpoint on the internal dev site and then leaving my office. Blocking every dev on the team simultaneously is not a good thing to do in your first week on the team :-)

- Tim Rice, a superstar dev on my team, actually beat the Saltine challenge in our weekend team gathering. I barely ate one.

Notes

1. I swear I didn't steal this from Aaron :-)

2. I hate using the term 'web 2.0' but I couldn't think of a better collective term to describe Youtube, MySpace, Flickr, Del.icio.us, etc.