Eddie Ottic

Eddie is a Technical Lead whose name perfectly describes what he sees at work every day.

His job is to help Pam define the "Big Fat What", then to determine the "Big Fat How", assign the work to programmers, and give promises to Dartboard.

But things rarely work out that way. Dartboard wants promise dates before Pam documents what the users need. Pam doesn't have time to write Business Requirements because she has too many meetings. Users don't want their needs documented so it will be easier to change their minds later. The programmers don't want specs because they want the freedom to architect it their own way. And managers don't understand why any of this is needed because now, "We're agile."

Eddie's caught in the middle with little influence on the value of anything the team produces. So he just "gets along". Meanwhile, he's found the perfect outlet for his creativity and thirst for progress: his comic, The Software Prevention Team.

Inspired by:myself, because I don't have any real friends
Primary Motivation:doing a happy dance when something works the 1st time
Pet Peeve:managers who don't know who to build software
Catch Phrase:"Looks like I picked a bad week to quit unit testing."
Biggest Accomplishment:never missed a day of work
Favorite Movie:Airplane
Favorite book:Letters to the Eddietor


How Eddie is Drawn

Eddie is drawn with 26 rectangles, each with a border and some with rounded corners or slanted angles. These rectangles are described by data stored as arguments that are converted by software into HTML that your browser displays as pictures. Check out this Javascript example of code you can play with to alter my characters or create your own. Here are Eddie's arguments:

Line left:89 top:27 width:0 height:105 bdrWth:0 leftWth:2
Eddie, Tech Lead
Talk left:0 top:0 width:152 bdrWth:10 font-size:15 bdrClr:skyblue background:skyblue text-align:center ClipWth:264
Eddie, Tech Lead
Person left:35 top:138 bdrWth:0
Eddie, Tech Lead
BackHair left:6 top:0 width:84 height:41 bdrWth:6 botWth:0 topLftRad:42 topRgtRad:42 ClipHgt:40
Eddie, Tech Lead
LeftEar left:0 top:37 width:11 height:18 radius:9 background:#fbc994 Angle:-15
Eddie, Tech Lead
RightEar left:96 top:37 width:11 height:18 radius:9 background:#fbc994 Angle:15
Eddie, Tech Lead
Torso left:-18 top:89 width:139 height:135 radius:37 background:mediumseagreen
Eddie, Tech Lead
Face left:9 top:3 width:89 height:89 radius:45 background:#fbc994
Eddie, Tech Lead
LeftEye left:22 top:40 width:4 height:4 radius:50% background:cyan
Eddie, Tech Lead
RightEye left:60 top:40 width:4 height:4 radius:50% background:cyan
Eddie, Tech Lead
Mouth left:34 top:65 width:20 height:16 radius:50% background:lightcoral
Eddie, Tech Lead
Nose1 left:40 top:55 width:12 height:1 bdrWth:0 topWth:2 Angle:80
Eddie, Tech Lead
Nose2 left:39 top:60 width:9 height:1 bdrWth:0 topWth:2 Angle:10
Eddie, Tech Lead
Earpiece left:-4 top:42 width:3 height:9 bdrWth:1 radius:50% background:black
Eddie, Tech Lead
Headset left:0 top:34 width:37 height:37 radius:35% Angle:-140 ClipHgt:11
Eddie, Tech Lead
Mike left:23 top:70 width:7 height:3 radius:50% background:black
Eddie, Tech Lead
Glasses1 left:0 top:36 width:12 height:0 bdrWth:0 topWth:2
Eddie, Tech Lead
Glasses2 left:10 top:32 width:29 height:24 radius:40%
Eddie, Tech Lead
Glasses3 left:49 top:32 width:29 height:24 radius:40%
Eddie, Tech Lead
Glasses4 left:77 top:36 width:12 height:0 bdrWth:0 topWth:2 background:black Angle:-0
Eddie, Tech Lead
GlassTape left:37 top:33 width:12 height:6 background:white
Eddie, Tech Lead
FrontHair1 left:10 top:5 width:72 height:16 radius:50% background:black Angle:3
Eddie, Tech Lead
FrontHair2 left:-5 top:17 width:24 height:5 radius:50% background:black Angle:-55
Eddie, Tech Lead
FrontHair3 left:70 top:20 width:24 height:5 radius:50% background:black Angle:60
Eddie, Tech Lead
FrontHair4 left:4 top:0 width:89 height:45 bdrWth:6 botWth:0 topLftRad:52 topRgtRad:52 background:black ClipHgt:22
Eddie, Tech Lead
Name left:-4 top:100 bdrWth:0 font-size:13
Eddie, Tech Lead

The Resulting HTML:

