root/docs/cho45/20080515-yapc.asia-2008-tokyo/index.html

Revision 11646, 13.1 kB (checked in by cho45, 8 months ago)

propset

  • Property svn:mime-type set to text/html
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
6<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
7<meta name="author" content="cho45" />
8<link rev="made" href="mailto:cho45@lowreal.net" />
9<title>YAPC::Asia Text::MicroMason::SafeServerPages</title>
10<script type="text/javascript" src="s6.js"></script>
11<script type="text/javascript">
12// <![CDATA[
13// from http://amachang.art-code.org/ejohn/
14
15var bodyStyle = {
16        width           : '100%',
17        height          : '100%',
18        padding         : '0',
19        margin          : '0',
20        overflow        : 'hidden',
21        backgroundColor : '#000'
22};
23
24s6.css('html', bodyStyle);
25s6.css('body', bodyStyle);
26
27var pr;
28s6.attach(s6, 'ready', function ready() {
29        var html   = document.documentElement;
30        var height = html.offsetHeight;
31        var width  = html.offsetWidth;
32        var top    = 0;
33        var left   = 0;
34        var ratio  = 9/16;
35
36        if (height / width < ratio) {
37                var originalWidth = width;
38                width = height / ratio;
39                left = (originalWidth - width) / 2 + 'px';
40        }
41        else {
42                var originalHeight = height;
43                height = width * ratio;
44                top = (originalHeight - height) / 2 + 'px';
45        }
46
47        var result;
48        if (result = document.cookie.match(/page=(\d+)/)) {
49                var startIndex = +result[1];
50        }
51
52        pr = new s6.Presentation({
53                element    : document.body,
54                width      : width,
55                height     : height,
56                ratio      : ratio,
57                startIndex : startIndex
58        });
59        pr.style.left = left;
60        pr.style.top = top;
61        pr.start();
62
63        var indexNoOutline = false;
64
65        pr.funcPages.index.attachPage('click', function(i, element, wrapper) {
66                indexNoOutline = true;
67                setTimeout(function() {
68                        indexNoOutline =false
69                }, 1000);
70                wrapper.style.background = '';
71                pr.go(i);
72        });
73
74        pr.funcPages.index.attachPage('mouseover', function(i, element, wrapper) {
75                if (indexNoOutline) return;
76                wrapper.className += ' selected';
77        });
78       
79        pr.funcPages.index.attachPage('mouseout', function(i, element, wrapper) {
80                wrapper.className = 'wrapper';
81        });
82
83        try {
84                var isIframe = !(window.parent == window);
85        } catch(e) {
86                isIframe = true;
87        }
88
89        s6.attach(document,   'keypress Right', 'step', 0, pr);
90        s6.attach(document,   'keypress Left',  'prev', 0, pr);
91        s6.attach(document,   'keypress Up',    function() { pr.go('index') });
92        s6.attach(document,   'keypress Down',  'back', 0, pr);
93
94        s6.attach(document,   'keypress j',  'step', 0, pr);
95        s6.attach(document,   'keypress k',  'prev', 0, pr);
96        s6.attach(document,   'keypress h',  function() { pr.go('index') });
97        s6.attach(document,   'keypress l',  'back', 0, pr);
98
99
100        s6.css('.s6.dark .page', {
101                background: '#333 url(img/background.png) repeat-x'
102        })
103});
104
105// Test
106setInterval(function() {
107        document.cookie = 'page=' + pr.index;
108}, 1000);
109
110// ]]>
111</script>
112
113<style type="text/css">
114        span.mini {
115                font-size: 70% !important;
116                color: #999;;
117        }
118
119        em {
120                color: #dd0000;
121        }
122
123        pre em {
124                color: #be5b00;
125        }
126</style>
127
128</head>
129
130<body>
131
132 <!-- ===================================================== -->
133
134<div class="page">
135        <h3>操作方法</h3>
136        <ul>
137                <li>j キー: 次のページへ</li>
138                <li>k キー: 前のページへ</li>
139                <li>h キー: 目次ページへ</li>
140                <li>l キー: 目次ページから戻る</li>
141                <li>目次ページでは ← → キーで一覧を移動し、クリックで選択します</li>
142        </ul>
143        <script type="text/javascript"> s6.page({ styles: { ul: { fontSize: '0.75em', marginTop: '2%' } } }) </script>
144</div>
145
146<div clase="page">
147        <h2>Text::MicroMason<span class="mini">::SafeServerPages</span></h2>
148        <p>cho45 (SATOH) / <a href="http://www.lowreal.net/">www.lowreal.net</a></p>
149        <p>(I start using Catalyst recently)</p>
150        <script type="text/javascript">
151                s6.page({ separator: 'fade', styles: { 'ul/li': { lineHeight: 1.7 } } })
152        </script>
153</div>
154
155<div clase="page">
156        <h2>Agenda</h2>
157        <ul>
158                <li>use Text::MicroMason;</li>
159                <li>new(-SafeServerPages)</li>
160                <li>About template engine</li>
161                <li>(me-created tiny template engines)</li>
162        </ul>
163        <script type="text/javascript">
164                s6.page({ separator: 'fade', styles: {} })
165        </script>
166</div>
167
168<div clase="page">
169        <h2>I love Text::MicroMason. (A template engine)</h2>
170        <pre>
171my $tm = Text::MicroMason->new(qw/
172        -AllowGlobals -SafeServerPages
173/);
174$tm->set_globals('$items' => [qw/1 2 3 4 5/]);
175$tm->execute(text => &lt;&lt;'EOS');
176        &lt;ul>
177        <em>&lt;% for my $i ($items) { %></em>
178                &lt;li><em>&lt;%= $i %></em>&lt;/li>
179        <em>&lt;% } %></em>
180        &lt;/ul>
181EOS
182</pre>
183        <script type="text/javascript">
184                s6.page({ separator: 'fade', styles: {
185                'h2' : { fontSize: "50%", margin: "0.5em" }
186                } })
187        </script>
188</div>
189
190<div clase="page">
191        <h2>Text::MicroMason</h2>
192        <ul>
193                <li>Same syntax with host language</li>
194                <li>Fast</li>
195        </ul>
196        <script type="text/javascript">
197                s6.page({ separator: 'fade', styles: {} })
198        </script>
199</div>
200
201<div clase="page">
202        <h2>Same syntax with host lang.</h2>
203        <p><span>I don't want to learn <em>template language</em>.</span><span>For example:</span></p>
204        <ul>
205                <li>HTML::Template</li>
206                <li>Template::Toolkit</li>
207                <li>PHP</li>
208        </ul>
209        <script type="text/javascript">
210                s6.page({ separator: 'fade',
211                        styles: {
212                                "p/span[1]" : {
213                                        display: "none"
214                                },
215                                "ul/li" : {
216                                        display: "none"
217                                }
218                        },
219                        actions : [
220                                [
221                                        ['p/span[0]', 'fade out', 0],
222                                        ['p/span[1]', 'fade in', 0.3]
223                                ],
224                                [
225                                        ['ul/li[0]', 'fade in', 0.3]
226                                ],
227                                [
228                                        ['ul/li[1]', 'fade in', 0.3]
229                                ],
230                                [
231                                        ['ul/li[2]', 'fade in', 0.3]
232                                ]
233                        ]
234                })
235        </script>
236</div>
237
238
239<div clase="page">
240        <p>Fast. (<a href="bench.pl">bench.pl</a>)</p>
241        <div class='photo'>
242                <img src="img/bench.png" width="1024" height="683" alt="benchmark" />
243        </div>
244        <div class='desc'>
245                <div>
246                        <p>Result with no cache.</p>
247
248                        <ul>
249                                <li>Very simple code</li>
250                                <li>Text::MicroMason is pure Perl :)</li>
251                                <li>Template::Toolkit is XS</li>
252                        </ul>
253                </div>
254        </div>
255        <script type="text/javascript">
256                s6.page({ separator: 'fade',
257                        styles: {
258                                'p': {
259                                        position        : 'absolute',
260                                        backgroundColor : '#000',
261                                        margin          : '0',
262                                        padding         : '25% 0',
263                                        width           : '100%',
264                                        height          : '100%',
265                                        textAlign       : 'center'
266                                },
267                                'div[0]': {
268                                        display         : 'none',
269                                        position        : 'absolute',
270                                        backgroundColor : '#000',
271                                        margin          : 0,
272                                        padding         : 0,
273                                        width           : '100%',
274                                        height          : '100%',
275                                        textAlign       : 'center'
276                                },
277                                'div[1]': {
278                                        display         : 'none',
279                                        margin          : 0,
280                                        padding         : '0.5em',
281                                        width           : '100%',
282                                        height          : '100%'
283                                },
284                                'div[1]/div': {
285                                        width    : '1024px',
286                                        fontSize : '70%',
287                                        margin   : '0 auto',
288                                        padding  : 0
289                                },
290                                'div[1]/div/ul' : {
291                                        fontSize : '90%',
292                                        padding: '1em'
293                                }
294                        },
295                        actions : [
296                                [
297                                        ['div[0]', 'fade in', 0.3]
298                                ],
299                                [
300                                        ['p', 'fade out', 0.3]
301                                ],
302                                [
303                                        ['div[0]/img', 'fade', 0.18, 1, 0.075],
304                                        ['div[1]', 'fade', 0.18, 0, 1]
305                                ]
306                        ]
307                })
308        </script>
309</div>
310
311<div clase="page">
312        <h2>SafeServerPages</h2>
313        <ul>
314                <li>It's not "sanitizing". (サニタイズゆーな)</li>
315                <li>Syntax extension like ASP</li>
316        </ul>
317        <script type="text/javascript">
318                s6.page({ separator: 'fade', styles: {} })
319        </script>
320</div>
321
322<div clase="page">
323        <p>It's not "sanitizing".<br />(サニタイズゆーな)</p>
324        <div class='photo'>
325                <img src="img/sanitize.gif" alt="サニタイズゆーな" />
326        </div>
327        <div class='desc'>
328                <div>
329                        <p>It's not "sanitizing".</p>
330
331                        <ul>
332                                <li>Foolish Safety (because I'm fool)</li>
333                                <li><code>&lt;%= "&lt;exp&gt;" %></code> is always escaped.</li>
334                                <li><code>&lt;%raw= "&lt;em>exp&lt;/em>" %></code> is for raw output.</li>
335                                <li><code>[% foo <em>| html </em>%]</code><br />forget to write the filter -> XSS</li>
336                        </ul>
337                </div>
338        </div>
339        <script type="text/javascript">
340                s6.page({ separator: 'fade',
341                        styles: {
342                                'p': {
343                                        position        : 'absolute',
344                                        backgroundColor : '#000',
345                                        margin          : '0',
346                                        padding         : '25% 0',
347                                        width           : '100%',
348                                        height          : '100%',
349                                        textAlign       : 'center'
350                                },
351                                'div[0]': {
352                                        display         : 'none',
353                                        position        : 'absolute',
354                                        backgroundColor : '#000',
355                                        margin          : 0,
356                                        padding         : 0,
357                                        width           : '100%',
358                                        height          : '100%',
359                                        textAlign       : 'center'
360                                },
361                                'div[1]': {
362                                        display         : 'none',
363                                        margin          : 0,
364                                        padding         : '0.5em',
365                                        width           : '100%',
366                                        height          : '100%'
367                                },
368                                'div[1]/div': {
369                                        width    : '1024px',
370                                        fontSize : '70%',
371                                        margin   : '0 auto',
372                                        padding  : 0
373                                },
374                                'div[1]/div/ul' : {
375                                        fontSize : '90%',
376                                        padding: '1em'
377                                }
378                        },
379                        actions : [
380                                [
381                                        ['div[0]', 'fade in', 0.3]
382                                ],
383                                [
384                                        ['p', 'fade out', 0.3]
385                                ],
386                                [
387                                        ['div[0]/img', 'fade', 0.18, 1, 0.075],
388                                        ['div[1]', 'fade', 0.18, 0, 1]
389                                ]
390                        ]
391                })
392        </script>
393</div>
394
395<div clase="page">
396        <p>I love embed program template engines...</p>
397        <script type="text/javascript">
398                s6.page({ separator: 'fade',
399                        styles: {
400                                'p': {
401                                        position        : 'absolute',
402                                        backgroundColor : '#000',
403                                        margin          : '0',
404                                        padding         : '25% 0',
405                                        width           : '100%',
406                                        height          : '100%',
407                                        textAlign       : 'center'
408                                }
409                        },
410                        actions : [
411                        ]
412                })
413        </script>
414</div>
415
416<div clase="page">
417        <h2>Because...</h2>
418        <ul>
419                <li>Easy to write the engine</li>
420                <li>Easy to use</li>
421                <li>Fast enough</li>
422        </ul>
423        <script type="text/javascript">
424                s6.page({ separator: 'fade',
425                        styles: {
426                                'p': {
427                                        position        : 'absolute',
428                                        backgroundColor : '#000',
429                                        margin          : '0',
430                                        padding         : '25% 0',
431                                        width           : '100%',
432                                        height          : '100%',
433                                        textAlign       : 'center'
434                                }
435                        },
436                        actions : [
437                        ]
438                })
439        </script>
440</div>
441
442<div clase="page">
443        <p>me-created tiny template engines</p>
444        <ul>
445                <li><a href="http://coderepos.org/share/browser/lang/io/misc/eio.io">eio.io</a> 50 lines - Io language</li>
446                <li><a href="http://coderepos.org/share/browser/lang/javascript/blosxom.rhino/ejs.js">ejs.js</a> 60 lines. - JavaScript</li>
447                <li><a href="http://coderepos.org/share/browser/lang/lua/bluasxom/bluasxom.lua">elua.lua</a> 50 lines. - Lua</li>
448                <li><a href="http://coderepos.org/share/browser/lang/ruby/ekfloras/lib/minierb.rb">minierb.rb</a> 40 lines - Ruby</li>
449        </ul>
450        <script type="text/javascript">
451                s6.page({ separator: 'fade', styles: {} })
452        </script>
453</div>
454
455<div clase="page">
456        <ul>
457                <li>Embed program template engine is easy to learn and to write.</li>
458                <li>No more <em>template language</em>.</li>
459        </ul>
460        <ul>
461                <li>MicroMason is awesome.</li>
462                <li>More foolish safety for me! (SafeServerPages)</li>
463        </ul>
464        <script type="text/javascript">
465                s6.page({ separator: 'fade', styles: {} })
466        </script>
467</div>
468
469<div clase="page">
470        <p style="position: relative;">
471                ヾ(MoM)ノ　　　..._n(TT)
472                <span style="position: absolute; top: -1.5em; left: 2em;">MicroMason</span>
473                <span style="position: absolute; top: -1.5em; right: 0;">Template</span>
474        </p>
475        <script type="text/javascript">
476                s6.page({ separator: 'fade',
477                        styles: {
478                                'p' : { textAlign: 'center', marginTop: '20%' },
479                                'p/span' : {
480                                        display: "none",
481                                        fontSize: "80%",
482                                        background : "#99cc00",
483                                        padding: "0 0.5em"
484                                }
485                        },
486                        actions : [
487                                [
488                                        ['p/span[0]', 'fade in', 0.3]
489                                ],
490                                [
491                                        ['p/span[1]', 'fade in', 0.3]
492                                ]
493                        ]
494                })
495        </script>
496</div>
497
498<div clase="page">
499        <p syle="position: relative;">
500                or
501        </p>
502        <script type="text/javascript">
503                s6.page({ separator: 'fade',
504                        styles: {
505                                'p' : { textAlign: 'center', marginTop: '20%' },
506                                'p/span' : {
507                                        display: "none",
508                                        fontSize: "80%",
509                                        background : "#99cc00",
510                                        padding: "0 0.5em"
511                                }
512                        },
513                        actions : [
514                        ]
515                })
516        </script>
517</div>
518
519<div clase="page">
520        <p syle="position: relative;">
521                ヾ(Tenjin)ノ　　　..._n(TT) _n(MoM)
522        </p>
523        <script type="text/javascript">
524                s6.page({ separator: 'fade',
525                        styles: {
526                                'p' : { textAlign: 'center', marginTop: '20%' },
527                                'p/span' : {
528                                        display: "none",
529                                        fontSize: "80%",
530                                        background : "#99cc00",
531                                        padding: "0 0.5em"
532                                }
533                        },
534                        actions : [
535                                [
536                                        ['p/span[0]', 'fade in', 0.3]
537                                ],
538                                [
539                                        ['p/span[1]', 'fade in', 0.3]
540                                ]
541                        ]
542                })
543        </script>
544</div>
545
546<div clase="page">
547        <div class='photo'>
548                <p>
549                        <img src="img/last.jpg" width="332" height="500" alt="" />
550                </p>
551                <p>That's all! Thank you.</p>
552        </div>
553        <script type="text/javascript">
554                s6.page({ separator: 'fade',
555                        styles: {
556                                'p': {
557                                        position        : 'absolute',
558                                        backgroundColor : '',
559                                        margin          : '0',
560                                        padding         : '25% 0',
561                                        width           : '100%',
562                                        height          : '100%',
563                                        textAlign       : 'center'
564                                },
565                                'div[0]': {
566                                        position        : 'absolute',
567                                        backgroundColor : '#000',
568                                        margin          : 0,
569                                        padding         : 0,
570                                        width           : '100%',
571                                        height          : '100%',
572                                        textAlign       : 'center'
573                                },
574                        },
575                        actions : [
576                        ]
577                })
578        </script>
579</div>
580
581
582</body>
583</html>
Note: See TracBrowser for help on using the browser.