How to Design Better Checkbox, Radio and Toggle Buttons?

 Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items.

Radio buttons are not checkboxes. Checkboxes are not toggles. Toggles are not radio buttons. Each one of these elements have different meaning and used for distinct purpose.

Sizes

Use the correct sizes of radio, checkbox and toggle buttons for better visual implementation, efficiency and readability.

Radio buttons

A radio is a component that lets the user select the value that is written in its corresponding text label. Unlike checkboxes, a user can only select one radio button from a group at a time.

Its best to use them for 2–4 elements. They only let the user select 1 thing, not more.

Remember these things

• When the number of options is less.
• When options doesn’t require lengthy descriptions.
• Radio buttons are always listed vertically.
• Capitalize a radio button’s label.

Checkboxes

A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.

A checkbox control has three states: unselected, selected, and indeterminate.

Use checkboxes when more than one option can be selected and capitalize the checkbox’s label.

Toggle Buttons

A toggle is an interface element that, by its activation or deactivation, provokes an immediate action on the screen.

However, they don’t need to be confirmed with a CTA button. Use toggle buttons for activation.

Mind the tap area

Radio buttons, checkboxes and toggle buttons are one of the smallest interactive elements in all of UI design, so they need to have an easily accessible tap area.

Let users select an option by clicking or tapping not just that small square, but also the label or associated words.

Colors and different states

Always use different colors for different conditions and try to use gradient colors for better visually appealing.

Conclusion

Always display a list of options vertically if possibly. Horizontally-aligned options can be hard to read and distinguish from one another. If you must display your list in a horizontal fashion, be sure to pay close attention to the proximity of an item to its corresponding checkbox, as well as the space between list items.

rontend Coding Tips

1. Hiding an HTML element

<p hidden>This paragraph won't show up. It's hidden by HTML.</p>

2. Use the inset shorthand in CSS

Bad practice:

div{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Good practice:

div{
  position: absolute;
  inset: 0;
}

 

3. Detect internet speed

navigator.connection.downlink;

4. Vibrate your phone

//vibrating the device for 500 millisecondswindow.navigator.vibrate(500);
5. Disable pull to refresh

By using only CSS, you can disable pull to refresh on mobile. The property overscroll-behavior-y allows us to do that. Just give it the value contain .
Here is the example:
body{
 overscroll-behavior-y: contain;
}

6. Prevent the user from pasting text
There will be situations where you will need to prevent the user from pasting text into inputs.
Well, you can easily do that in JavaScript using a paste event listener.
Here is an example:
<input type="text"></input><script>//selecting the input.
  const input = document.querySelector('input');
  
//prevent the user to paste text by using the paste eventListener.
  input.addEventListener("paste", function(e){
    e.preventDefault()
  })
  
</script>

Spring vs Spring Boot

 

Top Laravel Eloquent Features You May Not Know.

 

1. Check if Model changed

You must keep look or identify if the model has been updated using isDirty()

$user = App\User::first();

$user->isDirty(); //false

$user->name = “Peter”;

$user->isDirty(); //true

If the individual attribute has been changed, you can also check.

$user->isDirty(‘name’); //true

$user->isDirty(‘age’); //false

2. Get original attributes

Once you develop the eloquent record and if you need original attributes, Just call getOriginal()

$user = App\User::first();

$user->name; //John

$user->name = “Peter”; //Peter

$user->getOriginal(‘name’); //John

$user->getOriginal(); //Original $user record

3. Get changed attributes

If you want to undo the changed attributes of a model, do it by using getChanges()

$user->getChanges()

//[

“name” => “Peter”,

]

Note: Here you need to keep in mind that, you will only get changes back if you save it or sync the changes with syncChanges()

4. Custom deleted_at column

In Laravel, the default deleted_at column is used for deleting, if you wish to change it, you need to define the DELETED_AT property.

class User extends Model

{

use SoftDeletes;

* The name of the “deleted at” column.

*

* @var string

*/

const DELETED_AT = ‘is_deleted’;

}

Or by defining an accessor.

class User extends Model

{

use SoftDeletes;

public function getDeletedAtColumn()

{

return ‘is_deleted’;

}

}

5. Save relationships and models

By using the push() method, you can save the relationships and models.

class User extends Model

{

public function phone()

{

return $this->hasOne(‘App\Phone’);

}

}

$user = User::first();

$user->name = “Peter”;

$user->phone->number = ‘1234567890’;

$user->push(); // This will update both user and phone record in DB

6. Reload fresh model

By using fresh(), you can Reload a fresh model

$user = App\User::first();

$user->name; // John

// user record get updated by another thread. eg: ‘name’ changed to // Peter.

$updatedUser = $user->fresh();

$updatedUser->name; // Peter

$user->name; // John

7. Reload existing model

By using the refresh(), we can reload existing models along with fresh value.

$user = App\User::first();

$user->name; // John

// user record get updated by another thread. eg: ‘name’ changed to // Peter.

$user->refresh();

$user->name; // Peter

8. Check if models are the same

You can identify if the models are same by using is()

$user = App\User::find(1);

$sameUser = App\User::find(1);

$diffUser = App\User::find(2);

$user->is($sameUser); // true

$user->is($diffUser); // false

9. Clone a model

With replicate(), you can clone a model. It helps you to create a copy and non-existing model instance.

$user = App\User::find(1);

$newUser = $user->replicate();

$newUser->save();

10. Specify attributes in find() method

Use find() or findOrFail() methods, to identify the attributes for selecting the second argument.

$user = App\User::find(1, [‘name’, ‘age’]);

$user = App\User::findOrFail(1, [‘name’, ‘age’]);

I wish it was interesting and helpful. You can show your love by sharing and commenting. Also, open to sharing the thoughts on this.

Finally…

If you want to utilize the best features of Laravel Eloquent for your Laravel based project. You can find out the best Laravel Development services and Hire Laravel Developer. Experienced and talented developers utilize the best resources and give you the best solution for development.

The Power of Axios

 The Power of Axios

promise.all(), promise.any(), promise.race(), promise.allsettled() 차이 설명 쉬운 예제

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        

        const prom1 = new Promise((resolve, reject) => {

            setTimeout(() => {

                // resolve('first promise resolved')

                reject('first promise rejected')

            }, Math.floor(Math.random() * 1000));

        });

        const prom2 = new Promise((resolve, reject) => {

            setTimeout(() => {

                resolve('second promise resolved')

                // reject('second promise rejected')

            }, Math.floor(Math.random() * 1000));

        });

        const prom3 = new Promise((resolve, reject) => {

            setTimeout(() => {

                // resolve('third promise resolved')

                reject('third promise rejected')

            }, Math.floor(Math.random() * 1000));

        });

        // Promise.all()

        // 첫 번째 거부 된 Promise로 오류를 던진다...

        (async function() {

            try {

                const result = await Promise.all([prom1, prom2, prom3]);

                console.log(result);

            } catch (err) {

                console.log(err)

            }

        })();

        // Promise.race()

        // 새로고침을 계속하면 3개중 하나의 결과만 리턴해준다.

        // reject든 resolve든 간에...

        (async function() {

            try {

                const result = await Promise.race([prom1, prom2, prom3]);

                console.log(result);

            } catch (err) {

                console.log(err)

            }

        })();

        

        // Promise.any()

        // Promise.race() 는 reject되도 상관없지만 any() 는 resolve된것만 리턴. 새로고침하며 결과 확인

        // Promise 중 하나가 reject 되더라도 다른 Promise를 계속 해결할 것.

        // 모든 Promise가 reject된 경우에만 집계 오류가 발생

        (async function() {

            const result = await Promise.any([prom1, prom2, prom3]);

            console.log(result); // Prints “A”, “B” or “C”

        })();

        // Promise.allSettled()

        // 모든 Promise가 resolve되거나 reject된 후에 각 Promise의 결과를 설명하는 다양한 개체와 함께 해결하는 Promise를 return

        (async function() {

            try {

                const result = await Promise.allSettled([prom1, prom2, prom3]);

                console.log(result);

            } catch (err) {

                console.log(err)

            }

        })();

    </script>

</body>

</html>