javascript,jsenvy,tutorial

JS Envy: Play by yourself

30 Jan , 2015  

The first and most important thing that JS Envy enables is the ability to play with JavaScript libraries in the browser with a little effort as possible. Here are the basics behind using JS Envy to rapidly build a test environment.

Load a Library

CDNJS Search

Search CDNJS just by typing the library name

There are two ways to load a library in JS Envy. The first is by searching the name and selecting the result from the list. You can also hit enter to grab the top result to get through this with a bit more ease.

If a library wasn’t found in your search, or you want to load a specific version of a library, you can also specify a URL pointing to the library’s source, otherwise referred to as the full path.

Gotchas

JS Envy does not inherently handle dependencies. In other words: if you are loading a library with dependencies, make sure you have loaded those first otherwise your environment may not work.

You should also note that a library cannot be unloaded; if you accidentally load a library the best move would be to refresh the page.

Play with the Library

Sample Console Use

Run commands in the native console or using the on-page, mobile friendly console

There are two ways you can play in the environment you have created: the browser’s native console and the on-page console. The browser console works normally because the libraries loaded are loaded on the page, not on a server side environment or within an iFrame. The on-page console is incredibly simple; it currently supports just a few features:

  • Pretty print objects
  • Generic error handling
  • History navigation (using the arrow keys)
  • Mobile friendly

It is also worth mentioning that the on-page console’s statements are evaluated on the window, meaning that variables and functions defined in it will also be available in the native console.

Next Steps


Leave a Reply