the blog
 
Monday, June 29, 2009

Raphael Plugin: Animation Easing

Raphael is a wonderful Javascript library, used for creating vector graphics, and interacting with SVG/VML elements through Javascript. Raphael allows the developer to interact with these elements through a number of complex animations. 

Until now, the only speed for an animation was a linear movement from one state to another. This plugin extends the animation of Raphael to allow for easing animations. Derived from jQuery Easing Plugin (version 1.3): http://gsgd.co.uk/sandbox/jquery/easing/.

NOTE: As of June 2009, this plugin requires a forked version of RaphaelJS. You can download it here: https://github.com/conesus/raphael/tree. Hopefully, these forked changes will be merged with the master Raphael JS code.

Demo:

View a demo of animation easing techniques here: http://demos.daylife.com/samuel/svg_photo_flipper_prototype.xhtml

To use:

  1. Download raphael.easing.1.3.js from: http://github.com/conesus/raphael-easing/tree/master.
  2. Include the raphael.easing.1.3.js file after your raphael.js file.
  3. Specify the easing technique in the .animate() function, like so:

    Element.animate({"scale": [1.25, 1.25]}, 750, "easeOutCubic", callback);

Available easing techniques:

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
 
Wednesday, June 3, 2009

In other news: Thoughts on eye allergies and what works best for me

In Brooklyn, many of the neighborhoods have very active e-mail lists. I live in Boerum Hill, a very pretty historic district lined with brownstones and trees. In general, the prettier an area is, the worse allergy season is for those who live in the path of various types of pollen. And Boerum Hill gardeners are a very prolific gardening bunch.

Recently, a mother on the Boerum Hill e-mail list asked about tips and experiences with eye allergies. Being a sufferer myself (having spent many Spring seasons holed up inside, coding instead of playing sports outside and laying lazily underneath the shade of horrible, horrible budding trees), I gave my experiences. My hope is that somebody out there googling for experiences in the eye allergy department will stumble across this and find some use.


I am a 24 year old male living in Boerum Hill (at Pacific and Bond). I have suffered eye allergies for the past 20 years, landing in the hospital due to pain, redness, swelling, and other oddities. I have taken a number of drugs, including steroids (called cortico-steroids). For the most part, while eye steroids are potentially dangerous, I took a few after rather severe reactions to my allergies. They were extremely helpful, but, for the most part, I found that discipline (i.e. not scratching) and prescription allergy eye drops were key.

