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.
jQuerybased Chrome extension which brings powerful website editing capabilities to any web page.
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
Here are some videos of my favourite actions:
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:
HTMLelements. For instance you can select 5 different text fields on screen, then replace them with 5 icons from another screen. Very useful.
QM is a chrome extension which runs in the background of every page you open.
JS is injected to process actions and interact with
CSS is injected for minimal styling such as to highlight selected elements, and to enable draggable functionality.
QMlogic is injected into the webpage and awaits for user actions.
ALT + Clickis used to select one or more elements. These are styled by a
CSSclass, then code is run to apply the action to each element independently.
HTMLmanipulation with little code.
HTMLactions like copy/paste/delete were already provided by
jQuerywhich made initial development very easy.
QMconstantly modifies classes and interacts with
HTMLelements. At the time
jQuerywas the easiest and cleanest way to do this.
QM-like functionality into every webpage. Chrome was the dev browser of choice which made it the primary supported browser.