نسبت فشردهسازی (Compression Ratio) چیست؟
نسبت فشردهسازی، نسبت اندازه دادههای اولیه به اندازه دادههای فشردهشده است.
### فرمول:
نسبت فشردهسازی = اندازه اولیه ÷ اندازه پس از فشردهسازی
### مثال:
* فایل اولیه: صد کیلوبایت
* پس از فشردهسازی: بیست کیلوبایت
* نسبت فشردهسازی: ۱۰۰ ÷ ۲۰ = پنج به یک (یا بهصورت خلاصه: پنج)
هرچه این نسبت بزرگتر باشد، فشردهسازی مؤثرتر است و داده کمتری از طریق شبکه منتقل میشود.
---
## فشردهسازی در HTTP (مانند Gzip، Brotli، Deflate)
در این روش، سرور فایلهای متنی (مانند HTML، CSS، JS و JSON) را پیش از ارسال به کاربر، فشرده میکند.
### نمونهای از هدر پاسخ HTTP:
---
## فشردهسازی تصاویر (WebP، AVIF، JPEG XL)
فرمتهای تصویری از الگوریتمهای فشردهسازی مختلف استفاده میکنند:
* بدون افت کیفیت (Lossless): مانند PNG، WebP در حالت بدون افت
* با افت کیفیت (Lossy): مانند JPEG، WebP، AVIF
### مثال:
* تصویر PNG اولیه: پانصد کیلوبایت
* تصویر WebP فشردهشده: صد کیلوبایت
* نسبت فشردهسازی: پنج به یک
---
## فشردهسازی ویدیو و صدا (H.265، Opus، AAC)
کدکهای ویدیویی مانند H.265 میتوانند نسبت فشردهسازی ده به یک یا حتی بیشتر داشته باشند، در مقایسه با ویدیوهای خام.
---
## فشردهسازی پاسخهای API و پایگاههای داده
پاسخهای JSON در API را میتوان با gzip یا brotli فشرده کرد. برخی پایگاههای داده NoSQL مانند MongoDB از فشردهسازی بلادرنگ پشتیبانی میکنند.
---
## مقایسه الگوریتمهای فشردهسازی
| الگوریتم | نسبت فشردهسازی | سرعت | پشتیبانی در مرورگرها |
| -------- | --------------- | -------------- | ------------------------- |
| Gzip | سه تا شش به یک | سریع | همه مرورگرها |
| Brotli | پنج تا ده به یک | کندتر ولی بهتر | مرورگرهای مدرن |
| Deflate | دو تا پنج به یک | سریع | سازگار با مرورگرهای قدیمی |
---
## فعالسازی فشردهسازی در سرور
### در Nginx:
### در Node.js (Express):
---
## مثال عملی: مقایسه Gzip و Brotli
فرض کنید فایل bundle.js با حجم یک مگابایت داریم:
| الگوریتم | اندازه فشردهشده | نسبت فشردهسازی |
| --------------- | ------------------- | ----------------------------- |
| بدون فشردهسازی | یک مگابایت | یک به یک |
| Gzip (سطح ۶) | دویست کیلوبایت | پنج به یک |
| Brotli (سطح ۱۱) | صد و پنجاه کیلوبایت | حدود شش و شصت و هفت صدم به یک |
نتیجه: Brotli فشردهسازی بهتری ارائه میدهد، اما مصرف CPU بیشتری دارد.
---
## چگونه نسبت فشردهسازی را اندازهگیری کنیم؟
### در Chrome DevTools:
۱. تب Network را باز کنید
۲. فایل مورد نظر را انتخاب کنید (مثلاً فایلهای
۳. در بخش Header بررسی کنید:
*
*
### ابزارهای ارزیابی:
* Lighthouse (تب Performance)
* WebPageTest (نمایش میزان صرفهجویی در ترافیک)
---
## بهینهسازی فشردهسازی در پروژههای وب
✅ برای فایلهای استاتیک، از Brotli استفاده کنید (فشردهسازی بهتر)
✅ برای محتوای پویا، Gzip گزینه مناسبی است (سرعت بیشتر)
✅ تصاویر را بهینهسازی کنید (WebP/AVIF + ابزار Sharp در Node.js)
✅ فایلهای JS/CSS را پیش از فشردهسازی minify کنید (با Terser، CSSNano)
✅ کشکردن مناسب با
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
نسبت فشردهسازی، نسبت اندازه دادههای اولیه به اندازه دادههای فشردهشده است.
### فرمول:
نسبت فشردهسازی = اندازه اولیه ÷ اندازه پس از فشردهسازی
### مثال:
* فایل اولیه: صد کیلوبایت
* پس از فشردهسازی: بیست کیلوبایت
* نسبت فشردهسازی: ۱۰۰ ÷ ۲۰ = پنج به یک (یا بهصورت خلاصه: پنج)
هرچه این نسبت بزرگتر باشد، فشردهسازی مؤثرتر است و داده کمتری از طریق شبکه منتقل میشود.
---
## فشردهسازی در HTTP (مانند Gzip، Brotli، Deflate)
در این روش، سرور فایلهای متنی (مانند HTML، CSS، JS و JSON) را پیش از ارسال به کاربر، فشرده میکند.
### نمونهای از هدر پاسخ HTTP:
Content-Encoding: gzip
---
## فشردهسازی تصاویر (WebP، AVIF، JPEG XL)
فرمتهای تصویری از الگوریتمهای فشردهسازی مختلف استفاده میکنند:
* بدون افت کیفیت (Lossless): مانند PNG، WebP در حالت بدون افت
* با افت کیفیت (Lossy): مانند JPEG، WebP، AVIF
### مثال:
* تصویر PNG اولیه: پانصد کیلوبایت
* تصویر WebP فشردهشده: صد کیلوبایت
* نسبت فشردهسازی: پنج به یک
---
## فشردهسازی ویدیو و صدا (H.265، Opus، AAC)
کدکهای ویدیویی مانند H.265 میتوانند نسبت فشردهسازی ده به یک یا حتی بیشتر داشته باشند، در مقایسه با ویدیوهای خام.
---
## فشردهسازی پاسخهای API و پایگاههای داده
پاسخهای JSON در API را میتوان با gzip یا brotli فشرده کرد. برخی پایگاههای داده NoSQL مانند MongoDB از فشردهسازی بلادرنگ پشتیبانی میکنند.
---
## مقایسه الگوریتمهای فشردهسازی
| الگوریتم | نسبت فشردهسازی | سرعت | پشتیبانی در مرورگرها |
| -------- | --------------- | -------------- | ------------------------- |
| Gzip | سه تا شش به یک | سریع | همه مرورگرها |
| Brotli | پنج تا ده به یک | کندتر ولی بهتر | مرورگرهای مدرن |
| Deflate | دو تا پنج به یک | سریع | سازگار با مرورگرهای قدیمی |
---
## فعالسازی فشردهسازی در سرور
### در Nginx:
gzip on;
gzip_types text/html text/css application/javascript;
gzip_min_length 256;
gzip_comp_level 6; # سطح فشردهسازی از یک تا نه
### در Node.js (Express):
const compression = require('compression');
app.use(compression({ level: 6 })); // سطح فشردهسازی Gzip
---
## مثال عملی: مقایسه Gzip و Brotli
فرض کنید فایل bundle.js با حجم یک مگابایت داریم:
| الگوریتم | اندازه فشردهشده | نسبت فشردهسازی |
| --------------- | ------------------- | ----------------------------- |
| بدون فشردهسازی | یک مگابایت | یک به یک |
| Gzip (سطح ۶) | دویست کیلوبایت | پنج به یک |
| Brotli (سطح ۱۱) | صد و پنجاه کیلوبایت | حدود شش و شصت و هفت صدم به یک |
نتیجه: Brotli فشردهسازی بهتری ارائه میدهد، اما مصرف CPU بیشتری دارد.
---
## چگونه نسبت فشردهسازی را اندازهگیری کنیم؟
### در Chrome DevTools:
۱. تب Network را باز کنید
۲. فایل مورد نظر را انتخاب کنید (مثلاً فایلهای
.js
یا .css
)۳. در بخش Header بررسی کنید:
*
Content-Length
(اندازه پس از فشردهسازی)*
X-Original-Size
(در صورت ارسال توسط سرور)### ابزارهای ارزیابی:
* Lighthouse (تب Performance)
* WebPageTest (نمایش میزان صرفهجویی در ترافیک)
---
## بهینهسازی فشردهسازی در پروژههای وب
✅ برای فایلهای استاتیک، از Brotli استفاده کنید (فشردهسازی بهتر)
✅ برای محتوای پویا، Gzip گزینه مناسبی است (سرعت بیشتر)
✅ تصاویر را بهینهسازی کنید (WebP/AVIF + ابزار Sharp در Node.js)
✅ فایلهای JS/CSS را پیش از فشردهسازی minify کنید (با Terser، CSSNano)
✅ کشکردن مناسب با
Cache-Control
و استفاده از CDN#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
## نمونهای از بهینهسازی پروژه Vue.js
---
## نتیجهگیری
نسبت فشردهسازی**، یکی از شاخصهای کلیدی برای ارزیابی اثربخشی فشردهسازی در وب است.
فشردهسازی صحیح، موجب افزایش سرعت بارگذاری صفحات و کاهش مصرف ترافیک میشود.
* **نسبت مناسب برای متن: بین پنج تا ده به یک (Brotli)
* برای تصاویر: بین سه تا بیست به یک (WebP/AVIF)
* برای ویدیوها: بین ده تا صد به یک (H.265)
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
vue(),
// حالت ساده با Gzip
viteCompression(),
// پیکربندی کاملتر برای Brotli + Gzip
viteCompression({
algorithm: 'brotliCompress', // الگوریتم پیشفرض 'gzip' است
ext: '.br', // پسوند فایل Brotli
threshold: 10240, // حداقل اندازه فایل (بر حسب بایت)
verbose: true, // نمایش لاگ در حین پردازش
deleteOriginFile: false, // عدم حذف فایل اصلی پس از فشردهسازی
filter: /\.(js|css|json|html|ico|svg)(\?.*)?$/i, // الگوی فایلهای قابل فشردهسازی
}),
viteCompression({ algorithm: 'gzip' }), // پشتیبانی همزمان از Gzip
],
build: {
// تنظیمات اضافی برای ساخت
chunkSizeWarningLimit: 1600, // افزایش محدودیت هشدار برای اندازه چانکها
},
});
---
## نتیجهگیری
نسبت فشردهسازی**، یکی از شاخصهای کلیدی برای ارزیابی اثربخشی فشردهسازی در وب است.
فشردهسازی صحیح، موجب افزایش سرعت بارگذاری صفحات و کاهش مصرف ترافیک میشود.
* **نسبت مناسب برای متن: بین پنج تا ده به یک (Brotli)
* برای تصاویر: بین سه تا بیست به یک (WebP/AVIF)
* برای ویدیوها: بین ده تا صد به یک (H.265)
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
مقایسه `parseInt` و `parseFloat`: وقتی «Infinity» به یک تله تبدیل میشود 🤨
اخیراً با یک مشکل غیرمنتظره برخورد کردم: در یکی از شبیهسازیهایم، نتیجهی محاسبات به بینهایت میرسید. همهی دادهها را بهصورت رشته در فایل CSV ذخیره میکردم و سپس آنها را با استفاده از
---
### نحوهی عملکرد توابع تجزیه
✔️ `parseInt`
⏺️ نویسهها را از چپ به راست میخواند، با یک علامت اختیاری (+ یا –) شروع میکند؛
⏺️ بعد از علامت، انتظار یک رقم (صفر تا نه) یا در صورت وجود مبنای عددی خاص، حروف مربوط به آن مبنا را دارد؛
⏺️ با رسیدن به اولین نویسهی نامعتبر، فرایند تجزیه متوقف میشود.
مثالها:
---
✔️ `parseFloat`
⏺️ روندی مشابه دارد، اما علاوه بر آن، نقطهی اعشار (
⏺️ در مشخصات این تابع، "Infinity" (و "-Infinity") بهعنوان یک مقدار عددی معتبر تعریف شده است.
مثالها:
---
### 👀 تله: "Infinity"
در کدی مانند زیر:
✔️
✔️ اما
در نتیجه ممکن است هم
مقدار
---
### ❓ پس چه باید کرد؟
۱️⃣ بر اساس نوع داده، از تابع مناسب استفاده کنید:
✔️
✔️
۲️⃣ بررسی کنید که مقدار نهایی، محدود و واقعی باشد:
در غیر این صورت، بدون بررسی مقدار نهایی و بدون مدیریت صریح "Infinity"، خطر از دست رفتن یا خراب شدن دادهها وجود دارد. 🤷🏻♀️
---
امیدوارم تجزیهگرهای شما همیشه درست و بیدردسر کار کنند. 🤝
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
اخیراً با یک مشکل غیرمنتظره برخورد کردم: در یکی از شبیهسازیهایم، نتیجهی محاسبات به بینهایت میرسید. همهی دادهها را بهصورت رشته در فایل CSV ذخیره میکردم و سپس آنها را با استفاده از
parseInt
تجزیه میکردم. تنها یک مقدار "Infinity" باعث شد کل آمار من بههم بریزد — و مدت زیادی طول کشید تا بفهمم مشکل از کجاست. 😢---
### نحوهی عملکرد توابع تجزیه
✔️ `parseInt`
⏺️ نویسهها را از چپ به راست میخواند، با یک علامت اختیاری (+ یا –) شروع میکند؛
⏺️ بعد از علامت، انتظار یک رقم (صفر تا نه) یا در صورت وجود مبنای عددی خاص، حروف مربوط به آن مبنا را دارد؛
⏺️ با رسیدن به اولین نویسهی نامعتبر، فرایند تجزیه متوقف میشود.
مثالها:
parseInt("42px", 10); // خروجی: ۴۲
parseInt("10.5", 10); // خروجی: ۱۰
parseInt("Infinity", 10); // خروجی: NaN — چون اولین نویسه حرف است نه رقم
---
✔️ `parseFloat`
⏺️ روندی مشابه دارد، اما علاوه بر آن، نقطهی اعشار (
.
) و حروف e/E
برای نمایی (exponent) را نیز شناسایی میکند؛⏺️ در مشخصات این تابع، "Infinity" (و "-Infinity") بهعنوان یک مقدار عددی معتبر تعریف شده است.
مثالها:
parseFloat("3.14xyz"); // خروجی: ۳٫۱۴
parseFloat("1e3"); // خروجی: ۱۰۰۰
parseFloat("Infinity"); // خروجی: Infinity
parseFloat("Infinityxyz"); // خروجی: Infinity — ادامهی رشته نادیده گرفته میشود
---
### 👀 تله: "Infinity"
در کدی مانند زیر:
parseFloat("Infinity"); // → Infinity
parseInt("Infinity", 10); // → NaN
✔️
parseFloat
مقدار "Infinity" را بهعنوان یک عدد خاص تشخیص داده و همان را برمیگرداند.✔️ اما
parseInt
با مشاهدهی نویسهی اول که حرف I
است (و نه یک رقم یا علامت)، مستقیماً NaN
برمیگرداند.در نتیجه ممکن است هم
Infinity
دریافت کنید و هم NaN
. نکتهی مهم این است که بررسی سادهای مثل:if (!isNaN(value)) { … }
مقدار
Infinity
را عبور میدهد (چون isNaN(Infinity) === false
است)، ولی NaN
را رد میکند.---
### ❓ پس چه باید کرد؟
۱️⃣ بر اساس نوع داده، از تابع مناسب استفاده کنید:
✔️
parseInt
→ فقط برای اعداد صحیح، بدون حالتهای خاص؛✔️
parseFloat
→ برای اعداد اعشاری، نمایی و مقادیر Infinity
یا -Infinity
.۲️⃣ بررسی کنید که مقدار نهایی، محدود و واقعی باشد:
const v = parseFloat(raw);
if (!Number.isFinite(v)) {
// اینجا هم NaN و هم ±Infinity شناسایی و فیلتر میشوند
}
در غیر این صورت، بدون بررسی مقدار نهایی و بدون مدیریت صریح "Infinity"، خطر از دست رفتن یا خراب شدن دادهها وجود دارد. 🤷🏻♀️
---
امیدوارم تجزیهگرهای شما همیشه درست و بیدردسر کار کنند. 🤝
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
محاسبات اعشاری در رایانهها
زبان برنامهنویسی شما مشکلی ندارد؛ این چیزی است که به آن محاسبات با ممیز شناور (Floating Point Math) گفته میشود. رایانهها بهصورت ذاتی تنها میتوانند اعداد صحیح را ذخیره کنند، بنابراین برای نمایش اعداد اعشاری به روشی خاص نیاز دارند — و این روش همیشه کاملاً دقیق نیست. به همین دلیل است که اغلب مواقع، حاصل جمع صفر ممیز یک (۰٫۱) و صفر ممیز دو (۰٫۲) دقیقاً برابر با صفر ممیز سه (۰٫۳) نخواهد بود.
### چرا چنین اتفاقی میافتد؟
این موضوع در واقع پدیدهای جالب است. در سیستم عددی مبنای ده (یعنی همان سیستمی که ما انسانها استفاده میکنیم)، تنها میتوان کسرهایی را بهصورت دقیق نمایش داد که مخرج آنها دارای فاکتورهای اولِ ده باشند. عدد ده تنها دو فاکتور اول دارد: دو و پنج. بنابراین کسری مانند یک دوم (۱/۲)**، **یک چهارم (۱/۴)**، **یک پنجم (۱/۵)**، **یک هشتم (۱/۸) و یک دهم (۱/۱۰) را میتوان بهراحتی در این سیستم نمایش داد، زیرا مخرج آنها از همین فاکتورهای اول ساخته شدهاند.
در مقابل، کسرهایی مانند یک سوم (۱/۳)**، **یک ششم (۱/۶)**، **یک هفتم (۱/۷) و یک نهم (۱/۹) در مبنای ده بهصورت اعشارهای تکرارشونده نمایش داده میشوند، چرا که مخرج آنها شامل فاکتورهای اولی هستند که در ترکیب ده قرار ندارند (مانند سه یا هفت).
### اما در مبنای دودویی (مبنای دو) چطور؟
در سیستم باینری (مبنای دو)، تنها فاکتور اول موجود عدد دو است. بنابراین فقط میتوان کسرهایی را دقیق نمایش داد که مخرج آنها از فاکتور دو تشکیل شده باشد. در این سیستم، کسری مانند یک دوم (۱/۲)**، **یک چهارم (۱/۴) و یک هشتم (۱/۸) بدون خطا نمایش داده میشوند، اما کسرهایی مانند یک پنجم (۱/۵) یا یک دهم (۱/۱۰) بهصورت اعشار تکرارشونده در میآیند.
از آنجا که ۰٫۱ و ۰٫۲ در مبنای ده کسرهایی تمیز و واضح هستند (به ترتیب معادل با ۱/۱۰ و ۱/۵)، اما در مبنای دو که رایانه استفاده میکند، به شکل اعشارهای تکرارشونده درمیآیند. بنابراین وقتی رایانه عملیات ریاضی بر روی این مقادیر انجام میدهد، مقداری خطا و باقیمانده ایجاد میشود که در هنگام تبدیل به نمایش دهدهی (مبنای ده، برای انسان) دیده میشود.
### برای نمونه:
وقتی در چند زبان برنامهنویسی مختلف حاصل یک بعلاوه دو (۱ + ۲) را به خروجی استاندارد میفرستیم، نتیجه همیشه دقیق است — زیرا با اعداد صحیح سروکار داریم. اما وقتی پای اعداد اعشاری مانند ۰٫۱ و ۰٫۲ وسط باشد، این خطاها به چشم میآیند.
---
این پدیده یکی از واقعیتهای بنیادین در محاسبات عددی است و بهخاطر نحوه ذخیرهسازی اعداد اعشاری در حافظه رایانهها به وجود میآید. راهحلهایی برای کاهش یا کنترل این خطاها وجود دارد (مانند گرد کردن دستی یا استفاده از کتابخانههای خاص برای دقت بالا)، اما اصل مشکل به ساختار عددی دودویی بازمیگردد.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
زبان برنامهنویسی شما مشکلی ندارد؛ این چیزی است که به آن محاسبات با ممیز شناور (Floating Point Math) گفته میشود. رایانهها بهصورت ذاتی تنها میتوانند اعداد صحیح را ذخیره کنند، بنابراین برای نمایش اعداد اعشاری به روشی خاص نیاز دارند — و این روش همیشه کاملاً دقیق نیست. به همین دلیل است که اغلب مواقع، حاصل جمع صفر ممیز یک (۰٫۱) و صفر ممیز دو (۰٫۲) دقیقاً برابر با صفر ممیز سه (۰٫۳) نخواهد بود.
### چرا چنین اتفاقی میافتد؟
این موضوع در واقع پدیدهای جالب است. در سیستم عددی مبنای ده (یعنی همان سیستمی که ما انسانها استفاده میکنیم)، تنها میتوان کسرهایی را بهصورت دقیق نمایش داد که مخرج آنها دارای فاکتورهای اولِ ده باشند. عدد ده تنها دو فاکتور اول دارد: دو و پنج. بنابراین کسری مانند یک دوم (۱/۲)**، **یک چهارم (۱/۴)**، **یک پنجم (۱/۵)**، **یک هشتم (۱/۸) و یک دهم (۱/۱۰) را میتوان بهراحتی در این سیستم نمایش داد، زیرا مخرج آنها از همین فاکتورهای اول ساخته شدهاند.
در مقابل، کسرهایی مانند یک سوم (۱/۳)**، **یک ششم (۱/۶)**، **یک هفتم (۱/۷) و یک نهم (۱/۹) در مبنای ده بهصورت اعشارهای تکرارشونده نمایش داده میشوند، چرا که مخرج آنها شامل فاکتورهای اولی هستند که در ترکیب ده قرار ندارند (مانند سه یا هفت).
### اما در مبنای دودویی (مبنای دو) چطور؟
در سیستم باینری (مبنای دو)، تنها فاکتور اول موجود عدد دو است. بنابراین فقط میتوان کسرهایی را دقیق نمایش داد که مخرج آنها از فاکتور دو تشکیل شده باشد. در این سیستم، کسری مانند یک دوم (۱/۲)**، **یک چهارم (۱/۴) و یک هشتم (۱/۸) بدون خطا نمایش داده میشوند، اما کسرهایی مانند یک پنجم (۱/۵) یا یک دهم (۱/۱۰) بهصورت اعشار تکرارشونده در میآیند.
از آنجا که ۰٫۱ و ۰٫۲ در مبنای ده کسرهایی تمیز و واضح هستند (به ترتیب معادل با ۱/۱۰ و ۱/۵)، اما در مبنای دو که رایانه استفاده میکند، به شکل اعشارهای تکرارشونده درمیآیند. بنابراین وقتی رایانه عملیات ریاضی بر روی این مقادیر انجام میدهد، مقداری خطا و باقیمانده ایجاد میشود که در هنگام تبدیل به نمایش دهدهی (مبنای ده، برای انسان) دیده میشود.
### برای نمونه:
وقتی در چند زبان برنامهنویسی مختلف حاصل یک بعلاوه دو (۱ + ۲) را به خروجی استاندارد میفرستیم، نتیجه همیشه دقیق است — زیرا با اعداد صحیح سروکار داریم. اما وقتی پای اعداد اعشاری مانند ۰٫۱ و ۰٫۲ وسط باشد، این خطاها به چشم میآیند.
---
این پدیده یکی از واقعیتهای بنیادین در محاسبات عددی است و بهخاطر نحوه ذخیرهسازی اعداد اعشاری در حافظه رایانهها به وجود میآید. راهحلهایی برای کاهش یا کنترل این خطاها وجود دارد (مانند گرد کردن دستی یا استفاده از کتابخانههای خاص برای دقت بالا)، اما اصل مشکل به ساختار عددی دودویی بازمیگردد.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
❤1
⛽️ npmgraph: ابزاری برای نمایش گراف وابستگیهای ماژولهای npm
[مشاهده در وبسایت](https://npmgraph.js.org/)
این ابزار مبتنی بر وب، امکان مشاهدهی گراف وابستگیهای ماژولهای npm را به شکلی بصری فراهم میکند. تنها کافیست نام یک یا چند بستهی npm (یا حتی فایل
شما میتوانید بستهها را بر اساس معیارهای گوناگون — مانند تعداد نگهدارندگان (maintainers) — رنگبندی کنید. همچنین، امکان دانلود نسخهی برداری (SVG) از نمودارها نیز فراهم است تا بتوانید از آنها در مستندات یا ارائههای خود استفاده نمایید.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
[مشاهده در وبسایت](https://npmgraph.js.org/)
این ابزار مبتنی بر وب، امکان مشاهدهی گراف وابستگیهای ماژولهای npm را به شکلی بصری فراهم میکند. تنها کافیست نام یک یا چند بستهی npm (یا حتی فایل
package.json
پروژهی خود) را وارد کنید تا نمایی گرافیکی از وابستگیها، از جمله نقاط تقاطع میان آنها، در اختیارتان قرار گیرد.شما میتوانید بستهها را بر اساس معیارهای گوناگون — مانند تعداد نگهدارندگان (maintainers) — رنگبندی کنید. همچنین، امکان دانلود نسخهی برداری (SVG) از نمودارها نیز فراهم است تا بتوانید از آنها در مستندات یا ارائههای خود استفاده نمایید.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
npmgraph.js.org
npmgraph - NPM Dependency Diagrams
Graph / visualize of npm dependencies
بیشتر خطاهای نرمافزاری ناشی از فرضیاتی هستند که متوجه نبودیم آنها را پذیرفتهایم.
من اغلب نیاز دارم بهسرعت نسخهٔ ماژولهای نصبشده در پوشهٔ node_modules را بررسی کنم. راهکارهای فعلی مانند اجرای دستور npm list هم کند هستند و هم خروجی پراکنده و غیرمتمرکزی ارائه میدهند. بررسی نسخهٔ ماژول در فایل package.json آن ماژول نیز وقتگیر است و اطلاعاتی دربارهٔ سایر نسخههای همان ماژول در پروژه نمیدهد.
ابزار qnm این مشکل را حل کرده است. این ابزار، اطلاعاتی سریع و دقیق دربارهٔ ماژولهای نصبشده ارائه میدهد. qnm از هر دو ابزار npm و yarn پشتیبانی میکند و به شما امکان میدهد نسخههای ماژولهای مورد نظر خود را بهراحتی و با سرعت شناسایی کنید.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
من اغلب نیاز دارم بهسرعت نسخهٔ ماژولهای نصبشده در پوشهٔ node_modules را بررسی کنم. راهکارهای فعلی مانند اجرای دستور npm list هم کند هستند و هم خروجی پراکنده و غیرمتمرکزی ارائه میدهند. بررسی نسخهٔ ماژول در فایل package.json آن ماژول نیز وقتگیر است و اطلاعاتی دربارهٔ سایر نسخههای همان ماژول در پروژه نمیدهد.
ابزار qnm این مشکل را حل کرده است. این ابزار، اطلاعاتی سریع و دقیق دربارهٔ ماژولهای نصبشده ارائه میدهد. qnm از هر دو ابزار npm و yarn پشتیبانی میکند و به شما امکان میدهد نسخههای ماژولهای مورد نظر خود را بهراحتی و با سرعت شناسایی کنید.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
php-node یک ماژول بومی برای Node است که امکان اجرای برنامههای PHP را در محیط Node فراهم میکند.
چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامههای قدیمی، ساخت اپلیکیشنهای ترکیبی PHP و JavaScript، یا حتی اپلیکیشنهای Nodeای که به هر دلیلی نیاز دارند بخشهایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همانطور که در این مطلب مشاهده میکنیم.php-node یک ماژول بومی برای Node است که امکان اجرای برنامههای PHP را در محیط Node فراهم میکند.
چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامههای قدیمی، ساخت اپلیکیشنهای ترکیبی PHP و JavaScript، یا حتی اپلیکیشنهای Nodeای که به هر دلیلی نیاز دارند بخشهایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همانطور که در این مطلب مشاهده میکنیم.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامههای قدیمی، ساخت اپلیکیشنهای ترکیبی PHP و JavaScript، یا حتی اپلیکیشنهای Nodeای که به هر دلیلی نیاز دارند بخشهایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همانطور که در این مطلب مشاهده میکنیم.php-node یک ماژول بومی برای Node است که امکان اجرای برنامههای PHP را در محیط Node فراهم میکند.
چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامههای قدیمی، ساخت اپلیکیشنهای ترکیبی PHP و JavaScript، یا حتی اپلیکیشنهای Nodeای که به هر دلیلی نیاز دارند بخشهایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همانطور که در این مطلب مشاهده میکنیم.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤2👍1
DevDocs.io وبسایتی است که دسترسی آسان و سریع به مستندات مربوط به فناوریها و زبانهای برنامهنویسی مختلف را فراهم میکند. در این سایت، مستندات مربوط به موضوعاتی مانند HTML، CSS، JavaScript، پایتون، روبی، پیاچپی، ریاکت، ویوجیاس، نودجیاس و بسیاری فناوری دیگر گردآوری شدهاند.
برتری اصلی DevDocs.io در این است که همه مستندات در یک پلتفرم یکپارچه گرد آمدهاند و از طریق رابط کاربری ساده و کاربردی، بهراحتی قابل جستوجو و مرور هستند. کاربران میتوانند با استفاده از جستوجو یا دستهبندیها، به سرعت به اطلاعات موردنیاز خود دست پیدا کنند.
خبر خوب اینکه این وب سایت امکان کش کردن مستندات را روی کش مرورگر میدهد و در زمان محدودیت اینترنت می توانید به راحتی به مستندات دسترسی داشته باشید
🔗 https://devdocs.io/offline
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
برتری اصلی DevDocs.io در این است که همه مستندات در یک پلتفرم یکپارچه گرد آمدهاند و از طریق رابط کاربری ساده و کاربردی، بهراحتی قابل جستوجو و مرور هستند. کاربران میتوانند با استفاده از جستوجو یا دستهبندیها، به سرعت به اطلاعات موردنیاز خود دست پیدا کنند.
خبر خوب اینکه این وب سایت امکان کش کردن مستندات را روی کش مرورگر میدهد و در زمان محدودیت اینترنت می توانید به راحتی به مستندات دسترسی داشته باشید
🔗 https://devdocs.io/offline
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
❤1
### تابآوری توسعهدهندگان فرانتاند در شرایط جنگی و محدودیت اینترنت
در شرایطی مانند قطعی اینترنت جهانی یا اینترنت ملی، داشتن آمادگی از پیش میتواند مانع از توقف کامل روند توسعه شود. توصیههای زیر برای حفظ کارایی و ارتباط در این شرایط پیشنهاد میشود:
۱. استفاده از مخازن داخلی (Mirror) برای نصب پکیجها
در صورت قطع دسترسی به npm یا سایر ریجیستریهای خارجی، از آینههای داخلی برای نصب پکیجها بهره بگیرید.
🔗 [راهنمای دسترسی به مخزن داخلی npm در اینترنت ملی](https://roocket.ir/discuss/%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C-%D8%A8%D9%87-%D9%85%D8%AE%D8%B1%D9%86-npm-%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA-%D9%85%D9%84%DB%8C-%D8%B1%D8%A7%D9%87-%D8%AD%D9%84/)
۲. ورود به سرویس هوش مصنوعی «اولایآی» از پیش انجام شود
در زمانهای بحرانی، دسترسی به حساب ممکن است با مشکل مواجه شود. بهتر است از همین حالا وارد حساب خود شوید.
🔗 [ورود به avalAI](https://chat.avalai.ir/chat)
۳. لاگین در پیامرسانهای داخلی مطرح (مانند ایتا، بله، سروش و ...) را فراموش نکنید
در صورت اختلال در پیامرسانهای بینالمللی، ارتباط تیمی ممکن است به پیامرسانهای داخلی منتقل شود. پیشنهاد میشود حساب کاربری خود را از پیش ایجاد و فعال نمایید.
۴. مستندات و پکیجهای پراستفاده را از قبل دانلود و ذخیره کنید
کتابخانهها و ابزارهایی مانند React، Vue، Next.js، Tailwind و همچنین مستندات مربوط به APIها و ابزارهای توسعه را آفلاین نگهداری کنید. استفاده از ابزارهایی مانند DevDocs [+پست قبلی ]میتواند مفید باشد.
۵. استفاده از پیامرسان «سروش پلاس» برای ارتباط با خارج از کشور
بر اساس گزارشها، پیامرسان سروش امکان ارتباط کاربران خارج از کشور را فراهم کرده است. این گزینه در شرایط خاص میتواند جایگزینی موقت باشد.
🔗 [جزئیات بیشتر در زومیت](https://www.zoomit.ir/tech-iran/442373-soroush-plus-confirms-users-outside-of-iran/)
اگر تجربه و یا موضوع دیگری را سراغ دارید در بخش نظرات بیان کنید
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
در شرایطی مانند قطعی اینترنت جهانی یا اینترنت ملی، داشتن آمادگی از پیش میتواند مانع از توقف کامل روند توسعه شود. توصیههای زیر برای حفظ کارایی و ارتباط در این شرایط پیشنهاد میشود:
۱. استفاده از مخازن داخلی (Mirror) برای نصب پکیجها
در صورت قطع دسترسی به npm یا سایر ریجیستریهای خارجی، از آینههای داخلی برای نصب پکیجها بهره بگیرید.
🔗 [راهنمای دسترسی به مخزن داخلی npm در اینترنت ملی](https://roocket.ir/discuss/%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C-%D8%A8%D9%87-%D9%85%D8%AE%D8%B1%D9%86-npm-%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA-%D9%85%D9%84%DB%8C-%D8%B1%D8%A7%D9%87-%D8%AD%D9%84/)
۲. ورود به سرویس هوش مصنوعی «اولایآی» از پیش انجام شود
در زمانهای بحرانی، دسترسی به حساب ممکن است با مشکل مواجه شود. بهتر است از همین حالا وارد حساب خود شوید.
🔗 [ورود به avalAI](https://chat.avalai.ir/chat)
۳. لاگین در پیامرسانهای داخلی مطرح (مانند ایتا، بله، سروش و ...) را فراموش نکنید
در صورت اختلال در پیامرسانهای بینالمللی، ارتباط تیمی ممکن است به پیامرسانهای داخلی منتقل شود. پیشنهاد میشود حساب کاربری خود را از پیش ایجاد و فعال نمایید.
۴. مستندات و پکیجهای پراستفاده را از قبل دانلود و ذخیره کنید
کتابخانهها و ابزارهایی مانند React، Vue، Next.js، Tailwind و همچنین مستندات مربوط به APIها و ابزارهای توسعه را آفلاین نگهداری کنید. استفاده از ابزارهایی مانند DevDocs [+پست قبلی ]میتواند مفید باشد.
۵. استفاده از پیامرسان «سروش پلاس» برای ارتباط با خارج از کشور
بر اساس گزارشها، پیامرسان سروش امکان ارتباط کاربران خارج از کشور را فراهم کرده است. این گزینه در شرایط خاص میتواند جایگزینی موقت باشد.
🔗 [جزئیات بیشتر در زومیت](https://www.zoomit.ir/tech-iran/442373-soroush-plus-confirms-users-outside-of-iran/)
اگر تجربه و یا موضوع دیگری را سراغ دارید در بخش نظرات بیان کنید
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
وبسایت آموزشی راکت
دسترسی به مخرن npm در اینترنت ملی-راه حل
سلام دوستان ، امیدوارم که سلامت باشید ، اگر نیاز پیدا کردید تا به مخرن npm دسترسی داشته باشید تا بتونید پیکج های مورد نظرتون رو نصب کنید ، با توجه به اینترانت شدن شبکه ، میتونید از این mirror استفاده...
👎1
جاوااسکریپت | JavaScript pinned «### تابآوری توسعهدهندگان فرانتاند در شرایط جنگی و محدودیت اینترنت در شرایطی مانند قطعی اینترنت جهانی یا اینترنت ملی، داشتن آمادگی از پیش میتواند مانع از توقف کامل روند توسعه شود. توصیههای زیر برای حفظ کارایی و ارتباط در این شرایط پیشنهاد میشود: ۱.…»
This media is not supported in your browser
VIEW IN TELEGRAM
✨امام سجاد علیهالسلام عموی خود #عباس علیه السلام را چنین توصیف میفرماید:
💠 خدا عمویم عباس را رحمت کند که ایثار کرد و خود را به سختی افکند و در راه برادرش جانبازی کرد، تا آنکه دستهایش از پیکر جدا گردید.
⚡️آنگاه خداوند به جای آنها دو بال به وی عنایت فرمود که در بهشت همراه فرشتگان پرواز کند؛ همانسان که برای جعفر طیار قرار داد.
⚜️ عباس نزد خداوند مقامی دارد که همه شهدا در قیامت بدان غبطه میخورند.
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
💠 خدا عمویم عباس را رحمت کند که ایثار کرد و خود را به سختی افکند و در راه برادرش جانبازی کرد، تا آنکه دستهایش از پیکر جدا گردید.
⚡️آنگاه خداوند به جای آنها دو بال به وی عنایت فرمود که در بهشت همراه فرشتگان پرواز کند؛ همانسان که برای جعفر طیار قرار داد.
⚜️ عباس نزد خداوند مقامی دارد که همه شهدا در قیامت بدان غبطه میخورند.
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤10👎6😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Slideout.js
یک کتابخانهٔ سبک برای ایجاد منوهای کشویی جانبی است. این ابزار از حرکات لمسی (سوايپ) پشتیبانی میکند، به هیچگونه چارچوب خارجی وابسته نیست و برای طراحی رابطهای کاربری واکنشگرا در دستگاههای موبایل و دسکتاپ کاملاً مناسب است.
🔗https://slideout.js.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک کتابخانهٔ سبک برای ایجاد منوهای کشویی جانبی است. این ابزار از حرکات لمسی (سوايپ) پشتیبانی میکند، به هیچگونه چارچوب خارجی وابسته نیست و برای طراحی رابطهای کاربری واکنشگرا در دستگاههای موبایل و دسکتاپ کاملاً مناسب است.
🔗https://slideout.js.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
**PDFSlick نسخهٔ سه: مشاهده و تعامل با اسناد PDF در اپلیکیشنهای JavaScript**
یک نمایشگر کامل و قدرتمند PDF برای اپلیکیشنهای React، Solid، Svelte و JavaScript خالص است. این ابزار که بر پایهٔ PDF.js توسعه یافته، مجموعهای گسترده از قابلیتها را ارائه میدهد—از مشاهدهٔ سادهٔ فایلهای PDF گرفته تا کار با اسناد متعدد و حجیم همراه با امکان افزودن یادداشت.
نسخهٔ سه این ابزار به PDF.js نسخهٔ پنج ارتقا یافته و اکنون از پروفایلهای ICC پشتیبانی میکند، عملکرد بهتری در نمایش فرمت JPEG 2000 دارد و رندر صفحات بزرگ نیز بهطور چشمگیری بهبود یافته است.
دمو:
https://pdfslick.dev/examples/pdf-viewer-app
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک نمایشگر کامل و قدرتمند PDF برای اپلیکیشنهای React، Solid، Svelte و JavaScript خالص است. این ابزار که بر پایهٔ PDF.js توسعه یافته، مجموعهای گسترده از قابلیتها را ارائه میدهد—از مشاهدهٔ سادهٔ فایلهای PDF گرفته تا کار با اسناد متعدد و حجیم همراه با امکان افزودن یادداشت.
نسخهٔ سه این ابزار به PDF.js نسخهٔ پنج ارتقا یافته و اکنون از پروفایلهای ICC پشتیبانی میکند، عملکرد بهتری در نمایش فرمت JPEG 2000 دارد و رندر صفحات بزرگ نیز بهطور چشمگیری بهبود یافته است.
دمو:
https://pdfslick.dev/examples/pdf-viewer-app
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
هیهات منا الذله
🖤 سالروز شهادت حضرت اباعبدالله(ع)
🔗 https://t.me/motahari_ir/4452
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
🖤 سالروز شهادت حضرت اباعبدالله(ع)
🔗 https://t.me/motahari_ir/4452
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤12👎2
در نسخهی اخیر مرورگر کروم، سرانجام مدل زبانی بزرگ «جِمینای نانو» همراه با رابط برنامهنویسی خلاصهساز (Summarizer API) معرفی شده است.
[لینک توضیحات رسمی](https://developer.chrome.com/docs/ai/summarizer-api?hl=fa)
این مدل در صورت نیاز، بر روی رایانهی کاربر دانلود میشود، حجمی در حدود چند گیگابایت دارد، به چهار گیگابایت حافظهی گرافیکی نیاز دارد و صرفاً بر روی دستگاههای دسکتاپ قابل اجراست.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
[لینک توضیحات رسمی](https://developer.chrome.com/docs/ai/summarizer-api?hl=fa)
این مدل در صورت نیاز، بر روی رایانهی کاربر دانلود میشود، حجمی در حدود چند گیگابایت دارد، به چهار گیگابایت حافظهی گرافیکی نیاز دارد و صرفاً بر روی دستگاههای دسکتاپ قابل اجراست.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
Chrome for Developers
با هوش مصنوعی داخلی خلاصه کنید | AI on Chrome | Chrome for Developers
مقالات طولانی، اسناد پیچیده، یا حتی گفتگوهای چت پر جنب و جوش را به خلاصه های مختصر و روشنگرانه تقسیم کنید.
This media is not supported in your browser
VIEW IN TELEGRAM
امام سجاد عليه السلام فرمود:
⬅️«شكيبائى» نسبت به «ايمان» چـون سـر نسبت به پـيكر اسـت. و كسى كه «صبر» ندارد «ايمان» ندارد.
🖤 سالروز شهادت زینالعابدین حضرت امام سجاد(ع) تسلیت باد.
🔗 https://t.me/raefipourfans/125912
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
⬅️«شكيبائى» نسبت به «ايمان» چـون سـر نسبت به پـيكر اسـت. و كسى كه «صبر» ندارد «ايمان» ندارد.
🖤 سالروز شهادت زینالعابدین حضرت امام سجاد(ع) تسلیت باد.
🔗 https://t.me/raefipourfans/125912
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤10👎3
نسخهی صد و سی و هشتم مرورگر کروم منتشر شد.
### قابلیتهای جدید:
#### • رابط برنامهنویسی هوش مصنوعی (AI API) در مرورگر
اکنون میتوان برخی از قابلیتهای هوش مصنوعی را بهصورت مستقیم در مرورگر و روی دستگاه کاربر استفاده کرد:
* Translator API – افزودن ترجمهی همزمان به اپلیکیشنهای وب
* Language Detector API – شناسایی زبان متن
* Summarizer API – تولید خلاصه برای مقالهها، گفتگوها و نظرات کاربران
#### • ویژگیهای جدید در CSS
* progress() – محاسبهی میزان پیشرفت یک مقدار میان دو مقدار دیگر و بازگرداندن عددی بدون واحد
* sibling-index() و sibling-count() – استایلدهی به عناصر بر اساس موقعیت آنها در میان عناصر همسطح؛ دیگر نیازی به استفاده از
* abs() و sign() – محاسبهی قدر مطلق و علامت عدد
#### • پشتیبانی از دستگاههای تاشو
به کمک Viewport Segments API میتوان طرحبندی صفحات را با صفحهنمایشهای تاشو سازگار کرد.
برای اطلاعات بیشتر به لینک زیر مراجعه کنید:
[chrome.com/blog/new-in-chrome-138](https://developer.chrome.com/blog/new-in-chrome-138)
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
### قابلیتهای جدید:
#### • رابط برنامهنویسی هوش مصنوعی (AI API) در مرورگر
اکنون میتوان برخی از قابلیتهای هوش مصنوعی را بهصورت مستقیم در مرورگر و روی دستگاه کاربر استفاده کرد:
* Translator API – افزودن ترجمهی همزمان به اپلیکیشنهای وب
* Language Detector API – شناسایی زبان متن
* Summarizer API – تولید خلاصه برای مقالهها، گفتگوها و نظرات کاربران
#### • ویژگیهای جدید در CSS
* progress() – محاسبهی میزان پیشرفت یک مقدار میان دو مقدار دیگر و بازگرداندن عددی بدون واحد
* sibling-index() و sibling-count() – استایلدهی به عناصر بر اساس موقعیت آنها در میان عناصر همسطح؛ دیگر نیازی به استفاده از
:nth-child(۱)`،
:nth-child(۲)` و غیره نیست* abs() و sign() – محاسبهی قدر مطلق و علامت عدد
#### • پشتیبانی از دستگاههای تاشو
به کمک Viewport Segments API میتوان طرحبندی صفحات را با صفحهنمایشهای تاشو سازگار کرد.
برای اطلاعات بیشتر به لینک زیر مراجعه کنید:
[chrome.com/blog/new-in-chrome-138](https://developer.chrome.com/blog/new-in-chrome-138)
// Traduce textos en JavaScript con IA
const translator = await Translator.create({
sourceLanguage: "es", // Español
targetLanguage: "en", // English
})
const translation =
await translator.translate("Hola, mundo")
console.log(translation) // "Hello, world"
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
Google
Google Chrome - The Fast & Secure Web Browser Built to be Yours
Chrome is the official web browser from Google, built to be fast, secure, and customizable. Download now and make it yours.
👍2