PyQt5 is a very powerful python gui development framework. This post shows the complete installation and setup of PyQt5 with qt designer tool.

First you need to install Python for this. ALso, make sure the the path is added to the path vatiables. Then open the Windows terminal, cmd and type pip and press enter. If it shows an error then that means, python is not added to path. If it works, then follow the below steps to install and setup pyqt5.

PyQt5 Installation Setup

$ pip install pyqt5

Type the above code in Windows terminal and press Enter key. Wait for the installation

PyQt5 Tools Setup

$ pip install pyqt5-tools

This code will install PyQt5 tools such as qt designer to make the gui.

Qt Designer path

C:\Users\$Username$\AppData\Local\Programs\Python\Python39\Lib\site-packages\qt5_applications\Qt\bin

This is how the qt designer window looks like...

So, I think that's it for this post... See you in the next.

.ui to .py file conversion

Qt designer is a designer for GUI. We can designs in it and then save them as a .ui file. When you are working with PyQt5 for making GUI in python, you have to export the .ui file to a .py file. We can do this by using qt-tools. pyuic5 command is used in Python to do this. Go to the path where the ui is saved and enter the below command.

pyuic5 command to convert .ui to .py

$ pyuic5 xyz.ui -o xyz.py

To setup complete PyQt5 with Qt tools and install Qt Designer,
Click here

So, I think that's it for this post... See you in the next.

When you are working with PyQt5, you are using the default OS style of application. The design looks very simple for apps. So, if you are making a cutom app, you will cuystomise the top bar in few cases to have a better design. So, when you are customising the design, you will see that the window has no longer been movable. Thus, you need to write the logic to make the window movable again.
The default Window app style looks like this
The code for doing this is given below...

PyQt5 draggable window Code

class movable(QtWidgets.QWidget):
    def __init__(self):
        super(movable, self).__init__()
    def mousePressEvent(self, event):
        if event.button() == QtCore.Qt.LeftButton:
            self.dragPosition = event.globalPos() - self.frameGeometry().topLeft()
            event.accept()
    def mouseMoveEvent(self, event):
        if event.buttons() == QtCore.Qt.LeftButton:
            self.move(event.globalPos() - self.dragPosition)
            event.accept()

You will have to first make a class like this. Then you have to pass the class as parameter in the main window code. Like this...

class mainWindow(movable, Ui_Form):
    def __init__(self):

Here UI form is the form of the design.

So, I think that's it for this post. See you in the next...

Make your own Web Browser in Python using PyQt5. PyQt5 is a very powerful Python framework to make modern GUIs. With help of Python PyQt5 QtWebWidgets, it is very easy to amke your own custom web browser with a few lines of code.

PyQt5 Basic code

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *

class MainWindow(QMainWindow):
    def __init__(self):
        # Main Window
        super(MainWindow, self).__init__()
        self.showMaximized()

app = QApplication(sys.argv)
QApplication.setApplicationName("Browser")
window = MainWindow()
app.exec_()

PyQt5 Browser code using QtWebEngine

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

class MainWindow(QMainWindow):
    def __init__(self):
        # Main Window
        super(MainWindow, self).__init__()
        self.browser = QWebEngineView()
        self.browser.setUrl(QUrl('https://google.com'))
        self.setCentralWidget(self.browser)
        self.showMaximized()

        # nav bar
        navBar = QToolBar()
        self.addToolBar(navBar)

        backBtn = QAction("Back", self)     # back Button
        backBtn.triggered.connect(self.browser.back)
        navBar.addAction(backBtn)

        forwardBtn = QAction("Forward", self)   # forward Button
        forwardBtn.triggered.connect(self.browser.forward)
        navBar.addAction(forwardBtn)

        relBtn = QAction("Reload", self)    # Reload Button
        relBtn.triggered.connect(self.browser.reload)
        navBar.addAction(relBtn)

app = QApplication(sys.argv)
QApplication.setApplicationName("Browser")
window = MainWindow()
app.exec_()

The final look of the browser after the above code.

So, I think that's it for this post. See you in the next...

React JS custom text editor modal component.

    
        
import React, { useState } from 'react'

