Browsers aggressively remember fields. ❌ Risk Passwords, tokens, internal IDs ✅ Fix autocomplete=”off” Where appropriate.
Category: HTML
HTML5 —
This is not optional. <label for=”email”>Email</label> <input id=”email”> Benefits Larger click target Screen reader support Better UX
HTML5 — Is Still Often Wrong
Bad viewport = broken mobile UX. <meta name=”viewport” content=”width=device-width, initial-scale=1″> Without this, mobile layouts lie.
required Attribute Is NOT Validation
HTML validation can be bypassed easily. ✅ Rule Never trust client-side validation. Always validate server-side.
input type=”number” Breaks Mobile UX
Mobile keyboards behave inconsistently. ✅ Better <input inputmode=”numeric” pattern=”[0-9]*”> Result Better mobile keyboards Fewer validation issues
Inside forms, this causes accidental submits. ❌ <button>Click</button> ✅ Fix <button type=”button”>Click</button>
loading=”lazy” — Free Performance Win
<img src=”hero.jpg” loading=”lazy”> Why Faster initial load Lower bandwidth Better Core Web Vitals
HTML5 autocomplete — Stop Browsers From Guessing Wrong
Browsers often autofill incorrect data. ✅ Control It <input name=”email” autocomplete=”email”> <input name=”one-time-code” autocomplete=”one-time-code”> Why Improves UX and security.
HTML5 button Defaults to submit (Surprise!)
This causes accidental form submissions. ❌ <button>Click</button> ✅ <button type=”button”>Click</button> Rule Always set the button type explicitly.
HTML5 Lazy Loading Without JavaScript
Stop writing JS for images. <img src=”image.jpg” loading=”lazy” /> Benefits Faster page load Better Core Web Vitals Zero JavaScript
HTML5 “Form Enter Key Submits Wrong Button” — The Invisible Default Button Rule
Browser submits the first submit button by default. ✔ Fix Add formnovalidate or type=”button”: <button type=”button”>Search</button> <button type=”submit”>Save</button> 💡 Hidden Detail Prevent wrong form submissions on mobile.
HTML5 “Broken Autofill Styles” — Chrome’s Yellow Background Bug
Chrome applies weird autofill yellow color using a shadow DOM style. ✔ Fix input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } 💡 Works for: light themes dark themes password inputs
HTML5 Input “step=any” — The Secret to Fix Broken Decimal Validation
Developers struggle with inputs like: <input type=”number” step=”0.01″ /> But values like 0.333 fail. ✔ Fix Allow any decimal: <input type=”number” step=”any” /> 💡 Works beautifully for: currency measurements percentages
HTML5 Video Autoplay Failing? — The REAL Browser Requirement
Chrome, Safari, Firefox → all require muted autoplay. ✔ Correct Way <video autoplay muted playsinline> <source src=”video.mp4″ type=”video/mp4″> </video> If muted is missing → autoplay is blocked. 💡 Mobile Tip Add playsinline to avoid fullscreen takeover.
HTML5 “Inputmode” — The Feature That Makes Mobile Forms 10× Better
Most devs don’t know this exists. ✔ Example <input type=”text” inputmode=”numeric” /> This forces numeric keyboard on mobile — even though type is text. Also supports: decimal email search tel url 💡 Immediate UX win.
HTML5 Input Validation — Why Your Patterns “Don’t Work”
HTML5 validation fails when: Wrong regex style Missing anchors Using lookaheads (not supported) Using unescaped characters ❌ Wrong <input pattern=”[A-Z]{3}-[0-9]+” /> ✔ Correct Always anchor: <input pattern=”^[A-Z]{3}-[0-9]+$” /> 💡 Life-Saving Detail HTML5 pattern must match the entire string.Not a substring — the whole value. This rule is rarely known and causes hours of debugging.
Service Workers — Offline-First Apps Made Easy
Service Workers let your site work offline, cache assets, and load instantly. navigator.serviceWorker.register(‘/service-worker.js’); ✨ What You Get ⚡ Near-instant load time 📦 Cached static assets 📡 Offline browsing 🔋 Reduced server load 💡 Combine with “cache-first” strategies for ultimate speed.
HTML5 Lazy Loading Images — Zero-Effort Performance Gains
Lazy loading is now native in all modern browsers. <img src=”hero.jpg” loading=”lazy” /> 🚀 Why It’s Amazing 📉 Instant LCP improvements 🧠 Saves bandwidth ⚡ Faster page loads 🛠 No JS required
How to align inconsistently sized logos with CSS
These 3 lines will save you (fit, line up, remove background): aspect-ratio: 3/2; object-fit: contain; mix-blend-mode:color-burn; Let’s see how you can use that: In the body section, we have a div with the “photoDiv” class. <div class=”photoDiv”> <img src=”1.png”> <img src=”2.png”> <img src=”3.png”> <img src=”4.png”> <img src=”5.png”> </div> And here is the magical CSS: <style> […]
How to use client-side function on checkbox or any asp.net component
Here is the Asp part: <label for=”chkCondition”> <asp:CheckBox ID=”chkCondition” Text=”Should i show the div?” runat=”server” onclick=”ShowHideDiv(this)” /> </label> <hr /> <div id=”divToShowOrHide” style=”display: none”> this div will be shown regarding the checkbox checked status. <asp:TextBox ID=”myTextBox” runat=”server” /> </div> And here is the Javascript part: <script type=”text/javascript”> function ShowHideDiv(chkCondition) { var divToShowOrHide = document.getElementById(“divToShowOrHide”); divToShowOrHide.style.display […]
How to apply two classes to a single element in CSS
Let’s say you want to use 2 or more classes for a div. Then you should use these classes inside the class attribute, separated by whitespace: <div class=”myFirstClass mySecondClass”></div> To target elements that contain all of the specified classes, use this CSS selector (no space) in your CSS file: .myFirstClass.mySecondClass {}
How to get the integrity value for a jquery version of script reference in a web page
You can use https://www.srihash.org/ to generate links. https://code.jquery.com/jquery-3.6.0.min.js will be generated as <script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==” crossorigin=”anonymous”></script> You can get all the versions of jquery from here: https://releases.jquery.com/jquery/ Thanks to mscdeveloper for such great post.
Search text through Divs in Javascript
<table align=”center” width=”20%”> <tr> <td style=”padding-right: 10px”> <input type=”text” id=”Search” onkeyup=”myFunction()” placeholder=”Please enter a search term..” title=”Type in a name”> </td> </tr> </table> <br> <div class=”target”> This is my DIV element. </div> <div class=”target”> This is another Div element. </div> <div class=”target”> Can you find me? </div> <script> function myFunction() { var input = document.getElementById(“Search”); […]
How to make Font-Awesome i tags compatible with SonarQube Analysis
It is so easy to do that. aria-hidden=”true” will solve your problem. The only thing you have to do is just changing this:
Javascript Refresh and CountDown Timer
<script type=”text/javascript”> function checklength(i) { ‘use strict’; if (i < 10) { i = “0” + i; } return i; } var minutes, seconds, count, counter, timer; count = 301; //seconds counter = setInterval(timer, 1000); function timer() { ‘use strict’; count = count – 1; minutes = checklength(Math.floor(count / 60)); seconds = checklength(count – minutes […]
How to Solve The ‘Object reference not set to an instance of an object’ error in Batch Edit mode for ASPxGridView
The issue occurs in Batch Edit Mode, because in this mode an empty invisible row is created and used for further grid editing. Since the Eval method returns a value type of an object, your attempt to call the ToString() method to the null value can lead to an exception. If you remove this conversion and use <%# […]
Navigate to a Div using a button in HTML
The Div: <div id=”DivToNavigate”> The content goes here… </div>
How to refresh a web page for every five minutes
<head> <%–Following line will automatically refresh the page every 5 minutes –%> <meta equiv=”refresh” content=”300″> </head>
Imitating a blink tag with CSS3 animations
Chrome and Safari don’t support or even CSS’s text-decoration: blink;, but here is the solution for BLINK: <style type=”text/css”> .blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; } @keyframes blink { to { visibility: hidden; } } @-webkit-keyframes blink { to { visibility: hidden; } } </style> This is […]
Get and Use TextBox Values with Javascript
Here is the example code to get and use TextBox Values with Javascript: