Lovingly prepared by Kelly Claus on December 21, 2022 (Merry Christmas)

Greetings, Bubbler!

<aside> 🚨

I’ve updated my naming conventions. It’s all over here, now:

**https://kellyclauscreative.com/naming-conventions**

</aside>

It has more stuff and clearer reasonings and is far prettier to look at, if I do say so myself.

MWAH.

Kelly

(That said, if you really want the old version, for some reason, it’s down below. Scrooooooooll down.)

Hello, Friend!

Below is a rundown of the [probably overkill] emoji + prefix combo I use when building stuff in Bubble. I do this because I can’t handle how boringly colorless the Bubble builder is (jokes)(but for real), and also because it makes everything more searchable and easier to eyeball. Fair warning, it is super annoying and tedious to implement, BUT(!) I swear it makes it SO much quicker to navigate your app, and way way way easier for subsequent developers you hire to know what the hell is going on. And just makes building more fun. Everyone wins.

I’m sure there are many other/better ways to name things. If you have ideas, please holler at me on Twitter. I’m all 👂👂.

Note: There’s some fear out there that using emojis can cause problems in your app. I’ve never experienced this, but if you have, also please give me a shout.

💙,

Kelly

Abbreviations for Page Elements

For making the Elements Tree easier to read.

(I used to use GR RG-ITEM but that is stupid long, so I use this now) | | PL | Any element related to a plugin | | LINK | Link or text elements w/a workflow attached |

Why take the time to do this:

• Nested elements can get really difficult (or impossible) to read in the Elements tree, since you can’t expand it. Abbreviations for the type of element just saves space. (Ex: RG vs. ‘repeating group’) (update 7/23: you can expand the sidebar now - thanks, Bubble!; I still do this; for funzies)
• Sorts workflows together. Granted, it would do this anyways in many cases, but let’s say you’re using two different Icon sets - in your workflows, ‘Icon XYZ’ will be far away from ‘MatericalIcon ABC’ - renaming all icons to ‘ICON [Whatever]’ will display them together. Or if you want an icon in a button (which you can’t natively do in Bubble, whaaaaaaaiiiy) so instead, you create a group with an icon and text inside - changing that group to BTN will display it in your workflows alongside “real boy” buttons.

Cases where I definitely do this

This is a tedious task and slows down building, for sure. So I can understand why people wouldn’t do it. But for me, I’m definitely, definitely going to do it in these cases:

• All inputs
• All buttons
• All groups that look like buttons
• All repeating groups
• Top level groups (+ other very important ones)

Emojis for Page Elements

For structure and easy navigation of your Elements Tree. (Doesn’t help with searching for elements.)

My current emoji convention for page elements:

Notes:

• Rows & Columns: I’m not using to indicate the layout of a group - don’t care about that at all. I only use these when it’s an important aspect of an app’s page structure. At Swapstack (this is where I work), we have a standard structure for many page sections: Left Column = info/reference | Right Column = actionable - so all that type of parent group looks like this in the elements tree (expand for photo)
• Use emojis sparingly outside of the ones above - they can become overwhelming and confusing if not used with a very specific purpose.

Emojis for Data Types & Option Sets

For ‘grouping’ with in your data type list (b/c Bubble will ‘alphabetize’ your list) and easy visual identification during searches.

Emojis for Fields on Data Types

For temporary documentation. Especially useful for teams.

Emojis & Naming Conventions for ReUsable Elements

For easier sorting & searching