DEV Community: Mwenedata Apotre

Achieve influence in your career with credibility and likeability.

Mwenedata Apotre — Mon, 19 Feb 2024 12:57:42 +0000

"Jack of all trades and master of none but oftentimes better than a master of one", this is a very popular quote and often times it is written cut short to "Jack of all trades and master of none" to make it more negative than it originally was.

In this article I want us to talk about credibility and what I would like to call likeability in the success journey as a software engineer which can also be applied in any other career.

Let me ask a simple question, Q1 if someone asked you to create a team to develop a project and it will be made up of one designer, backend developer, frontend developer and the team lead. Create that team and go on to the second question Q2 why did you choose those people?

If you can clearly answer the traits of each person, that makes him/her a great candidate you have your answer to what makes one successful.

You might realize the technical team you created you based on their technical ability but that was different when you chose the Team lead. The technical team members are credible but the team lead you chose is likely to be both credible and likeable.

Let's get into meaning now:

Credibility is the quality one has that makes him believable or convincing in terms of what he is able to deliver. And Likeability is not far from that, where it is the trait of having qualities that bring about a favorable regard when requested.

Taking examples to understand this more if we say Peter is credible and Evans is likeable, what we mean is in terms of technical skills, expertise and how reliable Peter is, he scores high based on that criteria but for Evans we are saying that he : has interpersonal skills, is approachable, is collaborative, and is good at communicating which makes him a great team player but which means Evans is not necessarily reliable in terms of technical skills.

How can I become credible?

Credibility is built through work and delivery. To say Peter is credible is because he has projects we know he worked on, products being used by people, inventions he made, books he wrote or any thing else that proves he really has the skills.

So you have to be able to create something and let people know what you are capable of doing by joining communities mainly online and being an active member who doesn't only read other people's posts but also creates some him/herself.

How do I become likeable then?

Pretty simple, on top of the technical skills you have, you have to build skills like interacting with people, being able to present your ideas, public speaking skills, among other interpersonal skills you can find online.

To sum as an aspiring Software engineer you need to have influence and that is only achievable if you are creating things and also putting yourself out there and let the rest of the world know what you can do.

Thanks for reading, ideas on what I can talk about next are really appreciated.

Clean Code: Multiple exports, single import!

Mwenedata Apotre — Fri, 21 Apr 2023 14:47:14 +0000

I always wondered whether there is a cool way to import many components in one line in React JS once they are in the same folder.And turns out there is a way that you can make your component more cleaner and will save you a lot of frustation.

So let's say you have 5 Components in your app and they are stored in a folder called components. Like this folder structure below:

The problem(issue)

The issue here is that if you want to import all the components on a single page like home page you'll need to write this:

You can see that if we need to import many files like 20 components our file is cluttered with import rather than the real logic it need to implement.

Quick Solution

Create a file named index.js inside the components folder.

And then paste in the above codes from home to that newly created index.js file:

Then what you have to do is export the files as named exports from the index.js file:

So, you see that was very easy and now you have a clean home page file like so:

Thanks and don't forget to live a ❤️ !

Algorithm Visualization: An Adventure in Thread Sleeping🔥

Mwenedata Apotre — Wed, 01 Feb 2023 12:36:35 +0000

Back here dev family, I recently took on a challenge to develop an algorithm visualiser and I started with animating five of the most common sorting algorithms. The project will be an ongoing project as I'm planning to add more features like path finding algorithms and many more.Find it at https://algo-vis-two.vercel.app. Consider visiting it and giving me some inputs and maybe feature requests and challenges I really would appreciate.

The challenge in this project

Apart from learning the actual sorting algorithms and how to integrate that in the user interface another challenge here is animating the whole process of sorting as I needed.

How is it a challenge

I hardcoded the generation of 20 random bars with different heights, and for those of you who know a thing about performance about algorithms you know that some algorithms are faster than other ones even though this is the case, the difference between the execution times of this algorithms is very fast unless you have a really large amount of data and animating the process is very quick that there is little to nothing to see on how items interchange positions in the whole process.

How I first approached the animation and how it worked

At first, I just wrote the sorting algorithms and I would set the state on each iteration of the algorithm and I though it would work which it did but in a very fast way that you couldn't realize what happened. Here is a sample code I had at first(bubble sort):

So basically what I did is passing my bars array to the function and a set to set the new state of the whole array at every step and the currentBar which also allowed me to set the current bar being checked. And what happened is the whole interchanging process took place in a matter of milliseconds and you couldn't know what happened.

How I tackled the challenge

I first thought I had to somehow simulate the sleeping of the thread in js to allow my state to update and be seen before we can move on to the next iteration. Unfortunately, there is no sleep method in javascript and I had to implement my own. So I used the asynchronous approach and promises to do this. I implemented a function from the knowledge caught up from StackOverFlow called Sleep like this:

So, how this works is it called by being awaited again like this:

And as we know await a promise keeps the thread busy until the promise is resolved or rejected and in the implementation of the promise it is resolved after a specified time (ms) and this allows us to see how the elements in the array are being interchanged visually to a speed that our brain doesn't perceive as instant.

There are also many other ways to distract the thread like this one:

function sleep(){
let i = 0;
while(i<10){
setTimeout(()=>{
i++;
},100)
}
}

And there are many others but with this I think anyone can try to think his/her own implementation.

So that was it for sleeping the thread in javascript and it has many applications I just needed it when I was trying to visualise processes and you might also meet a different case scenario but with the need to do this and it'll be helpful.

Like, Share and Comment for the motivation! Thanks.

Inspired by Hernan Cortes( Choosing a career by burning all your boats).

Mwenedata Apotre — Sun, 22 Jan 2023 19:40:54 +0000

To all of you reading this post, let me first greet you and tell you that I'm curious to know on which side of web application building do you prefer to work on? (Comment down below and come back 😁).

Hernan's story

Hernan cortes was a battle commander and he had few soldiers left and once they landed on the enemy's territory he commanded the soldiers to burn their boats so that they fight knowing that it's either winning or dying and no turning back! What's interesting and inspiring is that these soldiers ended up winning the battle which proved this method psychologically efficient.

Everyone's story

Entering this field of software development mainly the web development many people learn the basics and then they are bombarded with the two sides of web development - Frontend and Backend- and they end up being stuck in choosing where to specialize. For many resources you find online answering this question they give an advice of starting by trying to work on both and get the experience or know how it feels like to work on that side of web development and it is actually the right thing to do at first. What rises as a problem is when someone actually spends too long jumping from Frontend to Backend from project to project.

The problem with Full stack developers these days

There are many problems related with Full Stack developers in modern days:

Full Stack developers are now having unbalanced knowledge on both sides of web development, i.e for example 40% (Frontend) and (60%) and they still prefer to call themselves Full Stack developers while it's clearly visible they are good at the backend in this case.
Full Stack developers today stand a very little chance in getting jobs considering the market today i.e the current supply and demand. Today being a jack of all trades and a master of none will help you get a job if you only you meet '##Lady Luck' otherwise being a master at what you do is what will help you stand out from the crowd. Do a research yourself!

So, enough of this let me go to my personality.

My Personality

I don't like the idea of being a jack of all trades instead I like picturing myself being a master in something given the condition that I have a true passion in it. This means that any advice that conveys the same message as this proverb ##Don't keep all your eggs in one basket ## don't actually please me. I like the idea of ## burning all your boats ## . In development it's in that way I went for backend development.

Why do I call it burning the boats

If you have a little of experience in job searching you probably have noticed that many Job boards have many Frontend job opportunities than backend and they usually have quite tolerating requirements for many people to apply compared to backend job openings found there. So, trying to pursue and land a job in backend development is really hard. That's why I call it burning boats, there is no turning back!

Why is this method effective

First of all it increased my productivity because I usually would feel overwhelmed with all the things I had to focus on but after finding what to spend most of my time on I usually find myself having a clear mind at every end of the day and a feeling of having achieved something each day mainly learning something new. And I enjoy doing that every single day.

I had many things to talk about on this topic but I have to keep these article short. So let me hear your points in the comments and other topics you would like me to talk about in the future.

Conclusion

As conclusion, you should not take my word just like that. But what I'm saying is based on experience and totally on my own opinions and you should use this article and combine it with the knowledge you have to make good use of both.

Starting out Small! Avoid Overthinking.

Mwenedata Apotre — Tue, 10 Jan 2023 08:17:59 +0000

So you're thinking about starting a personal project to escape the rat race of the rigged education system, then you start wondering how many users will use your product? How will you market the product ? How will you get the money needed to maybe run servers, and have a team work with you, etc. After this you end up doing nothing and terminating the project totally only because you thought you wasn't going to be able to market the product you haven't even built.

Overthinking does no Good

So what do you have to take from this, when thinking about starting a project there are many things to consider but when you overthink and go into every little details there is needed to make the project a successful one you'll end up doing nothing. So instead , first consider the basics things you need to start implementing your idea and then get to work and let life take its course.

Conclusion

If you try this in every thing you do not only programming projects you'll find that overthinking is a really damaging practice because it usually even make you feel overwhelmed due to too much things you want to figure out before hand.

As usual I'm writing small articles for self improvement and mindset shifting , I'll be going into technical stuff less than this.

Earning way more with Code!: What ChatGPT says and my opinions

Mwenedata Apotre — Mon, 02 Jan 2023 11:50:04 +0000

Are you tired of the 9-to-5 grind and looking for a way to increase your income while also finding a sense of purpose in your work? Starting a business with code can potentially earn you even more than finding a job as a software developer. Not only does it allow you to create your own products or services and sell them to a larger market, but it also gives you the opportunity to work on projects that you are passionate about and that align with your personal values and goals. This can give you a sense of fulfillment and make your work feel like something that is not just a means to an end, but something that is truly meaningful and fulfilling. While starting a business with code does come with its own set of challenges and risks, the rewards can far outweigh them with hard work and determination.

Well well well, step aside Chat GPT time for my insights, so people I'm not going to go far from what ChatGPT mentioned but I want to emphasize on this thing called "work feeling like not work". Well what I mean is when working to grow a business you'll not need to read articles to motivate you or even watch motivational videos because the sense of attachment itself will generate a level of motivation and work ethic you usually get to when trying to save yourself from danger and this is not all.

Napoleon Hill Concurs

For anyone who's ever read the Napoleon Hill book called Think and Grow rich , the second chapter is about the thing he calls desire, and this is no ordinary desire it's a very burning desire you have to achieve something and that's only what you need to accomplish it , because with a burning desire you'll find yourself coming across realizations you've never had before because of the laser focus level you'll be having.

I can spend at least 24 hours talking about how this and can give you a lot of examples but let me stop for now this was just a small article to share to you fellow devs and maybe come back to it in later articles. Thanks for reading don't forget to like and add your opinion!

Happy New Year !!

Help me(us) out fellow developers!!

Mwenedata Apotre — Wed, 28 Dec 2022 07:33:07 +0000

For my followers and new readers of my post I am writing this post to get advice and your opinions on the decision am about to take.

So the thing is I am a good frontend developer you can really count on me for your projects but then I enjoy backend more than frontend, but another problem is Frontend development job opportunities are prevalent and easily got than those for backend development.

So I'm stuck , should I keep working with Frontend for the money or should I keep working with Backend and be patient until the opportunity arises?

Thank you All for your ideas I'll really consider them and I Know someone out there - maybe you - has the exact same problem so help us out.

Software Development can be boring!

Mwenedata Apotre — Wed, 14 Dec 2022 16:36:23 +0000

You don't believe me? Let me tell you my story.

I've been passionate about software development and computer science since the start of 2020 and since then I started learning programming , from language to language improving my skills little by little and then I later joined Rwanda Coding Academy to further make software development my career. What happened later is not far from what you think.

At Rwanda Coding Academy

