نوشته های علی پیرانی

به Media Queries های جدید سلام کردی؟

علی پیرانی — Sat, 22 Apr 2023 12:30:04 +0330

امان از دست این مدیا کوئری! دوست داشتی، به درد بخور اما سردرد آورد :) ساختار نوشتنشون (syntax) یکم عجیب غریبه حداقل برای من و حتی ممکنه بعد از مدت ها استفاده ازشون بازم قاعده رو درست رعایت نکنیم مثلا وقتی میگیم min-width: 300pxیعنی چی اصلا؟ با من همراه شین تا با ویژگی که ارائه شده تا کوئری خوشگل تری رو بنویسیم بهتون بگم، اگه هم که قبلا راجبش خوندین یه مرور مجدد داشته باشیم.روش قدیمیهمونطور که احتمالا می دونید اگر بخواین یک کوئری برای اندازه های صفحه نمایش بزرگتر از یک عرض مشخص تعریف کنید، چیزی شبیه به این می نویسید:@media (min-width: 1000px) {}این مدل نوشتن فقط در عرض صفحه‌های 1000 پیکسل و بزرگتر اعمال میشن. اگر می خواین همین کارو را برای اندازه های کوچیک صفحه نمایش انجام بدین، همچین کاری رو باید انجام بدین:@media (max-width: 700px) {}خب رفقا، حالا اگه بخوایم با روش قدیم یه استایلی برای دستگاه های ما بین این دوتا سایز اعمال کنیم چیکار کنیم؟این روش قابل استفاده اس:@media (max-width: 700px) and (min-width: 1000px) {}این مدیا کوئری برای هر صفحه‌ای با عرض بین 700 تا 1000 پیکسل اعمال میشه، اما به طور کلی درک اون برای بیشترمون سخته و به عنوان مثال، اگه بخواین حالا ترکیبی از دستگاه ها مثله موبایل و دیوایس های رو میزی رو داشته باشین اوضاع پیچیده تر میشه. اینجاس که کوئری های جدید وارد میشن :)روش جدید؛ سلام کوئری های دوست داشتنی منبیاین کوئری هایی که قبلا نوشتن رو باز نویسی کنیم با روش جدید:/* Greater than or equal to 1000px */ @media (width >= 1000px) {} /* Less than or equal to 700px */ @media (width <= 700px) {} /* Between 700px and 1000px */ @media (700px <= width <= 1000px) {}این مدل جدید کوئری ها با اضافه کردن کمتر و بیشتر کد نویسی کوئری هارو راحت تر میکنه برامون و مهمتر از اون خوندنشون رو بسیار آسون‌تر می‌کنه. من که خیلی با این ویژگی ما بین دوتا سایز حال میکنم حقیقتا :) تو لیست زیر ویژگی های جدیدی که اضافه شده به کوئری هارو باهم میبینیم: <<=>>==خب چهارتایی اولی که مشخصه اما داستان اون = آخری چیه؟ قصه از این قراره که شاید لازم باشه وقتی دقیقا سایز صفحه نمایش برابر با یه عددی مثلا 999 پیکسل شد یه بلایی سره سایتمون بیاریم اینجاست که این مساوی کاری خودشو انجام میده.حلال بسیاری از مشکلاتمثال زیرو ببینین رفقا:@media (min-width: 500px) {}@media (max-width: 500px) {}کوئری اول زمانی اتفاق میفته که دیوایس ها سایزشون بزرگتر از 500 باشه، دومی هم زمان اجرا میشه که کمتر از 500 باشن. اما شما به من بگین که چه بلایی سره خوده 500 میاد؟ اینجاس که مدل کوئری نویسی جدید میاد به داد ما میرسه:@media (width >= 500px) {}@media (width < 500px) {}حالا با این روش اگه لازم باشه خوده 500 هم هندل میشه به همین قشنگی، به همین خوشمزگی :)این خیلی خوف و خفن نیست ولی شاید روال توسعه رو و حل باگ تو موارد ریسپانسیو رو برامون بسیار راحت تر از قبل بکنه.پشتیبانی مرورگرهااما مسئله مهم تر پشتیبانی مرورگرها از این ویژگیه! خب میشه گفت بیشتر مرورگر ها از ویژگی پشتیبانی میکنن اما در جایی که میخواین مطمن باشین میتونین از ابزاری مثله PostCSS استفاده کنین تا با تبدیل کردن کد ها این ویژگی هارو تو همه مرورگرها براتون ارائه بدن. تو عکس زیر میتونین پشتیبانی مرورگرها از ویژگی رو به طور کامل ببینین:Media Queries: Range Syntaxجمع بندیبه پایان آمد این پست و حکایت همچنان باقیست. ویژگی باحالیه حقیقتا، امیدوارم که براتون مفید بوده باشه. خوشحال میشم اگه شما هم تجربه ای از استفاده از این ویژگی رو داشتین برام کامنت کنین نظرتون رو سایر پست های من در ویرگول https://virgool.io/@aliraam/escaped-css-selectors-bawjrbbpm5dy https://virgool.io/@aliraam/%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%AF%D9%87%DB%8C-%D8%B4%D8%B1%D8%B7%DB%8C-%D8%AF%D8%B1-sass-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-default-gm6eaqpwon2t https://virgool.io/@aliraam/%D8%A8%D8%B1%DA%AF%D9%87-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8Ccheatsheet-%D8%AC%D8%A7%D9%85%D8%B9-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%DA%AF%D8%A7%D9%86-y6yqmcq5jl6h

استایل دهی شرطی در Sass با استفاده از !default

علی پیرانی — Sat, 15 May 2021 10:57:08 +0430

فلگ(flag) !default یک ویژگی برای مقدار دهی و استایل نویسی شرطی در sass هست، با استفاده از این ویژگی مقدار زمانی انجام میشه که قبلا تعریف نشده باشه یا برابر با null باشه$variable: 'test' !default;عبارت بالا در sass به شکل زیر تعریف میشه:مقدار متغییر variable برابر باشه با test، اما در صورتی که متغییر variable قبلا مقدار دهی نشده باشه.برای آشنایی بهتر با عملکرد این flag مثال زیر باهم ببینم:$variable: 'hello world'; $variable: 'test' !default; // $variable still contains `hello world`با اجرای کد بالا، مقدار متغییر همچنان برابر با "hello world" هست که در خط اول مقدار دهی شده و با خط دوم مقدارش تغییری نمیکنه و ignore میشه.آشنایی با استایل دهی از طریق @use...withیکی از مهم ترین دلایل استفاده از !default استفاده همزمان از لایبراری های جانبی در بخش های مختلف پروژه هست. ممکنه شما از یک لایبری استفاده کنید با تعریف همنام متغییر هاتون به تداخل بخورین، اما زمانی که از !default استفاده کنین در صورتی که همنام باشن مقدار دهی از ریشه اصلی استفاده میشه. توی sass یک ویژگی بسیار کاربردی برای زمانی هست که شما یک لایبرری رو اضافه میکنین و میخواین متغییر های موجود در اون لایبرری رو overrdie کنین:@use 'library' with ( $foo: 'hello', $bar: 'world' );کد بالا عملکرد مشابهی به @import داره:$foo: 'hello'; $bar: 'world'; @import 'library';اما یک فرق اساسی داره، و دلیلی که پیشنهاد میشه از @use...with استفاده کنین تفاوت scope هست، جدای از این تفاوت اینکه کد برای توسعه دهنده خواناتر میشه override کردن مقادیر زمان اضافه کردن هست، همچنین باعث تعریف بیش از حد متغییر در سطح پروژه میشه، از طرف دیگه متغییر های global رو حفظ میکنه برای ما.رایج ترین استفاده ها: مورد اول: شخصی سازی قالب $color-primary: royalblue !default; $color-secondary: salmon !default: // style.scss@use 'library' with ( $color-primary: seagreen !default; $color-secondary: lemonchiffon !default: );یکی از مناسبترین مثال هایی که میشه برا کاربرد!default زد اضافه کردن ویژگی شخصی سازی تم برای سایر دولوپر ها و کاربر هاست. برای مثال بخش رنگ بندی قالب رو میتونیم به صورت آپشنال قرار بدیم تا نسبت به نیاز کاربر تغییر داده بشه.برای مثال لایبراری بوت استرپ تو بخش Sass variable API های خودش همه متغییر هارو با استفاده !default در دسترس قرار داده. ( این متغییر ها شامل: رنگ بندی، کادر بندی، فاصله ها ،تنظیمات فونت و حتی انیمیشن ها میشه) البته شما میتونین بدون استفاده از Sass هم از این ویژگی استفاده کنین، میتونین به این لینک مراجعه کنین.مورد دوم: لود کردن وب فونت ها به صورت شرطی// library.scss $disable-font-cdn: false !default; @if not $disable-font-cdn { @import url(''https://fonts.googleapis.com/css2?family=Public+Sans&display=swap''); } // style.scss @use 'library' with ( $disable-font-cdn: true ); // no external HTTP request is madeهمونطور که تو کد بالا میبینین یک متغییر برابر با false شده و با استفاده از یک شرط اون متغییر رو بررسی میکنیم که وب فونت رو لود کنیم یانه، اینجاس که sass قدرت خودش تو پیش پردازنده هارو به نمایش میذاره.شما میتونین برای مطالعه بیشتر راجب این ویژگی ها به مطالب زیر مراجعه کنید:!default documentation@use with documentationBootstrap variable defaultsA Sass default use case (thoughtbot)از اینکه این مطلب رو مطالعه کردین ممنونم، خوشحال میشم نظراتتون تو بخش کامنت ها ببینم.برخی از مطالب من در ویرگول: https://virgool.io/@aliraam/%D8%B1%D8%B9%D8%A7%DB%8C%D8%AA-%D8%A7%D9%84%DA%AF%D9%88%D9%87%D8%A7-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%86%D9%88%D8%B4%D8%AA%D9%86-commit-%D8%A8%D9%87%D8%AA%D8%B1-%D8%AF%D8%B1-git-mtzpwpxnk0qt https://virgool.io/@aliraam/escaped-css-selectors-bawjrbbpm5dy https://virgool.io/@aliraam/%D9%BE%DB%8C%D8%B4-%D8%A8%D9%87-%D8%B3%D9%88%DB%8C-es-modules-xrlinktupu3w

پیش به سوی ES Modules

علی پیرانی — Wed, 24 Mar 2021 17:31:24 +0430

@Googleاگه کمی با جاوا اسکریپت عزیزمون سرو کله زده باشین قاعدتا میدونین که راه مختلفی برای import کردن packages ها هست که عبارتند از:CommonJS — module.exports and require used in Node.jsAsynchronous Module Definition (AMD)Universal Module Definition (UMD)شاید باورتون نشه ولی باید خدمتون بگم که هیچکدوم از اینا روش استانداردی تو جاوا اسکریپت نیست. تو ES6 روشی به نام single universal module معرفی شد.ES Modules از راه میرسید!!!اول از همه بگو ببینم خوده این ماژول (modules) تو جاوا اسکریپت چی هست؟یه مثال از دنیای خارج از برنامه نویسی: نویسنده ها کتاب هاشون رو به فصل ها و بخش های گوناگون تقسیم میکنن، تو برنامه نویسی هم همین رو داریم، کد ها به بخش هایی به اسم ماژول تقسیم بندی میشه.از ویژگی های ماژول خوب میشه به تقسیم بندی مناسب ، متمایز و مستقل نسبت به سایر ماژول ها نام ببریم در عین حال وقتی از چند ماژول مجزا استفاده میکنیم هیچ خلالی تو فرآیندمون به وجود نمیاد.حالا بگو چرا باید از ماژول (modules) استفاده کنم؟استفاده از ماژول ها به خودی خود فواید زیادی داره، اما سه تا مشخصه اهمیت بیشتری داره:1- قابلیت نگهداری یا Maintainability: طبق توضیحی که دادم ماژول ها مستقل از یکدیگر هستند. ماژولی که خوب طراحی بشه وابستگی ها رو کم میکنه و همین باعث میشه توسعه دادن تک ماژول ها بسیار راحت تر بشه. مثلا اگه یه ماژول داشته باشین و بخواین بخشی از کد رو آپدیت کنین نیاز نیست دیگه هر جا که استفاده شده مجدد به روزرسانی بشه، شما با آپدیت Core تغییرات رو تو همه جا اعمال میکنین.2- فضای نام یا Namespacing: تو جاوا اسکریپت متغییرات (variables) که خارج از اسکوپ تو سطح بالاتر از فانکشن یا بلاک ( {} ) تعریف میشن به صورت گلوبال هستند.(به این معنی که همه میتونن بهشون دسترسی داشته باشن) همین باعث میشه namespace ها الا بختکی در دسترس قرار بگیرند که اصلا دلیلی به انجام این کار نیست. انجام همچین کاری یه چیز تو مایه های ریختن قیمه ها تو ماستاس :))) ( به این لینک مراجعه کنید برای توضیحات بیشتر)3- قابلیت استفاده مجدد یا Reusability: اگه بخوایم بینی و بین الهی صادق باشیم با خودمون، خیلی هامون بیشتر از کد های آماده یا کد های قبلی مون استفاده میکنم و به صورت فرآیند پیچیده COPY/PASTE که بسیار وقت گیر هم هست به پروژه فعالمون اضافه میکنیم آیتم های مد نظرمون رو :))حالا با ماژول کردن کد هامون میتونیم با دغدغه کمتری این کارو انجام بدیم.حالا بگو ES Modules چی چی هست اصلا؟شاید اسمش قلمبه سلمبه باشه، اما احتمال میدم شما با سینتکس نمونه ای که در ادامه بهتون نشون میدم آشنا باشین، ما با این روش میتونیم فانکشن یا یک متغییر رو از یک پکیج export کنیم و تو بخش های دیگه مجدد فراخوانیشون کنیم:export const hoursInDay = 24 export const multiply = (a, b) => { return a * b }ما میتونیم به اضای هر فایل، متد ها و متغییرات مختلفی رو export کنیم. برای import کردن هم مطابق روش زیر که اگه بخوایم هر فانکشن/متغییر که مورد نیاز ما باشه روش اول و اگه بخوایم به همه دسترسی داشته باشیم به روش دوم عمل میکنیم://1- import individual items import {hoursInDay, multiply} from './somefile.js' //2- import the whole file import * as test from './somefile.js'حالا اگه این وسط بخواین dynamic import استفاده کنین تا لود کردن کد هارو مدیریت کنین که یک promise براتون return میکنه :switch (page) { case 'home': import('./home-page'); break; case 'register': import('./register-page'); break;به طبع شما میتونین به شکل زیر هم کار کنین: