https://virgool.io/feed/@amir2mi طراحی می‌کنم و برای وب کد می‌زنم | علاقه‌مند به نوشتن fa 2026-06-17 20:44:57 https://files.virgool.io/upload/users/15279/avatar/UkAFDg.png?height=120&width=120 https://virgool.io/@amir2mi https://virgool.io/@amir2mi/%DA%A9%D8%B3%D8%A8-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D9%85%D9%87%D8%A7%D8%B1%D8%AA-%D8%AC%D8%AF%DB%8C%D8%AF-%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA-%D8%AF%D9%88%D8%B1%D9%87-%D9%88-%D9%85%D8%AF%D8%B1%DA%A9-coursera-cw45bvfsz9yn من رابط‌کاربری وبلاگم رو طراحی کردم اما بعد 6 ماه هنوز دست به کد نشدم (کمال‌گرایی مزمن قاطی تردید)، برای همین اینجا این مطلب رو می‌نویسم چون فکر کردم ممکنه به‌کار خیلی از دوستان بیاد.قبلا در مورد دریافت رایگان دوره از Coursera نوشته شده اما به این نتیجه رسیدم نوشتن مطلب تکراری بد نیست چراکه بسیار پسندیده است، دلیلش اینه که هر شخص یک جور مطلبی رو تفسیر می‌کنه، می‌نویسه و اصولا اگه کپی نکنه خاص خودش میشه.سایت Coursera.comسایت کورسرا مرجع دوره‌های معتبر از شرکت و دانشگاه‌های بزرگ دنیا هست، این سایت سال 2012 توسط دو گیک دانشگاه استنفورد به نام‌های Andrew Ng و Daphne Koller ایجاد شد.این سایت دوره‌های مختلف تو حوزه‌های زیر رو ارائه میده: هنر و علوم انسانی - Arts and Humanitiesکسب و کار - Businessعلوم کامپیوتر - Computer Scienceعلم داده - Data Scienceفناوری اطلاعات - Information Technologyسلامت - Healthریاضیات - Mathematicsتوسعه فردی - Personal Developmentعلوم مهندسی و فیزیک - Physical Science and Engineeringعلوم اجتماعی - Social Sciencesبرای مثال اگه تو مسیر Data Engineering شرکت کنید، این مسیر شامل چند دوره میشه، که هر دوره معمولا بین 3 تا 6 هفته برنامه آموزشی داره.این امکان هم وجود داره که تنها یک دوره مشخص از مسیر آموزشی رو ببینید،‌ و در پایان هر دوره گواهی (certificate) اتمام دوره رو دریافت کنید.اینجا یک نکته وجود داره و اون اینه که گواهی که شما برای پایان هر دوره و در مجموع پایان مسیر دریافت می‌کنید با دو عنوان credit certificate و non-credit certificate وجود داره و معمولا تو اطلاعات دوره میگن که کدوم یکی هست.تفاوت مدرک credit certificate و non-credit certificateطبق توضیح ChatGPT واژه :) این طوره که: credit certificate گواهی‌هایی هستن که اعتبار دارن، یعنی با ارائه دادن اون‌ها به دانشگاه‌هایی که قبولشون میکنن میتونید قسمتی از واحدهای لازم برای اخذ مدرک دانشگاهی رو پوشش بدید.برای مثال اگه مسیر Google UX Designer رو که مدرک معتبر میده و هفت هشت تا دوره داره تموم کنید، می‌تونید برای دانشگاهی که تو دوره مشخص شده درخواست بدید. اون دانشگاه که معمولا برنامه آموزش آنلاین داره قسمتی از مدرک کارشناسی که میده رو دیگه به واسطه اون مدرک آموزش نمیده (اینا برای ایرانی‌ها جواب نمیده و هزینه این دانشگاه‌ها بالاست).گواهی non-credit certificate کاربردش بیشتر برای اشتراک‌گذاری مهارت‌ها هست و جدا از کسب مهارت خوبه که مدرک تو پروبالتون باشه.دریافت دوره رایگان از Courseraدورهای Cousera معمولا رایگان نیستن و شما باید برای هر دوره یا خرید اشتراک هزینه پرداخت کنید، اما با سیستم کمک مالی (Financial Aid) که داره، امکان داره بخشی یا کل یک مسیر آموزشی رو رایگان دریافت کرد و در آخر گواهی گرفت.مرحله صفر: ساخت حساب‌کاربریبه سایت کورسرا برید و حساب کاربری بسازید، بهتره اطلاعات اولیه رو تکمیل کنید و نشون بدید که اکانت واقعی شماست.مرحله یک: یافتن دوره موردنظرشروع به جستجو دوره‌ها کنید و بعد از باز کردن صفحه اطلاعات دوره طبق تصویر چک کنید که عبارت "Financial aid available" رو کنار دکمه ثبت‌نام دوره داشته باشه.Financial Aid Availableمرحله دو: اقدام برای دریافت دورهاگر دوره واجد شرایط بود، روی لینک "Financial aid available" کلیک کنید، طبق تصویر دوره موردنظر رو انتخاب کنید و "Next" رو بزنید.سپس "Continue to the application" رو بزنید. مرحله سه: تکمیل اطلاعات عمومیاین مرحله تنها یک‌بار نیاز به تکمیل شدن داره هدفش فهمیدن اینکه وضعیت‌تون در چه حاله، طبق تصویر میزان درآمد، وضعیت شغلی و دلیل انتخاب دوره رو از شما می‌خواد.نکته مهم: برای دریافت کمک مالی سعی کنید تا جای ممکن ناتوان به نظر بیایید، البته با قیمت دلار درآمد سالانه اکثریت ایرانی‌ها بیانگر ناتوانیه مفرطه.بگذریم، بخش مهم این قسمت دلیل اقدام برای کمک مالی هست که باید یک متن 150 کلمه‌ای بنویسید، برای مثال من این متن رو برای کسی که تو حوزه فرانت‌اند وب فعالیت می‌کنه مثال زدم:Hi, I am interested in front-end development. Currently, I am working part-time as a freelancer, looking to improve my knowledge and skills to apply for a full time job in a company.I think Coursera courses will help me to polish my misunderstandings and gain the experience I need to apply for a position as front-end web developer.I am good with English and can understand the course, and I think the certificate will also help me show my skill and apply for a job.Generally my friend introduced me to web development and I started learning a year ago, I learned basics then React, created an open-source library for React components.Now I'm trying to fulfill the necessary knowledge to apply for a full time job.I was aware of Coursera years ago, but my friend said hey they give financial aid to students to go and finish a course it will help you get a job easier, so now I'm here!مرحله چهار: تکمیل درخواستدر این مرحله باید مخصوصا بگید که چقدر در توان شما هست که مبلغ دوره رو پرداخت کنید و پس این مورد رو 0 در نظر بگیرید.به‌علاوه باید دلیل انتخاب دوره رو بنویسید و بهتره از تاثیرش تو زندگی کاری یا شخصی‌تون بگید. سناریو رایج اینه که شما دانشجو هستید یا دنبال کارید و این دوره ناجی شما هست :)برای توضیحات متن مرحله قبل رو کپی نکنید برای نمونه من این متن رو برای دوره لینوکس از IBM نوشتم:Hi, I daily use Linux with Ubuntu distro, but professionally when I want to apply for a position I do not have that confidence to say I know Linux. I tried to get LPIC-1 certificates, but I came up with Coursera because I could not afford LPIC-1 certificates price at this time.Currently, I am trying to apply for a position in front-end web development and I think this course will brighten my skill and can come in handy for daily problems at work.Also, I have plans to learn machine learning and for that purpose having knowledge on Linux will make it easier for me. That is the time of the year that I have more free time and I want to fill it with something to help me in my future career, and I have planned to improve my knowledge with Coursera courses now.If it is possible, consider giving me aid to learn this course.Thank you.دو تیک رو بزنید و متن "I agree to the terms above" رو در آخر بنویسید.افزونه Language Tool رو دریابیدمرحله آخر: انتظار و انتظاردر این مرحله 15 روزه یا چند روز بیشتر، درخواست شما بررسی و نتیجه به شما اعلام می‌شه.نکته اینه در حین دریافت کمک مالی محتوای دوره قابل دسترس هست و شما تنها نمی‌تونید در آزمون‌های پایان هفته یا ارائه تکالیف شرکت کنید.روند کار ساده هست و امیدوارم این نوشته همونطور که من خبر نداشتم، خبردارتون کنه و دلیلی باشه تا چیز جدیدی یاد بگیرید، باشد که رستگار شویم. امیرمحمد محمدی | Amir M. Mohamadi امیرمحمد محمدی | Amir M. Mohamadi Thu, 09 Mar 2023 01:04:11 +0330 https://virgool.io/@amir2mi/%D8%AA%DA%A9%D8%B1%D8%A7%D8%B1-%D9%81%D8%A7%D8%B5%D9%84%D9%87-%D8%AF%D8%A7%D8%B1-tqy78uxe31km گِلِه: من عهد بسته بودم تا زمان ساخت وب‌سایت شخصی خودم دیگر در ویرگول چیزی ننویسم! چرا؟دلم برای مقاله‌ای سوز بر می‌دارد که به‌خاطر عدم ذخیره خودکار توسط ویرگول، هرگز منتشر نشد!نِموزین هستند، مادر الهام.یادگیری و به یادآوری به سادگی آب خوردنبگذریم. این مطلب را می‌نویسم شاید هرچند کم اما مؤثر افرادی با این روش آشنا شوند و عشق به یادگیری را در خودشان رشد دهند، منظور یادگیری مؤثر است!تقریبا یک ماه پیش در زمان‌های خالی مشغول ترجمه کمیک تعاملی تحت وبی بودم که موضوعش تکرار فاصله دار بود.تکرار فاصله دار یا Spaced Repetition چیست؟خب تکرار فاصله دار (Spaced Repetition) روشی برای به‌خاطر سپاری مؤثر هر چیزی است.فکر کنید چقدر برای یادگیری نکته جدیدی زمان صرف می‌کنید و پیش می‌آید بعد از مدتی در مجموع چیزی از آن به خاطرتان نمی‌آید؟این حس خیلی دردناک است و همین درد باعث شده تا متخصصان علم حافظه و یادگیری دست به‌کار شوند و به دنبال کشف و ابداع روش‌های موثرتری برای یادگیری باشند.تاریخچه تکرار فاصله دارالبته این رشته سر دراز دارد چرا که اولین پژوهش علمی توسط دانشمندی آلمانی به نام هرمان ابینگ‌هاوس (Hermann Ebbinghaus) صورت گرفت.این بنده خدا در حرکت مازوخیستی معروف خودش که شروع کشف علم حافظه و تکرار فاصله‌دار بود 1000 کلمه بی‌معنی را حفظ کرد!نتیجه چه شد؟ آقا کشف کردند که بیشتر چیزهایی که یاد می‌گیرند در 24 ساعت اولیه از یاد می‌برند! (خوشبینانه تنها مقداری از آن را توانست به خاطر بیاورد) و اگر مرور به آموخته‌های مذکور نداشته باشند تقریبا از قفس خواهد پرید!با این حال راه حل چیست؟راه حل اینجا در ترجمه کمیک تعاملی تحت عنوان «چطور تا ابدیتی (کم و بیش) هرچیزی را به خاطر بیاوریم» شرح داده شده است.تکرار فاصله دار چطور کار می کند؟اگر قصد مطالعه کمیک تعاملی که گفتم را ندارید باید بگویم ضرر می‌کنید اما برای اینکه این مطلب ناقص نماند و حق مطلب را ادا کنیم اندکی در مورد نحوه کارکرد تکرار فاصله دار خواهم نوشت.خلاصه روش کار تکرار فاصله دار این است که باید چیزها را زمانی که تقریبا دارند از یاد می‌روند مجددا مرور کنید. (به همین سادگی!)حالا این تکرار می‌تواند به هر روشی باشد. معمولا از فلش کارت ها و جعبه لایتنر استفاده می‌شود.بازه های زمانی تکرار فاصله دارپس مرور چیزها زمانی که قرار است از یاد بروند اصول کار تکرار فاصله دار است اما اینکه در چه بازه هایی این مرورها انجام شود مسئله مهم‌تری است که به تشریح آن خواهم پرداخت.مشکل این است که برخلاف تصور عموم ذهن انسان چیزها را خطی فراموش نمی‌کند بلکه اینجا منحنی از فراموشی به شکل زیر وجود دارد.در کمیک مذکور این بخش قابل تغییر و آزمایش است.برای مقابله با این فراموشی بازه های زمانی باید فاصله دار باشند، یعنی پس از یادگیری به ترتیب باید یک روز سپس دو روز بعد و همینطور چهار روز و هشت روز بعدی مرور انجام شود.بازه زمانی مرور افزایش می‌یابد.پس نیازی به مرور همه روزه نکات (فلش کارت‌ها) نیست و این بازه به مرور طولانی‌تر یا به اصطلاح فاصله دار می‌شود که پس از مدت مشخصی دیگر نیاز به مرور ندارید، چون حالا اطلاعات در حافظه بلندمدت شما جای گرفته و خوش به حال شما.اتمام حجتحتما «چطور تا ابدیتی (کم و بیش) هرچیزی را به خاطر بیاوریم» را مطالعه کنید در این کمیک تعاملی شما عملا حین مطالعه وارد دنیای تکرار فاصله دار می‌شوید و مفهوم آن را به خوبی فرا می‌گیرید. امیرمحمد محمدی | Amir M. Mohamadi امیرمحمد محمدی | Amir M. Mohamadi Thu, 01 Sep 2022 22:30:06 +0430 https://virgool.io/@amir2mi/modular-css-overview-txbnwyvwmowi استایل نویسی برای صفحات وب نسبت به زمان های گذشته دستخوش تغییر شده، زمانی که تنها یک فایل استایل برای صفحه وب پاسخگوی نیازها بود گذشته و حالا به سمت ماژولار بودن حرکت می‌کند.امروزه به لطف ابزارهایی مثل Styled Components گاها نیازمند به تعریف کلاس ها نیستیم، اما این واقعیت پذیرفته شده است که عمده زمان برنامه نویسان صرف نام گذاری متغیرها (در این مورد کلاس‌ها) می‌شود.پس راه حل استفاده از چارچوب های تعریف شده برای نام گذاری سلکتورهای سی اس اس و ساختار صفحه وب است، برای مثال نمونه کد زیر بر هیچ مبنایی نوشته نشده:قطعه کد بالا فاجعه محض است؛ چون هیچ نظم و قاعده ای برای نوشتن آن وجود ندارد، فردا روزی اگر قسمت اضافه کردن ویژگی یا رفع مشکلی را داشته باشیم، نهایتا یا زمان زیادی از ما گرفته می‌شود یا اینکه نهایتا کامپوننت را از صفر می‌نویسیم. به همین دلیل در این مطلب محبوب ترین روش‌های نوشتن سی اس اس بصورت ماژولار را بررسی می‌کنیم تا کدی مثل کد بالا ننویسیم.سی اس اس ماژولار چیست؟سی اس اس ماژولار یک چارچوب فکری است که در آن استایل های صفحه وب به اجزای مستقل و قابل استفاده مجدد تقسیم می‌شوند که در هرجای صفحه وب می‌توانند مستقل از اجزای دیگر استفاده به کار برده شوند. توسعه پروژه به این روش بسیار آسان تر و سریعتر انجام می‌شود، چرا که براساس یک روش مشخص به استایل ها نظم داده شده است به همین ترتیب کار تیمی هم بدون ایجاد مشکل، با نظم و سریع تر انجام می‌شود.بصورت خلاصه سی اس اس ماژولار دارای ویژگی های زیر است:تبدیل صفحات وب به استایل های CSS با قابل استفاده مجدد.براساس کلاس ها و روش نام گذاری از پیش تعیین شده.سهولت در خوانایی، نگهداری و توسعه استایل ها.به علاوه یک ماژول سی اس اس باید سه فاکتور زیر را داشته باشد:عمومی، مستقل و قابل استفاده مجدد باشد.قابل تغییر، ترکیب و مقیاس پذیر باشد.همچنان که مستقل است می‌تواند در برگیرنده ماژول های دیگر یا خودش جز ماژول دیگری باشد.مزایای سی اس اس ماژولار1- انعطاف و مقیاس پذیری2- منحصر بودن با اعمال روش نام گذاری معین3- کمک به توسعه سریع و کارآمدتر4- استفاده مجدد از استایل های CSS5- مرتب، سهولت در خوانایی و نگهداری استایلکلیات و اصول اولیهبرای نوشتن استایل های ماژولار باید به نکات زیر توجه داشته باشیم:1- خودداری از سلکتورهای تو در تو بیشتر از یک مرحله2- پرهیز از به کار بردن ای دی ها3- استفاده از کلاس ها به جای تگ ها4- جداکردن استایل های تنظیم موقعیت (position) از طرح (layout)5- افزودن پیشوند به کلاس ها برای جلوگیری از تداخل استایل هاروش های تعریف شده برای سی اس اس ماژولارمتودلوژی (Methodology) های مختلفی برای نوشتن استایل ماژولار وجود دارد که در ادامه آنها را باهمدیگر بررسی می‌کنیم.OOCSS - سی اس اس شی گراءسی اس اس شی گراء توسط نیکول سالیوان خلق شده است و همانطور که از نامش پیداست از اصول برنامه نویسی شی گرا پیروی می‌کند. هدف ساخت کامپوننت های منعطف، قابل استفاده مجدد، مقیاس پذیر، مستقل و با قابلیت مدیریت آسان است، ویژگی هایی که بالاتر نیز به آنها اشاره شد. بصورت کلی در این روش کامپوننت ها مجزا طراحی می‌شوند و استایل آنها تحت تاثیر موقعیتی که در آن مورد استفاده قرار می‌گیرند نیست.دو اصل مهم سی اس اس شی گرا به شرح زیر است:1- جدایی ساختار از پوستهساختار در اینجا به معنی تمام استایل هایی است که به عنصر در صفحه وجود می بخشد برای مثال خاصیت هایی از جمله ،overflow، width، height، padding و... که کلیت عنصر هستند به عنوان ساختار محسوب می‌شوند. از طرفی پوسته استایل هایی هستند که با ساختار ترکیب می‌شوند و آن را شخصی سازی می‌کنند در این مورد می‌توان ویژگی هایی مثل رنگ متن و پس زمینه، نوع فونت و سایه ها را مثال زد.مثال زیر یک کد سی اس اس است که بصورت معمولی نوشته شده:حالا از همین کد قسمت هایی که تکرار شده اند را فاکتور می‌گیریم و جز ساختار حساب می‌کنیم، سایر موارد که مخصوص خود عنصر هستند جز پوسته آن عنصر تنظیم می‌شوند:ساختار HTML به این شکل خواهد شد:2- جدایی دربرگیرنده و محتوای درون آندربرگیرنده در اینجا همان عنصر والد است و محتوا تصاویر، پاراگراف ها، لینک‌ها، متن‌ها و... هستند که درون دربرگیرنده وجود دارند. برای درک این مفهوم مثال زیر را بررسی کنید:در کد بالا با توجه به اینکه .list عنصری مجزا است اما چون به منو محدود شده در قسمت های دیگر سایت قابل استفاده نیست، کد زیر از اصل جدایی این دو پیروی می‌کند:تغییراتی که در کد بالا اعمال شد: 1- تغییر navbar آیدی به کلاس2- حذف #navbar قبل از سلکتورهای عنصرهایی که درون آن هستندBEM - بلوک، عنصر، اصلاحگرایده BEM توسط تیم موتور جستجو یاندکس شکل گرفت، این روش یکی از پرطرفدارترین گزینه های روی میز است، طبیعتا مقالات راهنما فارسی و انگلیسی بیشتری هم در موردش نوشته شده رسیدن به اجزای مجزای قابل استفاده مجدد در این روش بسیار وابسته به روش نام‌گذاری خاص آن برای کلاس ها است.در این روش نام‌گذاری براساس این سه فاکتور انجام می‌شود:بلوک (Block):عنصر بالا دستی که به معنای کامل یک کامپوننت قابل استفاده است و در آن عناصر (elements) قرار گرفته اند.عنصر (Element):عناصر به خودی خود کار قابل توجهی انجام نمی‌دهند اما با ترکیب و قرار دادن آنها در یک والد تحت عنوان بلوک به کارایی مدنظر می‌رسند. برای مثال یک دکمه در یک کارت عنصری است که به کارت معنا می‌بخشد. اصلاحگر (Modifier):برای اعمال حالت خاص یا تغییر ظاهر اعمال می‌شود، برای مثال یک دکمه می‌تواند موفق (success) یا حالت خطر (danger) داشته باشد.سینتکس سلکتورهای سی اس اس به روش BEM در تصویر زیر آمده:برای مطالعه بیشتر می‌توانید این مقاله را از سایت ترفندهای سی اس اس مطالعه کنید.DRY - خودتو تکرار نکناین روش مخفف عبارت «خودتو تکرار نکن» (Don't Repeat Yourself) یک اصطلاح معروف در دنیای کامپیوتر است توسط جرمی کلارک (Jeremy Clarke) ابداع شده به مفهوم بهینه کردن کدها اشاره می‌کند.این روش طرز فکری متفاوت نسبت به روش‌هایی که بالاتر مشاهده کردیم دارد، در این روش تاکید بروی جداسازی استایل‌ها از محتوا دارد هدف نوشتن استایلی است که در هر موقعیتی بدون کمترین مشکل کار کند.برای مثال کد زیر را داریم:ابتدا قسمت های تکراری را فاکتور می‌گیریم و باهم یکجا قرار می‌دهیم. اولین سلکتور را با یک آیدی و آخرین سلکتور را با یک کلاس می‌بندیم به صورت زیر:حالا هر موقع نیاز به استفاده از استایل‌های بالا داشتیم به سادگی سلکتور آن را در میان آیدی و کلاس تعریف شده قرار می‌دهیم یا اینکه کلاس یا آیدی تعریف شده را استفاده می‌کنیم.کد بالا نمونه کاربردی استفاده از این روش است، البته در دنیایی که کتابخانه هایی از جمله Tailwind CSS پرطرفدار است! این روش به نسبت احمقانه جلوه می‌کند، اما اگر منصفانه قضاوت کنیم برای پروژه های کوچک کاربردی است، از این جهت که استفاده از کلاس های پیچیده و متعدد به کمترین حد می‌رسد.SMACSS - معماری مقیاس پذیر و ماژولار سی اس اساین روش مختصر عبارت Scalable and Modular Architecture for CSS است، به معنی معماری سی اس اس که هدف آن مقیاس پذیری و ماژولار بودن است، به خودی خود گویای مقصود خودش است.این روش دارای پنج دسته بندی برای کدها است:1- پایه: استایل ها پیشفرض و آنهایی که محدود به یک عنصر خاص می‌شوند برای مثال سلکتورهای زیر:2- طرح: صفحه وب به مجموعه هایی مجزا از طرح ها (layouts) می‌شود که هر طرح می‌تواند یک یا چند ماژول درون خود داشته باشد.3- ماژول: درون طرح قرار می‌گیرد یا می‌تواند درون ماژول دیگری استفاده شود.4- حالت: با حالت‌ها ظاهر طرح و ماژول‌ها در وضعیت خاصی تنظیم می‌شود، این وضعیت می‌تواند پنهان شدن، فعال شدن،‌ باز شدن و... باشد. دستورهای حالتی تعیین می‌کنند اجرا در سایزهای با سایز صفحه کوچک یا بزرگتر چگونه نمایش داده شوند.5- تم: مفهمومی شبیه به حالت ها را دارد اما بیشتر در مورد ویژگی های ظاهری از جمله رنگ متن، پس زمینه، مرزها، سایه ها و تایپوگرافی صدق می‌کند.برای مطالعه بیشتر و بررسی مثالهای کاربردی در مورد این روشبه سایت رسمی آن مراجعه کنید.خلاصه کلاممفهوم سی اس اس ماژولار یک مفهوم پذیرفته شده است اگر شما قبل از این به این موضوع توجهی نداشتید پس از خواندن این مطلب حتما پیگیر ماجرا شوید تا در نهایت سطح کیفیت کاری تان را ارتقا دهید. در این مطلب صرفا مختصر توضیحی در مورد انواع روش های پرطرفدار استایل نویسی ماژولار آورده شده و هر روش بسته به نوع ایده ای که پشت آن است طرفداران خاص خودش را دارد، در انتها این شما هستید که براساس نیازها و شرایط موجود از روش‌های بالا استفاده خواهید کرد یا اینکه روش خاص خودتان را ابداع می‌کنید!منابع:How to Implement Basic Modular CSS GuidelinesHow To Nest Blocks Within Blocks in BEMblue and yellow plastic blocks photo – Free Lego Image on Unsplash امیرمحمد محمدی | Amir M. Mohamadi امیرمحمد محمدی | Amir M. Mohamadi Mon, 27 Dec 2021 19:12:15 +0330 https://virgool.io/@amir2mi/%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-2021-%D8%A2%D9%85%D8%AF%D9%87-%D8%AA%D8%A7-%D8%B2%D9%86%D8%AF%DA%AF%DB%8C-%D8%B1%D8%A7-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B4%D9%85%D8%A7-%D8%B3%D8%A7%D8%AF%D9%87-%D8%AA%D8%B1-%DA%A9%D9%86%D8%AF-senenvrag1ny یک ماه تا پایان سال 2021 مانده و من دیشب قبل از خواب مقاله ای را خواندم مربوط به چند ماه پیش که حیفم آمد ترجمه اش نکنم.جاوااسکریپت زبانی که هر سال بیشتر از قبل در حال پیشرفت است، از سال 2015 که اکمااسکریپت 6 معرفی شد هر ساله شاهد این موضوع هستیم که قابلیت های کاربردی به این زبان برنامه نویسی اضافه می‌شود. با این حساب استاندارد اکمااسکریپت 12 که ژوئن 2021 (تابستان 1400) منتشر شده هم مثل سال های قبل ویژگی هایی اضافه کرده که کار را برای برنامه نویسان جاوااسکریپت بسیار راحت تر خواهد کرد.از عبارات باقاعده خوشتان نمی‌آید؟ مشکلی نیست متد replaceAll اینجاست!عبارات باقاعده (Regular expressions) بخاطر هیبت بدترکیبشان بسیار ترسناک هستند حتی برنامه نویسان خبره نیز تا جای ممکن سعی می‌کنند تا سروکارشان به این موجودات نخورد.خیلی جا خوش نکن، تو میتونی جایگزین بشی.- ناشناسدر جاوااسکریپت ممکن نیست تا تمام موارد در یک رشته را به صورت یکجا با رشته دیگری جایگزین کرد مگر اینکه از عبارت باقاعده (/رشته/g) استفاده کنید.عشق به انبه، عشق به همه خوبی هابله تابستان آمده و بازار اسموتی ها هم داغ شده، پایه همه اسموتی های من انبه است چه کسی است که انبه دوست نداشته باشد؟ما چند میوه داریم اما اینجا سیب جز ترکیب موردنظر ما نیست پس باید سیب ها را با انبه که محبوب قلب ها است جایگزین کنیم. در گذشته از متد replace استفاده می‌کردیم:فقط سیب اول با انبه جایگزین شده!برای اینکه تمام سیب ها را با انبه جایگزین کنیم از عبارت باقاعده استفاده می‌کنیم - طبیعتا باب میل هر کسی نیست.متد جدید replaceAll آخرتِ متد replace برای رشته ها است و این مشکل را حل می‌کند. حالا با این متد تمام سیب ها را با انبه جایگزین خواهیم کرد:خب! خیلی خوشمزه به نظر می‌رسد.متد replaceAll این را ممکن می‌کند تا به سادگی رشته ها را بدون نیاز به استفاده از عبارت باقاعده برای چنین مواردی جایگزین کنید. این متد خوشدست می‌تواند در ساخت برنامه های پردازگر متن بسیار کاربردی باشد.مشکلی در تصمیم گیری دارید؟ اپراتورهای عملگرا اینجا هستند تا به شما کمک کنند.یکی از کارهایی ما حین برنامه نویسی انجام می‌دهیم تصمیم گیری است، هر چقدر تصمیمات شما بهتر باشند ساختار کدهای شما نیز بهتر خواهد بود.هرگز برای چیزهای گذرا تصمیم های قطعی نگیر.- گوتاما بودادر برنامه نویسی ما از اپراتور های عملگرای منطقی برای تصمیم گیری استفاده می‌کنیم، اکمااسکریپت 12 نیز اپراتورهای عملگرای کاربردی معرفی کرده،??= &&= ||=??= تنظیم مقدار اگر پوچ یا تعریف نشده باشدکد زیر می‌تواند با یک ??= خلاصه شود:اگر متغیر پوچ یا تعریف نشده است مقدارش را تنظیم کن&&= تنظیم مقدار اگر متغیر TRUE باشدکد زیر می‌تواند با یک &&= خلاصه شود:اگر مقدار متغیر صحیح است مقدارش را تنظیم کن ||= تنظیم مقدار اگر FALSE باشدکد زیر می‌تواند با یک ||= خلاصه شود:اگر مقدار ناصحیح است مقدارش را تنظیم کن&&= و ||= متفاوتند، اولی پوچ بودن یا تعریف نشدن را مدنظر قرار می‌دهد اما مورد دوم تنها به ناصحیح بودن توجه می‌کند.کار کردن با اعداد رنج آور است؟ از زیرخط (_) استفاده کنید.اعداد گواهی ذهنی هستند که تنها به بشریت تعلق دارند.- انوره دو بالزاکامکان جدا کردن اعداد با _ پس از هر سه رقم نیز ویژگی است که به خوانایی کد کمک شایانی می‌کند.با اولی آشنا و عاقبت به خیر شودر برنامه نویسی بسیاری از چیزها بصورت ناهمزمان انجام می‌شود، یعنی ما موردی را شروع می‌کنیم و قبل از اینکه تمام شود موردی دیگری نیز شروع می‌شود.اکمااسکریپت 6 با Promise ها اجرای ناهمزمان تسک ها را بصورت معقولی ممکن ساخت. بعضی اوقات ممکن است Promise های متعددی را اجرا کنیم.اکمااسکریپت 12 به ما تابع ()Promise.any را داده تا بفهمیم کدام Promise زودتر از بقیه به پایان رسیده است.بصورت کلی ()Promise.any آرایه ای از Promise ها را دریافت می‌کند و قبل از تمام شدن همه آنها، موردی که زودتر از همه به پایان رسیده توسط این تابع برگشت داده می‌شود. اگر همه آنها مردود باشند اروری دریافت خواهید کرد.برای مثال در زندگی واقعی قصد دارید به سه شخص متفاوت با نام های فرانک، شیوا و سارا درخواست قرار ارسال کنید و می‌خواهید بدانید کدام یک از آنها ابتدا جواب مثبت می‌دهد.خیلی هم خوب، قرار شما با سارا خواهد بود.نتیجه برگشت داده شده ()Promise.any سارا است به دلیل اینکه اولین موردی بود که با موفقیت به پایان رسید (resolved). اگر تمامی درخواست ها رد می‌شدند یک AggregateError با ارائه دلیل رد شدن داده می‌شد. در برنامه نویسی وب ما از این ویژگی برای زمانی که یک داده با مقدار ثابت بین سرور و سمت کاربر بصورت ناهمزمان تبادل می‌شود استفاده می‌کنیم.در این مقاله تمامی ویژگی های اکمااسکریپت 2021 ذکر نشده، ویژگی های دیگری از جمله WeakRef که جالب مطالعه بیشتر هستند.برای اضافه کردن ویژگی های جدید اکمااسکریپت 12 این مراحل را دنبال کنید:1- پکیج های مذکور را نصب کنید:2- یک فایل ‍‍‍‍‍babel.config.json‍‍‍‍ در مسیر اصلی پروژه تان ایجاد کنید:3- یک فایل .browserlistrc در مسیر اصلی پروژه ایجاد و مرورگرهای مدنظرتان را مشخص کنید تا Babel کد را برای آنها تبدیل کند:4- اجرا:همین! حالا می‌توانید از ویژگی های ES12 در پروژهایتان استفاده کنید!منبع: ES12 is Going to Make Your Life Easier! امیرمحمد محمدی | Amir M. Mohamadi امیرمحمد محمدی | Amir M. Mohamadi Sun, 05 Dec 2021 03:03:16 +0330