🟢 CSS is 29 years old
🟡 HTML is 31 years old
🔵 JavaScript is 29 years old
🐍 Python is 33 years old
🐘 SQL is 49 years old
🟧 Java is 29 years old
🟪 PHP is 29 years old
🔶 C++ is 38 years old
🔷 Ruby is 28 years old
🌐 Go is 15 years old
🟦 C# is 23 years old
🐳 Docker is 10 years old
🔵 TypeScript is 11 years old
🔵 Basic is 61 years old
🔵 ANSI C is 39 years old


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

آیا می‌دانستید که PostgreSQL به راحتی می‌تواند جایگزین Redis و MongoDB شود؟

در مورد اول، با استفاده از جداول UNLOGGED و نوع داده JSON، و در مورد دوم، با استفاده از JSONB.

علاوه بر این، PostgreSQL یک آداپتور داخلی برای سازماندهی CRUD Web API دارد - که برای توسعه‌دهندگان فرانت‌اند بسیار راحت است، زیرا می‌توانند فقط از این آداپتور استفاده کنند و نیازی به نوشتن بک‌اند نیست.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏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