4 ms·
Scrub values in JavaScript live
- ashcairo 14y agoVery clever.
- pbiggar 14y agoThis is very impressive and cool. However I really don't think that parsing source code and manipulating is a very maintainable way to do this (and this as someone who writes Clojure for a living). You could do exactly the same using very simple Knockout. It wouldn't be as funky, but it would be something you'd be happy to use in production.
- nornagon 14y agoIt isn't really intended for production use. Personally, I plan to use it to tweak values in games I write, because having to alt+tab, find, edit, alt+tab, refresh, restore state for every tiny tweak to the position of a UI element sucks. This is a development tool :)
- pbiggar 14y agoCan you go into more detail?
- nornagon 14y agoWhat would you want to use it for in a production environment? (and why is JS source transformation not viable there?)
- mirashii 14y agoI would highly recommend watching this, and keeping in mind how such a thing could be useful in games. http://worrydream.com/#!/InventingOnPrinciple http://worrydream.com/#!/InventingOnPrinciple For a concrete example of usefulness in games, see http://www.youtube.com/watch?v=-32SFFbaeJg http://www.youtube.com/watch?v=-32SFFbaeJg
- pbiggar 14y agoIt would be useful to give a pitch as to why I should watch it - it's an hour long.
- spicyj 14y agoIf it helps, you can read the comments from when it was posted and got 221 points: http://news.ycombinator.com/item?id=3591298 http://news.ycombinator.com/item?id=3591298
- bjourne 14y agoBecause it's an awesome lecture and well worth a good hour of your life. Trust us on this one, but it's your loss if you don't. :)
- cocoflunchy 14y agoIt's really one of the best ways you can spend an hour imho.
- deleted 14y ago[deleted]
- mutewinter 14y agoI did something like this in my presentation[1] about Ember. It uses Ember.js to maintain the state of the code samples and proved to be very stable. I don't have interactive sliders on specific values, but the code is parsed and run after every character the user types. e.g. you can change the size of the squid on this page[2] and see it reflected immediately on the right. [1]: http://mutewinter.github.com/why_ember/#/slides http://mutewinter.github.com/why_ember/#/slides [2]: http://mutewinter.github.com/why_ember/#/slides/data-binding http://mutewinter.github.com/why_ember/#/slides/data-binding
- mcrider 14y agoWhat would be the use cases for this, other than education?
- nornagon 14y agoI plan to use it to tweak values during game development, so I don't have to edit/reload every time I tweak a number a tiny bit.
- aufreak3 14y agoThe liveness of something like this can be rather useful actually. I wrote a not-as-fancy "canvas explorer" with a live updating image that you can save snapshots of. [1] Wrote this just yesterday to let me programmatically make images for use elsewhere (I suck at drawing tools.) I'm already enjoying the "liveness" of it and the fact that all images are remembered in localStorage. It's really cool that this is so easy to do with JS. [1] http://srikumarks.github.com/demos/canvas_explorer/ http://srikumarks.github.com/demos/canvas_explorer/
- akx 14y agoPlain and simple (if you could ever call it that) exploratory programming? The sort that yields stuff like Jared Tarbell's stuff http://levitated.net/daily/index.html http://levitated.net/daily/index.html and many Chrome Experiments, etc.
- Skalman 14y agoIt doesn't work in Firefox 19.
- nornagon 14y agoShould be fixed now.
- spicyj 14y agoVery cool. Just wanted to mention that we've had the same capability in the Khan Academy CS environment for a few months now: http://www.khanacademy.org/cs/gear/1178931559 http://www.khanacademy.org/cs/gear/1178931559 Read John Resig's blog post for more details: http://news.ycombinator.com/item?id=4382076 http://news.ycombinator.com/item?id=4382076
- Void_ 14y agoYes, playing with values and seeing the graphical result change is an excellent way of getting the intuition for taught material. I came across this example (http://www.khanacademy.org/math/statistics/e/exploring_mean_and_median http://www.khanacademy.org/math/statistics/e/exploring_mean_...) from Khan Academy that helps students understand mean and median of a data set. (There are exercises for other summary statistics too.)
- shakeel_mohamed 14y agoNice! Just a thought, values can go beyond the valid range. For example: dividing by zero, having negative values for RGB, and negative height/widths.
- nornagon 14y agoUnfortunately there's no type information in JS, so it's very difficult to extract range data from just the source. Just don't drag it into that range ;) PS, I'm planning to implement a color picker for strings like 'rgba(200,0,234,0.4)'
- stuaxo 14y agoDoes anyone know if there is a similar editor component for Gtk, QT or Wx ? EDIT: Ideally for python.
- enjalot 14y agoInteresting implementation! I'm using CodeMirror tokens and regexs to make numbers scrubbable and hex colors pickable: http://tributary.io/tributary/2958568/ http://tributary.io/tributary/2958568/ I've been wanting to explore the route you took more, especially for doing even more code modification. I'd like to let users click on a number and turn it into a variable, or have a special object where members are added to the global table. You can then create controls external to the code with that table and hide the code (good for presenting after you're done coding). Looking forward to checking out your code! my project: http://tributary.io http://tributary.io
- egdelwonk 14y agoI forked your code and implemented one of your todos: Added the ability to input values when double clicking a scrubber. https://github.com/nornagon/scrubby/pull/1/files https://github.com/nornagon/scrubby/pull/1/files
- nornagon 14y agoAwesome! I'll check it out soon :D