DEV Community: RF Fahad Islam

Elastic Search in 1minute

RF Fahad Islam — Fri, 30 Jun 2023 14:53:22 +0000

What is Elasticsearch?:

Elasticsearch is an open-source search engine that enables fast and efficient searching, indexing, and data analysis.
It is built on the Apache Lucene library and can run analytics on data such as textual, numerical, geospatial, structured, and instructed.

Benefits of Using Elasticsearch:

Elasticsearch offers high-speed search capabilities, scalability, full-text search, and flexible and powerful querying language.
It is the main component in the Elastic Stack, a set of tools for data ingestion, enrichment, storage, analysis, and visualization.

How Does Elasticsearch Work?:

Elasticsearch works in a distributed manner, where data is divided into multiple shards and distributed across a cluster of nodes.
It has three types of nodes: data node, master node, and coordinating node, each with a specific role.
Elasticsearch indexing involves defining an index and specifying document structure for the data, and Elasticsearch stores the data from the document in a compressed and immutable form called an inverted index.
When a search request is received, Elasticsearch distributes the query to relevant shards, and coordinating nodes merge all the results from the shards.

Documents:

Documents are the basic unit of information that can be indexed in Elasticsearch.
Data from various sources can be added to the Elasticsearch document using ingestion tools, and indexing allows Elasticsearch searchable.

Search:

Elasticsearch provides queries with Query DSL for constructing search queries, and distributed search is performed when a search request is received.
Tools such as Search UI and Search API can be used to execute searches, and results can be optimized with query parsing, execution, relevance scoring, sorting, and pagination.

Conclusion:

Elasticsearch is a powerful tool that can help in efficient and fast searching across large data.
It provides a powerful, distributed search and analytical solution, and using Elasticsearch in Elastic Stack can provide you with benefits such as data visualization with Kibaan and data ingestion and processing with Logstash.

FAQs and Store Snippets:

FAQs and store snippets are useful tools for providing quick answers to common questions and promoting sales.
By creating a library of FAQs and store snippets, businesses can save time and improve customer satisfaction.

Experience I gained as a developer by Building a blogging platform "Blogsphere"

RF Fahad Islam — Wed, 11 Jan 2023 13:30:26 +0000

Hi, devs 👋

Blogsphere is a simple blogging website that was created using the Flask web framework. The website allows anyone to post a blog like any other blogging platform. I recently completed the development of this project and it is now live at the following link: https://blogsphere.top.

I started the project as a hobby to improve my skills in web development and databases. So, The main goal of the project was to improve my skills.

In this article, I reflect on the lessons I learned from my blogsphere project. I discuss the challenges I faced, the successes I achieved, and the skills

💻Tech stacks

Technologies: Flask, HTMX, PostgreSQL, Bootstrap 5

Cloud platform: Digital Ocean ($200 free for 2months)

The website was built using a combination of technologies, including Flask, a microweb framework for Python that makes it easy to build web applications. It allowed me to quickly develop a robust and powerful server-side component for the website.

To create the user interface for the website, I used Bootstrap 5 which provided me with a responsive and clean layout, making the website accessible on a variety of devices. Additionally, I used HTMX which is a Javascript library that allows for real-time updates to the website without requiring a page refresh. This allowed for a smooth and responsive user experience.

To store and manage the data for the website, I used a SQL database named PostgreSQL. This allowed me to easily create and manipulate a database to store information about the blogs and users.

To run the site on production I have used the Gunicorn web server which can serve web pages in production

Python modules That are used:

Authlib #for integrating google login
bs4 #For scrapping pages
Flask-Admin #For the admin panel
Flask-Migrate #Making Database changes
Flask-Session #Save Login information and use cookies
Flask-SQLAlchemy #SQL ORM
Flask-WTF #Web forms
gunicorn # Primary web server for running the website
Markdown #generate markdown to HTML
markdownify #generate HTML to markdown
psycopg2-binary #Postgres
python-dotenv #using env
readtime #calculate read time for a blog
timeago #showing the publishing date like social media

💥My Experience

As a developer, it has been an incredible experience creating the Blogsphere project. The journey of building a full-stack web application from scratch was both challenging and rewarding.

The process started with a clear idea of what the project should achieve, and a plan for how to implement it. This included choosing the appropriate technology stack to use, which in my case was Flask, HTMLX, SQL, and Bootstrap 5.

I began by setting up the server-side component using Flask. This involved creating the necessary routes and functionality for the website, such as handling user registration and login, as well as creating and managing blog posts. I found Flask to be a great framework to work with as it is lightweight, easy to learn, and has a vast library of resources and tutorials available. I have used the libraries of the flask to extend the functionality as needed such as Flask-Admin, Flask-Migrate, Flask-Session, Flask-SQLAlchemy, and Flask-WTF.

Once the server-side component was in place, I focused on building the user interface. I used Bootstrap 5 to create a responsive and clean layout and HTMLX which allowed me to create real-time updates to the website. This allowed for a smooth and responsive user experience for the visitors.

I also used SQL for creating and managing the database to store information about blogs and users. It was satisfying to see the database come to life as I added more data to it, and also challenging to make sure the database structure is good for the scale of the application.

One of the most rewarding moments of the project was seeing everything come together and seeing the website finally working as it was intended. Being able to share the project with others, and receive positive feedback, was an incredible feeling.

However, the journey was not without its challenges. Debugging errors and fixing bugs can be time-consuming, but it was a valuable learning experience, as well as it gives a sense of accomplishment once they are solved.

😟Challenges I Faced

Working on a Flask full-stack project presented me with several challenges. One of the most difficult challenges was to balance the complexity between the client and server sides, which is necessary for any full-stack application. Additionally, I had to ensure that each layer was appropriately structured to ensure the scalability of the application. Furthermore, debugging and troubleshooting any errors quickly became an arduous task because certain problems could occur in either front or back-end parts. Finally, I found syncing data between my local environment and cloud environments required an extra level of effort as there were discrepancies that needed identifying to keep pace with feature development. Especially, I have to overcome the difficulties, bugs, and errors in Flask with routes, models, forms, templates, and efficiency.

One of the main challenges I faced while building Blogsphere was working with the SQL database and relational models. This required a lot of planning and organization, as well as a thorough understanding of how the different tables in the database would interact with one another. The following system and comment section were particularly challenging to implement, as they required a lot of work on the SQL side of things.

The 'follow user' system was designed to allow users to follow other users and see their posts in a centralized location. This required creating the relationship between different tables in the database, such as the user and follow tables. I had to think carefully about how to structure the database and how to connect the different tables in order to make the 'follow user' system work properly.

The comment section was also challenging to build, as it required a lot of work on the SQL side as well. I had to think carefully about how to structure the database to allow for comments to be linked to specific posts and easily displayed on the site. This was not an easy task as it required a lot of thinking to create the relationship between comment and post tables in the database.

To solve these problems, I break them down into small pieces and also make a diagram to understand and find out the perfect relation to work for these problems. I used LucidChart for this problem.

It's much easier to illustrate the solutions before coding them.

Aside from the technical challenges, I also had to consider the user experience when building Blogsphere. I wanted to create a website that was easy to use and navigate, with a clean and modern design. I used Bootstrap 5 to create a visually appealing and responsive website, which allowed me to create a seamless experience for the user.

In addition to all of the above, I had to keep track of the time as well. So time management was also a key aspect of the development process. As a result, I had to prioritize the features and work on the most important ones first, making sure that everything was finished on time.

🎯Skills I learned

Working on a full-stack Flask project has enabled me to develop a range of valuable skills and expertise. I learned to craft professional user interfaces with HTML, CSS, and JavaScript as well as create a PostgreSQL database linked to my application via ORM. I have learned to work professionally with Flask SQL ORM for CRUD operations. Additionally, I overcame various challenges while leveraging Flask blueprints to structure my application’s models, forms, controllers, and views. I applied my knowledge in OAuth2.0 authentication integration, jQuery Ajax requests setup, and deployment procedures with the DigitalOcean App platform. This deep learning experience cultivated my knowledge of web development standards like real-world problem solutions, Git Version Control processes, and best practices for software engineering design patterns. All together these skills have enabled me to take on large-scale web applications with confidence and ensure high-quality code deliverables for clients.

Despite having difficulties, Building a real-world project can help you to gain immense knowledge and you can learn from your mistakes.

🥜In a Nutshell

By working on the project, I have learned:

The importance of planning and organization when working with relational databases.
The significance of testing is to catch bugs and errors early on.
Techniques for creating and managing complex SQL databases for specific features like follow and comment systems.
The impact of user experience and design on the overall success of a website.
The importance of time management and prioritization when working on a project with a strict deadline.
Solving problems by illustrating the solutions or dividing them into small pieces
Don't be frustrated by the errors or bugs
Don't lose patience
It doesn't matter whether people are loving your project or not, but you have to have faith in yourself and your project
Overcome the problems you faced with the help of the resources available on the Internet and utilize the solution as your need.

Conclusion

Overall, developing the Blogsphere project was a great experience, one that allowed me to enhance my skills and knowledge as a developer, and create something that can be used by others. I'm looking forward to maintaining the project and continuing to make it better. I am also happy to share my experience from zero to Creating a real-world full-stack project.

Top IT Skills that Will Make You Unstoppable in 2023

RF Fahad Islam ・ Jan 7 ・ 6 min read

#skills #career #life #futureskills

Top 10 Python Tips and Tricks (Part -1): Unleash the full potential

RF Fahad Islam ・ Jan 8 ・ 2 min read

#python #tips #tricks #coding

🐍Python GUI Project: A step-by-step guide to make Drawing Canvas app

RF Fahad Islam ・ Nov 3 '21 ・ 10 min read

#pythonprojects #python #tutorial #gui

Hands on Machine Learning with Python

RF Fahad Islam — Tue, 10 Jan 2023 14:31:27 +0000

Machine learning is a method of teaching computers to learn from data, without being explicitly programmed. It is a subfield of artificial intelligence (AI) and involves training a computer to make predictions or take actions based on data. Python is a popular programming language for machine learning because it has a large ecosystem of powerful libraries and frameworks.

Here are some of the most popular libraries and frameworks for machine learning in Python:

Scikit-learn: Scikit-learn is a simple and efficient library for machine learning in Python. It provides a wide range of tools for regression, classification, clustering, and model selection. It also includes a large number of sample datasets, which you can use to practice machine learning algorithms.

TensorFlow: TensorFlow is an open-source library for machine learning developed by Google. It is mostly used for building and deploying large-scale machine learning models. It provides a flexible and powerful framework for building, training, and deploying machine learning models.

Keras: Keras is a user-friendly deep learning library that runs on top of TensorFlow. It is designed to make building and training neural networks as simple and easy as possible.

PyTorch: Pytorch is an open-source machine learning library developed by Facebook's AI Research lab. It is a dynamic computation graph framework, similar to TensorFlow, but Pytorch allows to change the graph on the fly with a more pythonic feel, making it more user-friendly and efficient for research and development.

Here's a simple example of how to use scikit-learn to build a simple linear regression model:

from sklearn.linear_model import LinearRegression
from sklearn.datasets import load_boston

# Load the Boston housing dataset

boston_dataset = load_boston()

# Define the independent variable (x) and the dependent variable (y)

x = boston_dataset.data
y = boston_dataset.target

# Create a LinearRegression object

regression = LinearRegression()

# Fit the linear regression model to the data

regression.fit(x, y)

# Print the coefficients of the model

print(regression.coef_)

This example loads the Boston housing dataset, which contains information about the median value of owner-occupied homes in various neighborhoods in Boston, and uses it to train a linear regression model. The independent variable (x) in this example is a set of features of the homes, such as the number of rooms, the age of the homes, and the per-capita crime rate. The dependent variable (y) is the median value of the homes.

Once you have your model, you can use it to make predictions on new data.

# Predict the median value of a home with 2 rooms and a crime rate of 0.1

prediction = regression.predict([[2, 0.1]])
print(prediction)

You can also use those frameworks to build more complex models, like neural networks or decision trees and many more. Please let me know if you have any specific question and if you want me to guide you through a certain specific problem or model.

Top 10 Python Tips and Tricks (Part -1): Unleash the full potential

RF Fahad Islam — Sun, 08 Jan 2023 15:40:03 +0000

Hi, Devs👋

Welcome to our list of the top 10 Python tips and tricks! Python is a versatile and powerful programming language that is widely used in many different fields, from web development and data analysis to artificial intelligence and scientific computing. If you're looking to improve your Python skills, you've come to the right place.

In this article, we'll be sharing some of the most useful and practical tips and tricks for Python programmers of all levels. Whether you're just starting out with Python or you're an experienced developer looking to take your skills to the next level, we hope you'll find these tips helpful.

So without further ado, let's get started with our list of the top 10 Python tips and tricks!

Python tips and tricks: Part-1

Here are 10 Python tips and tricks:

Use list comprehensions to create and manipulate lists in one line of code. For example, here's how you could create a list of the squares of the numbers 0-9:

squares = [x**2 for x in range(10)]

Use the "zip" function to iterate over multiple lists at the same time. For example:

names = ['Alice', 'Bob', 'Charlie']
ages = [24, 50, 18]

for name, age in zip(names, ages):
    print(f"{name} is {age} years old")

Use the "enumerate" function to loop over a list and get the index of each element. For example:

colors = ['red', 'green', 'blue']

for i, color in enumerate(colors):
    print(f"{i}: {color}")

Use the "in" keyword to check if an element is in a list. For example:

colors = ['red', 'green', 'blue']

if 'red' in colors:
    print("Red is in the list")

Use the "lambda" keyword to create anonymous functions. For example:

add = lambda x, y: x + y

result = add(5, 3)
print(result)  # Output: 8

Use the "ternary operator" to write concise if-else statements. For example:

x = 5
result = "big" if x > 4 else "small"
print(result)  # Output: "big"

Use the "callable" built-in function to check if an object is callable (e.g., a function). For example:

def foo():
    pass

print(callable(foo))  # Output: True
print(callable(5))    # Output: False

Use the "partial" function from the "functools" module to create a new function with some of the arguments of another function already filled in. For example:

from functools import partial

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

add_5 = partial(add, 5)

print(add_5(3, 4))  # Output: 12

Use the collections.Counter class to easily count the occurrences of items in a list. For example:

from collections import Counter

fruits = ['apple', 'banana', 'mango', 'banana']
fruit_counts = Counter(fruits)
print(fruit_counts)  # prints: Counter({'banana': 2, 'apple': 1, 'mango': 1})

Use the set type to remove duplicates from a list and to check membership efficiently. For example:

fruits = ['apple', 'banana', 'mango', 'banana']
unique_fruits = set(fruits)  # {'apple', 'banana', 'mango'}
'apple' in unique_fruits  # True
'pear' in unique_fruits  # False

We hope you've enjoyed our list of Python tips and tricks. Stay tuned for more content like this. Happy coding.....

Some Quick Python Hacks

RF Fahad Islam — Sun, 08 Jan 2023 10:56:58 +0000

Here is a small list of hacks.

But I am working on a big list of tips and tricks on python. So make sure to stay tuned😀

Here are some quick python hacks:

Use the built-in help function to learn about the functions and modules you are using. For example, you can type help(len) to learn more about the lenfunction.
Use the dirfunction to get a list of all the attributes (including methods and properties) of an object. For example, you can type dir(str) to get a list of all the methods that can be called on a string.
Use the isinstancefunction to check the type of an object. For example, you can use isinstance(x, str) to check if x is a string.
Use the__doc__ attribute to access the documentation for a function or class. For example, you can type print(str.__doc__) to print the documentation for the strclass.
Use the python -m pdb command to start the interactive debugger, which allows you to execute code one line at a time, inspect variables, and more.

If you like these hacks comment down below. I will happy to know if the blog is helpful for you.

Top 50 Python Project Ideas for 2023

RF Fahad Islam ・ Jan 6 ・ 4 min read

#python #project #programming #ideas

Top IT Skills that Will Make You Unstoppable in 2023

RF Fahad Islam — Sat, 07 Jan 2023 11:21:28 +0000

Introduction

Are you looking to advance your IT career in 2023? There are a number of valuable skills you can acquire to set yourself up for success. In this article, we'll highlight some of the top skills you can focus on to give your career a boost in the coming year. Whether you're looking to improve your programming skills, dive into the world of data science, or learn about the latest trends in cybersecurity, there's something on this list for you. By investing in these skills, you'll be well-equipped to take on the challenges and opportunities of the rapidly-evolving IT landscape. Programming and computer science: As technology continues to advance, the ability to understand and work with computers will be increasingly valuable. Learning programming languages like Python, Java, or C++ can be a useful skill in a wide range of fields.

List of SKILLS:

In the constantly-evolving world of technology, it can be overwhelming to try and decide which skills to focus on. However, with the right guidance, you can choose the skills that will be most beneficial for your IT career. In this article, we've compiled a list of the top skills that you can acquire in the current date to help you succeed in your career. From programming and data science to cybersecurity and beyond, these skills will give you the knowledge and expertise you need to thrive in the field. We hope that this list will serve as a helpful resource as you navigate the many options available to you and make informed decisions about your professional development.

✨Soft Skills (must)

Skills that you must acquire:

Communication: The ability to clearly and effectively communicate technical concepts to both technical and non-technical audiences will be valuable.
Collaboration: As technology becomes more complex and teams become more distributed, the ability to work well with others will be important.
Problem-solving: The ability to analyze and solve complex problems will be valuable in any technical role.
Creativity: The ability to come up with creative solutions to problems will be valuable in a field that is constantly evolving.
Adaptability: The ability to quickly adapt to new technologies and changing requirements will be important in a field where change is constant.
Time management: The ability to manage time effectively and prioritize tasks will be valuable in any role.
Leadership: The ability to lead and motivate teams will be valuable in technical leadership roles.
Emotional intelligence: The ability to understand and manage your own emotions and the emotions of others will be valuable in any professional setting.

💻Tech Skills

Here are technical skills to acquire for your IT career:

Programming and computer science: As technology continues to advance, the ability to understand and work with computers will be increasingly valuable. Learning programming languages like Python, Java, or C++ can be a useful skill in a wide range of fields.
Data science and analytics: With the proliferation of data, the ability to analyze and make sense of large datasets will be in high demand. Skills like machine learning, data visualization, and statistical analysis will be valuable.
Artificial intelligence and machine learning (Trending): AI and machine learning technologies are rapidly advancing and are expected to have a major impact on many industries. Learning about these technologies and how to work with them can be a valuable skill.
Cybersecurity/Ethical Hacking: As the reliance on technology increases, the need for strong cybersecurity measures will also increase. Learning about cybersecurity best practices and technologies can be valuable.
Blockchain and cryptocurrency: Blockchain technology and cryptocurrencies are emerging technologies that have the potential to revolutionize many industries. Learning about how they work and how they can be used can be a valuable skill.
Web Development: Web development is the process of building and maintaining websites. It involves a range of skills, including coding languages such as HTML, CSS, and JavaScript; server-side technologies like PHP and SQL; and design skills such as user experience (UX) design and responsive design. Web developers may also be responsible for testing and debugging websites, as well as maintaining and updating them with new features and content. To be successful in a web development career, it is important to stay up-to-date with the latest technologies and best practices, as well as to have strong problem-solving and communication skills.
Design and user experience (UX): As the importance of user experience grows, the ability to design and improve the UX of products and services will be valuable.
Cloud computing: The use of cloud computing services is increasing, and the ability to work with cloud platforms like Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform will be valuable.
Internet of Things (IoT): The IoT refers to the growing network of connected devices that can communicate and exchange data. Understanding how to work with and develop the IoT will be valuable.
Big data and distributed systems: As data continues to grow, the ability to work with large datasets and distributed systems will be valuable. Skills like Apache Hadoop and Apache Spark will be useful.
App development: The use of smartphones and tablets is increasing, and the ability to develop apps for these platforms will be valuable.
DevOps: DevOps is a set of practices that combines software development and IT operations, with the goal of improving the speed and reliability of software releases. Learning about DevOps principles and tools will be valuable.
Digital marketing and social media: As more business is conducted online, the ability to effectively market products and services online and through social media platforms will be crucial.
Augmented reality (AR) and virtual reality (VR): AR and VR technologies are expected to have a major impact in a variety of fields, and the ability to develop these platforms will be valuable.
Game development: The gaming industry is growing and the ability to develop games for a variety of platforms will be valuable.
Internet of Things (IoT) security: As the number of connected devices grows, the need for strong security measures will also increase. Learning about IoT security best practices and technologies will be valuable.
Natural language processing (NLP): NLP is a field of artificial intelligence that focuses on the interaction between computers and humans using natural language. Understanding NLP and how to work with it will be valuable.
Robotics: The field of robotics is advancing quickly and the ability to work with and develop robots will be valuable.
Quantum computing: Quantum computers have the potential to solve certain problems much faster than classical computers, and the ability to work with quantum computers will be valuable.
Image and video processing: The ability to work with and analyze images and videos will be valuable in fields like computer vision and media.
Networking and network security: The ability to understand and work with networks and implement strong security measures will be valuable.
Embedded systems: Embedded systems are computer systems that are integrated into other products, and the ability to work with them will be valuable in fields like IoT and robotics.
Low-level programming: Low-level programming languages like C and assembly give programmers closer control over computer hardware and can be valuable in certain contexts.
Operating systems and system administration: Understanding operating systems and how to administer them will be valuable in a variety of fields.
Database administration: The ability to work with and administer databases will be valuable in fields that deal with large amounts of data.
Machine learning infrastructure: Building and maintaining the infrastructure to support machine learning models will be valuable in fields that use machine learning.
Voice and speech recognition: The ability to work with voice and speech recognition technologies will be valuable in fields like natural language processing and human-computer interaction.
Compiler design: Compilers are programs that translate code written in one programming language into another, and the ability to design compilers will be valuable in the development of programming languages.
Computer architecture: Understanding the design and operation of computer hardware will be valuable in fields that involve the development of hardware or low-level software.
Graphics programming: The ability to work with and optimize graphics rendering will be valuable in fields like gaming and multimedia.
Human-computer interaction (HCI): The field of HCI focuses on the design of user-friendly interfaces and the ability to work in this field will be valuable in the development of software and other products.
Information retrieval: The ability to design and work with systems that can efficiently search and retrieve information will be valuable in fields like search engines and libraries.
Operating system kernels: The kernel is the central part of an operating system and the ability to work with and develop kernels will be valuable in the development of operating systems.
Computer-aided design (CAD): The ability to work with CAD software will be valuable in fields that involve the design of physical products.
Computer vision: The field of computer vision involves the development of algorithms and systems that can interpret and understand visual data, and the ability to work in this field will be valuable in a variety of contexts.

Conclusion

"Get a head start on the competition in 2023 and add these top skills to your IT career toolkit - your future self will thank you!🙂"

Top 50 Python Project Ideas for 2023

RF Fahad Islam — Fri, 06 Jan 2023 17:27:08 +0000

Introduction

Python is a powerful and versatile programming language widely used in various fields, including web development, data science, and artificial intelligence. If you're a Python developer, you have the opportunity to work on a wide range of exciting projects, whether you're just starting out or you're a seasoned professional.

One of the most exciting areas of Python development is web development. Python has a number of powerful web frameworks, such as Django and Flask, which make it easy to build and deploy web applications. With Python, you can create everything from simple websites to complex web-based applications that serve millions of users.

Another exciting area of Python development is data science. Python has a large and active community of data scientists, and many powerful libraries and tools are available for data analysis and machine learning. With Python, you can work on projects that involve analyzing large datasets, building predictive models, and visualizing data.

Finally, Python is also popular for artificial intelligence and machine learning projects. There are a number of powerful libraries and frameworks available for building intelligent systems, such as TensorFlow and PyTorch. With Python, you can work on projects that involve building intelligent systems that can learn and adapt over time.

✨Top Python Projects

Here are some ideas for your next python project.

😸Beginners Project Ideas:

Here are a few more simple project ideas using Python:
Command line Utility: A command-line tool for converting files from one format to another, such as Markdown to HTML
Automation: A script for automating a task, such as renaming a batch of files or sending email reminders
Randomizer: A tool for generating random data, such as passwords or test data for a database
Searcher: A tool for searching and replacing text in a file or multiple files
Game: A simple game, such as a text-based adventure or a number-guessing or a snake game using pygame
Calculation: A tool for calculating statistics, such as mean, median, and mode
Data Analyze: A script for generating reports or summaries from data, such as a sales report using Pandas and Numpy.
Visualize Data: A tool for visualizing data, such as a bar chart or pie chart using matpotlib, pandas
Chatbot: A simple chatbot that can respond to user input
Converters: A tool for converting between units of measurement, such as pounds to kilograms or Fahrenheit to Celsius.
Website: A simple backend API or Blog website using Flask/Django

🤓Advanced Project Ideas:

Here are a few more advanced project ideas using Python:

A machine learning model for image or speech recognition
A web application for creating and sharing visualizations or data analyses
A natural language generation tool for creating automated reports or summaries using Tensorflow **or **PyTorch
A recommendation system for recommending products or content to users based on their past behavior and other data
A machine learning model for predicting the outcome of sporting events or stock prices
A tool for analyzing and visualizing network data, such as social media connections or transportation networks
A chatbot that can understand and respond to complex user input using natural language processing
An interactive data visualization tool for exploring and analyzing large datasets
A machine learning model for generating text, such as news articles or social media posts.
A machine learning model for detecting and analyzing patterns in financial data
A tool for automating the creation and management of cloud infrastructure
A machine learning model for predicting and classifying customer behavior or churn
A tool for automating the process of generating and analyzing reports or dashboards
A tool for analyzing and visualizing or predicting the cryptocurrency market
An e-commerce site using Django
A Blockchain app using Web3 functionalities
A flappy bird game using python
Python Web Crawler and Bots using Celery, Selenium
A File Manager desktop GUI using OS module
A Basic Photo editing desktop app using PyQt5/Kivy and OpenCV, Pillow libraries

🏆Fullstack Python Website Project Ideas

Here are some full-stack project ideas you can create using python Django/Flask:

A social media platform or online community
An e-commerce website for buying and selling products
A marketplace for buying and selling services
A job board or recruiting website
A blog or content-based website
A news website or aggregator
A directory or listing websites, such as a restaurant guide or event calendar
A personal portfolio or resume website
An educational website or online course platform
A customer service or support website, with a knowledge base and ticketing system.
A website for booking and managing fitness classes or personal training sessions
A website for organizing and managing volunteer projects or charity events
A website for creating and sharing personalized travel itineraries
A website for organizing and managing local events or activities, such as meetups or sports leagues
A website for connecting freelancers or independent contractors with businesses or clients
A website for creating and sharing personalized home workout plans or fitness routines
A website for buying and selling handmade or unique goods
A website for organizing and managing home repair or improvement projects
A website for creating and sharing personalized language learning plans or courses.
A website for creating and sharing personalized meal plans or recipes

Conclusion😀

If you're looking to take your Python skills up a notch and make something cool, there are plenty of "pythonically witty" project ideas to choose from. Whether it's coding an AI-driven chatbot, creating a real-time data visualization dashboard, or designing the next big responsive web app - the possibilities are only limited by your imagination! So show off your creativity and push Python to its fullest potential - and who knows, maybe you'll create something that's truly unforgettable😉!

Top IT Skills that Will Make You Unstoppable in 2023

RF Fahad Islam ・ Jan 7 '23

#skills #career #life #futureskills

Top 10 Python Tips and Tricks (Part -1): Unleash the full potential

RF Fahad Islam ・ Jan 8 '23

#python #tips #tricks #coding

🐍Python GUI Project: A step-by-step guide to make Drawing Canvas app

RF Fahad Islam ・ Nov 3 '21

#pythonprojects #python #tutorial #gui

Why you should learn Python in 2023

RF Fahad Islam — Fri, 06 Jan 2023 11:30:12 +0000

Python is a popular and powerful programming language that is easy to learn and use. It is a great language for beginners, as well as for experienced programmers. Here are a few reasons why you should consider learning Python:

Python is easy to learn and use - Python has a simple syntax and a large community of users, which means that there are many resources available to help you learn the language. Python also has a large standard library, which means that there are many built-in functions and modules that you can use without having to install additional libraries.
Python is used in a wide range of fields - Python is used in many different fields, including web development, data analysis, scientific computing, and artificial intelligence. This means that learning Python can open up many job opportunities for you.
Python has a large and active community - The Python community is very active, with many users contributing to the development of the language and its libraries. This means that there is always something new and interesting happening in the Python world.
Python is open source - Python is an open source language, which means that you can use it freely and contribute to its development. This makes it a great choice for those who want to be involved in the development of the tools they use.
Python is powerful - Despite its simplicity, Python is a very powerful language. It is able to handle a wide range of tasks, from web development to data analysis. This means that you can use Python for just about anything you want to do.
Python has excellent libraries and frameworks - Python has a large number of libraries and frameworks that make it easy to build a wide range of applications. For example, the Django web framework makes it easy to build and deploy web applications, while the NumPy library is a popular choice for scientific computing and data analysis.
Python is used by top tech companies - Many top tech companies use Python in their technology stack, including Google, Facebook, and Netflix. This means that learning Python can be a great way to position yourself for a career at one of these companies.
Python is versatile - Python can be used for just about anything you can think of. It is a great language for building web applications, analyzing data, creating artificial intelligence systems, and much more.
Python has great support for data science - Python is a popular choice for data scientists, as it has a number of powerful libraries and frameworks for working with data. For example, the Pandas library is a popular choice for data manipulation and analysis, while the scikit-learn library is a powerful tool for building machine learning models.
Python is fun to use - Finally, Python is just a fun language to use. Its simplicity and power make it a joy to work with, and its active community means that there is always something new and interesting happening. Whether you are just starting out in programming or are an experienced developer, Python is a language that you will enjoy working with.

Building A Drawing Canvas GUI using python (Step-to-step Guide)

RF Fahad Islam — Sun, 18 Dec 2022 06:15:01 +0000

✨Introduction

This tutorial is not focused on advanced topics. This will teach you how to make your own simple Drawing GUI using basic Tkinter and Python concepts. Also, feel free to suggest your changes and new features for improving the program. Enhance it with your creativity by making pull requests. Let's get started!
Note: This is a simple project for beginners. So I will not go to advanced stuff like "Save as PNG, JPEG files" or "work with images".

GitHub Repo : - Drawing Pad

👀 Overview

What can it do :

Create a rectangle, circle, line with custom colors
Save the drawing in a pickle file.
Retrieve the drawing by opening the pickle file.

Take a look at the final project :

🖥 Step by step: Drawing Pad Project

📌Imports and Modules

In this project, we will use only Python built-in Tkinter library for GUI building and pickle for saving drawing in a .pkl file. No external module is used in this project.

from tkinter import *
import tkinter.messagebox as tmsg 
from tkinter.filedialog import askopenfilename, asksaveasfilename #for saving files in a directory
import pickle #save draw object in pickle file
from tkinter.colorchooser import askcolor #custom color palates

📌Defining Variables

First, we need some global variables to use within functions. So, here are all variables need for this project. Look at the variables and why its created.

# Starting point of mouse dragging or shapes
prev_x = 0 
prev_y = 0 
# Current x,y position of mouse cursor or end position of dragging
x = 0 
y = 0
created_element_info = [] #list of all shapes objects for saving drawing
new = [] # Each shapes of canvas
created = [] # Temporary list to hold info on every drag
shape = "Line" # Shape to draw
color = "blue" # Color of the shape
line_width = 3 # Width of the line shape

🎨 Create Window and Canvas

So before logic building for our project, let's build the GUI window with Tkinter. if you don't know how to use Tkinter then read Tkinter guide for beginners.

Main Window:

# All the functions and logics go here
root = Tk()
root.title("Drawing Pad")
root.minsize(600,300) #Minimum Size of the window
# All Widgets here such as canvas, buttons etc
root.mainloop()

Canvas Widget:

Under mainloop create the canvas

Specify Canvas width and height
Create Canvas widget and pack with root

CANVAS_WIDTH = 600
CANVAS_HEIGHT = 400
canvas = Canvas(root, width=CANVAS_WIDTH, height=CANVAS_HEIGHT, bg="white")
canvas.pack()

Bind Some Function with canvas. Note: These Functions are described in the logic section

# Binding Events to canvas
# Structure: canvas.bind("<eventcodename>", function-name)
canvas.bind("<1>", recordPosition) #On Mouse left click
canvas.bind("<B1-Motion>", drawShapesOnDragging) #Capture Mouse left click + move (dragging)
canvas.bind("<ButtonRelease-1>", generateShapesObj) #When Mouse left click release
canvas.bind("<Motion>", captureMotion) #Mouse Motion

📌Building Design and Widgets

We will create Buttons, Frames, and Status Bar for our Drawing GUI

Frame: First Create a Bottom frame for the toolbar

frame = Frame(root)
frame.pack(side=BOTTOM)

Radio Button: Now we will create radio buttons for selecting shapes and bind it with frame. We will create radios from the shapes list then manipulate them. Here the command is for running the function by its name. Don't worry we will create the function soon.

radiovalue = StringVar()
geometry_shapes = ["Line", "Rectangle", "Arc", "Oval"]
radiovalue.set("Line") #Default Select

# Manupulates Radios from the list
for shape in geometry_shapes:
    radio = Radiobutton(frame, text=shape, variable=radiovalue, font="comicsans     12 bold", value=shape, command=shapechanger).pack(side=LEFT, padx=6,pady=3)

Button: Then create buttons for basic actions. These buttons command contains functions name that should be executed when the buttons click.

Button(frame, text="Save", font="comicsans 12 bold",
       command=saveDrawingFile).pack(side=BOTTOM, padx=6, pady=6)
Button(frame, text="Clear", font="comicsans 12 bold",
       command=clearCanvas).pack(side=BOTTOM, padx=6)
Button(frame, text="Color", font="comicsans 12 bold",
       command=colorPicker).pack(side=BOTTOM, padx=6)
Button(frame, text="Get", font="comicsans 12 bold",
       command=getsavedrawing).pack(side=BOTTOM, padx=6)

Scale: Create a horizontal scale for controlling line thickness.

scale = Scale(root, from_=1, to=20, orient=HORIZONTAL, command=setlinewidth)
scale.pack(side=BOTTOM)

Status Bar: Create status bar to show x,y position of the mouse cursor

status = StringVar()
status.set("Position : x - 0 , y - 0")
statusbar = Label(root, textvariable=status, anchor="w", relief=SUNKEN)
statusbar.pack(side=BOTTOM, fill=X)

That's enough for our GUI. Now it looks like this

It is not working now. So lets created our app logic.

🧠App Logic

Our design is completed. Now we will create some functions to make it work! These function should be placed outside the mainloop.

Let's divide the app logic and problems to solve them easily

Divide Problems:

Create different shapes according to user radio selection
Draw the shapes and update the shape size dynamically on dragging
Delete all the shapes that will be created while dragging except the final shape
Create a list of dictonaries to store data of every shapes containning the detail of shape position, color etc.
Then save the list to pickle file and finally retrieve the data from the file and draw them on the canvas.

📌Function to Update Values :

#Capture Motions on every mouse position change
def captureMotion(e=""):
    #Update Status Bar
    status.set(f"Position : x - {e.x} , y - {e.y}")
    statusbar.update()

# Update the previous position on mouse left click
def recordPosition(e=""):
    global prev_x
    global prev_y
    prev_x = e.x
    prev_y = e.y

# Color Picker for color button
def colorPicker(e=""):
    global color
    color = askcolor(color=color)[1]
    #Set the color of shapes
    root.config(cursor=f'cursor {color} {color}', insertbackground=f"{color}")

# Update the current shape
def shapechanger(e=""):
    global shape
    shape = radiovalue.get() #selected radio value

# Runs On scale value change and update line width
def setlinewidth(e=""):
    global line_width
    line_width = scale.get()
    # Save the drawing on a file

# After Every drawing create info of drawing and add the element to new list and assign empty list to created
def generateShapesObj(e=""):
    global created,created_element_info
    new.append(created[-1])
    created = []
    created_element_info_obj = {
        "type": shape,
        "color": color,
        "prev_x": prev_x,
        "prev_y": prev_y,
        "x": x,
        "y": y
    }
    created_element_info.append(created_element_info_obj)

Above functions are important for our generating shape logic

📌Draw Shapes on Canvas

This is the most important part of this project. First we will create some functions to update global variables that is defined before.

1. Create shape functions

Note: This function uses the global variables to know what shape, color, and where to draw.

This createElms() function will run by the drawShapesOnDragging() function on every mouse click with dragging.

# Create Elements on canvas based on shape variable
def createElms():
    if shape == "Rectangle":
        a = canvas.create_rectangle(prev_x, prev_y, x, y, fill=color)
    elif shape == "Oval":
        a = canvas.create_oval(prev_x, prev_y, x, y, fill=color)
    elif shape == "Arc":
        a = canvas.create_arc(prev_x, prev_y, x, y, fill=color)
    elif shape == "Line":
        a = canvas.create_line(prev_x, prev_y, x, y,
                               width=line_width, fill=color,
                               capstyle=ROUND, smooth=TRUE, splinesteps=3)
    return a

Explain:
We want three shapes such as Rectangle, Oval, Arc, and Line for this project.

First, we use the "shape" and "color" variables to create responding shapes to the canvas. I am not going to explain the canvas shape creation rather than I want to tell the logic behind it.

2. Generate shapes on mouse dragging

For generating shapes on mouse dragging, grab x,y positions on every mouse cursor position change. Then create shapes on every change, keep the new shape and delete other shapes.

Note: Here we want to keep starting point of shape still on drag start event and the end point means x,y position will change dynamically on dragging.

# Create shapes on mouse dragging and resize and show the shapes on the canvas
def drawShapesOnDragging(e=""):
    global x,y
    try:
        # Update current Position
        x = e.x
        y = e.y

        #Generate Element
        element = createElms()
        deleteUnwanted(element) # Delete unwanted shapes
    except Exception as e:
        tmsg.showerror("Some Error Occurred!", e)

Problem: Without deleteUnwanted() it will work like this. But We don't want these unwanted shapes on x,y position change of mouse cursor. This will create a lot of shapes on every position change of the mouse cursor. So we need to keep one element at the end. So we will delete other shapes from the canvas and keep the new one

*Solution: * So add the function to solve this problem.

def deleteUnwanted(element):
    global created
    created.append(element) #Elements that created
    for item in created[:-1]: 
        canvas.delete(item)

Now it is dynamic and change its endpoint on dragging but not the starting point.

📌Clear Canvas

We make a button before for clearing th canvas but we don't write the function for the button clearCanvas().

# Clear the canvas
def clearCanvas(e=""):
    global created_element_info, canvas, created, new
    canvas.delete("all")
    created_element_info = []
    created = []
    new = []

📌Saving Drawing in Pickle file

To save the drawing, we need to save the generated object list of shapes info and write it on the pickle file.
It creates a list of drawing information dictionary such as below (given the structure of the data):

# This is not for the GUI. It's just a structure of the generated data.
created_element_info = [
    {
        "type": shape, #Shape of drawing like line, circle, rectangle
        "color": color, #Color of the shape
        "prev_x": prev_x, #Starting point from the x axis
        "prev_y": prev_y, #Starting point from the y axis
        "x": x, #End point of the x axis
        "y": y #End point of the y axis
    },
    {
        ......
        ......
    },
    # .....................
]

Save the list to pickle file:

# Save the list of shapes objects on a pickle file
def saveDrawingFile(e=""):
    global created_element_info
    filename = asksaveasfilename(initialfile="drawing",defaultextension=".pkl",filetypes=[("Pickle Files", "*.pkl")]) #Save as
    if filename != None: 
        with open(filename, "wb") as f:
            pickle.dump(created_element_info, f)

📌Retrieve Drawing from File

Retrieve the data from the pickle file and then draw the shapes from the info

def getsavedrawing():
    global x, y, prev_x, prev_y, shape, color
    filename = askopenfilename(defaultextension=".pkl", filetypes = [("Pickle Files", "*.pkl")])
    if filename != None:
        with open(filename, "rb") as f:
            data = pickle.load(f)
            for draw_info in data:
                x = draw_info["x"]
                y = draw_info["y"]
                prev_x = draw_info["prev_x"]
                prev_y = draw_info["prev_y"]
                shape = draw_info["type"]
                color = draw_info["color"]
                createElms() #Draw each shapes

That's the end. Now our app is complete!

Now Here is the final code .

👩‍💻 Final Code

Github Repo : - https://github.com/RF-Fahad-Islam/Drawing-Pad

from tkinter import *
import tkinter.messagebox as tmsg 
from tkinter.filedialog import askopenfilename, asksaveasfilename #for saving files in a directory
import pickle #save draw object in pickle file
from tkinter.colorchooser import askcolor #custom color palates

# Starting point of mouse dragging or shapes
prev_x = 0 
prev_y = 0 
# Current x,y position of mouse cursor or end position of dragging
x = 0 
y = 0
created_element_info = [] #list of all shapes objects for saving drawing
new = [] # Each shapes of canvas
created = [] # Temporary list to hold info on every drag
shape = "Line" # Shape to draw
color = "blue" # Color of the shape
line_width = 3 # Width of the line shape

# All the functions and logics go here
#Capture Motions on every mouse position change
def captureMotion(e=""):
    #Update Status Bar
    status.set(f"Position : x - {e.x} , y - {e.y}")
    statusbar.update()


# Update the previous position on mouse left click
def recordPosition(e=""):
    global prev_x
    global prev_y
    prev_x = e.x
    prev_y = e.y

# Color Picker
def colorPicker(e=""):
    global color
    color = askcolor(color=color)[1]
    #Set the color of shapes
    root.config(cursor=f'cursor {color} {color}', insertbackground=f"{color}")

# Update the current shape
def shapechanger(e=""):
    global shape
    shape = radiovalue.get() #selected radio value

# Runs On scale value change and update line width
def setlinewidth(e=""):
    global line_width
    line_width = scale.get()
    # Save the drawing on a file

# After Every drawing create info of drawing and add the element to new list and assign empty list to created
def generateShapesObj(e=""):
    global created,created_element_info
    new.append(created[-1])
    created = []
    created_element_info_obj = {
        "type": shape,
        "color": color,
        "prev_x": prev_x,
        "prev_y": prev_y,
        "x": x,
        "y": y
    }
    created_element_info.append(created_element_info_obj)

# Create Elements on canvas based on shape variable
def createElms():
    if shape == "Rectangle":
        a = canvas.create_rectangle(prev_x, prev_y, x, y, fill=color)
    elif shape == "Oval":
        a = canvas.create_oval(prev_x, prev_y, x, y, fill=color)
    elif shape == "Arc":
        a = canvas.create_arc(prev_x, prev_y, x, y, fill=color)
    elif shape == "Line":
        a = canvas.create_line(prev_x, prev_y, x, y,
                               width=line_width, fill=color,
                               capstyle=ROUND, smooth=TRUE, splinesteps=3)
    return a

# Create shapes on mouse dragging and resize and show the shapes on the canvas
def drawShapesOnDragging(e=""):
    global x,y
    try:
        # Update current Position
        x = e.x
        y = e.y

        #Generate Element
        element = createElms()
        deleteUnwanted(element) # Delete unwanted shapes
    except Exception as e:
        tmsg.showerror("Some Error Occurred!", e)

def deleteUnwanted(element):
    global created
    created.append(element) #Elements that created
    for item in created[:-1]: 
        canvas.delete(item)

# Save the list of shapes objects on a pickle file
def saveDrawingFile(e=""):
    global created_element_info
    filename = asksaveasfilename(initialfile="drawing",defaultextension=".pkl",filetypes=[("Pickle Files", "*.pkl")]) #Save as
    if filename != None: 
        with open(filename, "wb") as f:
            pickle.dump(created_element_info, f)

def getsavedrawing():
    global x, y, prev_x, prev_y, shape, color
    filename = askopenfilename(defaultextension=".pkl", filetypes = [("Pickle Files", "*.pkl")])
    if filename != None:
        with open(filename, "rb") as f:
            data = pickle.load(f)
            for draw_info in data:
                x = draw_info["x"]
                y = draw_info["y"]
                prev_x = draw_info["prev_x"]
                prev_y = draw_info["prev_y"]
                shape = draw_info["type"]
                color = draw_info["color"]
                createElms() #Draw each shapes

# Clear the Canvas
def clearCanvas(e=""):
    global created_element_info, canvas, created, new
    canvas.delete("all")
    created_element_info = []
    created = []
    new = []

root = Tk()
root.title("Drawing Pad")
root.minsize(600,300) #Minimum Size of the window
# All Widgets here such as canvas, buttons etc

# Canvas
CANVAS_WIDTH = 600
CANVAS_HEIGHT = 400
canvas = Canvas(root, width=CANVAS_WIDTH, height=CANVAS_HEIGHT, bg="white")
canvas.pack()

# Binding Events to canvas
# Structure: canvas.bind("<eventcodename>", function-name)
canvas.bind("<1>", recordPosition) #On Mouse left click
canvas.bind("<B1-Motion>", drawShapesOnDragging) #Capture Mouse left click + move (dragging)
canvas.bind("<ButtonRelease-1>", generateShapesObj) #When Mouse left click release
canvas.bind("<Motion>", captureMotion) #Mouse Motion
frame = Frame(root)
frame.pack(side=BOTTOM)
radiovalue = StringVar()
geometry_shapes = ["Line", "Rectangle", "Arc", "Oval"]
radiovalue.set("Line") #Default Select

# Manupulates Radios from the list
for shape in geometry_shapes:
    radio = Radiobutton(frame, text=shape, variable=radiovalue, font="comicsans     12 bold", value=shape, command=shapechanger).pack(side=LEFT, padx=6,pady=3)

#Buttons
Button(frame, text="Save", font="comicsans 12 bold",
       command=saveDrawingFile).pack(side=BOTTOM, padx=6, pady=6)
Button(frame, text="Clear", font="comicsans 12 bold",
       command=clearCanvas).pack(side=BOTTOM, padx=6)
Button(frame, text="Color", font="comicsans 12 bold",
       command=colorPicker).pack(side=BOTTOM, padx=6)
Button(frame, text="Get", font="comicsans 12 bold",
       command=getsavedrawing).pack(side=BOTTOM, padx=6)

# Scale
scale = Scale(root, from_=1, to=20, orient=HORIZONTAL, command=setlinewidth)
scale.pack(side=BOTTOM)

# Status Bar
status = StringVar()
status.set("Position : x - 0 , y - 0")
statusbar = Label(root, textvariable=status, anchor="w", relief=SUNKEN)
statusbar.pack(side=BOTTOM, fill=X)
root.mainloop()

📃Conclusion

Finally, Our project is finished. If you find some bugs, you can solve the bug and pull it to the GitHub. If you find this blog helpful then comment down and show your improvements to my GitHub make pull requests. You are welcome to make changes to this project. See you in the future. Happy Coding!

Github Profile : RF Fahad Islam
Instagram Profile: RF Fahad Islam
Hashnode Blog: My Hashnode Blog

Debugging the Laughter: Programming Memes for Nerdy Humor

RF Fahad Islam — Mon, 12 Dec 2022 13:24:02 +0000

Share your meme in the comments.

Integrate Google Authentication in Flask Apps Quickly and Easily

RF Fahad Islam — Mon, 05 Dec 2022 13:16:33 +0000

Let's see how to make a google login system for our flask apps in only 2 minutes.

First, Look at the simple app of Flask



from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def home():
    return render_template('index.html')
if __name__ == "__main__":
    app.run()

This is our simple flask app. Now let's add google auth.

Install authlib for the integration



pip install authlib

For more info visit docs: https://docs.authlib.org/en/latest/client/flask.html

Get Google Auth API Keys

Go to the credentials page and sign in: https://console.cloud.google.com/apis/credentials and go to this page

Then select OAuth Client Id and then select web application in the form.

Fill in the name of the app and then provide authorized redirect URLs. In this tutorial, the authorized link will be: http://localhost:8000/authorize

Finally, create and copy the google client id and client secret

Initialize auth app



from authlib.integrations.flask_client import OAuth
#Authlib
oauth = OAuth(app)

Then create the google client and configure Provide your google client id and secret here



#Register google outh
google = oauth.register(
  name='google',
  server_metadata_url=CONF_URL,
  # Collect client_id and client secret from google auth api
  client_id= "GOOGLE_CLIENT_ID",
  client_secret = "GOOGLE_CLIENT_SECRET",
  client_kwargs={
    'scope': 'openid email profile'
  }
)

Routes for google login page

Here are the routes for the google login page



#Routes for login
@app.route('/google-login')
def googleLogin():
    # Here is the authorized url page
    redirect_uri = url_for('authorize', _external=True)
    google = oauth.create_client('google')
    #then return the user to authorized login page of google
    return google.authorize_redirect(redirect_uri)


@app.route('/authorize')
def authorize():
    """Google login page will apear in this will provide you with 
    information of user"""
    token = oauth.google.authorize_access_token()
    user = token['userinfo'] # This is the dict for userinfo
    #user will return a dict of info like: email = user.get("email")
    #Save the user info to database and login the user

Final Code



from authlib.integrations.flask_client import OAuth
from flask import Flask, render_template

# More Info : https://docs.authlib.org/en/latest/client/flask.html
app = Flask(__name__)
#Authlib
oauth = OAuth(app)

#Register google outh

CONF_URL = 'https://accounts.google.com/.well-known/openid-configuration' #provide us with common metadata configurations 
google = oauth.register(
  name='google',
  server_metadata_url=CONF_URL,
  # Collect client_id and client secret from google auth api
  client_id= os.environ.get("GOOGLE_CLIENT_ID"),
  client_secret = os.environ.get("GOOGLE_CLIENT_SECRET"),
  client_kwargs={
    'scope': 'openid email profile'
  }
)

#Routes for login
@app.route('/google-login')
def googleLogin():
    redirect_uri = url_for('authorize', _external=True)
    google = oauth.create_client('google')
    return google.authorize_redirect(redirect_uri)


@app.route('/authorize')
def authorize():
    token = oauth.google.authorize_access_token()
    user = token['userinfo']
  # user will return a dict of info like: email = user.get("email")
    #Save the user info to database and login the user

Congrats🎉🎉. Now you have google authentication in your flask app🥳 Happy Coding.

Follow me on hashnode : Hashnode Blog

Tic Tac Toe Game with Vue JS

RF Fahad Islam — Tue, 15 Nov 2022 10:05:10 +0000

Introduction

This is an overview of the tic tac toe game made with Vue3. Using Vue3 composition API and reactivity features makes the rendering process to DOM much easier. However, If you want the tutorial for making this game with Vue3 or Vanilla Js from scratch, let me know in the comment section. I'll explain the logic-building process for the game.

😀My Hashnode Blogsite : Visit

Overview

Link to the game: Tic-Tac-Toe

Source Code

GitHub Repo: Vue-Game-Project
The main Logic is in the src>component>Board.vue file

☁Cloud Codespace : Space

Full Tutorial is Coming Soon .....

Board.vue(Main) File Code

<template>
<div class="container">
    <!-- <span  style="cursor: pointer; font-size: 35px; position: absolute; left: 20px;" class="float-start" @click="isMuted = !isMuted">
    <i class="fa fa-volume-up" v-if="!isMuted"></i>
    <i class="fa fa-volume-off" v-else></i>
    </span> -->
  <header>
      <h1 class="my-2">
        <img src="../assets/logo.png" lazy alt="Logo" width="40" /> Tic Tac Toe
    <div class="form-check form-switch d-inline-block" id="toggle" style="font-size: 20px;" v-show="!gameStart">
      <input
        class="form-check-input"
        type="checkbox"
        role="switch"
        v-model="isRow"
      />
    </div>

      </h1>
  </header>

  <div :class="[isRow?'row':'text-center']">

  <!-- !Controls and Message Section -->
  <section :class="[isRow?'col-md-6 col-sm-12':'']">
      <!-- Computer Switch -->
    <div class="form-check form-switch switch" v-show="!gameStart">
      <input
        class="form-check-input"
        type="checkbox"
        role="switch"
        id="flexSwitchCheckDefault"
        v-model="isComputer"
        :disabled="gameStart"
      />
      <label class="form-check-label mx-2" for="flexSwitchCheckDefault"
        >Computer</label>
    </div>


    <transition-group
    name="custom-classes-transition"
    enter-active-class="animated bounceIn"
    leave-active-class="animated bounceOut"
    tag="ul"
  >
    <h1 class="text-black" v-if="gameStart">Round : {{round}}</h1>


      <h4 v-if="gameStart&&isComputer" style="
        border: 2px solid skyblue;
      " class="alert font-weight-bold text-black d-inline-block">
        <span>
          <i class="fa fa-desktop text-primary"></i> Computer in
          <i class="fa fa-dashboard text-black mx-1"></i>
             <strong class="text-decoration-underline">   {{ level }} </strong> mode
        </span>
      </h4>
    </transition-group>

    <div
      v-if="!gameStart && isComputer"
      class="d-flex justify-content-center my-2"
    >
      <select
        name="level"
        v-model="level"
        id="level"
        class="form-select"
        :disabled="usedBoxes > 0"
      >
        <option value="hard" default>Choose Difficulty Level (Default Hard)</option>
        <option value="noob">Noob</option>
        <option value="easy">Easy</option>
        <option value="medium">Medium</option>
        <option value="hard">Hard</option>
      </select>
    </div>

    <h4
      class="p-2 alert-warning d-inline-block rounded-2"
      v-if="!isComputer"
    >
      Player Move : "{{ player }}"
    </h4>
 <!-- </transition-group> -->

    <h1 v-if="winner == 'draw'" :style="!isComputer?{fontSize: '50px'}:{}" class="alert alert-warning">Its A Draw!</h1>
    <h1
      class="text-center mx-2 alert alert-success"
      :class="[isComputer && winner === 'O' ? 'alert-danger' : 'alert success']"
      v-if="winner != 'draw' && winner"
    >
      <span v-if="!isComputer">
        <strong v-if="winner != 'draw'">🎉 Player {{ winner }} wins! </strong>
      </span>
      <span v-else
        >🎉
        <strong v-if="winner == 'X'">You</strong>
        <strong v-else>Computer</strong>
        Wins!
      </span>
    </h1>

    </section>

    <!-- !Game Board Section -->
  <section :class="[isRow?'col-md-6 col-sm-12':'']">

  <!-- !Main Game Board -->
    <div class="board d-block margin-auto">
      <div v-for="(row, x) in squares" :key="x" class="row">

        <div
          v-for="(square, y) in row"
          :key="y"
          @click="move(x, y)"
          class="col square"
          :class="[winBoxes[x][y]==='win'?'winBox':'', squareClasses[x][y]]"
        >
    <transition
    name="custom-classes-transition-{{x}}-{{y}}"
    enter-active-class="animated bounceIn"
    leave-active-class="animated bounceOut">
          {{ square }}
    </transition>
        </div>
      </div>
    </div>
    </section>

  </div>
    <!-- </transition-group> -->


      <section class="d-flex justify-content-around">
        <div
          style="border-radius: 16px"
          class="btn btn-block btn-outline-danger my-2 ml-2"
          @click="restart"
        >
          Restart <i class="fa fa-refresh"></i>
        </div>

        <div
          style="border-radius: 16px"
          class="btn btn-block btn-outline-success my-2"
          @click="next"
        >
          Next Round <i class="fa fa-arrow-right"></i>
        </div>
      </section>
    <!-- !Game Status - Points, Round -->
    <footer class="mt-3 gameStatus" >
      <div class="d-flex p-1 flex-wrap justify-content-around">
        <h5 class="rounded-pill text-primary font-weight-bolder">
          <span v-if="isComputer"><i class="fa fa-user"></i> You</span>
          <span v-else><i class="fa fa-user-circle"></i> Player X</span>:
          <span class="font-weight-bold">{{ playerXPoints }}</span>
        </h5>
        <!-- <h5 class="p-2 rounded-pill d-block font-weight-bold text-black">
          <span><i class="fa fa-gamepad"></i> Round : </span>
          <span class="font-weight-bold" style="font-weight: bold">{{
            round
          }}</span>
        </h5> -->
        <h5 class="rounded-pill text-danger">
          <span v-if="isComputer"><i class="fa fa-desktop"></i> Computer</span>
          <span v-else><i class="fa fa-user-circle"></i> Player Y</span> :
          <span class="font-weight-bold">{{ playerOPoints }}</span>
        </h5>
      </div>
    </footer>

  </div>
</template>

<script>
import { reactive, toRefs, ref, computed} from "vue";
export default {
  name: "Board",
  setup() {
    //* Initialize all sounds for the game
    const audio = new Audio("musics/ting.mp3");

    const squares = ref([
      ["", "", ""],
      ["", "", ""],
      ["", "", ""],
    ]);

    const utils = reactive({
      player: "X",
      gameEnd: computed(() => {
        return Boolean(winner.value);
      }),
      color: computed(() => {
        return utils.gameEnd ? "rgb(233,233,233)" : "none";
      }),
      level: "hard",
      isComputer: true,
      usedBoxes: computed(() => {
        return squares.value.flat().filter((x) => x !== "").length;
      }),
      leftBoxes: computed(() => {
        return squares.value.flat().filter((x) => x === "").length;
      }),
      gameStart: computed(()=> {
        return utils.usedBoxes>0||utils.round>1
      }),
      playerXPoints: 0,
      playerOPoints: 0,
      round: 1,
      isRow: true,
      playFont: computed(()=> {
        if (utils.isRow) return "75px"
        else return "75px"
      }),
      squareSize: computed(()=> {
        if(utils.isRow) return "120px"
        else return "100px"
      }),
      winBoxes : [
        ["","",""],
        ["","",""],
        ["","",""]
      ],
      conditionThatMatched : "",  
      //Classes for squares
      squareClasses: [
        ["top left","top middle","top right"],
        ["left", "middle","right"],
        ["bottom left","bottom middle","bottom right"]
      ],
      soundsPath: "musics",
      //Marking color to mark the win conditions used in css
      markingColor: computed(()=> {
          return "#ff0111" //Red
      }),
      isMuted: false,
    });

    const winConditions = [
      //Vertically- rows
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      //Horizontally- columns
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      //Corner
      [0, 4, 8],
      [2, 4, 6],
    ];

    //Play Sound Method
    const playSounds = async (action) => {
      if(action==="move"){
        audio.play();
      }
    }

     const winner = computed(() => {
      const win = findWinner(squares.value.flat());
      if (!win && utils.usedBoxes === 9) {
        updatePlayerPoints("draw");
        return "draw";
      }
      if(win==="X"||win==="O") updateWinBoxes(utils.winBoxes.flat())
      if(win) playSounds("move")
      updatePlayerPoints(win);
      return win;

    });

    //* For marking the boxes which matches the win conditions
    //* Take utils.winBoxes.flat() as argument
    const updateWinBoxes = (winBoxesFlat)=> {
      utils.conditionThatMatched.forEach((c)=> {
        winBoxesFlat[c] = "win"
      })
      utils.conditionThatMatched = "" //Empty the conditions
      utils.winBoxes = array1dTo2d(winBoxesFlat)
    }

    const move = (x, y) => {
      if (squares.value[x][y] === "" && !utils.gameEnd) {
        squares.value[x][y] = utils.player;
        playerSwap(); //!Swap the player to "O"
        if (utils.isComputer&&!winner.value) executeComputer(); //!Running Computer Move
      }
    };

    const executeComputer = () => {
      if (utils.player === "O" && utils.usedBoxes < 9) {
        const newSquares = computerChoice(squares.value.flat());
        squares.value = newSquares;
        // playSounds("move")
      }
    };

    //* Swap player between 'X' and 'O'
    const playerSwap = () => {
      utils.player = utils.player === "X" ? "O" : "X";
    };

     //* Generating Computer choice
     //! Dealing with flat array of 2D squares array
    const computerChoice = (square) => {
      let choice;
      choice = smartChoice(square, utils.level);
      if (choice === null) {
        do {
          choice = Math.floor(Math.random() * 9); //Random number between 0-8
        } while (square[choice] !== "");
      }
      square[choice] = utils.player;
      playerSwap(); //!Swap the player to 'X' again
      return array1dTo2d(square)
    };

    //* Player is X or O and square is squares.value.flat()
    const findWinChances = (square, player)=> {
      for (let conditions of winConditions) {
          const [a, b, c] = conditions;
          if (square[a] === "" && square[b] === player && square[c] === player) return a;
          else if (square[b] === "" && square[a] === player && square[c] === player) return b;
          else if (square[c] === "" && square[a] === player && square[b] === player) return c;
      }
          return null
    }

    //? Making the computer understand the action based on the positions and user actions
    const smartChoice = (square, level) => {
        let returnPosition;
        //! Level Hard
        if(level==="hard"){
          //* Priotorize computer's win possibilities
          returnPosition = findWinChances(square, "O")
          //*If there is no chances for computer then find the user win possibilites and prevent from winning
          if(returnPosition == null) returnPosition = findWinChances(square, "X")
        }

        //! Level Medium
        else if (level==="medium") {
          //* Prevent the user from winning
          returnPosition = findWinChances(square, "X")
        }
        else if (level==="easy") {
          //* Only focuses on computer win. Don't prevent user from winning
          returnPosition = findWinChances(square, "O")
        }
        else if (level==="noob"){
          //* Randomly Make all Choices
          returnPosition = null
        }
        return returnPosition
    };

    //* For converting squares flat array to 2D again
    const array1dTo2d = (array)=> {
      const newArray = [];
      while (array.length) newArray.push(array.splice(0, 3));
      return newArray;
    }

    //* Update the points
    const updatePlayerPoints = (winner) => {
      if (winner) {
        if (winner === "X") {
          utils.playerXPoints = utils.playerXPoints + 1;
        } else if (winner === "O") {
          utils.playerOPoints = utils.playerOPoints + 1;
        }
      }
    };

    //* find winner along with the winConditions
    //* Returns the winner 'X' or 'O'
    const findWinner = (square) => {
      for (const conditions of winConditions) {
        const [a, b, c] = conditions;
        if (square[a] && square[a] === square[b] && square[a] === square[c]) {
          utils.conditionThatMatched = [a,b,c] //For accessing the boxes
          return square[a]; // Returns player that matches all conditions
        }
      }
      return "";
    };

    const restart = () => {
      if (confirm("Do you really want to restart the game?")) {
        utils.player = "X";
        utils.playerXPoints = 0;
        utils.playerOPoints = 0;
        utils.round = 1;
        squares.value = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""],
        ];
      utils.winBoxes = [
        ["", "", ""],
        ["", "", ""],
        ["", "", ""],
      ]
      }
    };

    const next = () => {
      if (winner.value) {
        utils.player = "X";
        squares.value = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""],
        ];
        utils.winBoxes = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""],
        ]
        utils.round += 1;
      } else {
        alert("Can't go to next round until finis current round.");
      }
    };


    return {
      ...toRefs(utils),
      move,
      squares,
      winner,
      next,
      restart,
    };
  },
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@500&family=Varela+Round&display=swap");
.board {
  max-width: fit-content;
  display: block;
  margin: auto;
}
:root {
  animation-duration: 1s;
}
h1 {
  font-family: "Varela Round", sans-serif;
  font-size: 2rem;
}

.alert {
  padding: 8px !important;
  border-radius: 30px!important;
}

.square {
  color: black;
  width: v-bind(squareSize);
  height: v-bind(squareSize);
  border: 2px solid black;
  border-radius: 2px;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: v-bind(playFont);
  text-align: center;
  cursor: pointer;
  background: v-bind(color);
  font-family: "Varela Round", sans-serif;
}
.square:hover {
  background: rgb(233,233,233);
}

.winBox {
  color: v-bind(markingColor);
  background: rgb(255, 255, 255)!important;
}

.activeBox {
  background: skyblue;
}

.switch {
  display: flex;
  justify-content: center;
  font-size: 29px;
  cursor: pointer !important;
}
input {
  cursor: pointer;
}
h5,
h4,
h3 {
  font-family: "Kanit", sans-serif;
}

.gameStatus {
  font-size: 30px !important;
}
footer {
  border: 2px dashed rgb(68, 68, 68);
  border-radius: 30px;
}

#level{
  width: 330px;
}

/* Squares Classes */
.top{
  border-top: none!important;
}

.bottom{
  border-bottom: none!important;
}

.left{
  border-left: none!important;
}

.right{
  border-right: none!important;;
}

@media screen and (max-width: 766px) {
  #toggle{
    display: none;
  }  
}
@media screen and (max-width: 370px) {
  .square {
    width: 90px!important;
    height: 90px!important;
    font-size: 60px!important;
  }
  #level {
    width: 250px;
  }
}
</style>

DEV Community: RF Fahad Islam

Elastic Search in 1minute

What is Elasticsearch?:

Benefits of Using Elasticsearch:

How Does Elasticsearch Work?:

Documents:

Search:

Conclusion:

FAQs and Store Snippets:

Experience I gained as a developer by Building a blogging platform "Blogsphere"

Hi, devs 👋

💻Tech stacks

💥My Experience

😟Challenges I Faced

🎯Skills I learned

🥜In a Nutshell

Conclusion

Top IT Skills that Will Make You Unstoppable in 2023

RF Fahad Islam ・ Jan 7 ・ 6 min read

Top 10 Python Tips and Tricks (Part -1): Unleash the full potential

RF Fahad Islam ・ Jan 8 ・ 2 min read

🐍Python GUI Project: A step-by-step guide to make Drawing Canvas app

RF Fahad Islam ・ Nov 3 '21 ・ 10 min read

Hands on Machine Learning with Python

Top 10 Python Tips and Tricks (Part -1): Unleash the full potential

Hi, Devs👋

Python tips and tricks: Part-1

Some Quick Python Hacks

Top 50 Python Project Ideas for 2023

RF Fahad Islam ・ Jan 6 ・ 4 min read

Top IT Skills that Will Make You Unstoppable in 2023

Introduction

List of SKILLS:

✨Soft Skills (must)

💻Tech Skills

Conclusion

Top 50 Python Project Ideas for 2023

Introduction

✨Top Python Projects

😸Beginners Project Ideas:

🤓Advanced Project Ideas:

🏆Fullstack Python Website Project Ideas

Conclusion😀

More:

Top IT Skills that Will Make You Unstoppable in 2023

RF Fahad Islam ・ Jan 7 '23

Top 10 Python Tips and Tricks (Part -1): Unleash the full potential

RF Fahad Islam ・ Jan 8 '23

🐍Python GUI Project: A step-by-step guide to make Drawing Canvas app

RF Fahad Islam ・ Nov 3 '21

Why you should learn Python in 2023

Building A Drawing Canvas GUI using python (Step-to-step Guide)

✨Introduction

👀 Overview

🖥 Step by step: Drawing Pad Project

📌Imports and Modules

📌Defining Variables

🎨 Create Window and Canvas

Canvas Widget:

📌Building Design and Widgets

🧠App Logic

📌Function to Update Values :

📌Draw Shapes on Canvas

1. Create shape functions

2. Generate shapes on mouse dragging

📌Clear Canvas

📌Saving Drawing in Pickle file

📌Retrieve Drawing from File

That's the end. Now our app is complete!

👩‍💻 Final Code

📃Conclusion

Debugging the Laughter: Programming Memes for Nerdy Humor

Integrate Google Authentication in Flask Apps Quickly and Easily

First, Look at the simple app of Flask

Install authlib for the integration

Get Google Auth API Keys

Initialize auth app

Routes for google login page

Final Code

Tic Tac Toe Game with Vue JS