Html on Brandon Pugh's Blog

Alerts, Callouts, and Admonitions

Sun, 31 May 2026 00:00:00 +0000

What my site currently supports:

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Prior art

Admonish the Callout - Mandaris inspired me to finally implement on my blog
antfu/markdown-it-github-alerts: Support GitHub-style alerts for markdown-it

Thank you for keeping RSS alive. You're awesome.

Reply by email

datetime-local doesn't have full cross-browser support

Sun, 04 Jan 2026 00:00:00 +0000

I recently discovered the datetime-local input type doesn’t actually have full browser support.

If you have a form value that needs both a date and time component, then you might be tempted to rely on the platform to simplify your implementation and use datetime-local to avoid needing two separate inputs, the values of which you’ll need to combine at some point. Unfortunately I don’t think it’s supported enough to be usable in most applications.

The MDN page for datetime-local is a bit misleading because at the top it says it’s “Baseline widely available” but if you check the browser compatibility chart down at the bottom then you’ll see asterisks next to Firefox and Safari on Desktop and clicking that reveals that they only display a datepicker and not a timepicker.

This means that users have to manually type in the time which might be an acceptable tradeoff but if the user doesn’t add the time then Firefox will just return null as its value.

Firefox did recently address these issues in Firefox 144, but as of this writing it’s still behind an experimental flag.

Thank you for keeping RSS alive. You're awesome.

Reply by email

How to Optimize Viewport for Mobile for Faster Interactions | DebugBear

Tue, 28 Oct 2025 00:00:00 +0000

How to Optimize Viewport for Mobile for Faster Interactions | DebugBear

If the viewport isn’t configured properly (e.g., the meta tag has a fixed value), mobile browsers delay all responses by up to 300 milliseconds. As a result, users will have to wait after each tap, the UI will feel sluggish, and Interaction to Next Paint (INP) scores will increase dramatically.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Do not download the app, use the website

Thu, 31 Jul 2025 00:00:00 +0000

Do not download the app, use the website

Thank you for keeping RSS alive. You're awesome.

Reply by email

A Friendly Introduction to SVG

Wed, 23 Jul 2025 00:00:00 +0000

A Friendly Introduction to SVG • Josh W. Comeau

This is another great tutorial from Josh on the basics of SVG markup!

If you want to go further, this is an awesome interactive site for understanding SVG paths:

Understanding SVG paths

Thank you for keeping RSS alive. You're awesome.

Reply by email

Building Websites With LLMS

Mon, 17 Mar 2025 00:00:00 +0000

Building Websites With LLMS

I’ve mentioned the new view transitions API before, Jim Nielsen has a great post (with a fun bait-and-switch title) where he takes it to the next level and shows how you can use cross-document transitions to take a site with regular ole html pages and make it feel like a SPA or native app.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Create exclusive accordions with HTML `
` element

Thu, 13 Mar 2025 00:00:00 +0000

Today I learned that you can now create an “exclusive accordion”, meaning only one section of the accordion is open at a time, using just html with the details element.

All you need to do is add a matching name attribute to each <details> element you want to be considered part of the same “group”:

<details name="faq">
  <summary>Section 1</summary>
  <p>
    Section 1 details
  </p>
</details>

<details name="faq">
  <summary>Section 2</summary>
  <p>
    Section 2 details
  </p>
</details>

Note, the <details> element has been widely supported since 2020 but support for the name attribute was only added last year.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use the element for light/dark images in markdown

Wed, 19 Feb 2025 00:00:00 +0000

Thanks to James’ post, today I learned that you can use the <picture> to display different images based on whether or not the set a preference for light or dark mode.

The key is using the prefers-color-scheme CSS media query

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="
      https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png
    "
  />
  <img
    alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode."
    src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png"
  />
</picture>

Since HTML is valid in markdown, you can easily use this technique in a number of places including Github—which apparently has allowed the use of the picture element since 2022. This is much better than the custom syntax they had before.

This also aligns with the sentiment Dave expressed that Markdown images are an anti-pattern.

Thank you for keeping RSS alive. You're awesome.

Reply by email

A single input in a form can submit

Tue, 07 Jan 2025 00:00:00 +0000

Today I learned that if you have a single text field in a form then browsers will automatically submit it when you press enter.

<form>
  <label>
    Search
    <input type="text">
  </label>
</form>

This is kinda handy since normally you need to add a submit button to be able to submit a form — but, you should be aware that if you add another field then you do need to add a submit button for the form to work.

This post goes into more detail.

Thank you for keeping RSS alive. You're awesome.

Reply by email

setSelectionRange in Safari will focus the input

Sun, 08 Dec 2024 00:00:00 +0000

Apparently in Safari, setSelectionRange() will focus the element even when not focused despite MDN stating that “The element must be focused for the call to have any effect”.

According to this bug, this is considered intended behavior even though it’s inconsistent with MDN and the other browsers.

It’s worth noting though, during my testing, I noticed that Chrome/Firefox will update the selection and cursor position you just won’t see it unless you programmatically call .focus() on the element.

Thank you for keeping RSS alive. You're awesome.

Reply by email

SRI integrity hash algorithms

