۶ سایت رایگان برای ساخت 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
🌐 ۷ سایت برای پیدا کردن API و دیتای آماده برای پروژه:
Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آبوهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال
🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.
📌 Save
کن؛ برای پروژه بعدی به کارت میاد.
Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آبوهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال
🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.
📌 Save
کن؛ برای پروژه بعدی به کارت میاد.
❤3💯1
👀 یه قابلیت GitHub که خیلیها ازش استفاده نمیکنن:
برو داخل یک Repository و کلید:
.
رو بزن.
GitHub
پروژه رو داخل یک محیط VS Code تحت وب باز میکنه. 😮
بدون اینکه پروژه رو روی سیستم Clone کنی، میتونی کدها رو سریع بررسی کنی.
📌 دفعه بعد که خواستی کد یک Repository رو نگاه کنی، امتحانش کن.
#GitHub #VSCode #برنامه_نویسی #Developer #WebDevelopment #کدنویسی
برو داخل یک Repository و کلید:
.
رو بزن.
GitHub
پروژه رو داخل یک محیط VS Code تحت وب باز میکنه. 😮
بدون اینکه پروژه رو روی سیستم Clone کنی، میتونی کدها رو سریع بررسی کنی.
📌 دفعه بعد که خواستی کد یک Repository رو نگاه کنی، امتحانش کن.
#GitHub #VSCode #برنامه_نویسی #Developer #WebDevelopment #کدنویسی
❤3👏1
🚨 ۱۰ سایت مخفی که کلی وقت برنامهنویسها رو نجات میده!
اگه برنامهنویسی میکنی، این سایتها رو یه گوشه ذخیره کن؛ یه روزی حسابی به کارت میان 👇
🧠 Stack Overflow → وقتی به یه خطای عجیب میخوری، احتمالاً جوابش اینجاست.
📚 DevDocs → مستندات چندین تکنولوژی رو یکجا داشته باش.
🔍 Regex101 → ساخت و تست Regex بدون دردسر.
🎯 Frontend Mentor → تمرین پروژههای واقعی فرانتاند.
🖼️ Unsplash → عکسهای حرفهای رایگان برای پروژهها.
⚡ TinyPNG → حجم تصاویر رو کم کن و سرعت سایتت رو بالا ببر.
🎨 CSS Tricks → کلی ترفند خفن برای CSS.
🧪 JSFiddle → کدت رو سریع تست کن.
📦 Bundlephobia → قبل از نصب پکیجها حجمشون رو بررسی کن.
🚀 Lighthouse → سرعت، سئو و کیفیت سایتت رو بررسی کن.
📌 خیلی از برنامهنویسها این ابزارها رو دیر پیدا میکنن...
تو ذخیرهش کن که موقع پروژه دنبال ابزار نگردی. 🔥
.
اگه برنامهنویسی میکنی، این سایتها رو یه گوشه ذخیره کن؛ یه روزی حسابی به کارت میان 👇
🧠 Stack Overflow → وقتی به یه خطای عجیب میخوری، احتمالاً جوابش اینجاست.
📚 DevDocs → مستندات چندین تکنولوژی رو یکجا داشته باش.
🔍 Regex101 → ساخت و تست Regex بدون دردسر.
🎯 Frontend Mentor → تمرین پروژههای واقعی فرانتاند.
🖼️ Unsplash → عکسهای حرفهای رایگان برای پروژهها.
⚡ TinyPNG → حجم تصاویر رو کم کن و سرعت سایتت رو بالا ببر.
🎨 CSS Tricks → کلی ترفند خفن برای CSS.
🧪 JSFiddle → کدت رو سریع تست کن.
📦 Bundlephobia → قبل از نصب پکیجها حجمشون رو بررسی کن.
🚀 Lighthouse → سرعت، سئو و کیفیت سایتت رو بررسی کن.
📌 خیلی از برنامهنویسها این ابزارها رو دیر پیدا میکنن...
تو ذخیرهش کن که موقع پروژه دنبال ابزار نگردی. 🔥
.
کدلاینز
کدلاینز | آموزش فرانت اند پروژه محور از صفر تا استخدام
آموزش فرانت اند از صفر تا استخدام: دورههای پروژه محور ری اکت (React)، جاوا اسکریپت (JavaScript)، HTML و CSS و گیت و گیت هاب — با دسترسی مادامالعمر و پشتیبانی واقعی.
❤2🔥1
🚀 ترفند ساده برای سریعتر کردن سایت:
اگه عکسهای زیادی توی صفحه داری، همهشون رو از اول لود نکن!
از این استفاده کن:
🔹 عکسهایی که پایین صفحه هستن، لازم نیست همون اول دانلود بشن.
نتیجه؟
⚡️ درخواست کمتر در شروع صفحه
⚡️ لود اولیه سریعتر
⚡️ تجربه بهتر کاربر
📌 این ترفند کوچیک رو Save کن؛ توی پروژه واقعی به کارت میاد.
اگه عکسهای زیادی توی صفحه داری، همهشون رو از اول لود نکن!
از این استفاده کن:
<img src="image.webp" loading="lazy" alt="...">
🔹 عکسهایی که پایین صفحه هستن، لازم نیست همون اول دانلود بشن.
نتیجه؟
⚡️ درخواست کمتر در شروع صفحه
⚡️ لود اولیه سریعتر
⚡️ تجربه بهتر کاربر
📌 این ترفند کوچیک رو Save کن؛ توی پروژه واقعی به کارت میاد.
❤2🔥1
⚡️ Arrow Function
به جای اینکه اینجوری بنویسی:
میتونی خیلی خلاصهتر بنویسی:
هم کد کوتاهتره، هم خواناتر.
📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمیگیره و توی بحث
ولی برای اکثر کارهای روزمره، انتخاب فوقالعادهایه.
#JavaScript #Frontend
به جای اینکه اینجوری بنویسی:
function sum(a, b) {
return a + b;
}میتونی خیلی خلاصهتر بنویسی:
const sum = (a, b) => a + b;
هم کد کوتاهتره، هم خواناتر.
📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمیگیره و توی بحث
this رفتار متفاوتی داره.ولی برای اکثر کارهای روزمره، انتخاب فوقالعادهایه.
#JavaScript #Frontend
❤5
وقتی میخوای چیزی رو از یک 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👏1
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:
❌ Git
فقط
📌 Save
کن؛ برای کار تیمی لازمت میشه.
clone → گرفتن پروژه branch → ساخت شاخه checkout → جابهجایی add → آماده کردن تغییرات commit → ثبت تغییرات pull → گرفتن تغییرات push → فرستادن تغییرات merge → ترکیب Branchها❌ Git
فقط
push و pull نیست!📌 Save
کن؛ برای کار تیمی لازمت میشه.
❤4🔥1
for (var i = 0; i < 3; i++) { setTimeout(() => console.log("Hello"), 0); }💻 اولین قانون برنامهنویسی: از ارورها نترس! 😄
اگر برنامهنویسی میکنی، دیر یا زود با این صحنه روبهرو میشی:
🔴 Error!
اما یه نکته مهم رو یادت باشه:
❌ ارور یعنی شکست خوردی؟ نه!
✅ ارور یعنی کامپیوتر داره بهت میگه کجای کارت نیاز به بررسی داره.
هر برنامهنویسی، حتی حرفهایترینها، هر روز با خطا و باگ سروکله میزنن.
تفاوت یک برنامهنویس مبتدی و حرفهای این نیست که یکی ارور میبینه و دیگری نه؛
🔥 تفاوتشون اینه که برنامهنویس حرفهای بلد شده ارور رو بخونه، علتش رو پیدا کنه و حلش کنه.
پس دفعه بعد که با یک ارور روبهرو شدی، فرار نکن! 😎
📌 ارور دشمن تو نیست؛ یکی از بهترین معلمهای توئه.
اگر برنامهنویسی میکنی، دیر یا زود با این صحنه روبهرو میشی:
🔴 Error!
اما یه نکته مهم رو یادت باشه:
❌ ارور یعنی شکست خوردی؟ نه!
✅ ارور یعنی کامپیوتر داره بهت میگه کجای کارت نیاز به بررسی داره.
هر برنامهنویسی، حتی حرفهایترینها، هر روز با خطا و باگ سروکله میزنن.
تفاوت یک برنامهنویس مبتدی و حرفهای این نیست که یکی ارور میبینه و دیگری نه؛
🔥 تفاوتشون اینه که برنامهنویس حرفهای بلد شده ارور رو بخونه، علتش رو پیدا کنه و حلش کنه.
پس دفعه بعد که با یک ارور روبهرو شدی، فرار نکن! 😎
📌 ارور دشمن تو نیست؛ یکی از بهترین معلمهای توئه.
❤4🔥1
آموزش برنامه نویسی فرانت اند
بچهها، یه سری تبلیغات خودِ تلگرام داخل کانال میذاره. اینا همشون کلاهبرداریه، حواستون باشه. در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
بچهها، یه سری تبلیغات خودِ تلگرام داخل کانال میذاره.
اینا کلاً کلاهبرداریه، حواستون باشه.
در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
اینا کلاً کلاهبرداریه، حواستون باشه.
در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
❤2🔥1
🔥 ۱۰ پکیج 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
📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
❤4
🚨 ۵ چیزی که هر 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 #طراحی_رابط_کاربری
❤5
💼 یه پروژه معمولی داری و میخوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟
این Prompt رو امتحان کن:
این Prompt رو امتحان کن:
Act as a Senior Front-End Engineer and a Technical Recruiter.
I will describe my current project.
Analyze it and suggest features that would make the project demonstrate real-world engineering skills.
Prioritize features that demonstrate:
- Complex state management
- Authentication and authorization
- API integration
- Error handling
- Performance optimization
- Responsive design
- Accessibility
- Testing
- Real-world business logic
Avoid generic features that only make the project look bigger.
For each feature, explain what skill it demonstrates and why a recruiter would care.
Project:
[DESCRIBE PROJECT]
🔥 بهجای اینکه پروژهات فقط «قشنگ» باشه، کاری کن مهارتت رو ثابت کنه.❤4