The power of prototyping code
A really quick way to get your projects up and running
When I look back on my years in programming I realised that I used to struggle greatly with starting new projects. Being a bit of a neat freak I was always thinking about the correct way of organizing files, naming things and the best way to do them while the project was still in a very embryonary state.
I did not understand that those things are important but not as I’m still working out the kinks of my idea.
All the pressure I was putting on myself always led to the project being abandoned from my mind and discarded. That needed to change!
The key is motivation
When you are starting out your personal projects or new ideas the key factor for success (at least in continuing the damn thing 😆) is motivation! Without it you will not feel compelled to start or even continue working on it.
Overthinking things in such an early stage will most likely stress and put too much pressure on you, deflating your confidence and your motivation.
I find a great deal of motivation in getting results. That magical moment where it all clicks and you have your first glimpse of something great!
Build prototypes
The first turning point in my situation was when I started building prototypes. Everything changed after that. Results started pouring in quickly and my motivation towards the project started ramping up like magic.
What is a prototype?
From wikipedia
A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from
I believe that when I build a prototype I am building a base from which the future project will stand on.
After having a glimpse of how the actual code will look like, the task of organizing, naming and separating code will be much much easier.
What I do — example in React
Forget little performance issues, don’t stress too much about variable and function names, use inline functions and don’t separate code into many files. Organizing and refactoring will be easier afterwards.
I know it depends a lot on what you are doing and my example is really simple but it is only meant to give you an idea of what you might do.
See it in action below:
You can clearly see that I did not care at all about organizing and separating my code. Why? Because I wanted to see the results in front of me. Quick and dirty code to give me an idea of what it can do and how I want it to behave.
Afterwards comes the refactoring process and you can:
- Define default spring configurations for the motion style
- Remove the inline functions and declare them as component methods
- Separate the Toast logic into its own component
- Calculate the correct styling in a proper function that you can test afterwards
- etc…
After you have that prototype finished, trust me, refactoring it is a breeze and feels amazing!
Closing remarks
I know that this isn’t really applicable in real work environments if you have tight deadlines but you can definitely use this when starting up your own personal projects and you are still unsure of how to do them.
Don’t overthink stuff, just start doing! And most importantly….
If you want to stay updated on everything I write please feel free to Followme!
And if you want to see more stuff from me I can recommend these posts: