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

Kevin Ollivier kevin-lists at theolliviers.com
Tue Nov 22 14:16:55 EST 2016


On Tue, Nov 22, 2016 at 10:06 AM, kirby urner <kirby.urner at gmail.com> wrote:

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

Same here, I am glad to see how much interest and activity there is in this
area! :) Love the chessboard example, and I feel like I'll need to take a
couple days out to investigate all the links Wes has posted!


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

Sorry about the 404, it is really early days yet for the project, I had
planned to get some docs up but as you can see I didn't quite manage it
yet. :( I am using the toolkit for a couple apps right now, but I'm
currently very busy finishing up an app for early childhood learning that
has a hard deadline of Jan 10th, so I probably won't have time to give it
some more love until after that.

BTW, my own interest (and why I signed up for this list) is that I
eventually want to have the app made such that children can contribute
their own games. It would start with some very visual, Snap/Scratch-like
tools aimed specifically at the game engine that would also serve as
programming tutorials (with something like Kenney's Game Assets [1] for
pre-made art), but eventually it would start showing them real code and
allow them to have full control over the code, graphics and interface.
Little Python+JS self-contained packages that can be plugged into the game
engine. What I kind of hope will be the outcome of all this is for the
older children to start building games that would be used to teach the
younger children.

Thanks,

Kevin

[1] http://www.kenney.nl/assets

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!")
>
> _______________________________________________
> Edu-sig mailing list
> Edu-sig at python.org
> https://mail.python.org/mailman/listinfo/edu-sig
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/edu-sig/attachments/20161122/bc3f2e54/attachment-0001.html>


More information about the Edu-sig mailing list