- Видео 51
- Просмотров 107 923
Atila
Германия
Добавлен 6 апр 2020
Making complex code simpler.
Create your own AI Agent (with RAG) from SCRATCH
💡Agentic #RAG refers to an AI system that doesn't just passively retrieve and use information. It actively reasons about what information it needs and strategically searches for it.
It's like giving an AI assistant the ability to "think" about what information it needs to solve a problem and then actively seek it out within an expanded context provided by your own data.
I'll teach you how to beat everyone in your Fantasy League 🏈
Chapters
=========
00:00 - Intro
01:01 - Data gathering with Python
08:42 - Loading data into the database
10:08 - Creating a plain RAG
12:22 - RAG Demo
13:18 - Building an Agent AI
14:20 - Chatting with our Agent (demo)
15:30 - Final thoughts
It's like giving an AI assistant the ability to "think" about what information it needs to solve a problem and then actively seek it out within an expanded context provided by your own data.
I'll teach you how to beat everyone in your Fantasy League 🏈
Chapters
=========
00:00 - Intro
01:01 - Data gathering with Python
08:42 - Loading data into the database
10:08 - Creating a plain RAG
12:22 - RAG Demo
13:18 - Building an Agent AI
14:20 - Chatting with our Agent (demo)
15:30 - Final thoughts
Просмотров: 541
Видео
What does AI really mean?
Просмотров 135Месяц назад
💡 Artificial Intelligence leverages technologies like vector databases, language models, and embedding techniques to create increasingly sophisticated systems for understanding, generating, and retrieving information. Offering feedback in a very human-like output. Let's pop the hood on these concepts and understand the moving pieces that connect to make AI really a thing. Chapters 00:00 - Intro...
Social logins in SolidStart with Single Sign-On (SSO)
Просмотров 285Месяц назад
💡 Single Sign-On (SSO) is a method that allows a user to log in to multiple applications or services with a single set of login credentials. In this video we are going to implement SSO with MediaKit Auth and protect a few routes with it. Chapters 00:00 - Intro 00:17 - What is Single Sign-On 00:37 - Today's stack 🍲 01:09 - Code walkthrough 01:42 - SessionProvider context 02:16 - Auth options 03:...
Multi-threaded SolidStart with Web-Workers
Просмотров 844Месяц назад
💡 Web-Workers enable programs to run heavy computations, data processing, or file handling without blocking the user interface. Ensuring that web applications remain responsive and smooth. Because they run on a separate thread (worker thread), they have no access to DOM APIs and can also be used as a safer alternative to run 3rd party code, even if it does not have demanding memory usage. Chapt...
E-mail verification flow, end-to-end with Node.js
Просмотров 4112 месяца назад
💡 Verifying that address through a confirmation process serves multiple critical purposes: 1️⃣ it ensures the user has provided a valid, working email address they actually own (which is essential for account recovery and communications) 2️⃣ helps prevent spam and automated bot registrations 3️⃣ enhances security by adding an authentication layer reduces the creation of fraudulent accounts 4️⃣ ...
Implement OTP (One-Time Password) verification with Node.js
Просмотров 7602 месяца назад
💡 OTP is a type of 2FA (two-factor authentication ) method that requires users to enter a unique, randomly generated code to access their account. This code is typically valid for a short period of time and is generated either by an app on the user's device or sent to the user via SMS or email. 🔐 OTPs help prevent unauthorized access to accounts, even if the login credentials are compromised, m...
Implementing Auth from scratch - no dependencies!
Просмотров 2,2 тыс.2 месяца назад
💡 "Auth" is a double-abbreviation, it's used to refer to both Authentication (verifying who someone is) and Authorization (determining what they're allowed to do or access). Today we will look at how to implement an Auth system, from managing sessions, registering and logging users in, and of course: security! We'll protect the data and make sure users can only access what we want them to regar...
All you need to add optimistic UI to your project!
Просмотров 3412 месяца назад
Optimistic updates are a technique used to improve the perceived responsiveness of an application. E.g.: When a user performs an action (like submitting a form) the interface immediately updates to reflect the expected result, without waiting for confirmation from the server. This gives users instant feedback and a smoother experience. If the server request fails, the interface can then revert ...
Realtime data with WebSockets on SolidStart
Просмотров 8073 месяца назад
Building a live chat app with #SolidStart and #websockets WebSockets provide a persistent, bidirectional communication channel between a client and server, enabling real-time data exchange without the need for repeated HTTP requests. Chapters: 00:00 Intro 00:48 What are we're going to do 1:26 Finished app and the codebase 1:58 Quick demo 2:19 Configure app build (app.config.ts) 3:39 WebSocket S...
SolidHack 2024 - Money Prizes for Building with Solid
Просмотров 2733 месяца назад
SolidHack 2024 - Money Prizes for Building with Solid check the rules at hack.solidjs.com find us at: discord.gg/solidjs
SolidStart calls for you!
Просмотров 2,6 тыс.Год назад
With SolidStart approaching stability, every tool, project, and open-source project needs a new starter, template, or guide! Now it's the time to get your OSS contributions, learn something new, and empower this amazing and welcoming ecosystem!!! Chapters 00:00 Intro 00:15 An opportunity 00:59 The gist of what we're going to do here 1:15 Create a new project with Solid starter CLI 2:28 Walkthro...
Tauri and Solid make mobile and desktop apps
Просмотров 19 тыс.Год назад
Tauri and Solid make mobile and desktop apps
Auto-completion and bulletproof environment variables with Zod
Просмотров 296Год назад
Auto-completion and bulletproof environment variables with Zod
Server Actions powered Auth in Solid-Start with Xata and Zod
Просмотров 963Год назад
Server Actions powered Auth in Solid-Start with Xata and Zod
Absolute speed: SolidJS + Web-Workers
Просмотров 4,3 тыс.Год назад
Absolute speed: SolidJS Web-Workers
Solving assertions in TypeScript with Predicates: the runtime-aware Type Guard
Просмотров 139Год назад
Solving assertions in TypeScript with Predicates: the runtime-aware Type Guard
Protecting sensitive and user private data with Row-Level Security
Просмотров 109Год назад
Protecting sensitive and user private data with Row-Level Security
React Server Components Crash Course with Next.js
Просмотров 381Год назад
React Server Components Crash Course with Next.js
React Server Components: The 5 most asked questions
Просмотров 255Год назад
React Server Components: The 5 most asked questions
Narrow types properly with Array.filter. The right and the better way
Просмотров 297Год назад
Narrow types properly with Array.filter. The right and the better way
Authenticate your Next.js app and have your user db on Xata with a 1-liner
Просмотров 678Год назад
Authenticate your Next.js app and have your user db on Xata with a 1-liner
I do not have a use-case for SASS anymore
Просмотров 1742 года назад
I do not have a use-case for SASS anymore
Satisfying Types for Better Developer Experience
Просмотров 2532 года назад
Satisfying Types for Better Developer Experience
Xata - Full-text Search and Aggregations in 4 minutes!
Просмотров 3602 года назад
Xata - Full-text Search and Aggregations in 4 minutes!
Write and Test State-Machines with XState and Vitest
Просмотров 1,9 тыс.2 года назад
Write and Test State-Machines with XState and Vitest
can we add shadcn to this
Thank you very much for this video, very informative. I was looking at the code in `lib/authOptions` and in in some places you use `process.env` and in others you use `import.meta.env`. Is there any difference between the two? Do you use `process.env` for server side and `import.meta.env` for client side?
Yes. Because of how the bundle is split between server-side code and client-side code. in a nutshell `import.meta.env` is client-side, and `process.env` is server-side. So if a variable doesn't have VITE_ it will never be exposed to client and you can't see it with `import.meta.env` here's the link to the docs: docs.solidjs.com/configuration/environment-variables
Thanks for the great content, as always. Since you asked for comments, I'm wondering how much harder it would have been to use JavaScript instead of Python for the coding part.
I'm happy you liked it, Rion!! 🤍 Coding-wise, not at all. Probably even easier given that I know JS much better than I do Python. Finding the data would be hard, fetching from all the different APIs and consolidating into a single dataset would be more work. I considered JS and even Rust, but the python library was a game changer to get the data on my hands... Plus, lots of these ML and AI platforms are in python, so getting more familiar with it was a nice little side benefit.
@@AtilaDotIO Thanks for that extra context and info. I have no interest in learning Python and its ecosystem, so good to hear JS could work, but nice that it made things easier and interesting for you.
Great video, looking forward to the next one!
Thanks!! :) here it is: ruclips.net/video/GMjNMod-AbY/видео.htmlsi=kNYLn6Yc_GiKfX7e Let me know if it lives up to expectations!
Really great introduction to AI.
got an error after running “pnpm tauri ios init” it says “Couldn’t recognize the current folder as a tauri project it must contain a ‘tauri.conf.json’, ‘tauri.conf.json5’ or ‘tauri.toml’ file in any subfolder
Thank you so much for your video! I've learned two new things and I've updated my projects with the new knowledge. Can you please post more videos on security for SolidStart? Thank you again!
awesome. I used to create auth with supabase. This video shows a new way to authenticate in an easier method. Thanks. I wish next video could be showed stream application such as chatGPT-like app based on solidstart. What's more, use case of deno deploy KV in solidjs is another course that I am looking forward to learning. thanks again.
Hey! Thanks for the video! Which icon pack are you using in your VSCode? It looks amazing!
Workers look cool and the vite plugin abstracting away the messaging makes them even cooler, but I've yet to run into a scenario where I would actually need them in a web application
You don't need to do it only for very heavy computations, you can use them when adding a 3rd party script, because they don't have access to the DOM APIs, it's safer. Also, it prevents the script from sabotaging your main thread if it ever has issues.
could you show that how to deploy in deno? thanks
Absolutely! I'll record one soon enough (I want to deploy the app in my WebSockets video and Deno Deploy is perfect since they support web sockets!). if you don't want to wait, you can use the Nuxt preset - since SolidStart and Nuxt have the same backend runtime, they work exactly the same, no additional action needed.
@@AtilaDotIO Great! I have successfully deployed the WebSocket feature mentioned in your video before, using the Nuxt preset in Deno Deploy. It works; however, there is an error when a user visits the solid-chat web app. I plan to look into it further next weekend. I am looking forward to your new video. Thanks!
@@AtilaDotIO hello, I found Nuxt preset does not always work well. I failed to deploy a very simple solidstart project today, the error is `Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>.` Is there a new method to deploy in deno? thanks a lot
This is from which playlist ?
Thanks! Web Workers are really cool. I used to be a Python developer before learning SolidJS, and I’ve noticed some differences between coroutines in Python and JavaScript. This video has been incredibly helpful. By the way, I’ve never deployed SolidStart in Deno before. Does its performance truly live up to the official claims?
I'm using Deno Deploy, the cloud service. I haven't worked this much with the Deno runtime to notice a significant difference in performance. I'm not exactly familiar with Python, can you tell me more about the differences you noticed?
@@AtilaDotIO Python’s coroutine scheduling is limited to explicitly registered coroutines, while JavaScript flexibly schedules both ordinary functions and asynchronous tasks. What's more, Python emphasizes optimizing thread scheduling through explicit coroutine registration, while JavaScript relies on the flexible use of await and task design for efficient thread use.
Can you please make a crazy video titled “solid js + web workers + wasm = 2099”
That's a very interesting concept!! 👀 Let me see if I get something working
Excellent demo. Thanks Atila.
Thanks a lot, Rion
Nice introduction to Web-Workers in React. Thanks, Atila {2024-11-20} - Subscribed
Thanks for this video. I wanted to see this working.
is this faster than RN for complicated apps?
It can definitely be. Tauri can match the same speeds, it all depends on the logic of the app itself.
@@AtilaDotIO then... We're saved from rn!
@@greendsnow hahaha I guess you can say that...
Great content, I like these DIY solutions and explanations, more please 😊
Thank very much for saying this, Rory!! It boosts my motivation. Currently I'm doing 1/week, but I'm trying to improve the cadence for 2 - just making sure I'll be able to keep up 🔥 Next one is going to be on Web-Workers! If there's anything specific you're looking for, I'd love to know, please!
TIL requestSubmit thanks Atila!
wow!! Glad I was able to help, Tito! I got myself diving into the spec for that one, because `.submit()` didn't trigger the useSubmission and I didn't want to bring another dependency.
Thank you so much for this fantastic video! It’s given me a lot of insight, especially as I’m currently working on a document synchronization feature in SolidJS. Inspired by the optimistic update pattern you discussed, I’ve come up with an approach where the document’s initial data is provided by an Accessor created with createAsync. When the document is modified, it triggers an action that updates the data source. Using useSubmission, I can treat this pending update as the document’s current state, allowing immediate optimistic updates for the user. If the update succeeds, the data from createAsync remains consistent with the latest changes, and if it fails, error handling kicks in to adjust the displayed data accordingly. However, I have a question: if an action is still pending (like during a synchronization) and another modification occurs that triggers a second update, how should useSubmission handle this? Would it be better to avoid new action submissions while an update is pending, or is there a pattern you would recommend for handling overlapping updates gracefully? Thanks again for such a helpful video!
Could have included a login with google setup ✌😁 But thanks Atila!
The idea of this guide was to show that SolidStart has all you need to roll your own auth system and how to do it. I have a few follow-ups planned already (for verifying emails, OTP tokens, and SSO) But if you're in need of SSO right now, I'd recommend MediaKit/Auth, it uses Auth.js and would then cover google and other SSO providers. The guide I'm preparing is with AuthPC (mediakit-taupe.vercel.app/authpc/introduction) which uses MediaKit/Auth and so you can use for that. 😉
Damn, that Minecraft Steve was on point 👌 14:13
hahaha, yeah! I like adding those little nuggets to break the seriousness... sort of how my focus wanders every now and then. I'm happy you found it nice instead of distracting 😅
@@AtilaDotIO I totally agree, the Steve was on point, made me smile. The Deadpool audio was distracting though. Too much background noise in that clip, would've been better/funnier muted.
Thank you! Great video.
Thanks a lot, Chris! I hope it's aligned with what you were thinking for CSRF Protection and that it helps you moving forward 😊
The CSRF protection is a nice touch. Though it is fairly optional in modern browsers. Since vinxi/H3's default cookie settings for sessions is Secure and HttpOnly, and modern browsers use SameSite "lax" by default, the cookies won't be sent when making POST requests to a different origin. And so your CSRF protection mostly covers older browsers that either don't support SameSite or don't have "lax" by default.
Source code for this video: github.com/atilafassina/auth-unstorage
Thanks for the great content...
Thank you Atila for this channel... been a great ressource for leveling up SolidStart dev skills.
Appreciate you saying that!! There much more coming! 😎
how did you get solid icons in your explorer 🤯
my VSCode settings json: ```json "catppuccin-icons.associations.files": { "app.config.ts": "solid" }, "catppuccin-icons.associations.extensions": { "tsx": "solid", "jsx": "solid" } ``` I use catppuccin.com/ theme and icons
On login/logout I would just invalidate all the cache keys. You never know ;)
That's reasonable, I wouldn't hold it against you. It may get hard to maintain revalidating all of them or it can cause some unnecessary requests. Hopefully you have only a few methods that depends on the session and thus the rest would cascade down if really necessary.
Woah I came from X I am learning solid I didn't know about your channel really good stuff please create more solid stuff.
Thanks a lot for this wholesome comment!! 😎 it makes my day knowing people are enjoying it and it fuels my motivation!
From twitter you mean?
@@jp263 yep😁
Excellent explanation and very visual examples. Thank you
Thanks a lot, Martin! I'm glad you liked it! 😎
Great video!! Thank you so much for sharing it!! BTW... may I ask which VSCode theme do you use in this video? Once again, thanks a lot!!
Thanks a lot! :) the theme I'm using is Catpuccin Moccha (catppuccin.com) as well as their icons. And the font is Victor Mono
@@AtilaDotIO Thanks a lot!! Please, keep your excellent work!!
Great explanation. Thanks for these videos!
Thanks a lot, Rion!!
"Now you need to Subscribe to the Channel" LOL
Yes!!! I don't make the rules!! 🤣
your voice was really quiete so I turned my volume up and then got jumpscared by how loud your intro was
haha really sorry! I'll try to adjust the audio on this one and I'll keep that in mind for the other ones coming! Thanks for the feedback!
Why do you like more solid over qwik?
First of all, I like Qwik - I think it does the job well, the performance speaks for itself, and the community is cool. But, the reason I prefer Solid over pretty any other framework is because of the balance between abstractions and plain-JavaScript. Every framework has its own set of abstractions where they intend to bump the DX higher and protect the best practices. Solid focuses on runtime optimizations and great primitives, this allow us - developers - to print our own opinions and preferences. Others, like Qwik, lean on the compiler for their optimizations. Which allows them to some early wins, but the expense of having their own Domain-Specific Language, higher level of abstraction, and - to me - that boils down to implicit programming (usually where things start feeling magical). Does that make sense?
awesome! Could it stream updates data as user inputting? Besides, how it performances? Compare to using signal to keep sync between server and client? thanks for your share
SolidStart has streaming support for server to client , so that’s possible. I’ll prep a video about that and I’ll see how to plug it to the websockets!! The sync wouldn’t be a signal per se, but a streaming http connection, in practice it feels more like an observer (RxJS style) than a signal because the streaming request is Push only while I signal is two-way (Push-Pull). So, client-server would be multiple submissions server-client would be http streaming Thanks for the idea! 👍
@@AtilaDotIO Cool, I am looking forward to diving into it.
Wait. Are you Brazilian, too? Do you live in Germany, too?🤯🤯 Get out hahah. No way😂. [Regarding your reply on the other comment and your channel location]
Yeah!! Gaucho in Berlin 🧉
@@AtilaDotIO, caraca, que dahora, man. Lemme know when you get down here [Munich haha]. Cheers.
OMG! You pronounce it Achla! You've never corrected me! Sorry man!
Hahaha… I just normally say it with a Brazilian accent because it rolls out for naturally sometimes. But the “a-TTI-la” is closer to the original Hungarian pronunciation and I like it just as much! Thanks for caring, Scott!! You’re awesome!
Code from the video is on GitHub: github.com/atilafassina/solidstart-websockets
How much of the WebSocket server code comes from Vinxi and how much comes from Nitro/h3/crossws? 👀
in the `ws.ts` all helpers are re-exported from SolidStart. So I'd say 100% comes from h3/crossws what Vinxi does is setup the adjacent router for the WS stuff (in the app.config.ts), I don't think that's a requirement for Nitro, it's just how Vinxi operates the multiple routers (CDN, Client, and Server) - where server is now divided into Server/RPC and WebSocket
Hope to see a lot of people joining to this! Its a massive improvement for the ecosystem
💯
Money? I like it.
Time to write some JavaScript, Giuliano!! :D
Great 🎉
First
💚
🫶
Hi, what is the current state of Tauri v2 ? It is stable enough to start thinking about production ? In my case it could be something for my staff, 20-30 non tech people, and I really search a great and lightweight multiplatform solution.
Hello, Hermes. Sorry I only caught this message now! At the time of this recording, it was still Alpha. But yesterday it already went stable, which means it's absolutely ready for production. In fact, the company I work at (crabnebula.dev) has been using it since the Beta/RC days Here's the announcement post: v2.tauri.app/blog/tauri-20/
@@AtilaDotIO Hello, no problem. This is a great news, I will start a small project asap to test it out ;)
Ingles de Brasileiro é muito massa!! PArabéns mano!
what's your OS font? nice one!
I use VictorMono on the IDE (rubjo.github.io/victor-mono/)
o kojima batendo palminha ganhou meu sub!