This simple javascript library allows you to tweak the DOM of your pages simply by passing it an array of tweaks.
tweak.js can be used to quickly implement:
- A/B Testing
- Text corrections
- Replace images, styles, etc
Anybody can change tweaks:
- Without changes to the underlying application
- Without developer support
- Without delay
npm install @linkorb/tweakjs
Check the demo/ directory for an demonstration + example on how to use tweak.js
To support tweak.js in your application, you'll need to include two tags in the <head /> of your application:
<script type="text/javascript" src="../tweak.js"></script>tweak.js is responsible for parsing and executing the tweaks.
Tweaks are JavaScript objects which describes how to tweak. Here is an example of an array of tweaks:
var tweaks = [
{
"description": "Set custom header text",
"action": "setInnerText",
"selector": "h1:first-of-type",
"value": "This is a my custom header text",
},
{
"description": "Change background color",
"action": "setStyleAttribute",
"selector": "body",
"attribute": "background-color",
"value": "#c0d0e0",
}
];The tweaks shall be loaded separately.
There are 3 ways to load tweaks
- Load tweaks from global variable - It should simply define a variable called
tweaksthat contains an array of tweak instructions. This array should be loaded beforetweak.js
<script type="text/javascript" src="https://my.host/path/to/my/tweaks.js"></script>
<script type="text/javascript" src="../tweak.js"></script>- Load tweaks in the document - A variable
tweakjsis exposed to the global scope. Therefore, after thetweak.jsgets loaded, you can still add tweaks like this in your HTML:
<script>
tweakjs.loader.load(
[
{
"description": "Set div text to bold",
"action": "setInnerText",
"selector": ".post-load>div",
"value": "This text is replaced after pageload.",
},
{
"description": "Set custom inner HTML",
"action": "setInnerHtml",
"selector": ".post-load>span",
"value": "<i>Italic</i>",
}
]
)
</script>- Load tweaks from external resource - Add a URL query parameter
tweaksUrlto specify an external js file.
http://localhost:8080/demo?tweaksUrl=https://my.host/path/to/my/tweaks.js
- setInnerText
- setInnerHtml
- setAttribute
- setStyleAttribute
- addClass
- hide
- show
- removeClass
- remove
- addStyle
- addScript
- execute
You can find demo's of all the actions in the demo/ directory.
To change the source file and build, simply use webpack.
# generates dist/tweak.js
webpack -d
# generates dist/tweak.min.js
webpack -p
- In A/B testing scenarios, you could have a server generate tweaks.js based on visitor properties
- You could have your app generate the
tweaksvariable server-side and include it in the script tag's body (instead of the src attribute)
MIT (see LICENSE)
Check out our other projects at linkorb.com/engineering.
Btw, we're hiring!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent