| کانال توسعه‌دهندگان وب |

Tailwindcss v4

✅ نسخه جدید تلویند منتشر شده.

امکانات جدیدی که در این نسخه اضافه شده :

1. تغییر موتور به یک موتور جدید و با پرفرمنس بالا
2. راحت‌تر شدن روند نصب
3. اضافه شدن پلاگین vite
4. به صورت اتوماتیک فایل‌ها رو شناسایی میکنه و نیازی به کانفیگ نداره
5. تغییر فایل کانفیگ به css
6. برای تم از css variables استفاده شده
7. تغییر رنگ‌ها از rgb به oklch و مدرن‌تر شدن رنگ‌ها
8. 3D transforms
9. بهبود در گرادینت‌ها
10. پشتیبانی از فیچر @starting-style
11. اضافه شدن not-* variant
12. و فیچر های دیگر

برای مطالعه کامل میتونید به وبلاگ tailwindcss سر بزنید.

لینک وبلاگ :
https://tailwindcss.com/blog/tailwindcss-v4

برای بروزرسانی تلویند توی پروژه هاتون :
https://tailwindcss.com/docs/upgrade-guide

🔖 #Web, #وب, #Frontend, #Backend

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

⭕️ دوره آموزش برنامه‌نویسی مینی اپ تلگرام

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

💎 وبسایت UIVerse منبعی غنی از کامپوننت‌های پر استفاده و زیبا برای طراحی UI هست که می‌تونید به‌راحتی کدهای مربوط به کامپوننت‌های مورد علاقه‌تون دریافت کنید. لازم به‌ذکر هست که تمامی کامپوننت‌ها Open-Source هستند و بدون مشکل می‌تونید استفاده کنید.

🌐 UIVerse.io

💎 Channel: @DevelopixJavascript

سلام
پرسشنامه‌ پیش رو با هدف درک بهتر رفتار و نیازهای کسب‌وکارهای اینترنتی ایرانی در استفاده از ابزارهای پرداخت توسط یک تیم پژوهشی مستقل طراحی شده است. نتایج این پژوهش به ما کمک می‌کند تا ابزارهایی کارآمدتر و منطبق با نیازهای واقعی شما ارائه دهیم. تکمیل این پرسشنامه کاملاً بی‌نام است و هیچ اطلاعات شخصی از شما ذخیره نخواهد شد. پاسخ‌های شما نقش کلیدی در بهبود خدمات ابزارهای پرداختی اینترنتی در کشور دارد، بنابراین از شما خواهشمندیم با دقت و صداقت به سوالات پاسخ دهید. زمان لازم برای تکمیل: حدود 5 دقیقه لطفاً برای شروع پرسشنامه، روی لینک زیر کلیک کنید و ما را در این مسیر همراهی کنید.
.
https://survey.porsline.ir/s/lEtAnSw8
.
سپاس فراوان از همکاری صمیمانه شما

✨ با استفاده از کتابخونه Cursify می‌تونید افکت‌های انیمیشنی زیبایی به Cursor موس در محیط وب بدید. این کتابخونه با React و Typescript و Tailwind و Framer Motion ساخته شده و به‌راحتی در پروژه‌ها به‌صورت کامپوننت قابل استفاده است.

🌐 Website

💎 Channel: @DevelopixJavascript

آموزش تخصصی جاوا برای ورود به دنیای اینشورتک!

پویش «کشتی‌بان کجاست؟» فرصتی برای آموزش تخصصی و پیشرفته در حوزه برنامه‌نویسی جاوا، فراهم کرده است. در این مسیر آموزشی با تمرکز بر فریمورک Spring و یادگیری توسعه اپلیکیشن‌های وب RESTful، خودتان را برای مسیر شغلی جذاب و پردرآمد برنامه‌نویسی جاوا آماده کنید.

با توجه به تخصصی بودن این آموزش و نیاز به متوازن سازی سطح دانش فراگیران، لازم است ابتدا با اساتید دوره مصاحبه کوتاهی داشته باشید.

💥برای حضور در این بوت‌کمپ، می‌توانید از کد تخفیف ۳۰ درصدی ویژه دوره بهره‌مند شوید!
📌 کد تخفیف: keshtiban

🔗 لینک ثبت‌نام:
https://B2n.ir/w30437
____
فناپ‌کمپس؛ رشد در بازار کار دیجیتال
@Fanapcampus

⚜️ چطوری سایتی که داریم توسعه میدیم رو روی موبایل ببینیم ؟

خلاصه :
توی این ویدیو یاد میگیریم چطوری سایتی که داریم توسعه میدیم رو روی موبایل خودمون بدون دیپلوی کردن روی سرور و بدون هیچ هزینه ای تست کنیم :)

🎞 لینک ویدیو:
https://youtu.be/uGXRDu0H5iU

🔖 #Web, #وب, #Frontend, #Backend

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

⚜️ چطوری یاد بگیریم؟ - Tailwindcss

✳️توی این ویدیو میپردازیم به این که چجوری میتونیم تلویند یاد بگیریم
درواقع به جای اینکه یک دوره کامل tailwindcss ببینید و وقت خودتون رو صرف دوره بکنید با یه ویدیو تقریبا یک ساعته کل کانسپت رو درک کنید و شروع کنید خودتون با استفاده از document خود tailwind جلو برید و یاد بگیرید.
هدف من اینه که شما بتونید با استفاده از یه ویدیو کانسپت رو بفهمید و ادامه رو خودتون برید و یاد بگیرید دلیل این کار هم اینه که یاد بگیرید داکیومنت بخونید و وقتتون رو صرف موارد مهم تری بکنید

🎞 لینک ویدیو:
https://youtu.be/hO1InhW1y50

🔖 #Web, #وب, #Frontend, #Backend #Tailwindcss

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

💢 ویژگی PopOver

ویژگی popover در HTML ویژگی جدیدی برای ایجاد و مدیریت popup ها است که به شما امکان می‌دهند تا به سادگی و سریع‌ترین راه popup های تعاملی ایجاد کنید. این ویژگی‌ به تازگی معرفی شده‌ است و هنوز در تمامی مرورگرها به طور کامل پشتیبانی نمی‌شوند، اما در ادامه به توضیح کامل این ویژگی‌ها و نحوه استفاده از آن‌ها می‌پردازیم.

🔺 ویژگی popover

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

🔺 ویژگی popovertarget

ویژگی popovertarget به عنصری که باید پاپ‌آپ را باز کند (مانند دکمه یا لینک) اعمال می‌شود. این ویژگی مشخص می‌کند که با کلیک یا هاور کردن بر روی این عنصر، کدام پاپ‌آپ باید نمایش داده شود. مقدار این ویژگی باید شناسه (ID) عنصری باشد که ویژگی popover را دارد.

🔺 ویژگی popover-open

این یک شبه‌کلاس CSS است که می‌تواند برای استایل‌دهی به عناصری که پاپ‌آپ آن‌ها باز شده است، استفاده شود. با این ویژگی می‌توان به راحتی ظاهر و رفتار عناصر را زمانی که پاپ‌آپ باز است، تغییر داد.

🔺 مثال:

در این مثال، یک دکمه وجود دارد که وقتی روی آن کلیک می‌کنید، پاپ‌آپی که حاوی یک ایموجی دست است، نمایش داده می‌شود.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popover Example</title>
    <style>
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        span {
            display: none;
            animation: wave 0.25s 0.25s 2;
            font-size: 8rem;
            margin-left: 10px;
        }

        button:popover-open + span {
            display: inline;
        }

        @keyframes wave {
            50% {
                rotate: -25deg;
            }
            100% {
                rotate: 25deg;
            }
        }
    </style>
</head>
<body>
    <button popovertarget="hello">Say Hello</button>
    <span popover id="hello">👋</span>
</body>
</html>

🔺 توضیحات:
1. HTML:
- button
با ویژگی popovertarget=hello که نشان‌دهنده این است که این دکمه با کلیک یا هاور کردن باید پاپ‌آپ با شناسه hello را نمایش دهد.
- span
با ویژگی popover و شناسه hello که حاوی محتوای پاپ‌آپ است.

2. CSS:
- span
که در ابتدا مخفی است (display: none) و دارای انیمیشن دست تکان دادن.
- انتخابگر button:popover-open + span که نمایش عنصر span را زمانی که دکمه کلیک شده است، مدیریت می‌کند (display: inline).


- زمانی که کاربر روی دکمه کلیک می‌کند، پاپ‌آپ (عنصر span) نمایش داده می‌شود.

- ویژگی :popover-open به دکمه اعمال می‌شود و CSS مرتبط با آن اجرا می‌شود.

🔺کاربردها:

ویژگی‌های popover و popovertarget می‌توانند برای ایجاد انواع مختلف پاپ‌آپ‌ها استفاده شوند، مانند:

- نمایش توضیحات یا اطلاعات اضافی.
- ایجاد منوهای کاربری.
- نمایش پیام‌های تایید یا هشدار.
- ارائه راهنمایی‌ها یا نکات آموزشی.

این ویژگی‌ها با کاهش نیاز به استفاده از JavaScript برای مدیریت پاپ‌آپ‌ها، کدنویسی را ساده‌تر می‌کنند و به شما اجازه می‌دهند تا با استفاده از CSS، کنترل کاملی بر ظاهر و رفتار پاپ‌آپ‌ها داشته باشید.

🔖 #Web, #وب, #Frontend

👤 Maryam

💎 Channel: @DevelopixWeb

💢 معرفی ابزار Gulp

ابزار Gulp یک ابزار متن‌باز و رایگان است که به زبان جاوا اسکریپت نوشته شده و بر پایه Node Stream است. این ابزار به برنامه‌نویسان اجازه می‌دهد تا یک سری وظایف (Task) در پروژه‌های خود تعریف کنند که کارهای تکراری را به صورت خودکار انجام دهد. این کار باعث می‌شود که کار برنامه‌نویس سبک‌تر شده و روند اجرای پروژه سریع‌تر پیش برود.

ابزار Gulp به عنوان یک Task Manager برای محیط NodeJS و پکیج منیجر NPM عمل می‌کند. بنابراین برای استفاده از Gulp باید پکیج منیجر NPM را نصب کنید. NPM به شما امکان می‌دهد تا پکیج‌های مختلفی را که برای پروژه نیاز دارید، مدیریت و نصب کنید.

⚙️ نصب و راه‌اندازی Gulp

برای شروع استفاده از Gulp، ابتدا باید Node.js و NPM را نصب کنید. سپس می‌توانید Gulp را به عنوان یک وابستگی در پروژه خود نصب کنید:

npm install --save-dev gulp

🔴تعریف وظایف با Gulp

پس از نصب Gulp، می‌توانید وظایف مختلفی را تعریف کنید. به عنوان مثال، فرض کنید می‌خواهید فایل‌های Sass خود را به CSS تبدیل کنید و سپس آنها را فشرده‌سازی کنید. ابتدا باید پلاگین‌های مورد نیاز را نصب کنید:

npm install --save-dev gulp-sass gulp-clean-css

سپس یک فایل به نام gulpfile.js در ریشه پروژه خود ایجاد کنید و وظایف خود را در آن تعریف کنید:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

