نوشته های mohsen akbari

نکات مهمی در مورد sass و haml

mohsen akbari — Wed, 22 Jul 2020 23:28:13 +0430

خب بزارید اول از hamlشروع کنم . چرا ؟ چون ایده sass از haml الهام گرفته شده .haml توضیحش در یک خط چیه؟ haml یا html abstraction markup language یک پیش پردازنده برای زبان html هست که توسط شخصی به نام آقای کاتلین درست شده در سال 2006 .خب حالا دلیل این که اصلا پیش پردازنده ها وجود دارند چیه؟ به چه کار ما میان این زبان و سینتکس های پیچیده( البته در نگاه اول ، چون وقتی ک واشکافی شون بکنم خیلی ساده به نظر میان). اقای کاتلین دید که ما وقتی داریم html کد می زنیم کد هامون خیلی شلوغ میشه چون که ما داخل تگ هامون id یا class یا attributeداریم که باعث میشه کلییییییی کدهامون شلوغ بشه و بدتر از همه اینه که کلا ما هنوز شروع نکردیم به داینامیک سازی کردن کدهامون و اون خودش قراره کلی قضیه رو شلوغ تر بکنه و باز رسیدیم به dry fucking code.خب اینو نگاه کنید این کد تازه استاتیک هست.کد html ساده خب بک اند کارهای عزیز که وظیفه شون داینامیک کردن سایت هست باید کد های ما فرانت اند کار ها رو بگیرند و با چیزی به اسم تمپلیت انجین (template engine) بیان شروع کنن به داینامیک سازی داخل خود html و این دلیلی میشه بر اینکه نیاز پیدا بشه تا کد هامون تر و تمیز و سوسکی بشه.البته تا می تونید بک اند کارهارو اذیت کنید و کد کثیف بدید بهشون چون اونا ما فرانت اند کارها رو برنامه نویس نمی دونن و هر چند وقت یه بار جنگ فرانت کارها و بک اند کارها شروع میشه داخل توییتر :D .خب حالا برگردیم به haml .بله دوستان، پیش پردازنده میاد کد های مارو خواناتر و مرتب تر و کم حجم تر میکنه .بیاید همون کد html بالایی رو که دیدم رو حالا با زبان haml ببینیم.همون قطعه کد بالایی هست ولی با haml نوشته شدهخب می بینید که ب جای تگ باز و بسته فقط از % قبل تگ استفاده شده و به جای نوشتن استرینگ id , class از نماد ها و سمبل هاشون که داخل css استفاده می کنیم ، استفاده می کنیم. مثلا محتوای داخل تگ h1 جلوش نوشته شده بدون هیچ دابل کوتیشنی.و یا تگ p فرزندی داره به نام تگ a ( از طریق تو رفتگیش میشه فهمید که فرزندش هست) و اتریبویت href رو داخل آکولاد نوشته .اینا تفاوت های html با پیش پردازنده ش که haml هست ،هستش و در مورد احساس نیازمون به پیش پردازنده که توضیح دادم و اینکه چجوری قراره مشکلات رو حل بکنه.در واقع با حذف کردن تگ های بسته و استرینگ های اضافی کد مارو خلوت تر می کنه و مهم تر از هرچیز ایده haml بر اساس indentation یا همون فرورفتگی یا فاصله گذاری هست. اگه .netکار باشید یا js کار یا php کار قطعا اصلا عادت ندارید از این نوع اسکوپ گذاری استفاده کنید ولی این مشکل به زودی حل میشه به یه طریقی البته در sass که جلوتو تر براتون کالبد شکافیش می کنم ولی اگه پایتون کار یا روبی بلد باشید احتمالا انتخاب شما sass هست.خب پس اقای کاتلین یه تجربه موفق در hamlداشت و این باعث شد که بیاد این ایده رو استفاده کنه تا css رو هم خلوت کنه و اینجاس که پیش پردازنده ها وارد css شدن تا اون سمی کالن و اکولاد های رو مخ رو برامون حذف کنن. خب حالا اینا چه ربطی داره به sass ؟ خب sass یک پیش پردازنده برای css هست. پیش پردازنده یعنی چی؟(از دیدگاه دیگه ای ) یعنی اینکه قبل از پردازش css، میاد یه سری قابلیت به ما میده تا بتونیم با زبان نشانه گزاری css بیشتر شبیه یک زبان برنامه نویسی رفتار کنیم و کد های ما هم ساختار مند تر بشه و هم نگه داری و debug کردنش راحت تر بشه. به نظرم بهتره که اگه کدهای cssشما بیشتر از 1000 خط باشه حتما از sass استفاده کنید.خب ما پیش پردازنده های مختلفی داریم مثل sass ،less ،stylus ولی اکثرا sass رو ترجیح میدن بنا به دلایلی که اینجا بهش اشاره نمی کنم چون بحث تمرکزش رو خودsass هست. در این پیش پردازنده دو نوع سینتکس وجود داره . اولی sass هست و دومی sassy css یا به اصطلاح scss بزارید یه مرزی براتون مشخص کنم تا sass و scss رو قاطی نکنید.پیش پردازنده sass یک زبان هست و همینطور یک سینتکس ولی scss یک سینتکس هست و زیر مجموعه ی sass .خب بدونید که وقتی sass به ورژن 3 رسید در سال 2010 که css3 هم دیگه معرفی شده بود یک نسل جدید در sass به وجود اومد که سینتکسی خیلی شبیه css3 داشت و اسم اون شد scss یا sassy css .البته شما می تونید از یکی از این سینتکس ها می تونید در یک فایل استفاده کنید ولی الان که سال2020 هست از هر دوسینتکس میشه استفاده کرد و پشتیبانی خوبی دارن توسط w3.اول بریم دوتا قطعه کد ببینیم از هر دوتا سینتکس.این سینتکس sass هستشتوضیح این نوع سینتکس:همون طور که می بینید دیگه خبری از سمی کالن(;) و curly braces (همون آکولاد یا کورشه خودمونه) نیست و اسکوپ های ما به صورت فرورفتگی یا intended هست مثل زبان پایتون. ولی در css ما پایان هر statement یک سمی کالن میذاشتیم و اسکوپ هر کلاس یا تگ رو با آکولاد مشخص می کردیم.میگن که sassاز یک پیش پردازنده html به نام HAML قدرت گرفته و می دونید که هر دوتا پیش پردازنده توسط اقای کاتلین همراه با شوهرش درست شده ( ایشون مثل آقامون آلن تیورینگ علاقه ای به زن ها نداشتن ) که اون هم دقیقا اساسش فرورفتگی هست .اینم قطعه کدی از دیگه ای HAMLپس دلیل فرورفته بودن SASS به خاطر الگو گرفتن از HAML هست ولی در ورژن 3 یک سینتکس جدید به وجود اومد که کاملا شبیه CSS3 رفتار می کرد و نسل بعدی SASS محسوب میشه که اسمش رو گذاشتن SASSY CSS یا همون SCSSاین سینتکس چون که شبیه CSS3 هست رایج تره و ازش استفاده میشه.این هم سینتکس SCSS.خب حالا بریم ببینیم چ کارا می کنن برامون این پیش پردازنده ها.اولا که ما در فاز توسعه از SCSSاستفاده می کنیم ولی در نهایت همه چیز کامپایل میشه به CSS چون که مرورگر در نهایت HTML و CSS و JS رو می فهمه.کامپایلری که وجود داره برای کامپایل کردن SCSS اسمش هست NODE-SASSکه با استفاده از NPM می تونید نصبش کنید.ما از SCSS استفاده می کنیم تا بتونیم داخل CSS از متغیر ها یا تابع ها و.. که اکثر زبان های برنامه نویسی دارن استفاده کنیم و البته با استفاده از قابلیت IMPORT می تونیم ساختاری شبیه به کدنویسی ماژولار رو ب وجود بیاریم و DEBUG کردن برامون خیلی اسون تر میشه.شاید شما داخل مرورگر INSPECT گرفته باشید و می بینید که فایل SCSS رو داره بهتون نشون میده و به خودتون می گید مگه نمیگن که مرورگرفقط CSS می فهمه پس این چیه؟مثل این عکساگه دقت کنید نوشته که این کد مربوط هست به MAIN.SCSS خط 13.خب دلیل این وجود SOURCE MAP ها هستن که اگه بیشتر می خواید بدونید برید از خدامون گوگل بپرسید.چطوری راه اندازی کنیم محیط رو برای کد زدن با SCSS ؟خیلی ساده س ،راه های زیادی وجود دارهمثل کانفیگ کردن WEBPACK و استفاده از LOADER هامثل استفاده از NPM SCRIPT البته با کمک کامپایلر NODE-SASSولی راهی که سریع تر از همه هست اسفاده از افزونه های VS CODE هست.برید داخل افزونه هاتون در IDE و سرچ کنید این دوتا افزونه رو :1. LIVE SASS COMPILER2. LIVE SERVERخب همین کافیه.کانفیگ خاصی لازم ندارن ولی خب برید یه ویدیو داخل یوتویوب ببینید که چطوری ازش استفاده می کنن.افزونه اولی برای ما SASS رو کامپایل می کنه و قابلیت WATCHINGداره که باعث میشه تغییرات رو لحظه به لحظه چک کنه و به قولی مراقبت کنهافزونه دومی هم که باعث میشه ما هی نریم رفرش یا ری لود کنیم مرورگر ور تا تغییرات رو ببینیم و با سیو کردن کد هامون خود مرورگر ری لود میشه و ما می تونیم تغییرات رو لحظه ای ببینیم البته بعد از سیو کردن.خب ما داخل INDEX.HTML با اسفاده از تگ لینک باید به یک فایلcss ارجاع بدیم نه scssشما وقتی کد SCSS رو می زنید افزونه LIVE SASS COMPILER میاد تو همون محل براتون یک فایل CSS و ِیک فایل SOURCE MAP براتون می سازه تو همون محل و شما در INDEX.HTML باید به اون فایل CSS مسیر دهی کنید.خب تا الان حرف زدیم از انواع پیش پردازنده ها و چرا باید از SASSاستفاده کنیم و اینکه برای اینکه چون SCSSکه زیر مجموعه SASS محسوب میشه ولی نزدیک تر هست به سینتکس CSSما میایم از اون استفاده می کنیم.و بعد حرف زدیم از سریع ترین روش راه اندازی محیط برای کد زنی به شیوه SASSحالا وقتشه که ببینید در SCSS چه قابلیت هایی اضافه شده که ما بهتره ک ازش اسفاده کنیم؟ 1.NESTED RULESاین قانون به ما قابلیت تو در تو نویسی رو میدهینی چی؟بزار کد نشونتون بدم!!خب این کد رو دیدین؟این یک کدSASSهست با سینتکس SCSS چون که آکولاد و سمی کالن داره از اونجایی که تگ NAV فرزند تگ BODY هست پس باید این تگ رو ما داخل آکولاد BODY بنویسیم.همین این میشه قابلیت تودرتو و البته می تونیم یک سری پراپرتی هارو هم داخل آکولاد بنویسیم مثل خاصیت مارجین که من باهاش این کارو کردممثلا میتونیم FONT رو بوجود بیاریم و خاصیت های دیگه رو داخل اکولاد بنویسیم خاصیت هایی مثل SIZE یا WEIGHT& چیه؟در بحث OOPما کلمه کلیدی THIS رو داریم که به کلاس اشاره می کنه.همین رابطه ای برقراره بین & و اسم تگ و در واقع & به اسم تگ اشاره می کنه و کاربرد گسترده س برای مثلا HOVER کردن اون تگ هست یا هر Pseudo-classesخب این از اولین ویژگی که به ما میده و در واقع وقتی میگم کد هامونو ساختار مند تر میکنه منظور همچین ویژگی ای هست. VARIALBLESبا استفاد از $ میایم متغییر هامونو تعریف می کنیم و سپس مقدار دهی می کنیم و بعد استفاده در کد.بخش بندی کردن فایل ها در SCSSیه قابلیتی وجود داره شبیه کدنویسی به صورت ماژولار ولی دقیقا اون نیسما یک فایل اصلی داریم مثلا به اسم STYLE.SCSS و می تونیم چندتا فایل دیگه هم بسازیم و در نهایت داخل فایل اصلی IMPORT کنیم .البته نکته ای ک وجود داره اینه که فایل های فرعی ما باید اول اسمشون UNERLINE باشه مثلا یک فایل داریم که تمام متغیر هامونو میخوایم اونجا تعریف کنیم اسمشو می ذاریم _VARIABLES.SCSSحالا فلسفه این آندرلاین چیه؟کامپایلر میفهمه که از این فایل SCSS نباید یک فایل جداگانه ی CSS دیگه درست کنه و بعد کامپایل ما فقط CSS شده فایل اصلی که همون STYLE.SCSS هست رو داریم و اگر اندرلاین نذاریم از فایل VARIACLES.SCSS یک فایل VARIABLES.CSS ساخته میشه ک ما با UNDERLINEجلوگیری می کنیم ازساختن این فایل.خب مثلا به فایل های خود فریم ورک bootstarp نگاه کنید.تمامی فایل هایی که under line دارن فایل های فرعی هستن که در فایل های دیگر import شدن و فایل اصلی ما اونی هست که underline نداره که اسمش هست bootstarp.قسمت بعدی که وجود داره mixin ها هستن:در واقع کارشون اینه که بتونیم یه جور گروه بندی دستورات رو انجام بدیم تا از تکرار زیاد گد جلوگیری بشهخوبی استفاده از mixin ها این هست که میشه از تکرار کد های تکراری جلوگیری کردمثلا به جای اینکه هربار بنویسیم display:flex و justify-content:center می تونیم در قالب یک mixin اینو بنویسیم و با include کردن اون mixinکدهامونو فراخوانی بکنیم.کار با عملگرها:در واقع ما می تونیم در scss از چهار عمل اصلی استفاده بکنیم و جمع کنیم ضرب کنیم و...مثلا ====< $font= font-size *3 اتفاقی ک میفته اینه ک مقدار فونت رو ضرب در 3 میکنهارث بری در sass :با استفاده از کلمه کلیدی extend می تونیم از کلاس های دیگه ای که نوشتیم ارث بری کنیم.مثلا @extend .class ;فانکشن ها در sassدر واقع با کلمه کلیدی function میشه از توابع استفاده کرد@function name(){@return ….;}خب ما قابلیت ساختار شرطی یا حلقه رو هم داریم در sassساختار شرط در scssو با همچین سینتکسی شما می تونید ساختار شرطی در scss بنویسید.و البته برای ساختار حلقه:در sass برای حلقه 3 نوع کلمه کلیدی وجود دارد که اولین کلمه هست @forخب مثل همیشه می خوام روی قطعه کد توضیح بدم این سینتکس روبعد از کلمه کلیدی @for ما یک متغیر تعریف می کنیم که همون گام حلقه یا stepما هست و تعیین می کنیم که چند بار این حلقه تکرار شود مثلا در این کد ما برای داشتن گام حلقه متغیر i رو تعریف کردیم و گفتیم که 10 بار کد ما تکرار بشه و برای اینکه بتونیم اسم کلاس رو داینامیک تر بکنیم از #{} استفاده کردیم تا بشه عدد هایی جاگزین اون قسمت کرد مثل 1,2,3,… که بستگی به گام حلقه داره ک چه مقداری داشته باشه.حلقه بعدی @while هست.در این حلقه اول کلمه کلیدی رو می نویسم و بعد شرط مورد نظرمونو درون پرانتز می نویسیمدر اخر میایم در هر مرحله یک واحد از i کم می کنیم تا بتونیم حلقه رو کنترل کنیم و در حلقه بینهایت نیفتیم که با ارور مواجه بشیم.حلقه بعدی در واقع @each هست که به ما کمک می کنه تو تعداد محدود بتونیم حلقه درست کنیم و کارکرد خیلی ساده ای داره که در قطعه کد زیر می تونید بفهمید و نیازی به توضیح بیشتر نیست.خب اینم از منابعی که یاد گرفتم ازشون:لینک اول
لینک دوم
لینک سوماینم تمام فهمیده های من از بحث پیش پردازنده ها بودخوشحال میشم کامنت بزارید نظرو انتقاد و اگه اشتباهی وجود داره اطلاع بدید تا اصلاح کنم.این موضوع رو انتخاب کردم دیدم چون تو وب فارسی مطلب کم هست براش.برای ارتباط با من در توییتر : ارتباط

