نوشته های Ali

آموزش Sass به همراه مثال (قسمت دوم)

Ali — Wed, 23 Jun 2021 13:16:56 +0430

تو این پارت قراره نحوه استفاده کردن از sass رو بهتون آموزش بدم:تو در تویی (Nesting)همونطور که میدونید ما توی css وقتی میخوایم استایل دهی کنیم یک id یا class یا تگ رو انتخاب میکنیم و توی بلوک خودش بهش استایل میدیم ولی در sass ما میتونیم بصورت تو در تو استایل بدیم که توی کد زیر نشونتون میدم باید چیکار کنید:.items { display: flex; flex-wrap: wrap; .item { font-size: } }تو این مثال کلاس items استایل هاشو گرفته و کلاس item که داخل کلاس items بصورت child وجود داره nested شده و استایل های ما روش اعمال میشهوقتی بخوایم از سودو المنت ها در sass استفاده کنیم باید بصورت زیر عمل کنیم:.item { background-color: red; &:hover { background-color: green; } }تو این مثال گفتم وقتی item:hover شد رنگ پس زمینه سبز بشهایجاد متغیر (Variables)با استفاده از متغیر شما می‌توانید مقداری را ذخیره کرده و بعدا بارها از آن در مکان‌های مختلف استفاده کنید، برای تعریف کردن متغیر در sass باید در ابتدای نام متغیر سیمبل $ رو قرار داده و بعدش اسم متغیر رو مینویسیم، به مثال زیر توجه کنید:$primary-color: red; $my-font-size: 20px;متغیرهای بالا رو تعریف کردیم وقتی بخوایم استفادشون کنیم مثل زیر عمل میکنیم:background-color: $primary-color; font-size: $my-font-size;اینجا رنگ بکگراند قرمز میشه و سایز فونتمون 20 پیکسل قرار میگیرهمیکسین (Mixin)خیلی از قطعه کدها در css در مکان‌های مختلفی تکرار می‌شوند و هیچ راهی برای جلوگیری از تکرار آنها نداریم. اما در Sass این مشکل به کمک mixin حل شده، با استفاده از mixin می‌توان یک الگو ایجاد کرده و از آن الگو چندین در برنامه استفاده کرد، نحوه تعریف از mixin توی sass بصورت زیره:@mixin flexLayout { display: flex; justify-content: center; align-items: center; }اینجا گفتیم ما یه mixin داریم به اسم flexLayout که استایل های توش با هم یه جا نوشته شدنحالا اگه بخوای از mixin بالا استفاده کنیم باید کد زیر رو بنویسیم:.logo { @include flexLayout; }در این مرحله گفتیم کلاس logo شامل mixin ای به اسم flexLayout باشه، اینجوری ما بجای اینکه 3 تا استایل مختلف رو توی کلاس logo بنویسیم یک بار از mixin اون استفاده میکنیم و کاملا قابلیت اینو داره که چنیدن بار استفاده بشهامیدوارم این قسمت هم مورد استفادتون قرار گرفته باشه

آموزش Sass به همراه مثال (قسمت اول)

Ali — Wed, 16 Jun 2021 12:24:27 +0430

شاید اسمشو شنیده باشید ولی ندونید برای چی استفاده میشه، برا همین میخوام تو این مقاله بهش بپردازم. Sass یه پیش پردازنده برای Css هست، در واقع Sass یسری امکانات اضافی و پرفورمنس بهتری رو برای ما به ارمغان میاره و میشه گفت Sass محبوب ترین و پر کاربردترین پیش پردازنده برای Css هست.برای اضافه کردن Sass به پروژه کافیه افزونه کامپایل کدهای Sass به Css رو توی کد ادیتورمون نصب کنیم و به جای پسوند css. برای استایل هامون از پسوند scss. یا sass. استفاده کنیم.تفاوت بین پسوندهای scss. و sass. تو سینتکسشونه و در عمل هیچ تفاوتی با هم ندارن، توی sass از {} و... استفاده نمیشه ولی توی scss از مواردی که در Css خام استفاده میکنیم استفاده میشه و خوانایی راحت تری داره، برای مثال های این مقاله هم از سینتکس scss استفاده میکنیم.حالا بریم نحوه نصب scss روی کد ادیتور vscode و همچنین نحوه کامپایل کردن کدهای scss به css رو بهتون توضیح بدم.اول افزونه های sass و live sass compiler رو بر روی vscode خودمون نصب میکنیم و توی vscode مون یه قسمتی فعال میشه به اسم watch sass سپس باید بریم توی setting کد ادیتورمون و برگه setting.json رو باز میکنیم و سپس در آخر این تنظیمات کد زیر رو در انتها قرار میدیم:"liveSassCompile.settings.formats": [{ "format": "expanded", "extensionName": ".css", "savePath": "./css" }]معنی این کد این میشه که فرمتی که قراره css هامون ذخیره بشه شبیه همون فایلای css خودمونه و بصورت css. ذخیره میشه و محل ذخیره هم در قسمت savePath مشخص کردیم که قابل تغییره، سپس برای اینکه بتونیم کدهای scss خودمون رو به css تبدیل کنیم، کدهایی که تو scss رو زدیم بعدش روی watch sass میزنیم و بصورت اتوماتیک کدهای scss مون در فایل css ای که محل ذخیره شو مشخص کردیم کامپایل میشه و ما توی html مون ادرس اون فایل css رو link میکنیم و تغییرات روی استیال سایتمون اعمال میش شوند. در قسمت بعدی نحوه کد زدن با sass رو بهتون آموزش میدم.

ریجِکس (RegEx) در جاوا اسکریپت بهمراه مثال

Ali — Sat, 12 Jun 2021 16:07:35 +0430

ریجکس مخفف عبارت Regular Expression که ترجمه فارسی آن عبارات با قاعده می باشد. ترجمه فارسی ریجکس زیاد کمک خاصی به شما نمی کنه در نتیجه بهتره سراغ مثال های عملی بریم.یک لحظه تصور کنید که دارید برنامه ای می‌نویسید که کاربر می‌خواهد نام کاربری خود را انتخاب کند که داری حروف، کاراکتر و اعداد باشد. همچنین تعداد کاراکترهای کاربر محدود باشد. برای اعتبار سنجی این نام کاربری باید از ریجکس استفاده کرد.برای اعتبار سنجی فرم ها در فرانت بهترین روشی که میتوان استفاده کرد ریجکس می باشد، با چند مثال عملی ریجکس را بصورت مقدماتی براتون توضیح میدم.در ریجکس لازمه یک الگو (pattern) تعریف شود که جستجو شود. در این الگو برخی حرف‌ها (متا کاراکترها) معنای خاصی دارند.سینتکس ریجکس بصورت // بین دو اسلش می باشد و برای نوشتن pattern ی که باهاش میشه اعتبار سنجی رو انجام داد باید داخل // نوشته بشه، با چن مثال بصورت عملی بهتون نشون میدم که باید چیکار کنید.let str = " enigma love" let pattern = /^ enigma/ pattern.test(str)تو این مثال علامت ^ داخل // نشون میده که اگه کلمه enigma در اول اون اینپوتی که داریم اعتبار سنجی میکنیم بیاد به ما true برمیگردونه و ما با همین میتونیم احراز هویت انجام بدیم. (برای اعتبار سنجی pattern از متد test استفاده کردیم)✔پاسخ تست مثال ها true استlet str = "love enigma" let pattern = /enigma$/ pattern.test(str)تو این مثال علامت $ داخل // نشون میده که اگه کلمه enigma در آخر اون اینپوتی که داریم اعتبار سنجی میکنیم بیاد به ما true برمیگردونهlet str = " enigma 2035" let pattern = /^enigma+\s+\d/ pattern.test(str)تو این مثال بعد از کلمه enigma حتما باید یه sapce بیاد و بعدش حتما عدد بیاد، s\ متاکاراکتر space می باشد و d\ متا کاراکتر عدد می باشد و بوسیله + بهم دیگه وصل میشنlet str = " enigma22323" let pattern = /^enigma+\S+\D/ pattern.test(str)بعد از اینکه کلمه enigma اومد بعدش نباید space و عدد بیاد، متاکاراکتر S\ نماد نیومدن space و D\ نماد نیومدن عدد هستش، تو این مثال به ما false برگردونده میشه چون بعد از enigma عدد اومدهlet str = "enigma1" let pattern = /^enigma+\w/ pattern.test(str)بعد از اینکه کلمه enigma اومد بعدش حتما باید یه کاراکتر حرف یا عدد یا سیمبول بیاد و اجباریهlet str = "hi enigma" let pattern = /\benigma/ pattern.test(str)شروع enigma در هر جایی باشه true برمیگردونهlet str = "enigma@@" let pattern = /^enigma\@/ pattern.test(str)بعد از enigma حتما باید @ بیاد(همچنین میشه از ! # $ % ^ & * علائم هم استفاده کرد)let str = "enigmah" let pattern = /^enigma+h/ pattern.test(str)بعد از کلمه enigma حداقل باید یک بار کاراکتر h بیادlet str = "enigmapp" let pattern = /^enigma+p{2}/ pattern.test(str)بعد از کلمه enigma حداقل باید دوبار کاراکتر p بیادlet str = "enigma1" let pattern = /[bC1]/ pattern.test(str)در داخل [ ] میتوان انواع از a تا z و 0 تا 9 و A تا Z رو قرار داد، در مثال بالا اگر حتی یکی از کاراکترهای b یا C یا 1 بیاد true برگردونده میشهlet str = "enigma1" let pattern = /[a-z0-9]/ pattern.test(str)از کاراکتر a تا z و یا 0 تا 9 یکیشون هم بیاد true برمیگردونهlet str = "enigma1" let pattern = /[a-z]+[0-9]/ pattern.test(str)طبق این pattern هم کاراکتر از a تا z اجباری هستش هم از عدد 0 تا 9 در غیر این صورت false برمیگردونهlet email = 'enigmateam.co@gmail.com' let pattern = /[a-z0-9]+@+[a-z]+\.+[a-z]/ pattern.test(email)تو این مثال اخر یه ایمیل ساده رو validate کردم، اولش گفته شده از کاراکتر a تا z یا 0 تا 9 رو میتونید وارد کنید بعد از اون حتما باید @ رو وارد کنید، بعدش از کاراکتر a تا z سپس دات . و بعد از اون از کاراکتر a تا z رو کاربر باید وارد کنهحالا وقتشه دو مورد از بهترین ولیدیشن هایی که میشه با ریجکس انجام داد و میتونید توی فرم هاتون استفاده کنید رو براتون مینویسم:Email Validation:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/Iran Mobile Number Validation:/(0|\+98)?([ ]|,|-|[()]){0,2}9[1|2|3|4]([ ]|,|-|[()]){0,2}(?:[0-9]([ ]|,|-|[()]){0,2}){8}/اینم یه سایت عالی برای Generate کردن ریجکس :https://regexr.comامیدوارم با نوشتن این مقاله تونسته باشم تا حدودی با ریجکس در جاوا اسکریپت آشناتون کنم.