<?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: Neal Burger</title>
    <description>The latest articles on DEV Community by Neal Burger (@codeandchaos).</description>
    <link>https://dev.to/codeandchaos</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%2F626529%2F2e8685db-42d9-4b23-b9fa-329a9cbb10e0.jpeg</url>
      <title>DEV Community: Neal Burger</title>
      <link>https://dev.to/codeandchaos</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/codeandchaos"/>
    <language>en</language>
    <item>
      <title>Ready Set Action</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Mon, 05 Sep 2022 22:02:03 +0000</pubDate>
      <link>https://dev.to/codeandchaos/ready-set-action-14bg</link>
      <guid>https://dev.to/codeandchaos/ready-set-action-14bg</guid>
      <description>&lt;p&gt;&lt;strong&gt;Photo bySevenStorm&lt;/strong&gt; from &lt;a href="https://www.pexels.com/photo/123-let-s-go-imaginary-text-704767/"&gt;Pexels&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You are at your computer, you are motivated and fully engaged to start working on your personal project. Now is the time to take action. - Only a few seconds later you are staring at a blank screen. You have no idea how to start your project. You start to overthink your project. You realize developing Software is hard and your brain prefers to do easy things. Before you even notice, it is way past your bedtime. - You basically spent the entire evening procrastinating instead of working on your project.&lt;/p&gt;

&lt;p&gt;There must be a quicker way to get started and remove the obstacles that prevent you from taking action. Let's have a look at a couple of strategies that might help.&lt;/p&gt;

&lt;h1&gt;
  
  
  The Obstacles
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Overcoming The Blank Canvas Paralysis
&lt;/h2&gt;

&lt;p&gt;Artists have problems when they start to create an artwork, they take a look at a blank canvas and think:&lt;br&gt;
Look at it's beauty, the infinite white, the perfection, every part of the canvas is perfect. You are a flawed human that does not know anything - how could you even create any sort of masterpiece that will justify destroying the perfection of this empty page.&lt;/p&gt;

&lt;p&gt;Something similar happens when you open up your code editor and you stare into the blankness of the page. You can create anything. In most cases you do not yet fully understand the problem you want to solve. Your solution could make things even worse, "every line written is a potential bug". So you are paralysed to start.&lt;/p&gt;

&lt;p&gt;What really helps is to &lt;strong&gt;limit your options&lt;/strong&gt; and make a more clarify for yourself what you want to do. I want to create a drawing gives you unlimited options - however if you say I want to draw a cartoon cat at nighttime in Paris, limits your options and helps you to get started. The clearer your vision is what you want to do the easier it becomes to execute your plan.&lt;/p&gt;

&lt;p&gt;You have to get started with your project. Starting a project always requires a lot of willpower and energy. Once the project has started it is much easier to continue working on the project as the project gains momentum.&lt;/p&gt;

&lt;p&gt;To start any software project, just create a simple "Hello World" - Program. It is really that simple. Just by creating this simple program. You made a decision on the fundamentals of the project - which programming language, the initial tech framework etc. You then extend that project and then rewrite it to the project you want to create.&lt;/p&gt;

&lt;p&gt;You cannot make a wrong decision. The worst thing that might happen is that there is some work is required later on. You can always rewrite and switch your tech stack later on. It does not really matter, every tech stack has its trade offs. Later when your project is successful you can reevaluate your initial decision. And if needed rewrite the entire project in a more efficient way. The important thing is that the project gets started - and remember:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It is better to make mistakes and correct them later on than not starting.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Overcoming Procrastination
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Procrastination is &lt;strong&gt;the habit of delaying an important task, usually by focusing on less urgent, more enjoyable, and easier activities instead&lt;/strong&gt;. &lt;a href="https://www.mindtools.com/pages/article/newHTE_96.htm#:~:text=Procrastination%20is%20the%20habit%20of,potential%20and%20undermine%20your%20career."&gt;MindTools&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Procrastination is probably the most fancy word you for saying that you are distracted by the internet. The only way of beating Procrastination is &lt;strong&gt;to take action and get the hard task done&lt;/strong&gt;. In short stop reading this article and get to the task that you are putting off. It is that simple.&lt;/p&gt;

&lt;p&gt;Unfortunately you just continued to read this article, so lets dig a little deeper what is going on and how to develop a strategy to procrastinate less. Your brain is not convinced that the effort to complete the action will match the reward. Most commonly people procrastinate with social media, it is always unexpected and you will get some emotional response, if is positive, funny, or something that makes you angry - it is an easy task that will always reward your brain that it did the task.&lt;/p&gt;

&lt;h3&gt;
  
  
  How do you beat Procrastination
&lt;/h3&gt;

&lt;p&gt;Every person is different, here are a couple of common strategies that can help. You can tackle Procrastination from a couple of angles: Internal Dialog, Distractions, Rewards and Commitment&lt;/p&gt;

&lt;h4&gt;
  
  
  Internal Dialog
&lt;/h4&gt;

&lt;p&gt;Your internal dialog is going to try to persuade you to do other tasks. In the worst case even just start to become negative and steal the energy needed to complete the task. By adjusting your internal dialog to something more positive can help you complete the task.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Forgive yourself for procrastinating in the past&lt;/strong&gt;. You should not beat yourself up because you did not yet complete the task. It does not matter - you can forgive yourself and look forward. Have a positive outlook for the future and that you are going to complete the task.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;You are in control of your actions, you are actively choosing to do tasks&lt;/strong&gt; - You feel disempowered when you constantly are telling yourself "I have to do this task". It makes you feel that the tasks you are doing are out of your control. When you rephrase it to: "I choose to do this task". You actively make yourself aware that you are choosing to do this task. You are in control and the task is not forced upon you.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Reward
&lt;/h4&gt;

&lt;p&gt;Most work does not have any meaningful reward attached to it. If you can find a way to increase the reward the easier it becomes to get the task completed.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Define and give yourself a Reward for completing the task.&lt;/strong&gt; - Your brain wants to be rewarded for doing the hard task, it will make it easier to convince yourself to get the task done when you exactly know what the reward in the end is going to be.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Do everyday the most annoying thing first.&lt;/strong&gt; This has a built in reward. The reward of completing this task is that all other tasks that you have to complete that day will be more pleasant. In addition you do not have to dread this task the entire day.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Handle your Distractions
&lt;/h4&gt;

&lt;p&gt;In reality you still really do not want to do the task. You will welcome any distraction that comes along to avoid continue work on the task. By minimizing your distractions you are just more focused on the task at hand and more likely to complete the task.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Immediately complete the task&lt;/strong&gt; - If it is a small task just do it immediately. This just eliminates the possibility of procrastination from the beginning. In addition you do not waste any time thinking about the task and feeling bad for not yet have done this small little task.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Control your Distractions&lt;/strong&gt; - Be more aware of what is distracting you from completing your task. Minimize as many distractions as possible.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Commit yourself to the task
&lt;/h4&gt;

&lt;p&gt;When you get around to doing a task is a question of priority. If something is really important for you, you are going to take care of it. By committing yourself to a task, you will feel obliged to actually finish the work.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Internal Commitment&lt;/strong&gt; - You make a contract with yourself that you will complete a task. Treat your Todo List as a collection of contracts that you must fulfill. They have a clear definition what needs to get done, a specific time when you will do them and when they have to be completed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;External Commitment&lt;/strong&gt; - Basically ask someone to check up on you. This can be a major productivity booster. Peer pressure definitely works and it works especially well when you are working together to a similar goal. This is the principle behind self-help groups. &lt;em&gt;Note&lt;/em&gt;: This also can be a terrible idea. It is much more fun to procastinate with a friend.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In short: &lt;strong&gt;You have to show up and focus to complete the task&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Be aware of "Productive"-Procrastination
&lt;/h3&gt;

&lt;p&gt;There is a piece of advice when you are writing a book: "Do not tell anyone that you are writing a book". The reason is, while you are talking about your book, you are actually not writing your book.&lt;/p&gt;

&lt;p&gt;The problem is that you already spent mental energy thinking about your book. Your mind marks it mentally as a completed task for the day. In reality you did not write a single page.&lt;/p&gt;

&lt;p&gt;A similar thing happens when you say: "I cannot start the project, I have to read up on the subject first." Developers will spend hours reading books and experimenting with tutorials, watching tech talks - But actually they were avoiding the work on the actual project.&lt;/p&gt;

&lt;p&gt;You have to make a distinction if you are reading for your own personal entertainment (i.e. procrastination), or if you are reading to take action. When you are reading to take action, you are taking notes, you are letting the ideas of the book influence your thinking and inspire you to take the next step with your project.&lt;/p&gt;

&lt;h4&gt;
  
  
  More Resources
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.mindtools.com/pages/article/newHTE_96.htm"&gt;Anti Procrastination Strategies&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Analysis Paralysis
&lt;/h2&gt;

&lt;p&gt;Engineers are trained to analyze every situation. They deeply think about every scenario and every edge case that could go wrong. This might be the greatest strength and the greatest weakness of engineers.&lt;/p&gt;

&lt;p&gt;Instead of taking action and fix things along the way engineers sit down and start to analyze the problem. Every edge case and every scenario how the project could fail. They are so engaged to focus on the faults of the idea that they never start.&lt;br&gt;
Even if the project has a 99% success rate an engineer will struggle to get started. It is impossible that the risk of failure is only 1% the analysis must be flawed.&lt;br&gt;
In short, they start to overthink and over-analyze effectively stopping them from making any decision. They are stuck in &lt;a href="https://en.wikipedia.org/wiki/Analysis_paralysis"&gt;Analysis Paralysis&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;You have to come to the realization that every possible solution will have flaws. In reality if your solution covers 70% of cases you have a more than average solution to a problem. The remaining issues can be solved over time, or can be solved with another solution.&lt;/p&gt;

&lt;p&gt;Making a decision, committing to any plan of action is better than doing nothing. When you are coding, you will have to rework your code eventually. The rework is always going to be simpler than getting started. No matter what you do your decision will have some sort of downsides.&lt;/p&gt;

&lt;h2&gt;
  
  
  Overcoming Fear of Failure
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;‘From failure we learn, from success not so much’. Lewis in Meet the Robinsons&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The important thing is to accept failure and learn from it. You will recover. And because you have failed it is more likely you will succeed the next time.&lt;/p&gt;

&lt;p&gt;In fact you should seek out to fail faster - because with each failure you learn something new that will improve your project and it will make your success even more likely.&lt;/p&gt;

&lt;h4&gt;
  
  
  More Resources
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=rDjrOaoHz9s"&gt;Fail Faster&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Overcoming Fear of Success
&lt;/h2&gt;

&lt;p&gt;Often you do not have a fear of failure, but actually a fear of success. When the project succeeds then your life will change. Frankly no matter what your situation is, you prefer the status quo. It feels familiar, controllable and why do you want to change. It is much easier to imagine this new life compared to put in the hard work to actually obtain that life.&lt;/p&gt;

&lt;p&gt;The reality is everything is always constantly changing. By working on your project you are taking control of your life and that makes it easier to embrace the constant changes.&lt;/p&gt;

&lt;h1&gt;
  
  
  Developing a System to make it easier to start
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Promodoro Timer
&lt;/h2&gt;

&lt;p&gt;A Promodoro Timer follows a very simple concept: 25min work then 5min break&lt;br&gt;
You can choose whatever time interval suits you best. It is a fixed time of work and then a fixed time of relaxation. It is a very powerful technique if done correctly.&lt;/p&gt;

&lt;p&gt;To make the promodoro timer technique work, these prerequisites must be met:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You commit to the task&lt;/li&gt;
&lt;li&gt;You commit to the deadlines (i.e. the task must be completed and more importantly the reward activity must end on the timer)&lt;/li&gt;
&lt;li&gt;The task is predefined - and must be completed during this time and you do not permit interruptions&lt;/li&gt;
&lt;li&gt;You know what activity will relax you after the task.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What happens if I do not met these prerequisites?&lt;/strong&gt; You just found a way to procrastinate on a timer. When the prerequisites are not met suddenly the timer tracks 5min work and 25min procrastination.&lt;/p&gt;

&lt;h2&gt;
  
  
  5 Tasks a Day
&lt;/h2&gt;

&lt;p&gt;There is a simple technique to figure out what you should focus on:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Write down the 25 Items that you need to do.&lt;/li&gt;
&lt;li&gt;Identify the 5 most important tasks&lt;/li&gt;
&lt;li&gt;Only focus on these 5 items before moving on to the other items on the list&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Overall this technique can be useful for organizing your day to day todo list. It is very likely that you will only find the time to complete 5 tasks per day.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: This technique is often associated with Warren Buffet and how to achieve your life goals. He however debunked this myth. He does not use this technique and it apperantly also does not work when applied for life goals.&lt;/p&gt;

&lt;h2&gt;
  
  
  Create Streaks
&lt;/h2&gt;

&lt;p&gt;The more often you work on your project the easier it becomes to get started. Working on your project should become part of your daily routine. One way to establish this is to create chains in your calendar.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Get a wall calendar&lt;/li&gt;
&lt;li&gt;Put a big x on every day when you worked on your project.&lt;/li&gt;
&lt;li&gt;After a couple of days you will have a chain. &lt;strong&gt;Your only job is to not break the chain.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The beauty of this technique is, that it automatically creates a visualization of your progress. At the same time it is a visual reminder that you should work on your project. It does not care about if you are motivated, how much time you spend working on the task, or if you are getting the results you expected. It only cares about that you show up and get the work done.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Important:&lt;/strong&gt; You are allowed to break the chain. Breaking the chain does not mean that you failed. It just means that on that day other things were more important. That is ok. Just start a new chain and see how long you can make it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: This technique is often referred to the "Seinfeld Strategy". Jerry Seinfeld, was asked in a &lt;a href="https://www.reddit.com/r/IAmA/comments/1ujvrg/comment/ceitfxh/"&gt;Reddit AMA&lt;/a&gt; if the legendary story was true, however he debunked this story.&lt;/p&gt;

&lt;h2&gt;
  
  
  Accomplishment Journal
&lt;/h2&gt;

&lt;p&gt;A similar method of visualizing your projects achievements is to have an accomplishment journal. In this journal you keep track of all the accomplishments of the day.&lt;/p&gt;

&lt;p&gt;It is very simply to create this journal.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Set up a reminder in your calendar to write down your achievements of the day&lt;/li&gt;
&lt;li&gt;Write down all of your accomplishements of the day. It does not matter if they are big or small.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Just by writing your accomplishments down you will recieve a confidence boost. When you have self-doubt you can flip through the pages and remember your accomplishments.&lt;br&gt;
In addition the journal helps you keep you on track and visualizes your progress. In addition it motivates you to do at least one thing that you can write down in your journal.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: This journal helps you to communicate your achievements to your manager in a weekly/ monthly status report. It also can help when you are appling for jobs, you can then easily reference your achievements.&lt;/p&gt;

&lt;h1&gt;
  
  
  Consistency is Key
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;Every journey starts with a single step.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But to complete the journey you must take one step after another. Now I wish you good luck on working on your project.&lt;/p&gt;

&lt;p&gt;If you like leave a link to your project in the comments.&lt;/p&gt;

</description>
      <category>motivation</category>
    </item>
    <item>
      <title>Writing Shell Scripts in JavaScript with ZX</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Thu, 23 Jun 2022 00:00:00 +0000</pubDate>
      <link>https://dev.to/codeandchaos/writing-shell-scripts-in-javascript-with-zx-1pnm</link>
      <guid>https://dev.to/codeandchaos/writing-shell-scripts-in-javascript-with-zx-1pnm</guid>
      <description>&lt;p&gt;&lt;strong&gt;Photo by JÉSHOOTS&lt;/strong&gt; from &lt;a href="https://www.pexels.com/photo/blurred-motion-of-illuminated-railroad-station-in-city-253647/"&gt;Pexels&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I was working in the past on a project, that was still requiring us to do manual releases. We followed a short guide consisting of Terminal commands. Only a minor adjustment was needed for each new release. We could have greatly benefited from writing a simple bash script. However I am not a sysadmin and tend to rarely write shell scripts. It would take way too much time to debug and create a working bash script. We decided copy and pasting code is just more efficient.&lt;/p&gt;

&lt;p&gt;Luckily the developers at Google also did not want to write bash scripts. However apperantly they got the resoruces to create something even better:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/google/zx"&gt;zx - A tool for writing better scripts&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It allows you to combine JavaScript with the Bash commands to create complex scripts. At its core its just a simpler wrapper syntax for working with NodeJS &lt;code&gt;child_process&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Release Script
&lt;/h2&gt;

&lt;p&gt;Our build steps are basically:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Bump the version in package.json with the command &lt;code&gt;npm version patch&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Pass the new version number to the &lt;em&gt;releaseCMD&lt;/em&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The reason to do this manually was that there is no easy way to read the new version number from the &lt;code&gt;package.json&lt;/code&gt; to store it in a variable to pass it into the &lt;em&gt;releaseCMD&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The ZX Script
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Output Text to the console
&lt;/h3&gt;

&lt;p&gt;Its always useful to output stuff to the console. You can simply use &lt;code&gt;console.log("Hello")&lt;/code&gt; to output text on the console.&lt;/p&gt;

&lt;h3&gt;
  
  
  Execute Commands
&lt;/h3&gt;

&lt;p&gt;As alternative if you want to execute any terminal command like &lt;code&gt;echo&lt;/code&gt; to output text. You write it as&lt;br&gt;
&lt;code&gt;$\&lt;/code&gt;&lt;code&gt;echo Hello&lt;/code&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Read JSON
&lt;/h3&gt;

&lt;p&gt;The &lt;a href="https://github.com/google/zx"&gt;Github Page of ZX&lt;/a&gt; has a list of typical commands and examples what you can do with them. One of them is to read the package version&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const { version } = await   fs.readJson("./package.json");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Let's put it all together
&lt;/h3&gt;

&lt;p&gt;I created a directory &lt;code&gt;scripts&lt;/code&gt; that will contain all the future projects scripts and created the file &lt;code&gt;release.mjs&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/scripts/release.mjs&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Running Release Script&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;$&lt;/span&gt;&lt;span class="s2"&gt;`npm version patch`&lt;/span&gt; &lt;span class="c1"&gt;// Bumps package version&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;version&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;readJson&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./package.json&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Reads new package version&lt;/span&gt;
&lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;$&lt;/span&gt;&lt;span class="s2"&gt;`echo releaseCMD -version &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;version&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt; &lt;span class="c1"&gt;//Replace with actual command&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Error: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;stderr&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; ExitCode &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exitCode&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;//Logs Error to the terminal&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Executing the Script
&lt;/h2&gt;

&lt;p&gt;You either can install zx globally with the command&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i -g zx
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;or you can run it with &lt;code&gt;npx zx &amp;lt;scriptname&amp;gt;&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Personally as soon as I am done with the script I don't want to deal with this anymore. I want that every team member can use the script without any explanation.&lt;br&gt;
Thus I added it as a script in &lt;code&gt;package.json&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/package.json&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"release"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npx zx ./scripts/release.tjs"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can run it like any other script &lt;code&gt;npm run release&lt;/code&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;Unfortunatly I did not have a lot of time to play around with ZX. I am sure that it is capable of creating very complex scripts.&lt;/p&gt;

&lt;p&gt;For my usecase I did not look into executing scripts as an admin, or creating cross platform scripts etc. Again I am not a sysadmin.&lt;/p&gt;

&lt;p&gt;In the end, I think ZX is a great way of creating shell scripts without having to deal with BASH. Thus with your TypeScript/JavaScript knowledge you can quickly create scripts to automate the boring stuff.&lt;/p&gt;

</description>
      <category>code</category>
      <category>typescript</category>
      <category>bash</category>
      <category>automation</category>
    </item>
    <item>
      <title>Typescript - Myths vs Reality</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Sun, 12 Jun 2022 20:37:15 +0000</pubDate>
      <link>https://dev.to/codeandchaos/lessons-learned-from-a-take-home-assignment-gone-wrong-3210</link>
      <guid>https://dev.to/codeandchaos/lessons-learned-from-a-take-home-assignment-gone-wrong-3210</guid>
      <description>&lt;p&gt;There is always some resistance when you introduce TypeScript to a codebase. You probably will run into a couple of misconceptions and myths surrounding TypeScript. Let’s debunk the following myths:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;TypeScript Slows Down Development&lt;/li&gt;
&lt;li&gt;JSDoc Typings are enough&lt;/li&gt;
&lt;li&gt;TypeScript prevents all bugs&lt;/li&gt;
&lt;li&gt;TypeScript adds clutter to the codebase and more bugs&lt;/li&gt;
&lt;li&gt;TypeScript Compiler Errors are no real bugs&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  1. TypeScript slows down development
&lt;/h2&gt;

&lt;p&gt;TypeScript requires some additional setup, needs to be compiled, and you have to write more code. Thus TypeScript development must be slower.&lt;/p&gt;

&lt;p&gt;Lets take a look at the entire development process:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Initial Setup&lt;/li&gt;
&lt;li&gt;Compiling&lt;/li&gt;
&lt;li&gt;Writing Code&lt;/li&gt;
&lt;li&gt;Reading Code&lt;/li&gt;
&lt;li&gt;Changing Code&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Setup
&lt;/h3&gt;

&lt;p&gt;JavaScript projects usually will set up the BabelJS compiler and a packager like Webpack.&lt;/p&gt;

&lt;p&gt;TypeScript projects are set up identically. The only difference is that you have to add an additional BabelJS Plugin to remove the TypeScript typings. In addition you use the TypeScript compiler to check types.&lt;/p&gt;

&lt;p&gt;The effort for both is identical.&lt;/p&gt;

&lt;h3&gt;
  
  
  Compiling
&lt;/h3&gt;

&lt;p&gt;A typical Frontend Development project will have two separate processes for development and for production. The compilation time of both processes can be quite different.&lt;/p&gt;

&lt;p&gt;Compiling during development you will be using BabelJS for JavaScript or TypeScript, the processing time is identical. For TypeScript additional type checking will be done by your code editor in the background.&lt;/p&gt;

&lt;p&gt;Compiling for production will add for TypeScript an additional compile step for type checking. It can be run in a separate process. It can add a small overhead. However since a production build is run by a CI/CD Pipeline it should not impact your development velocity.&lt;/p&gt;

&lt;p&gt;The effort for TypeScript is minimally higher.&lt;/p&gt;

&lt;h3&gt;
  
  
  Writing Code
&lt;/h3&gt;

&lt;p&gt;When writing new code developers have to start to consider types - this makes writing TypeScript ‘slower’ than writing JavaScript. This is a very good thing. It is the first minimal step to actually think about code design before you code.&lt;/p&gt;

&lt;p&gt;For developers that are used to dynamic typing it is initially hard to take types into consideration. But with experience and familiarity you will barely notice a difference.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reading Code
&lt;/h3&gt;

&lt;p&gt;However, writing is only a small part of development. Reading code is a much larger part of development. TypeScript significantly improves readability.&lt;/p&gt;

&lt;p&gt;Look at this example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initJS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initTS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;debugMode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With &lt;code&gt;initJS&lt;/code&gt; you are going to have to read the entire implementation to figure out what parameters you can pass to &lt;code&gt;options&lt;/code&gt;. Yes, I know you could use JSDoc to describe it, however as you can see with this example the developer that wrote the code did not add that comment.&lt;/p&gt;

&lt;p&gt;With the &lt;code&gt;initTS&lt;/code&gt; it is clear that you can set the parameter &lt;code&gt;debugMode&lt;/code&gt;. In Addition, not only is it easier for humans to read the code, your IDE can now also provide you with significantly more accurate autocomplete. Saving you even the switch to the file when you want to call the function.&lt;/p&gt;

&lt;p&gt;Adding types will not only improve your function signatures, it will also make it much easier to understand the implementation. In addition it prevents code smells like reusing the same variable for multiple different contexts.&lt;/p&gt;

&lt;h3&gt;
  
  
  Changing Code
&lt;/h3&gt;

&lt;p&gt;With JavaScript if you change a function signature, you have to manually check every piece of code that is calling the function. If you miss a single adaption, you will first see it when you run that piece of code. If that piece of code is not run very often, or a different developer encounters it you will waste a lot of time on debugging to figure out what exactly happened.&lt;/p&gt;

&lt;p&gt;With TypeScript this is done by the TypeScript compiler and it provides you an output of all the instances where the code will now run into a problem. While you are developing you will be able to fix the issues immediately.&lt;/p&gt;

&lt;h3&gt;
  
  
  Summary
&lt;/h3&gt;

&lt;p&gt;Does TypeScript really slow down development?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Initial Setup - Identical&lt;/li&gt;
&lt;li&gt;Compile Time - Identical&lt;/li&gt;
&lt;li&gt;Writing Code - JavaScript minimally faster&lt;/li&gt;
&lt;li&gt;Reading Code - TypeScript faster&lt;/li&gt;
&lt;li&gt;Changing Code - TypeScript significantly faster&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Yes, TypeScript adds a small overhead to your project, but at the same time it drastically increases your development velocity.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. You do not need TypeScript - JSDoc static typing is enough
&lt;/h2&gt;

&lt;p&gt;JSDoc allows you to define types with the &lt;a href="https://jsdoc.app/tags-type.html"&gt;@type syntax&lt;/a&gt;. This allows you to document your code like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="cm"&gt;/**
 * Simple Addition
 *
 * @param {number} a
 * @param {number} b
 * @returns number
 */&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;

&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;12&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Argument of type 'string' is not assignable to parameter of type 'number'.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This annotation is a significant improvement compared to undocumented code. In addition code editors will now take this comment and interpret it and display warnings in your JavaScript code.&lt;/p&gt;

&lt;p&gt;The argument is now: &lt;strong&gt;Well we already have basic type support why do we need the typescript compiler?&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You only get warnings for files you are currently looking at, you are not aware of files that stopped working because you changed the function signature. The TypeScript compiler will throw an error for all files impacted by the change.&lt;/li&gt;
&lt;li&gt;They are comments, developers tend to forget to update them correctly.&lt;/li&gt;
&lt;li&gt;You are limited how to defining complex objects or how to reuse them.&lt;/li&gt;
&lt;li&gt;You do not benefit from the existing TypeScript definitions provided by the TypeScript community.&lt;/li&gt;
&lt;li&gt;By using JSDoc you are utilising already the TypeScript compiler. Your code editor just runs it in the background to generate the warnings. You can learn more about the feature &lt;a href="https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc"&gt;here&lt;/a&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Using JSDoc is a great starting point to get your team familiar with defining types.&lt;/p&gt;

&lt;p&gt;It does not make sense to only use a small subset of TypeScript with an overly complex syntax that some developers forget to update.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. TypeScript prevents all bugs
&lt;/h2&gt;

&lt;p&gt;No it does not. It prevents the most common type of bug in JavaScript a TypeError.&lt;/p&gt;

&lt;p&gt;You should use testing strategy like Test Driven Development to eliminate even more bugs. Ideally you are using a combination of TypeScript and tests. By using TypeScript it makes it easier to write the tests, and you are not constantly writing tests to ensure the correct type.&lt;/p&gt;

&lt;p&gt;AirBnB estimated that 38% of bugs can be prevented by using TypeScript. Even without any other benefits - just to reduce 38% of bugs is already a very big deal.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. More clutter more bugs
&lt;/h2&gt;

&lt;p&gt;More Lines of code more potential bugs. Yes, this partially true. With TypeScript you introduce the possibility of incorrectly defining your TypeScript types. Again, TypeScript is not a test strategy. You have to add testing.&lt;/p&gt;

&lt;p&gt;However if we add the same functionality of TypeScript to JavaScript, you will see that TypeScript actually reduces clutter:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;addJS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;number&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;TypeError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;a is not a number&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;number&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;TypeError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;b is not a number&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Compare this to a similar code in TypeScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;addTS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;While it may appear to be more clutter in TypeScript, most likely you are not writing any type checks in your current JavaScript code, and have many potential sources for Type Errors.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. TypeScript Compiler Errors are no real bugs
&lt;/h2&gt;

&lt;p&gt;You have a legacy codebase - the team is convinced - the code is ‘bug free’. Now you add TypeScript to this codebase and suddenly TypeScript outputs hundreds of compiler errors.&lt;/p&gt;

&lt;p&gt;The first reaction is going to be denial, these ‘errors’ are not real bugs. There is no need to fix them.&lt;/p&gt;

&lt;p&gt;This is true for the moment. The code is seemingly working correctly if nothing changes, the inputs are always the same, the output is going to stay the same. In practice however you are adding new features and are fixing bugs in the ‘bug free’ software. Things are changing all the time in the codebase.&lt;/p&gt;

&lt;p&gt;You should be treating the TypeScript compile errors as bugs, so that you can fix them as fast as possible. Only a small percentage of ts errors are false positives, usually because of some sort of compiler setting.&lt;/p&gt;

&lt;p&gt;Having TypeScript compile errors is an indicator of an unstable system. When you start to analyse and fix the compiler errors you will find:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Actual bugs - In a large codebase, you can be sure that there are several bugs caused by TypeErrors&lt;/li&gt;
&lt;li&gt;Outdated Libraries&lt;/li&gt;
&lt;li&gt;Problematic patterns that were used in the codebase&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;All of these things have to be fixed eventually. The code quality will be greatly increased when you address these issues. If you do not fix these issues in a timely matter newly introduced errors may be lost in the existing errors and you will continue to waste a lot of time debugging.&lt;/p&gt;

&lt;p&gt;When all compile errors are resolved you will experience all the benefits of TypeScript.&lt;/p&gt;

&lt;p&gt;The first major benefit is that you cut down your debugging time. By reconfiguring your pipeline to fail as soon as it detects a new TypeScript error, you can prevent most TypeErrors of ever reaching production. This early detection of errors will tell you exactly which line is causing the issue and you then can fix it in a matter of minutes, instead of debugging code for several hours.&lt;/p&gt;

&lt;p&gt;With the power of compile errors, you can fix these errors before running your code which in turn greatly Increases your development velocity.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bonus: Python is maintainable and does not need types
&lt;/h2&gt;

&lt;p&gt;A large Python project is also subject to similar problems like a large JS codebase. To make Python more maintainable Python 3.5 introduced types in a very similar fashion as TypeScript.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.python.org/3/library/typing.html"&gt;https://docs.python.org/3/library/typing.html&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Summary
&lt;/h1&gt;

&lt;p&gt;Most of these myths were created by a lack of experience of using TypeScript. It is understandable where the core idea of these myths come from.&lt;/p&gt;

&lt;p&gt;Starting to use TypeScript is hard. The reason for that is because you’re starting to think about code differently. You’re starting to take into consideration what datatypes are used. This shift of thinking makes the entire development less error prone.&lt;/p&gt;

&lt;p&gt;The reality is, using TypeScript will improve you codebase in many different aspects. The collective benefits far outweigh the negatives.&lt;/p&gt;

&lt;p&gt;But, nobody really can be convinced a myth is wrong until they experience for themselves. So go and start using and experiencing TypeScript on your own.&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>Lessons Learned from a ‘take home’ assignment gone wrong</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Thu, 17 Mar 2022 16:32:29 +0000</pubDate>
      <link>https://dev.to/codeandchaos/lessons-learned-from-a-take-home-assignment-gone-wrong-4kfd</link>
      <guid>https://dev.to/codeandchaos/lessons-learned-from-a-take-home-assignment-gone-wrong-4kfd</guid>
      <description>&lt;p&gt;Applying for Software Engineering Jobs has really become very strange. I have now been working in the industry for over 15+ years. During this time it seems that hiring has really become broken. Let’s see how I failed this next interview.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Process
&lt;/h2&gt;

&lt;p&gt;This time around, a recruiter contacted me directly. I had a pleasant 30min chat with the recruiter and was then given a 6h take home assignment to complete and would then be invited to a 1hour technical discussion interview and then after that a 1hour interview with HR - and then they would present me an offer.&lt;/p&gt;

&lt;p&gt;I agreed on doing the challenge under the condition that i can publish my result on my blog. Unfortunately I did not get that in writing - and the recruiter then ‘forgot’ our arrangement. I removed all original questions and code references from this article.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Assignment
&lt;/h2&gt;

&lt;p&gt;Overall a small Admin interface and a view for users should be created. I was given access to a git repo. In the repo i found a working backend in Java or NodeJS server with SQLite DB and working REST-API with Swagger Documentation was provided. In the Readme four very vaguely defined tasks&lt;/p&gt;

&lt;h2&gt;
  
  
  Task analysis
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. It should look pretty
&lt;/h3&gt;

&lt;p&gt;That the program should be aesthetically pleasing is not the core skill of a developer - it is a core skill of a designer. Even a designer would reject this task as it is too vague and undefined. In a professional setting this would mean creating several different drafts and then reevaluating with the client what style he prefers.&lt;/p&gt;

&lt;p&gt;I would assume the company provides their own corporate style-guide you should follow and when working at the company it is more clear on which direction the UI design should be. However for an external person just joining this is not clear.&lt;/p&gt;

&lt;p&gt;This is not really a task that a developer should solve. But in the end the biggest problem with this task is that it cannot be evaluated objectively.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. It should be easy to use
&lt;/h3&gt;

&lt;p&gt;Again a very vague requirement. If you do not know who your target audience is you cannot make it 'easy to use'.&lt;/p&gt;

&lt;p&gt;A CommandLine tool may be very easy to use for some users, but adding a GUI may have the benefit that more people can visually comprehend it - equally being easy to use.&lt;/p&gt;

&lt;p&gt;Equally there is no mention if it should be used on mobile or web or command-line. Again I have to wonder how will this task be objectively evaluated?&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Create an Admin Interface
&lt;/h3&gt;

&lt;p&gt;Now we are getting somewhere. Here there is also a little more information: It should contain 2 views, one for assets and one for users.&lt;/p&gt;

&lt;p&gt;Sadly in the descriptions functions you would expect from an admin interface are missing. For example ‘delete all assets’ was described, however the api only allowed to delete a single asset at a time (and it probably would make sense to add a delete single asset functionality to the UI.&lt;/p&gt;

&lt;p&gt;This task at least can be evaluated objectively. Either the functionality is there or not.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Write High Quality Code and add Tests
&lt;/h3&gt;

&lt;p&gt;Again this is meaningless without specific metrics. How is High Quality Code defined? How should the code be optimised? Most pieces of code can be optimised either for memory usage or cpu usage. Which one should you focus on?&lt;/p&gt;

&lt;p&gt;Similarly you might want to optimise your code for readability and maintainability but sacrifice memory efficiency. There are always tradeoffs that you are going to make.&lt;/p&gt;

&lt;p&gt;Without any clear metric how this task is objectively evaluated. There was not even a hint on how high the code coverage is suppose to be.&lt;/p&gt;

&lt;h2&gt;
  
  
  Feedback
&lt;/h2&gt;

&lt;p&gt;I completed the challenged after 6 hours. Implemented all functions and a couple of additional helper functions and had a unit test code coverage of around 90%. I used Typescript with React functional components with hooks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Recruiter&lt;/strong&gt;: The quality of your solution is significantly lower than that of the other candidates. Is this really the way how you coded at your last company?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; I worked around 6 hours on this, just as you requested&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Recruiter&lt;/strong&gt;: Oh, yes thats the minimum - we expect you to be passionate about programming and spend at least 12-18hours on this task.&lt;/p&gt;

&lt;p&gt;They then also reversed their decision that I am allowed to publish the question on my blog. They then continued to basically claim ownership over my code, despite that I never signed a NDA.&lt;/p&gt;

&lt;p&gt;Of course this immediately erodes any trust in the company. If you are not allowed to publish the solution you can assume a the company wants to claim ownership for your code and use the result of the coding challenge in their own product. - There was probably never a real job, they just used you to provide them with free labor.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lessons Learned
&lt;/h2&gt;

&lt;p&gt;The next time I will be very careful If i really would want to spend my time doing a take home assignment. I have enough professional experience that should be enough for a company to make an informed decision if they want to hire me or not.&lt;/p&gt;

&lt;p&gt;Just imagine using this kind of interview process for any other profession, “oh first show me that you know fix my broken toilet - then i will decide if I will hire you as a plumber”&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If the task is so broadly formulated that you can do whatever, you only can fail the task&lt;/li&gt;
&lt;li&gt;Get all additional agreements with the recruiter in writing&lt;/li&gt;
&lt;li&gt;Don’t work for free for companies&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>career</category>
    </item>
    <item>
      <title>Lessons learned from Technical Interview - Find Pairs in Array</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Sat, 03 Jul 2021 13:56:26 +0000</pubDate>
      <link>https://dev.to/codeandchaos/technical-interview-find-pairs-in-array-1618</link>
      <guid>https://dev.to/codeandchaos/technical-interview-find-pairs-in-array-1618</guid>
      <description>&lt;p&gt;Here are my notes on a recent Frontend Dev - ReactJS job. There are a lot of lessons learned.&lt;/p&gt;

&lt;h2&gt;
  
  
  Before the Interview
&lt;/h2&gt;

&lt;p&gt;I was asked that I prepare my editor of choice before the interview. The interview duration would be set to &lt;strong&gt;45min&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I was going to use VSCode and prepared a create-react-app default app.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Technical Problem
&lt;/h2&gt;

&lt;p&gt;Given an array of numbers &lt;em&gt;arr&lt;/em&gt;, find the pairs that add up to the given number &lt;em&gt;k&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Clarifying Questions
&lt;/h2&gt;

&lt;p&gt;I only asked a single clarifying question: Is an optimized solution or just a solution that works? Answer: “Haha, well a solution that works is totally fine”&lt;/p&gt;

&lt;p&gt;Later this would turn out to be one of my biggest mistakes. I should have asked a lot more questions before I got started.&lt;/p&gt;

&lt;h2&gt;
  
  
  Implementing the Solution
&lt;/h2&gt;

&lt;p&gt;Instead of using my prepared react project, I choose to use one of my existing code-training projects with a basic Typescript + Jest setup.&lt;/p&gt;

&lt;h3&gt;
  
  
  Writing Tests
&lt;/h3&gt;

&lt;p&gt;Since the problem is so simple - I decided it would be better do demonstrate my skills and discipline and write tests first.&lt;/p&gt;

&lt;p&gt;I choose to write three scenarios: One positive result, no result, and more than one pair found.&lt;/p&gt;

&lt;p&gt;This impressed the interviewer. Additionally, the rest of the development gets a lot easier. Your only focus is now that the test suite does not fail.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { findPairs } from "./addArray"

it('finds positive pairs', () =&amp;gt; {
    const input = [1,2,3,4,5,6,7,8,9];
    const value = 3;
    const output = [[1,2]]
    expect(findPairs(value, input)).toEqual(output);
})

it('finds no pairs', () =&amp;gt; {
    const input = [1,2,3];
    const value = 80;
    const output:number[][] = []
    expect(findPairs(value, input)).toEqual(output);
})

it('finds positive pairs 2', () =&amp;gt; {
    const input = [-1,1,2,3,4,5,6,7,8,9];
    const value = 3;
    const output = [[-1,4],[1,2]]
    expect(findPairs(value, input)).toEqual(output);
})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Solving the problem
&lt;/h3&gt;

&lt;p&gt;My first working solution was a very solution:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;iterate over the array&lt;/li&gt;
&lt;li&gt;Subtract the wanted value from the current value&lt;/li&gt;
&lt;li&gt;If the array includes the value, add it to the output array
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const findPairs = (k: number, arr: number[]): number[][] =&amp;gt; {
    let output:number[][] = []
    arr.forEach(firstParam =&amp;gt; {
        const searchValue = k-firstParam;
        if (arr.includes(searchValue)){
            output.push([firstParam, searchValue])
        }
    })

    return output
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This solution solves the problem and is short and simple to read.&lt;/p&gt;

&lt;h3&gt;
  
  
  Feedback to the solution
&lt;/h3&gt;

&lt;p&gt;The interviewer was not happy. The complexity of the solution is &lt;code&gt;O(n^2)&lt;/code&gt;. While it did find the correct pairs it found two distinct pairs. For the first test case: &lt;code&gt;[[1,2], [2,1]]&lt;/code&gt;Additionally, the interviewer did not like that I used &lt;code&gt;Array.forEach()&lt;/code&gt;. I was asked to refactor the code to use the more efficient &lt;code&gt;for&lt;/code&gt;-loop and If I could change the code so I only get one pair.&lt;/p&gt;

&lt;h2&gt;
  
  
  Second Implementation
&lt;/h2&gt;

&lt;p&gt;As requested I swapped the &lt;code&gt;forEach()&lt;/code&gt; to &lt;code&gt;for&lt;/code&gt; loops. Instead of using &lt;code&gt;Array.includes()&lt;/code&gt; - I also am using a &lt;code&gt;for&lt;/code&gt;-loop and only am iterating over the remaining items.&lt;/p&gt;

&lt;p&gt;The implementation is now at &lt;code&gt;O(n*log(n))&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const findPairs2 = (k: number, arr: number[]): number[][] =&amp;gt; {
    let output:number[][] = []
    for(let i = 0; i&amp;lt;arr.length;i++){
        const current = arr[i];
        const searchValue = k-current;
        for(let j = i; j&amp;lt;arr.length;j++){
            const secondParameter = arr[j];
            if (secondParameter === searchValue){
                output.push([current, searchValue])
            }
        }
    }

    return output
} 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Feedback to the solution
&lt;/h3&gt;

&lt;p&gt;Well its fine - did not really improve the optimization - we still have 15min time. There is a solution that is &lt;code&gt;O(n)&lt;/code&gt; and uses a single &lt;code&gt;while&lt;/code&gt; loop. For this you can assume that the array is sorted.&lt;/p&gt;

&lt;h2&gt;
  
  
  Third implementation
&lt;/h2&gt;

&lt;p&gt;I needed 20min to find the solution. Mostly because the loop did not end correctly. The solution uses two indexes for the array. It then compares the first and last item of the array. If it matches the sum, it gets added to the output array. If not the indexes are adjusted.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const findPairs3 = (k:number, arr: number[]): number[][] =&amp;gt; {
    let firstIndex = 0
    let lastIndex = arr.length -1;
    const output:number[][]= []

    while(firstIndex &amp;lt; lastIndex){
        const firstValue = arr[firstIndex];
        const secondValue = arr[lastIndex];
        const sum = firstValue + secondValue;

        if (sum &amp;gt; k) {
            lastIndex -= 1;
        } 
        if (sum &amp;lt; k) {
            firstIndex += 1;
        }
        if (sum === k){
            output.push([firstValue, secondValue])
            firstIndex += 1;
            lastIndex -= 1;
        }

    }
    return output;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What did go right?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Found multiple solutions&lt;/li&gt;
&lt;li&gt;Used Test Driven Development&lt;/li&gt;
&lt;li&gt;Had knowledge of the &lt;code&gt;O-notation&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Had a backup project available for the interview&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What went wrong?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;I should have noticed earlier that the output could have multiple pairs&lt;/li&gt;
&lt;li&gt;Not asking if the array is sorted&lt;/li&gt;
&lt;li&gt;Not asking if the array has unique items&lt;/li&gt;
&lt;li&gt;Assuming that a ‘working solution’ is good enough&lt;/li&gt;
&lt;li&gt;Stumbling during the implementation to correctly end the while loop&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Interview Red flags
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A pure algorithms-technical question. No demonstration of ReactJS skills&lt;/li&gt;
&lt;li&gt;No feedback from the interviewer that in my test cases the return pairs are incomplete&lt;/li&gt;
&lt;li&gt;Interviewer disappointed I did not consider millions of items in my first solution.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  End of the Interview
&lt;/h2&gt;

&lt;p&gt;The end of the interview was nice. He pointed out where all I had flaws in the solution. The interviewer was impressed that I could produce 3 solutions in such a short time frame.&lt;/p&gt;

&lt;p&gt;He was however very disappointed that I did not consider millions of items in my original solution.&lt;/p&gt;

&lt;p&gt;I blew it with my response: “In a ReactJS app usually you do not deal with a million item array, you would send only a subset of the data to the client. Do you have to deal with &lt;code&gt;million item&lt;/code&gt; arrays in your application?”&lt;/p&gt;

&lt;p&gt;The interviewer was rather embarrassed and said something along the lines of “core algorithm skills” are needed. He admitted in a practical application, with small arrays, the performance increase would be probably unnoticeable.&lt;/p&gt;

&lt;p&gt;Needless to say - I never heard back from the company.&lt;/p&gt;

</description>
      <category>career</category>
      <category>interview</category>
      <category>development</category>
    </item>
    <item>
      <title>Riddler Challenge 01: The case with the switch</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Fri, 18 Jun 2021 13:56:26 +0000</pubDate>
      <link>https://dev.to/codeandchaos/riddler-challenge-01-the-case-with-the-switch-77b</link>
      <guid>https://dev.to/codeandchaos/riddler-challenge-01-the-case-with-the-switch-77b</guid>
      <description>&lt;p&gt;The riddler did it again. He used his superior knowledge of JavaScript to create this incredible piece of code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;defaultName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;find&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;switch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nb"&gt;Boolean&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;defaultName&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;defaultName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Take your time to appreciate the marvel of the inner workings and the beauty of the solution. We will rewrite the code that the logic is simpler and the next developer can understand what is going on.&lt;/p&gt;

&lt;h2&gt;
  
  
  First Step: Analysis
&lt;/h2&gt;

&lt;p&gt;Line for line you will have to look for clues and understanding of what the code actually does. While we are doing this, I make mental notes on what to improve.&lt;/p&gt;

&lt;p&gt;I’ll add some comments to the code that really stands out and can be improved. Ideally, we would write these comments in the code review so the riddler can fix the issues on his own.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt; &lt;span class="c1"&gt;// An array with a single item -&amp;gt; probably should be converted to a simpler variable&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;defaultName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;find&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Should use Array.some&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;switch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="c1"&gt;// Incredible that this passed a code review, with a fixed value the switch is the wrong construct&lt;/span&gt;
  &lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nb"&gt;Boolean&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;defaultName&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="c1"&gt;// The Boolean check should be written as defaultName !== unknown&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;defaultName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//Convert to constant string&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="c1"&gt;//options.length &amp;gt; 0 =&amp;gt; is always true&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//The array never changes - the string could be used directly&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="c1"&gt;//unneeded default case&lt;/span&gt;
      &lt;span class="c1"&gt;//unreachable code&lt;/span&gt;
      &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Second step: Add tests
&lt;/h2&gt;

&lt;p&gt;By reading the code we could figure out that the function returns a string. We now write tests that simulate all the possible outcomes of this function. This way we get a clear definition of what the functionality of the code is.&lt;/p&gt;

&lt;p&gt;This will ensure that we do not break existing functionality when we start refactoring the code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;works for no items&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt;&lt;span class="p"&gt;([])).&lt;/span&gt;&lt;span class="nx"&gt;toEqual&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;works with an enabled item&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt;&lt;span class="p"&gt;([{&lt;/span&gt; &lt;span class="na"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}])).&lt;/span&gt;&lt;span class="nx"&gt;toEqual&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;defaultName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;works with an disabled item&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt;&lt;span class="p"&gt;([{&lt;/span&gt; &lt;span class="na"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;}])).&lt;/span&gt;&lt;span class="nx"&gt;toEqual&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;works with an mixed items&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt;&lt;span class="p"&gt;([{&lt;/span&gt; &lt;span class="na"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;}])).&lt;/span&gt;&lt;span class="nx"&gt;toEqual&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;defaultName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Refactor the code
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Step 1: Use a if-statement instead of a switch
&lt;/h3&gt;

&lt;p&gt;The current switch statement works because of the case &lt;code&gt;Boolean(defaultName)&lt;/code&gt;. Depending on the input it is either true, and then the case gets executed. It does not execute the second case because of the &lt;code&gt;break;&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;If &lt;code&gt;Boolean(defaultName)&lt;/code&gt; evaluates to false, then the switch case will always execute &lt;code&gt;options.length &amp;gt; 0&lt;/code&gt; as it always evaluates to true. This in turn means that the default-case cannot be reached and is not needed.&lt;/p&gt;

&lt;p&gt;The correct way to write this logic is with a simple ‘if statement’.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;defaultName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;find&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;defaultName&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;defaultName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 2: Remove the options Variable
&lt;/h3&gt;

&lt;p&gt;The variable &lt;code&gt;options&lt;/code&gt; probably had multiple values in the past, and is now just a hangover from an older version of the code. As the array only contains a single item and never gets modified &amp;gt; the array should be converted to a string.&lt;/p&gt;

&lt;p&gt;In this case we can simply use the variable directly, as the array is not even referenced at any other place in the code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;defaultName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;find&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;defaultName&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;defaultName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 3: Optimize Variable names and readability
&lt;/h3&gt;

&lt;p&gt;The variable name &lt;code&gt;defaultName&lt;/code&gt; is misleading as it indicates that it is a string but it used as an boolean. This in turn means that it is better to use &lt;code&gt;Array.some()&lt;/code&gt; that returns a boolean instead of &lt;code&gt;Array.find()&lt;/code&gt; that returns the object.&lt;/p&gt;

&lt;p&gt;I would also rename the variable &lt;code&gt;output&lt;/code&gt; to &lt;code&gt;appTitle&lt;/code&gt; to make it more clear why we are saving this string.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;riddlerChallenge01&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;appTitle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;useDefaultName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;some&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isEnabled&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;useDefaultName&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;appTitle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;defaultName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;appTitle&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; I choose to remove the &lt;code&gt;else&lt;/code&gt; branch of the code as well. This is mostly to mimic the switch mechanism more closely. If you would want to extend it with another case then you would just add another &lt;code&gt;if&lt;/code&gt; block.&lt;/p&gt;




&lt;p&gt;When you are refactoring code, your primary goal should be that the functionality stays the same, while the code gets more readable and if possible more efficient than before.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What do you think? How would you have rewritten this piece of code?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>refactoring</category>
      <category>javascript</category>
      <category>development</category>
      <category>badcode</category>
    </item>
    <item>
      <title>Lessons Learned from an awkward Technical Interview</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Sat, 12 Jun 2021 21:12:08 +0000</pubDate>
      <link>https://dev.to/codeandchaos/lessons-learned-from-an-awkward-technical-interview-k45</link>
      <guid>https://dev.to/codeandchaos/lessons-learned-from-an-awkward-technical-interview-k45</guid>
      <description>&lt;p&gt;I recently had a rather odd interview with a fintech company. The main goal was to figure out what my React skills are. It was a online live coding session.&lt;/p&gt;

&lt;h2&gt;
  
  
  Providing the assignment via zip download
&lt;/h2&gt;

&lt;p&gt;The session started out that they provided the source code for this small coding session via google drive download link.&lt;/p&gt;

&lt;p&gt;This should be a first red flag. It indicates that management / culture at the company does not allow the usage of GitHub or public repositories. There is not even an exception for the interview process where the code is sent out to the public.&lt;/p&gt;

&lt;p&gt;This is something I would clarify during the interview process.&lt;/p&gt;

&lt;h2&gt;
  
  
  What does the code do?
&lt;/h2&gt;

&lt;p&gt;First step was to get familiar with the codebase and the application. The source code did not provide a &lt;code&gt;Readme.md&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The app generated a large amount of random data and displayed it in a table and added a switch.&lt;/p&gt;

&lt;p&gt;My first question was: “What should the switch do? What is the purpose of the application?”&lt;/p&gt;

&lt;p&gt;The interviewer could not explain what the purpose of the application is. Or why there was a switch. The simple answer to my questions was: &lt;em&gt;“It is an artificial problem to see your react skills”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;At this point, I thought “This is stupid - this will not adequately test my skills. I do not know what is the point of the application. Then there is nothing I can do to fix it.” - I should have listened to my gut feeling and stopped the interview immediately.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Task - “How would you improve the code”
&lt;/h2&gt;

&lt;p&gt;Oddly the first task was quite a good question. “How would you improve the code” - it is an open question and you can take the interview in any direction. You can see what the candidate values, you can have an open discussion about syntax, libraries, things that are. missing.&lt;/p&gt;

&lt;p&gt;In this case there were a couple of obvious improvements:&lt;/p&gt;

&lt;h3&gt;
  
  
  Using TypeScript instead of JavaScript
&lt;/h3&gt;

&lt;p&gt;You could improve the codebase by using TypeScript. Any long running project would benefit from using TypeScript vs JavaScript. It makes the code easier to read and would at least provide a minimum of documentation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interviewers response&lt;/strong&gt; : No that is not the task for today.&lt;/p&gt;

&lt;h3&gt;
  
  
  Missing Tests
&lt;/h3&gt;

&lt;p&gt;The application was created using create-react-app. However the ‘tests’ were removed from the code.&lt;/p&gt;

&lt;p&gt;This is a very important aspect especially for financial applications. There is usually a high focus on bug free code. The only way to ensure that is to write tests.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interviewers response&lt;/strong&gt; : No that is not part of the tasks for today.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cleaner Syntax
&lt;/h3&gt;

&lt;p&gt;A couple of functions could be written using the arrow syntax.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interviewers response&lt;/strong&gt; : That is not the task for today. What is the benefit of using an arrow function?&lt;/p&gt;

&lt;p&gt;Here I must admit I stumbled a little bit, because I have been using arrow functions for such a long time - I only remembered that you do not need to think abut the &lt;code&gt;this&lt;/code&gt; keyword. (The correct answer would have been: “Does not have its own &lt;code&gt;this&lt;/code&gt; bindings.”&lt;/p&gt;

&lt;h2&gt;
  
  
  The actual Task - “Look at the Performance of the Table”
&lt;/h2&gt;

&lt;p&gt;The interviewer was not interested in an open discussion. He wanted me to find the obvious elephant in the room. The performance of the table is slow.&lt;/p&gt;

&lt;p&gt;I failed the first test, that I could not identify the ‘correct’ problem to solve. - My argumentation that the foundation should be fixed first (especially in such a simple app)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interviewer&lt;/strong&gt; : When you click on the switch it is slow. How would you fix it?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me&lt;/strong&gt; : I would have less items&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interviewer&lt;/strong&gt; : No, look at how the change handler is written.&lt;/p&gt;

&lt;p&gt;I did not expect this answer, I expected that something like pagination should be introduced. Something that is realistic to solve in an interview 30min context.&lt;/p&gt;

&lt;p&gt;However there was nothing wrong with the change handler. The problem was purely with the amount of items that are being rendered. I followed the interviewers wish and moved the change handler from the Table component into the Table Row component. - I did not expect to see any improvement. However it actually worked.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interviewer&lt;/strong&gt; : No, it only worked because you have a fast computer&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me&lt;/strong&gt; : Fine then we throttle the CPU.&lt;/p&gt;

&lt;p&gt;I had to google then how to get the Chrome dev tools to trottle my CPU, and the solution still worked. However scrolling was still an issue.&lt;/p&gt;

&lt;h2&gt;
  
  
  The interview goes even more sideways
&lt;/h2&gt;

&lt;p&gt;The interviewer suggests that there is a simple fix for this issue. - Basically adding more stress, as I still cannot see the obvious ‘solution’.&lt;/p&gt;

&lt;p&gt;I tried to explain that the underlying problem is the amount of items being rendered - you would have to reduce them by only rendering the items currently visible on the screen. Libraries like &lt;code&gt;react-window&lt;/code&gt; does exactly that - its a very complex problem.&lt;/p&gt;

&lt;p&gt;There is a reason why every major UI-Library provides its own large dataset table component. It takes a lot of effort to get this right - they expect me to solve it in a live-coding session.&lt;/p&gt;

&lt;p&gt;The interviewer reluctantly allowed me to use a library, and wanted to watch me how i select a library and implement my solution.&lt;/p&gt;

&lt;h2&gt;
  
  
  Aborting the interview
&lt;/h2&gt;

&lt;p&gt;It is an artificial problem that should be solvable with basic React skills - Not by using an external Library. I do not know the answer to this question - this interview is in any case over.&lt;/p&gt;

&lt;p&gt;At this point, I stopped the interview. I was being pushed to do things I was uncomfortable with. I still had no understanding of what the actual problem is and the interview was becoming more and more antagonistic.&lt;/p&gt;

&lt;h2&gt;
  
  
  The final short discussion
&lt;/h2&gt;

&lt;p&gt;I am so glad I ended the interview at this point. I explained that I cannot do this in this short time frame. I only can solve it with more information, clearer requirements and creating a table component to handle large amounts of data would take a month or so to do.&lt;/p&gt;

&lt;p&gt;And the interviewer finally revealed what they are looking for: Developers that can solve problems quickly, and create custom solutions.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We are a financial company - &lt;strong&gt;we cannot use libraries&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The interviewer revealed a range of problems at this company.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;This small company does not leverage open source libraries for their product.&lt;/li&gt;
&lt;li&gt;They have outdated concepts of how software development should work.&lt;/li&gt;
&lt;li&gt;They are not open for improving the processes at the company.&lt;/li&gt;
&lt;li&gt;Instead of working on a solution to have a better way to evaluate libraries they develop everything from scratch.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What was probably the correct solution to the problem?
&lt;/h2&gt;

&lt;p&gt;After the interview I looked at the problem again, without the stress of having two people staring at you and evaluating you.&lt;/p&gt;

&lt;p&gt;Probably the answer the interviewer was looking for was that instead of using the &lt;code&gt;Table&lt;/code&gt;-component from ‘material-ui’ you should have used the &lt;code&gt;DataGrid&lt;/code&gt;-component of ‘material-ui’.&lt;/p&gt;

&lt;p&gt;I have never used the ‘material-ui’ library and that solution has nothing to do with my knowledge of React.&lt;/p&gt;

&lt;p&gt;In a live-coding session you usually write vanilla-js or some simple React Hooks, something that demonstrates your knowledge. Not a simple switch this component with another component. That does not demonstrate anything really.&lt;/p&gt;

&lt;h1&gt;
  
  
  Lessons Learned
&lt;/h1&gt;

&lt;p&gt;I should not have ignored the first red flag. The interviewer could not communicate what problem is suppose to be solved. He did not answer any clarifying questions. I never had a chance to provide a satisfying answer.&lt;/p&gt;

&lt;p&gt;In an interview the participants have to treat each other with respect. If the interview is starting to become hostile - just end the interview. There is no point in continuing. Just imagine how bad he will treat you when you actually work for him.&lt;/p&gt;

&lt;p&gt;I could have saved myself 30min of awkwardness by aborting the interview earlier.&lt;/p&gt;

</description>
      <category>development</category>
      <category>interview</category>
      <category>career</category>
    </item>
    <item>
      <title>When Clients start to Estimate</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Mon, 31 May 2021 22:27:26 +0000</pubDate>
      <link>https://dev.to/codeandchaos/when-clients-start-to-estimate-36kh</link>
      <guid>https://dev.to/codeandchaos/when-clients-start-to-estimate-36kh</guid>
      <description>&lt;p&gt;You are having an estimation meeting with a special guest - the client. He is there to clarify features and any open questions. But during the meeting whenever the client feels that the estimation is ‘too high’ - he says: “Last time this same type of bug, had only 50% of the story points”.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is a good response?&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;1. Do not invite the client to the meeting&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Well, the most obvious first step is not to invite the client to the meeting. If the client is important to define the task, then have clarifying meetings with the client.&lt;/p&gt;

&lt;p&gt;The process of estimating the tickets is an internal developer affair. Only the developers know the codebase and can make any good estimations of how long a task will take.&lt;/p&gt;

&lt;p&gt;They are already dealing with the complexity of creating the software - usually they are not involved in how the client is being billed. It does not help that the client bullies the developers to do the work faster.&lt;/p&gt;

&lt;p&gt;The client does not know anything about how to develop software. That is the reason he hired your team in the first place. He cannot help with the technical complexity - his opinion of how complicated the task is - is irrelevant.&lt;/p&gt;

&lt;p&gt;If it cannot be avoided, invite the client to the Sprint Planning, then he can decide which tasks he wants to spend money on in the next two weeks.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;2. You can justify the high estimate&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In this case, the client compares this bug to another ‘similar’ bug.&lt;/p&gt;

&lt;h3&gt;
  
  
  The client is comparing it to a totally unrelated bug
&lt;/h3&gt;

&lt;p&gt;If the client is comparing it with an unrelated bug. Then case closed - the two bugs are not comparable in the first place. They should have different estimations, as they are not related in any way.&lt;/p&gt;

&lt;p&gt;The ticket the client has given is not related to the discussion and must be dismissed.&lt;/p&gt;

&lt;h3&gt;
  
  
  It is related to the first bug the client mention
&lt;/h3&gt;

&lt;p&gt;If you encountered the same bug for the second time, then the last bugfix was not enough. This would be a warning signal that:&lt;/p&gt;

&lt;p&gt;a) the last time the bug was not fixed (i.e. the last estimate is useless and additionally the fix needs a correction)&lt;/p&gt;

&lt;p&gt;b) there is a deeper problem in the codebase (i.e. the estimate must be higher)&lt;/p&gt;

&lt;p&gt;The original fix needs to be analyzed and the deeper problem with the code needs a fix. This will take more time than the simple fix that was done the first time around.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. It does not matter what the estimate is
&lt;/h2&gt;

&lt;p&gt;There is a very big misconception between “estimation” and “commitment”.&lt;/p&gt;

&lt;p&gt;An &lt;strong&gt;estimate&lt;/strong&gt; is by definition not exact. The higher the uncertainty the larger the range of the estimate is going to be. And that is a good thing. - I will get this done in 5-10days.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;commitment&lt;/strong&gt; is exact: I am going to get this done in 5 days. It is your responsibility to honor your commitment.&lt;/p&gt;

&lt;p&gt;With an estimate, you are in no way bound or required to finish the task in that timeframe. If I estimated it is going to take 5-10 days, and the work took 20days. Well then I suck at estimating - but it does not matter, it was just a made-up number.&lt;/p&gt;

&lt;p&gt;However, if I committed myself - I am going to do it in 10days. And I miss that deadline I have a big problem. It was unprofessional to commit to something that I could not do.&lt;/p&gt;

&lt;h3&gt;
  
  
  Clarify this with your client
&lt;/h3&gt;

&lt;p&gt;You should make your client aware that it does not matter what the estimate is. Reducing the estimate, will not change how much time is needed to complete the task. The time needed to complete the task is (hopefully) going to be in the estimation range. In short, his bill will be the same, no matter what the estimate is.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Improve your estimations
&lt;/h2&gt;

&lt;p&gt;Estimation methods like &lt;a href="https://en.wikipedia.org/wiki/Planning_poker"&gt;Planning Poker&lt;/a&gt; have a step called ‘consensus’ where all devs agree upon a specific number. It appears as if the team then comes up with an ‘exact’ number.&lt;/p&gt;

&lt;p&gt;Let’s take an example of how this can go wrong:&lt;/p&gt;

&lt;p&gt;The devs estimated a ticket. The result? 1x3 points, 1x5 points, and 1x8 points. - At this moment nobody looked at the code or did any further analysis, they only read the ticket description. Everybody invented numbers out of thin air. The consensus for the task will be 5 points. However when reviewing the task after the implementation. It was more complicated than expected and it took the same time as a 12 points ticket.&lt;/p&gt;

&lt;p&gt;When the client sees the result of your estimation vs actual cost he is going to be not very happy.&lt;/p&gt;

&lt;p&gt;The consensus estimation is useless. A much better approach is to write down your estimate in a range 3-8 points.&lt;/p&gt;

&lt;p&gt;Then you can add a second step called commitment. The developer makes a more precise estimation when he starts to implement the ticket. He knows exactly how the codebase looks like and he can do a personalized estimation of how many days it will take him to do the task. (Every developer has a different skillset, thus knows best what his abilities are and when he believes the task will be completed)&lt;/p&gt;

&lt;h2&gt;
  
  
  4. You are the expert
&lt;/h2&gt;

&lt;p&gt;The client hired you because you are a professional developer. Something went wrong with this team. The client lost his trust in the skills and abilities of your team. Thus he tries to involve himself more.&lt;/p&gt;

&lt;p&gt;You have to show the client - that you are the expert. The client cannot estimate tasks for you. He is overstepping his competencies and boundaries.&lt;/p&gt;

&lt;p&gt;You must review your estimates to learn how to estimate better in the future. Additionally, you can improve your estimates by doing a code analysis before estimating. And of course, improve your processes (more tests? more manual tests?) to avoid bugs before the client sees them.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Do not estimate bugs
&lt;/h2&gt;

&lt;p&gt;Bugs do not need to be estimated. Due to the nature of bugs, any estimation is useless. The developers did not intentionally put a bug in the software. Something unexpected happened, something the developers did not think about in the first place. They need to analyze the situation and apply a fix. Debugging can take hours or mere minutes to figure out what the exact problem is.&lt;/p&gt;

&lt;p&gt;It is more important to set the right priorities for the bugs. So it’s clear how high the impact of a bug is. In any case, the developers should fix the bug as fast as possible.&lt;/p&gt;

&lt;p&gt;If the ‘bugfix’ mutates into a full new feature. Then do not call it a bug - it’s a new feature or a technical improvement. That is a ticket you can estimate again.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;You have to communicate with your client. In this scenario the client probably just had a high priority bug that needed to be fixed ASAP, and he did not have a lot of money to fix it.&lt;/p&gt;

&lt;p&gt;You have to work together with your client. That means setting boundaries. Which meetings the client is allowed to attend and where his competencies end. This makes the communication easier on both sides.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How would you handle this scenario?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>development</category>
      <category>discuss</category>
      <category>devjournal</category>
      <category>agile</category>
    </item>
    <item>
      <title>How many hours should I work (as a programmer)?</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Fri, 07 May 2021 14:44:03 +0000</pubDate>
      <link>https://dev.to/codeandchaos/how-many-hours-should-i-work-as-a-programmer-500g</link>
      <guid>https://dev.to/codeandchaos/how-many-hours-should-i-work-as-a-programmer-500g</guid>
      <description>&lt;p&gt;Uncle Bob in his book "The clean coder" has a very clear answer to his question:&lt;/p&gt;

&lt;p&gt;"&lt;strong&gt;You should plan on working 60 hours per week&lt;/strong&gt;. The first 40 hours are for your employer. The remaining 20 are for you. (...) Perhaps you do not want to make that kind of commitment. That's fine but you should not think of yourself as a professional. Professionals spend time caring for their profession."&lt;/p&gt;

&lt;p&gt;This is a really bad answer and promotes very bad habits in the industry. If you look at how many hours a programmer works on average it will be in the range from 40-60+ hours a week. Very rarely you will find a part-time programmer.&lt;/p&gt;

&lt;p&gt;Let's try to figure out what the correct number is.&lt;/p&gt;

&lt;h2&gt;
  
  
  Is it harmful to work above 40 hours?
&lt;/h2&gt;

&lt;p&gt;People that constantly working 60 hours are not professional and should consider this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Assuming you are employed for 40 hours and you work an additional 20 hours - If you would be a freelancer your salary would increase by +50% - however as an employee you will probably not be given a pay raise and you will not get any recognition because your extra work is just assumed as the new 'normal'&lt;/li&gt;
&lt;li&gt;You are putting your job as your only priority and will not have time for relationships, friends, family or your own personal interests.&lt;/li&gt;
&lt;li&gt;Additionally, you are harming other developers. Two developers working 60 hours a week do the same amount of hours as 3 developers working 40 hours a week. You effectively are eliminated a job opening making it more difficult for a junior developer to find a job.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I bet you are thinking right now: "&lt;em&gt;But there is so much to do, I cant work fewer hours. The project will fail if I do not get all the tasks done. My manager is pressuring me to work long hours&lt;/em&gt;"&lt;/p&gt;

&lt;p&gt;I am going to let you in on a couple of secrets:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;There is always a lot of work, the client will always want a new feature, bugfix, etc. that is the nature of developing software. In most cases, it is not the end of the world if a feature is delivered at a later point in time.&lt;/li&gt;
&lt;li&gt;Your manager's job is to get the most work out of you for the least cost. If you work more hours for free, hey that's quite a good deal for the manager in the short term. However great managers will realize that allowing programmers to go home and have a life outside of work will make them more effective at work thus actually improving the project's outcome in the long run.&lt;/li&gt;
&lt;li&gt;If you think the project will fail because you are not putting in extra hours, then the projects resources are being miss managed. Management is not aware of the state of the project - You pitching in and doing extra hours, makes the problem worse - as management just believes that the velocity of the project has not changed. You are not signaling to management that the project is not going well and the project cannot continue in this way - they do not know that they are allocating 150% of resources that are available to them. Everything seems to be fine - but in reality, management would have to take action to maintain the project's velocity they either have to hire additional people or adjust the deadlines to match the available resources.&lt;/li&gt;
&lt;li&gt;And finally, the deadline for the project is probably arbitrary. Any project manager knows that things go wrong in a software project. You can assume that there are multiple fallback deadlines. Even if there is the 'last' deadline - you are dealing with people and people can be flexible if you communicate with them - also if they already invested months of time and resources into a project, in most cases you do not throw that away immediately.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overtime is sometimes unavoidable, but it always should be a temporary measure, never a permanent state.&lt;/p&gt;

&lt;p&gt;It should not become a permanent state because studies have shown that most humans when working more hours just work less efficiently. So it is very likely that you can work fewer hours and achieve the exact same outcome because you are working more focused.&lt;/p&gt;

&lt;p&gt;In short - you should only be working more than 40 hours for a good reason.&lt;/p&gt;

&lt;h2&gt;
  
  
  Working for 40 hours is also bad
&lt;/h2&gt;

&lt;p&gt;If you think you can clock in from 9-5 and just work on your tasks - you will burn out.&lt;/p&gt;

&lt;p&gt;You have to stay up to date on what is going on in your field. You have to learn multiple programming languages. It is your responsibility as a professional developer.&lt;/p&gt;

&lt;p&gt;Managers will not take care of this. Most times they will promise you 'trainings', while at the same time they will never have the budget for you to actually attend a training.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;"But learning a new technology that my employer does not need is just for me"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Let's assume you learn an abstract programming language like &lt;a href="https://en.wikipedia.org/wiki/Esoteric_programming_language#Piet"&gt;Piet&lt;/a&gt; - It seems useless for your employer at first, but maybe at your company for the problem that you have to solve this language may be the easiest solution. It also may be that this technology makes the problem harder and you should avoid using it.&lt;/p&gt;

&lt;p&gt;No matter the outcome, you the developer will have sharpened your skills have a deeper understanding of the technologies being currently used by contrasting them with the newly learned technology. Additionally, you gain knowledge about technologies you might want to consider or avoid in the future. With the side benefit that you are less frustrated at your job because you know your skills are growing.&lt;/p&gt;

&lt;p&gt;But without your effort in learning about the technology, your employer cannot make an educated decision and will just go with whatever they have always been using. The manager may not even be aware of this new technology. In the end, it is your job to explain to your employer if they should use technology or not - they rely on their employees to highlight the potential benefits/downsides of using any tech.&lt;/p&gt;

&lt;p&gt;You have to plan this time, it's part of your self-management - just as you would plan time for your emails. It's just part of your job, your manager will not tell you to answer emails, it's just part of your job to do that, the manager assumes that you know that.&lt;/p&gt;

&lt;p&gt;If you only dedicate 40 hours to complete the tasks that your employer gives you, you are neglecting your skills why your employer hired you in the first place - and risk to be replaced.&lt;/p&gt;

&lt;h2&gt;
  
  
  Programming for 20 hours from 9-5
&lt;/h2&gt;

&lt;p&gt;Now, let's take a look at my ideal view of how you should spend your 40 hours a week:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;20 hours is for working on actual tasks&lt;/li&gt;
&lt;li&gt;10 hours is for practicing skills and keeping up to date&lt;/li&gt;
&lt;li&gt;10 hours is for meetings, email, and socializing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;25% of your time spent on practicing seems excessive. Coding is equally craftsmanship and artistic expression. Consider other professions like a concert musician. A violinist would be practicing for months for a single concert - 99% training and 1% performance. Nobody would say that is excessive.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: Practicing skills means actively learning and solving problems it is &lt;strong&gt;not&lt;/strong&gt; passively watching for hours YouTube talks or listening to podcasts&lt;/p&gt;

&lt;p&gt;Meetings in an organization simply take time a lot of time that you are not spending programming, and many times you get the feeling you were in so many meetings you did not get anything done for the day and clock in an extra hour - however attending meetings is work. you did get something done - you are allowed to go home you may not have done fun things like coding - but you did work.&lt;/p&gt;

&lt;p&gt;If you miss a deadline because of a meeting then you maybe should reconsider if you should've attended that meeting in the first place. nobody's forcing you to attend every meeting. If your manager complains that you're not going to attend a meeting then you can explain that you have a deadline to meet – The manager can then decide what is more important. You are the one that has to inform your manager about the conflicting responsibilities.&lt;/p&gt;

&lt;p&gt;The remaining time you can spend working on tasks and that is if you are lucky around 20 hours.&lt;/p&gt;

&lt;h2&gt;
  
  
  But I am passionate about programming
&lt;/h2&gt;

&lt;p&gt;You can program as a hobby even while you're working in the field. But then you have to treat it as a hobby and you only should do it if you have the time and it gives you joy and satisfaction. - this also means working on your own project - not work-related and overall it should be relaxing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Quality over Quantity
&lt;/h2&gt;

&lt;p&gt;It all comes down to quality over quantity. It is better to commit to fewer tasks and deliver them on time and in good quality than deliver many tasks with bugs. Because the bugs will drastically reduce your development velocity over a long period of time.&lt;/p&gt;

&lt;p&gt;And in the end, your manager will also be happier because your work output becomes more predictable and reliable. As a bonus, the manager does not have to explain to people why the software was created with so many defects and then order overtime to fix them as fast as possible.&lt;/p&gt;

&lt;p&gt;Working focused we get you much further than overworking and neglecting your life outside of work.&lt;/p&gt;

&lt;h2&gt;
  
  
  There is no correct answer
&lt;/h2&gt;

&lt;p&gt;You have to think about your personal situation and work the way it suits you.&lt;/p&gt;

&lt;p&gt;Take your time to think about your current situation, your capabilities,&lt;br&gt;
  and set your priorities.&lt;/p&gt;

&lt;p&gt;Take responsibility and control over how many hours you work. This is an active choice - do not passively just do that what everyone else is doing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What do you think? How many hours do you work?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>career</category>
      <category>discuss</category>
      <category>worklifebalance</category>
      <category>healthyprogramming</category>
    </item>
    <item>
      <title>A case of premature optimization?</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Thu, 06 May 2021 10:36:40 +0000</pubDate>
      <link>https://dev.to/codeandchaos/a-case-of-premature-optimization-7bk</link>
      <guid>https://dev.to/codeandchaos/a-case-of-premature-optimization-7bk</guid>
      <description>&lt;p&gt;Recently I ran into an interesting problem in a live coding session. The interviewer found a problem with my code and asked me to improve the code. Take a look at the following code. What do you think can be optimized?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;HeadLine&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;TextBlock&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Item&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Headline&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Block&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;RenderBlock&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;block&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Item&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;block&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;block&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;RenderMap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;Headline&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;HeadLine&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;,
&lt;/span&gt;    &lt;span class="na"&gt;Block&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;TextBlock&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;,
&lt;/span&gt;  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;RenderMap&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="kd"&gt;type&lt;/span&gt;&lt;span class="p"&gt;]();&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;When you use the RenderBlock component, the constant RenderMap is going to be recreated every time the component is used. You can extract the constant and put it into a higher scope to solve that problem.&lt;/p&gt;

&lt;p&gt;The optimized code would look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;HeadLine&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;TextBlock&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Item&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Headline&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Block&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;RenderMap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;Headline&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;HeadLine&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;,
&lt;/span&gt;  &lt;span class="na"&gt;Block&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;TextBlock&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;,
&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;RenderBlock&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;block&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Item&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;block&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;block&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;RenderMap&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="kd"&gt;type&lt;/span&gt;&lt;span class="p"&gt;](&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  How much did we improve the code?
&lt;/h2&gt;

&lt;p&gt;If we benchmark a similar piece of code with &lt;a href="https://jsben.ch/yY9aT"&gt;js.bench&lt;/a&gt; we can see a 15% performance improvement. Technically we can see a real-world improvement. More operations can be done in the same amount of time (390000ops vs 400000ops)&lt;/p&gt;

&lt;p&gt;The downside is that the code is harder to read (it is not reading a single block but jumping up and down in the code) and harder to extend (if parameters change for example).&lt;/p&gt;

&lt;p&gt;In a real-world environment, you probably will have a maximum of 100 instances of this component. By optimizing the code we probably will save only a couple of microseconds.&lt;/p&gt;

&lt;p&gt;I would argue that this is a case of premature optimization. It will not have any noticeable benefit for the end-user, while at the same time make the developer experience worse. This is an issue that would be needed to be discussed with the team to further define the style of how the code is written in the codebase.&lt;/p&gt;

&lt;p&gt;In the end, this is a coding interview, so there is no real debate. The interviewer is expecting a certain solution. Even if your solution is correct, it might not be correct because you did not match the values and expectations of the interviewer. – I probably should have answered: “Not everything that can be optimized should be optimized.”&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published at&lt;/em&gt; &lt;a href="https://codeandchaos.com/excercise/jobinterview/2021-05-01-ReactOptimizationQuestion/"&gt;https://codeandchaos.com/excercise/jobinterview/2021-05-01-ReactOptimizationQuestion/&lt;/a&gt; on May 1, 2021.&lt;/p&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>optimization</category>
      <category>typescript</category>
    </item>
    <item>
      <title>A comprehensive guide to the FizzBuzz-Problem</title>
      <dc:creator>Neal Burger</dc:creator>
      <pubDate>Mon, 31 Aug 2020 00:00:00 +0000</pubDate>
      <link>https://dev.to/codeandchaos/a-comprehensive-guide-to-the-fizzbuzz-problem-1l4m</link>
      <guid>https://dev.to/codeandchaos/a-comprehensive-guide-to-the-fizzbuzz-problem-1l4m</guid>
      <description>&lt;p&gt;Lets explore the classic FizzBuzz-Problem. What is the problem? What is a potential solution? Should you use it in an interview context?&lt;/p&gt;

&lt;h1&gt;
  
  
  The Problem
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is a Math problem. At the core this is a problem of finding the numbers that are divisible by 3 and 5.&lt;/p&gt;

&lt;p&gt;You will demonstrate that you are knowledgeable about following topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Modulo Operator&lt;/li&gt;
&lt;li&gt;Loops&lt;/li&gt;
&lt;li&gt;How to output to the console in your chosen language&lt;/li&gt;
&lt;li&gt;How to write a function and how to use variables&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  The FizzBuzz Solution
&lt;/h1&gt;

&lt;p&gt;Now there are many different ways to solve this problem. I will present you a couple of solutions:&lt;/p&gt;

&lt;h2&gt;
  
  
  The Common Solution
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const fizzBuzz = (): string[] =&amp;gt; {
    const result: string[] = [];
    for (let i = 1; i &amp;lt;= 100; i++) {
        if (i % 3 === 0 &amp;amp;&amp;amp; i % 5 === 0) {
            result.push('FizzBuzz');
        } else if (i % 3 === 0) {
            result.push('Fizz');
        } else if (i % 5 === 0) {
            result.push('Buzz');
        } else {
            result.push(i.toString());
        }
    }
    return result;
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What is good about this solution?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It solves the problem.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What is bad about this solution?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It has a magic number &lt;code&gt;100&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;It duplicates the modulo operators&lt;/li&gt;
&lt;li&gt;It is difficult to test&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Optimized Solution
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const fizzBuzz = (n: number = 100): string[] =&amp;gt; {
    const result = []
    for(let i = 1; i &amp;lt;= n; i++) {
        const divBy3 = i % 3 === 0;
        const divBy5 = i % 5 === 0;
        const str = `${divBy3 ? 'Fizz' : ''}${divBy5 ? 'Buzz' : ''}`;
        result.push(str || i.toString())
    }
    return result;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What is good about this solution?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is very efficient.&lt;/li&gt;
&lt;li&gt;It stores the values from the modulo operations in variables.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What is bad about this solution?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is difficult to test&lt;/li&gt;
&lt;li&gt;It is hard to extend with more numbers.&lt;/li&gt;
&lt;li&gt;Abbreviations for variable names.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Solution I Would Like to See
&lt;/h2&gt;

&lt;p&gt;This solution represents my personal values. The code needs to work. Additionally I would like to see the solution as readable as possible. I do not care about the performance or if the solution is the optimal one.&lt;/p&gt;

&lt;p&gt;Unlike most people I am using two different functions to solve the problem. I am optimizing for testing. By writing two functions it is easier to test the logic. In fact in an interview situation I would follow up and ask the candidate to write test cases for the logic.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const fizzBuzz = (n: number = 100): string[] =&amp;gt; {
    const output: string[] = [];
    for (let i = 1; i &amp;lt;= n; i++) {
        output.push(convertToFizzBuzz(i));
    }
    return output;
};

const convertToFizzBuzz = (n: number): string =&amp;gt; {
    const divisibleBy3 = n % 3 === 0;
    const divisibleBy5 = n % 5 === 0;
    if (divisibleBy3 &amp;amp;&amp;amp; divisibleBy5) {
        return 'FizzBuzz';
    } else if (divisibleBy3) {
        return 'Fizz';
    } else if (divisibleBy5) {
        return 'Buzz';
    } else {
        return n.toString();
    }
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What is good about this solution?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is readable.&lt;/li&gt;
&lt;li&gt;It is testable.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What is bad about this solution?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is not efficient.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  The FizzBuzz Problem in the Context of a Job Interview
&lt;/h1&gt;

&lt;p&gt;It is quite common that during a job interview, instead of going into a full technical interview, you are asked to solve the FizzBuzz problem on a piece of paper. It is used as a smoke test to see if the candidate has basic coding skills.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Fundamental Problem with FizzBuzz
&lt;/h2&gt;

&lt;p&gt;It is quite unlikely that you need a developer that can solve Math Problems. While many developers have good math skills it is usually not the type of problems you will have to solve on a day to day basis.&lt;/p&gt;

&lt;p&gt;When you are interviewing a recent graduate - what is the point of the question. He probably will not have gotten his degree if he cannot code. In the worst case you will have to train him on the job. But that is the risk of hiring a student.&lt;/p&gt;

&lt;p&gt;On the other hand if you are asking this question to an experienced developer - it really does not prove anything. You may expose that he did not work on math problems recently. It does not expose his thought process or his capability to solve problems. You stripped the developer from common tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  What does it mean when the candidate cannot solve the problem?
&lt;/h2&gt;

&lt;p&gt;The one thing I have noticed in interviews when this question was asked. In most cases the candidate was not familiar with the modulo operator.&lt;/p&gt;

&lt;p&gt;You then could argue the candidate should be able to solve the problem without the modulo operator. The candidate could use something like &lt;code&gt;Math.floor(n / 3) === n/3&lt;/code&gt; or &lt;code&gt;Math.floor(n / 5) === n/5&lt;/code&gt; to find the numbers that are divisible by 3 and 5.&lt;/p&gt;

&lt;p&gt;This line of thought is flawed. The candidate does not have a lot of experience solving Math problems. Thus it does not matter if he knows modulo or can work around it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What can you learn from the candidates solution?
&lt;/h2&gt;

&lt;p&gt;The most important thing is to concider that the solution will be written as throw away code. It does not have to fulfill the requirements of the code you write for your project. Thus it actually does not matter which solution the candidate presents.&lt;/p&gt;

&lt;p&gt;Further on you anyway cannot learn a lot from the code the candidate writes. The problem is now so common in interview preparation materials, that it is not worth asking the candidate to solve the problem. There is a high chance the candidate memorized it.&lt;/p&gt;

&lt;p&gt;If the candidate is not familiar with the problem - he wrote the code under pressure and stress - which probably did not create his best work.&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;If you want to ask the question in the context of an interview, really ask yourself “What exactly do you think that you will learn from this question?” - The time in an interview is limited, don’t waste it.&lt;/p&gt;

&lt;p&gt;It is a good small interesting exercise to think about. Especially to write variants of FizzBuzz just to see if you can find a different solution. (There is always going to be a tradeoff)&lt;/p&gt;

&lt;p&gt;FizzBuzz is a classic interview question. But it is a question that probably should be left to the history books.&lt;/p&gt;

</description>
      <category>interview</category>
      <category>career</category>
    </item>
  </channel>
</rss>
