1copenut/paus-tools

Performance, Accessibility, Usability, Security. If it's open-source and should be an NPM module, you'll find it here!

paus-tools's Issues

[META] Build a custom analytics lib

Description

I've caught the custom analytics bug. I'm interested in learning how users are using my site(s) but not having to worry about stepping on their privacy or GDPR issues. So I'm looking at rolling my own basic lib, using some articles as guides.

Links to get started

• Build Your Own Website Analytics Solution with JavaScript, MongoDB, and Netlify Functions
• How to build your own web analytics and avoid the cookie banner
• Build your own web analytics from scratch
• Using IntersectionObserver to Check if Page Scrolled Past Certain Point

Task list

• #16
• #17
• #18

Move Any Corp (generic and semantic) into an `/examples` folder

Let's get them out of Codepen and into version control:

• Generic AnyCorp
• Semantic AnyCorp

Rewrite the `README` for the design a11y review

It's still showing the older SPA routing experience instructions:
https://github.com/1Copenut/paus-tools/blob/main/examples/designReview/README.md

Write an HTML axe `violations` reporter

Description

I'd like to have a way to ingest a JSON or text file and have it generate an HTML report of a11y violations. This shouldn't be too hard with a simple web app.

MVP

• Allows user to upload a file (potentially dangerous, but would make the tool more useful)
• Parse the file and render HTML. Consider your ui-from-json vanilla JS project as a starting point.
• Make it accessible!

[Analytics] Build a function to track time on page and exit

It'd also be good to know how long users are hanging around on my page(s) and what the most common exit pages are.

[Analytics] Build a function to capture scroll using `IntersectionObserver`

Scroll events are interesting too. The IntersectionObserver API would be perfect for tracking this.

[Analytics] Build a function to capture click events

Build a custom function to capture click events like links, buttons, and actions

Add an examples folder to document using the tools created here

Nx should give you ready access to load packages. That might be a good way to demonstrate the tools' purpose.

Clean up the `perf-tree-map` file for real use

• https://github.com/1Copenut/paus-tools/blob/main/tools/packages/node-perf-treemap/index.js
• Needs cleaned up and fault-tolerance increased