node.js ko
heatwave
heatwave
by replicants
Visualize code coverage heatmapping in real time!
Try a simple example or the Switch Rainbow or Arc Rainbow or the Multi-file Rainbow
- or just play around
Have fun!
Judging Instructions
Google Chrome / Chromium
Who
substack — Oakland, California, USA
pkrumins — Riga, Latvia
jesusabdullah — Oakland, CA
rook2pawn — Oakland, CA
Votes
Your Vote
Voting is now closed.
Other Votes
(79)
3rd-Eden
contestant
geradjudgeExcellent job! It’s only because I know about burrito that I’m not totally wondering how you did this. Still it’s a nice hack. Minus a couple points on utility because really I only care about hot spots, not about how all the rest of the code is doing… so I see this being more of a fun art project than useful tool. Great work though!
ChrisCinelli
contestantNot sure what the uses case are except having a cool demo ;) It crashed on my Chrome 3 times. I like the browserifish design!
b00giZmjudgeI’m not really sure, if this could come in handy in a real software project, but it makes a very impressive demo :)
I’d really like to see this project evolve. The FPS rate could be a lot better (test device is a 4-core MBP 2.3 GHz with FPS < 10) and the website could need a bit more polish. I can only agree that you guys should continue working on this project.
NiDi
contestantGreat Idea and very useful. Unfortunately my Chrome crashed 2times.
nathanhammond
contestantThis kind of thing is immediately useful in terms of analysis of code. I like the decaying graphics approach, but I really believe that there is a better interface for communicating the information that you can get from this.
I’d love to see this built in to a web-based IDE or something like that. :)
sylvinus
contestantKudos guys, I hope to see this packaged in a library and integrated in other tools!
sonnyg95
contestantSeeing hotspots in code, great idea!
pbcomm
contestantmcouzinet
contestant
therazorbladejudgeSo cool! Page design needs some cleanup and less scrolling.
atsuya
contestantgreat idea!
ireneinkyujudgeI really like this, and I can see its utility though I’m unlikely to need it myself anytime soon. The layout of the app itself needs to be reorganized.
regismesquita
contestantThe design could be a little bit better but that is an awesome software also it would be really neat to have such feature in [insert your favorite code editor here].
Really creative , you really think outside of the box.
creationix
contestantNicely done!
lovehasnologic
contestantHaven’t been convinced myself that Code Coverage is a good metric to test by. However. as far as code coverage tools go, this is pretty darn spiffy. Is this limited to js, or can it execute other languages as well (perhaps ruby, python, etc.)
Cons:
• Couldn’t get anything to run in Safari 5. • In Chrome 13 the animation was really slow (approx 2fps). Made me think my browser was about to crash. • Would be nice to have a bit more explanation on the site explaining the tool and why visualizing code coverage is beneficial to the process of building things.
(As far as animation lagginess is concerned, I’m running 8-core mac pro with 8gb ram in up-to-date Chrome browser).
paularmstrong
contestantI’m not really sure how this is more useful than the many other compilers and coverage tools available. Just seeing a color isn’t all that helpful.
iapainjudgeHeatwave is an awesome idea but it crashed couple of times on Chrome. In short, I am not sure if it’s very useful but it show potential of realtime converage which is awesome.
ryanstevens
contestantAmazing work guys. I’m excited to see how much more you can go on this idea / project. Let me know if you ever need a hack partner to fill out some features.
farhadi
contestantdavidplusplus
contestantThis is great idea!
seanami
contestantDoesn’t seem like a tool that I would ever actually use, but I can appreciate that there’s some pretty impressive technology behind the scenes to make this go.
hij1nxjudgeThis is an incredibly fascinating entry. Definitely have a good look at a long list of high caliber node modules created by this team in order for this to work.
Edit: I just read some other votes. Judges! Please do some code reading on the projects you are judging, the utility on this project is OFF THE CHARTS. =)
aaronheckmannjudgeNeat toy. I don’t think I’d really use an animated heatmap on my code but its a helpful way to quickly see hotspots. A lot of potential here.
mranneyjudgeThis is brilliant and very innovative. I can think of many uses for this. It seems like all IDEs should have something like this.
rauchgjudgeExcellent project by some of the best!
dawnerd
contestantNot exactly sure what the use case is for this.
Jaciones
contestantVery cool. Fun to play with too.
voodootikigodjudgeinteresting perspective on stack traces. would be better if I could provide code samples so I could play with how it works. On its own its pretty static.
EDIT: Previous vote was based on a bad direct link that some how was propagated into system. Vote updated — Ignore comments.
- contestant
would be better if I could provide code samples so I could play with how it works.
What do you mean by this? You should be able to upload relatively arbitrary javascript without too much difficulty. I mean, unless it broke or something.
Idea: It’d be cool to be able to point this at a gist and have it work. Hmm…
mattpodwysockijudgeGreat idea and I like the ability to either type in my code or upload some. A nice way of thinking about stacktraces…
nddrylliogjudgeVery nice and original complex! I found the design funny, and the whole idea quite fantastic. In fact I saw it on HackerNews or Twitter (can’t remember which) before even having to judge it :) Kudos!
ryanspoonjudgeVery clever. High on fun! Not so sure about utility…. but clever, fun and interesting nonetheless. I could imagine some UIs that showcase efficiency, etc and thus create utility.
phillyqueso
contestantGood stuff!
sly010
contestantI really appreciate the technical complexity of this work, but I am missing both the design and the application.
Also I don’t know anything about SubStack other works, but I don’t think those should matter here.
krisoft
contestantNice visualization. As for utility, I’ll probably continue using one of the many profilers out there.
cooperq
contestantchapel
contestantI have been watching Substack create library after library, with varying purposes and scope, but I always knew there was a reason. You might not agree with his way of doing things, but you can’t ignore his brilliance and ability to make amazing things.
This entry further proves that there is more to what we can do as coders, and I would love a complete code coverage tool using something like this.
niftylettuce
contestantNICE! SubStack and pkrumins brought us Browserling and StackVM, now they bring us Heatwave! Along with jesusabdullah and rook2pawn, they packed bundles of goodness (colorful too) into this inferno of an entry… and then made it erupt with rather useful code visualization. Watch out for recursive loops though XD.
ncb000gt
contestantguybrush
contestantgeoffreyd
contestantmicahflee
contestantThis is totally trippy. I like it.
masylum
contestantThe idea is AMAZING. Although the performance is not great and the design could be better (although I love substack drawings :))
vikstrous
contestantLooks good. Very useful. Cool idea. Performance is not good enough for real world use and I don’t know if it can be.
juliogreff
contestantNICE! Agree with every comment here. It’s brilliant, and I’d love to use this everywhere, but the app needs a better design.
sorensen
contestantAbsolutely brilliant!
joaomilho
contestantAgree with all te voters: very innovative & useful. But the design really needs improvements!
jimfleming
contestantWow, this would make for an awesome debugger – can I get this as a l Chrome extension? or maybe an npm module I can run again node? But a very unique idea I hope you guys keep improving it after the competition.
Raynos
contestantThis is nothing less of sheer brilliance.
DamonOehlman
contestantSo, so good. The combination of crazy stuff required here just makes this awesome.
Can I please vote a 6 on the innovation scale please…
carsonmcdonald
contestant
visnupjudgenot only does this do crazy mind-bending things with your AST, but it does it with FIREY ANIMATIONS!
this inspires me to think that the halting problem is decidable (screw the math).
raoulmillais
contestant
maraksquiresjudgeCreatively ingenious, technical amazing, and flawlessly executed. I would not expect any less from the team led by SubStack. This entry represents a step forward in how we can think and interact with code and software development.
I hope the technical merit and utility of this project doesn’t escape other voters. This project is not a hack. Every piece of functionality for Heatwave ( like the AST walking, the heatmap, the code coverage tool) are separate and distinct open-source libraries they have written. Contributions like this are invaluable to the Node.js community
It would be awesome if this could be hooked in to the V8 debug output to find out which parts V8 is struggling with when it tries to run it over with crankshaft.
You don’t really need to parse code with AST to find out what is called a lot, you might need to do that with code that spans more then 1000 lines but for small snippets it should already be obvious.
But the application is really complete 5 for that.