DEV Community: Namima Islam

Why Flask Is One of the Most Popular Web Frameworks Today

Namima Islam — Fri, 28 Feb 2025 17:35:59 +0000

Introduction

Flask is a flexible web framework for Python that makes it easy to build web applications. It was designed to be simple and easy to use. Flask provides the essential tools for handling routes, requests, and templates.

Whether you're creating a small personal project, a REST API, or a full-fledged web application, Flask gives you the freedom to structure your code however you like. It's minimalist design, combined with powerful extensions, makes it a favorite among developers who want speed, scalability, and ease of use.

In this blog, we'll explore why Flask is one of the most popular web frameworks today and how it can help you build efficient and scalable web applications with minimal hassle and maybe we'll uncover why the logo for Flask looks like a Jalapeño.

What Can Flask be used for?

Flask framework is versatile, it gives developers the ability to build a range of web applications. Developers can create things like simple prototypes and full web services. Its simple and flexible design has made it convenient for developers to use it for building web applications, develop RESTful APIs, prototyping and MVPs, Data Driven Applications and Automating and Scripting. Here is how developers may use Flask for each case.

Building Web Applications – Developers can create interactive websites with dynamic content using Flask’s built-in routing and templating features.

Developing RESTful APIs – Flask is widely used to create APIs for mobile apps, frontend applications, and micro-services due to its simplicity and ability to handle JSON based requests.

Prototyping and MVPs – Startups and developers often use Flask to quickly build and test ideas without the complexity of a full-stack framework.

Data Driven Applications – With integration capabilities for databases like SQLite, PostgreSQL, and MySQL, Flask is useful for applications that require data storage and retrieval.

Automation and Scripting – Flask can be used to create lightweight automation tools or dashboards for data visualization.

How can we implement Flask?

Flask is used with Python, so to implement Flask you will need to set up a Python environment. Once installing Flask you will have to define routes to handle different web requests. You can start with a single file and late scale up with a modular structure. Flask also supports template rendering through Jinja, a template engine for Python projects, this makes it easier to generate dynamic web pages.

To deploy your Flask application you can use WSGI servers. For database management and authentication Flask-SQLAlchemy and Flask-Login can we used.

Conclusion

We have dived into the basics of Flask and what it can be used for and how to implement it. Flask’s ability to adapt to different use cases, whether for personal projects or large scale applications, is one of the key reasons it remains a popular choice in web development today.

Now, to answer a really important question. Is the logo for Flask a jalapeño?

Many developers have debated whether the Flask logo looks like a jalapeno, but in reality it's a stylized drinking horn!

References

Cover Image

Content

Flask Logo Origin

Complete Python Object Oriented Programming Guide

Namima Islam — Mon, 02 Dec 2024 21:32:32 +0000

So you want to learn Python? Well, you've come to the right place! This blog will cover everything a beginner Python student or developer needs to know about Object Oriented Programming in Python.

But first, what is python?

Python is a powerful, high-level programming language that emphasizes simplicity and readability. It includes built-in data structures like lists and dictionaries, and supports dynamic typing, which makes it ideal for rapid application development, scripting, and prototyping.

What can Python do?

Python is great for building server-side applications, web scrapers, games, and command-line interfaces (CLIs). It can also read and write files, handle network requests and send responses, and connect too databases to access and update data. Whether you're building web servers, automation scripts, or creating data driven applications, Python is the perfect language for it!

One of the main features of python is OOP. OOP stands for object oriented programming, it allows developers to structure their code in a way that makes it modular and reusable. In Python, OOP revolves around objects and classes. An object is an instance of a class, which serves as a blueprint that defines its structure and behavior. Objects represent real world entities, like a book or car and uses data and functionality to perform actions. Objects store data in the form of attributes (also called properties) and methods (functions associated with an object).

OOP is all about reusing and organizing code by grouping related functionality together, making it easier to manage, maintain, and extend.

The key concepts of OOP in Python include:

init() Method: This special method is called when an object is created, allowing for the initialization of attributes.
Attributes: The properties or data associated with an object.
Classes and Instances: A class is a blueprint for creating objects. An instance is a specific object created from a class.
Instance Methods: Functions that belong to an object and operate on its data.
Instance Variables: Variables that are unique to each instance of the class.

Now that we covered what the key concepts of Python are, lets' dive into how we can use them.

init():

Whenever we have a new object, we have to initialize it. To initialize we use the double underscore methods(also known as dunder method). The init() method is a convention, it is a special method in Python classes, commonly referred to as a constructor. It's called automatically when an object is created from a class. This method allows you to initialize the object's attributes with values when the object is instantiated.

Attributes:

An attribute is a variable that belongs to an object. Attributes are typically defined inside the init() method and are associated with individual instances. They represent the state of the object and can be accessed and modified throughout the object's lifecycle.

In the example above, the init method is initializing the parameters author, magazine, title, and below the init, the attributes are being defined using self.

Classes and Instances:

A class is like a blueprint for creating objects. A Python class defines the structure and behavior of its objects. Once the class is defined, you can create individual instances also called objects based on that blueprint.

An instance is also referred to as an object. An instance is a single occurrence of an object that refers to the individual objects produced from the class.

In my example below, class Article is the class, it is creating the blueprint for creating objects. Article1 is my instance of the class, it is the object that has been created from the class.

Instance Methods:

Instance methods are functions defined inside a class that operate on an instance of that class. These methods can access the instances attributes through the self parameter and modify the instance's attributes. They allow objects to perform actions and interact with their own data.

In the example above, the summary method defines our instance method because it operates on an individual instance of the Article class. It's using self to access the instances attributes and uses string interpolation to create the formatted string.

Instance Variables:

Instance variables are attributes that are unique to each instance of a class. They store data specific to that object. Instance variables are accessed using dot notation.

In the example above, our instance variable word_count is using dot notation and is tracking the word count of the article.

Conclusion,

Object Oriented Programming is a fundamental part of python. It uses objects to make python programs more dynamic and re-usable. If you follow the steps above you'll be a pro at OOP in no time!

Python Error Types Explained: Troubleshooting for Beginners

Namima Islam — Thu, 14 Nov 2024 18:53:21 +0000

Python is an interpreted, object-oriented programming language. Its high-level built-in data structures and dynamic typing make it highly useful for the rapid development of new applications, as well as for scripting or "glue" code that integrates components written in different languages.

Python's simple, easy-to-learn syntax emphasizes readability, which helps reduce the cost and complexity of long-term program maintenance. Additionally, Python's rich set of error types simplifies the debugging process, enabling coders to identify and resolve issues more efficiently.

Error Types In Python

Python error types are essential for diagnosing problems, handling unexpected situations, and ensuring code quality.

Some common error types in Python are, syntax errors, logic errors, assertion errors, index error, key error, name error, type error.

Error types are like clues that guide you on how to fix the problem. Here are some examples of the different error types.

Syntax errors

Syntax errors are the result of incorrect syntax, kind of like a typo.

Example:

Here, python is saying that on line 115 there is an extra or misplaced character. The "*" character is causing Python to raise a syntax error because it’s unexpected in this context. Syntax errors can include missing colons, unclosed parentheses, or unmatched quotation marks.

Logic Errors

Logic errors are not perceived as errors by Python. To find a logic error a programmer will need to utilize tools like pdb.

One instance of a logic error, is if a function is meant to add two numbers but it is subtracting them instead, Python won’t raise an error, but the output will be incorrect.

Assertion errors

An assertion error, is raised when an assert statement fails, meaning that an expected condition was not met.

Example:

Assertions are commonly used in testing and debugging to ensure certain conditions are met during runtime. If an assertion fails, Python immediately raises an error with a custom message, which can be helpful for tracking down logical issues.

Index error

Index errors are raised when you try to access an element at an index past the end of the list.

Example:

In the example above we are trying to access the value 10 but it is not available in the list.

Key error

A key error is raised when trying to access a dictionary key that doesn’t exist. This happens if you reference a key not present in the dictionary.

Name error

A name error occurs when you try to use a variable or function name that hasn’t been defined or is out of scope.

Type error

A type error is when an operation or function is applied to an object of the wrong type.

In the example above we have a type error because "123" and 123 are different data types.

Conclusion:

In conclusion, understanding Python errors might seem intimidating at first but understanding these common types can simplify the debugging process and improve your coding confidence. Each error type serves as a clue, guiding you toward a solution and helping you write more robust code. The next time you encounter an error, use it as a learning tool, it’s just Python’s way of showing you the path to a more refined program. Python encompasses a broader range of error types than those mentioned above. Attached below is a comprehensive list of additional error types.

