Development Insights

Insights

Development insights, client advice and news from Go Tripod

<p><a href="https://content.gotripod.com/images/2019/01/photo-1531030874896-fdef6826f2f7.jpg" data-size="1350x900"><img loading="lazy" class="alignnone size-large wp-image-471" src="https://content.gotripod.com/images/2019/01/photo-1531030874896-fdef6826f2f7-1024x683.jpg" alt="" width="1024" height="683" srcset="https://content.gotripod.com/wp-content/uploads/2019/01/photo-1531030874896-fdef6826f2f7-1024x683.jpg 1024w, https://content.gotripod.com/wp-content/uploads/2019/01/photo-1531030874896-fdef6826f2f7-300x200.jpg 300w, https://content.gotripod.com/wp-content/uploads/2019/01/photo-1531030874896-fdef6826f2f7-768x512.jpg 768w, https://content.gotripod.com/wp-content/uploads/2019/01/photo-1531030874896-fdef6826f2f7.jpg 1350w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>Just interested in the code? <a href="#migrator-code">Cut to the chase</a>.</p>
<p>GitHub and GitLab are competing services providing source control products based on Git. Source control enables us to keep track of all of the code changes we make to a project so that we can roll them back in the event of a problem. Seeing the history of a project can also help understand why decisions were made, years after they happened.</p>
<p><a href="https://blog.github.com/2019-01-07-new-year-new-github/">GitHub have just announced</a> that they&#8217;re providing free private repositories for individuals. This is great news for the community at large, but since we run an &#8220;Organisation&#8221; account on GitHub, it didn&#8217;t directly affect us. However, it did give us a chance to re-evaluate how we host our source code. We previously self-hosted GitLabCE, which is a fine piece of software. However, it had two drawbacks:</p>
<p>1. We&#8217;re hosting another server, which requires updating and auditing.<br />
2. There are some third-party services which only interact with GitHub and not GitLab</p>
<p>We decided to close our GitLab server and move to GitHub, and the first step of that is moving our repositories. We had 132 hosted on that server, so moving them one-by-one simply wasn&#8217;t practical. Fortunately, both GitLab and GitHub have APIs which we could use to migrate automatically.</p>
<p>We&#8217;re going to use a Ruby script to call the APIs. The gitlab and octokit gems wrap the GitLab and GitHub APIs respectively, so once we&#8217;ve installed those we need to configure them:</p>
<pre><code class="language-ruby">Gitlab.configure do |config|
  config.endpoint       = GL_ENDPOINT
  config.private_token  = GL_PRIVATE_TOKEN
end

gh_client = Octokit::Client.new(:access_token =&gt; GH_PRIVATE_TOKEN)</code></pre>
<p>Having done so we can fetch all of our GitLab projects:</p>
<pre><code class="language-ruby">gl_projects = Gitlab.projects.auto_paginate</code></pre>
<p>Auto-pagination means we can grab all of them at once. Now, we need to do something with each project:</p>
<pre><code class="language-ruby">gl_projects.each do |gl_project|
# do something in here
end</code></pre>
<p>Firstly, we specify the destination repository in GitHub:</p>
<pre><code class="language-ruby">destination_repo = "#{GH_ORG_NAME}/#{gl_project.name}"</code></pre>
<p>GH_ORG_NAME is a variable containing the organisation which will contain this repository, in our case &#8220;gotripod&#8221;. You&#8217;ll see where to specify this in the full source code later.</p>
<p>Before we can grab the repo from GitLab, we need to make sure we&#8217;re a member of its project. That&#8217;s straightforward:</p>
<pre><code class="language-ruby">begin Gitlab.add_team_member(gl_project.id, 4, 40)
  puts "You've been successfully added as a maintainer of this project on GitLab."
rescue Gitlab::Error::Conflict =&gt; e
  puts "You are already a member of this project on GitLab."
end</code></pre>
<p>And we also need to create the destination repo on GitHub:</p>
<pre><code class="language-ruby">begin gh_client.create_repository(gl_project.name, organization: GH_ORG_NAME, private: true)
  puts "New repo created on GitHub."
rescue Octokit::UnprocessableEntity =&gt; e
  # If error everything else could fail, unless the error was that the repo already existed
  puts "Error creating repository on GitHub: #{e.message}"
end</code></pre>
<p>Finally, we can trigger the import!</p>
<pre><code class="language-ruby">gh_client.start_source_import(
  destination_repo,
  gl_authed_uri(gl_project),
  vcs: "git",
  accept: Octokit::Preview::PREVIEW_TYPES[:source_imports]
)</code></pre>
<p><code>gl_authed_uri</code> is a method defined as:</p>
<pre><code class="language-ruby">def gl_authed_uri(gl_project)
  gl_repo_uri = URI.parse(gl_project.http_url_to_repo)

  "http://oauth2:#{GL_PRIVATE_TOKEN}@#{GL_SERVER}#{gl_repo_uri.path}"
end</code></pre>
<p>If we tried to import from the GitLab repository URL without doing this, it would throw an error telling us we don&#8217;t have authorisation to access it. With this, method, we&#8217;re using our private GitLab token to gain access.</p>
<p>For extra bonus points, we can get a report of the progress of each import using Octopoller:</p>
<pre><code class="language-ruby">Octopoller.poll(timeout: 15000) do
  result = gh_client.source_import_progress(destination_repo, accept: Octokit::Preview::PREVIEW_TYPES[:source_imports])

  print "r#{result.status_text}"

  if result.status_text == "Done"
    nil
  else
    :re_poll
  end 
end</code></pre>
<p>This keeps checking the import until it returns a status of &#8220;Done&#8221;, at which point the import is complete! This makes the migration process a lot slower though, because it&#8217;ll wait until GitHub confirms that it&#8217;s done its work. If you comment out this block, then you can speed through all of the repos and let GitHub do the work in the background. It&#8217;ll email you when an import has completed.</p>
<p>We&#8217;ve made <a id="migrator-code" href="https://github.com/gotripod/gitlab-to-github-migrator" target="_blank" rel="noopener">the full source code</a> of this basic GitLab to GitHub migrator available on GitHub (unsurprisingly!). There&#8217;s some additional configuration code and a simple feature to allow resuming interrupted migrations. We don&#8217;t provide support, but you&#8217;re welcome to open issues and pull requests to collaborate on improving it. There are certainly a number of improvements that could be made (for example allowing an option to disable the progress report without having to comment it out), but we&#8217;ll leave that for another post.</p>
<p>Grab our <a href="https://github.com/gotripod/gitlab-to-github-migrator" target="_blank" rel="noopener">GitLab to GitHub migrator</a> now!</p>


Migrate from GitLab to GitHub

<p>As part of our drive to <a href="https://gotripod.com/insights/jack-trades-master-one/">double-down on software</a> and provide a great experience for our customers, we&#8217;ve been reviewing our hosting infrastructure. We recently talked about how our WordPress clients enjoy <a href="https://gotripod.com/insights/ensuring-security-wordpress-websites/">security and redundancy</a>, and we want to continue to provide that same great experience for the various web apps that we host. In this post, we&#8217;ll look at the three providers we&#8217;ve chosen to partner with in order to make this happen.</p>
<h2>Heroku</h2>
<p>Heroku is known as a &#8220;<a href="https://en.wikipedia.org/wiki/Platform_as_a_service">Platform as a Service</a>&#8221; or PAAS, which means that it provides infrastructure to run an application while abstracting things like operating system updates and configuration of the underlying system components. It integrates with source control to allow us to deploy versioned code (and roll it back in case of issues!), and the <a href="https://www.heroku.com/dynos">dyno</a> model lets us easily deal with high-traffic scenarios. Because Heroku is a cloud-based system, there&#8217;s no single point of failure, which means that if something does go wrong, chances are Heroku will automatically switch things behind the scenes so visitors never see an issue.</p>
<p>Heroku is built on Amazon&#8217;s AWS platform and, as such, it complies with accreditations such as PCI Level 1 and ISO 27001. This, on top of the huge number of Heroku addons and the excellent administration tooling, means that Heroku is our primary choice when we need to host Ruby on Rails or PHP applications.</p>
<h2>Microsoft Azure</h2>
<p>We built a bespoke ASP.NET content management system for <a href="https://gotripod.com/work/tdk/">one of our clients</a>, and since Heroku doesn&#8217;t formally support ASP.NET, we needed to look elsewhere. Azure is Microsoft&#8217;s answer to Amazon&#8217;s AWS and their <a href="https://docs.microsoft.com/en-us/azure/app-service/app-service-web-overview">Web Apps</a> provide a similar deployment model to that provided by Heroku. We can leverage Azure Storage to store uploaded documents in redundant fashion, and use Azure&#8217;s SQL Server support to deliver scalable and highly available databases. While Heroku is perhaps easier to use, Azure is more flexible and lets us work at a lower-level, and as such we&#8217;ll be moving our client&#8217;s infrastructure to Azure in 2019.</p>
<h2>Netlify</h2>
<p>For simpler sites which require little-to-no dynamic content, we turn to Netlify. It offers the same source control-based deployment model as Heroku and Azure, but it doesn&#8217;t support projects that are powered by a programming language or framework like the previously mentioned Rails, PHP or ASP.NET. Instead, its strength lies in making static sites as good as they possibly can be, with free TLS/SSL, caching support, and a redundant delivery network. If needs be, we can augment the static site with some simple dynamic features such as forms, login &amp; registration, and <a href="https://www.netlify.com/features/">custom functions</a>.</p>
<h2>Host with Go Tripod</h2>
<p>You may notice that when we talk about these providers, we&#8217;re reusing certain key terms such as versioning and redundancy. That&#8217;s because these are features that we think should be included as standard by any responsible hosting provider. By setting ourselves up for success, we can focus more on building software and less on maintaining infrastructure. If you&#8217;re looking for peace of mind when hosting your business-critical applications then <a href="https://gotripod.com/contact/">get in touch</a>.</p>


How we host

<p>We recently posted about <a href="/insights/improved-font-loading/">the font loading solution we use on our websites</a>. Further to implementing this technique we noticed that, on this very site, some of the fonts weren&#8217;t quite rendering correctly.</p>
<p>Look at the examples below. The font rendering issues were slight but there was a definite problem with uneven character weighting in the Google fonts we were using (Noto Sans and Cabin).</p>
<p>It&#8217;s particularly noticeable on the crossbars of the capital Hs but you can also see that some of the ascenders are too bold. Capital Ss also show problems where their terminals on the cap line are bolder than their finials on the base line. There is a similar issue with the bold lower case C. Finally, the apices of the lower case Ts aren&#8217;t really rendering at all!</p>
<p>(Also note that the rendering issues are only obvious in the first paragraph of text and in the bold title. The second paragraph of text appears to be rendering correctly.)</p>
<div id="attachment_443" style="width: 1034px" class="wp-caption alignnone"><a href="https://content.gotripod.com/images/2018/07/font-comparison.png" data-size="1920x636"><img aria-describedby="caption-attachment-443" loading="lazy" class="wp-image-443 size-large" src="https://content.gotripod.com/images/2018/07/font-comparison-1024x339.png" alt="Comparative screenshots demonstrating font rendering" width="1024" height="339" srcset="https://content.gotripod.com/wp-content/uploads/2018/07/font-comparison-1024x339.png 1024w, https://content.gotripod.com/wp-content/uploads/2018/07/font-comparison-300x99.png 300w, https://content.gotripod.com/wp-content/uploads/2018/07/font-comparison-768x254.png 768w, https://content.gotripod.com/wp-content/uploads/2018/07/font-comparison.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p id="caption-attachment-443" class="wp-caption-text">Font rendering issues (left) vs. correct font display (right). Click or tap image to enlarge.</p></div>
<p>Tying down what was causing this proved tricky for the following reasons:</p>
<ul>
<li>The problems are only apparent on Windows machines</li>
<li>The problems are more apparent in IE than Chrome</li>
<li>The problems are only apparent with certain font families</li>
<li>The problems are only apparent at certain font size/weight combinations</li>
</ul>
<p>So, to get to the bottom of this we needed to unpick our font loading solution&#8230; We use <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank" rel="noopener">Font Squirrel&#8217;s Webfont Generator</a> to generate compressed <abbr data-tooltip="Web Open Font Format">WOFF</abbr> and WOFF2 files from the original <abbr data-tooltip="TrueType Font">TTF</abbr>s.</p>
<p>The generator offers three modes: Basic, Optimal, Expert. We&#8217;d entrusted it to &#8216;Optimal&#8217; and it transpires that this was causing our problems.</p>
<p>Font Squirrel&#8217;s &#8216;Expert&#8217; mode allows you to adjust a whole host of settings. (See below for a subset of these.)</p>
<div id="attachment_441" style="width: 685px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-441" loading="lazy" class="wp-image-441 size-full" src="https://content.gotripod.com/images/2018/07/font-suirrel-generator-settings.gif" alt="Font Squirrel generator settings" width="675" height="374" /><p id="caption-attachment-441" class="wp-caption-text">Font Squirrel webfont generator settings</p></div>
<p>It turns out that the culprit in this instance is Font Squirrel&#8217;s <strong>Truetype Hinting </strong>algorithm. <a href="https://en.wikipedia.org/wiki/Font_hinting" target="_blank" rel="noopener">Font hinting</a> is a complicated matter, <a href="https://blog.typekit.com/2010/12/14/a-closer-look-at-truetype-hinting/" target="_blank" rel="noopener">the nuances of which</a> are beyond the scope of this post, however, suffice to say that automating the hinting process via the default &#8216;Font Squirrel&#8217; setting proved problematic.</p>
<blockquote><p>When we set Truetype Hinting to &#8216;Keep Existing&#8217; or &#8216;TTFAutohint&#8217; our problems vanished.</p></blockquote>
<p>It&#8217;s worth noting that we&#8217;ve not seen this issue on any other projects so this setting must only affect certain fonts negatively. However, as a bonus, this change also involves a file size saving for the variants of Noto Sans our website uses. See the comparison below:</p>
<div id="attachment_442" style="width: 1034px" class="wp-caption alignnone"><a href="https://content.gotripod.com/images/2018/07/font-file-sizes.gif" data-size="1440x287"><img aria-describedby="caption-attachment-442" loading="lazy" class="wp-image-442 size-large" src="https://content.gotripod.com/images/2018/07/font-file-sizes-1024x204.gif" alt="Comparative font sizes showing that 'Keep Existing' hinting option results in ~10% saving " width="1024" height="204" srcset="https://content.gotripod.com/wp-content/uploads/2018/07/font-file-sizes-1024x204.gif 1024w, https://content.gotripod.com/wp-content/uploads/2018/07/font-file-sizes-300x60.gif 300w, https://content.gotripod.com/wp-content/uploads/2018/07/font-file-sizes-768x153.gif 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p id="caption-attachment-442" class="wp-caption-text">Noto Sans font file size comparisons with different hinting options (&#8216;Font Squirrel&#8217; on the left, &#8216;Keep Existing&#8217; on the right)</p></div>
<p>As such we&#8217;ve now added a config file which includes this change (<code>"tt_instructor": "keep"</code>) to our boilerplate repo.</p>
<p>Moral of the story &#8211; leave font hinting to the font designer!</p>


WOFF font rendering issue on Windows, fixed

<p>As developers, we have a seemingly endless supply of tools at our disposal thanks to the hard work and generosity of the wider development community who, by and large, share their hard work in the hope of making their peers&#8217; lives that little bit easier.</p>
<p>At Go Tripod we&#8217;re always on the lookout for new ways to streamline our processes and improve the quality of our work. Task runners are a great example of this.</p>
<p>Utilising JavaScript, programs like <a href="https://gulpjs.com/" target="_blank" rel="noopener">Gulp</a> and <a href="https://gruntjs.com/" target="_blank" rel="noopener">Grunt</a> can automate all kinds of labour-intensive tasks including, for example:</p>
<ul>
<li>compiling, concatenating and compressing assets (eg. images, <abbr data-tooltip="Cascading Style Sheets">CSS</abbr>, <abbr data-tooltip="JavaScript">JS</abbr>)</li>
<li>live browser reloading for speedy development and testing</li>
<li>auto-prefixing for optimal browser support</li>
</ul>
<p>With these jobs running automatically in the background we&#8217;re able to focus entirely on the task at hand. This increases productivity and makes sure the code we&#8217;re writing is as performant and compatible as it can be.</p>
<p>Our current build tool of choice is a modified version of the excellent <a href="https://github.com/ahmadawais/WPGulp" target="_blank" rel="noopener">WPGulp</a> by WordPress aficionado, <a href="https://ahmadawais.com/" target="_blank" rel="noopener">Ahmad Awais</a>. It does most of the things we need out of the box but since we use <a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a> to separate logic from styling I&#8217;ve amended it to watch <code>.twig</code> files <em>as well</em> as <code>.php</code> files.</p>
<div id="attachment_434" style="width: 640px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-434" loading="lazy" class="size-full wp-image-434" src="https://content.gotripod.com/images/2018/07/Screen-Shot-2018-07-17-at-09.29.26.png" alt="" width="630" height="411" srcset="https://content.gotripod.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-17-at-09.29.26.png 630w, https://content.gotripod.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-17-at-09.29.26-300x196.png 300w" sizes="(max-width: 630px) 100vw, 630px" /><p id="caption-attachment-434" class="wp-caption-text">WPGulp compressing assets and watching for changes</p></div>
<p>Along with a few other minor adjustments, the result is a fast and feature-packed workflow which allows us to build WordPress sites of the highest quality in record time. 💪</p>


The best Gulp build tool for WordPress

<p>We&#8217;re in the early days of planning out a web design-and-build project with a new client. A key part of this process is the creation of a site map.</p>
<h3>The Site Map</h3>
<p>In its simplest form, a site map is a pictorial representation of the pages required of a website. With smaller websites this list of pages is easy to define and it&#8217;s not much more of a stretch to group them into a sensible order.</p>
<p>With larger web projects this task can be much more involved and producing a sensible site map relies on a host of other disciplines (like information architecture and user experience design) but the requirements of the job at hand fall mostly into the former camp.</p>
<p>It&#8217;s worth demonstrating that a sensible site map doesn&#8217;t <em>merely</em> need to show a breakdown of a website&#8217;s pages. Instead it should also show how they fit together, where multiple pages might be grouped via dynamic data sources and what kind of elements might be common to every page.</p>
<p>The trick is fitting all of this information into a straight forward infographic that stakeholders can immediately understand (and preferably print).</p>
<p>Enter our case in point (click to expand):</p>
<p><a href="https://content.gotripod.com/wp-content/uploads/2018/04/site-map.png" target="_blank" rel="noopener" data-size="1262x883"><img loading="lazy" class="alignnone wp-image-274 size-full" src="https://content.gotripod.com/images/2018/04/site-map.png" alt="Example website site map" width="1262" height="883" srcset="https://content.gotripod.com/wp-content/uploads/2018/04/site-map.png 1262w, https://content.gotripod.com/wp-content/uploads/2018/04/site-map-300x210.png 300w, https://content.gotripod.com/wp-content/uploads/2018/04/site-map-768x537.png 768w, https://content.gotripod.com/wp-content/uploads/2018/04/site-map-1024x716.png 1024w" sizes="(max-width: 1262px) 100vw, 1262px" /></a></p>
<p>Note that I have used the homepage to define the site-wide header and footer information as well as the main navigation options. It is clear each navigation option represents a top tier page and it is immediately obvious which option includes additional features, pages or sub-sections.</p>
<p>(Strictly speaking the header and footer should be represented on every page, rather than the homepage alone, but to harness the power of an infographic one must expect some inferral ability on the part of our audience.)</p>
<h3>The User Flow Diagram</h3>
<p>User flow diagrams differ somewhat from site maps in so far as they attempt to demonstrate how a user interacts with a website rather than how the website&#8217;s contents are hierarchically broken down.</p>
<p>Naturally there is some crossover between these two approaches and again the complexity of a user flow diagram will depend on the complexity of the website (or process) concerned.</p>
<p>One way to think of these things is that whilst both diagrams might utilise boxes and arrows, the user flow diagram is more likely to take the shape of a flow chart.</p>
<p>With our current project, there was a loosely defined need for a restricted client area that would allow logged in users to access (mostly product based) information unavailable to regular visitors.</p>
<p>Whereas our client had been quite clear about what content was required of the front-end, defining this &#8216;restricted area&#8217; proved much more elusive. Instead we were given a long list of bullet point thoughts and ideas regarding things they might like.</p>
<p>As it happens, attempting to formalise these loosely defined requirements suits the user flow approach better than the site map approach.</p>
<p>And here is the case in point (click to expand):</p>
<p><a href="https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram.png" target="_blank" rel="noopener" data-size="1262x883"><img loading="lazy" class="alignnone wp-image-275 size-full" src="https://content.gotripod.com/images/2018/04/user-flow-diagram.png" alt="Example website user flow diagram" width="1262" height="883" srcset="https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram.png 1262w, https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram-300x210.png 300w, https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram-768x537.png 768w, https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram-1024x716.png 1024w" sizes="(max-width: 1262px) 100vw, 1262px" /></a></p>
<p>Note that this diagram demonstrates how a user might interact with the website and that the flow, in this instance, is shown from left to right.</p>
<p>Starting with the login process, the customer has a number of options; accessing important information available from their dashboard, amending their account details, or drilling down into specific product information.</p>
<p>Again, stakeholders can immediately make sense of what&#8217;s been proposed. This diagram should, after all, reflect a sensible interpretation of the client&#8217;s hastily compiled requirement list.</p>
<p>But also, importantly, it serves as an early conceptual blueprint that encourages client feedback. The flow diagram, once finalised, will additionally help formalise the development process.</p>
<p>In conclusion &#8211; a collection of carefully thought out infographics can serve as a powerful tool in terms of both defining a new project and improving an existing website or set of software processes.</p>
<p>&nbsp;</p>


Project planning with site maps and user flow diagrams

<p>Back in February <a href="https://gotripod.com/insights/improving-site-response-times-deferring-downloading-web-fonts/">I wrote about a font-loading technique I&#8217;d implemented on a new project</a>, but there was a problem with it &#8211; the script ran on every page load meaning the browser cache was never used to serve the fonts. There are many variations on the same theme with some using session cookies to determine if it&#8217;s a user&#8217;s first visit to the site, but they all come with their own quirks to overcome. After further research and testing I decided that, while not fully supported yet, the most effective and future-proof solution to this issue is not a JavaScript solution, but a CSS one.</p>
<h2>Enter our old friend, <code>@font-face</code></h2>
<p>The <code>@font-face</code> rule has been around as long as I can remember but went steadily out of favour as the popularity of <abbr data-tooltip="Flash Of Unstyled Text">FOUT</abbr> techniques grew. This is because its default behaviour results in a <abbr data-tooltip="Flash Of Invisible Text">FOIT</abbr> while the font is downloaded and with the rise of mobile devices on sluggish connections users can be left with a blank page for seconds or even minutes. This is no longer the case thanks to a new attribute, <code>font-display</code>.</p>
<p><a href="https://caniuse.com/#search=font-display" target="_blank" rel="noopener">Browser support for <code>font-display</code> is growing</a> with the latest versions of Firefox, Chrome and Safari all playing ball. It degrades gracefully for all other browsers, falling back to its default behaviour and, as an added perk, we don&#8217;t need to worry about users with JavaScript disabled.</p>
<h2>Optimising fonts</h2>
<p>Here at Go Tripod we use <a href="https://fonts.google.com/" target="_blank" rel="noopener">Google Fonts</a> for most projects but in their default format (<abbr data-tooltip="TrueType Font">TTF</abbr>) file sizes can be much larger than is required. On slower connections this means the web fonts will take noticeably longer to swap with the system fonts and it&#8217;s best we do everything to deliver these assets to the user as quickly as possible. We use <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank" rel="noopener">Font Squirrel&#8217;s Webfont Generator</a> to convert our TTFs from Google into <abbr data-tooltip="Web Open Font Format">WOFF</abbr> and WOFF2 formats which often reduces their size by over 50% meaning the time it takes to download them is significantly decreased. This coupled with the <code>font-display: swap;</code> attribute means we&#8217;re providing most users with a superior experience which doesn&#8217;t rely on JavaScript, falls back gracefully and will soon be supported by all major browsers.</p>


Improved font loading

