4 min Emacs screencast inspired by Bret Victor's Inventing on Principle | Hacker News Reader

4 min Emacs screencast inspired by Bret Victor's Inventing on Principle

emacsrocks.com

163 pointsmagnars34 comments

Awesome!! That guy is steadily doing some amazing publicity for emacs.

This is a "live" video he did, slightly longer at 18 minutes, but with lots of javascript refactoring, etc: https://www.youtube.com/watch?v=p3Te_a-AGqM

This was done as a lightning talk the night before the Web Rebels conference in Oslo in May. I was there, and Magnar completely killed it. Awesome stuff.

A note for the author regarding Dropbox's "uncool" headers: Adding `?dl=1` to the Dropbox link will automatically prompt users to download the file upon clicking, and save you from having to write the disclaimer asking users to right-click and "Save As..."

Ooh, very nice. I'll fix that straight away. Thanks!

Wow, that is awesome!

I think it would be cool to combine it with a small JavaScript library that could make things like the transformation between animation and just drawing a path automatic. I doubt this would be too difficult, and it would make going between them much easier if you didn't have to change your code significantly.

There is no question that I'm using Swank-js for all my web development now!

Yeah, that would be pretty cool. I'll be making something along those lines to aid me while I'm making that bouncy ball into an actual game. I wouldn't know how to start making it general purpose, but as a wrapper around canvas and requestAnimationFrame it is definitely doable.

Well, I doubt you could make it arbitrarily general-purpose.

I was thinking about maybe building on top of some existing framework. I think there are various existing libraries that help you create shapes and animate them; I imagine you could make something very useful by hooking onto the various methods in a library like that.

This is some amazing stuff. As a fan of emacs, but having no experience with javascript, I would like to be able to recreate this personally, and possibly use this as my training ground. I know the purpose of the post is to show a short video of something impressive, but could you consider providing the code samples and maybe even a guide of the code?

Regardless of whether you can or not, it truly is some amazingly impressive work. Thanks for sharing!

I wrote a little bit about installing swank-js a couple of posts up. You can also check out all my emacs-settings on github https://github.com/magnars/.emacs.d/blob/master/setup-slime-...

The only thing missing there is the packages installed through package.el, which would be slime-js in this case.

And here's the code for the bouncing ball: https://github.com/magnars/blockout

Cool, but how about the rest of the code, for the "game"?

That last link there is all there is of the "game" for now. :-)

I've been a vim user since I was ten years old, but emacs is impressing me more and more. The learning curve for setting up some of these plugins is pretty high; does anyone have a tutorial so I can get this up and running?

Actually, most plugins are easy. The problem is with plugins that need to interface with external programs--getting both Emacs and some program, like a browser, to cooperate can be tricky.

I don't think there can be a general tutorial for setting things like this up. The issues with this plugin are going to be due to your browser or JavaScript engine; the issues with a different plugin are going to be due to LaTeX or GHC or whatever program you're interfacing with. So the problems are probably going to be unique to each particular plugin rather than uniform across all plugins.

I haven't tried it with swank-js yet, but most swank-related things work well with slimv, a swank client for vim: http://www.vim.org/scripts/script.php?script_id=2531

I can recommend Magnar's and Christian's emacs settings. All those fine tuned micro optimizations for emacs make you feel like a rock star programmer:

https://github.com/magnars/.emacs.d

It's like an accelerated ride through emacs infos. Lots of straightforward valueable options. Thanks

I love these kinds of demos. REPLs are great... it makes me want to go back to using emacs.

Oh man, definitely going to get this up-and-running tomorrow. This is awesome, potentially.

This cool -- definitely digging into this tomorrow. I use swank-clojure every day, and it's incredibly productive to see real-time results as you type. I didn't know there was a swank-js. Is there by chance a swank-python out there somewhere?

I haven't tried it yet, but this "Emacs IPython Notebook" that was posted a few days ago looks similar, and their docs say that it's "like SLIME".

http://news.ycombinator.com/item?id=4185960

http://tkf.github.com/emacs-ipython-notebook/

Awesome! Emacs was my first love and while we still hang out, it's not like it used to be. But this inspires me to make some time in my life for more. Also, I love the keyboard clicks. Sounds like a Das Keyboard, to me.

Really glad someone is doing emacs screencasts. Awesome job magnars!

Many people are. I did a couple for my eredis project that let's you interact with Redis over an elisp repl or create/edit tables dynamically in a buffer from redis keys etc http://www.youtube.com/watch?v=ZP0MOaRueHU http://code.google.com/p/eredis/ disclaimer: I am not as cool as magnars

SuperCollider is exactly like this, but for sound synthesis: http://supercollider.sourceforge.net/

And there is an awesome Clojure interface for it called Overtone. http://vimeo.com/22798433

Has Bret Victor expected his amazing Inventing on Principle presentation would inspired so many of us? Me included, check my profile :)

Now he needs to do a 4 hour step-by-step tutorial on how he set up Emacs to do this.

The biggest problem for me was conflicting versions of SLIME.

Installing swank-js is a breeze with npm, but the installation instructions tell you to get the newest version of SLIME from their svn. That didn't work so well, since my clojure-swank already relied on an older version.

Simply installing slime-js from marmalade instead made all the difference.

As for my settings, they are public on github. https://github.com/magnars/.emacs.d/blob/master/setup-slime-...

I have the same problem. So how does ELPA resolve conflicting SLIME versions?

From what I can understand, it doesn't. Backwards compatability is usually good. However, there was a breaking change in 2011 sometime. The slime-js in marmalade relies on the SLIME in marmalade, which is from 2010.04.04 - and works with that. Same for clojure-swank. So by removing the newest SLIME, it worked for me.

This thread is a little stale but magnars' .emacs.d repo isn't quite sufficient to explain what's going on. Follow his instructions for installing slime-js and swank-js, then you'll need the ``setup-slime-js.el``.

I modified his version of it to decouple it from what I gather are a couple of his other repos (specifically js2-refactor, and another unknown). You can get it here:

https://github.com/mattdeboard/dotfiles-emacs/blob/master/se...

Simply put that file somewhere on your ``load-path``, then add ``(require 'setup-slime-js)`` to your .emacs/init.el. Reload everything, and you should be good to go.

Note that the in-emacs REPL is still pretty broken for me vis a vis entering code directly at the prompt. e.g. trying to enter an array causes swank-js to throw an exception. Not sure if that's because of my setup or not.

I see that you're actually creating your own slime-js-minor-mode-map. I'm guessing that was necessary because you didn't require slime-js before requiring setup-slime-js.

Maybe it will resolve your issue of you put this at the top of the file?

     (require 'slime)
     (require 'slime-js)

The swank-js documentation says it depends on js2-mode too. Are you using that? At least I have no issues with entering arrays in the repl.

When I try requiring slime-js it complains about slime-face-inheritance-possible. And yeah I'm using js2-mode

That's defined in my slime.el (2010.04.04), which is why I require that first.

Reply on news.ycombinator.com