Skip to main content

No project description provided

Project description

Make interactive web apps using good ol’ HTML, CSS and a sprinkling of JavaScript — in Python.

Examples:

HyperText Markup Lnguage

If we run this script:

# 00-generate-html.py

from makeweb import Doc, body, h1

def generate_html():
    doc = Doc('html', lang='mr')
    with body():
        h1('हा!')
    return str(doc)

print(generate_html())

We should see this output on the screen:

<!doctype html>
<html lang="mr">
<body>
  <h1>हा!</h1>
</body>
</html>

(Whitespace added for clarity.)

Ha! HTML was easy, let us generate CSS from Python code.

Cascading Style Sheets

# 01-generate-css.py

from makeweb import CSS

css = CSS()

css('body', background='white', color='#222')
css('h1', color='darkorange', margin__top='1em')

print(str(css))

Running the above example we see…

body{
  background:white;
  color:#222
}
h1{
  color:darkorange;
  margin-top:1em
}

(Whitespace added for clarity.)

Notice that the double underscore in css('h1', margin__top='1em') gets converted to hyphen in CSS as h1{margin-top:1em}. This pattern is used throughout the library for HTML and CSS attributes.

So… CSS is even easier?! How about something more ambitious?

JavaScript

# 02-generate-js.py

from makeweb import JS

js = JS()

@js.function
def say_hello():
    hello_box = document.getElementById("hello_box")
    hello_box.innerHTML = "Hello, World Wide Web!"

print(str(js))

And we get a JavaScript function out!

function say_hello(){
  var hello_box;
  hello_box=document.getElementById("hello_box");
  hello_box.innerHTML="Hello, World Wide Web!";
}

(Whitespace added for clarity.)

Now let us use these capabilities together!

App

# hello-readme.py

from flask import Flask, Response
from makeweb import (
    Doc, CSS, JS,
    head, title, style, script,
    body, h1, button,
)

# We'll use Flask to serve, you could use any other framework
# or save as static files, or anything else
# that you wish to do with generated html.
app = Flask(__name__)
css = CSS()
js = JS()

css('*,body',   # <-- Add CSS to taste.
    font__family='sans-serif',
    text__align='center')
css('h1', color="darkblue")


@js.function  # <-- A sprinkling of JavaScript. Look ma, no braces!
def say_hello():
    hello_box = document.getElementById("hello_box")
    hello_box.innerHTML = "Hello, World Wide Web!"


@app.route('/')
def index():
    doc = Doc('html')  # <-- Generate all the HTML your app (really) needs.
    with head():
        title('Hello')
        with style():  # Embed CSS.
            css.embed()
    with body():
        h1('...', id='hello_box')  # Set attributes.
        button('Hello', onclick="say_hello()")  # <-- hook up say_hello().
        with script():  # Embed JavaScript.
            js.embed()
    return Response(str(doc))  # <-- Serve all the awesome your users desire!


app.run()  # <-- It is time!

This app transfers ~550 bytes over the network in order to run successfully, that is including the HTTP headers overhead. You read that right, not even one kilobyte! The web technologies are quite simple and straightforward for general use, and very flexible, robust and powerful too!

You might not need (or want the baggage of) complex tooling for a small project. It could be a one time make-and-forget tool at work or a weekend hobby project, or maybe something even larger if you really like this way of working. MakeWeb can come in handy because it makes it almost trivial to build the web like it was intended, straight from your Python code.

Wait, somebody mentioned single-page-apps? How about single source-file apps that don’t download half the internet to work? 😂 Kidding, this is a very, very barebones system, and therefore you can use any existing stylesheets or JS libraries alongside MakeWeb.

Check out examples for more demos!

Install:

Stable:

$ python3 -m venv makeweb
$ source makeweb/bin/activate
$ pip install makeweb[js]

Current:

$ python3 -m venv makeweb
$ source makeweb/bin/activate
$ git clone https://github.com/hiway/makeweb.git
$ cd makeweb
$ pip install -e .[examples]

Development:

$ python3 -m venv makeweb
$ source makeweb/bin/activate
$ git clone https://github.com/hiway/makeweb.git
$ cd makeweb
$ pip install -e .[dev]

Test:

$ pytest tests.py

With coverage:

$ pytest --cov=makeweb --cov-report=term tests.py

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

makeweb-0.1.0.tar.gz (7.8 kB view details)

Uploaded Source

Built Distribution

makeweb-0.1.0-py3-none-any.whl (6.7 kB view details)

Uploaded Python 3

File details

Details for the file makeweb-0.1.0.tar.gz.

File metadata

  • Download URL: makeweb-0.1.0.tar.gz
  • Upload date:
  • Size: 7.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No

File hashes

Hashes for makeweb-0.1.0.tar.gz
Algorithm Hash digest
SHA256 fd178fb32413279e8d2936c4d4e36185e1efaf129b9a8e434445c30074b686c3
MD5 d8a7e8d670218dfa34659a392da57fa8
BLAKE2b-256 74b5668f747a64bd280f527a1044d2527bfb47bc77cd08378d9449f176ed15d5

See more details on using hashes here.

File details

Details for the file makeweb-0.1.0-py3-none-any.whl.

File metadata

File hashes

Hashes for makeweb-0.1.0-py3-none-any.whl
Algorithm Hash digest
SHA256 7300dc0cf81dcae3f5eecd5082adf45ed4680e84c5e596bd847b012d4cfaea95
MD5 75afc8713c92196454a46e6cae15941b
BLAKE2b-256 982707317a39ddef88b3b573a565264e08175aa16abaaef866c8bf7f3d0610fb

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page