DEV Community: Iftakher Hossen

The Building Blocks of Python: Variables, I/O, and Operators

Iftakher Hossen — Mon, 06 Jan 2025 22:50:32 +0000

Hello, Python enthusiasts! 🌟 Are you ready to take your first steps into the exciting world of Python programming? In this blog, we’ll cover three fundamental concepts that form the building blocks of Python programming. By the end, you’ll have a solid foundation to build upon as you continue your coding journey. These are the basics of a programming language; while the structure may vary in different languages, the concepts remain the same.

Variables and Data Types
Input and Output
Operators

Let’s dive in!

1. Variables and Data Types:

What is Variable?

Variables are containers where you can store data in your programs. Just like giving a name to a box so you know what's inside, you give your variables names to help you use their data later. One interesting fact about Python is that it's smart enough to figure out what type of data you're storing - you don't have to tell it whether you're storing numbers, text, or something else!
Examples:

name = "Hossen"     # String
grade = 97          # Integer
height = 6.1        # Float
is_student = True   # Boolean

Varibale Naming Conventions:
Variable naming conventions are essential to maintain code readability and follow best practices. Here are the rules and conventions for naming variables in Python:

Must start with a letter or the underscore character
Cannot start with a number
Can contain letters, numbers, and underscores (A-z, 0-9, and _)
They are case-sensitive (age, Age and AGE are three different variables)
Cannot use any reserved words or keywords
If you have a longer name, use snake_case (preferred), camelCase, or PascalCase.

Variable Casting:
If you want to specify the data type of a variable, it can be achieved by casting.

x = str(5)      # x will be '5'
y = int(5)      # y will be 5
z = float(5)    # z will be 5.0

Get the Type of Variable:
You can get the data type of a variable with the type() function.

x = 5
y = "Refat"
z = True
print(type(x))
print(type(y))
print(type(z))

Assign Multiple Variables
Python allows you to assign values to multiple variables in one line:

x, y, z = "Orange", "Banana", "Cherry"
print(x)
print(y)
print(z)

N.B. String variables can be declared either by using single or double quotes.

Types of Data

In programming, data types are an important concept. Variables can store different types of data, and each type has its own unique capabilities. Python comes with several built-in data types by default, which can be organized into the following categories:
Text Type: str
Numeric Types: int, float, complex
Sequence Types: list, tuple, range
Mapping Type: dict
Set Types: set, frozenset
Boolean Type: bool
Binary Types: bytes, bytearray, memoryview
None Type: NoneType

2. Input and Output

Input:
Python’s input() function allows you to capture input from the user. The input is always treated as a string unless explicitly converted.

name = input("What is your name? ")

Output:
The print() function is used to display information. You can combine strings and variables for a more interactive experience.

age = 25
print("I am", age, "years old.")

# Using f-strings for adding dynamic value:
print(f"I am {age} years old.")

3. Operators

Operators are special symbols or keywords that perform operations on data. They tell the computer what kind of operation or action to perform (eg. +, -, *, /).
Operands are the values or variables that operators work on - They're the data, the operator uses to do its job.
Python divides the operators into the following groups:

Arithmetic operators: Arithmetic operators are used with numeric values to perform common mathematical operations:

x + y      # Addition   
x - y      # Subtraction
x * y      # Multiplication 
x / y      # Division
x % y      # Modulus
x ** y     # Exponentiation
x // y     # Floor division

Assignment operators: Assignment operators are used to assign values to variables.

x = 8
x += 8
x -= 8

Comparison operators: Comparison operators are used to compare two values:

x == y     # Equal
x != y     # Not Equal
x > y      # Greater than
x < y      # Less then
x >= y     # Greater than or equal to
x <= y     # Less than or equal to

Logical operators: Logical operators are used to combine conditional statements:

x < 5 and  x < 10      
# Returns True if both statements are true
x < 5 or x < 4          
# Returns True if one of the statements is true
not(x < 5 and x < 10)   
# Reverse the result, returns False if the result is true

Identity operators: Identity operators are used to compare the objects, not if they are equal, but if they are the same object, with the same memory location:

x is y
# Returns True if both variables are the same object
x is not y
# Returns True if both variables are not the same object

Membership operators: Membership operators are used to test if a sequence is presented in an object:

x in y
# Returns True if a sequence with the specified value is present in the object
x not in y
# Returns True if a sequence with the specified value is not present in the object

Bitwise operators: Bitwise operators are used to compare (binary) numbers:

x & y      
# AND - Sets each bit to 1 if both bits are 1
x | y      
# OR - Sets each bit to 1 if one of the two bits is 1
x ^ y      
# XOR - Sets each bit to 1 if only one of the two bits is 1
x ~ y      
# NOT - Inverts all the bits
x << y     
# Zero fill left shift - Shift left by pushing zeros in from the right and letting the leftmost bits fall off
x <= y     
# Signed right shift - Shift right by pushing copies of the leftmost bit in from the left, and letting the rightmost bits fall off

Congratulations on taking your first steps in Python programming! You've now learned the fundamentals of Variables, Input and Output, and Operators—essential building blocks, that every programmer needs to master. With this knowledge, you’re well on your way to writing more complex and powerful programs.

But don’t stop here! In the next blog of this series, we’ll dive into Control Flow, where you’ll learn how to make your programs more interactive and decision-driven. Stay tuned! If you have any questions, feel free to comment below. Don’t try to memorize the rules—dive in, and you will learn them perfectly by failing.

Happy coding! 🚀

Python Tips to Make Your Code Shine! ✨

Iftakher Hossen — Thu, 02 Jan 2025 19:55:54 +0000

Clean code is essential for making Python applications manageable and scalable. Python values readability, therefore developing clean code is extremely crucial. In this post, I'll present ten ideas for writing cleaner Python code while boosting readability, efficiency, and maintainability. Let's get started:

1. Use Meaningful Variable and Function Names

In Python, variable names should reflect their purpose. Avoid single-character variables or ambiguous names.

Bad Practice:

x = 10

Good Practice:

item_count = 10

2. Keep Functions Small and Focused

Python allows for flexibility, but it’s best practice to keep your functions small and focused. Each function should do one thing.

Bad Practice:

def process_data():
    fetch_data()
    validate_data()
    save_data()

Good Practice:

def fetch_data():
    pass

def validate_data():
    pass

def save_data():
    pass

3. Use Consistent Formatting

Indentation is critical in Python, as it defines code blocks. Stick to 4 spaces per indentation level (PEP 8 standard). A consistent style makes your code easier to follow.

Bad Practice:

if x:
    print("Hello")
else:
print("Goodbye")

Good Practice:

if x:
    print("Hello")
else:
    print("Goodbye")

4. Avoid Magic Numbers

Avoid using arbitrary numbers directly in the code. Instead, use constants with descriptive names.

Bad Practice:

area = 3.14 * radius * radius

Good Practice:

PI = 3.14
area = PI * radius * radius

5. Use Default Parameters

Python allows default values for function parameters. This reduces the need for conditionals and makes your functions more concise.

Bad Practice:

def greet(name):
    if not name:
        name = 'Guest'
    print(f"Hello {name}")

Good Practice:

def greet(name="Guest"):
    print(f"Hello {name}")

6. Minimize Nested Loops and Conditionals

Python’s readability suffers from too much nesting. Reduce nesting with early returns or by breaking down logic into smaller functions.

Bad Practice:

if x:
    if y:
        if z:
            print("Condition met!")

Good Practice:

if not x or not y or not z:
    return
print("Condition met!")

7. Leverage Python's Built-in Functions

Python offers powerful built-in functions and libraries. For common tasks, use these built-in tools rather than writing your logic.

Bad Practice:

squared_numbers = []
for num in range(1, 6):
    squared_numbers.append(num ** 2)

Good Practice:

squared_numbers = [num ** 2 for num in range(1, 6)]

8. Avoid Global Variables

In Python, global variables can lead to unexpected behavior and make debugging difficult. Keep variables within functions, or use classes if necessary.

Bad Practice:

counter = 0
def increment():
    global counter
    counter += 1

Good Practice:

class Counter:
    def __init__(self):
        self.counter = 0

    def increment(self):
        self.counter += 1

9. Use List Comprehensions

List comprehensions are a Pythonic way to create lists. They’re compact, easy to read, and more efficient than using loops.

Bad Practice:

numbers = []
for i in range(1, 6):
    if i % 2 == 0:
        numbers.append(i)

Good Practice:

numbers = [i for i in range(1, 6) if i % 2 == 0]

10. Write Comments and Docstrings

Python developers rely on docstrings and comments for documentation. While the code itself should be self-explanatory, use docstrings to describe functions and classes, and add comments when logic is complex.

Bad Practice:

# Increment counter
counter += 1

Good Practice:

def increment_counter(counter):
    """
    Increments the counter by 1.

    Arguments:
    counter -- the current count to be incremented.
    """
    return counter + 1

11. Handle Exceptions Properly

Instead of letting your program crash when something goes wrong, handle exceptions properly. It improves the stability of your code.

Bad Practice:

num = int(input("Enter a number: "))
print(10 / num)

Good Practice:

try:
    num = int(input("Enter a number: "))
    print(10 / num)
except ValueError:
    print("Invalid input, please enter an integer.")
except ZeroDivisionError:
    print("Cannot divide by zero!")

**12. Avoid Using `args` and `*kwargs` Unnecessarily**

While *args and **kwargs are powerful, they should be used judiciously. Using them unnecessarily can make your function calls confusing.

Bad Practice:

def add_numbers(*args):
    return sum(args)

Good Practice:

def add_numbers(a, b):
    return a + b

13. Use Type Hints

