Skip to content

Instantly share code, notes, and snippets.

Created January 17, 2015 16:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/a930a1ad83bb41fb827b to your computer and use it in GitHub Desktop.
Save anonymous/a930a1ad83bb41fb827b to your computer and use it in GitHub Desktop.
$ MOJO_USERAGENT_DEBUG=1 perl -Mojo -E 'g("mojolicio.us")'
-- Blocking request (http://mojolicio.us)
-- Connect (http:mojolicio.us:80)
-- Client >>> Server (http://mojolicio.us)
GET / HTTP/1.1
Accept-Encoding: gzip
Host: mojolicio.us
User-Agent: Mojolicious (Perl)
Content-Length: 0
Connection: keep-alive
-- Client <<< Server (http://mojolicio.us)
HTTP/1.1 200 OK
Server: Mojolicious (Perl)
Content-Type: text/html;charset=UTF-8
Content-Length: 11527
Connection: keep-alive
Date: Sat, 17 Jan 2015 16:35:51 GMT
<!doctype html><html>
<head>
<link rel="search" type="application/opensearchdescription+xml"
href="/opensearch.xml" title="Mojolicious" />
<title>
Mojolicious - Perl real-time web framework
</title>
<script src="/mojo/prettify/run_prettify.js"></script>
<link href="/mojo/prettify/prettify-mojo-light.css" rel="stylesheet" />
<style>/*<![CDATA[*/
a { color: inherit }
a:hover { color: #2a2a2a }
a img { border: 0 }
body {
background: url(/mojo/pinstripe-light.png);
color: #445555;
font: 0.9em 'Helvetica Neue', Helvetica, sans-serif;
font-weight: normal;
line-height: 1.5em;
margin: 0;
}
code {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
font: 0.9em Consolas, Menlo, Monaco, Courier, monospace;
padding: 0.3em;
}
pre {
background: url(/mojo/stripes.png);
border: 1px solid #d1d1d1;
border-radius: 3px;
box-shadow: 0 1px #fff, inset -1px 1px 4px rgba(0, 0, 0, 0.1);
color: #4d4d4c;
font: 0.9em Consolas, Menlo, Monaco, Courier, monospace;
line-height: 1.5em;
padding: 1em;
padding-bottom: 1.5em;
padding-top: 1.5em;
text-align: left;
text-shadow: #eee 0 1px 0;
white-space: pre-wrap;
}
#footer {
padding-top: 1em;
text-align: center;
}
/*]]>*/</style>
<link href="/css/index.css" rel="stylesheet" />
<script>//<![CDATA[
var gaJsHost =
(("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape(
"%3Cscript src='"
+ gaJsHost
+ "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"
));
//]]></script><script>//<![CDATA[
try {
var pageTracker = _gat._getTracker("UA-7866593-1");
pageTracker._trackPageview();
} catch(err) {}
//]]></script>
</head>
<body><a href="http://kraih.spreadshirt.com">
<img style="position: absolute; top: 0; left: 0; border: 0;"
src="/t-shirts.png"
alt="T-Shirts">
</a>
<a href="https://github.com/kraih/mojo">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
alt="Fork me on GitHub">
</a>
<div id="fun">
<a href="https://metacpan.org/release/Mojolicious">
<img src="/unicorn.png" />
</a> <img id="balloon" src="/balloon.png" />
</div>
<script src="/mojo/jquery/jquery.js"></script>
<div id="mojobar">
<style scoped="scoped">
#mojobar {
b
-- Client <<< Server (http://mojolicio.us)
ackground-color: #1a1a1a;
background: -webkit-linear-gradient(top, #2a2a2a 0%, #000 100%);
background: -moz-linear-gradient(top, #2a2a2a 0%, #000 100%);
background: linear-gradient(top, #2a2a2a 0%, #000 100%);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
height: 46px;
overflow: hidden;
position: absolute;
text-align: right;
vertical-align: middle;
width: 100%;
z-index: 1000;
}
#mojobar-logo {
float: left;
margin-left: 5em;
padding-top: 3px;
}
#mojobar-links {
display:table-cell;
float: right;
height: 60px;
margin-right: 5em;
margin-top: 0.8em;
}
#mojobar-links a {
color: #ccc;
font: 1em 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 300;
margin-left: 0.5em;
text-decoration: none;
transition: all 200ms ease-in-out;
}
#mojobar-links a:hover { color: #fff }
#mojobar-links input {
border: 0;
border-radius: 10px;
display: inline;
margin-left: 1em;
padding: 3px;
}
#mojobar-links input:focus { outline: 0 }
#mojobar-links form { display: inline }
.animated { transition: top 0.2s ease-in-out }
</style>
<div id="mojobar-logo">
<a href="http://mojolicio.us">
<img alt="Mojolicious logo" src="/mojo/logo-white.png" />
</a> </div>
<div id="mojobar-links">
<a href="http://mojolicio.us/perldoc">Documentation</a>
<a href="https://github.com/kraih/mojo/wiki">Wiki</a>
<a href="https://github.com/kraih/mojo">GitHub</a>
<a href="https://metacpan.org/release/Mojolicious/">CPAN</a>
<a href="https://groups.google.com/group/mojolicious">MailingList</a>
<a href="http://blog.kraih.com">Blog</a>
<a href="https://twitter.com/kraih">Twitter</a>
<form action="https://www.google.com/cse" target="_blank">
<input name="cx" type="hidden" value="014527573091551588235:pwfplkjpgbi" />
<input name="ie" type="hidden" value="UTF-8" />
<input name="q" placeholder="Search" type="search" />
</form>
</div>
</div>
<script>
var mojobar = $('#mojobar');
var mojobarHeight = mojobar.outerHeight();
function fixOffset() {
var offset = $(window.location.hash).offset();
if (offset) {
$('html, body').animate({scrollTop: offset.top - mojobarHeight}, 1);
}
}
$(window).load(function () {
if (window.location.hash) {
fixOffset();
}
var start = mojobar.offset().top;
var fixed;
var lastScrollTop = start;
$(window).scroll(function () {
var st = $(window).scrollTop();
if (!fixed && st > start) {
fixed = true;
mojobar.css('position', 'fixed').css('top', 0);
} else if (fixed && st <= start) {
fixed = false;
mojobar.removeClass('animated');
mojobar.css('position', 'absolute').css('top', start + 'px');
}
else if (fixed && (Math.abs(lastScrollTop - st) > 100)) {
if (!mojobar.hasClass('animated')) {
mojobar.addClass('animated');
}
if (st > lastScrollTop && st > (mojobarHeight + start + 250)) {
mojobar.css('top', 0 - (mojobarHeight + 5));
} else if (st + $(window).height() < $(document).height()) {
mojobar.css('top', 0);
}
lastScrollTop = st;
}
});
});
$(document).ready(function () {
$('a[href^="#"]').addClass('mojoscroll');
$(".mojoscroll").click(function(e) {
e.preventDefault();
e.stopPropagation();
var hash = "#" + this.href.split("#")[1];
var target = $(hash);
var old = target.attr('id');
target.attr('id', '');
location.hash = hash;
target.attr('id', old);
fixOffset();
});
});
</script>
<div id="wrapperlicious">
<div id="introduction">
<h1>
A next generation web framework for the Perl programming language.
</h1>
<p>
Back in the early days of the web, many people learned Perl because of a
wonderful Perl library called
<a href="https://metacpan.org/module/CGI" target="_blank">CGI</a>. It
was simple enough to get started
-- Client <<< Server (http://mojolicio.us)
without knowing much about the language
and powerful enough to keep you going, learning by doing was much fun.
While most of the techniques used are outdated now, the idea behind it
is not. Mojolicious is a new attempt at implementing this idea using
state of the art technology.
</p>
<h2>Features</h2>
<ul>
<li>
An amazing real-time web framework, allowing you to easily grow single
file prototypes into well-structured web applications.
<blockquote>
<p>
Powerful out of the box with RESTful routes, plugins, commands,
Perl-ish templates, content negotiation, session management,
form validation, testing framework, static file server, first
class Unicode support and much more for you to discover.
</p>
</blockquote>
</li>
<li>
Very clean, portable and object-oriented pure-Perl API with no hidden
magic and no requirements besides Perl 5.20.0 (versions as old as
5.10.1 can be used too, but may require additional CPAN modules to be
installed)
</li>
<li>
Full stack HTTP and WebSocket client/server implementation with IPv6,
TLS, SNI, IDNA, HTTP/SOCKS5 proxy, Comet (long polling), keep-alive,
connection pooling, timeout, cookie, multipart and gzip compression
support.
</li>
<li>
Built-in non-blocking I/O web server, supporting multiple event loops
as well as optional preforking and hot deployment, perfect for
embedding.
</li>
<li>
Automatic CGI and
<a href="http://plackperl.org" target="_blank">PSGI</a> detection.
</li>
<li>JSON and HTML/XML parser with CSS selector support.</li>
<li>
Fresh code based upon years of experience developing
<a href="http://catalystframework.org" target="_blank">Catalyst</a>.
</li>
</ul>
<h2>Installation</h2>
<p>All you need is a one-liner, it takes less than a minute.</p>
<pre>$ curl -L https://cpanmin.us | perl - -M https://cpan.metacpan.org -n Mojolicious</pre>
<p>
We recommend the use of a
<a href="http://perlbrew.pl" target="_blank">Perlbrew</a> environment.
</p>
<h2>Getting Started</h2>
<p>These three lines are a whole web application.</p>
<pre class="prettyprint">use Mojolicious::Lite;
get &#39;/&#39; =&gt; {text =&gt; &#39;I ♥ Mojolicious!&#39;};
app-&gt;start;</pre>
<p>
To run this example with the built-in development web server just put
the code into a file and start it with <code>morbo</code>.
</p>
<pre>$ morbo hello.pl
Server available at http://127.0.0.1:3000.
$ curl http://127.0.0.1:3000/
I ♥ Mojolicious!</pre>
<h2>Duct tape for the HTML5 web</h2>
<p>
Use all the latest Perl and HTML features in beautiful single file
prototypes like this one, and grow them easily into well-structured
applications.
</p>
<pre class="prettyprint">use Mojolicious::Lite;
use 5.20.0;
use experimental &#39;signatures&#39;;
# Render template &quot;index.html.ep&quot; from the DATA section
get &#39;/&#39; =&gt; {template =&gt; &#39;index&#39;};
# WebSocket service used by the template to extract the title from a web site
websocket &#39;/title&#39; =&gt; sub ($c) {
$c-&gt;on(message =&gt; sub ($c, $msg) {
my $title = $c-&gt;ua-&gt;get($msg)-&gt;res-&gt;dom-&gt;at(&#39;title&#39;)-&gt;text;
$c-&gt;send($title);
});
};
app-&gt;start;
__DATA__
@@ index.html.ep
% my $url = url_for &#39;title&#39;;
&lt;script&gt;
var ws = new WebSocket(&#39;&lt;%= $url-&gt;to_abs %&gt;&#39;);
ws.onmessage = function (event) { document.body.innerHTML += event.data };
ws.onopen = function (event) { ws.send(&#39;http://mojolicio.us&#39;) };
&lt;/script&gt;</pre>
<h1>Want to know more?</h1>
<p>
Take a look at our excellent
<a href="http://mojolicio.us/perldoc">documentation</a>!
</p>
</div>
</div>
<div id="footer">
<a href="http://mojolicio.us">
<img alt="Mojolicious logo" src="/mojo/logo-black.png" />
</a></div>
-- Client <<< Server (http://mojolicio.us)
<script>//<![CDATA[
$(window).on("mousemove", function (e) {
var height = $(document).height();
var positionY = -(height - 2 * e.screenY) / height;
var width = $(document).width();
var positionX = -(width - 2 * e.screenX) / width;
$("#balloon").css({
"right": 10 + positionX + "%",
"top" : 220 + (positionY * -25) + "px"}
);
});
$(window).on("mousemove", function (e) {
var width = $(document).width();
var position = -(width - 2 * e.screenX) / width;
$("#fun").css({"backgroundPosition": 0 + (position * 3) + "px 0"});
});
//]]></script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment