سکشن جدید رکورد شده و امادس

ولی حس اپلودش نیس

#Course
#Section4
#htmlcss

سکشن چهارم از دوره htmlcss

حمایت فراموش نشه 🙏⚡️

Channel: @JSKernel

قسمت های فصل چهارم:

#Section4
#htmlcss

21...
22...
23...

Channel: @JSKernel

#Course
#Section5
#htmlcss

سکشن پنجم از دوره htmlcss (پارت آخر)

حمایت فراموش نشه 🙏❤️‍🔥

Channel: @JSKernel

قسمت های فصل پنچم: (فصل آخر)

#Section5
#htmlcss

24 Favourites section
25 App phone section
26 Join community section
27 Footer

Channel: @JSKernel

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

به جز فایل فیگما برای 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