#10 Bubble Makers: Create custom checkboxes, structure your database for performance and learn a JavaScript trick
#10 Bubble Makers: Create custom checkboxes, structure your database for performance and learn a JavaScript trick
Bubble Makers is back!
Hey! Pablo here. Glad to be back. I missed writing and going down Bubble rabbit holes.
This newsletter issue includes:
One section for Bubble beginners
One section for more experienced Bubble makers
One cool app built with Bubble
One tweet related to Bubble that I found inspiring and helpful.
Feel free to skip to the section you think you’ll enjoy the most!
The Beginners Bubble
One of the most typical input elements you will use in your apps is the checkbox.
However, the default checkbox Bubble gives us is not very good. You cannot style it and you cannot resize it.
What you can do is replace this checkbox with an icon.
You can do this by following 3 steps.
Create a custom state
Change the icon in the conditional tab when clicked to mimic the checkbox behavior
Add 2 workflows to change the custom state as needed
I recorded a video to show how to do this in detail:
I’m aware that this section normally shares more beginner-friendly tips. Let me know if this tip is too advanced and should go in the Makers Bubble or if you think the level of complexity is OK for this section.
The Makers Bubble
This week I want to talk about performance. More specifically, about which is the best way to structure a database in Bubble to have fast web apps.
I’m sure you are familiar with the How to Build series of tutorials that Bubble has created. I’m going to quote Emmanuel, CEO of Bubble, to explain what these tutorials are.
The How to Build tutorials show how you can build almost every major web app without code. We have in-depth guides on how you can use Bubble to build custom no-code versions of the most popular websites, apps, and platforms— from Facebook, Twitter, and Airbnb to LinkedIn, Tinder, and Amazon.
I think this series of tutorials is great but, when checking them, one question comes to mind:
"Do these tutorials really show you how you can build every major web app without code or do they teach you how you can build them for a small number of users?
There is a really interesting thread in the Bubble forum created by Sergey Gherman, in which he challenges the way the databases are structured in these tutorials. He uses the Pinterest tutorial to explain why the approach is not good for scalability.
If you don’t know what Pinterest is, it’s a social network used to discover images, GIFs, and videos, save them in your pinboards and share them with your friends.
In this How to Build tutorial, the User table has the following fields:
Sergey explains why he believes the fields “Created boards”, “Created pins” and “Saved pins” should not be included in the User data type. In his opinion, the database structure should be as you can see below:
There are a couple of things worth exploring in this table structure.
Notice how he has a table called PinDetails, that he links with each Pin. In that table, he stores the longer description and the list of images, with the goal of keeping the original Pin table more lightweight. This way, when a list of Pins is loaded, its size is much smaller, in theory.
Sergey assumes that calling a list of Pins does not render the fields under PinDetails ( description_large and images) for each pin.
However, if you open the forum thread, you’ll see that some users argue that if you Do a search for Pins you will also load PinDetails.
If calling a list of Pins meant loading the description_large and images fields for each Pin, the whole purpose of separating the details into two tables would be lost and this would be a waste of time.
Right now, the question I ask myself is:
Can this be solved by having a Pin field under PinDetails, instead of a Pin Details field under Pin?
I have asked this question to some of the best Bubble makers I know. I will be updating this newsletter post as soon as I have a good answer!
Notice how he sets up a table called PinSelected to store the saved pins for each user. He does this to avoid having a List of Users field in the Pin table or a List of saved pins in the User table. The table PinSelected will have a lot of records (every time a user saves a pin you will create a new row!) but it will be easily filtered and sorted.
I think this discussion is brilliant and I am grateful to Sergey Gherman for starting it and to Jordan Faucet for raising so many questions. It’s not easy to ask questions so many times in the way he does (respectfully, explaining perfectly what he doesn’t understand so well, and presenting other angles). Go check it out and let me know what you think.
PS: If you want to go down the performance rabbit hole, you can check these other resources:
Performance Q&A forum topic created by Josh, co-founder of Bubble.
Performance & Scaling section of the Bubble manual. Full of general principles & tips.
Guide to Bubble Performance. Paid resource created by Petter, from Amlie Solutions. I have read it twice and can say that it’s really good!
Bubble App of the Week
This week I want to talk about Minimaps, an app to create simple roadmaps.
Quoting their website, Minimaps allows a team to “organize work, manage priorities, get insightful feedback from customers, and get work done”. They have their own roadmap, of course, in which users can request features and see what’s planned. Very meta and a good example of building in public.
This app is a good example of an upvoting app, like Reddit or Product Hunt, where users can request new features and upvote/downvote the existing ones. In my opinion, this is the best kind of app for a beginner to learn how to bubble.
In fact, one of the first Bubble apps I created was an upvoting app. It allowed me to learn the basic mechanics of Bubbling and got me hooked. Of course, the app was terribly built, with bad design, repetitive workflows, and a lot of data fields I didn’t need. But it worked! It allowed users to sign up, submit tweets, and upvote or downvote them.
One of my main goals for this week is finishing a “build along” video of an upvoting app for the Bubble Crash Course. Hopefully, the first app of the viewers will be better than my Twitter app!
Bubble Tweet of the Week
Pete Thompson shares a cool tip to create elements that open hyperlinks in external tabs, instead of opening them in the same window.
Opening a link in an external tab seems like the easiest thing to do but it’s not so trivial in Bubble unless you’re using the Link element. If you want to use buttons or images, you’ll need the toolbox plugin and a little bit of Javascript to achieve this behavior. I published another video to show you how to do it.
I hope you enjoyed this issue as much as I enjoy sharing what I’m learning.
If you want to talk a bit more about one of those questions, you can DM me on Twitter or reply to this email. Thanks for reading!