export default function Form() {
    const clear = () => {
        let newtext = text.substr(0, -1);
        setText(newtext);
    }
    const copy = () => {
        navigator.clipboard.writeText(text)
    }
    const upper = () => {
        let newtext = text.toUpperCase();
        setText(newtext);
    }
    const capitalize = () => {
        let newtext = text.charAt(0).toUpperCase() + text.slice(1);
        setText(newtext);
    }
    const remove_space = (event) => {
        let newtext = text.split(' ').filter(s => s).join(' ');
        setText(newtext);
    }
    const handleOnChange = (event) => {
        setText(event.target.value);
    }
    const [text, setText] = useState("");
    return (
        <>
            <div classname="form-group container p-4">

                {/* buttons */}
                <button 0="" classname="btn  btn-primary" data-bs-placement="top" data-bs-toggle="tooltip" disabled="{text.length" onclick="{clear}" title="Tooltip on top"><i classname="far fa-trash-alt"></i></button>
                <button 0="" classname="btn  btn-primary" disabled="{text.length" onclick="{copy}"><i classname="far fa-copy"></i></button>
                <button 0="" classname="btn  btn-primary" disabled="{text.length" onclick="{upper}"><i classname="far fa-text-size"></i></button>
                <button 0="" classname="btn  btn-primary" disabled="{text.length" onclick="{capitalize}"><i classname="fas fa-font-case"></i></button>
                <button 0="" classname="btn btn-primary" disabled="{text.length" onclick="{remove_space}"><i classname="fas fa-line-height fa-rotate-270"></i></button>

                {/* Textarea */}
                <textarea classname="thetext form-control mb-4" id="exampleFormControlTextarea1" onchange="{handleOnChange}" rows="8" value="{text}"></textarea>
                <h4 classname="mt-4">Text Count</h4>
                <div classname="my-2">
                    <p>{text.split(/\s+/).filter((element) =&gt; { return element.length !== 0 }).length} words and {text.split(' ').filter(s =&gt; s).join('').length} characters</p>
                </div>
            </div>
        &lt;/&gt;
    )
}

        
        
        
How to Learn React Step by Step:
React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS... Further Reading

Make a working Navbar component in react.
First import the links

    
        
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" rel="stylesheet"></link>
<link crossorigin="anonymous" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        

React

    
        
import React from 'react'
import { Link } from 'react-router-dom'

export default function Navbar() {
    return (
        <>
            <nav classname="navbar navbar-expand-md bg-light navbar-light">
                <link classname="navbar-brand" to="/"></link>Social
                <button classname="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse" type="button">
                    <i classname="fal fa-bars"></i>
                </button>
                <div classname="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul classname="navbar-nav">
                        <li classname="nav-item">
                            <link classname="nav-link" to="/"></link>Home
                        </li>
                        <li classname="nav-item">
                            <link classname="nav-link" to="/about"></link>About
                        </li>
                    </ul>
                    <div classname="d-flex navbar-nav">
                        <li>
                            <link classname="nav-item btn-danger btn mx-3" to="/login"></link>Login
                        </li>
                        <li>
                            <link classname="nav-item btn border border-primary" to="/"></link>Sign Up
                        </li>
                    </div>
                </div>
            </nav>
        &lt;/&gt;
    )
}

How to Learn React Step by Step:

React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS... Further Reading

Make a text typing Animation in JavaScript.

HTML Code

    
        
<div class="top-wrapper">
	<p>
        </p><h2 class="txt-rotate" data-period="900" data-rotate="[&quot;Hello User&quot;, &quot;Welcome to MrDevKnown&quot;, &quot;JavaScript Tuorial&quot;, &quot;Text typing effect in JS&quot;]">
        </h2>
	<p></p>
</div>
    

JavaScript Code

var TxtRotate = function (el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtRotate.prototype.tick = function () {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
            this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
            this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '' + this.txt + '';

        var that = this;
        var delta = 300 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
            delta = this.period;
            this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
            this.isDeleting = false;
            this.loopNum++;
            delta = 500;
        }

        setTimeout(function () {
            that.tick();
        }, delta);
    };

    window.onload = function () {
        var elements = document.getElementsByClassName('txt-rotate');
        for (var i = 0; i < elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-rotate');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
                new TxtRotate(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
        document.body.appendChild(css);
    };

JavaScript Music Player Web App:
That was 26 July, 2021. I wanted to improve my front end development skills. So I decided to make something that would also help me in Javascript. Because seriously, I am worse at it! At the end, I sat on my computer and started looking for an idea. Suddenly, I don't know why but one line said by Mark Zuckerberg hit me on my mind. Mark has once said during his speech at Harvard, "Facebook was not the first thing that I built... I also built games, chat systems, study tools and music players. I’m not alone. JK Rowling got rejected 12 times before publishing Harry Potter. Even Beyonce had to make hundreds of songs to get Halo. The greatest successes come from having the freedom to fail."
Well I know that's very motivating line... But I am not talking about that! Well, I know you got what I am talking about, but I need to explain this... 

Did you notice, he said Music Players... Well, That's where the idea came from... Thank you Zuck! :)
So, first things first, I did what's every web dev's first step, that is to create a index.html file... Then it all started... Firstly I created the basic structure of the website in html then added some css in it... Further Reading 

So, some of you might be aware a language known as PHP. PHP is a hypertext processing language which is used to make the backend of a website. It is not so popular today due to some of the flaws in it but I would say it is a good language. Just the fact is that it is dead. So, if you want to focus on your coding skills, you can definitely learn PHP.

Like you must have heard about Facebook, the biggest social network at this time. Facebook was even built in PHP. So, it is not that bad language. Yes it creates some issues with development because of its less popularity which even I faced in making the blog that I am mentioning in this post. TheShiveshNetwork

You can see the site and tell me the bugs that you find. Like seriously, I stopped working on this project due to less motivation. This took me weeks to build but still has some bugs. So, I need some motivation to work on it.

And by the way, that story, The Z Game is written by me. How is that? You can give a review about that in the comments below. If I get good response, I can continue that as well.

So, I think that's it for this post. See you in the next...

Python is among the most popular programming languages at this time. It is a fact that if you want to learn programming, the most important thing is to build your logic. Some people find problems in getting logic building programs. So, here are a few of my personal logic building programs you can see and build you rlogic. First, read the top comments (starting with # symbol at the top of programs). They tell what the below lines are going to do. Try to build your own logic after reading those comments. Then you can read my code to get some extra information. So, below are the programs you can have a look.

# program 1: that finds whether the entered no. is 1/2/3 digits
a = int(input("Enter a no.: "))

if a < 0 or a > 999:
    print("Please enter a no. in range 1 to 999")
else:
    if a<10:
        print("The no. is a 1-digit number")
    elif a<100:
        print("The no. is a 2-digit number")
    elif a<1000:
        print("The no. is a 3-digit number")
        
        
# program 2: ask user to input numbers until entered 'done', then print the sum of all entered numbers.
c=0

while True:
    a = input("Enter a no.: ")
    if a == 'done':
        print(c)
        break
    elif a != 'done' and a.isnumeric() != True:
        print("invalid key command")
        break
    else:
        c += int(a)


# Program 3: ask the day no. and the first day of a year. Then print the day on the day no. provided
_day = int(input("Enter the day no. from 2 to 365: "))
day_n = str(input("Enter the first day of that year: "))
day_list = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]

if day_n in day_list:
    a = _day % 7
    for i in range(0, 7):
        day_list_i = day_list[i]
        if day_list_i == day_n:
            for j in range (i, i+7):
                day_var = day_list[(a+j)%7]
            print(day_var)
else:
    print("Please don't try to fool the program :')")


# Program 4: miles to k.m. conversion table

print("miles\t|\tk.m.")
for data in range(1, 11):
    print(f"{data}\t|\t{data * 1.609}")
    

# Program 5: Print the stats of entered string (like total lowercase/uppercase characters adn no. of alphabets and numbers)
l = input("Enter a string: ")
lowercount = uppercount = alphabet = numbers = 0
for a in l:
    if a.islower():
        lowercount += 1
    if a.isupper():
        uppercount += 1
    if a.isalpha():
        alphabet += 1
    if a.isnumeric():
        numbers += 1

print(f"Lowercase: {lowercount}\nUppercase: {uppercount}\nAlphabets: {alphabet}\nNumbers: {numbers}")

So, I think that's it for this post. If you want to learn react follow the above playlist. See you in the next post.

So, as I meantioned in my last post, I started to learn React few months back. So, in this post I am going to show you the web app that I created in react. I learnt the same from the tutorials but I modified the code to remove some bugs. The name of the Website is TextUtyls

In this website, you can come and paste a part of text then use some tools in the text, at last copy the text. I know its very easy, but we start learning things from an easy project. And definitely, if you are going to make this, you will definitely learn a lot of things.

You can have a look at the website Click here

You can get the complete code of the website Click here

So, I think that's it for this post. If you want to learn react follow the above playlist. See you in the next post.

React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS

So, a few months back from the time I wrote this post, I started to learn react. I followed a YouTube playlist that helped me. And if you are going to learn react then you can also follow it. But this is only if you know hindi. To access the playlist, click here.

This playlist makes you learn react by making projects. Which is I suppose the best way to learn programming. Like if you ask me, I never follow any tutorials. I just come across an idea and start building it. Yeah, most of the time I get frustrated as my ideas don't work. But this is how programming is. You learn to deal with problems. *Also, this is not a promotional post.*

So, I think that's it for this post. If you want to learn react follow the above playlist. See you in the next post.