Django HTMX & Alpine.js mini-project - Sport Result Prediction App

[@punkweb]

Dude, you're awesome. I've been working with Django for the last 8 years, and Angular for the first 4 years and React for the last 4 years. I didn't mind Angular so much, but React has completely killed any sort of love I had for frontend development. I've been messing with HTMX for the last couple weeks, and it's such a breath of fresh air. Your videos have been the single best resource for me learning HTMX outside of the official documentation. Just wanted to say thank you!

[@bugbytes3923]

Thanks a lot! Really appreciate that - glad the videos have helped!

[@kachekijaanlega]

as someone about to start a react course, would you not reccomend it? isn't htmx+alpine still limited, whereas react can allow both web and mobile ui. Also, isnt htmx less secure than react?

[@punkweb]

@@kachekijaanlega I would learn React if your goal is to get a job. You're pretty much going to have to learn it. React itself can't build mobile and web apps. For mobile you're going to need to learn React Native as well. As for React being more secure than HTMX? I'm not sure where you got that from. Neither one is secure or insecure by default.

[@seydinaoumarsamabaly1806]

Wow just impressive, I've never been desapointed with your tutorials master 🙌🏾. Another master peice. Thank for all.

[@bugbytes3923]

Thank you for watching mate, as always!

[@sofianebebert5192]

Yes! Just what I needed this week. Love the content lately keep it up 🚀🚀

[@bugbytes3923]

Thanks Sofiane!

[@repotranstech]

Cool stuff,keep up.

[@bugbytes3923]

Thanks!

[@SmartC2007]

Thanks a lot for the time you spend to create the videos. Very much appreciated!

[@bugbytes3923]

Thanks! Really glad they've been useful, thanks for watching!

[@ec_789]

it was a great htmx project video

[@bugbytes3923]

Thank you!

[@立法院很忙]

hmmm...I was under the impression that HTMX and Alpine JS do the same things? Can you please give a bit more fundamentals of when to use which please? Thank you!

[@bugbytes3923]

HTMX - is more for calling a backend server whenever actions occur, and taking the server response and "swapping" it into the web page at the right location (the target). Alpine.js - as you can see in the video, this can be used to control/toggle what is shown on the page, based on variables/state defined in the Alpine component. You can define actions that change the state, as we do in this video when creating @click events on the buttons.

[@立法院很忙]

@@bugbytes3923 Thank you for the crystal clear explanation! So many more things make sense in my mind abt these two tools, with your explanation above. Learning on this channel is just awesome! 👍

[@FUBAU]

HTMX - Everything that requires the server (data, validation, whatever…) Alpine - Everything client side (dark mode, change order of table, etc…)

[@codedjango]

The github repo doesn't seem to have all of the code....maybe you forgot to push to git?

[@kub4n3c]

42:44 Wouldnt you be able to delete other users predictions via this endpoint? From what i understand, you only need to be logged in and specify the prediction_pk in the url path. There is no check if the prediction which is going to be deleted belongs to the user deleting it. This is not meant to be a critique, i am a beginner with django and htmx. I am just wondering if it´s possible, and if it is, how would you secure this vulnerability? Great video btw.

[@bugbytes3923]

Looking at the code, you're totally correct! Well spotted - I should definitely have added that check there. Apologies! As you say, checking to ensure the prediction belongs to the logged-in user would solve the issue here. Thanks for pointing that out!

[@prashlovessamosa]

Thanks for sharing.

[@alexandersemionov5790]

I do a lot of work in React. It's hard for larger apps. What you showed here is completely different and easier to comprehend. Just wow

[@omarcodes5181]

Amazing Stuff , Please keep it going!

[@bugbytes3923]

Thanks, will do!

[@s0lci70]

thank you so much, this has been very very helpful!!

[@bugbytes3923]

Thank you!

[@fernandtape9363]

Nice content as always !!

[@bugbytes3923]

Thank you!

[@ernestoperezamigo4866]

Amazing video, as always!!! Please make more videos related to how to use context data passed from Django views in Alpine. I'm not sure if the data needs to be converted to JSON first in order to be used in AlpineJS. There is a video of yours related to this topic, but I didn't fully understand this point. Thank you in advance.

[@bugbytes3923]

Thank you! Did you see the following video? kzbin.info/www/bejne/nmScloB9jNJ4jJY

[@ernestoperezamigo4866]

Hi @bugbytes3923 , thanks for answering. I hadn't seen that video, thanks. Greetings !!!

[@igribeiro_]

Thanks so much

[@bugbytes3923]

Thanks for watching!

[@marksto6581]

Hi mate and thanx for the htmx+Alpine video! You have a peculiar English accent, btw. Are you from Manchester or where? =)

[@bugbytes3923]

Thank you! I'm from Scotland - hope the accent is not too difficult ;)

[@marksto6581]

@@bugbytes3923 yeah, np, I was just wondering. I got used to it after some time.

[@dttsit]

deserves more subscribers

[@bugbytes3923]

Thanks a lot!

[@abrahamanakagung4279]

Thanks for the video mate, just in time when I want to learn more about backend. But I can't get pass this error: ModuleNotFoundError: No module named 'django_extensions', even after installing `pip install -r requirements.txt`

[@bugbytes3923]

Sorry about that. You should be able to install with this command: "pip install django-extensions"

[@abrahamanakagung4279]

Thanks mate@@bugbytes3923 , i solved the issue, I need to use `python3` command instead of python, not sure why, probably because I have multiple python installed.

[@Coden69]

Hell yeah

[@owenwexler7214]

I loosely followed along with this using the AHA Stack (Astro, HTMX, Alpine) instead of Django and it turned into a whole project. Gonna do the finance tracker app with the BHANO Stack (Bun, HTMX, Alpine, HONO) next.

[@bugbytes3923]

I'd love to try those - particularly keen to look at Astro but I've not had a chance yet.

[@owenwexler7214]

@ Astro is great and it’s very straightforward. I’ve used it on a few side projects and tutorial projects now. You write your JS logic in frontmatter at the top of the component and the render section below the frontmatter where you write the JSX markup. It supports file-based routes including partials and api routes. While it’s a static framework by default it uses the idea of interactive “islands” (small parts of interactivity throughout the site) and has adapters for all major JS frameworks including React, Solid, Svelte, and Preact, as well as HTMX and Alpine. Highly recommended as a framework for both static sites and lightweight web apps.

[@grimonce]

Obvious next steps would be to add a "freeze" state to the Prediction model because at some point these shouldn't be editable.

[@bugbytes3923]

Yeah, great idea! In the larger project, the idea was to freeze predictions around 30 minutes before a Fixture started, and schedule a Celery Beat task to run periodically to check for this.

[@honda21c]

와 대박이다, Thank god !!

[@arthurbueno6837]

Amazing video!! Maybe the question i'm going to make is idiot... For example, i want to make a create form, and i need a behavior like, when i change a field it changes something on the page. But the question is, if a use a form.py(create a class that inherits from (forms.ModelForm)) and render in a html template that generate the fields automatic i could modify the properties of this form like you modified ? Its a little confuse, i know haha

[@khalidseflan301]

Very informative video. Thanks a lot. Could you make a video about marker cluster? Would be highly appreciated.

[@vivaldi-qo7xj]

thnx for video

[@bugbytes3923]

Thank you for watching!

[@hugoramex3421]

nice & clean , thnx . would you do the same with FastAPI

[@bugbytes3923]

Thank you - I'll look into some more FastAPI videos soon!

[@Peterstavrou]

Do you prefer Alpine to Hyperscript?

[@bugbytes3923]

I like both. But Alpine feels more "natural" to me - probably because it's quite similar to a "lightweight" Vue.js which I've used in the past. Hyperscript is really cool but it's got a style that I've never seen before on the client-side - I need to explore it some more I think. Maybe a new video on it should be in the works!

[@bugbytes3923]

Do you have a preference?

[@Peterstavrou]

@@bugbytes3923 I'm new to both but I've decided to learn Hyperscript first just because it's easier to read and it's the same developer as htmx. There are no in-depth or long hyperscript tutorials though.... 😉😉

[@FirdausAziz]

I personally prefer HyperScript. To write it I just need to think in English. And it's also easier to understand.

[@ggsgetafaf1167]

thank you

[@bugbytes3923]

Thanks for watching!

[@hicham_6544-_-]

I have been following you for a while, can you make a video to create a chat application using HTMX

[@bugbytes3923]

Yes, definitely coming up!

[@WarLordOmar]

hey mate great videos, really useful, i have watched also your PyGWalker video its great, is there a way to integrate it with django?

[@bugbytes3923]

Thanks a lot! I'll be exploring its integration with Django.

[@ggsgetafaf1167]

please help me to update code on the github repo

[@frameff9073]

hi i need full code in project ty

[@frameff9073]

thank

[@bugbytes3923]

Thanks!

[@serychristianrenaud]

Thank

[@bugbytes3923]

Thanks for watching!

[@toanduongthanh8625]

Just realize htmx cannot solve render array element then Alpinejs, now everythiing work well

[@vov4egde]

I think you forgot to commit your changes ^^

[@grimonce]

I hate the "prediction" word... I work in ML and do only backend so I use these vidoes to teachmyself some new frontend stuff. I kid you not, every single time I write it in daily work or during my learning time it's "predicIton" instead of predictIon... I like the betting site example, but it's not as simple as just creating a web service that allows people to bet, buy and exchange chips for money. Where I live you need around 2kk of local currency to be allowed to do such a thing by the Ministry of Finances, good luck lol

[@bugbytes3923]

The regulations are complex here too, so I don't know if the project will ever become a real thing, but we had lots of cool ideas about gamification and leaderboards, etc. However, maybe without all the 'betting' stuff, it could still be a fun site. And yeah, prediction is an annoying word!