🤯 یک اشتباه کوچیک در React
این کد رو ببین:
❌ نه!
اینجا
✅ معمولاً باید بنویسی:
این کد رو ببین:
<button onClick={handleClick()}>
Click
</button>
به نظرت درست نوشته شده؟❌ نه!
اینجا
handleClick همون لحظه Render اجرا میشه.✅ معمولاً باید بنویسی:
<button onClick={handleClick}>
Click
</button>
📌 یک جفت () میتونه کل رفتار Component رو عوض کنه.❤1
Merge Conflict
یعنی چی؟
تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.
حالا Git میگه:
CONFLICT
خوردی
یعنی Git نمیتونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.
باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درستتره و بعد دوباره Commit کنی.
📌 Merge Conflict
چیز عجیبی نیست؛
بخشی از کار روزمره تیمهای برنامهنویسیه.
#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
یعنی چی؟
تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.
حالا Git میگه:
CONFLICT
خوردی
یعنی Git نمیتونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.
باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درستتره و بعد دوباره Commit کنی.
📌 Merge Conflict
چیز عجیبی نیست؛
بخشی از کار روزمره تیمهای برنامهنویسیه.
#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
👍1
📱 Mobile First
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤3
😳 میدونستی سایتت میتونه بدون JavaScript تاریک بشه؟
فقط اینو بذار توی HTML:
کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
فقط اینو بذار توی HTML:
<meta name="color-scheme"
content="dark light">
حالا مرورگر میفهمه سایتت از Dark Mode پشتیبانی میکنه و بعضی المانهای پیشفرضش رو خودش با تم سیستم هماهنگ میکنه. 🌙کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
👏1
«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»
این کارها رو میکردم:
ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه
نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.
هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.
#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
این کارها رو میکردم:
ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه
نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.
هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.
#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
❤1🔥1
الان توی فرانتاند کجایی؟
Anonymous Poll
27%
هنوز شروع نکردم
34%
HTML/CSS بلدم
19%
JavaScript گیر کردم
14%
React میخونم
7%
بلدم ولی کار پیدا نمیکنم
⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:
📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
Ctrl + P → پیدا کردن فایل Ctrl + Shift + P → Command Palette Ctrl + D → انتخاب مشابه بعدی Alt + ↑ / ↓ → جابهجایی خط Shift + Alt + ↓ → کپی خط Ctrl + / → Comment Ctrl + B → باز/بسته کردن Sidebar Ctrl + Shift + F → جستجو در کل پروژه📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
🔥2
وقتی میخوای چیزی رو از یک Array پیدا کنی، لازم نیست همیشه
از
باشه برمیگردونه.
📌 این دوتا رو قاطی نکنی؛ توی پروژه زیاد باهاشون کار میکنی.
for بنویسی.از
find() استفاده کن:const users = [
{ id: 1, name: "Ali" },
{ id: 2, name: "Reza" }
];
const user = users.find(user => user.id === 2);
console.log(user);
خروجی:{ id: 2, name: "Reza" }
🧠 فرقش با filter() اینه:find() → اولین آیتمی که شرط رو داشته باشه برمیگردونه.
filter() → تمام آیتمهایی که شرط رو داشته باشن برمیگردونه.📌 این دوتا رو قاطی نکنی؛ توی پروژه زیاد باهاشون کار میکنی.
🔥1
🚀 ۱۰ سایت رایگان برای آنلاین کردن پروژههای برنامهنویسی 🔥
📌 ذخیره کن؛ بعداً بهشون نیاز پیدا میکنی
Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod
📤 برای یه برنامهنویس بفرست که هنوز پروژههاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
📌 ذخیره کن؛ بعداً بهشون نیاز پیدا میکنی
Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod
📤 برای یه برنامهنویس بفرست که هنوز پروژههاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
❤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 #طراحی_رابط_کاربری
❤3
⚡️ دستورهای مهم Git
• git init
• git clone
• git add
• git commit
• git push
• git pull
• git merge
• git rebase
• git stash
• git cherry-pick
• git init
• git clone
• git add
• git commit
• git push
• git pull
• git merge
• git rebase
• git stash
• git cherry-pick
🔥1
۱۰
Extension
کاربردی Chrome برای Developerها
React Developer Tools
Redux DevTools
JSON Viewer
Lighthouse
Wappalyzer
WhatFont
ColorZilla
CSS Viewer
EditThisCookie
VisBug
📌 لازم نیست مرورگرت رو با ۵۰ تا Extension پر کنی؛ فقط چیزهایی رو نصب کن که واقعاً در Workflowت استفاده میشن.
#Chrome #DevTools #Frontend #Developer #Programming
Extension
کاربردی Chrome برای Developerها
React Developer Tools
Redux DevTools
JSON Viewer
Lighthouse
Wappalyzer
WhatFont
ColorZilla
CSS Viewer
EditThisCookie
VisBug
📌 لازم نیست مرورگرت رو با ۵۰ تا Extension پر کنی؛ فقط چیزهایی رو نصب کن که واقعاً در Workflowت استفاده میشن.
#Chrome #DevTools #Frontend #Developer #Programming
🔥1
⚛️ قبل از شروع آموزش React اینا رو بلد باش.
نه در حد اینکه اسمشون رو شنیده باشی:
چون React قرار نیست JavaScript رو برات یاد بگیره.
اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیدهتر میکنه.
📌 این پست رو برای کسی بفرست که تازه میخواد React شروع کنه.
#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی
نه در حد اینکه اسمشون رو شنیده باشی:
DOMEventPromiseasync/awaitArray MethodsDestructuringModulesScopeClosureFetch APIچون React قرار نیست JavaScript رو برات یاد بگیره.
اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیدهتر میکنه.
📌 این پست رو برای کسی بفرست که تازه میخواد React شروع کنه.
#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی
❤2👏1
🤯 میدونستی؟
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
📌 نکته مصاحبه:
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
console.log(typeof [])
// "object"
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
Array.isArray([])
📌 نکته مصاحبه:
typeof نمیتواند Array را از Object تشخیص دهد.❤3
💻 ۷ جا برای تمرین واقعی Front-End:
🔥 Frontend Mentor
🔥 Codewell
🔥 DevChallenges
🔥 Frontend Practice
🔥 CSSBattle
🔥 JavaScript30
🔥 100 Days CSS
فقط Tutorial نبین.
یه طراحی بردار → خودت پیادهسازی کن → منتشرش کن.
هم تمرین میشه، هم نمونهکار.
🔥 Frontend Mentor
🔥 Codewell
🔥 DevChallenges
🔥 Frontend Practice
🔥 CSSBattle
🔥 JavaScript30
🔥 100 Days CSS
فقط Tutorial نبین.
یه طراحی بردار → خودت پیادهسازی کن → منتشرش کن.
هم تمرین میشه، هم نمونهکار.
❤1👍1
۶ سایت رایگان برای ساخت 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 #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
❤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.
⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:
📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
Ctrl + P → پیدا کردن فایل Ctrl + Shift + P → Command Palette Ctrl + D → انتخاب مشابه بعدی Alt + ↑ / ↓ → جابهجایی خط Shift + Alt + ↓ → کپی خط Ctrl + / → Comment Ctrl + B → باز/بسته کردن Sidebar Ctrl + Shift + F → جستجو در کل پروژه📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
❤1🔥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 #طراحی_رابط_کاربری
❤3🔥1
const arr = [1, 2, 3];
arr[10] = 99;
console.log(arr.length);
🔥2