Tyler Typemaster

Tyler is a young up-and-coming developer with a recent Computer Science degree. He considers himself an expert in Ruby, Python, java, Perl, C++, php, Go, javascript, HTML, CSS, and UX but has never written anything from scratch. He just copies something else and changes it.

He is responsible for connecting all the different corporate applications together with APIs, EDI, services, middleware, and duct tape. In between he builds his magnum opus, an app that replaces Facebook by connecting Snapchat to Pinterest using Google services with Twitter in the background, all on Amazon AWS. He'll be done by Thursday. Then he'll use his PTO (Paid Time Off) to shop his pitch deck between hackathons and conferences.

In his spare time, he works on his MMORPG game karma to improve his following for his impending launch. He also trolls incessantly on on-line programmer forums because on lobste.rs, Hacker News, and reddit, nobody knows you're a nice guy.

Inspired by:Jason, Martin, Ken, George, Steve
Primary Motivation:doing a startup and retiring early
Pet Peeve:using any framework more than 2 months old
Catch Phrase:"Whoever dies with the most tools wins."
Biggest Accomplishment:winning 3 hackathons without performance enhancing coffee
Favorite Movie:The Network
Favorite book:Letter to the Eddietor


How Tyler is Drawn

Tyler is drawn with 24 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 Tyler's arguments:

Line left:89 top:27 width:0 height:99 bdrWth:0 leftWth:2
Tyler, Dev
Talk left:0 top:0 width:152 bdrWth:10 font-size:15 bdrClr:#98c3c9 background:#98c3c9 text-align:center ClipWth:264
Tyler, Dev
Person left:43 top:133 bdrWth:0
Tyler, Dev
BackHair1 left:3 top:0 width:76 height:76 bdrWth:6 botWth:0 topLftRad:35 topRgtRad:35 background:black ClipHgt:48
Tyler, Dev
LeftEar left:0 top:45 width:11 height:24 radius:9 background:#fbc994 Angle:-20
Tyler, Dev
RightEar left:78 top:45 width:11 height:24 radius:9 background:#fbc994 Angle:20
Tyler, Dev
Torso left:-22 top:93 width:135 height:135 radius:37 background:tomato
Tyler, Dev
Face left:7 top:7 width:76 height:89 topLftRad:37 topRgtRad:37 botLftRad:45 botRgtRad:45 background:#fbc994 overflow:hidden
Tyler, Dev
LeftEye left:12 top:35 width:18 height:11 radius:50% background:white
Tyler, Dev
RightEye left:40 top:35 width:18 height:11 radius:50% background:white
Tyler, Dev
LeftPupil left:19 top:38 width:4 height:4 radius:50% background:springgreen
Tyler, Dev
RightPupil left:46 top:38 width:4 height:4 radius:50% background:springgreen
Tyler, Dev
LeftEyebrow left:4 top:22 width:27 height:27 bdrWth:3 radius:50% Angle:-20 ClipHgt:7
Tyler, Dev
RightEyebrow left:36 top:22 width:27 height:27 bdrWth:3 radius:50% Angle:20 ClipHgt:7
Tyler, Dev
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 background:lightcoral overflow:hidden Angle:180
Tyler, Dev
Tongue left:-11 top:6 width:45 height:45 radius:50% background:#fbc994
Tyler, Dev
Nose left:32 top:49 width:9 height:9 topWth:0 topLftRad:4 topRgtRad:4 botLftRad:9 botRgtRad:9
Tyler, Dev
FrontHair1 left:-71 top:-53 width:76 height:45 bdrWth:15 topLftRad:52 topRgtRad:52 background:black Angle:80
Tyler, Dev
FrontHair2 left:-7 top:-60 width:76 height:45 bdrWth:15 topLftRad:52 topRgtRad:52 background:black Angle:170 ClipHgt:19
Tyler, Dev
FrontHair3 left:42 top:-53 width:76 height:45 bdrWth:15 topLftRad:52 topRgtRad:52 background:black Angle:-70
Tyler, Dev
Earpiece left:6 top:55 width:3 height:9 radius:50% background:black
Tyler, Dev
Headset left:8 top:45 width:37 height:37 radius:35% Angle:-130 ClipHgt:11
Tyler, Dev
Mike left:25 top:84 width:7 height:3 radius:50% background:black
Tyler, Dev
Name left:11 top:104 bdrWth:0 font-size:13
Tyler, Dev

The Resulting HTML:

<div id='Panel1' class='aaa' style='position:relative; width:166px; height:257px; border:2px solid; background-color:#98c3c9; 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:99px; 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:#98c3c9; background:#98c3c9; text-align:center; clip:rect(0 264px 9999px 0); font-weight:bold; '> BLAH BLAH BLAH</div>

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

<div id='BackHair1' class='abs2' style='left:3px; top:0; width:76px; height:76px; border-width:6px; border-bottom-width:0; border-top-left-radius:35px; -moz-border-top-left-radius:35px; -webkit-border-top-left-radius:35px; border-top-right-radius:35px; -moz-border-top-right-radius:35px; -webkit-border-top-right-radius:35px; background:black; clip:rect(0 9999px 48px 0); '></div>

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

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

<div id='Torso' class='abs2' style='left:-22px; top:93px; width:135px; height:135px; border-radius:37px; -moz-border-radius:37px; -webkit-border-radius:37px; background:tomato; '></div>

<div id='Face' class='abs2' style='left:7px; top:7px; width:76px; height:89px; border-top-left-radius:37px; -moz-border-top-left-radius:37px; -webkit-border-top-left-radius:37px; border-top-right-radius:37px; -moz-border-top-right-radius:37px; -webkit-border-top-right-radius:37px; 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; overflow:hidden; margin-bottom:5px; '>

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

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

<div id='LeftPupil' class='abs2' style='left:19px; top:38px; width:4px; height:4px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:springgreen; '></div>

<div id='RightPupil' class='abs2' style='left:46px; top:38px; width:4px; height:4px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:springgreen; '></div>

<div id='LeftEyebrow' class='abs2' style='left:4px; top:22px; width:27px; height:27px; border-width:3px solid; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; transform:rotate(-20deg); clip:rect(0 9999px 7px 0); '></div>

<div id='RightEyebrow' class='abs2' style='left:36px; top:22px; width:27px; height:27px; border-width:3px solid; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; transform:rotate(20deg); clip:rect(0 9999px 7px 0); '></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; background:lightcoral; 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%; background:#fbc994; '></div>

</div> <!close Mouth>

<div id='Nose' class='abs2' style='left:32px; top:49px; width:9px; height:9px; border-top-width:0; border-top-left-radius:4px; -moz-border-top-left-radius:4px; -webkit-border-top-left-radius:4px; border-top-right-radius:4px; -moz-border-top-right-radius:4px; -webkit-border-top-right-radius:4px; 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='FrontHair1' class='abs2' style='left:-71px; top:-53px; width:76px; height:45px; border-width:15px; 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; transform:rotate(80deg); clip:rect(0 9999px 9999px 0); '></div>

<div id='FrontHair2' class='abs2' style='left:-7px; top:-60px; width:76px; height:45px; border-width:15px; 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; transform:rotate(170deg); clip:rect(0 9999px 19px 0); '></div>

<div id='FrontHair3' class='abs2' style='left:42px; top:-53px; width:76px; height:45px; border-width:15px; 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; transform:rotate(-70deg); clip:rect(0 9999px 9999px 0); '></div>

</div> <!close Face>

<div id='Earpiece' class='abs2' style='left:6px; top:55px; 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:8px; top:45px; width:37px; height:37px; 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='abs2' style='left:25px; top:84px; width:7px; height:3px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; '></div>

<div id='Name' class='abs2' style='left:11px; top:104px; border-width:0; font-size:13px; font-weight:bold; '>,&nbspDev</div>

</div> <!close Person>

</div> <!close Panel1 ()>



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