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 writing a unit test for a function.
  5. Try changing a variable name and make sure that the change does not break anything.
  6. Try changing a package or module name and make sure that that the change does not break anything.
  7. Try breaking a long method to smaller ones.
  8. Try breaking a large object or file to smaller ones.
  9. Try replacing an algorithm with with a better one.
  10. Try replacing an old component with a newer or better one.
  11. Try recreating the code structure from the separate components. If you cannot do this then try to understand the architecture of the existing source code.
  12. If you get an error when making the changes above then try showing the error on client side.
  13. 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.

 

 

Topic 10 – Software Construction

Why do I need to learn about software construction?

Knowing how to write code does not mean that you know how to create real-world software. In real world, you will need to know how to manage your code, how to read the existing code, how to write code following standard styles, how to ensure that your code is working, how to automate your the process of building, testing and deploying your code, how to handle error in your applications, how to optimize your code for speed, how to write secure code, how to avoid code duplication, how to create readable code, how to create code faster. That's why you need to learn about software construction.

What can I do after finishing learning software construction?

You will know how to create software in a real world team and environment.

Hmm! Is it really useful?

If you have a doubt about its usefulness then you can delay learning it until you are tasked to create a software system and you complete a half of it and are stuck there because when you add one more feature you will get tons of bugs due to the new code. After you finish fixing 1 bug, you get 3 other bugs due to the modified code that fixes the bug.
Another scenario is that when it takes another person 6 months to read and understand the code that you wrote in 3 months in order to fix a bug or to add a new feature.

Alright! What should I do now?

Software construction requires a lot of reading. In order to get familiar with software construction you will need to read at least below books.

Please read this Steve McConnell (2004). Code Complete. Microsoft Press book first.
After that please read this Jon Loeliger and Matthew McCullough (2012). Version Control with Git: Powerful Tools and Techniques for Collaborative Software Development. O'Reilly Media book.
Alternatively, you can read  this Ben Collins-Sussman et al. (2011). Version Control with Subversion book.
After that please read this Robert C. Martin (2009). Clean Code A Handbook of Agile Software Craftsmanship. Pearson Education book.
After that please read 
- this Andy Hunt, Dave Thomas and Matt Hargett (2007). Pragmatic Unit Testing in C# with NUnit. Pragmatic Bookshelf book, and 
- this Kent Beck (2002). Test Driven Development By Example. Addison Wesley book.
After that please read 
- this Martin Fowler et al. (1999). Refactoring Improving The Design Of Existing Code. Addison Wesley book, and 
- its newer version Martin Fowler (2019). Refactoring. Improving the Design of Existing Code. 2nd Edition. Addison-Wesley Professional also.
After that please read this Elton Stoneman (2020). Learn Docker in a Month of Lunches. Manning Publications book.
If you have to work with legacy code then please read 
- this Michael Feathers (2004). Working Effectively with Legacy Code. Prentice Hall PTR book, and
- this Diomidis Spinellis et al. (2003). Code Reading: The Open Source Perspective. Addison-Wesley Professional book.
After that please read 
- this Brian L. Gorman (2020). Practical Entity Framework. Apress book, and
- this Suhas Chatekar (2015). Learning NHibernate 4. Packt Publishing book.
After that please read this "Continuous Integration: Improving Software Quality and Reducing Risk" book.
After that please read this "Matt Perdeck (2010). ASP.NET Site Performance Secrets" book.
After finishing the books please click Topic 11 - Software Testing to continue.