dang@izea

Moving my blog

2009-03-26T09:22:00.001-04:00

In my efforts to roll all my online identities into one, I'm moving this blog. I will now be posting at http://dascgo.blogspot.com. Sorry for any inconvenience. Hope to see you there!

Signing up to web services by following them on Twitter

2009-03-20T12:15:00.002-04:00

I've been working on a Twitter project that requires immediate action when receiving Direct Messages and Follows. To conserve API hits (and for speed - emails arrive before the api serves the data), I'm monitoring an email account for those alerts. Twitter puts information in the email headers to help with this, which is great. So while doing all this, I had an idea....

Why can't I just become a member of your site by following your Twitter user?

As an example, say we have a site called cool_images.com which let's you catalogue and tag images you find interesting. This site also has the Twitter account @coolimg.

Ok, so I want to sign up to cool_images.com. Where I expect to see a signup form, I see a message:

To join this site and upload your photos, just follow @coolimg on Twitter.

That's a little strange, but I do. A few seconds later, I get a DM.

Thanks for joining us. You can log into the site with your Twitter username and here's a temp password (you can change later): FluffyBunny05

What's going on that allows this to happen? The same thing I mentioned in the first paragraph... cool_images.com would monitor their Twitter emails and react accordingly. They could also monitor their DM's and reply back to the user. For instance, I'm having trouble uploading an image, so I tweet:

@coolimg Help with uploading images

The site watches it's inbox and routes questions to employee's that can answer them. A few seconds later @dan_at_coolimg messages me and begins to help me with my problem. This also allows the help information to live in the public timeline, allowing others with similar issues to find correct answers.

Maybe I could also do things like:

d @coolimg import http://bit.ly/..... and tag it "downtown orlando"
d @coolimg send @dascgo a link to my favs
etc...

Combined with something like this user detection idea from Chris Heilmann (which Twitter disabled for security reasons), would have been incredible for turning Twitter into a sign on service. Maybe they could rethink what Chris was doing and provide a compromise for achieving the same functionality, because, quite frankly, I would love to join/unjoin sites by following their Twitter accounts.

Where did I pick up my Twitter Followers?

2009-02-23T10:37:00.006-05:00

Yesterday I gave a CloudShout presentation at barcamp miami during which I gave out my twitter name (which is dascgo, btw). Later that day, I checked my email to see that I have 10 new followers on Twitter. However, one of them I know was not because of my barcamp presentation. This had me thinking that it would be really useful to know why people have decided to follow me. Here's what I'm thinking...

When you decide to follow someone, next to the follow button is the option to add a hashtag keyword. So here's a random person that followed me yesterday, but if it was I that initiated the follow, I would see something like (underlined in green):

Again, that field is completely optional to not impede the one-click follow process. But if people DO fill something in, it could be used in a couple (at least of the top of my head) ways. First, when a user gets an email notifying them of the new follower, we could see this (underlined in green):

I would totally love that. I would know if what I'm doing is successfully reaching people.

Second, what if I went to, say:

http://follows.twitter.com/barcampmiami

and got to see something like:

How useful would that be to event organizers? :)

So I admit, I'm still a Twitter noob, and there are so many third party tools for the service that someone may have a similar idea working already. Anyone know of anything like this? I think it would be tremendously helpful.

What I'd like to see from Google Reader and Gmail

2009-02-18T20:15:00.014-05:00

I love reading articles that make me want to do something. Today I was reading this post on ReadWriteWeb and it begged for me to participate. The question was, basically, "what new feature would you like to see in any Google product".

I'm a Google fanboy, I admit, and the two apps that I can not live without are Gmail and Reader. These two products are often in two browser tabs anytime I'm at my machine. So, what I would like to see, or at least ponder a bit longer, is how could these two products be combined?

Take a second and go look at each one. They look REALLY REALLY similar, right? So, could something like this be what I need?

It's not a full mockup, but you get the idea. Now, let's take it a step further and really get to something I want. Post comments in Reader...

I think it would be great for Reader to be able to import comments, and lay them out in a fashion similar to how an email conversation in Gmail looks/works. I know this is not an easy task, but starting off with some of the major blogging engines, hmmm, perhaps Blogger at least, would be a start.

Imagine something like this:

I would love to see something like that. :)

Sneak peak at some upcoming CloudShout features

2009-01-19T11:21:00.009-05:00

FriendFeed in user profiles:

This will also be carried over to your Friends Tab in the Activity Hub, so it's not just a list of your friends avatars - it actually shows what they are up to...

Speaking of profiles, before, you could only open a profile from the Activity Hub, now you can link a person to their profile from your blog post:

You will be able to call lot's of applications this way, like having a link open up in DangBrowser, for example.

And DangGrowl will support different message types and user/app icons, as illustrated here:

Visuals are not finalized, so that might change. It's also worth pointing out that messages in DangGrowl can contain options to do things, like in the first notification in the image above.

Lot's of other cools changes coming in the next release of CloudShout. I can't wait to show them!

CloudShout Communications

2009-01-11T11:02:00.002-05:00

I recently asked people following @cloudshout on Twitter what they like or dislike about CloudShout. The problem pointed out the most related to communicating with other site visitors.

The issue is, from what I gathered:

People do not know about the chat, thus the site chat room is empty
People miss chat invites by jumping from page to page.

The first problem will be solved in upcoming releases. We are going to make it more prominent to visitors that you can chat with the blog owner, and other visitors, and that there are actually people chatting at any given moment. Like walking into a room full of people, you instantly know that there are conversations going on without having to go look for them. Arriving at a CloudShout powered blog, you should instantly be able to "sense" the interactions around you.

The second issue is a little bit trickier. Due to the design of CloudShout, it has to reset every time the browser loads a the page. One solution might be that you can launch the Chat application in it's own browser window. That way it stays running as you move around from page to page, or even site to site. A good idea that I will add to my list of things to consider.

Jumping back to the first issue, here's an idea that might be helpful in letting people know about the chat functionality on your site... Make a blog post. Invite your readers to interact directly with you at a scheduled time. For instance: "We covered many topics this week, and I will being doing a live chat with anyone interested Friday at 8pm EST to recap and get your feelings on the subjects. Just click on the 'Join Community Chat' in the CloudShout widget in the sidebar to participate. See you there!". Or how about "Join us here immediately following the Jan. 16th episode of Battlestar Galactica to discuss the show!".

This, gives people a known time that other people will be online talking, and instructions on how to find the chat services.

If you did not know that you could use CloudShout to communicate with other site visitors, this video will introduce you to the concept.

Do you have any ideas?

Cool use for URLBrief.com

2009-01-07T15:17:00.013-05:00

URLBrief is a url shortening service that allows you to add up to 10 urls. The 10 urls do not get their own shortened url, but a single one that will randomly redirect to one of the 10 links. It sounds strange, I know, but with that you can do cool things like have a random avatar show up (see image in this post, you'll need to refresh to see it change).

All you need to do is add links to the images you are going to use in URLBrief, then use the shortened url created by URLBrief as the "src" of your image tag:

<img src="the urlbrief link">

Of course, you can just do a one-to-one link shortening if you need to. Also, you can get stats on your shortened url by just adding .xml or .html to the end of the link:

http://urlbrief.com/86af6b.xml
http://urlbrief.com/86af6b.html

Pretty cool... the randomness can be used for all sorts of fun! :)

Personal Challenges for 2009

2009-01-04T18:34:00.004-05:00

Inspired by two people I really respect, I've decided to give myself a few goals for the new year. Here are the areas I'd like to explore/improve upon...

1) I've been building websites since 1996 so when it comes to HTML, I'm a bit old school. Tables, inline styles, inline javascript, all those things that I'm told are bad are second nature to me. I understand, and agree with, the goals of being unobtrusive, but it's hard for me to actually abide by those ideals. Hopefully, this will be the year where I break away from my bad habits.

2) Adam, on his on his 2009 list, brings up a good point in testing Javascript. CloudShout relies heavily on Javascript, and it makes 100% sense that those parts of the app are well tested. Thus, Javascript Testing is one of the top items I will be looking into.

3) Organize my accounts. As everyone, I have accounts with lots of web services. Be it Flickr, Twitter, Blogger, etc. However, sometimes I'm good old Daniel, and other times I'm Daniel @ IZEA. I want to break away from my split personality and combine them into one Daniel, if that makes any sense. :)

4) I've been programming with Python for about 7 months now and I really like it. It reminds me a lot of Javascript, so much sometimes I find myself writing Python in a .JS file or vice versa. I'd really like to become more proficient in this language, to squeeze every ounce of power from it, so another thing I'd like to tackle this year is to improve my knowledge of Python.

5) Beside becoming more proficient with my current language toolbox, I'd also like to pick up a new one. I remember one bright morning, walking with Pete to grab a coffee, and he filling me in on the coolness of Erlang. Ever since then, it's been something I've wanted to look further into. And so, I think I'll take some time this year to learn a bit more about Erlang and write a few applications.

6) Write my own lightweight HTTP server. Big apps are old news. To put my reasons into perspective here, let's image a method that is, say, 40 lines of code. Nightmare, right? The rule is to refactor that into smaller chucks, and why should a web application be any different. Why does a web app need to do EVERY business requirement. I see smaller web apps, that all handle a specific task. A signup app, a mailer app, an API app, etc. We recently did this with IZEARanks, breaking out a load heavy function into it's own app. So when the load increases there, the core app is not affected. Ok, I'm getting a little off topic now, but this relates back to writing my own server because I don't see a reason to put a full featured HTTP server in front of code that only needs to handle post data, for instance. Granted, I don't know much about HTTP servers but I'd like to investigate what's actually capable.

Well that's it. I hope everyone has a great year! :)

A quick overview of how CloudShout compares to Google Friend Connect and Facebook Connect

2008-12-31T09:36:00.006-05:00

I just read an article about Facebook Connect and Google Friend Connect that was mainly focused on their similarities and differences. I wanted to respond to that article by adding in CloudShout to the mix.

The main similarity mentioned is "to maintain and add social network applications to other websites". This is a core function of CloudShout. CloudShout allows you to interact with not only your friends on third-party websites, but also other visitors that have the potential to become your friends.

Then the article begins to mention differences. The biggest difference mentioned is expansiveness and compatibility.

The compatibility part comes down to how you log into the service. With Facebook Connect, you log in with your Facebook account, and use the social graph you've built up while using Facebook. With Google Friend Connect, you can log in with "virtually any social network". I'm not sure how many social networks have tied into this actually, but it does make sense to leverage the graphs produced in any (or better yet, all) social network you are a member of. CloudShout is similar to Facebook, in that you need an IZEA account to power your social graph. I believe Google Friend Connect has the best option here and we will look at how to add similar capabilities in future releases of CloudShout.

The article then talks about the complexity in adding the service to your site or blog. The winner, in that article, is Google. However, CloudShout, I would say, is even simpler. There is no .html files to add, just register your blog and paste in two bits of code. See this video for more information.

The article does not go into using Google Friend Connect to add OpenSocial widgets to a site, and I haven't had the chance to see what it takes to do that. But in CloudShout, to add new functionality to the core app, all you do is click a button and it's loaded. For instance, if you see other site visitors using the Twitter app, then you can click "Install this app" right from the blog you are on and it is instantly available there and other CloudShout powered sites you visit. You can even install apps to your blog from another blog (if you see something that blog has that you'd like to have on yours) without looking at html code, or even being at your blog.

I wish I had more time to play with Google Friend Connect and Facebook Connect to get my own perspective on the what works and what doesn't to understand where CloudShout lags behind, but right now, I'm confident that CloudShout is currently a better product for actually doing social stuff on sites that are not social networks.

What really matters most to me, though, is what CloudShout users think are the features they need, and what I have been listening to since day one.

If you are interested, there is a CloudShout channel on Vimeo that show the different parts of CloudShout in action.

CloudShout App Idea - Visitor Consolidation

2008-12-29T14:13:00.006-05:00

CloudShout App Idea: Visitor Consolidation from Daniel Goodwin on Vimeo.

This is a just a demo of an app idea I'm working on for CloudShout. Basically, things like BlogCatalog, MyBlogLog, etc. all do the same thing, but it's all separated into different, space consuming, widgets. This app will take those shards of past visitors information and combine them into one place, the CloudShout Activity Hub.

One thing that I want to do that I forgot to mention in the video is that I would like to preserve the controls from each widget so that visitors can still do the things the widget provides, like follow the blog, or become a site member.

Oh yeah, all the user records link to the appropriate service, too.

CloudShout Demo Videos

2008-12-26T08:51:00.003-05:00

Since a lot of people do not know what CloudShout is and what it can do, Adam and I put together a few videos to help demonstrate some it's core functionality. I hope you find these videos helpful.

Installing CloudShout and using the Activity Hub:
Shows how to add CloudShout to your blog and how to use the Activity Hub.
Watch @ Vimeo | Direct Download | Length: ~12 minutes

Communicating:
Shows how to communicate with the people you encounter
Watch @ Vimeo | Direct Download | Length: ~7 minutes

What is a CloudShout App?
How to manage your apps, what the difference is between user apps and blog apps.
Watch @ Vimeo | Direct Download | Length: ~6 minutes

Application Demos:
Examples of the applications in use: FlickShout, LastFMShout, Checkers, DangFocus and more
Watch @ Vimeo | Direct Download | Length: ~7 minutes

Developing Applications:
Adam demonstrates developing a CloudShout application from scratch.
Watch @ Vimeo | Direct Download | CloudShout Developers Google Group | Length: ~40 minutes

If you find CloudShout to be a tool you would use and would like an Alpha Key to try it out, just leave a comment and I will see about getting you a key.

Have a wonderful holiday!!

CloudShout Alpha 2.2 Released

2008-12-22T12:29:00.000-05:00

Here's what this update includes:

CloudShout Customization:

You can now customize the color and skin of CloudShout on your blog to better integrate it with the look and feel of your site.

CloudShout Communication:

IZEA GroupChat has been removed as a stand-alone app and has been added as a core app of CloudShout. This means that you no longer have to install GroupChat. Everyone has it.
Added a button on the Hub that will launch the GroupChat application.
Joining a Friend - if you see someone online that is not at the current site you are on, then you can "join" them at the site they are at with one click.

Launch Buttons:

Developers may wish to create buttons for their applications that site owners can place anywhere on their site if they choose to. This acts as a quick launch method to getting to those app (the ones you think your community will benefit from the most) instead of user having to locate them in the Activity Hub.

App Search:

Searching for apps is now a little more intelligent in finding the most relevant apps.

Other bug fixes:

Fixed issue with the blog list sometimes not showing up on a user profile.
Fixed issue with blog titles in the app store.
Fixed issue with signup emails
Fixed other display issues.
Fixed issue where clicking on anything in the App Store in IE caused the user to appear to leave the page to other users on that page.

Updated Tracker

2008-12-22T11:14:00.005-05:00

I rolled out some updated tracker code last week to help speed up IZEARanks ITK. More information about those changes can be found here. But the Systems guys just sent me a screenshot that makes me all warm inside:

To the left of the first blue vertical line is the amount of load on the DB with the old tracker. The spike inbetween the two blue lines is the load on the day of deployment. The spikes, if you can see them, to the left of the blue lines are the DB load with the new Tracker in place.

So with new code, and the backend systems modified (thanks Trev and Mark), the new Tracker absolutely screams!

CloudShout Alpha 2.1 Released

2008-12-16T02:03:00.004-05:00

Today we release CloudShout Alpha 2.1. Here's what it has in store for you.

IM APP:

Clearly shows who you are chatting with
Better communication on what the person you are chatting with is doing, like: "Has gone offline", "Is Typing...", etc.
Lets you know when the other user actually is available in the chat app

Communication:

Better handling of Blocks when an app or user tries to connect to another user that has blocked them.
If you browser window/tab is out of focus and you receive invites, the title of the tab/window is prefixed with a number to indicate you have missed message (and how many you have missed)

Friends:

Delivering the friends data has been updated to better handle people that have large amounts of friends
Persists friend data so every page load does require it to be fetched again

Activity Hub:

The number representing the unknown visitors to your blog has been significantly improved to be more accurate.
Past visitors are now ordered by departure time

CloudShout.com Registration:

Better handling of form validation
Better communication to users on how to use their SocialSpark login to access CloudShout instead of having to create a new account.

CloudShout.com, Adding Blogs:

Fixed issue with strange characters in the the blog descriptions

Safari

Better support for the Safari browser

General Bug Fixes:

Sharing an app will now properly install it via the share message.
Better handling of Temp Account creation
Various visual issues fixed

Enjoy :)

When do we get longer days?

2008-12-13T00:39:00.005-05:00

I sure need them. It's been a crazy week, and even though all my tasks were accomplished, it still felt a little off, like I should have accomplished more. So, how did I spend my week?

Speeding up ITK. It's growing fast, and we need to optimize everything from the code to the hardware to keep up. And yes, unfortunately, there are a few bugs in it that need to be fixed. I made some good progress on this and hope to release some updates next week.

Custom Sponsorships. There's no denying it, the Kmart Campaign was awesome awesome awesome. And now we have a Sears one coming up. Issue is, the custom sponsorships were kind of jury rigged to work, and now we need a smarter, permanent solution.

CloudShout. Next week we will be rolling out CloudShout Alpha 2.1 and, simply put, the new IM Application alone is worth the release. It's SO much easier now to know what's going on with the person on the other end... you're not left in a limbo wondering if they are still there. Adam did a great job on perfecting that app. On top of that, we have lots more goodies, in which we'll announce next week.

CloudShout Apps. I have the LinkShout application ready for QA, so hopefully that will be out next week. I'm also hard at work on an application that I've code named KFC - and no, it has nothing to do with chicken.

So, who is it I need to see about adding more hours to the day?

CloudShout Alpha 2 Released

2008-12-02T19:48:00.006-05:00

I was hesitant to post this when we first released because we sent out a ton of invite codes and I wanted to make sure the system held up under the new load. Apparently, the servers survived the update (yay!) and now I'm glad to announce that we rolled out CloudShout Alpha 2.

What is CloudShout

CloudShout is a revolutionary add-on to your blog that builds a social network around you and your content. Making friends and communicating in real time with your readers is now built right into your blog! On top of that, CloudShout's functionality can be expanded... People can develop applications using the CloudShout framework, that with one click you can install on your blog. These applications can range from communication tools to games. For instance, the FlickrShout application will show a collage of photos from all current visitors to your site. You can also install applications to your user account. This is cool because you now carry around these applications to other CloudShout powered sites. Say a site doesn't have the chat application installed, but you and other visitors do. Well then you can still chat with those people right on the blog that doesn't support it. Very, very cool!

What's in this release?

There has been a ton of work to make CloudShout faster, smarter, easier to use, and more stable. Some of the new features that stand out are:

General:

Added online indicator icon to user's avatars. Now you can see if people are online or not. Remember, even if they are at a different site than you, you can still use CloudShout to interact with them!
You need an alpha key to get into the system (during the alpha test), so now all users have their own set up 5 alpha codes they can share with friends.
Added ability to import your blogs from SocialSpark into CloudShout so you do not have to enter them again.
Made the registration process from a blog even simpler.

Activity Hub Changes:

Tightened up the look and feel of the Activity Hub
Made it easier to initiate communication with other users from the Hub
Users can now logout of CloudShout (at blogs)

Communications:

Users can now block other users or applications
You do not have to be friends with someone in order to IM or message them.

User Profiles:

Revamped the user profile to show more information about a user, such as:

