<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: JsRocks</title>
    <description>The latest articles on DEV Community by JsRocks (@leandroskounadis).</description>
    <link>https://dev.to/leandroskounadis</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F111532%2F34e21b5a-2f3a-4c89-b5dc-4354a36efca8.jpg</url>
      <title>DEV Community: JsRocks</title>
      <link>https://dev.to/leandroskounadis</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/leandroskounadis"/>
    <language>en</language>
    <item>
      <title>!Comment your code</title>
      <dc:creator>JsRocks</dc:creator>
      <pubDate>Wed, 22 Jun 2022 10:52:31 +0000</pubDate>
      <link>https://dev.to/leandroskounadis/comment-your-code-548</link>
      <guid>https://dev.to/leandroskounadis/comment-your-code-548</guid>
      <description>&lt;h2&gt;
  
  
  !Comment your code
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;This code is too complex. I will add a comment to help the next dev.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LkbLBoL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2AX2G62h99Fr9FdukeLTwBzA.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LkbLBoL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2000/1%2AX2G62h99Fr9FdukeLTwBzA.png" alt="" width="867" height="469"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is most likely something that every dev has thought of at least once during his career and in most cases has added it.&lt;/p&gt;

&lt;p&gt;Why !commenting is important?&lt;br&gt;
 &lt;em&gt;JS pun intended, but in case you aren’t aware ! means not&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I will start with the obvious.. no matter what programming language you are writing in, its still a programming LANGUAGE. &lt;em&gt;(no the caps were not a mistake)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;For example, when you go shopping and you seek assistance from someone, you need to communicate in a language or way that both of you understand to give them context. Why? well how else will that person understand? &lt;em&gt;(don’t say sign language.. its the same principle :P)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Lets try an example where we don’t express ourselves correctly and just use comments to let the other person know what we want.&lt;/p&gt;

&lt;p&gt;Say I wanted to find out how much 2 bottles of water cost and the only thing I said was &lt;em&gt;“2 money bottle?”&lt;/em&gt; what would the shop assistant understand? Lets use comments like we do when coding to give more context and save the day. &lt;em&gt;”So what I mean is, how much does 2 bottles of water cost?”&lt;/em&gt; Most likely you would get a puzzled face and a comment &lt;em&gt;“why didnt you say so!”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This is the same thing I think when I see something like this&lt;br&gt;
&lt;strong&gt;const plwat2 = (wtr=1) =&amp;gt; wtr*2. //returns the cost of 2 bottles of water&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This comment is necessary cause there is no clue as to what this returns other than the double of wtr. But my initial thoughts are &lt;em&gt;why didnt you say so!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Lets refactor this to promote readability&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;const costOf2WaterBottles = (waterBottlePrice=1) =&amp;gt; waterBottlePrice * 2&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;…and now lets try and read it again&lt;br&gt;
&lt;em&gt;Cost of 2 water bottles is a function that returns the..&lt;/em&gt; Stop! The function name says it all. Thats your starting point and I know what I am expecting from the function now. Why? Cause I gave good descriptive name to the functions which showed the intention. &lt;br&gt;
Continue though to see how the rest reads through. cost of 2 water bottles is a function that returns the water bottle price * 2&lt;br&gt;
makes sense right? well it would.. we are using words so we have the power of naming and context in our hands when writing code.&lt;/p&gt;

&lt;p&gt;Of course this is a fairly simple example but the logic applies to any case even though I am sure somebody may think &lt;em&gt;“try applying this to 50 lines of code and see how it works out…”&lt;/em&gt; &lt;br&gt;
My answer would be &lt;em&gt;50 lines of code is like stating a sentence of 50 lines. Will it make sense?&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Comments are the most unmaintainable part of any codebase&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Why highly unmaintainable one might say. Well first we must think of our processes in a development cycle to ensure maintenance. &lt;br&gt;
1) developing the actual feature&lt;br&gt;
2) code reviewing&lt;br&gt;
3) testing&lt;br&gt;
4) deploying&lt;/p&gt;

&lt;p&gt;During the 4 phases the 2nd is the only one where reviewing it could be done.&lt;br&gt;
How easy can comments be missed or incorrectly reviewed during the review though? &lt;br&gt;
I’d say very easy and the reason is, there is no actual process to safeguard you from incorrect or stale comments.&lt;/p&gt;

&lt;p&gt;An important part of our implementation is testing. Not just manually but through unit and automation tests&lt;/p&gt;

&lt;p&gt;This is most likely the answer to the question why comments should not be added. How will you test your comments? How will you make sure your comments do not become outdated? More importantly why aren’t you using unit tests? If you are then why do you need comments? Your unit test is the documentation of your piece of code. This is what needs correct descriptions. Why? Cause that is part of a process. However unit testing is a whole other topic which we will get into another time.&lt;/p&gt;

&lt;p&gt;The important question when you feel the urge to write a comment is&lt;br&gt;
Can I read this piece of code? If the answer is no, then no-one can. Not even if you after leaving a comment and revisiting it 2 months down the road to refactor something cause you are going to have to read that piece of code line by line and understand what needs to be changed. Even if your code is descriptive you would but the difference being time. How long will it take you to understand both cases?&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We have so many tools at our disposal these days that make comments obsolete and unnecessary&lt;br&gt;
linters, type safety features, unit tests, automation tests, code complexity tools, and of course documenting our feature which is !commenting our code&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;At the end of the day commenting means one or two things&lt;br&gt;
1) Code that isn’t self explanatory because you aren’t giving correct variable, class, function names so things needs to be explained &lt;br&gt;
2) You are doing too many things. &lt;br&gt;
In any case commenting will salvage the moment but not the cause.&lt;/p&gt;

&lt;p&gt;When you read code you need to understand it. Having comments negates the purpose of readable code and allows windows of badly written code because “well it was difficult so i have added a comment”. If you can write good comments and bad code then ask someone to help you write in a way that’s readable. Rethink your variable names, functions and logic&lt;/p&gt;

&lt;p&gt;Don’t use comments as an excuse to write tens or even hundreds of lines code cause the only thing that you are adding to is complexity to the project. There is no such thing as super duper function, its a mess of an implementation that only at the time of implementing it one can read and nobody else.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h1&gt;
  
  
  Commenting will salvage the moment but not the cause!
&lt;/h1&gt;
&lt;h1&gt;
  
  
  In other words the code is complex or non-descriptive!
&lt;/h1&gt;
&lt;/blockquote&gt;

</description>
      <category>cleancode</category>
      <category>bestpractices</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Coronavirus Charts Site</title>
      <dc:creator>JsRocks</dc:creator>
      <pubDate>Mon, 23 Mar 2020 00:03:22 +0000</pubDate>
      <link>https://dev.to/leandroskounadis/coronavirus-charts-site-25p1</link>
      <guid>https://dev.to/leandroskounadis/coronavirus-charts-site-25p1</guid>
      <description>&lt;p&gt;Over the last week I have been working on this site about &lt;a href="https://coronaviruscharts.site/"&gt;coronavirus&lt;/a&gt; to help visualise the way coronavirus is affecting the whole world. The charts get updated from data retrieved by scraping the web from sites like &lt;a href="coronavirus.jhu.edu"&gt;Johns Hopkins University&lt;/a&gt; and &lt;a href="https://www.worldometers.info/coronavirus/"&gt;worldometers&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;The site gets updated automatically (every 6 hours due to pipeline restrictions of the free version I am using) many times throughout the day as well as manually every few hours. &lt;/p&gt;

&lt;p&gt;I will keep on adding features I think are necessary so you are more than welcome to add comments in the section bellow and I will try my best to add them if they seem necessary. &lt;/p&gt;

&lt;p&gt;The site is quite responsive so you should be able to use it easily on any screen size mobile/tablet/desktop.&lt;/p&gt;

&lt;p&gt;The two main pages the site has at the moment is visualising information on a daily basis and visualising total information. You can choose to see the information for the whole world and per country by selecting the corresponding country on the map.&lt;/p&gt;

&lt;p&gt;I hope you find this site informative as the sole purpose of it is to help visualise this data I have managed to collect.&lt;/p&gt;

&lt;p&gt;The web app has been built using VueJS, Vuetify for shared components and Google Charts for displaying the data.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://coronaviruscharts.site/"&gt;https://coronaviruscharts.site/&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  stayathome
&lt;/h1&gt;

</description>
      <category>coronavirus</category>
      <category>stayathome</category>
      <category>dontgoout</category>
      <category>vue</category>
    </item>
  </channel>
</rss>
