I found myself re-using codes, functions & several js features on my personal learning projects and figured why not put them all together in a single script!
This javascript library compiles some of the best open source contributions, js optimizations and snippets one may find useful:
- Functional / Declarative way to achieve complexe operations
- Using the Fetch API to load HTML, CSS, JS, JSON
- Load iFrames & Images using IntersectionObserver
- Chain multiple events / inits on window.onload
- Get values from URL Parameters with a one-liner function
- Modern Vanilla Javascript
- Load barf.js library in the head of your root html document before any other css or js
// index.html
<!DOCTYPE html5>
<html lang="en">
<head>
..
<script src="./js/barf.js"></script>
..
</head>- You're done!
Lazy Load Elements using data-lazy='1' custom attribute and set the link to data-src, leaving src empty:
// index.html
<img src="" data-src="url_to_image.png" data-lazy='1'>
<iframe src="" data-src="https://www.youtube.com/watch?v=efs3QRr8LWw" data-lazy='1'></iframe>Use barf.HTML(URL, ID); to load html snippet within a specific element:
// index.html
<div id="content"></div>
<script>barf.HTML("/post/article1.html", "content");</script>You can use Promise.all to load several html snippets in their respective elements:
// index.html
<div id="nav"></div>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
<script>
const snippets = [
barf.HTML("/templates/nav.html", "nav"),
barf.HTML("/templates/footer.html", "footer"),
barf.HTML("/page/header.html", "header"),
barf.HTML("/post/article1.html", "main")
]
Promise.all([snippets]);
</script>Use barf.CP(URL); to load html snippet / component in the same location as the script tag. Note that this function uses XHR insted of Fetch. Also, if you are loading CSS or JS that way, it"s best to inline them within style / script tags and save your file as html:
<script>barf.CP("./components/jsModal.html");</script>
// in jsModal.html
<script>whatever code that generates a modal window</script>OR
// index.html
<div id="menu">
<script>barf.CP("/components/navigation.html");</script>
// '/components/navigation.html' file content will be inserted here and replace the barf.CP script tag
</div>
<div id="content"></div>
<script>barf.HTML("/post/article1.html", "content");</script>Use barf.CSS(URL); to load css files. The script will fetch the css file, create and insert its content into a style tag injected at the end of the head tag:
// index.html
<html>
<head>
<style>
/* contents of main.css */
</style>
</head>
<body>
<script>barf.CSS("/css/main.css");</script>
<script>barf.HTML("/post/article1.html", "content");</script>
</body>
</html>Use barf.JS(URL); to load js files. The script will fetch the js file, create and insert its content into a script tag injected at the end of the body tag:
// index.html
<html>
<head>
..
<style>
/* contains main.css */
</style>
</head>
<body>
..
<div id="menu"></div>
<script>barf.CSS("/css/main.css");</script>
<script>barf.HTML("/snippet/nav.html", "menu");</script>
<script>barf.JS("/js/main.js");</script>
<script>
// will contain main.js
</script>
</body>
</html>Use barf.JSON(URL); to load json. The script will fetch the json file / endpoint, create and insert its content into a script tag, with the proper mime-type, and inject at the end of the body tag:
// index.html
<html>
<head>
..
<style>
/* contains main.css */
</style>
</head>
<body>
..
<div id="menu"></div>
<article id="post">
</article>
<script>barf.CSS("/css/main.css");</script>
<script>barf.HTML("/snippet/nav.html", "menu");</script>
<script>barf.HTML("/articles/post23.html", "post");</script>
<script>barf.JS("/js/main.js");</script>
<script>barf.JSON("/data.json");</script>
<script>
// will contain main.js
</script>
<script type="application/json">
// will contain data.json content
</script>
</body>
</html>Use add2onload(); script to run several events on window.onload:
<script>
const html = [
barf.HTML("./nav.html", "nav"),
barf.HTML("./footer.html", "footer")
];
const styles = [
barf.CSS("/css/main.css")
];
add2Onload(() => {
document.getElementById('player').style.visibility = 'visible');
});
add2Onload(() => {
Promise.all([html, styles])
});
</script>
// all events handled by add2onload(); will run on window.onload Use barf.URL(param); to get the values:
URL = https://example.com?item='album'&artist='favBand'
// barf.URL('item'); > will return the 'album' value
// barf.URL('artist'); > will return the 'favBand' value
Use Promise.all or Promise.allSettled() :
const loadEverything = [
barf.CSS("/css/main.css"),
barf.HTML("/snippet/nav.html", "menu"),
barf.JS("/js/main.js"),
barf.JSON("/data.json"),
barf.URL('item'),
barf.URL('artist')
];
Promise.allSettled(loadEverything);- SVGREPO (Barf.JS Logo)
- Open-Source
- Community
- TEST, TEST, TEST
- Examples
- Export / Import functions as modules for leaner development
- Implement webpack / gulp / babel or any other builder - compiler
- Fix bugs
Using this library with a HTTP/2 Static Node Server & a Service Worker can provide you with a blazing fast web app and amazing user experience, without sacrificing the fun factor of development
MIT