I joined the academy and got some mentorship and I learn Frontend Development with React JS and Backend Development with Node JS and I also built a couple of projects to showcase my skills and I embarked on a job seeking journey. I applied to every job post I would come across and after few rejections I started seeking ways to improve my resume and cover letter , social media profiles ,etc..

So basically, I started off with a passion to create but then after many rejections I started get demotivated and later forgot what brought me in this coding career and coding started being boring because I had no other purpose to code than getting some job opportunities which was not actually the real reason I came into this field in the first place.

Finding what I enjoy is helping me now!

I sat down and realized I have spent a month without having learnt anything new, my Github streak was broken and I hadn't built something at least. So, I decided to try to identify the root cause and I found out it was because I was not being true to myself. I just enjoy building stuff and solving problems , that's what got me into this career so I transitioned and started working on some ideas I had and learning things for the sole purpose of being able to build and solve problems.

Now things are kinda smooth now!

I haven't been stable yet but at least am working on some projects am passionate about and I really believe something great will come out of that.

Last words

Just follow your passion and work on something that really interests you or else soon you'll find yourself undergrowing and time will be passing by with you not doing anything productive.

Only 3As to writing your first test!

Mwenedata Apotre — Wed, 02 Nov 2022 13:25:57 +0000

I've been developing web applications for so long but I always looked back when it came to testing and this has many reasons.
And let me elaborate:

My Code works why bother test?
I usually couldn't wrap my head around why I needed to write code to test something that I am using and is working perfectly fine. And I'm sure many of other junior developers also have the same thinking but we'll explore why we need to test.

Testing is very hard and is for Senior Developers

Well this is a real case and I too, used to think like that and this is because I saw many job postings requiring testers to be highly experienced individuals. Well testing sometimes does require core understanding of the tools you are using to test and the app you are testing with the libraries used to develop it but in the end I just found out it's not that hard and is very easy to implement the tests.

There exist many other reasons to why I avoided testing but the above are one of the main.

So what is testing all about?

Testing in software development refers to the process of writing code to test either some parts of the software , their integration or the software as a whole or using the software directly and testing every feature to see if it works following the flow.

With testing React Apps testing is very very simple just the 3As

3As

Arrange : here you just render components and provide the props required using code. (Mainly libraries are there to help with you).
Act : Acting is the most important step in testing because this is where you mimic the user's action using code to then expect certain things to happen or not.
Assert : The last and mainly the intended part of testing is assertion , here you expect something to happen given the actions you deployed in the second step like the button being disabled the state changing etc...

So far What I've seen is that testing is not actually about coding but setting the right priorities and trying to perfectly mimic the user's action and then writing codes just depend on the library being used and doesn't matter that much as long as you understand the concepts and patterns.

This was part one of this series next time time I'll be talking about types of testing and how to get started. Like and follow for more!

