[Edu-sig] Python + JS == more than their sum()

[kirby urner]

Wow, thank you Kevin and Wes for some
eye-opening contributions!

I really welcome their mind-expanding
potential and have been diving into demos
and docs all morning. [1]

In my course last night we looked at that
Jupyter Notebook comparing ES6 and
Python scripts [2] and I also showed them
how Python may be used to write
HTML + CSS for browser rendering.[3]

Output:  https://flic.kr/p/PjQ6Bg  (screen
shot).

Some of my students are beginner programmers,
with little to no programming background
so we're really just going over the basics, but at
the same time we need to tune in the
ecosystem with is typically a combination of

Python + HTML + CSS + JS + SQL + regex

at least.

I use sqlite3 module for the SQL part, re module
for regex.

What we have in these resources though is
something even more ambitious, including
the ability to compile Python to JS!  Wow.

You know what they say:  JS is the
assembly language of the web.

Even developers using JS full stack use
transpilers to go from future JS -> past
JS (using Babel mostly).

Future JS  (from where we stand now) is
what looks more Python-like than ever.

My current mode of teaching is to have
students install the Anaconda distro and
then to extend the library with the requests
and flask modules for exploring web stuff.
Anaconda includes command line conda
for using in place of pip, to get packages
from a large web of repositories.

Now I see conda lets me install mpld3 to
my Mac with no issues.

mackurner:~ kurner$ conda install mpld3

My teaching application is here:
thekirbster.pythonanywhere.com

Kirby

[1] Kevin, http://pyeverywhere.org/docs/ 404s

[2]
https://github.com/4dsolutions/Python5/blob/master/Comparing%20JavaScript%20with%20Python.ipynb
(that's direct to Github -- nbviewer is having problems
right now, no wait it's working again)
https://goo.gl/nj9RPO (using nbviewer) renders the
JS output whereas Github does not.

[3] a chess board generator, just uses string
substitution ala str.format( ) method, helps
beginners see how HTML + CSS might be
string output from a Python script on the server:

# -*- coding: utf-8 -*-
"""
Created on Thu Nov 17 09:02:27 2016
https://flic.kr/p/PjQ6Bg  (screen shot).
@author: Kirby Urner

Run the script and open the output .html file
in any browser.
"""
from collections import namedtuple

Piece = namedtuple('Piece', 'type color position unicode')

black = [
    Piece("Rook"   , "black", [7,0], "♜"),
    Piece("Knight" , "black", [7,1], "♞"),
    Piece("Bishop" , "black", [7,2], "♝"),
    Piece("Queen"  , "black", [7,3], "♛"),
    Piece("King"   , "black", [7,4], "♚"),
    Piece("Bishop" , "black", [7,5], "♝"),
    Piece("Knight" , "black", [7,6], "♞"),
    Piece("Rook"   , "black", [7,7], "♜") ]

for c in range(8):
    black.append(Piece("Pawn", "black", [6,c], "♟"))

white = [
    Piece("Rook"   , "white", [0,0], "♖"),
    Piece("Knight" , "white", [0,1], "♘"),
    Piece("Bishop" , "white", [0,2], "♗"),
    Piece("Queen"  , "white", [0,3], "♕"),
    Piece("King"   , "white", [0,4], "♔"),
    Piece("Bishop" , "white", [0,5], "♗"),
    Piece("Knight" , "white", [0,6], "♘"),
    Piece("Rook"   , "white", [0,7], "♖") ]

for c in range(8):
    white.append(Piece("Pawn", "white", [1,c], "♙"))

the_board = \
"""
<table>
{white_royals}
{white_pawns}
{empty_cells}
{black_pawns}
{black_royals}
</table>"""

white_royals = "<tr>{}</tr>".format("".join(
    ["<td>{}</td>".format(piece.unicode) for piece in white[:8]]))
white_pawns = "<tr>{}</tr>".format("".join(
    ["<td>{}</td>".format(piece.unicode) for piece in white[8:]]))
black_royals = "<tr>{}</tr>".format("".join(
    ["<td>{}</td>".format(piece.unicode) for piece in black[:8]]))
black_pawns = "<tr>{}</tr>".format("".join(
    ["<td>{}</td>".format(piece.unicode) for piece in black[8:]]))

empty_cells = ""
for row in range(4):
    empty_cells += "<tr>{}</tr>".format("".join(
        ["<td></td>" for _ in range(8)]))

chess_board = the_board.format(white_royals = white_royals,
                               white_pawns = white_pawns,
                               empty_cells = empty_cells,
                               black_royals = black_royals,
                               black_pawns = black_pawns)

the_page = \
"""<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin-left: 30px;
    font-size: 20px;
}

table {
    border: 1px solid black;
    border-collapse: collapse;
    border-color: black;
}

td {
    padding: 15px;
    border: 1px solid black;
    height: 20px;
    vertical-align: bottom;
}

tr:nth-child(even) td:nth-child(odd){
    background-color: #FF8040;
}

tr:nth-child(odd) td:nth-child(even){
        background-color: #FF8040;
}

td:hover {
    background-color: #FF0000 !important;
    border-color: blue;
}
</style>
</head>
<body>
""" + \
chess_board \
+ \
"""
</body>
</html>
"""

with open("chessboard02.html", "w") as f:
    f.write(the_page)

print("Done!")
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/edu-sig/attachments/20161122/1a00363d/attachment.html>