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

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

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

❤7👍3

1.69K views12:10

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

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

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: @DevelopixJavanoscript

🔥8❤1

1.83K views20:28

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

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

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

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

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

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

👍15

7.62K views17:06

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

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

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

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

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

🔗 https://mentorjet.org

👍8🔥1

2.85K views16:02

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

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

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

💎 Channel: @DevelopixWeb

Please open Telegram to view this post

VIEW IN TELEGRAM

👍7❤1

3K views15:30

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

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

🔗

Rive.app

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

🔖

#UI #Animation #Crossplatform

👤 Mahdiyar

💎 Channel: @DevelopixWeb

Please open Telegram to view this post

VIEW IN TELEGRAM

❤5👍1

4.8K viewsedited 13:02

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

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

🔗

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.8K 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

768 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

1.01K 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.14K 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

887 views18:00

About

Blog

Apps

Platform