Bubble's New Responsive Engine Tutorial 2021 -- Building a Messaging Interface

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 57

  • @mrnickb
    @mrnickb 2 года назад +5

    Mate you're an absolute legend for making this video! I understand some parts of flexbox but this video was a million times more helpful than any of the documentation or tutorials that Bubble have released about the new responsive engine so much. Thank you!!

  • @mattk2531
    @mattk2531 3 года назад +4

    Addressing the last point on alignment of from vs to messages… you just create two different types of groups within each RG cell (1 for to, 1 for from)… and conditionally show either right alight or left align based on who the message was from… overall, thanks for this video… def takes a few hours to get footing, but once you do…..my god is this powerful

    • @jacobgershkovich
      @jacobgershkovich  3 года назад

      Thanks Matthew!

    • @giokakhiani
      @giokakhiani 2 года назад

      @@jacobgershkovich Yeah I was gonna say you'd have 2 different groups and when the author of the message is current user you'd display the left one. I guess it should work. Great tutorial thanks man!

  • @GUARDONISSIMO1
    @GUARDONISSIMO1 Год назад

    Good job Jacob!!! It's cool to see you don't have a full mastery but still the capability to admit it and , secondly, to make things work out pretty good. It's heartening

    • @jacobgershkovich
      @jacobgershkovich  Год назад

      Haha yup I definitely remember winging this video pretty hard. Thanks for the comment :)

  • @JamesH-v3g
    @JamesH-v3g 2 года назад +1

    You need to keep making these. You’re perfect for this. I watch this to relax.

  • @azlifestyle5316
    @azlifestyle5316 2 года назад

    Really appreciate this man, i was so lost about using the responsive engine, but this cleared things up for me completely. Cheers man.

  • @consumatechsolutions3576
    @consumatechsolutions3576 3 года назад

    Thanks for a great tutorial. For someone with no flexbox experience I had no idea where to start understanding this responsive engine until I watched this video.

  • @fatimakhalid6856
    @fatimakhalid6856 2 года назад

    This is one of the best tutorials on new responsive engine on bubble absolutely love how you explain each and everything so clearly! Brilliant work! Keep it up looking forward for new videos from your side! :)

  • @calebndunda8190
    @calebndunda8190 3 года назад +6

    This is great work man! Followed through the whole tutorial and everything became clear just as you explained it. You also didn't go off topic from the sample messaging template. Great work putting this together!

  • @EchoKids
    @EchoKids 2 года назад +1

    Thank you for this! Struggled so hard with the new responsive enginge but this helped SO much :)

  • @stefanoaguiar3351
    @stefanoaguiar3351 2 года назад

    Great explanation. I really enjoy how you show your thought process throughout the video. Thanks for that.

  • @PhilSimAU
    @PhilSimAU 3 года назад

    Thanks for this, I was struggling with getting stuff to stretch and hadn't realised the stretch to full width on horizontal and vertical, and that has made a massive difference

  • @brianmolloy9393
    @brianmolloy9393 3 года назад

    First one to make a real vid on the topic that I have found! And a good one to boot! Subbed :)

    • @jacobgershkovich
      @jacobgershkovich  3 года назад

      Thanks for the kind words Brian!

    • @brianmolloy9393
      @brianmolloy9393 3 года назад

      @@jacobgershkovich My pleasure. I am, funny enough, banging my head on the wall of a simple input form... keeping everything lined up is not being a lot of fun right now. Maybe a video idea?

  • @chrismiller8126
    @chrismiller8126 2 года назад

    Great video my man. This is the first video that I've seen on the new engine and it was a great intro. Thanks for taking the time to do it. You're a great instructor.

  • @rapidely
    @rapidely 2 года назад

    Thank you so much for sharing this. It has been very helpful to understand the new engine and get started.

  • @ebrammer13
    @ebrammer13 3 года назад +8

    Great video - appreciate you taking the time to quickly put something together for the rest of us to get an idea. For the alignment issue for the chats (left or right align) - couldn't you put two groups in a repeated cell - one for current user and one for the other - then align full width and inside either left or right depending on user... then use a conditional of if it is not empty, then show the one and hide the other... something to that effect?

    • @davidpal2447
      @davidpal2447 3 года назад +1

      That's what I was going to suggest, too. You'll also need the order of elements to flip anyways.

    • @jacobgershkovich
      @jacobgershkovich  3 года назад

      Yes, I think this would work. Thanks for the comment :)

    • @chrismiller8126
      @chrismiller8126 2 года назад

      That's the way that I built it in my app when I did it.

    • @sidehustlediscovery3226
      @sidehustlediscovery3226 2 года назад

      Nice! Go subscribe he deserves it!

  • @maradin9319
    @maradin9319 2 года назад

    Great video Jacob! Thank you so much for sharing this.

  • @graemes
    @graemes 2 года назад

    Love your work man! - saved to work through later. 🙂

  • @strongemotion
    @strongemotion 3 года назад

    Very good video. Seems like Bubble could make some shortcuts to make it easier to transition from "fixed with" to "fill entire width and zero out the minimum width", rather than the 2-3 clicks per-element that you showed. No real complaints about the responsive engine as you have presented. it. Thank you, great job.

    • @jacobgershkovich
      @jacobgershkovich  2 года назад

      Hey Paul, thanks for the comment. Yes, I agree. I think they're working on that too as we speak. Glad you found the video helpful :)

  • @matiaz-ar
    @matiaz-ar 2 года назад

    Hi Jacob, great video! One suggestion i would do for the header is using the “Align to parent” layout type, instead of the “Row” layout type, as it lets you center better and snap objects to the sides, as a header needs to.

  • @alanjefferson6482
    @alanjefferson6482 2 года назад

    Great video man!, thanks for sharing this knowledge.
    Great work, I'm watching from Brazil.

  • @olencek41
    @olencek41 2 года назад

    Jacob, thank you for your video! Appreciate it. I'd like to ask you about the responsive feature we have now, if we have a Group Row displaying 2 columns (left and right) when I decrease the size of the page, how do I make sure that the right column goes below the 1st one. I've tried it a couple of times, but it's not clear to me how a group secures its position and forces another group to drop down when using the responsive feature. Thanks!

  • @geoffreyguilbert9826
    @geoffreyguilbert9826 2 года назад

    hi Jdev! Thanks for your tutorial, definitely useful.
    I've been looking for a certain type of repeating group and I was wondering if you had an answer for me?
    I have a list of categories (which are option sets, but this doesn't really matter here). I would like to display a repeatinggroup of these categories spreading across the page, on one single row. Since there are a lot of categories, they obviously don't fit into one single row. So I'd like to add a button on the right of this RG, named "More Categories".
    I want this repeating group to be responsive. So it could have 1 to X categories displayed in this RG, depending on the page width.
    Would you know how to make this responsive? I don't want to have an horizontal scrollbar. Just a responsive number of cells, basically. Hope you have an idea of how to do this? Thank you :)

  • @tahzib1451
    @tahzib1451 2 года назад

    the boxes that you drag and drop auto snaps to either top or the margins....is this a feature of the responsive beta?

  • @prachiarya457
    @prachiarya457 2 года назад

    This is fantastic. Thank you for your work.

  • @MariusCiocirlan
    @MariusCiocirlan 3 года назад

    Great overview! also lovin your lighting setup. Is your background a green screen?

    • @jacobgershkovich
      @jacobgershkovich  3 года назад

      Thanks! The background is just a blank wall behind me and the lighting is just my kitchen light haha.

  • @maxp1273
    @maxp1273 2 года назад

    Great job ! Interesting thoughts about conditional displays ;) +1

  • @denzeleiseb6364
    @denzeleiseb6364 2 года назад

    You just got a new like and subscriber. Great tutorial.

  • @N01Espada
    @N01Espada 2 года назад

    Amazing video! this was really helpful.

  • @smartchaching1989
    @smartchaching1989 2 года назад

    I found that I also have to uncheck the Fixed-width to many elements. Not sure if something find it useful for it as a default

  • @zaeemjaved6850
    @zaeemjaved6850 2 года назад

    Hey everyone! Is there a way to change positions of sections? Like I had section 2 which i wanna move to position no 5 & build a new one in place of section 2. New responsive change seems to not allow this.

  • @LuisAcostax
    @LuisAcostax 3 года назад

    Great video! Really helpful!

  • @knowledgedrive4165
    @knowledgedrive4165 3 года назад

    Anybody know where the "Wrap to Previous Line" functionality is? It was the single best tool for making tools responsive from mobile width -> desktop width.

  • @Linksaw
    @Linksaw 2 года назад

    Amazing!

  • @nguyenquangngoc3993
    @nguyenquangngoc3993 3 года назад

    Great video!!

  • @dwellsYouTube
    @dwellsYouTube 3 года назад +1

    Do more vids

  • @waltondornisch7662
    @waltondornisch7662 3 года назад

    Beware, this guy says at 2:00, something like "If you're new to bubble, this video might not be good for you..." bubble is daunting or as one of their own peeps says,
    ...notoriously tricky...z'

    • @jacobgershkovich
      @jacobgershkovich  3 года назад

      Haha, I just said that because I didn't want to spend time in the video talking about what a repeating group is or how to search for data in your database--just wanted to focus on responsive design. But Bubble can be tricky for sure!

  • @davegreen7853
    @davegreen7853 2 года назад

    If you're hoping to see data or workflow give up now or waste a hour watching design. Very misleading to people wanting to actually build this as app.