First and foremost: No scratching. Even in the shower (where my worst pains came from, since I figured, hey, it's clean in here). At the slightest hint of pain/itchiness, use drops. They are cooling and usually reduce the itch immediately. If scratching is absolutely necessary, put a thick object (towel, pillow) between your hands and your eye. You will actually relieve the worst desire to itch (by itching "through" the pillow) without injuring the eye, and I have found that it works by taking 5 minutes to just get over the eye itch (after drops are applied, of course). I have also found that asking my girlfriend to physical restrain me when I start to itch has been helpful at times. Although, when you're in the heat of a good scratch, the last thing you want to see out of the corner of your eye is a girl running angrily towards you with intent to disarm.

Secondly, I tried a number of drops. Some are better than others. Patanol (and its chemical-sibling, Pataday) are nearly worthless to me. I took them for a few years, even when it was new on the market, and it hardly works. Alrex, made by B&L, is pretty good, but availability is now limited and doctors aren't as eager to prescribe it. Optivar gave similar results. What works the best, though, is Alamast. I recently switched to Alamast and have never been happier.

Between Alamast (which is non-steroidol, yet available only by prescription) and being highly disciplined in not scratching (and taking a breather when I can hardly control the urge), my eyes have been manageable. They are a light shade of red for the better part of allergy season. I have narrowed the time where I cannot wear contacts to roughly mid-April to June 1st.

Anti-histamines may or may not help. I have no idea because I have never noticed any relief whatsoever that came in the form of a pill.

Best of luck.
 
Monday, May 18, 2009

Proposal for SVG Open 2009

The SVG Open 2009 is in October at Google's campus in California. I recently submitted my proposal for a course on writing SVG through Javascript and the Raphael Javascript Library. Below is my proposal. Let's hope it is approved and I am able to continue work in SVG.

I am proposing to teach a course about building an interactive SVG module on the web through the use of the Raphael Javascript Library. From start to finish, the course will walk attendees through the process of creating an interactive widget, with a number of features ranging in complexity from basic layout to event-driven interaction. The widget will be a moderately complex application consisting of parts SVG, Javascript, jQuery, and HTML. While Javascript experience is expected, it is not necessary, considering the syntax of Javascript in this capacity is not far different than many other languages.

The widget, which will be used to demonstrate a number of techniques in creating both interactive and layered elements in SVG, is a "People Connection" module which shows a graph of how various people are connected to each other. See Figure 1 and Figure 2 for illustrations, and see http://www.daylife.com/topic/Barack_Obama/beta#title=Connections for a demonstration.

The 150 minute course will consist of 3 parts, with questions taken throughout:

  • Introduction to Raphael (35 min)
    • 5 minutes: Introduction and Overview of the People Connection widget
    • 10 minutes: Looking at the Raphael JS Library's methods and documentation
    • 10 minutes: Setting up data for the module to be used in drawing
    • 10 minutes: Loading data into Raphael
  • Drawing the widget (45 min)
    • 10 minutes: Images
    • 15 minutes: Shapes
    • 20 minutes: Lines, straight and curved (quadratic and bicubic)
  • Interaction model (60 min)
    • 20 minutes: Handling user/triggered events
    • 15 minutes: Animation
    • 25 minutes: Interacting with the DOM and jQuery

There is a time buffer built into each part, and if there is extra time, I will be prepared to discuss:

  • Raphael versus other SVG/Javascript libraries
  • Other projects built on Raphael
  • Browser compatibility with Raphael

For each section of the course, I plan to discuss:

  • Implementation and coding conventions
  • Potential pitfalls with certain techniques (browser incompatibilities, misconceptions, and common mistakes)
  • Building the widget by coding in real-time (and not using blobs of code already written).

The flow of this walk-through course will be aligned with the building of the People Connection widget, where I will start with a empty file and progress over each step used in creating the overall effect and feel of the finished widget. Each piece of the widget puzzle will be complemented with a demonstration of the incremental improvement. At the end of the course, a complete widget, with all of its pieces, will be fully functional and fully explained.

 
Monday, February 23, 2009

NewsBlur: RSS Feed Reader with Intelligence

Every two to three years I start a new project. Having recently completed the SunRayLab blog, I turned to another problem that I have been having since i started visiting blogs and other sites through the lens of my RSS feed reader, NetNewsWire.

I am starting a new project called NewsBlur. NewsBlur is an RSS feed reader with intelligence. See NewsBlur in action.

My problem is simple: I subscribe to a few dozen blogs. I do not want to read all of their many stories, yet my unread count keeps climbing. Some blogs post frequently while other blogs post once a month. I want a feed reader that easily trims the undesirable fat from my feeds.

This has been done in varying degrees before, but each implementation has been lacking for any number of reasons:
  1. The reading interface was convulted, slow, difficult, too busy, or rough.
  2. The intelligence used to pare down my feeds to just what I want was either difficult to setup, hard to train, overly-burdensome, or even just plain stupid.
  3. Marking feeds and stories as typical of what I want in the future has never been done.
I am solving this problem in a unique way.

The challenge in creating an interesting experience that is different from any other experience is what drives me to work on NewsBlur. I want a service that works for me. I expect that before I finish, I will already have abandoned my tried-and-true NetNewsWire (on both Mac OS and iPhone) in favor of NewsBlur.

I will use this blog space as a means to communicate advances in NewsBlur, as well as methodologies, practices, and thoughts behind the creation of NewsBlur.

My hope is that NewsBlur becomes part of a community that further enhances the news and blog reading experience for everybody.
 
Tuesday, April 8, 2008

Got my April Groove Going...

A week into April and the next cool feature is being started. Collaborative document editing, along with revision history and rollbacks, publishing, and synchronization is now starting to be developed. Good news, since this is easily one of the most important features to date.

In the past month, while I have been busy with the end of school work and finding out about a job in NY, I have not been at the SRL helm as often as I have been in the past few months. But that's all over, since I will hopefully be employed at a news publishing start-up in SoHo.

Expect to see subtle changes around the site as I also begin to work in the Responses feed and refactor the existing Activity feed to work in the differences between the two feeds.

Oh, and lastly, I have created an RSS writer that now attaches itself to all share blogs. I will attach the RSS feeds to each share feature as I build them, but because the blogs have been finished, they get the RSS feed first. I am also planning to create feed links throughout shares, as well as a big RSS feed that grabs all activities on a share. Pretty neat, huh?
 
Monday, March 10, 2008

What's the plan for March?

February, while slower than previous months, was host to a new of improvements, as well as the beginnings of some bigger features.

Not only was I able to completely tie up the activities feed, but I added a responses feed which tracks updates on the content you produce. Content being blog comments, discussions, documents you have edited or are watching, etc. Responses track content. Activities track actions.

Activities now also show the relationship to the user providing the action. In other words, if you are following the user, or are following the share, or are just involved the share, then all of this information is displayed on the right of the activity.

Additionally, activities also show the type of content that the action is being done on. For instance, somebody you follow makes a comment on a blog, and the activity shows 'Blog comment' done by a 'follow'. Pretty simply, right? Well, it makes the activity feed a whole lot more useful to see the organization of the content and people.

On top of that, activity feeds can now be organized and sorted by both relationships and content types. These preferences are saved across all activity feeds, including those that are not even on your 'me' page, such as user profiles and share main pages.

You may have noticed a number of aesthetic changes. These are part of the continual update of what should hopefully be an aesthetic and intuitive design. Post your thoughts.
 
Wednesday, January 30, 2008

Lots of Little Bits

I've been busy. Oh boy, have I been busy. During the past two weeks, I have been designing a number of new features as well as working on fixing and maintained older features, including modifying a ton of smaller items, such as:
  • Revised relative dates -- Now dates read as "2 weeks, 6 days ago" or "2 days, 4 hours ago". This is a finer granularity without being a useless exact date.
  • User stats -- This listing of # of projects, friends, followers, followings, visitors, visits, posts, and comments--all depending on what type of page you are at--is starting to show how users and projects will be able to keep track of their vitals.
  • Activity Feeds -- There have been a number of changes:
    • the aesthetic has been cleaned up; colors & sizes are now standardized.
    • deletion of activity feeds can be undone
    • if an activity is by a friend, a following, or a project you are in or are following, the type is displayed in the activity feed.
  • A number of other image refinements have taken place, as you may see in the Getting Started module, the What is SunRayLab module, as well as in a few other places.
  • Profile images have been upgraded to allow all users (including new) to select one of 18 pre-made profile images. New users even have the choice of uploading their profile image during registration.
  • A number of bugs have been squashed, such as blog archives, previewing and adding comments, cropping images, and activity feed types.
  • The 'People' tab has been updated to show more details.
  • Your personal profile is starting to show some person effects, such as your profile photos (all of them), personal bio, stats/vitals, and your friends, followers, and followings. Privacy controls will be introduced later on as I start to figure out what else will be in the profile.
As soon as I finish up my to-do list (about a dozen items), I will begin to implement the forums and photo galleries. Expect me to get that far in the next month.
 
Wednesday, January 9, 2008

Expanded Activity Feed & User Profiles

I've been hard at work adding in new activity feeds, as well as working on completing user profiles and relationships. I am also planning to finish user profiles by the end of the week, as well as begin project profiles and discovery.

You may notice that activity feeds are beginning to show a lot more than just the few items that have been sticking around on the homepage for the past couple of weeks. Activity feeds also show private events that only the user can see, such as followings, friends, and project follows and joins. These feeds should hopefully begin to populate as any user-actionable activity will show up on the activity feeds.

The activity feeds should also look completely different. I worked to integrate how easily readable and aesthetic the feeds are relative to the rest of the SunRayLab experience. The results are pretty good, in my opinion. I wasn't happy with the first iteration of how the feeds looked, since it was too text-heavy and looked burdensome to read. Hopefully that is cleared up now.

User Profiles are also beginning to come together. User profile photos are now displayed prominently on user profiles, and I will begin to get additional information, such as taglines, user bio, and custom text, to show up in the profile.

Please leave me feedback and comments here. I would love to hear what the few pre-launch visitors think of the quickly developing SunRayLab.
 
Saturday, December 29, 2007

Let's Make Everything Easy

As usual, I have been keeping myself busy implementing new features like the profile photos, user profiles, and the beginnings of the social network. But the coolest part is that no matter where you go on SunRayLab, you always know where you are, and it doesn't take you very long to get there.

Think about this: When you are customizing your settings, whether it's your personal profile bio, your links of interest, or even uploading a photo, you don't have to wait forever for the page to reload. When you upload a photo, as soon as the photo is uploaded, it just appears in the photo gallery. No reloads, no waiting. It is just there.

Similarly, when you customize your profile, you don't have to save each and every detail. Everything saves automatically, leaving you free to click between option panes and easily adjust your details. No waiting on saving the "About Me" section and have the entire page re-draw.

It's tough to get all of these little design bits working as you would expect them, but once you get down to it, you realize that the SunRayLab methodology of interacting with the page just makes sense. I also made sure that every single page is easy to find, meaning that there are no hidden pages which leave you wondering how you got there and where to go from there.

You may notice that every single page is clickable from the top-right menu, where you select a "page", i.e. me, collaborate, projects, people, or community, and then select a "panel", i.e. profile & friends in the people page. That's it. There are no pages or panels that are not exposed in that top menu. There can't be, because I designed the navigation system to prevent hidden pages. Sure, it takes a lot of thought to make sure that the navigation isn't overloaded or over-complicated, but it works out, because the user's conceptual model of where things go makes intuitive sense.

I am continuing to work hard to make SunRayLab as intuitive, aesthetic, and secure as it should be. Project collaboration should just make sense. Networking between projects should not be a burdensome experience.

Keep sending me feedback. I take everything to heart and if you notice, most of the changes that I have made here are because of users like you who are speaking up about the site.
 
Saturday, December 22, 2007

Activity Feeds Give the Full Skinny

Alright, activity feeds are done. They now work for Everybody (as shown on the Home page and your Me page), your friends and follows on your Me page, and for projects on each project's Collaboration Overview page.

The point of having activity feeds is that instead of having to check every blog post for new comments, forum thread for replies, projects for updates, and photo galleries for new images, all of these "actions" will now be sent directly to your activity feed on your Me page. This includes users you are following, your friends, and everything you have contributed to (including updates on blog postings that you have replied to).

This sprang out of an obvious need, but also in the first blog post on this blog, I noticed that I had to keep coming back to the posting to check for new comments.Now new comments show up on my Me page, as well as a snippet of the actual text, updatedinformationabout the blog post itself (total # of comments, blog title, date of action, and accompanying project), and a way to tell one action from another (icons & grey explanations).

Of course I will continue to update the functionality of the activity feeds to support more actions and events, but the overall structure and feel are there. You should even see this entry on the activity feed!

Please post comments and feedback about the activity feed. I will do my best to address everything I hear.

Lastly, just so everybody realizes, I came back from London a week ago and took a couple days off (one to travel, one to get set up back in Cleveland). As with all traveling, I ended up sick immediately afterwards. Well, it turned into the flu, and I am only just now recovered. Development worked stalled a bit, but all I could keep thinking about were which features should I work on as soon as I feel better.

My priority right now is to work on public-facing pages (user profiles, project discovery, user discovery, the Home page, your Me page, etc.) but I continue on the Collaboration features.
this is me
details
  • My name is Robert Samuel Clay. I go by my middle name, but you may know me by my first.
  • I live in Brooklyn, New York.
  • I work at Daylife, making the news landscape a better place by way of Python and Javascript.
  • My current project is NewsBlur, an RSS feed reader with a healthy dose of intelligence.
  • Born in 1985, I am now 24 years old.
  • Working in Python, Django, SQL, and Javascript gives me great pleasure, while having to do dishes does not.
  • bird
    twitter

    Twitter Updates

      follow me on Twitter
      elsewhere
      E-mail: samuel@ofbrooklyn.com
      Twitter: samuelclay
      Friendfeed: samuelclay
      Flickr: conesus
    current & past projects
    2009 - 2009 NewsBlur
    • RSS Feed Reader with intelligence, tailoring stories to a user's past preferences and current subscriptions.
    • Uses bayesian net filtering and neural networks to determine feeds and stories that are more likely to interest the user.
    Visit NewsBlur
    2007 - 2009 SunRayLab
    • Share all of your documents, photos, blogs, discussions, and files publicly or with friends.
    • Collaborate with others in editing all of your documents.
    • Synchronize and edit all of your data, either on SunRayLab or on your own computer.
    Visit SunRayLab
    2005 - 2007 CaseLife
    • A modular content site built to allows groups to communicate, through event listings, forums, photos, classifieds, to both involved students and the entire campus.
    • CaseLife's rich interface allowed students and faculty to interact with the entire campus community by using the campus guide, campus events portlet, campus information (weather, stocks, quick links to campus resources), custom feeds, and campus announcements.
    • Won 2nd place for Best Overall Engineering Senior Project.
    View CaseLife Information
    2003 - 2007 Scheduler Jones
    • A Windows Visual C++ application used by a majority of the students at Case Western to plan future semester schedules and share them with friends.
    • Won as a finalist in an engineering competition.
    View Scheduler Jones Information
    1999 - 2001 The Brain Explorer
    • An interactive study of the brain created with 6 people in 3 countries.
    • Won as a semi-finalist during the 2001 ThinkQuest International Competition.
    Visit The Brain Explorer
    ofBrooklyn blog info
    blog description

    Swinging

    blog statistics
    Since November 2007
    11 posts
    13 comments
    1,126 visitors
    12,845 visits