Shred Text
A JS script to help people doing HTML/CSS to test the resiliance of their code.
It is built in vanilla JS, so it is compatible with all web technology.
How to use in your projects
<html>
<body>
<h1>Hello world</h1>
<script
type="text/javascript"
src="https://unpkg.com/@exfabrica/shred-text/dist/shred-text.umd.js"
defer
></script>
</body>
</html>The script will add a "Shred my page" button at the bottom of the page.
The script is also compatible with async :
<script
type="text/javascript"
src="https://unpkg.com/@exfabrica/shred-text/dist/shred-text.umd.js"
async
></script>On an MVC project, a double @ is required:
<script
type="text/javascript"
src="https://unpkg.com/@@exfabrica/shred-text/dist/shred-text.umd.js"
defer
></script>Features
Text replacement
Allows you to replace all the text of the page or a section by randomized content, to test the resiliance of your containers.
"DOM Query Selector" field
DOM Query Selector will target document.body by default and their children recursively.
You can also type any Query Selector to work on a subset of the DOM Tree.
For exemple : header > nav will replace recursively every element of the header navigation.
"Replacement text" field
Empty by default, replacement text will be "####". Button next to the field will generate a random string when clicked. You can also type whatever you want into this field.
Text font size
Allows you to change the size of the base font, to check the behaviour of the page when texts with rem units are larger.
+/- buttons on lists
Allows you to show/hide +/- buttons for any list (ul / ol) on the page. Those buttons allows you to add and remove items of the list.
How does it works
This script include a Web Component in your page, accessible by a new "Shred my page" button at the very bottom of your page. It allows you to replace every text in your current browser tab, and can be customized:
How to test localy
- install dependencies:
npm i - run the project:
npm run dev
How to publish
The first time :
- build the project:
npm run build - login to npmjs:
npm adduser - publish package:
npm publish --access public
Improvements
- Find a way to retrieve a Query Selector easily