DEV Community: Hassan Shahzad Aheer

🐞Debugging Life: The Software Engineering Lessons You Can’t Ignore

Hassan Shahzad Aheer — Sun, 16 Feb 2025 11:58:02 +0000

In software engineering, every line of code has a purpose. A well-structured program runs smoothly, while a messy one leads to endless bugs and frustration. Life works the same way. The mistakes we make, the shortcuts we take, and the mindset we carry shape the outcomes we get. Here are some key lessons from software engineering that apply directly to life.

🛠️ The Blueprint Matters – Planning Before Execution

In programming, we don’t just start coding randomly. We plan. We define the goal, break the problem into smaller parts, and structure the code accordingly. If we skip this, we end up with messy code that’s hard to fix later.

In Life:

If we go through life without a clear “why”, we act randomly and waste energy. Imagine starting a new habit, a career, or even a relationship without knowing where it leads. Without direction, you’re just throwing code into an empty file, hoping it runs.

🪴 Lesson: Before jumping into anything, ask yourself, “What is my goal? Why am I doing this?”

⚠️ Quick Fixes Create Bigger Problems Later

Sometimes, developers rush to fix a bug without thinking about the bigger picture. The code works for now, but it breaks something else in the future. This is called technical debt, and eventually, it slows everything down.

In Life:

Many people look for quick fixes—crash diets instead of healthy habits, avoiding hard conversations instead of fixing relationships, or chasing shortcuts instead of real skills. But these temporary fixes create long-term issues.

🪴 Lesson: Don’t patch problems—solve them properly. Invest time in doing things right the first time.

🤯 Overengineering – The Trap of Perfectionism

A common mistake in coding is overengineering—making things so complicated that it becomes impossible to maintain. Sometimes, a simple solution is better than an overly complex one.

In Life:

Overthinking and overplanning often lead to inaction. Instead of making a simple start, we keep adding unnecessary steps, waiting for perfection, and never actually doing anything.

🪴 Lesson: Start small. Don’t wait for perfect conditions—just begin and improve along the way.

❓ Stay Focused – Avoiding Distractions

In programming, every function must have a clear definition. If it’s unclear, the program doesn’t know what to do with it, leading to errors.

In Life:

If your values, boundaries, and priorities are undefined, you’ll constantly feel lost. People will push you around, and you’ll struggle to make decisions.

🪴 Lesson: Define what matters to you. Set boundaries. Know when to say yes and when to say no.

🐞 Debugging is Essential—But So is Learning from Mistakes

Every coder knows that debugging is part of the job. We don’t cry over errors—we fix them, learn, and improve.

In Life:

Mistakes are unavoidable. The problem isn’t failing—it’s not learning. If we repeat the same mistakes without reflection, we stay stuck.

🪴 Lesson: See mistakes as debugging opportunities. Ask, “What went wrong? What can I do better next time?”

🔄 Distractions Are Like Memory Leaks

In software, memory leaks happen when the program keeps holding onto unnecessary data, slowing everything down.

In Life:

Distractions—social media, negativity, unnecessary worries—drain your mental energy. You feel exhausted, but nothing productive happens.

🪴 Lesson: Free up space in your mind. Focus on what truly matters.

🔧 Refactoring Makes Everything Better

Refactoring is about cleaning up messy code—making it simpler, more efficient, and easier to maintain.

In Life:

Sometimes, we hold onto old habits, outdated beliefs, or toxic relationships. Just like messy code, they slow us down.

🪴 Lesson: Regularly review your life. Let go of things that no longer serve you and improve what’s important.

Final Thoughts: Code Your Life Wisely

Life and software engineering share the same rule: Structure leads to stability. Whether you’re writing code or shaping your future, small, intentional decisions lead to big results.

💬 Which lesson resonated with you the most? Share your thoughts in the comments! 🔥

From Shelf Help to Self Help: Mastering Productivity as Software Engineering

Hassan Shahzad Aheer — Sun, 14 Jul 2024 12:32:59 +0000

Introduction:

Consistency and discipline are the cornerstones of success in any field, including software development. My teacher, Sir Omar Khan, taught me a powerful lesson: if you miss one class, you lose 10% of the content; miss two, and you lose 40%; miss three, and you have to start over. This principle applies to all areas of life, particularly in maintaining productivity and achieving personal development.

The Journey Through Productivity Books:

I've read many books on productivity, self-development, and business, such as:

Atomic Habits
The 7 Habits of Highly Effective People
Thinking Fast and Slow
How to Make Time
The Compound Effect
The 4-Hour Workweek
$100 Startup

These books provided a wealth of knowledge, and I also explored various productivity tools like Notion, Capacities, Tick Tick and Toggle Track. Despite this, I often felt frustrated and unproductive.

The Struggle with Systems:

I diligently created systems based on these resources, but I frequently found myself demotivated when I failed to meet my goals. During a quarterly review, I noticed a pattern: missing one goal led to self-doubt and inaction, which spiraled into further missed goals. The systems designed to foster growth instead became sources of frustration. It wasn't the strategies or tools that were flawed; it was my approach to using them.

Simplifying the Approach:

To make real progress, I realized I needed to simplify my approach. I began asking myself two critical questions before starting any task: "Does this add value to my life?" and "Is it necessary?" If the answer was yes, I took action immediately, often within two minutes. This shift in mindset helped me cut through procrastination and maintain momentum.

Implementing the Pomodoro Technique:

One practical method that significantly boosted my productivity is the Pomodoro Technique. Setting a timer for 50 minutes of focused work followed by a 4-5 minute break helped maintain my concentration. After two or three cycles, I found myself in a flow state, where work felt effortless. The timer was just a push to get started; once immersed in my tasks, productivity naturally followed.

From Shelf Help to Self Help:

The key lesson I've learned is that reading books and using productivity tools are only beneficial if we apply what we learn. Without action, these resources remain "shelf help" rather than "self help." Consistency, discipline, and immediate application transform knowledge into progress.

Conclusion:

For software developers and productivity enthusiasts, the path to mastering productivity lies in simplifying your approach, taking immediate action, and maintaining consistency. Be your own mentor, take full responsibility for your growth, and drive your life with purpose. This approach not only helps you achieve your goals but also brings fulfillment and continuous improvement.

My Journey Through Laracasts: 30 Days to Learn Laravel

Hassan Shahzad Aheer — Sun, 07 Jul 2024 10:30:47 +0000

As a developer, continuous learning is crucial. Every few months, I focus on picking up new skills or brushing up on old ones. Recently, I completed the "30 Days to Learn Laravel" series by Jeffrey Way on Laracasts, and I wanted to share my experience. It was an incredibly rewarding journey, and I think every developer, especially beginners, would benefit from it.

Getting Started

Before diving into the series, I set a clear goal: to solidify my understanding of Laravel from the ground up. I chose this course because Jeffrey Way is known for breaking down complex concepts into easy-to-understand lessons. His approach was exactly what I needed.

What I Learned

Here's a rundown of some key takeaways from the series:

Tailwind Layouts: One of the most amazing parts of the course was learning about Tailwind CSS. Jeffrey showed how to break down complex layouts into simple, reusable components, which is essential for creating clean and maintainable code.
Authentication and Authorization: This was a tricky area for me, but the course covered it thoroughly. I learned about six different methods of authorization and built my own login and registration systems. Now, I feel confident implementing secure authentication in my projects.
Model Factories: I discovered how model factories make it easy to scaffold example data for testing and setting up a local environment. Laravel simplifies this process, making it a breeze.
Eloquent Relationships: Understanding eager loading and the N+1 problem was another highlight. These concepts are crucial for optimizing database queries and improving application performance.
Queues: Queues are a game-changer for handling tasks like sending emails without making users wait. Jeffrey explained the entire process in a way that was easy to grasp, and now I can implement queues to improve user experience.
Build Process: Getting my build process in order was another valuable lesson. I learned six different ways to create policies in Laravel, which will help me write cleaner and more efficient code.
Final Project: The series wrapped up with a final project that pulled together everything we had learned. It was great to see how all the pieces fit together in a real-world application.

Reflections and Recommendations

Revisiting Laravel through this structured series was a game-changer. The step-by-step progression from basic to advanced topics ensured I understood each concept thoroughly before moving on. Jeffrey Way’s teaching style, blending theory with practical examples, made the learning process enjoyable and effective.

For anyone looking to deepen their understanding of Laravel, I highly recommend this course. It’s an excellent resource for both beginners and those wanting to refresh their skills. You can check out the course here.

Conclusion

The "30 Days to Learn Laravel" series was a fantastic experience that reinforced the importance of consistent learning and tackling challenges head-on. As developers, we must always be willing to learn and apply new things, expanding our knowledge and improving our workflows. I’m excited to continue this journey and look forward to new challenges and opportunities.

Follow me on Twitter, LinkedIn, and Instagram for more insights and updates!

Building a Gym Management App with Laravel, Filament, Herd, and Blueprint

Hassan Shahzad Aheer — Sun, 09 Jun 2024 11:54:56 +0000

Hello friends,

I recently took on the challenge of building a gym management application. Using Laravel along with some fantastic tools like Filament, Herd, and Blueprint, I was able to create a robust app in no time. If you find documentation hard to follow or just want a more guided experience, this post is for you. I'll walk you through everything step-by-step. Let's dive in!

Setting Up Your Environment with Herd

First things first, let's get our development environment ready with Herd. Herd makes setting up Laravel projects a breeze, so you can get to coding faster.

Download and Install Herd: Head over to Herd's official site and follow the instructions to install it.
Create a New Laravel Project: Open your terminal and run:
```
laravel new project-name
```

Replace project-name with your desired project name.

Installing Filament

Filament is an awesome admin panel for Laravel applications. It gives you a beautiful, easy-to-use interface to manage your app's data.

Navigate to Your Project Directory:
```
cd project-name
```
Install Filament: Run the following command to install Filament:
```
composer require filament/filament:"^3.2" -W
```
Set Up Filament: After installation, set it up with:
```
php artisan filament:install --panels
```
Start the Development Server:
```
php artisan serve
```

Now, you can access the admin panel at http://localhost/admin.

Create an Admin User:
```
php artisan make:filament-user
```

Follow the prompts to set up a username and password.

Accelerating Development with Blueprint

Blueprint lets you define your application's models, controllers, and more using simple YAML files. This can save you a ton of time.

Install Blueprint:

composer require -W --dev laravel-shift/blueprint

Create a New Blueprint Draft:
```
php artisan blueprint:new
```

Here's an example draft.yaml file for our gym management application:

models:
  Member:
    id: id
    name: string:255
    email: string:255 unique
    phone: string:20
    address: string:255
    membership_start_date: date
    membership_end_date: nullable date
    membership_type_id: foreignId:constrained:cascade
    relationships:
      belongsTo: membership_type
      hasMany: payments, invoices

  MembershipType:
    id: id
    name: string:255
    description: text
    price: decimal:8,2
    duration_months: integer
    relationships:
      hasMany: members

  Payment:
    id: id
    member_id: foreignId:constrained:cascade
    amount: decimal:8,2
    payment_date: date
    payment_method: string:50
    relationships:
      belongsTo: member

  Invoice:
    id: id
    member_id: foreignId:constrained:cascade
    amount: decimal:8,2
    due_date: date
    paid: boolean
    relationships:
      belongsTo: member

Build Your Application:
```
php artisan blueprint:build
```

This command will generate the necessary models, migrations, and more based on your draft.yaml.

Run the Migrations:
```
php artisan migrate
```

Creating Filament Resources

Filament makes it super easy to generate resource management interfaces. Let's create resources for our models.

Generate Resources:

php artisan make:filament-resource MemberResource --generate
php artisan make:filament-resource PaymentResource --generate
php artisan make:filament-resource InvoiceResource --generate

Wrapping Up

And there you have it! Using Herd, Filament, and Blueprint, I was able to quickly build a functional gym management application. These tools made the process smooth and enjoyable, turning what could have been a tedious task into a fun project.

If you're looking to speed up your Laravel development and build powerful applications with ease.

Follow me on Twitter, LinkedIn, and Instagram for more insights and updates!

Easy User Sign-Up and Login in Laravel

Hassan Shahzad Aheer — Sun, 12 Nov 2023 11:45:57 +0000

Introduction:

Hey fellow developers! Today, we're diving into the learning about user authentication in Laravel. Don't worry if it sounds complicated – we'll break it down step by step using the Laravel/UI package, like putting together pieces of a puzzle.

Why Laravel/UI?

Laravel/UI is like a helper that makes setting up user sign-up and login a breeze. It gives us a push in the right direction.

Let's Get Started:

Follow these easy steps to add user authentication to your Laravel project.

Step 1: Install Laravel/UI

Open your terminal and type this this command:

composer require laravel/ui

This brings in Laravel/UI, our trusty sidekick for authentication adventures.

Step 2: Create Sign-Up and Login Pages

Now, tell Laravel/UI to create the pages where users can sign up and log in. It's like asking it to draw the doors to your app:

php artisan ui bootstrap --auth

Step 3: Set Up Your Database

Make sure your app knows where to store user info. Run this command:

php artisan migrate

This gets your database ready for action.

*Step 4: Open Your App *

Time to launch your app! Run this command to start the server:

php artisan serve

Now, visit app at http://localhost:8000.

Testing Time:

Try it out to make sure everything works:

Go to http://localhost:8000/register to create a new account.
Log in using the credentials you just made at http://localhost:8000/login.

Extra Things: 🎉

If you want to add more cool stuff, like giving certain users special powers, use these commands:

npm install
npm run dev

These commands make app even good layout and UI! And there you have it – user authentication in Laravel made easy with Laravel/UI.

Follow me on Twitter, LinkedIn, and Instagram for more insights and updates!

Big O Notation in Action: Analyzing the Complexity of Common Algorithms

Hassan Shahzad Aheer — Sun, 01 Oct 2023 13:48:52 +0000

Introduction

Welcome to the world of algorithms and efficiency! Have you ever wondered how the performance of a computer program changes as it processes more and more data? Well, wonder no more. In this guide, we're going to dive into the world of Big O notation, a powerful tool that helps us estimate how the time (or space) required for a program to run scales as the input data grows. By the end of this article, you'll have a solid grasp of Big O notation, and you won't need to search for more resources to understand it better.

What Big O Notation actually is?

Big O notation is like the magic glasses that let you see how fast or slow an algorithm is when dealing with different amounts of data. Think of it as a standardized expression of an algorithm's efficiency. It focuses on the worst-case scenario, giving us a pessimistic view of how our code will perform under the most challenging conditions.

Let's establish some ground rules to make sure we understand Big O notation completely:

Worst Case: Big O always looks at the worst-case scenario. It helps us prepare for the toughest situations, ensuring our code won't break under heavy loads.
Remove Constants: When analyzing complexity, we ignore constant factors. This means that if an algorithm takes 5 seconds to process 10 elements and 50 seconds to process 100 elements, we only care about the growth rate, not the absolute time.
Different Terms for Inputs: We express different complexities with notations like O(1), O(n), and O(n^2), which tell us how algorithms behave as input sizes change.
Drop Non-Dominant Terms: We focus on the most significant term and disregard lower-order terms. This simplifies our analysis without losing essential insights.

Understanding Complexity Types

Now, let's dig into the different complexity types:

Constant Time (O(1)): Imagine a function that accesses an element in an array. No matter how big the array is, it always takes the same amount of time. It's like reaching for a book on your bookshelf, no matter how many books you have; it's a constant operation.

public class ConstantTimeExample {
    public static void printNumber(int number) {
        System.out.println(number);
    }
}

Linear Time (O(n)): This complexity grows linearly with the input size. It's like checking each item in a shopping list one by one. The more items you have, the longer it takes.

public class LinearTimeExample {
    public static void printNumbers(int[] numbers) {
        for (int number : numbers) {
            System.out.println(number);
        }
    }
}

Quadratic Time (O(n^2)): Quadratic growth means that if you double the input size, the time needed quadruples. It's like comparing every person in a room with every other person, resulting in many comparisons.

public class QuadraticTimeExample {
    public static void printPairs(int[] numbers) {
        for (int i = 0; i < numbers.length; i++) {
            for (int j = i + 1; j < numbers.length; j++) {
                System.out.println(numbers[i] + " - " + numbers[j]);
            }
        }
    }
}

Logarithmic Time (O(log n)): Sublinear growth is the sweet spot. It's like playing a game of "guess the number" where you halve the possibilities with each guess. Very efficient!

Putting It All Together

In the world of programming, understanding Big O notation is like having a superpower. It helps you write efficient code, choose the right tools, and optimize your programs for the best performance.

Remember, Big O notation isn't just a theoretical concept; it's a practical tool that every programmer should have in their toolkit. So, next time you're analyzing code or designing an algorithm, put on your Big O glasses, and you'll see your code's performance in a whole new light.

Conclusion

You've just completed your Big O notation crash course, giving you the tools to analyse algorithm efficiency and make informed coding decisions. With practice, you'll become an algorithm efficiency expert. So, dive into coding, apply your knowledge, and remember, simplicity often hides behind complexity.

Follow me on Twitter, LinkedIn, and Instagram for more insights and updates!

Simplified Guide to State in react for Beginners

Hassan Shahzad Aheer — Sun, 17 Sep 2023 07:14:23 +0000

Introduction:

React, a popular JavaScript library for building user interfaces, introduces the concept of "state" to create dynamic and responsive components. In this concise guide, we'll explore the fundamental aspects of state in React to help you grasp the concept in just 30 seconds or less.

1. What is State in React?

Concept: State in React is a built-in feature that allows components to manage and store their own data. It represents the current state of a component's dynamic information.

Use Case: It's used for keeping track of things that can change during a component's lifecycle, such as user input, toggles, and counters.

2. Why Do We Use State?

Purpose: State enables React components to be dynamic and responsive to user interactions. It allows for real-time updates and re-rendering when data changes, providing a smooth user experience.

Advantages: React state simplifies UI updates, improves user interaction, and helps in building complex, interactive web applications.

3. How Does State Work?

Mechanism: React components can declare and manage state using the useState hook (in functional components) or the this.state object (in class components).

Updating State: To change the state, you use state-modifying functions (e.g., setState in class components or the updater function in useState), providing the new state value.

4. State vs. Props

State: Used to manage and store data that belongs to a component itself and can change.

Props: Used for passing data from parent to child components and should be considered immutable.

5. Modifying State to Make Changes

Process: To update state, use the state-modifying function provided by React (e.g., setState or the updater function from useState). Pass in the new state value or a function that calculates it based on the previous state.

Code Examples:

Using State in a Functional Component

import React, { useState } from 'react';

function Counter() {
   const [count, setCount] = useState(0);

   const increment = () => {
      setCount(count + 1);
   };

   return (
      <div>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
      </div>
   );
}

Using State in a Class Component

import React, { Component } from 'react';

class Counter extends Component {
   constructor() {
      super();
      this.state = {
         count: 0,
      };
   }

   increment = () => {
      this.setState({ count: this.state.count + 1 });
   };

   render() {
      return (
         <div>
            <p>Count: {this.state.count}</p>
            <button onClick={this.increment}>Increment</button>
         </div>
      );
   }
}

These examples demonstrate the practical use of React state to manage and update data within components.

Summary:

State in React allows components to manage dynamic data.
Its purpose is to make components interactive and responsive.
The mechanism includes declaring state and using state-modifying functions.
State vs. Props distinguishes between component-internal data (state) and data passed from parent components (props).
Modifying State involves using state-modifying functions to update the state based on its previous value.

With this quick guide, you're well on your way to understanding the essential concept of state in React.

Follow me on Twitter, LinkedIn, and Instagram for more web development insights and updates!

Dynamic UI Rendering in React: Understanding of array.map and JSX Mapping

Hassan Shahzad Aheer — Sun, 03 Sep 2023 08:06:31 +0000

