A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 35KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>The Conjoined Triangles of Senior-Level Development (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://frontside.io/blog/2016/07/07/the-conjoined-triangles-of-senior-level-development.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. The Conjoined Triangles of Senior-Level Development (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://frontside.io/blog/2016/07/07/the-conjoined-triangles-of-senior-level-development.html">Source originale du contenu</a></h3>
  445. <p><img src="http://frontside.io/blog/2016/07/07/the-conjoined-triangles-of-senior-level-development/sv-conjoined.jpg"/>
  446. </figure></p>
  447. <p><em>My man Stephen Tobolowsky lays down the conjoined triangles.</em></p>
  448. <h3>“This actually makes me feel less confident about <em>my</em> role here. If we can’t define what we think senior is, how am I supposed to know if I’m working toward it?”</h3>
  449. <p>At Frontside, we gather every Tuesday afternoon for our company meeting, where we talk through our accomplishments and plans for the coming week.</p>
  450. <p>In a recent meeting, we talked about our search for a senior developer to join the team, and you could see passions flare. No decision we can make impacts the company quite like bringing on a new team member, so naturally we all had strong opinions about the qualifications we were looking for.</p>
  451. <p>However, <em>not one person</em> in the room could crystallize our thoughts on what qualifies as “senior” above a general gut feeling.</p>
  452. <p>One person chimed in with the quote above, and I realized that we’d stumbled onto one of the biggest problems in our entire company: <strong>we had no idea how to define the role we’re trying to hire for and grow our developers toward.</strong></p>
  453. <h2>The problem of defining “Senior Developer”</h2>
  454. <p>For my part, I’ve come to distrust the term “Senior Developer”, particularly after being given that title after 9 months of professional programming experience to fit into a salary band.</p>
  455. <p>In fact, <strong>if you ask two experienced developers to specify their definition of “senior”, I guarantee you will find serious conflicts between their answers.</strong></p>
  456. <p>The question of what qualifies as a “Senior Developer” is both context-dependent and so malleable that our industry squishes it into whatever shape fits their current needs.</p>
  457. <p>Here are some actual, real-world definitions I’ve seen used to justify the label “Senior Developer”</p>
  458. <ul>
  459. <li>15+ years of programming experience</li>
  460. <li>2 years of programming experience and decent leverage</li>
  461. <li>1 year of experience in a hot new 1-year-old framework</li>
  462. <li>Having authored a technical book</li>
  463. <li>Writing Comp Sci algorithms on a whiteboard</li>
  464. <li>Writing an open source library used within the company</li>
  465. </ul>
  466. <p>That’s a pretty broad range of definitions. But lots of stuff in life is hard to define, so what’s the problem?</p>
  467. <h2>Why bother defining it? What’s wrong with a gut feeling?</h2>
  468. <p>In our meeting, when our team member pointed out their confusion, they were pointing out that we are hiring, firing, and promoting people based on criteria we can’t define or defend. They’re right, that is <em>bananas</em>.</p>
  469. <p>Worse, we were <em>failing at our core mission</em> of growing developers by not clearly marking the path we’re trying to help them travel.</p>
  470. <p>There’s another, larger problem with “I’ll know a senior developer when I see one”: <strong>“Senior Developer” is a profoundly effective vector for bias.</strong></p>
  471. <h2>“Senior Developer” as a way to enshrine bias</h2>
  472. <p>When we picture a wise senior developer, we each have our own experiences and preferences that color this picture in for us. That means the term is already spring-loaded with a bunch of our own baggage.</p>
  473. <p>When we take a “gut feeling” sense of someone’s seniority without specific criteria, there is basically no way to counteract our own biases, but we still make a judgement. <strong>It’s completely possible for a person applying to multiple dev jobs to be evaluated as junior at one, mid-level at another, and even senior at another, with very little feedback as to why.</strong></p>
  474. <p>And as hiring managers, we all feel correct when making these judgements, even as we reach vastly different conclusions.</p>
  475. <p>The result is a reinforcement of existing biases that keeps some people from progressing, while resulting in “title inflation” for others. Since <strong>existing biases in tech are strongly and undeniably tilted toward white males</strong>, the existing “gut feeling” system disproportionately harms women and people of color.</p>
  476. <h2>Why haven’t we solved this?</h2>
  477. <p>This definition is an extremely hard problem, since it’s heavily dependent on the context of the work environment. Most business owners are just making this stuff up as they go along, and the solution we tend to wind up with seems to be “good enough”.</p>
  478. <p>There’s also no incentive, because <strong>defining criteria takes a lot of the “gut decision” power away from founders/owners and adds accountability.</strong> Who sits around asking for less power and more accountability for themselves?</p>
  479. <h2>Injecting accountability</h2>
  480. <p>I like accountability. I take comfort in it. I’ve learned that being held accountable for something is quite liberating. For instance, being clear about the criteria we use to hire someone leads to less regret than “going with my gut”, <strong>which can be affected by everything from someone’s ability to riff on Simpsons quotes with me to whether I skipped breakfast that day.</strong></p>
  481. <p>Accountability also opens the door for improvement. As the hiring manager, I’m responsible for fostering a safe, capable, happy, diverse team. Improving and working toward those goals can either happen by gut feelings and dumb luck, or we can define, measure, and hold ourselves accountable for iterating toward those goals.</p>
  482. <p>Accountability moves us from being passengers to drivers of our own future.</p>
  483. <h2>It starts with responsibilities</h2>
  484. <p>The question becomes: <strong>How can we create and use quantifiable criteria for seniority without creating a deeply flawed, highly game-able system?</strong></p>
  485. <p>The only fair way I can think of to judge a candidate is asking a few key questions: <em>What are this person’s responsibilities? How likely are they to be able to fulfill them? How much help will they need?</em></p>
  486. <p>We started by defining our environment. When we examine the key attributes of the environment at Frontside, it starts to become clear:</p>
  487. <ul>
  488. <li>Being small means that people need to take the lead in several roles to solve problems from start to finish. There are no “cogs” in this machine.</li>
  489. <li>We rely and build on the strength of our internal community and the larger communities we participate in, particularly in open source.</li>
  490. <li>We have extremely ambitious technical goals and standards for the maintainability and usability of the code we write.</li>
  491. </ul>
  492. <p>The resulting responsibilities are then pretty easy to determine:</p>
  493. <ul>
  494. <li><strong>Provide clear technical and project guidance for their teammates and our clients</strong></li>
  495. <li><strong>Mentor, teach, and contribute internally and in larger programming communities</strong></li>
  496. <li><strong>Ship software that is a joy to its users and to the developers who extend and maintain it</strong></li>
  497. </ul>
  498. <p>Together, these responsibilities form the basis of the criteria we use to assess seniority.</p>
  499. <h2>The Conjoined Triangles: The simple explanation</h2>
  500. <p>I recently had a chance to dig into the definition of “senior” at a number of companies, large and small, and came away with only one common denominator.</p>
  501. <p>The simplest explanation of seniority across companies is this: <strong>How much direction will this person need, and how much will they be able to provide to others?</strong></p>
  502. <figure alt="The Conjoined Triangles of Senior-level Development">
  503. <img src="http://frontside.io/blog/2016/07/07/the-conjoined-triangles-of-senior-level-development/conjoined.jpg"/>
  504. </figure>
  505. <p>I stand by the Conjoined Triangles of Senior-Level Development as a nice idea, but like Action Jack’s “Conjoined Triangles of Success”, it’s enough of an oversimplification to shed its intrinsic meaning.</p>
  506. <p>Even with this understanding, the door is wide open to inject bias, miss important criteria, and overvalue higher-visibility things like public notoriety or the ability to speak computer science lingo.</p>
  507. <h2>In the meeting, a new framework emerges</h2>
  508. <p>A really cool thing happened during the heated meeting. As I was describing this simple “unified field theory”, another employee put forward a new mental model to organize our thinking around this.</p>
  509. <p>She described the framework we use to determine seniority at Frontside as a Venn diagram, the intersection of how well a person works independently and leads, how technically capable they are, and how well they connect and contribute to a larger community.</p>
  510. <h2>The Venn diagram: The more complex explanation</h2>
  511. <figure alt="The Three Tracks of a Senior-level Dev">
  512. <img src="http://frontside.io/blog/2016/07/07/the-conjoined-triangles-of-senior-level-development/venn.jpg"/>
  513. </figure>
  514. <p>Our evaluation of seniority does, in fact, roll up to the higher definition: <em>“How much direction will this person need, and how much will they be able to provide to others?”</em> But as our employees pointed out, when we stop there, there’s a ton of room for confusion.</p>
  515. <p>So how can we decide how well a candidate is likely to perform their responsibilities? <strong>How do we anchor our evaluation criteria to something concrete, without killing it by turning it into a mathematical formula?</strong></p>
  516. <p>When we boiled down what we’re looking for, we came away with 12 traits that divide pretty cleanly along those three areas of responsibility: <strong>technical capability</strong>, <strong>leadership</strong>, and <strong>community</strong>.</p>
  517. <p>I’ll break the 12 traits down in detail in the next post, but for now, we’ll just hit the high points.</p>
  518. <h2>The tracks</h2>
  519. <p><strong>Technical capability:</strong> A person with high technical capability is technically curious, tackles problems without giving up, and produces solutions that less-experienced folks can use, maintain, and learn from.</p>
  520. <p><strong>Leadership:</strong> A person with leadership skills knows how to develop and follow a sense of purpose, in themselves and in others. They are willing to point out, own, and fix things that are broken about our company and in their own career tracks.</p>
  521. <p><strong>Community/Connectedness:</strong> A person with community skills has a sense of being part of a larger whole, a desire to contribute, a sense that the other people (i.e. coworkers, users, clients) are not simply characters in his or her own movie, but fully-realized individuals.</p>
  522. <h2>What about “culture fit”?</h2>
  523. <p>We initially almost called the Community &amp; Connectedness track “culture fit”, but I have come to be highly suspicious that this term is a <a href="https://en.wikipedia.org/wiki/Clich%C3%A9#Thought-terminating_clich.C3.A9">thought-terminating cliché</a>. <strong>“Culture fit” is a junk drawer</strong> for all the stuff you want to see in a developer that you can’t otherwise define, and it’s an ideal hiding place for intrinsic biases.</p>
  524. <p>When we defined the criteria that make Frontside’s culture unique, the common trait is the idea of connectedness as defined above.</p>
  525. <h2>Measuring seniority across 3 disparate tracks</h2>
  526. <p>Remember the three areas, <strong>technical capability</strong>, <strong>leadership</strong>, and <strong>community</strong>? Each of these tracks has a junior-to-senior path all its own.</p>
  527. <p>It’s now common for a person to switch careers and come out of a code bootcamp with seniority in leadership and connectedness, while being junior in technical capability. Conversely, a skilled, formally-trained technician may be missing experience in both leadership and connectedness.</p>
  528. <p><strong>Very few qualify as senior in all three categories.</strong> In fact, <em>it’s unlikely a person will even be interested</em> in becoming senior in all three categories. At Frontside, we define seniority as a blend of these tracks and work to help people level up where they feel like they want to improve.</p>
  529. <h2>Artifacts: The only measuring tape you’ve got</h2>
  530. <p>The measure of seniority in each track requires evidence. If you’ve done something, you likely have some kind of artifact as a result.</p>
  531. <p>The 12 traits we’ll discuss in the next post each come with concrete artifacts a candidate can point to to show that yes, they have developed those traits over time and with practice.</p>
  532. <p>But taken as a whole, <strong>a couple of well-developed and deeply-practiced traits in an area are likely to qualify a person as senior in that area.</strong></p>
  533. <p>For instance, if a person can talk you through the code they’ve written across various programming languages, they probably peg the “curiosity” trait pretty high. Combine that with the rigor to write thorough, high-quality tests for the majority of their projects and hook it up to Continuous Integration, you’re probably looking at someone we’d consider technically senior.</p>
  534. <p>Or, if someone has a long history of mentoring others, organizing meetups, or creating tools that make others’ lives easier, it’s likely we’d consider them senior on the community track.</p>
  535. <p>If a person has managed a few teams before, they have likely learned and developed processes to handle the very real challenges there. Combine that with the ability to get to the purpose or root of an issue, and you have someone we’d call senior on the leadership track.</p>
  536. <h2>How we define “Senior”</h2>
  537. <p>Our measure is that if someone is senior on the technical track and either the leadership or community track, they’re senior to us. We can help level them up on the remaining track if they want.</p>
  538. <p>If they’re senior on the community and leadership side, we consider them senior if they are high-mid-level on the technical track.</p>
  539. <p>As a real-life example: About a year ago, we hired a new employee as a junior developer, because we knew on the technical side they needed a ton of direction for at least the first six months.</p>
  540. <p>At six months, they were solidly mid-level technically, and within their first year, by our estimation, they were already senior. I can say this with confidence because when they left, we realized that to fulfill their job functions, we’d need to hire a senior developer.</p>
  541. <p>This happened because when they started with us, they were already senior on the community and leadership tracks, so <strong>all they needed was a boost on the technical side</strong> to perform the job of a senior dev on our team.</p>
  542. <h2>Technical skills aren’t enough</h2>
  543. <p>For someone with technical skills but little experience in community or leadership, <em>“You don’t qualify as senior by our standards”</em> is not music to their ears. But for the job responsibilities they’ll have with us, we would consider that person mid-level until we can help strengthen one or both of the remaining tracks for them.</p>
  544. <p>Many shops only measure along the technical axis, but it simply doesn’t work for a company of our small size and collaborative work style. I also worry that those who only measure technical skill are buying into the dangerous “lone genius developer” myth, cheating the developer out of the serious boost they’d gain by adding leadership or community-oriented skills to their technical savvy.</p>
  545. <p>Even in larger companies with more focused roles, <strong>I’d like to see a broader definition of “Senior Developer” that encompasses the code and non-code skills we use</strong> and that allow us to work effectively, particularly in teams and with real customers.</p>
  546. <h2>How long does it take to become senior?</h2>
  547. <p>Does “Senior developer” mean “X years of experience”? Well, I don’t see it happening inside of 5 years for anyone. It would be difficult or impossible to develop the traits needed to reach senior-level in any of these tracks in less than several years, much less along multiple tracks.</p>
  548. <p>But “5 years of experience” doesn’t necessarily mean “5 years of software development experience”. A person who has already climbed the Leadership and/or Connectedness tracks need only hook that up to their increasing technical skills to provide a tremendous amount of value as a software developer.</p>
  549. <p>Our hiring “secret sauce” largely stems from the fact that <strong>it seems to take significantly less time for someone with leadership and community skills to develop technical skills than the other way around.</strong> I’m seeing a large number of people who graduated from code bootcamps 3 and even 2 years ago now handily and gracefully filling the role of senior developer.</p>
  550. <h2>There’s more to discuss</h2>
  551. <p>This leaves many questions unanswered. What are the specific artifacts we use to evaluate skills and traits in the three areas? How can you evaluate for these before and during an interview? How do we tie these evaluations to something as concrete as someone’s salary?</p>
  552. <p>How does this framework apply to non-senior developers? How and when do developers advance? What’s the difference between a Junior, Mid, and Senior? What exists between them? <strong>Are these terms devoid of meaning and in need of replacement?</strong></p>
  553. <p>Lastly, how does this framework apply (if it applies at all) to other companies with vastly different cultures and needs from Frontside?</p>
  554. <p>In the next post, we’ll dive into specifics to answer these.</p>
  555. <h2>Moving past “gut feelings”</h2>
  556. <p>Defining “senior” is an ongoing and surprisingly difficult process, but we do it because it’s business-critical for us. Without a clear definition of “senior developer", we have no clear path for our own employees to get there. We have no concrete way to evaluate people joining the team, no way to hold ourselves accountable, and no way of improving the process.</p>
  557. <p>As an industry, it’s time to graduate from the “I’ll know it when I see it” definition toward something we can define and share. <strong>Let’s bring open source thinking to how we hire and grow our people.</strong></p>
  558. <p>I hope to answer the major lingering questions in the next post. If you have questions or a different definition, you can find me on Twitter (<a href="http://twitter.com/tehviking">@tehviking</a>) or better yet, write a post with your own thoughts and I’ll link to it.</p>
  559. </article>
  560. </section>
  561. <nav id="jumpto">
  562. <p>
  563. <a href="/david/blog/">Accueil du blog</a> |
  564. <a href="http://frontside.io/blog/2016/07/07/the-conjoined-triangles-of-senior-level-development.html">Source originale</a> |
  565. <a href="/david/stream/2019/">Accueil du flux</a>
  566. </p>
  567. </nav>
  568. <footer>
  569. <div>
  570. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  571. <p>
  572. Bonjour/Hi!
  573. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  574. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  575. </p>
  576. <p>
  577. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  578. </p>
  579. <p>
  580. Voici quelques articles choisis :
  581. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  582. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  583. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  584. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  585. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  586. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  587. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  588. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  589. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  590. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  591. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  592. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  593. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  594. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  595. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  596. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  597. </p>
  598. <p>
  599. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  600. </p>
  601. <p>
  602. Je ne traque pas ta navigation mais mon
  603. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  604. conserve des logs d’accès.
  605. </p>
  606. </div>
  607. </footer>
  608. <script type="text/javascript">
  609. ;(_ => {
  610. const jumper = document.getElementById('jumper')
  611. jumper.addEventListener('click', e => {
  612. e.preventDefault()
  613. const anchor = e.target.getAttribute('href')
  614. const targetEl = document.getElementById(anchor.substring(1))
  615. targetEl.scrollIntoView({behavior: 'smooth'})
  616. })
  617. })()
  618. </script>