README.md.template

# PageBreakers

Bookmarklets to QA page design

## Layout-Breaker

`javascript:@@LAYOUT_BREAKER_HERE@@`

## Layout-Breaker no-spaces version

`javascript:@@LAYOUT_BREAKER_NOSPACE_HERE@@`

## Jibberishifier

`javascript:@@JIBBERISHIFIER_HERE@@`

## Usage

### Both

- Create new bookmark, copy&paste above oneliner as the boormark link
- Navigate to victim page
- Click the boormarklet
- Profit!!!!11!one!

### Layout-Breaker (both)

Click more times to get more and more text

## Goal


### Layout-Breaker

To see how page layout reacts to varying sizes in text content in order to assess robustness of markup & styles.

### Layout-Breaker no-space

Layout-breaker randomly adds spacing but sometimes a long, non-wrappable text is needed to test specific styles. This version does not generate spacing characters.

### Jibberishifier

To see if after removing meaning from the text the visual cues in the page styling are still effective to convey context & direct focus.

## Known Issues

- Firefox has an [open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=866522) that prevents bookmarklets to run on sites with CSP enabled. Just copy the [raw contents](https://raw.githubusercontent.com/caligin/layout-breaker/master/layout-breaker.js) of `layout.breaker.js` and paste in the js console.

## Roadmap?

- merge as one bookmarket? First click scrambles, second onwards scramble + increase size. (is it even possible? is it useful? is it good UX?)
- be able to jibberishify non-ascii characters? (Right-to-left languages, ideogram-based languages, other...?)
- scalable makefile? for now minimal deps, but want to urlencode to support firefox, need &-escape to use sed... might want to add tests...

## Acknowledgements

- Thanks to everyone on [this reddit thread](https://www.reddit.com/r/javascript/comments/3hbkl9/usability_dont_make_me_think_and_a_bookmarklet/) to inspire me to write this & help refine the ideas.
- Thanks [James](https://github.com/hellojames) for explaining to me the value of this kind of tests.