{"id":73,"date":"2025-01-08T03:14:36","date_gmt":"2025-01-08T03:14:36","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/colincheng\/?p=73"},"modified":"2025-01-08T03:21:10","modified_gmt":"2025-01-08T03:21:10","slug":"73","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/colincheng\/2025\/01\/08\/73\/","title":{"rendered":"Clean Code and Code Smells: Lessons Learned"},"content":{"rendered":"\n<div class=\"wp-block-cover is-light wp-duotone-midnight\" style=\"min-height:196px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-yellow-background-color has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"180\" class=\"wp-block-cover__image-background wp-image-79\" alt=\"\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/8097\/files\/2025\/01\/20250107_1916_Minimalist-Code-Serenity_simple_compose_01jh1yjm4zeawvaj56a5nab1dv.gif\" data-object-fit=\"cover\" \/><div class=\"wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n\n\n\n<p><\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/8097\/files\/2025\/01\/smooth-chill-jazzy-music-275395.mp3\"><\/audio><\/figure>\n\n\n\n<p>Have you ever revisited an old project and left completely lost by your own code? If so, you&#8217;ve experienced the problem of code that&#8217;s not quite as clean, readable, or maintainable as it could be. This week, I explored articles on clean code and code smells, and dove into  a few chapters of Robert Martin&#8217;s Clean Code and Martin Fowler&#8217;s Refactoring. I&#8217;ll share one practice I&#8217;m excited to start doing more often, and one practice I intend to avoid.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Something I&#8217;m Doing More Often: Meaningful Variable and Function Names<\/h4>\n\n\n\n<p>One key takeaway from Robert Martin&#8217;s book, <em><a href=\"https:\/\/ptgmedia.pearsoncmg.com\/images\/9780132350884\/samplepages\/9780132350884.pdf\">Clean Code: A Handbook of Agile Software Craftsmanship<\/a><\/em>, is the importance of clear, descriptive names [1]. In my code from the 2024 summer  CS340 Into to Database course, I noticed a few spots where variable names weren&#8217;t as self-explanatory as they could be:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/github.com\/cchengbb\/cs340web\/blob\/main\/public\/js\/add_dogAtEvent.js\"><img loading=\"lazy\" decoding=\"async\" width=\"1004\" height=\"328\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/8097\/files\/2025\/01\/image.png\" alt=\"\" class=\"wp-image-74\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/8097\/files\/2025\/01\/image.png 1004w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/8097\/files\/2025\/01\/image-300x98.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/8097\/files\/2025\/01\/image-768x251.png 768w\" sizes=\"auto, (max-width: 1004px) 100vw, 1004px\" \/><\/a><\/figure>\n\n\n\n<p> Figure 1 CS340 Code Snippet. <em>Source<\/em>: <a href=\"https:\/\/github.com\/cchengbb\/cs340web\/blob\/main\/public\/js\/add_dogAtEvent.js\">https:\/\/github.com\/cchengbb\/cs340web\/blob\/main\/public\/js\/add_dogAtEvent.js<\/a><\/p>\n\n\n\n<p>While this is workable, renaming these variable to more descriptive terms can help future readers (and my future self) quickly understand the purpose:<\/p>\n\n\n\n<div class=\"wp-block-cover\" style=\"min-height:245px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>\/\/ Improved snippet with more descriptive names<br>\/\/ &#8230;<br>let dogIDField = document.getElementById(&#8220;input-dogID-ajax&#8221;);<br>let eventIDField = document.getElementById(&#8220;input-eventID-ajax&#8221;);<\/p>\n\n\n\n<p>let dogID = dogIDField.value;<br>let eventID = eventIDField.value;<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p>Even though this is a small change, it makes the variables more meaningful at a glance. According to Martin&#8217;s emphasis on clarity, &#8220;meaningful variable names&#8221; is one of the simplest yet most powerful improvements you can make to your codebase (Martin 2008).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Something I&#8217;m Avoiding: Repetitive (Duplicated) Code<\/h4>\n\n\n\n<p>From Martin Fowler&#8217;s Refactoring (especially in the &#8220;<a href=\"https:\/\/dl.ebooksworld.ir\/motoman\/Refactoring.Improving.the.Design.of.Existing.Code.2nd.edition.www.EBooksWorld.ir.pdf\" data-type=\"link\" data-id=\"https:\/\/dl.ebooksworld.ir\/motoman\/Refactoring.Improving.the.Design.of.Existing.Code.2nd.edition.www.EBooksWorld.ir.pdf\">Bad Smell in Code<\/a>&#8221; chapter), the concept of &#8220;Duplicate Code&#8221; is highlighted as one of the biggest hazards [2]. During my project, I noticed I had nearly identical AJAX request setups across multiple file, add_dog.js, add_event.js, add_location.js, and so forth. Each file had the same pattern:<\/p>\n\n\n\n<div class=\"wp-block-cover\" style=\"min-height:277px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>\/\/ Example from add_event.js<br>var xhttp = new XMLHttpRequest();<br>xhttp.open(&#8220;POST&#8221;, &#8220;\/add-event-ajax&#8221;, true);<br>xhttp.setRequestHeader(&#8220;Content-type&#8221;, &#8220;application\/json&#8221;);<\/p>\n\n\n\n<p>\/\/ Example from add_location.js<br>var xhttp = new XMLHttpRequest();<br>xhttp.open(&#8220;POST&#8221;, &#8220;\/add-location-ajax&#8221;, true);<br>xhttp.setRequestHeader(&#8220;Content-type&#8221;, &#8220;application\/json&#8221;);<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p>Figure 2 CS340 Code Snippet. <em>Source<\/em>: <a href=\"https:\/\/github.com\/cchengbb\/cs340web\/tree\/main\/public\/js\">https:\/\/github.com\/cchengbb\/cs340web\/tree\/main\/public\/js<\/a><\/p>\n\n\n\n<p>The repetition here is a classic \u201ccode smell.\u201d If I need to change how I set headers or handle errors, I have to modify multiple files, risking inconsistencies. By creating a small utility function (for example, <code>sendPostRequest<\/code>) that handles the AJAX logic, I can call it from each file and reduce duplication:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ In a shared utilities.js file\nfunction sendPostRequest(url, data, onSuccess, onError) {\n  let xhttp = new XMLHttpRequest();\n  xhttp.open(\"POST\", url, true);\n  xhttp.setRequestHeader(\"Content-type\", \"application\/json\");<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>  xhttp.onreadystatechange = () =&gt; {\n   if (xhttp.readyState === 4) {\n    if (xhttp.status === 200) {\n       onSuccess(xhttp.response);\n     } else {\n       onError(xhttp.status);\n     }\n    }\n   };\n   xhttp.send(JSON.stringify(data));\n }<\/code><\/pre>\n\n\n\n<p>Then in each form handler (e.g., <code>add_event.js<\/code>, <code>add_location.js<\/code>), I can simply do:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sendPostRequest(\n\"\/add-event-ajax\",\ndata,\n(response) =&gt; {\n   addRowToTable(response);\n   clearFormFields();\n },\n (status) =&gt; {\n    alert(<span style=\"background-color: initial;font-family: inherit;font-size: inherit\">Error. Status code: ${status}<\/span>);\n }\n);<\/code><\/pre>\n\n\n\n<p>This not only keeps my code DRY (\u201cDon\u2019t Repeat Yourself\u201d) but also makes maintenance and refactoring simpler.<\/p>\n\n\n\n<p>By focusing on small, incremental improvements, like better naming conventions (from <a href=\"https:\/\/ptgmedia.pearsoncmg.com\/images\/9780132350884\/samplepages\/9780132350884.pdf\" data-type=\"link\" data-id=\"https:\/\/ptgmedia.pearsoncmg.com\/images\/9780132350884\/samplepages\/9780132350884.pdf\">Clean<\/a><a href=\"https:\/\/github.com\/jnguyen095\/clean-code\/blob\/master\/Clean.Code.A.Handbook.of.Agile.Software.Craftsmanship.pdf\"> Code<\/a>) and removing duplication (from <a href=\"https:\/\/dl.ebooksworld.ir\/motoman\/Refactoring.Improving.the.Design.of.Existing.Code.2nd.edition.www.EBooksWorld.ir.pdf\">Refactoring<\/a>), I can make my code significantly more readable and maintainable. Adopting these practices ensures that when I return to my project in the future, I&#8217;ll spend less time deciphering variable names or refactoring nearly identical functions scattered throughout my files.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Reference<\/strong><\/p>\n\n\n\n<p>[1] R. C. Martin, Clean code: A handbook of agile software craftsmanship, 1st ed.<br>Upper Saddle River, NJ, USA: Pearson, 2008. [Online] Available: <a href=\"https:\/\/ptgmedia.pearsoncmg.com\/images\/9780132350884\/samplepages\/9780132350884.pdf\">https:\/\/ptgmedia.pearsoncmg.com\/images\/9780132350884\/samplepages\/9780132350884.pdf<\/a><\/p>\n\n\n\n<p>[2] M. Fowler, Refactoring: Improving the design of existing code, 2nd ed.<br>Boston, MA, USA: Addison-Wesley Professional, 2018. [Online] Available: <a href=\"https:\/\/dl.ebooksworld.ir\/motoman\/Refactoring.Improving.the.Design.of.Existing.Code.2nd.edition.www.EBooksWorld.ir.pdf\">https:\/\/dl.ebooksworld.ir\/motoman\/Refactoring.Improving.the.Design.of.Existing.Code.2nd.edition.www.EBooksWorld.ir.pdf<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever revisited an old project and left completely lost by your own code? If so, you&#8217;ve experienced the problem of code that&#8217;s not quite as clean, readable, or maintainable as it could be. This week, I explored articles on clean code and code smells, and dove into a few chapters of Robert Martin&#8217;s &hellip; <a href=\"https:\/\/blogs.oregonstate.edu\/colincheng\/2025\/01\/08\/73\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Clean Code and Code Smells: Lessons Learned<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":14484,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-tech-trails"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/users\/14484"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":4,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts\/73\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}