DEV Community: Mohcin Bounouara

It’s ok to feel afraid when working to fill your knowledge gaps as a developer

Mohcin Bounouara — Fri, 22 Nov 2024 16:36:19 +0000

I have been dealing with this feeling for years, and I still do. In the beginning, it was really frustrating for me, day by day, step by step, I learned to “TRY DEALING WITH IT”, not fully “DEALING WITH IT” yet, because I’m not at that level.

Let me share a story that might be similar to you or to your experience.

A web developer/software developer who loves this field and has always tried to learn as much as possible. In the past, he made many mistakes by not being serious about focusing and learning the right way. Actually he didn’t know how to learn effectively, even though he was eager to grow and improve in this domain.

Now, while trying to correct those mistakes, he finds it challenging, a lot of tech stacks, and many technical knowledge gaps to fill, all while needing to maintain his work as a source of income.

Well, the story above is mine, I was exactly describing my own journey.

well,

How I’m dealing with this right now.

Work on the psychological blockers:

1- I identified the root cause of my fear: I’m afraid of looking wrong or stupid. I realized I was wrong, everyone has their own intelligence in one way or another. It’s just a matter of experience and how you approach solving problems.

2- Respect yourself and appreciate your failures, they are something you MUST go through. Otherwise, you’re not truly living in this world, you’re in heaven.

3- Don’t always expect to deliver that great work always, be prepared to receive constructive or not soo positive feedback.

4- You might find yourself in an environment where others seem better than you. It’s normal, it’s ok, even if you’re a senior developer. Don’t discuss that feeling too much, focus on your own path.

5- Value any tasks that you will take, give them your emotion.. concentrate on it even if it boring task or a very simple

6- Remember that you were hired for a reason. Keep doing your best to make a living and push away the worst-case scenarios. I know it’s hard, but focusing on those scenarios will only block you from doing your best. It will not help you in the future, even if they do happen.

Work on technical/professional blockers:

1- List your technical gaps one by one. But remember, don’t try to address them all at once on the learning side, or you’ll end up dropping them all at once.

2- Set a time to learn what you’ve listed as gaps, even if it’s just 30 minutes per day. You will see significant improvement over time.

3- Don’t be shy to ask technical questions

4- Show up, share your knowledge even if it looks basic for you, share it with the community that you admire, also share it with your team, don’t say it is too basic for them.. it will help.

4- Learn to communicate effectively, talking and writing.

5- Start small. I know it’s hard to fill your gaps by focusing on the basics of JavaScript (for example) or creating simple functions, especially after having more than 3 years of experience. It’s mentally challenging, but trust me, this will pay off in the near future.

6- Remember, anything you add to your knowledge or skills will make you more valuable and help the team around you. You may not notice it right away, but it will come.

I have not completed all of these steps above yet, I’m still working on myself. But I’m following what I’ve mentioned. I used to share the process only when finish something, but now I’m sharing as I go, because I might not have the chance later.

I’m sharing this in my way to become a less afraid, more confident software developer.

See you..

Originally posted on my blog: https://mohcinbounouara.com/its-ok-to-feel-afraid-when-working-to-fill-your-knowledge-gaps-as-a-developer/

The Joy of Understanding One Line of Code

Mohcin Bounouara — Sun, 18 Aug 2024 16:09:15 +0000

In your software development career, you’ve probably experienced the joy of truly understanding a line of code, right?

On the other hand, there’s that feeling of not fully grasping the code, whether it’s something you wrote or code written by others. Let’s dive into the value I want to share through out this blog post.

I used to copy and paste code, this is a common practice in software development. It’s a pattern and part of our daily work in this field. But even when the copied code worked, I often felt like I was missing something, or maybe something like psychological dissatisfaction.

Don’t get me wrong, I’m not advocating for reinventing the wheel. If you can leverage existing code snippets, scripts, or libraries, do it without hesitation. It’s actually a sign of seniority and experience. You’re bringing value to the project by applying knowledge efficiently, saving time and effort.

Let me give you an example of when coding becomes a joyful experience. Imagine you find a solution on StackOverflow or from one of the popular AI tools today. Instead of simply copying and running it, you take the time to read, understand, and adapt the code to your specific use case. You might add or remove lines, making it more adaptable to your project. This process can sometimes be harder than writing the code from scratch, but it’s satisfying because you’ve not only saved time but also bring value to your work/team.

Here’s another example: You take a simple SQL query, spend time fully understanding it, and then integrate it into your codebase. You feel accomplished because you didn’t just use a copied SQL statement or an auto-generated ORM query. You truly understood what you were doing.

