استفاده از قابلیت های devtools در مرورگر کروم

Devtools Device Mode

به دلیل اهمیت زیاد طراحی واکنشگرا و روش های Mobile First در طراحی صفحات وب، ما به محیطی نیاز داریم تا بتوانیم واکشگرایی طرح خود در آن آزمایش و بررسی کنیم. مرورگر کروم برای این کار راه حلی بوجود آورده است تحت عنوان Device Mode که ما در این مطلب این قسمت از ابزار توسعه دهندگان را مورد بررسی قرار می دهیم.

تبدیل صفحه به حالت سیاه و سفید یا خاکستری در css

تبدیل صفحه وب به حالت سیاه و سفید

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

timing-fucntion های محبوب و پرکاربرد

timing-function های پرکاربرد

برای داشتن انیمیشن و ترنزیشن های واقعی تر و با معنا نیاز داریم تا مقدار timing-function را به خوبی تنظیم کنیم.

ویرایشگر سابلایم

گوگل در سابلایم

کد نویسی نیاز به تمرکز مناسبی دارد و از طرفی حس خوبیه که کل صفحه نمایش را ویرایشگر یا ابزار کدنویسی ما پر کند. حال با این شرایط گاهی نیاز داریم تا به سایتی رجوع کنیم یا بخصوص از گوگل استفاده کنیم. در نتیجه مجبور هستیم تا از محیط نازنین کدنویسی خارج شده و به […]

ویرایشگر سابلایم

ماشین حساب برای سابلایم

در این پست در مورد پلاگینی در سابلایم صحبت می کنیم که به ما اجازه می دهد محاسبات ریاضی را به ساده ترین صورت ممکن انجام دهیم.

ویرایشگر سابلایم

معرفی بسته Open Include برای سابلایم

اگر تجربه کار با IDE های مختلف را داشته باشید احتمالا با این قابلیت آشنا هستید که می توان با نگه داشتن دکمه کنترل و کلیک بر روی نام یک تابع به محل پیاده سازی تابع رفت. و یا می توان یک فایل مخصوص را از طریق آدرس آن در کد باز کرد. چند روز […]

ویرایشگر سابلایم

تم و طرح رنگی در سابلایم

در ویرایشگر سابلایم مثل خیلی از برنامه ها و ابزارهای دیگر امکان تغییر تم محیط وجود دارد. نکته ای که باید توجه کنیم این است که یک مفهوم تم در سابلایم وجود دارد که باعث تغییر ظاهر برگه ها, تب ها, منوی کناری و همچنین رنگ و طرح قسمت کد (syntax highlighting) می شود. همینطور […]

ویرایشگر سابلایم

ساخت Snippet در سابلایم

اسنیپت (Snippet)ها تکه کدهایی هستند که با نوشتن یک کلمه کلیدی و با زدن دکمه tab در کد شما ظاهر می شوند و سرعت نوشتن کد را به مراتب بالاتر می برند. در این مطلب قصد داریم تا نکات مربوط به اسنیپت ها را در ویرایشگر متن سابلایم بیان کنیم. اگر با سابلایم آشنایی ندارید […]

ترفند های گوگل devtools

معرفی قابلیت های جدید Chrome Devtools (قسمت سوم)

در ادامه مطالب مربوط به ابزار طراحان وب در گوگل کروم می خواهیم در این مطلب بیشتر به نکات مربوط به قسمت استایل نویسی و ویراش عناصر بپردازیم. البته چند مورد از نکات, خیلی هم جدید نیستند :)   ویرایش مستقیم keyframe@ این ویژگی همراه با ویژگی هایی که در مطالب قبلی بیان شد نشان […]

ترفند های گوگل devtools

ترفندهایی برای کار با قسمت Sources در کروم

در مطالب قبل در مورد کانال های مختلف کروم و همینطور تعدادی از ویژگی های جدید آن برای طراحان وب بحث کردیم. در این مطلب چند ترفند را برای استفاده بهتر از قسمت منبع بیان می کنیم. قبل از هرچیزی چند کلید میانبر پرکاربرد باهم یاد بگیریم: Ctrl + Shift + I (mac: Cmd + […]