<div id='Panel1' class='aaa' style='position:relative; width:166px; height:257px; border:2px solid; background-color:skyblue; color:black; display:inline-block; vertical-align:top; font-family:Ssans-serif,cursive,sans-serif; margin-right:0px; overflow:hidden; margin-bottom:5px; '>

<div id='Line' class='abs2' style='left:89px; top:27px; width:0; height:105px; border-width:0; border-left-width:2px; '></div>

<div id='Talk' class='abs2' style='left:0; top:0; width:152px; border-width:10px; font-size:15px; border-color:skyblue; background:skyblue; text-align:center; clip:rect(0 264px 9999px 0); font-weight:bold; '> BLAH BLAH BLAH</div>

<div id='Person' class='abs2' style='left:35px; top:138px; border-width:0; '>

<div id='BackHair' class='abs2' style='left:6px; top:0; width:84px; height:41px; border-width:6px; border-bottom-width:0; border-top-left-radius:42px; -moz-border-top-left-radius:42px; -webkit-border-top-left-radius:42px; border-top-right-radius:42px; -moz-border-top-right-radius:42px; -webkit-border-top-right-radius:42px; clip:rect(0 9999px 40px 0); '></div>

<div id='LeftEar' class='abs2' style='left:0; top:37px; width:11px; height:18px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; background:#fbc994; transform:rotate(-15deg); '></div>

<div id='RightEar' class='abs2' style='left:96px; top:37px; width:11px; height:18px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; background:#fbc994; transform:rotate(15deg); '></div>

<div id='Torso' class='abs2' style='left:-18px; top:89px; width:139px; height:135px; border-radius:37px; -moz-border-radius:37px; -webkit-border-radius:37px; background:mediumseagreen; '></div>

<div id='Face' class='abs2' style='left:9px; top:3px; width:89px; height:89px; border-radius:45px; -moz-border-radius:45px; -webkit-border-radius:45px; background:#fbc994; '>

<div id='LeftEye' class='abs2' style='left:22px; top:40px; width:4px; height:4px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:cyan; '></div>

<div id='RightEye' class='abs2' style='left:60px; top:40px; width:4px; height:4px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:cyan; '></div>

<div id='Mouth' class='abs2' style='left:34px; top:65px; width:20px; height:16px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:lightcoral; '></div>

<div id='Nose1' class='abs2' style='left:40px; top:55px; width:12px; height:2px; border-width:0; border-top-width:2px; transform:rotate(80deg); '></div>

<div id='Nose2' class='abs2' style='left:39px; top:60px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(10deg); '></div>

<div id='Earpiece' class='abs2' style='left:-4px; top:42px; width:3px; height:9px; border-width:2px solid; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; '></div>

<div id='Headset' class='abs2' style='left:0; top:34px; width:37px; height:37px; border-radius:35%; -moz-border-radius:35%; -webkit-border-radius:35%; transform:rotate(-140deg); clip:rect(0 9999px 11px 0); '></div>

<div id='Mike' class='abs2' style='left:23px; top:70px; width:7px; height:3px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; '></div>

<div id='Glasses1' class='abs2' style='left:0; top:36px; width:12px; height:0; border-width:0; border-top-width:2px; '></div>

<div id='Glasses2' class='abs2' style='left:10px; top:32px; width:29px; height:24px; border-radius:40%; -moz-border-radius:40%; -webkit-border-radius:40%; '></div>

<div id='Glasses3' class='abs2' style='left:49px; top:32px; width:29px; height:24px; border-radius:40%; -moz-border-radius:40%; -webkit-border-radius:40%; '></div>

<div id='Glasses4' class='abs2' style='left:77px; top:36px; width:12px; height:0; border-width:0; border-top-width:2px; background:black; transform:rotate(-0deg); '></div>

<div id='GlassTape' class='abs2' style='left:37px; top:33px; width:12px; height:6px; background:white; '></div>

<div id='FrontHair1' class='abs2' style='left:10px; top:5px; width:72px; height:16px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(3deg); '></div>

<div id='FrontHair2' class='abs2' style='left:-5px; top:17px; width:24px; height:5px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-55deg); '></div>

<div id='FrontHair3' class='abs2' style='left:70px; top:20px; width:24px; height:5px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(60deg); '></div>

</div> <!close Face>

<div id='FrontHair4' class='abs2' style='left:4px; top:0; width:89px; height:45px; border-width:6px; border-bottom-width:0; border-top-left-radius:52px; -moz-border-top-left-radius:52px; -webkit-border-top-left-radius:52px; border-top-right-radius:52px; -moz-border-top-right-radius:52px; -webkit-border-top-right-radius:52px; background:black; clip:rect(0 9999px 22px 0); '></div>

<div id='Name' class='abs2' style='left:-4px; top:100px; border-width:0; font-size:13px; font-weight:bold; '>,&nbspTech&nbspLead</div>

</div> <!close Person>

</div> <!close Panel1 ()>