What's new

Last updated: March 24, 2014

WorldWide Telescope on your web site!

March 24, 2014

Embed the entire known universe on your blog! I am back on the WorldWide Telescope project as of fall 2013 and have been revamping the site and creating fun things like embeddable controls.

Here, try it!

    <div id="wwtControl"></div>
    <script src="http://worldwidetelescope.org/embedded-webcontrol.js"></script>

WWT Configurations:


A Tweenie Update

Feb 19, 2013

I finally merged my two tween objects. I had created a tweener that would tween dimensions, position, and color, but then I also made a gradient animator to go along with my gradient editor. Now I have them both working simultaneously. I also finally added IE10 support to the gradients and was a wee bit surprised at IE's performance in the realm of gradient tweens.

Browser Avg. FPS

Internet Explorer v10     272
Firefox v18 228
Chrome v24 222

I made a couple of 7-color gradients and animated the exact same gradients on Chrome, Firefox, and Internet Explorer. So who won out?...

Brace yourself.

Internet Explorer! And CHROME was the SLOWEST!

I have a pretty beefy machine here at home running Windows 8, but you can see what my average framerates looked like.


I left the console.log calls in so you can see for yourself. IE looks amazing honestly.

I have also added some other extra properties you can tween - rotation (transform), border (color and width), and border-radius. A jquery plugin + documentation are coming...


RequireJS-ified

Jan 17, 2013

Require JS

I've been surfing the various frameworks out there lately (backbone, ember, knockout, commonjs, etc.) and one stuck out as particularly relevant to my sandbox here. Require. So I spent a couple of days rewriting my components to have nested dependancies using the requirejs framework. Pretty damn slick. Take the gradient page. Here is the dependancy stack:

  • Views/Master
    • thewebkid-core
  • Views/gradient-manager
    • Controls/gradient-editor
      • Obj/gradient-core
        • obj/color
      • Controls/color-picker
        • Controls/sliders
          • Controls/move
        • Obj/color
    • Controls/gradient-animator
  • Modals/AnimateGradients

It seems to have a pretty slick speedy and predictable engine to load components. And with just my little gradient sandbox example, this really helps to simplify the code base. I will continue to tinker with it...

 

All Strapped in...

Nov. 20, 2012

I've been playing with Twitter Bootstrap for the past 6 months. Well that and Font Awesome, several Google APIs, and the open source FullCalendar. I used these technologies/components/frameworks in my last gig where I was tasked with creating the entire presentation layer of PlaceFull.com.

But I decided to use Bootstrap on thewebkid.com and redesign a few things. You can check out how bootstrap enables a fluid grid and responsive layout by simply resizing the browser. Watch the navigation bar transform. It makes mobile development MUCH easier.

 

Internet Explorer eats Glue

Animated Gradients

April 29, 2012

I made some updates to the gradient editor - specifically the animation designer. The animation modal now shows a preview in realtime while editing. It's pretty cool (according to a recent survey I conducted). Next step is getting it running in IE and Opera. So far Firefox outrenders Chrome - which is sorta choppy. Surprising honestly.

The picture on the left is certainly accurate :)

I'm also working on a stop animator so that you can take a given color stop or subset of color stops and animate them. Progressbars come to mind, but there would be all kinds of fun ways to play with this.


Site Redesign

April 22, 2012

QR code for thewebkid.comI have completely redesigned my site and ported it to MVC. I also made small changes to most every piece on the site as part of the redesign. Rewrote my gradient editor for a THIRD time and it is now happy and debugged.

Believe it or not, I rewrote this with the new Visual Studio beta with their lame grayscale icons and everything.

Please feel free to send feedback on what you see. I mean ESPECIALLY if you want to tell me what a crap designer I am and offer to redesign my site for me. Still waiting for that mail :)