I’ve only now discovered Bret Victor’s incredible talk Inventing on Principle. While you should definitely watch the entire talk, I was particularly fascinated by the tech demos.
Hot reloading
The first thing Victor demonstrates is already cool: hot reloading. Any code change is immediately visible on the canvas. 13 years later, it’s pretty much everywhere, from frontend frameworks (Flutter, React, Vite, Webpack) to game engines (Unity, Unreal Engine).
What does the code do?
Now, let’s step up the game. Take a look at this:
The connection between code and result is immediately visible. It also works the other way round; you can select any pixel to highlight the code responsible for painting it. Element picking is present for many GUI toolkits; going from code to result, however, is exceedingly rare.
Visualizing time
Visualizing a program’s behavior over time is immensely powerful, not just for games. The rr debugger, for example, applies this concept, and the list of testimonials proves this is wanted. Of course, Victor takes this to the next level, also allowing changes and visualizing the new timeline.
Debug programming
How do we debug programs?
With interactive tools showing us the state of the program for specific arguments, so we can confirm our assumptions.
Why is it a separate step from programming? Why do we only use this once bugs have already caused issues?
Well, Victor does it better. By including the debugger in the programming environment, we can immediately see the state of the program for any input we want.
2025-02-28: There has been an attempt to create such an IDE.
2025-04-02: Obviously Jupyter Notebooks, and their extensions are a step in this direction.
Conclusion
Inventing on Principle is a really great talk with incredibly good ideas. If I get the time, I’ll implement some of these.
Webmentions
No webmentions were found.
{% for webmention in webmentions %}-
{{ webmention.content }}
{% if webmention.author %}
{{ webmention.author.name }}
{% endif %}
{% if webmention.pubdate and webmention.url %}on{% endif %}
{% if webmention.pubdate %}
{% endif %}
{% endfor %}
{% else %}No bookmarks were found.
{% endif %}{% for webmention in webmentions %}-
{% endfor %}
{% else %}No likes were found.
{% endif %}{% for webmention in webmentions %}-
{{ webmention.content }}
{% if webmention.author %}
{{ webmention.author.name }}
{% endif %}
{% if webmention.pubdate and webmention.url %}on{% endif %}
{% if webmention.pubdate %}
{% endif %}
{% endfor %}
{% else %}No links were found.
{% endif %}{% for webmention in webmentions %}-
{{ webmention.title }}
{% if webmention.pubdate %}
{% endif %}
{% endfor %}
{% else %}No posts were found.
{% endif %}{% for webmention in webmentions %}-
{{ webmention.content }}
{% if webmention.author %}
{% if webmention.author.photo %}
{% endif %}
{{ webmention.author.name }}
{% endif %}
{% if webmention.pubdate and webmention.author %}on{% endif %}
{% if webmention.pubdate %}
{% endif %}
{% endfor %}
{% else %}No replies were found.
{% endif %}{% for webmention in webmentions %}-
{% endfor %}
{% else %}No reposts were found.
{% endif %}{% for webmention in webmentions %}-
{{ webmention.author.name }}
{{ webmention.content }}
{% endfor %}
{% else %}No RSVPs were found.
{% endif %}{% for webmention in webmentions %}-
{% if webmention.author %}
{% if webmention.author.photo %}
{% endif %}
{{ webmention.author.name }}
{% endif %}
{% if webmention.content %}
{{ webmention.content }}
{% else %}
{{ webmention.title }}
{% endif %}
{% if webmention.pubdate %}
{% endif %}
{% if webmention.pubdate and webmention.url %}|{% endif %}
{% if webmention.url %}
Permalink
{% endif %}
{% endfor %}
{% else %}No webmentions were found.
{% endif %}Comments