In general, the message I want to pass in this post is to take advantage of existing code to move your project forward. It’s perfectly fine not to understand every single detail in your codebase, and it’s okay to use this approach to save time and money. But whenever you have the chance to deeply understand a line of code, EMBRACE IT. It’s a rewarding feeling.

Keep learning…

Originally posted on my blog: https://mohcinbounouara.com/the-joy-of-understanding-one-line-of-code/

A Quick Guide to Creating Laravel Factories and Seeders

Mohcin Bounouara — Mon, 01 Jul 2024 18:50:02 +0000

I often find myself back to the Laravel documentation whenever I need to create new factories and seeders for my projects, whether they’re learning exercises, hobby projects, or real-world applications (bored doing the same actions every time). To make this process easy, I’ve decided to create a guide that I can refer to whenever needed, saving time and avoiding the need to search through extensive documentation. If this guide helps someone else, that would be a great thing!

Let’s assume we have a User/Posts relationship, meaning each user can have one or more posts, and each post belongs to a user.
What is a Factory?

A Factory in Laravel is a class to generate test data for your application. This is useful for local development and staging environments, providing a lot of benefits. Laravel allows you to create a factory for each model you have.
What are Seeders?

Seeders in Laravel are used to populate your database with data using seed classes, which is especially useful for testing purposes.
Generating New Factories

To create a new factory, run the following command:

php artisan make:factory PostFactory

You will find your factory class under the database/factories directory. Here is an example of defining your factory:

public function definition(): array
{
    return [
        'title' => $this->faker->sentence,
        'content' => $this->faker->paragraph,
        'user_id' => User::factory(),
    ];
}

Generating Seeders

To create a new seeder, run the following command:

php artisan make:seeder PostSeeder

You will find the seeder class under the database/seeders directory. Here is an example of the run function within this class:

public function run(): void
{
    Post::factory()
        ->count(20)
        ->create();
}

In the same directory, you will find the DatabaseSeeder class. Ensure it includes all your seeders:

public function run(): void
{
    // \App\Models\User::factory(10)->create();

    // \App\Models\User::factory()->create([
    //     'name' => 'Test User',
    //     'email' => 'test@example.com',
    // ]);

    $this->call([
        PostSeeder::class,
        ..,
        ..
    ]);
}

Running Migrations and Seeding the Database

First, run the database migrations:

php artisan migrate

Then, seed the database:

php artisan db:seed

Now you have test data in place. Enjoy!

Originally posted on my blog!

PHP note: For Loop Performance

Mohcin Bounouara — Tue, 23 Nov 2021 14:45:41 +0000

About a year ago I started to writing code “BUT NOT JUST FOR WRITING IT”, I focused on to trying to fully understand what I’m about to write, in the whole software life cycle and I was giving attention to the performance, speed, and clean code.

So I was trying to improving my “PHP For Loop”.

I was repeating myself and write for loop on this way below:

$array = [0, 1, 2, 3, 4];

for($i = 0; $i < count($array); $i++) {
      print_r ($i);
      echo '<br/>';
}

The above way of writing for loop is WRONG. Why?

In every loop the Count function is called, and that is code overhead, we have just 5 items in the the array, imagine that we have hundred that will absolutely affect the performance of the script.

Let’s try to improve our loop:

$array = [0, 1, 2, 3, 4];
$j = count($array);
for ($i=0; $i < $j; $i++) {
  print_r ($i);
  echo '<br/>';
}

Let’s calculate for loop execution time in seconds and do comparison;

The first script: Executed in 4.0531158447266E-6 seconds

The second script: Executed in 3.0994415283203E-6 seconds

Those notes is about small scripts, try to imagine working on large-scale apps or websites. Making attention to these things will improve your code and totally improve your vision as a software developer or web developer.

Create Dark Mode functionality with pure JavaScript

Mohcin Bounouara — Mon, 21 Jun 2021 17:09:44 +0000

I was using front-end Framworks as Vue Js and jQuery, but I discover that I have some problems that I must fix in JavaScript basics (and I’m proud to fix and learn new things always) because at all you will use Js in your Frameworks based project necessarily.

I decided to learn some principal in Js with deeply way because I’m not learned it correctly in the beginning, and I will share some simple Implementations as blog posts maybe it will help someone in somewhere.

Let’s start with creating a feature that is very common in websites this days, “Dark Mode functionality” .

The HTML page structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
  </head>
  <body>
    <header>
      <button><i class="fas fa-sun"></i></button>
    </header>
    <main>
      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>
    </main>
  </body>
</html>

We will use this simple CSS style for the page:

body {
  text-align: center;
}

article {
  margin-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  padding: 10px;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 2rem;
}

.darking-mode {
  background: #374151;
  color: #fff;
}

The JavaScript function that will handle the click and switching between normal and dark mode, I will try to explain every line of code clearly. I used to comment my code so its already commented but I will try to explain it also.

// get the element to be clicked
const buttonToBeClicked = document.querySelector('button');

// addEventListener() method to execute the main function
buttonToBeClicked.addEventListener("click", darkMode);

// our dark mode function
function darkMode() {
  //console.log('Clicked!!');
  let theBody = document.body;
  theBody.classList.toggle('darking-mode');
    //console.log('switched to dark mode!');
  if (document.body.classList.contains('darking-mode')) {
     let icon = document.querySelector('i');
     //console.log(icon);
     icon.classList.remove('fa-sun');
     icon.classList.add('fa-moon');
  } else {
     let icon = document.querySelector('i');
     icon.classList.remove('fa-moon');
     icon.classList.add('fa-sun');
  }
}

Function explaining:

I used an addEventListener() method to handle click to execute the function that will do the work.

After that I stocked the body element in “theBody” variable.

And I used “Element.classList” a property that return a live class “darking-mode” that is responsible on changing elements color and body background color.

Finally I use an if statement to handle toggle fontawesome icons.

The blog post has originally posted on my personal blog. Hope that will helps someone, somewhere.

About code smells

Mohcin Bounouara — Sun, 25 Oct 2020 19:00:12 +0000

In software engineering field you are probably heard about “Code Smell” before right?, the name comes from Martin Fowler and Kent Beck. So let me explain a little about this concept.
What is and for what code smell?

Code smell in software engineering point on sick code in the deep system of an software, simply is the problems that actually exist in the system but It doesn’t prevent the software from completing its tasks.
Smells are the structures in the code that not respect the fundamental design principles and negatively impact design system quality. So it’s not “BUGS”.

A code smell is a surface indication that usually corresponds to a deeper problem in the system.
— Martin Fowler

For what?

Software engineers use code smells to analyze the existing code using Unit Test and Testing Life Cycle test of the software, after finding the code smells who need of more refactoring.

Code smell: common examples

Long methods: Most developers think the complex methods gives them the great image, but NO, do it simple and do it short. Long methods make code hard to maintain and debug.
Duplicate Code: don’t repeat yourself!
Lazy Class: Remember that lazy classes do the work, but in the future it’s hard to fix in bug cases.
Dead Code: Delete it don’t just comment it or let it without doing anything. Make it clean.

Code smell tools

If we take PHP as a use case, we will found that there is a lot of tools using to do that work, some of them that listed next:

And I will come with a practical example of code smell when I have time.

Code smells can be in any system written by programmers, even experienced, so try to use code smells tools to detect the smells and try to refactoring it.

Note: This post is originally posted on my personal blog

Implement Hover in Vue

Mohcin Bounouara — Sun, 26 Apr 2020 18:52:06 +0000

We used to implement showing something on hover using JQuery or pure CSS but if you are starting using Vue Js and you wanna do the same you will face the problem, there no functionality built in or pre-defined so we will try to make this simple implementation for that.

Let us first make a reminder of this functionality in JQuery and css.

Here is a Jquery example using mouseenter() and mouseleave():

Here is a Jquery example using pure css:

After this simple reminder about this common functionalities I will do the same using Vue Js.
Ok!, to do that in vue we will use Vue events to listen to DOM events when the mouse enters and leaves, and update our state based on that.
We will use v-on directive to listen to the mouse moves. we can just write @event to define v-on:event.

<div id="app">

  <p>
    Hover on me to show text
  </p>
   <p>
   This the text who shown after hover
  </p>

</div>

new Vue({
  el: '#app',
  data: {
    toShowOnHover: false,
  }
)}

Now any element with property "toShowOnHover" will be shown on hover after we setup the methods

We will use v-show to show the element who have the vue property on hover.
So our code will transform to something bellow:

<div id="app">

  <p @mouseover="mouseEnter" @mouseleave="mouseLeave">
    Hover on me to show text
  </p>
   <p v-show="toShowOnHover">
   This the text who shown after hover
  </p>

</div>

new Vue({
  el: '#app',
  data: {
    toShowOnHover: false,
  },
  methods: {
        mouseEnter: function(){
            this.toShowOnHover = !this.toShowOnHover;   
        },
        mouseLeave: function(){
            this.toShowOnHover = false;   
        }
  }
})

The mouseEnter() function let us show the element p who had already the property "toShowOnHover"
The mouseLeave() function let us hide the element p to return to the base state

DEMO IN ACTION

Conclusion

Now you have the start up keys to achieve any thing you wanna show when users hover an element in your next vue app.

Go ahead and happy coding

Absolute fixed and relative the difference!

Mohcin Bounouara — Sun, 26 Apr 2020 01:32:06 +0000

Let’s talk about the position property in CSS in my humble view.

What is?

