NEW BOT Телеграм, страница

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

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

🔗

ui-avatars.com

🔖

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

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

2.78K viewsedited 05:46

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

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

🔻

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

🟪

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

🔖

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

👤 Mahdiyar

💎 Channel: @DevelopixWeb

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3👍1🔥1

2.3K viewsedited 11:49

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

💢 معرفی ابزار 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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6❤1

8.9K viewsedited 12:51

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

💢 ویژگی 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">
    <noscript>Popover Example</noscript>
    <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

👍8❤2

2.97K viewsedited 16:49

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

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

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

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

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

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

🔥5👍4

2.79K views12:02

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

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

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

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

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

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

❤9👍2👎1

2.64K views22:45

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

Forwarded from | کانال توسعه‌دهندگان جاوااسکریپت |

This media is not supported in your browser

VIEW IN TELEGRAM

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

🌐 Website

💎 Channel: @DevelopixJavanoscript

👍10❤1👎1

1.7K views16:45

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

Forwarded from Developix Support

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

👍1

2.78K views15:30

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

Forwarded from | کانال توسعه‌دهندگان جاوااسکریپت |

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

🌐 UIVerse.io

💎 Channel: @DevelopixJavanoscript

🔥8❤4👍1

3.23K views13:40

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

Forwarded from | Erfan's Notes | via @DevelopixBot

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

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

❤1👍1

3K views15:46

💠 نمایش کالکشن 💠

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

Forwarded from Developix Support

استخدام NOC Cloud Engineer از مسیر آموزش
در بوت‌کمپ تخصصی Network Operations Center-Tier 1
۸۰ ساعت | آنلاین

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

📌برخی از سرفصل‌های دوره:
- نصب و مدیریت لینوکس (بر اساس LPIC1 سفارشی)
- اصول شبکه (+Network / CCNA)
- امنیت پایه (+Security)
- مانیتورینگ سرویس‌ها و کار با ابزارهای حرفه‌ای
- مدیریت Incident و تیکتینگ

این دوره مناسب چی کسانی است⁉️
-علاقه‌مندان به شبکه، IT و امنیت؛
-فارغ‌التحصیلان یا دانشجویان رشته‌های کامپیوتر و برق؛
-کسانی که می‌خواهند خیلی سریع وارد بازار کار فناوری اطلاعات شوند؛
-افرادی که به دنبال اولین تجربه شغلی در حوزه NOC و شبکه هستند.

📆 تاریخ شروع بوت‌کمپ: ۳ آبان۱۴۰۴
🔰 بدون پیش‌نیاز؛ همراه با پروژه عملی و کوئیز
🧾مدرک پایان دوره

🔗 اطلاعات بیشتر و پیش‌ثبت‌نام👇
https://B2n.ir/mq4649
___
فناپ‌کمپس؛ رشد در بازار کار دیجیتال
@Fanapcampus

1.2K views16:30

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

Forwarded from | Erfan's Notes |

حدودا یک ماه از ریلیز شدن نسخه 3.0 وب‌اسمبلی (WASM) می‌گذره و الان فرصت کردم درموردش بخونم، تغییرات مهمی که داشته رو پایین می‌نویسم.

💠 پشتیبانی از Address Space های 64 بیت
تا قبل از این نسخه، وب‌اسمبلی محدود به آدرس‌های i32 بود و نمی‌تونست بیشتر از 4GB رو آدرس‌دهی کنه، ولی پشتیبانی از i64 اضافه شده و این محدودیت عملا بی‌نهایت شده، هرچند که همچنان مرورگرها حداکثر اجازه allocate کردن 16GB رو می‌دن.

💠 پشتیبانی از Memory های چندگانه
تا قبل از این نسخه، هر ماژول وب‌اسمبلی فقط محدود به یک Memory بود و برای تفکیک باید ماژول‌ها Split می‌شدند، ولی در این نسخه قابلیت داشتن Memory های متعدد برای یک ماژول اضافه شده.

💠 پشتیبانی از Garbage Collection
در این نسخه یک افزونه با عنوان wasm-gc اضافه شده که در سطوح پایین می‌تونه مموری رو به‌صورت خودکار مدیریت کنه، کامپایلرها می‌تونند Struct ها و آرایه‌ها و بعضی Integer ها رو به صورت تگ شده تعریف کنند و خود wasm وظیفه allocation و lifetime شون رو برعهده بگیره.

