In the previous article that you can find [here](https://dailydev.io/posts/5-tips-to-stay-motivated-while-learning-to-code), we talked about 5 tips that you could follow in order to stay motivated while learning a new skill, like coding.  The very first key point was __"Practice what you have learned"__ as this is the single best way to be able to retain what you have learned to then easily apply it as you move along to more advanced concepts. We even ended the video with a twist to the old saying: __"Practice makes fluent"__.

Now, you may even agree with all that but you still raise a valid question: __"How do I get ideas on what to build with the skills I have just learned?"__. 

Today, we will be introducing 5 different app ideas to challenge you and to hone in your newly gained skills. We will be going from an *easy* level of difficulty to a higher level, in that order, so feel free to skip some of them if you are already comfortable with some more basic concepts.

These app ideas were adapted from a great online list put together by [Florin Pop on GitHub](https://github.com/florinpop17/app-ideas). In there, you can find a long list of app ideas bundled by the level of knowledge or interest of the developer. On each individual app, you will find a description of the project, applicable constraints for development and user stories to guide you through your development). Some of them also have example apps created by the community. This is incredible and I strongly recommend that you complete as many of them as you can.

I selected 5 specific ideas that I feel are the best to improve your skills, as they provide a good balance of being challenging and with common real-life applications. So let's take a look at them!  

### App Idea #1 - Border-Radius Previewer
In #1 we have a simple and good introduction to the manipulation of a reactive state, with a Border radius preview app. You should be able to listen to several inputs change and render their effect on an HTML element's `border-radius` CCS property. __See the project's specification [here](https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Border-Radius-Previewer.md).__

<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="css,result" data-user="thebabydino" data-slug-hash="zbqPVd" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS gradient border - cover method works well with border-radius">
  <span>See the Pen <a href="https://codepen.io/thebabydino/pen/zbqPVd">
  CSS gradient border - cover method works well with border-radius</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### App Idea #2 - Countdown Timer
Next, up, we have a slightly more difficult challenge, but still within the beginner tier, which is a Countdown timer. This challenge will introduce you to some new browser APIs, like setInterval. The goal is to make use of interval functions to manipulate the `DOM`elements containing the number and update them accordingly. __See the project's specification [here](https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Countdown-Timer-App.md).__

<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="js,result" data-user="FlorinPop17" data-slug-hash="YbpwyG" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="#034 - Countdown with ReactJS">
  <span>See the Pen <a href="https://codepen.io/FlorinPop17/pen/YbpwyG">
  #034 - Countdown with ReactJS</a> by Florin Pop (<a href="https://codepen.io/FlorinPop17">@FlorinPop17</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### App Idea #3 - Weather App
The last project in our beginner tier will test your skills for external APIs integration. It is a well-known, Weather App. But try to make yours stand out, give it something unique. __See the project's specification [here](https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Weather-App.md).__

<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="css,result" data-user="tutsplus" data-slug-hash="gObLaEP" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CodePen Home Simple Weather App By Using OpenWeatherMap API &amp;amp; Custom Icons">
  <span>See the Pen <a href="https://codepen.io/tutsplus/pen/gObLaEP">
  CodePen Home Simple Weather App By Using OpenWeatherMap API &amp; Custom Icons</a> by Envato Tuts+ (<a href="https://codepen.io/tutsplus">@tutsplus</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### App Idea #4 - Regular Expressions Helper
Now going on to tier 2, Intermediate level. This project is extremely valuable as it will solidify many of the previous project's knowledge but also make you practice a very important aspect of programming, which are regular expressions. __See the project's specification [here](https://github.com/florinpop17/app-ideas/blob/master/Projects/2-Intermediate/RegExp-Helper-App.md).__

![RegExr Website](https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1613721365/posts/ezgif.com-gif-maker_10_xrie7l.gif)

### App Idea #5 - Real-Time Chat App
The last project, and the only one on the Advanced tier, is a Realtime Chat App. This is a great project because it will involve many new concepts, like sockets and real-time databases, but it is also one of the most well-documented apps that you can find on the web, so if you get stuck, there is plenty of help out there to reach your final destination.__See the project's specification [here](https://github.com/florinpop17/app-ideas/blob/master/Projects/3-Advanced/Chat-App.md).__

![Real-Time Chat App Demo](https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1613721485/posts/DemoT2_ChatAp_peudlq.gif)

## Takeaways

And there you have it, these were the 5 projects that I recommend for you to start practicing your skills and improving yourself to eventually land that dream job! There are many more on that [GitHub list](https://github.com/florinpop17/app-ideas/blob/master/README.md) and I strongly recommend you to practice by doing as many as you can, whenever you have time. Remember, the best method to improve, is by __consistently applying the skills you have acquired__.

Happy coding!

<p>In the previous article that you can find <a href="https://dailydev.io/posts/5-tips-to-stay-motivated-while-learning-to-code">here</a>, we talked about 5 tips that you could follow in order to stay motivated while learning a new skill, like coding.  The very first key point was <strong>"Practice what you have learned"</strong> as this is the single best way to be able to retain what you have learned to then easily apply it as you move along to more advanced concepts. We even ended the video with a twist to the old saying: <strong>"Practice makes fluent"</strong>.</p>
<p>Now, you may even agree with all that but you still raise a valid question: <strong>"How do I get ideas on what to build with the skills I have just learned?"</strong>. </p>
<p>Today, we will be introducing 5 different app ideas to challenge you and to hone in your newly gained skills. We will be going from an <em>easy</em> level of difficulty to a higher level, in that order, so feel free to skip some of them if you are already comfortable with some more basic concepts.</p>
<p>These app ideas were adapted from a great online list put together by <a href="https://github.com/florinpop17/app-ideas">Florin Pop on GitHub</a>. In there, you can find a long list of app ideas bundled by the level of knowledge or interest of the developer. On each individual app, you will find a description of the project, applicable constraints for development and user stories to guide you through your development). Some of them also have example apps created by the community. This is incredible and I strongly recommend that you complete as many of them as you can.</p>
<p>I selected 5 specific ideas that I feel are the best to improve your skills, as they provide a good balance of being challenging and with common real-life applications. So let's take a look at them!  </p>
<h3>App Idea #1 - Border-Radius Previewer</h3>
<p>In #1 we have a simple and good introduction to the manipulation of a reactive state, with a Border radius preview app. You should be able to listen to several inputs change and render their effect on an HTML element's <code>border-radius</code> CCS property. <strong>See the project's specification <a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Border-Radius-Previewer.md">here</a>.</strong></p>
<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="css,result" data-user="thebabydino" data-slug-hash="zbqPVd" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS gradient border - cover method works well with border-radius">
  <span>See the Pen <a href="https://codepen.io/thebabydino/pen/zbqPVd">
  CSS gradient border - cover method works well with border-radius</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3>App Idea #2 - Countdown Timer</h3>
<p>Next, up, we have a slightly more difficult challenge, but still within the beginner tier, which is a Countdown timer. This challenge will introduce you to some new browser APIs, like setInterval. The goal is to make use of interval functions to manipulate the <code>DOM</code>elements containing the number and update them accordingly. <strong>See the project's specification <a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Countdown-Timer-App.md">here</a>.</strong></p>
<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="js,result" data-user="FlorinPop17" data-slug-hash="YbpwyG" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="#034 - Countdown with ReactJS">
  <span>See the Pen <a href="https://codepen.io/FlorinPop17/pen/YbpwyG">
  #034 - Countdown with ReactJS</a> by Florin Pop (<a href="https://codepen.io/FlorinPop17">@FlorinPop17</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3>App Idea #3 - Weather App</h3>
<p>The last project in our beginner tier will test your skills for external APIs integration. It is a well-known, Weather App. But try to make yours stand out, give it something unique. <strong>See the project's specification <a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Weather-App.md">here</a>.</strong></p>
<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="css,result" data-user="tutsplus" data-slug-hash="gObLaEP" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CodePen Home Simple Weather App By Using OpenWeatherMap API &amp;amp; Custom Icons">
  <span>See the Pen <a href="https://codepen.io/tutsplus/pen/gObLaEP">
  CodePen Home Simple Weather App By Using OpenWeatherMap API &amp; Custom Icons</a> by Envato Tuts+ (<a href="https://codepen.io/tutsplus">@tutsplus</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3>App Idea #4 - Regular Expressions Helper</h3>
<p>Now going on to tier 2, Intermediate level. This project is extremely valuable as it will solidify many of the previous project's knowledge but also make you practice a very important aspect of programming, which are regular expressions. <strong>See the project's specification <a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/2-Intermediate/RegExp-Helper-App.md">here</a>.</strong></p>
<p><img src="https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1613721365/posts/ezgif.com-gif-maker_10_xrie7l.gif" alt="RegExr Website"></p>
<h3>App Idea #5 - Real-Time Chat App</h3>
<p>The last project, and the only one on the Advanced tier, is a Realtime Chat App. This is a great project because it will involve many new concepts, like sockets and real-time databases, but it is also one of the most well-documented apps that you can find on the web, so if you get stuck, there is plenty of help out there to reach your final destination.<strong>See the project's specification <a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/3-Advanced/Chat-App.md">here</a>.</strong></p>
<p><img src="https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1613721485/posts/DemoT2_ChatAp_peudlq.gif" alt="Real-Time Chat App Demo"></p>
<h2>Takeaways</h2>
<p>And there you have it, these were the 5 projects that I recommend for you to start practicing your skills and improving yourself to eventually land that dream job! There are many more on that <a href="https://github.com/florinpop17/app-ideas/blob/master/README.md">GitHub list</a> and I strongly recommend you to practice by doing as many as you can, whenever you have time. Remember, the best method to improve, is by <strong>consistently applying the skills you have acquired</strong>.</p>
<p>Happy coding!</p>


You want to become better at coding, you've taken all the tutorials but you still feel lost. These 5 app ideas will help you improve both your skills AND your portfolio of projects to get that dream job.

5 Projects to Learn Coding in 2021

Tips

Web Dev

One of the most important and difficult aspects of learning any new skill, like coding, is to be able to __stay motivated__ throughout the whole learning journey so today, we are introducing __5 tips__ that can help you keep that initial motivation.

We've all been there: you are trying to learn some new skill and you pour your heart and soul out into the task only to eventually hit what feels like an enormous roadblock that mentally drains you, to the point where your motivation levels hit rock bottom and you feel like quitting.

Learning something new is challenging by itself, and coding is absolutely no exception. If you are having a hard time staying motivated while learning to code, know that you are not alone. In the end, motivation can only come from within, but a few tips can help you sway the scale the right way and help you achieve your dream of making it into the developer industry.

Let's start with the tips!

### Tip #1 - Practise what you have learned

You may be moving too quickly through the lessons or tutorials that you are taking and not dedicating enough time to apply those concepts and getting your hands dirty by building something. Spending time with a new concept is important so you can retain what you've learned and apply it as you move along to more advanced concepts.

The same happens when you are learning a new language. At the moment I'm trying to learn Swedish, and although repetitive, I go over the basics regularly, as they will lay the foundation for me to eventually be fluent in the language, sometime in the future.

So remember, *practice makes fluent*.

### Tip #2 - Don't forget what you've already accomplished

When you get stuck on learning a new concept or it gets too intense that it eventually overwhelms you, it can also be frustrating, and your mind starts to wander and think about the long road that you still have ahead.

If this happens, just remind yourself of how far you've come. Take a look at what you've already built along this journey and at all the challenges you have already overcome. Look at it from a standpoint of "*look at how far I've come*" instead of "*look at how far I still have to go*".

### Tip #3 - Keep your eye on the prize

This may sound like a given, but you'd be surprised with the number of people that lose track of their goals and are never able to get it back.

On those dark days of having no appetite for learning, take a step back, a deep breath, and try to remind yourself of the goal you had when you first decided to embark on this long journey. What motivated you then?

If you have yet not established a goal, time to one and to stick with it!

### Tip #4 - Baby steps, consistently

Now, initially, it might seem right to you to spend the most amount of time possible learning to code. But too long of a session can actually hurt in you the long run.

You might start to get frustrated by not being able to make time during the day to take a lesson, or even the other way around, you might feel that this learning process is taking too much of your day away, and you start attributing a negative connotation to the process!

A strategy is to set a timer for a **small achievable goal**. Set it for 10/15/30 minutes, whatever feels right for you.

Then, if you feel that you are on a roll and that today is your day, just extend your coding past that time until you finish your awesome new feature. If not, when the timer goes off, just called it a day and gather your strengths for tomorrow.

### Tip #5 - Take breaks, regularly

Most times when we are feeling stuck or overwhelmed, the easiest solution of all time, is to take a break.

Get your mind off of the current task and dedicate your efforts to something else you enjoy. Read a book, listen to your favorite track or latest podcast episode, or go for a walk with your dogs. After a while, you will feel reinvigorated and with a killer mindset for problem-solving! And just like magic, your task got a lot easier, and your body thanks you for that relaxation period.

And those were the 5 tips that you can and should follow the next time you're feeling stuck or a bit overwhelmed by the learning process or tasks at hand to find the motivation needed to plow through and towards your goals and dreams.

__Keep your eye on the prize!__ 🏆

<p>One of the most important and difficult aspects of learning any new skill, like coding, is to be able to <strong>stay motivated</strong> throughout the whole learning journey so today, we are introducing <strong>5 tips</strong> that can help you keep that initial motivation.</p>
<p>We've all been there: you are trying to learn some new skill and you pour your heart and soul out into the task only to eventually hit what feels like an enormous roadblock that mentally drains you, to the point where your motivation levels hit rock bottom and you feel like quitting.</p>
<p>Learning something new is challenging by itself, and coding is absolutely no exception. If you are having a hard time staying motivated while learning to code, know that you are not alone. In the end, motivation can only come from within, but a few tips can help you sway the scale the right way and help you achieve your dream of making it into the developer industry.</p>
<p>Let's start with the tips!</p>
<h3>Tip #1 - Practise what you have learned</h3>
<p>You may be moving too quickly through the lessons or tutorials that you are taking and not dedicating enough time to apply those concepts and getting your hands dirty by building something. Spending time with a new concept is important so you can retain what you've learned and apply it as you move along to more advanced concepts.</p>
<p>The same happens when you are learning a new language. At the moment I'm trying to learn Swedish, and although repetitive, I go over the basics regularly, as they will lay the foundation for me to eventually be fluent in the language, sometime in the future.</p>
<p>So remember, <em>practice makes fluent</em>.</p>
<h3>Tip #2 - Don't forget what you've already accomplished</h3>
<p>When you get stuck on learning a new concept or it gets too intense that it eventually overwhelms you, it can also be frustrating, and your mind starts to wander and think about the long road that you still have ahead.</p>
<p>If this happens, just remind yourself of how far you've come. Take a look at what you've already built along this journey and at all the challenges you have already overcome. Look at it from a standpoint of "<em>look at how far I've come</em>" instead of "<em>look at how far I still have to go</em>".</p>
<h3>Tip #3 - Keep your eye on the prize</h3>
<p>This may sound like a given, but you'd be surprised with the number of people that lose track of their goals and are never able to get it back.</p>
<p>On those dark days of having no appetite for learning, take a step back, a deep breath, and try to remind yourself of the goal you had when you first decided to embark on this long journey. What motivated you then?</p>
<p>If you have yet not established a goal, time to one and to stick with it!</p>
<h3>Tip #4 - Baby steps, consistently</h3>
<p>Now, initially, it might seem right to you to spend the most amount of time possible learning to code. But too long of a session can actually hurt in you the long run.</p>
<p>You might start to get frustrated by not being able to make time during the day to take a lesson, or even the other way around, you might feel that this learning process is taking too much of your day away, and you start attributing a negative connotation to the process!</p>
<p>A strategy is to set a timer for a <strong>small achievable goal</strong>. Set it for 10/15/30 minutes, whatever feels right for you.</p>
<p>Then, if you feel that you are on a roll and that today is your day, just extend your coding past that time until you finish your awesome new feature. If not, when the timer goes off, just called it a day and gather your strengths for tomorrow.</p>
<h3>Tip #5 - Take breaks, regularly</h3>
<p>Most times when we are feeling stuck or overwhelmed, the easiest solution of all time, is to take a break.</p>
<p>Get your mind off of the current task and dedicate your efforts to something else you enjoy. Read a book, listen to your favorite track or latest podcast episode, or go for a walk with your dogs. After a while, you will feel reinvigorated and with a killer mindset for problem-solving! And just like magic, your task got a lot easier, and your body thanks you for that relaxation period.</p>
<p>And those were the 5 tips that you can and should follow the next time you're feeling stuck or a bit overwhelmed by the learning process or tasks at hand to find the motivation needed to plow through and towards your goals and dreams.</p>
<p><strong>Keep your eye on the prize!</strong> 🏆</p>


One of the most important and difficult aspects of learning any new skill, like coding, is to be able to __stay motivated__ throughout the whole learning journey so today, we are introducing __5 tips__ that can help you keep that initial motivation.

5 Tips to Stay Motivated While Learning to Code

Life

*Hello, my name is Igor and if by chance, you enjoy what I write, you may also like what I have to say on [my Twitter profile]([https://www.twitter.com/igorasilveira](https://www.twitter.com/igorasilveira)), come and say 'Hi! 👋'.*

### Contents

- Clean Freak
- One-man Band vs. Enterprise
- The Tips

## Clean Freak

You may have been coding for a while now, but would you consider your code to be clean? When you are coding, do you take cleanliness into account (not relating to your surrounding btw, that's for another time)?

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." - Martin Fowler

It may be tempting to forget about doing a cleaning round once your code is up and running as expected (I know it is). It can happen often that we forget *how* we have written things and just call it a day. You may have also already taken into consideration some of the most common tips while developing your masterpiece, but chances are that if you go about the code with a pair of judgmental eyes, you'll find several *missing spots* (pun intended).

## One-man Band vs. Enterprise

When you are working on your side projects there is no implicit obligation of always committing the most impeccable code. You are there to have fun and learn a thing or two on your own time. You may have watched an awesome tutorial online and you couldn't wait to fire up your editor and create your own version of it.

**That is fine!** Coding on your own is mostly about having fun and loving what you do, but it may also be important that a couple of those online tutorials that you watch be about coding practices. Even on your own written projects, you will probably have a hard time figuring out what was done when you look back at it down the road.

Once you're in a work environment and the team is no longer comprised of you alone, things get a bit more serious. Several people are working on the same codebase, meaning that the code someone writes today may be in front of someone else tomorrow to add a new feature of some sort. This is when eyes will be directed at you and you'll most certainly be prompted to aid in understanding the *what* and the *why* of the code you have written.

Most clean code practices can be enforced at the time of code review before merging your changes into the project's main branch or even before it leaves the code editor, but, as I have experienced several times, many things can slip under the radar, only to be dug out later down the road.

## The Tips

With all the context already given, let's jump right into some important tips for writing your clean code.

### Tip \#1 - Write meaningful names

This first tip is often memed about around the internet, with my favorite being the *Narcos* meme. It is joked that a developer may spend more time on deciding how to name functions and variables, than actually coding a given feature. Although somewhat exaggerated, naming is an extremely important aspect of writing clean code. It helps to enable the code to be *self-documenting*, meaning that if at some point down the future you look back at old code, it should be like reading plain English.

![Meaningful variable and function names example](https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1605452165/posts/meaningfulNames_t7eenc.png)

### Tip \#2 - Make the code readable

As with anything written, you will struggle to read it if it is all cluttered and doesn't follow any pre-existing formatting or agreed-upon structure. For example, you wouldn't be able to read code with ease if all of it was on the same line and had no spacing in between (this is an extreme example, but most parts of it are true).

Today, it is easy to fit your project with a *linter* that will automatically take care of that for you and check for inconsistencies. A linter operates on top of a set of rules that tell it how the code should be formatted and what syntax should be enforced. This is very common on larger teams where the code is verified before going to the main repository.

![Readable code example](https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1605452165/posts/readableCode_pxmvhq.png)

### Tip \#3 - Classes and functions are concise and follow the Single Responsibility Principle (SRP)

I believe everyone would agree that a small and concise block of code would be easier to read than its counterpart. Apart from that, segmenting your code in each of its individual pieces would ease unit testing since you are testing small bits at a time, so you know exactly the source of the bug, and the debugging process is accelerated.

Of course, there will always be a handful of functions that you simply can't keep on a lower line count. However, that's when following SRP will reap its benefits by enabling the ability to pinpoint the source of a bug since it would be the only class or function with the responsibility to commit that change. Also, by following this principle, you would have an easier time naming the class or function because it only has one clear, simple job (instead of 4 or 5 mashed together).

### Tip \#4 - Remove duplicates

Duplicate code is the recipe for disaster. if at any point in the future you need to go back and edit it, you are extremely likely to not know that the same logic is replicated somewhere else, and thus, this is how many bugs are introduced into your system.

Once you are done coding your awesomely new feature, be sure to go back and re-read what you've coded and look for duplicates. These can be hiding in different forms of implementation, so keep your eyes wide open looking for these. Once spotted, extract that piece of duplicated code into a new method, mostly likely a helper. In the future, when something needs changing, you can refer simply to that extracted helper method, making the changes cheaper to conduct.

### Tip \#5 - Review other's code

It is easy to fall in love with your own code and, as they say, love is sometimes blind.

Reviewing other people's code, the same as reading someone's book, helps you open your mind to new realities. It is easier to be judgmental of other people's property instead of your own, so you can gain some insights from your own evaluation of their code. Keep in mind that can be both on the positive side and on the negative, the idea is that you will slowly but surely pick up a more refined sense of what is clean code and therefore, begin implementing it in your own work.

Of course that if you are working alone and have no other co-workers code to look at, you can always wander around some random GitHub accounts and see what they are up to. There is even a subreddit where people review each other's work, [check it out](https://www.reddit.com/r/reviewmycode/)!

Now get out there and start coding a bit cleaner and don't worry that with time everything gets easier, just keep going strong!

<p><em>Hello, my name is Igor and if by chance, you enjoy what I write, you may also like what I have to say on <a href="%5Bhttps://www.twitter.com/igorasilveira%5D(https://www.twitter.com/igorasilveira)">my Twitter profile</a>, come and say 'Hi! 👋'.</em></p>
<h3>Contents</h3>
<ul>
<li>Clean Freak</li>
<li>One-man Band vs. Enterprise</li>
<li>The Tips</li>
</ul>
<h2>Clean Freak</h2>
<p>You may have been coding for a while now, but would you consider your code to be clean? When you are coding, do you take cleanliness into account (not relating to your surrounding btw, that's for another time)?</p>
<p>"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." - Martin Fowler</p>
<p>It may be tempting to forget about doing a cleaning round once your code is up and running as expected (I know it is). It can happen often that we forget <em>how</em> we have written things and just call it a day. You may have also already taken into consideration some of the most common tips while developing your masterpiece, but chances are that if you go about the code with a pair of judgmental eyes, you'll find several <em>missing spots</em> (pun intended).</p>
<h2>One-man Band vs. Enterprise</h2>
<p>When you are working on your side projects there is no implicit obligation of always committing the most impeccable code. You are there to have fun and learn a thing or two on your own time. You may have watched an awesome tutorial online and you couldn't wait to fire up your editor and create your own version of it.</p>
<p><strong>That is fine!</strong> Coding on your own is mostly about having fun and loving what you do, but it may also be important that a couple of those online tutorials that you watch be about coding practices. Even on your own written projects, you will probably have a hard time figuring out what was done when you look back at it down the road.</p>
<p>Once you're in a work environment and the team is no longer comprised of you alone, things get a bit more serious. Several people are working on the same codebase, meaning that the code someone writes today may be in front of someone else tomorrow to add a new feature of some sort. This is when eyes will be directed at you and you'll most certainly be prompted to aid in understanding the <em>what</em> and the <em>why</em> of the code you have written.</p>
<p>Most clean code practices can be enforced at the time of code review before merging your changes into the project's main branch or even before it leaves the code editor, but, as I have experienced several times, many things can slip under the radar, only to be dug out later down the road.</p>
<h2>The Tips</h2>
<p>With all the context already given, let's jump right into some important tips for writing your clean code.</p>
<h3>Tip #1 - Write meaningful names</h3>
<p>This first tip is often memed about around the internet, with my favorite being the <em>Narcos</em> meme. It is joked that a developer may spend more time on deciding how to name functions and variables, than actually coding a given feature. Although somewhat exaggerated, naming is an extremely important aspect of writing clean code. It helps to enable the code to be <em>self-documenting</em>, meaning that if at some point down the future you look back at old code, it should be like reading plain English.</p>
<p><img src="https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1605452165/posts/meaningfulNames_t7eenc.png" alt="Meaningful variable and function names example"></p>
<h3>Tip #2 - Make the code readable</h3>
<p>As with anything written, you will struggle to read it if it is all cluttered and doesn't follow any pre-existing formatting or agreed-upon structure. For example, you wouldn't be able to read code with ease if all of it was on the same line and had no spacing in between (this is an extreme example, but most parts of it are true).</p>
<p>Today, it is easy to fit your project with a <em>linter</em> that will automatically take care of that for you and check for inconsistencies. A linter operates on top of a set of rules that tell it how the code should be formatted and what syntax should be enforced. This is very common on larger teams where the code is verified before going to the main repository.</p>
<p><img src="https://res.cloudinary.com/dydevwhyk/image/upload/q_auto/v1605452165/posts/readableCode_pxmvhq.png" alt="Readable code example"></p>
<h3>Tip #3 - Classes and functions are concise and follow the Single Responsibility Principle (SRP)</h3>
<p>I believe everyone would agree that a small and concise block of code would be easier to read than its counterpart. Apart from that, segmenting your code in each of its individual pieces would ease unit testing since you are testing small bits at a time, so you know exactly the source of the bug, and the debugging process is accelerated.</p>
<p>Of course, there will always be a handful of functions that you simply can't keep on a lower line count. However, that's when following SRP will reap its benefits by enabling the ability to pinpoint the source of a bug since it would be the only class or function with the responsibility to commit that change. Also, by following this principle, you would have an easier time naming the class or function because it only has one clear, simple job (instead of 4 or 5 mashed together).</p>
<h3>Tip #4 - Remove duplicates</h3>
<p>Duplicate code is the recipe for disaster. if at any point in the future you need to go back and edit it, you are extremely likely to not know that the same logic is replicated somewhere else, and thus, this is how many bugs are introduced into your system.</p>
<p>Once you are done coding your awesomely new feature, be sure to go back and re-read what you've coded and look for duplicates. These can be hiding in different forms of implementation, so keep your eyes wide open looking for these. Once spotted, extract that piece of duplicated code into a new method, mostly likely a helper. In the future, when something needs changing, you can refer simply to that extracted helper method, making the changes cheaper to conduct.</p>
<h3>Tip #5 - Review other's code</h3>
<p>It is easy to fall in love with your own code and, as they say, love is sometimes blind.</p>
<p>Reviewing other people's code, the same as reading someone's book, helps you open your mind to new realities. It is easier to be judgmental of other people's property instead of your own, so you can gain some insights from your own evaluation of their code. Keep in mind that can be both on the positive side and on the negative, the idea is that you will slowly but surely pick up a more refined sense of what is clean code and therefore, begin implementing it in your own work.</p>
<p>Of course that if you are working alone and have no other co-workers code to look at, you can always wander around some random GitHub accounts and see what they are up to. There is even a subreddit where people review each other's work, <a href="https://www.reddit.com/r/reviewmycode/">check it out</a>!</p>
<p>Now get out there and start coding a bit cleaner and don't worry that with time everything gets easier, just keep going strong!</p>


You may have been coding for a while now, but would you consider your code to be clean? When you are coding, do you take cleanliness into account (not relating to your surrounding btw, that's for another time)?

5 Tips That Will Enable You to Write Cleaner Code

Here you can find many tips that I think might come in handy in some situations.