Introduction

Before we dive into understanding how React maps data into JSX elements, let's first recap some fundamental concepts about array.map.

Using array.map for Transformations

Think of array.map as a handy tool that can do different jobs, like changing things in a list. Let's look at some examples to make it clearer.

1. Squaring Numbers Example

const nums = [1, 2, 3, 4, 5];
const squared = nums.map(num => num * num);
// Result: [1, 4, 9, 16, 25]

Visual Representation:

Original Array: [1, 2, 3, 4, 5]

Step 1: 1   Step 2: 4   Step 3: 9   Step 4: 16   Step 5: 25
|            |           |            |             |
v            v           v            v             v
Result:   [1]          [4]         [9]         [16]         [25]

2. Capitalizing Names Example

const names = ["aheer", "ahmed", "saadat"];
const capitalized = names.map(name => name[0].toUpperCase() + name.slice(1));
// Result: ["Aheer", "Ahmed", "Saadat"]

Visual Representation:

Visual understanding of the line return name[0].toUpperCase() + name.slice(1); applied to the name "aheer":

Step 1:         Step 2:        Step 3:            Result:
name[0]          .toUpperCase()   name.slice(1)     "Aheer"
  |                 |                |
  v                 v                v
 "a"               "A"             "heer"

This is how each step transforms the name "aheer" into "Aheer" by capitalizing the first letter and keeping the rest of the name intact.

3. contactsData JSON File (contactsData.js)

We've also introduced a sample JSON file to represent contact data, which can be utilized in your React application to maintain a record of data.

export default [
  {
    name: "Aheer",
    email: "aheer@example.com"
  },
  {
    name: "Ahmed",
    email: "ahmed@google.com"
  },
  {
    name: "Saadat",
    email: "saadat@example.com"
  }
];

Now that we've revisited array.map, let's get into the essential concept of React data mapping.

1. React Mapping Data into JSX Elements

In React, we use a powerful tool called array.map to transform data into JSX elements. This means we go through each piece of data in an array and convert it into something that can be displayed in our user interface. This is super helpful because it allows us to create dynamic user interfaces that adapt to our data.

2. Example: Mapping contactsData into JSX Elements

import contactsData from "./contactsData";

export default function App() {
    const contactElements = contactsData.map(contact => {
        return <Contact name={contact.name} email={contact.email} />
    });
    return (
        <div>
            {contactElements}
        </div>
    );
}

In this example, contactsData represents an array of objects containing contact information. React employs map to iterate through contactsData and generate a <Contact /> component for each contact.

3. Visual Representation

Let's visualize how React maps contactsData into JSX elements:

Original Data (contactsData):

[
  { name: "Aheer", email: "aheer@example.com" },
  { name: "Ahmed", email: "ahmed@google.com" },
  { name: "Saadat", email: "saadat@example.com" }
]

Visual Breakdown:

Step 1:

Contact Data: { name: "Aheer", email: "aheer@example.com" }

Result: <Contact name="Aheer" email="aheer@example.com" />

Step 2:

Contact Data: { name: "Ahmed", email: "ahmed@google.com" }

Result: <Contact name="Ahmed" email="ahmed@google.com" />

Step 3:

Contact Data: { name: "Saadat", email: "saadat@example.com" }

Result: <Contact name="Saadat" email="saadat@example.com" />

Final Result:

[
  <Contact name="Aheer" email="aheer@example.com" />,
  <Contact name="Ahmed" email="ahmed@google.com" />,
  <Contact name="Saadat" email="saadat@example.com" />
]

React goes through contactsData, converting each contact object into a corresponding <Contact /> component with provided props. This yields an array of JSX elements that can be rendered in the component.

Conclusion

In our exploration of array.map and how it works in React, we've learned some important things. Here's a quick summary:

Key concepts to remember:

`array.map` in JavaScript:

array.map is like a versatile tool that helps us change arrays. It lets us make new arrays with our data changed the way we want.
We can use it to quickly do something to each piece of data in an array and put the results together.
Visual diagrams can make it easier to see how each step changes the data.

React Data Mapping:

What We Do in React:

In React, we have a neat tool called array.map. This tool helps us turn data from a list (like an array) into special things we can show on our website. We call these special things JSX elements.

How It Works:

To make this magic happen, we go through each item in our list one by one. Imagine looking at each item and deciding what special thing (JSX element) it should become.

Why It's Important:

This process is super important because it helps us create web pages that can show lots of items in a smart and quick way. Think about lists of things like contact names or products—this tool makes it easy to display them nicely on our website.

Recap Questions:

Now, let's think about some questions to make sure we've got it:

For `array.map`:

What is array.map in JavaScript, and how does it work?
- array.map is like a helper that changes our lists (arrays). It helps us make new lists with our data changed in a certain way.
How can you use array.map in React to dynamically generate JSX elements from an array of data?
- We use array.map in React to look at each item in our list and turn it into a special thing called JSX element.
Why is the combination of array.map and React crucial for rendering dynamic content and lists of data in applications?
- This combination is super important because it lets us quickly make web pages that can show lots of data items without doing the same thing over and over.

