A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 34KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736
  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>How to perform a good code review (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="https://blog.alphasmanifesto.com/2016/11/17/how-to-perform-a-good-code-review/">
  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. How to perform a good code review (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="https://blog.alphasmanifesto.com/2016/11/17/how-to-perform-a-good-code-review/">Source originale du contenu</a></h3>
  445. <p style="text-align: justify;">I recently wrote about <a href="https://blog.alphasmanifesto.com/2016/07/11/how-to-create-a-good-pull-request/">how to create a good pull request</a>, this is, how to make your code changes easy to review and discuss. Now we&#8217;re going to talk about the second part: reviewing someone else&#8217;s code. This puts you on the reviewers side, and hopefully the person submitting code did follow our guidelines to make your life easier.</p>
  446. <p style="text-align: justify;">There are several approaches you can take to review the code, but we&#8217;re going to enumerate a checklist that you could use to minimize the usage of your time and the efficiency of the code review.</p>
  447. <p style="text-align: justify;"><span id="more-5613"></span></p>
  448. <h2>Disclaimer</h2>
  449. <p style="text-align: justify;">Every code, every project every team is different. This is just a set of guidelines, not a set of rules that should be applied dogmatically.</p>
  450. <p style="text-align: justify;">Also, note that code reviews are pretty much a matter of looking into code and of communicating what you found in a review. As such, most of what is mentioned here will circle around how the communication should be rather than how code should look like. Determining what is appropriate for the code in your project depends on your situation.</p>
  451. <h2>1. Make the most involved person be the one answering questions</h2>
  452. <p style="text-align: justify;">Assuming you&#8217;re not the person that actually wrote the code (because you&#8217;re reviewing it), you need to accept that you don&#8217;t have all the context of what made it happen or what gave it its shape. With that, don&#8217;t assume everything is a mistake, but it&#8217;s ok to point out the difference with what you expected, and let the other person explain themselves.</p>
  453. <p style="text-align: justify;">Keep this in mind as your approach to every question or detail:</p>
  454. <ol>
  455. <li style="text-align: justify;"><strong>If it&#8217;s definitely a problem, point out why is it a problem.</strong> Explain what are the consequences of the change you find problematic. If you have a solution, propose it. If you don&#8217;t but you have a guideline on how to approach the problem, mention it. If you think a particular design pattern would help, mention it. If you think there&#8217;s another feature or portion of the code that already solves this problem, point it out. Whatever you can point to the solution will help the provided solution not deviate from what is acceptable to you.</li>
  456. <li style="text-align: justify;"><strong>If it&#8217;s not a problem, don&#8217;t point it out like one.</strong> Make sure that your doubts and suggestions are perceived as that: doubts and suggestions. If the reviewed person thinks that something is a problem they&#8217;ll go ahead and change it, maybe without previous discussion. This may, ironically, become a problem if the code keeps changing too much from what it was intended. Or worse, you could frustrate the reviewed person by requesting too many iterations on the same piece of code because you weren&#8217;t completely clear on what needed to be done. Just be honest with yourself and identify what of the things you don&#8217;t like are based on taste and which ones are real problems that should be fixed.</li>
  457. <li style="text-align: justify;"><strong>Let questions be questions.</strong> Let the other person answer them, instead of hinting at an answer yourself. This is, don&#8217;t make rhetoric questions, and don&#8217;t corner the other person into providing the answer that you want them to give.</li>
  458. <li style="text-align: justify;"><strong>Let them do the investigation.</strong> They&#8217;re most comfortable with the code and they know it better than you. They&#8217;ll know better and find the answer to the questions quicker that you probably will. However, there might be value in investigating yourself, if you want to prioritize understanding the code inner workings besides the time of the review itself.</li>
  459. </ol>
  460. <h3>Bad examples</h3>
  461. <blockquote>
  462. <p style="text-align: justify;">Please change this so it performs better.</p>
  463. </blockquote>
  464. <ol>
  465. <li style="text-align: justify;">It assumes that there&#8217;s something performing poorly.</li>
  466. <li style="text-align: justify;">Even worse, it doesn&#8217;t point out what <em>it</em> is, assuming that the reviewed person already knows what you&#8217;re referring to.</li>
  467. <li style="text-align: justify;">Why is it performing poorly? How should it be changed?</li>
  468. <li style="text-align: justify;">Is performance even a problem? What is this impacting? (Mention it.)</li>
  469. </ol>
  470. <h3>Good examples</h3>
  471. <blockquote><p>I believe that this SQL query has the correct result set, but I think it may be performing table scans or it may not be making a good use of indexes, but</p>
  472. <p style="text-align: justify;">I&#8217;m not entirely sure. Can you check the execution plan and see if the performance in database can be improved in any way? Maybe we can change the query, maybe we can add indexes. Remember that users will be impacted each time they see the main listing.</p>
  473. </blockquote>
  474. <p style="text-align: justify;">It acknowledges what is right about this piece (the SQL result).</p>
  475. <ol>
  476. <li style="text-align: justify;">It mentions a reasonable doubt and expresses it as a doubt. (&#8220;I&#8217;m not sure&#8221;)</li>
  477. <li style="text-align: justify;">It indicates what may be the source of the problem (&#8220;table scans&#8221;, &#8220;unused indexes&#8221;)</li>
  478. <li style="text-align: justify;">It suggests a course of action (&#8220;check the execution plan&#8221;)</li>
  479. <li style="text-align: justify;">Suggests possible corrections (&#8220;change the query&#8221;, &#8220;add indexes&#8221;).</li>
  480. <li style="text-align: justify;">It indicates what the real-life impact of such a change will be (&#8220;users listings&#8221;).</li>
  481. </ol>
  482. <h2>2. Always provide a reason</h2>
  483. <p style="text-align: justify;">When you&#8217;re suggesting changes or pointing out a problem, you need to specify what the reason there is behind it. The point of doing so is allowing the other people involved in the conversation search the right solution along with you or come up with solutions themselves.</p>
  484. <p style="text-align: justify;">This is specially important when you don&#8217;t mention explicitly what the intended approach should be, and so just pointing out a problem does not help them avoid the underlying reason.</p>
  485. <h3>Bad examples</h3>
  486. <blockquote>
  487. <p style="text-align: justify;">Typo here.</p>
  488. </blockquote>
  489. <p style="text-align: justify;">This is a bad example because if the one that made the typo wasn&#8217;t aware of it, it&#8217;s likely that they won&#8217;t be able to recognize it. Unless, of course, it&#8217;s really <em>obvvvious.</em> Regardless, it&#8217;s always a good idea to provide a good spelling.</p>
  490. <blockquote>
  491. <p style="text-align: justify;">Need to add authentication here.</p>
  492. </blockquote>
  493. <p style="text-align: justify;">&#8220;Here&#8221; is quite ambiguous, but still, unless the developer being reviewed is already in line to what the process of adding authentication to a part of the code means, it&#8217;s likely that they will either end up replicating something that&#8217;s close to this portion of code, or just trying to guess what the reviewer meant. Being specific about what you had in mind the code should have helps reviewed code come closer to what you want it to be.</p>
  494. <h3>Good examples</h3>
  495. <blockquote>
  496. <p style="text-align: justify;">Here it spells &#8220;typ&#8221; but it should say &#8220;type&#8221;.</p>
  497. </blockquote>
  498. <p style="text-align: justify;">Correction from the first bad example: it shows what the typo is, it should how it should be corrected.</p>
  499. <blockquote>
  500. <p style="text-align: justify;">This will allow any non-authenticated user to invoke this method. This could create a security problem where we have non-authenticated third parties changing the internal state of the system. Please add the authentication attribute to prevent this situation. You can follow the same pattern that we have in UserController.cs.</p>
  501. </blockquote>
  502. <p>Explains the problem, hopefully preventing further instances from occurring now that the developer understands the rationale behind it, and provides guidance into how to solve it.</p>
  503. <h2>3. What to check for</h2>
  504. <p style="text-align: justify;">Here is a long list that you should keep in mind when reviewing. For all of this, if the answer does not leave you comfortable, you found yourself a problem and you want to leave feedback to be corrected in that pull request.</p>
  505. <p style="text-align: justify;">However, also remember that you should pick your battles and that being right about every little discussion is not really <em>that</em> important, but rather what you&#8217;re balancing to have a good quality product. (Are you going to lose a good developer because you disagree on indentation? Hold your horses.)</p>
  506. <p style="text-align: justify;">You may choose to review all the code for the first point, then the second and so on, or you may choose to use this as a checklist on every piece of code that you review. I have ordered them from most important to less important, in my personal opinion:</p>
  507. <h3>3.1. Quick checklist</h3>
  508. <ol>
  509. <li style="text-align: justify;">Is the change introduced feasible?
  510. <ol>
  511. <li>Does it do what it&#8217;s supposed to do? Maybe check with the original requirement, if it&#8217;s written down somewhere.</li>
  512. <li>Are the assumptions and constraints that it makes to work assumptions that can be taken in this system?</li>
  513. <li>If it causes impact to users, is the impact acceptable? (E.g. a new large JavaScript library being added to a web app.)</li>
  514. <li>Does the change avoid incurring into costs? (Servers, licenses, processor usage, etc.)</li>
  515. <li>Is the change legal? (Does it avoid unpaid proprietary libraries, code taken from another source, incompatible licenses, unprotected data, etc.?)</li>
  516. </ol>
  517. </li>
  518. <li style="text-align: justify;">Does it have the right technical direction?
  519. <ol>
  520. <li>Is the current design appropriate for the solution being sought?</li>
  521. <li>Does it introduce the right amount of complexity for the change required?</li>
  522. <li>Does it introduce the lowest amount of failure points possible?</li>
  523. <li>Is it flexible? Is it flexible in the direction that the product will evolve?</li>
  524. <li>Does it avoid introducing third-party libraries and code when a simpler or more appropriate solution will do?</li>
  525. </ol>
  526. </li>
  527. <li style="text-align: justify;">Does it handle errors and exceptions appropriately?
  528. <ol>
  529. <li>If they should, are they logged?</li>
  530. <li>If they should, are they shown to the user with the right message?</li>
  531. <li>If they should, are they relayed back to the development team?</li>
  532. <li>Are they handled? Are they handled in the right section of code?</li>
  533. </ol>
  534. </li>
  535. <li style="text-align: justify;">Does it have the right amount of instrumentation?
  536. <ol>
  537. <li>Does it instrument meaningful data?</li>
  538. </ol>
  539. </li>
  540. <li style="text-align: justify;">Is it secure?
  541. <ol>
  542. <li>Does it avoid disclosing any data that should be kept private?</li>
  543. <li>Does it encrypt data that should not be plainly stored or transmitted?</li>
  544. <li>Does it sanitize or validate inputs or third-party systems?</li>
  545. </ol>
  546. </li>
  547. <li style="text-align: justify;">Does it avoid technical debt?
  548. <ol>
  549. <li>If not, are the debt items documented close to the code with their reason?</li>
  550. <li>Are the reasons for not addressing them right now valid?</li>
  551. <li>Is the technical debt introduced acceptable?</li>
  552. </ol>
  553. </li>
  554. <li style="text-align: justify;">Is it tested?
  555. <ol>
  556. <li>Does it have validation/whitelisting/blacklisting for input data?</li>
  557. <li>Does it use the right size of variables for data involved? (E.g. <em>short amountOfPeopleInStadium</em> probably won&#8217;t suffice.)</li>
  558. <li>Does it have unit tests? Are they good tests?</li>
  559. <li>Does it have integration tests? Are they good tests?</li>
  560. <li>Does it have automation tests? Are they good tests?</li>
  561. <li>If fixing a bug, do the tests properly recreate the original bug?</li>
  562. </ol>
  563. </li>
  564. <li style="text-align: justify;">Is it readable?
  565. <ol>
  566. <li>Does it have any spelling errors and typos?</li>
  567. <li>Does it have any weird acronyms?</li>
  568. <li>For written content, is it understandable and proper? (i.e., proper English or the language that you&#8217;re using for documentation and comments)</li>
  569. <li>Are comments meaningful and useful?</li>
  570. </ol>
  571. </li>
  572. <li style="text-align: justify;">Is the code maintainable?
  573. <ol>
  574. <li>If it introduces any new &#8220;concepts&#8221; to the system, are they documented somewhere?</li>
  575. <li>Does it avoid any weird code constructions? (&#8220;Clever code&#8221;)</li>
  576. <li>Does the naming of variables and methods align with their meaning? (Can you tell what it is based on its title?)</li>
  577. </ol>
  578. </li>
  579. <li>Does it have the right coding style?
  580. <ol>
  581. <li style="text-align: justify;">Variable / method / class casing</li>
  582. <li style="text-align: justify;">Indentation</li>
  583. <li style="text-align: justify;">Bracing</li>
  584. <li style="text-align: justify;">Commenting density</li>
  585. </ol>
  586. </li>
  587. </ol>
  588. <h2>4. Read the PR in the right way</h2>
  589. <p style="text-align: justify;">Depending on the type of project and the nature of the change being introduced, it will make more sense that you go through those changes in a different way. Think of it like this: when you&#8217;re looking for a particular piece of failed code, you usually debug mentally, reading the code from input down to processing, following the logic across its calls. Reading code like this gives you a good idea of the dependencies between components and how they interact, but very likely they cover one or two different scenarios.</p>
  590. <p style="text-align: justify;">Reading the code top to bottom helps you think about the abstractions being made and if they make sense for flexible code that needs to support different scenarios, but they don&#8217;t obviously tell you if the dependencies are redundant or sufficient or even lacking &#8212; at least not right away.</p>
  591. <p style="text-align: justify;">When you look at different modules or namespaces on their own, you&#8217;ll have a good idea about the way that the subsystems interact and their organization, which will help you spot problems in the general design and architecture, but not so much about the details of the implementation.</p>
  592. <p style="text-align: justify;">Make sure to think about this when looking at the reviewed code, and look at it under different eyes and different order. Just make sure to cover it all at least once.</p>
  593. <h2>5. Give feedback in a way that it can be discussed without confusions</h2>
  594. <p style="text-align: justify;">It&#8217;s very likely that you&#8217;ll give several feedback points to the original developer. Furthermore, some items may be quite specific while others may be open-ended or up to discussion. If your feedback is a single block of text, it&#8217;ll be difficult to engage in a conversation without confusing different points.</p>
  595. <p style="text-align: justify;">I actually like to take advantage of some service&#8217;s features like GitHub and Bitbucket to comment on particular lines. That way, I provide a comment that is already in some context, and they allow for discussions particular to that one piece of feedback. Even better, if the files are changed (very likely because of the feedback given) the thread is hidden so that the outdated original feedback is not visible interrupting the code flow.</p>
  596. <p style="text-align: justify;">GitHub has now adopted a code-review approach where you queue up all your messages and you send them all together as part of the review, that you can later approve or reject. Similar to what Microsoft did on TFS online. This is useful because you might be leaving comments about the code and later on realize that your comment would be better rephrased or plain wrong. If you do this, make sure to re-read all comments before sending.</p>
  597. <p style="text-align: justify;">If you don&#8217;t use those services, still, following that approach has its benefits. Write down on your own what the concern is and where, and when you finished reviewing the code, go to the relevant part and leave the comment.</p>
  598. <h2>6. Avoid ping-pongs</h2>
  599. <p style="text-align: justify;">Make sure to give the fullest review as possible, instead of providing each piece for the developer to go fix. Regardless if you provide it in a single block of text or in separate comments, try to give them all at the same time so that the developer (and you) can make the best use of both of your times. Coming back with a change to find out that something else needed to be fixed is not going to be funny to the developer and always having something else to check is going to be exhausting to you.</p>
  600. <p style="text-align: justify;">Sometimes people will give code feedback by email. If that&#8217;s the case, structure your email so that they can answer in line and you can start removing parts of the conversation as you reach conclusions.</p>
  601. <h2>7. Be polite</h2>
  602. <p style="text-align: justify;">When providing feedback, do not ever approach that communication from the vision of &#8220;this is wrong&#8221;, even if it is. Always approach it from a &#8220;it could be improved / it should be improved&#8221;. or even as a question, unless you&#8217;re absolutely sure. Remember that, first of all, there&#8217;s a person on the other side, and second, they&#8217;re doing their best. Even if there are technological, knowledge, experience or time limitations that made the developer turn in non-acceptable code, remember that they&#8217;re doing this for the best of the project.</p>
  603. <p style="text-align: justify;"><a href="http://www.theregister.co.uk/2016/07/11/linus_torvalds_in_sweary_rant_about_punctuation_in_kernel_comments/">Linus Torvals-style rants</a> are pretty fun to read, but remember it&#8217;s hurtful to be on the receiving end. Also, why make enemies if you don&#8217;t need to?</p>
  604. </article>
  605. </section>
  606. <nav id="jumpto">
  607. <p>
  608. <a href="/david/blog/">Accueil du blog</a> |
  609. <a href="https://blog.alphasmanifesto.com/2016/11/17/how-to-perform-a-good-code-review/">Source originale</a> |
  610. <a href="/david/stream/2019/">Accueil du flux</a>
  611. </p>
  612. </nav>
  613. <footer>
  614. <div>
  615. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  616. <p>
  617. Bonjour/Hi!
  618. 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>
  619. 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>).
  620. </p>
  621. <p>
  622. 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>.
  623. </p>
  624. <p>
  625. Voici quelques articles choisis :
  626. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  627. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  628. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  629. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  630. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  631. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  632. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  633. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  634. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  635. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  636. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  637. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  638. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  639. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  640. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  641. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  642. </p>
  643. <p>
  644. 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>.
  645. </p>
  646. <p>
  647. Je ne traque pas ta navigation mais mon
  648. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  649. conserve des logs d’accès.
  650. </p>
  651. </div>
  652. </footer>
  653. <script type="text/javascript">
  654. ;(_ => {
  655. const jumper = document.getElementById('jumper')
  656. jumper.addEventListener('click', e => {
  657. e.preventDefault()
  658. const anchor = e.target.getAttribute('href')
  659. const targetEl = document.getElementById(anchor.substring(1))
  660. targetEl.scrollIntoView({behavior: 'smooth'})
  661. })
  662. })()
  663. </script>