🚨 ۷ چیز که نباید توی پروژه 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
اگه کاربر خیلی سریع تایپ کنه، نمیخوایم با زدن هر حرف یه درخواست به API بفرستیم.
Debounce
میاد یه کم صبر میکنه تا کاربر تایپش رو متوقف کنه، بعد تابع رو اجرا میکنه.
📌 بیشتر برای Search Box و جستجوهای لحظهای کاربرد داره.
Debounce
میاد یه کم صبر میکنه تا کاربر تایپش رو متوقف کنه، بعد تابع رو اجرا میکنه.
📌 بیشتر برای Search Box و جستجوهای لحظهای کاربرد داره.
❤🔥2
🚀از جنس تجربه
هر وقت خواستی یک Library جدید نصب کنی، اول این سؤال رو از خودت بپرس:
«
اگر این Library فردا آپدیت نشه، پروژه من چقدر آسیب میبینه؟»
📦
Dependency
زیاد همیشه نشونه
حرفهای بودن نیست.
گاهی یک Function ساده، بهتر از اضافه کردن یک Package جدیده.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
هر وقت خواستی یک Library جدید نصب کنی، اول این سؤال رو از خودت بپرس:
«
اگر این Library فردا آپدیت نشه، پروژه من چقدر آسیب میبینه؟»
📦
Dependency
زیاد همیشه نشونه
حرفهای بودن نیست.
گاهی یک Function ساده، بهتر از اضافه کردن یک Package جدیده.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤3🔥1
useMemo
چه زمانی استفاده میشود؟
اگر یک محاسبه سنگین داری که در هر رندر دوباره اجرا میشود، از
✅ مناسب برای:
فیلتر کردن لیستهای بزرگ
مرتبسازی دادهها
محاسبات سنگین
❌ برای هر متغیری از
چه زمانی استفاده میشود؟
اگر یک محاسبه سنگین داری که در هر رندر دوباره اجرا میشود، از
useMemo استفاده کن.✅ مناسب برای:
فیلتر کردن لیستهای بزرگ
مرتبسازی دادهها
محاسبات سنگین
❌ برای هر متغیری از
useMemo استفاده نکن؛ خودش هم هزینه دارد.❤2👍1
🌐 چند روش ذخیره اطلاعات در مرورگر که هر Front-End Developer باید بدونه:
📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن
⏱️ sessionStorage → اطلاعات تا پایان بستن تب
🍪 Cookie → دادههای کوچک + امکان ارسال به سرور
🗄️ IndexedDB → ذخیره حجم زیادی از دادههای ساختاریافته
⚡ Cache Storage → ذخیره فایلها و Responseها برای افزایش سرعت
💾 Storage API → مدیریت و بررسی فضای ذخیرهسازی
📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن
⏱️ sessionStorage → اطلاعات تا پایان بستن تب
🍪 Cookie → دادههای کوچک + امکان ارسال به سرور
🗄️ IndexedDB → ذخیره حجم زیادی از دادههای ساختاریافته
⚡ Cache Storage → ذخیره فایلها و Responseها برای افزایش سرعت
💾 Storage API → مدیریت و بررسی فضای ذخیرهسازی
📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤2👏1
🚨 ۵ چیزی که هر Front-End Developer باید درباره API بدونه:
🔹
🔹
🔹
🔹
🔹
اما یه نکته مهم:
❌ فقط بلد بودن
Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.
📌 Save
کن؛ توی پروژه به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
🔹
GET → گرفتن اطلاعات🔹
POST → ساخت اطلاعات جدید🔹
PUT → جایگزینی کامل اطلاعات🔹
PATCH → ویرایش بخشی از اطلاعات🔹
DELETE → حذف اطلاعاتاما یه نکته مهم:
❌ فقط بلد بودن
fetch()نشون نمیده که API رو کامل بلدی !Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.
📌 Save
کن؛ توی پروژه به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤3👍1
👀 این ۵ تا Attribute HTML رو خیلیها جدی نمیگیرن:
همین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفهای جدا میکنه. 🚀
📌 Save
کن؛ بعداً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
loading="lazy" → لود تنبل تصاویرautocomplete → تجربه بهتر فرمهاaria-label → دسترسیپذیری بهترdefer → جلوگیری از بلاک شدن HTMLrel="noopener" → امنیت بیشتر لینکهای جدیدهمین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفهای جدا میکنه. 🚀
📌 Save
کن؛ بعداً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤2🔥1