@exfabrica/shred-text

v1.4.0

Published

8 months ago

A JS script to help people doing HTML/CSS to test the resiliance of their code.

Downloads

0High
0Medium
0Low

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