Save yourself from frustration(The white Screen #cause1)

Mwenedata Apotre — Mon, 29 Aug 2022 11:47:00 +0000

React useState bugs series Part II

The white-blank screen in React is a common scenario for many developers and it doesn't only come from the useState hook but rather many errors.

With useState it can also come from many scenarios but today we are going to talk about giving your initial state value a blue- print .

What do I actually mean let's take an example of an application

So basically that's a very simple app with the result on the right side and you can see that I initialez user in the state and in useState brackets I put nothing and if you can see if I try to access the user's name I get an error:

So this means when you initialize a value with useState and put nothing it is considered undefined and JavaScript tolerates many things but not accessing a property of an undefined object.

So let's make a small change and initialize the user as an empty object:

You can certainly see that we still have a blank screen but no error let's add some text in the div

You see it's a small fix and it would be better if you really gave a clear template.

Thanks save yourself from some bugs and frustration.

See you in the next one.

useState bugs part I: Unexpected state update.

Mwenedata Apotre — Sat, 13 Aug 2022 20:11:00 +0000

So has it happened to you when the state updates in an unexpected way? Keep this question in mind.

One of the most discouraging things in a developer's life is when he's just starting his project and boom! a bug steps in and here is what goes on in his mind:

"Oooh I think this is just a small bug and I will just fix it and continue my project and I'll be fine".

So, next thing he does , he tries and tries to fix the bug until he can't and he immediately looses motivation to work on that project and his day becomes a loss.

In this useState bugs series part I let's talk about the most common issue with useState and how to fix it.

So has it happened to you when the state updates in an unexpected way? comes again the question. If yes it's because many reactjs developers use useState without understanding how it works under the hood. Let's take this small app example:

This is a very simple app we're going to be using for demonstration and what it does is just updating the state and the data in the h1 once I click on the increase button and also do so after 2 seconds when I click on the increase asynchronously button.

When I click on increase:

When I click on increase asynchronously , we wait two seconds and then see this:

So the buttons basically do the same thing within different time intervals.

So what I want to demonstrate here is the problem that may occur :

First note that the setTimeout function I used was to just simulate an asynchronous action like an http request where the state updates after it has resolved.

The problem occurs when I click once first on the increase asynchronously button and then click on the increase button imediately after more than once like maybe twice or thrice

What do you think will happen? So here's what happens:
I click on the asynchronous button:

Of course nothing happens unless 2 seconds have passed by

BUT:during that 2 seconds period I also click on the increase button exactly three times:

And once 2 seconds are over here's the result :

But why? We already had 3 as the value but the value changed back to 1, unexpected right?

So here is an explanation: When you click on the increase asynchronously and the javascript reaches the 'setNumber(number +1)' line it stores the current value and after two seconds are over it will add one to the stored value and in the example above the number was O so it added 1 and the result was 1.

This may produce unexpected behavior and may frustrate many developers once they don't recognize where the problem is.

So how to solve that :

Solution: Use updating using a callback function in useState hook.

Here's how:

const increaseAsynchronously = () => {
    setTimeout(() => {
      setNumber(prevNumber => setNumber(prevNumber + 1));
    },2000)
  }

We provided the callback function and it takes one parameter which represents the current value of the state and that's why in that case it works perfectly fine . Let's repeat what we did before:

I click on the asynchronous button:

Of course nothing happens unless 2 seconds have passed by

BUT:during that 2 seconds period I also click on the increase button exactly three times:

And once 2 seconds are over here's the result :

So it works , you can see that now the result is the expected one.

Thank you! Hope this helps someone.

Let's discuss about this post in the discussion section and like for the algorithm.

Re-usable components and utility functions saved ME!

Mwenedata Apotre — Wed, 10 Aug 2022 16:05:00 +0000

Hello to you fellow dev! The title of the post says it all but if it doesn't to you let's dive right into it.

I've had times where when I started a project in React I would at most create files for the pages I need to allow navigation. This means that all the utility functions I created was inside my pages including the http requests I made. For a small project it went smooth until I tried to clone a popular website.

The Turning Point

I started cloning the web app expecting to finish it in just 3 weeks. What's funny is that I finished the not good-looking app in almost 2 months all because of improper organization and not using re-usable components and utility functions. That's when I decided to start using re-usable components and utility functions from then.

Understand re-usable components

A re-usable component in simple words is a component that you can use in many different places and it can be given some props if you know them, to give it the adaptation and flexibility in those many scenarios.

What do you mean by utility functions also?

Utility functions are functions that you put aside and you are sure that you will need them many times throughout the whole project. An example of such functions are http requests, data-modification functions and many others.

Why use re-usable components and utility functions

I have stated it before and I'll repeat it again ,use utility functions and destruct your project as you can as it will save your time and prevent you from burn-out and frustration, believe me.

Here's another story

I started building a resume builder project that seemed somehow hard to me but due to proper organization after a week I am 85% almost finished with the project.

Have a look on my current folder structure of that project:

Note:

I have the src folder with subfolders.
The folders are :
- Components folder which contains re-usable components like navbar, input, imageCards, etc.
- redux which contains all things related to redux from store to actionCreators.
- utils folder which contains the utility functions we've been talking about like the one I have called generateYears.ts which help me get years , months and days for my select options.

So, this was a short blog but keep that in mind because someone once said : "Think twice before programming or program twice before you start thinking."

Thank You! A like would help so much.