Snippets and Code

Showcase
1

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…

8 Likes
2

Hey what does the posted code do?

3

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

4

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

5

What do you mean by code infect?

6

Sorry infact
What infact the code did when executed?

7

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(
      $('#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;
  }
}

Read here

1 Like
8

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

9

All good I see the little headings now

10

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
11

How do snippets work?

12

You can have a read here

3 Likes