COMICS      BOOKS      BIO 

Sue Doe

Sue is a developer who has two career goals: Direct and Deposit.

She loves writing software almost as much as she loves going home at 5. She's an excellent programmer who's very familiar with the business and users but has grown cynical of corporate culture. When things become illogical (almost daily), she puts it out of her mind and gets back to work.

She finds refuge in code over which she has some control, unlike most people. If only she could write an app that made non-programmers leave her alone! Or at least make sense when they didn't.

She fiercely guards the code and people important to her and pretty much ignores everything else. She's become the unofficial class clown in meetings without even trying. She says what everyone's thinking but is afraid to say themselves. Things like, "What does VSM mean? Value Stream Mapping? Or Very Stupid Management?"

Inspired by:Leslie, Wendy, Terri, Joyce, Jennifer
Primary Motivation:keep working no matter what else is happening
Pet Peeve:corporate idiocy
Catch Phrase:"Take a chill pill. It's only ones and zeroes."
Biggest Accomplishment:building an ecommerce site faster than 12 consultants
Favorite Movie:Thelma and Louise
Favorite book:Softwisdom


How Sue is Drawn

Sue is drawn with 42 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 Sue's arguments:

Line left:93 top:28 width:0 height:104 bdrWth:0 leftWth:2 Angle:00
Sue, Dev
Talk left:0 top:0 width:158 bdrWth:10 font-size:15 bdrClr:mediumaquamarine background:mediumaquamarine text-align:center ClipWth:275
Sue, Dev
Person left:21 top:112 bdrWth:0
Sue, Dev
BackHair1 left:28 top:26 width:79 height:79 bdrWth:6 botWth:0 topLftRad:38 topRgtRad:38 bdrClr:black background:black ClipHgt:47
Sue, Dev
BackHair2 left:13 top:87 width:57 height:57 radius:50% background:black Angle:140 ClipHgt:25
Sue, Dev
BackHair3 left:9 top:76 width:50 height:50 radius:50% background:black Angle:130 ClipHgt:25
Sue, Dev
BackHair4 left:6 top:54 width:50 height:50 radius:50% background:black Angle:120 ClipHgt:25
Sue, Dev
BackHair5 left:76 top:81 width:57 height:57 radius:50% background:black Angle:-130 ClipHgt:25
Sue, Dev
BackHair6 left:87 top:76 width:50 height:50 radius:50% background:black Angle:-130 ClipHgt:25
Sue, Dev
BackHair7 left:87 top:54 width:50 height:50 radius:50% background:black Angle:-130 ClipHgt:25
Sue, Dev
LeftEar left:16 top:66 width:11 height:19 radius:9 background:#cb9767 Angle:-15
Sue, Dev
RightEar left:116 top:66 width:11 height:19 radius:9 background:#cb9767 Angle:15
Sue, Dev
LeftEaring left:17 top:84 width:7 height:7 radius:50% background:mediumblue
Sue, Dev
RightEaring left:118 top:84 width:7 height:7 radius:50% background:mediumblue
Sue, Dev
Torso left:7 top:118 width:125 height:125 radius:47 background:salmon
Sue, Dev
Face left:25 top:36 width:93 height:93 radius:47 background:#cb9767
Sue, Dev
LeftEye left:17 top:32 width:23 height:16 radius:50% background:white overflow:hidden
Sue, Dev
LeftEyelid left:0 top:6 width:991563 height:0 bdrWth:0 topWth:2
Sue, Dev
LeftPupil left:7 top:6 width:9 height:4 topLftRad:0 topRgtRad:0 botLftRad:22 botRgtRad:22
Sue, Dev
Eyelash1 left:13 top:34 width:16 height:1 bdrWth:0 topWth:2 Angle:40
Sue, Dev
Eyelash2 left:9 top:35 width:16 height:1 bdrWth:0 topWth:2 Angle:30
Sue, Dev
Eyelash3 left:9 top:38 width:9 height:1 bdrWth:0 topWth:2 Angle:10
Sue, Dev
RightEye left:48 top:32 width:23 height:16 radius:50% background:white overflow:hidden
Sue, Dev
RightEyelid left:0 top:6 width:991563 height:0 bdrWth:0 topWth:2
Sue, Dev
RightPupil left:4 top:6 width:9 height:4 topLftRad:0 topRgtRad:0 botLftRad:22 botRgtRad:22
Sue, Dev
Eyelash4 left:63 top:34 width:16 height:1 bdrWth:0 topWth:2 Angle:-40
Sue, Dev
Eyelash5 left:66 top:35 width:16 height:1 bdrWth:0 topWth:2 Angle:-30
Sue, Dev
Eyelash6 left:72 top:38 width:9 height:1 bdrWth:0 topWth:2 Angle:-10
Sue, Dev
LeftEyebrow left:23 top:25 width:23 height:16 bdrWth:0 topWth:2 Angle:-20
Sue, Dev
RightEyebrow left:47 top:25 width:23 height:16 bdrWth:0 topWth:2 Angle:20
Sue, Dev
Mouth left:32 top:67 width:28 height:13 topLftRad:22 topRgtRad:22 botLftRad:0 botRgtRad:0 background:lightcoral overflow:hidden
Sue, Dev
Tongue1 left:0 top:3 width:141 height:0 bdrWth:0 topWth:2
Sue, Dev
Tongue2 left:6 top:7 width:13 height:13 radius:50% background:firebrick
Sue, Dev
Nose1 left:42 top:54 width:13 height:1 bdrWth:0 topWth:2 Angle:80
Sue, Dev
Nose2 left:41 top:58 width:9 height:1 bdrWth:0 topWth:2 Angle:20
Sue, Dev
Earpiece left:-4 top:40 width:3 height:9 radius:50% background:black
Sue, Dev
Headset left:1 top:32 width:39 height:39 radius:35% Angle:-140 ClipHgt:11
Sue, Dev
Mike left:23 top:70 width:7 height:3 radius:50% background:black
Sue, Dev
FrontHair1 left:0 top:0 width:60 height:63 radius:50% background:black Angle:140 ClipHgt:16
Sue, Dev
FrontHair2 left:83 top:0 width:60 height:63 radius:50% background:black Angle:-140 ClipHgt:16
Sue, Dev
FrontHair3 left:48 top:6 width:47 height:47 radius:50% background:black Angle:180 ClipHgt:23
Sue, Dev
Name left:60 top:138 bdrWth:0 font-size:14
Sue, Dev

