Refactoring

by pharma_nsk

HTML

<body>
<div class="block">
<hr>
<h1>When is refactoring needed?</h1>
<table>
<tr>
<td><div class="title">
<img src="https://refactoring.guru/images/content-public/r1.svg"><span>Rule of Three</span></div>
  <ol>
  <li>When you do something for the first time, you are just doing it to get done.</li>
  <li>When you do something similar for the second time, you cringe at having to repeat but do the same thing anyway.</li>
  <li>When you do something for the third time, you start refactoring.</li>
  </ol></td>
<td>
<div class="title"><img src="https://refactoring.guru/images/content-public/r2.svg"> <span>When adding a feature</span></div>
  <ol>
  <li><strong>Refactoring helps to understand other people's code.</strong> If it becomes necessary to add a feature to unclear code, refactoring it makes things obvious for you and those coming after you. </li>
  <li><strong>Refactoring makes it easier to add features.</strong>New features are added more smoothly and with less effort. </li>
  </ol>
  </td>
</tr>
<tr>
  <td>
  <div class="title"> <img src="https://refactoring.guru/images/content-public/r3.svg"><span> When fixing a bug</span></div>
  <p>
  Bugs resemble cockroaches: they love to live in the darkest, mustiest places of your code. Clean up your code and the errors will practically find themselves.
  </p>
  <p>
  Managers appreciate proactive refactoring, since it eliminates the need to create special refactoring tasks later. Happy bosses mean happy programmers!
  </p>
  </td>
   <td>
   <div class="title"><img src="https://refactoring.guru/images/content-public/r4.svg"> <span>During code review</span></div>
  <p>
  Review may be your last chance to tidy up your code before it becomes available to the public.
  </p>
  <p>
  The best way to review is together with the author of the code. You propose changes and decide, together with the author, how difficult it will be to implement various refactoring techniques. Small changes can be made right on the spot.
  </p>
...

CSS

body {background-color:white; font-family:sans-serif;}
.block {width:90%; margin:20px auto;}
h1 {text-align:center; margin-top:30px;}
table {text-align:top; margin-bottom:40px; border-collapse:collapse;}
td {width:50%;  vertical-align: top; padding:5px;}
img { vertical-align: middle; margin-right:10px;} 
 .title {font-weight:bold; font-size:22px; }
 .title span { white-space:nowrap;}
hr {border: none; color: #F2F2F2;  background-color: #F2F2F2; height: 1px;}
li {margin-bottom:10px;}