opal-irb 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +3 -0
- data/.ruby-gemset +1 -0
- data/.ruby-version +1 -0
- data/Gemfile +14 -0
- data/Gemfile.lock +113 -0
- data/Guardfile +5 -0
- data/LICENSE +21 -0
- data/README.md +175 -0
- data/Rakefile +65 -0
- data/Roadmap.org +17 -0
- data/app/assets/stylesheets/opal-irb/jqconsole.css +263 -0
- data/compiled/app-embeddable.js +39765 -0
- data/compiled/app-jqconsole.js +39767 -0
- data/compiled/application.js +27399 -0
- data/css/ansi.css +172 -0
- data/css/opal_irb_jqconsole.css +79 -0
- data/css/show-hint.css +38 -0
- data/doc/presentations/opal_irb_overview.html +678 -0
- data/doc/presentations/opal_irb_overview.org +448 -0
- data/examples/app-embeddable.rb +8 -0
- data/examples/app-jqconsole.rb +10 -0
- data/examples/application.rb +8 -0
- data/index-embeddable.html +29 -0
- data/index-homebrew.html +115 -0
- data/index-jq.html +80 -0
- data/js/anyword-hint.js +44 -0
- data/js/jqconsole.js +1583 -0
- data/js/nodeutil.js +546 -0
- data/js/ruby.js +285 -0
- data/js/show-hint.js +383 -0
- data/lib/opal-irb/rails_engine.rb +3 -0
- data/lib/opal-irb/version.rb +3 -0
- data/lib/opal-irb-rails.rb +2 -0
- data/lib/opal-irb.rb +44 -0
- data/opal/object_extensions.rb +20 -0
- data/opal/opal_irb/completion_engine.rb +202 -0
- data/opal/opal_irb/completion_formatter.rb +49 -0
- data/opal/opal_irb/completion_results.rb +88 -0
- data/opal/opal_irb.rb +88 -0
- data/opal/opal_irb_homebrew_console.rb +398 -0
- data/opal/opal_irb_jqconsole.rb +517 -0
- data/opal/opal_irb_jqconsole_css.rb +259 -0
- data/opal/opal_irb_log_redirector.rb +32 -0
- data/opal/opal_phantomjs.rb +49 -0
- data/opal-irb.gemspec +20 -0
- data/spec/code_link_handler_spec.rb +30 -0
- data/spec/jquery.js +5 -0
- data/spec/object_extensions_spec.rb +32 -0
- data/spec/opal_irb/completion_engine_spec.rb +204 -0
- data/spec/opal_irb/completion_results_spec.rb +32 -0
- data/spec/opal_irb_log_director_spec.rb +19 -0
- data/spec/opal_irb_spec.rb +19 -0
- data/spec/spec_helper.rb +1 -0
- metadata +151 -0
|
@@ -0,0 +1,678 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html lang="en">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8"/>
|
|
6
|
+
<title>Overview of Opal-IRB features</title>
|
|
7
|
+
<meta name="author" content="(Forrest Chang)"/>
|
|
8
|
+
|
|
9
|
+
<link rel="stylesheet" href="http://cdn.jsdelivr.net/reveal.js/3.0.0/css/reveal.css"/>
|
|
10
|
+
<link rel="stylesheet" href="http://cdn.jsdelivr.net/reveal.js/3.0.0/css/theme/moon.css" id="theme"/>
|
|
11
|
+
|
|
12
|
+
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
|
|
13
|
+
<script>
|
|
14
|
+
if( window.location.search.match( /print-pdf/gi ) ) {
|
|
15
|
+
var link = document.createElement( 'link' );
|
|
16
|
+
link.rel = 'stylesheet';
|
|
17
|
+
link.type = 'text/css';
|
|
18
|
+
link.href = 'http://cdn.jsdelivr.net/reveal.js/3.0.0/css/print/pdf.css';
|
|
19
|
+
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<div class="reveal">
|
|
25
|
+
<div class="slides">
|
|
26
|
+
<section id="sec-title-slide">
|
|
27
|
+
<h1>Overview of Opal-IRB features</h1>
|
|
28
|
+
<h2>Forrest Chang</h2>
|
|
29
|
+
<h2><a href="mailto:fkchang2000@yahoo.com">fkchang2000@yahoo.com</a></h2>
|
|
30
|
+
<h2></h2>
|
|
31
|
+
</section>
|
|
32
|
+
<section>
|
|
33
|
+
<section id="slide-sec-1">
|
|
34
|
+
<h2 id="sec-1">Reason for the talk</h2>
|
|
35
|
+
<ul target=""_blank"">
|
|
36
|
+
<li class="fragment roll-in"><a href="https://github.com/fkchang/opal-irb/blob/master/README.md">opal-irb</a> has many features</li>
|
|
37
|
+
<li class="fragment roll-in">Most don't know about them</li>
|
|
38
|
+
<li class="fragment roll-in">Hence this talk (based on <a href="http://funkworks.blogspot.com/2015/08/an-overview-of-opal-irbs-features.html">http://funkworks.blogspot.com/2015/08/an-overview-of-opal-irbs-features.html</a>)</li>
|
|
39
|
+
|
|
40
|
+
</ul>
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
</section>
|
|
44
|
+
</section>
|
|
45
|
+
<section>
|
|
46
|
+
<section id="slide-sec-2">
|
|
47
|
+
<h2 id="sec-2">What is opal-irb?</h2>
|
|
48
|
+
<ul>
|
|
49
|
+
<li class="fragment roll-in"><a href="https://github.com/fkchang/opal-irb">https://github.com/fkchang/opal-irb</a></li>
|
|
50
|
+
<li class="fragment roll-in">An in browser REPL (read eval print loop)</li>
|
|
51
|
+
<li class="fragment roll-in">Aims to be the opal equivalent of Ruby's irb (interactive ruby), and pry</li>
|
|
52
|
+
<li class="fragment roll-in">A tool in which you can play with Ruby any time you have access to a browser</li>
|
|
53
|
+
|
|
54
|
+
</ul>
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
</section>
|
|
58
|
+
</section>
|
|
59
|
+
<section>
|
|
60
|
+
<section id="slide-sec-3">
|
|
61
|
+
<h2 id="sec-3">3 Sections</h2>
|
|
62
|
+
<ol>
|
|
63
|
+
<li class="fragment roll-in">What opal-irb has in common with irb</li>
|
|
64
|
+
<li class="fragment roll-in">How opal-irb differs from irb</li>
|
|
65
|
+
<li class="fragment roll-in">Features unique to opal-irb</li>
|
|
66
|
+
|
|
67
|
+
</ol>
|
|
68
|
+
|
|
69
|
+
</section>
|
|
70
|
+
</section>
|
|
71
|
+
<section>
|
|
72
|
+
<section id="slide-sec-4">
|
|
73
|
+
<h2 id="sec-4">1) In Common with irb</h2>
|
|
74
|
+
<div class="outline-text-2" id="text-4">
|
|
75
|
+
</div></section>
|
|
76
|
+
<section id="slide-sec-4-1">
|
|
77
|
+
<h3 id="sec-4-1">Terminal Emulation (of sorts)</h3>
|
|
78
|
+
<ul>
|
|
79
|
+
<li class="fragment roll-in">irb - terminal formatting</li>
|
|
80
|
+
<li class="fragment roll-in">opal-irb, via a jqconsole fork, supports some ANSI formatting code</li>
|
|
81
|
+
|
|
82
|
+
</ul>
|
|
83
|
+
|
|
84
|
+
<span class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)"><p>
|
|
85
|
+
Example
|
|
86
|
+
</p></span>
|
|
87
|
+
<div class="org-src-container">
|
|
88
|
+
|
|
89
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)"><span style="color: #DCDCCC; font-weight: bold;">puts</span> <span style="color: #CC9393;">"\033[31mRed Text"</span>
|
|
90
|
+
</pre>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
</section>
|
|
94
|
+
<section id="slide-sec-4-1-1">
|
|
95
|
+
<h4 id="sec-4-1-1">ANSI colors In browser</h4>
|
|
96
|
+
<iframe width="100%" height="500" src="http://git.io/vmQVY" frameborder="0" allowfullscreen></iframe>
|
|
97
|
+
|
|
98
|
+
</section>
|
|
99
|
+
<section id="slide-sec-4-2">
|
|
100
|
+
<h3 id="sec-4-2">History up down history</h3>
|
|
101
|
+
<ul>
|
|
102
|
+
<li class="fragment roll-in">Like irb, opal-irb stores a history of previous statements.</li>
|
|
103
|
+
<li class="fragment roll-in">Navigate this history with the up/down arrows</li>
|
|
104
|
+
<li class="fragment roll-in">or use the "GNU readline commands".</li>
|
|
105
|
+
|
|
106
|
+
</ul>
|
|
107
|
+
|
|
108
|
+
</section>
|
|
109
|
+
<section id="slide-sec-4-2-1">
|
|
110
|
+
<h4 id="sec-4-2-1">GNU readline commands (emacs subset)</h4>
|
|
111
|
+
<ul>
|
|
112
|
+
<li class="fragment roll-in">A subset of the gnu readline manipulation is supported.</li>
|
|
113
|
+
<li class="fragment roll-in">Will likely add more support over time.</li>
|
|
114
|
+
<li class="fragment roll-in">The currently supported bindings are:</li>
|
|
115
|
+
|
|
116
|
+
</ul>
|
|
117
|
+
|
|
118
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
119
|
+
Up/Down Arrow and ctrl-p/ctrl-n: Navigate through history
|
|
120
|
+
ctrl-a: Beginning of line
|
|
121
|
+
ctrl-e: End of line
|
|
122
|
+
ctrl-b: Back 1 character
|
|
123
|
+
ctrl-f: Forward 1 character
|
|
124
|
+
ctrl-d: Delete 1 character
|
|
125
|
+
ctrl-k: Kill to the end of the line
|
|
126
|
+
alt-b: Back 1 word
|
|
127
|
+
alt-f: Forward 1 word
|
|
128
|
+
alt-d: Delete 1 word
|
|
129
|
+
</pre>
|
|
130
|
+
|
|
131
|
+
</section>
|
|
132
|
+
<section id="slide-sec-4-3">
|
|
133
|
+
<h3 id="sec-4-3">Autocomplete</h3>
|
|
134
|
+
<ul>
|
|
135
|
+
<li class="fragment roll-in">A work-in-progress</li>
|
|
136
|
+
<li class="fragment roll-in">Same tab completion model that irb does. It looks like this:</li>
|
|
137
|
+
|
|
138
|
+
</ul>
|
|
139
|
+
|
|
140
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
141
|
+
opal> S<tab>
|
|
142
|
+
STDERR STDIN STDOUT ScriptError Set
|
|
143
|
+
SignalException StandardError StopIteration String StringIO
|
|
144
|
+
StringScanner Struct Symbol SyntaxError SystemCallError
|
|
145
|
+
SystemExit
|
|
146
|
+
</pre>
|
|
147
|
+
|
|
148
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
149
|
+
opal> ST<tab>
|
|
150
|
+
STDERR STDIN STDOUT
|
|
151
|
+
</pre>
|
|
152
|
+
|
|
153
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
154
|
+
opal> STDI<tab>
|
|
155
|
+
</pre>
|
|
156
|
+
|
|
157
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
158
|
+
opal> STDIN
|
|
159
|
+
</pre>
|
|
160
|
+
|
|
161
|
+
</section>
|
|
162
|
+
<section id="slide-sec-4-4">
|
|
163
|
+
<h3 id="sec-4-4">Live Autocomplete demo</h3>
|
|
164
|
+
<iframe width="100%" height="500" src="http://fkchang.github.io/opal-irb/index-jq.html" frameborder="0" allowfullscreen></iframe>
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
</section>
|
|
168
|
+
<section id="slide-sec-4-5">
|
|
169
|
+
<h3 id="sec-4-5">Multi Line Input</h3>
|
|
170
|
+
<ul>
|
|
171
|
+
<li class="fragment roll-in">You can type multiple lines until your entry is complete.</li>
|
|
172
|
+
<li class="fragment roll-in">Incomplete lines shown with leading periods:</li>
|
|
173
|
+
|
|
174
|
+
</ul>
|
|
175
|
+
|
|
176
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
177
|
+
Welcome to Opal 0.7.1
|
|
178
|
+
type help for assistance
|
|
179
|
+
opal> class Foo
|
|
180
|
+
... def bar
|
|
181
|
+
... :bar
|
|
182
|
+
... end
|
|
183
|
+
... end
|
|
184
|
+
=> "bar"
|
|
185
|
+
opal>
|
|
186
|
+
</pre>
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
</section>
|
|
190
|
+
</section>
|
|
191
|
+
<section>
|
|
192
|
+
<section id="slide-sec-5">
|
|
193
|
+
<h2 id="sec-5">2) Different than irb</h2>
|
|
194
|
+
<div class="outline-text-2" id="text-5">
|
|
195
|
+
</div></section>
|
|
196
|
+
<section id="slide-sec-5-1">
|
|
197
|
+
<h3 id="sec-5-1">Last value returned - irb</h3>
|
|
198
|
+
<p>
|
|
199
|
+
In irb the last value returned is stored in _ variable:
|
|
200
|
+
</p>
|
|
201
|
+
|
|
202
|
+
<pre class="example">
|
|
203
|
+
2.2.1 :001 > 2 * 3
|
|
204
|
+
=> 6
|
|
205
|
+
2.2.1 :002 > puts _
|
|
206
|
+
6
|
|
207
|
+
=> nil
|
|
208
|
+
2.2.1 :003 >
|
|
209
|
+
</pre>
|
|
210
|
+
|
|
211
|
+
</section>
|
|
212
|
+
<section id="slide-sec-5-2">
|
|
213
|
+
<h3 id="sec-5-2">Opal-irb</h3>
|
|
214
|
+
<ul>
|
|
215
|
+
<li class="fragment roll-in">Last value is stored as $_.</li>
|
|
216
|
+
<li class="fragment roll-in">Departs due to technical reasons</li>
|
|
217
|
+
<li class="fragment roll-in">Would like to make it the same</li>
|
|
218
|
+
|
|
219
|
+
</ul>
|
|
220
|
+
|
|
221
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
222
|
+
opal> 2 * 3
|
|
223
|
+
=> 6
|
|
224
|
+
opal> puts $_
|
|
225
|
+
6
|
|
226
|
+
=> nil
|
|
227
|
+
opal>
|
|
228
|
+
</pre>
|
|
229
|
+
|
|
230
|
+
</section>
|
|
231
|
+
<section id="slide-sec-5-3">
|
|
232
|
+
<h3 id="sec-5-3">Help command</h3>
|
|
233
|
+
<div class="outline-text-3" id="text-5-3">
|
|
234
|
+
</div></section>
|
|
235
|
+
<section id="slide-sec-5-3-1">
|
|
236
|
+
<h4 id="sec-5-3-1">irb</h4>
|
|
237
|
+
<p>
|
|
238
|
+
Help in irb allows you to lookup documentation for methods via ri and rdoc docs.
|
|
239
|
+
</p>
|
|
240
|
+
|
|
241
|
+
<pre class="example">
|
|
242
|
+
2.0.0-p247 :001 > help
|
|
243
|
+
|
|
244
|
+
Enter the method name you want to look up.
|
|
245
|
+
You can use tab to autocomplete.
|
|
246
|
+
Enter a blank line to exit.
|
|
247
|
+
|
|
248
|
+
>>
|
|
249
|
+
</pre>
|
|
250
|
+
|
|
251
|
+
</section>
|
|
252
|
+
<section id="slide-sec-5-3-2">
|
|
253
|
+
<h4 id="sec-5-3-2">Opal-irb</h4>
|
|
254
|
+
<ul>
|
|
255
|
+
<li class="fragment roll-in">Opal-irb's help shows how to operate opal-irb.</li>
|
|
256
|
+
<li class="fragment roll-in">Help for method lookup to be done in a different fashion.</li>
|
|
257
|
+
|
|
258
|
+
</ul>
|
|
259
|
+
|
|
260
|
+
</section>
|
|
261
|
+
<section id="slide-sec-5-3-3">
|
|
262
|
+
<h4 id="sec-5-3-3">Current help command output</h4>
|
|
263
|
+
<pre class="example">
|
|
264
|
+
opal> help
|
|
265
|
+
help: This text
|
|
266
|
+
$_ last value returned is stored in this global
|
|
267
|
+
history: Shows history
|
|
268
|
+
irb_link_for history_num: Create a link for the code in the history
|
|
269
|
+
ctrl-c: Abort prompt
|
|
270
|
+
ctrl-m: Pop up multi-line editor
|
|
271
|
+
ctrl-Enter: Submit code in multi-line editor
|
|
272
|
+
ctrl-l: Creates a link with the code you have on the current line/lines
|
|
273
|
+
|
|
274
|
+
EDITOR FUNCTIONALITY
|
|
275
|
+
Up/Down Arrow and ctrl-p/ctrl-n: Navigate through history
|
|
276
|
+
ctrl-a: Beginning of line
|
|
277
|
+
ctrl-e: End of line
|
|
278
|
+
ctrl-b: Back 1 character
|
|
279
|
+
ctrl-f: Forward 1 character
|
|
280
|
+
ctrl-d: Delete 1 character
|
|
281
|
+
ctrl-k: Kill to the end of the line
|
|
282
|
+
alt-b: Back 1 word
|
|
283
|
+
alt-f: Forward 1 word
|
|
284
|
+
alt-d: Delete 1 word
|
|
285
|
+
=> nil
|
|
286
|
+
</pre>
|
|
287
|
+
|
|
288
|
+
</section>
|
|
289
|
+
</section>
|
|
290
|
+
<section>
|
|
291
|
+
<section id="slide-sec-6">
|
|
292
|
+
<h2 id="sec-6">3) Beyond irb</h2>
|
|
293
|
+
<p>
|
|
294
|
+
There are number of things that opal-irb does that irb does not:
|
|
295
|
+
</p>
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
</section>
|
|
299
|
+
<section id="slide-sec-6-1">
|
|
300
|
+
<h3 id="sec-6-1">"Live gist", create a link w/code</h3>
|
|
301
|
+
<ul>
|
|
302
|
+
<li class="fragment roll-in">Create a link with <code>ctl-l</code> (<code>l</code> for <code>link</code>),</li>
|
|
303
|
+
<li class="fragment roll-in">Link will be displayed above the line in question.</li>
|
|
304
|
+
<li class="fragment roll-in">Scroll through history, hit <code>ctl-l</code> to give history for that line</li>
|
|
305
|
+
|
|
306
|
+
</ul>
|
|
307
|
+
|
|
308
|
+
</section>
|
|
309
|
+
<section id="slide-sec-6-1-1">
|
|
310
|
+
<h4 id="sec-6-1-1">Live gist</h4>
|
|
311
|
+
<ul>
|
|
312
|
+
<li class="fragment roll-in">Like a gist, it's shareable bit of code.</li>
|
|
313
|
+
<li class="fragment roll-in">Unlike a gist, it's "live code"</li>
|
|
314
|
+
<li class="fragment roll-in">Live gist can be shared in any real app that has opal-irb embedded.</li>
|
|
315
|
+
<li class="fragment roll-in">Already used this in a production codebase to duplicate a bug condition for a coworker to debug.</li>
|
|
316
|
+
<li class="fragment roll-in">All embedded opal-irb's on this prensentation are all done via "live gist."</li>
|
|
317
|
+
|
|
318
|
+
</ul>
|
|
319
|
+
<ul>
|
|
320
|
+
<li class="fragment roll-in">For example, the red text printing example eariler</li>
|
|
321
|
+
|
|
322
|
+
</ul>
|
|
323
|
+
|
|
324
|
+
</section>
|
|
325
|
+
<section id="slide-sec-6-2">
|
|
326
|
+
<h3 id="sec-6-2">Enhanced History</h3>
|
|
327
|
+
<div class="outline-text-3" id="text-6-2">
|
|
328
|
+
</div></section>
|
|
329
|
+
<section id="slide-sec-6-2-1">
|
|
330
|
+
<h4 id="sec-6-2-1">History Command (like shells have, bash, etc.)</h4>
|
|
331
|
+
<ul>
|
|
332
|
+
<li class="fragment roll-in">You can type <code>history</code> at the prompt to get a listing of your history.</li>
|
|
333
|
+
<li class="fragment roll-in">Shows listing of the code you've typed in including line numbers.</li>
|
|
334
|
+
|
|
335
|
+
</ul>
|
|
336
|
+
|
|
337
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
338
|
+
opal> history
|
|
339
|
+
1: class Foo
|
|
340
|
+
def bar
|
|
341
|
+
:bar
|
|
342
|
+
end
|
|
343
|
+
end
|
|
344
|
+
2: f = Foo.new
|
|
345
|
+
3: f.bar
|
|
346
|
+
4: history
|
|
347
|
+
=> nil
|
|
348
|
+
opal>
|
|
349
|
+
</pre>
|
|
350
|
+
|
|
351
|
+
</section>
|
|
352
|
+
<section id="slide-sec-6-2-2">
|
|
353
|
+
<h4 id="sec-6-2-2">Link for History</h4>
|
|
354
|
+
<ul>
|
|
355
|
+
<li class="fragment roll-in">Alternate to navigating through history and typing <code>ctrl-l</code></li>
|
|
356
|
+
<li class="fragment roll-in">Use <code>irb_link_for</code> command with the history number</li>
|
|
357
|
+
<li class="fragment roll-in">Different from <code>jsbin</code>, <code>jsfiddle</code>, etc.</li>
|
|
358
|
+
|
|
359
|
+
</ul>
|
|
360
|
+
<ul>
|
|
361
|
+
<li class="fragment roll-in">Experiment and have several "live gists"</li>
|
|
362
|
+
<li class="fragment roll-in">Matches repl-based experimentation.</li>
|
|
363
|
+
|
|
364
|
+
</ul>
|
|
365
|
+
|
|
366
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">
|
|
367
|
+
irb_link_for <history_num>
|
|
368
|
+
</pre>
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
</section>
|
|
372
|
+
<section id="slide-sec-6-3">
|
|
373
|
+
<h3 id="sec-6-3">Multiline edit</h3>
|
|
374
|
+
<ul>
|
|
375
|
+
<li class="fragment roll-in">irb's multi-line edit can be cumbersome if you make a mistake</li>
|
|
376
|
+
<li class="fragment roll-in">I've made many</li>
|
|
377
|
+
<li class="fragment roll-in">Need to <code>ctrl-c</code> and start over</li>
|
|
378
|
+
<li class="fragment roll-in">opal-irb has multi-line editor support.</li>
|
|
379
|
+
<li class="fragment roll-in">Invoke with <code>ctrl-m</code> (m for the multi-line editor)</li>
|
|
380
|
+
|
|
381
|
+
</ul>
|
|
382
|
+
<ul>
|
|
383
|
+
<li class="fragment roll-in">Pops up editor window will pop up with the code on the prompt.</li>
|
|
384
|
+
<li class="fragment roll-in">Has syntax highlighting</li>
|
|
385
|
+
<li class="fragment roll-in">Auto indenting</li>
|
|
386
|
+
<li class="fragment roll-in">WIP autocomplete functionality</li>
|
|
387
|
+
|
|
388
|
+
</ul>
|
|
389
|
+
|
|
390
|
+
</section>
|
|
391
|
+
<section id="slide-sec-6-3-1">
|
|
392
|
+
<h4 id="sec-6-3-1">More tips</h4>
|
|
393
|
+
<ul>
|
|
394
|
+
<li class="fragment roll-in">Editor can be used with all code in the history</li>
|
|
395
|
+
<li class="fragment roll-in">Navigate to the desired code in your history and hit <code>ctl-m</code>.</li>
|
|
396
|
+
<li class="fragment roll-in">Run the code by hitting the run it button, or the <code>ctrl-Enter</code> short cut.</li>
|
|
397
|
+
<li class="fragment roll-in">Close the window with either the close icon, or hit escape.</li>
|
|
398
|
+
|
|
399
|
+
</ul>
|
|
400
|
+
|
|
401
|
+
</section>
|
|
402
|
+
<section id="slide-sec-6-3-2">
|
|
403
|
+
<h4 id="sec-6-3-2">Live demo of Multiline edit</h4>
|
|
404
|
+
<iframe width="100%" height="500" src="http://fkchang.github.io/opal-irb/index-jq.html" frameborder="0" allowfullscreen></iframe>
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
</section>
|
|
408
|
+
<section id="slide-sec-6-4">
|
|
409
|
+
<h3 id="sec-6-4">Requiring code at run time</h3>
|
|
410
|
+
<ul>
|
|
411
|
+
<li class="fragment roll-in"><b>opal-irb</b> intended to be able to explore things at run-time</li>
|
|
412
|
+
<li class="fragment roll-in">2 commands to support this</li>
|
|
413
|
+
|
|
414
|
+
</ul>
|
|
415
|
+
|
|
416
|
+
|
|
417
|
+
</section>
|
|
418
|
+
<section id="slide-sec-6-4-1">
|
|
419
|
+
<h4 id="sec-6-4-1">require_remote</h4>
|
|
420
|
+
<ul>
|
|
421
|
+
<li class="fragment roll-in">Part of <b>opal-parser</b></li>
|
|
422
|
+
<li class="fragment roll-in"><code>require_remote</code> allows you require a remote ruby file.</li>
|
|
423
|
+
|
|
424
|
+
</ul>
|
|
425
|
+
|
|
426
|
+
<div class="org-src-container">
|
|
427
|
+
|
|
428
|
+
<pre class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)">require_remote <url_to_ruby_file><span style="color: #CC9393;">"</span>
|
|
429
|
+
</pre>
|
|
430
|
+
</div>
|
|
431
|
+
|
|
432
|
+
<span class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)"><p>
|
|
433
|
+
As an example, I'll require the raw form of this gist, which prints
|
|
434
|
+
out "require_remote is cool" 10 times.
|
|
435
|
+
</p></span>
|
|
436
|
+
|
|
437
|
+
<script src="https://gist.github.com/fkchang/c52173c276976a9ccede.js"></script>
|
|
438
|
+
|
|
439
|
+
</section>
|
|
440
|
+
<section id="slide-sec-6-4-2">
|
|
441
|
+
<h4 id="sec-6-4-2">require_remote In browser</h4>
|
|
442
|
+
<iframe width="100%" height="500" src="http://git.io/vOmoR" frameborder="0" allowfullscreen></iframe>
|
|
443
|
+
|
|
444
|
+
</section>
|
|
445
|
+
<section id="slide-sec-6-4-3">
|
|
446
|
+
<h4 id="sec-6-4-3">require_js (asynchronous require)</h4>
|
|
447
|
+
<ul>
|
|
448
|
+
<li class="fragment roll-in">require_js requires javascript with a URL.</li>
|
|
449
|
+
<li class="fragment roll-in">Asynchronous</li>
|
|
450
|
+
|
|
451
|
+
</ul>
|
|
452
|
+
<ul>
|
|
453
|
+
<li class="fragment roll-in">Ok when typed in by hand, is usually fine, the file</li>
|
|
454
|
+
<li class="fragment roll-in">If not hand typed, say via live-gist, you'll need to put some sort of delay.</li>
|
|
455
|
+
|
|
456
|
+
</ul>
|
|
457
|
+
|
|
458
|
+
</section>
|
|
459
|
+
<section id="slide-sec-6-4-4">
|
|
460
|
+
<h4 id="sec-6-4-4">A Raphael.js based example.</h4>
|
|
461
|
+
<ul>
|
|
462
|
+
<li class="fragment roll-in">does a <code>require_js</code> of the raphael.js lib</li>
|
|
463
|
+
<li class="fragment roll-in">Adds a reanimate button (via Opal-browser's DOM DSL)</li>
|
|
464
|
+
<li class="fragment roll-in">delays via a <code>Timeout</code> and creates an animation and bind reanimation
|
|
465
|
+
code to the reanimate button</li>
|
|
466
|
+
|
|
467
|
+
</ul>
|
|
468
|
+
|
|
469
|
+
</section>
|
|
470
|
+
<section id="slide-sec-6-4-5">
|
|
471
|
+
<h4 id="sec-6-4-5">require_js Raphael.js example</h4>
|
|
472
|
+
<iframe width="100%" height="500" src="http://git.io/vOm1c" frameborder="0" allowfullscreen></iframe>
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
</section>
|
|
476
|
+
<section id="slide-sec-6-4-6">
|
|
477
|
+
<h4 id="sec-6-4-6">require_js_sync (synchronous require)</h4>
|
|
478
|
+
<ul>
|
|
479
|
+
<li class="fragment roll-in">Synchronous calls are atypical in javascript</li>
|
|
480
|
+
<li class="fragment roll-in">Chrome says this is deprecated</li>
|
|
481
|
+
<li class="fragment roll-in">Still might be useful</li>
|
|
482
|
+
|
|
483
|
+
</ul>
|
|
484
|
+
|
|
485
|
+
<span class="fragment (roll-in roll-in roll-in roll-in roll-in roll-in)"><p>
|
|
486
|
+
Same raphael example, but without the delay
|
|
487
|
+
</p></span>
|
|
488
|
+
|
|
489
|
+
</section>
|
|
490
|
+
<section id="slide-sec-6-4-7">
|
|
491
|
+
<h4 id="sec-6-4-7">require_js_sync Raphael.js</h4>
|
|
492
|
+
<iframe width="100%" height="500" src="http://git.io/vOmDg" frameborder="0" allowfullscreen></iframe>
|
|
493
|
+
|
|
494
|
+
</section>
|
|
495
|
+
<section id="slide-sec-6-5">
|
|
496
|
+
<h3 id="sec-6-5">Say, say, say, what you want…</h3>
|
|
497
|
+
<ul>
|
|
498
|
+
<li class="fragment roll-in">I use the <code>say</code> command in OSX a lot</li>
|
|
499
|
+
<li class="fragment roll-in">Lets me know when a long running process is done</li>
|
|
500
|
+
<li class="fragment roll-in">Implemented for opal-irb, may make a standalone gem</li>
|
|
501
|
+
|
|
502
|
+
</ul>
|
|
503
|
+
|
|
504
|
+
</section>
|
|
505
|
+
<section id="slide-sec-6-5-1">
|
|
506
|
+
<h4 id="sec-6-5-1">say example in the browser</h4>
|
|
507
|
+
<iframe width="100%" height="500" src="http://git.io/vYveZ" frameborder="0" allowfullscreen></iframe>
|
|
508
|
+
|
|
509
|
+
|
|
510
|
+
</section>
|
|
511
|
+
</section>
|
|
512
|
+
<section>
|
|
513
|
+
<section id="slide-sec-7">
|
|
514
|
+
<h2 id="sec-7">Examples</h2>
|
|
515
|
+
<ul>
|
|
516
|
+
<li class="fragment roll-in">There are several example opal-irb pages referenced from the README on <a href="https://github.com/fkchang/opal-irb">https://github.com/fkchang/opal-irb</a>. They are:</li>
|
|
517
|
+
|
|
518
|
+
</ul>
|
|
519
|
+
|
|
520
|
+
</section>
|
|
521
|
+
<section id="slide-sec-7-1">
|
|
522
|
+
<h3 id="sec-7-1">Homebrew console example</h3>
|
|
523
|
+
<ul target=""_blank"">
|
|
524
|
+
<li class="fragment roll-in">My 1st attempt, port of a <a href="https://github.com/larryng/coffeescript-repl">coffescript repl</a> with hand written terminal code</li>
|
|
525
|
+
<li class="fragment roll-in">not as full features as the jq-console example</li>
|
|
526
|
+
|
|
527
|
+
</ul>
|
|
528
|
+
|
|
529
|
+
</section>
|
|
530
|
+
<section id="slide-sec-7-2">
|
|
531
|
+
<h3 id="sec-7-2">Homebrew console live</h3>
|
|
532
|
+
<p>
|
|
533
|
+
<a href="http://fkchang.github.io/opal-irb/index-homebrew.html" target=""_blank"">http://fkchang.github.io/opal-irb/index-homebrew.html</a>
|
|
534
|
+
</p>
|
|
535
|
+
|
|
536
|
+
<iframe width="100%" height="500" src="http://fkchang.github.io/opal-irb/index-homebrew.html" frameborder="0" allowfullscreen></iframe>
|
|
537
|
+
|
|
538
|
+
</section>
|
|
539
|
+
<section id="slide-sec-7-3">
|
|
540
|
+
<h3 id="sec-7-3">jq-console Example</h3>
|
|
541
|
+
<ul>
|
|
542
|
+
<li class="fragment roll-in">This uses (a fork of) <code>jq-console</code>, for improved console support.</li>
|
|
543
|
+
<li class="fragment roll-in">Most development has been on a <code>jq-console</code> based <b>opal-irb</b></li>
|
|
544
|
+
<li class="fragment roll-in">I might revisit a <code>jq-console</code> port to remove the <b>jquery</b> dependency in <b>opal-irb</b></li>
|
|
545
|
+
|
|
546
|
+
</ul>
|
|
547
|
+
|
|
548
|
+
</section>
|
|
549
|
+
<section id="slide-sec-7-4">
|
|
550
|
+
<h3 id="sec-7-4">jq-console Live</h3>
|
|
551
|
+
<p>
|
|
552
|
+
<a href="http://fkchang.github.io/opal-irb/index-jq.html" target=""_blank"">http://fkchang.github.io/opal-irb/index-jq.html</a>
|
|
553
|
+
</p>
|
|
554
|
+
<iframe width="100%" height="500" src="http://fkchang.github.io/opal-irb/index-jq.html" frameborder="0" allowfullscreen></iframe>
|
|
555
|
+
|
|
556
|
+
|
|
557
|
+
</section>
|
|
558
|
+
<section id="slide-sec-7-5">
|
|
559
|
+
<h3 id="sec-7-5">Embedded console example</h3>
|
|
560
|
+
<ul>
|
|
561
|
+
<li class="fragment roll-in">How opal-irb might be embedded in an app</li>
|
|
562
|
+
<li class="fragment roll-in">Has some nominal DOM elements for maniuplation</li>
|
|
563
|
+
<li class="fragment roll-in">Button to show opal-irb</li>
|
|
564
|
+
<li class="fragment roll-in"><b>Opal-irb</b> supports 2 ways to display a hidden opal-irb:</li>
|
|
565
|
+
|
|
566
|
+
</ul>
|
|
567
|
+
<ul>
|
|
568
|
+
<li class="fragment roll-in">hot key</li>
|
|
569
|
+
<li class="fragment roll-in">click event on a DOM element</li>
|
|
570
|
+
|
|
571
|
+
</ul>
|
|
572
|
+
<ul target=""_blank"">
|
|
573
|
+
<li class="fragment roll-in">Both are documented in the <a href="https://github.com/fkchang/opal-irb/blob/master/README.md">README</a></li>
|
|
574
|
+
|
|
575
|
+
</ul>
|
|
576
|
+
|
|
577
|
+
</section>
|
|
578
|
+
<section id="slide-sec-7-6">
|
|
579
|
+
<h3 id="sec-7-6">Embedded Console live</h3>
|
|
580
|
+
<p>
|
|
581
|
+
embedded iframe does not render right in safari, use chrome
|
|
582
|
+
</p>
|
|
583
|
+
<p>
|
|
584
|
+
<a href="http://fkchang.github.io/opal-irb/index-embeddable.html" target=""_blank"">http://fkchang.github.io/opal-irb/index-embeddable.html</a>
|
|
585
|
+
</p>
|
|
586
|
+
<iframe width="100%" height="500" onload='setTimeout(function() {this.height = 550;}, 100);' src="http://fkchang.github.io/opal-irb/index-embeddable.html" frameborder="0" allowfullscreen></iframe>
|
|
587
|
+
|
|
588
|
+
|
|
589
|
+
</section>
|
|
590
|
+
<section id="slide-sec-7-7">
|
|
591
|
+
<h3 id="sec-7-7">Embedded in the opal-playground</h3>
|
|
592
|
+
<ul>
|
|
593
|
+
<li class="fragment roll-in"><b>Opal-irb</b> has been embedded into my fork of the <b>opal-playground</b>.</li>
|
|
594
|
+
<li class="fragment roll-in"><b>Opal-irb</b> is available in the RESULTS section by hitting the blue "Show Irb" button.</li>
|
|
595
|
+
<li class="fragment roll-in">Sometimes repl is what you need</li>
|
|
596
|
+
|
|
597
|
+
</ul>
|
|
598
|
+
</section>
|
|
599
|
+
<section id="slide-sec-7-8">
|
|
600
|
+
<h3 id="sec-7-8">Opal-Playground live</h3>
|
|
601
|
+
<p>
|
|
602
|
+
<a href="http://fkchang.github.io/opal-playground/" target=""_blank"">http://fkchang.github.io/opal-playground/</a>
|
|
603
|
+
</p>
|
|
604
|
+
<iframe width="100%" height="500" src="http://fkchang.github.io/opal-playground/" frameborder="0" allowfullscreen></iframe>
|
|
605
|
+
|
|
606
|
+
</section>
|
|
607
|
+
<section id="slide-sec-7-9">
|
|
608
|
+
<h3 id="sec-7-9">Videos and more</h3>
|
|
609
|
+
<ul target=""_blank"">
|
|
610
|
+
<li class="fragment roll-in">Many features demonstrated in part of <a href="https://www.youtube.com/watch?feature=player_detailpage&v=GH9FAfKG-qY#t=1838">RubyConf 2013 talk "Opal - A New Hope"</a>;</li>
|
|
611
|
+
<li class="fragment roll-in"><a href="//www.youtube.com/watch?v%3DmQTulgBm5Nk">Video</a> for the in progress auto complete in the console.</li>
|
|
612
|
+
|
|
613
|
+
</ul>
|
|
614
|
+
<ul target=""_blank"">
|
|
615
|
+
<li class="fragment roll-in">Video <a href="https://www.youtube.com/watch?feature=player_detailpage&v=GH9FAfKG-qY#t=2099">preview</a> of a prototype of opal-inspector 2 years back</li>
|
|
616
|
+
|
|
617
|
+
</ul>
|
|
618
|
+
<ul>
|
|
619
|
+
<li class="fragment roll-in">Showing features previously only supported in Smalltalk and Lisp machines.</li>
|
|
620
|
+
|
|
621
|
+
</ul>
|
|
622
|
+
<ul>
|
|
623
|
+
<li class="fragment roll-in">Intend on beefing it up</li>
|
|
624
|
+
|
|
625
|
+
</ul>
|
|
626
|
+
|
|
627
|
+
</section>
|
|
628
|
+
</section>
|
|
629
|
+
<section>
|
|
630
|
+
<section id="slide-sec-8">
|
|
631
|
+
<h2 id="sec-8">Done for now</h2>
|
|
632
|
+
<p>
|
|
633
|
+
Thanks!
|
|
634
|
+
</p>
|
|
635
|
+
</section>
|
|
636
|
+
</section>
|
|
637
|
+
</div>
|
|
638
|
+
</div>
|
|
639
|
+
|
|
640
|
+
<script src="http://cdn.jsdelivr.net/reveal.js/3.0.0/lib/js/head.min.js"></script>
|
|
641
|
+
<script src="http://cdn.jsdelivr.net/reveal.js/3.0.0/js/reveal.js"></script>
|
|
642
|
+
|
|
643
|
+
<script>
|
|
644
|
+
// Full list of configuration options available here:
|
|
645
|
+
// https://github.com/hakimel/reveal.js#configuration
|
|
646
|
+
Reveal.initialize({
|
|
647
|
+
|
|
648
|
+
controls: true,
|
|
649
|
+
progress: true,
|
|
650
|
+
history: false,
|
|
651
|
+
center: true,
|
|
652
|
+
slideNumber: true,
|
|
653
|
+
rollingLinks: false,
|
|
654
|
+
keyboard: true,
|
|
655
|
+
overview: true,
|
|
656
|
+
|
|
657
|
+
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
|
|
658
|
+
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
|
|
659
|
+
transitionSpeed: 'default',
|
|
660
|
+
multiplex: {
|
|
661
|
+
secret: '', // null if client
|
|
662
|
+
id: '', // id, obtained from socket.io server
|
|
663
|
+
url: '' // Location of socket.io server
|
|
664
|
+
},
|
|
665
|
+
|
|
666
|
+
// Optional libraries used to extend on reveal.js
|
|
667
|
+
dependencies: [
|
|
668
|
+
{ src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|
669
|
+
{ src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
670
|
+
{ src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
671
|
+
{ src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
|
672
|
+
{ src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
|
|
673
|
+
{ src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
|
|
674
|
+
]
|
|
675
|
+
});
|
|
676
|
+
</script>
|
|
677
|
+
</body>
|
|
678
|
+
</html>
|