Dunning Kruger

Dunning is an I.T. manager. He used to be a programmer, but his software had so many bugs, he had to be removed from Development. It was too hard to get approval for two new H.R. reqs (a manager and a programmer), so they brought in a programming contractor without benefits and promoted Dunning into management, limiting his potential damage.

His name reminds others of the Dunning-Kruger Effect: "a cognitive bias in which low-ability individuals suffer from illusory superiority, mistakenly assessing their ability as much higher than it really is." He claims that this is a coincidence and the idea of replacing competence with confidence has nothing to do with him. He is absolutely certain about that.

He's more concerned with timesheet adherence, H.R. rules, and All-Hands meetings attendance than actually getting any work done. He thinks that "completion" means checking a box in Jira or Visual Studio instead of deploying software that works in production for more than 5 minutes. Most of all, he doesn't understand when others challenge him because "not being a team player" is the greatest sin of all.

Inspired by:Too many to mention. Too easy to forget.
Primary Motivation:lasting until his next bonus
Pet Peeves:Facts. Data. Logic.
Catch Phrase:"You're not a team player!"
Biggest Accomplishment:none
Favorite Movie:Dumb and Dumber (but doesn't get why people laugh)
Favorite book:anything not written by Ed Weissman


How Dunning is Drawn

Dunning is drawn with 30 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 Dunning's arguments:

Line left:89 top:27 width:0 height:102 bdrWth:0 leftWth:2
Dunning, Manager
Talk left:0 top:0 width:152 bdrWth:10 font-size:15 bdrClr:paleturquoise background:paleturquoise text-align:center ClipWth:264
Dunning, Manager
Person left:35 top:134 bdrWth:0
Dunning, Manager
BackHair left:4 top:0 width:88 height:45 bdrWth:6 botWth:0 ClipHgt:120
Dunning, Manager
LeftEar left:0 top:37 width:18 height:18 radius:50% background:#fbc994
Dunning, Manager
RightEar left:89 top:37 width:18 height:18 radius:50% background:#fbc994
Dunning, Manager
Neck left:37 top:89 width:31 height:10 leftWth:2 rgtWth:2 topWth:0 botWth:0 background:#fbc994
Dunning, Manager
Torso left:-16 top:99 width:141 height:300 radius:31 background:lightgray
Dunning, Manager
Face left:9 top:3 width:89 height:89 background:#fbc994
Dunning, Manager
LeftEye left:21 top:28 width:15 height:15 radius:50% background:white
Dunning, Manager
RightEye left:53 top:28 width:15 height:15 radius:50% background:white
Dunning, Manager
LeftCornea left:24 top:35 width:4 height:4 radius:50% background:black
Dunning, Manager
RightCornea left:60 top:34 width:4 height:4 radius:50% background:black
Dunning, Manager
LeftEyebrow left:19 top:19 width:22 height:22 bdrWth:0 topWth:4 Angle:-15
Dunning, Manager
RightEyebrow left:48 top:19 width:22 height:22 bdrWth:0 topWth:4 Angle:20
Dunning, Manager
MouthTop left:25 top:66 width:36 height:36 radius:50% background:lightcoral ClipHgt:16
Dunning, Manager
MouthBottom left:13 top:77 width:60 height:60 radius:50% background:#fbc994 ClipHgt:7
Dunning, Manager
Nose left:39 top:48 width:9 height:9 topWth:0 botLftRad:9 botRgtRad:9
Dunning, Manager
Scar1 left:9 top:9 width:19 height:1 bdrWth:0 topWth:2 Angle:-20
Dunning, Manager
Stitch1 left:1 top:-3 width:2 height:6 bdrWth:0 leftWth:2 rgtWth:2
Dunning, Manager
Stitch2 left:7 top:-3 width:2 height:6 bdrWth:0 leftWth:2 rgtWth:2
Dunning, Manager
Stitch3 left:13 top:-3 width:2 height:6 bdrWth:0 leftWth:2 rgtWth:2
Dunning, Manager
Scar2 left:7 top:13 width:0 height:19 bdrWth:0 leftWth:2 Angle:10
Dunning, Manager
Stitch4 left:-4 top:1 width:6 height:2 bdrWth:0 topWth:2 botWth:2
Dunning, Manager
Stitch5 left:-4 top:7 width:6 height:2 bdrWth:0 topWth:2 botWth:2
Dunning, Manager
Stitch6 left:-4 top:13 width:6 height:2 bdrWth:0 topWth:2 botWth:2
Dunning, Manager
Earpiece left:89 top:45 width:3 height:9 radius:50% background:black
Dunning, Manager
Headset left:53 top:39 width:37 height:37 radius:35% Angle:140 ClipHgt:11
Dunning, Manager
Mike left:61 top:77 width:7 height:3 radius:50% background:black
Dunning, Manager
Name left:2 top:104 bdrWth:0 font-size:13
Dunning, Manager

The Resulting HTML:

<div id='Panel1' class='aaa' style='position:relative; width:166px; height:257px; border:2px solid; background-color:paleturquoise; 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:102px; 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:paleturquoise; background:paleturquoise; 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:134px; border-width:0; '>

<div id='BackHair' class='abs2' style='left:4px; top:0; width:88px; height:45px; border-width:6px; border-bottom-width:0; clip:rect(0 9999px 120px 0); '></div>

<div id='LeftEar' class='abs2' style='left:0; top:37px; width:18px; height:18px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:#fbc994; '></div>

<div id='RightEar' class='abs2' style='left:89px; top:37px; width:18px; height:18px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:#fbc994; '></div>

<div id='Neck' class='abs2' style='left:37px; top:89px; width:31px; height:10px; border-left-width:2px; border-right-width:2px; border-top-width:0; border-bottom-width:0; background:#fbc994; '></div>

<div id='Torso' class='abs2' style='left:-16px; top:99px; width:141px; height:300px; border-radius:31px; -moz-border-radius:31px; -webkit-border-radius:31px; background:lightgray; '></div>

<div id='Face' class='abs2' style='left:9px; top:3px; width:89px; height:89px; background:#fbc994; '>

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

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

<div id='LeftCornea' class='abs2' style='left:24px; top:35px; width:4px; height:4px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; '></div>

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

<div id='LeftEyebrow' class='abs2' style='left:19px; top:19px; width:22px; height:22px; border-width:0; border-top-width:4px; transform:rotate(-15deg); '></div>

<div id='RightEyebrow' class='abs2' style='left:48px; top:19px; width:22px; height:22px; border-width:0; border-top-width:4px; transform:rotate(20deg); '></div>

<div id='MouthTop' class='abs2' style='left:25px; top:66px; width:36px; height:36px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:lightcoral; clip:rect(0 9999px 16px 0); '>

</div> <!close MouthTop>

<div id='MouthBottom' class='abs2' style='left:13px; top:77px; width:60px; height:60px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:#fbc994; clip:rect(0 9999px 7px 0); '></div>

<div id='Nose' class='abs2' style='left:39px; top:48px; width:9px; 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='Scar1' class='abs2' style='left:9px; top:9px; width:19px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-20deg); '>

<div id='Stitch1' class='abs2' style='left:2px; top:-3px; width:2px; height:6px; border-width:0; border-left-width:2px; border-right-width:2px; '></div>

<div id='Stitch2' class='abs2' style='left:7px; top:-3px; width:2px; height:6px; border-width:0; border-left-width:2px; border-right-width:2px; '></div>

<div id='Stitch3' class='abs2' style='left:13px; top:-3px; width:2px; height:6px; border-width:0; border-left-width:2px; border-right-width:2px; '></div>

</div> <!close Scar1>

<div id='Scar2' class='abs2' style='left:7px; top:13px; width:0; height:19px; border-width:0; border-left-width:2px; transform:rotate(10deg); '>

<div id='Stitch4' class='abs2' style='left:-4px; top:2px; width:6px; height:2px; border-width:0; border-top-width:2px; border-bottom-width:2px; '></div>

<div id='Stitch5' class='abs2' style='left:-4px; top:7px; width:6px; height:2px; border-width:0; border-top-width:2px; border-bottom-width:2px; '></div>

<div id='Stitch6' class='abs2' style='left:-4px; top:13px; width:6px; height:2px; border-width:0; border-top-width:2px; border-bottom-width:2px; '></div>

</div> <!close Scar2>

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

<div id='Headset' class='abs2' style='left:53px; top:39px; 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:61px; top:77px; 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:2px; top:104px; border-width:0; font-size:13px; font-weight:bold; '>,&nbspManager</div>

</div> <!close Person>

</div> <!close Panel1 ()>



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