STOP messy code! Tidy code workflow with Webflow

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

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

  • @aminabudahab
    @aminabudahab 3 месяца назад +1

    Clear and concise, thanks ❤

    • @webbae
      @webbae  3 месяца назад +1

      hope it helps!

  • @tapumojumder6090
    @tapumojumder6090 3 месяца назад +1

    very helpful

    • @webbae
      @webbae  2 месяца назад

      Glad to hear that

  • @wisssse
    @wisssse 5 месяцев назад +1

    Is there a tutorial on how to use this for gsap animations? I'm trying to learn the basics of code by myself. I've just started a gsap course becasue of your newsletter, and so far I really like it. However, since I don't have a technical knowlegde yet, it is pretty difficult to set it up. In some other videos, I saw that you're using a skypack CDN to import gsap. I've tried this as well, but the animation doesn't work. Do you know how I can get it done step by step?

  • @grantfaucher
    @grantfaucher Год назад +1

    Great video! I saw some tweet about a CMS Like button using Make. Would love to see how that is setup! Saw a few other people who replied that they were interested as well. I think the Webflow community is begging for a tutorial LOL

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

      haha thanks it's on the list. It's not quite production grade though... there are some limitations I've been exploring how to get around 100% in Make but haven't come up with a great solution.
      The implementation I tweeted about updates the Webflow CMS, but requires publishing the site for the updated numbers to show, so it's a lackluster UI in my opinion. It teaches a good concept but not quite useable.
      Would you still be interested in seeing how to build that?
      My fully reactive solution to a like button with CMS would use code. Would you prefer that or the more limited approach with Make?

    • @grantfaucher
      @grantfaucher 11 месяцев назад +1

      @@webbae Love it, thanks for the reply! Look forward to seeing the tutorial if/when it comes out! Also I remember FInsweet having CMS Favoriting on their 2023 Roadmap for Q2 but I guess it got sidelined. I managed to put some code together using Chat GPT for favouriting items and then creating a filtered collection list of only saved items (display: none for all unsaved items). But the problem is that all items are loaded into the DOM and not just the saved items so it makes the site heavy. I wanted to pick your brain to see if it was possible to filter a list completely before all items are loaded into the DOM. I appreciate your videos, they have helped me level up my noob status.

    • @webbae
      @webbae  11 месяцев назад

      @@grantfaucher I'd love to see what your project requirements are. Shoot me a DM on twitter or in my Discord channel.

  • @dimka_tregubov
    @dimka_tregubov 11 месяцев назад +1

    Great video, thank you!🙌

  • @sung-dukkang7488
    @sung-dukkang7488 Год назад +1

    Thank you for this!

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

      Glad it was helpful!

  • @heatherliu6856
    @heatherliu6856 Год назад +1

    Wicked sharp, innit bruv

  • @twlysh
    @twlysh Год назад +2

    hey Web Bae, any ideas for a messy closet. My code is tight but my room is a blight!

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

      closet is a great place to hide things so no worries about it being messy. If you store anything secret in there guaranteed your Dad won't find it for at least 3 years! 🤣

  • @smith-cordell
    @smith-cordell 7 месяцев назад +1

    Hey @webbae would you consider doing a follow-up video about npm and compiling?

    • @webbae
      @webbae  7 месяцев назад

      You might enjoy this video: ruclips.net/user/livekXNsQ4gpMKs?si=9VJF4alrSEiJeVPM

    • @webbae
      @webbae  7 месяцев назад +1

      I also plan to cover npm, node, and build tools more in depth in my JavaScript course on Patreon.

  • @jeffamcavoy
    @jeffamcavoy Год назад +1

    Thanks for showing this full process!
    I’m curious about your thoughts on using Slater App for JS code in Webflow. Are there advantages to this method vs Slater?

    • @webbae
      @webbae  11 месяцев назад +1

      There's a lot to talk about here. I haven't used Slater a ton but for someone who just wants a good option to writing JS in Webflow, it seems to be really cool!
      Here are some reasons I use this setup over Slater:
      1. Integration with Github - what we use for collaboration at Finsweet.
      2. Environment setup and bundlers. This is the big one. Allows me to use tools like npm and create custom build processes. I'm pretty much always using Typescript now, unless I'm teaching JS on YT.
      3. Bring your own AI (I use Github Copilot (GPT3.5 I believe) and GPT4 via the openai ui).
      4. Integrations with lots of other tools... azure cloud, google cloud.
      Most of this is not necessary if you just want to write JS more easily than in the Webflow editor.

  • @Lars_Isman
    @Lars_Isman 11 месяцев назад +1

    How would you manage this for a client? Would the code be in your own GitHub account or would you create one for the client?

    • @webbae
      @webbae  11 месяцев назад +1

      Depends on the client.
      Small - Probably just use my own organizational account.
      Large - Have them setup Github
      In general I do believe each client should own their content regardless of size so would push for them to have their own accounts but sometimes clients just aren't that technical and don't want to do that.
      Since the code is public on Github anyways if another dev came in two years later they would be able to grab the code if they needed it.

    • @webbae
      @webbae  11 месяцев назад +1

      If you want to keep the code private and only serve minimized code, then it's a little different.

  • @brandocean6322
    @brandocean6322 11 месяцев назад

    Whats the best way to hide a API private key in your code.

    • @webbae
      @webbae  11 месяцев назад +1

      you need to use middleware. I use cloudflare workers.

    • @brandocean6322
      @brandocean6322 11 месяцев назад

      Thank you

  • @marcusfrancis24
    @marcusfrancis24 7 месяцев назад +1

    Do you prefer this method over codesandbox?

    • @webbae
      @webbae  7 месяцев назад

      Yes.

    • @marcusfrancis24
      @marcusfrancis24 7 месяцев назад

      @@webbae how do you go about setting up a boilerplate or package vs code, git hub, with common libraries and animationsnlike gsap, sliderJs, barbajs etc and deploy it in new webflow projects for each client?

    • @webbae
      @webbae  7 месяцев назад

      I use this method

    • @webbae
      @webbae  7 месяцев назад

      This video goes more in depth ruclips.net/video/gq0jw3_d5Ig/видео.htmlsi=H2h5zqP5ZFkgpvt7