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.
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.
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!
If you’re on a device that does not show a pointer, here’s a recording of what the demo looks like:
In the code above I’ve also added a little triangle in the top left corner of the SVG, as that’s where the actual tip of the pointer is. Omitting it makes up for a really weird experience.
To customize the color of the tip you can change its fill value to any color you like. Although not recommended you can remove the entire <path> if you don’t want it.
Update 2020-01-27: As reader Louis Houbregts points out it’s also possible to set the X/Y coordinates to indicate where the tip of the pointer is.
cursor: url(…) 10 0, auto;
For emoji this isn’t an ideal option though, as emoji differ per platform/vendor.
To change the overall size of the emoji cursor, change the height and width attributes of the SVG. Best is to leave the other attributes (such as viewBox and font-size) alone, as those have been carefully tweaked.
My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack.
It’s not LAMP, WordPress, Rails, MEAN, Jamstack… I don’t do CSR (Client-side rendering), SSR (Server Side Rendering), SSG (Static Site Generation)…
My stack is HTML+CSS.
In practice this no-CMS/no-DB approach can be hard to maintain but for Steren’s blog — which sports no categories, no pagination, no next/prev, … — this “Boring by Default” approach is more than enough.
Of course you can still use your favorite static site generator to generate your markup, yet the main message to remember here is this:
You don’t need WordPress, or Hugo to put a blog online, or Angular, React or Next.js to put a web page online. Raw HTML and CSS do the job.
To start you can keep it simple. The basic building blocks of the web can get you quite far already.
If you’re dealing with images it’s quite common to show a small placeholder while the image is loading. You could go with grey placeholders, but a low-res blurred version of the original is preferred. That way you can, in the example use case of a website, use the Blur Up technique once the image is loaded. BlurHash is something that can help you with exactly that:
In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.
An example of a BlurHash would be LEHV6nWB2yk8pyo0adR*.7kCMdnj
Implementations that can encode and decode exist for TypeScript, PHP, Python, Swift, Kotlin, etc.