Types of Engineering Managers

dabblet.css

/**
 * Types of Engineering Managers
 *
 * https://dabblet.com/f11dd0ad029e5952c879bd10cc75e36a
 */

.architecture meter::-webkit-meter-optimum-value {background: #C27BA0}
.code meter::-webkit-meter-optimum-value {background: #D5A6BD}
.people meter::-webkit-meter-optimum-value {background: #A64D79}
.product meter::-webkit-meter-optimum-value {background: #D5A6BD}
.team meter::-webkit-meter-optimum-value {background: #4D1330}

body {
	font-family: sans-serif;
}

label {
	display: block;
	transform: rotate(90deg);
	transform-origin: 2% -130%;
	text-align: center;
}

meter {
	width: 100%;
}

meter::-webkit-meter-bar {
	border: 1px solid black;
	background: none;
}

meter::-webkit-meter-optimum-value {
	background: none;
}

meter::before {
	content: "0%";
	display: block;
    transform: rotate(90deg);
	transform-origin: -8% 40%;	
}

meter::after {
	content: "100%";
	display: block;
    transform: rotate(90deg);
	transform-origin: 65% 400%;
}

.types {
	position: relative;
	width: 10em;
    margin-bottom: -10em;
    list-style-type: none;
    transform: rotate(-90deg);
	transform-origin: 60% 25%;
}

.types li {
}

dabblet.html

<h1>Styles of Engineering Manager</h1>
<p>
	Amy Phillips in
	<a href="https://amyjph.com/2020/05/16/what-is-an-engineering-manager/">What is an Engineering Manager?</a>: "To help with job hunting and meeting role expectations I think about the variety of Engineering Management elements as being grouped into four
	distinct styles based on time and energy spent on each of the primary responsibilities"
</p>

<ul>
	<li>Architecture (designing and setting technical direction)</li>
	<li>Code (writing, and reviewing)</li>
	<li>People (hiring, managing, growing)</li>
	<li>Product strategy (what to build and when)</li>
	<li>Team health (ways of working, productivity, happiness)</li>
</ul>

<h2>The Tech Lead Manager</h2>
<p>The Tech Lead Manager will spend most of their time and energy on code followed by people. </p>
<ul class="types">
	<li class="architecture"><label>Architecture</label> <meter id="fuel" min="0" max="100" value="20"></meter></li>
	<li class="code"><label>Code</label> <meter id="fuel" min="0" max="100" value="50"></meter></li>
	<li class="people"><label>People</label> <meter id="fuel" min="0" max="100" value="25"></meter></li>
	<li class="product"><label>Product</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="team"><label>Team</label> <meter id="fuel" min="0" max="100" value="5"></meter></li>
</ul>

<h2>The Architectural Lead Manager</h2>
<p>The Architectural Lead Manager will mainly focus on technical strategy and people.</p>
<ul class="types">
	<li class="architecture"><label>Architecture</label> <meter id="fuel" min="0" max="100" value="50"></meter></li>
	<li class="code"><label>Code</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="people"><label>People</label> <meter id="fuel" min="0" max="100" value="40"></meter></li>
	<li class="product"><label>Product</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="team"><label>Team</label> <meter id="fuel" min="0" max="100" value="10"></meter></li>
</ul>

<h2>The People Manager</h2>
<p>Almost all of a People Manager’s time and energy will be on the individuals in the team.</p>
<ul class="types">
	<li class="architecture"><label>Architecture</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="code"><label>Code</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="people"><label>People</label> <meter id="fuel" min="0" max="100" value="90"></meter></li>
	<li class="product"><label>Product</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="team"><label>Team</label> <meter id="fuel" min="0" max="100" value="10"></meter></li>
</ul>

<h2>The Team Lead Manager</h2>
<p>The Team Lead Manager has a more even spread of focus on the team’s direction, health, and individuals.</p>
<ul class="types">
	<li class="architecture"><label>Architecture</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="code"><label>Code</label> <meter id="fuel" min="0" max="100" value=""></meter></li>
	<li class="people"><label>People</label> <meter id="fuel" min="0" max="100" value="25"></meter></li>
	<li class="product"><label>Product</label> <meter id="fuel" min="0" max="100" value="30"></meter></li>
	<li class="team"><label>Team</label> <meter id="fuel" min="0" max="100" value="40"></meter></li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}