Snippets and Code

Hey guys,

I have a list of snippets for visual studio code that I have been using for a while now. They are customized to fit Bubbles needs and I thought to my self why wouldn’t I share them with everyone.

I guess what I am hoping for here is that anyone who has something to contribute does. This could be anything, like a special script, a technical or a method, code, editor tricks, plugin editor trick…

So I have created a GitHub where we can start to add some out small tricks together. So don’t be shy and get sharing

@emmanuel can we please have this post pinned for a couple of days. Just to get the ball rolling, it would be great for the bubble team to also see whats popular…


Hey what does the posted code do?

So far its a collection of visual code snippets to help plugin developers create plugins. But everyone is welcome to add anything they like

Thanks for the reply Ali, I did understand they wheee code just wondering what the code infect did when executed

What do you mean by code infect?

Sorry infact
What infact the code did when executed?

They are a set of snippet that do a variety of things. For example the code below reads the bubble progress bar and returns a value. The current user format is in visual studio code snippet file, but can be easily converted to JavaScript

So the snippet here

	"Bubble - Get progress bar value": {
		"prefix": "Bjs-progressBarValue",
		"body": [
		  "//Get Bubble progress bar value",
		  "function getBubbleProgress() {",
		  "  if (document.getElementById('nprogress')) {",
		  "    let pWidth = Number($(window).width());",
		  "    let pProgress = Number(",
		  "      $('#nprogress')",
		  "        .children('.bar')",
		  "        .css('transform')",
		  "        .split(',')[4]",
		  "    );",
		  "    let pResult = pProgress / pWidth;",
		  "    //Results are returned as a decimal",
		  "    pResult = pResult + 1;",
		  "    pResult = pResult.toFixed(2);",
		  "    return pResult;",
		  "  }",
		"description": "Bubble - Get progress bar value"

Becomes the code here

//Get Bubble progress bar value
function getBubbleProgress() {
  if (document.getElementById('nprogress')) {
    let pWidth = Number($(window).width());
    let pProgress = Number(
    let pResult = pProgress / pWidth;
    //Results are returned as a decimal
    pResult = pResult + 1;
    pResult = pResult.toFixed(2);
    return pResult;

Read here

1 Like

Very cool, can I ask what others you have posted, or is there a way I can tell without understanding code.

All good I see the little headings now

I will probably add more html to that page tomorrow so it can be easily navigated, so for now this is a partial list

  • Bubble - Upload File
  • Bubble - Strip Base64 Type
  • Bubble - Function run once
  • Bubble - Get progress bar value
  • Misc - Wait for an element to be created

and some more simple ones for loading and trigger events

1 Like

How do snippets work?

You can have a read here