با چند کلمه، یک پرامپت حرفه‌ای بساز 🧩

اگه برای نوشتن پرامپت‌های خوب همیشه مجبورید چندین دستور رو پشت سر هم بنویسید، این ابزار می‌تونه کارتون رو خیلی ساده‌تر کنه.

این ابزار یک Prompt Builder هست که عبارت‌های کوتاه و ساده شما رو به پرامپت‌های مفصل و دقیق تبدیل می‌کنه.

مثلاً به‌جای اینکه بنویسید:

یه کامپوننت لاگین با Next.js بساز، ریسپانسیو باشه، ولیدیشن داشته باشه، TypeScript باشه و کد تمیز بنویس.

میتونید این متن رو به این ابزار بدید و خروجی زیر رو تحویل بگیرید 👇

یک کامپوننت Login برای Next.js بنویس که:

1. نیازمندی‌های فنی:
- با TypeScript نوشته شود
- کاملاً ریسپانسیو باشد (موبایل، تبلت، دسکتاپ)
- حتما validation سمت کلاینت برای ایمیل و پسورد داشته باشد
- پیام‌های خطا و موفقیت نشان دهد

2. ویژگی‌های UX:
- فیلد ایمیل و پسورد
- دکمه ورود
- "رمز عبور را فراموش کردم" لینک
- "ثبت‌نام" لینک
- حالت loading حین ارسال

3. استانداردهای کد:
- کد تمیز و خوانا با naming واضح
- کامپوننت کوچک و قابل استفاده
- استفاده از React hooks
- استایل‌دهی با Tailwind CSS
- توضیحات برای بخش‌های پیچیده

4. خروجی:
- کد کامل و آماده برای استفاده
ا - include کنید types/interfaces


🔗 site

#ai
@CodeModule

‏WebPageTest، نجات‌دهنده پرفورمنس 🎮

مطمئنا همه ما با داده های Lighthouse یا PageSpeed سر و کله زدیم و گاها پیش اومده که دقیق، نتونستیم عیب رو شناسایی کنیم.

اینجاست که سایت WebPageTest می‌تونه خیلی مفید باشه. با استفاده از این ابزار می‌تونیم جزئیات بیشتری از فرایند لود شدن صفحه ببینیم، از جمله:

🔹 LCP, CLS, ... و Core Web Vitals

🔹 TTFB و زمان پاسخ سرور

🔹 Waterfall درخواست‌های شبکه

🔹 زمان لود شدن استایل‌ها، جاوااسکریپت‌ها، فونت‌ها، تصاویر و سایر چانک ها

🔹 تعداد و حجم ریکوست‌ها

🔹 رفتار Cache

🔹 عملکرد سایت در شرایط مختلف اینترنت و دیوایس

اما چیزی که این ابزار رو خیلی جذاب میکنه Waterfall هست. به‌جای اینکه فقط بگیم LCP بالاست، می‌تونیم مرحله‌به‌مرحله بررسی کنیم که:

آیا رسپانس سرور کند بوده؟
آیا Resource مهمی دیر کال شده؟
آیا Css یا JavaScript جلوی رندرینگ رو گرفته؟
آیا تصویر LCP دیر دانلود شده؟
آیا فونت باعث تأخیر در رندر شده؟

🔗 Site

#SEO #performance
@CodeModule