Quick Mocks

Jun 2017 - Nov 2018

Originally a 'Hack Day' project, this UI mocking utility became loved by devs and designers alike at a prior company. I won 3 awards and a significant windfall for developing it. jQuery JS Chrome Extension Google Analytics

Key Points

A jQuery based Chrome extension which brings powerful website editing capabilities to any web page.
Was well received and used by 300+ users in a 1000+ person company.
As the sole developer I won 3 high profile awards and recognition from the CEO and R&D Director.

Features

Quick Mocks (QM) lets you modify the layout and text of any webpage quickly and easily to create mock-up designs. Essentially webpages become editable design templates.

Tweak the label on a card component to see if it looks better. Looking for a new banner image? Paste in external images and try them out. QM makes it easy to tweak the UI of an actual website without touching a single line of code.

Think of the browser 'inspector' tool, but on steroids!
- My sales pitch to colleagues

Video Example 'replace' feature.

Here are some videos of my favourite actions:

Edit Text Move Copy and Drag Paste Images Sort Screenshot

Save as single file Compresses all external images and links into a single HTML file which can be re-edited.

Playground A test friendly environment where users can practice actions.

Some other cool features:

All actions support multi-element manipulation. Want to change 5 icons at once? No problem. Need to duplicate a particular button for every card on screen? Easy-as. Multi-element support is very powerful when used correctly.
Copy and paste is available across tabs. Copied data isn’t simply text, it’s a collection of independent HTML elements. For instance you can select 5 different text fields on screen, then replace them with 5 icons from another screen. Very useful.

See more explanation and the history here

Tech Specs

QM is a chrome extension which runs in the background of every page you open. JS is injected to process actions and interact with HTML elements. CSS is injected for minimal styling such as to highlight selected elements, and to enable draggable functionality.

Algorithm

Nearly all actions follow a basic ‘select -> action’ principle.
QM logic is injected into the webpage and awaits for user actions.
ALT + Click is used to select one or more elements. These are styled by a CSS class.
Upon action (e.g. duplicate), selected elements are found by that CSS class, then code is run to apply the action to each element independently.

jQuery

Used to handle CSS selection and HTML manipulation with little code.
Many basic HTML actions like copy/paste/delete were already provided by jQuery which made initial development very easy.
Natively supports multiple element actions. For instance the ‘delete’ action is a simple ‘elements.delete()’ action and works for any number of elements without loops.
QM constantly modifies classes and interacts with HTML elements. At the time jQuery was the easiest and cleanest way to do this.

Chrome Extension

A browser extension is the only way to inject QM-like functionality into every webpage. Chrome was the dev browser of choice which made it the primary supported browser.
Deployment was performed through the Chrome Store which supported decent analytics, A/B versioning, and an employee only download portal.

Challenges

Continue the article here