@@webbae i know javascript already but i am always looking for ways to write less code, specially since so much of web development is repetitive, annoying boilerplate :D i am still waiting for the tool that will combine the flexibility for writing and managing code of vscode but that will allow me to work more visually when i want to, like webflow does framer is also looking interesting in that sense but it’s too early to say
@@webbae the codesandbox part 7:00 - I've also used a static sandbox (the orignial branch) and when I open the link with index js in the browser it shows me the code
Hi Web Bae, I have used your method to host a file on CDN, I was thinking how to host multiple files for same project? how to modify outfile? can you make a video on that?
I to serve the js code from JSDeliver safe? I mean, I like the idea of serving all my custom code from one place and minified, but is this the real-life method? Are you done this fro clients' projects too?
Yup! The only difference would be in having jsdelivr grab the code from NPM instead of GitHub. You’ll need an npm account for that and deploy your minified code there, then use jsdelivr in similar way.
Thanks, Keegan, at least I have an environment to write custom JS. I'm not familiar with Typescript, do you have a video where you explain what TypeScript is and why it helps us with Webflow custom code?
I don’t have a video on Typescript specifically but you should be able to find lots of content out there. Essentially it allows us to specify types to our JavaScript so we can catch potential bugs at compile time (before publish) rather than run time. It enforces stricter rules and requires a build step so can be difficult at first, but once you get used to it it helps a ton.
Update: If you try to run "build-by-file" it will throw an error because of the "watch:true" option in your builder.ts file. This was an intentional change made to esbuild beyon v0.16. You can either remove the "watch:true" option from your builder.ts file or install the last version that works by running "npm install esbuild@v0.16". I wanted to figure out how to make it work in v0.17 but it's 1 AM and I'm not ready to read through all that documentation😛
Hey Ihsaan - the finsweet starter template is great. In general - click the green “use template” button then clone down that repo to your local machine and follow the instructions listed in the readme.
@@webbae Yeah, I like your setup better. I don't use typescript or the other things that come along with it. I'm gna continue with your setup but having that hot reload in there would be soo cool. Thanks anayway!
Hey Keegan, great vid, thank you! I am having an issue I'm hoping you can help me with. When I try to import code from sandbox to webflow, I get a CORB error when I publish the code. Can you explain how I can prevent this?
A trick to formatting in Webflow is highlighting all the code you want to format and press "shift + tab"
Just a little tip 😉 Great video!!
Great video!
I want to start exploring how to use threejs in webflow and this is a great start. We need more videos like this 👍👍👍
I took my first look at three.js two days ago. Stay tuned!
I just discovered you recently through the Webflow Conf...your channel is AMAZING.
This is truly THE BEST tutorial I've seen about CDN
Glad it was helpful! 🫡
Was my other question deleted? @@webbae
Hmm I don’t see it. Feel free to pop in the discord and share it there!
God damn did I need this kinda Webflow+JS info like months ago! Still great to find it now. Awesome resource 👏
Glad it was helpful. I’ve refined my workflow a bit since making this video. Will try to put out some new info soon.
super helpful! been really enjoying your content ⚡🔥
Thanks gjb! It seems a lot of us are using Webflow as a jumping off point to learn Javascript!
@@webbae i know javascript already but i am always looking for ways to write less code, specially since so much of web development is repetitive, annoying boilerplate :D
i am still waiting for the tool that will combine the flexibility for writing and managing code of vscode but that will allow me to work more visually when i want to, like webflow does
framer is also looking interesting in that sense but it’s too early to say
Hi, idk why but my link doesn't get highlighted in the inspector and it's also missing in the source panel. I've done exactly what you've shown.
Which link are your referencing? Can you send a timestamp in the video for the part you a referring to?
@@webbae the codesandbox part 7:00 - I've also used a static sandbox (the orignial branch) and when I open the link with index js in the browser it shows me the code
Hi Web Bae,
I have used your method to host a file on CDN, I was thinking how to host multiple files for same project? how to modify outfile? can you make a video on that?
Sure - I’m planning a video on build tools for my JavaScript course in Patreon :) www.patreon.com/webbae
I to serve the js code from JSDeliver safe? I mean, I like the idea of serving all my custom code from one place and minified, but is this the real-life method? Are you done this fro clients' projects too?
Yup! The only difference would be in having jsdelivr grab the code from NPM instead of GitHub. You’ll need an npm account for that and deploy your minified code there, then use jsdelivr in similar way.
Thanks, Keegan, at least I have an environment to write custom JS. I'm not familiar with Typescript, do you have a video where you explain what TypeScript is and why it helps us with Webflow custom code?
I don’t have a video on Typescript specifically but you should be able to find lots of content out there. Essentially it allows us to specify types to our JavaScript so we can catch potential bugs at compile time (before publish) rather than run time. It enforces stricter rules and requires a build step so can be difficult at first, but once you get used to it it helps a ton.
Update:
If you try to run "build-by-file" it will throw an error because of the "watch:true" option in your builder.ts file. This was an intentional change made to esbuild beyon v0.16.
You can either remove the "watch:true" option from your builder.ts file or install the last version that works by running "npm install esbuild@v0.16".
I wanted to figure out how to make it work in v0.17 but it's 1 AM and I'm not ready to read through all that documentation😛
Thanks Kudzi I'll have a look when I get a moment.
Hey Web bae, Alex just added live reload to the finsweet starter template, how would you implement it in this workflow? Thanks.
Hey Ihsaan - the finsweet starter template is great. In general - click the green “use template” button then clone down that repo to your local machine and follow the instructions listed in the readme.
@@webbae Yeah, I like your setup better. I don't use typescript or the other things that come along with it. I'm gna continue with your setup but having that hot reload in there would be soo cool. Thanks anayway!
Hey Keegan, great vid, thank you! I am having an issue I'm hoping you can help me with. When I try to import code from sandbox to webflow, I get a CORB error when I publish the code. Can you explain how I can prevent this?
CORB? Do you mean CORS perhaps? I need more info on your error.
Why i can't add "serve": "serve" like you at 29:24
Are you adding to package.json? Did you install the serve package with npm? DM me a screenshot of your error on twitter.
@@webbae My account twitter was hacked ...if you are another social media ?
@@liamlegaillard1918 my email is in the about section of my channel.
Just looked at your email - you’re missing a comma in your scripts array.