آموزش برنامه نویسی فرانت اند
8.23K subscribers
328 photos
47 videos
26 files
113 links
👈🏻 ارتباط با من: @codelines_support 🔅

عرفان رضایی هستم ❤️
و اینجا خیلی ساده بهت یاد میدم
چطوری اصولی #برنامه_نویسی #فرانت_اند یاد بگیری 💻
که هم لذت ببری و هم وارد بازار کار بشی
😍🥇
@satisfaction_codelines 👈 نتایج و رضایت دوره

آدرس سایت 👈🏻: codelines.ir
Download Telegram
می‌خوای ببینی یه آرایه واقعاً Array هست
یا نه؟ به‌جای typeof از این استفاده کن:


Array.isArray(value)

مثلاً:
Array.isArray([1, 2, 3]) true


🎯 ساده‌ست، ولی توی کار با API و داده‌ها خیلی به دردت می‌خوره.
3🔥1
😳 می‌دونستی سایتت می‌تونه بدون JavaScript تاریک بشه؟

فقط اینو بذار توی HTML:

<meta name="color-scheme"
content="dark light">


حالا مرورگر می‌فهمه سایتت از Dark Mode پشتیبانی می‌کنه و بعضی المان‌های پیش‌فرضش رو خودش با تم سیستم هماهنگ می‌کنه. 🌙

کوچیکه، ولی برای یه سایت تمیز خیلی به‌دردبخوره. 🔥
1🔥1
const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);
🚨 اینا رو توی JavaScript قاطی کنی به باگ می‌خوری !

چندتا مقدار هستن که ظاهرشون ساده‌ست، ولی رفتارشون می‌تونه غافلگیرت کنه 👇

null → عمداً میگی مقداری وجود نداره

undefined → مقدار هنوز تعیین نشده

0 → عدد صفره، نه «بدون مقدار»

"" → رشته خالیه


false → مقدار منطقی غلطه

NaN → نتیجه‌ی یک محاسبه عددی معتبر نیست
Infinity → عددی که از محدوده معمول خارج شده

[] → آرایه خالیه، ولی در شرط‌ها Truthy محسوب میشه 😳

{} → آبجکت خالیه و اون هم Truthy محسوب میشه

🔥 همین تفاوت‌های کوچیک، یکی از دلایل باگ‌های عجیب JavaScript هستن.

📌 اینو نگه دار؛ مخصوصاً وقتی داری شرط‌ها و داده‌های API رو هندل می‌کنی.
🔥3
🚨 ۷ چیز که نباید توی پروژه JavaScript بهشون اعتماد کنی!

بعضی باگ‌ها دقیقاً از جایی شروع میشن که فکر می‌کنی همه‌چی اوکیه

localStorage → اطلاعات حساس رو اینجا نگه ندار
innerHTML → با داده‌ی کاربر با احتیاط استفاده کن
Date → محاسبات زمانی همیشه اون‌قدر ساده نیستن
Math.random() → برای چیزهای امنیتی مناسب نیست
parseInt("10px") → ممکنه نتیجه‌ای بگیری که انتظارشو نداری
JSON.parse() → هر چیزی که JSON
به نظر میاد، لزوماً قابل Parse نیست
window → کدت رو فقط به خاطر اینکه روی

سیستم خودت کار می‌کنه، برای همه مرورگرها قابل اعتماد ندون

🔥 برنامه‌نویسی فقط این نیست که کدت کار کنه؛
باید بدونی کجا ممکنه خراب بشه.

📌 اینو ذخیره کن؛ موقع پروژه واقعی به کارت میاد.
3❤‍🔥1
🌐 HTTP و HTTPS
چه فرقی دارن؟

وقتی وارد یه سایت میشی، مرورگرت یه Request برای سرور می‌فرسته و سرور هم جوابشو برمی‌گردونه.

HTTP
این ارتباط رو بدون رمزنگاری انجام
میده؛ یعنی اطلاعات می‌تونه در مسیر قابل مشاهده باشه.

ولی HTTPS همون ارتباطه، با این تفاوت که اطلاعات بین مرورگر و سرور رمزنگاری میشه 🔒

خلاصه:
HTTP → ارتباط معمولی

HTTPS → ارتباط امن و رمزنگاری‌شده

برای همینه که کنار آدرس بیشتر سایت‌های امروزی علامت 🔒 می‌بینی.
2🏆1
🚀 Deployment
یعنی چی؟

فرض کن سایتت رو روی لپ‌تاپت ساختی؛ فعلاً فقط خودت می‌تونی ببینیش.

برای اینکه بقیه هم بتونن وارد سایتت بشن، باید پروژه رو Deploy کنی.

معمولاً این اتفاق میفته:

💻 کدت رو می‌نویسی ⬇️ 📦 پروژه رو Build می‌کنی ⬇️ ☁️ فایل‌های پروژه روی یک Server قرار می‌گیرن ⬇️ 🌐 به یک Domain وصلش می‌کنی ⬇️
👥 حالا هر کسی آدرس سایت رو بزنه،
سرور فایل‌ها رو براش می‌فرسته.

مثلاً وقتی پروژه React رو روی سرویس‌هایی مثل Vercel یا Netlify Deploy می‌کنی، کدت از حالت «فقط روی سیستم من» درمیاد و تبدیل میشه به یک سایت قابل دسترسی از اینترنت.

خلاصه:
Development = ساختن پروژه 🛠
Deployment = منتشر کردن پروژه روی اینترنت 🚀
31🔥1
🤖 شبیه‌سازی مصاحبه Front-End با AI

می‌خوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈

این پرامپت رو به AI بده:

Act as a Senior Front-End interviewer.

Conduct a realistic interview.
Ask only one question at a time.

Questions should cover JavaScript, React, CSS, Browser, and Performance.

Do not reveal the correct answer until I respond.

After each answer:

* Give me a score from 0 to 10.
* Point out my mistakes.
* Ask a harder related question.

At the end, tell me how ready I am for a Junior / Mid / Senior position.


اینطوری AI فقط سؤال نمی‌پرسه؛ نقاط ضعف مصاحبه‌ات رو هم پیدا می‌کنه.
3💯1
CORS
چیه؟


قانون امنیتی مرورگره که مشخص می‌کنه یک سایت اجازه داره به منابع سایت دیگه درخواست بفرسته یا نه.
2💯1
🍪 Cookie و Session
چی هستن؟

وقتی وارد یه سایت میشی و لاگین می‌کنی، سایت باید یادش بمونه تو کی هستی.

🍪 Cookie
اطلاعات کوچیکی که مرورگر ذخیره می‌کنه و معمولاً همراه Request
برای سرور می‌فرسته.

Session
اطلاعات ورود کاربر که معمولاً سمت سرور نگهداری میشه و با یک شناسه به کاربر مرتبط میشه.

خیلی ساده:
Cookie = چیزی که مرورگر نگه می‌داره
Session = اطلاعاتی که معمولاً سرور نگه می‌داره

مثلاً وقتی صفحه رو Refresh می‌کنی و هنوز لاگین هستی، یکی از این مکانیزم‌ها پشت صحنه داره کار می‌کنه. 🔐

سوال مصاحبه بوده همیشه
3🔥1💯1
📱 سایت‌ها از کجا می‌فهمن با چه گوشی و مرورگری وارد شدی؟

وقتی وارد یه سایت میشی، مرورگرت یه سری اطلاعات همراه درخواست برای سرور می‌فرسته.

مثلاً ممکنه سایت بفهمه:

📱 موبایل یا کامپیوتر
🌐 Chrome، Safari یا Firefox 💻
نوع سیستم‌عامل 📐 اندازه تقریبی صفحه

یکی از مهم‌ترین این اطلاعات User-Agent هست.

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

نکته جالب: سایت لزوماً مدل دقیق گوشی‌ات رو همیشه نمی‌دونه؛ مقدار اطلاعاتی که می‌تونه بفهمه به مرورگر و تنظیمات حریم خصوصی هم بستگی داره. 👀
3👏1👌1
این GitHub Repo رو احتمالاً باید Bookmark کنی.

اسمش: Awesome AI Agents

یه لیست جمع‌وجور از پروژه‌ها و ابزارهای AI Agent که می‌تونه کلی وقتت رو برای پیدا کردن ابزار مناسب ذخیره کنه.

داخلش پیدا می‌کنی:
Coding Agent
Automation
Agent Framework
Computer Use

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

GitHub:
https://github.com/caramaschiHG/awesome-ai-agents-2026

این یکی رو Save کن؛ بعداً احتمالاً بهش برمی‌گردی.
❤‍🔥1👏1
🚨 ۵ اشتباه که سایتت رو کند می‌کنه:

عکس‌های سنگین
JavaScript

Re-renderهای
اضافی
غیرضروری در React

لود کردن فونت‌های زیاد
بی‌توجهی به Core Web Vitals

💡 سرعت سایت فقط به سرور مربوط
نیست؛

کدی که توی Front-End می‌نویسی تأثیر
زیادی داره.

📌 Save
کن، یه روز به دردت می‌خوره.

👨‍💻 برای یه Front-End Developer بفرست.
4👍1
console.log(0.1 + 0.2 === 0.3);
خروجی کد بالا چیه ؟
Anonymous Quiz
59%
True
19%
False
16%
TypeError
7%
Undefined
سوال‌ مصاحبه

Virtual DOM
چیه؟

روشی برای مقایسه تغییرات قبل از آپدیت DOM واقعی تا رندر سریع‌تر انجام بشه.
۶ سایت رایگان برای ساخت UI حرفه‌ای که باید ذخیره‌شون کنی

اگه فرانت‌اند کار می‌کنی، این لیست رو یه جا نگه دار:

shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI

همه‌شون برای پیدا کردن کامپوننت‌های آماده و ساخت سریع‌تر رابط کاربری کاربردی‌ان.

این پست رو Save کن؛ یه روز بهش نیاز پیدا می‌کنی.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی