Tag Archives: Code Reading

How to Quickly and Confidently Read Code?

Motivation:

You need to read existing source code to add your feature or fix a bug or to replicate its functions in another language or system.

Solution:
  1. Try building and running the code without any modification.
  2. Try building and running the code with your inputs.
  3. Try modifying or adding simple UI elements without touching the business logic or data layer.
  4. Try changing a variable name and making sure that the code is not broken.
  5. Try breaking a long method to smaller ones.
  6. Try breaking a large object or file to smaller ones.
  7. Try replacing an algorithm with with a better one.
  8. Try replacing an old component with a newer or better one.
  9. If you get an error when making the changes above then try showing the error on client side.
  10. If you cannot show the error on client side then try identifying the logic flow of the code related to the error, debug information, and learn about new terminologies or concepts in the code.

Example:

const maskPhone = (val) => {
    const x = val.replace(/\D+/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
    return !x[2] ? x[1] : `(${x[1]}) ${x[2]}` + (x[3] ? `-${x[3]}` : ``);
};
export { maskPhone }

If you are not sure about what the JavaScript code above does then try to learn

Another example:

<div class="container">
    <iframe class="responsive-iframe" src="https://www.youtube.com/embed/u9Dg-g7t2l4"></iframe>
</div>
.container {  
    position: relative;  
    overflow: hidden;  
    width: 100%;  
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Style the iframe to fit in the container div with full height and width */
.responsive-iframe {  
    position: absolute;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;
}

If you are not sure about what the HTML and CSS code above  do then try to learn

  • how many ways an element can be placed in a web page (a document),
  • what is the position relationship between an element and its parent,
  • what is the position relationship between an element and its siblings,
  • what is the position relationship between an element and the document root, and
  • what position: relative , position: absolute , overflow: hidden do.