Customizable CSS loaders and spinners

Another background css pattern generator

Another one: https://patternizer.com/4rvv

Useful for flat design

Looks complete

This is the crux of the Yard-sale model. In a free market, one person ends up with all of the wealth – completely by chance.

Looks like the monopoly game. It is inevitable. This effect is the following:

When you lose, the maximum amount you can wager goes down. So you can't win back what you lost in one coin flip.

When you win, the maximum amount you can wager goes up. So you could potentially lose more than what you won in the first game.

Besides I like the work done on the interface to make it interactive 👍

A game where you need to pick the design that is most correct. Test your attention to details!

1. Due to color vision deficiencies, it’s a good idea to always complement error messages with an icon
   • Additionally, it might be a good idea to guide users towards specific issues of the form with an error summary.
2. Never cover user inputs
   • First of all, we avoid tooltips that open on hover and display the tooltip only once tapped or clicked.
3. Error message position:
   • they should be placed above input for various reasons, but it costs layout shifts. In doubt, a collapsible accordion instead might be a better idea there.
   • they should be placed inline in tables. One of the simpler patterns is to display the error message in the same row where the content lives.
4. Avoid toast error messages
5. Establish stop-words for your error messages: they should never be used. See Error messages
6. Provide Examples Of Correct Input or guide the user to the expected input. For example, "IBAN starts with the country code. For example, DE or AT.
7. Display Error Summary on the top
   • Additionally, you might want to adjust the favicon and the title of the document if errors do appear,

How to build common ui patterns that are accessible 👍

Check the responsiveness of a web interface on multiple screens simulatneously.

Only for chrome actually :/
#idea #project publish this for firefox

I find it hard too :/

Rule of thumbs:

1. Show errors immediately if issues are severe
2. Late validation is almost always better
3. Validate empty fields only on submit
4. Reward early, punish late: if a user edits an erroneous field, we should be validating immediately, removing the error message and confirming that the mistake has been fixed as soon as possible (reward early). However, if the input was valid already and it is being edited, it’s probably better to wait until the user moves to the next input field and flag the errors then (punish late).
5. Validate after a copy-paste
6. Allow users to override inline validation
7. Just in time validation
8. For short forms, consider validation on submit only. For complex forms, use the task list pattern

In general, the larger the primes you use, the better the illusion of randomness. With smaller primes, you will get more variation, but less appearance of randomness.

The first way is to set each trait on :nth-child(pn + b) where p is a prime which increases with each value and b is constant for each trait.

The second way (which is more on par with the original Cicada principle) is to set each trait on :nth-child(pn + b) where p is constant per trait, and b increases with each value. This creates a better overall impression of randomness (especially if you order the values in a pseudo-random way too) without “holes”, but is more tedious, as you need as many values as the prime you’re using.

A list of UI patterns

Examples of original icon hover effects 👍

Examples of original button effects 👍

Examples of original link effects 👍

Just a great collection of resources with useful demos and tutorials