I weighed myself in August and I had finally crossed the 300lb mark (305lbs at 5ft 11in) for the first time in my life.  I had flirted with that weight for several years, but never crossed it to my knowledge.  But, I never was a fan of weighing myself because I didn’t want to know the truth. This is what I changed since then and it seems to be working for me:

• I Started a well-defined exercise program in early September (Power90). I have tons more energy. I’ve dropped a chunk of weight. I am more flexible. And I’ve built a little muscle.
• I cut out ALL soda and calorie-dense drinks that provide no nutrients. I don’t even drink vitamin water. I only drink orange juice, milk, green tea, and tons and tons of normal water. I decided that I would rather eat my calories and enjoy them that way rather than drink them. (This is also why Slim Fast didn’t work for me).
• I count ALL my calories in a Google spreadsheet, but I don’t deprive myself of foods that I enjoy. I need this to be a lifestyle change for me and not just a quick diet. So, I need to make realistic changes. I knew cutting out all the food I enjoy would be a surefire way for me to fail. I just control my portions better and make smarter decisions.
• I use boredom as an excuse to exercise, and I try not to avoid small opportunities to burn a few extra calories (like taking the stairs instead of the elevator).
• I started following a subReddit called /r/loseit

Also, I originally changed my eating schedule. I ate 3 to 5 times per day to help keep constant energy throughout the day and to keep my metabolism running. I would always eat breakfast, even if it’s just a granola and nut bar. I use this opportunity to also take a multi-vitamin. And, I stop eating at least 3 hours before bed. For the past 10 years or so, I got into a bad habit of only eating 1 or 2 meals a day (never breakfast). That loaded all of my calories into a small timeframe. And it was usually late. This + the soda seem to be the big factors in what caused me to gain weight.

I finished my first round of Power90 on December 4th, 2011.  I weighed in that morning at 274.2 for a loss of 30.8lbs in 3 months. And, I have gained muscle mass. I still have a long way to go, but I am happy with my progress so far (even though it isn’t as visible as I would like).

I have to wear a belt with all of the pants I own or they will fall off (I can take off my pants without unbuttoning them). And, I had to poke a new hole in my belt. I don’t dare buy new clothes right now because I plan to continue my journey. I can actually fit comfortably into my 10-year-old high school workout clothes. But, I don’t see a huge difference in the mirror.

I started out following the P90 program exactly as it was written. After I got into the 3-4 exercises, I started to REALLY get bored with the routine. So, I started subbing in a stationary bike for the cardio. I bought one with pre-programmed exercise routines and adjustable difficulty. I have gotten to the point where I can do a 40 minute ride on the 12th (of 16) difficulty setting and an uphill circuit.
I have been taking the recommended multivitamin to help the recovery process. But, I have also been taking a fish-oil supplement for the past month or so because I do not eat a lot of fish or other sources of Omega 3/6/9 fatty acids.
I am also thinking about starting training for a 5k. There is a 5k race on my birthday in April. It would be nice to be able to do that.

I have been off Power90 for 22 days, but I have tried to create my own routine following many of the same workouts.  It hasn’t been nearly as effective without the pacing and the discipline the videos provide.  So, I think I am going to restart the videos soon and stick with them strictly again.  My last weigh-in was on December 22nd at 271.2 lbs.  A total loss so far of 33.8 lbs.

[Google Spreadsheet Chart.  Auto-updates]

http://www.uie.com/articles/three_hund_million_button/

About heatmap.js
heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you’re adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate. The heatmaps are fully customizable – you’re welcome to choose your own color gradient, change its opacity, datapoint radius and many more. The library is dual-licensed under the MIT and the Beerware license, feel free to use it in your projects.

http://www.patrick-wied.at/static/heatmapjs/

Users with poor vision will sometimes change the DPI scaling feature in Windows  from the default 96 dpi to something higher.  With older versions of Internet Explorer, this can be a problem because IE would scale the viewport font along with the Windows DPI.  And, that could really blow your design out of the water – even more than a user with a custom defined stylesheet.   This behavior was only observable in IE on Windows.  Other browsers scaled fine.  This post guided me in the right direction http://www.williamkolean.com/williamblog/?p=18

I came up with a way to fix the problem.  But, it has some shortcomings I will describe after the code.

I use a jQuery font size switcher to allow the user to change the font size in the page.  I wanted each of those options to scale with DPI.  You can see in the code below that there are 4 CSS selectors defined inside a conditional comment that only targets IE < 8.  These CSS statements use a proprietary function called “expression” that can be used to calculate values dynamically (yes, there are pitfalls here – see below).  The expression functions below also utilize the screen object to determine the screen DPI.  The expression scales the font back down in proportion to the default 96 DPI and to the proportion I want the font scaled from the default.  I like my default and small font to be 62.5% of normal so that 1em is approx 10 px.

