django-components - Build re-usable components in Django with TailwindCSS and DaisyUI

[@bugbytes3923]

☕ Buy a coffee: ko-fi.com/bugbytes ⭐Top resource to learn Python - datacamp.pxf.io/kOjKkV ⭐ 📚 django-cotton video: kzbin.info/www/bejne/hWHCi6yLqKxqrdE

[@timothymalahy7880]

Yes on the htmx - it seems very ripe for DRY, but I struggle to not get lost in my templates with a bunch of htmx components in them. Would love to see some robust examples. I regularly add rows to a table from a form. That would be great to have reusable all over. I can understand the abstracted logic but it gets so messy that I’m better off rewriting the views.

[@esteban.acevedo]

Thank you very much for your work. I am writing to you from Argentina. I am currently a Python course instructor at two leading companies in Latin America. I am sharing your videos with the students. I encourage you to continue with this beautiful stack of Django, HTMX, Tailwind CSS, and now Django Components. I believe it is the near future that Python web developers are gradually getting to know.

[@bugbytes3923]

Thanks a lot Esteban! That's really cool to hear that, thank you for sharing! If there's anything in particular you/your students would like to see, feel free to share. Hope to visit South America some day!

[@interwebslinger]

Thanks for all the great django content, BugBytes! If you ever run out of video ideas, I'd love to see your take on the following: 1. How to get your django apps ready for production, e.g. no CDN use for htmx / alpine. 2. Deploying django apps - small apps, simple deploy, large apps on k8s 3. Which ways you prefer to build django projects - components or templates, alpine / hyperscript / vanilla js, etc 4. How to add pinesUI components to your projects It's your choice though if you want to do any of this, I'll keep watching in any case!

[@bugbytes3923]

Thanks a lot for the great suggestions! I'll be doing deployment videos soon, it's been a goal of mine for a long time.

[@SmartC2007]

Hey @interwebslinger For Point 1. I have written a python script including "local" Tailwind CSS. All via npm. It's far from perfect, but it get's me started ... otherwise it is too time-consuming to do that manual all the time.

[@interwebslinger]

@@bugbytes3923 Looking forward to it!

[@kushalpy]

Hello big brother. I am also a Django dev. I would suggest you to make the DRF video for free. Many teachers and tutors are focused on getting their audience on udemy. It would be great if DRF videos will also be open for all like Dj is open for all. Your videos will lead upcoming gen. Make sure that every freshers will have your name on their mouth and say "BugBytes" whenever the topic is on Dj.

[@bugbytes3923]

Thank you for sharing your thoughts, much appreciated. I enjoy the KZbin process, but the time investment for making a multi-video course often doesn't really translate on here. But if we can make the Ko-Fi goal by August, I will release the DRF course on here for sure!

[@kushalpy]

@@bugbytes3923 Its all about how people/freshers will get you. I guess if you could make a job/internship ready video with drf for sure for the next time you can sell it on your own website. People will buy if stories are created after watching your tutorials.

[@robhafemeister3100]

Great video, would definitely like to see a django-components and htmx video.

[@bugbytes3923]

Thanks a lot Rob! Will prep something very soon.

[@interwebslinger]

​@@bugbytes3923if you could work some alpinejs in there it would be even better! 😬

[@amjadnikzad4890]

hey, i just want to say your contents are great! And I would be grateful if you do more on DRF!

[@bugbytes3923]

Thanks a lot!

[@AmoahDevLabs]

Great gist. Thanks very much for sharing. Waiting for most gists on this library.

[@bugbytes3923]

Thanks a lot!

[@philippkudrov9712]

Hi, thanks a lot! It would be very cool to show how to make a component with a form using htmx as well.

[@SmartC2007]

Thanks a lot. Another great video. Yes, I would love to see more content with django-components including HTMX. Maybe an intermediate projects ... some kind of nice web-app ... too bad the football european championship is already running. :)

[@bugbytes3923]

Thanks a lot! My own country Scotland won't be in that tournament for long, so plenty time to make videos ;) Thanks for the suggestion.

[@charlesu49]

Great video! It would be great to see this working with htmx and to use this I'll probably need to get used to working without the app templates, it is so convenient.

[@bugbytes3923]

Thanks! I'll create something with django-components & HTMX soon

[@awesomejr.530]

Thanks alot @BugBytes. This django-components package is very similar to react. But I have been using the default Django templating syntax: {% include 'template_file.html' with title='any title' %}. It pretty much do the same work that this package do and does feel like react too. And further more, I feel like disabling the App template dirs is really disturbing cos it's much needed to organize templates based on apps. Please, What are your thoughts on this?

[@jurooravec9857]

Hey, one of the maintainers here. I'd say it depends on your needs. If you're a sole dev or it's a small project, IMO using include/extends/blocks is totally sufficient. On the other hand, in my case, I started contributing to the project because I was missing a more robust solution, so something that can work for teams or larger projects. E.g. django-components now has as "isolated" mode - which is more similar to how templating works in React or Vue - it ensures that variables defined in components do not leak out, and that you always pass the data through explicit interfaces. So it's similar to always using {% include %} tag with the "only" keyword. Also, libraries like django-components allow you to run python code inside the component. So you can transform the inputs in python, as opposed to manipulating the inputs directly in the template. It's a matter of taste, but personally find it easier to digest when there's little logic in the template.

[@awesomejr.530]

@@jurooravec9857 Thanks alot for your reply, contribution and insight. I have been trying the django-components for more than a week now and it seems so good, easy and promising too. You guys really did a great job with the package. Am a Full-Stack Developer but I lean more towards the backend side of things and I try all my possible best to avoid front-end JavaScript frameworks like react and next.js. Am so happy that django-components provides a react-like feel, and combined with HTMX, it will be an amazing combo. Hoping for more great features in django-components package. 😁😁

[@awesomejr.530]

​@@jurooravec9857Thanks alot for your reply, contributions and insight. I have been trying out the django-components library for more than 10 days now and it is a good and it's so promising. Looking forward to more features from the library. Django-components and HTMX is now a very great combo. You guys really did a great job in this library. Thank you so much. 😁😁

[@jurooravec9857]

@@awesomejr.530 Great to hear such feedback! :) Btw, I just looked into the issue with APP_DIRS=False. It turns out that `django.template.loaders.app_directories.Loader` does the same thing as APP_DIRS=True. I'll make this clearer in the docs

[@VictorMwangi-ny8og]

Thank you so much for this

[@jdmcivicrrr]

Cool video. I've tried to do something like this by manually structuring folders and using includes and blocks. Didn't know there's a library for it. Do you think this is now starting to approach something like react/NextJS, but in python? Looking forward to your video utilizing htmx and this library.

[@bugbytes3923]

Thanks! I think this moves Django a bit closer to react/next, in the sense that you can build these components that can be 'copy/pasted' to other projects. If we can get a Django community showcase of components, it might help with building modern Django apps without having to use a front-end framework.

[@jurooravec9857]

Hi, one of the maintainers here. Approaching maybe, in a sense of converging/equalizing. React helps to write the frontend, and NextJS allows to have it server-side rendered (SSR). Django started as a web server (SSR), and tools like django-components help to write the frontend. Worth having a look also at django-unicorn or tetra-framework. Unlike the two, django-components currently focuses only on the templating. So you have the freedom to choose whether you use HTMX or AlpineJS or vanilla JS to add interactivity.

[@TomOhle1]

great content yet again.

[@bugbytes3923]

Thanks a lot!

[@raulolmos345]

Hello, excellent video, in my case I am interested in you making a video with django-components and htmx.

[@bugbytes3923]

Thanks for watching! Will create something with HTMX soon

[@Legendera]

I like your content man! next dennis ivy

[@bugbytes3923]

Thanks a lot! Big fan of Dennis Ivy too - cheers!

[@Smartroid]

Could u please upload a video or video series going over how to override django admin templates and make modern looking dashboards with charts

[@Yarkanlaki]

Thank you and Django components Developer

[@bugbytes3923]

Thanks a lot!

[@hernansaa]

great video would be amazing to see it working with HTMX! thanks a lot!

[@bugbytes3923]

Thanks - coming up soon!

[@AliHassan-wc6nb]

Bro, you are doing a great job, but please make a video on how to hide the code from the client when solution is being deployed on client's machine.

[@bugbytes3923]

Thanks a lot! Can you give an example of what you mean?

[@champorado2131]

@@bugbytes3923 i think he means, obfuscating code so it cannot be readable by clients

[@AliHassan-wc6nb]

​@@champorado2131 thanks, you are right but I know about it, but still is their something else?

[@DhavalAhir10]

This is not possible.

[@jnchacon]

Hi. Thanks you for the video. One question: If every components (card) is for a different object in the database, how can you personalize the .js actions to modify each individual object?

[@anouarben779]

much appreciated you deserve all the support you can get.

[@bugbytes3923]

Thanks for the support! I'm hoping to keep going on KZbin but might also explore some other options soon.

[@Smartroid]

Can u please upload a video on how to override admin panel with tailwind css without using a pre-made template package

[@coolgirlsharu]

Please do videos on celery in django request 😊

[@bugbytes3923]

Coming soon!

[@dreackm]

What's the advantage of using this library instead of Django's inclusion_tags?

[@daffastack]

sir.. but how to passing different js function on each button ? can we pass javascript trough components tag ?

[@bugbytes3923]

You would need to target the buttons individually to run different code for each one. In the video, we are targeting all buttons with a generic 'button' selector.

[@shivamkumar-qp1jm]

Great job please also provide code otherwise I have to take screenshots to use in the future.

[@frameff9073]

God good thank you

[@bugbytes3923]

Thanks for watching!

[@Pradeep_prasad]

Hello I need your help Create a small video How to fetch 10lakh data within a second in Django Thank you

[@AliHassan-wc6nb]

You want to fetch Million rows from database table in a second?

[@Pradeep_prasad]

@@AliHassan-wc6nb second means as much as quick

[@Pradeep_prasad]

​@@AliHassan-wc6nb it's means as much as quick

[@chickenonaraft508]

Please sar, make video

[@krzysiekkrzysiek9059]

Cool channel 💪. But I was wondering why you don't use Bootstrap? What convinced you to use TailwindCSS and its libraries like DaisyUI or Flowbite?

[@bugbytes3923]

Thank you! I started with Bootstrap on the channel, but at some point moved to Tailwind when I was using it at my day job. Tbh, I hated Tailwind at first, but I have since come to love it. I think Tailwind is an acquired taste, but I do still like Bootstrap too!