A bookmarklet which overlays a highly configurable layout grid over a web-page. Grid can be set to match any set of dimensions, allowing easy development of CSS layouts in the web-browser.
RuleAlso a bookmarklet Rule displays rulers on a page, with all the expected features of the rulers found in a desktop design application, including guides which snap to block display elements and origin location control.
UnitUnit allows measurements to be made between any two points on a web-page, giving basic information about each of the points clicked on, and drawing a line on the page for the measurement.
CrosshairCompleting my design suite, Crosshair draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.
DesignThe above four design assistive tools are all available in a handy single package called Design, which can be exceptionally useful for web-developers working in the browser. Each component part works well with the other parts.
If you have even been frustrated by CSS bugs in the various browsers and thought "if I could just send this CSS parameter to this browser, and this one to that browser" then Conditional-CSS is perfect for you. Allowing you to work around browser bugs, Conditional-CSS allow IE style conditional comment inline with your stylesheets.
Visual EventEven although Javascript (in the browser at least) is an event driven programming paradigm, it can often be really quite difficult to identify which elements will trigger an action. Visual Event is a bookmarklet designed to address exactly this problem.
IntegrityIntegrity is a tool which check that all links and media on your web-site are valid and responding okay. If a particular link is found to give an error, then this is highlighted in the generated map of your site.
LabelIf can often be difficult when discussing with clients to show them exactly what you mean on the telephone. With print drafts w could have stuck post-its on the hard-copy, Label now provides this option digitally!
Built from the ground up with progressive enhancement in-mind, DataTables is a jQuery plugin which provides extensive support for interactive HTML tables. With features such as pagination, filtering, sorting and internationalisation (among many others!) this plug-in is extremely flexible.
KeyTableKeyTable provides Excel style keyboard navigation for any HTML table. With event binding and DataTables integration, this little library can seriously improve accessibility for dynamic tables.
AlertThe confirm() and alert() functions in Javascript are very convenient, but in many cases simply don't make sense (Okay/Cancel might not suit a posed question). Alert allows you to built custom alert controls in the style of desktop applications.
SprySpellSpelling mistakes on a web-site can make your site (or worse your firm) look unreliable and careless, but they can creep through the net so easily! SprySpell will parse your web-page for spelling mistakes and display correction suggestions inline with the page.
SecretSecret is a Javascript library which can pick out letters from any rendered HTML page and display them on screen in a 'magical' way. While mainly developed as experimentation, there are a number of interesting use cases.
This site is the playground and sand-box of Allan Jardine, a user interface developer broadcasting from Edinburgh, Scotland, with primary focus on web-based technologies.
On this site you will find some of my experimental software, as well as my musings on UI development and the state of the web. This site also hosts various projects I have been working on such as Design, DataTables, Alert and SprySpell.