Project HUGE: Dig Deep Fitness Blog Widget For iPhone Fitness Log

Posted December 31, 2008 at 8:27 AM

Tags: Health / Fitness, Javascript / DHTML, Project HUGE

We are one day away from January 2009, my month of fitness! So far, I like to think I have taken a number of great steps to help move my fitness revolution along:

These are great steps and I feel that they have already made a huge difference, even in the last week or so. But, these changes are all private - part of my own personal world. This new effort lacks one of the most crucial ingredients to any fitness program: accountability.

Without a workout partner standing by my side to tell me that I look like a "large vagina flapping in the breeze, much like a windsock" (actual quote from former training partner), I need something to help me hold my course. As such, I have decided to try my hand at creating a Blog Widget for Dig Deep Fitness, my iPhone based fitness log. This widget is a simple JavaScript include that publicly displays my most recent workout information:

 
 
 
 
 
 
Dig Deep Fitness Blog WIdget Publishes Latest Workout From iPhone Fitness Training Log Software. 
 
 
 

I whipped this together in about two hours (not counting my battle with MS SQL Server), so it's a bit rough around the edges. But, for my first every Javascript-include-based widget, I'm pretty pleased with it. Even though it's an early beta version of the widget, I have updated Dig Deep Fitness to allow all lifters to get a personalized widget for workout publishing.

Since each lifter records his or her own sets (even multiple lifters within a single account), I have put the widget code in the Lifter's edit screen:

 
 
 
 
 
 
Dig Deep Fitness Lifters Edit Page Had Blog Widget JavaScript Code Ready For Copy-n-Pasting. 
 
 
 

The Script tag's SRC attribute contains all the required information and simply needs to be copy-n-pasted into an HTML page. Part of the data being passed along to the JavaScript file is the version of the widget being used so that I can create new versions even when backwards compatibility is not an option.

The HTML being generated is completely non-formatted. For the moment, all formatting must be done on the lifter's blog with cascading style sheets (CSS). I have used the following CSS to format the one on this blog:

 Launch code in new window » Download code as text file »

  • div#ddf-widget-container {
  • background-color: #FAFAFA ;
  • border: 1px solid #B5CF42 ;
  • border-bottom-width: 3px ;
  • font: 11px verdana ;
  • margin-bottom: 20px ;
  • padding: 0px 0px 3px 0px ;
  • }
  •  
  • div#ddf-widget-container-header {}
  •  
  • div#ddf-widget-header {
  • background-color: #B5CF42 ;
  • color: #FFFFFF ;
  • font-weight: bold ;
  • margin: 0px 0px 7px 0px ;
  • padding: 3px 2px 3px 3px ;
  • text-transform: uppercase ;
  • }
  •  
  • a#ddf-widget-header-link {
  • color: #FFFFFF ;
  • text-decoration: none ;
  • }
  •  
  • div#ddf-widget-note {
  • margin: 0px 3px 13px 3px ;
  • line-height: 15px ;
  • }
  •  
  • a#ddf-widget-note-software-link {
  • color: #333333 ;
  • text-decoration: none ;
  • }
  •  
  • a#ddf-widget-note-software-link:hover {
  • text-decoration: underline ;
  • }
  •  
  • div#ddf-widget-date {
  • border-bottom: 1px dotted #ABABAB ;
  • font-weight: bold ;
  • margin: 0px 3px 0px 3px ;
  • padding: 0px 0px 2px 0px ;
  • }
  •  
  • ul#ddf-widget-exericse-list {
  • list-style-type: none ;
  • margin: 0px 3px 0px 3px ;
  • padding: 0px 0px 0px 0px ;
  • }
  •  
  • li.ddf-widget-exericse-list-item {
  • margin: 0px 0px 0px 0px ;
  • padding: 8px 0px 0px 0px ;
  • }
  •  
  • div.ddf-widget-exercise-name {
  • font-weight: bold ;
  • margin: 0px 0px 3px 0px ;
  • }
  •  
  • ol.ddf-widget-set-list {
  • list-style-type: none ;
  • margin: 0px 0px 0px 4px ;
  • padding: 0px 0px 0px 0px ;
  • }
  •  
  • li.ddf-widget-set-list-item {
  • margin: 0px 0px 0px 0px ;
  • padding: 0px 0px 0px 0px ;
  • }
  •  
  • span.ddf-widget-set-weight {}
  •  
  • span.ddf-widget-set-pipe {}
  •  
  • span.ddf-widget-set-reps {}
  •  
  • div.ddf-widget-set-list-footer {}
  •  
  • div#ddf-widget-container-footer {}

As much as like the idea of default formatting, as a widget-consumer, I know how frustrating it can be to override default formatting, especially when inline STYLE attributes are being used. As such, I have opted for clean, simple, vanilla HTML.

Project HUGE 2009 - here I come!!!

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Permalink  |  Other Searches  |  Print Page




Learning ColdFusion 9 - ColdFusion 9 tutorials, samples, examples, demos

Reader Comments

Dec 31, 2008 at 3:37 PM // reply »
49 Comments

This is making me want to do two things:

1) Start working out
2) Trade in my Blackjack II for an iPhone

It's so cool to have someone like you sharing your knowledge Ben, thank you.


Dec 31, 2008 at 6:07 PM // reply »
6,371 Comments

@Steve,

Thanks man. I really hope to start looking at actual iPhone development (native apps, not just web-based ones) first things this year. I think it would be a lot of fun.

Until then, I will also start trying to flesh Dig Deep Fitness out a bit more as I really start to use it full-time.


Jan 1, 2009 at 7:02 AM // reply »
102 Comments

@Ben
I had looked into writing iPhone apps, but got turned off by the use of Objective C. It's probably just me, but the syntax seemed to be very unusual compared to many of the other languages out there. Probably just need to get used to it, but good luck with it (although I'm not sure where you're going to have the time to learn it along with all your blog posts, CF, working out, book reviews, movies...it seems like you're on the go all the time :) ).

And I'm thinking the next app to create is one that will chastise you when you aren't pulling your weight at the gym. Just take all of your previous work out partner's quotes and randomly pop them up as you're entering your workout stats :)


joellen
Jan 1, 2009 at 10:00 PM // reply »
1 Comments

I love the fitness solution I found on Kathyireland.com, it said instead of resolutions, set goals. We all end up letting our resoluions go by the side. with no hope of resolution but if its a goal that we missed that day theres always a chance to make it up
love the advice thats Kathy


Jan 2, 2009 at 9:38 AM // reply »
6,371 Comments

@Joellen,

I agree with you - resolutions do fall by the wayside. That is especially why I am excited about the DigDeepFitness.com blog widget - it will force to be accountable on a public alter. Now, in my mind, if I am not working out, I can believe (even if it is completely imaginary) that someone somewhere is looking at my Blog Widget and laughing at me :) This way, it will get me all reved up and keep my goals.


Jan 2, 2009 at 8:56 PM // reply »
6,371 Comments

@Gareth,

I have no idea what Objective C looks like yet, but I have heard a few people say that its nothing like what you're used to. Hopefully, with the iPhone SDK, like 70% of it is auto-wired?? Maybe I am just fantasizing :) We'll see. Gonna pick up a book tomorrow hopefully. I'll keep ya'll updated.


Jan 5, 2009 at 12:08 PM // reply »
1 Comments

I think you are on target with the importance of accountability. We all struggle trying to meet our New Years resolutions with out it. You will definitely be on to something if you can drive accountability via a widget and not have to plan around a workout partner.

Also, if you plan on sharing the widget with a larger audience, think about adding an aerobic element.

Good luck with the effort.


Jan 5, 2009 at 12:11 PM // reply »
6,371 Comments

@Mike,

Thanks man. I definitely look to opening this up to a wider element; it's just a matter of finding the time. Thanks for the encouragement.

I can't believe I haven't worked out since the 30th!!! :)


Dee Sadler
Feb 5, 2009 at 8:01 AM // reply »
1 Comments

@Joellen, wow I went to kathyireland.com. That site is so bad, I am not sure how you found a fitness solution there. Ben... they need our help bad. That is one of the worst websites I've seen in, oh, say 3 days. ;)

Dang. I wish I had seen that before to use in my Dreamweaver class to show what NOT to do with a website. I was a fan of her as a super model, but I guess she can't afford a decent designer.

So then I started digging deeper and her photographer also has a hideous site. (these are the offenders of the bad design www.dovetailstudio.com/ ) Maybe I've been targeting the wrong client. :D


Post Comment  |  Ask Ben

Recent Blog Comments
Nov 7, 2009 at 5:53 PM
Ask Ben: Javascript String Replace Method
You can find here an advanced function that prepared with javascript replace function. This can make the first letters of words, sentences, lines and whatever you define automatically: http://www.m ... read »
Andrew Neely
Nov 7, 2009 at 4:56 PM
A Moment That Touched Me - The Fountainhead
Ben, Glad you enjoyed the podcast. Yeah, the Tank Riot guys can get really chatty during the episodes, but that's part of the charm of it for me. They've covered everything from Nichola Tesla to Cha ... read »
Nov 7, 2009 at 4:43 PM
Building A Fixed-Position Bottom Menu Bar (ala FaceBook)
Is it possible to make some more MenĂ¼`s ? ... read »
Jill
Nov 7, 2009 at 11:40 AM
How To Unformat Your Code (Like A Pro)
Derek, I think you might be right - sweet! Thanks for the link :) ... read »
Nov 7, 2009 at 11:25 AM
How To Unformat Your Code (Like A Pro)
I think it would be way easier to just use this http://www.logichammer.com/html-formatter/ He just released v3 and it rocks. ... read »
Jill
Nov 7, 2009 at 7:58 AM
How To Unformat Your Code (Like A Pro)
LMAO - this was pretty funny! I have to admit - I also love to reformat code so I can read it. My boss used to tell me to leave my OCD at home. Now I don't feel so bad after reading everyone else' ... read »
Nov 6, 2009 at 10:10 PM
How To Unformat Your Code (Like A Pro)
The timing of this post is just uncanny. I spent the last 15-20 minutes manually un-formatting my "Ben Nadel" style code within a CFC of mine. I was really digging the readability a few weeks ago, bu ... read »
Roe
Nov 6, 2009 at 5:11 PM
Passing Arrays By Reference In ColdFusion - SWEEET!
ArraySort also reorders the results of these java obj's ... read »