Acme-CPANModulesBundle-Import-MojoliciousAdvent-2018
view release on metacpan or search on metacpan
devdata/https_mojolicious.io_blog_2018_12_01_welcome-mojoconf-recap_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@joelaberger" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/01/welcome-mojoconf-recap/" property="og:url">
<meta content="Day 1: Welcome & MojoConf Recap" property="og:title">
<meta content="The 2018 Mojolicious Advent Calendar begins with a recap of MojoConf 2018." property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/01/welcome-mojoconf-recap/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 1: Welcome & MojoConf Recap - mojolicious.io</title>
<meta content="Joel Berger" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_01_welcome-mojoconf-recap_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_02_automatic-reload-for-rapid-development_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/02/automatic-reload-for-rapid-development/" property="og:url">
<meta content="Day 2: Automatic Reload for Rapid Development" property="og:title">
<meta content="Learn how to reload both the server and client on changes during application development." property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/02/automatic-reload-for-rapid-development/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 2: Automatic Reload for Rapid Development - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_02_automatic-reload-for-rapid-development_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_03_higher-order-promises_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@briandfoy_perl" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/03/higher-order-promises/" property="og:url">
<meta content="Day 3: Higher Order Promises" property="og:title">
<meta content="Create new, complex Promises by composing Promises" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/03/higher-order-promises/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 3: Higher Order Promises - mojolicious.io</title>
<meta content="brian d foy" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_03_higher-order-promises_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_04_testing-hooks-and-helpers_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/04/testing-hooks-and-helpers/" property="og:url">
<meta content="Day 4: Testing Hooks and Helpers" property="og:title">
<meta content="How to easily test hooks and helpers using Test::Mojo" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/04/testing-hooks-and-helpers/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 4: Testing Hooks and Helpers - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_04_testing-hooks-and-helpers_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_05_compound-selectors_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@briandfoy_perl" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/05/compound-selectors/" property="og:url">
<meta content="Day 5: Compound Selectors are Easier than Regexes" property="og:title">
<meta content="Extract HTML quickly and easily with Mojo::DOM" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/05/compound-selectors/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 5: Compound Selectors are Easier than Regexes - mojolicious.io</title>
<meta content="brian d foy" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_05_compound-selectors_ view on Meta::CPAN
<h2>Cascading Style Sheets</h2>
<p>You may know about Cascading Style Sheets (CSS) for making your web pages look beautiful (but not mine, really). You can add meta data to tags:</p>
<pre><code><img id="bender" class="robot" src="..." />
<img id="fry" class="human" src="..." />
<img id="leela" class="mutant" src="..." />
</code></pre>
<p>CSS rules can address these items by their ID or class to apply styles to them. This addressing is a "selector" and people with better skills than me use these to make the presentation pretty:</p>
<pre><code>img#fry { border: 1px; }
img.robot { margin: 20px; }
</code></pre>
<p>The HTML can be a bit more complicated. Perhaps those interesting tags are in a list. That wraps another layer of HTML structure around the data:</p>
<pre><code><ul class="employees">
<li><img id="bender" class="robot" src="..." /></li>
devdata/https_mojolicious.io_blog_2018_12_05_compound-selectors_ view on Meta::CPAN
my @scores = Mojo::DOM->new( $html )
->find( 'table.scores > tr > td:last-child' )
->map( 'text' )
->each
;
my $grand = sum( @scores );
say "Grand total: $grand";
</code></pre>
<p><em style="font-size: 10px">
Editor's note: Unfortunately this example breaks our syntax highlighter. This is the site's fault not the author. We're trying to find a better way to render it short of rewriting the rendering engine.
</em></p>
<h2>Conclusion</h2>
<p>Even for an old programmer like me, dealing with HTML through CSS Selectors applied by Mojolicious is much easier than what I was doing before (which was dirty and much easier than doing it correctly). With a little skill creating compound selecto...
</section>
<small><p><a class="external text" href="https://www.flickr.com/photos/feuilllu/101083313/in/photolist-9W5xK-SWEcv6-qmMqBb-9W66e-umaBj-7Gkg2a-bnmWDf-jZPHK7-bAgNFi-bnmW3J-Hd8y3-dYNuYc-Hd9o9-22MW7qW-6qZWkL-7yzScF-24W5o6o-bBNUMi-5QPxcD-boz...
</small>
devdata/https_mojolicious.io_blog_2018_12_05_compound-selectors_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_06_making-a-list-with-yancy_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/06/making-a-list-with-yancy/" property="og:url">
<meta content="Day 6: Making A List with Yancy" property="og:title">
<meta content="Santa's list building just got easier!" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/06/making-a-list-with-yancy/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 6: Making A List with Yancy - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_06_making-a-list-with-yancy_ view on Meta::CPAN
}, 'the_list.list';
</code></pre>
<p>Now we build our template. Yancy comes with a <a href="http://getbootstrap.com">Bootstrap
4</a> we can use to make a pretty list of names
and addresses.</p>
<pre><code>@@ layouts/default.html.ep
<head>
<script src="/yancy/jquery.js"></script>
<link rel="stylesheet" href="/yancy/bootstrap.css">
</head>
<body>
<main class="container">
%= content
</main>
</body>
@@ the_list.html.ep
% layout 'default';
<h1>Naughty List</h1>
devdata/https_mojolicious.io_blog_2018_12_06_making-a-list-with-yancy_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_07_openapi_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@ssoriche" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/07/openapi/" property="og:url">
<meta content="Day 7: MetaCPAN, Mojolicious and OpenAPI" property="og:title">
<meta content="Overview of how OpenAPI was integrated into MetaCPAN with Mojolicious." property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/07/openapi/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 7: MetaCPAN, Mojolicious and OpenAPI - mojolicious.io</title>
<meta content="Shawn Sorichetti" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_07_openapi_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_08_authenticating-with-ldap_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="https://mojolicious.io/blog/2018/12/08/authenticating-with-ldap/" property="og:url">
<meta content="Day 8: Authenticating with LDAP" property="og:title">
<meta content="Learn how to add LDAP authentication to a Mojolicious full app" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/08/authenticating-with-ldap/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 8: Authenticating with LDAP - mojolicious.io</title>
<meta content="Boyd Duffee" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_08_authenticating-with-ldap_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_09_add-a-theme-system-to-your-mojolicious-app_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="https://mojolicious.io/blog/2018/12/09/add-a-theme-system-to-your-mojolicious-app/" property="og:url">
<meta content="Day 9: Add a theme system to your Mojolicious app" property="og:title">
<meta content="https://mojolicious.io/blog/2018/12/09/add-a-theme-system-to-your-mojolicious-app/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 9: Add a theme system to your Mojolicious app - mojolicious.io</title>
<meta content="Luc Didry" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_09_add-a-theme-system-to-your-mojolicious-app_ view on Meta::CPAN
unshift @{$self->renderer->paths}, $theme.'/templates' if -d $theme.'/templates';
unshift @{$self->static->paths}, $theme.'/public' if -d $theme.'/public';
}
</code></pre>
<p>Note the <code>if -d $theme.'/templates'</code>: it prevents problems if the use made a typo in the name of the theme and allow to avoid creating both <code>templates</code> and <code>public</code> in the theme directory if you only need o...
<h2>Conclusion</h2>
<p>You are now providing a theme system in your application.
Users will now be able to change the style of it without fearing losing their changes on updates (though they will need to check the changes they made in case the default theme changed a lot).</p>
<p>You may even provides different themes yourself, like I did for my <a href="https://framagit.org/fiat-tux/hat-softwares/lstu">URL-shortening app, Lstu</a> 🙂</p>
</section>
<small><p><a href="https://unsplash.com/photos/46juD4zY1XA">Photo</a> by <a href="https://unsplash.com/@davidpisnoy">David Pisnoy</a>, <a href="https://unsplash.com/license">Unsplash license</a> (quite similar to public domain)</p>
</small>
<p class="tags">
<span>Tagged in </span>:
<a href="/blog/tag/advent/">advent</a>,
devdata/https_mojolicious.io_blog_2018_12_09_add-a-theme-system-to-your-mojolicious-app_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_10_minion-stands-alone_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/10/minion-stands-alone/" property="og:url">
<meta content="Day 10: Minion Stands Alone" property="og:title">
<meta content="Learn how to use the Minion job queue without needing a Mojolicious web application" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/10/minion-stands-alone/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 10: Minion Stands Alone - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_10_minion-stands-alone_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_11_who-watches-the-minions_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/11/who-watches-the-minions/" property="og:url">
<meta content="Day 11: Who Watches The Minions" property="og:title">
<meta content="Check the status of a Minion job queue using commands and the Minion::Admin UI" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/11/who-watches-the-minions/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 11: Who Watches The Minions - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_11_who-watches-the-minions_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_12_dancer-and-minion_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@cromedome" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/12/dancer-and-minion/" property="og:url">
<meta content="Day 12: Using Minion in Dancer Apps" property="og:title">
<meta content="Overview of how to use Minion from within a Dancer application." property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/12/dancer-and-minion/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 12: Using Minion in Dancer Apps - mojolicious.io</title>
<meta content="Jason Crome" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_12_dancer-and-minion_ view on Meta::CPAN
<time class="date" datetime="2018-12-12">Dec 12, 2018</time>
</p>
</div>
<div class="post-thumb">
<!-- theme suggests 1300x500 -->
<img alt="Stylistic photograph of Disney-style minion toys" src="/blog/2018/12/12/dancer-and-minion/banner.jpg">
</div>
<div class="post-content">
<section id="section-1">
<p>At <code>$work</code>, we have built an API with <a href="https://metacpan.org/pod/Dancer">Dancer</a> that generates PDF documents and XML files. This API is a critical component of an insurance enrollment system: PDFs are genera...
immediately, and the XML is delivered to the carrier as soon as it becomes available. Since the XML often takes a significant amount of time to generate, the job is generated in the background so as not to tie up the
application server for an extended amount of time. When this was done, a homegrown process management system was developed, and works by <code>fork()</code>ing a process, tracking its pid, and hoping we can later successfully
reap the completed process.</p>
devdata/https_mojolicious.io_blog_2018_12_12_dancer-and-minion_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_13_taking-on-roles_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@briandfoy_perl" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/13/taking-on-roles/" property="og:url">
<meta content="Day 13: Taking on Roles" property="og:title">
<meta content="Need a little extra in your class?" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/13/taking-on-roles/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 13: Taking on Roles - mojolicious.io</title>
<meta content="brian d foy" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_13_taking-on-roles_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_14_a-practical-example-of-mojo-dom_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="https://mojolicious.io/blog/2018/12/14/a-practical-example-of-mojo-dom/" property="og:url">
<meta content="Day 14: A Practical Example of Mojo::DOM" property="og:title">
<meta content="Use Mojo::DOM to parse XML" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/14/a-practical-example-of-mojo-dom/banner.png" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 14: A Practical Example of Mojo::DOM - mojolicious.io</title>
<meta content="Chris Seigman" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_14_a-practical-example-of-mojo-dom_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_15_practical-web-content-munging_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@swelljoe" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/15/practical-web-content-munging/" property="og:url">
<meta content="Day 15: Practical Web Content Munging" property="og:title">
<meta content="Working with ugly old websites using Mojo::UserAgent and Mojo::DOM" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/15/practical-web-content-munging/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 15: Practical Web Content Munging - mojolicious.io</title>
<meta content="Joe Cooper" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_15_practical-web-content-munging_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_16_browser-diet_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="https://mojolicious.io/blog/2018/12/16/browser-diet/" property="og:url">
<meta content="Day 16: A pre-Christmas Diet for Mojolicious - A Children's Story" property="og:title">
<meta content="Setting the HTTP CacheControl header for your static files" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/16/browser-diet/squirrel.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 16: A pre-Christmas Diet for Mojolicious - A Children's Story - mojolicious.io</title>
<meta content="Boyd Duffee" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_16_browser-diet_ view on Meta::CPAN
<p>The <a href="https://github.com/zenorocha/browser-calories">Browser calories</a>
plugin for Firefox, Chrome and Opera breaks down the file sizes of your web page
into a nice little traffic light report measuring the HTML, images, CSS, JavaScript
and other parts of your page against
user-configurable limits on what you think is acceptable.</p>
<p>Google's <a href="https://developers.google.com/speed/pagespeed/insights">PageSpeed Insights</a>
measures performance on both mobile and desktop.</p>
<p>Hopefully, the increasingly awkward attempt at writing in a narrative style
didn't get in the way of a new idea or two. <a href="https://github.com/duffee/Mojolicious_session_example">Let me
know</a> if I've missed
something.</p>
</section>
<small><p><a href="https://www.flickr.com/photos/55426027@N03/16915881989">Image</a> by <a href="https://www.flickr.com/photos/55426027@N03">Peter G Trimming</a> <a href="https://creativecommons.org/licenses/by/2.0"> CC BY 2.0 </a></p>
</small>
<p class="tags">
<span>Tagged in </span>:
devdata/https_mojolicious.io_blog_2018_12_16_browser-diet_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_17_a-website-for-yancy_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/17/a-website-for-yancy/" property="og:url">
<meta content="Day 17: A Website For Yancy" property="og:title">
<meta content="Building a markdown-based site with Yancy" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/17/a-website-for-yancy/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 17: A Website For Yancy - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_17_a-website-for-yancy_ view on Meta::CPAN
app->start;
__DATA__
@@ pages.html.ep
% layout 'default';
%== $item->{html}
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/yancy/bootstrap.css">
<title><%= title %></title>
</head>
<body>
<header>
<!-- Omitted for brevity -->
</header>
<main class="container">
<%= content %>
</main>
%= javascript '/yancy/jquery.js'
devdata/https_mojolicious.io_blog_2018_12_17_a-website-for-yancy_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_18_a-view-to-a-pod_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/18/a-view-to-a-pod/" property="og:url">
<meta content="Day 18: A View To A POD" property="og:title">
<meta content="A new POD viewer plugin for Mojolicious" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/18/a-view-to-a-pod/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 18: A View To A POD - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_18_a-view-to-a-pod_ view on Meta::CPAN
default_module => 'Yancy',
allow_modules => [qw( Yancy Mojolicious::Plugin::Yancy )],
layout => 'default',
};
app->start;
__DATA__
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/yancy/bootstrap.css">
<style>
h1 { font-size: 2.00rem }
h2 { font-size: 1.75rem }
h3 { font-size: 1.50rem }
h1, h2, h3 {
position: relative;
}
h1 .permalink, h2 .permalink, h3 .permalink {
position: absolute;
top: auto;
left: -0.7em;
devdata/https_mojolicious.io_blog_2018_12_18_a-view-to-a-pod_ view on Meta::CPAN
}
pre {
border: 1px solid #ccc;
border-radius: 5px;
background: #f6f6f6;
padding: 0.6em;
}
.crumbs .more {
font-size: small;
}
</style>
<title><%= title %></title>
</head>
<body>
%= content
</body>
</html>
</code></pre>
<p>Now our documentation looks good!</p>
<p><img alt="Screenshot of Yancy module documenation with new style" src="good-docs.png"></p>
<p><a href="myapp.pl">Here's the full source</a>. Now that I have a beautiful
website, I just need to deploy the new site to the Internet...</p>
</section>
<small><p>Banner image CC0 Public Domain</p>
</small>
<p class="tags">
<span>Tagged in </span>:
devdata/https_mojolicious.io_blog_2018_12_18_a-view-to-a-pod_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_19_you-only-export-twice_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@preaction" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/19/you-only-export-twice/" property="og:url">
<meta content="Day 19: You Only Export Twice" property="og:title">
<meta content="Export content for static rendering" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/19/you-only-export-twice/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 19: You Only Export Twice - mojolicious.io</title>
<meta content="Doug Bell" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_19_you-only-export-twice_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_20_testing-dancer_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@joelaberger" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/20/testing-dancer/" property="og:url">
<meta content="Day 20: Testing Dancer" property="og:title">
<meta content="Test your Dancer2 applications with Test::Mojo" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/20/testing-dancer/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 20: Testing Dancer - mojolicious.io</title>
<meta content="Joel Berger" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_20_testing-dancer_ view on Meta::CPAN
<p>Each of the above method calls is a test.
The first, <code>get_ok</code>, builds a transaction and requests the resource.
Since the url is relative, it is handled by the app (if we wanted we could request and web resource too using a fully qualified url).
The transaction is stored in the tester object (<code>$t</code>) and all following tests will check it until it is replaced by the next request.</p>
<p>The remaining tests are reasonably self-explanatory, we check that the response status was 200, that we got a content type header that we expected and that its content is as we expect.
The content has already been utf-8 decoded, and the script has implicitly <code>use utf8</code>, so if you expected unicode, you can compare them easily.
The tests return the tester object so chaining is possible, making for visually clean sets of tests.</p>
<p>The next test is similar but this one uses the standard <a href="https://mojolicious.org/perldoc/Mojo/UserAgent">Mojo::UserAgent</a> style request generation to build a query string naming Santa for our greeting.
The tests are all the same except of course that it checks that the content greets Santa.</p>
<pre><code>$t->get_ok('/text', form => { name => 'santa' })
->status_is(200)
->content_type_like(qr[text/plain])
->content_is('hello santa');
</code></pre>
<p>Moving on we request the data endpoint, both without and with a query, then similarly test the responses.</p>
devdata/https_mojolicious.io_blog_2018_12_20_testing-dancer_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_21_a-little-christmas-template-cooking_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@briandfoy_perl" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/21/a-little-christmas-template-cooking/" property="og:url">
<meta content="Day 21: A Little Christmas Template Cooking" property="og:title">
<meta content="Using Mojo::Template for non-web applications." property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/21/a-little-christmas-template-cooking/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 21: A Little Christmas Template Cooking - mojolicious.io</title>
<meta content="brian d foy" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_21_a-little-christmas-template-cooking_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_22_use-carton-for-your-mojolicious-app-deployment_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="https://mojolicious.io/blog/2018/12/22/use-carton-for-your-mojolicious-app-deployment/" property="og:url">
<meta content="Day 22: Use Carton for your Mojolicious app deployment" property="og:title">
<meta content="https://mojolicious.io/blog/2018/12/22/use-carton-for-your-mojolicious-app-deployment/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 22: Use Carton for your Mojolicious app deployment - mojolicious.io</title>
<meta content="Luc Didry" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_22_use-carton-for-your-mojolicious-app-deployment_ view on Meta::CPAN
You can do so using the core <a href="https://metacpan.org/pod/lib">lib</a> module, the handy <a href="https://metacpan.org/pod/lib::relative">lib::relative</a> from CPAN, <a href="https://perldoc.pl/perlrun#PERL5LIB">PERL5LIB</a> environment variabl...
<h2>Conclusion</h2>
<p>Carton and cpanfile are a great way to ease Mojolicious apps deployment.
Not only it avoids to list all the dependencies needed by your application in the README or the INSTALL file, but it speeds up deployments and make them more safer, since it sure lowers the risks of bugs due to bad versions of dependencies.</p>
<p><small id="footnote-1">1: or INSTALL, or wherever you put your installation documentation <a href="#back-to-1">↩ï¸Â</a><small></small></small></p>
</section>
<small><p><a href="https://unsplash.com/photos/mTkXSSScrzw">Photo</a> by <a href="https://unsplash.com/@fempreneurstyledstock">Leone Venter</a>, <a href="https://unsplash.com/license">Unsplash license</a> (quite similar to public domain...
</small>
<p class="tags">
<span>Tagged in </span>:
<a href="/blog/tag/advent/">advent</a>,
<a href="/blog/tag/deployment/">deployment</a>,
<a href="/blog/tag/carton/">carton</a>
</p>
devdata/https_mojolicious.io_blog_2018_12_22_use-carton-for-your-mojolicious-app-deployment_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@sachindangol" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/23/mojolicious-and-angular/" property="og:url">
<meta content="Day 23: Mojolicious and Angular" property="og:title">
<meta content="Learn how to marry Mojolicious and Angular for building awesome web application" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/23/mojolicious-and-angular/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 23: Mojolicious and Angular - mojolicious.io</title>
<meta content="Sachin Dangol" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
<h2>Generate Angular App</h2>
<p>Angular Version 7 is used for this demo, but should work for versions back to 4+. Demos on how to install Angular and CLI will be way too boring for this blog and there are plenty of resources for this in internet.</p>
<p>Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.
Let's use the Angular CLI to generate a new app, <code>ng new app-name</code>.</p>
<pre><code>Sachin@01:18 PM[~/workspace/project/mojo_angular]$ ng new NgDemo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE NgDemo/README.md (1023 bytes)
CREATE NgDemo/angular.json (3768 bytes)
CREATE NgDemo/package.json (1306 bytes)
...
Sachin@01:20 PM[~/workspace/project/mojo_angular]$ cd NgDemo/
Sachin@01:20 PM[~/workspace/project/mojo_angular/NgDemo]$ ls
README.md angular.json e2e node_modules package-lock.json package.json src tsconfig.json tslint.json
</code></pre>
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
<pre><code>Sachin@01:20 PM[~/workspace/project/mojo_angular/NgDemo]$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-12-15T05:22:00.337Z
Hash: c05a16d8553980a82a62
Time: 36103ms
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.67 MB [initial] [rendered]
ï½¢wdmï½£: Compiled successfully.
</code></pre>
<p>Open the browser to check Angular app:</p>
<p><img alt="basic angular app" src="angular_app.png"></p>
<p>Note that this page's content is coming from <code>NgDemo/src/index.html</code> where <code>app-root</code> selector html is content coming from <code>NgDemo/src/app/app.component.html</code>. Later we will be modifying <code>app.component.htm...
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
Run <code>ng build</code> with <code>--base-href=./</code> so that base url inside the Angular app is set to the current directory for the application being built. This is very important so that later you do not waste time figuring out why Angular ro...
<pre><code>Sachin@02:06 PM[~/workspace/project/mojo_angular/NgDemo]$ ng build --base-href=./
Date: 2018-12-15T06:06:48.550Z
Hash: f3749aba56348b1e51e3
Time: 27091ms
chunk {main} main.js, main.js.map (main) 10.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.35 MB [initial] [rendered]
Sachin@02:06 PM[~/workspace/project/mojo_angular/NgDemo]$
</code></pre>
<p>Note that <code>dist</code> directory is created with <code>NgDemo</code> folder which contains the compiled angular app files:</p>
<pre><code>Sachin@02:10 PM[~/workspace/project/mojo_angular/NgDemo]$ ls
README.md angular.json dist e2e node_modules package-lock.json package.json src tsconfig.json tslint.json
Sachin@02:10 PM[~/workspace/project/mojo_angular/NgDemo]$
</code></pre>
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
<h4>Code app.component.ts to set MVC stage</h4>
<p>Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Component basically creates a separate MVC world which makes code management granular and easy.
The <code>@Component</code> decorator can pass in many types of metadata to a class particularly following 3 metadata specifiers are significant:</p>
<ul>
<li><code>selector</code>: specifies which UI component it targets.</li>
<li><code>templateUrl</code>: html for that selector element and</li>
<li><code>styleUrl</code>: specifies one or more style files to be used for that html</li>
</ul>
<p><code>Component Class</code> sets up stage for two way data binding. In our case, it just makes an HTTP GET request to Mojo route we defined earlier, then binds the output to variable <code>adventDetail2018</code>. This is then available in the vi...
<pre><code>Sachin@12:33 AM[~/workspace/project/mojo_angular/NgDemo/src/app]$ cat app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Mojolicious Angular web app';
adventDetail2018;
// Inject HttpClient into your component
constructor(private http: HttpClient) {}
ngOnInit(): void {
// Make the HTTP get request to mojolicious route
this.http.get('http://localhost:8080/advent/2018/detail').subscribe(data => {
this.adventDetail2018 = data;
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
Sachin@12:33 AM[~/workspace/project/mojo_angular/NgDemo/src/app]$
</code></pre>
<h4>Modify app.component.html file to show data</h4>
<p>Now we'll modify app.component.html file to show data fetched from the Mojolicious backend.
Replace the default template which was displaced earlier with our own html.
I have just looped through <code>adventDetail2018</code> variable, which consists of data from http get request, using <code>*ngFor</code> built in directive to form a <code>table</code>.</p>
<pre><code>Sachin@12:34 AM[~/workspace/project/mojo_angular/NgDemo/src/app]$ cat app.component.html
<div style="text-align:left">
<h1>
Welcome to {{ title }}!
</h1>
<h3>Mojolicious Advent Calendar 2018 Detail:</h3>
<table>
<thead>
<th>Day</th>
<th>Title</th>
<th>Author</th>
</thead>
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
<td>{{d.day}}</td>
<td>{{d.title}}</td>
<td>{{d.author}}</td>
</tr>
</tbody>
</table>
</div>
<router-outlet></router-outlet>
</code></pre>
<h4>Add little bit of style for the table</h4>
<p>I have also added a bare minimum style in <code>app.component.css</code> file to show its significance and how beautifully angular separates css away from html file.</p>
<pre><code>Sachin@12:34 AM[~/workspace/project/mojo_angular/NgDemo/src/app]$ cat app.component.css
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
devdata/https_mojolicious.io_blog_2018_12_23_mojolicious-and-angular_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_24_async-await-the-mojo-way_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@joelaberger" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/24/async-await-the-mojo-way/" property="og:url">
<meta content="Day 24: Async/Await the Mojo Way" property="og:title">
<meta content="Announcing Mojo::AsyncAwait - Better non-blocking workflows for Mojolicious" property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/24/async-await-the-mojo-way/banner.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 24: Async/Await the Mojo Way - mojolicious.io</title>
<meta content="Joel Berger" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_24_async-await-the-mojo-way_ view on Meta::CPAN
return trim $tx->res->dom->at('title')->text;
});
return $promise;
}
get_title_p($url)->then(sub ($title) {
say $title;
})->wait;
</code></pre>
<p>All told, this is a step in the right direction, but it still involves a mental shift in style.
Even if this is easier than using pure callbacks, you still have to keep track of promises, consider the implications of chaining.
You still have to attach callbacks using <code>then</code>.
And don't forget error handling callbacks too!</p>
<p><em>Editor's note: to this point in the article, it is similar to the Perl Advent Calendar entry <a href="http://www.perladvent.org/2018/2018-12-19.html">posted just a few days before this one on 2018-12-19</a>, humorously presented by Mark Fo...
If you'd like to see another take on promises and Mojo::Promise specifically, give it a read.
Everything in it is applicable even as this article takes it one step further below ...</em></p>
<h2>Async/Await</h2>
devdata/https_mojolicious.io_blog_2018_12_24_async-await-the-mojo-way_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
devdata/https_mojolicious.io_blog_2018_12_25_special-thanks_ view on Meta::CPAN
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/theme/css/default.css" rel="stylesheet">
<link href="/theme/css/layout.css" rel="stylesheet">
<link href="/theme/css/media-queries.css" rel="stylesheet">
<link href="/theme/css/statocles.css" rel="stylesheet">
<!-- twitter and opengraph -->
<meta content="summary" name="twitter:card">
<meta content="@joelaberger" name="twitter:creator">
<meta content="https://mojolicious.io/blog/2018/12/25/special-thanks/" property="og:url">
<meta content="Day 25: Special Thanks" property="og:title">
<meta content="Wrap up the 2018 Calendar with news and gratitude." property="og:description">
<meta content="https://mojolicious.io/blog/2018/12/25/special-thanks/jude_mojo.jpg" property="og:image">
<meta content="summary_large_image" name="twitter:card">
<script src="/theme/js/modernizr.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css" rel="stylesheet">
<title>Day 25: Special Thanks - mojolicious.io</title>
<meta content="Joel Berger" name="author">
<meta content="Statocles 0.093" name="generator">
<link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<header>
<div class="row">
<div class="twelve columns">
<div class="logo">
<a href="/index.html">
<h3 style="color: #fff">mojolicious.io</h3>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav" id="nav">
<!-- li.current is given a different styling -->
devdata/https_mojolicious.io_blog_2018_12_25_special-thanks_ view on Meta::CPAN
<ul class="footer-social">
<li><a href="https://github.com/mojolicious/mojo"><i class="fa fa-github"></i></a></li>
<li><a href="https://twitter.com/search?q=%23mojolicious"><i class="fa fa-twitter"></i></a></li>
<li><a href="/blog/index.rss"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2017 Joel Berger</li>
<li><a href="https://github.com/MojoliciousDotIO/mojolicious.io">Contribute to this site on Github</a></li>
<li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
<li>Made with <a href="http://preaction.me/statocles">Statocles</a></li>
<li>Powered by <a href="http://www.perl.org">Perl</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a href="#" title="Back to Top">Go To Top</a></div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/theme/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/theme/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.flexslider.js"></script>
( run in 1.763 second using v1.01-cache-2.11-cpan-49f99fa48dc )