HTML popover Attribute

/ / No Comments
Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check it out! The HTML Creating a native HTML modal consists of using the popovertarget attribute as the trigger and the popover attribute, paired with an id, to identify the content element: <!-- "popovertarget" attribute will map to "id" of popover contents --> <button popovertarget="popover-contents">Open popover</button> <div... more →
Posted in: JavaScript Tagged with: , ,

Responding to HTML Changes in a Web Component

/ / No Comments
While driving my kids to school this morning, I had an interesting thought. Is it possible for a web component to recognize, and respond, when its inner DOM contents have changed? Turns out of course it is, and the answer isn’t really depenedant on web components, but is a baked-in part of the web platform, the MutationObserver. Here’s what I built as a way to test it out. The Initial Web Component # I began with a simple web component that had the following simple feature – count the number of images inside it and report. So we can start with this HTML: <img-counter> <p> <img src="https://placehold.co/60x40"> </p> <div> <img src="https://placehold.co/40x40"> </div> <img... more →
Posted in: JavaScript Tagged with: , , ,

How to Override width and height HTML attributes with CSS

/ / No Comments
One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together. Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how do we ensure the height attribute doesn’t conflict with max-width values? The answer... more →
Posted in: JavaScript Tagged with: , , , ,

Customizing HTML Form Validation

/ / No Comments
Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes like required and pattern to act as very basic validation. Did you know, however, that you can control native form validation using JavaScript? validity Each form element (input, for example) provides a validity property which represents a ValidityState. ValidityState looks something like this: // input.validity { badInput: false, customError: true, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false,... more →
Posted in: JavaScript Tagged with: , , ,

Legacy String Methods for Generating HTML

/ / No Comments
I’m always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we’re doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn’t use but have existed forever. Let’s take a look! These legacy string methods take a basic string of text and wrap it in a HTML tag of the same name: "Hello".big() // "<big>Hello</big>" "Hello".blink() // "<blink>Hello</blink>" "Hello".bold() // "<b>Hello</b>" "Hello".italics() // "<i>Hello</i>" "Hello".link("https://davidwalsh.name") // "<a... more →
Posted in: JavaScript Tagged with: , , , ,
1 2 3