32:T579,slide`

Why I give these pieces of Advice

Console.log() 3x more than you'd print() Browser: this isn't a notebook where you get output after each line!
You very likely don't need a framework Flow: frameworks are for when tangled web of flow gets large.
Spend more time finding examples, rather than starting from scratch.

Browser: don't need to locate/pay for a server to share a live JS examples, so there are a lot more of them than Python. More likely you can find similar code & modify.

Learn by doing sooner. Don't bother with a incremental understanding.

Flow: It is more difficult to define a single right path to learn/use a JavaScript package.

Debugging is less dependencies and more about information flow & security

Browser: learn to use developer tools & security policies that are baked in for "free".

`33:T706,// Code adopted from here: https://observablehq.com/@mircopp/import-of-notebook-as-a-runtime-environment srcdoc = (notebook, cells, opts = {}) => { const { css = '' } = opts; return ` ${cells.map((cell, index) => `

`).join('')} ${notebook} ` }34:[] 30:{"title":" Recommendations for Shifting from a Scientific Python to a JavaScript Mindset*","cells":[{"id":265,"value":"slide`

Recommendations for Shifting from a Scientific Python to a JavaScript Mindset*

\n
\n### A Lightning Talk for Transform2020 [geoscience + coding online conference]\n

by Justin Gosses

\n
\n

*This is ......... a severe over generalization

....and if you don't like it, Steve Purves is giving a talk on the same topic in an hour and you can listen to him instead.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"slide`\n

Advice I give Pythonistas who start JavaScript

Console.log() 3x more than you'd print()
You very likely don't need a framework
Spend more time finding examples, rather than starting from scratch.
Learn by doing sooner. Don't bother with a fundemental understanding.
Debugging is less dependencies and more about information flow & security

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"slide`

But Why Do I End Up Saying Those Things?

\n
\n

1. The packages used in Scientific Python & JavaScript are built around different task types & information flow.

\n
\n

2. The Browser

\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"slide`\n

Advice I give Pythonistas who start JavaScript

Console.log() 3x more than you'd print() Browser
You very likely don't need a framework Flow
Spend more time finding examples, rather than starting from scratch.

Browser

Learn by doing sooner. Don't bother with a incremental understanding.

Flow

Debugging is less dependencies and more about information flow & security

Browser

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"slide`

Different Powerful Abstractions, Designed To Be Good At Different Things... Upon Which Many Things Are Built

\n\n

\n
\n
\n
\n

Python

NUMPY

or numpy like things

[0,1,3,4524,23,3234]

JavaScript

DOM

direct object model

\n
\n

A useful exageration that suggests what each is good at

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"slide`\n

Common Abstractions Affect Flow...

\n\n
\n

User modifies configuration and presses go.

Mostly Linear

Input

Process

Predict

User does something in 50 possible places

Many Connections

Model

State

View

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"slide`\n

Also Affects What's in each dependency

\n\n
\n

Scientific Python

\n
\n

A Dependency is A Toolbox for related tasks

\n \n

JavaScript

\n
\n

Each dependency is a differently sized nail

\n \n \n

Linear flow vs. need to support a tangled web of flow

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"slide`\n

THE BROWSER

\n\n
\n

The browser is the reason JavaScript exists and will continue to exist

\n
\n

It is super powerful and runs a lot of code for you behind the scenes

\n
\n

compared to Python.....things are different:

Security for free, yeh?!

Don't see output after each line like in a notebook.

You get lots of monitoring information for free via developer tools

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"html `

Useful Links

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"html `

javascript-for-python-programmershttps://observablehq.com/@ballingt/javascript-for-python-programmers

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"html `

Collection of notebooks on Observable for Jupyter users by Thomas Ballinger

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"html `

The slides in this notebook are made using code imported from a notbook by Ryan Seddon based on the original by Mike Bostock`","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"html `

Good thread on twitter on what parts of JavaScript to learn if you're coming from another language.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"html `

Link to Steve Purves's talk given in same lightning talk session an hour later than this talk.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md `----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"html `

The Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"mermaid = require('mermaid@7.0.0/dist/mermaidAPI.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"merm = src => {\n let needsUniqueId = \"render\" + (Math.floor(Math.random() * 10000)).toString(); //should be 10K attempts before repeat user \n let svg_text = mermaid.render(needsUniqueId,src)\n return html([svg_text])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {slide as slide2} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"notebook = (notebook, cells, opts) => {\n const container = document.createElement(\"div\");\n\n container.className = \"slide slide--notebook\";\n container.appendChild(html`