🫧 Element Styles, Gradient Button Tricks, WU Reduction, & Quick Bites

Bubble Improvement: New Element Styles Tab

Modernizing the editor interface is a big part of Bubble’s 2024 roadmap. They kicked the initiative off with an overhaul of the Styles tab.

That's what the new Styles tab brings to the table:

• A cleaner UI for a modern look,

• Bigger previews to make your creations pop,

• Element-wise folders that turn navigation into a breeze,

• Easy-peasy style name changes

• Plus, improved default styles for newly created apps.

Hold on tight because this is just the beginning! More UI enhancements are on the horizon, with the next star of the show being the Elements Tree.

Build Tips: Buttons with Gradient Borders on Hover

So, I've been down the rabbit hole of cold plunges lately (thanks, Twitter trends!). Plunge caught my eye, not just for their icy dips but for the slick gradient borders on their buttons. Seriously, the product configuration is a vibe.

Now, of course, the immediate thought: How can I bring that UI magic to life with Bubble?

Here's the deal: Bubble gives us a massive toolbox, and that's cool, but there are always different roads to the same effect. With a web development background, my initial instinct was to dive into custom CSS and sprinkle some HTML magic on a Bubble button.

But wait, doesn't that go against the whole no-code spirit?

After a mental huddle, it hit me – we can pull off the same trick using Bubble's conditional styling, no coding acrobatics needed.

Here's the breakdown:

1. We create our custom button by combining three different standard elements:

   • G:GradientBorder displays the gradient border jazz when the button gets a hovered. Throw in some padding based on your gradient border thickness (mine's 4px)..

   • G:Button is the actual button. Pad it up to give the label some breathing room, and throw in a solid border.

   • T:ButtonLabel specifies the text that makes your button, well, a button.

   

2. Now, here's the secret sauce – when your user hovers over the button, add a gradient background to G:GradientBorder.

   

3. Oh, and make G:Button borders invisible during that same interaction.

   

Preview this baby, and voilà – your button is now as cool as those Plunge website vibes.

Tool Review: Save Workload Units with WU Reducer

If you're deep into the Bubble world, you know that workload units (WU) can be the unsung heroes or villains, impacting your app's costs and performance.

So, the brains behind CoAlias (those who gift your Bubble app whitelabel domains) introduced WU Reducer, currently in its early Beta glory.

I spent the last days giving it a try and here’s a quick summary of my first impressions.

Functionality: 🛠️ 4/5

WU Reducer enters the game with two main benefits:

1. It turbocharges data loading, making your pages load up to 10 times faster. Your users will thank you for the speed boost!

2. Ever heard of caching? WU Reducer promises to slash up to 90% of your WU consumption by caching your data searches. That's some serious money-saving right there.

Say goodbye to resorting to third-party backend builders like Xano until Bubble removes these major shortcomings on their side for good.

Ease of Use: 🪶 1/5

Let's be real – setting up WU Reducer is not a walk in the park. You'll need some advanced Bubble knowledge, but if you're up for a challenge, here are the four key steps:

1. Create a WU Reducer account and set up your app URL and caching preferences.

2. Configure backend API workflows in Bubble, exposing the data types hungry for faster loading to WU Reducer.

3. Define API calls in the API Connector plugin to fetch data from WU Reducer.

4. Load the data you want via API calls as a data source for your elements, like a Repeating Group.

Costs: 💵 5/5

Guess what? It's completely free during the beta phase. Cha-ching! But be quick, first pricing proposals surfaced in the forum.

Conclusion: ⭐ 3/5

In a nutshell, if your Bubble app juggles thousands of data records and often dances on the edge of WU limits, WU Reducer is your new best friend. Try it out while it's free – it might just become your secret weapon to save on Bubble subscriptions down the road.

Quick Bites

• The No-Code Manifesto Revised: 10 years ago, the Bubble team unveiled their no-code manifesto, outlining their vision for the platform. In this revised edition, they're intensifying their commitment to elevate no-code development to the level of traditional programming. The focus is on bridging the remaining functionality gaps within Bubble.

• Single-Page vs. Multi-Page Apps: This brief video tutorial outlines the pros and cons of the two different approaches. In a nutshell, SPAs come with faster loading speeds while MPAs make it easier to organize and scale your projects.

• Monitize Your Bubble Work with Atomic Fusion: Atomic Fusion (a library of pre-built Bubble components) just launched its creator program. Bubble Builders can now get paid if their custom components are utilized by other users.

• Parallax Scrolling Effect: Parallax scrolling enhances webpage design by causing elements in the foreground to move faster than those in the background as you scroll. This creates depth, providing a dynamic and immersive user experience. If you're looking to elevate your Bubble website, watch this video to discover how to implement this functionality seamlessly.