خب دیگه نوبتی هم باشه نوبت این پروژه خفنه

به جز فایل فیگما برای Sketch و Adobe XD هم فایلهاش هست

#figma #uikit #ui

Channel: @JSKernel

🗂فایلهای پروژه

کدها رو تمیز نوشتم تا هر بخش پروژه براتون قابل فهم باشه

بعد از پروژه طراحی قالب فروشگاهی تمرین خوبیه براتون

#project #shopping

Channel: @JSKernel

یه نکته درباره این پروژه بگم که از یه سری کتاب خونه های js هم توش استفاده شده که چیز خواصی نیس

اگه هر جاشو متوجه نشدین سوال کنین جواب میدم

🟡 راز کدنویسی تمیز: چطور کدی بنویسیم که خوانا، حرفه‌ای و قابل نگهداری باشه؟


🟢 اصول کدنویسی تمیز (Clean Code)

کدنویسی تمیز یعنی نوشتن کدی که هم برای کامپیوتر و هم برای انسان‌ها قابل فهم و نگهداری باشه. وقتی کد تمیز باشه، پیدا کردن مشکلات راحت‌تر میشه و کد راحت‌تر گسترش پیدا می‌کنه. اینطوری هم پروژه پایدارتر میشه و هم کد کمتر دچار اشتباه میشه.


🟢 انتخاب نام‌های مناسب

برای متغیرها، توابع و کلاس‌ها باید از اسم‌های واضح و معنی‌دار استفاده کنی. وقتی اسم‌ها درست انتخاب بشن، کد قابل فهم‌تر میشه و کسانی که کد رو می‌خونن راحت‌تر می‌فهمن که هر قسمت از کد چه کاری انجام می‌ده.


🟢 توابع کوتاه و خوانا

توابع نباید طولانی و پیچیده باشن. هر تابع باید یه کار مشخص رو انجام بده. وقتی توابع کوتاه و ساده باشن، فهمیدن اینکه چه کار می‌کنن راحت‌تر میشه و همچنین راحت‌تر می‌تونی اونها رو تست کنی و تغییر بدی.


🟢 قواعد فرمت‌بندی

فرمت‌بندی کد، مثل استفاده درست از فاصله‌ها و تورفتگی‌ها، باعث میشه کد خواناتر و منظم‌تر باشه. این کار کمک می‌کنه که کد خیلی راحت‌تر قابل درک باشه و وقتی همه از یه فرمت ثابت استفاده کنن، کد یکدست‌تر میشه.


🟢 نکات درباره کامنت‌ها

کامنت‌ها باید زمانی استفاده بشن که کد پیچیده باشه و نیاز به توضیح داشته باشه. استفاده زیاد از کامنت‌های بی‌خود باعث میشه کد شلوغ بشه و خوندنش سخت بشه. پس کامنت بذار ولی فقط وقتی واقعا لازمه.


🟢 استفاده از DRY، KISS و YAGNI

این اصول کمک می‌کنن که کد رو ساده، بدون تکرار و بدون ویژگی‌های اضافی بنویسی. DRY یعنی "کد رو تکرار نکن"، KISS یعنی "کد رو ساده نگه دار" و YAGNI یعنی "فقط اون چیزی رو پیاده‌سازی کن که الان نیاز داری (آینده نگری نکن)".


🟢 بازسازی (Refactoring)

یعنی بازنویسی کد بدون اینکه عملکردش تغییر کنه، فقط برای اینکه ساختار و خوانایی کد بهتر بشه. اینکار کمک می‌کنه کد پیچیده و شلوغ رو به کدی ساده‌تر و قابل نگهداری‌تر تبدیل کنی.


🟢 منابع و ابزارهای مفید

برای نوشتن کد تمیز، می‌تونی از ابزارهایی مثل ESLint برای چک کردن اشتباهات کد استفاده کنی. این ابزار به‌خصوص برای جاوااسکریپت خیلی مفیده و بهت کمک می‌کنه که کد خودتو مطابق با استانداردها بنویسی. همچنین دوره‌ها و ویدیوهای زیادی هم هست که می‌تونی ازشون برای یادگیری بیشتر استفاده کنی، مثلا دوره‌ای که برگذار کردیم و داخل چنل قرار دادیم.

#cleancode #refactoring

Channel: @JSKernel

#freedom 🌑💫

‌‌‌‏اخر سر کدومو استفاده کنیم: " VS Code یا WebStorm ؟


1. سرعت و عملکرد:

‏Webstorm: یه IDE کامله و کلی امکانات داره، ولی خب چون سنگین‌تره، ممکنه برای پروژه‌های خیلی بزرگ یه کوچولو کند باشه (سیستم وقتی تری نیاز داری).
‏VS Code: سبک‌تره و سرعتش معمولاً بیشتره، واسه هر پروژه‌ای از کوچیک تا بزرگ راحت جواب میده.

2. افزونه‌ها:

‏WebStorm: اکثر قابلیت‌های مورد نیاز رو خودش از قبل داره و نیازی نیست کلی افزونه نصب کنی.
‏VS Code: باید با نصب افزونه‌ها بهش قابلیت اضافه کنی، ولی دستت واسه انتخاب بازتره.

3. امکانات هوشمند:

‏WebStorm: کلی قابلیت خفن مثل تکمیل خودکار هوشمند، پیشنهاد رفع خطاها و تغییرات سریع تو کدها رو داره.
‏VS Code: اینا رو نداره، ولی می‌تونی با افزونه‌هایی مثل Prettier یا ESLint یه چیزی شبیه بهش بسازی.

4. پشتیبانی از تکنولوژی‌ها:

‏WebStorm: از اول برای جاوااسکریپت و فریمورک‌هایی مثل React، Angular و Vue طراحی شده، واسه همین خیلی خوب پشتیبانی می‌کنه.
‏VS Code: به کمک افزونه‌ها می‌تونی تقریباً از هر زبون یا فریمورکی استفاده کنی.

5. ظاهر و رابط کاربری:

‏WebStorm: طراحیش حرفه‌ایه و مناسب کساییه که دنبال ابزار جدی‌ترن.
‏‌‏VS Code: ظاهر ساده‌تری داره و می‌تونی راحت‌تر سفارشی‌ش کنی.

6. دیباگر:

‏WebStorm: دیباگر داخلی خیلی قوی داره که با Node.js و جاوااسکریپت هم عالی کار می‌کنه.
‏VS Code: باید افزونه نصب کنی تا دیباگرش قوی بشه.

7. جامعه کاربری و منابع:

‏WebStorm: مستندات رسمی و پشتیبانی JetBrains رو داره.
‏VS Code: جامعه‌ش خیلی بزرگ‌تره و آموزش و منابع رایگان براش فراوونه.

جمع‌بندی
اگه دنبال ابزار کامل و حرفه‌ای می‌گردی، WebStorm یه انتخاب خوبه. ولی اگه دنبال یه ابزار سبک، رایگان و قابل تنظیم هستی، VS Code عالیه. تصمیم آخر با خودته!

#webstorm #vscode
article

Channel: @JSKernel

‏try-catch در جاوا اسکریپت: نجات کدها از خطاهای پیش‌بینی نشده؟


توی جاوااسکریپت، try-catch برای مدیریت خطاها استفاده می‌شه. داخل بلوک try کدی که ممکنه خطا بده رو میذارید، و اگه خطایی پیش اومد، بلوک catch اون رو می‌گیره و مدیریت می‌کنه.

ساختار:

try {
    // کدی که ممکنه خطا بده
} catch (error) {
    // کدی که خطا رو مدیریت می‌کنه
} finally {
    // کدی که همیشه اجرا میشه
}

1: بلوک try: کدی که ممکنه خطا ایجاد کنه.
2: بلوک catch: زمانی اجرا میشه که خطا در try رخ بده.
3:بلوک finally: همیشه اجرا میشه، چه خطا باشه یا نباشه.

نکته مهم:

فقط خطاهای زمان Run رو می‌گیره.
برای کدهای ناهمزمان باید از async/await همراه با try-catch استفاده کنید.

async function example() {
    try {
        // کدی که ممکنه خطا بده
    } catch (error) {
        // کدی که خطا رو مدیریت می‌کنه
    }
}

#javanoscript #errorhandling

Channel: @JSKernel

#Vibe
Start a different life.

این طرح ساده و کاربردی رو برای تمرین از دست ندین

🔗 لینک

#figma
Channel: @JSKernel

you are special.

‏🌟 ES6: انقلاب و جهشی بزرگ توی جاوااسکریپت!؟ 🌟


استاندارد ES6 یکی از بزرگ‌ترین تغییراتی بود که توی جاوااسکریپت اتفاق افتاد. ولی چرا یاد گرفتن اون واسه هر برنامه‌نویسی لازمه؟ 🤔

1️⃣ کدهای خوانا و کوتاه‌تر
با امکاناتی مثل Arrow Functions، Template Literals، و Default Parameters، کدات راحت‌تر نوشته می‌شن و دیگه لازم نیست با کدهای شلوغ و سخت سروکله بزنی.
نمونه:

// قبل از ES6
function sayHello(name) {
  return "Hello " + name + "!";
}

// بعد از ES6
const sayHello = (name) => `Hello ${name}!`;

2️⃣ مدیریت بهتر متغیرها
استفاده از let و const به جای var خیلی از مشکلات مثل Hoisting رو حل کرده و کداتو تمیزتر می‌کنه.

