COMICS      BOOKS      BIO 

Josh 127.0.0.1

Josh is a systems administrator. His job is to keep the I.T. infrastructure up and running. He loves to tinker and has the perfect mentality for this job.

Josh loves what he does so much he wants everyone else to understand as well. So whenever he fixes something, he explains what he's doing every step of the way. It's almost like your mechanic saying, "All I have to do is link the transmission to the router pin, restart the electronic ignition services, reboot the fuel filter, and crosslink the accelerator to the MP3 player to make this thing microwave popcorn!" Everyone smiles politely thinking, "Just fix it. Please."

Josh loves being on the team and really appreciates management's uncanny ability to make everything 10 times as complex as needed. That keeps him busy until the next management team changes it all over again.

Inspired by:Gregg, Chuck, Robert, Tom, Paul
Primary Motivation:optimizing everything
Pet Peeve:people who don't understand how technology works
Catch Phrase:"I just have to tune this one little thing. Oops."
Biggest Accomplishment:never had down time more than an hour
Favorite Movie:The Matrix
Favorite book:The Corporate Programmer Survival Guide


How Josh is Drawn

Josh 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 Josh's arguments:

Line left:93 top:28 width:0 height:95 bdrWth:0 leftWth:2 Angle:00
Josh, SysAdmin
Talk left:0 top:0 width:158 bdrWth:10 font-size:15 bdrClr:navajowhite background:navajowhite text-align:center ClipWth:275
Josh, SysAdmin
Person left:21 top:135 bdrWth:0
Josh, SysAdmin
BackHair1 left:0 top:11 width:63 height:32 botWth:0 topLftRad:51 topRgtRad:51 background:black Angle:-85 ClipHgt:17
Josh, SysAdmin
BackHair2 left:13 top:3 width:63 height:32 botWth:0 topLftRad:51 topRgtRad:51 background:black Angle:-60 ClipHgt:17
Josh, SysAdmin
BackHair3 left:32 top:0 width:63 height:32 botWth:0 topLftRad:51 topRgtRad:51 background:black Angle:-50 ClipHgt:17
Josh, SysAdmin
BackHair4 left:48 top:3 width:63 height:32 botWth:0 topLftRad:51 topRgtRad:51 background:black Angle:-35 ClipHgt:17
Josh, SysAdmin
BackHair5 left:67 top:9 width:63 height:32 botWth:0 topLftRad:51 topRgtRad:51 background:black Angle:-30 ClipHgt:17
Josh, SysAdmin
BackHair6 left:80 top:22 width:63 height:32 botWth:0 topLftRad:51 topRgtRad:51 background:black Angle:-50 ClipHgt:17
Josh, SysAdmin
BackHair7 left:89 top:38 width:63 height:32 botWth:0 topLftRad:51 topRgtRad:51 background:black Angle:-75 ClipHgt:17
Josh, SysAdmin
LeftEar left:17 top:48 width:11 height:19 radius:9 background:#fbc994 Angle:-15
Josh, SysAdmin
RightEar left:118 top:48 width:11 height:19 radius:9 background:#fbc994 Angle:15
Josh, SysAdmin
Torso left:0 top:102 width:141 height:141 radius:39 background:skyblue
Josh, SysAdmin
Face left:26 top:19 width:89 height:89 radius:32 background:#fbc994
Josh, SysAdmin
LeftEye left:20 top:28 width:19 height:19 radius:50% background:white
Josh, SysAdmin
RightEye left:51 top:28 width:19 height:19 radius:50% background:white
Josh, SysAdmin
LeftPupil left:28 top:36 width:3 height:4 radius:50%
Josh, SysAdmin
RightPupil left:58 top:36 width:3 height:4 radius:50%
Josh, SysAdmin
LeftEyebrow left:14 top:20 width:28 height:28 radius:50% Angle:-15 ClipHgt:7
Josh, SysAdmin
RightEyebrow left:47 top:20 width:28 height:28 radius:50% Angle:15 ClipHgt:7
Josh, SysAdmin
Mouth left:32 top:66 width:28 height:11 radius:50% background:lightcoral
Josh, SysAdmin
Nose left:39 top:51 width:12 height:9 topWth:0 botLftRad:9 botRgtRad:9
Josh, SysAdmin
Earpiece left:92 top:39 width:3 height:9 radius:50% background:black
Josh, SysAdmin
Headset left:52 top:35 width:39 height:39 radius:35% Angle:130 ClipHgt:11
Josh, SysAdmin
Mike left:63 top:75 width:7 height:3 radius:50% background:black
Josh, SysAdmin
Name left:17 top:112 bdrWth:0 font-size:14
Josh, SysAdmin

The Resulting HTML Code

<div id='Panel1' class='aaa' style='position:relative; width:178px; height:268px; border:2px solid; background-color:navajowhite; 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:95px; 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:navajowhite; background:navajowhite; 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:135px; border-width:0; '>

<div id='BackHair1' class='abs' style='left:0; top:11px; width:63px; height:32px; border-bottom-width:0; border-top-left-radius:51px; -moz-border-top-left-radius:51px; -webkit-border-top-left-radius:51px; border-top-right-radius:51px; -moz-border-top-right-radius:51px; -webkit-border-top-right-radius:51px; background:black; transform:rotate(-85deg); clip:rect(0 9999px 17px 0); '></div>

<div id='BackHair2' class='abs' style='left:13px; top:3px; width:63px; height:32px; border-bottom-width:0; border-top-left-radius:51px; -moz-border-top-left-radius:51px; -webkit-border-top-left-radius:51px; border-top-right-radius:51px; -moz-border-top-right-radius:51px; -webkit-border-top-right-radius:51px; background:black; transform:rotate(-60deg); clip:rect(0 9999px 17px 0); '></div>

<div id='BackHair3' class='abs' style='left:32px; top:0; width:63px; height:32px; border-bottom-width:0; border-top-left-radius:51px; -moz-border-top-left-radius:51px; -webkit-border-top-left-radius:51px; border-top-right-radius:51px; -moz-border-top-right-radius:51px; -webkit-border-top-right-radius:51px; background:black; transform:rotate(-50deg); clip:rect(0 9999px 17px 0); '></div>

<div id='BackHair4' class='abs' style='left:48px; top:3px; width:63px; height:32px; border-bottom-width:0; border-top-left-radius:51px; -moz-border-top-left-radius:51px; -webkit-border-top-left-radius:51px; border-top-right-radius:51px; -moz-border-top-right-radius:51px; -webkit-border-top-right-radius:51px; background:black; transform:rotate(-35deg); clip:rect(0 9999px 17px 0); '></div>

<div id='BackHair5' class='abs' style='left:67px; top:9px; width:63px; height:32px; border-bottom-width:0; border-top-left-radius:51px; -moz-border-top-left-radius:51px; -webkit-border-top-left-radius:51px; border-top-right-radius:51px; -moz-border-top-right-radius:51px; -webkit-border-top-right-radius:51px; background:black; transform:rotate(-30deg); clip:rect(0 9999px 17px 0); '></div>

<div id='BackHair6' class='abs' style='left:80px; top:22px; width:63px; height:32px; border-bottom-width:0; border-top-left-radius:51px; -moz-border-top-left-radius:51px; -webkit-border-top-left-radius:51px; border-top-right-radius:51px; -moz-border-top-right-radius:51px; -webkit-border-top-right-radius:51px; background:black; transform:rotate(-50deg); clip:rect(0 9999px 17px 0); '></div>

<div id='BackHair7' class='abs' style='left:89px; top:38px; width:63px; height:32px; border-bottom-width:0; border-top-left-radius:51px; -moz-border-top-left-radius:51px; -webkit-border-top-left-radius:51px; border-top-right-radius:51px; -moz-border-top-right-radius:51px; -webkit-border-top-right-radius:51px; background:black; transform:rotate(-75deg); clip:rect(0 9999px 17px 0); '></div>

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

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

<div id='Torso' class='abs' style='left:0; top:102px; width:141px; height:141px; border-radius:39px; -moz-border-radius:39px; -webkit-border-radius:39px; background:skyblue; '></div>

<div id='Face' class='abs' style='left:26px; top:19px; width:89px; height:89px; border-radius:32px; -moz-border-radius:32px; -webkit-border-radius:32px; background:#fbc994; '>

<div id='LeftEye' class='abs' style='left:20px; top:28px; width:19px; height:19px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; '></div>

<div id='RightEye' class='abs' style='left:51px; top:28px; width:19px; height:19px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; '></div>

<div id='LeftPupil' class='abs' style='left:28px; top:36px; width:3px; height:4px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; '></div>

<div id='RightPupil' class='abs' style='left:58px; top:36px; width:3px; height:4px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; '></div>

<div id='LeftEyebrow' class='abs' style='left:14px; top:20px; width:28px; height:28px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; transform:rotate(-15deg); clip:rect(0 9999px 7px 0); '></div>

<div id='RightEyebrow' class='abs' style='left:47px; top:20px; width:28px; height:28px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; transform:rotate(15deg); clip:rect(0 9999px 7px 0); '></div>

<div id='Mouth' class='abs' style='left:32px; top:66px; width:28px; height:11px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:lightcoral; '></div>

<div id='Nose' class='abs' style='left:39px; top:51px; width:12px; height:9px; border-top-width:0; border-bottom-left-radius:9px; -moz-border-bottom-left-radius:9px; -webkit-border-bottom-left-radius:9px; border-bottom-right-radius:9px; -moz-border-bottom-right-radius:9px; -webkit-border-bottom-right-radius:9px; '></div>

<div id='Earpiece' class='abs' style='left:92px; top:39px; 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:52px; top:35px; width:39px; height:39px; border-radius:35%; -moz-border-radius:35%; -webkit-border-radius:35%; transform:rotate(130deg); clip:rect(0 9999px 11px 0); '></div>

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

</div> <!close Face>

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

</div> <!close Person>

</div> <!close Panel1 ()>