STOP messy code! Tidy code workflow with Webflow

Better code workflows for the Webflow enthusiast with industry-standard tools like Github, VS Code, and jsDelivr. I'll show you how to create a repository with Github desktop, iterate on code locally, create a release on Github, host it via CDN with jsDelivr, and manage versions.
// CLONE IT
👯‍♂️ webflow.grsm.io/cloneable-is-...
// FREE STUFF
💪 My ULTIMATE Webflow Resource Library: code-snippets-sign-up.webflow.io
// SUPPORT ME
💵 Patreon: / webbae
// ADVANCED WEBFLOW COURSE
🎓 Webflow 201: www.webbae.net/product/webflo...
// GET HELP
🙋‍♀️ Discord: / discord
// FOLLOW ME
🐥 Follow Me! / webisbae
// TOPICS
00:00 Intro
00:28 Create Project
01:59 Host code locally with live server
02:40 Create a Github release
03:43 Host via CDN with jsDelivr
04:49 Managing versions

[@aminabudahab]

Clear and concise, thanks ❤

[@webbae]

hope it helps!

[@dimka_tregubov]

Great video, thank you!🙌

[@sung-dukkang7488]

Thank you for this!

[@webbae]

Glad it was helpful!

[@tapumojumder6090]

very helpful

[@webbae]

Glad to hear that

[@wisssse]

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?

[@heatherliu6856]

Wicked sharp, innit bruv

[@webbae]

love fam.

[@grantfaucher]

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]

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]

@@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]

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

[@jeffamcavoy]

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]

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.

[@smith-cordell]

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

[@webbae]

You might enjoy this video: kzbin.infokXNsQ4gpMKs?si=9VJF4alrSEiJeVPM

[@webbae]

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

[@twlysh]

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

[@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! 🤣

[@Lars_Isman]

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]

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]

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

[@brandocean6322]

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

[@webbae]

you need to use middleware. I use cloudflare workers.

[@brandocean6322]

Thank you

[@marcusfrancis24]

Do you prefer this method over codesandbox?

[@webbae]

Yes.

[@marcusfrancis24]

@@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]

I use this method

[@webbae]

This video goes more in depth kzbin.info/www/bejne/naKTm6pplMlof8ksi=H2h5zqP5ZFkgpvt7