2a:null 2b:["$","title",null,{"children":"Recommendations for Shifting from a Scientific Python to a JavaScript Mindset* | Justin Gosses | Observable"}] 30: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".

`31: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} ` }32:[] 2e:{"id":"b10f79e9bc0a9b8b","slug":"draft-shifting-from-scientific-python-to-a-javascript-mind","title":" Recommendations for Shifting from a Scientific Python to a JavaScript Mindset*","thumbnail":"41c0b5367492a1833b775dfdf29b088cd684df57372ac8df4bb074287f036b9f","access_level":"public","create_time":"$D2020-05-29T00:32:49.225Z","update_time":"$D2020-06-21T20:21:05.713Z","view_time":null,"first_public_time":"$D2020-06-09T23:55:18.169Z","has_unpublished_edits":null,"fork":{"id":"b0ec166436dc60aa","slug":"slide","title":"Slide","owner":{"id":"cd78d380af44b04c","login":"ryanseddon","name":"Ryan Seddon"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":"starter_2024"},"version":842,"publish_version":842,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null}],"members":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"02e3d9d2b0ba5d4c","slug":"about-code","title":"About Code","owner":{"id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"html `

Useful Links

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"html `

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"html `

Collection of notebooks on Observable for Jupyter users by Thomas Ballinger

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md `----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md `---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"html `

The Code

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"mermaid = require('mermaid@7.0.0/dist/mermaidAPI.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {slide as slide2} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"notebook = (notebook, cells, opts) => {\n const container = document.createElement(\"div\");\n\n container.className = \"slide slide--notebook\";\n container.appendChild(html`