References:
Cover Photo: https://realpython.com/python312-error-messages/

Information: https://realpython.com/python312-error-messages/

List of Error Types: https://docs.python.org/3/library/exceptions.html

React "State" for Beginners

Namima Islam — Sun, 20 Oct 2024 17:23:38 +0000

React has become a powerful tool amongst developers, it's used by large companies like Facebook, Tesla, Airbnb and many more. React has revolutionized the way developers create dynamic web applications. One of the core concepts that makes React so powerful is state.

But what is state?

State refers to the data in a component, such as strings, arrays, objects, or even functions, that determines how the component behaves and renders. It can store anything you want to keep track of in your application, such as user inputs, API responses, or toggled settings. Unlike a prop, state is dynamic and changes as the user interacts with the webpage and can be changed within a component. A prop is read-only and is information passed down from a parent to a child and can be any data type(strings, numbers, objects, functions). Some examples of what makes state change is user inputs, responses from APIs, and toggling.

State is mutable, it lets us maintain and update information within a component independently, without needing the parent component to send updated data. With state, you can control what is displayed on the screen based on changes in data or user activity, making your web applications feel more responsive and engaging.

State seems incredibly useful, but how can we implement it?

Using State

There are several ways State can be stored and managed. Starting with the hook useState, useState is a special function that gives a component the ability to track dynamic data and automatically re-renders the component whenever the state changes.

Example:

Explanation: In the example above, useState must first be imported from React to manage the components state. This is essential for functional components.

Initializing and Setting State

After state has been imported, we must declare, initialize and set. In React, initializing is defining and setting the values for a components state when it is created, this determines how the component renders and behaves.

Example:

Explanation: Our example utilizes array de-structuring, we have a state variable called isDarkMode with the value of true, which means that when the App component first renders, the isDarkMode variable will be initialized to true. isDarkMode being initialized to true means the application will start in dark mode. isDarkMode is the current state value and setIsDarkMode is used to update the isDarkMode state.

To set our state, we must use the keyword set. In our example it is referred to as "setIsDarkMode". Our toggleDarkMode function is changing the value of isDarkMode between true and false each time it is called. Our setIsDarkMode(current => !current) updates the state by calling the setIsDarkMode function, current is the current state value of isDarkMode when setIsDarkMode is called, !current takes the value of current which is a boolean(true or false) and negates it. If current is true, !current evaluates too false, but if current is false, !current evaluates too true.

To summarize, the state variable isDarkMode with a value of true using the useState hook, the setIsDarkMode function is used to update this state. The toggleDarkMode function outlines the logic for toggling the value of isDarkMode, ensuring that the component will re-render with the new value whenever it is called.

There are two approaches when setting state in React. You can pass a new value directly to the setter function, which will replace the current state value or by using a functional form.

When you need to update the state based on its current value, it's better to use the functional form of the setter function. In this form, you pass a function to the setter that takes the current state value as an argument and returns the new state value. For example, setIsDarkMode(current => !current) ensures that the state update uses the most recent value of isDarkMode.

The functional form is built into React's useState hook and helps manage state accurately by ensuring that the internal workings of React always use the most recent state value.

One important thing to note about state and setting state is that setting state is asynchronous, when you call the state update function (like setIsDarkMode), the new state value might not be immediately available for use right after the call.

Now that we imported, initialized and set our state we can render our component.

Rendering the component

Rendering a component is react calling your component to display something on your application. When the state changes, React re-renders the component to reflect the updated state.

Example:

Explanation: First we assign the class, the className of the div element is set based on the value of isDarkMode. If isDarkMode is true, the class will be "App"; if false, it will be "App light". This can be useful for changing the appearance of the application.

isDarkMode={isDarkMode} allows the Header component to access the current state of dark mode, enabling it to render content conditionally based on whether dark mode is active. toggleDarkMode={toggleDarkMode} allows the Header to invoke the toggleDarkMode function, providing a way to change the dark mode state from within the Header component.

Completed code:

Conclusion: Why is state important?

State is crucial to building dynamic webpages in React, it allows components to create, manage and respond to changing data that the user interacts with on a page, it allows you to control what is displayed on the screen based on changes in data or user activity. Mastering state can be complicated, but if you follow the steps above you can create dynamic user interfaces.

If you would like to explore state more in depth, checkout react.dev(https://react.dev/learn/managing-state).

Sources:

Cover Photo: https://www.linkedin.com/pulse/introducing-react-19-revolutionizing-development-muhammad-zain-o7mwf/

Understanding DOM Events

Namima Islam — Mon, 30 Sep 2024 08:35:46 +0000

Ever use a webpage and wonder, "WOAH!! how was I able to click on that image, or how was I able to like that pic!"

Well, I'm here to tell you about this cool thing called DOM Events!

DOM Events is a great way to make a webpage interactive. Some examples of how DOM events make a page interactive is by typing on a page, clicking, tapping, submitting forms and many more!

In this article we will simplify DOM Events and learn how we can use them to create dynamic webpages.

What are DOM Events?

First, let's start by defining what D.O.M. stands for.
DOM stands for - Document Object Model. DOM is a programming interface that allows us to create, change, or remove elements from the document.

An event in Javascript, has the ability to "listen" for what is happening inside the browser.

In simple terms, DOM Events are actions or occurrences that happen in a web page, which JavaScript can detect and respond to. The events allows your web page to be interactive by triggering specific functions when a user interacts with elements on the page.

Listening to an event using addEventListener

For JavaScript to handle an event, we need to tell it to listen for that event. To do this we start by calling the method, addEventListener. We then need to pass in two arguments.

The name of the event to listen for.
A callback function to "handle" the event.

Example:

`img.addEventListener('click', (e) => handleClick(cocktail));`

In the code above, the img references the element, the addEventListener is attaching an event to the element, the click is the type of event it is listening for, the (e) is the event object, followed by the arrow function which is necessary to pass the specific argument to the handle click function(if not used handle click would be called immediately), then we have the handleClick which is the callback function, and once the cocktail is passed to the handleClick the data displays.

The click event is triggered when a user clicks on an element. This event is commonly used on buttons, links, and images. The click event is also a mouse event(will be covered later in the blog).

addEventListener detects and responds to specific events on a webpage, we saw an example using click but what about other events?

DOMContentLoaded is another DOM Event that can be ran with JavaScript Code.

Using DOMContentLoaded

The DOMContentLoaded event ensures your JavaScript runs only after the DOM is fully loaded, preventing errors from trying to access elements before they're available.

Example:

document.addEventListener('DOMContentLoaded', main);

DOMContentLoaded, is an event that fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, or other external resources to fully load.

It ensures that the DOM is fully built and accessible, so you can safely interact with elements in the HTML, such as adding event listeners or manipulating the DOM.

In the code above, the browser is telling you, that the document is now available and the user can start interacting with it.

Another common DOM Event are Mouse Events.

Mouse Events

We previously named one mouse event(click), here are some other common mouse events:

click - Triggered when the user clicks a mouse button over an element. Used for buttons, links, and any interactive elements where a user action is required.
dblclick - Triggered when the user double-clicks on an element. Used for actions that require confirmation or selection, such as editing text or opening files.
mousedown - Triggered when the mouse button is pressed down on an element. Used to initiate drag-and-drop operations or to create custom interactions that respond to mouse button presses.
mouseup - Triggered when the mouse button is released over an element. Often used with mousedown to complete an action, like dropping an item after dragging.
mousemove - Triggered when the mouse pointer moves within the bounds of an element. Used for interactive graphics, creating drawing applications, or for displaying dynamic information based on mouse position.

Mouse events are crucial for creating interactive user interfaces, they create instant reactions to a page, they make using a webpage user friendly and are engaging.

Our list of DOM Events doesn't stop there! There are many more events that can make a webpage interactive, if you want to read more on DOM Event types you can visit any of these sources:

Summary:

DOM Events are actions or occurrences that happen in a web page, which JavaScript can detect and respond too. The events allows your web page to be interactive by triggering specific functions when a user interacts with elements on the page, including keyboard actions and form submissions.

addEventListener detects and responds to specific events on a webpage.

Mouse events create instant reactions to a page.

DOMContentLoaded, ensures that the DOM is ready for JavaScript code to safely manipulate elements, add event listeners, or modify the content of the page. It's commonly used to run scripts after the page's structure is available and to ensure no errors occur due to trying to access elements that haven't yet been created.

Congratulations! You are now an expert in DOM Events!

Sources:

Cover Photo: https://www.pexels.com/search/web%20development/

https://www.w3schools.com/js/js_events.asp

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events