Tue, 12 Nov 2024 00:00:00 +0000

Today I learned that you can actually specify different hash algorithms for Subresource Integrity (SRI) hashes.

If you aren’t familiar with SRI, this post does a good job explaining why it’s useful and how it would have mitigated the recent pollyfill.io incident.

I needed to add the hashes to some scripts from a third party CDN that didn’t provide them and I came across this handy generator which let’s you choose which algorithm to use and defaults to SHA-384 and report-uri has a generator that just includes all 3 different hashes in the integrity value.

So which one to use?

Apparently you can specify different hashes but there isn’t much value in doing so at the moment since all modern browsers support all of the available algorithms so you should just pick SHA512. In the future however, newer algorithms might be implemented which you could add while maintaining backwards compatibility.

Thank you for keeping RSS alive. You're awesome.

Reply by email

History API state

Mon, 07 Oct 2024 00:00:00 +0000

Today I learned that you can actually store state in the browser history via the history API (note this is not the query string).

I came across in this post that uses it as a clever method for temporarily storing form data.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Drag and drop upload

Wed, 24 Jul 2024 00:00:00 +0000

Today I learned that creating a nice drag-and-drop file component using vanilla javascript and the built web APIs is actually fairly easy.

Smashing Magazine has an easy-to-follow example.

The gist of it is that the browser gives you 'dragenter', 'dragover', 'dragleave' events that you can use to style your “dropzone” however you want and the drop event allows you to handle the files themselves:

dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
  let dt = e.dataTransfer
  let files = dt.files

  // implement with your preferred upload method
  uploadFiles(files)
}

The dragevent and dataTransfer interface have been supported in modern browsers for some time so they are pretty safe to use.

Alternatively, if you don’t care about styling a fancy drop area, the standard HTML <input type="file"> element supports dragging a file onto it.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Input modes

Wed, 17 Jul 2024 00:00:00 +0000

Today I learned that iOS changed the way it handles the inputmode="numeric" attribute on HTML input elements.

It used to display the full number keyboard as shown here:

I couldn’t find it documented anywhere but, after testing various versions on BrowserStack, I found that starting with iOS 14 the numeric keyboard is the same as decimal but without the decimal key:

This is overall an improvement in usability I think except if you need to allow the user to enter negative numbers. So something to be aware of since I couldn’t find any way to type the - with that attribute set.

Unfortunately, all the sites I found that discuss inputmodes, show the old version like this post but it’s still a good resource and I recommend setting an inputmode where it makes to make it easier to type certain values on mobile devices.

Also, I like how Android handles it better:

Thank you for keeping RSS alive. You're awesome.

Reply by email

BFCache

Tue, 21 May 2024 00:00:00 +0000

Today I learned that the Backwards/forwards cache (BFCache) is a thing. This is the cache where the browser keeps a snapshot of a webpage so that it’s able to display almost instantly when a user clicks the back or forward buttons.

This post gives a nice overview of the BFCache and how it works — apparently “Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either back or forward”.

The Chrome Devtools also has a feature to let you test if your page is cacheable in the BFCache.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Preload critical assets

Wed, 13 Mar 2024 00:00:00 +0000

Today I learned that you can preload critical assets in a page by using the preload attribute on a link tag i.e. <link rel="preload">.

Especially useful for things like fonts that are discovered later by the browser.

Preload critical assets to improve loading speed

Thank you for keeping RSS alive. You're awesome.

Reply by email

CSP `connect-src` directive

Fri, 26 Jan 2024 00:00:00 +0000

Today I learned that there is a Content-Security-Policy (CSP) directive connect-src that you can use to restrict all outgoing requests from your website to only the domains that you specify.

This is a powerful mitigation against any kind of script injection attacks since no data can then be exfiltrated from your page.

It applies to XMLHttpRequest (AJAX), WebSocket, fetch(), <a ping> or EventSource.

CSP is an HTTP response header for enhancing the security of a site and there are of course several other directives you might want to enable.

This is a handy reference

If you want to see a real-world comprehensive example, take a look at the CSP header for haveibeenpwned.com (this links to the csp analyser from report-uri).

Thank you for keeping RSS alive. You're awesome.

Reply by email

Disable entire form

Wed, 24 Jan 2024 00:00:00 +0000

Today I learned that you can disable an entire form by wrapping all the inputs in a <fieldset disabled>.

You might think that you can disable a form with <form disabled> but unfortunately, the form element doesn’t have a disabled attribute.

Fieldsets are typically used to group related form elements (and in some cases can improve accessibility) — so you can have multiple in a form and disable portions of the form separately.

This is much more convenient than having to toggle the disabled attributes on every form element.

I also learned that there is a difference between styling a button with button:disabled and button[disabled], the former being the one you want to use in this case since the latter only matches a button with a disabled attribute.

Disabling an entire form in HTML

Thank you for keeping RSS alive. You're awesome.

Reply by email

Thin Space

Fri, 12 Jan 2024 00:00:00 +0000

Today I learned that there is an HTML entity called “thin space” that you can use when you need less space between two characters than the normal space.

The HTML code is  

Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect. - Typography Manual

You can see a demo here

Thank you for keeping RSS alive. You're awesome.

Reply by email

The `datalist` HTML element

Mon, 20 Nov 2023 00:00:00 +0000

Today I learned that there’s now an HTML element called datalist that’s basically an autocomplete-like input element.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Disabled buttons are bad for accessibility

Fri, 10 Nov 2023 00:00:00 +0000

Today I learned that disabled buttons are potentially bad for accessibility.

I realized long ago that disabled buttons can be bad for UX but I just saw Chris Ferdinandi’s post Don’t Disable Buttons, and learned that disabled buttons aren’t focusable which means they don’t work well with screen readers or navigating with the keyboard.

I usually recommend against disabling form submit buttons when there are validation errors because the user has no feedback as to why it’s disabled, but Chris gives the example of disabling while the form is being submitted (which I’ve probably done in the past) and he goes into detail about the issues with this approach and a good alternative.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Blob URLs

Thu, 02 Nov 2023 00:00:00 +0000

Today I learned that in a web page, when you’re working with Blob or File objects you can call URL.createObjectURL() to create a Blob URL that can be used as the source for anything that normally takes a URL like images or download links.

It’s also apparently a good alternative to base64 encoded Data-URIs especially when dealing with larger amounts of data since a base64 encoded file will be 33% larger than the raw binary.

I was running into issues trying to embed a large PDF with the <object> element and instead of setting a massive base64 string as the data source, I was able to convert it to a blob and use a blob url so it ends up looking something like:

<object data="blob:https://localhost/d827ea99-9e80-496a-a8e0-e107b83080e9" type="application/pdf"></object>

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use the `valueAsNumber` property of html number inputs

Mon, 02 Oct 2023 00:00:00 +0000

Today I learned about the valueAsNumber property of html number inputs.

So instead of having to parse the value like: const num = parseFloat(e.target.value)

You can do: const num = e.target.valueAsNumber

For example in react:

return (
    <input
      type="number"
      value={number}
      onChange={(e) => {
        // ✅
        const num = e.target.valueAsNumber
        setNumber(num)
      }}
    />
  )

Work With Number and Date Inputs in JavaScript

Thank you for keeping RSS alive. You're awesome.

Reply by email

SVG sprites

Thu, 28 Sep 2023 00:00:00 +0000

Today I learned about the <use> element and how you can use it to create SVG sprites. It turns out that my preferred way of working with svgs in react by embedding them in the components, is not great for performance or bundle size. But as Ben Adam’s post shows, it looks like inline svgs using sprites gives you the best performance to development experience tradoff.

Thank you for keeping RSS alive. You're awesome.

Reply by email

One-time code autocomplete

Wed, 27 Sep 2023 00:00:00 +0000

I just discovered that there is a autocomplete="one-time-code" value you can use on mobile devices where the operating system will autopopulate the field with a code that the user receives via SMS. I haven’t had a chance to test it out but it seems pretty cool and I wish every banking site would just add this one html attribute (since they seem unable to add any MFA option other than SMS).

SMS OTP code

Thank you for keeping RSS alive. You're awesome.

Reply by email

Disabling browser autofill in a form

Fri, 15 Sep 2023 00:00:00 +0000

Today I learned that autocomplete="off" tends to be completely ignored by browsers these days because they seem to have the attitude that websites don’t use it correctly.

Apparently the best way to prevent a browser from trying to autofill a field is to tell the browser it’s not the field it thinks it is with something like autocomplete="something-else". If it’s anything the browser doesn’t recognize it won’t try to fill it. It looks like autocomplete="new-password" is one people tend to use especially for any type="password" fields that aren’t actually meant to be a user’s login password. See this StackOverflow question for more discussion.

Likewise if you want to give the browser hints about what it should try to suggest you can use one of the recognized values like address-line1.

Thank you for keeping RSS alive. You're awesome.

Reply by email

A hidden button in an HTML form can be submitted

Tue, 25 Jul 2023 00:00:00 +0000

Even if a button is hidden with display: none, if it has a type of submit then it will still be activated if it’s the first button in a form and a user hits enter in a form field.

So it’s a good reason to always explicitly specify the type of a button since submit is the default but most of the time you want type="button".

FYI there’s an eslint rule for this for react.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Html on Brandon Pugh's Blog

Alerts, Callouts, and Admonitions

Prior art

datetime-local doesn't have full cross-browser support

How to Optimize Viewport for Mobile for Faster Interactions | DebugBear

Do not download the app, use the website

A Friendly Introduction to SVG

Building Websites With LLMS

Create exclusive accordions with HTML `` element

Use the element for light/dark images in markdown

A single input in a form can submit

setSelectionRange in Safari will focus the input

SRI integrity hash algorithms

History API state

Drag and drop upload

Input modes

BFCache

Preload critical assets

CSP `connect-src` directive

Disable entire form

Thin Space

The `datalist` HTML element

Disabled buttons are bad for accessibility

Blob URLs

Use the `valueAsNumber` property of html number inputs

SVG sprites

One-time code autocomplete

Disabling browser autofill in a form

A hidden button in an HTML form can be submitted

Create exclusive accordions with HTML `
` element