{"id":658,"date":"2014-07-02T18:07:09","date_gmt":"2014-07-02T18:07:09","guid":{"rendered":"https:\/\/gosqeng.test\/?p=658"},"modified":"2019-11-28T12:06:49","modified_gmt":"2019-11-28T12:06:49","slug":"engineering-improvements-behind-the-new-gosquared","status":"publish","type":"post","link":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared","title":{"rendered":"Engineering improvements behind the new GoSquared"},"content":{"rendered":"

\"Engineering<\/p>\n

Update on 2014-07-23<\/em><\/p>\n

We’ve now published two more in depth posts on this topic: Optimising for 60fps everywhere<\/a> and Looking forward to the future of JavaScript.<\/a><\/em><\/p>\n

Yesterday, James wrote<\/a> about some of the design challenges we tackled when building the new GoSquared. A primary aim of this update was to make finding functionality and accomplishing tasks fundamentally easier; and with as little friction as possible.<\/p>\n

Achieving these aims presented some interesting challenges. James has already touched on the visual design problems, but I want to explore the challenges in terms of interaction, performance and other technical aspects. Below I’ve highlighted some of the primary improvements we made.<\/p>\n

60fps, everywhere<\/h2>\n

The web is increasingly mobile and we wanted to make sure that the new GoSquared was no exception to that. We spent countless hours optimising JavaScript and scrutinising animation performance.<\/a> Regardless of what device you’re using, the core interface and animations now run at a smooth 60 frames per second.<\/p>\n

More native feel on touch devices<\/h2>\n

On many touch devices, there is a noticeable delay (usually around 250ms) between when you tap on the screen and the browser firing the \u2018click\u2019 event. This is so your device can detect double-taps and trigger scroll or zoom events (for those interested: this delay was recently removed<\/a> in Chrome on Android). However, this delay is unacceptably long if it is to feel \u2018instantaneous\u2019 (the commonly accepted maximum delay is 100ms and has been for years<\/a>). GoSquared has no double-tap or zoom events. We hook directly into touch events to make the interface feel far more snappy and native.<\/p>\n

JavaScript.next<\/h2>\n

There’s a lot of cool stuff lined up for the future of JavaScript, with ECMAScript 6 and 7 currently in progress. Thanks to Google’s ingenious Traceur compiler<\/a>, we’re able to use a lot of those features on both the frontend and our node.js backend. My personal favourite features have to be arrow functions<\/a>, classes<\/a>, and async functions<\/a> (which are especially useful in Node).<\/p>\n

Always in sync<\/h2>\n

People are increasingly using GoSquared on multiple devices, and with this comes increasing complexity of keeping everything in sync between those devices. The new GoSquared is all about making it easier to accomplish everything without interruption. We’ve made sure that everything is kept in sync between any devices with a dashboard open on them. Now, whenever you make a change on GoSquared (such as update a preference, add a new site or share a site with someone), that change will immediately be pushed to all browsers with GoSquared open and without needing to refresh.<\/p>\n

Automated screenshots<\/h2>\n

Across our whole site and support centre, we have over 150 different screenshots of the GoSquared interface in different combinations. Updating all of them manually every time we make any small change to the interface is a massive pain \u2014trust me, we’ve tried it in the past. For this update, we created an automatic tool to generate all the screenshots we need automatically using selenium<\/a> and Chrome in a virtual X framebuffer<\/a>.<\/p>\n

Other little things<\/h2>\n

All our colours, font sizes and transitions are defined using LESS variables. This means consistent styles and animations across the whole interface.<\/p>\n

\"Example<\/p>\n

If you have lots of sites, the site switcher allows you to filter using fuzzy matching.<\/a> For a user, sites will be filtered and prioritised in the list based on which have names and urls that best match what you type. And it doesn’t have to be an exact match either – typing \u201cgsdm\u201d would match a site called \u201cGoSquared Demo\u201d or with the url \u201cgosquared.com\/demo\u201d. Of course all of these improvements enable you to spend less time navigating GoSquared and more time focusing on what’s important.<\/p>\n

I hope that’s a useful overview of everything I’ve been working on over the last few months. I’ll be expanding in more detail on some of the engineering work that went into these improvements in future posts.<\/p>\n","protected":false},"excerpt":{"rendered":"

Update on 2014-07-23 We’ve now published two more in depth posts on this topic: Optimising for 60fps everywhere and Looking…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1452],"tags":[],"class_list":["post-658","post","type-post","status-publish","format-standard","hentry","category-engineering"],"yoast_head":"\nEngineering improvements behind the new GoSquared<\/title>\n<meta name=\"description\" content=\"60 fps, the best of JavaScript and touch device enhancements. A primary aim of this update was to make finding functionality and accomplishing tasks fundamentally easier; and with as little friction as possible.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Engineering improvements behind the new GoSquared\" \/>\n<meta property=\"og:description\" content=\"60 fps, the best of JavaScript and touch device enhancements. A primary aim of this update was to make finding functionality and accomplishing tasks fundamentally easier; and with as little friction as possible.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared\" \/>\n<meta property=\"og:site_name\" content=\"GoSquared Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GoSquared\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-02T18:07:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-28T12:06:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@floopily\" \/>\n<meta name=\"twitter:site\" content=\"@GoSquared\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"JT\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#organization\",\"name\":\"GoSquared\",\"url\":\"https:\/\/www.gosquared.com\/blog\/\",\"sameAs\":[\"https:\/\/instagram.com\/gosquaredteam\",\"https:\/\/www.linkedin.com\/company\/go-squared-ltd.\",\"https:\/\/www.facebook.com\/GoSquared\",\"https:\/\/twitter.com\/GoSquared\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png\",\"contentUrl\":\"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png\",\"width\":1270,\"height\":250,\"caption\":\"GoSquared\"},\"image\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#website\",\"url\":\"https:\/\/www.gosquared.com\/blog\/\",\"name\":\"GoSquared Blog\",\"description\":\"Turn visitors into customers.\",\"publisher\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gosquared.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#primaryimage\",\"url\":\"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg\",\"contentUrl\":\"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#webpage\",\"url\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared\",\"name\":\"Engineering improvements behind the new GoSquared\",\"isPartOf\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#primaryimage\"},\"datePublished\":\"2014-07-02T18:07:09+00:00\",\"dateModified\":\"2019-11-28T12:06:49+00:00\",\"description\":\"60 fps, the best of JavaScript and touch device enhancements. A primary aim of this update was to make finding functionality and accomplishing tasks fundamentally easier; and with as little friction as possible.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gosquared.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Engineering improvements behind the new GoSquared\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#webpage\"},\"author\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/bfcd35bf2eba92ecbeea67937cd23eef\"},\"headline\":\"Engineering improvements behind the new GoSquared\",\"datePublished\":\"2014-07-02T18:07:09+00:00\",\"dateModified\":\"2019-11-28T12:06:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#webpage\"},\"wordCount\":655,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg\",\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/bfcd35bf2eba92ecbeea67937cd23eef\",\"name\":\"JT\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/772e026206b900a5ba17ebbe63e34a4c8a9103524cf0ba3accfa38b14d7d03ba?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/772e026206b900a5ba17ebbe63e34a4c8a9103524cf0ba3accfa38b14d7d03ba?s=96&d=mm&r=g\",\"caption\":\"JT\"},\"description\":\"JT is a co-founder and the lead front-end engineer at GoSquared. He's responsible for the shiniest of the shiny projects we work on.\",\"sameAs\":[\"https:\/\/twitter.com\/floopily\"],\"url\":\"https:\/\/www.gosquared.com\/blog\/author\/jt\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Engineering improvements behind the new GoSquared","description":"60 fps, the best of JavaScript and touch device enhancements. A primary aim of this update was to make finding functionality and accomplishing tasks fundamentally easier; and with as little friction as possible.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared","og_locale":"en_US","og_type":"article","og_title":"Engineering improvements behind the new GoSquared","og_description":"60 fps, the best of JavaScript and touch device enhancements. A primary aim of this update was to make finding functionality and accomplishing tasks fundamentally easier; and with as little friction as possible.","og_url":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared","og_site_name":"GoSquared Blog","article_publisher":"https:\/\/www.facebook.com\/GoSquared","article_published_time":"2014-07-02T18:07:09+00:00","article_modified_time":"2019-11-28T12:06:49+00:00","og_image":[{"url":"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg"}],"twitter_card":"summary_large_image","twitter_creator":"@floopily","twitter_site":"@GoSquared","twitter_misc":{"Written by":"JT","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.gosquared.com\/blog\/#organization","name":"GoSquared","url":"https:\/\/www.gosquared.com\/blog\/","sameAs":["https:\/\/instagram.com\/gosquaredteam","https:\/\/www.linkedin.com\/company\/go-squared-ltd.","https:\/\/www.facebook.com\/GoSquared","https:\/\/twitter.com\/GoSquared"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png","contentUrl":"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png","width":1270,"height":250,"caption":"GoSquared"},"image":{"@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.gosquared.com\/blog\/#website","url":"https:\/\/www.gosquared.com\/blog\/","name":"GoSquared Blog","description":"Turn visitors into customers.","publisher":{"@id":"https:\/\/www.gosquared.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gosquared.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#primaryimage","url":"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg","contentUrl":"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg"},{"@type":"WebPage","@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#webpage","url":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared","name":"Engineering improvements behind the new GoSquared","isPartOf":{"@id":"https:\/\/www.gosquared.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#primaryimage"},"datePublished":"2014-07-02T18:07:09+00:00","dateModified":"2019-11-28T12:06:49+00:00","description":"60 fps, the best of JavaScript and touch device enhancements. A primary aim of this update was to make finding functionality and accomplishing tasks fundamentally easier; and with as little friction as possible.","breadcrumb":{"@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gosquared.com\/blog"},{"@type":"ListItem","position":2,"name":"Engineering improvements behind the new GoSquared"}]},{"@type":"Article","@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#article","isPartOf":{"@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#webpage"},"author":{"@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/bfcd35bf2eba92ecbeea67937cd23eef"},"headline":"Engineering improvements behind the new GoSquared","datePublished":"2014-07-02T18:07:09+00:00","dateModified":"2019-11-28T12:06:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#webpage"},"wordCount":655,"commentCount":0,"publisher":{"@id":"https:\/\/www.gosquared.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#primaryimage"},"thumbnailUrl":"https:\/\/static.gosquared.com\/images\/liquidicity\/14_07_02_neodev_02.jpg","articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.gosquared.com\/blog\/engineering-improvements-behind-the-new-gosquared#respond"]}]},{"@type":"Person","@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/bfcd35bf2eba92ecbeea67937cd23eef","name":"JT","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/772e026206b900a5ba17ebbe63e34a4c8a9103524cf0ba3accfa38b14d7d03ba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/772e026206b900a5ba17ebbe63e34a4c8a9103524cf0ba3accfa38b14d7d03ba?s=96&d=mm&r=g","caption":"JT"},"description":"JT is a co-founder and the lead front-end engineer at GoSquared. He's responsible for the shiniest of the shiny projects we work on.","sameAs":["https:\/\/twitter.com\/floopily"],"url":"https:\/\/www.gosquared.com\/blog\/author\/jt"}]}},"wps_subtitle":"60 fps, the best of JavaScript and touch device enhancements","_links":{"self":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/posts\/658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/comments?post=658"}],"version-history":[{"count":0,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/posts\/658\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/media?parent=658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/categories?post=658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/tags?post=658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}