‏FFmpeg

ابزاری متن‌باز برای پردازش داده‌های چندرسانه‌ای
‏
‏FFmpeg ‏ابزاری متن‌باز قدرتمند برای پردازش داده‌های چندرسانه‌ای مانند صوتی و تصویری است. این ابزار کاربردهای متنوعی از جمله ضبط، تبدیل و استریمینگ محتوا را ارائه می‌دهد. به لطف پشتیبانی از طیف گسترده‌ای از فرمت‌ها و کدک‌ها، FFmpeg به یک راه‌حل جامع برای انجام وظایف مختلف پردازش چندرسانه‌ای تبدیل شده است.

✔️ نمونه‌هایی از کاربردهای FFmpeg:

✔️ تبدیل فرمت:

برای تبدیل یک فایل ویدیویی از فرمت MP4 به AVI می‌توانید از دستور زیر استفاده کنید:

ffmpeg -i input.mp4 output.avi

✔️ فشرده‌سازی ویدیو:

برای فشرده‌سازی یک ویدیو با حفظ کیفیت مناسب می‌توانید از دستور زیر استفاده کنید:

ffmpeg -i input.mp4 -c:v libx264 -crf 23 output.mp4

در این دستور، -crf (Constant Rate Factor) کیفیت ویدیو را تعیین می‌کند. هر چه این عدد کوچکتر باشد، کیفیت ویدیو بالاتر و حجم فایل بیشتر خواهد بود.

✔️ منابع مفید برای یادگیری FFmpeg:

با توجه به تنوع و پیچیدگی تنظیمات FFmpeg، داشتن منابع آموزشی مناسب می‌تواند بسیار مفید باشد. در اینجا چند منبع مفید برای یادگیری این ابزار آورده شده است:

https://www.ffmpeg.org/download.html
https://trac.ffmpeg.org/
https://linux.die.net/man/1/ffmpeg

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویرایشگر JSON یک JSON Schema را دریافت کرده و از آن برای تولید یک فرم HTML استفاده می‌کند. این ویرایشگر از تمام قابلیت‌های JSON Schema نسخه ۳ و ۴ پشتیبانی می‌کند و می‌تواند با چندین فریم‌ورک محبوب CSS (بوت استرپ، اسپکتر، تایلیویند) ادغام شود.

🔗https://github.com/json-editor/json-editor
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

مقادیر جدید برای text-wrap
یک رویکرد جدید برای قالب‌بندی متن! این مقادیر جدید برای بهبود خوانایی و زیبایی بصری متن شما طراحی شده‌اند.


‏⏺ pretty: توزیع متنی زیباتر و متعادل‌تر در بین خطوط را ارائه می‌دهد.
‏⏺ balance: تعداد کاراکترها را در هر سطر متعادل می‌کند و به مرورگر اجازه می‌دهد تا کلمات را به طور یکنواخت بین خطوط توزیع کند و یک بلوک متنی هماهنگ‌تر ایجاد کند.

نمونه:

.balance {
  text-wrap: balance;
}

.pretty {
  text-wrap: pretty;
}

کاربرد:

از balance برای عناوین و بلوک‌های متنی کوچک که در آنها حفظ تعادل مهم است، استفاده کنید.
از pretty برای پاراگراف‌ها استفاده کنید تا به متنی زیبا و خوانا دست پیدا کنید.

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

استایل‌های پرینت با @media print

توی این مدت متوجه شدید که یه صفحه وب تو نمایشگر و روی کاغذ چه‌قدر فرق داره؟ این همه به خاطر مدیا کویری تو CSS هست! چند روز پیش من خودم با این مشکل برخورد کردم که باید یه صفحه رو برای پرینت آماده می‌کردم، اونم وقتی که کاربر Ctrl + P رو میزنه.
‏
‏@media print یه ابزار خیلی خوب تو CSS هست که بهمون اجازه میده استایل‌های مخصوص چاپ رو تعریف کنیم. یعنی وقتی کسی میخواد صفحه‌مون رو پرینت بگیره، مرورگر این استایل‌ها رو اجرا میکنه.

✔️ چطوری ازش استفاده کنیم؟

@media print {
  /* مثلا همه دکمه‌ها رو مخفی می‌کنیم */
  button {
    display: none;
  }
}

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

0 == "0"
// true

0 == []
// true

"0" == []
// false

جاوااسکریپت زیباست ... .

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

شبه کلاس‌های فوکوس اصلی: :focus، :focus-within و :focus-visible ‍

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

1️⃣ :focus
وقتی یک عنصر در حال حاضر فوکوس دارد، این شبه کلاس‌ به آن اعمال می‌شود.

input:focus {
  border-color: blue;
}

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

2️⃣ :focus-within
اگر یک عنصر یا هر یک از فرزندان آن در حال حاضر فوکوس داشته باشد، این شبه کلاس‌ به آن اعمال می‌شود. برای استایل‌دهی به عناصر والد زمانی که یکی از فرزندان آن‌ها فعال است، مفید است. توضیح مفصل‌تر را اینجا می‌توانید بخوانید:

.form-group:focus-within {
  background-color: lightyellow;
}

✨ زمانی که هر یک از فرزندان یک عنصر والد در فوکوس باشد، به آن والد اعمال می‌شود.

3️⃣ :focus-visible
زمانی که یک عنصر با کیبورد فوکوس بگیرد فعال می‌شود، اما زمانی که فوکوس با کلیک ماوس یا لمس صفحه ایجاد شود، استایل‌ها را اعمال نمی‌کند.

button:focus-visible {
  outline: none;
}

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


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

Promise.withResolvers()

(قابلیت‌های ECMAScript 2024)

‏در بسیاری از مواقع در توسعه، نیاز داریم که یک Promise ایجاد کنیم و بتوانیم مدیریت آن را از خارج کنترل کنیم. مثلاً، بخواهیم از بخش‌های دیگری از کد کنترل کنیم که این Promise چه زمانی حل شود یا رد شود.

‏Promise.withResolvers() روشی است که یک شیء Promise جدید ایجاد می‌کند و همچنین یک شیء دیگر را با دو متد resolve و reject برمی‌گرداند. این دو متد را می‌توان برای کنترل این Promise استفاده کرد.

قبل از معرفی این متد، برای ایجاد چنین Promise‌ای، مجبور بودیم از سازنده Promise استفاده کنیم و به صورت دستی توابع resolve و reject را به تابع پردازشگر منتقل کنیم. این کار به کد اضافی نیاز داشت و ممکن بود باعث سردرگمی در مدیریت وضعیت Promise شود.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript