https://virgool.io/feed/@reza.javadpour.eng fa 2026-06-07 23:32:48 https://files.virgool.io/upload/users/171063/avatar/wrkJHM.png?height=120&width=120 https://virgool.io/@reza.javadpour.eng https://virgool.io/dastyaaaar-chrome/extension-for-frontend-developers-mb5oa8hkyrrr ‌Browser extensions for Front-End developerامروز تصمیم گرفتم طبق تجربه خودم چند Extension خوب و کاربردی برای برنامه‌نویسان فرانت‌اند معرفی کنم. امیدوارم به کارتون بیاد و ازشون استفاده کنید و خوشحال میشم که در بخش نظرات از تجربه‌های خودتون بگید و همگی استفاده کنیم.ابزار اول: Perfect Pixelاین ابزار مخصوص زمانیه که شما تصمیم دارین صفحه‌ای که قصد طراحیش رو دارین در حد پیکسلی مشابه طرح باشه و خب قطعا اکثر اوغات پیاده‌سازی به همین شکله. برای استفاده از این قابلیت شما باید طرح مورد نظرتون رو انتخاب کنید و بعد از تنظیم پوزیشن، اندازه و شفافیت تصویر در بک‌گراند، قفلش کنید و با اطمینان شروع به پیاده سازی کنید. خوبیش اینه که نیاز نیست هر بار سوییچ کنید روی تصویر مورد نظر و برگردین به کدتون. در نتیجه از هدر رفتن مقدار زیادی زمان و اشتباه انسانی جلوگیری می‌کنید.نصب در گوگل کرومنصب در فایرفاکسPerfect Pixelابزار دوم: Click to Remove Elementقطعا براتون پیش اومده که هنگام پیاده سازی صفحه‌ای و سپس بررسی خروجی در مرورگر، بخواین برای در نظر گرفتن حالت‌های خاصی المنتی رو از صفحه پاک کنید. خب به صورت معمول یا باید از داخل کد حذفش کرد و یا اینکه از Inspect Element المنت مورد نظر رو پاک کرد.بعد از نصب این Extension شما تنها کافیه با فعال کردنش در صفحه مورد نظر و کلیک روی بخش‌هایی که میخواین حذف بشن اقدام کنید.استفاده دیگه‌اش توی سایت هاییه که تبلیغات خیلی اذیتتون میکنه.نصب در گوگل کرومنصب در فایرفاکسClick to Remove Elementابزار سوم: Page Ruler Reduxهمون‌طور که از اسمش پیداست این ابزار یه خط‌کشه که به شما کمک میکنه به جای نگاه چشمی و مسلما بروز خطاهای ناخواست، بطور دقیق ابعاد و فواصل رو اندازه‌گیری کنید. با فعال کردنش در صفحه، این ابزار نواری در اختیارتون قرار میده که اطلاعات طول و عرض کادری که انتخاب کردید و موقعیتش از گوشه‌های صفحه رو نمایش میده و شما میتونید موقعیتش رو از همون نوار بطور دستی تغییر بدین.نصب در گوگل کرومنصب در فایرفاکسPage Rulerابزار چهارم: ColorZillaشاید این ابزار رو بشناسید و بیشتر برای تازه‌کارها جالب باشه. این ابزار در واقع یک Color Picker در محیط وب هستش و با کلیک کردن روی نقطه مورد نظر، کد Hex رنگ رو براتون در Clipboard ذخیره میکنه.نصب در گوگل کرومنصب در فایرفاکسColorZillaابزار پنجم: Page Load Timeاز این ابزار میتونید در زمینه بهینه‌سازی صفحه استفاده کنید. همونطور که از اسمش مشخصه در مواقع زمان صرف شده جهت بارگزاری صفحه رو برای شما اندازه‌گیری میکنه و شما میتونید تاثیر تغییرات انجام شده جهت بهینه‌سازی رو ارزیابی کنید.نصب در گوگل کرومنصب در فایرفاکسPage Load Timeابزار ششم: Web Developerاین ابزار رو قطعا خیلی‌هاتون میشناسید. به خودی خود شامل کلی ابزار دیگست و توسط چندین سربرگ از هم جدا شده. غیرفعال کردن قابلیت‌های مرورگر توسط این ابزار و بررسی رفتار صفحه در حالتی که براش ایجاد می‌کنیم قطعا خیلی به کارتون میاد.نصب در گوگل کرومنصب در فایرفاکسWeb Developerدر پایان متشکرم از اینکه وقت گذاشتید و این مطلب رو خوندین. همونطور که در ابتدای صفحه اشاره کردم، خوشحال میشم در صورت تمایل تجربه‌های خودتون در استفاده از ابزارهایی که میتونه برای برنامه‌نویسان Front-End کاربردی باشه رو معرفی کنید. reza.javadpour.eng reza.javadpour.eng Wed, 15 Apr 2020 20:18:44 +0430 https://virgool.io/cheyab-blog/javascript-es2020-new-features-ttuk6x5awec8 Javascript ES2020اینجاییم تا نگاهی بندازیم به هشت قابلیت جدید جاوا اسکریپت ES2020 .قابلیت اول: BigIntیکی از قابلیت‌های پیش‌بینی شده در جاوا اسکریپت BigInt بود. خب همونطور که میدونید در واقع به برنامه‌نویسان جاوا اسکریپت این امکان رو میده که از اعداد بزرگتری استفاده کنن و محدودیت های قبل رو نداشته باشن.ES2020 BigIntبا این حال، همونطور که در عکس دیدید، باید در انتهای عدد یک n داشته باشید. این n بیانگر اینه که مقدار شما یک BigInt هست و باید با موتور JavaScript (توسط موتور v8 یا هر موتور دیگه‌ای که از اون استفاده می‌کنه) متفاوت رفتار بشه.قابلیت دوم: Dynamic importاین قابلیت در ES2020 به شما این امکان رو میده که فایل‌های جاوا اسکریپت رو به صورت داینامیک به عنوان ماژول در برنامه خودتون وارد کنید. این کاملا شبیه نحوه انجام همین عمل در Webpack و Babel هست.این ویژگی به شما کمک می‌کنه تا کدهای split شده تون رو بدون سربار شدن webpack یا سایر module bundler ها ارسال کنید.نکته خوب اینه که شما در واقع دارید یک ماژول رو وارد می‌کنید، بنابراین هیچوقت فضای نامی global رو تحت اثر قرار نمیده.ES2020 Dynamic Import قابلیت سوم: Nullish Coalescingاین قابلیت بسیار جالبه و به شما امکان بررسی واقعی مقادیر Nullish رو به جای مقادیر falsey میده. امکان داره بپرسید تفاوت مقادیر Nullish و falsey چیه؟ در جاوا اسکریپت خیلی از مقادیر falsey هستند، مانند رشته های خالی، عدد 0 ، undefined ، null ، false ، NaN و غیره. با این وجود بسیاری از اوقات ممکنه نیاز داشته باشید تا بررسی کنید که یک متغیر nullish هست یا خیر. یعنی اگر undefined یا null باشه ، مانند زمانی که یک متغیر از نظر شما اجازه داره یک رشته خالی یا حتی مقدار false داشته باشه.در این حالت ، شما باید از عملوند جدیدی به نام Nullish Coalescing (دو تا علامت سوال) استفاده کنید. ES2020 Nullish Coalescingقابلیت چهارم: Optional Chainingاین قابلیت واقعا عالیه. به شما این امکان رو میده که بدون نگرانی از وجود یک خاصیت یا عدم وجودش، به‌طور عمیق ازش استفاده کنید. اگه خاصیت مورد نظر وجود داشته باشه که قطعا مشکلی نیست! اما اگه این‌طور نباشه چی؟ شما معمولا این موقع چیکار میکردین؟ قطعا قبلش بررسی میکردین که خاصیت وجود داره یا نه و بعدش بهش دسترسی پیدا میکردین و قطعا شرطتون خیلی طولانی میشد. راهکار ES2020 برای حل این مسئله خیلی کاربردیه.این قابلیت نه‌تنها روی خاصیت‌های آبجکت‌ها، حتی در فراخوانی ها و آرایه ها هم کار می کند. به تصویر زیر دقت کنید:قابلیت پنجم: Promise.allSettledاین متد آرایه‌ای از Promise ها رو دریافت میکنه و فقط در صورت حل و فصل همه اونها یا حل یا رد میشه.به تصویر زیر توجه کنید:ES2020 Promise.allSettledقابلیت ششم: String#matchAllاین قابلیت روشی جدیده که به نمونه اولیه String اضافه شده و مربوط به عبارت با قاعده یا Regular Expressions هست. این یک شمارنده یا iterator هست که همه گروه های همسان رو یکی پس از دیگری بر می‌گردونه. برای درک بهتر تصویر زیر رو ببینید:ES2020 String#matchAllقابلیت هفتم: globalThisاگر شما کد جاوا اسکریپت Cross-Platform نوشته باشید و بخواید روی Node اجراش کنید، در محیط مرورگر و همچنین در web worker ها کار کنه ، قطعا شما وقت زیادی صرف مدیریت آبجکت‌های global خواهید کرد.دلیل این امر اینه که window برای مرورگر، global برای Node و self برای web worker ها هست. اگر زمان اجرا بیشتر باشه، آبجکت global برای اونها متفاوت خواهد بود. بنابراین شما باید در پیاده‌سازی و تشخیص زمان اجرا دقت لازم رو داشته باشید.در ES2020 فرقی نمیکنه که شما کدتون رو کجا اجرا می‌کنید. globalThis همیشه به آبجکت global اشاره میکنه. تصویر زیر رو ببینید:ES2020 globalThisقابلیت هشتم: Module Namespace Exportsپیش از این در ماژول های JavaScript جهت import کردن امکان استفاده از روش زیر وجود داشت:import * as utils from './utils.mjs'با این حال، هیچ روشی شبیه بالا برای export کردن ماژول‌ها مثل پایین وجود نداشت:export * as utils from './utils.mjs'ولی حالا میتونید از روش پایین استفاده کنید:import * as utils from './utils.mjs' export { utils }کلام آخر:قطعا این روزها شاهد پیشرفت خوبی در جاوا اسکریپت هستیم و این قابلیت‌های جدید گاهی خیلی به کارمون میاد و به کارمون سرعت میبخشه. از مواردی که گفته شد کدومش برای شما جالب تر بود؟خوشحال میشم در صورت نیاز جهت بهبود مطلب یا رفع اشکالات، نظراتتون رو بشنوم. reza.javadpour.eng reza.javadpour.eng Mon, 13 Apr 2020 09:45:48 +0430