feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Patrick Canella</title>
    <description>A free Jekyll theme for download</description>
    <link>http://pcanella.github.io/</link>
    <atom:link href="http://pcanella.github.io/feed.xml" rel="self" type="application/rss+xml"/>
    <pubDate>Sun, 07 Jul 2019 14:38:25 -0700</pubDate>
    <lastBuildDate>Sun, 07 Jul 2019 14:38:25 -0700</lastBuildDate>
    <generator>Jekyll v3.6.3</generator>
    
      <item>
        <title>Resizing a XIB Interface using Swift, the dynamic way!</title>
        <description>&lt;p&gt;Right now I’m kind of teaching myself Swift and iOS programming because:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Swift is a badass language&lt;/li&gt;
  &lt;li&gt;iOS coding is fun and different than the web&lt;/li&gt;
  &lt;li&gt;It’s fun!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One of the issues I had the other day was finding a simple, easy way to programatically resize a XIB file (specifically for a custom keyboard I am working on). I searched high and low on stackoverflow and Google, but to no avail. I kept thinking “OKAY someone has to know how to do this or has done this.”&lt;/p&gt;

&lt;p&gt;So I found this simple example using &lt;code&gt;UITextField&lt;/code&gt; and tried to apply it to my XIB view. AND IT WORKED GREAT.&lt;/p&gt;

&lt;p&gt;So I’ll guide you through how to do this in Swift. This tutorial requires a basic understanding of XCode and the Storyboard features.&lt;/p&gt;

&lt;h2 id=&quot;prerequisite-knowledge&quot;&gt;PREREQUISITE KNOWLEDGE&lt;/h2&gt;
&lt;ul&gt;
  &lt;li&gt;Swift syntax/semantics&lt;/li&gt;
  &lt;li&gt;Storyboard&lt;/li&gt;
  &lt;li&gt;ViewController&lt;/li&gt;
  &lt;li&gt;ViewController Button binding&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;step-one-hooking-up-the-viewcontroller-with-its-xib&quot;&gt;STEP ONE: Hooking up the ViewController with it’s XIB&lt;/h2&gt;

&lt;p&gt;You’ll want to create a regular old “View” in XCode. Once that is done, choose &lt;code&gt;Add File&lt;/code&gt; from the &lt;em&gt;File&lt;/em&gt; menu.&lt;/p&gt;

&lt;p&gt;Then you’ll want to click on your XIB in the Storyboard editor and click on the “File’s Owner” object/cube. Finally, go over to the File Owner’s Identity Inspector and change it’s class to &lt;em&gt;YourViewController&lt;/em&gt; (whatever you named it). Cool!&lt;/p&gt;

&lt;p&gt;In your &lt;code&gt;ViewController&lt;/code&gt; we want to make sure we have a reference to our XIB. So we’ll want to add something like this:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;    var myXibView: UIView!
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Our XIB is connected to our ViewController file. Let’s move on.&lt;/p&gt;

&lt;h2 id=&quot;step-two-changing-attributes-of-the-view&quot;&gt;STEP TWO: Changing Attributes of the View.&lt;/h2&gt;

&lt;p&gt;Once the &lt;code&gt;Viewcontroller&lt;/code&gt; class is hooked up with the XIB’s &lt;code&gt;File's Owner&lt;/code&gt; object, head on over to the Attributes Inspector and change the following settings in the dropdown menus (&lt;code&gt;Size&lt;/code&gt; is the most important here):&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;code&gt;Size - Freeform&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;code&gt;Orientation - Inferred&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;code&gt;Status Bar - None&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;code&gt;Top Bar - None&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;code&gt;Bottom Bar - Inferred&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Got that? Awesome. So &lt;code&gt;Freeform&lt;/code&gt; is important to allow changing the size of the layout.&lt;/p&gt;

&lt;h2 id=&quot;step-two-adding-a-simple-button-to-trigger-the-resize&quot;&gt;STEP TWO: Adding a simple button to trigger the resize&lt;/h2&gt;

&lt;p&gt;Next, let’s go ahead and add a button to the view. For this example, it doesn’t have to be fancy at all. Then, bind the button to your &lt;code&gt;ViewController&lt;/code&gt; with an &lt;code&gt;@IBAction&lt;/code&gt; func. For example, here is mine:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt; @IBAction func onExpandoClick(sender: AnyObject) {
        self.resizeXib(); // or any other custom method here
    }

&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&quot;step-three-the-resize-function&quot;&gt;STEP THREE: The resize function!&lt;/h2&gt;

&lt;p&gt;Finally, we will create a simple function to resize your XIB.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;    func resizeXib(){
        var testRect: CGRect = self.myXibView.frame
        testRect.size.height = 400;
        self.myXibView.frame = testRect;
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&quot;done&quot;&gt;DONE!&lt;/h2&gt;

&lt;p&gt;That’s all there is to it; on your button click the XIB will resize to 400! Obviously there are a lot of customizations you can make here including animations, etc. But there you go! If you have any questions, feel free to reach out patrickcanella at gmail dot com!&lt;/p&gt;
</description>
        <pubDate>Wed, 18 May 2016 00:00:00 -0700</pubDate>
        <link>http://pcanella.github.io/blog/2016/swift-resize-xib/</link>
        <guid isPermaLink="true">http://pcanella.github.io/blog/2016/swift-resize-xib/</guid>
        
        
      </item>
    
      <item>
        <title>Pure CSS transition snippet</title>
        <description>&lt;p&gt;Just a quick tutorial here for those who may need it:&lt;/p&gt;

&lt;p&gt;I came across an issue where I was removing a child element within multiple child elements and wanted the parent to “smoothly” readjust its height by sliding up. After trying to add different animations for the parent, I decided to play around on JSFiddle and create some solution for this thing…which actually has nothing to do with the parent at all!&lt;/p&gt;

&lt;p&gt;First, let’s look at the basic HTML here&lt;/p&gt;

&lt;p&gt;###HTML&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;div class=&quot;parent&quot;&amp;gt;
  &amp;lt;div class=&quot;child1&quot;&amp;gt;
   Child 1
  &amp;lt;/div&amp;gt;
  &amp;lt;div class=&quot;child2&quot;&amp;gt;
   Child 2
  &amp;lt;/div&amp;gt;
  &amp;lt;div class=&quot;child3&quot;&amp;gt;
   Child 3
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;

&amp;lt;button class=&quot;test&quot;&amp;gt;
Remove Child 2
&amp;lt;/button&amp;gt;
&amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Basically we have a parent and child relationship. This can be divs, lis, spans, whatever, it shouldn’t really matter.&lt;/p&gt;

&lt;p&gt;Then, we have some fairly simple CSS here; bear in mind for this demo/tutorial I decided to go with some static children/parents, but this also works dynamically, as long as you apply the proper styles.&lt;/p&gt;

&lt;p&gt;For this demo, we are only going to remove the 2nd child, to show the demo.&lt;/p&gt;

&lt;p&gt;###CSS&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-css&quot;&gt;.parent{
  border:1px solid red;
  height:auto;
}

.child2{
    transition: all 0.4s ease-in-out;
    max-height:1em;
    opacity:1;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;As you can see, the &lt;code&gt;.parent&lt;/code&gt; class is pretty straightforward. The &lt;code&gt;.child2&lt;/code&gt; class has an “all” transition with an &lt;a href=&quot;https://developers.google.com/web/fundamentals/design-and-ui/animations/the-basics-of-easing?hl=en&quot;&gt;ease-in-out&lt;/a&gt;. It also has the &lt;code&gt;max-height&lt;/code&gt; property, which is set to 1em (aka the height of the text). This &lt;code&gt;max-height&lt;/code&gt; is actually important and the basis for the actual transition itself.&lt;/p&gt;

&lt;p&gt;###JavaScript&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;var btn = document.querySelector('.test');


btn.addEventListener('click', removeEvent, false);

function removeEvent(){
  var thisChild = document.querySelector('.child2');
  thisChild.style.opacity = 0;
  thisChild.style['max-height'] = 0;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Pretty straightforward: we are adding an Event listener to the button so that when it’s clicked, we call &lt;code&gt;removeEvent&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Inside &lt;code&gt;removeEvent()&lt;/code&gt; we see that we are:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Setting &lt;code&gt;.child2&lt;/code&gt; to &lt;code&gt;thisChild&lt;/code&gt; variable&lt;/li&gt;
  &lt;li&gt;adding styles of &lt;code&gt;opacity&lt;/code&gt; (for the fancy fade) and &lt;code&gt;max-height&lt;/code&gt; (for fancy “slide” animation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s it! When you remove &lt;code&gt;.child2&lt;/code&gt; the element will disappear (it won’t disappear completely from the DOM just yet).&lt;/p&gt;

&lt;p&gt;##COOL, BUT CAN’T WE GET RID OF THE DOM NODE TOO?&lt;/p&gt;

&lt;p&gt;Yes! Absolutely. JS has a built in event called &lt;code&gt;transitionend&lt;/code&gt; that will fire after the CSS transition is over. Kind of a callback for CSS; nice!&lt;/p&gt;

&lt;p&gt;So if we want to add a “remove DOM node” feature, we can do that as well. We’ll add a &lt;code&gt;transitionend&lt;/code&gt; event listener and create a function that removes the DOM node. So in the JS, we’ll do something like this:&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;document.querySelector('.child2').addEventListener('transitionend', destroyDOMNode, false);

function destroyDOMNode(el){
  el.target.parentNode.removeChild(e.target);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;A simple one line function and we are done!&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://jsfiddle.net/jb6pv45k/4/&quot;&gt;Check out the final JSFiddle here&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;but-patrick-cant-we-just-use-jquery-for-this-instead&quot;&gt;BUT PATRICK, CAN’T WE JUST USE JQUERY FOR THIS INSTEAD?&lt;/h2&gt;

&lt;p&gt;Well yeah, you could. Personally, I prefer Vanilla JavaScript though and I’ll tell you a few reasons why:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Performance: CSS transitions are generally faster with animation… &lt;a href=&quot;https://css-tricks.com/myth-busting-css-animations-vs-javascript/&quot;&gt;well…sorta&lt;/a&gt;. The key here is &lt;em&gt;simple&lt;/em&gt; animations like this are. More complex, GPU intensive animations may not be.&lt;/li&gt;
  &lt;li&gt;Simpler code: Although jQuery certainly comes with a lot of animation options, it’s often cumbersome to keep up with and to get everything &lt;em&gt;just&lt;/em&gt; right. CSS transitions are as easy as using &lt;code&gt;transitionend&lt;/code&gt; events and adding/removing classes with the CSS &lt;code&gt;transition&lt;/code&gt; property.&lt;/li&gt;
  &lt;li&gt;It’s definitely the future: As IE9 support wanes, CSS &lt;code&gt;transition&lt;/code&gt; is becoming a browser default (YESSS) and it just makes more sense to use CSS as intended rather than constantly use JS animations.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Although these are not hard and fast rules (big surprise in web dev, right?), they’re good guidelines to follow. I’m sure dozens of people will tell me I’m wrong and know nothing, but I’m somewhat experienced in both JS and CSS animations, so bring it on ;).&lt;/p&gt;
</description>
        <pubDate>Tue, 12 Apr 2016 00:00:00 -0700</pubDate>
        <link>http://pcanella.github.io/blog/2016/smooth-child-transition/</link>
        <guid isPermaLink="true">http://pcanella.github.io/blog/2016/smooth-child-transition/</guid>
        
        
      </item>
    
      <item>
        <title>Simple Service Workers; Or why the hell does everyone keep talking about these things??</title>
        <description>&lt;div style=&quot;text-align:center; margin-bottom:30px;&quot;&gt;
&lt;a href=&quot;https://github.com/pcanella/service-worker-sample&quot;&gt;Yeah yeah, article, shmarticle... just show me the code!&lt;/a&gt;
&lt;/div&gt;

&lt;p&gt;&lt;em&gt;“Oh service workers this, service workers that, offline mode will end native apps!”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Have you heard this before&lt;/strong&gt;? If you’re a Javascript developer and haven’t been living under a rock for the past 6-12 months, I bet you have too. I remember hearing about Service Workers and just assumed they were the be-all-end-all for client side JS.&lt;/p&gt;

&lt;p&gt;After a bit of research (and implementation!), I kind of got a feel for what they are (albeit on a very basic level, I haven’t really done anything advanced with them) and figured out what is needed to use them! In this post, I’ll teach you how to use service workers on a simple site like patcanella.com. It’s actually super straightforward when you know what the specifics are. Anyway, let’s a take a quick step back and discuss what Service Workers are (in ELI5 mode) and what the implications are, on a very basic level.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Service Workers, Service Workers, Service Workers!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Like I said before, we constantly hear this term. But the question is: what are they? Why are they useful to us and how can I understand it without getting confused with loads of code being thrown at me every which way?&lt;/p&gt;

&lt;p&gt;Okay, let’s tackle this one question at a time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What are service workers?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A service worker is simply another thread the browser opens and uses in order to cache files and act sort of like a “proxy” to your fully loaded website. Sort of similar to &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers&quot;&gt;Web Workers&lt;/a&gt;, Service Workers can cache files (specified by the developer) for offline access and allow a more customized cached experience of your page or web application. Additionally, service workers allow the web to have a sophisticated Push API (which we will not touch upon here) as well as background sync APIs (also not touched upon here). For the purposes of this blog post, we will only focus on the caching API.&lt;/p&gt;

&lt;p&gt;(By the way, for a more in-depth post, check out &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API&quot;&gt;MDN’s Service Worker article&lt;/a&gt; ; it’s really good and primarily where I learned all of this).&lt;/p&gt;

&lt;p&gt;Additionally, service workers are new and changing. &lt;a href=&quot;http://caniuse.com/#feat=serviceworkers&quot;&gt;Check out which browsers you can support before going hog-wild with it&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;One more thing, if you want to play around in Chrome and enable it in dev tools, check out the &lt;a href=&quot;https://www.chromium.org/blink/serviceworker/service-worker-faq&quot;&gt;Chromium documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Finally, if you’d like to enable them in individual browsers, here’s how to do it:
(Thanks to &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers&quot;&gt;MDN for this&lt;/a&gt;):&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Firefox Nightly: Go to about:config and set dom.serviceWorkers.enabled to true; restart browser.&lt;/li&gt;
  &lt;li&gt;Chrome Canary: Go to chrome://flags and turn on experimental-web-platform-features; restart browser (note that some features are now enabled by default in Chrome.)&lt;/li&gt;
  &lt;li&gt;Opera: Go to opera://flags and enable Support for ServiceWorker; restart browser.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Okay, so they cache things. Why is this useful to me on my personal website or web application?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Good question! You know how the browser caches a lot of CSS, images and JavaScript already, right? Well, Service Workers give us the option to heavily customize this, allowing us to cache images, scripts, files and even whole websites (!!!) on the user’s local browser. This allows us to access the site offline (as long as you accessed it online first!), which is really, really cool. Basically, this opens the door to having websites and apps act as if they were native apps!&lt;/p&gt;

&lt;p&gt;This means that, for websites that don’t necessarily need network access (like a simple calculator site or some app that doesn’t require a network connection, for whatever reason), you can still view the site, click on things, etc. It’s a limited use case, sure, but super useful and a much, much better user experience than the Chrome “page cannot be found” dinosaur &lt;a href=&quot;http://www.omgchrome.com/chrome-dinosaur-game-pterodactyl-upgrade/&quot;&gt;which, coincidentally turns into a game&lt;/a&gt;.&lt;/p&gt;

&lt;table class=&quot;image&quot;&gt;
&lt;caption align=&quot;bottom&quot; style=&quot;font-size:14px&quot;&gt;Sorry little guy, I love &amp;amp; hate you.&lt;/caption&gt;
&lt;tr&gt;&lt;td style=&quot;border:0; text-align:center;&quot;&gt;&lt;img src=&quot;http://i.imgur.com/FwbDS1A.png&quot; alt=&quot;Sorry little guy, I love &amp;amp; hate you.&quot; /&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;&lt;strong&gt;Okay, I’m still with you… so how do I make one of these things for my own website???&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Again, awesome question! It’s actually not too…too… difficult. I’ll admit I struggled a bit with it just because of so many conflicting tutorials online and ever-changing documentation. As aforementioned, MDN’s docs are arguably the best on Service Workers.&lt;/p&gt;

&lt;p&gt;Here’s how you do it!&lt;/p&gt;

&lt;p&gt;Okay, let’s take a simple website such as &lt;a href=&quot;https://github.com/pcanella/service-worker-sample&quot;&gt;this example repo&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The folder structure is as follows:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;index.html (our main file)&lt;/li&gt;
  &lt;li&gt;page_script.js (our main file’s javascript file)&lt;/li&gt;
  &lt;li&gt;service_workers.js (our service worker file with the cool fancy caching logic!)&lt;/li&gt;
  &lt;li&gt;style.css (just a simple CSS file to show how caching works w/ service workers)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;IMPORTANT NOTE: Although you can run this just fine on http://localhost:80 (or whatever port), service workers WILL NOT WORK on the web unless your site is HTTPS enabled. Somewhat related: &lt;a href=&quot;https://letsencrypt.org&quot;&gt;letsencrypt.org&lt;/a&gt; is an awesome place to get an SSL certificate….&lt;/p&gt;

&lt;p&gt;ONE MORE NOTE: Be sure to run this on an HTTP server with localhost:8080 or something like that. You can’t use use file://, it must be over HTTP protocol. Not sure what to use? check out &lt;a href=&quot;https://www.npmjs.com/package/http-server&quot;&gt;http-server&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have the above file structure, cool. Now we want to really dig into the code. We won’t worry about the HTML file since it’s pretty boilerplate, but important to note that we include our JS as such:&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-HTML&quot;&gt;&amp;lt;script src=&quot;page_script.js&quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script src=&quot;service_worker.js&quot;&amp;gt;&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;and our HTML with loaded images as:&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-HTML&quot;&gt;&amp;lt;img class=&quot;set1&quot; src=&quot;images/set1.jpg&quot;/&amp;gt;
&amp;lt;img class=&quot;set2&quot; src=&quot;images/set2.jpg&quot;/&amp;gt;
&amp;lt;img class=&quot;set3&quot; src=&quot;images/set3.jpg&quot;/&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Bare bones. We don’t need anything more. Let’s keep it simple so we can understand this shit and don’t get confused!&lt;/p&gt;

&lt;p&gt;If you clone &lt;a href=&quot;https://github.com/pcanella/service-worker-sample&quot;&gt;the repo&lt;/a&gt; and then access the page, it’s just going to look like this (nothing fancy, right?):&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://i.imgur.com/eWdxZkt.png&quot; alt=&quot;simple site&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Then, our CSS file just contains a simple &lt;code&gt;body{background-color:red;}&lt;/code&gt; and that’s it. We just want to show that we can store all of this.&lt;/p&gt;

&lt;p&gt;Let’s get to the gritty part, the Javascript. We’ll take a look at the &lt;code&gt;page_script.js&lt;/code&gt; file first. Follow along in the comments, as I explain everything there :).&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;
    // This file will get all the image tags on the page and 
    // just add a click handler to each. This is again, mainly 
    // just to show the caching mechanism in Service Workers
    //

    var images = document.getElementsByTagName('img');

    for (var i = 0; i &amp;lt; images.length; i++) {
        //do something to each div like
        images[i].addEventListener('click', setAlert);
    }

    function setAlert() {
      alert('awesome lego set!');
    }

    // -------- 
    // Okay, cool, now let's focus on the SW itself
    // --------

    // We want to check to see if the browser actually 
    // supports the serviceWorker property! 
    
    // Not sure if it does or not?
    // Check out http://caniuse.com/#feat=serviceworkers

    if ('serviceWorker' in navigator) {
        // We want to register the service worker file with 
        // the browser
        navigator.serviceWorker.register('service_worker.js', {
            
            // Just the file scope; since this is in the main 
            // directory, we'll leave it blank. This is kind of 
            // a finicky option, FYI. 
            
            scope: ''
        }).then(function(reg) {
            
            // registration worked, hurray!
            
            console.log('Registration succeeded. Scope is ' + reg.scope);

            if (reg.installing) {
                console.log('Service worker installing');
            } else if (reg.waiting) {
                console.log('Service worker installed');
            } else if (reg.active) {
                console.log('Service worker active');
            }
        }).catch(function(error) {
            
            // registration failed. No worries, just make sure 
            // HTTPS is enabled and you're calling the SW 
            // correctly.

            console.log('Registration failed with ' + error);
        });
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;So far, so good right? In the beginning we have a simple piece of JS that allows you to trigger an alert when you click on an image. That’s all it does.&lt;/p&gt;

&lt;p&gt;Then, in the service worker initialization code, we have a check to make sure the browser supports it. The &lt;code&gt;register&lt;/code&gt; function is a promise (you can tell by it’s connecting &lt;code&gt;then()&lt;/code&gt; function!), so after we initialize the service worker (in this case &lt;code&gt;service_worker.js&lt;/code&gt; using &lt;code&gt;register&lt;/code&gt; we will run the code inside of &lt;code&gt;then()&lt;/code&gt; which are just console.logs to confirm or deny that it worked.&lt;/p&gt;

&lt;p&gt;The last portion &lt;code&gt;catch(function(error){...})&lt;/code&gt; simply alerts us if the Service Worker’s registration failed or not. If it DID fail, then nothing was installed into the browser. If that happens, don’t worry, just try again in localhost or if you’re editing directly on your own server, make sure HTTPS is enabled. Additionally, make sure you’re pointing to the right Service Worker file, especially if you’re using scope (as it is finicky and I chose not to use it on purpose).&lt;/p&gt;

&lt;p&gt;Still with me? Awesome! The second part gets a little convoluted, so stay with me and make sure to read the comments.&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;
    // Here we add an event listener for the &quot;install&quot; event. 
    // Once it registers successfully, it will automatically 
    // install the service worker for you. Cool!

    this.addEventListener('install', function(event) {
        console.log('installing....');

        // Here we are once again using promises! the event 
        // object has a waitUntil property that is a promise. 
        // This promise waits until the cache portions 
        // (below) are populated before declaring the service 
        // worker &quot;installed!&quot;

        event.waitUntil(

        // See this 'v1' here? That's the version of your 
        // Service Worker cache. If you ever need to add 
        // new dependencies in the future, you'll have to 
        // use the &quot;delete&quot; functionality (more on that 
        // down below) and make this a 'v2' 
        // (or whatever you wish to call it.)

        caches.open('v1').then(function(cache) {
            return cache.addAll([
                // These are the files we want to cache so 
                // we can access offline! For your project 
                // you'll need to add your own. You can 
                // include any file you wish here.
                'index.html',
                'page_script.js',
                'style.css',
                'index.html',
                '/images/set1.jpg',
                '/images/set2.jpg',
                '/images/set3.jpg'
            ]);
        });
    );
    });


    // This is where the really cool stuff happens. We make use 
    // of the Fetch API in order to first check the cached 
    // resources, then if those don't exist, we check the 
    // server, if we are online. Essentially, this is great for 
    // both offline mode as well as from a site speed 
    // standpoint!

    this.addEventListener('fetch', function(event) {
    // Full documentation for respondWith is available on 
    // MDN (http://mzl.la/1SKtV92), but basically with this
    // you are able to customize the response from the 
    // request you initially get by the browser.

    event.respondWith(
        caches.open('v1').then(function(cache) {
         // caches.open look familiar? It should! We just used 
        // it in the code above! Here we are finding a match 
        // for the event.request in our cached v1 storage (in 
        // the browser). 
        //

            return cache.match(event.request).then(function(response) {
            // If we find a match for the request in the cache 
            // storage, that means our service worker will serve 
            // that file right up from the browser itself rather 
            // than going alllll the way to the server to get it! NICE!!!

            // However, if the resource isn't found, then it 
            // WILL go ALLLL the way to the server to grab it, 
            // or if it's in offline mode, will break and not 
            // show the file. Bummer!
            
                return response || fetch(event.request).then(function(response) {
                    cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
     );
    });

    // An event listener for the 'activate' functionality that
    // goes along with Service Worker registration. 

    this.addEventListener('activate', function activator(event) {
        console.log('activate!');

        // Here we see another wait until....
        event.waitUntil(

        // I won't go too much into detail here because 
        // there's a lot of stuff you can look up yourself 
        // (filter() and map() being two of them), but 
        // basically this function is in case there's 
        // previously cached content, then we get rid of 
        // it and populate it with the newest cached 
        // content. This is only if you need them to 
        // install a v2, v3, v4, etc... In a nutshell it 
        // wipes out their previous cache and replaces it 
        // with the new version. 
        
        caches.keys().then(function(keys) {
            return Promise.all(keys
                .filter(function(key) {
                    return key.indexOf('v1') !== 0;
                })
                .map(function(key) {
                    return caches.delete(key);
                })
            );
        })
      );
    });
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;PHEW. That was a lot. More comments than anything though, which is good! What did we just do? In a nutshell we:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Wrote some arbitrary JS that shows we can cache files (alert code)&lt;/li&gt;
  &lt;li&gt;Registered our first service worker in the browser with service_worker.js&lt;/li&gt;
  &lt;li&gt;Waited until proper installation of the service worker, then picked files to (pre)-cache using the Cache API&lt;/li&gt;
  &lt;li&gt;Then we took a look at the “fetch” event listener which coincides with the new Fetch API (which goes hand-in-hand with Service Workers API) and modified the response to check if we had any of the cached files in our cached storage.&lt;/li&gt;
  &lt;li&gt;Added a function to delete old caches if necessary (in case you’re updating the cache) and re-populate with new cache data. Nice.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now, if you decide to clone the repo I provided, run it once in the browser (on localhost) and then turn off your wifi, it should work and look the exact same, complete with click functionality!&lt;/p&gt;

&lt;p&gt;That is a very simple and basic implementation of Service Workers. Again, if you want to try this on your own, &lt;a href=&quot;https://github.com/pcanella/service-worker-sample&quot;&gt;clone this repo&lt;/a&gt; and fire up a simple http server (running on localhost!). If you’d like to know feel free to tweet me &lt;a href=&quot;http://twitter.com/pcanella&quot;&gt;@pcanella&lt;/a&gt;!&lt;/p&gt;

</description>
        <pubDate>Sat, 12 Dec 2015 00:00:00 -0800</pubDate>
        <link>http://pcanella.github.io/blog/2015/service-workers/</link>
        <guid isPermaLink="true">http://pcanella.github.io/blog/2015/service-workers/</guid>
        
        
      </item>
    
      <item>
        <title>The Vimeo API; Or: Why postMessage rocks!</title>
        <description>&lt;p&gt;I’m going to try to keep this post short and sweet; because:
	A) It’s a quick overview
	B) Nobody reads the “fluff” of coding articles (because we’re usually looking for answers!)&lt;/p&gt;

&lt;p&gt;Anyway, this post is to highlight the &lt;a href=&quot;https://developer.vimeo.com/player/js-api&quot;&gt;Vimeo JS API&lt;/a&gt;, it’s optional &lt;a href=&quot;https://github.com/vimeo/player-api/tree/master/javascript&quot;&gt;Froogaloop helper library&lt;/a&gt; (which I actually did NOT use) and creating a quick wrapper dedicated to Vimeo’s basic API functionality.&lt;/p&gt;

&lt;p&gt;For this project, we needed to use both the YouTube and Vimeo APIs to take control of their iframes. The weird thing is, both of these companies decided to implement their API quite differently.&lt;/p&gt;

&lt;p&gt;If you’re debating whether or not to use Vimeo or YouTube, I would actually suggest Vimeo, only because their API is a lot more straightforward (in my opinion) and it’s easier to get up and running with it. YouTube’s iframe API is sort of clunky and you have to hack a bit to get it working how you want. You also MUST include their JS, which is actually really irritating if you want multiple instances.&lt;/p&gt;

&lt;p&gt;ANYWAY, let’s get on with it.&lt;/p&gt;

&lt;p&gt;Now, Vimeo’s iframe API revolves around the really cool (and fairly recent) postMessage API that allows us to send events to a 3rd party iframe where they have their own event listeners! A really cool (and secure) way to execute cross-domain requests. We can actually set this up quite easily with Vimeo’s API!&lt;/p&gt;

&lt;p&gt;First, you’ll want to make sure that your embedded url looks something like this:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;iframe id=&quot;iframe_video&quot; src=&quot;https://player.vimeo.com/video/&amp;lt;VIDEO_ID&amp;gt;?byline=0&amp;amp;portrait=0&amp;amp;title=0&amp;amp;autoplay=0&amp;amp;badge=0&amp;amp;api=1&amp;amp;player_id=iframe_video&quot;/&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;I have some fancy parameters here (which are optional &lt;a href=&quot;https://developer.vimeo.com/player/embedding#universal-parameters&quot;&gt;and can be found here&lt;/a&gt;), but the most important ones are &lt;strong&gt;api=1&lt;/strong&gt; (which enables the postMessage/JS API) and the &lt;strong&gt;player_id&lt;/strong&gt; (which says “ok, I’ll correspond with the iframe with ID of “iframe_video”)&lt;/p&gt;

&lt;p&gt;Let’s take a look at a quick code sample (as a full reference, here’s the &lt;a href=&quot;https://github.com/pcanella/pcanella.github.io/blob/master/_codesnippets/vimeo_wrapper.js&quot;&gt;wrapper I have created&lt;/a&gt;):&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;    post: function(action, value) {
    var data = {
        method: action
    },
    $player = document.getElementById('iframe_video');

    // Just as a check to make sure value exists
    if (value) {
        data.value = value;
    }
        var url = $player.src,
        message = JSON.stringify(data);
        $player.contentWindow.postMessage(message, url);
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Ok, so there’s a bit we should go over.&lt;/p&gt;

&lt;p&gt;params:&lt;/p&gt;

&lt;p&gt;-&lt;strong&gt;action&lt;/strong&gt; (required): the action you want Vimeo API to execute. &lt;a href=&quot;https://developer.vimeo.com/player/js-api#events&quot;&gt;Need a list? Here you go&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;-&lt;strong&gt;value&lt;/strong&gt; (optional depending on action): The value that is attributed to the action (for example, the action would be “seek” and the value would be a JSON object like:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;{
 'seconds:'192.622',
 &quot;percent&quot;:'0.527',
 &quot;duration&quot;:'365.507'
 }
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;(BTW this is totally taken from the API docs)&lt;/p&gt;

&lt;p&gt;Anyway, this is all fairly straight forward if you’ve used postMessage. Haven’t used postMessage? Check out &lt;a href=&quot;http://davidwalsh.name/demo/window-post-message.php&quot;&gt;David Walsh’s example&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Below is a quick demo of Vimeo’s postMessage API working in action :) (want to see the code behind it? &lt;a href=&quot;http://jsfiddle.net/rahurrty/3/&quot;&gt;Check out the jsFiddle&lt;/a&gt;)&lt;/p&gt;

&lt;div class=&quot;iframewrapper&quot;&gt;&lt;/div&gt;
&lt;p&gt;&lt;button class=&quot;play&quot;&gt;Play Video&lt;/button&gt;
&lt;button class=&quot;pause&quot;&gt;Pause Video&lt;/button&gt;&lt;/p&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
     var wrapper = document.querySelector('.iframewrapper');

 wrapper.innerHTML = '&lt;iframe class=&quot;test_video&quot; id=&quot;iframe_video2&quot; src=&quot;https://player.vimeo.com/video/113778752?byline=0&amp;portrait=0&amp;title=0&amp;autoplay=0&amp;badge=0&amp;api=1&amp;player_id=iframe_video2&quot; /&gt;';

window.addEventListener('load', function(){
    var play = document.querySelector('.play'),
     pause = document.querySelector('.pause'),
     $player = document.getElementById('iframe_video2');

 play.addEventListener('click', function () {
     // You don't HAVE to JSON.stringify the message itself, but sometimes postMessage is finicky with older browsers
     $player.contentWindow.postMessage({
         'method': 'play'
     }, $player.src);
 });

 pause.addEventListener('click', function () {
     $player.contentWindow.postMessage({
         'method': 'pause'
     }, $player.src);
 });
});
&lt;/script&gt;

</description>
        <pubDate>Wed, 07 Oct 2015 00:00:00 -0700</pubDate>
        <link>http://pcanella.github.io/blog/2015/test/</link>
        <guid isPermaLink="true">http://pcanella.github.io/blog/2015/test/</guid>
        
        
      </item>
    
  </channel>
</rss>