عادت عجیبتون موقع کد زدن؟
Channel | Group | YouTube

🎊این شما و این Anime.js v4

🔰از محبوب‌ترین کتابخونه‌های انیمیشن جاوااسکریپت، anime.js حالا به نسخه ۴ رسیده!

🔰اگه دنبال انیمیشن‌های جذابی برای پروژه هات، این نسخه برا توعه!😎🙂‍↔️

✅جدید و ماژولارAPI
✅انیمیشن‌های متصل به اسکرول
✅امکان درَگ کردن المان‌ها
✅ریسپانسیو و انعطاف‌پذیر
✅انیمیشن‌های افزایشی
✅پشتیبانی از WAAPI



🔗 سایت جدید:animejs.com

#animation #frontend

Channel | Group | YouTube

🔰بهترین کتابخانه‌های رایگان جاوااسکریپت برای نمایش PDF در وب اپلیکیشن‌ها:

1️⃣کتابخانه PDF.js (Mozilla)

سبک، سریع و مستقیم توی مرورگر اجرا می‌شه. با Vanilla JS، React، Vue و Angular سازگاره.

🔗 [GitHub]

2️⃣کتابخانه PDF-LIB

قابلیت ایجاد، تغییر و نمایش PDF داره. سمت کاربر (Client-side) اجرا می‌شه و برای ویرایش داینامیک عالیه.

🔗 [GitHub]

3️⃣کتابخانه React-PDF

مخصوص پروژه‌های React. مبتنی بر PDF.js هست و به‌عنوان یک کامپوننت React استفاده می‌شه. از زوم، جابه‌جایی بین صفحات و کلی ویژگی دیگه پشتیبانی می‌کنه.

🔗 [GitHub]

4️⃣کتابخانه ng2-pdf-viewer

بهترین گزینه برای Angular. قابلیت زوم، چرخش و ویژگی‌های دیگه داره و مبتنی بر PDF.js هست.

🔗 [GitHub]


✅گزینه عمومی و قدرتمند می‌خوای❓خب PDF.js عالیه!👌

#frontend #js #pdf

Channel | Group | YouTube

چی گفتی ؟یه بار دیگه بگو؟

پاشو بریم فرانت اند دولوپر بشیم حاجی🤝😌

بک اند مکند سخته ولش کن انقدر فرانت اسونه که همه اش یک دستور ساده بیشتر نداره 😎😃

color:red;
margin:auto;

😂🥹💔🤣😭


Channel | Group | YouTube

🌟 چطور یه پورتفولیو خفن برا خودمون بسازیم؟
یه سایت پورتفولیو که فقط یه رزومه آنلاین نیست، بلکه ویترین مهارت‌ها، تجربه‌ها و پروژه‌های توئه! پس باید جذاب، مرتب و حرفه‌ای باشه.

✅اطلاعات شخصی
-یه معرفی کوتاه و صمیمی از خودت
- سوابق تحصیلی و کاری
- یه عکس خوب یا آواتار جذاب

✅مهارت‌ها
-لیستی از تکنولوژی‌هایی که بلدی، مثل HTML، CSS، JavaScript، React، Vue و غیره
- سطح تخصصت رو مشخص کن (مبتدی، متوسط، حرفه‌ای)
- اگر مهارت‌های مکملی مثل طراحی UX/UI داری، حتماً اضافه کن

✅پروژه‌ها
-بهترین کارهات رو نمایش بده با توضیح مختصر
- تکنولوژی‌های استفاده شده و نقش خودت رو بنویس
- امکان فیلتر کردن پروژه‌ها رو اضافه کن

✅اطلاعات تماس
-لینک ایمیل، تلگرام یا راه‌های ارتباطی
- لینک شبکه‌های اجتماعی مثل GitHub، LinkedIn و توییتر

✅ نکات مهم برای یه پورتفولیوی حرفه‌ای -طراحی سایت باید تمیز، زیبا و کاربرپسند باشه
- ریسپانسیو طراحی کن تا روی موبایل عالی دیده بشه
- از تصاویر باکیفیت و واضح استفاده کن
- مرتباً سایتت رو آپدیت کن تا همیشه بروز باشه

📌 نمونه‌ها:
1⃣ https://sarkar.fr
2⃣ https://henryheffernan.com

#Portfolio #resume

Channel | Group | YouTube

📊 دوست جدیدت برای ساخت نمودارهای جذاب و تعاملی! ApexCharts.js

📌برای نمایش داده‌ها، ApexCharts.js دقیقاً همون چیزیه که نیاز داری! این کتابخانه جاوا اسکریپت بهت کمک می‌کنه بدون دردسر، نمودارهای شیک و داینامیک بسازی.

🔹 چرا ApexCharts رو امتحان کنیم؟

✅ انواع نمودارهای متنوع مثل خطی، ستونی، دایره‌ای، پراکندگی و…
✅ طراحی واکنش‌گرا، بدون مشکل در موبایل و دسکتاپ
✅ تنظیمات گسترده برای شخصی‌سازی نمودارها
✅ امکان ترکیب چندین نمودار برای نمایش بهتر داده‌ها
✅ کاملاً رایگان و متن‌باز – راحت ازش استفاده کن!

🔹 چند ابزار مکمل که تجربه کار با نمودارها رو بهتر می‌کنن:

✨ یه گزینه عالی برای نمودارهای سبک و سریع Chart.js
✨ برای نمودارهای پیچیده و سفارشی‌سازی‌شده D3.js
✨ ابزار قدرتمند با قابلیت‌های متنوع Google Charts

🔗آدرس وب سایت
تجربه و پیشنهاد شما چیه؟🤔
#charts #Frontend
#JavaScript_library

Channel | Group | YouTube

💠کتابخانه Headless UI برای React رو یک سر بهش بزنید 🎉✨

ویژگی‌های هیجان‌انگیز و کاربردی:

🏗 موقعیت‌یابی داخلی انکر: حالا با ادغام Floating UI، دیگه نیازی به تنظیمات دستی نیست!

✅ کامپوننت جدید چک‌باکس: یه چک‌باکس جدید و حسابی کارآمد به مجموعه اضافه شده!

📑 کامپوننت‌های فرم HTML: حالا می‌تونی فرم‌های HTML رو مستقیم و راحت‌تر استفاده کنی.

👀 بهبود تشخیص حالات hover، focus و active: کلی روی این قابلیت کار شده تا عملکردش بهتر و دقیق‌تر باشه.

📜 مجازی‌سازی لیست Combobox: لیست‌های Combobox حالا سریع‌تر و بهینه‌تر اجرا می‌شن.

🌐 وب‌سایت جدید و مستندات ارتقا‌یافته: وب‌سایت جدید کلی اطلاعات مفید داره و مستنداتش حسابی کامل‌تر شده!

📌 دوست داری بیشتر بدونی؟ این هم آدرس سایت 😉

#UI #React #Frontend

Channel | Group | YouTube

مجتبی قطعش کن!😂

نظرتونه؟🤣🤣😂😂

Channel | Group |YouTube

🧑‍💻 #جویای_کار

پیمان‌احمدی هستم , اطراف 3 ساله در مسیر فرانت‌اند هستم, تمرکز و استک من بر روی React.js و Next.js و کتابخانه وابسته بر اینها هستش. ⚛️

🔍 خوشحال میشم اگر پوزیشینی داشتید و بتونیم همکاری داشته باشیم. 🙏

ID: @This_Peyman

📱اول موبایل، بعد بقیه!
📱 Mobile FIRST
✅بهترین افزونه کروم برای تست ریسپانسیو بودن سایتت رو معرفی می‌کنم!

📌این افزونه ۵۲ مدل دستگاه و گوشی موبایل مختلف رو برات شبیه‌سازی می‌کنه، از جمله:

🔰گوشی‌های اندروید
🔰گوشی‌های اپل و ios
🔰تبلت‌ها
🔰حتی بعضی دستگاه‌های خاص!

📱به نصب اش می‌ارزه😉!امتحان کنید و شبیه سازی کنید😎😌

🌐آدرس اکستنشن: responsive testing tool

#responsive #Extention

Channel | Group | YouTube

💠Wind UI:
🔰مجموعه حرفه‌ای و دوست‌داشتنی از کامپوننت‌های Tailwind برای React و HTML هستش که طراحی‌های سریع‌تر و انعطاف‌پذیرتر رو امکان‌پذیر می‌کنه.💥⚡️

🔰اگر به دنبال راهی هستی که بدون دردسر و با کمترین کدنویسی یک رابط کاربری مدرن و جذاب بسازی، Wind UI دقیقاً همون‌که که لازمش داری!🚀

💢این مجموعه دارای کامپوننت‌های آماده‌ای است که به راحتی می‌توانی آن‌ها را شخصی‌سازی کنی و در پروژه‌هایت استفاده کنی.پس دیگه نیاز نیست ساعت‌ها وقت صرف طراحی و استایل‌دهی کنی

📌همه چیز آماده است و فقط کافی‌ست با چند تغییر کوچک، آن را مطابق با نیازت تنظیم کنی🤝😎

🧰اگر هنوز با Wind UI آشنا نشده‌ای، پیشنهاد می‌کنم حتماً ی برسی داشته باش. قطعاً از سرعت و راحتی کار باهاش لذت می‌بری! 😊


🔗🌐لینک سایت: Wind Ui


#WindUI #Frontend
#DevTools #UIUX

Channel | Group | YouTube

🔥⚡️منوی ناوبری عمودی متحرک – سورس+دمو 🎥

🔰یک منوی ناوبری عمودی متحرک می‌تونه تجربه‌ای روان و جذاب برای کاربران ایجاد کنه!
در این ویدیو، نمونه‌ای از این منوها را می‌بینید و اگر دوست داشتید، سورس آن را از CodePen دریافت کنید.

💻ویژگی‌ها:

✅ طراحی مدرن
✅ جلوه‌های انیمیشنی جذاب
✅ پیاده‌سازی با HTML, CSS, JavaScript

💠Source: CodePen

#NavigationMenu
#CSSAnimations
#CodePen

Channel | Group | YouTube

کمی آرامش..

Channel | Group | YouTube

یوزر استوری در UI/UX 🎭✨

🔗یوزر استوری‌ها داستان‌های کوتاهی هستند که به زبان ساده توضیح می‌دهند کاربر چه نیازی دارد و چگونه باید به آن پاسخ داده شود. این‌ها پایه و اساس طراحی تجربه کاربری (UX) محسوب می‌شوند! 👌

🔗چرا یوزر استوری مهم است؟

✅ تمرکز بر نیازهای کاربر 🎯
✅ شفاف‌سازی فرآیند طراحی 📝
✅ افزایش تعامل تیم‌های طراحی و توسعه 🤝

🔗ساختار یک یوزر استوری:

1⃣ نوع کاربر: کیست و چه ویژگی‌هایی دارد؟👤
2⃣ نیاز یا هدف:چه مشکلی دارد و چه چیزی می‌خواهد؟🎯
3⃣ راه‌حل پیشنهادی: سیستم چگونه به این نیاز پاسخ می‌دهد؟✨

💠مثال:
به عنوان یک کاربر جدید، می‌خواهم امکان ثبت‌نام سریع و آسان داشته باشم تا بدون پیچیدگی از خدمات سایت استفاده کنم.

🔗یوزر استوری VS یوزر فلو:

🔹 یوزر استوری، یک روایت ساده از نیاز کاربر است
🔹 یوزر فلو، مسیر و فرآیند گام‌به‌گام تعامل کاربر با سیستم را نشان می‌دهد

🔗با یوزر استوری‌های خوب، تجربه کاربری روان‌تر و دلپذیرتر می‌شود! 😍🖌


#ProductDesign 🏗 #UIUX 🌐
#UserStory 📖 #UXDesign 🎨

Channel | Group | YouTube

🔰 وایرفریم چیه؟ و چه اهمیتی داره؟🤔👇

✅ وایرفریم، یک طرح اولیه از صفحه یا محصول دیجیتالی است که ساختار کلی و نحوه چینش عناصر را مشخص می‌کند، بدون تمرکز بر جزئیات بصری. این مرحله از طراحی، مسیر پروژه را روشن‌تر کرده و خطرات ناشی از تغییرات پرهزینه را کاهش می‌دهد.

❌ اگر بدون وایرفریم، مستقیم وارد طراحی UI شویم:

⛓‍💥ممکن است در مراحل بعدی، متوجه مشکلات ساختاری شویم که بازنگری آن‌ها، هزینه و زمان زیادی می‌طلبد.

🔗 مزیت طراحی وایرفریم:

با داشتن یک وایرفریم قابل تست، می‌توان پیش از صرف هزینه‌های زیاد، مشکلات را شناسایی کرد و تجربه کاربری را بهبود داد. همچنین، این روش، امکان دریافت بازخوردهای سریع‌تر از کاربران و اعضای تیم را فراهم می‌کند.

🖼 تصویر منتشر شده از یک وایرفریم رو ببینید! چطور به بهبود پروژه کمک کرده است؟ دیزاینرها و متخصصان UI/UX نظرتان چیست؟ 🤔😉

#UI_Design #DesignProcess
#Wireframe #Prototyping
#UserTesting #ProductDesign
#RiskManagement #UX

Channel | Group | YouTube

تبدیل دیزاین به وبسایت بدون یه خط کد!
- با فیچر figma Sites

مراسم Figma Config همین دیشب برگزار شدو باید بگم که چقدر همه‌ چی خفن بود! از فیچرای جدید گرفته تا مسیری که Figma داره پیش می‌ره...

کلی فیچر از گرید گرفته تا Ai و .... معرفی شد، اما چیزی که واقعاً منو ذوق‌زده کرد فیچر Figma Sites عه
یعنی دیگه لازم نیست فقط توی فایل طراحی بمونیم! حالا می‌تونیم مستقیم صفحات سایت واقعی بسازیم، اونم فقط با دیزاین کردنشون🔥

حتی خود فیگما میاد رسپانسیوشون میکنه!!!

با همون دقت طراحی و بدون دردسر کد زدن مستقیم از دیزاین به وبسایت ⚡️

واسه منی که قبل فرانت اند دولوپر بودم این واقعا مثل معجزس😑🔥

هنوز امتحانش نکردم ولی اگه که درست کار کنه میتونه یه Game Changer واقعی باشه، مخصوصاً برای ما طراحایی که همیشه دنبال راه‌های برای بهتر نشون دادن ایده‌هامون هستیم😎
Channel | Group | YouTube

جویای کار - توسعه دهنده فرانت اند
ریموت یا پاره وقت ( مشهد )
@mahdiarDev

⭐️ رجیستری های NPM: عمومی، سازمانی و خصوصی

رجیستری‌های NPM چیه، چه انواعی داره و هر کدوم کجا به کار میاد⁉️

1️⃣ رجیستری عمومی NPM

رجیستری عمومی NPM یه مخزن بزرگ برای پکیج‌های جاوااسکریپته. هر توسعه‌دهنده‌ای می‌تونه پکیجشو اینجا آپلود کنه یا از پکیج‌های بقیه استفاده کنه.

ویژگی‌ها:

دسترسی آزاد: همه می‌تونن پکیج‌ها رو دانلود کنن.
متن‌باز بودن: خیلی از پکیج‌ها اوپن‌سورس هستن.
استفاده راحت: با دستورات ساده مثل npm install کار می‌کنه.

npm install lodash

این دستور پکیج lodash رو از رجیستری عمومی می‌گیره و نصب می‌کنه.



2️⃣ رجیستری سازمانی (عمومی یا خصوصی):

رجیستری سازمانی برای تیم‌ها یا شرکت‌هاییه که می‌خوان پکیج‌هاشونو تو یه فضای مدیریت‌شده نگه دارن. این رجیستری می‌تونه عمومی (برای اشتراک با بقیه) یا خصوصی (فقط برای اعضای تیم) باشه.

رجیستری سازمانی عمومی:

برای وقتیه که می‌خوای پکیج‌های سازمانت رو با بقیه به اشتراک بذاری.
مثلا: پکیج‌های @mycompany/tool تو رجیستری عمومی، ولی فقط تیم شما روش کار می‌کنه.

رجیستری سازمانی خصوصی:

برای پکیج‌های داخلی و حساس که فقط اعضای تیم باید ببینن.
مناسب برای کدهای اختصاصی.

چطور تنظیمش کنیم؟

باید scope سازمان رو مشخص کنید:

npm config set @mycompany:registry https://registry.npmjs.org/
npm login

با این کار، پکیج‌هاتون تو یه فضای جدا ذخیره می‌شن.



3️⃣ رجیستری خصوصی:

رجیستری خصوصی یه سرور اختصاصیه که خودتون راه‌اندازی می‌کنید. برای وقتیه که می‌خواید کنترل کامل روی پکیج‌ها داشته باشید. ابزارهایی مثل Verdaccio، Nexus یا JFrog Artifactory برای این کار عالی‌ان.

ویژگی ها:

امنیت بالا: کدهای حساس فقط دست خودتونه.
کنترل کامل: خودتون تصمیم می‌گیرید کی به چی دسترسی داره.
استقلال: دیگه به رجیستری عمومی وابسته نیستید.

4️⃣ نکات نهایی:

اگه پروژه‌تون متن‌بازه، رجیستری عمومی NPM بهترین گزینس.
برای تیم‌های بزرگ یا پروژه‌های حساس، رجیستری سازمانی یا خصوصی مناسب‌تره.


Channel | Group | YouTube

کرسر ایز آن د بیت 👌

متوجه این موضوع شدم که وقتی بصورت TDD (نوشتن تست قبل از کد اصلی برنامه) کد میزنیم، باعث عملکرد بی‌نظیره auto completion کد ادیتور Cursor میشه

کیا از Cursor و Ai code editor ها استفاده میکنن و تجربتون در استفاده از این ابزار ها چطور بوده؟!

Channel | Group | YouTube

🔗سلام دوستان وقت به خیر محمدجوادرضائی هستم در حوزه فرانت اند(react.js)فعالیت میکنم.

🔰علاقه مند به یادگیری مباحث حوزه وب با بیش از 3سال تجربه در دنیای طراحی وب💻

📌خوشحال میشم که بتونم در یک تیم خلاق و پر انگیزه کار کنم و خودم رو ارتقا بدم


💠GitHub:https://github.com/mjr0924
🌐Portfolio:https://geekdeveloper.ir
🆔:@mjr0924
#جویای_کار