Making Python Scripts Work In Browser For Web App Creation

Published

2 years ago

June 25, 2022

Making Python Scripts Work In Browser For Web App Creation

Making Python Scripts work in a web browser involves handling web app functions inside a web page via Python Programming Language.

Since JavaScript is the main programming language for making a web browser work, and a web page interactive, Python is usually used for data science, machine learning, and artificial intelligence.

Even if we have back-end infrastructures like Django, and Flask, or static-site-generators like Jekyll, Python is usually behind JavaScript for web development.

But thanks to the latest improvements, JavaScript’s future is open to discussion. “PyScript” allows Python Scripts to work easily within web components.

According to PyScript.net:

“PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface and the power of Pyodide, WASM, and modern web technologies. The PyScript framework provides users at every experience level with access to an expressive, easy-to-learn programming language with countless applications.

In this column, you’ll learn what PyScript is, see an example, learn about alternatives, and also find how to create a custom web app with Python and PyScript.

What Is The JavaScript To Python Migration?

Python is a human-readable programming language.

Thus, there are many Python intermediary program languages to help JavaScript and Java modules and packages are being used in the Python environment.

For example, “TensorFlow” is mainly a JS Package, or Plotly and Selenium.

There are even special packages to make JavaScript code turn into Python code, such as Js2Py.

Why is understanding JavaScript behind Python important?

Because using Python Scripts inside the web browser doesn’t mean that the age of JavaScript is ending for web development.

JavaScript is still functioning behind the Python Scripts in the web browser.

What Is PyScript & How Can You Use It For Creating Web Applications?

PyScript is a framework for making web browsers use Python Scripts.

PyScript turns Python code blocks into Javascript equivalents behind the scenes.

To use PyScript inside a web browser, follow these steps.

Use the stylesheet and JavaScript in the <head> area of the HTML File.

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />

<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

Use the Python Code inside the “<pyscript></pyscript>” web component.
Pay attention to the indentation.
Do not format the Python code inside the “<pyscript/>” web component.
Use the shortcuts and arguments of the PyScript for importing Python modules and packages.
Use the CSS Classes and IDs to insert the results into the HTML Documents’ specific Div.

An Example Of Running Python Script Inside Of Web Browser

An example of running a Python script in the browser is below.

<html>
<head>
     <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
     <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous">
     <py-env>
- numpy
- matplotlib
     </py-env>
</head>

The <head> area of the HTML File represents the most important resources.

We used the “pyscript.css” and “pyscript.js.”

We also used the “<py-env/>” web component to make the Python modules to be imported.

In this example, we have imported the “numpy” and “matplotlib.”

In the “<body>” section, we will use these modules to create a Python Line Plot inside a web browser.

<body>
     <h1>Let's plot random numbers</h1>
     <div id="plot"></div>
     <py-script output="plot">

At the beginning of the <body>, we used a “div” with the “plot” ID.

It is necessary for making the Python script’s output insertion.

The “<py-script output=”plot”>” is necessary to match the specific HTML Div’s ID value.

 import matplotlib.pyplot as plt

 import numpy as np
 
 x = np.random.randn(1000)

 y = np.random.randn(1000)

 fig, ax = plt.subplots()
 ax.scatter(x, y)
 fig
     </py-script>
</body>
</html>

The Python Script above is a simple line plot script. And you can see the result below.

Screenshot by author, June 2022

The example above shows how to create a line plot with the help of PyScript.

How To See The Terminal Output Of The PyScript

For every Python Script, there is always a terminal that works and outputs the messages from the computation process.

Screenshot by author, June 2022

The browser console should be read and followed by the developer to see how the PyScript works and what happens behind the scenes.

For example, the screenshot above shows the running process of the Python script that we have created.

It explains how the “numpy”, or “matplotlib” and their dependencies are loaded, and used by which resource.

How To Create a Custom Web App With Python And PyScript?

To create a custom Web App with Python and PyScript, follow these steps:

Import the necessary JS and CSS files from PyScript.
Create an HTML Document with proper HTML Tag syntax.
Use the “py-script” HTML tag with the “output” attribute.
Use an HTML Div with a specific ID to match the “output” attribute value.
Use “py-env” for the non-built-in libraries of Python.
Insert Python Script inside the “py-script” tag without syntax and indentation error.
Use “return” in a Python function, or “print” to end your script.
Refresh the web page to see the results.

An example of a Custom Python Web App for “random password generation” based on the given password length is below.

Screenshot by author, June 2022

The screenshot above demonstrates an example of PyScript in an HTML Document to generate custom passwords.

The Python script that I used is below.

import string
import random
characters = list(string.ascii_letters + string.digits + "!@#$%^&*()")
def generate_random_password():
    length = int(input("Enter password length: "))
    random.shuffle(characters)
    password = []
    for i in range(length):
        password.append(random.choice(characters))
    random.shuffle(password)
    print("".join(password))
generate_random_password()

And, the live version of the custom Python Web App is here.

Just write a numeric value into the input area.

Screenshot by author, June 2022

And, it will give you a simple 45-character password.

Screenshot by author, June 2022

You can use this technology for some of my other SEJ Articles for auditing sitemaps, or visualization of hot topics from news websites.

Or, in the future, we can demonstrate more sophisticated web apps via PyScript.

What Are The Disadvantages Of PyScript?

The main disadvantage of PyScript is the lack of support.

PyScript is announced during Pycon 2022 to Python developers.

It was a big and exciting event, but community expectations were higher than the current state of PyScript.

Due to weak community support, PyScript development might be slower in the future, but when we think of the journey of Python, it is not surprising.

Python wasn’t that popular until the last five years, because it wasn’t known.

Screenshot by author, June 2022

Above, you can see how Python suppressed the search demand of JavaScript overall.

The main reason for Python’s popularity growth is the “pandas” library.

That’s why, ML and Data Science are the main focuses of Python, but it doesn’t have to continue in that way.

Thus, PyScript should be taken into serious consideration for the future of web development.

Screenshot by author, June 2022

What Are The Alternatives To PyScript?

Alternatives to PyScript are not equivalent to PyScript since it directly runs on the browser, but still, there are different methods to use Python scripts inside a website indirectly.

These included “brython”, “pyodide”, “Appwrite”, “django-readers”, “appdeamon”.

Some alternatives to PyScript are for Firebase such as Appwrite, and some other work for Web Development such as Brython.

Bryhthon for Web App Creation

Brython is older than Pyscript, and it focuses on making Python the primary language for web development with “text/python” file type instead of “text/javascript”.

Can PyScript And Brython Affect Search Engines And SEO?

Yes, in the future, PyScript and Brython can increase their effect on the web development industry.

Changing web development technologies and industries affect search engine crawlers and protocols.

If a search engine starts to see “text/python” files, or “.py” scripts in the HTML source code, it should be able to make it work to see the web page as is.

At the moment, PyScript works via JavaScript, and Brython is already at the beginning of its journey despite its being older.

Other PyScript alternatives work via Node.js like back-end programming libraries, or Firebase like cloud-based systems.

Thus, in the future, Google, as a heavily Python-coded search engine, might need to render Python files for crawling and rendering web pages.

Conclusion For Python As Web Scripting

For people who love coding, it doesn’t matter whether you use Python or JavaScript for a certain task.

But, Python is the easiest programming language to learn as human-readable, it gives more functionality with fewer characters.

Most data scientists and ML (machine learning) Engineers know Python in a good way, and transferring their talents into web development would be similar to the unification of two different universes.

More resources:

Featured Image: TippaPatt/Shutterstock

Source link

Related Topics:#making app browser Creation python Scripts seo Web Work

Up Next

New Updates To Google Page Experience Scoring Revealed At SEODay

Don't Miss

Does Google Crawl URLs In Structured Data?

Click to comment

You must be logged in to post a comment Login

Google’s AI Overviews Avoid Political Content, New Data Shows

Published

14 hours ago

October 6, 2024

Max

Google's AI Overviews Avoid Political Content, New Data Shows

Study reveals Google’s cautious approach to AI-generated content in sensitive search results, varying across health, finance, legal, and political topics.

Google shows AI Overviews for 50% of YMYL topics, with legal queries triggering them most often.
Health and finance AI Overviews frequently include disclaimers urging users to consult professionals.
Google avoids generating AI Overviews for sensitive topics like mental health, elections, and specific medications.

Source link

Executive Director Of WordPress Resigns

Published

1 day ago

October 5, 2024

Max

WordPress Executive Director Josepha Haden Chomphosy resigns,

Josepha Haden Chomphosy, Executive Director of the WordPress Project, officially announced her resignation, ending a nine-year tenure. This comes just two weeks after Matt Mullenweg launched a controversial campaign against a managed WordPress host, which responded by filing a federal lawsuit against him and Automattic.

She posted an upbeat notice on her personal blog, reaffirming her belief in the open source community as positive economic force as well as the importance of strong opinions that are “loosely held.”

She wrote:

“This week marks my last as the Executive Director of the WordPress project. My time with WordPress has transformed me, both as a leader and an advocate. There’s still more to do in our shared quest to secure a self-sustaining future of the open source project that we all love, and my belief in our global community of contributors remains unchanged.

…I still believe that open source is an idea that can transform generations. I believe in the power of a good-hearted group of people. I believe in the importance of strong opinions, loosely held. And I believe the world will always need the more equitable opportunities that well-maintained open source can provide: access to knowledge and learning, easy-to-join peer and business networks, the amplification of unheard voices, and a chance to tap into economic opportunity for those who weren’t born into it.”

Turmoil At WordPress

The resignation comes amidst the backdrop of a conflict between WordPress co-founder Matt Mullenweg and the managed WordPress web host WP Engine, which has brought unprecedented turmoil within the WordPress community, including a federal lawsuit filed by WP Engine accusing Mullenweg of attempted extortion.

Resignation News Was Leaked

The news about the resignation was leaked on October 2nd by the founder of the WordPress news site WP Tavern (now owned by Matt Mullenweg), who tweeted that he had spoken with Josepha that evening, who announced her resignation.

He posted:

“I spoke with Josepha tonight. I can confirm that she’s no longer at Automattic.

She’s working on a statement for the community. She’s in good spirits despite the turmoil.”

Screenshot Of Deleted Tweet

Josepha tweeted the following response the next day:

“Ok, this is not how I expected that news to come to y’all. I apologize that this is the first many of you heard of it. Please don’t speculate about anything.”

Rocky Period For WordPress

While her resignation was somewhat of an open secret it’s still a significant event because of recent events at WordPress, including the resignations of 8.4% of Automattic employees as a result of an offer of a generous severance package to all employees who no longer wished to work there.

Read the official announcement:

Thank you, WordPress

Featured Image by Shutterstock/Wirestock Creators

Source link

SEO

8% Of Automattic Employees Choose To Resign

Published

2 days ago

October 5, 2024

Max

8% Of Automattic Employees Choose To Resign

WordPress co-founder and Automattic CEO announced today that he offered Automattic employees the chance to resign with a severance pay and a total of 8.4 percent. Mullenweg offered $30,000 or six months of salary, whichever one is higher, with a total of 159 people taking his offer.

Reactions Of Automattic Employees

Given the recent controversies created by Mullenweg, one might be tempted to view the walkout as a vote of no-confidence in Mullenweg. But that would be a mistake because some of the employees announcing their resignations either praised Mullenweg or simply announced their resignation while many others tweeted how happy they are to stay at Automattic.

One former employee tweeted that he was sad about recent developments but also praised Mullenweg and Automattic as an employer.

He shared:

“Today was my last day at Automattic. I spent the last 2 years building large scale ML and generative AI infra and products, and a lot of time on robotics at night and on weekends.

I’m going to spend the next month taking a break, getting married, and visiting family in Australia.

I have some really fun ideas of things to build that I’ve been storing up for a while. Now I get to build them. Get in touch if you’d like to build AI products together.”

Another former employee, Naoko Takano, is a 14 year employee, an organizer of WordCamp conferences in Asia, a full-time WordPress contributor and Open Source Project Manager at Automattic announced on X (formerly Twitter) that today was her last day at Automattic with no additional comment.

She tweeted:

“Today was my last day at Automattic.

I’m actively exploring new career opportunities. If you know of any positions that align with my skills and experience!”

Naoko’s role at at WordPress was working with the global WordPress community to improve contributor experiences through the Five for the Future and Mentorship programs. Five for the Future is an important WordPress program that encourages organizations to donate 5% of their resources back into WordPress. Five for the Future is one of the issues Mullenweg had against WP Engine, asserting that they didn’t donate enough back into the community.

Mullenweg himself was bittersweet to see those employees go, writing in a blog post:

“It was an emotional roller coaster of a week. The day you hire someone you aren’t expecting them to resign or be fired, you’re hoping for a long and mutually beneficial relationship. Every resignation stings a bit.

However now, I feel much lighter. I’m grateful and thankful for all the people who took the offer, and even more excited to work with those who turned down $126M to stay. As the kids say, LFG!”

Read the entire announcement on Mullenweg’s blog:

Automattic Alignment

Featured Image by Shutterstock/sdx15

Source link