2021년 8월 2일 월요일

9 HTML Features

 1. The <optgroup> element

 2. The <base> element

 3. The <del> and <ins> elements

 4. The <wbr> element

 5. The <fieldset> element

 6. Opening the Device Camera

Did you know that you can use HTML to access a user’s device camera? By using the attribute, you can open either the front or back camera of a mobile device to capture images. Simply add the attribute to the file input element and specify either "user" for the front camera or "environment" for the back camera.

<input type="file" capture="user" accept="image/*">
<input type="file" capture="environment" accept="video/*" />

 7. Spellcheck Activation

<input type="text" spellcheck="true" lang="en">

8. Preventing Translation

<p translate="no">Brand name</p>

9. Customizing Form Validation Messages

<input type="text" required oninvalid="this.setCustomValidity('Please enter a valid value.')">

10. Responsive Images with srcset

<img srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg3x" src="image.jpg" alt="Responsive Image">









2021년 7월 7일 수요일

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.

Sizes

Radio buttons

Checkboxes

Toggle Buttons

Mind the tap area

Colors and different states

Conclusion

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


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

}
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


body{
overscroll-behavior-y: contain;
}


6. Prevent the user from pasting text

<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>

2021년 6월 21일 월요일

Top Laravel Eloquent Features You May Not Know.

 

1. Check if Model changed

2. Get original attributes

3. Get changed attributes

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

5. Save relationships and models

6. Reload fresh model

7. Reload existing model

8. Check if models are the same

9. Clone a model

10. Specify attributes in find() method

Finally…