Web Development

<!DOCTYPE html>     <html lang="en-US" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5, minimum-scale=0.5"> <title>Web Development</title> <link rel="profile" href="https://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="https://www.webdigi.co.uk/blog/wp-content/themes/svbtle/style.css" /> <link rel="pingback" href="https://www.webdigi.co.uk/blog/xmlrpc.php" /> <link rel="shortcut icon" href="/favicon.ico" />  <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3659733-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <style>blockquote {border-color: #0099A1;}figure.logo, aside.alsoby li a:hover, aside.kudo.complete span.circle {background-color: #0099A1;}section.preview header#begin h2,ul#user_meta a:hover,nav.pagination span.next a,nav.pagination span.prev a {color: #0099A1;}ul#user_meta a:hover,nav.pagination span.next a,nav.pagination span.prev a {border-color: #0099A1;}::-moz-selection { background: #0099A1; color: #fff; text-shadow: none;}::selection { background: #0099A1; color: #fff; text-shadow: none;} </style> <link rel='dns-prefetch' href='//s.w.org' /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.webdigi.co.uk\/blog\/wp-includes\/js\/wp-emoji-release.min.js"}}; !function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wordpress-popular-posts-css' href='https://www.webdigi.co.uk/blog/wp-content/plugins/wordpress-popular-posts/style/wpp.css' type='text/css' media='all' /> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-includes/js/jquery/jquery.js'></script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-includes/js/jquery/jquery-migrate.min.js'></script> <link rel='https://api.w.org/' href='https://www.webdigi.co.uk/blog/wp-json/' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.webdigi.co.uk/blog/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.webdigi.co.uk/blog/wp-includes/wlwmanifest.xml" /> <script src="https://www.webdigi.co.uk/blog/wp-content/plugins/air-badge/swfobject.js" type="text/javascript"></script> <style type="text/css"> figure.logo a, aside#logo div a, aside.kudo.complete span.circle{background-image: url(https://www.webdigi.co.uk/blog/wp-content/uploads/2013/09/logo1.png);} </style><style type="text/css" id="syntaxhighlighteranchor"></style> </head> <body class="home blog"> <header id="sidebar"> <figure class="logo medium"> <a href="https://www.webdigi.co.uk/">Web Development</a> </figure> <h1><a href="https://www.webdigi.co.uk/">Web Development</a></h1> <h2><a href="https://www.webdigi.co.uk/blog/"></a></h2> <h3>Thoughts from London, UK</h3> <ul id="user_nav"> <div class="menu"><ul> <li class="page_item page-item-2"><a href="https://www.webdigi.co.uk/blog/about/">About</a></li> <li class="page_item page-item-392 page_item_has_children"><a href="https://www.webdigi.co.uk/blog/apps/">Apps</a></li> </ul></div> </ul> </header> <section id="river" role="main"> <div class="entry-meta"> </div> <header id="begin"> <time datetime="2024-11-23" id="top_time">November 23, 2024</time> </header> <article id="1324" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2020/tensor-flow-on-the-browser-with-pose-and-hand-tracking/" class="no-link" title="Permalink to Tensor Flow on the browser with Pose and Hand tracking" rel="bookmark">Tensor Flow on the browser with Pose and Hand tracking</a> </h2> <div class="entry-content"> <p>Machine learning and AI have come a long way over the last decade. We are able to run powerful machine learning algorithms right on the browser. Incredibly this even works on browsers of mobile devices like iPhones and Android devices. This can lead to interesting applications: Multi-factor authentication, Captcha systems, Login & many others.</p> <p>We have two great demos put together with Machine Learning libraries on the browser.</p> <p><strong>Hand tracking</strong></p> <div style="width: 323px" class="wp-caption alignnone"><a href="https://www.webdigi.co.uk/demos/login-with-the-vulcan-handsalute"><img class="size-medium" src="https://www.webdigi.co.uk/demos/32.png" width="313" height="367" /></a><p class="wp-caption-text">Vulcan hand salute to login</p></div> <p><strong>Pose Tracking</strong></p> <p><a href="https://www.webdigi.co.uk/demos/pose-detection-and-matching"><img class="alignnone wp-image-1332 size-full" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2020/07/PoseNet-1.png" alt="" width="600" height="400" /></a></p> <p>Once you click on any of the two pictures, you will be taken to the demo. Please try them out and let us know what you think.</p> </div> <aside class="kudo kudoable" id="1324"> <a href="https://www.webdigi.co.uk/blog/2020/tensor-flow-on-the-browser-with-pose-and-hand-tracking/#comments" class="counter"> <span class="num">0</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=Tensor%20Flow%20on%20the%20browser%20with%20Pose%20and%20Hand%20tracking&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=Tensor%20Flow%20on%20the%20browser%20with%20Pose%20and%20Hand%20tracking&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="1287" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2017/aws-instance-automated-ami-creation-deletion-system/" class="no-link" title="Permalink to AWS Instance Automated AMI Creation & Deletion System" rel="bookmark">AWS Instance Automated AMI Creation & Deletion System</a> </h2> <div class="entry-content"> <p>UPDATE: 14 JUN 2017 – In step 5 below, please do select 5 minutes timeout for the script. We did have a few issues for users who had a lot of instances taking over the standard 2 minutes for the script to run.</p> <p>Just a quick blog post to link our new Github script on <a href="https://github.com/webdigi/AWS-AMI-Automated-Creation-Deletion">automated AWS AMI management system</a>.</p> <p><strong>Motivation</strong></p> <p>Creating an AMI automatically snapshots all the associated EBS volumes for that instance. This makes instance recovery much more reliable and faster. A daily or weekly backup schedule is recommended for instances and to make sure you have a backup if ever needed. The system also removes the automatically created AMIs and any associated snapshots as per the settings.</p> <p><strong>Setup / Installation of the Lambda script (one time setup)</strong></p> <p>1) Setting up the Lambda script by opening the Lambda console<br /> <img class="aligncenter wp-image-1290" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-lambda-select-blank.png" width="600" height="254" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-lambda-select-blank.png 1195w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-lambda-select-blank-300x127.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-lambda-select-blank-768x325.png 768w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-lambda-select-blank-1024x434.png 1024w" sizes="(max-width: 600px) 100vw, 600px" /></p> <p>2) Select “CloudWatch Events – Schedule” and click Next<br /> <img class="aligncenter wp-image-1292" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/2-select-cloudwatch-events-lambda.png" width="600" height="366" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/2-select-cloudwatch-events-lambda.png 984w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/2-select-cloudwatch-events-lambda-300x183.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/2-select-cloudwatch-events-lambda-768x469.png 768w" sizes="(max-width: 600px) 100vw, 600px" />3) Select a schedule you like to setup. Ideally the script has to run every day<img class="aligncenter wp-image-1291" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-setup-schedule.png" width="600" height="392" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-setup-schedule.png 985w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-setup-schedule-300x196.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-setup-schedule-768x501.png 768w" sizes="(max-width: 600px) 100vw, 600px" />4) Paste the script for createAMI.js (See github link above)</p> <p><img class="aligncenter wp-image-1288" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/4-setup-script.png" width="600" height="528" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/4-setup-script.png 988w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/4-setup-script-300x264.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/4-setup-script-768x676.png 768w" sizes="(max-width: 600px) 100vw, 600px" /></p> <p>5) Create a new role and paste the roles/roles.json (See github link above) also increase timeout.</p> <p><img class="aligncenter wp-image-1289" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/5-setup-role-next.png" width="600" height="574" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/5-setup-role-next.png 985w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/5-setup-role-next-300x287.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/5-setup-role-next-768x734.png 768w" sizes="(max-width: 600px) 100vw, 600px" /></p> <p>6) Save this and follow step above again now using deleteAMI.js (See github link above).</p> <p><strong>Setting the tags for EC2 instances (repeat for each instance)</strong></p> <p>1) Login to your AWS console and open the EC2 section. Then select the instance<img class="aligncenter size-full wp-image-1296" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-aws-ec2-console.png" alt="" width="1071" height="312" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-aws-ec2-console.png 1071w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-aws-ec2-console-300x87.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-aws-ec2-console-768x224.png 768w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/1-aws-ec2-console-1024x298.png 1024w" sizes="(max-width: 1071px) 100vw, 1071px" /></p> <p>2) Select the add or edit tags as per settings</p> <p><img class="aligncenter size-full wp-image-1295" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/2-edit-tags.png" alt="" width="441" height="348" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/2-edit-tags.png 441w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/2-edit-tags-300x237.png 300w" sizes="(max-width: 441px) 100vw, 441px" /></p> <p>3) Set the three tags with the following Keys & Value a) Key: AutoDigiBackup with Value: yes. This marks the instances that need to be backed up. b) Key: AutoDigiBackupRetentionDays with Value: from 1 to as many days as you want the backup to be stored. c) Key: AutoDigiBackupSchedule with Value: * (for every day) or a mix of number from 0 (Saturday), 1 (Monday) and all the way to 6 (Sunday). You can set value to say 012 which means run on Saturday, Monday and Tuesday. You can set just 6 to run only on Sunday.</p> <p><img class="aligncenter size-full wp-image-1293" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-a-5dayRetension-1234DaysRun.png" alt="" width="651" height="465" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-a-5dayRetension-1234DaysRun.png 651w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-a-5dayRetension-1234DaysRun-300x214.png 300w" sizes="(max-width: 651px) 100vw, 651px" /></p> <p>Example below is set to create the AMI every day<br /> <img class="aligncenter size-full wp-image-1294" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-b-5dayRetention-Everyday.png" alt="" width="652" height="458" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-b-5dayRetention-Everyday.png 652w, https://www.webdigi.co.uk/blog/wp-content/uploads/2017/02/3-b-5dayRetention-Everyday-300x211.png 300w" sizes="(max-width: 652px) 100vw, 652px" /></p> <p>Save the settings that are approriate for this instance and then save the tags. Please repeat steps 1-3 for all instances that you like to be included.</p> </div> <aside class="kudo kudoable" id="1287"> <a href="https://www.webdigi.co.uk/blog/2017/aws-instance-automated-ami-creation-deletion-system/#comments" class="counter"> <span class="num">12</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=AWS%20Instance%20Automated%20AMI%20Creation%20%26%20Deletion%20System&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2017%2Faws-instance-automated-ami-creation-deletion-system%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2017%2Faws-instance-automated-ami-creation-deletion-system%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2017%2Faws-instance-automated-ami-creation-deletion-system%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=AWS%20Instance%20Automated%20AMI%20Creation%20%26%20Deletion%20System&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2017%2Faws-instance-automated-ami-creation-deletion-system%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2017%2Faws-instance-automated-ami-creation-deletion-system%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="1267" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2016/how-to-transfer-your-app-to-an-ios-simulator-on-another-machine-using-app-file-and-xcrun/" class="no-link" title="Permalink to How to transfer your App to an iOS simulator on another machine (using .app file and xcrun)" rel="bookmark">How to transfer your App to an iOS simulator on another machine (using .app file and xcrun)</a> </h2> <div class="entry-content"> <p>Here is another quick tip, we had to search around quite a bit to get this to work. I hope this helps someone in the future.</p> <p>There are quite a few ways to share apps with other people while you are developing the App. TestFlight is popular these days this is a huge improvement to the old method of sending .ipa files with provisioning files, etc.</p> <p>If another person wants to run the App you are developing on their Xcode Simulator, you will have to hand over the project files (including code) and get the other person to go through a complex build process. All of this can be avoided by using xcrun and sending over the .app file.</p> <p>Advantage of using xcrun and .app files:</p> <ul> <li>No build process on the person you are sending the app to</li> <li>You don’t have to handover any code files</li> </ul> <p>Here are the steps to get this to work.</p> <ol> <li>On Xcode (On Xcode 8 for this example), build and run the app on the simulator.</li> <li>Then open “Activity Monitor” and find the name of the App you are running. Not Xcode, the actual App you are building. If you double click on the App Name, you should get a popup with the tab “Open Files and Ports”. Once you are on the tab you should get a long path for example /Users/webdigi/Library/Developer/CoreSimulator/Devices/A334134-2343-234A-234C-ASD1234EA3/Webdigi.app</li> <li>The above is the location to the .app file that you need. Copy the .app file from that folder and send it across to the person who wants to run the app on their Simulator.</li> <li>Now the other person should place the .app file to a location like Desktop</li> <li>They have to then open Xcode and open a Simulator</li> <li>On the command line type this command<br /> > xcrun simctl install booted $LOCATION/FILENAME.app<br /> replace $LOCATION with the path and the FILENAME should be the name</li> <li>The App should appear on the Simulator, just click on the App to Launch it.</li> </ol> <p>That’s it!</p> </div> <aside class="kudo kudoable" id="1267"> <a href="https://www.webdigi.co.uk/blog/2016/how-to-transfer-your-app-to-an-ios-simulator-on-another-machine-using-app-file-and-xcrun/#comments" class="counter"> <span class="num">0</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=How%20to%20transfer%20your%20App%20to%20an%20iOS%20simulator%20on%20another%20machine%20%28using%20.app%20file%20and%20xcrun%29&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2016%2Fhow-to-transfer-your-app-to-an-ios-simulator-on-another-machine-using-app-file-and-xcrun%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2016%2Fhow-to-transfer-your-app-to-an-ios-simulator-on-another-machine-using-app-file-and-xcrun%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2016%2Fhow-to-transfer-your-app-to-an-ios-simulator-on-another-machine-using-app-file-and-xcrun%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=How%20to%20transfer%20your%20App%20to%20an%20iOS%20simulator%20on%20another%20machine%20%28using%20.app%20file%20and%20xcrun%29&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2016%2Fhow-to-transfer-your-app-to-an-ios-simulator-on-another-machine-using-app-file-and-xcrun%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2016%2Fhow-to-transfer-your-app-to-an-ios-simulator-on-another-machine-using-app-file-and-xcrun%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="1083" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2015/how-to-setup-your-own-private-secure-free-vpn-on-the-amazon-aws-cloud-in-10-minutes/" class="no-link" title="Permalink to How to setup your own private, secure, free* VPN on the Amazon AWS Cloud in 10 minutes" rel="bookmark">How to setup your own private, secure, free* VPN on the Amazon AWS Cloud in 10 minutes</a> </h2> <div class="entry-content"> <p>UPDATE: 1st May 2018, new L2TP system is used which is more reliable. YAML configuration is used going forward instead of JSON. You can read more about it on our webdigi github page.<br /> NOTICE: 2nd June 2017, we had comments from a few users that some new AWS accounts take a few hours before the account can be activated to use this service.<br /> UPDATE: 15 November 2016, use L2TP over IPSEC instead of PPTP for added security, macOS Sierra support.<br /> UPDATE: 19 September 2016, Added the new AWS Mumbai region also.</p> <p>So, we all know the benefits of using a VPN like privacy, anonymity, unblocking websites, security, overcoming geographical restrictions and so on. However, it has always been hard to trust a VPN provider who could potentially log and intercept your internet traffic! Launching a private VPN server will give us the best of what a VPN truly offers. This guide will walk you through all the steps to running your own VPN server in about 10 minutes.</p> <p><img class="aligncenter wp-image-1107 size-full" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/AWS-VPN-Webdigi.png" alt="AWS-VPN-Webdigi" /></p> <h1>Advantages of a Private VPN Server</h1> <p><strong>Simple</strong>: Non-techies should also be able to follow this guide easily.<br /> <strong>Quick</strong>: 10 minutes is all it takes to follow this guide and create a private VPN server.<br /> <strong>Private</strong>: Dedicated VPN server for your use only.<br /> <strong>Secure</strong>: Encrypted & password enabled VPN server with no logs.<br /> <strong>On demand</strong>: You can start / stop the VPN server as required.<br /> <strong>Global</strong>: One or more VPN servers in 14 worldwide regions (including London, US, Tokyo, Singapore, Seoul, Canada).<br /> <strong>Device support</strong>: Supports PPTP and L2TP with IPSEC which means you can use the VPN server on your Android, iPhone, iPad, PC, MAC, and even most routers (to support Apple TV, Chromecast).<br /> <strong>Open source</strong>: Review / contribute to this project <a href="https://github.com/webdigi/AWS-VPN-Server-Setup" target="_blank" rel="noopener noreferrer">https://github.com/webdigi/AWS-VPN-Server-Setup</a><br /> <strong>Free</strong>: New Amazon AWS customers have a free tier server for the first year.</p> <h1>Creating your Private VPN Server</h1> <p><center><iframe src="https://www.youtube.com/embed/fBBERp5CUgo" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></center>1. Setup a free Amazon (AWS) cloud account.<br /> Visit <a href="http://aws.amazon.com/free/" target="_blank" rel="noopener noreferrer">http://aws.amazon.com/free/</a> and complete the signup. If you already have an Amazon AWS account then please login and follow on.</p> <p>2. Select a region for your VPN server.<br /> The VPN server can be in the following locations – North Virginia, Oregon, California, Ireland, Frankfurt, Singapore, Tokyo, Sydney, São Paulo. All your traffic will flow through the region that your VPN server is hosted. The selected region will appear in bold next to your name on the top header bar.</p> <p><img class="aligncenter size-full wp-image-1154" src="/blog/wp-content/uploads/2015/03/AWS-Region.png" alt="AWS-Region" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/AWS-Region.png 512w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/AWS-Region-300x236.png 300w" sizes="(max-width: 512px) 100vw, 512px" /></p> <p>3. Open CloudFormation in the Amazon AWS control panel.<br /> You can follow this <a href="https://console.aws.amazon.com/cloudformation/home">link</a> or click on the cloud formation link from the AWS page.</p> <p><img class="aligncenter size-full wp-image-1158" src="/blog/wp-content/uploads/2015/03/Cloud-Formation.png" alt="Cloud-Formation" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/Cloud-Formation.png 661w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/Cloud-Formation-300x193.png 300w" sizes="(max-width: 661px) 100vw, 661px" /></p> <p>4. Start creating a stack with CloudFormation. Click on “Create Stack” button on top of the page.</p> <p><img class="aligncenter size-full wp-image-1161" src="/blog/wp-content/uploads/2015/03/CloudFormation-CreateStack.png" alt="CloudFormation-CreateStack" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateStack.png 555w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateStack-300x205.png 300w" sizes="(max-width: 555px) 100vw, 555px" /></p> <p> </p> <p>5. Setting up the template for the stack<br /> Enter a stack Name say MyVPN (you use what you like). Then under Template, Source, select “Specify an Amazon S3 template URL” and paste in this URL <strong>https://s3.amazonaws.com/webdigi/VPN/Unified-Cloud-Formation.yaml</strong> and then click Next.</p> <p><img class="aligncenter size-full wp-image-1163" src="/blog/wp-content/uploads/2015/03/CloudFormation-SelectTemplate.png" alt="CloudFormation-SelectTemplate" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-SelectTemplate.png 1063w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-SelectTemplate-300x181.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-SelectTemplate-1024x617.png 1024w" sizes="(max-width: 1063px) 100vw, 1063px" /></p> <p>6. Setup VPN access details in the Specify Parameters page<br /> Speed: Select Standard.VPN-Free and this should do for most use cases. We have also added faster server options if you ever require VPN with multiple simultaneous video streams and so on.<br /> Username: VPN username for your VPN server.<br /> VPNPassword: VPN password for your VPN server.<br /> VPNPhrase: VPN passphrase the L2TP – IPSEC connections on your VPN server.<br /> <img class="aligncenter size-full wp-image-1166" src="/blog/wp-content/uploads/2015/03/CloudFormation-SpecifyParameters.png" alt="CloudFormation-SpecifyParameters" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-SpecifyParameters.png 1074w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-SpecifyParameters-300x144.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-SpecifyParameters-1024x491.png 1024w" sizes="(max-width: 1074px) 100vw, 1074px" /></p> <p>7. You will then be taken to the Options section and you can click Next without having to fill anything on this page.</p> <p><img class="aligncenter size-full wp-image-1169" src="/blog/wp-content/uploads/2015/03/CloudFormation-Options.png" alt="CloudFormation-Options" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Options.png 1046w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Options-300x119.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Options-1024x406.png 1024w" sizes="(max-width: 1046px) 100vw, 1046px" /></p> <p>Finally, you will see a review page as in the screenshot below. Just click on Create and the VPN server will be created in a few minutes.<br /> <img class="aligncenter size-full wp-image-1171" src="/blog/wp-content/uploads/2015/03/CloudFormation-Review.png" alt="CloudFormation-Review" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Review.png 1062w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Review-300x224.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Review-1024x764.png 1024w" sizes="(max-width: 1062px) 100vw, 1062px" /></p> <p>8. Monitoring the VPN server creation</p> <p>You will see a page which shows that the status is Create in progress as below.</p> <p><img class="aligncenter size-full wp-image-1174" src="/blog/wp-content/uploads/2015/03/CloudFormation-CreateInProgress.png" alt="CloudFormation-CreateInProgress" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateInProgress.png 1240w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateInProgress-300x71.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateInProgress-1024x244.png 1024w" sizes="(max-width: 1240px) 100vw, 1240px" /></p> <p>Within about 2 minutes you should see that the stack create in progress is complete as below.</p> <p><img class="aligncenter size-full wp-image-1175" src="/blog/wp-content/uploads/2015/03/CloudFormation-CreateComplete.png" alt="CloudFormation-CreateComplete" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateComplete.png 1240w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateComplete-300x110.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-CreateComplete-1024x377.png 1024w" sizes="(max-width: 1240px) 100vw, 1240px" /></p> <p>9. Obtain the private VPN server IP address</p> <p>Once the stack status shows as CREATE_COMPLETE you can then click on the Outputs tab.</p> <p><img class="aligncenter size-full wp-image-1177" src="/blog/wp-content/uploads/2015/03/CloudFormation-OutputsTab.png" alt="CloudFormation-OutputsTab" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-OutputsTab.png 1236w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-OutputsTab-300x86.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-OutputsTab-1024x295.png 1024w" sizes="(max-width: 1236px) 100vw, 1236px" /></p> <p>Now in the outputs tab you can see the server IP address as highlighted below.</p> <p><img class="aligncenter size-full wp-image-1178" src="/blog/wp-content/uploads/2015/03/CloudFormation-Outputs.png" alt="CloudFormation-Outputs" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Outputs.png 1238w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Outputs-300x84.png 300w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-Outputs-1024x285.png 1024w" sizes="(max-width: 1238px) 100vw, 1238px" /></p> <p>Awesome, you should now have your private VPN server running in the IP address shown in the outputs tab. Please note that the IP address is unique for your server and you need it to connect your devices. <strong>Now your VPN server is ready</strong> and let us connect to it.</p> <h1>Connecting to your private VPN server</h1> <p>Each device has its own configuration to connect to a VPN server. We have added a how to for a few popular devices below. Please note that your private VPN server <strong>supports both PPTP and L2TP</strong> with IPSEC. This means that your VPN server supports most devices out there including older routers. You can connect to your VPN server with either PPTP or L2TP as supported by your device.</p> <p>The parameters for your VPN connection are<br /> <strong>Server Address</strong>: The IP address from step 9 and this is unique for your VPN server.<br /> <strong>VPN Username & Password</strong>: From step 6 above. Same username & password for PPTP / L2TP VPN.<br /> <strong>VPN Passphrase</strong>: You set this up on step 6 above and only have to be used with an L2TP connection.</p> <p>Examples below use PPTP but you can also find out how to setup L2TP with IPSEC on various websites.</p> <p>1. Setting up VPN on an Android 5.0<br /> <img class="aligncenter size-full wp-image-1211" src="/blog/wp-content/uploads/2015/03/Android-VPN-Step1.png" alt="Android-VPN-Step1" /><br /> <img class="aligncenter size-full wp-image-1212" src="/blog/wp-content/uploads/2015/03/Android-VPN-Step2.png" alt="Android-VPN-Step2" /><br /> <img class="aligncenter size-full wp-image-1213" src="/blog/wp-content/uploads/2015/03/Android-VPN-Step3.png" alt="Android-VPN-Step3" /><br /> <img class="aligncenter size-full wp-image-1214" src="/blog/wp-content/uploads/2015/03/Android-VPN-Step4.png" alt="Android-VPN-Step4" /><br /> <img class="aligncenter size-full wp-image-1215" src="/blog/wp-content/uploads/2015/03/Android-VPN-Step5.png" alt="Android-VPN-Step5" /></p> <p>2. Setting up VPN on a MAC with the PPTP connection.<br /> <strong>UPDATE Nov 2016: PPTP is not supported on macOS Sierra so follow point 3 using L2TP over IPSEC (below).<br /> </strong><br /> First open System Preferences, then Network and follow the screenshots below.<br /> <img class="aligncenter size-full wp-image-1202" src="/blog/wp-content/uploads/2015/03/MAC-VPN-Step1.png" alt="MAC-VPN-Step1" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step1.png 664w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step1-300x252.png 300w" sizes="(max-width: 664px) 100vw, 664px" /><br /> <img class="aligncenter size-full wp-image-1203" src="/blog/wp-content/uploads/2015/03/MAC-VPN-Step2.png" alt="MAC-VPN-Step2" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step2.png 665w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step2-300x252.png 300w" sizes="(max-width: 665px) 100vw, 665px" /><br /> <img class="aligncenter size-full wp-image-1204" src="/blog/wp-content/uploads/2015/03/MAC-VPN-Step3.png" alt="MAC-VPN-Step3" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step3.png 663w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step3-300x253.png 300w" sizes="(max-width: 663px) 100vw, 663px" /><br /> <img class="aligncenter size-full wp-image-1205" src="/blog/wp-content/uploads/2015/03/MAC-VPN-Step4.png" alt="MAC-VPN-Step4" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step4.png 665w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step4-300x253.png 300w" sizes="(max-width: 665px) 100vw, 665px" /><br /> <img class="aligncenter size-full wp-image-1206" src="/blog/wp-content/uploads/2015/03/MAC-VPN-Step5.png" alt="MAC-VPN-Step5" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step5.png 667w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step5-300x252.png 300w" sizes="(max-width: 667px) 100vw, 667px" /><br /> <img class="aligncenter size-full wp-image-1207" src="/blog/wp-content/uploads/2015/03/MAC-VPN-Step6.png" alt="MAC-VPN-Step6" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step6.png 663w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step6-300x253.png 300w" sizes="(max-width: 663px) 100vw, 663px" /><br /> <img class="aligncenter size-full wp-image-1208" src="/blog/wp-content/uploads/2015/03/MAC-VPN-Step7.png" alt="MAC-VPN-Step7" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step7.png 666w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/MAC-VPN-Step7-300x253.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></p> <p>3. Setting up VPN on a Mac with L2TP over IPSec<br /> <strong>UPDATE Nov 2016: L2TP is recommended now. Follow instructions as in PPTP after you setup up to point 8 below.</strong></p> <p><img class="aligncenter size-full wp-image-1275" src="/blog/wp-content/uploads/2015/03/L2TP-1.png" alt="l2tp-1" width="666" height="559" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/L2TP-1.png 666w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/L2TP-1-300x252.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></p> <p><img class="aligncenter size-full wp-image-1276" src="/blog/wp-content/uploads/2015/03/L2TP-2.png" alt="l2tp-2" width="666" height="564" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/L2TP-2.png 666w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/L2TP-2-300x254.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></p> <p><img class="aligncenter size-full wp-image-1277" src="/blog/wp-content/uploads/2015/03/L2TP-3.png" alt="l2tp-3" width="666" height="558" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/L2TP-3.png 666w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/L2TP-3-300x251.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></p> <p>Follow other steps as outlined in the above section on PPTP to finish the setup.</p> <p>4. Setting up VPN on Asus RT-AC68U router</p> <p><img class="aligncenter size-full wp-image-1226" src="/blog/wp-content/uploads/2015/03/ASUS-RT-AC68U-VPN.png" alt="ASUS-RT-AC68U-VPN" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/ASUS-RT-AC68U-VPN.png 1009w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/ASUS-RT-AC68U-VPN-300x245.png 300w" sizes="(max-width: 1009px) 100vw, 1009px" /></p> <p>5. For all other devices please search for Setting up PPTP VPN on my iphone and so on. You can also setup an L2TP IPSEC VPN which is more secure but might not be supported on all devices.</p> <h1>Tips / Suggestions</h1> <p>1. If you want to delete your VPN server then just open CloudFormation on AWS. Make sure you select the same region that you created your VPN server. Then just click on Delete Stack button and your private VPN server will be removed.</p> <p><img class="aligncenter size-full wp-image-1186" src="/blog/wp-content/uploads/2015/03/CloudFormation-DeleteStack.png" alt="CloudFormation-DeleteStack" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-DeleteStack.png 988w, https://www.webdigi.co.uk/blog/wp-content/uploads/2015/03/CloudFormation-DeleteStack-300x124.png 300w" sizes="(max-width: 988px) 100vw, 988px" /></p> <p>2. You can have multiple VPN servers all over the world. You just have to repeat the setup steps in this guide by selecting different regions. Please note that AWS free tier gives you a total of 750 hours a month free. You can also delete and create VPN servers as frequently as you want.</p> <p>3. Setting up a VPN connection on your router will allow all devices on its network to use the VPN server. This could be beneficial for use with AppleTV / Chromecast and any device that does not support a VPN.</p> <p>4. You can test if your VPN connection is active by just searching for “what is my ip address” on your favourite search engine. The IP address reported will be that of your private VPN server if everything is your connection is enabled. If your VPN connection is not enabled or if the VPN server settings are not complete then it will report your ISP’s IP address.</p> <p>5. We love your feedback and let us know if you face any issues in the comments section below or on our <a href="https://github.com/webdigi/AWS-VPN-Server-Setup" target="_blank" rel="noopener noreferrer">github page for setting up your private VPN on AWS</a>.</p> </div> <aside class="kudo kudoable" id="1083"> <a href="https://www.webdigi.co.uk/blog/2015/how-to-setup-your-own-private-secure-free-vpn-on-the-amazon-aws-cloud-in-10-minutes/#comments" class="counter"> <span class="num">52</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=How%20to%20setup%20your%20own%20private%2C%20secure%2C%20free%2A%20VPN%20on%20the%20Amazon%20AWS%20Cloud%20in%2010%20minutes&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2015%2Fhow-to-setup-your-own-private-secure-free-vpn-on-the-amazon-aws-cloud-in-10-minutes%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2015%2Fhow-to-setup-your-own-private-secure-free-vpn-on-the-amazon-aws-cloud-in-10-minutes%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2015%2Fhow-to-setup-your-own-private-secure-free-vpn-on-the-amazon-aws-cloud-in-10-minutes%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=How%20to%20setup%20your%20own%20private%2C%20secure%2C%20free%2A%20VPN%20on%20the%20Amazon%20AWS%20Cloud%20in%2010%20minutes&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2015%2Fhow-to-setup-your-own-private-secure-free-vpn-on-the-amazon-aws-cloud-in-10-minutes%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2015%2Fhow-to-setup-your-own-private-secure-free-vpn-on-the-amazon-aws-cloud-in-10-minutes%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="1057" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2014/how-to-fix-heartbleed-vulnerability-on-apache-server/" class="no-link" title="Permalink to How to fix Heartbleed Vulnerability on LAMP Server (Apache PHP) CVE-2014-0160" rel="bookmark">How to fix Heartbleed Vulnerability on LAMP Server (Apache PHP) CVE-2014-0160</a> </h2> <div class="entry-content"> <p>OpenSSL which is used by several million websites was found vulnerable to the heartbleed vulnerability. Thankfully it is quick and easy to fix following these instructions.</p> <p><a href="/blog/wp-content/uploads/2014/04/heartbleed-1.png"><img class="size-medium wp-image-1058 aligncenter" title="heartbleed (1)" src="/blog/wp-content/uploads/2014/04/heartbleed-1-247x300.png" alt="" width="247" height="300" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2014/04/heartbleed-1-247x300.png 247w, https://www.webdigi.co.uk/blog/wp-content/uploads/2014/04/heartbleed-1.png 341w" sizes="(max-width: 247px) 100vw, 247px" /></a></p> <p><strong>Why do I need to fix it?</strong></p> <p>When it is exploited it leads to the leak of memory contents from the server to the client. This means anything in the server memory (RAM) could be potentially sent to a person exploiting the bug. Here are examples of what is on your server memory:<br /> 1) The encryption keys themselves<br /> 2) User names and passwords used on the web<br /> 3) PHP Session IDs<br /> 4) Data being sent to other users</p> <p><strong>How can I test the vulnerability?</strong></p> <p>We used a python script to test the vulnerability on our servers. A single python file which sends the target server a carefully crafted heartbeat message and waits for the server to send back a lot of sensitive information. Alternatively you can use the SSL test tool on the ssllabs website.</p> <p><strong>How to fix on CentOS</strong></p> <pre class="brush: jscript; title: ; notranslate" title=""> >sudo yum update openssl >service httpd restart </pre> <p><strong>How to fix on Ubuntu</strong></p> <pre class="brush: jscript; title: ; notranslate" title=""> >sudo apt-get upgrade openssl >service apache2 restart </pre> <p><strong>Other things to consider</strong></p> <p>– Are there any other software statically linked to OpenSSL? Nginx? Ruby? PHP? You need to recompile or restart them<br /> – Replace any API tokens or passwords in use<br /> – You might have to create a new private key and CSR to get a new SSL certificate<br /> – Do you feel like your users might have been compromised? You will then need to ask them to change passwords</p> </div> <aside class="kudo kudoable" id="1057"> <a href="https://www.webdigi.co.uk/blog/2014/how-to-fix-heartbleed-vulnerability-on-apache-server/#comments" class="counter"> <span class="num">4</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=How%20to%20fix%20Heartbleed%20Vulnerability%20on%20LAMP%20Server%20%28Apache%20PHP%29%20CVE-2014-0160%20&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2014%2Fhow-to-fix-heartbleed-vulnerability-on-apache-server%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2014%2Fhow-to-fix-heartbleed-vulnerability-on-apache-server%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2014%2Fhow-to-fix-heartbleed-vulnerability-on-apache-server%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=How%20to%20fix%20Heartbleed%20Vulnerability%20on%20LAMP%20Server%20%28Apache%20PHP%29%20CVE-2014-0160%20&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2014%2Fhow-to-fix-heartbleed-vulnerability-on-apache-server%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2014%2Fhow-to-fix-heartbleed-vulnerability-on-apache-server%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="1031" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2013/takeaways-from-the-parse-developer-day-conference-2013/" class="no-link" title="Permalink to Takeaways from the Parse Developer Day Conference 2013" rel="bookmark">Takeaways from the Parse Developer Day Conference 2013</a> </h2> <div class="entry-content"> <p><a href="/blog/wp-content/uploads/2013/10/parse-2013.png"><img class="aligncenter size-full wp-image-1041" title="Parse-Conference-Zuck-2013" src="/blog/wp-content/uploads/2013/10/parse-2013.png" alt="" width="636" height="342" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2013/10/parse-2013.png 636w, https://www.webdigi.co.uk/blog/wp-content/uploads/2013/10/parse-2013-300x161.png 300w" sizes="(max-width: 636px) 100vw, 636px" /></a></p> <p>Parse is an app development platform for the cloud that held its first developer’s conference on September 2013 in San Francisco, California. Parse had recently been bought by Facebook, and so far promises to be a major contender in the app development arena.</p> <p>If you wanted to attend the conference but missed it, you can still get the key points and see some of the presentations. 23 people presented, most of them from Parse with one from Stripe and two from Microsoft.</p> <p><strong>5 New Parse Products Unveiled At Developer Day</strong></p> <p>The Parse/Facebook partnership was ready to show off 5 new Parse products designed to assist cloud app developers.</p> <ul> <li><strong>Parse Analytics</strong>: this category includes Push Analytics and the recently-released Custom Analytics. The former provides insight into user activities and app interactions, as well as passing API requests. The new Custom Analytics capability lets you set your own arbitrary events and dimensions to track any metrics you deem worthy.</li> </ul> <ul> <li><strong>The Unity Software Development Kit (SDK) Unity</strong>: is a powerful tool for game developers, helping them build intricate cross-platform games. This SDK lets developers use Parse for file and object storage, user management, rich querying, Facebook authentication, role-based access controls, and for accessing analytics data.</li> </ul> <ul> <li><strong>A New User Module</strong>: The Parse User Session Module gives developers a great solution for keeping Parse users logged in from page to page. It makes use of the traditional Parse.user methods, giving an unprecedented ability to manage user log in-and-out.</li> </ul> <ul> <li><strong>A New Image Module</strong>: The Parse Image Cloud Module is for easy manipulation of graphical images. This module includes a host of useful features like automatic generation of images to save bandwidth. For complete instructions on how to use this module, see the official Parse guide.</li> </ul> <ul> <li><strong>Background Jobs</strong>: This new feature is perfect for creating, automating, and managing long-running and recurring tasks. Once you create a job, you can set its start date, the parameters it takes, and how often to repeat it.</li> </ul> <p>These features are designed to let startups focus on what their founders started them up to do, without worrying about managing their data and wasting time on tedious tasks. In regards to Facebook, these new Parse tools make Facebook an even more desirable destination for app developers looking to integrate a social network into their apps. Overall, it turns Facebook into a more comprehensive suite of tools and resources.</p> <p><strong>If You Still Want To Feel What It Was Like</strong></p> <p>If you just aren’t content with getting the bare-bones summary of the conference, you can watch the 15 recorded sessions of keynote, introductory, and advanced talks given by the speakers. These videos will be posted on the Parse blog periodically over the next few months.</p> <p><a href="http://blog.parse.com/2013/09/17/parse-developer-day-video-series-keynote-and-developer-show-and-tell/">The first two videos are already up</a> on the Parse blog. You can now watch the keynote address, given by Ilya Sukhar, CEO of Parse, as well as the exciting Developer Show and Tell.</p> </div> <aside class="kudo kudoable" id="1031"> <a href="https://www.webdigi.co.uk/blog/2013/takeaways-from-the-parse-developer-day-conference-2013/#comments" class="counter"> <span class="num">1</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=Takeaways%20from%20the%20Parse%20Developer%20Day%20Conference%202013&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Ftakeaways-from-the-parse-developer-day-conference-2013%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Ftakeaways-from-the-parse-developer-day-conference-2013%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Ftakeaways-from-the-parse-developer-day-conference-2013%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=Takeaways%20from%20the%20Parse%20Developer%20Day%20Conference%202013&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Ftakeaways-from-the-parse-developer-day-conference-2013%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Ftakeaways-from-the-parse-developer-day-conference-2013%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="971" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2013/a-single-kill-switch-for-90-of-the-top-ten-websites/" class="no-link" title="Permalink to A single kill switch for 90% of the top ten websites" rel="bookmark">A single kill switch for 90% of the top ten websites</a> </h2> <div class="entry-content"> <p><a href="/blog/wp-content/uploads/2013/04/Domain_name_space.svg_.png" target="_blank"><img src="/blog/wp-content/uploads/2013/04/Domain_name_space.svg_.png" alt="DNS" title="Domain_name_space.svg" width="400" height="319" class="aligncenter size-full wp-image-977" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2013/04/Domain_name_space.svg_.png 400w, https://www.webdigi.co.uk/blog/wp-content/uploads/2013/04/Domain_name_space.svg_-300x239.png 300w" sizes="(max-width: 400px) 100vw, 400px" /></a></p> <p>There are hundreds of domain name registrars you can choose to register your website domain name with. EG: Gandi, Namecheap, Godaddy to name a few popular ones. However, we recently had a couple of clients who use markmonitor as their domain name registrar. Looking around on markmonitor website and searching through the whois records revealed something rather surprising. </p> <p><strong>All </strong>of <strong>Google, Gmail, Youtube, Blogger, Yahoo, Flickr, Microsoft, MSN, Bing, Baidu, Ebay and even Facebook </strong>use markmonitor as their domain registrar. Further whois queries shows that 9 out of the top 10 websites by traffic use markmonitor as their domain registrar. This was also the same case with websites of HSBC, Bank of America, UBS and pharmaceuticals like Pfizer, Novartis, Merck and so on. The list of popular domains registered by markmonitor goes on and on.</p> <p>To be clear, markmonitor do not have traffic flowing through them as all companies listed above run their own authoritative DNS servers.<br /> EG with <a href="http://whois.domaintools.com/google.com" title="Whois Google" target="_blank">Whois of Google.com</a> the name servers are ns3.google.com, ns2.google.com, ns1.google.com, ns4.google.com and all these servers are controlled by Google.</p> <p>In theory markmonitor could change nameserver records to another server and take over any of these websites. Potentially a rogue markmonitor employee or hackers could also change the nameserver records of these top websites on the internet. However, I would assume that most of these nameserver queries are cached by different ISPs for a long time and someone could jump in and fix the issue before it affects a lot of users.</p> <p>In summary, it is surprising that Facebook, Google, Microsoft, Yahoo, Ebay all use the same registrar. These sites and many more under markmonitor account for significant traffic on the internet. Potentially creating a single kill switch for bulk of the internets. Does anyone know of a suitable alternative to markmonitor? Is there a solid safeguard against external parties changing these nameserver records?</p> </div> <aside class="kudo kudoable" id="971"> <a href="https://www.webdigi.co.uk/blog/2013/a-single-kill-switch-for-90-of-the-top-ten-websites/#comments" class="counter"> <span class="num">1</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=A%20single%20kill%20switch%20for%2090%25%20of%20the%20top%20ten%20websites&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Fa-single-kill-switch-for-90-of-the-top-ten-websites%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Fa-single-kill-switch-for-90-of-the-top-ten-websites%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Fa-single-kill-switch-for-90-of-the-top-ten-websites%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=A%20single%20kill%20switch%20for%2090%25%20of%20the%20top%20ten%20websites&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Fa-single-kill-switch-for-90-of-the-top-ten-websites%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2013%2Fa-single-kill-switch-for-90-of-the-top-ten-websites%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="858" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/" class="no-link" title="Permalink to Using a mobile device to control a game on your browser" rel="bookmark">Using a mobile device to control a game on your browser</a> </h2> <div class="entry-content"> <p>Accelerometer support is available in Mobile Safari and all new android devices. This enables the browser to sense movement, speed and direction with Javascript on mobile & tablet devices. If we push the movement data from the mobile device instantly through a nodejs server to a browser, then we can control a game on the browser. This is exactly what we have put together in this <a title="HTML5 game with iOS accelerometer integration" href="https://www.webdigi.co.uk/fun/space/" target="_blank">fun little html5 demo</a>.</p> <p><a href="https://www.webdigi.co.uk/fun/space/" target="_blank"><img class="size-full wp-image-859" title="HTML5 iOS device controller game" src="/blog/wp-content/uploads/2012/03/game.png" alt="" width="513" height="234" srcset="https://www.webdigi.co.uk/blog/wp-content/uploads/2012/03/game.png 513w, https://www.webdigi.co.uk/blog/wp-content/uploads/2012/03/game-300x136.png 300w" sizes="(max-width: 513px) 100vw, 513px" /></a></p> <p>Try the game before you go through the components that make up this demo.</p> <p><strong>Android / iOS controller</strong></p> <p><a href="/blog/wp-content/uploads/2012/03/photo.png"><img class="size-full wp-image-873" title="iPhone controller" src="/blog/wp-content/uploads/2012/03/photo.png" alt="" width="256" height="296" /></a></p> <p>The user scans the QR code or visits the unique link created for them from the demo landing page to start the controller. The controller code reads accelerometer values and then passes the movement to the nodejs server.</p> <p>Key parts of the iOS device controller code</p> <pre class="brush: jscript; title: ; notranslate" title=""> //Detect if the browser supports DeviceMotionEvent if (window.DeviceMotionEvent != undefined) { //ondevicemotion is fired when iOS device detects motion window.ondevicemotion = function(e) { //ax is the movement on the x axis. //This motion is used to move the ship in the game ax = event.accelerationIncludingGravity.x * 5; ay = event.accelerationIncludingGravity.y * 5; //Status 0 is start, 1 is left, 2 is right, 3 is stay if(status == 0){ //initial condition status = 3; //stay socket.emit('spaceChange', {'ax': 3}); statusmsg = 'Waiting for movement'; } if(ax > 14 && status != 2){ //move right on device status = 2; socket.emit('spaceChange', {'ax': 2}); statusmsg = 'Moving ship right'; } if(ax < -14 && status != 1){ //move left on device status = 1; socket.emit('spaceChange', {'ax': 1}); statusmsg = 'Moving ship left'; } if(ax > -14 && ax < 14 && status != 3){ //device held steady status = 3; socket.emit('spaceChange', {'ax': 3}); statusmsg = 'Ship held steady'; } </pre> <p>The controller code detects movement from accelerometer and only pushes data to the nodejs server if there is a change in direction of the device. This reduces the data pushed from the phone to the server when compared to sending all the live accelerometer values to server. Finally, the value 14 in ax is set as a threshold to detect if the user is moving the device to the left or right.</p> <p><strong>Node.js server with SocketIO (Server side)</strong></p> <p>Node.js is a server-side JavaScript environment based on Google’s V8 Javascript engine. Programs are written in JavaScript, using event-driven, asynchronous I/O to minimize overhead and maximize scalability. Socket.IO sits on top of Node.js and makes it easy to deliver realtime data between almost every browser and the node server. Socket.IO code runs on the server and the client side. This makes Node.js and Socket.IO ideal candidates to be able push accelerometer values instantly from mobile safari to the desktop browser.</p> <p>Each visitor to the game landing page is assigned an unique random id that links the browser and the iOS safari instance. User loads the URL provided on their iOS device and then safari detects accelerometer motion, which is then pushed by socket.io on client side to the node server. The randomly generated id is used as a room for the user so that push from user device is only sent to a particular browser.</p> <p>Server side Socket.IO code</p> <pre class="brush: jscript; title: ; notranslate" title=""> //Start on connection io.sockets.on('connection', function (socket) { //Set room for user when connection is made socket.on('setChannel', function (data) { socket.join(data.channelName); }); //When iOS device moves send data to browser //Multiple browsers can be listening to same device socket.on('spaceChange', function (data) { socket.broadcast.to(data.channelName) .emit("spaceChanges",data); }); }); </pre> <p><strong>Browser game and client side Socket.IO</strong></p> <p>The browser game can be played with the keyboard arrows or with iOS device movement. The space invaders game itself behaves like a standard HTML5 game which uses HTML canvas. Thanks to Erop Balyshev for developing the well tested game in a couple of days. The html game code is commented and you should be able to understand the underlying code for the game quite easily. The socket communication and movement based on feedback from the iOS device was later plugged into the game code.</p> <p>Code below shows how data from server is handled on the browser.</p> <pre class="brush: jscript; title: ; notranslate" title=""> //iOS detection and corresponding action var lastkey = 37; var dataStart=0; socket.on('connect', function() { //if sockets gets disconnected then mention room again socket.emit('setChannel', {'channelName': ''}); }); socket.on('spaceChanges', function (data) { if(dataStart == 0){ //First movement data arrived document.getElementById('status').innerHTML = 'Receiving data from your iOS device'; dataStart = 1; } ax = data.ax; var posob=new Object(); if(ax == 2){ //move right lastkey = 39; posob.keyCode = lastkey; posob.type = 'keydown'; document.getElementById('status').innerHTML = 'iOS device tilted right'; } if(ax == 1){ //move left lastkey = 37; posob.keyCode = lastkey; posob.type = 'keydown'; document.getElementById('status').innerHTML = 'iOS device tilted left'; } if(ax == 3){ //hold ship in place posob.keyCode = lastkey; posob.type = 'keyup'; document.getElementById('status').innerHTML = 'iOS device held steady'; } //Send action received above keypressaction(posob); }); //Fire automatically once first data starts window.setInterval(function(){ if(dataStart == 1){ var posob=new Object(); posob.keyCode = 32; posob.type = 'keydown'; keypressaction(posob); posob.keyCode = 32; posob.type = 'keyup'; keypressaction(posob); } //Timer is correctly a shot ever 200ms. //Decrease 200 to lower for even faster firing! }, 200); </pre> <p><strong>Conclusions</strong></p> <p>– We are very impressed with the instant movement detection and control over the game.<br /> – You can also run multiple browsers on your desktop with the same id get parameter and have it all controlled with the same iOS controller.<br /> – Current space invaders game uses only X axis movement on the iOS device. However, all three dimension values are available on iOS safari ondevicemotion method. It is technically possible to do much more with the iOS device. Probably the ship can fire when user shakes the device?</p> <p>UPDATE: <a href="https://vimeo.com/48150517" target="_blank">Watch a presentation of the HTML5 space game by Roshan Abraham</a></p> <p>Enjoyed the demo? Looking forward to your feedback and ideas.</p> </div> <aside class="kudo kudoable" id="858"> <a href="https://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/#comments" class="counter"> <span class="num">27</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=Using%20a%20mobile%20device%20to%20control%20a%20game%20on%20your%20browser&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fusing-an-ios-device-to-control-a-game-on-your-browser%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fusing-an-ios-device-to-control-a-game-on-your-browser%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fusing-an-ios-device-to-control-a-game-on-your-browser%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=Using%20a%20mobile%20device%20to%20control%20a%20game%20on%20your%20browser&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fusing-an-ios-device-to-control-a-game-on-your-browser%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fusing-an-ios-device-to-control-a-game-on-your-browser%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="835" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2012/cool-new-stuff-in-php-5-4/" class="no-link" title="Permalink to Cool new stuff in PHP 5.4" rel="bookmark">Cool new stuff in PHP 5.4</a> </h2> <div class="entry-content"> <p>PHP 5.4 was released yesterday. It took nearly 2 years since the release of version 5.3 and has been a huge undertaking. Congratulations to the guys that made it happen. Let’s take a look at the features:</p> <p><strong>1) Speed<br /> </strong>PHP 5.4 is the fastest of all PHP versions. Benchmarks both Synthetic and real-life show a pretty impressive jump in performance. Drupal, WordPress, etc are faster by almost 10% while Zend Framework was faster by 21%. There is a lot of improvement on memory usage, performance (req/sec), etc. Andy Gutmans of Zend claimed the memory foot print is also lowered by upto 35 percent (that is huge!). Read more about the <a href="http://news.php.net/php.internals/57760">tests</a> here</p> <p><strong>2) Short echo tags<br /> </strong>Short echo tags will always work irrespective of the ini settings.</p> <pre class="brush: php; title: ; notranslate" title=""> <?= "Always works even if ini short tags are disabled" ?> </pre> <p><strong>3) Compact Array Syntax and Array Dereferencing</strong><br /> Both of these changes makes the code look much more cleaner and easier to read. Take a look at the examples below</p> <pre class="brush: php; title: ; notranslate" title=""> $a = [1, 2, 3]; //Same as array(1, 2, 3); //Dereferencing $a = "Zero One Two Three Four"; echo explode(" ", $a)[4]; // outputs Four //Function Array Dereferencing function movies() { return ['Mission Impossible', 'Transformers', 'Titanic']; } echo movies()[1]; //Outputs: Transformers </pre> <p><strong>4) How long did your script take to execute?<br /> </strong>Previously you set a start variable and store time in it. Then you write your code and compute the difference in the end. Like this</p> <pre class="brush: php; title: ; notranslate" title=""> $time_start = microtime(true); // Run a lot of your code $time_end = microtime(true); echo "Took:", $time_end - $time_start; //Time spent // Just one line at the end of your script with PHP5.4 echo "Took:", (microtime(true) - $_SERVER['REQUEST_TIME_FLOAT']); </pre> <p><strong>5) Built in Web Server (CLI)</strong><br /> Well, we’ve been strongly recommended not to use this on production as this is brand new and not intended to replace Apache/nginx !</p> <pre class="brush: powershell; title: ; notranslate" title=""> $ php -S localhost:8080 </pre> <p>The above shell command gets the web server running at port 8080 after setting the Document Root as the current working directory. It also serves static assets and supports URL routing.</p> <p><strong>6) Traits</strong><br /> Traits is “compiler assisted copy-paste” literally, it is also known as “Horizontal Reuse” and similar to functionality of “Multiple Inheritance”. This implementation adds 4 new keywords: trait, use, as and insteadof. As and insteadof are used to resolve conflicts when you use multiple traits.</p> <pre class="brush: php; title: ; notranslate" title=""> trait sayHello { //First Trait public function hello() { echo "Hello"; } } trait sayWorld { //Second Trait public function world() { echo "World"; } } //Then we define the class class sayHelloWorld { use sayHello, sayWorld; //use brings in both Hello and World functions } $say = new sayHelloWorld(); $say->hello(); //Hello $say->world(); //World </pre> <p><strong>Conclusion</strong><br /> No concrete plans for PHP 6 or other versions announced yet, However, there are lots of cool stuff here to get excited about. With PHP 5.4, the new Default Page Charset is now utf-8. There are other features like a callable type hint, support for $this in anonymous functions.With closures, cleaner array syntax, PHP is now looking more like Javascript.</p> </div> <aside class="kudo kudoable" id="835"> <a href="https://www.webdigi.co.uk/blog/2012/cool-new-stuff-in-php-5-4/#comments" class="counter"> <span class="num">2</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=Cool%20new%20stuff%20in%20PHP%205.4&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fcool-new-stuff-in-php-5-4%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fcool-new-stuff-in-php-5-4%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fcool-new-stuff-in-php-5-4%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=Cool%20new%20stuff%20in%20PHP%205.4&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fcool-new-stuff-in-php-5-4%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2012%2Fcool-new-stuff-in-php-5-4%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <article id="800" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2011/build-better-facebook-pages-with-iframe-tabs/" class="no-link" title="Permalink to Build better facebook pages with iframe tabs" rel="bookmark">Build better facebook pages with iframe tabs</a> </h2> <div class="entry-content"> <p>There are two major changes announced for Facebook pages. The most prominent is the change to the the layout and fan page design (forced update due on March 10th 2011). The second is that Facebook pages now support iframes. This means that developers are free to use popular, simple and standards-based web programming model (HTML, JavaScript, and CSS) compared to highly restricted FBJS and FBML. There are lots of reasons to be excited about this. Here are a few of our best:</p> <p><strong>1) Google maps on pages</strong></p> <p>You can now have fully functional Javascript based maps within Facebook pages. This makes it easier to display business location, location of stores, hotels, etc. To make things even more flexible, mapping services will now have access to your location if you use newer browsers.</p> <p><a href="https://www.facebook.com/webdigi?sk=app_163685236987027"><img class=" " title="Google maps with Location" src="/fbframeblog/blogimages/LocationMaps.png" alt="Google maps with location on Facebook iframe tabs" width="450" height="372" /></a></p> <p>To see this functionality in action, go to the <a href="https://www.facebook.com/webdigi?sk=app_163685236987027">maps page</a>. You need to be logged in to Facebook to view the page. Please note that your location is not stored by us and used just to display a map for the demo purposes.</p> <p><strong>2) Add youtube videos and other music players</strong></p> <p><a href="https://www.facebook.com/webdigi?sk=app_178775035499585&app_data=video"><img class=" " title="Embed Youtube Videos on fan pages" src="/fbframeblog/blogimages/Youtube.png" alt="Embed Youtube Videos on fan pages" width="450" height="331" /></a></p> <p>The iframe technique also make it much easier to embed youtube videos and other flash/HTML5 multimedia. This gives users access to related videos and more added functionality. This also includes the ability to view the video in full screen. Click on the image above to go to the <a href="https://www.facebook.com/webdigi?sk=app_178775035499585&app_data=video">video demo page</a>.</p> <p><strong>3) Embed slides and PDFs</strong></p> <div style="width: 460px" class="wp-caption aligncenter"><a href="https://www.facebook.com/webdigi?sk=app_178775035499585&app_data=docs"><img class=" " title="Embed external docs to your fan page" src="/fbframeblog/blogimages/Docs.png" alt="Embed external docs to your fan page" width="450" height="322" /></a><p class="wp-caption-text">Embed external docs to your fan page</p></div> <p>Like how a video is embedded, you can now embed slides, PDF, other documents using Slideshare or related apps. Here is a direct link to the <a href="https://www.facebook.com/webdigi?sk=app_178775035499585&app_data=docs">docs demo page</a>.</p> <p><strong>4) Create amazing landing pages</strong></p> <p>Use any Javascript library of your choice: jQuery, ExtJS, mootools, etc. You can even use flash or HTML5 to create great landing pages. In short, the only limitation on design, layout and functionality is now your imagination and the restricted width of around 520px.</p> <p><strong>5) Create your own top navigation menu</strong></p> <div style="width: 460px" class="wp-caption aligncenter"><img title="Create your own top level menu" src="/fbframeblog/blogimages/navigationalmenus.png" alt="Create your own top level menu" width="450" height="152" /><p class="wp-caption-text">Create your own top level menu</p></div> <p>The previous Facebook page design had top level navigation tabs which have now moved to the left side of the page. This does free up some space and lets the developer create their own top level navigation tab. Including multi level level navigation.</p> <p><strong>6) Add a like button within the page</strong></p> <div style="width: 470px" class="wp-caption aligncenter"><a href="https://www.facebook.com/webdigi?sk=app_178775035499585&app_data=code"><img class=" " title="No longer need a click above to Like" src="/fbframeblog/blogimages/cocacola.png" alt="No longer need a click above to Like" width="460" height="146" /></a><p class="wp-caption-text">No longer need a click above to Like</p></div> <p>There are thousands of Facebook pages including top brands like Coca cola which have the text like “Click on like button above”. This will no longer be required. You can now have the like button within the page. An example is what we have on <a href="https://www.facebook.com/webdigi?sk=app_178775035499585&app_data=code">our page here</a>.</p> <p><strong>7) Special content for Facebook page fans</strong></p> <p>You can have a special page displayed for Facebook fans. This is possible because Facebook sends a signed request to your server each time your page loads. This request from Facebook has details like user language preferences, age restrictions and also information showing if an user is a page fan, page admin, etc. All the <a href="https://www.facebook.com/webdigi?sk=app_178775035499585&app_data=code">source code for all the above pages</a> is available on this page.</p> <p><strong>Notes:</strong></p> <p>– Our page has been updated to the new version. This is a requisite for working on the new iframe enabled facebook pages.<br /> – All the code is free to use as usual and is intended to demo the features of iframes on Facebook tabs.<br /> – You seem to need to be logged in to Facebook to be able to view the demo pages in action!<br /> – For those beginners who are not sure how to create the iframe tabs, please visit the <a href="https://developers.facebook.com/docs/guides/canvas#tabs">Facebook guide on creating pages</a></p> <p>What features or possibilities excite you the most?</p> </div> <aside class="kudo kudoable" id="800"> <a href="https://www.webdigi.co.uk/blog/2011/build-better-facebook-pages-with-iframe-tabs/#comments" class="counter"> <span class="num">21</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=Build%20better%20facebook%20pages%20with%20iframe%20tabs&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2011%2Fbuild-better-facebook-pages-with-iframe-tabs%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2011%2Fbuild-better-facebook-pages-with-iframe-tabs%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2011%2Fbuild-better-facebook-pages-with-iframe-tabs%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=Build%20better%20facebook%20pages%20with%20iframe%20tabs&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2011%2Fbuild-better-facebook-pages-with-iframe-tabs%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2011%2Fbuild-better-facebook-pages-with-iframe-tabs%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <nav class="pagination"> <span class="next"> <a href="https://www.webdigi.co.uk/blog/page/2/" >Continue   →</a> </span> <span class="prev"> </span> </nav> </section> <script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> function getKudos() { var e = new Array; return $("aside.kudo").each(function(t) { article = $(this).closest("article").attr("id"), e.push(article) }), $.post("https://www.webdigi.co.uk/blog/wp-admin/admin-ajax.php", { kudosList: e, action:'my_special_action' }, function(e) { $.each(e, function(e, t) { var n = $("#" + t.external_id).find("span.num"), r = n.text().replace(/,/g, ""), i = t.kudos; isNaN(r) && (r = 0), isNaN(i) && (i = 9e6), i - r >= 0 && (i = i.toString(), i = i.replace(/\B(?=(\d{3})+(?!\d))/g, ","), n.html(i)) }) }), !0 } function setViewport() { $(window).width() < 900 && $("html,body").animate({ scrollLeft: 180 }, 800) } function startCode() { $("code").addClass("prettyprint"), $.getScript("https://www.webdigi.co.uk/blog/wp-content/themes/svbtle/js/prettify.js").done(function(e, t) { var n = "https://www.webdigi.co.uk/blog/wp-content/themes/svbtle/css/prettify.css"; $.get(n, function(e) { $('<style type="text/css"></style>').html(e).appendTo("head") }), prettyPrint(); }) } (function(e, t) { var n; e.rails = n = { linkClickSelector: "a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]", inputChangeSelector: "select[data-remote], input[data-remote], textarea[data-remote]", formSubmitSelector: "form", formInputClickSelector: "form input[type=submit], form input[type=image], form button[type=submit], form button:not(button[type])", disableSelector: "input[data-disable-with], button[data-disable-with], textarea[data-disable-with]", enableSelector: "input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled", requiredInputSelector: "input[name][required]:not([disabled]),textarea[name][required]:not([disabled])", fileInputSelector: "input:file", linkDisableSelector: "a[data-disable-with]", CSRFProtection: function(t) { var n = e('meta[name="csrf-token"]').attr("content"); n && t.setRequestHeader("X-CSRF-Token", n) }, fire: function(t, n, r) { var i = e.Event(n); return t.trigger(i, r), i.result !== !1 }, confirm: function(e) { return confirm(e) }, ajax: function(t) { return e.ajax(t) }, href: function(e) { return e.attr("href") }, handleRemote: function(r) { var i, s, o, u, a, f; if (n.fire(r, "ajax:before")) { u = r.data("cross-domain") || null, a = r.data("type") || e.ajaxSettings && e.ajaxSettings.dataType; if (r.is("form")) { i = r.attr("method"), s = r.attr("action"), o = r.serializeArray(); var l = r.data("ujs:submit-button"); l && (o.push(l), r.data("ujs:submit-button", null)) } else r.is(n.inputChangeSelector) ? (i = r.data("method"), s = r.data("url"), o = r.serialize(), r.data("params") && (o = o + "&" + r.data("params"))) : (i = r.data("method"), s = n.href(r), o = r.data("params") || null); return f = { type: i || "GET", data: o, dataType: a, crossDomain: u, beforeSend: function(e, i) { return i.dataType === t && e.setRequestHeader("accept", "*/*;q=0.5, " + i.accepts.script), n.fire(r, "ajax:beforeSend", [e, i]) }, success: function(e, t, n) { r.trigger("ajax:success", [e, t, n]) }, complete: function(e, t) { r.trigger("ajax:complete", [e, t]) }, error: function(e, t, n) { r.trigger("ajax:error", [e, t, n]) } }, s && (f.url = s), n.ajax(f) } return ! 1 }, handleMethod: function(r) { var i = n.href(r), s = r.data("method"), o = r.attr("target"), u = e("meta[name=csrf-token]").attr("content"), a = e("meta[name=csrf-param]").attr("content"), f = e('<form method="post" action="' + i + '"></form>'), l = '<input name="_method" value="' + s + '" type="hidden" />'; a !== t && u !== t && (l += '<input name="' + a + '" value="' + u + '" type="hidden" />'), o && f.attr("target", o), f.hide().append(l).appendTo("body"), f.submit() }, disableFormElements: function(t) { t.find(n.disableSelector).each(function() { var t = e(this), n = t.is("button") ? "html": "val"; t.data("ujs:enable-with", t[n]()), t[n](t.data("disable-with")), t.prop("disabled", !0) }) }, enableFormElements: function(t) { t.find(n.enableSelector).each(function() { var t = e(this), n = t.is("button") ? "html": "val"; t.data("ujs:enable-with") && t[n](t.data("ujs:enable-with")), t.prop("disabled", !1) }) }, allowAction: function(e) { var t = e.data("confirm"), r = !1, i; return t ? (n.fire(e, "confirm") && (r = n.confirm(t), i = n.fire(e, "confirm:complete", [r])), r && i) : !0 }, blankInputs: function(t, n, r) { var i = e(), s, o = n || "input,textarea"; return t.find(o).each(function() { s = e(this); if (r ? s.val() : !s.val()) i = i.add(s) }), i.length ? i: !1 }, nonBlankInputs: function(e, t) { return n.blankInputs(e, t, !0) }, stopEverything: function(t) { return e(t.target).trigger("ujs:everythingStopped"), t.stopImmediatePropagation(), !1 }, callFormSubmitBindings: function(n, r) { var i = n.data("events"), s = !0; return i !== t && i.submit !== t && e.each(i.submit, function(e, t) { if (typeof t.handler == "function") return s = t.handler(r) }), s }, disableElement: function(e) { e.data("ujs:enable-with", e.html()), e.html(e.data("disable-with")), e.bind("click.railsDisable", function(e) { return n.stopEverything(e) }) }, enableElement: function(e) { e.data("ujs:enable-with") !== t && (e.html(e.data("ujs:enable-with")), e.data("ujs:enable-with", !1)), e.unbind("click.railsDisable") } }, e.ajaxPrefilter(function(e, t, r) { e.crossDomain //|| n.CSRFProtection(r) }), e(document).delegate(n.linkDisableSelector, "ajax:complete", function() { n.enableElement(e(this)) }), e(document).delegate(n.linkClickSelector, "click.rails", function(r) { var i = e(this), s = i.data("method"), o = i.data("params"); if (!n.allowAction(i)) return n.stopEverything(r); i.is(n.linkDisableSelector) && n.disableElement(i); if (i.data("remote") !== t) return (r.metaKey || r.ctrlKey) && (!s || s === "GET") && !o ? !0: (n.handleRemote(i) === !1 && n.enableElement(i), !1); if (i.data("method")) return n.handleMethod(i), !1 }), e(document).delegate(n.inputChangeSelector, "change.rails", function(t) { var r = e(this); return n.allowAction(r) ? (n.handleRemote(r), !1) : n.stopEverything(t) }), e(document).delegate(n.formSubmitSelector, "submit.rails", function(r) { var i = e(this), s = i.data("remote") !== t, o = n.blankInputs(i, n.requiredInputSelector), u = n.nonBlankInputs(i, n.fileInputSelector); if (!n.allowAction(i)) return n.stopEverything(r); if (o && i.attr("novalidate") == t && n.fire(i, "ajax:aborted:required", [o])) return n.stopEverything(r); if (s) return u ? n.fire(i, "ajax:aborted:file", [u]) : !e.support.submitBubbles && e().jquery < "1.7" && n.callFormSubmitBindings(i, r) === !1 ? n.stopEverything(r) : (n.handleRemote(i), !1); setTimeout(function() { n.disableFormElements(i) }, 13) }), e(document).delegate(n.formInputClickSelector, "click.rails", function(t) { var r = e(this); if (!n.allowAction(r)) return n.stopEverything(t); var i = r.attr("name"), s = i ? { name: i, value: r.val() }: null; r.closest("form").data("ujs:submit-button", s) }), e(document).delegate(n.formSubmitSelector, "ajax:beforeSend.rails", function(t) { this == t.target && n.disableFormElements(e(this)) }), e(document).delegate(n.formSubmitSelector, "ajax:complete.rails", function(t) { this == t.target && n.enableFormElements(e(this)) }) })(jQuery), function(e) { function t() { if (o.jStorage) try { s = l("" + o.jStorage) } catch(e) { o.jStorage = "{}" } else o.jStorage = "{}"; a = o.jStorage ? ("" + o.jStorage).length: 0 } function n() { try { o.jStorage = f(s), u && (u.setAttribute("jStorage", o.jStorage), u.save("jStorage")), a = o.jStorage ? ("" + o.jStorage).length: 0 } catch(e) {} } function r(e) { if (!e || "string" != typeof e && "number" != typeof e) throw new TypeError("Key name must be string or numeric"); if ("__jstorage_meta" == e) throw new TypeError("Reserved key name"); return ! 0 } function i() { var e, t, r, o = Infinity, u = !1; clearTimeout(h); if (s.__jstorage_meta && "object" == typeof s.__jstorage_meta.TTL) { e = +(new Date), r = s.__jstorage_meta.TTL; for (t in r) r.hasOwnProperty(t) && (r[t] <= e ? (delete r[t], delete s[t], u = !0) : r[t] < o && (o = r[t])); Infinity != o && (h = setTimeout(i, o - e)), u && n() } } if (!e || !e.toJSON && !Object.toJSON && !window.JSON) throw Error("jQuery, MooTools or Prototype needs to be loaded before jStorage!"); var s = {}, o = { jStorage: "{}" }, u = null, a = 0, f = e.toJSON || Object.toJSON || window.JSON && (JSON.encode || JSON.stringify), l = e.evalJSON || window.JSON && (JSON.decode || JSON.parse) || function(e) { return ("" + e).evalJSON() }, c = !1, h, p = { isXML: function(e) { return (e = (e ? e.ownerDocument || e: 0).documentElement) ? "HTML" !== e.nodeName: !1 }, encode: function(e) { if (!this.isXML(e)) return ! 1; try { return (new XMLSerializer).serializeToString(e) } catch(t) { try { return e.xml } catch(n) {} } return ! 1 }, decode: function(e) { var t = "DOMParser" in window && (new DOMParser).parseFromString || window.ActiveXObject && function(e) { var t = new ActiveXObject("Microsoft.XMLDOM"); return t.async = "false", t.loadXML(e), t }; return t ? (e = t.call("DOMParser" in window && new DOMParser || window, e, "text/xml"), this.isXML(e) ? e: !1) : !1 } }; e.jStorage = { version: "0.1.7.0", set: function(e, t, i) { return r(e), i = i || {}, p.isXML(t) ? t = { _is_xml: !0, xml: p.encode(t) }: "function" == typeof t ? t = null: t && "object" == typeof t && (t = l(f(t))), s[e] = t, isNaN(i.TTL) ? n() : this.setTTL(e, i.TTL), t }, get: function(e, t) { return r(e), e in s ? s[e] && "object" == typeof s[e] && s[e]._is_xml && s[e]._is_xml ? p.decode(s[e].xml) : s[e] : "undefined" == typeof t ? null: t }, deleteKey: function(e) { return r(e), e in s ? (delete s[e], s.__jstorage_meta && "object" == typeof s.__jstorage_meta.TTL && e in s.__jstorage_meta.TTL && delete s.__jstorage_meta.TTL[e], n(), !0) : !1 }, setTTL: function(e, t) { var o = +(new Date); return r(e), t = Number(t) || 0, e in s ? (s.__jstorage_meta || (s.__jstorage_meta = {}), s.__jstorage_meta.TTL || (s.__jstorage_meta.TTL = {}), 0 < t ? s.__jstorage_meta.TTL[e] = o + t: delete s.__jstorage_meta.TTL[e], n(), i(), !0) : !1 }, flush: function() { return s = {}, n(), !0 }, storageObj: function() { function e() {} return e.prototype = s, new e }, index: function() { var e = [], t; for (t in s) s.hasOwnProperty(t) && "__jstorage_meta" != t && e.push(t); return e }, storageSize: function() { return a }, currentBackend: function() { return c }, storageAvailable: function() { return !! c }, reInit: function() { var e; if (u && u.addBehavior) { e = document.createElement("link"), u.parentNode.replaceChild(e, u), u = e, u.style.behavior = "url(#default#userData)", document.getElementsByTagName("head")[0].appendChild(u), u.load("jStorage"), e = "{}"; try { e = u.getAttribute("jStorage") } catch(n) {} o.jStorage = e, c = "userDataBehavior" } t() } }, function() { var e = !1; if ("localStorage" in window) try { window.localStorage.setItem("_tmptest", "tmpval"), e = !0, window.localStorage.removeItem("_tmptest") } catch(n) {} if (e) try { window.localStorage && (o = window.localStorage, c = "localStorage") } catch(r) {} else if ("globalStorage" in window) try { window.globalStorage && (o = window.globalStorage[window.location.hostname], c = "globalStorage") } catch(s) {} else { if (u = document.createElement("link"), !u.addBehavior) { u = null; return } u.style.behavior = "url(#default#userData)", document.getElementsByTagName("head")[0].appendChild(u), u.load("jStorage"), e = "{}"; try { e = u.getAttribute("jStorage") } catch(a) {} o.jStorage = e, c = "userDataBehavior" } t(), i() } () } (window.$ || window.jQuery), $(function() { function n(t) { t.addClass("active"), t.children(".counter").children("span.txt").html("Don’t move"), t.children(".counter").children("span.num").hide(), e = setTimeout(function() { clearTimeout(e), s(t) }, 1e3) } function r(t) { clearTimeout(e), t.children(".counter").children("span.txt").html("Kudos"), t.children(".counter").children("span.num").show(), t.removeClass("active") } function i(e) { var t = e.closest("article").attr("id"); $.post("https://www.webdigi.co.uk/blog/wp-admin/admin-ajax.php", { article: t, action:'remove_kudos' }, function() { $.jStorage.set(t, !1) }); var n = parseInt(e.find("span.num").text().replace(/,/g, "")) - 1; e.find("span.num").text(n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")), e.children(".counter").children("span.txt").html("Kudos"), e.children(".counter").children("span.num").show(), e.removeClass("complete deletable"), e.addClass("kudoable") } function s(e) { var t = e.closest("article").attr("id"); $.post("https://www.webdigi.co.uk/blog/wp-admin/admin-ajax.php", { article: t, action:'my_special_action', }, function() { $.jStorage.set(t, !0) }); var n = parseInt(e.find("span.num").text().replace(/,/g, "")) + 1; e.find("span.num").text(n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")), e.children(".counter").children("span.txt").html("Kudos"), e.children(".counter").children("span.num").show(), e.addClass("complete"), e.removeClass("kudoable active") } var e, t; getKudos(), setViewport(), $("code, pre").length > 0 && startCode(), $("a.kudobject").live({ click: function(e) { return e.preventDefault(), !1 }, mouseenter: function() { kudo = $(this).parent(), kudo.is(".kudoable") && n(kudo) }, mouseleave: function() { clearTimeout(e), kudo = $(this).parent(), r(kudo), kudo.is(".complete") && kudo.addClass("deletable") } }), $("a.kudobject").live("touchstart", function(e) { kudo = $(this).parent(), kudo.is(".kudoable") && n(kudo), e.preventDefault() }), $("a.kudobject").live("touchend", function(t) { clearTimeout(e), kudo = $(this).parent(), r(kudo), kudo.is(".complete") && kudo.addClass("deletable"), t.preventDefault() }), $("aside.deletable a.kudobject").live("click", function(e) { return kudo = $(this).parent(), i(kudo), e.preventDefault(), !1 }), $("aside.deletable a.kudobject").live("touchend", function(e) { return kudo = $(this).parent(), i(kudo), e.preventDefault(), !1 }), $("aside.kudo").each(function(e) { var t = $(this).closest("article").attr("id"), n = $.jStorage.get(t); n && $(this).removeClass("kudoable").addClass("complete deletable") }), $("#svbtle_dropdown").mouseenter(function() { clearTimeout(t), $("#dropdown").show() }).mouseleave(function() { t = setTimeout("$('#dropdown').hide();", 800) }), $("#svbtle_dropdown").mouseenter(function() { clearTimeout(t), $("#dropdown").show() }).mouseleave(function() { t = setTimeout("$('#dropdown').hide();", 800) }) }), $("input.pane_input, textarea.pane_input").bind("focus", function() { $("li.text_field").removeClass("active"), $(this).parent("li.text_field").addClass("active") }), $("input.pane_input, textarea.pane_input").bind("blur", function() { $("li.text_field").removeClass("active"), $("li.text_field").first().addClass("active") }); </script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js'></script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js'></script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPhp.js'></script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPowerShell.js'></script> <script type='text/javascript'> (function(){ var corecss = document.createElement('link'); var themecss = document.createElement('link'); var corecssurl = "https://www.webdigi.co.uk/blog/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.9b"; if ( corecss.setAttribute ) { corecss.setAttribute( "rel", "stylesheet" ); corecss.setAttribute( "type", "text/css" ); corecss.setAttribute( "href", corecssurl ); } else { corecss.rel = "stylesheet"; corecss.href = corecssurl; } document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") ); var themecssurl = "https://www.webdigi.co.uk/blog/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css?ver=3.0.9b"; if ( themecss.setAttribute ) { themecss.setAttribute( "rel", "stylesheet" ); themecss.setAttribute( "type", "text/css" ); themecss.setAttribute( "href", themecssurl ); } else { themecss.rel = "stylesheet"; themecss.href = themecssurl; } //document.getElementById("syntaxhighlighteranchor").appendChild(themecss); document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") ); })(); SyntaxHighlighter.config.strings.expandSource = '+ expand source'; SyntaxHighlighter.config.strings.help = '?'; SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n'; SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: '; SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: '; SyntaxHighlighter.defaults['pad-line-numbers'] = false; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-includes/js/wp-embed.min.js'></script> </body> </html>

CINXE.COM

Web Development