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
DevSource
Photo
میدونستید یک هنری داریم به اسم ASCII Art ؟
🎨 یه بار که داشتیم روی یه پروژهی محیط ترمینال (CLI) کار میکردیم، میخواستم یه ظاهر باحالتر بهش بدم که وقتی کاربر برنامه رو باز میکنه، یه خوشآمدگویی شیک ببینه… راستش اونجا بود که با دنیای جذاب ASCII Art روبرو شدم.
🖼️ اگه تا حالا توی ترمینال یا لاگهای سیستم، دیدید که با استفاده از کاراکترهای ساده مثل / \ | _ یه شکل یا یه کلمه بزرگ ساخته شده، همون ASCII Art هست.
🤔 حالا شاید بپرسید این کاراکترهای بیروح چیکار میکنن؟ اصلاً چرا وسط این همه گرافیک و تصویر باکیفیت، هنوز سراغ این چیزها میریم؟
خوب، داستان اینه که توی دنیای زیرساخت و ابزارهای مهندسی، ما همیشه با محیطهای بدون گرافیک (Headless) سر و کار داریم. مثلاً وقتی دارید با SSH به یه سرور وصل میشید یا دارید لاگهای یه کانتینر رو توی داکر میبینید، شما هیچ مانیتور یا محیط گرافیکی ندارید. اینجاست که ASCII Art میتونه:
۱. هویت ببخشه: یه لوگوی باحال از پروژهتون توی شروع برنامه، حس خیلی بهتری به کاربر میده.
۲. خوانایی رو بالا ببره: میتونید با استفاده از این هنر، بخشهای مختلف خروجی یا جداول رو از هم متمایز کنید.
۳. شخصیسازی: محیط خشک و بیروح ترمینال رو برای خودتون یا تیمتون خاص کنید.
🛠️ حالا چطوری این کار رو انجام میدیم؟
اصلاً لازم نیست بشینید ساعتها با کیبورد کاراکتر بچینید! کلی ابزار و کتابخانه هست که این کار رو براتون انجام میده.
مثلاً اگه بخواید توی پایتون یه متن رو سریع به استایل ASCII تبدیل کنید، کتابخانهی pyfiglet معجزه میکنه. فقط یه خط کد مینویسید و تمام! یا اگه دنبال ابزارهای آنلاین هستید، سایتهایی مثل asciiart.eu کلی مدل مختلف رو دم دستتون گذاشتن.
خلاصه اینکه، ASCII Art یه راه ساده و خیلی باحال برای اضافه کردن شخصیت به کدهایی هست که توی محیطهای متنی اجرا میشن.
#سامان #مفاهیم
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
🎨 یه بار که داشتیم روی یه پروژهی محیط ترمینال (CLI) کار میکردیم، میخواستم یه ظاهر باحالتر بهش بدم که وقتی کاربر برنامه رو باز میکنه، یه خوشآمدگویی شیک ببینه… راستش اونجا بود که با دنیای جذاب ASCII Art روبرو شدم.
🖼️ اگه تا حالا توی ترمینال یا لاگهای سیستم، دیدید که با استفاده از کاراکترهای ساده مثل / \ | _ یه شکل یا یه کلمه بزرگ ساخته شده، همون ASCII Art هست.
🤔 حالا شاید بپرسید این کاراکترهای بیروح چیکار میکنن؟ اصلاً چرا وسط این همه گرافیک و تصویر باکیفیت، هنوز سراغ این چیزها میریم؟
خوب، داستان اینه که توی دنیای زیرساخت و ابزارهای مهندسی، ما همیشه با محیطهای بدون گرافیک (Headless) سر و کار داریم. مثلاً وقتی دارید با SSH به یه سرور وصل میشید یا دارید لاگهای یه کانتینر رو توی داکر میبینید، شما هیچ مانیتور یا محیط گرافیکی ندارید. اینجاست که ASCII Art میتونه:
۱. هویت ببخشه: یه لوگوی باحال از پروژهتون توی شروع برنامه، حس خیلی بهتری به کاربر میده.
۲. خوانایی رو بالا ببره: میتونید با استفاده از این هنر، بخشهای مختلف خروجی یا جداول رو از هم متمایز کنید.
۳. شخصیسازی: محیط خشک و بیروح ترمینال رو برای خودتون یا تیمتون خاص کنید.
🛠️ حالا چطوری این کار رو انجام میدیم؟
اصلاً لازم نیست بشینید ساعتها با کیبورد کاراکتر بچینید! کلی ابزار و کتابخانه هست که این کار رو براتون انجام میده.
مثلاً اگه بخواید توی پایتون یه متن رو سریع به استایل ASCII تبدیل کنید، کتابخانهی pyfiglet معجزه میکنه. فقط یه خط کد مینویسید و تمام! یا اگه دنبال ابزارهای آنلاین هستید، سایتهایی مثل asciiart.eu کلی مدل مختلف رو دم دستتون گذاشتن.
خلاصه اینکه، ASCII Art یه راه ساده و خیلی باحال برای اضافه کردن شخصیت به کدهایی هست که توی محیطهای متنی اجرا میشن.
#سامان #مفاهیم
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
اگر برای مصاحبه Node.js آماده میشید، این لیست سوالات رو از دست ندید.
بیش از ۱۰۰ سوال Node.js از مباحث پایه تا موضوعات مهمی مثل Event Loop، Async/Await، Streams، Error Handling، Worker Threads و Performance داخل این مجموعه جمعآوری شده.
البته انتظار نداشته باشید با خوندن این لیست برای مصاحبه Senior آماده بشید، اما برای مرور مفاهیم، پیدا کردن نقاط ضعف و آمادگی قبل از مصاحبه یکی از منابع خوبیه که میتونه کمکتون کنه.
لینک: http://gist.github.com/paulfranco/9f88a2879b7b7d88de5d1921aef2093b
#نود_جی_اس #NodeJS #مصاحبه_فنی #بک_اند #جاوااسکریپت #علی
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
بیش از ۱۰۰ سوال Node.js از مباحث پایه تا موضوعات مهمی مثل Event Loop، Async/Await، Streams، Error Handling، Worker Threads و Performance داخل این مجموعه جمعآوری شده.
البته انتظار نداشته باشید با خوندن این لیست برای مصاحبه Senior آماده بشید، اما برای مرور مفاهیم، پیدا کردن نقاط ضعف و آمادگی قبل از مصاحبه یکی از منابع خوبیه که میتونه کمکتون کنه.
لینک: http://gist.github.com/paulfranco/9f88a2879b7b7d88de5d1921aef2093b
#نود_جی_اس #NodeJS #مصاحبه_فنی #بک_اند #جاوااسکریپت #علی
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
Gist
NodeJS Interview Questions.md
GitHub Gist: instantly share code, notes, and snippets.
❤2
🚀 بازم سلام!
میخوام در مورد یه چیزی صحبت کنم که شاید اسمش رو کمتر شنیده باشین ولی اگه با دنیای برنامهنویسی وب سروکار داشته باشین، خیلی به دردتون میخوره: *Asynchronous Local Storage (ASL)*.
قبل از اینکه بریم سراغ ASL، بذارین یه خاطره تعریف کنم…
🐳 یه وقتایی نیازه یه سری اطلاعات رو سمت کاربر (روی مرورگرش) ذخیره کنیم. اولش ممکنه بریم سراغ همون روشهای قدیمی، مثلاً
یعنی چی؟ یعنی وقتی میخوایم یه اطلاعاتی رو ذخیره کنیم یا بخونیم، کل نخ اصلی (main thread) مرورگر رو قفل میکنه تا این عملیات تموم بشه. فکر کنین کاربر داره یه کاری انجام میده، یه دکمه رو میزنه که یه اطلاعاتی رو ذخیره کنه، و ناگهان صفحه یهلحظه هنگ میکنه! اصلاً تجربه خوبی نیست، مخصوصاً اگه حجم اطلاعات زیاد باشه یا سرعت دیسک کاربر پایین باشه.
اینجا دقیقاً مشکل کجاست؟ 🤔
این قضیه بلوکه کردن نخ اصلی، باعث میشه رابط کاربری (UI) کند بشه و کاربر حس کنه برنامه کند و بیجواب شده. مخصوصاً توی اپلیکیشنهای تکصفحهای (SPA) که همه چی باید روان و سریع اتفاق بیفته، این موضوع واقعاً آزاردهندهست.
حالا چیکار کنیم؟ راه حل چیه؟
اینجاست که *Asynchronous Local Storage (ASL)* وارد میشه! 😎
ASL یه راهکار مدرنتر برای ذخیرهسازی اطلاعات سمت کاربره که از APIهای ناهمزمان (asynchronous) استفاده میکنه. یعنی چی؟ یعنی وقتی شما یه دستوری برای ذخیره یا خوندن اطلاعات میدین، ASL این کار رو در پسزمینه انجام میده و جلوی نخ اصلی رو نمیگیره. وقتی عملیات تموم شد، از طریق Promise یا Callback به شما خبر میده.
این دقیقا شبیه اینه که یه دستیار داری که کارهای وقتگیر رو انجام میده و شما همزمان میتونی به کارهای دیگه برسی.
یه مثال واقعی بزنم:
فرض کنید یه اپلیکیشن مدیریت وظایف (To-Do List) دارین که لیست کارها رو توی مرورگر ذخیره میکنه. اگه از
ASL معمولاً بر پایه IndexedDB کار میکنه که یه پایگاه داده NoSQL قدرتمند درون مرورگره. این یعنی شما میتونین حجم زیادی از دادههای ساختاریافته رو هم ذخیره کنین.
خلاصه ماجرا اینه که اگه دنبال یه راه مطمئن، سریع و بدون ایجاد اختلال برای ذخیرهسازی اطلاعات سمت کاربر هستین، ASL گزینه خیلی خوبیه. مخصوصاً برای اپلیکیشنهای پیچیدهتر و سنگینتر، این تفاوت رو حس خواهید کرد.
#سامان #مفاهیم
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
میخوام در مورد یه چیزی صحبت کنم که شاید اسمش رو کمتر شنیده باشین ولی اگه با دنیای برنامهنویسی وب سروکار داشته باشین، خیلی به دردتون میخوره: *Asynchronous Local Storage (ASL)*.
قبل از اینکه بریم سراغ ASL، بذارین یه خاطره تعریف کنم…
🐳 یه وقتایی نیازه یه سری اطلاعات رو سمت کاربر (روی مرورگرش) ذخیره کنیم. اولش ممکنه بریم سراغ همون روشهای قدیمی، مثلاً
localStorage جاوااسکریپت. در این روش همه چی خوبه تا اینکه متوجه میشیم این localStorage یه مشکل اساسی داره: *همزمان (synchronous) کار میکنه.*یعنی چی؟ یعنی وقتی میخوایم یه اطلاعاتی رو ذخیره کنیم یا بخونیم، کل نخ اصلی (main thread) مرورگر رو قفل میکنه تا این عملیات تموم بشه. فکر کنین کاربر داره یه کاری انجام میده، یه دکمه رو میزنه که یه اطلاعاتی رو ذخیره کنه، و ناگهان صفحه یهلحظه هنگ میکنه! اصلاً تجربه خوبی نیست، مخصوصاً اگه حجم اطلاعات زیاد باشه یا سرعت دیسک کاربر پایین باشه.
اینجا دقیقاً مشکل کجاست؟ 🤔
این قضیه بلوکه کردن نخ اصلی، باعث میشه رابط کاربری (UI) کند بشه و کاربر حس کنه برنامه کند و بیجواب شده. مخصوصاً توی اپلیکیشنهای تکصفحهای (SPA) که همه چی باید روان و سریع اتفاق بیفته، این موضوع واقعاً آزاردهندهست.
حالا چیکار کنیم؟ راه حل چیه؟
اینجاست که *Asynchronous Local Storage (ASL)* وارد میشه! 😎
ASL یه راهکار مدرنتر برای ذخیرهسازی اطلاعات سمت کاربره که از APIهای ناهمزمان (asynchronous) استفاده میکنه. یعنی چی؟ یعنی وقتی شما یه دستوری برای ذخیره یا خوندن اطلاعات میدین، ASL این کار رو در پسزمینه انجام میده و جلوی نخ اصلی رو نمیگیره. وقتی عملیات تموم شد، از طریق Promise یا Callback به شما خبر میده.
این دقیقا شبیه اینه که یه دستیار داری که کارهای وقتگیر رو انجام میده و شما همزمان میتونی به کارهای دیگه برسی.
یه مثال واقعی بزنم:
فرض کنید یه اپلیکیشن مدیریت وظایف (To-Do List) دارین که لیست کارها رو توی مرورگر ذخیره میکنه. اگه از
localStorage استفاده کنین، وقتی کاربر یه کار جدید اضافه میکنه و لیست طولانی میشه، ممکنه یه لحظه صفحه قفل کنه. اما با ASL، این عملیات ذخیرهسازی بدون اینکه کاربر متوجه بشه انجام میشه و برنامه همچنان روان باقی میمونه.ASL معمولاً بر پایه IndexedDB کار میکنه که یه پایگاه داده NoSQL قدرتمند درون مرورگره. این یعنی شما میتونین حجم زیادی از دادههای ساختاریافته رو هم ذخیره کنین.
خلاصه ماجرا اینه که اگه دنبال یه راه مطمئن، سریع و بدون ایجاد اختلال برای ذخیرهسازی اطلاعات سمت کاربر هستین، ASL گزینه خیلی خوبیه. مخصوصاً برای اپلیکیشنهای پیچیدهتر و سنگینتر، این تفاوت رو حس خواهید کرد.
#سامان #مفاهیم
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤3
مخاطبین محترم کانال و گروه DevSource
میت آنلاین بذارم باهاتون؟
در مورد چه موضوعاتی دوست دارید صحبت کنیم و انتقال دانش داشته باشیم؟
یک میت دو ساعته
حتما توی کامنت ها نظرتونو بگید🚀
میت آنلاین بذارم باهاتون؟
در مورد چه موضوعاتی دوست دارید صحبت کنیم و انتقال دانش داشته باشیم؟
یک میت دو ساعته
حتما توی کامنت ها نظرتونو بگید🚀
❤6