⁠⁣⁣⁣🔥 غالبا دو مکان برای نمایش خطاهای رخ داده در #فرم وجود دارد. نمایش در بالای فرم و نمایش به صورت #inline .

نمایش یکباره تمام خطاها در بالای فرم، موجب سردرگمی کاربر می شود و به خاطر فاصله ای که بین فیلد ها و پیام ها ایجاد می شود، کاربر به راحتی نمی تواند تشخیص دهد که کدام خطا مربوط به کدام فیلد است.

در عوض نمایش inline پیام ها در جلوی فیلدها، سبب می شود کاربر بهتر و سریع تر به خطاهای خود پی ببرد.

در روش inline نیز بهترین مکان برای نمایش پیغام، در سمت راست(چپ) فیلدها در فرم های چپ چین(راست چین) می باشد.

#UI #UX #frontend

⁣✅@coderszone

⁣⁣⁣⁣⁣⁣⁣⁣🔥 ⁣Loaders.css

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

⁣🌐⁣https://goo.gl/5JS13s

#UI

⁣✅@coderszone

⁠⁣🔥 پیش بینی می شود #PWA (⁣Progressive Web App) ها تا سال 2020 جای 50 درصد از #اپ های native را در بازار بگیرند.

صفحات #PWA #وب_اپلیکیشن هایی هستند که در ظاهر شبیه وبسایت های معمولی اند اما قادرند بسیاری از قابلیت های اپ های #موبایل همچون ⁣working offline، ⁣push notifications و دسترسی به سخت افزار دستگاه را فراهم کنند.

⁣🌐 ⁣https://developers.google.com/web/progressive-web-apps/

⁣✅@coderszone

⁣⁣⁣⁣🔥⁣یادگیری #جاوا_اسکریپت: یازده منبع آنلاین برای هر سطح تخصص

⁣👇👇👇👇👇👇👇
🌐⁣⁣⁣https://goo.gl/TY83aE

⁣✅@coderszone

⁠⁣⁣🔥 از تکنیکی به نام #Prefetching می توان جهت بهبود سرعت مرور صفحات وب بهره برد. در این تکنیک برخی منابع مشخص حتی قبل از اینکه کاربر آن ها را درخواست کرده باشد گرفته شده و در #cache مرورگر ذخیره می شوند.

سه نوع ⁣Prefetching وجود دارد:

👈روش ⁣Link Prefetching : که در آن با استفاده از یک تگ link، منبع مورد نظر برای مرورگر تعیین می شود.

⁣👈روش ⁣DNS Prefetching : که در آن با تعیین آدرس یک سایت دیگر، مرورگر در پس زمینه یک #DNS lookup برای دامنه آن سایت انجام میدهد تا در صورت کلیک کاربر، دیگر این کار انجام نگیرد و زمان انتظار کاربر به حداقل برسد.

⁣👈روش ⁣Prerendering : در این روش کل منابع مورد نیاز برای صفحه ای ک آدرس آن را تعیین کرده ایم دانلود و نگه داری می شود.

#frontend #UI #tips

⁣✅@coderszone

⁣⁣🔥مجموعه ای از #best_practice های #لاراول

👇👇👇👇👇👇👇
⁣🌐⁣https://goo.gl/dnRPzg

#backend #laravel #php

⁣✅@coderszone

⁣⁣⁣🔥مجموعه ای از دکمه های #Toggle کاملا #CSSی با افکت های جذاب

👇👇👇👇👇👇👇
⁣🌐https://goo.gl/rteGXD

#UI #frontend

⁣✅@coderszone

⁣⁣⁣⁣⁣🔥⁣۷ دلیل برای اینکه برنامه‌نویس بیکاری هستید!


⁣👇👇👇👇👇👇👇
🌐⁣https://goo.gl/AQMkrT

⁣✅@coderszone

⁠⁣🔥نمونه #طرح فروشگاه کفش برای #اپ های #اندروید

#inspiration #UI #frontend #android

✅@coderszone

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

#UI #UX #frontend

⁣✅@coderszone

⁣🔥⁣چگونه یک دولوپر ماهر را از یک دولوپر خوب تشخیص دهیم؟

🌐 ⁣https://goo.gl/H9G4RC

#programming

✅@coderszone

⁠⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 7 اصل اساسی در #SEO که نباید از آن ها غافل شوید:

💡مطمئن شوید که نقشه #XML سایت شما کاملا به روز است.
⁣💡از #کلمات_کلیدی طولانی استفاده کنید.
⁣💡محتوای منحصر به فردی که حاوی کلمات کلیدی مختلف است تولید کنید.
⁣💡از سایت های دیگر #backlink بگیرید.
⁣💡از مقداردهی صفت alt تصاویر غافل نشوید.
⁣💡از #mobile_friendly بودن وبسایت خود اطمینان حاصل کنید.
⁣💡سایت خود را همواره تست کنید تا از سرعت بارگذاری آن مطمئن شوید.


⁣✅@coderszone

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 در Blade #لاراول، هنگام کار با foreach های تو در تو ، باز هم می توان از طریق متغیر loop$ ، به حلقه پدر دسترسی داشت.


#backend #php #laravel

⁣✅@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

⁣⁣🔥 #ربات رقاص، خلق شگفتی دیگری از #Boston_dynamics

#technology

⁣✅@coderszone

🔥نمونه #طرح ⁣Stepper لمسی

#inspiration #UI #frontend #android

✅@coderszone

⁣⁣🔥 اسنیپت استور (#Snippet_store) یک اپلیکیشن با ظاهری ساده و کوچک است که به #توسعه دهندگان کمک می کند #snippet_code هایی که زیاد استفاده می کنند را ذخیره و در صورت لزوم به راحتی به آن ها دسترسی داشته باشند.

این #اپلیکیشن، هم اکنون در دو نسخه برای windows و Linux و در دو تم رنگی روشن و تیره ارائه گردیده است و امکان integrate با #VSCode را دارد.

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

#tools #programming

⁣✅@coderszone

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

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

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

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

#UI #UX #frontend

⁣✅@coderszone

⁣⁣🔥 در نسخه 70 مرورگر #chrome قابلیت #picture_in_picture اضافه شده است. با این قابلیت می توان با کلیک راست روی ویدیوهای موجود در صفحه و انتخاب گزینه Picture in picture، آن ها را به حالت شناور طوری که بر روی تمامی پنجره های #سیستم_عامل قرار بگیرد، درآورد.

#chrome

⁣✅@coderszone

⁣🔥 با استفاده از صفت download برای تگ های a در #HTML5 میتوان لینکهای دانلودی ایجاد کرد.در این حالت حتی اسم فایلی که با کلیک بر روی لینک ذخیره میشود را نیز میتوان تعیین کرد.

#frontend

⁣✅@coderszone