3️⃣ شی‌گرایی راحت‌تر
اضافه شدن کلاس‌ها (class) و ارث‌بری (extends) باعث شده کار با شی‌گرایی خیلی ساده‌تر و منطقی‌تر بشه.

4️⃣ کار راحت‌تر با آرایه‌ها و آبجکت‌ها
ویژگی‌های جدید مثل Destructuring و Spread Operator کار با داده‌ها رو خیلی آسون‌تر کرده.
مثال:

const user = { name: "Ali", age: 24 };
const { name, age } = user; // استخراج مقادیر از آبجکت

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5]; // ترکیب آرایه‌ها

5️⃣ مدیریت راحت‌تر کدهای غیرهم‌زمان
با معرفی async/await، دیگه لازم نیست با then و callback کلنجار بری؛ همه چیز ساده و شیک شده.

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

#ES6 #جاوااسکریپت #JS #برنامه_نویسی

Channel: @JSKernel

‏‼️ 5 شایعه اشتباه درباره فرانت‌اند که وقتشه فراموش کنیم ‼️


‏1️⃣ CSS آسونه: خیلی‌ها فکر می‌کنن CSS ساده‌ست، ولی وقتی بخوای یه دیو رو دقیقاً وسط صفحه بذاری یا با z-index ور بری، می‌فهمی چقدر اعصاب‌خورد کنه!

2️⃣ فریمورک‌ها همه چیو درست میکنن: React ،Angular و Vue عالین، ولی گاهی استفاده از اینا واسه پروژه‌های کوچیک، مثل اینه که با تانک بری شکار مورچه!

3️⃣ بک‌اند از فرانت‌اند سخت‌تره: خیلی‌ها میگن کارای بک‌اند پیچیده‌تره، ولی آیا اونا تا حالا با مشکلات مدیریت حالت، بهینه‌سازی DOM یا دسترس‌پذیری سر و کله زدن؟ بعید می‌دونم!

4️⃣ دسترسی پذیری مهم نیست: بعضی‌ها وقتی وقت کمه، دسترس‌پذیری رو نادیده می‌گیرن، ولی این یه چیز ضروریه که هم قانونی باید رعایت بشه، هم تجربه کاربرها رو بهتر می‌کنه. (توی خیلی از کشور ها مثل اتحادیه اروپا و آمریکا اجباریه)

دسترس‌پذیری یا Accessibility یعنی طوری طراحی و توسعه بدیم که همه افراد، با هر نوع توانایی جسمی یا ذهنی، بتونن از وبسایت یا اپلیکیشن استفاده کنن.

مثال:
کیبوردی کردن همه المنت‌ها یا سازگاری با screen reader وقتی که کاربر نمیتونه عکسی رو ببینه یا متنی رو بخونه.

5️⃣ فرانت‌اند قراره خودکار بشه: با اینکه AI می‌تونه بعضی کارای تکراری رو انجام بده، ولی خلاقیت و درک انسانی رو نداره. پس نگران نباش، کارمون قراره بمونه!

در آخر هم این شایعه‌ها رو کنار بزار و به ارزش واقعی فرانت‌اند فکر کن.

#Frontend #JS #فرانت_اند
Article

Channel: @JSKernel

‏Kestra یه ابزار متن‌بازه که برای مدیریت کارای پیچیده طراحی شده. باهاش می‌تونید کلی کار رو خودکار کنید و کار با داده‌ها رو راحت‌تر پیش ببرید.

ویژگی‌ها:

طراحی وظایف به‌صورت ماژولار: می‌تونید وظایف رو به بخش‌های کوچیک‌تر تقسیم کنید تا راحت‌تر مدیریت بشن.

پیکربندی فایل با فرمت YAML: تنظیمات و فرآیندهاش با فایل‌های YAML انجام می‌شه که هم ساده‌ست، هم مرتب.

واکنش سریع به رویدادها: می‌تونه سریع به هر اتفاقی که می‌افته واکنش بده.

استفاده از Kestra علاوه بر اتوماسیون کردن فرایند، یه ابزار نظارتی هم داره که میشه باهاش عملکرد کارا رو لحظه‌ای چک کرد و مشکلات رو راحت‌تر پیدا کرد.

برای شروع:
Github: Kestra
Slack: Kestra
#tools #kestra

Channel: @JSKernel

you are special.⚡️
#Vibe

‏🔥 Shadcn/ui: یه انقلاب تو طراحی وب!


فریمورک Shadcn/ui یه روش جدید و فوق‌العاده انعطاف‌پذیر واسه طراحی رابط کاربری داره که همه مشکلات کتابخونه‌های قدیمی مثل Material UI و Bootstrap رو حل می‌کنه.

✨ چرا Shadcn/ui محشره؟

بدون سنگین شدن پروژه: دیگه لازم نیست هزار تا خط CSS فقط واسه یه دکمه ساده اضافه کنی!

کنترل کامل: می‌تونی راحت کد کامپوننتارو ببینی و هر جوری که دوست داری تغییرشون بدی.

انعطاف بی‌حد و مرز: از استایل دادن با Tailwind گرفته تا سفارشی‌سازی خفن، همه چی دست خودته.

ابزار CLI: اضافه کردن کامپوننتا از همیشه راحت‌تر شده!

⚙️ چیزایی که Shadcn/ui داره:

• بلوک‌های جذاب مثل چارت‌ها و بخشای داشبورد.
• پشتیبانی خفن از تم‌ها با یه حالت تاریک که خیلی شیکه.
• عالی واسه طراحی رابط‌های حرفه‌ای و خاص.

‏Shadcn/ui کمک می‌کنه که وب‌اپلیکیشن‌های شیک و مدرن رو سریع‌تر و راحت‌تر بسازیم. اگه هنوز از کتابخونه‌های قدیمی استفاده می‌کنی، وقتشه تغییر کنی!

#ShadcnUI #توسعه_وب #UI #فریمورک

Channel: @JSKernel

Coding is fun!?
#vibe

17 ابزار برتر هوش مصنوعی برای برنامه‌نویس‌ها 🚀💻

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

‏1. GitHub Copilot 🤖✨: پیشنهادات هوشمند کد در IDEها، مناسب برای زبان‌های مختلف.
‏2. Tabnine 🔒🛠: تکمیل کد با تمرکز بر حفظ حریم خصوصی.
‏3. Cursor AI 🔄⚡️: اصلاح خطاها و خودکارسازی وظایف تکراری.
‏4. Sourcegraph Cody 🗂📊: ایده‌آل برای پروژه‌های بزرگ و تیمی.
‏5. Replit ☁️🤝: محیط کدنویسی ابری با ابزار هوش مصنوعی.
‏6. Codiga 🛡🐛: تحلیل استاتیک برای کدهای تمیز و ایمن.
‏7. Sourcery 🐍🔧: بازسازی خودکار کدهای پایتون.
‏8. DeepCode AI (Snyk) 🕵️‍♂️🔐: کشف آسیب‌پذیری‌های امنیتی در کد.
‏9. Hugging Face 🧸💡: مدل‌های پیش‌ساخته برای تولید کد.
‏10. Amazon SageMaker 📊🧠: ابزارهایی برای ساخت و استقرار مدل‌های یادگیری ماشین.
‏11. Amazon Q Developer ☁️🛠: دستیار مدیریت خدمات AWS.
‏12. CodiumAI 🧪✔️: تولید تست‌های واحد با هوش مصنوعی.
‏13. MutableAI 📋🛠: بهینه‌سازی کد و مستندسازی خودکار.
‏14. AskCodi ❓📜: پیشنهاد کد با پرسش زبان طبیعی.
‏15. Microsoft IntelliCode 🖥⚡️: پیشنهادات هوشمند در Visual Studio و VS Code.
‏16. CodeGeeX 💻🌐: تولید کد چندزبانه مبتنی بر ابر.
‏17. OpenAI Codex ✍️🤖: تولید کد از متن طبیعی، پایه GitHub Copilot.

با این ابزارها هم وقتت ذخیره میشه، هم کدنویسیت میره رو هوا!

#tools #ai #هوش_مصنوعی #coding

Channel: @JSKernel

"مسیر مبتدی: یادگیری React و Next.js با پروژه‌های کاربردی"

هدف‌ها: مسلط شدن به اصول اولیه React و Next.js. ساخت پروژه‌های کوچیک.

مبانی React:
• ‏JSX، کامپوننت‌ها، Props، State و رویدادها.
• کامپوننت‌های تابعی و Hooks (useState، useEffect).
• رندرینگ شرطی و لیست‌ها.

مبانی Next.js:
• صفحات و مسیریابی (دایرکتوری pages/، مسیرهای داینامیک).
• تولید سایت استاتیک (SSG) و رندرینگ سمت سرور (SSR).
• مسیرهای API (/api).

استایل‌دهی:
• ‏CSS Modules، Tailwind CSS یا Styled Components.

ابزارها:
• استفاده پایه از npm/yarn و کنترل نسخه با Git.

تمرین:
• ساخت یک سایت پورتفولیوی شخصی یا یک وبلاگ با استفاده از SSG.

پروژه‌های پیشنهادی:
• اپلیکیشن Todo.
• برنامه هواشناسی (با استفاده از مسیرهای API).
• وبلاگ با Markdown (SSG و مسیرهای داینامیک).

اینجا همه APIهای عمومی رایگان برای تمرین در دسترسه: Public APIs
منبع

#react #nextjs #frontend #tailwindcss

Channel: @JSKernel