davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
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.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/2483b6184d1a2e7c96c298db4bd.../index.html

index.html 35KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685 
  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>Our Development Philosophy (1): Architecture, Design Patterns and Programming Principles (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://www.git-tower.com/blog/dev-philosophy-1">

  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.   Our Development Philosophy (1): Architecture, Design Patterns and Programming Principles (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://www.git-tower.com/blog/dev-philosophy-1">Source originale du contenu</a></h3>

  463.     <p>We've certainly experienced these growing pains in our own journey - with <a href="https://www.git-tower.com/" rel="noopener noreferrer" target="_blank">Tower</a> steadily growing to now serve 100,000 users. This post talks about some of the important things we've learned along the way.</p>

  464. 

  465. <div class="framed-content"><p>Part 2 of this series will soon follow. Be sure to <a href="https://www.git-tower.com/newsletter" target="_blank">sign up for our newsletter</a> to be notified.</p></div>

  466. 

  467. <h2>Applications Need Solid Foundations</h2>

  468. 

  469. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-applications-need-solid-foundations.svg" alt=""/></figure>

  470. 

  471. <p><strong>Building even the smallest of software applications is a major investment for most companies.</strong> Your team will spend days, weeks, months, and maybe even years building that application. But not only is this a huge one-time investment - you'll have to continue to put time and effort into it over its complete lifetime. Neither the coding nor the investment will stop when the application launches.</p>

  472. 

  473. <p>Let's take our own product <a href="https://www.git-tower.com" rel="noopener noreferrer" target="_blank">Tower</a> as an example: we had worked for 12 months to develop version 1.0 and bring it to market. But in the six years since then, we have produced many times more code than the original product contained.<br/>

  474. This constant, never-ending maintenance and extension of an application means that its foundation becomes crucial. Much like with a house, it's not a clever idea to save some money by building just a cheap foundation.</p>

  475. 

  476. <p>Logically, one of our biggest goals is to make extending and improving that application as easy and safe as possible. This is where <strong>application architecture</strong> comes into play.</p>

  477. 

  478. <p>Only a really good architecture will help us protect the huge investment that building an application means. We will explore in greater depth what "good" architecture means (in our humble opinion). But the main qualities you'll want to aim for are the same timeless classics in every project: solidity, maintainability, extensibility and scalability.</p>

  479. 

  480. <p>Improving and refactoring an app's architecture will often seem like luxury - or maybe even like wasted time. But in reality, it should better be seen as a necessity, as a crucial and one of the most important duties of an experienced software engineer.</p>

  481. 

  482. <p>When we ask ourselves if we should invest into architectural improvements, the answer is usually yes.</p>

  483. 

  484. <h2>Choosing the Boring Solution</h2>

  485. 

  486. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-choosing-the-boring-solution.svg" alt=""/></figure>

  487. 

  488. <p>When solving a complex problem, it's sometimes very tempting to choose an <em>extraordinary</em> solution. Not only will this solve the problem - but it will also impress your teammates and bring you everlasting glory. 🦄</p>

  489. 

  490. <p>An even better solution, however, would probably be a boring one. One that is easy to understand, even for your junior colleagues. One that is well-known on your platform and language. One that is absolutely <em>not</em> extraordinary.</p>

  491. 

  492. <p>Using such a boring solution means that you're using simple vocabulary, which greatly increases the chances of everybody understanding you. This will make it a lot easier for everybody to follow along - including new team members (and yourself, a couple of weeks after you've written that code).</p>

  493. 

  494. <div class="canned-tweet">  <p class="tweet-button"/>    <blockquote>      <span>"Software development is complex enough by nature. When in doubt, go with the boring solution."      </span>    </blockquote>  </div>

  495. 

  496. <p>When in doubt, go with the boring solution.</p>

  497. 

  498. <h2>Coding the Lego Way</h2>

  499. 

  500. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-coding-the-lego-way.svg" alt=""/></figure>

  501. 

  502. <p>Trick question: if you had both modeling clay and Lego bricks available, what would you choose for building your application? Let's say you went with the modeling clay: pretty easy to shape, bright colors, strawberry taste - what more could you want? But the problems are inevitable as soon as you want to correct, extend, or improve something you've already built. There is no way to easily separate individual parts after you've mixed and mingled them.</p>

  503. 

  504. <p>If you've chosen Lego bricks, on the other hand, subsequent changes are easy: the yellow "authentication" block isn't big enough? Just take it out and replace it with a bigger one. The green "export format" block needs to be extended with a PDF option? Just put an additional light green brick next to it.</p>

  505. 

  506. <p>Modularity, the concept that the Lego bricks symbolize, is synonymous with extensibility, maintainability and longevity of your application. No matter which framework, language, or programming principle you prefer: always shoot for modularity in your code!</p>

  507. 

  508. <h2>Aiming for Simplicity</h2>

  509. 

  510. <p>Acronyms FTW! Car enthusiasts might now think of BMW, but software developers should think of <strong>KISS</strong> and <strong>YAGNI</strong>.</p>

  511. 

  512. <p>"<strong>Keep it simple, stupid</strong>" should remind us that the simple solution will always beat the overengineered solution. The reasons why this is true are almost endless. And they might be easier to understand when looking at the opposite: complex code.</p>

  513. 

  514. <ul>

  515. <li>Complex code is a perfect hiding place for mistakes.</li>

  516. <li>Complex code is hard to understand, for your coworkers and yourself.</li>

  517. <li>Complex code cannot easily be extended.</li>

  518. <li>Complex code cannot be reused. And, last but certainly not least, writing complex code will cause your teammates to brand you as an outlaw.</li>

  519. </ul>

  520. 

  521. <p>When a simpler solution seems sufficient right now, you should always aim for it.</p>

  522. 

  523. <div class="canned-tweet">  <p class="tweet-button"/>    <blockquote>      <span>"Writing complex code will cause your teammates to brand you as an outlaw."      </span>    </blockquote>  </div>

  524. 

  525. <p>When you realize that your solution isn't really necessary at all, you should drop it. This is what YAGNI is about - "<strong>You ain't gonna need it</strong>" reminds us to stay modest when planning the volume and scope of our implementations. Will users really need this feature? Will they need this option <em>within</em> a feature? These questions of course will translate to our code: will we really need that class / module / routine?</p>

  526. 

  527. <h2>Constantly Redefining the Term "Edge Case"</h2>

  528. 

  529. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-edge-case.svg" alt=""/></figure>

  530. 

  531. <p>This point might not apply to every application in the same extent. But with <a href="https://www.git-tower.com">Tower</a> being used by over 80,000 people worldwide, we constantly had to redefine the term "edge case" for us.</p>

  532. 

  533. <p>If your application serves a large user base, you will inevitably have to be more thorough when thinking about how people will use it. Things that rarely occur with a thousand users might become a daily event for 100,000 users.</p>

  534. 

  535. <p>This makes defining the term "edge case" a very individual matter: each and every team has to define for themselves what <em>they</em> consider an edge case. Also, be prepared to constantly redefine this term as your user base grows: Your current edge cases become too common to qualify for that label; and, at the same time, new edge cases will appear.</p>

  536. 

  537. <p>It pays off to invest a little more time thinking about these things before jumping into implementation. This way, you can include graceful handling of these cases already when writing the original implementation. This is much easier than having to catch up on it a couple of weeks later - when both your memory of the problem isn't fresh anymore and when the innocent little edge case has somehow turned out to be a full-blown bug.</p>

  538. 

  539. <h2>Creating Good APIs</h2>

  540. 

  541. <p>I'm sure you've used a third-party API at some point in your dev career - for example to create new contacts in your CRM, to send emails through a newsletter service, or to virtually do anything else with a third-party service.</p>

  542. 

  543. <p>If you've interacted with a couple such APIs, you will certainly have noticed some differences between them: using one was probably more pleasant than the other. It's easy to notice which API was designed thoroughly, by an experienced developer, and probably with a lot of effort and thought. And it's just as easy to be frustrated with an API that was designed in a poor and sloppy way. The former was probably a joy to use, while the latter was probably... not.</p>

  544. 

  545. <p>Since the effects are so obvious, most developers tend to quickly agree that it's almost a duty to design <em>public</em> APIs in a careful and thought-out way. Nobody wants to work with a crappy API - and nobody wants to burden other developers with using <em>their</em> API being crappy.</p>

  546. 

  547. <p>Modern software design puts great emphasis on the concept of "application programming interfaces". However, as most developers already know, the concept goes a lot deeper and is not exclusive to a <em>public</em> interface. Instead, you should build APIs inside your application, for internal use, too.</p>

  548. 

  549. <p>Approaching these <em>internal</em> APIs in exactly the same way you'd create a <em>public</em> one can make a huge difference: your colleagues (and you) will want to interact with this part of your application. Making the interaction as easy as possible for these people is one of the best goals you can have.</p>

  550. 

  551. <p>An easy, thoughtful API is probably the part of your software where quality matters the most. Your colleagues might forgive you a little sloppiness in the internals of this or that method. But they won't (and shouldn't) forgive you for creating a bad API.</p>

  552. 

  553. <h2>Design Patterns</h2>

  554. 

  555. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-design-patterns.svg" alt=""/></figure>

  556. 

  557. <p>Sometimes, a solution is so beautiful, you wish you had the right problem to apply it to. But unfortunately, problems come first. As beautiful as your new screwdriver may be (imagine a handle made of gold, with your initials engraved, of course...), if the problem at hand is to knock in a nail, it makes for only a less than perfect solution.</p>

  558. 

  559. <p>Now, after teaching you all I know about manual craft, let's return to software development - and consider "design patterns" as your toolbox. Every design pattern you know (and understand) is an instrument in your toolbox. It's certainly great to have many of them!</p>

  560. 

  561. <p>The problems start, however, as soon as you let the patterns dictate your coding. They should be there to support you, to propose a proven solution - for the right problem! Programming paradigms should be used where they fit and not be enforced. Your components should be designed with your application's requirements in mind - not with a beautiful design pattern.</p>

  562. 

  563. <div class="canned-tweet">  <p class="tweet-button"/>    <blockquote>      <span>"Design your software with your requirements in mind - not with a beautiful design pattern!"      </span>    </blockquote>  </div>

  564. 

  565. <p>In cases where you've indeed found a helpful pattern for your current problem, there's only one more thing: be sure to really <em>understand</em> the pattern and its consequences on your coding.</p>

  566. 

  567. <h2>Embrace Best Practices</h2>

  568. 

  569. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-reinventing-the-wheel.svg" alt=""/></figure>

  570. 

  571. <p>It's hard to find a programming problem that hasn't been solved by someone else already. And still, developers around the world are reinventing the wheel countless times, every day. I think it's a mixture of different things that encourages people to do this:</p>

  572. 

  573. <ul>

  574. <li>

  575. <p>"<strong>I hate having 400 third-party libraries in my project.</strong>" - Absolutely understandable, no one would love this. The thing is: when I'm talking about "solved problems", such a proven solution doesn't necessarily have to take the form of ready-made <em>code</em>. It could also be a mere concept, a design pattern, or simply a discussion with the guy next door that you know has solved something similar. Solutions can take many forms - so don't limit yourself to just "libraries" and other forms of "complete" solutions.</p>

  576. </li>

  577. <li>

  578. <p>"<strong>It's just a small probem. I'll have my own solution in no time.</strong>" - Every developer with more than a single day of experience has learned a very valuable lesson: Problems are (almost always!) more complex than they first seem. Experienced developers will have learned another lesson: Even with growing experience, it's still somewhere between hard and impossible to see all of the potential complexities that a problem contains. Put simply: we are prone to underestimate problems, again and again.<br/>

  579. All of this means that we should thoroughly evaluate if the problem at hand <em>really has to be</em> solved by you on your own.</p>

  580. </li>

  581. <li>"<strong>I don't like the existing solutions. I can create something better.</strong>" - This could very well be another form of underestimation. Especially if a solution has been around for a while and used in many projects, you should thorougly check if your evaluation of that solution being bad is really correct. Again, we often tend to underestimate the complexities that hide in even the simplest problems. There's also another dimension to this topic: if the solution we're talking about is a commonly agreed way to handle such a problem - either in your team or on your technical platform - then you should again think twice before you go your very own way. The very least you should do is discuss your objections with your teammates.</li>

  582. </ul>

  583. 

  584. <p>All of this means that "best practices" - in the form of proven concepts, conventions, patterns, and high-quality libraries - should always be your first point of reference. After carefully verifying that those best practices aren't suitable for your special case, you're free to go your own way.</p>

  585. 

  586. <h2>Fashion-Driven Development</h2>

  587. 

  588. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-hype.svg" alt=""/></figure>

  589. 

  590. <p>Just for a moment, please imagine we'd be stuck in the eighties: we'd be stuck with rotary phones, flared pants, and terrible haircuts. What an unsettling idea...<br/>

  591. But thankfully, the world has evolved: technical (and fashionable) advancements have made things possible that weren't possible before. New technology has enabled us to create new things.</p>

  592. 

  593. <p>But what about "old" technology? What about the software frameworks and libraries that were created yesterday? Are they, as a natural consequence, yesterday's news?</p>

  594. 

  595. <p>In many fields, especially on the web, it's easy to get this impression: the newer the framework, the better it must be. Everything that was created last week is automatically inferior and, by all means, should be abandoned. But by following every new trend, we chicken out of the hard work to improve the things we already have - and miss out on a lot of quality.</p>

  596. 

  597. <ul>

  598. <li><strong>Quality takes time.</strong> A piece of software that is new hasn't reached its peak, yet. It cannot. It will inevitably contain bugs and other problems that one can only <em>hope</em> to correct with time and lots of hard work. New technology, therefore, isn't always <em>better</em> technology.</li>

  599. <li><strong>Quality needs collaboration.</strong> If, over time, we also seek the advice and feedback of others, we can harness another chance to make better software. Note that "collaboration" in this sense can come in many forms: as feedback and direct contributions, but also simply in the form of <em>usage and trial</em>, e.g. when a library is included in many real-world projects.</li>

  600. <li><strong>Quality grows out of failure.</strong> New things haven't been given the chance to fail, yet. Technology is no exception to this rule: you have to show me perfect code that was written on the first go. Software <em>must</em> have failed and been improved before it can be regarded to be mature.</li>

  601. </ul>

  602. 

  603. <p>While diving into new technology is important, we need to keep an eye on the <em>criteria</em> we use to evaluate it. <em>Novelty</em> isn't the exciting criteria - but <em>usefulness</em> is. <strong>New technology needs to provide actual <em>value</em> over existing solutions</strong>.</p>

  604. 

  605. <p>We don't have to throw older, proven technologies out of the window the same moment we discover something new. Make sure you understand both the old technology and the new one before buying into the next new thing.</p>

  606. 

  607. <div class="canned-tweet">  <p class="tweet-button"/>    <blockquote>      <span>"Software must have failed and been improved before it can reach high quality."      </span>    </blockquote>  </div>

  608. 

  609. <h2>Stack-Overflow-Driven Development</h2>

  610. 

  611. <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/101-dev-philosophy-1/cartoon-stack-overflow-development.svg" alt=""/></figure>

  612. 

  613. <p>Thank God for StackOverflow.com. I seriously can't imagine my (programming) life without it. And with it being one of the most visited sites on the web, I guess I'm not alone.</p>

  614. 

  615. <p>There's a long friendship between me and Stack Overflow. It helped me countless times when I was stuck on a problem. It gave me an idea of how other people had approached the same problem. Sometimes these other people helped me solve my problem. Sometimes they gave me a hint for a possible solution. And sometimes reading their problems <em>at least</em> let me know that I wasn't alone with a miserable bug...</p>

  616. 

  617. <p>After hours or even days of searching and trying different things, your shields are down. You are crawling through your code on all fours like a man who's lost in the desert. But all of a sudden your search is successful! Eureka! Searching Stack Overflow has finally yielded a piece of code that <em>works</em>!</p>

  618. 

  619. <p>That's when you have to watch out and resist the temptation to take code that <em>works</em> for code that's <em>good</em>. What you've found on Stack Overflow is - in all but the rarest cases - not a <em>solution</em> but rather a <em>clue</em>. It can certainly make for a great pointer, but it was <em>not</em> written with your exact problem / requirements / constraints /code base / application in mind. And sometimes, it might simply be a dirty hack.</p>

  620. 

  621. <p>Embrace Stack Overflow as a good source of guidance for certain problems. But also take the time to thoroughly and honestly evaluate if you've found a real, solid solution.</p>

  622.   </article>

  623. </section>

  624. 

  625. 

  626. <nav id="jumpto">

  627.   <p>

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

  629.     <a href="https://www.git-tower.com/blog/dev-philosophy-1">Source originale</a> |

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

  631.   </p>

  632. </nav>

  633. 

  634. <footer>

  635.   <div>

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

  637.     <p>

  638.       Bonjour/Hi!

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

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

  641.     </p>

  642.     <p>

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

  644.     </p>

  645.     

  646.     <p>

  647.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  664.     </p>

  665.     <p>

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

  667.     </p>

  668.     <p>

  669.       Je ne traque pas ta navigation mais mon

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

  671.       conserve des logs d’accès.

  672.     </p>

  673.   </div>

  674. </footer>

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

  676.   ;(_ => {

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

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

  679.       e.preventDefault()

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

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

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

  683.     })

  684.   })()

  685. </script>