گروه نرم‌افزاری دانش‌بنیان پارت مشهد
اگر ساکن مشهدید و میخاین مسیر فرانت رو شروع کنید فرصت خوبیه
از دستش ندید
از دستش ندید
👌1
معنی تگ‌ها در ساختار اولیه هر وب‌سایت
سلام به همه! هر بار که در VSCode یک پروژه جدید شروع می‌کنیم، این کار با یک سند HTML آغاز می‌شود، جایی که ترکیب "! + tab" را فشار می‌دهیم. پس از آن، ساختاری مانند تصویر بالا ظاهر می‌شود.
بیایید این ساختار را به طور مفصل بررسی کنیم:
— این خط به مرورگر می‌گوید که از HTML5 استفاده می‌شود، که برای تعیین نسخه HTML مورد استفاده و اطمینان از رندر صحیح صفحه ضروری است.
— این تگ نشان‌دهنده شروع سند HTML است. صفت lang="en" زبان صفحه (در این مورد انگلیسی) را مشخص می‌کند. این برای موتورهای جستجو و دسترسی مفید است.
— این تگ حاوی متادیتا در مورد سند مانند رمزگذاری، اطلاعات مشاهده و عنوان صفحه است. متادیتا در خود صفحه نمایش داده نمی‌شود.
— این متاتگ رمزگذاری کاراکترها را برای سند تنظیم می‌کند. UTF-8 تقریباً از همه زبان‌های دنیا پشتیبانی می‌کند و استاندارد صفحات وب است.
— این متاتگ برای طراحی واکنشگرا مهم است. به مرورگر می‌گوید که چگونه اندازه و مقیاس صفحه را مدیریت کند. در این مورد:
width=device-width عرض را به عرض دستگاه تنظیم می‌کند.
initial-scale=1.0 مقیاس اولیه را روی 100% تنظیم می‌کند.
— این تگ عنوان صفحه را که در برگه مرورگر نمایش داده می‌شود و توسط موتورهای جستجو استفاده می‌شود، تعیین می‌کند.
— این تگ حاوی تمام محتوای صفحه وب است که در مرورگر کاربر نمایش داده می‌شود - متن، تصاویر، پیوندها، جداول و غیر
#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript
سلام به همه! هر بار که در VSCode یک پروژه جدید شروع می‌کنیم، این کار با یک سند HTML آغاز می‌شود، جایی که ترکیب "! + tab" را فشار می‌دهیم. پس از آن، ساختاری مانند تصویر بالا ظاهر می‌شود.
بیایید این ساختار را به طور مفصل بررسی کنیم:
<!DOCTYPE html>
— این خط به مرورگر می‌گوید که از HTML5 استفاده می‌شود، که برای تعیین نسخه HTML مورد استفاده و اطمینان از رندر صحیح صفحه ضروری است.
<html lang="en">
— این تگ نشان‌دهنده شروع سند HTML است. صفت lang="en" زبان صفحه (در این مورد انگلیسی) را مشخص می‌کند. این برای موتورهای جستجو و دسترسی مفید است.
<head>
— این تگ حاوی متادیتا در مورد سند مانند رمزگذاری، اطلاعات مشاهده و عنوان صفحه است. متادیتا در خود صفحه نمایش داده نمی‌شود.
<meta charset="UTF-8">
— این متاتگ رمزگذاری کاراکترها را برای سند تنظیم می‌کند. UTF-8 تقریباً از همه زبان‌های دنیا پشتیبانی می‌کند و استاندارد صفحات وب است.
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
— این متاتگ برای طراحی واکنشگرا مهم است. به مرورگر می‌گوید که چگونه اندازه و مقیاس صفحه را مدیریت کند. در این مورد:
width=device-width عرض را به عرض دستگاه تنظیم می‌کند.
initial-scale=1.0 مقیاس اولیه را روی 100% تنظیم می‌کند.
<title>
— این تگ عنوان صفحه را که در برگه مرورگر نمایش داده می‌شود و توسط موتورهای جستجو استفاده می‌شود، تعیین می‌کند.
<body>
— این تگ حاوی تمام محتوای صفحه وب است که در مرورگر کاربر نمایش داده می‌شود - متن، تصاویر، پیوندها، جداول و غیر
#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript
❤2
👍2
RapidAPI: قطب اصلی API های جهان
RapidAPI.com، بزرگترین مرکز API جهان، توسط بیش از پنج میلیون توسعه دهنده برای یافتن، آزمایش و اتصال به هزاران API.
اضافه کردن API شما به این مرکز نیز رایگان و آسان است.
API های موجود می توانند متعلق به فرد باشند، یا می توانید تیم خود را اضافه کنید و تیم می تواند از ابزارهای موجود در استودیو برای ایجاد و مدیریت API های با کیفیت بالا استفاده کند، یا اینکه به صورت عمومی به اشتراک گذاشته شوند یا کسب درآمدزایی داشته باشند.
کد زیر برای دسترسی به chat gpt 4 هست که در این هاب وجود دارد فقط باید در این سایت عضو شده و سپس RapidAPI-Key دریافت کنید.
1000 درخواست در ماه رایگان است
RapidAPI.com، بزرگترین مرکز API جهان، توسط بیش از پنج میلیون توسعه دهنده برای یافتن، آزمایش و اتصال به هزاران API.
اضافه کردن API شما به این مرکز نیز رایگان و آسان است.
API های موجود می توانند متعلق به فرد باشند، یا می توانید تیم خود را اضافه کنید و تیم می تواند از ابزارهای موجود در استودیو برای ایجاد و مدیریت API های با کیفیت بالا استفاده کند، یا اینکه به صورت عمومی به اشتراک گذاشته شوند یا کسب درآمدزایی داشته باشند.
کد زیر برای دسترسی به chat gpt 4 هست که در این هاب وجود دارد فقط باید در این سایت عضو شده و سپس RapidAPI-Key دریافت کنید.
1000 درخواست در ماه رایگان است
curl --request POST \
--url https://chatgpt-42.p.rapidapi.com/conversationgpt4-2 \
--header 'Content-Type: application/json' \
--header 'x-rapidapi-host: chatgpt-42.p.rapidapi.com' \
--header 'x-rapidapi-key: YOUR_RAPID_KEY' \
--data '{"messages":[{"role":"user","content":"hello"}],"system_prompt":"","temperature":0.9,"top_k":5,"top_p":0.9,"max_tokens":256,"web_access":false}'
👍1
Xterm.js - ترمینال تحت وب
یک کامپوننت فرانت‌اند نوشته شده به زبان TypeScript که به برنامه‌ها اجازه می‌دهد تا ترمینال‌ها را در مرورگر ارائه دهند. Xterm در پروژه‌های محبوب مانند VS Code، Hyper و Theia استفاده می‌شود.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک کامپوننت فرانت‌اند نوشته شده به زبان TypeScript که به برنامه‌ها اجازه می‌دهد تا ترمینال‌ها را در مرورگر ارائه دهند. Xterm در پروژه‌های محبوب مانند VS Code، Hyper و Theia استفاده می‌شود.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍3❤2
Snap.svg - کتابخانه JavaScript برای گرافیک SVG
کتابخانه JavaScript Snap.svg کار با SVG را به آسانی jQuery برای DOM تبدیل می‌کند. Snap.svg برای مرورگرهای مدرن طراحی شده است و به همین دلیل از جدیدترین قابلیت‌های SVG مانند ماسک‌گذاری، برش، گرادیان کامل، گروه‌ها و موارد دیگر پشتیبانی می‌کند.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
کتابخانه JavaScript Snap.svg کار با SVG را به آسانی jQuery برای DOM تبدیل می‌کند. Snap.svg برای مرورگرهای مدرن طراحی شده است و به همین دلیل از جدیدترین قابلیت‌های SVG مانند ماسک‌گذاری، برش، گرادیان کامل، گروه‌ها و موارد دیگر پشتیبانی می‌کند.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
Embla Carousel - کتابخانه JS سبک برای ایجاد Carousel
Embla Carousel یک کتابخانه JavaScript سبک و بدون وابستگی است که به شما کمک می‌کند تا به آسانی Carousel زیبا و تعاملی ایجاد کنید. این کتابخانه دارای API و پلاگین‌های به راحتی قابل‌گسترش است و می‌تواند به شما در حل پیچیده‌ترین مشکلات مربوط به ایجاد Carousel کمک کند. Embla Carousel در تمام مرورگرهای مدرن به خوبی کار می‌کند.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
Embla Carousel یک کتابخانه JavaScript سبک و بدون وابستگی است که به شما کمک می‌کند تا به آسانی Carousel زیبا و تعاملی ایجاد کنید. این کتابخانه دارای API و پلاگین‌های به راحتی قابل‌گسترش است و می‌تواند به شما در حل پیچیده‌ترین مشکلات مربوط به ایجاد Carousel کمک کند. Embla Carousel در تمام مرورگرهای مدرن به خوبی کار می‌کند.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤2
مجموعه 3000 آیکون وکتور رایگان برای طراحی شما
این مجموعه شامل 3000 آیکون وکتور رایگان است که می‌توانید از آنها در طراحی‌های خود استفاده کنید. این آیکون‌ها در دسته‌بندی‌های مختلفی مانند طبیعت، حیوانات، انسان، فناوری، کسب‌وکار، و موارد دیگر قرار دارند.
🔗https://www.figma.com/design/GSnbPCsdixiq2KQxAvdhxh/3%2C800%2B-Free-Icons---Open-Source-Figma-Icon-Library-(Community)?node-id=0-1
🔗 https://www.figma.com/design/qri3jAHmUrPi9R8DD74hUO/3000%2B-Customizable-Icon-Pack-(Community)?node-id=0-1
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
این مجموعه شامل 3000 آیکون وکتور رایگان است که می‌توانید از آنها در طراحی‌های خود استفاده کنید. این آیکون‌ها در دسته‌بندی‌های مختلفی مانند طبیعت، حیوانات، انسان، فناوری، کسب‌وکار، و موارد دیگر قرار دارند.
🔗https://www.figma.com/design/GSnbPCsdixiq2KQxAvdhxh/3%2C800%2B-Free-Icons---Open-Source-Figma-Icon-Library-(Community)?node-id=0-1
🔗 https://www.figma.com/design/qri3jAHmUrPi9R8DD74hUO/3000%2B-Customizable-Icon-Pack-(Community)?node-id=0-1
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
نوار پایین متحرک
مجموعه‌ای از نوارهای پایین متحرک که با استفاده از CSS و JavaScript پیاده‌سازی شده‌اند.
🔗https://codepen.io/chrisbautista/pen/NWXjqLN
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript
مجموعه‌ای از نوارهای پایین متحرک که با استفاده از CSS و JavaScript پیاده‌سازی شده‌اند.
🔗https://codepen.io/chrisbautista/pen/NWXjqLN
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
«مَوْتٌ فِى عِزّ خَيْرٌ مِنْ حَيَاةٍ فِى ذُلّ».
امام حسين (ع) فرمود: «مرگ با عزت برتر از زندگى با ذلّت است».
(بحار الانوار، ج 44 ص 192 ح4 )
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
امام حسين (ع) فرمود: «مرگ با عزت برتر از زندگى با ذلّت است».
(بحار الانوار، ج 44 ص 192 ح4 )
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤9👎3
This media is not supported in your browser
VIEW IN TELEGRAM
آیا به دنبال الگوهای طراحی برای یک مشکل خاص هستید؟
این سایت در مورد الگوهای طراحی برای برنامه‌های وب است.
در دنیای توسعه نرم‌افزار، الگوهای طراحی راه‌حل‌های قابل استفاده مجدد برای مشکلات رایج هستند. این سایت مجموعه‌ای از الگوها را برای اهداف مختلف، از جمله JavaScript، React و Vue.js ارائه می‌دهد.
الگوهای طراحی باید بر اساس مشکل خاصی که شما سعی در حل آن دارید انتخاب شوند.
🔗https://www.patterns.dev/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
این سایت در مورد الگوهای طراحی برای برنامه‌های وب است.
در دنیای توسعه نرم‌افزار، الگوهای طراحی راه‌حل‌های قابل استفاده مجدد برای مشکلات رایج هستند. این سایت مجموعه‌ای از الگوها را برای اهداف مختلف، از جمله JavaScript، React و Vue.js ارائه می‌دهد.
الگوهای طراحی باید بر اساس مشکل خاصی که شما سعی در حل آن دارید انتخاب شوند.
🔗https://www.patterns.dev/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript