Introducing locode.io - Code Snippets for your Bubble app 🚀

[lucas.ar]

Are you talking about wrapping an api call from api connector in order to catch 4XX responses ? like here Bubble API connector - Processing HTTP Error / Status Codes

Official bubble support told me that was the way to deal with this issue

[brentsum]

@bartek.dev

I do not know yet (and most people here - hence the low response rate to your question) what’s possible and what’s not with custom code (js, node.js) so maybe that’s one topic you could address in the course.

Good point! I could focus on the limitations I’ve run into and how code snippets solve them.

@boston85719

I think to really make this accessible to no-coders, those with no background in coding, who might not want to spend the time tinkering with the code, the course should go through each of the code sections as well as limitations.

Agreed. Eventually I’d like to have videos explaining many of the snippets in more detail - because they are definitely flexible but that depends on someone’s familiarity with code. My hope is snippets can be an approachable way for Bubble users to learn a little HTML/CSS/JS.

@lucas.ar

It excels by its own, but open to most advanced up-to-date traditional code web development.

Exactly! My current thinking is if Bubble can do almost anything, Bubble plus a tiny bit of code can build anything imaginable

@ambroisedlg

I’ll definitely throw in a few snippets if I think of something valuable

Appreciate it. Look forward to seeing your code snippets!

[brentsum]

@lucas.ar

Are you talking about wrapping an api call from api connector in order to catch 4XX responses ?

So when wrapping API calls in a Node/Express function, you get complete control over how the server responds. So you can write some logic like “if the data I want from the API isn’t returned how I want it, send an error response” and then you can format that response to be something Bubble can recognize easily.

The other benefit is you can pull data from unofficial sources. I made one API that scrapes data from a page based on a parameter passed to the call.

[NigelG]

@brentsum

So when wrapping API calls in a Node/Express function, you get complete control over how the server responds. So you can write some logic like “if the data I want from the API isn’t returned how I want it, send an error response” and then you can format that response to be something Bubble can recognize easily.

I really really really really don’t want to set up some Express function to do THAT when I can do it in Integromat. And I would suggest that nobody else does either. Hugely overengineered for exactly the same thing

If we are to have more code in Bubble, and I think it is a good thing BTW, then we can’t have the situation in this thread.

How calculate user age

Doesn’t actually work. The actual remarkable thing here, is that I managed to get some code to run years ago, and it still works. And then someone comes along, is critical, and then provides a solution that doesn’t work. FML

And this is exactly the reason I discovered Bubble in the first place, having been on a “nocode” platform that was really low-code. After several months of “oh, just add this code” (which never worked) I gave up.

[brentsum]

@NigelG

I really really really really don’t want to set up some Express function to do THAT when I can do it in Integromat. And I would suggest that nobody else does either. Hugely overengineered for exactly the same thing

Great point! I think it comes down to balancing flexibility of tools with time/skills required to set things up. One of the reasons I ended up having to learn so much JS is that I’d get 90% of the way there with Bubble + Integromat/Automate.io and then get stuck on one piece that wasn’t possible. With Express/Node, the limits are usually just a Google search away.

So much of the educational effort needs to be focused on knowing the no-code/low-code landscape well enough to figure out when it’s best to reach for which tool. The issue most of us run into is 1) search Bubble forum 2) find related case where someone has a half-solution 3) try out a plugin with little to no documentation and it doesnt work 4) spend hours trying 4-5 related things and hopefully get one of them to work.

[aj11]

This is incredible. I’ve been forced to throw myself into the world of CSS and JavaScript to get Bubble to do what I need it to do in the past couple weeks, so I’m so glad to have this resource now. Very interested in that course!

[jared.gibb]

Yeah I really like the concepts that you’re providing here. I have a question about embedding my site hi friend. I have tried to do that in the past and it works really great until I need to use her to sign in. Then there is an issue of cross origin cookies setting. Have you found a way to let a user sign in with bubbles negative cited feature when using an embedded page

[brentsum]

Excited to share the newest snippets that went live this week. Thanks to @stephanie from @airdev and Ana from @ZeroqodeSupport for joining the contributor community!

• Remove default dropdown styles: Bubble links dropdown styles to default settings for the browser. Because this often doesn’t match the design of your app, it can be jarring for user experience. This snippet helps you change that
• Vertically center any popup on the page: Popups horizontally center by default, but do not vertically center. This snippet lets you put the popup right in the center of the user’s display
• Stylize/size toggle element: The ionic toggle has much better styling over the default option, but the flexibility is limited. Using this snippet, you can reduce the size of the toggle and stylize it further
• Resize container to viewport: This snippet allows you to resize any container to the user’s viewport height.
• Shrink star rating element: Reduce the size of stars from Star Rating plugin (even more than the smallest size offered by the plugin)

[ambroisedlg]

Resize container to viewport

[ryanck]

What does it do the resize container to viewport?

[brentsum]

Viewport height/width is a responsive property that refers to the user’s current browser viewport (an accurate height + width of their browser window). So 10vw for a container would mean '10% of the user’s current browser window width".

This is great to fill in the gaps of Bubble’s responsive engine, especially with mobile sites. Forcing 100vh, for example, means if a page is opened on mobile the content will “stick” to the browser window, vs the weird behavior of users zooming in and out.

[boston85719]

I’m trying to implement the Remove Default dropdown styles but seems like nothing is changed

This is the setup as explained in the snippet

Any ideas what I’m doing wrong?

[ryanck]

Hello @brentsum,

I´ve read the documentation over and over but since I´m no savvy on code, I don´t know even where to start. Anything you can add to know how to start with it?

Thanks a lot man.

[shaun]

Love this! Great idea and great job!

It would be great if there was a place for people to add short videos on how to use these as well. I know there are instructions at the bottom but video would be amazing!

Also, have you considered opening comments up for the snippets as well with a vote up and down feature?

[ryanck]

Hi @brentsum and others,

Any recommendation of courses so we can extend Bubble? What would you guys do, course of Javascript, Nodejs? Any recommendation of a particular course?

Thanks a lot.

[danimal4580]

@brentsum - thanks for making this - huge addition to the community and super exciting!

Tactically, has anyone used “Embed Bubble Snippet?”. I don’t feel super comfortable with the instructions as described and would love anyone’s input who has successfully used it…

Similarly, I have some JS to help with dynamically resizing repeating groups - will add that in!

[Christophe_HK]

Hey @ryanck,

I think some JS tricks could be great! As an example, I’m trying to get the collapse part of a bootstrap navbar working, but I don’t succeed. When the navbar toggler is clicked (mobile screen), nothing happened. I guess it’s a conflict with Bubble JS but I haven’t found how to get it working (if I find, I will add a snippet!)

[Christophe_HK]

Hey there!

Do you know if there’s a trick to avoid the main screen to scroll when a user scroll within a pop-up? It’s quite annoying to have to scroll back to the top or to the initial main screen position when the pop-up closes.

Thanks!

[daviddr17]

also very interested!

[celob185]

This is awesome!!! @brentsum

PS: I loved your NotionMetric videos. Looking forward to more videos on the BEN stack