وقتی مدیر پروژه اولین پروژه اختصاصی رو به کارآموز میده

#gif

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥اگر نیاز دارید که چارچوب عناصری که صفحه شما را ساخته اند ببینید، کافی است دستور زیر را در کدهای CSS خود بگنجانید:

* { outline: 1px solid red; }

#UI #frontend #css #tip #trick

✅ @coderszone

🌟 بهتر است برای جدا سازی دو عنصر مجاور، از رنگ های گوناگون استفاده کنید. حتی اگر قبلا از دو رنگ متفاوت به همراه یک border استفاده می کردید، از border صرفنظر کنید.
#UI #UX #frontEnd

✅@coderszone

🔥 در بسیاری از اپلیکشین های موبایل، دکمه ها بسیار کوچک هستند و این منجر می شود که کاربران نتوانند به راحتی آن ها را لمس کنند.

مطالعات موسسه MIT Touch Lab نشان می دهد که اندازه میانگین برای سر انگشت 10-14 میلی متر و برای نوک انگشتان 8-10 میلی متر است.

💥 در نتیجه باید حداقل اندازه 10x10 میلی متر را برای عناصر قابل لمس در نظر گرفت.

https://goo.gl/SYLn9b

#tips #UI #UX #android

✅@coderszone

🔥 نمونه از کاربرد #effect ها در پیاده سازی #tab_bar یک app #موبایل

#UI #frontend #android #iOS

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 با اینکه گنجاندن تصاویر #gif در صفحات وب ساده تر از #video هاست اما پیشنهاد می شود جهت نمایش محتوای متحرک، حتی الامکان از ویدیوها به جای gif استفاده کنید. چرا که معمولا ویدیوها حجم کمتری نسبت به تصاویر gif دارند.

برای تبدیل gif به ویدیو می توانید از سرویس آنلاین زیر استفاده کنید:

🌐 https://ezgif.com/gif-to-mp4

#UI #frontend #tip #trick

✅ @coderszone

🔥یکی از اشتباهات رایج در #فروشگاه های اینترنتی، عدم تمرکز بر روی یک موضوع خاص است. در واقع بسیاری از آن ها می خواهند همه کاره باشند.

مثلا اگر شما یک #فروشگاه_آنلاین با موضوع پوشاک دارید، اما در عین حال به فروش مبلمان و فرش نیز می پردازید، مشتریان نمی توانند به شما اعتماد کنند و شما را به عنوان یک متخصص در آن زمینه نمی دانند.

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

https://goo.gl/GXgcwB

#digital_marketing

✅@coderszone

🔥هر چند که تصاویر برداری طوری طراحی شده اند که در هر اندازه ای
کیفیت خود را حفظ می کنند، اما همیشه سعی کنید #آیکون هایی را که
برای اندازه های 16-24 پیکسل طراحی شده اند را به 3 یا 4 برابر
کوچکتر از اندازه اصلیشان نمایش ندهید چرا که جزئیات آن ها مشخص
نبوده و غیر حرفه ای به نظر خواهند رسید.

اگر آیکن های کوچکی در اختیار دارید میتوانید آن ها را داخل shape
های دیگری قرار داده و به آن رنگ پس زمینه بدهید.

https://goo.gl/1g8jUe

#tips #frondend #UI #UX

✅ @coderszone

🔥شواهد بسیاری وجود دارد که نشان می دهد #گوگل وبسایت ها را بر اساس میزان اقبال کاربر به آن ها #آنالیز می کند. هر چه کاربر مدت زمان بیشتری در سایت شما باشد گوگل نیز امتیاز بیشتری به شما خواهد داد.

به عبارتی هر چه میانگین زمانی حضور کاربران در سایت بیشتر باشد شانس بیشتری برای نمایش در صفحات ابتدایی گوگل خواهید داشت.

از طرف دیگر، نرخ پرش(#bounce_rate) کاربران نیز تاثیر مستقیمی در رتبه شما دارد. هر چه کاربران زودتر سایت شما را ترک کنند، امتیاز کمتری از گوگل خواهید گرفت.
https://goo.gl/XeQcye

#seo

✅@coderszone

🔥زمان و سرعت اجرای انیمیشن ها

زمانی که قرار است عناصر تغییر وضعیت یا مکان بدهند، مدت زمان اجرای #انیمیشن آنها باید به قدری باشد که کاربر متوجه تغییرات بشود.نه خیلی سریع و نه خیلی آهسته که کاربر را خسته کند.

تحقیقات بسیاری نشان داده است که سرعت بهینه برای اجرای انیمیشن ها، بین 200 تا 500 ms می باشد. سرعت های کمتر از 100ms اصلا تشخیص داده نمی شوند و سرعت های بیشتر از 1 ثانیه نیز برای کاربران خسته کننده است.

https://goo.gl/XkFVyn

#UI #UX #frontend

✅@coderszone

⁠⁠⁣🔥پروژه #AMP (Accelerated Mobile Pages)، پروژه ای متن باز است که به منظور بهبود سرعت و عملکرد صفحات وب ایجاد شده است. این پروژه توسط #گوگل پشتیبانی می شود و #Bing ، #Twitter و #Pinterest نیز از آن حمایت کرده اند.

💡 ایده این پروژه این است که ابتدا چیزی را در #گوگل جستجو می کنید و با کلیک بر روی یکی از نتایج، آن صفحه بلافاصله به شما نمایش داده می شود.

این پروژه، افزایش سرعت سایت ها، تجربه بهتر کاربران، بیشتر و بهتر دیده شدن نتایج را به ارمغان می آورد.

🌐 https://goo.gl/7Y2kFN

#AMP #technology

✅@coderszone

⁠⁣⁣⁣⁣⁣⁣🔥⁣ با استفاده از خاصیت ⁣scroll-behavior در #CSS می توان سبک اجرای scrolling در عناصری که قابل اسکرول هستند را کنترل کرد. این خاصیت از مقداری به نام smooth پشتیبانی می کند که باعث می شود عمل اسکرول به جای پرش یکباره به صورت انیمیشنی انجام شود.

استفاده از این خاصیت برای عنصر root صفحه، آن را به viewport #مرورگر اعمال خواهد کرد.

🌐⁣⁣https://goo.gl/Jb4P8A

✅@coderszone

🌟 بهتر است برای جدا سازی دو عنصر مجاور، از رنگ های گوناگون استفاده کنید. حتی اگر قبلا از دو رنگ متفاوت به همراه یک border استفاده می کردید، از border صرفنظر کنید.
#UI #UX #frontEnd

✅@coderszone

🔥 تکنولوژی #GraphQL ، یک زبان پرس و جو برای ساخت و کار با api ها می باشد.

این سرویس را می توان یکی از جایگزین های RESTful API ها دانست که می تواند با تمامی تکنولوژی های BackEnd سازگاری داشته باشد.

در GraphQL داده ها را دقیقا به صورتی که درخواست کرده اید تحویل می گیرید.

https://goo.gl/K57JWL

#GraphQL #BackEnd

✅@coderszone

🔥نمونه #طرح حذف پیغام در چت لیست

#UI #inspiration

✅@coderszone

🔥نرم افزار #Rider یک IDE# چندسکویی برای توسعه دهندگان .NET, #ASP.NET, .NET Core, Xamarin و Unity applications می باشد که توسط شرکت JetBrains ارایه شده است.

از جمله ویژگی های آن می توان به موارد زیر اشاره کرد:

👉Code analysis
👉Code editing
👉Refactorings
👉Unit test runner
👉Debugger and more tools
👉Databases and SQL
👉Front-end technologies

https://goo.gl/nG5p3A

#ASP #.NET #Xamarin #backEnd

✅@coderszone

🔥 نمونه #طرح خلاقانه در پیاده سازی فیلتر یک #app فروشگاهی پوشاک

#frontend #UI #android #iOS

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥طراحان و دولوپرهای #فرانت‌اند چه‌طور می‌توانند با یکدیگر کنار بیایند؟

🌐https://goo.gl/gpYM6H

#article

⁣✅ @coderszone

🔥 وقتی که یه برنامه نویس می خواد نتیجه یه هفته تلاشش رو به رئیسش نشون بده😁😁

#gif #programming

✅@coderszone

🔥 مطالعات نشان می دهد کاربران، #لوگو هایی که در سمت چپ #وبسایت ها قرار می گیرند را بهتر از آن هایی که در راست قرار دارند به
خاطر می سپارند. این کار میانگین یادآوری لوگو را تا 89% افزایش می دهد.

💡این مورد برای سایت های #فارسی که جهت گیری عناصر از راست به چپ است کاملا معکوس است.

#UI #UX #frontend

✅ @coderszone

🔥 از کلاس کاذب placeholder-shown: در CSS می توان برای ساخت label های شناور (بدون جاوااسکریپت) استفاده کرد.
🌐https://goo.gl/7T7Gjj

#css #UI #frontend

✅@coderszone