میخوای ببینی یه آرایه واقعاً Array هست
یا نه؟ بهجای typeof از این استفاده کن:
یا نه؟ بهجای typeof از این استفاده کن:
Array.isArray(value)
مثلاً:Array.isArray([1, 2, 3]) true
🎯 سادهست، ولی توی کار با API و دادهها خیلی به دردت میخوره.❤3🔥1
😳 میدونستی سایتت میتونه بدون JavaScript تاریک بشه؟
فقط اینو بذار توی HTML:
کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
فقط اینو بذار توی HTML:
<meta name="color-scheme"
content="dark light">
حالا مرورگر میفهمه سایتت از Dark Mode پشتیبانی میکنه و بعضی المانهای پیشفرضش رو خودش با تم سیستم هماهنگ میکنه. 🌙کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
❤1🔥1
🚨 اینا رو توی JavaScript قاطی کنی به باگ میخوری !
چندتا مقدار هستن که ظاهرشون سادهست، ولی رفتارشون میتونه غافلگیرت کنه 👇
🔥 همین تفاوتهای کوچیک، یکی از دلایل باگهای عجیب JavaScript هستن.
📌 اینو نگه دار؛ مخصوصاً وقتی داری شرطها و دادههای API رو هندل میکنی.
چندتا مقدار هستن که ظاهرشون سادهست، ولی رفتارشون میتونه غافلگیرت کنه 👇
null → عمداً میگی مقداری وجود ندارهundefined → مقدار هنوز تعیین نشده0 → عدد صفره، نه «بدون مقدار»"" → رشته خالیهfalse → مقدار منطقی غلطهNaN → نتیجهی یک محاسبه عددی معتبر نیستInfinity → عددی که از محدوده معمول خارج شده[] → آرایه خالیه، ولی در شرطها Truthy محسوب میشه 😳{} → آبجکت خالیه و اون هم Truthy محسوب میشه🔥 همین تفاوتهای کوچیک، یکی از دلایل باگهای عجیب JavaScript هستن.
📌 اینو نگه دار؛ مخصوصاً وقتی داری شرطها و دادههای API رو هندل میکنی.
🔥3
🚨 ۷ چیز که نباید توی پروژه JavaScript بهشون اعتماد کنی!
بعضی باگها دقیقاً از جایی شروع میشن که فکر میکنی همهچی اوکیه
به نظر میاد، لزوماً قابل Parse نیست
سیستم خودت کار میکنه، برای همه مرورگرها قابل اعتماد ندون
🔥 برنامهنویسی فقط این نیست که کدت کار کنه؛
باید بدونی کجا ممکنه خراب بشه.
📌 اینو ذخیره کن؛ موقع پروژه واقعی به کارت میاد.
بعضی باگها دقیقاً از جایی شروع میشن که فکر میکنی همهچی اوکیه
localStorage → اطلاعات حساس رو اینجا نگه ندار innerHTML → با دادهی کاربر با احتیاط استفاده کن Date → محاسبات زمانی همیشه اونقدر ساده نیستن Math.random() → برای چیزهای امنیتی مناسب نیست parseInt("10px") → ممکنه نتیجهای بگیری که انتظارشو نداری JSON.parse() → هر چیزی که JSONبه نظر میاد، لزوماً قابل Parse نیست
window → کدت رو فقط به خاطر اینکه روی سیستم خودت کار میکنه، برای همه مرورگرها قابل اعتماد ندون
🔥 برنامهنویسی فقط این نیست که کدت کار کنه؛
باید بدونی کجا ممکنه خراب بشه.
📌 اینو ذخیره کن؛ موقع پروژه واقعی به کارت میاد.
❤3❤🔥1
🎯 بهترین سایتهای آمادگی مصاحبه
https://leetcode.com
https://codewars.com
https://exercism.org
https://bigfrontend.dev
https://frontendinterviewhandbook.com
https://leetcode.com
https://codewars.com
https://exercism.org
https://bigfrontend.dev
https://frontendinterviewhandbook.com
Leetcode
LeetCode - The World's Leading Online Programming Learning Platform
Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.
❤2🔥1
🌐 HTTP و HTTPS
چه فرقی دارن؟
وقتی وارد یه سایت میشی، مرورگرت یه Request برای سرور میفرسته و سرور هم جوابشو برمیگردونه.
HTTP
این ارتباط رو بدون رمزنگاری انجام
میده؛ یعنی اطلاعات میتونه در مسیر قابل مشاهده باشه.
ولی HTTPS همون ارتباطه، با این تفاوت که اطلاعات بین مرورگر و سرور رمزنگاری میشه 🔒
خلاصه:
HTTP → ارتباط معمولی
HTTPS → ارتباط امن و رمزنگاریشده
برای همینه که کنار آدرس بیشتر سایتهای امروزی علامت 🔒 میبینی.
چه فرقی دارن؟
وقتی وارد یه سایت میشی، مرورگرت یه Request برای سرور میفرسته و سرور هم جوابشو برمیگردونه.
HTTP
این ارتباط رو بدون رمزنگاری انجام
میده؛ یعنی اطلاعات میتونه در مسیر قابل مشاهده باشه.
ولی HTTPS همون ارتباطه، با این تفاوت که اطلاعات بین مرورگر و سرور رمزنگاری میشه 🔒
خلاصه:
HTTP → ارتباط معمولی
HTTPS → ارتباط امن و رمزنگاریشده
برای همینه که کنار آدرس بیشتر سایتهای امروزی علامت 🔒 میبینی.
❤2🏆1
🚀 Deployment
یعنی چی؟
فرض کن سایتت رو روی لپتاپت ساختی؛ فعلاً فقط خودت میتونی ببینیش.
برای اینکه بقیه هم بتونن وارد سایتت بشن، باید پروژه رو Deploy کنی.
معمولاً این اتفاق میفته:
💻 کدت رو مینویسی ⬇️ 📦 پروژه رو Build میکنی ⬇️ ☁️ فایلهای پروژه روی یک Server قرار میگیرن ⬇️ 🌐 به یک Domain وصلش میکنی ⬇️
👥 حالا هر کسی آدرس سایت رو بزنه،
سرور فایلها رو براش میفرسته.
مثلاً وقتی پروژه React رو روی سرویسهایی مثل Vercel یا Netlify Deploy میکنی، کدت از حالت «فقط روی سیستم من» درمیاد و تبدیل میشه به یک سایت قابل دسترسی از اینترنت.
خلاصه:
Development = ساختن پروژه 🛠
Deployment = منتشر کردن پروژه روی اینترنت 🚀
یعنی چی؟
فرض کن سایتت رو روی لپتاپت ساختی؛ فعلاً فقط خودت میتونی ببینیش.
برای اینکه بقیه هم بتونن وارد سایتت بشن، باید پروژه رو Deploy کنی.
معمولاً این اتفاق میفته:
💻 کدت رو مینویسی ⬇️ 📦 پروژه رو Build میکنی ⬇️ ☁️ فایلهای پروژه روی یک Server قرار میگیرن ⬇️ 🌐 به یک Domain وصلش میکنی ⬇️
👥 حالا هر کسی آدرس سایت رو بزنه،
سرور فایلها رو براش میفرسته.
مثلاً وقتی پروژه React رو روی سرویسهایی مثل Vercel یا Netlify Deploy میکنی، کدت از حالت «فقط روی سیستم من» درمیاد و تبدیل میشه به یک سایت قابل دسترسی از اینترنت.
خلاصه:
Development = ساختن پروژه 🛠
Deployment = منتشر کردن پروژه روی اینترنت 🚀
❤3⚡1🔥1
🤖 شبیهسازی مصاحبه Front-End با AI
میخوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈
این پرامپت رو به AI بده:
اینطوری 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 میکنی و هنوز لاگین هستی، یکی از این مکانیزمها پشت صحنه داره کار میکنه. 🔐
سوال مصاحبه بوده همیشه
چی هستن؟
وقتی وارد یه سایت میشی و لاگین میکنی، سایت باید یادش بمونه تو کی هستی.
🍪 Cookie →
اطلاعات کوچیکی که مرورگر ذخیره میکنه و معمولاً همراه Request
برای سرور میفرسته.
Session →
اطلاعات ورود کاربر که معمولاً سمت سرور نگهداری میشه و با یک شناسه به کاربر مرتبط میشه.
خیلی ساده:
Cookie = چیزی که مرورگر نگه میداره
Session = اطلاعاتی که معمولاً سرور نگه میداره
مثلاً وقتی صفحه رو Refresh میکنی و هنوز لاگین هستی، یکی از این مکانیزمها پشت صحنه داره کار میکنه. 🔐
سوال مصاحبه بوده همیشه
❤3🔥1💯1
📱 سایتها از کجا میفهمن با چه گوشی و مرورگری وارد شدی؟
وقتی وارد یه سایت میشی، مرورگرت یه سری اطلاعات همراه درخواست برای سرور میفرسته.
مثلاً ممکنه سایت بفهمه:
📱 موبایل یا کامپیوتر
🌐 Chrome، Safari یا Firefox 💻
نوع سیستمعامل 📐 اندازه تقریبی صفحه
یکی از مهمترین این اطلاعات User-Agent هست.
سایت هم با استفاده از این اطلاعات، نسخه مناسبتری از صفحه رو بهت نمایش میده.
نکته جالب: سایت لزوماً مدل دقیق گوشیات رو همیشه نمیدونه؛ مقدار اطلاعاتی که میتونه بفهمه به مرورگر و تنظیمات حریم خصوصی هم بستگی داره. 👀
وقتی وارد یه سایت میشی، مرورگرت یه سری اطلاعات همراه درخواست برای سرور میفرسته.
مثلاً ممکنه سایت بفهمه:
📱 موبایل یا کامپیوتر
🌐 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 کن؛ بعداً احتمالاً بهش برمیگردی.
اسمش: 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 بفرست.
❌ عکسهای سنگین
❌ JavaScript
❌ Re-renderهای
اضافی
غیرضروری در React
❌ لود کردن فونتهای زیاد
❌ بیتوجهی به Core Web Vitals
💡 سرعت سایت فقط به سرور مربوط
نیست؛
کدی که توی Front-End مینویسی تأثیر
زیادی داره.
📌 Save
کن، یه روز به دردت میخوره.
👨💻 برای یه Front-End Developer بفرست.
❤4👍1
سوال مصاحبه
❓ Virtual DOM
چیه؟
❓ Virtual DOM
چیه؟
روشی برای مقایسه تغییرات قبل از آپدیت DOM واقعی تا رندر سریعتر انجام بشه.
۶ سایت رایگان برای ساخت UI حرفهای که باید ذخیرهشون کنی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
از این به بعد رزومهخواستید بسازید روی سایت خودمون بسازید
ابزار ساخته رزومه به سایت اضافه شد
https://codelines.ir/resume-builder
ابزار ساخته رزومه به سایت اضافه شد
https://codelines.ir/resume-builder
کدلاینز
کدلاینز | آموزش فرانت اند پروژه محور از صفر تا استخدام
آموزش فرانت اند از صفر تا استخدام: دورههای پروژه محور ری اکت (React)، جاوا اسکریپت (JavaScript)، HTML و CSS و گیت و گیت هاب — با دسترسی مادامالعمر و پشتیبانی واقعی.
👍1