Canvas

Lead developer and architect of the custom company framework called Canvas. Canvas is a Vue-based development environment used as We Make Websites’ primary approach for Liquid-based development, it has now been used on over 20 projects for clients such as B&Q, UFC, Grau, HP, Lyle & Scott, and John Hardy.

Canvas is supported by a custom Webpack-based compiler called Basis and a suite of dependencies called Brush, each designed to extend the functionality of Canvas and Basis.

My responsibilities include the original development of Canvas, Basis, and Brush from scratch, and the continued development and support of all parts of the company development ecosystem.

Headline features include:

• Just in time asynchronous Vue component loading for improved performance
• Browsersync-based localhost development environment with local asset server enabling hot module replacement
• Section and settings schemas stored as separate JS files with support for importing re-usable fragments
• Automated Vue to Liquid template conversion
• First class support for Liquid locale strings using the global $string() helper function
• Design tool to automatically convert Figma tokens into CSS variables and text classes
• Synchronised Figma design system to accelerate designer workflow
• Lightweight GraphQL compiler and query function designed for Shopify’s storefront API
• Nested folder structure support and self-contained component folders with all corresponding files in one place
• SVG icons folder automatically compiled into Liquid snippets with base64 inline stylesheet support
• Component CLI tool to scaffold component folder and files automatically based on developer choices
• Automatic creation of critical CSS Liquid snippets based on SCSS stylesheets
• Library of pre-made components installed as packages to help jumpstart development
• Storybook support for Vue component and helper preview
• First class web component support