TheComputengine

  We use a lot of Forms regularly. If you are using a Form in your website, have you ever tried to create some validations on the form so that the inputs made by user can be checked? There are a lot of libraries out there which can help you do the input validation using JavaScript, but that is additional code that needs to be included, and third party libraries can often slow down your page load speeds.  Today, we'll write a small JavaScript function that we can include in our website and which does the input validation very quickly and efficiently. This function also highlights the input field in a color of your choice, and you can display an error message to your end user. If you have a form with multiple fields, and want to run validations on all of them, you'll have to loop through the fields one by one using a for loop, and run the validation on each one.  You can pass the field ID to the function and run the validation on it.  Below is our function which will d...

  Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring  visual stability  because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is  delightful . Above is the definition of CLS from Google web.dev.  Google has included CLS (cumulative layout shift) as an important metric for measuring a page and a forthcoming metric for ranking a page as it evaluates the user experience of a website. You can measure your website's score here . Simply put, a high CLS score means that your ranking will be low. Ideally, CLS should be 0 for a webpage. There are many elements on a page which can contribute to increase in CLS, the biggest contributor as per our experience, are the Images that are displayed on a Webpage.  If images are not loaded properly, then they can cause the page elements to shift or pushed when they load, impacting the CLS score.  Today, we'll see an very easy and e...