Bubble Programming Challenge: 3 – Palindrome Checker

In the end I’ve used “looping” with 2 custom events rescheduling each other (approach you’ve mentioned in your previous challenges, btw) and using :truncated to and :truncated from end to to mirror the original word.
But but before that I’ve spent too much time trying to solve this challenge using lists :slight_smile:

P.S. Keep on going with Friday challenges, Adam! Even Gaby returned to the forum for the first time in 8 months just to participate :smiley:

1 Like

Oh, also TIL that scheduling custom event from another custom event with 0 seconds delay is not equal to just triggering custom event from another custom event. Triggering action resulted in “nope, sir, custom workflows cannot call themselves (either directly or indirectly)” :roll_eyes:

1 Like

Nothing a little 0.0001 seconds can’t resolve :stuck_out_tongue_winking_eye:

1 Like

I’m still putting some silly finishing touches on my vanilla Bubble solution, @adamhholmes, but the approach I’ve implemented (1) applies any preprocessing options to the input string (2) splits that string into its constituent characters (using Romano’s clever extract with dot regex) (3) splits that string into “halves” via items until/from which doesn’t trigger deduplication. Then we schedule-loop over a comparison workflow which compares the relevant character pairs and build a text list of that records the individual index numbers and whether there’s a match at that position, like “1:yes”.

I tried to embrace the Bubble limitations here as, done this way, we can do a cute animation that sort of shows the algorithm working.

Of course, none of this would be necessary if the string .reverse() method were implemented in vanilla Bubble. As all we really need to do is preprocess our string, reverse it, and if the reversed version of the string is the same as unreversed, we have a palindrome.

(In JS, it’s just some_string == some_string.reverse() which will be true for palindromes and false otherwise.)

Anyway, page coming soon.

3 Likes

:joy: Exactly. I wonder what went into the decision to implement some obvious JS methods and not others :man_facepalming:

2 Likes

Alright, so, in this case I didn’t show how I’d approach this with List Shifter (though I might add that), but I did throw a little flavor in from Floppy (using the highily-experimental “Reanimator” plugin).

Here’s my solution – entirely vanilla Bubble except for the “Adamizer” animation triggered with the Reanimator actions in the “3. Finish Up” workflow. Adam gets the Sinatra/Boole treatment with my mad-phat Photoshop skills… Woot!

One interesting thing this challenge made me realize is that while some of my plugins implement the array .reverse() method, none of them (explicitly) implement the string .reverse() method (though I believe that PROCESS List in List Shifter could hit a string with the reverse method.) So, not having a really sexy plugin-based solution to this, I haven’t implemented other examples (though I might in near future).

See my previous comments for how this works:

https://list-shifter-dev-test.bubbleapps.io/version-test/pals?debug_mode=true

Hope your weekend is goin’ well.

Best Regards,
Uncle Keith

2 Likes

Thanks for another fun one @adamhholmes !
2 events & 3 actions proved to be simplest, reliable solution for us
Demo here and editor here for those interested

1 Like

@josh23 - explain how your solution works, please. I find it rather opaque.

@keith sure thing! When the user clicks “check string” I capture the input’s value in 2 states; “string to process” & “captured string” and set the “processing?” state (boolean) to “yes”.

The “processing?” state initiates a do-when event (closest thing to a loop Bubble seems to offer), which appends the last character of the “string to process” to the state “reversed string”. It then truncates the “string to process” value to it’s current character count - 1.

In the example of “keith”, this would append “h” to the “reversed string” state and set the “string to process” to “keit”. This loop iterates until we have “htiek”, which is a conditional check to see if the “reversed string” character count is equal to the “string to process” character count (finished).

At this point, the “processing?” state is set to “no” which closes the loop. On the frontend, I then compare the “reversed string” and the “captured string” to see if they are the same values and display the outcome accordingly.

Hope that provided some additional clarity. Cheers!

3 Likes

It does. Thanks!

Managed to get it down to just 2 workflow actions but it can only accept a limited number of characters (14 for now) so not a total win. Proud that I came up with all solutions except for Josh’s elegant solution on my own after a lot of headscratching :grin: I settled on regex to minimise workflows as much as possible. Thanks for the challenge!

Would be great to see if someone can improve on it with no character limits

Demo: Bubble | No-code apps

Editor: PalindromeChecker | Bubble Editor

1 Like

Cool solution! Just wondering how you managed to get the ‘outcome text’ to display the text that it does… I don’t see any obvious conditionals or workflows that would result in showing that text so I’m hoping to learn something new

My entry :sweat_smile:

1 Like

@michael.basckin Happy to explain! We often use conditional logic on the dynamic value itself rather than using conditional statements.

For us, it’s easier to maintain and theoretically it should be a fast/efficient solution at scale having 1 dynamic text value rather than 2 conditional statements for each scenario.

This scenario checks if “text a” = “text b”, if yes format “green”, if no format “red”. Another example could check if “current user is logged in?”, if yes format “Hello Michael”, if no format “please log in”.

There are plenty of other great use cases. @keith @adamhholmes I’m interested if either of you use this and if you have tested performance impacts? (speed, workflow unit usage etc). Cheers!

image

1 Like

Hey @josh23, yes I do this sort of thing all the time (especially in demos and stuff), and as you’ve probably noticed it’s basically instantaneous. As you’re doing it here these values are completely in the page and all this dynamic conditional formatting happens completely client-side, so there’s no WU impact at all. Your solution is pretty cool and something I didn’t even consider. Nice one!

2 Likes

Good to know. Thanks mate, appreciate the kind words!

That’s awesome thanks for sharing! Also nice to see a fellow Aussie in the forums

1 Like

My pleasure. Likewise mate, back at you!

1 Like

Your editor is set to private, so no one can see it… but it seems to work just fine (I can probably guess why you’ve had to limit it to 14 characters…)

I certainly use it… I generally prefer this to using conditions - it’s Bubble equivalent of a ternary operator, and (I think) makes for a cleaner approach than using conditions, especially when using nested instances of it (although the Bubble editor can make it difficult to know which ‘level’ you’re working at.

I can’t say I’ve ever tested it performance wise (I’m not sure there would be much difference, if any), but it’s usually my preference.

You can use it for a lot more than just ‘displaying text’ as well… for example in searches, or when filtering option sets, to avoid conditional datasources, or to avoid having to use multiple ‘make changes to a thing’ actions, for example.

2 Likes