The Resulting HTML Code

<div id='Panel1' class='aaa' style='position:relative; width:178px; height:268px; border:2px solid; background-color:mediumaquamarine; color:black; display:inline-block; vertical-align:top; font-family:Comic Sans MS,cursive,sans-serif; margin-right:10px; overflow:hidden; margin-bottom:5px; '>

<div id='Line' class='abs' style='left:93px; top:28px; width:0; height:104px; border-width:0; border-left-width:2px; transform:rotate(00deg); '></div>

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

<div id='Person' class='abs' style='left:21px; top:112px; border-width:0; '>

<div id='BackHair1' class='abs' style='left:28px; top:26px; width:79px; height:79px; border-width:6px; border-bottom-width:0; border-top-left-radius:38px; -moz-border-top-left-radius:38px; -webkit-border-top-left-radius:38px; border-top-right-radius:38px; -moz-border-top-right-radius:38px; -webkit-border-top-right-radius:38px; border-color:black; background:black; clip:rect(0 9999px 47px 0); '></div>

<div id='BackHair2' class='abs' style='left:13px; top:87px; width:57px; height:57px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(140deg); clip:rect(0 9999px 25px 0); '></div>

<div id='BackHair3' class='abs' style='left:9px; top:76px; width:50px; height:50px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(130deg); clip:rect(0 9999px 25px 0); '></div>

<div id='BackHair4' class='abs' style='left:6px; top:54px; width:50px; height:50px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(120deg); clip:rect(0 9999px 25px 0); '></div>

<div id='BackHair5' class='abs' style='left:76px; top:81px; width:57px; height:57px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-130deg); clip:rect(0 9999px 25px 0); '></div>

<div id='BackHair6' class='abs' style='left:87px; top:76px; width:50px; height:50px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-130deg); clip:rect(0 9999px 25px 0); '></div>

<div id='BackHair7' class='abs' style='left:87px; top:54px; width:50px; height:50px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-130deg); clip:rect(0 9999px 25px 0); '></div>

<div id='LeftEar' class='abs' style='left:16px; top:66px; width:11px; height:19px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; background:#cb9767; transform:rotate(-15deg); '></div>

<div id='RightEar' class='abs' style='left:116px; top:66px; width:11px; height:19px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; background:#cb9767; transform:rotate(15deg); '></div>

<div id='LeftEaring' class='abs' style='left:17px; top:84px; width:7px; height:7px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:mediumblue; '></div>

<div id='RightEaring' class='abs' style='left:118px; top:84px; width:7px; height:7px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:mediumblue; '></div>

<div id='Torso' class='abs' style='left:7px; top:118px; width:125px; height:125px; border-radius:47px; -moz-border-radius:47px; -webkit-border-radius:47px; background:salmon; '></div>

<div id='Face' class='abs' style='left:25px; top:36px; width:93px; height:93px; border-radius:47px; -moz-border-radius:47px; -webkit-border-radius:47px; background:#cb9767; '>

<div id='LeftEye' class='abs' style='left:17px; top:32px; width:23px; height:16px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; overflow:hidden; margin-bottom:5px; '>

<div id='LeftEyelid' class='abs' style='left:0; top:6px; width:991563px; height:0; border-width:0; border-top-width:2px; '></div>

<div id='LeftPupil' class='abs' style='left:7px; top:6px; width:9px; height:4px; border-top-left-radius:0; -moz-border-top-left-radius:0; -webkit-border-top-left-radius:0; border-top-right-radius:0; -moz-border-top-right-radius:0; -webkit-border-top-right-radius:0; border-bottom-left-radius:22px; -moz-border-bottom-left-radius:22px; -webkit-border-bottom-left-radius:22px; border-bottom-right-radius:22px; -moz-border-bottom-right-radius:22px; -webkit-border-bottom-right-radius:22px; '></div>

</div> <!close LeftEye>

<div id='Eyelash1' class='abs' style='left:13px; top:34px; width:16px; height:2px; border-width:0; border-top-width:2px; transform:rotate(40deg); '></div>

<div id='Eyelash2' class='abs' style='left:9px; top:35px; width:16px; height:2px; border-width:0; border-top-width:2px; transform:rotate(30deg); '></div>

<div id='Eyelash3' class='abs' style='left:9px; top:38px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(10deg); '></div>

<div id='RightEye' class='abs' style='left:48px; top:32px; width:23px; height:16px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; overflow:hidden; margin-bottom:5px; '>

<div id='RightEyelid' class='abs' style='left:0; top:6px; width:991563px; height:0; border-width:0; border-top-width:2px; '></div>

<div id='RightPupil' class='abs' style='left:4px; top:6px; width:9px; height:4px; border-top-left-radius:0; -moz-border-top-left-radius:0; -webkit-border-top-left-radius:0; border-top-right-radius:0; -moz-border-top-right-radius:0; -webkit-border-top-right-radius:0; border-bottom-left-radius:22px; -moz-border-bottom-left-radius:22px; -webkit-border-bottom-left-radius:22px; border-bottom-right-radius:22px; -moz-border-bottom-right-radius:22px; -webkit-border-bottom-right-radius:22px; '></div>

</div> <!close RightEye>

<div id='Eyelash4' class='abs' style='left:63px; top:34px; width:16px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-40deg); '></div>

<div id='Eyelash5' class='abs' style='left:66px; top:35px; width:16px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-30deg); '></div>

<div id='Eyelash6' class='abs' style='left:72px; top:38px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-10deg); '></div>

<div id='LeftEyebrow' class='abs' style='left:23px; top:25px; width:23px; height:16px; border-width:0; border-top-width:2px; transform:rotate(-20deg); '></div>

<div id='RightEyebrow' class='abs' style='left:47px; top:25px; width:23px; height:16px; border-width:0; border-top-width:2px; transform:rotate(20deg); '></div>

<div id='Mouth' class='abs' style='left:32px; top:67px; width:28px; height:13px; border-top-left-radius:22px; -moz-border-top-left-radius:22px; -webkit-border-top-left-radius:22px; border-top-right-radius:22px; -moz-border-top-right-radius:22px; -webkit-border-top-right-radius:22px; border-bottom-left-radius:0; -moz-border-bottom-left-radius:0; -webkit-border-bottom-left-radius:0; border-bottom-right-radius:0; -moz-border-bottom-right-radius:0; -webkit-border-bottom-right-radius:0; background:lightcoral; overflow:hidden; margin-bottom:5px; '>

<div id='Tongue1' class='abs' style='left:0; top:3px; width:141px; height:0; border-width:0; border-top-width:2px; '></div>

<div id='Tongue2' class='abs' style='left:6px; top:7px; width:13px; height:13px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:firebrick; '></div>

</div> <!close Mouth>

<div id='Nose1' class='abs' style='left:42px; top:54px; width:13px; height:2px; border-width:0; border-top-width:2px; transform:rotate(80deg); '></div>

<div id='Nose2' class='abs' style='left:41px; top:58px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(20deg); '></div>

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

<div id='Headset' class='abs' style='left:2px; top:32px; width:39px; height:39px; 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='abs' style='left:23px; top:70px; width:7px; height:3px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; '></div>

</div> <!close Face>

<div id='FrontHair1' class='abs' style='left:0; top:0; width:60px; height:63px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(140deg); clip:rect(0 9999px 16px 0); '></div>

<div id='FrontHair2' class='abs' style='left:83px; top:0; width:60px; height:63px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-140deg); clip:rect(0 9999px 16px 0); '></div>

<div id='FrontHair3' class='abs' style='left:48px; top:6px; width:47px; height:47px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(180deg); clip:rect(0 9999px 23px 0); '></div>

<div id='Name' class='abs' style='left:60px; top:138px; border-width:0; font-size:14px; font-weight:bold; '>,&nbspDev</div>

</div> <!close Person>

</div> <!close Panel1 ()>