Keys That Click - Minding your own design business and other observations

Posts Tagged ‘juitter’

Panic-Inspired Status Board Live Preview using HTML5 contentEditable and localStorage

Posted in Status Board How-to, Web, on April 26th, 2010 by Carlos.

Ok folks, ahead of me trying to explain how I built this thing, which might take some time to get to, I figured I might as well share a live preview of my Panic-inspired Status Board with the masses.

Credit goes to the following sites for the different components that I grabbed from various tutorials or resources to make this all happen:

contentEditable with localStorage: http://html5demos.com/contenteditable
I modified it so to save several different chunks, rather than just one list. Admittedly, I’m not a script coding pro, so I’m pretty sure I took a long-way of doing things, but ultimately it worked! If you have suggestions on how to make it better, please let me know!

jDigiClock – jQuery Clock with Weather: http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock
This little plugin is actually much more full-featured than what I used, so check it out for what it can do. I modified to include only the information I wanted (time, weather icon, temperature). I either hid, or deleted the rest of the items that I did not use. I used some CSS to position the items how I wanted them, and used a bit of transform capabilities of CSS3 to scale the plugin to my wanted size. This saved me from having to open all the different graphics that come packaged with the plugin and resize them each.

Juitter – Live jQuery Twitter Feed: http://www.juitter.com
I created some of my own styling, but used the jQuery based Juitter plugin to have a live view of a customizable Twitter feed. Although not perfect, it was one of the best Twitter integration options I could find at the time.

A few things to know, before clicking through to the live preview:

  • You should be able to click on the lists and start typing, deleting, etc. Refreshing, and even closing/opening the browser should leave all your content intact. I’ve even tried clearing browser history/cache/etc. and suprisingly the content stayed there. Read my word of warning below for more on this.
  • Given that this uses localStorage, you will not see your changes on a different machine, as it only shows what is stored on the machine you are using at the time. My hope is to eventually turn this thing into something that PHP based with MySQL integration so that it can be accessible from different machines to show the same information, as well having a database you can easily backup in case of disaster to prevent losing the to-do’s. If someone is interested in helping me do that, drop me a note.
  • I recommend you use Google Chrome in Full-screen mode on a monitor resolution of 1920×1200. This was specifically designed to be run this way, so it will not appear correctly in other resolutions, and perhaps even other browsers, especially non-webkit based browsers.
  • You will see that depending on the size of the individual lists, the lists may actually wind up going completely off screen. I haven’t created a fix for that (it’d be nice to be able to drag-drop the lists to different positions). For now it’s my way to stay on top of my to-do list so it never gets out of hand! :)
  • The weather does not seem to be working at the moment. I believe it is my host that isn’t allowing it to work, as it works running locally on my machine, as well on the plugin page that is mentioned above.
  • The default font for the lists themselves is American Typewriter, which should be loaded up on Mac’s by default. For non-Mac viewers, it should default back to Times.
  • Twitter feed is currently only displaying tweets about/from Keys That Click
  • A word of warning. If you want to use this LivePreview as your own actual to-do list, please know that it experimental, and I cannot by any means guarantee that your to-do list will not just one day disappear! I myself don’t know what to expect when using localStorage.

Well without further ado… click the button below to launch the live preview:

My Very Own Panic-inspired Status Board

Posted in Design, on April 13th, 2010 by Carlos.

[Update: You can check out a Live Preview of the Status Board by reading my post, Panic-Inspired Status Board Live Preview Using HTML5 and contentEditable.]

I recently picked up a beauty of a monitor (Dell U2711) which left me with my 24″ Samsung looking for a home. Given that the displays are very different, I wasn’t truly digging the two monitor side-by-side idea, but did want to do something with it so I would have it handy in case when having two monitors makes life easier (working with presentation documents seems to make me wish I had the second monitor).

Anywho, I started to think about the Status Board that Panic created and blogged about a while back and thought I could do something similar to replace the white board I have next to my desk. In fact my second monitor is currently blocking the view of my white board, so I only found it appropriate! I basically wanted a glorified to-do list split up by clients, while having some handy information at my fingertips (time, weather and Twitter feeds). I had and still have some delusions of grandeur which would make this thing fully AJAX enabled where I can drag and drop items and lists, but I had to start somewhere, and I’m not quite there yet. The DIV’s that contain the lists do expand as you type more in, and the DIV’s themselves will automatically position them self in the page columns as the lists grow. It is by no means done, as I have several more tweaks I’d like to make to it.

I will likely break out how I created the Status Board over a few blog postings so I don’t glance over too many of the details, but here’s a quick overview of the elements I used to create it:

  • The Status Board is really just a HTML page set to full-screen at 1920×1200 resolution . I had to use Chrome for this as other browsers/methods failed with the two displays. I also wanted to keep it based on Webkit, so I didn’t look at any Mozilla alternatives.
  • Several helpful jQuery scripts and plugins including:
    • The really nifty HTC-esque clock and weather that is displayed in the corner (jDigiClock)
    • Real-time Twitter feed using Juitter
  • HTML5 properties such as contentEditable to make the lists editable right on the screen, and localStorage to keep a copy of the list stored on the local machine (really only did this as I need some assistance with saving it to a mysql database)
  • CSS3 layout properties such as columns, rounded corners, opacity and shadows

I must say, designing a site that you can control the audience, browser, resolution – everything – was fun, but surprisingly challenging. Old habits die hard, I suppose, but I really shouldn’t get use to developing sites for only one platform.

I’m hoping that this will provide a clever use of a secondary display and that I actually do wind up using it! I’ll do my best to share my findings as I enhance the web app further, at the same time asking for help if anyone is willing to provide it!