teaching web dev (HTML/CSS/JS) in Jupyter

[Matt Price]

Hi everyone,

I teach a class in which students with no programming experience learn some very basic web development skills and then apply them to projects. I would love to be able to use Jupyter notebooks but I haven't found any indication that there are built-in HTML, CSS, and JS blocks that can be tangled after the manner of a code playground like Codepen or JSFiddle.

I'm wondering (a) whether I'm missing something entirely, and (b) whether anyone here has tried something like this in the past, and how hard it wasto set up. 

Thanks very much,

Matt

[Wes Turner]

Automated Testing of the DOM

Automated Testing of JS apps [built from yeoman/cookiecutter skeletons with *build, test, and deploy* build steps in a Makefile, at least]

Distributed Application Architecture: How Jupyter is built, How to build extensions for JupyterLab

- https://jupyterlab.readthedocs.io/en/latest/developer/repo.html

- https://jupyterlab.readthedocs.io/en/latest/extension/extension_dev.html

  - https://jupyterlab.readthedocs.io/en/latest/extension/virtualdom.html?highlight=React

  - [...]

- https://github.com/jupyterlab/extension-examples

- https://github.com/topics/jupyterlab-extension

- https://github.com/Yogayu/awesome-jupyterlab-extension

Ipython-beautifulsoup can be an XSS (Cross-Site Scripting) risk because then *arbitrary* code within a notebook ipynb has access to the notebook application variable scope. (This is also an issue with e.g. Jyve := Jupyter + Pyiodide (SciPy stack as WASM)).

That said, there are IJavascript and ITypescript kernels.

You can install `jupyter-console` to use kernels other than ipykernel ($ ipython) from the CLI.

,

You can also learn widget trees and event binding from e.g. ipywidgets.

 - https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Basics.html

- https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-educat...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/5958e7ce-20a2-4a8e-9f94-063a0de622f0n%40googlegroups.com.

[Wes Turner]

Ipython-beautifulsoup 

## ipython-beautifulsoup

- PyPI: https://pypi.org/project/ipython-beautifulsoup/

- Src: https://github.com/Psycojoker/ipython-beautifulsoup

> IPython-BeautifulSoup is an IPython extension for displaying BeautifulSoup HTML/XML objects as prettified and syntax highlighted HTML blocks in IPython notebook and qtconsole.

> 

> Syntax highlighting is accomplished with Pygments.

```

A note on security

WARNING

By nature of including external HTML, JS, and CSS, this extension is inherently unsafe if you choose to render the html by setting show_html to True when calling ``configure_ipython_beautifulsoup``.

By default, <script>, <link>, and <style> tags are removed but this isn’t a 100% guarantee that this is secure if you choose to render the html, use at your own risk.

The safest option is to set all options of configure_ipython_beautifulsoup to False (the default).

```

E.g. https://github.com/mozilla/bleach may not be sufficient?

... #WebSec #AppSec #DevSec

"Statistics-Based OWASP Top 10 2021 Proposal"

 https://dzone.com/articles/statistics-based-owasp-top-10-2021-proposal

https://github.com/vavkamil/awesome-vulnerable-apps#owasp-top-10 :

> OWASP Juice Shop: Probably the most modern and sophisticated insecure web application 

From http://wrdrd.github.io/docs/consulting/kids#owasp-juice-shop in pre- MyST Markdown (Sphinx) Restructured text:

