⁣⁣⁣⁣⁣⁣🔥 زمانی که دکمه ای را در صفحه قرار می دهید، پس زمینه آن را #reset کنید. در غیر اینصورت در مرورگرهای مختلف، متفاوت نشان داده می شود. تصویر نمایشی، یک دکمه با خصوصیات پیش فرض را در مرورگرهای #chrome و #safari نشان میدهد. safari آن را با پس زمینه خاکستری نشان می دهد.

🌟 به صورت زیر می توان button ها را reset کرد:

button {
  appearance: none;
  background: transparent;
  /* Other styles */
}

#frontend #UI #CSS

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 کتابخانه Hover.css مجموعه ای از انیمیشن های مبتنی بر #CSS است که به صورت خاص فقط برای وضعیت hover عناصر ایجاد شده است.

انیمیشن های Hover.css را می توان تقریبا به هر عنصری اعمال کرد. به علاوه امکان سفارشی سازی آن ها در قالب CSS ، #Sass و #LESS نیز فراهم است.

🌐⁣http://ianlunn.github.io/Hover

#UI #frontend

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 چرا اوضاع اقتصادی #برنامه_نویسان رضایت بخش نیست؟

🌐⁣https://goo.gl/r16e8v

#programming #article

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 آیا می دانستید می توانید با استفاده از دستور console.table در مرورگر #کروم، #object های جاوااسکریپتی را به صورت جدول نمایش دهید؟

#javascript #chrome #browser

✅ @coderszone

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 نمونه #طرح #اپلیکیشن جستجوی رستوران

#UI #frontend #android #iOS

✅ @coderszone

⁠⁣🔥 تا جایی که میتوانید از #label ها استفاده نکنید.

حتی اگر ماهیت اطلاعاتی که می خواهید به کاربر نشان بدهید دقیقا مشخص نیست باز هم از به کارگیری لیبل برای آن ها خودداری کنید.

برای مثال در یک #فروشگاه_اینترنتی، جهت نمایش موجودی یک کالا به جای عبارت "موجودی در انبار: 12 عدد" از "12 عدد موجود" استفاده کنید.

یا در یک وبسایت املاک به جای عبارت "تعداد اتاق : 3" از "3 اتاقه" استفاده کنید.

#tips #UI #UX #frontend #digital_marketing

⁣✅@coderszone

⁠⁣⁣🔥 قبل از اینکه یک #select_menu را در صفحه قرار دهید به این سوال پاسخ دهید که آیا کاربر گزینه ای که می خواهد انتخاب کند را از قبل می داند ؟ در صورتی که جواب مثبت است به جای استفاده از یک select menu ساده از فیلد ⁣autocomplete استفاده کنید.

چه لزومی دارد وقتی کاربر گزینه مورد نظر خود را از قبل می داند او را مجبور کنیم در طول یک لیست بلند بالا از گزینه ها اسکرول کند. این مشکل در نسخه #موبایل که تعداد گزینه های نمایشی کمتر است و امکان استفاده از #کیبورد هم وجود ندارد دوچندان می شود.

در عوض در فیلد های ⁣autocomplete، کاربر فقط بخشی از گزینه مورد نظر را تایپ کرده سپس از بین گزینه های پیشنهادی، مطلوب خود را انتخاب می کند.

#UI #UX #frontend

⁣✅@coderszone

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 آخرین آمار نشان می دهد مرورگر #chrome با اختلاف فاحشی نسبت به سایر مرورگرهای رایج، محبوبترین مرورگر در سال 2018 بوده است.

#browsers #frontend

✅ @coderszone

🔥 نمونه #طرح دیگری در پیاده سازی #pull_to_refresh

#UI #frontend #android #iOS

✅ @coderszone

🔥 #گیت_هاب (#github) از امروز امکان ساخت repository های private را برای همه کاربران، رایگان کرده است. تنها محدودیت موجود امکان فعالیت حداکثر 3 نفر بر روی یک پروژه است.

#programming #news

✅ @coderszone

🔥 چیزی که #مشتری درخواست میده و چیزی که نهایتا تحویل می گیره😂😂😂

#programming

✅ @coderszone

🔥 بسیاری از کاربران در لمس #دکمه هایی که بسیار به هم نزدیک اند دچار اشتباه می شوند. با افزایش padding یا استفاده از یک فضای دایره ای در اطراف #آیکن ها، دقت کاربران در لمس عناصر را بالا ببرید.

#UI #UX #frontend #android #iOS

✅ @coderszone

🔥 موتور جستجوی #DuckDuckGo رکورد 8 میلیارد جستجو در سال 2018 را شکست.

🌟داک‌داک‌گو یک #موتور جستجوی وب است که در عملکرد خود تا حد زیادی بر داده‌های جمع‌سپاری‌شده همچون #ویکی‌پدیا تکیه دارد. یکی از نکات مهم این موتور جستجو این است که به (ادعای خودش) کاربرانش را ردگیری نمی‌کند.در صفحهٔ سیاست حریم این وب‌گاه آمده‌است که هیچگونه اطلاعات شخصی‌ای را جمع‌آوری نمی‌کند و به اشتراک نمی‌گذارد.

#search_engine

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 چگونه لپتاپ مناسب را برای #برنامه_نویسی انتخاب کنیم؟

🌐⁣https://goo.gl/4NZZ1m

#programming #article

✅ @coderszone

⁣⁣🔥 تفاوت #Spinner ها و #progress_bar ها

از spinner ها برای پروسه هایی که کمتر از 4 ثانیه و بیشتر از 1 ثانیه طول می کشند استفاده کنید و برای پروسه های طولانی تر از progress bar ها.

تحقیقات نشان داده است که آستانه انتظار کاربران حداکثر 4 ثانیه می باشد و بیشتر از آن باعث می شود تصمیم کاربران عوض شود.

استفاده از progress bar خطی با نمایش میزان پیشرفت پروسه، کاربر را تشویق به انتظار می کند.

#UI #UX #frontend

⁣✅@coderszone

⁣⁣⁣⁣⁣⁣🔥 تحقیقات نشان می دهد 88 درصد از کاربران، ارسال رایگان کالا را به ارسال سریع ترجیح می دهند.

#ecommerce

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 چرا اوضاع اقتصادی #برنامه_نویسان رضایت بخش نیست؟

🌐⁣https://goo.gl/yVVfas

#programming #article

✅ @coderszone

🔥نمونه #طرح tap_bar_hover

#inspiration #UI #frontend #android #iOS

✅@coderszone

⁠⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 اگر یک سایت #responsive دارید می توانید در آن از "تصاویر واکنش گرا" نیز استفاده کنید.

با استفاده از دو صفت جدید به نام های ⁣srcset و sizes به ترتیب برای تعیین مجموعه ای از آدرس های یک تصویر و تعیین اندازه نسبی تصویر در اسکرین های گوناگون استفاده کنید. سپس مرورگر بهترین اندازه تصویر برای نمایش در #device های مختلف را انتخاب می کند.

میزان پشتیبانی عمومی از این قابلیت در مرورگرها، ⁣88.54% است.

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 300px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg" alt="Image">

#UI #frontend


✅@coderszone

⁣⁣⁣⁣⁣⁣🔥 یکی از ساده ترین روش ها برای اینکه طرح شما تمیزتر به نظر آید، این است که به عنصر فضای بیشتری برای نفس کشیدن بدهید.

#UI #UX #fronetend

✅ @coderszone