A Quick Recap of my past Tech Experience

It was 2019 when I graduated from my college BVRIT and fortunately, I was offered to multiple companies, Finally choose to work in one of the best Organizations i.e Quinbay Technologies Pvt Ltd.

It was the place where I got to work on my passion i.e. UI Development. It was never easy for newbies to get used to corporate culture but Quinbay was never being like a corporate, It was like a place where we can learn and explore in whatever stream we like to work. I joined Quinbay as an intern. There was one month of training, soon after that, we moved to our respective projects where we were supposed to work on real-time applications. 
Isn’t it fascinating?
For a graduate, after your training, you were trusted to work on real-time projects, It was very amazing!!!

My Experience was pretty cool in Quinbay. My tech stack comprised with 
👉 Domain: UI Development
👉 Framework: VueJs 2+
👉 Technologies: Javascript, HTML, SCSS
👉 Test Framework: Mocha/Chai & Jest
👉 Third-party libraries: Element-UI

At Quinbay, we will work for Blibli.com which is the Indonesian biggest E-commerce website and one of the Unicorns. So I was part of one of the Internal Applications, Inventory Planning Tool.
During this tenure of almost 3 years, There were quite a bit challenges I faced and I wanted to share the same in this post.

As a newbie in IT Industry, the first challenge I faced was framework i.e VueJS, It was literally very new to the market and getting used to it is my biggest challenge and I really thank my mentors who supported me in the challenge. 
I have started referring to the code and also the Official documentation of VueJS to get my basics strong. During this process, I made numerous errors and which eventually made me learn from my mistakes. Although I was knowing JS prior though there were many new concepts that I never knew before. Again thanks to my mentor Sweta Sharma bu.
Getting basic strong was the challenge and also hope I succeeded in the same.

For anyone who is in the same zone, Here are a few links that helped me to get my basics strong.

👉 VueJs: https://vuejs.org/
👉 Javascript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
👉 CSS: https://css-tricks.com/

Note: Always refer to Official Documentation for more details.

Apart from those, there are many Blogs and videos which helped me to know new things. Please do follow the blogs which are related to frontend technologies. Trust me that will be really helpful for your future challenges.

If possible document your learning as blogs and share it with your colleagues which can help build your network.

Developer life is very fascinating and also new challenges will flow towards you quite often. To face those you need to be ready and get yourself updated with the new concepts. I personally suggest following blogs and articles where you get this content and exploring them.

Anyone can write code but writing a code where everyone can understand is something that decides you are a good developer or a bad developer.

👉 Always learn from your mistakes and no matter what debug your bug all by. yourself where you can learn many things doing that.

👉 If you fail to debug, ask your seniors/mentors to give hints but not for answers.

👉 Try sharing your thoughts and ideas with your peers, make sure to ask them for feedback. Feedback is always a driving force for your performance growth.

👉 A good code review will always help you to make a better developer. So, choose someone from your company who could give you constructive feedback and comments on your code and help you to learn new techniques and design patterns.

Wanted to share a few technical challenges which I faced during my tenure at Quinbay

💪 Learning 1

Make sure to declare the variables appropriately with proper naming conventions. As per ES6 Specifications, Use Let and Const wherever it is necessary.
Let’s say if the variable changes then use “let” or else if it is constant then use “const”.
At the beginning of my career, I was using only let to declare variables but as the new features flow, we never know which variable is constant or which can be reassignable. It will be difficult for the new developers who join you next to identify or understand the code which you have written.
It is a good practice to name the variables/ functions appropriately which should be self-explanatory. TBH I am still lagging in naming my variables/ functions 😛.

💪 Learning 2

Make sure to add documentation to your function of what it does and all required parameters. Trust me, It would really help you in the long run.
You know the function as you have written it but what about others.

💪 Learning 3

Try to split the code as far as possible, Because as new features flow in, it would be really difficult to handle or maintain the code. Try to identify the code that can be separated and create a new function.
I know it would be a tough task but trust me, it will save your time if there are some changes to be done or debug a bug later in your project.

💪 Learning 4

Always try to update your libraries with new versions, As it would help to make your code more readable and also reduce lines of code.
Not only your code but also update your third-party libraries whenever there is a stable version of it is available.
But why?
Always a stable version contains improvements, Addition of new features, Bug resolutions, etc. So you will be on the safe side as we never know which third-party feature broke.

💪 Learning 5

Components are nothing but a reusable piece of code that can be used throughout your project. So make sure to separate all independent UI stuff and use them.
Let’s take an example:
2 files have a popup code and As a new requirement, the User wanted to change the background colour of the popup from white to red.

Non Component Structure

So, now that we have a popup code in both files we need to change both files which are kind of redundant and also it is duplicate work. So to avoid such discrepancies, we can have one popup component and import the same in 2 files. Here the change can be in only one file. Thus, we can remove code duplication.

Component Structure

💪 Learning 6

It is always good to know about the server where our application is hosted.

There was a scenario we faced, There are few APIs in our application are taking much time as we know that Chrome would cancel the request which exceeds 1 min automatically.

Solution: We checked all possible ways to handle this and unfortunately, we couldn’t find any solution from the code perspective, But as a try, we have explored our server a bit and found that we need to increase the time in our UI box where our application is hosted.

Try to participate in deployments regularly and play around with the local servers and get hands-on experience on it. The official documentation is recommended.

💪 Learning 7

Always choose libraries or dependencies that suit your project the best.
Sometimes too much configuration doesn’t help you in the long run.

There was a scenario where our application’s build pipeline getting failed repeatedly.
Solution: After detailed inspection, we have come to know that mocha-chai test suite was giving some issue due to plenty of configuration which requires while building in the pipeline. So we have migrated to Jest test suite which suits our Application the best.

I am not supporting any test suite but sometimes choice matters, Always prefer the best with minimal and customisable libraries which can align with your project.
For Migration never panic but instead look out for a migration guide which will be available in the Official documentation.

💪 Learning 8

Always keep lines of code minimal with respective each file as I have told you before it really favours code maintainability. I prefer not to exceed 300 lines in each file.

💪 Learning 9

If there is a code inspection plugin used in the project i.e. sonarqube. Make sure to check for code smells, detect vulnerabilities, clean code, etc.
This will really help to maintain your code and update the project with relevant changes picking them as tech debts.

💪 Learning 10

Always Organise your folders in such a way, that you can get all the subfiles relevant to the file to be placed in one place. It isn’t that important but for developers, it will be a good practice to organize all the files in proper or standard order.

Apart from all these challenges, As a frontend dev, we often use div in our Html code and it is quite handy for us to wrap all the other tags inside it but using div a lot might give you accessibility issues and to avoid such discrepancies I would suggest to use appropriate tags i.e. Semantic Tags like section, articles, main.
I am not saying to not use divs but if you are sure that this piece of HTML code will be a section then use it.
If unsure use div to wrap the elements in UI. It is a good practice to do so and it will add value to your application.

Here it is, Wrapping up my post I know many of you knew them much better than me but If someone is unaware please relook at your application and try to craft your application with the above tips and learnings.

I would really thank my mentors for always being there to guide me through my tenure at Quinbay.

As we are at the end of the year 2021 and I also started my new Journey and looking to take up challenges in my new company Thoughtworks.
Wish me luck and Hopefully, I would learn many more things hereafter.

I would love to make another part of it stating a few other learnings which I faced and overcame.

Thanks, everyone for reading my blog, hope you were not bored of it.
If you really like it, give it a clap, share it with your friends and do follow my blogs for more frontend content.
This blog is my experience, I would really appreciate your thoughts and feedback.

Until Next time cheers 🍻.
Happy Learning 🤝 !!!

Abhishek Kovuri, UI developer