Build web apps 5-10x FASTER by COMBINING Webflow and Django
ฝัง
- เผยแพร่เมื่อ 31 ม.ค. 2023
- In this video, I'll show you how to use Django and Webflow tools to create a web application UI five to ten times faster (Note: I'm not paid by Webflow). Link to Django import script: github.com/a-toms/webflow-to-...
That said, there are some problems that arise with using Webflow for Django.
So, I'm building a visual designer specifically for Django. Here's the link to that (Photon Designer) if you're interested: photondesigner.com?ref=yt-webflow
You have singlehandedly convinced me to learn to use webflow for my Django projects, starting course tomorrow!
And that scrpt is gold, thanks for sharing!
You're welcome! I'm also building something even more in depth that's related. Will post a video once ready :)
Totally agree- Just moved WebFlow to the top of my list too :)
@@M-lime Cool to hear it! f you're using Django, you might be interested in what I'm now building.
th-cam.com/video/4L5i3ORjg_s/w-d-xo.html
photondesigner.com
Thanks for the guide/script, golden
You’re welcome :)
This is really nice!
Thanks @siebe681 !
This is bloody cool. Thanks for sharing 😊
Glad you enjoyed it Loic 🙂 I'm actually building a visual designer to export straight to Django templates (photondesigner.com) in case you're interested.
@@tomdekan checked it out already. I am using tailwind in my projects atm, but it seems to be a pretty awesome tool. 😉 Followed you from Reddit initially. Thanks for sharing your findings with the community.
@loicleray Thanks Loic - you’re welcome!🙂 I’d be interested to know what you’re working on.
Very good tutorial, thanks
Glad it was helpful!
Really super nice idea
Thanks 🙂 I'm building a dedicated product (photondesigner.com) to go beyond this 🚀
YOU know what..... Webflow looks pretty amazing
You're right - Webflow is very good 👍
That said, there are some problems that arise with using it for Django, so I'm building a visual designer specifically for Django. Here's the link if you're interested: photondesigner.com
@@tomdekan I've been learning to use Tailwind lately to use with Django. Takes more setting up that Bootstrap, but is better once you get it going. Looking forward to seeing a visual way to set up Django though.
I'm surprised really that coders have not done something like visual coding already to make things easier. This day and age it should be mostly drag and drop of what you need then a bit of tweaking to make it specific to what you are doing.
Yeah, I like Tailwind as well. The Tailwind UI Components are pretty good as well.
You're completely right on your visual coding point@@Good-and-Geeky.
Way back when I was first getting into web development, I remember being surprised that everything was hand-coded manually - and it still largely is!
So much time is spent writing the same visual elements for each new product, and then tweaking them manually. Photon Designer is my plan to change that 🚀
@@tomdekan I use aliases in zsh so I don’t have to type in ‘python manage.python runserver’ all I need is “pmr”
Same sort of thing for the two migrations commands.
Also … Copilot is amazing to save time not having to type in boilerplate stuff.
Me too. I use dj for python manage.python, and djma for making migrations +
Copilot. I also use AI Assistant for Pycharm; I recommend it if you use Pycharm
Q1. Does webflow handle all possible CSS attributes?
Q2. Does webflow handle css animations?
Q3. Does webflow take care of different browser vendor prefixes?
Q4. What do I do if I have very complicated JS logic for a particular page, say an audio webplayer? Can I tweak on my local machine and reupload to webflow and vice-versa?
1. Most, but not all
2. Some css animations
3. Assume yes
4. No - you can't re-upload to Webflow. I've been building a product to allow this.
What if the page requires data from the DB? How do you inject data into the templates like you would with Jinja?
As I mentioned, you can include template variables by using your normal template syntax (see my reference to the {{ login }} button).
Since publishing this, I have added the ability to render data from the db using django forloops by adding specific custom attributes to webflow. I haven't documented it yet, but have a look in this repo for the code: github.com/a-toms/webflow-to-django . I might make another video on the more advanced script
@@tomdekan Thank you for clarifying that. I will look out for the custom attribute functionality when I have a chance to try this all out. Speaking of custom attribute functions, I saw someone integrate htmx like that.
@@erichpowell You're most welcome.
Yeah, I wouldn't advise doing that with HTMX because it would degrade Webflow as your visual designer. As soon as one adds elements that change the visual appearance, but which you can't see in Webflow, you are having to imagine the visuals, with no reference. This complexity would negate the speed benefits of Webflow for me.
As an alternative, I've replicated Webflow's async form function in the latest version of the script. This allows you to submit fetch requests from the template, while still using Webflow as your sole source of truth regarding visuals.
@@tomdekan would you mind making the next video about flask for simplicity in the framework part and focus on how to include the templates and also interacting with both stripe and db for example
really great vid btw subbed
Thanks for the comment 🎉 I'm planning to focus on Django for the moment, but a video for setting up stripe as simply as possible is a nice idea.
For adding a managed database, albeit also using Vercel, I made a video here: th-cam.com/video/LRwtcHO2eus/w-d-xo.html . Let me know if that helps 🦋
I've been recently doing the same thing with Flask, but I soon came to discover that if I use webflow to add the animations, they will only work temporarily, and the next day, the animations stop working completely, does this mean using webflow animations is off limits or is their a potential solution?
I don't know the answer to this without checking the Webflow code. They could add some code to block access after a day, but I doubt they'd do that. Webflow's code export is meant to be (minimally) exportable. (I'm building photondesigner.com as a visual editor for Django with full code export, and automatic sync via CLI tool.
I reckon that there's probably something wrong in your script. Have you made any progress since commenting?
@@tomdekan Actually I have no idea what happened that day, that was the only day it didn't work, it actually didn't even work in webflow itself, but the next day everything just magically worked without me doing anything.
I am assuming maybe webflow itself was having problems with it's JavaScript that day? Ever since I haven't encountered the problem again.
Having trouble running it. I put the file in the root of the project but i get this "Traceback (most recent call last):
File "/Users/DRM/PycharmProjects/SHCatalogProjrct/shcatalogwebsite/shcatalogwebsite/import_webflow.py", line 210, in
webflow_exported_assets = Path(sys.argv[2])"
Hi @TheTattedIT :) It's hard for me to debug without seeing your code. If you haven't fixed it yet, would you share a sample of your code and I'll look in detail for you? (pastebin.com/)