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

دیگه نیازی نیست برای تست و نمایش رزومه یا برنامه‌های تک‌صفحه‌ای (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.

قبل از مصاحبه React اینارو مرور کن

useState
useEffect
useMemo
useCallback
React.memo
Context API
Lazy Loading
Suspense
Virtual DOM
Reconciliation

اگر اینا رو بلد باشی، نصف راه رو رفتی.

❓ Hoisting
چیه؟

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

⚠️کی دیروز به خاطر شرایط مالی نتونست ثبت نام کنه؟؟⚠️

به این آیدی پیام بده👇
@codelines_support
@codelines_support

🍪 فرق Cookie و Session چیست؟

وقتی وارد یک سایت می‌شی، سایت باید تو رو بشناسه. این کار معمولاً با Cookie و Session انجام می‌شه.

Cookie
: اطلاعات کوچکیه که داخل مرورگر ذخیره می‌شه؛ مثل زبان سایت یا شناسه ورود.

Session:
اطلاعات روی سرور نگهداری می‌شن و مرورگر فقط شناسه Session رو ذخیره می‌کنه.

📌 تفاوت اصلی:
Cookie داخل مرورگر ذخیره می‌شه.
Session معمولاً روی سرور ذخیره می‌شه.
Cookie می‌تونه مدت بیشتری باقی بمونه.
Session معمولاً بعد از مدتی منقضی می‌شه.

⚠️ اطلاعات حساس مثل رمز عبور را نباید مستقیماً داخل Cookie ذخیره کرد.
Cookie و Session از سؤال‌های پرتکرار مصاحبه‌های برنامه‌نویسی هستند.

Tab Network
فقط برای API نیست!

در تب Network می‌تونی این موارد رو ببینی:

✅ تصاویر
✅ فونت‌ها
✅ فایل‌های JS
✅ فایل‌های CSS
✅ درخواست‌های API

📌 یکی از مهم‌ترین ابزارهای هر Front-End Developer این تب توی مرورگره .

همه عاشق موفقیت‌اند،

اما کمتر کسی عاشق شب‌هاییه که با یک باگ تا صبح بیدار بمونه

همین شبا آینده کاری تو میسازه 👌🏻

🎯 چرا React از Virtual DOM استفاده می‌کنi؟

اگه هر تغییر مستقیماً روی DOM واقعی اعمال بشه، سرعت برنامه پایین میاد.

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

✅ نتیجه:

رندر سریع‌تر
Performance بهتر
تجربه کاربری روان‌تر

📌 ترفند: Virtual DOM یک نسخه مجازی از DOM هستش ، نه جایگزین کامل اون.

🎯 چرا [] == ![] خروجی true می‌دهد؟

console.log([] == ![])
// true

اول ![] تبدیل می‌شود به false و بعد JavaScript موقع مقایسه نوع داده‌ها را تبدیل می‌کند.

📌 نتیجه نهایی:

[] == false // true

💡 یکی از سوال‌های WTF در مصاحبه‌های JavaScript.

🤯 می‌دونستی؟

NaN
تنها مقداری در JavaScript است که حتی با خودش هم برابر نیست!

console.log(NaN === NaN)
// false

اگر خواستی بررسی کنی مقدار NaN است یا نه:

Number.isNaN(value)

📌 این سؤال بارها در مصاحبه‌های JavaScript پرسیده شده.

📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.

لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایل‌ها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