یادداشت‌ها

قابلیت NES در VSCode

خب حتماً طی اخبار تازه شنیدید که یه ویژگی جدید به گیت‌هاب کوپایلوت اضافه شده که اسمش Next Edit Suggestions یا NES هست. مزیت بزرگ این قابلیت جدید اینه که بر اساس کدهای خودتون و منطق و ادبیات خاصی که در نوشتار کدهاتون دارید بهتون پیشنهاد میده و در واقع ذهن شما رو پیش پیش می‌خونه! خیلی توی توسعه کد بهتون سرعت میده.

برای فعالسازی کافیه عبارت زیر رو در فایل تنظیمات خودتون بذارید یا از منوی تنظیمات دنبال NES بگردید:

"github.copilot.nextEditSuggestions.enabled": true

فیلتر رنگی در CSS

همونطور که می‌دونید یکی از پراپرتی‌های خوب css همین filter هست که اگر بهش مسلط باشید، امکانات جالبی رو در اختیارتون می‌ذاره. خصوصاً اگر بحث کار با تصاویر و حالت hover باشه، می‌تونید افکت‌های جذابی برای تصاویر سایت‌تون ایجاد کنید. یکی از محدودیت‌های filter اینه که شما فیلترهای مشخصی در اختیار دارید و نمی‌تونید با یه فیلتر واحد، مثلاً رنگ تصویر رو تغییر بدید. امروز که دنبال این قضیه بودم به یه سایتی برخورد کردم که به نظرم می‌تونه برای همه طراحان وب مفید باشه.

با استفاده از ابزار css-color-filter-generator، می‌تونید رنگ مدنظر رو انتخاب کنید تا بهتون فیلتر ترکیبی مربوط به اون رنگ رو بده. مثلاً برای کد رنگ #6a2c70 به من این فیلتر رو داد:

filter: brightness(0) saturate(100%) invert(20%) sepia(28%) saturate(2904%) hue-rotate(263deg) brightness(93%) contrast(90%);

لوگوی بانک‌های ایران

اگر در پروژه‌ای نیاز دارید از لوگوی بانک‌های ایران استفاده کنید، این ریپازیتوری لوگوی اکثر بانک‌های ایرانی رو به صورت CSS Sprites در چهار سایز ۳۲-۶۴-۱۲۸-۲۵۶ پیکسل آماده کرده که می‌تونید ازشون استفاده کنید:

<i class="ibl64 ibl-bsi"></i>

فایل لایه باز (psd) لوگوها هم داخل همین ریپازیتوری وجود داره.

مدیریت cache در آپاچی

یکی از قدرتمندترین چیزایی که برای تنظیم وب‌سرور آپاچی می‌تونید ازش استفاده کنید، فایل‌های htaccess. هستند. قابلیت‌های مختلفی رو در اختیارتون می‌ذاره که شاید مهمتریناش اینا باشند: ریدایرکت آدرس‌ها، فعالسازی کش، جلوگیری از دسترسی کاربران خاص، فشرده‌سازی محتوا، محافظت از پوشه‌های خاص و …

حالا اگر به هر دلیلی دوست داشتید کش (cache) شدن تصاویر و استایل‌ها و اسکریپت‌ها رو با این فایل فعال کنید، کافیه یه قطعه کدی مشابه زیر رو داخل فایل htaccess. روت سایت بذارید:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

نکته تکمیلی: در سیستم عامل‌های مبتنی بر لینوکس، فایل‌هایی که اول اسم‌شون یه نقطه باشه (Dotfiles) مخفی هستند. پس اگر فایل htaccess. رو پیدا نکردید، نمایش فایل‌های hidden رو از کنترل پنل هاست‌تون فعال کنید.

معرفی ابزار TLDR

هر کاربر لینوکسی، براش پیش اومده که سینتکس موردنیازش حین اجرای دستورات مختلف رو یادش بره؛ یا یادش نیاد برای فلان کار خاص باید از چه سوییچ و فلگی توی دستورش استفاده کنه. طبیعتاً خود لینوکس و توسعه‌دهنده‌هاش به این قضیه فکر کردند و راهنماهایی مث دستور man یا فلگ help رو برای دستورات ترمینال تعریف کردند 😄 مثال برای دستور tar:

tar --help
or
man tar

خب مشکل این راهنماهای help و man page اینه که فقط سوییچ و دستورات زیرمجموعه رو توضیح دادند؛ اما گاهی داشتن مثال‌های عینی خیلی به فهم و یادآوری دستورات کمک می‌کنه. اینجاست که tldr وارد کار میشه 😎 این پکیج در واقع یه راهنمای جامع با کلی مثال عملی هست که برای هر کاربرد خاص، چطوری باید دستورات مختلف لینوکسی رو اجرا کنید.

آموزش نصب در گیت‌هاب tldr موجود هست. اگرم نخواستید چیزی رو سیستم‌تون نصب کنید، فایل pdf کامل کلیه دستورات لینوکس با مثال رو می‌تونید از اینجا دانلود کنید. یه وبسایت هم دارند که همین مثال‌ها رو به صورت آنلاین بهتون میده.

نسخه سبک‌تر FontAwesome

وقتایی که نیاز دارید آیکن‌هایی مث FontAwesome رو داخل سایت خودتون استفاده کنید، لازم نیست کل فونت‌آیکن‌ها رو لود کنید. اغلب اینا نسخه‌های کوچیکتری دارند که شاید همون بسته کوچیکتر کار شما رو راه بندازه. این کار باعث میشه سرعت بارگذاری صفحات شما بهبود پیدا کنه.

برای این کار می‌تونید به این آدرس برید و اونجا متناسب با نیازتون، لینک استایل مربوطه رو بردارید. مثلاً all.min.css حدود ۷۲ کیلوبایته ولی ممکنه کار شما با پکیج فونت‌آیکن‌های regular.min.css راه بیفته که کلاً کمتر از ۱ کیلوبایته. سایت خوبیه و بیش از ۶۰۰۰ تا کتابخانه مختلف رو به صورت CDN در اختیار شما می‌‌ذاره.