Insights

Development insights, client advice and news from Go Tripod

<p>Software design is a complicated business. To illustrate this point, here is a user flow diagram from a previous project of ours. This level of detail is useful for a number of reasons; it gives the client a real feel for the end product before the need for any coding, it aids in the design process and it helps to formalise pre-development requirements.</p>
<p><img loading="lazy" class="aligncenter wp-image-243 size-full" src="https://content.gotripod.com/images/2018/03/userflow-01b.jpg" alt="User flow example image" width="738" height="932" srcset="https://content.gotripod.com/wp-content/uploads/2018/03/userflow-01b.jpg 738w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-01b-238x300.jpg 238w" sizes="(max-width: 738px) 100vw, 738px" /></p>
<p>Complications can arise when, down the line, it becomes apparent that a functional change is necessary. With all but the most menial of software, this scenario is inevitable.</p>
<p>By practising agile software development we allow for multiple changes during the design and build processes. These changes still need defining, but needn’t derail a project or upset its budget. In the example below what had been specified as an ‘About page’ within the app later became an ‘About section’. (Click the image to enlarge.)</p>
<p><a href="https://content.gotripod.com/images/2018/03/userflow-02.jpg" data-size="1463x994"><img loading="lazy" class="aligncenter wp-image-244 size-full" src="https://content.gotripod.com/images/2018/03/userflow-02.jpg" alt="User flow change request example image" width="1463" height="994" srcset="https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02.jpg 1463w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02-300x204.jpg 300w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02-768x522.jpg 768w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02-1024x696.jpg 1024w" sizes="(max-width: 1463px) 100vw, 1463px" /></a></p>
<p>We do our utmost to clearly define our software at the start of a project, but we have a well defined process for managing changes as and when the need arises. This enables us to crack on with development without getting bogged down in specification minutiae.</p>


Managing change requests within the software development process

<p>In a <a href="https://gotripod.com/insights/making-use-defer-attribute-easily-eliminate-render-blocking-scripts/">previous article</a> I talked about adding the <code>defer</code> attribute to script tags to avoid blocking page render. However, if you’re developing a WordPress theme, chances are you won’t simply be able to amend this HTML. Instead you&#8217;ll need to make use of the <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/" target="_blank" rel="noopener">wp_enqueue_script</a> function from within your theme&#8217;s functions.php file. This function allows you to tell WordPress if your script has any dependancies, which you pass through as an array, and WordPress uses this information to load scripts in the correct order thus avoiding any JavaScript errors. Because plugins load assets via the <a href="https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/" target="_blank" rel="noopener">wp_enqueue_scripts</a> hook it&#8217;s important you do too so your theme plays nice with them.</p>
<p>So we&#8217;ve got our scripts loading in the correct order &#8211; great! But unfortunately WordPress doesn&#8217;t load them asynchronously for you meaning your HTML will pause parsing while the script is downloaded and executed. Sounds pretty bad for performance, and it is, so we&#8217;ll be needing an extra something in our functions.php file. While this isn&#8217;t a perfect solution it&#8217;s the most solid I&#8217;ve found so far and is what we currently implement here at Go Tripod:</p>
<pre><code class="language-php">// Defer scripts
// Source: https://www.laplacef.com/2014/05/24/how-to-defer-parsing-javascript-in-wordpress/
if (!(is_admin())) {
    function defer_js($url) {
        if (FALSE === strpos($url, '.js')) return $url;
        if (strpos($url, 'jquery.js')) return $url;
        return "$url' defer onload='";
    }
    add_filter('clean_url', 'defer_js', 11, 1);
}</code></pre>
<p>Your scripts&#8217; <code>src</code> attribute will be replaced with itself along with <code>defer</code> and empty <code>onload</code> attributes resulting in them being loaded asynchronously and giving your site a dramatic performance boost.</p>


How to enqueue and defer scripts in WordPress

<p>One of the problems with being a small, independent software development agency is that we&#8217;re usually so busy on client projects that we don&#8217;t often get much time to devote to our own business needs.</p>
<p>To this end our own website has languished as a glorified holding page for quite some time. But no longer!</p>
<p>Today, with some helpful input and invaluable guidance from creative gurus <a href="https://curiousways.com/" target="_blank" rel="noopener">Curious Ways</a>, we&#8217;ve been able to launch a <a href="https://gotripod.com/">new look Go Tripod website</a>.</p>
<p>In the true spirit of agile development, this initial launch covers the bare minimum content and functionality we deemed necessary. This includes a homepage that briefly outlines our business offerings, a contact page and all our previous blog posts. We&#8217;ll be extending our new website to include case studies, portfolio pieces and more information on our services in good time. So, watch this space.</p>
<p>In the process of redesigning our website, we&#8217;ve also rebranded our company and plan to roll these changes out to our various social media accounts and other corporate channels over the next few days.</p>
<p>We&#8217;re the same company on the inside, but with a fresh new look on the outside.</p>


A new look for Go Tripod

<p><a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a> has loads of useful filters built in which can make all kinds of jobs much easier. One of those jobs is resizing and cropping images, for which we can use the resize filter. The syntax is simple, as with all things <a href="https://twig.symfony.com/" target="_blank" rel="noopener">Twig</a> &#8211; we simply add the filter to our image source, passing through a width or height to resize or both to crop.</p>
<p>The following example will resize the image to a width of 300px while retaining its aspect ratio:</p>
<pre><code class="language-twig">{{ item.src|resize(300) }}</code></pre>
<p>The following example will resize the image to a height of 300px while retaining its aspect ratio:</p>
<pre><code class="language-twig">{{ item.src|resize(0, 300) }}</code></pre>
<p>The following example will crop the image to a width and height of 300px:</p>
<pre><code class="language-twig">{{ item.src|resize(300, 300) }}</code></pre>
<p>We can then define multiple sizes and pass these into a srcset attribute to make sure we’re serving a suitable image size based on the device viewport. This is especially important for mobile devices who don’t need to download and display a full HD hero image on a 320px wide screen.</p>
<p>The following example defines three sizes, one for mobile, tablet and desktop &#8211; devices with a viewport width of up to 480px will get the 480px wide image and so on.</p>
<pre><code class="language-twig">srcset="{{ item.src|resize(480) }} 480w, {{ item.src|resize(1280) }}
1280w, {{ item.src|resize(1920) }} 1920w"</code></pre>
<p>If you’re new to srcset or want to delve into it a bit deeper, <a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/" target="_blank" rel="noopener">CSS Tricks’ article</a> is a good read.</p>


Dynamically generating responsive images with Timber’s resize filter and the srcset attribute

<p>One of the first things I decided to tackle as part of my recent work on website response times, assuming it’d be a simple process, was render blocking web fonts. Little did I know I was opening up a right can of words (sorry)…</p>
<p>Numerous techniques have been developed over the past few years with varying levels of difficulty, visual effects and results as described in detail <a href="https://www.zachleat.com/web/comprehensive-webfonts/" target="_blank" rel="noopener">here</a>. The two main visual effects that divide opinion are whether to go down the FOIT (Flash Of Invisible Text) or FOUT (Flash Of Unstyled Text) route. There now seems to be a general consensus within the community that FOUT is preferable for UX reasons with most research showing that it’s better to give users something than nothing &#8211; this is especially important for users on slow connections and can lead to high bounce rates.</p>
<p>NB: FOFT (Flash of Faux Text) is the new kid in town but I’ve not tried to implement it yet so won’t discuss here.</p>
<p>After some research I decided to go with <a href="https://github.com/typekit/webfontloader" target="_blank" rel="noopener">Web Font Loader</a>, a script born from a collaboration between Google and Typekit to easily load fonts from a variety of services. We want to load this script asynchronously to avoid it blocking page render so the browser will initially display the content using system fonts and apply the web fonts once they’ve downloaded. The example code below is what you’ll need to add within the head to load Open Sans:</p>
<pre><code class="language-javascript">&lt;script async defer type="text/javascript"&gt;
    WebFontConfig = {
        google: {
            families: ['Open Sans']
        }
    };
    (function(d) {
        var wf = d.createElement('script'), s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.async = true;
        s.parentNode.insertBefore(wf, s);
    })(document);
&lt;/script&gt;</code></pre>
<p>One drawback of this approach is its reliance on JavaScript &#8211; users with JavaScript disabled will be stuck with system fonts. This is a tiny number of users, <a href="https://blockmetry.com/blog/javascript-disabled" target="_blank" rel="noopener">around 0.2%</a>, so we can argue this progressive enhancement benefitting 99.8% of users is worth the sacrifice. Of course, if you’re using web fonts that are wildly different to the fallback system fonts loading before them you probably won’t want to use FOUT as the change in style would be too noticeable. In extreme cases this can even lead to changes in layout so, as with all things dev, do make sure you test thoroughly &#8211; you wouldn’t want a user on a slow connection to get halfway through a sentence then find it’s moved position!</p>


Improving site response times by deferring the downloading of web fonts

<p>When working on improving the response time of your site, one of the simplest optimisations to make is the deferring of scripts. In most cases, this can be done with the simple addition of the defer attribute to the script tags within your HTML:</p>
<pre><code class="language-markup">&lt;script src="" defer&gt;&lt;/script&gt;</code></pre>
<p>When a browser gets to a script tag in your code, its default behaviour is to pause parsing of the HTML, opting to download and execute the script before resuming. Setting the defer attribute tells the browser not to pause, but instead download the script in the background and execute it once parsing of the HTML has completed.</p>
<p>Another feature of using defer, which can be very useful, is that all scripts with the defer attribute will execute in the order they’re presented in your HTML. This is especially useful when writing scripts which rely on others as you can ensure these dependencies are executed first.</p>
<p>Scripts can also be executed asynchronously using the async attribute but bear in mind that it should only be used if the script is not relied upon or does not rely on any others and will function correctly if run before HTML has finished parsing. For a clear visual representation of the different script loading options, <a href="http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html" target="_blank" rel="noopener">this article</a> has some simple infographics I’d recommend taking a look at.</p>
<p>If you’re developing WordPress themes without the use of a template engine like <a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a>, you may not be able to edit this HTML and should instead make use of the <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/" target="_blank" rel="noopener">wp_enqueue_script function</a> within your theme’s functions.php file &#8211; you should also use this method if using any WordPress plugins which run scripts on your site’s front end.</p>


Making use of the defer attribute to easily eliminate render blocking scripts

<p>A warm welcome to our latest team member, Matthew Dixon!</p>
<p>Matthew joins us as Lead Front-End Developer, and will be working to translate responsive designs into wonderful web experiences. His HTML5, CSS3 and WordPress experience will combine with our new hosting partner, <a href="https://wpengine.co.uk/" target="_blank" rel="noopener">WP Engine</a>, to work with both new and existing customers!</p>


Welcome to our new WordPress, HTML5 and CSS hero Matthew Dixon

<p>This post was originally published <a href="https://colinramsay.co.uk/2016/04/29/go-serverless.html">on our Technical Director&#8217;s personal blog</a>.</p>
<p>Amazon&#8217;s cloud offering, AWS, provides a wealth of resources for developers and infrastructure engineers. In this article, I&#8217;ll show how <a href="https://aws.amazon.com/cognito/" target="_blank" rel="noopener">Amazon Cognito</a> can be used to record user preferences and data without having to set up a server or database. I&#8217;ll build a small React Native application which allows a user to log in with Facebook and save some data to the cloud for later retrieval.</p>
<h2>Facebook Login</h2>
<p>Prerequisites:</p>
<ul>
<li>Install npm and CocoaPods if you don&#8217;t have them already</li>
<li>Install <a href="https://facebook.github.io/react-native/docs/getting-started.html#content">React Native</a></li>
<li>Create a new Facebook iOS app in the <a href="https://developers.facebook.com/apps/">developer centre</a></li>
</ul>
<p>Let&#8217;s start by creating our React Native project and entering the project directory:</p>
<pre><code class="language-bash">react-native init FacebookAwsReactNative
cd FacebookAwsReactNative</code></pre>
<p>Let&#8217;s install the <a href="https://github.com/facebook/react-native-fbsdk">Facebook React Native SDK</a> via npm, that&#8217;ll give us a nice login button for free:</p>
<pre><code class="language-bash">npm install --save react-native-fbsdkcore react-native-fbsdklogin
</code></pre>
<p>We need to install some native code to make this work, so let&#8217;s do that with CocoaPods. First we create a Podfile:</p>
<pre><code class="language-bash">cd ios
pod init
</code></pre>
<p>Edit the file which was just created at FacebookAwsReactNative/ios/Podfile and add the following:</p>
<pre><code class="language-bash">source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :subspecs =&gt; ['Core', 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket'], :path =&gt; '../node_modules/react-native'
pod 'react-native-fbsdkcore', :path =&gt; '../node_modules/react-native-fbsdkcore'
pod 'react-native-fbsdklogin', :path =&gt; '../node_modules/react-native-fbsdklogin'
pod 'react-native-fbsdkshare', :path =&gt; '../node_modules/react-native-fbsdkshare'
</code></pre>
<p>You <em>may</em> need to perform some other steps here, as per the <a href="https://github.com/facebook/react-native-fbsdk#option-using-cocoapods">Facebook documentation</a>. Go and have a read of that section just in case. Let&#8217;s install the pods and then we&#8217;ll have to faff around in Xcode for a bit.</p>
<pre><code class="language-bash">pod install
open FacebookAwsReactNative.xcworkspace
</code></pre>
<p>Notice that we now use the xcworkspace file rather than the xcodeproj file; this is required for CocoaPods to do its thing.</p>
<h2>Xcode Is Quite Horrible Really</h2>
<p>Expand the FacebookAwsReactNative &gt; Libraries folder and select all of the items in there and delete the references to them. This is because we&#8217;ve opted to use CocoaPods for React Native (see the <code>pod 'React'</code> line we added to the Podfile) so the items in Libraries are duplicates.</p>
<p>Let&#8217;s move on to configuring the Facebook SDK. Open up info.plist using Open As &gt; Source Code, and add the follow inside the root <code>&lt;dict&gt;</code> node:</p>
<pre><code class="language-xml">&lt;key&gt;CFBundleURLTypes&lt;/key&gt;
&lt;array&gt;
  &lt;dict&gt;
    &lt;key&gt;CFBundleURLSchemes&lt;/key&gt;
    &lt;array&gt;
      &lt;string&gt;fb{your-app-id}&lt;/string&gt;
    &lt;/array&gt;
  &lt;/dict&gt;
&lt;/array&gt;
&lt;key&gt;FacebookAppID&lt;/key&gt;
&lt;string&gt;{your-app-id}&lt;/string&gt;
&lt;key&gt;FacebookDisplayName&lt;/key&gt;
&lt;string&gt;{your-app-name}&lt;/string&gt;
</code></pre>
<p>Next, open AppDelegate.m and add a new import:</p>
<pre><code class="language-objectivec">#import &lt;FBSDKCoreKit/FBSDKCoreKit.h&gt;
</code></pre>
<p>Connect our AppDelegate to the FBSDKApplicationDelegate by adding the following to <code>didFinishLaunchingWithOptions</code>:</p>
<pre><code class="language-objectivec">[[FBSDKApplicationDelegate sharedInstance] application:application
    didFinishLaunchingWithOptions:launchOptions];
</code></pre>
<p>And finally, add a method to allow us to navigate back to our app from Facebook:</p>
<pre><code class="language-objectivec">- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
    openURL:url
    sourceApplication:sourceApplication
    annotation:annotation
  ];
}
</code></pre>
<p>Wonderful. Run the project and get your simulator running because we&#8217;re now ready to add our login button.</p>
<h2>Push The Button</h2>
<p>We need to import the button component, and at the same time we&#8217;ll import another class that we&#8217;ll use later. Add the following:</p>
<pre><code class="language-jsx">import { FBSDKAccessToken } from 'react-native-fbsdkcore';
import { FBSDKLoginButton } from 'react-native-fbsdklogin';
</code></pre>
<p>Delete all of the default stuff inside the <code>&lt;View&gt;</code> component and replace it with the button code:</p>
<pre><code class="language-jsx">&lt;FBSDKLoginButton
    onLoginFinished={this.onLoginFinished}
    onLogoutFinished={this.onLogoutFinished=}
    readPermissions={[]}
    publishPermissions={['publish_actions']}/&gt;
</code></pre>
<p>We now need to add <code>onLoginFinished</code> and <code>onLogoutFinished</code> methods to our FacebookAwsReactNative class.</p>
<pre><code class="language-jsx">onLogoutFinished() {
    alert('Logged out.');
}
</code></pre>
<p>Simple!</p>
<pre><code class="language-jsx">onLoginFinished(error, result) {
    if (error) {
        alert('Error logging in.');
    } else {
        if (result.isCancelled) {
            alert('Login cancelled.');
        } else {
            alert('Login success!');
        }
    }
}
</code></pre>
<p>Less simple, but pretty self-explanatory. At this point, you should be able to run the app and login via Facebook, with the various alert messages firing as appropriate.</p>
<p>But we want to take one more step; we want to be able to link this login to persistent data stored on Amazon Cognito. This needs two steps: firstly to get a unique token to identify the Facebook login, and secondly, to sync local data up to Cognito. Fortunately this becomes super-easy thanks to the Amazon SDK and the <a href="https://github.com/morcmarc/react-native-cognito">React Native Cognito</a> project.</p>
<p>First, we need to get an access token from Facebook to use as a link between FB and Cognito. <code>FBSDKAccessToken.getCurrentAccessToken</code> takes a single callback argument which is passed the token we need. We then need to install (follow the <a href="https://github.com/morcmarc/react-native-cognito">instructions</a>) and import React Native Cognito. Add this along with your other import statements:</p>
<pre><code class="language-jsx">import Cognito from 'react-native-cognito';
</code></pre>
<p>Next, we initialise the credentials for Cognito and sync up some data!</p>
<pre><code class="language-jsx">FBSDKAccessToken.getCurrentAccessToken((token) =&gt; {
    if (token) {
        Cognito.initCredentialsProvider(
            awsIdentityPoolId,
            token.tokenString,
            awsRegion);

        Cognito.syncData('testDataset', 'key', 'value', (err) =&gt; {
            // success!
        });
    }
});
</code></pre>
<p>You&#8217;ll need to have created a Federated Identity Pool and set up Facebook as an Authentication Provider. Populate the <code>awsIdentityPoolId</code> and <code>awsRegion</code> variables accordingly and the above code can be run at any point after a successful login.</p>
<p>Visit the Identity Pool in the AWS Console and you&#8217;ll see a dataset called &#8220;testDataset&#8221; with a single key/value entry.</p>
<p>This has been a whistlestop tour on moving to a serverless setup with Facebook logins and Amazon Cognito. The full code <a href="https://github.com/colinramsay/react-native-cognito-example">can be found on GitHub</a>.</p>


Go Tripod Go Serverless With React Native and Amazon Web Services

<p>In years past, Google was renowned for its 20% time &#8211; a developer was allowed to allocate one day a week to working on ideas that weren&#8217;t necessarily related to their normal Googley projects. Some of these ideas were even spun off into new properties for Google, and some were incorporated into existing internal and public-facing projects.</p>
<p>The idea of freeing employees up to do something which inspires them is clearly enticing; in fact there&#8217;s been lots of research which indicates that a four day work-week is as productive &#8211; if not more productive &#8211; than a five day week.</p>
<p>At Go Tripod, we&#8217;re constantly thinking about how to mix up our business, how to keep things fresh, and how to improve the way we work. At the same time we&#8217;re a consultancy, so allocating a full day a week to something like this a bit impractical being a fairly small company.</p>
<p>What to do?</p>
<h2 id="onceamonth">Once A Month</h2>
<p>Let&#8217;s compromise: Go Tripod will be taking one day a month out to work on internal projects, marketing, new ideas and exciting bits and bobs. During these days <strong>we&#8217;ll only be answering support tickets</strong>. Imagine it as a staff training day, or an <a href="https://en.wikipedia.org/wiki/Inset_day">inset day</a> at a British school, where the employees spend some time to take stock, plan ahead, and come up with improvements.</p>
<h2 id="internalprojects">Internal Projects</h2>
<p>We use tools like <a href="http://www.basecamp.com">Basecamp</a>, <a href="http://www.slack.com">Slack</a> and <a href="http://www.freshbooks.com">Freshbooks</a> to manage projects, to communicate, and to invoice. Some of these don&#8217;t always work as smoothly as we like, and so to improve the service we can give to our clients, we build internal tools to improve our workflow. On the GTBDD (catchy!), we&#8217;ll be seeing if there&#8217;s anything we can do to further these tools or if there are new ones we can build.</p>
<h2 id="products">Products</h2>
<p>Every consultancy would love to have some <a href="https://en.wikipedia.org/wiki/Software_as_a_service">SAAS</a> to bring in recurring revenue. We&#8217;ll be examining the industries we know best and hitting the whiteboard to see if there are any tasty opportunities for us to launch a new product in 2016.</p>
<h2 id="learning">Learning</h2>
<p>In the past year we&#8217;ve been working with <a href="https://facebook.github.io/react/">React</a> and <a href="https://facebook.github.io/react-native/">React Native</a>, both of which have given us important tools to improve the quality, and reduce the cost, of our work. This year, we&#8217;ll continue to look at the latest technologies and strengthen our knowledge of our existing box of tricks, and the GTBDD will give us more of an opportunity to do so.</p>
<h2 id="fungames">Fun &amp; Games</h2>
<p>On top of these virtuous goals, we&#8217;ll also be doing some stuff to blow off steam as a team. Whether that&#8217;s researching some JavaScript games framework, playing with a few Raspberry Pis, or just taking time out in Cornwall to do something a bit more outdoorsy &#8211; we&#8217;ll have one day a month to do it.</p>
<h2 id="happynewyear">Happy New Year</h2>
<p>We hope that this is an experiment that will help both Go Tripod and our clients. We&#8217;ve structured it in such a way that it will cause minimal disruption to our business but we&#8217;re doing it often enough for it to be of real benefit to us. Here&#8217;s to an exciting 2016!</p>


Go Tripod’s Business Development Days

<p>Colin&#8217;s started <a href="http://colinramsay.co.uk/2015/03/27/react-native-simple-native-module.html">playing around</a> with the new <a href="http://facebook.github.io/react-native/">React Native</a> from Facebook, a way of building native-speed applications for iOS using JavaScript. It&#8217;s a completely new approach and we&#8217;re really excited about it &#8211; follow Colin&#8217;s experiments over at his <a href="http://colinramsay.co.uk/2015/03/27/react-native-simple-native-module.html">personal blog</a>.</p>


We Like React Native

<p>Ok, so we know access to business intelligence is crucial to all those involved in making a business successful.</p>
<p>This applies not only to the CEO but all the way down to the telephone operators and order pickers. Everyone needs measureable data to understand how well (or not so well) they&#8217;re doing.</p>
<p>At Go Tripod we have a whole host of things we need to track and measure &#8211; everything from sales enquiries through project statuses to accounting particulars. We also manage a large number of client applications and services with agreed response times for when things occasionally go awry.</p>
<p>All of these areas of our business generate a vast amount of data, much of it in real-time. Some of this data is used to fire off alerts to which we need to rapidly react but other data, when analysed, provide very useful performance insights.</p>
<p>Of course, not all metrics benefit from real-time monitoring but there are those that can provide invaluable information.</p>
<p>So, for a bit of fun, we built a real-time dashboard tool. Here&#8217;s a screenshot (utilising dummy financial data):</p>
<p><a data-size="935x664" href="https://content.gotripod.com/images/2014/05/dashboards.png"><img loading="lazy" class="alignnone wp-image-119 size-medium" src="https://content.gotripod.com/images/2014/05/dashboards-300x213.png" alt="" width="300" height="213" srcset="https://content.gotripod.com/wp-content/uploads/2014/05/dashboards-300x213.png 300w, https://content.gotripod.com/wp-content/uploads/2014/05/dashboards-768x545.png 768w, https://content.gotripod.com/wp-content/uploads/2014/05/dashboards.png 935w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>You can view this dummy example online <a href="http://gt-dashboard-ex.herokuapp.com/dashboard">realtime here &gt;&gt;</a></p>
<p>This demo is for a financial dashboard but we&#8217;ve extended the same tool for in-house social media monitoring, application server loads and project build statuses. In fact, any system or combination of systems that churn out data can be wired up to our real-time dashboard tool.</p>
<p>For demonstration purposes, we&#8217;ve made this example publically accessible but, naturally, dashboards dealing with sensitive data can be made highly secure and completely private.</p>
<p>Our dashboards are responsive so that they work, and look, just as good on mobiles, tablets and desktops and we&#8217;ve gone so far as to put up a screen in the office where our essential data is available to us in real-time all the time.</p>
<h2 id="wantone">Want One?</h2>
<p>We&#8217;ve had several clients express an interest in this technology so we decided to make this available to all. Drop any of us a line and we&#8217;ll have a chat about how we can help you become more aware of your own real-time business metrics. The dashboards can be integrated into almost any enviroment or system, or run standalone.</p>
<p>In an age where everything is measurable, turning your business data into business intelligence can be invaluable.</p>


Turning Business Data Into Real-Time Business Intelligence

<h2 id="developmentgemsgeekalert">Development Gems (Geek Alert)</h2>
<p>During our Ruby On Rails development process at Go Tripod we’re always trying to streamline our workflow. We&#8217;ve tested plenty of gems supporting our everyday programming work. Some of them were interesting &#8211; but unfortunately not handy in real work, but we found a few to be really useful.</p>
<p>For those not into the world of development, a gem file is an archive. The archive contains a piece of computer code, a specification describing its functions and documentation. Essentially, gems are 3rd party libraries that help us quickly build applications.</p>
<p>In today’s entry, Slaw &#8211; one of Go Tripod’s senior developers &#8211; shares our three favourite gems.</p>
<h2 id="better_errors">better_errors</h2>
<p>This is our current must-have gem. In fact, today I can barely imagine working without a <strong>better_errors</strong> entry in my Gemfile.</p>
<p>It replaces the current old-fashion Rails error page with a fancy one containing a lot of useful elements, like source code inspection, variables inspection and live REPL on every stack frame. Ok, but what does &#8220;live REPL&#8221; mean? According to wikipedia &#8211;</p>
<blockquote><p>&#8220;A read–eval–print loop (REPL) is a simple, interactive computer programming environment.&#8221;</p></blockquote>
<p>Exactly! It means that we can run Ruby code on every stack frame in our browser! We can check the value of Ruby variables and run the Ruby code in our app directly from the browser. If you are not convinced about this feature, just give it a try, after some time you won&#8217;t be able to work without it!</p>
<p>Installation is straightforward. <em>Because of the nature of this gem, please be sure that you add the following entries to the development group!</em></p>
<pre><code class="language-bash">group :development do
gem "bettererrors"
gem "bindingof_caller"
end</code></pre>
<h2 id="jazz_hands">jazz_hands</h2>
<p>In fact, jazz<em>hands is not a regular gem. It is rather a bundle of great console gems, mostly based on the <a href="http://pryrepl.org/">Pry console</a>. I will introduce only couple of its features, if you want to find more information please visit the <a href="https://github.com/nixme/jazz_hands">jazz</a></em>hands github page.</p>
<h3 id="readableoutput">Readable Output</h3>
<p>One of the most frustrating things in the console is completely unreadable output for non-atomic data like arrays, objects or hashes. Also, the lack of colours can be annoying after hours of work.</p>
<p><img loading="lazy" class="alignnone wp-image-121 size-full" src="https://content.gotripod.com/images/2014/05/readable-output.png" alt="" width="352" height="130" srcset="https://content.gotripod.com/wp-content/uploads/2014/05/readable-output.png 352w, https://content.gotripod.com/wp-content/uploads/2014/05/readable-output-300x111.png 300w" sizes="(max-width: 352px) 100vw, 352px" /></p>
<h3 id="additionalhelpers">Additional Helpers</h3>
<p>Do you want to display all routes when working in the console? Well, you need to open a new terminal&#8230;. and with jazz_hands you can use <strong>show-routes</strong> directly in the console now! You can also use <strong>show-models</strong> to display all models, <strong>show-source</strong> to display formatted and coloured source code, <strong>show-doc</strong> to display documentation or <strong>show-middleware</strong> to display list of middleware! If you want to find all show-* helpers, just type show- and press <strong>tab</strong> twice.</p>
<p><img loading="lazy" class="alignnone wp-image-122 size-full" src="https://content.gotripod.com/images/2014/05/tab-completion.png" alt="" width="571" height="161" srcset="https://content.gotripod.com/wp-content/uploads/2014/05/tab-completion.png 571w, https://content.gotripod.com/wp-content/uploads/2014/05/tab-completion-300x85.png 300w" sizes="(max-width: 571px) 100vw, 571px" /></p>
<h3 id="historymanagement">History Management</h3>
<p>Do you like the Linux history command? Now you can use <strong>history</strong> in your console to check history of operations. You can also utilise the options: tail, head, grep – for instance <strong>history &#8211; -grep show-</strong></p>
<p>You can re-invoke line using &#8211; -replay N option.</p>
<p>&#8230; just to name a few! If you want to find more you can go directly to a bundle gems pages, where you can find examples and documentation.</p>
<p>Installation is as easy as adding <strong>jazz_hands</strong> to your Gemfile.</p>
<h2 id="brakeman">Brakeman</h2>
<p>Finally I want to describe the Brakeman gem. This is a static analysis security scanner for Ruby on Rails applications, which can catch most common vulnerabilities.</p>
<p>Installation is easy (like for almost every gem!) &#8211; you just need to add a brakeman entry to your Gemfile.</p>
<p>After installation the brakeman command is available in your system path, so you can then run <strong>brakeman</strong> in your application root directory.</p>
<p><img loading="lazy" class="alignnone wp-image-123 size-full" src="https://content.gotripod.com/images/2014/05/brakeman.png" alt="" width="1022" height="336" srcset="https://content.gotripod.com/wp-content/uploads/2014/05/brakeman.png 1022w, https://content.gotripod.com/wp-content/uploads/2014/05/brakeman-300x99.png 300w, https://content.gotripod.com/wp-content/uploads/2014/05/brakeman-768x252.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></p>
<p>I want to cover couple useful types of vulnerabilities recognized by the <strong>Brakeman</strong> scanner:</p>
<h3 id="sqlinjection">SQL Injection</h3>
<pre><code class="language-sql">Summary.where("email like '%#{params[:q]}%'")</code></pre>
<p>This is one of the basic vulnerabilities in <strong>Active Record</strong>, and also often encountered. Using the <strong>where</strong> method with string interpolation containing user supplied values is open for SQL injections.</p>
<pre><code class="language-sql">SQL Injection | Possible SQL injection near line 7: Summary.where("email like '%#{+params[:q]+}%'")</code></pre>
<h3 id="unlimitedfileaccess">Unlimited File Access</h3>
<pre><code class="language-ruby">File.open("documents/#{params[:category]}")</code></pre>
<p>Creating a file name from data supplied by user can be really harmful. For example, here&#8217;s what happens if we try to assign ‘../config/database.yml” to params[:category]&#8230;</p>
<pre><code class="language-ruby">File Access | Parameter value used in file name near line 7: File.open("documents/#{+params[:category]+}")</code></pre>
<h3 id="regularexpressionvulnerability">Regular Expression vulnerability</h3>
<p>According to http://guides.rubyonrails.org/security.htm <em>&#8220;A common pitfall in Ruby&#8217;s regular expressions is to match the string&#8217;s beginning and end by ^ and $, instead of A and z.&#8221;</em></p>
<p>In Ruby, the ^ and $ pair means line beginning and line end, not beginning and end of string. What does this mean in practice?</p>
<pre><code class="language-ruby">only<em>digit = /^[1-9]*$/
only</em>digit.match("x.match("javascript:run_code();/<em>n123n</em>/") # &lt; MatchData “123” &gt;</code></pre>
<p>We have dangerous security flaw in the most unexpected place! Luckily, replacing ^ and $ with A and z will solve this issue.</p>
<pre><code class="language-ruby">only<em>digit = /A[1-9]z$/
only</em>digit.match("x.match("javascript:run_code();/<em>n123n</em>/") # nil</code></pre>
<p>Why this is so important? Remember that regular expressions are used heavily in <a href="http://guides.rubyonrails.org/active_record_validations.html">model validations</a>!</p>
<p>All possible recognised vulnerabilities can be found in the <a href="http://brakemanscanner.org/docs/warning_types/t">documentation</a>. Fortunately, most of the problems were fixed in Rails version 3.</p>
<p>Do you know any more useful development gems? <a href="/contact">We&#8217;d love to hear from you</a>!</p>


Bloomin Useful Gems

<p>Change is good, or so they say. In our case, we wanted to do some spring cleaning and strip back our website into something a bit more <em>us</em>. A bit more <em>2014</em>.</p>
<p>So here it is. We took a variety of new approaches when compared to our old site, and in this post I&#8217;m going to walk through the ways in which we deployed our snazzy yet performant new site in just a couple of days.</p>
<h2 id="standontheshoulders">Stand On The Shoulders</h2>
<p>Often we&#8217;ll advocate a client starts a new website from a pre-built HTML template &#8211; it gets us up and running quickly and enables them to visualise what the final site&#8217;s going to look like early on. It reduces cost for the client in a pragmatic way and gives us a solid HTML foundation to build on.</p>
<p>With our template selected, we selected two strong foundations: Github Pages and <a href="http://jekyllrb.com/">Jekyll</a>. This enables us to take advantage of the speed of Github&#8217;s platform and keep our entire site in a git repository with Jekyll&#8217;s powerful static site generator.</p>
<p>We are massive fans and advocates of Github and use it everyday when we build software for our Clients. We use it to maintain sensible software source control, backups and management of everything around software development. Yes, its a wee bit geeky, we admit it and its not something we would encourage everyone to do, but we thought, what the heck &#8211; lets do this just because we can.</p>
<p>Working with Jekyll makes life super-simple, much more so than our previous WordPress platform, and all our blogposts are stored a simple markdown files.</p>
<p>We pulled apart our stock template and fitted Jekyll around it. With our freshly written content, we were already getting close to a beta version.</p>
<h2 id="polish">Polish</h2>
<p>Our new site began with one of those parallax scrolling effects which are currently in vogue, a bit like this one on the <a href="http://prinzhorn.github.io/skrollr/">skrollr demonstration page</a>. I&#8217;ve always had a problem with this effect, it seemed sticky when scrolling the page, so when I found the same issue with our site, I took a dive into the root cause.</p>
<p>A superb <a href="http://www.html5rocks.com/en/tutorials/speed/scrolling/">HTML5 Rocks article</a> on the performance of scrolling along with this excellent advice on how <a href="http://addyosmani.com/blog/devtools-visually-re-engineering-css-for-faster-paint-times/">CSS affects painting performance</a> by Addy Osmani gave me a couple of glaring candidates.</p>
<p>Our background images, which slipped past as you scrolled, were all set as background-attachment: fixed. Removing this gave us a slightly more &#8220;ordinary&#8221; feel but a much slicker experience &#8211; the browser no longer felt like it was struggling. Large fixed position elements and backgrounds are something which browsers are still struggling with in certain situations.</p>
<h2 id="cleanup">Clean up</h2>
<p>Next I looked at the stuff we had left from our original HTML template. Our particular template came with a load of extra JavaScript stuff (such as the rather excellent, but unnecessary <a href="http://isotope.metafizzy.co/">Isotope</a>) which needed to be removed. The HTML needed to be tidied and the CSS needed to be minimised. I had a quick look at <a href="http://developers.google.com/speed/pagespeed/insights/">Google&#8217;s Pagespeed Insights</a> and <a href="http://tools.pingdom.com/">Pingdom&#8217;s Website Speed Tests</a>.</p>
<p><img loading="lazy" class="alignnone wp-image-124 size-full" src="https://content.gotripod.com/images/2014/04/googlevspingdom.png" alt="" width="580" height="154" srcset="https://content.gotripod.com/wp-content/uploads/2014/04/googlevspingdom.png 580w, https://content.gotripod.com/wp-content/uploads/2014/04/googlevspingdom-300x80.png 300w" sizes="(max-width: 580px) 100vw, 580px" /></p>
<p>Ok, but not great. Time to go to work.</p>
<h3 id="removetheextrajs">Remove the extra JS</h3>
<p>Pretty straightforward this one &#8211; removed 422 lines of JavaScript, some of which wasn&#8217;t being executed. I also want to minimise the number of HTTP downloads we&#8217;re doing for JavaScript and try to minimise the payload for those HTTP requests. I knocked up a quick shell script to do this:</p>
<pre><code class="language-powershell"># Remove existing build artifacts
rm ./assets/js/build.*

# Combine all of our JS files into build.js, maintaining the include order
cat ./assets/js/jquery.js ./assets/js/jquery.sticky.js ./assets/js/jquery.quote.rotator.min.js ./assets/js/neatshow.js ./assets/js/common.js &gt; ./assets/js/build.js

# Use yui compressor to make a mini version
java -jar ~/Downloads/yuicompressor-2.4.8.jar --verbose -o ./assets/js/build.min.js ./assets/js/build.js</code></pre>
<p>With that, I now only include build.min.js from our master template and we&#8217;ve achieved our goal.</p>
<h3 id="optimisecss">Optimise CSS</h3>
<p>I&#8217;m a fan of the <a href="http://sass-lang.com/">SASS SCSS syntax</a> for authoring CSS, and though the new site doesn&#8217;t fully utilise it yet, I&#8217;d like to do so in the future. For now, we&#8217;ll just use its ability to import other SCSS files and its compressor to produce a minified CSS file. So as well as our main site CSS, our styles.scss file includes some imports:</p>
<pre><code class="language-css">@import "font-awesome";
@import "google-fonts";
@import "syntax";</code></pre>
<p>Then I compile it into a compressed CSS file with:</p>
<pre><code class="language-powershell">sass assets/scss/style.scss assets/css/style.css --style compressed</code></pre>
<p>Again, we&#8217;ve got a single compressed file which we now include from our master template.</p>
<h3 id="optimiseourimages">Optimise our images</h3>
<p>If you&#8217;re a Mac user, take a look at <a href="http://imageoptim.com/">ImageOptim</a> which bundles some great optimisation tools with a very simple UI to compress your image. By running our PNG and JPEG images through ImageOptim you get about a 10% saving on PNG images, so it&#8217;s worth a try.</p>
<p>Now let&#8217;s have a look at what our changes have done for the site.</p>
<p><img loading="lazy" class="alignnone wp-image-126 size-full" src="https://content.gotripod.com/images/2014/04/googlevspingdom-after.png" alt="" width="580" height="154" srcset="https://content.gotripod.com/wp-content/uploads/2014/04/googlevspingdom-after.png 580w, https://content.gotripod.com/wp-content/uploads/2014/04/googlevspingdom-after-300x80.png 300w" sizes="(max-width: 580px) 100vw, 580px" /></p>
<p>Much better!</p>
<h2 id="conclusion">Conclusion</h2>
<p>We&#8217;re not hitting 100% on the scores above, there&#8217;s a little bit more we could potentially do. Because we opted to host with Github Pages, we&#8217;re limited in our control of server-side caching options. In an ideal world we could tweak this to give repeat visitors better performance. However, I&#8217;m pleased that we&#8217;ve managed to polish our original template to the point where it&#8217;s pretty shiny, and it gives us a great platform to take the website into the future!</p>


The Go Tripod Website – A New Hope

<p>You have probably heard about the SSL Heartbleed threat by now. In case you have not, here is a summary.</p>
<h2>What is SSL?</h2>
<p>SSL (Secure Socket Layer) is a protocol that websites use to encrypt and protect data between you and them. This happens in the background whenever you use, for example, online banking.</p>
<h2>So what is Heartbleed?</h2>
<p>Heartbleed is a programming error (or bug as the trade people call it) which provides a vulnerability to allow a person to intercept encrypted SSL traffic. You can read a more in-depth discussion here <a href="http://email.fusionexpress.co.uk/t/r-l-xftrjt-l-s/" target="_blank" rel="noopener">http://heartbleed.com</a></p>
<h2>Am I at risk?</h2>
<p>Yes and no. If you are a client of Go Tripod and we have developed an application for you, we have already taken measures and checked out all of our clients applications. We are all good.</p>
<p>However, other services and applications on the Internet maybe at risk. Those services providers should be checking their own services and resolving the problem. Be cautious in the meantime and contact those companies if you have any concerns.</p>
<h2>What next?</h2>
<p>Go Tripod will continuely monitor and keep a look out for threats and issues. Ensuring you can relax with your drink on a sunny beach in the comfort of knowing we have your back.</p>
<p>We have the tools and the ability to check other platforms, if you know of anyone that you think might benefit from this, <a href="http://gotripod.forwardtomyfriend.com/r-l-2AD73FFF-xftrjt-l-g" target="_blank" rel="noopener">pass on this email </a>or <a href="mailto:support@gotripod.com?subject=Help!%20I%20may%20need%20my%20SSL%20checking%20out" target="_blank" rel="noopener">get in touch with us</a>.</p>


SSL Heartbleed Bug

<p>When your application&#8217;s out in the world, facing the rigours of daily use, there&#8217;s always a possibility that annoying little bugs could start to appear – or, worse, that something critical breaks in an unexpected way.</p>
<p>That&#8217;s why we&#8217;re introducing GT Protect: a flexible support contract, giving you peace of mind that any surprise bugs will be taken care of quickly – without a sudden bill you hadn&#8217;t budgeted for.</p>
<p>We will be contacting you shortly with the details sepcifically regarding your application. Of course, the support contract is not obligatory, but we hope you will find it really helpful and provides peace of mind.</p>
<p>For all support enquiries, problems, questions etc please use our new support ticket platform. To do this, just email your questiion or problem to <a href="mailto:support@gotripod.com" target="_blank" rel="noopener">support@gotripod.com</a> and a ticket will be created for you.</p>


We Support You

<p>As you can see, we’ve given the website a bit of a spruce up over the past few months. Hopefully, we’ve improved the usability of the site, and the updates will assure our customers (and prospective ones), as well as Google, that we are moving with the times and our content is fresh.</p>
<p>Our updates have been mainly cosmetic, but it did alert us to a number of SEO and social considerations that are worth bearing in mind if you are due to do similar work – and they are absolutely essential if you are planning a more comprehensive overhaul.</p>
<h2>1. Strategy</h2>
<p>It might seem obvious, but planning is essential. Pore over your analytics data to see how folks are using the site currently and ask yourself which content is performing best and which might need improving. Work out and prioritise the key areas you are looking to change. For search, this a great time to ensure the keyphrases you are ranking for in Google etc are as relevant (and converting as well) as they were when you last updated (or originally launched!). Ensure you have a complete migration strategy in place if you are moving altogether.</p>
<h2>2. Domain Name</h2>
<p>In simple terms, your domain name is your web footprint to date. Search engines favour websites whose domain names display authority from their age, the amount of relevant content displayed on their pages and the links it crawls from other sites to yours. Changing this without due care will lose all trust from Google et al. and you might unnecessarily be starting from scratch. However, there are certainly times when changing your domain might be important or essential. If so, ranking problems can be minimized by permanently 301 redirecting your old domain to the new one and seeing to update those who link to you (especially the big ones) that you’ve moved.</p>
<h2>3. Links and Landing Pages</h2>
<p>This is a similar issue to what I mentioned above. But you can still run into problems with broken links from websites (hindering your search rankings) and social platforms (potentially affecting traffic from web-users). As above, being sure to redirect old pages to new pages will help. Essentially, you want to ensure that any of the old routes users might have used to get to your site before are ending up in the most relevant place possible, and not at some ugly error page…</p>
<h2>4. 404 Error Pages</h2>
<p>You might be keeping your domain name and have been through your links with a fine tooth comb, but there is always the possibility someone might end up on a page where there is no content anymore – especially during/after a redesign. However, all is not necessarily lost. Customize your 404 Error Pages to ensure users know they are still on the right website, there is a problem and you apologise, and that there are easy links to click through to somewhere relevant (<a href="http://www.gotripod.com/badpage" target="_top">here’s ours</a>).</p>
<h2>5. Transparency</h2>
<p>When redesigning your website, keep your audience updated with the process via your blog, newsletters and social channels. This can be a great opportunity to pool the opinions of your community and to alert them that things will be different and possibly slightly amiss. Facebook is perhaps an example of a site which doesn’t do this so well – judging by the amount of complaints they get from disgruntled users when they implement changes. On that note, if you notice anything strange with our redesign or have any feedback, please get in touch!</p>


5 Key SEO and Social Considerations When Redesigning Your Website

<p><strong>Businesses and organisations with a social media presence are becoming an increasingly everyday occurrence. Yet, as companies continue to experiment with new digital channels to reach existing and fresh audiences, the number of social platforms available is becoming ever-greater and even more diverse.</strong></p>
<p>Sites such as Pinterest, Google+ and Tumblr may not be boasting the same kind of user numbers as Facebook and Twitter, but for many their value lies in the quality of traffic rather than the quantity. So just how suitable are this fresh crop of social networks for business-shaped endeavours? And should Facebook and Twitter be worried?</p>
<h2>Pinterest</h2>
<p>Perhaps the social media platform with the most buzz currently, Pinterest allows its users to ‘pin’ content (such as images and video) to digital pinboards by uploading from their own devices or using the ‘pin it’ button to save stuff from other user’s boards.</p>
<p>The site boasts a uniquely female-skewed user base and is seeing some businesses including Sony and Confused.com engaging well with audiences. Fashion and craft retailers are also reporting good value. One example is <a title="Boticca" href="http://boticca.com/">Boticca</a>, a jewellery and accessories site which has seen Pinterest become its No. 1 social referrer and ‘pinners’ spending more money on average when they get to the site.</p>
<h2>Google+</h2>
<p>Google’s latest entry into the world of social media has been quick to entice brands. This is little surprise, the platform already has 90m+ users (according to <a title="Plus Demographics" href="http://www.plusdemographics.com/">PlusDemographics.com</a>) and the name itself commands a certain degree of authority.</p>
<p>Rather than ‘fans’ or ‘followers’ as with Facebook and Twitter, Google+ deals in circlers. According to a recent report from <a title="Simply Measured" href="http://simplymeasured.com/blog/2012/05/google-brand-page-adoption-and-engagement-are-on-the-rise-study/">Simply Measured</a>, 22% of the top 100 brands on Google+ have more than 100,000 circlers with the automotive industry proving the most popular vertical. However, engagement is a big question with the service. Simply Measured sees engagement improving for brands, too – but it remains to be seen whether this and circler numbers convert.</p>
<p>Another benefit emerging is Google ranking Google+ posts in search rankings (top right of the SERPs) – fresh content via Google+ may be a good way to get your brand seen in Google aside from the organic and paid search listings.</p>
<h2>Tumblr</h2>
<p>Tumblr is referred to as a blogging service and a microblogging service, but also blends elements similar to Pinterest (quick reposting from other Tumblogs) and Facebook (a newsfeed). Ultimately, it is a very simple way to post content online – and easily adaptable should you want to post more visual content, or more typical text-based fare.</p>
<p>The service is already home to more than 30m blogs, with an audience which is largely made up of younger users (56% are under 34, according to <a title="Mashable" href="http://mashable.com/2011/03/20/tumblr-pros-cons-business/">Mashable</a>). Unsurprisingly, businesses with this target demographic in mind are already trying out the service in an effort to engage users and drive them to their websites. To date, posts with a visual aesthetic are performing best (i.e. being shared most) and businesses producing this kind of content – including fashion, music and food – are finding the most value in the service.</p>
<h2>A threat to Facebook et al?</h2>
<p>Pinterest, Google+ and Tumblr are all relative newcomers to the social scene and are all seeing relatively impressive growth in popularity and engagement. As with all new networks, it takes a little bit of time to see whether the effort businesses are taking to establish a presence pays off in terms of users coming to their sites and spending money.</p>
<p>The key is for businesses to remember to research the type of companies and content which look to be doing well on newer social services, before taking the time to dive in. But it is important to acknowledge that there is more to social media marketing than making a Facebook page – and there may be networks where the kind of content you’re producing can go that bit further, or can have other benefits beyond simply spreading your posts far and wide.</p>


The Other Platforms: Where businesses are seeing social media opportunities

<p>When examining how to build a new Sencha Touch 2 application for production, I wanted to make sure I wasn&#8217;t reinventing the wheel. I&#8217;d heard of Sencha&#8217;s commandline SDK tools but this gave me cause to look into it more. Now that I&#8217;ve done so, I&#8217;m impressed, but I think the documentation could be doing with a little more detail. I&#8217;m concentrating solely on deployment for now, though the tool supports other scenarios.</p>
<p>There were a few things we wanted to do:</p>
<ul>
<li>Build, concatenate and minimise our custom SASS theme</li>
<li>Resolve dependencies (in order!) for our JS, then concatenate and minimise</li>
<li>Work out how to incorporate those into our index.html with sensible versioning</li>
<li>Ensure all our caching policies were optimal</li>
</ul>
<p>With one exception, Sencha&#8217;s tool helps us with that. I recommend getting an overview of how to install the <a href="http://docs.sencha.com/touch/2-0/#!/guide/command">SDK Tools at the Sencha Documentation pages</a> first. That guide also gives an overview of the various facilities the tool provides.</p>
<h2>Setup</h2>
<p>If you&#8217;ve used the sencha command to create a new application then you&#8217;re good to go &#8211; you have all the files you need to get building. If not, I recommend you use it to create a new, empty application, and copy over the bits you need to get up and running, and to make sure you&#8217;re adhering to the correct directory structure. The documentation does give a good overview of the directory structure which is required &#8211; take a look at the section &#8220;Understanding Your Application&#8217;s Structure&#8221;.</p>
<p>Once you&#8217;re there, you&#8217;ll have an app.json in the root of your project. It&#8217;s important that you complete this correctly in order to be able to build your project successfully; the &#8220;js&#8221; section needs to have any extra JavaScript dependencies &#8211; such as third-party libraries &#8211; entered.</p>
<p>You don&#8217;t need to add in all of the files you use in your application. The sencha command will resolve all of those dependencies automatically when you build. You do need to make sure you&#8217;re using requires in your application to make the dependency tree clear, but hopefully you&#8217;re doing that anyway.</p>
<p>Assuming you&#8217;ve got app.json ready to go, we can move on to making a build.</p>
<h2>Index.html</h2>
<p>Generally you&#8217;ll access your project via http://localhost/index.html, or something similar. The app.json file will have asked you to specify this URL, and you should have a template index.html created for you if you used the sencha command to generate your new project. Your index.html should have the following line:</p>
<p>This is a key part of the build process, so you need to leave it intact!</p>
<h2>Building</h2>
<p>The aspect we&#8217;re interested in is run via the command:</p>
<pre class="language-powershell"><code>sencha app build</code></pre>
<p>If you run it without theparameter you&#8217;ll see the following:</p>
<p><img loading="lazy" class="alignnone wp-image-130 size-full" src="https://content.gotripod.com/images/2012/05/Screen-Shot-2012-05-02-at-19.19.48.png" alt="" width="946" height="580" srcset="https://content.gotripod.com/wp-content/uploads/2012/05/Screen-Shot-2012-05-02-at-19.19.48.png 946w, https://content.gotripod.com/wp-content/uploads/2012/05/Screen-Shot-2012-05-02-at-19.19.48-300x184.png 300w, https://content.gotripod.com/wp-content/uploads/2012/05/Screen-Shot-2012-05-02-at-19.19.48-768x471.png 768w" sizes="(max-width: 946px) 100vw, 946px" /></p>
<p>This gives you an idea of what&#8217;s going to happen. Here&#8217;s the way the build process works:</p>
<ol>
<li>Copies required resources</li>
<li>Resolves dependencies by firing up a headless web browser and running your app</li>
<li>Concatenates and minifies your JS in the correct order</li>
<li>Builds a HTML5 cache manifest</li>
<li>Generates delta files to minimise what changes get sent to the client</li>
<li>Generates a new version of your index.html</li>
</ol>
<p>There&#8217;s lots happening here, and it depends on what environment you specify when you run the command. To be clear, you can always keep using http://localhost/index.html, and that&#8217;s your development version.</p>
<h2>Testing Environment</h2>
<p>Testing creates a/build/testing/ directory, and you can access the build at http://localhost/build/testing/index.html. In the testing environment, JS gets concatenated but not minified. It doesn&#8217;t do any of the caching/manifest stuff described above, but does resolve all your dependencies into the concatenated file.</p>
<h2>Production Environment</h2>
<p>In addition to the steps taken to build for the testing environment, production will also minimise your JS, create a cache manifest, and as the documentation says: &#8220;Storing all JavaScript and CSS assets inside Local Storage on first load, and patches them via delta updates between releases&#8221;. The <a href="http://www.sencha.com/blog/behind-sencha-command-and-the-build-process/">Sencha blog post</a> goes into more detail on this subject.</p>
<h2>Issues</h2>
<p>We&#8217;re yet to deploy our application to production, so this post is a work in progress. In particular the testing and production builds highlight code issues that aren&#8217;t apparently on development &#8211; deprecation warnings become errors, and there are various issues with the order in which our code is included. I&#8217;m also a little concerned with the delta update mechanism &#8211; I need to do further testing to make sure updates are indeed pushed to clients as expected, as we always want to make sure that they have the very latest code.</p>
<p>You&#8217;ll also notice that the sencha command doesn&#8217;t do anything with SASS. Hopefully this will come in future, but it&#8217;s a simple extra command to generate the theme CSS.</p>
<h2>Conclusion</h2>
<p>The sencha command has become an integrated part of our build process. I&#8217;d like to see more documentation, and the proof will be in our final deployment, but it looks like Sencha have provided another key part of the end-to-end development of a mobile application.</p>
