Yarn

Weaver approached Phil Thompson to built the front-end of a one page web app, Yarn which was based upon a JSON API created by Weaver dev, Tadeusz Wójcik.

The brief:

Weaver’s in-house designers supplied initial design concepts of Yarn which they described as A service that measures the vocabulary difficulty of web pages and Phil completed the front-end and integrated it with the JSON API.

The design had to work on mobile as well as larger devices so it was clear that SVGs would need to be used, coupled with CSS animations to make sure everything looked crisp and ran smoothly across devices.

The site is ‘one-page’ app that makes use of basic PHP alongside HTML, CSS (written with Sass) and JavaScript (jQuery for its cross-browser AJAX functions as well as its Sizzle engine) to grab the API’s JSON data and to trigger CSS animations.

Weaver work by creating a basic design concept, passing it over to a FE dev who prototypes it then the designer suggests iterations and it goes in circles like that until it evolves into a finished product i.e. this was not a traditional waterfall model.

Client feedback

“Phil played an instrumental role in bringing the user-facing aspects of Yarn to life, applying himself diligently and effectively to the implementation of some intricate infographic animation challenges (not least our radial-swooshing, bouncing double donut chart!).”

Luke Razzell, founder of Weaver (@weaverluke)

Specific challenges:

The site makes use of the ChartistJS, which is a fantastic library for creating responsive graphs. This worked great but creating different types of graphs together e.g. a line chart and a bar chart so one had to be placed on top of the other with CSS.

Animating SVGs with CSS

SVGs, CSS and 3rd party JS libraries in combination are tricky. The design called for a donut chart that animated by ‘filling-in’ its segments clockwise (read CSS-tricks How SVG Line Animation Works for details). This was tricky because ChartistJS drew the paths in such a way that meant line animation would only play counter clockwise. So cue a lot of head scratching and calls on Twitter for help before a kind soul helped out with a bit of code that reversed the SVG paths with a bit of JavaScript.

Another issue was encountered with the animating of the SVG loading graphic (which would appear during AJAX calls to let the user know processing was going on behind the scenes). The idea was for the SVG ‘fill-up’ with colour clockwise one colour at a time e.g. start off with no colour, then the circle would become red, then the red would be erased then it would fill up with the next colour then that would be erased and so on. Then when the AJAX call came back the SVG needed to be filled-in and red. If the user resubmitted the form, the process had to start over again.

This proved tricky with different SVG paths. In the end the answer was to use JavaScript to check for the end of a CSS animation then at the end of the animation to update the source order of the SVG paths inside the SVG which re-triggered the SVG to animate again. When the AJAX call came back, the SVG kept animating but the red path in the SVG was display:block‘d with its line animation turned off while all the other paths were display:none‘d.

Timelines:

  1. December 2014 – Phil approached by Weaver
  2. January 2015 – Front-end work starts on Yarn
  3. February 2015 – Yarn launches
  4. Total FE dev time: 64 hours*

* Disclaimer – Rich Higgins another FE dev tweaked the code for launch so FE build time is likely to be a little longer than 64 hours. Rich has also added subsequent changes to Yarn as the idea has evolved based upon user feedback.

Client

Weaver

My role in the project: