10 useful HTML file upload tips for web developers

A bit of an older post, but still relevant: Tapas Adhikary goes over some HTML attributes one can set on an input[type="file"], and uses of the File API:

  1. Simple file upload
  2. Multiple file uploads
  3. Know about file metadata
  4. Know about file accept property
  5. Manage file content
  6. Validate file size
  7. Show file upload progress
  8. How about directory upload?
  9. Let’s drag, drop and upload
  10. Handle files with objectURLs

10 useful HTML file upload tips for web developers →

~

Not covered in Tapas’s article is the capture attribute. Combined with accept you can have a user on a mobile device immediately take a picture or video:

<!-- Capture photo using the front/selfie camera -->
<input type="file" accept="image/*" capture="user">

<!-- Capture photo using the back camera -->
<input type="file" accept="image/*" capture="environment">

HTML Media Capture Examples →

Advent Calendars For Web Designers And Developers

I was planning on posting about the HTMHell Advent Calendar here on bram.us, but over at Smashing Magazine you a whole list of interesting Advent Calendars.

Once again, the web community has been busy with creating some fantastic advent calendars this year. As you’ll see, each and every one of these calendars are sure to cater for a daily dose of web design and development goodness with stellar articles, inspiring experiments, and even puzzles to solve.

Advent Calendars For Web Designers And Developers →

htmlq – Command-line HTML Processor

Similar to how jq allows you to extract content from JSON files on the CLI, htmlq allows you extract content from HTML files.

Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files.

You can pass in a local HTML file, but also pipe it to cURL requests.

For example, to get the links to all last articles on the homepage of bram.us, you can perform this request:

$ curl -X GET https://www.bram.us/ | htmlq "main h2 a" -a href

https​://www.bram.us/2021/09/03/next-js-apollo-server-side-rendering-ssr/
https​://www.bram.us/2021/09/03/multiple-accounts-and-git/
https​://www.bram.us/2021/09/03/random-paint-effects-with-houdini/
https​://www.bram.us/2021/09/02/crafting-organic-patterns-with-voronoi-tessellations/
https​://www.bram.us/2021/09/01/pick-colors-from-websites-with-the-eyedropper-api/
https​://www.bram.us/2021/09/01/the-universe-is-hostile-to-computers/
https​://www.bram.us/2021/08/27/morse-code-translator-html-css/
https​://www.bram.us/2021/08/27/vector-raster-why-not-both/
https​://www.bram.us/2021/08/27/key-data-structures-and-their-roles-in-renderingng/
https​://www.bram.us/2021/08/27/css-shapes-editor-extension-for-chrome-devtools/

Using main h2 a we extract the link elements that we need, and with the -a flag we can opt to only return the specified href attribute from those selected elements.

Installation possible via Brew:

brew install htmlq

htmlq — Like jq, but for HTML →

Highlight columns in HTML tables with <colgroup>

Interesting find by Manuel Matuzovic:

The other day I looked up colgroup on MDN […] the demo at the beginning of the page caught my attention. The author adds a class to the col element, which does nothing with the col element itself, at least not visually, because the element doesn’t get rendered on the page, but it applies the styles from the class to all the cells in the column.

Like so:


See the Pen
Highlight columns in HTML tables with `<colgroup>`
by Bramus (@bramus)
on CodePen.

Manuel also shares how to highlight a column upon clicking the table header.

Highlighting columns in HTML tables →

HTML Table with Sticky Header Row and Sticky First Column

Nice work by Chris Coyier:

I tried this on a table before and would swear it didn’t work back then. Perhaps I did something wrong, because it’s quite tricky as Chris details:

The “trick” at play here is partially the position: sticky; usage, but moreso to me, how you have to handle overlapping elements. A table cell that is sticky needs to have a background, because otherwise we’ll see overlapping content. It also needs proper z-index handling so that when it sticks in place, it’ll be on top of what it is supposed to be on top of.

A table with both a sticky header and a sticky first column →

“This website is a single HTML file”

This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content.

This setup is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere like a normal person.

Brilliant! 🤩

John Doe →

Implement footnotes in HTML with the <ruby> element

Looking for a way to implement footnotes in HTML, Thomas Steiner experimented with using the <ruby> element.

The MDN docs describe the ruby element as follows.

“The HTML <ruby> element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.”

Hmm 🤔, this sounds like it could fit the footnotes use case.

The markup looks like this:

<ruby tabindex="0">some term<rt>content for the footnote</rt></ruby>

Using CSS Counters number indicators are injected, and using :target the footnotes are shown.

Not sure if this is how <ruby> should be used, but it’s quite a nice solution. Let’s hope this will open up the discussion again to adding elements to allow native footnotes in HTML.

<ruby> HTML footnotes →

Alt vs Figcaption

This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough:

While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.

Examples of both functional and editorial descriptions in the full post!

Alt vs Figcaption →