<p>At Go Tripod, there are many ways in which we improve our working efficiency. We pick the best technologies, such as WordPress, React or Ruby on Rails. We pick the best services, such as Teamwork, Slack or Xero. But we spend our days sat in front of a computer and the way we interface with these technologies and services is just as important as how we select them.</p>
<p>When coding, the primary interface with code is via an editor, be that an IDE such as <a href="https://www.jetbrains.com/webstorm/" target="_blank" rel="noopener">WebStorm</a> or a classic editor like <a href="https://en.wikipedia.org/wiki/Vi" target="_blank" rel="noopener">vi</a>. My current editor of choice is <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">Visual Studio Code</a>, built from the ground up by Microsoft to be a fast and extensible editor for coders. In this post I&#8217;m going to show a couple of ways in which VS Code improves my day-to-day productivity.</p>
<h2>Multiple Cursors</h2>
<p>If I need to repeat something, it&#8217;s going to quickly become tedious, and I&#8217;m more likely to make mistakes. How about if I can add magical automatic cursors that replicate my every keystroke?</p>
<p><img loading="lazy" class="alignnone wp-image-249 size-full" src="https://content.gotripod.com/wp-content/uploads/2018/04/multi.gif" alt="a demonstration of multiple cursors at work" width="353" height="86" /></p>
<p>In this GIF, I wanted to amend the hyphen to a colon. I could use find and replace, but it&#8217;s also a good opportunity to try out multiple cursors. I select all lines, then press CMD+Shift+L to add cursors at the end of each line. Then I  hold down Alt and move left to skip over the last word, and then begin editing the hyphens on all lines at once. Knowing the Alt-skip trick is invaluable, because it means you can move your cursors over a whole word at once and keep them aligned with punctuation over multiple lines. Without this, your cursors will become out of sync as you move over characters one-by-one.</p>
<h2>Git Merge Conflicts</h2>
<p>We love <a href="https://git-scm.com/" target="_blank" rel="noopener">git</a>, but hate resolving merge conflicts. These occur when two people have worked on the same file and the work needs to be combined, or merged, into a single version. VS Code&#8217;s interface for resolving these is quick and intuitive:</p>
<p><a href="https://content.gotripod.com/images/2018/04/merge-conflict.png" data-size="842x508"><img loading="lazy" class="alignnone wp-image-254 size-medium" src="https://content.gotripod.com/wp-content/uploads/2018/04/merge-conflict-300x181.png" alt="resolving merge conflicts in VS Code is intuitive" width="300" height="181" srcset="https://content.gotripod.com/wp-content/uploads/2018/04/merge-conflict-300x181.png 300w, https://content.gotripod.com/wp-content/uploads/2018/04/merge-conflict-768x463.png 768w, https://content.gotripod.com/wp-content/uploads/2018/04/merge-conflict.png 842w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>As well as the UI in the editor pane that enables you to choose which change to select, the file explorer on the left on VS Code will show any files in your project with outstanding merge conflicts, and the gutter on the right-hand side of the editor will show any merge conflicts in the currently open file.</p>
<h2>VS Code Extensions</h2>
<p>While VS Code isn&#8217;t unique in allowing extensions, I would say that it is unique in the quantity and quality of extensions that the community has created. Language support for VS Code is detached from the editor itself, instead being supplied by extensions. This means that languages such as go, python, and rust can be written in VS Code and use editor features such as autocomplete and refactoring. Here&#8217;s a selection of the extensions I have installed:</p>
<h3>Bookmarks</h3>
<p><a href="https://github.com/alefragnani/vscode-bookmarks.git" target="_blank" rel="noopener">https://github.com/alefragnani/vscode-bookmarks.git</a></p>
<p>When I have multiple files open, I want to be able to quickly navigate between them. This extension lets me set bookmarks in a file, which I can skip back to at the press of a button.</p>
<h3>WordCounter</h3>
<p><a href="https://github.com/Kirozen/vsce-wordcounter" target="_blank" rel="noopener">https://github.com/Kirozen/vsce-wordcounter</a></p>
<p>This extends the VS Code status bar to include the number of words and characters in a document or a selection.</p>
<h3>Prettier</h3>
<p><a href="https://github.com/prettier/prettier-vscode" target="_blank" rel="noopener">https://github.com/prettier/prettier-vscode</a></p>
<p>Prettier is a code formatting tool which I primarily use for JavaScript and TypeScript. This extension will highlight any problems with my code formatting and even correcting it when I type or save.</p>
<h2>Conclusion</h2>
<p>VS Code brings together many different features to create a tool that improves my productivity. Take a look at the full documentation on the <a href="https://code.visualstudio.com/docs" target="_blank" rel="noopener">VS Code website</a> and learn how to work smarter.</p>


Work smarter, not harder, with VS Code

<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><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>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>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

<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>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>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>


Sencha Touch – Deploying to Production

<p>We have just rolled out an update to Stubmatic. Although on the surface stubmatic looks the same we have made some major changes to the underlying logic in preparation for some future enhancements that we are working on.</p>
<p>For now one of the biggest changes you will notice is we have updated the way events are published. We have changed the terminology from &#8220;published&#8221; to &#8220;listed&#8221; and events can now be listed and delisted from your box office at any time. For example, previously when an event was cancelled or sold out it remained on your box office, you can now optionally de-list these.</p>
<p>In addition to this we have made several fixes and tweaks to the system, including:</p>
<ol>
<li>Sold out events now correctly show as available if more tickets are added</li>
<li>Layout tweaks to assist navigation.</li>
<li>For new events created from today: Have made it clearer and simplified which email address PayPal payments are being sent to.</li>
</ol>
<p>We are centralising product blogs back to our main blog so all updates to Stubmatic will be posted here from now on.</p>
