Google Code Playground - a tool for co-testing examples in Javascript
If knowledge begins to be used
not on purpose -
this is socially useful knowledge.
A year has passed since the public opening of the Google Code Playground tool. Time has passed a lot, it is used a little. In fact, he has everything to effectively used for other purposes.
The tool is intended for demonstration and online debugging of examples of Google code (JS + HTML + CSS) in the browser. Diligently laid out hundreds of examples and written documentation for them. Now we will not need all this, except for using the engine itself, which allows editing, testing and saving, not someone else's, but our own code samples.
It was found that the development of the Google Code Playground , made by them “for themselves”, for their scripts, is also suitable for testing and sharing Javascript codes on forums.
')
For this service has 3 decisive functions:
1. The window for changing the code on the fly . Simply erase the unnecessary and write your own in the upper right frame. If you want to write HTML and styles - there is a button "Edit HTML". If you need to substitute third-party code (the same library) - we write in HTML.
2. A frame for testing in the same window. The “Run code" button on the right and shown in the sandbox in the lower frame (iframe).
3. The buttons “ Save code ” (“V” - “Save” at the top right), “ Export ” (ibid.) - provide a link, which you can then share on the forum as a result.
The “joint” testing of the code in the title means that it is very easy to see the published code by someone, put it in your Playground sandbox, edit it and publish it again under a new link, which is then shared through the forum. If the communication is closer (icq, Wave), then it will probably be more convenient to test only in the sandbox and send the verified code through the message sending window. There is only one step left before sharing the sandbox, but it is difficult - a synchronization tool is needed, so we will not demand too much from the Playground - there are SVN and similar serious tools for this.
Disadvantages:
Ned.1. The shell does not understand the Cyrillic alphabet neither in JS, nor in the body, despite the fact that the code states <meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> by default.
Ned.2. The shell does not report an error , but simply repeats the launch of the previously saved code. It seems that nothing has changed. Therefore, when debugging, it is necessary (until this has been fixed, but already a year , as it has not been fixed) to be very careful, to make sure that the code has been perceived (for example, to put a specially visible new symbol). It is especially difficult to keep in mind that any Cyrillic is also a mistake . There is a temporary, less convenient way out - launch via “Export”, and if there is no long parameter in the address bar, there was an error.
Ned.3 In different browsers - different details of interface support (compare Opera and FF3.6). It is better, of course, to use the most supported browsers FF3.5 + and Chrome in order not to miss anything useful in the interface. (But Firebug Lite seems to act worse in FF.)
Ned.4 “The Playground no longer supports Internet Explorer. Please install the Chrome Frame plugin to use the Playground. "(Playground does not support IE. However, all exported pages can be viewed in different browsers.)
About saving : it works if there are no errors in the code or invalid code. Saving will require an account and save it in the specially created for you folder “Saved Code” at the top of the list of Google examples. To make the code publicly available, as well as to save it without having to sign in to your account, you must click "V“ - “Export” in the upper right (it does not work in Opera).
For example , a simple alert ('dfgrt') was saved in place of some code without logging into your Google account. It is not known how long the file will be stored - we'll see. Recorded on February 12, 2010.
We continue the listing of the merits .
4. The presence of libraries in the examples :
* jQuery
* jQueryUI
* MooTools
* Dojo
* Prototype Scriptaculous
You need to run the code in the sandbox for ready and onload, taking into account the presence of the shell (class, or more precisely, the hash) google. For example, here’s how you managed to call loading something on onload in the jQuery section (everything that was in the Edit code window was erased and written):
This is written instead of the simple $ (function () {alert (1)}); saved example
We try to use a third-party library from another site without a google shell. Click " Edit HTML " and see all the HTML for the sandbox. Replace with your own.
The use of the Cyrillic alphabet is still impossible (although there is a translator into Russian and many other languages ​​in Google’s examples), changing the code page to windows-1251 doesn’t help either. But it is possible to fully use the library, scripts and styles. Obviously, you can easily use external style files and images.
Running this example on the Playground looks like this:
Of the indecisive, but important advantages in the Playground are:
5. Debug mode (breakpoints), added in April 2009 .
6. Firebug Lite in debug mode.
7. Code is written with highlighting and indents ; indents feel brackets (but not trailing tags); if a group of lines is selected, pressing Tab normalizes indents, comments are not deleted and everything is civilized. Of course, there is a numbering of lines. Selecting text with a mouse to copy without any problems - does not take too much. Therefore, it is more convenient to write example codes for forums and communication there than in the forums themselves, if there is no editor at hand.
Conclusions :
1) you should learn the 3 words “Google Code Playground”, so that from any place where there is Internet, you can debug and demonstrate the work of your own simple or someone else's code;
2) the inadmissibility of Cyrillic - perhaps the most "strong" lack of use, limiting the scope of application of specially written short examples. On the Web, it is desirable to have a similar service, but with Cyrillic and with no suppression of script errors.
There is another short note about this tool: habrahabr.ru/blogs/google/50258/ .
not on purpose -
this is socially useful knowledge.
A year has passed since the public opening of the Google Code Playground tool. Time has passed a lot, it is used a little. In fact, he has everything to effectively used for other purposes.
The tool is intended for demonstration and online debugging of examples of Google code (JS + HTML + CSS) in the browser. Diligently laid out hundreds of examples and written documentation for them. Now we will not need all this, except for using the engine itself, which allows editing, testing and saving, not someone else's, but our own code samples.
It was found that the development of the Google Code Playground , made by them “for themselves”, for their scripts, is also suitable for testing and sharing Javascript codes on forums.
')
For this service has 3 decisive functions:
1. The window for changing the code on the fly . Simply erase the unnecessary and write your own in the upper right frame. If you want to write HTML and styles - there is a button "Edit HTML". If you need to substitute third-party code (the same library) - we write in HTML.
2. A frame for testing in the same window. The “Run code" button on the right and shown in the sandbox in the lower frame (iframe).
3. The buttons “ Save code ” (“V” - “Save” at the top right), “ Export ” (ibid.) - provide a link, which you can then share on the forum as a result.
The “joint” testing of the code in the title means that it is very easy to see the published code by someone, put it in your Playground sandbox, edit it and publish it again under a new link, which is then shared through the forum. If the communication is closer (icq, Wave), then it will probably be more convenient to test only in the sandbox and send the verified code through the message sending window. There is only one step left before sharing the sandbox, but it is difficult - a synchronization tool is needed, so we will not demand too much from the Playground - there are SVN and similar serious tools for this.
Disadvantages:
Ned.1. The shell does not understand the Cyrillic alphabet neither in JS, nor in the body, despite the fact that the code states <meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> by default.
Ned.2. The shell does not report an error , but simply repeats the launch of the previously saved code. It seems that nothing has changed. Therefore, when debugging, it is necessary (until this has been fixed, but already a year , as it has not been fixed) to be very careful, to make sure that the code has been perceived (for example, to put a specially visible new symbol). It is especially difficult to keep in mind that any Cyrillic is also a mistake . There is a temporary, less convenient way out - launch via “Export”, and if there is no long parameter in the address bar, there was an error.
Ned.3 In different browsers - different details of interface support (compare Opera and FF3.6). It is better, of course, to use the most supported browsers FF3.5 + and Chrome in order not to miss anything useful in the interface. (But Firebug Lite seems to act worse in FF.)
Ned.4 “The Playground no longer supports Internet Explorer. Please install the Chrome Frame plugin to use the Playground. "(Playground does not support IE. However, all exported pages can be viewed in different browsers.)
About saving : it works if there are no errors in the code or invalid code. Saving will require an account and save it in the specially created for you folder “Saved Code” at the top of the list of Google examples. To make the code publicly available, as well as to save it without having to sign in to your account, you must click "V“ - “Export” in the upper right (it does not work in Opera).
For example , a simple alert ('dfgrt') was saved in place of some code without logging into your Google account. It is not known how long the file will be stored - we'll see. Recorded on February 12, 2010.
We continue the listing of the merits .
4. The presence of libraries in the examples :
* jQuery
* jQueryUI
* MooTools
* Dojo
* Prototype Scriptaculous
You need to run the code in the sandbox for ready and onload, taking into account the presence of the shell (class, or more precisely, the hash) google. For example, here’s how you managed to call loading something on onload in the jQuery section (everything that was in the Edit code window was erased and written):
google. load ( "jquery" , "1" ) ;
google. setOnLoadCallback (
function ( ) {
alert ( 1 )
} ) ;This is written instead of the simple $ (function () {alert (1)}); saved example
We try to use a third-party library from another site without a google shell. Click " Edit HTML " and see all the HTML for the sandbox. Replace with your own.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "content-type" content = "text/html; charset=utf-8" / >
< title > Primer raboty s HTML i jQuery < / title >
< style >
.under{text-decoration: underline;}
< / style >
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" >< / script >
< script type = "text/javascript" >
$ ( function ( ) {
a = $ ( 'body' ) . html ( ) ;
$ ( 'body div' ) . html ( '...567' ) ;
alert ( [ a , $ ( 'body' ) . html ( ) ] ) ;
$ ( 'body div' ) . html ( '<b>Primer</b>' ) ;
} ) ;
< / script >
< / head >
< body style = "font-family: Arial;border: 0 none;" >
< div class = "under" id = "content" > 345... < / div >
< / body >
< / html >The use of the Cyrillic alphabet is still impossible (although there is a translator into Russian and many other languages ​​in Google’s examples), changing the code page to windows-1251 doesn’t help either. But it is possible to fully use the library, scripts and styles. Obviously, you can easily use external style files and images.
Running this example on the Playground looks like this:
Of the indecisive, but important advantages in the Playground are:
5. Debug mode (breakpoints), added in April 2009 .
6. Firebug Lite in debug mode.
7. Code is written with highlighting and indents ; indents feel brackets (but not trailing tags); if a group of lines is selected, pressing Tab normalizes indents, comments are not deleted and everything is civilized. Of course, there is a numbering of lines. Selecting text with a mouse to copy without any problems - does not take too much. Therefore, it is more convenient to write example codes for forums and communication there than in the forums themselves, if there is no editor at hand.
Conclusions :
1) you should learn the 3 words “Google Code Playground”, so that from any place where there is Internet, you can debug and demonstrate the work of your own simple or someone else's code;
2) the inadmissibility of Cyrillic - perhaps the most "strong" lack of use, limiting the scope of application of specially written short examples. On the Web, it is desirable to have a similar service, but with Cyrillic and with no suppression of script errors.
There is another short note about this tool: habrahabr.ru/blogs/google/50258/ .
Source: https://habr.com/ru/post/84793/
All Articles