
Show HN: Math to Code – Interactive NumPy tutorial for engineers - vthommeret
https://mathtocode.com
======
vthommeret
Math to Code is an interactive Python tutorial (all client-side) to teach
engineers how to implement math in papers.

I was inspired to create it while taking the Fast.ai course and seeing Jeremy
Howard share [0] how a "complicated" Frobenius norm equation could be
implemented in a single line of Python.

Math to Code uses the Skulpt library to interpret Python in JavaScript.

It's open source here:
[https://github.com/vthommeret/mathtocode](https://github.com/vthommeret/mathtocode)

I would appreciate any and all feedback!

[0] [https://youtu.be/4u8FxNEDUeg?t=1390](https://youtu.be/4u8FxNEDUeg?t=1390)

> _It 's time to start reading papers. And papers look something like this,
> which if you're anything like me, that's terrifying. And I'm not going to
> lie, it's still the case when I start looking at a new paper, every single
> time, I think, I'm not smart enough to understand this. I just can't get
> past that immediate reaction. So I just look at this stuff and I go, that's
> not something I understand._ > _But then I remember, this is the Adam paper
> and you 've all seen Adam implemented in one cell of Microsoft Excel._ >
> _1\. Even familiar stuff looks complex in a paper!_ > _2\. Papers are
> important for deep learning beyond the basics, but hard to read._ > _3\.
> Learn to pronounce Greek letters._

~~~
asicsp
>It's open source here:
[https://github.com/vthommeret/mathtocode](https://github.com/vthommeret/mathtocode)

Any chance for a license like MIT?

~~~
vthommeret
Good idea! I just added it:
[https://github.com/vthommeret/mathtocode/blob/master/LICENSE](https://github.com/vthommeret/mathtocode/blob/master/LICENSE)

------
neil_s
Neat! I know python and wanted a quick primer in NumPy syntax recently for a
quick data analysis, this is perfect. Would be nice if the input box was
automatically focused when advancing to the next question.

~~~
vthommeret
Thanks for the feedback! It now autofocuses when not on a mobile breakpoint. I
originally had autofocus enabled, but on mobile it would cause the question to
scroll off the screen before you had a change to read it which... wasn't ideal
:-).

------
nromiun
Nice. Here is another similar resource that was posted recently.

1\. [https://github.com/Jam3/math-as-code/blob/master/PYTHON-
READ...](https://github.com/Jam3/math-as-code/blob/master/PYTHON-README.md)

The HN thread:

[https://news.ycombinator.com/item?id=23507764](https://news.ycombinator.com/item?id=23507764)

------
Donckele
Good work! I’m learning, thank you.

Feedback: Please autofocus to input box - it will be a smoother experience!

------
barrenko
This is cool. Got a coding interview task recently, ended up doing the whole
thing with numpy and pandas, it was quite fun, and it did not feel like
"regular" coding at all. So all my data science research ended up no totally
worthless.

------
somethingsome
I was expecting some math but there is only a norm, I would be more interested
in how to transfer from advanced math to code. example : what would be a good
code abstraction for a Borel Space

~~~
_ouml_
@somethingsome If you want to turn arbitrary maths into code, you should take
a look at interactive proof assistants. I'm a fan of [https://leanprover-
community.github.io/](https://leanprover-community.github.io/)

It has Borel spaces: [https://leanprover-
community.github.io/mathlib_docs/measure_...](https://leanprover-
community.github.io/mathlib_docs/measure_theory/borel_space.html)

------
set92
I had to access the solution for std because I missed the right position of
__2, I put it after the parenthesis. And in Fnorm I had to check it in the
comments because I didn 't thought of the similarity with the m.prod() and the
list.

Is a cool experiment, and it could be good to lose the fear in papers. Maybe
you could add some exercises with formulas or different papers that are a must
read.

------
rmelhem
amazing! i love interactive (and free) tutorials. I'm blogging every free
resource I can in the data science roadmap. Will include yours as well. Anyone
have any other tool like that for Numpy? I figured out one for SQL called
sqlbolt.com, which is dope too!

------
tchaffee
This was useful, although too basic for me. I would love to see you add many
more exercises.

------
rayraegah
For slide 12 the correct answer[0] threw an error the first time but couldn't
reproduce it.

[0] [https://pastebin.com/raw/AivpKE3u](https://pastebin.com/raw/AivpKE3u)

~~~
vthommeret
Hmm interesting, thanks for the report! I'll see if I can set up some kind of
client-side error tracker so I can investigate more easily in the future.

It's possible that it timed out when computing the result — it evaluates the
answer in a web worker with a 2.5s timeout and execution is slower on mobile.
I used to get timeouts more regularly, but it's fairly optimized now — it
checks all of the test inputs and evaluates both the expected solution and
user-provided solution in a single Python function.

------
sharemywin
Got stuck would be nice to get right answer like a help button

~~~
vthommeret
Thanks for the feedback! I plan to add this shortly! Where did you get stuck?

~~~
_ph_
I get stuck at page 9 - no explanation of the prod syntax

~~~
vthommeret
Got it! I'm working to add a "Show solution" button, but I just published
another hint for that question. Specifically, the syntax is the same as for
summations "m.sum()" but with "prod" instead. Additionally, you need to to
multiply each element of "m" by 3 and use parentheses appropriately — (3*m).

~~~
supernova87a
I also got stuck here with no way forward. (until reading here)

The explanatory text "Note that the matrix first element-wise multiplied by
3." is very unclear.

Also, looking at it from a Python novice, it is not clear we were supposed to
know that the .prod() operator can act on something that is not purely a named
variable, but can work on an already manipulated quantity within parentheses.

Also, and this is not your fault but of Python's, but it is not clear (or
merits some explanation) why some operators take the form "operator(x)" while
others behave like "x.operator" or even "x.operator()" with no argument.

~~~
vthommeret
Thanks for the feedback. I think I was being overly clever by trying to make
the product example more complicated than just `m.prod()` similar to the
`m.sum()` example, but as you mentioned I was fitting two concepts in one
question — operating on an already manipulated variable in addition to the new
operator.

I've simplified question 9 to just `m.prod()` from the previous solution of
`(m * 3).prod()` for now.

Re: Methods vs. functions — I completely agree! I actually originally
implemented Math to Code using Tensorflow.js (which was simpler than using a
Python interpreter) where the syntax was:

    
    
      m.pow(2).sum().sqrt()
    

Vs.

    
    
      np.sqrt((m ** 2).sum())
    

I decided to go with NumPy + Python because I felt it would be more
immediately applicable vs. just learning the Tensorflow.js syntax. Also Python
allows operator overloading so you can just do `2 * m` vs. `m.mul(2)`.

PyTorch has a similarly clean syntax to Tensorflow.js and includes operator
overloading, but there doesn't seem to be a PyTorch shim for Skulpt, but that
would be a fun project.

------
vthommeret
Based on the feedback, Math to Code now includes a Show solution button which
lets you toggle a solution on and off if you get stuck!

------
jackge
Useless, since based on Python 2.* interpreter (and this is not indicated
anywhere) : "Skulpt is a Javascript implementation of Python 2.x." Nearly
nothing of this runs on Python 3. _

------
jackge
Useless, since based on Python 2. (and this is nowhere indicated) - the user
string is interpreted with Sculpt
[https://github.com/skulpt/skulpt](https://github.com/skulpt/skulpt): Skulpt
is a Javascript implementation of Python 2.x. Nothing of this runs on current
Python 3.*, providing this kind of tutorials is confucing learners.

~~~
vthommeret
Skulpt does support the Python 3.7.3 grammar [0], but it's a work in progress.
I have it enabled here:

[https://github.com/vthommeret/mathtocode/blob/0d5f780be4f218...](https://github.com/vthommeret/mathtocode/blob/0d5f780be4f2187b16faee22d7e6aaa364a75d2d/lib/python.js#L27)

Is there something specific that did work for you? I tried all the examples on
Python 3.7.3 and they worked for me. One notable thing that's missing is that
the @ operator for matrix multiplication, but I hope to add that in the
future.

[0] [http://skulpt.org](http://skulpt.org) _Python 3 Grammar. The master
branch is now building and running using the grammar for Python 3.7.3. There
are still lots of things to implement under the hood, but we have made a huge
leap forward in Python 3 compatibility. We will still support Python 2 as an
option going forward for projects that rely on it._