نکات ریز در مورد سینتکس jsx

mohsen akbari — Wed, 08 Jul 2020 18:57:10 +0430

خب کلی مقاله خوندم تا بتونم خیلی دقیق این سینتکس دوست داشتنی رو واشکافی کنم بتونم درک جامعی از این سینتکس داشته باشم و قراره تمام فهمیده هامو اینجا بنویسم.قرار نیست هرچی که میگم درست باشه، میگن که تالس وقتی درس دادنش تموم می شده به شاگرداش می گفته : خب این تمام فهمیده های من بود، حالا شما برید بهترش کنید و حرف منم همینه jsx سینتکس jsx در واقع نه جاوا اسکریپت هست نه html بلکه یه چیزی بینشون هست و همونطور که از اسمشون معلومه javascript و xml هست و این سینتکس کاملا قدرت گرفته از جاوا اسکریپت.اگر این سینتکس نبود ما باید این صورت در ری اکت کد می زدیمfunction hello() { return /*#__PURE__*/React.createElement("div", null, "Hello world!");}این یک hello world ساده هست حالا کدی که ما داخل ری اکت می نویسم در واقع به این شکل هست به لطف یک کامپایلری به نام babeljsfunction hello() { return

Hello world!

;}پس ری اکت بدون این سینتکس سخت و غیرقابل فهم تر می شد و ما به کمک این سینتکس قابل فهم ،می تونیم چیزی شبیه به html بنویسم داخل یک فایل جاوا اسکریپتی.نکاتی در مورد jsx:زمانی که می خواهید jsx بزنید باید حتما کتاب خانه react رو ایمپورت کرده باشید ولی دلیل این کار لازم، چی هست؟در بالا گفتم که اگه بخواید داخل ری اکت کد بزنید دو راه دارید یا از jsx برای نمایش ui استفاده کنید یا بدون jsx این کد رو بنویسید که حالا می خوام روش دوم رو تشریح کنم.ما وقتی jsx می نویسم در واقع یک کامپایلری وجود داره به نام babel که این کامپایلر جذاب میاد jsx ما رو تبدیل میکنه به ابجکت های جاوا اسکریپتی با استفاده از متدReact.createElementاین متد خفن و کاربردی در واقع 3 تا ارگومان داره. React.createElement(component, props, ...children)اولین متد component هست ما دو نوع کامپوننت داخل ری اکت داریم: اولی کامپوننت های داخلی هستن مثل div،span که همون تگ های html هستن و در واقع ویژگی مشترک همه این کامپوننت های داخلی این هست که با حرف کوچک شروع می شوند.نوع دوم کامپپوننت ها user-define هست که توسط کاربر تعریف میشه و با حرف بزرگ باید شروع بشونداینا همون کامپوننت هایی هستن که ما تعریف می کنیممتد دوم props هست که میشه تشبیهش کرد به attribute های تگ های html و شامل کلاس و آی دی و استایل و ....متد سوم هم children هست که تکست هایی که می نویسم داخلش هست.یه حمع بندی کلی بکنم :تمام jsx که ما می نویسم در نهایت توسط کامپایلر babeljs تبدیل میشن به آبجکت های جاوا اسکریپتی با استفاده از متد React.createElementما باید از این سینتکس استفاده کنیم چرا که سرعت و خوانایی کدمون بالامیره و لازمه ی استفاده از این سینتکس فراخوانی react هست چرا که قراره موقع کامپایل کد ما متد React.createElement فراخوانی بشه پس همانطور که مشخص هست یک پکیجی از این کتاب خانه هست و باید react باشه در غیر این صورت با ارور مواجه خواهید شد.تمام کامپوننت هایی ک ما قراره تعریف کنیم(نوع دوم) باید با حروف بزرگ نوشته بشن چرا که کامپوننت های built in یا داخلی ری اکت همه شون با حروف کوچک نوشته شدن و برای اینکه قاطی نشه این قانون وجود داره.برای نوشتن کد های جاوا اسکریپیتی داخل این سینتکس حتما باید { } استفاده بکنید وگرنه با ارور مواجه می شوید.

Hello world

mohsen akbari — Tue, 07 Jul 2020 16:29:07 +0430

خب این اولین نوشته ی من در ویرگول هست . ویرگول باحاله و کاملا ایده ش الگوبرداری شده از سایت مدیوم هست و من پست هامو اینجا میخوام منتشر کنم.من برنامه نویس هستم در حوزه وی دولوپر و در فیلد تمام نشدین فرانت اند و البته فعلا جونیورم ولی خب یک تعهد تمام وقتی رو نسبت بهش دارم و می دونم که به جایگاهی که لیاقتشو دارم با هوشمندی و زمان مناسب بدست میارم.هدفم اینه که فعلا چیزایی که یاد می گیرم رو اینجا منتشر کنم و بعدتر که خودم تونستم وبلاگ درست کنم با jamstack حتما اونجا نوشته ها و یادگیری هامو وارد می کنم.