BS Vaporware

BS is a salesman who loves to hear himself talk. If we weren't at work, he'd be the nicest guy in the world, able to talk to anyone else about anything else. Everyone loves BS because he makes them feel special.

Underneath that charming facade is a ruthless achiever who will chase the last nickel in every deal. He will sell anything to anyone. It doesn't matter whether those who build the software can deliver. It'll be their problem to deal with it when Accounts Receivable tries to collect and keep the business afloat.

All of the in-house people constantly curse BS for overselling their capacity to build. They plan to kill him the next time he's in the office. But BS is smart. After dealing with difficult customers all day long, programmers are a piece of cake. Literally. He just brings in donuts and all sins are quickly forgotten.

Inspired by:Howard, Jack, Sean, Steve, Too Fat
Primary Motivation:maximizing his commissions
Pet Peeve:He sold it, but no one built it.
Catch Phrase:"Yes we can do it this week! With a discount!"
Biggest Accomplishment:One of his customers actually paid their bill on time.
Favorite Movie:Glengarry Glen Ross
Favorite book:Softwisdom


How BS is Drawn

BS is drawn with 23 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 BS's arguments:

Line left:89 top:27 width:0 height:90 bdrWth:0 leftWth:2 Angle:00
BS, Sales Guy
Talk left:0 top:0 width:152 bdrWth:10 font-size:15 bdrClr:mistyrose background:mistyrose text-align:center ClipWth:264
BS, Sales Guy
Person left:42 top:126 bdrWth:0
BS, Sales Guy
BackHair left:7 top:0 width:78 height:22 topLftRad:27 topRgtRad:21 botLftRad:0 botRgtRad:0 background:black overflow:visible Angle:4
BS, Sales Guy
Crown left:6 top:7 width:71 height:98 bdrWth:6 radius:0 radius:10% background:black ClipHgt:36
BS, Sales Guy
LeftEar left:0 top:43 width:11 height:18 radius:9 background:#fbc994 Angle:-15
BS, Sales Guy
RightEar left:83 top:43 width:11 height:18 radius:9 background:#fbc994 Angle:15
BS, Sales Guy
Torso left:-22 top:101 width:135 height:135 radius:37 background:royalblue
BS, Sales Guy
Face left:9 top:15 width:74 height:89 radius:0 topLftRad:15 topRgtRad:15 botLftRad:45 botRgtRad:45 background:#fbc994
BS, Sales Guy
LeftEye left:16 top:27 width:18 height:18 radius:50% background:white
BS, Sales Guy
RightEye left:39 top:27 width:18 height:18 radius:50% background:white
BS, Sales Guy
LeftPupil left:25 top:35 width:6 height:7 radius:50% background:tan
BS, Sales Guy
RightPupil left:42 top:35 width:6 height:7 radius:50% background:tan
BS, Sales Guy
LeftEyebrow left:19 top:21 width:18 height:18 bdrWth:0 topWth:2 Angle:-25
BS, Sales Guy
RightEyebrow left:36 top:21 width:18 height:18 bdrWth:0 topWth:2 Angle:25
BS, Sales Guy
Mouth left:22 top:64 width:27 height:12 bdrWth:0 leftWth:2 rgtWth:2 topWth:2 topLftRad:21 topRgtRad:21 botLftRad:0 botRgtRad:0 overflow:hidden Angle:180
BS, Sales Guy
Tongue left:-11 top:6 width:45 height:45 radius:50%
BS, Sales Guy
Nose1 left:32 top:49 width:9 height:1 bdrWth:0 topWth:2 Angle:-15
BS, Sales Guy
Nose2 left:35 top:53 width:9 height:1 bdrWth:0 topWth:2 Angle:-80
BS, Sales Guy
Earpiece left:-5 top:36 width:3 height:9 radius:50% background:black
BS, Sales Guy
Headset top:28 width:37 height:37 radius:35% Angle:-140 ClipHgt:11
BS, Sales Guy
Mike left:20 top:65 width:7 height:3 radius:50% background:black
BS, Sales Guy
Name left:3 top:109 bdrWth:0 font-size:13
BS, Sales Guy

The Resulting HTML:

<div id='Panel1' class='aaa' style='position:relative; width:166px; height:257px; border:2px solid; background-color:mistyrose; 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:90px; border-width:0; border-left-width:2px; transform:rotate(00deg); '></div>

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

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

<div id='BackHair' class='abs2' style='left:7px; top:0; width:78px; height:22px; border-top-left-radius:27px; -moz-border-top-left-radius:27px; -webkit-border-top-left-radius:27px; border-top-right-radius:21px; -moz-border-top-right-radius:21px; -webkit-border-top-right-radius:21px; 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:black; overflow:visible; transform:rotate(4deg); '></div>

<div id='Crown' class='abs2' style='left:6px; top:7px; width:71px; height:98px; border-width:6px; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-radius:10%; -moz-border-radius:10%; -webkit-border-radius:10%; background:black; clip:rect(0 9999px 36px 0); '></div>

<div id='LeftEar' class='abs2' style='left:0; top:43px; 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:83px; top:43px; 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:-22px; top:101px; width:135px; height:135px; border-radius:37px; -moz-border-radius:37px; -webkit-border-radius:37px; background:royalblue; '></div>

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

<div id='LeftEye' class='abs2' style='left:16px; top:27px; width:18px; height:18px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; '></div>

<div id='RightEye' class='abs2' style='left:39px; top:27px; width:18px; height:18px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; '></div>

<div id='LeftPupil' class='abs2' style='left:25px; top:35px; width:6px; height:7px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:tan; '></div>

<div id='RightPupil' class='abs2' style='left:42px; top:35px; width:6px; height:7px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:tan; '></div>

<div id='LeftEyebrow' class='abs2' style='left:19px; top:21px; width:18px; height:18px; border-width:0; border-top-width:2px; transform:rotate(-25deg); '></div>

<div id='RightEyebrow' class='abs2' style='left:36px; top:21px; width:18px; height:18px; border-width:0; border-top-width:2px; transform:rotate(25deg); '></div>

<div id='Mouth' class='abs2' style='left:22px; top:64px; width:27px; height:12px; border-width:0; border-left-width:2px; border-right-width:2px; border-top-width:2px; border-top-left-radius:21px; -moz-border-top-left-radius:21px; -webkit-border-top-left-radius:21px; border-top-right-radius:21px; -moz-border-top-right-radius:21px; -webkit-border-top-right-radius:21px; 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; overflow:hidden; transform:rotate(180deg); '>

<div id='Tongue' class='abs2' style='left:-11px; top:6px; width:45px; height:45px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; '></div>

</div> <!close Mouth>

<div id='Nose1' class='abs2' style='left:32px; top:49px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-15deg); '></div>

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

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

<div id='Headset' class='abs2' style='top:28px; 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:20px; top:65px; 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='abs2' style='left:3px; top:109px; border-width:0; font-size:13px; font-weight:bold; '>,&nbspSales&nbspGuy</div>

</div> <!close Person>

</div> <!close Panel1 ()>



All email answered.  edw519 at gmail
Copyright © 2017 Ed Weissman