DEV Community: Ayesha Sahar

AI-Powered Web Dev: Build a Full Stack App with Just a Few Prompts Using Supabase & Lovable

Ayesha Sahar — Tue, 17 Dec 2024 07:34:02 +0000

After a bit of a break (a long one actually😅), I'm back with a super exciting topic! 👀

Today, we’re gonna explore how to effortlessly build a fully functional web application using Lovable and Supabase. Most of you are probably already familiar with Supabase, right? It’s the open-source alternative to Firebase that offers all the tools you need for building backends.

Now, Lovable might be something new to you. It’s an AI-powered full stack engineer that enables anyone, even with no technical background, to create beautiful websites and web apps using simple conversational prompts. Lovable writes the front-end code for you using modern technologies like React, Tailwind, and seamlessly connects with OpenAPI backends. Plus, you can easily modify the generated code yourself.

Sounds intriguing, doesn’t it? Well, let me walk you through how to build a fully functioning app with just a few prompts using these two amazing technologies.

Let’s get started! 😉

Setting up Supabase

We'll start by opening Supabase and creating an account:

https://supabase.com/

If you already have an account, simply sign in to go to your dashboard. Once your dashboard is open, click on "New Project" encircled in red:

Setup your database password, make sure to save it somewhere safe since you might need it later:

You should see this screen after the project setup has been completed:

Setting up Lovable

We'll start by opening Lovable and creating an account:

https://lovable.dev/

If you already have an account, simply sign in. After signing in, you’ll see this screen:

Making Login and SignUp Pages

I passed a prompt with an image as shown below:

The prompt:

“Create this signup page for me, with the same design as the image of the card, the card should be centered on a black background. Make the login page the same as this, except the input fields should only be for email and password.”

The image:

Then you should see something like this for the signup page:

It’s not the same but works well enough. We can also make changes to this created page by passing more prompts. For now, I’ll leave it like this.

This is the login page:

If you want to see the code for these pages, check here:

Adding Authentication by integrating Supabase

To do so, first connect your Supabase account with Lovable by selecting this option and following the given steps:

Now, you guys can simply connect to the project you created before:

Now, pass on another prompt:

“Add authentication”

Review the SQL and apply changes:

Verifying Authentication Functionality

To check whether our auth works or not, let’s disable email confirmation. To do so, open your project in Supabase and go to Authentication.

Then go to providers and check Email in Auth Providers list. Disable “Confirm Email” just as I have done so.

Now, let’s go to our app to create an account and login!

Making the ChatBot Page

Now, let’s make the chatbot home page!

Use this prompt to make it:

"Create a chatbot page for me, which we should be redirected to after login. Keep the same theme as the login and signup pages. Create a navbar with a black background and text color matching the purple shade of the headings on the login and signup pages. In the center, display 'Chatbot.' Place a signup button on the right side of the navbar.

On the main page, display an output field with a black background, rounded corners, and white text saying 'Output shows here.' Below it, include an input field labeled 'Input here' with a rounded arrow button on the right.

Both fields should occupy 90% of the page width, with space between them. The entire page should fit within the height of the screen.”

This was the output I got:

As demonstrated earlier, we can use shorter prompts or even more detailed ones.

Since the button in navbar shows “Sign up”, let’s make a prompt to change it.

“The button in the navbar should be labeled 'Sign Out' and allow users to log out.”

Now, it will allow us to Sign Out!

Making the Notes Page

Now, let’s make the chatbot home page!

Use this prompt to make it:

"On the navbar, on the left side of the homepage (chatbot page), add a button labeled "Add Notes."

Clicking this button should redirect to a new page. On this new page:

The navbar should display the user's name in the center.

A "Sign Out" button should be on the left side of the navbar.

A "Chat" button should be on the right side, allowing the user to navigate back to the chatbot page.

In the center of this new page, add a prominent "Add Notes" button.

This button should allow the user to create a new note. Each note should automatically include the date and time it was added.

Users should also have the ability to edit or delete their notes.”

As you can see below, first the SQL stuff was applied and a new table was created in the db:

Add Notes button was also added to the homepage:

The new page was also created. User name shows in the middle and we can also go back to homepage via the “chat” button:

Even though the database setup is complete and the "Add Notes" button is implemented, it doesn't appear to be functioning properly. Let’s pass another prompt to fix this:

“The "Add Notes" button on the Notes page should allow users to seamlessly manage their notes. Users should be able to create a new note, with the date and time of creation automatically recorded. Additionally, they should have the ability to edit existing notes to update their content and delete notes to remove them when no longer needed.”

Now, our functionality seems to be working and we can add, edit and delete any note:

Refining your Code

To make more specific modifications, consider connecting your GitHub account and publishing the code there. This will allow you to seamlessly work with your preferred code editor or IDE, enabling deeper customization and integration of additional functionalities that best suit your needs

To do so, select the following option and connect to GitHub:

After connecting to GitHub, select “Create repository”:

After that, you will see the following options:

Now, you can either view or clone your repo from GitHub and even edit it in VS Code!

Even now, if you want to edit this project, if you do so via prompting, the updates will directly be pushed to the GitHub repository created.

Or you can use your own cloned repository and the changes will be reflected in Lovable. To edit this into your own IDE, you need to have Node.js and npm installed.

Step 1: Clone the repository using the project's Git URL.

git clone <YOUR_GIT_URL>

Step 2: Navigate to the project directory.

cd <YOUR_PROJECT_NAME>

Step 3: Install the necessary dependencies.

npm i

Step 4: Start the development server with auto-reloading and an instant preview.

npm run dev

Following these steps will allow you to easily set up and customize the project in your preferred development environment.

Conclusion

Don’t know about you guys, but for me, this experience has truly been amazing. I never imagined we could build a sleek and functional full-stack app in just a matter of minutes, all with just a few prompts. We had to do some refining, but that’s okay. The UI part, sure, that felt easy with just a few prompts, and that’s something my brain can totally wrap around.

But adding actual functionality, like authentication or the whole “notes app” setup? That’s what really blew my mind! As you saw, adding authentication was as simple as typing "Add authentication"—and voilà, it’s done! It was so effortless that it felt like magic. The integration with Supabase through Lovable made everything so seamless. No complex configurations, no tedious debugging—just a prompt, and everything clicked together smoothly. Even adding the notes functionality was remarkably straightforward: a couple of simple instructions, and we had a fully working feature, with no headaches or manual tweaks.

The best part? We didn’t need to worry about the usual hassle of coding (though it’s the fun part) and endless debugging. With just a couple of steps, we were able to effortlessly add features that usually take hours to set up. It's like the code practically wrote itself!

Let's connect!

✨ Twitter

✨ Github

✨ LinkedIn

The Power of Nothing: Crafting Elegant UI Designs

Ayesha Sahar — Sun, 12 Nov 2023 08:49:48 +0000

Introduction

In the ever-evolving world of User Interface (UI) design, there's a silent superhero that often goes unnoticed but wields immense power—the mighty white space. White space, often referred to as negative space, is the breathing room around and between elements in a design. Despite its seemingly vacant nature, white space is far from empty—it's the secret sauce that transforms chaos into elegance and confusion into clarity.

You wanna know how? Keep on reading😉

The Dance of Design and White Space

Imagine a crowded party where everyone is shouting simultaneously—utter chaos, right? Now, picture the same scenario with strategically placed pockets of quiet spaces. Suddenly, the chaos turns into a symphony of conversations, each one discernible and enjoyable. This analogy beautifully captures the essence of white space in UI design!

Less is More, or is it?👀

The phrase "less is more" is not just a cliché; it's a design mantra. White space doesn't just fill gaps; it's a minimalist maestro that orchestrates visual harmony. By embracing simplicity, designers create an environment where users can navigate effortlessly, unburdened by unnecessary distractions.

Breathing Room for the Eyes

Have you ever tried reading a block of text with no paragraph breaks or spacing? It's a visually suffocating experience. White space acts as the oxygen for your eyes, allowing them to move gracefully from one element to another. It provides the necessary pauses in the design narrative, making content more digestible.

The Zen of User Experience

Think of white space as the Zen master of user experience. It encourages mindfulness and focus by eliminating the noise. A well-designed UI with ample white space tells users, "Relax, you're in good hands." It guides their attention, helping them effortlessly absorb information without feeling overwhelmed.

White Space is Not Wasted Space

Some may argue that white space is a luxury, but in reality, it's a strategic investment. A cluttered design screams desperation, while a thoughtfully spaced layout exudes confidence and sophistication. Users appreciate the ease of navigation and the unspoken invitation to explore.

Breaking the Monotony

White space isn't limited to the color white; it can be any color or even a background image. The key is to break the monotony and create a dynamic visual rhythm. Cleverly interspersed white space adds layers to a design, leading the user on a delightful journey.

Mobile Responsive Magic:

In the era of mobile-first design, white space becomes even more critical. The limited-screen real estate demands judicious use of space to avoid clutter. Mobile apps that embrace white space deliver a seamless user experience, making navigation a breeze, even on smaller screens.

The Art of the Pause

In music, the pause is as important as the notes played. Similarly, in UI design, the absence of elements is as crucial as their presence. White space allows for strategic pauses, emphasizing content, guiding actions, and creating a rhythm that resonates with users.

Conclusion

White space, the unsung hero of UI design, silently shapes our digital experiences. It's the space that lets design elements breathe, users navigate effortlessly, and aesthetics shine. Embracing white space isn't just a design choice; it's a commitment to crafting experiences that are not just seen but felt.

So, the next time you're tempted to fill every inch of your design canvas, remember: the magic often happens in the spaces in between😉

Let's connect!

✨ Twitter

✨ Github

✨ LinkedIn

Understanding Prototypal Inheritance in JavaScript: Enhancing Code Efficiency

Ayesha Sahar — Tue, 11 Jul 2023 12:21:44 +0000

Introduction

In the world of JavaScript, understanding the concept of prototypal inheritance is crucial for building efficient and scalable code. Prototypal inheritance provides a powerful mechanism for code reuse and extensibility, allowing developers to create objects that inherit properties and methods from other objects. By grasping the intricacies of prototypal inheritance, developers can unlock the full potential of JavaScript and write cleaner, more efficient code.

Let's delve deep into the world of prototypal inheritance, exploring its fundamentals, benefits, and practical applications!

Whether you're a seasoned developer looking to reinforce your understanding or a beginner eager to dive into the world of JavaScript, you will get the knowledge and insights to enhance your code efficiency ;)

Understanding Inheritance in JavaScript

Inheritance is a fundamental concept in JavaScript that allows objects to inherit properties and methods from other objects. It enables code reuse and promotes a modular and extensible code structure. In JavaScript, there are two main types of inheritance: classical inheritance and prototypal inheritance.

Let's explore each type and understand how they differ!

Classical vs. Prototypal Inheritance

Classical Inheritance:

Classical inheritance is a concept commonly found in object-oriented programming languages like Java or C++. In classical inheritance, objects are created based on predefined classes, and the inheritance hierarchy is defined explicitly through class definitions. Objects inherit properties and methods from their parent classes, forming a hierarchical structure. To create a new object, you use the "class" keyword to define a blueprint and then instantiate objects using the "new" keyword.

Prototypal Inheritance:

Prototypal inheritance is a unique feature of JavaScript. Instead of using classes, JavaScript utilizes prototype-based inheritance. In prototypal inheritance, objects are created from existing objects, and they inherit properties and methods directly from their prototypes. Every object in JavaScript has a prototype, which serves as a blueprint for inheritance. When a property or method is accessed on an object, JavaScript checks the object itself, and if not found, it looks up the prototype chain until it finds the desired property or method.

The Prototype Chain

The prototype chain is a crucial concept in prototypal inheritance. It represents the linkage between objects and their prototypes, forming a chain-like structure. When a property or method is accessed on an object, JavaScript first checks if the object itself contains that property or method. If not found, it continues the search in the object's prototype. If still not found, it proceeds further up the prototype chain until the property or method is found or until the end of the chain (where the prototype is null).

Example:

Suppose we have a "Vehicle" object with properties and methods related to vehicles in general. We can create a "Car" object that inherits from the "Vehicle" object and adds specific properties and methods for cars.

// Parent Object: Vehicle
const Vehicle = {
  type: "generic",
  honk: function () {
    console.log("Honk! Honk!");
  },
};

// Child Object: Car
const Car = Object.create(Vehicle);
Car.type = "car";
Car.drive = function () {
  console.log("Vroom! Vroom!");
};

// Usage
console.log(Car.type); // Output: "car"
Car.honk(); // Output: "Honk! Honk!"
Car.drive(); // Output: "Vroom! Vroom!"

In this example, the "Car" object is created using Object.create() and inherits properties and methods from the "Vehicle" object. It adds its own specific properties like "type" and "drive." When we access the properties and methods of the "Car" object, JavaScript first checks the "Car" object itself, and if not found, it looks up the prototype chain to find the desired property or method.

The Basics of Prototypal Inheritance

Prototypal inheritance is a core concept in JavaScript that enables objects to inherit properties and methods from other objects.

Here, we'll explore the basics of prototypal inheritance and how it can be implemented in JavaScript ;)

Creating Objects with Constructors

Objects can be created using constructor functions. A constructor function serves as a blueprint for creating multiple instances of an object. When a constructor function is called with the "new" keyword, a new object is created, and the "this" keyword refers to that newly created object. Properties and methods can be added to the object using the "this" keyword within the constructor function.

Let's take an example of a "Person" object created using a constructor function:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Creating instances of Person
const person1 = new Person("John", 25);
const person2 = new Person("Sarah", 30);

console.log(person1.name); // Output: "John"
console.log(person2.age); // Output: 30

In this example, the "Person" constructor function defines the "name" and "age" properties for a person object. The "new" keyword is used to create two instances of the "Person" object, "person1" and "person2", with different values for the name and age properties.

The Prototype Property

In JavaScript, every function has a special property called "prototype." The "prototype" property is an object that is shared among all instances created from the same constructor function. Properties and methods added to the prototype are accessible by all instances of that object type, allowing for efficient memory usage.

Let's add a "greet" method to the "Person" object using its prototype property:

Person.prototype.greet = function () {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

person1.greet(); // Output: "Hello, my name is John and I am 25 years old."
person2.greet(); // Output: "Hello, my name is Sarah and I am 30 years old."

In this example, the "greet" method is added to the prototype of the "Person" object using the "Person.prototype" syntax. This allows all instances of the "Person" object to access the "greet" method and display their name and age.

Creating Instances with the new Keyword

When the "new" keyword is used to create an instance of an object, several things happen behind the scenes. Firstly, a new empty object is created. Secondly, the prototype property of the constructor function is assigned to the prototype of the newly created object. Finally, the constructor function is called with the "this" keyword pointing to the new object, allowing properties and methods to be added to it.

It's important to note that the "new" keyword is not mandatory for object creation in JavaScript. However, using it provides benefits like setting up the prototype chain correctly and simplifying the creation process.

Extending Objects with Prototypes

In JavaScript, objects can be extended with prototypes to add new methods and properties. This allows for code reuse and the ability to create hierarchies of objects with shared functionality.

Let's explore how to extend objects using prototypes and discuss various techniques to modify existing methods and properties!

Adding Methods and Properties to the Prototype

To add new methods and properties to an object's prototype, we can directly modify the prototype object itself. By adding properties and methods to the prototype, all instances of that object type will have access to them.

Let's consider an example where we want to extend the "Person" object with a new method called "introduce" that introduces the person's name and profession:

function Person(name) {
  this.name = name;
}

Person.prototype.introduce = function () {
  console.log(`My name is ${this.name}.`);
};

const person1 = new Person("John");
person1.introduce(); // Output: "My name is John."

In this example, we added the "introduce" method to the prototype of the "Person" object. Now, all instances of the "Person" object can access the "introduce" method and introduce themselves.

Modifying Existing Methods and Properties

Prototypes also allow us to modify existing methods and properties of an object. By modifying the prototype, we can change the behavior of all instances of that object type.

Let's say we want to modify the "introduce" method of the "Person" object to include the person's age:

Person.prototype.introduce = function () {
  console.log(`My name is ${this.name} and I am ${this.age} years old.`);
};

const person2 = new Person("Sarah");
person2.age = 30;
person2.introduce(); // Output: "My name is Sarah and I am 30 years old."

In this example, we modified the "introduce" method to include the person's age. By assigning the "age" property to the "person2" instance, we can now introduce both the name and age.

Inheritance Hierarchies

Prototypal inheritance allows for the creation of inheritance hierarchies, where objects can inherit properties and methods from other objects. By utilizing prototypes, we can establish relationships between objects and enable code reuse.

Let's consider an example where we have a "Teacher" object that inherits from the "Person" object:

function Teacher(name, subject) {
  Person.call(this, name);
  this.subject = subject;
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

Teacher.prototype.teach = function () {
  console.log(`I teach ${this.subject}.`);
};

const teacher1 = new Teacher("Emma", "Math");
teacher1.introduce(); // Output: "My name is Emma."
teacher1.teach(); // Output: "I teach Math."

In this example, we created a "Teacher" object that inherits from the "Person" object using the Object.create method. By setting the prototype of the "Teacher" object to an instance of the "Person" object, the "Teacher" object inherits the "introduce" method. We then added a new method called "teach" specific to the "Teacher" object.

Leveraging Prototypal Inheritance for Code Efficiency

Prototypal inheritance in JavaScript offers several benefits in terms of code efficiency. Let's take a look at the key aspects: code reusability and the performance optimization potential of prototypal inheritance!

Code Reusability and DRY Principle

One of the fundamental advantages of prototypal inheritance is code reusability. By using prototypes, we can define common functionality in a single place and have it inherited by multiple objects, reducing code duplication and adhering to the Don't Repeat Yourself (DRY) principle.

Consider a scenario where we have multiple objects representing different types of vehicles: Car, Motorcycle, and Bicycle. Each of these objects may have common properties and methods related to their functionality, such as "startEngine" and "stopEngine."

Instead of defining these methods separately for each object, we can leverage prototypal inheritance to define them once in a common prototype object. All instances of the vehicle objects can then inherit these methods, resulting in cleaner and more efficient code.

function Vehicle() {}

Vehicle.prototype.startEngine = function () {
  console.log("Engine started.");
};

Vehicle.prototype.stopEngine = function () {
  console.log("Engine stopped.");
};

function Car() {}
Car.prototype = Object.create(Vehicle.prototype);

function Motorcycle() {}
Motorcycle.prototype = Object.create(Vehicle.prototype);

function Bicycle() {}
Bicycle.prototype = Object.create(Vehicle.prototype);

const car1 = new Car();
const motorcycle1 = new Motorcycle();
const bicycle1 = new Bicycle();

car1.startEngine(); // Output: "Engine started."
motorcycle1.startEngine(); // Output: "Engine started."
bicycle1.startEngine(); // Output: "Engine started."
function Vehicle() {}

Vehicle.prototype.startEngine = function () {
  console.log("Engine started.");
};

Vehicle.prototype.stopEngine = function () {
  console.log("Engine stopped.");
};

function Car() {}
Car.prototype = Object.create(Vehicle.prototype);

function Motorcycle() {}
Motorcycle.prototype = Object.create(Vehicle.prototype);

function Bicycle() {}
Bicycle.prototype = Object.create(Vehicle.prototype);

const car1 = new Car();
const motorcycle1 = new Motorcycle();
const bicycle1 = new Bicycle();

car1.startEngine(); // Output: "Engine started."
motorcycle1.startEngine(); // Output: "Engine started."
bicycle1.startEngine(); // Output: "Engine started."

In this example, we created a Vehicle object with common methods for starting and stopping the engine. The Car, Motorcycle, and Bicycle objects inherit these methods by setting their prototypes to the Vehicle prototype.

By reusing the Vehicle prototype's methods, we eliminate code duplication and ensure consistency across different vehicle types.

Performance Optimization

Prototypal inheritance can also contribute to performance optimization in JavaScript. Since methods and properties are defined on the prototype, they are shared among all instances of the object. This leads to memory efficiency and better performance, particularly when dealing with a large number of objects.

Consider a scenario where we have thousands of objects representing employees in an organization. Each employee object may have common properties such as "name," "department," and "salary," as well as methods like "calculateSalary" and "displayInfo."

By using prototypal inheritance, we can define these methods once in the prototype and have them shared across all employee objects. This approach ensures efficient memory usage and faster method access compared to defining the methods separately for each object.

function Employee(name, department, salary) {
  this.name = name;
  this.department = department;
  this.salary = salary;
}

Employee.prototype.calculateSalary = function () {
  // Calculation logic
};

Employee.prototype.displayInfo = function () {
  // Display logic
};

// Creating multiple employee objects
const employee1 = new Employee("John Doe", "Sales", 5000);
const employee2 = new Employee("Jane Smith", "Marketing", 6000);
// ... More employee objects

employee1.calculateSalary(); // Shared method
employee2.displayInfo(); // Shared method

In this example, we define the "calculateSalary" and "displayInfo" methods in the Employee prototype. These methods are then shared across all employee objects, resulting in memory efficiency and improved performance.

By leveraging prototypal inheritance, we can optimize our codebase by reusing methods, reducing memory consumption, and achieving faster execution times.

Conclusion

Prototypal inheritance is a fundamental concept in JavaScript that promotes code reusability, organization, and efficiency. By utilizing prototypes and the inheritance chain, you can create clean, maintainable, and performant code. Understanding prototypal inheritance empowers JavaScript developers to harness the full potential of object-oriented programming in their projects. Embrace this powerful feature, and watch your code efficiency soar as you leverage the benefits of prototypal inheritance in JavaScript.

Let's connect!

✨ Twitter

✨ Github

Exploring the Power of Decorators in Python: A Comprehensive Guide

Ayesha Sahar — Sun, 26 Mar 2023 14:24:35 +0000

Introduction

If you're a Python developer looking to take your code to the next level, then decorators are a feature you should definitely explore. They are a powerful tool that allow you to modify the behavior of functions or classes without changing their source code. But with great power comes great responsibility, and decorators can also make your code more complex and harder to understand if used excessively or inappropriately!

So, let's dive into the world of decorators and unlock their potential for your Python projects!

What Are Decorators?

Decorators are functions that take another function as an argument and return a new function. The new function is usually a modified version of the original function.

For example, let's say we have a function that adds two numbers together:

def add(x, y):
    return x + y

We can define a decorator that adds a message to the output of the function:

def add_message(func):
    def wrapper(x, y):
        result = func(x, y)
        print("The result is:", result)
        return result
    return wrapper

The add_message function is a decorator that takes another function (add) as an argument and returns a new function (wrapper) that adds a message to the output.

We can use the decorator by applying it to the original function:

@add_message
def add(x, y):
    return x + y

add(2, 3)

This will output:

The result is: 5

How Do Decorators Work?🤨

When we apply a decorator to a function, Python actually calls the decorator function with the original function as an argument. The decorator function then returns a new function that replaces the original function!

Here's an example:

def my_decorator(func):
    def wrapper():
        print("Before the function is called.")
        func()
        print("After the function is called.")
    return wrapper

@my_decorator
def say_hello():
    print("Hello!")

say_hello()

The output of this code will be:

Before the function is called.
Hello!
After the function is called.

Python calls the my_decorator function with say_hello as an argument. The my_decorator function returns a new function (wrapper) that replaces say_hello. When we call say_hello, Python actually calls wrapper, which adds some behavior before and after the original function is called.

Types of Decorators

There are two main types of decorators in Python: function decorators and class decorators. As their name suggests, function decorators are applied to functions, while class decorators are applied to classes.

Function decorators are the most common type of decorator. Here's an example:

def my_decorator(func):
    def wrapper():
        print("Before the function is called.")
        func()
        print("After the function is called.")
    return wrapper

@my_decorator
def say_hello():
    print("Hello!")

Class decorators are less common but can be useful in certain situations.

Here's an example:

def my_decorator(cls):
    class Wrapper:
        def __init__(self, *args, **kwargs):
            self.wrapped = cls(*args, **kwargs)

        def __getattr__(self, name):
            return getattr(self.wrapped, name)

    return Wrapper

@my_decorator
class MyClass:
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def my_method(self):
        print("Hello, world!")

Advantages of Decorators

Code Reusability: Decorators allow you to reuse code across multiple functions or classes. This is especially useful when you need to add similar functionality to different parts of your codebase.
Separation of Concerns: They help to separate the "concerns" of your code. Instead of having one function that does multiple things, you can use decorators to split the functionality into smaller, more focused pieces.
Enhance Readability: Using decorators can improve the readability of your code. By decorating functions or classes with descriptive names, you can convey their purpose and make it easier for other developers to understand your code.
Non-Invasive: They are non-invasive, meaning they don't modify the original function or class. Instead, they create a new function or class that wraps the original one, allowing you to modify its behavior without changing its source code.

Pretty useful, aren't they?

Everything has some cons as well so now, let's take a look at their disadvantages👀

Disadvantages of Decorators

Abstraction: Using decorators can add a layer of abstraction to your code, which can make it harder to understand. This is especially true if you have many decorators applied to the same function or class.
Performance: Using decorators can impact the performance of your code. Each decorator adds an additional layer of function calls, which can slow down your code.
Debugging: Debugging code that uses decorators can be more difficult than debugging code that doesn't use them, especially if you're not familiar with the decorator syntax.

We do already know what decorators are by now but let me reinforce when to actually use them!

When to Use Decorators?👀

Adding new functionality: Use them to add new functionality to existing functions or classes without modifying their source code. This can make it easier to extend and customize your code over time.
Modifying behavior: Use them to modify the behavior of functions or classes for a specific use case, such as adding logging or error handling.
Separating concerns: Use them to encapsulate specific behavior in separate functions. This can make your code more modular and easier to maintain.

Examples of Using Decorators

Here are some examples of using decorators in Python:

1. Adding Logging:

You can use a decorator to add "logging" to a function.

Here's an example:

def log(func):
    def wrapper(*args, **kwargs):
        print(f"Calling {func.__name__} with args {args} and kwargs {kwargs}")
        return func(*args, **kwargs)
    return wrapper

@log
def add(x, y):
    return x + y

add(2, 3)

This will output:

Calling add with args (2, 3) and kwargs {}
5

2. Timing Execution:

You can use a decorator to time the execution of a function.

Here's an example:

import time

def timeit(func):
    def wrapper(*args, **kwargs):
        start = time.time()
        result = func(*args, **kwargs)
        end = time.time()
        print(f"{func.__name__} took {end - start} seconds")
        return result
    return wrapper

@timeit
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n-1) + fib(n-2)

print(fib(30))

The output will be:

fib took 0.41451382637023926 seconds
832040

3. Caching Results:

You can use a decorator to cache the results of a function.

Here's an example:

def memoize(func):
    cache = {}
    def wrapper(*args):
        if args in cache:
            return cache[args]
        else:
            result = func(*args)
            cache[args] = result
            return result
    return wrapper

@memoize
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n-1) + fib(n-2)

print(fib(30))

The output will be:

Conclusion

In order to use decorators effectively, it's important to understand their purpose, use cases, and limitations. By using decorators where needed, you can take advantage of their power and add new functionality to your Python code. I think that by now, you guys are ready to experiment with decorators and unlock their potential to take your Python projects to the next level ;)

Let's connect!

✨ Twitter

✨ Github

Debugging JavaScript Like a Pro: Tools and Techniques for Finding and Fixing Bugs

Ayesha Sahar — Sat, 25 Feb 2023 12:19:36 +0000

Introduction

JavaScript is a powerful programming language used to create interactive web pages and dynamic user interfaces. However, like any programming language, JavaScript code can contain bugs that can cause unexpected behavior, errors, or crashes and most important of all, can turn your life into a living hell!

Then comes debugging, which is the process of finding and fixing these bugs, and it is an essential skill for any JavaScript developer.

So, in this article, we're gonna discuss some tools and techniques that can help you debug JavaScript like a pro so that you can live a bug-free life ;)

1. Browser Console

The browser console is a built-in debugging tool that is available in most modern web browsers. It allows you to view and interact with the JavaScript code that is running on a web page, and it provides tools for debugging and error reporting. To open the console, simply right-click on a web page and select "Inspect" or "Inspect Element". Then, navigate to the "Console" tab.

In the console, you can view and interact with the JavaScript code on the current page, including variables, functions, and objects. You can also log messages and errors using the console.log() and console.error() functions, respectively. These messages can help you track the flow of your code and identify where bugs might be occurring.

2. Conditional breakpoints

Conditional breakpoints are a powerful debugging tool that allows developers to pause code execution only when a specific condition is met. This is particularly useful when debugging loops or functions that are called multiple times.

For example, suppose we have a loop that's iterating over an array of objects, and we want to pause the code execution only when the value of a specific property is a certain value. By adding a conditional breakpoint that checks the value of the property, we can quickly find the problematic code.

3. Debuggers

Generally, Console.log is any developer's favorite debugger, right? But guess what? We have special "debuggers" too!

A debugger is a powerful tool that allows you to step through your code and inspect its state at different points in time. This can help you identify bugs that might be occurring at specific points in your code, or that might be caused by interactions between different parts of your code.

Most modern web browsers include a built-in debugger that can be accessed through developer tools. To use the debugger, simply open the developer tools, navigate to the "Sources" tab, and select the JavaScript file you want to debug. Then, set breakpoints in your code by clicking on the line number where you want the debugger to stop. When the code reaches a breakpoint, the debugger will pause execution and allow you to inspect the state of your code.

4. Use a Linter

Another essential as a JavaScript developer is a linter! It's a tool that analyzes your code for errors, style violations, and other issues. It can help you identify bugs that might be caused by incorrect syntax, misspelled variable names, or other common mistakes. Linters can also help you enforce coding standards and best practices, which can improve the overall quality and readability of your code.

There are many JavaScript linters available, including JSLint, ESLint, and JSHint. These tools can be integrated into your development environment or build process, and they can be configured to match your coding standards and preferences.

5. Profilers

A profiler is a tool that helps you analyze the performance of your code. It can help you identify slow or resource-intensive functions, identify memory leaks, and optimize your code for better performance. Profilers can also help you identify bugs that might be caused by inefficient algorithms or other performance-related issues.

Most modern web browsers include a built-in profiler that can be accessed through developer tools. To use the profiler, simply open the developer tools, navigate to the "Performance" tab, and start a profiling session. Then, interact with your web page or application as you normally would, and the profiler will record and analyze the performance of your code. Pretty handy, right?

6. Testing frameworks

Testing frameworks such as Jest, Mocha, and Jasmine can be used to write unit tests for your JavaScript code. These frameworks allow you to write test cases to verify the expected behavior of your code. By running these tests, you can quickly identify if any code changes have caused unexpected behavior or introduced new bugs.

For example, if you have a function that takes two numbers and returns their sum, you can write a test case to ensure that the function returns the correct result for different input values. If you modify the function and it no longer passes the test, you know that the changes have introduced a bug.

Testing frameworks can also help you catch errors earlier in the development process, making debugging easier and faster. Additionally, these frameworks can help you ensure that your code meets certain quality standards and remains reliable and maintainable over time.

7. Error Tracking Services

Error tracking services such as Sentry and Rollbar can be used to track errors and exceptions in your JavaScript code in real time. These services provide a detailed log of errors, including information such as the error message, stack trace, and the line number where the error occurred.

By monitoring these logs, you can quickly identify and diagnose errors as they occur, allowing you to fix them before they impact your users. These services can also help you identify recurring errors and track their frequency, making it easier to prioritize and fix the most critical issues.

8. Call Stack Inspection

The call stack is a data structure that keeps track of the execution of a program. It records the sequence of function calls that led to the current execution point. When an error occurs in the code, inspecting the call stack can help identify the source of the error.

In JavaScript, developers can use the browser's built-in developer tools to inspect the call stack. These tools provide a call stack view along with the error message. The call stack can also be logged to the console using the console.trace() function, which prints a trace of the function calls that led to the current execution point.

9. Live Editing

Live editing is a debugging technique that allows developers to modify the code while it is running. This can be useful in cases where the problem cannot be reproduced in a development environment or when the developer wants to see the impact of changes in real-time.

One popular tool for live editing in JavaScript is the Chrome DevTools. With DevTools, developers can edit the code in the Sources tab and see the changes applied immediately in the browser. This can be useful for experimenting with different solutions or quickly testing changes to the code.

Another tool for live editing is the Node.js debugger. This allows developers to debug their code from the command line and make changes to the code while it is running. The debugger can be started with the --inspect flag and accessed through the Chrome DevTools.

10. Code Review

Code review is an important method for debugging JavaScript because it allows multiple developers to work on a codebase together and catch errors early in the development process.

Code review can take many different forms, but generally involves several people examining a codebase and looking for problems. This can be done through a variety of methods, such as:

Pair programming: Two developers work together on the same codebase, with one developer writing code while the other reviews it in real-time. This allows for immediate feedback and correction of errors.
Manual code review: One or more developers read through the codebase, looking for errors, inconsistencies, and opportunities to improve the code. This can be done manually, using tools like text editors or specialized code review software.
Automated code review: Developers use tools that analyze code for common errors, such as syntax errors, variable misuse, or performance issues. These tools can be integrated into a continuous integration pipeline to automatically catch issues before they reach production.

Some best practices for effective code review include:

Establish clear guidelines: Make sure everyone knows what the code review process entails, including the roles of reviewers and the criteria for success.
Focus on specific issues: Rather than trying to review everything at once, focus on specific issues like performance, security, or maintainability.
Use tools to assist: Utilize code review tools, such as linters, static analyzers, or IDE plugins, to automate the process and improve consistency.
Encourage feedback and communication: Make sure reviewers can communicate with each other and the code author, asking questions and providing suggestions for improvement.
Prioritize code review: Make code review a regular part of the development process, rather than an afterthought, to catch errors early and ensure high-quality code.

Conclusion

Debugging JavaScript code can be a challenging task, but with the right tools and techniques, it can also be a rewarding one. Overall, the key to effective JavaScript debugging is to use a combination of these different methods and tools, depending on the nature of the bug and the context in which it occurs. Whether you are a beginner or an experienced developer, mastering the art of debugging is an essential skill for success in the world of JavaScript development!!!

Let's connect!

✨ Twitter

✨ Github

Const vs Var vs Let: When and where to use them?

Ayesha Sahar — Sat, 31 Dec 2022 12:33:28 +0000

In JavaScript, const, var, and let are three keywords that are used to declare variables. These keywords are used to specify the scope and lifetime of the variables that they declare, and they also have different rules for reassignment and redeclaration. Understanding the differences between these keywords and how they are used can be important for writing effective and efficient JavaScript code.

So, today, we're just gonna do that :)

Const

const is a keyword that is used to declare a constant variable. Such a variable is one that cannot be reassigned or redeclared once it has been declared. This means that once a variable has been declared using the const keyword, its value cannot be changed, and it cannot be redeclared within the same scope. For example:

const x = 5;
x = 20; // this will throw an error, because x is a constant and cannot be reassigned
const x = 20; // this will also throw an error, because x has already been declared as a constant

const variables must be initialized with a value when they are declared, and this value cannot be changed later. However, it is important to note that the value of a const variable can be mutable, which means that it can be modified in place. For example:

const x = [1, 2, 3];
x.push(4); // this is allowed, because x is an array and we are modifying it in place
x = [1, 2, 3, 4]; // this will throw an error, because x is a constant and cannot be reassigned

Var

var is a keyword that is used to declare a variable in JavaScript. Unlike const variables, var variables can be reassigned and redeclared within the same scope. For example:

var x = 10;
x = 20; // this is allowed, because x is a var and can be reassigned
var x = 20; // this is also allowed, because x has already been declared as a var and can be redeclared

var variables do not have to be initialized with a value when they are declared, and they can be declared without being initialized at all. However, it is generally a good practice to initialize var variables with a value when they are declared, in order to avoid issues with undeclared variables.

Let

let is a keyword that was introduced in JavaScript in ECMAScript 6 (ES6) and is similar to var in many ways. Like var variables, let variables can be reassigned and redeclared within the same scope. However, let variables have a different lifetime than var variables, which means that they are only accessible within the block in which they are declared. This is known as block-scoping, and it is similar to the way that const variables are scoped.

For example:

if (true) {
  let x = 10;
  console.log(x); // this will output 10
}
console.log(x); // this will throw an error, because x is not defined outside of the block in which it was declared

let variables can also be used in for loops in a similar way to var variables, and they will be re-initialized on each iteration of the loop:

for (let i = 0; i < 10; i++) {
  console.log(i); // this will output 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
}
console.log(i); // this will throw an error, because i is not defined outside of the block in which it was declared

One major difference between let and var is that let variables are not hoisted, which means that they are not accessible before they are declared. This can be a useful feature in some cases, because it prevents the use of variables before they are defined, which can help to prevent certain types of bugs.

Conclusion

All in all, const, var, and let are all useful keywords for declaring variables in JavaScript, and they each have their own unique properties and features. const is useful for declaring variables that should not be reassigned or redeclared, var is useful for declaring variables that can be reassigned and redeclared and let is useful for declaring variables that have a block-scoped lifetime and are not hoisted.

Whatever you choose to use, choose wisely!

Let's connect!

✨ Twitter

✨ Github

15 Useful Tips for Creating a User-friendly Interface

Ayesha Sahar — Mon, 26 Dec 2022 12:52:25 +0000

Business owners create a digital presence in form of a website to increase engagement, revenues, and brand awareness. But, these things can only be achieved if the visitors to your website have a positive user experience. With the growth of e-commerce and digital services, user experience has become more important than ever

Just think, if you're looking for some product online, would you buy it from a website that offers a useful UI design and allows you to quickly get what you’re looking for, or from one that is unresponsive, has bad user flow, and takes forever to make the purchase? This one is a no-brainer, you'd choose the second one (unless you're a pyscopath👀).

So, for all the web designers out there, here are 15 useful tips for creating a User-friendly interface:

1. Keep it simple

👉 A cluttered interface can be overwhelming for users.

👉 Try to minimize the number of elements on each page and use white space effectively to guide the user's eye.

👉 But always make sure to not hide the "necessary" and "important" information from the user!

2. Consistent design elements

👉 Using elements, such as fonts, colors, and icons helps create a "cohesive" experience for the user.

3. Responsiveness

👉 Make sure your interface functions properly on all devices, including desktop, tablet, and mobile.

4. Appropriate colors

👉 Choose colors that are appropriate for your brand and the purpose of your interface.

👉 Avoid using too many colors, as that can be distracting.

5. Hierarchy

👉 Use headings, subheadings, and bullet points to help the user understand how the content is structured and navigate the interface easily.

6. White space

👉 Use white space to separate different sections of your interface and make it more visually appealing.

7. Typography

👉 Choose fonts that are easy to read and appropriate for your interface and go well with your branding.

8. Clear and descriptive headings

👉 Headings should clearly describe the content that follows and make it easy for the user to understand the structure of the page.

9. Iconography

👉 Always use icons that are clear and easy to understand, and consider using text labels in addition to icons to help clarify their meaning.

10. Microinteractions

👉 Microinteractions, such as hover states and tooltips, can help make your interface more interactive and engaging, but they should be used appropriately and should not interfere with the user's workflow or be too annoying.

11. Accessibility

👉 Make sure your interface is accessible to users with disabilities, including those with visual, auditory, and motor impairments.

👉 This includes using appropriate color contrast, alt text for images, and semantic HTML tags.

12. Appropriate button text

👉 Use action-oriented button text that clearly describes the action that will be taken when the button is clicked.

13. Clear and descriptive link text

👉 Use descriptive link text that clearly explains the destination of the link.

👉 Avoid using "click here" or "more info" as link text.

14. Form field labels

👉 Don't think that just using placeholders only would do the trick.

👉 Use form field labels that clearly describe the content that is to be entered in the field.

15. Test, test, test

👉 Make sure to test your interface with a variety of users to get feedback and identify any issues before launching.

Conclusion

These are just some of the many things you can do to make your designs awesome! If you guys know some more tips, share them in the comments😉

Hope that you all liked this article :)

Let's connect!

✨ Twitter

✨ Github

Let's talk NFTs👀

Ayesha Sahar — Tue, 08 Nov 2022 13:54:36 +0000

NFTs are the new "black". Everyone wants to own them. From big celebs to sports athletes to business giants, they have taken the world by storm. Currently, over 1 billion NFTs are in the market with an average creation rate of around 8 million per month. This estimated number is expected to explode even further as more people are gonna realize how much value they can provide!

If you wanna keep up with the new world and want to understand NFTs, let's dive right in ;)

So, what the heck are these NFTs that everyone keeps talking about?

NFTs or non-fungible tokens are unique digital assets that cannot be traded for new ones. They’re not just any digital files you can save on your phone or in the cloud. They actually represent real-world objects and digital items like art, music, virtual land, in-game collectibles, videos, photographs, and other interesting products. In digital land, they can be bought and sold like a piece of property even though they do not have a tangible form. They are very valuable due to their scarcity and cannot be duplicated. They are seen as proof of authenticity and certification of ownership for virtual or physical assets recorded on the blockchain.

In the past few years, they have been gaining popularity in the crypto and web3 community. These digital assets provide artists and other content creators with an opportunity to monetize their work and sell it directly to the audience in the form of NFTs.

Now, you might be thinking, "fineeeee Ayesha, got it, but do they have any other use?" Well, yeah, they do😉

They have the potential to be used in digital art, collectibles, gaming, music, fashion, sports, academia, decentralized finance (DeFi), tokenization of real-world objects, domain name ownership, licenses, certifications, patents, documentation, etc. They can even be used to track metadata, improve event ticketing systems and even transform real estate! Pretty handy, aren't they?😏

How to create your own NFTs?

It's not that easy to create your NFTs but definitely not that hard either! I'll walk you guys through the steps briefly :)

First of all, you gotta decide on what you wanna turn into an NFT. It can be anything. Your cringe tweets, muffin recipe that never works, code so bad that it would make people want to wash their eyes with acid, or poetry that would even give Shakespeare a heart attack(even though he's been dead for ages).

Done deciding that? Now, let's choose a blockchain! The blockchain would keep a permanent record of your NFT, so it’s essential to choose the one that fits your requirements the best. Some notable options are Ethereum, Solana, and Flow.

The next step is to set up your digital wallet. You'll need some cryptocurrency from your wallet for the initial investment.

Now, you gotta find a platform that's a good fit for your NFT. Connect it to your digital wallet to pay the fees to mint your NFT.

The place where you're gonna sell your NFT (NFT Marketplace should have a step-by-step guide for uploading your digital file to their platform. This certain process will help you to turn your digital file into a marketable NFT.

Finally, choose how you wanna sell your NFT and set a price.

Congrats, you've created your own NFT🥳 (in theory).

What Is Minting?

You might have noticed, that I used the word "mint". No, I didn't use this word as in choco chip mint ice cream (Oh God, I hate it).

In this magical world of NFTs, it refers to the process of creating new NFTs on a blockchain. While minting, you’re recording data that comprises a new NFT in a new block which is then added to a blockchain. This process is not free and typically comes with fees. As for how, when, and to whom minting fees are charged, that depends on various NFT Marketplaces.

NFT Marketplaces

Let's talk a bit more about NFT Marketplaces. In simple words, it's a web app where users buy and sell NFTs. You can make use of existing marketplaces such as OpenSea, Rarible, Foundation, Mintable, etc or build your own Marketplace. If you're a web3 dev too, chances are that you've made such a dApp once. Well, dunno about you guys, but I couldn't resist the temptation👀

Some NFT marketplaces give the option for lazy minting. A lazy mint allows the creator to upload their work, “mint” it to their profile, and list it for sale without paying gas fees. The collector will have to pay the "gas fees" after buying the NFT. In order to buy NFTs, you pay in crypto and the seller also receives the payment in crypto. But these days, there are solutions that allow you to use your cards directly.

Purchase NFTs directly with cards

This is a whole world different from adding up more cryptocurrencies into your NFT wallet with credit cards. You’re gonna pay wholly for the NFT directly with your credit card.

For example, if an NFT is up for 800 MATIC which is around $739 USD, the entire $739 USD will be deducted and paid from your card. The solution provider will do the background job in converting your $739 USD to 800 MATIC.

But there is another solution, where you just pay directly with cash and don't have to be affected by crypto fluctuations. Did I catch your interest? Well then, ladies and gentlemen, boys and girls, and web3 enthusiasts of all ages, let me share one such solution with you guys!

NoRamp

NoRamp is the first and only decentralized digital asset transfer solution via direct peer-to-peer fiat payment. Enabling buyers and sellers to be paid out in fiat currency, never touching crypto.

NoRamp uses a proprietary process to activate smart contract triggers that are initiated by off-chain peer-to-peer fiat payment confirmation. Isn't that like crazy????
With NoRamp marketplace sellers are paid directly by buyers in their native fiat currency.

Since fiat transactions occur directly between buyer and seller, there is no buyer KYC for NFTs making the purchasing process easier and quicker.

This is pretty good for people who wanna own NFTs but don't wanna dabble in Crypto. Also, it can be integrated in your NFT marketplaces. Their documentation is pretty well written.

I was kinda thinking of building a NFT marketplace while integrating it but let's see if I actually do it or not. Maybe after I finish my other 100 projects😂

If you are thinking of using it, NoRamp is currently available on NEAR, ETH, BNB Chain, Avalanche, Polygon, Fantom, Optimism and Arbitrum. NoRamp is currently adding more integrations and expanding into more blockchains with Solana and Tezos coming soon.

The support for other blockchains will come soon according to their website. I think that it's possible to be integrated in less than a day, in a few hours maybe. One thing that I kinda liked was that you can have access to their testnet with no limitations. After you're 100% sure, you can request approval for the Mainnet.

P.S: If you face any difficulty, you can also schedule a call with their team from the link given on their website. I'm so gonna bother their team either way when I integrate it into my own NFT Marketplace🤣

Conclusion

Whether or not NFTs are here to stay, for the moment they have opened up the door to a new world. Also, now being able to buy NFTs with credit cards will surely welcome more people into this landscape! Many who were kept away because of the complexities of crypto can now own NFTs without any worries with their credit cards.

Though, I'd still advise you to do your own research properly before dabbling in this field :)

Let's connect!

✨ Twitter

✨ Github

A Complete Guide on Technical Writing For Beginners

Ayesha Sahar — Thu, 01 Sep 2022 13:43:24 +0000

Introduction
Benefits
Choosing a Platform
What to write?
Structure
Why write about a topic even when many articles are already present on the same topic?
Length of article
What to do if an article is way too long?
Open Source and Technical Writing
Do you need to be a technical writer in order to be a successful developer/designer?
Some Useful Tips
Conclusion

Introduction

"Technical writing is the practice of documenting processes, such as software manuals or instructional materials."

It exists in many forms and has a very different purpose and different characteristics than other writing styles. A good technical writer will make a complex topic very easy to understand! It is one of the most coveted skills in the professional workplace.

Being a good technical writer will surely benefit you a lot too. So, let's discuss all about technical writing today :)

Benefits

Now you may be thinking, "why should I start writing?"🤔 So, I'm listing down some benefits here to help you decide:

1. For example, you are writing an article on Flexbox in CSS. To do that, the first thing you will do is research. While doing so, you might end up learning a lot more than what you knew before!

2. You get an opportunity to make money online.

3. You can work remotely.

4. You can work with amazing tech companies and write for them.

5. You can showcase your own knowledge. If you have written an article that explains a certain topic really well, that means you actually "know" about it. For example, you have written an article on a React.js topic. Maybe one of the readers is from a company that is currently hiring React developers. That reader might recommend you to his company.

6. If you are writing on social media, like Twitter, you can grow an audience. People from that audience might end up becoming the first users of your Saas.

7. Get feedback from developers from all over the world.

At the end of the day, not everyone would be benefitted in all ways. You also shouldn't expect to be hired by your dream company after writing one article or tweeting just once😅 Everything requires hard work and consistency!

Choosing a Platform

Once you have decided that you will start writing, the next thing you might be thinking would be about where to write👀

Some good platforms for developers are hashnode, dev.to and medium. These platforms have a huge community, which means that people will be there to read what you write. You won't have to start from scratch to find readers. Publishing here as beginners would benefit you a lot.

If you are someone who already has a community, be it anywhere on Social Media, you can even start your own blog. Choose a tech stack and build it. This would also make a good portfolio project ;)

The best way would be to cross-post on different platforms to maximize the exposure of your articles! Fro example, I cross-post on hashnode and dev.to. I also share my articles on Twitter. Sometimes, my articles perform great on hashnode but not that much on dev.to. Still, I benefit a lot. This is all due to cross-posting.

Even if you have your own blog, you can first publish your article there and then cross-post on these platforms to get the maximum benefit!

What to write?

Actually, you can write about anything! Learned something new today? Write about it! Finally, solved that bug that was bugging you for days? Write about it! Started to explore a new field? Write about it!

A good initiative would be to define your niche. That way, you won't be stuck in the loop of finding "what to write about". Some niche ideas for developers are:

React.js
JavaScript, the boss itself ;)
Web Development
Python
C++

The thing is that you can narrow down on broaden the niche by your will. You can choose web development as a whole as your niche or narrow it down to just JavaScript, it's all your choice!

P.S:

Some people find it difficult to write. What you can do is start small. Write tweets on Twitter. It could be anything, like a list of some useful platforms for some purpose, tips, tricks, learning resources, etc. Soon, you'll get in the habit and won't find writing longer lengthed things difficult!

Structure

When asked about technical writing, many also ask about what structure to follow. Start with the introduction of the topic you are writing about. Then comes the main body. In the end, conclude your article under the heading of "conclusion". For reference, also see the headings of this article. I've used a structured way.

Since I'm writing about technical writing, I first introduced what it is, its benefits, recommended some platforms, explained what to write, and then I started discussing the structure. If I first explained what should be the length of the article, then discussed platforms, and then introduced technical writing, nothing would make sense right? Hence, structuring your articles in a way that everything moves in order is extremely important. That's because this helps the user understand what you are writing about!

Why write about a topic even when many articles are already present on the same topic?

Take the example of recipe websites. If you search for a recipe for muffins, you'll find lots of search results. Every article would teach you how to bake a muffin but their recipes would be different. This difference would result in different consistency of muffins. But, there are many people out there. Some might like recipe A which results in a buttery muffin, some might like recipe B, which results in a thick muffin. Maybe, recipe A works for a person in the USA but fails for a person in the UK. This might be due to various factors e.g change in the climate.

Just like that, some might like your article better. The solutions presented by you might work for some people but might not work for others. But that's okay! As long as you are helping even one person out there, I personally think that it is worth it :)

Length of article

Honestly speaking, there is no predefined length of an article.

For example, if I write an article about "UX of opening links", it won't be longer than 500 words at all. So if I think that no, my article should be at least 800 words long and keep on dragging it, no one would enjoy it. So, as long as your message is being conveyed, even if it has 300 words, it's an awesome article. Don't worry about the length!

What to do if an article is way too long?

A common tip that people give is to keep your articles less than 2000 words. It's because if it's too long, the readers might lose interest or the "motivation" to keep going.

But this also varies from case to case. Like, you are sharing 100 tips for ABC. Of course, it might cross this limit.

In these cases, what you can do is create a table of contents! So that readers would not have to scan the article to find what they need. In this way, they can instantly find what they came for.

Let's discuss another case. You are writing an article to guide others on how to make a counter app with React.js. This article would definitely be long. If a reader like me sees a long 4000 words article, they would just ignore it and find some other resource. In order to get their full focus, divide it into parts. If it's a 4000-word article, divide it into 3 parts or 2 parts, it's your choice. Also, include a table of contents for each part.

Open Source and Technical Writing

Might seem like a foreign concept to some of you, but trust me, it isn't! You can contribute to open-source via technical writing. For example, you can write a README for a project, you help in the documentation of a project, etc. Sounds interesting, right?

Those of you who aren't confident in your coding skills yet can easily contribute to the community in this way. Of course, it isn't mandatory but if you like this idea, then contribute :)

Do you need to be a technical writer in order to be a successful developer/designer?

The answer is a big fat NO!

Technical writing sure benefits you in a lot of ways. But it isn't mandatory. If you are interested start writing. If you aren't, then that's fine. Everyone is unique and has separate preferences, some might like to write, some might like to just read and it's absolutely fine. Don't let anyone tell you otherwise!

Some Useful Tips

- Understand your audience: Only an expert in some field will understand certain abbreviations, and acronyms that directly apply to such a field. A beginner will not understand in the same manner and, therefore, every detail must be explained and spelled out for them. Always write like you are explaining to a beginner since you never know who's gonna read your articles!

- Writing should be straightforward: Write to the point, and as simple as possible to make sure the reader understands the process or instruction. You can list steps to take to achieve the desired goal or write a short or lengthy explanation of a concept. Everything is your choice.

- Research: Even if you think you are an expert on some topic, always research. Gather information from a number of sources. Understand and analyze the information thoroughly, and then convert it into an easy to understand format to instruct those who read it.

- Be thorough: Provide enough detail to make your points. But, do not make the explanation too long to bore the reader.

- Sentences should be short: Sentences should not be too long unless absolutely required. Even if they are too long, try to structure them in an easy-to-understand way. Also, use simple language. No need to use complex words. Your language is not everyone's first language!

Conclusion Github

✨ Twitter

13 Income Ideas for Web Developers 💸✨

Ayesha Sahar — Mon, 15 Aug 2022 12:37:43 +0000

Introduction

1. Selling Templates
2. Technical Writing
3. Become a Youtuber
4. Use Social Media
5. Affiliate Marketing
6. Create a Saas Product
7. Freelance Platforms
8. Selling ebooks
9. Creating and Selling WordPress/Shopify plugins
10. Offering Maintenance
11. Renting Websites
12. Chatbots
13. Security Flaws and Bugs Hunting

Conclusion

Introduction

Did you know that in tech, there are many ways to earn money other than just the traditional 9-5 job? Even more so, Web Development is a vast field that is ever-growing, hence, there are numerous opportunities for generating income. Well, who doesn't like more money?👀😂

There are many methods, but let's discuss 13 Income Ideas ;)

Disclaimer ☠️

Even though I specified this thread for "Web Developers", most of these methods can be used to earn money for other types of developers too!

1) Selling Templates

Check out marketplaces where developers and designers can buy and sell various digital products! You can sell WordPress, Shopify and WooCommerce themes, HTML templates or even graphic elements too. You can use this method even if you only know HTML and CSS as the templates can be made from anything!

Here are some platforms where you can buy and sell templates:

🔷 TemplateMonster

🔷 Theme Forest

🔷 Templamatic

🔷 FlashDen

🔷 Mojo Marketplace

🔷 Creative Market

🔷 Codester

🔷 DesignHill

🔷 FreePik

🔷 99Designs

2) Technical Writing

Are you that person in the group who always shares their notes with friends the night before exams? Then you can easily write away!

Choose a topic that you are good at and explain it simply. There are many platforms that pay technical writers! The starting pay for most platforms that I know about is at least 100USD for 1 article. I'd recommend that you guys research them yourself, see which platform suits you, and send an application to write for them. If they like your idea, they'll approve and hire you!

But for paid articles, generally, the person who hires you gives you a topic👀 Sometimes, the paid article is about their product or how their product works, etc. They don't always demand a sample. Some see the articles you have already written on your blog or published somewhere else and hire you based on that. The next question is, "Who hires a technical writer?" Well, any site that has content (articles) on it, hires a technical writer. If I make a list, it will be too long. Also, you can be hired as a writer on freelance platforms too!

Now, If you are a beginner, you might be thinking, "what do I write about?🤔". It can be literally anything!!! For example, if you learned how to set up Python today, write about it! You found some amazing resources, write about them! You learned a JavaScript topic, e.g callbacks, write about it! Especially, if you have a personal blog, write whatever you want, and have AdSense on it!

P.S: Honestly speaking, you won't ever regret technical writing. I won't start on it or else my rant will be too long. I'll write on this topic in detail in another article soon :)

3) Become a Youtuber

You can create video tutorials or talk about interesting topics. You'll start getting paid after you have a certain no of views, as defined by YouTube. It will depend on your consistency and how much hard work you are willing to put in. At the start, you won't get any attention at all, but don't give up. This is a long-term method but it's worth it!

4) Use Social Media

Is social media all about wasting time or getting some entertainment? No! You can use platforms like Twitter, Instagram, etc to showcase your knowledge and skills.

It's a great way to reach a maximum number of people. If people like your work, they can contact you to work for them!

Also, if you are into technical writing and have a blog, you can maximize your reach by sharing your articles on social media. Everything depends on how you utilize these platforms.

The next point discussed will also tell you about how you can utilize social media further for your benefit!

5) Affiliate Marketing

Currently, this is quite a popular method for marketing! Companies can hire someone with a certain following to share about their products.

👉 Examples:

Company A hires a blogger to write about their product in an article (see point#2 👀)
Company B hires a YouTuber to make a video about their product (See point # 3)
Company C hires a social media user with a certain following to tweet a review about their product (See point # 4)

The content can be a review, how to use the product, detail of any feature, etc.

6) Create a Saas Product

A Saas is an internet software accessible to everyone. Even Netflix is a Saas service where you can buy a membership to see videos👀 It doesn't have to be anything big, it can be simple too as long as it solves a problem!

However, some web devs do not realize that building a Saas can truly provide a stable source of monthly recurring passive income. But always remember that support and ongoing updates are essential. Make sure your pricing is just. If you want to make your earnings passively, outsource the support and maintenance to third parties!

7) Freelance Platforms

You can work on your schedule by getting clients from freelance platforms. Just work whenever you want from wherever you want!

Here are 17 Freelance Websites to Find Work in 2022🔥

🔷 Fiverr

🔷 Upwork

🔷 Toptal

🔷 Freelancer. com

🔷 Behance

🔷 ServiceScape

🔷 DesignHill

🔷 TaskRabbit

🔷 Guru

🔷 LinkedIn

🔷 Flexjobs

🔷 PeoplePerHour

🔷 SimplyHired

🔷 Dribbble

🔷 AngelList

🔷 YunoJuno

🔷 DesignCrowd

8) Selling ebooks

Are you an expert on some topic? Write about it! Make sure the content is explained properly and has enough value that people would buy it!

For example, if you are good at CSS Flexbox, write about it! What you can do to make things interesting is to add examples, how to learn the topic easily, how to practice it, what projects you can build to implement your learnings etc. Pack in as much value as you can!

For starters, keep the price low. As you move on to creating more products, you can increase their price!

9) Creating and Selling WordPress/Shopify plugins

With the right plugins and marketing strategies, you could make a good amount from subscription-based WordPress or Shopify plugins!

To define what plugin to make, what you can do is see feedback from users, note down their problems, and make sure that your plugin solves them. This way, users will be willing to pay too since it's benefitting them!

10) Offering Maintenance

Already working with some clients? Offer maintenance services! E.g, with all the new screen types coming out, clients do need their website to be accessible, right? You can make sure that everything is working fine and fix bugs!

11) Renting Websites

Do I sound crazy? Yes. But is it a good plan? Also yes.

Honestly speaking, when I was searching for income ideas and found out about this one, I was so surprised!!!

Rather than selling websites, just rent them for a fee! For example, you made a real estate website and you know some real estate agency. You can reach out and offer them your website for a monthly rental fee. You can also charge for support, updates and bug fixes as well :)

12) Chatbots

You can create and sell chatbots!

Bots are pretty useful to perform customer service tasks like greeting visitors, collecting user information, answering FAQ’s and assisting companies to increase their productivity and enhance customer relationships. With the right ideas to serve the right industry, you can earn a decent amount by creating and selling bots as a web developer.

P.S: If you are a Machine Learning/Artificial Intelligence enthusiast, making complex chatbots would be easier for you and you can earn way more selling those!

13) Security Flaws and Bugs Hunting

In this modern age, Cybercrime is a very serious threat to businesses. You can find security flaws and threats on behalf of online-based companies for a fee. As a white-hat hacker, you can help companies defend against the bad guys. You'll have to test the company’s security infrastructures or offer data protection services. Also, if you see any sort of bug in the website/web app etc, you can report it and get paid. You might even get noticed and hired by some company if you keep on being noticed! But this can demand a lot of time though.

Conclusion

It is not possible for everyone to be good at everything and I don't expect it. Explore all these in much more detail. Check what suits you the most and try that out. No rush, just move at your own pace :)

All the best to y'all!

Let's connect!

✨ Twitter

✨ Github

Simplifying Closures in JavaScript

Ayesha Sahar — Mon, 01 Aug 2022 13:29:25 +0000

What exactly is a Closure?

It is the combo of a function bundled together with references to its surrounding state (the lexical environment). Basically, it gives you access to an outer function's scope from an inner function. In a closure, an inner function has access to the outer (enclosing) function’s variables — a scope chain.

So, what is the scope chain of a closure?

It has:

👉 access to its own scope. This refers to the variables defined between its curly brackets.

👉 access to the outer function’s variables.

👉 access to the global variables.

You might remember a word I used, "Lexical Scoping". Let's first understand what it is!

Lexical Scoping

It defines the scope of a variable according to the position of that variable declared in the source code.

Example:

let fname = 'Ayesha';

function full_name() { 
    let lname= 'Sahar';
    console.log(fname + ' '+ lname);
}

Explanation:

Here, the variable fname is a global variable, so it is accessible from anywhere. But the variable lname is a local variable, so it is accessible only within the full_name() function. If we try to access the msg variable outside the full_name() function, we will get an error.

So, JavaScript uses the "scope" to manage the variable accessibility.

According to lexical scoping, the scopes can be nested and the inner function can access the variables declared in its outer scope.

Example:

function greeting() {
    let msg = 'Hello World :)';

    function sayHello() {
        console.log(msg);
    }
    sayHello();
}

greeting();

Explanation:

👉 The greeting() function creates a local variable named msg and another function named sayHello().

👉 The sayHello() is the inner function and it is available only within the body of the greeting() function.

👉 The sayHello() function can access the variables of the outer function such as the msg variable of the greeting() function.

👉 Inside the greeting() function, we call the sayHello() function to display the message "Hello World :)'.

JavaScript Closures

To make a closure, let's just modify our greeting() function, which was created previously.

Example:

function greeting() {
    let msg = 'Hello World :)';

    function sayHello() {
        console.log(message);
    }

    return sayHello;
}
let hello = greeting();
hello();

Explanation:

👉 Here, instead of executing the sayHello() function inside the greeting() function, the greeting() function returns the sayHello() function object.

👉 Since functions are very important in JavaScript, you can return a function from another function. They practically get a celebrity treatment👀

👉 Outside of the greeting() function, we assigned the hello variable the value returned by the greeting() function. That is actually a reference to the sayHello() function!

👉 We then executed the sayHello() function using the reference of that function: hello().

👉 What's quite intriguing is that normally, a local variable only exists during the execution of the function. In the ideal case, when the greeting() function has been executed, the msg variable should be no longer accessible.

👉 But here, we execute the hello() function that references the sayHello() function, so the msg variable still exists and can be accessible.

The sayHello() function is the magical being, also known as a closure!

So, we can conclude that the closure is a function that preserves the outer scope in its inner scope.

Closures in a loop

Let's start with an example as usual ;)

Example:

for (var j = 1; j <= 3; j++) {
    setTimeout(function () {
        console.log('After ' + j + ' second(s)=' + index);
    }, j * 1000);
}

//Output
//After 4 second(s)=4
//After 4 second(s)=4
//After 4 second(s)=4

Explanation:

👉 We get the same message thrice.

👉 What we actually wanted to do in the loop is to copy the value of j in each iteration at the time of iteration to display a message after 1s, 2s and 3s.

👉 So, why did we see the same message after 4 seconds? It's because the callback passed to the setTimeout() is a closure. It remembers the value of j from the last iteration of the loop (value was 4).

👉 Also, all closures created by the for-loop share the same global scope access and the same value of j.

👉 This is quite an issue and to fix this, we need to create a new closure scope in each iteration of the loop.

There are two most used solutions:

let keyword
IIFE

let keyword

We can use the let keyword to declare a variable that is block-scoped in ES6. Once we use the let keyword in the for-loop, it will create a new lexical scope in each iteration. So, we will have a new j variable in each iteration. Also, our latest lexical scope is actually chained up to the previous scope. This means that the previous value of j is copied from the previous scope to the new one.

for (let j = 1; j <= 3; j++) {
    setTimeout(function () {
        console.log('After ' + j + ' second(s)=' + index);
    }, j * 1000);
}

//Output
//After 1 second(s)=1
//After 2 second(s)=2
//After 3 second(s)=3

IIFE

We can use an "immediately invoked function expression(IIFE)". This is because an IIFE creates a new scope by declaring a function and immediately executing it.

Here, we don't need to abandon var keyword :)

for (var j= 1; j <= 3; j++) {
    (function (j) {
        setTimeout(function () {
            console.log('After ' + j + ' second(s)=' + index);
        }, j * 1000);
    })(j);
}

//Output
//After 1 second(s)=1
//After 2 second(s)=2
//After 3 second(s)=3

Why learn Closures?

I'm listing down some uses of closures here:

👉 Init functions - used to ensure that a function is only called once

👉 Memory optimization -used to make functions more memory efficient and performant

👉 Encapsulation - used to hide variables of a function and selectively expose methods

👉 Functional programming - without them, higher-order functions and currying is not possible

Let's connect!

✨ Twitter

✨ Github

Everything you need to know about Parallelism, Threading, and Multi-threading in Python

Ayesha Sahar — Thu, 14 Jul 2022 14:10:00 +0000

Introduction

I guess everyone who opened this article has been coding for quite a while now. You should have already come across use-cases where you’d want to speed up specific operations in some parts of your code, right? Well, you're at the right place!

Today, we'll talk about how to perform multiple tasks at the same time to speed up your code.

P.S: I'll be explaining while implementing in Python :)

Parallelism

Via Data science, we deal with large amounts of data and extract useful insights from them. Most of the time, our operations on the data are easily "parallelizable". This means that different processing agents can run the particular "operation" on the data one piece at a time and then combine the results at the end to get the complete result.

This might not have made any sense so let's see a real-world example of parallelizability to understand it.

For example, it's your friend's wedding. She wants you to bake a 3 tier cake but you don't have a lot of time. Generally, you have to bake each tier one by one. But if you have two other friends who help you, then each of you can bake each tier. In the latter part, each of you is working parallelly on a part of the whole task. This reduced the total time required to complete the task.

This parallel processing can be achieved in Python in ways like multiprocessing and threading.

Threading

Thread is a lightweight process or any task. Now, you might be wondering, what is a process? I'll explain it here since you will be seeing this word a lot!

A process is basically an instance of a computer program being executed. Every single process has its own memory space it uses to store the instructions being run. Any data it needs to store and access to execute is also in its own memory space.

Let's move back to our topic, which is threading. Threading is a method to add concurrency to your programs. For example, if your Python code is using multiple threads and you look at the processes running on your OS, you would only see a single entry for your script even though it is running multiple threads.

In fact, a Python process cannot run threads in parallel. But the process can run them concurrently through context switching during I/O bound operations.

This limitation is enforced by GIL. GIL or the Python Global Interpreter Lock prevents threads within the same process to be executed at the same time. It is of extreme importance because Python’s interpreter is not thread-safe. It is enforced every time we attempt to access Python objects within threads. At any given time, only one thread can acquire the lock for a specific object.

Example:

Here's an example:

from time import sleep, perf_counter

def Task():
    print("Starting this task.......")
    sleep(1)
    print("Task Completed!!!")


start_time = perf_counter()

Task()
Task()

end_time = perf_counter()

print(f'It took {end_time- start_time: 0.2f} second(s) for the task to complete!')

This is the output:

#Starting this task.......
#Task Completed!!!
#Starting this task.......
#Task Completed!!!
#It took  2.02 second(s) for the task to complete!

Explanation:

As expected, the program took about two seconds to complete. If we called the Task() function 10 times, it would take about 10 seconds to complete.

Let's break down what exactly happened! Firstly, the Task() function executes. It then sleeps for one second. Then, it executes another time and also sleeps for another second. Finally, the program execution is completed.

When our Task() function calls the sleep() function, the CPU is idle. In other words, the CPU doesn’t do anything. This is not efficient in terms of resource utilization.

Our program has one process with a single thread, which is our main thread. Since it has only one thread, it’s called a single-threaded program.

Multi-threading

By formal definition, multithreading refers to the ability of a processor to execute multiple threads concurrently, where each thread runs a process. It is quite useful for IO-bound processes, such as reading files from a network or database since each thread can run the IO-bound process concurrently.

But using it for CPU-bound processes might slow down performance due to competing resources that ensure only one thread can execute at a time, and overhead is incurred in dealing with multiple threads.

Let's take a look at an example to understand what it is and how we can create a multithreaded application!

Example

In order to create a multi-threaded program, you need to use the Python threading module.

from time import sleep, perf_counter
from threading import Thread


def Task():
    print("Starting this task.......")
    sleep(1)
    print("Task Completed!!!")


start_time = perf_counter()

# create two new threads
t1 = Thread(target=Task)
t2 = Thread(target=Task)

# start the threads
t1.start()
t2.start()

# wait for the threads to complete
t1.join()
t2.join()

end_time = perf_counter()

print(f'It took {end_time- start_time: 0.2f} second(s) for the task to complete!')

Output:

Starting this task.......
Starting this task.......
Task Completed!!!
Task Completed!!!
It took  1.00 second(s) for the task to complete!

Explanation:

When we execute the program, there will be three threads; the main thread is created by the Python interpreter + two threads are created by the program.

As the output shows, the program took one second instead of two to complete.

A brief intro to Multiprocessing

It refers to the ability of a system to run multiple processors concurrently, where each processor can run one or more threads.

It is useful for CPU-bound processes, such as computationally heavy tasks since it will benefit from having multiple processors. It's pretty similar to how multicore computers work faster than computers with a single core. Multiprocessing might lead to higher CPU utilization due to multiple CPU cores being used by the program, which is kinda expected.

How are Python Multi-threading and Multiprocessing Related? 👀

Multithreading and multiprocessing both allow our Python code to run concurrently. But, only one of them, "multiprocessing", will allow your code to be truly parallel. Whereas, if your code is IO-heavy (like HTTP requests), then multithreading will still probably speed up your code.

Why Multithreading Is Always Not "The Solution"

Everything has some pros and cons. Just like that, multithreading also has some disadvantages that you really shouldn't ignore. For example:

👉 You really DON'T want to use it for basic tasks because there is overhead associated with managing threads.

👉 It actually increases the complexity of the program. So if the program is more complex, debugging will become more difficult!

👉 Writing applications that have multithreading are not easy to write so only experienced programmers should do this. This is definitely NOT for beginners.

👉 Managing concurrency among threads is very difficult. It also has the potential to introduce new bugs or we can say "features😂", into an application.

Why Parallel Computing or Parallelism Is Always Not "The Solution"

Parallelism to a program is not always useful. Here are some pitfalls that you NEED to be aware of:

Livelock:

It occurs when:

threads keep running in a loop but don’t make any progress
poor design
improper use of mutex locks

Starvation:

It occurs when a thread is denied access to a particular resource for longer periods of time, so the overall program slows down. This situation might be a result of an unintended side effect of a poorly designed thread-scheduling algorithm.

Race Condition:

As I shared before, threads have a shared memory space and so, they can have access to shared variables. This situation occurs when multiple threads try to change the same variable simultaneously. The thread scheduler can arbitrarily swap between threads, so we have no way of knowing the order in which the threads will try to change the data. This can result in incorrect behavior in either of the threads, especially if the threads decide to do something based on the value of the variable. In order to prevent this, a mutual exclusion (or mutex) lock can be placed around the piece of the code that modifies the variable. If this is done, then only one thread can write to the variable at a time.

Deadlock:

Overuse of anything is not good. Just like that, overusing mutex locks also has a downside. It can introduce deadlocks in the program! It is basically a state when a thread is waiting for another thread to release a lock, but that other thread needs a resource to finish that the first thread is holding onto. This situation results in both threads coming to a standstill and the program stops. We can think of deadlocks as extreme cases of starvation. In order to avoid this situation, don't introduce too many locks that are interdependent.

So, What Exactly Should You Use?🤔

Multithreading is your best friend because of its low overhead if your code has a lot of I/O or Network usage
Multithreading should be used if you have a GUI so your UI thread doesn't get locked up
Use multiprocessing if your code is CPU bound. (But only if your machine has multiple cores)

Anyways, just use whatever you think would work best according to your code!

Conclusion

These OS related concepts are pretty advanced but extremely important if you wanna be a pro developer. Take your time to go through these concepts. No need to fuss if you don't understand them in the first go. Even pro programmers have difficulty implementing them.

So, take your time, use multiple resources if needed, and practice!

Let's connect!

✨ Twitter

✨ Github