- 55
- 84 222
Tom Dekan
Registrace 4. 06. 2013
I make videos about software and AI to take you to the next level.
At the same time, I'm creating my next product - an entirely visual designer to make building frontend much, much faster.
You can see all my written guides and articles (as well as my product) at photondesigner.com/?ref=yt-tomdekan
At the same time, I'm creating my next product - an entirely visual designer to make building frontend much, much faster.
You can see all my written guides and articles (as well as my product) at photondesigner.com/?ref=yt-tomdekan
Create a React search component in 8 mins 🕵🏻
We'll create a Google-style search bar component in React in 8 minutes.
👉 Written guide here: www.photondesigner.com/articles/react-search-bar?ref=ty
Subscribe for more weekly free content ⭐️
👉 Written guide here: www.photondesigner.com/articles/react-search-bar?ref=ty
Subscribe for more weekly free content ⭐️
zhlédnutí: 91
Video
React + Django Ninja: Full-Stack Auth (in 15 Mins) ⚡️
zhlédnutí 1,2KPřed měsícem
We'll create a full-stack application using React.js frontend and a Django REST API, using the awesome Django Ninja (Much nicer than Django REST framework), including user authentication. 👉 Written guide: www.photondesigner.com/articles/react-auth?ref=yt We'll also add 5 other features that you'll always want when adding auth, such as: - persistent state (e.g., refreshing the page and still bei...
Learning Next.js - Doing the official Vercel tutorial 📕
zhlédnutí 235Před měsícem
I'm learning Next.js (a full-stack JavaScript framework). Here's me doing the full official Next.js tutorial by Vercel (including solving a few bugs in the Vercel tutorial 🐛), and my first-thoughts compared to Django and other full-stack frameworks. Feel free to follow along: Vercel's written tutorial in the video is here: nextjs.org/learn Subscribe for weekly videos about software, development...
Want to ship faster? Spend money 💰
zhlédnutí 188Před měsícem
Don't be cheap! If you can afford to spend money to speed things up, do it. Remember: cheap is expensive.
Django: Stream your voice clone 🎼
zhlédnutí 345Před 2 měsíci
Let's turn your voice into an infinitely-scalable instrument with Django 🎉. We'll build a Django app that: 1. streams audio to the user's browser (easily with HttpStreamingResponse) 2. uses your cloned voice ✍️ Written guide: www.photondesigner.com/articles/voice-api?ref=yt 👉 Get free programming content weekly from my mailing list: www.photondesigner.com#signup-form
How to use Vue with Django (including Auth) 🔒
zhlédnutí 2,2KPřed 2 měsíci
We'll set up a Vue.js frontend a Django backend. Strong foundations for your production app. We'll also add auth 🔒 Simple and robust. No tokens, no DRF, no JWT. I'll also show you 5 things that you'll always want to add, including: 1. Page routing (using Vue Router) 2. Simple centralised state management (using Pinia) 3. Persistent state (e.g., refreshing the page and still being logged in) usi...
For founders: 1 mistake about growth ☘️
zhlédnutí 163Před 2 měsíci
After this video, you'll avoid this mental mistake I've made in the past: the step change fallacy
React + Django + Ninja (Full-stack app in 15 mins)
zhlédnutí 2,3KPřed 2 měsíci
We'll build a React and Django app fast, using Django Ninja - aiming for under 15 minutes ⏱️ Comment below if you want the next video to add auth 🗳️ ✉️ More free guides here: www.photondesigner.com/blog?ref=yt
Django Ninja - The new DRF killer?! 🥷
zhlédnutí 3,7KPřed 3 měsíci
Django Ninja is getting a lot of attention online. I show you how to build a simple API, with built in docs, using Django Ninja (a package for Django). (Spoiler: such a nice way to create APIs FAST!) ✍️ Check out my other written guides here: www.photondesigner.com/articles?ref-yt
Add AI suggestions to Django 🗯
zhlédnutí 663Před 3 měsíci
This is a new technique using AI: I think that it'll become very common. We'll add inline AI suggestions to suggest helpful actions to the user. We'll use a fast LLM, HTMX, Django, and (optionally) my Photon Designer for styling. ✍️ Written guide here: www.photondesigner.com/articles/ai-suggest?ref-yt
How to use React with Django (in 10 mins) ⚛️
zhlédnutí 5KPřed 3 měsíci
The simplest way to set up a React.js frontend and a Django REST API backend ✍️ Written guide here: www.photondesigner.com/articles/use-react?ref=yt 💡Generate UI (for free) here with Photon Designer: app.photondesigner.com/?ref=pd-site-landing-page?ref=yt
7 minutes to polling with Django and HTMX 🗳️
zhlédnutí 1,1KPřed 3 měsíci
4 simple steps to start using HTMX! I'll show you how to add polling to Django with HTMX (HTMX lets you add javascript without writing any javascript). ✍️ Written guide: www.photondesigner.com/articles/polling-htmx?ref=yt 💡My product for generating UI quickly (for free) here: app.photondesigner.com?ref=yt
How to use Postgres as a simple task queue for Django 🐘
zhlédnutí 963Před 3 měsíci
Using Postgres as a task queue for Django is fast to add. There are other big advantages over the traditional approach (e.g., Celery and Redis). ✍️ Written guide: www.photondesigner.com/articles/postgres-queue?ref=yt 💡 My product to build Django UI much faster (for free): www.photondesigner.com?ref=yt
(Live stream) Building my product using Django and Vue - Upgrading to Claude 3 LLM
zhlédnutí 391Před 4 měsíci
(Live stream) Building my product using Django and Vue - Upgrading to Claude 3 LLM
Add Stripe subscriptions to Django in 7 mins 💵
zhlédnutí 1,7KPřed 4 měsíci
Add Stripe subscriptions to Django in 7 mins 💵
Add user comments to Django in 9 mins 🧵
zhlédnutí 365Před 4 měsíci
Add user comments to Django in 9 mins 🧵
7 examples in 6 minutes using Django GeneratedField ⚡
zhlédnutí 996Před 5 měsíci
7 examples in 6 minutes using Django GeneratedField ⚡
Create a quiz app with HTMX and Django in 8 mins ☑️
zhlédnutí 1,8KPřed 5 měsíci
Create a quiz app with HTMX and Django in 8 mins ☑️
Add a serverless python function (Using AWS Chalice) 🍷
zhlédnutí 618Před 5 měsíci
Add a serverless python function (Using AWS Chalice) 🍷
Solve connection errors when using Django 🕸️
zhlédnutí 145Před 6 měsíci
Solve connection errors when using Django 🕸️
Adding python serverless functions as Django workers 🗡
zhlédnutí 317Před 6 měsíci
Adding python serverless functions as Django workers 🗡
Django app killer: Query in for-loop 🌪️
zhlédnutí 730Před 7 měsíci
Django app killer: Query in for-loop 🌪️
Add Magic Link + Email Sign-in with Django 🪄
zhlédnutí 737Před 7 měsíci
Add Magic Link Email Sign-in with Django 🪄
Build a Django AI colorization app 🎨🦾
zhlédnutí 1,1KPřed 7 měsíci
Build a Django AI colorization app 🎨🦾
Simple Google Sign-in with Django ✍️ (6 mins)
zhlédnutí 4,7KPřed 7 měsíci
Simple Google Sign-in with Django ✍️ (6 mins)
Use English to query your Django data 🏴
zhlédnutí 222Před 7 měsíci
Use English to query your Django data 🏴
Deploy a Django instant messenger app (in 7 mins) 🚀
zhlédnutí 470Před 8 měsíci
Deploy a Django instant messenger app (in 7 mins) 🚀
Build an instant messenger with Django (in 6 mins) 🌮
zhlédnutí 1,6KPřed 8 měsíci
Build an instant messenger with Django (in 6 mins) 🌮
THANKS SR
In mine everything is working correctly but when i click the button the sign in page is all white and when inspect and go to console it says this "The given origin is not allowed for the given client ID." Really dont know what to do
idk if I have to give it time since i just created my credentials or what
It helps me a lot. Thanks ❤
Wow. Great. thanks.
Good tutorial, but please mate buy a better mic.
Thanks @perronemirko 🙂 I have since bought a better mic
Thanks for this video♥. Please, I want to ask you, how deploy django ninja api for production ?
Hi Christelor - I just wrote a guide in response to your comment and mentioned you. Here it is: www.photondesigner.com/articles/deploy-ninja
@@tomdekan Thanks for your response. You're a great guy
Thanks @@christelorsaoure-jf3ne- you're welcome!
can this work on a react js frontend
Yes 👍
Very good video and well explained :D
Thanks and glad you liked it 🙂
Thank you, this is very helpful for leveraging the power of both vue and django. One question: Does localstorage leave a security vulnerability since the user can modify its state?
You're welcome 🙂 If you just used local storage (as in the local storage on the browser) you might create a security issue that you'd need to handle. However, we don't do that in the guide. In the guide, we use: 1. session storage. This sets a httpsecure cookie that only servers can modify (e.g., we make a request to Django from vue to set it, but vue can't access it. 2. csrftoken. This is a random token that django sends to vue to check that only ouor intended site (our vue app) is accessing Django. Vue can access this, but django is expecting a certain csrftoken back. The csrftoken contains no sensitive data and changing it would cause django to throw an error.
wow, how to make such a smooth cursor animation on macos?
Screenstudio
Super thank you for such detailed and nice tutorial 👏
You’re welcome 😊
Have been using django ninja for some time now, it really is an amazing way to build API's. My weakspot has always been frontend, so now I'm trying to shore up my experience with JS technologies (mainly react, since its the only framework I've spent any real time on). Thanks for the awesome video, keep it up! More people need to know about Django Ninja 🚀
Glad to hear that you found it useful and I agree :)
Is it possible to implement the auth_receiver without resorting to @csrf_exempt which reduces security?
Cool question. To avoid removing the csrf except is possible but depends on what Google allows. Django generates the csrf token and then Google sends a request to Django. So to keep using that csrf token, you would need to send the csrf token to Google and then have Google also send that csrf token when it sends a request to auth receiver. So check out the Google docs to see what Google allows and let me know. One thing to note: This will add significantly higher complexity beyond the tutorial.
I would definately love to see how it can be deployed .Thanks
Thanks for that. Noted!
this is soo good
Thanks abdrahim!
Does the script still work?
It should do! Try it out
Hi Tom, I like the style of photondesigner's auth page, can you give the code for it ? please
Hi Anzil. I’m not going to post the source online due to the effort required to separate it from Photon Designer. However, feel free to copy the page source from your browser! You should be able to replicate it that way.
Hi Tom, thank you for this great video, found out that its not working in Firefox though due to a bug a in Firefox prevents it from loading source maps for WebExtensions (discovered when trying to log in)
You’re welcome and thanks for the info. Is the source maps bug in Firefox related to using Tailwind?
hi tom, why didn't you use alpine js for frontend... it would be smoother :)
Alpine.js is great! I wanted to use React here for the situation where you need a much more robust frontend. Alpine is great for embedding in a backend that serves HTML. But, in this instance, I am using Django Ninja to return JSON, so Alpine wouldn't be the right choice. Let me know if you've any more questions.
@@tomdekan thanks for your reply... i couldn't understood the part of stability 😅, because alpine.JS didn't use vDom, while react does :) alpineJS works similiar like vue, but faster and leighter, it also fetch API, it's whole x-data based on API... or did i missunderstood your point?
Almost! Some benefits of React v Alpine are: - it handles higher complexity more easily. For example, There are neat ways to put React code in components and handle lifecycle. This is strongly advantageous after you pass a certain complexity. - React has many more packages and support. This means you can do certain things much faster because other people have already written great packages for you, eg React Framer Motion.
pheeeew, the stuff on flowbite wasnt working, then i watched this. you are a life saver
Glad to hear it :)
It would be great if you could provide the GitHub link 🙏🙏
Hey Tom, attempted to find an email to reach out but wasn't able to but it looks like you respond to most comments so I'm hoping this message reaches you. I've been working on a Django, ninja, corse, all auth authentication system for a while. Currently in production I have a mobile first docker container which runs a flask app for mainly hosting the dash framework and on the backend I have that Django application also wrapped in a docker container with all I had mentioned. I've been trying to setup authentication from my flask server into my Django server remotely for users but I've ran into a few issues and resolved many others. Noticed a lot of comments in your ninja video are people interested in a video of how to set up authentication via ninja. I've also seen some of your prior work with authentication and read some of your other articles of similar nature. Your really talented, I'm recently getting back into making videos after a two years absence and am in the programming industry. Just wanted to reach out as I think we could help each other, have some initial code for this ninja authentication system Id like to get an opinion on and maybe we can find a place for us to collaborate on building a useful tutorial for the Django community. Reach out if your available or interested, would like to talk more. pipinstallpython@gmail.com, reference dash.geomapindex.com, geomapindex.com, piratesbargain.com and github.com/pip-install-python
Amazing, freshly baked 2 months ago. Needed it for a company project where we run some automatic script in the background when new task arrived. Thank you! Also benefited a lot from your google login video.(Although I had a GSI_LOGGER error, I saw some commented on your original video which is still not solve, so I am using the old google login API at the moment).
Awesome - great to hear 😊 On the Google login video, I updated the written guide 2 days ago to fix the GSI_LIGGER error (Google no longer allows redirect with Django). Check out the link in the Google video!
@@tomdekan OMG this is like christmas. Thank you.🔥
Haha - you’re welcome :)
If (and when!) you need a scheduler, check rq-scheduler instead of Celery
Thanks Roberto. Agree on the if!
I use celey, redis, docker! Please make a detail video on this, what should be a better alternate?
Good suggestions! I might make another short saying the simple tools that I tend to use.
🎉
⭐️💫
Hello, thanks for the content, is it possible to invoke the local gateway asynchronously
You are welcome! What do you mean by “local gateway” here?
Valid points. Thank you for sharing your honest thoughts openly.
My pleasure. Glad you liked it 🙂
This library is not safe. IT broken (shut down) my application in production. Be aware. After I install it no comande works in terminal anymore. I can't solve it. I trying hard
Hi Paulo. I'm not sure what you meanby "not safe" here. The package that I'm using is the official Google python package - I'm pretty confident that it is safe!
Hi Tom, thank you kindly for this video. I was wondering if you could talk about two topics: - Auth considerations with django ninja. Common security pitfalls especially. - A walkthrough of deploying django to prod. Thanks!
You’re welcome and great suggestion! Might make a few good shorts. Thanks 🙂
Thanks, been struggling for this the entire day, until your video. It made sense. I had 2 x-csrftokens, that's why it didn't work. Also apparently there's a difference between axios, fetch and axios.get vs axios({method: 'get' } ) ... The method:' get' verison works the other doesn/t
Great it helped! CSRF tokens can be tricky 🙂
Hey this is a great tutorial! I was able to follow along up until the part where we needed to edit the views file. The lines from google.oauth2 import id_token, from google.auth.transport import requests were giving me an error where it said that google.oauth2 and google.auth.transport could not be resolved by pylace. I'm assuming that I need to download these modules or something like that but I'm not able to find the right commands to do this. I'm currently coding on VS code on a mac book. I would really appreciate it if you could help me out :) thank you!
Hey! I actually figured out how to fix that issue, thank you! however I'm running into another issue where, when I click the sign in with google button on the sign_up page, it takes me to a blank document - not sure what's going on :(
Thanks Sahana. I've just looked into this today, found the problem, and fixed it. Google now doesn't allow the redirect option in the local dev environment. You'll just need to: 1. Change your HTML code to use "popup" rather than redirect 2. Add the two lines I mention in the settings.py file to allow popups to redirect to Django. 👉 See the full instructions in the updated article: www.photondesigner.com/articles/google-sign-in?ref=yt
@@tomdekan Great, thank you so much for looking into this and helping out, really appreciate it!
You’re welcome Sahana. Thanks for your comment
Honest question from newbie developer. I use rsync to push my project to the VPS, and then run docker compose up. Site is deployed in seconds. Admittedly it took awhile to work out the Dockerfile and the Caddyfile details and to initially install Docker (Snap), but once that’s settled, it seems as easy as using a PAAS service? What am I overlooking?
Thanks for the question and glad that your setup is working well. The two main costs are: 1. setting up infrastructure (which you've already paid), and 2. maintaining your infrastructure (which you'll continue to pay). There will likely be issues in the future, e.g., Docker will need updating, something will fail in your setup, etc., (hard to predict now). With your setup, you'll continue to pay the costs of being the infrastructure engineer in charge of this. For me, I'd rather outsource this to a paid service, and maximise the time I can spend building product / adding customer value, rather than maintaining infrastructure. For you, I'd recommend not worrying about this point now that you've set up your infrastructure. I'd recommend that you focus on building things that add value to your users instead 🙂
Sorry Tom im one one from older fans, but im in country we work 12 hour for $4 a day , so not anyone can spend money
Hi Alex - yeah absolutely. There’s a big “if” on this video. There are lots of places where $7 is too much. My general suggestion is for developers not to prioritise spending time over money, where they can afford to do so.
Hey man! This tutorial is perfect RIGHT ON THE MONEY for this topic. THANK YOU very much for taking your PERSONAL TIME to make these videos! PS! At this fucking JUICY and EPIC level that the actual content of your video is, things like mic-quality, audio compression, and (meh) maximizing UI-space for us poor short-sighted people are the only things I can think of making this a 9.8 / 10. Well played, sir! All the best <3
You're welcome 🙂 And thanks a lot for that feedback! I've upgraded mic-quality, audio compression, and UI-space in my recent videos. Glad to hear that the content was good enough for the low-quality of these things in this video. Let me know if you've got any other suggestions 🙂
this is exacty what i was lookin for.. thanks mate!!
Great. You're welcome!
great tutorial would love to see the second part. If anyone is getting an error """ Import "django.db" could not be resolved from sourcePylancereportMissingModuleSource (module) django """ Then the problem is that you have to create your virtual enviornment before deploying django, you would need to do python -m venv venv source venv/bin/activate in the terminal and then the deployment part
Thanks Nelson! I've just posted the written guide here for part 2 (including auth): www.photondesigner.com/articles/react-auth . Video coming soon 🙂
How does watcher works when application is being deployed? Meaning, do I need to do something extra with gunicorn and nginx?
No; you just deploy pure css. Tailwind only runs in development, converting your Tailwind CSS to pure CSS on development.
@@tomdekan Thank you!
@@bravenick Welcome 🙂
thanks ! django + vue or django + react what you suggest ?? I'm new in web i tried react in school I messed by jsx code
Both are good. I prefer Vue, but React has more features and libraries. For getting a job, I'd say that learning React is slightly more helpful, as many more people use it.
Thank you ! I'm looking forward to your updated part 2 , including how to deploy both to production , add authentication 🙂
You're welcome. I've just posted the written guide here (including auth, but not yet production): www.photondesigner.com/articles/react-auth . Video coming soon 🙂
nicely done! thank you! I'm looking forward to your updated part 2 , including how to deploy both to production ,add authentication。
Coming soon!
@@tomdekan I'd also love to see part 2!
@@its-cess Thanks Cess! The written guide for part 2 is here: www.photondesigner.com/articles/react-auth I plan to release the video in the next week or so.
Your channel man, is a hidden gem! Keep up the great work!
Thanks 🙂 Will do!
So basically FASTAPI + Django dev tools
Yes + Django ORM integration. Here's a comparison for you Alex: django-ninja.dev/motivation/?h=fastapi
Also async just works. Also, Swagger out of the box at /docs.
Good point. Swagger out of the box is great.
Thank you! I've been looking for something like this for a very long time, only this video helped
Glad I could help! I'm also planning to make a React + Django video showing how to add auth. Let me know if that's interesting :)