The users blogs
The users friends
The users Tweets (if they've provided their Twitter username)
The users Flickr photos (if they've provided their Flickr username)

Blog Chat Application (GroupChat):

You can now get a transcript of the chat as far back as when you joined the blog's chat room.

App Store:

The App Store/App Manager application has been reworked to make finding and managing apps easier.
Provides more information about applications such as: Descriptions, Ratings, Comments, etc.

Developing Apps:

We now provide a better online editor for editing CloudShout Applications.
New App review system. When an Application is published, it will go into a review process before being available to CloudShout users.
Added a CSS Reset to application containers to resolve the issue of a blogs CSS creeping into your application.
Added the jQuery Javascript library, so developing applications is even easier.

Need Help?

You can find general CloudShout help in our forums. This forum is intended for people to get help on such things as installing CloudShout, or help using various CloudShout applications. If you are developing applications and need help, I suggest visiting our Google Group on developing CloudShout apps.

Thanks

And finally, I want to thanks all our Alpha 1 users for all the great feedback they have provided.

Ted Talks About CloudShout

2008-12-01T08:54:00.004-05:00

Here's an interview Ted did with Anna Farmery. It's in episode 205 of her podcast, "The Engaging Brand". Around the 16:45 mark they begin to talk about CloudShout.

Using CloudShout to build a SocialBrowse-like Service (Part 3)

2008-10-14T18:35:00.013-04:00

Welcome back for part 3 of a series of posts on how to build a SocialBrowse like service with CloudShout. You can find previous posts in this series here (Part 1) and here (Part 2).

When we last left off we had accomplished the following tasks:

Set up our test environment
Created a new app at CloudShout
Set up the basis of our JS code
Coded the methods to attach small icons by all text links on page
Coded the methods to open the link sharing dialog

And we last left off with 2 hours and 15 minutes invested into the project.

My goals for this post have changed a bit since the end of part 2. The goals I set out when i began coding for this session where:

Create sidebar widget
Have links share to all my friends
Build a commenting system
Icons by the links in pages should changed based on who shared them

Create the Sidebar Widget

In the previous post, we attached icons to all links on the page. Clicking these icons would open a dialog window that allowed the user to title the link and give it a description. Submitting this form would simply alert the data, so now we need to actually send it to our friends, and have a way for it to display to them.

We want our sidebar widget to draw as soon as possible. This is very different from the share pop-up dialog, which appears when you click on the share icon. Thus, we want to create the widget when our application is initialized. Our init function is where such instructions should go, and the call to create a sidebar widget is quiet simple:


    this.init = function(){
        this.create_sidebar()
        this.convert_all_links()
    }

That we added here is a call to create the visuals of the sidebar widget, defined in "create_sidebar":


    this.create_sidebar = function(){
        itkp.new_widget(this.info.id, "LinkShout", 200, 300)
        itku.create(this.elms.links)
    }

The first thing we do here is call the ITK palette object to create a new widget, passing it an id, text for the title bar, and a width/height. Secondly, we need to create the div that all records will draw in. itku.create is a function we ran into in Part 2. However, in part 2 we passed our JSON in as the parameter. We are doing that here too, but for cleanliness, we stored the JSON data in the this.elms object and reference it here through this.elms.links


    this.elms = {
        links: {
            elm:        "div",
            parent_elm: this.info.id + "_content",
            content:    { type: "html", value: "" },
            atts:       { id: this.info.id + "_links", className: "itkp_rc" },
            styles:     { position: "absolute", overflow: "hidden", top: "5px", left: "5px", width: "156px", height: "205px", backgroundColor: "#fff", fontSize: "10px", fontFamily: "verdana", color: "#666" }
        }
    }

this.elms is my JSON DOM elements repository that I'll keep my element information stored in. Notice the atts property of "links". It has an id attribute, which is set to this.info.id + "_links", and will serve as our way of calling this div in the future to insert shared links into it. You should append all your ID's with the id of your app so that it will not conflict with other apps or existing page elements.

Let's see if our sidebar widget worked:

Sharing

Now, our old share_link function simple grabbed our input from the share form and alerted it. Let's see what's changed:


    this.share_link = function(){
        var say    = escape(itku.id(this.info.id + "_" + this.link_id + "_say_input").value)
        var title  = escape(itku.id(this.info.id + "_" + this.link_id + "_title_input").value)
        var id     = this.permalink(this.link_url)
        var link   = itk3.user.id + "***" + this.link_url + "***" + title + "***" + say + "***" + id
        var msg    = this.info.id + ".incoming_link^^^" + link
        this.close(this.info.id + "_" + this.link_id)
        this.incoming_link(link)
        for(var i in itk3.user.friends){
            itkc.message("app", "visitor_"+i+"_apps", "visitor_"+i+"_apps", "user_message", msg)
        }
    }

After we set some variables, which all should be self explanatory (remember: itku.id() is just a short cut for document.getElementById()). The first line we come to after all that is this.close(). This calls our close function where we can do any cleanup we need to do, then close the share link pop-up dialog. Then we have incoming_link(). This is what will populate the newly shared link in OUR sidebar. We'll look at that function later. But note, I'm only putting it in there for myself, the following for loop is where we send it to our friends. Since I'm not my own friend (sad, i know), I'll never get the message of a new link. Thus, that is why we call that function directly.

Now, the for loop will loop through each of our friends, firing a message to them. Look back up where the msg variable is being set. If you look before the "^^^", you'll notice that it's building a callback to this.incoming_link, where "this" is actually the app name because the framework will recieve the incoming message and will need to know where to direct it.

itkc.message is a way to communicate with CloudShout. We can see from the parameters that we are sending an "application" message, to be handled with the "visitor_YOURID_apps" application, child instance "visitor_YOURID_apps" (these are the same because the app we are sending to only has one instance, some apps have more than one). Within that app and instance, we are pointing to the "user_message" function, and it's parameter will be "msg".

Don't worry, this is all documented here. :)

So, when this fires off, all of my friends that are currently connected, will get a message to their "visitor" app, specifically to the user_message function. This function will parse in the data and create a call out to their LinkShout app. In turn, on their end, they will see the link appear in the sidebar area as I did. Pretty cool, huh?

Let's see it in action:

The user "dang" shared a link. Upon clicking the share button, the dialog closed, and the links where sent out to all friends. The received links then show up in the sidebar widget.

Also, the icons by the links changed. It changed on three links because they all link to the same place. On "dang's" side, the icon turned into an asterix, to denote that "I" shared the link. On "dascgo's" side, the icon changed to a red circle with an exclamation point, indicating that a friend of mine shared a link that I can currently see. And yeah, I know, they make no sense visually, but I'm not in design mode right now... the png's can be swapped out later.

Let's talk about how we got the link to appear in the sidebar and how we changed the icons.

Handling a Shared Link

We know that the function that handles this is called "incoming_link". Here's what id does:


    this.incoming_link = function(msg){
        var msg             = msg.split("***")
        var friend          = (msg[0] != itk3.user.id) ? msg[0] : itk3.user.id
        var url             = unescape(msg[1])
        var title           = unescape(msg[2])
        var comment         = unescape(msg[3])
        var id              = msg[4]
        var comment_count   = 0
        var links_count     = 1
        var shared_at       = dateFormat(Date(), "m/d/yy@h:MMtt")
        if(itku.id(this.info.id + "_link_count_for_" + id)){
            this.increment_links(id)
        }else{
            this.create_link_record(friend, id, url, title, comment, comment_count, links_count, shared_at)
        }
        var who = (friend == itk3.user.id) ? "me" : "you"
        this.change_link_to(who, url)
    }

The first this is we take the string parameter and split it up. Right now, CloudShout messages are all strings. You will need to set a delimiter in your strings that you can parse on. In the future, we will move further towards using JSON to pass around messages.

This string is split and we assign our variables, then we hit an if statement. What we are looking for is if that link is already shared in the sidebar. If so, we don't want to list it again. Instead, there is a number by the link ( "[1]" in the images above) that should increment. Otherwise, we need to create the record in that div with create_link_record().

Finally, after we do that, we change the icons by the links with "change_link_to()" and pass it "me" or "you" depending on if I shared it or one of my friends did.

I'll show you the "create_link_record", but I don't think it warrants discussion. It simply builds a string of HTML that we will use innerHTML to set. Following, we will look at the "change_link_to()" function:


    this.create_link_record = function(friend, id, url, title, comment, comment_count, links_count, shared_at){
        var div = itku.id(this.info.id + "_links")
        var a = ""
            a += "<table cellpadding='4' cellspacing='0' border='0' width='100%' onmouseover='this.style.backgroundColor=\"#e9f6fb\"'  onmouseout='this.style.backgroundColor=\"#fff\"'>"
            a += "  <tr>"
            a += "    <td width='24' valign='top'><img src='" + this.user_icon(friend) + "' width='24' height='24'></td>"
            a += "    <td style='font-family:verdana;font-size:10px;color:#666'>"
            a += "      [<span id='" + this.info.id + "_link_count_for_" + id + "'>" + links_count + "</span>] "
            a += "      <a name='" + this.info.id + "_link' href='" + url + "'>" + title + "</a><br/>"
            a += "      <span style='color:#666;font-size:9px;'>" + shared_at + "</span><br/>"
            a += "      " + comment + "<br/>"
            a += "      <span onclick='" + this.info.id + ".show_comments(\""+this.user_icon(friend)+"\", \""+id+"\", \""+url+"\", \""+title+"\", \""+comment+"\", \""+shared_at+"\")' style='color:blue;text-decoration:underline;cursor:pointer'>Comments</span> "
            a += "      (<span id='" + this.info.id + "_comment_count_for_" + id + "'>" + comment_count + "</span>) "
            a += "    </td>"
            a += "  </tr>"
            a += "</table>"
            a += "<div style='border-bottom:1px solid #ccc;'></div>"
        div.innerHTML = a + div.innerHTML
    }

Changing the Icons by Links


    this.change_link_to = function(which, url){
        var links = document.getElementsByTagName("a")
        var link_count = -1
        for(var i = 0; i < links.length; i++){
            var link = links[i]
            var name = link.getAttribute("name")
            var href = link.getAttribute("href")
            if(!name || name != (this.info.id + "_link")){
                link_count++
                if( url == href ) itku.id(this.info.id + "_link_" + link_count).src = this.img(which)
            }            
        }
    }

The above function will change the share icons by all matching links. Simply put, we cycle through all the links on the page. If we find a link that matches the url shared, we change the icon. I had a serious WTF issue here... it would always change 1 more link than it should when shared. Meaning if there was one link on the page, it's icon would change, and so would the first link immediately following the sidebar widget in the DOM. I was just about to call it quits for the night when I realized it was now seeing the url IN the sidebar widget and trying to change the icon to it, which due to the array, was the icon by the link immediately following the sidebar. Ugh. That one took awhile and a LOT of console.logs to spot. Discovering that, I decided to add a name attribute to all anchor tags the sidebar creates so we can ignore those.

Also, in this function is a call to an image helper function img(). LinkShout currently only needs three images: The share icon, the shared by you icon, and the shared by me icon. So this is a helper function to swap between the three states.

Comments

All link records will have a comment link with a numeric indicator of the number of current comments. This link should open the Comments dialog for that link. Basically... a chat focused on the shared link.

When you click that link, this function is fired:


    this.show_comments = function(icon, id, url, title, comment, shared_at){
        itkp.new_float(this.info.id, this.info.id + "_" + id + "_comments", "LinkShout Comments", 350, 400, itkp.center_vertically(400), itkp.center_horizontally(350))
        itku.create(this.elms.comments_header)
        itku.create(this.elms.comments_holder)
        itku.create(this.elms.comments_input)
        itku.create(this.elms.comments_button)
        itku.id(this.info.id + "_" + id + "_comments_header").innerHTML = this.create_comment_header(icon, url, title, comment, shared_at)
    }

We create a new floating dialog window, create it's various divs for layout, and set the content of the header div. "create_comment_header()" is a HTML builder function:


    this.create_comment_header = function(icon, url, title, comment, shared_at){
        var a = ""
            a += "<table>"
            a += "  <tr>"
            a += "    <td valign='top'><img src='" + icon + "' width='50' height='50'></td>"
            a += "    <td valign='top' style='font-size:11px;'>"
            a += "      <span style='font-size:9px;'>" + shared_at + "</span></br>"
            a += "      <a name='" + this.info.id + "_link' href='" + url + "'><b>" + title + "</b></a></br>"
            a += "    </td>"
            a += "  </tr>"
            a += "</table>"
        return a
    }

So now we have a comment interface:
But, how does it work? Very, very similar to the way sharing a link works, actually! If I click on the "say" button, the following function is called:


    this.send_comment = function(id){
        var input   = itku.id(this.info.id + "_" + id + "_comment_input")
        var comment = itk3.user.id + "***" + id + "***" + escape(input.value) + "***" + dateFormat(new Date(), "m/d/yy@h:MMtt")
        var msg     = this.info.id + ".incoming_comment^^^" + comment
        input.value = ""
        this.incoming_comment(comment)
        for(var i in itk3.user.friends){
            itkc.message("app", "visitor_"+String(i)+"_apps", "visitor_"+String(i)+"_apps", "user_message", msg)
        }
    }

We set our values, clear out the input area, display it to ourselves, and then loop through our friends and send it out to them.

Handling Incoming Comments

The handler function for this call is:


    this.incoming_comment = function(msg){
        msg = msg.split("***")
        var friend = (msg[0] != itk3.user.id) ? msg[0] : itk3.user.id
        var id = msg[1]
        var comment = msg[2]
        var when = msg[3]
        $("#" + this.info.id + "_" + id + "_comments_for").append(this.format_comment(friend, comment, when))
        this.increment_comments(id)
        this.scroll_comment_area()
    }

We split our message string and set some variables. Then we append the HTML content generated in the next function, "format_comment()", into our main comments div. Finally, we want to call two helper functions to increment the number of comments in the sidebar widget, and, if the comments dialog for that link is open, scroll the div to the newest comment. The HTML builder function is as follows:


    this.format_comment = function(friend, comment, when){
        var a = ""
            a += "<table cellpadding='4' cellspacing='0' width='100%' style='font-family:verdana;font-size:10px;color:#666'>"
            a += "  <tr>"
            a += "    <td style='padding: 7px 4px 7px 4px; border-bottom:1px solid #ccc' width='24' align='right' valign='top'><img src='" + this.user_icon(friend) + "' width='30' height='30'></td>"
            a += "    <td style='padding: 7px 4px 7px 4px; border-bottom:1px solid #ccc;font-size:12px;'><span style='color:#999;font-size:10px;'>" + unescape(when) + "</span><br/>" + unescape(comment) + "</td>"
            a += "  </tr>"
            a += "</table>"
        return a
    }

Let's see if that worked:

Helpers

I've created a bunch of little helper functions for this app. Let's briefly look over them here:


    this.permalink = function(url){
        return url.replace(/[^a-zA-Z 0-9]+/g,'_')
    }
 
    this.img = function(which){
        return this.gfx + which + "_share_icon.png"
    }
 
    this.user_icon = function(friend){
        icon = (friend != itk3.user.id) ? itk3.user.friends[friend].icon : itk3.user.icon
        return itku.icon(icon)
    }
 
    this.increment_links = function(id){
        var count = parseInt(itku.id(this.info.id + "_link_count_for_" + id).innerHTML)
        count++
        itku.id(this.info.id + "_link_count_for_" + id).innerHTML = count
    }
 
    this.increment_comments = function(id){
        var count = parseInt(itku.id(this.info.id + "_comment_count_for_" + id).innerHTML)
        count++
        itku.id(this.info.id + "_comment_count_for_" + id).innerHTML = count
    }
 
    this.scroll_comment_area = function(){
        div = itku.id(this.info.id + "_" + id + "_comments_for")
        div.scrollTop = div.scrollHeight
    }

I also created a this.gfx variable for my app which points to the path for my images:


    this.gfx = "http://localhost/linkshout/" //itk3.paths.apps + "gfx/apps/izea/linkshout/"

It's local for now, but will swap it out when I publish my app.

Wrap Up for Part 3

It's hard to see how cool this is from just screenshots. At the end of this project, I'll screencast a demo for everyone.

So, let's see where we are so far. We now have the ability to:

Share a link with friends
Display these links to our friends
Chat about the links in real time
Have visual que's as to who's shared a link (the icons by the links)

Not bad, and development time for the above is 4 hours. I'd say a good solid hour of that was me pulling out my hair with that "change_link_to()" function, but that's how it goes sometimes.

Here's our hours so far:

00.75 hrs - Project planning
00.25 hrs - Test environment setup
01:25 hrs - Day one programming
04:00 hrs - Day two programming
-------------------------------
06:25 hrs - Total time

So what do I hope to accomplish next? I'm not sure, it depends on what solutions come to me while I'm not working on this. But here are some of the remaining issues that need to be addressed:

on the initial share description, add a counter to the number of characters left that the user can input, and limit them to 140 characters
same on the comments
share link branding
when two or more people share the same link, but with different titles, we need to handle that in the sidebar. have a count that shows how many people shared the same link and that will link to a screen that shows all the titles and descriptions for that link.
save data to a database
initial pull in of data form database
scrolling on the link sharing sidebar widget

Not too much more work. Saving the data is probably the biggest issue in there.

I hope to see you next post!

Cool tweet about CloudShout

2008-10-09T15:49:00.003-04:00

Just saw this tweet from Michael Brito about CloudShout. Makes me feel good! :)

CloudShout does add social functionality to any site it's installed on, but not only that... It provides gui, communication, and other tools to allow developers to create applications (widgets) that expand your site either with new functionality, or extended functionality from other web apps such as Flickr, YouTube, Digg, or anything with an API really.

It's going to be awesome to see what people do with CloudShout once it's released!

By the way. Ted and I are going to give a demo of the latest version of CloudShout at BarCamp Tampa this Saturday (Oct. 11). Hope to see you there!

Using CloudShout to build a SocialBrowse-like Service - Initial Setup (Part 2)

2008-09-30T09:04:00.009-04:00

This is the second post in the series that demonstrates using CloudShout to develop an application that has some of the functionality of SocialBrowse. I've decided to call this project LinkShout, to mirror our other CloudShout apps TweetShout and FlickShout.

The first thing I did was some initial planning via paper and pencil. Sorted out details for database schemas and how the product should look. Around 45 minutes worth of time. Everything is simple, so no hard work there. Plus, SocialBrowse already laid out the functionality of the app, and thus biscuits from a can are a lot easier to make than from scratch, if you know what I mean. :)

So once that was done, I decided I'd try to accomplish the following two tasks:

all links on a page are appended with the "linkshout" share button
clicking that will open the share dialog

Set up a Test Environment

The first thing I need to do is set up a test blog. Here's a simple page I threw up on my localhost. Nothing fancy, the image link is even broken. D'oh.

Now, I just add my app testing link to the page:


<script src="http://cloudshout.com/test/200/300/list/unknown/none/none"></script>

And now we have a test environment:

Create a new app at CloudShout

Now, back to our app. We need to do our initial setup at CloudShout. CloudShout stores all app information in it's databases, only creating JS files at publish time. This is why we need to set up the test environment, it knows how to convert the apps from database text to JS objects. But an important step in that is our initial parameters for the application, which you specify when you first set up the application. Here are my initial params for LinkShout.

There are some not so obvious options above, the CloudShout Documentation should clear those up for you, for now I only want to point out "When to run".

"When to run" is exactly that... when your app should activate. Your options are "Immediately", "After Load" and "When Called". Immediately will fire the app off as soon as the DOM is ready. After Load will wait for all external elements to load. When Called fires off the app when it is clicked on in the Hub.

Immediately is my selection, as I want to add "share" buttons to all links ASAP.

Programming the Application - Initial Setup

Now I use the ITK TextMate bundle to checkout and work on the app in a real editor (you can edit the app online if you'd like). The first thing we take care of is some initial details for our app. Here I initialize 3 variables that will hold information about the link. Then we call a function "convert_all_links" when our app is fired (defined in the "When to run" setting). Finally, we make sure the popup window is closable.


// VARS
this.link_url, this.link_title, this.link_id = ""

// BASIC FUNCTIONS
this.init = function(){
   this.convert_all_links()
}

this.close = function(window_id){
   itkp.close_float(window_id)
}

Programming the Application - What does it do initially?

Now let's define our "convert_all_links" function. Basically, it should:

Find all links in the DOM

If it's a text link (I don't want to add the share icon by images)
- Add a share icon after the link that knows:
  - The url
  - The title of the anchor tag if it has one, otherwise the inner HTML of the anchor tag
  - And when clicked, opens the share window

So here it is coded:


// INITIALIZATION FUNCTIONS
this.convert_all_links = function(){
  // get all links
  var links = document.getElementsByTagName("a")
  // loop through them
  for(var i = 0; i < links.length; i++){
     // get our url and title
     var url = links[i].href
     var title = (links[i].getAttribute("title")) ? links[i].getAttribute("title") : links[i].innerHTML
     // create a <sup> tag
     var sup = document.createElement("sup")
     // set it's innerHTML to the share icon (defined in the following function)
     sup.innerHTML   = this.share_icon(i, url, title)
     // insert it into the DOM AFTER the link
     links[i].parentNode.insertBefore(sup, links[i].nextSibling)
  }
}

this.share_icon = function( id, url, title ){
  // create the html for the image tag, including styles and an onclick event and return it
  var a = ""
      a += "<img "
      a += "  onclick='" + this.info.id + ".open_share_window(" + id + ", \"" + escape(url) + "\", \"" + escape(title) + "\")' "
      a += "  style='cursor:pointer;width:10px;height:10px' "
      a += "  src='http://localhost/linkshout/share_icon.png'"
      a += ">"
   return a
}

Back to our test page really quick. I need to pull in the app I am testing, so the link that we added that loads in CloudShout needs to be modified:


  <script src="http://cloudshout.com/test/200/300/list/unknown/none/none"></script>

Needs to become:


  <script src="http://cloudshout.com/test/200/300/list/unknown/APP_ID/none"></script>

Where app id is the applications identification (you can find this on any of your application development screens at CloudShout).

Ok, now our app should, as soon as the DOM is ready, search for all links and attach the share icon. Let's see if that worked:

Programming the Application - Handling Requests to Share a Link

Now, when that icon is clicked, we need to open a share dialog so the user can change the title of the link if they wish and give it a description (really, it's first comment).


// SHARE WINDOW FUNCTIONS
this.open_share_window = function(id, url, title){
  // anytime a share link is clicked, set our vars to information about it.
  this.link_url   = url
  this.link_title = title
  this.link_id    = id
  // open the new float (yeah, this is all handled for you. easy huh? :)
  itkp.new_float(this.info.id, this.info.id + "_" + id, "LinkShout", 350, 400, itkp.center_vertically(400), itkp.center_horizontally(350))
  // and let's create our html for inside of our popup:
  this.create_shout_elements()
}

Now, the next function is a little scary. It's long, but it's not complicated. All we are doing is calling an ITK helper function that creates DOM elements. We are passing it elements defined in a JSON format. We just need to do it a few times. You could build all your html in a variable (like we did with the icon image above) and set with an innerHTML, but this is another way of doing it.


this.create_shout_elements = function( id, url, title ){
   var id = this.link_id
   // create the "url" text
   itku.create({
     elm: "div",
     parent_elm: this.info.id + "_" + id + "_content",
     content: { type: "html", value: "URL:" },
     atts: { id: this.info.id + "_" + id + "_url" },
     styles: { position: "absolute", top: "105px", left: "3px", width: "50px", height: "34px", textAlign: "right" }
   })
   // create the "url" input field... disabled
   itku.create({
     elm: "div",
     parent_elm: this.info.id + "_" + id + "_content",
     content: { type: "html", value: "<input type='text' value='" + unescape(this.link_url) + "' style='margin:-5px;padding:10px;width:250px;' disabled>" },
     atts: { id: this.info.id + "_" + id + "_url_input", className: "itkp_rc" },
     styles: { position: "absolute", overflow: "hidden", top: "95px", left: "60px", width: "240px", height: "28px", padding: "-2px", backgroundColor: "#ffffff" }
   })

   // edited - create the other elements too, which is similar to the above.

   // create the "share" button
   itku.create({
     elm: "div",
     parent_elm: this.info.id + "_" + id + "_content",
     content: { type: "html", value: itkp.button("Share", true, this.info.id + ".share_link()", 90) },
     atts: { id: this.info.id + "_" + id + "_button" },
     styles: { position: "absolute", overflow: "hidden", top: "295px", left: "60px", width: "91px", height: "27px" }
   })
}

The last create call is what builds the button on screen. Notice the value of the content property is a call to the ITK button helper. When that button is clicked, it calls the function "share_link()". Let's look at that:


this.share_link = function(){
   // grab their comment, we know everything else.
   say = escape(itku.id(this.info.id + "_" + this.link_id + "_say_input").value)
   // For now, let's just alert the values
   alert("sharing: " + unescape(this.link_url) + "\ntitle: " + unescape(this.link_title) + "\nsay: " + unescape(say))
}

Ok, so here I'm just alerting the value I'm going to pass around to make sure it works. Let's see:

I clicked on the link to Apple
The dialog opened with the link's information. (There's a little extra room at the top of the share dialog. I'll use this area for branding later)
I clicked the share button
Alert triggers

Programming the Application - Wrap Up for Part 2

Pretty good. And my development time so far is 1.5 hours. Combined with my initial planning, I'm at 2.25 hours.

This looks like a good stopping point for now, so let's recap what we've done:

Did some initial Project planning (45 minutes)

Created our app at CloudShout.com

Created our Test Environment (10 minutes)

Program functionality to: (1 hour 20 minutes)
- Add share buttons to all links
- Open a dialog with information about the link in preparation to share

What I'm planning to accomplish in the next segment is mostly communication. This will be exciting because we will see how easy it is to have apps, or people, or a combination of both, talking back and forth. My goals are to:

Create the sidebar widget that actually lists all the shared links

When I share a link, it should:
- Save to a DB
- Send to all people in my friends list
- Display in their sidebar widget

Coming along good I think. Questions?

Using CloudShout to build a SocialBrowse-like Service - Introduction (Part 1)

2008-09-28T10:55:00.003-04:00

SocialBrowse is an interesting new service covered here and here among other places.

What SocialBrowse does, from what I understand, is allow you to share links (with comments), in real time, with your friends, via a browser plugin. So as a friend of yours shares a link you see it immediately in your browser.

This is a cool idea, but what I'm really interested in is the infrastructure behind what they are doing. I'm pretty sure that the basics of it boil down to something like:

Sign into your browser extension
it grabs your friends
it grabs any links you or your friends have posted
formats those links in the SocialBrowse interface

Then, while you are online with other friends:

If I share a link, it calls home to save that link
It looks up my friends and associates them to that link
The extension (on my friends side) pulls new link information every so often
it displays the new link information to them.

The service has apparently been in private beta for about 3 months, but now is in public beta. I can't imagine it's due to the ability to share links. I'm guessing they are slowly letting people in to monitor/adjust server requirements needed to scale a service that needs to constantly look for updates.

The reason I'm interested in this is because of all the time and money dedicated to making sure you have the hardware to handle that. What if you didn't have to worry about that? What if a product like SocialBrowse could be build in about a day?

This is what CloudShout allows. CloudShout is a Javascript framework, but not in the sense that you might be used to. It's not Prototype, jQuery, MooTools, etc. It's a widget (application) building framework that allows easy communications between two or more people or applications (or both).

To build a similar SocialBrowse app in CloudShout, the only thing you would need is someplace to save the link data. Not a problem, Google App Engine could do that.

Over the next few days, I'll recreate the basic functionality of this service, documenting it along the way here at this blog. My hopes are that this will illustrate that a useful, creative application like SocialBrowse can be built using CloudShout with very little effort and money.

CloudShout v.616 released

2008-09-26T16:01:00.003-04:00

Full information can be found here.

But what I'd really like to share is the Google CloudShout Group. If you are interested in developing applications for CloudShout, please roll by this group. If you don't have an alpha key, I'll see what I can do... just drop a comment to let me know.

Adding CloudShout to Blogger

2008-09-16T09:56:00.006-04:00

Need help adding CloudShout to your Blogger Blog? Maybe this will help!

Get the Code:

Log into Cloudshout
Click on the "EDIT" icon next to your blog (If you have not added your blog yet, you can do so now)
Click on the "ITK Code" tab
Copy the two snippets of code in steps one and two on that page.

Edit the layout of the blog:

Login into your Blogger Admin page and click on the layout tab for the blog you are adding CloudShout to.
At the very bottom of the layout editor (pictured below) click "Add a Gadget". This will open a window with the different types of gadgets you can add. Look for the "HTML/Javascript" gadget and click the plus icon by it.
This will change the popup window to an area to paste text. Paste in the code you copied from Step 2
Click "Save"

Now we decide where to put the Activity Hub:

I've decided to add my hub to the side bar.
On the same Layout screen above, click on the "Add a Gadget" link in the side bar.
This will open a window with the different types of gadgets to add. Look for the "HTML/Javascript" gadget and click the plus icon by it.
This will change the popup window to an area to paste text. Paste in the code you copied from Step 3
Click "Save"

That's it. Just click on the "Save" layout button to make your changes active.

If you have any questions about this process, please let me know! :)