gulp.task('sass', function () {
    return gulp.src('src/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('minify-css', () => {
    return gulp.src('dist/css/*.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass', 'minify-css'));

🔴وظایف قابل انجام با Gulp

از جمله کارهایی که با Gulp می‌توانید به صورت خودکار انجام دهید، می‌توان به موارد زیر اشاره کرد:

- فشرده‌سازی کدها: کاهش حجم فایل‌های جاوا اسکریپت و CSS برای افزایش سرعت بارگذاری وبسایت.

- بهینه‌سازی: اعمال تغییراتی روی فایل‌ها برای بهبود عملکرد آن‌ها.

- اجرای Unit Testing: اجرای تست‌های واحد برای اطمینان از عملکرد صحیح کدها.

- تبدیل فایل‌های Sass به CSS: ترجمه فایل‌های پیش‌پردازنده‌های CSS مانند Sass به فایل‌های CSS قابل استفاده در مرورگر.

- ساخت تمپلیت HTML: ایجاد و مدیریت فایل‌های HTML به صورت خودکار.

- فشرده کردن تصاویر: کاهش حجم تصاویر بدون کاهش کیفیت آن‌ها.

- ساخت محیط لوکال هاست: ایجاد یک سرور محلی برای تست و توسعه پروژه‌ها.

🔘مثال کاربردی

فرض کنید شما یک پروژه وب دارید که شامل فایل‌های Sass، تصاویر و فایل‌های جاوا اسکریپت است. با استفاده از Gulp، می‌توانید تمام این وظایف را به صورت خودکار انجام دهید. به عنوان مثال، فایل‌های Sass را به CSS تبدیل کرده، فایل‌های CSS را فشرده کنید و تصاویر را بهینه‌سازی کنید. تمام این کارها تنها با اجرای یک دستور Gulp انجام می‌شود:

gulp

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

👤 Maryam

🔖 #Web, #وب, #Frontend, #Backend

💎 Channel: @DevelopixWeb

🟫 اگر توی پروژه‌های فرانت‌اندی‌تون از Tailwind استفاده می‌کنید و نمی‌خواهید که طول کلاس‌های المنت‌هاتون رو با کیلومتر شمار اندازه بگیرید، این افزونه‌‌ها می‌تونند کمک کننده باشند.

🔻 marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold

🟪 plugins.jetbrains.com/plugin/23937-tailwind-fold

🔖 #Web, #وب, #Frontend, #Backend, #Tailwind

👤 Mahdiyar

💎 Channel: @DevelopixWeb

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

🔗 ui-avatars.com

🔖 #Web, #وب, #Frontend, #Backend

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

پلتفرم Rive انیمیشن‌هایی دراختیارتون قرار می‌ده که توی تمام پلتفرم‌ها قابلیت استفاده‌ش رو دارید و خاصیتش هم این هست که قابلیت کنترل کردن انیمیشن‌ها بهتون داده می‌شه.
برای همین می‌شه برای ساخت صفحات پویاتر، بازی یا هرچیزی ازش استفاده کرد.
اپ Duolingo هم به‌نظر میاد از همین پلفترم برای کنترل شخصیت‌ها و المان‌های داخل برنامه‌اش استفاده می‌کنه.

🔗 Rive.app

بعضی از موردهای استفاده‌اش رو هم می‌تونید توی این لینک ببینید.

🔖 #UI #Animation #Crossplatform

👤 Mahdiyar

💎 Channel: @DevelopixWeb

🌐 فریمورک Ant Design یک UI Framework با ظاهری شیک و مدرن و انعطاف‌پذیری بالا برای استفاده در محیط های توسعه وب است. این فریمورک می‌تواند جایگزین مناسبی برای کسانی که از Bootstrap یا سایر UI Framework ها استفاده می‌کنند، باشد. با این تفاوت که دارای ساختاری بسیار منعطف و ماژولار و ظاهری به مراتب تمیزتر و مدرن‌تر است.

❔ این فریمورک به‌صورت پیشفرض با React سازگار است و می‌توانید به‌صورت کامپوننت‌های ری‌اکت در پروژه‌های خود استفاده نمایید، علاوه‌بر React نسخه های دیگری از این فریمورک برای Vue و Angular نیز وجود دارند که می‌توانید استفاده نمایید.

💎 Channel: @DevelopixWeb

🚀 منتور جت - پلتفرم منتورینگ آنلاین

📈منتی: منتورت رو پیدا کن و آینده شغلیت رو ‌مطمئن تر کن!

🏆منتور: به عنوان یک رهبر اعتماد به نفس ایجاد کنید، شبکه خود را رشد دهید و محبوبیت به دست آورید.

کاملا رایگان - برای همه، منتور و منتی ها.

🔗 https://mentorjet.org

صد درصد پیش اومده توی سایتتون از قیمت استفاده کردید و دوست داشتید که سه تا سه تا با یک , یا چیزی مثل این جدا کنید و خب روش های مختلفی هست برای این کار ولی من امروز ساده ترین روشش رو میخوام بهتون بگم :)


✳️ ساده ترین روش برای انجام این کار یک خط کد جی اس هست به این صورت :

let price = 500000;
console.log(price.toLocaleString());

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

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

Bun 1.1 :)
و بلاخره ورژن 1.1 بان از ریلیز شد و الان میتونید در ویندوز هم از بان استفاده کنید :)

⭕️ اگر نمیدونید بان چیه:
❇️ بان یک پکیج منیجر ، تست رانر ، باندلر و ران تایم هست ( درواقع انگار node js و npm و ابزار های دیگه در یک جا )
و اپشنی که ارائه میده سرعت و بهینه بودن بیشتره این ابزاره :)

در ورژن 1 روی لینوکس و مک قابل اجرا بود و که در ورژن 1.1 در ویندوز هم قابل استفاده هست

✅ برای نصب بان روی ویندوز :
کافیه دستور زیر رو توی cmd بزنید و نصب میشه خودش :)

powershell -c "irm bun.sh/install.ps1 | iex"

و برای نصب در لینوکس و مک :

curl -fsSL https://bun.sh/install | bash

پس درواقع بان یک ابزار جامع هست که سرعت بسیار بیشتری داره :) کلی اپشن دیگه داره که ما اینجا بهش نمیپردازیم و شما رو ارجاع میدم به داکیومنت خود بان که ازش استفاده کنید مطالعه کنید و یاد بگیرید

https://bun.sh/

امار رو ببینید متوجه میشید که باید نصب کنید و تستش کنید مخصوصا اگر node کار کرده باشید

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

1. LCP : Largest Contentful Paint
⚜️ مقدار زمانی که بزرگترین کانتنت صفحه لود میشه ( درواقع این کانتنت بزرگ میتونه یک عکس یک فیلم هر چیزی باشه که بر اساس ثانیه هست )
🟢 بهینه ترین کمتر از 2.5 ثانیه هست
🟠 متوسط کمتر از 4 ثانیه
🔴 بیشتر از 4 ثانیه هم که بدترین حالته


2. CLS : Cumulative Layout Shift
⚜️مقدار پرش صفحه ( یعنی برای مثال موقع لود شدن سایت یک دکمه لود شده ولی هنوز لود صفحه تکمیل نشده کاربر که میاد روی این دکمه کلیک کنه یهو یک محتوایی بالای دکمه یا پایین دکمه ظاهر میشه و باعث پرش دکمه به بالا یا پایین میشه )
🟢 بهینه ترین کمتر از 0.1 هست
🟠 متوسط کمتر از 0.25 ثانیه
🔴 بیشتر از 0.25 ثانیه هم که بدترین حالته

3. INP : Intraction to Next Point
⚜️ این مورد بسیار جدید افزوده شده و گوگل ازش استفاده میکنه و جایگزین FID شده که بررسی میکنه چقدر طراحی سایت شما روان کار شده کاربر روی دکمه میزنه اون اکشن پشت دکمه کار میکنه یا نمیکنه اگر یک faq هست ایا به درستی اکوردین کار میکند یا خیر ( که این مورد در طول زمانی که کاربر در سایت شما هست بررسی و پس از خارج شدن از صفحه محاسبه میشود )
🟢 بهینه ترین کمتر از 200 میلی ثانیه هست
🟠 متوسط کمتر از 500 میلی ثانیه
🔴 بیشتر از 500 میلی ثانیه هم که بدترین حالته

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

💢ایجاد سایت‌مپ

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

🔺برای ایجاد یک سایت‌مپ به صورت دستی، می‌توانید این مراحل را دنبال کنید:

۱. ایجاد فایل XML:
- ابتدا یک فایل متنی با پسوند XML بنام مثلاً sitemap.xml بسازید.

۲. تعریف لینک‌ها:
- در این فایل XML، هر لینک به صورت زیر تعریف می‌شود:

    <loc>آدرس صفحه</loc> 
    <lastmod>تاریخ آخرین ویرایش</lastmod> 
    <changefreq>فرکانس تغییر</changefreq> 
    <priority>اولویت</priority> 
    <image:image> 
        <image:loc>آدرس تصویر شاخص</image:loc> 
        <image:title>عنوان تصویر</image:title> 
        <image:caption>توضیحات تصویر</image:caption> 
    </image:image> 
</url>

۳. افزودن لینک‌ها:
- برای هر صفحه از وب‌سایت خود، یک تگ <url> در فایل XML ایجاد کنید و لینک صفحه، تاریخ آخرین ویرایش، فرکانس تغییر و اولویت را درون آن قرار دهید. همچنین، اطلاعات مربوط به تصویر شاخص پست را نیز به تگ <image:image> درون هر <url> اضافه کنید.

۴. ذخیره و ارسال فایل:
- فایل XML را ذخیره کنید و آن را به روت وب‌سایت خود اضافه کنید.
- برای اطمینان از اینکه موتورهای جستجو به فایل سایت‌مپ شما دسترسی دارند، آن را به گوگل وبمستر یا بینگ وبمستر ارسال کنید.

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

🔻در صورتی که تعداد لینک‌های سایت‌تون زیاد است یا اگر می‌خواهید روند ساخت سایت‌مپ را خودکار کنید، می‌توانید از پکیج‌های مربوطه استفاده کنید، مانند سرویس‌های آنلاین یا کتابخانه‌هایی موجود که این کار را برای شما انجام می‌دهند. همچنین، اگر سایت‌تان بر پایه وردپرس است، از افزونه‌هایی مانند Yoast SEO می‌توانید استفاده کنید که به طور خودکار سایت‌مپ را ایجاد می‌کنند.

👤 Maryam

💎 Channel: @DevelopixWeb

💢 سایت‌مپ (Sitemap) چیست؟

سایت‌مپ یک فایل XML است که تمامی صفحات و منابع یک وب‌سایت را به موتورهای جستجو معرفی می‌کند. این فایل شامل لیستی از لینک‌هایی است که برای راحتی موتورهای جستجوی موتورهای مانند گوگل و بینگ ایجاد می‌شود.

🔺اهمیت سایت‌مپ:

1. ارائه ساختار بهتر برای موتورهای جستجو: سایت‌مپ به موتورهای جستجو کمک می‌کند تا ساختار و محتوای وب‌سایت را بهتر درک کنند.

2. ارسال اطلاعات به موتورهای جستجو: با ارسال سایت‌مپ به موتورهای جستجو، زمان شناسایی و فهرست‌بندی صفحات وب‌سایت توسط موتورها بهبود می‌یابد.

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

🔺تاثیر سایت‌مپ بر سئو:
۱. ارتقاء فهرست‌بندی: با ارسال سایت‌مپ به موتورهای جستجو، زمان فهرست‌بندی صفحات وب‌سایت توسط موتورها بهبود می‌یابد.

۲. افزایش شناسایی صفحات جدید: موتورهای جستجو به وسیله سایت‌مپ راهنمایی می‌شوند تا صفحات جدید را سریعاً شناسایی کنند و به فهرست خود اضافه کنند.

۳. بهبود رتبه‌بندی: سایت‌مپ می‌تواند بهبود رتبه‌بندی صفحات وب‌سایت در نتایج جستجو کمک کند.

۴. کاهش زمان انتظار: با ارسال سایت‌مپ، موتورهای جستجو سریع‌تر صفحات وب‌سایت را شناسایی و فهرست‌بندی می‌کنند که باعث کاهش زمان انتظار برای دیده شدن صفحات جدید می‌شود.

😀نکات کلیدی:
- همیشه از سایت‌مپ به روز استفاده کنید و در صورت اضافه یا حذف صفحات، آن را به‌روز کنید.

- سایت‌مپ باید به صورت مستمر به موتورهای جستجو ارسال شود.

- اطمینان حاصل کنید که سایت‌مپ شما دارای لینک‌های صحیح و قابل دسترس است.

🔔در پست‌های بعدی به نحوه ایجاد سایت‌مپ می‌پردازیم.

👤 Maryam

💎 Channel: @DevelopixWeb

🔴 شتابان هاست 🔴

🔰 تخفیف ویژه 12 درصدی برای
خرید انواع🔹هاست🔹سرور
در شتابان هاست به مناسبت فرا رسیدن عید نوروز 🥳:

✅ https://shetabanhost.com/
🌟 کد تخفیف اختصاصی:

shetabanhost

🔗 https://shetabanhost.com/

🌐 پشتیبانی ۲۴ ساعته شتابان هاست👇👇

☎️ 024-91311031
💎 Channel: @shetabanhostcom

ما یه همچین ساختار ساده html داریم و اینو توی css استایل دهی کردیم

ولی به روش جدید 😍

اگه عکس‌ها رو ببینید متوجه می‌شید
بازم اگه سوالی داشتید بپرسید


⭕️ (تقریبا توی همه مرورگرهای مدرن پشتیبانی می‌شه)

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

🔴 دوره آموزشی-استخدامی جاوا اسکریپت/ری‌اکت

⚛ از هر رشته‌ای که هستی، صفر تا صد ری‌اکت رو یاد بگیر، پروژه واقعی بزن و استخدام شو.

▫️۲۰۰ ساعت آموزش و پروژه
▫️دارای منتورینگ و پشتیبانی
▫️مدرک معتبر از دانشگاه علم و صنعت
▫️کمک به استخدام در صورت اتمام دوره

🌟 ۲۰ درصد تخفیف ثبت‌نام نقدی!

🔗 برای ثبت‌نام روی این لینک کلیک کنید.

🍉 یلدای امسال رو کُدیلویی بگذرونید!

🍓 تا پایان روز جمعه با دعوت دو کاربر جدید به کدیلو، فایل های کدیلو رو رایگان دریافت کنید

🥝 یلدای خوبی داشته باشید (:

💎 @Codilo

✅ دسته‌بندی عملگرهای برنامه‌نویسی

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

⭕️  آشنایی با خطاهای رایج در برنامه‌نویسی!

✳️ خطاهای نحوی : Syntax Error

🔸 این خطا مربوط به زمان نوشتن کد های برنامه قبل از اجرا شدن است ؛ این نوع خطارو با عنوان خطاهای گرامری ، دستوری یا خطاهای نوشتاری کد نیز میشناسیم!

✳️ خطای کامپایل کردن : Compile Error

🔸 اگر هنگام کامپایل کردن کد یک یا چند مورد از فایل ها یا کتابخانه های لازم فراهم نباشد با ارور کامپایل کردن مواجه میشویم.

✳️ خطاهای زمان اجرا : Run-time Error

🔸 ارور های زمان اجرا رو میشه رو اعصاب ترین خطا دونست ؛ همه چیز درست عمل میکنه تا اینکه با این ارور مواجه میشیم ← این خطا هنگام اجرای کد رخ می‌ده و باعث میشه برنامه نتونه به کار خودش ادامه بده.

✳️ خطاهای منطقی : Logical Error

🔸 فرایند کامپایل و اجرای کد به درستی انجام شده اما یه قسمتی از کد شما دچار مشکله ؛ به عنوان مثال شما به ماشین حساب طراحی کردید اما در وارد کردن کد های صحیح دقت لازم رو نداشتید و در سورس کد مثلا به جای عمل ضرب از جمع استفاده کردید.

👤 Matin Soleymani

💎 Channel: @DevelopixWeb