For React Mapping Data into JSX Elements:

Explain the process of mapping data into JSX elements in React using array.map.
- We use array.map in React to take data from our list and create special things (JSX elements) for each piece of data.
Provide an example of how React maps data into JSX elements, and describe its significance.
- Imagine we have a list of contact names. We use array.map to create special elements for each name, making it easy to display them on our website.
How does React transform data from an array of objects (e.g., contactsData) into an array of JSX elements?
- React uses array.map to look at each object in our list and turns it into a JSX element with all the data we need. This way, we can show our data on the web.

Follow me on Twitter, LinkedIn, and Instagram for more web development insights and updates!

Deep dive into understanding Props in React

Hassan Shahzad Aheer — Sat, 02 Sep 2023 07:09:07 +0000

1. What are Props?

Props (short for properties) are a fundamental concept in React.
Think of them as attributes you pass to a component, similar to HTML attributes in tags.
Props allow you to send data from a parent component to a child component.
They are read-only and help make your components dynamic and reusable.

2. Creating Props:

To create props, you include attributes in your component like this:
```
 <Contact name="Ali" />
```

3. Accessing Props:

In your child component, you access props using the props object:

 export default function Contact(props) {
   return (
     <h1>{props.name}</h1>
   );
 }

4. Destructuring Props:

Destructuring allows you to extract props more concisely.

Example:

 export default function Contact({ name }) {
   return (
     <h1>{name}</h1>
   );
 }

This is especially useful when you have multiple props.

5. Why Use Destructuring?

Destructuring props makes your code cleaner and more readable.
It reduces repetition by directly extracting the properties you need.
It also simplifies access to nested props.

6. Example:

Let's create a simple component that receives and displays user information using props and destructuring:

   // ParentComponent.js
   import React from 'react';
   import UserProfile from './UserProfile';

   export default function ParentComponent() {
     const user = {
       name: 'Ali',
       age: 30,
       city: 'New York',
     };

     return (
       <UserProfile user={user} />
     );
   }

   // UserProfile.js
   import React from 'react';

   export default function UserProfile({ user }) {
     return (
       <div>
         <h1>{user.name}</h1>
         <p>Age: {user.age}</p>
         <p>City: {user.city}</p>
       </div>
     );
   }

7. Conclusion:

In React, props are like attributes you pass from parent to child components.
Destructuring props simplifies access and enhances code readability.
Understanding props is essential for building dynamic and reusable React applications.

Day 3: Crafting Components, Styling, and Local Development

Hassan Shahzad Aheer — Sat, 26 Aug 2023 16:00:00 +0000

Greetings! Welcome back to Day 3 of our React journey. Today, we're delving into the art of crafting components, mastering styling, and harnessing the power of local development. Let's keep the momentum going as we explore these pivotal aspects of React application building.

Note 1: Starting to Make Components

Find out how to make a React app by creating custom components. These are like the building blocks that help you create things that people can interact with. Just like puzzle pieces, these components come together to make your app work.

Essential Insights:

Custom Components: Your app's unique pieces.
Reuse and Modularity: Assemble UI like building blocks.
User Interaction: Dynamic and engaging user experiences.
Illustration: Crafting a custom Button component.

** Code Example: Building a Custom Button**

import React from "react";

function Button(props) {
  return <button className="custom-button">{props.label}</button>;
}

export default Button;

Note 2:Building Component Connections

Picture your app's UI as a family, with parent components leading and child components following their lead. The secret sauce here is the ability to pass data and instructions between these components, forming an intricate web of functionality.

Invaluable Insights:

Component Hierarchy: Organizing components like family members.
Data Flow: Sharing information between generations.
User Interaction: Collaboration for enhanced user experiences.
Illustration: The dynamic interplay of Parent and Child components.

Code Example: Setting Up Parent and Child Components

import React from "react";
import Parent from "./ParentComponent";

function App() {
  return <Parent />;
}

export default App;

Note 3:Improving App Appearance with CSS Classes

Visual appeal is pivotal, and this is where styling steps in. Say goodbye to inline styles – we're embracing the elegance of CSS classes to adorn our components. Think of it as dressing up your app for a dazzling performance.

Key Insights:

Styling Strategies: Choosing CSS classes over inline styles.
CSS Classes: Enhancing aesthetics with class names.
Separation of Concerns: Keeping style and logic distinct.
Illustration: Elevating a custom Button component with CSS.

Code Example: Styling Components with CSS Classes

import React from "react";
import Button from "./ButtonComponent";
import "./styles.css";

function App() {
  return (
    <div>
      <Button label="React Style!" />
    </div>
  );
}

export default App;

Note 4: Designing Components for Smooth Workflow

Think of your codebase as a well-organized workspace. Similar to how you'd categorize tools, components need proper organization. We're exploring the benefits of clean project structure and smart component organization.

Essential Insights:

Optimized Structure: Crafting a scalable and maintainable codebase.
Folder Arrangement: Grouping related components for clarity.
Import Clarity: Simplifying imports with structured folders.
Illustration: Visualizing a well-organized component arrangement.

Example of Smart Component Organization:

src/
|-- components/
|   |-- Header.js
|   |-- Footer.js
|   |-- MainContent.js
|   |-- Button.js
|-- App.js
|-- index.js

Note 5: Speeding Up Development with Vite

Say hello to Vite – a powerful tool that speeds up development by providing lightning-fast reloads and bundling. With Vite, setting up a local React environment is easier than ever. Its quick bundling with ESBuild leads to smoother development and blazing-fast reloads.

Key Insights:

Local Development: Setting up React on your local machine.
Introducing Vite: Turbocharge development with Vite's efficiency.
Speedy Iterations: Swift reloads and instant updates.
ESBuild Integration: Bundling for optimized performance.
Illustration: A guide to kick-starting React development with Vite.

Steps to Get Started:

Install Vite: npm install -g create-vite
Create a Vite project: npm create vite@latest you will see the following on your terminal

Need to install the following packages:

create-vite@4.4.1 (mailto:create-vite@4.4.1)

Ok to proceed? (y) y

✔ Project name: … vite-project

✔ Select a framework: › React

✔ Select a variant: › JavaScript

Scaffolding project in /Users/macbookpro/Documents/learn-react/react-try/vite-project...

Done. Now run:

cd vite-project

npm install

npm run dev

Navigate to the project folder: vite-project
Start the development server: npm run dev
Open your browser and visit: http://localhost:3000

Note 6: Recap of Day 3 - Building React Apps

Congratulations on completing Day 3! Let's summarize what we've achieved so far.

Key Takeaways:

Custom Components: The essence of dynamic React apps.
Parent-Child Relationship: Components collaborate like a family.
Styling and Organization: Making apps visually appealing and organized.
Local Development with Vite: Speedy local setup and efficient bundling. With these skills in your toolkit, you're ready to craft more engaging and powerful React applications. Stay tuned for more insights as we journey deeper into React!

Day 2: React Rendering - From Confusion to Clarity

Hassan Shahzad Aheer — Fri, 25 Aug 2023 06:17:01 +0000

Welcome back to the second day of our journey into the world of React! Today, we're debunking myths and unveiling the true power of rendering JSX elements. Let's dive in and demystify the magic!

Misconception: Using `.append()` for JSX

Our second day started with an experiment. I thought, "Hey, why not just use .append() to slot JSX into the DOM?" But guess what? The outcome was anything but expected. Instead of a sleek UI, my browser displayed the bizarre [object Object][object Object]. A head-scratcher indeed!

Clarification: The Right Way with React

Soon, the fog lifted. React has its own rendering dance, and it's not a .append() waltz. Enter ReactDOM.render(), the key to the kingdom. This method taught me a vital lesson: let React work its magic.

Taking on the Code

Let's embark on a code escapade to witness this transformation.

Code Example 1: Experimenting with .append()

import React from 'react';

function App() {
  const jsxElement = <div>AOA, JSX!</div>;

  const rootDiv = document.getElementById('root');
  rootDiv.append(jsxElement);

  return null;
}

export default App;

In this trial, I bet on rootDiv.append(jsxElement) as the silver bullet. But no, the browser had other ideas and handed me the perplexing [object Object][object Object].

Code Example 2: The Right Way - ReactDOM.render()

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const jsxElement = <div>AOA, JSX!</div>;

  ReactDOM.render(jsxElement, document.getElementById('root'));

  return null;
}

export default App;

As I surrendered to the wisdom of ReactDOM.render(), the browser applauded. The JSX element materialized, and the words "AOA, JSX!" greeted me warmly.

Final Code Example: The Revelation

import React from 'react';
import ReactDOM from 'react-dom';

// Define the JSX element
const jsxElement = <div>AOA, JSX!</div>;

// Render the JSX using ReactDOM.render()
ReactDOM.render(jsxElement, document.getElementById('root'));

// Note: Here, we return null. ReactDOM.render() does the heavy lifting.
export default function App() {
  return null;
}

As we conclude our journey today, remember that rendering isn't just about visuals; it's about creating experiences. Join me tomorrow as we journey deeper into the heart of React!

Getting Started with React: Day 1 Exploration of Core Concepts

Hassan Shahzad Aheer — Thu, 24 Aug 2023 07:40:35 +0000

Today, I'm taking my first exciting steps into the vast world of React. Picture me with a big grin, because I'm about to spill the beans on my fantastic first day. No need for complicated words – just imagine you're chatting with a friend. Armed with the official React guide, I've unraveled some super important stuff that I can't wait to share with you. Ready? Let's dive right in!

Note 1: Introduction to React Concepts

In just 30 seconds: React is a JavaScript library that empowers us to build incredible user interfaces. I've started by learning key concepts covered in the documentation:

Creating and nesting components
Adding markup and styles
Displaying data
Rendering conditions and lists
Responding to events and updating the screen
Sharing data between components

Note 2: Crafting Components

In a nutshell: Components are like building blocks in React. They're chunks of code that we can reuse. I created my first component, a button, and even nested it inside another component!

function MyButton() {
  return (
    <button>AOA, I'm a button</button>
  );
}
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my react world</h1>
      <MyButton />
    </div>
  );
}

Note 3: JSX Magic

Simplifying UI: JSX is like a magical bridge between JavaScript and HTML. It makes writing UI elements feel natural. I used curly braces to mix JavaScript into my UI.

function Greeting() {
  const name = "Mr. Aheer";
  return <p>Hello, {name}!</p>;
}

Note 4: Styling with Elegance

Making things pretty: Adding styles was surprisingly smooth. I used className to add CSS classes. Keeping style and logic separate is a win!

function StyledBox() {
  return <div className="styled">Styled Data!</div>;
}

Note 5: Displaying Data

Showing off data: I learned to display data dynamically. Just wrap variables with curly braces, and voila!

function UserProfile() {
  const username = "Mr, Aheer";
  return <p>Welcome, {username}!</p>;
}

Note 6: Conditionally Rendering

Custom experiences: React lets me show different things based on conditions. It's like giving a tailored experience to users!

function Greeting() {
  const isLoggedIn = true;
  return isLoggedIn ? <WelcomeMsg /> : <SignInForm />;
}

Note 7: Rendering Lists Gracefully

Listing with ease: Creating dynamic lists is a breeze with the map() function. Giving each item a unique key is essential for smooth updates.

function ProductList() {
  const products = ["Shoes", "Hats", "Shirts"];
  return (
    <ul>
      {products.map((product, index) => (
        <li key={index}>{product}</li>
      ))}
    </ul>
  );
}

Note 8: Interacting with Users

Talking back: I made my UI interactive by adding event handlers. Now my components can respond when users click!

function ClickCounter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Note 9: Managing State with Hooks

State mastery: The useState hook lets me manage changing information in my components. It's like giving them memory!

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Note 10: Sharing Data Between Components

Component teamwork: I shared data between components using props. It's like passing notes between friends!

function ParentComponent() {
  const message = "Hey there, fellow coder!";
  return <ChildComponent msg={message} />;
}

Conclusion

Day one is a wrap! Exploring these fundamental concepts has ignited my passion for React. As I share my insights, I hope to light the way for others starting this journey. Let's learn, grow, and code together!

Stay tuned for more updates from my React learning journey.

DEV Community: Hassan Shahzad Aheer

🐞Debugging Life: The Software Engineering Lessons You Can’t Ignore

🛠️ The Blueprint Matters – Planning Before Execution

In Life:

⚠️ Quick Fixes Create Bigger Problems Later

In Life:

🤯 Overengineering – The Trap of Perfectionism

In Life:

❓ Stay Focused – Avoiding Distractions

In Life:

🐞 Debugging is Essential—But So is Learning from Mistakes

In Life:

🔄 Distractions Are Like Memory Leaks

In Life:

🔧 Refactoring Makes Everything Better

In Life:

Final Thoughts: Code Your Life Wisely

From Shelf Help to Self Help: Mastering Productivity as Software Engineering

My Journey Through Laracasts: 30 Days to Learn Laravel

Getting Started

What I Learned

Reflections and Recommendations

Conclusion

Building a Gym Management App with Laravel, Filament, Herd, and Blueprint

Setting Up Your Environment with Herd

Installing Filament

Accelerating Development with Blueprint

Creating Filament Resources

Wrapping Up

Easy User Sign-Up and Login in Laravel

Big O Notation in Action: Analyzing the Complexity of Common Algorithms

Introduction

What Big O Notation actually is?

Understanding Complexity Types

Putting It All Together

Conclusion

Simplified Guide to State in react for Beginners

Introduction:

1. What is State in React?

2. Why Do We Use State?

3. How Does State Work?

4. State vs. Props

5. Modifying State to Make Changes

Code Examples:

Using State in a Functional Component

Using State in a Class Component

Summary:

Dynamic UI Rendering in React: Understanding of array.map and JSX Mapping

Conclusion

Key concepts to remember:

array.map in JavaScript:

React Data Mapping:

What We Do in React:

How It Works:

Why It's Important:

Recap Questions:

For array.map:

For React Mapping Data into JSX Elements:

Deep dive into understanding Props in React

Day 3: Crafting Components, Styling, and Local Development

Note 1: Starting to Make Components

Note 2:Building Component Connections

Note 3:Improving App Appearance with CSS Classes

Note 4: Designing Components for Smooth Workflow

Note 5: Speeding Up Development with Vite

Note 6: Recap of Day 3 - Building React Apps

Day 2: React Rendering - From Confusion to Clarity

Misconception: Using .append() for JSX

Clarification: The Right Way with React

Taking on the Code

Getting Started with React: Day 1 Exploration of Core Concepts

Note 1: Introduction to React Concepts

Note 2: Crafting Components

Note 3: JSX Magic

Note 4: Styling with Elegance

Note 5: Displaying Data

Note 6: Conditionally Rendering

Note 7: Rendering Lists Gracefully

Note 8: Interacting with Users

Note 9: Managing State with Hooks

`array.map` in JavaScript:

For `array.map`:

Misconception: Using `.append()` for JSX