```rst

.. index:: OWASP Juice Shop

.. _owasp juice shop:

OWASP Juice Shop

^^^^^^^^^^^^^^^^^

| Homepage: https://owasp.org/www-project-juice-shop/

| Source: https://github.com/bkimminich/juice-shop

| Source: https://github.com/bkimminich/pwning-juice-shop

| Dockerfile: https://hub.docker.com/r/bkimminich/juice-shop/dockerfile

- OWASP Juice Shop is a deliberately vulnerable web application

  written with :ref:`Node.JS`.

   "Pwning OWASP Juice Shop" is the official companion guide for this

   project. It will give you a complete overview of the vulnerabilities

   found in the application including hints how to spot and exploit

   them. In the appendix you will even find complete step-by-step

   solutions to every challenge.

- To run the Juice Shop application on your local machine

  *where you may have record of authorized permission to hack*:

  - Install :ref:`Docker`

  - Run the Juice Shop Docker container:

    .. code:: bash

        docker run --rm --name=js -p 3000:3000 bkimminich/juice-shop

        # <Ctrl-C>

  - Open your browser to http://localhost:3000/

  - Read and work through the book:

    https://pwning.owasp-juice.shop/

``

[Matt Price]

Thanks Wes. I'm not sure I quite follow the response but I will look through the material you pointed to c

[Marc Cohen]

Hi Matt,

I'd recommend checking out replit.com.  Also, glitch.com is another very good resource and specifically focussed on teaching and learning web technologies.

Marc

To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/CAN_Dec_c8cj%2BdUNyKraDk5j_ZoQeeOs1Y7OP_x2kD51g6wUwiA%40mail.gmail.com.

--

Marc Cohen

Web: mco.dev

Email: ma...@mco.dev

Working with me: mco.dev/working-with-marc

Feedback: How am I doing? Provide anonymous feedback!

Q: Why is this email three sentences or less?

A: three.sentenc.es

[Kiko]

Hi Matt,

Maybe you can have a look to brythonmagic [1]. Brythonmagic adds some
cell magics to use the code cell and code representation as a quick
way to use the Jupyter notebook as a HTML/CSS/Javascrupt(Brython) lab
using 'brute force'... With 'brute force' I mean it is not very
sophisticated in how things are done...

It is easy to understand the code to create your own extension to do
what you need.

[1] https://github.com/kikocorreoso/brythonmagic

>>>> --
>>>> You received this message because you are subscribed to the Google
>>>> Groups "Teaching with Jupyter Notebooks" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>> an email to jupyter-educat...@googlegroups.com.
>>>> To view this discussion on the web visit
>>>> https://groups.google.com/d/msgid/jupyter-education/5958e7ce-20a2-4a8e-9f94-063a0de622f0n%40googlegroups.com

>>>> <https://groups.google.com/d/msgid/jupyter-education/5958e7ce-20a2-4a8e-9f94-063a0de622f0n%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>> .

>>>>
>>> --
>> You received this message because you are subscribed to the Google Groups
>> "Teaching with Jupyter Notebooks" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to jupyter-educat...@googlegroups.com.
>> To view this discussion on the web visit

>> https://groups.google.com/d/msgid/jupyter-education/CAN_Dec_c8cj%2BdUNyKraDk5j_ZoQeeOs1Y7OP_x2kD51g6wUwiA%40mail.gmail.com
>> <https://groups.google.com/d/msgid/jupyter-education/CAN_Dec_c8cj%2BdUNyKraDk5j_ZoQeeOs1Y7OP_x2kD51g6wUwiA%40mail.gmail.com?utm_medium=email&utm_source=footer>
>> .

>>
>
>
> --
> Marc Cohen
> Web: mco.dev
> Email: ma...@mco.dev
> Working with me: mco.dev/working-with-marc
> Feedback: How am I doing? Provide anonymous feedback!

> <https://www.increment.me/feedback/049628fd-7339-406d-9203-17d3ec8976bd/submit>

>
> Q: Why is this email three sentences or less?
> A: three.sentenc.es
>

> --
> You received this message because you are subscribed to the Google Groups
> "Teaching with Jupyter Notebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to jupyter-educat...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/jupyter-education/CAPmrbqovXyyRZWt6G%3D2pmuxmGKYUvR8bncLhO5cevL30a2f-TQ%40mail.gmail.com.
>

[Aidan Feldman]

For various reasons already alluded to, I'd go with an environment made for frontend development like Glitch, Codepen, or JSFiddle.

To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/CAB-sx60JxcS2CG4zkkAV8dx4b%2BQ-jyDNFCZRGbKMHf-KRfR%3DEQ%40mail.gmail.com.

[Matt Price]

Thanks everyone. I guess jupyter is not quite the right tool for htis after all. I appreciate everyone's help though!

[William Stein]

On Thu, Apr 22, 2021 at 6:15 AM Matt Price <mopt...@gmail.com> wrote:
>
> Thanks everyone. I guess jupyter is not quite the right tool for htis after all. I appreciate everyone's help though!
>

For what it is worth, you could use https://CoCalc.com for teaching
web development. In addition to realtime collaborative Jupyter
notebooks, we also let you directly edit HTML (with live or iframe
preview), CSS, Javascript, Typescript, etc. You can also run several
types of remote backend webservers (via a terminal), which are visible
via an ssl connection only to collaborators.

We do all development of cocalc.com from within cocalc itself. This
has been the case almost since day 1 when I was developing cocalc on
an early Chromebook...

Ai-Camp -- https://www.ai-camp.org -- uses cocalc webdev + jupyter
for their student projects. The students use Jupyter to develop
machine learning algorithms, then develop Python-based webservers
(using, e.g., Flask) in cocalc, which they then host somewhere else when done.

JupyterLab (which we also provide in CoCalc), also provides a similar
environment that combines Jupyter notebooks with the ability to edit
HTML (etc) files, use terminals, etc.

In any case, my point is that I've been very impressed with how
ai-camp basically makes web development more fun for their students by
using Jupyter notebooks to develop nontrivial custom machine learning
tools.

William

> To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/CAN_Dec_TK%3DBCjsTs%2BOJKm%2BCJA36kPEnOvGc8C4h3xh-PE5L85w%40mail.gmail.com.



--
William (http://wstein.org)

[William Stein]

Matt:

> cocalc looks really cool. I will explore a bit more systematically in the next few days, but in the meantime can you briefly point me to a resource about webdev within the environment there? I don't immediately see how to edit HTML & CSS. In any case this could be an excellent model for me. Thanks!

The webdev capabilities are not well advertised.

To edit an HTML file (say), click the +New button, then type in the
name of a file that ends in ".html". You'll get a side-by-side
editor with html on the left and iframe with the html in it on the
right. Whenever you save the html file on the left to disk, the
iframe gets updated on the right. There's reasonably good support
for editing js files, css files, etc., though of course this is
definitely not VSCode. You can also type +New --> Terminal to get
a command line Terminal where you can use git to clone things from
elsewhere.

Also, here are some docs about running a webserver (such as Flask) in
a cocalc project:

https://doc.cocalc.com/howto/webserver.html

Contact us (by clicking the Help button) if you need a
trial/testing/evaluation license; in particular, this is needed to
enable outgoing network access from the docker containers in cocalc.
Alternatively, you can run Cocalc entirely on your laptop via
https://github.com/sagemathinc/cocalc-docker

-- William

On Thu, Apr 22, 2021 at 7:35 AM Michael Ke Zhang <mic...@ai-camp.org> wrote:
>
> Chief instructor at AI camp here. We choose cocalc for a not so obvious reason as well - it’s very close to what industry uses, which is typically developing software using a Linux machine. Google colab or replit does not simulate what’s in the work place and it only focuses coding. Dealing with packages and knowing how to use Linux terminal is so critical that we as educators should prioritize and teach our students these transferable skills.
>
> Michael

> --
> Michael Ke Zhang (Linkedin Profile)
> Co-founder and Chief Instructor at AI Camp
> AI Camp - learn AI with zero coding experience
> Read about our latest blog posts about AI on Medium
> Watch our Intro to AI at Youtube.
> (626)688-7921



--
William (http://wstein.org)