<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Alchemy</title>
    <meta name="description" content="A front-end tech blog." />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/assets/css/screen.css?v=0d0efc0ef0" />
    <link rel="stylesheet" type="text/css" href="/assets/css/prism.css?v=0d0efc0ef0" /> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />

    <link rel="canonical" href="http://tech.diaslopes.com/" />
    <meta name="referrer" content="origin" />
    
    <meta property="og:site_name" content="Alchemy" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Alchemy" />
    <meta property="og:description" content="A front-end tech blog." />
    <meta property="og:url" content="http://tech.diaslopes.com/" />
    <meta property="og:image" content="http://tech.diaslopes.com/content/images/2015/12/banner2.jpg" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Alchemy" />
    <meta name="twitter:description" content="A front-end tech blog." />
    <meta name="twitter:url" content="http://tech.diaslopes.com/" />
    <meta name="twitter:image:src" content="http://tech.diaslopes.com/content/images/2015/12/banner2.jpg" />
    
    <script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Website",
    "publisher": "Alchemy",
    "url": "http://tech.diaslopes.com/",
    "image": "http://tech.diaslopes.com/content/images/2015/12/banner2.jpg",
    "description": "A front-end tech blog."
}
    </script>

    <meta name="generator" content="Ghost 0.7" />
    <link rel="alternate" type="application/rss+xml" title="Alchemy" href="http://tech.diaslopes.com/rss/" />
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-3663877-6', 'auto');
  ga('send', 'pageview');

</script>
</head>
<body class="home-template nav-closed">

    <div class="nav">
    <h3 class="nav-title">Menu</h3>
    <a href="#" class="nav-close">
        <span class="hidden">Close</span>
    </a>
    <ul>
            <li class="nav-home nav-current" role="presentation"><a href="http://tech.diaslopes.com/">Home</a></li>
            <li class="nav-github" role="presentation"><a href="http://tech.diaslopes.com/github-repositories">Github</a></li>
    </ul>
    <a class="subscribe-button icon-feed" href="http://tech.diaslopes.com/rss/">Subscribe</a>
</div>
<span class="nav-cover"></span>


    <div class="site-wrapper">

        
<header class="main-header " style="background-image: url(/content/images/2015/12/banner2.jpg)">
    <nav class="main-nav overlay clearfix">
        <a class="blog-logo" href="http://tech.diaslopes.com"><img src="/content/images/2015/12/js.png" alt="Alchemy" /></a>
            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
    </nav>
    <div class="vertical">
        <div class="main-header-content inner">
            <h1 class="page-title">Alchemy</h1>
            <h2 class="page-description">A front-end tech blog.</h2>
        </div>
    </div>
    <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
</header>

<main id="content" class="content" role="main">

    <div class="extra-pagination inner">
    <nav class="pagination" role="navigation">
    <span class="page-number">Page 1 of 1</span>
</nav>

</div>

<article class="post tag-github tag-jquery tag-backbone tag-touch">
    <header class="post-header">
        <h2 class="post-title"><a href="/2013/04/18/jquery-simple-touch-events-plugin/">jQuery simple touch events plugin</a></h2>
    </header>
    <section class="post-excerpt">
        <p>I’ve working in a project with Backbone and I was missing an easy way of supporting touch events (specially for mobile devices). I’ve created <a class="read-more" href="/2013/04/18/jquery-simple-touch-events-plugin/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/6651db5a53355c337dcc3d1a624ca9d3?s=250&amp;d=mm&amp;r=x" alt="Marco Dias Lopes" nopin="nopin" />
        <a href="/author/marco/">Marco Dias Lopes</a>
         on <a href="/tag/github/">github</a>, <a href="/tag/jquery/">jQuery</a>, <a href="/tag/backbone/">backbone</a>, <a href="/tag/touch/">touch</a>
        <time class="post-date" datetime="2013-04-18">18 April 2013</time>
    </footer>
</article>
<article class="post tag-less tag-sublime-text tag-compile">
    <header class="post-header">
        <h2 class="post-title"><a href="/2012/03/29/less-css-in-sublime-text-2/">LESS CSS in Sublime Text 2</a></h2>
    </header>
    <section class="post-excerpt">
        <p>If you haven’t tested LESS you should. LESS is not a new language or a technical replacement for CSS, it’s a way of implementing <a class="read-more" href="/2012/03/29/less-css-in-sublime-text-2/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/6651db5a53355c337dcc3d1a624ca9d3?s=250&amp;d=mm&amp;r=x" alt="Marco Dias Lopes" nopin="nopin" />
        <a href="/author/marco/">Marco Dias Lopes</a>
         on <a href="/tag/less/">less</a>, <a href="/tag/sublime-text/">sublime text</a>, <a href="/tag/compile/">compile</a>
        <time class="post-date" datetime="2012-03-29">29 March 2012</time>
    </footer>
</article>
<article class="post tag-javascript tag-pattern">
    <header class="post-header">
        <h2 class="post-title"><a href="/2012/01/31/pubsub-pattern/">PubSub pattern</a></h2>
    </header>
    <section class="post-excerpt">
        <p>If you ever worked with YUI or Dojo frameworks, you must be familiar with this pattern, it consists on subscribing a widget’s event by supplying <a class="read-more" href="/2012/01/31/pubsub-pattern/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/6651db5a53355c337dcc3d1a624ca9d3?s=250&amp;d=mm&amp;r=x" alt="Marco Dias Lopes" nopin="nopin" />
        <a href="/author/marco/">Marco Dias Lopes</a>
         on <a href="/tag/javascript/">javascript</a>, <a href="/tag/pattern/">pattern</a>
        <time class="post-date" datetime="2012-01-31">31 January 2012</time>
    </footer>
</article>

<nav class="pagination" role="navigation">
    <span class="page-number">Page 1 of 1</span>
</nav>


</main>


        <footer class="site-footer clearfix">
            <section class="copyright"><a href="http://tech.diaslopes.com">Alchemy</a> &copy; 2017</section>
            <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>
        </footer>

    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    

    <script type="text/javascript" src="/assets/js/jquery.fitvids.js?v=0d0efc0ef0"></script>
    <script type="text/javascript" src="/assets/js/prism.js?v=0d0efc0ef0"></script> 
    <script type="text/javascript" src="/assets/js/index.js?v=0d0efc0ef0"></script>

</body>
</html>
