From 2bb17199531666d5ac8d274d445afb5509b43ac4 Mon Sep 17 00:00:00 2001 From: "h.rangraz" Date: Wed, 10 Jul 2024 15:53:37 +0330 Subject: [PATCH 1/4] refactor --- docs/frontend/phase03-ui-ux.md | 108 +++++++++++++++++++++++++-------- 1 file changed, 82 insertions(+), 26 deletions(-) diff --git a/docs/frontend/phase03-ui-ux.md b/docs/frontend/phase03-ui-ux.md index 86a8a316..3486aacf 100644 --- a/docs/frontend/phase03-ui-ux.md +++ b/docs/frontend/phase03-ui-ux.md @@ -1,12 +1,16 @@ --- title: UI/UX -description: Oh, no wait; I'm sorry; That's "pretty dumb". +description: سفری هیجان‌انگیز در دنیای رابط کاربری و تجربه کاربری. tags: [Readonly] --- -:::info این فاز، یکی از فازهای `Readonly` است. +:::info این فاز، یکی از فازهای +`Readonly` +است. -به فازهایی `Readonly` می‌گوییم که کارگاهی برای آن‌ها برگزار نمی‌شود و صرفاً برای اموزش به مستندات اکتفا می‌کنیم. +به فازهایی +`Readonly` +می‌گوییم که کارگاهی برای آن‌ها برگزار نمی‌شود و صرفاً برای اموزش به مستندات اکتفا می‌کنیم. ::: @@ -31,8 +35,14 @@ tags: [Readonly] ### تفاوت UI با UX قطعاً بارها این دو کلمه را در جاهای مختلف شنیده‌اید. -UI یا User Interface به معنای رابط کاربری، مربوط به المان‌هایی است که کاربر با آن‌ها ارتباط دارد. -UX یا User Experience به معنای تجربۀ کاربری، مربوط به کیفیتی است که کاربر هنگام استفاده از محصول تجربه می‌کند. +UI +یا +User Interface +به معنای رابط کاربری، مربوط به المان‌هایی است که کاربر با آن‌ها ارتباط دارد. +UX +یا +User Experience +به معنای تجربۀ کاربری، مربوط به کیفیتی است که کاربر هنگام استفاده از محصول تجربه می‌کند. ![UI vs UX](./images/ui-vs-ux.jpg) @@ -52,8 +62,18 @@ UX یا User Experience به معنای تجربۀ کاربری، مربوط ب هرگز حجم انبوهی از اطلاعات را در یک مکان کوچک جا ندهید چرا که کاربر نمی‌تواند به اندازۀ کافی تمرکز کند و این مسئله برایش عذاب‌آور خواهد بود. -برای ایجاد White Space، راحت‌ترین کار استفاده از `margin` و `padding` است. -همچنین در flexbox و grid می‌توانید از `gap` استفاده کنید. +برای ایجاد +White Space +، راحت‌ترین کار استفاده از +`margin` +و +`padding` +است. +همچنین در +flexbox و grid +می‌توانید از +`gap` +استفاده کنید. #### Color @@ -75,7 +95,9 @@ UX یا User Experience به معنای تجربۀ کاربری، مربوط ب [Adobe Color](https://color.adobe.com/create/color-wheel) را پیشنهاد می‌کنیم. ابتدا از سمت چپ، نوع قالب رنگی را مشخص کنید، -سپس با استفاده از Color Wheel در وسط صفحه، رنگ اصلی را انتخاب کنید. +سپس با استفاده از +Color Wheel +در وسط صفحه، رنگ اصلی را انتخاب کنید. مشاهده خواهید کرد که ادوبی، باقی رنگ‌ها را به طور خودکار در اختیار شما قرار می‌دهد. همچنین از ابزارهای زیر برای ساخت قالب رنگی می‌توانید استفاده کنید: @@ -100,11 +122,21 @@ Contrast به‌عنوان مثال اگر دکمه‌ای داشته باشیم، می‌توان تضاد بین رنگ نوشته و رنگ پس‌زمینه را در نظر گرفت. -استانداردی به نام WCAG وجود دارد که بیان می‌کند چه نسبتی بین نوشته و پس‌زمینه باید وجود داشته باشد. -این استاندارد شامل دو حالت AA و AAA است که حالت دوم رتبه‌بندی بهتری دارد و در صورت امکان باید آن را در نظر گرفت. +استانداردی به نام +WCAG +وجود دارد که بیان می‌کند چه نسبتی بین نوشته و پس‌زمینه باید وجود داشته باشد. +این استاندارد شامل دو حالت +AA و AAA +است که حالت دوم رتبه‌بندی بهتری دارد و در صورت امکان باید آن را در نظر گرفت. -همچینن میزان Contrast به اندازۀ متن نیز وابسته است. -به‌عنوان مثال در رتبه‌بندی AA اگر اندازۀ متن معمولی باشد، نسبت Contrast باید حداقل 4.5 به 1 باشد؛ +همچینن میزان +Contrast +به اندازۀ متن نیز وابسته است. +به‌عنوان مثال در رتبه‌بندی +AA +اگر اندازۀ متن معمولی باشد، نسبت +Contrast +باید حداقل 4.5 به 1 باشد؛ اما اگر اندازۀ متن بزرگ باشد، این نسبت می‌تواند تا 3 به 1 کاهش پیدا کند. برای بدست آوردن این نسبت می‌توانید از ابزارهای زیر استفاده کنید: @@ -121,7 +153,9 @@ Contrast #### Visual Hierarchy زمانی که کاربر وارد صفحه می‌شود، با چشمانش المان‌های صفحه را به ترتیب بررسی می‌کند -که به آن Visual Hierarchy گفته می‌شود. +که به آن +Visual Hierarchy +گفته می‌شود. همواره المان‌های مهم‌تر باید رتبۀ بالاتری در این رده‌بندی داشته باشند. به‌عنوان مثال تیتر یک صفحه از اهمیت بالایی برخوردار است اما تاریخ نگارش آن ممکن است خیلی مهم نباشد. @@ -135,17 +169,29 @@ Contrast #### Alignment Alignment -یا تراز بودن، به شدت ارتباط تنگاتنگی با Visual Hierarchy دارد +یا تراز بودن، به شدت ارتباط تنگاتنگی با +Visual Hierarchy +دارد و اگر بتوان از این دو به درستی استفاده کرد، -شاهد یک UI و UX حرفه‌ای خواهیم بود. +شاهد یک +UI و UX +حرفه‌ای خواهیم بود. -المان‌هایی که Contrast بالایی دارند، باید در یک ستون نسبت به المان‌های بالا و پایین خود قرار داشته باشند. +المان‌هایی که +Contrast +بالایی دارند، باید در یک ستون نسبت به المان‌های بالا و پایین خود قرار داشته باشند. به این ترتیب می‌توان یک ساختار مشخص ایجاد و به بهبود تمرکز کاربر کمک کرد. در اکثر مواقع توصیه نمی‌کنیم المان‌ها را به صورت وسط‌چین تنظیم کنید؛ مگر اینکه فضای کوچکی مانند صفحه نمایش تلفن همراه در اختیار داشته باشید. -همچنین در موارد محدود می‌توانید Hero Section خود را به این شکل انتخاب کنید. -اما بیشتر اوقات بهتر است با توجه به RTL یا LTR بودن سایت، همان جهت را برای تراز کردن المان‌ها انتخاب کنید. +همچنین در موارد محدود می‌توانید +Hero Section +خود را به این شکل انتخاب کنید. +اما بیشتر اوقات بهتر است با توجه به +RTL +یا +LTR +بودن سایت، همان جهت را برای تراز کردن المان‌ها انتخاب کنید. برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید: @@ -177,14 +223,23 @@ Alignment اما برای اکثر کاربران صرفاً باری اضافه و امتیازی منفی محسوب می‌شود. از سایه‌ها فقط و فقط در جایی که به آن احتیاج دارید استفاده کنید. -پیشنهاد می‌کنیم از `border` و `outline` استفاده نکنید، +پیشنهاد می‌کنیم از +`border` و `outline` +استفاده نکنید، اما اگر اصرار بر این کار دارید، نوع، اندازه و رنگ آن‌ها باید طوری انتخاب شود که توجه زیادی را از کاربر نگیرد. -Gradientها فقط زمانی خوب به نظر می‌آیند که بی‌نقص پیاده‌سازی شده باشند؛ -بنابراین در حالت کلی بهتر است از رنگ‌های Solid استفاده کنید. - -از طرفی باید دقت کنید که طرح شما Over-simplified نباشد. +Gradiant +فقط زمانی خوب به نظر می‌آیند که بی‌نقص پیاده‌سازی شده باشند؛ +بنابراین در حالت کلی بهتر است از رنگ‌های +Solid +استفاده کنید. + +از طرفی باید دقت کنید که طرح شما +Over-simplified +نباشد. این اتفاق بر سر بسیاری از لوگوها آمده و کاربران از آن بیزارند. -همه چیز باید به اندازه باشد تا بهترین UI و UX حاصل شود. +همه چیز باید به اندازه باشد تا بهترین +UI و UX +حاصل شود. ![Patreon's Logo - Before and After](./images/patreon-logo-before-after.png) @@ -197,5 +252,6 @@ Gradientها فقط زمانی خوب به نظر می‌آیند که بی‌ن ## پروژه -سایتی که تا اینجا طراحی کرده‌اید را از منظر UI و UX بررسی کنید. -در صورتی که جایی از سایت مشکلی مشاهده می‌کنید، آن را برطرف کنید. +سایتی که تا اینجا طراحی کرده‌اید را از منظر +UI و UX +بررسی کنید. در صورتی که جایی از سایت مشکلی مشاهده می‌کنید، آن را برطرف کنید. From 5ddadb2469f5fbba5e57c338e2ab2fcb94bd882a Mon Sep 17 00:00:00 2001 From: "h.rangraz" Date: Wed, 10 Jul 2024 17:03:33 +0330 Subject: [PATCH 2/4] refactor --- docs/frontend/phase06-clean-code.md | 429 ++++++++++++++++++++-------- 1 file changed, 307 insertions(+), 122 deletions(-) diff --git a/docs/frontend/phase06-clean-code.md b/docs/frontend/phase06-clean-code.md index dde974e8..39c86a82 100644 --- a/docs/frontend/phase06-clean-code.md +++ b/docs/frontend/phase06-clean-code.md @@ -1,11 +1,15 @@ --- title: Clean Code -description: Did you clean up in here? Of course. +description: با کد تمیز، به دنیای کدنویسیِ منظم، خوانا و قابل فهم قدم بگذارید. --- ## مقدمه -در این فاز مجموعه‌ای از Best Practiceها و Anti-patternها را جمع‌آوری کرده‌ایم +در این فاز مجموعه‌ای از +Best Practice +ها و +Anti-pattern +ها را جمع‌آوری کرده‌ایم تا شما بتوانید از آن‌ها برای نوشتن کد تمیز کمک بگیرید. سعی می‌کنیم هم‌زمان با پیشرفت شما در این دوره و همچنین سپری‌شدن دوره‌های آینده، این مجموعه را توسعه دهیم تا با گذشت زمان تبدیل به مرجع مناسبی برای شما و دیگر توسعه‌دهندگان شود. @@ -84,7 +88,9 @@ description: Did you clean up in here? Of course. #### README.md -فایل `README.md` معرفی‌نامۀ پروژۀ شماست. +فایل +`README.md` +معرفی‌نامۀ پروژۀ شماست. تمام مواردی که یک کاربر بیرونی احتیاج دارد در مورد پروژه بداند باید در این فایل آورده شوند یا حداقل به جایی که در مورد آن‌ها توضیح داده شده است، اشاره شود. @@ -104,62 +110,79 @@ description: Did you clean up in here? Of course. - مستندات کامل یا لینک به جایی که آن‌ها را قرار داده‌اید - برنامه‌های آینده و قابلیت‌هایی که می‌خواهید به پروژه اضافه کنید - شرایط پشتیبانی و نحوۀ ثبت درخواست -- توضیح اجمالی، دعوت به مشارکت و لینک به `CONTRIBUTING.md` +- توضیح اجمالی، دعوت به مشارکت و لینک به + `CONTRIBUTING.md` - لینک به صفحات پروژه در شبکه‌های اجتماعی - معرفی اجمالی توسعه‌دهندگان پروژه و لینک به صفحات مرتبط آن‌ها در شبکه‌های اجتماعی #### CONTRIBUTING.md -در دنیای Open-Source، آدم‌های زیادی پیدا می‌شوند که به طور رایگان بخواهند به شما کمک کنند؛ -بنابراین شما باید با فراهم‌کردن فایل `CONTRIBUTING.md` مناسب، آن‌ها را در این راه یاری کنید. +در دنیای +Open-Source +، آدم‌های زیادی پیدا می‌شوند که به طور رایگان بخواهند به شما کمک کنند؛ +بنابراین شما باید با فراهم‌کردن فایل +`CONTRIBUTING.md` +مناسب، آن‌ها را در این راه یاری کنید. پیشنهاد می‌کنیم موارد زیر را حتماً در این فایل بیاورید: -- پیشنهاد برای چک‌کردن لیست Issueهای فعلی و جلوگیری از ثبت Issue تکراری +- پیشنهاد برای چک‌کردن لیست + Issue + های فعلی و جلوگیری از ثبت + Issue + تکراری - لیست قابلیت‌هایی که دوست دارید توسط دیگران به پروژه اضافه شوند - لیست قابلیت‌هایی که دوست ندارید به پروژه اضافه شوند - لیست باگ‌هایی که دوست دارید توسط دیگران حل شوند - لیست باگ‌هایی که از وجود آن‌ها باخبرید اما قصد برطرف‌کردن آن‌ها را ندارید - مراحل ثبت باگ، درخواست امکانات جدید، ارتباط با توسعه‌دهندگان و موارد مشابه - پیش‌نیازهای راه‌اندازی پروژه بر روی سیستم شخص -- نحوۀ Cloneکردن و راه‌اندازی پروژه به صورت خط به خط با بیشترین جزئیات ممکن +- نحوۀ + Clone + کردن و راه‌اندازی پروژه به صورت خط به خط با بیشترین جزئیات ممکن - قوانین کدنویسی که در پروژه رعایت می‌کنید -- قواعد نوشتن Commit Message +- قواعد نوشتن + Commit Message --- ### IDE -استفاده از Text Editorهایی مانند VS Code فقط برای پروژه‌های کوچک مناسب است. +استفاده از +Text Editor +هایی مانند +VS Code +فقط برای پروژه‌های کوچک مناسب است. برای پروژه‌های بزرگ، مخصوصاً پروژه‌هایی که به صورت تیمی آن‌ها را توسعه می‌دهید، -حتماً از WebStorm استفاده کنید. +حتماً از +WebStorm +استفاده کنید. #### ESLint -برای فعال‌کردن تنظیمات ESLint مراحل زیر را طی کنید: +برای فعال‌کردن تنظیمات +ESLint +از لینک زیر استفاده کنید: + +- [How To Lint and Format Code with ESLint in Visual Studio Code](https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code) -1. از بالا-چپ بر روی `File` و سپس `Settings` کلیک کنید تا پنجرۀ تنظیمات باز شود -2. عبارت `ESLint` را در باکس بالا-چپ جست‌وجو کنید -3. از قسمت سمت چپ بر روی گزینۀ `Languages & Frameworks > JavaScript > Code Quality Tools > ESLint` کلیک کنید -4. از قسمت سمت راست تیک گزینۀ `Automatic ESLint configuration` را فعال کنید #### Prettier -برای فعال‌کردن تنظیمات Prettier مراحل زیر را طی کنید: +برای فعال‌کردن تنظیمات +Prettier +از لینک زیر استفاده کنید: -1. از بالا-چپ بر روی `File` و سپس `Settings` کلیک کنید تا پنجرۀ تنظیمات باز شود -2. عبارت `Prettier` را در باکس بالا-چپ جست‌وجو کنید -3. از قسمت سمت چپ بر روی گزینۀ `Languages & Frameworks > JavaScript > Prettier` کلیک کنید -4. از قسمت سمت راست عبارت مقابل `Run for files` را به عبارت زیر تغییر دهید - ``` - {**/*,*}.{*} - ``` -5. تیک گزینۀ `On save` را فعال کنید +- [How To Format Code with Prettier in Visual Studio Code](https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code) #### Stylelint -معمولاً هر شخص زمانی که کد CSS می‌نویسد، برای آن قواعدی در نظر می‌گیرد؛ -به‌عنوان مثال ترتیب و اولویت Propertyهای مختلف یا استفاده از یک فرمت رنگ خاص. +معمولاً هر شخص زمانی که کد +CSS +می‌نویسد، برای آن قواعدی در نظر می‌گیرد؛ +به‌عنوان مثال ترتیب و اولویت +Property +های مختلف یا استفاده از یک فرمت رنگ خاص. اما زمانی که به صورت تیمی بر روی پروژه‌ای کار می‌کنید، بهتر است این قواعد به صورت عمومی اعمال شوند تا کدی که در نهایت نوشته می‌شود برای همه قابل‌فهم و در یک چارچوب باشد. @@ -168,14 +191,26 @@ Stylelint ##### Setup -برای افزودن Stylelint به پروژۀ انگولاری خود، از دستور زیر استفاده کنید: +برای افزودن +Stylelint +به پروژۀ انگولاری خود، از دستور زیر استفاده کنید: ```shell npm install -D stylelint stylelint-config-standard-scss stylelint-config-prettier-scss stylelint-order postcss ``` -با اجرای دستور بالا علاوه بر پکیج stylelint چند پکیج دیگر نیز به پروژه اضافه می‌شوند -که به ترتیب مربوط به پشتیبانی از SCSS، جلوگیری از تداخل با Prettier، ترتیب Propertyها و PostCSS می‌باشند. +با اجرای دستور بالا علاوه بر پکیج +stylelint +چند پکیج دیگر نیز به پروژه اضافه می‌شوند +که به ترتیب مربوط به پشتیبانی از +SCSS +، جلوگیری از تداخل با +Prettier +، ترتیب +Property +ها و +PostCSS +می‌باشند. برای تنظیم قواعد، یک فایل با نام `stylelintrc.json.` @@ -593,7 +628,9 @@ npm install -D stylelint stylelint-config-standard-scss stylelint-config-prettie } ``` -سعی کرده‌ایم لیست کاملی از Propertyها را در این فایل فراهم کنیم؛ +سعی کرده‌ایم لیست کاملی از +Property +ها را در این فایل فراهم کنیم؛ اما به مرور زمان، نقص‌های احتمالی این فایل را ویرایش می‌کنیم. فراموش نکنید مانند فایل‌های @@ -607,16 +644,28 @@ npm install -D stylelint stylelint-config-standard-scss stylelint-config-prettie ##### IDE Configurations -برای فعال‌کردن تنظیمات Stylelint مراحل زیر را طی کنید: - -1. از بالا-چپ بر روی `File` و سپس `Settings` کلیک کنید تا پنجرۀ تنظیمات باز شود -2. عبارت `Stylelint` را در باکس بالا-چپ جست‌وجو کنید -3. از قسمت سمت چپ بر روی گزینۀ `Languages & Frameworks > Style Sheets > Stylelint` کلیک کنید -4. تیک گزینۀ `Enable` را فعال کنید -5. از قسمت سمت راست عبارت مقابل `Run for files` را به عبارت زیر تغییر دهید - ``` - {**/*,*}.{scss} - ``` +برای فعال‌کردن تنظیمات +Stylelint +مراحل زیر را طی کنید: + +1. از بالا-چپ بر روی + `File` + و سپس + `Settings` + کلیک کنید تا پنجرۀ تنظیمات باز شود +2. عبارت + `Stylelint` + را در باکس بالا-چپ جست‌وجو کنید +3. از قسمت سمت چپ بر روی گزینۀ + `Languages & Frameworks > Style Sheets > Stylelint` + کلیک کنید +4. تیک گزینۀ + `Enable` + را فعال کنید +5. از قسمت سمت راست عبارت مقابل + `Run for files` + را به عبارت زیر تغییر دهید + `{**/*,*}.{scss}` ##### Scripts @@ -644,25 +693,39 @@ npx stylelint "**/*.scss" --fix پیشنهاد می‌کنیم برای کاهش حجم عکس‌ها از سایت [Squoosh](https://squoosh.app/) استفاده کنید. -همچنین به طور کلی حجم فایل‌های `svg` از فرمت‌های دیگر کمتر است، +همچنین به طور کلی حجم فایل‌های +`svg` +از فرمت‌های دیگر کمتر است، بنابراین سعی کنید تا جای ممکن از این فرمت استفاده کنید. -در صورتی که عکس شما به صورت Raster بود و امکان استفاده از `svg` را نداشتید، پیشنهاد ما فرمت `webp` می‌باشد. +در صورتی که عکس شما به صورت +Raster +بود و امکان استفاده از +`svg` +را نداشتید، پیشنهاد ما فرمت +`webp` +می‌باشد. به طور کلی توصیه می‌کنیم تا جای ممکن از ویدئو استفاده نکنید. #### Comment زمانی که در حال توسعۀ پروژه هستید، ممکن است بخواهید به‌طور موقت قسمتی از کد را کامنت کنید؛ -این مورد به تنهایی مشکلی ندارد اما زمانی که خواستید کد را بر روی نسخۀ `master` یا `main` ببرید، +این مورد به تنهایی مشکلی ندارد اما زمانی که خواستید کد را بر روی نسخۀ +`master` یا `main` +ببرید، حتماً کامنت‌های اضافی را پاک کنید. همچنین به طور کلی زمانی که مجبور شدید برای توضیح قسمتی از کد، از کامنت استفاده کنید، احتمالاً کدی که نوشتید تمیز نیست؛ سعی کنید همیشه کدی بنویسید که بدونِ نیاز به توضیحات، قابل‌فهم باشد. #### Unicode Characters -بعضاً مشاهده می‌شود که توسعه‌دهندگان برای نمایش اعداد فارسی از کاراکترهای `۰۱۲۳۴۵۶۷۸۹` استفاده می‌کنند؛ +بعضاً مشاهده می‌شود که توسعه‌دهندگان برای نمایش اعداد فارسی از کاراکترهای +`۰۱۲۳۴۵۶۷۸۹` +استفاده می‌کنند؛ ما پیشنهاد می‌کنیم به‌هیچ‌وجه چنین کاری نکنید؛ -در عوض از فونتی استفاده کنید که کاراکترهای `0123456789` را به شکل درست نمایش دهد. +در عوض از فونتی استفاده کنید که کاراکترهای +`0123456789` +را به شکل درست نمایش دهد. --- @@ -675,7 +738,9 @@ npx stylelint "**/*.scss" --fix به‌عنوان مثال ممکن است ظاهر سایت شما در یک مرورگر خاص دقیقاً همان‌طور باشد که می‌خواهید اما در یک مرورگر دیگر کاملاً به‌هم‌ریخته باشد. -برای حل این مشکل Resetهای متعددی وجود دارد +برای حل این مشکل +Reset +های متعددی وجود دارد اما ما در اینجا از ساده‌ترین آن‌ها استفاده می‌کنیم: ```css @@ -691,11 +756,19 @@ npx stylelint "**/*.scss" --fix #### BEM -یکی از معروف‌ترین و محبوب‌ترین متدولوژی‌های موجود که در نام‌گذاری المان‌ها استفاده می‌شود، BEM است. +یکی از معروف‌ترین و محبوب‌ترین متدولوژی‌های موجود که در نام‌گذاری المان‌ها استفاده می‌شود، +BEM +است. با استفاده از این متدولوژی می‌توانید صرفاً با نگاه‌کردن به اسم یک المان، ساختاری که در آن قرار دارد را متوجه شوید. -همچنین از آن‌جایی که برای هر المان از یک کلاس مشخص استفاده می‌کنید، به مشکلات مربوط به Specificity برنخواهید خورد. +همچنین از آن‌جایی که برای هر المان از یک کلاس مشخص استفاده می‌کنید، به مشکلات مربوط به +Specificity +برنخواهید خورد. -استفاده از BEM در `SCSS` بسیار راحت است: +استفاده از +BEM +در +`SCSS` +بسیار راحت است: ```scss .card { @@ -723,20 +796,32 @@ npx stylelint "**/*.scss" --fix #### Color Syntax -در CSS به طور کلی از 4 روش مختلف می‌توان رنگ یک المان را تعیین کرد که در ادامه به مقایسۀ آن‌ها می‌پردازیم. +در +CSS +به طور کلی از 4 روش مختلف می‌توان رنگ یک المان را تعیین کرد که در ادامه به مقایسۀ آن‌ها می‌پردازیم. ##### Names شاید به نظر برسد بهترین راه برای مشخص‌کردن یک رنگ، استفاده از اسم آن است. برای رنگ‌هایی که به طور معمول با آن‌ها سروکار داریم و اسم آن‌ها را می‌دانیم، این قضیه صادق است؛ -اما CSS دارای بیش از 100 رنگ است که تعداد زیادی از آن‌ها برای توسعه‌دهندگان، +اما +CSS +دارای بیش از 100 رنگ است که تعداد زیادی از آن‌ها برای توسعه‌دهندگان، به خصوص کسانی که زبان مادری آن‌ها انگلیسی نیست، ناآشنا هستند. از طرفی حتی در مورد رنگ‌هایی که اسم آن‌ها را می‌دانیم، نمی‌توانیم به طور دقیق میزان پُررنگ یا کم‌رنگ‌بودن آن‌ها را تشخیص دهیم. -به‌عنوان مثال تفاوت رنگ‌های `pink` و `lightpink` در چیست؟ -یا کدام‌یک از رنگ‌های `hotpink` و `deeppink` پُررنگ‌تر است؟ +به‌عنوان مثال تفاوت رنگ‌های +`pink` +و +`lightpink` +در چیست؟ +یا کدام‌یک از رنگ‌های +`hotpink` +و +`deeppink` +پُررنگ‌تر است؟ البته این نوع رنگ‌ها کاملاً هم بلااستفاده نیستند، بلکه بعضاً برای زمانی که صرفاً به‌دنبال تست‌کردن پروژه یا شناسایی باگ هستید، @@ -747,7 +832,9 @@ npx stylelint "**/*.scss" --fix این فرمت از سه عدد در مبنای 16 تشکیل شده است؛ آیا برای اثبات نابهینه‌بودن این فرمت احتیاج به توضیح بیشتری هست؟ جدای از آنکه تشخیص یک عدد مبنای 16 و محاسبه ذهنی برای تبدیل آن به مبنای 10 کاری دشوار است، -این فرمت دارای مشکل بزرگ دیگری است که در قسمت RGB به آن اشاره می‌کنیم. +این فرمت دارای مشکل بزرگ دیگری است که در قسمت +RGB +به آن اشاره می‌کنیم. ##### RGB @@ -756,19 +843,27 @@ npx stylelint "**/*.scss" --fix و هر چه عدد متناظر یک رنگ بزرگ‌تر باشد، مقدار بیشتری از آن در رنگ نهایی استفاده خواهد شد. مشکل این فرمت آن است که نمی‌توان رنگ فعلی را به راحتی تشخیص داد. -به‌عنوان مثال `rgb(48, 15, 16)` مربوط به چه رنگی است؟ +به‌عنوان مثال +`rgb(48, 15, 16)` +مربوط به چه رنگی است؟ درست است که می‌توان متوجه شد رنگ قرمز تقریباً 3 برابر رنگ‌های سبز و آبی استفاده شده است، اما اینکه رنگ نهایی چه چیزی است، بسیار دشوار است. همچنین ساخت نسخه‌های روشن‌تر یا تیره‌تر با استفاده از این فرمت به هیچ عنوان ساده نیست. ##### HSL -این فرمت از سه قسمت تشکیل شده است که به ترتیب یک زاویه در Color Wheel، +این فرمت از سه قسمت تشکیل شده است که به ترتیب یک زاویه در +Color Wheel +، درصد استفاده از رنگ پایه و درصد روشنایی رنگ نهایی را مشخص می‌کنند. -اگر Color Wheel و زاویۀ رنگ‌های اصلی را حفظ کنید، +اگر +Color Wheel +و زاویۀ رنگ‌های اصلی را حفظ کنید، به راحتی می‌توانید رنگی که با این فرمت ساخته می‌شود را تشخیص دهید. -حفظ‌کردن Color Wheel بسیار ساده‌تر از چیزی است که فکر می‌کنید؛ +حفظ‌کردن +Color Wheel +بسیار ساده‌تر از چیزی است که فکر می‌کنید؛ صرفاً کافی است رنگ‌های رنگین‌کمان را بلد باشد: - قرمز: 0 @@ -781,8 +876,14 @@ npx stylelint "**/*.scss" --fix ایجاد قالب‌های رنگی با استفاده از این فرمت بسیار ساده است؛ از قسمت اول برای تغییر رنگ پایه می‌توانید استفاده کنید و صرفاً با افزودن 180 درجه، به رنگ مکمل می‌رسید؛ -قسمت دوم برای تعیین میزان روشنایی در قالب‌های Light و Dark کاربرد دارد؛ -قسمت سوم مربوط به روشنایی رنگ نهایی است و می‌توانید از آن برای ایجاد رنگ Stateهایی مانند Hover استفاده کنید. +قسمت دوم برای تعیین میزان روشنایی در قالب‌های +Light و Dark +کاربرد دارد؛ +قسمت سوم مربوط به روشنایی رنگ نهایی است و می‌توانید از آن برای ایجاد رنگ +State +هایی مانند +Hover +استفاده کنید. ```css :root { @@ -855,12 +956,30 @@ npx stylelint "**/*.scss" --fix ##### font-family -استایل‌های مربوط به `font-family` را به `*` ندهید چراکه باعث بالا رفتن Specificity می‌شود -و در کار بعضی از کتابخانه‌ها مانند Fontawesome یا Monaco Editor خلل ایجاد می‌کند. -در عوض می‌توانید این استایل را به `html` بدهید. -از آنجایی که `font` از المان پدر به ارث می‌رسد، +استایل‌های مربوط به +`font-family` +را به +`*` +ندهید چراکه باعث بالا رفتن +Specificity +می‌شود +و در کار بعضی از کتابخانه‌ها مانند +Fontawesome +یا +Monaco Editor +خلل ایجاد می‌کند. +در عوض می‌توانید این استایل را به +`html` +بدهید. +از آنجایی که +`font` +از المان پدر به ارث می‌رسد، تمام المان‌های شما فونت مورد نظر را خواهند داشت. -اما بعضی از المان‌ها مانند `input` و `button` احتیاج دارند که به طور دقیق فونت آن‌ها را مشخص کنید. +اما بعضی از المان‌ها مانند +`input` +و +`button` +احتیاج دارند که به طور دقیق فونت آن‌ها را مشخص کنید. برای راحتی کار می‌توانید از کد زیر استفاده کنید: @@ -886,10 +1005,18 @@ optgroup { ##### Generic Default Fonts -همیشه یک فونت پیش‌فرض مانند `sans-serif` را به آخر `font-family` اضافه کنید +همیشه یک فونت پیش‌فرض مانند +`sans-serif` +را به آخر +`font-family` +اضافه کنید تا در صورتی که به هر دلیلی فونت اصلی از کار افتاد، مرورگر بتواند از فونت پیش‌فرض استفاده کند. -دقت کنید که فقط فونت‌های Generic می‌توانند به‌عنوان Fallback استفاده شوند؛ یعنی: +دقت کنید که فقط فونت‌های +Generic +می‌توانند به‌عنوان +Fallback +استفاده شوند؛ یعنی: - serif - sans-serif @@ -899,18 +1026,37 @@ optgroup { #### rem & px -همان‌طور که می‌دانید به طور پیش‌فرض هر `rem` برابر با `16px` است. -این موضوع باعث می‌شود زمانی که می‌خواهید از `rem` استفاده کنید، +همان‌طور که می‌دانید به طور پیش‌فرض هر +`rem` برابر با +`16px` +است. +این موضوع باعث می‌شود زمانی که می‌خواهید از +`rem` +استفاده کنید، مجبور به انجام محاسبات نسبتاً سختی باشید که سرعت توسعه و از همه مهم‌تر خوانایی کد را کاهش می‌دهد. -برای حل این مشکل پیشنهاد می‌کنیم سایز فونت `html` را به `%62.5` تغییر دهید؛ -با این کار هر `rem` برابر با `10px` خواهد شد. +برای حل این مشکل پیشنهاد می‌کنیم سایز فونت +`html` +را به +`%62.5` +تغییر دهید؛ +با این کار هر +`rem` +برابر با +`10px` +خواهد شد. #### Variables -ما پیشنهاد می‌کنیم همیشه به طور پیش‌فرض از متغیرهای CSS استفاده کنید -و تنها در صورتِ نیاز به متغیرهای SCSS رجوع کنید. +ما پیشنهاد می‌کنیم همیشه به طور پیش‌فرض از متغیرهای +CSS +استفاده کنید +و تنها در صورتِ نیاز به متغیرهای +SCSS +رجوع کنید. -همچنین پیشنهاد می‌کنیم متغیرها را قبل از بقیۀ Ruleها تعریف کنید تا خوانایی کد بالا رود و از اشتباهات احتمالی جلوگیری شود: +همچنین پیشنهاد می‌کنیم متغیرها را قبل از بقیۀ +Rule +ها تعریف کنید تا خوانایی کد بالا رود و از اشتباهات احتمالی جلوگیری شود: ```css .item { @@ -923,16 +1069,36 @@ optgroup { #### Transition/Animation Performance -در صورتی که فقط از `transform` و `opacity` برای انجام Animationهای خود استفاده کنید، -فقط مرحله Composite اجرا می‌شود و مرورگر می‌تواند تمام کارها را بر عهدۀ GPU بگذارد. -بنابراین همیشه سعی کنید فقط از این دو Property استفاده کنید. +در صورتی که فقط از +`transform` +و +`opacity` +برای انجام +Animation +های خود استفاده کنید، +فقط مرحله +Composite +اجرا می‌شود و مرورگر می‌تواند تمام کارها را بر عهدۀ +GPU +بگذارد. +بنابراین همیشه سعی کنید فقط از این دو +Property +استفاده کنید. -دقت کنید که در اینجا منظور تنها کلیدواژۀ `animation` یا `keyframe` نیست، -بلکه `transition` و به طور کلی هر راهی که بتوان با آن ظاهر یک المان را به تدریج عوض کرد، مد نظر است. +دقت کنید که در اینجا منظور تنها کلیدواژۀ +`animation` +یا +`keyframe` +نیست، +بلکه +`transition` +و به طور کلی هر راهی که بتوان با آن ظاهر یک المان را به تدریج عوض کرد، مد نظر است. #### Zero Unit -در CSS زمانی که از عدد `0` استفاده می‌کنید، +در +CSS +زمانی که از عدد `0` استفاده می‌کنید، بهتر است واحدی برای آن در نظر نگیرید. ```css @@ -951,12 +1117,26 @@ optgroup { اگر قبلاً بر روی پروژه‌ای کار کرده باشید که هم‌زمان باید از دو زبان انگلیسی و فارسی پشتیبانی می‌کرد، قطعاً متوجه شده‌اید که نیاز است خیلی از استایل‌هایی که به راست یا چپ ربط دارند را عوض کنید. -به‌عنوان مثال اگر از `margin-left` در نسخۀ انگلیسی استفاده کردید، -باید در نسخۀ فارسی آن را به `margin-right` تغییر می‌دادید. -خوشبختانه در CSS برای حل این مشکل می‌توان از Logical Properties استفاده کنیم؛ -در این صورت، مرورگر بر اساس Direction سایت، استایل‌ها را اعمال می‌کند. - -در ادامه برای سایتی که LTR است، معادل چند Property پُر استفاده را می‌آوریم: +به‌عنوان مثال اگر از +`margin-left` +در نسخۀ انگلیسی استفاده کردید، +باید در نسخۀ فارسی آن را به +`margin-right` +تغییر می‌دادید. +خوشبختانه در +CSS +برای حل این مشکل می‌توان از +Logical Properties +استفاده کنیم؛ +در این صورت، مرورگر بر اساس +Direction +سایت، استایل‌ها را اعمال می‌کند. + +در ادامه برای سایتی که +LTR +است، معادل چند +Property +پُر استفاده را می‌آوریم: | Normal Property | Logical Property | | :-------------- | :------------------- | @@ -979,7 +1159,13 @@ optgroup { | min-width | min-inline-size | | max-width | max-inline-size | -هم‌چنین می‌توانید دو Logical Property را که هر دو Inline یا Block هستند، همزمان مقداردهی کنید. +هم‌چنین می‌توانید دو +Logical Property +را که هر دو +Inline +یا +Block +هستند، همزمان مقداردهی کنید. برای روشن‌تر شدن موضوع، سه کد معادل زیر را در نظر بگیرید: ```css @@ -1013,47 +1199,46 @@ optgroup { #### Global Styles Angular -برای استایل‌های Global شما، فایل `styles.scss` را فراهم کرده است؛ +برای استایل‌های +Global +شما، فایل +`styles.scss` +را فراهم کرده است؛ بنابراین هر زمان احتیاج داشتید استایلی بر روی تمام قسمت‌های سایت تاثیر بذارد، فقط و فقط از این فایل استفاده کنید. -در این فایل می‌توانید هر المانی را استایل‌دهی کنید اما توصیه می‌کنیم صرفاً استایل‌های Global را در این فایل بگذارید -و برای استایل‌دهی به یک کامپوننت خاص، از فایل SCSS مربوط به همان کامپوننت استفاده کنید. -همچنین از این فایل برای تعریف کلاس‌های کمکی یا متغیرهای CSS نیز می‌توانید استفاده کنید. - ---- - -### Comment Dictionary - -برخی از اشتباهات پُرتکرار هستند و کامنتی که برای رفع آن‌ها گذاشته می‌شود همیشه یکسان است. -برای این موارد، از علائم و اختصارات استفاده می‌کنیم که سرعت Review بیشتر شود. - -| کامنت | معنی | -| :------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------: | -| x | پاک شود | -| ^ | بالای این خط، یک خط خالی اضافه شود | -| v | پایین این خط، یک خط خالی اضافه شود | -| ree | خط خالی اضافه پاک شود | -| نمیگم | مشکلی که وجود دارد، قبلاً ذکر شده بود؛ برای جلوگیری از تعدد کامنت‌ها، این موضوع دیگر تذکر داده نمی‌شود، اما باید در تمام نقاط پروژه مورد بررسی قرار گیرد و حل شود | -| گفتم | به این مشکل در مستند Clean Code اشاره شده؛ بنابراین انتظار دارم نیازی به تذکر دوباره نباشد | -| چسب | در HTML، زمانی که محتوای یک المان خالی باشد، باید Closing Tag را به Opening Tag بچسبانید و هیچ فاصله‌ای، حتی Enter یا Space، بین آن‌ها نباشد | -| unit | در CSS، از Unit مناسبی استفاده نشده. در اکثر مواقع باید از `rem` استفاده کنید | -| nest | از قابلیت Nesting در SCSS استفاده کنید و ساختاری که در HTML وجود دارد را در CSS هم بیاورید | -| short it | در CSS به جای آوردن چند دستور در چند خط، از فرمت Shorthand آن‌ها استفاده کنید | -| tall it | از Shorthand استفاده نکنید و دستورات را در چند خط جدا بیاورید | -| غ | غیرقابل‌قبول | -| 😐 یا :/ | تَهِ اعتراض! | +در این فایل می‌توانید هر المانی را استایل‌دهی کنید اما توصیه می‌کنیم صرفاً استایل‌های +Global +را در این فایل بگذارید +و برای استایل‌دهی به یک کامپوننت خاص، از فایل +SCSS +مربوط به همان کامپوننت استفاده کنید. +همچنین از این فایل برای تعریف کلاس‌های کمکی یا متغیرهای +CSS +نیز می‌توانید استفاده کنید. --- ## پروژه -از این پس، برای تمام PRهایی که می‌زنید، -از هر دو عضوِ یکی از تیم‌ها درخواست کنید تا کد شما را جداگانه Review کنند؛ -بعد از اینکه Approve کردند، به منتور عادی مراجعه کنید -و پس از Approve او، به منتور سنیور بگویید تا کد شما را ببیند. - -همچنین لازم است شما هم حداقل کد یک تیم دیگر را Review کنید. -سعی کنید تمام مواردی که در این فاز یاد گرفتید را هنگام Review مورد بررسی قرار دهید. +از این پس، برای تمام +PR +هایی که می‌زنید، +از هر دو عضوِ یکی از تیم‌ها درخواست کنید تا کد شما را جداگانه +Review +کنند؛ +بعد از اینکه +Approve +کردند، به منتور عادی مراجعه کنید +و پس از +Approve +او، به منتور سنیور بگویید تا کد شما را ببیند. + +همچنین لازم است شما هم حداقل کد یک تیم دیگر را +Review +کنید. +سعی کنید تمام مواردی که در این فاز یاد گرفتید را هنگام +Review +مورد بررسی قرار دهید. برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید: From c9b0b6f834cf72871da4c6bc08b140a1c531f89b Mon Sep 17 00:00:00 2001 From: "h.rangraz" Date: Sat, 13 Jul 2024 14:16:16 +0330 Subject: [PATCH 3/4] refactor --- docs/frontend/phase06-clean-code.md | 507 +--------------------------- 1 file changed, 8 insertions(+), 499 deletions(-) diff --git a/docs/frontend/phase06-clean-code.md b/docs/frontend/phase06-clean-code.md index 39c86a82..e5efde37 100644 --- a/docs/frontend/phase06-clean-code.md +++ b/docs/frontend/phase06-clean-code.md @@ -5,14 +5,9 @@ description: با کد تمیز، به دنیای کدنویسیِ منظم، خ ## مقدمه -در این فاز مجموعه‌ای از -Best Practice -ها و -Anti-pattern -ها را جمع‌آوری کرده‌ایم -تا شما بتوانید از آن‌ها برای نوشتن کد تمیز کمک بگیرید. -سعی می‌کنیم هم‌زمان با پیشرفت شما در این دوره و همچنین سپری‌شدن دوره‌های آینده، -این مجموعه را توسعه دهیم تا با گذشت زمان تبدیل به مرجع مناسبی برای شما و دیگر توسعه‌دهندگان شود. +اگر اصول Clean Code را در توسعه فرانت‌اند رعایت نکنیم، با چالش‌های جدی و متعددی روبرو خواهیم شد. این چالش‌ها می‌توانند شامل کد پیچیده و غیرقابل خواندن، دشواری در نگهداری و به‌روزرسانی، افزایش زمان و هزینه‌ی رفع اشکال، و مشکلات در همکاری تیمی باشند. در نتیجه، پروژه‌ها با تأخیر مواجه شده، کیفیت محصول نهایی کاهش یافته و هزینه‌های توسعه به طور قابل توجهی افزایش می‌یابد. همچنین، عدم رعایت این اصول می‌تواند منجر به ایجاد بدهی فنی شود که در طول زمان انباشته شده و مدیریت پروژه را دشوارتر می‌کند. + +برای جلوگیری از این مشکلات، رعایت اصول Clean Code در فرانت‌اند ضروری است. این اصول به ایجاد کدی خوانا، قابل نگهداری و قابل توسعه کمک می‌کنند که برای تیم‌های توسعه بسیار حیاتی است. با پیروی از این اصول، توسعه‌دهندگان می‌توانند کدی بنویسند که به راحتی توسط سایر اعضای تیم قابل درک و ویرایش باشد. این امر باعث کاهش زمان و هزینه‌های مربوط به رفع اشکال، بهبود و توسعه پروژه در آینده می‌شود. همچنین، کد تمیز به بهبود عملکرد و کارایی برنامه کمک می‌کند، زیرا ساختار بهینه و منطقی کد، اجرای سریع‌تر و کارآمدتر را تضمین می‌کند. - نوشتن کد تمیز چه مزایایی دارد؟ - از چه اصول و از چه تکنیک‌هایی برای دست‌یابی به کد تمیز می‌توان استفاده کرد؟ @@ -164,8 +159,7 @@ WebStorm ESLint از لینک زیر استفاده کنید: -- [How To Lint and Format Code with ESLint in Visual Studio Code](https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code) - +- [How To Lint Code with ESLint in Webstorm](https://www.jetbrains.com/help/webstorm/eslint.html) #### Prettier @@ -173,7 +167,7 @@ ESLint Prettier از لینک زیر استفاده کنید: -- [How To Format Code with Prettier in Visual Studio Code](https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code) +- [How To Format Code with Prettier in Webstorm](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_reformat_code) #### Stylelint @@ -189,494 +183,9 @@ Property Stylelint ابزاری است که به ما امکان تعریف چنین قواعدی را می‌دهد. -##### Setup - -برای افزودن -Stylelint -به پروژۀ انگولاری خود، از دستور زیر استفاده کنید: - -```shell -npm install -D stylelint stylelint-config-standard-scss stylelint-config-prettier-scss stylelint-order postcss -``` - -با اجرای دستور بالا علاوه بر پکیج -stylelint -چند پکیج دیگر نیز به پروژه اضافه می‌شوند -که به ترتیب مربوط به پشتیبانی از -SCSS -، جلوگیری از تداخل با -Prettier -، ترتیب -Property -ها و -PostCSS -می‌باشند. - -برای تنظیم قواعد، یک فایل با نام -`stylelintrc.json.` -بسازید. -ما پیشنهاد می‌کنیم از قواعد زیر استفاده کنید: - -```json -{ - "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"], - "plugins": ["stylelint-order"], - "rules": { - "color-named": "never", - "color-no-hex": true, - "custom-property-empty-line-before": null, - "declaration-block-no-redundant-longhand-properties": null, - "declaration-empty-line-before": null, - "no-descending-specificity": null, - "no-empty-source": null, - "order/order": ["custom-properties", "declarations", "rules"], - "order/properties-order": [ - { - "groupName": "reset", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["all"] - }, - { - "groupName": "content", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["content"] - }, - { - "groupName": "parent-related", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "order", - "flex", - "flex-grow", - "flex-shrink", - "grid-area", - "align-self", - "justify-self", - "counter-increment", - "counter-reset" - ] - }, - { - "groupName": "color", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "background", - "background-attachment", - "background-blend-mode", - "background-clip", - "background-color", - "background-image", - "background-origin", - "background-position", - "background-repeat", - "background-size", - "color", - "accent-color", - "fill", - "box-shadow", - "mix-blend-mode", - "opacity", - "visibility" - ] - }, - { - "groupName": "filter", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["filter", "backdrop-filter"] - }, - { - "groupName": "mask", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "mask", - "mask-clip", - "mask-composite", - "mask-image", - "mask-mode", - "mask-origin", - "mask-position", - "mask-repeat", - "mask-size", - "mask-type" - ] - }, - { - "groupName": "box", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["direction", "box-sizing"] - }, - { - "groupName": "position", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "position", - "isolation", - "inset", - "inset-block", - "inset-block-start", - "inset-block-end", - "inset-inline", - "inset-inline-start", - "inset-inline-end", - "top", - "right", - "bottom", - "left", - "overflow", - "overflow-block", - "overflow-inline", - "overflow-x", - "overflow-y", - "overflow-wrap", - "z-index" - ] - }, - { - "groupName": "display", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "display", - "flex-basis", - "flex-direction", - "flex-flow", - "flex-wrap", - "grid", - "grid-auto-columns", - "grid-auto-flow", - "grid-auto-rows", - "grid-column", - "grid-column-end", - "grid-column-gap", - "grid-column-start", - "grid-row", - "grid-row-end", - "grid-row-gap", - "grid-row-start", - "grid-template", - "grid-template-areas", - "grid-template-columns", - "grid-template-rows", - "columns", - "place-content", - "place-items", - "align-content", - "align-items", - "justify-content", - "justify-items", - "gap", - "grid-gap", - "column-gap", - "row-gap" - ] - }, - { - "groupName": "list", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["list-style", "list-style-image", "list-style-position", "list-style-type"] - }, - { - "groupName": "size", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "min-block-size", - "block-size", - "max-block-size", - "min-inline-size", - "inline-size", - "max-inline-size", - "min-width", - "width", - "max-width", - "min-height", - "height", - "max-height", - "aspect-ratio", - "resize", - "object-fit", - "object-position", - "scroll-behavior" - ] - }, - { - "groupName": "scroll", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["scroll-behavior"] - }, - { - "groupName": "box-model", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "margin", - "margin-block", - "margin-block-start", - "margin-block-end", - "margin-inline", - "margin-inline-start", - "margin-inline-end", - "margin-top", - "margin-right", - "margin-bottom", - "margin-left", - "padding-block", - "padding-block-start", - "padding-block-end", - "padding-inline", - "padding-inline-start", - "padding-inline-end", - "padding", - "padding-top", - "padding-right", - "padding-bottom", - "padding-left" - ] - }, - { - "groupName": "border", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "border", - "border-block", - "border-block-color", - "border-block-style", - "border-block-width", - "border-block-start", - "border-block-start-color", - "border-block-start-style", - "border-block-start-width", - "border-inline", - "border-inline-color", - "border-inline-style", - "border-inline-width", - "border-inline-start", - "border-inline-start-color", - "border-inline-start-style", - "border-inline-start-width", - "border-top", - "border-top-color", - "border-top-style", - "border-top-width", - "border-right", - "border-right-color", - "border-right-style", - "border-right-width", - "border-bottom", - "border-bottom-color", - "border-bottom-style", - "border-bottom-width", - "border-left", - "border-left-color", - "border-left-style", - "border-left-width", - "border-collapse", - "border-color", - "border-image", - "border-image-outset", - "border-image-repeat", - "border-image-slice", - "border-image-source", - "border-image-width", - "border-radius", - "border-start-start-radius", - "border-start-end-radius", - "border-end-end-radius", - "border-end-start-radius", - "border-top-right-radius", - "border-bottom-right-radius", - "border-bottom-left-radius", - "border-top-left-radius", - "border-spacing", - "border-style", - "border-width" - ] - }, - { - "groupName": "outline", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["outline", "outline-color", "outline-offset", "outline-style", "outline-width"] - }, - { - "groupName": "transform", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["transform", "transform-origin", "transform-style"] - }, - { - "groupName": "clip-path", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["clip-path"] - }, - { - "groupName": "font", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "font", - "font-family", - "font-kerning", - "font-language-override", - "font-size", - "font-size-adjust", - "font-stretch", - "font-style", - "font-synthesis", - "font-variant", - "font-variant-alternates", - "font-variant-caps", - "font-variant-east-asian", - "font-variant-ligatures", - "font-variant-numeric", - "font-variant-position", - "font-weight" - ] - }, - { - "groupName": "text", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "text-align", - "text-align-last", - "text-combine-upright", - "text-decoration", - "text-decoration-color", - "text-decoration-line", - "text-decoration-style", - "text-decoration-thickness", - "text-emphasis", - "text-indent", - "text-justify", - "text-orientation", - "text-overflow", - "text-shadow", - "text-transform", - "text-underline-position", - "letter-spacing", - "line-break", - "line-height", - "vertical-align", - "white-space", - "word-break", - "word-spacing", - "word-wrap", - "writing-mode" - ] - }, - { - "groupName": "print", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["page-break-after", "page-break-before", "page-break-inside"] - }, - { - "groupName": "3d", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["perspective", "perspective-origin", "backface-visibility"] - }, - { - "groupName": "transition", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "transition", - "transition-delay", - "transition-duration", - "transition-property", - "transition-timing-function" - ] - }, - { - "groupName": "animation", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": [ - "animation", - "animation-delay", - "animation-direction", - "animation-duration", - "animation-fill-mode", - "animation-iteration-count", - "animation-name", - "animation-play-state", - "animation-timing-function" - ] - }, - { - "groupName": "cursor & pointer", - "emptyLineBefore": "always", - "noEmptyLineBetween": true, - "properties": ["cursor", "pointer-events", "user-select"] - } - ] - } -} -``` - -سعی کرده‌ایم لیست کاملی از -Property -ها را در این فایل فراهم کنیم؛ -اما به مرور زمان، نقص‌های احتمالی این فایل را ویرایش می‌کنیم. - -فراموش نکنید مانند فایل‌های -`gitignore.` -و -`prettierignore.` -، -محتویات فایل -`stylelintignore.` -را نیز بروز کنید. - -##### IDE Configurations - -برای فعال‌کردن تنظیمات -Stylelint -مراحل زیر را طی کنید: - -1. از بالا-چپ بر روی - `File` - و سپس - `Settings` - کلیک کنید تا پنجرۀ تنظیمات باز شود -2. عبارت - `Stylelint` - را در باکس بالا-چپ جست‌وجو کنید -3. از قسمت سمت چپ بر روی گزینۀ - `Languages & Frameworks > Style Sheets > Stylelint` - کلیک کنید -4. تیک گزینۀ - `Enable` - را فعال کنید -5. از قسمت سمت راست عبارت مقابل - `Run for files` - را به عبارت زیر تغییر دهید - `{**/*,*}.{scss}` - -##### Scripts - -برای چک‌کردن خطاهای احتمالی یا برطرف کردن آن‌ها به‌صورت خودکار، می‌توانید از دستورات زیر استفاده کنید: - -```shell -npx stylelint "**/*.scss" -npx stylelint "**/*.scss" --fix -``` - -برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید: +برای آشنایی بیشتر با +StyleLint +از لینک‌های زیر استفاده کنید: - [Stylelint](https://stylelint.io/) - [stylelint-order](https://www.npmjs.com/package/stylelint-order/) From b2d0432fa24784d79aa7d4afd16a059ab801f23a Mon Sep 17 00:00:00 2001 From: "h.rangraz" Date: Sat, 13 Jul 2024 14:21:35 +0330 Subject: [PATCH 4/4] refactor --- docs/frontend/phase03-ui-ux.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/frontend/phase03-ui-ux.md b/docs/frontend/phase03-ui-ux.md index 3486aacf..732e335d 100644 --- a/docs/frontend/phase03-ui-ux.md +++ b/docs/frontend/phase03-ui-ux.md @@ -16,9 +16,12 @@ tags: [Readonly] ## مقدمه -معمولاً در پروژه‌های بزرگ، وظیفۀ طراحی بر عهدۀ شخصی به جز توسعه‌دهندۀ فرانت‌اند است. -اما در خیلی از مواقع ممکن است شما خودتان بخواهید این کار را انجام دهید. -بنابراین در اینجا مواردی که باید در طراحی به آن‌ها توجه کنید را توضیح می‌دهیم. + +فرض کنید یک اپلیکیشن خرید آنلاین داریم که هدف آن فروش محصولات مختلف به کاربران است. یکی از ویژگی‌های کلیدی این اپلیکیشن، نمایش محصولات مشابه است. اگر اپلیکیشن دارای یک طراحی خوب باشد، می‌تواند محصولات مشابه را به صورت واضح و جذاب نمایش دهد. + +برای مثال، اگر اپلیکیشن دارای یک بخش "محصولات مشابه" باشد که به صورت واضح و با تصاویر جذاب نمایش داده شود، کاربر می‌تواند به راحتی محصولات مشابه را مشاهده کند و تصمیم خرید را با اطمینان بیشتری بگیرد. همچنین، اگر اپلیکیشن دارای یک فیلتر و مرتب‌سازی مناسب باشد، کاربر می‌تواند به راحتی محصولات را بر اساس قیمت، برند و سایر ویژگی‌ها فیلتر کند و به محصول مورد نظر خود دسترسی پیدا کند. + +از سوی دیگر، اگر اپلیکیشن دارای یک طراحی ضعیف باشد، بخش "محصولات مشابه" ممکن است به صورت نامنظم و بدون تصاویر جذاب نمایش داده شود. این می‌تواند باعث شود کاربر نتواند به راحتی محصولات مشابه را مشاهده کند و تصمیم خرید را با اطمینان بیشتری بگیرد. بنابراین، یک طراحی خوب می‌تواند به افزایش رضایت کاربر، بهبود نرخ تبدیل و افزایش وفاداری مشتری کمک کند. - تفاوت UI و UX چیست؟ - کدام رنگ‌ها هم‌نشینی بهتری با یکدیگر دارند؟