💠 پشتیبانی از Tail Call ها
قابلیت Tail Call به وب‌اسمبلی اضافه شده، این ویژگی از زبان‌های فانکشنال الگو گرفته، به این معنی که فانکشن‌ها می‌تونند در آخرین اکشن‌شون یک فانکشن دیگه‌ای رو کال کنند بدون اینکه فضایی از Stack رو اشغال کنند، این موضوع در کال های Recursive اهمیت زیادی داره.

💠 پشتیبانی از Exception ها
پشتیبانی از Exception های try و catch در وب‌اسمبلی اضافه شده، تا قبل از این برای چنین کاری باید از JS استفاده می‌شد.

💠 پشتیبانی از String های جاوا اسکریپت
قابلیت رد و بدل کردن مستقیم String های جاوا اسکریپت بدون نیاز به تبدیل دو طرفه اضافه شده، می‌تونید مقادر String رو به صورت مستقیم به‌عنوان externref پاس بدید و سمت wasm تغییرات لازم رو روش اعمال کنید و سمت JS تحویل بگیرید.

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2

765 views18:44

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

اصل تک‌مسئولیتی (Single Responsibility Principle) یعنی هر ماژول یا کامپوننت فقط یک دلیل برای تغییر داشته باشد. در پروژه‌های وب پیچیده، رعایت SRP باعث می‌شود کد قابل تست‌تر، قابل تغییرتر و خواناتر شود. تجربهٔ عملی: وقتی کد را به واحدهای کوچکتر با مسئولیت مشخص تقسیم می‌کنید، باگ‌ها راحت‌تر پیدا و ویژگی‌های جدید سریع‌تر اضافه می‌شوند.

مثال فرانت‌اند (React)
کامپوننت بد: هم دیتا می‌گیرد، هم وضعیت مدیریت می‌کند، هم رندر می‌کند.

function Dashboard(){
  const [data,setData]=useState(null);
  useEffect(()=>{fetch('/api/items').then(r=>r.json()).then(setData)},[]);
  function save(item){fetch('/api/items', {method:'POST', body:JSON.stringify(item)})}
  return <div>{data?.map(i=><div key={i.id}>{i.name}</div>)}</div>
}

تقسیم به مسئولیت‌ها: یک useFetch hook و یک Presentational کامپوننت:

function useFetch(url){
  const [data,setData]=useState(null);
  useEffect(()=>{fetch(url).then(r=>r.json()).then(setData)},[url]);
  return data;
}
function DashboardView({data}){ return <div>{data?.map(i=><div key={i.id}>{i.name}</div>)}</div> }
function Dashboard(){ const data=useFetch('/api/items'); return <DashboardView data={data}/> }

این تقسیم باعث می‌شود تست hook و view جداگانه امکان‌پذیر و تغییر منطق دریافت داده بدون لمس رندر انجام شود.

مثال بک‌اند (Node.js / Express)
به‌جای نوشتن منطق اعتبارسنجی، منطق تجاری و دسترسی به دیتابیس در یک فایل کنترلر، آنها را جدا کنید:

// controller
async function createItem(req,res){ const item=await itemService.create(req.body); res.json(item) }
// service
async function create(data){ validate(data); return repository.insert(data) }

این ساختار واحدها را قابل تست می‌کند و تغییر در لایهٔ ذخیره‌سازی تأثیر کمتری روی کنترلر دارد.

برای مرجع بیشتر منابعی مثل Refactoring.Guru و کتاب "Clean Code" پیشنهاد می‌شوند. نکتهٔ عملی: اگر نوشتن تست برای یک تابع سخت است، احتمالاً آن تابع بیش از یک مسئولیت دارد — آن را شکسته و ساده کنید.

🔖 #Web #وب #Frontend #Backend #clean_code #SRP #React #Node.js #refactoring #architecture #best_practices

👤 Developix

💎 Channel: @DevelopixWeb

👍7❤1👎1🔥1

1K viewsedited 17:00

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

Fastify — فریم‌ورک وب سریع و سبک برای Node.js که برای عملکرد بالا و توسعهٔ روان طراحی شده. 🚀

هدف: پاسخ‌دهی سریع به درخواست‌ها، مصرف کمتر منابع و تجربهٔ توسعه بهتر با معماری پلاگینی و پشتیبانی از TypeScript.

مزایا و نکات کلیدی:
• ⭐ عملکرد بالا و بهره‌وری بهتر نسبت به Express
• 🔌 اکوسیستم پلاگین با قابلیت‌ گسترش آسان
• 📐 اعتبارسنجی مبتنی بر schema (AJV) برای APIهای امن‌تر
• 🧾 لاگینگ پیش‌فرض با pino و پشتیبانی از TypeScript

نمونهٔ نصب و استفادهٔ ساده:

npm install fastify

const fastify = require('fastify')({ logger: true })

fastify.get('/', async (request, reply) => {
  return { hello: 'world' }
})

fastify.listen({ port: 3000 })
  .then(() => console.log('listening on 3000'))
  .catch(err => fastify.log.error(err))

موارد کاربرد: APIهای با بار بالا، میکروسرویس‌ها، و سرویس‌هایی که به latency پایین حساس‌اند. نکتهٔ عملی: از schemaها برای تایپ امن و مستندسازی خودکار استفاده کنید. ✅

مستندات و گیت‌هاب: Docs — GitHub

امتحانش کنید و تجربه‌تون رو در کانال به اشتراک بذارید. ⚡

#Fastify #NodeJS #توسعه_وب

🔖 #Web #وب #Frontend #Backend #Fastify #NodeJS #توسعه_وب

👤 Developix

💎 Channel: @DevelopixWeb

👍2

1.13K views18:00

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

Next.js 🚀 برای توسعه‌دهندگان React

اگر با React کار می‌کنی و هنوز از Next.js استفاده نکردی، عملاً کلی قابلیت آمادهٔ Production رو از دست می‌دی؛ از SSR تا routing و image optimization بدون دردسر.

چرا Next.js؟
• Server-Side Rendering و Static Generation آمادهٔ استفاده 📦
• File-based routing؛ هر فایل در pages/ یک route است
• Image Optimization و next/image برای لود سریع‌تر
• API Routes برای ساخت backend سبک داخل همون پروژه

نصب سریع

npx create-next-app@latest my-app
cd my-app
npm run dev

یک صفحه ساده:

export default function Home() {
  return <h1>سلام Next.js 👋</h1>
}

برای پروژه‌های Dashboard، Landing Page، یا SaaS که SEO و سرعت مهم است، Next.js معمولاً انتخاب امن و استاندارد است.

Docs رسمی 👇
nextjs.org/docs
github.com/vercel/next.js

یک پروژه کوچک با Next.js بساز و کم‌کم ساختار پیش‌فرضش رو با نیازهای خودت تطبیق بده؛ تجربهٔ خوبی برای معماری Frontend مدرن می‌دهد. ⚙️

🔖 #Web #وب #Frontend #Backend #Next_js #React #Web #SSR #Frontend

👤 Developix

💎 Channel: @DevelopixWeb

👍5👎1

884 views18:00

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

📌 در این قطعه کد JavaScript، روی یک آرایه از اعداد عملیات sort، map و join انجام شده است. دقت کنید که sort به‌صورت پیش‌فرض روی رشته‌ها کار می‌کند و همچنین scope متغیر factor در تابع multiply تغییر می‌کند.

خروجی نهایی اجرای این کد در کنسول چیست؟

const nums = [3, 12, 2, 21, 5];

function multiply(arr, factor = 2) {
  arr.sort();
  factor = 10;
  return arr
    .map((n, i) => n * (factor - i))
    .join("-");
}

console.log(multiply(nums));
console.log(nums.join(","));

🔖 #Web #وب #Frontend #Backend

👤 Developix

💎 Channel: @DevelopixWeb

👍3

822 views17:00

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

🌙 Dark Mode با یک کلاس روی <html>

خیلی وقت‌ها برای پیاده‌سازی Dark Mode کلی if/else توی JS و کلی selector توی CSS می‌نویسیم، درحالی‌که می‌شه همه‌چیز رو تمیز و مقیاس‌پذیر با یک کلاس روی ریشه‌ی سند مدیریت کرد.

✅ ایده:
فقط روی تگ <html> یک کلاس مثل .dark ست می‌شه و بقیه‌ی استایل‌ها بر اساس همون کلاس عوض می‌شن. این الگو توی خیلی از Design Systemها و کتابخونه‌ها استفاده می‌شه.

🔧 نمونه‌ی ساده:

/* حالت پیش‌فرض (Light) */
:root {
  --bg: #ffffff;
  --fg: #111827;
}

/* وقتی Dark Mode فعاله */
html.dark {
  --bg: #0f172a;
  --fg: #e5e7eb;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  transition: background-color 150ms ease, color 150ms ease;
}

و در JS فقط یک بار toggle انجام می‌شه:

const root = document.documentElement;

function toggleTheme() {
  root.classList.toggle('dark');
}

✨ نکات کاربردی:
• با CSS Variable فقط یک‌بار رنگ‌ها رو تعریف می‌کنی و هرجا لازم بود از var(--bg) و var(--fg) استفاده می‌کنی.
• اگر تعداد رنگ‌ها زیاد شد، هنوز هم فقط در دو بلاک :root و html.dark ویرایش می‌شن و باقی کامپوننت‌ها دست نمی‌خورن.
• می‌شه این الگو رو با prefers-color-scheme هم ترکیب کرد تا بر اساس تم سیستم‌عامل، کلاس dark رو ست کنی.

📚 برای جزئیات بیشتر درباره CSS Custom Properties:
MDN - Using CSS custom properties

امتحان این الگو روی یک صفحه‌ی ساده، سریع‌ترین راه برای مرتب کردن تم پروژه‌های بعدی است و جلو کلی refactor دردناک رو می‌گیره.

🔖 #Web #وب #Frontend #Backend #CSS #Dark_Mode #Frontend #Best_Practices #Web

👤 Developix

💎 Channel: @DevelopixWeb

❤5

645 views17:00

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

Forwarded from ابر ویراک

⭕️ ویراک کلود
زیرساختی مطمئن برای کسب و کارهای آنلاین
🎁 20% شارژ بیشتر روی اولین واریزی
⚡️با کد معرف: 10% شارژ برای شما و 10% برای دوستتان!

🔘با IPv6 رایگان
🔘با IP مازاد
🔘تست رایگان 2 روزه
🔘فایروال اختصاصی
🔘با API برای حرفه‌ای ها
🔘پشتیبانی 24 ساعته
🔘آپلود رایگان

📞 همین حالا با ما تماس بگیرید و این فرصت فوق‌العاده رو از دست ندید!
🔻02191555530

🌐

Virakcloud.com

Please open Telegram to view this post

VIEW IN TELEGRAM

👍1

260 views16:30

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

👨‍💻 سوال کد برای توسعه‌دهندگان وب (JavaScript)

خروجی نهایی اجرای کد زیر در console چیست؟

به تفاوت execution context در arrow function و تابع معمولی، و همین‌طور رفتار this و arguments دقت کنید.

function outer() {
  const result = [];

  const obj = {
    value: 10,
    normal: function (x) {
      result.push("normal:" + this.value + "," + arguments.length);
      (function () {
        result.push("iife:" + (this.value ?? "undefined"));
      })();
    },
    arrow: (y) => {
      result.push("arrow:" + (this.value ?? "undefined") + "," + (typeof arguments));
    }
  };

  obj.normal(1, 2);
  obj.arrow(3);

  return result.join(" | ");
}

console.log(outer());

خروجی دقیق console.log(outer()) را بنویسید (همان رشته کامل، با همان ترتیب و کاراکترها).

🔖 #Web #وب #Frontend #Backend

👤 Developix

💎 Channel: @DevelopixWeb

👍2👎2

441 views18:00

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

Forwarded from کانال رسمی تک نت | Taknet

🚀 سرور اختصاصی با تنوع منابع برای هر نوع نیاز
⏺پورت اختصاصی
⏺آپلود رایگان
⏺تخفیف پلکانی ترافیک
⏺آپتایم 99.99%
⏺24 ساعت تست رایگان
⏺رائه IP مازاد
⏺پشتیبانی 24/7
⏺تحویل فوری
⏺ارائه سرویس Colocation
⏺بدون قطعی
⏺پرداخت ماهیانه

⏰ تعداد محدود – برای استفاده از این تخفیف ویژه سریع اقدام کن!
برای اطلاعات بیشتر و سفارش، تماس بگیر:
🔺 02191555530

💻

خرید سرور اختصاصی

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2

124 views16:30

About

Blog

Apps

Platform