Ryan Ternier

The grass is greener where you water it.

2008-03-29T02:15:00Z

I love watching people. I like to sit back, and watch peoples expressions, their body movements, their reactions to certain things. I don't really consider it eavesdropping, as I am not paying attention to the conversation, and I don't usually hear what's going on. The other day I was watching a few developers from a larger company here in town bicker about something.. A friend of mine joined their group and saw I was drinking some coffee and invited me over. The conversation soon turned towards working conditions, job satisfaction, salary, management etc... really whatever a group of developers talk about at a coffee shop. Now many would think we'd talk about games, however as "Geeks" we must maintain the persona that we have lives (note Geeks, not nerds... Geeks).

One person then mentioned the well coined phrase "Well the grass is always greener on the other side of the fence". At that point I had to but in and tell him to give his head a shake. The grass is greener where you water it!

As a working individual it is your duty, heck it's your God given duty to put 100% into your career / job. It doesn't matter if it's full time, part time, a "stepping stone", or whatever. If you are getting paid for a job, put your all into it because that's really what you're getting paid for. If you think the grass is greener on the other side, look at where you're at. Think of what makes the grass greener on the other side and bring it up with your manager / boss. Now there are some cases where the grass you're currently on was laid on a bed of concrete, in those rare occasions even the dirt looks greener (And you might want to either talk to your manager about buying an excavator if you're in this boat).

Yes this is a bit of a rant, and it might be because I'm a new dad and my career is very important to my family. But wherever you are in your career, make it the best it can be. Put your all into it. Yes, the company across the street might have the newest computers, or the company across the way has lunch time gaming time... whatever it is, if you put your all into where you are, whenever you decide to move on you'll do it with integrity.

I'm going to change my babies poopy diaper now.

Acid 3 Test?

2008-03-17T04:22:00Z

Yes the Acid 3 test has been released. The official announcement is here, and because I loath copy/paste blog posts you will need to go there to read all the nitty/gritty about it. Pretty much Acid3 tests specifications for "web 2.0" (What the heck is web 2.0 anyways? When did the web get an update... I'm still waiting for my CD!). Too see exactly what's tested, check this out.

The cool this about this is that It shows the "Percent" on how good your browser is. Believe it or not, IE7 gets like 13%. FireFox 2.0 gets around 52%.

I'm not even going to attempt to do this in IE8 beta.

IE8 is comming out, FireFox 3 is comming out, When's my duplicate comming out?

2008-03-17T04:20:00Z

Holy Cow! I know this isn't new news. IE8 and FireFox 3.. Acid 2 tests, heck Acid 3 tests. When is it going to stop?!?

As some know, I'm writing a very complicated vehicle tracking system that is all web based. It can track up to 200 vehicles at once (in one browser instance), draw them on the map, and give you all the nice tid-bits of information about them. This application is very heavy CSS and JavaScript. I pretty much took most of .NET out of the application except for 3 web service calls.

However, To make applications like the one I'm developing work in a real world environment, they need to be efficient. That means that if I'm going to be doing collision detection on vehicle labels (so they don't overlap) I would rather use a few extra bits of memory to remember the answers from complicated math (storing the values that are returned by using COS / SIN calculations) than to have to calculate them each time. If you didn't know anything done using COS, SIN, TAN etc. are extremely expensive.

So back on topic, I have my application, It's as efficient as I can make it, and now I have to test the efficiency in not 4, but SIX browsers. And to top it off, those browsers have tweaked Javascript engines. WHY WHY WHY! I already tried my app in these 2 new browsers, and they "do" work, but not as well as I would've hoped. Come on, when can a Guy run a simple <div> collision detection script that checks over 100 divs and repositions them in a self expanding circle every second? Why does it need to take 3.2 seconds?

I know... to better humanity and all other species on this earth, new web browsers are pertinent in order to form an electronic self sustaining ecosystem. Anyways, WHY! I already have 4 browsers to test (IE7, FireFox 2.0, Opera, safari... stupid Safari), and now I need to test on 2 more? You know, the day when those 2 browsers (or days) get released I'll forget to test on them and I'll get over 100 emails in my inbox stating that my website broke the internet (if that were true then I'd really have something to blog about).

Can we invest more money in holograms like on Star Trek so I can get a duplicate to do the testing? I know testing is the bestest most funnestest thing ever and that programmers everywhere are running at the opportunity to test... but I'll sacrifice my ego and let my hologram clone do it for me.

Ok I'll stop whining now.

Why I love Javascript, and Ie7 hates extra ,'s in prototyping

2008-01-31T18:04:00Z

I've been working with javascript rather heavily for the past few... many months. Years ago when I started working with ASP.NET I was naive and thought everything should be done server side. I thought that the server should do all the work so the clients computers would be able to work fast. It took only 1 year for me to turn that thinking around. JavaScript rocks!

ASP.NET AJAX works great with JavaScript. You can point to a web service (in your current domain), get the data you need, and do all the XHTML/HTML Markup changes necessary without a postback to the server. (yes some postbacks are evil)

So why do I love JavaScript? Aside from the Asynchronous nature of it (which can really screw with your mine sometimes), it makes the client computers do the work, and takes the load of your servers. It might be easy for your server to render a DataList of 100 rows. However, if you need that list updated every 10 seconds with the newest data, your server will start complaining when 1000-10,000 people are viewing that page. You could cache the data, but you'll still be rendering the DataList in your presentation layer. With JavaScript, you can create a simple object (note JavaScript is not an object based language, you use prototypes... but for the simple eye they look like objects) that can do this for you:

DataItem = function(data)
{
    this.UserID = data.UserID;
    this.UserName = data.UserName;
    this.FullName = data.FullName;
}

DataItem.prototype = {
    toString = function()
    {
        return '<div class="detail">UserID: ' + this.UserID = ', UserName: ' + this.UserName = ', FullName: ' + this.FullName = '</div>';
    },
    test = function()
    {
        var d = "test";
        return d;
    },
}

When you get the results back from your webservice, you can loop through them, creating this object (yea yea) from the data returned, and easily output the data you need. Very simple, and you have full control. You don't need to rebuild your application if you want to change how a simple list works.

This is where I left off last night with some script I was working on. I get to the office and I began testing it again, pulling my hair out. FireFox was working fine, however IE7 was blowing up. I kept getting "<custom object> is Undefined". After creating a few test prototypes I found the culprit... the trailing "," in the last function of my prototype. IE is expecting there to be a new function, FireFox ignores it.

JavaScript is strict, and I love it!

CSS - Sprites?

2008-01-17T19:13:33Z

Web Designers are always trying to find new and innovative (read:easier and better) ways of creating web sites. Today I stumbled across two sites that really push this.

Remember back in the VB 6 days, or even the C and C++ days where you used Sprites? If any of you ever looked at old NES, SNES emulated games, you would see the graphics were all sprites.

Now you can do this with CSS... well you've always been able to do it, but now it's been shown to really work. Take a roll-over button for example. Instead of creating 2-3 images for this roll-over, why not have 1 image and you just use a bit of CSS (pseudo classes) and you're done. This is explained on WellStyled.com very well.

Another great example of this was found on A List Apart.

Gone are the days of creating massive images for everything. Aren't the old ways always best?

VS 2008 - Crashing

2007-12-27T16:00:26Z

For the past bit now I've been getting this when starting VS 2008:

This happens whenever I start VS 2008 from a shortcut / main application. Even If I quickly close the start screen and load my project this happens. The only way to actually get into a project is to open in VS 2008 is to open it from the .SLN file. This will not crash VS 2008 and it will work fine.

I'm not sure why this is happening - I'll probably re-install it... when I have time...

IE8 Passes the Acid2 test

2007-12-21T18:29:56Z

As many web developers know, Internet Explorer has always been behind the times for Web Standards. Just last week IE8 (Which is still in development) passed the Acid2 test. The Acid2 Test's main website is here, and you can view the actual test here. The Acid2 test has correct CSS and incorrect CSS. The test is to determine how a browser handles CSS(correct and incorrect). The long list of standards that web browsers has to support (W3C is only one body of standards), you can imagine how great the IE team must feel.

The ironic thing was as I was reading about this, I was told my new application needs to be supported by IE6 now... 10,000 lines of JS Script... 100+ images (alpha-transparent PNG...) oh the joy.

Here's a link to the IEBlog that talks more about this.

First look at VS 2008 - JavaScript intelisence.

2007-12-19T15:33:00Z

Yesterday I downloaded and installed VS 2008 Professional (MSDN License). The process was mild and pretty easy... uninstall all the beta software, install the new software etc. The only problem I had was when I launched a 2005 application (under TFS Source control). VS 2008 (And Team Explorer 2008 by extension) didn't really like this. I got a lot of errors, so I went back to VS 2005, manually checked out the entire solution, then loaded it up in VS 2008. This worked like a charm.

Once my app was loaded in VS 2008 I was eager to try the new JavaScript Intelisence. This is actually the main reason for me installing this new release as my application is 80% JavaScript (approx 10,000 lines). One thing I noticed is the Intelisence only worked for the JS file I was working on. It wouldn't map to the other 30 or so JS files I have in my folder (I'm not sure If I need to do anything special for this). This really was a bit of a disapointment, but I understand why... the compiler doesn't know I'm using the other JS files... I wonder if there's an "include" command or something that would work...

If anyone knows any ways of telling the complier to link JS files (without manually copying the script) let me know.

So far I'm impressed. Good job Microsoft & the VS Team.

Ryan has become a Dad!

2007-11-23T17:29:00Z

It's been a long week. But I am very proud to announce that I have become a Dad and joined the elite. Thursday 15 November 2007 at 9:38pm PST the little ninja on the left was born. He was born at 7lb 10 ounces, 50cm long and was the most beautiful thing in the world.

My wife and I agree on this: I never believed in true love at first site until I saw Aidan. Oh, my sons name? Aidan George Alexander Ternier. It's been an amazing week. He's kept us up at night, he's made us laugh with all of his facial expressions, and has made me appreciate my parents way more. He's also helped all the local coffee companies out there because I'm drinking more than usual now.

My blogging will slow down a bit as I now have almost 0 time. I'm still alive... but just barely... need... coffee... green tea... pii...zza?

Full Screen web pages and browser resizing - keeping it looking good

2007-11-23T17:17:12Z

I've noticed one thing that really gets some web developers going (and not the good going): Keeping a full screen web site looking good with different browser sizes. Those that know CSS inside-out will also have this problem as sometimes you just can't cut it with pure CSS. This is why many sites us a set width - they have clear control over everything with just CSS. However, those that like to employ full screen web pages need to do a bit more.

Note* this is only an issue with <div> based layouts. Table based layouts (die die die) don't have this.

Most Web Applications nowadays are full screen web apps - If they are not you should really re-think your design. I always develop my web apps for 800x600, but always allow them to work at resolutions like 1600x1050 (my resolution).

I have a simple JavaScript function I use whenever I write full page web apps that have a lot of content areas that I need specifically sized. here's a sample of my script that I am using for a program using mapping. This script runs every 250ms (4 times a second) and resizes my map width/Height and my sidebar height to take in the full height of the browser. My application never has any scrolling - except my right sidebar (overflow:auto;). This allows my application to remain clean of scrollbars and stay as large as possible for those using it.

var browserWidth = 0;
var browserHeight = 0;
 
function getSize() {
  if( typeof( window.innerWidth ) == 'number' ) 
  {
    //Non-IE
    isIE = false;
    browserWidth = window.innerWidth;
    browserHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    alert("You are using an outdated browser. Please upgrade to IE7 or FireFox 2.0");
    //IE 4 compatible
    browserWidth = document.body.clientWidth;
    browserHeight = document.body.clientHeight;
  }
}
 
function updateMapSize()
{
    //IE7 is 21 pixels LESS than FireFox.
    //Pretty much we want to keep the map to the maximum size alloted.
    getSize();
    //Side bar is 200px, but we should take some px off of it for padding.
    //header is 80px hight. take some px off for padding.
    var mapWidth;
    if(document.getElementById("aToggleSideBar").className == "collapse")
    {
            mapWidth = browserWidth - 290;
    }
    else
    {
            mapWidth = browserWidth - 50;
    }
 
    var mapHeight = browserHeight - 60;
    var sideBarHeight = browserHeight - 60;
 
    document.getElementById("map").style.width = mapWidth + "px";
    document.getElementById("leftSide").style.width = mapWidth + "px";
    document.getElementById("map").style.height = mapHeight + "px";
    document.getElementById("rightSide").style.height = sideBarHeight + "px";
    document.getElementById("sideBar").style.height = (sideBarHeight - 50)+ "px";
 
    setTimeout("updateMapSize()", 250);
 
}

Two ASP.NET features that are usually missed or misunderstood...T

2007-10-30T15:47:00Z

Enter the Tilde (~)

Browsing the asp.net forums I notice a lot of people putting the '~' (tilde) character on every control that has some sort src or href. Many think that the tilde character is a regular character that deals with file locations. Much like: /, ../, ../../ etc.

However, this little angle is actually an ASP.NET character that is a shortcut for" HttpRuntime.AppDomainAppVirtualPath. (say that 10x in a row). This property refers to the virtual application root - not the root of the web server. Remember that a Virtual Directory is in fact an Application (Server 2000 / XP). You'll notice that in Vista that the IIS team has gone the better rout and actually calls them "Applications" while still having the ability to have a virtual directory that functions as a directory.

So how do we use this character?

here are some examples.

If my Folder structure is as follow:

Website
- Images
- CSS
- Admin

I have a master page within my main website, and content pages in my Admin. One thing newer web developers will do is declare an image like:

That works for everything in the root directory, however once you get into the Admin directory - all images are broken. A way to resolve this is:

This can also lead into issues if you have a more complex structure. A quick way to resolve this is:

<asp:image id="myImage" runat="server" ImageUrl="~/Images/MyImage.png" AlternateText="My Image" />

This will always go to the root of your application and then to the Images directory. This is very useful with Hyperlinks when you are working with multiple directories.

Enter the ALT-SHIFT (Really... ALT-SHIFT)

I've heard about this but I've always just stored this away in the back of my mind. This little button combo allows you to select VERTICALLY in Visual Studio.

So, besides the nice little vertical line, what are the uses of this?

Easy way to remove a single line of characters (say Line numbers from an online post) without having to format a bunch of things
Easy way to remove comments if you commented out lines (You can use the shortcuts: CTRL E+C to commend and CTRL E+U to uncommented)
Quickly change values or remove values in XML.
Many many more.

Needless to say it's a beautiful tool that exists in Visual Studio (not just ASP.NET).

Fancy Button 2.0 (Not A Link button)

2007-10-26T22:18:25Z

I got a shwack of feedback and comments from my recent post: Get rid of regular buttons, use Link Buttons. I actually thought my solution was a great one, apparently I was a bit off base. That's not to say that my solution was totally wrong - Yes I'm stubborn... but I do admit that I am "occasionally" wrong... occasionally...

From the feedback, I decided to make a new "better looking" button. This one is about the same amount of work as the previous, but I believe this one is up to standards - which was the biggest subject from the feedback.

Another comment I got was regarding users might be confused because it was a link, and not a button. If they look the same, the user will never be able to tell. (I have yet to see a user that looks at the markup of a web application and gets their underwear in a knot because something that is supposed to be an <input /> is an <a />... though I'd really like to see it :P ).

So let's look at the markup of this new thing:

    <button id="btnTest" runat="Server" type="button" class="nButton" onserverclick="btnTest_ServerClick">
        <div class="login"></div>
        <div>This is my button</div>
    </button>

I have changed this to use the <button> element. The <button> element allows you to further style what the button looks like.

I used <div> elements so I can control the vertical alignment of the text - as well as further styling if needed.

Here's my CSS:

.nButton
{
    background-color:#84A1D6;
    border:solid 2px #415D9B;
    min-width:70px;
    height:23px;
    padding-left:3px;
    vertical-align:middle;
}
 
.nButton:hover
{
    background-color: #a0bdf2;
}
 
.nButton div
{
    float:left;
}
 
.nButton .login
{
    vertical-align:middle;
    background-image:url(Images/save.png);
    background-repeat:no-repeat;
    background-position:left top;
    width:16px;
    height:16px;
}

Very similar to my last post. This functions the same, and it has the same functionality as a regular <asp:button />.

Now let's see what it looks like:

That made my day... or did it.... Here is what I get when I surround ALL my markup with a <button>.

Now I wonder how many that read this are going to go to their websites and try it out....

Vista and the annoying French characters

2007-10-26T16:43:00Z

Since I've installed MS Vista I've been plauged with getting characters like: É, >, ^^,`` when I wanted characters like ?,|,}," (note those are the exact same keys that did this, i just toggled my settings... keep reading).

so what does this?

Pressing the left CTRL + SHIFT keys at the same time toggles a weird setting that does this. I assume it's on canadian keyboard only who have the language set to Canadian English (because all know Canadian Enlish is proper English eh?).

So if you find yourself all of a sudden churning out weird characters when you're typing along, try pressing the left CTRL + SHIFT keys at the same time to switch it back over (You might need to press them a couple times).

FireFox Add-on - ThumbStrips

2007-10-25T23:28:00Z

I just noticed this amazing Add On for Firefox. Normally I would not blog about things like this, but this addon is very useful. How often have you been trying to find a site you went to yesterday, and you spend 10 minutes clicking through each entry in your browser history, trying to find the site you were on.

What ThumbStrips does is take a quick snapshop of that site and save it so you have a visual history of that site. This is getting added right under FireBug for useful addons for Firefox.

Head on over to Firefox Addons to check this addon out.

Get rid of regular buttons, use link buttons

2007-10-25T23:21:22Z

For the past 3 years I have been pushing my managers and especially the teams I work with that the web applications we make need to be visually appealing. The graphics designers I know can do amazing things. My friend Steve Sereda is an amazing graphics designer and he created some awesome skins for me for the time we worked together.

I've done a few posts leading up to this one. It all started with my post on UpdatePanel, FireFox and the Default Button, where I talked about how to get the default button working in FireFox. At this point I was in the process of moving all buttons over to fancy LinkButtons. I then wrote about CSS Pseudo Classes and their uses (which are many), and finally I finished my last post on A LinkButton, DefaultButton, UpdatePanel and FireFox, where I discuss how to get FireFox to use a LinkButton (Anchor tag) as a default button.

So let's talk about Buttons. Buttons provide functionality, and 99% of users know when they click on a button that some sort of action is going to happen. Many buttons look like this:

Now, besides the ugly border my snipping tool puts in, that button isn't that great. But should that matter? Isn't a button there to tell the user that clicking it will invoke some sort of procedure? Correct. By general standards Buttons should invoke functions, while links should be directional. However, who said a button had to be grey and ugly?

ASP.NET has the LinkButton. It gets rendered as an <a /> (anchor) tag, and because of that we can do something like this:

Wow, that looks way better than regular buttons. What about this:

I've grown tired of using JavaScript confirm boxes. I've decided to switch to modal windows. (yes yes I know my spacing isn't right....). You can see the nice presentation, and notice the spacing... isn't that amazing?!

There's a trick to these buttons, and unfortunately you do have to put more work into them. I could make a button like this a userControl/CompositeControl, but for what I need them for, that's too much work.

Let's look at the markup I use for these buttons. This will give you more clarity when you see the CSS.

<div class="button">
   <asp:LinkButton ID="btnSave" runat="Server" CssClass="bSave" Text="Save User" OnClick="btnSave_Click"  ValidationGroup="userDetails"  UseSubmitBehavior="false" />
</div>
<div class="button">
    <asp:LinkButton ID="btnCancel" runat="Server" CssClass="bCancel" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="False"   UseSubmitBehavior="false" />
</div>
<div class="button">
    <asp:LinkButton ID="btnDeleteUser" runat="Server" CssClass="bDelete" Text="Delete" UseSubmitBehavior="false" />
</div>      
<div class="clear"></div>

You see that I have 3 div's, and in each div I have a LinkButton. Under the LinkButtons I have a single div with the "clear" class. My clear class does clear:both;. It clears the floats that all of these div's have.

Here's the CSS

.button
{
    background-color:#84A1D6;
    border:solid 2px #415D9B;
    margin:5px;
    min-width:70px;
    height:20px;
    float:left;
    padding-left:3px;
}
 
 
.button a
{
    display:block;
    padding:2px 5px 2px 20px;
    min-width:70px;
}
 
.button:hover
{
    background-color: #a0bdf2;
}
 
.button a:active
{
    border-top:solid 1px black;
}
 
 
/* Button Style */
.button a.bLogin
{
    background-image: url(Images/Login.png);
    background-position:left;
    background-repeat:no-repeat;    
}
 
.button a.bSave
{
    background-image: url(Images/Save.png);
    background-position:left;
    background-repeat:no-repeat;    
}
 
.button a.bCancel
{
    background-image: url(Images/Cancel.png);
    background-position:left;
    background-repeat:no-repeat;    
}

You can notice that each .button class is floating left. I need to use Block elements for these buttons so I can apply padding, margin's etc. You cannot do that to an inline element. Seeing they're block, I want them line up, so I float them. You can also see that my .button a contains the same width as the parent .button, this is because I want the entire button to be clickable, not just the link portion.

I am also using pseudo classes for this. You can see the :hover and the :active. This gives my buttons "hover" and "click" styles without having to code any javascript. (IE7 and FF).

And that is all you need to do.

Like I said, it's a tiny bit more markup and some small CSS, however, the outcome of this work is well worth it. It gives a whole new presentation to your application.