<!--[if lt IE 8]>
<style type="text/css">
body {font-size: expression( screen.deviceXDPI > 96 ? ((1 / (screen.deviceXDPI / 96) * 100) * 0.625 ) + '%' : '');}
body.smallFont {font-size: expression( screen.deviceXDPI > 96 ? ((1 / (screen.deviceXDPI / 96) * 100) * 0.625 ) + '%' : '') !important;}
body.medFont {font-size: expression( screen.deviceXDPI > 96 ? ((1 / (screen.deviceXDPI / 96) * 100) * 0.675 ) + '%' : '') !important;}
body.largeFont {font-size: expression( screen.deviceXDPI > 96 ? ((1 / (screen.deviceXDPI / 96) * 100) *0.75 ) + '%' : '') !important;}
</style>
<![endif]-->

This seemed to work well in my testing and no one complained since then.  However, you should be warned there are some serious issues with using the expression statement.

• The expression statement here will be recalculated for just about any event that would affect the DOM and any event that triggers an update to the browser viewport (such as scrolling!).  There are a lot of events that trigger viewport updates.  Expressions like this are on the list of things to avoid in Yahoo!’s High Performance Websites Guides.  Of course, the impact this actually has depends on how rigorous the calculation and the performance of the machine on which the browser is running.
• Microsoft killed expression support in IE8 Standards mode and plans to keep it that way.

• “Unable to create the virtual directory. Unable to acces the IIS metabase. You do not have sufficient privilege to access IIS websites on your machine.
• “ASP.NET 4.0 has not been registered on the Web server. You need to manually configure your Web server for ASP.NET 4.0 in order for your site to run correctly

This can happen if you install IIS after the .Net Framework.  So, not all components may be installed or configured correctly.  This happened to me because I was given a new work machine with a fresh (generic) IT disk image, which had the .Net framework installed but not IIS or development tools.  So, I suspect many other people may share this use case.

The steps on resolving these issues can be found here:  http://www.devcurry.com/2010/11/resolving-aspnet-40-has-not-been.html.  I had to complete all of the steps listed to fix my most recent install.

32-bit/64-bit Application Pools

You may also get the following error (as I did) when attempting to run an application with 32-bit assemblies under a new configuration of IIS and ASP.Net with 64-bit Windows.

• “BadImageFormatException: An attempt was made to load a program with an incorrect format. (Exception from HRESULT: 0x8007000B)”

Solution:

“If you try to run 32-bit applications on IIS7 (and/or 64-bit OS machine) you will get the same error. So, from the IIS7 right click on the applications’ application pool and go to “advanced settings” and change “Enable 32-Bit Applications” to “TRUE”.

Restart your Website and it should work.”

This solution was found on Stack Overflow

Some people dismiss this weird float behavior as a browser quirk instead of trying to understand the issue. I thought I would take a quick second to document how floated elements interact with their parent container.

Floating elements takes the elements out of the “normal flow” of a page. Therefore, they are not included in the height calculations of their parent containers. This can cause overlapping content in pages or even more odd behavior. There are convoluted ways to fix this, including adding markup to your pages with the clear property on them to reset your floats.

But, there is a more elegant way and it only takes two CSS properties on the parent container.

.parent {
overflow:auto;
_height:1%; /* ie6 fix */
}

In most cases, overflow:auto will force the height of floated child elements to be included in the height of the parent. And the _height property (yes it is misspelled with a leading underscore) will fix an issue in IE6 where overflow:auto isn’t enough to force height to be calculated. It turns out that IE6 doesn’t mind a leading underscore and accepts the property, but virtually all other browsers fortunately drop the property as being invalid.

See the following image and webpage for an example of this in practice.

Example: http://www.albybum.net/docs/css-examples/floats.htm

Even though CSS is an easy language to understand, it takes years of experience to master all the language and cross-browser “gotcha’s” associated with Web development. I think a recent SixRevisions article by Max Luzuriaga describes this well.

But despite its deceptively easy exterior, CSS is one complicated system, especially when you’re doing it in a professional, high-scale, high-performance level. The sheer number of ways to select an element is amazing; not to mention the number of properties you can apply to that selected element set and then how presentation changes when you’re talking about supporting multiple browsers and layout engines.

It’s easy to get tripped up with CSS.

For a while, I have wanted to document these issues for myself, but it was difficult to find the time. Now that I do have the time, I plan on making a series of public posts documenting these issues myself and finding professional supporting articles.

To start, I highly encourage people read the above-mentioned SixRevisions article. I will describe below the two points that I do not 100% agree with. But, it is a great read and points out some of the common high-level issues with CSS.

Source: 12 Common CSS Mistakes Web Developers Make (SixRevisions)

Over-Qualifying Selectors:
Problems can definitely arise from being too specific with selectors, but the opposite is true as well. If style rules are applied to selectors that are too generic, then more specific selectors that are needed as sites evolve often have to “undo” or overwrite inherited rules in these new rules.

Just as a very simplistic example, adding font-weight to the base anchor tag element selector would cause every link to inherit this rule. Most likely, there are going to be links somewhere on your site that you don’t need to be bold. So, any more specific selectors added “down the road” would have to reset this font-weight value. Again, this is a very simplistic example, but the concept still applies if it was prefixed by a #sidebar selector or even more nested and specific selector.

a { font-weight:600; }
#sidebar a { font-weight:600; }

Using very specific ID selectors as “prefixes” can also allow developers to easily and somewhat semantically “segment” their style rules to target specific sections of a site. This is useful for large websites with multiple sections or tools that might undergo revisions separate from the remainder of the site.

I think the solution here is to use the exact level of specificity needed to achieve the current style with some planning for the future and some consideration of how the rules will be reused. For example, what selectors might be nested within the current selected element or container that will also be affected by the associated rule? I think many Web developers do not give enough consideration on how style rules on a site will interact with each other. And, this leads to more issues other than just selector specificity issues.

Using Only One Stylesheet for Everything:
Using multiple stylesheets can be a mixed blessing for maintenance. If there is a high level of cohesion in the style rules being bundled (like CSS reset, IE fixes, etc.), those can make maintenance easier. In this scenario, things can be easier to find and change.

But, I argue that segmenting CSS into separate files for “sections” of a website can be a mixed blessing. Things are often not as cohesive as we would like after a site has been in maintenance mode for a while. And finding where a style rule is defined can be a pain in these scenarios, which are more common in large development studios. This is especially a problem when style rules affecting an element are cascaded across multiple files.

Whether segmenting offers a benefit or a hassle for maintenance really is negligible if you use the right supporting tools like Firebug – as it usually make tracing style rules trivial.

The real issue that comes to mind for me is performance. Splitting CSS into multiple files creates the need for additional HTTP requests, which is one of the banes of performance for high-load websites. This is the same reason we use the sprite technique to bundle multiple design images into one image and use CSS to position the right image into view. Lowering the number of HTTP requests increases performance.

Splitting CSS into multiple files can give a net performance gain if the site in question has a ton of CSS, some of which doesn’t always need to be loaded. CSS rules for a lower-traffic section of the site could be factored out into a separate CSS file and only linked when the specific sections are loaded. But, it would take some analysis of whether those extra kilobytes are worth the extra HTTP requests.

Update 1, 9/8/2010:
Reading through the comments at SixRevisions, I noticed the recommendation to use @import to address the HTTP request issue when splitting up CSS files, but @import has its own set of performance issues by forcing sequential loading.

From the “video,” I noticed at least the use of HTML 5 video, canvas and geo-location features. There may also be some persistence of data. This definitely illustrates some new ways that websites will be engaging visitors in the future, allowing a more personalized multimedia experience.

I was surprised at the smooth integration of elements between technologies and how great the drawn images actually looked.

Google is a big proponent of HTML5, especially for video and rich graphics in the browser. To show off what HTML5 can do, Google Chrome teamed up with the Arcade Fire and director Chris Milk to create a custom interactive video for their song, We Used To Wait. The experience is called The Wilderness Downtown and is best viewed in Chrome

I definitely encourage people to fire up Chrome and take a look.

Source Techcrunch (via Digg)

Source: http://www.engadget.com/2010/08/30/xbox-live-gold-price-increasing-as-of-november-1-in-us-uk-cana/

The change takes effect in November.

So, I guess if you want in on the cheap, stock up on those existing cards now before the price goes up.

Well, this is sad and unexpected: Microsoft’s Major Nelson just announced that Xbox Live Gold will be getting more expensive in the US, UK, Canada, and Mexico starting November 1. A single month will go from $7.99 to $9.99, three months will go from $19.99 to $24.99, and the yearly sub will now be $59.99, up from $49.99.

Interestingly, if I reverse the logic, the calculation falls 7 days short.

But, this calculator, also says 10,000 days.

So, I guess I’ve lived “approximately” 10,000 days