Adding CloudShout to WordPress

2008-08-19T11:08:00.012-04:00

Need help adding CloudShout to Wordpress? Hopefully this will help. Please keep in mind that you must be able to edit the HTML of your WordPress install

Get the Code:

Log into Cloudshout
Click on the "EDIT" icon next to your blog (If you have not added your blog yet, you can do so now)
Click on the "ITK Code" tab
Copy the two snippets of code in steps one and two on that page.

Add Code to your blog:

Open your favorite text editor
Now decide where you want to add the Activity Hub Widget. For me, I have mine in the side bar.
Once decided, open the appropriate files (For me, that will be header and sidebar, see image below). Make sure you open the files in the theme you currently have active.

Add the JS Link:

I've decided to add the JS script link to my themes header, so in header.php, look for the code: </head>. This is the closing of the documents head area.
Now, just place the line of code from Step 2 right before that:

...other code...
<script type="text/javascript" src='http://cloudshout.com/itk/YOUR_NUMBER_HERE'></script> </head>
...other code...

ok, save and close.

Add the widget div:

I've decided to add the widget to my sidebar, so in sidebar.php, look for: <div id="sidebar">
Now, right after that, paste the code from step three

<div id="sidebar"> <div id='itk_widgets'></div>
...other code...

Save and close that
Later you may want to move where the widget appears in regards to other sidebar items. Just remember this is the spot to do that.

Mozilla Labs: Aurora Concept

2008-08-05T13:31:00.004-04:00

This is pretty cool:

Aurora (Part 1) from Adaptive Path on Vimeo.

However, all of this is possible today. I'm doing some of it right now.

Falcon 1 - Flight 3

2008-08-02T22:44:00.007-04:00

Sitting here watching the Falcon 1 launch:

"The third flight will also be from Omelek. It was to have carried TacSat-1 for the Naval Research Laboratory (NRL), but NRL canceled the launch of the satellite after the success of the already-launched TacSat-2. This will be the first "operational" flight of Falcon 1. This mission was originally scheduled for 2005, from Vandenberg AFB, but delays due to the Titan IV launch, and problems with the rocket pushed it into mid-2006. It was then delayed further, as the failure of the maiden flight necessitated a second test mission. It is currently scheduled for the second quarter of 2008. This flight is also scheduled to carry a space burial payload including cremated remains of James Doohan, Gordon Cooper, and others."

and run into this:

Luckily, it's back up now with T-11 to go.

Update@11:45 EST

It looked like it launched successfully, but the webcast seemed to end abruptly and they reported an anomaly on the rocket. Hmmm.

Update@11:52 EST

"The second stage most likely did not reach orbit, and has probably already crashed on the ground."

Didn't make it :(.

Butterflies

2008-05-20T13:50:00.000-04:00

About to give a presentation to the board on the future of ITK... getting very nervous!!! :)

Blogs Stats - Public or Private?

2008-05-12T08:45:00.000-04:00

I just stepped through the first 5 pages of blogs listed on SocialSpark... just browsing, and I noticed that out of the 50 blogs listed, only 7 of them allow for their stats to be shown (Visits, Views, Etc.). As the main developer of ITK (and part of it's job is to collect this data), and having developed the demographics pages in SocialSpark, I was kind of let down to see soooooo many people with their stats set to private.

Perhaps it's because the formula for calculating RealRank is open, or perhaps because Google's formula is hidden (and they hand out spankings), I guess I thought more people would be open to share their information.

But who am I to say, I only get a visitor here and there from time to time. :)

I thought I'd share with you the bloggers on the first 5 pages that do have their stats available for all. Thanks you guys!

lifeOmaniac
written by Archit
"...obsessed by life. Blog about Current Affairs, Internet & Technology and my life's chronicle."

My Thoughts, Ideas, and Ramblings
written by blm03
"A day in the life of a work at home mom . . ."

Julie's Journal
written by Jules
"I write about the daily happenings of a mom with two teenage boys living in Vegas."

Traveling Thoughts
written by Courtney
"Anything that passes my brain and causes me to take a mental trip"

The BenSpark
written by BenSpark
"Daily Photos, Entertainment, Traveling and My Life."

Lisa Reviews
written by blm03
"Reviews on the things you want to know about!"

My Road Less Traveled By
written by blm03
"What you should go see and do"

There's no way I could go through the entire list of blogs, so I know there are more of you out there... so thanks to everyone that keeps it open! :)

Fun with SocialSpark Avatars

2008-04-16T21:55:00.001-04:00

Before we begin: Please keep in mind that you can not do this as of yet (April 16, 2008). My changes to the cropping tool are being tested internally before we release to the world. But once it's live, you'll be ready to have some fun!

The other day I was working on some updates to the image cropping tool we have in SocialSpark to allow members to create their Avatars. The cropping tool has some excellent new features such as zooming in/out, and scrolling the image around. All things to help you create the perfect Avatar for yourself. As I was polishing up the code, Ted walks by and says... "You know what would be cool, if I could have one image for the square set and a different image for the wide set".

Yeah, that would be cool, but the sound of more work with all the other outstanding issues I have piling up for launch made me a little nervous.

But you know what? With the ability to scroll the image, you CAN have a different image for square and wide avatars, EASILY... I'll show you how.

The first thing we need to do is take the two images we want to use and make one image out of them. So I opened each picture I wanted to use and lined them up side by side and... ready for the hard part? Just take a screen shot, no biggie! :)

Now that I have my master image, let's change our Avatar. Just go to manage your account, click on the profile button, then go to the Avatar tab.

Upload your new image and here comes the sexy new cropper! See the zoom in/out icons above the image? Click those a few times... see the scroll bars, yeah, slide them around some! Pretty cool, huh? Have an idea where I'm going with this? :)

Now scale, scroll, and line up your square avatar and click the "crop square" button.

Now just scroll over to the other image and do the same.

Awesome, yes?

It would be great in the future to give our members all kinds of neat tools to customize their Avatars, but until then, here's one way to have fun!

Ok, time to go throw the frisbee with Phoenix :)

Skitch

2008-03-22T11:18:00.000-04:00

So what does it take to get things done around the dev department at IZEA? Lots of coffee is definitely on the top of the list, but I'd like to share some of the other tools we use to make our life easier.

One tool that really helps out is Skitch from plasq. Skitch is an annotation tool for your computer, and it Rocks! You can select an area of your screen to crop out, then circle things, type in text, add arrows... etc. The you simply drag to email, im's, etc to send to the team. Here's an example:

That took about 2 whole seconds to do. Very helpful!!

The gang has been using Skitch for a while now, I've only just started using it, so I'm getting use to all the features. Like sharing, webcam support, setting colors, posting to the web...

I recommend you give it a try and see how it affects your productivity.

Big Things

2008-03-20T16:03:00.000-04:00

Big things are about to happen... I'm getting ready for them. Are you?!?

test

2007-03-24T21:34:00.000-04:00

this is a test