This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech 📄
اینپوت با React.js ⚛️
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
اینپوت با React.js ⚛️
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech
اینپوت با React.js ⚛️
اینپوت با React.js ⚛️
DevSource
راهنمای دوره📢 جهت استفاده از دوره، روی هشتگ‌ها بزنید و مطالب را دنبال کنید 👇 دوره ۳۰ روزه رایگان HTML, CSS, JavaScript 🎓 جهت آمادگی برای ورود به React.js 🚀 شامل سه فاز: فاز اول: آموزش HTML 🪜 #html_lessons@devsourcech فاز دوم: آموزش CSS 🎨 #css_lessons@devsourcech…
📅 روز 6: شروع CSS
🧠 خبCSS چیست؟
Cascading Style Sheets
است.
اگر HTML اسکلت ساختمان باشد 🏗️
CSS طراحی داخلی، رنگ‌آمیزی و دکوراسیون آن ساختمان است 🎨
اتصال CSS به HTML
ابتدا یک فایل به نام:
style.css
بساز.
سپس داخل HTML این خط را قرار بده:
داخل تگ <head>.
اولین استایل
تغییر رنگ متن
تغییر اندازه متن
تغییر فونت ضخیم
تغییر رنگ پس‌زمینه
🎯 تمرین امروز
یک صفحه HTML بساز که:
یک عنوان داشته باشد
یک متن داشته باشد
رنگ عنوان را تغییر بده
اندازه عنوان را تغییر بده
رنگ پس‌زمینه صفحه را عوض کن
💡 نکته مهم:
از امروز وارد بخشی شدی که ظاهر سایت‌ها را می‌سازد.
تقریباً هر چیزی که در ظاهر یک سایت می‌بینی، با CSS ساخته شده است.
📌 فردا: Box Model — مهم‌ترین مفهوم CSS که هر توسعه‌دهنده فرانت‌اند باید بلد باشد. 🚀
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
🧠 خبCSS چیست؟
Cascading Style Sheets
است.
اگر HTML اسکلت ساختمان باشد 🏗️
CSS طراحی داخلی، رنگ‌آمیزی و دکوراسیون آن ساختمان است 🎨
اتصال CSS به HTML
ابتدا یک فایل به نام:
style.css
بساز.
سپس داخل HTML این خط را قرار بده:
<link rel="stylesheet" href="style.css">
داخل تگ <head>.
اولین استایل
<h1>سلام دنیا</h1>
h1 {
color: red;
}تغییر رنگ متن
h1 {
color: blue;
}تغییر اندازه متن
h1 {
font-size: 40px;
}تغییر فونت ضخیم
h1 {
font-weight: bold;
}تغییر رنگ پس‌زمینه
body {
background-color: lightgray;
}🎯 تمرین امروز
یک صفحه HTML بساز که:
یک عنوان داشته باشد
یک متن داشته باشد
رنگ عنوان را تغییر بده
اندازه عنوان را تغییر بده
رنگ پس‌زمینه صفحه را عوض کن
💡 نکته مهم:
از امروز وارد بخشی شدی که ظاهر سایت‌ها را می‌سازد.
تقریباً هر چیزی که در ظاهر یک سایت می‌بینی، با CSS ساخته شده است.
📌 فردا: Box Model — مهم‌ترین مفهوم CSS که هر توسعه‌دهنده فرانت‌اند باید بلد باشد. 🚀
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcec🖥️
صفحه لاگین 🔐
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
صفحه لاگین 🔐
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech
هاور افکت
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
هاور افکت
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤1👍1
DevSource
#نمونه_کد_فرانت_اند@devsourcech هاور افکت #Hamed #تکنولوژی اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅ ⚠️ آدرس کانال در تلگرام( حتما جوین بشید ) 🚀 @devsourcech ✅ در بله 🔹 Ch: @devsource سایت مستندات برنامه نویسی: 🥇 https://devsource.ir
interactive-helon-lattice-grid-model.zip
19.4 KB
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech
تکنیک Procedural Animation
لینک گیت هاب :
https://github.com/HamedFarazi/Procedural-Animation1/tree/main
لینک مشاهده لایو:
https://procedural-animation1.vercel.app/
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
تکنیک Procedural Animation
لینک گیت هاب :
https://github.com/HamedFarazi/Procedural-Animation1/tree/main
لینک مشاهده لایو:
https://procedural-animation1.vercel.app/
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤1
DevSource
#نمونه_کد_فرانت_اند@devsourcech تکنیک Procedural Animation لینک گیت هاب : https://github.com/HamedFarazi/Procedural-Animation1/tree/main لینک مشاهده لایو: https://procedural-animation1.vercel.app/ #Hamed #تکنولوژی اگر این مطلب براتون مفید بود، با زدن…
این تکنیک با Canvas ساخته نشده 🛠️
فقط با:
✅ CSS
✅ JavaScript
✅ CSS Doodle
این انیمیشن از تکنیکی به اسم Procedural Animation استفاده می‌کنه. 🎬
یعنی به جای اینکه 100 متن و 100 انیمیشن دستی بسازی، یک الگوریتم می‌نویسی که خودش موقع اجرا همه‌چیز رو تولید می‌کنه. 🤖
ترفندهای استفاده‌شده:
• CSS Variables
• @property
• Dynamic Keyframes
• 3D Transform
• CSS Doodle
فرانت‌اند مدرن بیشتر از اینکه حفظ کردن کد باشه، یاد گرفتن این جور تکنیک‌هاست. 🚀
1️⃣ CSS Doodle
کل افکت روی کتابخانه css-doodle.com ساخته شده.
این کتابخونه اجازه میده با CSS الگوها، انیمیشن‌ها و آثار هنری تولید کنی. 🎨
2️⃣ CSS Custom Properties (متغیرهای CSS)
و بعد:
متغیرهای CSS فقط برای رنگ نیستن؛ می‌تونن انیمیشن و تم کل سایت رو کنترل کنن. 🎛️
3️⃣ @property
این قسمت خیلی مهمه:
بعد:
انیمیت میشه. 🎨 با @property می‌تونی متغیرهای CSS رو انیمیت کنی؛ قابلیتی که خیلی‌ها نمی‌شناسن.
4️⃣ CSS 3D Transform
و:
اکثر انیمیشن‌های حرفه‌ای وب فقط با ترکیب:
translate
rotate
scale
ساخته میشن.
5️⃣ Dynamic Keyframes
این بخش خیلی حرفه‌ایه:
جاوااسکریپت خودش Keyframe تولید می‌کنه. 🔄
لازم نیست همیشه Keyframe رو دستی بنویسی؛ میشه با JS تولیدشون کرد.
6️⃣ DOM Injection
و
JavaScript
style.textContent = ...;
استایل در لحظه ساخته میشه. 💻
7️⃣ Procedural Animation
کل افکت در واقع از این تکنیک استفاده می‌کنه:
JavaScript
و درنهایت موقع اجرا مقادیر تصادفی تولید میشن. 🎲
دوستان Procedural Animation یعنی به جای ساخت 100 انیمیشن، یک الگوریتم بنویسی که خودش انیمیشن تولید کنه.
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه‌نویسی:
🥇 https://devsource.ir
فقط با:
✅ CSS
✅ JavaScript
✅ CSS Doodle
این انیمیشن از تکنیکی به اسم Procedural Animation استفاده می‌کنه. 🎬
یعنی به جای اینکه 100 متن و 100 انیمیشن دستی بسازی، یک الگوریتم می‌نویسی که خودش موقع اجرا همه‌چیز رو تولید می‌کنه. 🤖
ترفندهای استفاده‌شده:
• CSS Variables
• @property
• Dynamic Keyframes
• 3D Transform
• CSS Doodle
فرانت‌اند مدرن بیشتر از اینکه حفظ کردن کد باشه، یاد گرفتن این جور تکنیک‌هاست. 🚀
1️⃣ CSS Doodle
کل افکت روی کتابخانه css-doodle.com ساخته شده.
<css-doodle></css-doodle>
این کتابخونه اجازه میده با CSS الگوها، انیمیشن‌ها و آثار هنری تولید کنی. 🎨
2️⃣ CSS Custom Properties (متغیرهای CSS)
--color-1: #fff;
--color-2: #fed790;
و بعد:
color: var(--color-1);
متغیرهای CSS فقط برای رنگ نیستن؛ می‌تونن انیمیشن و تم کل سایت رو کنترل کنن. 🎛️
3️⃣ @property
این قسمت خیلی مهمه:
@property --color-2 {
syntax: '<color>';
inherits: true;
initial-value: #fed790;
}بعد:
--color-2: #00bb9c;
انیمیت میشه. 🎨 با @property می‌تونی متغیرهای CSS رو انیمیت کنی؛ قابلیتی که خیلی‌ها نمی‌شناسن.
4️⃣ CSS 3D Transform
rotate: x y z 2400deg;
و:
translate: 30vmin;
scale: 0;
اکثر انیمیشن‌های حرفه‌ای وب فقط با ترکیب:
translate
rotate
scale
ساخته میشن.
5️⃣ Dynamic Keyframes
این بخش خیلی حرفه‌ایه:
const xKeyframes = layers.map(...)
جاوااسکریپت خودش Keyframe تولید می‌کنه. 🔄
لازم نیست همیشه Keyframe رو دستی بنویسی؛ میشه با JS تولیدشون کرد.
6️⃣ DOM Injection
document.createElement("style")و
JavaScript
style.textContent = ...;
استایل در لحظه ساخته میشه. 💻
7️⃣ Procedural Animation
کل افکت در واقع از این تکنیک استفاده می‌کنه:
JavaScript
@r(...)
@p(...);
و درنهایت موقع اجرا مقادیر تصادفی تولید میشن. 🎲
دوستان Procedural Animation یعنی به جای ساخت 100 انیمیشن، یک الگوریتم بنویسی که خودش انیمیشن تولید کنه.
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه‌نویسی:
🥇 https://devsource.ir
یکی دیگه از اشتباهات رایج توی مصاحبه های بک اند اینه که طرف سریع میره سمت حل مسئله، بدون اینکه اول مسئله رو درست تعریف و یا درک کنه.
مثلا سوال میشه: «سیستم رو طوری طراحی کن که بتونه درخواست های زیاد رو هندل کنه»
و اون شخص سریع شروع می کنه به گفتن : ردیس، کافکا، میکروسرویس، لود بالانسر و ...
در حالی که مثلا هنوز نپرسیده که :
حجم ترافیک چقدره؟
الان read سنگین تره یا write؟
ما واسمون latency مهم تره یا consistency
الان bottleneck کجاست؟
"نتیجه این میشه که راه حل از مسئله جلو میزنه"
پس یادمون باشه که توی مصاحبه های بک اند، چیزی که بیشتر از تکنولوژی مهمه اینه که چقدر می تونی مسئله رو به شکل درست بشکنی و فرضیات رو شفاف کنی.
در واقع اول باید بفهمی اصلا مشکل کجاست.
#رادمان #مصاحبه #بکند
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
مثلا سوال میشه: «سیستم رو طوری طراحی کن که بتونه درخواست های زیاد رو هندل کنه»
و اون شخص سریع شروع می کنه به گفتن : ردیس، کافکا، میکروسرویس، لود بالانسر و ...
در حالی که مثلا هنوز نپرسیده که :
حجم ترافیک چقدره؟
الان read سنگین تره یا write؟
ما واسمون latency مهم تره یا consistency
الان bottleneck کجاست؟
"نتیجه این میشه که راه حل از مسئله جلو میزنه"
پس یادمون باشه که توی مصاحبه های بک اند، چیزی که بیشتر از تکنولوژی مهمه اینه که چقدر می تونی مسئله رو به شکل درست بشکنی و فرضیات رو شفاف کنی.
در واقع اول باید بفهمی اصلا مشکل کجاست.
#رادمان #مصاحبه #بکند
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤2
🚀 همیشه برام عجیبه وقتی می‌بینم یه همکار فرانت‌اند، کدهای HTML رو دستی و کاراکتر به کاراکتر تایپ می‌کنه! انگار هنوز داریم با تبر کد می‌زنیم…
⚙️ ماجرا اینه که Emmet برای فرانت‌کارها مثل یه میان‌بر برای زندگی می‌مونه. مثلاً به جای اینکه نیم ساعت وقت بذاری برای ساختار یه div با چهار تا کلاس و یه ul که داخلش ۱۰ تا li داره، فقط کافیه بنویسی:
div.container>ul>li.item-$*10 و بعد کلید Tab رو بزنی. تموم شد! کل ساختار توی یک ثانیه ساخته میشه.
🔧 نکته‌ی جالب اینجاست که خیلیا فکر می‌کنن باید حتماً یه پلاگین خاص نصب کنن، اما اگه از محصولات JetBrains مثل WebStorm استفاده میکنید، Emmet خیلی وقته اونجاست و منتظره شما ازش کار بکشید. فقط کافیه فایل‌تون با پسوند HTML باشه.
حالا سؤال اینجاست، شما هنوز دارید تگ‌ها رو دستی باز و بسته میکنید یا از این ابزار برای سرعت بخشیدن به کارتون استفاده میکنید؟
خلاصه اینکه نذارید تایپ کردنِ ساختارهای تکراری، وقتِ اصلی‌تون رو برای منطقِ برنامه بگیره.
#سامان #تکنولوژی
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
⚙️ ماجرا اینه که Emmet برای فرانت‌کارها مثل یه میان‌بر برای زندگی می‌مونه. مثلاً به جای اینکه نیم ساعت وقت بذاری برای ساختار یه div با چهار تا کلاس و یه ul که داخلش ۱۰ تا li داره، فقط کافیه بنویسی:
div.container>ul>li.item-$*10 و بعد کلید Tab رو بزنی. تموم شد! کل ساختار توی یک ثانیه ساخته میشه.
🔧 نکته‌ی جالب اینجاست که خیلیا فکر می‌کنن باید حتماً یه پلاگین خاص نصب کنن، اما اگه از محصولات JetBrains مثل WebStorm استفاده میکنید، Emmet خیلی وقته اونجاست و منتظره شما ازش کار بکشید. فقط کافیه فایل‌تون با پسوند HTML باشه.
حالا سؤال اینجاست، شما هنوز دارید تگ‌ها رو دستی باز و بسته میکنید یا از این ابزار برای سرعت بخشیدن به کارتون استفاده میکنید؟
خلاصه اینکه نذارید تایپ کردنِ ساختارهای تکراری، وقتِ اصلی‌تون رو برای منطقِ برنامه بگیره.
#سامان #تکنولوژی
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤1
نسل جدید کتابخانه های کدنویسی چطور خودشون رو با عامل های هوش مصنوعی تطبیق میدن؟
⚙️ داستان از اینجا شروع میشه که agent دیگه مثل یه اسکریپت ساده نیست.
یه agent باید بتونه *ابزار پیدا کنه، ورودی درست بسازه، خروجی قابل‌اعتماد بگیره، و وسط کار هم state رو نگه داره*. برای همین نسل جدید پکیج‌ها دارن به سمت چند تا چیز مشخص میرن:
- *Tool calling استاندارد*
- *Structured output*
- *Context management*
- *Memory / state*
- *MCP یا همون Model Context Protocol*
- *Skill / plugin style extensions*
حالا اینجا یه سؤال پیش میاد… چرا اصلاً پکیج‌ها باید خودشون رو با agentها هماهنگ کنن؟
🚨 چون agentها با API کلاسیک فرق دارن.
قبلاً به برنامه می‌گفتی `fetch_users()`، دیتا می‌گرفت و تموم.
الان agent ممکنه بگه:
«اول ابزار مناسب رو پیدا کن، بعد ورودی‌اش رو بساز، بعد اگر خروجی ناقص بود دوباره retry کن، بعد نتیجه رو به یه ابزار دیگه پاس بده…»
در واقع Agent ها عامل های هوشمندی هستند که خودشون انتخاب میکنند از چه ابزاری استفاده کنند.
اینجاست که کتابخانه‌های جدید دارن از APIهای “تابع‌محور” میرن سمت *قابلیت‌محور*. یعنی به‌جای اینکه فقط چند endpoint داشته باشن، سعی می‌کنن برای agentها *خودتوصیف* باشن.
مثلاً یه پکیج خوب برای agent باید بتونه اینا رو خیلی تمیز expose کنه:
- اسم ابزار
- توضیح کوتاه و دقیق
- schema ورودی
- نوع خروجی
- محدودیت‌ها
- مثال استفاده
- خطاهای قابل‌انتظار
🐳 یه مثال واقعی بزنم… فرض کنید یه تیم DevOps دارید که یه agent برای incident response ساخته.
این agent باید از بین چند ابزار انتخاب کنه:
اگر این ابزارها فقط یه wrapper معمولی باشن، agent خیلی زود گیج میشه.
ولی اگر هر ابزار schema مشخص، description دقیق، و خروجی ساختاریافته داشته باشه، agent می‌فهمه کی کدوم رو صدا بزنه و چطور نتیجه رو بخونه.
⚙️ اینجاست که MCP خیلی مهم میشه.
MCP عملاً داره یه زبان مشترک برای اتصال agent به ابزارها و منابع می‌سازه.
یعنی به‌جای اینکه هر شرکت برای خودش یه adapter جدا بنویسه، یه لایه استاندارد میاد وسط که agent بتونه با ابزارهای مختلف یک‌جور حرف بزنه.
خلاصه ماجرا اینه که نسل جدید پکیج‌ها دارن برای agentها این ویژگی‌ها رو جدی می‌گیرن:
- *discoverability*: ابزارها راحت پیدا بشن
- *interoperability*: بین فریم‌ورک‌ها کار کنن
- *typed schemas*: ورودی/خروجی قابل‌اعتماد باشه
- *observability*: بفهمیم agent کجا خراب کرد
- *sandboxing / permission*: ابزارها بی‌حساب‌وکتاب اجرا نشن
🚀 یه تغییر مهم دیگه هم هست…
خیلی از کتابخانه‌ها دیگه فقط “tool” نیستن، دارن به شکل *skill package* یا *agent plugin* دیده میشن.
یعنی یه بسته‌ی کوچک که شامل کد، دستورالعمل، metadata و resource میشه و agent هر وقت لازم داشت loadش می‌کنه.
مثلاً تو یه پروژه واقعی ممکنه یه skill برای این داشته باشید:
- خواندن issue از GitHub
- خلاصه‌سازی ticket
- ساختن changelog
- باز کردن PR template
- اضافه کردن label
اینجا agent لازم نیست همه‌چیز رو از صفر بفهمه… فقط skill مناسب رو load می‌کنه و جلو میره.
⚠️ اما مشکل اینجاست… هرچی agentها خودمختارتر میشن، کتابخانه‌ها هم باید *کنترل‌پذیرتر* بشن.
اگر ابزارها خوب توصیف نشده باشن، agent hallucinate می‌کنه.
اگر خروجی‌ها structure نداشته باشن، chaining خراب میشه.
اگر permissionها شفاف نباشن، یه agent ممکنه یه اکشن خطرناک رو اشتباهی اجرا کنه.
پس پکیج‌های جدید دارن خودشون رو با این چند اصل تنظیم می‌کنن:
1. *Agent-friendly API*
2. *خروجی JSON/typed*
3. *متادیتای غنی برای tool selection*
4. *پشتیبانی از context و memory*
5. *هماهنگی با protocolهایی مثل MCP*
🐳 یه سناریوی خیلی واقعی…
فرض کنید یه تیم محصول دارید که یه agent برای پشتیبانی مشتری ساخته.
agent باید از CRM اطلاعات بگیره، billing رو چک کنه، از knowledge base جواب پیدا کنه، و اگر لازم شد ticket بسازه.
اگر هر کدوم از این سیستم‌ها یه library جدا و ناشناخته داشته باشن، agent عملاً فلج میشه.
ولی وقتی پکیج‌ها خودشون رو با schema، protocol و tool registry هماهنگ می‌کنن، agent تبدیل میشه به یه orchestrator واقعی.
جمع‌بندی؟
نسل جدید کتابخانه‌ها و پکیج‌ها دیگه فقط برای برنامه‌نویس انسان ساخته نمیشن… دارن برای *برنامه‌نویس + agent* با هم طراحی میشن.
یعنی APIها باید هم برای آدم قابل‌فهم باشن، هم برای مدل قابل‌استفاده.
و این دقیقاً همون جاییه که آینده پکیج‌ها داره عوض میشه… از “library” به سمت “agent-ready capability layer”.
⚙️ داستان از اینجا شروع میشه که agent دیگه مثل یه اسکریپت ساده نیست.
یه agent باید بتونه *ابزار پیدا کنه، ورودی درست بسازه، خروجی قابل‌اعتماد بگیره، و وسط کار هم state رو نگه داره*. برای همین نسل جدید پکیج‌ها دارن به سمت چند تا چیز مشخص میرن:
- *Tool calling استاندارد*
- *Structured output*
- *Context management*
- *Memory / state*
- *MCP یا همون Model Context Protocol*
- *Skill / plugin style extensions*
حالا اینجا یه سؤال پیش میاد… چرا اصلاً پکیج‌ها باید خودشون رو با agentها هماهنگ کنن؟
🚨 چون agentها با API کلاسیک فرق دارن.
قبلاً به برنامه می‌گفتی `fetch_users()`، دیتا می‌گرفت و تموم.
الان agent ممکنه بگه:
«اول ابزار مناسب رو پیدا کن، بعد ورودی‌اش رو بساز، بعد اگر خروجی ناقص بود دوباره retry کن، بعد نتیجه رو به یه ابزار دیگه پاس بده…»
در واقع Agent ها عامل های هوشمندی هستند که خودشون انتخاب میکنند از چه ابزاری استفاده کنند.
اینجاست که کتابخانه‌های جدید دارن از APIهای “تابع‌محور” میرن سمت *قابلیت‌محور*. یعنی به‌جای اینکه فقط چند endpoint داشته باشن، سعی می‌کنن برای agentها *خودتوصیف* باشن.
مثلاً یه پکیج خوب برای agent باید بتونه اینا رو خیلی تمیز expose کنه:
- اسم ابزار
- توضیح کوتاه و دقیق
- schema ورودی
- نوع خروجی
- محدودیت‌ها
- مثال استفاده
- خطاهای قابل‌انتظار
🐳 یه مثال واقعی بزنم… فرض کنید یه تیم DevOps دارید که یه agent برای incident response ساخته.
این agent باید از بین چند ابزار انتخاب کنه:
get_pods()`، `read_logs()`، `check_cpu()`، `restart_service() اگر این ابزارها فقط یه wrapper معمولی باشن، agent خیلی زود گیج میشه.
ولی اگر هر ابزار schema مشخص، description دقیق، و خروجی ساختاریافته داشته باشه، agent می‌فهمه کی کدوم رو صدا بزنه و چطور نتیجه رو بخونه.
⚙️ اینجاست که MCP خیلی مهم میشه.
MCP عملاً داره یه زبان مشترک برای اتصال agent به ابزارها و منابع می‌سازه.
یعنی به‌جای اینکه هر شرکت برای خودش یه adapter جدا بنویسه، یه لایه استاندارد میاد وسط که agent بتونه با ابزارهای مختلف یک‌جور حرف بزنه.
خلاصه ماجرا اینه که نسل جدید پکیج‌ها دارن برای agentها این ویژگی‌ها رو جدی می‌گیرن:
- *discoverability*: ابزارها راحت پیدا بشن
- *interoperability*: بین فریم‌ورک‌ها کار کنن
- *typed schemas*: ورودی/خروجی قابل‌اعتماد باشه
- *observability*: بفهمیم agent کجا خراب کرد
- *sandboxing / permission*: ابزارها بی‌حساب‌وکتاب اجرا نشن
🚀 یه تغییر مهم دیگه هم هست…
خیلی از کتابخانه‌ها دیگه فقط “tool” نیستن، دارن به شکل *skill package* یا *agent plugin* دیده میشن.
یعنی یه بسته‌ی کوچک که شامل کد، دستورالعمل، metadata و resource میشه و agent هر وقت لازم داشت loadش می‌کنه.
مثلاً تو یه پروژه واقعی ممکنه یه skill برای این داشته باشید:
- خواندن issue از GitHub
- خلاصه‌سازی ticket
- ساختن changelog
- باز کردن PR template
- اضافه کردن label
اینجا agent لازم نیست همه‌چیز رو از صفر بفهمه… فقط skill مناسب رو load می‌کنه و جلو میره.
⚠️ اما مشکل اینجاست… هرچی agentها خودمختارتر میشن، کتابخانه‌ها هم باید *کنترل‌پذیرتر* بشن.
اگر ابزارها خوب توصیف نشده باشن، agent hallucinate می‌کنه.
اگر خروجی‌ها structure نداشته باشن، chaining خراب میشه.
اگر permissionها شفاف نباشن، یه agent ممکنه یه اکشن خطرناک رو اشتباهی اجرا کنه.
پس پکیج‌های جدید دارن خودشون رو با این چند اصل تنظیم می‌کنن:
1. *Agent-friendly API*
2. *خروجی JSON/typed*
3. *متادیتای غنی برای tool selection*
4. *پشتیبانی از context و memory*
5. *هماهنگی با protocolهایی مثل MCP*
🐳 یه سناریوی خیلی واقعی…
فرض کنید یه تیم محصول دارید که یه agent برای پشتیبانی مشتری ساخته.
agent باید از CRM اطلاعات بگیره، billing رو چک کنه، از knowledge base جواب پیدا کنه، و اگر لازم شد ticket بسازه.
اگر هر کدوم از این سیستم‌ها یه library جدا و ناشناخته داشته باشن، agent عملاً فلج میشه.
ولی وقتی پکیج‌ها خودشون رو با schema، protocol و tool registry هماهنگ می‌کنن، agent تبدیل میشه به یه orchestrator واقعی.
جمع‌بندی؟
نسل جدید کتابخانه‌ها و پکیج‌ها دیگه فقط برای برنامه‌نویس انسان ساخته نمیشن… دارن برای *برنامه‌نویس + agent* با هم طراحی میشن.
یعنی APIها باید هم برای آدم قابل‌فهم باشن، هم برای مدل قابل‌استفاده.
و این دقیقاً همون جاییه که آینده پکیج‌ها داره عوض میشه… از “library” به سمت “agent-ready capability layer”.
❤1
DevSource
نسل جدید کتابخانه های کدنویسی چطور خودشون رو با عامل های هوش مصنوعی تطبیق میدن؟ ⚙️ داستان از اینجا شروع میشه که agent دیگه مثل یه اسکریپت ساده نیست. یه agent باید بتونه *ابزار پیدا کنه، ورودی درست بسازه، خروجی قابل‌اعتماد بگیره، و وسط کار هم state رو نگه…
بزودی در صفحه ی وب اغلب پکیج ها و فریم ورک ها چیزی شبیه باکس روی تصویر رو میبینیم:
Skills for AI coding agents
#سامان #تکنولوژی #AI
Skills for AI coding agents
#سامان #تکنولوژی #AI
❤1
مسئله:
چالش مدیریت بافت در عامل های هوش مصنوعی و مصرف انفجاری توکن
استراتژی:
MikroSkill
کپسوله سازی مهارت و ایجاد چهارچوب تشخیص مهارت های موجود و مرز میان بروزرسانی یک مهارت یا ایجاد مهارت جدید
این فریم ورک میتواند نرخ مصرف توکن را تا ۹۳ درصد کاهش داده و نرخ کامپایل موفق کدها را از ۴۰ به ۸۰ درصد برساند
اطلاعات بیشتر در مقاله ی ذیل:
https://arxiv.org/abs/2606.05720
#سامان #AI
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
چالش مدیریت بافت در عامل های هوش مصنوعی و مصرف انفجاری توکن
استراتژی:
MikroSkill
کپسوله سازی مهارت و ایجاد چهارچوب تشخیص مهارت های موجود و مرز میان بروزرسانی یک مهارت یا ایجاد مهارت جدید
این فریم ورک میتواند نرخ مصرف توکن را تا ۹۳ درصد کاهش داده و نرخ کامپایل موفق کدها را از ۴۰ به ۸۰ درصد برساند
اطلاعات بیشتر در مقاله ی ذیل:
https://arxiv.org/abs/2606.05720
#سامان #AI
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
arXiv.org
Microskill Architecture: A Modular Skill-Driven Framework for...
Large language models and AI coding agents have reshaped software development, but the path to fully AI-native systems faces structural challenges. Chief among them is managing context windows...
اگر به اجرای مدل های LLM در لوکال و کدنویسی با اونها علاقه مندید و مثل من با مشکلات زمینه ی کانتکست٬ توهم مدل٬ نادیده گرفتن قوانین٬ عدم تعامل صحیح در Agent هایی مثل هارنس و ... دست و پنجه نرم میکنید
این مقاله میتونه انتقال تجربه ی خوبی از alexellis ( یک توسعه دهنده ی فعال و متخصص ) باشه
https://blog.alexellis.io/local-ai-is-not-opus
#سامان #AI
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
این مقاله میتونه انتقال تجربه ی خوبی از alexellis ( یک توسعه دهنده ی فعال و متخصص ) باشه
https://blog.alexellis.io/local-ai-is-not-opus
#سامان #AI
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
Alex Ellis' Blog
Local Qwen isn't a worse Opus, it's a different tool
We've all heard people say that Qwen is near-Opus level, but I have receipts and am here to be transparent with you.
❤1
HPC چیست؟
High-Performance Computing
اگه بخوام خیلی ساده بگم، HPC یعنی وقتی یه مسئله اونقدر سنگین و پیچیده هست که یه کامپیوتر معمولی (حتی اگه خیلی قوی باشه) می‌خواد هفته‌ها روش وقت بذاره، ما می‌ریم سراغ دنیای HPC تا اون کار رو در چند ساعت یا حتی دقیقه انجام بدیم.
⚙️ حالا چطوری کار می‌کنه؟
توی سیستم‌های معمولی، ما با یه CPU و یه مقدار رم سر و کله می‌زنیم. اما توی HPC، ما با یه “کلاستر” طرفیم. یعنی صدها یا حتی هزاران سرور رو به هم وصل می‌کنیم تا مثل یه موجود واحد، با هم محاسبات رو انجام بدن.
فرق اصلی توی “موازی‌سازی” (Parallelism) هست. فرض کنید می‌خوای یه کتاب ۱۰۰۰ صفحه‌ای رو ترجمه کنی؛ اگه یه نفر باشه، خیلی طول می‌کشه. اما اگه ۱۰۰ نفر رو بیاری و به هر کدوم ۲۰ صفحه بدی، کار خیلی سریع‌تر تموم میشه. HPC دقیقاً همین کار رو با داده‌ها انجام میده.
🖥️ نقش انویدیا و GPUها کجاست؟
خوب، اینجا داستان جالب میشه… قدیما همه فکر می‌کردن HPC فقط با CPUهای خیلی قدرتمند ساخته میشه. اما با اومدن هوش مصنوعی، بازی عوض شد. GPUها (همون کارت گرافیک‌هایی که برای گیمینگ هم استفاده میشن) چون هزاران هسته کوچک دارن، توی انجام محاسبات ریاضی همزمان، از CPUها خیلی جلوترن. الان دیگه اکثر کلاسترهای بزرگ دنیا، ترکیبی از CPUهای قوی و GPUهای وحشتناک قدرتمند انویدیا هستن تا بتونن مدل‌های عظیم مثل GPT رو آموزش بدن.
خلاصه ماجرا اینه:
HPC یعنی ترکیب سخت‌افزار خفن، شبکه‌های فوق‌سریع و نرم‌افزارهای مدیریت کلاستر، فقط برای اینکه محدودیت‌های محاسباتی رو جابه‌جا کنیم.
#سامان #مفاهیم
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
High-Performance Computing
اگه بخوام خیلی ساده بگم، HPC یعنی وقتی یه مسئله اونقدر سنگین و پیچیده هست که یه کامپیوتر معمولی (حتی اگه خیلی قوی باشه) می‌خواد هفته‌ها روش وقت بذاره، ما می‌ریم سراغ دنیای HPC تا اون کار رو در چند ساعت یا حتی دقیقه انجام بدیم.
⚙️ حالا چطوری کار می‌کنه؟
توی سیستم‌های معمولی، ما با یه CPU و یه مقدار رم سر و کله می‌زنیم. اما توی HPC، ما با یه “کلاستر” طرفیم. یعنی صدها یا حتی هزاران سرور رو به هم وصل می‌کنیم تا مثل یه موجود واحد، با هم محاسبات رو انجام بدن.
فرق اصلی توی “موازی‌سازی” (Parallelism) هست. فرض کنید می‌خوای یه کتاب ۱۰۰۰ صفحه‌ای رو ترجمه کنی؛ اگه یه نفر باشه، خیلی طول می‌کشه. اما اگه ۱۰۰ نفر رو بیاری و به هر کدوم ۲۰ صفحه بدی، کار خیلی سریع‌تر تموم میشه. HPC دقیقاً همین کار رو با داده‌ها انجام میده.
🖥️ نقش انویدیا و GPUها کجاست؟
خوب، اینجا داستان جالب میشه… قدیما همه فکر می‌کردن HPC فقط با CPUهای خیلی قدرتمند ساخته میشه. اما با اومدن هوش مصنوعی، بازی عوض شد. GPUها (همون کارت گرافیک‌هایی که برای گیمینگ هم استفاده میشن) چون هزاران هسته کوچک دارن، توی انجام محاسبات ریاضی همزمان، از CPUها خیلی جلوترن. الان دیگه اکثر کلاسترهای بزرگ دنیا، ترکیبی از CPUهای قوی و GPUهای وحشتناک قدرتمند انویدیا هستن تا بتونن مدل‌های عظیم مثل GPT رو آموزش بدن.
خلاصه ماجرا اینه:
HPC یعنی ترکیب سخت‌افزار خفن، شبکه‌های فوق‌سریع و نرم‌افزارهای مدیریت کلاستر، فقط برای اینکه محدودیت‌های محاسباتی رو جابه‌جا کنیم.
#سامان #مفاهیم
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir