Here are my top 10 Bubble tips. I'm Matt, I'm a Bubble coach and no code educator and here are the top 10 things that I think any Bubble app developer should know about.

1. Bubble.io Strengths

First of all, what is Bubble good at? Well I would say that Bubble is good at building dashboards in particular. You could easily build something like this CRM app in Bubble with all the features that you see here such as messaging, such as tracking, inventory. You can build really amazing internal tools and if you're building an internal tool for your industry you might well find that there's other people who are really in demand and want to use that same tool. So you could end up building something for your own business and discover that it's something that you could sell and turn into a SaaS application for your industry.

2. Bubble Limitations

Bubble Tip number two, what does Bubble not do so well? What are Bubble.io's main limitations? And I would say that one of those is that since the introduction of workflow units, some apps have become less viable or maybe not completely viable. And so I would include analytics-based apps in that, simply because the way that Computing Power is now calculated in Bubble and the way that your Bubble app would scale based on cost and through the different plans that they offer, I would say that building a clone of like Google Analytics or say Plausible or Fathom analytics-based software is going to become less viable with Bubble because of the cost. And that's simply because if you're sending a workflow, if you're running a workflow basically for every time the page is loaded and you're spreading that out across hundreds of client websites because you're doing analytics, then it's really going to count up those workload units quickly.

The other group of apps that I'd say are not great to build with Bubble, and this will become a bit of a downer for some people, is native apps like iOS apps or Android apps. And yes, there are many people who have successfully built a web app first and then they've used a process known as wrapping or using a software wrapper to deploy their app to the Apple App Store, the Android Google Play Store, but I think that is just risky. People have done it successfully, you can find plenty of examples of it, however there's always the chance that that app will get rejected in my opinion. I'm really holding out for Bubble to release a proper internal tool baked into their software for creating an iOS and an Android app. And until then, maybe it's fine for an internal project or a side project, but I wouldn't count on building the basis of your business around trying to transform a Bubble app into a native app. Now Bubble can serve as a really good beginner foundation for your web app and your database and your workflows, but then I'd recommend finding some other development platform in order to link in with your Bubble database so that the UI and what the client sees for your app that's built elsewhere, but you can easily integrate that in with what you build with Bubble for web.

3. Avoid Fixed Layout! Use Columns and Rows

My third Bubble tip is about design and that is a plea. Please, please, please don't use fixed layout as a container layout for your groups or your pages. If you're doing anything more than a quick mock-up or a test page or an experimentation, please always use rows and columns and that's simply because when it comes to making your app responsive or it comes to trying to debug why is something looking a bit weird, why doesn't it quite fit in that space, why is it not presenting how I see in the editor, 99% of the time when I'm coaching Bubble clients and working as a Bubble coach, I find it's because they've built their whole app or the majority of their app using fixed layouts. And fixed can be really tempting because I think, "Right, I want a button in the middle of the page." There it is, it's in the middle of the page, but when you come to making it responsive, when you come to putting other items around it, let's put in another group for example, search for group. So I want the group to come up right to the edge of the button and then I want to make it responsive. So if it looks great on desktop, tablet and mobile, it's just going to cause you a real headache. There is a learning curve, but it just means that when your page is rendered for your users, the building blocks of your page, if you open up the browser developer tools, you'll see that Bubble is now using a much more standard CSS, ways of laying out the page. The code that's written it's the way it should be and you only get that if you're using rows and columns. So, bite the bullet, check out some of our other videos about layouts and rows and columns because once you learn how, once you start thinking with rows and columns in mind about how to lay out your page, you won't want to go back, you won't regret it and it's going to make your app building experience so much easier and especially when you're wanting to make it responsive.

4. Paddings and Margins

Following on from rows and columns, my next tip is about how to use paddings and margins. So I've got my green block here, it looks a little bit like a navigation section on my website. And what do I want to indent it in from my group A? Well, it could be really tempting to use margins. So I'm on my group B, which is green, and I say take it in by 20 there, and take it in by 20 there. But the trouble is now the width of my green has added 20 pixels to either side. A better way to do it is to reverse your approach and instead think I'm going to add in a padding to the parent element, and then I can set my width to 100%, and then it's just going to sit more nicely in there, it's going to make it much more easily to make it responsive in the future. So margins, margins are great, margins can be used for like adding 20 pixels to the top of here so I move everything down from my page to the top of my page but padding is great if you are working between a child and a parent.

5. Understanding different Bubble app versions (text/development/live)

Bubble tip number five is about versions. Because every Bubble app has got at least two versions and here's where you can find them. By clicking on the branches or the main, depending on where you are in the app, this button up here. And this app has got two versions, which is the main, which is under the subheading of development, and then the live version. So when you're making changes to your app, you'll be making them to a development version, in this case main, and then when I'm happy that those changes have got no bugs, I would deploy to live. Here are some things to consider about the live and the dev version. When you deploy to live, you aren't going to send any database entries, any lines in your database, but you will be sending everything else, such as design, workflows, plugins you've added, data types, that sort of thing. That gets deployed to your live version when you click deploy to live. It's also worth considering who you get to sign up for each one. I would say that development is strictly for internal testing or or maybe family and friends. And you need to understand the differences between users signing up to your development version compared to signing up to your live version. If you think you'll ever need to convert them into paid customers, you'll need to sign them up to your live version because only your live version will use your live Stripe API keys and make actual charges rather than test, demo, not real money charges. But there is a plus side to signing up people to the development version which is that you could be on a call with them, friend or family member could be testing your app and they could say "oh this button doesn't work" and you can fix that instantly, they refresh the page and the fix is in place. So it's quicker to work with someone than debug if you're both using the development version but real users or people that you hope to turn into real users you should really be using the live version for that.

6. Is your Bubble editor Private?

Bubble Tip six is short but essential which is what value do you have in here? I'm in a Bubble app, I'm in general, I'm in settings, I'm under privacy and security, and we've got these different options here. You might think, oh, I don't want my app to be private, I want other people to use it, but look what this is actually attached to. This is define who can see and modify the app. 99% of the time, you want this to be set to private because otherwise that means people can view your editor, they can view bits of your database, especially if you've got everyone can edit. that basically means if someone visits this URL, they can make changes to your app. Whether they've got a, you know, they can just, they can change it, they could recap it in your account. So make sure you've got 'private app' selected.

You'll also notice that I've got, and I'll be changing these once I've finished stopping this recording, that this is our demo app and there are some bits of here that we don't want to be public or for people to stumble across. So I've made it that my dev app can only be accessed by using this username and password. This is not a username and password for a user in my database. This will be used when I visit my app for the first time in the new browser and the browser shows an alert like a pop-up and that's where I put in my username and password. And I would share the same username and password amongst my team if I am protecting my dev version in this way. And it might not be a bad idea to protect your dev version because you might have data in the database, you might have privacy rules for coming onto those that you've not yet shored up. If you're unsure, if you think that it's a little bit risky that there might be data exposed in your dev app, you will want to ensure that you have a username and password set here for the limit access to this app in runtime with username and password.

7. Autobinding (Auto-save)

My next tip is about auto binding. What is auto binding you may ask? Well it's basically autosave. So I've got a list of products where products as a data type in my database and that this is my repeating group. And you can see that I've got a label, it's just ordinary text, and then I have an input and at the moment I have the initial content set to be the value label. So what if I wanted to rename this to "red trainers"? I'd have to add in a button and that can be appropriate on many occasions. But what if I wanted to give my user a slightly quicker experience and I basically auto-saved it? Well, that's where auto binding comes in. So I go into my field and I say enable auto binding and I select the label field. I then have to go into my privacy rules, which we'll explore more in only a few seconds time, for my products and I'll just define a rule when I say user and say this products creator is current user just so I can demonstrate this auto binding bit. Label, that should cover it. I'm going to refresh the page and so let's change this to red. Ah, I don't have permission to do it. I'm signed in as the wrong user, but you get the idea. In fact, I'm just going to say anyone can auto bind. Very unlikely you're going to want to set this up, but look I can change it to red and it's now updated to red trainers. On auto binding you may want to consider giving your user some sort of feedback. You can trigger an alert after an auto binding operation is completed. Let me show you how. We can say show alert and so you can add in a Bubbles core alert element into that and so you could show a little alert in the top right corner on the same, saved, something like that, because some people, maybe they've never used Google Docs before, they're gonna ask, "Well, how do I save this? Is it saved?" It always helps to give your users a bit official feedback that indeed the change they've made has been saved. So that's auto binding.

8. Privacy Rules

As promised, privacy rules. I'd say one of the key things that I see people misunderstanding or neglecting altogether, so let's set up a simple privacy rule for order. So imagine I was setting up a marketplace for an e-commerce store with Bubble, and I want to set up the appropriate rule for order. So I'll say user, this can be any label that you like, and it's very unlikely that you want anyone, absolutely anyone viewing your site to view order history for anyone, so we're going to lock it down, and we'll simply say that when this order's creator is current user, that then they can access all the fields. This is really simple. This is what you will need most of the time for all of your data types. You will need to expand upon this and make it much more complex. If you've got different roles within a team or an organization and you want to restrict who can see what, This will work fine if the user creates it, but what if you're creating a dashboard for your sales manager or your operations manager for your shop? Well, you'll need to create a rule for that person. So you would add in a rule and we would say "shop manager". Okay, and then you'd need to find some sort of expression that works there. You could have something like current user, and then you'd have a field called role, and you could use an option set for that. Current user's role is shop manager, and then again you're saying that they can view everything. But this is what you'll need to get started, and it's the simplest one. I use it a lot. You simply say this data types creator is current user.

9. SendGrid and Transactional Emails

For my ninth Bubble tip, I sometimes think to myself, "won't somebody think of transactional emails. What are transactional emails? Well, they tend to be emails that your app sends because your user has taken an action. So your welcome email or email confirmation email, password reset email, these are all quite essential aspects, but I see a lot of people not considering them and leaving them to last and then realizing that actually there's quite a big task to think about all the different transactional emails you'll need. Two things I want to point out though on this. One is that Bubble has got a built-in integration with a transactional email provider called SendGrid. And that's what SendGrid is used whenever you use the workflow action Send Email. Or if you just use the default passagery Set Email, that sort of thing. It goes through SendGrid. Now you'll want to set up your own domain name and get your own SendGrid API key and and enter this into the email settings here, which are exposed when you add in your own domain name. And that is so that you are sending emails under your own identity, rather than them being sent from some Bubble, pooled email address that is much more likely to end up in someone's spam and far more, it just doesn't look as professional. You want your emails coming from your identity. And to do that, you would set up a SendGrid account and enter your SendGrid API key in here. Now, SendGrid and the integration that Bubble has created with SendGrid is a little bit out of date. In fact, you can't make use of some of SendGrid's newer features such as their newer template designs so it can be a little bit frustrating and a little bit limiting. So I would recommend that you get to grips with the Bubble API connector and you check out some of our own videos on transactional emails. very quickly you can set up a very quick integration in with Postmark. I love Postmark. I've been a page user Postmark for many years now. I've used them on WordPress sites, I've used them on Bubble sites. But there's a new arrival too and we've got a video we just released on them called Loops. Loops has positioned themselves as the all-in-one solution in a very simple way for modern SaaS. You've got marketing and transactional emails combined in one tool. So are you thinking transactional emails now? Well, make sure you do.

10. Quickly test different users with 'Run as user'

Now, I've kept my favourite Bubble tip till last, because it's something that when I'm running a Bubble coaching session with someone, helping them develop their Bubble app live over Zoom, this is something that time and time again, I get the response of, "I just wish I knew that."

But before I share that tip, you're watching this video and you've got this far because you are learning Bubble, you have started your no-code development journey and so you want to discover more Bubble tutorial videos and we have got many more, more than you can find on our YouTube channel. We have member exclusive videos that you can only find at planetnocode.com. So head to planetnocode.com to accelerate your Bubble journey and join our No Code Developer community there.

What's this final tip? Well, it's run as. So I am logged in as a user here. I've put this label up here to say current user's name is Adam. If I go into my database and go on to users. I've got two users set up in my dev version of my Bubble app and I'm currently logged in as Adam. Now I don't have a registration workflow, I don't even have a sign-in workflow set up in my Bubble app here. So what if I wanted to quickly test the app as Matt instead. Well, it's so simple. I just click run as, and it opens in the new tab. But now I'm logged in as Matt. Watch, I can go back. Let's run as Adam again. I'm now logged in as Adam. Okay, saves so much time. If you want to test your app and you should be testing, especially if you've got different levels of access, who can see what or like two different types of users, like you get you get in the marketplace, you've got buyers, you've got sellers, you'll be testing and testing and testing. And you'll wanna be testing as your different test users, and you can quickly swap between them using the run as command in the row of your Bubble database under your data type of users.

Wrap up

So that's it. Those are my top 10 tips that I think everyone should know and everyone would benefit from before they set out and creating their Bubble No Code app, whether you're a beginner or advanced. I mean, even if you've been using Bubble for years, I hope that you picked up something. Maybe you've got a Bubble Top Tip and it's something that you think, "Oh, this was amazing when I learned it," and you would love to share it. Well, I encourage you to leave a comment down below. I'm going to read every single comment. It's great that the Bubble community is so supportive of each other. So leave your Bubble tip down below. And if it's a great one, I'll even make a video about it too.