davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
273 提交
1 分支
目录树: 581f26e260
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '581f26e260'
${ noResults }
larlet-fr-david-cache/cache/74fc476c089a9330cd01e083af0.../index.html

index.html 32KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553 
  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 full-stack employee (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://medium.com/@chrismessina/the-full-stack-employee-ed0db089f0a1">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   The full-stack employee (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://medium.com/@chrismessina/the-full-stack-employee-ed0db089f0a1">Source originale du contenu</a></h3>

  463.     <h4 name="24bb" id="24bb" class="graf--h4 graf--first">What is a full stack employee?</h4>

  464. 

  465. <p name="cd93" id="cd93" class="graf--p graf--empty"><br></p>

  466. 

  467. <p name="dda0" id="dda0" class="graf--p">Just as there are <a href="http://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/" data-href="http://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/" class="markup--anchor markup--p-anchor" rel="nofollow">full-stack engineers</a> and <a href="http://a16z.com/2015/01/22/the-full-stack-startup/" data-href="http://a16z.com/2015/01/22/the-full-stack-startup/" class="markup--anchor markup--p-anchor" rel="nofollow">full-stack startups</a>, the full-stack employee has a powerful combination of skills that make them incredibly valuable. They are adept at navigating the rapidly evolving and shifting technological landscape. They make intuitive decisions amidst information-abundance, where sparse facts mingle loosely with data-drenched opinions. Full stack employees are capable of speaking design lingo, know that using <a href="http://www.comicsanscriminal.com" data-href="http://www.comicsanscriminal.com" class="markup--anchor markup--p-anchor" rel="nofollow">Comic Sans is criminal</a>, and are adept at making mocks in Keynote, Sketch, or Skitch (if it comes to that). And they know <a href="http://www.helloerik.com/ux-is-not-ui" data-href="http://www.helloerik.com/ux-is-not-ui" class="markup--anchor markup--p-anchor" rel="nofollow">the difference between UI and UX</a>.</p>

  468. 

  469. <p name="1434" id="1434" class="graf--p">They can cross the aisle to talk to engineering and can make sense of algorithms, programming, and instinctively understand that scaling the backend isn’t the same as scaling the frontend. Though they may not code for production, they understand what <a href="http://github.com" data-href="http://github.com" class="markup--anchor markup--p-anchor" rel="nofollow">GitHub</a> and <a href="http://stackoverflow.com" data-href="http://stackoverflow.com" class="markup--anchor markup--p-anchor" rel="nofollow">StackOverflow</a> are for, and can brute force a copy-paste script to perform basic analysis on a CSV file. If they must.</p>

  470. 

  471. <p name="1549" id="1549" class="graf--p">They’re on the latest social apps, and know how to self-promote. Tastefully (most of the time; for the rest, there’s Snapchat). They use narrative and storytelling to involve their audience, but have watched enough three minute Kickstarter videos to know that they need to get to their point in less time than it takes to watch an Instagram video, if not a Vine. Attention is the currency of the age.</p>

  472. 

  473. <p name="db32" id="db32" class="graf--p">Full stack employees have an insatiable appetite for new ideas, best practices, and ways to be more productive and happy. They’re curious about the world, what makes it work, and how to make their mark on it. It’s this aspect above others that defines and separates the full stack employee from previous generations. Full stack employees can’t put blinders on once they land a job; instead they must stay up on developments in their industry and others, because they know that <a href="https://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-760.pdf" data-href="https://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-760.pdf" class="markup--anchor markup--p-anchor" rel="nofollow">innovation is found at the boundaries between disciplines</a>, not by narrowly focusing in one sphere.</p>

  474. 

  475. <h4 name="21e4" id="21e4" class="graf--h4">What it’s like to be a full stack employee</h4>

  476. 

  477. <p name="5dc7" id="5dc7" class="graf--p graf--empty"><br></p>

  478. 

  479. <p name="096f" id="096f" class="graf--p">Being a full stack employee isn’t necessarily easier or harder; it’s different. With always-on connectedness via their mobile devices, the boundaries between work and non-work blur, creating an implicit expectation that there’s never a time too late for a Slack chat or Google Hangout. This may or may not work out well. YMMV.</p>

  480. 

  481. <p name="f6d8" id="f6d8" class="graf--p">With constant internet access comes constant distraction (tragically in the form of another time-wasting listicle on being more productive). And since much of their work involves slicing through thick ambiguity — they’re given to radical clarity in certain lifestyle choices, from adopting <a href="https://vimeo.com/111171647" data-href="https://vimeo.com/111171647" class="markup--anchor markup--p-anchor" rel="nofollow">monolithic, monochromatic wardrobes</a> to <a href="http://www.soylent.me" data-href="http://www.soylent.me" class="markup--anchor markup--p-anchor" rel="nofollow">functional culinary choices</a>:</p>

  482. 

  483. <figure name="0070" id="0070" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 640px; max-height: 640px;"><div class="aspect-ratio-fill"></div><a href="https://instagram.com/p/0VrCxnS3r2/?taken-by=soylent" data-href="https://instagram.com/p/0VrCxnS3r2/?taken-by=soylent" class="graf-imageAnchor"><img class="graf-image" data-image-id="1*pUZ443PNRFeJRX4p1YJWQw.jpeg" data-width="640" data-height="640" src="https://d262ilb51hltx0.cloudfront.net/max/1067/1*pUZ443PNRFeJRX4p1YJWQw.jpeg"></a></div><figcaption class="imageCaption"><a href="https://instagram.com/p/0VrCxnS3r2/?taken-by=soylent" data-href="https://instagram.com/p/0VrCxnS3r2/?taken-by=soylent" class="markup--anchor markup--figure-anchor" rel="nofollow">Photo</a> by Soylent</figcaption></figure>

  484. 

  485. <p name="039b" id="039b" class="graf--p">Being full stack is an exercise in shifting between opposite poles. While there’s often less support for individual work and a greater expectation of self-sufficiency (i.e. setting their own hours, using their own devices for work, etc), they’re also expected to collaborate and work in groups effectively. Previously, you’d have an IT manager select the technology for a large team, but with the increasing reliance on self-provided mobile devices, individuals are left to figure out how to communicate across and connect over different platforms. Indeed, <a href="http://slack.com" data-href="http://slack.com" class="markup--anchor markup--p-anchor" rel="nofollow">Slack</a>, the winningest enterprise tool <em class="markup--em markup--p-em">du jour</em>, <a href="https://slack.com/integrations" data-href="https://slack.com/integrations" class="markup--anchor markup--p-anchor" rel="nofollow">integrates with <em class="markup--em markup--p-em">everything</em></a>, <a href="http://www.economist.com/news/business/21647612-once-dominant-software-giant-determined-prove-life-begins-again-40-opening" data-href="http://www.economist.com/news/business/21647612-once-dominant-software-giant-determined-prove-life-begins-again-40-opening" class="markup--anchor markup--p-anchor" rel="nofollow">opposite Microsoft’s latter-day strategy</a> of privileging its own platform over all others. These days, if you haven’t integrated with everyone else’s API, you’re already behind. And that’s true of full stack employees too — they must have at least passing knowledge of all the latest apps lest they fall behind and as a result, out of the loop.</p>

  486. 

  487. <p name="b7b3" id="b7b3" class="graf--p graf--last">Yet full stack employees are expected to deeply understand their domain, but also dynamically deal with shifting priorities and expectations. While not an altogether new phenomenon, the flat nature of many organizations means that pull can come from the top or the bottom, and it’s up to the individual to prioritize one over the other. To evaluate these requests, the FSE stretch across traditional organization boundaries, while not get stretched <em class="markup--em markup--p-em">too</em> thin. They need to be informed about what everyone else is doing without micromanaging them, and not get uncomfortable working in roles unfamiliar to them: product manager, designer, communicator, strategist, advertiser, consultant, technologist, user advocate, marketer… et cetera and so on!</p>

  488. 

  489. <p></div></div></section><section name="1683"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><h4 name="58d5" id="58d5" class="graf--h4 graf--first">Why it’s great to be a full stack employee</h4><p name="584e" id="584e" class="graf--p graf--empty"><br></p><p name="1d98" id="1d98" class="graf--p">Despite the challenges of being a full stack employee, there are many upsides. For one, they have more freedom to work the way they want, where they want (with services like <a href="http://teleport.org/" data-href="http://teleport.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Teleport</a> helping them find inexpensive places to work), when they want. They can use the <a href="http://www.producthunt.com/chrismessina" data-href="http://www.producthunt.com/chrismessina" class="markup--anchor markup--p-anchor" rel="nofollow">latest tools</a>, as they’re expected to be self-sufficient and self-directed. They also have a broader range and variety of experiences owing to the collaborative, interdisciplinary nature of their work. They have increasing influence across the organization, as their voice is raised in more conversations, and carry a deeper personal responsibility for the company’s success, and are invested in the entire team’s success.</p><h4 name="58f9" id="58f9" class="graf--h4">What does this mean for employers and managers?</h4><p name="67e1" id="67e1" class="graf--p graf--empty"><br></p><p name="1520" id="1520" class="graf--p">A competitive market for full stack employees has considerable implications for companies and managers. First, are you set up to successfully attract and retain these individuals? Second, have you defined the style(s) of work that are suited for your team, or how you support remote work? Third, do you provide flexible work hours, or support for alternative scheduling options? And fourth, what about support for health and wellness or <a href="http://www.nytimes.com/2015/04/08/upshot/silicon-valley-perks-for-some-workers-struggles-for-parents.html?_r=0" data-href="http://www.nytimes.com/2015/04/08/upshot/silicon-valley-perks-for-some-workers-struggles-for-parents.html?_r=0" class="markup--anchor markup--p-anchor" rel="nofollow">family time</a>?</p><p name="0ee1" id="0ee1" class="graf--p">Google clearly <a href="https://www.google.com/about/careers/lifeatgoogle/" data-href="https://www.google.com/about/careers/lifeatgoogle/" class="markup--anchor markup--p-anchor" rel="nofollow">sets the bar</a> for employee health, morale, and attitude, but also demands a great deal of accountability from them. Googlers are able to work however, whenever, and wherever leads to their greatest productivity, but are also expected to be generally available for quick, unscheduled pow-wows. Is your team ready for this?</p><figure name="2fee" id="2fee" class="graf--figure postField--outsetLeftImage"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 350px;"><div class="aspect-ratio-fill" ></div><a href="http://brt.hr/DEJX5W" data-href="http://brt.hr/DEJX5W" class="graf-imageAnchor"><img class="graf-image" data-image-id="1*owoFpIPvgICBPLFvEAp8Qw.jpeg" data-width="6594" data-height="4401" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*owoFpIPvgICBPLFvEAp8Qw.jpeg"></a></div><figcaption class="imageCaption"><a href="https://download.unsplash.com/photo-1422479516648-9b1f0b6e8da8" data-href="https://download.unsplash.com/photo-1422479516648-9b1f0b6e8da8" class="markup--anchor markup--figure-anchor" rel="nofollow">Photo</a> by <a href="http://brt.hr/DEJX5W" data-href="http://brt.hr/DEJX5W" class="markup--anchor markup--figure-anchor" rel="nofollow">Breather</a></figcaption></figure><p name="bdff" id="bdff" class="graf--p">If you haven’t tried it before, it may be useful to spend some time coworking to get a taste for what a full stack employee work environment is typically like. In <a href="http://brt.hr/DEJX5W" data-href="http://brt.hr/DEJX5W" class="markup--anchor markup--p-anchor" rel="nofollow">these environments</a>, people of all kinds of backgrounds come together in a common space to work around and with each other. They’re often online, connected on Slack or some other collaborative conversational platform (or several; note: <a href="https://medium.com/message/doomed-to-repeat-it-fb03757dfcca" data-href="https://medium.com/message/doomed-to-repeat-it-fb03757dfcca" class="markup--anchor markup--p-anchor"><em class="markup--em markup--p-em">email is dead</em></a>). Most coworking spaces are setup for ad hoc collaboration, with the right mix of virtual and physical tooling (whiteboards, projectors, conference rooms, video conferencing gear, etc). All of these support virtual team communication and collaboration.</p><p name="2a1d" id="2a1d" class="graf--p">Perhaps unintuitively, the most necessary shifts for employers and managers is towards <a href="http://chadfowler.com/blog/2014/01/19/empathy/" data-href="http://chadfowler.com/blog/2014/01/19/empathy/" class="markup--anchor markup--p-anchor" rel="nofollow">empathy</a> — both <em class="markup--em markup--p-em">for</em> this new kind of employee, but also from them, in making specific demands on how they communicate and collaborate, and how expectations are set between you and them. Just because they demand a high degree of flexibility and autonomy doesn’t mean that they get to dictate the criteria by which their work is evaluated. That’s still the role of the manager.</p><h4 name="4255" id="4255" class="graf--h4">What of the future of work?</h4><p name="3bd2" id="3bd2" class="graf--p">It’s too much to suggest that the future of work will be lead by full stack employees, but there is a significant trend in this direction, at the very least driven by the recent emphasis on entrepreneurship globally and Millennial work trends. Certainly the nature of work is changing, and the highest value employees are those who can handle ambiguity and synthesizing enormous amounts of information into strategically useful tactics.</p><p name="2714" id="2714" class="graf--p graf--last">Moreover, we’re only a decade into, and before, the presence of working robots. As robots take over repetitive tasks like <a href="http://www.ap.org/content/press-release/2015/ap-ncaa-to-grow-college-sports-coverage-with-automated-game-stories" data-href="http://www.ap.org/content/press-release/2015/ap-ncaa-to-grow-college-sports-coverage-with-automated-game-stories" class="markup--anchor markup--p-anchor" rel="nofollow">writing sports news stories</a> or <a href="http://www.adweek.com/news/technology/6-clues-google-will-turn-uber-self-driving-home-delivery-service-160425" data-href="http://www.adweek.com/news/technology/6-clues-google-will-turn-uber-self-driving-home-delivery-service-160425" class="markup--anchor markup--p-anchor" rel="nofollow">driving</a> and <a href="http://www.businessinsider.com/google-self-driving-car-delivery-robots-2013-12" data-href="http://www.businessinsider.com/google-self-driving-car-delivery-robots-2013-12" class="markup--anchor markup--p-anchor" rel="nofollow">package delivery</a>, humans will need to re-articulate the roles they’re best suited for. Likely among them will be roles where human sensibilities and synthesis are at the fore, or where human language, nuance, and empathy are necessary to perform complex or sensitive tasks. The full stack employee will help us transition to this future, as they will be key to the new hybrid economy.</p></div></div></section></p>

  490.   </article>

  491. </section>

  492. 

  493. 

  494. <nav id="jumpto">

  495.   <p>

  496.     <a href="/david/blog/">Accueil du blog</a> |

  497.     <a href="https://medium.com/@chrismessina/the-full-stack-employee-ed0db089f0a1">Source originale</a> |

  498.     <a href="/david/stream/2019/">Accueil du flux</a>

  499.   </p>

  500. </nav>

  501. 

  502. <footer>

  503.   <div>

  504.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  505.     <p>

  506.       Bonjour/Hi!

  507.       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>

  508.       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>).

  509.     </p>

  510.     <p>

  511.       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>.

  512.     </p>

  513.     

  514.     <p>

  515.       Voici quelques articles choisis :

  516.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  517.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  518.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  519.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  520.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  521.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  522.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  523.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  524.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  525.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  526.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  527.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  528.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  529.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  530.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  531.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  532.     </p>

  533.     <p>

  534.       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>.

  535.     </p>

  536.     <p>

  537.       Je ne traque pas ta navigation mais mon

  538.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  539.       conserve des logs d’accès.

  540.     </p>

  541.   </div>

  542. </footer>

  543. <script type="text/javascript">

  544.   ;(_ => {

  545.     const jumper = document.getElementById('jumper')

  546.     jumper.addEventListener('click', e => {

  547.       e.preventDefault()

  548.       const anchor = e.target.getAttribute('href')

  549.       const targetEl = document.getElementById(anchor.substring(1))

  550.       targetEl.scrollIntoView({behavior: 'smooth'})

  551.     })

  552.   })()

  553. </script>