Adding type hints makes the code easier to understand and helps tools like linters and IDEs provide better assistance.

Bad Practice:

def add_numbers(a, b):
    return a + b

Good Practice:

def add_numbers(a: int, b: int) -> int:
    return a + b

14. Limit Side Effects in Functions

Side effects (e.g., modifying global variables or the state of objects) can make code harder to understand. Try to minimize them and keep functions pure, whenever possible.

Bad Practice:

x = 10

def add_ten():
    global x
    x += 10

add_ten()

Good Practice:

def add_ten(x: int) -> int:
    return x + 10

x = 10
x = add_ten(x)

15. Use Python’s `with` Statement for Resource Management

Managing resources such as files, databases, or network connections, use the with statement to ensure they are properly closed or cleaned up.

Bad Practice:

file = open('example.txt', 'r')
data = file.read()
file.close()

Good Practice:

with open('example.txt', 'r') as file:
    data = file.read()

16. Avoid Using `eval()`

eval() can be dangerous because it executes arbitrary code. It's often unnecessary and should be avoided for security reasons.

Bad Practice:

user_input = input("Enter a Python expression: ")
result = eval(user_input)
print(result)

Good Practice:

user_input = input("Enter a number: ")
try:
    result = int(user_input)
    print(result)
except ValueError:
    print("Invalid input, please enter a valid number.")

17. Avoid Repetition (DRY Principle)

Don’t Repeat Yourself (DRY) is a principle that encourages using functions, classes, or other abstractions to avoid redundant code.

Bad Practice:

def calculate_area(radius):
    return 3.14 * radius * radius

def calculate_circumference(radius):
    return 2 * 3.14 * radius

Good Practice:

PI = 3.14

def calculate_area(radius):
    return PI * radius * radius

def calculate_circumference(radius):
    return 2 * PI * radius

18. Use Enumerate Instead of Range

When looping over a list and needing both the index and the item, use enumerate() to avoid manual indexing.

Bad Practice:

for i in range(len(my_list)):
    print(i, my_list[i])

Good Practice:

for i, item in enumerate(my_list):
    print(i, item)

19. Group Related Code Into Classes

If your code has related functions, it’s often a good idea to group them into classes. This encapsulates related behaviors and makes the code more organized.

Bad Practice:

def calculate_area(radius):
    return 3.14 * radius * radius

def calculate_circumference(radius):
    return 2 * 3.14 * radius

Good Practice:

class Circle:
    PI = 3.14

    def __init__(self, radius):
        self.radius = radius

    def calculate_area(self):
        return self.PI * self.radius * self.radius

    def calculate_circumference(self):
        return 2 * self.PI * self.radius

Writing clean code in Python is not just about following best practices—it’s about making your code easy to read, maintain, and scale. By applying these tips, you’ll be on your way to writing Python code that is both efficient and clean. The goal is to keep your code simple, readable, and efficient, and always strive to follow Python’s core philosophy: Readability counts.

What tips do you use to keep your Python code clean? Share your thoughts in the comments!

After almost two years of being MIA, I’m back in the game! Ready to dive into Python with Django, and this time, I’m bringing the blog along for the ride. Buckle up—it's gonna be a bumpy (and hopefully not too buggy) journey. Let's learn, laugh, and make some magic happen!

Introduction to Mongoose

Iftakher Hossen — Fri, 04 Mar 2022 14:20:33 +0000

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB. Mongoose is a JavaScript object-oriented programming library that creates a connection between MongoDB and the Express web application framework.

MongoDB is a schema-less NoSQL document database. It means you can store JSON documents in it, and the structure of these documents can vary as it is not enforced like SQL databases. This is one of the advantages of using NoSQL as it speeds up application development and reduces the complexity of deployments.

Mongoose uses schemas to model the data an application wishes to store and manipulate in MongoDB. This includes features such as type casting, validation, query building, and more.
The schema describes the attributes of the properties (aka fields) the application will manipulate. These attributes include such things as:

Data type (e.g. String, Number, etc.).
Whether or not it is required or optional.
Is it’s value unique, meaning that the database is allowed to contain only one document with that value in that property.

A model is generated from the schema and defines a document the application will operating on. More precisely, a model is a class that defines a document with the properties and behaviors as declared in our schema. All database operations performed on a document using Mongoose must reference a model.

A schema definition can be as simple as the following code snippet:

var userSchema = new mongoose.Schema({
  firstname: String,
  lastname: String,
  createdOn: Date
});

A document in MongoDB created from this schema would be like the following code snippet:

{ "__v" : 0, "_id" : ObjectId("51412597e8e6d3e35c000001"),"createdOn" : ISODate("2022-03-04T08:29:19.866Z"),"firstname" : "Iftakher", " lastname " : "Hossen" }

What is Mongoose good for?

Mongoose is primarily useful when you want to interact with structured data in MongoDB. It allows you to define a schema for your data, so that you can interact with your MongoDB data in a structured and repeatable way. Mongoose helps with many common MongoDB tasks, and removes some of levels of complexity from the nested callbacks you find yourself getting lost in with the native MongoDB driver. Mongoose also returns the data to you as a JSON object that you can use directly, rather than the JSON string returned by MongoDB.
Mongoose also has a whole suite of helper functions and methods that we'll explore throughout the subsequent chapters of this book.

What Mongoose is not ideally suited for

Mongoose is probably not the answer for you if you are primarily working with the following:

Schema-less data
Random documents
Pure Key-Value pairs

The cornerstones of Mongoose

There are two aspects of Mongoose that we need to introduce you to before going much further:

Schemas
Models

Terminologies

Collections - ‘Collections’ in Mongo are equivalent to tables in relational databases. They can hold multiple JSON documents.
Documents - ‘Documents’ are equivalent to records or rows of data in SQL. While a SQL row can reference data in other tables, Mongo documents usually combine that in a document.
Fields - ‘Fields’ or attributes are similar to columns in a SQL table.
Schema - While Mongo is schema-less, SQL defines a schema via the table definition. A Mongoose ‘schema’ is a document data structure (or shape of the document) that is enforced via the application layer.
Models - ‘Models’ are higher-order constructors that take a schema and create an instance of a document equivalent to records in a relational database.

The three main advantages of using Mongoose versus native MongoDB are:

MongooseJS provides an abstraction layer on top of MongoDB that eliminates the need to use named collections.
Models in Mongoose perform the bulk of the work of establishing up default values for document properties and validating data.
Functions may be attached to Models in MongooseJS. This allows for seamless incorporation of new functionality.
Queries use function chaining rather than embedded mnemonics which result in code that is more flexible and readable, therefore more maintainable as well.

The net result of these is the simplification of database access from applications. The main disadvantage of Mongoose is that abstraction comes at the cost of performance compared to that of native MongoDB.

Mongoose Schema

As we saw earlier, a schema is fundamentally describing the data construct of a document. This schema defines the name of each item of data, and the type of data, whether it is a string, number, date, Boolean, and so on.

var userSchema = new mongoose.Schema({
  name: String,
  email: String,
  createdOn: Date,
  verified: Boolean
});

In most scenarios you would have one schema for each collection within the database. Schemas are a powerful aspect of Mongoose, which can also be extended with helper functions and additional methods. But we'll describe more about that in a later chapter.

Mongoose models

A model is a compiled version of the schema. One instance of the model will map to one document in the database. Creating a User instance based on the schema userSchema is a one line task:

const User = mongoose.model('User', userSchema);

It is the model that handles the reading, creating, updating, and deleting of documents.

Visit Mongoose.js official site to read the documentation and know more in detail.

In this tutorial, I try to clarify What is Mongoose and it's features. If I made any mistakes pardon me! And I'd love to hear from you If you have any suggestions for me. Thank you for reading this blog!

Find me on Github and Portfolio or Send a Mail

Follow for more blogs!

Cope with Next.js

Iftakher Hossen — Fri, 04 Mar 2022 08:40:33 +0000

In the previous tutorial we learn about Next.js basics. Today we will learn about the core features of Next.js.

The Evolution of Next.js

Next.js is a React framework for developing single-page JavaScript applications. Today, Next.js is frequently associated with the Jamstack methodology for developing web applications. When it was launched in early 2016, however, it was originally just for server-side rendered apps. At the time, what made Next.js unique was that it handled both the frontend and the backend of your application and both were built using JavaScript and React. This allows developers to build full-stack applications using a single language and toolset while delivering an improved user experience that typically results in a faster initial render of the page. Next.js also gained popularity because it simplified building full-stack applications using React. It provided automatic routing for pages and built-in methods for server-side rendering (SSR) and data fetching. All of these features still exist in Next.js today, but many new features have been added and the existing ones have been dramatically enhanced. In particular, Next.js now handles multiple types of rendering methods. The simple fact is that Next.js has become so popular mainly because it solved the age-old issue developers had with JavaScript rendering in the browser itself. By doing a lot of the work on the server-side, the overall end-user experience is greatly improved – but at the same time, Next.js still allows that CSR.

The Core Features of NEXT.JS

Hot Code Reloading - Next.js reloads the page when it detects any change saved to disk.
Automatic Routing - Any URL is mapped to the filesystem, to files put in the pages folder, and you don't need any configuration (you have customization options of course).
Single File Components - Using styled-jsx, completely integrated as built by the same team, it's trivial to add styles scoped to the component.
Server Rendering - You can render React components on the server-side, before sending the HTML to the client.
Automatic Code Splitting - Pages are rendered with just the libraries and JavaScript that they need, no more. Instead of generating one single JavaScript file containing all the app code, the app is broken up automatically by Next.js in several different resources. Loading a page only loads the JavaScript necessary for that particular page. Next.js does that by analyzing the resources imported. If only one of your pages imports the Axios library, for example, that specific page will include the library in its bundle. This ensures your first-page load is as fast as it can be, and only future page loads (if they will ever be triggered) will send the JavaScript needed to the client. There is one notable exception. Frequently used imports are moved into the main JavaScript bundle if they are used in at least half of the site pages.
Ecosystem Compatibility - Next.js plays well with the rest of the JavaScript, Node, and React ecosystem.
Prefetching - The Link component, used to link together different pages, supports a prefetch automatically prefetches page resources (including code missing due to code splitting) in the background.
Dynamic Components - You can import JavaScript modules and React Components dynamically.
Static Exports - Using the next export command, Next.js allows you to export a fully static site from your app.
TypeScript Support - Next.js is written in TypeScript and as such comes with excellent TypeScript support.

PROS & CONS of NEXT.JS

PROS

Automatic Static Optimization.
Adaptability.
Security.
Faster Dev Cycle.
Truly Cross-Platform.
Short Loading Times.
Huge Support.
TypeScript Support.
Zero Configuration.
Great user experience.
Great SEO.
Flexible UI & UX.

CONS

Downside Of Flexibility.
It Does What It Does.
Lacks A Manager.
Poor plugin ecosystem.
No built-in state manager.

Benefits of Next.js for online businesses

How Next.js can positively impact your business results and help you push your ideas further?

Faster time to market.
Enhanced User Experience.
Increased organic traffic.
Fully omnichannel.
Support on demand.
Increased conversion rate.
Community support.

Summary

It doesn’t matter if you are planning to build a huge and demanding app to serve millions of users, nor if you are a growing webshop on Shopify. In both cases, you can use the advantages of modern web technology to make your business more efficient online. Uplift your page speed, SEO, and User Experience, and remember that technologies such as Next.js are making the web a better, cleaner, and more user-centric place. And that will always be favorable, not only by Google but, most importantly, by users.

Next.js Tutorials for beginners

Visit Next.js official site to read the documentation and know more in detail.

In the next tutorial, we will try to build a simple project with Next.js to clarify the project structures and how to start!
I try to cover the features, PROS, CONS, and the benefits of Next.js. If I made any mistakes pardon me! And I'd love to hear from you If you have any suggestions for me. Thank you for reading this blog!

Find me on Github and Portfolio or Send a Mail

Follow for more blogs!

Go next with Next.js

Iftakher Hossen — Fri, 25 Feb 2022 11:09:28 +0000

Today in this blog we will learn about Next.js. Nowadays Next.js is the most popular framework of React.

Next.js is a React framework created by Zeit. it's an open-source development framework built on Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.

Quite merely, Next.js is a React framework for developing single-page JavaScript applications. The benefits of this framework are numerous, both for our clients' applications as well as for our development team. You can write both frontend and backend in one folder in Next.js. It has many great features and advantages, which can make Next.js your first option for building your next web application. It's also SEO friendly.

Popular Apps like Tiktok, Hulu, Hashnode, Twitch Mobile, Starbucks, Uber, Netflix, Binance, Ticket Master, AT&T, Deliveroo, Docker, Realtor, Marvel, Typeform, Pusher, SumUp, NuBank etc. are made with Next.js. There are more apps/websites are creating daily with Next.js beacause of it's advance features.

Use Next.js if you want to build websites such as:

Large multi-user websites
Client-side rendered applications (SPA/MPA)
Big eCommerce websites
Web portals

However, you can also use Next.js to build simpler websites, which is also possible with Gatsby.

These websites include:

B2B and SaaS websites
Finance websites

Next.js websites includes:

High Performance
Scalability
Constant Rendering
SEO Friendly

Start with Next.js

First of all for creating a Next.js Project type the following code:

npx create-next-app@latest
# or
yarn create next-app

Or, you can create a Typescript project with the following code:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

Options:

create-next-app comes with the following options:

--ts, --typescript - Initialize as a typescript project.
-e, --example [name]|[github-url] - An example to bootstrap the app with from the following URL you provide.
--example-path [path-to-example] - You can specify the path for the specified branch you want as an example.
--use-npm - Explicitly convey the CLI to bootstrap the app using npm. To bootstrap using yarn, we suggest running yarn create next-app

Why use `create-use-next-app`

create-next-app allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes several benefits:

Interactive Experience
Zero Dependencies
Offline Support
Support for Examples
Tested

Next.js built-in components

Next.js has some built-in components to use React-Router, HTML, Image, Script, etc. in Next.js. They are -

next/router - If you wanted to access the router object inside any functional component in your app, you can use the useRouter() hook, You can use React Router's features by using this component. Take a look at the following example:

import { useRouter } from 'next/router';

const AboutPage = () => {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click me
    </button>
  )
}

export default AboutPage;

next/link - It's usually used to create Client-side transitions between routes via the Link component exported by next/link. You can create dynamic link with this component. Generally it's an alternate of or react-router tag. Use this following code to create Link component:

import Link from 'next/link';

<Link href="https://iftakher-hossen.vercel.app/">Visit</Link>

next/image - It's usually used to show images in Next.js. Using this component we can get optimized & preloaded pictures on our website. You can use this with the following code:

import Image from 'next/image';

<Image src="https://i.ibb.co/GnnCPMP/bg.jpg" alt="Nature" width="250px" height="150px" />

Here you always have to use width and height either it will show an error. If you use an image from an external link you have to describe it at next.config.js like:

module.exports = {
  images: {
    domains: ['i.ibb.co'], //your-external-link-hostname
  },
}

next/script - Next.js has a built-in component to load an external scripts. Such as Stripe.js. Take a look at the following codes:

import { useState } from 'react';
import Script from 'next/script';

const Payment = () => {
  const [stripe, setStripe] = useState(null);

  return (
    <div>
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={() => {
          setStripe({ stripe: window.Stripe('ih_dev_5555') })
        }}
      />
    </div>
  )
}

export default Payment;

next/head - It's used for appending elements to the head of the page. You can add separate titles, various kinds of CSS/scripts. Take a look at the following codes:

import Head from 'next/head';

<Head>
   <title>My page title</title>
   <meta name="viewport" content="initial-scale=1.0", width="device-width" />
</Head>

next/amp - AMP is an advanced features of NExt.js. With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React. You can read more about AMP in the official amp.dev site.
next/server - next/server is a module that provides several exports for server-only helpers, such as middleware. You can use features like - NextMiddleware, NextRequest, NextFetchEvent, NextResponse, Public Methods & Static Methods.
take a look at official documentation to know more!
next/streaming - The experimental next/streaming module provides streaming-related APIs to port the existing functionality of Next.js apps to streaming scenarios and reduce the usage of React Server Components. take a look at official documentation to know more!
Edge Runtime - The Next.js Edge Runtime is based on standard Web APIs, which are used by Middleware. There are many kinds of Runtime API. Such as Globals, Base64, Encoding, Environment, Fetch, Streams, Timers, Web, Crypto, Logging.
The Edge Runtime has some restrictions including Native Node.js APIs are not supported and JavaScript language features are disabled, and will not work eval & new Function(evalString).
Data Fetching - You can fetch data in Next.js using 4 built-in components. Such as getInitialProps, getServerSideProps, getStaticPaths, getStaticProps.
Static Optimization Indicator - Next.js has features like when a page qualifies for Automatic Static Optimization they show an indicator to let you know. This is helpful since automatic static optimization can be very beneficial and knowing immediately in development if the page qualifies can be useful. But in some cases, this indicator might not be useful, like Electron Applications. Then we have to disable it from next.config.js like the following code:

module.exports = {
  devIndicators: {
    autoPrerender: false,
  },
}

next.config.js - Edit in next.config.js this file For custom advanced configuration of Next.js. next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.

Visit Next.js official site to read the documentation and know more in detail.

In the next tutorial, we will learn the core features of Next.js.

I try to cover the basics of Next.js. If I made any mistakes pardon me! And I'd love to hear from you If you have any suggestions for me. Thank you for reading this blog!

Find me on Github and Portfolio or Send a Mail

Follow for more blogs!

Explore Express.js

Iftakher Hossen — Fri, 24 Dec 2021 17:55:55 +0000

Today we will learn about the Node.Js web application framework Express.Js.

What is Express.js?

Express.js is a free, open-source, simple, tiniest web application framework of Node.js. It is used for backend design & development. Express.js requires only JavaScript that’s why it’s easier to build single-page, multiple-page, hybrid web applications & API without any effort. Express.js supports MVC architecture.

Why we should use Express.js?

JavaScript has Node.js for backend development. Node.js has many frameworks to make easier backend development. Such as Express.js, Koa.js, Meteor.js, Nest.js, Socket.io, Total.js, etc. So, if you are a JavaScript developer then it’s easier for you to use Express.js for backend development. Express.js offers simplicity, flexibility, efficiency, minimalism, and scalability that’s why it’s more popular.

Features

Express.js has many features. Let’s learn about them -

Middleware - Middleware is a function that is used to get access request and response objects.
Faster server-side development - Express.js provides many readymade functions from Node.js it’s made easier to develop.
Routing - Express.js provides an admiringly advanced routing mechanism.
Templating - Template engines allow you to build dynamic content in web applications.
Debugging - Express.js has a debugging mechanism that can find bugs easily.

Advantages

Express.js is fast & easier to learn.
It’s easier to configure & customize.
Huge community support.
Supported by Google V8 Engine.
Easy to connect with databases such as MongoDB, MySQL, etc.
Easy to integrate with different templates.
Allows you to define routes based on HTTP methods & URLs.
Easy to serve static files and resources.
Flexible middleware module.

Disadvantages

There are problems with the callback or event-driven nature but the last update of Node.js brings async/await that prevents this problem.
Client request problem with middleware system.

How to Install Express

Install with npm - npm install express -g

How to Start

First, create a directory named simpleExpress. Change to it, and run npm init. Then install express as a dependency. In the directory create a file named index.js and write the following code.

Hello World Example with Express.js

Run the app with the following command - $ node index.js
Then open the browser and visit “localhost:5000” to see the output.

Visit Express.js official site to read documentations and know more in details.

Thanks for reading this tutorial!

Optimize React Application Performance

Iftakher Hossen — Thu, 23 Dec 2021 20:16:39 +0000

Today we will learn about Optimize React Application Performance in this tutorial.

React.Js is an open-source JavaScript UI library for building user interfaces. Nowadays React is the most popular for frontend design. It’s especially used to building single-page applications. You can create large applications in React that can transform data without reloading the page. The main purpose of React is fast, scalable, and simple. Literally, React has the ability to use several clever technics to minimize costly DOM operations required to update the UI. But for some large applications, you need to optimize your React application performance. There are several ways to speed up your React applications, let’s learn about them -

Immutable Data Structures - Data immutability is an inflexible way of writing code. It has many benefits such as Zero side effects, Easier to track changes, Simpler to create, test and use.
Production Build - If you are experiencing performance problems in React assure that you are testing with the minified production build.
Dependency Optimization - It means removing the methods/functions that you never used in your application. It will optimize the bundle size.
Memorize React Components - Use the useMemo() hook to memorize/store the expensive functions result to use when the same input occurs again.
Animations - There are many packages/libraries for Animations. So don’t use CSS Animations instead use those libraries or packages.
Avoid using Index as key - Using the key as the index can show wrong data as it is being used to identify DOM elements.
React.PureComponent - React.PureComponent optimizes components by reducing wasted renders.
Virtualize Long List - It’s a way to improve performance when rendering a long list of data.
Server-Side Rendering - Server-side rendered applications have a better user experience because users receive viewable content faster than client-side rendered applications.
Lazy Loading - If you use numerous images in an application then you should use Lazy Loading to avoid rendering all of the images at once to improve the page load time.
Multiple Chunk Files - If you split your large files into smaller files it will help the browser to catch less and reduce loading time.
Reselect in Redux - It’s a simple selector library for Redux, it’s used for building memorized selectors.
Using a CDN - CDN delivers static content more quickly and efficiently.
Web Worker - JavaScript is single-threaded. To prevent slowed/ blocked down, web workers run a script in background threads. We can create & run it parallel to the main thread without hampering the UI flow.
useCallback() - It’s same like useMemo() but useMemo() memorize the results and useCallback() memorize the function declarations.

There are many ways to optimize a react application. You have to know the core concepts about React after optimization. Optimization without measuring is almost premature, so you should measure performance first so that you can easily figure it out.

Thanks for reading this tutorial.

Explore API

Iftakher Hossen — Wed, 22 Dec 2021 17:48:55 +0000

Today we will learn What is an API? And The purpose of API & CRUD Operations.

What's an API

API stands for Application Programming Interface. It’s a way to connect two applications for talking with each other. It helps you to embed content on your website from any website in a more efficient way. API is simple, flexible, and easier to use. The main purpose of the API is to create communication between two applications. API lets you call to send or receive information. The communication is done by JSON. We fetch data with API requests in applications. API request has 4 components. They are Endpoint, Header, Method & Data. After calling those individually we can build an API request.

CRUD Operations

CRUD Operations stands for Create, Read, Update & Delete operations. The fours basics and important methods in database operations. The purpose of CRUD operations is to modify the data in an application. Let’s explore CRUD Operations:

GET - GET method allows you to get information from the source/database.
POST - POST method allows you to add some information to the source/database.
PUT - PUT method allows you to update the existing information to the source/database.
DELETE - DELETE method allows you to delete existing information from the source/database.

JSON

JSON stands for JavaScript Object Notation. It’s used to represent data on the server. It’s easy to read for humans and computers. Let’s see an example:

Types of API

There are three types of API:

Open API - Open API means an API that is free to use and everyone can use it.
Partner API - Partner API means an API that makes a connection between the server and the clients.
Private API - Private API means a secure API that can only be used for internal uses like payments.

API is a powerful tool for making connections between client and server applications. API provides more benefits like security, speed, & scalability for eCommerce applications. API helps developers send data to clients and is used every day in today’s world.

Thank you for reading this!

JavaScript Array Related Methods

Iftakher Hossen — Tue, 21 Dec 2021 18:00:04 +0000

In JavaScript, Array is a variable that stores multiple elements. We used Array to store the list of elements and access with a single name. An array is a reference type, which defines it’s a subclass of Object.

Example of Array:

There are many array methods in JavaScript. Let’s know about them:

