DevGuide ๐Ÿ‡ต๐Ÿ‡ธ
10.9K subscribers
2.68K photos
18 videos
127 files
3.56K links
Level up daily with insider dev hacks, smart career tips, and real talk! ๐Ÿš€

โšก๏ธ Stay connected with me: linktr.ee/AliSamir

๐Ÿ“ To advertise on the channel: https://telega.io/c/the_developer_guide
Download Telegram
JavaScript Array Methods โœ…
โค8๐Ÿคฃ1
React 19: Smooth Transitions ๐Ÿš€

React 19 makes your UI buttery smooth!
Using startTransition, you can handle complex animations and interactions without blocking the main thread.
โค4
Why React Query?

Still juggling useEffect and loading spinners? ๐Ÿค”


Let me show you how React Query makes data fetching, caching, and syncing ridiculously easy.

Smarter state. Fewer bugs. Cleaner code.
โค4
Laravel launches Laravel Learn with two free mini-courses ๐ŸŒŸ


Kickstart your journey with two mini video courses:

- Getting Started with Laravel
- PHP Fundamentals

https://laravel.com/learn
โค4
ุฏุฑุฏุดุฉ ุณุฑูŠุนุฉ ุนู† ุงู„ู€ Vector Database ๐Ÿ’ก
.
.
ู„ูˆ ุฑูƒุฒุช ุดูˆูŠุฉ ููŠ ู…ุนุธู… ุงู„ุชุทุจูŠู‚ุงุช ุงู„ุฐูƒูŠุฉ ุงู„ู„ูŠ ู…ูˆุฌูˆุฏุฉ ููŠ ุงู„ูˆู‚ุช ุงู„ุญุงู„ูŠ โ€“ ู…ู† Google Search ู„ุญุฏ ChatGPT ูˆ Netflix โ€“ ู‡ุชู„ุงู‚ูŠ ุฅู† ููŠู‡ ุญุงุฌุฉ ู…ุดุชุฑูƒุฉ ุจูŠู†ู‡ู…: ุงู„ู‚ุฏุฑุฉ ุฅู†ู‡ู… "ูŠูู‡ู…ูˆุง" ุงู„ู„ูŠ ุฃู†ุช ุจุชุฏูˆุฑ ุนู„ูŠู‡ ู…ุด ุจุณ ูŠุทุงุจู‚ูˆุง ุงู„ูƒู„ู…ุงุช.

ุงู„ู…ูˆุถูˆุน ุฏู‡ ุนู…ุฑู‡ ู…ุง ูƒุงู† ู‡ูŠุจู‚ู‰ ุณู‡ู„ ุจุงู„ู€ Databases ุงู„ุชู‚ู„ูŠุฏูŠุฉ ุงู„ู„ูŠ ุชุนูˆุฏู†ุง ุนู„ูŠู‡ุง ุฒูŠ SQL ุฃูˆ NoSQL. ูˆุนู„ุดุงู† ูƒุฏู‡ ุธู‡ุฑ ู†ูˆุน ุฌุฏูŠุฏ ู…ู† ู‚ูˆุงุนุฏ ุงู„ุจูŠุงู†ุงุช ุงุณู…ู‡: Vector Database.

ุงู„ู€ Vector Database ุงุชุนู…ู„ุช ู…ุฎุตูˆุต ุนุดุงู† ุชุญู„ ู…ุดูƒู„ุฉ ุงู„ุจุญุซ ุจุงู„ู€ "ู…ุนู†ู‰" ู…ุด ุจุงู„ู€ "ูƒู„ู…ุฉ"ุŒ ูˆุฏูŠ ุงู„ู†ู‚ู„ุฉ ุงู„ู„ูŠ ุฎู„ุช ุฃูŠ ู†ุธุงู… ุฐูƒูŠ ูŠู‚ุฏุฑ ูŠุชุนุงู…ู„ ู…ุน ุงู„ู€ Data ุจุทุฑูŠู‚ุฉ ุดุจู‡ ุชููƒูŠุฑู†ุง ูƒุจุดุฑ.

โ€”โ€”โ€”

๐Ÿ“Œ ูŠุนู†ูŠ ุฅูŠู‡ Vector DatabaseุŸ

ุงู„ู€ AI Models (ุฒูŠ NLP ุฃูˆ Computer Vision) ู„ู…ุง ุชูŠุฌูŠ ุชู…ุซู„ ุฃูŠ ู…ุนู„ูˆู…ุฉ โ€“ ุณูˆุงุก ู†ุตุŒ ุตูˆุฑุฉุŒ ุฃูˆ ุตูˆุช โ€“ ู…ุด ุจุชุฎุฒู†ู‡ุง ุจุดูƒู„ู‡ุง ุงู„ุฎุงู…. ู‡ูŠ ุจุชุญูˆู„ู‡ุง ู„ุญุงุฌุฉ ุงุณู…ู‡ุง Embedding Vector.

ุงู„ู€ Vector ุจุจุณุงุทุฉ ุนุจุงุฑุฉ ุนู† Array ุฃุฑู‚ุงู… (ุฒูŠ [0.23, -0.44, 0.91, โ€ฆ]) ูˆุงู„ุฃุฑู‚ุงู… ุฏูŠ ุจุชุนุจุฑ ุนู† ุงู„ู…ุนู†ู‰.

ู…ุซุงู„:

- ูƒู„ู…ุฉ "cat" ูˆ "dog" ู‡ุชู„ุงู‚ูŠ ุงู„ู€ Vectors ุจุชูˆุนู‡ู… ู‚ุฑูŠุจูŠู† ุฌุฏู‹ุง ููŠ ุงู„ู€ Space.
- ู„ูƒู† ูƒู„ู…ุฉ "car" ู‡ุชูƒูˆู† ุจุนูŠุฏุฉ ุนู†ู‡ู….

ุจุงู„ุชุงู„ูŠ ุงู„ุจุญุซ ู‡ู†ุง ุจูŠุจู‚ู‰ ู…ุด ุจุงู„ูƒู„ู…ุฉ ู†ูุณู‡ุงุŒ ุจุงู„ู€ Similarity ููŠ ุงู„ู…ุนู†ู‰.

โ€”โ€”โ€”

โšก๏ธ ุฅูŠู‡ ุงู„ู…ุดูƒู„ุฉ ู…ุน ุงู„ู€ Databases ุงู„ุนุงุฏูŠุฉุŸ

- ุงู„ู€ MySQL ุฃูˆ MongoDB ู…ุตู…ู…ูŠู† ู„ู„ู€ Keyword Search. ูŠุนู†ูŠ ุชุฏูˆุฑ ุนู„ู‰ ูƒู„ู…ุฉ "cat" ูŠุฌูŠุจู„ูƒ Data ููŠู‡ุง ุงู„ูƒู„ู…ุฉ ุฏูŠ ุจุงู„ุญุฑู.
- ู„ูƒู† ู„ูˆ ุนุงูŠุฒ ุชุจุญุซ ุนู† ุญุงุฌุฉ ุดุจู‡ "cat" ุจุงู„ู…ุนู†ู‰ (ุฒูŠ "kitten" ุฃูˆ "cute animal")โ€ฆ ู‡ู†ุง ุงู„ู€ Databases ุงู„ุชู‚ู„ูŠุฏูŠุฉ ู…ุด ู‡ุชุณุงุนุฏูƒ.

โ€”โ€”โ€”

๐Ÿ’ก ุฅูŠู‡ ูˆุธูŠูุฉ ุงู„ู€ Vector DatabaseุŸ

1- ุชุฎุฒู† ุงู„ู€ Vectors ุจุดูƒู„ efficient.
2- ุชุชูŠุญู„ูƒ ุชุนู…ู„ Similarity Search ุฃูˆ Nearest Neighbor Search ุจุณุฑุนุฉ ูƒุจูŠุฑุฉ ุฌุฏู‹ุง.
3- ุชุฎู„ูŠูƒ ุชู‚ุฏุฑ ุชุณุฃู„ ุจุงู„ู€ natural language ูˆุชุงุฎุฏ ู†ุชูŠุฌุฉ ุฏู‚ูŠู‚ุฉ ุจุงู„ู…ุนู†ู‰.

โ€”โ€”โ€”

๐Ÿ›  ุฃู…ุซู„ุฉ ุนู…ู„ูŠุฉ:

- ุงู„ู€ Recommendation Systems: ุฒูŠ Netflix ุฃูˆ Spotify ู„ู…ุง ูŠู‚ุชุฑุญูˆุง ุญุงุฌุฉ ุดุจู‡ ุงู„ู„ูŠ ุจุชุญุจู‡ุง.
- ุงู„ู€ Semantic Search: ุชุฏูˆุฑ ููŠ Documents ุฃูˆ Emails ุนู† "meeting" ููŠุฌูŠุจู„ูƒ ุญุงุฌุงุช ู„ูŠู‡ุง ุนู„ุงู‚ุฉ ุญุชู‰ ู„ูˆ ุงู„ูƒู„ู…ุฉ ู…ุด ู…ูƒุชูˆุจุฉ ุจุงู„ุญุฑู.
- ุงู„ู€ Chatbots: ุฒูŠ ChatGPT ู„ู…ุง ูŠุฑุฏ ุนู„ูŠูƒ ู…ู† Knowledge Base ุจุงุณุชุฎุฏุงู… ุฃู‚ุฑุจ ุฅุฌุงุจุฉ ุจุงู„ู…ุนู†ู‰ ู…ุด ุจุงู„ูƒู„ู…ุฉ.

โ€”โ€”โ€”

๐Ÿ“‚ ุฃู…ุซู„ุฉ ุนู„ู‰ Vector Databases:

- Pinecone
- Weaviate
- Milvus
- Qdrant

ูƒู…ุงู† ููŠู‡ Extensions ู„ู„ู€ Databases ุงู„ุชู‚ู„ูŠุฏูŠุฉ ุฒูŠ PostgreSQL (pgvector).

โ€”โ€”โ€”

ุงู„ู€ Vector Database ู…ุด ุจุฏูŠู„ ู„ู„ู€ SQL ุฃูˆ NoSQLุŒ ู„ูƒู†ู‡ุง ุฅุถุงูุฉ ู‚ูˆูŠุฉ ุฌุฏู‹ุง ู„ู„ุฃู†ุธู…ุฉ ุงู„ู„ูŠ ุจุชุนุชู…ุฏ ุนู„ู‰ ุงู„ุฐูƒุงุก ุงู„ุงุตุทู†ุงุนูŠ.

ู‡ูŠ ุงู„ุณุจุจ ุฅู† ุฃูŠ ุชุทุจูŠู‚ ุฐูƒูŠ ุงู„ู†ู‡ุงุฑุฏู‡ ูŠู‚ุฏุฑ ูŠุชุนุงู…ู„ ู…ุน ุงู„ู€ Data ุจุงู„ู…ุนู†ู‰ ู…ุด ุจุงู„ูƒู„ู…ุฉ.

โ€”โ€”โ€”

ูˆูู‚ูƒู… ุงู„ู„ู‡ ู„ูƒู„ ุฎูŠุฑ ๐ŸŒฟ
โค9
๐ŸŽฏ ูุงู‡ู… ูŠุนู†ูŠ ุฅูŠู‡ Observer PatternุŸ
.
.
"ุฅุฒุงูŠ ุฃุฎู„ูŠ ุงู„ุฃุฌุฒุงุก ุงู„ู…ุฎุชู„ูุฉ ููŠ ุงู„ู†ุธุงู… (system) ุชุชูˆุงุตู„ ู…ุน ุจุนุถ ูˆุชุนุฑู ุฅู† ููŠู‡ ุชุบูŠูŠุฑ ุญุตู„โ€ฆ ู…ู† ุบูŠุฑ ู…ุง ุฃุฑุจุท ูƒู„ ุญุงุฌุฉ ุจุจุนุถู‡ุง ูˆุฃุฎู„ูŠ ุงู„ูƒูˆุฏ ู…ุนู‚ุฏ ูˆู…ู„ูŠุงู† dependenciesุŸ"

ุงู„ู…ูˆุถูˆุน ูŠุจุงู† ุจุณูŠุท ููŠ ุงู„ุฃูˆู„ุŒ ุจุณ ุฃูˆู„ ู…ุง ุชุฏุฎู„ ููŠ ู…ุดุฑูˆุน ูƒุจูŠุฑุŒ ุชู„ุงู‚ูŠ ุงู„ุฏู†ูŠุง ุจู‚ุช spaghetti codeโ€ฆ ูƒู„ function ู…ุฑุจูˆุทุฉ ุจุงู„ุชุงู†ูŠุฉุŒ ูˆุฃูŠ ุชุนุฏูŠู„ ุตุบูŠุฑ ู…ู…ูƒู† ูŠุจูˆุธู„ูƒ ุฃุฌุฒุงุก ุชุงู†ูŠุฉ ููŠ ุงู„ู€ app.

ููŠ ู‡ู†ุฏุณุฉ ุงู„ุจุฑู…ุฌูŠุงุชุŒ ููŠู‡ ุจุนุถ ุงู„ุญู„ูˆู„ ูˆุงู„ุทุฑู‚ ู…ุชูู‚ ุนู„ูŠู‡ุง ุจุชุฎู„ู‘ูŠ ุงู„ุณูŠุณุชู… modularุŒ ุณู‡ู„ ุงู„ุตูŠุงู†ุฉุŒ ูˆุณู‡ู„ ุงู„ุชูˆุณุน. ุงู„ุญู„ูˆู„ ุฏูŠ ุจู†ุณู…ูŠู‡ุง Design Patterns.

ูˆุงุญุฏ ู…ู† ุฃู‡ู… ูˆุฃุดู‡ุฑ ุงู„ู€ patterns ุงู„ู„ูŠ ุจูŠุชูƒุฑุฑ ูˆุฌูˆุฏู‡ ููŠ ู…ุฌุงู„ุงุช ู…ุฎุชู„ูุฉ ู‡ูˆ:
Observer Pattern

ุงู„ู€ pattern ุฏู‡ ููƒุฑุชู‡ ุนุงู…ุฉ ุฌุฏู‹ุงุŒ ูˆู…ู…ูƒู† ุชู„ุงู‚ูŠู‡ ู…ุณุชุฎุฏู… ููŠ ุงู„ู€ events ุฃูˆ real-time updates ุฃูˆ distributed systemsุŒ ุฃูˆ ุญุชู‰ ููŠ ุฃูŠ application ู…ุญุชุงุฌ ูŠุชุนุงู…ู„ ู…ุน ุชุบูŠูŠุฑุงุช ููŠ state ูˆูŠุดุงุฑูƒู‡ุง ู…ุน ุฃุฌุฒุงุก ุชุงู†ูŠุฉ...

โ€”โ€”โ€”

๐ŸŸข ุงู„ููƒุฑุฉ ุจุจุณุงุทุฉ:

ุงู„ู€ Observer Pattern ุจูŠุดุชุบู„ ูƒุฏู‡:

- ุนู†ุฏูƒ Subject: ุฏู‡ ุงู„ู€ object ุงู„ู„ูŠ ุจูŠู…ุชู„ูƒ ุงู„ู€ state.
- ุนู†ุฏูƒ Observers: ู…ุฌู…ูˆุนุฉ objects ุนุงูŠุฒูŠู† ูŠุชุจู„ุบูˆุง ุจุฃูŠ ุชุบูŠูŠุฑ ููŠ ุงู„ู€ state.

ุฃูˆู„ ู…ุง ุงู„ู€ Subject ูŠุชุบูŠุฑุŒ ูŠุจุนุช notification ู„ูƒู„ ObserversุŒ ูˆูƒู„ ูˆุงุญุฏ ููŠู‡ู… ูŠุนู…ู„ update ู„ู†ูุณู‡ ุจุทุฑูŠู‚ุชู‡.
ุงู„ู…ู‡ู… ุฅู† ุงู„ู€ Subject ู…ุด ู…ุญุชุงุฌ ูŠุนุฑู ุงู„ุชูุงุตูŠู„ ุนู† ูƒู„ Observerโ€ฆ ู…ุฌุฑุฏ ูŠู‚ูˆู„ "ุฃู†ุง ุงุชุบูŠุฑุช" ูˆุฎู„ุงุต.

โ€”โ€”โ€”

๐ŸŸข ู…ุซุงู„ ู…ู† ุฃุฑุถ ุงู„ูˆุงู‚ุน:

ุชุฎูŠู„ ุฅู†ูƒ ุนุงู…ู„ subscribe ู„ู‚ู†ุงุฉ ุนู„ู‰ YouTube:

- ุงู„ู‚ู†ุงุฉ = Subject
- ุงู„ู…ุดุชุฑูƒูŠู† = Observers

ุฃูˆู„ ู…ุง ุงู„ู‚ู†ุงุฉ ุชู†ุฒู„ ููŠุฏูŠูˆ ุฌุฏูŠุฏุŒ ูŠูˆุชูŠูˆุจ ุจูŠุจุนุช Notification ู„ู„ูƒู„. ุงู„ู‚ู†ุงุฉ ู…ุด ุจุชุณุฃู„ "ูู„ุงู† ุนุงูŠุฒ notification ุฅุฒุงูŠ"โ€ฆ ู‡ูŠ ุจุณ ุจุชุจุนุช ูˆุงู„ูƒู„ ูŠุชุตุฑู.

โ€”โ€”โ€”

๐ŸŸข ู„ูŠู‡ ุงู„ู€ Observer Pattern ู…ู‡ู…ุŸ

1- ุจูŠู‚ู„ู„ ุงู„ู€ tight coupling: ุงู„ู€ Subject ู…ุด ุจูŠุนุฑู ุงู„ุชูุงุตูŠู„ ุนู† Observers.
2- ุจูŠูƒูˆู† ููŠู‡ flexibility: ุชู‚ุฏุฑ ุชุถูŠู ุฃูˆ ุชุดูŠู„ Observers ุจุณู‡ูˆู„ุฉ.
3- ุจูŠุณู‡ู„ maintenance: ุฃูŠ ุชุนุฏูŠู„ ุจูŠุจู‚ู‰ localizedุŒ ู…ุด ู‡ูŠุจูˆุธ ุจุงู‚ูŠ ุงู„ู€ code.

โ€”โ€”โ€”

ููŠ React: ู„ู…ุง ุงู„ู€ state ุชุชุบูŠุฑุŒ ุงู„ู€ component ุชุนู…ู„ re-renderโ€ฆ ุฏู‡ ู†ูุณ ููƒุฑุฉ ุงู„ู€ Observer.

ููŠ Angular (RxJS): ุงู„ู€ Observables streams ู‡ูŠ abstraction ู‚ูˆูŠุฉ ู„ููƒุฑุฉ ุงู„ู€ Observer.

ููŠ JavaScript Events: ูƒู„ ู…ุง ุชุนู…ู„ element.addEventListenerุŒ ุฃู†ุช ูุนู„ูŠู‹ุง ุจุชุณุฌู„ Observer.

โ€”โ€”โ€”

ูˆูู‚ูƒู… ุงู„ู„ู‡ ู„ูƒู„ ุฎูŠุฑ ๐ŸŒฟ
โค10