The position property are responsible for the positioning of the any HTML element in the whole document.

CSS Position:

There are more than one type of positioning: static, relative, absolute, fixed, sticky, initial, and inherit.
But I’ll talk in particular about relative, absolute and fixed and the difference between them , so let us know what are those types with this simple definition to each of these concepts.

Relative: a relative position without other attributes means that element is relative to it self so it should not had any effect on his positioning.
Absolute: this type of positioning like a superpower in CSS, it gives you the possibility to place any page element where you want and over any element you want on the page where you want.
Fixed: it’s like absolute position but not for a relative element but for the whole document. If the element have an fixed position will not disappear when you scroll in the page.

Cases In action:

Position absolute, this example gives you a clear view about absolute position. Check HERE
Position fixed, this example gives you a clear view about fixed position. Check HERE
Position relative, no need for an example. If you didn’t applied attributes (Top, right..) on the element and you just used position: relative you will not have any changes on the element.

The difference in this short summary:

The position: relative means the element position will be based on his starter and current position without changing, the position: absolute you have the right to place the element in any place provided that have a parent element with relative position, position: fixed will give your element the position over the other elements of the page even on the scroll.

Avoid to use:

The absolute position is one of the best CSS property that is easy to use, especially for junior developers because it solve a lot of problems, personally I used to work with it in several works haha, but I learnt what I'am trying to explain for you now..

Problem 1 :

Let’s suppose that you are working on project that required to be responsive and should be accessible in different machines, it will cause a problem.. you will be required to work in all the resolution using Media Queries, and this isn’t a practical process.

Problem 2:

When we use absolute position a several CSS Properties who using with pixels like margin or padding will don’t be shown the same when you’re changing the resolution or break the browser point.

So try to use absolute position in special and necessary cases, you will learn to do that with practice.
And don’t use “pixels” when you’re using “absolute” position.. use “%” you will save a lot of work and time.

More Information
Originally posted on my blog

That's all, thank you!

Learning without Educational System

Mohcin Bounouara — Fri, 16 Mar 2018 19:29:50 +0000

When I was learning and I'm still, regularly I always notice that our teacher keep in the old method of teaching,, except some wonderful teachers.. The theoric courses after that some issues explanation and finally a practice of all those thing you already learned them..

In such fields as Internet Technology, maybe that will works all the time, and maybe will not work.. but personally I believe in learning without processes or pre-plans, DO YOU?

Come, I will explain my simple point of view..!

The learning Academic norms

I'm not an expert at Learning domain but also I'm a developer who knows google and googling things very well, so with a simple search in google using keywords like, 'learning' 'Academic' 'norms' 'system' I found this very clear result as, the education system is an process that allow student to learn anything form basics to professional and facilitate that using specific methods.

An Academic progress: is monitored by the teacher but is driven by the individual student. A student’s progress from one level to the next is based on academic readiness, not chronological age or “seat time.” Upper School students may complete their transcript work in three years, four years, or five years. Counterpane refuses to advance or graduate a student who has not proven academic readiness by an end-of-course grade of at least “75” in all college preparatory work.

Without academic processes (Plan)

To start from my experiences, I learned a lot of things and in different technologies without any pre-processes or pre-plans, also, I learned a lot of technologies without theory.. maybe looks strange but this is truth, during my 2 to 3 last years I worked as IT developer and a freelancer for a lot o people and startup, also I worked with an web agency as senior web developer and at "SEO" Team in the some agency.. there is things stuck in my mind more than others, as "You LEARN, DISCOVER, FORCED TO KNOW, TRY A LOT, KNOW NEW TECHNOLOGIES" When you NEED THEM!!

Lets told you who I learn a lot of new technology, tips and skills without plans or processes. I will use this square list to do that because I'm not too good in English :' guys :D :

Working with a team is always makes you learn new things "Without Processes", because if a friend or work-mate explain a tips to you he will be more brief and useful
Falling into technical problems during you're working on a real-time project makes you learn new skills or tips "Without Processes"
When project Manager asking from you to use a specific technologies to do this project you will not say "NO" so even you are never know about it you will go to documentation and you will be able to work with that even hardly, so you are learn and learned "Without Processes"
When you are on a Side-Project you try to use new thing so you just need a documentation and some blog posts or guide without keeps in order, so you are going to do it "Without Processes"
When you are going to search for a tutorial to know a new technology,, you will find a lot of them on the net, you choice one.. yo read it.. you learn from it.. REMEMBER that its not a teacher or someone who are using an academic processes to teach you that.. he's just an guy who share with you what he already knows so you learn "Without Processes" Even that!!.
REMEMBER You are able teach us what you KNOW so we can learn without processes :D

I shared you guys what I think from my view.. lets know yours :)