Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی | برنامه نویسی وب
9.3K subscribers
643 photos
353 videos
88 files
793 links
اگر با جاوااسکریپت مشکل داری، این چنل مخصوص خودته 🤝

دوبله بهترین دوره های جاوااسکریپت و ریکت دنیا رایگان:
https://t.me/DeepDevs/2166

تبلیغات و تبادل نداریم

گروه اصلی برای پرسش و پاسخ:
@DeepDevsGpOriginal

گروه چت:
@InstaDevsGp
Download Telegram
#Out_Of_IDE
#Tools

⚠️دوستانی که دنبال کار میگردن بهتره که قبل از قبول کردن مصاحبه یه شرکتی یه سر به این سایت بزنن و تجربیات دیگران رو در مورد شرکتها بخونن و با علم کافی برن برای مصاحبه با یه شرکتی⚠️

https://tajrobe.wiki/

Channel | Group | YouTube
9❤‍🔥2🤯2
از کجا بدونیم هر سایتی از چه تکنولوژی هایی استفاده میکنه؟
افزونه wappalyzer ابزاری است که به شما کمک میکنه اطلاعات بسیار زیادی در رابطه با وبسایت ها به دست بیارید. با این ابزار میتونید سیستم محتوای وبسایت (وردپرس، جوملا و...) نوع زبان برنامه نویسی (جاوا، پی‌اچ‌پی و...) و موارد دیگه رو به دست بیارید.
این افزونه برای کروم و فایرفاکس در دسترس است.

🌐 https://www.wappalyzer.com

#Tools #extension

Channel | Group | YouTube
👍18🔥2
♨️ یک ویدیو پلیر تمام عیار!
توی html درسته ما video پلیر پیشفرضی داریم که کارمون رو راه میندازه ولی بعضی وقتا نیاز به پلیر حرفه‌ای، جذاب و کاربردی داریم.

پکیج plyr یه ویدیو پلیر خوب برای وب هستش که اکثر نیازهامون رو برطرف میکنه و قابلیت شخصی سازی بسیار زیادی داره.
💢 این پکیج از پرتکل های استریم مثل hls و قابلیت چند زبانی و کلی قابلیت خفن دیگه پشتیبانی میکنه.
برای ریکت و بقیه فریمورک ها هم پلاگین داره😍
برای مشاهده قابلیت ها و استفاده ازش میتونید به گیت‌هابش یه سر بزنید

https://github.com/sampotts/plyr

#reactjs #Tools

Channel | Group | YouTube
😎13👍32🔥2
#Tools

🤯خانوما و آقایون فرانت کار براتون یه ربات میخوام معرفی کنم که میتونید با استفاده ازش عکسهایی که میخوایین توی پروژه هاتون استفاده کنین رو بدین بهش و تقریبا بدون افت کیفیت با حجم کم تحویل بگیرین 😱

این ربات برای این کانال هست و اینکه میتونید درصد کیفیتش رو خودتون تعیین بکنید(کیفیت پیشنهادی ما 80 هست) و نسبت به کیفیت درخواستی حجمشو کم میکنه.

⚠️فقط حواستون باشه عکسهاتون رو بصورت فایل بهش بفرستین⚠️

🚦اگر هم مشکلی داشتین برید به قسمت راهنماش و اونجا بهتون یاد دادم🚦

https://t.me/ImageComp_bot

Channel | Group | YouTube
8🔥2❤‍🔥1
♨️ وب‌پک (Webpack) چیست؟ چرا باید ازش استفاده کنیم؟
فرض کنید یه اسکریپتی به پروژه اضافه کردید و توش از کتابخونه جی‌کوئری استفاده شده ولی چون اسکریپتتون رو بالا تر از ایمپورت جی‌کوئری ایمپورت کردید خطا گرفتید و کد اجرا نشده یا مرورگر کد جاوااسکریپت رو کش کرده و تغییراتی که توی کد دادید اعمال نمیشه.
تا حالا شده از یه قابلیت پیشرفته جاوااسکریپت بخواین استفاده کنید ولی نگران این هستین که همه مرورگر ها ساپورتش نکنن؟
حالا هرچی پروژه بزرگتر باشه مدیریت کردن اینجور مسائل هم سختتر میشه

💠 کار وب‌پک باندل (بسته‌بندی) و مدیریت کردن فایل های استایل، عکس، اسکریپت و فونت هستش یکی از مهمترین مزیت هاش پشتیبانی از پلاگین‌های مختلفه که کارهایی مثل مینیفای کردن یا تبدیل فایل های sass و less به css رو براتون انجام میده.

#reactjs #bundler #Tools

🌐 https://webpack.js.org

Channel | Group | YouTube
👍11🔥7
♨️ آیا کار کردن با webpack براتون سخته؟ راه حل مشکل شما Laravel-Mix اینجاست
ما توی پست قبلی فهمیدیم که Webpack چیه و به چه دردی میخوره ولی یکی از معایب وب‌پک کانفیگ نسبتا پیچیده و سختی کار با اون هست که شاید افراد مبتدی رو سردرگم و از خودش دور کنه.
برای کسایی که نمیخوان با کانفیگ پیچیده webpack برای پروژه بزرگ و کوچیکشون دست و پنجه نرم کنند Laravel-mix میتونه گزینه عالی باشه
این ابزار خودش از webpack استفاده میکنه ولی کانفیگ هاشو توی پس زمینه انجام داده و یه محیط و کانفیگ خیلی خیلی ساده و در عین حال کاربردی داره.
توصیه میکنم روی یکی از پروژه های آینده تون امتحانش کنید...👌

🌐 https://laravel-mix.com

#Tools

Channel | Group | YouTube
👍5
♨️ ری‌اکت کوئری (React Query) چیه و چرا باید ازش استفاده کنیم؟
یکی از قدرتمند ترین کتابخونه‌های React هست که به ما در زمینه Data-Fetching (دریافت اطلاعات از سرور) و state management (مدیریت استیت) کمک میکنه البته قابلیت های خیلی خفن دیگه ای مثل کش کردن اطلاعات یا بروزرسانی داده‌های سمت سرور رو هم داره.

💠 مزایای استفاده از React Query
- بهبود performance اپلیکیشن به دلیل کش کردن اطلاعات
- امکان مدیریت خطاها
- سازگاری با NextJs و تایپ اسکریپت
- بروزرسانی اطلاعات موجود در سرور در بکگراند
- استفاده آسان

یکی از اصلی ترین کارهای فرانت‌اند کارها همین data fetching هست و اگه برای اینکار از کتابخونه های حرفه‌ای مثل React query استفاده کنیم هم کارمون ساده تر میشه هم کد بهینه تر خواهد بود.

🔆 اگر شما هم تجربه‌ای در این زمینه دارید در گروه تلگرامی‌مون با ما در میان بذارید...

🌐 https://tanstack.com/query/latest

#reactjs #Tools

Channel | Group | YouTube
👍121🔥1
#Tools

21 ابزار کاربردی برای تمام ضمینه ها 💥💥

Channel | Group | YouTube
🤯5🔥3👍2
♨️ نقشه گنج برنامه‌نویسان
وبسایت roadmap یه ایده عالیه که اومده نقشه راه مباحث مختلف مثل فرانت‌اند، بک‌اند و devops و ... رو تو خودش جا داده و این لیست هر روز داره تکمیل تر میشه.
پس اگه شما هم میخواین وارد حوزه‌ای از برنامه‌نویسی بشید ولی نمیدونید از کجا باید شروع کنید و کجا برید این سایت بهترین راهنمای شما برای یافتن گنج خواهد بود.👌

🌐 https://roadmap.sh

#Tools #Out_Of_IDE

Channel | Group | YouTube
❤‍🔥11🕊3👍21🔥1
♨️ یه کتابخونه UI همه کاره
یکی از کارهایی که وقت فرانت‌کار ها رو میگیره طراحی کامپوننت هایی مثل Modal ها یا نوتیفیکیشن و امثالهم هستش. حالا راه حل این مشکل استفاده از یه کتابخونه UI هستش تا بتونیم از کامپوننت‌های آماده اون توی پروژه‌مون استفاده کنیم.
همونطور که میدونید کتابخونه های زیادی برای اینکار هست ولی میشه گفت معروف‌ترینش Ant Design هست که شاید بشناسیدش
این کتابخونه تقریبا همه کامپوننت‌های لازم برای طراحی وب رو در اختیار شما قرار میده از button بگیر تا message و input پس میتونید توی پنل‌های ادمین یا هر پروژه دیگه‌ای ازش استفاده کنید.
💠 میتونید تو آدرس زیر مثال‌هایی از کامپوننت‌های زیباش ببینید...👌
🔅 اگر شما هم کتابخونه UI خوبی میشناسید و ازش استفاده میکنید توی کامنت یا گروه بهمون بگید

🌐 https://ant.design/components/overview

#reactjs #nextjs #packages #Tools

Channel | Group | YouTube
❤‍🔥11👍42😡2🔥1
♨️ پکیج احراز هویت در Next js
یکی از مهمترین مسائل یک سایت بحث امنیت کاربران است اما گاها پیاده سازی روشی مطمئن و امن برای احراز هویت در Next js چالش برانگیز میشود. راه‌های زیادی برای طراحی این بخش وجود دارد که میتوان به صورتی دستی نیز اینکار را انجام داد ولی مستعد خطا و زمانبر خواهد بود.
ما در Next js میتوانیم از پکیج Next Auth استفاده کنیم که بسیاری از پیچیدگی‌های این مسیر مثل سشن ها یا ورود و خروج را سادتر کرده و با راه حل‌های مناسب و یکپارچه‌ای را در دسترس ما قرار میدهد.

🌐 https://next-auth.js.org

#reactjs #Tools #nextjs

Channel | Group | YouTube
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
#Tools

تو این وب سایت میتونید چلنج های برنامه نویسی رو حل کنید و یا از کورس های آموزشیش استفاده کنید.

تو این ویدیو بعضی از سایت ها هستن که شاید میخواسته ببینه با چه زبانی نوشته شدن 😎

https://coddy.tech/

Channel | Group | YouTube
❤‍🔥32🔥2🤣21
♨️ قبول دارین با آیکون‌های درست و مناسب اپ‌ها زیباتر میشن؟ 5200 تا آیکون جذاب!
اگه توی وب‌اپلیکیشن‌ هاتون میخواین از آیکون‌های شکیل و جذاب استفاده کنید میتونید به سایت tabler icons مراجعه کنید که هم پکیج Reactjs داره هم میتونید آیکون ها رو از سایتش با فرمت PNG یا SVG دانلودش کنید. سرچ خیلی خوب و تقریبا هوشمندی داره و با سرچ کلمات کلیدی میتونید آیکون مورد نظر رو پیدا کنید.
🔅 شما از چه پکیج یا سایتی برای آیکون هاتون استفاده میکنید؟ تجربه‌اتون رو با ما در کامنت‌ها یا گروه به اشتراک بذارید

🌐 https://tabler.io/icons

#reactjs #packages #Tools

Channel | Group | YouTube
👌4👍1
#Tools

🤯خانوما و آقایون فرانت کار براتون یه ربات میخوام معرفی کنم که میتونید با استفاده ازش عکسهایی که میخوایین توی پروژه هاتون استفاده کنین رو بدین بهش و تقریبا بدون افت کیفیت با حجم کم تحویل بگیرین 😱

این ربات برای این کانال هست و اینکه میتونید درصد کیفیتش رو خودتون تعیین بکنید(کیفیت پیشنهادی ما 80 هست) و نسبت به کیفیت درخواستی حجمشو کم میکنه.

⚠️فقط حواستون باشه عکسهاتون رو بصورت فایل بهش بفرستین⚠️

🚦اگر هم مشکلی داشتین برید به قسمت راهنماش و اونجا بهتون یاد دادم🚦

https://t.me/ImageComp_bot

Channel | Group | YouTube
❤‍🔥7👍5🔥3🤯1
#Tools

🤯خانوما و آقایون فرانت کار براتون یه ربات میخوام معرفی کنم که میتونید با استفاده ازش عکسهایی که میخوایین توی پروژه هاتون استفاده کنین رو بدین بهش و تقریبا بدون افت کیفیت با حجم کم تحویل بگیرین 😱

این ربات برای این کانال هست و اینکه میتونید درصد کیفیتش رو خودتون تعیین بکنید(کیفیت پیشنهادی ما 80 هست) و نسبت به کیفیت درخواستی حجمشو کم میکنه.

⚠️فقط حواستون باشه عکسهاتون رو بصورت فایل بهش بفرستین⚠️

🚦اگر هم مشکلی داشتین برید به قسمت راهنماش و اونجا بهتون یاد دادم🚦

https://t.me/ImageComp_bot

Channel | Group | YouTube
👍4🔥2
#api
#Tools

📣 افزونه REST Client برای Visual Studio Code یک ابزار قدرتمند است که به شما اجازه می‌دهد درخواست‌های HTTP را مستقیماً از داخل محیط vscode ارسال و مدیریت کنید. این افزونه برای توسعه‌دهندگان بسیار مفید است، زیرا به شما امکان می‌دهد APIها را تست کرده و نتایج را به‌صورت سریع و بدون نیاز به نرم افزار اضافی ببینید.
https://marketplace.visualstudio.com/items?itemName=humao.rest-client

⚠️البته مثل swager وpostman قدرتمند نیست ولی خب ...⚠️

Channel | Group | YouTube
👍12😁6🔥21
#Tools

این سایتی که میخوام معرفی کنم خیلی کاربردیه 🚀

حالا چیکار میکنه ⁉️

شما قبل اینکه بخوای یه پکیجی رو نصب کنی حتما اولش در موردش تحقیق کن بعد بیا ازش استفاده کن 🤌

چرا ⁉️

چون شاید کند کنه سایتتو یا شاید باگ داشته باشه و ... 🫠

با این سایت یا بیا فایل package.json ات رو بده بهش یا اسم پکیج رو بنویس تا برات مشخصات اون لایبرری و پکیج رو بیاره برات سرعت لود و حجم و.... 🥇

بزن روش برو به سایتش

Channel | Group | YouTube
🔥10👍2😁1🤯1
#Tips_N_Tricks
#Tools
⚠️خوب دیدم مشکل خیلی از کسایی هست که تازه با Git و Github آشنا شدن و گفتم این واجبه که بدونن.⚠️

🥇برای اینکه وقتی میخوایین پروژتون رو پوش کنید روی گیتهاب بعضی فایلهای اضافی یا اصلا فایلی که دوس نداریم بقیه رو گیتهاب ببین مثلا فولدر (نود ماژول و فایلهایی مثل .env ) نره توی گیتهابمون بیایین یه فایل .gitignore توی ریشه اصلی پروژه بسازید و اسم اون فایل یا فولدر هاتون رو توش بنویسید و کامیت کنید.

🥈و الان اگر پروژتون رو پوش کنید دیگه اونایی که توش نوشتین به گیتهاب ارسال نمیشن.

Channel | Group | YouTube
👍20