💡 یه ترفند باحال برای دیباگ کردن

اگه تا حالا یه آرایه از آبجکت‌ها رو با console.log() چاپ کردی، حتماً دیدی خروجیش یه‌کم شلوغ و اعصاب‌خردکنه. 😅

به جاش اینو امتحان کن:

const users = [
  { name: "Ali", age: 20 },
  { name: "Sara", age: 22 },
  { name: "Reza", age: 19 }
];




console.table(users);



👀 به‌جای یه خروجی شلوغ، همه‌چی رو توی یه جدول مرتب بهت نشون می‌ده.
📌 دفعه بعد که خواستی داده‌های API یا یه آرایه از آبجکت‌ها رو بررسی کنی، console.table() رو فراموش نکن. احتمالاً دیگه کمتر سراغ console.log() می‌ری. 😉

#JavaScript #Programming #CodeTips

📌 سوالات پر تکرار شما:

۱) چطوری میتونم توی پکیج جامع برنامه نویسی فرانت اند ثبت نام کنم؟ 👇

فرداشب پنج شنبه - 8 مرداد ماه راس ســـــاعــــــت۲۰:۰۰ ⏰
شماره کارت در کانال
ارسال میشه و میتونید ثبت نامتون رو
انجام بدید 🌱

البته از طریق سایت و درگاه پرداخت هم شما میتونید ثبت نامتون رو کامل کنید

قیمت اصلی پکیج جامع ۶٫۰۰۰٫۰۰۰ تومان هست
که فردا با قیمت 2٫980٫000 تومان
تقدیم شما عزیزان میشه 🌱

برای۲۰ نفر ⚠️


۲) از کی نتایج دوره رو میبینم؟! 👇

+از همان روز اول، شـمـا مطالب رو به صورت کامل مسلط میشید که نتایج فوق‌العاده
آن‌ها را خواهــید دیــد. 🌱

۳) بعد از ثبت‌نام چه موقع
میتونم دوره را شروع کنم؟! 👇

+بعد از ارسال فیش واریزی ، نام خانوادگی و شماره همراه، بلافاصله لایسنس ، راهنمایی فعال سازی و مسیر آموزشی در تلگرام براتون ارسال میشی که
میتونی آموزش رو شروع کنی 🌱

۴) روزی چقدر باید وقت بگذارم؟! 👇

+روزی ۲ ساعت برای انجام
تــمـریـنـات عملی و جـــذاب 🌱

۵) برای چه سنی مناسبه؟! 👇

+تمامی افراد از ۱۱ سال تا ۹۰ سال 🌱

۶) آیا کلاس‌ها به صورت
آنلاین و برخط هست؟! 👇

+خیر، دوره به صورت مجازی هست . 🌱

-بنابراین هر زمان و هر چند بار که تمایل داشتید میتونید جلسات دوره رو مشاهده کنید 🌱
.
جهت اطلاع از سرفصل ها و توضیحات بیشتر👇🏻

https://codelines.ir/package

هر سوال دیگه ای دارید بپرسید : @codelines_support

🎯 سوال مصاحبه | DNS چیه؟

فرض کن می‌خوای بری خونه دوستت؛ اسمش رو می‌دونی، ولی آدرس دقیقش رو نه.
اینجاست که DNS وارد عمل میشه. 😄
DNS اسم سایته مثل:

google.com

رو به آدرس واقعی سرورش (IP) تبدیل می‌کنه تا مرورگر بدونه باید به کجا وصل بشه.

📌 خلاصه:

google.com
      ⬇️
DNS
      ⬇️
142.250.xxx.xxx

💡 نکته : کامپیوترها اسم سایت‌ها رو نمی‌فهمن، فقط با IP Address ارتباط برقرار می‌کنن.

🎯سوال مصاحبه | CDN چیه؟

فرض کن سرور سایتت فقط توی آلمان باشه، ولی یه کاربر از ایران وارد سایت بشه.
اگر قرار باشه همه درخواست‌ها تا آلمان برن، سایت دیرتر لود میشه.

اینجاست که CDN (Content Delivery Network) کمک می‌کنه.

CDN
فایل‌هایی مثل:
CSS
JavaScript
عکس‌ها
فونت‌ها

رو روی سرورهای مختلف دنیا ذخیره می‌کنه و هر کاربر فایل‌ها رو از نزدیک‌ترین سرور دریافت می‌کنه.

📌 نتیجه:
✅ سرعت لود بیشتر
✅ فشار کمتر روی سرور اصلی
✅ تجربه کاربری بهتر

💡 نکته مصاحبه: CDN معمولاً فایل‌های Static مثل عکس، CSS و JavaScript رو کش می‌کنه، نه داده‌های داینامیک.

پنج شنبه ۴۰۵/۰۵/۸ ساعت ۲۰
جشنواره تخفیفی ۴۰ درصدی روی پکیج جامع برنامه نویسی فرانت اند اعمال میشه

که به جای پرداخت ۶ میلیون تومن میتونید با پرداخت ۲٫۹۸۰٫۰۰۰
داخل پکیج جامع ثبت نام کنید


🌿 پکیج جامع برنامه‌نویسی فرانت‌اند 🌿

📌 شامل دوره‌های:

🌱 HTML & CSS
🌱 JavaScript
🌱 React.js

✨ از مقدماتی تا پیشرفته دوره ها تدریس شدن – کاملاً پروژه‌محور و تمرین‌محور

✨ همراه با پشتیبانی VIP (۶ ماهه)

🎁 هدیه ویژه: دوره‌ی Git & GitHub روی این پکیج تقدیم میشه

💡 ویژگی‌ها:
حداقل ۴۰ پروژه‌ی کاربردی + تمرینات
سطح‌بندی‌شده

مجموعاً ۶۴ ساعت آموزش کامل

⏳ دسترسی ماد‌ام العمر به دوره‌ها + دریافت آپدیت‌های رایگان

📚 آموزش تمام پکیج‌ها و ابزار های کاربردی مورد نیاز بازار کار

🎁 هدیه ویژه دوم :

فایل PDF
۱۰۰ سوال تستی با جواب تشریحی از مباحث تدریس شده
به قیمت ۳۹۸ رایگان تقدیم می‌شود

🎁 هدیه ویژه سوم : در کنار دوره های پکیج
دوره ی از کد تا استخدام به ارزش ۱٫۳۷۵٫۰۰۰ که به صورت رایگان و هدیه تقدیم میشه

محتوای دوره برای کسانی هست که نمی‌دونن بعد از مسلط شدن روی برنامه‌نویسی فرانت اند باید چیکار کنن

این دوره بهتون یاد میده که
توی ویترین نمونه کارهاتون چه پروژه هایی بذارید
چطوری رزومه حرفه ای بنویسید
چطوری و کجا ها کار و پروژه پیدا کنید
روی کدوم آگهی ها درخواست ثبت کنید
بعد از تایید چطوری از پس مصاحبه های فنی و غیر فنی بر بیاید


جهت اطلاع از سرفصل ها و توضیحات بیشتر👇🏻

https://codelines.ir/package

یکی از سوال‌های پرتکرار مصاحبه‌های فرانت‌اند 👇

فرق fetch و axios چیه؟

هر دو برای ارتباط با API هستن.

ولی axios امکانات بیشتری مثل:

✅ مدیریت خطا
✅ Timeout
✅ Interceptor

داره.
تو از کدوم استفاده می‌کنی؟

#React #API

نکته های کاربردی

⚡ === همیشه انتخاب امن‌تری نسبت به == است.

💡 const
یعنی متغیر قابل انتساب مجدد نیست، نه اینکه مقدارش همیشه ثابت باشد.

🚀 از ?. استفاده کن تا خطاهای undefined کمتر شوند.

🎨 Template Literals
(` `) کد را تمیزتر و خواناتر می‌کنند.

⚠️ null و undefined
یکی نیستند؛ کاربردهای متفاوتی دارند.

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

هر بار می‌رفتم سمت یه مسیر، یا سخت بود یا حس می‌کردم برای من نیست. خود این موضوع منو سال ها عقب انداخت😭

تا این‌که با فرانت‌اند آشنا شدم… چون اولش من عاشق بک اند بودم ولی خب...😌

همون اول فهمیدم این همون چیزیه که دنبالش بودم.

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

نه مثل بعضی‌ها که:
❌ از تفریحاتشون زدن
❌ مهمونی‌ها رو کنار گذاشتن
❌ کلی پول خرج دوره های بی فایده بکنم

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

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

حالا که پایه ام هم قوی شده بود، وقتش شده بود برم سمت بک اند😛

هدفم هم فقط؟ فول‌استک شدن و تجربه کردن درآمدهای چندبرابری و کار با شرکت های خفن خارجی بود 💪🔥

تموم این موفیت ها به خاطر تغییر دیدم و یاد گرفتن مسیر درست بود🐥😉

هاست ۱۰۰٪ رایگان برای پروژه‌های فرانت‌اند

دیگه نیازی نیست برای تست و نمایش رزومه یا برنامه‌های تک‌صفحه‌ای (SPA) که طراحی کردید، هزینه هاست بدید. پلتفرم Netlify این امکان رو بهتون میده که فقط با یک Drag & Drop ساده، پروژه‌های استاتیک خودتون رو در چند ثانیه و کاملاً رایگان روی اینترنت منتشر کنید.

آپلود سریع و بدون نیاز به تنظیمات پیچیده
کاملاً رایگان برای استفاده‌های شخصی
امکان اتصال دامنه اختصاصی
و همچنین اگر دامنه ندارین خودش میده برای تست
نکته: این روش فقط برای پروژه‌های فرانت‌اند مناسبه و برای سایت‌های دارای بک‌اند و دیتابیس (مثل وردپرس) مناسب نیست.

لینک سایت


@codelines_ir

.
#شمارش_معکوس ⏳️

30 دقیقه تا شروع ثبت نام
.

🌱ثبت نام از روی سایت🌱

لطفاً ابتدا وارد لینک زیر بشید.
پکیج جامع را به سبد خرید خود اضافه کنید. اگر هنوز در سایت ثبت‌نام نکردید، ابتدا حساب کاربری ایجاد کنید و سپس نسبت به پرداخت هزینه و تکمیل ثبت‌نام اقدام نمایید❤️.

https://codelines.ir/package

ساخت رزومه گرافیکی با هوش مصنوعی

توی پرامپت زیر اطلاعات و مهارت های خودت شخصی سازی کن بده هوش مصنوعی یک کد تو خروجی بهت میده که رزومه گرافیکی تو هست میتونی باهاش سایت بسازی یا بندازیش توی فایل html و فایل رو بدی به کارفرمات :

تو یک طراح ارشد UI/UX و توسعه‌دهنده Front-End حرفه‌ای هستی.
وظیفه تو این است که بر اساس اطلاعات شخصی که در ادامه وارد می‌کنم، یک رزومه آنلاین حرفه‌ای، مدرن، خلاقانه و کاملاً واکنش‌گرا طراحی و کدنویسی کنی.

خروجی باید شامل یک فایل کامل HTML باشد که CSS و JavaScript داخل خودش قرار گرفته باشد و بدون نیاز به هیچ تنظیم اضافی در مرورگر اجرا شود.

ویژگی‌های طراحی:

- طراحی کاملاً حرفه‌ای مناسب استخدام در شرکت‌های معتبر
- ظاهر مدرن، مینیمال و شیک
- Responsive کامل برای موبایل، تبلت و دسکتاپ
- استفاده از فونت‌های زیبا و خوانا
- طراحی با استانداردهای UI/UX روز دنیا
- دارای انیمیشن‌های نرم و جذاب هنگام اسکرول
- دارای کارت‌های زیبا برای بخش‌های مختلف
- استفاده از آیکون‌های حرفه‌ای برای مهارت‌ها و اطلاعات تماس
- دارای حالت Dark/Light Mode
- دارای دکمه دانلود رزومه به صورت PDF
- دارای بخش معرفی کوتاه و تاثیرگذار
- دارای Timeline برای سوابق کاری و تحصیلی
- دارای نوار درصدی برای نمایش مهارت‌ها
- دارای بخش پروژه‌ها با کارت‌های جذاب
- دارای بخش افتخارات و گواهینامه‌ها
- دارای بخش زبان‌ها
- دارای بخش شبکه‌های اجتماعی
- دارای طراحی مناسب برای لینک شخصی یا Portfolio

ساختار رزومه:

1. Header:
- عکس پروفایل
- نام کامل
- عنوان شغلی
- جمله کوتاه حرفه‌ای
- لینک شبکه‌های اجتماعی

2. About Me:
یک معرفی حرفه‌ای از فرد ایجاد کن که مناسب رزومه کاری باشد.

3. اطلاعات شخصی:
- شماره تماس
- ایمیل
- شهر
- وب‌سایت
- لینک GitHub / LinkedIn / Portfolio

4. Skills:
مهارت‌ها را دسته‌بندی کن:
- مهارت‌های فنی
- مهارت‌های نرم
- ابزارها و تکنولوژی‌ها

برای هر مهارت یک درصد میزان تسلط نمایش بده.

5. Experience:
سوابق کاری را به شکل Timeline طراحی کن:
- نام شرکت
- سمت شغلی
- تاریخ شروع و پایان
- توضیحات مسئولیت‌ها
- دستاوردها

6. Education:
سوابق تحصیلی:
- دانشگاه یا موسسه
- رشته
- مدرک
- سال تحصیل

7. Projects:
برای هر پروژه:
- نام پروژه
- توضیح کوتاه
- تکنولوژی‌های استفاده شده
- لینک پروژه
- تصویر یا Placeholder

8. Certificates:
گواهینامه‌ها و دوره‌ها را نمایش بده.

9. Languages:
زبان‌ها همراه با سطح مهارت.

10. Contact:
یک بخش تماس حرفه‌ای طراحی کن.

قوانین کدنویسی:

- فقط کد کامل HTML ارائه بده.
- هیچ توضیح اضافی قبل یا بعد از کد ننویس.
- تمام CSS داخل تگ <style> باشد.
- تمام JavaScript داخل تگ <script> باشد.
- کد کاملاً تمیز، استاندارد و قابل ویرایش باشد.
- از HTML5 Semantic استفاده کن.
- SEO Friendly باشد.
- از CSS Grid و Flexbox استفاده کن.
- از طراحی شلوغ جلوگیری کن.
- رنگ‌بندی حرفه‌ای انتخاب کن.
- ساختار کد طوری باشد که یک توسعه‌دهنده بتواند راحت آن را تغییر دهد.

اطلاعات شخص:

نام:
[نام کامل]

عنوان شغلی:
[مثلاً Front-End Developer]

درباره من:
[توضیحات شخصی]

شماره تماس:
[شماره]

ایمیل:
[ایمیل]

موقعیت:
[شهر / کشور]

وب‌سایت:
[لینک]

شبکه‌های اجتماعی:
[لینک‌ها]

مهارت‌ها:
[لیست مهارت‌ها]

سوابق کاری:
[اطلاعات کامل تجربه‌ها]

تحصیلات:
[اطلاعات تحصیلی]

پروژه‌ها:
[لیست پروژه‌ها]

گواهینامه‌ها:
[لیست مدارک]

زبان‌ها:
[زبان و سطح]

عکس پروفایل:
[لینک عکس]

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

@codelines_ir

Context API

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

به جاش از Context استفاده کن.

Suspense

همراه Lazy استفاده میشه.



<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>



تا زمانی که فایل لود بشه، Loading نمایش داده میشه.

فرق useMemo و useCallback

✅ useMemo
مقدار (Value) را ذخیره می‌کند.

✅ useCallback
تابع (Function) را ذخیره می‌کند.

📌 یکی از سوال‌های پرتکرار مصاحبه React.