isArray(): isArray() method is used to know if the object is an array or not. When it returns true that means it’s an Array and when it returns false that means it’s not an Array.
concat(): concat() method is used to concat/join two or more arrays together. After using this method it returns the new array. It never changes the existing arrays.
every(): every() method is used to execute a specific function for every element of an array. If the function returns true it clarifies all the elements are true and if the function returns false it clarifies all the elements are false.
filter(): filter() method is used to filter out some elements in a specific condition. It creates a new array with the results. It returns all the elements that fulfill the condition.
find(): find() method is used to find an element in a specific condition. It returns the first element that fulfills the condition.
findIndex(): findIndex() method is used to find out the index of an element that fulfills the condition. If there’s no match it returns -1.
forEach(): forEach() method is used to execute a function for each array element.
indexOf(): indexOf()is used to get the index of a specific value. If there’s no match it returns -1.
join(): join() method is used to return the array as a string.
map(): map() method is used to execute a function for each array element.
lastIndexOf(): lastIndexOf() is used to get the last index of a specific value. If there’s no match it returns -1.
pop(): pop() method is used to delete the last element of an array.
push(): push() method is used to add an element to the end of an array.
Reduce(): Reduce() method is used to execute a reducer function for an array element to calculate the numbers of an array.
Reverse(): Reverse() method is used to reverse the order of the items of an array.
shift(): shift() method is used to delete the first element of an array.
slice(): slice() method is used to get specific elements in a new array.
sort(): sort() method is used to sort the elements of an array in alphabetical and ascending order.
splice(): splice() method is used to delete a specific element of an array.
unshift(): unshift() method is used to add an element to the beginning of an array.

Thank you for reading this!

Media Query (CSS)

Iftakher Hossen — Tue, 21 Dec 2021 15:20:29 +0000

What is Media Query

Media Query is introduced on CSS3. Media Query is a very useful tool. Media Query in CSS is used to make responsive designs for various platforms. We use the @media rule to include a block of CSS properties only if a particular condition is true. You have to mention breakpoint's, it defines where certain parts of the design will behave differently. Media queries can be used to check many things, such as:

Width and height of the viewport
Width and height of the device
Orientation (Landscape/Portrait)
Resolution

You can also use media queries to specify that specific styles are only for printed documents or for screen readers (media-type: print, screen, or speech). Media queries can also be used to change the layout of a page depending on the orientation of the browser.

Structure:

Demo:

Meaning of and, only & not:

And : For using two or more media query breakpoints or media types.
Only : For using media query on an Older version of browsers.
Not : For inverting the meaning of an entire media query.

You can use external CSS for different media to keep CSS file's more clean and organized.

Typical Device Breakpoints

There are tons of screens and devices of different sizes, so it is tough to create an exact breakpoint for each device. To keep things simple you could target five groups:

Browser Support

The table data define the first version of the browser support the Media Query -

DEV Community: Iftakher Hossen

The Building Blocks of Python: Variables, I/O, and Operators

1. Variables and Data Types:

What is Variable?

Types of Data

2. Input and Output

3. Operators

Python Tips to Make Your Code Shine! ✨

1. Use Meaningful Variable and Function Names

2. Keep Functions Small and Focused

3. Use Consistent Formatting

4. Avoid Magic Numbers

5. Use Default Parameters

6. Minimize Nested Loops and Conditionals

7. Leverage Python's Built-in Functions

8. Avoid Global Variables

9. Use List Comprehensions

10. Write Comments and Docstrings

11. Handle Exceptions Properly

12. Avoid Using args and *kwargs Unnecessarily

13. Use Type Hints

14. Limit Side Effects in Functions

15. Use Python’s with Statement for Resource Management

16. Avoid Using eval()

17. Avoid Repetition (DRY Principle)

18. Use Enumerate Instead of Range

19. Group Related Code Into Classes

Introduction to Mongoose

What is Mongoose good for?

What Mongoose is not ideally suited for

The cornerstones of Mongoose

Terminologies

The three main advantages of using Mongoose versus native MongoDB are:

Mongoose Schema

Mongoose models

Cope with Next.js

The Evolution of Next.js

The Core Features of NEXT.JS

PROS & CONS of NEXT.JS

PROS

CONS

Benefits of Next.js for online businesses

Summary

Go next with Next.js

Use Next.js if you want to build websites such as:

Start with Next.js

Options:

Why use create-use-next-app

Next.js built-in components

Explore Express.js

What is Express.js?

Why we should use Express.js?

Features

Advantages

Disadvantages

How to Install Express

How to Start

Optimize React Application Performance

Explore API

What's an API

CRUD Operations

JSON

Types of API

JavaScript Array Related Methods

Media Query (CSS)

What is Media Query

Structure:

Demo:

Meaning of and, only & not:

Typical Device Breakpoints

Browser Support

**12. Avoid Using `args` and `*kwargs` Unnecessarily**

15. Use Python’s `with` Statement for Resource Management

16. Avoid Using `eval()`

Why use `create-use-next-app`