Scott's Portfolio
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
based 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:
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
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.
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.CSS
class, then code is run to apply the action to each element independently.CSS
selection and HTML
manipulation with little code.HTML
actions like copy/paste/delete were already provided by jQuery
which made initial development very easy.QM
constantly modifies classes and interacts with HTML
elements. At the time jQuery
was 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.