Web browser that only runs JavaScript, to use as a development sandbox - javascript

I'm looking for a JavaScript read-evaluate-print loop for development prototyping.
For now, I am using the Firebug Console, the Firefox Developer Tools Web Console, repl.it, jsFiddle, plunker, or one of the other online tools.
The problem is that a Firefox console is linked to the tab/window on which I opened it. The web based ones have restrictions too; for instance, jsFiddle.net doesn't show console output and repl.it does not let me use Fiddler to watch an XMLHttpRequest.
What I would like is a Windows desktop application that is very similar to the PowerShell ISE but that runs JavaScript instead.
+-------------------------------+----------------------------------+
| | |
| JavaScript to Run | Console Output |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+-------------------------------+----------------------------------+
It still needs to have the same functionality as the Firebug Console or Firefox Web Console. I.e. it needs to evaluate JavaScript, output console messages, and send HTTP requests via XMLHttpRequest. Does this exist? Where can I get it?

I ended up using PhantomJS, Notepad, and the Windows Command Line. First, install PhantomJS. Then...
Edit
Open Notepad.
Create a JavaScript file.
Type console.log('foo');
Save.
Run
Open the Command Line.
Run phantomjs myfiddle.js.
Press Ctrl + C to exit phantom.
Repeat
Switch to Notepad. Edit. Save.
Switch to Command Line. Run.
Here is a screen shot of a streamlined process running on my machine.
It works with XMLHttpRequests, I can inspect the request with Fiddler, and the nice-to-have is that we can adapt it for use with Vim to create an integrated scripting environment.

As a professional developer, I have to point out this makes absolutely no sense. The code you write is not going to be understandable or meaningful in terms of "console output", unless you write toy code, or what you want is actually a live-reloading server environment, where you write html+js, and you want the browser to autoreload when you save updated files. In which case live-server may already be all you need.
If, on the other hand, what you need is a REPL like python or the like, then just Node.js is literally what you want. But then that doesn't make the most sense because why on earth would you edit your source code in a REPL instead of using a code editor...?

Related

Send redis message with html/javascript

I'm trying to find a way to send a redis message to a specific channel from a website. I think this might work, but I don't know how to use it and there is very little explanation.
Redis is supposed to only connect with a server, not directly with a client such as a browser (it's actually impossible to directly connect to redis from a browser).
You can achieve that running webdis on the server with redis and connecting to it from the browser, resulting in an infrastructure similar to this:
Client Server
----------------------
|
|
Browser ---> webdis
| |
| |
| v
| redis
Note that it would not be secure, because the client on the browser could do whatever he wants with your redis database.
Usually, a custom server program is implemented that forward your commands to the redis server in a controlled way:
Client Server
----------------------
|
|
Browser ---> custom server
| |
| |
| v
| redis

Error Unknown type "webform__webform" using gatsby-drupal-webform & GraphQL

I get this error when using gatsby-drupal-webform in my Gatsby js site :
Failed to compile
GraphQL Error Unknown type "webform__webform". Did you mean "date_format__date_format"?
file: C:/xampp/htdocs/drupal-gatsby-t/node_modules/gatsby-drupal-webform/dist/Webform.jsx
1 |
> 2 | fragment Webform on webform__webform {
| ^
3 | name: drupal_internal__id
4 | description
5 | status
6 | elements {
7 | name
8 | _type
9 | _title
10 | _title_display
11 | _default_value
12 | _description
I'm the author of the module. The version of the package used in this question is old and it didn't work without my Drupal hacks that were not published at the time.
I would suggest updating to newest version by running npm install gatsby-drupal-webform#latest --save
Then you also need to:
Install a Drupal module from the Drupal repository. This module will preprocess Webform jsonapi output and open a REST endpoint that is used to submit forms.
Have Gatsby access Drupal jsonapi with access any webform configuration permission. This can be done by installing basic_auth module for Drupal and setting username and password of a user with that permission in gatsby-source-drupal settings.
You can take a look at this example project.

Can Dymo JavaScript API connect to Dymo web service which is hosted on a different machine on the same network?

I have a task to build an application online which would allow printing labels through Dymo LabelWriter 450 Turbo printer. The goal of this application is - company employees submit data to that needs to be on stickers via website and when they click 'print', all the labels are printed by one of the office machines.
After launching Dymo web service on the mentioned machines, I am able to print labels if I click print while I am in those machines through JavaScript API that Dymo provides, however if I try accessing the script that I wrote from other computers on a network, printing does not work. This is due to the fact that JavaScript API points to 'localhost'.
I downloaded JavaScript API locally and replaced 'localhost' in it with the IP addresses of machines on a network, but now, API when trying to access web service times out. Is there any way of solving this?
Here is visualization of how everything works:
-------------------------------------------------
| Local machine, 198.168.0.1 |
| |
| Dymo webservice runs here. |
| |
| If JavaScript API is run, it communicates |
| with webservice without any problems, |
| printing works. API points to 'localhost' |
| |
-------------------------------------------------
Here is visualization of what I want to do, but what doesn't work because API times out when trying to communicate to web service:
-------------------------------------------------
| Local machine, 198.168.0.1 |
| |
| Dymo webservice runs here. |
| |
-------------------------------------------------
|
| LAN
|
-------------------------------------------------
| Local machine, 198.168.0.2 |
| |
| Javascript API is downloaded here and |
| 'localhost' is replaced to 198.168.0.1 |
| |
| After user accesses a webpage and clicks print,|
| API tries to contact web service, but times out|
| |
-------------------------------------------------
Thank you in advance!
Dymo binds on the loopback adapter, so you can only connect with 127.0.0.1 or localhost. In your case, I would advise to share the printer on the network just like any other printer and install the Dymo Label software on each workstation while installing the Dymo as a network printer.

Nodejs getting all needed scripts and stylesheets route from a page request(without browsers)

I'm wondering if it is possible for me to get all the scripts and stylesheets routes I need from a html file.(not using browsers at all.)
for example:
I run index.html, and the website need ./style.css and also need ./script.js and lot of images.
How could I know what index.html need the routes of style.css and script.js and images.
another question: Does the browser works like rendering HTML file while it need some files, the browser request to server and wait for response? So is there a way I could use nodejs to analog the action and not using browsers?
You have to specify the location of your static content in your app.js file from where server will serve the files to browser when index.html will render.
for example if i have following directory structure
ROOT
|
---public
| |
| ----css
| | |
| | ----style.css
| | |
| |
| ----js
| | |
| | ----script.js
| | |
| |
| ----images
| |
|
|
---app.js
|
---index.html
|
Browser requested urls format are
css - > <link href="/css/style.css" rel="stylesheet" type="text/css" />
js - > <script type="text/javascript" src="/js/script.js"></script>
after that you have to add following code in your app.js file;
app.use(express.static(__dirname + '/public'));
if express is not installed in your system install it form cmd using command
npm install express
add following line of code in app.js
var express = require('express')
, app = express();
Find out a good way to solve the problem is using phantomjs(http://phantomjs.org/), network-monitoring is probably something I'm looking for.

TinyMCE file upload, generic syntax error

When using TinyMCE's "Ajax File Manager" plugin file upload, I get the following error when I hit the upload button:
"Syntax error: missing ; before statement"
Everything else seems to be working okay. Any ideas? (Permission settings somewhere maybe?)
EDIT: Here's some more info: If the uploaded folder is left in the original structure there is no problem...
When I move the uploaded folder (and make the appropriate changes to config.base.php) the error occurs. Why would changing the location of the upload folder cause that error?
tinymce
|
| jscripts
|
| tiny_mce
|
| plugins
|
| ajaxfilemanager
| |
| | inc
| |
| | config.base.php (the CONFIG_SYS_DEFAULT_PATH and CONFIG_SYS_ROOT_PATH need to be '../uploaded/')
|
| uploaded (chmod to 777 - placement of folder any other place causes errors, even if changed in config.base.php)
EDIT: I just learned that the problem started happening when mod_security was added to Apache and recompiled. Has anyone come across this problem?
Figured it out: Our host had just added mod_security and recompiled Apache. They had to white list ajaxfilemanager to get it to work properly again.
define('CONFIG_SYS_MY_DOCROOT', $_SERVER['DOCUMENT_ROOT'] . implode('/',array_slice(explode('/',$_SERVER['PHP_SELF']),0,-3)));
define('CONFIG_SYS_DEFAULT_PATH', CONFIG_SYS_MY_DOCROOT.'/uploads/'); //accept relative path only
define('CONFIG_SYS_ROOT_PATH', CONFIG_SYS_MY_DOCROOT.'/uploads/'); //accept relative path only
//define('CONFIG_SYS_DEFAULT_PATH', '../../../uploads/'); //accept relative path only
//define('CONFIG_SYS_ROOT_PATH', '../../../uploads/'); //accept relative path only

Categories