How is this JavaScript code being run?

JavaScript
1

Dear All,

I’m referring to this YT video

timestamp 10:25, how is this code is getting run ?

  1. If statements are calling same function, there are green, white / red blocks against function call or exception.

How is this done ?

Thanks in advance

2

the colored blocks must be an editor feature, that’s not JavaScript itself

3

It is Quokka.js. I highly recommend it, even the free version is great.

1 Like
4

Just to add to what @lasjorg says, the green/red in the left column is a tool called Wallaby, the sister project to Quokka. Quokka is the tool giving him the the red text (the evaluated code), that shows up as he types, whereas Wallaby looks at test files and marks the code as passing/failing those tests.

Note that although both tools do have a free tier, that tier is a little bit limited. iirc at the time he made those videos they were in early-ish development, and most of the features were still free. I can remember using them quite a bit after seeing them on his videos. They’re a bit more restrictive now, and less useful for real-world work without paying to unlock the more useful features. But if you’re just learning, you should be able to get a lot of use from the free tiers.

1 Like
5

Thanks for replies @DanCouper @lasjorg can you please recommend any alternative tool which is free ?

Or is the best way to run standalone js file ?

Thanks,
Vikram

6

For Quokka, you’re not going to get online hints (you need to console.log), but you can use a code runner, eg Code Runner - Visual Studio Marketplace

You should be able to set VSCode to run the plugin automatically on save as well.

There’s run.js as well, it’s free but it’s an app

For Wallaby, there are a load of test framework plugins that will automatically run your tests in the background and show visual feedback. Again, not as smooth as Wallaby (but, that’s why it costs money)

1 Like
7

Just use Quokka the free version is perfectly fine.

Personally, I think the free version is very much worth having even just as a Nodejs REPL. They have added new features to the free version as well, like the time machine which gives you an in-editor debugger (ish) that also lets you see the live values as you can in the pro version. I haven’t really used it much but it’s pretty cool.

List of free vs pro features.

BTW, Quokka shows the colors (Live Code Coverage) as well.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.