🔥 ۵ میانبر ویندوز که هر برنامهنویسی باید بلد باشه 💻
هنوز برای کارهای ساده وقت تلف میکنی؟ 😅
این ۵ تا میانبر رو یاد بگیر، سرعتت چند برابر میشه 🚀
1️⃣ Win + E
📁 باز کردن سریع File Explorer
(دیگه دنبال پوشه پروژههات نگرد!)
2️⃣ Ctrl + Shift + Esc
⚡ باز کردن Task Manager
(وقتی برنامه هنگ کرد، نجاتت میده 😎)
3️⃣ Win + Shift + S
✂️ گرفتن اسکرینشات از هر قسمت صفحه
(برای ذخیره خطاها و کدها عالیه)
4️⃣ Alt + Tab
🔄 جابهجایی سریع بین برنامهها
(ادیتور، مرورگر، ترمینال... مثل حرفهایها!)
5️⃣ Win + V
📋 تاریخچه کلیپبورد
(چندتا متن رو کپی کن و هر وقت خواستی برگردون)
💡 یه برنامهنویس حرفهای فقط کد بهتر نمینویسه؛
سریعتر هم کار میکنه. 🔥
هنوز برای کارهای ساده وقت تلف میکنی؟ 😅
این ۵ تا میانبر رو یاد بگیر، سرعتت چند برابر میشه 🚀
1️⃣ Win + E
📁 باز کردن سریع File Explorer
(دیگه دنبال پوشه پروژههات نگرد!)
2️⃣ Ctrl + Shift + Esc
⚡ باز کردن Task Manager
(وقتی برنامه هنگ کرد، نجاتت میده 😎)
3️⃣ Win + Shift + S
✂️ گرفتن اسکرینشات از هر قسمت صفحه
(برای ذخیره خطاها و کدها عالیه)
4️⃣ Alt + Tab
🔄 جابهجایی سریع بین برنامهها
(ادیتور، مرورگر، ترمینال... مثل حرفهایها!)
5️⃣ Win + V
📋 تاریخچه کلیپبورد
(چندتا متن رو کپی کن و هر وقت خواستی برگردون)
💡 یه برنامهنویس حرفهای فقط کد بهتر نمینویسه؛
سریعتر هم کار میکنه. 🔥
❤3👍1🔥1
🤖 کانتکست (Context) توی هوش مصنوعی یعنی چی؟
تا حالا شده یه چیزی از هوش مصنوعی بخوای، ولی جوابش اصلاً اون چیزی نباشه که میخواستی؟
احتمالاً مشکل از کانتکست بوده!
کانتکست یعنی یهسری اطلاعات درباره چیزی که میخوای، به AI میدی تا دقیقتر بفهمه چی میخوای.
❌ بدون کانتکست:
✅ با کانتکست:
💡 خلاصه: هرچی اطلاعات بهتری به AI بدی، احتمال اینکه همون چیزی که میخوای تحویلت بده بیشتره.
پس دفعه بعد بهجای اینکه فقط بگی «بساز»، یکم کانتکست بده! 🚀
تا حالا شده یه چیزی از هوش مصنوعی بخوای، ولی جوابش اصلاً اون چیزی نباشه که میخواستی؟
احتمالاً مشکل از کانتکست بوده!
کانتکست یعنی یهسری اطلاعات درباره چیزی که میخوای، به AI میدی تا دقیقتر بفهمه چی میخوای.
❌ بدون کانتکست:
«یه سایت برام بساز.»
✅ با کانتکست:
«یه سایت فروشگاهی با React و Tailwind بساز؛ تمش دارک باشه، طراحی مینیمال داشته باشه و روی موبایل هم درست نمایش داده بشه.»
💡 خلاصه: هرچی اطلاعات بهتری به AI بدی، احتمال اینکه همون چیزی که میخوای تحویلت بده بیشتره.
پس دفعه بعد بهجای اینکه فقط بگی «بساز»، یکم کانتکست بده! 🚀
❤3👍3
۱۰ سایت برای پیدا کردن ایده UI/UX
Dribbble
Behance
Awwwards
Mobbin
Land-book
Lapa Ninja
Refero
UI8
Godly
Figma Community
🔥 وقتی ایده نداری، لازم نیست از صفر شروع کنی؛ اول خوب ببین!
Dribbble
Behance
Awwwards
Mobbin
Land-book
Lapa Ninja
Refero
UI8
Godly
Figma Community
🔥 وقتی ایده نداری، لازم نیست از صفر شروع کنی؛ اول خوب ببین!
👏2👍1
۱۰ ترفند CSS که ارزش یاد گرفتن دارن
📌 این پست رو ذخیره کن؛ بعضیاشون واقعاً تو پروژه نجاتت میدن.
clamp() → سایز Responsiveaspect-ratio → حفظ نسبت تصویر:has() → انتخاب بر اساس فرزندgap → فاصله بین عناصرminmax() → Grid حرفهایobject-fit → کنترل تصویرscroll-behavior → اسکرول نرمbackdrop-filter → افکت شیشهایaccent-color → تغییر رنگ کنترلهاscrollbar → شخصیسازی اسکرول📌 این پست رو ذخیره کن؛ بعضیاشون واقعاً تو پروژه نجاتت میدن.
❤4
🔥 ۱۰ پکیج CSS پرطرفدار در npm
اگه Front-End کاری، این پکیجها رو حداقل یکبار ببین 👇
Tailwind CSS → استایلدهی سریع و مدرن
Bootstrap → کامپوننتهای آماده و معروف
Sass → نوشتن CSS حرفهایتر
styled-components → استایلدهی در React
Emotion → CSS-in-JS سریع و انعطافپذیر
Animate.css → انیمیشنهای آماده
AOS → انیمیشن هنگام اسکرول
Bulma → فریمورک CSS سبک
UIkit → کامپوننتهای آماده UI
PostCSS → پردازش و بهینهسازی CSS
📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
اگه Front-End کاری، این پکیجها رو حداقل یکبار ببین 👇
Tailwind CSS → استایلدهی سریع و مدرن
Bootstrap → کامپوننتهای آماده و معروف
Sass → نوشتن CSS حرفهایتر
styled-components → استایلدهی در React
Emotion → CSS-in-JS سریع و انعطافپذیر
Animate.css → انیمیشنهای آماده
AOS → انیمیشن هنگام اسکرول
Bulma → فریمورک CSS سبک
UIkit → کامپوننتهای آماده UI
PostCSS → پردازش و بهینهسازی CSS
📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
❤3❤🔥1🔥1
نقشه_راه_فرانت_اند_کدلاینز_لینک_دار.pdf
102.7 KB
🚀 نقشه راه جامع برنامه نویسی فرانتاند؛ از صفر تا بازار کار
اگه تازه میخوای برنامهنویسی فرانتاند رو شروع کنی، احتمالاً یکی از بزرگترین سؤالهات اینه:
از کجا شروع کنم و دقیقاً به چه ترتیبی جلو برم؟ 🤔
چه پروژههایی بسازم؟
کجای مسیر رو یاد بگیرم؟
و اصلاً از کجا بفهمم آماده بازار کار شدم؟
برای همین یه PDF جامع و رایگان نقشه راه فرانتاند آماده کردم که مسیر رو
مرحلهبهمرحله برات مشخص میکنه. 👇
📎 فایل PDF رو بالا همین پست گذاشتم.
اگه دوست یا همکلاسیای داری که تازه میخواد فرانتاند رو شروع کنه، این فایل رو براش بفرست. شاید کلی از سردرگمی اول مسیرش کم کنه. ❤️
اگه تازه میخوای برنامهنویسی فرانتاند رو شروع کنی، احتمالاً یکی از بزرگترین سؤالهات اینه:
از کجا شروع کنم و دقیقاً به چه ترتیبی جلو برم؟ 🤔
چه پروژههایی بسازم؟
کجای مسیر رو یاد بگیرم؟
و اصلاً از کجا بفهمم آماده بازار کار شدم؟
برای همین یه PDF جامع و رایگان نقشه راه فرانتاند آماده کردم که مسیر رو
مرحلهبهمرحله برات مشخص میکنه. 👇
📎 فایل PDF رو بالا همین پست گذاشتم.
اگه دوست یا همکلاسیای داری که تازه میخواد فرانتاند رو شروع کنه، این فایل رو براش بفرست. شاید کلی از سردرگمی اول مسیرش کم کنه. ❤️
❤6💯1
میخوای ببینی یه آرایه واقعاً Array هست
یا نه؟ بهجای typeof از این استفاده کن:
یا نه؟ بهجای typeof از این استفاده کن:
Array.isArray(value)
Array.isArray([1, 2, 3]) true
❤3🔥1
😳 میدونستی سایتت میتونه بدون JavaScript تاریک بشه؟
فقط اینو بذار توی HTML:
کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
فقط اینو بذار توی HTML:
<meta name="color-scheme"
content="dark light">
کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
❤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