Another “freebie” for you: LOADERR loads JavaScript libraries… even on a free plan.
Video docs to come. In the meantime, as you know, my plugs are pretty much self-documenting. RTFM!
ALSO, LOADERR has the cutest/coolest preview yet seen:
(The number of “pew pew pew”'s coming out of Han’s blaster is the same as the number of scripts you’re loading. Now that’s a UX, amirite?)
Nice one @keith appreciate the double plugin drop. This one looks interesting, be interested to see a quick video walkthrough when you have the time. Again much appreciated.
Hey @luke2: Yeah, I’ll do one of those shortly. Just pushed a minor update and demo page that I’ll use in the video.
And here you go: A little live Bubbling and talky exposition about LOADERR:
(Link to video on Loom: https://www.loom.com/share/8d7807ed8da94574a97e377ee0e107fc)
The demo app I’m working with is here:
Edit mode: https://bubble.io/page?type=page&name=index&id=loaderr-demo&tab=tabs-1
Run mode: https://loaderr-demo.bubbleapps.io/version-test/index/sample:user?debug_mode=true
Hey @keith,
Will this allow us to add something like the js fileloader for Fielstack shown here? I’m trying to figure how to add this to a bubble page. Can you advise?
Thanks,
George
It doesn’t enable anything new really, @gnelson. If you want to include a script in a page in a paid app, just include that script tag in the page (edit the page object and there’s the field for that toward the bottom). I’m pretty sure that’s shown in the video posted above.
But on a free plan, that field is ignored, so LOADERR just does this for you once the page is loaded. It also has advanced/debugging applications as demonstrated in the video.
Now, loading a script (making it accessible in the page) and doing something with the script are two different things.
Once that particular script is loaded you could make the picker open using the code shown (execute it in Run JavaScript, for example) but that won’t get you real far as you have to then handle the other stuff. So anyway, Filestack’s fileloader is better suited for building a plugin.
But for simpler libs that setup some nifty lil function(s) for you to call later (like moment or nanoid [which I show in the demo]) it’s ideal (again, in the context of hobby apps or demo apps).
Hello, great job on the plugin. So since we can’t use things like filestack uploader, can you provide us with some real life examples that we might use this plugin for?
How to load a .js file in my PC onto the page using Loadeer? @keith
@keith thank you as always for great tech, documentation, and video!
Just a heads up that I ran into an issue where scripts weren’t loading in the order specified by Loaderr. The Loaderr element had the following scripts to load:
https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.js,https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.js,https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js,https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.entry.js
For whatever reason, the order matters for PDF.js, which has to come first. If it comes second, as here, then I was getting a runtime error of pdfjsLib not defined (pdfjsLib being an exported module from pdf_viewer.js).
Otherwise smooth sailing. Thanks for the free boost!
Hmm. Well, what LOADERR does is sets all the scripts you specify to be loaded as “async / defer”, and they get appended to the DOM in the order specified in your comma-delimited list.
Now, it could be that when this is done, order is no longer respected (personally, I don’t know, but I THINK that this does still retain script loading order).
One workaround (which again I’m not sure would help) would be to fire multiple LOADERR elements one after the other, to enforce the proper loading sequence.
Thanks @keith and yes - that’s exactly what I did. Just daisy-chained the Loaderr element triggers.
I would say I have pretty strong evidence against order being respected, but since I have a workaround and the impact on page load time is negligible, I’m going to let that dog lie.
Thanks again and hope you had a great Thanksgiving!
Wow, this is awesome, Keith! Thanks 
Hey @keith
How the plugin could help with importing for java library to turn the image to wsq file i have the import java library code , but i want to know , how it will help .
The code below
// 1. Read files to BufferedImage for get width, height. Convert Bit depth to 8-gray
BufferedImage bufferedImage = ImageIO.read(fileInput.getInputStream());
// 2. Convert Bit depth to 8-gray (This is what i had to do to solve this problem)
BufferedImage img = new BufferedImage(bufferedImage.getWidth(), bufferedImage.getHeight(), BufferedImage.TYPE_BYTE_GRAY);
Graphics g = img.getGraphics();
g.drawImage(bufferedImage, 0, 0, null);
g.dispose();
// 3. Convert file format to byte[] and convert to type Bitmap
WritableRaster raster = img.getRaster();
DataBufferByte data = (DataBufferByte) raster.getDataBuffer();
Bitmap bitmap = new Bitmap(data.getData(), bufferedImage.getWidth(), bufferedImage.getHeight(), 500, 8, 1);
// 4. Create file wsq
OutputStream outputStream = new FileOutputStream("c.wsq");
double bitrate = 0.75f;
String commentText = "";
// 5. Write the input file to the generated wsq file
WSQEncoder.encode(outputStream, bitmap, bitrate, commentText);
outputStream.close(
Thank you
This is great! Thanks a lot for Loaderr and I’ll be updating my Karma soon.
I do need to load scripts with paramaters. Do you have any advice on how to achieve that?
Hey @stefano, depends on what you mean, exactly, but you might consider to answer to this question here: javascript - How to pass parameters to a Script tag? - Stack Overflow
Hey @keith thanks for the fastest reply ever.
I’ve read through the directed Stack Overflow, but sorry, got too technical for me. Or maybe there wasn’t a solution there. Just to let you know, here’s what I’m trying to achieve:
I’m loading a script from a Payment Gateway, this script has to be loaded with a parameter ‘data-tokenization-key’ and works just fine if I load it from the Header.
But then I need each client of mine (it’s sort of a marketplace) to be able to insert it’s own tokenization key, hence using Loaderr to load the Gateway’s JS only after I’m sure from which location the item is being bought.
Is the “key” parameter just part of the src attribute for the script? If so, you just make that part of your “Script URL” in LOADERR. Should work fine but lemme know if you have issues. (At its core, all that LOADERR does is append the new script tags to your page’s head.)
Hey @keith thanks for keeping on.
The script is loaded in the header by
<script src="https://secure.nmi.com/token/Collect.js" data-tokenization-key="my-gorgeous-token-here"></script>
When indicating the source on the Loaderr I have tried both single and double quotes with no success. Maybe I’m failing some notation here.
Ah, I see. Yeah, that’s not a feature of LOADERR at the moment. I take it from your description that you have no idea what the key should be until sometime after the page loads, yeah? So, to do this, you’d really need an Action that can be executed so the correct dynamic key value can be used, yeah?
Precisely.
I’ll put some more effort in reading the library’s documentation and maybe there’s some function there that allows me to configure after the load.
Thanks for your attention on this @keith , it’s much appreciated.